/* Site-wide header navigation.
 * Core's navigation block only switches to the hamburger overlay below a fixed
 * 600px breakpoint, but our menu (logo + 8 top-level items with dropdowns,
 * plus the "Зв'язатись" CTA button added alongside it) wraps onto two lines
 * well before that. The collapse point is the UI kit's desktop breakpoint —
 * desktop starts at 1200px, so anything narrower gets the hamburger.
 */

/* Desktop-only header CTA — hidden by default (unstyled would otherwise just
   fall back to a plain block-level link cluttering the mobile bottom bar);
   the min-width:1200px block further down switches it back on and styles it. */
.sx-header__cta {
	display: none;
}

/* Same treatment for the membership mark beside the cart: a wide wordmark has
   no room on the phone's bottom bar, so it is off until the desktop block
   further down turns it on. */
.sx-header__sab {
	display: none;
}

/*
 * WordPress core applies its own site-wide default — `:where(.wp-site-blocks
 * :focus){outline-width:2px;outline-style:solid}` — to *any* focused
 * interactive element, so a plain click on a header link (e.g. "Головна")
 * leaves a rectangular outline drawn around it, same underlying cause as the
 * hamburger button's outline (see the mobile media query below). Suppress it
 * for a plain click, keep it for real keyboard use (:focus-visible), applied
 * here to every header link regardless of viewport.
 */
.sx-header .wp-block-navigation-item__content:focus {
	outline: none;
}

.sx-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-4 );
	outline-offset: 4px;
}

/*
 * The logo link needs the same treatment and was missing it: it is a plain <a>
 * in this pattern, not a navigation item, so the rule above never reached it
 * and clicking the logo left core's outline drawn around the whole lock-up.
 *
 * Suppressed for the click, kept for the keyboard — someone tabbing through
 * the header still has to be able to see where they are.
 */
.sx-header__brand:focus {
	outline: none;
}

.sx-header__brand:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-4 );
	outline-offset: 4px;
}

/* The grey flash a tap leaves on a phone, for the same reason. */
.sx-header__brand {
	-webkit-tap-highlight-color: transparent;
}

/* ---- Current page ----
   WordPress marks the item you are on with aria-current="page" and, for pages
   that are real menu entries, .current-menu-item — but nothing in the CSS ever
   read either, so the menu looked identical on every page. Weight and colour
   here (both viewports); the desktop underline is handled with the hover
   animation further down, the mobile panel needs !important to beat the colour
   the open overlay forces on every item. */

.sx-header .wp-block-navigation-item__content[aria-current="page"],
.sx-header .current-menu-item > .wp-block-navigation-item__content,
.sx-header .current-menu-ancestor > .wp-block-navigation-item__content {
	font-weight: 600;
	color: var( --sx-brand-text );
}

/* Desktop menu polish — modelled on medias.com.ua's header: an animated
   underline on hover, a rotating chevron on open submenus, a softer/rounder
   dropdown panel, and a pill-shaped outlined CTA button next to the nav. */
