/* ═══════════════════════════════════════════════════════════════════════════
   DEVEN — UI layer (v2.0.0)

   Hand-authored on purpose. assets/css/app.css is a COMPILED Tailwind bundle
   left over from the retired Next.js build, so any Tailwind class that was not
   already used in that codebase compiles to nothing here. Everything new lives
   in this file under a dv- prefix and depends on app.css for nothing but the
   font faces.

   Loaded after app.css and theme.css, so it wins ties.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--dv-black: #0a0a0a;
	--dv-charcoal: #1c1c1c;
	--dv-ink: #14140f;
	--dv-cream: #f5f0e8; /* also the matte colour baked into every studio render */
	--dv-linen: #faf8f4;
	--dv-gold: #c9a054;
	--dv-gold-light: #d4b06a;
	--dv-gray: #6b6b6b;
	--dv-rule: rgba(10, 10, 10, 0.12);
	--dv-rule-light: rgba(255, 255, 255, 0.16);

	--dv-display: "Cormorant Garamond", Georgia, serif;
	--dv-ui: "Montserrat", system-ui, -apple-system, sans-serif;

	/* One vertical rhythm for every section on the site. */
	--dv-section-y: clamp(5rem, 10vw, 9.5rem);
	--dv-gutter: clamp(1.25rem, 4vw, 3rem);
	--dv-max: 82rem;
}

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

.dv-section {
	padding-block: var(--dv-section-y);
	position: relative;
}
.dv-section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
.dv-section--linen { background: var(--dv-linen); }
.dv-section--cream { background: var(--dv-cream); }
.dv-section--black { background: var(--dv-black); }
.dv-section--ink   { background: var(--dv-charcoal); }

.dv-wrap {
	max-width: var(--dv-max);
	margin-inline: auto;
	padding-inline: var(--dv-gutter);
}
.dv-wrap--narrow { max-width: 46rem; }

/* Editorial section marker: —— 02 · THE MADISON COLLECTION */
.dv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--dv-ui);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--dv-gold);
	margin: 0;
}
.dv-eyebrow::before {
	content: "";
	width: clamp(1.5rem, 4vw, 3rem);
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}
.dv-eyebrow--plain::before { display: none; }
.dv-eyebrow--center { justify-content: center; }

.dv-h1,
.dv-h2,
.dv-h3 {
	font-family: var(--dv-display);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}
.dv-h1 { font-size: clamp(3.1rem, 9vw, 7rem); text-transform: uppercase; line-height: 0.92; }
.dv-h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.dv-h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 400; letter-spacing: 0; }

/* The one typographic signature: an italic word inside a display line. */
.dv-accent {
	font-style: italic;
	font-weight: 400;
	color: var(--dv-gold);
}

.dv-lede {
	font-family: var(--dv-ui);
	font-weight: 300;
	font-size: clamp(0.95rem, 1.1vw, 1.075rem);
	line-height: 1.75;
	color: var(--dv-gray);
	max-width: 34rem;
	margin: 0;
}
.dv-lede--light { color: rgba(255, 255, 255, 0.62); }

.dv-hairline {
	height: 1px;
	width: 4rem;
	background: var(--dv-gold);
	opacity: 0.75;
	border: 0;
	margin: 0;
}

/* Square button with a rule that draws itself on hover. No pills anywhere. */
.dv-btn {
	--dv-btn-fg: var(--dv-black);
	--dv-btn-bd: var(--dv-black);
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.05rem 2.4rem;
	border: 1px solid var(--dv-btn-bd);
	background: transparent;
	color: var(--dv-btn-fg);
	font-family: var(--dv-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transition: color 0.4s ease, border-color 0.4s ease;
}
.dv-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--dv-btn-bd);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-btn:hover::after,
.dv-btn:focus-visible::after { transform: scaleX(1); }
.dv-btn:hover,
.dv-btn:focus-visible { color: var(--dv-cream); }

