/*
 * Vantage Horology — the front-end stylesheet.
 *
 * Every colour, font and rhythm value below resolves against a custom property
 * printed by inc/design-tokens.php, so nothing here hard-codes a hex. Changing
 * the colourway in the Customizer moves the whole file with it — and so does any
 * Elementor widget dropped onto a page, which is the point of routing the
 * palette through :root instead of through the stylesheet.
 *
 * The design is a near-monochrome: four greys, a black, a white and one
 * saturated accent that only ever appears on a small thing — a bullet, a focus
 * ring, an eyebrow. That restraint is what makes the accent read as loud, and
 * it is why nothing below paints a large area in --va-accent.
 *
 * Two typefaces do all the work and they are strictly divided: Inter for
 * anything a person reads, JetBrains Mono for anything a person scans — labels,
 * counters, spec lines, the clock. The division is the identity. Mixing them
 * anywhere would make the theme look like a blog rather than a catalogue.
 */

/* -------------------------------------------------------------------------
   1. Reset
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	background: var(--va-bg);
}

body {
	margin: 0;
	background: var(--va-bg);
	color: var(--va-ink-soft);
	font-family: var(--va-font-sans);
	font-size: var(--va-fs-body);
	line-height: var(--va-lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv05" 1;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	color: var(--va-ink);
	font-family: var(--va-font-display);
	font-weight: 700;
	line-height: var(--va-lh-tight);
	letter-spacing: var(--va-track-tight);
}

h1 { font-size: var(--va-fs-statement); }
h2 { font-size: var(--va-fs-title); }
h3 { font-size: var(--va-fs-subtitle); }

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

a:hover {
	text-decoration-color: var(--va-accent);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--va-ink);
	outline-offset: 2px;
	border-radius: var(--va-radius);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--va-space-3);
	left: var(--va-space-3);
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 10px 16px;
	background: var(--va-ink);
	color: var(--va-surface);
	border-radius: var(--va-radius);
}

/* -------------------------------------------------------------------------
   2. Type utilities
   ------------------------------------------------------------------------- */

.va-mono {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	line-height: var(--va-lh-mono);
	font-feature-settings: "zero" 1;
}

.va-eyebrow {
	margin: 0 0 0.6em;
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	font-weight: 500;
	line-height: var(--va-lh-mono);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-section__head .va-eyebrow:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */

.va-wrap {
	width: 100%;
	max-width: var(--va-container);
	margin-inline: auto;
	padding-inline: var(--va-margin);
}

.va-wrap--tight {
	max-width: var(--va-container-tight);
}

.va-layout-tight .va-wrap:not(.va-wrap--tight):not(.va-band__inner) {
	max-width: 1100px;
}

.va-content {
	display: block;
}

/*
 * The same gap at the bottom of an interior page.
 *
 * `main` had none, so the last thing on the page — an account nav rail, an
 * orders table, a form — finished a hairline away from whatever came next. On
 * this theme the next thing is the newsletter band, and a dark full-bleed image
 * arriving with no gap reads as the band landing on top of the content.
 *
 * The measurement is `--va-gap-head`, the same one the page head uses under its
 * rule, so the space above the first element and below the last are the same
 * number rather than two numbers that happen to look right on one page.
 *
 * Both shapes are matched: `main > .va-wrap` from the journal and search
 * templates, `main > article > .va-wrap` from the page and single templates. The
 * first version of this only matched the first, which is why the account page
 * kept its gap and the journal did not.
 */
.va-main > .va-wrap:last-child,
.va-main > article > .va-wrap:last-child {
	padding-block-end: var(--va-gap-head);
}

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

.va-section__head {
	margin-bottom: var(--va-section-sm);
}

.va-section__head--center {
	text-align: center;
}

.va-section__head--center .va-section__copy {
	margin-inline: auto;
}

.va-section__title {
	margin: 0;
}

.va-section__copy {
	max-width: 46ch;
	margin: 0.5em 0 0;
	color: var(--va-muted);
}

.va-grid {
	display: grid;
	gap: var(--va-gutter);
}

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

.va-empty {
	padding-block: var(--va-section-sm);
	text-align: center;
	color: var(--va-muted);
}

/* -------------------------------------------------------------------------
   4. Pills — the theme's one button shape
   ------------------------------------------------------------------------- */

.va-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 1.15em;
	border: 1px solid transparent;
	border-radius: var(--va-radius);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--va-speed) var(--va-ease),
		color var(--va-speed) var(--va-ease),
		border-color var(--va-speed) var(--va-ease),
		transform var(--va-speed) var(--va-ease);
}

