/*
 * Catalog Style Product Page
 * Design: Dark aurora fire + gold accents (matches homepage)
 * Elevated: trust badges, accordion, lightbox, animations
 */

/* ===== ENTRANCE ANIMATIONS ===== */
.anim-fade {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
	transition-delay: var(--delay, 0s);
}

.anim-fade.visible {
	opacity: 1;
	transform: translateY(0);
}

/* ===== PRODUCT PAGE LAYOUT — Pure White + Rose Gold Dust ===== */
.product-page {
	padding-top: 70px;
	padding-bottom: var(--space-5xl);
	position: relative;
	z-index: 2;
	background: #ffffff;
	min-height: 100vh;
	overflow: clip; /* clips fog like hidden, but keeps position:sticky working */

	/* Light theme variable overrides */
	--color-bg: #ffffff;
	--color-bg-alt: #f5f2ed;
	--color-border: rgba(170,155,130,0.30);
	--color-text: #1a1510;
	--color-text-muted: #706050;
	--color-accent: #9a7a3a;
	--color-accent-hover: #7a6028;
	--color-accent-dim: rgba(154,122,58,0.12);
}

/* Vignette — subtle warm edges on white */
.product-page::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(180,160,130,0.12) 100%);
}

.product-page .container {
	max-width: none;
	padding-left: 0;
	position: relative;
	z-index: 1;
}

/* ===== COSMIC DUST FOG — Milky Way nebula wisps ===== */
.product-fog {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

/* Static nebula base — rose gold dust under everything */
.product-page::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(800px 120px at 20% 15%, rgba(165,105,85,0.08) 0%, transparent 100%),
		radial-gradient(600px 80px at 55% 40%, rgba(155,95,75,0.07) 0%, transparent 100%),
		radial-gradient(700px 70px at 70% 65%, rgba(170,110,90,0.06) 0%, transparent 100%),
		radial-gradient(500px 140px at 35% 82%, rgba(160,100,80,0.07) 0%, transparent 100%),
		radial-gradient(900px 50px at 50% 30%, rgba(175,115,95,0.05) 0%, transparent 100%);
}

/* --- Wide dust sweeps — rose gold on white --- */
.product-fog--1 {
	width: 1100px; height: 180px;
	top: -3%; left: 5%;
	border-radius: 80% 40% 70% 30% / 60% 80% 40% 50%;
	background: radial-gradient(ellipse, rgba(165,105,85,0.22) 0%, rgba(165,105,85,0.06) 50%, transparent 70%);
	filter: blur(45px);
	animation: fogDrift1 30s ease-in-out infinite;
}

.product-fog--3 {
	width: 1300px; height: 140px;
	top: 38%; right: -8%; left: auto;
	border-radius: 40% 80% 30% 70% / 50% 40% 80% 60%;
	background: radial-gradient(ellipse, rgba(175,110,90,0.20) 0%, rgba(175,110,90,0.05) 55%, transparent 75%);
	filter: blur(50px);
	animation: fogDrift3 28s ease-in-out infinite;
}

.product-fog--7 {
	width: 1200px; height: 160px;
	top: 62%; left: -6%;
	border-radius: 70% 30% 80% 20% / 40% 70% 30% 60%;
	background: radial-gradient(ellipse, rgba(160,100,80,0.18) 0%, rgba(160,100,80,0.05) 50%, transparent 70%);
	filter: blur(48px);
	animation: fogDrift7 40s ease-in-out infinite;
}

/* --- Diagonal streaks — rose gold --- */
.product-fog--2 {
	width: 900px; height: 120px;
	top: 18%; left: -12%;
	border-radius: 60% 80% 40% 70% / 80% 50% 70% 40%;
	background: radial-gradient(ellipse, rgba(170,108,88,0.20) 0%, rgba(170,108,88,0.05) 50%, transparent 70%);
	filter: blur(40px);
	animation: fogDrift2 35s ease-in-out infinite;
}

.product-fog--5 {
	width: 1000px; height: 150px;
	top: 6%; right: -3%; left: auto;
	border-radius: 30% 70% 60% 40% / 70% 30% 60% 50%;
	background: radial-gradient(ellipse, rgba(180,115,95,0.18) 0%, rgba(180,115,95,0.04) 55%, transparent 70%);
	filter: blur(42px);
	animation: fogDrift5 38s ease-in-out infinite;
}

/* --- Thin tendrils — rose gold --- */
.product-fog--6 {
	width: 800px; height: 70px;
	top: 32%; right: 8%; left: auto;
	border-radius: 90% 30% 80% 20% / 50% 90% 30% 50%;
	background: radial-gradient(ellipse, rgba(168,106,86,0.18) 0%, transparent 55%);
	filter: blur(30px);
	animation: fogDrift6 26s ease-in-out infinite;
}

.product-fog--9 {
	width: 1000px; height: 60px;
	top: 48%; left: 8%;
	border-radius: 80% 50% 70% 40% / 60% 80% 50% 70%;
	background: radial-gradient(ellipse, rgba(172,110,90,0.16) 0%, transparent 50%);
	filter: blur(25px);
	animation: fogDrift9 42s ease-in-out infinite;
}

