/* ═══════════════════════════════════════════════════════════════════════
   site.css — the Prestige Timepieces design system.

   The tokens in :root are lifted UNCHANGED from the original single-product
   page: same palette, same two typefaces, same gold. Everything below them
   is new surface built in that language — cards, grids, galleries, filters,
   cart, checkout — so the store still reads as the same brand.

   Section order:
     1. Tokens & reset            6. Product card + grid
     2. Layout primitives         7. Collection / filters
     3. Header & navigation       8. Product detail page
     4. Buttons & form controls   9. Cart & checkout
     5. Hero (3D stage)          10. Footer, consent, floating dock
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS & RESET ───────────────────────────────────────────────── */
:root{
  --bg:#191410; --bg-2:#211a13; --panel:#241d16;
  --cream:#ece4d5; --muted:#a4947e;
  --gold:#c8a377; --gold-light:#ddc4a0;
  --line:rgba(200,163,119,.18); --line-strong:rgba(200,163,119,.34);
  --serif:'Marcellus',serif; --sans:'Jost',system-ui,sans-serif;
  --ar:'Segoe UI','Noto Sans Arabic','Noto Naskh Arabic',Tahoma,Arial,sans-serif;
  --wa:#25d366;

  /* New, additive only. The page gutter is one value so the hero, the
     grids and the scrollers can all bleed to the same edge. */
  --gutter:6vw;
  --header-h:80px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media(max-width:820px){ :root{ --gutter:20px; --header-h:72px; } }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--cream);line-height:1.8;font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── 2. LAYOUT PRIMITIVES ────────────────────────────────────────────── */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.page{padding-top:calc(var(--header-h) + 46px)}   /* clears the fixed header */
.sec{padding:clamp(64px,9vw,130px) 0;position:relative}
.sec--tight{padding:clamp(46px,6vw,84px) 0}
.sec + .sec{border-top:1px solid rgba(200,163,119,.08)}

.overline{color:var(--gold);font-size:11px;letter-spacing:.45em;text-transform:uppercase;display:block}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,54px)}
.sec-head h2{font-size:clamp(28px,4.4vw,54px);line-height:1.05}
.sec-head p{color:var(--muted);font-size:15px;max-width:520px;margin-top:12px}
.sec-link{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);
  border-bottom:1px solid var(--line-strong);padding-bottom:5px;white-space:nowrap;transition:.25s var(--ease)}
.sec-link:hover{color:var(--cream);border-color:var(--gold)}

.crumbs{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.crumbs a:hover{color:var(--gold-light)}
.crumbs span{margin:0 9px;opacity:.5}

/* Reveal-on-scroll. Purely additive: JS adds .in once the element is seen,
   and anything JS never reaches stays visible because of the fallback in
   site.js, so content is never trapped invisible. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ── 3. HEADER & NAVIGATION ──────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:45;background:#120e0a;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap}
.ticker{display:inline-flex;will-change:transform;animation:ticker 30s linear infinite}
.ticker span{color:var(--gold);padding:0 26px}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.site-head{position:fixed;top:29px;left:0;right:0;z-index:46;background:rgba(25,20,16,.72);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:background .3s var(--ease),border-color .3s var(--ease)}
.site-head.scrolled{background:rgba(18,14,10,.94)}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px var(--gutter);
  max-width:1440px;margin:0 auto}

.logo{font-family:var(--serif);letter-spacing:.34em;font-size:16px;text-transform:uppercase;white-space:nowrap}
.logo em{color:var(--gold);font-style:normal}
@media(max-width:400px){.logo{font-size:13px;letter-spacing:.24em}}

.navlinks{display:flex;gap:34px;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.navlinks a{opacity:.82;position:relative;padding:4px 0;transition:.25s var(--ease)}
.navlinks a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s var(--ease)}
.navlinks a:hover,.navlinks a[aria-current="page"]{opacity:1;color:var(--gold-light)}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{right:0}

.nav-tools{display:flex;align-items:center;gap:6px}
.icon-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;
  color:var(--cream);cursor:pointer;position:relative;transition:.25s var(--ease)}
.icon-btn:hover{color:var(--gold-light);border-color:var(--line)}
.icon-btn svg{width:19px;height:19px}
.cart-count{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--gold);
  color:#1c1610;font-size:10.5px;font-weight:600;line-height:17px;text-align:center;letter-spacing:0}
.cart-count[hidden]{display:none}

.burger{display:none}
@media(max-width:900px){
  .navlinks{display:none}
  .burger{display:flex}
}

/* Slide-in mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.mobile-menu.open{visibility:visible;pointer-events:auto}
.mobile-menu .scrim{position:absolute;inset:0;background:rgba(10,7,4,.66);opacity:0;transition:opacity .35s var(--ease)}
.mobile-menu.open .scrim{opacity:1}
.mobile-menu .sheet{position:absolute;top:0;right:0;bottom:0;width:min(360px,86vw);background:#161109;border-left:1px solid var(--line-strong);
  padding:26px 26px 40px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto}
.mobile-menu.open .sheet{transform:none}
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mobile-menu .sheet a.mm-link{font-family:var(--serif);font-size:24px;padding:15px 0;border-bottom:1px solid var(--line)}
.mobile-menu .sheet a.mm-link:hover{color:var(--gold-light)}
.mobile-menu .mm-cats{margin-top:22px}
.mobile-menu .mm-cats b{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:400;margin-bottom:12px}
.mobile-menu .mm-cats a{display:block;padding:9px 0;font-size:14px;color:var(--muted)}
.mobile-menu .mm-cats a:hover{color:var(--cream)}

/* Search overlay */
.search-panel{position:fixed;inset:0;z-index:75;background:rgba(12,9,6,.94);backdrop-filter:blur(8px);
  padding:calc(var(--header-h) + 40px) var(--gutter) 40px;overflow-y:auto}
.search-panel[hidden]{display:none}
.search-panel .sp-inner{max-width:760px;margin:0 auto}
.search-panel input{width:100%;background:none;border:0;border-bottom:1px solid var(--line-strong);color:var(--cream);
  font-family:var(--serif);font-size:clamp(24px,5vw,44px);padding:14px 0;outline:none}
.search-panel input::placeholder{color:rgba(164,148,126,.5)}
.search-panel .sp-hint{color:var(--muted);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}
.search-panel .sp-results{margin-top:34px;display:grid;gap:10px}
.sr-row{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--line);background:rgba(36,29,22,.5);transition:.25s var(--ease)}
.sr-row:hover{border-color:var(--line-strong);background:rgba(36,29,22,.85)}
.sr-row img{width:62px;height:78px;object-fit:cover;flex:0 0 auto;background:#12100c}
.sr-row b{font-family:var(--serif);font-weight:400;font-size:18px;display:block}
.sr-row span{font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.sr-row .sr-price{margin-left:auto;font-family:var(--serif);color:var(--gold-light);white-space:nowrap}
.search-panel .sp-close{position:absolute;top:calc(var(--header-h) - 26px);right:var(--gutter);background:none;border:0;color:var(--muted);font-size:32px;line-height:1;cursor:pointer}
.search-panel .sp-close:hover{color:var(--gold)}

/* ── 4. BUTTONS & FORM CONTROLS ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;padding:16px 38px;border:1px solid var(--line-strong);background:none;color:var(--cream);
  cursor:pointer;transition:.25s var(--ease);text-align:center}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#1c1610}
.btn--gold{background:var(--gold);border-color:var(--gold);color:#1c1610;font-weight:500}
.btn--gold:hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn--wa{background:var(--wa);border-color:var(--wa);color:#08110b;font-weight:500}
.btn--wa:hover{filter:brightness(1.08);background:var(--wa);color:#08110b}
.btn--block{width:100%}
.btn--sm{padding:12px 24px;font-size:11.5px}
.btn:disabled{opacity:.55;cursor:default}
.btn:disabled:hover{background:none;color:var(--cream);border-color:var(--line-strong)}

.field{margin-bottom:15px}
.field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:rgba(18,14,10,.6);border:1px solid var(--line-strong);
  color:var(--cream);padding:13px 15px;font-family:var(--sans);font-size:15px;outline:none;border-radius:2px;transition:.2s}
.field input::placeholder,.field textarea::placeholder{color:rgba(164,148,126,.6)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 14px) center;background-size:5px 5px;background-repeat:no-repeat}
.field textarea{resize:vertical}
.field .err{display:none;color:#d98a72;font-size:12.5px;margin-top:5px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c0563f}
.field.invalid .err{display:block}

/* ── 5. HERO (the 3D stage — unchanged behaviour) ────────────────────── */
#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:60}
#loader{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;background:var(--bg);transition:opacity 1s ease}
#loader.hide{opacity:0;pointer-events:none}
.spinner{width:42px;height:42px;border:2px solid rgba(200,163,119,.2);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loader p{letter-spacing:.5em;font-size:11px;color:var(--muted);text-transform:uppercase;font-family:var(--serif)}

main{position:relative;z-index:10}

/* The watch is the WebGL scene BEHIND this copy, so the hero is composed
   in two bands: the watch owns the upper two thirds, the words sit in the
   lower third over a scrim. Without the scrim the headline lands directly
   on a brushed-steel bracelet and becomes unreadable. */
/* A short window — a laptop at 1280x560, a phone in landscape — has a
   hero band of barely 200px once a 29px ticker and an 80px header are
   taken out of it, and the watches end up squeezed against the headline.
   The delivery ticker is the least important thing on the page, so it is
   the first to go, and the header tightens with it. The 3D hero measures
   the header rather than assuming it, so the composition follows. */
@media(max-height:680px){
  .topbar{display:none}
  .site-head{top:0}
  .site-head .bar{padding:8px var(--gutter)}
  :root{ --header-h:56px; }
}

.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  gap:14px;padding:calc(var(--header-h) + 40px) var(--gutter) clamp(70px,11vh,110px);position:relative}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(18,14,10,.97) 6%,rgba(18,14,10,.88) 22%,rgba(18,14,10,.46) 40%,rgba(18,14,10,0) 62%)}
.hero > *{position:relative}
/* The hero film sits under the scrim (::before is z -1, this is -2). The
   clip is 4:5 portrait: a phone shows it full-bleed, a wide screen shows it
   as a centred column whose sides dissolve into the page colour, so there
   is no hard edge and no heavy crop of the watch. */
