/*
Theme Name: Dorvassio
Theme URI: https://dorvassio.com
Author: Dorvassio
Author URI: https://dorvassio.com
Description: An elegant black-and-gold WooCommerce theme for Dorvassio, a luxury-style watch store built around honest, affordable pricing. Editorial serif typography, metallic gold detailing and a conversion-focused storefront that makes every piece feel like a far more expensive purchase.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dorvassio
Tags: e-commerce, blog, custom-colors, custom-menu, featured-images, rtl-language-support, translation-ready, woocommerce
WC requires at least: 7.0
WC tested up to: 9.4
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--dv-black: #060606;
	--dv-header-pad: 18px;
	--dv-ink: #0b0b0c;
	--dv-panel: #121110;
	--dv-panel-2: #171613;
	--dv-ivory: #f6f1e7;
	--dv-ivory-2: #efe7d8;

	--dv-gold-1: #fbe7bb;
	--dv-gold-2: #f0c06c;
	--dv-gold-3: #d9a441;
	--dv-gold-4: #b47830;
	--dv-gold-5: #8a5a1f;

	--dv-text: #f2ece1;
	--dv-muted: #a79e8d;
	--dv-muted-dark: #6d6559;

	--dv-line: rgba(240, 192, 108, 0.2);
	--dv-line-soft: rgba(240, 192, 108, 0.1);

	--dv-gold-grad: linear-gradient(135deg, var(--dv-gold-1) 0%, var(--dv-gold-2) 28%, var(--dv-gold-4) 62%, var(--dv-gold-1) 100%);
	--dv-gold-text: linear-gradient(180deg, #fdf0d2 0%, var(--dv-gold-2) 52%, var(--dv-gold-4) 100%);

	--dv-serif: "Playfair Display", "Times New Roman", serif;
	--dv-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

	--dv-radius: 2px;
	--dv-container: 1240px;
	--dv-gutter: clamp(20px, 5vw, 56px);
	--dv-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
	--dv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

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

body {
	margin: 0;
	background-color: var(--dv-black);
	color: var(--dv-text);
	font-family: var(--dv-sans);
	font-size: 17px;
	line-height: 1.7;
	font-weight: 300;
	letter-spacing: 0.01em;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.nav-open {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}

a {
	color: var(--dv-gold-2);
	text-decoration: none;
	transition: color 0.3s var(--dv-ease);
}

a:hover,
a:focus {
	color: var(--dv-gold-1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--dv-serif);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: 0.005em;
	margin: 0 0 0.5em;
	color: var(--dv-text);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.2rem; }

p {
	margin: 0 0 1.4em;
}

small {
	font-size: 0.82rem;
}

::selection {
	background: var(--dv-gold-3);
	color: #100c04;
}

/* Focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--dv-gold-2);
	outline-offset: 3px;
}

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

.skip-link {
	left: -9999px;
	top: 0;
	position: absolute;
	z-index: 9999;
	background: var(--dv-gold-2);
	color: #0b0803;
	padding: 10px 18px;
	font-weight: 500;
}

.skip-link:focus {
	left: 12px;
	top: 12px;
	color: #0b0803;
}

.alignnone { margin: 0; }
.aligncenter { display: block; margin: 0 auto; }
.alignwide { margin-inline: calc(var(--dv-gutter) * -1); }
.alignfull { width: 100%; margin-inline: 0; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--dv-muted); text-align: center; }
.sticky,
.gallery-caption,
.bypostauthor { display: block; }

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.dv-container {
	width: min(100% - (var(--dv-gutter) * 2), var(--dv-container));
	margin-inline: auto;
}

.dv-container--narrow {
	width: min(100% - (var(--dv-gutter) * 2), 860px);
	margin-inline: auto;
}

.dv-section {
	padding-block: clamp(64px, 8vw, 116px);
	position: relative;
}

.dv-section--tight { padding-block: clamp(44px, 5vw, 68px); }
.dv-section--panel { background: var(--dv-ink); }

.dv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
	margin: 0 0 22px;
}

.dv-eyebrow::before {
	content: "";
	width: 44px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--dv-gold-3));
}

.dv-eyebrow--center::after {
	content: "";
	width: 44px;
	height: 1px;
	background: linear-gradient(90deg, var(--dv-gold-3), transparent);
}

.dv-gold-text {
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dv-lede {
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	color: var(--dv-muted);
	max-width: 62ch;
}

.dv-rule {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--dv-line), transparent);
	margin: 0;
}

.dv-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 54px);
}

.dv-section-head h2 {
	margin-bottom: 0;
}

.dv-section-head .dv-eyebrow { margin-bottom: 16px; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.dv-btn,
button[type="submit"],
input[type="submit"],
.wp-block-button__link,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	border: 1px solid transparent;
	border-radius: var(--dv-radius);
	font-family: var(--dv-sans);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	transition: transform 0.35s var(--dv-ease), box-shadow 0.35s var(--dv-ease), background 0.35s var(--dv-ease), color 0.35s var(--dv-ease), border-color 0.35s var(--dv-ease);
}

.dv-btn--gold,
button[type="submit"],
input[type="submit"] {
	background: var(--dv-gold-grad);
	color: #120c03;
	box-shadow: 0 14px 34px -18px rgba(240, 192, 108, 0.85);
}

.dv-btn--gold:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	color: #120c03;
	transform: translateY(-2px);
	box-shadow: 0 22px 44px -18px rgba(240, 192, 108, 0.9);
}

.dv-btn--ghost {
	background: transparent;
	color: var(--dv-gold-2);
	border-color: var(--dv-line);
}

.dv-btn--ghost:hover {
	color: var(--dv-gold-1);
	border-color: var(--dv-gold-2);
	background: rgba(240, 192, 108, 0.06);
	transform: translateY(-2px);
}

.dv-btn--dark {
	background: var(--dv-black);
	color: var(--dv-gold-2);
	border-color: var(--dv-black);
}

.dv-btn--dark:hover {
	color: var(--dv-gold-1);
	background: #16130e;
	transform: translateY(-2px);
}

.dv-btn--wide { width: 100%; }

.dv-text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.74rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--dv-gold-2);
	border-bottom: 1px solid var(--dv-line);
	padding-bottom: 6px;
	transition: border-color 0.3s var(--dv-ease), gap 0.3s var(--dv-ease);
}

.dv-text-link:hover {
	gap: 16px;
	border-color: var(--dv-gold-2);
	color: var(--dv-gold-1);
}

/* ==========================================================================
   5. Promo bar + header
   ========================================================================== */

