/* =========================================================================
   site.css — SUMBER TUNGGAL desain Weimar Official ("Heritage Refined").

   Menggantikan blok <style> yang sebelumnya diduplikasi manual di
   index.html, shop-source.html, product.html, 404.html, checkout.html,
   dan order.html. Ubah di sini sekali, berlaku di semua halaman.

   Prinsip arah ini:
   - Amber brand dipertahankan, tapi saturasinya diturunkan (#f0921e -> #A55A14)
     dan dipakai HEMAT: hanya CTA, eyebrow, angka, dan ikon.
   - Cream sebagai kanvas; whitespace digandakan dari versi lama.
   - Sudut membulat (kartu 14px, tombol pil) — hangat, bukan kaku.
   - Ikon selalu SVG (sprite #i-* di tiap halaman), tidak pernah emoji.

   Tautan di HTML memakai /css/site.css?v=N. Penanda versi itu WAJIB dinaikkan
   setiap file ini berubah — kalau tidak, browser (dan edge cache Vercel) bisa
   menyajikan CSS lama setelah deploy.
   ========================================================================= */

:root{
  /* --- kanvas & tinta --- */
  --bg:#FDFBF7;
  --surface:#FFFFFF;
  --surface-2:#F7F1E8;
  --shot-bg:#FAF6EF;          /* latar packshot, sama dengan file gambarnya */
  --ink:#26180D;
  --muted:#7A6A5C;            /* 5,02:1 di atas --bg */
  --line:#EBE2D6;
  --line-strong:#D9CBB8;

  /* --- aksen --- */
  --accent:#A55A14;           /* amber diturunkan. Lolos AA di KETIGA latar yang
                                 dipakai: 4,99:1 di --bg, 5,16:1 di --surface,
                                 4,59:1 di --surface-2 (band cream), dan 5,16:1
                                 untuk teks putih di atasnya. Jangan diterangkan:
                                 #B4661A cuma 4,18:1 dan #A85C15 gagal di band
                                 cream (4,45:1). */
  --accent-hover:#8A4A10;
  --on-accent:#FFFFFF;
  --gold-dark:#E0A05A;        /* amber terang untuk di atas latar tinta */
  --green:#1F6F4A;            /* WhatsApp */
  --green-hover:#175639;
  --danger:#B3261E;

  /* --- footer & blok tinta --- */
  --footer-bg:#26180D;
  --footer-ink:#EDE3D5;
  --footer-muted:#9C8B79;
  --footer-accent:#E0A05A;

  /* --- alias nama lama ---
     cart-drawer.js menulis CSS-nya sendiri dengan fallback var(--paper,…),
     var(--line,…), var(--cocoa,…). Dipetakan ke palet baru supaya drawer
     ikut berubah tanpa perlu menyentuh JS-nya. */
  --paper:var(--surface);
  --cream:var(--surface-2);
  --cream-2:var(--surface-2);
  --cocoa-ink:var(--ink);
  --cocoa:var(--muted);
  --amber:var(--accent);
  --amber-deep:var(--accent-hover);

  /* --- tipografi --- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display-weight:600;

  /* --- ritme --- */
  --space-3:12px; --space-4:20px; --space-5:28px; --space-6:40px; --space-7:56px;
  --space-section:clamp(64px,8vw,112px);
  --radius:14px;
  --radius-btn:999px;
  --maxw:1180px;
}

/* ====================== dasar ====================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* nav lengket setinggi 74px menutupi awal seksi saat tautan jangkar
     (#produk, #grosir, #korporat, #tentang, #kontak) diklik. Tanpa ini
     75px teratas tiap seksi tersembunyi di balik nav. */
  scroll-padding-top:90px}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
svg{flex:none}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* teks bantu pembaca layar — tidak pernah tampil secara visual */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* Hampers dkk default TERSEMBUNYI. /season.js yang menambahkan .lebaran-mode
   ke <body> saat musimnya tiba. Polaritas ini disengaja: halaman statis,
   jadi crawler tidak pernah mengindeks konten Lebaran di luar musim. */
body:not(.lebaran-mode) [data-seasonal]{display:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:40px}}
section{padding-block:var(--space-section)}

/* ====================== tipografi ====================== */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);
  line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.08}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
