/* =========================================================================
   CORA PANEL v5 — REFRAKSI · base + chrome
   Registers: ink (Home · Katalog · Kontak) / plaster (Produk) via html[data-register].
   Type: Poppins (headings) · Inter (text, prices, numbers) · Josefin Sans (small uppercase labels, buttons).
   Radius 0 · hairlines 1px drawn · no box-shadows · one metal · one glow per viewport.
   ========================================================================= */
:root{
  --ink:#0B0A09; --graphite:#171412; --ivory:#EDE6DC; --taupe:#9B8D7F; --hair-ink:#2A2521;
  --plaster:#F1ECE5; --plaster-2:#E8E1D8; --char:#141211; --taupe-2:#7C7067; --hair-pl:#DCD3C8;
  --paper:var(--ink); --surface:var(--graphite); --fg:var(--ivory); --muted:var(--taupe); --hair:var(--hair-ink);
  --metal:linear-gradient(135deg,#8E5F4C,#CDA08A 45%,#F1D5C6 55%,#CDA08A);
  --metal-solid:#CDA08A; --spec:#F1D5C6;
  --smoke:rgba(58,46,40,.45); --rib:rgba(234,240,242,.10); --tungsten:rgba(232,179,106,.14);
  --f-display:"Poppins",system-ui,"Helvetica Neue",Arial,sans-serif;     /* headings */
  --f-body:"Inter",system-ui,"Helvetica Neue",Arial,sans-serif;          /* text, prices, numbers */
  --f-label:"Label Sign","Josefin Sans","Poppins",system-ui,sans-serif;  /* small uppercase labels and buttons only */
  --f-num:var(--f-body);
  --t1:clamp(64px,8.6vw,136px); --t1-lh:1; --t1-ls:-.03em;
  --t2:clamp(36px,4vw,58px); --t2-lh:1.1; --t2-ls:-.02em;
  --t3:clamp(20px,1.7vw,26px); --t3-lh:1.3;
  --t4:16px; --t4-lh:1.7;
  --t5:12px; --t5-lh:1.1; --t5-ls:.12em;
  --tm:clamp(110px,16vw,240px); --tm-lh:.85; --tm-ls:-.04em;
  --max:1440px; --gutter:24px; --col-gap:24px; --seam:clamp(96px,12vw,200px);
  --radius:0; --hairline:1px; --row:160px; --sw-w:72px; --sw-h:144px;
  --lens-blur:12px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.7,0,.84,0); --ease-io:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
@media (min-width:1024px){:root{--gutter:48px}}
html[data-register="plaster"]{
  --paper:var(--plaster); --surface:var(--plaster-2); --fg:var(--char); --muted:#6E635A; --hair:var(--hair-pl);
  --metal-solid:#8A5340; color-scheme:light;   /* muted 5.0:1 on plaster, metal 5.3:1 */
}
html.lite{--lens-blur:0px}
/* Josefin's × is a dot-sized glyph; "122 × 244" takes the sign from the system sans instead */
@font-face{font-family:"Label Sign";src:local("Segoe UI Semibold"),local("Segoe UI"),local("Helvetica Neue"),local("Roboto"),local("Arial");unicode-range:U+00D7}


*{box-sizing:border-box}
html{height:auto;-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* the stage never tweens colour: the register flips under the opaque lens sheet */
body{margin:0;background:var(--paper);color:var(--fg);font:400 var(--t4)/var(--t4-lh) var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::-webkit-scrollbar{display:none}
img,video,canvas,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:400;font-family:var(--f-display);text-wrap:balance}
::selection{background:var(--metal-solid);color:#0B0A09}
:focus-visible{outline:1px solid var(--metal-solid);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:var(--gutter);top:-48px;z-index:1000;background:var(--fg);color:var(--paper);padding:10px 14px;font:600 12px var(--f-label);letter-spacing:.12em;text-transform:uppercase;transition:top .2s}
.skip:focus{top:12px}

/* ---- type scale ---- */
.t1{font:300 var(--t1)/var(--t1-lh) var(--f-display);letter-spacing:var(--t1-ls)}
.t2{font:400 var(--t2)/var(--t2-lh) var(--f-display);letter-spacing:var(--t2-ls)}
.t3{font:400 var(--t3)/var(--t3-lh) var(--f-display)}
.t4{font:400 var(--t4)/var(--t4-lh) var(--f-body)}
.t5,.t-label{font:600 var(--t5)/var(--t5-lh) var(--f-label);letter-spacing:var(--t5-ls);text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.t5.nt{text-transform:none;font-family:var(--f-num);font-weight:400;letter-spacing:.01em;font-size:13px}   /* lines that carry a price: "mulai Rp955 rb", never "RP955 RB" */
.tm{font:300 var(--tm)/var(--tm-lh) var(--f-display);letter-spacing:var(--tm-ls);white-space:nowrap}
i.v{font-style:normal;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;background-position:0% 50%}
.hair{height:var(--hairline);background:var(--hair);transform-origin:left;border:0;margin:0}
.hair.metal{background:var(--metal)}
.price{font:500 17px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--metal-solid)}
html[data-register="ink"] .price{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* text links: mono, hairline draws, arrow travels — never a filled button */
.cta{position:relative;display:inline-flex;align-items:center;gap:.7em;font:600 12px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);padding:10px 0}
.cta .ar{display:inline-block;transition:transform .5s var(--ease-out)}
.cta::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.cta:hover .ar{transform:translateX(6px)}
.cta:hover::after{transform:scaleX(1)}
.chip{font:600 var(--t5)/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair);padding:9px 12px;transition:color .3s,border-color .3s,background .3s}
.chip:hover{color:var(--fg);border-color:var(--fg)}
.chip[aria-pressed="true"],.chip.on{color:var(--paper);background:var(--fg);border-color:var(--fg)}
.chip b{font-weight:500;color:inherit;display:inline-block;min-width:1.2em;text-align:center}

/* ---- layout ---- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--seam)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.c1-2{grid-column:1/3}.c3-11{grid-column:3/11}.c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c2-10{grid-column:2/11}.c4-12{grid-column:4/13}.c5-12{grid-column:5/13}.c8-12{grid-column:8/13}.c9-12{grid-column:9/13}
@media (max-width:1023px){.grid12 > *{grid-column:1/-1}}
.corner{position:absolute;width:8px;height:8px;color:var(--muted);pointer-events:none}
.corner::before,.corner::after{content:"";position:absolute;background:currentColor}
.corner::before{left:3.5px;top:0;width:1px;height:8px}.corner::after{top:3.5px;left:0;width:8px;height:1px}
.corner.tl{top:-4px;left:-4px}.corner.tr{top:-4px;right:-4px}.corner.bl{bottom:-4px;left:-4px}.corner.br{bottom:-4px;right:-4px}

/* ---- preloader ---- */
#pre{position:fixed;inset:0;z-index:900;background:#0B0A09;color:#EDE6DC;display:grid;place-items:center;overflow:hidden}
#pre .ctr{font:300 clamp(64px,12vw,160px)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#pre .ctr small{font-size:.22em;letter-spacing:.2em;vertical-align:super;margin-left:.3em;color:#9B8D7F}
#pre .wm{position:absolute;left:var(--gutter);bottom:calc(var(--gutter) + 14px);font-size:clamp(26px,3vw,40px);color:#EDE6DC;--fg:#EDE6DC}

/* ---- the Cora Panels logo (assets/js/logo.js): vector emblem + wordmark, alive on hover ---- */
.logo{display:inline-flex;align-items:center;gap:.42em;font-size:20px;line-height:1;color:var(--fg);-webkit-tap-highlight-color:transparent}
.lg-mark{width:1.75em;height:1.75em;overflow:visible;flex:0 0 auto}
.lg-txt{display:flex;align-items:baseline;gap:.34em;white-space:nowrap}
.lg-word{font:800 1em/.86 var(--f-display);letter-spacing:.01em;display:flex}
.lg-word b{font-weight:800;display:inline-block;background:linear-gradient(100deg,var(--fg) 0 42%,#7DB2FF 50%,var(--fg) 58% 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .9s var(--ease-out) calc(var(--i) * 70ms),transform .6s var(--ease-out) calc(var(--i) * 45ms)}
.lg-sub{font:400 .66em/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;transition:letter-spacing .7s var(--ease-out),opacity .4s;opacity:.88}
.lg-disc{transform-box:fill-box;transform-origin:50% 50%;transition:transform 1s var(--ease-out),filter .6s}
.lg-rim{transition:transform 1s var(--ease-out)}
.lg-fil{opacity:.5}
.lg-glint path{stroke-dasharray:14 100;stroke-dashoffset:115;opacity:0}
.lg-sweep{transform:translateX(0);animation:lgIdle 9s var(--ease-io) 1.6s infinite}
@keyframes lgIdle{0%{transform:translateX(0)}14%,100%{transform:translateX(150px)}}
@keyframes lgSweep{from{transform:translateX(0)}to{transform:translateX(150px)}}
@keyframes lgGlint{0%{stroke-dashoffset:115;opacity:0}15%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-15;opacity:0}}
@keyframes lgLift{0%,100%{transform:translateY(0)}40%{transform:translateY(-.12em)}}
.logo:is(:hover,:focus-visible,.lg-play) .lg-disc{transform:rotate(-9deg) scale(1.07);filter:drop-shadow(0 .18em .35em rgba(30,90,240,.35))}
.logo:is(:hover,:focus-visible,.lg-play) .lg-rim{transform:translate(-1.5px,1.5px)}
.logo:is(:hover,:focus-visible,.lg-play) .lg-sweep{animation:lgSweep 1.1s var(--ease-io) both}
.logo:is(:hover,:focus-visible,.lg-play) .lg-glint path{animation:lgGlint 1.5s var(--ease-io) var(--d) infinite}
.logo:is(:hover,:focus-visible,.lg-play) .lg-word b{background-position:0 0;animation:lgLift .7s var(--ease-out) calc(var(--i) * 60ms) both}
.logo:is(:hover,:focus-visible,.lg-play) .lg-sub{letter-spacing:.24em;opacity:1}
@media (prefers-reduced-motion:reduce){.lg-sweep,.logo .lg-glint path,.logo .lg-word b{animation:none!important}.lg-disc,.lg-word b,.lg-sub{transition:none!important}}
#pre .ln{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);height:1px;background:#2A2521}
#pre .ln i{position:absolute;inset:0;background:var(--metal);transform-origin:left;transform:scaleX(0)}
#pre .meta{position:absolute;right:var(--gutter);bottom:calc(var(--gutter) + 18px);font:600 11px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:#9B8D7F}
@media (max-width:767px){#pre .meta{display:none}}

/* ---- header ---- */
#hdr{position:fixed;top:0;left:0;right:0;z-index:600;height:64px;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--fg);transition:color .5s}
#hdr::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;transition:opacity .5s,background .6s;z-index:-1}
#hdr.solid::before{opacity:.95}
/* the real Cora Panels logo: ivory wordmark on ink, dark wordmark on plaster */
#hdr .wm{font-size:clamp(17px,1.5vw,21px)}
#hdr .right{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
#hdr .tabs{display:flex;gap:clamp(18px,2.6vw,40px);position:relative;padding-bottom:6px}
#hdr .tab{font:600 var(--t5)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .4s,font-weight .4s;padding:6px 0}
#hdr .tab[aria-selected="true"]{color:var(--fg);font-weight:500}
#hdr .tab:hover{color:var(--fg)}
/* over an image hero (no paper behind the header yet) inactive tabs and the chip read in ivory */
html[data-register="ink"] #hdr:not(.solid) .tab{color:rgba(237,230,220,.74)}
html[data-register="ink"] #hdr:not(.solid) .tab .n{opacity:.8}
html[data-register="ink"] #hdr:not(.solid) #daftar{color:#EDE6DC;border-color:rgba(237,230,220,.5)}
#hdr .tab .n{display:inline-block;margin-right:.6em;opacity:.55;font-size:10px;vertical-align:top;margin-top:1px}
#hdr .ul{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--metal)}
#hdr #daftar{display:inline-flex;align-items:center;gap:.7em}
#hdr .sample-chip{color:var(--paper);background:var(--fg);border-color:var(--fg)}
#hdr .sample-chip:hover{color:var(--fg);background:transparent}
html[data-register="ink"] #hdr:not(.solid) .sample-chip{color:#0B0A09;background:#EDE6DC;border-color:#EDE6DC}
@media (max-width:1023px){#hdr .sample-chip{display:none}}
#hdr #daftar b{display:inline-block;min-width:1.1em;text-align:center;overflow:hidden;line-height:1}
body.is-switching #hdr .tab{pointer-events:none}
@media (max-width:1023px){#hdr .tabs{gap:14px}#hdr .tab .n{display:none}#hdr .wm{font-size:17px}}
@media (max-width:599px){#hdr{height:56px;gap:8px}#hdr .wm{font-size:14px}#hdr .right{gap:8px}#hdr .tabs{gap:8px;padding-bottom:4px}#hdr .tab{font-size:9.5px;letter-spacing:.08em;padding:4px 0}#hdr #daftar{padding:7px 6px}#hdr #daftar .lbl{display:none}#hdr #daftar::before{content:"";display:inline-block;width:6px;height:12px;background:var(--metal);margin-right:5px;vertical-align:-2px}}
@media (max-width:359px){#hdr .tabs{gap:6px}#hdr .tab{letter-spacing:.06em}}

/* ---- lens (the sheet), lamp, grain, cursor, rail ---- */
#lens{position:fixed;inset:0;z-index:550;pointer-events:none;clip-path:inset(0 0 0 0);--lens-paper:#0B0A09;--lens-tint:transparent}
#lens .paper{position:absolute;inset:0;background:var(--lens-paper)}
#lens .ribs{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px calc(100vw / 44))}
#lens .tint{position:absolute;inset:0;background:var(--lens-tint)}
#lens .band{position:absolute;top:0;bottom:0;left:0;width:30vw;background:linear-gradient(90deg,transparent,rgba(241,213,198,.38),transparent);opacity:0}
#lens.blur{-webkit-backdrop-filter:blur(var(--lens-blur));backdrop-filter:blur(var(--lens-blur))}
#lamp{position:fixed;inset:0;z-index:540;pointer-events:none;opacity:0;--lx:10%;--ly:10%;background:radial-gradient(600px at var(--lx) var(--ly),var(--tungsten),transparent 70%)}
#grain{position:fixed;inset:0;z-index:650;pointer-events:none;opacity:.035;mix-blend-mode:overlay}
html[data-register="plaster"] #grain,html.lite #grain{display:none}
#cur{position:fixed;left:0;top:0;z-index:800;pointer-events:none}
#cur .dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--fg);transition:background .4s}
#cur .ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1px solid var(--fg);opacity:.7;display:grid;place-items:center;transition:width .4s var(--ease-out),height .4s var(--ease-out),margin .4s var(--ease-out),border-color .3s,opacity .3s}
#cur .ring span{font:600 9px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);opacity:0;transition:opacity .3s;white-space:nowrap}
#cur.hov .ring{width:88px;height:88px;margin:-44px 0 0 -44px;opacity:1}
#cur.hov .ring span{opacity:1}
#cur.metal .ring{border-color:var(--metal-solid)}
#cur.drag .ring{width:96px;height:96px;margin:-48px 0 0 -48px}
@media (hover:none),(pointer:coarse){#cur{display:none}}
html.lite #cur{display:none}
#rail{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:600;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--fg);pointer-events:none}
#rail .ctr{font:400 11px/1 var(--f-num);letter-spacing:.1em;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--muted)}
#rail .bar{width:1px;height:120px;background:var(--hair);position:relative}
#rail .bar i{position:absolute;left:0;right:0;top:0;height:0%;background:var(--fg)}
@media (max-width:1023px){#rail{display:none}}
/* mobile action bar: Get a Sample | WhatsApp (Kontak while the number is blank) */
#wabar{position:fixed;left:0;right:0;bottom:0;z-index:600;height:calc(48px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:none;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);background:var(--paper);color:var(--fg);font:600 var(--t5)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
#wabar > *{display:flex;align-items:center;justify-content:center;gap:.5em;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
#wabar .gs{background:var(--fg);color:var(--paper)}
@media (max-width:1023px){#wabar{display:grid}body{padding-bottom:48px}}

/* ---- stage ---- */
#stage{position:relative;z-index:1;min-height:100vh;min-height:100svh}
.view{position:relative}
.view[hidden]{display:none!important}
section[data-n]{position:relative}

/* ---- primitives ---- */
.cue{position:absolute;left:50%;bottom:clamp(22px,3vw,40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:600 10px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cue i{display:block;width:1px;height:48px;background:var(--muted);transform-origin:top;transform:scaleY(0)}
.rv{position:relative;overflow:hidden;clip-path:inset(0 0 0 0)}
.rv img,.rv .ph,.rv canvas{width:100%;height:100%;object-fit:cover;display:block}
.frame{position:relative;overflow:hidden;background:var(--surface)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.vignette::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(transparent 55%,rgba(0,0,0,.5));opacity:.6}
.sw{position:relative;background:var(--surface)}

/* room-through-lens recipes (shared by Home story, Produk previews, Katalog plates) */
.lens-room{position:relative;overflow:hidden;background:#0B0A09}
.lens-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* overlay: the rib highlight follows the room's light (bright over the window, almost nothing on the dark frame), like the shader's luma-weighted ridge */
.lens-room .ribs{position:absolute;inset:0;mix-blend-mode:overlay;background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 1px,rgba(255,255,255,.08) 1px 3px,transparent 3px calc(var(--rib-w,14px) - 3px),rgba(0,0,0,.30) calc(var(--rib-w,14px) - 3px) var(--rib-w,14px))}
.lens-room .sharp{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--rib-w,14px)*.4),transparent calc(var(--rib-w,14px)*.4) var(--rib-w,14px));mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--rib-w,14px)*.4),transparent calc(var(--rib-w,14px)*.4) var(--rib-w,14px));transform:scaleX(1.035);opacity:.85}
.lens-room .smoke{position:absolute;inset:0;background:var(--smoke);mix-blend-mode:multiply}
.lens-room .tint{position:absolute;inset:0;mix-blend-mode:multiply}
.lens-room .ivory{position:absolute;inset:0;background:rgba(238,241,242,.22)}
.lens-room .specband{position:absolute;top:0;bottom:0;width:22%;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08) 40%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.08) 60%,transparent);pointer-events:none}
.lens-room .exp{position:absolute;inset:0;background:var(--ink);opacity:.85;pointer-events:none}
.lens-room .edge{position:absolute;inset:0;border:1px solid var(--spec);opacity:.7;pointer-events:none}
.lens-room .blur5{filter:blur(5px);transform:scale(1.04)}
.lens-room .blur8{filter:blur(8px);transform:scale(1.05)}
.lens-room .blur10{filter:blur(10px);transform:scale(1.06)}
.lens-room .flip{transform:scaleX(-1)}

/* ---- footer per view ---- */
.foot{padding-block:var(--seam) clamp(32px,4vw,56px)}
.foot .next{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.1em .25em;max-width:100%;font:300 clamp(34px,8vw,140px)/1 var(--f-display);letter-spacing:-.04em}
.foot .next .ar{font-style:normal;font-size:.6em;transition:transform .6s var(--ease-out)}
.foot .next:hover .ar{transform:translateX(.25em)}
.foot .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;margin-top:clamp(40px,6vw,96px)}
.foot .meta nav{display:flex;gap:28px;flex-wrap:wrap}
.foot .meta a:hover{color:var(--fg)}

/* ---- drawer (Daftar) ---- */
#drawer{position:fixed;top:0;right:0;bottom:0;z-index:750;width:min(420px,100vw);transform:translateX(100%);visibility:hidden;transition:transform .6s var(--ease-io),visibility 0s .6s;display:flex;flex-direction:column;color:var(--fg);background:rgba(11,10,9,.76);background:color-mix(in srgb,var(--paper) 72%,transparent);-webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);border-left:1px solid var(--hair)}
html[data-register="plaster"] #drawer{background:rgba(241,236,229,.8);background:color-mix(in srgb,var(--paper) 72%,transparent)}
#drawer.on{transform:none;visibility:visible;transition-delay:0s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#drawer{background:var(--paper)}}
html.lite #drawer,#drawer.opaque{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
#drawer .tots{padding-top:14px}
@media (max-width:1023px){#drawer,html[data-register] #drawer{width:100vw;background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}}
#drawer header{display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);border-bottom:1px solid var(--hair)}
#drawer header h3{font:500 var(--t3)/1 var(--f-display)}
#drawer .body{flex:1;overflow:auto;padding:18px var(--gutter) 30px;scrollbar-width:none}
#drawer .body::-webkit-scrollbar{display:none}
#drawer .sect{padding-block:18px 24px;border-bottom:1px solid var(--hair)}
#drawer .sect h4{font:600 var(--t5)/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;display:flex;justify-content:space-between}
#drawer .chips{display:flex;flex-wrap:wrap;gap:8px}
/* cart line: swatch | (name + price on one baseline, then controls that wrap) — nothing can leave the 420 px drawer */
#drawer .line{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--hair)}
#drawer .line:last-child{border-bottom:0}
#drawer .line > .sw{width:36px;height:72px}
#drawer .line .cell{min-width:0}
#drawer .line .nm{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 18px/1.3 var(--f-display)}
#drawer .line .nm > span:first-child{min-width:0}
#drawer .line .ctl{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:10px;font:400 13px/1.2 var(--f-num);color:var(--muted)}
#drawer .line .fx{font:400 13px/1.4 var(--f-num);color:var(--fg);padding:6px 0;border-bottom:1px solid transparent}
#drawer .line .rm{font:600 10px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 0 8px 4px;margin-left:auto}
#drawer .line .rm:hover{color:var(--fg)}
#drawer .kitline > .sw{display:flex;background:none}
#drawer select,#drawer input{background:transparent;border:0;border-bottom:1px solid var(--hair);color:var(--fg);font:400 13px/1.4 var(--f-num);padding:6px 0;max-width:100%}
#drawer select[data-fin]{max-width:min(100%,170px);text-overflow:ellipsis}
#drawer select option{color:#141211}
#drawer .sub{font:500 14px/1 var(--f-num);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
#drawer .sample .t4{max-width:36ch}
.kitlist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.kitlist li{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}
.kitlist li:last-child{border-bottom:0}
.kitlist .sw{display:block;width:24px;height:48px}
.kitlist .t3{font-size:20px;line-height:1.1}
.kitstrip{display:flex;width:100%;height:100%}
.kitstrip i{flex:1}
#drawer .tot{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font:600 12px/1.4 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#drawer .tot span{white-space:nowrap}
#drawer .tot b{font:500 14px/1.4 var(--f-num);letter-spacing:0;color:var(--fg);font-variant-numeric:tabular-nums;text-align:right;text-transform:none}
#drawer .sub{text-transform:none;flex:0 0 auto}
/* toast: above the mobile WhatsApp bar, never on it */
#kit-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:760;background:var(--fg);color:var(--paper);font:600 11px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;padding:12px 18px;opacity:0;transition:opacity .3s;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#kit-toast.on{opacity:1}
@media (max-width:1023px){#kit-toast{bottom:calc(68px + env(safe-area-inset-bottom,0px))}}
#drawer .tot.big b{font-size:17px}
#drawer .acts{display:flex;flex-direction:column;gap:10px;padding-top:22px}
#drawer .empty{display:grid;gap:10px;padding:18px 0}
#drawer .empty .acts{padding-top:12px}
#drawer .x{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--hair)}
#dbd{position:fixed;inset:0;z-index:740;background:rgba(11,10,9,.35);opacity:0;pointer-events:none;transition:opacity .5s}
#dbd.on{opacity:1;pointer-events:auto}
.tog{display:inline-flex;align-items:center;gap:10px;font:600 var(--t5)/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tog i{width:30px;height:16px;border:1px solid var(--hair);position:relative;transition:border-color .3s}
.tog i::after{content:"";position:absolute;top:3px;left:3px;width:8px;height:8px;background:var(--muted);transition:transform .35s var(--ease-out),background .3s}
.tog[aria-pressed="true"]{color:var(--fg)}
.tog[aria-pressed="true"] i{border-color:var(--fg)}
.tog[aria-pressed="true"] i::after{transform:translateX(14px);background:var(--fg)}

/* ---- shared controls: buttons, steppers, segmented choice ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:44px;padding:12px 18px;border:1px solid var(--fg);color:var(--fg);background:transparent;font:600 12px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;text-align:center;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--fg);color:var(--paper)}
.btn.solid{background:var(--fg);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--fg)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn .ar{transition:transform .4s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}
.step{display:inline-flex;align-items:center;border:1px solid var(--hair);font:500 14px/1 var(--f-num)}
.step button{width:32px;height:32px;display:grid;place-items:center;color:var(--fg)}
.step button:hover{background:var(--surface)}
.step span{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;color:var(--fg)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--hair)}
.seg button{font:600 11px/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;color:var(--muted);border-right:1px solid var(--hair);transition:background .3s,color .3s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--paper)}
@media (prefers-reduced-motion:reduce){
  .cue i{transform:scaleY(1)}
  #grain{display:none}
}