.va-pill--sm {
	padding: 0.55em 0.9em;
	font-size: 0.6875rem;
}

.va-pill__bullet,
.va-pill__icon {
	flex: none;
}

.va-pill--outline {
	border-color: var(--va-ink-30);
	color: var(--va-ink);
}

.va-pill--outline:hover {
	border-color: var(--va-ink);
	background: var(--va-ink);
	color: var(--va-surface);
}

.va-pill--solid {
	background: var(--va-ink);
	border-color: var(--va-ink);
	color: var(--va-surface);
}

.va-pill--solid .va-pill__bullet {
	color: var(--va-accent);
}

.va-pill--solid:hover {
	border-color: var(--va-accent-2);
	background: var(--va-accent-2);
}

.va-pill--ghost {
	color: var(--va-ink);
}

.va-pill--ghost:hover {
	background: var(--va-ink-06);
}

/* On a photograph the pill is glass, and the bullet is the accent. */
.va-pill--glass {
	background: var(--va-glass-strong);
	border-color: var(--va-ink-12);
	color: var(--va-ink);
	-webkit-backdrop-filter: blur(var(--va-blur));
	backdrop-filter: blur(var(--va-blur));
}

.va-pill--glass:hover {
	background: var(--va-surface);
}

.va-pill__count {
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.va-pill:disabled,
.va-pill[aria-disabled="true"] {
	opacity: 0.35;
	pointer-events: none;
}

.va-link {
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-decoration: none;
}

.va-link:hover {
	text-decoration: underline;
	text-decoration-color: var(--va-accent);
}

/* -------------------------------------------------------------------------
   5. Announcement, header, search, drawer
   ------------------------------------------------------------------------- */

.va-announce {
	background: var(--va-ink);
	color: var(--va-surface);
}

.va-announce__text {
	margin: 0;
	padding: 9px var(--va-margin);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	line-height: var(--va-lh-mono);
	letter-spacing: var(--va-track-wide);
	text-align: center;
	text-transform: uppercase;
}

/* The announcement strip and the header stack. `position: relative` is what
   keeps the header above the page when the header is *not* floating on a hero —
   without it the z-index does nothing and a dropdown behind it wins. */
.va-masthead {
	position: relative;
	z-index: 30;
}

/* Over a hero the whole masthead floats on the photograph, which is the
   reference's signature move and the reason the pills are glass. The failure
   mode to avoid is absolute positioning relative to the document: that puts the
   strip and the header in the same place and both on top of the announcement. */
.va-overlay-header .va-masthead {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 0;
}

.va-header {
	position: relative;
}

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

.va-header__toggle {
	display: none;
}

.va-header__brand {
	flex: none;
	margin-inline-end: var(--va-space-3);
}

.va-brand {
	display: inline-block;
	color: var(--va-ink);
	font-family: var(--va-font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.va-brand img {
	width: auto;
	max-height: 22px;
}

/* Not on the demo site, where the name is "Vantage Horology", but a client
   with a two-word name gets a wordmark that still reads as one mark. */
.va-brand__mark {
	display: inline-block;
}

.va-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.va-nav .menu-item > a {
	display: inline-flex;
	align-items: center;
	padding: 0.55em 0.9em;
	border: 1px solid transparent;
	border-radius: var(--va-radius);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--va-speed) var(--va-ease);
}

.va-nav .menu-item > a:hover,
.va-nav .current-menu-item > a {
	background: var(--va-ink-06);
}

.va-nav .sub-menu {
	display: none;
}

.va-header__aside {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-inline-start: auto;
}

.va-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* The overlay rules are scoped to the masthead, never to the body: the same
   `.va-brand` renders in the footer, and a body-wide rule turns the footer
   wordmark white on a near-white background — invisible, and only visible as a
   bug on the one page that has a hero. */
.va-overlay-header .va-masthead {
	color: var(--va-on-dark);
}

.va-overlay-header .va-masthead .va-brand,
.va-overlay-header .va-masthead .va-nav .menu-item > a {
	color: var(--va-on-dark);
}

.va-overlay-header .va-masthead .va-nav .menu-item > a:hover,
.va-overlay-header .va-masthead .va-nav .current-menu-item > a {
	background: var(--va-ink-30);
}

.va-overlay-header .va-masthead .va-pill--glass {
	background: var(--va-ink-30);
	border-color: var(--va-ink-30);
	color: var(--va-on-dark);
}

.va-overlay-header .va-masthead .va-pill--glass:hover {
	background: color-mix(in srgb, var(--va-on-dark) 22%, transparent);
}

.va-overlay-header .va-search {
	background: var(--va-bg);
	color: var(--va-ink-soft);
}

.va-search {
	border-top: 1px solid var(--va-line);
	background: var(--va-surface);
}

.va-search__inner {
	display: flex;
	align-items: center;
	gap: var(--va-space-4);
	padding-block: var(--va-space-4);
}

.va-search__close {
	flex: none;
	color: var(--va-muted);
}

.va-search form {
	flex: 1 1 auto;
	display: flex;
	gap: var(--va-space-2);
	margin: 0;
}

.va-search input[type="search"] {
	flex: 1 1 auto;
	padding: 10px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--va-line);
	border-radius: 0;
	font-family: var(--va-font-mono);
	font-size: 1rem;
}

.va-search input[type="submit"] {
	padding: 0.55em 0.9em;
	background: var(--va-ink);
	border: 0;
	border-radius: var(--va-radius);
	color: var(--va-surface);
	font-family: var(--va-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.va-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--va-scrim);
}

.va-drawer[hidden] {
	display: none;
}

.va-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: flex;
	flex-direction: column;
	gap: var(--va-space-5);
	width: min(360px, 88vw);
	padding: var(--va-space-4);
	overflow-y: auto;
	background: var(--va-bg);
}

