/**
 * ANZO Store — Layout: containers, grids, header, footer, page shells.
 */

/* ---------------------------------------------------------------
 * Containers & sections
 * --------------------------------------------------------------- */

.container {
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--container-max);
	padding-inline: var(--container-pad);
}

.container--narrow {
	max-inline-size: var(--container-narrow);
}

.container--wide {
	max-inline-size: 1600px;
}

/* Cart / checkout / account shell. The clamp already collapses to the base
 * container on narrow viewports, so no breakpoint is needed here. */
.container--commerce {
	max-inline-size: var(--container-commerce);
}

.section {
	padding-block: var(--section-y);
}

.section--tight {
	padding-block: calc(var(--section-y) * 0.6);
}

.section--muted {
	background-color: var(--surface-muted);
}

.section--inverse {
	background-color: var(--surface-inverse);
	color: var(--text-inverse);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3 {
	color: var(--text-inverse);
}

.section__head {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	margin-block-end: var(--space-8);
}

.section__title {
	font-size: var(--text-2xl);
}

.section__subtitle {
	color: var(--text-muted);
	margin-block-start: var(--space-2);
	max-inline-size: 60ch;
}

.section__link {
	color: var(--color-accent);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	flex-shrink: 0;
	text-decoration: none;
}

.section__link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Reusable grid
 * --------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--space-6);
}

.grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Product-ish grids: 2 up on phones, growing with the viewport. */
.grid--products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------
 * The 12-column system
 *
 * One grid vocabulary for the whole theme. `.row` is the track, `.col-*`
 * are the spans. Mobile-first: a column is full width until a breakpoint
 * class narrows it, so markup reads as "12 on phones, 6 from tablet up":
 *
 *     <div class="row">
 *       <div class="col-12 col-md-6">…</div>
 *       <div class="col-12 col-md-6">…</div>
 *     </div>
 *
 * Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280
 *
 * ⚠ `.col-1` and `.col-2` are also used by WooCommerce's classic checkout
 * (`#customer_details.col2-set > .col-1 / .col-2`). A span only takes effect
 * inside a grid container, so the collision is inert as long as `.col2-set`
 * is never made a grid — which woocommerce.css enforces explicitly. Keep that
 * reset in place if you touch either file.
 * --------------------------------------------------------------- */

.row {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--gutter-x, var(--space-5));
	row-gap: var(--gutter-y, var(--space-5));
}

.row--tight {
	--gutter-x: var(--space-3);
	--gutter-y: var(--space-3);
}

.row--loose {
	--gutter-x: var(--space-8);
	--gutter-y: var(--space-8);
}

/* Base spans — apply at every width. */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (min-width: 640px) {
	.col-sm-1 { grid-column: span 1; }
	.col-sm-2 { grid-column: span 2; }
	.col-sm-3 { grid-column: span 3; }
	.col-sm-4 { grid-column: span 4; }
	.col-sm-5 { grid-column: span 5; }
	.col-sm-6 { grid-column: span 6; }
	.col-sm-7 { grid-column: span 7; }
	.col-sm-8 { grid-column: span 8; }
	.col-sm-9 { grid-column: span 9; }
	.col-sm-10 { grid-column: span 10; }
	.col-sm-11 { grid-column: span 11; }
	.col-sm-12 { grid-column: span 12; }
}

@media (min-width: 768px) {
	.col-md-1 { grid-column: span 1; }
	.col-md-2 { grid-column: span 2; }
	.col-md-3 { grid-column: span 3; }
	.col-md-4 { grid-column: span 4; }
	.col-md-5 { grid-column: span 5; }
	.col-md-6 { grid-column: span 6; }
	.col-md-7 { grid-column: span 7; }
	.col-md-8 { grid-column: span 8; }
	.col-md-9 { grid-column: span 9; }
	.col-md-10 { grid-column: span 10; }
	.col-md-11 { grid-column: span 11; }
	.col-md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
	.col-lg-1 { grid-column: span 1; }
	.col-lg-2 { grid-column: span 2; }
	.col-lg-3 { grid-column: span 3; }
	.col-lg-4 { grid-column: span 4; }
	.col-lg-5 { grid-column: span 5; }
	.col-lg-6 { grid-column: span 6; }
	.col-lg-7 { grid-column: span 7; }
	.col-lg-8 { grid-column: span 8; }
	.col-lg-9 { grid-column: span 9; }
	.col-lg-10 { grid-column: span 10; }
	.col-lg-11 { grid-column: span 11; }
	.col-lg-12 { grid-column: span 12; }
}

