/* SENAVA — dark editorial, gaya daqconsulting */
@font-face{
  font-family:"Jakarta";
  src:url("fonts/PlusJakartaSans-var.ttf") format("truetype");
  font-weight:200 800;
  font-display:swap;
}
:root{
  --bg:#070707;
  --panel:#0c0c0c;
  --ink:#f4f2ee;
  --mut:#a49e94;
  --dim:#8f897f;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.22);
  --stroke:rgba(244,242,238,.42);
  --ex:cubic-bezier(.19,1,.22,1);
  --mat:cubic-bezier(.4,0,.2,1);
  --pad:clamp(20px,4vw,56px);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:#333 #0a0a0a}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Jakarta",system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading,body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
.mono{font-family:var(--mono);letter-spacing:.14em}
.outline{color:transparent;-webkit-text-stroke:1.4px var(--stroke)}
.hide-m{display:inline-flex}
@media(max-width:767px){.hide-m{display:none}}

/* preloader */
.preloader{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;
}
.pre-word{
  font-size:clamp(28px,5vw,52px);font-weight:200;
  letter-spacing:.42em;text-indent:.42em;
}
.pre-line{width:min(320px,60vw);height:1px;background:var(--line)}
.pre-line span{display:block;height:100%;width:0;background:var(--ink)}
.pre-meta{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim)}
.preloader.done{transition:transform .7s var(--ex);transform:translateY(-101%)}

/* hairline grid */
.lines{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  display:grid;grid-template-columns:repeat(5,1fr);
  padding:0 var(--pad);
}
.lines i{border-left:1px solid rgba(255,255,255,.045)}
.lines i:first-child{border-left:0}
@media(max-width:767px){.lines{display:none}}

/* header */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:74px;
  border-bottom:1px solid transparent;
  transition:background .3s var(--mat),border-color .3s var(--mat);
}
.hdr.stuck{background:rgba(7,7,7,.86);backdrop-filter:blur(10px);border-color:var(--line)}
.brand{font-weight:600;letter-spacing:.22em;font-size:15px}
.brand sup{font-size:8px;vertical-align:top;color:var(--mut)}
.nav{display:flex;gap:34px;position:absolute;left:50%;transform:translateX(-50%)}
.nav a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;position:relative;padding:6px 0}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ex);
}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-act{display:flex;align-items:center;gap:14px}
.btn-cart{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  border:1px solid var(--line2);padding:11px 16px;
  transition:background .3s var(--mat),color .3s var(--mat),border-color .3s var(--mat);
}
.btn-cart:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:7px}
.burger i{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .35s var(--ex)}
.burger.open i:first-child{transform:translateY(4.25px) rotate(45deg)}
.burger.open i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
@media(max-width:900px){.nav{display:none}.burger{display:flex}}

/* split button */
.btn-split{display:inline-flex;align-items:stretch;gap:0}
.bs-l{
  display:flex;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  border:1px solid var(--line2);border-right:0;
  padding:0 22px;height:50px;
  transition:background .3s var(--mat),color .3s var(--mat);
}
.bs-b{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;
  background:var(--ink);color:var(--bg);font-size:16px;
  transition:transform .4s var(--ex);
}
.btn-split:hover .bs-l{background:var(--ink);color:var(--bg)}
.btn-split:hover .bs-b{transform:translateX(5px)}
.lnk{
  font-size:13px;letter-spacing:.1em;color:var(--mut);
  border-bottom:1px solid var(--line2);padding-bottom:3px;align-self:center;
  transition:color .3s var(--mat),border-color .3s var(--mat);
}
.lnk:hover{color:var(--ink);border-color:var(--ink)}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  opacity:0;visibility:hidden;transition:opacity .4s var(--mat),visibility .4s;
}
.menu.open{opacity:1;visibility:visible}
.menu-in{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 var(--pad);gap:6px}
.menu-link{
  display:flex;align-items:baseline;gap:18px;
  font-size:clamp(34px,9vw,54px);font-weight:200;padding:10px 0;
  border-bottom:1px solid var(--line);
}
.menu-link em{font-family:var(--mono);font-style:normal;font-size:12px;color:var(--dim);letter-spacing:.2em}
.menu-foot{margin-top:34px;font-size:10px;color:var(--dim)}