.lead{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--muted);max-width:56ch;line-height:1.7}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--space-3)}
.sechead{max-width:60ch;margin-bottom:var(--space-7)}
.sechead p{color:var(--muted);margin-top:var(--space-3)}
.muted{color:var(--muted)}

/* ====================== tombol ====================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:0 1.6rem;cursor:pointer;border-radius:var(--radius-btn);
  font-size:.95rem;font-weight:600;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline,.btn-ghost{border:1.5px solid var(--line-strong);color:var(--ink)}
.btn-outline:hover,.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
.btn-wa{background:var(--green);color:#fff}
.btn-wa:hover{background:var(--green-hover)}
.btn-lg{min-height:54px;padding:0 2rem;font-size:1rem}
.btn-sm{min-height:42px;padding:0 1.2rem;font-size:.86rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:var(--accent);transform:none}

.link-arrow{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  color:var(--accent);font-size:.92rem;font-weight:600}
.link-arrow svg{width:16px;height:16px;transition:transform .22s ease}
.link-arrow:hover svg{transform:translateX(4px)}

.ctarow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:var(--space-6)}

/* ====================== topbar ====================== */
.topbar{background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:.8rem;color:var(--muted)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:40px}
.topbar .loc{display:inline-flex;align-items:center;gap:.4rem}
.topbar svg{width:14px;height:14px;color:var(--accent)}
.topbar .soc{display:none;gap:1.2rem}
@media(min-width:900px){.topbar .soc{display:flex}}
.topbar a{min-height:40px;display:inline-flex;align-items:center}
.topbar a:hover{color:var(--ink)}
.topbar .hide-s{display:none}
@media(min-width:600px){.topbar .hide-s{display:inline}}

/* ====================== navigasi (browse tier) ======================
   Markup header identik di index, /shop, /p/:slug, /grosir/*, dan 404
   supaya /nav.js bisa dipakai kelimanya tanpa cabang kondisi.
   checkout & order sengaja tidak ikut: tier transaksi, header cuma logo. */
.nav{position:sticky;top:0;z-index:50;background:rgba(253,251,247,.90);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:74px}
.brandmark,.logo{display:flex;align-items:center;gap:10px;
  min-height:44px}
.brandmark img,.logo-img{height:34px;width:auto}
.brandmark .lockup{display:none;padding-left:10px;border-left:1px solid var(--line-strong);
  font-family:var(--font-body);font-size:.62rem;font-weight:700;letter-spacing:.07em;
  color:var(--accent);white-space:nowrap;line-height:1}
@media(min-width:680px){.brandmark .lockup{display:block}}

.navlinks{display:none;gap:1.9rem;font-size:.92rem;font-weight:500}
@media(min-width:1000px){.navlinks{display:flex}}
.navlinks a{position:relative;min-height:44px;display:inline-flex;align-items:center}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlinks a:hover::after{transform:scaleX(1)}

.nav-actions{display:flex;align-items:center;gap:.5rem}
.cart-btn-i{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;border-radius:999px}
.cart-btn-i svg{width:21px;height:21px}
.cart-btn-i:hover{background:var(--surface-2)}
.cart-btn-i .count{position:absolute;top:6px;right:5px;min-width:18px;height:18px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.66rem;font-weight:700;
  display:grid;place-items:center;padding:0 5px}
.nav .cta-desk{display:none}
@media(min-width:640px){.nav .cta-desk{display:inline-flex}}

.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;border:1.5px solid var(--line-strong);
  border-radius:12px;cursor:pointer}
@media(min-width:1000px){.nav-burger{display:none}}
.nav-burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-menu.open{display:block}
.mobile-menu .wrap>a,.mobile-menu>a{display:block;padding:15px 0;
  border-bottom:1px solid var(--line);font-size:1rem;font-weight:600}
.mobile-menu>a{padding-inline:20px}
@media(min-width:768px){.mobile-menu>a{padding-inline:40px}}
.mobile-menu a:hover{color:var(--accent)}