.dv-btn--light { --dv-btn-fg: #fff; --dv-btn-bd: rgba(255, 255, 255, 0.55); }
.dv-btn--light:hover,
.dv-btn--light:focus-visible { color: var(--dv-black); --dv-btn-bd: var(--dv-gold); }
.dv-btn--gold { --dv-btn-fg: var(--dv-black); --dv-btn-bd: var(--dv-gold); background: var(--dv-gold); }
.dv-btn--gold:hover,
.dv-btn--gold:focus-visible { color: var(--dv-gold); }
.dv-btn--gold::after { background: var(--dv-black); }

.dv-btn__arrow { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1); }
.dv-btn:hover .dv-btn__arrow { transform: translateX(0.3rem); }

/* Quiet text link with a rule that grows from the left. */
.dv-textlink {
	font-family: var(--dv-ui);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dv-black);
	text-decoration: none;
	padding-bottom: 0.35rem;
	background-image: linear-gradient(var(--dv-gold), var(--dv-gold));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-textlink:hover,
.dv-textlink:focus-visible { background-size: 100% 1px; }

/* ── scroll reveal (JS adds .visible — see assets/js/main.js) ──────────────── */

/* app.css ends with an unconditional `.reveal{opacity:1;transform:none}`, which
   means reveals never actually animated on the live site. Re-enabling them here
   would silently make every section depend on JavaScript, so the hidden state is
   scoped to .dv-js — set by an inline script in <head> — and explicitly undone
   when JS never runs. Without this a JS-off visitor gets a blank page. */
html:not(.dv-js) .reveal {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.dv-js .reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
	will-change: opacity, transform;
}
.dv-js .reveal.visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.09s; }
.reveal[data-delay="2"] { transition-delay: 0.18s; }
.reveal[data-delay="3"] { transition-delay: 0.27s; }

/* Accessible-only label (WordPress ships this on most themes; app.css does not). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dv-hero__art a,
.dv-hero__art picture { display: block; }

@media (prefers-reduced-motion: reduce) {
	.dv-js .reveal { opacity: 1; transform: none; transition: none; }
	.dv-marquee__track { animation: none !important; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

/* The old hero stacked the headline directly on top of the garment, which is
   the single loudest "unfinished" tell on the page. This splits them: type owns
   the left rail, the piece owns the right, neither fights the other. */
.dv-hero {
	position: relative;
	background: var(--dv-black);
	color: #fff;
	overflow: hidden;
	min-height: min(94svh, 54rem);
	display: grid;
	align-items: center;
}
.dv-hero__inner {
	max-width: var(--dv-max);
	margin-inline: auto;
	padding: clamp(8rem, 14vh, 11rem) var(--dv-gutter) clamp(4rem, 8vh, 6rem);
	width: 100%;
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: 1fr;
	position: relative;
	z-index: 2;
}
@media (min-width: 62rem) {
	.dv-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
}

.dv-hero__type { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.dv-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; }

.dv-hero__art {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(20rem, 46vh, 34rem);
}
/* A soft pool of light behind the piece so it reads as lit, not pasted on. */
.dv-hero__art::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: radial-gradient(ellipse at 50% 45%, rgba(201, 160, 84, 0.2), rgba(201, 160, 84, 0.05) 45%, transparent 70%);
	pointer-events: none;
}
.dv-hero__art img {
	position: relative;
	max-height: clamp(24rem, 68vh, 44rem);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 3rem 4rem rgba(0, 0, 0, 0.55));
}

/* Vertical drop marker riding the right edge — DEVEN's own device, a nod to the
   wordmark that runs down the sleeve of the real garments. */
.dv-hero__rail {
	position: absolute;
	right: clamp(0.75rem, 2vw, 2rem);
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--dv-ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.3);
	z-index: 3;
	pointer-events: none;
}
@media (max-width: 61.99rem) { .dv-hero__rail { display: none; } }

/* ── the drop / Madison block ─────────────────────────────────────────────── */

.dv-drop { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .dv-drop { grid-template-columns: 1.08fr 1fr; } }

