/* ==========================================================================
   Header styling — Design option A (H1 header + M3 menu)
   Spec: docs/research/2026-09-26-design/background-study.md rounds 2–4
   ========================================================================== */

/* 1. Announcement / Top bar (Ivory-2 #F5EFE5) */
header.ts-header .header-top {
	background-color: var(--bj-ivory-2, #F5EFE5) !important;
	border-bottom: 1px solid var(--bj-line, rgba(28, 26, 23, .12)) !important;
	color: var(--bj-ink, #1C1A17) !important;
}
header.ts-header .header-top .container {
	position: relative;
	z-index: 2;
}
header.ts-header .header-top .header-store-notice {
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif);
	font-weight: 500;
	letter-spacing: .02em;
}
header.ts-header .header-top .top-header-menu a {
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-display, "Marcellus", serif) !important;
	font-size: var(--bj-fs-caption, 12px) !important;
	letter-spacing: .04em;
	transition: color .2s ease;
}
header.ts-header .header-top .top-header-menu a:hover,
header.ts-header .header-top .top-header-menu li.current-menu-item > a,
header.ts-header .header-top .top-header-menu li.current_page_item > a {
	color: var(--bj-ink, #1C1A17) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-color: var(--bj-gold-deep, #9C6D1C) !important;
}
/* 2. Middle header (Plum silk gradient #4A0F47 -> #5B1E57 -> #6A2A66 + 8% sheen) */
header.ts-header {
	position: relative;
	z-index: 990;
}
header.ts-header .header-middle {
	position: relative;
	z-index: 990 !important;
	background-color: var(--bj-purple-2, #5B1E57) !important;
	background-image: var(--bj-plum-silk) !important;
	border-bottom: 1px solid rgba(202, 146, 52, 0.55) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
}

/* Damask overlay: ivory ogee rings + gold dots, masked to 0 behind logo */
header.ts-header .header-middle::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--bj-damask);
	opacity: .65;
	-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 330px, #000 460px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
	mask-image: linear-gradient(to right, transparent 0, transparent 330px, #000 460px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
	z-index: 1;
}

/* Plum ribbon soft fade into page: 22px gradient dissolution */
header.ts-header .header-middle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 22px;
	margin-top: 1px;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(67, 10, 65, 0.16) 0%, rgba(67, 10, 65, 0.05) 50%, rgba(67, 10, 65, 0) 100%);
}
header.ts-header .header-middle > .container {
	position: relative;
	z-index: 2;
}

