/* Prestisa · homepage e-commerce
 * pola: Catalog Storefront — header cari + nav mega-menu + grid momen + deret produk per lini + indeks kategori
 * gaya: Soft UI Evolution (bayangan lembut, sudut 10px, terang, fungsional)
 * tipografi: Rubik (UI) + Nunito Sans (body) — TANPA serif display
 * densitas: 8/10
 * dibuang: serif, emas, damask, panel gelap, bingkai ornamen (sumber kesan "AI")
 */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-ink);
  font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--f-ui);font-weight:600;line-height:1.25;letter-spacing:-.01em}
p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--s-sec)}
.sec--tint{background:var(--c-bg-2)}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:15px;height:15px;stroke-width:2}

/* ── kepala section ────────────────────────────────────────────── */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.shead h2{font-size:var(--t-h2)}
.shead p{font-size:var(--t-md);color:var(--c-muted);margin-top:2px}
.seeall{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-ui);font-size:var(--t-md);
  font-weight:600;color:var(--c-brand);white-space:nowrap;padding:.4rem 0;transition:gap var(--d-1) var(--ease)}
.seeall:hover{gap:.55rem}

/* ── tombol ────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:var(--f-ui);
  font-size:var(--t-md);font-weight:600;padding:.7rem 1.35rem;border:1px solid var(--c-brand);
  background:var(--c-brand);color:var(--c-on-brand);border-radius:var(--r-pill);white-space:nowrap;
  transition:background var(--d-1) var(--ease),border-color var(--d-1) var(--ease),color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease)}
.btn:hover{background:var(--c-brand-deep);border-color:var(--c-brand-deep);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--ghost{background:var(--c-surface);color:var(--c-ink);border-color:var(--c-line-2)}
.btn--ghost:hover{background:var(--c-bg-2);border-color:var(--c-line-2);color:var(--c-ink)}
.btn--wa{background:#128C7E;border-color:#128C7E}
.btn--wa:hover{background:#0E7566;border-color:#0E7566}
.btn--sm{padding:.5rem 1rem;font-size:var(--t-base)}

/* ── topbar ────────────────────────────────────────────────────── */
.topbar{background:var(--c-brand-deep);color:#fff;font-size:var(--t-xs)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding-block:.4rem}
.topbar ul{display:flex;gap:var(--s-4);flex-wrap:wrap}
.topbar li{display:flex;align-items:center;gap:.3rem}
.topbar .icon-sm{opacity:.85}
@media (max-width:760px){.topbar .wrap{justify-content:center}.topbar .right{display:none}
  .topbar li:nth-child(3){display:none}}

/* ── header + pencarian ────────────────────────────────────────── */
.masthead{background:var(--c-surface);border-bottom:1px solid var(--c-line);position:sticky;top:0;z-index:var(--z-nav)}
/* kolom cari keluar dari bar header dan jadi strip sendiri di bawahnya —
   pola yang sama dengan page kota: bar merek + bukti, lalu satu strip di bawah.
   Strip ini ikut menggulung (tidak sticky), seperti strip lokal di page kota. */
.searchbar{background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.searchbar .wrap{display:flex;align-items:center;gap:var(--s-3);padding-block:var(--s-3)}
.searchbar .mast-act{order:2;flex:none}
.mast{display:flex;align-items:center;gap:var(--s-5);padding-block:var(--s-3)}
.brand{flex:none}
.brand img{height:34px;width:auto}
.search{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--c-bg-2);
  border:1px solid var(--c-line);border-radius:var(--r-pill);padding:.1rem .3rem .1rem 1rem;
  transition:border-color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
.search:focus-within{border-color:var(--c-brand);background:var(--c-surface)}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:.7rem 0;
  font-family:var(--f-body);font-size:var(--t-md);color:var(--c-ink);outline:none}
.search input::placeholder{color:var(--c-muted)}
.search .go{border:0;background:var(--c-brand);color:#fff;border-radius:var(--r-pill);
  width:38px;height:38px;display:grid;place-items:center;transition:background var(--d-1) var(--ease)}
.search .go:hover{background:var(--c-brand-deep)}
.mast-act{display:flex;align-items:center;gap:var(--s-2)}
/* ── papan skor Google di header ────────────────────────────────
   Header ini putih, jadi chip-nya memakai tint yang sama dengan kolom
   cari supaya terbaca sebagai saudaranya — bukan kotak putih di atas putih.
   Empat fakta berdiri sendiri; pil magenta yang membawa posisinya. */
.mast-g{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;
  padding:4px 4px 4px 6px;border:1px solid var(--c-line);border-radius:var(--r);
  background:var(--c-bg-2);color:var(--c-ink);text-decoration:none;white-space:nowrap;
  transition:border-color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
.mast-g:hover{border-color:var(--c-brand);background:var(--c-surface)}
.mast-g:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px}
/* ruang bebas 5px di sekeliling logo (≈1/4 tingginya), pemisah sesudah ruang itu */
.mast-g__mark{display:flex;padding:5px;border-right:1px solid var(--c-line);flex:none}
.mast-g .gicon{width:20px;height:20px;display:block}
.mast-g__sel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1px;padding-right:var(--s-2);border-right:1px solid var(--c-line);line-height:1}
.mast-g__sel:last-of-type{border-right:0}
/* bintang lebih lebar daripada angkanya — angka ditengahkan supaya sel ini
   terbaca sebagai satu kesatuan, bukan angka yang menggantung di kiri */
