/* ═══════════════════════════════════════════════════════════════
   Velmont Dials — storefront
   ═══════════════════════════════════════════════════════════════

   Ink on cream. An achromatic luxury palette: ink for every brand surface,
   hairline borders instead of tint. The two panel washes carry a trace of
   warmth so plates read as paper rather than grey.

   Depth is expressed with borders, surfaces and rings — this sheet ships zero
   box-shadows on the storefront by design. Only focus rings are allowed to
   break that rule, because they have to be visible.
   ═════════════════════════════════════════════════════════════ */

/* ── The brand face ──────────────────────────────────────────────
   Monterchi Serif is a commercial family; the licensed Regular and Bold are
   self-hosted here, and the bold face covers 600–700 because no SemiBold is
   licensed. Anything the files do not cover falls through to Cormorant. */

@font-face {
	font-family: "Monterchi Serif";
	src:
		local("Monterchi Serif"),
		local("MonterchiSerif-Regular"),
		url("../fonts/MonterchiSerif-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Monterchi Serif";
	src:
		local("Monterchi Serif Bold"),
		local("MonterchiSerif-Bold"),
		url("../fonts/MonterchiSerif-Bold.ttf") format("truetype");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────── */

:root {
	--font-heading: "Monterchi Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Brand surfaces */
	--brand: oklch(0.185 0 0);              /* #111 — ink, the "brand" colour   */
	--brand-strong: oklch(0.11 0 0);        /* pressed / near-black             */
	--brand-accent: oklch(0.44 0 0);        /* graphite, for rules and marks    */
	--brand-ink: oklch(0.178 0.006 70);     /* ground for the dark bands        */
	--brand-gilt: oklch(0.795 0.052 85);    /* the one warmed mark — ratings    */
	--brand-soft: oklch(0.957 0.005 85);    /* #f2f0ec — cream panel wash       */
	--brand-muted: oklch(0.918 0.006 85);   /* #e6e3dd — tinted surface         */
	--brand-foreground: oklch(1 0 0);

	--background: oklch(1 0 0);
	--foreground: oklch(0.175 0 0);
	--card: oklch(1 0 0);
	--muted-foreground: oklch(0.55 0 0);
	--border: oklch(0.905 0 0);
	--ring: oklch(0.44 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--success: oklch(0.62 0.16 152);
	--whatsapp: #1aab52;

	--radius: 0.875rem;
	--radius-sm: calc(var(--radius) * 0.6);

	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	--shell: 80rem;         /* max-w-7xl                        */
	--gutter: 1.5rem;       /* px-6                             */
}

@media (min-width: 640px) {
	:root { --gutter: 2rem; }
}

@media (min-width: 1024px) {
	:root { --gutter: 2.5rem; }
}

/* ── Reset ───────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
	border: 0 solid var(--border);
}

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	height: 100%;
}

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The storefront's headings take the serif brand face; small uppercase labels
   opt back out with `.font-body`. The admin panel has its own sheet and keeps
   an all-sans hierarchy. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.15;
}

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

/* `hidden` has to outrank the component rules below it.
   The attribute's own UA rule is `display: none` at the lowest specificity, so
   any `.thing { display: flex }` silently defeats it — which is how a hidden
   search form, an empty cart badge and every closed submenu all end up on
   screen at once. This is the one place the sheet reaches for !important. */
[hidden] {
	display: none !important;
}

img { height: auto; }

a {
	color: inherit;
	text-decoration: none;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: none;
}

ul, ol { list-style: none; }

::selection {
	background-color: var(--brand-muted);
	color: var(--brand-strong);
}

/* Every clickable control gets a pointer cursor. */
button,
summary,
[role="button"],
label:has(> input[type="file"]) {
	cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
	cursor: not-allowed;
}

:focus-visible {
	outline: 2px solid var(--brand-accent);
	outline-offset: 2px;
}

/* Form controls signal focus with a darker 1px border instead of a ring. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
	outline: none;
	box-shadow: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--brand);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
}

.skip-link:focus {
	top: 1rem;
}

/* ── Layout primitives ───────────────────────────────────────── */

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

main { flex: 1 1 auto; }

.section {
	padding-block: 5rem;
}

.section--tight { padding-block: 0 5rem; }

@media (min-width: 1024px) {
	.section { padding-block: 6rem; }
	.section--tight { padding-block: 0 6rem; }
}

/* The rule under every section title. */
.section-head {
	border-bottom: 1px solid var(--border);
	padding-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.section-title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	letter-spacing: -0.02em;
	color: var(--foreground);
}

.section-meta {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: color-mix(in oklch, var(--foreground) 55%, transparent);
}

.eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: color-mix(in oklch, var(--foreground) 50%, transparent);
}

.font-body { font-family: var(--font-body); }

/* ═══ Buttons ══════════════════════════════════════════════════
   Square-cornered, matching the plates and panels. Motion is three layered,
   shadow-free effects: a hover lift, a press compression, and a light band
   that sweeps across the face. */

.btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 3rem;
	padding-inline: 1.75rem;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-clip: padding-box;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	user-select: none;
	cursor: pointer;
	transition:
		color 0.35s var(--ease),
		background-color 0.35s var(--ease),
		border-color 0.35s var(--ease),
		transform 0.35s var(--ease);
}

.btn:hover:not(:disabled) { transform: translateY(-2px); }

.btn:active:not(:disabled) {
	transform: translateY(0) scale(0.975);
	transition-duration: 0.09s;
}

.btn:disabled,
.btn[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.45;
}

/* The sheen: a light band travelling across the face on hover. `--sheen` is
   white on the solid ink face; light-surfaced buttons take an ink tint. */
.btn::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(100deg, transparent 20%, var(--sheen, rgb(255 255 255 / 0.32)) 48%, transparent 76%);
	transform: translateX(-120%);
	transition: transform 0.85s var(--ease);
}