/* Tablet damask mask: logo is ~325px wide */
@media (min-width: 768px) and (max-width: 1279px) {
	header.ts-header .header-middle::before {
		-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 330px, #000 440px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
		mask-image: linear-gradient(to right, transparent 0, transparent 330px, #000 440px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
	}
}

/* Phone damask mask: logo is ~176px wide */
@media (max-width: 767px) {
	header.ts-header .header-middle::before {
		-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 185px, #000 250px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
		mask-image: linear-gradient(to right, transparent 0, transparent 185px, #000 250px), linear-gradient(to bottom, #000 0, #000 35%, rgba(0, 0, 0, 0.15) 100%);
	}
}

/* Full-height nav row stretch so dropdowns anchor consistently below header bottom */
header.ts-header .header-middle .header-middle-inner {
	align-self: stretch;
}
header.ts-header .header-middle .menu-wrapper,
header.ts-header .header-middle .ts-menu,
header.ts-header .header-middle nav.main-menu,
header.ts-header .header-middle ul.menu {
	height: 100%;
}
header.ts-header .header-middle ul.menu > li {
	height: 100%;
	display: flex;
	align-items: center;
}

/* 3. Menu M3: Marcellus 20px / 18px, 400 weight (never bold), ivory text */
header.ts-header .header-middle .menu-wrapper .menu > li > a {
	color: var(--bj-ivory, #FBF8F3) !important;
	display: inline-flex !important;
	align-items: center !important;
	padding: 7px 15px !important;
	margin: -7px -15px !important;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
header.ts-header .header-middle .menu-wrapper .menu > li > a .menu-label {
	color: var(--bj-ivory, #FBF8F3) !important;
	font-family: var(--bj-font-display, "Marcellus", serif) !important;
	font-weight: 400 !important;
	font-size: var(--bj-fs-menu, 20px) !important;
	letter-spacing: .5px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	transition: color .2s ease;
}
header.ts-header .header-middle .menu-wrapper .menu > li {
	margin-right: 36px !important;
}
header.ts-header .header-middle .menu-wrapper .menu > li:last-child {
	margin-right: 0 !important;
}

@media (max-width: 1279px) {
	header.ts-header .header-middle .menu-wrapper .menu > li > a .menu-label {
		font-size: 18px !important;
	}
	header.ts-header .header-middle .menu-wrapper .menu > li {
		margin-right: 24px !important;
	}
}

/* Active menu items: gold-light #D9A850 (>= 4.5:1 on plum). Hover/focus no longer recolour
 * the label — the plum-glass pill below carries the "pop" instead (owner, 2026-09-26) —
 * except the currently active item, which keeps its gold-light text through hover too. */
header.ts-header .header-middle .menu-wrapper .menu > li.current-menu-item > a .menu-label,
header.ts-header .header-middle .menu-wrapper .menu > li.current-menu-parent > a .menu-label,
header.ts-header .header-middle .menu-wrapper .menu > li.current-menu-ancestor > a .menu-label {
	color: var(--bj-gold-light, #D9A850) !important;
}
header.ts-header .header-middle .menu-wrapper .menu > li.current-menu-item > a,
header.ts-header .header-middle .menu-wrapper .menu > li.current-menu-parent > a {
	color: var(--bj-gold-light, #D9A850) !important;
}
/* Chevron removed (owner, 2026-09-26): the mega-menu opens on hover/focus/ArrowDown
 * regardless (megamenu.js), and the drop-icon's own glass pill duplicated the link's
 * hover pop — a second circle overlapping the first on Jewelry. One pill only;
 * aria-haspopup / aria-expanded stay on the link (megamenu.js) even though this is hidden. */
header.ts-header .header-middle .menu-wrapper .ts-menu-drop-icon {
	display: none !important;
}

/* Plum-glass hover/focus "pop" — top-level items, and Jewelry's drop-icon alongside its
 * link (owner, 2026-09-26): a translucent ivory pill on the plum header, text/icon colour
 * unchanged (ivory), padding already reserved above so nothing shifts when it appears. */
@media (hover: hover) {
	header.ts-header .header-middle .menu-wrapper .menu > li:hover > a,
	header.ts-header .header-middle .search-button:hover,
	header.ts-header .header-middle .tini-wishlist:hover,
	header.ts-header .header-middle .cart-control:hover {
		background-color: rgba(251, 248, 243, 0.14) !important;
		border-color: rgba(251, 248, 243, 0.32) !important;
		box-shadow: 0 4px 14px rgba(28, 26, 23, 0.16) !important;
	}
}
header.ts-header .header-middle .menu-wrapper .menu > li > a:focus-visible,
header.ts-header .header-middle .search-button:focus-visible,
header.ts-header .header-middle .tini-wishlist:focus-visible,
header.ts-header .header-middle .cart-control:focus-visible {
	background-color: rgba(251, 248, 243, 0.16) !important;
	border-color: rgba(251, 248, 243, 0.32) !important;
	box-shadow: 0 4px 14px rgba(28, 26, 23, 0.16) !important;
	outline: 2px solid #FBF8F3 !important;
	outline-offset: 3px !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.ts-header .header-middle .menu-wrapper .menu > li:is(:hover, :has(> a:focus-visible)) > a,
	header.ts-header .header-middle .menu-wrapper .menu > li > a:focus-visible,
	header.ts-header .header-middle .search-button:is(:hover, :focus-visible),
	header.ts-header .header-middle .tini-wishlist:is(:hover, :focus-visible),
	header.ts-header .header-middle .cart-control:is(:hover, :focus-visible) {
		-webkit-backdrop-filter: blur(10px) saturate(160%) !important;
		backdrop-filter: blur(10px) saturate(160%) !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	@media (hover: hover) {
		header.ts-header .header-middle .menu-wrapper .menu > li:hover > a,
		header.ts-header .header-middle .search-button:hover,
		header.ts-header .header-middle .tini-wishlist:hover,
		header.ts-header .header-middle .cart-control:hover {
			transform: translateY(-1px) !important;
		}
	}
	header.ts-header .header-middle .menu-wrapper .menu > li > a:focus-visible,
	header.ts-header .header-middle .search-button:focus-visible,
	header.ts-header .header-middle .tini-wishlist:focus-visible,
	header.ts-header .header-middle .cart-control:focus-visible {
		transform: translateY(-1px) !important;
	}
}

/* Sub-menus / dropdown panels: frosted ivory glass, rounded, soft shadow, 8px gap */
header.ts-header .header-middle .sub-menu {
	background: rgba(255, 253, 248, 0.96) !important;
	border: 1px solid rgba(202, 146, 52, 0.35) !important;
	border-radius: 16px !important;
	box-shadow: 0 18px 40px rgba(28, 26, 23, 0.14), 0 4px 12px rgba(28, 26, 23, 0.06) !important;
	padding: 12px 10px !important;
	margin-top: 24px !important;
	z-index: 9999 !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.ts-header .header-middle .sub-menu {
		background: rgba(252, 249, 243, 0.92) !important;
		-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
		backdrop-filter: blur(14px) saturate(160%) !important;
	}
}

/* Kill Jaroti theme's white opaque ::after that clipped corners and faded top */
header.ts-header .header-middle .sub-menu::after {
	display: none !important;
}

/* Invisible bridge so mouse hover doesn't drop across the gap */
header.ts-header .header-middle .sub-menu::before {
	content: "" !important;
	position: absolute !important;
	top: -26px !important;
	left: 0 !important;
	right: 0 !important;
	height: 26px !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Sticky header dropdown offset */
.sticky-wrapper.is-sticky .header-middle .sub-menu {
	margin-top: 17px !important;
}
.sticky-wrapper.is-sticky .header-middle .sub-menu::before {
	top: -19px !important;
	height: 19px !important;
}
/* Items: Jost 16px ink, comfortable padding */
header.ts-header .header-middle .sub-menu li {
	margin: 0 !important;
	padding: 0 !important;
}
header.ts-header .header-middle .sub-menu a,
header.ts-header .header-middle .sub-menu a .menu-label {
	color: var(--bj-ink, #1C1A17) !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: .01em !important;
}
header.ts-header .header-middle .sub-menu li > a {
	display: block !important;
	padding: 9px 16px !important;
	border-radius: 8px !important;
	transition: background .2s ease, color .2s ease !important;
}

/* Hover: ivory-2 row with gold-deep text */
header.ts-header .header-middle .sub-menu li a:hover,
header.ts-header .header-middle .sub-menu li a:focus,
header.ts-header .header-middle .sub-menu li:hover > a {
	background-color: var(--bj-ivory-2, #F5EFE5) !important;
	color: var(--bj-gold-deep, #9C6D1C) !important;
}
header.ts-header .header-middle .sub-menu li a:hover .menu-label,
header.ts-header .header-middle .sub-menu li:hover > a .menu-label {
	color: var(--bj-gold-deep, #9C6D1C) !important;
}

/* Occasions submenu width */
header.ts-header .header-middle .biyani-occasions .sub-menu {
	min-width: 240px !important;
}

/* 4. Header Icons: ivory text / stroke */
header.ts-header .header-middle .search-button .icon,
header.ts-header .header-middle .search-button .icon span,
header.ts-header .header-middle .tini-wishlist,
header.ts-header .header-middle .cart-control,
header.ts-header .header-middle .cart-control .ic-cart,
header.ts-header .header-middle .ts-mobile-icon-toggle,
header.ts-header .header-middle .ts-mobile-icon-toggle .icon {
	color: var(--bj-ivory, #FBF8F3) !important;
}
header.ts-header .header-middle .search-button .icon:before,
header.ts-header .header-middle .tini-wishlist:before,
header.ts-header .header-middle .cart-control .ic-cart:before,
header.ts-header .header-middle .ts-mobile-icon-toggle .icon:before {
	color: var(--bj-ivory, #FBF8F3) !important;
}

/* Plum-glass pop reserve — padding always present, cancelled by an equal negative margin,
 * so the hover/focus pill in the block above never shifts these icons (owner, 2026-09-26). */
header.ts-header .header-middle .search-button,
header.ts-header .header-middle .tini-wishlist,
header.ts-header .header-middle .cart-control {
	display: inline-flex !important;
	align-items: center !important;
	padding: 8px !important;
	margin: -8px 0 !important;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Badges (owner, 2026-09-26 round 2 — "the number does not really look nice" in-icon):
 * back to a small circle/pill, top-right of the icon, overlapping its edge ~6px (not
 * centred), ivory fill + plum text (no gold/brown), 2-digit counts widen into a pill via
 * min-width+padding alone. Icons are back to their plain outline (no font-size bump).
 * Hidden at 0 via .bj-badge-zero, toggled by megamenu.js (no CSS way to match "0" text;
 * CartCurrencyBugs' fragment updates only change the text, not this class/position). */
header.ts-header .header-middle :is(.count-number, .cart-number) {
	position: absolute !important;
	inset: auto !important;
	top: -4px !important;
	right: -6px !important;
	left: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 5px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	background-color: var(--bj-ivory, #FBF8F3) !important;
	border: 1px solid #4A1F4F !important;
	color: #4A1F4F !important;
	font-family: var(--bj-font-body, "Jost", sans-serif) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	line-height: 1 !important;
}
header.ts-header .header-middle :is(.count-number, .cart-number).bj-badge-zero {
	display: none !important;
}

/* Dropdown containers (cart popup, account dropdown): clean white ground & ink text */
header.ts-header .header-middle .dropdown-container {
	background-color: #ffffff !important;
	color: var(--bj-ink, #1C1A17) !important;
}
header.ts-header .header-middle .dropdown-container a {
	color: var(--bj-ink, #1C1A17) !important;
}

/* 5. Sticky header treatment (P plum silk gradient) */
.sticky-wrapper.is-sticky .header-sticky .header-middle {
	background-color: var(--bj-purple-2, #5B1E57) !important;
	background-image: var(--bj-plum-silk) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
	border-bottom: 1px solid rgba(202, 146, 52, 0.55) !important;
}
.sticky-wrapper.is-sticky .header-middle > .container {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* 6. Single-row phone header (max-width: 767px) */
@media (max-width: 767px) {
	header.ts-header .header-middle {
		padding: 8px 0 !important;
	}
	header.ts-header .header-middle > .container {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}
	header.ts-header .header-middle-inner {
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
	header.ts-header .header-middle .header-left {
		flex: 0 1 auto !important;
		min-width: 0 !important;
		width: auto !important;
	}
	header.ts-header .header-middle .header-right {
		flex: 0 0 auto !important;
		margin-left: auto !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
	}
	/* Sized by the space actually available beside the icon cluster (search+wishlist+cart+
	 * toggle, flush right; 15px container padding each side; ~8px breathing gap), not a flat
	 * px number: 176px overlapped the search tap target at 360px (owner-reported), while it
	 * was needlessly smaller than the footer's 197.8px wordmark everywhere the width was
	 * actually there to give it (owner-reported). Grows with the viewport, capped at the
	 * footer's own image width so neither header state ever looks smaller than it. */
	header.ts-header .header-middle .logo img.mobile-logo {
		width: clamp(120px, calc(100vw - 225px), 260px) !important;
		max-width: none !important;
		height: auto !important;
	}
	.sticky-wrapper.is-sticky .header-sticky .logo img.sticky-logo {
		width: clamp(110px, calc(100vw - 225px), 243px) !important;
		max-width: none !important;
		height: auto !important;
	}

	/* D16 mobile navigation (body.bj-mnav, gated by option biyani_mnav_enabled):
	 * the bottom tab bar owns Home, Occasions, Search, Wishlist and Menu (and its visual
	 * right-hand drawer replaces #group-icon-header). Hide the duplicated header icons
	 * (hamburger, wishlist, search) and old drawer at ≤767px so the top bar stays a clean
	 * Logo + Cart row. .my-wishlist-wrapper stays in the DOM (display:none only) so
	 * nav.js's MutationObserver still mirrors the live YITH wishlist count. */
	body.bj-mnav header.ts-header .header-middle .ts-mobile-icon-toggle,
	body.bj-mnav header.ts-header .header-middle .my-wishlist-wrapper,
	body.bj-mnav header.ts-header .header-middle .tini-wishlist,
	body.bj-mnav header.ts-header .header-middle .search-button,
	body.bj-mnav header.ts-header .header-middle .search-wrapper,
	body.bj-mnav #group-icon-header {
		display: none !important;
	}
}

/* Fold 7 open (~744px) and similar tablet-width phones: still the single-row layout above
 * (no room for the desktop nav — even at the smallest desktop size it needs ~560px, and
 * this tier has under 250px left after the grown logo and the icon cluster), but pinning
 * the logo flush-left and the icons flush-right left a ~371px dead gap between them
 * (owner-reported). Centre the lockup as one group with a small fixed gap instead, so the
 * spare width becomes two even side margins, not one empty band. */
@media (min-width: 700px) and (max-width: 767px) {
	header.ts-header .header-middle-inner {
		justify-content: center !important;
		gap: 32px !important;
	}
	header.ts-header .header-middle .header-right {
		margin-left: 0 !important;
	}
}

/* 7. Search overlay: header-middle sits at z-index:990 (glass-pop needs it above the
 * page); the theme's search overlay is z-index:9 (style.css:2387), so opening it painted
 * the plum header — including the menu labels — right over the search field
 * (owner-reported regression, 2026-09-26). Bring it above everything in the header and
 * give it the header's own frosted plum glass so the menu can't show through, with ivory
 * text/icons for contrast. Esc-to-close and focus-return live in megamenu.js. */
header.ts-header .header-sticky > .ts-search-by-category {
	z-index: 1000 !important;
	background-color: var(--bj-purple-2, #5B1E57) !important;
	background-image: var(--bj-plum-silk) !important;
	color: var(--bj-ivory, #FBF8F3) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.ts-header .header-sticky > .ts-search-by-category {
		background-color: rgba(74, 15, 71, 0.88) !important;
		-webkit-backdrop-filter: blur(16px) saturate(160%) !important;
		backdrop-filter: blur(16px) saturate(160%) !important;
	}
}
/* The field is a 48px frosted pill centred in the band (owner, 2026-09-27: "a bit broken" — the
 * theme stretched the input to the band's full height, so its rounded ends met the band edges
 * and the 1px plum outline showed as a dark ring). The search icon sits inside it on the left. */
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-field {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}
/* Not full width (owner, 2026-09-27: "do we need the full width?"): a centred 720px pill — the
 * width of the menu column it replaces — with the search icon inside its left end. */
header.ts-header .header-sticky > .ts-search-by-category form {
	flex: 1 1 auto !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table {
	max-width: 720px !important;
	margin: 0 auto !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-button {
	left: 16px !important;
	right: auto !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-field input[type="text"] {
	color: var(--bj-ivory, #FBF8F3) !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: 48px !important;
	padding: 0 24px 0 56px !important;
	background: rgba(251, 248, 243, 0.10) !important;
	border: 1px solid rgba(251, 248, 243, 0.28) !important;
	border-radius: 999px !important;
	outline: none !important;
	box-shadow: none !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-field input[type="text"]:focus-visible {
	border-color: rgba(251, 248, 243, 0.6) !important;
	box-shadow: 0 0 0 2px rgba(251, 248, 243, 0.35) !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-field input[type="text"]::placeholder {
	color: rgba(251, 248, 243, 0.62) !important;
}
header.ts-header .header-sticky > .ts-search-by-category .search-table .search-button,
header.ts-header .header-sticky > .ts-search-by-category .close {
	color: var(--bj-ivory, #FBF8F3) !important;
}

/* 8. Tablet single-row header fix (768–991, real iPad portrait 768/834/900/991 — owner-reported
 * 2026-09-26: "the menu is completely broken, it crosses the boundary between ribbon and the
 * hero on all pages"). The THEME's own breakpoint (`max-width: 991px`, unmodified upstream CSS)
 * demotes `.menu-wrapper.menu-center` to a full-width second row below the logo/icon row
 * (`order: 10; width: calc(100% + 50px)`) — at 992px+ there's room for the nav beside the logo
 * so the theme never triggers it, but 768–991 is exactly the iPad-portrait width band, and the
 * second row lands OUTSIDE the plum band (`.header-middle`'s own height only wraps the first
 * row), hanging into the hero below. 992px+ (iPad landscape, iPad Pro 12.9 portrait) already
 * renders one row with the existing sizing — untouched, no fix needed there.
 * Fix: keep everything on one row — shrink the nav's own gaps/padding, and reuse the ALREADY-
 * SHIPPED sticky/compact logo asset (5. above — same wordmark, no tagline) as the default mark
 * at this tier instead of a second image. Icon cluster is untouched: the theme's own ≤991
 * tightening (search icon-only text already hidden by the theme at ≤1279 — style.css:14772)
 * already makes it compact enough to fit. Mega-menu PANEL touch behaviour is a separate fix in
 * megamenu.css/js (this block only fixes the header row itself). */
@media (min-width: 768px) and (max-width: 991px) {
	header.ts-header .header-middle-inner {
		flex-wrap: nowrap !important;
		gap: 10px !important;
	}
	header.ts-header .header-middle .menu-wrapper.menu-center {
		width: auto !important;
		order: 0 !important;
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding: 0 !important;
		border-width: 0 !important;
		margin: 0 !important;
	}
	header.ts-header .header-middle .logo-wrapper,
	header.ts-header .header-middle .logo {
		padding-right: 0 !important;
	}
	header.ts-header .header-middle .logo img.normal-logo {
		display: none !important;
	}
	header.ts-header .header-middle .logo img.sticky-logo {
		display: inline-block !important;
		width: 156px !important;
		max-width: none !important;
		height: auto !important;
	}
	header.ts-header .header-middle .menu-wrapper .menu > li {
		margin-right: 10px !important;
	}
	header.ts-header .header-middle .menu-wrapper .menu > li > a {
		padding: 11px 8px !important;
		margin: -11px -8px !important;
	}
	header.ts-header .header-middle .menu-wrapper .menu > li > a .menu-label {
		font-size: 15px !important;
		line-height: 1.3 !important;
	}
}