.product-fog--11 {
	width: 700px; height: 55px;
	top: 72%; left: 20%;
	border-radius: 50% 80% 40% 70% / 70% 50% 80% 40%;
	background: radial-gradient(ellipse, rgba(160,100,80,0.14) 0%, transparent 50%);
	filter: blur(28px);
	animation: fogDrift11 34s ease-in-out infinite;
}

/* --- Concentrated nebula patches — rose gold --- */
.product-fog--4 {
	width: 500px; height: 280px;
	top: 52%; left: 18%;
	border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
	background: radial-gradient(ellipse, rgba(165,105,85,0.20) 0%, rgba(165,105,85,0.05) 45%, transparent 70%);
	filter: blur(55px);
	animation: fogDrift4 32s ease-in-out infinite;
}

.product-fog--8 {
	width: 450px; height: 250px;
	top: 78%; right: 12%; left: auto;
	border-radius: 50% 70% 30% 60% / 40% 50% 70% 40%;
	background: radial-gradient(ellipse, rgba(158,98,78,0.18) 0%, rgba(158,98,78,0.04) 50%, transparent 70%);
	filter: blur(50px);
	animation: fogDrift8 33s ease-in-out infinite;
}

/* --- Faint accent wisps — rose gold --- */
.product-fog--10 {
	width: 600px; height: 100px;
	top: 12%; left: 35%;
	border-radius: 70% 40% 80% 30% / 50% 70% 30% 60%;
	background: radial-gradient(ellipse, rgba(175,112,92,0.16) 0%, transparent 55%);
	filter: blur(35px);
	animation: fogDrift10 36s ease-in-out infinite;
}

.product-fog--12 {
	width: 850px; height: 90px;
	top: 85%; left: -5%;
	border-radius: 40% 80% 60% 30% / 60% 40% 80% 50%;
	background: radial-gradient(ellipse, rgba(162,102,82,0.14) 0%, transparent 50%);
	filter: blur(32px);
	animation: fogDrift12 44s ease-in-out infinite;
}

/* --- Cosmic dust drift animations — wispy, directional movement --- */
@keyframes fogDrift1 {
	0%, 100% { transform: rotate(-8deg) translate(0, 0); opacity: 1; }
	30% { transform: rotate(-6deg) translate(80px, 12px); opacity: 0.7; }
	60% { transform: rotate(-10deg) translate(-50px, 20px); opacity: 1; }
	85% { transform: rotate(-7deg) translate(30px, -8px); opacity: 0.8; }
}

@keyframes fogDrift2 {
	0%, 100% { transform: rotate(22deg) translate(0, 0); opacity: 1; }
	35% { transform: rotate(25deg) translate(60px, -20px); opacity: 0.7; }
	65% { transform: rotate(20deg) translate(-40px, 15px); opacity: 1; }
	85% { transform: rotate(23deg) translate(20px, -10px); opacity: 0.8; }
}

@keyframes fogDrift3 {
	0%, 100% { transform: rotate(-5deg) translate(0, 0); opacity: 1; }
	25% { transform: rotate(-3deg) translate(-70px, 15px); opacity: 0.8; }
	55% { transform: rotate(-7deg) translate(50px, -12px); opacity: 1; }
	80% { transform: rotate(-4deg) translate(-25px, 20px); opacity: 0.7; }
}

@keyframes fogDrift4 {
	0%, 100% { transform: rotate(12deg) translate(0, 0); opacity: 1; }
	30% { transform: rotate(14deg) translate(40px, 18px); opacity: 0.65; }
	60% { transform: rotate(10deg) translate(-55px, -8px); opacity: 1; }
	80% { transform: rotate(13deg) translate(15px, -20px); opacity: 0.8; }
}

@keyframes fogDrift5 {
	0%, 100% { transform: rotate(-14deg) translate(0, 0); opacity: 1; }
	25% { transform: rotate(-12deg) translate(-45px, 25px); opacity: 0.75; }
	50% { transform: rotate(-16deg) translate(60px, 8px); opacity: 1; }
	75% { transform: rotate(-13deg) translate(-15px, -18px); opacity: 0.8; }
}

@keyframes fogDrift6 {
	0%, 100% { transform: rotate(10deg) translate(0, 0); opacity: 1; }
	30% { transform: rotate(12deg) translate(50px, -8px); opacity: 0.7; }
	65% { transform: rotate(8deg) translate(-35px, 12px); opacity: 1; }
	85% { transform: rotate(11deg) translate(20px, -5px); opacity: 0.8; }
}

@keyframes fogDrift7 {
	0%, 100% { transform: rotate(-18deg) translate(0, 0); opacity: 1; }
	20% { transform: rotate(-16deg) translate(70px, 10px); opacity: 0.75; }
	50% { transform: rotate(-20deg) translate(-45px, 25px); opacity: 1; }
	75% { transform: rotate(-17deg) translate(30px, -15px); opacity: 0.7; }
}

@keyframes fogDrift8 {
	0%, 100% { transform: rotate(6deg) translate(0, 0); opacity: 1; }
	35% { transform: rotate(8deg) translate(35px, 15px); opacity: 0.7; }
	60% { transform: rotate(4deg) translate(-50px, -10px); opacity: 1; }
	80% { transform: rotate(7deg) translate(15px, -20px); opacity: 0.8; }
}