.va-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.va-drawer__close {
	color: var(--va-ink);
}

.va-drawer__nav .menu-item > a {
	padding: 0.75em 0;
	border-radius: 0;
	font-size: 0.8125rem;
}

.va-drawer__nav ul {
	display: grid;
	gap: 0;
}

.va-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-2);
	margin-top: auto;
	padding-top: var(--va-space-5);
}

/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

.va-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--va-accent-2);
}

.va-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.va-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.va-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			var(--va-scrim) 0%,
			color-mix(in srgb, var(--va-ink) 40%, transparent) 34%,
			color-mix(in srgb, var(--va-ink) 8%, transparent) 70%,
			color-mix(in srgb, var(--va-ink) 22%, transparent) 100%
		);
}

.va-hero__inner {
	position: relative;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--va-space-5);
	/* One viewport, edge to edge. `svh` rather than `vh` so a phone's collapsing
	   address bar does not make the hero change height under the reader's thumb;
	   the 560px floor keeps a short or rotated window from crushing the type. */
	min-height: 100vh;
	min-height: max(560px, 100svh);
	/* Clears the floating masthead: header height, plus the announcement strip
	   if there is one, plus the space the design wants above the card. */
	padding-block: calc(var(--va-header-h) + var(--va-space-6) + var(--va-space-5)) var(--va-space-5);
	color: var(--va-on-dark);
}

.va-hero__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(24px, 5vw, 80px);
	grid-row: 1;
	min-height: 0;
}

.va-hero__lede {
	max-width: 28ch;
}

.va-hero__eyebrow {
	margin: 0 0 var(--va-space-4);
	color: var(--va-accent);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-hero__statement {
	margin: 0;
	color: var(--va-on-dark);
	font-size: var(--va-fs-statement);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: var(--va-track-tight);
	text-wrap: balance;
}

.va-hero__card {
	flex: none;
	width: min(360px, 100%);
	padding: var(--va-space-4);
	background: var(--va-glass);
	border: 1px solid var(--va-ink-12);
	border-radius: var(--va-radius-lg);
	-webkit-backdrop-filter: blur(var(--va-blur));
	backdrop-filter: blur(var(--va-blur));
}

/*
 * Solid ink, not ink at 50%. These two eyebrows sit on the glass card, which is
 * translucent over a photograph — the contrast of a transparent colour here is
 * not computable from the stylesheet alone, it depends on what is behind the
 * glass, and at 50% it fails against the lightest thing that can be behind it.
 */
.va-hero__card-eyebrow {
	margin: 0 0 var(--va-space-3);
	color: var(--va-ink);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-hero__card-copy {
	margin: 0 0 0.3em;
	color: var(--va-ink-70);
	font-size: var(--va-fs-small);
}

.va-hero__card-title {
	margin: 0 0 var(--va-space-4);
	color: var(--va-ink);
	font-family: var(--va-font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--va-track-tight);
}

.va-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-2);
}

