/**
 * woo-sil7en/site-header — front-end styles.
 *
 * Token-driven (every value is a theme.json CSS custom property), mobile-first
 * single-DOM. The OPEN menu is a full-screen immersive overlay (100dvw x 100dvh)
 * on every device — an asymmetric editorial split: a dark "Destacado" feature
 * panel anchors one side, the navigation columns + rails fill the other. The
 * entrance is choreographed (full-screen wipe + staggered cascade of columns
 * and links) and entirely reduced-motion safe. Cascade layer keeps specificity
 * low; every link is server-rendered so SEO/PageRank is untouched.
 */

@layer woo-sil7en {

	/* =========================================== Bar surface + state ==== */
	.wsh {
		/* This install only generates spacing presets xs–xl; 3xs/2xs/2xl are
		   referenced across the bar + mega-menu with no fallback, so their gaps
		   silently collapse to 0 (counts glued to titles, icons to labels).
		   Define them here, scoped to the header subtree, on an 8px rhythm. */
		--wp--preset--spacing--3xs: 0.375rem;
		--wp--preset--spacing--2xs: 0.625rem;
		--wp--preset--spacing--2xl: clamp(4rem, 3rem + 4vw, 6rem);

		/* State-driven surface tokens — flipped by .wsh--overlay / .wsh--solid
		   so the same markup is transparent over a hero and solid once scrolled. */
		--wsh-bar-bg: var(--wp--preset--color--base);
		--wsh-bar-fg: var(--wp--preset--color--contrast);
		--wsh-bar-border: var(--wp--preset--color--border);
		--wsh-hairline: var(--wp--preset--color--border);
		--wsh-hover-bg: var(--wp--preset--color--surface);
		--wsh-row1-h: 4.25rem;
		position: relative;
		font-family: var(--wp--preset--font-family--sans);
	}

	/* Non-overlay pages: classic sticky bar that holds its place in flow. */
	.wsh--sticky:not(.wsh--overlay) {
		position: sticky;
		inset-block-start: 0;
		z-index: 100;
	}

	/* Overlay pages: the bar sits over the leading hero (out of flow); once
	   scrolled past the hero it pins to the top as a solid compact bar. */
	.wsh--overlay {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		z-index: 100;
	}

	.wsh--overlay.wsh--solid,
	.wsh--overlay.wsh--exiting {
		position: fixed;
	}

	.wsh__bar {
		position: relative;
		background: var(--wsh-bar-bg);
		color: var(--wsh-bar-fg);
		border-block-end: 1px solid var(--wsh-bar-border);
	}

	/* Transparent state (overlay, before scroll): white UI + a top scrim so the
	   icons/text clear 3:1 over arbitrary hero imagery (a11y gate). */
	.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) {
		/* Drop below an active top promo bar (height published by promotions.js). */
		inset-block-start: var(--woo-sil7en-promo-h, 0);
		--wsh-bar-bg: transparent;
		--wsh-bar-fg: var(--wp--preset--color--base);
		--wsh-bar-border: transparent;
		--wsh-hairline: color-mix(in srgb, var(--wp--preset--color--base) 38%, transparent);
		--wsh-hover-bg: color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
	}

	.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) .wsh__bar::before {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		block-size: 220%;
		background: linear-gradient(
			to bottom,
			color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent),
			transparent
		);
		pointer-events: none;
		z-index: 0;
	}

	/* Keep bar content above the scrim. */
	.wsh__row {
		position: relative;
		z-index: 1;
	}

	/* Shared width cap for both rows. */
	.wsh__inner {
		max-inline-size: var(--wp--custom--layout--wide-size, 78rem);
		margin-inline: auto;
		padding-inline: var(--wp--preset--spacing--md);
	}

	/* ---------------------------------------------------- Row 1 (top) */
	.wsh__inner--top {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--wp--preset--spacing--sm);
		min-block-size: var(--wsh-row1-h);
		padding-block: var(--wp--preset--spacing--2xs);
	}

	.wsh__cluster {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3xs);
		min-inline-size: 0;
	}

	.wsh__cluster--start {
		justify-self: start;
	}

	.wsh__cluster--end {
		justify-self: end;
	}

	/* ------------------------------------------------- Row 2 (bottom) */
	/* Mobile: hidden — its links + search + social live in the mega-menu. */
	.wsh__row--bottom {
		display: none;
		border-block-start: 1px solid var(--wsh-hairline);
	}

	.wsh__inner--bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--md);
		min-block-size: 3rem;
		padding-block: var(--wp--preset--spacing--3xs);
	}

	.wsh__row-end {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--sm);
	}

	/* ---------------------------------------------------------- Brand */
	.wsh__brand {
		justify-self: center;
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		text-decoration: none;
		color: var(--wp--preset--color--primary);
	}

	/* Over a hero the wordmark goes white to read on the imagery. The logo is a
	   raster asset, so brightness(0)+invert(1) renders it as a white silhouette. */
	.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) .wsh__brand {
		color: var(--wp--preset--color--base);
	}

	.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) .wsh__brand-mark {
		filter: brightness(0) invert(1);
	}

	.wsh__brand-text {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--md);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		letter-spacing: var(--wp--custom--font--tracking--tight, -0.02em);
		line-height: var(--wp--custom--font--line-height--tight, 1.1);
	}

	.wsh__brand-mark {
		block-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.1rem);
		inline-size: auto;
		max-inline-size: 12rem;
		flex-shrink: 0;
	}

	/* Tight phones: keep the isotype, drop the wordmark text to save the row. */
	@media (max-width: 26rem) {
		.wsh__brand-text {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}
	}

	/* ------------------------------------------------------- Trigger */
	.wsh__trigger {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2xs);
		min-block-size: 2.75rem;
		min-inline-size: 2.75rem;
		padding-inline: var(--wp--preset--spacing--2xs);
		border: 1px solid transparent;
		border-radius: var(--wp--custom--radius--md);
		background: transparent;
		color: var(--wsh-bar-fg);
		font: inherit;
		font-weight: var(--wp--custom--font--weight--medium, 500);
		cursor: pointer;
		/* Keep the trigger above the overlay so it stays clickable as the ×. */
		position: relative;
		z-index: 110;
	}

	.wsh__trigger:hover {
		background: var(--wsh-hover-bg);
	}

	.wsh__trigger-icon {
		display: inline-grid;
		place-items: center;
		inline-size: 1.5rem;
		block-size: 1.5rem;
	}

	.wsh__trigger-icon > * {
		grid-area: 1 / 1;
	}

	.wsh__trigger-close {
		opacity: 0;
		transform: scale(0.7) rotate(-45deg);
	}

	.wsh--open .wsh__trigger-bars {
		opacity: 0;
		transform: scale(0.7) rotate(45deg);
	}

	.wsh--open .wsh__trigger-close {
		opacity: 1;
		transform: none;
	}

	.wsh__trigger-label {
		font-size: var(--wp--preset--font-size--sm);
	}

	/* --------------------------------------------------- Primary nav */
	/* Lives inside row 2 (hidden on mobile), so it can render unconditionally. */
	.wsh__primary {
		display: block;
		min-inline-size: 0;
	}

	.wsh__primary-list {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--md);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wsh__primary-link {
		position: relative;
		display: inline-block;
		padding-block: var(--wp--preset--spacing--2xs);
		color: var(--wsh-bar-fg);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--medium, 500);
		letter-spacing: 0.085em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.wsh__primary-link::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		block-size: 2px;
		background: var(--wp--preset--color--accent);
		transform: scaleX(0);
		transform-origin: inline-start;
	}

	.wsh__primary-link:hover::after,
	.wsh__primary-link:focus-visible::after {
		transform: scaleX(1);
	}

	/* ------------------------------------------------------- Actions */
	.wsh__actions {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3xs);
	}

	.wsh__action {
		position: relative;
		display: inline-grid;
		place-items: center;
		min-inline-size: 2.75rem;
		min-block-size: 2.75rem;
		border-radius: var(--wp--custom--radius--md);
		color: var(--wsh-bar-fg);
		text-decoration: none;
	}

	.wsh__action:hover {
		background: var(--wsh-hover-bg);
	}

	.wsh__cart-count {
		position: absolute;
		inset-block-start: 0.25rem;
		inset-inline-end: 0.25rem;
		min-inline-size: 1.05rem;
		block-size: 1.05rem;
		padding-inline: 0.2rem;
		display: grid;
		place-items: center;
		border-radius: var(--wp--custom--radius--pill);
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--accent-ink);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		line-height: 1;
	}

	/* ------------------------------------------- Expanding search (row 2) */
	.wsh__search {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3xs);
	}

	.wsh__search-toggle {
		position: relative;
		display: inline-grid;
		place-items: center;
		min-inline-size: 2.25rem;
		min-block-size: 2.25rem;
		border: 0;
		border-radius: var(--wp--custom--radius--md);
		background: transparent;
		color: var(--wsh-bar-fg);
		cursor: pointer;
	}

	.wsh__search-toggle:hover {
		background: var(--wsh-hover-bg);
	}

	.wsh__search-icon,
	.wsh__search-close {
		grid-area: 1 / 1;
	}

	.wsh__search-close {
		opacity: 0;
	}

	.wsh--search-open .wsh__search-icon {
		opacity: 0;
	}

	.wsh--search-open .wsh__search-close {
		opacity: 1;
	}

	.wsh__search-form {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3xs);
		inline-size: 0;
		overflow: hidden;
		visibility: hidden;
	}

	.wsh--search-open .wsh__search-form {
		inline-size: min(50vw, 16rem);
		visibility: visible;
		/* A subtle, state-adaptive fill so the open field reads over a hero
		   (transparent header) or the solid bar — translucent, never a hard box. */
		background: color-mix(in srgb, var(--wsh-bar-fg) 12%, transparent);
		border: 1px solid color-mix(in srgb, var(--wsh-bar-fg) 20%, transparent);
		border-radius: var(--wp--custom--radius--pill, 999px);
		padding-inline: var(--wp--preset--spacing--2xs);
	}

	.wsh__search-input {
		inline-size: 100%;
		min-inline-size: 0;
		border: 0;
		background: transparent;
		color: var(--wsh-bar-fg);
		font: inherit;
		font-size: var(--wp--preset--font-size--xs);
		padding-block: var(--wp--preset--spacing--2xs);
	}

	.wsh__search-input::placeholder {
		color: color-mix(in srgb, var(--wsh-bar-fg) 60%, transparent);
	}

	.wsh__search-submit {
		display: inline-grid;
		place-items: center;
		min-inline-size: 2rem;
		min-block-size: 2rem;
		border: 0;
		background: transparent;
		color: var(--wsh-bar-fg);
		cursor: pointer;
	}

	/* ------------------------------------------------ Social (row 2) */
	.wsh__social {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--3xs);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.wsh__social-link {
		display: inline-grid;
		place-items: center;
		min-inline-size: 2.25rem;
		min-block-size: 2.25rem;
		border-radius: var(--wp--custom--radius--md);
		color: var(--wsh-bar-fg);
		text-decoration: none;
	}

	.wsh__social-link:hover {
		background: var(--wsh-hover-bg);
	}

	/* ============================================== Full-screen menu ===== */
	/* The scrim is only a quiet backstop under the opaque overlay (it covers
	   any sub-pixel gap during the wipe). The overlay itself is opaque. */
	.wsh__scrim {
		position: fixed;
		inset: 0;
		z-index: 90;
		background: var(--wp--preset--color--surface-strong);
		opacity: 0;
		pointer-events: none;
	}

	.wsh--open .wsh__scrim {
		opacity: 1;
		pointer-events: auto;
	}

	/* The panel is a true full-viewport takeover on every device. */
	.wsh__panel {
		position: fixed;
		inset: 0;
		z-index: 95;
		/* 100% (layout viewport, excludes the scrollbar) — NOT 100dvw, which
		   includes the scrollbar gutter and leaks a global horizontal scroll
		   while the closed panel still occupies layout (visibility:hidden). */
		inline-size: 100%;
		block-size: 100dvh;
		background: var(--wp--preset--color--base);
		overflow: hidden;
		visibility: hidden;
		clip-path: inset(0 0 100% 0);
	}

	.wsh--open .wsh__panel {
		visibility: visible;
		clip-path: inset(0 0 0 0);
	}

	/* Asymmetric editorial split. Mobile-first: one scrolling column with the
	   feature panel on top; >=64em becomes a fixed two-pane composition. */
	.wsh__overlay {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		min-block-size: 100dvh;
		max-block-size: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* ----------------------------------------------- Feature aside */
	.wsh__feature {
		position: relative;
		background:
			radial-gradient(
				120% 90% at 85% 0%,
				color-mix(in srgb, var(--wp--preset--color--primary) 40%, var(--wp--preset--color--surface-strong)) 0%,
				var(--wp--preset--color--surface-strong) 60%
			);
		color: var(--wp--preset--color--base);
		overflow: hidden;
	}

	/* A single hairline of gold along the seam toward the navigation. */
	.wsh__feature::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: 1px;
		background: color-mix(in srgb, var(--wp--preset--color--accent) 60%, transparent);
	}

	.wsh__feature-link {
		display: grid;
		gap: var(--wp--preset--spacing--sm);
		align-content: center;
		justify-items: start;
		block-size: 100%;
		padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
		text-decoration: none;
		color: inherit;
	}

	.wsh__feature-eyebrow {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--wp--preset--color--accent);
	}

	.wsh__feature-cover {
		display: block;
		inline-size: min(58vw, 13rem);
		border-radius: var(--wp--custom--radius--sm);
		overflow: hidden;
		box-shadow: var(--wp--custom--shadow--lg);
		rotate: -2deg;
	}

	.wsh__feature-img {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		will-change: transform;
	}

	.wsh__feature-meta {
		display: grid;
		gap: var(--wp--preset--spacing--2xs);
		max-inline-size: 22rem;
	}

	.wsh__feature-title {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--lg);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		line-height: var(--wp--custom--font--line-height--tight, 1.1);
		letter-spacing: var(--wp--custom--font--tracking--tight, -0.02em);
		color: var(--wp--preset--color--base);
		text-wrap: balance;
	}

	.wsh__feature-author {
		font-size: var(--wp--preset--font-size--base);
		font-style: italic;
		color: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
	}

	.wsh__feature-cta {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2xs);
		margin-block-start: var(--wp--preset--spacing--2xs);
		padding-block-end: 0.2rem;
		border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
		color: var(--wp--preset--color--accent);
		font-size: var(--wp--preset--font-size--sm);
		font-weight: var(--wp--custom--font--weight--medium, 500);
		letter-spacing: 0.02em;
	}

	/* ------------------------------------------------- Navigation pane */
	.wsh__nav {
		display: grid;
		grid-template-rows: auto auto auto;
		align-content: start;
		min-block-size: 0;
		padding: var(--wp--preset--spacing--md);
		padding-block-start: var(--wp--preset--spacing--sm);
	}

	.wsh__nav-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--sm);
		padding-block-end: var(--wp--preset--spacing--sm);
	}

	.wsh__nav-eyebrow {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		/* Harmonize with every other on-white section eyebrow (purple). The
		   nav pane sits on the light panel, so the brand purple matches the
		   site-wide editorial eyebrow language instead of a one-off grey. */
		color: var(--wp--preset--color--primary);
	}

	/* Close: a quiet uppercase label paired with a circular icon button. The
	   ring fills with brand purple and the glyph spins on hover/focus — a soft,
	   editorial control instead of a hard bordered box. */
	.wsh__close {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2xs);
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--muted);
		font: inherit;
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--medium, 500);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.wsh__close-circle {
		display: inline-grid;
		place-items: center;
		inline-size: 2.4rem;
		block-size: 2.4rem;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--circle, 50%);
		color: var(--wp--preset--color--contrast);
	}

	.wsh__close:hover,
	.wsh__close:focus-visible {
		color: var(--wp--preset--color--primary);
	}

	.wsh__close:hover .wsh__close-circle,
	.wsh__close:focus-visible .wsh__close-circle {
		background: var(--wp--preset--color--primary);
		border-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--base);
		transform: rotate(90deg);
	}

	/* ----------------------------------------------- Category columns */
	.wsh__cols {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--md);
		column-gap: var(--wp--preset--spacing--lg);
		align-content: start;
		min-block-size: 0;
	}

	.wsh__col {
		min-inline-size: 0;
		border-block-start: 1px solid var(--wp--preset--color--border);
		padding-block-start: var(--wp--preset--spacing--sm);
	}

	.wsh__group {
		display: grid;
		gap: var(--wp--preset--spacing--2xs);
	}

	.wsh__group-summary {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--2xs);
		cursor: pointer;
		list-style: none;
	}

	.wsh__group-summary::-webkit-details-marker {
		display: none;
	}

	.wsh__col-title {
		display: inline-flex;
		align-items: baseline;
		gap: var(--wp--preset--spacing--2xs);
		text-decoration: none;
		min-inline-size: 0;
	}

	.wsh__col-name {
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--md);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		line-height: var(--wp--custom--font--line-height--tight, 1.1);
		letter-spacing: var(--wp--custom--font--tracking--tight, -0.02em);
		color: var(--wp--preset--color--contrast);
	}

	.wsh__col-title:hover .wsh__col-name {
		color: var(--wp--preset--color--primary);
	}

	.wsh__col-count {
		align-self: center;
		font-family: var(--wp--preset--font-family--mono);
		font-size: 0.7rem;
		font-weight: var(--wp--custom--font--weight--regular, 400);
		font-variant-numeric: tabular-nums;
		letter-spacing: 0.02em;
		color: var(--wp--preset--color--muted);
	}

	.wsh__group-chevron {
		display: inline-grid;
		place-items: center;
		color: var(--wp--preset--color--muted);
	}

	.wsh__group[open] .wsh__group-chevron {
		rotate: 180deg;
	}

	.wsh__col-links {
		margin: 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 0.1rem;
	}

	.wsh__col-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--2xs);
		min-block-size: 2.25rem;
		padding-inline-end: var(--wp--preset--spacing--3xs);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--sm);
		text-decoration: none;
	}

	.wsh__col-link .woo-sil7en-icon {
		opacity: 0;
		transform: translateX(-0.35rem);
		color: var(--wp--preset--color--accent);
	}

	.wsh__col-link:hover,
	.wsh__col-link:focus-visible {
		color: var(--wp--preset--color--primary);
	}

	.wsh__col-link:hover .woo-sil7en-icon,
	.wsh__col-link:focus-visible .woo-sil7en-icon {
		opacity: 1;
		transform: none;
	}

	.wsh__col-all {
		display: inline-flex;
		align-items: center;
		align-self: start;
		gap: var(--wp--preset--spacing--3xs);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: var(--wp--custom--font--weight--medium, 500);
		letter-spacing: 0.04em;
		text-transform: uppercase;
		text-decoration: none;
	}

	.wsh__col-all:hover {
		color: var(--wp--preset--color--accent);
	}

	.wsh__group:hover .wsh__col-all .woo-sil7en-icon,
	.wsh__col-all:hover .woo-sil7en-icon {
		transform: translateX(0.25rem);
	}

	/* ---------------------------------------------------------- Rails */
	.wsh__rails {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--sm);
		column-gap: var(--wp--preset--spacing--lg);
		margin-block-start: var(--wp--preset--spacing--md);
		padding-block-start: var(--wp--preset--spacing--sm);
		border-block-start: 1px solid var(--wp--preset--color--border);
	}

	.wsh__rail-head {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2xs);
		color: var(--wp--preset--color--contrast);
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--base);
		font-weight: var(--wp--custom--font--weight--bold, 700);
		text-decoration: none;
	}

	.wsh__rail-head .woo-sil7en-icon {
		color: var(--wp--preset--color--accent);
	}

	.wsh__rail-head:hover {
		color: var(--wp--preset--color--primary);
	}

	.wsh__rail-links {
		margin: var(--wp--preset--spacing--2xs) 0 0;
		padding: 0;
		list-style: none;
		display: grid;
		gap: 0.15rem;
	}

	.wsh__rail-link {
		display: inline-block;
		padding-block: 0.1rem;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--sm);
		text-decoration: none;
	}

	.wsh__rail-link:hover,
	.wsh__rail-link:focus-visible {
		color: var(--wp--preset--color--primary);
		text-decoration: underline;
		text-underline-offset: 0.18em;
		text-decoration-color: var(--wp--preset--color--accent);
	}

	/* -------------------------------------------------- Focus rings */
	.wsh :is(a, button, summary):focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
		border-radius: var(--wp--custom--radius--sm);
	}

	.wsh__feature :is(a, button, summary):focus-visible {
		outline-color: var(--wp--preset--color--accent);
	}

	/* ====================================== Desktop (>=48em) ====== */
	@media (min-width: 48em) {
		/* Row 2 (primary links + search + social) appears below the centred logo. */
		.wsh__row--bottom {
			display: block;
		}

		/* The mega-menu trigger becomes a clean icon-only control; its text
		   label stays in the DOM for screen readers. */
		.wsh__trigger {
			gap: 0;
			min-inline-size: 2.75rem;
			justify-content: center;
			padding-inline: 0;
		}

		.wsh__trigger-label {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		/* Two category columns inside the nav pane at tablet width. */
		.wsh__cols {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.wsh__rails {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.wsh__nav {
			padding: var(--wp--preset--spacing--lg);
			padding-block-start: var(--wp--preset--spacing--md);
		}

		.wsh__feature-link {
			padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg);
		}
	}

	/* ====================================== Desktop (>=64em) ====== */
	@media (min-width: 64em) {
		/* Fixed two-pane composition: dark feature anchors the left third,
		   the navigation occupies the rest. Neither pane scrolls the other. */
		.wsh__overlay {
			grid-template-columns: minmax(20rem, 0.92fr) 1.55fr;
			grid-template-rows: 100dvh;
		}

		.wsh__feature {
			grid-row: 1;
		}

		.wsh__nav {
			grid-row: 1;
			min-block-size: 0;
			block-size: 100dvh;
			overflow-y: auto;
			overscroll-behavior: contain;
			padding-inline: var(--wp--preset--spacing--xl);
		}

		.wsh__feature-link {
			padding-inline: var(--wp--preset--spacing--xl);
		}

		.wsh__feature-cover {
			inline-size: min(18vw, 13.5rem);
		}

		.wsh__feature-title {
			font-size: var(--wp--preset--font-size--lg);
		}

		/* Three even category columns across the wide nav pane. */
		.wsh__cols {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			column-gap: var(--wp--preset--spacing--xl);
		}
	}

	/* ================================= Compact (scrolled past hero) ===== */
	/* Driven by .wsh--compact (view.js). Collapses row 2 and shrinks row 1 +
	   logo so the bar reclaims viewport once the hero is gone. Higher
	   specificity than the desktop `.wsh__row--bottom { display:block }`. */
	.wsh--compact {
		--wsh-row1-h: 3.5rem;
	}

	.wsh--compact .wsh__row--bottom {
		display: none;
	}

	.wsh--compact .wsh__brand-mark {
		block-size: 2.2rem;
	}

	.wsh--compact .wsh__brand-text {
		font-size: var(--wp--preset--font-size--base);
	}

	/* A quiet hairline shadow once lifted off the page (compact = scrolled). */
	.wsh--compact .wsh__bar {
		box-shadow: var(--wp--custom--shadow--sm);
	}

	/* ============================================= Motion =========== */
	@media (prefers-reduced-motion: no-preference) {
		/* Full-screen wipe: the overlay clips open from the top with a soft,
		   slightly slow brand ease; visibility flips after it closes. */
		.wsh__panel {
			transition:
				clip-path var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				visibility 0s linear var(--wp--custom--motion--duration--slow, 400ms);
		}

		.wsh--open .wsh__panel {
			transition:
				clip-path var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				visibility 0s;
		}

		.wsh__scrim {
			transition: opacity var(--wp--custom--motion--duration--base, 250ms) linear;
		}

		/* Surface + size axes ease between states (transparent↔solid, big↔compact). */
		.wsh__bar {
			transition:
				background-color var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				box-shadow var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1));
		}

		/* The solid bar (overlay pages, once scrolled past the hero) glides down
		   and fades in — a quiet, modern reveal instead of a hard pop. Replays
		   each time the threshold is re-crossed. */
		.wsh--overlay.wsh--solid .wsh__bar {
			animation: wsh-bar-reveal var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
		}

		@keyframes wsh-bar-reveal {
			from {
				transform: translateY(-101%);
				opacity: 0;
			}
			to {
				transform: translateY(0);
				opacity: 1;
			}
		}

		/* Mirror exit: when scrolling back up past the hero, the solid bar glides
		   up and fades out (view.js holds .wsh--exiting for the animation's life)
		   before reverting to the transparent overlay. */
		.wsh--overlay.wsh--exiting .wsh__bar {
			animation: wsh-bar-exit var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)) both;
		}

		@keyframes wsh-bar-exit {
			from {
				transform: translateY(0);
				opacity: 1;
			}
			to {
				transform: translateY(-101%);
				opacity: 0;
			}
		}

		.wsh__inner--top {
			transition: min-block-size var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1));
		}

		.wsh__brand-mark,
		.wsh__brand-text {
			transition: block-size var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				font-size var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				filter var(--wp--custom--motion--duration--base, 250ms) linear;
		}

		/* Search expand: width animates open; visibility flips after it closes. */
		.wsh__search-form {
			transition:
				inline-size var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1)),
				visibility 0s linear var(--wp--custom--motion--duration--base, 250ms);
		}

		.wsh--search-open .wsh__search-form {
			transition: inline-size var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1));
		}

		.wsh__search-icon,
		.wsh__search-close {
			transition: opacity var(--wp--custom--motion--duration--fast, 150ms) linear;
		}

		.wsh__trigger-bars,
		.wsh__trigger-close,
		.wsh__primary-link::after,
		.wsh__group-chevron,
		.wsh__action,
		.wsh__trigger,
		.wsh__close,
		.wsh__close-circle,
		.wsh__col-name,
		.wsh__col-link,
		.wsh__rail-head,
		.wsh__rail-link {
			transition:
				transform var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, ease),
				rotate var(--wp--custom--motion--duration--fast, 150ms) var(--wp--custom--motion--ease--standard, ease),
				opacity var(--wp--custom--motion--duration--fast, 150ms) linear,
				color var(--wp--custom--motion--duration--fast, 150ms) linear,
				border-color var(--wp--custom--motion--duration--fast, 150ms) linear,
				background-color var(--wp--custom--motion--duration--fast, 150ms) linear;
		}

		/* Cover zoom + CTA / link chevron nudge ride the soft brand ease. */
		.wsh__feature-img,
		.wsh__col-link .woo-sil7en-icon,
		.wsh__col-all .woo-sil7en-icon,
		.wsh__feature-cta .woo-sil7en-icon {
			transition: transform var(--wp--custom--motion--duration--base, 250ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1));
		}

		.wsh__feature-link:hover .wsh__feature-img {
			transform: scale(1.04);
		}

		.wsh__feature-link:hover .wsh__feature-cta .woo-sil7en-icon {
			transform: translateX(0.3rem);
		}

		/* Choreographed entrance — every overlay region eases up + in once the
		   panel opens. --wsh-i (inline per region) cascades the delay so the
		   feature, the nav head, each category column and the rails reveal in
		   sequence behind the full-screen wipe. GPU transform/opacity only. */
		.wsh__feature,
		.wsh__nav-head,
		.wsh__col,
		.wsh__rails {
			opacity: 0;
			transform: translateY(1.25rem);
		}

		.wsh--open .wsh__feature,
		.wsh--open .wsh__nav-head,
		.wsh--open .wsh__col,
		.wsh--open .wsh__rails {
			opacity: 1;
			transform: none;
			transition:
				opacity var(--wp--custom--motion--duration--slow, 400ms) linear,
				transform var(--wp--custom--motion--duration--slow, 400ms) var(--wp--custom--motion--ease--soft, cubic-bezier(0.22, 1, 0.36, 1));
			transition-delay: calc(120ms + var(--wsh-i, 0) * 70ms);
		}

		/* The feature panel slides in from its own edge for the asymmetric feel. */
		.wsh__feature {
			transform: translateX(-1.5rem);
		}

		.wsh--open .wsh__feature {
			transform: none;
		}

		/* Closing returns instantly — no reverse stagger to fight the wipe. */
		.wsh:not(.wsh--open) .wsh__feature,
		.wsh:not(.wsh--open) .wsh__nav-head,
		.wsh:not(.wsh--open) .wsh__col,
		.wsh:not(.wsh--open) .wsh__rails {
			transition: none;
		}

		/* Sticky bar gains a quiet hairline shadow once the panel is open. */
		.wsh--sticky .wsh__bar {
			transition: box-shadow var(--wp--custom--motion--duration--base, 250ms) linear;
		}

		.wsh--open.wsh--sticky .wsh__bar {
			box-shadow: var(--wp--custom--shadow--sm);
		}
	}
}

