/* BOVANA — static site styles */
@font-face {
  font-family: "Transcity";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Transcity.otf") format("opentype");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/cormorantgaramond/v16/co3YmX5slCNuHLi8bLeY9MK7whWMhyjornFLsS6V7w.woff2") format("woff2");
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/karla/v31/qkBbXvYC6trAT55ZBi1ueQVIjQTD-JoEJA.woff2") format("woff2");
}

:root {
  --emerald-deep: oklch(0.30 0.08 165);
  --emerald: oklch(0.48 0.11 165);
  --gold: oklch(0.58 0.13 75);
  --gold-soft: oklch(0.72 0.12 80);
  --cream: oklch(0.22 0.05 165);
  --background: oklch(0.985 0.008 85);
  --foreground: oklch(0.22 0.05 165);
  --card: oklch(0.995 0.005 85);
  --primary-foreground: oklch(0.985 0.008 85);
  --muted: oklch(0.95 0.015 85);
  --muted-foreground: oklch(0.40 0.04 165);
  --border: color-mix(in oklab, var(--cream) 16%, transparent);
  --destructive: oklch(0.55 0.20 27);
  --font-display: "Cormorant Garamond", ui-serif, Georgia, serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-brand: "Transcity", "Cormorant Garamond", ui-serif, serif;
}

* { box-sizing: border-box; border-color: var(--border); margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in oklab, var(--emerald) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.5;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: color-mix(in oklab, var(--gold) 50%, transparent); color: var(--emerald-deep); }

/* utilities */
.container-x { width: 100%; margin-inline: auto; padding-inline: 1.25rem; max-width: 1280px; }
@media (min-width: 768px) { .container-x { padding-inline: 2rem; } }
.text-balance { text-wrap: balance; }
.eyebrow { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 500; display: inline-block; }
.gold-divider { display: inline-block; width: 3rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin-top: 1.5rem; }
.hairline { border-top: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); }

@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.gold-shimmer {
  background: linear-gradient(90deg, var(--gold) 0%, var(--emerald-deep) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
.italic { font-style: italic; }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, border-color .4s, backdrop-filter .4s; background: transparent; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(16px); border-bottom-color: var(--border); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 5rem; }
.brand { display: flex; align-items: center; gap: .5rem; }
.brand-name { font-family: var(--font-brand); font-size: 1.5rem; letter-spacing: .04em; color: var(--cream); transition: color .2s; }
.brand:hover .brand-name { color: var(--gold); }
.brand-tag { display: none; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in oklab, var(--gold) 80%, transparent); border-left: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); padding-left: .5rem; }
@media (min-width: 640px) { .brand-tag { display: inline; } }
.nav-main { display: none; align-items: center; gap: 2.5rem; }
@media (min-width: 768px) { .nav-main { display: flex; } }
.nav-link { position: relative; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 80%, transparent); transition: color .2s; }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.cart-btn { position: relative; padding: .625rem; color: var(--cream); transition: color .2s; }
.cart-btn:hover { color: var(--gold); }
.cart-count { position: absolute; top: 4px; right: 4px; background: var(--gold); color: var(--primary-foreground); font-size: 10px; width: 16px; height: 16px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.cart-count.hidden { display: none; }
.menu-btn { display: inline-flex; padding: .625rem; color: var(--cream); }
@media (min-width: 768px) { .menu-btn { display: none; } }
.mobile-menu { display: none; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--background) 95%, transparent); backdrop-filter: blur(16px); }
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: 1.5rem; }
.mobile-menu a { padding: .75rem 0; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--cream) 90%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--gold); }

main { padding-top: 5rem; }

/* Footer */
.site-footer { margin-top: 8rem; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--background) 60%, transparent); }
.site-footer .grid { display: grid; gap: 3rem; padding-block: 5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .site-footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand h3 { font-family: var(--font-brand); font-size: 1.875rem; color: var(--cream); }
.footer-brand p.body { margin-top: 1.5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; max-width: 24rem; }
.social { display: flex; gap: 1rem; margin-top: 1.5rem; }
.social a { width: 40px; height: 40px; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: color-mix(in oklab, var(--cream) 70%, transparent); transition: color .2s, border-color .2s; }
.social a:hover { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.footer-col p.label { margin-bottom: 1rem; }
.footer-col ul { display: grid; gap: .75rem; font-size: .875rem; color: color-mix(in oklab, var(--cream) 80%, transparent); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; } }
.footer-bottom .legal { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); }
.footer-bottom .legal .gold { color: var(--gold); }
.footer-bottom .copy { font-size: 12px; color: var(--muted-foreground); }