.va-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-1) var(--va-space-5);
	color: color-mix(in srgb, var(--va-on-dark) 70%, transparent);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-hero__meta li {
	position: relative;
}

.va-hero__meta li + li::before {
	content: "/";
	margin-inline-end: var(--va-space-5);
	opacity: 0.4;
}

.va-hero__meta li + li {
	margin-inline-start: calc(var(--va-space-5) * -1 + var(--va-space-5));
}

/* -------------------------------------------------------------------------
   7. Arrivals rail
   ------------------------------------------------------------------------- */

.va-arrivals__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: var(--va-gutter);
	margin-bottom: var(--va-section-sm);
}

.va-arrivals__head .va-section__head {
	margin-bottom: 0;
}

.va-arrivals__count {
	margin: 0;
	color: var(--va-muted);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--va-track);
}

.va-arrivals__nav {
	display: inline-flex;
	gap: 4px;
}

/* The rail: WooCommerce's own <ul class="products"> re-laid as a scroller, so
   the card markup is literally the same element the shop archive renders. */
.va-rail {
	scrollbar-width: none;
}

.va-rail::-webkit-scrollbar {
	display: none;
}

.va-rail ul.products {
	display: flex;
	gap: var(--va-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-block-end: 2px;
}

.va-rail ul.products::-webkit-scrollbar {
	display: none;
}

.va-rail ul.products > li.product {
	flex: 0 0 calc((100% - var(--va-gutter) * 3) / 4);
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	scroll-snap-align: start;
}

.va-rail.is-dragging ul.products {
	scroll-snap-type: none;
	scroll-behavior: auto;
	cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
	.va-rail ul.products {
		cursor: grab;
	}
}

/* -------------------------------------------------------------------------
   8. Editorial cards
   ------------------------------------------------------------------------- */

.va-lines__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--va-gutter);
}

.va-line-card__inner {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--va-radius);
	color: var(--va-on-dark);
	text-decoration: none;
}

.va-line-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--va-bg-soft);
}

.va-line-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--va-speed-slow) var(--va-ease);
}

.va-line-card__inner:hover .va-line-card__media img {
	transform: scale(1.03);
}

.va-line-card__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to top,
			color-mix(in srgb, var(--va-ink) 74%, transparent) 0%,
			color-mix(in srgb, var(--va-ink) 30%, transparent) 42%,
			transparent 72%
		);
}

.va-line-card__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding: clamp(16px, 2.2vw, 32px);
}

.va-line-card__title {
	margin: 0 0 0.3em;
	color: var(--va-on-dark);
	font-size: clamp(1.125rem, 1.7vw, 1.5rem);
}

.va-line-card__copy {
	max-width: 32ch;
	margin: 0;
	color: color-mix(in srgb, var(--va-on-dark) 74%, transparent);
	font-size: var(--va-fs-small);
}

.va-line-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-top: var(--va-space-3);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-line-card__arrow {
	transition: transform var(--va-speed) var(--va-ease);
}

.va-line-card__inner:hover .va-line-card__arrow {
	transform: translateX(4px);
}

/* -------------------------------------------------------------------------
   9. Model picker
   ------------------------------------------------------------------------- */

.va-picker__grid {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(0, 2.1fr) minmax(260px, 1.35fr);
	gap: clamp(20px, 3vw, 56px);
	align-items: start;
}

.va-picker__group {
	margin: var(--va-space-5) 0 var(--va-space-2);
	color: var(--va-muted);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-picker__group:first-child {
	margin-top: 0;
}

.va-picker__item {
	display: block;
	width: 100%;
	padding: 0.35em 0;
	color: var(--va-ink-30);
	font-family: var(--va-font-display);
	font-size: clamp(1rem, 1.5vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--va-track-tight);
	text-align: start;
	transition: color var(--va-speed) var(--va-ease);
}

.va-picker__item:hover {
	color: var(--va-ink-70);
}

.va-picker__item.is-active {
	color: var(--va-ink);
}

.va-picker__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
	overflow: hidden;
}

.va-picker__media {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--va-speed-slow) var(--va-ease);
}

.va-picker__media.is-active {
	opacity: 1;
}

.va-picker__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.va-picker__panel[hidden] {
	display: none;
}

