/* Shared layer order: header/search < sheet < bottom controls < toast; native dialogs use top layer. */
:root { --cd-layer-header: 100; --cd-layer-sheet: 120; --cd-layer-bottom-nav: 130; --cd-layer-toast: 140; --cd-mobile-nav-height: 0px; }
.cd-site-header { position: relative; z-index: var(--cd-layer-header); }
.cd-header-account { flex-shrink: 0; }
.cd-header-account svg, .cd-nav-visual svg, .cd-bottom-nav svg { width: var(--cd-icon-size); height: var(--cd-icon-size); flex-shrink: 0; }
.cd-desktop-nav, .cd-nav-list { list-style: none; margin: 0; padding: 0; }
.cd-desktop-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cd-space-1); }
.cd-desktop-item { min-width: 0; max-width: 100%; }
.cd-nav-top { display: flex; align-items: center; gap: calc(var(--cd-space-3) / 2); min-height: var(--cd-control-size); max-width: 100%; padding: var(--cd-space-2); border: 0; border-radius: var(--cd-radius-sm); background: transparent; color: var(--cd-color-text); text-decoration: none; text-align: left; cursor: pointer; font-size: var(--cd-font-sm); }
.cd-nav-top .cd-nav-visual { display: none; width: var(--cd-icon-size); height: var(--cd-icon-size); }
.cd-nav-top--with-icon .cd-nav-visual { display: grid; }
.cd-nav-chevron { width: var(--cd-space-3); height: var(--cd-space-3); color: var(--cd-color-muted); flex-shrink: 0; transition: transform 180ms ease; }
.cd-nav-top[aria-expanded="true"] .cd-nav-chevron { transform: rotate(180deg); }
.cd-nav-top .cd-nav-copy { display: inline; white-space: nowrap; }
.cd-nav-top .cd-nav-copy small { display: none; }
.cd-nav-top:hover, .cd-nav-top.is-selected { color: var(--cd-color-text); background: var(--cd-gradient-pill-active); box-shadow: var(--cd-shadow-pressed); }
.cd-nav-top:focus-visible { outline: var(--cd-focus-width) solid var(--cd-color-muted); outline-offset: var(--cd-focus-offset); }
.cd-nav-link.is-current { color: var(--cd-color-accent); background: var(--cd-color-accent-soft); }
.cd-desktop-panel { --cd-control-size: calc(var(--cd-space-8) + var(--cd-space-3)); position: fixed; z-index: 20; width: min(16rem, calc(100vw - 2 * var(--cd-gutter))); max-height: calc(100dvh - var(--cd-nav-panel-top, 8rem) - var(--cd-space-4)); overflow: auto; overscroll-behavior: contain; padding: var(--cd-space-4); animation: cd-nav-enter 200ms ease-out; }
.cd-desktop-panel:not(.cd-desktop-panel--mega) { padding: var(--cd-space-2); }
.cd-desktop-panel:not(.cd-desktop-panel--mega) .cd-nav-link.is-current,
.cd-select__option[aria-selected="true"] { background: var(--cd-gradient-pill-active); color: var(--cd-color-text); box-shadow: var(--cd-shadow-pressed); }
.cd-desktop-panel:not(.cd-desktop-panel--mega) > .cd-nav-list { padding: var(--cd-space-2); border-radius: var(--cd-radius-md); background: var(--cd-color-background); box-shadow: var(--cd-shadow-inset); }
.cd-desktop-panel--mega { --cd-navigation-max-width: 71rem; max-width: var(--cd-navigation-max-width); }
.cd-desktop-panel[hidden], .cd-mobile-sheet[hidden], .cd-menu-backdrop[hidden], .cd-mobile-screen[hidden] { display: none; }
.cd-desktop-panel.is-closing { animation: cd-nav-leave 160ms ease-in both; pointer-events: none; }
.cd-mega-layout { display: grid; gap: var(--cd-space-3); }
.cd-mega-layout--featured { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.cd-mega-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cd-space-3); align-content: start; align-items: start; }
.cd-mega-column { min-width: 0; padding: var(--cd-space-3); border-radius: var(--cd-radius-md); }
.cd-nav-link { display: flex; align-items: center; gap: var(--cd-space-3); min-height: var(--cd-control-size); padding: var(--cd-space-2); border: 0; border-radius: var(--cd-radius-sm); background: transparent; color: var(--cd-color-text); text-decoration: none; text-align: left; width: 100%; cursor: pointer; }
.cd-nav-visual { width: var(--cd-space-8); height: var(--cd-space-8); display: grid; place-items: center; flex-shrink: 0; color: var(--cd-color-accent); }
.cd-nav-visual img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--cd-radius-sm); }
.cd-nav-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: var(--cd-line-height-heading); }
.cd-nav-title { font-weight: var(--cd-weight-semibold); }
.cd-nav-copy small { display: block; font-size: var(--cd-font-sm); color: var(--cd-color-muted); margin-top: var(--cd-space-1); font-weight: var(--cd-weight-normal); }
.cd-nav-badge { display: inline-block; padding: 0 var(--cd-space-1); border-radius: var(--cd-radius-sm); background: var(--cd-color-accent-soft); color: var(--cd-color-accent); font-size: var(--cd-font-sm); }
.cd-nav-list .cd-nav-list { padding-inline-start: var(--cd-space-4); }
.cd-desktop-panel .cd-nav-link { min-height: var(--cd-control-size); padding: var(--cd-space-1); gap: var(--cd-space-2); font-size: var(--cd-font-sm); }
.cd-desktop-panel .cd-nav-list .cd-nav-visual--icon { display: none; }
.cd-desktop-panel--mega .cd-nav-list .cd-nav-link { min-height: calc(var(--cd-control-size) - var(--cd-space-1)); color: var(--cd-color-muted); }
.cd-desktop-panel .cd-nav-title { font-weight: var(--cd-weight-normal); }
.cd-desktop-panel .cd-mega-heading { margin-bottom: var(--cd-space-2); font-size: var(--cd-font-md); color: var(--cd-color-text); }
.cd-desktop-panel .cd-mega-heading .cd-nav-title { font-weight: var(--cd-weight-semibold); }
.cd-desktop-panel .cd-mega-heading .cd-nav-visual { width: var(--cd-icon-size); height: var(--cd-icon-size); }
.cd-desktop-panel .cd-nav-link:is(:hover, :focus-visible),
.cd-select__option:is(:hover, .is-active) { background: var(--cd-gradient-raised); box-shadow: var(--cd-shadow-raised-soft); }
.cd-desktop-panel :focus-visible, .cd-mobile-sheet :focus-visible { outline-color: var(--cd-color-muted); }
.cd-desktop-panel .cd-nav-badge { background: var(--cd-color-surface); color: var(--cd-color-muted); }
.cd-desktop-panel .cd-nav-all { margin-top: var(--cd-space-3); min-height: calc(var(--cd-control-size) - var(--cd-space-2)); padding: var(--cd-space-1) var(--cd-space-3); }
.cd-nav-all { display: inline-flex; margin-top: var(--cd-space-4); }
.cd-nav-featured { --cd-radius-inner: calc(var(--cd-radius-card) - var(--cd-space-4)); display: flex; flex-direction: column; gap: var(--cd-space-3); align-self: start; min-width: 0; padding: var(--cd-space-4); text-decoration: none; color: var(--cd-color-text); background: var(--cd-gradient-raised); box-shadow: var(--cd-shadow-raised); overflow-wrap: anywhere; }
.cd-nav-featured img { width: 100%; height: auto; max-height: 13rem; object-fit: contain; border-radius: var(--cd-radius-inner); }
.cd-nav-featured small, .cd-nav-featured > span { font-size: var(--cd-font-sm); }
.cd-nav-featured ins { text-decoration: none; }
.cd-nav-featured del { color: var(--cd-color-muted); }
.cd-nav-featured > strong { font-weight: var(--cd-weight-semibold); }
.cd-nav-featured > small, .cd-nav-featured > span:not(.cd-nav-featured__action) { color: var(--cd-color-muted); }
.cd-nav-featured__action { color: var(--cd-color-accent); }
.cd-bottom-nav, .cd-mobile-sheet, .cd-menu-backdrop { display: none; }
@keyframes cd-nav-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cd-nav-leave { to { opacity: 0; transform: translateY(-4px); } }
/* Desktop header trial: reuse shared depth recipes with neutral local surfaces.
 * No root tokens or mobile navigation surfaces are changed. */