/* Legal pages */
.legal-page { padding-block: 4rem 6rem; }
.legal-page h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); color: var(--cream); margin-top: 1rem; }
.legal-updated { margin-top: 1.5rem; font-size: .875rem; color: var(--muted-foreground); }
.legal-body { margin-top: 3rem; max-width: 42rem; }
.legal-body > p:first-child { margin-top: 0; }
.legal-body h2 { font-size: 1.125rem; color: var(--cream); margin-top: 2.5rem; margin-bottom: .5rem; font-weight: 500; }
.legal-body p { margin-top: .875rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-weight: 300; line-height: 1.7; font-size: .9375rem; }
.legal-body ul { margin-top: .875rem; padding-left: 1.25rem; list-style: disc; }
.legal-body li { margin-top: .5rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-weight: 300; line-height: 1.65; font-size: .9375rem; }
.legal-body a { color: var(--gold); border-bottom: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); }
.legal-body a:hover { color: var(--cream); }
.legal-body strong { color: var(--cream); font-weight: 500; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 2rem; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; transition: all .25s; cursor: pointer; border: 1px solid transparent; }
.btn-gold { background: var(--gold); color: var(--primary-foreground); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { border-color: color-mix(in oklab, var(--foreground) 25%, transparent); color: var(--foreground); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Hero */
.hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; margin-top: -5rem; padding-top: 5rem; }
.hero .bg { position: absolute; inset: 0; z-index: -1; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.hero .bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in oklab, var(--background) 95%, transparent), color-mix(in oklab, var(--background) 75%, transparent), color-mix(in oklab, var(--background) 30%, transparent)); }
.hero .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--background), transparent, color-mix(in oklab, var(--background) 40%, transparent)); }
.hero .inner { position: relative; z-index: 1; padding-block: 5rem; }
.hero-head { max-width: 42rem; animation: fade-up 1.2s cubic-bezier(.22,1,.36,1) both; }
.hero h1 { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); line-height: .95; color: var(--cream); margin-top: 1.5rem; }
.hero p.lede { margin-top: 2rem; font-size: 1.125rem; color: color-mix(in oklab, var(--foreground) 75%, transparent); max-width: 36rem; line-height: 1.6; font-weight: 300; }
@media (min-width: 768px) { .hero p.lede { font-size: 1.25rem; } }
.hero-cta { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hero-cta { flex-direction: row; } }
.scroll-tag { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: color-mix(in oklab, var(--foreground) 50%, transparent); animation: fade-up 1s ease 1.5s both; }

/* Section helpers */
section { padding-block: 6rem; }
@media (min-width: 768px) { section { padding-block: 8rem; } }
section.bordered-top { border-top: 1px solid var(--border); }
section.bordered-bottom { border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 42rem; margin-inline: auto; }
.section-head h2 { font-size: clamp(2.25rem, 5vw, 4rem); color: var(--cream); margin-top: 1rem; }

/* Highlights grid */
.highlights { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: color-mix(in oklab, var(--border) 60%, transparent); border: 1px solid var(--border); }
@media (min-width: 768px) { .highlights { grid-template-columns: repeat(3, 1fr); } }
.highlights .cell { background: var(--card); padding: 2rem; transition: background .3s; }
@media (min-width: 1024px) { .highlights .cell { padding: 2.5rem; } }
.highlights a.cell:hover { background: color-mix(in oklab, var(--emerald-deep) 8%, var(--card)); }
.highlights .status { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-foreground); }
.highlights .status.live { color: var(--gold); }
.highlights h3 { margin-top: 1rem; font-size: 1.5rem; color: var(--cream); }
@media (min-width: 768px) { .highlights h3 { font-size: 1.875rem; } }
.highlights .explore { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* Featured products */
.featured-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; justify-content: space-between; }
@media (min-width: 768px) { .featured-head { flex-direction: row; align-items: end; } }
.view-all { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); padding-bottom: 4px; display: inline-flex; align-items: center; gap: .5rem; }