.mast-g__sel--nilai{align-items:center}
.mast-g__sel b{font-family:var(--f-ui);font-weight:800;font-size:var(--t-lg);line-height:1;
  color:var(--c-brand-deep);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mast-g__sel b sup{font-size:.5em;top:-.5em;position:relative}
.mast-g__sel i{font-family:var(--f-ui);font-weight:600;font-size:var(--t-sm);font-style:normal;color:var(--c-muted)}
.mast-g__sel .gstars svg{width:11px;height:11px}
.mast-g__pil{align-self:stretch;display:flex;align-items:center;padding:0 10px;border-radius:var(--r-sm);
  background:var(--c-brand-deep);color:var(--c-paper,#fff);
  font-family:var(--f-ui);font-weight:800;font-size:var(--t-sm)}
.mast-g__pil .pil-pdk{display:none}
/* di mobile: logo · papan skor · tombol menu — menu tetap paling kanan */
@media (max-width:900px){.mast-g{order:1}.mast-act{order:2}}


.iconbtn{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  color:var(--c-ink-2);background:none;border:0;padding:.4rem .5rem;border-radius:var(--r-sm);
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:500;transition:color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
.iconbtn:hover{color:var(--c-brand);background:var(--c-brand-soft)}
.iconbtn .dot{position:absolute;top:.15rem;right:.15rem;min-width:16px;height:16px;padding:0 4px;
  background:var(--c-sale);color:#fff;border-radius:var(--r-pill);font-size:9px;font-weight:700;
  display:grid;place-items:center;line-height:1}
.burger{display:none}
@media (max-width:900px){
  .mast{gap:var(--s-3)}
  .iconbtn span:not(.dot){display:none}
  .burger{display:inline-flex}
}
/* Dua lapis saja: lapis 1 logo + badge, lapis 2 tombol menu + kolom cari.
   Supaya badge muat sebaris dengan logo di 360px, angka & jaraknya dirapatkan
   dan logonya dikecilkan — ambangnya diambil dari lebar yang diukur. */
@media (max-width:900px){
  .mast{flex-wrap:nowrap}
  .mast-g{gap:5px;padding:4px 4px 4px 5px}
  .mast-g__mark{padding:4px}
  .mast-g .gicon{width:18px;height:18px}
  .mast-g__sel{padding-right:5px}
  .mast-g__sel b{font-size:var(--t-md)}
  .mast-g__sel i{font-size:var(--t-sm)}
  .mast-g__pil{padding:0 7px}
  .brand img{height:28px}
}
/* Ambang diambil dari ruang nyata lapis 1: lebar − talang − logo − jarak.
   Logo dikunci flex:none supaya kalau meleset hasilnya luber yang terdeteksi,
   bukan logo yang digencet diam-diam sampai 0px. */
@media (max-width:460px){.mast-g__sel--nilai .gstars{display:none}}
@media (max-width:420px){.mast-g__sel--tahun{display:none}}
@media (max-width:365px){.mast-g__pil .pil-pjg{display:none}.mast-g__pil .pil-pdk{display:inline}}
/* 360px ke bawah barisnya tak muat bintangnya; angka 4,8 tetap */
@media (max-width:360px){.mast-g__sel--nilai .gstars{display:none}}

/* ── nav kategori + mega menu ──────────────────────────────────── */
.catnav{background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.catnav > .wrap{display:flex;align-items:center;gap:var(--s-1)}
.catnav .item{position:relative}
.catnav .item > a{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-ui);
  font-size:var(--t-md);font-weight:500;padding:.75rem .8rem;color:var(--c-ink-2);
  border-bottom:2px solid transparent;transition:color var(--d-1) var(--ease),border-color var(--d-1) var(--ease)}
.catnav .item > a:hover,.catnav .item:focus-within > a{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.catnav .item > a .chev{transition:transform var(--d-1) var(--ease)}
.catnav .item:hover > a .chev,.catnav .item:focus-within > a .chev{transform:rotate(180deg)}
.catnav .hot{color:var(--c-sale);font-weight:600}
.mega{position:absolute;top:100%;left:0;z-index:var(--z-mega);min-width:min(680px,92vw);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--sh-3);padding:var(--s-5);display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) var(--s-6)}
.catnav .item:hover .mega,.catnav .item:focus-within .mega{display:grid}
.mega h4{font-size:var(--t-sm);font-weight:700;color:var(--c-muted);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.5rem}
.mega li{margin-bottom:.3rem}
.mega a{font-size:var(--t-md);color:var(--c-ink-2);transition:color var(--d-1) var(--ease)}
.mega a:hover{color:var(--c-brand)}
@media (max-width:900px){.catnav{display:none}.catnav.open{display:block}
  .catnav > .wrap{flex-direction:column;align-items:stretch;padding-block:var(--s-2)}
  .catnav .item > a{padding:.7rem .2rem;border-bottom:1px solid var(--c-line);justify-content:space-between}
  .mega{position:static;display:grid;grid-template-columns:1fr 1fr;box-shadow:none;border:0;
    padding:var(--s-3) var(--s-2) var(--s-4);border-radius:0;min-width:0}
}

/* ── promo hero ────────────────────────────────────────────────── */
.promo{display:grid;grid-template-columns:2fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.promo-copy{position:relative;z-index:2;padding:clamp(1.25rem,3vw,2.5rem);max-width:26rem}
.promo-copy .kick{display:inline-block;background:var(--c-brand-soft);color:var(--c-brand-deep);
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:700;padding:.25rem .6rem;border-radius:var(--r-pill)}
.promo-copy h1{font-size:var(--t-hero);margin:.6rem 0 .4rem;letter-spacing:-.02em}
.promo-copy p{font-size:var(--t-md);color:var(--c-ink-2);margin-bottom:var(--s-4)}
.promo-copy .cta{display:flex;gap:.6rem;flex-wrap:wrap}
.promo-side{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3);
  height:clamp(240px,26vw,340px)}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface);
  border:1px solid var(--c-line);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:0;
  transition:border-color var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.pcard:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.pcard .ph{position:relative;overflow:hidden;background:var(--c-bg-2);height:100%;aspect-ratio:1/1;
  display:block;border-right:1px solid var(--c-line)}
.pcard .ph img{width:100%;height:100%;object-fit:contain;padding:7%;
  transition:transform var(--d-2) var(--ease)}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .cap{padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem;min-width:0}
.pcard b{display:block;font-family:var(--f-ui);font-size:var(--t-lg);font-weight:700;line-height:1.25;color:var(--c-ink)}
.pcard .cap>span{min-width:0}
.pcard .cap span span{display:block;font-size:var(--t-sm);color:var(--c-muted);margin-top:.1rem}
.pcard .go{margin-left:auto;flex:none;color:var(--c-brand);display:inline-flex;
  transition:transform var(--d-1) var(--ease)}
.pcard:hover .go{transform:translateX(3px)}
@media (max-width:860px){.promo{grid-template-columns:minmax(0,1fr)}
  .promo-side{grid-template-rows:none;grid-template-columns:1fr 1fr;height:auto}
  .pcard .ph{height:92px;width:92px;aspect-ratio:auto}
  .pcard b{font-size:var(--t-md)}}
@media (max-width:480px){.promo-side{grid-template-columns:minmax(0,1fr)}}

/* ── SLOT A · carousel banner utama ───────────────────────────── */
.hero-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--c-bg-3)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:clamp(240px,26vw,340px);
  display:flex;align-items:center}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 36%,rgba(255,255,255,.55) 58%,rgba(255,255,255,.08) 78%,rgba(255,255,255,0) 100%)}
.slide .promo-copy{position:relative;z-index:2}
.slide .promo-copy h1,.slide .promo-copy h2{font-size:var(--t-hero);margin:.6rem 0 .4rem;letter-spacing:-.02em}
.dots{position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);z-index:3;display:flex;gap:.4rem}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:var(--r-pill);background:rgba(31,33,36,.28);
  transition:width var(--d-2) var(--ease),background var(--d-2) var(--ease)}
.dots button[aria-current="true"]{width:22px;background:var(--c-brand)}
.sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;
  display:grid;place-items:center;border:1px solid var(--c-line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);color:var(--c-ink);box-shadow:var(--sh-1)}
