:root{--brand:#1f6f54;--ink:#1d2421;--muted:#66706b;--line:#e3e7e5;--bg:#f6f8f7;--card:#fff;--err:#b42318;--ok:#1f6f54;--r:12px}
*{box-sizing:border-box}
body{margin:0;font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand)}
h1{font-size:1.6rem;line-height:1.25;margin:.4em 0}
h2{font-size:1.2rem;margin:.2em 0 .6em}
h3{font-size:1rem;margin:1.2em 0 .4em}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:520px;margin-left:auto;margin-right:auto}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.between{justify-content:space-between}
.center{text-align:center}
.muted{color:var(--muted)}.small{font-size:.86rem}.r{text-align:right}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:16px 0}
.btn{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{padding:6px 12px;font-size:.9rem}.btn.big{padding:14px 26px;font-size:1.05rem}
.btn.danger{background:var(--err)}
.link{background:none;border:0;color:var(--brand);font:inherit;cursor:pointer;padding:0}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.alert{padding:12px 14px;border-radius:10px;margin:14px 0;background:#e8f4ef;color:var(--ok)}
.alert.err{background:#fdecea;color:var(--err)}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.92rem}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
input[type=checkbox],input[type=radio]{width:auto;flex:none}input[type=color]{padding:2px;height:40px;width:80px}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.checks{display:flex;flex-wrap:wrap;gap:6px 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:720px){.grid2,.grid3{grid-template-columns:1fr}}
.suffix{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.suffix input{border:0;border-radius:0}.suffix span{padding:0 12px;color:var(--muted);font-weight:400;white-space:nowrap}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tr.total td{font-weight:700;border-bottom:0}.tbl tr.click{cursor:pointer}.tbl tr.click:hover{background:#fafbfa}
.scroll{overflow-x:auto}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.82rem;font-weight:600;background:#eef1f0}
.badge.menunggu{background:#fff4e0;color:#8a5a00}.badge.lunas{background:#e6f4ea;color:#1e6b3a}.badge.dikirim{background:#e7effc;color:#1d4fa0}.badge.selesai{background:#eef1f0;color:#3b4541}.badge.batal{background:#fdecea;color:var(--err)}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar .row{min-height:56px;justify-content:space-between}
.topbar nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.topbar nav a{text-decoration:none;color:var(--muted);font-weight:600}.topbar nav a.on{color:var(--brand)}
.logo{font-weight:800;font-size:1.2rem;color:var(--brand);text-decoration:none}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.tabs a{padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-size:.9rem}.tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.search{margin:8px 0 4px;width:100%}.search input{flex:1;min-width:200px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:720px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}.stat span{display:block;color:var(--muted);font-size:.86rem}.stat b{font-size:1.3rem}
.todo li{margin:4px 0}
.plist{display:flex;flex-direction:column;gap:8px}
.pitem{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;text-decoration:none;color:inherit}
.pitem.off{opacity:.6}.pitem img,.pitem .noimg{width:56px;height:56px;border-radius:8px;object-fit:cover;background:#eef1f0;flex:none}
.thumb{max-width:160px;border-radius:10px}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.dest{position:relative}.dest-list{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:10px;z-index:10;max-height:260px;overflow:auto;display:none}
.dest-list.show{display:block}.dest-list button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;font:inherit;font-weight:400;cursor:pointer}.dest-list button:hover{background:var(--bg)}
/* halaman jualan */
.hero{padding:56px 0 24px;text-align:center}.hero h1{font-size:2.2rem}.lead{font-size:1.1rem;color:var(--muted);max-width:640px;margin:0 auto 20px}
.plan .price{font-size:1.6rem;font-weight:800;margin:6px 0}.plan .price small{font-size:.9rem;font-weight:400;color:var(--muted)}.plan.featured{border:2px solid var(--brand)}
.plan ul{padding-left:18px;min-height:150px}
.foot{padding:28px 0;color:var(--muted);font-size:.9rem}
/* web toko */
.shop-top{background:var(--brand);color:#fff;position:sticky;top:0;z-index:5}.shop-top .row{min-height:58px;justify-content:space-between}
.shop-name{color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none}
.cart-btn{color:#fff;text-decoration:none;font-weight:600;background:rgba(255,255,255,.16);padding:6px 12px;border-radius:99px}
.cart-btn span{background:#fff;color:var(--brand);border-radius:99px;padding:0 7px;margin-left:4px}
.shop-hero{padding:22px 0 6px}.shop-hero p{color:var(--muted);margin:0}
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
@media(max-width:900px){.grid-products{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.grid-products{grid-template-columns:repeat(2,1fr);gap:10px}}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px}
.prod a{text-decoration:none;color:inherit}.prod img,.prod .noimg{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#eef1f0;display:block;margin-bottom:6px}
.price{font-weight:700;color:var(--brand)}.price.big{font-size:1.4rem;margin:6px 0 14px}
.pdetail{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pdetail img{width:100%;border-radius:10px}@media(max-width:720px){.pdetail{grid-template-columns:1fr}}
.desc{margin-top:16px;color:#33403b}
.checkout{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:start}@media(max-width:820px){.checkout{grid-template-columns:1fr}}
.citem{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.citem img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.citem .q{display:flex;align-items:center;gap:6px;margin-left:auto}.citem .q button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit}
.ship label{flex-direction:row;align-items:center;gap:10px;font-weight:400;border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer}
.ship{display:flex;flex-direction:column;gap:6px}
.sum{border-top:1px solid var(--line);padding-top:10px}.sum div{display:flex;justify-content:space-between}.sum .t{font-weight:800;font-size:1.1rem}
.amount{font-size:2rem;font-weight:800;color:var(--brand);margin:6px 0;cursor:pointer}
.bank{border:1px solid var(--line);border-radius:10px;padding:10px;margin:6px 0}
[data-copy]{cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1d2421;color:#fff;padding:10px 16px;border-radius:10px;z-index:50}
.variants{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.vopt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;font:inherit;cursor:pointer}
.vopt.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand) inset;font-weight:600}
.vopt:disabled{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.copyrow{display:flex;gap:8px;align-items:center;margin:6px 0}.copyrow input{flex:1}.copyrow span{flex:1}
details summary{cursor:pointer;font-weight:600;margin:8px 0}
ul.left{text-align:left;display:inline-block}
.badge.c-tertunda{background:#fff4e0;color:#8a5a00}.badge.c-siap{background:#e6f4ea;color:#1e6b3a}.badge.c-dibayar{background:#e7effc;color:#1d4fa0}.badge.c-batal{background:#fdecea;color:var(--err)}
.vrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:8px;align-items:center;margin:6px 0}
@media(max-width:600px){.vrow{grid-template-columns:1fr 1fr}}
.card.narrow.wide{max-width:760px}
.shop-top nav{gap:8px}.mem-btn{color:#fff;text-decoration:none;font-size:.88rem;opacity:.92}
s.muted{font-weight:400}
.tutorial h2{margin-top:1.4em}.tutorial li{margin:6px 0}.tutorial pre{background:var(--bg);padding:10px;border-radius:8px;overflow-x:auto;font-size:.85rem}
.nrow{padding:10px 0;border-bottom:1px solid var(--line)}
.qr{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.inbox{display:grid;grid-template-columns:320px 1fr;gap:12px;height:calc(100vh - 120px);margin-top:12px}
.inbox aside{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.inbox aside input{border:0;border-bottom:1px solid var(--line);border-radius:0}
.ilist{overflow-y:auto;flex:1}.ci{display:block;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;position:relative}
.ci.on{background:#eef6f2}.ci.unread b{color:var(--brand)}.ci .badge{float:right}.ci small.r{position:absolute;right:12px;top:10px}
.ichat{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden}
.ichat header{padding:10px 14px;border-bottom:1px solid var(--line)}.ichat .orders{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.8rem;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:2px 8px;text-decoration:none;color:inherit}
.msgs{flex:1;overflow-y:auto;padding:12px;background:#efeae2;display:flex;flex-direction:column;gap:6px}
.msg{max-width:75%;padding:7px 10px;border-radius:10px;background:#fff;font-size:.93rem;word-wrap:break-word}
.msg.out{align-self:flex-end;background:#d9fdd3}.msg small{display:block;text-align:right;color:var(--muted);font-size:.72rem;margin-top:2px}
.day{align-self:center;font-size:.75rem;background:#fff;border-radius:8px;padding:2px 8px;color:var(--muted)}
.reply{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}.reply textarea{flex:1;resize:none}
.ichat .empty{margin:auto}
@media(max-width:820px){.inbox{grid-template-columns:1fr;height:auto}.ichat{min-height:70vh}}
/* ---------- web toko: tampilan HP + menu ikon bawah ---------- */
.bnav{display:none}
.psearch{margin:10px 0 4px}.psearch input{border-radius:99px;padding-left:16px}
.menu-list{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.menu-list a{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;text-decoration:none;color:inherit}
.menu-list small{display:block;color:var(--muted);margin-top:2px}
.prod[hidden]{display:none}
@media (max-width:820px){
  body.store{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .shop-top nav .mem-btn,.shop-top nav .cart-btn{display:none}
  .shop-top .row{min-height:52px}
  .shop-hero{padding:14px 0 2px}.shop-hero h1{font-size:1.3rem}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.05)}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.7rem;position:relative;padding:2px 0}
  .bnav a.on{color:var(--brand);font-weight:700}
  .bnav .bdg{position:absolute;top:-2px;left:calc(50% + 6px);background:var(--brand);color:#fff;border-radius:99px;font-size:.65rem;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 4px;font-weight:700}
  .bnav .bdg[hidden]{display:none}
  .buybar{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));z-index:25;background:#fff;padding:10px 16px;border-top:1px solid var(--line)}
  .buybar .btn{width:100%}
  .pdetail{padding-bottom:84px}
  .foot{padding-bottom:16px}.foot .row{flex-direction:column;align-items:flex-start;gap:4px}
  .prod{padding:8px}.prod b{font-size:.92rem;line-height:1.3}
  .card{padding:16px}
  .checkout .btn.big{width:100%}
}
.prod a.btn{color:#fff}
@media (max-width:820px){.toast{bottom:calc(78px + env(safe-area-inset-bottom))}}
.steps{padding-left:20px}.steps li{margin:12px 0;color:var(--muted)}.steps li.now{color:var(--ink)}.steps li.done{color:var(--ok)}.steps li.done b::after{content:" ✓"}
/* katalog affiliate */
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line)}
.kat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}@media(max-width:820px){.kat{grid-template-columns:1fr}}
.kitem{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kitem[hidden]{display:none}
.kitem img,.kitem .noimg{width:110px;height:110px;border-radius:8px;object-fit:cover;background:#eef1f0;flex:none;display:block}
.kbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.kcap{font-size:.85rem;resize:vertical;margin-top:4px}
.kacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
@media(max-width:480px){.kitem{flex-direction:column}.kitem img,.kitem .noimg{width:100%;height:auto;aspect-ratio:1}}
@media(max-width:480px){.kitem .noimg{aspect-ratio:auto;height:48px}}
.tbl td.r,.tbl th.r{text-align:right;white-space:nowrap}
/* laporan */
.stat small{display:block;font-size:.8rem}.stat b.neg{color:var(--err)}
.chart{display:flex;align-items:flex-end;gap:2px;height:200px;border-bottom:1px solid var(--line);padding-top:6px}
.chart .bar{flex:1;min-width:2px;background:color-mix(in srgb,var(--brand) 22%,#fff);border-radius:3px 3px 0 0;position:relative;display:flex;align-items:flex-end;cursor:default}
.chart .bar i{display:block;width:100%;background:var(--brand);border-radius:3px 3px 0 0}
.chart .bar:hover{outline:2px solid var(--brand)}
.chart-x{display:flex;gap:2px}.chart-x span{flex:1;min-width:2px;font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:visible}
.lg{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 8px;vertical-align:middle}.lg.net{background:color-mix(in srgb,var(--brand) 22%,#fff)}.lg.laba{background:var(--brand)}
code{background:var(--bg);padding:2px 6px;border-radius:6px;font-size:.9em}
/* pilihan periode paket */
.per-r{position:absolute;opacity:0;pointer-events:none}
.per-tabs{display:flex;justify-content:center;gap:4px;margin:8px auto 18px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;width:max-content;max-width:100%}
.per-tabs label{padding:8px 14px;border-radius:999px;cursor:pointer;font-weight:600;font-size:.92rem;white-space:nowrap}
.per-tabs em{font-style:normal;font-size:.75rem;font-weight:700;color:#b45309;margin-left:2px}
#per1:checked~.per-tabs label[for=per1],#per6:checked~.per-tabs label[for=per6],#per12:checked~.per-tabs label[for=per12]{background:var(--brand);color:#fff}
#per1:checked~.per-tabs label[for=per1] em,#per6:checked~.per-tabs label[for=per6] em,#per12:checked~.per-tabs label[for=per12] em{color:#fde68a}
#per1:focus-visible~.per-tabs label[for=per1],#per6:focus-visible~.per-tabs label[for=per6],#per12:focus-visible~.per-tabs label[for=per12]{outline:2px solid var(--brand);outline-offset:2px}
.plan .pp{display:none;min-height:74px}
#per1:checked~.grid3 .p1,#per6:checked~.grid3 .p6,#per12:checked~.grid3 .p12{display:block}
.plan .save{color:#15803d;font-weight:600}
.plan{position:relative}.plan .pop{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:.75rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
@media(max-width:420px){.per-tabs label{padding:8px 9px;font-size:.85rem}}
.perlist{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.perrow{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.perrow .price{font-size:1.15rem;margin:2px 0}.perrow .save{color:#15803d;font-weight:600}
.topbar a.btn,.topbar a.btn:hover{color:#fff}
/* ---------- tema warna web toko ---------- */
body.store{background:color-mix(in srgb,var(--brand) 5%,#f5f5f5)}
body.store .btn{background:var(--brand);color:var(--on-brand,#fff)}
body.store .btn.ghost{background:#fff;color:var(--brand-ink,var(--brand));border:1px solid color-mix(in srgb,var(--brand) 35%,#fff)}
:where(body.store) a{color:var(--brand-ink,var(--brand))}
body.store .price,body.store .amount{color:var(--brand-ink,var(--brand))}
body.store .vopt.on{background:color-mix(in srgb,var(--brand) 8%,#fff)}
.shop-top{background:linear-gradient(135deg,var(--brand),var(--brand-2,var(--brand)));color:var(--on-brand,#fff);padding-bottom:10px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.shop-top .top1{min-height:52px;justify-content:space-between}
body.store .shop-name,body.store .mem-btn,body.store .cart-btn{color:var(--on-brand,#fff)}
.cart-btn{background:color-mix(in srgb,var(--on-brand,#fff) 18%,transparent)}
.cart-btn span{background:var(--on-brand,#fff);color:var(--brand)}
.hsearch{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:0 12px;color:#8a938f;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.hsearch input{border:0;background:transparent;padding:10px 0;flex:1;min-width:0;font:inherit;color:var(--ink);outline:0}
.hsearch:focus-within{outline:2px solid color-mix(in srgb,var(--on-brand,#fff) 70%,transparent);outline-offset:1px}
body.store .shop-hero{margin:0 -16px;padding:14px 16px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 12%,#fff),transparent)}
body.store .shop-hero h1{color:var(--ink)}
body.store .prod{border-color:color-mix(in srgb,var(--brand) 10%,var(--line));box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.store .bnav a.on{color:var(--brand-ink,var(--brand))}
body.store .bnav .bdg{background:var(--brand);color:var(--on-brand,#fff)}
body.store .tabs a.on{background:var(--brand);color:var(--on-brand,#fff);border-color:var(--brand)}
@media (max-width:820px){.shop-top .top1{min-height:46px}}
/* pemilih tema di panel */
fieldset.themes{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0}
fieldset.themes legend{font-weight:600;padding:0 6px}
.sws{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px}
.sw{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-weight:400}
.sw input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.sw>span{width:40px;height:40px;border-radius:50%;display:block;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.sw input:checked+span{box-shadow:0 0 0 2px var(--ink)}
.sw input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.sw small{font-size:.75rem;color:var(--muted)}
.sw .cust{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);position:relative;overflow:hidden}
.sw .cust input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.tprev{border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:340px;background:color-mix(in srgb,var(--brand) 5%,#f5f5f5)}
.tp-top{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tp-s{background:#fff;color:#8a938f;border-radius:8px;padding:6px 10px;font-size:.85rem}
.tp-body{display:flex;justify-content:space-between;align-items:center;padding:12px}
.tp-price{font-weight:800;color:var(--brand-ink)}
.tp-btn{background:var(--brand);color:var(--on-brand);border-radius:8px;padding:6px 12px;font-weight:600;font-size:.85rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.store .shop-hero p{color:var(--ink);font-weight:500}
/* ---------- banner promo + kategori ---------- */
.banners{position:relative;margin:12px 0 4px}
.bslides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:12px;scrollbar-width:none;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.bslides::-webkit-scrollbar{display:none}
.bslide{flex:0 0 100%;scroll-snap-align:start}.bslide a{display:block}
.bslide img{display:block;width:100%;aspect-ratio:12/5;object-fit:cover;background:color-mix(in srgb,var(--brand) 12%,#fff)}
.bdots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px}
.bdots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.6);cursor:pointer;transition:width .2s}
.bdots i.on{width:18px;background:#fff}
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*8px)/5);gap:12px 8px;overflow-x:auto;scrollbar-width:none;background:#fff;border-radius:12px;padding:12px 10px;margin:12px 0;border:1px solid color-mix(in srgb,var(--brand) 10%,var(--line))}
.cats::-webkit-scrollbar{display:none}
.cats.two{grid-template-rows:auto auto}
@media(min-width:821px){.cats{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-template-rows:none;overflow:visible}.cats.two{grid-template-rows:none}}
.cats a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);text-align:center;min-width:0}
.cats a small{font-size:.75rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
:where(body.store) .cats a{color:var(--ink)}
.cats a.on small{color:var(--brand-ink,var(--brand));font-weight:700}
.cico{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;background:color-mix(in srgb,var(--brand) 12%,#fff);border:1px solid color-mix(in srgb,var(--brand) 18%,#fff)}
.cico img{width:100%;height:100%;object-fit:cover}
.cico.txt{color:var(--brand-ink,var(--brand));font-weight:800;font-size:1.15rem}
.cats a.on .cico{box-shadow:0 0 0 2px var(--brand)}
.kathead{margin:6px 0 0}.kathead h2{margin:0;font-size:1.1rem}
/* panel tampilan */
.bnrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.bnrow img{width:240px;max-width:45%;aspect-ratio:12/5;object-fit:cover;border-radius:8px;background:var(--bg)}
.bnf{flex:1;display:flex;flex-direction:column;gap:8px}.bnf label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem}.bnf .row{gap:6px;flex-wrap:wrap}
.bnadd,.catadd{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.catlist{display:flex;flex-direction:column}
.catrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.catrow input[name=name]{flex:1;min-width:140px}.catrow .sortn{width:70px}
.filebtn{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.85rem;cursor:pointer;background:#fff;font-weight:400}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
@media(max-width:600px){.bnrow{flex-direction:column}.bnrow img{width:100%;max-width:100%}}

/* ---------- panel toko: tampilan HP ala aplikasi seller ---------- */
.bnav-app,.msheet,.mgrid-wrap,.more-t{display:none}
@media (max-width:820px){
body.app:has(.bnav-app){padding-bottom:calc(68px + env(safe-area-inset-bottom))}
body.app:has(.bnav-app) .topbar nav{display:none}
body.app .topbar{background:var(--brand)}body.app .topbar .row{min-height:52px}body.app .topbar .logo{color:#fff}
.bnav-app{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.bnav-app a,.bnav-app label{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.7rem;cursor:pointer;padding:2px 0;font-weight:500}
.bnav-app .on{color:var(--brand);font-weight:700}
.more-t:checked~.msheet{display:block}
.msheet{position:fixed;inset:0;z-index:40}
.msheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.msheet .pan{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto}
.msheet .grab{width:40px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 12px}
.msheet h2{font-size:1rem;margin:0 0 14px}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px}
.mgrid form{display:contents}
.mgrid a,.mgrid button{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font:inherit;font-size:.75rem;line-height:1.2;text-align:center;background:none;border:0;cursor:pointer;padding:0;min-width:0}
.mgrid .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#e8f4ef;color:var(--brand)}
.mgrid .on .ic{background:var(--brand);color:#fff}
.mgrid-wrap{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 12px 16px;margin:12px 0}
.mgrid-wrap h2{font-size:1rem;margin:0 0 14px}
body.app main.wrap h1{font-size:1.35rem}
}
/* logo Astore */
.logo{display:inline-flex;align-items:center;gap:8px}.logo img{display:block;background:#fff;border-radius:8px;padding:2px}
/* ---------- panel toko: tampilan aplikasi (desktop & HP) ala wnj.id/app ---------- */
body.appx{background:#F3F1EA;font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.appx .topbar{display:none}
body.appx main.wrap{max-width:680px;padding:20px 16px 24px}
body.appx main.wrap>h1,body.appx main.wrap h1:first-of-type{font:600 1.35rem/1.25 Fraunces,Georgia,serif}
.ahead{display:flex;gap:12px;align-items:center;margin:0 0 16px}
.ahead .alogo{width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 1px 2px rgba(40,30,10,.06)}
.ahead .alogo img{width:34px;height:34px;display:block}
.ahead .at{flex:1;min-width:0}
.ahead h1{font:600 1.45rem/1.2 Fraunces,Georgia,serif!important;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ahead p{margin:2px 0 0;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ahead .ai{color:var(--brand);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);cursor:pointer;padding:0;text-decoration:none}
.ahead .ai.out{color:#8a2323}
.ahead .ai:hover{background:#e8f4ef}
body.appx .card,body.appx .stat{border-radius:14px;box-shadow:0 1px 2px rgba(40,30,10,.05),0 8px 24px -14px rgba(40,30,10,.25)}
body.appx .stats{grid-template-columns:1fr 1fr}
body.appx .mgrid-wrap{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 12px 16px;margin:0 0 14px;box-shadow:0 1px 2px rgba(40,30,10,.05),0 8px 24px -14px rgba(40,30,10,.25)}
body.appx .mgrid-wrap h2,body.appx .msheet h2{font-size:1rem;margin:0 0 14px}
body.appx .mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px 6px}
body.appx .mgrid form{display:contents}
body.appx .mgrid a,body.appx .mgrid button{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);font:inherit;font-size:.78rem;line-height:1.2;text-align:center;background:none;border:0;cursor:pointer;padding:0;min-width:0}
body.appx .mgrid .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#e8f4ef;color:var(--brand);transition:transform .15s}
body.appx .mgrid a:hover .ic,body.appx .mgrid button:hover .ic{transform:translateY(-2px)}
body.appx .mgrid .on .ic{background:var(--brand);color:#fff}
body.appx .bnav-app{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -2px 14px rgba(0,0,0,.07)}
body.appx .bnav-app a,body.appx .bnav-app label{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.72rem;cursor:pointer;padding:3px 0;font-weight:500}
body.appx .bnav-app .on{color:var(--brand);font-weight:700}
body.appx .more-t:checked~.msheet{display:block}
body.appx .msheet{position:fixed;inset:0;z-index:40}
body.appx .msheet .bg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
body.appx .msheet .pan{position:absolute;left:0;right:0;bottom:0;max-width:680px;margin:0 auto;background:#fff;border-radius:18px 18px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto}
body.appx .msheet .grab{width:40px;height:4px;border-radius:9px;background:var(--line);margin:0 auto 12px}
@media(max-width:520px){body.appx .mgrid{grid-template-columns:repeat(4,1fr)}.ahead h1{font-size:1.2rem!important}}
/* Ringkasan: judul halaman sudah ada di header */
body.appx .mgrid-wrap+h1{display:none}