.btn:hover:not(:disabled)::before { transform: translateX(120%); }

.btn svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	pointer-events: none;
	transition: transform 0.35s var(--ease);
}

.btn:hover [data-icon="inline-end"] { transform: translateX(3px); }
.btn:hover [data-icon="inline-start"] { transform: translateX(-3px); }

.btn--primary {
	background: var(--brand);
	color: var(--brand-foreground);
}

.btn--primary:hover:not(:disabled) { background: var(--brand-strong); }

/* Hover is the sheen alone — border and fill hold still. */
.btn--outline {
	border-color: color-mix(in oklch, var(--brand) 25%, transparent);
	background: #fff;
	color: var(--brand);
	--sheen: color-mix(in oklch, var(--brand) 16%, transparent);
}

.btn--outline-light {
	border-color: rgb(255 255 255 / 0.35);
	background: transparent;
	color: #fff;
}

.btn--outline-light:hover:not(:disabled) {
	border-color: rgb(255 255 255 / 0.6);
	background: rgb(255 255 255 / 0.08);
}

.btn--secondary {
	background: var(--brand-soft);
	color: var(--brand);
	--sheen: color-mix(in oklch, var(--brand) 16%, transparent);
}

.btn--ghost {
	color: color-mix(in oklch, var(--foreground) 80%, transparent);
	--sheen: color-mix(in oklch, var(--brand) 16%, transparent);
}

.btn--ghost:hover:not(:disabled) {
	background: var(--brand-soft);
	color: var(--brand);
}

.btn--destructive {
	background: color-mix(in oklch, var(--destructive) 10%, transparent);
	color: var(--destructive);
	--sheen: color-mix(in oklch, var(--destructive) 16%, transparent);
}

.btn--sm {
	height: 2.5rem;
	padding-inline: 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
}

.btn--lg {
	height: 3.5rem;
	padding-inline: 2.25rem;
	font-size: 1rem;
}

.btn--block { width: 100%; }

.btn--upper {
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.2em;
}

/* Icon-only buttons stay circular: a round target is the clearer affordance
   for a bare glyph. */
.btn--icon {
	width: 3rem;
	height: 3rem;
	padding: 0;
	border-radius: 9999px;
}

.btn--icon-sm {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 9999px;
}

.btn--icon svg,
.btn--icon-sm svg {
	width: 1.25rem;
	height: 1.25rem;
}

/* Underline links sweep in from the leading edge. */
.link-underline {
	position: relative;
	transition: color 0.3s var(--ease);
}

.link-underline::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ease);
}

.link-underline:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ═══ Header ═══════════════════════════════════════════════════
   On the homepage the bar floats over the hero, transparent, in white and
   glass. Everywhere else it is sticky with a frosted pane behind it. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	isolation: isolate;
	border-bottom: 1px solid rgb(0 0 0 / 0.06);
	background: color-mix(in oklch, var(--background) 75%, transparent);
	backdrop-filter: blur(20px) saturate(150%);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
}

.site-header--overlay {
	position: absolute;
	inset-inline: 0;
	top: 0;
	border-bottom-color: transparent;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Any open panel needs a solid surface to stay legible against whatever
   scrolls beneath it, so the overlay drops its transparency. */
.site-header--overlay.is-open {
	background: color-mix(in oklch, var(--background) 95%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.header-bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-block: 1.5rem;
}

.header-bar--mobile {
	padding-block: 1rem;
	gap: 0.75rem;
}

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

.header-desktop { display: none; }

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

.header-side {
	display: flex;
	align-items: center;
	width: 17rem;
	flex-shrink: 0;
	gap: 0.5rem;
}

.header-side--end { justify-content: flex-end; }

.header-mobile-brand {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.header-mobile-brand > a { pointer-events: auto; }

.header-nav {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 2rem;
}

.header-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: color-mix(in oklch, var(--foreground) 85%, transparent);
	transition: color 0.25s var(--ease);
	background: none;
	border: 0;
	cursor: pointer;
}

.header-nav__link:hover,
.header-nav__link[aria-expanded="true"] { color: var(--brand); }

.header-nav__link svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.25s var(--ease);
}

.header-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Glass discs. Translucent, so they sit *in* the frosted bar rather than on
   it — white glass over the hero, tinted ink everywhere else. */
.header-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgb(0 0 0 / 0.06);
	border-radius: 9999px;
	background: rgb(0 0 0 / 0.04);
	color: color-mix(in oklch, var(--foreground) 85%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease),
		color 0.25s var(--ease), transform 0.35s var(--ease);
	cursor: pointer;
}