@media ( min-width: 1200px ) {
	/*
	 * Pinned to the top of the window while the page scrolls.
	 *
	 * sticky rather than fixed: the header keeps its place in the flow, so
	 * nothing below it has to be pushed down by its height, and there is no
	 * jump at the moment it takes hold. Offset by the admin bar so it does not
	 * hide underneath it when someone is logged in.
	 *
	 * The bar is transparent at the top of the page, exactly as it was before —
	 * the surface and the hairline arrive only once something has scrolled
	 * under it, which is when they are needed. header-nav.js sets .is-stuck.
	 */
	/*
	 * WordPress wraps a template part in its own <div>, and a sticky element can
	 * only travel inside its parent's box. That wrapper is exactly as tall as the
	 * header, so there were zero pixels to travel and the bar scrolled away like
	 * any static element. Dissolving the wrapper makes .wp-site-blocks the
	 * header's parent, and that is the full height of the page.
	 *
	 * Safe to remove: this wrapper carries no margin, padding, background or
	 * border of its own — it exists only to mark where the part begins.
	 */
	.wp-site-blocks > .wp-block-template-part:first-child {
		display: contents;
	}

	.sx-header {
		position: sticky;
		top: var( --sx-admin-bar );
		z-index: var( --sx-z-header );
		transition: background-color var( --sx-transition-base ) var( --sx-ease ),
			border-color var( --sx-transition-base ) var( --sx-ease );
	}

	/* !important for the same reason the mobile bar further down needs it: the
	   navigation block's own configured colours are set on this element and win
	   over a plain class of ours. */
	.sx-header.is-stuck {
		background-color: var( --wp--preset--color--base ) !important;
		border-bottom: 1px solid var( --wp--preset--color--accent-6 );
	}

	.sx-header .wp-block-navigation-item__content {
		position: relative;
	}

	/* Growing underline instead of the plain browser/theme.json default
	   (text-decoration:underline) — overridden off here so only this one
	   shows. Skipped on submenu rows (styled separately below) so it doesn't
	   double up with the dropdown's own hover background. */
	.sx-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 100%;
		bottom: -2px;
		height: 2px;
		background: currentColor;
		opacity: 0.8;
		transition: right 0.25s ease;
	}

	.sx-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after {
		right: 0;
	}

	.sx-header .wp-block-navigation-item__content:hover {
		text-decoration: none !important;
	}

	/* The page you are on keeps the underline drawn. It reuses the hover
	   animation's own ::after rather than adding a second underline, so the two
	   never stack on the current item when the pointer passes over it. */
	.sx-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current="page"]::after,
	.sx-header .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after,
	.sx-header .wp-block-navigation__container > .current-menu-ancestor > .wp-block-navigation-item__content::after {
		right: 0;
		opacity: 1;
	}

	/* Chevron rotates open on hover, matching the dropdown itself appearing. */
	.sx-header .wp-block-navigation__submenu-icon svg {
		transition: transform 0.2s ease;
	}

	/* Submenus open on click now (not hover — see the "openSubmenusOnClick"
	   nav block setting), so the chevron rotates with the toggle button's own
	   aria-expanded state instead of a hover state that no longer opens
	   anything. In this mode the icon is a sibling <span> right after the
	   toggle button, not nested inside it. */
	.sx-header .wp-block-navigation-submenu__toggle[ aria-expanded="true" ] + .wp-block-navigation__submenu-icon svg {
		transform: rotate( 180deg );
	}

	/* Dropdown panel: rounded card with a soft shadow instead of the sharp-
	   cornered, hard-bordered default. */
	.sx-header .wp-block-navigation__submenu-container {
		margin-top: 14px;
		padding: 0.5rem;
		/*
		 * All three panels drop from the same line — just under the row of
		 * menu words — and all three open rightwards from their menu item.
		 *
		 * Anchored to the item, core's top:100% measured from the item itself,
		 * so the panels started under the words while the products mega-menu
		 * (anchored to the header) started 31px lower, off the header's bottom
		 * edge: three menus, two different lines, and the wide one reading as
		 * detached. --sx-nav-row-b is where the words end, measured by
		 * header-nav.js, so every panel hangs off the menu itself with the
		 * 14px above it as the gap.
		 *
		 * With both offsets auto the panel keeps its static position
		 * horizontally, which is its item's left edge — so it opens to the
		 * right. !important because core's own right-justified rule
		 * (".items-justified-right .wp-block-navigation__container .has-child
		 * .wp-block-navigation__submenu-container") pins right:0 at a higher
		 * specificity, which is what had these two opening leftwards.
		 *
		 * top carries !important for the same reason, and here it is the
		 * difference between a panel and no panel: core's top:100% measured
		 * the list item while the panel was absolute, but against a fixed
		 * panel it means the full height of the window, which drops all three
		 * below the fold.
		 */
		position: fixed !important;
		top: calc( var( --sx-admin-bar ) + var( --sx-nav-row-b, 57px ) ) !important;
		left: auto !important;
		right: auto !important;
		border: none !important;
		border-radius: 14px;
		box-shadow: 0 20px 48px rgba( 20, 25, 35, 0.14 );
		/*
		 * Core caps these at min-width:200px, which forced long product names
		 * ("BAS Комплексне управління підприємством (КУП)") to wrap over 2-3
		 * lines and made the panel taller than the viewport. Size to the
		 * longest label instead, with a cap so it can't run off-screen.
		 * !important because core's own open-state rule
		 * (".has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]
		 * ~ .wp-block-navigation__submenu-container") sets width:auto at a
		 * higher specificity than this selector can reach.
		 */
		width: max-content !important;
		max-width: min( 420px, calc( 100vw - 3rem ) ) !important;
	}

	/*
	 * The grouped "Продукти" panel is a mega-menu instead: its category
	 * columns sit side by side, so it needs a wider cap than the plain
	 * single-list dropdowns above — and, being wider than the room left of
	 * the header's edge, its own horizontal anchor.
	 */
	.sx-header .wp-block-navigation__submenu-container.sx-mega {
		display: flex;
		/*
		 * !important: core sets flex-direction:column on
		 * ".wp-block-navigation .has-child .wp-block-navigation__submenu-container"
		 * — same specificity as this selector, so without it the cascade order
		 * decides and the columns stack instead of sitting side by side.
		 */
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 0.25rem 1.5rem;
		padding: 1.25rem;
		/*
		 * The one panel that cannot simply start at its menu item: it needs
		 * 1105px for its labels, and only 760px separate "Продукти" from the
		 * header's content edge. Pinned to that edge instead, so it finishes
		 * flush with the header and opens across the right half that was
		 * standing empty. Anchored to the word, right:0 could only grow the
		 * panel leftwards and ran it off the screen — 63px lost at 1440,
		 * 134px at 1366, 161px at 1280, which is what turned "BAS ERP" into
		 * "S ERP".
		 *
		 * Position and top come from the rule above, so it drops from the
		 * same line as the other two.
		 */
		box-sizing: border-box;
		right: min( 4vw, 60px ) !important;
		/*
		 * max-content, so the panel is only as wide as its longest label
		 * actually needs and product names sit on one line. Capped to leave a
		 * 1.5rem margin at the far edge: percentages on a fixed element
		 * resolve against the window minus its scrollbar, which 100vw does
		 * not, so this is the honest figure.
		 */
		width: max-content !important;
		max-width: calc( 100% - min( 4vw, 60px ) - 1.5rem ) !important;
		/*
		 * The BAS column grows with the catalogue, and at the 1200px
		 * breakpoint its names wrap to two lines — nine rows already stood
		 * 21px taller than an 800px-high laptop screen, silently cutting the
		 * price-list link off the bottom. Cap the panel to whatever is left
		 * under the header and let it scroll, so the next product added can't
		 * hide the last one.
		 *
		 * !important on the overflow for the same reason as the
		 * flex-direction above: core's open state
		 * (".wp-block-navigation .has-child:not(.open-on-click):hover >
		 * .wp-block-navigation__submenu-container") sets overflow:visible at
		 * a higher specificity, which would leave the capped panel spilling
		 * off the bottom of the screen with no way to reach it.
		 */
		max-height: calc( 100vh - var( --sx-sticky-top ) - 1.5rem );
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	/*
	 * Content-sized rather than three equal thirds: equal columns are only as
	 * wide as the narrowest one can afford, which is what forced "BAS
	 * Комплексне управління підприємством" onto three lines while the ESET
	 * column sat half empty. min-width:0 keeps a column shrinking rather than
	 * wrapping onto a second row if the catalogue ever outgrows the window.
	 */
	.sx-header .sx-mega__col {
		flex: 0 1 auto;
		min-width: 0;
	}

	/* Full-width row of its own, under every column. */
	.sx-header .sx-mega__extras {
		flex-basis: 100%;
	}

	/*
	 * Core makes the row's <li> a flex container, which left the link shrunk
	 * to its own text — so the hover highlight hugged the words and you had to
	 * aim at "BAS ERP" itself, while a long name like "BAS Комплексне
	 * управління підприємством" happened to fill the column and looked right.
	 * Growing the link to the flex line makes every row the same width: the
	 * whole row is both the target and the highlight.
	 */
	.sx-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		flex: 1 1 auto;
		border-radius: 8px;
		padding: 0.65rem 1rem !important;
		transition: background-color 0.15s ease;
	}

	.sx-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var( --wp--preset--color--accent-5 );
		text-decoration: none !important;
	}

	/* Product links sit slightly indented under their group's logo header, so
	   the grouping reads at a glance. */
	.sx-header .wp-block-navigation__submenu-container .wp-block-navigation-link .wp-block-navigation-item__content {
		padding-left: 1.35rem !important;
	}

	/*
	 * The membership mark, between the last menu item and the cart.
	 *
	 * Height rather than width, so the 1023x346 source scales on its own and
	 * the mark keeps its proportions whatever gets uploaded next. 34px puts it
	 * a step below the 52px site logo — this is a credential, not a second
	 * brand, and it should not compete with the one it stands beside.
	 */
	/*
	 * Scoped through .sx-header on purpose. WordPress emits a global
	 * `.is-layout-flex > :is(*, div) { margin: 0 }`, and that `div` inside the
	 * :is() gives it 0-1-1 — one notch above a bare class of ours, so a plain
	 * .sx-header__sab margin was being zeroed out and the mark sat on the
	 * parent's 8px gap alone, right against "Контакти".
	 */
	.sx-header .sx-header__sab {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
		/* On top of the row's own 8px gap, so the mark reads as separate from
		   the menu rather than as its last item. */
		margin-inline-start: 1.25rem;
	}

	.sx-header__sab img {
		display: block;
		width: auto;
		height: 34px;
	}

	/*
	 * CTA button next to the nav links.
	 *
	 * Every number here is a whole pixel on purpose. It used to be sized by
	 * padding in rem — 0.7rem top and bottom — which made the box 48.375px
	 * tall, and the header centres it in a 52px row, so the button landed at
	 * y = 17.8125. A 1px border on a fractional edge is drawn across two device
	 * pixels at partial opacity each: the line came out soft and grey instead
	 * of a crisp hairline, which is what it looked like on screen.
	 *
	 * A fixed 48px height in a 52px row puts the top edge on y = 18 exactly.
	 *
	 * The horizontal edges could not be fixed the same way: the header's own
	 * container ends at x = 1367.40625, so the rounded caps always straddle a
	 * pixel and a 1px stroke on a curve there is always soft. So there is no
	 * stroke. The button is a filled shape, and the edge of a filled shape
	 * antialiases into a clean boundary instead of a faded hairline.
	 *
	 * The colour is explicit rather than inherited, because on the home page
	 * this sits on video where the surrounding text is white — inheriting there
	 * would put white letters on a near-white pill.
	 */
	.sx-header__cta {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		height: 48px;
		white-space: nowrap;
		margin-left: 8px;
		padding: 0 26px;
		border: 0;
		border-radius: 999px;
		background: var( --sx-neutral-100 );
		color: var( --wp--preset--color--contrast );
		font-size: var( --wp--preset--font-size--medium );
		font-weight: 500;
		text-decoration: none !important;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	/*
	 * The fill is the brand red, not near-black. This is the site's primary
	 * call to action and it was the only one on the site that never showed the
	 * brand colour — every other "поговорити з нами" button is red, so a black
	 * one here read as a different button belonging to a different design.
	 *
	 * One rule for both headers: the button now carries its own background in
	 * every state, so the transparent home header needs no variant of its own.
	 */
	.sx-header__cta:hover {
		background: var( --sx-brand );
		color: var( --sx-white ) !important;
	}
}

