:root{
  /* FANCY AK — light theme, modelled on Shopify's Dawn.
     Dawn is almost colourless on purpose: near-black text on white, one
     grey for secondary surfaces, hairline borders, and no gradients. The
     product photography is meant to supply all the colour.

     The variable names are unchanged from the previous dark theme so all
     1,000 lines of existing rules keep working — only the values moved.
     --gold* are now neutrals; the names are historical. */
  --bg:#ffffff;
  --bg-2:#f3f3f3;          /* alternating section bands */
  --bg-3:#fafafa;          /* cards, inputs */
  --gold:#121212;          /* primary ink — borders, labels, accents */
  --gold-2:#121212;        /* headings, prices */
  --gold-3:#5a5a5a;        /* hover / secondary */
  --neon:#121212;          /* was a gradient; now a solid, per Dawn */
  --ink:#121212;
  --muted:#6b6b6b;         /* passes contrast on white, unlike Dawn's lighter grey */
  --line:rgba(18,18,18,.12);
  --line-strong:rgba(18,18,18,.28);
  --shadow:none;           /* Dawn has no card shadows */
  --glow:none;
  --serif:'Inter',system-ui,-apple-system,sans-serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --r:0px;                 /* Dawn's corners are square */
}
html[dir="rtl"]{--serif:'Cairo',sans-serif;--sans:'Cairo',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Pinned rather than overflow:hidden — see lockScroll() in app.js.
   position:fixed is what actually stops iOS Safari scrolling the page
   behind an overlay; `top` is set inline to preserve the scroll offset. */
body.locked{position:fixed;inset-inline:0;width:100%;overflow:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* 16px minimum: iOS Safari zooms the whole page when a focused input is
   smaller, which throws the customer out of the checkout layout. */
input,select,textarea{font-family:inherit;font-size:16px}
a{color:inherit;text-decoration:none}
::selection{background:#121212;color:#fff}
.wrap{width:min(1240px,92vw);margin-inline:auto}
.gold{color:var(--gold-2)}
.eyebrow{
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:18px;
}
html[dir="rtl"] .eyebrow{letter-spacing:0}
h1,h2,h3{font-family:var(--serif);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.h2{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.01em}
.lead{color:var(--muted);font-size:16px;max-width:56ch}

/* ---------- Scroll progress ---------- */
#progress{position:fixed;top:0;inset-inline-start:0;height:2px;width:0;
  background:var(--neon);z-index:200;transition:width .1s linear}

/* ---------- Nav ---------- */
header{position:fixed;top:0;inset-inline:0;z-index:120;transition:.45s cubic-bezier(.2,.7,.3,1)}
header.solid{background:rgba(7,7,10,.82);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);
  font-size:25px;letter-spacing:.3em;font-weight:600}
html[dir="rtl"] .brand{letter-spacing:0}
.brand .mark{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;position:relative;flex:0 0 auto}
.brand .mark::before{content:"";position:absolute;width:1px;height:9px;background:var(--gold-2);
  top:5px;left:50%;transform-origin:bottom center;animation:tick 6s linear infinite}
.brand .mark::after{content:"";position:absolute;width:1px;height:6px;background:var(--gold);
  top:8px;left:50%;transform-origin:bottom center;animation:tick 36s linear infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.links{display:flex;gap:34px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
html[dir="rtl"] .links{letter-spacing:0;text-transform:none;font-size:15px}
.links a{position:relative;padding:4px 0;color:#d8d5cd;transition:color .3s}
.links a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;height:1px;width:0;
  background:var(--gold);transition:width .35s}
.links a:hover{color:var(--gold-2)}
.links a:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:14px}
.lang{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:12px;
  letter-spacing:.1em;color:var(--gold-2);transition:.3s}
.lang:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.cart-btn{position:relative;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:12px;letter-spacing:.1em;display:flex;align-items:center;gap:8px;transition:.3s}
.cart-btn:hover{border-color:var(--gold);color:var(--gold-2)}
.cart-count{background:var(--neon);color:#ffffff;font-weight:700;font-size:10.5px;
  min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px}
.burger{display:none;font-size:22px;line-height:1}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#scene{position:absolute;inset:0;z-index:1}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 45%,transparent 0%,rgba(7,7,10,.55) 70%,var(--bg) 100%)}
.hero-inner{position:relative;z-index:3;pointer-events:none;padding-top:80px}
.hero-inner *{pointer-events:auto}
.hero h1{font-size:clamp(48px,9vw,132px);line-height:.92;letter-spacing:-.02em;margin-bottom:22px}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{display:block;font-style:italic;color:var(--gold-2);
  animation:rise 1.1s cubic-bezier(.16,1,.3,1) both .35s}
.hero h1 b{display:block;font-weight:400;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both .2s}
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.hero .lead{margin-bottom:34px;animation:fade 1s ease both .8s}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;animation:fade 1s ease both 1s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;border-radius:var(--r);transition:.35s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
html[dir="rtl"] .btn{letter-spacing:0;text-transform:none;font-size:15px}
.btn-gold{background:var(--neon);color:#ffffff;font-weight:800}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(201,162,39,.07)}
.scroll-hint{position:absolute;bottom:26px;inset-inline-start:50%;transform:translateX(-50%);
  z-index:4;font-size:10.5px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint::after{content:"";width:1px;height:44px;
  background:linear-gradient(var(--gold),transparent);animation:drop 2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
.drag-hint{position:absolute;z-index:4;bottom:26px;inset-inline-end:4vw;font-size:11px;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding:15px 0}
.marquee-track{display:flex;gap:60px;width:max-content;animation:slide 34s linear infinite}
html[dir="rtl"] .marquee-track{animation-direction:reverse}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track span{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:60px;white-space:nowrap}
html[dir="rtl"] .marquee-track span{letter-spacing:0;text-transform:none;font-size:14px}
.marquee-track span::after{content:"◆";color:var(--gold);font-size:8px}

/* ---------- Sections ---------- */
section{padding:110px 0;position:relative}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;flex-wrap:wrap;margin-bottom:52px}
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Category 3D cards ---------- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1400px}
.cat{position:relative;height:400px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .5s;
  background:linear-gradient(160deg,var(--bg-3),#08080c);cursor:pointer;will-change:transform}
.cat:hover{box-shadow:var(--shadow),0 0 0 1px var(--gold)}
.cat .glow{position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(201,162,39,.2),transparent 65%)}
.cat:hover .glow{opacity:1}
.cat .art{position:absolute;inset:0;display:grid;place-items:center;
  transform:translateZ(38px);transition:transform .5s;font-size:120px;color:var(--gold);opacity:.9}
.cat .body{position:absolute;inset-inline:0;bottom:0;padding:28px;transform:translateZ(60px);
  background:linear-gradient(transparent,rgba(5,5,8,.94) 45%)}
.cat h3{font-size:27px;margin-bottom:6px}
.cat p{font-size:13px;color:var(--muted)}
.cat .go{margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);
  opacity:0;transform:translateY(8px);transition:.4s}
html[dir="rtl"] .cat .go{letter-spacing:0;text-transform:none;font-size:14px}
.cat:hover .go{opacity:1;transform:none}

/* ---------- Filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:.3s}
html[dir="rtl"] .chip{letter-spacing:0;text-transform:none;font-size:14px}
.chip:hover{color:var(--gold-2);border-color:var(--gold-3)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#000;font-weight:600}

/* ---------- Product grid ---------- */
/* No perspective, and the cards are flat.
 *
 * Both are left over from the original 3D tilt design, which the light theme
 * replaced with a plain image zoom — there is no tilt script any more. They
 * looked harmless because .card also carried overflow:hidden, and a non-visible
 * overflow forces transform-style to compute to flat, so the leftover
 * translateZ on .info did nothing. The moment the card lost its box and became
 * overflow:visible, the 3D woke up: .info was projected toward the viewer and,
 * measured against a perspective origin at the centre of a very tall grid, that
 * lifted the title roughly 50px — straight up over the photo. */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative;border:1px solid rgba(255,255,255,.07);border-radius:var(--r);
  background:linear-gradient(170deg,var(--bg-3),#0a0a0e);overflow:hidden;
  transition:border-color .4s,box-shadow .5s;
  display:flex;flex-direction:column}
.card:hover{border-color:var(--gold-3);box-shadow:var(--shadow)}
.card .thumb{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1b1b23,#0a0a0e 70%)}
.card .thumb .obj{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.card:hover .thumb .obj{transform:scale(1.09) rotate(-4deg)}
.badge{position:absolute;top:12px;inset-inline-start:12px;z-index:3;background:var(--neon);color:#ffffff;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
html[dir="rtl"] .badge{letter-spacing:0;text-transform:none;font-size:11px}
.badge.sold{background:#2a2a33;color:var(--muted)}
.card .info{padding:20px;flex:1;display:flex;flex-direction:column}
.card .cat-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
html[dir="rtl"] .card .cat-tag{letter-spacing:0;text-transform:none;font-size:12px}
.card h3{font-size:20px;margin-bottom:5px}
.card .ref{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.price-row{display:flex;align-items:baseline;gap:10px;margin-top:auto;margin-bottom:14px}
.price{font-family:var(--serif);font-size:24px;font-weight:800;color:var(--gold-2)}
.was{font-size:13px;color:var(--muted);text-decoration:line-through}
.empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--muted)}

/* ---------- Watch SVG object ---------- */
.wobj{width:100%;height:auto;filter:drop-shadow(0 24px 34px rgba(0,0,0,.65))}
.card .thumb .obj{width:74%}
.cat .art svg{width:190px}
#craftVisual svg{width:72%}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split .visual{aspect-ratio:4/5;border:1px solid var(--line);border-radius:var(--r);
  background:radial-gradient(circle at 50% 35%,#1c1c24,#08080c 72%);
  display:grid;place-items:center;position:relative;overflow:hidden}
.split .visual::before{content:"";position:absolute;width:150%;height:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:rotate(-28deg);animation:sweep 6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateY(-260px) rotate(-28deg)}50%{transform:translateY(320px) rotate(-28deg)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px}
.stat{border-top:1px solid var(--line);padding-top:14px}
.stat b{font-family:var(--serif);font-size:36px;color:var(--gold-2);display:block;line-height:1}
.stat span{font-size:11.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
html[dir="rtl"] .stat span{letter-spacing:0;text-transform:none;font-size:14px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;background:var(--bg-2);
  transition:.45s;position:relative;overflow:hidden}
.step:hover{transform:translateY(-8px);border-color:var(--gold-3)}
.step b{font-family:var(--serif);font-size:52px;color:rgba(201,162,39,.25);line-height:1;display:block;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--muted)}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{border:1px solid var(--line);border-radius:var(--r);padding:30px;background:var(--bg-2)}
.quote .stars{color:var(--gold);letter-spacing:3px;margin-bottom:14px;font-size:13px}
.quote p{font-size:14.5px;color:#ddd9d0;font-style:italic;margin-bottom:18px}
.quote .who{font-size:12px;color:var(--muted);letter-spacing:.1em}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg-2);padding:70px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:50px}
footer h4{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
html[dir="rtl"] footer h4{letter-spacing:0;text-transform:none;font-size:15px}
footer ul{list-style:none;display:grid;gap:11px;font-size:13.5px;color:var(--muted)}
footer li a:hover{color:var(--gold-2)}
.newsletter{display:flex;gap:8px;margin-top:14px}
.newsletter input{flex:1;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;color:var(--ink);font-size:13.5px}
.newsletter input:focus{outline:none;border-color:var(--gold)}
.newsletter button{background:var(--neon);color:#ffffff;padding:0 18px;border-radius:var(--r);font-weight:700;font-size:12px}
.fbot{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}

/* ---------- Drawer / Modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  z-index:140;opacity:0;visibility:hidden;transition:.4s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(430px,100vw);
  background:var(--bg-2);border-inline-start:1px solid var(--line);z-index:150;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column}
html[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.on{transform:none!important}
.drawer-head{padding:24px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center}
.drawer-head h3{font-size:22px;letter-spacing:.1em}
.x{font-size:26px;line-height:1;color:var(--muted);transition:.3s}
.x:hover{color:var(--gold-2);transform:rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;padding:20px 24px}
.drawer-foot{border-top:1px solid var(--line);padding:22px 24px;background:var(--bg-3)}
.line{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.line .pic{width:74px;height:74px;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;background:radial-gradient(circle,#1b1b23,#0a0a0e)}
.line .pic svg{width:70%}
.line .mid{flex:1;min-width:0}
.line h4{font-family:var(--serif);font-size:17px;font-weight:400;margin-bottom:3px}
.line .sub{font-size:11.5px;color:var(--muted);margin-bottom:9px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:var(--r);width:max-content}
.qty button{width:28px;height:28px;color:var(--gold-2);font-size:15px;line-height:1}
.qty button:hover{background:rgba(201,162,39,.14)}
.qty span{width:34px;text-align:center;font-size:13px}
.line .right{text-align:end;display:flex;flex-direction:column;justify-content:space-between}
.line .amt{color:var(--gold-2);font-family:var(--serif);font-size:18px}
.rm{font-size:11px;color:#8a5b5b;letter-spacing:.1em}
.rm:hover{color:#d97070}
.tot{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:9px}
.tot.big{font-size:17px;color:var(--ink);border-top:1px solid var(--line);padding-top:13px;margin-top:13px}
.tot.big b{font-family:var(--serif);font-size:27px;color:var(--gold-2);font-weight:400}
.cod-note{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:7px}
.cod-note::before{content:"⬤";color:#4caf50;font-size:7px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:.35s}
.modal.on{opacity:1;visibility:visible}
.modal-card{width:min(920px,100%);max-height:90dvh;overflow-y:auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  transform:translateY(30px) scale(.97);transition:.45s cubic-bezier(.16,1,.3,1);position:relative}
.modal.on .modal-card{transform:none}
.modal-card .x{position:absolute;top:16px;inset-inline-end:20px;z-index:5}
.qv{display:grid;grid-template-columns:1fr 1fr}
.qv .pane{background:radial-gradient(circle at 50% 40%,#1c1c24,#08080c 72%);
  display:grid;place-items:center;padding:40px;min-height:340px}
.qv .pane svg{width:78%;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(2deg)}}
.qv .det{padding:44px 40px}
.qv h2{font-size:33px;margin-bottom:8px}
.qv .desc{font-size:14.5px;color:var(--muted);margin:16px 0 22px}
.specs{list-style:none;display:grid;gap:9px;margin-bottom:24px;font-size:13.5px}
.specs li{display:flex;justify-content:space-between;border-bottom:1px dotted rgba(255,255,255,.1);padding-bottom:8px}
.specs li span:first-child{color:var(--muted)}
.specs li span:last-child{color:var(--gold-2)}
.form{padding:40px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
html[dir="rtl"] .fld label{letter-spacing:0;text-transform:none;font-size:13px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px;color:var(--ink);transition:.3s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,39,.12)}
.fld input.bad,.fld select.bad{border-color:#c05a5a}
.err{color:#d98080;font-size:11.5px;margin-top:5px;display:none}
.err.show{display:block}

/* Shake a field that failed validation.
 *
 * The red border and the message below it are the record of what is wrong;
 * this is the thing that says where. It matters most on the long form, where
 * the field at fault can be well away from the button that was just pressed.
 * The swings decay so it reads as a headshake and not a glitch. */
@keyframes shake{
  10%{transform:translateX(-6px)}  20%{transform:translateX(6px)}
  35%{transform:translateX(-4px)}  50%{transform:translateX(4px)}
  65%{transform:translateX(-2px)}  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
/* Motion is the only cue removed here; the border and the message stay. */
@media(prefers-reduced-motion:reduce){ .shake{animation:none} }
.summary{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:22px}
.ok{text-align:center;padding:64px 40px}
.ok .tick{width:78px;height:78px;border:2px solid var(--gold);border-radius:50%;display:grid;
  place-items:center;margin:0 auto 26px;font-size:36px;color:var(--gold-2);animation:pop .6s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.ok h2{font-size:36px;margin-bottom:12px}
.ok .oid{font-family:var(--serif);font-size:23px;color:var(--gold-2);letter-spacing:.12em;margin:18px 0}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:26px;inset-inline-start:50%;transform:translate(-50%,120px);
  background:var(--neon);color:#ffffff;padding:13px 26px;border-radius:999px;font-size:13px;
  font-weight:600;z-index:200;transition:transform .45s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow)}
#toast.on{transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .links{display:none}
  .links.open{display:flex;position:absolute;top:100%;inset-inline:0;flex-direction:column;
    background:var(--bg-2);border-block:1px solid var(--line);padding:22px 5vw;gap:18px}
  .burger{display:block}
  .cats{grid-template-columns:1fr}
  .cat{height:280px}
  .split{grid-template-columns:1fr;gap:34px}
  .qv{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  section{padding:72px 0}
  .drag-hint{display:none}
}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
  .card .info{padding:14px}
  .card h3{font-size:16px}
  .price{font-size:19px}
  .steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:14px}
  .brand{font-size:19px}
  .qv .det,.form{padding:28px 22px}
  .cart-btn span.lbl{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Additions for the multi-page build ---------- */

/* Hero: static until the 3D loads, so first paint never waits on WebGL */
.hero-media{position:absolute;inset:0;z-index:1;
  background:radial-gradient(60% 60% at 50% 45%,#191922 0%,#0b0b10 55%,var(--bg) 100%)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,rgba(201,162,39,.16),transparent 70%);
  animation:pulse 7s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
#scene{position:absolute;inset:0;width:100%;height:100%}
#scene[hidden]{display:none}

/* ---------- Product page ---------- */
.pdp{padding:130px 0 90px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:30px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold-2)}
.crumbs span{opacity:.5}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.pdp-stage{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);
  background:radial-gradient(circle at 50% 38%,#1c1c24,#08080c 72%);
  display:grid;place-items:center;overflow:hidden;padding:6%}
.pdp-stage img,.pdp-stage svg{width:100%;height:auto;object-fit:contain}
.gallery{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.gthumb{width:78px;height:78px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#0e0e14;transition:.3s;padding:0}
.gthumb.on,.gthumb:hover{border-color:var(--gold)}
.gthumb img{width:100%;height:100%;object-fit:cover}

.pdp-info h1{font-size:clamp(30px,4vw,46px);margin:10px 0 14px}
.pdp-info .cat-tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
html[dir="rtl"] .pdp-info .cat-tag{letter-spacing:0;text-transform:none;font-size:12.5px}
.pdp-info .price{font-size:32px}
.pdp-info .save{background:rgba(201,162,39,.16);color:var(--gold-2);font-size:12px;
  padding:4px 10px;border-radius:999px}
.stock{font-size:13px;margin:14px 0 0;display:flex;align-items:center;gap:8px}
.stock::before{content:"⬤";font-size:7px}
.stock.in{color:#7cc47f}
.stock.out{color:#c98a8a}
.pdp-info .desc{color:var(--muted);font-size:15.5px;margin:18px 0 26px}
.pdp-add{width:100%;margin-bottom:4px}
.pdp-info .specs{margin-top:30px}
.why{margin-top:34px;border-top:1px solid var(--line);padding-top:24px}
.why h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
html[dir="rtl"] .why h3{letter-spacing:0;text-transform:none;font-size:15px}
.why ul{list-style:none;display:grid;gap:10px;font-size:14px;color:var(--muted)}
.why li{display:flex;align-items:center;gap:10px}
.why li::before{content:"✓";color:var(--gold);font-size:12px}
.related{margin-top:96px}
.related .grid{grid-template-columns:repeat(4,1fr)}
.back{margin-top:60px;text-align:center}
.back a{color:var(--gold-2);font-size:13px;letter-spacing:.12em}

/* ---------- 360 spin ---------- */
.spin{position:relative;margin-top:16px;border:1px solid var(--line);border-radius:var(--r);
  background:#0b0b10;aspect-ratio:1/1;display:grid;place-items:center;cursor:grab;user-select:none}
.spin.grabbing{cursor:grabbing}
.spin-stage{width:100%;height:100%;display:grid;place-items:center;padding:6%}
.spin-stage img{width:100%;height:auto;pointer-events:none}
.spin-cta{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(7,7,10,.72);color:var(--gold-2);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;backdrop-filter:blur(2px)}
html[dir="rtl"] .spin-cta{letter-spacing:0;text-transform:none;font-size:14px}
.spin.loading::after{content:"";position:absolute;width:34px;height:34px;
  border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;
  animation:spinner .8s linear infinite}
@keyframes spinner{to{transform:rotate(360deg)}}

/* ---------- Cart drawer refinements ---------- */
.cart-empty{text-align:center;padding:70px 10px;color:var(--muted)}
.cart-empty .mark-lg{font-size:44px;opacity:.35;margin-bottom:14px}
.cart-empty .strong{color:var(--ink);margin-bottom:6px}
.cart-empty .dim{font-size:13px}
.line .pic{display:grid;place-items:center;overflow:hidden}
.line .pic img{width:100%;height:100%;object-fit:cover}
.line .pic .ph{width:60%;height:60%;border:1px solid var(--line);border-radius:50%}
.line h4 a:hover{color:var(--gold-2)}
.tot.rule{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.co-title{font-family:var(--serif);font-size:34px;margin-bottom:8px;font-weight:400}
.ok-tot{max-width:340px;margin:0 auto 26px}

/* ---------- Policy / document pages ---------- */
.doc{padding:140px 0 90px}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(32px,5vw,52px);margin-bottom:18px}
.doc .draft{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:11.5px;color:var(--gold-2);margin-bottom:36px}
.doc section{margin-bottom:32px}
.doc h2{font-size:21px;margin-bottom:8px;color:var(--gold-2)}
.doc p{color:var(--muted);font-size:15px}
.doc .dim{color:var(--muted);font-size:12.5px;margin-top:50px;
  border-top:1px solid var(--line);padding-top:18px}

/* ---------- Cards become links ---------- */
.card .thumb{display:grid}
.card h3 a{color:inherit;transition:color .3s}
.card h3 a:hover{color:var(--gold-2)}
.card[hidden]{display:none}

@media(max-width:900px){
  .pdp-grid{grid-template-columns:1fr;gap:34px}
  .pdp{padding:110px 0 70px}
  .related .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .related .grid{grid-template-columns:repeat(2,1fr)}
  .doc{padding:110px 0 60px}
}

/* ---------- Colour variants ---------- */
.colours{margin:22px 0 4px}
.colours-label{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}
.colours-label b{color:var(--ink);font-weight:500}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:.3s;position:relative}
.swatch span{width:28px;height:28px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.swatch:hover{border-color:var(--gold-3);transform:translateY(-2px)}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.swatch.out::after{content:"";position:absolute;width:42px;height:1px;
  background:#c98a8a;transform:rotate(-45deg)}

.card-swatches{display:flex;align-items:center;gap:5px;margin:-6px 0 12px}
.card-swatches span{width:12px;height:12px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.card-swatches em{font-size:11px;color:var(--muted);font-style:normal;margin-inline-start:4px}

/* ---------- Real photos fill the card square ----------
   The generated artwork is a drawing and should sit inside the tile with
   room around it. A photograph should fill the tile and crop, otherwise
   mixed aspect ratios letterbox and every card looks a different size. */
.card .thumb.photo{padding:0;background:#fff}
.card .thumb.photo .obj{width:100%;height:100%}
.card .thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Rotating a cropped photo exposes its edges, so photos only scale. */
.card:hover .thumb.photo .obj{transform:translateZ(40px) scale(1.05) rotate(0deg)}

/* Product photos usually come on a white background; a soft inner edge stops
   the tile looking like a bright rectangle pasted onto the dark page. */
.card .thumb.photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -40px 40px -40px rgba(0,0,0,.18);
}

/* Same treatment for the gallery thumbnails under the main product image */
.gthumb img{object-fit:cover}

/* ================= Mobile conversion ================= */

/* --- sticky buy bar: phones only --- */
.buybar{display:none}
@media(max-width:860px){
  .buybar{
    display:flex;align-items:center;gap:14px;
    position:fixed;inset-inline:0;bottom:0;z-index:90;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,10,14,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .buybar-price{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.15}
  .buybar-price .price{font-size:20px}
  .buybar-price .was{font-size:12px}
  .buybar .btn{flex:1;padding:15px 18px;margin:0}
  /* keep the footer clear of the bar */
  .pdp{padding-bottom:110px}
}


/* --- bigger tap targets --- */
@media(max-width:860px){
  .chip{padding:11px 18px}
  .qty button{width:38px;height:38px;font-size:18px}
  .gthumb{width:64px;height:64px}
  .swatch{width:46px;height:46px}
  .swatch span{width:32px;height:32px}
  .x{font-size:32px;padding:4px 8px}
}

/* --- shorter hero so products appear sooner for ad traffic --- */
@media(max-width:860px){
  .hero{min-height:auto;padding:120px 0 56px}
  .hero h1{font-size:clamp(40px,12vw,64px)}
  .hero .lead{font-size:15px}
  .scroll-hint{display:none}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1;justify-content:center}
}

/* --- product page: swipeable gallery --- */
@media(max-width:860px){
  .gallery{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .gallery::-webkit-scrollbar{display:none}
  .gthumb{flex:0 0 auto;scroll-snap-align:start}
}

/* --- checkout on a small screen --- */
@media(max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-height:94dvh;border-radius:12px 12px 0 0;width:100%}
  .form{padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
  .frow{grid-template-columns:1fr;gap:0}
  .drawer-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* ================= Brand identity ================= */

/* Smaller marks. The logo identifies the shop; the products sell it. */
.brand{padding:0;gap:0}
.brand img{display:block;height:30px;width:auto}
.foot-brand{margin-bottom:14px}
.foot-brand img{height:34px}
@media(max-width:640px){ .brand img{height:26px} }
.brand .mark{display:none}

/* hero: compact, centred, one clear action */
.hero-inner{text-align:center;max-width:640px;margin-inline:auto}
.hero-logo{
  width:186px;height:auto;margin:0 auto 22px;
  animation:logoIn .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes logoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(30px,5vw,52px);margin-bottom:16px}
.hero h1 span i{
  background:var(--neon);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;font-style:normal;
}
.hero .lead{margin-inline:auto;font-size:15.5px}
.hero-cta{justify-content:center}
.hero-trust{
  margin-top:22px;font-size:12px;color:var(--muted);letter-spacing:.02em;
}
html[dir="rtl"] .hero-trust{font-size:13.5px}

/* one soft wash instead of three stacked glows */
.hero-media{background:
  radial-gradient(70% 60% at 50% 34%,rgba(34,217,255,.13),transparent 68%),
  #07070a}
.hero-media::after{display:none}

@media(max-width:860px){
  .hero-logo{width:150px;margin-bottom:18px}
  .hero h1{font-size:clamp(28px,9vw,40px)}
}

/* ================= Simpler, more colourful ================= */

/* Flat cards: a hairline and a colour shift on hover, no heavy shadow. */
.card{box-shadow:none;background:var(--bg-2)}
.card:hover{border-color:var(--gold);box-shadow:none}
.card .thumb{background:#0e0e18}
.cat{box-shadow:none}
.cat:hover{box-shadow:none;border-color:var(--gold)}

/* ---- Collections: two columns, photo-led ---- */
.cats{grid-template-columns:repeat(2,1fr);gap:16px}
.cat{height:340px}

/* Tiles are equal by default — collections come in pairs, so the grid stays a
   clean 2 x N. 340px would make each cell 1.65:1 while the phone cell is
   0.83:1, and a square image cropped to both loses too much. 420 narrows it. */
.cat{height:420px}

/* One tile can span the row. aspect-ratio rather than a height, so the 8:3
   artwork keeps its framing at every screen width instead of being sliced. */
.cat.wide{grid-column:1 / -1;height:auto;aspect-ratio:8/3}

/* The Sale artwork already says SPECIAL SALE, so repeating it in the overlay
   just covers the watch. Keep the words for screen readers and search engines,
   hide them visually. */
.cat[data-cat="sale"] .body{
  position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;background:none}
.cat[data-cat="sale"] .cat-photo{filter:none}
.cat[data-cat="sale"]:hover .cat-photo{filter:brightness(1.06)}

/* The accent comes from the template so it survives the tiles being
   filtered out — nth-child would recolour everything when one disappears. */
.cat{--accent:#22d9ff;
  border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 10%,#0c0c14),#0a0a12)}
.cat:hover{border-color:var(--accent)}
.cat .glow{z-index:2;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
  color-mix(in srgb,var(--accent) 26%,transparent),transparent 65%)}
.cat .go{color:var(--accent)}
.cat h3{font-size:22px}

/* Photo fills the tile; the text sits on a scrim so it stays legible over
   any image, and the whole thing lifts slightly on hover. */
.cat .cat-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateZ(0) scale(1.02);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s;
  filter:brightness(.82) saturate(1.05)}
.cat:hover .cat-photo{transform:translateZ(0) scale(1.09);filter:brightness(.95) saturate(1.12)}
.cat .body{z-index:3;padding:22px;
  background:linear-gradient(transparent,rgba(4,4,8,.55) 34%,rgba(4,4,8,.92))}
.cat p{color:#c9c9d4}

/* Two columns on phones as well: four tiles then sit inside one screen,
   which matters when nearly everyone arrives from an ad. */
@media(max-width:860px){
  .cats{grid-template-columns:repeat(2,1fr);gap:10px}
  .cat{height:220px}
  .cat.wide{height:auto;aspect-ratio:8/3}
  .cat .body{padding:14px}
  .cat h3{font-size:16px;margin-bottom:2px}
  .cat p{font-size:11px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cat .go{display:none}
}

/* Alternate the section labels through the palette. */
section:nth-of-type(even) .eyebrow{color:#ff4fb0}
section:nth-of-type(odd) .eyebrow{color:#22d9ff}

/* Steps and quotes: flat tiles, coloured numerals. */
.step{background:var(--bg-2);border-color:rgba(255,255,255,.07)}
.step:hover{transform:none;border-color:var(--gold)}
.step b{-webkit-text-fill-color:transparent;background:var(--neon);
  -webkit-background-clip:text;background-clip:text;opacity:1;font-size:40px}
.quote{background:var(--bg-2);border-color:rgba(255,255,255,.07)}
.quote p{font-style:normal}

/* Calmer headings and less letter-spacing shouting. */
.h2{font-size:clamp(26px,3.4vw,40px)}
.eyebrow{letter-spacing:.16em;margin-bottom:12px}
section{padding:80px 0}
@media(max-width:860px){ section{padding:56px 0} }

/* The quieter marquee reads as a fact strip, not a banner. */
.marquee{padding:11px 0;background:#0a0a12}
.marquee-track span{font-size:11px;letter-spacing:.14em;color:#7f8399}
.marquee-track span::after{color:var(--gold);opacity:.5}

/* ================= Product page ================= */
.pdp{padding:112px 0 90px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:26px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold)}
.crumbs span{opacity:.5}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start}
.pdp-stage{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);
  background:#0e0e18;display:grid;place-items:center;overflow:hidden;padding:5%}
.pdp-stage img,.pdp-stage svg{width:100%;height:auto;object-fit:contain}
.gallery{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gthumb{width:74px;height:74px;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#0e0e18;transition:.25s;padding:0}
.gthumb.on,.gthumb:hover{border-color:var(--gold)}
.gthumb img{width:100%;height:100%;object-fit:cover}

.pdp-info h1{font-size:clamp(26px,3.4vw,38px);margin:8px 0 12px}
.pdp-info .cat-tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
html[dir="rtl"] .pdp-info .cat-tag{letter-spacing:0;text-transform:none;font-size:12.5px}
.pdp-info .price{font-size:30px}
.pdp-info .save{background:var(--neon);color:#ffffff;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px}
.stock{font-size:13px;margin:12px 0 0;display:flex;align-items:center;gap:8px}
.stock::before{content:"";width:7px;height:7px;border-radius:50%}
.stock.in{color:#5ee6a8}
.stock.in::before{background:#5ee6a8}
.stock.out{color:#ff8fa8}
.stock.out::before{background:#ff8fa8}
.pdp-info .desc{color:var(--muted);font-size:15.5px;margin:16px 0 24px}
.pdp-add{width:100%;margin-bottom:4px}
.pdp-info .specs{margin-top:26px}
.why{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.why h3{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
html[dir="rtl"] .why h3{letter-spacing:0;text-transform:none;font-size:15px}
.why ul{list-style:none;display:grid;gap:9px;font-size:14px;color:var(--muted)}
.why li{display:flex;align-items:center;gap:10px}
.why li::before{content:"✓";color:#5ee6a8;font-size:12px}
.related{margin-top:80px}
.related .grid{grid-template-columns:repeat(4,1fr)}
.back{margin-top:52px;text-align:center}
.back a{color:var(--gold);font-size:13px}

/* ---------- 360 spin ---------- */
.spin{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:var(--r);
  background:#0e0e18;aspect-ratio:1/1;display:grid;place-items:center;cursor:grab;user-select:none}
.spin.grabbing{cursor:grabbing}
.spin-stage{width:100%;height:100%;display:grid;place-items:center;padding:5%}
.spin-stage img{width:100%;height:auto;pointer-events:none}
.spin-cta{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(7,7,10,.7);color:var(--gold);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}
html[dir="rtl"] .spin-cta{letter-spacing:0;text-transform:none;font-size:14px}
.spin.loading::after{content:"";position:absolute;width:32px;height:32px;
  border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;
  animation:spinner .8s linear infinite}
@keyframes spinner{to{transform:rotate(360deg)}}

/* ---------- Cart drawer ---------- */
.cart-empty{text-align:center;padding:64px 10px;color:var(--muted)}
.cart-empty .mark-lg{font-size:40px;opacity:.3;margin-bottom:12px}
.cart-empty .strong{color:var(--ink);margin-bottom:6px}
.cart-empty .dim{font-size:13px}
.line .pic{display:grid;place-items:center;overflow:hidden;background:#0e0e18}
.line .pic img{width:100%;height:100%;object-fit:cover}
.line .pic .ph{width:56%;height:56%;border:1px solid var(--line);border-radius:50%}
.line h4 a:hover{color:var(--gold)}
.tot.rule{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.co-title{font-size:28px;margin-bottom:8px;font-weight:800}
.ok-tot{max-width:340px;margin:0 auto 24px}

/* ---------- Policy pages ---------- */
.doc{padding:124px 0 84px}
.doc .wrap{max-width:720px}
.doc h1{font-size:clamp(28px,4.4vw,42px);margin-bottom:16px}
.doc .draft{display:inline-block;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:11.5px;color:var(--gold);margin-bottom:32px}
.doc section{margin-bottom:28px;padding:0}
.doc h2{font-size:19px;margin-bottom:8px;color:var(--gold)}
.doc p{color:var(--muted);font-size:15px}
.doc .dim{color:var(--muted);font-size:12.5px;margin-top:44px;
  border-top:1px solid var(--line);padding-top:16px}

/* ---------- Cards as links ---------- */
.card .thumb{display:grid}
.card h3 a{color:inherit;transition:color .25s}
.card h3 a:hover{color:var(--gold)}
.card[hidden]{display:none}

/* ---------- Colour variants ---------- */
.colours{margin:20px 0 4px}
.colours-label{font-size:12px;color:var(--muted);margin-bottom:9px}
.colours-label b{color:var(--ink);font-weight:600}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:.25s;position:relative}
.swatch span{width:26px;height:26px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.swatch:hover{border-color:var(--gold)}
.swatch.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.swatch.out::after{content:"";position:absolute;width:40px;height:1px;
  background:#ff8fa8;transform:rotate(-45deg)}
.card-swatches{display:flex;align-items:center;gap:5px;margin:-6px 0 12px}
.card-swatches span{width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.card-swatches em{font-size:11px;color:var(--muted);font-style:normal;margin-inline-start:4px}

/* ---------- Real photos fill the card square ---------- */
.card .thumb.photo{padding:0;background:#fff}
.card .thumb.photo .obj{width:100%;height:100%}
.card .thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}
.card:hover .thumb.photo .obj{transform:none;scale:1.04}
.gthumb img{object-fit:cover}

/* ---------- Hero canvas ---------- */
#scene{position:absolute;inset:0;width:100%;height:100%}
#scene[hidden]{display:none}
.hero-media{position:absolute;inset:0;z-index:1}

/* ================= Mobile ================= */
.buybar{display:none}
@media(max-width:860px){
  .buybar{
    display:flex;align-items:center;gap:12px;
    position:fixed;inset-inline:0;bottom:0;z-index:90;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(9,9,14,.96);border-top:1px solid var(--line);
  }
  .buybar-price{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.15}
  .buybar-price .price{font-size:19px}
  .buybar-price .was{font-size:12px}
  .buybar .btn{flex:1;padding:14px 16px;margin:0}
  .pdp{padding:96px 0 104px}
  .pdp-grid{grid-template-columns:1fr;gap:28px}
  .related .grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:860px){
  .chip{padding:10px 16px}
  .qty button{width:36px;height:36px;font-size:17px}
  .gthumb{width:60px;height:60px}
  .swatch{width:42px;height:42px}
  .swatch span{width:30px;height:30px}
  .x{font-size:30px;padding:4px 8px}
  .hero{min-height:auto;padding:104px 0 48px}
  .scroll-hint{display:none}
  .hero-cta .btn{flex:1;justify-content:center}
  .gallery{overflow-x:auto;flex-wrap:nowrap;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px}
  .gallery::-webkit-scrollbar{display:none}
  .gthumb{flex:0 0 auto;scroll-snap-align:start}
}
@media(max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-height:94dvh;border-radius:12px 12px 0 0;width:100%}
  .form{padding:22px 16px calc(22px + env(safe-area-inset-bottom))}
  .frow{grid-template-columns:1fr;gap:0}
  .drawer-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .doc{padding:96px 0 56px}
}


/* ================= Cart icon, contact rail ================= */

.cart-btn{padding:7px 14px;gap:7px}
.cart-ico{flex:none;opacity:.9}
.cart-btn:hover .cart-ico{opacity:1}

/* Floating contact rail — WhatsApp, Instagram, TikTok.
 * Stacked bottom-end so it never covers the sticky buy bar. Buttons keep
 * their own brand colours: people recognise them faster than a house style,
 * and these are the two places ad traffic arrives from. */
.social-rail{position:fixed;z-index:85;inset-inline-end:16px;bottom:16px;
  display:flex;flex-direction:column-reverse;gap:10px}
.sfloat{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .2s ease-out,box-shadow .2s}
.sfloat:hover{transform:scale(1.08);box-shadow:0 10px 26px rgba(0,0,0,.55)}
.sfloat:active{transform:scale(.96)}
.sfloat.wa{background:#25d366}
.sfloat.ig{background:radial-gradient(circle at 30% 107%,
  #fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.sfloat.tt{background:#0b0b12;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(34,217,255,.35) inset}

/* Smaller on phones, and lifted clear of the sticky buy bar. */
@media(max-width:860px){
  .social-rail{inset-inline-end:12px;bottom:12px;gap:8px}
  .sfloat{width:44px;height:44px}
  .sfloat svg{width:21px;height:21px}
  body:has(.buybar) .social-rail{bottom:calc(70px + env(safe-area-inset-bottom))}
}


/* ================= Set builder ================= */

.setb{padding:130px 0 90px}
.set-head{max-width:640px;margin-bottom:30px}
.set-head .h2{margin:8px 0 12px}

/* The three slots of the set, filled by the client inside the review pop-up. */
.set-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.slot{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.02);
  display:grid;place-items:center;transition:border-color .3s,background .3s}
.slot.on{border-style:solid;border-color:var(--gold);background:#0e0e18}
.slot-n{font-size:26px;color:rgba(255,255,255,.18);font-weight:600}
.slot.on .slot-n{display:none}
.slot-fill{position:absolute;inset:0}
.slot-fill img{width:100%;height:100%;object-fit:cover;display:block}
.slot-fill .ph{position:absolute;inset:22%;border:1px solid var(--line);border-radius:50%}

/* Caption sits on a scrim so it stays readable over any photo. */
.slot-cap{position:absolute;inset-inline:0;bottom:0;padding:10px 10px 8px;
  display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);
  background:linear-gradient(transparent,rgba(4,4,8,.9) 45%)}
.slot-cap b{color:var(--ink);font-size:12.5px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-x{position:absolute;z-index:2;inset-block-start:8px;inset-inline-end:8px;
  width:28px;height:28px;border-radius:50%;background:rgba(4,4,8,.72);color:#fff;
  font-size:17px;line-height:1;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2)}
.slot-x:hover{background:#c0392b;border-color:#c0392b}

/* Running total bar — sizing and stickiness live in the review-pop-up block
   further down; this is just the type. */
.set-bar{align-items:center;justify-content:space-between;gap:16px}
.set-sum{display:flex;align-items:baseline;gap:12px}
.set-count{font-size:12px;letter-spacing:.14em;color:var(--muted)}
html[dir="rtl"] .set-count{letter-spacing:0;font-size:13.5px}
.set-total{font-size:24px;font-weight:600}
.set-actions{display:flex;gap:10px;align-items:center}
.set-bar .btn{margin:0}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--muted)}
.btn.ghost:hover{border-color:var(--gold);color:var(--ink)}

.set-pick-title{font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px}
html[dir="rtl"] .set-pick-title{letter-spacing:0;text-transform:none;font-size:17px}

.pick{display:flex;flex-direction:column;gap:6px;text-align:start;padding:0;
  background:none;border:0;transition:opacity .25s}
.pick:disabled{opacity:.32;cursor:not-allowed}
.pick-thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#0e0e18;display:grid;place-items:center;
  transition:border-color .25s,transform .25s}
.pick-thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}
.pick:hover:not(:disabled) .pick-thumb{border-color:var(--gold-3);transform:translateY(-2px)}
.pick.on .pick-thumb{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pick-tick{position:absolute;inset-block-start:6px;inset-inline-end:6px;
  width:24px;height:24px;border-radius:50%;background:var(--neon);color:#ffffff;
  font-size:13px;font-weight:700;display:grid;place-items:center;
  opacity:0;transform:scale(.6);transition:.2s}
.pick.on .pick-tick{opacity:1;transform:none}
.pick-name{font-size:12.5px;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick-price{font-size:12px;color:var(--muted)}

@media(max-width:860px){
  .setb{padding:104px 0 70px}
  .set-slots{gap:8px}
  .slot-n{font-size:20px}
  .slot-cap{padding:8px 8px 7px;font-size:10.5px}
  .slot-cap b{font-size:11.5px}
  .set-total{font-size:20px}
  .btn.ghost{padding:13px 12px}
}


/* ================= Gift wrapping and box options ================= */

/* Wrap toggle. Lives in the cart footer, right where the money is decided —
   an upsell buried on a product page gets scrolled past. */
.wrap-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
  margin-bottom:14px;padding:10px 12px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--bg-3);transition:.25s}
.wrap-opt:hover{border-color:var(--gold-3)}
.wrap-opt.on{border-color:var(--gold);background:rgba(34,217,255,.07)}
.wrap-opt img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none}
.wrap-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wrap-text b{font-size:13.5px;font-weight:500;color:var(--ink)}
.wrap-text em{font-size:11.5px;font-style:normal;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap-price{font-size:13px;color:var(--gold-2);flex:none}
.wrap-check{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);font-size:12px;color:transparent;transition:.2s}
.wrap-opt.on .wrap-check{background:var(--neon);border-color:transparent;color:#ffffff}

/* The chosen box, shown on its cart line so two lines of the same watch
   are never confusable. */
.line-box{font-size:11.5px;color:var(--gold-2);margin-top:1px}

/* Box picker on the product page. */
.boxpick{margin:22px 0 4px}
.box-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.box-opt{display:flex;flex-direction:column;gap:6px;padding:8px;text-align:start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);transition:.25s}
.box-opt:hover{border-color:var(--gold-3)}
.box-opt.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.box-thumb{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#0e0e18}
.box-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.box-name{font-size:12.5px;color:var(--ink)}
.box-extra{font-size:11.5px;color:var(--muted)}
.box-opt.on .box-extra{color:var(--gold-2)}
.box-note{font-size:11.5px;color:var(--muted);margin-top:8px}

@media(max-width:860px){
  .wrap-opt{padding:9px 10px;gap:10px}
  .wrap-opt img{width:42px;height:42px}
  .box-thumb{border-radius:6px}
  .box-name{font-size:12px}
}


/* =====================================================================
   Dawn layer
   Loaded last, so it overrides everything above. The rules here are the
   ones that make a theme read as Dawn: flat surfaces, hairline rules,
   generous vertical rhythm, square solid buttons, and no motion for its
   own sake.
   ===================================================================== */

/* ---- surfaces: nothing floats ---- */
.card,.cat,.step,.quote,.pick-thumb,.box-opt,.wrap-opt,.slot,
.set-bar,.drawer,.modal-card{box-shadow:none}
/* No box around the card. The photograph is the card — a border and a white
   fill would only draw a rectangle around a picture that already has edges. */
.card{background:none;border:0}
.card .thumb{background:#f7f7f7}
.cat .glow{display:none}                       /* the glow effects are gone */

/* Photo, name, price, centred beneath it. A slow zoom on hover and nothing
   else moving. */
.card .thumb .obj,.card:hover .thumb .obj{transform:none}
.card .thumb.photo img{transition:transform .5s ease}
.card:hover .thumb.photo img{transform:scale(1.04)}
.card .info{padding:14px 4px 2px;text-align:center}
.card h3{font-size:15px;font-weight:400;line-height:1.4}
.card .card-swatches{justify-content:center;margin:6px 0 0}

/* Stacked, not side by side: old price on top, new price under it. */
.card .price-row{display:flex;flex-direction:column;align-items:center;
  gap:2px;margin-top:6px;margin-bottom:0}
.card .price{font-size:15px;font-weight:400;color:var(--ink)}
.card .was{color:var(--muted);font-size:14px;text-decoration:line-through}
/* Only a reduced price goes red, so the colour means something. */
.card .price.cut{color:var(--red)}

/* Bottom-left of the photo, matching the old storefront. */
.badge{inset-block-start:auto;inset-block-end:12px;
  background:#121212;color:#fff;font-weight:500;text-transform:none;
  letter-spacing:.04em;font-size:11px;padding:6px 12px}
.badge.sold{background:#767676}

/* ---- type: bigger headings, tighter tracking, no shouting caps ---- */
h1,h2,h3,h4,.h2{font-weight:500;letter-spacing:-.01em;line-height:1.15}
.h2{font-size:clamp(26px,3.2vw,40px)}
.eyebrow{font-size:12px;letter-spacing:.06em;text-transform:none;
  color:var(--muted);font-weight:400;margin-bottom:10px}
.lead{color:var(--muted);font-size:16px}
section{padding:64px 0}
@media(max-width:860px){ section{padding:44px 0} }

/* ---- buttons: solid black, square, full-width on mobile ---- */
.btn{border-radius:0;font-weight:500;letter-spacing:.01em;
  text-transform:none;padding:14px 30px;font-size:15px;transition:opacity .2s}
.btn-gold{background:#121212;color:#fff;border:1px solid #121212}
.btn-gold:hover{opacity:.82}
.btn.ghost{background:transparent;color:#121212;border:1px solid #121212}
.btn.ghost:hover{background:#121212;color:#fff}

/* ---- header: white, hairline rule, no blur trickery ---- */
#hdr{background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none}
#hdr.scrolled{background:#fff;box-shadow:none}
.nav{padding:14px 0}
.links a{font-size:14px;color:var(--ink);opacity:.85}
.links a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav .brand img{height:38px;width:auto}
.cart-btn{border:0;padding:6px 8px}
.cart-btn:hover{color:var(--ink)}
.cart-count{background:#121212;color:#fff;font-weight:500}
.lang{border:1px solid var(--line-strong);border-radius:0;font-size:13px}
.lang:hover{background:#121212;color:#fff;border-color:#121212}

/* ---- collection tiles: photo with a caption underneath, Dawn style ---- */
.cats{gap:20px}
.cat{border:0;background:none;height:auto;aspect-ratio:3/4;overflow:visible}
.cat.wide{aspect-ratio:16/7}
.cat .cat-photo{position:relative;inset:auto;aspect-ratio:inherit;
  filter:none;transform:none;transition:transform .5s ease}
.cat:hover .cat-photo{transform:scale(1.02)}
.cat .body{position:static;background:none;padding:12px 0 0;transform:none}
.cat h3{font-size:17px;font-weight:500;color:var(--ink)}
.cat p{font-size:13.5px;color:var(--muted);margin-top:2px}
.cat .go{opacity:1;transform:none;color:var(--ink);font-size:13px;
  letter-spacing:0;text-transform:none;margin-top:6px;
  text-decoration:underline;text-underline-offset:4px}
.cat[data-cat="sale"] .body{position:static;width:auto;height:auto;
  clip-path:none;overflow:visible;white-space:normal}
@media(max-width:860px){
  .cats{gap:12px}
  .cat{aspect-ratio:3/4;height:auto}
  .cat.wide{aspect-ratio:16/9}
  .cat h3{font-size:14px}
  .cat p{display:none}
  .cat .go{display:none}
}

/* ---- steps, quotes, footer ---- */
.step{background:none;border:0;border-top:1px solid var(--line);padding-top:18px}
.step b{-webkit-text-fill-color:currentColor;background:none;color:var(--muted);
  font-size:13px;font-weight:400}
.step h3{font-size:17px;margin:6px 0 6px}
.quote{background:none;border:0;border-top:1px solid var(--line);padding-top:18px}
.quote .stars{color:#121212;font-size:13px}
footer{background:#fff;border-top:1px solid var(--line);color:var(--ink)}
footer a:hover{text-decoration:underline;text-underline-offset:3px}
.fbot{border-top:1px solid var(--line);color:var(--muted)}
.newsletter input{background:#fff;border:1px solid var(--line-strong);border-radius:0}
.newsletter button{background:#121212;color:#fff;border-radius:0;font-weight:500}

/* ---- forms and overlays ---- */
.drawer,.modal-card{background:#fff;color:var(--ink);border-radius:0}
.drawer{border-inline-start:1px solid var(--line)}
.fld input,.fld select,.fld textarea{background:#fff;border:1px solid var(--line-strong);
  border-radius:0;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:#121212;outline:0}

/* Failed fields. Two fixes the white theme needs:
   - the dark theme's #d98080 message is 2.9:1 on white, well under the 4.5:1
     a customer needs to read why their order will not go through; the brand
     red is 5.4:1;
   - these must come after the :focus rule above. submitOrder focuses the first
     bad field, and a plain .bad earlier in the cascade lost to :focus — so the
     one field being pointed at was the one that stopped looking wrong. */
.fld input.bad,.fld select.bad{border-color:var(--red)}
.err{color:var(--red)}
.chip{border-radius:0;border:1px solid var(--line-strong);color:var(--ink);
  text-transform:none;letter-spacing:0;font-size:13px}
.chip.on{background:#121212;border-color:#121212;color:#fff;font-weight:500}
.scrim{background:rgba(18,18,18,.4)}
#toast{background:#121212;color:#fff;border-radius:0}

/* ---- product page ---- */
.pdp-stage{background:#f7f7f7;border:1px solid var(--line);border-radius:0}
.gthumb{border-radius:0;background:#f7f7f7}
.gthumb.on,.gthumb:hover{border-color:#121212}
.pdp-info .price{font-weight:500}
.pdp-info .save{background:#121212;color:#fff;border-radius:0;font-weight:500}
.buybar{background:#fff;border-top:1px solid var(--line)}
.swatch,.box-opt,.pick-thumb,.slot,.wrap-opt,.set-bar{border-radius:0}
.box-opt.on,.pick.on .pick-thumb{border-color:#121212;box-shadow:0 0 0 1px #121212}
.pick-tick,.wrap-opt.on .wrap-check{background:#121212;color:#fff}
.slot.on{border-color:#121212}
.set-bar{background:#fff;border:1px solid var(--line)}
@media(max-width:860px){
  .set-bar{background:rgba(255,255,255,.96);border-block-start:1px solid var(--line)}
}
.social-rail .sfloat{box-shadow:0 2px 10px rgba(18,18,18,.18)}

/* The marquee and the 3D hero belong to the old theme. */
.marquee,#scene,.hero-media,.scroll-hint,.drag-hint{display:none}


/* Sections that used the dark hero's spacing no longer need it. */
.pdp{padding:90px 0 70px}
.doc{padding:90px 0 60px}
.setb{padding:90px 0 70px}
@media(max-width:860px){
  .pdp{padding:70px 0 60px}
  .doc,.setb{padding:70px 0 50px}
}


/* ---- surfaces the palette swap missed ----
   These carried hardcoded dark hexes rather than variables, so flipping
   :root left them as black boxes on a white page. Found by scanning the
   built stylesheet for dark backgrounds the Dawn layer had not overridden. */
.pick-thumb,.box-thumb,.line .pic,.spin,.qv .pane,.card .thumb.photo{background:#f7f7f7}
.slot{background:#fafafa}
.slot.on{background:#fff}
.cart-empty .mark-lg{opacity:.25}

/* Inset hairlines on swatches were white-on-dark; invert them. */
.swatch span,.card-swatches span{box-shadow:inset 0 0 0 1px rgba(18,18,18,.18)}
.swatch{border-color:var(--line)}
.swatch.on{border-color:#121212;box-shadow:0 0 0 1px #121212}

/* Stock colours were tuned for a dark background and fail contrast on white. */
.stock.in{color:#1f7a34}
.stock.out{color:#b3261e}
.swatch.out::after{background:#b3261e}

/* Product photos come on white, so the old inner shadow that separated them
   from a black page now just dirties the edge. */
.card .thumb.photo::after{box-shadow:none;border:0}

@media(max-width:860px){ .nav .brand img{height:34px} }


/* ---- Set page banner: the photo that used to be the homepage cover ---- */
.set-banner{margin:0 0 34px}
.set-banner img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.set-banner figcaption{font-size:13px;color:var(--muted);padding-top:10px;text-align:center}
@media(max-width:860px){
  .set-banner{margin-bottom:24px}
  .set-banner img{aspect-ratio:4/3}
  .set-banner figcaption{font-size:12px}
}

/* ---- contrast fixes ----
   Found by scanning the built CSS for white text whose own background is not
   dark. The slot numerals were white at 18% opacity — invisible on a white
   tile, so the empty set slots looked blank rather than numbered. */
.slot-n{color:rgba(18,18,18,.26)}
.slot{border-color:var(--line-strong)}
.cart-empty .dim,.box-note,.card .was{color:var(--muted)}


/* =====================================================================
   Old-storefront styling
   Rebuilt from the Shopify theme: red announcement strip, serif display
   headings, black hero band, rounded cards. Colours sampled straight
   from the screenshot.
   ===================================================================== */

:root{ --red:#d40a1d; --radius:14px; }

/* ---- announcement strip ---- */
.announce{background:var(--red);color:#fff;text-align:center;
  font-size:13.5px;letter-spacing:.01em;padding:11px 44px;position:relative}
html[dir="rtl"] .announce{font-size:14.5px}
@media(max-width:860px){ .announce{font-size:12.5px;padding:10px 28px} }

/* ---- serif display type, as on the old store ---- */
h1,h2,.h2,.co-title,.doc h1,.pdp-info h1,.hero-band h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:0}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] .h2,
html[dir="rtl"] .pdp-info h1,html[dir="rtl"] .hero-band h1{font-family:'Cairo',sans-serif;font-weight:600}
.h2{font-size:clamp(30px,3.8vw,46px)}
.pdp-info h1{font-size:clamp(32px,4.2vw,50px)}
.doc h1{font-size:clamp(34px,5vw,54px)}

/* ---- hero band ---- */
.hero-band{position:relative;background:#080808}
.hero-band-img{width:100%;height:auto;display:block;aspect-ratio:1700/731}
.hero-band-in{position:absolute;inset:0;display:flex;align-items:center}
.hero-band h1{color:#fff;font-size:clamp(32px,5vw,62px);line-height:1.1;
  max-width:14ch;margin-bottom:26px}
.btn-outline{display:inline-block;border:1.5px solid #fff;color:#fff;background:none;
  border-radius:999px;padding:13px 44px;font-size:14px;font-weight:400;transition:.2s}
.btn-outline:hover{background:#fff;color:#121212}
@media(max-width:860px){
  /* Portrait crop with the watch low, so the headline sits on clear black. */
  .hero-band-img{aspect-ratio:820/1000}
  .hero-band-in{align-items:flex-start;padding-top:11vw}
  .hero-band h1{font-size:clamp(28px,8.5vw,40px);max-width:11ch;margin-bottom:20px}
  .btn-outline{padding:12px 34px;font-size:13.5px}
}

/* ---- rounded corners ---- */
/* overflow:hidden here is deliberate — these clip an image to the corner
   radius. The cart drawer and the checkout card are NOT in this list: they
   have to scroll, and the shorthand would silently overwrite overflow-y. */
.card,.card .thumb,.cat .cat-photo,.pick-thumb,.box-thumb,.slot,
.set-bar,.wrap-opt,.gthumb,.pdp-stage,.line .pic,.set-banner img,
.spin,.hero-band-img{border-radius:var(--radius);overflow:hidden}

/* Radius without touching overflow. */
.drawer,.modal-card{border-radius:var(--radius)}
.modal-card{overflow-y:auto;overflow-x:hidden}
.drawer{overflow-y:auto;overflow-x:hidden}
/* All four corners now — the photo is no longer the top of a boxed card. */
.card .thumb{border-radius:var(--radius)}
.card{border-radius:0;overflow:visible}
.cat .cat-photo{border-radius:var(--radius)}
.btn,.chip,.newsletter input,.newsletter button,
.fld input,.fld select,.fld textarea{border-radius:999px}
.btn{padding:14px 34px}
.fld input,.fld select,.fld textarea{padding-inline:18px}
.badge{border-radius:999px;padding:6px 12px}
.drawer{border-radius:var(--radius) 0 0 var(--radius)}
html[dir="rtl"] .drawer{border-radius:0 var(--radius) var(--radius) 0}
@media(max-width:860px){
  .hero-band-img{border-radius:0}
  .drawer{border-radius:0}
}

/* ---- header on phones: language left, mark centred, cart and menu right ----
 *
 * The mark is centred by taking it out of the flow, which leaves .nav-actions
 * as the only flex child — and a lone child of space-between sits at the
 * start. That is how the language switch, cart and menu all ended up on the
 * left, with the menu button landing exactly under the centred logo, which
 * paints over it. Invisible, not missing.
 *
 * Now the actions row fills the width: the language link keeps the left edge
 * and pushes the cart and the menu to the right, where a thumb expects them.
 * The row also sits above the mark so nothing can ever paint over a button. */
@media(max-width:860px){
  .nav{position:relative;justify-content:space-between}
  /* Scoped to the header. The footer carries a .brand too, and an unscoped
     rule lifted that one out of the footer grid and centred it over the shop
     links — a header fix quietly breaking a footer three screens away. */
  .nav .brand{position:absolute;inset-inline:0;margin:auto;width:max-content;z-index:1}
  .nav .brand img{height:40px}
  .nav-actions{flex:1;justify-content:flex-end;gap:6px;position:relative;z-index:2}
  .nav-actions .lang{margin-inline-end:auto}
  /* A real target for the menu, not a 20px glyph. */
  .burger{width:42px;height:42px;display:grid;place-items:center;
    margin-inline-end:-8px;font-size:24px}
  .cart-btn{padding:6px 6px}
}
.nav .brand img{height:46px;width:auto}   /* header only; the footer mark is .foot-brand */


/* ---- gift wrapping on the product page ---- */
.giftbox{margin:22px 0 4px;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;background:#fafafa}
.gift-check{display:flex;align-items:center;gap:12px;cursor:pointer}
.gift-check input{position:absolute;opacity:0;width:0;height:0}
.gift-box-ui{flex:none;width:22px;height:22px;border:1.5px solid var(--line-strong);
  border-radius:6px;background:#fff;display:grid;place-items:center;transition:.18s}
.gift-box-ui::after{content:"✓";font-size:13px;color:#fff;opacity:0;transform:scale(.6);transition:.18s}
.gift-check input:checked + .gift-box-ui{background:#121212;border-color:#121212}
.gift-check input:checked + .gift-box-ui::after{opacity:1;transform:none}
.gift-check input:focus-visible + .gift-box-ui{outline:2px solid #121212;outline-offset:2px}
.gift-label{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.gift-label b{font-weight:500;font-size:14.5px;color:var(--ink)}
.gift-label em{font-style:normal;font-size:12px;color:var(--muted)}
.gift-check img{border-radius:8px;object-fit:cover;flex:none}

.gift-msg{margin-top:14px}
.gift-msg[hidden]{display:none}
.gift-msg label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.gift-msg textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:12px 14px;font-size:16px;line-height:1.45;background:#fff;color:var(--ink);resize:vertical}
.gift-msg textarea:focus{border-color:#121212;outline:0}
.gift-count{text-align:end;font-size:11.5px;color:var(--muted);margin-top:5px}

/* Cart shows the resulting charge — a summary, not the control. The remove
   link matters: without it a customer who changed their mind on the cart
   screen would have to hunt back to a product page to undo a 150 EGP charge. */
.wrap-line .wrap-x{font-size:11.5px;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;margin-inline-start:8px;background:none;padding:0}
.wrap-line .wrap-x:hover{color:#b3261e}


/* =====================================================================
   Cover photo and collection cards, matched to the old storefront
   ===================================================================== */

/* The AK mark is already in the photograph, so nothing is overlaid.
   The headline sits in the black upper-left, where the old store put it. */
.hero-band-img{aspect-ratio:1712/893}
.hero-band-in{align-items:flex-start;padding-top:clamp(28px,5vw,70px)}
.hero-band h1{max-width:12ch;font-size:clamp(32px,4.4vw,58px);margin-bottom:24px}
@media(max-width:860px){
  /* Portrait canvas with the photo dropped to the bottom, so the headline has
     clear black above it and neither the hand nor the mark is cropped off. */
  .hero-band-img{aspect-ratio:1000/1160}
  .hero-band-in{padding-top:8vw}
  .hero-band h1{max-width:10ch}
}

/* ---- collection cards: square photo, serif label, trailing arrow ---- */
.cats{gap:clamp(14px,2.2vw,28px) clamp(12px,1.8vw,22px)}
.cat{aspect-ratio:auto;height:auto}
.cat .cat-photo{aspect-ratio:1/1;border-radius:22px;object-fit:cover;width:100%}
.cat.wide .cat-photo{aspect-ratio:16/7}
.cat .body{padding:14px 2px 0}
.cat h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(19px,2.1vw,26px);line-height:1.25;color:var(--ink);
  display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap}
html[dir="rtl"] .cat h3{font-family:'Cairo',sans-serif;font-size:clamp(17px,1.9vw,22px)}
.cat .go-arrow{font-size:.85em;transition:transform .25s}
.cat:hover .go-arrow{transform:translateX(4px)}
html[dir="rtl"] .cat .go-arrow{transform:scaleX(-1)}
html[dir="rtl"] .cat:hover .go-arrow{transform:scaleX(-1) translateX(4px)}
.cat p{display:none}          /* the old cards carried a label only */
.cat .go{display:none}
@media(max-width:860px){
  .cat .cat-photo{border-radius:18px}
  .cat .body{padding-top:10px}
}


/* =====================================================================
   Fixes found by rendering the real page
   Each of these was traced by resolving the built stylesheet's cascade
   (specificity + source order) rather than guessed at.
   ===================================================================== */

/* 1. The delivery line lost every one of its rules when the old photo-banner
      block was deleted, so it rendered as a bare <p> flush against the left
      edge of the viewport. */
.trust-bar{margin:0;padding:14px 20px;text-align:center;font-size:13px;
  color:var(--muted);border-bottom:1px solid var(--line);background:#fff}
@media(max-width:860px){ .trust-bar{font-size:12px;padding:11px 16px} }

/* 2. Two rules from the old neon theme outranked the Dawn one on specificity
      (0,2,0 against 0,1,0), which is why "Collections" was printing magenta.
      Matched here rather than deleted, so section order can't resurrect it. */
section:nth-of-type(even) .eyebrow,
section:nth-of-type(odd)  .eyebrow{color:var(--muted)}

/* 3. Collection captions were being overlapped by the next row. Grid items
      stretch by default, which gave .cat a definite height; the photo still
      carried height:100% from the dark theme, so it consumed the whole cell
      and pushed the caption out of the box. Aligning to the start and letting
      the image size from its aspect-ratio fixes it at the source. */
.cats{align-items:start;perspective:none}
.cat{transform-style:flat;height:auto;aspect-ratio:auto;overflow:visible}
.cat .cat-photo{position:relative;inset:auto;height:auto;width:100%;
  aspect-ratio:1/1;object-fit:cover;display:block}
.cat.wide .cat-photo{aspect-ratio:16/7}
.cat .body{position:static;padding:12px 2px 0}
.cat h3{margin:0}

/* The section head puts the heading and its lead side by side; on a wide
   screen that lead was drifting far from the heading it belongs to. */
.sec-head{gap:28px;align-items:end}
.sec-head .lead{max-width:38ch;text-align:end}
@media(max-width:860px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:10px}
  .sec-head .lead{text-align:start;max-width:none}
}


/* =====================================================================
   Cover: centred, shorter, with a Dawn-style overlay
   ===================================================================== */

/* The headline used to depend on the black left edge of the photograph to be
   readable. Centred, it sits over the hand, so legibility comes from a uniform
   overlay instead — the same mechanism Dawn's image banner uses. */
.hero-band{position:relative}
.hero-band::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);
  pointer-events:none}
.hero-band-in{position:absolute;inset:0;z-index:2;
  align-items:center;justify-content:center;text-align:center;padding:0}
.hero-band-in .wrap{display:flex;flex-direction:column;align-items:center}
.hero-band h1{max-width:16ch;margin:0 0 26px;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-band .btn-outline{margin:0}

/* Shorter than the photograph's own 1.92:1, so it does not dominate the page. */
.hero-band-img{aspect-ratio:21/9;object-fit:cover;width:100%;height:auto;display:block}
@media(max-width:860px){
  .hero-band-img{aspect-ratio:4/5}
  .hero-band::after{background:rgba(0,0,0,.46)}
  .hero-band h1{max-width:12ch;margin-bottom:20px}
}

/* The set page reuses the product-page gift control, so give it the same
   breathing room it has beside a product. */
.setb .giftbox{margin:26px 0 18px}


/* ---- phone cover height ----
   4/5 gave the band roughly two-thirds of the viewport, which pushed the
   products below the fold on the traffic that matters most. 5/4 keeps the
   whole photograph and its mark while leaving the shop visible. */
@media(max-width:860px){
  .hero-band-img{aspect-ratio:5/4}
  .hero-band h1{font-size:clamp(24px,6.6vw,32px);max-width:13ch;margin-bottom:16px}
  .hero-band .btn-outline{padding:11px 30px;font-size:13px}
}

/* Sold out reads as a warning, not a neutral tag. */
.badge.sold{background:var(--red);color:#fff}


/* =====================================================================
   Fixed top chrome, rotating announcement, shorter phone cover
   ===================================================================== */

/* The strip is fixed above the header rather than scrolling behind it.
   The fallbacks matter: with JavaScript off the numbers below are what the
   page uses, and they are close enough that nothing is hidden. */
.announce{position:fixed;top:0;inset-inline:0;z-index:130;
  display:flex;align-items:center;justify-content:center;
  min-height:38px;padding:9px 44px;line-height:1.25}
#hdr{top:var(--announce-h,38px)}
main{padding-top:var(--chrome-h,112px)}

/* A cross-fade rather than a slide: it reads as one line changing its mind,
   not as a carousel the customer has to track. */
.announce-text{transition:opacity .3s ease, transform .3s ease;display:inline-block}
.announce-text.out{opacity:0;transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
  .announce-text{transition:none}
}

@media(max-width:860px){
  .announce{min-height:34px;padding:8px 28px}
  #hdr{top:var(--announce-h,34px)}
  main{padding-top:var(--chrome-h,100px)}
  /* Shorter again — the band was still taking half the screen. */
  .hero-band-img{aspect-ratio:3/2}
  .hero-band h1{font-size:clamp(22px,5.8vw,28px);max-width:14ch;margin-bottom:14px}
  .hero-band .btn-outline{padding:10px 26px;font-size:12.5px}
}

/* The document pages already reserved their own top space for the old
   overlapping header; with main padded, that would now double up. */
.pdp,.doc,.setb{padding-top:34px}
@media(max-width:860px){ .pdp,.doc,.setb{padding-top:24px} }


/* =====================================================================
   Checkout on a phone
   The modal was a centred card with max-height:90dvh. Three things made it
   feel frozen: a drag starting on the surrounding padding scrolled nothing,
   scroll chained out of the card to a body that could not move, and once the
   keyboard opened the viewport shrank while 90dvh did not, hiding the submit
   button below the fold with no way to reach it.
   On phones it is now a full-screen sheet that owns its own scrolling.
   ===================================================================== */
.modal-card{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

@media(max-width:860px){
  .modal{display:block;padding:0;place-items:stretch}
  .modal-card{
    width:100%;max-width:none;border:0;border-radius:0;
    /* svh, not dvh: the small viewport ignores the collapsing browser chrome,
       so the sheet does not resize under the customer mid-scroll. */
    height:100svh;max-height:100svh;
    transform:translateY(14px);
  }
  .modal.on .modal-card{transform:none}
  .modal-card .x{position:sticky;top:0;float:inline-end;
    background:var(--bg-2);border-radius:50%;width:38px;height:38px;
    display:grid;place-items:center;margin:8px 8px 0 0}
  html[dir="rtl"] .modal-card .x{margin:8px 0 0 8px}

  /* Room for the submit button above the home indicator, and for the keyboard. */
  .form{padding:18px 16px calc(28px + env(safe-area-inset-bottom))}
  .ok{padding:44px 20px calc(36px + env(safe-area-inset-bottom))}
  .frow{grid-template-columns:1fr;gap:0}
}


/* ---- toast with an action ---- */
#toast{display:flex;align-items:center;gap:14px;max-width:min(92vw,460px);
  padding:11px 12px 11px 20px;text-align:start}
html[dir="rtl"] #toast{padding:11px 20px 11px 12px}
.toast-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-act{flex:none;background:#fff;color:#121212;border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:500;line-height:1;
  white-space:nowrap;transition:opacity .2s}
.toast-act:hover{opacity:.85}
.toast-act:active{transform:scale(.96)}
@media(max-width:860px){
  /* Clear of the floating contact rail, and a full-width thumb target. */
  #toast{inset-inline:12px;inset-inline-start:12px;transform:translateY(140px);
    max-width:none;width:auto;bottom:calc(16px + env(safe-area-inset-bottom))}
  #toast.on{transform:translateY(0)}
  .toast-act{padding:10px 16px;font-size:13px}
}


/* =====================================================================
   Sale countdown — sits between the cover and the collections
   ===================================================================== */
.countdown{background:#fff;border-bottom:1px solid var(--line);
  padding:34px 0 32px;text-align:center}
.countdown .wrap{display:flex;flex-direction:column;align-items:center}
.cd-name{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(26px,3.4vw,40px);line-height:1.1;color:var(--ink);margin:0}
html[dir="rtl"] .cd-name{font-family:'Cairo',sans-serif;font-size:clamp(22px,3vw,34px)}
.cd-intro{font-size:12.5px;color:var(--muted);margin:8px 0 18px;
  letter-spacing:.04em}

.cd-grid{display:flex;gap:10px;justify-content:center}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:7px}
.cd-num{min-width:66px;padding:12px 8px;border-radius:var(--radius);
  background:#121212;color:#fff;font-size:clamp(22px,2.6vw,30px);
  font-weight:500;line-height:1;font-variant-numeric:tabular-nums;
  /* tabular figures stop the box twitching as the seconds change width */
  display:block}
.cd-lbl{font-size:11px;color:var(--muted);letter-spacing:.06em}
html[dir="rtl"] .cd-lbl{letter-spacing:0;font-size:12.5px}
.cd-cta{margin-top:22px}

@media(max-width:860px){
  .countdown{padding:24px 0 22px}
  .cd-intro{margin:6px 0 14px}
  .cd-grid{gap:8px}
  .cd-num{min-width:0;width:100%;padding:11px 4px;font-size:20px}
  .cd-cell{flex:1;min-width:0}
  .cd-grid{width:100%;max-width:340px}
  .cd-lbl{font-size:10.5px}
  .cd-cta{width:100%;margin-top:18px}
}


/* ---- countdown: black tiles, white digits ---- */
.cd-num{background:#121212;color:#fff;font-weight:500}
.cd-cta{display:none}


/* ---- set page carousel ----
   The slides are stacked, not laid side by side, so the figure keeps one
   height and nothing below it moves as the photos change. */
.set-carousel{position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/2;background:#f2f2f2}
.set-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease}
.set-slide.on{opacity:1}
/* With JavaScript off only the first slide has .on, so exactly one shows. */
@media(prefers-reduced-motion:reduce){ .set-slide{transition:none} }

.set-dots{position:absolute;inset-inline:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:8px}
.set-dot{width:8px;height:8px;padding:0;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background .25s,transform .25s}
.set-dot.on{background:#fff;transform:scale(1.25)}
.set-dot:hover{background:#fff}
/* A 8px dot is far too small to hit with a thumb, so the tap target is
   padded out invisibly rather than the dot being made ugly. */
.set-dot::before{content:"";position:absolute;width:34px;height:34px;
  transform:translate(-13px,-13px)}
.set-dot{position:relative}

@media(max-width:860px){
  /* Was 4/3 for a bit more height, but all three slides are 3:2 and the
     slides are object-fit:cover — so the taller frame was quietly cropping
     12.5% of the width away, a sixteenth off each edge. Matching the frame to
     the artwork shows the whole photo. */
  .set-dots{bottom:10px}
}


/* ---- set builder: the review pop-up ----
 *
 * The chosen pieces are not shown on the page while the customer is still
 * choosing. They appear once, in a pop-up, when the last step is done: the
 * three pieces as rows, the gift option, the total, and two ways out. While
 * the steps are in progress only a slim bar at the bottom keeps the count and
 * the running total in view.
 */
.set-review .modal-card{padding:28px 24px 22px}
/* Narrow on a desktop — three rows and two buttons do not need 920px. On a
   phone the modal is already a full-width bottom sheet, and stays one. */
@media(min-width:861px){ .set-review .modal-card{max-width:460px} }
.set-review-title{font-size:22px;font-weight:500;margin:0 0 18px}

/* Rows, not squares: three stacked squares would push the buttons off the
   bottom of a phone. Thumbnail, then name and price beside it. */
.set-review .set-slots{grid-template-columns:1fr;gap:10px}
.set-review .slot{aspect-ratio:auto;min-height:74px}
.set-review .slot-n{justify-self:start;margin-inline-start:24px}
.set-review .slot-fill{display:flex;align-items:center;gap:12px;
  padding:9px;padding-inline-end:38px}
.set-review .slot-fill img{width:56px;height:56px;flex:none;border-radius:4px}
.set-review .slot-fill .ph{position:static;inset:auto;width:56px;height:56px;flex:none}
/* No scrim needed once the caption is beside the photo rather than on it. */
.set-review .slot-cap{position:static;background:none;padding:0;
  flex:1;min-width:0;gap:3px;font-size:12.5px}
.set-review .slot-x{inset-block-start:50%;transform:translateY(-50%);
  width:26px;height:26px;font-size:16px}

.set-review .giftbox{margin:16px 0 0}
.set-review .gift-check img{width:38px;height:38px}

.set-review-total{display:flex;justify-content:space-between;align-items:baseline;
  margin:18px 0 16px;padding-top:14px;border-top:1px solid var(--line)}
.set-review-total span{font-size:13px;color:var(--muted)}
.set-review-total b{font-size:22px;font-weight:600}

.set-review .set-actions{display:flex;gap:10px}
.set-review .set-actions .btn{flex:1;margin:0;padding-inline:12px}

/* The running total. Sticks to the bottom on every screen size once a piece
   is chosen — an empty bar would only eat screen height. */
.set-bar{position:sticky;bottom:0;z-index:60;margin:22px 0 10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:0;flex-wrap:nowrap;
  display:none}
.set-bar.on{display:flex}
.set-bar .set-sum{align-items:baseline}
.set-bar .btn{margin:0;padding:12px 20px;font-size:13.5px;white-space:nowrap}
@media(max-width:860px){
  .set-bar{margin:14px 0 24px;border-inline:0;border-block-end:0}
  .set-bar .btn{padding:12px 16px;font-size:13px}
  body:has(.set-bar.on) .social-rail{bottom:calc(78px + env(safe-area-inset-bottom))}
}


/* ---- set builder: two steps ----
 *
 * The watch, then the two accessories. Splitting it up is not decoration: the
 * rules of a set are which kind of piece goes where, and a step that only
 * contains watches enforces "one watch" without a single error message.
 */
.set-steps{display:flex;align-items:stretch;gap:10px;list-style:none;
  margin:0 0 26px;padding:0}
.set-steps li{flex:1;min-width:0}
.set-step{display:flex;align-items:center;gap:10px;width:100%;text-align:start;
  padding:12px 14px;background:none;border:1px solid var(--line);
  color:var(--muted);transition:border-color .2s,color .2s,background .2s}
.set-step b{flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12.5px;font-weight:600;
  border:1px solid var(--line-strong);color:var(--muted);background:#fff;
  transition:.2s}
.set-step span{font-size:13.5px;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.set-step.on{border-color:#121212;color:var(--ink);background:#fff}
.set-step.on b{background:#121212;border-color:#121212;color:#fff}
/* A finished step reads as done rather than as the one you are on. */
.set-step.done b{background:#fff;border-color:#121212;color:#121212}
.set-step:disabled{opacity:.45;cursor:not-allowed}
.set-step:not(:disabled):not(.on):hover{border-color:var(--line-strong);color:var(--ink)}

/* The step that is not showing is hidden with the hidden attribute, so
   .set-panel must never be given a display of its own. Written as a rule
   rather than left to a comment, because at (0,2,0) it also beats any bare
   .set-panel{display:...} someone adds later. */
.set-panel[hidden]{display:none}

.set-pick-lead{font-size:13.5px;color:var(--muted);margin:-8px 0 18px}

.set-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.set-nav .btn{margin:0}
/* Back sits alone on the left; with it hidden, Next stays on the right. */
.set-nav #setBack{margin-inline-end:auto}
.set-nav #setNext{margin-inline-start:auto}


/* ---- picker carousel ----
 *
 * The sliding is the browser's own: a scroll container with snap points. That
 * means a phone swipes it, a keyboard tabs through it, and it still works if
 * this stylesheet or the script never loads. The arrows and dots are a layer
 * on top of that, not the mechanism.
 */
/* Track and arrows share one grid cell so the arrows centre on the row of
   photos and not on the row plus the dots underneath it. minmax(0,1fr) is
   load-bearing: a plain 1fr takes its minimum from the track's content, and a
   flex row of sixty cards would blow the column out to the full catalogue. */
.carou{display:grid;grid-template-columns:minmax(0,1fr)}
.carou-track,.carou-arrow{grid-area:1/1}
.carou-dots{grid-area:2/1}
.carou-arrow{align-self:center}
/* Nudged just outside the row so they sit over the gap rather than over the
   first and last photo. Only ever shown on hover-capable screens, which have
   the page margin to spare. */
.carou-arrow.prev{justify-self:start;margin-inline-start:-8px}
.carou-arrow.next{justify-self:end;margin-inline-end:-8px}
.carou-track{min-width:0;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;
  /* The dots are the position indicator; a scrollbar under a row of product
     photos is just noise. */
  scrollbar-width:none;-ms-overflow-style:none}
.carou-track::-webkit-scrollbar{display:none}
.carou-track .pick{scroll-snap-align:start;flex:0 0 calc((100% - 3*14px)/4)}

.carou-arrow{z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#121212;
  border:1px solid var(--line-strong);transition:opacity .2s,background .2s}
.carou-arrow svg{width:18px;height:18px}
/* Mirrored, so the chevron always points the way the row will move. */
html[dir="rtl"] .carou-arrow svg{transform:scaleX(-1)}
.carou-arrow:hover:not(:disabled){background:#121212;color:#fff;border-color:#121212}
.carou-arrow:disabled{opacity:0;pointer-events:none}

.carou-dots{display:flex;justify-content:center;gap:7px;margin-top:16px}
.carou-dot{width:7px;height:7px;padding:0;border-radius:50%;position:relative;
  background:var(--line-strong);transition:background .2s,transform .2s}
.carou-dot.on{background:#121212;transform:scale(1.3)}
/* Too small to hit with a thumb, so the tap target is padded out invisibly. */
.carou-dot::before{content:"";position:absolute;width:32px;height:32px;
  transform:translate(-12.5px,-12.5px)}

/* One screenful of pieces has nothing to slide to. */
.carou.single .carou-arrow,.carou.single .carou-dots{display:none}

/* Touch devices swipe; arrows hovering over the photos would only cover them. */
@media(hover:none){ .carou-arrow{display:none} }

@media(max-width:1160px){
  .carou-track .pick{flex:0 0 calc((100% - 2*14px)/3)}
}
@media(max-width:860px){
  .set-steps{gap:8px;margin-bottom:20px}
  .set-step{padding:10px 12px;gap:8px}
  .set-step span{font-size:12.5px}

  /* Three labels will not fit across a phone — "Pick your first accessory"
     ellipsises down to about four characters, which tells nobody anything.
     So the inactive steps shrink to their number and only the step you are on
     is named. The heading above the picker repeats it anyway. */
  .set-steps li{flex:0 0 auto}
  .set-steps li:has(.set-step.on){flex:1 1 auto;min-width:0}
  .set-step:not(.on){padding:10px 11px;position:relative}
  /* Clipped rather than display:none, so the button still reads as "Pick your
     second accessory" and not as a bare "3" to a screen reader. */
  .set-step:not(.on) span{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .carou-track{gap:10px}
  .carou-track .pick{flex:0 0 calc((100% - 10px)/2)}
  .set-pick-lead{margin:-4px 0 14px}
  .set-nav{margin-top:18px}
}

/* The empty slots now name what goes in them — a word, not a numeral. */
.slot-n{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:rgba(18,18,18,.34)}
html[dir="rtl"] .slot-n{letter-spacing:0;text-transform:none;font-size:14px}



/* ---- the set discount, everywhere it shows ----
 * The point of building a set is the price, so the figure is never just a
 * total: it is the full price struck through, what came off, and what is paid.
 */
/* Bar: full price struck, discounted price beside it, and a small chip. */
.set-full{font-size:14px;color:var(--muted);text-decoration:line-through}
.set-full[hidden],.set-chip[hidden]{display:none}
.set-chip{font-size:11px;font-weight:500;letter-spacing:.04em;padding:3px 8px;
  background:var(--red);color:#fff;border-radius:999px;white-space:nowrap}
html[dir="rtl"] .set-chip{letter-spacing:0}

/* Review: three rows under the pieces. */
.set-review-sum{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.set-review-sum .tot{margin-bottom:7px}
.set-review-sum .tot s{color:var(--muted)}
.set-review-sum .set-review-total{margin:10px 0 16px;padding-top:12px;border-top:1px solid var(--line)}
/* The line that takes money off is the one line in red. */
.tot.set-line span:last-child{color:var(--red);font-weight:500}

/* Bag: a set line says so, and has no quantity controls — one of each. */
.line-set{font-size:11.5px;color:var(--red);font-weight:500;margin-top:1px}