.dv-promo {
	background: linear-gradient(90deg, #0e0c09, #1a140b 50%, #0e0c09);
	border-bottom: 1px solid var(--dv-line-soft);
	color: var(--dv-gold-1);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	padding: 9px 16px;
	position: relative;
	z-index: 60;
}

.dv-promo span {
	opacity: 0.72;
	margin-inline: 10px;
}

.dv-promo strong {
	font-weight: 500;
	color: var(--dv-gold-2);
}

.dv-promo__sep { color: var(--dv-gold-4); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/*
	 * No backdrop-filter here on purpose: a filter would make this element the
	 * containing block for fixed descendants, trapping the mobile drawer inside
	 * the header box. The background is opaque enough to read as frosted glass.
	 */
	background: rgba(6, 6, 6, 0.97);
	border-bottom: 1px solid var(--dv-line-soft);
	transition: box-shadow 0.4s var(--dv-ease), background 0.4s var(--dv-ease);
}

.site-header.is-stuck {
	box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 1);
	background: rgba(6, 6, 6, 0.98);
}

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(18px, 3vw, 46px);
	padding-block: var(--dv-header-pad);
}

.site-branding {
	justify-self: start;
	grid-column: 1;
	display: flex;
	align-items: center;
}

.custom-logo-link img,
.site-logo {
	display: block;
	height: clamp(34px, 4.4vw, 50px);
	width: auto;
	object-fit: contain;
}

.site-title {
	font-family: var(--dv-serif);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0;
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.site-title a { color: transparent; }

.site-description {
	display: none;
}

/* Primary nav */
.main-navigation {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
}

.main-navigation a {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dv-text);
	padding-block: 6px;
	position: relative;
}

.main-navigation a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--dv-gold-grad);
	transition: width 0.35s var(--dv-ease);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.current_page_item > a {
	color: var(--dv-gold-2);
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item > a::after {
	width: 100%;
}

/* Header utilities */
.header-actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 10px;
	color: var(--dv-text);
	border: 1px solid transparent;
	border-radius: 50%;
	transition: color 0.3s var(--dv-ease), border-color 0.3s var(--dv-ease), background 0.3s var(--dv-ease);
}

.header-action:hover {
	color: var(--dv-gold-2);
	border-color: var(--dv-line);
	background: rgba(240, 192, 108, 0.05);
}

.header-action svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }

.cart-link {
	position: relative;
	border-radius: 999px;
	gap: 8px;
	padding-inline: 14px;
	border-color: var(--dv-line);
	background: rgba(240, 192, 108, 0.05);
}

.cart-count {
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--dv-gold-grad);
	color: #120c03;
	font-size: 0.63rem;
	font-weight: 600;
	letter-spacing: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--dv-line);
	border-radius: 50%;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.nav-toggle span {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--dv-gold-2);
	position: relative;
	transition: background 0.3s var(--dv-ease);
}

.nav-toggle span::before,
.nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 1.5px;
	background: var(--dv-gold-2);
	transition: transform 0.35s var(--dv-ease);
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
	.site-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.site-branding { grid-column: 2; justify-self: center; }
	.header-actions { grid-column: 3; }
	.nav-toggle { display: inline-flex; grid-column: 1; grid-row: 1; justify-self: start; }

	.main-navigation {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(86vw, 380px);
		background: var(--dv-ink);
		border-left: 1px solid var(--dv-line);
		padding: 96px 32px 40px;
		transform: translateX(100%);
		transition: transform 0.45s var(--dv-ease);
		overflow-y: auto;
		z-index: 55;
	}

	.nav-open .main-navigation { transform: translateX(0); }

	.main-navigation ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation li {
		border-bottom: 1px solid var(--dv-line-soft);
	}

	.main-navigation a {
		padding-block: 18px;
		font-size: 0.82rem;
		letter-spacing: 0.24em;
	}

	.main-navigation a::after { display: none; }

	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--dv-ease), visibility 0.4s;
		z-index: 54;
	}

	.nav-open .nav-overlay {
		opacity: 1;
		visibility: visible;
	}
}

@media (max-width: 640px) {
	.dv-promo { font-size: 0.6rem; letter-spacing: 0.12em; }
	.dv-promo span.secondary { display: none; }
	.header-action--account { display: none; }
	.cart-link .cart-label { display: none; }
	.cart-link { padding-inline: 12px; }
}

/* ==========================================================================
   5b. Supermenu (category panel)

   Mobile-first: inside the drawer the panel is a plain stacked group.
   Desktop: it becomes an absolute panel anchored to .site-header__inner so it
   lines up with the page grid, and the trigger row is stretched to the full
   header height so there is no hover dead-zone.
   ========================================================================== */

.dv-mega {
	display: block;
	margin-top: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--dv-line-soft);
}

.dv-mega__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

/* Grid children default to a min-content floor, which would distort the fr
   tracks on desktop — let them shrink. */
.dv-mega__col {
	min-width: 0;
}

.dv-mega__title {
	font-family: var(--dv-sans);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
	margin: 0 0 14px;
}

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

.dv-mega__list a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	font-size: 0.94rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--dv-muted);
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--dv-ease), border-color 0.3s var(--dv-ease), padding-left 0.3s var(--dv-ease);
}

.dv-mega__list a::after {
	display: none;
}

.dv-mega__list a:hover,
.dv-mega__list a:focus-visible {
	color: var(--dv-gold-1);
	border-bottom-color: var(--dv-line-soft);
}

.dv-mega__count {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	color: var(--dv-muted-dark);
}

/* Feature card in the last column */
.dv-feature {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 14px;
	align-items: center;
	padding: 12px;
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	transition: border-color 0.35s var(--dv-ease), transform 0.35s var(--dv-ease);
}

.dv-feature:hover {
	border-color: var(--dv-line);
	transform: translateY(-3px);
}

.dv-feature__media {
	display: block;
	width: 78px;
	height: 78px;
	overflow: hidden;
	background: #0e0d0c;
}

.dv-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.dv-feature__body {
	display: grid;
	gap: 4px;
}

.dv-feature__body strong {
	font-family: var(--dv-serif);
	font-size: 1.02rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--dv-text);
}

.dv-feature__body em {
	font-style: normal;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	color: var(--dv-gold-2);
}

.dv-mega__all {
	margin-top: 16px;
	font-size: 0.64rem;
}