/*
 * The narrow end of the desktop range, where the menu had started wrapping and
 * dropping "Контакти" onto a second line.
 *
 * The seven words need 598px on one line and the row only clears that from
 * about 1232px up — at 1200 the menu is handed 569px, 29px short. There is no
 * slack to reclaim beside the logo: the gap that looks empty there is the menu
 * block's own, left over because it is right-justified, so its first row starts
 * short of its left edge. What actually buys the line back is the spacing
 * between the words: at 12px the row needs 555px and fits with room to spare,
 * while the site's own gutter stays put and the logo keeps its alignment with
 * the page content below.
 */
@media ( min-width: 1200px ) and ( max-width: 1319px ) {
	.sx-header nav.wp-block-navigation,
	.sx-header .wp-block-navigation__container {
		gap: 12px;
	}
}

@media ( max-width: 1199px ) {
	.sx-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.sx-header .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none !important;
	}

	/*
	 * Core renders its own dedicated close (X) button floating inside the
	 * opened panel, on top of the hamburger button that's still sitting in
	 * the bottom bar underneath — two separate controls for one job. Hide
	 * it; header-nav.js still fires a real .click() on it programmatically
	 * (see onOpenButtonClick) to close the menu when the hamburger itself is
	 * tapped again, which works fine on a display:none button — only the
	 * hamburger icon needs to visually morph into an X (also in
	 * header-nav.js) to signal the toggled state.
	 */
	.sx-header .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	/*
	 * Core also reserves padding-top:calc(2rem + 24px) on the content area
	 * specifically to keep the list clear of that floating close button —
	 * with the button hidden above, that reserved space is just a dead gap
	 * at the top of the panel. Drop it back to match the other three sides
	 * (all 0, the panel's own edge padding already provides the breathing
	 * room).
	 */
	/* Core reserves padding here for its floating close button, which this theme
	   hides — the reserved space would just be a dead band at the top. Zeroed
	   on every side, and on the two wrappers core nests between the overlay and
	   the list, so nothing between the panel edge and the first row can hold
	   space of its own. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		padding: 0 !important;
		margin: 0 !important;
	}

	/*
	 * The hamburger icon: 3 plain bars (header-nav.js builds these once,
	 * replacing core's static SVG) instead of a single static icon, so the
	 * open/close toggle can be a real animated morph into an X — top and
	 * bottom bars rotate 45°/-45° and meet in the middle, the middle bar
	 * fades out. currentColor picks up whatever color the surrounding
	 * "color:#fff!important" rule above sets on the button itself.
	 */
	.sx-header .wp-block-navigation__responsive-container-open .sx-burger {
		position: relative;
		display: inline-block;
		width: 28px;
		height: 19px;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger-bar {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		background: currentColor;
		border-radius: 1px;
		transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger-bar:nth-child( 1 ) {
		top: 0;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger-bar:nth-child( 2 ) {
		top: 8px;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger-bar:nth-child( 3 ) {
		top: 16px;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger.is-open .sx-burger-bar:nth-child( 1 ) {
		top: 8px;
		transform: rotate( 45deg );
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger.is-open .sx-burger-bar:nth-child( 2 ) {
		opacity: 0;
	}

	.sx-header .wp-block-navigation__responsive-container-open .sx-burger.is-open .sx-burger-bar:nth-child( 3 ) {
		top: 8px;
		transform: rotate( -45deg );
	}

	/*
	 * theme.json's global button style sets an outline-color/offset on every
	 * <button>:focus site-wide, and since tapping this button focuses it, a
	 * rectangular outline was showing up around the (roughly square) icon —
	 * looking like a little box drawn around the bars/X. Suppress it for a
	 * plain tap/click, but keep it for real keyboard use (:focus-visible) so
	 * the control doesn't lose its focus ring for keyboard users.
	 */
	.sx-header .wp-block-navigation__responsive-container-open:focus {
		outline: none;
	}

	.sx-header .wp-block-navigation__responsive-container-open:focus-visible {
		outline: 2px solid var( --wp--preset--color--accent-4 );
		outline-offset: 2px;
	}
}

/* Mobile: move the header bar to the bottom of the screen so the logo and the
   hamburger toggle sit within thumb reach, instead of up at the top. Applies
   regardless of the homepage's transparent-header treatment — the bottom bar
   always needs its own solid background to stay readable over any content
   scrolling behind it. */
@media ( max-width: 1199px ) {
	/*
	 * The bottom bar, in three zones: the logo on the left, the burger dead
	 * centre, search and cart on the right.
	 *
	 * The burger is centred by taking it out of the flow rather than by
	 * balancing the two sides. It lives inside the navigation block, which sits
	 * in the same group as the cart — so any layout that centres it by sizing
	 * its neighbours would shift the moment the cart badge appears or the logo
	 * changes width.
	 */
	/* Consultation is a desktop control. On the phone the bar has room for
	   three things and this is not one of them; the page's own calls to action
	   carry it there. */
	.sx-header .sx-header__cta {
		display: none !important;
	}

	/* Product logos are for the desktop mega-menu, where each column is headed
	   by a brand mark. The drill-down panel is a list of rows, and a picture in
	   every row turns it into a catalogue. */
	.sx-header .sx-menu-group__logo {
		display: none;
	}

	/*
	 * An island above the bottom edge, not a strip glued to it — the same
	 * shape medias.com.ua uses, and for the same reason. Android hides and
	 * restores its own address bar as you scroll, which drags anything pinned
	 * to an edge with it; a bar that already floats free of the edge absorbs
	 * that drift, while one flush against it visibly peels away.
	 */
	.sx-header {
		position: fixed !important;
		top: auto !important;
		bottom: calc( var( --sx-bar-gap ) + env( safe-area-inset-bottom, 0px ) );
		left: var( --sx-bar-gap );
		right: var( --sx-bar-gap );
		z-index: var( --sx-z-header );
		background: var( --wp--preset--color--base ) !important;
		border: 1px solid var( --wp--preset--color--accent-6 ) !important;
		border-radius: 16px;
		box-shadow: 0 6px 24px rgba( 20, 25, 35, 0.12 );
		/* Matches the panel's own 0.35s grow, so the bar changes surface as the
		   menu opens rather than snapping ahead of it. */
		transition: background-color 0.3s ease, border-color 0.3s ease;
	}

	.sx-header .wp-block-navigation-item__content,
	.sx-header .wp-block-navigation__submenu-icon path,
	.sx-header .wp-block-navigation-submenu__toggle,
	.sx-header .wp-block-navigation__responsive-container-open {
		color: var( --wp--preset--color--contrast ) !important;
		fill: var( --wp--preset--color--contrast ) !important;
		stroke: var( --wp--preset--color--contrast ) !important;
	}

	/* The opened overlay is a white card, same as the bottom bar it grows from,
	   so its items keep the bar's dark text and icon colour rather than
	   flipping. Use currentColor rather than "inherit" for fill/stroke — the
	   icon paths have no stroke of their own, so "inherit" resolved to the SVG
	   default (none) and left the submenu chevrons invisible. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon path,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
		color: inherit !important;
		fill: currentColor !important;
		stroke: currentColor !important;
	}

	/* Current page, restated so it survives the two rules above that force a
	   colour onto every item in the bar and in the open panel.

	   !important alone was not enough and never had been — it only decides
	   against a normal declaration, and both of those rules are !important
	   too, at which point specificity settles it. Theirs is (0,4,0) against
	   this rule's (0,3,0), so the current item was going out at the panel's
	   own colour: bold, as intended, but black. Repeating the open panel in
	   the selector puts this back on top. */
	.sx-header .wp-block-navigation-item__content[aria-current="page"],
	.sx-header .current-menu-item > .wp-block-navigation-item__content,
	.sx-header .current-menu-ancestor > .wp-block-navigation-item__content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content {
		color: var( --sx-brand-active ) !important;
	}

	/*
	 * One number for the bar's height, used by everything that has to sit
	 * against it. It used to be written as 92px in three places while the bar
	 * actually measured 85 — which is where the strip of background between the
	 * open menu and the bar came from. min-height below makes the constant true
	 * rather than approximately true.
	 */
	:root {
		--sx-bar-h: 60px;
		/* The row's block padding inside the bar. One number, because the
		   burger's cell reaches back over it with a negative margin of the
		   same size — when the two disagreed the tap zone stuck out above the
		   bar and a tap on the page opened the menu. */
		--sx-bar-pad: 8px;
		/* How far the floating bar stands off the screen edges. */
		--sx-bar-gap: 12px;
	}

	.sx-header {
		min-height: var( --sx-bar-h );
	}

	/*
	 * The logo carries an inline height:52px from the header pattern, which is
	 * the desktop size and what made the bottom bar 84px tall — a third of it
	 * was logo. On a phone the bar should be a thin strip under the content,
	 * so the mark shrinks with it. Inline styles beat a plain rule, hence the
	 * !important.
	 */
	/*
	 * As tall as the bar's inner row, so the mark fills its cell instead of
	 * floating in the middle of it. The inline height:52px from the header
	 * pattern is the desktop size and would make the bar 84px tall again.
	 */
	.sx-header .sx-header__logo {
		height: 42px !important;
	}

	/*
	 * The row inside the bar carries 16px of block padding from the header
	 * pattern. With the shorter logo that padding is most of what is left of
	 * the old height, so it comes down to 8 and the bar lands on --sx-bar-h
	 * exactly: 8 + 44 (the tap targets) + 8.
	 */
	.sx-header .wp-block-group.alignwide {
		padding-top: var( --sx-bar-pad ) !important;
		padding-bottom: var( --sx-bar-pad ) !important;
	}

	/*
	 * Clear the bar, all of it: its height, the gap it floats on, and whatever
	 * the phone reserves for its own gesture strip.
	 */
	body {
		padding-bottom: calc( var( --sx-bar-h ) + var( --sx-bar-gap ) * 2 + env( safe-area-inset-bottom, 0px ) );
	}

	/* Floating menu panel instead of a full-screen sheet: centered, sitting just
	   above the bottom bar, growing open from the bottom edge like a blind. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: auto !important;
		left: var( --sx-bar-gap ) !important;
		right: var( --sx-bar-gap ) !important;
		/*
		 * Stands on the bar, edge to edge with it: the bar's own height plus
		 * the gap it floats on, and 8px of air between the two so they read as
		 * two cards of one set rather than one tall block.
		 */
		bottom: calc( var( --sx-bar-h ) + var( --sx-bar-gap ) + env( safe-area-inset-bottom, 0px ) + 8px ) !important;
		top: auto !important;
		width: auto !important;
		/* Rounded all round now that it no longer meets the bar. */
		border-radius: 18px;
		/* No side padding: the dividers between rows have to run the full width
		   of the panel, so the inset moves onto the rows themselves below. */
		/*
		 * Core gives the open overlay
		 *   padding: clamp(1rem, var(--wp--style--root--padding-*), 20rem)
		 * on all four sides — at least 16px, and on this site more, since the
		 * root padding is 4vw. That is where the band of empty space above the
		 * first row came from. Written as the shorthand so it cannot be beaten
		 * by whichever longhand a future core release happens to use.
		 */
		padding: 0 !important;
		/* Same white as the bottom bar, so the whole thing reads as one panel
		   growing out of it. Colours are the approved palette: white surface,
		   #111318 text, hairline #E7E9ED borders. */
		background: var( --wp--preset--color--base ) !important;
		border: 1px solid var( --wp--preset--color--accent-6 );
		/* !important: the navigation block's own configured text color is
		   applied as an inline style directly on this element, which would
		   otherwise beat a plain (non-!important) external rule regardless of
		   selector specificity. */
		color: var( --wp--preset--color--contrast ) !important;
		box-shadow: 0 12px 40px rgba( 20, 25, 35, 0.14 );
		/* Core plays its own built-in 0.1s fade-in keyframe animation on
		   .is-menu-open, and a running CSS animation always wins over a
		   transition on the same property — cancel it so our own grow-open
		   transition below actually gets to run instead of being drowned out. */
		animation: none !important;
		/*
		 * Growing via max-height (not transform:scaleY) — a scaleY transform
		 * visibly squashes/stretches the text inside as it animates, since it
		 * scales every descendant's rendering along with the box. max-height
		 * just reveals more of the (undistorted) content; the panel still
		 * grows upward from the bottom bar because it's pinned there via the
		 * fixed "bottom" offset above, independent of how the height changes.
		 */
		/*
		 * The panel is as tall as the list inside it, up to everything above
		 * the bar. A fixed full-height sheet was tried and taken back out: a
		 * seven-row menu then opened as a screen of mostly empty white.
		 */
		--sx-menu-h: calc( 100dvh - var( --sx-bar-h ) - var( --sx-bar-gap ) - env( safe-area-inset-bottom, 0px ) - 32px );
		max-height: 0;
		overflow-y: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, max-height 0.35s ease, visibility 0.35s ease;
	}

	/*
	 * Open: as tall as the list, with everything above the bar as the ceiling
	 * — a long list such as "Продукти" gets the whole screen, a short one only
	 * what it needs. Switching between them changes that height, so
	 * header-nav.js animates the change in one move rather than folding the
	 * panel shut and unfolding it again (see growSwap there).
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open.sx-menu-visible {
		max-height: var( --sx-menu-h );
		overflow-y: auto;
		opacity: 1;
		visibility: visible;
	}

	/* Core's own layout setting (justify-content: right, for the desktop inline
	   row) also pushes every item flush to the right edge inside the mobile
	   overlay. Left-align everything, full width per row. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
	}

	/*
	 * The list starts at the top of the panel, always.
	 *
	 * The content area is a one-row grid and the list inside it is a flex
	 * column; when the panel came out taller than the list — which depends on
	 * the screen, so it does not show on every device — both stretched and the
	 * spare height was distributed above the first row. "Головна" ended up
	 * sitting some fifty pixels lower than every other row's spacing.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-content: start !important;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel {
		justify-content: flex-start !important;
		align-self: start !important;
	}

	/*
	 * A submenu <ul> carries core's own padding-top, meant for a dropdown that
	 * hangs below its parent. Relocated into the drill-down it became a blank
	 * strip above the "Назад" row that read as an empty menu item. The main
	 * list has no such padding, so this is the only place it shows.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel {
		padding: 0 !important;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
		width: 100%;
	}

	/* Thin divider between every row, main list and submenu panels alike —
	   currentColor-based so it stays visible regardless of the panel's own
	   background color. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li {
		border-bottom: 1px solid var( --wp--preset--color--accent-6 );
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:last-child,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li:last-child {
		border-bottom: none;
	}

	/*
	 * "Продукти" is the one panel that isn't a flat list. The mega-menu build
	 * (softextheme_inject_product_menu_logos) wraps each category's links in
	 * .sx-mega__col > .sx-mega__list, so the rule above only ever reached the
	 * group wrappers: rows inside a group ran together with nothing between
	 * them, while one-link groups looked correctly divided — which is why only
	 * the BAS block came out flat. Draw the line on the rows themselves and
	 * leave the wrappers clean.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-mega__list > li {
		border-bottom: 1px solid var( --wp--preset--color--accent-6 );
	}

	/*
	 * The wrappers keep no border of their own — theirs would land on top of
	 * the last row's, doubling the line at every group boundary. The extras
	 * row's desktop separator (border-top plus margin) goes for the same
	 * reason: here it reads as a stray gap between two ordinary rows.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li.sx-mega__col,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li.sx-mega__extras {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
		border-bottom: none;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li:last-child .sx-mega__list > li:last-child {
		border-bottom: none;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-mega__list > li:hover {
		background: var( --wp--preset--color--accent-5 );
	}

	/*
	 * The category heading is a link to that category's archive, styled for a
	 * desktop column header — a rounded chip with its own inset. In the panel
	 * it has to line up with the rows under it, so it takes the same 20px.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-menu-group__link {
		padding: 12px 20px;
		border-radius: 0;
	}

	/*
	 * Every row is spaced by its own padding, and the lists have no gap between
	 * them at all.
	 *
	 * With a flex gap the space above a row comes from the row before it, so
	 * the first row has nothing above it and needs a special case — and any
	 * stray zero-height first child silently adds one more gap's worth of empty
	 * space that no amount of adjusting the panel's padding can explain. Making
	 * the space part of the row itself removes the special case: the first row
	 * is built exactly like the rest.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel {
		gap: 0 !important;
	}

	/* The inset the panel used to carry, moved onto the rows — so the text keeps
	   its margin while the dividers under it reach both edges. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-submenu-back {
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100%;
		padding-inline: 20px !important;
		/*
		 * 10px of block padding against a 1.4 line — a 43px row, the same as
		 * medias.com.ua, whose menu this one is modelled on. At 14px and a 1.5
		 * line the rows came out 53px and the list read as spaced out.
		 */
		padding-block: 10px !important;
		line-height: 1.4 !important;
	}

	/*
	 * The chevron sits directly after the label rather than out at the right
	 * edge. At the edge it reads as a separate control on its own; beside the
	 * word it reads as "this one goes deeper", which is what it means.
	 *
	 * All four sides in one shorthand: setting only padding-right here left the
	 * left side at 0 — padding-inline from the rule above stopped applying once
	 * a physical longhand entered the mix, and these rows lost their indent
	 * while every other row kept it. The icon is the button's next sibling, not
	 * a child, so the gap before it belongs to the icon (below), not here.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > .wp-block-navigation-item__content {
		width: auto !important;
		padding: 10px 0 10px 20px !important;
	}

	/*
	 * Hugging the label costs the button the rest of the row as a tap target —
	 * a 43px-tall row that only answers on the word itself is easy to miss with
	 * a thumb. A transparent overlay pinned to the row hands the button back the
	 * full width without dragging the chevron out to the edge with it. The plain
	 * links are already full-width (width:100% above), so only the two submenu
	 * rows need this.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
		position: relative;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	/*
	 * No underline on hover here. Touch leaves :hover latched on the last row
	 * tapped, so the underline stayed behind on a row the finger had already
	 * left — and it marked only the label, contradicting the whole-row target.
	 * The row tint below is the feedback instead.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-submenu-back:hover,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-submenu-back:focus {
		text-decoration: none !important;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li:hover,
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel > li:hover {
		background: var( --wp--preset--color--accent-5 );
	}

	/*
	 * Core's icon points down, for a dropdown that opens below. This menu opens
	 * a panel to the side, and the back button already uses a left chevron —
	 * so this one points the way it actually travels.
	 *
	 * The turn is applied to the svg, and the wrapper is explicitly held at
	 * none: something in the open overlay also turns the svg 180°, and the two
	 * rotations compounded to -270° — the chevrons ended up pointing back at
	 * the label. One element owns the angle now, and !important keeps the other
	 * rule from adding to it.
	 */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		transform: none;
		margin-left: 8px;
	}

	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
		transform: rotate( -90deg ) !important;
	}

	/* The colour rule further up paints every icon path with both fill and
	   stroke so nothing comes out invisible. On this one that backfires: the
	   chevron is an open three-point path, so filling it closes the shape into
	   a solid blob stuck to the last letter. It only ever needed the stroke. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg path {
		fill: none !important;
		stroke: currentColor !important;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Core stacks every item's children in a column here (meant for deeper
	   nested lists), which puts a submenu's link and its chevron button on two
	   separate lines instead of side by side — adding visible extra height to
	   just those rows. Put the label and chevron on one row; the submenu-
	   container (the li's 3rd child) doesn't need wrap protection here since
	   it's display:none by default (see below) and never renders as part of
	   this row at all — it only ever appears after being relocated out to
	   become its own full-screen view. */
	.sx-header .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
		flex-direction: row !important;
		align-items: center !important;
		/* Was space-between, which pushed the chevron to the far right. */
		justify-content: flex-start !important;
	}
}