.product-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 3.5rem; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

/* Product card */
.product-card { display: block; transition: transform .4s; position: relative; }
.product-card:hover { transform: translateY(-4px); }
.product-card.disabled { pointer-events: none; }
.product-card .thumb { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card); }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.product-card:hover .thumb img { transform: scale(1.05); }
.product-card .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--background) 80%, transparent), transparent 60%); pointer-events: none; }
.badge-popular { position: absolute; top: 1rem; left: 1rem; background: var(--gold); color: var(--primary-foreground); padding: .25rem .625rem; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; z-index: 1; }
.coming-soon-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--background) 70%, transparent); backdrop-filter: blur(4px); z-index: 1; }
.coming-soon-overlay span { border: 1px solid color-mix(in oklab, var(--gold) 60%, transparent); color: var(--gold); padding: .5rem 1.25rem; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.product-card .meta { padding-top: 1.25rem; padding-bottom: .5rem; }
.product-card h3 { margin-top: .5rem; font-size: 1.5rem; color: var(--cream); transition: color .2s; }
.product-card:hover h3 { color: var(--gold); }
.product-card .tagline { font-size: 12px; color: var(--muted-foreground); margin-top: .375rem; font-style: italic; }
.product-card .row { margin-top: 1rem; display: flex; align-items: end; justify-content: space-between; }
.product-card .row .price { color: var(--cream); font-weight: 500; }
.product-card .row .view { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); padding-bottom: 2px; }

/* Why us */
.why { position: relative; overflow: hidden; }
.why .bg { position: absolute; inset: 0; z-index: -1; opacity: .25; }
.why .bg img { width: 100%; height: 100%; object-fit: cover; }
.why .bg::after { content: ''; position: absolute; inset: 0; background: color-mix(in oklab, var(--background) 80%, transparent); }
.why .grid4 { margin-top: 5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 640px) { .why .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why .grid4 { grid-template-columns: repeat(4, 1fr); } }
.why .item { text-align: center; }
.why .icon { width: 56px; height: 56px; margin: 0 auto; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); }
.why h3 { margin-top: 1.5rem; font-size: 1.5rem; color: var(--cream); }
.why p { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }

/* Experience */
.experience { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .experience { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.experience .img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.experience .img img { width: 100%; height: 100%; object-fit: cover; }
.experience .img::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 20%, transparent); }
.experience h2 { font-size: clamp(2.25rem, 5vw, 4rem); color: var(--cream); margin-top: 1rem; }
.experience p { margin-top: 2rem; font-size: 1.125rem; color: color-mix(in oklab, var(--cream) 80%, transparent); line-height: 1.6; font-weight: 300; }
.kv-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.kv { border-left: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); padding-left: 1rem; }
.kv .v { margin-top: .5rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); }

