/* Rukoweb — gaya dasar contoh toko. Tiap toko mengganti variabel di :root. */
:root{
  --bg:#fff;--surface:#fff;--soft:#f5f5f2;--ink:#1d1d1b;--ink2:#4a4a45;--mute:#76766f;--line:#e4e4de;
  --brand:#1d1d1b;--on-brand:#fff;--accent:#e0a33a;--r:12px;--rb:10px;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;--head:var(--font);--hw:700;--hls:-.02em;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--head);font-weight:var(--hw);letter-spacing:var(--hls);line-height:1.12;margin:0}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mute{color:var(--mute)}
.w{width:min(1180px,100% - 32px);margin-inline:auto}
.ic{width:20px;height:20px;flex:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* bar contoh */
.demobar{background:#13201B;color:#e9f1ed;font-size:13.5px}
.dw{width:min(1180px,100% - 32px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:6px 0;flex-wrap:wrap}
.db-t b{color:#fff}
.db-a{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.db-a a{color:#c6dfd3;text-decoration:none;font-weight:600}
.db-a a:hover{color:#fff}
.db-a .db-cta{background:#F2A541;color:#13201B;padding:4px 10px;border-radius:7px}
@media (max-width:700px){.db-hide{display:none}}

/* header toko */
.sh{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.sh-in{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.02em;white-space:nowrap}
.brand .mk{width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:15px}
.sbox{position:relative;flex:1;max-width:460px;display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:0 14px;margin-left:auto}
.sbox .ic{width:18px;height:18px;color:var(--mute)}
.sbox input{border:0;background:transparent;outline:0;height:42px;width:100%;min-width:0}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 30px rgba(0,0,0,.1);padding:6px;z-index:30}
.sugg a{display:flex;gap:10px;align-items:center;padding:6px;border-radius:8px;text-decoration:none}
.sugg a:hover{background:var(--soft)}
.sugg .art{width:40px;height:40px;border-radius:6px}
.sugg span{display:flex;flex-direction:column;font-size:14px;font-weight:600}
.sugg small{font-weight:500;color:var(--mute)}
.sugg p{padding:8px;font-size:14px}
.hacts{display:flex;gap:6px}
.hbtn{position:relative;display:flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14.5px}
.hbtn:hover{background:var(--soft)}
.cc{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--brand);color:var(--on-brand);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.cc.pop{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.35)}}
.snav{display:flex;gap:4px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.snav a{padding:6px 12px;border-radius:999px;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.snav a:hover{background:var(--soft);color:var(--ink)}
@media (max-width:760px){
  .sh-in{flex-wrap:wrap;gap:8px 10px;padding:10px 0}
  .sbox{order:3;flex-basis:100%;max-width:none;margin:0}
  .hacts{margin-left:auto}
  .hbtn .hl{display:none}
}

/* tombol */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--rb);border:1.5px solid transparent;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .2s ease}
.b:active{transform:translateY(1px)}
.b1{background:var(--brand);color:var(--on-brand)}
.b1:hover{filter:brightness(1.08)}
.b2{background:transparent;border-color:var(--line);color:var(--ink)}
.b2:hover{border-color:var(--ink)}
.b.sm{min-height:36px;padding:0 12px;font-size:14px}
.b.full{width:100%}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* beranda */
.hero{background:var(--hero,var(--soft))}
.hero-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:56px 0}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:14px}
.hero h1{font-size:clamp(34px,5vw,58px)}
.hero p{font-size:18px;color:var(--ink2);margin-top:16px;max-width:46ch}
.hero-art .art{border-radius:calc(var(--r) * 2);aspect-ratio:1;width:100%}
@media (max-width:760px){.hero-in{grid-template-columns:minmax(0,1fr);padding:36px 0;gap:24px}.hero-art{max-width:320px}}
.perks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.perk{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.perk .ic{color:var(--brand);margin-top:2px}
.perk b{display:block;font-size:15px}
.perk span{font-size:13.5px;color:var(--mute)}
@media (max-width:900px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.perks{grid-template-columns:1fr}}
.sec{padding:48px 0}
.sh2{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.sh2 h2{font-size:clamp(24px,3vw,32px)}
.sh2 a{font-weight:700;font-size:15px;color:var(--brand)}
.pt{font-size:clamp(28px,4vw,40px)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cat{text-decoration:none;border-radius:var(--r);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.cat .art{aspect-ratio:4/3;width:100%;object-fit:cover}
.cat span{display:block;padding:12px 14px;font-weight:700}
@media (max-width:700px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* kartu produk */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.pc{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.08)}
.pc-img{position:relative}
.pc-img .art{aspect-ratio:1;width:100%}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#1b1b1b;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}
.pc-b{padding:12px 14px 16px;display:flex;flex-direction:column;gap:4px}
.pc-c{font-size:12.5px;color:var(--mute);font-weight:600}
.pc h3{font-size:16px;font-weight:700;letter-spacing:-.01em;font-family:var(--font)}
.pc-p{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.pc-p b{font-size:16.5px}
.pc-p s,.pd-p s{color:var(--mute);font-size:14px}
.sold{font-size:13px;color:var(--mute)}

/* katalog */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:14.5px;background:var(--surface)}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.sort select{height:42px;border:1px solid var(--line);border-radius:var(--rb);padding:0 12px;background:var(--surface)}
.empty{padding:20px 0;color:var(--mute)}
.empty a{color:var(--brand);font-weight:700}

/* detail produk */
.backl{display:inline-flex;align-items:center;gap:4px;text-decoration:none;font-weight:600;color:var(--mute);margin-bottom:18px;font-size:14.5px}
.pd-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.pd-img .art{border-radius:calc(var(--r) * 1.5);width:100%;aspect-ratio:1}
.pd-t h1{font-size:clamp(28px,3.6vw,40px);margin-top:4px}
.pd-t>p{color:var(--ink2);margin-top:14px}
.meta{color:var(--mute);margin-top:8px;font-size:14.5px}
.pd-p{display:flex;gap:10px;align-items:baseline;margin-top:14px}
.pd-p b{font-size:28px}
.vars{border:0;padding:0;margin:22px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.vars legend{font-weight:700;font-size:14.5px;margin-bottom:8px;padding:0}
.vars label{position:relative}
.vars input{position:absolute;opacity:0}
.vars span{display:block;padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--rb);font-weight:600;font-size:14.5px;cursor:pointer}
.vars input:checked+span{border-color:var(--brand);background:var(--soft)}
.vars input:focus-visible+span{outline:2px solid var(--brand)}
.buy{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.buy .b1{flex:1;min-width:200px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--rb);overflow:hidden}
.qty button{width:42px;height:46px;border:0;background:transparent;font-size:20px;cursor:pointer}
.qty input{width:44px;text-align:center;border:0;height:46px;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty.sm button{width:34px;height:36px;font-size:17px}
.qty.sm span{min-width:26px;text-align:center;font-weight:700}
.stock{display:flex;gap:8px;align-items:center;margin-top:16px;font-size:14.5px;color:var(--ink2)}
.stock .ic{color:#2e8b57;width:18px}
.mkt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px;font-size:14px}
.mk{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;cursor:pointer}
@media (max-width:760px){.pd-in{grid-template-columns:minmax(0,1fr);gap:24px}}

/* keranjang & checkout */
.co{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start;margin-top:22px}
@media (max-width:860px){.co{grid-template-columns:minmax(0,1fr)}.sum{position:static}}
.ci{display:grid;grid-template-columns:76px 1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.ci-img .art{width:76px;height:76px;border-radius:10px}
.ci-t{display:flex;flex-direction:column;font-size:14.5px}
.ci-t a{text-decoration:none}
.rm{border:0;background:transparent;color:var(--mute);cursor:pointer;padding:6px}
@media (max-width:520px){.ci{grid-template-columns:60px 1fr auto}.ci-img .art{width:60px;height:60px}.ci .rm{grid-column:3;grid-row:1}.ci .qty{grid-column:2}}
.sum{min-width:0;background:var(--soft);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;position:sticky;top:130px}
.sr{display:flex;justify-content:space-between;gap:10px}
.sr.dc b{color:#2e8b57}
.sr.tot{border-top:1px solid var(--line);padding-top:12px;font-size:18px}
.sm-i{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink2)}
.cont{text-align:center;font-weight:600;font-size:14.5px;color:var(--mute)}
.vform label{font-weight:700;font-size:14px}
.vrow{display:flex;gap:8px;margin-top:6px}
.vrow input{flex:1;min-width:0;height:46px;border:1.5px solid var(--line);border-radius:var(--rb);padding:0 12px;background:var(--surface)}
.vmsg{font-size:13.5px;color:var(--mute);min-height:1em;margin-top:4px}
.empty-box{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 20px;border:1px dashed var(--line);border-radius:var(--r);margin-top:22px;text-align:center}
.empty-box .ic{width:36px;height:36px;color:var(--mute)}
.cof{display:flex;flex-direction:column;gap:14px}
.cof label,.lf label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14.5px}
.cof input,.cof textarea,.cof select,.lf input,.lf textarea,.lf select{border:1.5px solid var(--line);border-radius:var(--rb);padding:11px 12px;background:var(--surface);font-weight:400}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.f2{grid-template-columns:1fr}}
.h3{font-size:19px;margin-top:10px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex!important;flex-direction:row!important;align-items:center;gap:12px!important;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--rb);cursor:pointer;background:var(--surface)}
.opt:has(input:checked){border-color:var(--brand);background:var(--soft)}
.opt span{display:flex;flex-direction:column;flex:1}
.opt small{color:var(--mute);font-weight:500}
.opt em{font-style:normal;font-weight:700}
.opt input{accent-color:var(--brand);width:18px;height:18px}
.fine{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--mute)}
.fine .ic{width:16px;height:16px}
.loginhint{background:var(--soft);padding:12px 14px;border-radius:var(--rb);font-size:14.5px}
.loginhint a{font-weight:700;color:var(--brand)}

/* selesai & pembayaran */
.narrow{max-width:560px}
.narrow2{max-width:860px}
.ok-head{display:flex;gap:14px;align-items:center}
.ok-head>.ic{width:46px;height:46px;padding:10px;border-radius:50%;background:#e6f4ec;color:#2e8b57}
.ok-head h1{font-size:clamp(24px,3.4vw,32px)}
.done-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:26px;align-items:start}
.paybox{border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--surface)}
.acct{display:flex;flex-direction:column;gap:2px;background:var(--soft);border-radius:var(--rb);padding:14px 16px;width:100%}
.acct b{font-size:24px;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.acct .b{align-self:flex-start;margin-top:8px}
.upl{position:relative;overflow:hidden}
.upl input{position:absolute;inset:0;opacity:0;cursor:pointer}
.status b{color:var(--brand)}
.qr{width:200px;height:200px;border:1px solid var(--line);border-radius:10px}
.after{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.tgbox{border-radius:var(--r);padding:18px;background:#e7eef5;opacity:.45;transition:opacity .4s ease}
.tgbox.on{opacity:1}
.tg-l{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;color:#2a5f8a;margin-bottom:10px}
.tg{background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px;font-size:14.5px;box-shadow:0 1px 2px rgba(0,0,0,.08);transform:translateY(8px);transition:transform .4s ease}
.tgbox.on .tg{transform:none}
.tg>b{color:#2a8bd6;font-size:13.5px}
.tg p{margin-top:4px;line-height:1.5}
.tg span{display:block;text-align:right;font-size:12px;color:var(--mute)}

/* akun, lacak, dashboard */
.lf{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.acc-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;background:var(--soft);padding:18px;border-radius:var(--r);margin-bottom:10px}
.acc-info span{font-size:13px}
.olist{display:flex;flex-direction:column;margin-top:10px}
.orow{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.orow>div{display:flex;flex-direction:column}
.orow a{font-weight:700;color:var(--brand)}
@media (max-width:560px){.orow{grid-template-columns:1fr auto}.orow>b{display:none}}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--soft);white-space:nowrap}
.s-lunas,.s-dikemas{background:#e6f0fb;color:#2a5f8a}
.s-dikirim{background:#fff3dd;color:#8a5a12}
.s-selesai{background:#e6f4ec;color:#22693f}
.s-menunggu-pembayaran,.s-menunggu-verifikasi{background:#fbeaea;color:#8a2a2a}
.trk{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tl{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column}
.tl li{position:relative;padding:0 0 18px 26px;display:flex;flex-direction:column;color:var(--mute)}
.tl li::before{content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--line)}
.tl li::after{content:"";position:absolute;left:10.5px;top:20px;bottom:0;width:1.5px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.dn,.tl li.now{color:var(--ink)}
.tl li.dn::before{background:var(--brand)}
.tl li.now::before{background:var(--accent);box-shadow:0 0 0 4px rgba(224,163,58,.25)}
.dash-note{display:flex;gap:12px;align-items:center;background:#fff8e8;border:1px solid #f0dcae;border-radius:var(--r);padding:14px 16px;margin-bottom:22px;font-size:14.5px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.kpis div{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column}
.kpis b{font-size:24px}
.dtable{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dr{display:grid;grid-template-columns:1.2fr 1.4fr 1fr .8fr 1.2fr;gap:12px;padding:12px 16px;border-top:1px solid var(--line);align-items:center;font-size:14.5px}
.dr span{display:flex;flex-direction:column}
.dh{border-top:0;background:var(--soft);font-weight:700;font-size:13px;color:var(--mute)}
@media (max-width:700px){.dr{grid-template-columns:1fr 1fr}.dr span:nth-child(4){display:none}.dh{display:none}.kpis{grid-template-columns:1fr 1fr}}

/* cara pesan, blog, testimoni */
.how{list-style:none;padding:0;margin:20px 0 0;counter-reset:s;display:grid;gap:12px}
.how li{counter-increment:s;display:flex;flex-direction:column;padding:18px 18px 18px 64px;position:relative;border:1px solid var(--line);border-radius:var(--r)}
.how li::before{content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:800}
.how span{color:var(--ink2)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.posts{grid-template-columns:1fr}}
.post{text-decoration:none;display:flex;flex-direction:column;gap:6px}
.post-img .art{aspect-ratio:16/10;width:100%;border-radius:var(--r);object-fit:cover}
.post h3{font-size:20px}
.post p{color:var(--ink2);font-size:15px}
.art-page h1{font-size:clamp(30px,4.4vw,46px);margin:8px 0 12px}
.art-page .lead{font-size:19px;color:var(--ink2)}
.art-page p{margin-top:16px;max-width:66ch}
.inline-p{max-width:280px;margin-top:30px}
.testi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:820px){.testi{grid-template-columns:1fr}}
.testi figure{margin:0;padding:22px;border-radius:var(--r);background:var(--soft)}
.testi blockquote{margin:0;font-size:16.5px}
.testi figcaption{margin-top:12px;font-weight:700;font-size:14px;color:var(--mute)}

/* footer */
.sf{border-top:1px solid var(--line);margin-top:40px;background:var(--soft)}
.sf-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px;padding:44px 0 28px}
.sf-in a{display:block;text-decoration:none;color:var(--ink2);font-size:14.5px;padding:3px 0}
.sf-in p{font-size:14.5px;margin-top:8px}
.sf h4{margin:0 0 8px;font-size:14px}
.sf-bot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 0 28px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.sf-bot a{color:var(--mute);font-weight:600}
@media (max-width:760px){.sf-in{grid-template-columns:1fr 1fr}}

/* toast */
.toast{position:fixed;left:50%;bottom:20px;width:max-content;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1d1d1b;color:#fff;padding:12px 16px;border-radius:12px;font-size:14.5px;display:flex;gap:8px;align-items:center;max-width:min(520px,calc(100% - 32px));z-index:50;transition:opacity .25s ease,transform .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{color:#F2A541;font-weight:700;white-space:nowrap}

/* animasi ringan (hanya Pro) */
.anim [data-anim]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.anim [data-anim].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}