.dv-drop__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--dv-cream);
}
.dv-drop__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
	display: block;
	transform: scale(1.02);
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-drop__figure:hover img { transform: scale(1.06); }
.dv-drop__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 0.9rem 1.4rem;
	background: var(--dv-black);
	color: #fff;
	font-family: var(--dv-ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.dv-drop__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }

/* Countdown — numerals in the display face, labels in tiny UI caps. */
.dv-count { display: flex; gap: clamp(1.4rem, 3vw, 2.6rem); margin: 0; }
.dv-count__cell { display: flex; flex-direction: column; align-items: flex-start; }
.dv-count__num {
	font-family: var(--dv-display);
	font-size: clamp(2.4rem, 4.5vw, 3.4rem);
	font-weight: 300;
	line-height: 1;
	/* Cormorant defaults to old-style figures, which rendered "61" as "6ı" —
	   the 1 dropped to x-height next to the 6. lining-nums forces uniform
	   cap-height digits; tabular keeps the clock from reflowing every second. */
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
	color: var(--dv-black);
}
.dv-count__lbl {
	margin-top: 0.55rem;
	font-family: var(--dv-ui);
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dv-gray);
}
.dv-drop__meta {
	font-family: var(--dv-ui);
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--dv-black);
	margin: 1.35rem 0 0;
}
.dv-drop__meta span { color: var(--dv-gold); margin-inline: 0.55rem; }

/* ── product grid ─────────────────────────────────────────────────────────── */

.dv-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 2vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Fixed 1 / 2 / 3 track counts instead of auto-fill. auto-fill resolved to four
   columns at desktop, so the six featured pieces landed 4 + 2 — the same lone
   short row that made the old shop archive look unfinished. Every breakpoint
   here divides six exactly. */
.dv-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .dv-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .dv-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.dv-card { display: block; text-decoration: none; color: inherit; }
.dv-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	/* Exactly the colour matted into every studio render, so there is no visible
	   image edge — the garment sits on the page, not in a box. */
	background: var(--dv-cream);
}
.dv-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-card:hover .dv-card__media img,
.dv-card:focus-visible .dv-card__media img { transform: scale(1.045); }

/* Hover swaps to the back view where one exists. */
.dv-card__media img.dv-card__alt { opacity: 0; }
.dv-card:hover .dv-card__alt,
.dv-card:focus-visible .dv-card__alt { opacity: 1; }
.dv-card:hover .dv-card__front,
.dv-card:focus-visible .dv-card__front { opacity: 0; }
.dv-card__front,
.dv-card__alt { transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1); }

.dv-card__flag {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	z-index: 2;
	padding: 0.4rem 0.7rem;
	background: var(--dv-black);
	color: var(--dv-gold);
	font-family: var(--dv-ui);
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.dv-card__body { padding-top: 1.05rem; text-align: center; }
.dv-card__name {
	font-family: var(--dv-display);
	font-size: 1.22rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--dv-black);
	margin: 0;
}
.dv-card__line {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--dv-ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dv-gray);
}
.dv-card__price {
	margin: 0.55rem 0 0;
	font-family: var(--dv-ui);
	font-size: 0.85rem;
	font-weight: 300;
	color: var(--dv-black);
}
.dv-card__price del { color: var(--dv-gray); opacity: 0.65; margin-right: 0.4rem; }
.dv-card__price ins { text-decoration: none; font-weight: 500; }

/* ── marquee ──────────────────────────────────────────────────────────────── */

.dv-marquee { overflow: hidden; position: relative; }
.dv-marquee::before,
.dv-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(2rem, 8vw, 8rem);
	z-index: 2;
	pointer-events: none;
}
.dv-marquee::before { left: 0; background: linear-gradient(90deg, var(--dv-black), transparent); }
.dv-marquee::after { right: 0; background: linear-gradient(270deg, var(--dv-black), transparent); }