.header-icon:hover {
	transform: translateY(-2px);
	border-color: rgb(0 0 0 / 0.15);
	background: rgb(0 0 0 / 0.07);
	color: var(--foreground);
}

.header-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.header-icon__badge {
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding-inline: 0.25rem;
	border-radius: 9999px;
	background: var(--brand);
	color: var(--brand-foreground);
	font-family: var(--font-body);
	font-size: 0.65rem;
	font-weight: 500;
	pointer-events: none;
}

/* Over the hero, everything in the bar flips to white. */
.site-header--overlay:not(.is-open) .header-icon {
	border-color: rgb(255 255 255 / 0.25);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
}

.site-header--overlay:not(.is-open) .header-icon:hover {
	border-color: rgb(255 255 255 / 0.45);
	background: rgb(255 255 255 / 0.2);
}

.site-header--overlay:not(.is-open) .header-nav__link {
	color: rgb(255 255 255 / 0.9);
}

.site-header--overlay:not(.is-open) .header-nav__link:hover,
.site-header--overlay:not(.is-open) .header-nav__link[aria-expanded="true"] {
	color: #fff;
}

.site-header--overlay:not(.is-open) .brand-lockup__mark { filter: brightness(0) invert(1); }
.site-header--overlay:not(.is-open) .brand-lockup__words { color: #fff; }

/* Sub-categories drop below the strip; collapsed to zero height when shut.
   Always on a solid pane — an open state, never the resting overlay. */
.header-submenu {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.2s var(--ease), opacity 0.2s var(--ease);
}

.header-submenu.is-open {
	max-height: 13rem;
	opacity: 1;
	background: color-mix(in oklch, var(--background) 95%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.header-submenu__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 2.5rem;
	padding-bottom: 1.25rem;
}

.header-submenu__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: color-mix(in oklch, var(--foreground) 75%, transparent);
	transition: color 0.25s var(--ease);
}

.header-submenu__link:hover { color: var(--brand); }
.header-submenu__link svg { width: 0.875rem; height: 0.875rem; }

.header-mobile-panel {
	display: none;
	border-top: 1px solid rgb(0 0 0 / 0.06);
	background: color-mix(in oklch, var(--background) 97%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.header-mobile-panel.is-open { display: block; }

@media (min-width: 1024px) {
	.header-mobile-panel { display: none !important; }
}

.header-mobile-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: 1rem;
}

.header-mobile-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.75rem;
	border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
	font-size: 0.875rem;
	text-transform: uppercase;
	color: color-mix(in oklch, var(--foreground) 85%, transparent);
}

.header-mobile-panel__link--sub {
	padding-left: 1rem;
	font-size: 0.8rem;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

/* Search */
.header-search {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
}

.search-field {
	position: relative;
	flex: 1 1 auto;
}

.search-field svg {
	position: absolute;
	top: 50%;
	left: 1.25rem;
	width: 1rem;
	height: 1rem;
	transform: translateY(-50%);
	color: var(--brand);
	pointer-events: none;
}

.search-field input {
	width: 100%;
	height: 3rem;
	padding: 0 1.25rem 0 3rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: color-mix(in oklch, var(--brand-soft) 60%, transparent);
	font-size: 0.9rem;
	outline: none;
	transition: border-color 0.25s var(--ease);
}

.search-field input::placeholder { color: color-mix(in oklch, var(--muted-foreground) 80%, transparent); }
.search-field input:focus { border-color: var(--brand); }

/* ── Brand lockup ────────────────────────────────────────────
   The watch mark on the left with the wordmark stacked to its right, scaling
   together off a single size token so header, mobile header and footer stay
   in proportion. */

.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.brand-lockup__mark {
	flex-shrink: 0;
	width: auto;
	object-fit: contain;
	transition: filter 0.25s var(--ease);
}

.brand-lockup__words {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	line-height: 1;
	color: #000;
}

.brand-lockup__primary {
	font-family: var(--font-heading);
	font-weight: 500;
	text-transform: uppercase;
}

.brand-lockup__secondary {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
}

.brand-lockup--sm { gap: 0.375rem; }
.brand-lockup--sm .brand-lockup__mark { height: 2.25rem; }
.brand-lockup--sm .brand-lockup__words { margin-top: -5px; }
.brand-lockup--sm .brand-lockup__primary { font-size: 0.95rem; letter-spacing: 0.28em; }
.brand-lockup--sm .brand-lockup__secondary { font-size: 0.5rem; letter-spacing: 0.46em; margin-top: -0.25rem; padding-left: 2px; }

.brand-lockup--md .brand-lockup__mark { height: 2.75rem; }
.brand-lockup--md .brand-lockup__words { margin-top: -6px; }
.brand-lockup--md .brand-lockup__primary { font-size: 1.125rem; letter-spacing: 0.3em; }
.brand-lockup--md .brand-lockup__secondary { font-size: 0.58rem; letter-spacing: 0.5em; margin-top: -0.375rem; padding-left: 2px; }

.brand-lockup--lg .brand-lockup__mark { height: 3.5rem; }
.brand-lockup--lg .brand-lockup__words { margin-top: -7px; }
.brand-lockup--lg .brand-lockup__primary { font-size: 1.5rem; letter-spacing: 0.32em; }
.brand-lockup--lg .brand-lockup__secondary { font-size: 0.68rem; letter-spacing: 0.54em; margin-top: -0.375rem; padding-left: 3px; }

/* ═══ Hero ═════════════════════════════════════════════════════
   A full-viewport dark editorial stage. The studio still behind it is a
   single frame rather than video, so it never fights the reading pace of the
   page; slides with their own artwork paint over it. */

.hero {
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
	background: #000;
}

.hero__backdrop,
.hero__slide {
	position: absolute;
	inset: 0;
}

.hero__backdrop img,
.hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}

@media (min-width: 1024px) {
	.hero__backdrop img,
	.hero__slide img { object-position: center; }
}

.hero__slide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.7s var(--ease);
}

.hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Scrims — a lighter wash on the reading side, a faint vignette elsewhere. */
.hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(0 0 0 / 0.45), transparent 50%, rgb(0 0 0 / 0.25)),
		linear-gradient(to right, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.3) 50%, transparent);
}

.hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.hero__copy {
	max-width: 42rem;
	animation: hero-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes hero-in {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hero__subtitle {
	margin-bottom: 1.25rem;
	font-family: var(--font-body);
	font-size: 0.65rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: rgb(255 255 255 / 0.65);
}

@media (min-width: 640px) {
	.hero__subtitle { font-size: 0.75rem; }
}

.hero__title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	color: #fff;
}

.hero__lede {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.7;
	color: rgb(255 255 255 / 0.65);
}

@media (min-width: 640px) {
	.hero__lede { font-size: 1rem; }
}

/* The CTA stays white throughout — the sheen is the whole hover effect.
   Filling it with ink sinks it into the backdrop. */
.hero__cta {
	display: inline-flex;
	align-items: center;
	height: 3.5rem;
	margin-top: 2.25rem;
	padding-inline: 2.5rem;
	background: #fff;
	color: #171717;
	--sheen: color-mix(in oklch, var(--brand) 16%, transparent);
}

.hero__cta:hover:not(:disabled) { background: #fff; }

.hero__arrow {
	position: absolute;
	top: 50%;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	transform: translateY(-50%);
	border: 1px solid rgb(255 255 255 / 0.2);
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.35s var(--ease);
	cursor: pointer;
}

@media (min-width: 640px) {
	.hero__arrow { display: flex; }
}

.hero__arrow:hover {
	border-color: rgb(255 255 255 / 0.5);
	background: rgb(255 255 255 / 0.2);
}

.hero__arrow svg { width: 1.25rem; height: 1.25rem; }
.hero__arrow--prev { left: 1rem; }
.hero__arrow--next { right: 1rem; }

@media (min-width: 1024px) {
	.hero__arrow--prev { left: 1.5rem; }
	.hero__arrow--next { right: 1.5rem; }
}

/* Dots — bottom right, mirroring the copy block's baseline. */
.hero__dots {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	transform: translateX(-50%);
}

@media (min-width: 640px) {
	.hero__dots {
		left: auto;
		right: 2rem;
		transform: none;
	}
}

@media (min-width: 1024px) {
	.hero__dots { right: 3rem; }
}

.hero__dot {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	background: rgb(255 255 255 / 0.35);
	transition: all 0.3s var(--ease);
	cursor: pointer;
}

.hero__dot:hover { background: rgb(255 255 255 / 0.6); }

.hero__dot[aria-current="true"] {
	background: #fff;
	transform: scale(1.1);
}

.hero__progress {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	overflow: hidden;
}

.hero__progress span {
	display: block;
	height: 100%;
	background: rgb(255 255 255 / 0.6);
	animation: hero-progress linear both;
}

@keyframes hero-progress {
	from { width: 0%; }
	to   { width: 100%; }
}

/* ═══ Product cards ════════════════════════════════════════════ */

.product-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 2rem;
	margin-top: 3rem;
}

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

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

/* The catalogue proper runs denser than the arrivals strip: same plate and
   copy treatment, tighter gutters. Scale rather than colour separates them. */
.product-grid--dense { gap: 2.5rem 1.5rem; }

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

.product-card__plate {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
}

/* The shot fills the plate edge to edge — no inset, no letterboxing. */
.product-card__plate img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.product-card:hover .product-card__plate img { transform: scale(1.05); }

/* Shared pill — "50% OFF", "Featured", … */
.product-tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 20;
	padding: 0.375rem 1rem;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--foreground);
}

