/* Desktop Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child button:hover {
	text-decoration: underline;
}

/* Drop nav */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: none !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
	border-radius: 5px;
	min-width: 225px !important;
	margin-left: calc(var(--wp--preset--spacing--medium) * -1);
	padding: 0;
	z-index: 20 !important;
	border-radius: 5px;
	box-shadow: var(--wp--preset--shadow--small-light);
}

/* Drop nav submenu */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-left: 0;
	top: 0 !important;
	left: 100%;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:first-child {
	padding-top: var(--wp--preset--spacing--small);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* Add padding to bottom of drop menu */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:last-child {
	padding-bottom: var(--wp--preset--spacing--small);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* Add margin to sub menu icon */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--small);
}

/* Drop nav link padding */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) a,
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) !important;
}

/* Mobile Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	padding: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 5px !important;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-page-list {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	border-radius: 0;
	margin: 0;
	padding: 5px 0 0 20px;
	align-items: flex-start;
	flex-direction: column;
	gap: 5px;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: block;
	position: absolute;
	right: 0;
	top: 5px;
	height: auto;
	width: 60px;
	padding: 15px 0;
	margin: 0;
	z-index: 10;
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	left: 0;
	right: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
	height: 16px;
	margin: 0;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation-submenu,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: flex;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container li:not(.wp-social-link) {
	width: 100%;
	padding: 0 0;
	position: relative;
}

/* Mobile menu links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	width: 100%;
	font-size: var(--wp--preset--font-size--base);
	padding: 15px 60px 15px 15px;
	border-radius: 5px;
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 15px 15px 15px 60px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	transition: .3s ease;
	text-decoration: none;
	background: color-mix(in srgb, currentColor, transparent 97%);
	-webkit-tap-highlight-color: transparent;
}

.wp-block-navigation__container .wp-block-navigation-item:has(.wp-block-navigation__submenu-container:hover) > .wp-block-navigation-item__content {
	background: transparent;
}

/* Mobile menu open button */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 4px;
	border-radius: 3px;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}

/* Editor-visible interaction presets for navigation links */
.wp-block-navigation.is-style-ilnatural-nav-interactive-amber .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-ilnatural-nav-interactive-amber .wp-block-navigation-item__content:focus-visible {
	color: var(--ilnatural-nav-hover-color, var(--wp--preset--color--secondary)) !important;
}

.wp-block-navigation.is-style-ilnatural-nav-interactive-amber .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-ilnatural-nav-interactive-amber .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--ilnatural-nav-active-color, var(--wp--preset--color--primary-alt)) !important;
}

.wp-block-navigation.is-style-ilnatural-nav-interactive-forest .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-ilnatural-nav-interactive-forest .wp-block-navigation-item__content:focus-visible {
	color: var(--ilnatural-nav-hover-color, var(--wp--preset--color--primary-alt)) !important;
}

.wp-block-navigation.is-style-ilnatural-nav-interactive-forest .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation.is-style-ilnatural-nav-interactive-forest .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--ilnatural-nav-active-color, var(--wp--preset--color--secondary)) !important;
}

