/*
 * EasyWare Store — gaya utama.
 * Disusun dari preview desain (store.easyware.id). Token warna di :root,
 * mode gelap lewat [data-theme] dan prefers-color-scheme.
 */
:root{
  --red:#E31B23; --red-press:#C2141B; --red-text:#C8141C; --red-soft:#FDECEC;
  --bg:#FFFFFF; --surface:#F4F5F7; --surface-2:#ECEEF1; --well:#FFFFFF;
  --ink:#15171A; --ink-2:#565C65; --ink-3:#7C838D;
  --line:#E2E5E9; --trace:#C7CCD3; --dot:#D9DDE2;
  --ok:#11794A; --ok-soft:#E6F4EC; --chip:#17191C; --chip-edge:#17191C;
  --shadow:0 1px 2px rgba(21,23,26,.06),0 8px 24px -12px rgba(21,23,26,.18);
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-disp:"Funnel Display","Inter",system-ui,sans-serif;
  --r-s:8px; --r-m:12px; --r-l:18px;
  --wrap:1240px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --red:#E82028; --red-press:#FF3B42; --red-text:#FF5A60; --red-soft:#2A1416;
    --bg:#0E1012; --surface:#16191C; --surface-2:#1D2125; --well:#F4F5F7;
    --ink:#ECEEF0; --ink-2:#A3AAB3; --ink-3:#848C96;
    --line:#272C31; --trace:#363C44; --dot:#23282D;
    --ok:#4CC88A; --ok-soft:#12261C; --chip:#252A30; --chip-edge:#3A414A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --red:#E82028; --red-press:#FF3B42; --red-text:#FF5A60; --red-soft:#2A1416;
  --bg:#0E1012; --surface:#16191C; --surface-2:#1D2125; --well:#F4F5F7;
  --ink:#ECEEF0; --ink-2:#A3AAB3; --ink-3:#848C96;
  --line:#272C31; --trace:#363C44; --dot:#23282D;
  --ok:#4CC88A; --ok-soft:#12261C; --chip:#252A30; --chip-edge:#3A414A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{-webkit-text-size-adjust:100%}
/* jarak aman di bawah header lengket hanya untuk target di konten, bukan elemen di dalam header */
.view [id],.view details,.view form{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 130px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;letter-spacing:-.015em;line-height:1.12;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num{font-family:var(--f-disp);font-variant-numeric:tabular-nums}

/* ---------- theme transition ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* ---------- header ---------- */
.strip{background:var(--ink);color:var(--bg);font-size:13px}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;min-height:36px;align-items:center}
.strip b{font-weight:600;letter-spacing:.02em}
.strip a{text-decoration:underline;text-underline-offset:3px}
.strip-r{display:flex;gap:20px}
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s}
.bar{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:34px;height:34px}
.lk{display:flex;align-items:baseline;gap:7px}
.wm{font:700 23px/1 var(--f-disp);letter-spacing:-.01em;color:var(--ink)}
.wm i{font-style:normal;color:var(--red)}
.lk small{font:600 14px/1 var(--f-disp);letter-spacing:.03em;color:var(--red-text)}
.cat-btn{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-m);font-weight:500}
.cat-btn:hover{border-color:var(--ink-3)}
.search{flex:1;display:flex;align-items:center;height:46px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);transition:border-color .2s,background .2s}
.search:focus-within{border-color:var(--ink);background:var(--bg)}
.search .ico{margin-left:14px;color:var(--ink-3)}
.search input{flex:1;min-width:0;border:0;background:none;height:100%;padding:0 12px;outline:none;font-size:15px}
.search input::placeholder{color:var(--ink-3)}
.search button{height:36px;margin-right:5px;padding:0 18px;border:0;border-radius:9px;background:var(--red);color:#fff;font-weight:600}
.search button:hover{background:var(--red-press)}
.util{display:flex;align-items:center;gap:4px}
.ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 10px;border:0;background:none;border-radius:var(--r-m);font-weight:500;font-size:14px}
.ugrp{position:relative;display:flex;align-items:center;gap:2px}
.ugrp .ibtn{position:relative;z-index:1;transition:color .2s}
.ugrp .pi{position:absolute;left:0;top:0;border-radius:var(--r-m);pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;
  background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}