/* ====================== banner musiman ====================== */
.seasonal-banner{background:linear-gradient(90deg,var(--accent-hover),var(--accent));
  color:#fff;text-align:center;font-size:.86rem;font-weight:600;padding-block:11px}
.seasonal-banner a{text-decoration:underline;text-underline-offset:3px}

/* ====================== hero (beranda) ====================== */
.hero{background:linear-gradient(180deg,var(--surface-2),var(--bg) 70%);
  padding-block:clamp(48px,7vw,92px) clamp(48px,6vw,80px)}
.hero .wrap{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.hero .since{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--space-4)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:var(--space-6);align-items:center}
.hero-figure{position:relative;border-radius:20px;overflow:hidden;background:var(--shot-bg);
  aspect-ratio:4/5;max-height:580px}
.hero-figure img{width:100%;height:100%;object-fit:cover}
/* stempel tagline — dibaca seperti segel pada kemasan */
.hero-stamp{position:absolute;top:16px;right:16px;z-index:2;
  background:rgba(253,251,247,.93);backdrop-filter:blur(6px);
  border:1px solid rgba(165,90,20,.40);border-radius:999px;padding:8px 15px;
  font-family:var(--font-display);font-weight:var(--display-weight);color:var(--accent);
  font-size:.8rem;letter-spacing:.01em;line-height:1}
.hero-badge{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;
  background:rgba(253,251,247,.94);backdrop-filter:blur(6px);border-radius:14px;
  padding:16px 18px;display:flex;gap:18px;align-items:center}
.hero-badge .n{font-family:var(--font-display);font-size:1.7rem;line-height:1;color:var(--accent)}
.hero-badge p{font-size:.84rem;color:var(--muted);line-height:1.45}
.hero-meta{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:var(--space-6);
  padding-top:var(--space-5);border-top:1px solid var(--line)}
.hero-meta .n{font-family:var(--font-display);font-size:1.8rem;line-height:1;color:var(--accent)}
.hero-meta .l{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.4rem}

/* ====================== strip kredensial ====================== */
.credband{background:var(--surface-2);border-block:1px solid var(--line);padding-block:var(--space-6)}
.creds{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cred{display:flex;gap:.8rem;align-items:flex-start}
.cred svg{width:22px;height:22px;color:var(--accent);margin-top:2px}
.cred b{display:block;font-size:.94rem;font-weight:600}
.cred span span{display:block;font-size:.84rem;color:var(--muted);line-height:1.5;margin-top:2px}

/* ====================== dua jalur (retail vs grosir) ====================== */
.paths{display:grid;gap:var(--space-5)}
@media(min-width:880px){.paths{grid-template-columns:1fr 1fr}}
.path{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:var(--space-3);
  transition:border-color .22s ease}
.path:hover{border-color:var(--line-strong)}
.path.feature{background:var(--ink);color:#F4EADC;border-color:var(--ink)}
.path.feature p{color:#BCAA97}
.path.feature .eyebrow{color:var(--gold-dark)}
.path.feature h3{color:#FBF6EE}
.path .ic{width:46px;height:46px;border-radius:12px;background:var(--surface-2);
  color:var(--accent);display:grid;place-items:center;margin-bottom:var(--space-3)}
.path.feature .ic{background:rgba(255,255,255,.08);color:var(--gold-dark)}
.path .ic svg{width:23px;height:23px}
.path h3{font-size:1.4rem}
.path p{color:var(--muted)}
.path .facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:var(--space-4);
  padding-top:var(--space-4);border-top:1px solid var(--line)}
.path.feature .facts{border-color:rgba(255,255,255,.14)}
.path .facts .n{font-family:var(--font-display);font-size:1.35rem;line-height:1.1;color:var(--accent)}
.path.feature .facts .n{color:var(--gold-dark)}
.path .facts .l{font-size:.76rem;color:var(--muted);margin-top:.2rem}
.path.feature .facts .l{color:#BCAA97}
.path .act{margin-top:var(--space-5)}

/* ====================== kartu produk ======================
   Dua bentuk gambar yang harus dilayani:
   .shot img  -> packshot lokal (beranda)
   .ph        -> div background-image hasil SSR api/shop.js
   Keduanya dijaga rasio 1:1 supaya tidak ada layout shift. */
.pgrid,.prod-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(2,1fr)}
@media(min-width:1024px){.pgrid,.prod-grid{grid-template-columns:repeat(4,1fr)}}
.pcard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .22s ease,transform .22s ease}
.pcard:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.pcard .shot,.pcard .ph{aspect-ratio:1/1;background:var(--shot-bg);overflow:hidden}
.pcard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.pcard:hover .shot img{transform:scale(1.04)}
.pcard .ph-link{display:block}
.pcard .body,.pcard .meta{padding:var(--space-4);display:flex;flex-direction:column;
  gap:.35rem;flex:1}
.pcard h3{font-size:1.05rem;font-weight:var(--display-weight);line-height:1.3;
  margin-bottom:var(--space-3);
  /* nama produk dari Scalev panjang (gaya SEO); tanpa batas ini judul bisa
     6 baris di ponsel dan bikin grid ragged. Teks utuh tetap ada di DOM —
     pemotongan hanya visual, pembaca layar tetap membacanya penuh. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  line-clamp:3;overflow:hidden}
.pcard h3 a:hover{color:var(--accent)}
.pcard .brandline{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pcard .foot,.pcard .row{margin-top:auto;padding-top:var(--space-3);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.pcard .price{font-family:var(--font-display);font-size:1.1rem;font-weight:var(--display-weight)}
.pcard .unit{font-size:.78rem;color:var(--muted)}
.state{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--muted)}
/* tautan di dalam keadaan kosong (mis. "Kembali belanja" di ringkasan
   checkout) ikut aturan target sentuh 44px */
.state a{display:inline-block;padding-block:12px;color:var(--accent);font-weight:600}
.state.error{color:var(--danger)}
.state.error small{display:block;margin-top:8px;color:var(--muted);font-size:.8rem}

/* ====================== band grosir ====================== */
.grosir{background:var(--surface-2);border-block:1px solid var(--line)}
.grosir .wrap{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
@media(min-width:920px){.grosir .wrap{grid-template-columns:1.1fr .9fr}}
.pricetable{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow-x:auto}
/* di layar sempit tabel menggulir di dalam kartunya sendiri, bukan
   mendorong lebar halaman (kejadian di 320px) */
@media(max-width:420px){
  .pricetable th,.pricetable td{padding:12px 13px;font-size:.84rem}
}
.pricetable table{font-size:.9rem}
.pricetable th,.pricetable td{padding:13px 20px;text-align:left;border-bottom:1px solid var(--line)}
.pricetable th{font-size:.75rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.pricetable td:last-child,.pricetable th:last-child{text-align:right}
.pricetable tr:last-child td{border-bottom:0}
.pricetable .m{font-family:var(--font-display);color:var(--accent);font-weight:var(--display-weight)}
.pricetable td{font-variant-numeric:tabular-nums}

.statrow{display:grid;gap:var(--space-6) var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:var(--space-6)}
.stat .n{font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--accent);white-space:nowrap}
.stat .l{font-size:.8rem;color:var(--muted);margin-top:.4rem;line-height:1.4}

/* ====================== linimasa & brand ====================== */
.timeline{display:grid;gap:var(--space-5)}
@media(min-width:800px){.timeline{grid-template-columns:repeat(3,1fr)}}
.tl{padding-top:var(--space-4);border-top:2px solid var(--accent)}
.tl .y{font-family:var(--font-display);font-size:1.6rem;color:var(--accent);line-height:1}
.tl h3{font-size:1.08rem;margin:.6rem 0 .4rem}
.tl p{font-size:.9rem;color:var(--muted)}

.brandrow{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  align-items:center}
.brandchip{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  height:92px;display:grid;place-items:center;padding:18px}
.brandchip img{max-height:42px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;
  transition:filter .3s ease,opacity .3s ease}
.brandchip:hover img{filter:none;opacity:1}

/* ====================== marketplace ====================== */
.mprow{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mp{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;min-height:88px;display:flex;flex-direction:column;justify-content:center;
  gap:.15rem;transition:border-color .22s ease,transform .22s ease}
.mp:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.mp b{font-weight:600;font-size:.98rem}
.mp small{font-size:.8rem;color:var(--muted)}

/* ====================== kepala halaman (katalog, grosir) ====================== */
.head{background:var(--surface-2);border-bottom:1px solid var(--line);
  padding-block:clamp(44px,6vw,72px)}
.head h1{font-size:clamp(1.9rem,4.4vw,3rem);margin-top:var(--space-3)}
.head p{color:var(--muted);max-width:60ch;margin-top:var(--space-4)}

/* ====================== halaman produk (PDP) ====================== */
.crumb{font-size:.82rem;color:var(--muted);padding-block:var(--space-5) 0}
.crumb a{display:inline-block;padding-block:12px}
.crumb a:hover{color:var(--accent)}
.pdp{display:grid;gap:clamp(32px,5vw,56px);padding-block:var(--space-6) var(--space-section)}
@media(min-width:900px){.pdp{grid-template-columns:1fr 1fr;align-items:start}}
.gallery{display:flex;flex-direction:column;gap:12px}
.gal-main{aspect-ratio:1/1;background:var(--shot-bg);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.gal-thumbs button{width:72px;height:72px;border:1px solid var(--line);border-radius:10px;
  background:var(--shot-bg);cursor:pointer;overflow:hidden;padding:0}
.gal-thumbs button.active{border-color:var(--accent)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}
.buy h1{font-size:clamp(1.7rem,3.2vw,2.4rem)}
.buy .price{font-family:var(--font-display);font-size:1.9rem;font-weight:var(--display-weight);
  color:var(--accent);margin-top:var(--space-4);display:flex;align-items:baseline;gap:.8rem}
.buy .price .weight{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--muted)}
.buy .hook{color:var(--muted);margin-top:var(--space-4);max-width:52ch}
.field-lbl{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:var(--space-5) 0 10px}
.variant-row{display:flex;flex-wrap:wrap;gap:8px}
.variant-row button{min-height:44px;padding:0 16px;border:1.5px solid var(--line-strong);
  border-radius:999px;background:var(--surface);cursor:pointer;font-size:.88rem;
  transition:border-color .2s ease,color .2s ease}
.variant-row button:hover{border-color:var(--accent)}
.variant-row button.active{border-color:var(--accent);color:var(--accent);background:var(--surface-2)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:999px}
.qty button{width:46px;height:46px;cursor:pointer;font-size:1.1rem;color:var(--muted);border-radius:999px}
.qty button:hover{color:var(--accent);background:var(--surface-2)}
.qty input{width:52px;height:46px;text-align:center;border:0;font:inherit;
  font-variant-numeric:tabular-nums;background:transparent;color:var(--ink)}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}
.buy-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-5)}
.buy-actions .btn{flex:1 1 200px}
.buy .trust{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:var(--space-6);
  padding-top:var(--space-5);border-top:1px solid var(--line)}
.buy .trust span{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;
  font-weight:600;color:var(--muted)}
.buy .trust svg{width:16px;height:16px;color:var(--accent)}
.desc{grid-column:1/-1;border-top:1px solid var(--line);padding-top:var(--space-6);margin-top:var(--space-5)}
.desc h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:var(--space-4)}
.desc-body{max-width:70ch;color:var(--muted)}
.desc-body p{margin-bottom:1rem}
.desc-body ul,.desc-body ol{margin:0 0 1rem 1.2rem}
.desc-body li{margin-bottom:.4rem}
.desc-body strong{color:var(--ink);font-weight:600}
.skeleton{border-radius:var(--radius);
  background:linear-gradient(90deg,var(--surface-2) 25%,#F1E7D8 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:sk 1.4s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ====================== halaman grosir ====================== */
.skutable{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.skutable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* tabel 7 kolom tidak muat di ponsel; tanpa petunjuk, kolom harga reseller
   dan margin tak terlihat dan pengunjung tidak tahu harus menggeser. */
.tablehint{display:none;font-size:.8rem;color:var(--muted);margin-bottom:10px}
@media(max-width:860px){.tablehint{display:block}}
.skutable table{min-width:680px;font-size:.88rem}
.skutable th,.skutable td{padding:14px 16px;text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap}
.skutable th{font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
.skutable tr:last-child td{border-bottom:0}
.skutable td:first-child{white-space:normal;min-width:220px;font-weight:500}
.skutable td.num{text-align:right;font-variant-numeric:tabular-nums}
.skutable th.num{text-align:right}
.skutable .res{font-family:var(--font-display);font-size:1.05rem;
  font-weight:var(--display-weight);color:var(--accent)}
.skutable tbody tr:hover{background:var(--surface-2)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:1.5rem;min-height:56px;
  font-family:var(--font-display);font-size:1.12rem;font-weight:var(--display-weight)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;flex:none;
  transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding-bottom:22px;color:var(--muted);max-width:70ch}

/* ====================== checkout & order (tier transaksi) ====================== */
.layout{display:grid;gap:var(--space-6);padding-block:var(--space-6) var(--space-section)}
@media(min-width:900px){.layout{grid-template-columns:1.4fr 1fr;align-items:start}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px)}
.card+.card{margin-top:var(--space-5)}
.card h2{font-size:1.4rem;margin-bottom:var(--space-3)}
.card .hint{font-size:.86rem;color:var(--muted);margin-bottom:var(--space-5)}
.nav .step{font-size:.78rem;font-weight:600;color:var(--muted)}
.field{margin-bottom:var(--space-4)}
.field label,.field .field-lbl{display:block;font-size:.75rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 16px;
  border:1.5px solid var(--line-strong);border-radius:12px;background:var(--surface);
  font:inherit;font-size:.95rem;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field small{display:block;margin-top:6px;font-size:.78rem;color:var(--muted)}
.field .err{color:var(--danger)}
.grid2{display:grid;gap:var(--space-4)}
@media(min-width:620px){.grid2{grid-template-columns:1fr 1fr}}
.ship-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px;
  border:1px solid var(--line);border-radius:12px;cursor:pointer;margin-bottom:10px}
.ship-opt:hover{border-color:var(--line-strong);background:var(--surface-2)}
.ship-opt input{accent-color:var(--accent);width:18px;height:18px}
/* Dirender checkout.js: nama kurir mengisi sisa ruang, harga didorong ke kanan. */
.ship-opt .so-name{flex:1;font-size:.9rem;font-weight:600}
.ship-opt .so-price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.summary{position:sticky;top:96px}
.sum-row,.tot-row{display:flex;justify-content:space-between;gap:1rem;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.92rem}
.sum-row .v,.tot-row .v{font-variant-numeric:tabular-nums;font-weight:600}
.tot-row{border-bottom:0;padding-top:16px;font-size:1rem;font-weight:700}
.tot-row .v{font-family:var(--font-display);font-size:1.5rem;color:var(--accent)}
.pay-note{font-size:.82rem;color:var(--muted);margin-top:var(--space-4)}

.bank,.qr-wrap,.proof{margin-top:var(--space-5)}
.bank-row{display:flex;justify-content:space-between;gap:1rem;padding:12px 0;
  border-bottom:1px solid var(--line)}
.copyable{font-variant-numeric:tabular-nums;font-weight:600;cursor:pointer;color:var(--accent)}
.grand{font-family:var(--font-display);font-size:1.9rem;font-weight:var(--display-weight);color:var(--accent)}
.qr-img{max-width:240px;margin-inline:auto;border:1px solid var(--line);
  border-radius:12px;padding:12px;background:#fff}
.ok-badge,.paid-badge,.pay-status{display:inline-flex;align-items:center;gap:.5rem;
  padding:9px 16px;border-radius:999px;font-size:.82rem;font-weight:600}
.ok-badge,.paid-badge{background:rgba(31,111,74,.1);color:var(--green)}
.pay-status{background:var(--surface-2);color:var(--muted)}
/* Dirender order.js di dalam .pay-status */
.pay-status .ok{color:var(--green);font-weight:700}
.pay-status .pending{color:var(--accent);font-weight:600}
.ok-badge svg,.paid-badge svg,.pay-status svg{width:16px;height:16px}

/* ====================== 404 ====================== */
body.page-404 main{min-height:56vh;display:grid;place-items:center;text-align:center;
  padding-block:var(--space-section)}
.code{font-family:var(--font-display);font-size:clamp(4rem,15vw,9rem);
  font-weight:var(--display-weight);line-height:1;color:var(--accent)}
.page-404 .sub{color:var(--muted);max-width:46ch;margin:var(--space-4) auto 0}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:var(--space-6)}

/* ====================== footer ====================== */
footer{background:var(--footer-bg);color:var(--footer-ink);
  padding-block:var(--space-section) var(--space-6)}
footer a:hover{color:var(--footer-accent)}
/* checkout & order memakai markup footer lama (<a> polos), jadi butuh
   padding sendiri supaya area tap tetap 44px di ponsel. */
footer a{display:inline-block;padding-block:10px}
footer .fnav a{padding-block:0}
footer h4{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--footer-muted);margin-bottom:var(--space-4)}
footer p{color:var(--footer-muted);font-size:.9rem;max-width:40ch}
.fgrid{display:grid;gap:var(--space-7);grid-template-columns:1fr}
@media(min-width:820px){.fgrid{grid-template-columns:1.6fr 1fr 1.4fr}}
.fnav{display:flex;flex-direction:column}
.fnav a{min-height:44px;display:inline-flex;align-items:center;font-size:.92rem}
.fsig{font-family:var(--font-display);font-size:.95rem;font-weight:var(--display-weight);
  color:var(--footer-accent);margin-top:16px;letter-spacing:.01em}
.fbar{margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;font-size:.82rem;color:var(--footer-muted)}

/* ====================== WhatsApp mengambang ====================== */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;
  gap:.55rem;background:var(--green);color:#fff;min-height:52px;padding:0 1.2rem;
  border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:0 8px 24px rgba(31,111,74,.35)}
.fab svg{width:20px;height:20px}
.fab:hover{background:var(--green-hover)}
@media(max-width:520px){.fab span{display:none}.fab{padding:0;width:56px;justify-content:center}}

/* ====================== drawer keranjang ======================
   /shop memuat app.js (bukan cart-drawer.js) dan memakai markup drawer yang
   ditulis langsung di HTML, jadi gaya lengkapnya harus ada di sini. Di
   halaman lain cart-drawer.js menyuntik markup + CSS-nya sendiri; nilai
   !important di bawah menimpa yang di-hardcode di JS itu. */
#cart-backdrop{position:fixed;inset:0;background:rgba(38,24,13,.45);opacity:0;
  pointer-events:none;transition:opacity .2s;z-index:80}
#cart-backdrop.show{opacity:1;pointer-events:auto}
#cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);
  background:var(--bg);box-shadow:-10px 0 40px rgba(38,24,13,.18);
  transform:translateX(100%);transition:transform .25s ease;z-index:90;
  display:flex;flex-direction:column}
#cart-drawer.open{transform:translateX(0)}
#cart-drawer .cart-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--line)}
#cart-drawer .cart-head h3{font-family:var(--font-display)!important;font-size:1.3rem;
  font-weight:var(--display-weight);margin:0}