/* "Featured" reads as an endorsement rather than a discount, so it carries
   its own colour instead of the plain white plate. */
.product-tag--featured {
	background: oklch(0.52 0.13 152);
	color: #fff;
}

/* A markdown shouts; it is the one thing on a card allowed to. */
.product-tag--sale {
	background: oklch(0.55 0.21 27);
	color: #fff;
}

.product-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 1.5rem;
}

.product-grid--dense .product-card__body { gap: 0.5rem; margin-top: 1rem; }

/* Two lines reserved so prices sit on one baseline across the row however
   long the names run. */
.product-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	font-family: var(--font-body);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--foreground);
	transition: color 0.25s var(--ease);
}

.product-grid--dense .product-card__name { font-size: 0.75rem; }

.product-card:hover .product-card__name { color: var(--brand-accent); }

.product-card__price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: color-mix(in oklch, var(--foreground) 60%, transparent);
}

.product-card__price del {
	font-size: 0.8rem;
	color: color-mix(in oklch, var(--foreground) 40%, transparent);
}

/* ── Pagination ──────────────────────────────────────────────
   Real links rather than a "view all" toggle: they give crawlers a path
   through the catalogue and cost nothing to render. */

.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
	flex-wrap: wrap;
}

.pager .btn { min-width: 2.5rem; }

.pager__current {
	background: var(--foreground);
	color: var(--background);
	border-color: transparent;
}

/* ═══ The house standard ═══════════════════════════════════════
   A fixed four-point promise, hairline-ruled around a single hero shot.
   Content never changes; only the centre image does. */

.promise {
	margin-top: 3rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.promise__grid {
	display: grid;
	grid-template-columns: 1fr;
}

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

.promise__column > * + * { border-top: 1px solid var(--border); }

.promise__column + .promise__column,
.promise__plate + .promise__column { border-top: 1px solid var(--border); }

@media (min-width: 1024px) {
	.promise__column + .promise__column,
	.promise__plate + .promise__column {
		border-top: 0;
		border-left: 1px solid var(--border);
	}
	.promise__plate { border-left: 1px solid var(--border); }
}

.promise__cell {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 13rem;
	padding: 2rem;
}

@media (min-width: 1024px) {
	.promise__cell { padding: 2.5rem; }
}

.promise__cell h3 {
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	color: var(--foreground);
}

.promise__cell p:last-child {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.7;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

/* The centre plate is a cutout floated on the cream wash, so the art sits
   inside the palette rather than interrupting it. The shot carries a baked-in
   white ground, which `mix-blend-multiply` dissolves: white over cream is
   cream, and the watch itself is dark enough to come through untouched. */
.promise__plate {
	order: -1;
	position: relative;
	min-height: 22rem;
	background: var(--brand-soft);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.promise__plate { order: 0; }
}

.promise__plate img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 2rem;
	mix-blend-mode: multiply;
	transition: transform 0.7s var(--ease);
}

.promise__plate:hover img { transform: scale(1.04); }

/* ═══ Closing banner ═══════════════════════════════════════════
   Copy left, an oversized dial bleeding off the right. Ink at the copy end,
   lifting toward graphite where the photograph begins, so the panel meets the
   shot rather than butting against it. */

.promo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: linear-gradient(
		to right,
		var(--brand-ink),
		var(--brand-ink) 50%,
		color-mix(in oklch, var(--brand-accent) 45%, transparent)
	);
}

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

.promo__copy {
	padding: 3.5rem 2rem;
}

@media (min-width: 640px) { .promo__copy { padding-inline: 3rem; } }
@media (min-width: 1024px) { .promo__copy { padding-block: 5rem; } }

.promo__eyebrow {
	font-family: var(--font-body);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgb(255 255 255 / 0.45);
}

.promo__title {
	margin-top: 1.25rem;
	max-width: 28rem;
	font-size: clamp(2.25rem, 4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}

.promo__lede {
	margin-top: 1.25rem;
	max-width: 28rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.6);
}

@media (min-width: 640px) { .promo__lede { font-size: 1rem; } }

.promo__stars {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 3rem;
}

.promo__stars svg {
	width: 1rem;
	height: 1rem;
	color: var(--brand-gilt);
}

/* Ruled off from the pitch above so these read as evidence rather than
   another line of copy. */
.promo__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 28rem;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

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

.promo__facts dt {
	font-family: var(--font-body);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgb(255 255 255 / 0.4);
}

.promo__facts dd {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgb(255 255 255 / 0.75);
}

/* The dial plate has a true transparent ground, so it needs no wash of its
   own — it floats straight on the panel's gradient, which is what keeps this
   one surface rather than two halves. */