/* Editor-visible mobile icon presets */
.wp-block-navigation.is-style-ilnatural-nav-icon-default {
	--mobile-menu-size: var(--wp--custom--nav-hamburger-size, 1.25rem);
	--mobile-menu-color: var(--wp--custom--nav-hamburger-color, #2c3e2d);
}

.wp-block-navigation.is-style-ilnatural-nav-icon-large-amber {
	--mobile-menu-size: 1.55rem;
	--mobile-menu-color: var(--wp--preset--color--secondary);
}

/* Mobile menu close button */
.wp-block-navigation__responsive-container-close {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}

.wp-block-ilnatural-mega-menu__menu-container {
	font-weight: 400;
}

/* ILNATURAL header — Greealea-inspired mobile drawer (scoped primary nav)
-------------------------------------------------------------- */

/* Three-column header (Site Editor): logo | nav | account/cart */
.ilnatural-header-columns.wp-block-columns {
	align-items: center;
	/* Wider gap = more breathing room between logo, menu, and icons (tune here or in Site Editor column %) */
	gap: clamp(1rem, 2.5vw, 2.25rem);
}

/*
 * Front-end vs editor: core navigation wraps `.wp-block-navigation__container` by default.
 * The editor canvas is often wider, so the same menu looks single-line in the editor but wraps live.
 * Keep desktop horizontal nav on one line and give the list room inside the column.
 */
@media (min-width: 1025px) {
	.ilnatural-header-columns .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		row-gap: 0;
	}

	.ilnatural-header-columns .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item {
		flex-shrink: 0;
	}

	/* Logo-center row: nav column gets more width than logo (see parts/header.html). */
	.ilnatural-header-layout--logo-center .wp-block-column:first-child .wp-block-navigation {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.ilnatural-header-layout--logo-center .wp-block-column:first-child .wp-block-navigation__responsive-container:not(.is-menu-open) {
		width: 100%;
	}

	/* Icons column: no shrink, actions flush to inline-end (logo stays visually centered). */
	.ilnatural-header-columns .ilnatural-header-col--icons {
		flex-shrink: 0;
		min-width: 0;
	}

	.ilnatural-header-columns .ilnatural-header-col--icons > .wp-block-group {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		flex-shrink: 0;
		width: 100%;
		min-width: 0;
	}

	.ilnatural-header-columns .ilnatural-header-col--icons .ilnatural-header-cell-actions {
		flex-shrink: 0;
		justify-content: flex-end;
		width: auto;
		max-width: 100%;
	}
}

/* When the editor or a synced menu re-injects WooCommerce pages, keep Cart/Checkout/Account off the text bar (icons remain). */
.ilnatural-primary-navigation .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/cart/"]),
.ilnatural-primary-navigation .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href$="/cart"]),
.ilnatural-primary-navigation .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/checkout/"]),
.ilnatural-primary-navigation .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/my-account/"]),
.ilnatural-primary-navigation .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/basket/"]),
.ilnatural-nav-hide-system-links .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/cart/"]),
.ilnatural-nav-hide-system-links .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href$="/cart"]),
.ilnatural-nav-hide-system-links .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/checkout/"]),
.ilnatural-nav-hide-system-links .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/my-account/"]),
.ilnatural-nav-hide-system-links .wp-block-navigation-item:has(a.wp-block-navigation-item__content[href*="/basket/"]) {
	display: none !important;
}