@keyframes fogDrift9 {
	0%, 100% { transform: rotate(2deg) translate(0, 0); opacity: 1; }
	40% { transform: rotate(4deg) translate(60px, -6px); opacity: 0.7; }
	70% { transform: rotate(0deg) translate(-40px, 10px); opacity: 1; }
	90% { transform: rotate(3deg) translate(20px, -4px); opacity: 0.8; }
}

@keyframes fogDrift10 {
	0%, 100% { transform: rotate(-28deg) translate(0, 0); opacity: 1; }
	30% { transform: rotate(-26deg) translate(-40px, 18px); opacity: 0.7; }
	55% { transform: rotate(-30deg) translate(50px, -10px); opacity: 1; }
	80% { transform: rotate(-27deg) translate(-15px, 12px); opacity: 0.8; }
}

@keyframes fogDrift11 {
	0%, 100% { transform: rotate(-6deg) translate(0, 0); opacity: 1; }
	25% { transform: rotate(-4deg) translate(45px, 8px); opacity: 0.75; }
	60% { transform: rotate(-8deg) translate(-30px, -6px); opacity: 1; }
	85% { transform: rotate(-5deg) translate(15px, 10px); opacity: 0.8; }
}

@keyframes fogDrift12 {
	0%, 100% { transform: rotate(16deg) translate(0, 0); opacity: 1; }
	35% { transform: rotate(18deg) translate(55px, -12px); opacity: 0.7; }
	65% { transform: rotate(14deg) translate(-45px, 15px); opacity: 1; }
	85% { transform: rotate(17deg) translate(20px, -8px); opacity: 0.8; }
}

/* ===== SIDE FOG INJECTION — fog machine from left & right edges ===== */

/* --- Left side injections — rose gold fog machine --- */
.product-fog--l1 {
	width: 550px; height: 650px;
	top: 2%; left: -12%;
	border-radius: 20% 70% 30% 60% / 50% 40% 60% 50%;
	background: linear-gradient(to right, rgba(165,105,85,0.30) 0%, rgba(165,105,85,0.12) 35%, rgba(165,105,85,0.03) 60%, transparent 100%);
	filter: blur(55px);
	animation: fogInjectL1 24s ease-in-out infinite;
}

.product-fog--l2 {
	width: 450px; height: 500px;
	top: 32%; left: -10%;
	border-radius: 30% 60% 20% 70% / 60% 30% 70% 40%;
	background: linear-gradient(to right, rgba(158,98,78,0.26) 0%, rgba(158,98,78,0.10) 40%, rgba(158,98,78,0.02) 65%, transparent 100%);
	filter: blur(50px);
	animation: fogInjectL2 28s ease-in-out infinite;
}

.product-fog--l3 {
	width: 500px; height: 550px;
	top: 58%; left: -14%;
	border-radius: 25% 65% 35% 55% / 45% 55% 45% 55%;
	background: linear-gradient(to right, rgba(170,108,88,0.28) 0%, rgba(170,108,88,0.10) 35%, rgba(170,108,88,0.025) 60%, transparent 100%);
	filter: blur(52px);
	animation: fogInjectL3 32s ease-in-out infinite;
}

.product-fog--l4 {
	width: 650px; height: 250px;
	top: 18%; left: -6%;
	border-radius: 40% 80% 30% 70% / 70% 30% 80% 40%;
	background: linear-gradient(to right, rgba(175,112,92,0.20) 0%, rgba(175,112,92,0.06) 40%, transparent 70%);
	filter: blur(40px);
	animation: fogInjectL4 22s ease-in-out infinite;
}

/* --- Right side injections — rose gold fog machine --- */
.product-fog--r1 {
	width: 550px; height: 600px;
	top: 8%; right: -12%; left: auto;
	border-radius: 70% 20% 60% 30% / 40% 50% 40% 60%;
	background: linear-gradient(to left, rgba(175,112,92,0.30) 0%, rgba(175,112,92,0.12) 35%, rgba(175,112,92,0.03) 60%, transparent 100%);
	filter: blur(55px);
	animation: fogInjectR1 26s ease-in-out infinite;
}

.product-fog--r2 {
	width: 450px; height: 500px;
	top: 40%; right: -10%; left: auto;
	border-radius: 60% 30% 70% 20% / 30% 60% 30% 70%;
	background: linear-gradient(to left, rgba(162,102,82,0.26) 0%, rgba(162,102,82,0.10) 40%, rgba(162,102,82,0.02) 65%, transparent 100%);
	filter: blur(50px);
	animation: fogInjectR2 30s ease-in-out infinite;
}

.product-fog--r3 {
	width: 500px; height: 550px;
	top: 65%; right: -14%; left: auto;
	border-radius: 65% 25% 55% 35% / 55% 45% 55% 45%;
	background: linear-gradient(to left, rgba(155,95,75,0.28) 0%, rgba(155,95,75,0.10) 35%, rgba(155,95,75,0.025) 60%, transparent 100%);
	filter: blur(52px);
	animation: fogInjectR3 34s ease-in-out infinite;
}

.product-fog--r4 {
	width: 650px; height: 250px;
	top: 50%; right: -6%; left: auto;
	border-radius: 80% 40% 70% 30% / 30% 70% 40% 80%;
	background: linear-gradient(to left, rgba(168,106,86,0.20) 0%, rgba(168,106,86,0.06) 40%, transparent 70%);
	filter: blur(40px);
	animation: fogInjectR4 20s ease-in-out infinite;
}