@media (min-width: 1280px) {
	.col-xl-3 { grid-column: span 3; }
	.col-xl-4 { grid-column: span 4; }
	.col-xl-6 { grid-column: span 6; }
	.col-xl-8 { grid-column: span 8; }
	.col-xl-12 { grid-column: span 12; }
}

/* Content + sidebar shell used by shop archives and the blog. */
.shell {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
	.shell--with-sidebar {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--space-10);
	}
}

.shell__sidebar > * + * {
	margin-block-start: var(--space-8);
}

/* ---------------------------------------------------------------
 * Top bar
 * --------------------------------------------------------------- */

.topbar {
	background-color: var(--surface-inverse);
	color: var(--color-ink-300);
	font-size: var(--text-xs);
}

.topbar__inner {
	align-items: center;
	display: flex;
	gap: var(--space-6);
	justify-content: space-between;
	min-block-size: 36px;
}

.topbar__message {
	letter-spacing: var(--tracking-wide);
}

.topbar__links {
	align-items: center;
	display: flex;
	gap: var(--space-5);
	margin: 0;
}

.topbar a {
	text-decoration: none;
}

.topbar a:hover {
	color: var(--color-white);
}

@media (max-width: 767px) {
	.topbar__links {
		display: none;
	}

	.topbar__inner {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------
 * Header
 * --------------------------------------------------------------- */

.site-header {
	background-color: var(--surface);
	border-block-end: 1px solid var(--border);
	position: sticky;
	inset-block-start: 0;
	z-index: var(--z-header);
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: var(--space-3);
	min-block-size: var(--header-height);
}

/* Navigation moved to its own bar under the search row, so the search field
 * can own the full width of the header on a large catalogue. */
/* Dark band: it separates the utility row (search, account, cart) from the
 * catalogue, and gives the menu a single strong edge instead of a hairline. */
.site-header__nav-bar {
	background-color: var(--surface-inverse);
	display: none;
}

/* Aligned to the reading edge, not centred. Five items floating in the middle
 * of a 1280px band read as unplanned; starting them on the same edge as the
 * logo above gives the header one vertical line to hang off. */
.site-header__nav-bar .nav-primary__list {
	justify-content: flex-start;
	/* Tabs sit flush; the padding inside each link is the spacing. A gap here
	 * would break the hover backgrounds into floating chips. */
	gap: 0;
}

/* Dropdowns open flush against the band. The old 8px gap was a dead zone: the
 * pointer crossed unstyled space on its way down and the menu closed. */
.site-header__nav-bar .nav-primary > ul > li > .sub-menu {
	inset-block-start: 100%;
}

/* The band gets a real height so every item shares one baseline and the
 * active underline has an edge to sit on. */
.site-header__nav-bar .nav-primary > ul > li > a {
	color: var(--color-ink-300);
	align-items: center;
	display: flex;
	block-size: 52px;
	padding-block: 0;
	padding-inline: var(--space-4);
	font-weight: var(--weight-medium);
}

.site-header__nav-bar .nav-primary > ul > li > a:hover,
.site-header__nav-bar .nav-primary > ul > li.current-menu-item > a,
.site-header__nav-bar .nav-primary > ul > li.current-menu-ancestor > a {
	color: var(--color-white);
	/* A whisper of lift on the dark band. Anything stronger turns a menu into
	 * a row of buttons. */
	background-color: rgb(255 255 255 / 6%);
}

/* The current section stays legible even without the underline — colour alone
 * is not a reliable "you are here" for everyone. */
.site-header__nav-bar .nav-primary > ul > li.current-menu-item > a,
.site-header__nav-bar .nav-primary > ul > li.current-menu-ancestor > a {
	font-weight: var(--weight-semibold);
}

/* Full-bleed underline anchored to the band's edge rather than inset from the
 * link's padding — that is what makes it read as a tab rather than a stray
 * dash under the word. */
.site-header__nav-bar .nav-primary > ul > li > a::before {
	inset-inline: 0;
	block-size: 3px;
}

/* Sub-menus stay a light panel — they float over the page, not over the
 * band — so their own colours must not inherit the dark bar's. */
.site-header__nav-bar .nav-primary .sub-menu a {
	color: var(--color-ink-700);
}

.site-header__nav-bar .nav-primary .sub-menu a:hover {
	color: var(--color-ink-900);
}

.site-header__nav {
	min-inline-size: 0;
}

.site-header__actions {
	align-items: center;
	display: flex;
	gap: var(--space-1);
	margin-inline-start: auto;
}

@media (min-width: 1024px) {
	.site-header__actions {
		gap: var(--space-2);
	}

	/* A hairline between the "browse" actions (wishlist, account) and the
	 * commit action (cart), so the eye groups them instead of reading four
	 * equal-weight icons. The gap is generous on purpose — the separation is
	 * what makes the cart read as a different kind of control. */
	.site-header__actions .header-action--cart {
		margin-inline-start: var(--space-6);
		position: relative;
	}

	.site-header__actions .header-action--cart::before {
		background-color: var(--border);
		content: "";
		block-size: 26px;
		inline-size: 1px;
		inset-block-start: 50%;
		/* Centred in the gap rather than hugging the button. */
		inset-inline-start: calc(var(--space-3) * -1);
		position: absolute;
		transform: translateY(-50%);
	}
}

@media (min-width: 1024px) {
	.site-header__inner {
		gap: var(--space-6);
	}

	.site-header__nav-bar {
		display: block;
	}
}

/* ---------------------------------------------------------------
 * Header search — the primary navigation for a large catalogue
 * --------------------------------------------------------------- */

.header-search {
	flex: 1;
	min-inline-size: 0;
	/* Full-width row of its own under the logo on phones. */
	order: 10;
	flex-basis: 100%;
	padding-block-end: var(--space-3);
}

.header-search__form {
	align-items: stretch;
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	display: flex;
	overflow: visible;
	position: relative;
	transition: border-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-fast) var(--ease);
}

.header-search__form:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--ring);
}