/* Testimonials */
.tgrid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .tgrid { grid-template-columns: repeat(3, 1fr); } }
.tcard { border: 1px solid var(--border); padding: 2.5rem; height: 100%; background: color-mix(in oklab, var(--card) 40%, transparent); transition: border-color .2s; }
.tcard:hover { border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.tcard .q { color: var(--gold); font-size: 1.5rem; font-family: var(--font-display); }
.tcard .body { color: color-mix(in oklab, var(--cream) 90%, transparent); font-weight: 300; font-style: italic; line-height: 1.6; }
.tcard .who { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.tcard .who .name { font-family: var(--font-display); font-size: 1.125rem; color: var(--cream); }
.tcard .who .city { font-size: 12px; color: var(--muted-foreground); letter-spacing: .1em; text-transform: uppercase; margin-top: .25rem; }

/* FAQ */
.faq-list { margin-top: 4rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-list details { padding: 1.5rem .5rem; border-bottom: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: none; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; gap: 1rem; justify-content: space-between; align-items: start; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary h3 { font-size: 1.25rem; color: var(--cream); }
@media (min-width: 768px) { .faq-list summary h3 { font-size: 1.5rem; } }
.faq-list summary .toggle { color: var(--gold); font-size: 1.5rem; line-height: 1; transition: transform .2s; }
.faq-list details[open] summary .toggle { transform: rotate(45deg); }
.faq-list details p { margin-top: 1rem; color: color-mix(in oklab, var(--cream) 80%, transparent); line-height: 1.6; font-weight: 300; max-width: 48rem; }

/* CTA */
.cta-center { text-align: center; }
.cta-center h2 { font-size: clamp(2.25rem, 5vw, 4rem); color: var(--cream); max-width: 36rem; margin-inline: auto; }
.cta-center .btn { margin-top: 2.5rem; }

/* About */
.about-hero { padding-block: 5rem 7rem; text-align: center; }
.about-hero h1 { font-size: clamp(3rem, 7vw, 5rem); color: var(--cream); margin-top: 1rem; max-width: 48rem; margin-inline: auto; }
.about-split { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; padding-bottom: 5rem; }
@media (min-width: 1024px) { .about-split { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.about-split .img { aspect-ratio: 4 / 5; overflow: hidden; }
.about-split .img img { width: 100%; height: 100%; object-fit: cover; }
.about-split h2 { margin-top: .75rem; font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); }
.about-split p { margin-top: 1.5rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-weight: 300; line-height: 1.6; }
.steps { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { border-left: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); padding-left: 1.5rem; }
.step .num { font-family: var(--font-display); font-size: 3rem; }
.step h3 { margin-top: .75rem; font-size: 1.5rem; color: var(--cream); }
.step p { margin-top: .75rem; font-size: .875rem; color: color-mix(in oklab, var(--cream) 75%, transparent); line-height: 1.6; }
.promise { padding-block: 6rem; text-align: center; max-width: 36rem; margin-inline: auto; }
.promise h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); margin-top: 1rem; }
.promise .sig { margin-top: 1.5rem; color: var(--muted-foreground); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }

/* Shop */
.shop-hero { padding-block: 5rem 7rem; text-align: center; }
.shop-hero h1 { font-size: clamp(3rem, 7vw, 5rem); color: var(--cream); margin-top: 1rem; }
.shop-hero p { margin-top: 1.5rem; color: color-mix(in oklab, var(--cream) 70%, transparent); max-width: 36rem; margin-inline: auto; font-weight: 300; }
.shop-tools { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); justify-content: space-between; }
@media (min-width: 768px) { .shop-tools { flex-direction: row; align-items: center; } }
.cat-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-btn { padding: .5rem 1rem; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; border: 1px solid var(--border); color: color-mix(in oklab, var(--cream) 80%, transparent); transition: border-color .2s, background .2s, color .2s; }
.cat-btn:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.cat-btn.active { border-color: var(--gold); background: var(--gold); color: var(--primary-foreground); }
.sort-row { display: flex; align-items: center; gap: .75rem; }
.sort-row label { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-foreground); }
.sort-row select { background: transparent; border: 1px solid var(--border); padding: .5rem .75rem; font-size: 12px; color: var(--cream); }
.sort-row select:focus { outline: none; border-color: var(--gold); }
#shop-grid { margin-top: 3rem; }

/* Product detail */
.crumb { display: inline-flex; align-items: center; gap: .5rem; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-foreground); }
.crumb:hover { color: var(--gold); }
.product-detail { display: grid; grid-template-columns: 1fr; gap: 3rem; padding-bottom: 5rem; }
@media (min-width: 1024px) { .product-detail { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.product-detail .img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--card); }
.product-detail .img img { width: 100%; height: 100%; object-fit: cover; }
.product-detail .img::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 20%, transparent); }
.product-detail h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); color: var(--cream); margin-top: .75rem; }
.product-detail .tagline { color: color-mix(in oklab, var(--cream) 70%, transparent); font-style: italic; margin-top: .75rem; }
.product-detail .desc { margin-top: 1.5rem; color: color-mix(in oklab, var(--cream) 85%, transparent); font-weight: 300; line-height: 1.6; }
.spec-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-grid ul { margin-top: .75rem; display: grid; gap: .375rem; }
.spec-grid li { font-size: .875rem; color: color-mix(in oklab, var(--cream) 85%, transparent); }
.badges { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.badges span { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); color: var(--gold); padding: .375rem .75rem; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.pack-best-seller { position: absolute; top: .5rem; right: .5rem; background: var(--gold); color: var(--primary-foreground); padding: .2rem .45rem; font-size: 7px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; line-height: 1.2; z-index: 1; }
.pack-discount-tag { display: inline-block; background: color-mix(in oklab, var(--gold) 20%, transparent); border: 1px solid color-mix(in oklab, var(--gold) 50%, transparent); color: var(--gold); padding: .15rem .4rem; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin-bottom: .35rem; }
.pack-prices { margin-top: .35rem; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.pack-price-sale { font-family: var(--font-display, serif); font-size: 1.5rem; color: var(--cream); line-height: 1.1; }
.pack-price-original { font-size: 12px; color: var(--muted-foreground); text-decoration: line-through; opacity: .75; }
.unit-price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.unit-price-block .pack-discount-tag { margin-bottom: 0; }
.unit-price-block .price { font-size: 2rem; color: var(--cream); font-weight: 500; }
.price-row { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; align-items: end; justify-content: space-between; }
.price-row .price { margin-top: .5rem; font-family: var(--font-display); font-size: 2.25rem; color: var(--cream); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); }
.qty button { padding: .75rem; transition: color .2s; }
.qty button:hover { color: var(--gold); }
.qty .val { padding-inline: 1.25rem; color: var(--cream); font-variant-numeric: tabular-nums; }
.add-cart { margin-top: 1.5rem; width: 100%; padding: 1rem; background: var(--gold); color: var(--primary-foreground); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 500; transition: background .2s; }
.add-cart:hover { background: var(--gold-soft); }
.note { margin-top: 1rem; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); text-align: center; }