.va-picker__panel .va-pill {
	margin-top: var(--va-space-5);
}

.va-spec {
	margin: 0;
}

.va-spec__row + .va-spec__row {
	margin-top: var(--va-space-3);
	padding-top: var(--va-space-3);
	border-top: 1px solid var(--va-line);
}

.va-spec__label {
	margin: 0 0 0.35em;
	color: var(--va-muted);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-spec__value {
	margin: 0;
	color: var(--va-ink-soft);
	font-size: var(--va-fs-small);
}

/* -------------------------------------------------------------------------
   10. Quality tiles
   ------------------------------------------------------------------------- */

.va-quality__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--va-gutter);
}

.va-quality__media {
	aspect-ratio: 16 / 10;
	margin-bottom: var(--va-space-4);
	overflow: hidden;
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
}

.va-quality__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.va-quality__title {
	margin: 0 0 0.4em;
	font-size: 1rem;
}

.va-quality__copy {
	margin: 0;
	color: var(--va-muted);
	font-size: var(--va-fs-small);
}

/* -------------------------------------------------------------------------
   11. Product card
   ------------------------------------------------------------------------- */

.va-card {
	display: flex;
	flex-direction: column;
}

/* The name and the price share a row, the way a catalogue sets them: the name
   against the left edge, the price against the right, both on the same
   baseline. The grid areas are what let that happen while the markup stays
   three separate hook calls. */
.va-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"plate plate"
		"title price";
	align-items: baseline;
	column-gap: var(--va-space-3);
	color: inherit;
	text-decoration: none;
}

.va-card__plate {
	grid-area: plate;
}

.va-card__title {
	grid-area: title;
}

.va-card__price {
	grid-area: price;
	/*
	 * Stated rather than inherited. WooCommerce's loop price reaches for
	 * --wc-highlight, a dark olive of its own, and even the token override in
	 * this theme's own sheet does not reach every price it marks up — a price
	 * the reader has to squint at is not a design decision.
	 */
	color: var(--va-ink);
	text-align: end;
}

.va-card__plate {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
}

.va-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--va-speed-slow) var(--va-ease);
}

.va-card__link:hover .va-card__image {
	transform: scale(1.03);
}

.va-card__labels {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--va-space-2);
	padding: var(--va-space-3);
	pointer-events: none;
}

.va-card__spec,
.va-card__badge {
	color: var(--va-ink-70);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-card__badge {
	text-align: end;
}

.va-card__title {
	margin: var(--va-space-3) 0 0;
	font-family: var(--va-font-sans);
	font-size: var(--va-fs-body);
	font-weight: 500;
	letter-spacing: 0;
}

.va-card__price {
	margin-top: 2px;
	color: var(--va-ink);
	font-size: var(--va-fs-small);
	font-variant-numeric: tabular-nums;
}

.va-card__meta {
	margin: 6px 0 0;
	color: var(--va-muted);
	letter-spacing: 0.02em;
}

.va-card__sep {
	opacity: 0.5;
}

.va-card__dots {
	display: flex;
	gap: 5px;
	margin-top: var(--va-space-2);
}

.va-card__dots li {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--va-ink-30);
}

.va-card__actions {
	margin-top: var(--va-space-3);
}

/* -------------------------------------------------------------------------
   12. Page head, entries, notes
   ------------------------------------------------------------------------- */

/*
 * The interior page header.
 *
 * Every page that is not the front page opens with this band: eyebrow, title,
 * optional line of copy, then a hairline that runs the container width and
 * hands off to the content. Before it existed as a band, "page head" was a line
 * of small type floating in a couple of hundred pixels of nothing — the page
 * had no top edge, so every interior page looked unfinished no matter how much
 * work was below.
 *
 * The band is deliberately shallow. The front page earns its tall, quiet gaps
 * because the hero photograph fills them; an interior page has a form or a
 * table in it, and dead space above that reads as a rendering fault, not as
 * luxury. 32px to the band, 40px from the rule to the content.
 */
.va-page-head {
	padding-block: var(--va-space-6) var(--va-space-5);
	border-bottom: 1px solid var(--va-line);
	margin-block-end: var(--va-gap-head);
}

.va-page-head__title {
	margin: 0;
}

.va-page-head__copy {
	max-width: 56ch;
	margin: 0.75em 0 0;
	color: var(--va-muted);
}