.header-search__scope {
	background-color: var(--surface-muted);
	border: 0;
	border-end-start-radius: var(--radius-md);
	border-start-start-radius: var(--radius-md);
	border-inline-end: 1px solid var(--border);
	color: var(--text-muted);
	display: none;
	flex-shrink: 0;
	font-size: var(--text-sm);
	inline-size: auto;
	max-inline-size: 170px;
	padding-block: 0;
	padding-inline: var(--space-4) var(--space-8);
}

.header-search__scope:focus {
	box-shadow: none;
	outline: none;
}

.header-search__input {
	border: 0;
	border-radius: 0;
	flex: 1;
	font-size: var(--text-base);
	min-inline-size: 0;
	padding-block: var(--space-3);
	padding-inline: var(--space-4);
}

.header-search__input:focus {
	box-shadow: none;
	outline: none;
}

.header-search__submit {
	align-items: center;
	background-color: var(--color-accent);
	border-end-end-radius: var(--radius-md);
	border-start-end-radius: var(--radius-md);
	color: var(--color-white);
	display: inline-flex;
	flex-shrink: 0;
	inline-size: 52px;
	justify-content: center;
	transition: background-color var(--duration-fast) var(--ease);
}

.header-search__submit:hover {
	background-color: var(--color-accent-hover);
}