/* Cart */
.cart-wrap { padding-block: 5rem; }
.cart-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .cart-grid { grid-template-columns: 1fr 400px; } }
.cart-items { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cart-row { padding: 1.5rem 0; display: flex; gap: 1.25rem; align-items: center; border-bottom: 1px solid var(--border); }
.cart-row:last-child { border-bottom: none; }
.cart-row .thumb { width: 96px; height: 96px; flex-shrink: 0; overflow: hidden; background: var(--card); }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row .info { flex: 1; min-width: 0; }
.cart-row h3 { font-size: 1.25rem; color: var(--cream); }
.cart-row .unit { font-size: 12px; color: var(--muted-foreground); margin-top: .25rem; letter-spacing: .05em; }
.cart-row .total { width: 96px; text-align: right; color: var(--cream); font-variant-numeric: tabular-nums; }
.cart-row .remove { color: var(--muted-foreground); padding: .25rem; }
.cart-row .remove:hover { color: var(--destructive); }
.summary { border: 1px solid var(--border); padding: 2rem; background: color-mix(in oklab, var(--card) 40%, transparent); height: fit-content; }
.summary .row { display: flex; justify-content: space-between; color: color-mix(in oklab, var(--cream) 80%, transparent); }
.summary .row.total { border-top: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); padding-top: 1rem; margin-top: 1rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--cream); }
.summary .gold { color: var(--gold); }
.summary .btn-block { margin-top: 1.5rem; width: 100%; }
.empty { text-align: center; padding-block: 5rem; }
.empty p { color: color-mix(in oklab, var(--cream) 70%, transparent); }