/* Mobile overlay menu: drill-down submenus (core flattens and shows every
   nested link at once by default, which makes the mobile menu very long).
   Tapping a submenu row replaces the main list with *only* that submenu's
   links plus a "‹ Назад" header — matching medias.com.ua. header-nav.js
   relocates the submenu-container out to become a sibling of the main list
   (both children of .responsive-container-content) the first time it's
   opened, and animates the swap between views as a slide+crossfade (see
   .sx-view-transitioning below) — forward drills slide/fade in from the
   right, back slides/fades in from the left, mirroring the reference site.
   Earlier attempts at sliding used position:absolute panels, which broke
   under a transformed ancestor's containing-block change; grid-stacking the
   views in the same cell (below) avoids needing absolute positioning at
   all, so the slide is safe this time. The outer panel's own grow-from-the-
   bottom-bar animation still provides the overall opening motion. */

/* Core hides the toggle icon entirely inside the default flattened overlay
   (there's nothing to toggle in stock behavior) — bring it back since it's
   the "drill in" indicator here. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: inline-flex !important;
}

/* Before header-nav.js relocates it (on first tap), the submenu-container is
   still nested in its <li> — and core's own high-specificity rule forces it
   permanently visible there. Keep it fully hidden pre-relocation; once moved
   out it gets .sx-drilldown-panel instead, which is styled separately below
   and no longer matches this selector. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
	display: none !important;
}

/* The main list and every submenu panel are stacked on top of each other in
   the same grid cell (rather than one after another down the page), so the
   swap between them can be a real crossfade+slide — header-nav.js briefly
   makes both the outgoing and incoming view display:flex together (via
   .sx-view-transitioning below) and animates opacity/transform on both at
   once, instead of the previous "fade to invisible, swap, fade back in"
   approach, which looked like a flash rather than a continuous motion. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: grid !important;
	/*
	 * Without an explicit column size, an implicit grid column shrinks to fit
	 * its widest item's own content ("auto" track sizing falls back to
	 * shrink-to-fit once a child's declared 100% width can't be resolved
	 * against an as-yet-undetermined track size) — which is exactly why the
	 * list rows, and their border-bottom dividers, collapsed down to the
	 * width of their text instead of spanning the whole panel. Force the one
	 * column to actually be the full available width.
	 */
	grid-template-columns: minmax( 0, 1fr );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel {
	grid-area: 1 / 1;
	min-width: 0;
	width: 100%;
}

