/* Base reset */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Layout: card-shop counter — fanned stack of blank cards up top, product grid, product detail as its own view, basket drawer.
   Theme: one fixed look, pure black background with coloured accents (no light mode). */
:root{
  color-scheme:dark;
  --bg:#000000;        /* page background: pure black */
  --surface:#0E0E11;   /* cards, panels, drawer */
  --sunk:#17171C;      /* image wells, inputs, table headers */
  --fg:#F4F4F6;        /* main text */
  --muted:#9C9CA8;     /* secondary text */
  --line:#26262E;      /* borders */
  /* Brand gold, taken from the logo (deep amber #C07818 → light gold #F8D870) */
  --accent:#E8B04A;    /* gold: links, highlights, outlines */
  --accent-ink:#130D02;/* text on gold buttons */
  --accent-soft:#1F1808;
  --gold-grad:linear-gradient(135deg,#F8D870 0%,#E8A838 55%,#C88018 100%);
  --gold:#F5C451;      /* prices and totals */
  --sky:#D9B26A;       /* small labels above headings (soft gold) */
  --ok:#3FD68B;        /* success, ticks */
  --danger:#FF6B6B;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:14px; --shadow:0 1px 2px rgba(0,0,0,.6),0 18px 40px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--f-body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);font-weight:600}
::selection{background:var(--accent);color:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font-weight:600;cursor:pointer;background:var(--gold-grad);color:var(--accent-ink);text-decoration:none;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fg)}
.mono{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
/* LOGO: put your logo at images/logo.png. Until it exists, the text name shows instead. */
.logo{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;text-decoration:none}
.logo img{height:32px;width:auto;display:block}
nav.links{display:flex;gap:22px;margin-left:auto}
nav.links a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem}
nav.links a:hover{color:var(--fg)}
.cart-btn{padding:10px 16px}
.cart-count{background:var(--accent-ink);color:var(--accent);border-radius:999px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:.8rem;padding:0 6px;font-variant-numeric:tabular-nums}
@media (max-width:760px){nav.links{display:none}.cart-btn{margin-left:auto}}

/* blank card visual (all products share one size, so one ratio) */
.bcard{background:#FFFFFF;aspect-ratio:85.6/54;max-width:100%;border-radius:4.5%/7.1%;position:relative;overflow:hidden;box-shadow:0 14px 28px -14px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.07)}
.bcard.gloss::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.55) 44%,transparent 55%)}
.bcard.matte::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/4px 4px}
.bcard.paper::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.012) 0 1px,transparent 1px 4px)}
.bcard.cotton::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.05) .8px,transparent 1px) 0 0/3px 3px}
/* back of the card: black stripe across the top. Front is plain white. */
.bcard.back::before{content:"";position:absolute;left:0;right:0;top:11%;height:19%;background:#141418}

/* hero */
.hero{padding-block:60px 76px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;gap:28px}}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:800;letter-spacing:-.04em;margin-top:14px}
.hero h1 span{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--muted);font-size:1.12rem;max-width:44ch;margin-top:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;color:var(--muted);font-size:.9rem}
.trust span::before{content:"✓ ";color:var(--ok);font-weight:700}
.fan{position:relative;aspect-ratio:1.3;max-width:520px;width:100%;margin-inline:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.fan .fc{position:absolute;left:17%;top:30%;width:66%;transform-origin:50% 165%;transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s;box-shadow:0 18px 34px -16px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.08)}
.fan .f1{transform:rotate(-24deg)} .fan .f2{transform:rotate(-14deg)} .fan .f3{transform:rotate(-4deg)} .fan .f4{transform:rotate(6deg)} .fan .f5{transform:rotate(16deg)}
/* open: twice the spread it had before (15deg steps -> 30deg steps) */
.fan.open .f1{transform:translateY(-46%) rotate(-64deg)} .fan.open .f2{transform:translateY(-16%) rotate(-34deg)} .fan.open .f3{transform:translateY(-4%) rotate(-4deg)} .fan.open .f4{transform:translateY(-16%) rotate(26deg)} .fan.open .f5{transform:translateY(-46%) rotate(56deg)}
@media (hover:hover){.fan:hover .f1{transform:translateY(-46%) rotate(-64deg)} .fan:hover .f2{transform:translateY(-16%) rotate(-34deg)} .fan:hover .f3{transform:translateY(-4%) rotate(-4deg)} .fan:hover .f4{transform:translateY(-16%) rotate(26deg)} .fan:hover .f5{transform:translateY(-46%) rotate(56deg)}}
.fan:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
.hero{overflow-x:clip}
/* signature panel under the black stripe */
.bcard .sig{position:absolute;left:7%;top:42%;width:56%;height:13%;border-radius:2px;background:repeating-linear-gradient(135deg,#F1EFEA 0 4px,#E6E3DC 4px 8px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.bcard .sig::after{content:"";position:absolute;right:-22%;top:12%;width:16%;height:76%;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);border-radius:2px}
/* About: card that turns over every 5 seconds */
.about-flip{width:100%;max-width:440px;margin-inline:auto;cursor:default;transition:transform 1s cubic-bezier(.45,.05,.25,1)}
.about-flip .bcard{box-shadow:0 22px 40px -18px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.08)}
.size-fig{perspective:1400px}

/* IMAGE SLOTS: put your files in images/ with these names; an empty dashed placeholder shows until the file exists */
.slot{aspect-ratio:85.6/54;max-width:100%;border-radius:4.5%/7.1%;overflow:hidden;position:relative;display:grid;place-items:center;background:var(--surface);box-shadow:0 14px 28px -14px rgba(0,0,0,.35)}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot span{display:none;color:var(--muted);font-size:.85rem;font-weight:600;text-align:center;padding:8px}
.slot.missing{border:2px dashed #3A3A44;background:var(--surface);box-shadow:0 14px 28px -14px rgba(0,0,0,.9)}
.slot.missing img{display:none}
.slot.missing span{display:block}

/* sections */
section.block{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:30px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.03em;margin-top:8px}

/* product grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:12px;grid-template-rows:auto 1fr auto}
.art{aspect-ratio:4/3;max-width:100%;border-radius:11px;background:var(--sunk);display:grid;place-items:center;text-decoration:none}
.art .bcard{width:66%;transition:transform .3s}
.prod:hover .art .bcard{transform:translateY(-4px) rotate(-2deg)}
.pinfo{display:grid;gap:8px;align-content:start}
.pinfo h3{font-size:1.1rem;font-weight:600}
.pinfo h3 a{text-decoration:none}
.pinfo h3 a:hover{text-decoration:underline}
.pinfo .desc{color:var(--muted);font-size:.9rem}
.colors{display:flex;gap:6px;flex-wrap:wrap}
.dot{width:24px;height:24px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.dot[aria-pressed="true"]{outline:2px solid var(--fg);outline-offset:2px}
.cname{font-size:.82rem;color:var(--muted)}
.buy{display:grid;gap:10px}
.select{width:100%;min-width:0;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 10px;font-size:.9rem}
.price{font-family:var(--f-display);font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.unit{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-row .btn{padding:10px}

/* product detail view */
.detail{padding-block:36px 80px}
.crumbs{display:flex;gap:8px;color:var(--muted);font-size:.9rem;margin-bottom:24px;flex-wrap:wrap}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.d-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start}
@media (max-width:860px){.d-grid{grid-template-columns:1fr;gap:28px}}
.d-stage{background:var(--sunk);border-radius:22px;aspect-ratio:5/4;max-width:100%;display:grid;place-items:center;position:relative}
.d-stage .bcard{width:72%}
.d-stage .dimw,.d-stage .dimh{position:absolute;color:var(--muted);font-family:var(--f-mono);font-size:.78rem}
.d-stage .dimw{left:14%;right:14%;bottom:11%;text-align:center;border-top:1px solid var(--muted);padding-top:6px}
.d-stage .dimh{right:5%;top:50%;transform:translateY(-50%) rotate(90deg);white-space:nowrap}
.d-info{display:grid;gap:18px}
.d-info h1{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.03em}
.d-info .desc{color:var(--muted);font-size:1.05rem;max-width:52ch}
.spec{display:grid;grid-template-columns:auto 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.spec dt,.spec dd{margin:0;padding:11px 14px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.spec dt{color:var(--muted);font-size:.88rem;background:var(--sunk)}
.spec dd{font-weight:500}
.spec dt:nth-last-of-type(1),.spec dd:last-of-type{border-bottom:0}
.qtybox{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;width:max-content}
.qtybox button{border:0;background:transparent;width:40px;height:44px;cursor:pointer;font-size:1.1rem}
.qtybox input{width:72px;border:0;background:transparent;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;outline:none}
.d-buy{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.d-buy .btn{flex:1;min-width:180px}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:28px}}
.about p{color:var(--muted);max-width:58ch}
.about .copy{display:grid;gap:16px}
.size-fig{background:var(--sunk);border-radius:22px;padding:40px 34px;display:grid}
.size-fig .slot{width:100%}

/* bulk */
.panel.dark{background:radial-gradient(120% 140% at 0% 0%,var(--accent-soft),transparent 55%),var(--surface);border:1px solid var(--line);color:var(--fg);border-radius:22px;padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){.panel.dark{grid-template-columns:1fr;gap:24px;padding:28px}}
.panel.dark .copy{display:grid;gap:14px}
.panel.dark h2{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em}
.panel.dark p{color:var(--muted)}
.tiers{display:grid;gap:12px}
.tier{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;font-variant-numeric:tabular-nums}
.panel.dark .btn{justify-self:start}
.tier span:last-child{color:var(--gold);font-weight:600}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;counter-increment:s;display:grid;gap:10px;align-content:start}
.step::before{content:counter(s);font-family:var(--f-display);font-weight:800;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.step h3{font-size:1.15rem;font-weight:600}
.step p{color:var(--muted)}

/* faq */
.faq{display:grid;gap:10px;max-width:780px}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px}
summary{cursor:pointer;padding:18px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.3rem;line-height:1;color:var(--muted);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:18px;color:var(--muted);max-width:65ch}

footer{border-top:1px solid var(--line);padding-block:40px;color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .cols{display:flex;gap:48px;flex-wrap:wrap}
footer .cols div{display:grid;gap:6px;align-content:start}
footer b{color:var(--fg)}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(10,10,18,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:50;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4)}
.drawer.on{transform:none}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.d-head h2{font-size:1.4rem}
.x{border:0;background:var(--sunk);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.05rem}
.d-body{flex:1;overflow:auto;padding:20px 22px;display:grid;gap:16px;align-content:start}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center}
.line .thumb{aspect-ratio:1;border-radius:10px;background:var(--sunk);display:grid;place-items:center}
.line .thumb .bcard{width:80%;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.line h4{font-size:.95rem;font-family:var(--f-body);font-weight:600}
.line p{color:var(--muted);font-size:.82rem}
.qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;line-height:1}
.qty .cq{width:72px;text-align:center;border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:3px;font-variant-numeric:tabular-nums}
.line .amt{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.empty{text-align:center;color:var(--muted);padding:40px 0;display:grid;gap:14px;justify-items:center}
.d-foot{border-top:1px solid var(--line);padding:18px 22px;display:grid;gap:10px}
.sum{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.92rem}
.sum.total{color:var(--fg);font-weight:700;font-size:1.1rem}
.input{width:100%;border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:11px 13px;outline:none}
.input:focus{border-color:var(--accent)}
.note{font-size:.8rem;color:var(--muted);background:var(--sunk);border-radius:8px;padding:10px 12px}
.done{text-align:center;display:grid;gap:12px;justify-items:center;padding:30px 0}
.done .tick{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:1.6rem}
.code{font-family:var(--f-mono);background:var(--sunk);padding:4px 10px;border-radius:6px;letter-spacing:.06em}
.ship-bar{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden}
.ship-bar i{display:block;height:100%;background:var(--gold-grad);transition:width .3s}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--fg);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.logo img{height:64px;width:auto;max-width:260px;object-fit:contain;display:block}
.logo.no-img img{display:none}
.logo:not(.no-img) .logo-text{display:none}