/* hero */
main{position:relative;z-index:2}
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,70px);
  align-items:end;
  padding:calc(74px + clamp(40px,7vh,90px)) var(--pad) clamp(50px,8vh,110px);
  min-height:100svh;
}
.eyebrow{
  font-size:10.5px;color:var(--dim);letter-spacing:.3em;
  display:flex;align-items:center;gap:16px;margin-bottom:26px;
}
.eyebrow::after{content:"";flex:0 0 64px;height:1px;background:var(--line2)}
.h-display{
  font-size:clamp(56px,9.6vw,150px);
  line-height:.98;font-weight:200;letter-spacing:-.015em;
}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.ln{display:block}
.hero-sub{font-size:11px;color:var(--mut);line-height:2.1;margin:30px 0 38px}
.hero-cta{display:flex;gap:26px;flex-wrap:wrap}
.hero-frame{
  position:relative;border:1px solid var(--line);overflow:hidden;
}
.hero-frame img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:center 22%}
.hero-tag{
  position:absolute;left:14px;top:14px;
  font-size:10px;letter-spacing:.2em;
  background:rgba(7,7,7,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line2);padding:8px 12px;
}
.fig{font-size:10px;color:var(--dim);margin-top:12px;letter-spacing:.24em}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;align-items:start;min-height:0;padding-top:110px}
  .hero-frame img{aspect-ratio:4/4.2}
}

/* statement */
.statement{padding:clamp(80px,14vh,170px) var(--pad);border-top:1px solid var(--line)}
.stmt{
  font-size:clamp(26px,4.4vw,60px);
  font-weight:200;line-height:1.3;max-width:19ch;
}
.stmt .w{opacity:.14;transition:opacity .2s linear}
@media(min-width:900px){.stmt{max-width:24ch}}

/* generic section */
.sec{padding:clamp(70px,11vh,140px) var(--pad);border-top:1px solid var(--line)}
.sec-head{margin-bottom:clamp(36px,6vh,70px)}
.h-sec{font-size:clamp(40px,6.6vw,96px);line-height:1.02;font-weight:200;letter-spacing:-.01em}
.sec-note{color:var(--mut);max-width:44ch;margin-top:22px;font-size:15px}

/* product grid */
.grid-p{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:1000px){.grid-p{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-p{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--panel);transition:border-color .35s var(--mat),transform .45s var(--ex)}
.card:hover{border-color:var(--line2);transform:translateY(-4px)}
.c-media{position:relative;overflow:hidden}
.c-media img{
  width:100%;aspect-ratio:4/4.3;object-fit:cover;
  filter:saturate(.92) brightness(.97);
  transition:transform .7s var(--ex),filter .5s var(--mat);
}
.card:hover .c-media img{transform:scale(1.045);filter:saturate(1) brightness(1)}
.c-num{
  position:absolute;right:10px;bottom:-14px;
  font-family:var(--mono);font-size:clamp(74px,7vw,104px);font-weight:400;
  color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.5);
  line-height:1;pointer-events:none;
}
.c-body{padding:20px 20px 0}
.c-meta{font-size:10px;color:var(--dim);letter-spacing:.2em;margin-bottom:10px}
.c-body h3{font-size:20px;font-weight:400;letter-spacing:.01em}
.c-price{font-size:13px;color:var(--mut);margin-top:6px;letter-spacing:.1em}
.c-qv{
  width:calc(100% + 40px);margin:18px -20px 0;
  border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.24em;padding:15px;
  transition:background .3s var(--mat),color .3s var(--mat);
}
.c-qv:hover{background:var(--ink);color:var(--bg)}