/* --- Side injection animations — breathing/pulsing inward --- */
@keyframes fogInjectL1 {
	0%, 100% { transform: translateX(-15px) scaleX(1); opacity: 0.85; }
	30% { transform: translateX(45px) scaleX(1.2); opacity: 1; }
	55% { transform: translateX(15px) scaleX(1.05); opacity: 0.7; }
	80% { transform: translateX(-5px) scaleX(0.95); opacity: 0.9; }
}

@keyframes fogInjectL2 {
	0%, 100% { transform: translateX(-20px) scaleX(1); opacity: 0.8; }
	25% { transform: translateX(10px) scaleX(1.05); opacity: 0.9; }
	50% { transform: translateX(50px) scaleX(1.25); opacity: 1; }
	75% { transform: translateX(5px) scaleX(0.98); opacity: 0.7; }
}

@keyframes fogInjectL3 {
	0%, 100% { transform: translateX(-10px) scaleX(1); opacity: 0.8; }
	35% { transform: translateX(40px) scaleX(1.15); opacity: 1; }
	60% { transform: translateX(20px) scaleX(1.08); opacity: 0.75; }
	85% { transform: translateX(-8px) scaleX(0.92); opacity: 0.9; }
}

@keyframes fogInjectL4 {
	0%, 100% { transform: translateX(-10px) scaleX(1); opacity: 0.9; }
	40% { transform: translateX(55px) scaleX(1.3); opacity: 1; }
	70% { transform: translateX(20px) scaleX(1.1); opacity: 0.7; }
	85% { transform: translateX(0px) scaleX(1); opacity: 0.85; }
}

@keyframes fogInjectR1 {
	0%, 100% { transform: translateX(15px) scaleX(1); opacity: 0.85; }
	30% { transform: translateX(-45px) scaleX(1.2); opacity: 1; }
	55% { transform: translateX(-15px) scaleX(1.05); opacity: 0.7; }
	80% { transform: translateX(5px) scaleX(0.95); opacity: 0.9; }
}

@keyframes fogInjectR2 {
	0%, 100% { transform: translateX(20px) scaleX(1); opacity: 0.8; }
	25% { transform: translateX(-10px) scaleX(1.05); opacity: 0.9; }
	50% { transform: translateX(-50px) scaleX(1.25); opacity: 1; }
	75% { transform: translateX(-5px) scaleX(0.98); opacity: 0.7; }
}

@keyframes fogInjectR3 {
	0%, 100% { transform: translateX(10px) scaleX(1); opacity: 0.8; }
	35% { transform: translateX(-40px) scaleX(1.15); opacity: 1; }
	60% { transform: translateX(-20px) scaleX(1.08); opacity: 0.75; }
	85% { transform: translateX(8px) scaleX(0.92); opacity: 0.9; }
}

@keyframes fogInjectR4 {
	0%, 100% { transform: translateX(10px) scaleX(1); opacity: 0.9; }
	40% { transform: translateX(-55px) scaleX(1.3); opacity: 1; }
	70% { transform: translateX(-20px) scaleX(1.1); opacity: 0.7; }
	85% { transform: translateX(0px) scaleX(1); opacity: 0.85; }
}

/* ===== SHOP PAGES ===== */
.shop-page,
.shop-category-page {
	overflow: clip; /* clips fog like hidden, but keeps position:sticky working */
	position: relative;
	background: #000;
	min-height: 100vh;
}

/* Catalog landing page */
.shop-page {
	background: #000;
}

/* Category pages get the spotlight image directly at full opacity */
.shop-category-page {
	background: #000 url('../images/stage-spotlight.jpg') 50% 100% / 100% no-repeat fixed;
}

@media (max-width: 1024px) {
	.shop-category-page {
		background-attachment: scroll;
	}
}


/* ===== CATALOG LAYOUT — headline, gradients, tagline ===== */
.catalog-headline {
	font-family: 'Bowlby One SC', sans-serif;
	font-size: clamp(24px, 6vw, 57px); /* desktop 57px; scales down on phones (Erica: too big/bold) */
	color: #ffffff;
	letter-spacing: clamp(1px, 0.4vw, 4px);
	opacity: 1;
	text-align: center;
	text-transform: uppercase;
	padding: 60px 20px 12px;
}

.accordion-hero--catalog { margin-top: 12px; position: relative; }
.accordion-hero--catalog::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 25px; background: linear-gradient(#000000, transparent); z-index: 3; pointer-events: none; }
.accordion-hero--catalog::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; background: linear-gradient(transparent, #000000); z-index: 3; pointer-events: none; }

.catalog-below {
	padding: 31px 40px;
}

.catalog-tagline {
	font-size: 34px;
	color: #fff5f5;
	letter-spacing: 0px;
	opacity: 0.34;
	text-transform: uppercase;
	text-align: center;
}


/* ===== CURSOR EFFECT — magnetic particles canvas ===== */
.cursor-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
}

.shop-page::before,
.shop-category-page::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(ellipse at center, transparent 50%, rgba(180,160,130,0.12) 100%);
}