.dv-marquee__track {
	display: flex;
	gap: 1rem;
	width: max-content;
	animation: dv-marquee 64s linear infinite;
}
.dv-marquee:hover .dv-marquee__track { animation-play-state: paused; }
@keyframes dv-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.dv-tile {
	position: relative;
	flex: none;
	width: clamp(10rem, 15vw, 13.5rem);
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--dv-cream);
	text-decoration: none;
}
.dv-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-tile:hover img { transform: scale(1.06); }
.dv-tile__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 0.75rem 0.85rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.82), transparent);
	color: #fff;
	font-family: var(--dv-ui);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.dv-tile:hover .dv-tile__label,
.dv-tile:focus-visible .dv-tile__label { opacity: 1; }

/* ── lookbook ─────────────────────────────────────────────────────────────── */

/* Hairline-gapped tiles on a rule-coloured bed: the grid reads as one printed
   plate rather than five loose cards. Also kills the old ragged 3+2 orphan row. */
/* Fixed track counts, both of which divide the four back views exactly. auto-fit
   resolved to THREE columns at tablet width and left a lone cell on its own row —
   the same orphan-row tell this redesign exists to remove. Two columns on
   mobile rather than one also keeps the plate from running 1,745px tall. */
.dv-plate {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--dv-rule);
	border: 1px solid var(--dv-rule);
}
@media (min-width: 62rem) { .dv-plate { grid-template-columns: repeat(4, 1fr); } }
.dv-plate__cell {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--dv-cream);
}
.dv-plate__cell img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dv-plate__cell:hover img { transform: scale(1.05); }

/* ── brand statement ──────────────────────────────────────────────────────── */

.dv-statement { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; }
.dv-statement .dv-lede { max-width: 40rem; }
.dv-signature {
	font-family: var(--dv-display);
	font-style: italic;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	color: var(--dv-black);
	margin: 0;
}

/* ── newsletter + contact ─────────────────────────────────────────────────── */

.dv-form { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 30rem; }
@media (min-width: 34rem) { .dv-form--inline { flex-direction: row; } }
.dv-input {
	flex: 1;
	border: 1px solid var(--dv-rule-light);
	background: transparent;
	color: #fff;
	font-family: var(--dv-ui);
	font-size: 0.85rem;
	font-weight: 300;
	padding: 1rem 1.25rem;
	border-radius: 0;
	outline: none;
	transition: border-color 0.3s ease;
}
.dv-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.dv-input:focus { border-color: var(--dv-gold); }

.dv-contact-grid {
	display: grid;
	gap: 2rem;
	border-block: 1px solid var(--dv-rule);
	padding-block: 2.25rem;
	text-align: center;
}
@media (min-width: 44rem) { .dv-contact-grid { grid-template-columns: repeat(3, 1fr); } }
.dv-contact-grid a {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--dv-ui);
	font-size: 0.85rem;
	font-weight: 300;
	line-height: 1.65;
	color: var(--dv-gray);
	text-decoration: none;
	transition: color 0.3s ease;
}
.dv-contact-grid a:hover { color: var(--dv-black); }

.dv-field { position: relative; }
.dv-field input,
.dv-field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--dv-rule);
	background: transparent;
	padding: 1.35rem 0 0.65rem;
	font-family: var(--dv-ui);
	font-size: 0.9rem;
	font-weight: 300;
	color: var(--dv-black);
	border-radius: 0;
	outline: none;
	transition: border-color 0.3s ease;
	resize: vertical;
}
.dv-field label {
	position: absolute;
	left: 0;
	top: 1.35rem;
	font-family: var(--dv-ui);
	font-size: 0.9rem;
	font-weight: 300;
	color: var(--dv-gray);
	pointer-events: none;
	transition: transform 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
	transform-origin: left top;
}
.dv-field input:focus + label,
.dv-field textarea:focus + label,
.dv-field input:not(:placeholder-shown) + label,
.dv-field textarea:not(:placeholder-shown) + label {
	transform: translateY(-1.25rem);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dv-gold);
}
.dv-field input:focus,
.dv-field textarea:focus { border-bottom-color: var(--dv-gold); }
.dv-form-grid { display: grid; gap: 1.75rem; }
@media (min-width: 40rem) { .dv-form-grid--2 { grid-template-columns: 1fr 1fr; } }

