/* ==========================================================================
   DORIC · Announcement bar, header, primary nav, search panel,
           mobile overlay navigation, mobile bottom navigation
   ========================================================================== */

.d-shell {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--d-z-header);
	transition: transform var(--d-dur-slow) var(--d-ease-out);
	/* It rides above a scrolling page and retracts on the way down: its own
	   layer, and its paints contained to it. */
	will-change: transform;
	contain: layout paint;
}

/* Retracts on the way down, returns on the way up. Driven by the scroll
   broker, which refuses to hide it while a panel is open. */
.is-nav-hidden .d-shell { transform: translateY(-100%); }

/* A keyboard user tabbing into the bar must never have it slide away. */
.d-shell:focus-within { transform: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */

/* The header itself carries nothing: the bar below floats inside it. */
.d-header { background: transparent; }

/* ── The bar ────────────────────────────────────────────────────────────────
   A capsule that floats clear of the viewport edges, over the page rather
   than on top of it. It holds its own ground so it reads on a photograph as
   well as on obsidian, and firms up once the page has moved.
   ------------------------------------------------------------------------- */

.d-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--d-s3);
	height: var(--d-header-h);
	width: min(var(--d-container), calc(100% - var(--d-gutter) * 2));
	margin-inline: auto;
	margin-block: var(--d-header-gap);
	padding-inline: clamp(18px, 2vw, 30px);
	border: var(--d-hairline) solid var(--d-border);
	border-radius: 999px;
	background: rgba(11, 10, 9, .86);
	transition:
		background-color var(--d-dur-slow) var(--d-ease-out),
		border-color var(--d-dur-slow) var(--d-ease-out);
}

@supports (backdrop-filter: blur(2px)) {
	.d-header__bar {
		background: rgba(11, 10, 9, .58);
		backdrop-filter: blur(12px) saturate(1.12);
	}
}

.is-scrolled .d-header__bar {
	background: rgba(11, 10, 9, .94);
	border-color: var(--d-border-strong);
}

@supports (backdrop-filter: blur(2px)) {
	.is-scrolled .d-header__bar {
		background: rgba(11, 10, 9, .76);
	}
}

/* The menu button sits inside the actions, at every width: with search, the
   wishlist and the bag out of the bar, the drawer is the way to all of them.
   The actions already carry the optical inset, so the button adds none. */

/* min-height gives the wordmark a full-size tap target; the header is taller
   than this, so nothing moves. */
.d-header__brand {
	grid-column: 2;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	min-height: var(--d-tap);
}

.d-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	margin-right: calc(var(--d-s3) * -1);
}

.d-nav { display: none; }

/*
 * Scoped rather than a global utility: .d-iconbtn also sets `display`, and a
 * bare utility class would lose the cascade to it.
 */
@media (max-width: 1023px) {
	.d-header__actions .d-hide-below-lg { display: none; }
}

@media (min-width: 1024px) {
	.d-header__bar { grid-template-columns: auto 1fr auto; }
	.d-header__brand { grid-column: 1; justify-self: start; }
	.d-header__actions { grid-column: 3; }

	.d-nav {
		grid-column: 2;
		display: block;
		justify-self: start;
		padding-left: clamp(24px, 3.5vw, 68px);
	}
}

.d-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.7vw, 30px);
}

.d-nav__link {
	position: relative;
	display: block;
	padding-block: var(--d-s2);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--d-text);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-nav__link::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--d-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--d-dur-base) var(--d-ease-out);
}

.d-nav__link:hover { color: var(--d-accent); }
.d-nav__link:hover::after { transform: scaleX(1); }

/* ── Search panel ───────────────────────────────────────────────────────── */

.d-search {
	border-top: var(--d-hairline) solid var(--d-border);
	background: rgba(11, 10, 9, .97);
}

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

@supports (backdrop-filter: blur(2px)) {
	.d-search { background: rgba(11, 10, 9, .88); backdrop-filter: blur(18px); }
}

