:root{
  color-scheme: light;
  --ground:#FBF6FD;
  --milk:#F3E6FA;
  --petal:#E3B8F2;
  --berry:#B8248A;
  --berry-deep:#5B1D82;
  --cocoa:#2E2138;
  --cocoa-soft:#6F5F7A;
  --butter:#FFE9A6;
  --mint:#D5EEDF;
  --mint-ink:#2F6B4F;
  --line:#EADCF2;
  --card:#FFFFFF;
  --shadow:0 10px 30px -14px rgba(91,29,130,.35);
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --display:"Sniglet","Nunito","Trebuchet MS",system-ui,sans-serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
  --nav-h:68px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ground)}
body{font-family:var(--body);color:var(--cocoa);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 8px)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--berry);outline-offset:2px;border-radius:10px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;text-wrap:balance;margin:0}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--berry)}
.price{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px dashed var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:10px;height:60px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo b{font-family:var(--display);font-size:22px;letter-spacing:-.01em;color:var(--berry-deep);display:flex;align-items:baseline;gap:4px}
.logo b span{color:var(--berry);font-weight:400;font-size:.82em}
.logo img{width:38px;height:38px;border-radius:50%;flex:none;box-shadow:0 0 0 2px #fff,0 0 12px rgba(184,36,138,.45)}
.top-actions{margin-left:auto;display:flex;gap:6px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;border:0;background:var(--milk);display:grid;place-items:center;color:var(--berry-deep)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;border-radius:10px;background:var(--berry);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--ground)}
.topbar .searchbar{display:none;height:auto;padding-block:0 12px}
.topbar .searchbar.open{display:block}
.searchbar input{width:100%;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:11px 18px;outline:none}
.searchbar input:focus{border-color:var(--petal)}

/* ---------- hero / KV ---------- */
.hero{margin-top:14px;position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;
  background:
  radial-gradient(circle at 12% 18%,rgba(236,72,190,.38),transparent 42%),
  radial-gradient(circle at 88% 78%,rgba(124,58,237,.42),transparent 48%),
  #120A1C;
  box-shadow:0 18px 40px -22px rgba(91,29,130,.8)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;background:
  radial-gradient(1.5px 1.5px at 8% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 22% 12%,#FFB8EC,transparent),
  radial-gradient(2px 2px at 46% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 8%,#C9B5FF,transparent),
  radial-gradient(2px 2px at 72% 32%,#fff,transparent),radial-gradient(1.5px 1.5px at 93% 14%,#FFB8EC,transparent),
  radial-gradient(1.5px 1.5px at 36% 52%,#C9B5FF,transparent),radial-gradient(2px 2px at 96% 56%,#fff,transparent)}
.brandline{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.brandline img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,122,217,.8),0 0 22px rgba(236,72,190,.7)}
.brandline b{font-family:var(--display);font-size:24px;line-height:1;display:block;text-shadow:0 0 12px rgba(255,122,217,.7)}
.brandline a{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;color:#F5C2FF;text-decoration:none;border:1px solid rgba(245,194,255,.45);border-radius:999px;padding:2px 9px}
.brandline a:hover{background:rgba(245,194,255,.12)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:6px;padding:24px 20px 20px;position:relative}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(34px,9vw,58px);color:#fff;letter-spacing:-.02em;text-shadow:0 0 22px rgba(236,72,190,.45)}
.hero h1 em{font-style:normal;color:#FF8ADF;position:relative;white-space:nowrap;text-shadow:0 0 14px rgba(255,79,200,.9)}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.09em;background:linear-gradient(90deg,#FF4FC8,#8B5CF6);border-radius:4px;box-shadow:0 0 10px #FF4FC8}
.hero p{margin:12px 0 18px;color:#DCCDEE;max-width:36ch;font-size:15px}
.hero .eyebrow{color:#FF9BE0}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:700;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--berry);color:#fff;box-shadow:0 6px 0 var(--berry-deep)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-soft{background:var(--card);color:var(--berry-deep);border:2px solid var(--line)}
.hero-note{font-family:var(--hand);font-size:22px;color:#F5C2FF;transform:rotate(-4deg);display:inline-block}
.hero .btn-primary{background:linear-gradient(135deg,#E0309E,#8B3FE0);box-shadow:0 6px 0 #3E1260,0 0 24px rgba(224,48,158,.55)}

.polaroids{position:relative;height:250px;margin-top:10px}
.polaroids::before{content:"";position:absolute;left:50%;top:50%;width:min(92%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid rgba(255,105,210,.85);box-shadow:0 0 16px rgba(255,79,200,.75),inset 0 0 16px rgba(139,92,246,.6)}
.pola{position:absolute;background:#fff;padding:7px 7px 26px;border-radius:6px;box-shadow:var(--shadow);width:44%;max-width:190px}
.pola img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.pola figcaption{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-family:var(--hand);font-size:17px;color:#2E2138}
.pola::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;transform:translateX(-50%) rotate(-3deg);background:rgba(245,194,255,.85);border-radius:2px}
.pola.p1{left:2%;top:18px;transform:rotate(-7deg)}
.pola.p2{left:29%;top:0;transform:rotate(3deg);z-index:2}
.pola.p3{right:2%;top:26px;transform:rotate(8deg)}
.sticker{position:absolute;z-index:3;right:6px;top:-12px;width:92px;height:92px;border-radius:50%;background:var(--butter);display:grid;place-items:center;text-align:center;font-family:var(--display);font-weight:800;font-size:13px;line-height:1.05;color:var(--berry-deep);transform:rotate(12deg);box-shadow:0 0 0 4px #fff,0 0 22px rgba(255,233,166,.6)}
.sticker b{display:block;font-size:26px}
/* Layar sempit: hero dipadatkan.
   Di bawah 560px elemen hero menumpuk jadi satu kolom, sehingga tingginya
   ikut jumlah konten — pernah sampai 1,6x lebarnya dan terasa seperti banner
   portrait. Elemen dekoratif (polaroid) dipangkas paling banyak, teksnya
   hanya dirapatkan supaya tetap terbaca. */
@media (max-width:560px){
  .hero-inner{padding:18px 16px 16px;gap:2px}
  .brandline{gap:10px;margin-bottom:10px}
  .brandline img{width:46px;height:46px}
  .brandline b{font-size:19px}
  .hero h1{font-size:clamp(27px,7.4vw,40px);line-height:1.08}
  .hero p{margin:8px 0 12px;font-size:13.5px;line-height:1.45;max-width:100%}
  .hero-cta{gap:8px}
  .hero .btn{padding:10px 16px;font-size:14px}
  .hero-note{font-size:17px}
  /* Kolase polaroid dibuang di HP — itu yang membuat banner jadi portrait.
     Polaroid tetap tampil di layar lebar. Pemikat harga dipertahankan, tapi
     jadi pil ringkas dalam alur teks, bukan stiker bulat 92px. */
  .polaroids{height:auto;margin-top:0}
  .polaroids::before{display:none}
  .pola{display:none}
  .sticker{position:static;display:inline-block;width:auto;height:auto;
    margin-top:10px;padding:5px 13px;border-radius:999px;transform:none;
    font-size:12px;line-height:1.3;box-shadow:0 0 0 3px #fff}
  .sticker b{display:inline;font-size:15px;margin:0 3px}
}

@media (min-width:760px){
  .hero-inner{grid-template-columns:1.05fr 1fr;align-items:center;padding:40px 40px 34px}
  .polaroids{height:330px;margin:0}
  .sticker{top:-6px;right:0}
}

/* ---------- ticker ---------- */
.ticker{margin-top:14px;background:var(--berry-deep);color:#F3E3FF;border-radius:999px;overflow:hidden;white-space:nowrap;font-weight:600;font-size:13px}
.ticker-track{display:inline-flex;gap:28px;padding:9px 0;animation:tick 28s linear infinite}
.ticker-track span::before{content:"✿";margin-right:10px;color:var(--petal)}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- ship-to ---------- */
.shipto{margin-top:14px;display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);padding:10px 14px}
.shipto .truck{width:40px;height:40px;border-radius:12px;background:var(--mint);display:grid;place-items:center;color:var(--mint-ink);flex:none}
.shipto label{font-size:12px;color:var(--cocoa-soft);display:block}
.shipto select{border:0;background:transparent;font-weight:700;padding:0;outline:none;max-width:100%}
.shipto .eta{margin-left:auto;text-align:right;font-size:12px;color:var(--mint-ink);font-weight:600;white-space:nowrap}
.shipto .eta b{display:block;font-size:14px}

/* ---------- section head ---------- */
.sec{margin-top:30px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-head h2{font-size:26px;color:var(--berry-deep)}
.sec-head .hand{font-family:var(--hand);font-size:20px;color:var(--berry);text-align:right;line-height:1.1}

/* ---------- chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:8px 14px;font-weight:600;font-size:13px;display:flex;gap:6px;align-items:center}
.chip small{background:var(--milk);border-radius:999px;padding:0 7px;font-size:11px;color:var(--berry-deep)}
.chip[aria-pressed="true"]{background:var(--berry);border-color:var(--berry);color:#fff}
.chip[aria-pressed="true"] small{background:rgba(255,255,255,.25);color:#fff}
.toolbar{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.toolbar select{border:2px solid var(--line);background:var(--card);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600}
.toolbar .count{font-size:13px;color:var(--cocoa-soft);margin-left:auto}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:960px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:var(--card);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;text-align:left;padding:0;transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .ph{position:relative;aspect-ratio:3/4;background:var(--milk)}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tag{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--cocoa)}
.tag.g-A{color:var(--mint-ink)}
.tag.g-C{color:#9A5B12}
.disc{position:absolute;right:8px;bottom:8px;width:48px;height:48px;border-radius:50%;background:var(--butter);color:var(--berry-deep);font-family:var(--display);font-weight:800;font-size:14px;display:grid;place-items:center;transform:rotate(-10deg);box-shadow:0 0 0 3px #fff}
.heart{position:absolute;right:8px;top:8px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--berry)}
.heart svg{width:18px;height:18px}
.heart[aria-pressed="true"] svg{fill:var(--berry)}
.card .info{padding:10px 12px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.card .cat{font-size:11px;color:var(--cocoa-soft);font-weight:600}
.card .nm{font-weight:700;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card .sz{font-size:11.5px;color:var(--cocoa-soft)}
.card .sz b{color:var(--cocoa);font-weight:700}
.prow{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.prow .now{font-weight:800;color:var(--berry-deep);font-size:15px}
.prow s{font-size:12px;color:var(--cocoa-soft)}
.empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:var(--cocoa-soft);background:var(--card);border-radius:var(--r-md);border:2px dashed var(--line)}
.empty b{font-family:var(--display);font-size:22px;color:var(--berry-deep);display:block}

/* ---------- promise strip ---------- */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.promise div{background:var(--milk);border-radius:var(--r-md);padding:14px 10px;text-align:center}
.promise svg{width:30px;height:30px;color:var(--berry)}
.promise b{display:block;font-size:13px;margin-top:4px}
.promise span{font-size:11.5px;color:var(--cocoa-soft);display:block}

/* ---------- size guide ---------- */
.guide{display:grid;gap:14px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:18px}
@media (min-width:760px){.guide{grid-template-columns:260px 1fr;align-items:center}}
.guide svg{width:100%;max-width:260px;height:auto;margin:0 auto;display:block}
.guide dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}
.guide dt{font-weight:800;color:var(--berry-deep);font-variant-numeric:tabular-nums}
.guide dd{margin:0;color:var(--cocoa-soft)}

/* ---------- regions (SEO) ---------- */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.region{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;text-decoration:none;display:flex;flex-direction:column;gap:4px}
.region:hover{border-color:var(--petal)}
.region b{font-family:var(--display);font-size:17px;color:var(--berry-deep)}
.region span{font-size:12px;color:var(--cocoa-soft)}
.region i{font-style:normal;font-size:12px;font-weight:700;color:var(--mint-ink)}
.seo-copy{margin-top:14px;font-size:13.5px;color:var(--cocoa-soft);max-width:72ch}
.seo-copy h3{font-size:17px;color:var(--cocoa);margin:14px 0 4px;font-family:var(--body);font-weight:800}

/* ---------- faq ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:0 16px;margin-bottom:8px}
summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:700;display:flex;justify-content:space-between;gap:10px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:22px;line-height:1;color:var(--berry)}
details[open] summary::after{content:"–"}
details p{margin:0 0 14px;color:var(--cocoa-soft);font-size:14px}

/* ---------- install / footer ---------- */
.install{display:flex;gap:12px;align-items:center;background:var(--berry-deep);color:#F3E3FF;border-radius:var(--r-lg);padding:16px 18px}
.install .ic{width:52px;height:52px;border-radius:15px;background:#01010a;display:grid;place-items:center;flex:none;overflow:hidden}
.install .ic img{width:100%;height:100%;object-fit:cover}
.install b{font-family:var(--display);font-size:18px;color:#fff;display:block}
.install span{font-size:13px}
.install .btn{margin-left:auto;background:#fff;color:var(--berry-deep);padding:10px 16px;flex:none}
.igcard{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.igcard:hover{border-color:var(--petal)}
.igicon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;flex:none;background:linear-gradient(135deg,#F9A826,#E0309E 50%,#7C3AED)}
.igcard b{display:block;font-size:15px;color:var(--berry-deep)}
.igcard span{font-size:13px;color:var(--cocoa-soft)}
.igcard .igbtn{margin-left:auto;background:var(--berry);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:13px;flex:none}
footer{margin-top:34px;padding-block:24px 10px;border-top:1px dashed var(--line);font-size:13px;color:var(--cocoa-soft)}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px}
footer h4{margin:0 0 6px;color:var(--cocoa);font-size:13px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer a{text-decoration:none}
footer a:hover{color:var(--berry)}
.copyright{margin-top:18px;font-size:12px}

/* ---------- bottom nav ---------- */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -8px 24px -16px rgba(91,29,130,.3)}
.bnav .wrap{display:grid;grid-template-columns:repeat(4,1fr);height:var(--nav-h);max-width:560px}
.bnav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--cocoa-soft);position:relative}
.bnav button svg{width:23px;height:23px}
.bnav button[aria-current="page"]{color:var(--berry)}
.bnav button[aria-current="page"]::before{content:"";position:absolute;top:6px;width:44px;height:30px;border-radius:15px;background:var(--milk);z-index:-1}
.bnav .badge{top:8px;right:calc(50% - 22px)}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;background:rgba(46,33,56,.42);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ground);border-radius:28px 28px 0 0;max-height:92%;overflow-y:auto;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);max-width:760px;margin:0 auto}
.sheet.show{transform:none}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}
.grab{width:46px;height:5px;border-radius:3px;background:var(--petal);margin:10px auto 0}
.sheet-close{position:absolute;right:14px;top:14px;z-index:3}
.pd{display:grid;gap:16px;padding:14px 16px 0}
@media (min-width:640px){.pd{grid-template-columns:260px 1fr;padding:22px}}
.pd-img{border-radius:var(--r-md);overflow:hidden;background:var(--milk);aspect-ratio:3/4;max-height:52vh;margin-inline:auto;width:100%;max-width:340px;position:relative}
.pd-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Galeri foto produk: digeser mendatar, satu foto per layar. */
.pd-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.pd-track::-webkit-scrollbar{display:none}
.pd-track img{flex:0 0 100%;scroll-snap-align:center;width:100%;height:100%;object-fit:cover;display:block}
.pd-track:focus-visible{outline:2px solid var(--berry);outline-offset:-2px}
.pd-hitung{position:absolute;right:8px;bottom:8px;z-index:2;padding:3px 9px;border-radius:999px;
  background:rgba(38,22,34,.62);color:#fff;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pd-thumbs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%;max-width:340px;margin:10px auto 0}
.pd-thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;
  cursor:pointer;line-height:0;opacity:.6;transition:opacity .15s,border-color .15s}
.pd-thumb img{width:54px;height:72px;object-fit:cover;display:block}
.pd-thumb.on{border-color:var(--berry);opacity:1}
.pd-thumb:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.pd-track{scroll-behavior:auto}}
.pd h2{font-size:26px;color:var(--berry-deep)}
.pd .meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;background:var(--milk);color:var(--berry-deep)}
.pill.mint{background:var(--mint);color:var(--mint-ink)}
.pill.butter{background:var(--butter);color:#7A4A0B}
.pd .prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pd .prices .now{font-family:var(--display);font-size:30px;color:var(--berry)}
.pd .prices s{color:var(--cocoa-soft)}
.pd .save{font-size:12px;font-weight:700;color:var(--mint-ink)}
.measure{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.measure-h{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--milk);font-weight:700;font-size:13px}
.measure-h span{font-weight:500;font-size:11.5px;color:var(--cocoa-soft)}
.measure-bantu{font-weight:600;font-size:11.5px;color:var(--berry);text-decoration:none;white-space:nowrap}
.measure-bantu:hover{text-decoration:underline}

/* ===== Banner promo beranda =====
   Selalu landscape: 2:1 di HP, 3:1 di layar lebar. Gambar di-crop dengan
   object-fit, jadi apa pun rasio unggahan admin tetap rapi. */
.bnr-slider{position:relative;margin-top:14px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--milk)}
.bnr-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.bnr-track::-webkit-scrollbar{display:none}
.bnr-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:2/1;position:relative}
.bnr-slide a{display:block;width:100%;height:100%}
.bnr-slide img{width:100%;height:100%;object-fit:cover;display:block}

.bnr-titik{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:7px;
  justify-content:center;pointer-events:none}
.bnr-titik button{pointer-events:auto;width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.55);cursor:pointer;transition:width .2s,background .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.bnr-titik button.on{width:20px;border-radius:999px;background:#fff}

@media (min-width:760px){
  .bnr-slide{aspect-ratio:3/1}
  .bnr-titik{bottom:14px}
}
@media (prefers-reduced-motion:reduce){.bnr-track{scroll-behavior:auto}}
.measure table{width:100%;border-collapse:collapse;font-size:14px}
.measure td{padding:9px 14px;border-top:1px dashed var(--line)}
.measure td:last-child{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.pd .desc{font-size:14px;color:var(--cocoa-soft);margin:14px 0 0}
.flaw{margin-top:10px;font-size:13px;background:#FFF3DA;border-radius:var(--r-sm);padding:9px 12px;color:#7A4A0B}
.pd-actions{position:sticky;bottom:0;display:flex;gap:10px;padding:12px 16px 4px;background:linear-gradient(to top,var(--ground) 75%,transparent);margin-top:8px}
.pd-actions .btn{flex:1;justify-content:center}
.btn-wa{background:#1F9D55;color:#fff;box-shadow:0 5px 0 #13703B}
.cart-list{padding:8px 16px;display:grid;gap:10px}
.citem{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:8px}
.citem img{width:62px;height:82px;object-fit:cover;border-radius:10px;flex:none}
.citem div{flex:1;min-width:0}
.citem b{display:block;font-size:14px}
.citem span{font-size:12px;color:var(--cocoa-soft)}
.citem button{border:0;background:var(--milk);color:var(--berry-deep);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}
.sum{margin:6px 16px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;display:grid;gap:6px;font-size:14px}
.sum div{display:flex;justify-content:space-between}
.sum .tot{font-weight:800;font-size:17px;color:var(--berry-deep);border-top:1px dashed var(--line);padding-top:8px}
.sheet-title{padding:16px 16px 4px;font-size:24px;color:var(--berry-deep)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px);transform:translate(-50%,20px);background:var(--cocoa);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;opacity:0;transition:.2s;z-index:80;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.view[hidden]{display:none}
.demo-note{font-size:11.5px;color:var(--cocoa-soft);text-align:center;margin-top:10px;padding-inline:16px}

/* ---------- sold stamp ---------- */
.card.sold .ph img{filter:grayscale(.7) opacity(.7)}
.stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-14deg);border:3px solid var(--berry-deep);color:var(--berry-deep);font-family:var(--display);font-weight:800;font-size:20px;padding:2px 12px;border-radius:10px;background:rgba(255,255,255,.8);letter-spacing:.04em}

/* ---------- checkout ---------- */
.steps{display:flex;gap:6px;padding:4px 16px 8px;align-items:center}
.steps span{flex:1;display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--cocoa-soft)}
.steps span::before{content:"";height:5px;border-radius:3px;background:var(--line)}
.steps span.on{color:var(--berry-deep)}
.steps span.on::before{background:var(--berry)}
.form{padding:6px 16px 0;display:grid;gap:12px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fl{display:flex;flex-direction:column;gap:4px;min-width:0}
.fl label{font-size:12px;font-weight:700}
.fl label i{font-style:normal;font-weight:500;color:var(--cocoa-soft)}
.fl input,.fl select,.fl textarea{border:2px solid var(--line);background:var(--card);border-radius:14px;padding:10px 12px;width:100%;outline:none;min-width:0}
.fl input:focus,.fl select:focus,.fl textarea:focus{border-color:var(--petal)}
.fl textarea{resize:vertical;min-height:70px}
.fl .err{font-size:11.5px;color:#A02525}
.detect{display:flex;gap:10px;align-items:center;border-radius:14px;padding:10px 12px;font-size:13px;background:var(--mint);color:var(--mint-ink)}
.detect.warn{background:#FFF3DA;color:#7A4A0B}
.detect.idle{background:var(--milk);color:var(--cocoa-soft)}
.detect svg{width:22px;height:22px;flex:none}
.detect b{display:block}
.couriers{display:grid;gap:8px}
.courier{position:relative;display:flex;align-items:center;gap:12px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer}
.courier input{position:absolute;opacity:0}
.courier:has(input:checked){border-color:var(--berry);background:#F8EEFD}
.courier:has(input:focus-visible){outline:3px solid var(--berry);outline-offset:2px}
.courier .lg{width:44px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:none}
.courier .tx{flex:1;min-width:0}
.courier .tx b{display:block;font-size:13.5px}
.courier .tx span{font-size:12px;color:var(--cocoa-soft)}
.courier .pr{font-weight:800;font-variant-numeric:tabular-nums}
.skel{height:54px;border-radius:14px;background:linear-gradient(90deg,var(--milk),#fff,var(--milk));background-size:200% 100%;animation:sk 1s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.qris{margin:6px 16px 0;background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px;text-align:center}
.qris-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:var(--cocoa-soft)}
.qris-logo{font-family:var(--display);font-size:20px;color:var(--cocoa);letter-spacing:.02em}
.qris canvas{width:220px;height:220px;max-width:100%;image-rendering:pixelated;margin:12px auto 6px;display:block;border-radius:8px}
.qris .amt{font-family:var(--display);font-size:30px;color:var(--berry-deep)}
.qris .timer{display:inline-flex;gap:6px;align-items:center;background:var(--butter);color:#7A4A0B;border-radius:999px;padding:4px 12px;font-weight:700;font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}
.waiting{display:flex;justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cocoa-soft);margin-top:10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--berry);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.howto{margin:10px 16px 0;font-size:12.5px;color:var(--cocoa-soft);padding-left:18px}
.howto li{margin:2px 0}
.demo-btn{display:block;margin:10px auto 0;border:2px dashed var(--petal);background:transparent;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;color:var(--berry-deep)}
.success{padding:10px 16px 0;text-align:center}
.success .big{width:72px;height:72px;border-radius:50%;background:var(--mint);color:var(--mint-ink);display:grid;place-items:center;margin:4px auto 8px}
.success h3{font-size:24px;color:var(--berry-deep)}
.success p{margin:4px 0 0;color:var(--cocoa-soft);font-size:14px}

/* ---------- orders & timeline ---------- */
.track-form{display:flex;gap:8px;flex-wrap:wrap;background:var(--card);border:2px solid var(--line);border-radius:var(--r-md);padding:10px}
.track-form input{flex:1 1 150px;border:0;background:var(--milk);border-radius:12px;padding:10px 12px;min-width:0;outline:none}
.orders{display:grid;gap:12px;margin-top:12px}
@media (min-width:760px){.orders{grid-template-columns:1fr 1fr}}
.order{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.order-h{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 14px;background:var(--milk);flex-wrap:wrap}
.order-h b{font-variant-numeric:tabular-nums}
.order-h span{font-size:12px;color:var(--cocoa-soft)}
.ostat{font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 10px;background:#fff;color:var(--berry-deep)}
.ostat.pending{color:#7A4A0B;background:var(--butter)}
.ostat.delivered{color:var(--mint-ink);background:var(--mint)}
.order-items{display:flex;gap:6px;padding:12px 14px 0;overflow-x:auto}
.order-items img{width:46px;height:61px;object-fit:cover;border-radius:8px;flex:none}
.order-meta{padding:8px 14px 0;font-size:12.5px;color:var(--cocoa-soft)}
.order-meta b{color:var(--cocoa)}
.timeline{list-style:none;margin:0;padding:12px 14px 6px}
.timeline li{position:relative;padding:0 0 16px 30px;font-size:13px}
.timeline li::before{content:"";position:absolute;left:8px;top:18px;bottom:-2px;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--berry)}
.timeline .nd{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center}
.timeline li.done .nd{background:var(--berry);border-color:var(--berry)}
.timeline li.done .nd::after{content:"";width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.timeline li.now .nd{border-color:var(--berry);box-shadow:0 0 0 4px var(--milk)}
.timeline b{display:block}
.timeline li:not(.done):not(.now) b{color:var(--cocoa-soft);font-weight:600}
.timeline span{font-size:12px;color:var(--cocoa-soft)}
.resi{display:inline-flex;gap:6px;align-items:center;margin-top:4px;background:var(--milk);border-radius:8px;padding:3px 8px;font-weight:700;font-size:12px;color:var(--berry-deep);border:0}
.order-f{display:flex;gap:8px;padding:0 14px 14px;flex-wrap:wrap}
.order-f .btn{padding:9px 14px;font-size:13px}

/* =====================================================================
   TAMBAHAN FASE 2 — halaman server-side
   CSS di atas baris ini disalin apa adanya dari mockup dan tidak diubah.
   Bagian ini hanya menata elemen yang belum ada di mockup (remah roti,
   judul halaman, paginasi, isi artikel) dan menetralkan gaya bawaan
   tautan pada nama produk supaya tampilannya tetap sama.
   ===================================================================== */
.card .nm{text-decoration:none;color:inherit}
.chips .chip{text-decoration:none}
.pd .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 2px 0;font-size:12px;color:var(--cocoa-soft)}
.crumbs a{color:var(--berry-deep);text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs b{font-weight:700;color:var(--cocoa)}
.crumbs span{opacity:.5}

.page-title{font-size:23px;line-height:1.2}
.page-sub{margin:-4px 0 14px;color:var(--cocoa-soft);font-size:13px}

.pager{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.pager .btn{padding:10px 18px;font-size:13px}
.pager-info{font-size:12.5px;color:var(--cocoa-soft);font-weight:600}

.artikel h3{margin:18px 0 6px;font-size:16px}
.artikel ul,.artikel ol{margin:8px 0;padding-left:20px}
.artikel li{margin:5px 0;line-height:1.55}
.artikel a{color:var(--berry-deep);font-weight:600}

/* --- Login pelanggan dengan Google (Fase 4a) --- */
.user-box{display:inline-flex;align-items:center}
.user-chip{display:inline-flex;align-items:center;gap:6px;max-width:132px;font-size:12px;font-weight:700;color:var(--berry-deep);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip img{border-radius:50%;flex:none}
.user-masuk{font-size:12px;font-weight:700;color:var(--berry-deep);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none}

.masuk-blok{margin:0 16px 12px;background:var(--milk);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;gap:7px}
.masuk-blok b{font-size:14px;color:var(--berry-deep)}
.masuk-blok span{font-size:12.5px;color:var(--cocoa-soft);line-height:1.5}
.btn-google{background:#fff;color:#3C4043;border:1px solid #DADCE0;justify-content:center;margin-top:3px;font-weight:600}
.btn-google:hover{background:#F8F9FA}

/* --- Halaman pesanan & layar sukses (Fase 3) --- */
.sukses-kotak{background:linear-gradient(160deg,#EAF7EF,#DDF1E5);border:1px solid #BFE3CE;border-radius:var(--r-lg);padding:26px 18px;text-align:center;margin-bottom:16px}
.sukses-ikon{width:62px;height:62px;border-radius:50%;background:#2F6B4F;color:#fff;display:grid;place-items:center;margin:0 auto 12px}
.sukses-kotak h1{font-size:22px;color:#215140;margin:0 0 6px}
.sukses-kotak p{font-size:13.5px;color:#3B6B57;margin:0 0 14px;line-height:1.55}
.kode-pesanan{background:#fff;border-radius:var(--r-md);padding:10px 14px;display:inline-flex;flex-direction:column;gap:2px}
.kode-pesanan span{font-size:11px;color:var(--cocoa-soft)}
.kode-pesanan b{font-size:16px;letter-spacing:.04em;color:var(--berry-deep)}
.rincian{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.rincian td{padding:7px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.rincian td:last-child{text-align:right;white-space:nowrap}
.rincian tr.jumlah td{border-bottom:0;padding-top:11px;font-size:15px;color:var(--berry-deep)}
.alamat-kirim{font-size:13px;line-height:1.6;color:var(--cocoa-soft);margin:10px 0 0}
.resi-kotak{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;margin:12px 0 0}

/* --- Petunjuk pasang PWA (iPhone tidak punya pemasangan otomatis) --- */
.pasang-bantuan{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;font-size:13px;line-height:1.6}
.pasang-bantuan b{color:var(--berry-deep)}
.pasang-bantuan ol{margin:8px 0;padding-left:20px}
.pasang-bantuan li{margin:5px 0}
.pasang-bantuan > span{display:block;margin-top:8px;color:var(--cocoa-soft);font-size:12.5px}
.ikon-bagikan{display:inline-block;transform:translateY(1px)}