.sarrow:hover{background:#fff;color:var(--c-brand)}
.sarrow.prev{left:.6rem}.sarrow.next{right:.6rem}
@media (max-width:860px){
  /* di HP: foto UTUH di atas, teks di blok putih di bawah — bukan teks menimpa foto */
  .slide{display:grid;grid-template-rows:auto auto;align-items:start;min-height:0}
  .slide img{position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  .slide::after{display:none}
  .slide .promo-copy{max-width:none;background:var(--c-surface);
    padding:1.1rem 1.1rem 2.5rem}
  .slide .promo-copy h1,.slide .promo-copy h2{font-size:clamp(1.35rem,5.4vw,1.8rem)}
  .dots{bottom:.7rem}
  .dots button{background:rgba(31,33,36,.22)}
}
@media (max-width:640px){.sarrow{display:none}}

/* ── SLOT C · flash sale ──────────────────────────────────────── */
.flash{background:linear-gradient(180deg,var(--c-brand-soft) 0%,var(--c-bg) 62%)}
.flash .shead{align-items:center}
.flashtitle{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.flashtitle .icon{color:var(--c-sale)}
.ftimer{display:inline-flex;align-items:center;gap:.25rem;margin-left:.3rem}
.ftimer span{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;color:#fff;
  background:var(--c-ink);border-radius:var(--r-sm);padding:.15rem .4rem;font-variant-numeric:tabular-nums;min-width:28px;text-align:center}
.ftimer i{font-style:normal;color:var(--c-muted);font-weight:700}
.stock{margin-top:.45rem}
.stock .bar{height:5px;border-radius:var(--r-pill);background:var(--c-bg-3);overflow:hidden}
.stock .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-sale),#F2705A);border-radius:var(--r-pill)}
.stock small{display:block;margin-top:.2rem;font-size:var(--t-xs);color:var(--c-sale);font-weight:600}

/* ── SLOT D · banner musiman ──────────────────────────────────── */
.season{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(180px,20vw,240px);
  display:flex;align-items:center}
.season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.season::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,8,16,.88) 0%,rgba(22,8,16,.62) 46%,rgba(22,8,16,.1) 78%)}
.season .in{position:relative;z-index:2;padding:clamp(1.25rem,3vw,2.25rem);max-width:34rem;color:#fff}
.season .kick{display:inline-block;background:rgba(255,255,255,.18);color:#fff;font-family:var(--f-ui);
  font-size:var(--t-xs);font-weight:700;padding:.25rem .6rem;border-radius:var(--r-pill)}
.season h2{font-size:var(--t-h2);color:#fff;margin:.5rem 0 .3rem}
.season p{font-size:var(--t-md);color:rgba(255,255,255,.86);margin-bottom:var(--s-4);max-width:42ch}

/* ── strip jaminan ─────────────────────────────────────────────── */
.assure{border-block:1px solid var(--c-line);background:var(--c-surface)}
.assure__ft{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);padding-block:var(--s-4)}
.assure li{display:flex;gap:.6rem;align-items:flex-start}
.assure .icon{color:var(--c-brand);width:22px;height:22px;flex:none}
.gstars{display:inline-flex;gap:1px;vertical-align:middle}
.gstars svg{width:12px;height:12px;fill:var(--c-star)}
.assure b{display:flex;align-items:center;gap:.35rem;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600}
.assure__ft span{display:block;font-size:var(--t-sm);color:var(--c-muted);line-height:1.45}

@media (max-width:700px){.assure__ft{grid-template-columns:1fr 1fr;gap:var(--s-4)}}

/* ── grid momen ────────────────────────────────────────────────── */
.momen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.momen a{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-3);display:flex;align-items:center;gap:.7rem;
  transition:border-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.momen a:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.momen .thumb{width:46px;height:46px;flex:none;border-radius:var(--r-sm);overflow:hidden;background:var(--c-bg-2)}
.momen .thumb img{width:100%;height:100%;object-fit:cover}
.momen b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;line-height:1.25}
.momen span{display:block;font-size:var(--t-xs);color:var(--c-muted);margin-top:1px}
@media (max-width:1040px){.momen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.momen{grid-template-columns:1fr 1fr;gap:var(--s-2)}
  .momen a{padding:.6rem;gap:.5rem}.momen .thumb{width:38px;height:38px}}

/* ── chip subkategori ──────────────────────────────────────────── */
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:var(--s-4)}
.chips a{font-family:var(--f-ui);font-size:var(--t-base);font-weight:500;padding:.4rem .85rem;
  border:1px solid var(--c-line-2);border-radius:var(--r-pill);color:var(--c-ink-2);background:var(--c-surface);
  transition:all var(--d-1) var(--ease);white-space:nowrap}
.chips a:hover{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-brand-soft)}
.chips a.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}

/* ── kartu produk ──────────────────────────────────────────────── */
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.rail--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.rail,.rail--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.rail,.rail--4{grid-template-columns:1fr 1fr;gap:var(--s-2)}}
.pr{position:relative;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--d-1) var(--ease),box-shadow var(--d-2) var(--ease),transform var(--d-2) var(--ease)}
.pr:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-3px)}
.pr .thumb{position:relative;aspect-ratio:1/1;background:var(--c-bg-2);overflow:hidden}
.pr .thumb img{width:100%;height:100%;object-fit:contain;padding:6%;transition:transform var(--d-2) var(--ease)}
.pr:hover .thumb img{transform:scale(1.05)}
.pr .badge{position:absolute;top:.5rem;left:.5rem;z-index:2;background:var(--c-sale);color:#fff;
  font-family:var(--f-ui);font-size:var(--t-xs);font-weight:700;padding:.15rem .45rem;border-radius:var(--r-sm)}