.shop-page::after,
.shop-category-page::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(800px 120px at 20% 15%, rgba(165,105,85,0.08) 0%, transparent 100%),
		radial-gradient(600px 80px at 55% 40%, rgba(155,95,75,0.07) 0%, transparent 100%),
		radial-gradient(700px 70px at 70% 65%, rgba(170,110,90,0.06) 0%, transparent 100%),
		radial-gradient(500px 140px at 35% 82%, rgba(160,100,80,0.07) 0%, transparent 100%),
		radial-gradient(900px 50px at 50% 30%, rgba(175,115,95,0.05) 0%, transparent 100%);
}

.shop-page .container,
.shop-category-page .container {
	position: relative;
	z-index: 1;
}

/* Breadcrumb */
.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	margin-bottom: 0;
	padding-top: 0;
	padding-left: var(--space-lg);
}

.breadcrumb a {
	color: var(--color-text-muted);
}

.breadcrumb a:hover {
	color: var(--color-accent);
}

.breadcrumb-sep {
	color: var(--color-border);
	font-size: 0.75rem;
}

.breadcrumb-current {
	color: var(--color-text);
}

/* Main layout: gallery left, info right */
.product-layout {
	display: grid;
	grid-template-columns: 1fr minmax(300px, 420px);
	gap: var(--space-2xl);
	align-items: start;
}

/* ===== GALLERY ===== */
.product-gallery {
	position: sticky;
	top: 55px;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-md);
	min-height: 0;
	min-width: 0;
	overflow: hidden;
}

.gallery-main {
	overflow: hidden;
	background: transparent;
	max-height: calc(100svh - 55px);
	min-height: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	cursor: zoom-in;
	order: 2;
	grid-column: 2;
}

.gallery-main img {
	width: 100%;
	height: auto;
	max-height: calc(100svh - 55px);
	object-fit: contain;
	object-position: center top;
	transition: transform 0.6s var(--ease-out);
}

.gallery-main:hover img {
	transform: none;
}

/* Inner zoom overlay — Satin Stitches-style hover zoom */
.gallery-zoom-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	transition: opacity 0.2s ease;
	border-radius: var(--radius-lg);
}

.gallery-zoom-overlay.active {
	opacity: 1;
}

/* Zoom button overlay */
.gallery-zoom-btn {
	position: absolute;
	bottom: var(--space-md);
	right: var(--space-md);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px;
	color: var(--color-text);
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out),
	            background 0.2s var(--ease-out);
	z-index: 2;
}

.gallery-main:hover .gallery-zoom-btn {
	opacity: 1;
	transform: translateY(0);
}

.gallery-zoom-btn:hover {
	background: rgba(154, 122, 58, 0.12);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Thumbnails — vertical column on left */
.gallery-thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	order: 1;
	max-height: calc(100svh - 55px);
	overflow-y: auto;
}

.thumb {
	width: 120px;
	height: 140px;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--color-bg-alt);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-out),
	            box-shadow var(--duration-fast) var(--ease-out);
	padding: 0;
}

.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.thumb:hover {
	border-color: rgba(200, 169, 110, 0.4);
}

.thumb.active {
	border-color: var(--color-accent);
	box-shadow: 0 0 12px rgba(200, 169, 110, 0.25);
}

/* ===== PRODUCT INFO ===== */
.product-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.product-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--color-accent);
	padding: 5px 14px;
	border: 1px solid var(--color-accent-dim);
	border-radius: var(--radius-xl);
	width: fit-content;
}

.product-title {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	/* Darker gold foil shimmer for white background */
	background: linear-gradient(
		90deg,
		#5a4018 0%, #8a6e3a 15%, #b89848 30%,
		#c8a855 50%, #b89848 70%, #8a6e3a 85%, #5a4018 100%
	);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: goldFoilSweep 3.5s ease-in-out infinite;
}

@keyframes goldFoilSweep {
	0% { background-position: 200% center; }
	100% { background-position: -200% center; }
}

/* ===== TRUST BADGES ===== */
.trust-badges {
	display: flex;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.trust-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.trust-badge svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

/* ===== PRICING ===== */
.product-price {
	display: flex;
	align-items: stretch;
	gap: var(--space-lg);
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.price-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.price-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.price-amount {
	font-size: var(--text-4xl);
	font-weight: 800;
	color: var(--color-text);
	line-height: 1;
}

.price-team {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding-left: var(--space-lg);
	border-left: 1px solid var(--color-border);
}

.price-team-label {
	font-size: 0.7rem;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.price-team-amount {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-accent);
	line-height: 1;
}

.price-team-note {
	font-size: 0.7rem;
	color: var(--color-text-muted);
}

/* ===== PRODUCTION TIMELINE ===== */
.production-timeline {
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: rgba(170,155,130,0.08);
}

.timeline-header {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.timeline-header svg {
	color: var(--color-accent);
}

.timeline-steps {
	display: flex;
	align-items: center;
	gap: 0;
	position: relative;
}

.timeline-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	position: relative;
	text-align: center;
}

/* Connecting line between dots */
.timeline-step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 5px;
	left: calc(50% + 8px);
	width: calc(100% - 16px);
	height: 1px;
	background: var(--color-border);
}

.timeline-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color-border);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.timeline-dot.active-dot {
	background: var(--color-accent);
	box-shadow: 0 0 8px rgba(200, 169, 110, 0.4);
}

.timeline-text {
	font-size: 0.65rem;
	color: var(--color-text-muted);
	line-height: 1.3;
	max-width: 90px;
}

