/* ==========================================================================
   לוּנָה · תכשיטים — "חדר מראות"
   DNA: horizontal canvas · Q&A panels · live-demo opener · Miriam Libre + Rubik
   scale 1.333 · emerald ⟷ coral equal-strength · space-only separation · 0 radius
   ========================================================================== */
@font-face{font-family:"Miriam Libre";font-weight:400;font-display:swap;src:url(../fonts/miriam-libre-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Miriam Libre";font-weight:700;font-display:swap;src:url(../fonts/miriam-libre-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Miriam Libre";font-weight:400;font-display:swap;src:url(../fonts/miriam-libre-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Miriam Libre";font-weight:700;font-display:swap;src:url(../fonts/miriam-libre-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Rubik";font-weight:300;font-display:swap;src:url(../fonts/rubik-hebrew-300-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(../fonts/rubik-hebrew-400-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(../fonts/rubik-hebrew-500-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(../fonts/rubik-hebrew-700-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-weight:300;font-display:swap;src:url(../fonts/rubik-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Rubik";font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Rubik";font-weight:500;font-display:swap;src:url(../fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:"Rubik";font-weight:700;font-display:swap;src:url(../fonts/rubik-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}

:root{
  --em:#3A1232; --em-deep:#2A0C24; --em-lift:#4A1A40; --em-ink:#300E29;
  --co:#FF7A59; --co-deep:#F06844; --co-lift:#FF9474;
  --iv:#F6F1E9; --iv-dim:rgba(246,241,233,.72); --em-dim:rgba(58,18,50,.78);
  --gold:#C9A24A;
  --f-display:"Miriam Libre","Frank Ruhl Libre","David Libre","Noto Serif Hebrew",serif;
  --f-ui:"Rubik","Assistant","Noto Sans Hebrew",system-ui,sans-serif;
  /* modular scale 1.333 */
  --s-2:.563rem; --s-1:.75rem; --s0:1rem; --s1:1.333rem; --s2:1.777rem; --s3:2.369rem; --s4:3.157rem; --s5:4.209rem; --s6:5.61rem; --s7:7.478rem;
  --sp1:.5rem; --sp2:1rem; --sp3:1.5rem; --sp4:2.5rem; --sp5:4rem; --sp6:6.5rem;
  --ease:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,.75,.2);
  --hdr:76px;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--co) var(--em-deep)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html.to-lock,html.modal-lock{overflow:hidden}
body{margin:0;background:var(--em);color:var(--iv);font-family:var(--f-ui);font-size:var(--s0);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.co :focus-visible,.cd :focus-visible{outline-color:var(--em)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-block-start:-100px;inset-inline-start:16px;z-index:200;background:var(--co);color:var(--em);padding:12px 18px;font-weight:500;text-decoration:none}
.skip:focus{inset-block-start:16px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- shared atoms ---------- */
.q-mark{font-family:var(--f-display);font-weight:700;font-size:var(--s2);line-height:1;color:var(--gold);margin-block-end:var(--sp2)}
.q{font-family:var(--f-display);font-weight:700;font-size:clamp(var(--s3),5.2vw,var(--s5));line-height:1.02;text-wrap:balance}
.a{font-size:var(--s1);line-height:1.5;max-width:34ch;margin-block-start:var(--sp3);text-wrap:pretty}
.a-mark{font-family:var(--f-display);font-weight:700;color:var(--co);margin-inline-end:.35em}
.co .a-mark{color:var(--em-deep)}
.co .q-mark{color:var(--em-deep)}
.co{background:var(--co);color:var(--em)}
.em{background:var(--em);color:var(--iv)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:56px;padding-inline:28px;font-weight:500;font-size:1.0625rem;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),transform .35s var(--ease);white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--iv);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn-coral{background:var(--co);color:var(--em)}
.btn-em{background:var(--em);color:var(--iv)}
.btn-em:hover{color:var(--em)}
.btn-deep{background:var(--em-deep);color:var(--iv)}
.btn-deep:hover{color:var(--em)}
.btn svg{flex:none}
.btn[disabled]{opacity:.45;pointer-events:none}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:text-underline-offset .3s var(--ease)}
.link:hover{text-underline-offset:10px}
.chip{display:inline-flex;align-items:center;gap:.4em;min-height:40px;padding-inline:14px;font-size:.9375rem;background:rgba(58,18,50,.1);color:var(--em);transition:background .25s,color .25s}
.chip:hover{background:rgba(58,18,50,.2)}
.chip[aria-pressed="true"]{background:var(--em);color:var(--iv)}
.em .chip{background:rgba(246,241,233,.08);color:var(--iv)}
.em .chip:hover{background:rgba(246,241,233,.16)}
.em .chip[aria-pressed="true"]{background:var(--co);color:var(--em)}
.arch{position:relative;overflow:hidden;border-radius:100vmax 100vmax 0 0;background:var(--em-deep)}
.arch img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}

/* ---------- header ---------- */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;padding:16px 20px}
.hdr>*{pointer-events:auto}
.logo{display:flex;align-items:baseline;gap:.55em;background:var(--em-deep);color:var(--iv);padding:10px 18px 12px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:var(--s2);line-height:1}
.logo small{font-family:var(--f-ui);font-weight:400;font-size:var(--s-1);color:var(--iv-dim)}
.logo svg{align-self:center}
.hdr-nav{display:flex;align-items:center;background:var(--iv);color:var(--em)}
.hdr-nav a{display:flex;align-items:center;min-height:52px;padding-inline:16px;text-decoration:none;font-size:.9375rem;transition:background .25s}
.hdr-nav a:hover{background:rgba(58,18,50,.08)}
.cart-btn{display:flex;align-items:center;gap:10px;min-height:52px;padding-inline:18px;background:var(--em);color:var(--iv);font-weight:500}
.cart-count{display:inline-grid;place-items:center;min-width:24px;height:24px;background:var(--co);color:var(--em);font-size:.8125rem;font-variant-numeric:tabular-nums;transition:transform .4s var(--ease)}
.cart-count.bump{transform:scale(1.35)}
.menu-btn{display:none}

/* ---------- ambient + cursor ---------- */
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.cursor{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:300;pointer-events:none;width:0;height:0;display:none}
.cursor i{position:absolute;width:14px;height:14px;margin:-7px;transform:rotate(45deg);outline:1.5px solid var(--iv);mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cursor b{position:absolute;inset-block-start:22px;inset-inline-start:-40px;width:80px;text-align:center;font-weight:500;font-size:.75rem;color:var(--em);background:var(--co);padding:3px 0;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease);white-space:nowrap}
.cursor.has-label i{width:34px;height:34px;margin:-17px;background:rgba(246,241,233,.12)}
.cursor.has-label b{opacity:1;transform:none}
@media (pointer:fine){.cursor{display:block}}

/* ---------- layout: default = vertical stacked panels (mobile, no-JS, reduced motion) ---------- */
.canvas{position:relative}
.track{position:relative}
.panel{position:relative;padding:calc(var(--hdr) + 40px) 20px 72px}
.panel > *{position:relative;z-index:2}

/* ---------- P1 mirror (live demo opener) ---------- */
.p-mirror{display:grid;gap:var(--sp4);align-content:start}
.mirror{background:var(--iv);padding:14px 14px 0;width:min(100%,520px);justify-self:start;cursor:pointer}
.mirror-arch{aspect-ratio:4/5;position:relative}
.mirror-arch img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;transition:none}
.mirror-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--em);font-size:.8125rem;padding:10px 4px 12px}
.mirror-live{display:flex;align-items:center;gap:8px}
.mirror-live i{width:8px;height:8px;background:var(--co);transform:rotate(45deg);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.reticle{position:absolute;width:88px;height:88px;margin:-44px 0 0 -44px;inset-block-start:0;left:0;pointer-events:none;transition:transform 1.1s var(--ease),width .6s var(--ease),height .6s var(--ease);will-change:transform}
.reticle svg{width:100%;height:100%;overflow:visible}
.reticle-tag{position:absolute;inset-block-start:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--em);color:var(--iv);font-size:.75rem;padding:5px 10px;white-space:nowrap;display:flex;gap:10px}
.reticle-tag b{color:var(--co);font-weight:500}
.lm{position:absolute;width:4px;height:4px;margin:-2px;background:var(--co);opacity:0;transition:opacity .4s}
.mirror.scan .lm{opacity:.85}
.spark{position:absolute;width:36px;height:36px;margin:-18px;pointer-events:none;opacity:0;animation:spark 2.6s var(--ease) infinite}
.spark::before,.spark::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.spark::before{width:100%;height:1.5px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.spark::after{width:1.5px;height:100%;background:linear-gradient(transparent,#fff,transparent)}
@keyframes spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}12%{opacity:1;transform:scale(1) rotate(25deg)}30%{opacity:0;transform:scale(.4) rotate(45deg)}}
.spark.s2{animation-delay:1.1s}.spark.s3{animation-delay:1.9s}
.qa-open .q{font-size:clamp(var(--s4),7vw,var(--s6))}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp3);margin-block-start:var(--sp4)}
.mode-quick{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:var(--sp3)}
.mode-quick span{font-size:.875rem;color:var(--iv-dim);align-self:center;margin-inline-end:6px}
.mode-quick button{min-height:40px;padding-inline:14px;background:rgba(246,241,233,.08);font-size:.9375rem;transition:background .25s,color .25s}
.mode-quick button:hover{background:var(--iv);color:var(--em)}
.privacy-note{font-size:.8125rem;color:var(--iv-dim);margin-block-start:var(--sp3);max-width:40ch}
.scroll-cue{display:none;align-items:center;gap:10px;font-size:.8125rem;color:var(--iv-dim)}
.scroll-cue svg{animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(-8px)}}

/* ---------- seam crossers (signature) ---------- */
.cross{position:absolute;z-index:8;pointer-events:none;will-change:transform}
.cross img,.cross svg{width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(5,20,16,.35))}
.cross-neck{width:150px;inset-block-end:-120px;inset-inline-end:10%;transform:rotate(-8deg)}
.cross-ring{width:110px;inset-block-end:-90px;inset-inline-start:12%;transform:rotate(10deg)}
.cross-ear{width:96px;inset-block-end:-110px;inset-inline-end:16%}