/* lookbook */
.look-track{
  display:flex;gap:clamp(14px,2vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
}
.look-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(66vw,860px);scroll-snap-align:start}
.slide img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;border:1px solid var(--line)}
.slide figcaption{font-size:10.5px;color:var(--dim);letter-spacing:.2em;margin-top:12px}
.look-bar{height:1px;background:var(--line);margin-top:34px;position:relative}
.look-bar span{position:absolute;left:0;top:0;height:100%;width:25%;background:var(--ink);transition:width .2s linear}
.look-hint{font-size:10px;color:var(--dim);margin-top:14px;letter-spacing:.3em}

/* story */
.story-g{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:900px){.story-g{grid-template-columns:1fr}}
.quote{
  font-size:clamp(26px,3.6vw,50px);font-weight:200;line-height:1.32;
  border-left:1px solid var(--line2);padding-left:clamp(18px,2.5vw,36px);
}
.quote em{font-style:italic;color:var(--mut)}
.story-t p{color:var(--mut);font-size:15.5px;line-height:1.95;margin-bottom:18px}
.facts{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.facts li{
  font-size:10.5px;letter-spacing:.22em;color:var(--dim);
  padding:13px 0;border-bottom:1px solid var(--line);
}

/* CTA */
.cta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  padding:clamp(70px,11vh,140px) var(--pad);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.h-cta{font-size:clamp(38px,5.6vw,84px);line-height:1.05;font-weight:200;letter-spacing:-.01em}
.cta-btn{margin-top:38px}
.cta-note{font-size:10.5px;color:var(--dim);line-height:2.3;text-align:right;letter-spacing:.2em}
@media(max-width:700px){.cta-note{text-align:left}}

/* footer */
.ftr{padding:clamp(56px,8vh,100px) var(--pad) 0}
.ftr-g{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding-bottom:clamp(44px,7vh,80px)}
@media(max-width:900px){.ftr-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ftr-g{grid-template-columns:1fr}}
.f-lab{font-size:10px;color:var(--dim);letter-spacing:.26em;margin-bottom:18px}
.f-col a{
  display:block;font-size:14px;color:var(--mut);padding:6px 0;
  transition:color .3s var(--mat),transform .4s var(--ex);
}
.f-col a:hover{color:var(--ink);transform:translateX(6px)}
.f-word{font-size:clamp(34px,3.4vw,48px);font-weight:200;letter-spacing:.06em;line-height:1;-webkit-text-stroke:1px var(--stroke)}
.f-tag{color:var(--dim);font-size:13px;margin-top:14px;max-width:22ch}
.f-bar{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-size:10px;color:var(--dim);letter-spacing:.18em;
  padding:22px 0 26px;
}

/* drawer */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:130;
  width:min(430px,100%);
  background:#0a0a0a;border-left:1px solid var(--line2);
  transform:translateX(102%);transition:transform .5s var(--ex);
  display:flex;flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.d-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.22em;color:var(--mut);
}
.ico-btn{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);transition:border-color .3s var(--mat),background .3s var(--mat);
}
.ico-btn:hover{border-color:var(--ink);background:rgba(255,255,255,.05)}
.ico-btn svg{width:16px;height:16px}
.d-items{flex:1;overflow-y:auto;padding:8px 24px}
.d-empty{color:var(--dim);font-size:14px;padding:40px 0;text-align:center;letter-spacing:.05em}
.d-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:center}
.d-item img{width:64px;height:74px;object-fit:cover;border:1px solid var(--line)}
.d-it-n{font-size:14px;font-weight:400}
.d-it-m{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.16em;margin-top:4px}
.d-qty{display:flex;align-items:center;gap:0;margin-top:9px}
.d-qty button{width:26px;height:26px;border:1px solid var(--line2);font-size:13px;line-height:1;transition:background .25s var(--mat),color .25s var(--mat)}
.d-qty button:hover{background:var(--ink);color:var(--bg)}
.d-qty span{min-width:30px;text-align:center;font-family:var(--mono);font-size:12px}
.d-rm{font-size:11px;color:var(--dim);letter-spacing:.1em;border-bottom:1px solid transparent;transition:color .3s var(--mat),border-color .3s var(--mat)}
.d-rm:hover{color:var(--ink);border-color:var(--ink)}
.d-price{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mut)}
.d-foot{border-top:1px solid var(--line);padding:20px 24px 26px}
.d-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.d-total span{font-size:11px;color:var(--dim);letter-spacing:.2em}
.d-total strong{font-weight:500;font-size:20px;letter-spacing:.02em}
.btn-solid{
  display:block;width:100%;text-align:center;
  background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  padding:17px 20px;border:1px solid var(--ink);
  transition:background .3s var(--mat),color .3s var(--mat);
}
.btn-solid:hover{background:transparent;color:var(--ink)}
.btn-solid[aria-disabled="true"]{opacity:.35;pointer-events:none}
.d-note{font-size:9.5px;color:var(--dim);line-height:1.9;margin-top:14px;letter-spacing:.12em}
.veil{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.66);
  opacity:0;visibility:hidden;transition:opacity .4s var(--mat),visibility .4s;
}
.veil.on{opacity:1;visibility:visible}