@media (min-width: 1025px) {
	/* Stretch the menu row so the panel can start exactly at its bottom edge. */
	.main-navigation {
		align-self: stretch;
	}

	.main-navigation ul {
		height: 100%;
	}

	.dv-mega {
		position: absolute;
		top: 100%;
		left: 50%;
		width: min(var(--dv-container), calc(100vw - (var(--dv-gutter) * 2)));
		margin-top: 0;
		padding: clamp(30px, 3vw, 44px) clamp(30px, 4vw, 56px) clamp(34px, 3.4vw, 48px);
		background: #08080a;
		border: 1px solid var(--dv-line-soft);
		border-top: 2px solid var(--dv-gold-3);
		box-shadow: 0 46px 80px -34px rgba(0, 0, 0, 0.96);
		transform: translateX(-50%) translateY(-10px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.32s var(--dv-ease), transform 0.32s var(--dv-ease), visibility 0s linear 0.32s;
		z-index: 60;
	}

	/* Invisible bridge across the header's bottom padding, so moving the pointer
	   from the menu item onto the panel never drops the :hover state. */
	.dv-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(var(--dv-header-pad) * -1);
		height: var(--dv-header-pad);
	}

	.main-navigation li.dv-mega-trigger:hover > .dv-mega,
	.main-navigation li.dv-mega-trigger:focus-within > .dv-mega {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
		transition-delay: 0s;
	}

	.dv-mega__inner {
		--dv-mega-gap: clamp(26px, 3vw, 48px);
		grid-template-columns: 1fr 1fr 1.25fr;
		gap: var(--dv-mega-gap);
		align-items: start;
	}

	.dv-mega__col + .dv-mega__col {
		border-left: 1px solid var(--dv-line-soft);
		padding-left: var(--dv-mega-gap);
	}

	.dv-mega__list {
		gap: 1px;
	}

	.dv-mega__list a:hover {
		padding-left: 6px;
	}
}

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

/* ==========================================================================
   6. Hero
   ========================================================================== */

.dv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 78% 10%, rgba(240, 192, 108, 0.14), transparent 60%),
		radial-gradient(80% 70% at 8% 92%, rgba(180, 120, 48, 0.14), transparent 62%),
		linear-gradient(180deg, #0a0908 0%, var(--dv-black) 70%);
	border-bottom: 1px solid var(--dv-line-soft);
}

.dv-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--dv-line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--dv-line-soft) 1px, transparent 1px);
	background-size: 78px 78px;
	opacity: 0.35;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 80%);
	z-index: -1;
}

.dv-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(36px, 6vw, 80px);
	align-items: center;
	padding-block: clamp(70px, 9vw, 130px);
}

.dv-hero__media {
	position: relative;
}

.dv-hero__frame {
	position: relative;
	padding: clamp(24px, 4vw, 46px);
	background: linear-gradient(160deg, rgba(240, 192, 108, 0.14), rgba(10, 10, 10, 0.2));
	border: 1px solid var(--dv-line);
	border-radius: 3px;
	box-shadow: var(--dv-shadow);
}

.dv-hero__frame::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid var(--dv-line-soft);
	pointer-events: none;
}

.dv-hero__frame img {
	display: block;
	width: 100%;
	border-radius: 2px;
	filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.8));
}

.dv-hero__badge {
	position: absolute;
	left: -18px;
	bottom: -22px;
	background: var(--dv-ivory);
	color: #14100a;
	padding: 16px 22px;
	border-radius: 2px;
	box-shadow: var(--dv-shadow);
	text-align: center;
	min-width: 148px;
}

.dv-hero__badge b {
	display: block;
	font-family: var(--dv-serif);
	font-size: 1.9rem;
	line-height: 1;
	color: #8a5a1f;
}

.dv-hero__badge span {
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6d6559;
}

.dv-hero h1 {
	margin-bottom: 26px;
}

.dv-hero h1 em {
	font-style: italic;
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dv-hero__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 30px;
	padding: 16px 20px;
	border: 1px solid var(--dv-line);
	border-left: 3px solid var(--dv-gold-3);
	background: rgba(240, 192, 108, 0.05);
	font-size: 0.9rem;
	color: var(--dv-muted);
}

.dv-hero__price strong {
	font-family: var(--dv-serif);
	font-size: 1.7rem;
	color: var(--dv-gold-2);
	font-weight: 500;
	line-height: 1;
}

.dv-hero__price s {
	color: var(--dv-muted-dark);
	font-size: 1rem;
}

.dv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 34px;
}

.dv-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dv-muted);
}

.dv-hero__trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dv-hero__trust span::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--dv-gold-3);
	transform: rotate(45deg);
}

@media (max-width: 900px) {
	.dv-hero__inner {
		grid-template-columns: 1fr;
		padding-block: clamp(48px, 10vw, 76px);
	}

	.dv-hero__media { order: -1; max-width: 560px; }
	.dv-hero__badge { left: auto; right: -8px; bottom: -16px; }
}

/* ==========================================================================
   7. Value strip / trust bar
   ========================================================================== */

.dv-valuebar {
	background: var(--dv-ivory);
	color: #23201a;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dv-valuebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.dv-valuebar li {
	padding: 30px 24px;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.dv-valuebar li:last-child { border-right: 0; }

.dv-valuebar strong {
	display: block;
	font-family: var(--dv-serif);
	font-size: 1.05rem;
	color: #14100a;
	margin-bottom: 4px;
	letter-spacing: 0.02em;
}

.dv-valuebar span {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7a7264;
}

@media (max-width: 860px) {
	.dv-valuebar ul { grid-template-columns: repeat(2, 1fr); }
	.dv-valuebar li:nth-child(2n) { border-right: 0; }
	.dv-valuebar li:nth-child(-n + 2) { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
}

@media (max-width: 480px) {
	.dv-valuebar ul { grid-template-columns: 1fr; }
	.dv-valuebar li { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
}

/* ==========================================================================
   8. Collection tiles
   ========================================================================== */

.dv-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.6vw, 22px);
}

.dv-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border: 1px solid var(--dv-line-soft);
	background: linear-gradient(160deg, #1b1813, #0b0a09);
	isolation: isolate;
}

.dv-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.72;
	transition: transform 0.9s var(--dv-ease), opacity 0.6s var(--dv-ease);
}

.dv-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.86) 100%);
	z-index: 1;
	transition: background 0.5s var(--dv-ease);
}

.dv-tile__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 24px 22px;
}

.dv-tile__body small {
	display: block;
	font-size: 0.64rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
	margin-bottom: 8px;
}

.dv-tile__body strong {
	display: block;
	font-family: var(--dv-serif);
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 400;
	color: var(--dv-ivory);
}

.dv-tile__body em {
	display: inline-block;
	font-style: normal;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dv-gold-2);
	margin-top: 12px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.45s var(--dv-ease), transform 0.45s var(--dv-ease);
}