/* The main list is swapped out (not hidden alongside the panel) whenever a
   submenu view is active — except mid-transition, where header-nav.js needs
   it to stay display:flex for the crossfade even after sx-drilldown-open has
   already been set. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content.sx-drilldown-open > .wp-block-navigation__container:not( .sx-view-transitioning ) {
	display: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel {
	display: none;
	flex-direction: column;
	width: 100%;
	/*
	 * Core ships `.wp-block-navigation:not(.has-background)
	 * .wp-block-navigation__submenu-container { background-color:#fff }` and
	 * `.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-
	 * container { color:#000 }` — the panel is still that exact element
	 * (relocated, not recreated), so both directly match and set a white card
	 * with black text on it, which inheritance from our dark/light
	 * .is-menu-open colors further up can't override (a rule that targets the
	 * element itself always wins over an inherited value, regardless of
	 * !important upstream). Override both back here.
	 */
	background: inherit !important;
	color: inherit !important;

	/*
	 * Same relocation, second consequence. Core draws its submenu container as
	 * a card — `.wp-block-navigation:not(.has-background)
	 * .wp-block-navigation__submenu-container { border: 1px solid #00000026 }`
	 * — and switches that border off again inside an open overlay with a rule
	 * that reaches the container *through its .has-child parent*. Moving the
	 * panel out of that parent to make it a view of its own left the reset
	 * behind and the card border showing: a hairline down both edges of every
	 * submenu view, inside the overlay's own border.
	 */
	border: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel.sx-panel-active,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.sx-view-transitioning,
.wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel.sx-view-transitioning {
	display: flex !important;
}

/* header-nav.js sets the actual opacity/translateX start and end values
   inline (so it can pick the slide direction per swap); this just declares
   what to animate and how. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.sx-view-transitioning,
.wp-block-navigation__responsive-container.is-menu-open .sx-drilldown-panel.sx-view-transitioning {
	transition: opacity 0.28s cubic-bezier( 0.4, 0, 0.2, 1 ), transform 0.28s cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* "Продукти" mega-menu: one column per category, each headed by its brand
   logo (structure built server-side by softextheme_inject_product_menu_logos).
   Shared by the desktop dropdown and the mobile drill-down panel — the columns
   sit side by side on desktop (see the min-width block above) and simply stack
   on mobile, where there's no room for two. */
.sx-mega__col,
.sx-mega__extras {
	list-style: none;
}

.sx-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Search ----
   A magnifier in both headers. On a phone it opens a strip that slides up out
   of the bottom bar; on a desktop it opens across the header itself, over the
   logo and the menu, and hangs its suggestions underneath — the arrangement on
   medias.com.ua, which is what the office asked to match. */

.sx-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
}

.sx-search-btn svg {
	width: 22px;
	height: 22px;
}

/* ---- Suggestions ----
   Shared by both headers: the list itself is the same card either way, only
   which side of the field it sits on changes. */

.sx-search-results {
	max-height: min( 60vh, 420px );
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 14px;
	background: var( --sx-white );
	box-shadow: 0 18px 40px rgba( 20, 25, 35, 0.14 );
}

.sx-search-results[hidden] {
	display: none;
}

.sx-search-results__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 0.7rem 1rem;
	color: inherit;
	text-decoration: none !important;
}

.sx-search-results__item + .sx-search-results__item {
	border-top: 1px solid var( --wp--preset--color--accent-6 );
}

.sx-search-results__item:hover,
.sx-search-results__item.is-active {
	background: var( --wp--preset--color--accent-5 );
}

.sx-search-results__title {
	min-width: 0;
	/* Long product names are the norm here — let them wrap rather than
	   pushing the type label off the edge. */
	overflow-wrap: break-word;
}

.sx-search-results__kind {
	flex: 0 0 auto;
	color: var( --sx-muted, #6b7280 );
	font-size: 0.75rem;
	white-space: nowrap;
}

.sx-search-results__all,
.sx-search-results__empty {
	display: block;
	margin: 0;
	padding: 0.7rem 1rem;
	border-top: 1px solid var( --wp--preset--color--accent-6 );
	font-size: 0.875rem;
}

.sx-search-results__all {
	color: var( --sx-brand-text );
	font-weight: 600;
	text-decoration: none !important;
}

.sx-search-results__empty {
	color: var( --sx-muted, #6b7280 );
}

/*
 * A band across the whole window, not a panel inside the content column.
 *
 * One set of rules for both viewports. The phone used to open a white strip
 * upwards out of the bottom bar with the suggestions stacked above the field,
 * which was a second arrangement to reason about and did not match the
 * reference; the band works at either size and now differs only in its
 * measurements.
 *
 * Fixed to the window — the same anchor the dropdowns use, and for the same
 * reason: nothing above it is transformed, so --sx-header-h and the admin bar
 * place it exactly. On a phone the header is the bar along the bottom, so the
 * band is the one piece of header that appears at the top; the floor keeps it
 * a comfortable target when that bar is short.
 *
 * The tint is what says the header is in another mode; the gutter moves from
 * the band to its padding so the field still lines up with the logo that was
 * there a moment ago.
 */
.sx-search-panel {
	--sx-search-h: max( var( --sx-header-h, 88px ), 64px );

	display: block;
	position: fixed;
	top: var( --sx-admin-bar );
	left: 0;
	right: 0;
	height: var( --sx-search-h );
	padding-inline: min( 4vw, 60px );
	background: var( --sx-neutral-100 );
	box-shadow: 0 1px 0 var( --sx-border );
	/*
	 * Above the menu, which core stacks with a z-index of its own
	 * (".wp-block-navigation .wp-block-navigation-item__content { z-index: 1 }")
	 * — without this the band paints under the words and they show through it.
	 */
	z-index: 5;
	animation: sx-search-in 0.16s ease-out both;
}

.sx-search-panel[hidden] {
	display: none;
}

/*
 * Opacity only. A transform on the panel would make it the containing block
 * for its own fixed ::before, and the dimmer would jump into the band for the
 * length of the animation.
 */
@keyframes sx-search-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sx-search-panel {
		animation: none;
	}
}

/*
 * Dims and softens the page under the band. Drawn by the panel rather than by
 * a separate element so it can never be left behind: it exists exactly as long
 * as the panel does.
 */
.sx-search-panel::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: calc( var( --sx-admin-bar ) + var( --sx-search-h ) );
	bottom: 0;
	z-index: -1;
	background: rgba( 17, 19, 24, 0.28 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
}

.sx-search-panel form {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
}

.sx-search-panel__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var( --sx-muted, #6b7280 );
}

/*
 * A line of text on the band, not a form control on it. The theme's own input
 * styling — a rounded border, a white fill and a brand-coloured focus ring —
 * is right everywhere else and wrong here, where the whole band already is the
 * field. !important because those come from the global styles theme.json
 * generates, which land at a specificity this selector cannot reach.
 */
.sx-search-panel input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 1.125rem;
}