/* quickview */
.qv{
  position:fixed;inset:0;z-index:140;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--mat),visibility .35s;
}
.qv.open{opacity:1;visibility:visible}
.qv-panel{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  width:min(960px,100%);max-height:90svh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);
  transform:translateY(26px);transition:transform .5s var(--ex);
}
.qv.open .qv-panel{transform:translateY(0)}
.qv-x{position:absolute;top:14px;right:14px;z-index:3;background:rgba(7,7,7,.6)}
.qv-media img{width:100%;height:100%;min-height:320px;object-fit:cover}
.qv-info{padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column}
.qv-meta{font-size:10px;color:var(--dim);letter-spacing:.24em;margin-bottom:14px}
.qv-info h3{font-size:clamp(24px,2.6vw,34px);font-weight:300;letter-spacing:.01em}
.qv-price{font-size:16px;color:var(--mut);margin-top:8px;letter-spacing:.1em}
.qv-desc{color:var(--mut);font-size:14.5px;line-height:1.85;margin:20px 0 26px}
.qv-lab{font-size:10px;color:var(--dim);letter-spacing:.26em;margin-bottom:11px}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.chip{
  min-width:46px;padding:11px 12px;text-align:center;
  border:1px solid var(--line2);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  transition:background .28s var(--mat),color .28s var(--mat),border-color .28s var(--mat);
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.qv-fine{font-size:9.5px;color:var(--dim);margin-top:14px;letter-spacing:.14em;line-height:1.9}
@media(max-width:760px){
  .qv-panel{grid-template-columns:1fr}
  .qv-media img{min-height:0;aspect-ratio:4/3}
}

/* reveal default state (JS aktif baru dikasih) */
.js [data-rev]{opacity:0}
.js [data-stagger] > *{opacity:0}
@media(prefers-reduced-motion:reduce){
  .js [data-rev],.js [data-stagger] > *{opacity:1!important;transform:none!important}
  .preloader{display:none}
  *{transition:none!important;animation:none!important}
}

/* ===== katalog page ===== */
.k-hero{padding:calc(74px + clamp(56px,9vh,96px)) var(--pad) clamp(40px,6vh,64px)}
.k-hero .h-sec{margin-top:16px}
.k-note{margin-top:22px;max-width:560px;color:var(--mut);font-size:15px;line-height:1.65}
.k-note a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.k-bar{
  position:sticky;top:73px;z-index:60;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px var(--pad);
  background:rgba(7,7,7,.86);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.f-chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--dim);background:none;border:1px solid var(--line);
  padding:9px 14px;cursor:pointer;
  transition:color .3s var(--mat),border-color .3s var(--mat),background .3s var(--mat);
}
.f-chip:hover{color:var(--mut);border-color:var(--line2)}
.f-chip.on{color:var(--bg);background:var(--ink);border-color:var(--ink)}
button.f-chip.k-sort-lab{cursor:default;padding-right:10px;border-color:transparent}
.f-sep{width:1px;height:22px;background:var(--line);margin:0 6px}
.k-count{margin-left:auto;color:var(--dim)}
.k-grid-wrap{padding:44px var(--pad) clamp(72px,10vh,120px);min-height:60vh}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:767px){
  .k-bar{gap:8px;padding:12px var(--pad);top:73px}
  .f-chip{padding:8px 11px}
  .f-sep{display:none}
  button.f-chip.k-sort-lab{display:none}
  .k-count{width:100%;margin:10px 0 2px}
  .k-hero{padding-top:calc(74px + 56px)}
}