.promo__plate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 13rem;
}

@media (min-width: 640px) { .promo__plate { height: 16rem; } }
@media (min-width: 1024px) { .promo__plate { height: 100%; min-height: 20rem; } }

/* Capped so the dial stays a companion to the copy rather than setting the
   height of the whole banner. */
.promo__plate img {
	width: 100%;
	height: 100%;
	max-height: 32rem;
	object-fit: contain;
	padding: 1rem;
}

.promo .btn { margin-top: 2.25rem; }

/* ═══ Contact ══════════════════════════════════════════════════ */

.contact {
	border-top: 1px solid var(--border);
	background: color-mix(in oklch, var(--brand-soft) 40%, transparent);
	scroll-margin-top: 10rem;
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 3rem;
}

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

.contact__form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 1.75rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
}

@media (min-width: 640px) { .contact__form { padding: 2.25rem; } }

.contact__aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact__map {
	position: relative;
	flex: 1 1 auto;
	min-height: 20rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
}

.contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact__channels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

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

.contact__channel {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	transition: border-color 0.25s var(--ease);
}

.contact__channel:hover { border-color: color-mix(in oklch, var(--brand) 40%, transparent); }

.contact__channel svg { width: 1.25rem; height: 1.25rem; color: var(--brand); }

.contact__channel-label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: color-mix(in oklch, var(--foreground) 50%, transparent);
}

.contact__channel-value {
	font-family: var(--font-body);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
	color: color-mix(in oklch, var(--foreground) 80%, transparent);
	transition: color 0.25s var(--ease);
}

.contact__channel:hover .contact__channel-value { color: var(--brand); }

/* ── Fields ──────────────────────────────────────────────────── */

.field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.field__label {
	margin-left: 1.25rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: color-mix(in oklch, var(--foreground) 70%, transparent);
}

.field__label--flush { margin-left: 0; }

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 0.9rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--foreground);
	outline: none;
	transition: border-color 0.25s var(--ease);
}

.field textarea {
	min-height: 8rem;
	resize: none;
	line-height: 1.6;
}

.field input::placeholder,
.field textarea::placeholder {
	color: color-mix(in oklch, var(--foreground) 35%, transparent);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--foreground);
}

.field input:disabled { opacity: 0.5; cursor: not-allowed; }

.field__hint {
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: color-mix(in oklch, var(--foreground) 55%, transparent);
}

.field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ Footer ═══════════════════════════════════════════════════ */

.site-footer {
	margin-top: auto;
	border-top: 1px solid var(--border);
	background: var(--background);
}

.site-footer__grid {
	display: grid;
	gap: 3rem;
	padding-block: 3.5rem;
}

@media (min-width: 1024px) {
	.site-footer__grid {
		grid-template-columns: 1.3fr 1.1fr 0.9fr 1.2fr;
		gap: 3.5rem;
		padding-block: 5rem;
	}
}

.site-footer__blurb {
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.9;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

.footer-heading {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--brand);
}

.footer-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-stack--tight { gap: 0.875rem; }

.footer-link {
	display: inline-block;
	font-size: 0.875rem;
	color: color-mix(in oklch, var(--foreground) 70%, transparent);
}

.footer-link:hover { color: var(--brand); }

.footer-contact {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in oklch, var(--foreground) 70%, transparent);
	transition: color 0.25s var(--ease);
}

.footer-contact:hover { color: var(--brand); }

.footer-contact svg {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	margin-top: 0.125rem;
	color: var(--brand);
}

.footer-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.footer-social {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent);
	border-radius: 9999px;
	color: color-mix(in oklch, var(--brand) 80%, transparent);
	transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
		background-color 0.3s var(--ease), transform 0.35s var(--ease);
}

.footer-social:hover {
	transform: translateY(-2px);
	border-color: color-mix(in oklch, var(--brand) 50%, transparent);
	background: var(--brand-soft);
	color: var(--brand);
}

.footer-social svg { width: 1.125rem; height: 1.125rem; }

.site-footer__legal {
	border-top: 1px solid var(--border);
}

.site-footer__legal .shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding-block: 1.5rem;
	font-size: 0.75rem;
	color: color-mix(in oklch, var(--foreground) 55%, transparent);
}

@media (min-width: 640px) {
	.site-footer__legal .shell { flex-direction: row; }
}

/* ═══ Cart drawer ══════════════════════════════════════════════ */

.cart-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: color-mix(in oklch, var(--brand-strong) 25%, transparent);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
	border: 0;
}

.cart-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 28rem;
	height: 100%;
	border-left: 1px solid var(--border);
	background: var(--background);
	transform: translateX(100%);
	transition: transform 0.3s var(--ease);
}

@media (min-width: 640px) {
	.cart-drawer { max-width: 32rem; }
}

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

.cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--border);
}

.cart-drawer__head p {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: color-mix(in oklch, var(--brand) 70%, transparent);
}

.cart-drawer__head h2 { font-size: 1.5rem; }