.timeline-text strong {
	color: var(--color-accent);
}

/* ===== FABRIC SELECTORS ===== */
.fabric-selectors {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.fabric-section {
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: rgba(170,155,130,0.10);
}

.fabric-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
}

.fabric-section-header h3 {
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
}

.fabric-type {
	font-size: 0.7rem;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: 3px 10px;
	border: 1px solid var(--color-accent-dim);
	border-radius: var(--radius-xl);
}

.selected-label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
	min-height: 1.4em;
	transition: color var(--duration-fast) var(--ease-out);
}

.selected-label.has-selection {
	color: var(--color-text);
}

/* ===== SWATCH GRID ===== */
.swatch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
	gap: 8px;
	max-height: 240px;
	overflow-y: auto;
	padding-right: var(--space-xs);
}

.swatch-grid--compact {
	max-height: 180px;
}

/* Custom scrollbar */
.swatch-grid::-webkit-scrollbar {
	width: 4px;
}

.swatch-grid::-webkit-scrollbar-track {
	background: var(--color-bg-alt);
	border-radius: 2px;
}

.swatch-grid::-webkit-scrollbar-thumb {
	background: var(--color-border);
	border-radius: 2px;
}

.swatch-grid::-webkit-scrollbar-thumb:hover {
	background: var(--color-accent);
}

/* Individual swatch */
.swatch {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	cursor: pointer;
	position: relative;
	transition: transform var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out),
	            box-shadow var(--duration-fast) var(--ease-out);
	outline: none;
	padding: 0;
	overflow: hidden;
}

.swatch:hover {
	transform: scale(1.15);
	z-index: 2;
	border-color: rgba(200, 169, 110, 0.5);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.swatch:focus-visible {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.3);
}

.swatch.selected {
	border-color: var(--color-accent);
	box-shadow:
		0 0 0 2px var(--color-bg),
		0 0 0 4px var(--color-accent),
		0 0 16px rgba(200, 169, 110, 0.3);
	transform: scale(1.1);
	z-index: 3;
}

/* Checkmark on selected swatch */
.swatch.selected::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
}

.swatch.selected::before {
	content: '\2713';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	color: white;
	font-size: 16px;
	font-weight: 700;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Sequin photo swatches — no artificial sparkle needed, real photos used */

/* ===== IN THIS PHOTO ===== */
.in-photo {
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: rgba(170,155,130,0.06);
}

.in-photo h4 {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-accent);
	margin-bottom: var(--space-sm);
}

.in-photo ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-xl);
}

.in-photo li {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.in-photo li strong {
	color: var(--color-text);
}

/* ===== SELECTION SUMMARY ===== */
.selection-summary {
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: rgba(170,155,130,0.10);
}

.selection-summary h4 {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-accent);
	margin-bottom: var(--space-md);
}

.summary-row {
	display: flex;
	justify-content: space-between;
	padding: var(--space-xs) 0;
	font-size: var(--text-sm);
}

.summary-row + .summary-row {
	border-top: 1px solid rgba(170,155,130,0.20);
}

.summary-key {
	color: var(--color-text-muted);
}

.summary-val {
	color: var(--color-text);
	font-weight: 600;
}

/* ===== SIZE SELECTOR ===== */
.size-selector {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.size-selector-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.size-selector label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.size-chart-link {
	background: none;
	border: none;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--color-accent);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 0;
	transition: color var(--duration-fast) var(--ease-out);
}

.size-chart-link:hover {
	color: var(--color-accent-hover);
}

.size-selector select {
	appearance: none;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 14px 40px 14px 16px;
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-out),
	            box-shadow var(--duration-fast) var(--ease-out);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.size-selector select:hover,
.size-selector select:focus {
	border-color: var(--color-accent);
	outline: none;
	box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

/* ===== ADDON TOGGLE ===== */
.addon-section {
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-border);
}

.addon-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	cursor: pointer;
}

.addon-toggle input {
	display: none;
}

.addon-switch {
	width: 48px;
	height: 26px;
	border-radius: 13px;
	background: var(--color-border);
	position: relative;
	transition: background var(--duration-fast) var(--ease-out);
	flex-shrink: 0;
}

.addon-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--color-text);
	transition: transform var(--duration-fast) var(--ease-out);
}

.addon-toggle input:checked + .addon-switch {
	background: var(--color-accent);
}

.addon-toggle input:checked + .addon-switch::after {
	transform: translateX(22px);
	background: var(--color-black);
}

.addon-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.addon-info strong {
	font-size: var(--text-sm);
	color: var(--color-text);
}

.addon-info small {
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

/* ===== PRODUCT CTA ===== */
.product-cta {
	display: flex;
	gap: var(--space-md);
}

.btn-lg {
	padding: 18px 36px;
	font-size: var(--text-base);
}

/* ===== SWATCH REQUEST ===== */
.swatch-request {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	padding: var(--space-sm) 0;
}

.swatch-request svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

.swatch-request a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ===== ACCORDION DETAILS ===== */
.product-details {
	margin-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-lg);
}

.accordion-item {
	border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: var(--space-lg) 0;
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-out);
}

.accordion-trigger:hover {
	color: var(--color-accent);
}

.accordion-icon {
	color: var(--color-text-muted);
	transition: transform 0.3s var(--ease-out), color 0.2s var(--ease-out);
	flex-shrink: 0;
}