.hero > .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}
/* The film is a BACKDROP, not a picture the copy happens to sit on. Left
   alone it ran bright gold straight under the headline, which is what made
   the hero look broken rather than cinematic — the type had no ground to
   stand on. Same idea at every width: lift the frame so the watch owns the
   empty strip between the header and the headline, then fade the film out
   before the first word. Nothing is dimmed to hide it, so the watch still
   reads as a watch. */
.hero-media video{position:absolute;left:50%;transform:translateX(-50%) translateY(-22%);
  width:clamp(560px,56vw,820px);height:auto;aspect-ratio:4/5;max-width:none;display:block;
  /* Anchored to the top of the hero and lifted by a share of its OWN
     height, so the framing holds at any width without a second magic
     number per breakpoint: the bright subject sits ~51% down the frame,
     so -22% puts it ~29% down the hero — the strip above the copy. */
  top:0;
  filter:brightness(.95) contrast(1.06) saturate(.97);
  /* Two masks, intersected: the vertical one ends the film before the copy,
     the horizontal one dissolves the clip's own left and right edges — a
     centred column narrower than the page otherwise shows as a visible
     lighter rectangle on desktop. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.4) 54%,transparent 60%),
                     linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 46%,rgba(0,0,0,.4) 54%,transparent 60%),
                     linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-aspect-ratio:4/5){
  /* A phone screen is far taller than this 4:5 clip, and the only part of
     the hero with no words in it is the strip between the header and the
     overline. So the frame is pushed UP until the dial lands in that strip,
     then faded out before the copy begins: the watch gets to be a watch
     instead of a smudge under the headline, and the type sits on black.
     The offset is measured, not guessed: the bright subject sits between 44%
     and 57% down the frame across the whole 20s, so a 14% lift keeps it inside
     that clear strip from the first frame to the last. */
  .hero-media video{top:0;left:0;transform:translateY(-14%);width:100%;height:auto;
    aspect-ratio:4/5;filter:brightness(.92) contrast(1.06) saturate(.97);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,rgba(0,0,0,.4) 63%,transparent 69%);
            mask-image:linear-gradient(180deg,#000 0,#000 55%,rgba(0,0,0,.4) 63%,transparent 69%)}
}
.hero .overline{text-shadow:0 2px 12px rgba(0,0,0,.85)}
/* 2026-10-04 — the hero is now a composition of four watches, and the
   type was covering them. The headline is roughly a third smaller, the
   block is narrower, and the letterforms are opened up: at this size the
   serif reads as editorial rather than as a banner. The copy is still the
   first thing you read, but the watches are the first thing you see. */
.hero h1{font-size:clamp(29px,4.1vw,47px);max-width:12ch;margin:2px auto;line-height:1.14;
  letter-spacing:.012em;font-weight:400;text-shadow:0 10px 50px rgba(0,0,0,.75)}
.hero .sub{color:var(--muted);max-width:46ch;margin:0 auto;font-size:14.5px;line-height:1.75;
  text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero .overline{letter-spacing:.3em;font-size:10.5px}
@media(max-width:600px){
  .hero h1{font-size:clamp(26px,7.4vw,34px);max-width:14ch}
  .hero .sub{font-size:13.5px;max-width:32ch}
  .hero{gap:11px;padding-bottom:clamp(64px,9vh,90px)}
  /* A phone screen is far taller than it is wide, so the hero copy takes
     up a much bigger share of it than on desktop and the scrim has to
     reach correspondingly higher. Without this the headline lands on the
     dial itself and stops being readable. */
  .hero::before{background:linear-gradient(to top,rgba(18,14,10,.985) 8%,rgba(18,14,10,.93) 30%,rgba(18,14,10,.6) 52%,rgba(18,14,10,0) 76%)}
  /* Clear of the floating WhatsApp/Instagram dock in the bottom-left. */
  .hero-note{padding:0 56px}
  .hero .hero-cta{width:100%;flex-direction:column;align-items:stretch;padding:0 8px}
}
.hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.hero-note{font-size:12px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.hero-note i{font-style:normal;color:var(--gold);margin:0 7px}
.scrollcue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);font-size:10.5px;letter-spacing:.3em;
  color:var(--muted);text-transform:uppercase;font-family:var(--serif);animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* Sections that sit over the fixed WebGL stage need their own ground, or
   the 3D scene shows through the collection. The hero is the only part
   meant to be transparent. */
.opaque{background:var(--bg);position:relative;z-index:10}

/* ── 6. PRODUCT CARD + GRID ──────────────────────────────────────────── */
.grid{display:grid;gap:clamp(14px,1.7vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.grid--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid,.grid--4{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(max-width:420px){.grid,.grid--4{gap:10px}}

.pcard{position:relative;display:flex;flex-direction:column;background:rgba(36,29,22,.5);border:1px solid var(--line);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);isolation:isolate}
.pcard:hover{border-color:var(--line-strong);background:rgba(36,29,22,.9);transform:translateY(-5px)}
.pcard__media{position:relative;overflow:hidden;background:#12100c;aspect-ratio:4/5}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .5s ease}
.pcard:hover .pcard__media img{transform:scale(1.06)}
.pcard__badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;z-index:2;align-items:flex-start}
.badge{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line-strong);
  background:rgba(18,14,10,.82);color:var(--gold-light);backdrop-filter:blur(4px);line-height:1}
.badge--save{background:var(--gold);border-color:var(--gold);color:#1c1610;font-weight:600}
.badge--new{color:var(--cream)}
.badge--ph{border-style:dashed;color:var(--muted)}

/* "View Details" reveal. On touch devices there is no hover, so it is
   simply always visible there (see the media query below). */
.pcard__reveal{position:absolute;left:0;right:0;bottom:0;padding:13px;text-align:center;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:#1c1610;background:var(--gold);transform:translateY(101%);transition:transform .38s var(--ease)}
.pcard:hover .pcard__reveal,.pcard:focus-within .pcard__reveal{transform:none}

.pcard__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard__name{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.25}
.pcard__tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pcard__desc{font-size:13px;line-height:1.55;color:var(--muted);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.pcard__price .now{font-family:var(--serif);font-size:20px;color:var(--gold-light)}
.pcard__price .was{font-size:12.5px;color:var(--muted);text-decoration:line-through;opacity:.75}
.pcard__price .off{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
/* The whole card is one link target — the anchor is stretched over it so a
   tap anywhere navigates, while the inner text stays selectable. */
/* -1px, not 0: `inset:0` resolves against the padding box, which leaves
   the card's own 1px border unclickable. The brief asks for the whole
   card to be a target, so the overlay covers the border too. */
.pcard__link{position:absolute;inset:-1px;z-index:3}
@media(max-width:820px){
  .pcard__desc{display:none}
  /* There is no hover on a phone, so the call to action has to be
     permanently visible — but ten solid gold slabs down a grid reads as a
     discount site, not a watch house. On touch it becomes a quiet glass
     band with gold type instead. */
  .pcard__reveal{transform:none;padding:9px;font-size:10px;letter-spacing:.16em;
    background:rgba(18,14,10,.72);backdrop-filter:blur(6px);color:var(--gold-light);
    border-top:1px solid var(--line-strong)}
  /* Three stacked badges eat a third of a 160px-wide photograph. Keep the
     two most useful (the saving, then new/best seller) and drop the rest. */
  .pcard__badges > :nth-child(n+3){display:none}
  .badge{font-size:9px;padding:4px 7px}
  .pcard__body{padding:12px 12px 14px}
  .pcard__price .now{font-size:17px}
  .pcard__price{gap:7px}
  .pcard__price .off{display:none}
}
@media(hover:none){ .pcard__reveal{transform:none} }

/* Horizontal card rail, used for "best sellers" on narrow screens. */
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);
  padding:4px var(--gutter) 20px;scroll-padding:0 var(--gutter);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail > *{flex:0 0 min(280px,68vw);scroll-snap-align:start}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-track{background:rgba(200,163,119,.09)}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong)}

/* ── 6b. CATEGORY CARDS ──────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(170px,22vw,260px);
  padding:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(58,47,36,.5),rgba(18,14,10,.9));
  overflow:hidden;transition:.35s var(--ease)}
.cat:hover{border-color:var(--gold);transform:translateY(-4px)}
.cat::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(200,163,119,.20),transparent 62%);
  transition:opacity .4s var(--ease);opacity:.7}
.cat:hover::before{opacity:1}
.cat h3{font-size:clamp(19px,2.2vw,27px);position:relative}
.cat p{font-size:12.5px;color:var(--muted);margin-top:5px;position:relative;line-height:1.5}
.cat .cat-n{position:absolute;top:16px;right:20px;font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--gold);opacity:.8}

/* ── 7. COLLECTION / FILTERS ─────────────────────────────────────────── */
.coll{display:grid;grid-template-columns:246px 1fr;gap:clamp(24px,3vw,52px);align-items:start}
@media(max-width:900px){.coll{grid-template-columns:1fr}}

.filters{position:sticky;top:calc(var(--header-h) + 24px);border:1px solid var(--line);background:rgba(36,29,22,.4);padding:22px}
.fgroup{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border:0;margin:0;padding:0}
.fgroup h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--muted);transition:color .2s}
.fopt:hover{color:var(--cream)}
.fopt input{appearance:none;width:15px;height:15px;border:1px solid var(--line-strong);flex:0 0 auto;position:relative;cursor:pointer;background:rgba(18,14,10,.6)}
.fopt input:checked{background:var(--gold);border-color:var(--gold)}
.fopt input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #1c1610;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fopt input:checked ~ span{color:var(--cream)}
.fopt .n{margin-left:auto;font-size:11.5px;opacity:.6}

.coll-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.coll-count{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.coll-sort{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.coll-sort select{background:rgba(18,14,10,.6);border:1px solid var(--line-strong);color:var(--cream);padding:9px 34px 9px 12px;
  font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;outline:none;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) center,calc(100% - 12px) center;background-size:5px 5px;background-repeat:no-repeat}
.filter-toggle{display:none}
/* Declared BEFORE the media query on purpose. Both rules have the same
   specificity, so whichever comes last wins — with this one below the
   query, the mobile sheet's only close button was permanently hidden and
   a touch user had no way out of the filter panel. */
.filters .f-done{display:none}
.filters-scrim{position:fixed;inset:0;z-index:77;background:rgba(10,7,4,.6);opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease)}
.filters-scrim.on{opacity:1;pointer-events:auto}
@media(min-width:901px){ .filters-scrim{display:none} }
@media(max-width:900px){
  .filter-toggle{display:inline-flex}
  .filters{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;overflow-y:auto;z-index:78;background:#161109;
    border:0;border-top:1px solid var(--line-strong);transform:translateY(101%);transition:transform .4s var(--ease);padding:22px var(--gutter) 30px}
  .filters.open{transform:none}
  .filters .f-done{display:block;margin-top:20px}
}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 12px;border:1px solid var(--line-strong);background:rgba(36,29,22,.6);color:var(--cream);cursor:pointer}
.chip:hover{border-color:var(--gold);color:var(--gold-light)}
.chip b{font-weight:400;color:var(--gold)}
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--line-strong);color:var(--muted)}
.empty h3{font-size:24px;color:var(--cream);margin-bottom:10px}