.ugrp.hv .pi{opacity:1}
.tseg{margin-right:10px!important}
.badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:600 11px/18px var(--f-body);text-align:center}
.badge.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(.6)}100%{transform:scale(1)}}
.theme-ico .sun{display:none}
:root[data-theme="dark"] .theme-ico .sun{display:block}
:root[data-theme="dark"] .theme-ico .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-ico .sun{display:block}:root:not([data-theme="light"]) .theme-ico .moon{display:none}}
.subnav{border-top:1px solid var(--line)}
.subnav .wrap{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;height:46px;align-items:center}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{position:relative;z-index:1;flex:none;padding:6px 12px;border-radius:999px;font-size:14px;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.subnav a:hover{color:var(--ink)}
/* pil kaca yang meluncur mengikuti kursor (sama dengan menu pcb.easyware.id) */
.subnav .pi{position:absolute;left:0;top:0;height:31px;border-radius:999px;pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;
  background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}
.subnav .wrap.hv .pi{opacity:1}
:root[data-theme="dark"] .subnav .pi{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -6px rgba(0,0,0,.5)}
.subnav a.ext{display:inline-flex;gap:6px;align-items:center;color:var(--red-text);font-weight:500}
.subnav a.ext .ico{width:15px;height:15px}

.mega{position:fixed;left:0;right:0;top:0;z-index:39;background:var(--glass,var(--bg));-webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur,14px));backdrop-filter:saturate(180%) blur(var(--glass-blur,14px));border-bottom:1px solid var(--glass-edge,var(--line));box-shadow:0 24px 40px -24px rgba(0,0,0,.25);visibility:hidden;opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0);transition:opacity .22s,transform .32s cubic-bezier(.22,1,.36,1),clip-path .36s cubic-bezier(.22,1,.36,1),visibility 0s .36s}
.mega.open{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 -40px 0);transition:opacity .2s,transform .32s cubic-bezier(.22,1,.36,1),clip-path .36s cubic-bezier(.22,1,.36,1),visibility 0s}
.mega a{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s cubic-bezier(.22,1,.36,1)}
.mega.open a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*18ms + 60ms)}
.mega .wrap{position:relative}
.mega .pi{position:absolute;left:0;top:0;border-radius:10px;pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18)}
.mega .wrap.hv .pi{opacity:1}
.mega a{position:relative;z-index:1}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 24px;padding-top:20px;padding-bottom:24px}
.mega a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-s);font-size:14px}
.mega a:hover{color:var(--ink)}
.mega a .ico{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-m);border:1.5px solid transparent;font-weight:600;font-size:15px;transition:background .15s,border-color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-press)}
.btn-line{border-color:var(--ink);background:transparent}
.btn-line:hover{background:var(--surface)}
.btn-ghost{background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2)}
.link{color:var(--red-text);font-weight:500;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- views ---------- */
.view{display:none}
.view.on{display:block;animation:viewin .28s ease-out}
@keyframes viewin{from{opacity:0}to{opacity:1}}
section{padding:56px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-h h2{font-size:30px}
.sec-h p{color:var(--ink-2);margin-top:6px;max-width:60ch}

/* ---------- hero ---------- */
.hero{padding:40px 0 24px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(38px,4.6vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1.03;max-width:16ch}
em.r{font-style:italic;color:var(--red-text)}
.rk{color:var(--red-text);font-weight:700}
.hero-sub{font-size:18px;color:var(--ink-2);margin-top:18px;max-width:46ch}
.hero .search{height:58px;margin-top:28px;max-width:560px;background:var(--bg);border-color:var(--ink)}
.hero .search button{height:46px;padding:0 24px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.chips span{font-size:13px;color:var(--ink-3);align-self:center;margin-right:2px}
.chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;background:var(--bg)}
.chip:hover{border-color:var(--ink)}
.proof{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:14px;color:var(--ink-2)}
.stars{display:flex;gap:2px;color:#F5A524}
.stars svg{width:16px;height:16px;fill:currentColor}
.proof b{color:var(--ink);font-weight:600}

.board{position:relative;border-radius:24px;background:var(--surface);border:1px solid var(--line);overflow:hidden;aspect-ratio:560/460}
.board svg{position:absolute;inset:0;width:100%;height:100%}
.board .tr{fill:none;stroke:var(--trace);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.board .pad{fill:var(--surface);stroke:var(--ink);stroke-width:3}
.board .pad-in{fill:var(--ink)}
.board .pulse{fill:var(--red)}
.board .halo{fill:var(--red);opacity:.22}
.board .mod-pcb{fill:var(--chip);stroke:var(--chip-edge);stroke-width:1.5}
.board .ant{fill:none;stroke:#D9B45A;stroke-width:2.5;stroke-linejoin:round}
.board .cast{fill:#D9B45A}
.board .shield{fill:url(#shieldG);stroke:#9AA1AA;stroke-width:1}
.board .sh-t{fill:#2A2F35;font:700 21px var(--f-disp);letter-spacing:-.01em}
.board .sh-s{fill:#4A5058;font:600 9.5px var(--f-body);letter-spacing:.08em}
.board .tr.wl{stroke-dasharray:3 7}
.board .chip-body{fill:var(--chip);stroke:var(--chip-edge);stroke-width:1.5}
.board .pin{fill:var(--ink-3)}
.board .chip-m{fill:#fff;fill-opacity:.45;font:700 11.5px var(--f-body);letter-spacing:.24em}
.board .chip-e{fill:#fff;fill-opacity:.5;font:700 24px var(--f-disp);letter-spacing:.04em}
.board .chip-d{fill:#fff;fill-opacity:.3;font:500 10px var(--f-body);letter-spacing:.16em}
.board .chip-t{fill:#fff;font:700 22px var(--f-disp);letter-spacing:.01em}
.board .chip-s{fill:#fff;opacity:.62;font:500 11px var(--f-body);letter-spacing:.04em}
.board .lbl rect{fill:var(--bg);stroke:var(--line)}
.board .lbl text{fill:var(--ink);font:600 13px var(--f-body)}
.board .lbl:hover rect,.board .lbl:focus rect{stroke:var(--red)}
.board .lbl:hover text{fill:var(--red-text)}
.board-cap{position:absolute;left:18px;bottom:14px;font-size:12px;color:var(--ink-3)}

/* ---------- category drawers ---------- */
.drawers{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.drawer{position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);min-height:128px;transition:border-color .15s,background .15s}
.drawer::before{content:"";position:absolute;top:10px;left:50%;width:34px;height:5px;margin-left:-17px;border-radius:3px;background:var(--line)}
.drawer:hover{border-color:var(--ink-3);background:var(--bg)}
.drawer:hover::before{background:var(--red)}
.drawer .ico{width:28px;height:28px;stroke-width:1.6;margin-top:8px}
.drawer b{font-weight:600;font-size:14px;line-height:1.3}
.drawer small{display:block;color:var(--ink-3);font-size:12px;margin-top:2px}

/* ---------- product cards ---------- */
.grid-p{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pc{display:flex;flex-direction:column;border-radius:var(--r-m);background:var(--bg);border:1px solid var(--line);overflow:hidden;transition:border-color .15s}
.pc:hover{border-color:var(--ink-3)}
.pc-img{position:relative;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;padding:4px}
.pc-img img{width:100%;height:100%;object-fit:contain}
.pc-tag{padding:1px 7px;border-radius:5px;font-size:11px;font-weight:600;background:var(--red-soft);color:var(--red-text)}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-b{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;flex:1}
.pc-brand{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;font-size:11.5px}
.dotsep{width:3px;height:3px;border-radius:50%;background:var(--ink-3);display:inline-block;flex:none}
.pc-brand .nw{color:var(--red-text);font-weight:700}
.pc-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.pc-row .pc-p{margin:0}
.pc-row .pc-add{width:32px;height:32px;flex:none}
.pc-brand{font-size:12px;color:var(--ink-3);font-weight:500}
.pc-t{font:500 14px/1.4 var(--f-body);letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.pc-p{font:600 18px/1.2 var(--f-disp);margin-top:6px}
.pc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;font-size:12px;color:var(--ink-3)}
.pc-add{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.pc-add:hover{background:var(--red);border-color:var(--red);color:#fff}
.pc-add .ico{width:17px;height:17px}

/* ---------- order flow infographic ---------- */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:8px}
.flow-line{position:absolute;left:12.5%;right:12.5%;top:31px;height:3px;background:var(--trace);border-radius:2px}
.flow-line i{position:absolute;inset:0;background:var(--red);border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.5,0,.2,1)}
.flow-line b{position:absolute;top:-5px;left:0;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 22%,transparent);opacity:0}
.flow.in .flow-line i{transform:scaleX(1)}
.flow.in .flow-line b{animation:travel 3.2s 1.7s cubic-bezier(.45,0,.25,1) infinite}
.flow.off .flow-line b,.prog.off .st.now span{animation-play-state:paused}
@keyframes travel{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(100% - 13px);opacity:0}}
.step{position:relative;text-align:center;padding:0 8px}
.step-pad{position:relative;z-index:1;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--bg);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:border-color .4s}
.flow.in .step-pad{border-color:var(--red)}
.flow.in .step:nth-child(3) .step-pad{transition-delay:.45s}
.flow.in .step:nth-child(4) .step-pad{transition-delay:.9s}
.flow.in .step:nth-child(5) .step-pad{transition-delay:1.35s}
.step-pad .ico{width:26px;height:26px}
.step-n{font:600 13px var(--f-disp);color:var(--red-text)}
.step h3{font-size:19px;margin:4px 0 6px}
.step p{font-size:14px;color:var(--ink-2);max-width:26ch;margin:0 auto}

/* ---------- datasheet ---------- */
.ds-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.ds{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:var(--bg)}
.ds-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--surface)}
.ds-head h3{font-size:18px}
.ds-head span{font-size:12px;color:var(--ink-3)}
.ds table{width:100%;border-collapse:collapse}
.ds th{text-align:left;font:500 12px var(--f-body);color:var(--ink-3);padding:12px 22px;border-bottom:1px solid var(--line)}
.ds td{padding:16px 22px;border-bottom:1px solid var(--line);vertical-align:baseline;font-size:14px;color:var(--ink-2)}
.ds tr:last-child td{border-bottom:0}
.ds td:first-child{color:var(--ink);font-weight:500}
.ds .v{font:600 34px/1 var(--f-disp);color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.ds .u{font:500 15px var(--f-disp);color:var(--ink-2);margin-left:4px}
.chan{display:flex;flex-direction:column;gap:10px}
.chan h3{font-size:20px;margin-bottom:4px}
.chan > p{color:var(--ink-2);font-size:14px;margin-bottom:6px}
.ch{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--bg)}
.ch:hover{border-color:var(--ink-3)}
.ch-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface);flex:none}
.ch b{display:block;font-weight:600;font-size:15px}
.ch small{color:var(--ink-3);font-size:13px}
.ch .go{margin-left:auto;color:var(--ink-3)}

/* ---------- pcb banner ---------- */
.pcb{position:relative;overflow:hidden;border-radius:24px;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:44px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.pcb h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.025em}
.pcb p{color:var(--ink-2);margin-top:12px;max-width:44ch}
.pcb ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:8px}
.pcb li{display:flex;gap:10px;align-items:center;font-size:15px}
.pcb li .ico{color:var(--red-text)}
.pcb-art{position:relative;height:260px}
.pcb-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pcb-art .fx{will-change:transform}
.pcb .tr2{fill:none;stroke:#D9B45A;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pcb .via{fill:#143A2B;stroke:#D9B45A;stroke-width:4}
.pcb .sig{fill:#FFE9A8;opacity:0;transition:opacity .5s 2.6s}
.pcb .sig-h{fill:#FFE9A8;opacity:0;transition:opacity .5s 2.6s}
.pcb.in .sig{opacity:1}
.pcb.in .sig-h{opacity:.3}
.pcb .draw{stroke-dasharray:420;stroke-dashoffset:420}
.pcb.in .draw{animation:draw 2.4s .2s ease-out forwards}
.pcb.in .d2{animation-delay:.5s}.pcb.in .d3{animation-delay:.9s}.pcb.in .d4{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- footer ---------- */
footer{margin-top:40px;border-top:1px solid var(--line);background:var(--surface)}
.ft{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;padding:48px 24px 32px}
.ft h4{font:600 14px var(--f-body);margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
.ft a:hover{color:var(--ink)}
.brand-ft{display:flex;align-items:center;gap:12px}
.brand-ft img{width:44px;height:44px}
.brand-ft .wm{font-size:28px}
.brand-ft .lk small{font-size:16px}
.ft-brand p{font-size:14px;color:var(--ink-2);margin-top:14px;max-width:34ch}
.ft-brand address{font-style:normal;font-size:14px;color:var(--ink-2);margin-top:12px}
.pay{display:flex;flex-wrap:wrap;gap:8px;padding:20px 24px;border-top:1px solid var(--line)}
.pay span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.pay em{font-style:normal;font-size:12px;color:var(--ink-3);align-self:center;margin-right:6px}
.copy{display:flex;justify-content:space-between;gap:16px;padding:16px 24px 28px;font-size:13px;color:var(--ink-3)}

/* ---------- catalog ---------- */
.crumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);padding:22px 0 10px}
.crumb a:hover{color:var(--ink)}
.cat-g{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;padding-bottom:40px}
.filters{position:sticky;top:140px;align-self:start;display:grid;gap:24px}
.fgroup h4{font:600 14px var(--f-body);margin:0 0 10px}
.fgroup label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);padding:5px 0;cursor:pointer}
.fgroup input[type=checkbox]{width:18px;height:18px;accent-color:var(--red)}
.fgroup .cnt{margin-left:auto;font-size:12px;color:var(--ink-3)}
.frange{display:flex;gap:8px}
.frange input{width:100%;height:40px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-s);padding:0 10px;font-size:14px}
.tog{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.switch{position:relative;width:42px;height:24px;border-radius:12px;background:var(--trace);border:0;padding:0;transition:background .2s}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--red)}
.switch[aria-checked="true"]::after{transform:translateX(18px)}
.cat-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.cat-top h1{font-size:34px}
.cat-top p{color:var(--ink-2);font-size:14px;margin-top:4px}
.sort{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.sort select{height:42px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);padding:0 12px;font-size:14px}
.cat-g .grid-p{grid-template-columns:repeat(4,1fr)}
.active-f{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.active-f .chip{gap:6px}
.pager{display:flex;gap:6px;justify-content:center;margin-top:32px}
.pager a{min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-s);border:1px solid var(--line);font-weight:500;font-size:14px}
.pager a.cur{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fbtn{display:none}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-bottom:24px}
.gal-main{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;position:relative}
.gal-main img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{aspect-ratio:1;padding:0;border:1.5px solid var(--line);border-radius:var(--r-m);background:#fff;overflow:hidden}
.thumbs button[aria-pressed="true"]{border-color:var(--red)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.pd-brand{font-size:14px;color:var(--ink-3);font-weight:500}
.pd h1{font-size:clamp(26px,2.8vw,34px);margin-top:6px;letter-spacing:-.02em}
.pd-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:14px;color:var(--ink-2)}
.pd-meta .ok{color:var(--ok);font-weight:500;display:inline-flex;gap:6px;align-items:center}
.pd-meta .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.price{font:600 42px/1 var(--f-disp);letter-spacing:-.02em;margin-top:22px}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.perk{padding:12px 14px;border-radius:var(--r-m);background:var(--surface);font-size:13px;color:var(--ink-2)}
.perk b{display:block;color:var(--ink);font-size:14px;font-weight:600}
.opt{margin-top:24px}
.opt h4{font:600 14px var(--f-body);margin:0 0 10px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg a{display:flex;flex-direction:column;padding:10px 16px;border-radius:var(--r-m);border:1.5px solid var(--line);font-size:14px;font-weight:600;min-width:130px}
.seg a small{font-weight:400;color:var(--ink-3);font-size:12px}
.seg a[aria-current="true"]{border-color:var(--ink)}
.buy{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-m);height:48px}
.qty button{width:44px;height:100%;border:0;background:none;display:flex;align-items:center;justify-content:center}
.qty input{width:44px;text-align:center;border:0;background:none;font-weight:600;font-size:16px}
.buy .btn{white-space:nowrap}
.buy .btn-red{flex:1 1 210px}
.buy .btn-line{flex:1 1 140px}
.ship{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.ship-h{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--surface);font-size:14px}
.ship-h .ico{color:var(--ink-2)}
.ship-f{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ship-f input,.inp{flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);padding:0 12px;font-size:14px}
.ship-f input:focus,.inp:focus{outline:none;border-color:var(--ink)}
.rates{display:grid}
.rate{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;animation:rin .35s both}
.rate:last-child{border-bottom:0}
@keyframes rin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rate-l{width:52px;height:28px;border-radius:6px;background:var(--surface);display:flex;align-items:center;justify-content:center;font:700 11px var(--f-body);color:var(--ink-2)}
.rate b{display:block;font-weight:600}
.rate small{color:var(--ink-3);font-size:12px}
.rate .rp{font:600 16px var(--f-disp)}
.rate .free{color:var(--ok)}
.note{font-size:12px;color:var(--ink-3);padding:10px 16px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:24px}
.tabs button{border:0;background:none;padding:14px 16px;font-weight:600;font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--red)}
.tabp{display:none;padding:24px 0}
.tabp.on{display:block}
.pd-low{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px}
.prose{max-width:68ch;color:var(--ink-2)}
.prose p+p,.prose ul{margin-top:12px}
.prose ul{padding-left:20px}
.prose li{margin:4px 0}
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec td{padding:12px 0;border-bottom:1px solid var(--line)}
.spec td:first-child{color:var(--ink-3);width:42%}
.spec td:last-child{font-weight:500}
.help{border:1px solid var(--line);border-radius:var(--r-l);padding:22px;align-self:start}
.help h3{font-size:19px}
.help p{color:var(--ink-2);font-size:14px;margin:8px 0 16px}
.help .btn{width:100%;margin-top:8px}

/* ---------- checkout ---------- */
.co{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;padding-bottom:40px}
.co h1{font-size:34px;margin:4px 0 24px}
.box{border:1px solid var(--line);border-radius:var(--r-l);margin-bottom:16px;background:var(--bg)}
.box-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.box-h h2{font-size:19px}
.box-h .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:600 13px/26px var(--f-disp);text-align:center}
.box-b{padding:18px 20px}
.ci{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci img{width:64px;height:64px;border-radius:10px;background:#fff;border:1px solid var(--line);object-fit:contain}
.ci b{font-weight:500;font-size:14px;display:block;line-height:1.35}
.ci small{color:var(--ink-3);font-size:13px}
.ci .rp{font:600 16px var(--f-disp)}
.addr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.addr label{font-size:13px;color:var(--ink-2);display:grid;gap:6px}
.addr .full{grid-column:1/-1}
.opts{display:grid;gap:8px}
.opt-r{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-m);cursor:pointer;font-size:14px;transition:border-color .15s}
.opt-r:has(input:checked){border-color:var(--ink);background:var(--surface)}
.opt-r input{width:18px;height:18px;accent-color:var(--red);margin:0}
.opt-r b{font-weight:600;display:block}
.opt-r small{color:var(--ink-3);font-size:12px}
.opt-r .rp{font:600 15px var(--f-disp)}
.pay-g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pay-g .opt-r{grid-template-columns:auto auto 1fr}
.sum{position:sticky;top:140px;align-self:start}
.sum .box-b{display:grid;gap:10px;font-size:14px}
.row{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2)}
.row b{color:var(--ink);font-weight:500}
.row.tot{padding-top:12px;border-top:1px solid var(--line);color:var(--ink);font-weight:600;align-items:baseline}
.row.tot b{font:600 28px var(--f-disp);letter-spacing:-.01em}
.row.disc b{color:var(--ok)}
.vch{display:flex;gap:8px}
.vch .btn{min-height:44px;padding:0 16px}
.vmsg{font-size:13px;color:var(--ok);min-height:1em}
.vmsg.err{color:var(--red-text)}
.pts{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--r-m);background:var(--surface);font-size:13px;color:var(--ink-2)}
.pts b{color:var(--ink)}
.secure{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:var(--ink-3)}

/* ---------- tracking ---------- */
.trk-hero{padding:48px 0 20px;text-align:center}
.trk-hero h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.025em}
.trk-hero p{color:var(--ink-2);margin:10px auto 0;max-width:52ch}
.trk-f{display:flex;gap:8px;max-width:620px;margin:26px auto 0}
.co > *,.box-b > *{min-width:0}
@media (max-width:860px){.co{grid-template-columns:minmax(0,1fr)!important}}
.inp{min-width:0;max-width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;padding:0 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.inp:focus{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent)}
.trk-f .inp{flex:1;min-width:0;height:54px;font-size:16px;border-width:1.5px;border-color:var(--ink)}
.trk-f .btn{min-height:54px}
.trk-hint{font-size:13px;color:var(--ink-3);margin-top:10px}
.trk-hint button{border:0;background:none;padding:0;color:var(--red-text);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.trk{max-width:860px;margin:24px auto 0;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:none}
.trk.on{display:block;animation:viewin .3s}
.trk-top{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.trk-top div{background:var(--surface);padding:14px 18px;font-size:13px;color:var(--ink-3)}
.trk-top b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-top:2px}
.prog{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding:28px 18px 22px}
.prog-line{position:absolute;left:12.5%;right:12.5%;top:44px;height:3px;background:var(--trace)}
.prog-line i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.5,0,.2,1)}
.prog .st{position:relative;text-align:center;font-size:13px;color:var(--ink-3)}
.prog .st span{position:relative;z-index:1;display:block;width:34px;height:34px;margin:0 auto 10px;border-radius:50%;background:var(--bg);border:3px solid var(--trace);transition:border-color .3s,background .3s}
.prog .st.done span{border-color:var(--red);background:var(--red)}
.prog .st.now span{border-color:var(--red);background:var(--bg);box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 45%,transparent);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.prog .st.done,.prog .st.now{color:var(--ink);font-weight:500}
.tl{list-style:none;margin:0;padding:6px 24px 24px}
.tl li{position:relative;display:grid;grid-template-columns:120px 1fr;gap:18px;padding:12px 0 12px 0}
.tl li::before{content:"";position:absolute;left:131px;top:20px;width:9px;height:9px;border-radius:50%;background:var(--trace)}
.tl li::after{content:"";position:absolute;left:135px;top:32px;bottom:-12px;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li:first-child::before{background:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 20%,transparent)}
.tl time{font-size:13px;color:var(--ink-3);text-align:right;padding-right:22px}
.tl div{padding-left:22px;font-size:14px}
.tl b{font-weight:600;display:block}
.tl small{color:var(--ink-3)}

/* ---------- toast & bottom nav ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;font-size:14px;font-weight:500;display:flex;gap:10px;align-items:center;z-index:60;transition:opacity .2s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.bnav{display:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .drawers{grid-template-columns:repeat(4,1fr)}
  .grid-p{grid-template-columns:repeat(4,1fr)}
  .cat-g .grid-p{grid-template-columns:repeat(3,1fr)}
  .cat-btn span{display:none}
  .util .lbl-t{display:none}
}
@media (max-width:860px){
  body{font-size:15px;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .wrap{padding:0 16px}
  .strip-r{display:none}
  .strip .wrap{justify-content:center;text-align:center}
  .bar{height:auto;flex-wrap:wrap;gap:10px}
  .bar{padding-top:10px;padding-bottom:10px}
  .bar .search{order:3;flex-basis:100%;height:44px;min-width:0;max-width:100%}
  .board-cap{display:none}
  .cat-btn,.util .hide-m{display:none}
  .util{margin-left:auto}
  .hero{padding-top:24px}
  .hero-g{grid-template-columns:1fr;gap:28px}
  .hero .search{height:52px}
  .board{border-radius:18px}
  section{padding:40px 0}
  .sec-h h2{font-size:24px}
  .drawers{grid-template-columns:repeat(3,1fr);gap:8px}
  .drawer{min-height:108px;padding:16px 12px 12px}
  .grid-p{grid-template-columns:repeat(2,1fr);gap:10px}
  .rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .rail .pc{scroll-snap-align:start}
  .flow{grid-template-columns:1fr;gap:0}
  .flow-line{left:31px;right:auto;top:32px;bottom:32px;width:3px;height:auto}
  .flow-line i{transform-origin:top;transform:scaleY(0)}
  .flow.in .flow-line i{transform:scaleY(1)}
  .flow-line b{display:none}
  .step{display:grid;grid-template-columns:64px 1fr;gap:16px;text-align:left;padding:0 0 22px}
  .step-pad{margin:0}
  .step p{margin:0}
  .ds-wrap,.pcb,.pd,.pd-low,.co,.cat-g{grid-template-columns:1fr}
  .ds td,.ds th{padding-left:14px;padding-right:14px}
  .ds .v{font-size:26px}
  .ds .note-c{display:none}
  .pcb{padding:28px 22px}
  .pcb-art{height:180px}
  .ft{grid-template-columns:1fr 1fr;padding:36px 16px 24px}
  .ft-brand{grid-column:1/-1}
  .copy{flex-direction:column;padding:16px}
  .pay{padding:16px}
  .filters{display:none;position:static}
  .filters.open{display:grid}
  .fbtn{display:inline-flex}
  .cat-g .grid-p{grid-template-columns:repeat(2,1fr)}
  .cat-top{flex-wrap:wrap}
  .cat-top h1{font-size:28px}
  .pd{gap:24px}
  .price{font-size:34px}
  .sum{position:static}
  .pay-g{grid-template-columns:1fr}
  .addr{grid-template-columns:1fr}
  .trk-top{grid-template-columns:1fr 1fr}
  .trk-f{flex-direction:column}
  .trk-f .inp{flex:none;width:100%}
  .tl li{grid-template-columns:86px 1fr;gap:10px}
  .tl li::before{left:91px}.tl li::after{left:95px}
  .tl time{padding-right:14px}
  .tl div{padding-left:16px}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .bnav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;font-size:11px;font-weight:500;color:var(--ink-3)}
  .bnav a[aria-current="page"]{color:var(--red-text)}
  .bnav .badge{top:6px;right:calc(50% - 22px)}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:420px){
  .drawers{grid-template-columns:repeat(2,1fr)}
  .wm{font-size:21px}
}

/* ---------- opsi B: strip keuntungan + perbandingan ---------- */
.b-bar{padding:0 0 8px}
.bb{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden}
.bb-i{display:flex;gap:12px;align-items:center;padding:18px 20px}
.bb-i+.bb-i{border-left:1px solid var(--line)}
.bb-ic{width:42px;height:42px;border-radius:12px;background:var(--red-soft);color:var(--red-text);display:flex;align-items:center;justify-content:center;flex:none}
.bb-i b{display:block;font-size:14px;font-weight:600}
.bb-i small{font-size:12px;color:var(--ink-3)}
.b-cmp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:40px;align-items:center}
.b-cmp-t h2{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.025em}
.b-cmp-t p{color:var(--ink-2);margin:12px 0 22px;max-width:40ch}
.cmp{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg)}
.cmp table{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font:600 13px var(--f-body);color:var(--ink-3);background:var(--surface)}
.cmp thead th.us{color:var(--red-text)}
.cmp tbody th{font-weight:500;color:var(--ink-2);width:26%}
.cmp td.us{font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--red-soft) 55%,transparent)}
.cmp td{color:var(--ink-3)}
.cmp .ok{width:16px;height:16px;color:var(--ok);margin-right:8px;vertical-align:-3px}
/* ---------- kartu kanal seragam dengan datasheet ---------- */
.ds-wrap{align-items:stretch}
.ds{display:flex;flex-direction:column}
.ds table{flex:1}
.chan-card .ds-head h3{font-size:18px}
.cc-sub{font-size:12px;color:var(--ink-3);padding:12px 22px;border-bottom:1px solid var(--line)}
.cc-row{flex:1;display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);transition:background .15s}
.cc-row:last-child{border-bottom:0}
.cc-row:hover{background:var(--surface)}
.cc-row b{display:block;font-size:15px;font-weight:600}
.cc-row small{font-size:13px;color:var(--ink-3)}
.cc-row .go{margin-left:auto;color:var(--ink-3);width:18px;height:18px}
@media (max-width:860px){
  .bb{grid-template-columns:1fr 1fr}
  .bb-i{padding:14px;flex-direction:column;align-items:flex-start;gap:10px}
  .bb-ic{width:36px;height:36px}
  .bb-i+.bb-i{border-left:0}
  .bb-i:nth-child(even){border-left:1px solid var(--line)}
  .bb-i:nth-child(n+3){border-top:1px solid var(--line)}
  .b-cmp{grid-template-columns:1fr;gap:24px}
  .cmp th,.cmp td{padding:12px 10px;font-size:13px}
  .cc-row{padding:14px 16px}
  .cc-sub{padding:12px 16px}
}