.accordion-item.open .accordion-icon {
	transform: rotate(180deg);
	color: var(--color-accent);
}

.accordion-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s var(--ease-out), padding 0.4s var(--ease-out);
	padding: 0;
}

.accordion-item.open .accordion-panel {
	max-height: 600px;
	padding-bottom: var(--space-xl);
}

.accordion-panel p {
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-md);
	font-size: var(--text-sm);
}

.accordion-panel p:last-child {
	margin-bottom: 0;
}

.included-list {
	list-style: none;
	margin-bottom: var(--space-md);
}

.included-list li {
	color: var(--color-text-muted);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid rgba(170,155,130,0.15);
	padding-left: var(--space-lg);
	position: relative;
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
}

.included-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent);
	transform: translateY(-50%);
}

.included-list li:last-child {
	border-bottom: none;
}

.included-list li strong {
	color: var(--color-text);
}

.not-included {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	font-style: italic;
}

.disclaimer-text {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	font-style: italic;
	opacity: 0.8;
}

/* Size chart table */
.size-chart {
	overflow-x: auto;
	margin-bottom: var(--space-lg);
}

.size-chart table {
	width: 100%;
	border-collapse: collapse;
}

.size-chart th,
.size-chart td {
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-sm);
}

.size-chart th {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--color-accent);
	font-weight: 600;
}

.size-chart td {
	color: var(--color-text-muted);
}

.size-chart tbody tr:hover td {
	color: var(--color-text);
	background: rgba(170,155,130,0.08);
}

/* ===== QUALITY PROMISE ===== */
.quality-promise {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.promise-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

.promise-item {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) 0;
}

.promise-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: rgba(170,155,130,0.10);
	color: var(--color-accent);
	flex-shrink: 0;
	transition: border-color 0.3s var(--ease-out),
	            box-shadow 0.3s var(--ease-out);
}

.promise-item:hover .promise-icon {
	border-color: var(--color-accent);
	box-shadow: 0 0 20px rgba(200, 169, 110, 0.15);
}

.promise-item h4 {
	font-size: var(--text-base);
	margin-bottom: var(--space-sm);
}