.pr .badge--new{background:var(--c-brand)}
.pr .badge--sd{background:var(--c-ok)}
.pr .body{padding:.6rem .7rem .75rem;display:flex;flex-direction:column;flex:1}
.pr .cat{font-family:var(--f-ui);font-size:var(--t-xs);color:var(--c-muted);font-weight:500}
.pr h3{font-family:var(--f-body);font-size:var(--t-md);font-weight:600;line-height:1.35;margin:.15rem 0 .5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr .price{margin-top:auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem;
  font-family:var(--f-ui);font-size:var(--t-lg);font-weight:700;color:var(--c-brand-deep);
  font-variant-numeric:tabular-nums;line-height:1.3}
.pr .price s{font-family:var(--f-body);font-size:var(--t-sm);font-weight:400;color:var(--c-muted)}
.pr .off{font-family:var(--f-ui);font-size:var(--t-xs);font-weight:700;color:var(--c-sale);
  background:var(--c-sale-soft);padding:.08rem .32rem;border-radius:var(--r-sm)}
/* judul = link melar menutupi kartu; tombol WA di atasnya */
.pr h3 a{color:inherit}
.pr h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pr .buy{position:relative;z-index:2;margin-top:.6rem;display:inline-flex;align-items:center;justify-content:center;
  gap:.35rem;background:#128C7E;color:#fff;font-family:var(--f-ui);font-size:var(--t-sm);font-weight:600;
  padding:.5rem .7rem;border-radius:var(--r-pill);transition:background var(--d-1) var(--ease)}
.pr .buy:hover{background:#0E7566}
.pr .buy .icon-sm{width:14px;height:14px}
.pr .buy{white-space:nowrap}
.pr .buy .blbl{white-space:nowrap}
@media (max-width:420px){.pr .buy .w{display:none}.pr .buy{padding:.5rem .55rem}}

/* ── kategori kartu besar ──────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.cats a{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;
  text-align:center;transition:border-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.cats a:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-3px)}
.cats .thumb{aspect-ratio:1/1;background:var(--c-bg-2)}
.cats .thumb img{width:100%;height:100%;object-fit:contain;padding:8%}
.cats b{display:block;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;padding:.5rem .4rem .1rem}
.cats span{display:block;font-size:var(--t-xs);color:var(--c-muted);padding:0 .4rem .6rem}
@media (max-width:1040px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2)}}

/* ── banner tipis ──────────────────────────────────────────────── */
.strip{background:var(--c-brand-soft);border:1px solid var(--c-brand-line);border-radius:var(--r-lg);
  padding:var(--s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap}
.strip h2{font-size:var(--t-xl);color:var(--c-brand-deep)}
.strip p{font-size:var(--t-md);color:var(--c-ink-2);margin-top:.2rem;max-width:52ch}
.strip .acts{display:flex;gap:.6rem;flex-wrap:wrap}

/* ── bukti ─────────────────────────────────────────────────────── */
.proof{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.proof figure{margin:0;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden}
.proof .thumb{aspect-ratio:1/1;background:var(--c-bg-2);position:relative}
.proof .thumb img{width:100%;height:100%;object-fit:contain;padding:6%}
.proof figcaption{padding:.45rem .55rem .6rem}
.proof b{display:block;font-family:var(--f-ui);font-size:var(--t-base);font-weight:600;line-height:1.3}
.proof span{display:block;font-size:var(--t-xs);color:var(--c-muted)}
@media (max-width:1040px){.proof{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.proof{grid-template-columns:1fr 1fr;gap:var(--s-2)}}

/* ── ulasan ────────────────────────────────────────────────────── */
.rev-top{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--s-3) var(--s-4)}
/* ruang bebas di sekeliling logo Google = 1/4 tinggi logo, sesuai panduan mereknya;
   pemisah diletakkan SESUDAH ruang itu, bukan menempel di logo */
.rev-top__g{display:flex;padding:8px;margin-right:var(--s-2);border-right:1px solid var(--c-line)}
.rev-top__g svg{width:32px;height:32px;display:block}
.rev-top__utama{display:grid;gap:2px}
.rev-top__angka{font-family:var(--f-ui);font-weight:800;font-size:var(--t-proof);line-height:.95;
  color:var(--c-brand-deep);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rev-top__angka sup{font-size:.46em;top:-.62em;position:relative;font-weight:700}
.rev-top__label{font-size:var(--t-md);font-weight:600;color:var(--c-ink-2)}
.rev-top__nilai{display:grid;gap:2px;padding-left:var(--s-4);border-left:1px solid var(--c-line)}
.rev-top__nilai b{font-family:var(--f-ui);font-size:var(--t-2xl);font-weight:700;line-height:1;
  display:flex;align-items:center;gap:.4rem}
.rev-top__sub{font-size:var(--t-sm);color:var(--c-muted)}
.rev-top .stars{display:flex;gap:1px}
.rev-top .stars svg{width:14px;height:14px;fill:var(--c-star)}
.rev-top__klaim{flex-basis:100%;order:9;margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--c-line);font-family:var(--f-ui);font-weight:700;
  font-size:var(--t-md);line-height:1.4;color:var(--c-brand-deep);text-wrap:pretty}
.rev-top__cek{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;
  padding:0 var(--s-4);border:1px solid var(--c-line);border-radius:var(--r-pill);
  font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;color:var(--c-brand-deep);
  transition:border-color var(--d-1) var(--ease),background var(--d-1) var(--ease)}
.rev-top__cek:hover{border-color:var(--c-brand);background:var(--c-brand-soft)}
.rev-top__cek:focus-visible{outline:3px solid var(--c-brand);outline-offset:2px}
@media (max-width:560px){.rev-top{gap:var(--s-3)}
  .rev-top__nilai{padding-left:0;border-left:0;border-top:1px solid var(--c-line);padding-top:var(--s-3);flex-basis:100%}
  .rev-top__cek{margin-left:0;flex-basis:100%;justify-content:center}}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.rev{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);padding:var(--s-4);
  display:flex;flex-direction:column}
.rev .stars{display:flex;gap:1px;margin-bottom:.5rem}
.rev .stars svg{width:13px;height:13px;fill:var(--c-star)}
.rev p{font-size:var(--t-md);color:var(--c-ink-2);flex:1}
.rev .who{display:flex;align-items:center;gap:.55rem;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--c-line)}
.rev .av{width:32px;height:32px;flex:none;border-radius:var(--r-pill);background:var(--c-brand-soft);
  color:var(--c-brand-deep);display:grid;place-items:center;font-family:var(--f-ui);font-size:var(--t-xs);font-weight:700}
.rev .who b{display:block;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600}
.rev .who span{display:block;font-size:var(--t-xs);color:var(--c-muted)}
@media (max-width:900px){.revs{grid-template-columns:minmax(0,1fr)}}

/* ── faq ───────────────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-6)}
.faq details{border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-surface);height:fit-content}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding:.75rem 1rem;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq .sign{color:var(--c-brand);flex:none;transition:transform var(--d-1) var(--ease)}
.faq details[open] .sign{transform:rotate(45deg)}
.faq .ans{padding:0 1rem .85rem;font-size:var(--t-md);color:var(--c-ink-2)}
@media (max-width:820px){.faq{grid-template-columns:minmax(0,1fr)}}

/* ── indeks kategori ───────────────────────────────────────────── */
.index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
.index h4{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;margin-bottom:.45rem}
.index li{margin-bottom:.28rem}
.index a{font-size:var(--t-md);color:var(--c-ink-2);transition:color var(--d-1) var(--ease)}
.index a:hover{color:var(--c-brand)}
@media (max-width:1040px){.index{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.index{grid-template-columns:1fr 1fr}}

/* ── kota ──────────────────────────────────────────────────────── */
.cities{display:flex;flex-wrap:wrap;gap:.35rem}
.cities a{font-size:var(--t-base);color:var(--c-ink-2);background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.25rem .6rem;transition:all var(--d-1) var(--ease)}
.cities a:hover{border-color:var(--c-brand);color:var(--c-brand)}
.cities a.more{background:var(--c-brand-soft);border-color:var(--c-brand-line);color:var(--c-brand-deep);font-weight:600}

/* ── metode pembayaran per jenis ───────────────────────────────── */
.paygrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.paygrid > div{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-4);display:flex;flex-direction:column}
.paygrid .hd{display:flex;align-items:center;gap:.45rem;margin-bottom:.6rem}
.paygrid .hd .icon{color:var(--c-brand);width:18px;height:18px}
.paygrid h3{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700}
.paygrid ul{display:flex;flex-wrap:wrap;gap:.3rem}
.paygrid li{font-size:var(--t-sm);color:var(--c-ink-2);background:var(--c-bg-2);
  border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.18rem .45rem;white-space:nowrap}
.paygrid .note{margin-top:auto;padding-top:.7rem;font-size:var(--t-xs);color:var(--c-muted);line-height:1.45;text-align:left}
@media (max-width:1100px){.paygrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.paygrid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.paygrid{grid-template-columns:minmax(0,1fr)}}

/* ── footer ────────────────────────────────────────────────────── */
footer{background:var(--c-bg-2);border-top:1px solid var(--c-line);margin-top:var(--s-sec)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s-6);padding-block:var(--s-10)}
.foot img{height:32px;width:auto;margin-bottom:var(--s-3)}
.foot .about{font-size:var(--t-md);color:var(--c-muted);max-width:34ch}
.foot h4{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;margin-bottom:.6rem}
.foot li{margin-bottom:.35rem;font-size:var(--t-md);color:var(--c-ink-2)}
.foot li a:hover{color:var(--c-brand)}
.subfoot{border-top:1px solid var(--c-line);padding-block:var(--s-4);display:flex;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-sm);color:var(--c-muted)}
.subfoot .brands{display:flex;gap:var(--s-4)}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr)}}
.note{max-width:var(--maxw);margin-inline:auto;padding:var(--s-4) var(--gutter) var(--s-8);
  font-size:var(--t-sm);color:var(--c-muted);text-align:center;line-height:1.6}