/* ---------- P2 shop ---------- */
.p-shop{display:grid;gap:var(--sp4)}
.filters{display:grid;gap:var(--sp3);margin-block-start:var(--sp4)}
.f-label{font-size:.8125rem;font-weight:500;margin-block-end:8px;color:var(--em-dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.result-count{font-size:.875rem;margin-block-start:var(--sp2);color:var(--em-dim)}
.shelf{display:grid;gap:var(--sp5)}
.group{min-width:0}
.g-title{font-family:var(--f-display);font-weight:700;font-size:var(--s3);line-height:1.1;margin-block-end:var(--sp3);display:flex;align-items:baseline;gap:.4em}
.g-title small{font-family:var(--f-ui);font-weight:400;font-size:var(--s-1);color:var(--em-dim)}
.rail{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-block-end:10px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:none;width:72vw;max-width:300px;scroll-snap-align:start;position:relative}
.card-link{display:block;text-decoration:none}
.card-frame{background:var(--em);padding:12px 12px 0;position:relative}
.card .arch{aspect-ratio:4/5}
.card:hover .arch img{transform:scale(1.07)}
.card-meta{padding:14px 2px 0}
.card-name{font-family:var(--f-display);font-weight:700;font-size:var(--s1);line-height:1.25}
.card-sub{font-size:.875rem;color:var(--em-dim);margin-block-start:2px}
.price{font-variant-numeric:tabular-nums;font-weight:500;margin-block-start:6px;display:flex;gap:10px;align-items:baseline}
.price s{opacity:.6;font-weight:400;font-size:.875em}
.badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;background:var(--co);color:var(--em);font-size:.75rem;font-weight:500;padding:4px 10px;z-index:2}
.badge.low{background:var(--iv);color:var(--em)}
.card-try{position:absolute;inset-block-start:12px;inset-inline-end:12px;z-index:3;display:flex;align-items:center;gap:6px;min-height:36px;padding-inline:12px;background:var(--iv);color:var(--em);font-size:.8125rem;font-weight:500;transition:background .25s,color .25s}
.card-try:hover{background:var(--co)}
.card-foot{display:flex;justify-content:space-between;align-items:end;gap:10px}
.card-add{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--em);color:var(--iv);transition:background .25s,color .25s}
.card-add:hover{background:var(--iv);color:var(--em)}
.empty-shelf{font-family:var(--f-display);font-size:var(--s2)}

