/*
 * Site header: menu button, logo lockup, product search pill, cart.
 * Matches screenshots/Screenshot 2026-09-08 120727.png.
 * Colours and sizes come from tokens.css — change them there.
 */

.site-header {
	background: var(--header-bg);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-height);
}

/* ── Menu button ─────────────────────────────────────────────────────────── */

.site-header__burger {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--header-icon);
	cursor: pointer;
}

.site-header__burger .icon {
	width: 26px;
	height: 26px;
	stroke-width: 2.6;
}

.site-header__burger:hover,
.site-header__cart:hover {
	opacity: 0.75;
}

/* ── Logo ────────────────────────────────────────────────────────────────── */

.site-header__logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-primary);
}

.site-header__logo img {
	max-height: calc(var(--header-height) - 12px);
	width: auto;
}

.site-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
}

.site-logo__line1 {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.site-logo__line2 {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.52em;
	/* The wide tracking adds space on the right; pull it back so the two
	   lines stay optically centred on each other. */
	margin-inline-start: 0.52em;
	margin-block-start: 4px;
}

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

.site-header__search {
	flex: 1 1 auto;
	min-width: 0;
}

.header-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	background: var(--header-search-bg);
	border: 2px solid var(--header-search-border);
	border-radius: 999px;
	box-shadow: 0 0 0 4px var(--header-search-glow);
}

.header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 8px 0 22px;
	border: 0;
	border-radius: 999px;
	background: none;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--color-text);
}

.header-search__input::placeholder {
	color: var(--header-search-text);
	opacity: 1;
	text-transform: uppercase;
}

.header-search__input:focus {
	outline: 0;
}

.header-search:focus-within {
	box-shadow: 0 0 0 4px var(--header-search-glow), 0 0 0 1px var(--color-primary) inset;
}

.header-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 40px;
	padding: 0;
	margin-inline-end: 6px;
	border: 0;
	background: none;
	color: var(--header-search-icon);
	cursor: pointer;
}

.header-search__submit .icon {
	width: 21px;
	height: 21px;
	stroke-width: 1.9;
}

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

.site-header__cart {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--header-icon);
	text-decoration: none;
}

.site-header__cart .icon {
	width: 27px;
	height: 27px;
	stroke-width: 1.9;
}

.site-header__cart-count {
	position: absolute;
	inset-block-end: 1px;
	inset-inline-end: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--header-badge-bg);
	color: var(--header-badge-text);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */

.site-drawer {
	position: fixed;
	/* --drawer-top is measured from the header on open, so the header stays
	   visible and undimmed above the drawer (and the drawer goes full-height
	   once the header has scrolled away). */
	inset: var(--drawer-top, 0) 0 0 0;
	z-index: 200;
}

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

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

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

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

.site-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-block-end: 1px solid var(--color-border);
}

.site-drawer__title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
}

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

.site-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px 0 24px;
	overscroll-behavior: contain;
}

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

.drawer-menu a {
	display: block;
	padding: 12px 20px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
}

.drawer-menu a:hover,
.drawer-menu a:focus {
	background: var(--header-bg);
	color: var(--color-primary);
}

.drawer-menu .sub-menu a {
	padding-inline-start: 36px;
	font-size: 15px;
	color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.site-drawer__backdrop,
	.site-drawer__panel {
		transition: none;
	}
}

/* ── Navigation drawer contents ──────────────────────────────────────────── */

.site-drawer--nav .site-drawer__panel {
	width: min(var(--drawer-width), 90vw);
	background: var(--header-bg);
}

.drawer-nav {
	padding: 0;
}

.drawer-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding: 12px 10px 18px;
	list-style: none;
}

.drawer-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 96px;
	padding: 14px 6px;
	background: var(--drawer-tile-bg);
	color: var(--color-text);
	text-decoration: none;
}

.drawer-tile__icon {
	width: 30px;
	height: 30px;
	color: var(--color-primary);
	stroke-width: 1.7;
}

.drawer-tile__label {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
}

.drawer-tile:hover {
	background: var(--color-white);
}

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

.drawer-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	background: none;
	color: var(--footer-text);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: start;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.drawer-menu__link:hover,
.drawer-menu__link:focus-visible {
	color: var(--color-primary);
}

.drawer-menu__arrow {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--color-primary);
	stroke-width: 1.8;
}

.drawer-rule {
	height: 3px;
	margin: 10px 0;
	border: 0;
	background: var(--drawer-rule);
}