.dv-tile:hover img { transform: scale(1.07); opacity: 0.9; }
.dv-tile:hover .dv-tile__body em { opacity: 1; transform: translateY(0); }
.dv-tile:hover { border-color: var(--dv-line); }

@media (max-width: 980px) {
	.dv-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	.dv-tiles { grid-template-columns: 1fr; }
	.dv-tile { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   9. Editorial split (affordability story)
   ========================================================================== */

.dv-editorial {
	background: var(--dv-ivory);
	color: #23201a;
	position: relative;
}

.dv-editorial h2,
.dv-editorial h3 { color: #14100a; }

.dv-editorial .dv-eyebrow { color: var(--dv-gold-5); }
.dv-editorial .dv-eyebrow::before { background: linear-gradient(90deg, transparent, var(--dv-gold-4)); }

.dv-editorial__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.dv-editorial p { color: #57503f; }

.dv-compare {
	display: grid;
	gap: 14px;
	margin-top: 30px;
}

.dv-compare__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 22px;
	border: 1px solid rgba(20, 16, 10, 0.12);
	background: #fff;
}

.dv-compare__row span {
	font-size: 0.74rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #7a7264;
}

.dv-compare__row b {
	font-family: var(--dv-serif);
	font-size: 1.5rem;
	font-weight: 500;
	color: #14100a;
}

.dv-compare__row--us {
	background: var(--dv-black);
	border-color: var(--dv-black);
}

.dv-compare__row--us span { color: var(--dv-gold-3); }
.dv-compare__row--us b {
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dv-editorial__media {
	position: relative;
}

.dv-editorial__media img {
	width: 100%;
	border: 1px solid rgba(20, 16, 10, 0.1);
	box-shadow: 0 40px 70px -46px rgba(20, 16, 10, 0.75);
}

@media (max-width: 860px) {
	.dv-editorial__grid { grid-template-columns: 1fr; }
	.dv-editorial__media { order: -1; }
}

/* ==========================================================================
   10. Quote / testimonials
   ========================================================================== */

.dv-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 26px);
}

.dv-quote {
	padding: clamp(26px, 3vw, 38px);
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	position: relative;
	transition: border-color 0.4s var(--dv-ease), transform 0.4s var(--dv-ease);
}

.dv-quote:hover { border-color: var(--dv-line); transform: translateY(-4px); }

.dv-quote::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	right: 20px;
	font-family: var(--dv-serif);
	font-size: 4.6rem;
	line-height: 1;
	color: rgba(240, 192, 108, 0.22);
}

.dv-quote p {
	font-family: var(--dv-serif);
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--dv-text);
	font-style: italic;
}

.dv-quote footer {
	font-size: 0.7rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
}

.dv-stars { color: var(--dv-gold-2); letter-spacing: 3px; font-size: 0.85rem; margin-bottom: 14px; display: block; }

@media (max-width: 900px) {
	.dv-quotes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. Newsletter
   ========================================================================== */

.dv-newsletter {
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(240, 192, 108, 0.16), transparent 65%),
		var(--dv-ink);
	border-block: 1px solid var(--dv-line-soft);
	text-align: center;
}

.dv-newsletter h2 { margin-bottom: 14px; }

.dv-newsletter p {
	color: var(--dv-muted);
	margin-inline: auto;
	max-width: 54ch;
}

/* Welcome code chip */
.dv-code {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	padding: 16px 26px;
	margin: 4px auto 0;
	border: 1px dashed var(--dv-gold-3);
	background: rgba(240, 192, 108, 0.07);
	border-radius: var(--dv-radius);
}

.dv-code__label,
.dv-code__hint {
	font-size: 0.66rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--dv-muted);
}

.dv-code__value {
	font-family: var(--dv-serif);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 500;
	letter-spacing: 0.16em;
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dv-newsletter__note {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dv-muted-dark);
}

@media (max-width: 560px) {
	.dv-code {
		flex-direction: column;
		gap: 8px;
	}
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	background: #040404;
	border-top: 1px solid var(--dv-line);
	padding-top: clamp(50px, 6vw, 78px);
}

.footer-widgets {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(26px, 4vw, 52px);
	padding-bottom: 48px;
}

.footer-widget h4,
.footer-widget .widget-title,
.widget-title {
	font-family: var(--dv-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
	margin-bottom: 22px;
}

.footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.footer-widget a {
	color: var(--dv-muted);
	font-size: 0.92rem;
}

.footer-widget a:hover { color: var(--dv-gold-2); }

.footer-widget p {
	color: var(--dv-muted);
	font-size: 0.92rem;
}

.footer-brand .site-logo,
.footer-brand img {
	height: 40px;
	margin-bottom: 18px;
}

.footer-brand .site-title {
	font-size: 1.35rem;
	display: block;
	margin-bottom: 16px;
}

.footer-bottom {
	border-top: 1px solid var(--dv-line-soft);
	padding-block: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	color: var(--dv-muted-dark);
}

.footer-bottom ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.footer-bottom a { color: var(--dv-muted-dark); }
.footer-bottom a:hover { color: var(--dv-gold-2); }

@media (max-width: 900px) {
	.footer-widgets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	.footer-widgets { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. Content: posts, archive, search, 404
   ========================================================================== */

.page-head {
	padding-block: clamp(50px, 7vw, 88px) clamp(28px, 4vw, 44px);
	background:
		radial-gradient(70% 140% at 50% 0%, rgba(240, 192, 108, 0.1), transparent 70%),
		var(--dv-ink);
	border-bottom: 1px solid var(--dv-line-soft);
	text-align: center;
}

.page-head h1 { margin-bottom: 12px; }
.page-head p { color: var(--dv-muted); margin: 0 auto; max-width: 60ch; }

.breadcrumbs {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dv-muted-dark);
	margin-bottom: 18px;
}

.breadcrumbs a { color: var(--dv-muted); }
.breadcrumbs span { margin-inline: 8px; color: var(--dv-gold-4); }

.dv-posts {
	display: grid;
	gap: clamp(26px, 3vw, 40px);
}

.dv-post {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	padding-bottom: clamp(26px, 3vw, 40px);
	border-bottom: 1px solid var(--dv-line-soft);
}

.dv-post:last-child { border-bottom: 0; }

.dv-post__thumb {
	display: block;
	overflow: hidden;
	border: 1px solid var(--dv-line-soft);
	aspect-ratio: 4 / 3;
	background: var(--dv-panel);
}

.dv-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--dv-ease);
}