/* Suggestions panel */
.header-search__results {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	inset-block-start: calc(100% + var(--space-2));
	inset-inline: 0;
	max-block-size: 70vh;
	overflow-y: auto;
	padding: var(--space-2);
	position: absolute;
	z-index: var(--z-dropdown);
}

.header-search__results[hidden] {
	display: none;
}

.header-search__status {
	color: var(--text-muted);
	font-size: var(--text-sm);
	margin: 0;
	padding: var(--space-2) var(--space-3);
}

.header-search__status:empty {
	display: none;
}

.header-search__list {
	display: grid;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-search__all {
	border-block-start: 1px solid var(--border);
	color: var(--color-accent);
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	margin-block-start: var(--space-2);
	padding: var(--space-3);
	text-align: center;
	text-decoration: none;
}

.header-search__all[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.header-search__scope {
		display: block;
	}
}

@media (min-width: 1024px) {
	.header-search {
		flex-basis: auto;
		order: 0;
		padding-block-end: 0;
		max-inline-size: 640px;
	}
}

/* ---------------------------------------------------------------
 * Header action buttons
 * --------------------------------------------------------------- */

.header-action__icon {
	display: inline-flex;
	position: relative;
}

.header-action__text {
	display: none;
}

@media (min-width: 1024px) {
	/* The cart is the one action that ends a session — give it a filled
	 * treatment so it reads as the destination, not another icon. */
	.header-action--cart {
		background-color: var(--surface-muted);
		border: 1px solid var(--border);
		color: var(--color-ink-800);
	}

	.header-action--cart:hover {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
		color: var(--color-white);
	}

	.header-action--cart:hover .header-action__badge {
		border-color: var(--color-primary);
	}
}

/* ---------------------------------------------------------------
 * Mobile bottom navigation
 * --------------------------------------------------------------- */

.bottom-nav {
	background-color: var(--surface);
	border-block-start: 1px solid var(--border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	inset-block-end: 0;
	inset-inline: 0;
	padding-block-end: env(safe-area-inset-bottom, 0);
	position: fixed;
	z-index: var(--z-header);
}

.bottom-nav__item {
	align-items: center;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-block-size: 58px;
	text-decoration: none;
}

.bottom-nav__item.is-active {
	color: var(--color-accent);
}

.bottom-nav__icon {
	display: inline-flex;
	position: relative;
}

.bottom-nav__label {
	font-size: 0.6875rem;
	font-weight: var(--weight-medium);
}

/* Same signal as the header badge, so same colour — just sized for the
 * smaller mobile bar. */
.bottom-nav__badge {
	align-items: center;
	background-color: var(--color-cart-badge);
	border-radius: var(--radius-pill);
	color: var(--color-cart-badge-text);
	display: flex;
	font-size: 0.625rem;
	font-weight: var(--weight-bold);
	block-size: 18px;
	inset-block-start: -5px;
	inset-inline-end: -9px;
	justify-content: center;
	line-height: 1;
	min-inline-size: 18px;
	padding-inline: 3px;
	position: absolute;
}

.bottom-nav__badge[hidden] {
	display: none;
}

/* Keep the fixed bar from covering the end of the page. */
body {
	padding-block-end: 58px;
}

@media (min-width: 1024px) {
	.bottom-nav {
		display: none;
	}

	body {
		padding-block-end: 0;
	}
}

/* Branding */
.site-branding__wordmark {
	align-items: center;
	display: inline-flex;
	gap: var(--space-2);
	text-decoration: none;
}

.site-branding__mark {
	align-items: center;
	background: var(--color-primary);
	border-radius: var(--radius-sm);
	color: var(--color-white);
	display: inline-flex;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--weight-bold);
	block-size: 32px;
	inline-size: 32px;
	justify-content: center;
	line-height: 1;
}

.site-branding__name {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	white-space: nowrap;
}

/* A wordmark is wide — this one is roughly 3.2:1 — so height alone is not
 * enough of a constraint: on a phone a 40px-tall logo is still ~128px across
 * and eats the row the search field needs. Both axes are capped, and
 * `object-fit: contain` means whichever limit bites first, the logo scales
 * instead of distorting. */
.site-branding img,
.custom-logo {
	block-size: auto;
	inline-size: auto;
	max-block-size: 34px;
	max-inline-size: 150px;
	object-fit: contain;
}

@media (min-width: 1024px) {
	.site-branding img,
	.custom-logo {
		max-block-size: 44px;
		max-inline-size: 200px;
	}
}

/* Light-on-dark logo (footer, drawer). Sized a little larger than the header
 * mark — it is the only branding in the footer, not one item in a busy row. */
.site-branding--dark img {
	block-size: auto;
	inline-size: auto;
	max-block-size: 48px;
	max-inline-size: 220px;
	object-fit: contain;
}

.site-branding--dark a {
	display: inline-block;
	text-decoration: none;
}

/* Primary navigation */
.nav-primary__list {
	align-items: center;
	display: flex;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-primary li {
	position: relative;
}

.nav-primary > ul > li > a {
	position: relative;
}

.nav-primary a {
	border-radius: var(--radius-sm);
	color: var(--color-ink-700);
	display: block;
	font-size: var(--text-base);
	font-weight: var(--weight-medium);
	padding-block: var(--space-3);
	padding-inline: var(--space-3);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease);
	white-space: nowrap;
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a {
	color: var(--color-ink-900);
}

/* An accent underline that grows from the centre — reads as deliberate
 * without the heaviness of a filled hover state on every item. */
.nav-primary > ul > li > a::before {
	background-color: var(--color-accent);
	block-size: 2px;
	content: "";
	inset-block-end: 0;
	inset-inline: var(--space-3);
	position: absolute;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--duration) var(--ease);
}

.nav-primary > ul > li > a:hover::before,
.nav-primary > ul > li.current-menu-item > a::before,
.nav-primary > ul > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* Sub-menu items keep the simpler filled hover — they are a list, not a bar. */
.nav-primary .sub-menu a:hover {
	background-color: var(--surface-muted);
}

/* Dropdowns — opened on hover and on focus-within for keyboard users. */
.nav-primary .sub-menu {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	inset-block-start: calc(100% + var(--space-2));
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	min-inline-size: 220px;
	opacity: 0;
	padding: var(--space-2);
	position: absolute;
	transform: translateY(-4px);
	transition: opacity var(--duration-fast) var(--ease),
		transform var(--duration-fast) var(--ease), visibility var(--duration-fast);
	visibility: hidden;
	z-index: var(--z-dropdown);
}

.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.nav-primary .sub-menu .sub-menu {
	inset-block-start: calc(-1 * var(--space-2));
	inset-inline-start: 100%;
}

.nav-primary .menu-item-has-children > a::after {
	content: "";
	border-block-end: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	display: inline-block;
	block-size: 5px;
	inline-size: 5px;
	margin-inline-start: var(--space-2);
	transform: rotate(45deg) translateY(-2px);
}

.nav-primary .sub-menu .menu-item-has-children > a::after {
	transform: rotate(-45deg);
	margin-inline-start: auto;
}

/* ---------------------------------------------------------------
 * Header action buttons (search / account / cart / menu)
 * --------------------------------------------------------------- */

.header-action {
	align-items: center;
	border-radius: var(--radius-md);
	color: var(--color-ink-700);
	display: inline-flex;
	block-size: 42px;
	inline-size: 42px;
	justify-content: center;
	position: relative;
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease);
}