.sx-search-panel input[type="search"]:focus,
.sx-search-panel input[type="search"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* The magnifier to its left is the only mark the field needs. */
.sx-search-panel input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

/*
 * No visible submit: the magnifier is already the affordance and Enter still
 * submits the form, which is how the reference header behaves. It stays in the
 * markup for anyone reaching the form without a keyboard shortcut in mind.
 */
.sx-search-panel form > button[type="submit"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.sx-search-panel__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --wp--preset--color--contrast );
	cursor: pointer;
}

.sx-search-panel__close svg {
	width: 22px;
	height: 22px;
}

.sx-search-panel__close:hover {
	background: var( --wp--preset--color--accent-5 );
}

/*
 * Hangs off the bottom of the band, on the same line the menu's dropdowns open
 * at. Inset by the gutter rather than pinned to 0: an absolutely positioned
 * child measures against its ancestor's padding box, which here is the whole
 * window, so left:0 ran it edge to edge instead of lining it up under the
 * field.
 */
.sx-search-results {
	position: absolute;
	top: calc( 100% + 14px );
	left: min( 4vw, 60px );
	right: min( 4vw, 60px );
}

@media ( max-width: 1199px ) {
	/* Tighter against the edge, and the suggestions sit closer under the band
	   than they do beneath a desktop header. */
	.sx-search-panel {
		padding-inline: 16px;
	}

	.sx-search-results {
		top: calc( 100% + 8px );
		left: 16px;
		right: 16px;
	}
}

.sx-menu-group__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.sx-menu-group__link:hover {
	background: var( --wp--preset--color--accent-5 );
}

/*
 * The two source logos have very different intrinsic sizes (a 78x48
 * icon-only SVG vs a 270x76 PNG wordmark) — pinning height and leaving
 * width automatic renders them at matching optical weight without having to
 * re-cut either asset.
 *
 * Both are dark-artwork-on-transparent, so they'd all but vanish against the
 * dark mobile menu panel; the light chip keeps each brand mark on the light
 * background it was drawn for, on any panel colour.
 */
.sx-menu-group__logo {
	height: 26px;
	width: auto;
	display: block;
	flex-shrink: 0;
	box-sizing: content-box;
	padding: 4px 6px;
	border-radius: 6px;
}

.sx-menu-group__label {
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* Stand-in for a wordmark logo, so a group still has a heading where the logo
   is hidden (see the mobile block). The desktop column shows the artwork and
   doesn't need the name spelled out next to it. */
@media ( min-width: 1200px ) {
	.sx-menu-group__label--for-logo {
		display: none;
	}
}

/* Menu items outside the product groups close the panel off under the columns
   rather than sitting in one of them. Nothing lands here at the moment, but
   the row is what keeps a future stray link from breaking the grid. */
.sx-mega__extras {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var( --wp--preset--color--accent-6 );
}

/* The row's own spacing now comes from the button inside it, like every other
   row in the panel — the margin and padding that used to sit here made the back
   row taller than the links under it. */
.sx-submenu-back-item {
	border-bottom: 1px solid var( --wp--preset--color--accent-6 );
}

.sx-submenu-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-weight: 600;
	/* !important: theme.json's global "button" element style sets its own
	   background/text color on native <button> elements, which otherwise
	   beats this plain (non-!important) rule and leaves the label unreadable
	   against the panel's own background. */
	color: inherit !important;
	cursor: pointer;
}

/* Same core default-focus-outline issue as the header links and hamburger
   button above — suppress for a plain click, keep for keyboard use. */
.sx-submenu-back:focus {
	outline: none;
}

.sx-submenu-back:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent-4 );
	outline-offset: 4px;
}

/* Chevron points right — "drills into a subscreen", not "expands below". */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	transform: rotate( -90deg );
}

/* Red CTA at the foot of the mobile menu, per the UI kit.
   Injected into the overlay by header-nav.js: the header's own CTA sits
   outside the overlay in the DOM, and the overlay is position:fixed, so the
   original would render behind the panel rather than inside it. */
.sx-menu-cta {
	display: block;
	margin: 1rem 0 0;
	padding: 0.9rem 1.25rem;
	border-radius: var( --sx-radius-btn );
	background: var( --wp--preset--color--accent-1 );
	color: var( --wp--preset--color--base ) !important;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none !important;
}

.sx-menu-cta:hover,
.sx-menu-cta:focus {
	background: var( --wp--preset--color--accent-2 );
	color: var( --wp--preset--color--base ) !important;
}

/* Hidden while a submenu panel is open — the drill-down view is its own
   screen, and a call to action under it belongs to the main list. */
.sx-drilldown-open .sx-menu-cta {
	display: none;
}

/* The copy is built once and left in the overlay, and above the breakpoint
   that overlay is simply the desktop nav — so without this the mobile CTA
   turns up inline in the menu bar, next to the real header button. */
@media ( min-width: 1200px ) {
	.sx-menu-cta {
		display: none;
	}
}

/* ---- The burger: a full-width zone, icon on the bar's centre line ----
 *
 * Everything between the logo and the search/cart pair is one tap target, as in
 * the reference: the burger's cell runs the whole middle of the bar rather than
 * being a small square inside it. A thumb aiming anywhere in that strip opens
 * the menu.
 *
 * The icon still sits on the bar's own centre line, not the cell's — the logo is
 * wider than the search/cart pair, so centring inside the stretched button would
 * push the icon off to one side.
 *
 * Last in the file on purpose — earlier rules here set position and margin on
 * the same elements, and an equal-weight declaration placed above them loses.
 */
@media ( max-width: 1199px ) {
	.sx-header .wp-block-group.alignwide {
		position: relative;
	}

	/* Rows stretch so the burger's cell can run the bar's full height rather
	   than just the height of an icon sitting in the middle of it. */
	.sx-header .wp-block-group.alignwide {
		align-items: stretch;
	}

	/*
	 * The group holding the nav, search and cart takes everything the logo
	 * leaves, so the burger inside it has room to stretch. Not position:
	 * relative — the search panel is absolutely positioned against .alignwide
	 * above and would shrink to this group's width instead of the bar's.
	 */
	.sx-header .wp-block-group.alignwide > .wp-block-group {
		flex: 1 1 auto;
		min-width: 0;
	}

	.sx-header nav.wp-block-navigation {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: stretch;
		align-self: stretch;
		/*
		 * Core makes every .wp-block-navigation position:relative, which made it
		 * the containing block for the icon below — so "50%" meant the middle of
		 * the burger's own cell, six pixels off the middle of the bar. Static
		 * hands that job back to the row.
		 */
		position: static;
	}

	/*
	 * The burger has no in-flow content of its own (its icon is positioned,
	 * see below), so without a height of its own the button collapsed to a
	 * zero-height strip and there was no zone to tap at all. Stretching gives
	 * it the row's height; the negative block margin reaches back over the
	 * row's own vertical padding so the cell covers the bar edge to edge, the
	 * way the reference's highlighted cell does.
	 */
	.sx-header .wp-block-navigation__responsive-container-open {
		position: static !important;
		width: 100%;
		align-self: stretch;
		justify-content: center;
		margin: calc( -1 * var( --sx-bar-pad ) ) 0 !important;
		padding: var( --sx-bar-pad ) 0 !important;
		background: transparent;
		transition: background-color 0.3s ease;
	}

	/*
	 * Positioned against the bar row (.alignwide, relative above) with margins
	 * rather than a transform. A transformed element becomes the containing
	 * block for its position:fixed descendants — and the opened menu is one of
	 * them, so a translate(-50%) here shrank the whole overlay to the width of
	 * the burger and left it as a narrow strip down the middle of the screen.
	 */
	.sx-header .wp-block-navigation__responsive-container-open .sx-burger {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -14px; /* half of .sx-burger's own 28px width */
		margin-top: -9px;   /* half of its 19px height */
	}
}