/* Body scroll lock while the panel is open (set by view.js). */
.wsh-scroll-lock {
	overflow: hidden;
}

/* Transparent-overlay text/icon colour — kept UNLAYERED on purpose. The bar UI
   must be white to clear 3:1 over hero imagery, but the theme's link colour is
   an unlayered rule, and unlayered always beats a layered rule (@layer woo-sil7en)
   regardless of specificity. So this single override lives outside the layer and
   wins by specificity. Only applies in the transparent state. */
.wsh--overlay:not(.wsh--solid):not(.wsh--exiting) :is(
	.wsh__brand,
	.wsh__primary-link,
	.wsh__action,
	.wsh__trigger,
	.wsh__social-link,
	.wsh__search-toggle,
	.wsh__search-submit,
	.wsh__search-input
) {
	color: var(--wp--preset--color--base);
}

/* Overlay pages: the header is out of flow, so drop the post-content block-gap
   that would otherwise show as a strip above the leading hero. Unlayered to beat
   the theme's unlayered block-gap rule. (Body class set by woo_sil7en_core.) */
.woo-sil7en-overlay-header .wp-block-post-content {
	margin-block-start: 0;
}

/* Published header height so a leading hero can reserve clearance for the
   transparent bar. Mobile = single row; desktop (≥48em) = both rows. */
.woo-sil7en-overlay-header {
	--woo-sil7en-overlay-header-h: 5rem;
}

@media (min-width: 48em) {
	.woo-sil7en-overlay-header {
		--woo-sil7en-overlay-header-h: 8.5rem;
	}
}

/* ---- Social row inside the mobile drawer (desktop uses the bar social) ---- */
.wsh__panel-social {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.wsh__panel-social-label {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.wsh__panel-social .wsh__social {
	gap: 0.4rem;
}

.wsh__panel-social .wsh__social-link {
	color: currentColor;
	border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.wsh__panel-social .wsh__social-link:hover {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

@media (min-width: 48em) {
	.wsh__panel-social {
		display: none;
	}
}

/* ---- Discount badge on the drawer's featured product ---------------------- */
.wsh__feature-cover {
	position: relative;
}

.wsh__feature-badge {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	z-index: 2;
	padding: 0.2rem 0.6rem;
	font-size: var(--wp--preset--font-size--xs, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-ink, #2a1e00);
	background: var(--wp--preset--color--accent, #ffb703);
	border-radius: var(--wp--custom--radius--pill, 999px);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
}