.va-main > .va-page-head.va-page-head--wide,
.va-page-head--wide {
	padding-inline: 0;
}

.va-entry > * {
	max-width: 72ch;
}

/*
 * Except the shop's own output. WooCommerce's account, cart and checkout all
 * render through the_content() into this container, and a 72ch measure is a
 * reading measure — on a page whose content is an orders table, a line-item list
 * or a billing form it is just a narrow box in the middle of a wide page. Prose
 * keeps the measure; application UI takes the container.
 */
.va-entry > .woocommerce {
	max-width: none;
}

.va-entry h2,
.va-entry h3 {
	margin-top: 1.6em;
}

.va-entry ul {
	list-style: disc;
	padding-inline-start: 1.2em;
	margin-bottom: 1em;
}

.va-entry ol {
	list-style: decimal;
	padding-inline-start: 1.2em;
	margin-bottom: 1em;
}

.va-single__media {
	margin-block: var(--va-section-sm);
}

.va-single__media img {
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
	border-radius: var(--va-radius);
}

.va-single__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-1) var(--va-space-4);
	margin: 0 0 var(--va-space-4);
	color: var(--va-muted);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-note__media {
	display: block;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--va-space-3);
	overflow: hidden;
	background: var(--va-bg-soft);
	border-radius: var(--va-radius);
}

.va-note__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.va-note__meta {
	margin: 0 0 0.5em;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-note__title {
	margin: 0 0 0.4em;
	font-size: 1.125rem;
}

.va-note__title a {
	text-decoration: none;
}

.va-note__excerpt {
	margin: 0;
	color: var(--va-muted);
	font-size: var(--va-fs-small);
}

.va-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: var(--va-section-sm);
}

.va-chips a {
	display: inline-block;
	padding: 0.5em 0.9em;
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-decoration: none;
	text-transform: uppercase;
}

.va-chips a.is-current,
.va-chips a:hover {
	border-color: var(--va-ink);
	color: var(--va-ink);
}

.va-crumbs {
	margin-bottom: 1.25em;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-2);
}

.va-crumbs li + li::before {
	content: "/";
	margin-inline-end: var(--va-space-2);
	opacity: 0.5;
}

.va-nav__label {
	display: block;
	color: var(--va-muted);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-postnav {
	display: flex;
	justify-content: space-between;
	gap: var(--va-space-5);
	margin-top: var(--va-section-sm);
	padding-top: var(--va-space-5);
	border-top: 1px solid var(--va-line);
}

.va-author {
	display: flex;
	gap: var(--va-space-4);
	align-items: flex-start;
	margin-top: var(--va-section-sm);
	padding-top: var(--va-space-5);
	border-top: 1px solid var(--va-line);
}

.va-author__avatar img {
	border-radius: 50%;
}

/* The default portrait: the author's initial in the site's ink, sized to the same
   box an avatar would have filled. */
.va-author__monogram {
	display: grid;
	place-items: center;
	width: var(--va-portrait, 56px);
	height: var(--va-portrait, 56px);
	background: var(--va-bg-soft);
	border: 1px solid var(--va-line);
	border-radius: 50%;
	color: var(--va-ink);
	font-family: var(--va-font-display);
	font-size: 1.25rem;
	line-height: 1;
}

.va-author__name {
	margin: 0;
	color: var(--va-ink);
	font-weight: 500;
}

.va-author__bio {
	margin: 0;
	color: var(--va-muted);
	font-size: var(--va-fs-small);
}

.va-pagelinks,
.pagination,
.navigation.pagination {
	margin-block: var(--va-section-sm);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 0.5em 0.8em;
}

.pagination .current {
	background: var(--va-ink);
	color: var(--va-surface);
	border-radius: var(--va-radius);
}

.va-sidebar {
	padding-block: var(--va-section-sm);
}

.va-sidebar .widget {
	margin-bottom: var(--va-space-5);
}

.va-widget__title {
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-sidebar ul a,
.va-footer__list a {
	color: var(--va-muted);
	text-decoration: none;
	font-size: var(--va-fs-small);
}

.va-sidebar ul a:hover,
.va-footer__list a:hover {
	color: var(--va-ink);
}

.va-sidebar ul li + li {
	margin-top: 6px;
}

/* -------------------------------------------------------------------------
   13. Comments
   ------------------------------------------------------------------------- */

.va-comments {
	margin-top: var(--va-section-sm);
}

.va-comments__list {
	margin-bottom: 2em;
}

.va-comments__list li {
	padding-block: 1.25em;
	border-top: 1px solid var(--va-line);
}

.va-comments__list .children {
	margin-top: 1.25em;
	padding-inline-start: var(--va-space-5);
}

.va-comments__note {
	color: var(--va-muted);
	font-size: var(--va-fs-small);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 11px 13px;
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
}

.comment-form .submit {
	padding: 0.75em 1.2em;
	background: var(--va-ink);
	border: 0;
	border-radius: var(--va-radius);
	color: var(--va-surface);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-mono);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   14. Forms
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	padding: 11px 13px;
	background: var(--va-surface);
	border: 1px solid var(--va-line);
	border-radius: var(--va-radius);
	font-size: var(--va-fs-small);
}

/* -------------------------------------------------------------------------
   15. Newsletter band
   ------------------------------------------------------------------------- */

.va-band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.va-band--flat {
	background: var(--va-bg-soft);
}

.va-band__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.va-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.va-band__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to right,
			color-mix(in srgb, var(--va-ink) 46%, transparent) 0%,
			color-mix(in srgb, var(--va-ink) 12%, transparent) 60%,
			transparent 100%
		);
}