.dv-post__thumb:hover img { transform: scale(1.06); }

.dv-post__meta {
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
	margin-bottom: 12px;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.dv-post h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 12px; }
.dv-post h2 a { color: var(--dv-text); }
.dv-post h2 a:hover { color: var(--dv-gold-2); }
.dv-post p { color: var(--dv-muted); margin-bottom: 18px; }

@media (max-width: 760px) {
	.dv-post { grid-template-columns: 1fr; }
}

.entry-content {
	padding-block: clamp(44px, 6vw, 80px);
}

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

.entry-content a {
	border-bottom: 1px solid var(--dv-line);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
	color: var(--dv-muted);
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--dv-gold-3);
	font-family: var(--dv-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--dv-text);
}

.entry-content img {
	border: 1px solid var(--dv-line-soft);
}

.entry-title { margin-bottom: 8px; }

.post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--dv-line-soft);
}

.pagination,
.woocommerce-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 46px;
}

.pagination a,
.pagination span,
.woocommerce-pagination a,
.woocommerce-pagination span,
.woocommerce-pagination li .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 14px;
	border: 1px solid var(--dv-line-soft);
	color: var(--dv-muted);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	transition: border-color 0.3s var(--dv-ease), color 0.3s var(--dv-ease);
}

.pagination a:hover,
.woocommerce-pagination a:hover {
	border-color: var(--dv-gold-2);
	color: var(--dv-gold-2);
}

.pagination .current,
.woocommerce-pagination .current,
.woocommerce-pagination span.current {
	background: var(--dv-gold-grad);
	border-color: transparent;
	color: #120c03;
	font-weight: 500;
}

.woocommerce-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.dv-empty {
	text-align: center;
	padding: clamp(50px, 8vw, 96px) 0;
	border: 1px dashed var(--dv-line);
	background: var(--dv-ink);
}

/* 404 */
.dv-404 {
	text-align: center;
	padding-block: clamp(70px, 12vw, 150px);
	background:
		radial-gradient(60% 80% at 50% 20%, rgba(240, 192, 108, 0.12), transparent 70%),
		var(--dv-black);
}

.dv-404__code {
	font-family: var(--dv-serif);
	font-size: clamp(5rem, 18vw, 11rem);
	line-height: 0.9;
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 20px;
}

/* Comments */
.comments-area {
	border-top: 1px solid var(--dv-line-soft);
	margin-top: 50px;
	padding-top: 40px;
}

.comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: grid;
	gap: 24px;
}

.comment-list .comment-body {
	padding: 22px 24px;
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
}

.comment-meta .comment-author img {
	border-radius: 50%;
	margin-right: 10px;
}

.comment-meta .fn { font-family: var(--dv-serif); color: var(--dv-gold-2); font-style: normal; }
.comment-metadata a { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dv-muted-dark); }

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--dv-line-soft);
	color: var(--dv-text);
	padding: 14px 16px;
	font-family: var(--dv-sans);
	font-size: 0.95rem;
	margin-bottom: 14px;
	border-radius: var(--dv-radius);
}

/* ==========================================================================
   14. WooCommerce
   ========================================================================== */

.woocommerce .dv-container { padding-block: clamp(36px, 5vw, 64px); }

/*
 * Cart, checkout and account are ordinary pages, so they render through
 * page.php and its narrow prose column. Store screens need the full width.
 */
.woocommerce-cart .dv-container--narrow,
.woocommerce-checkout .dv-container--narrow,
.woocommerce-account .dv-container--narrow {
	width: min(100% - (var(--dv-gutter) * 2), var(--dv-container));
}

/* Result count + ordering: WooCommerce floats these itself, so leave the
   layout alone and only restyle them. ul.products clears the floats below. */
.woocommerce .woocommerce-result-count {
	color: var(--dv-muted);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 14px 0 30px;
	padding-top: 4px;
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 30px;
}

.woocommerce .woocommerce-ordering select {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	color: var(--dv-text);
	padding: 11px 16px;
	font-family: var(--dv-sans);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	border-radius: var(--dv-radius);
	text-transform: uppercase;
}

/* Product grid */
ul.products {
	clear: both;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 26px) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* WooCommerce's clearfix pseudo-elements generate boxes, and inside a grid
   container they become grid items: ::before steals the first cell of every
   row and ::after adds an empty row at the end. Match WooCommerce's own
   selector specificity and kill box generation outright — a plain
   `display: none` here loses to `.woocommerce ul.products::before`. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
	content: none !important;
	display: none !important;
}

/* Four columns read as a catalogue on desktop. Below ~1000px the cards get
   too narrow to hold a price row and a button, so the grid drops straight to
   two. It skips a three-column step on purpose: both homepage grids hold 8
   items and the shop holds 12, and three columns would leave a ragged final
   row with a blank cell in it. */
@media (max-width: 1000px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	ul.products { gap: 12px; }
}

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	/* Grid children default to a min-content floor, which would let a long
	   title widen its own track and throw the row out of alignment. */
	min-width: 0;
	position: relative;
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	display: flex;
	flex-direction: column;
	transition: border-color 0.4s var(--dv-ease), transform 0.4s var(--dv-ease), box-shadow 0.4s var(--dv-ease);
}

ul.products li.product:hover {
	border-color: var(--dv-line);
	transform: translateY(-6px);
	box-shadow: 0 34px 60px -38px rgba(0, 0, 0, 1);
}

ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 16px;
	background: #0e0d0c;
	transition: transform 0.7s var(--dv-ease), opacity 0.5s var(--dv-ease);
}

ul.products li.product:hover a img { transform: scale(1.04); }

.product-grid-link {
	display: block;
	padding: 0 0 6px;
	overflow: hidden;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--dv-serif);
	font-size: 1.18rem;
	font-weight: 400;
	color: var(--dv-text);
	padding: 0 20px;
	margin: 0 0 6px;
	letter-spacing: 0.01em;
}

ul.products li.product .woocommerce-loop-product__title:hover { color: var(--dv-gold-2); }

.dv-product__collection {
	display: block;
	padding: 16px 20px 0;
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
}

ul.products li.product .price {
	font-family: var(--dv-sans);
	padding: 0 20px 18px;
	margin-top: auto;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	color: var(--dv-gold-2);
	font-size: 1.05rem;
	font-weight: 400;
}

ul.products li.product .price del {
	color: var(--dv-muted-dark);
	font-size: 0.86rem;
	opacity: 0.85;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--dv-gold-2);
	font-weight: 500;
}

/* "Compare at" style price */
.dv-price__was {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
}