.note a{color:var(--c-brand);border-bottom:1px solid var(--c-brand-line)}

/* ── bar aksi mobile ───────────────────────────────────────────── */
.mobar{display:none}
@media (max-width:720px){
  .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-drawer);
    background:var(--c-surface);border-top:1px solid var(--c-line);padding:.5rem var(--gutter);
    gap:.5rem;box-shadow:0 -4px 16px -8px rgba(20,20,25,.2)}
  .mobar .btn{flex:1}
  body{padding-bottom:64px}
}

/* ── bar pengiriman: pemilih kota + hitung mundur ─────────────── */
.delivbar{background:var(--c-brand-soft);border-block:1px solid var(--c-brand-line);margin-block:var(--s-sec)}
.delivbar .wrap{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding-block:.5rem}
.citypick{position:relative}
.citypick > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-ui);font-size:var(--t-md);color:var(--c-ink);background:var(--c-surface);
  border:1px solid var(--c-brand-line);border-radius:var(--r-pill);padding:.35rem .8rem;
  transition:border-color var(--d-1) var(--ease)}
.citypick > summary::-webkit-details-marker{display:none}
.citypick > summary:hover{border-color:var(--c-brand)}
.citypick > summary b{font-weight:700;color:var(--c-brand-deep)}
.citypick > summary .icon{color:var(--c-brand)}
.citypick[open] > summary .chev{transform:rotate(180deg)}
.citypick .chev{transition:transform var(--d-1) var(--ease)}
.citymenu{position:absolute;top:calc(100% + .4rem);left:0;z-index:var(--z-mega);width:min(320px,90vw);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--sh-3);padding:.6rem}
.citymenu input{width:100%;border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.45rem .6rem;
  font-family:var(--f-body);font-size:var(--t-md);margin-bottom:.4rem;outline:none}
.citymenu input:focus{border-color:var(--c-brand)}
.citymenu ul{max-height:230px;overflow:auto}
.citymenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:.4rem .5rem;
  border-radius:var(--r-sm);font-family:var(--f-body);font-size:var(--t-md);color:var(--c-ink-2)}
.citymenu button:hover{background:var(--c-brand-soft);color:var(--c-brand-deep)}
.cutoff{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-md);color:var(--c-ink-2)}
.cutoff .icon{color:var(--c-brand)}
.cutoff b{font-family:var(--f-ui);font-weight:700;color:var(--c-brand-deep);font-variant-numeric:tabular-nums}
.delivlink{margin-left:auto;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;color:var(--c-brand);
  display:inline-flex;align-items:center;gap:.3rem;transition:gap var(--d-1) var(--ease)}
.delivlink:hover{gap:.55rem}
@media (max-width:760px){.delivbar .wrap{gap:.4rem .9rem}.delivlink{display:none}
  .delivbar .wrap{padding-block:.4rem}}

/* ── belanja per budget ───────────────────────────────────────── */
.budget{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.budget a{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-4);display:grid;grid-template-columns:52px minmax(0,1fr);gap:.15rem var(--s-3);
  align-items:center;
  transition:border-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.budget a:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.budget .bph{grid-row:span 2;width:52px;height:52px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--c-bg-2);display:block}
.budget .bph img{width:100%;height:100%;object-fit:cover}
.budget .amt{grid-column:2;font-family:var(--f-ui);font-size:var(--t-lg);font-weight:700;
  color:var(--c-brand-deep);font-variant-numeric:tabular-nums;line-height:1.2}
.budget .lbl{grid-column:2}
.budget .sub,.budget .bar{grid-column:1/-1}
.budget .lbl{font-size:var(--t-md);color:var(--c-ink-2);font-weight:600}
.budget .sub{font-size:var(--t-sm);color:var(--c-muted);margin-top:.5rem}
.budget .sub b{color:var(--c-ink-2);font-weight:600}
.budget .bar{height:4px;border-radius:var(--r-pill);background:var(--c-bg-3);margin-top:.5rem;overflow:hidden}
.budget .bar i{display:block;height:100%;background:var(--c-brand);border-radius:var(--r-pill)}
@media (max-width:820px){.budget{grid-template-columns:1fr 1fr}}

/* ── korporat ─────────────────────────────────────────────────── */
.corp{background:var(--c-bg-2)}
.corp-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:center}
.corp h2{font-size:var(--t-h2);margin-bottom:.3rem}
.corp > .wrap > .corp-grid p.lead{font-size:var(--t-md);color:var(--c-muted);max-width:46ch}
.corp-pts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin:var(--s-5) 0}
.corp-pts li{display:flex;gap:.55rem;align-items:flex-start}
.corp-pts .icon{color:var(--c-brand);width:18px;height:18px;margin-top:2px}
.corp-pts b{display:block;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600}
.corp-pts span{display:block;font-size:var(--t-sm);color:var(--c-muted);line-height:1.45}
.corp-acts{display:flex;gap:.6rem;flex-wrap:wrap}
.corp-side{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);padding:var(--s-5)}
.corp-side h3{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;color:var(--c-muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s-4)}
.corp-logos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.corp-logos span{border:1px solid var(--c-line);border-radius:var(--r-sm);padding:.55rem .5rem;
  display:grid;place-items:center;min-height:56px;background:var(--c-surface)}