@media (max-width: 1024px) {
	.ilnatural-header-columns.wp-block-columns {
		gap: var(--wp--preset--spacing--small);
	}

	.ilnatural-header-col--nav .wp-block-group {
		justify-content: flex-end;
	}

	.ilnatural-header-col--nav .wp-block-navigation.ilnatural-mobile-menu-trigger {
		margin-left: auto;
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	/*
	 * Slide-in drawer: direction from theme (see functions.php :root + theme.json custom.nav-slide-direction).
	 * Defaults: inline-end anchor, closed = translateX(100%) in LTR (panel off-screen past the right edge).
	 *
	 * Core Navigation uses display:contents from ~782px upward so the menu list flows in the header row.
	 * With our 1024px header breakpoint that inlines the nav between 782–1024px unless we restore a box here.
	 */
	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		inset-inline-start: var(--ilnatural-nav-drawer-inset-inline-start, auto) !important;
		inset-inline-end: var(--ilnatural-nav-drawer-inset-inline-end, 0) !important;
		width: 80vw !important;
		max-width: 80vw !important;
		height: 100vh !important;
		height: 100dvh !important;
		margin: 0 !important;
		padding-top: env(safe-area-inset-top, 0) !important;
		padding-bottom: env(safe-area-inset-bottom, 0) !important;
		transform: translateX(var(--ilnatural-nav-drawer-translate-closed, 100%));
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		background-color: var(--ilnatural-color-forest, #2c3e2d) !important;
		color: var(--ilnatural-color-parchment, #fdfcf8) !important;
		box-shadow: var(--ilnatural-nav-drawer-shadow, -8px 0 32px rgba(0, 0, 0, 0.18));
		z-index: 100000 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		border: none !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
		transform: translateX(0) !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container .wp-block-navigation__container {
		color: inherit !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
		color: var(--ilnatural-color-parchment, #fdfcf8) !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
		background: transparent !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container-close {
		background: transparent !important;
		color: var(--ilnatural-color-amber-accent, #d4a017) !important;
		opacity: 1 !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container-close svg {
		fill: currentColor !important;
		color: var(--ilnatural-color-amber-accent, #d4a017) !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation:not(.is-menu-open) .wp-block-navigation__responsive-container-open {
		background-color: var(--wp--preset--color--tertiary) !important;
		color: var(--wp--preset--color--main) !important;
	}

	html body .wp-block-navigation.ilnatural-mobile-menu-trigger:not(.is-menu-open) .wp-block-navigation__responsive-container-open {
		color: var(--mobile-menu-color, var(--wp--preset--color--main)) !important;
	}

	html body .wp-block-navigation.ilnatural-mobile-menu-trigger .wp-block-navigation__responsive-container-open svg {
		width: var(--mobile-menu-size, var(--wp--custom--nav-hamburger-size, 1.25rem));
		height: var(--mobile-menu-size, var(--wp--custom--nav-hamburger-size, 1.25rem));
		transition: transform .25s ease, opacity .2s ease;
	}

	html body .wp-block-navigation.ilnatural-mobile-menu-trigger .wp-block-navigation__responsive-container-open {
		color: var(--mobile-menu-color, var(--wp--custom--nav-hamburger-color, #2c3e2d)) !important;
		transition: transform .25s ease, background-color .2s ease, color .2s ease;
	}

	html body .wp-block-navigation.ilnatural-mobile-menu-trigger.is-menu-open .wp-block-navigation__responsive-container-open svg {
		transform: rotate(90deg) scale(0.9);
		opacity: .75;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container-close {
		transition: transform .25s ease, opacity .2s ease;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container-close:hover {
		transform: rotate(90deg);
		opacity: .85;
	}

	/* Hamburger visible; drawer list hidden until open (matches header ≤1024px). */
	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		visibility: visible;
		opacity: 1;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		display: none !important;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		width: 100%;
	}

	/*
	 * Mobile/tablet header order: Logo (left) -> Cart+total -> Account -> Hamburger (far right).
	 * Columns stay in a row (is-not-stacked-on-mobile); we reorder with flex `order` and
	 * neutralise the desktop 30/35% flex-basis so the logo takes the lead space.
	 */
	.ilnatural-header-columns .wp-block-column {
		flex-basis: auto !important;
	}

	.ilnatural-header-col--logo {
		order: 1;
		flex: 1 1 auto !important;
	}

	.ilnatural-header-col--logo .wp-block-group {
		justify-content: flex-start !important;
	}

	.ilnatural-header-col--icons {
		order: 2;
		flex: 0 0 auto !important;
	}

	.ilnatural-header-col--nav {
		order: 3;
		flex: 0 0 auto !important;
		width: auto !important;
	}

	/*
	 * Robust fallback: order by CONTENT, not class. Works even when the live header
	 * is a Site Editor (database) copy whose columns lost the ilnatural-header-col--*
	 * classes. Scoped to the header row so other column layouts are untouched.
	 */
	.ilnatural-header-row .wp-block-columns > .wp-block-column:has(.wp-block-site-logo) {
		order: 1;
		flex: 1 1 auto !important;
	}

	.ilnatural-header-row .wp-block-columns > .wp-block-column:has(.wp-block-site-logo) .wp-block-group {
		justify-content: flex-start !important;
	}

	.ilnatural-header-row .wp-block-columns > .wp-block-column:has(.wp-block-woocommerce-mini-cart, .wp-block-woocommerce-customer-account) {
		order: 2;
		flex: 0 0 auto !important;
	}

	.ilnatural-header-row .wp-block-columns > .wp-block-column:has(.wp-block-navigation) {
		order: 3;
		flex: 0 0 auto !important;
		width: auto !important;
	}
}

/* Account + Basket links injected into the mobile slide-in drawer.
   Hidden on desktop (the header bar shows the icons there). */
.il-drawer-actions {
	display: none;
}

@media (max-width: 1024px) {
	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions {
		display: flex;
		flex-direction: column;
		gap: 4px;
		width: 100%;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(253, 252, 248, 0.18);
		order: 99;
	}

	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__link {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		padding: 13px 12px;
		border-radius: 8px;
		color: var(--ilnatural-color-parchment, #fdfcf8) !important;
		font-size: var(--wp--preset--font-size--base, 1rem);
		font-weight: 600;
		text-decoration: none;
	}

	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__link:hover,
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__link:focus-visible {
		background: rgba(253, 252, 248, 0.1);
		outline: none;
	}

	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__total {
		margin-left: auto;
		font-weight: 700;
		color: var(--ilnatural-color-amber-accent, #d4a017) !important;
	}
}

/* ============================================================
   Dedicated mobile / tablet header (replaces desktop <=1024px)
   ------------------------------------------------------------
   The desktop header (header.site-header) is hidden below 1025px and the
   lightweight mobile header injected after it (parts/header-mobile.html) takes
   over: Logo (left) -> Cart+total -> Account -> Hamburger (far right).
   ============================================================ */

/* Hidden on desktop; the desktop header handles >=1025px. */
.ilnatural-mobile-header {
	display: none;
}

@media (max-width: 1024px) {
	/* Replace the desktop header entirely. */
	header.site-header {
		display: none !important;
	}

	.ilnatural-mobile-header {
		display: block;
		position: sticky;
		top: 0;
		z-index: 99980;
		width: 100%;
		background-color: var(--wp--preset--color--base, #fdfcf8);
	}

	.ilnatural-mobile-header__strip {
		margin: 0;
	}

	.ilnatural-mobile-header__strip p {
		margin: 0;
		line-height: 1.3;
	}

	.ilnatural-mobile-header__bar {
		margin: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--small, 12px);
	}

	/* Logo takes the lead space on the left. */
	.ilnatural-mobile-header__logo {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		justify-content: flex-start;
	}

	.ilnatural-mobile-header__logo .wp-block-site-logo img {
		max-height: 42px;
		width: auto;
		display: block;
	}

	/* Right cluster: cart, account, hamburger. */
	.ilnatural-mobile-header__actions {
		flex: 0 0 auto;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--wp--preset--spacing--small, 12px);
		margin: 0;
	}

	/* Lightweight cart link: icon + total as an amber pill (no WC block render). */
	.ilnatural-mobile-header__actions .wp-block-html {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--small, 12px);
		margin: 0;
	}

	.ilnatural-mobile-header__actions .ilnatural-mobile-header__cart {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		color: var(--wp--preset--color--main, #1a1c1a);
		text-decoration: none;
	}

	.ilnatural-mobile-header__actions .ilnatural-mobile-header__cart-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.ilnatural-mobile-header__actions .ilnatural-mobile-header__cart-total {
		display: inline-block;
		font-size: 0.78rem;
		font-weight: 700;
		line-height: 1;
		color: #ffffff;
		background-color: var(--wp--preset--color--secondary, var(--ilnatural-color-amber-accent, #d4a017));
		padding: 4px 8px;
		border-radius: 999px;
		white-space: nowrap;
	}

	.ilnatural-mobile-header__actions .ilnatural-mobile-header__cart-total :where(*) {
		color: inherit;
	}

	/* Account icon link: align and give a proper tap target. */
	.ilnatural-mobile-header__actions .ilnatural-mobile-header__account {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		color: var(--wp--preset--color--main, #1a1c1a);
		text-decoration: none;
	}

	/* Hamburger sits last (far right) and keeps a 44px tap target. */
	.ilnatural-mobile-header__actions .wp-block-navigation {
		margin: 0;
		display: flex;
		align-items: center;
	}

	.ilnatural-mobile-header__actions .wp-block-navigation .wp-block-navigation__responsive-container-open {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ============================================================
   Slide-in drawer polish: backdrop blur, active highlight, amounts
   ============================================================ */
@media (max-width: 1024px) {
	/* Dim + blur everything behind the open drawer (full viewport scrim). */
	html body .wp-block-navigation.ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background: rgba(20, 24, 20, 0.42);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
		z-index: -1;
		pointer-events: none;
	}

	/* Clearer active / current menu item: amber-tinted pill + amber text. */
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content,
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item__content[aria-current="page"] {
		background: rgba(232, 160, 32, 0.18) !important;
		color: var(--wp--preset--color--secondary, #e8a020) !important;
		box-shadow: inset 3px 0 0 var(--wp--preset--color--secondary, #e8a020);
		font-weight: 600;
		border-radius: 8px;
	}

	/* Hover affordance in the drawer. */
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
		background: rgba(253, 252, 248, 0.12) !important;
		color: var(--ilnatural-color-parchment, #fdfcf8) !important;
	}

	/* Ensure all injected account/basket text is light, total stays amber. */
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__link,
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__link span {
		color: var(--ilnatural-color-parchment, #fdfcf8) !important;
	}

	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__total,
	html body .ilnatural-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .il-drawer-actions__total * {
		color: var(--wp--preset--color--secondary, #e8a020) !important;
	}
}