.va-band__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	min-height: clamp(260px, 32vw, 420px);
	padding-block: var(--va-section-sm);
}

.va-newsletter {
	width: min(420px, 100%);
	padding: var(--va-space-5);
	background: var(--va-glass);
	border: 1px solid var(--va-ink-12);
	border-radius: var(--va-radius-lg);
	-webkit-backdrop-filter: blur(var(--va-blur));
	backdrop-filter: blur(var(--va-blur));
}

.va-band--flat .va-newsletter {
	background: var(--va-surface);
	border-color: var(--va-line);
}

.va-newsletter__eyebrow {
	margin: 0 0 var(--va-space-3);
	color: var(--va-ink);
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-newsletter__title {
	margin: 0;
	font-size: 1.25rem;
}

.va-newsletter__note {
	margin: var(--va-space-3) 0 0;
	color: var(--va-ink-70);
	font-size: var(--va-fs-small);
}

.va-newsletter__form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-2);
	margin-top: var(--va-space-5);
}

.va-newsletter__form input[type="email"] {
	flex: 1 1 180px;
	background: var(--va-glass-strong);
	border-color: var(--va-ink-12);
}

.va-newsletter__status {
	flex: 1 1 100%;
	margin: 0;
	color: var(--va-ink-70);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
}

.va-newsletter__status:empty {
	display: none;
}

.va-newsletter__status.is-error {
	color: #B3261E;
}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */

.va-footer {
	background: var(--va-bg);
}

.va-footer__identity {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--va-space-3) var(--va-space-6);
	padding-block: var(--va-section-sm) var(--va-space-5);
}

.va-footer__blurb {
	flex: 1 1 320px;
	max-width: 52ch;
	margin: 0;
	color: var(--va-muted);
	font-size: var(--va-fs-small);
}

.va-footer__email {
	margin: 0;
}

.va-footer__email a {
	color: var(--va-ink);
	text-decoration: none;
}

.va-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--va-gutter);
	padding-block: var(--va-space-5);
	border-top: 1px solid var(--va-line);
}

.va-footer__heading {
	margin: 0 0 var(--va-space-3);
	color: var(--va-ink);
	font-family: var(--va-font-mono);
	font-size: var(--va-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--va-track-wide);
	text-transform: uppercase;
}

.va-footer__list {
	display: grid;
	gap: 7px;
}

.va-footer__column--social .va-social {
	justify-content: flex-start;
}

.va-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--va-space-3);
}

.va-social a {
	display: inline-flex;
	color: var(--va-muted);
	text-decoration: none;
}

.va-social a:hover {
	color: var(--va-ink);
}

.va-footer__utility-wrap {
	padding-block: var(--va-space-5) var(--va-section-sm);
	border-top: 1px solid var(--va-line);
}

.va-utility {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--va-gutter);
	color: var(--va-muted);
}

.va-utility__cell p {
	margin: 0;
}

.va-utility__time {
	color: var(--va-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--va-track);
}

.va-utility__live {
	margin-inline-start: 0.5em;
	color: var(--va-muted);
	text-transform: uppercase;
	font-size: 0.625rem;
}