#cart-drawer #cart-close{width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--muted);font-size:1.1rem;border-radius:999px}
#cart-drawer #cart-close:hover{color:var(--ink);background:var(--surface-2)}
#cart-body{flex:1;overflow-y:auto;padding:8px 24px}
#cart-body .cart-row{display:flex;align-items:center;gap:12px;padding:16px 0;
  border-bottom:1px solid var(--line)}
#cart-body .ci-name{flex:1;font-size:.92rem;font-weight:600}
#cart-body .ci-name small{display:block;font-weight:400;color:var(--muted);margin-top:3px}
#cart-body .ci-qty{display:inline-flex;align-items:center;gap:8px}
#cart-body .ci-qty button{width:40px!important;height:40px!important;border-radius:999px!important;
  border:1.5px solid var(--line-strong)!important;background:var(--surface)!important;
  cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
#cart-body .ci-del{min-height:40px;padding-inline:6px;background:0;border:0;
  color:var(--danger);cursor:pointer;font-size:.84rem}
#cart-drawer .cart-foot{padding:20px 24px;border-top:1px solid var(--line)}
#cart-drawer .cart-foot .tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:14px;font-size:.8rem;font-weight:600;color:var(--muted)}
#cart-drawer .cart-foot .tot span:last-child{font-family:var(--font-display);
  font-size:1.5rem;color:var(--accent)}
#cart-drawer .cart-foot .btn{width:100%}
#cart-drawer .cart-state,#cart-body .cart-state,#cart-body .state{padding:40px 0;
  text-align:center;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:120;
  background:var(--ink);color:var(--surface-2);padding:13px 20px;border-radius:999px;
  font-size:.88rem;max-width:min(90vw,420px);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Sebagian rilis font display memakai oldstyle figures, sehingga angka nol
   jadi setinggi huruf kecil dan "Rp0" terbaca "Rpo". Semua angka yang diset
   dengan font display dipaksa lining + tabular supaya terbaca dan rata kolom. */
.pcard .price,.buy .price,.tot-row .v,.grand,.pricetable .m,.skutable .res,
.stat .n,.hero-meta .n,.hero-badge .n,.path .facts .n,.tl .y,.code,
#cart-drawer .cart-foot .tot span:last-child{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* ====================== motion ====================== */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .skeleton{animation:none}
}