/* ============================================================
   WaistWatch Premium v1.0.0 — main stylesheet
   Feminine luxury: champagne on deep espresso. Vanilla CSS.
   Motion rules: transform + opacity only; everything gated
   behind `html.motion-on` (JS) and prefers-reduced-motion.
   ============================================================ */

:root {
	--ink: #0e0b08;
	--smoke: #171310;
	--smoke-2: #1e1813;
	--gold: #d8b87e;
	--gold-deep: #b8945a;
	--cream: #f7f1e6;
	--muted: #b3a78f;
	--faint: #7d7261;
	--line: rgba(216, 184, 126, 0.18);
	--line-soft: rgba(216, 184, 126, 0.10);
	--gold-glow: rgba(216, 184, 126, 0.35);
	--font-display: "Cormorant Garamond", "Times New Roman", serif;
	--font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--head-h: 76px;
	--radius: 14px;
	--container: 1240px;
}

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--cream);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--cream); }

::selection { background: var(--gold); color: var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.08;
	margin: 0 0 0.5em;
	letter-spacing: 0.01em;
}

.eyebrow {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.2rem;
}
.eyebrow--center { text-align: center; }

/* ---------- Layout ---------- */
.container {
	width: min(var(--container), 100% - 3rem);
	margin-inline: auto;
}
.container--narrow { width: min(780px, 100% - 3rem); }

.section { padding: clamp(4.5rem, 9vw, 8.5rem) 0; }

.section__head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 1rem; }
.section__lede { color: var(--muted); font-size: 1.05rem; max-width: 56ch; }
.section__foot { margin-top: 3rem; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.95rem 2.1rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.35s var(--ease-out), background-color 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
	white-space: nowrap;
}
.btn--gold {
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
	color: #171208;
	box-shadow: 0 8px 30px -8px var(--gold-glow);
}
.btn--gold:hover { transform: translateY(-2px); color: #0e0b08; box-shadow: 0 14px 38px -8px var(--gold-glow); }
.btn--ghost {
	border-color: var(--line);
	color: var(--cream);
	background: rgba(216, 184, 126, 0.04);
	backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--outline { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn--outline:hover { background: var(--gold); color: #171208; transform: translateY(-2px); }
.btn--sm { padding: 0.6rem 1.3rem; font-size: 0.72rem; }
.btn--lg { padding: 1.1rem 2.6rem; font-size: 0.88rem; }
.btn--block { width: 100%; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
}
.link-arrow::after {
	content: "→";
	transition: transform 0.3s var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(6px); }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--gold);
	color: #171208;
	padding: 0.8rem 1.4rem;
	z-index: 200;
	border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-head {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--head-h);
	z-index: 100;
	transition: background-color 0.4s, border-color 0.4s, backdrop-filter 0.4s;
	border-bottom: 1px solid transparent;
}
.site-head.is-scrolled {
	background: rgba(14, 11, 8, 0.72);
	backdrop-filter: blur(18px) saturate(1.3);
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	border-bottom-color: var(--line-soft);
}
.site-head__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--head-h);
}
.site-brand__wordmark {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--cream);
}
.site-brand__wordmark:hover { color: var(--gold); }
.custom-logo { max-height: 44px; width: auto; }

.site-nav__list,
.menu-fallback {
	display: flex;
	gap: 2.2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a,
.menu-fallback a {
	color: var(--cream);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	position: relative;
	padding: 0.4rem 0;
}
.site-nav__list a::after,
.menu-fallback a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--ease-out);
}
.site-nav__list a:hover::after,
.menu-fallback a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-nav__list .current-menu-item a { color: var(--gold); }

