:root{
  --bg:#FFF6F1; --card:#FFFFFF; --ink:#5B4036; --muted:#9A8480; --line:#F1E4DF;
  --cocoa:#6B4435; --cocoa2:#8A5E4C;
  --pink:#FBE1E6; --pink-d:#E8A5B3; --pink-t:#A2485C;
  --lav:#ECE6FA; --lav-d:#B9AAE3; --lav-t:#6250A0;
  --mint:#E0F2E7; --mint-d:#95CBA8; --mint-t:#2F7048;
  --butter:#FDF3D2; --butter-d:#E9CB76; --butter-t:#8A6512;
  --sky:#E1ECFA; --sky-d:#A3C0EA; --sky-t:#3A5E94;
  --cream:#FBF5E5;
  --r:22px; --shadow:0 6px 20px rgba(107,68,53,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:16px;line-height:1.45}
body{min-height:100vh}
button,input,textarea,select{font:inherit;color:inherit}
.app{max-width:480px;margin:0 auto;padding:0 16px 110px;min-height:100vh;position:relative}
.demo{max-width:480px;margin:0 auto;background:var(--lav);color:var(--lav-t);font-size:12.5px;font-weight:700;text-align:center;padding:6px 12px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:18px 0 10px}
.logo{font-family:'Caveat Brush',cursive;font-size:30px;line-height:1;color:var(--cocoa);letter-spacing:.5px}
.logo small{display:block;font-family:Nunito;font-size:12px;color:var(--muted);letter-spacing:0;font-weight:600;margin-top:2px}
.logo-img{width:52px;height:52px;border-radius:50%;display:block;box-shadow:0 4px 12px rgba(90,58,46,.25)}
.badge-logo{width:44px;height:44px;border-radius:14px;background:#5A3A2E;display:grid;place-items:center;font-family:'Caveat Brush';color:#AFC8EC;font-size:13px;line-height:.9;text-align:center;position:relative;overflow:hidden}
.badge-logo:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,#7a5444 1.5px,transparent 2px),radial-gradient(circle at 70% 70%,#7a5444 1.5px,transparent 2px),radial-gradient(circle at 80% 20%,#7a5444 1px,transparent 2px);background-size:14px 14px}
.badge-logo span{position:relative}
h1.page{font-family:Fraunces,serif;font-style:italic;font-weight:600;font-size:28px;margin:6px 0 14px;color:var(--cocoa)}
h2{font-family:Fraunces,serif;font-style:italic;font-weight:600;font-size:20px;margin:22px 0 10px;color:var(--cocoa)}
h3{font-size:16px;margin:0 0 6px;font-weight:800}
.muted{color:var(--muted)} .sm{font-size:13.5px} .xs{font-size:12px}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;border:1px solid #fff}
.card.pink{background:var(--pink)} .card.lav{background:var(--lav)} .card.mint{background:var(--mint)} .card.butter{background:var(--butter)} .card.sky{background:var(--sky)}
.row{display:flex;align-items:center;gap:10px} .between{justify-content:space-between} .wrap{flex-wrap:wrap} .grow{flex:1;min-width:0}
.stack>*+*{margin-top:8px}
.btn{border:0;border-radius:16px;padding:13px 16px;font-weight:800;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pink);color:var(--pink-t);min-height:48px}
.btn.primary{background:var(--cocoa);color:#fff}
.btn.ghost{background:#fff;color:var(--cocoa);border:1.5px solid var(--line)}
.btn.lav{background:var(--lav);color:var(--lav-t)} .btn.mint{background:var(--mint);color:var(--mint-t)} .btn.sky{background:var(--sky);color:var(--sky-t)} .btn.butter{background:var(--butter);color:var(--butter-t)}
.btn.danger{background:#fff;color:#B0445A;border:1.5px solid #F3C9D2}
.btn.block{width:100%} .btn.small{min-height:38px;padding:8px 12px;font-size:13.5px;border-radius:12px}
.btn:active{transform:scale(.98)}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}
.p-belum{background:var(--pink);color:var(--pink-t)} .p-dp{background:var(--butter);color:var(--butter-t)} .p-lunas{background:var(--mint);color:var(--mint-t)} .p-kirim{background:var(--sky);color:var(--sky-t)} .p-lav{background:var(--lav);color:var(--lav-t)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;min-height:42px}
.chip.on{background:var(--cocoa);border-color:var(--cocoa);color:#fff}
.scrollx{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.scrollx::-webkit-scrollbar{display:none}
.scrollx .chip{flex:none}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border-radius:18px;padding:14px}
.tile .n{font-size:20px;font-weight:800;margin-top:2px}
.tile.full{grid-column:1/-1}
.list-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.list-item:last-child{border-bottom:0}
.thumb{width:54px;height:54px;border-radius:14px;background:var(--cream);object-fit:cover;flex:none}
.img-empty{background-color:var(--cream);background-image:
  radial-gradient(circle at 18% 28%, var(--cocoa) 0 3px, transparent 4px),
  radial-gradient(circle at 72% 62%, var(--cocoa2) 0 4px, transparent 5px),
  radial-gradient(circle at 42% 82%, var(--cocoa) 0 2px, transparent 3px),
  radial-gradient(circle at 85% 18%, var(--cocoa2) 0 3px, transparent 4px),
  radial-gradient(circle at 55% 45%, var(--cocoa) 0 2px, transparent 3px),
  radial-gradient(circle at 10% 65%, var(--cocoa2) 0 2px, transparent 3px),
  radial-gradient(circle at 90% 88%, var(--cocoa) 0 3px, transparent 4px);
  background-size:56px 56px; background-repeat:repeat}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none}
label.f{display:block;font-weight:800;font-size:14px;margin:14px 0 6px}
.inp{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;font-size:16px;outline:none;min-height:48px}
.inp:focus{border-color:var(--pink-d);box-shadow:0 0 0 3px var(--pink)}
textarea.inp{min-height:84px;resize:vertical}
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:0 10px calc(10px + env(safe-area-inset-bottom))}
nav.tabs .in{max-width:460px;width:100%;background:#fff;border-radius:24px;box-shadow:0 8px 30px rgba(107,68,53,.15);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:6px 4px;align-items:end}
nav.tabs button{border:0;background:none;border-radius:18px;padding:7px 1px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;font-weight:800;color:var(--muted);cursor:pointer}
nav.tabs button .ic{font-size:20px;line-height:1.2}
nav.tabs button.on{background:var(--pink);color:var(--pink-t)}
nav.tabs button.add{color:#C4506B;padding-top:0;overflow:visible}
nav.tabs button.add .circle{width:54px;height:54px;border-radius:50%;background:#C4506B;color:#fff;font-size:32px;font-weight:800;line-height:1;display:grid;place-items:center;margin-top:-26px;border:4px solid #fff;box-shadow:0 8px 18px rgba(196,80,107,.4)}
nav.tabs button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fab{position:fixed;right:max(16px,calc(50% - 224px));bottom:calc(94px + env(safe-area-inset-bottom));z-index:21;background:#C4506B;color:#fff;border:3px solid #fff;border-radius:99px;padding:14px 22px 14px 16px;font-weight:900;font-size:17px;box-shadow:0 12px 28px rgba(196,80,107,.45);cursor:pointer;display:flex;align-items:center;gap:8px}
.fab .plus{width:30px;height:30px;border-radius:50%;background:#fff;color:#C4506B;display:grid;place-items:center;font-size:24px;line-height:1;font-weight:900}
/* sheet */
.veil{position:fixed;inset:0;background:rgba(91,64,54,.35);z-index:40;display:none;align-items:flex-end;justify-content:center}
.veil.open{display:flex}
.veil.full{align-items:stretch}
.veil.full .sheet{max-height:none;height:100vh;height:100dvh;border-radius:0;animation:none;padding-top:max(10px,env(safe-area-inset-top))}
.veil.full .grab{display:none}
.sheet{background:var(--bg);width:100%;max-width:480px;max-height:92vh;max-height:92dvh;overflow:auto;border-radius:28px 28px 0 0;padding:10px 16px calc(24px + env(safe-area-inset-bottom));animation:up .22s ease}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:#E6D6D0;margin:4px auto 10px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:-10px;background:var(--bg);padding:6px 0 10px;z-index:2}
.sheet-head h2{margin:0}
.x{border:0;background:#fff;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;box-shadow:var(--shadow);flex:none}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.confirm-veil{position:fixed;inset:0;z-index:70;background:rgba(91,64,54,.45);display:flex;align-items:center;justify-content:center;padding:24px}
.confirm-box{background:var(--bg);border-radius:22px;padding:20px;max-width:360px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.datecard{border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:10px 12px;text-align:left;cursor:pointer;min-height:64px}
.datecard.on{background:var(--cocoa);border-color:var(--cocoa);color:#fff}
.datecard:disabled{opacity:.4}
.datecard b{display:block;font-size:15px}.datecard span{font-size:12.5px;opacity:.85}
.searchbar{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;min-height:48px;font-size:15px;color:var(--muted);cursor:pointer;text-align:left;margin-bottom:4px}
.sgroup{font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--muted);margin:16px 2px 6px;text-transform:uppercase}
mark{background:var(--butter);color:inherit;border-radius:4px;padding:0 2px}
.btn{text-wrap:balance;text-align:center}
@media (max-width:380px){.hide-sm{display:none}.btn{font-size:14px;padding:12px 10px}.btn.small{font-size:13px}h1.page{font-size:25px}.app{padding-left:14px;padding-right:14px}.app .kat-hero{margin-left:-14px;margin-right:-14px}}
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--cocoa);color:#fff;padding:11px 18px;border-radius:14px;font-weight:700;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1}
/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .dow{text-align:center;font-size:12px;font-weight:800;color:var(--muted);padding:4px 0}
.cal .d{min-width:0;overflow:hidden;aspect-ratio:1/1.15;border-radius:14px;background:#fff;border:1.5px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;font-weight:700;font-size:14px;cursor:pointer;gap:2px}
.cal .d.out{visibility:hidden}
.cal .d.today{border-color:var(--cocoa)}
.cal .d.past{opacity:.45}
.cal .d .tag{font-size:10px;font-weight:800;border-radius:8px;padding:1px 5px;max-width:92%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal .d .cnt{font-size:10px;color:var(--muted);font-weight:800}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:40px;height:40px;border-radius:12px;border:0;background:var(--pink);color:var(--pink-t);font-size:20px;font-weight:800;cursor:pointer}
.stepper .q{min-width:24px;text-align:center;font-weight:800;font-size:17px}
.var-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.var-row:last-child{border-bottom:0}
.sticky-total{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));background:var(--bg);padding:12px 0 4px;margin-top:14px;border-top:1px solid var(--line)}
.hint{background:var(--butter);color:var(--butter-t);border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700}
.suggest{background:var(--mint);color:var(--mint-t);border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;display:flex;gap:10px;align-items:center;justify-content:space-between}
.prodimg{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--cream);border-radius:18px;display:block}
.price-inp{width:120px;text-align:right}
.empty{text-align:center;padding:30px 10px;color:var(--muted)}
.empty .big{font-size:40px}
hr.soft{border:0;border-top:1px dashed var(--line);margin:12px 0}
.kv{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.kv b{font-weight:800}
.pay-item{display:flex;gap:10px;align-items:center;padding:8px 0}
.proof{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--cream)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:16px;padding:4px;border:1.5px solid var(--line);margin-bottom:14px}
.seg button{border:0;background:none;border-radius:12px;padding:10px 4px;white-space:nowrap;font-weight:800;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--pink);color:var(--pink-t)}
/* katalog */
.kat-hero{background:#5A3A2E;color:#fff;border-radius:0 0 28px 28px;padding:26px 20px 22px;text-align:center;position:relative;overflow:hidden;margin:0 -16px 16px}
.kat-hero:before{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 12% 25%,#8a6352 2px,transparent 3px),radial-gradient(circle at 60% 70%,#8a6352 2px,transparent 3px),radial-gradient(circle at 85% 15%,#8a6352 1.5px,transparent 3px),radial-gradient(circle at 35% 85%,#8a6352 1.5px,transparent 3px);background-size:48px 40px}
.kat-hero .lg{position:relative;font-family:'Caveat Brush';font-size:46px;line-height:.9;color:#B3CBEE}
.kat-hero p{position:relative;margin:10px 0 0;font-size:14px;color:#F2E4DC}
.kat-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.kat-card .pic{background:var(--cream);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.kat-card .pic img{max-width:78%;max-height:92%}
.kat-card .body{padding:14px 16px 8px}
.datebadge{display:inline-block;background:var(--sky);color:var(--sky-t);font-weight:800;border-radius:12px;padding:4px 10px;font-size:13px}
.cart-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.cart-bar .in{max-width:456px;width:100%;background:var(--cocoa);color:#fff;border-radius:22px;padding:10px 10px 10px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 30px rgba(107,68,53,.35)}
.cart-bar .btn{background:#25D366;color:#fff}
.soldout{opacity:.5}
/* tambahan v1 (login, versi, search sheet, label) */
.login-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.login-wrap .logo-img{width:84px;height:84px;margin:0 auto 6px}
.login-card{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:22px;width:100%;max-width:360px;text-align:left}
.pwrap{position:relative}
.pwrap .inp{padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:19px;cursor:pointer;width:36px;height:36px;border-radius:10px}
.verbar{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--butter);color:var(--butter-t);font-size:12.5px;font-weight:800;text-align:center;padding:8px 12px;display:none}
.verbar.show{display:block}
.verbar button{margin-left:8px;text-decoration:underline;background:none;border:0;font:inherit;font-weight:900;cursor:pointer;color:inherit}
.searchsheet{position:fixed;inset:0;z-index:55;background:var(--bg);display:none;flex-direction:column}
.searchsheet.open{display:flex}
.searchsheet .shead{display:flex;gap:8px;padding:14px 14px 8px;align-items:center}
.searchsheet .body{flex:1;overflow:auto;padding:0 16px 40px}
.route-back{border:0;background:#fff;border-radius:50%;width:38px;height:38px;font-size:18px;box-shadow:var(--shadow);cursor:pointer;flex:none}
.headrow{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.headrow h1.page{margin:0}
.installcard{background:linear-gradient(135deg,var(--sky),var(--lav));border-radius:20px;padding:14px 16px;margin-bottom:14px;position:relative}
.installcard .x{position:absolute;right:8px;top:8px;width:28px;height:28px;font-size:13px}
.wapreview{background:#DCF3E6;border-radius:16px;padding:14px;font-size:14.5px;white-space:pre-wrap;position:relative}
.wapreview:after{content:"";position:absolute;left:18px;bottom:-8px;border:8px solid transparent;border-top-color:#DCF3E6}
.toast.err{background:#B0445A}
.toast{max-width:90vw;text-align:left;display:flex;align-items:center}