.promise-item p {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

/* ===== PHOTOSWIPE THEME ===== */
.pswp {
	--pswp-bg: rgba(255, 255, 255, 0.92);
}

.pswp__bg {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.pswp__button--close,
.pswp__button--zoom,
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
	color: var(--color-text, #1a1510);
}

.pswp__counter {
	color: var(--color-text-muted, #706050);
}

.pswp__img {
	border-radius: var(--radius-md, 8px);
	box-shadow:
		0 0 60px rgba(154, 122, 58, 0.10),
		0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ===== SWIPER HOVER STYLES (product grid cards) ===== */
.product-card-swiper {
	width: 100%;
	height: 100%;
}

.product-card-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product-card-swiper .swiper-button-prev,
.product-card-swiper .swiper-button-next {
	opacity: 0;
	transition: opacity 0.25s ease;
	color: #fff;
	background: rgba(0, 0, 0, 0.35);
	width: 32px;
	height: 32px;
	border-radius: 50%;
}

.product-card-swiper .swiper-button-prev::after,
.product-card-swiper .swiper-button-next::after {
	font-size: 14px;
}

.product-card-swiper .swiper-pagination {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.product-card-swiper .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.5;
}

.product-card-swiper .swiper-pagination-bullet-active {
	opacity: 1;
}

.product-card:hover .product-card-swiper .swiper-button-prev,
.product-card:hover .product-card-swiper .swiper-button-next,
.product-card:hover .product-card-swiper .swiper-pagination {
	opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
	.product-layout {
		gap: var(--space-2xl);
	}

	.promise-grid {
		gap: var(--space-lg);
	}
}

@media (max-width: 768px) {
	/* Hide cursor spotlight on mobile — no mouse = permanent dark overlay */
	.cursor-spotlight {
		display: none;
	}

	.product-page {
		padding-top: 60px;
	}

	.product-layout {
		grid-template-columns: 1fr;
		gap: var(--space-2xl);
	}

	.product-gallery {
		position: static;
		grid-template-columns: 1fr;
	}

	.gallery-main {
		aspect-ratio: 3 / 4;
		height: auto;        /* Override desktop calc(100svh - 55px) */
		max-height: none;
		order: 1;
		grid-column: auto;
	}

	.gallery-main img {
		max-height: none;    /* Override desktop calc(100svh - 55px) constraint */
	}

	.gallery-thumbs {
		flex-direction: row;
		justify-content: center;
		order: 2;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.gallery-thumbs .thumb {
		width: 64px;
		height: 80px;
		flex-shrink: 0;
	}

	/* Show zoom button on mobile (no hover) */
	.gallery-zoom-btn {
		opacity: 1;
		transform: translateY(0);
	}

	/* No hover zoom on mobile — tap to open PhotoSwipe instead */
	.gallery-zoom-overlay {
		display: none;
	}

	.trust-badges {
		gap: var(--space-md);
	}

	.product-price {
		flex-direction: column;
		gap: var(--space-md);
	}

	.price-team {
		padding-left: 0;
		border-left: none;
		padding-top: var(--space-md);
		border-top: 1px solid var(--color-border);
	}

	.production-timeline {
		padding: var(--space-md);
	}

	.timeline-steps {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.timeline-step {
		flex-direction: row;
		align-items: center;
		gap: var(--space-sm);
	}

	.timeline-step:not(:last-child)::after {
		display: none;
	}

	.timeline-text {
		max-width: none;
		font-size: var(--text-sm);
	}

	.product-cta {
		flex-direction: column;
	}

	.product-cta .btn {
		width: 100%;
		text-align: center;
	}

	.in-photo ul {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.swatch-grid {
		grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
		max-height: 200px;
	}

	.product-details {
		max-width: 100%;
	}

	.promise-grid {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.promise-item {
		padding: var(--space-lg) var(--space-md);
	}

}

@media (max-width: 480px) {
	.trust-badges {
		flex-direction: column;
		gap: var(--space-sm);
	}
}

/* Hide heavy fog layers on small screens — they overflow way past viewport and waste GPU */
@media (max-width: 768px) {
	.product-fog--l1, .product-fog--l2, .product-fog--l3, .product-fog--l4,
	.product-fog--r1, .product-fog--r2, .product-fog--r3, .product-fog--r4 {
		display: none;
	}
	.product-fog {
		opacity: 0.5; /* Soften remaining fog on mobile — less GPU overhead */
	}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
	.anim-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.product-title {
		animation: none;
		background-position: 0% center;
	}

	.swatch:hover,
	.swatch.selected {
		transform: none;
	}

	.accordion-panel {
		transition: none;
	}

}

/* ===== COLORWAY SELECTOR (Catalog Product template) ===== */
.colorway-selector {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.colorway-header {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.colorway-title {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.colorway-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
	transition: color 0.2s ease;
}

.colorway-swatches {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.colorway-swatch {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid var(--color-border);
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	outline: none;
}

.colorway-swatch:hover {
	border-color: rgba(200,169,110,0.5);
	transform: scale(1.1);
}

.colorway-swatch:focus-visible {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(200,169,110,0.3);
}

.colorway-swatch.active {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Gallery crossfade for colorway switching */
.gallery-main img {
	transition: opacity 0.2s ease;
}

/* Product subtitle (catalog number) */
.product-subtitle {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	margin-top: -4px;
}

/* Colorway mobile adjustments */
@media (max-width: 768px) {
	.colorway-swatches {
		justify-content: center;
	}

	.colorway-header {
		justify-content: center;
	}
}

/* ===== CATEGORY PAGES — SOFT BEIGE (Scott, July 2026) =====
   Scoped to .shop-category-page only; the /catalog/ hub stays black. */
.shop-category-page {
	background: #f6f1e8;
	min-height: 100vh;
}
.shop-category-page::before,
.shop-category-page::after { display: none; }

.shop-category-page .breadcrumb a { color: #8a7f6c; }
.shop-category-page .breadcrumb a:hover { color: #a8894e; }
.shop-category-page .breadcrumb-sep { color: #c4b8a2; }
.shop-category-page .breadcrumb-current { color: #1a1408; }

.shop-category-page .shop-category-title { color: #1a1408; }
.shop-category-page .shop-category-header p { color: #7a7264; }

.shop-category-page .catalog-item-count { color: #7a7264; }
.shop-category-page .catalog-search-input {
	color: #1a1408;
	border-color: rgba(26, 20, 8, 0.2);
	background: transparent;
}
.shop-category-page .catalog-search-input::placeholder { color: #a89d88; }
.shop-category-page .catalog-search-icon { color: #7a7264; }
.shop-category-page .catalog-view-btn { color: #c4b8a2; }
.shop-category-page .catalog-view-btn.active,
.shop-category-page .catalog-view-btn:hover { color: #1a1408; }
.shop-category-page .catalog-sort-btn,
.shop-category-page .catalog-filter-btn { color: #1a1408; border-color: rgba(26, 20, 8, 0.2); }
.shop-category-page .catalog-sort-dropdown {
	background: #ffffff;
	border: 1px solid #e8dfcd;
	box-shadow: 0 12px 32px rgba(26, 20, 8, 0.12);
}
.shop-category-page .catalog-sort-option { color: #1a1408; }
.shop-category-page .catalog-sort-option:hover,
.shop-category-page .catalog-sort-option.active { background: #f6f1e8; color: #a8894e; }

.shop-category-page .product-card-name { color: #1a1408; }
.shop-category-page .product-card-price { color: #7a7264; }

.shop-category-page .shop-empty,
.shop-category-page .shop-empty p { color: #7a7264; }


/* Mobile GPU diet (July 2026 — phone Safari stability): no blurred fog layers on phones */
@media (max-width: 767px) {
	.product-fog { display: none; }
}


/* ===== July 2026 audit fixes ===== */
/* Faint/invisible text on the white product pages (Erica: "descriptions are
   too faint"; audit: white-on-white) — dark ink overrides */
.product-page .product-tagline { color: #4a4238; }
.product-page .fabric-section h3 { color: #1a1510; }
.product-page .in-photo p { color: #4a4238; }
.product-page .quality-promise h4 { color: #1a1510; }
.product-page .breadcrumb-sep { color: #b0a48e; }

/* Erica: more space between the header's white stripe and the page headline */
@media (max-width: 768px) {
	.catalog-headline { padding-top: 100px; }
}