.site-head__actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0.6rem;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--cream);
	transition: transform 0.35s var(--ease-out), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
	position: fixed;
	inset: var(--head-h) 0 auto 0;
	z-index: 99;
	background: rgba(14, 11, 8, 0.97);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--line);
	padding: 1.5rem 1.5rem 2.5rem;
	transform: translateY(-12px);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.45s var(--ease-out), opacity 0.35s, visibility 0.35s;
}
.mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.mobile-nav__list a {
	display: block;
	padding: 0.9rem 0.2rem;
	font-family: var(--font-display);
	font-size: 1.8rem;
	color: var(--cream);
	border-bottom: 1px solid var(--line-soft);
}
.mobile-nav__list a:hover { color: var(--gold); }
.mobile-nav__scrim {
	position: fixed;
	inset: 0;
	z-index: 98;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s, visibility 0.35s;
}
.mobile-nav__scrim.is-open { opacity: 1; visibility: visible; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background:
		radial-gradient(1100px 600px at 75% 20%, rgba(216, 184, 126, 0.10), transparent 60%),
		radial-gradient(900px 700px at 15% 85%, rgba(184, 148, 90, 0.08), transparent 60%),
		var(--ink);
}
.hero__canvas-wrap { position: absolute; inset: 0; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__poster {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 380px at 68% 32%, rgba(216, 184, 126, 0.22), transparent 65%),
		radial-gradient(420px 420px at 30% 70%, rgba(216, 184, 126, 0.10), transparent 60%);
}
/* Poster shows only when the WebGL canvas is absent (mobile / no-motion / no-JS). */
.hero__canvas:not([data-live]) + .hero__poster { display: block; }
.hero__canvas[data-live] + .hero__poster { display: none; }
.hero__vignette {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(14, 11, 8, 0.55), transparent 30%, transparent 62%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-top: var(--head-h); max-width: 900px; }
.hero__eyebrow { margin-bottom: 1.6rem; }
.hero__title {
	font-size: clamp(3rem, 8.4vw, 6.4rem);
	font-weight: 500;
	margin-bottom: 1.6rem;
	text-wrap: balance;
}
.hero__title .word { display: inline-block; }
.hero__title .char { display: inline-block; will-change: transform, opacity; }
.hero__lede {
	font-size: clamp(1.02rem, 1.6vw, 1.25rem);
	color: var(--muted);
	max-width: 56ch;
	margin: 0 0 2.6rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	z-index: 2;
	width: 26px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 999px;
	display: flex;
	justify-content: center;
	padding-top: 8px;
}
.hero__scroll span {
	width: 3px;
	height: 9px;
	border-radius: 3px;
	background: var(--gold);
	animation: scroll-dot 2.2s var(--ease-out) infinite;
}
@keyframes scroll-dot {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(0); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee {
	overflow: hidden;
	border-block: 1px solid var(--line);
	background: linear-gradient(90deg, rgba(216, 184, 126, 0.06), rgba(216, 184, 126, 0.02));
	padding: 1.1rem 0;
}
.marquee__track {
	display: flex;
	align-items: center;
	gap: 2.6rem;
	width: max-content;
	animation: marquee 28s linear infinite;
}
.marquee__item {
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold);
	white-space: nowrap;
}
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Product grid & cards ---------- */
.product-grid {
	display: grid;
	gap: clamp(1.2rem, 2.4vw, 2rem);
}
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }

.product-card { position: relative; }
.product-card__link { display: block; color: var(--cream); }
.product-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(160deg, var(--smoke-2), var(--smoke));
	border: 1px solid var(--line-soft);
}
.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease-out);
}
.product-card__placeholder { position: absolute; inset: 0; display: block; }
.product-card__placeholder span {
	position: absolute;
	inset: 22%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(216, 184, 126, 0.5), transparent 55%),
		radial-gradient(circle at 65% 70%, rgba(184, 148, 90, 0.35), transparent 55%),
		radial-gradient(circle at 50% 50%, rgba(216, 184, 126, 0.12), transparent 70%);
	filter: blur(2px);
}
.product-card__shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(247, 241, 230, 0.14) 50%, transparent 60%);
	transform: translateX(-120%);
	transition: transform 1s var(--ease-out);
	pointer-events: none;
}
.product-card__ribbon {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background: rgba(14, 11, 8, 0.82);
	backdrop-filter: blur(8px);
	border: 1px solid var(--line);
	color: var(--gold);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
}
.product-card__body { padding: 1.1rem 0.2rem 0; display: grid; gap: 0.35rem; }
.product-card__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.25;
	color: var(--cream);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__price { color: var(--gold); font-weight: 600; letter-spacing: 0.06em; }
.product-card__cta {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--faint);
	transition: color 0.3s;
}
/* Hover depth — desktop only, transform/opacity only. */
@media (hover: hover) and (pointer: fine) {
	.product-card { transition: transform 0.5s var(--ease-out); }
	.product-card:hover { transform: translateY(-8px); }
	.product-card:hover .product-card__img { transform: scale(1.05); }
	.product-card:hover .product-card__shine { transform: translateX(120%); }
	.product-card:hover .product-card__cta { color: var(--gold); }
	.product-card__media { transition: box-shadow 0.5s, border-color 0.5s; }
	.product-card:hover .product-card__media {
		box-shadow: 0 24px 60px -20px rgba(216, 184, 126, 0.35);
		border-color: var(--line);
	}
}