.cart-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem 1.5rem;
}

.cart-drawer__foot {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var(--border);
}

.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
	text-align: center;
}

.cart-empty p:first-child { font-size: 1.125rem; }

.cart-empty p:last-child {
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in oklch, var(--foreground) 60%, transparent);
}

.cart-line {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) * 1.14);
}

.cart-line + .cart-line { margin-top: 1rem; }

.cart-line__image {
	position: relative;
	flex-shrink: 0;
	display: block;
	width: 6rem;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--brand-soft);
}

.cart-line__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cart-line__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.cart-line__name {
	font-size: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cart-line__price {
	font-size: 0.875rem;
	color: color-mix(in oklch, var(--foreground) 60%, transparent);
}

.cart-line__price del {
	display: block;
	font-size: 0.75rem;
	color: color-mix(in oklch, var(--foreground) 40%, transparent);
}

.cart-line__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.qty button {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	color: color-mix(in oklch, var(--foreground) 70%, transparent);
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
	border: 0;
	cursor: pointer;
}

.qty button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.qty button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.qty button:hover:not(:disabled) {
	background: var(--brand-soft);
	color: var(--brand);
}

.qty span {
	min-width: 2.5rem;
	text-align: center;
	font-size: 0.875rem;
}

.cart-line__remove {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: color-mix(in oklch, var(--foreground) 45%, transparent);
	border: 0;
	cursor: pointer;
}

.cart-line__remove:hover { color: var(--brand); }

.cart-subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.cart-subtotal span:first-child {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: color-mix(in oklch, var(--foreground) 50%, transparent);
}

.cart-subtotal span:last-child {
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--brand);
}

.cart-actions { display: flex; gap: 0.75rem; }
.cart-actions .btn { flex: 1 1 0; }

/* ═══ Product detail ═══════════════════════════════════════════ */

.product-detail {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	padding-block: 3rem;
}

@media (min-width: 1024px) {
	.product-detail { grid-template-columns: 1.1fr 0.9fr; }
}

.gallery__main {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
}

.gallery__main img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}

.gallery__main:hover img { transform: scale(1.05); }

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.gallery__thumb {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
	padding: 0;
	cursor: pointer;
	transition: border-color 0.25s var(--ease);
}

.gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__thumb[aria-current="true"],
.gallery__thumb:hover { border-color: var(--brand); }

.product-detail__body { display: flex; flex-direction: column; }

.product-detail__title {
	margin-top: 1.25rem;
	font-size: clamp(2.25rem, 4vw, 3rem);
	letter-spacing: -0.02em;
}

.product-detail__lede {
	margin-top: 1.25rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.75;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

@media (min-width: 640px) { .product-detail__lede { font-size: 1rem; } }

.product-detail__pricing {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.product-detail__was {
	font-family: var(--font-body);
	font-size: 0.875rem;
	text-decoration: line-through;
	color: color-mix(in oklch, var(--foreground) 45%, transparent);
}

.product-detail__price {
	font-family: var(--font-body);
	font-size: 1.875rem;
	letter-spacing: -0.02em;
}

/* `gap: 1px` over a border-coloured ground draws the rules between cells, so
   the table needs no per-cell borders to chase. */
.spec-table {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	margin-top: 2rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--border);
}

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

.spec-table > div {
	padding: 1.25rem;
	background: var(--background);
}

.spec-table dt {
	font-family: var(--font-body);
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: color-mix(in oklch, var(--foreground) 45%, transparent);
}

.spec-table dd {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: color-mix(in oklch, var(--foreground) 80%, transparent);
}

.product-detail__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* Green stays on the glyph alone. A full green fill would be the one saturated
   block on an achromatic site and reads as a widget. */
.icon-whatsapp { color: var(--whatsapp); }

/* ═══ Checkout ═════════════════════════════════════════════════ */

.checkout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	padding-block: 2rem;
}

@media (min-width: 1024px) {
	.checkout { grid-template-columns: minmax(0, 1fr) 22rem; }
}

@media (min-width: 1280px) {
	.checkout { grid-template-columns: minmax(0, 1fr) 26rem; }
}

.checkout__main {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.checkout__aside { order: 1; }

@media (min-width: 1024px) {
	.checkout__main { order: 1; }
	.checkout__aside { order: 2; }
}

.card {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	overflow: hidden;
}

.card__head {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.card__title { font-size: 1.5rem; }

.card__description {
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--muted-foreground);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem;
}

@media (min-width: 1024px) {
	.summary { position: sticky; top: 6rem; }
}

.summary__line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.summary__line + .summary__line { margin-top: 1rem; }

.summary__thumb {
	position: relative;
	flex-shrink: 0;
	width: 4rem;
	height: 4rem;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--brand-soft);
}

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

.summary__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
}

.summary__meta + .summary__meta { margin-top: 0.75rem; }

.summary__meta span:first-child { color: var(--muted-foreground); }
.summary__meta span:last-child { font-weight: 500; }