/* product photos uploaded from the admin page */
.bcard.has-img{background:var(--surface)}
.bcard.has-img::before,.bcard.has-img::after{display:none}
.bcard.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* checkout form in the basket drawer */
.co-form{display:grid;gap:14px}
.co-field{display:grid;gap:6px}
.co-field label{font-weight:600;font-size:.88rem}
textarea.input{resize:vertical;font:inherit}
select.input{appearance:auto}
.co-error{background:color-mix(in srgb,#D33 12%,var(--surface));color:var(--fg);border:1px solid color-mix(in srgb,#D33 40%,var(--line));border-radius:8px;padding:10px 12px;font-size:.88rem}
.btn:disabled{opacity:.6;cursor:wait}

/* Loader (Quantum from uiball.com). Colour follows the text colour around it. */
.loader{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 0;color:var(--accent)}
.loader p{color:var(--muted);font-size:.9rem}
.btn l-quantum{color:inherit}

/* Black theme: coloured text accents */
.price,.sum.total span:last-child,.line .amt{color:var(--gold)}
.trust span{color:var(--muted)}
.d-stage .dimw{border-top-color:var(--line)}
.co-error{background:color-mix(in srgb,var(--danger) 14%,var(--surface));border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.done .tick{color:#000}
.input{color:var(--fg)}
.input::placeholder{color:#6A6A75}

/* Big logo: nearly fills the nav bar top to bottom */
header.top .wrap{padding-block:4px;min-height:72px}
header.top .logo img{height:64px}
footer .logo img{height:80px;max-width:300px}
@media (max-width:760px){header.top .wrap{min-height:60px} header.top .logo img{height:52px;max-width:190px}}

/* Track order + contact */
.split-2{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start}
@media (max-width:860px){.split-2{grid-template-columns:1fr;gap:24px}}
.split-2 .copy{display:grid;gap:14px}
.sec-title{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.03em}
.muted-p{color:var(--muted);max-width:52ch}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;display:grid;gap:16px}
.form-card .btn{justify-self:start}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.two-col{grid-template-columns:1fr}}
.mono-in{font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.contact-list{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:6px 0 0}
.contact-list dt{color:var(--muted)}
.contact-list dd{margin:0;color:var(--fg)}
.track-result{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:14px;background:var(--sunk)}
.track-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.track-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.track-steps div{display:grid;gap:6px;font-size:.78rem;color:var(--muted)}
.track-steps i{height:6px;border-radius:999px;background:var(--line)}
.track-steps .on{color:var(--fg)}
.track-steps .on i{background:var(--ok)}
.track-items{margin:0;padding-left:18px;color:var(--muted);font-size:.9rem}
.sent-ok{display:grid;gap:8px;justify-items:start}
.sent-ok .tick{width:44px;height:44px;border-radius:50%;background:var(--ok);color:#000;display:grid;place-items:center;font-size:1.3rem}
.cancelled-note{color:var(--danger);font-weight:600}

/* ---------- Product page: front / back of the card ---------- */
.d-stage{perspective:1400px}
.flip{position:relative;width:72%;aspect-ratio:85.6/54;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;cursor:pointer;border:0;padding:0;background:none}
.flip.is-back{transform:rotateY(180deg)}
.flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .face .bcard{width:100%}
.flip .face.back-face{transform:rotateY(180deg)}
.side-tabs{display:flex;gap:10px;justify-content:center;margin-top:14px}
.side-tab{display:grid;gap:6px;justify-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;color:var(--muted);font-size:.8rem;font-weight:600;width:96px}
.side-tab .bcard{width:100%;box-shadow:none}
.side-tab[aria-pressed="true"]{border-color:var(--accent);color:var(--fg)}
.flip-hint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:8px}

/* ---------- Mobile menu ---------- */
.menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:0}
.menu-btn span{display:block;width:18px;height:2px;background:var(--fg);border-radius:2px;transition:transform .25s,opacity .2s}
.menu-btn span+span{margin-top:4px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav{border-top:1px solid var(--line);background:var(--bg)}
header.top .mobile-nav .wrap{display:grid;gap:0;min-height:0;padding-block:4px 14px}
.mobile-nav a{display:block;padding:14px 4px;font-size:1.1rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav a:last-child{border-bottom:0}

/* ---------- Mobile-first fixes (phones) ---------- */
@media (max-width:760px){
  .menu-btn{display:flex}
  .cart-btn{margin-left:auto;padding:10px 14px}
  header.top .wrap{gap:10px}

  .hero{padding-block:32px 48px}
  .hero-grid{gap:20px}
  .fan{max-width:320px;aspect-ratio:1.15;margin-top:14px}
  .fan .fc{left:24%;top:34%;width:52%}

  section.block{padding-block:48px}
  .sec-head{margin-bottom:20px}

  /* products: 2 per row, compact */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .prod{padding:10px;gap:10px;border-radius:14px}
  .art{aspect-ratio:5/4;border-radius:9px}
  .art .bcard{width:78%}
  .pinfo h3{font-size:.95rem}
  .pinfo .desc{font-size:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .price{font-size:1.15rem}
  .price-row{flex-wrap:wrap;gap:0 6px}
  .btn-row{grid-template-columns:1fr}
  .btn-row .btn.ghost{display:none}
  .btn-row .btn{padding:11px}

  /* product page */
  .detail{padding-block:20px 56px}
  .d-stage{border-radius:16px}
  .flip{width:82%}
  .d-stage .dimw,.d-stage .dimh{display:none}
  .d-buy .btn{min-width:0}

  /* basket drawer: bigger tap targets */
  .qty button{width:34px;height:34px}
  .qty .cq{width:72px;height:34px}

  .form-card{padding:18px}
  .form-card .btn{justify-self:stretch}
  footer .logo img{height:60px}
}
@media (max-width:360px){
  .grid{gap:10px}
  .prod{padding:8px}
  .pinfo .desc{display:none}
}
/* stop iPhone zooming into form fields: inputs must be at least 16px */
.input,select.input,textarea.input,.qty .cq,.qtybox input{font-size:16px}
/* product photo gallery (up to 5 pictures from the admin) */
.d-stage.gallery{overflow:hidden}
.gal-thumbs{flex-wrap:wrap}
.gal-thumbs .side-tab{width:76px;height:76px;padding:4px}
.gal-thumbs .side-tab img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Others section ---------- */
.sec-head{flex-wrap:wrap}
.sec-note{color:var(--muted);max-width:42ch}
.ophoto{position:absolute;inset:0;background:var(--sunk);overflow:hidden}
.prod:hover .ophoto.empty::after{content:"";position:absolute;inset:30%;border:2px dashed var(--line);border-radius:12px}
.art,.line .thumb{position:relative;overflow:hidden}
.line .thumb .ophoto,.side-tab .ophoto{border-radius:inherit}

/* product cards: title, price, how many */
.stock-line{font-size:.85rem;color:var(--ok);margin:-2px 0 2px}
.stock-line.out{color:var(--danger)}
/* product page */
.d-price{display:flex;align-items:baseline;gap:10px}
.d-price .price{font-size:2.2rem}
.d-stock{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ok)}
.d-stock i{width:8px;height:8px;border-radius:50%;background:currentColor}
.d-stock.out{color:var(--danger)}
.d-qty-wrap{display:grid;gap:8px}
.d-qty-wrap label{font-weight:600}
.gold-t{color:var(--gold)}
.d-desc{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:20px}
.d-desc h2{font-size:1.2rem;letter-spacing:-.01em}
.d-desc p{color:var(--fg);opacity:.85;line-height:1.7;white-space:normal}

/* Others showcase on the home page: photo left (top on phones), intro right */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.feature-media{position:relative;display:block;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--sunk);border:1px solid var(--line);text-decoration:none}
.feature-stack{position:absolute;inset:0}
.feature-stack span{position:absolute;width:52%;aspect-ratio:85.6/54;border-radius:9px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.feature-stack span:nth-child(1){left:12%;top:20%;transform:rotate(-10deg);opacity:.5}
.feature-stack span:nth-child(2){left:24%;top:31%;transform:rotate(-2deg);opacity:.8}
.feature-stack span:nth-child(3){left:35%;top:42%;transform:rotate(7deg);background:linear-gradient(135deg,#F8D870,#E8A838 55%,#C88018)}
.feature-copy{display:grid;gap:18px;justify-items:start}
.feature-copy h2{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.03em}
.feature-copy .feature-title{letter-spacing:.04em;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.feature-copy .feature-sub{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:clamp(1.1rem,1.8vw,1.35rem);letter-spacing:-.01em;color:var(--fg);margin-top:-10px}
.feature-text{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:46ch}
.feature-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feature-points li{display:flex;gap:10px;align-items:center;color:var(--fg)}
.feature-points li::before{content:"";width:18px;height:18px;flex:0 0 auto;border-radius:50%;background:var(--ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 12.5 4 4 8-9' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.feature-copy .btn{margin-top:6px;padding:14px 26px}
@media (max-width:860px){
  .feature{grid-template-columns:1fr;gap:26px}
  .feature-media{border-radius:16px}
  .feature-copy .btn{width:100%}
}

/* Others products page */
.others-page{padding-top:28px}
.others-page .crumbs{margin-bottom:22px}
.page-title{font-size:clamp(2rem,4.5vw,3.2rem);letter-spacing:-.03em;margin-top:8px}
.others-none{grid-column:1/-1;display:grid;gap:12px;justify-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:36px}
.others-none p{color:var(--muted)}

/* Photos always shown in full (no cropping), any size or shape.
   .fit-fg = the photo, scaled to fit; .fit-bg = blurred copy filling the leftover space */
.fit{position:relative;overflow:hidden;background:var(--sunk)}
.fit img{position:absolute;inset:0;width:100%;height:100%;display:block}
.fit .fit-bg{object-fit:cover;filter:blur(28px) saturate(1.1) brightness(.55);transform:scale(1.25)}
.fit .fit-fg{object-fit:contain;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.feature-media .fit{position:absolute;inset:0}
.feature-media:hover .fit-fg,.prod:hover .ophoto .fit-fg{transform:scale(1.03)}
.prod:hover .ophoto img.fit-bg{transform:scale(1.25)}
.d-stage.gallery .fit-fg,.d-stage.gallery .fit-bg{border-radius:0}
.ophoto.fit{position:absolute;inset:0}

/* order tracking: 5 steps; vertical timeline on phones */
section.block{scroll-margin-top:84px}
.track-steps{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:560px){
  .track-steps{grid-template-columns:1fr;gap:0}
  .track-steps div{grid-template-columns:14px 1fr;gap:12px;align-items:center;font-size:.92rem;padding:7px 0;position:relative}
  .track-steps i{width:14px;height:14px;border-radius:50%;background:var(--line);position:relative;z-index:1}
  .track-steps div:not(:last-child)::after{content:"";position:absolute;left:6px;top:24px;bottom:-8px;width:2px;background:var(--line)}
  .track-steps .on:has(+ .on)::after{background:var(--ok)}
}

/* gold buttons: keep ghost buttons transparent, disabled look muted */
.btn.ghost{background:transparent}
.btn:disabled{background:var(--sunk);color:var(--muted)}
.cart-count{background:#130D02;color:#F8D870}

/* ---------- policy pages (terms, shipping & returns, privacy) ---------- */
.back-link{margin-left:auto;color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem}
.back-link:hover{color:var(--fg)}
.policy{max-width:820px;padding-block:28px 80px;display:grid;gap:14px}
.policy h1{font-size:clamp(2.1rem,5vw,3.2rem);letter-spacing:-.03em}
.legal-updated{color:var(--muted);font-size:.9rem}
.legal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.legal-tabs a{border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.9rem}
.legal-tabs a:hover{color:var(--fg);border-color:var(--muted)}
.legal-tabs a[aria-current]{background:var(--gold-grad);color:var(--accent-ink);border-color:transparent}
.legal-body{display:grid;gap:14px;line-height:1.75;color:color-mix(in srgb,var(--fg) 88%,transparent)}
.legal-body h2{font-size:1.3rem;letter-spacing:-.01em;margin-top:18px;color:var(--fg)}
.legal-body ul,.legal-body ol{margin:0;padding-left:22px;display:grid;gap:8px}
.legal-body a,.legal-contact a{color:var(--accent)}
.legal-body b{color:var(--fg)}
.legal-lead{font-size:1.1rem;color:var(--fg)}
.legal-note{color:var(--muted);font-size:.9rem}
.legal-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.95rem}
.legal-table>div{display:grid;grid-template-columns:1.6fr .8fr .8fr 1.3fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.legal-table>div:first-child{border-top:0}
.legal-table .lt-head{background:var(--sunk);color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.legal-contact{margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:8px}
.legal-contact h2{font-size:1.2rem}
.legal-contact p{color:var(--muted)}
@media (max-width:640px){
  .legal-table .lt-head{display:none}
  .legal-table>div{grid-template-columns:1fr 1fr;gap:4px 12px}
  .legal-table>div span:first-child{grid-column:1/-1;font-weight:600;color:var(--fg)}
  .legal-table>div span:nth-child(2)::before{content:"Shipping: ";color:var(--muted)}
  .legal-table>div span:nth-child(3)::before{content:"Free over: ";color:var(--muted)}
  .legal-table>div span:nth-child(4){grid-column:1/-1;color:var(--muted)}
}

/* ---------- fields with an icon (email, WhatsApp, address) ---------- */
.in-wrap{position:relative;display:block}
.in-wrap .in-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:26px;height:26px;object-fit:contain;border-radius:6px;pointer-events:none}
.in-wrap .input{padding-left:50px}

/* ---------- contact section: WhatsApp + email cards ---------- */
.contact-cards{display:grid;gap:12px;margin-top:18px}
.contact-card{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 18px;text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s}
.contact-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.contact-card img{width:48px;height:48px;object-fit:contain;border-radius:12px;flex:0 0 auto}
.contact-card span{display:grid;gap:2px;min-width:0}
.contact-card small{color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.contact-card b{font-size:1.05rem;overflow-wrap:anywhere}
.contact-hours{color:var(--muted);font-size:.9rem;margin-top:12px}

/* tracking: Cardfundora's updates */
.track-wait{color:var(--muted);font-size:.9rem;border-top:1px dashed var(--line);padding-top:12px}
.track-latest{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-radius:14px;padding:16px;display:grid;gap:8px}
.tl-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tl-badge{background:var(--gold-grad);color:var(--accent-ink);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.tl-status{font-size:1.1rem}
.tl-loc{display:flex;gap:8px;align-items:center;font-weight:600}
.tl-loc img{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.tl-msg{color:var(--fg);opacity:.9;line-height:1.65}
.track-history{border-top:1px solid var(--line);padding-top:10px}
.track-history summary{cursor:pointer;font-weight:600;color:var(--muted)}
.track-history ol{list-style:none;margin:12px 0 0;padding:0 0 0 16px;border-left:2px solid var(--line);display:grid;gap:12px}
.track-history li{display:grid;gap:2px;font-size:.92rem}

/* social icons (contact section + footer) */
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.socials[hidden]{display:none}
.social{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);transition:transform .15s,border-color .15s,background .15s,color .15s}
.social svg{width:24px;height:24px}
.social:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--gold-grad);color:#130d02}
.socials.sm{margin-top:6px;gap:8px}
.socials.sm .social{width:38px;height:38px;border-radius:11px}
.socials.sm .social svg{width:19px;height:19px}
/* spam trap field: hidden from people */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
footer .cols .socials{display:flex}
footer .cols .socials[hidden]{display:none}

/* =================== REVIEWS =================== */
.rv{display:grid;grid-template-columns:340px 1fr;gap:28px;align-items:start}
.rv-summary{position:sticky;top:96px;background:radial-gradient(120% 80% at 0% 0%,rgba(232,176,74,.12),transparent 60%),var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;gap:22px}
.rv-skel{height:280px;border-radius:14px;background:linear-gradient(90deg,var(--sunk),#1e1e24,var(--sunk));background-size:200% 100%;animation:rvsk 1.2s linear infinite}
@keyframes rvsk{to{background-position:-200% 0}}
.rv-score{display:flex;align-items:center;gap:16px}
.rv-score strong{font-family:"Bricolage Grotesque",sans-serif;font-size:3.6rem;line-height:1;font-weight:800;letter-spacing:-.04em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.rv-score p{color:var(--muted);font-size:.9rem;margin-top:6px}
.rv-stars{display:inline-flex;gap:2px;vertical-align:middle}
.rv-stars i{display:inline-flex;width:16px;height:16px}
.rv-stars.lg i{width:22px;height:22px}
.rv-stars svg{width:100%;height:100%;fill:#2E2E36}
.rv-stars i.on svg{fill:#F0B840}
.rv-bars{display:grid;gap:6px}
.rv-bar{display:grid;grid-template-columns:12px 14px 1fr 30px;align-items:center;gap:8px;background:none;border:0;padding:5px 6px;margin:0 -6px;border-radius:8px;color:var(--fg);font:inherit;font-size:.86rem;cursor:pointer;text-align:left}
.rv-bar svg{width:14px;height:14px;fill:#F0B840}
.rv-bar b{height:8px;border-radius:99px;background:var(--sunk);overflow:hidden;display:block}
.rv-bar b i{display:block;height:100%;background:var(--gold-grad);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rv-bar em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.rv-bar:hover:not(:disabled),.rv-bar.on{background:var(--sunk)}
.rv-bar.on{box-shadow:inset 0 0 0 1px rgba(232,176,74,.5)}
.rv-bar:disabled{cursor:default;opacity:.55}
.rv-clear{justify-self:start;background:none;border:0;color:var(--accent);font:inherit;font-size:.86rem;cursor:pointer;padding:0;margin-top:-10px}
.rv-cta{border-top:1px solid var(--line);padding-top:20px;display:grid;gap:12px}
.rv-cta p{color:var(--muted);font-size:.92rem}
.rv-cta .btn{width:100%}
.rv-main{display:grid;gap:16px;min-width:0}
.rv-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.rv-tools[hidden]{display:none}
.rv-showing{color:var(--muted);font-size:.92rem}
.rv-sort{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.88rem}
.rv-sort select{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:8px 30px 8px 14px;font:inherit;font-size:.88rem;cursor:pointer}
.rv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.rv-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s}
.rv-card:hover{border-color:#3a3a44;transform:translateY(-2px)}
.rv-card.featured{border-color:rgba(232,176,74,.45);background:linear-gradient(180deg,rgba(232,176,74,.07),transparent 40%),var(--surface)}
.rv-card .rv-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv-tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.rv-tag.gold{background:rgba(232,176,74,.14);color:var(--accent);border:1px solid rgba(232,176,74,.35)}
.rv-tag.ok{background:rgba(63,214,139,.1);color:var(--ok);border:1px solid rgba(63,214,139,.3)}
.rv-tag svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3}
.rv-card h4{font-size:1.04rem;font-weight:700;letter-spacing:-.01em}
.rv-body{color:#C9C9D2;font-size:.95rem;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere}
.rv-body.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rv-readmore{align-self:flex-start;background:none;border:0;padding:0;color:var(--accent);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer}
.rv-product{align-self:flex-start;font-size:.78rem;color:var(--muted);background:var(--sunk);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.rv-card .rv-foot{display:flex;align-items:center;gap:10px;padding-top:4px}
.rv-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--gold-grad);color:#130d02;font-weight:800;font-size:.8rem;letter-spacing:.02em}
.rv-card .rv-foot span:last-child{display:grid;line-height:1.3}
.rv-card .rv-foot b{font-size:.92rem}
.rv-card .rv-foot small{color:var(--muted);font-size:.78rem}
.rv-reply{background:var(--sunk);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;display:grid;gap:4px}
.rv-reply b{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--accent)}
.rv-reply img{width:20px;height:20px;object-fit:contain}
.rv-reply p{color:#C9C9D2;font-size:.9rem;line-height:1.55;white-space:pre-line}
.rv-more{justify-self:center;margin-top:6px}
.rv-more[hidden]{display:none}
.rv-empty{grid-column:1/-1;background:var(--surface);border:1px dashed #34343F;border-radius:18px;padding:44px 24px;text-align:center;display:grid;gap:10px;justify-items:center}
.rv-empty-stars .rv-stars i{width:26px;height:26px}
.rv-empty-stars .rv-stars svg{fill:#3a3020}
.rv-empty h4{font-size:1.2rem}
.rv-empty p{color:var(--muted);max-width:40ch}
.rv-empty .btn{margin-top:8px}
.hero-rating{display:inline-flex;align-items:center;gap:8px;color:var(--fg);text-decoration:none;font-size:.9rem}
.hero-rating[hidden]{display:none}
.hero-rating b{color:var(--accent)}
.hero-rating .rv-stars i{width:15px;height:15px}
.others-reviews{padding-top:0}

/* write-a-review modal */
.rv-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px}
.rv-modal[hidden]{display:none}
.rv-scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s}
.rv-dialog{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 80px -20px #000;transform:translateY(16px) scale(.98);opacity:0;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.rv-modal.on .rv-scrim{opacity:1}
.rv-modal.on .rv-dialog{transform:none;opacity:1}
.rv-dialog::before{content:"";display:block;height:4px;background:var(--gold-grad);border-radius:22px 22px 0 0}
.rv-x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--sunk);color:var(--fg);cursor:pointer;font-size:.95rem}
.rv-form-body{padding:26px 26px 24px;display:grid;gap:16px}
.rv-form-body[hidden],.rv-done[hidden]{display:none}
.rv-form-body h3,.rv-done h3{font-size:1.6rem;letter-spacing:-.02em;margin-top:-6px}
.rv-pick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rv-pick button{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--sunk);display:grid;place-items:center;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.rv-pick button svg{width:24px;height:24px;fill:#3a3a44;transition:fill .12s}
.rv-pick button.on{border-color:rgba(232,176,74,.55);background:rgba(232,176,74,.1)}
.rv-pick button.on svg{fill:#F0B840}
.rv-pick button:active{transform:scale(.92)}
.rv-pick span{margin-left:8px;color:var(--muted);font-size:.92rem;font-weight:600}
.rv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rv-form-body .co-field>span{font-weight:600;font-size:.88rem}
.rv-form-body .co-field small{color:var(--muted);font-weight:400}
.rv-form-body .co-field[hidden]{display:none}
.rv-count{justify-self:end;color:var(--muted);font-size:.75rem}
.rv-submit{width:100%;padding:14px}
.rv-note{color:var(--muted);font-size:.82rem;line-height:1.5}
.rv-note b{color:var(--ok)}
.rv-done{padding:44px 28px;text-align:center;display:grid;gap:12px;justify-items:center}
.rv-done .tick{width:64px;height:64px;border-radius:50%;background:var(--gold-grad);color:#130d02;display:grid;place-items:center;font-size:1.8rem;font-weight:800}
.rv-done p{color:var(--muted)}

@media (max-width:980px){.rv{grid-template-columns:1fr}.rv-summary{position:static}}
@media (max-width:640px){
  .rv-list{grid-template-columns:1fr}
  .rv-summary{padding:20px;border-radius:18px}
  .rv-score strong{font-size:3rem}
  .rv-grid2{grid-template-columns:1fr}
  .rv-modal{padding:0;place-items:end center}
  .rv-dialog{border-radius:22px 22px 0 0;max-height:92vh;transform:translateY(40px)}
  .rv-form-body{padding:22px 18px 26px}
  .rv-pick button{width:48px;height:48px}
  .rv-pick span{width:100%;margin:4px 0 0}
  .rv-form-body .input{font-size:16px}
}

/* =================== BADGES (above the footer) =================== */
/* Black tiles with a shining gold border that beats like a heart */
.badges{padding-block:56px 64px;border-top:1px solid var(--line)}
.badges[hidden]{display:none}
.badges-row{display:grid;grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;gap:clamp(18px,4vw,52px)}
.badge-tile{margin:0;aspect-ratio:1;border-radius:24px;padding:clamp(14px,2.4vw,26px);display:grid;place-items:center;position:relative;
  border:2.5px solid transparent;
  background:linear-gradient(#050506,#050506) padding-box,
             linear-gradient(115deg,#B8740F 0%,#F8D870 22%,#FFF4C8 30%,#F8D870 38%,#C88018 60%,#F8D870 82%,#B8740F 100%) border-box;
  background-size:100% 100%,300% 300%;
  animation:badge-shine 4s linear infinite,badge-beat 1.6s ease-in-out infinite}
.badge-tile:nth-child(2){animation-delay:-2s,-.8s}
.badge-tile[hidden]{display:none}
.badge-tile img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1}
/* light moving round the gold border */
@keyframes badge-shine{from{background-position:0 0,0% 50%}to{background-position:0 0,300% 50%}}
/* heartbeat: two quick pulses of gold glow on the border, then rest */
@keyframes badge-beat{
  0%,40%,100%{box-shadow:0 0 0 0 rgba(240,184,64,0),0 0 14px 0 rgba(240,184,64,.25)}
  10%{box-shadow:0 0 0 5px rgba(240,184,64,.28),0 0 32px 6px rgba(240,184,64,.55)}
  20%{box-shadow:0 0 0 1px rgba(240,184,64,.10),0 0 16px 1px rgba(240,184,64,.30)}
  30%{box-shadow:0 0 0 7px rgba(240,184,64,.22),0 0 40px 10px rgba(240,184,64,.60)}}
@media (prefers-reduced-motion:reduce){.badge-tile{animation:none;box-shadow:0 0 22px 2px rgba(240,184,64,.35)}}
@media (max-width:640px){.badges{padding-block:40px 48px}.badges-row{gap:16px}.badge-tile{border-radius:18px;border-width:2px}}