.dv-price__now {
	font-family: var(--dv-serif);
	font-size: 1.35rem;
	color: var(--dv-gold-2);
}

/* Sale flash */
.onsale,
.dv-sale-flash {
	position: absolute !important;
	top: 14px;
	left: 14px;
	z-index: 3;
	width: auto !important;
	height: auto !important;
	min-width: 0;
	padding: 7px 13px !important;
	line-height: 1 !important;
	border-radius: 0 !important;
	background: var(--dv-gold-grad) !important;
	color: #120c03 !important;
	font-family: var(--dv-sans);
	font-size: 0.62rem !important;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background-image: var(--dv-gold-grad) !important;
}

.dv-wish {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 6, 0.75);
	border: 1px solid var(--dv-line);
	border-radius: 50%;
	color: var(--dv-gold-2);
	font-size: 0.9rem;
	transition: background 0.3s var(--dv-ease);
}

.dv-wish:hover { background: rgba(240, 192, 108, 0.2); }

/* Add to cart buttons */
ul.products li.product .button,
ul.products li.product .added_to_cart {
	margin: 0 20px 20px;
	padding: 13px 18px;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	background: transparent;
	border: 1px solid var(--dv-line);
	color: var(--dv-gold-2);
	border-radius: var(--dv-radius);
	transition: background 0.35s var(--dv-ease), color 0.35s var(--dv-ease), border-color 0.35s var(--dv-ease);
	display: block;
}

ul.products li.product .button:hover,
ul.products li.product .added_to_cart:hover {
	background: var(--dv-gold-grad);
	border-color: transparent;
	color: #120c03;
}

/* Star ratings */
.woocommerce .star-rating,
p.stars a,
p.stars span {
	color: var(--dv-gold-2) !important;
}

ul.products li.product .star-rating {
	margin: 0 20px 14px;
	display: block;
}

/* Result / loop notices */
.woocommerce ul.products + .woocommerce-notices-wrapper { margin-top: 24px; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line);
	border-top: 3px solid var(--dv-gold-3);
	color: var(--dv-text);
	padding: 16px 20px;
	margin-bottom: 22px;
	list-style: none;
	font-size: 0.92rem;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--dv-gold-2);
}

.woocommerce-error {
	border-top-color: #b4482f;
	color: #f0d8d1;
}

.woocommerce-message a,
.woocommerce-info a { color: var(--dv-gold-2); }

/* Buttons on shop/checkout */
.button,
.button.alt,
.wc-forward,
dt a.remove {
	/* keep default sizes but themed */
}

.checkout-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.button.alt {
	background: var(--dv-gold-grad) !important;
	color: #120c03 !important;
	border: 1px solid transparent !important;
	border-radius: var(--dv-radius) !important;
	padding: 15px 30px !important;
	font-family: var(--dv-sans);
	font-size: 0.74rem !important;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-shadow: none !important;
	box-shadow: 0 14px 30px -18px rgba(240, 192, 108, 0.8);
	transition: transform 0.35s var(--dv-ease), box-shadow 0.35s var(--dv-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.button.alt:hover,
.checkout-button:hover {
	color: #120c03 !important;
	transform: translateY(-2px);
	box-shadow: 0 22px 40px -18px rgba(240, 192, 108, 0.9);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--dv-gold-grad) !important;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.widget_price_filter .button {
	background: var(--dv-gold-grad) !important;
}

/* Secondary / ghost buttons */
.woocommerce .button--secondary,
.wc-block-components-button.is-style-outline {
	background: transparent !important;
	border-color: var(--dv-line) !important;
	color: var(--dv-gold-2) !important;
}

/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrap input,
.wc-block-components-text-input input,
.wc-block-components-select select {
	background: rgba(255, 255, 255, 0.035) !important;
	border: 1px solid var(--dv-line-soft) !important;
	border-radius: var(--dv-radius) !important;
	color: var(--dv-text) !important;
	padding: 14px 16px !important;
	font-family: var(--dv-sans);
	font-size: 0.95rem;
	box-shadow: none !important;
	transition: border-color 0.3s var(--dv-ease), background 0.3s var(--dv-ease);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--dv-gold-3) !important;
	background: rgba(240, 192, 108, 0.06) !important;
	outline: none;
}

.woocommerce form .form-row label { color: var(--dv-muted); font-size: 0.82rem; letter-spacing: 0.06em; }
.woocommerce form .form-row .required { color: var(--dv-gold-3); }

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line);
	padding: clamp(24px, 4vw, 40px);
	border-radius: var(--dv-radius);
}

/* Tables */
.shop_table {
	background: var(--dv-panel) !important;
	border: 1px solid var(--dv-line-soft) !important;
	border-radius: var(--dv-radius);
}

.shop_table th,
.shop_table td {
	border-bottom: 1px solid var(--dv-line-soft) !important;
	padding: 18px 16px !important;
	color: var(--dv-text);
	vertical-align: middle;
}

.shop_table thead th {
	background: rgba(240, 192, 108, 0.06);
	font-family: var(--dv-sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dv-gold-3);
}

.shop_table td.product-name a { color: var(--dv-text); }
.shop_table td.product-name a:hover { color: var(--dv-gold-2); }
.shop_table td.product-thumbnail img { width: 74px; border: 1px solid var(--dv-line-soft); }

a.remove {
	color: #c46a52 !important;
	font-size: 1.1rem !important;
	line-height: 1 !important;
}

a.remove:hover { color: #e08b70 !important; background: rgba(196, 106, 82, 0.12) !important; }

.cart-collaterals {
	border-top: 1px solid var(--dv-line-soft);
	margin-top: 26px;
	padding-top: 26px;
}

.cart_totals {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line);
	padding: clamp(22px, 3vw, 34px) !important;
	border-radius: var(--dv-radius);
}

.cart_totals table { width: 100%; }
.cart_totals th, .cart_totals td { padding: 12px 0; border-bottom: 1px solid var(--dv-line-soft); text-align: right; }
.cart_totals th { color: var(--dv-muted); font-weight: 400; text-transform: uppercase; font-size: 0.76rem; letter-spacing: 0.14em; }
.cart_totals .order-total th, .cart_totals .order-total td { border-bottom: 0; }
.cart_totals .order-total .amount { font-family: var(--dv-serif); font-size: 1.5rem; color: var(--dv-gold-2); }

/* Cart / checkout progress */
.woocommerce-checkout-steps,
.woocommerce-breadcrumb {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dv-muted-dark);
}

.woocommerce-breadcrumb a { color: var(--dv-muted); }
.woocommerce-breadcrumb { margin-bottom: 24px; font-size: 0.7rem; }