/* ---------- halaman produk (opsi 3 + bar beli HP) ---------- */
.p3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding-bottom:8px}
.p3l{position:sticky;top:150px}
.gal{display:flex;flex-direction:column;gap:10px}
.gm{aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:6px}
.gm img{width:100%;height:100%;object-fit:contain;transition:transform .35s}
.gt{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gt button{aspect-ratio:1;padding:0;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.gt button[aria-pressed="true"]{border-color:var(--ink)}
.gt img{width:100%;height:100%;object-fit:contain}
.bl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);font-weight:500}
.bl span:first-child{color:var(--ink);font-weight:600}
.pt{font-size:clamp(24px,2.5vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.18;margin-top:8px}
.pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:18px}
.pr .now{font:700 38px/1 var(--f-disp);letter-spacing:-.02em}
.pr s{font-size:16px;color:var(--ink-3)}
.pr .save{font-size:12px;font-weight:700;color:var(--red-text);background:var(--red-soft);padding:3px 8px;border-radius:6px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mini div{padding:12px 14px}
.mini div+div{border-left:1px solid var(--line)}
.mini small{display:block;font-size:11px;color:var(--ink-3)}
.mini b{font:700 17px var(--f-disp)}
.dr{display:flex;gap:16px;margin-top:12px}
.dr a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--red-text)}
.dr .ico{width:16px;height:16px}
.var{margin-top:22px}
.var p{font-size:13px;font-weight:600;margin-bottom:8px}
.seg2{display:inline-flex;gap:6px}
.seg2 a{min-height:40px;padding:0 16px;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;font-weight:600;font-size:14px}
.seg2 a[aria-current="true"]{border-color:var(--ink)}
.buy2{display:flex;gap:10px;margin-top:22px}
.buy2 .btn{flex:1;white-space:nowrap}
.stk{display:flex;gap:14px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.ok2{color:var(--ok);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.ok2::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.acc{margin-top:26px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-weight:600;font-size:15px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.acc details[open] summary::after{transform:rotate(-135deg)}
.acc details > :not(summary){margin-bottom:18px}
.prose2{color:var(--ink-2);max-width:68ch}.prose2 p+p,.prose2 ul{margin-top:10px}.prose2 ul{padding-left:20px}
.spec2{width:100%;border-collapse:collapse;font-size:14px}
.spec2 th,.spec2 td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left}
.spec2 th{font-weight:400;color:var(--ink-3);width:44%}
.spec2 td{font-weight:500}
.muted{color:var(--ink-3);font-size:14px}
.og{display:flex;gap:8px;margin-top:10px;max-width:420px}
.og input{flex:1;min-width:0;height:42px;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:0 12px;font-size:14px;color:var(--ink)}
.og .btn{min-height:42px;padding:0 16px}
.og-r{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.og-r:empty{display:none}
.rel{padding:48px 0 24px}
.rel .sec-h h2{font-size:24px}
.pbar{display:none}
@media (max-width:860px){
  .p3{grid-template-columns:1fr;gap:22px}
  .p3l{position:static}
  .pr .now{font-size:32px}
  .mini{grid-template-columns:1fr 1fr!important}.mini div:nth-child(3){border-left:0}.mini div:nth-child(n+3){border-top:1px solid var(--line)}
  .on-produk .bnav{display:none}
  .buy2 .btn{display:none}
  .mini-f span{display:none}
  .on-produk .pbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--bg);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .pbar .mn{font:700 20px var(--f-disp);display:block}.pbar s{font-size:12px;color:var(--ink-3)}
  .pbar .btn{min-width:150px}
  .on-produk .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
.shot .on-produk .pbar,.shot body.on-produk .pbar{position:static}

/* ---------- galeri A (desktop) + B (HP) ---------- */
.gal2{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px}
.g-t{display:flex;flex-direction:column;gap:10px}
.g-t button{aspect-ratio:1;padding:0;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.g-t button[aria-pressed="true"]{border-color:var(--ink)}
.g-t img,.slide img{width:100%;height:100%;object-fit:contain}
.g-m{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:6px;background:#fff}
.sl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}
.sl-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;overflow:hidden;display:flex}
.cnt{position:absolute;right:12px;top:12px;font:600 12px var(--f-body);padding:4px 9px;border-radius:999px;background:rgba(21,23,26,.72);color:#fff;display:none}
/* ---------- wishlist, stok, notifikasi ---------- */
.wish{flex:none;width:48px;height:48px;border-radius:var(--r-m);border:1.5px solid var(--line);background:var(--bg);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,transform .15s}
.wish:hover{border-color:var(--ink-3)}
.wish[aria-pressed="true"]{color:var(--red);border-color:var(--red)}
.wish[aria-pressed="true"] .ico{fill:currentColor}
.wish:active{transform:scale(.92)}
.buy2 .btn-line{flex:1}
.notify{margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--surface)}
.notify label{font-size:13px;color:var(--ink-2);display:block}
.notify .og{max-width:none}
.st-low{color:#B45309;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.st-low::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-out{color:var(--red-text);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.st-out::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
:root[data-theme="dark"] .st-low{color:#F5B454}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .st-low{color:#F5B454}}
/* ---------- efek jalur PCB ke "Sering dibeli bersama" ---------- */
.rel-trace{position:relative;height:30px}
.rt-line{position:absolute;left:0;right:10%;top:6px;height:3px;border-radius:2px;background:var(--trace);transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.5,0,.2,1)}
.rel-trace span{position:absolute;top:6px;width:3px;height:24px;margin-left:-1.5px;background:var(--trace);transform-origin:top;transform:scaleY(0);transition:transform .4s ease-out}
.rel-trace span::before{content:"";position:absolute;left:50%;top:-5px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--bg);border:3px solid var(--ink);box-sizing:border-box}
.rel-trace span:first-of-type{}
.rel-trace.in .rt-line{transform:scaleX(1)}
.rel-trace.in span{transform:scaleY(1)}
.rel-trace.in span:nth-of-type(1){transition-delay:.15s}.rel-trace.in span:nth-of-type(2){transition-delay:.4s}.rel-trace.in span:nth-of-type(3){transition-delay:.65s}.rel-trace.in span:nth-of-type(4){transition-delay:.9s}.rel-trace.in span:nth-of-type(5){transition-delay:1.15s}
.rt-pulse{position:absolute;top:1.5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 22%,transparent);opacity:0;z-index:1}
.rel-trace.in .rt-pulse{animation:rtrav 3s 1.4s cubic-bezier(.45,0,.25,1) infinite}
.rel-trace.off .rt-pulse{animation-play-state:paused}
@keyframes rtrav{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(90% - 12px);opacity:0}}
.shot .rel-trace *{transition:none!important}
@media (max-width:860px){
  .gal2{display:block}
  .g-t{display:none}
  .cnt{display:block}
  .rel-trace span{display:none}
  .rel-trace{height:16px}
  .rt-line{right:0}
  @keyframes rtrav{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
  .buy2 .wish{display:none}
  .pbar .wish{width:44px;height:44px}
  .pbar .pb-p{flex:1}
  .pd-out .pbar .btn{background:var(--ink);color:var(--bg)}
  .buy2 .btn-line{display:none}
  .pd-out .buy2{display:none}
}

/* ---------- indikator stok ala LED ---------- */
.led{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.led b{font-weight:700}
.led i{position:relative;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.led-ok i,.led-low i{box-shadow:0 0 7px 1px color-mix(in srgb,currentColor 55%,transparent)}
.led-ok i::after,.led-low i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;will-change:transform,opacity}
.led-ok{color:var(--ok)}
.led-ok i::after{animation:ledp 2.4s ease-out infinite}
.led-low{color:#B45309}
.led-low i{animation:ledb 1.2s steps(1,end) infinite}
.led-low i::after{animation:ledp 1.2s ease-out infinite}
.led-out{color:var(--red-text)}
:root[data-theme="dark"] .led-low{color:#F5B454}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .led-low{color:#F5B454}}
@keyframes ledp{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
@keyframes ledb{0%,60%{opacity:1}61%,100%{opacity:.35}}
.stn{display:inline-block}
.stn.tick{animation:tick .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes tick{0%{transform:translateY(-70%);opacity:0}100%{transform:none;opacity:1}}

/* ---------- datasheet box + stok di atas tombol + terjual ---------- */
.sold-l{margin-top:6px;font-size:13px;color:var(--ink-3)}
.sold-l b{color:var(--ink-2);font-weight:600}
.mini-w{margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mini-w .mini{margin-top:0;border:0;border-radius:0}
.mini-f{display:flex;align-items:center;gap:18px;padding:10px 14px;border-top:1px solid var(--line);background:var(--surface);font-size:13px}
.mini-f a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--red-text)}
.mini-f a:hover{text-decoration:underline;text-underline-offset:3px}
.mini-f .ico{width:16px;height:16px}
.mini-f span{margin-left:auto;color:var(--ink-3);font-size:12px}
.qhead{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:13px;font-weight:600}
.qhead + .buy2{margin-top:8px}

/* ---------- video di galeri + bagikan + varian ---------- */
.vp{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#0E1012}
.vp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.9)}
.vp-g{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.78) 100%)}
.vp-b{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--f-body)}
.vp-b .ico{width:13px;height:13px}
.vp-play{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:rgba(227,27,35,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,0,0,.5);transition:transform .2s}
.vp-play svg{width:26px;height:26px;fill:#fff;margin-left:3px}
.vp-t{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;font:600 16px/1.3 var(--f-body);text-align:left}
.vp-d{position:absolute;right:10px;top:10px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font:600 11px var(--f-body)}
.vbox:hover .vp-play{transform:scale(1.08)}
.vslide{background:#0E1012!important;align-items:center;justify-content:center;padding:14px}
.g-m:has(.vslide){padding:6px}
.vbox{height:100%;aspect-ratio:9/16;border:0;padding:0;background:none;cursor:pointer}
.vbox .vp{height:100%}
.vplay-note{position:absolute;left:12px;right:12px;bottom:64px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;line-height:1.4;text-align:left}
.vthumb{position:relative}
.vt-ic{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.42)}
.vt-ic svg{width:22px;height:22px;fill:#fff}
.bl-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sharew{position:relative}
.share{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center}
.share:hover,.share[aria-expanded="true"]{border-color:var(--ink-3);color:var(--ink)}
.share .ico{width:18px;height:18px}
.share-m{position:absolute;right:0;top:46px;z-index:30;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:var(--shadow);display:grid;gap:2px}
.share-m button,.share-m a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:8px;background:none;font-size:14px;font-weight:500;text-align:left;color:var(--ink)}
.share-m button:hover,.share-m a:hover{background:var(--surface)}
.share-m .ico{width:17px;height:17px;color:var(--ink-3)}
.var-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.var-h p{margin:0}
.var-x{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:0;font-size:12px;font-weight:600;color:var(--ink-3)}
.var-x:hover{color:var(--red-text)}
.var-x .ico{width:14px;height:14px}
.seg2 button{min-height:40px;padding:0 16px;display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);font-weight:600;font-size:14px}
.seg2 button[aria-pressed="true"]{border-color:var(--ink);background:var(--surface)}
.pr .rng{font:700 24px/1 var(--f-disp);color:var(--ink-2)}
.muted2{font-size:13px;font-weight:500;color:var(--ink-3)}
#pdAdd:disabled{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed}
@media (max-width:860px){.vp-t{font-size:14px}.vplay-note{bottom:56px}.pr .rng{font-size:20px}}

/* ---------- efek kaca buram ala iOS (header, navigasi bawah, bar beli) ---------- */
:root{--glass:color-mix(in srgb,var(--bg) 46%,transparent);--glass-blur:14px;--glass-edge:color-mix(in srgb,var(--ink) 8%,transparent)}
:root[data-glass="a"]{--glass:color-mix(in srgb,var(--bg) 66%,transparent);--glass-blur:22px}
:root[data-glass="c"]{--glass:color-mix(in srgb,var(--bg) 28%,transparent);--glass-blur:9px;--glass-edge:color-mix(in srgb,var(--ink) 12%,transparent)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr.glass{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur,22px));backdrop-filter:saturate(180%) blur(var(--glass-blur,22px));border-bottom-color:var(--glass-edge)}
  .hdr.glass .subnav{border-top-color:transparent}
  .hdr.glass .search{background:color-mix(in srgb,var(--surface) 70%,transparent)}
  /* tepi bawah lembut: blur makin tipis ke bawah, bukan garis keras */
  .hdr::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;pointer-events:none;opacity:0;transition:opacity .25s;
    background:linear-gradient(var(--glass),transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
  .hdr.glass::after{opacity:1}
  @media (max-width:860px){
    .bnav,.on-produk .pbar{background:color-mix(in srgb,var(--bg) 84%,transparent)!important;-webkit-backdrop-filter:saturate(180%) blur(var(--glass-blur,22px));backdrop-filter:saturate(180%) blur(var(--glass-blur,22px));border-top-color:var(--glass-edge)!important}
  }
}
html.lowend .hdr.glass,html.lowend .bnav,html.lowend .on-produk .pbar{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lowend .hdr::after{display:none}
@media (prefers-reduced-transparency:reduce){
  .hdr.glass,.bnav,.on-produk .pbar{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr::after{display:none}
}

/* ---------- pil kaca: varian, urutan katalog, navigasi bawah ---------- */
.seg2,.segp{position:relative}
.seg2 .pi,.segp .pi,.bnav .pi{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,width;transition:opacity .25s}
.seg2 .pi{border-radius:10px;border:1.5px solid var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -6px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}
.seg2 button{position:relative;z-index:1}
.seg2 button[aria-pressed="true"]{border-color:transparent;background:transparent}
.segp{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none;max-width:100%}
.segp::-webkit-scrollbar{display:none}
.segp button{position:relative;z-index:1;border:0;background:none;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:color .25s}
.segp button[aria-pressed="true"]{color:var(--ink)}
.segp .pi{border-radius:999px;background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -4px rgba(0,0,0,.18)}
.bnav .pi{opacity:0;border-radius:14px;margin:0;background:color-mix(in srgb,var(--red) 9%,transparent);border:1px solid color-mix(in srgb,var(--red) 16%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.bnav a{z-index:1}
@media (min-width:861px){.bnav .pi{display:none}}

/* ---------- tombol Kategori: ikon berubah jadi silang ---------- */
.cat-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--surface)}
.cb-ic{position:relative;width:20px;height:20px;display:inline-block}
.cb-ic .ico{position:absolute;inset:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
.cb-ic .x{opacity:0;transform:rotate(-90deg) scale(.6)}
.cat-btn[aria-expanded="true"] .g{opacity:0;transform:rotate(90deg) scale(.6)}
.cat-btn[aria-expanded="true"] .x{opacity:1;transform:none}
/* ---------- pengatur tema 3 posisi ---------- */
.tseg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);margin:0 4px}
.tseg button{position:relative;z-index:1;width:32px;height:32px;border:0;background:none;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);transition:color .25s}
.tseg button[aria-checked="true"]{color:var(--ink)}
.tseg button .ico{width:17px;height:17px}
.tseg .pi{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;will-change:transform,width;background:var(--bg);border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 10px -3px rgba(0,0,0,.2)}
:root[data-theme="dark"] .tseg .pi{background:var(--surface-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tseg .pi{background:var(--surface-2)}}
@media (max-width:860px){.tseg button{width:27px;height:27px}.tseg button .ico{width:15px;height:15px}.tseg{margin:0;padding:2px}.brand img{width:30px;height:30px}.brand{gap:8px}.wm{font-size:19px!important}.lk small{font-size:11.5px}.lk{gap:5px}.util .ibtn{min-width:40px;padding:0 6px}.bar{gap:8px}}

/* ---------- footer (opsi 1 + judul gaya // KODE) ---------- */
.fx-footer{margin-top:40px;background:var(--surface);border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding:52px 0 36px}
.fbrand p{font-size:14px;color:var(--ink-2);margin-top:14px;max-width:34ch}
.fbrand address{font-style:normal;font-size:14px;color:var(--ink-2);margin-top:12px}
.fx-footer .brand-ft{display:flex;align-items:center;gap:10px}.fx-footer .brand-ft img{width:40px;height:40px}.fx-footer .brand-ft .wm{font-size:25px}.fx-footer .brand-ft .lk small{font-size:14px}
.fh{font:600 13px/1 var(--f-disp);letter-spacing:.14em;color:var(--red-text);margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.fh .sl{letter-spacing:0;opacity:.85}
.flist{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:-10px}
.flist a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9px;font-size:14px;color:var(--ink-2);transition:color .2s}
.flist a:hover{color:var(--ink)}
.ico.xs{width:13px;height:13px}
.flist .pi{position:absolute;left:0;top:0;border-radius:9px;pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(8px) saturate(160%);backdrop-filter:blur(8px) saturate(160%)}
.flist.hv .pi{opacity:1}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:20px 0;border-top:1px solid var(--line)}
.fpay em{font-style:normal;font-size:12px;color:var(--ink-3);margin-right:4px}.fpay em.g{margin-left:14px}
.fpay span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:6px;background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.fcopy{display:flex;justify-content:space-between;gap:16px;padding:16px 0 28px;font-size:13px;color:var(--ink-3)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:24px;padding:36px 0 24px}.fbrand{grid-column:1/-1}.fcopy{flex-direction:column;gap:4px}}