/* ---------- Story ---------- */
.story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}
.story__media { position: relative; min-height: 480px; }
.story__frame { position: absolute; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); }
.story__frame:first-child { inset: 0 12% 12% 0; }
.story__frame--small { inset: 52% 0 0 52%; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8); }
.story__ph { width: 100%; height: 100%; min-height: 220px; }
.story__ph--a { background: radial-gradient(500px 300px at 60% 35%, rgba(216,184,126,0.35), transparent 65%), linear-gradient(150deg, #241b12, #14100b); }
.story__ph--b { background: radial-gradient(circle at 50% 40%, rgba(247,241,230,0.28), transparent 55%), linear-gradient(150deg, #2b2115, #171208); }
.story__ph--c { background: radial-gradient(420px 300px at 40% 60%, rgba(184,148,90,0.35), transparent 60%), linear-gradient(150deg, #20180f, #100c07); }
.story__copy .section__title { margin-bottom: 1.4rem; }
.story__copy p { color: var(--muted); }
.story__copy p + p { margin-top: 1rem; }

/* ---------- Pillars ---------- */
.pillars { background: linear-gradient(to bottom, transparent, rgba(23, 19, 16, 0.6), transparent); }
.pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.pillar__rule { display: block; width: 44px; height: 1px; background: var(--gold); margin-bottom: 1.4rem; }
.pillar__title { font-size: 1.5rem; margin-bottom: 0.7rem; }
.pillar__text { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- Testimonials ---------- */
.testimonials { text-align: center; }
.testimonial { max-width: 820px; margin: 0 auto; }
.testimonial__quote {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--cream);
	margin: 0 0 1.4rem;
}
.testimonial__by { color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 0.6rem; }
.testimonial__note { color: var(--faint); font-size: 0.82rem; margin: 0; }

/* ---------- Lookbook ---------- */
.lookbook { overflow: hidden; }
.lookbook__strip {
	display: flex;
	gap: 1.2rem;
	overflow-x: auto;
	padding: 0 max(1.5rem, calc((100vw - var(--container)) / 2));
	scrollbar-width: none;
}
.lookbook__strip::-webkit-scrollbar { display: none; }
.lookbook__tile {
	flex: 0 0 clamp(220px, 26vw, 340px);
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	border: 1px solid var(--line-soft);
}
.lookbook__tile--1 { background: radial-gradient(300px 200px at 50% 30%, rgba(216,184,126,0.4), transparent 65%), linear-gradient(160deg, #251c11, #120d07); }
.lookbook__tile--2 { background: radial-gradient(circle at 60% 60%, rgba(247,241,230,0.22), transparent 55%), linear-gradient(160deg, #1d150c, #0f0b06); }
.lookbook__tile--3 { background: radial-gradient(280px 340px at 40% 70%, rgba(184,148,90,0.4), transparent 60%), linear-gradient(160deg, #221a10, #100c07); }
.lookbook__tile--4 { background: radial-gradient(320px 220px at 70% 35%, rgba(216,184,126,0.32), transparent 60%), linear-gradient(160deg, #191309, #0d0a05); }
.lookbook__tile--5 { background: radial-gradient(circle at 35% 35%, rgba(216,184,126,0.45), transparent 55%), linear-gradient(160deg, #261d10, #120d06); }
.lookbook__tile--6 { background: radial-gradient(300px 300px at 55% 55%, rgba(184,148,90,0.35), transparent 60%), linear-gradient(160deg, #1e160c, #0e0a06); }

/* ---------- CTA band ---------- */
.cta-band__inner {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) * 1.6);
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1.8rem, 5vw, 4.5rem);
	text-align: center;
	background:
		radial-gradient(700px 340px at 50% 0%, rgba(216, 184, 126, 0.16), transparent 65%),
		var(--smoke);
}
.cta-band__title { font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 1rem; text-wrap: balance; }
.cta-band__text { color: var(--muted); max-width: 54ch; margin: 0 auto 2.4rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Page hero & prose ---------- */
.page-hero { padding: calc(var(--head-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(2.5rem, 5vw, 4rem); text-align: center; }
.page-hero__title { font-size: clamp(2.6rem, 6vw, 4.8rem); margin-bottom: 1.2rem; text-wrap: balance; }
.page-hero__lede { color: var(--muted); max-width: 60ch; margin: 0 auto; font-size: 1.05rem; }

.prose { color: #d9cfbc; }
.prose p { margin: 0 0 1.4em; }
.prose h2, .prose h3 { margin-top: 2em; }
.prose a { border-bottom: 1px solid var(--line); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose--small { font-size: 0.92rem; color: var(--muted); }

/* ---------- Catalog ---------- */
.catalog__count { color: var(--faint); font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 2rem; }
.catalog__grid { margin-bottom: 1rem; }

.pagination { margin-top: 3.5rem; }
.pagination ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pagination a,
.pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 0.9rem;
	border-radius: 999px;
	border: 1px solid var(--line-soft);
	color: var(--cream);
	font-size: 0.85rem;
	font-weight: 500;
	transition: border-color 0.3s, color 0.3s, background-color 0.3s, transform 0.3s var(--ease-out);
}
.pagination a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.pagination .current { background: var(--gold); border-color: var(--gold); color: #171208; font-weight: 600; }
.pagination .dots { color: var(--faint); }

/* ---------- Single product ---------- */
.product-single__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: start;
}
.ps-gallery__main {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line-soft);
	background: linear-gradient(160deg, var(--smoke-2), var(--smoke));
}
.ps-gallery__img { width: 100%; height: 100%; object-fit: cover; }
.product-card__ribbon--single { top: 1.2rem; left: 1.2rem; }
.ps-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.7rem;
	margin-top: 0.9rem;
}
.ps-gallery__thumb {
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--line-soft);
	background: var(--smoke);
	padding: 0;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.ps-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
.ps-gallery__thumb.is-active { opacity: 1; border-color: var(--gold); }
.ps-gallery__placeholder {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	border: 1px solid var(--line-soft);
	background: radial-gradient(420px 300px at 50% 35%, rgba(216,184,126,0.28), transparent 65%), linear-gradient(160deg, var(--smoke-2), var(--smoke));
	display: flex;
	align-items: center;
	justify-content: center;
}
.ps-gallery__placeholder span {
	width: 34%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(216,184,126,0.5), transparent 60%);
	filter: blur(3px);
}
.product-single__title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 1rem; text-wrap: balance; }
.product-single__price { font-size: 1.5rem; color: var(--gold); font-weight: 600; letter-spacing: 0.04em; margin: 0 0 1.4rem; }
.product-single__notice {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 1.3rem;
	color: var(--muted);
	font-size: 0.92rem;
	background: rgba(216, 184, 126, 0.05);
	margin: 0 0 1.4rem;
}
.product-single__desc { color: #d9cfbc; margin-bottom: 2rem; }
.product-single__desc p { margin: 0 0 1.2em; }
.product-single__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-bottom: 2.4rem; }
.product-single__meta { display: grid; gap: 0.7rem; border-top: 1px solid var(--line-soft); padding-top: 1.6rem; margin: 0; }
.product-single__meta > div { display: flex; gap: 1rem; font-size: 0.92rem; }
.product-single__meta dt { color: var(--faint); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; min-width: 110px; padding-top: 0.2rem; }
.product-single__meta dd { margin: 0; color: var(--cream); }

/* ---------- Contact ---------- */
.contact__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.contact-form { display: grid; gap: 1.3rem; }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.field input,
.field textarea {
	background: rgba(247, 241, 230, 0.03);
	border: 1px solid var(--line-soft);
	border-radius: 10px;
	color: var(--cream);
	padding: 0.95rem 1.1rem;
	font: inherit;
	width: 100%;
	transition: border-color 0.3s, background-color 0.3s;
}
.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--gold);
	background: rgba(216, 184, 126, 0.06);
}
.field textarea { resize: vertical; }
.contact-form__hint { color: var(--faint); font-size: 0.85rem; margin: 0; }
.contact__list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.1rem; }
.contact__label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.25rem; }

/* ---------- Empty catalog / 404 ---------- */
.empty-catalog {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) 1.5rem;
	border: 1px solid var(--line-soft);
	border-radius: calc(var(--radius) * 1.6);
	background:
		radial-gradient(500px 260px at 50% 0%, rgba(216, 184, 126, 0.10), transparent 65%),
		var(--smoke);
}
.empty-catalog__frame { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.empty-catalog__gem {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, rgba(247, 241, 230, 0.75), transparent 45%),
		radial-gradient(circle at 50% 50%, rgba(216, 184, 126, 0.55), transparent 70%);
	box-shadow: 0 0 60px -8px var(--gold-glow);
	animation: gem-pulse 4s ease-in-out infinite;
}
@keyframes gem-pulse {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50% { transform: scale(1.07); opacity: 1; }
}
.empty-catalog__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.empty-catalog__text { color: var(--muted); margin: 0 auto 2rem; max-width: 44ch; }

.error-404__inner { text-align: center; padding: 3rem 0; }
.error-404__title { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: 1.2rem; }
.error-404__inner p { color: var(--muted); }
.error-404__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.2rem; }

/* ---------- Footer ---------- */
.site-foot {
	border-top: 1px solid var(--line-soft);
	background: linear-gradient(to bottom, transparent, rgba(23, 19, 16, 0.85));
	padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem;
	margin-top: 2rem;
}
.site-foot__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin-bottom: 3rem;
}
.site-foot__wordmark { font-family: var(--font-display); font-size: 1.9rem; margin: 0 0 0.6rem; }
.site-foot__tagline { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.4rem; max-width: 30ch; }
.site-foot__social { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.site-foot__heading {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.2rem;
}
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.92rem; }
.site-foot__list a { color: var(--muted); }
.site-foot__list a:hover { color: var(--gold); }
.site-foot__list span { color: var(--muted); }
.site-foot__note { color: var(--faint); font-size: 0.82rem; margin: 0.9rem 0 0; }

.motion-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	background: none;
	border: 0;
	color: var(--cream);
	cursor: pointer;
	padding: 0.4rem 0;
	font: inherit;
}
.motion-toggle__track {
	width: 46px;
	height: 26px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(216, 184, 126, 0.08);
	position: relative;
	transition: background-color 0.3s, border-color 0.3s;
	flex: none;
}
.motion-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--gold);
	transition: transform 0.35s var(--ease-out);
}
.motion-toggle[aria-pressed="true"] .motion-toggle__thumb { transform: translateX(20px); }
.motion-toggle[aria-pressed="true"] .motion-toggle__track { background: rgba(216, 184, 126, 0.22); }
.motion-toggle__label { font-size: 0.85rem; letter-spacing: 0.08em; }

.site-foot__bar {
	border-top: 1px solid var(--line-soft);
	padding-top: 1.6rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.site-foot__copy { color: var(--faint); font-size: 0.82rem; margin: 0; }

/* ---------- Motion states (JS-gated) ---------- */
/* Content is fully visible by default; these only hide when motion will run. */
html.motion-on [data-reveal] { opacity: 0; }
html.motion-on [data-split] .char { opacity: 0; }
html.motion-on .hero__canvas { opacity: 0; transition: opacity 1.2s ease; }
html.motion-on .hero__canvas[data-live] { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.product-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.product-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.pillars__grid { grid-template-columns: repeat(2, 1fr); }
	.site-foot__grid { grid-template-columns: 1fr 1fr; }
	.story__grid { grid-template-columns: 1fr; }
	.story__media { min-height: 380px; }
	.product-single__grid { grid-template-columns: 1fr; }
	.contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.site-nav { display: none; }
	.site-head__whatsapp { display: none; }
	.nav-toggle { display: flex; }
	.product-grid--4,
	.product-grid--3 { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.product-card__title { font-size: 1.05rem; }
	.contact-form__row { grid-template-columns: 1fr; }
	.site-foot__grid { grid-template-columns: 1fr; gap: 2.2rem; }
	.pillars__grid { grid-template-columns: 1fr; }
	.hero__ctas .btn { width: 100%; }
	.ps-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Reduced motion / paused motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html { scroll-behavior: auto; }
	/* Never hide content waiting for JS animation. */
	html.motion-on [data-reveal],
	html.motion-on [data-split] .char { opacity: 1 !important; transform: none !important; }
}
html[data-motion="paused"] .marquee__track,
html[data-motion="paused"] .empty-catalog__gem,
html[data-motion="paused"] .hero__scroll span { animation: none !important; }
html[data-motion="paused"] [data-reveal],
html[data-motion="paused"] [data-split] .char { opacity: 1 !important; transform: none !important; }