/* Single product */
.woocommerce div.product {
	background: transparent;
	overflow: visible;
}

.woocommerce div.product .product_title {
	font-family: var(--dv-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 400;
	color: var(--dv-text);
	margin-bottom: 14px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dv-gold-2) !important;
	font-family: var(--dv-serif);
	font-size: 2rem !important;
	font-weight: 400;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--dv-muted-dark) !important;
	font-size: 1.1rem;
	opacity: 1;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins { text-decoration: none; }

/* "why it's a bargain" note under price */
.dv-value-note {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 26px;
	padding: 14px 18px;
	border: 1px dashed var(--dv-line);
	background: rgba(240, 192, 108, 0.05);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--dv-muted);
}

.dv-value-note b { color: var(--dv-gold-2); font-weight: 500; }

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--dv-muted);
	font-size: 1rem;
	line-height: 1.8;
	border-left: 2px solid var(--dv-gold-4);
	padding-left: 18px;
}

.woocommerce div.product form.cart {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--dv-line-soft);
}

.woocommerce div.product form.cart .qty {
	background: var(--dv-panel) !important;
	border: 1px solid var(--dv-line) !important;
	color: var(--dv-text) !important;
	height: 54px !important;
	width: 78px !important;
	text-align: center;
	border-radius: var(--dv-radius);
	font-size: 1rem;
}

.woocommerce div.product form.cart .button {
	height: 54px;
	padding-inline: 40px !important;
	margin-left: 10px;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.woocommerce div.product .product_meta {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--dv-muted);
	display: grid;
	gap: 8px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--dv-line-soft);
}

.woocommerce div.product .product_meta span > a {
	color: var(--dv-gold-3);
	border-bottom: 1px solid var(--dv-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 0;
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var(--dv-line);
	flex-wrap: wrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border-bottom-color: var(--dv-gold-3);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-size: 0.74rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dv-muted);
	padding: 14px 22px;
	display: block;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--dv-gold-2); }

.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	border-top: 0;
	padding: clamp(22px, 3vw, 36px);
	color: var(--dv-muted);
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-size: 1.4rem;
	color: var(--dv-text);
	margin-top: 0;
}

.woocommerce #reviews #comments h2 { color: var(--dv-text); font-family: var(--dv-serif); }
.woocommerce .commentlist li .comment-text { background: var(--dv-panel); border-color: var(--dv-line-soft); }

/* Related products */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	margin-top: clamp(56px, 7vw, 90px);
}

.related h2,
.upsells h2 {
	text-align: center;
	margin-bottom: 34px;
	position: relative;
}

/* Cross-sell & cart widgets */
.woocommerce-cart .cart-collaterals .cart_totals + .wc-proceed-to-checkout a { width: 100%; }

.widget_shopping_cart_content .cart_list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--dv-line-soft);
}

/* Sale / price filter */
.widget_price_filter .price_slider_wrapper .price_slider {
	background: var(--dv-line-soft);
	border: 0;
	height: 4px;
}

.widget_price_filter .price_slider_wrapper .price_slider .ui-slider-range {
	background: var(--dv-gold-grad);
	height: 4px;
}

.widget_price_filter .price_slider_wrapper .price_slider .ui-slider-handle {
	background: var(--dv-gold-2);
	border: 0;
	top: -5px;
}

/* Sidebar / widgets */
.widget {
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
	padding: clamp(20px, 3vw, 28px);
	margin-bottom: 24px;
}

.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.widget a { color: var(--dv-muted); }
.widget a:hover { color: var(--dv-gold-2); }

/* Quantity ---------------------------------------------------------------
   WooCommerce's number input ships as an unstyled white browser box, which
   reads as broken inside a dark theme. The single-product quantity keeps its
   own larger sizing further up; this covers cart, checkout and loops. */
.quantity .qty {
	height: 46px;
	width: 66px;
	padding: 0 8px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--dv-line-soft);
	border-radius: var(--dv-radius);
	color: var(--dv-text);
	font-family: var(--dv-sans);
	font-size: 0.95rem;
	text-align: center;
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
}

.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Coupon */
.woocommerce-cart-form .coupon { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.woocommerce-cart-form .coupon input {
	flex: 1;
	min-width: 180px;
	height: 46px;
	padding: 0 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--dv-line-soft);
	border-radius: var(--dv-radius);
	color: var(--dv-text);
	font-family: var(--dv-sans);
	font-size: 0.9rem;
}
.woocommerce-cart-form .coupon input:focus { border-color: var(--dv-gold-3); outline: none; }
.woocommerce-cart-form .coupon .button { height: 46px; }

/* "Update cart" is disabled until a line changes — it must not read as clickable */
.woocommerce-cart-form button[name="update_cart"]:disabled {
	background: transparent;
	border-color: var(--dv-line-soft);
	color: var(--dv-muted);
	cursor: not-allowed;
	opacity: 1;
}

/* Line-item remove link: WooCommerce paints this in alarm red, which fights
   the palette on a page whose job is to feel expensive. */
table.cart td.product-remove a.remove {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	border: 1px solid var(--dv-line-soft);
	border-radius: 50%;
	background: transparent;
	color: var(--dv-muted) !important;
	font-size: 0.95rem;
	opacity: 1;
}
table.cart td.product-remove a.remove:hover {
	background: var(--dv-gold-2);
	border-color: var(--dv-gold-2);
	color: #120c03 !important;
}

/* Cart totals shipping etc. */
.woocommerce-shipping-totals { color: var(--dv-muted); }

/* Star rating in reviews */
.woocommerce .star-rating span { color: var(--dv-gold-2) !important; }

/* Sale flash on single */
.woocommerce span.onsale {
	position: absolute;
	top: 16px;
	left: 16px;
}

/* Breadcrumb on shop */
.woocommerce .dv-container > .woocommerce-breadcrumb { padding-top: 0; }

/* Checkout order review */
.woocommerce-checkout-review-order-table { background: var(--dv-panel); }
.woocommerce-checkout-review-order { background: transparent; }

/* Payment box */
.woocommerce-checkout #payment {
	background: var(--dv-panel) !important;
	border: 1px solid var(--dv-line) !important;
	border-radius: var(--dv-radius) !important;
}

.woocommerce-checkout #payment div.payment_box {
	background: rgba(240, 192, 108, 0.07) !important;
	color: var(--dv-muted) !important;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-top-color: rgba(240, 192, 108, 0.07) !important;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--dv-line-soft) !important;
	padding: 20px 24px !important;
}