/* ---- Open state: the bar changes surface, the page behind it goes quiet ----
 *
 * header-nav.js puts .sx-menu-open on <html> for as long as the overlay is
 * open. Two things follow from it: the bar takes a tinted surface so the open
 * state is visible at a glance, with the burger's own cell staying white so it
 * reads as the foot of the panel growing out of it; and everything behind is
 * dimmed and blurred, leaving the menu as the only live surface.
 */
@media ( max-width: 1199px ) {
	html.sx-menu-open .sx-header {
		background: var( --wp--preset--color--neutral-100 ) !important;
		border-top-color: var( --wp--preset--color--neutral-300 );
	}

	html.sx-menu-open .sx-header .wp-block-navigation__responsive-container-open {
		background: var( --wp--preset--color--base );
	}

	.sx-menu-scrim {
		position: fixed;
		inset: 0;
		/* Under the bar and the panel (250), over everything else on the page. */
		z-index: var( --sx-z-scrim );
		background: rgba( 17, 19, 24, 0.24 );
		backdrop-filter: blur( 6px );
		-webkit-backdrop-filter: blur( 6px );
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0.35s ease;
	}

	html.sx-menu-open .sx-menu-scrim {
		opacity: 1;
		visibility: visible;
	}
}

/* The overlay menu is a phone control; its scrim must never appear on a
   desktop, whatever state the class was left in by a resize. */
@media ( min-width: 1200px ) {
	.sx-menu-scrim {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * The animated logo in the header.
 *
 * From the design artifact's "assemble" variant: four diamonds fly into place
 * and the word resolves out of a blur behind them. The diamonds are drawn in
 * CSS — a skewed rounded rectangle with a gradient and a hard lower edge for
 * the extrusion — so the whole mark is one 8 KB image of the word plus markup.
 *
 * Every length is in cqw, one percent of the logo's own width, because the
 * artifact was drawn on a 420px canvas and the header shows it at 160px on
 * desktop and 76px on a phone. Radii, shadows, blur and the fly-in distances
 * all have to shrink with it; a fixed 11px radius that looks right on the
 * canvas is a blob at phone size. Each one is preceded by a px fallback for
 * browsers without container query units, which lands close enough at the
 * desktop size and is never seen by anything current.
 *
 * Two departures from the artifact, both about the difference between a canvas
 * and a page:
 *
 * It plays once. The artifact loops every 6.4s, which is right for showing the
 * idea and wrong for a sticky header that follows the reader down every page —
 * a logo that keeps rebuilding itself is something to look away from.
 *
 * And it ends on the finished logo. The artifact's closing keyframes fade
 * everything out so the loop can restart; played once, that would leave the
 * header empty.
 *
 * Nothing here is needed for the logo to be right: with no animation at all —
 * reduced motion, an old browser, a stylesheet that failed — the pieces rest
 * exactly where they belong.
 * ------------------------------------------------------------------------- */

.sx-logo-anim {
	position: relative;
	display: block;
	aspect-ratio: 160 / 88;
	container-type: inline-size;
}

.sx-logo-anim__word {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---- The four diamonds ---- */

.sx-logo-anim__piece {
	position: absolute;
	display: block;
}

.sx-logo-anim__face {
	display: block;
	width: 100%;
	height: 100%;
	transform: skewY( -19.1deg );
	border-radius: 4px;
	border-radius: 2.62cqw;
	background: linear-gradient( 135deg, #ff6157 0%, #f23a33 42%, #e5211c 100% );
	/* The first shadow is the extruded side, the second the shadow it casts. */
	box-shadow:
		0 3px 0 #b81d18,
		0 6px 8px rgba( 120, 10, 6, 0.22 );
	box-shadow:
		0 1.67cqw 0 #b81d18,
		0 3.81cqw 5.24cqw rgba( 120, 10, 6, 0.22 );
}

/* Positions are the artifact's own, already proportional. */

.sx-logo-anim__piece--1 {
	left: 16.25%;
	top: 15.11%;
	width: 16.63%;
	height: 21.59%;
	--sx-logo-from: translate( 24px, -30px );
	--sx-logo-from: translate( 15.24cqw, -18.57cqw );
}

.sx-logo-anim__piece--2 {
	left: 5.875%;
	top: 39.09%;
	width: 11.31%;
	height: 32.16%;
	--sx-logo-from: translate( -33px, -10px );
	--sx-logo-from: translate( -20.48cqw, -6.19cqw );
}

.sx-logo-anim__piece--3 {
	left: 25.875%;
	top: 35.68%;
	width: 10.75%;
	height: 31.02%;
	--sx-logo-from: translate( 35px, 8px );
	--sx-logo-from: translate( 21.9cqw, 4.76cqw );
}

.sx-logo-anim__piece--4 {
	left: 9.625%;
	top: 73.18%;
	width: 16.63%;
	height: 21.93%;
	--sx-logo-from: translate( -24px, 32px );
	--sx-logo-from: translate( -15.24cqw, 20cqw );
}

/* ---- The one-shot ---- */

/* ---- Plays on hover ----
 *
 * Not on load. The header follows the reader down every page of the site, and
 * an animation that fires on every navigation is something to look away from;
 * on hover it happens because somebody looked at the logo, which is the only
 * moment it is worth watching.
 *
 * Keyed to a class rather than to :hover so that leaving mid-flight does not
 * tear the animation off — see initLogoHover() in header-nav.js, which adds
 * the class on pointer or focus and removes it when the word has settled.
 *
 * The resting state is the finished logo, so a device with no pointer, or no
 * JavaScript, simply never sees the motion and loses nothing.
 */
@media ( prefers-reduced-motion: no-preference ) {
	/*
	 * "both" matters: it holds the 0% frame through the delay, so a diamond
	 * waiting its turn is off-position rather than sitting in place and then
	 * jumping when its turn comes.
	 */
	.sx-logo-anim.is-playing .sx-logo-anim__piece {
		animation: sx-logo-piece 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
	}

	.sx-logo-anim.is-playing .sx-logo-anim__piece--2 {
		animation-delay: 0.24s;
	}

	.sx-logo-anim.is-playing .sx-logo-anim__piece--3 {
		animation-delay: 0.48s;
	}

	.sx-logo-anim.is-playing .sx-logo-anim__piece--4 {
		animation-delay: 0.72s;
	}

	/* Last, once the mark it belongs to has assembled. */
	.sx-logo-anim.is-playing .sx-logo-anim__word {
		animation: sx-logo-word 1s cubic-bezier( 0.33, 0, 0.2, 1 ) 0.9s both;
	}
}

@keyframes sx-logo-piece {
	from {
		opacity: 0;
		transform: var( --sx-logo-from );
	}

	to {
		opacity: 1;
		transform: translate( 0, 0 );
	}
}

@keyframes sx-logo-word {
	from {
		opacity: 0;
		filter: blur( 3px );
		filter: blur( 1.67cqw );
		transform: translateX( -6px );
		transform: translateX( -3.81cqw );
	}

	to {
		opacity: 1;
		filter: blur( 0 );
		transform: translateX( 0 );
	}
}