.lnk-all{display:inline-block;margin-top:14px}

/* ===== motion upgrades ===== */
#cartCount{display:inline-block}
.d-item.flash{animation:flashRow 1.4s var(--mat)}
@keyframes flashRow{0%{background:rgba(244,242,238,.16)}100%{background:transparent}}
.pg-wipe{position:fixed;inset:0;z-index:400;pointer-events:none;
  background:var(--bg)}
.pg-wipe::after{content:"SENAVA";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;
  font:600 13px/1 var(--mono);letter-spacing:.55em;color:var(--dim);padding-left:.55em}
@media(hover:none){.card:hover{transform:none}}


/* ===== functional + UX upgrades ===== */
/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--ink);opacity:.85;
  transform-origin:0 50%;transform:scaleX(0);z-index:120;pointer-events:none}

/* side rail indeks bagian */
.rail{display:none;position:fixed;left:8px;top:50%;transform:translateY(-50%);z-index:90;
  flex-direction:column;align-items:flex-start;gap:15px}
.rail a{position:relative;font-size:9.5px;letter-spacing:.14em;color:var(--dim);text-decoration:none;
  display:flex;align-items:center;gap:6px;transition:color .3s var(--mat)}
.rail a::before{content:"";width:12px;height:1px;background:currentColor;transform:scaleX(.4);
  transform-origin:left;transition:transform .3s var(--ex)}
.rail a::after{content:attr(data-lab);position:absolute;left:calc(100% + 10px);top:50%;
  transform:translateY(-50%);font-size:9.5px;letter-spacing:.2em;color:var(--ink);
  background:rgba(7,7,7,.92);border:1px solid var(--line);padding:5px 9px;opacity:0;
  pointer-events:none;transition:opacity .3s var(--mat);white-space:nowrap}
.rail a:hover::after,.rail a:focus-visible::after{opacity:1}
.rail a.on{color:var(--ink)}
.rail a.on::before{transform:scaleX(1)}
@media(max-width:1049px){.rail{display:none !important}}

/* marquee statement */
.marquee{overflow:hidden;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;margin-top:clamp(64px,9vh,110px)}
.mq-track{display:flex;width:max-content;animation:mq 42s linear infinite}
.mq-t{white-space:nowrap;font-size:clamp(28px,4.4vw,56px);font-weight:300;letter-spacing:.05em;
  color:transparent;-webkit-text-stroke:1px rgba(244,242,238,.34)}
@keyframes mq{to{transform:translateX(-50%)}}

/* FAQ */
.faq-g{border-top:1px solid var(--line);margin-top:24px}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i summary{cursor:pointer;list-style:none;padding:22px 0;
  font-size:clamp(17px,1.7vw,21px);font-weight:300;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  transition:color .3s var(--mat)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--dim);
  transition:transform .3s var(--ex),color .3s var(--mat)}