/* ---------- P3 configurator ---------- */
.p-metal{display:grid;gap:var(--sp3)}
.cfg-stage{position:relative;aspect-ratio:1;margin-inline:-20px;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent);mask-image:radial-gradient(closest-side,#000 82%,transparent)}
.cfg-stage canvas{width:100%;height:100%;touch-action:pan-y;cursor:grab}
.cfg-stage canvas.grabbing{cursor:grabbing}
.cfg-fallback{position:absolute;inset:12%;display:none}
.cfg-stage.no-webgl .cfg-fallback{display:block}
.cfg-stage.no-webgl canvas{display:none}
.drag-hint{position:absolute;inset-block-end:12%;inset-inline:0;text-align:center;font-size:.8125rem;color:var(--iv-dim);pointer-events:none}
.opt{border:0;margin:0;padding:0;margin-block-start:var(--sp2)}
.opt legend{font-size:.8125rem;color:var(--iv-dim);margin-block-end:10px;padding:0}
.opt-row{display:flex;flex-wrap:wrap;gap:6px}
.swatch{display:flex;align-items:center;gap:10px;min-height:48px;padding-inline:12px 16px;background:rgba(246,241,233,.07);transition:background .25s}
.swatch i{width:22px;height:22px;transform:rotate(45deg)}
.swatch[aria-checked="true"]{background:var(--iv);color:var(--em)}
.carat{min-width:72px;min-height:48px;padding-inline:12px;background:rgba(246,241,233,.07);font-variant-numeric:tabular-nums;transition:background .25s}
.carat[aria-checked="true"]{background:var(--co);color:var(--em)}
.size-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.size-row button{flex:none;width:48px;min-height:44px;background:rgba(246,241,233,.07);font-variant-numeric:tabular-nums}
.size-row button[aria-checked="true"]{background:var(--iv);color:var(--em)}
.cfg-price{font-family:var(--f-display);font-weight:700;font-size:var(--s3);line-height:1;margin-block-start:var(--sp3);font-variant-numeric:tabular-nums}
.cfg-sub{color:var(--iv-dim);font-size:.9375rem;margin-block-start:6px}
.tiny-link{font-size:.875rem;color:var(--co);text-decoration:underline;text-underline-offset:4px;margin-block-start:8px;display:inline-block}

/* ---------- P4 sizer ---------- */
.p-size{display:grid;gap:var(--sp4)}
.sizer{display:grid;gap:var(--sp3)}
.sizer-stage{position:relative;aspect-ratio:1;max-width:420px;width:100%;background:rgba(58,18,50,.08);touch-action:none}
.sizer-stage svg{width:100%;height:100%}
.sz-handle{cursor:ew-resize}
.sz-out{display:flex;align-items:baseline;gap:14px}
.sz-out b{font-family:var(--f-display);font-size:var(--s6);line-height:.9;font-variant-numeric:tabular-nums}
.sz-out span{font-size:.9375rem;max-width:14ch;line-height:1.3}
.sz-facts{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.9375rem;margin-block-start:var(--sp2)}
.sz-facts dt{color:var(--em-dim);font-size:.8125rem}
.sz-facts dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0}
.range::-webkit-slider-runnable-track{height:3px;background:var(--em)}
.range::-moz-range-track{height:3px;background:var(--em)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;background:var(--em);transform:rotate(45deg)}
.range::-moz-range-thumb{width:20px;height:20px;background:var(--em);border:0;border-radius:0;transform:rotate(45deg)}
.em .range::-webkit-slider-runnable-track{background:var(--iv)}
.em .range::-webkit-slider-thumb{background:var(--co)}
.calib{background:rgba(58,18,50,.08);padding:16px;margin-block-start:var(--sp2)}
.calib-card{height:0;padding-block-end:0;background:var(--em);margin-block:12px;max-width:100%}
.sz-steps{counter-reset:none;display:grid;gap:6px;font-size:.9375rem;margin-block-start:var(--sp3);max-width:44ch}
.sz-steps li{display:flex;gap:10px}
.sz-steps li::before{content:"";flex:none;width:7px;height:7px;margin-block-start:.6em;background:var(--em);transform:rotate(45deg)}