/* ── section heading cluster ──────────────────────────────────────────────── */

.dv-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.dv-head--center { align-items: center; text-align: center; }
.dv-head--split { gap: 1.25rem; }
@media (min-width: 52rem) {
	.dv-head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.dv-head--split > :first-child { display: flex; flex-direction: column; gap: 1rem; }
}

/* ── interior page + Woo polish ───────────────────────────────────────────── */

/* The nav rendered as a washed-out grey slab on every interior page because the
   glass effect had no solid backing until scroll. Interior pages start solid. */
body.deven-interior #deven-nav,
#deven-nav.scrolled {
	background: var(--dv-black);
	backdrop-filter: none;
	border-bottom: 1px solid var(--dv-rule-light);
}

/* Product cards in the Woo loop pick up the same seamless cream bed. */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
	/* Exactly the matte baked into every studio render, and square — theme.css
	   rounds these 2px, which read as a different component from the homepage
	   cards sitting right above them. Nothing else in this design is rounded. */
	background: var(--dv-cream);
	border-radius: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--dv-display);
	font-weight: 500;
	letter-spacing: 0;
}
/* "Select options" on every tile is shouty; let the whole card be the target. */
.woocommerce ul.products li.product .button {
	font-size: 0.6rem;
	letter-spacing: 0.24em;
	background: transparent;
	color: var(--dv-black);
	border: 1px solid var(--dv-rule);
	padding: 0.8rem 1.5rem;
}
.woocommerce ul.products li.product .button:hover {
	background: var(--dv-black);
	color: #fff;
	border-color: var(--dv-black);
}

/* ═════════════════════════════════════════════════════════════════════════
   THE PURCHASE PATH — cart / checkout / account
   Reviewed 2026-08-10. These pages render from WooCommerce core + the Blocks
   plugin, so they arrive with their own defaults (rounded corners, underlined
   links, a 14px display-serif heading) that read as a different site from the
   one the visitor just came through. Nothing here changes behaviour.
   ═════════════════════════════════════════════════════════════════════════ */

/* Nothing in this design is underlined or rounded — not the nav, not a card,
   not a button. Woo underlines the cart's primary action and the product name,
   which is the single loudest "assembled from a template" tell on the money
   path. */
/* !important because the Blocks stylesheet sets these underlines itself and loads
   after the theme — measured 2026-08-10: without it the cart's primary action and
   the product name still computed to text-decoration:underline on the live site. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button *,
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button *,
.wc-block-components-product-name,
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-link {
	text-decoration: none !important;
}
.wc-block-components-product-name:hover,
.woocommerce-LostPassword a:hover {
	color: var(--dv-gold);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.woocommerce-form-login__submit,
.woocommerce-Button {
	border-radius: 0 !important;
	font-family: var(--dv-ui);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 1.15rem 2rem;
	background: var(--dv-black);
	color: #fff;
	border: 1px solid var(--dv-black);
	transition: background 0.35s ease, color 0.35s ease;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-Button:hover {
	background: var(--dv-gold);
	border-color: var(--dv-gold);
	color: var(--dv-black);
}

/* Square every panel Woo draws. The 5px radius on the login card and the
   checkout's payment/shipping accordions is the only rounding on the site. */
.woocommerce-form-login,
.woocommerce-ResetPassword,
.wc-block-components-radio-control-accordion-option,
.wc-block-components-panel,
.wc-block-components-text-input input,
.wc-block-components-select__container,
.woocommerce-input-wrapper input,
input.woocommerce-Input {
	border-radius: 0 !important;
}
.woocommerce-form-login,
.woocommerce-ResetPassword {
	border: 1px solid var(--dv-rule);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: #fff;
}

/* Woo prints an <h2>Login</h2> above the form. Inheriting the display serif at
   14px made it look like broken markup rather than a heading — and the page
   already says "My account" directly above it, so it is pure duplication. */
.woocommerce-account h2 {
	font-family: var(--dv-ui);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--dv-gold);
	margin-bottom: 1.25rem;
}