/* ---------- placeholder bergeser masuk saat kolom aktif (border tetap bawaan) ---------- */
input::placeholder,textarea::placeholder{transition:text-indent .3s cubic-bezier(.22,1,.36,1),opacity .3s;text-indent:0;opacity:1}
input:focus::placeholder,textarea:focus::placeholder{text-indent:7px;opacity:.5}
/* ---------- saran pencarian langsung ---------- */
#hsearch{position:relative}
.acp{position:absolute;left:-1.5px;right:-1.5px;top:calc(100% + 8px);z-index:60;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 24px 44px -20px rgba(0,0,0,.35);padding:8px;opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s .25s;max-height:min(70vh,560px);overflow:auto}
.acp.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s,transform .25s cubic-bezier(.22,1,.36,1),visibility 0s}
.acp h3{font:600 11px/1 var(--f-disp);letter-spacing:.14em;color:var(--red-text);padding:10px 10px 6px}
.acl{position:relative;display:flex;flex-direction:column}
.acl a{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.35}
.acl a.q{grid-template-columns:40px 1fr;color:var(--ink-2)}
.acl a.q .qi{width:40px;height:40px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.acp .ico{margin:0}
.acl a img{width:40px;height:40px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid var(--line)}
.acl mark{background:none;color:var(--red-text);font-weight:700}
.acl a small{font:600 13px var(--f-disp);color:var(--ink);white-space:nowrap}
.acl .sku{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:2px;letter-spacing:.02em}
.acl .pi{position:absolute;left:0;top:0;border-radius:10px;pointer-events:none;will-change:transform,width;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18)}
.acc2{position:relative;display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.acc2 a{position:relative;z-index:1;font-size:12px;font-weight:600;padding:6px 11px;border-radius:999px;background:var(--surface);color:var(--ink-2);transition:color .2s,background .2s}
.acc2 a[aria-selected="true"]{background:transparent;color:var(--ink)}
.acc2 > .pi{position:absolute;left:0;top:0;border-radius:999px;pointer-events:none;will-change:transform,width;transition:opacity .25s;background:color-mix(in srgb,var(--ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.2)}
.acc2 mark{background:none;color:var(--red-text)}
.acn{padding:12px 10px;color:var(--ink-3);font-size:14px}
.acp .kbd{font-size:12px;color:var(--ink-3);padding:6px 10px 4px;border-top:1px solid var(--line);margin-top:6px}
@media (max-width:860px){.acp .kbd{display:none}.acl a small{font-size:12px}}

/* ---------- opsi: link info toko di strip atas / kategori di dalam menu ---------- */
.strip-v{display:contents}
.strip-links{display:none;align-items:center;gap:0}
.strip-links a{text-decoration:none;opacity:.82;padding:0 12px;border-left:1px solid rgba(255,255,255,.22);line-height:1}
.strip-links a:first-child{border-left:0}
.strip-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
html[data-info="strip"] .strip-links{display:flex}
html[data-info="strip"] .strip-v{display:none}
@media (min-width:861px){html[data-cat="menu"] .subnav{display:none}}
@media (max-width:860px){html[data-info="strip"] .strip-r{display:none}}

/* ---------- galeri: panah geser ---------- */
.garw{position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,#fff 88%,transparent);color:#15171A;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 6px 16px -6px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s,background .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.garw.prev{left:12px;transform:translateX(-6px)}.garw.prev .ico{transform:rotate(180deg)}
.garw.next{right:12px;transform:translateX(6px)}
.g-m:hover .garw,.garw:focus-visible{opacity:1;transform:none}
.garw:hover{background:#fff}
.garw:active{transform:scale(.92)}
.garw:disabled{opacity:0!important;pointer-events:none}
@media (max-width:860px),(hover:none){.garw{display:none}}
/* ---------- stok + terjual di bawah harga ---------- */
.pmeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:13.5px;min-height:20px}
.pm-sep{width:1px;height:14px;background:var(--line)}
.pm-sold{color:var(--ink-3)}.pm-sold b{color:var(--ink-2);font-weight:600}
/* ---------- efek tambah ke keranjang ---------- */
.fly{position:fixed;z-index:200;object-fit:contain;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -10px rgba(0,0,0,.35);pointer-events:none;transform-origin:center}
#pdAdd.done,#pbAdd.done{background:var(--ok)!important;color:#fff}
#pdAdd.done .ico,#pbAdd.done .ico{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
/* ---------- efek sederhana di semua interaksi ---------- */
.btn,.chip,.ibtn,.seg2 button,.segp button,.tseg button,.wish,.share,.qty button,.pc-add,.cat-btn,.garw,.drawer,.acc2 a{transition:transform .14s ease,background-color .2s,border-color .2s,color .2s,box-shadow .2s}
.btn:active,.chip:active,.ibtn:active,.seg2 button:active,.segp button:active,.tseg button:active,.wish:active,.share:active,.qty button:active,.pc-add:active,.cat-btn:active,.drawer:active{transform:scale(.96)}
.pc{transition:border-color .2s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
@media (hover:hover){.pc:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(0,0,0,.35)}}
.acc details{overflow:hidden}
.acc details[open] > :not(summary){animation:accin .35s ease-out both}
@keyframes accin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.acc summary{transition:color .2s}.acc summary:hover{color:var(--red-text)}
/* ---------- ulasan ---------- */
.rv-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.rv-sum{display:flex;align-items:center;gap:12px}
.rv-score{font:800 34px/1 var(--f-disp)}
.rv-stars{display:flex;gap:2px;color:var(--line)}.rv-stars svg{width:16px;height:16px;fill:currentColor}
.rv-sum small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.rv-open{min-height:40px;padding:0 14px;font-size:14px}
.rv-note{margin-top:12px;font-size:13px}
.rv-form{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.rv-act .btn-ghost{background:var(--bg);border:1px solid var(--line)}
.rv-demo{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.rv-rate{display:flex;align-items:center;gap:4px}
.rv-rate button{border:0;background:none;padding:2px;color:var(--line);transition:color .15s,transform .15s}
.rv-rate button svg{width:28px;height:28px;fill:currentColor}
.rv-rate button.on{color:#F5A524}
.rv-rate span{margin-left:8px;font-size:13px;font-weight:600;color:var(--ink-2)}
.rv-form textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);resize:vertical}
.rv-form textarea:focus{outline:none;border-color:var(--ink)}
.rv-act{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rv-act .btn{min-height:42px;padding:0 16px;font-size:14px}

/* ---------- ruang napas kolom info produk ---------- */
.info .pt{margin-top:12px;line-height:1.16}
.info .pr{margin-top:28px}
.info .pmeta{margin-top:14px}
.info .mini-w{margin-top:30px}
.info .var{margin-top:30px}
.info .qhead{margin-top:28px}
.info .acc{margin-top:34px}
@media (max-width:860px){.info .pr{margin-top:22px}.info .mini-w,.info .var{margin-top:24px}.info .qhead{margin-top:22px}}

.rv-pts{margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--red-soft);color:var(--red-text);font-size:11.5px;font-weight:700}
.rv-reward{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#F5A524 12%,var(--bg));border:1px solid color-mix(in srgb,#F5A524 30%,transparent)}
.rv-reward .ico{width:18px;height:18px;color:#D48A0C;fill:#F5A524;flex:none;margin-top:1px}
.rv-reward p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.rv-reward b{color:var(--ink)}
.rv-note{margin-top:10px!important}
.rv-earn{font-size:13px;color:var(--ink-2)}.rv-earn b{color:#B45309}
#rvPhoto.ok{border-color:var(--ok);color:var(--ok)}

/* ---------- laci: dua kelompok ---------- */
.dgh{font:600 13px/1 var(--f-disp);letter-spacing:.14em;color:var(--red-text);margin:6px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dgh .sl{letter-spacing:0;opacity:.85}
.drawers + .dgh{margin-top:28px}

.drawers{grid-template-columns:repeat(4,1fr)!important}
@media (max-width:860px){.drawers{grid-template-columns:repeat(2,1fr)!important}}

/* ---------- laci ringkas: dua kelompok berdampingan ---------- */
#drawerGroups{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.dgrp .dgh{margin-top:0}
.drawers.dc{grid-template-columns:1fr 1fr!important;gap:8px}
.drawer.dcx{flex-direction:row;align-items:center;gap:12px;min-height:0;padding:12px 14px}
.drawer.dcx{position:relative}
.drawer.dcx::before{display:block;top:6px;width:28px;height:4px;margin-left:-14px;border-radius:3px;background:var(--line);transition:background .25s,width .3s cubic-bezier(.22,1,.36,1),margin-left .3s cubic-bezier(.22,1,.36,1)}
.drawer.dcx:hover::before{background:var(--red);width:44px;margin-left:-22px}
.dic{width:40px;height:40px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;transition:border-color .2s,color .2s}
.drawer.dcx .ico{width:22px;height:22px;margin:0}
.drawer.dcx b{font-size:14px}
.drawer.dcx small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.drawer.dcx > span:last-child{min-width:0}
.drawer.dcx:hover .dic{border-color:var(--red);color:var(--red-text)}
@media (max-width:1100px){#drawerGroups{grid-template-columns:1fr;gap:24px}}
@media (max-width:860px){.drawers.dc{grid-template-columns:1fr 1fr!important}.drawer.dcx{padding:10px;gap:10px}.dic{width:34px;height:34px}.drawer.dcx small{display:none}.drawer.dcx b{font-size:13px;line-height:1.25}}

/* ---------- batas kirim hari ini ---------- */
.cut{display:inline-flex;align-items:center;gap:8px}
.strip .vch{display:inline;gap:0;opacity:.9}
.cut-dot{width:7px;height:7px;border-radius:50%;background:#8A9099;position:relative}
.cut.live .cut-dot{background:#4CC88A;box-shadow:0 0 6px #4CC88A}
.cut.live .cut-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#4CC88A;animation:ledp 2.4s ease-out infinite}
.pcut{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink-2)}
.pcut .ico{width:16px;height:16px;color:var(--ink-3)}
.pcut.live .ico{color:var(--ok)}
.pcut b{color:var(--ink)}
/* ---------- beli lagi ---------- */
.demo-tag{font-size:11.5px;font-weight:600;color:var(--ink-3);border:1px dashed var(--line);padding:4px 10px;border-radius:999px;white-space:nowrap}
.again-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ag{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .2s}
.ag:hover{border-color:var(--ink-3)}
.ag img{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}
.ag-t{min-width:0;flex:1}.ag-t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-t small{font-size:12px;color:var(--ink-3)}
.ag-add{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .14s,background .2s,color .2s}
.ag-add:hover{background:var(--red);border-color:var(--red);color:#fff}.ag-add:active{transform:scale(.92)}
.ag-add.done{background:var(--ok);border-color:var(--ok);color:#fff}
/* ---------- rail berlabel ---------- */
.rail-h{align-items:center}
.rail-h .segp{margin-bottom:8px}
.rail-h .segp button{font-size:15px;padding:9px 16px}
/* ---------- tutorial ---------- */
.tut-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tut-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);transition:border-color .2s,transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
@media (hover:hover){.tut-c:hover{border-color:var(--ink-3);transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(0,0,0,.35)}}
.tut-th{position:relative;aspect-ratio:16/9;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tut-th img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.tut-ic{background:var(--surface)}.tut-ic .ico{width:40px;height:40px;stroke-width:1.4;color:var(--ink-2)}
.tut-play{position:absolute;width:46px;height:46px;border-radius:50%;background:rgba(227,27,35,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.45)}
.tut-play svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.tut-b{display:flex;flex-direction:column;gap:4px;padding:12px 14px 16px}
.tut-k{font:600 11px var(--f-disp);letter-spacing:.12em;color:var(--red-text);text-transform:uppercase}
.tut-b b{font-size:15px;font-weight:600;line-height:1.3}
.tut-b span{font-size:13px;color:var(--ink-3)}
/* ---------- instansi ---------- */
.inst-b{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center;padding:32px 36px;border:1px solid var(--line);border-radius:22px;background:var(--surface);position:relative;overflow:hidden}
.inst-b::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;background:radial-gradient(circle at 10px 10px,var(--dot) 1.6px,transparent 2px) 0 0/20px 20px;pointer-events:none}
.inst-k{font:600 12px var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.inst-t h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;margin-top:8px}
.inst-t ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.inst-t li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.inst-t li .ico{width:18px;height:18px;color:var(--red-text);flex:none;margin-top:1px}
.inst-a{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.inst-a small{font-size:12px;color:var(--ink-3);text-align:center}
@media (max-width:1100px){.again-row{grid-template-columns:1fr 1fr}.tut-g{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .again-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.ag{flex:0 0 82%;scroll-snap-align:start}
  .demo-tag{display:none}
  .tut-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px}.tut-c{flex:0 0 72%;scroll-snap-align:start}
  .inst-b{grid-template-columns:1fr;padding:24px 20px;gap:20px}
  .rail-h .segp button{font-size:13px;padding:8px 12px}
}

/* ---------- masuk / daftar ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:40px;align-items:start;padding:36px 0 56px;max-width:1040px;margin:0 auto}
.auth-card{border:1px solid var(--line);border-radius:22px;padding:28px 32px 32px;background:var(--bg);box-shadow:0 24px 50px -36px rgba(0,0,0,.35)}
.auth-tabs{display:flex;width:100%;margin-bottom:24px}.auth-tabs button{flex:1;font-size:14px}
.auth-f h1,.acc-main h1{font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.auth-sub{color:var(--ink-2);font-size:14px;margin:6px 0 20px}
.fl{display:grid;gap:6px;margin-bottom:14px}.fl>span:first-child{font-size:13px;font-weight:600;color:var(--ink-2)}
.fl .inp{width:100%;box-sizing:border-box;height:46px}
.fl2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pw{position:relative;display:block}.pw .inp{padding-right:46px}
.pw-eye{position:absolute;right:4px;top:50%;margin-top:-19px;width:38px;height:38px;border:0;background:none;border-radius:8px;color:var(--ink-3);display:flex;align-items:center;justify-content:center}
.pw-eye.on{color:var(--red-text)}.pw-eye:hover{background:var(--surface)}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin:2px 0 18px}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:16px;line-height:1.45}.auth-row .chk{margin:0}
.chk input{width:16px;height:16px;accent-color:var(--red);margin-top:1px;flex:none}
.link.sm{font-size:13px}
.auth-btn{width:100%;min-height:48px}
.g-ic{width:18px;height:18px}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-3);font-size:12px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-guest{text-align:center;font-size:13px;color:var(--ink-3);margin-top:18px}
.auth-side{padding:28px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.auth-side h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:16px}
.auth-side ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.auth-side li{display:flex;gap:12px;align-items:flex-start}
.as-ic{width:38px;height:38px;border-radius:11px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;color:var(--red-text)}
.auth-side b{display:block;font-size:14.5px}.auth-side small{font-size:13px;color:var(--ink-3)}
/* ---------- akun saya ---------- */
.accg{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;padding:32px 0 56px}
.acc-nav{position:relative;display:flex;flex-direction:column;gap:2px;align-self:start;position:sticky;top:150px}
.acc-nav a{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-2)}
.acc-nav a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:600}
.acc-nav a .ico{width:18px;height:18px;color:var(--ink-3)}
.acc-nav .pi{position:absolute;left:0;top:0;border-radius:10px;pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(0,0,0,.18)}
.acc-nav.hv .pi{opacity:1}
@media (hover:none){.acc-nav .pi,.flist .pi,.ugrp .pi,.acl > .pi{display:none}}
.acc-stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
.as-c{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg)}
.as-c small{font-size:12.5px;color:var(--ink-3)}.as-c b{display:block;font:800 30px/1.1 var(--f-disp);margin:4px 0 2px}.as-c span{font-size:12.5px;color:var(--ink-2)}
.as-c.as-pts{background:var(--chip);color:#fff;border-color:var(--chip-edge)}.as-c.as-pts small,.as-c.as-pts span{color:rgba(255,255,255,.65)}.as-c.as-pts b{color:#FFD36B}
.acc-h{font-size:18px;font-weight:800;margin:28px 0 12px}
.ord{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.ord-r{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.ord-r:last-child{border-bottom:0}
.ord-t b{display:block;font-size:14.5px}.ord-t small{font-size:12.5px;color:var(--ink-3)}
.st-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.st-chip.go{background:var(--red-soft);color:var(--red-text)}.st-chip.ok{background:var(--ok-soft);color:var(--ok)}
.btn.sm{min-height:38px;padding:0 14px;font-size:13.5px}
.ord-done{font-size:12.5px;color:var(--ink-3)}
@media (max-width:860px){
  .auth{grid-template-columns:1fr;gap:20px;padding:20px 0 40px}.auth-card{padding:20px 18px 24px}.fl2{grid-template-columns:1fr}
  .accg{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px 0 40px}
  .acc-nav{position:static;flex-direction:row;overflow-x:auto;gap:4px}.acc-nav a{white-space:nowrap;padding:8px 12px}
  .acc-stats{grid-template-columns:1fr 1fr}.as-c.as-pts{grid-column:1/-1}
  .ord-r{grid-template-columns:1fr auto;}.ord-r .btn,.ord-r .ord-done{grid-column:1/-1;justify-self:start}
}

/* ---------- akun: panel ---------- */
.acc-p{display:none;padding:0!important}.acc-p.on{display:block}
.acc-main,.acc-nav{min-width:0}
.acc-p > .segp{margin-bottom:16px}
.olist{display:grid;gap:14px}
.oc{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden}
.oc header,.oc footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px}
.oc header{border-bottom:1px solid var(--line);background:var(--surface)}
.oc header b{display:block;font-size:14.5px}.oc header small{font-size:12.5px;color:var(--ink-3)}
.oc-it{display:grid;gap:2px;padding:8px 10px}
.oi{display:flex;align-items:center;gap:12px;padding:8px;border-radius:10px}.oi:hover{background:var(--surface)}
.oi img{width:48px;height:48px;border-radius:9px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}
.oi b{display:block;font-size:14px;font-weight:500}.oi small{font-size:12.5px;color:var(--ink-3)}
.oc footer{border-top:1px solid var(--line);flex-wrap:wrap;background:none;margin-top:0}
.oc-tot{font-size:14px;color:var(--ink-2)}.oc-tot b{font:700 18px var(--f-disp);color:var(--ink);margin-left:6px}
.oc-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.o-note{font-size:12.5px;color:var(--ink-3)}
.st-chip.go2{background:var(--surface-2);color:var(--ink-2)}
.pt-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;border-radius:18px;background:var(--chip);color:#fff}
.pt-hero small{font-size:13px;color:rgba(255,255,255,.65)}.pt-hero b.num{display:block;font:800 44px/1.05 var(--f-disp);color:#FFD36B;margin:4px 0}.pt-hero span{font-size:13.5px;color:rgba(255,255,255,.75)}.pt-hero span b{color:#fff}
.earn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.earn div{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.earn b{display:block;font:800 20px var(--f-disp);color:#B45309}.earn span{font-size:13px;color:var(--ink-2)}
:root[data-theme="dark"] .earn b{color:#F5B454}
.ptab{border:1px solid var(--line);border-radius:14px;overflow:auto}
.ptab table{width:100%;border-collapse:collapse;font-size:14px}
.ptab th,.ptab td{padding:11px 16px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ptab th{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface)}
.ptab tr:last-child td{border-bottom:0}.ptab .r{text-align:right}
.ptab .pl{color:var(--ok);font-weight:700}.ptab .mn{color:var(--red-text);font-weight:700}
.wgrid{grid-template-columns:repeat(3,1fr)!important}
.wcell{position:relative;display:flex;flex-direction:column;transition:opacity .22s}
.wcell .pc{flex:1}
.wx{position:absolute;right:8px;top:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 90%,transparent);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.wx:hover{color:var(--red-text);border-color:var(--red)}.wx .ico{width:15px;height:15px}
.w-note{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--red-text)}.w-note .ico{width:14px;height:14px}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ad{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg);display:flex;flex-direction:column;gap:10px;text-align:left}
.ad.main{border-color:var(--ink)}
.ad header{display:flex;align-items:center;gap:8px}.ad header b{font-size:15px}
.ad p{font-size:13.5px;color:var(--ink-2);line-height:1.55}.ad p b{color:var(--ink)}
.ad footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;background:none;border:0;padding:0}
.ad.add{align-items:center;justify-content:center;flex-direction:row;border-style:dashed;min-height:160px;color:var(--ink-2);font-weight:600;font-size:14px;cursor:pointer}
.ad.add:hover{border-color:var(--red);color:var(--red-text)}
.pf{display:grid;gap:14px;max-width:720px}
.pf-card{border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--bg)}
.pf-card h2{font-size:16px;font-weight:800;margin-bottom:14px}
.tg{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.pf-card h2 + .tg{border-top:0}
.tg b{display:block;font-size:14px}.tg small{font-size:12.5px;color:var(--ink-3)}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg i{position:relative;width:42px;height:24px;border-radius:999px;background:var(--surface-2);flex:none;transition:background .2s}
.tg i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.tg input:checked + i{background:var(--ok)}.tg input:checked + i::after{transform:translateX(18px)}
.tg input:focus-visible + i{outline:2px solid var(--ink);outline-offset:2px}
.pf-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.pf-row b{display:block;font-size:14px}.pf-row small{font-size:12.5px;color:var(--ink-3)}
.pf-act{display:flex;justify-content:flex-end}
@media (max-width:860px){.earn{grid-template-columns:1fr}.wgrid{grid-template-columns:1fr 1fr!important}.agrid{grid-template-columns:1fr}.pt-hero{flex-direction:column;align-items:flex-start}.oc header{flex-wrap:wrap}}
.tgm{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 0}
.tgm-ic{width:38px;height:38px;border-radius:11px;background:#229ED9;display:flex;align-items:center;justify-content:center}
.tgm-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.tgm-t > b{display:block;font-size:14px}.tgm-t small{font-size:12.5px;color:var(--ink-3)}.tgm-t small b{display:inline;font-size:inherit;color:var(--ink-2)}
.tgm.on .tgm-t > b::after{content:"Aktif";margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:11px;font-weight:700;vertical-align:1px}
@media (max-width:860px){.tgm{grid-template-columns:auto 1fr}.tgm .btn{grid-column:1/-1;justify-self:start}}
/* B */
.pf-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:14px}
.pf-l{font:600 11px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin-right:4px}
.pfb{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.pfb .ico{width:14px;height:14px;transform:rotate(90deg)}.pfb.on{border-color:var(--ink);color:var(--ink)}
.pfb .nb{min-width:18px;height:18px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.pfb:first-child .ico{transform:none}
.tg.inl{margin-left:auto;gap:10px}
.ptab2{border:1px solid var(--line);border-radius:16px;overflow:auto;background:var(--bg)}
.ptab2 table{width:100%;border-collapse:collapse;font-size:14px;min-width:980px}
.ptab2 th{position:sticky;top:0;text-align:left;font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ptab2 th.sorted{color:var(--ink)}.ptab2 th.sorted::after{content:" ↓";color:var(--red-text)}
.ptab2 td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.ptab2 tr:last-child td{border-bottom:0}
.ptab2 tbody tr{transition:background .15s}.ptab2 tbody tr:hover{background:var(--surface)}
.ptab2 tr.sel{background:color-mix(in srgb,var(--red-soft) 60%,transparent)}
.pn{display:flex;align-items:center;gap:12px;white-space:normal;min-width:260px}.pn img{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}
.pn b{font-size:14px;font-weight:600;display:block}.pn small{font-size:12px;color:var(--ink-3)}
.sp{font-weight:600;font-family:var(--f-disp)}
.pr2{font:700 15px var(--f-disp)}
.cb{width:18px;height:18px;accent-color:var(--red)}
.cmpbar{position:sticky;bottom:16px;margin:16px auto 40px;display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:560px;padding:10px 12px 10px 18px;border-radius:14px;background:var(--chip);color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);font-size:14px}
.cmpbar .btn[disabled]{opacity:.45}
/* C */
.kc-hero{background:var(--surface);border-bottom:1px solid var(--line);padding-bottom:18px}
.kc-top{display:flex;gap:20px;align-items:flex-start;margin:6px 0 20px}
.kc-ic{width:64px;height:64px;border-radius:18px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--red-text);flex:none}.kc-ic .ico{width:32px;height:32px}
.kc-top h1{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.025em}.kc-top p{color:var(--ink-2);max-width:60ch;margin-top:6px}
.kc-subs{background:var(--bg)}.kc-subs button{font-size:14px;padding:9px 14px}.kc-subs em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:6px}
.kc-bar{position:sticky;top:var(--hdrH,120px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.kc-bar-in{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px}
.kc-f{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.kgrid5{grid-template-columns:repeat(5,1fr)!important;padding-top:20px}
.kc-more{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 0 50px;color:var(--ink-3);font-size:13px}
.kc-prog{width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}.kc-prog span{display:block;height:100%;background:var(--red)}

.kc-r{display:flex;gap:10px;align-items:center;flex:none}
.kc-info{font-size:13px;color:var(--ink-3);padding-top:16px}
.kc-hero{padding:0 0 18px!important}.kc-hero .crumb{padding-top:18px}
.kgrid5{padding-top:12px}.ptab2{margin-top:12px}
.kc-bar{top:var(--hdrH,120px)}
@media (max-width:1100px){.kgrid5{grid-template-columns:repeat(4,1fr)!important}}
@media (max-width:860px){.kgrid5{grid-template-columns:repeat(2,1fr)!important}.kc-bar-in{flex-direction:column;align-items:stretch}.kc-r{overflow-x:auto}.kc-top{gap:14px}.kc-ic{width:48px;height:48px}}

/* ---------- laci keranjang ---------- */
.cd-back{position:fixed;inset:0;z-index:95;background:rgba(10,11,12,.4);opacity:0;pointer-events:none;transition:opacity .3s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cd{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(440px,94vw);background:var(--bg);box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);display:flex;flex-direction:column;transform:translateX(104%);transition:transform .42s cubic-bezier(.22,1,.36,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.cd-on .cd{transform:none}.cd-on .cd-back{opacity:1;pointer-events:auto}
.cd-h{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);background:none;margin:0}
.cd-h b{font:800 20px var(--f-disp)}.cd-h span{color:var(--ink-3);font-weight:600}
.cd-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center}
.cd-cut{margin:0;padding:10px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.cd-list{flex:1;overflow:auto;padding:6px 20px}
.ci2{display:grid;grid-template-columns:60px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.ci2 img{width:60px;height:60px;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:contain}
.ci2-t b{display:block;font-size:14px;font-weight:600;line-height:1.35}.ci2-t span{font-size:12.5px;color:var(--ink-3)}
.ci2-a{display:flex;align-items:center;gap:12px;margin-top:8px}
.qty.sm{height:34px}.qty.sm button{width:32px}.qty.sm input{width:34px;font-size:14px}
.ci2-rm{border:0;background:none;padding:0;font-size:12.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.ci2-rm:hover{color:var(--red-text)}
.ci2-p{font:700 15px var(--f-disp);white-space:nowrap}
.cd-f{padding:16px 20px 20px;border-top:1px solid var(--line);background:var(--surface);margin:0}
.cd-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2);padding:3px 0}
.cd-row b{font:800 22px var(--f-disp);color:var(--ink)}.cd-row.sm{font-size:13px}.cd-pt{color:#B45309;font-weight:700}
.cd-row.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.cd-note{font-size:12.5px;color:var(--ink-3);margin:6px 0 12px}
.cd-go{width:100%;min-height:50px}
.cd-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 12px}
.cd-empty svg{width:120px;height:90px;margin-bottom:6px}.ce-b{fill:var(--surface);stroke:var(--line);stroke-width:2}.ce-l{stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.cd-empty b{font-size:16px}.cd-empty span{font-size:13.5px;color:var(--ink-3);max-width:30ch;margin-bottom:8px}
/* ---------- terima kasih ---------- */
.ty{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding-top:36px;padding-bottom:56px;align-items:start}
.ty h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.12;margin-top:8px}
.ty-ok{width:64px;height:64px;margin-bottom:16px}
.ty-ok svg{width:64px;height:64px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ty-ok .c{stroke:var(--ok);stroke-width:3;stroke-dasharray:183;stroke-dashoffset:183}
.ty-ok .k{stroke:var(--ok);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40}
.ty-ok.go .c{animation:dr .6s cubic-bezier(.65,0,.35,1) forwards}.ty-ok.go .k{animation:dr .35s .5s cubic-bezier(.65,0,.35,1) forwards}
@keyframes dr{to{stroke-dashoffset:0}}
.ty-pay{border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:6px}
.ty-pay-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--chip);color:#fff}
.ty-pay-h small{display:block;font-size:12.5px;color:rgba(255,255,255,.65)}.ty-pay-h b{font:800 28px var(--f-disp);color:#FFD36B;letter-spacing:.02em}
.ty-va{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.ty-va small{display:block;font-size:12.5px;color:var(--ink-3)}.ty-va b{font:800 22px var(--f-disp);letter-spacing:.03em}
.ty-how{padding:0 20px}.ty-how summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;font-size:14px;color:var(--red-text)}
.ty-how summary::-webkit-details-marker{display:none}.ty-how ol{margin:0 0 14px;padding-left:20px;font-size:14px;color:var(--ink-2);display:grid;gap:6px}
.ty-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:22px 0 10px}
.ty-steps span{font-size:12.5px;color:var(--ink-3);padding-top:8px;border-top:4px solid var(--line)}.ty-steps .on{color:var(--ink);font-weight:700;border-color:var(--red)}
.ty-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.ty-side{display:grid;gap:16px}
.ty-guest,.ty-sum{border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--bg)}
.ty-guest{background:var(--surface)}
.ty-guest h2,.ty-sum h2{font-size:18px;font-weight:800;margin-bottom:8px}.ty-guest p{font-size:14px;color:var(--ink-2);margin-bottom:14px}.ty-guest p b{color:#B45309}
.ty-i{display:flex;gap:10px;align-items:center;padding:6px 0}.ty-i img{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;object-fit:contain}
.ty-i b{display:block;font-size:14px}.ty-i small{font-size:12.5px;color:var(--ink-3)}
/* ---------- hasil cari kosong ---------- */
.nores{padding-top:40px;padding-bottom:56px;text-align:center;max-width:980px}
.nores h1{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-.02em}
.nores .auth-sub{max-width:60ch;margin:8px auto 20px}
.nr-ill svg{width:220px;height:120px;margin:0 auto 18px;display:block}
.nr-b{fill:var(--surface);stroke:var(--line);stroke-width:2}.nr-t{fill:none;stroke:var(--trace);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.nr-p{fill:var(--bg);stroke:var(--ink);stroke-width:3}.nr-q circle{fill:var(--red)}.nr-q path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.nr-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.chip2{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:600;background:var(--bg);transition:border-color .2s,transform .14s}
.chip2 .ico{width:16px;height:16px;color:var(--ink-3)}.chip2:hover{border-color:var(--ink)}.chip2:active{transform:scale(.96)}
.nr-req{display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;margin:28px auto 0;padding:18px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);max-width:760px}
.nr-req b{display:block;font-size:16px}.nr-req .btn{flex:none;white-space:nowrap}.nr-req span{font-size:14px;color:var(--ink-2)}
.nores .sec-h{text-align:left}
/* ---------- 404 ---------- */
.e404{padding-top:48px;padding-bottom:64px;text-align:center;max-width:720px}
.e404-ill svg{width:min(360px,90vw);height:170px;display:block;margin:0 auto 10px}
.e-t{fill:none;stroke:var(--trace);stroke-width:5;stroke-linecap:round}.e-p{fill:var(--bg);stroke:var(--ink);stroke-width:3}
.e-spark path{stroke:var(--red);stroke-width:3;stroke-linecap:round;fill:none;opacity:.9;transform-origin:180px 75px;animation:spk 1.6s ease-in-out infinite}
@keyframes spk{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.05)}}
.e-n{font:700 22px var(--f-disp);fill:var(--ink-3);letter-spacing:6px}
.e404 h1{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em}
.e404 .auth-sub{margin:8px auto 22px;max-width:52ch}
.e404-s{max-width:520px;margin:0 auto}
/* ---------- form error ---------- */
.fl.bad .inp{border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent)}
.ferr{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--red-text);animation:accin .25s ease-out}
.ferr::before{content:"!";width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* ---------- wishlist kosong ---------- */
.w-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:48px 16px;border:1px dashed var(--line);border-radius:18px}
.w-empty .ico{width:36px;height:36px;color:var(--red-text)}.w-empty b{font-size:17px}.w-empty span{font-size:14px;color:var(--ink-3);max-width:44ch;margin-bottom:8px}
@media (max-width:860px){.ty{grid-template-columns:1fr;gap:20px;padding-top:20px;padding-bottom:40px}.nr-req{flex-direction:column;align-items:flex-start}.pvm{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ---------- kebijakan ---------- */
.pol{padding-bottom:56px}
.pol-tabs{margin:4px 0 24px}
.pol-d{display:none}.pol-d.on{display:block}
.pol-g{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;align-items:start}
.pol-toc{position:sticky;top:calc(var(--hdrH,120px) + 20px);display:flex;flex-direction:column;gap:1px;padding-left:12px;border-left:2px solid var(--line)}
.pol-toc small{font:600 11px var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);padding:0 10px 8px}
.pol-toc a{position:relative;z-index:1;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-3);transition:color .2s}
.pol-toc a.cur{color:var(--ink);font-weight:600}
.pol-toc a.cur::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:2px;background:var(--red);border-radius:2px}
.pol-toc .pi{position:absolute;left:0;top:0;border-radius:8px;pointer-events:none;opacity:0;will-change:transform,width;transition:opacity .25s;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.pol-toc.hv .pi{opacity:1}
.pol-a{max-width:720px}
.pol-a h1{font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.025em}
.pol-lead{font-size:17px;color:var(--ink-2);margin-top:10px;line-height:1.6}
.pol-date{font-size:13px;color:var(--ink-3);margin-top:10px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pol-s{padding:26px 0 6px;scroll-margin-top:calc(var(--hdrH,120px) + 20px)}
.pol-s h2{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.pol-s p,.pol-s li{font-size:15px;line-height:1.7;color:var(--ink-2)}
.pol-s p+p{margin-top:10px}.pol-s b{color:var(--ink)}
.pol-s ul,.pol-s ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.pol-s ul li::marker{color:var(--red)}
.pol-sum{list-style:none;padding:16px 18px!important;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.pol-sum li{padding-left:26px;position:relative}.pol-sum li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:800}
.pol-steps{list-style:none;counter-reset:st;padding-left:0!important}
.pol-steps li{counter-increment:st;position:relative;padding-left:40px;min-height:28px}
.pol-steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--bg);font:700 13px/26px var(--f-disp);text-align:center}
mark.ph{background:color-mix(in srgb,#F5A524 28%,transparent);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:600}
.pol-help{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding:18px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.pol-help b{font-size:15px}.pol-help span{font-size:14px;color:var(--ink-2);flex:1;min-width:200px}
.fpol{display:flex;gap:16px;flex-wrap:wrap}.fpol a{color:var(--ink-3)}.fpol a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.pol-g{grid-template-columns:1fr;gap:12px}.pol-toc{position:static;display:none}.pol-tabs{display:flex;overflow-x:auto;max-width:100%}.pol-tabs button{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .board .pulse,.board .halo{display:none}
}
.shot *,.shot *::before,.shot *::after{transition:none!important}
.shot .view.on{animation:none}
.shot .draw{animation:none!important;stroke-dashoffset:0}
.shot .sig,.shot .sig-h{transition:none}
.shot body{padding-bottom:0!important}
.shot .bnav{position:static}
.shot .rate{animation:none}

/* ---------- WordPress: kartu produk & loop WooCommerce ---------- */
.pc{position:relative}
.pc .pc-link{color:inherit;text-decoration:none}
.pc .pc-link::after{content:"";position:absolute;inset:0;z-index:1}
.pc .pc-add{position:relative;z-index:2}
.pc .pc-add.loading{opacity:.5}
.pc .pc-add.added{background:var(--ok);border-color:var(--ok);color:#fff}
.pc .added_to_cart{display:none}
ul.products{list-style:none;margin:0;padding:0}
ul.products::before,ul.products::after{display:none!important}
.sec-h .link .ico{width:16px;height:16px}
.ag .ag-t a{color:inherit;text-decoration:none}
.ag img{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}

/* ---------- WordPress: katalog ---------- */
.segp a{position:relative;z-index:1;display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;text-decoration:none;transition:color .25s,transform .14s}
.segp a[aria-pressed="true"]{color:var(--ink)}
.segp a:active{transform:scale(.96)}
.kc-subs a{font-size:14px;padding:9px 14px}.kc-subs a em{font-style:normal;font-size:11.5px;color:var(--ink-3);margin-left:6px}
.kc-hero .crumb{padding-top:18px}
.pfd{position:relative}
.pfd summary{list-style:none;cursor:pointer}.pfd summary::-webkit-details-marker{display:none}
.pfd[open] summary{border-color:var(--ink);color:var(--ink)}
.pfd[open] summary .ico{transform:rotate(-90deg)}
.pfp{position:absolute;left:0;top:calc(100% + 8px);z-index:30;min-width:240px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 20px 40px -18px rgba(0,0,0,.35);display:grid;gap:10px;animation:accin .2s ease-out}
.pfp label{display:grid;gap:4px;font-size:12.5px;color:var(--ink-3)}.pfp .inp{height:40px}
.pfl{max-height:320px;overflow:auto;gap:2px;min-width:200px;padding:8px}
.pfl a{display:block;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink-2);text-decoration:none}
.pfl a:hover{background:var(--surface)}.pfl a.on{background:var(--surface);color:var(--ink);font-weight:700}
.pfl a.on::after{content:" ✓";color:var(--red-text)}
.pfb{text-decoration:none}.pfx{color:var(--red-text);border-style:dashed}.pfx .ico{transform:none!important}
.kc-f{overflow:visible}
.kc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:56px 16px;border:1px dashed var(--line);border-radius:18px;margin:20px 0 40px}
.kc-empty b{font-size:17px}.kc-empty span{font-size:14px;color:var(--ink-3);margin-bottom:6px}
.kc-more .btn{min-width:220px}
.kc-more b{color:var(--ink)}
.kc-info b{color:var(--ink-2);font-weight:600}
.ptab2 .pn img{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}
.ptab2 .pn{text-decoration:none;color:inherit}
.ptab2 .pc-add{width:36px;height:36px}
.ew-items .pc{animation:none}
.ew-items .pc.new{animation:accin .35s ease-out both}
@media (max-width:860px){.kc-f{overflow-x:auto}.pfp{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));min-width:0}}
.pfd summary.pfb .ico{transform:rotate(90deg)}
.pfd[open] summary.pfb .ico{transform:rotate(-90deg)}
/* ---------- Kembali ke atas: badan chip + cincin progres (gaya pcb.easyware.id) ---------- */
.totop{position:fixed;right:22px;bottom:calc(var(--fab-b,0px) + 22px + env(safe-area-inset-bottom,0px));z-index:48;width:58px;height:58px;padding:0;border:1px solid var(--chip-edge,#2c3137);border-radius:50%;background:var(--chip,#17191C);color:#fff;box-shadow:0 12px 26px -10px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.25);cursor:pointer;opacity:0;transform:translateY(14px) scale(.8);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1.2),bottom .25s ease,box-shadow .3s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px);box-shadow:0 16px 30px -10px rgba(0,0,0,.5),0 0 0 4px color-mix(in srgb,var(--red) 18%,transparent)}
.totop:active{transform:scale(.93)}
.totop:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.totop svg.ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)}
.totop .rt{fill:none;stroke:rgba(255,255,255,.13);stroke-width:4.5}
.totop .rp{fill:none;stroke:var(--red);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .12s linear,filter .4s}
.totop .tt-n,.totop .tt-ar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s,transform .28s cubic-bezier(.2,.8,.2,1)}
.totop .tt-n{font-family:var(--f-disp,inherit);font-size:16px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.totop .tt-n small{font-size:10px;font-weight:700;opacity:.6;margin-left:1px;letter-spacing:0}
.totop .tt-ar{opacity:0;transform:translateY(8px)}
.totop .tt-ar .ico{width:22px;height:22px;stroke-width:2.2}
.totop:hover .tt-n,.totop.done.touch .tt-n{opacity:0;transform:translateY(-8px)}
.totop:hover .tt-ar,.totop.done.touch .tt-ar{opacity:1;transform:none}
/* 100%: jalur penuh "menyala" seperti LED */
.totop.done .rp{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--red) 70%,transparent))}
body.cd-on .totop,body.no-totop .totop{opacity:0;pointer-events:none}
@media (max-width:860px){.totop{right:14px;width:52px;height:52px}.totop .tt-n{font-size:14.5px}.totop .tt-n small{font-size:9px}}
@media (prefers-reduced-motion:reduce){.totop,.totop .rp,.totop .tt-n,.totop .tt-ar{transition:none}}
@media print{.totop{display:none}}

/* ---------- WordPress: halaman produk ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p3 .slide img{width:100%;height:100%;object-fit:contain}
.p3 .g-t img{width:100%;height:100%;object-fit:contain}
.vframe{width:100%;height:100%;border:0;border-radius:inherit;background:#000;display:block}
#pdAdd.need{background:var(--surface-2);color:var(--ink-3)}
#pdAdd.loading{opacity:.7;pointer-events:none}
.seg2{flex-wrap:wrap}
.seg2 button.na{color:var(--ink-3);border-style:dashed;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ink-3) 60%,transparent)}
.var-x{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:none}
.var-x .ico{width:14px;height:14px}
.woocommerce-variation-price,.woocommerce-variation-availability{display:none}
.woocommerce-variation-description{font-size:13.5px;color:var(--ink-2);margin:4px 0 10px}
.buy2 .quantity{margin:0}
.buy-out .buy2{grid-template-columns:1fr auto}
.acc-n{margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-2)}
.rv-stars svg.on{color:#F5A524}
.rv-stars.sm svg{width:13px;height:13px}
.rv-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.rv-i{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.rv-ih{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:14px}
.rv-ih time{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.rv-ver{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--ok)}
.rv-ver .ico{width:13px;height:13px}
.rv-txt{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.rv-txt p{margin:0 0 6px}
.rv-who{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.rv-who{grid-template-columns:1fr}}
.rv-form .rv-act{justify-content:flex-end}
.spec2 a{color:inherit}
.p3 .notify{margin-top:12px}
.woocommerce-notices-wrapper:empty{display:none}
.buy2 .quantity input.qty{width:44px!important;height:100%!important;border:0!important;padding:0!important;background:none!important;box-shadow:none!important;text-align:center;-moz-appearance:textfield}
.buy2 .quantity input.qty::-webkit-inner-spin-button,.buy2 .quantity input.qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.buy2 .quantity .qbtn{width:44px;height:100%;border:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.buy2 .quantity{flex:none}
nav.crumb.woocommerce-breadcrumb{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;overflow:hidden}
nav.crumb.woocommerce-breadcrumb>span{flex:none;white-space:nowrap}
nav.crumb.woocommerce-breadcrumb>span:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ---------- WordPress: laci keranjang ---------- */
.ew-cd-body{display:flex;flex-direction:column;flex:1;min-height:0}
.ci2-t b a{color:inherit;text-decoration:none}
.ci2-v{display:block;font-size:12px;color:var(--ink-3);margin:2px 0}
.ci2.busy{opacity:.55;pointer-events:none}
.ci2-p .woocommerce-Price-amount{font:700 15px var(--f-disp)}
.cd .qty.sm{height:34px}.cd .qty.sm button{width:32px}.cd .qty.sm input{width:32px;font-size:14px}

/* ---------- WordPress: checkout ---------- */
.co-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:6px 0 22px}
.co-head h1{font-size:34px;margin:0}
.co-login{font-size:14px;color:var(--ink-2);margin:0}.co-login a{font-weight:700;color:var(--red-text)}
.co-edit{margin-left:auto;font-size:13px;font-weight:600;color:var(--ink-3)}
.co-fields .woocommerce-billing-fields>h3,.co-fields .woocommerce-shipping-fields,.co-fields .woocommerce-additional-fields>h3{display:none}
.co-fields .woocommerce-billing-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:12px 12px}
.co-fields .form-row{margin:0!important;padding:0!important;width:auto!important;float:none!important;display:grid;gap:6px}
.co-fields .form-row-wide,.co-fields .notes{grid-column:1/-1}
.co-fields .form-row label{font-size:13px;color:var(--ink-2);font-weight:500;line-height:1.3}
.co-fields .form-row .required{color:var(--red-text);text-decoration:none;border:0}
.co-fields .form-row .optional{color:var(--ink-3);font-size:12px}
.co-fields .input-text,.co-fields select,.co-fields textarea,.co-fields .select2-selection{width:100%;min-height:46px;border:1.5px solid var(--line)!important;border-radius:var(--r-m)!important;background:var(--bg)!important;padding:10px 12px;font:inherit;font-size:15px;color:var(--ink)}
.co-fields .select2-container .select2-selection--single{height:46px;display:flex;align-items:center}
.co-fields .select2-container .select2-selection__arrow{height:44px!important}
.co-fields textarea{min-height:76px}
.co-fields .input-text:focus,.co-fields select:focus,.co-fields textarea:focus{outline:none;border-color:var(--ink)!important}
.co-fields .woocommerce-invalid .input-text,.co-fields .woocommerce-invalid .select2-selection{border-color:var(--red)!important}
.co-fields .woocommerce-additional-fields{margin-top:12px}
.co-fields .woocommerce-account-fields{grid-column:1/-1;margin-top:10px;font-size:14px}
.co-fields .woocommerce-account-fields label.checkbox{display:flex;gap:8px;align-items:center}
.co-fields #billing_country_field{display:none!important}
.opt-r.on{border-color:var(--ink);background:var(--surface)}
.ship-r{grid-template-columns:auto 56px 1fr auto}
.ship-r .rate-l{font:700 11px var(--f-disp);letter-spacing:.04em;padding:4px 6px;border-radius:6px;background:var(--surface);border:1px solid var(--line);text-align:center;color:var(--ink-2)}
.ship-r small{display:block;font-size:12.5px;color:var(--ink-3)}
.ship-r .rp{font:700 15px var(--f-disp)}.ship-r .rp.free,.row .free{color:var(--ok)}
.ship-empty{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px dashed var(--line);border-radius:var(--r-m);font-size:14px;color:var(--ink-2);margin:0}
.ship-empty .ico{flex:none;color:var(--ink-3)}
.ew-ship-opts+.pcut{margin-top:12px}
#payment{background:none!important;border-radius:0!important}
#payment ul.payment_methods{list-style:none;margin:0;padding:0!important;border:0!important}
#payment ul.payment_methods li{margin:0;padding:0}
#payment ul.payment_methods li::before,#payment ul.payment_methods li::after{display:none}
.pay-r{grid-template-columns:auto auto 1fr auto}
.pay-r small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400}
.pay-ic img{max-height:22px;width:auto;margin-left:4px;vertical-align:middle}
#payment .payment_box{margin:8px 0 4px;padding:12px 14px!important;border-radius:var(--r-m);background:var(--surface)!important;font-size:13.5px;color:var(--ink-2)}
#payment .payment_box::before{display:none}
.pay-none{grid-column:1/-1;font-size:14px;color:var(--ink-3)}
.co-sum{display:grid;gap:10px}
.co-items .ci:last-child{border-bottom:0}
.co-items{max-height:360px;overflow:auto;margin:-4px 0 4px}
.co-items .ci img{width:52px;height:52px}.co-items .ci{grid-template-columns:52px 1fr auto;padding:10px 0}
.co-items .variation{font-size:12px;color:var(--ink-3);margin:2px 0 0;display:flex;gap:4px}.co-items .variation dd,.co-items .variation p{margin:0}
.row .ew-rm-coupon{font-size:12px;color:var(--ink-3);margin-left:6px}
.row.disc b{color:var(--ok)}
.co-place{display:grid;gap:10px;margin-top:4px}
.co-pay{width:100%;min-height:52px;font-size:16px}
.co-place .woocommerce-terms-and-conditions-wrapper{font-size:12.5px;color:var(--ink-3)}
.co-place .woocommerce-privacy-policy-text p{margin:0}
.woocommerce-checkout .blockUI.blockOverlay{background:color-mix(in srgb,var(--bg) 70%,transparent)!important;border-radius:var(--r-l)}
.woocommerce-NoticeGroup-checkout,.woocommerce-checkout>.woocommerce-notices-wrapper{margin-bottom:16px}
@media (max-width:860px){
  .co-fields .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
  .co-head h1{font-size:28px}
  .ship-r{grid-template-columns:auto 1fr auto}.ship-r .rate-l{display:none}
}

/* ---------- WordPress: terima kasih ---------- */
.ty-gw:empty{display:none}
.ty-gw{padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.ty-main>.ty-gw{border:1px solid var(--line);border-radius:18px;margin-top:6px}
.ty-again{border-bottom:0}
.ty-i img{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:none}
.ty-i small{display:block;font-size:12.5px;color:var(--ink-3)}
.ty-i b{font-size:14px;font-weight:600;display:block;line-height:1.35}
.st-chip.go{background:color-mix(in srgb,#F5A524 22%,transparent);color:#FFD36B}
.woocommerce-order-received .wc-wrap>.woocommerce>.ty,.woocommerce-order-received .ty{padding-top:24px}
#payment ul.payment_methods::before,#payment ul.payment_methods::after{display:none!important;content:none!important}
.woocommerce-checkout .sum{top:calc(var(--hdrH,120px) + 16px)}
.p3l{top:calc(var(--hdrH,120px) + 16px)}
.cd{visibility:hidden;transition:transform .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .42s}.cd-on .cd{visibility:visible;transition:transform .42s cubic-bezier(.22,1,.36,1),visibility 0s}html,body{overflow-x:clip}

/* ---------- WordPress: akun ---------- */
.woocommerce-account .page-wrap>.wc-page>.woocommerce{display:block!important}
.acc-nav{top:calc(var(--hdrH,120px) + 16px)}
.acc-nav a{text-decoration:none;color:var(--ink-2)}
.acc-nav li{list-style:none}
.as-c{text-decoration:none;color:inherit;transition:border-color .2s,transform .15s}
.as-c:hover{border-color:var(--ink)}
.ord-r{grid-template-columns:auto 1fr auto auto}
.ord-th{display:flex}
.ord-th img{width:40px;height:40px;border-radius:10px;border:2px solid var(--bg);background:#fff;object-fit:contain;margin-left:-12px;box-shadow:0 0 0 1px var(--line)}
.ord-th img:first-child{margin-left:0}
.ord-t a{color:inherit;text-decoration:none}
.ord-r:last-child{border-bottom:0}
.ord-done{font-size:12.5px;color:var(--ink-3)}
.st-chip.wait{background:color-mix(in srgb,#F5A524 18%,transparent);color:#B45309}
.st-chip.no{background:var(--surface-2);color:var(--ink-3)}
#ordTabs{margin:0 0 14px}
.acc-pg{display:flex;justify-content:space-between;margin-top:14px}
.acc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 16px;border:1px dashed var(--line);border-radius:16px}
.acc-empty .ico{width:32px;height:32px;color:var(--ink-3)}
.acc-empty span{font-size:13.5px;color:var(--ink-3);max-width:40ch;margin-bottom:6px}
.wcell{position:relative}
.w-rm{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.w-rm .ico{width:15px;height:15px}.w-rm:hover{color:var(--red-text);border-color:var(--red)}
.wgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.ptab .pl{color:var(--ok);font-weight:700}.ptab .mn{color:var(--red-text);font-weight:700}
.pf-pw summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.pf-pw summary::-webkit-details-marker{display:none}
.pf-pw summary h2{margin:0}
.pf-pw[open] summary{margin-bottom:14px}.pf-pw[open] summary .btn{display:none}
.pf-card.co-fields .woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-card.co-fields .pf-act{gap:8px;margin-top:16px}
.tg input{position:absolute;opacity:0;width:1px;height:1px}
.auth-card .woocommerce-error,.auth-card .woocommerce-message{margin-bottom:16px}
.auth-f .muted{font-size:13px;margin:-4px 0 14px}
.chk a{color:var(--red-text)}
.auth .or{margin:18px 0 14px}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info{margin-bottom:16px}
@media (max-width:860px){
  .ord-r{grid-template-columns:auto 1fr}
  .ord-r .st-chip{grid-column:2;justify-self:start}
  .ord-r .btn,.ord-r .ord-done{grid-column:1/-1}
  .pf-card.co-fields .woocommerce-address-fields__field-wrapper{grid-template-columns:1fr}
}
.auth-card form.auth-f{border:0!important;padding:0!important;margin:0!important;border-radius:0!important;box-shadow:none!important}