.d-search__inner {
	max-width: var(--d-container);
	margin-inline: auto;
	padding: var(--d-s5) var(--d-gutter) var(--d-s6);
}

.d-search__form {
	display: flex;
	align-items: center;
	gap: var(--d-s3);
	padding-bottom: var(--d-s3);
	border-bottom: var(--d-hairline) solid var(--d-border-strong);
}

.d-search__icon { flex: none; color: var(--d-text-muted); }

.d-search__input {
	flex: 1;
	min-width: 0;
	padding-block: var(--d-s2);
	background: none;
	border: 0;
	color: var(--d-text);
	font-size: 1rem;
}

.d-search__input:focus { outline: none; }
/* The rule under the field carries the focus the input's outline gave up. */
.d-search__form:has(.d-search__input:focus-visible) { border-bottom-color: var(--d-accent); }
.d-search__input::placeholder { color: var(--d-text-muted); }

.d-search__submit {
	flex: none;
	padding: var(--d-s2) var(--d-s3);
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	color: var(--d-accent);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-search__submit:hover { color: var(--d-accent-hover); }
.d-search__close { flex: none; }

.d-search__trending {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--d-s4);
	margin-top: var(--d-s5);
}

.d-search__trending a {
	font-size: var(--d-fs-small);
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-search__trending a:hover { color: var(--d-accent); }

/* ── Mobile overlay navigation ──────────────────────────────────────────── */

/* The scrim: the page stays visible behind the drawer, and a tap on it closes.
   Its padding is the margin the drawer floats inside, on all four sides. */
.d-mobilenav {
	position: fixed;
	inset: 0;
	z-index: var(--d-z-overlay);
	display: flex;
	justify-content: flex-end;
	padding: var(--d-s4);
	padding-bottom: calc(var(--d-s4) + env(safe-area-inset-bottom, 0px));
	/* The drawer parks above the screen; the scrim must not let it lengthen
	   the page while it is travelling. */
	overflow: hidden;
	background: rgba(11, 10, 9, .52);
}

/* A little lighter than it was, so the glass in front of it has something
   to hold. */


/* The drawer: a panel that floats clear of every edge and comes in from the
   right — far enough out to start that no corner shows before it moves. */
.d-mobilenav__drawer {
	display: flex;
	flex-direction: column;
	width: min(86vw, 380px);
	height: 100%;
	background: rgba(11, 10, 9, .9);
	border: var(--d-hairline) solid var(--d-border-strong);
	border-radius: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* The one movement in the drawer: down from above the screen. */
	transform: translate3d(0, calc(-100% - var(--d-s5)), 0);
	transition: transform 480ms var(--d-ease-cine);
}

.d-mobilenav.is-open .d-mobilenav__drawer { transform: none; }

/* Glass, like the bar at the top: the page reads through it, quietly. */
@supports (backdrop-filter: blur(2px)) {
	.d-mobilenav__drawer {
		background: rgba(11, 10, 9, .58);
		backdrop-filter: blur(16px) saturate(1.12);
	}

	/* It scrolls under the head, so that keeps a blur of its own. */
	.d-mobilenav__bar {
		background: rgba(11, 10, 9, .55);
		backdrop-filter: blur(12px) saturate(1.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.d-mobilenav,
	.d-mobilenav__drawer { transition: none; }
}

.d-mobilenav[hidden] { display: none; }

.d-mobilenav__bar {
	flex: none;
	position: sticky;
	top: 0;
	z-index: 1;
	background: rgba(11, 10, 9, .82);
	border-radius: 20px 20px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--d-header-h);
	padding-inline: var(--d-gutter);
	border-bottom: var(--d-hairline) solid var(--d-border-faint);
}

.d-mobilenav__bar .d-iconbtn { margin-right: calc(var(--d-s3) * -1); }

.d-mobilenav__nav {
	flex: 1;
	padding: var(--d-s5) var(--d-gutter) var(--d-s8);
}

.d-mobilenav__item { border-bottom: var(--d-hairline) solid var(--d-border-faint); }

.d-mobilenav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--d-s4);
	width: 100%;
	min-height: 52px;
	font-family: var(--d-font-display);
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--d-text);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-mobilenav__link:hover { color: var(--d-accent); }