/* ---------- P5 daily editorial ---------- */
.p-daily{display:grid;gap:var(--sp4)}
.ed-a .arch{aspect-ratio:3/4}
.ed-b{display:none}
.ed-b .arch{aspect-ratio:1}
.look{display:grid;gap:2px;margin-block-start:var(--sp4)}
.look li{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:10px;background:rgba(246,241,233,.06)}
.look img{width:56px;height:70px;object-fit:cover}
.look .nm{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.2}
.look .pr{font-variant-numeric:tabular-nums;color:var(--iv-dim);font-size:.9375rem}
.look button{min-height:40px;padding-inline:12px;background:rgba(246,241,233,.1);font-size:.875rem}
.look button:hover{background:var(--co);color:var(--em)}

/* ---------- P6 shipping ---------- */
.p-ship{display:grid;gap:var(--sp4)}
.ship-rail{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
.ship-step{flex:none;width:76vw;max-width:320px;scroll-snap-align:start;background:var(--em);color:var(--iv);padding:22px 22px 26px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.ship-step:nth-child(2){background:var(--em-deep)}
.ship-step:nth-child(3){background:var(--em-ink)}
.ship-when{font-family:var(--f-display);font-weight:700;font-size:var(--s4);line-height:1}
.ship-step p{font-size:1rem;line-height:1.45;max-width:24ch}
.ship-facts{display:grid;gap:2px}
.ship-facts li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:1rem}
.ship-facts li+li{box-shadow:none}
.ship-facts b{font-weight:500;text-align:end}
.ship-facts li:nth-child(odd){background:linear-gradient(90deg,transparent,rgba(58,18,50,.07),transparent)}

/* ---------- P7 visit / footer ---------- */
.p-visit{display:grid;gap:var(--sp4);padding-block-end:120px}
.visit-list{display:grid;gap:var(--sp3);margin-block-start:var(--sp4)}
.visit-list dt{font-size:.8125rem;color:var(--iv-dim)}
.visit-list dd{margin:2px 0 0;font-size:var(--s1);line-height:1.35}
.visit-list a{text-decoration:none}
.visit-list a:hover{color:var(--co)}
.wordmark{font-family:var(--f-display);font-weight:700;font-size:clamp(5rem,26vw,16rem);line-height:.8;color:var(--em-lift);user-select:none}
.legal{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--iv-dim)}
.legal a,.legal button{min-height:36px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.nex{font-size:.8125rem;color:var(--iv-dim)}

/* ---------- question map + mobile thumb bar ---------- */
.qmap{display:none}
.thumb-bar{position:fixed;inset-block-end:0;inset-inline:0;z-index:55;display:grid;grid-template-columns:1fr auto auto;background:var(--em-deep);padding-block-end:env(safe-area-inset-bottom)}
.thumb-bar .btn{min-height:58px}
.thumb-bar .tb{display:grid;place-items:center;min-width:64px;min-height:58px;color:var(--iv);position:relative}
.thumb-bar .tb .cart-count{position:absolute;inset-block-start:8px;inset-inline-end:8px;min-width:18px;height:18px;font-size:.6875rem}
body{padding-block-end:58px}

/* ---------- drawers ---------- */
.scrim{position:fixed;inset:0;z-index:90;background:rgba(5,22,18,.55);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;z-index:100;width:min(100%,560px);display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .6s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:12px}
.drawer-title{font-family:var(--f-display);font-weight:700;font-size:var(--s2);line-height:1.1}
.x{width:48px;height:48px;display:grid;place-items:center;flex:none;transition:transform .4s var(--ease)}
.x:hover{transform:rotate(90deg)}
.drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 20px 24px}
.pd{background:var(--em-deep);color:var(--iv)}
.pd-media{display:grid;grid-template-columns:1fr;gap:10px}
.pd-media .arch{aspect-ratio:4/5;background:var(--em)}
.pd-name{font-family:var(--f-display);font-weight:700;font-size:var(--s3);line-height:1.08;margin-block-start:var(--sp3)}
.pd-price{font-size:var(--s1);font-variant-numeric:tabular-nums;margin-block-start:10px;display:flex;gap:12px;align-items:baseline}
.pd-price s{opacity:.55;font-size:.8em}
.pd-short{color:var(--iv-dim);margin-block-start:4px}
.pd-section{margin-block-start:var(--sp3)}
.pd-label{font-size:.8125rem;color:var(--iv-dim);margin-block-end:8px;display:flex;justify-content:space-between}
.var-row{display:flex;flex-wrap:wrap;gap:6px}
.var{min-width:56px;min-height:48px;padding-inline:12px;background:rgba(246,241,233,.08);font-variant-numeric:tabular-nums;position:relative}
.var[aria-checked="true"]{background:var(--iv);color:var(--em)}
.var[disabled]{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.var .low{position:absolute;inset-block-start:-8px;inset-inline-end:-4px;background:var(--co);color:var(--em);font-size:.625rem;padding:1px 4px;font-weight:500}
.qty{display:inline-flex;align-items:center;background:rgba(246,241,233,.08)}
.qty button{width:44px;height:48px;font-size:1.25rem}
.qty output{min-width:32px;text-align:center;font-variant-numeric:tabular-nums}
.pd-actions{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-block-start:var(--sp3)}
.pd-actions .btn{width:100%}
.pd-alt{display:flex;flex-wrap:wrap;gap:4px 20px;margin-block-start:var(--sp2)}
.pd-desc{margin-block-start:var(--sp3);line-height:1.7;color:var(--iv);max-width:52ch}
.pd-facts{margin-block-start:var(--sp3);display:grid;gap:2px;font-size:.9375rem}
.pd-facts li{display:flex;gap:10px;align-items:baseline;color:var(--iv-dim)}
.pd-facts li::before{content:"";flex:none;width:6px;height:6px;background:var(--gold);transform:rotate(45deg) translateY(-2px)}
.pd-msg{min-height:1.4em;font-size:.875rem;color:var(--co);margin-block-start:8px}

.cd{background:var(--co);color:var(--em)}
.cd .drawer-body{display:flex;flex-direction:column}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:12px 0}
.ci+.ci{margin-block-start:4px}
.ci img{width:72px;height:90px;object-fit:cover;background:var(--em)}
.ci-3d{width:72px;height:90px;display:grid;place-items:center;background:var(--em);color:var(--co);font-family:var(--f-display);font-weight:700}
.ci-name{font-family:var(--f-display);font-weight:700;line-height:1.25}
.ci-var{font-size:.8125rem;color:var(--em-dim)}
.ci-ctrl{display:flex;align-items:center;gap:4px;margin-block-start:6px}
.ci-ctrl button{width:32px;height:32px;background:rgba(58,18,50,.1)}
.ci-ctrl output{min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
.ci-del{font-size:.8125rem;text-decoration:underline;text-underline-offset:3px;margin-inline-start:8px;min-height:32px}
.ci-price{font-variant-numeric:tabular-nums;font-weight:500}
.cart-empty{padding:40px 0;display:grid;gap:16px;justify-items:start}
.cart-empty p{font-family:var(--f-display);font-size:var(--s2);line-height:1.2}
.cart-sum{margin-block-start:auto;padding-block-start:var(--sp3)}
.ship-meter{height:4px;background:rgba(58,18,50,.15);margin-block:8px 6px}
.ship-meter i{display:block;height:100%;background:var(--em);transition:width .6s var(--ease)}
.ship-note{font-size:.8125rem}
.sum-row{display:flex;justify-content:space-between;font-size:1.0625rem;margin-block-start:12px;font-variant-numeric:tabular-nums}
.sum-row.total{font-family:var(--f-display);font-weight:700;font-size:var(--s2)}
.cart-sum .btn{width:100%;margin-block-start:var(--sp2)}

/* checkout form */
.co-form{display:grid;gap:14px;margin-block-start:8px}
.field label,.field .lbl{display:block;font-size:.8125rem;font-weight:500;margin-block-end:6px}
.field input,.field textarea,.field select{width:100%;min-height:50px;padding:12px 14px;background:var(--iv);color:var(--em);border:0;font-size:1rem}
.field textarea{min-height:80px;resize:vertical}
.field input[aria-invalid="true"]{outline:2px solid var(--em-deep);background:#fff}
.err{font-size:.8125rem;font-weight:500;color:var(--em-deep);min-height:1em;margin-block-start:4px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.seg label{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:rgba(58,18,50,.1);cursor:pointer;font-size:.9375rem;line-height:1.3}
.seg label small{font-size:.75rem;color:var(--em-dim)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--em);color:var(--iv)}
.seg label:has(input:checked) small{color:var(--iv-dim)}
.seg label:has(input:focus-visible){outline:2px solid var(--em);outline-offset:2px}
.check{display:flex;gap:10px;align-items:center;min-height:44px;font-size:.9375rem;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--em)}
.pay-note{font-size:.8125rem;color:var(--em-dim)}
.done{display:grid;gap:14px;padding-block:20px}
.done h3{font-family:var(--f-display);font-size:var(--s3);line-height:1.05}
.done .oid{font-variant-numeric:tabular-nums;font-weight:500}

/* toast + modal */
.toast{position:fixed;inset-block-end:76px;inset-inline-start:50%;z-index:150;transform:translate(50%,20px);background:var(--iv);color:var(--em);padding:12px 18px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .5s var(--ease);max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translate(50%,0)}
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(5,22,18,.6)}
.modal[hidden]{display:none}
.modal-box{background:var(--iv);color:var(--em);max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:28px}
.modal-box h2{font-family:var(--f-display);font-size:var(--s3);line-height:1.1;margin-block-end:14px}
.modal-box p,.modal-box li{margin-block-end:10px;line-height:1.65}
.modal-box ul{list-style:none}