.woocommerce-checkout #payment ul.payment_methods li { color: var(--dv-text); }
.woocommerce-checkout #payment .place-order { padding: 22px 24px !important; }
.woocommerce-checkout #payment .terms-term-link { color: var(--dv-gold-2); }

/* Select2 — WooCommerce enhances the country/state dropdowns with Select2,
   whose default theme paints a bright white box. Restyle it into the palette. */
.select2-container--default .select2-selection--single {
	height: 50px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--dv-line-soft);
	border-radius: var(--dv-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--dv-text);
	padding: 0 38px 0 16px;
	line-height: 48px;
	font-family: var(--dv-sans);
	font-size: 0.95rem;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--dv-muted); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
	width: 34px;
	height: 48px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--dv-muted) transparent transparent transparent;
	border-width: 5px 5px 0 5px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--dv-gold-3); }

.select2-dropdown {
	background: #141110;
	border: 1px solid var(--dv-line-soft);
	border-radius: var(--dv-radius);
	color: var(--dv-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--dv-line-soft);
	border-radius: var(--dv-radius);
	color: var(--dv-text);
	padding: 10px 12px;
	font-family: var(--dv-sans);
}

.select2-container--default .select2-results__option { color: var(--dv-text); }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--dv-gold-3);
	color: #120c03;
}

.select2-container--default .select2-results__option[aria-selected="true"] { background: rgba(240, 192, 108, 0.14); }
.select2-container--default .select2-results__option[aria-disabled="true"],
.select2-container--default .select2-results__group { color: var(--dv-muted); }

/* Place order button */
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 19px !important;
	font-size: 0.8rem !important;
}

/* Account / login forms */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--dv-panel);
	border: 1px solid var(--dv-line-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--dv-line-soft);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 15px 20px;
	color: var(--dv-muted);
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: rgba(240, 192, 108, 0.07);
	color: var(--dv-gold-2);
}

/* ==========================================================================
   15. Shop header, tile fallbacks, empty state
   ========================================================================== */

.woocommerce-products-header {
	text-align: center;
	padding: clamp(6px, 1vw, 14px) 0 clamp(30px, 4vw, 46px);
	margin-bottom: clamp(24px, 3vw, 40px);
	border-bottom: 1px solid var(--dv-line-soft);
	position: relative;
}

.woocommerce-products-header::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 90px;
	height: 1px;
	background: var(--dv-gold-grad);
	transform: translateX(-50%);
}

.woocommerce-products-header .page-title {
	font-family: var(--dv-serif);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 400;
	color: var(--dv-text);
	margin-bottom: 12px;
}

.woocommerce-products-header .term-description {
	color: var(--dv-muted);
	max-width: 58ch;
	margin-inline: auto;
	font-size: 1rem;
}

/*
 * When a theme supplies woocommerce.php, WooCommerce renders the archive title
 * through woocommerce_content() as a bare .page-title sibling — style that path
 * the same way as the wrapped one above.
 */
.woocommerce .dv-container > .page-title {
	font-family: var(--dv-serif);
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 400;
	color: var(--dv-text);
	text-align: center;
	margin: clamp(6px, 1vw, 14px) 0 clamp(24px, 2.6vw, 34px);
}

.woocommerce .dv-container > .term-description {
	color: var(--dv-muted);
	max-width: 58ch;
	margin: 0 auto clamp(26px, 3vw, 40px);
	text-align: center;
	font-size: 1rem;
	padding-bottom: clamp(26px, 3vw, 40px);
	border-bottom: 1px solid var(--dv-line-soft);
}

/* Single product title sits beside the gallery, left-aligned */
.woocommerce .dv-container .product_title {
	text-align: left;
}

/* Category tile fallback when no image has been uploaded yet */
.dv-tile__fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dv-serif);
	font-size: clamp(5rem, 11vw, 8rem);
	line-height: 1;
	background: var(--dv-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.9;
}

.dv-tile__fallback::after {
	content: "";
	position: absolute;
	width: 54%;
	aspect-ratio: 1;
	border: 1px solid var(--dv-line);
	border-radius: 50%;
	z-index: -1;
}

.dv-tile__fallback::before {
	content: "";
	position: absolute;
	width: 68%;
	aspect-ratio: 1;
	border: 1px solid var(--dv-line-soft);
	border-radius: 50%;
	z-index: -1;
}

/* Empty state blocks */
.dv-empty.dv-post {
	display: block;
	border-bottom: 0;
	padding-bottom: 0;
}

/* Account / cart headings share the page-head treatment */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce form.checkout_coupon + h2,
.woocommerce h2.woocommerce-column__title,
.woocommerce h2.woocommerce-customer-details--title {
	font-family: var(--dv-serif);
	font-weight: 400;
	color: var(--dv-text);
	margin-top: 0;
}

.woocommerce .col2-set::before,
.woocommerce .col2-set::after {
	clear: both;
	content: "";
	display: table;
}

.woocommerce .col-1,
.woocommerce .col-2 {
	width: 100%;
}

@media (min-width: 768px) {
	.woocommerce .col-1 { float: left; width: 48%; }
	.woocommerce .col-2 { float: right; width: 48%; }
}

/* Checkout: details left, order summary right.
   WooCommerce stacks these two blocks, which leaves a dead column beside the
   tall billing form. Auto-placement puts #customer_details in column one and
   #order_review in column two. */
@media (min-width: 992px) {
	/* WooCommerce keeps #order_review_heading outside #order_review, so plain
	   auto-placement drops the order table back under the billing form.
	   The areas pin all three blocks to the grid that was intended. */
	form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-areas:
			"details heading"
			"details review";
		column-gap: clamp(28px, 4vw, 60px);
		row-gap: 0;
		align-items: start;
	}

	form.checkout #customer_details { grid-area: details; }
	form.checkout #order_review_heading { grid-area: heading; margin-top: 0; }
	form.checkout #order_review { grid-area: review; }

	form.checkout #customer_details,
	form.checkout #order_review { min-width: 0; }

	/* Billing takes the whole left column; order notes stack beneath it. */
	form.checkout #customer_details .col-1,
	form.checkout #customer_details .col-2 {
		float: none;
		width: 100%;
	}

	form.checkout #customer_details .col-2 { margin-top: 12px; }
}

/* ==========================================================================
   16. Motion + misc
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--dv-ease), transform 0.8s var(--dv-ease);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.reveal { opacity: 1; transform: none; }
}

/* RTL */
.site-header__inner { direction: ltr; }

@media (max-width: 640px) {
	body { font-size: 16px; }
	.dv-hero__actions .dv-btn { width: 100%; }
}