.header-action:hover {
	background-color: var(--surface-muted);
	color: var(--color-ink-900);
}

.header-action--account {
	display: none;
}

/* Account / wishlist / cart read as one row of round icon buttons. */
.site-header__actions .header-action {
	border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------
 * Icon tooltips — [data-anzo-tip]
 * --------------------------------------------------------------- */

.header-action[data-anzo-tip]::after {
	background-color: var(--color-ink-900, #1a1a1a);
	border-radius: var(--radius-sm, 6px);
	color: var(--color-white, #fff);
	content: attr(data-anzo-tip);
	font-size: var(--text-xs, 0.75rem);
	font-weight: var(--weight-medium, 500);
	inset-block-start: calc(100% + 8px);
	left: 50%;
	line-height: 1;
	opacity: 0;
	padding: 6px 10px;
	pointer-events: none;
	position: absolute;
	transform: translateX(-50%) translateY(-4px);
	transition: opacity var(--duration-fast, 150ms) var(--ease, ease),
		transform var(--duration-fast, 150ms) var(--ease, ease);
	white-space: nowrap;
	z-index: 60;
}

/* No arrow pseudo-element: ::before is already the cart divider above. */

.header-action[data-anzo-tip]:hover::after,
.header-action[data-anzo-tip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Touch devices have no hover — never let the tip flash on tap. */
@media (hover: none) {
	.header-action[data-anzo-tip]::after {
		content: none;
	}
}

.header-action__badge {
	align-items: center;
	background-color: var(--color-cart-badge);
	border: 2px solid var(--surface);
	border-radius: var(--radius-pill);
	color: var(--color-cart-badge-text);
	display: flex;
	font-size: 0.6875rem;
	font-weight: var(--weight-bold);
	block-size: 22px;
	justify-content: center;
	line-height: 1;
	min-inline-size: 22px;
	padding-inline: 4px;
	position: absolute;
	/* Pulled clear of the icon box so the dot overlaps the corner rather than
	 * sitting inside it — that overlap is what makes it read as a badge. */
	inset-block-start: -6px;
	inset-inline-end: -6px;
}

.header-action__badge[hidden] {
	display: none;
}

.header-menu-toggle {
	display: inline-flex;
}

@media (min-width: 640px) {
	.header-action--account {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.header-menu-toggle {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------- */

.site-footer {
	background-color: var(--surface-inverse);
	color: var(--color-ink-300);
	margin-block-start: var(--section-y);
}

.site-footer h2,
.site-footer h3 {
	color: var(--color-white);
}

.site-footer a {
	color: var(--color-ink-300);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-white);
}

.site-footer__main {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: minmax(0, 1fr);
	padding-block: var(--space-16) var(--space-12);
}

@media (min-width: 640px) {
	.site-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.site-footer__main {
		grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
		gap: var(--space-12);
	}
}

.footer-col__title {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wider);
	margin-block-end: var(--space-5);
	text-transform: uppercase;
}

.footer-col ul {
	display: grid;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li a {
	font-size: var(--text-base);
}

.footer-brand__text {
	color: var(--color-ink-400);
	margin-block: var(--space-4) var(--space-6);
	max-inline-size: 42ch;
}

.footer-contact {
	display: grid;
	gap: var(--space-3);
	font-size: var(--text-base);
}

.footer-contact li {
	align-items: center;
	display: flex;
	gap: var(--space-3);
}

.footer-social {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	margin-block-start: var(--space-6);
	padding: 0;
}

.footer-social a {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-md);
	display: inline-flex;
	block-size: 38px;
	inline-size: 38px;
	justify-content: center;
	transition: background-color var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease);
}

.footer-social a:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.32);
}

.site-footer__bottom {
	align-items: center;
	border-block-start: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	font-size: var(--text-sm);
	padding-block: var(--space-6);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
 * Page shells
 * --------------------------------------------------------------- */

.page-hero {
	background-color: var(--surface-muted);
	border-block-end: 1px solid var(--border);
	padding-block: var(--space-10);
}

.page-hero__title {
	font-size: var(--text-3xl);
}

.page-hero__subtitle {
	color: var(--text-muted);
	margin-block-start: var(--space-3);
	max-inline-size: 60ch;
}

.site-main {
	display: block;
}