.summary__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	margin-top: 1.25rem;
}

.summary__total span:first-child { font-size: 1.125rem; font-weight: 600; }
.summary__total span:last-child { font-size: 1.25rem; font-weight: 600; }

.checkout-success {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	padding: 1.5rem;
	text-align: center;
}

.checkout-success__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 28rem;
}

.order-reference {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--border);
	background: color-mix(in oklch, var(--brand-soft) 40%, transparent);
	text-align: left;
}

.order-reference strong {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: 0.2em;
}

/* ═══ Policy pages ═════════════════════════════════════════════ */

.prose {
	max-width: 64rem;
	margin-inline: auto;
	padding-block: 4rem;
}

.prose > * + * { margin-top: 1.5rem; }

.prose h1 {
	font-size: clamp(2.25rem, 5vw, 3rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--brand);
}

.prose h2 {
	margin-top: 3rem;
	font-size: 1.5rem;
	color: var(--brand);
}

.prose p,
.prose li {
	font-size: 0.9375rem;
	line-height: 1.9;
	color: color-mix(in oklch, var(--foreground) 75%, transparent);
}

.prose ul {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-left: 1.25rem;
}

.prose li { position: relative; }

.prose li::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	top: 0.75em;
	width: 5px;
	height: 1px;
	background: var(--brand-accent);
}

.prose__lede {
	font-size: 1rem !important;
	line-height: 1.9;
}

.policy-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-top: 2rem;
}

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

.policy-card {
	padding: 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--background);
}

.policy-card > * + * { margin-top: 0.75rem; }
.policy-card h2 { margin-top: 0; margin-bottom: 1rem; }

.policy-callout {
	padding: 1.5rem;
	border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent);
	background: color-mix(in oklch, var(--brand) 5%, transparent);
}

@media (min-width: 640px) { .policy-callout { padding: 2rem; } }

/* ═══ Notices ══════════════════════════════════════════════════ */

.notice {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.6;
}

.notice--error {
	border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
	background: color-mix(in oklch, var(--destructive) 6%, transparent);
	color: var(--destructive);
}

.notice--success {
	border-color: color-mix(in oklch, var(--success) 30%, transparent);
	background: color-mix(in oklch, var(--success) 8%, transparent);
	color: color-mix(in oklch, var(--success) 80%, black);
}

.notice svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; }

/* Toasts — the drawer's "added to bag" acknowledgement. */
.toast-stack {
	position: fixed;
	top: 1.5rem;
	left: 50%;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transform: translateX(-50%);
	pointer-events: none;
}

.toast {
	padding: 0.875rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--background);
	font-family: var(--font-body);
	font-size: 0.875rem;
	animation: toast-in 0.3s var(--ease) both;
}

.toast--error {
	border-color: color-mix(in oklch, var(--destructive) 35%, transparent);
	color: var(--destructive);
}

@keyframes toast-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.empty-state {
	padding: 2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	font-family: var(--font-body);
	font-size: 1rem;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

/* ═══ Floating widgets ═════════════════════════════════════════ */

.whatsapp-float {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	background: var(--whatsapp);
	color: #fff;
	transition: transform 0.25s var(--ease);
}

.whatsapp-float:hover { transform: scale(1.05); }
.whatsapp-float:active { transform: scale(0.95); }
.whatsapp-float svg { width: 1.5rem; height: 1.5rem; }

@media (min-width: 640px) {
	.whatsapp-float { width: 3.5rem; height: 3.5rem; }
	.whatsapp-float svg { width: 2rem; height: 2rem; }
}

.cookie-consent {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in oklch, var(--brand-strong) 60%, transparent);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__panel {
	width: 100%;
	max-width: 28rem;
	padding: 2rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) * 2.2);
	background: var(--background);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cookie-consent__panel p:first-child {
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--brand);
}

.cookie-consent__panel p:nth-child(2) {
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in oklch, var(--foreground) 75%, transparent);
}

.cookie-consent__actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 640px) {
	.cookie-consent__actions { flex-direction: row; }
	.cookie-consent__actions .btn { flex: 1 1 0; }
}

/* ═══ Error pages ══════════════════════════════════════════════ */

.error-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: 70vh;
	padding: 3rem 1.5rem;
	text-align: center;
}

.error-page__status {
	font-family: var(--font-body);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: color-mix(in oklch, var(--foreground) 45%, transparent);
}

.error-page h1 { font-size: clamp(2rem, 5vw, 3rem); }

.error-page p {
	max-width: 32rem;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: color-mix(in oklch, var(--foreground) 65%, transparent);
}

/* ═══ Reduced motion ═══════════════════════════════════════════
   An unrequested slide change every five seconds is exactly what this setting
   asks us not to do, so the hero stops advancing entirely. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.btn:hover:not(:disabled),
	.btn:active:not(:disabled),
	.header-icon:hover,
	.footer-social:hover,
	.whatsapp-float:hover { transform: none; }

	.hero__progress { display: none; }
}