/* ── 8. PRODUCT DETAIL PAGE ──────────────────────────────────────────── */
.pdp{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(26px,4vw,68px);align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:26px}}

.pdp-gallery{position:sticky;top:calc(var(--header-h) + 24px)}
@media(max-width:900px){.pdp-gallery{position:static}}
.pdp-main{position:relative;border:1px solid var(--line);background:#12100c;aspect-ratio:4/5;overflow:hidden;cursor:zoom-in}
.pdp-main img{width:100%;height:100%;object-fit:cover;transition:opacity .35s ease,transform .5s var(--ease)}
.pdp-main.zoomed{cursor:zoom-out}
.pdp-main.zoomed img{transform:scale(2);transition:transform .18s linear}
.pdp-main .zoom-hint{position:absolute;right:12px;bottom:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:rgba(18,14,10,.78);border:1px solid var(--line);padding:6px 10px;pointer-events:none}
@media(hover:none){.pdp-main .zoom-hint{display:none}.pdp-main{cursor:default}}
.pdp-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pdp-thumbs button{border:1px solid var(--line);background:#12100c;padding:0;cursor:pointer;aspect-ratio:1;overflow:hidden;transition:.25s var(--ease)}
.pdp-thumbs button img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs button:hover{border-color:var(--line-strong)}
.pdp-thumbs button[aria-current="true"]{border-color:var(--gold)}

.pdp-info h1{font-size:clamp(32px,4.6vw,58px);line-height:1.05}
.pdp-info .p-tag{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.rating{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--muted)}
.rating .stars{color:var(--gold);letter-spacing:.18em;font-size:13px}
.rating .stars i{color:rgba(200,163,119,.3);font-style:normal}
.price-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:22px 0 6px}
.price-row .now{font-family:var(--serif);font-size:clamp(30px,3.4vw,40px);color:var(--gold-light)}
.price-row .was{font-size:15px;color:var(--muted);text-decoration:line-through;opacity:.8}
.price-row .off{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:5px 12px}
.pdp-lede{color:var(--cream);font-size:15.5px;line-height:1.75;margin-top:16px;max-width:52ch}

.stock{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:22px;color:var(--muted)}
.stock .dot{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.stock.low .dot{background:var(--gold);box-shadow:0 0 0 3px rgba(200,163,119,.18)}
.stock.out .dot{background:#c0563f;box-shadow:0 0 0 3px rgba(192,86,63,.18)}

.buy{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.qty-row{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.qty-row .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.qty{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong)}
.qty button{width:44px;background:none;border:0;color:var(--cream);font-size:19px;cursor:pointer;transition:.2s;line-height:1}
.qty button:hover{background:rgba(200,163,119,.14);color:var(--gold-light)}
.qty input{width:56px;background:none;border:0;border-left:1px solid var(--line-strong);border-right:1px solid var(--line-strong);
  color:var(--cream);text-align:center;font-family:var(--serif);font-size:17px;outline:none;padding:11px 0;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy-actions{display:grid;gap:10px}
.buy-note{margin-top:16px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:7px}
.buy-note span{display:flex;gap:9px;align-items:flex-start}
.buy-note i{font-style:normal;color:var(--gold);flex:0 0 auto}

/* ── Colour variants ─────────────────────────────────────────────────
   The swatch is the product photograph in miniature, so it gets a real
   ring rather than a border: at 34px a 1px border reads as noise, and
   the selected state has to be unmistakable on a dark ground. */
.variants{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.v-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.v-head .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.v-head b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--gold-light)}
.v-swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:38px;height:38px;padding:3px;border-radius:50%;background:none;border:1px solid var(--line-strong);
  cursor:pointer;transition:.25s var(--ease);display:block}
.swatch span{display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.swatch:hover{border-color:var(--gold-light);transform:translateY(-2px)}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
@media(max-width:600px){.swatch{width:42px;height:42px}}   /* easier to tap */
/* On phones product.js moves this block under the thumbnails so the watch
   changes in view. There it follows the gallery, not the stock line, so it
   loses the divider it needs in the buy panel. */
@media(max-width:900px){
  .pdp-gallery .variants{margin-top:16px;padding-top:0;border-top:0}
  /* The WhatsApp/Instagram dock is fixed to this corner, so a swatch that
     reaches it would be untappable — the last colour of a five-colour
     watch did exactly that. */
  .pdp-gallery .variants .v-swatches{gap:8px;padding-right:92px}
}

/* On a card: a quiet row of dots saying "also in black and silver". */
.pcard__colours{display:flex;align-items:center;gap:5px;margin-top:8px}
.pcard__colours i{width:11px;height:11px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 0 0 1px var(--line-strong)}
.pcard__colours small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:3px}
@media(max-width:820px){.pcard__colours i{width:9px;height:9px}.pcard__colours small{display:none}}

/* Bundles (Daniel Brook only — rendered when the product declares them) */
.bundles{margin:20px 0 4px;display:grid;gap:9px}
.bundle{display:flex;align-items:center;gap:13px;border:1px solid var(--line);background:rgba(18,14,10,.45);padding:13px 15px;cursor:pointer;transition:.25s var(--ease)}
.bundle:hover{border-color:var(--line-strong)}
.bundle input{appearance:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-strong);flex:0 0 auto;position:relative;cursor:pointer}
.bundle input:checked{border-color:var(--gold)}
.bundle input:checked::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.bundle:has(input:checked){border-color:var(--gold);background:rgba(200,163,119,.07)}
.bundle .b-label{font-size:14px}
.bundle .b-price{margin-left:auto;font-family:var(--serif);color:var(--gold-light);white-space:nowrap}

/* Info blocks below the fold */
.info-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
@media(max-width:900px){.info-grid{grid-template-columns:1fr;gap:34px}}
.prose p{color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:16px;max-width:62ch}
.prose p:first-of-type{color:var(--cream)}
.specs{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.specs th,.specs td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs th{font-weight:400;color:var(--muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase;width:44%;background:rgba(18,14,10,.35)}
.specs td{color:var(--cream)}


/* Sticky mobile buy bar on the product page */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:56;display:none;gap:12px;align-items:center;
  padding:11px var(--gutter);background:rgba(18,14,10,.96);border-top:1px solid var(--line-strong);
  backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .35s var(--ease)}
.buybar.show{transform:none}
.buybar .bb-price{font-family:var(--serif);font-size:19px;color:var(--gold-light);line-height:1.1}
.buybar .bb-price small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.buybar .btn{flex:1;padding:14px 18px}
@media(max-width:900px){.buybar{display:flex}}

/* ── 9. CART & CHECKOUT ──────────────────────────────────────────────── */
.cart-layout{display:grid;grid-template-columns:1fr 370px;gap:clamp(24px,3.4vw,54px);align-items:start}
@media(max-width:900px){.cart-layout{grid-template-columns:1fr}}
.cart-lines{border-top:1px solid var(--line)}
.cline{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.cline__img{width:96px;aspect-ratio:4/5;object-fit:cover;background:#12100c;border:1px solid var(--line)}
.cline__name{font-family:var(--serif);font-size:20px;line-height:1.2}
.cline__tag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.cline__ctl{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.cline__rm{background:none;border:0;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cline__rm:hover{color:#d98a72}
.cline__money{text-align:right;white-space:nowrap}
.cline__money .now{font-family:var(--serif);font-size:19px;color:var(--gold-light)}
.cline__money .was{display:block;font-size:12px;color:var(--muted);text-decoration:line-through;opacity:.75;margin-top:3px}
@media(max-width:560px){
  .cline{grid-template-columns:78px 1fr;gap:14px}
  .cline__img{width:78px}
  .cline__money{grid-column:2;text-align:left;margin-top:6px}
  .cline__name{font-size:17px}
}
.summary-card{border:1px solid var(--line);background:rgba(36,29,22,.55);padding:26px 24px;position:sticky;top:calc(var(--header-h) + 24px)}
@media(max-width:900px){.summary-card{position:static}}
.summary-card h3{font-size:22px;margin-bottom:18px}
.srow{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px;color:var(--muted)}
.srow .free{color:var(--gold)}
.srow.total{border-top:1px solid var(--line);margin-top:12px;padding-top:15px;color:var(--cream);font-family:var(--serif);font-size:21px}
.srow.save{color:var(--gold)}
.summary-card .btn{margin-top:20px}
.secure-note{text-align:center;color:var(--muted);font-size:11.5px;margin-top:14px;line-height:1.6}

.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:clamp(24px,3.4vw,54px);align-items:start}
@media(max-width:900px){.checkout-layout{grid-template-columns:1fr}}
.form-card{border:1px solid var(--line);background:rgba(36,29,22,.55);padding:clamp(24px,3vw,38px)}
.form-card h2{font-size:clamp(24px,3vw,34px);margin-bottom:6px}
.form-card .fc-sub{color:var(--muted);font-size:14px;margin-bottom:26px}
.form-error{display:none;color:#d98a72;font-size:13.5px;text-align:center;margin-top:12px}
.form-error.show{display:block}
.wa-help{display:block;text-align:center;margin-top:16px;font-size:12px;color:var(--wa)}
.order-success{text-align:center;padding:50px 20px;border:1px solid var(--line);background:rgba(36,29,22,.55)}
.order-success .tick{font-size:46px;color:var(--gold);line-height:1}
.order-success h2{font-family:var(--serif);font-size:30px;color:var(--gold-light);margin:14px 0 8px}
.order-success p{color:var(--muted);font-size:14.5px;max-width:44ch;margin:0 auto}
.order-success .oid{font-family:var(--serif);color:var(--cream);letter-spacing:.12em;margin-top:14px;font-size:17px}
.mini-lines{margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:8px}
.mini-line{display:flex;gap:12px;align-items:center;padding:8px 0;font-size:13.5px}
.mini-line img{width:46px;aspect-ratio:4/5;object-fit:cover;background:#12100c;border:1px solid var(--line)}
.mini-line .ml-name{flex:1;line-height:1.35}
.mini-line .ml-name span{display:block;color:var(--muted);font-size:11.5px}
.mini-line .ml-money{font-family:var(--serif);color:var(--gold-light);white-space:nowrap}

/* Toast, shown when something is added to the cart */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:85;display:flex;align-items:center;gap:14px;
  background:#161109;border:1px solid var(--gold);padding:13px 20px;box-shadow:0 16px 40px rgba(0,0,0,.55);
  transition:transform .4s var(--ease);max-width:min(420px,92vw)}
.toast.show{transform:translate(-50%,0)}
.toast:empty{display:none}
.toast img{width:40px;aspect-ratio:4/5;object-fit:cover;background:#12100c}
.toast .t-txt{font-size:13.5px;line-height:1.4}
.toast .t-txt b{display:block;font-family:var(--serif);font-weight:400;font-size:16px}
.toast a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line-strong);white-space:nowrap}
@media(max-width:600px){.toast{left:12px;right:12px;bottom:88px;transform:translateY(180%);max-width:none}.toast.show{transform:none}}

/* ── 9b. EDITORIAL / STORY / FAQ / REVIEWS ───────────────────────────── */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);align-items:center}
@media(max-width:900px){.story{grid-template-columns:1fr}}
.story .giant{font-family:var(--serif);font-size:clamp(46px,9vw,120px);line-height:.92;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 55%,#8a6a41 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold-light)}
.story .lead{font-size:16.5px;line-height:1.75;color:var(--cream)}
.story .lead b{color:var(--gold-light);font-weight:400}
.story .lead p + p{margin-top:16px;color:var(--muted)}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.why{grid-template-columns:repeat(2,1fr)}}
.why .w{border:1px solid var(--line);background:rgba(36,29,22,.45);padding:26px 22px;transition:.3s var(--ease)}
.why .w:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.why .w svg{width:26px;height:26px;color:var(--gold);margin-bottom:14px}
.why .w h3{font-size:18px;margin-bottom:8px}
.why .w p{font-size:13.5px;color:var(--muted);line-height:1.6}

.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.qa{background:rgba(36,29,22,.6);border:1px solid var(--line);padding:0 24px;transition:border-color .3s}
.qa.open{border-color:var(--line-strong)}
.qa button{width:100%;background:none;border:none;color:var(--cream);text-align:left;padding:21px 0;font-family:var(--serif);
  font-size:clamp(16px,2.2vw,21px);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa .plus{font-family:var(--serif);font-size:26px;color:var(--gold);transition:transform .3s;font-weight:300}
.qa.open .plus{transform:rotate(45deg)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s ease;color:var(--muted);font-size:15px;line-height:1.7}
.qa.open .ans{max-height:340px}
.qa .ans p{padding-bottom:21px;max-width:660px}

.rev-scroller{display:flex;gap:18px;margin:0 calc(var(--gutter) * -1);padding:6px var(--gutter) 24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;cursor:grab}
.rev-scroller.dragging{cursor:grabbing;scroll-snap-type:none}
.rev-scroller::-webkit-scrollbar{height:4px}
.rev-scroller::-webkit-scrollbar-track{background:rgba(200,163,119,.09)}
.rev-scroller::-webkit-scrollbar-thumb{background:var(--line-strong)}
.rev-card{flex:0 0 min(370px,82vw);scroll-snap-align:start;background:rgba(36,29,22,.74);border:1px solid var(--line);
  padding:28px 26px;display:flex;flex-direction:column;gap:14px;transition:border-color .3s,transform .3s}
.rev-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.rev-card .stars{color:var(--gold);font-size:13px;letter-spacing:.2em}
.rev-card .stars i{color:rgba(200,163,119,.3);font-style:normal}
.rev-card p{font-size:15px;line-height:1.75;color:var(--cream)}
.rev-card .who{margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.rev-card .who b{display:block;font-family:var(--serif);font-weight:400;font-size:17px;color:var(--gold-light)}
.rev-card .who span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rev-card.ar{direction:rtl;text-align:right;font-family:var(--ar)}
.rev-card.ar p{font-size:15.5px;line-height:1.95}
.rev-card.ar .who b{font-family:var(--ar);font-size:16px;font-weight:500}
.rev-card.ar .who span{letter-spacing:0;text-transform:none;font-size:12.5px}
.rev-nav{display:flex;gap:10px}
.rev-nav button{width:46px;height:46px;border:1px solid var(--line-strong);background:rgba(36,29,22,.6);color:var(--gold-light);
  font-family:var(--serif);font-size:20px;line-height:1;cursor:pointer;transition:.25s}
.rev-nav button:hover:not(:disabled){background:var(--gold);color:#191410;border-color:var(--gold)}
.rev-nav button:disabled{opacity:.28;cursor:default}
.hero-from{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.hero-from:hover{color:var(--gold-light)}

@media(max-width:820px){.rev-nav{display:none}}

/* Reviews written by customers on a product page, and the form that
   sends them. Deliberately plain: it borrows the review card and the
   .field form styles that already exist rather than inventing a look. */
.own-rev-cta{margin-top:26px;text-align:center}
.own-rev-form{max-width:520px;margin:20px auto 0;text-align:left}
.own-rev-form .btn{width:100%}
.own-rev-note{margin-top:12px;font-size:12.5px;color:var(--muted);text-align:center}
.own-rev-empty{color:var(--muted);font-size:15px;text-align:center;padding:10px 0 4px}
.own-rev-thanks{color:var(--gold-light);font-family:var(--serif);font-size:19px;line-height:1.6;text-align:center;padding:16px 0}

.cta-band{text-align:center;padding:clamp(64px,10vw,140px) var(--gutter);border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 0%,rgba(200,163,119,.10),transparent 62%),var(--bg-2)}
.cta-band h2{font-size:clamp(30px,5.4vw,64px);max-width:16ch;margin:0 auto 16px}
.cta-band p{color:var(--muted);max-width:520px;margin:0 auto 26px;font-size:15px}

/* ── 10. FOOTER, CONSENT, FLOATING DOCK ──────────────────────────────── */
footer.site-foot{position:relative;z-index:10;border-top:1px solid var(--line);background:#120e0a;padding:56px var(--gutter) 96px}
.foot-grid{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid .f-logo{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--cream);font-size:15px;margin-bottom:12px}
.foot-grid .f-logo em{color:var(--gold);font-style:normal}
.foot-grid p{color:var(--muted);font-size:13px;line-height:1.7;max-width:34ch}
.foot-grid h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:400}
.foot-grid a,.foot-grid .f-priv{display:block;color:var(--muted);font-size:13.5px;padding:5px 0;background:none;border:0;
  font-family:inherit;text-align:left;cursor:pointer}
.foot-grid a:hover,.foot-grid .f-priv:hover{color:var(--gold-light)}
.foot-base{max-width:1440px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);
  font-size:12.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#120e0a;border-top:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;gap:18px 26px;flex-wrap:wrap;padding:16px var(--gutter);box-shadow:0 -12px 34px rgba(0,0,0,.4)}
.consent[hidden]{display:none}
.consent p{margin:0;color:var(--muted);font-size:13px;max-width:640px}
.consent .c-link{background:none;border:0;color:var(--gold);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.consent .c-actions{display:flex;gap:10px;flex-shrink:0}
.consent .c-btn{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 22px;
  border:1px solid var(--line-strong);background:none;color:var(--cream);cursor:pointer;transition:.2s}
.consent .c-btn:hover{border-color:var(--gold)}
.consent .c-btn.accept{background:var(--gold);border-color:var(--gold);color:#1c1610;font-weight:500}
.consent .c-btn.accept:hover{background:var(--gold-light);border-color:var(--gold-light)}
@media(max-width:600px){
  .consent{padding:10px 14px;gap:8px 12px}
  .consent p{font-size:11px;line-height:1.35}
  .consent .c-link{font-size:11px}
  .consent .c-actions{width:auto;gap:8px}
  .consent .c-btn{flex:0 0 auto;padding:8px 14px;font-size:10px;letter-spacing:.08em}
}

.social-dock{position:fixed;left:24px;bottom:24px;z-index:55;display:flex;flex-direction:column;gap:12px}
.social-dock a{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line-strong);background:rgba(18,14,10,.82);backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(0,0,0,.45);transition:transform .25s var(--ease),border-color .25s,background .25s}
.social-dock a:hover{transform:translateY(-3px)}
.social-dock svg{width:24px;height:24px;display:block}
.social-dock .s-wa{color:var(--wa)}
.social-dock .s-wa:hover{border-color:var(--wa);background:rgba(37,211,102,.14)}
.social-dock .s-ig{color:var(--gold-light)}
.social-dock .s-ig:hover{border-color:var(--gold);background:rgba(200,163,119,.14)}
body.has-buybar .social-dock{bottom:88px}
/* Phones: a two-column grid leaves no free margin, so a dock on the left
   sat on top of the left card's name and price. It becomes a small row in
   the bottom-right corner. */
@media(max-width:600px){
  .social-dock{left:auto;right:12px;bottom:14px;flex-direction:row;gap:8px}
  .social-dock a{width:42px;height:42px}
  .social-dock svg{width:20px;height:20px}
  body.has-buybar .social-dock{bottom:84px}
}

.pmodal{position:fixed;inset:0;z-index:90;background:rgba(10,7,4,.72);backdrop-filter:blur(4px);display:flex;
  align-items:center;justify-content:center;padding:20px}
.pmodal[hidden]{display:none}
.pmodal .box{background:var(--panel);border:1px solid var(--line-strong);max-width:560px;width:100%;max-height:82vh;
  overflow-y:auto;padding:34px 30px;position:relative}
.pmodal h3{font-family:var(--serif);font-size:24px;color:var(--gold-light);margin-bottom:14px}
.pmodal p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:12px}
.pmodal b{color:var(--cream);font-weight:400}
.pmodal a{color:var(--gold)}
.pmodal .x{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.pmodal .x:hover{color:var(--gold)}

/* Static content pages (about / contact) */
.rich{max-width:760px}
.rich h2{font-size:clamp(24px,3.2vw,38px);margin:44px 0 14px}
.rich h2:first-child{margin-top:0}
.rich p{color:var(--muted);font-size:15.5px;line-height:1.85;margin-bottom:16px}
.rich p b{color:var(--cream);font-weight:400}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{border:1px solid var(--line);background:rgba(36,29,22,.5);padding:28px 24px;transition:.3s var(--ease)}
.contact-card:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.contact-card svg{width:26px;height:26px;color:var(--gold);margin-bottom:14px}
.contact-card h3{font-size:19px;margin-bottom:7px}
.contact-card p{color:var(--muted);font-size:13.5px;line-height:1.6}
.contact-card .c-val{display:block;margin-top:10px;color:var(--gold-light);font-size:15px;font-family:var(--serif)}

/* ── 14. THE ENTRANCE QUESTION ────────────────────────────────────────
   A compact pop-up, not a page. It is deliberately small enough that the
   shop stays visible around it on every screen: a customer can see they
   have arrived somewhere real before answering anything, and a dialog you
   can see past reads as a question rather than a wall.

   Animated in, not transitioned in. A transition needs a class toggled
   after insertion, and anything that stops that landing — a background
   tab, a stalled frame, a script error a line earlier — leaves a
   full-screen element at opacity 0 that still swallows every click and
   holds the scroll lock. An animation carries its own end state, so the
   resting state is VISIBLE and nothing has to succeed after mount. */
/* The blur is animated, not just the opacity. Fading a layer that
   already carries a finished 9px blur makes the whole page appear to
   snap out of focus in one frame — the dimming eases in politely while
   the background lurches. Growing the blur from 0 alongside the tint is
   what makes it read as the shop settling back rather than a panel being
   slapped on top. */
@keyframes bgate-in {
  from { background-color:rgba(10,7,4,0);
         backdrop-filter:blur(0) saturate(1);
         -webkit-backdrop-filter:blur(0) saturate(1) }
  to   { background-color:rgba(10,7,4,.38);
         backdrop-filter:blur(9px) saturate(.9);
         -webkit-backdrop-filter:blur(9px) saturate(.9) }
}
/* Rises a little further and settles, rather than appearing already in
   place. The overshoot in the curve is slight on purpose: this is a shop,
   not a toy. */
@keyframes bgate-card-in {
  from { opacity:0; transform:translateY(18px) scale(.965) }
  to   { opacity:1; transform:none }
}
/* The four choices arrive just behind the card, one after another, so the
   eye is led down them in the order they should be read. */
@keyframes bgate-opt-in {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:none }
}

.bgate{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:18px;background:rgba(10,7,4,.38);backdrop-filter:blur(9px) saturate(.9);-webkit-backdrop-filter:blur(9px) saturate(.9);
  animation:bgate-in .55s cubic-bezier(.33,1,.68,1) both}
.bgate.is-closing{animation:bgate-in .32s cubic-bezier(.33,1,.68,1) reverse both;pointer-events:none}

.bgate-card{position:relative;width:min(400px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;
  background:var(--bg-2);border:1px solid var(--line-strong);
  /* The rest of the shop is square-edged — the cards, the buttons, the
     image frames. This one panel is deliberately not: it is the only
     thing that floats above the page rather than sitting in it, and the
     rounding is what separates "a dialog" from "a section". */
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  padding:26px 24px 20px;text-align:center;
  animation:bgate-card-in .5s cubic-bezier(.16,1,.3,1) .1s both}
.bgate-card h2{font-family:var(--serif);font-weight:400;color:var(--cream);
  font-size:21px;margin:6px 0 6px;line-height:1.25}
.bgate-sub{color:var(--muted);font-size:13px;line-height:1.55;margin-bottom:18px}
.bgate-card .overline{font-size:9.5px}

/* Top-right, because that is where a hand goes looking for the way out. */
.bgate-x{position:absolute;top:8px;right:10px;background:none;border:0;cursor:pointer;
  color:var(--muted);font-size:26px;line-height:1;padding:4px 8px;transition:color .2s}
.bgate-x:hover{color:var(--gold-light)}

.bgate-opts{display:grid;gap:8px;text-align:left}
/* Each choice is one line of text and nothing else. The stock counts that
   used to sit on the right were removed: they made a shop with three
   watches look like a shop with three watches, and a range that is
   temporarily empty advertised itself as empty on the front door. */
.bgate-opt{display:block;padding:13px 15px;border:1px solid var(--line-strong);
  border-radius:10px;background:rgba(18,14,10,.5);text-decoration:none;
  font-family:var(--serif);font-weight:400;font-size:16px;color:var(--cream);line-height:1.25;
  transition:border-color .2s,background .2s,color .2s}
.bgate-opt{animation:bgate-opt-in .42s cubic-bezier(.16,1,.3,1) both}
.bgate-opt:nth-child(1){animation-delay:.22s}
.bgate-opt:nth-child(2){animation-delay:.29s}
.bgate-opt:nth-child(3){animation-delay:.36s}
.bgate-opt:nth-child(4){animation-delay:.43s}
.bgate-opt:hover,.bgate-opt:focus-visible{border-color:var(--gold);
  background:rgba(200,163,119,.09);color:var(--gold-light);outline:none}

.bgate-skip{margin-top:14px;background:none;border:0;cursor:pointer;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:8px;transition:color .2s}
.bgate-skip:hover{color:var(--gold-light)}

@media(max-width:400px){
  .bgate-opt{font-size:15px;padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){
  .bgate,.bgate-card,.bgate-opt{animation-duration:.01ms;animation-delay:0s}
  .bgate-opt{transition:none}
}

/* ═══ PDP phone header ══════════════════════════════════════════════
   Measured 2026-09-26 at 375×812: product name at 847px, price at
   971px, Add to Cart at 1367px — all below a fold that is only ~650px
   inside the Instagram in-app browser where 91% of traffic arrives.
   Clarity showed 24s of active time and a 3.2% add-to-cart rate, so
   the first screen has to do the selling. Phones only; ≥900px the buy
   panel already sits beside the gallery. */
.pdp-quick{display:none}
@media(max-width:900px){
  .pdp-quick{display:block;margin-bottom:16px}
  .pdp-quick .q-name{font-family:var(--serif);font-size:clamp(26px,7.4vw,36px);line-height:1.06;margin-top:5px}
  .pdp-quick .price-row{margin:12px 0 0}
  .pdp-quick .price-row .now{font-size:30px}
  .pdp-trust{list-style:none;padding:0;margin:13px 0 0;display:flex;flex-wrap:wrap;gap:5px 14px;
    font-size:12px;color:var(--muted)}
  .pdp-trust li{white-space:nowrap}

  /* The buy panel repeats all of this further down, so hide its copy
     rather than showing the name and price twice. The h1 is only
     VISUALLY hidden — it stays in the accessibility tree and in the
     rendered DOM that crawlers read. */
  .pdp-info > .overline,
  .pdp-info > .p-tag,
  .pdp-info > .price-row{display:none}
  .pdp-info > h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

  /* A 4:5 hero is 469px tall on a 375px screen and pushed everything
     below the fold on its own. Square buys back ~94px. */
  .pdp-main{aspect-ratio:1/1}
}

/* Breadcrumbs cost two lines at the top of the first screen and nobody
   navigates by them after clicking an ad. The server-rendered
   BreadcrumbList schema is unaffected. */
@media(max-width:600px){ .crumbs{display:none} }

/* ═══ Checkout: receipt first on phones ═════════════════════════════
   The page used to open with a "Step 2 of 2 / Cash on delivery" header
   that pushed the first field to 463px and the order itself below the
   whole form. Clarity showed visitors clicking Order Now and leaving
   checkout in 4–15 seconds, so the first thing they see is now what
   they are actually buying and what it costs. Desktop is untouched —
   the summary already sits beside the form in the right column. */
/* Hidden on desktop, where the full receipt sits in the right column. */
.sum-toggle{display:none}

@media(max-width:900px){
  /* Receipt first, then full-width fields. Two columns was tried on
     2026-09-27 and reverted: at 375px it left a 165px name input and a
     133px receipt, and typing is already the step visitors abandon.
     2026-10-04: the receipt is still first but COLLAPSED to one line -
     open it costs one tap, and the first field moves ~500px up the page. */
  .summary-card{order:-1;margin-bottom:14px;padding:0}
  .sum-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
    background:none;border:0;padding:16px 18px;color:var(--cream);font:inherit;cursor:pointer;text-align:right}
  .sum-toggle .st-label{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
  .sum-toggle .st-label b{font-family:var(--serif);font-size:18px;color:var(--gold-light);letter-spacing:0;text-transform:none}
  .sum-toggle .st-hint{font-size:11.5px;color:var(--muted)}
  .sum-toggle i{font-style:normal;color:var(--gold);margin-right:4px;display:inline-block;transition:transform .2s}
  .summary-card.open .sum-toggle i{transform:rotate(180deg)}
  .sum-body{display:none;padding:0 18px 18px}
  .summary-card.open .sum-body{display:block}
  /* The one button that matters stays reachable while the form is filled. */
  #placeOrder{position:sticky;bottom:12px;z-index:40;box-shadow:0 10px 28px rgba(0,0,0,.5)}
}


/* ── Short windows ───────────────────────────────────────────────────────
   Placed at the END of the file on purpose. A media query carries no extra
   specificity, so these same rules higher up were simply overridden by the
   ordinary .hero rules further down — the ticker hid, the type did not.
   The hero gives up padding and a few points of headline so the watches
   keep a usable band on a 560px window or a phone in landscape. */
@media(max-height:680px){
  .hero{padding-top:calc(var(--header-h) + 16px);padding-bottom:clamp(34px,6vh,64px);gap:9px}
  .hero h1{font-size:clamp(26px,3.2vw,36px)}
  .hero .sub{font-size:13.5px;line-height:1.6;max-width:52ch}
  .hero .hero-cta{margin-top:8px}
  .scrollcue{display:none}
}

/* WhatsApp phone gate (js/site.js waGate) */
.pmodal .wa-phone{max-width:400px;position:relative}
.wa-phone input{width:100%;padding:13px 14px;margin:4px 0 10px;background:var(--bg,#191410);border:1px solid var(--line-strong);color:var(--cream);font-size:17px;letter-spacing:.04em;border-radius:2px}
.wa-phone input:focus{outline:none;border-color:var(--gold)}
.wa-phone .wa-phone-err{color:#e08a7a;font-size:13px;margin:-4px 0 10px}
.wa-phone .wa-phone-err[hidden]{display:none}
.wa-phone .btn{width:100%;margin-top:4px}