@media (min-width: 64.001rem) {
	.cd-site-header {
		--cd-header-base: #FDFDFD;
		--cd-header-hover: #FFFFFF;
		--cd-header-pressed: color-mix(in srgb, var(--cd-header-base) 97%, #222222);
		--cd-color-background: var(--cd-header-base);
		--cd-color-surface: var(--cd-header-base);
		--cd-gradient-raised: var(--cd-header-base);
		--cd-gradient-secondary: var(--cd-header-base);
		--cd-gradient-pill-active: var(--cd-header-pressed);
		--cd-surface-base: var(--cd-header-base);
		--cd-surface-raised: var(--cd-header-base);
		--cd-surface-inset: var(--cd-header-base);
		--cd-color-border: color-mix(in srgb, var(--cd-header-base) 86%, #222222);
		--cd-border-soft: var(--cd-color-border);
		--cd-color-accent-soft: var(--cd-header-pressed);
	}
	.cd-site-header .cd-header-main,
	.cd-site-header .cd-desktop-panel,
	.cd-site-header .cd-mega-column,
	.cd-site-header .cd-nav-featured { background: var(--cd-header-base); }

	/* Existing border widths/radii stay intact; soft light defines surface edges. */
	.cd-site-header :is(.cd-header-main, .cd-desktop-panel, .cd-mega-column, .cd-nav-featured),
	.cd-header-main > :is(.cd-search-toggle, .cd-header-account, .cd-header-cart),
	.cd-desktop-panel .cd-nav-all { border-color: transparent; }
	.cd-header-main > :is(.cd-search-toggle, .cd-header-account, .cd-header-cart) {
		background: var(--cd-header-base);
		color: var(--cd-color-text);
		box-shadow: var(--cd-shadow-raised-soft);
	}
	.cd-site-header .cd-nav-top,
	.cd-site-header .cd-desktop-panel .cd-nav-link {
		background: var(--cd-header-base);
		color: var(--cd-color-text);
		box-shadow: none;
		transition: box-shadow var(--cd-transition), background-color var(--cd-transition), transform var(--cd-transition);
	}
	.cd-site-header .cd-nav-top { box-shadow: var(--cd-shadow-raised-soft); }
	/* is-selected is legacy JS disclosure state, not the current destination.
	 * Parent/ancestor/opened controls stay neutral; the chevron signals opening. */
	.cd-site-header .cd-nav-top:is(.is-selected, .is-current, [aria-expanded="true"]),
	.cd-site-header .cd-desktop-panel .cd-nav-link.is-current:not([aria-current="page"]) {
		background: var(--cd-header-base);
		color: var(--cd-color-text);
		transform: none;
	}
	@media (hover: hover) {
		.cd-site-header .cd-nav-top:hover,
		.cd-site-header .cd-desktop-panel .cd-nav-link:hover,
		.cd-header-main > :is(.cd-search-toggle, .cd-header-account, .cd-header-cart):hover,
		.cd-site-header .cd-desktop-panel .cd-nav-all:hover {
			background: var(--cd-header-hover);
			color: var(--cd-color-text);
			box-shadow: var(--cd-shadow-raised);
			transform: translateY(var(--cd-lift-hover));
		}
	}
	.cd-site-header .cd-nav-top:active,
	.cd-site-header .cd-desktop-panel .cd-nav-link:active,
	.cd-header-main > :is(.cd-search-toggle, .cd-header-account, .cd-header-cart):active,
	.cd-site-header .cd-desktop-panel .cd-nav-all:active,
	.cd-site-header .cd-nav-top[aria-current="page"],
	.cd-site-header .cd-desktop-panel .cd-nav-link[aria-current="page"] {
		background: var(--cd-header-pressed);
		color: var(--cd-color-text);
		box-shadow: var(--cd-shadow-pressed);
		transform: none;
	}
	/* A duplicated top-level destination must not compete with the exact child. */
	.cd-site-header .cd-desktop-nav:has(.cd-desktop-panel [aria-current="page"]) .cd-nav-top[aria-current="page"] {
		background: var(--cd-header-base);
		box-shadow: var(--cd-shadow-raised-soft);
	}
	.cd-site-header :is(.cd-nav-top, .cd-desktop-panel a, .cd-header-main > .cd-button):focus-visible {
		outline: var(--cd-focus-width) solid var(--cd-focus-color);
		outline-offset: var(--cd-focus-offset);
	}
	/* The expanded search keeps its existing single inset-control geometry. */
	.cd-site-header.cd-search-open .cd-search-toggle {
		background: transparent;
		box-shadow: none;
		transform: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.cd-site-header .cd-nav-top,
		.cd-site-header .cd-desktop-panel .cd-nav-link { transition: none; transform: none; }
	}
}

@media (max-width: 64rem) {
	.cd-header-account { display: none; }
	body.cd-has-mobile-nav { --cd-mobile-nav-height: calc(4.5rem + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--cd-mobile-nav-height); }
	.cd-bottom-nav { position: fixed; inset: auto 0 var(--cd-keyboard-offset, 0px); z-index: var(--cd-layer-bottom-nav); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cd-space-1); padding: var(--cd-space-2) max(var(--cd-space-2), env(safe-area-inset-left)) calc(var(--cd-space-2) + env(safe-area-inset-bottom)); background: var(--cd-color-surface); box-shadow: var(--cd-shadow-raised); }
	.cd-bottom-nav > a, .cd-bottom-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cd-space-1); min-height: 3.5rem; min-width: 0; border: 0; border-radius: var(--cd-radius-md); padding: var(--cd-space-1); background: transparent; color: var(--cd-color-text); font-size: var(--cd-font-sm); line-height: var(--cd-line-height-heading); text-decoration: none; cursor: pointer; }
	.cd-bottom-nav > .is-active { color: var(--cd-color-accent); background: var(--cd-gradient-pill-active); box-shadow: var(--cd-shadow-pressed); }
	.cd-bottom-menu__icon { display: grid; place-items: center; width: var(--cd-control-size); height: var(--cd-control-size); margin-top: calc(-1 * var(--cd-space-4)); border-radius: var(--cd-radius-md); background: var(--cd-gradient-primary); box-shadow: var(--cd-shadow-raised-soft); color: var(--cd-color-surface); }
	.cd-bottom-cart-count { font-weight: var(--cd-weight-semibold); }
	.cd-mobile-sheet { display: flex; flex-direction: column; position: fixed; inset: max(6dvh, var(--cd-nav-admin-top, 0px)) 0 var(--cd-mobile-nav-height); z-index: var(--cd-layer-sheet); background: var(--cd-color-surface); border-radius: var(--cd-radius-card) var(--cd-radius-card) 0 0; box-shadow: var(--cd-shadow-raised); animation: cd-sheet-enter 220ms ease-out both; }
	.cd-mobile-sheet:not(.cd-sheet-drilling) { top: auto; max-height: calc(94dvh - var(--cd-mobile-nav-height) - var(--cd-nav-admin-top, 0px)); background: var(--cd-color-background); }
	.cd-mobile-sheet:not(.cd-sheet-drilling) .cd-sheet-cluster { max-height: inherit; }
	.cd-sheet-pointer .cd-sheet-header .cd-button:focus { outline: none; }
	.cd-mobile-sheet.is-closing { animation: cd-sheet-leave 180ms ease-in both; pointer-events: none; }
	.cd-menu-backdrop { display: block; position: fixed; inset: 0 0 var(--cd-mobile-nav-height); z-index: calc(var(--cd-layer-sheet) - 1); background: color-mix(in srgb, var(--cd-color-text) 18%, transparent); }
	.cd-sheet-cluster { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
	/* A bounded, shrinkable spacer prevents short drills sinking to the bottom. */
	.cd-sheet-drilling::before { content: ""; flex: 1 1 0; max-height: 20%; min-height: 0; }
	.cd-sheet-drilling .cd-sheet-cluster { flex: 0 1 auto; }
	.cd-sheet-header { display: flex; gap: var(--cd-space-3); align-items: center; padding: var(--cd-space-3) var(--cd-space-4); flex-shrink: 0; }
	.cd-sheet-header h2 { font-size: var(--cd-font-md); font-weight: var(--cd-weight-semibold); margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
	.cd-sheet-header [hidden] { display: none; }
	.cd-sheet-content { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--cd-space-4) var(--cd-space-6); }
	.cd-mobile-screen--drill { display: flex; flex-direction: column; flex: 0 0 auto; }
	.cd-drill-navigation { display: flex; flex-direction: column; gap: var(--cd-space-2); }
	.cd-drill-item { min-height: calc(var(--cd-space-12) + var(--cd-space-2)); padding: 1.5em; background: var(--cd-color-background); box-shadow: var(--cd-shadow-inset); border-radius: var(--cd-radius-md); }
	.cd-drill-item .cd-nav-visual, .cd-drill-item .cd-nav-visual svg { width: var(--cd-space-6); height: var(--cd-space-6); }
	.cd-drill-item .cd-nav-title { font-size: var(--cd-font-md); }
	.cd-drill-item > span:last-child:not(.cd-nav-copy):not(.cd-nav-visual) { font-size: var(--cd-font-lg); color: var(--cd-color-muted); }
	.cd-drill-navigation .cd-nav-all { justify-content: center; min-height: var(--cd-space-12); margin-top: 0; }
	.cd-sheet-header .cd-pill:focus:not(:focus-visible), .cd-sheet-pointer .cd-sheet-header .cd-pill:focus { outline: none; }
	.cd-sheet-header .cd-pill:focus-visible { outline-color: var(--cd-color-muted); }
	.cd-mobile-screen > .cd-nav-link:not(.cd-mobile-account) { min-height: var(--cd-space-12); }
	.cd-mobile-account { margin-bottom: var(--cd-space-3); min-height: calc(var(--cd-space-12) + var(--cd-space-6)); padding: var(--cd-space-3); background: var(--cd-gradient-raised); box-shadow: var(--cd-shadow-raised-soft); }
	.cd-mobile-account .cd-nav-visual { width: var(--cd-control-size); height: var(--cd-control-size); border-radius: var(--cd-radius-sm); background: var(--cd-color-accent-soft); box-shadow: var(--cd-shadow-inset); }
	.cd-mobile-account strong { font-size: calc(var(--cd-font-md) - 0.0625rem); font-weight: var(--cd-weight-semibold); }
	.cd-mobile-account small, .cd-quick-card small { font-size: calc(var(--cd-font-sm) - 0.0625rem); }
	.cd-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-3); }
	.cd-quick-card { gap: var(--cd-space-2); padding: var(--cd-space-3); min-height: calc(var(--cd-space-12) + var(--cd-space-8) + var(--cd-space-2)); background: var(--cd-gradient-raised); border-radius: var(--cd-radius-card); box-shadow: var(--cd-shadow-raised-soft); }
	.cd-quick-card .cd-nav-visual { width: calc(var(--cd-space-8) + var(--cd-space-2)); height: calc(var(--cd-space-8) + var(--cd-space-2)); border-radius: var(--cd-radius-sm); background: var(--cd-color-accent-soft); box-shadow: var(--cd-shadow-inset); }
	.cd-quick-card .cd-nav-title { font-size: var(--cd-font-sm); }
	.cd-quick-card .cd-nav-copy small { font-size: var(--cd-space-3); line-height: var(--cd-line-height-heading); }
	.cd-quick-card .cd-nav-title, .cd-quick-card .cd-nav-copy small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
	.cd-quick-card .cd-nav-arrow { width: var(--cd-space-3); height: var(--cd-space-3); }
	.cd-nav-arrow { width: var(--cd-icon-size); height: var(--cd-icon-size); flex-shrink: 0; color: var(--cd-color-muted); }
	.cd-platforms-title { margin-block: var(--cd-space-4) var(--cd-space-3); }
	.cd-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-2); }
	.cd-platform-grid > .cd-nav-link { min-height: calc(var(--cd-space-12) + var(--cd-space-3)); gap: var(--cd-space-2); padding: var(--cd-space-3); background: var(--cd-color-background); box-shadow: var(--cd-shadow-inset); border-radius: var(--cd-radius-md); }
	.cd-platform-grid .cd-nav-visual { width: var(--cd-icon-size); height: var(--cd-icon-size); }
	.cd-platform-grid .cd-nav-title { font-size: var(--cd-font-sm); }
	.cd-mobile-screen.cd-screen-next { animation: cd-screen-next 200ms ease both; }
	.cd-mobile-screen.cd-screen-back { animation: cd-screen-back 200ms ease both; }
	.cd-search-open .cd-header-account { display: none; }
	.cd-single-sticky-cart { bottom: var(--cd-mobile-nav-height); }
	.cd-has-mobile-nav .cd-single-sticky-cart { padding-bottom: var(--cd-space-3); }
}
@keyframes cd-sheet-enter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cd-sheet-leave { to { transform: translateY(100%); } }
@keyframes cd-screen-next { from { opacity: 0; transform: translateX(var(--cd-space-6)); } to { opacity: 1; transform: translateX(0); } }
@keyframes cd-screen-back { from { opacity: 0; transform: translateX(calc(-1 * var(--cd-space-6))); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
	.cd-nav-chevron { transition: none; }
	.cd-desktop-panel, .cd-desktop-panel.is-closing, .cd-mobile-sheet, .cd-mobile-sheet.is-closing, .cd-mobile-screen.cd-screen-next, .cd-mobile-screen.cd-screen-back { animation: none; }
}