/* Where you are: the accent, and a rule drawn in from the edge. */
.d-mobilenav__link.is-current,
.d-mobilenav__sublink.is-current { color: var(--d-accent); }

.d-mobilenav__link.is-current { position: relative; }

.d-mobilenav__link.is-current::before {
	content: '';
	position: absolute;
	left: calc(var(--d-s4) * -1);
	top: 50%;
	width: var(--d-s3);
	height: var(--d-hairline);
	background: var(--d-accent);
}
.d-mobilenav__chev { flex: none; color: var(--d-text-muted); transition: transform var(--d-dur-base) var(--d-ease-out); }
.d-mobilenav__toggle[aria-expanded="true"] { color: var(--d-accent); }
.d-mobilenav__toggle[aria-expanded="true"] .d-mobilenav__chev { transform: rotate(180deg); color: var(--d-accent); }

.d-mobilenav__panel[hidden] { display: none; }

.d-mobilenav__sub {
	display: grid;
	padding-bottom: var(--d-s5);
}

.d-mobilenav__sublink {
	display: flex;
	align-items: center;
	min-height: var(--d-tap);
	font-size: var(--d-fs-body);
	color: var(--d-text-2);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-mobilenav__sublink:hover { color: var(--d-text); }

.d-mobilenav__sublink--all {
	font-size: var(--d-fs-label);
	font-weight: 500;
	letter-spacing: var(--d-ls-label);
	text-transform: uppercase;
	color: var(--d-accent);
}

.d-mobilenav__foot {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--d-s4) var(--d-s7);
	padding: var(--d-s5) var(--d-gutter) calc(var(--d-s8) + env(safe-area-inset-bottom, 0px));
	border-top: var(--d-hairline) solid var(--d-border-faint);
}

.d-mobilenav__foot a,
.d-mobilenav__foot button {
	display: inline-flex;
	align-items: center;
	gap: var(--d-s2);
	min-height: var(--d-tap);
	font-size: var(--d-fs-small);
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-mobilenav__foot a:hover,
.d-mobilenav__foot button:hover { color: var(--d-accent); }

/* ── Mobile bottom navigation ───────────────────────────────────────────────
   A capsule of its own: centred on the bottom edge, only as wide as the five
   destinations need, floating clear of the edge rather than sitting on it.
   ------------------------------------------------------------------------- */

.d-bottomnav {
	position: fixed;
	contain: layout paint;
	inset: auto 0 calc(var(--d-bottomnav-gap) + env(safe-area-inset-bottom, 0px)) 0;
	z-index: var(--d-z-bottomnav);
	display: flex;
	justify-content: center;
	width: fit-content;
	max-width: calc(100% - var(--d-gutter) * 2);
	margin-inline: auto;
	padding: 2px 6px;
	background: rgba(11, 10, 9, .96);
	border: var(--d-hairline) solid var(--d-border);
	border-radius: 999px;
}

@supports (backdrop-filter: blur(2px)) {
	.d-bottomnav { background: rgba(11, 10, 9, .8); backdrop-filter: blur(12px) saturate(1.1); }
}

@media (min-width: 768px) {
	.d-bottomnav { display: none; }
}

.d-bottomnav__item {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 2px;
	/* One width for all five, so the capsule reads as evenly spaced whatever
	   the label underneath happens to be. */
	width: 58px;
	min-height: var(--d-bottomnav-h);
	font-size: 8.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--d-text-muted);
	transition: color var(--d-dur-fast) var(--d-ease-out);
}

.d-bottomnav__item:hover { color: var(--d-text); }
.d-bottomnav__item.is-current { color: var(--d-accent); }
.d-bottomnav__icon { position: relative; display: block; }
.d-bottomnav__icon .d-count { top: -4px; right: -8px; }