/* Forms */
.form { border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 40%, transparent); padding: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .form { padding: 2.5rem; } }
.form .field label { display: block; margin-bottom: .5rem; }
.form input, .form textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border); padding-block: .75rem; color: var(--cream); transition: border-color .2s; }
.form textarea { border: 1px solid var(--border); padding: 1rem; resize: none; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; padding-block: 5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 6rem; } }
.contact-info h1 { font-size: clamp(3rem, 6vw, 4rem); color: var(--cream); margin-top: 1rem; }
.contact-info > p { margin-top: 1.5rem; color: color-mix(in oklab, var(--cream) 80%, transparent); font-weight: 300; line-height: 1.6; max-width: 28rem; }
.contact-meta { margin-top: 3rem; display: grid; gap: 1.5rem; }
.contact-meta .item { display: flex; align-items: start; gap: 1rem; }
.contact-meta .icon { width: 40px; height: 40px; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.contact-meta .item p:last-child { margin-top: .25rem; color: var(--cream); }

/* Affiliate */
.aff-hero { padding-block: 8rem 4rem; }
.aff-hero h1 { font-size: clamp(3rem, 7vw, 5rem); color: var(--cream); margin-top: 1rem; max-width: 56rem; }
.aff-hero p { margin-top: 1.5rem; max-width: 36rem; color: color-mix(in oklab, var(--cream) 80%, transparent); font-weight: 300; line-height: 1.6; font-size: 1.125rem; }
.aff-hero .ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.aff-section { padding-block: 4rem; border-top: 1px solid var(--border); }
.aff-section h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); max-width: 36rem; margin-top: .75rem; }
.benefits { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(4, 1fr); } }
.benefit { border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 40%, transparent); padding: 2rem; transition: border-color .2s; }
.benefit:hover { border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.benefit .icon { color: var(--gold); }
.benefit h3 { margin-top: 1.5rem; font-size: 1.25rem; color: var(--cream); }
.benefit p { margin-top: .75rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.steps-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.step-card { border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 40%, transparent); padding: 2rem; }
.step-card .num { font-family: var(--font-brand); font-size: 1.875rem; color: var(--gold); }
.step-card h3 { margin-top: 1rem; font-size: 1.25rem; color: var(--cream); }
.step-card p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.aff-split { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1024px) { .aff-split { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.aff-split ul { display: grid; gap: 1rem; }
.aff-split li { display: flex; gap: .75rem; align-items: start; color: var(--cream); }
.aff-split li svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }

/* Age gate */
.age-gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--background) 95%, transparent); backdrop-filter: blur(16px); padding: 1rem; animation: fade-up .4s ease both; }
.age-gate .panel { position: relative; max-width: 28rem; width: 100%; border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent); background: var(--card); padding: 2rem; text-align: center; }
@media (min-width: 768px) { .age-gate .panel { padding: 2.5rem; } }
.age-gate .panel::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); height: 1px; width: 96px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.age-gate h2 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 3rem); color: var(--cream); }
.age-gate p { margin-top: 1.25rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.age-gate .actions { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .age-gate .actions { flex-direction: row; } }
.age-gate .actions > * { flex: 1; padding: .75rem 1.5rem; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; transition: all .2s; }
.age-gate .actions .accept { background: var(--gold); color: var(--primary-foreground); }
.age-gate .actions .accept:hover { background: var(--gold-soft); }
.age-gate .actions .exit { border: 1px solid var(--border); color: var(--muted-foreground); }
.age-gate .actions .exit:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.age-gate .micro { margin-top: 1.5rem; font-size: 10px; color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); letter-spacing: .1em; text-transform: uppercase; }

/* Toast */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 200; display: grid; gap: .5rem; }
.toast { background: var(--card); border: 1px solid var(--border); padding: 1rem 1.25rem; min-width: 240px; max-width: 360px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.2); animation: fade-up .3s ease both; }
.toast.error { border-color: var(--destructive); }
.toast .title { font-weight: 500; color: var(--cream); }
.toast .desc { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }

/* 404 */
.notfound { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.notfound .inner { text-align: center; max-width: 28rem; }
.notfound h1 { margin-top: 1rem; font-family: var(--font-display); font-size: 4.5rem; color: var(--cream); }

/* Product gallery / auto slider */
.product-detail .gallery img { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.product-detail .gallery img.active { opacity: 1; }
.product-detail .gallery .dots { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: .5rem; z-index: 2; }
.product-detail .gallery .dot { width: 1rem; height: .375rem; padding: 0; border: 0; background: color-mix(in oklab, var(--cream) 40%, transparent); cursor: pointer; transition: all .3s ease; }
.product-detail .gallery .dot:hover { background: color-mix(in oklab, var(--cream) 70%, transparent); }
.product-detail .gallery .dot.active { width: 2rem; background: var(--gold); }
.product-detail .gallery .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--background) 60%, transparent); color: var(--cream); border: 1px solid color-mix(in oklab, var(--gold) 30%, transparent); backdrop-filter: blur(4px); cursor: pointer; opacity: 0; transition: all .3s ease; z-index: 3; font-size: 1rem; }
.product-detail .gallery:hover .nav-arrow { opacity: 1; }
.product-detail .gallery .nav-arrow:hover { background: color-mix(in oklab, var(--background) 85%, transparent); color: var(--gold); }
.product-detail .gallery .nav-arrow.prev { left: .75rem; }
.product-detail .gallery .nav-arrow.next { right: .75rem; }