/*
 * Announcement bar, header, mobile drawer and cart panel.
 *
 * One markup tree serves both breakpoints — see template-parts/header/bar.php.
 * The desktop layout is three centred rows; the mobile layout collapses to a
 * single row with the burger and search on the left.
 */

/* ── Announcement bar ────────────────────────────────────────────────────── */

.topbar {
	background: var(--topbar-bg);
	color: var(--topbar-text);
}

.topbar__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--topbar-height);
	padding-inline: 48px;
	text-align: center;
}

.topbar__message {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.35;
	padding-block: 8px;
}

.topbar__sep {
	margin-inline: 4px;
	opacity: 0.55;
}

.topbar__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.topbar__close {
	position: absolute;
	inset-inline-end: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.75;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.topbar__close:hover,
.topbar__close:focus-visible {
	opacity: 1;
}

.topbar__close .icon {
	width: 17px;
	height: 17px;
}

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

.site-header {
	position: relative;
	z-index: 100; /* above the page, below the drawer */
	background: var(--header-bg);
}

.site-header__brand-inner {
	display: grid;
	/* Three tracks so the wordmark is centred on the page, not on whatever is
	   left over after the icons. `minmax(0, 1fr)` rather than `1fr`: a bare
	   1fr floors at the track's content width, so the icon groups could not
	   shrink and the row overflowed on a narrow phone. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	min-height: var(--header-brand-height);
	gap: clamp(6px, 2vw, 12px);
}

.site-header__left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--header-icon-gap);
}

.site-header__icon,
.site-header__burger {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	/* Never below the 24px minimum tap target once the padding around the
	   glyph is counted; the box shrinks, the hit area stays usable. */
	width: clamp(28px, 8.6vw, 34px);
	height: clamp(28px, 8.6vw, 34px);
	padding: 0;
	border: 0;
	background: none;
	color: var(--header-icon);
	cursor: pointer;
}

.site-header__icon:hover,
.site-header__burger:hover {
	opacity: 0.6;
	text-decoration: none;
}

.site-header__icon .icon,
.site-header__burger .icon {
	width: var(--header-icon-size);
	height: var(--header-icon-size);
}

/* The burger becomes the close control while its drawer is open, so the cross
   is where the control that opened the panel was rather than a second one
   floating inside it. */
.site-header__burger .icon--close {
	display: none;
}

.site-header__burger[aria-expanded="true"] .icon--menu {
	display: none;
}

.site-header__burger[aria-expanded="true"] .icon--close {
	display: block;
}

/* ── Wordmark ────────────────────────────────────────────────────────────── */

.site-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--color-ink);
	text-align: center;
}

.site-logo:hover {
	text-decoration: none;
	opacity: 0.85;
}

.site-logo__primary {
	/* Hairlines above and below the brand word, as the design draws them. The
	   rules hug the text because the element is inline-block inside a centred
	   column, not stretched across the header. */
	display: block;
	padding-block: 3px;
	border-block: 1px solid var(--wordmark-rule);
	font-family: var(--font-display);
	font-size: var(--wordmark-size);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-logo__secondary {
	display: block;
	font-family: var(--font-display);
	font-size: var(--wordmark-sub-size);
	font-weight: 400;
	/* Wide tracking is what makes the second line read as a subtitle rather
	   than a smaller copy of the first. */
	letter-spacing: 0.34em;
	/* Tracking adds space after the last letter too, which visually shifts the
	   line left; pull it back by half. */
	text-indent: 0.34em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-logo__suffix {
	font-size: 0.62em;
	letter-spacing: 0;
	vertical-align: super;
}

/* ── Navigation rows ─────────────────────────────────────────────────────── */

.site-nav {
	border-block-start: 1px solid var(--color-border-light);
}

/* The design closes the header with a rule under the last nav row, which is
   what separates it from the page rather than a shadow or a gap. */
.site-nav--categories {
	border-block-end: 1px solid var(--color-border-light);
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--nav-gap);
	min-height: var(--header-row-height);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav--utility .site-nav__list {
	font-size: var(--nav-utility-size);
	letter-spacing: var(--nav-utility-track);
	text-transform: uppercase;
}

.site-nav--utility a,
.site-nav--utility span {
	color: var(--color-text-muted);
}

.site-nav--utility a:hover {
	color: var(--color-ink);
	text-decoration: none;
}

.site-nav--categories .site-nav__list {
	font-size: var(--nav-category-size);
	font-weight: 500;
	letter-spacing: var(--nav-category-track);
	text-transform: uppercase;
}

.site-nav__category {
	display: inline-block;
	padding-block: 6px;
	color: var(--color-ink);
	border-block-end: 2px solid transparent;
}

.site-nav__category:hover {
	border-block-end-color: currentColor;
	text-decoration: none;
}

.site-nav__category.is-accent {
	color: var(--color-accent);
}

/* ── Header search panel ─────────────────────────────────────────────────── */

.site-header__search-panel {
	border-block-start: 1px solid var(--color-border-light);
	background: var(--color-surface);
	padding-block: 14px;
}

.site-search {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 560px;
	margin-inline: auto;
	padding-inline: 14px;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: var(--color-white);
}

.site-search__input {
	flex: 1 1 auto;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
}

.site-search__input:focus {
	outline: none;
}

.site-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-text-muted);
	cursor: pointer;
}

/* ── Cart panel ──────────────────────────────────────────────────────────── */

.site-header__cart-wrap {
	position: relative;
}

.site-header__cart {
	position: relative;
}

.site-header__cart-count {
	position: absolute;
	top: -2px;
	inset-inline-end: -4px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--color-navy);
	color: var(--color-white);
	font-size: 10px;
	font-weight: 600;
	line-height: 17px;
	text-align: center;
}