.va-utility__city,
.va-utility__status {
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

.va-utility__status {
	margin-top: var(--va-space-1);
}

/*
 * The three legal links are 10px type set solid, which is the reference's own
 * proportion — and a link under 24px tall with 5px between its neighbours is
 * below the minimum target size, which is not a trade-off the theme gets to
 * make. The padding gives each link its 24px; the visual gap comes from the
 * padding instead of from a grid gap, so the block ends up the same height.
 */
.va-utility__legal ul {
	display: grid;
	gap: 0;
}

.va-utility__legal a {
	display: block;
	padding-block: 5px;
	color: var(--va-muted);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-decoration: none;
}

.va-utility__legal a:hover {
	color: var(--va-ink);
}

.va-utility__cell--shipping {
	align-self: start;
	color: var(--va-ink);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
	text-align: end;
}

.va-utility__plus {
	color: var(--va-accent);
}

.va-footer__note {
	margin: var(--va-space-5) 0 0;
	color: var(--va-muted);
	letter-spacing: var(--va-track);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   17. 404
   ------------------------------------------------------------------------- */

.va-404 {
	padding-block: var(--va-section);
	text-align: center;
}

.va-404__copy {
	max-width: 48ch;
	margin-inline: auto;
	color: var(--va-muted);
}

.va-404__search {
	max-width: 420px;
	margin: 2em auto;
}

.va-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--va-space-4);
	align-items: center;
}

/* -------------------------------------------------------------------------
   18. Elementor
   ------------------------------------------------------------------------- */

.va-elementor-page .va-page-head {
	display: none;
}

.va-elementor-page .va-content {
	display: block;
}

/* -------------------------------------------------------------------------
   19. Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.va-picker__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
		grid-template-areas:
			"list stage"
			"specs specs";
		row-gap: var(--va-section-sm);
	}

	.va-picker__list { grid-area: list; }
	.va-picker__stage { grid-area: stage; }
	.va-picker__specs { grid-area: specs; }

	.va-spec {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--va-space-5);
	}

	.va-spec__row + .va-spec__row {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	.va-spec__row {
		padding-top: var(--va-space-3);
		border-top: 1px solid var(--va-line);
	}
}

@media (max-width: 1024px) {
	.va-rail ul.products > li.product {
		flex: 0 0 calc((100% - var(--va-gutter) * 2) / 3);
	}

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

	.va-footer__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--va-space-6) var(--va-gutter);
	}

	.va-utility {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--va-space-5) var(--va-gutter);
	}

	.va-utility__cell--shipping {
		text-align: start;
	}
}

@media (max-width: 860px) {
	.va-nav--header {
		display: none;
	}

	.va-header__toggle {
		display: inline-flex;
	}

	/*
	 * The header is a rail of eight capsules on a desktop and three things on a
	 * phone — the menu, the wordmark and the bag. Search and account move into
	 * the drawer rather than being hidden, so nothing becomes unreachable. A
	 * rule that re-shows them in overlay mode would take the page sideways:
	 * eight capsules do not fit in 420px, and the overflow is the whole
	 * document, not the header.
	 */
	.va-header__aside > .va-pill,
	.va-header__actions > .va-pill:not(.va-header__bag) {
		display: none;
	}

	.va-header__bag {
		display: inline-flex;
	}

	.va-arrivals__head {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title title"
			"count nav"
			"viewall viewall";
		row-gap: var(--va-space-3);
	}

	.va-arrivals__head .va-section__head { grid-area: title; }
	.va-arrivals__count { grid-area: count; }
	.va-arrivals__nav { grid-area: nav; }
	.va-arrivals__viewall { grid-area: viewall; }

	.va-hero__body {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-end;
		gap: var(--va-space-5);
	}

	.va-hero__lede {
		max-width: none;
	}

	.va-hero__card {
		width: 100%;
	}

	.va-lines__grid,
	.va-quality__grid,
	.va-grid--3,
	.va-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.va-picker__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"list"
			"stage"
			"specs";
	}

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

	.va-footer__identity {
		padding-block: var(--va-space-5) var(--va-space-5);
	}
}

@media (max-width: 640px) {
	.va-rail ul.products > li.product {
		flex: 0 0 min(72%, 300px);
	}

	.va-footer__columns,
	.va-utility {
		grid-template-columns: minmax(0, 1fr);
	}

	.va-band__inner {
		justify-content: stretch;
	}

	.va-newsletter {
		width: 100%;
	}
}