.drawer-social {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 18px;
	background: var(--drawer-social-bg);
}

.drawer-social a {
	color: var(--color-text);
}

.drawer-social .icon {
	width: 24px;
	height: 24px;
}

.drawer-social a:hover {
	color: var(--color-primary);
}

/* Sub-panels slide over the first level. */

.drawer-sub {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: var(--header-bg);
	transform: translateX(100%);
	transition: transform 0.22s ease;
	overscroll-behavior: contain;
}

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

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

.drawer-sub__back {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	border-block-end: 1px solid var(--color-border);
	background: none;
	color: var(--footer-text);
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

.drawer-sub__back-icon {
	width: 22px;
	height: 22px;
	color: var(--color-primary);
	stroke-width: 1.8;
}

@media (prefers-reduced-motion: reduce) {
	.drawer-sub {
		transition: none;
	}
}

/* The menu button becomes a close control while the drawer is open. */

.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;
}

/* ── Cart drawer (right side) ────────────────────────────────────────────── */

.site-drawer--right .site-drawer__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	width: min(var(--cart-drawer-width), 94vw);
	transform: translateX(100%);
	background: var(--header-bg);
}

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

.cart-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.site-drawer--right .site-drawer__head {
	justify-content: flex-end;
	padding: 14px 18px 4px;
	border-block-end: 0;
}

.site-drawer.is-busy .site-drawer__panel {
	opacity: 0.6;
	pointer-events: none;
}

/* Empty state */

.cart-drawer__empty {
	padding: 24px 20px 32px;
	text-align: center;
}

.cart-drawer__empty-text {
	margin: 0 0 20px;
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--color-text);
}

.cart-drawer__continue {
	display: inline-block;
	min-width: 210px;
	padding: 15px 28px;
	background: #212427;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.cart-drawer__continue:hover {
	background: var(--color-primary);
}

.cart-drawer__account-q {
	margin: 26px 0 8px;
	font-family: var(--font-body);
	font-size: 16px;
}

.cart-drawer__account {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
}

.cart-drawer__account a {
	color: inherit;
	text-underline-offset: 3px;
}

.cart-drawer__cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--banner-gap);
	margin: 0;
	padding: 0 20px 24px;
	list-style: none;
}

/* Line items */

.cart-drawer__progress {
	padding: 4px 0 12px;
}

.cart-drawer__items {
	margin: 0;
	padding: 0 20px;
	list-style: none;
}

.cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr 24px;
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-block-end: 1px solid var(--color-border);
}

.cart-item__media img {
	display: block;
	width: 72px;
	height: auto;
	background: var(--color-white);
}

.cart-item__detail {
	min-width: 0;
	font-family: var(--font-body);
}

.cart-item__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
}

.cart-item__name a {
	color: inherit;
	text-decoration: none;
}

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

.cart-item__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 10px;
}

.cart-item__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-white);
}

.cart-item__step {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--color-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.cart-item__qty-input {
	width: 34px;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
}

.cart-item__qty-input::-webkit-outer-spin-button,
.cart-item__qty-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.cart-item__price {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.cart-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--color-text-muted);
}

.cart-item__remove .icon {
	width: 15px;
	height: 15px;
}

.cart-item__remove:hover {
	color: var(--color-primary);
}

/* Footer */

.cart-drawer__foot {
	padding: 16px 20px 22px;
	border-block-start: 1px solid var(--color-border);
	background: var(--color-white);
}

.cart-drawer__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: 14px;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
}

.cart-drawer__checkout {
	display: block;
	padding: 15px;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.cart-drawer__checkout:hover {
	background: var(--color-primary-dark);
}

.cart-drawer__view {
	display: block;
	margin-block-start: 10px;
	font-family: var(--font-body);
	font-size: 15px;
	text-align: center;
	color: var(--color-text-muted);
	text-underline-offset: 3px;
}

/* ── Mobile: search moves to its own row ─────────────────────────────────── */

@media (max-width: 899px) {
	.site-header__inner {
		flex-wrap: wrap;
		gap: 12px 16px;
		padding-block: 10px;
	}

	.site-header__logo {
		margin-inline-end: auto;
	}

	.site-header__search {
		order: 4;
		flex-basis: 100%;
	}

	.site-logo__line1 {
		font-size: 27px;
	}

	.site-logo__line2 {
		font-size: 10px;
		letter-spacing: 0.42em;
		margin-inline-start: 0.42em;
	}

	.header-search__input {
		font-size: 14px;
		padding-inline-start: 18px;
	}
}