.site-header__cart-count.is-empty {
	display: none;
}

.cart-panel {
	position: absolute;
	top: calc(100% + 14px);
	inset-inline-end: 0;
	z-index: 120;
	width: var(--cart-panel-width);
	max-width: calc(100vw - 2 * var(--container-pad));
	border-block-start: 2px solid var(--cart-panel-border);
	background: var(--color-white);
	box-shadow: var(--cart-panel-shadow);
}

.cart-panel__inner {
	/* Both axes, always: declaring only overflow-y makes the browser use
	   `auto` for overflow-x too, and the panel then pans sideways over any
	   overhanging child. */
	overflow-x: hidden;
	overflow-y: auto;
	max-height: min(70vh, 560px);
	padding: 26px 24px 24px;
	text-align: center;
}

.cart-panel__title {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-ink);
}

.cart-panel__lead {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-link);
}

.cart-panel__lead a {
	color: var(--color-accent);
	text-decoration: none;
}

.cart-panel__lead a:hover {
	text-decoration: underline;
}

.cart-panel__cta {
	display: block;
	padding: 14px 20px;
	background: var(--color-charcoal);
	color: var(--color-white);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-align: center;
	text-transform: uppercase;
	transition: background 0.15s ease;
}

.cart-panel__cta:hover,
.cart-panel__cta:focus-visible {
	background: var(--color-ink);
	color: var(--color-white);
	text-decoration: none;
}

.cart-panel__link {
	display: inline-block;
	margin-block-start: 12px;
	font-size: 13px;
	color: var(--color-text-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cart-panel__items {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	text-align: start;
}

.cart-line {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 26px;
	gap: 12px;
	align-items: center;
	padding-block: 12px;
}

.cart-line + .cart-line {
	border-block-start: 1px solid var(--color-border-light);
}

.cart-line__media img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.cart-line__name {
	display: block;
	font-size: 14px;
	line-height: 1.35;
}

.cart-line__meta {
	display: block;
	margin-block-start: 3px;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* WooCommerce ships `.woocommerce a.remove { color: #a00 !important }` at
   specificity (0,2,1), and the class has to stay for its own scripts. */
.woocommerce .cart-panel a.cart-line__remove,
.cart-line__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	color: var(--color-text-muted) !important;
	font-size: inherit;
}

.cart-line__remove .icon {
	width: 14px;
	height: 14px;
}

.cart-panel__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--color-border);
	font-size: 14px;
}

/* ── Mobile drawer ───────────────────────────────────────────────────────── */

.site-drawer {
	position: fixed;
	/* --drawer-top is the header's height, measured on open with the page
	   parked at the top (see lockScroll() in header.js), so the header stays
	   visible and undimmed above the drawer however it was opened. */
	inset: var(--drawer-top, 0) 0 0 0;
	z-index: 200;
}

.site-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.site-drawer.is-open .site-drawer__backdrop {
	opacity: 1;
}

.site-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--drawer-max-width), var(--drawer-width));
	background: var(--color-white);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}

.site-drawer.is-open .site-drawer__panel {
	transform: translateX(0);
}

.site-drawer__body {
	flex: 1 1 auto;
	/* Both axes, always — see .cart-panel__inner. */
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.drawer-search {
	padding: 16px;
	background: var(--color-surface);
}

.drawer-search .site-search {
	max-width: none;
	margin: 0;
	border-radius: 0;
}

.drawer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer-menu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--drawer-row-height);
	padding-inline: 16px;
	border-block-end: 1px solid var(--color-border);
	background: var(--color-surface);
}

.drawer-menu__link {
	flex: 1 1 auto;
	padding-block: 14px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.drawer-menu__link:hover {
	text-decoration: none;
	opacity: 0.7;
}

.drawer-menu__link.is-accent {
	color: var(--color-accent);
}

.drawer-menu__expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	cursor: pointer;
}

.drawer-menu__expand-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.drawer-menu__expand[aria-expanded="true"] .drawer-menu__expand-icon {
	/* The plus becomes a minus by rotating one of its strokes out of sight;
	   cheaper than swapping icons and it animates. */
	transform: rotate(45deg);
}

.drawer-sub {
	background: var(--color-white);
	border-block-end: 1px solid var(--color-border);
}

/* An author `display` wins over the browser's [hidden] rule, so restate it —
   without this every sub-panel renders, stacked open. */
.drawer-sub[hidden] {
	display: none;
}

.drawer-sub__list {
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.drawer-sub__link {
	display: block;
	padding: 10px 16px 10px 30px;
	font-size: 14px;
	color: var(--color-text-muted);
}

.drawer-sub__link:hover {
	color: var(--color-ink);
	text-decoration: none;
}

.drawer-account {
	margin: 0;
	padding: 18px 16px 28px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.drawer-account a:hover {
	color: var(--color-ink);
}

.drawer-account__sep {
	margin-inline: 6px;
	opacity: 0.5;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

/* Desktop: the burger and the left-hand search are the mobile controls. */
@media (min-width: 900px) {
	.site-header__burger,
	.site-header__icon--search {
		display: none;
	}
}

/* Mobile: one row — burger and search left, wordmark centred, heart and cart
   right. The account icon and both nav rows move into the drawer, which is
   where the design puts them. */
@media (max-width: 899px) {
	.site-header__icon--search-desktop,
	.site-header__icon--account,
	.site-nav {
		display: none;
	}

	.site-header__actions {
		gap: var(--header-icon-gap);
	}

	.site-header__left {
		gap: clamp(2px, 1.5vw, 10px);
	}

	.cart-panel {
		position: fixed;
		top: var(--cart-panel-top, 100%);
		inset-inline: var(--container-pad);
		width: auto;
		max-width: none;
	}
}