/* The default checkbox sat on a different baseline from the button beside it. */
.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: 1rem;
	font-size: 0.8rem;
	color: var(--dv-gray);
}
.woocommerce-form-login__rememberme input { margin: 0; }
.woocommerce-form-login .form-row { margin-bottom: 1.25rem; }
.woocommerce-account label { letter-spacing: 0.04em; }

/* ── form plumbing: honeypot + server-rendered notices ─────────────────── */

/* Off-screen rather than display:none — some bots skip fields that are not
   rendered at all, which would defeat the point of the trap. */
.dv-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dv-notice {
	margin: 0 0 1.75rem;
	padding: 0.9rem 1.15rem;
	border-left: 2px solid var(--dv-gold);
	background: rgba(201, 160, 84, 0.09);
	font-family: var(--dv-ui);
	font-size: 0.82rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
	color: var(--dv-black);
	text-align: left;
}
.dv-notice--bad {
	border-left-color: #9b2c2c;
	background: rgba(155, 44, 44, 0.07);
}
/* On the black newsletter band the black body copy would vanish. */
.dv-section--black .dv-notice {
	color: #fff;
	background: rgba(201, 160, 84, 0.14);
}

/* Cart/checkout headings come from the page title, not a block heading. */
.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-heading-block {
	font-family: var(--dv-display) !important;
	font-weight: 400;
	letter-spacing: 0.01em;
}

/* ═════════════════════════════════════════════════════════════════════════
   MOTION — one gesture, used everywhere

   The brief is Peter Millar: simple and elegant. That look does not come from
   adding devices, it comes from leaving them out. This file previously carried
   a word-splitting headline, a floating garment, pointer parallax, a
   scroll-reactive marquee, a rolling countdown, card lift and hover underlines.
   All of it has been removed on purpose. What is left is a quiet fade-up, one
   hairline that draws itself, and the product hover that actually sells.

   Scoped to .dv-js, so a JS-off page is simply static, and switched off again
   below under prefers-reduced-motion. No intro screen, no loader, no scroll
   prompt. Opacity and transform only, so none of it costs layout.
   ═════════════════════════════════════════════════════════════════════════ */

/* The hero settles in on load using the same fade-up the rest of the page uses
   on scroll, stepped gently down the column so it reads as one movement rather
   than four separate ones. */
/* The hairline is excluded: it draws itself with scaleX below, and it is meant to
   sit at 0.75 opacity. Sweeping it into this group forced it to a flat 1 and
   quietly overrode that — a 0,3,1 selector beating the 0,1,0 one on .dv-hairline. */
.dv-js .dv-hero__type > *:not(.dv-hairline) {
	opacity: 0;
	transform: translateY(0.9rem);
	transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.dv-js .dv-hero__type > *:nth-child(2) { transition-delay: 0.08s; }
.dv-js .dv-hero__type > *:nth-child(3) { transition-delay: 0.16s; }
.dv-js .dv-hero__type > *:nth-child(4) { transition-delay: 0.24s; }
.dv-js .dv-hero__type > *:nth-child(5) { transition-delay: 0.32s; }
.dv-js .dv-hero.is-in .dv-hero__type > *:not(.dv-hairline) { opacity: 1; transform: none; }

/* The single refinement kept: the gold hairline draws itself rather than simply
   appearing. It is the mark that repeats in every section, so it is what ties
   them together — and at 1px it is felt more than seen. */
.dv-js .dv-hairline {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.dv-js .reveal.visible .dv-hairline,
.dv-js .is-in .dv-hairline { transform: scaleX(1); }

/* Repeated at the end of the file on purpose: the earlier reduced-motion block
   sits above these rules, and equal-specificity rules that come later would
   otherwise win it back. */
@media (prefers-reduced-motion: reduce) {
	.dv-js .dv-hero__type > *:not(.dv-hairline) { opacity: 1 !important; transform: none !important; transition: none !important; }
	.dv-js .dv-hairline { transform: scaleX(1) !important; transition: none !important; }
}