.corp-logos img{max-width:100%;height:auto;max-height:34px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter var(--d-2) var(--ease),opacity var(--d-2) var(--ease)}
.corp-logos span:hover img{filter:none;opacity:1}
.corp-note{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--c-muted);text-align:center}
@media (max-width:900px){.corp-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}}
@media (max-width:520px){.corp-pts{grid-template-columns:minmax(0,1fr)}}

/* ── garansi ──────────────────────────────────────────────────── */
.warranty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.warranty li{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-4);display:flex;gap:.7rem;align-items:flex-start}
.warranty .icon{color:var(--c-ok);width:22px;height:22px;flex:none}
.warranty b{display:block;font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;margin-bottom:.1rem}
.warranty span{display:block;font-size:var(--t-sm);color:var(--c-muted);line-height:1.5}
@media (max-width:820px){.warranty{grid-template-columns:minmax(0,1fr)}}

/* ── panduan & artikel ────────────────────────────────────────── */
.guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.guides > a{display:block;height:100%}
.guides article{height:100%;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.guides article:hover{border-color:var(--c-brand-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.guides .thumb{aspect-ratio:16/10;background:var(--c-bg-2);overflow:hidden}
.guides .thumb img{width:100%;height:100%;object-fit:cover}
.guides .body{padding:.7rem .8rem .9rem;display:flex;flex-direction:column;flex:1}
.guides .tag{font-family:var(--f-ui);font-size:var(--t-xs);font-weight:600;color:var(--c-brand)}
.guides h3{font-family:var(--f-body);font-size:var(--t-md);font-weight:600;line-height:1.4;margin:.2rem 0 .3rem}
.guides p{font-size:var(--t-sm);color:var(--c-muted);line-height:1.5;margin-top:auto}
@media (max-width:900px){.guides{grid-template-columns:1fr 1fr}}

/* ── rating pada kartu produk ─────────────────────────────────── */
.pr .rate{display:flex;align-items:center;gap:.25rem;font-size:var(--t-xs);color:var(--c-muted);margin-bottom:.4rem}
.pr .rate svg{width:12px;height:12px;fill:var(--c-star);flex:none}
.pr .rate b{font-family:var(--f-ui);font-weight:700;color:var(--c-ink-2)}

/* ── tombol WhatsApp melayang ─────────────────────────────────── */
.wafloat{position:fixed;right:var(--gutter);bottom:calc(var(--s-6) + env(safe-area-inset-bottom,0px));z-index:var(--z-drawer);
  display:inline-flex;align-items:center;gap:.5rem;background:#128C7E;color:#fff;
  font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;padding:.75rem 1.1rem;
  border-radius:var(--r-pill);box-shadow:var(--sh-3);transition:background var(--d-1) var(--ease)}
.wafloat:hover{background:#0E7566}
@media (max-width:720px){.wafloat{bottom:calc(72px + env(safe-area-inset-bottom,0px));padding:.7rem .85rem}
  .wafloat span{display:none}}

/* ══════════ SISTEM MOBILE — semua nilai kelipatan 4, gap & rasio seragam ══════════ */
@media (max-width:640px){
  :root{
    --gutter:16px;          /* dulu 13.6px */
    --s-sec:20px;           /* setengah jarak antar-seksi */
    --gap:12px;             /* satu nilai gap untuk semua grid */
  }
  /* satu gap untuk seluruh grid */
  .momen,.cats,.rail,.rail--4,.proof,.guides,.budget,.paygrid,.promo,.promo-side{gap:var(--gap)}
  .index{gap:24px 16px}

  /* dua rasio saja: 1:1 untuk thumb produk, 3:2 untuk media lebar */
  .slide img,.guides .thumb{aspect-ratio:3/2}
  .pr .thumb,.cats .thumb,.proof .thumb{aspect-ratio:1/1}

  /* padding kartu — bulat */
  .pr .body{padding:12px}
  .momen a{padding:10px}
  .momen .thumb{width:44px;height:44px}
  .cats b{padding:10px 10px 0}
  .cats span{padding:0 10px 12px}
  .proof figcaption{padding:10px 12px 12px}
  .rev,.paygrid > div,.budget a{padding:16px}
  .pcard .cap{padding:12px}
  .pcard .ph{width:88px;height:88px}
  .slide .promo-copy{padding:16px 16px 32px}
  .strip{padding:16px}
  .season .in{padding:16px}

  /* banner musiman ikut pola banner utama: foto di atas, teks di bawah */
  .season{display:grid;grid-template-rows:auto auto;min-height:0;border:1px solid var(--c-line)}
  .season img{position:static;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  .season::after{display:none}
  .season .in{max-width:none;color:var(--c-ink);background:var(--c-surface)}
  .season h2{color:var(--c-ink)}
  .season p{color:var(--c-ink-2)}
  .season .kick{background:var(--c-brand-soft);color:var(--c-brand-deep)}

  /* kepala section — menumpuk, jarak bulat */
  .shead{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:16px}
  .shead .seeall{padding:0}
  .flash .shead{align-items:flex-start}
  .btn-row{margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
}

/* ══════════════════════════════════════════════════════════════
   HALAMAN KATEGORI / MOMEN  (template [segment])
   ══════════════════════════════════════════════════════════════ */

/* ── breadcrumb ─────────────────────────────────────────────── */
.crumb{background:var(--c-bg-2);border-bottom:1px solid var(--c-line)}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;padding-block:.6rem;
  font-size:var(--t-sm);color:var(--c-muted)}
.crumb li{display:flex;align-items:center;gap:.4rem}
.crumb a:hover{color:var(--c-brand)}
.crumb [aria-current]{color:var(--c-ink);font-weight:600}
.crumb .sep{opacity:.5}

/* ── banner momen: strip ramping, produk sebagai visual ────────
   Ini halaman daftar produk, bukan halaman brand — banner cuma
   penunjuk arah. Target: <=200px desktop, <=240px HP.            */
.chero{position:relative;border-bottom:1px solid var(--c-line);
  background:linear-gradient(100deg,#F6F3EF 0%,#FBF9F7 38%,#F4EFF2 100%)}
.chero > .wrap{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);
  align-items:center;padding-block:.55rem .8rem}
.crumb-in{grid-column:1/-1}
.crumb-in ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  font-size:var(--t-sm);color:var(--c-muted);margin-bottom:.15rem}
.crumb-in li{display:flex;align-items:center;gap:.35rem}
.crumb-in a:hover{color:var(--c-brand)}
.crumb-in [aria-current]{color:var(--c-ink);font-weight:600}
.crumb-in .sep{opacity:.5}

/* tipografi banner — hierarki tegas, satu titik fokus, banyak napas */
.chero-head{max-width:min(52ch,100%)}
.chero h1{font-family:var(--f-ui);font-size:clamp(1.75rem,3.2vw,2.6rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;color:var(--c-ink);margin:0;text-wrap:balance}
.chero .rule{display:block;width:40px;height:3px;border-radius:2px;background:var(--c-brand);
  margin:.85rem 0 .7rem}
.chero .facts{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .5rem;
  font-family:var(--f-ui);font-size:var(--t-base);color:var(--c-muted);letter-spacing:.01em}
.chero .facts .dot:last-child{display:none}
.chero .facts .f{white-space:nowrap}
.chero .facts b{color:var(--c-ink);font-weight:600;font-variant-numeric:tabular-nums}
.chero .facts .dot{opacity:.4}
.chero .facts .hi{color:var(--c-brand-deep);font-weight:700;font-variant-numeric:tabular-nums}
.chero .kicker-sm{display:block;font-family:var(--f-ui);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-brand);margin-bottom:.5rem}

/* deret produk kecil di kanan — visual banner = produknya sendiri */
.showcase{display:flex;gap:.55rem;align-items:center}
.sc{position:relative;display:block;width:clamp(84px,9vw,116px);border-radius:var(--r);
  background:var(--c-surface);border:1px solid var(--c-line);overflow:hidden;text-decoration:none;
  box-shadow:0 8px 20px -12px rgba(20,20,25,.3);
  transition:transform var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.sc:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(20,20,25,.4)}
.sc .ph{display:block;aspect-ratio:1/1;background:var(--c-surface);overflow:hidden}
.sc .ph img{width:100%;height:100%;object-fit:contain;padding:6%}
.sc .cap{display:block;padding:.3rem .4rem .4rem;border-top:1px solid var(--c-line);text-align:center}
.sc .cap b{display:none}
.sc .cap span{display:block;font-family:var(--f-ui);font-size:var(--t-xs);font-weight:700;
  color:var(--c-brand-deep);font-variant-numeric:tabular-nums}
.sc-tag{display:none}

@media (max-width:900px){
  .chero > .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-3)}
  .showcase{justify-content:flex-start}
  .sc{width:clamp(76px,22vw,100px)}
}
@media (max-width:640px){
  .crumb-in ol{margin-bottom:6px}
  .chero .rule{margin:12px 0 10px}
}

/* banner dengan foto (halaman belanja) — tetap ramping */
.chero--photo{isolation:isolate;overflow:hidden}
.chero--photo .chero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.chero--photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 40%,rgba(255,255,255,.66) 62%,rgba(255,255,255,.22) 84%,rgba(255,255,255,.05) 100%)}
@media (max-width:900px){
  .chero--photo::after{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.93) 45%,rgba(255,255,255,.97) 100%)}
}