.wa-float{position:fixed;inset-block-end:76px;inset-inline-start:16px;z-index:54;width:52px;height:52px;display:none;place-items:center;background:var(--em-deep);color:var(--iv)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.08s}.js .rv-d2{transition-delay:.16s}.js .rv-d3{transition-delay:.24s}
.js .rv-clip .arch{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease)}
.js .rv-clip .arch img{transform:scale(1.18);transition:transform 1.8s var(--ease)}
.js .rv-clip.in .arch{clip-path:inset(0 0 0 0)}
.js .rv-clip.in .arch img{transform:none}

/* ==========================================================================
   ≥ 900px : the horizontal canvas
   ========================================================================== */
@media (min-width:900px){
  :root{--hdr:84px}
  .hdr{padding:20px 28px}
  .thumb-bar{display:none}
  body{padding-block-end:0}
  .wa-float{display:grid;inset-block-end:24px}
  .toast{inset-block-end:28px}
  .qmap{position:fixed;z-index:55;inset-block-end:20px;inset-inline-end:28px;display:flex;align-items:stretch;background:var(--em-deep);color:var(--iv)}
  .qmap button{position:relative;min-height:46px;padding-inline:14px;font-size:.8125rem;color:var(--iv-dim);transition:color .25s,background .25s}
  .qmap button:hover{color:var(--iv);background:rgba(246,241,233,.06)}
  .qmap button[aria-current="true"]{color:var(--em);background:var(--co)}
  .qmap-bar{position:absolute;inset-inline:0;inset-block-start:-3px;height:3px;background:rgba(246,241,233,.1)}
  .qmap-bar i{display:block;height:100%;width:0;background:var(--gold);margin-inline-start:auto}
  .scroll-cue{display:flex}

  .card{width:300px}
  .rail{overflow:visible;margin:0;padding:0}

  /* ----- horizontal mode (JS adds .is-h) ----- */
  .is-h body{overflow-x:hidden}
  .is-h .canvas{height:100vh;overflow:hidden}
  .is-h .track{display:flex;height:100vh;width:max-content;will-change:transform}
  .is-h .panel{height:100vh;flex:none;padding:calc(var(--hdr) + 36px) 5vw 92px}
  .is-h .cross-neck{inset-block-end:auto;inset-block-start:18vh;inset-inline-end:0;width:min(17vw,250px);transform:translateX(-50%) rotate(-6deg)}
  .is-h .cross-ring{inset-block-end:auto;inset-block-start:46vh;inset-inline-start:auto;inset-inline-end:0;width:min(11vw,170px);transform:translateX(-50%) rotate(12deg)}
  .is-h .cross-ear{inset-block-end:auto;inset-block-start:22vh;inset-inline-end:0;width:min(8vw,124px);transform:translateX(-50%)}

  .is-h .p-mirror{width:100vw;grid-template-columns:minmax(0,40vh) minmax(0,1fr);grid-template-columns:auto 1fr;gap:6vw;align-items:end;padding-inline:7vw 9vw}
  .is-h .mirror{width:auto;height:calc(100vh - var(--hdr) - 36px - 92px);aspect-ratio:auto;display:flex;flex-direction:column;align-self:stretch}
  .is-h .mirror-arch{height:auto;flex:1;aspect-ratio:4/5}
  .is-h .qa-open{padding-block-end:2vh}

  .is-h .p-shop{grid-template-columns:min(30vw,420px) max-content;gap:5vw;align-items:stretch;padding-inline:7vw 9vw}
  .is-h .shop-intro{align-self:center}
  .is-h .shelf{display:flex;gap:5vw;align-items:stretch}
  .is-h .group{display:flex;flex-direction:column;justify-content:center}
  .is-h .rail{display:flex;gap:28px;align-items:flex-end}
  .is-h .card{width:clamp(220px,19vw,300px)}
  .is-h .card.feat{width:clamp(280px,25vw,400px)}
  .is-h .card .arch{aspect-ratio:auto;height:min(46vh,calc(var(--cw,300px)*1.25))}
  .is-h .card.feat .arch{height:min(52vh,500px)}
  .is-h .card:not(.feat) .arch{height:min(40vh,380px)}

  .is-h .p-metal{width:100vw;grid-template-columns:1.25fr 1fr;align-items:center;gap:3vw;padding-inline:4vw 9vw}
  .is-h .cfg-stage{margin:0;aspect-ratio:auto;height:calc(100vh - var(--hdr) - 60px);max-height:820px}
  .is-h .p-metal .q{font-size:clamp(var(--s3),3.6vw,var(--s4))}
  .is-h .p-metal .a{font-size:1.0625rem;margin-block-start:var(--sp2)}
  .is-h .p-metal .cta-row{margin-block-start:var(--sp3)}
  .is-h .p-metal .q-mark{margin-block-end:8px}

  .is-h .p-size{width:max-content;grid-template-columns:min(30vw,430px) auto;align-items:center;gap:6vw;padding-inline:8vw 9vw}
  .is-h .sizer{grid-template-columns:auto 300px;align-items:center;gap:4vw}
  .is-h .sizer-stage{width:min(48vh,400px);max-width:none}

  .is-h .p-daily{width:max-content;grid-template-columns:auto min(32vw,460px) auto;align-items:center;gap:4vw;padding-inline:6vw 9vw}
  .is-h .ed-a .arch{height:calc(100vh - var(--hdr) - 130px);aspect-ratio:3/4;width:calc((100vh - var(--hdr) - 130px)*.75)}
  .is-h .ed-b{display:block;align-self:end}
  .is-h .ed-b .arch{width:min(24vw,340px)}
  .is-h .p-daily .qa{max-width:460px}

  .is-h .p-ship{width:max-content;grid-template-columns:min(32vw,460px) min(48vw,720px);align-items:center;gap:5vw;padding-inline:7vw 9vw}
  .is-h .ship-rail{overflow:visible;margin:0;padding:0}
  .is-h .ship-step{width:auto;flex:1;min-height:300px}
  .is-h .ship-facts{margin-block-start:var(--sp4)}

  .is-h .p-visit{width:max(80vw,1080px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:4vw;padding-inline:7vw 9vw}
  .is-h .visit-foot{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:end;gap:20px}

  /* vertical fallback on desktop (reduced motion) keeps it composed */
  html:not(.is-h) .p-mirror{grid-template-columns:auto 1fr;align-items:end;gap:6vw;padding-inline:7vw}
  html:not(.is-h) .p-metal{grid-template-columns:1.2fr 1fr;align-items:center}
  html:not(.is-h) .cfg-stage{margin:0}
  html:not(.is-h) .p-shop{padding-inline:7vw}
  html:not(.is-h) .panel{padding-inline:7vw}
  html:not(.is-h) .rail{overflow-x:auto}
}
@media (min-width:900px) and (max-height:760px){
  .is-h .q{font-size:clamp(var(--s3),4vw,var(--s4))}
  .is-h .qa-open .q{font-size:var(--s5)}
  .is-h .a{font-size:1.125rem}
}

/* ---------- mobile refinements ---------- */
@media (max-width:899px){
  :root{--hdr:64px}
  .hdr{padding:10px 12px}
  .logo{font-size:var(--s1);padding:9px 14px 10px}
  .hdr-nav a{display:none}
  .cart-btn{min-height:44px;padding-inline:14px}
  .q{font-size:var(--s3)}
  .qa-open .q{font-size:clamp(2.5rem,12.5vw,var(--s4))}
  .a{font-size:1.125rem}
  .p-mirror{padding-block-start:calc(var(--hdr) + 22px)}
  .mirror{width:100%}
  .mirror-arch{aspect-ratio:5/5.4}
  .cfg-stage{max-height:min(110vw,520px);aspect-ratio:auto;height:min(100vw,480px)}
  .wordmark{font-size:31vw}
  .cross-neck{width:118px;inset-block-end:-96px}
  .p-shop{padding-block-end:100px}
  .sizer-stage{max-width:300px;justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}.js .rv-clip .arch{clip-path:none}.js .rv-clip .arch img{transform:none}
  #ambient{opacity:.6}
}