.faq-i[open] summary::after{transform:rotate(45deg)}
.faq-i summary:hover{color:var(--mut)}
.faq-i p{color:var(--mut);font-size:14.5px;line-height:1.85;max-width:74ch;margin:-4px 0 24px}

/* lookbook shop-the-look chips */
.look-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);
  background:none;border:1px solid var(--line);padding:5px 9px;margin:8px 0 0 8px;cursor:pointer;
  transition:color .3s var(--mat),border-color .3s var(--mat),background .3s var(--mat)}
.look-chip:hover{color:var(--bg);background:var(--ink);border-color:var(--ink)}

/* badge BARU + tombol favorit di kartu */
.c-new{position:absolute;top:12px;left:12px;font-size:9px;letter-spacing:.2em;color:var(--bg);
  background:rgba(7,7,7,.7);border:1px solid rgba(244,242,238,.35);padding:5px 8px;
  backdrop-filter:blur(4px);pointer-events:none}
.c-fav{position:absolute;top:6px;right:8px;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;font-size:16px;line-height:1;color:rgba(244,242,238,.75);background:none;
  border:0;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,.55);
  transition:color .3s var(--mat),transform .3s var(--ex)}
.c-fav:hover{transform:scale(1.14)}
.c-fav.on{color:var(--ink);animation:favPop .35s var(--ex)}
@keyframes favPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* search katalog */
.f-search{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink);
  background:none;border:1px solid var(--line);padding:9px 12px;width:150px;outline:none;
  transition:border-color .3s var(--mat)}
.f-search:focus{border-color:var(--ink)}
.f-search::placeholder{color:var(--dim)}
@media(max-width:767px){.f-search{width:100%}}

/* potongan bundle di drawer */
.d-disc{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.d-disc[hidden]{display:none}
.d-disc span{font-size:10px;color:var(--dim);letter-spacing:.16em}
.d-disc strong{font-weight:500;font-size:15px;color:var(--ink);letter-spacing:.02em}
.d-empty a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* quickview: panduan ukuran + sticky bar mobile */
.qv-guide{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:14px 0;margin-bottom:26px}
.qv-guide summary{cursor:pointer;list-style:none;font-size:10px;letter-spacing:.24em;
  color:var(--dim);display:flex;justify-content:space-between;transition:color .3s var(--mat)}
.qv-guide summary:hover{color:var(--ink)}
.qv-guide summary::-webkit-details-marker{display:none}
.qv-guide summary::after{content:"\2193"}
.qv-guide[open] summary::after{content:"\2191"}
.qv-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:10.5px;letter-spacing:.1em}
.qv-table th,.qv-table td{border:1px solid var(--line);padding:8px 6px;text-align:center;color:var(--mut)}
.qv-table th{color:var(--dim);font-weight:400}
.qv-table td:first-child{text-align:left;color:var(--dim)}
.qv-g-note{font-size:12px;color:var(--dim);margin-top:10px;letter-spacing:.02em;line-height:1.6}
.qv-bar{display:none}
@media(max-width:760px){
  #qvAdd{display:none}
  .qv-guide{margin-bottom:20px}
  .qv-bar{display:flex;position:sticky;bottom:0;z-index:3;gap:14px;align-items:center;
    justify-content:space-between;margin:8px -24px -24px;
    padding:13px 24px max(16px,env(safe-area-inset-bottom));
    background:var(--panel);border-top:1px solid var(--line2)}
  .qb-price{font-size:14px;color:var(--ink);letter-spacing:.06em}
  .qv-bar .btn-solid{padding:15px 22px;font-size:11px;letter-spacing:.18em;white-space:nowrap}
}

/* mobile UX */
@media(max-width:767px){
  .d-qty button{width:40px;height:40px}
  .d-note,.qv-fine{font-size:10.5px}
}

/* reduced motion: marquee mati */
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .c-fav.on{animation:none}
}