/* banner "panggung produk" — produk asli tanpa latar, dengan bayangan nyata */
.chero--stage{position:relative;overflow:hidden;
  background:
    radial-gradient(52% 120% at 78% 58%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(104deg,#F7F1EC 0%,#F6EDF0 52%,#F1E4EA 100%)}
.chero--stage::before{content:"";position:absolute;right:-6%;top:-40%;width:52%;height:190%;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 68%);
  pointer-events:none}
.stage{position:relative;height:clamp(140px,13.5vw,172px);width:clamp(300px,33vw,440px);
  display:flex;align-items:flex-end;justify-content:flex-end;gap:0}
.stage img{display:block;width:auto;object-fit:contain;
  filter:drop-shadow(0 16px 18px rgba(74,26,52,.22));
  transition:transform var(--d-2) var(--ease)}
.stage:hover img{transform:translateY(-3px)}
.stage .p1{height:100%;z-index:3;position:relative}
.stage .p2{height:84%;z-index:2;margin-left:-6%;margin-bottom:2%}
.stage .p3{height:68%;z-index:1;margin-left:-7%;margin-bottom:1%}
@media (max-width:900px){
  .stage{width:100%;height:clamp(130px,32vw,170px);justify-content:center}
}
@media (max-width:480px){.stage .p3{display:none}}

/* ── bar filter + sort ──────────────────────────────────────── */
.filterbar{position:sticky;top:var(--mast-h,64px);z-index:30;background:var(--c-surface);
  border-bottom:1px solid var(--c-line);box-shadow:var(--sh-1)}
.fbar{display:flex;align-items:center;gap:var(--s-3);padding-block:.6rem;flex-wrap:wrap}
.fbar .grp{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fbar .lbl{font-family:var(--f-ui);font-size:var(--t-sm);font-weight:600;color:var(--c-muted);white-space:nowrap}
.fchip{font-family:var(--f-ui);font-size:var(--t-base);font-weight:500;padding:.35rem .75rem;
  border:1px solid var(--c-line-2);border-radius:var(--r-pill);color:var(--c-ink-2);background:var(--c-surface);
  transition:all var(--d-1) var(--ease);white-space:nowrap;cursor:pointer}
.fchip:hover{border-color:var(--c-brand);color:var(--c-brand);background:var(--c-brand-soft)}
.fchip[aria-pressed="true"]{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.fchip i{font-style:normal;font-weight:600;opacity:.55;margin-left:.15rem}
.fchip[aria-pressed="true"] i{opacity:.75}
.fbar .right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.fbar select{font-family:var(--f-ui);font-size:var(--t-base);padding:.4rem 1.9rem .4rem .7rem;
  border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:var(--c-surface);color:var(--c-ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7078' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:14px}
.fbar select:focus-visible{border-color:var(--c-brand)}
.fcount{font-size:var(--t-sm);color:var(--c-muted);white-space:nowrap}
.fdrawer{display:none}
@media (max-width:820px){
  .fbar .grp{display:none}
  .fdrawer{display:inline-flex;align-items:center;gap:.4rem}
  .fbar .right{margin-left:auto}
}

/* ── grid produk halaman kategori ───────────────────────────── */
.plp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
@media (max-width:720px){.plp{grid-template-columns:1fr 1fr}}
.loadmore{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:var(--s-6)}
.loadmore .meter{width:min(220px,60vw);height:4px;border-radius:var(--r-pill);background:var(--c-bg-3);overflow:hidden}
.loadmore .meter i{display:block;height:100%;background:var(--c-brand);border-radius:var(--r-pill)}
.loadmore small{font-size:var(--t-sm);color:var(--c-muted)}

/* ── konten SEO ─────────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{font-size:var(--t-xl);margin-top:var(--s-6)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-lg);margin-top:var(--s-4)}
.prose p{margin-top:.6rem;color:var(--c-ink-2)}
.prose ul{margin-top:.6rem;display:grid;gap:.35rem}
.prose li{position:relative;padding-left:1.1rem;color:var(--c-ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:var(--r-pill);background:var(--c-brand)}
.prose a{color:var(--c-brand);border-bottom:1px solid var(--c-brand-line)}
.prose a:hover{border-color:var(--c-brand)}

/* ── jelajah terkait ────────────────────────────────────────── */
.explore{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);grid-auto-rows:1fr}
.explore h3{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;margin-bottom:.6rem}
.explore .links{display:flex;flex-wrap:wrap;gap:.4rem}
.explore .links a{font-size:var(--t-base);padding:.3rem .7rem;border:1px solid var(--c-line);
  border-radius:var(--r-pill);color:var(--c-ink-2);background:var(--c-surface);transition:all var(--d-1) var(--ease)}
.explore .links a:hover{border-color:var(--c-brand);color:var(--c-brand)}
@media (max-width:820px){.explore{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}}

@media (max-width:640px){
  .chero .wrap{padding-block:24px}
  .fbar{padding-block:8px;gap:8px}
  .plp{gap:12px}
  .prose h2{margin-top:24px}
  .explore{gap:20px}
}

/* ── halaman belanja: grid 4 kolom + empty state ─────────────── */
.plp--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.plp--4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.plp--4{grid-template-columns:1fr 1fr}}
.empty{text-align:center;padding:var(--s-12) var(--s-4);border:1px dashed var(--c-line-2);
  border-radius:var(--r);background:var(--c-bg-2)}
.empty p{color:var(--c-muted);max-width:44ch;margin-inline:auto}
.empty p b{color:var(--c-ink);display:block;font-family:var(--f-ui);font-size:var(--t-lg);margin-bottom:.3rem}
.empty .acts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:var(--s-5)}
@media (max-width:820px){
  .filterbar.open .grp{display:flex;width:100%}
  .filterbar.open .fbar{flex-direction:column;align-items:flex-start;padding-bottom:12px}
  .filterbar.open .right{margin-left:0;width:100%}
}

/* ══ Halaman kategori duka cita: pita urgensi + blok tulisan pita ══ */
.urgen{background:#FFF6F6;border-bottom:1px solid #F3D6D6}
.urgen .wrap{display:flex;align-items:center;gap:var(--s-3) var(--s-5);flex-wrap:wrap;padding-block:.6rem}
.urgen p{margin:0;font-size:var(--t-md);color:var(--c-ink-2);display:flex;align-items:center;gap:.4rem}
.urgen .u1 b{color:var(--c-ink);font-weight:700}
.urgen .u1 svg{width:15px;height:15px;stroke:var(--c-ok);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.urgen .u2{font-family:var(--f-ui);color:var(--c-sale);font-weight:600}
.urgen .u2 b{font-variant-numeric:tabular-nums}
.urgen .u3{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--f-ui);
  font-size:var(--t-md);font-weight:700;color:var(--c-brand);transition:gap var(--d-1) var(--ease)}
.urgen .u3:hover{gap:.6rem}
@media (max-width:760px){.urgen .u3{margin-left:0;flex-basis:100%}}

.pita{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);grid-auto-rows:1fr}
.pita article{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);
  padding:var(--s-4);border-left:3px solid var(--c-brand-line)}
.pita h3{font-family:var(--f-ui);font-size:var(--t-md);font-weight:700;color:var(--c-brand-deep);margin-bottom:.5rem}
.pita p{font-size:var(--t-md);color:var(--c-ink-2);line-height:1.7}
.pita i{font-style:normal;color:var(--c-muted)}
.pita-note{margin-top:var(--s-4);font-size:var(--t-md);color:var(--c-muted);text-align:center}
@media (max-width:1000px){.pita{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pita{grid-template-columns:minmax(0,1fr)}}

/* ══════════ RAMAH SENTUH — semua sasaran ≥44px di layar sentuh ══════════ */
@media (max-width:900px){
  /* ikon header */
  .mast-icons a,.mast-icons button{min-width:44px;min-height:44px;
    align-items:center;justify-content:center}
  .brand{display:inline-flex;align-items:center;min-height:44px}
  /* pencarian */
  .search input{min-height:44px}
  .search .go{width:44px;height:44px}
  /* pemilih kota */
  .citypick > summary{min-height:44px}
  .citymenu input{min-height:44px}
  .citymenu button{min-height:44px;display:flex;align-items:center}
  /* chip filter & kategori */
  .fchip{min-height:44px;display:inline-flex;align-items:center}
  .fbar select{min-height:44px}
  .chips a{min-height:44px;display:inline-flex;align-items:center}
  /* tautan padat */
  .cities a{min-height:40px;display:inline-flex;align-items:center}
  .foot li a,.foot li{min-height:36px;display:flex;align-items:center}
  .seeall,.txtlink,.delivlink{min-height:44px;align-items:center}
  .topbar li a{min-height:36px;display:inline-flex;align-items:center}
  /* jarak antar sasaran ≥8px */
  .cities{gap:8px}
  .chips{gap:8px}
}

/* pita urgensi dirapatkan di HP — 2 baris, bukan 4 */
@media (max-width:760px){
  .urgen .wrap{gap:.25rem .8rem;padding-block:.5rem}
  .urgen p{font-size:var(--t-base);line-height:1.45}
  .urgen .u1{flex-wrap:wrap}
  .urgen .u1 .sisa{display:none}
  .urgen .u3{display:none}
}

/* sasaran sentuh yang masih kurang */
@media (max-width:900px){
  .mast-act .iconbtn{min-width:44px;min-height:44px;justify-content:center}
  .pr .buy{min-height:44px}
  .cities a{min-height:44px}
  .btn,.btn--sm{min-height:44px}
  .mega a{min-height:44px;display:flex;align-items:center}
  .foot li a{min-height:44px}
  .wafloat{min-height:48px}
  .loadmore .btn{min-height:44px}
}

/* ══ Strip USP ramping di bawah banner ══ */
.usp-bar{background:var(--c-brand-soft);border-bottom:1px solid var(--c-brand-line)}
.usp-bar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.usp-bar li{display:flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.7rem .75rem;min-height:48px;border-left:1px solid var(--c-brand-line)}
.usp-bar li:first-child{border-left:0}
.usp-bar svg{width:16px;height:16px;flex:none;stroke:var(--c-brand);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.usp-bar span{font-family:var(--f-ui);font-size:var(--t-md);font-weight:600;color:var(--c-ink);
  line-height:1.25}
@media (max-width:900px){
  .usp-bar ul{grid-template-columns:1fr 1fr}
  .usp-bar li{justify-content:flex-start;align-items:flex-start;padding:.6rem .4rem;min-height:52px}
  /* label bisa jadi 2 baris di layar sempit — ikon disejajarkan ke baris pertama,
     bukan melayang di tengah blok teks */
  .usp-bar svg{margin-top:1px}
  .usp-bar li:nth-child(odd){border-left:0}
  .usp-bar li:nth-child(n+3){border-top:1px solid var(--c-brand-line)}
  .usp-bar span{font-size:var(--t-base)}
  .usp-bar svg{width:15px;height:15px}
}
@media (max-width:400px){
  .usp-bar span{font-size:var(--t-sm)}
  .usp-bar svg{width:14px;height:14px}
  .usp-bar li{gap:.4rem;padding:.55rem .6rem}
}