:root{
  /* ===== COLOR ===== */
  --santan:#F7F1E3;      /* Santan Cream — main background */
  --daun:#526B4A;        /* Daun Hijau — primary brand */
  --gula:#70452E;        /* Gula Melaka — headings / dark sections */
  --terracotta:#B76646;  /* CTA / highlights */
  --kunyit:#D5A84B;      /* small accents */
  --kopi:#2D2520;        /* main text */
  --putih:#FFFDF8;       /* cards / contrast */

  /* derived */
  --daun-deep:#041D11;
  --daun-ink:#041D11;
  --gula-deep:#54321F;
  --kopi-soft:rgba(45,37,32,.68);
  --kopi-faint:rgba(45,37,32,.46);
  --rule:rgba(45,37,32,.13);
  --rule-light:rgba(247,241,227,.22);

  /* ===== TYPE ===== */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;

  --h1:clamp(42px,7.4vw,76px);
  --h2:clamp(30px,4.8vw,52px);
  --h3:clamp(23px,2.9vw,34px);
  --body:clamp(16px,1.15vw,18px);
  --small:14px;
  --tiny:13px;
  --btn:15px;

  /* ===== SHAPE / SPACE ===== */
  --r-card:20px;
  --r-btn:13px;
  --r-lg:24px;
  --r-sm:14px;
  --pad:clamp(64px,8vw,104px);
  /* ===== PALET JENAMA (Modern Malay Heritage) ===== */
  --primary:#0B321F;
  --dark:#071F14;
  --gold:#D8A84E;
  --cream:#F4E7C7;
  --beige:#E8D7B3;
  --charcoal:#1C1A14;
  --chili:#A83225;

  --container:1200px;
  --nav-h:76px;

  /* ===== MOTION SYSTEM =====
     Empat kategori sahaja, supaya seluruh laman bergerak dengan satu suara:
       (1) REVEAL  .rv        opacity 0>1 + translateY 24px>0   ~900ms
       (2) FLOAT   bob/floaty gerakan halus berterusan          4-9s
       (3) TRANSFORM          didorong tatalan (uncang > hidangan, progres langkah)
       (4) MICRO              butang, troli, kad, tab           150-360ms          */
  --e-out:cubic-bezier(.2,.8,.25,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-micro:.22s;
  --t-ui:.36s;
  --t-reveal:.9s;

  --hz-bg:url("../img/hz-bg.webp");
  --hz-photo:url("../img/hz-photo.webp");
  /* Versi tinggi untuk potret: adegan yang sama dengan ruang
     kepala gelap ditambah di atas, kerana dalam foto asal kotak
     bermula pada 10% tinggi dan tiada ruang untuk salinan. */
  --hz-photo-tall:url("../img/hz-photo-tall.webp");


  /* ===== aset footer ===== */
  --f-logo:url("../img/f-logo.webp");
  --bowl1:url("../img/bowl1.webp");
  --bowl2:url("../img/bowl2.webp");
  --bowl3:url("../img/bowl3.webp");
  --bowl4:url("../img/bowl4.webp");
  --bowl5:url("../img/bowl5.webp");
  --bowl6:url("../img/bowl6.webp");
  --bowl7:url("../img/bowl7.webp");
  --bowl8:url("../img/bowl8.webp");
  --bowl9:url("../img/bowl9.webp");
  --bowl10:url("../img/bowl10.webp");
  --script:"Caveat","Segoe Script",cursive;
  /* dieline art untuk kotak 3D CSS — enam panel bercetak */
  --t-front:url("../img/t-front.webp?v=2");
  --t-back:url("../img/t-back.webp?v=2");
  --t-sideA:url("../img/t-sideA.webp?v=2");
  --t-sideB:url("../img/t-sideB.webp?v=2");
  --t-top:url("../img/t-top.webp?v=2");
  --t-bottom:url("../img/t-bottom.webp?v=2");

  /* pack artwork, embedded once each */
  --pack-sm:url("../img/pack-sm.webp");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--santan);color:var(--kopi);
  font-family:var(--sans);font-size:var(--body);line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;line-height:1.1;letter-spacing:-.004em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
p{margin:0}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.sec{padding-block:var(--pad);position:relative;z-index:1;overflow:hidden}
.sec--santan{background:var(--santan)}
.sec--putih{background:var(--putih)}
.sec--daun{background:var(--daun-deep);color:var(--santan)}
/* ---- seksyen emas ----
   Emas jenama yang sama dengan butang utama (#D8A84E). Semua kad di
   dalam seksyen ini berlatar putih, jadi kandungannya tidak terjejas;
   hanya tajuk dan tab yang benar-benar duduk atas emas, dan kedua-dua
   itu diberi dakwat gelap di bawah. */
.sec--emas{background:var(--gold);color:var(--kopi)}


/* the pack shot, embedded once as --pack */
.pk{display:block;width:100%;background:var(--pack-sm) center center/contain no-repeat;aspect-ratio:1005/1504}

/* ===== batik layers ===== */
.batik{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

.batik--soft{opacity:.07}

/* ---- corak batik latar dimatikan BUAT MASA INI ----
   Empat lapisan penuh seksyen: cine, Pilihan Untuk Anda, Di Mana Nak
   Beli, dan kaki laman. Buang blok ini sahaja untuk mengembalikan
   semuanya — markupnya masih utuh di tempatnya.

   Corak kecil di DALAM avatar ulasan dan kad produk tidak disentuh:
   itu hiasan komponen, bukan latar seksyen. */
.cine-sticky > .batik,
.sec > .batik,
.foot > .batik{display:none}


.sec > .wrap{position:relative;z-index:1}


/* ===== eyebrow + heads ===== */
.head{max-width:620px;margin-bottom:clamp(38px,5vw,58px)}
.head--mid{margin-inline:auto;text-align:center}
/* baris penjimatan: perenggan kedua di bawah tajuk seksyen, dengan
   satu perkataan diserlahkan supaya tawaran itu tidak hilang dalam
   ayat biasa */
.head-save{margin-top:10px}
.head-save b{color:var(--terracotta);font-weight:700}
.sec--daun .head-save b,.sec--gula .head-save b,.sec--ink .head-save b{color:var(--gold)}
.head p{margin-top:18px;color:var(--kopi-soft);font-size:var(--body)}
.sec--daun .head p,.sec--gula .head p,.sec--ink .head p{color:rgba(247,241,227,.76)}
/* --kopi-soft hanya mencapai 3.46:1 pada emas — gagal ambang teks
   biasa. Dakwat yang lebih pekat ini mengukur 4.69:1. */
.sec--emas .head p{color:rgba(45,37,32,.82)}


/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:var(--btn);font-weight:700;letter-spacing:.01em;
  padding:15px 26px;border-radius:var(--r-btn);white-space:nowrap;
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,background .3s ease,color .3s ease,border-color .3s ease;
}
.btn svg{width:18px;height:18px;flex:none}
/* Emas, bukan terracotta. Warna ini sudah wujud pada butang yang
   sama ketika bar nav terapung di atas hero — sekarang ia sama di
   mana-mana, jadi butang utama tidak lagi bertukar warna semata-mata
   kerana halaman ditatal. Teks gelap, bukan putih: #071F14 pada
   #D8A84E memberi 8.0:1, manakala putih pada emas hanya 1.9:1 dan
   gagal sepenuhnya. */
.btn--primary{background:var(--gold);color:var(--dark);box-shadow:0 8px 20px rgba(216,168,78,.3)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(216,168,78,.4);background:#C79A3F}
.btn--green{background:var(--daun);color:var(--putih);box-shadow:0 8px 20px rgba(82,107,74,.26)}
.btn--green:hover{transform:translateY(-2px);background:var(--daun-deep)}
.btn--line{border:1.5px solid var(--rule);color:var(--kopi);background:var(--putih)}
.btn--line:hover{border-color:var(--daun);color:var(--daun);transform:translateY(-2px)}
.btn--cream{background:var(--santan);color:var(--gula)}
.btn--cream:hover{transform:translateY(-2px);background:var(--putih)}
.btn--sm{padding:11px 18px;font-size:var(--small)}
.btn--full{width:100%}

/* ===== nav ===== */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:70;display:flex;align-items:center;
  transition:height .45s var(--e-soft);
}
/* Rel yang sama seperti .hz-inner: hero penuh-lebar, jadi nav
   mengikut padding sisi yang sama supaya logo sejajar dengan
   statistik dan butang di bawahnya. */
.nav .wrap{max-width:100%;padding-inline:clamp(22px,4.2vw,64px)}
/* selepas ~80px tatalan, bar bertukar jadi pil terapung */
.nav .wrap{
  display:flex;align-items:center;gap:18px;height:calc(100% - 10px);
  border:1px solid transparent;border-radius:18px;
  transition:background .45s var(--e-soft),box-shadow .45s var(--e-soft),
             border-color .45s var(--e-soft),height .45s var(--e-soft);
}
.nav.stuck .wrap{
  /* Pil terapung dijarakkan dari tepi skrin. Padding dalam dikurangkan
     dengan jumlah yang sama, jadi logo dan pautan kekal pada kedudukan
     yang sama semasa bar bertukar — tiada lompatan mendatar. */
  --nav-gap:clamp(10px,1.6vw,22px);
  max-width:calc(100% - var(--nav-gap) * 2);
  padding-inline:calc(clamp(22px,4.2vw,64px) - var(--nav-gap));
  height:calc(100% - 18px);
  background:rgba(247,241,227,.9);backdrop-filter:blur(14px) saturate(1.08);
  border-color:var(--rule);box-shadow:0 10px 30px rgba(45,37,32,.10);
}
/* masuk halaman — turun sedikit, tiada lantunan */
@keyframes navDrop{from{opacity:0;transform:translateY(-12px)}}
@keyframes navPop{from{opacity:0;transform:scale(.96)}}
.logo{animation:navDrop .62s var(--e-out) both}
.nav-links a{animation:navDrop .6s var(--e-out) both;animation-delay:calc(140ms + var(--i,0)*45ms)}
.nav-tools{animation:navPop .6s var(--e-out) both;animation-delay:.36s}
.logo{display:flex;align-items:center;margin-right:auto}
/* Lambang penuh lebih tinggi berbanding keratan lama pada lebar yang
   sama (1.31 lawan 1.60), jadi pada 46px tinggi jenamanya mengecil.
   Dinaikkan supaya jejaknya dalam bar kekal lebih kurang sama. */
.logo img{
  height:clamp(44px,3.9vw,56px);width:auto;display:block;
  transition:height .45s var(--e-soft);
}
.nav.stuck .logo img{height:clamp(40px,3.4vw,49px)}
.logo b{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.01em;color:var(--gula);line-height:1.05;display:block}
.logo span{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-size:var(--small);font-weight:600;color:var(--kopi);padding:9px 13px;border-radius:9px;
  transition:background .25s ease,color .25s ease;
}
.nav-links a:hover{background:rgba(82,107,74,.1);color:var(--daun)}
.nav-tools{display:flex;align-items:center;gap:10px}
.cart-btn{
  position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1.5px solid var(--rule);border-radius:12px;color:var(--kopi);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.cart-btn:hover{border-color:var(--daun);color:var(--daun)}
.cart-btn svg{width:19px;height:19px}
.cart-btn.bump{animation:bump .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes bump{0%,100%{transform:scale(1)}35%{transform:scale(1.16) rotate(-5deg)}}
.cart-count{
  position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
  background:var(--terracotta);color:var(--putih);border-radius:11px;
  font-size:11px;font-weight:800;line-height:21px;text-align:center;
  /* Kiraan kini dihasilkan oleh PHP: kalau lencana itu ada dalam HTML,
     ia sepatutnya kelihatan. Dahulu ia bermula pada scale(0) dan
     menunggu JS menambah .on — dengan laci troli lama dibuang, tiada
     apa yang menambahnya lagi, jadi lencana itu tidak akan muncul. */
  transform:scale(1);transition:transform .35s cubic-bezier(.34,1.6,.64,1);
}
/* Troli kosong tiada lencana. [hidden] sahaja kalah kepada display
   pada .cart-count, jadi peraturan khusus ini diperlukan. */
.cart-count[hidden]{display:none}
.cart-count.on{transform:scale(1)}
/* Denyutan apabila nombor berubah.
   JANGAN namakan kelas ini ".pop": nama itu sudah dimiliki oleh bar
   timbul stokis di bawah (lihat .pop pada ~1590), yang membawa
   position, transform:translateX(-50%), display:flex dan latar krim.
   Kedua-dua pemilih mempunyai kekhususan sama, jadi yang datang
   kemudian dalam fail ini menang — lencana menjadi krim atas krim dan
   nombornya hilang sepenuhnya. */
.cart-count.is-bump{animation:cpop .42s cubic-bezier(.34,1.55,.64,1)}
@keyframes cpop{0%,100%{transform:scale(1)}45%{transform:scale(1.34)}}
/* (4) MICRO — uncang terbang ke troli bila ditambah */
.fly-pk{
  position:fixed;z-index:200;pointer-events:none;
  background:var(--pack-sm) center center/contain no-repeat;
  filter:drop-shadow(0 12px 20px rgba(45,37,32,.3));
}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--rule);border-radius:12px}
.burger svg{width:20px;height:20px}
.msheet{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:69;
  background:var(--putih);border-bottom:1px solid var(--rule);
  padding:12px 24px 22px;display:grid;gap:2px;
  transform:translateY(-125%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow:0 18px 40px rgba(45,37,32,.1);
}
.msheet.on{transform:none}
.msheet a{font-size:16px;font-weight:600;padding:13px 4px;border-bottom:1px solid var(--rule);text-align:center}
/* Sebelum melekat, bar nav terapung di atas hero gelap, jadi warna
   teks kopi lalai akan hilang sepenuhnya di sana. Sebaik pil krim
   muncul (.stuck) semuanya kembali kepada gaya biasa. */
.nav:not(.stuck) .nav-links a{color:rgba(244,231,199,.84)}
.nav:not(.stuck) .nav-links a:hover{background:rgba(244,231,199,.12);color:var(--cream)}
.nav:not(.stuck) .cart-btn,
.nav:not(.stuck) .burger{border-color:rgba(244,231,199,.3);color:var(--cream)}
.nav:not(.stuck) .cart-btn:hover,
.nav:not(.stuck) .burger:hover{border-color:var(--gold);color:var(--gold)}
.msheet .btn{margin-top:14px}

/* ============================================================
   HERO — dua lajur di atas hijau hutan

   Palet dikunci pada hero sahaja. NOTA PENTING tentang emas:
   taklimat memberi dua nilai emas, dan keduanya TIDAK boleh
   bertukar tempat. #8C6D3F hanya mencapai 2.56:1 pada hijau
   #041D11 — 3.68:1, cukup untuk garis hiasan, gagal untuk teks. Jadi:
     --h-gold  #8C6D3F  garis rambut, bingkai, corak  (hiasan)
     --h-cta   #D9A441  semua TEKS dan IKON emas       (dibaca)

     0.00s  latar dan corak
     0.15s  foto produk masuk dari kanan
     0.30s  eyebrow, tajuk, salinan, butang — berperingkat 90ms
     0.95s  jalur faedah naik
   ============================================================ */
.hero{
  --h-green:#041D11;   /* sama dengan --daun-deep seksyen gelap */
  --h-cream:#F3EEE3;
  --h-gold:#8C6D3F;
  --h-cta:#D9A441;
  --e-in:cubic-bezier(.22,.72,.2,1);
  position:relative;z-index:0;overflow:hidden;
  width:100%;height:100vh;height:100svh;
  /* Lajur flex, bukan padding-bawah yang diteka. Tinggi jalur faedah
     berubah dengan breakpoint dan pembalutan teks, jadi sebarang
     nilai tetap akan bertindih pada satu saiz atau meninggalkan
     jurang pada saiz lain. Dengan flex, salinan mendapat baki ruang
     dan jalur itu tidak boleh dilanggar. */
  display:flex;flex-direction:column;
  background:var(--h-green);color:var(--h-cream);
}

/* ---- foto produk, separuh kanan ---- */
/* Foto memenuhi SELURUH hero, seperti rujukan. Sebelum ini ia
   dihadkan kepada 64% kanan dengan hijau rata di kiri dan atas —
   rujukan tiada blok hijau begitu; keseluruhan bingkai ialah adegan
   fotografi dan teks duduk di atas bahagiannya yang gelap. */
/* Elemen dilebarkan melepasi hero dan dianjak ke kanan. "cover" pada
   nisbah ini tidak menghasilkan limpahan mendatar, jadi
   background-position tiada kesan — satu-satunya cara menolak produk
   ke kanan ialah menggerakkan elemen itu sendiri. */
.hz-shot{
  position:absolute;top:0;bottom:0;left:13%;right:-8%;z-index:0;
  background:var(--hz-photo) center center/cover no-repeat;
  animation:hzShot 1.6s var(--e-out) .15s both;
}
@keyframes hzShot{from{opacity:0;transform:scale(1.05)}}
/* Skrim diletak pada HERO dan bukan pada foto, supaya ia merentas
   lebar penuh: jalur kiri yang tidak ditutupi foto dan tepi foto itu
   sendiri berada di bawah kegelapan yang sama, jadi tiada jahitan
   kelihatan di tempat foto bermula. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,40,28,.97) 0%,rgba(18,40,28,.93) 30%,rgba(18,40,28,.7) 46%,rgba(18,40,28,.18) 68%,rgba(18,40,28,0) 88%),
    linear-gradient(180deg,rgba(18,40,28,.5) 0%,rgba(18,40,28,0) 15%),
    linear-gradient(0deg,var(--h-green) 1%,rgba(4,29,17,0) 20%);
}

/* ---- lajur teks ---- */
.hz-inner{
  position:relative;z-index:2;
  width:100%;max-width:1340px;margin-inline:auto;
  padding-inline:clamp(22px,4.2vw,64px);
  padding-top:calc(var(--nav-h) + clamp(10px,2vh,26px));
  padding-bottom:clamp(16px,3vh,34px);
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;
}
.hz-copy{width:min(100%,560px)}
.hz-copy > *{animation:hzIn .8s var(--e-in) both;animation-delay:calc(.3s + var(--i,0) * 90ms)}
@keyframes hzIn{from{opacity:0;transform:translateY(22px)}}

.hz-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:clamp(11px,.92vw,13px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--h-cta);
  margin-bottom:clamp(14px,2vh,22px);
}
.hz-kicker svg{width:16px;height:16px;flex:none}

.hero h1{
  margin:0;font-family:var(--serif);font-weight:600;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,76px);line-height:1.02;letter-spacing:-.004em;
  color:var(--h-cream);
}
.hero h1 span,.hero h1 em{display:block;font-style:normal}
.hero h1 em{color:var(--h-cta)}

.hz-sub{
  margin:clamp(16px,2.4vh,26px) 0 0;max-width:46ch;
  font-size:clamp(14px,1.08vw,16.5px);line-height:1.74;
  color:rgba(243,238,227,.82);
}

.hz-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.2vh,34px)}
.hz-buy{
  background:var(--h-cta);color:var(--h-green);border:1.5px solid var(--h-cta);
  border-radius:var(--r-btn);padding:15px 30px;
  box-shadow:0 14px 30px -14px rgba(217,164,65,.7);
}
.hz-buy svg{width:18px;height:18px}
.hz-buy:hover{background:#e6b45a;border-color:#e6b45a;transform:translateY(-2px)}
/* Salinan butang untuk telefon (lihat hero.php). Tersembunyi di sini;
   hanya dihidupkan dalam media (max-width:620px). */
.hz-cta--m{display:none}
/* ---- jalur faedah melengkung ---- */
.hz-usp{
  position:relative;z-index:3;flex:0 0 auto;
  background:var(--h-green);
  border-top:1px solid rgba(140,109,63,.9);
  border-radius:50% 50% 0 0 / clamp(20px,3.2vw,44px) clamp(20px,3.2vw,44px) 0 0;
  padding:clamp(20px,2.6vw,34px) 0 clamp(16px,2vw,26px);
  animation:hzIn .9s var(--e-in) .95s both;
}
.hz-usp ul{
  width:100%;max-width:1180px;margin-inline:auto;
  padding-inline:clamp(22px,4.2vw,64px);
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-block:0;padding-block:0;list-style:none;
}
.hz-usp li{
  display:flex;flex-direction:column;align-items:center;gap:clamp(7px,1vw,11px);
  text-align:center;padding-inline:clamp(6px,1.4vw,22px);
}
/* pembahagi pada item ke-2 dan seterusnya sahaja — tiada garis
   tergantung di hujung baris */
.hz-usp li + li{border-left:1px solid rgba(140,109,63,.42)}
.hz-usp i{
  width:clamp(38px,3.4vw,52px);aspect-ratio:1;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(140,109,63,.8);color:var(--h-cta);
}
/* Saiz piksel, bukan peratusan. Tinggi % memerlukan tinggi ibu bapa
   yang pasti; di sini tinggi bulatan datang daripada kandungannya,
   jadi % tidak selesai dan <svg> jatuh ke saiz lalainya 300x150 —
   membengkakkan bulatan 52px menjadi 152px. */
.hz-usp svg{width:clamp(17px,1.55vw,23px);height:clamp(17px,1.55vw,23px)}
.hz-usp b{
  font-family:var(--sans);font-size:clamp(11.5px,.95vw,14px);font-weight:500;
  line-height:1.42;letter-spacing:.02em;color:var(--h-cream);
}

/* ---- tablet: foto turun ke belakang, teks penuh lebar ---- */
@media (max-width:980px){
  /* Foto menjadi item flex ketiga dan bukan lapisan mutlak. Ia
     mengambil TEPAT ruang yang tinggal antara salinan dan jalur
     faedah, jadi ia tidak pernah berada di belakang teks — dan
     kerana ia tidak perlu disembunyikan, kecerunan berat yang
     dahulunya melitupi kotak boleh digugurkan hampir sepenuhnya. */
  /* Foto memenuhi bingkai penuh di sini juga, sama seperti desktop —
     tiada lagi jalur bergambar yang duduk di tengah hijau rata.
     Skrim bertukar menegak: pada potret, teks berada DI ATAS produk
     dan bukan di sebelahnya, jadi kegelapan mesti turun dari atas. */
  /* Bingkai PENUH di sini juga — tiada blok hijau rata di atas.
     Ini menggunakan --hz-photo-tall, bukan foto asal: dalam foto
     asal kotak bermula pada 10% tinggi, jadi apa-apa potongan
     potret meletakkannya betul-betul di belakang salinan. Versi
     tinggi menyambung adegan yang sama ke atas, memberi kotak
     kedudukan bermula pada 55% — di bawah salinan, bukan di
     belakangnya. */
  .hz-shot{
    position:absolute;inset:0;order:0;flex:none;
    width:auto;height:auto;
    background-image:var(--hz-photo-tall);
    background-position:center bottom;background-size:cover;
    -webkit-mask-image:none;mask-image:none;
  }
  .hz-shot::after{content:none}
  /* skrim menegak: pada potret salinan berada DI ATAS produk, jadi
     kegelapan turun dari atas dan berhenti sebelum kotak */
  .hero::before{
    background:
      linear-gradient(180deg,rgba(18,40,28,.92) 0%,rgba(18,40,28,.8) 30%,rgba(18,40,28,.4) 46%,rgba(18,40,28,0) 60%),
      linear-gradient(0deg,var(--h-green) 1%,rgba(4,29,17,0) 16%);
  }
  .hz-inner{order:1;flex:1 1 auto;align-items:flex-start}
  .hz-usp{order:3}
  .hz-copy{margin-inline:auto}
  .hz-copy{width:100%;max-width:none;text-align:center}
  .hz-kicker{justify-content:center}
  .hz-sub{margin-inline:auto}
  .hz-cta{justify-content:center}
  .hero h1{font-size:clamp(30px,7.4vw,48px)}
}
@media (max-width:620px){
  /* Potret 844px mempunyai kira-kira 566px selepas nav dan jalur
     faedah. Salinan penuh saiz memakan hampir kesemuanya dan foto
     tersepit di belakang butang. Kedua-dua belah dipadatkan supaya
     foto mendapat jalur tengah yang sebenar. */
  .hz-kicker{font-size:10.5px;letter-spacing:.17em;margin-bottom:10px}
  .hz-kicker svg{width:14px;height:14px}
  .hz-sub{font-size:13.5px;line-height:1.62;margin-top:13px}
  .hz-cta{gap:9px;margin-top:16px}
  .hz-buy{padding-block:12px}
  .hz-usp{padding:clamp(14px,2vh,20px) 0 clamp(12px,1.6vh,18px)}
  /* Keempat-empat faedah kekal satu baris, sama seperti desktop. Pada
     375px setiap lajur hanya ~85px, jadi padding tepi, ikon dan huruf
     dikecilkan supaya "Tanpa Bahan" dan "Siap Dalam" muat tanpa
     dipecah menjadi tiga baris. */
  .hz-usp ul{padding-inline:10px}
  .hz-usp li{padding-inline:3px;gap:6px}
  .hz-usp i{width:30px}
  .hz-usp svg{width:14px;height:14px}
  .hz-usp b{font-size:10px;line-height:1.3;letter-spacing:0}
  .hz-cta{flex-direction:column;align-items:stretch}
  .hz-buy{justify-content:center;padding-block:13px}
  .hero h1{font-size:clamp(25px,7.6vw,33px)}
  /* Butang "Beli Sekarang" turun ke bawah jalur faedah pada telefon.
     Ia dipindahkan dengan salinan dan bukan dengan order: butang asal
     bersarang dalam .hz-copy > .hz-inner, jadi order pada .hero tidak
     boleh mencapainya tanpa display:contents, yang akan membuang
     padding dan susun atur blok salinan. */
  /* Butang "Beli Sekarang" kembali di bawah perenggan pada telefon
     (atas permintaan pemilik), bukan di bawah jalur faedah. Salinan
     kedua (.hz-cta--m) disembunyikan. Butang mengikut lebar teksnya. */
  .hz-copy .hz-cta{flex-direction:row;justify-content:center;align-items:center}
  .hz-cta--m{display:none}
}
/* melintang pendek: dua lajur kembali, jalur faedah dipadatkan */
@media (max-width:980px) and (max-height:560px) and (orientation:landscape){
  .hz-inner{align-items:center}
  .hz-shot{
    width:min(56%,620px);top:0;bottom:0;height:auto;background-position:center right;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 46%);
            mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 18%,#000 46%);
  }
  .hz-inner{padding-bottom:clamp(8px,1.8vh,18px)}
  .hz-copy{width:min(100%,430px);text-align:left}
  .hz-cta{justify-content:flex-start}
  /* 420px tinggi tolak nav dan jalur faedah meninggalkan ~250px untuk
     salinan. Pada saiz penuh ia 369px dan melimpah terus ke atas
     jalur itu, jadi setiap bahagian dipotong — eyebrow digugurkan
     dahulu kerana ia paling sedikit membawa maklumat. */
  .hz-kicker{display:none}
  .hero h1{font-size:clamp(21px,3.4vw,28px);line-height:1.04}
  .hz-sub{margin:10px 0 0;font-size:12px;line-height:1.5;max-width:40ch}
  .hz-cta{margin-top:14px;gap:8px}
  .hz-buy{padding:10px 20px;font-size:13px}
  .hz-buy svg{width:15px;height:15px}
  .hz-usp{padding-block:10px 8px}
  .hz-usp i{width:28px}
  .hz-usp svg{width:13px;height:13px}
  .hz-usp b{font-size:10px;line-height:1.3}
}
/* ============================================================
   SEKSYEN 2 — "Apa Itu Uncang Ajaib"
   Satu garis masa tatalan (p: 0 > 1) memacu setiap keadaan.
   Tiada pemasa: semuanya terikat pada kedudukan tatalan dan
   oleh itu boleh diundur semula dengan menatal ke atas.
   ============================================================ */
.cine{
  /* 660vh: lima ayat pada kadar ~72vh setiap satu, ditambah babak
     masuk dan babak penutup. Nilai ini bukan sewenang-wenang —
     memendekkannya bermakna memampatkan rentak salinan.
     Nota sejarah: 500vh, bukan 560vh. Babak penutup lama — kotak dicondongkan
     sehingga mulutnya menelan bingkai, kemudian tabir krim — tidak
     pernah benar-benar mengisi skrin: pada p>=.90 kotak itu terukur
     3733x167px, satu jalur nipis di atas krim kosong. Itu kira-kira
     0.6 skrin tatalan tanpa apa-apa untuk dilihat. Ekor itu dibuang
     dan seksyen kini ditutup dengan pudar lembut.
     Pemalar masa di dalam JS didarab 1.15 (460vh/400vh) supaya tiga
     blok salinan mengekalkan rentak MUTLAK yang sama; tanpa itu,
     memendekkan seksyen hanya memampatkan semuanya. */
  --drop:0px;   /* anjakan kotak ke bawah; hanya telefon/tablet tegak */
  position:relative;height:660vh;background:var(--santan);
  --bh:clamp(272px,54vh,540px);
}
/* z-2 supaya bingkai yang dipin sentiasa menutup seksyen berikutnya
   sepanjang animasi; seksyen itu ditarik naik 100svh (lihat di bawah)
   dan akan menyelinap masuk dari bawah tanpa ini. */
/* Latar LEGAP diperlukan, bukan sekadar z-index. Bingkai yang dipin
   ini dahulunya lut sinar — krim itu datang daripada .cine sendiri
   (z-auto) — jadi seksyen berikutnya pada z-1 melukis DI ATAS krim
   itu dan hanya berada di bawah anak-anak sticky. Hasilnya jalur
   hijau menyelinap naik dari bawah semasa kotak masih beranimasi.
   Dengan latar sendiri, bingkai ini benar-benar melindungi. */
.cine-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  z-index:2;background:var(--santan);
}
/* Peralihan tindanan: Cara Penyediaan ditarik naik satu skrin penuh
   dan duduk DI HADAPAN bingkai yang dipin (z 3 > 2). Sepanjang skrin
   tatalan terakhir seksyen ini, ia naik dari bawah dan menutup bingkai
   pada kelajuan tatalan penuh, sementara bingkai hanya hanyut perlahan
   (ua-core.js) — yang baharu bergerak lebih laju daripada yang lama.
   Bayang di tepi atas memisahkan kedua-dua lapisan semasa bertindih.
   Digunakan hanya apabila animasi benar-benar berjalan — pada
   prefers-reduced-motion, .cine runtuh kepada height:auto dan
   tindanan ini akan memakan kandungan. */
.cine--pinned + .sec--ways{
  margin-top:-100vh;margin-top:-100svh;
  position:relative;z-index:3;
  box-shadow:0 -30px 60px -24px rgba(4,29,17,.38);
}
.cine-sticky > .batik{opacity:.055}
.cine-glow{
  position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(255,222,158,.92),rgba(213,168,75,.42) 30%,rgba(247,241,227,0) 62%);
}

/* ---- pentas 3D ---- */
/* Warnanya sengaja sama dengan latar #kelebihan. Sebaik kotak
   memenuhi skrin, tabir ini melarutkannya menjadi warna itu, jadi
   apabila seksyen ini berhenti dipin tiada jahitan yang kelihatan —
   krim bertukar kepada krim, dan seksyen seterusnya cuma muncul. */
/* Tabir ialah warna seksyen SETERUSNYA, bukan krim. Ia dahulu
   var(--putih) kerana Cara Penyediaan dahulunya krim; seksyen itu kini
   hijau gelap, jadi tabir krim akan berkelip putih sebelum bertukar
   gelap. Diklip sebagai bulatan yang mengembang dari mulut kotak:
   bukaan itulah peralihannya, dan skrin bertukar terus kepada seksyen
   seterusnya tanpa bingkai kosong di antaranya. */
.cine-veil{
  position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;
  background:var(--daun-deep);
  clip-path:circle(0% at 50% 48%);
}
.cine--static .cine-veil{display:none}
.cine-stage{position:absolute;inset:0;z-index:1;perspective:1500px;perspective-origin:50% 50%}
.box-wrap{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.box-shade{
  position:absolute;left:0;top:0;width:calc(var(--bw)*2.2);height:calc(var(--bh)*.3);
  transition:none;
  margin:calc(var(--bh)*.44) 0 0 calc(var(--bw)*-1.1);border-radius:50%;
  background:radial-gradient(ellipse,rgba(45,37,32,.3),transparent 70%);filter:blur(8px);
}
/* Nisbah diperoleh di sini, bukan pada seksyen, supaya kotak yang
   sama boleh digunakan di hero dan di seksyen sinematik: ibu bapa
   cuma perlu menetapkan --bh. */
.box3d{
  --bw:calc(var(--bh)*.65);   /* 130 mm / 200 mm */
  --bd:calc(var(--bh)*.185);  /*  37 mm / 200 mm — ukuran karton cetakan */
  position:absolute;left:0;top:0;width:var(--bw);height:var(--bh);
  margin:calc(var(--bh)/-2) 0 0 calc(var(--bw)/-2);
  transform-style:preserve-3d;will-change:transform;
}
/* varian dalam aliran biasa, untuk hero */
.bx{position:absolute;left:50%;top:50%;backface-visibility:hidden;background-size:100% 100%;background-repeat:no-repeat}
.bx::after{content:"";position:absolute;inset:0}
.bx-front{
  width:var(--bw);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bw)/-2);
  background-image:var(--t-front);transform:translateZ(calc(var(--bd)/2));
}
.bx-front::after{background:linear-gradient(104deg,rgba(255,255,255,.13),rgba(255,255,255,0) 34%,rgba(45,37,32,.13))}
.bx-back{
  width:var(--bw);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bw)/-2);
  background-image:var(--t-back);transform:rotateY(180deg) translateZ(calc(var(--bd)/2));
}
.bx-back::after{background:rgba(18,26,20,.5)}
.bx-left{
  width:var(--bd);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bd)/-2);
  background-image:var(--t-sideA);transform:rotateY(-90deg) translateZ(calc(var(--bw)/2));
}
.bx-left::after{background:rgba(18,26,20,.26)}
.bx-right{
  width:var(--bd);height:var(--bh);margin:calc(var(--bh)/-2) 0 0 calc(var(--bd)/-2);
  background-image:var(--t-sideB);transform:rotateY(90deg) translateZ(calc(var(--bw)/2));
}
.bx-right::after{background:rgba(18,26,20,.42)}
.bx-bottom{
  width:var(--bw);height:var(--bd);margin:calc(var(--bd)/-2) 0 0 calc(var(--bw)/-2);
  background-color:#E7DDC7;background-image:var(--t-bottom);transform:rotateX(-90deg) translateZ(calc(var(--bh)/2));
}
.bx-bottom::after{background:rgba(18,26,20,.5)}
/* mulut kotak — hanya kelihatan bila penutup terangkat */
.bx-mouth{
  position:absolute;left:50%;top:50%;
  width:calc(var(--bw) - 5px);height:calc(var(--bd) - 4px);
  margin:calc((var(--bd) - 4px)/-2) 0 0 calc((var(--bw) - 5px)/-2);
  transform:rotateX(90deg) translateZ(calc(var(--bh)/2 - 3px));
  /* Dalaman kotak ialah warna seksyen SETERUSNYA, bukan coklat gelap.
     Inilah keseluruhan peralihan: apabila mulut membesar sehingga
     memenuhi bingkai, skrin sudah pun menjadi Cara Penyediaan. */
  background:var(--daun-deep);
}
.bx-mouth::after{
  content:"";position:absolute;inset:0;
  /* Cahaya emas menghangatkan mulut semasa penutup terbuka, kemudian
     --seal memadamkannya sebelum mulut memenuhi skrin — jika tidak,
     bingkai terakhir ialah kolam emas dan bukan hijau gelap. */
  opacity:calc(var(--open,0) * (1 - var(--seal,0)));
  background:radial-gradient(ellipse at 50% 62%,rgba(255,219,150,.9),rgba(255,178,74,.34) 52%,transparent 78%);
}
/* penutup: engsel pada bibir belakang, 90deg tertutup > 252deg terbuka penuh */
.bx-lid{
  position:absolute;left:50%;top:50%;width:var(--bw);height:var(--bd);
  margin-left:calc(var(--bw)/-2);transform-style:preserve-3d;transform-origin:50% 0;
  transform:translate3d(0,calc(var(--bh)/-2),calc(var(--bd)/-2)) rotateX(var(--lid,90deg));
}
.bx-lid span{position:absolute;inset:0;backface-visibility:hidden}
.bx-lid span::after{content:"";position:absolute;inset:0}
.lid-out{background:var(--t-top) center/100% 100% no-repeat;transform:translateZ(.4px)}
.lid-out::after{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(45,37,32,.1))}
.lid-in{transform:rotateY(180deg) translateZ(.4px);background:#DBCEB2}
.lid-in::after{background:rgba(18,26,20,.3)}

/* ---- salinan sinematik ---- */
.cine-title{
  position:absolute;left:50%;top:50%;z-index:3;
  width:min(92vw,900px);
  text-align:center;color:var(--gula);font-size:clamp(32px,6vw,74px);
  transform:translate(-50%,-50%);will-change:opacity,transform;
}
/* Logo di bawah tajuk. Pseudo-elemen, bukan <img>, supaya ia ikut
   pudar dan gerak tajuk yang dikawal ua-core.js tanpa elemen kedua
   untuk dianimasikan; logo yang sama sudah ada di nav untuk pembaca
   skrin. Tajuk dipusatkan dengan translate(-50%,-50%), jadi tajuk +
   logo kekal di tengah skrin sebagai satu kumpulan. */
.cine-title::after{
  content:"";display:block;margin:clamp(14px,2.2vw,24px) auto 0;
  width:clamp(130px,15vw,200px);aspect-ratio:600/457;
  background:url(../img/f-logo.webp) center/contain no-repeat;
  filter:drop-shadow(0 10px 24px rgba(4,29,17,.45));
}
/* Struktur Bike Bear: perkataan besar sebagai tajuk rentak, baris
   tebal sebagai kenyataan, perenggan sempit sebagai penjelasan. Lebar
   perenggan sengaja jauh lebih sempit daripada perkataan itu — itulah
   yang memberi kontras dan menjadikan perkataan itu berbunyi kuat. */
.cine-copy{
  position:absolute;z-index:3;opacity:0;
  /* Lebar lajur dan saiz perkataan besar diikat bersama (lihat .cc-word):
     4.6vw ialah 34vw / 7.4, iaitu saiz terbesar di mana tajuk paling
     panjang — HADIAH DAN / BUAH TANGAN, 709px pada 100px — masih muat
     dua baris dalam lajur, dan TEKNOLOGI (568px pada 100px) muat satu
     baris. Semua empat tajuk berkongsi satu saiz dan tiada yang terkeluar. */
  width:min(34vw,600px);
  will-change:opacity,transform;
}
/* Serif yang sama seperti setiap tajuk di laman ini (h1-h4), bukan
   sans tebal rujukan. Cormorant pada berat 600 membaca lebih ringan
   daripada Poppins 700 pada saiz piksel yang sama, jadi jarak huruf
   dilonggarkan kepada nilai tajuk dan line-height dinaikkan sedikit
   — huruf besar Cormorant lebih tinggi dan .9 memampatkannya. */
.cc-word{
  display:block;
  font-family:var(--serif);font-weight:600;text-transform:uppercase;
  font-size:clamp(38px,4.6vw,81px);line-height:.98;letter-spacing:-.004em;
  color:var(--gula);
  margin-bottom:clamp(12px,1.6vw,22px);
}
.cine-copy p{
  margin:0;max-width:290px;
  font-size:clamp(14px,1.05vw,16.5px);line-height:1.66;color:var(--kopi-soft);
}
/* baris utama sebagai barisnya sendiri, seperti "We think bigger." */
.cine-copy b{display:block;margin-bottom:.4em;color:var(--gula);font-weight:700}
/* JS menulis transform:translate(var(--cx),Ypx), jadi pemusatan
   menegak MESTI datang daripada margin dan bukan translateY —
   translateY akan dipadam pada bingkai animasi pertama. */
/* translate (sifat berasingan) memusatkan blok mengikut tingginya sendiri.
   Ia tidak bertembung dengan transform yang ditulis JS setiap bingkai —
   margin-top tetap -118px menolak blok tinggi keluar dari bawah skrin. */
.cc-left{--cx:0;left:clamp(24px,6vw,96px);top:50%;margin-top:0;translate:0 -50%}
.cc-right{--cx:0;right:clamp(24px,6vw,96px);top:50%;margin-top:0;translate:0 -50%;text-align:right}
.cc-right p{margin-left:auto}
.cine-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--kopi-faint);
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
.cine-cue i{display:block;width:1px;height:26px;background:linear-gradient(var(--daun),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* Tiada ruang di tepi pada telefon, jadi ketiga-tiga ayat berkongsi
   satu kedudukan: di ATAS kotak. Meletakkannya di bawah bermakna
   pembaca perlu mengimbas melepasi kotak untuk sampai kepada ayat,
   dan pada skrin panjang ayat itu jatuh hampir ke bibir bawah. */
@media (max-width:900px){
  /* kotak dikecilkan sedikit supaya blok teks di atas dan kotak di
     tengah tidak pernah bertindih, walaupun pada skrin 667px */
  /* Kotak dibesarkan (34vh -> 40vh) dan diturunkan 9svh. Turun itu
     juga yang memberi ruang: perenggan Retort kini jauh lebih
     panjang, dan tanpa anjakan blok teksnya naik ke bawah bar nav. */
  .cine{--bh:clamp(210px,40vh,340px);--drop:9svh}
  /* Perkataan besar mengecil dahulu pada skrin sempit: ia paling
     banyak memakan tinggi, dan blok ini mesti muat DI ATAS kotak. */
  .cc-word{font-size:clamp(23px,6.6vw,44px);line-height:1.08;margin-bottom:10px}
  .cine-copy p{font-size:15.5px;line-height:1.6;max-width:none;margin-inline:auto}
  /* Diikat pada kotak, bukan pada bar nav. Bahagian bawah blok
     teks duduk 18px di atas bibir atas kotak, jadi teks tumbuh ke
     ATAS apabila ia panjang — bukan turun ke dalam kotak — dan
     jaraknya kekal sama walaupun --bh berubah antara breakpoint.
     0.43 = 0.86/2, iaitu separuh tinggi kotak semasa bab bercerita,
     ketika ia mengecil sedikit untuk memberi ruang kepada ayat. */
  .cc-left,.cc-right{
    --cx:-50%;left:50%;right:auto;translate:none;
    top:auto;bottom:calc(50% - var(--drop) + var(--bh) * 0.43 + 24px);margin-top:0;
    width:min(88vw,560px);text-align:center;
  }
}
/* telefon melintang: tinggi terlalu sedikit untuk kotak penuh
   dan satu blok teks, jadi kotak dikecilkan dahulu */
/* Semakin pendek skrin, semakin rapat blok teks kepada bar nav dan
   semakin kecil kotak — kedua-duanya perlu berkongsi tinggi yang
   sama, dan teks yang bertindih dengan kotak lebih buruk daripada
   kotak yang sedikit kecil. */
/* Tablet menegak: had 300px di atas dikira untuk skrin pendek. Pada
   1024px tinggi ia meninggalkan kotak sebesar telefon di tengah-tengah
   bingkai dan hampir 370px krim kosong di bawahnya. Ruang menegak di
   sini memang ada, jadi kotak dibenarkan membesar; jurang 18px antara
   teks dan bibir kotak dikira daripada --bh, jadi ia terpelihara. */
@media (min-width:600px) and (max-width:900px) and (min-height:900px){
  .cine{--bh:clamp(340px,46vh,480px)}
}
@media (max-width:900px) and (max-height:740px){
  /* Skrin pendek: turun lebih jauh (12svh). Pada 667px rentak Hadiah
     (perkataan dua baris) hanya 4px dari bar nav pada 9svh, sedangkan
     masih ada ~165px kosong di bawah kotak. */
  .cine{--bh:clamp(185px,33vh,280px);--drop:12svh}
  .cc-word{font-size:clamp(21px,6vw,38px);line-height:1.08;margin-bottom:8px}
  .cine-copy p{font-size:15px;line-height:1.55}
  .cc-left,.cc-right{bottom:calc(50% - var(--drop) + var(--bh) * 0.43 + 18px)}
}
/* Telefon melintang tidak boleh menyusun tegak langsung: 390px
   tinggi tolak bar nav tiada ruang untuk teks di atas dan kotak di
   tengah. Tetapi ia lebar, jadi susunan tepi seperti desktop kembali
   sesuai — masalahnya kekurangan tinggi, bukan kekurangan lebar. */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  .cine{--bh:clamp(130px,46vh,210px);--drop:0px}
  .cc-word{font-size:clamp(24px,4.4vw,38px);margin-bottom:7px}
  .cine-copy p{font-size:14px;line-height:1.55;max-width:none}
  .cc-left{--cx:0;left:16px;right:auto;top:50%;bottom:auto;margin-top:-74px;width:min(36vw,320px);text-align:left}
  .cc-right{--cx:0;left:auto;right:16px;top:50%;bottom:auto;margin-top:-74px;width:min(36vw,320px);text-align:right}
}

/* ============================================================
   LATAR BERCERITA — gambar penuh bingkai bagi setiap babak

   Hanya aktif apabila .cine--photo ada (PHP menambahnya bila
   sekurang-kurangnya satu gambar wujud). Gambar di bawah, lapisan
   hijau gelap di atasnya, teks krim di atas semua — sama seperti hero.

   Kekuatan lapisan dikira terhadap kes paling teruk, gambar putih
   penuh: pada .72 perenggan krim mencapai ~5:1, melepasi 4.5:1 untuk
   teks biasa. Jalur tengah desktop (tempat kotak, tiada perenggan)
   dibenarkan lebih cerah supaya gambar masih bercerita.
   ============================================================ */
.cine-bgs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cine-bg{
  position:absolute;inset:0;opacity:0;
  background-image:var(--bg);background-size:cover;background-position:center;
  will-change:opacity,transform;
}
/* Peralihan lembut antara jalur faedah hero (hijau pekat) dan gambar
   penuh skrin seksyen Tentang. Tanpa ini, tepi jalur bertemu gambar
   sebagai garis lurus yang kelihatan seperti dua laman berbeza
   dicantum. Kecerunan ini berada di dalam bingkai yang dipin, jadi ia
   juga melembutkan tepi atas sepanjang babak bercerita. */
.cine--photo .cine-bgs::after{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(90px,16vh,190px);
  background:linear-gradient(180deg,#041D11 0%,rgba(4,29,17,.72) 42%,rgba(4,29,17,0) 100%);
  pointer-events:none;z-index:1;
}
/* hujung bawah juga: seksyen Cara Penyediaan (hijau pekat) menindih
   gambar semasa tatalan, jadi tepi bawah dilembutkan dengan cara yang
   sama */
.cine--photo .cine-bgs::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(70px,12vh,150px);
  background:linear-gradient(0deg,#041D11 0%,rgba(4,29,17,0) 100%);
  pointer-events:none;z-index:1;
}
.cine-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(4,29,17,.76) 0%,rgba(4,29,17,.72) 41%,rgba(4,29,17,.58) 50%,
    rgba(4,29,17,.72) 59%,rgba(4,29,17,.76) 100%);
}
@media (max-width:900px){
  /* 1024px, bukan fail penuh — telefon tidak perlukan 2000px */
  .cine-bg{background-image:var(--bg-m,var(--bg))}
  /* Teks telefon di atas, kotak di tengah: gelap paling pekat di
     bahagian atas, lebih cerah di sekitar kotak. */
  .cine-scrim{
    background:linear-gradient(180deg,
      rgba(4,29,17,.84) 0%,rgba(4,29,17,.76) 44%,
      rgba(4,29,17,.56) 64%,rgba(4,29,17,.72) 100%);
  }
}
/* Latar asas hijau gelap: jika gambar pertama tiada atau lambat
   dimuatkan, teks krim tidak pernah berada di atas krim. */
.cine--photo .cine-sticky{background:var(--daun-deep)}
.cine--photo .cine-sticky > .batik{display:none}
.cine-steps{
  position:absolute;left:50%;bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));z-index:3;
  width:min(78vw,340px);translate:-50% 0;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
}
.cs-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cs-bars i{display:block;height:3px;border-radius:3px;overflow:hidden;background:rgba(45,37,32,.14)}
.cs-bars b{display:block;height:100%;background:var(--terracotta);transform:scaleX(0);transform-origin:left}
/* label bertindan dalam satu sel grid supaya bertukar tanpa lompat */
.cs-label{display:grid;margin-top:12px}
.cs-label span{
  grid-area:1/1;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--kopi-soft);opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s var(--e-out);white-space:nowrap;
}
.cs-label span.on{opacity:1;transform:none}
.cs-label em{font-style:normal;color:var(--terracotta);margin-right:10px}
.cine--photo .cs-bars i{background:rgba(247,241,227,.22)}
.cine--photo .cs-bars b{background:var(--gold)}
.cine--photo .cs-label span{color:rgba(247,241,227,.86)}
.cine--photo .cs-label em{color:var(--gold)}
.cine--static .cine-steps{display:none}
/* telefon melintang: tiada ruang di bawah kotak */
@media (max-width:900px) and (max-height:560px) and (orientation:landscape){
  .cine-steps{display:none}
}
.cine--photo .cine-title,
.cine--photo .cc-word{color:var(--cream)}
.cine--photo .cine-copy b{color:var(--gold)}
.cine--photo .cine-copy p{color:rgba(247,241,227,.9)}
.cine--photo .cine-title,
.cine--photo .cine-copy{text-shadow:0 2px 18px rgba(4,29,17,.5)}
.cine--photo .cine-cue{color:rgba(244,231,199,.72)}
.cine--photo .cine-cue i{background:linear-gradient(var(--gold),transparent)}

/* tiada animasi: tunjuk semuanya sekali gus, tanpa pin */
.cine--static{height:auto;padding-block:var(--pad)}
.cine--static .cine-sticky{position:static;height:auto;overflow:visible}
.cine--static.cine--photo{background:var(--daun-deep)}
.cine--static.cine--photo .cine-sticky{position:relative}
.cine--static .cine-bg:first-child{opacity:1}
.cine--static .cine-bg:not(:first-child){display:none}
.cine--static .cine-stage{position:relative;inset:auto;height:clamp(300px,52vh,560px);perspective:1500px}
.cine--static .cine-title{position:static;transform:none;opacity:1;margin:0 auto clamp(28px,5vw,52px)}
.cine--static .cine-copy{
  position:static;opacity:1;transform:none;translate:none;left:auto;right:auto;top:auto;bottom:auto;
  width:min(90vw,680px);margin:34px auto 0;text-align:center;
}
.cine--static .cine-copy p{max-width:none;margin-inline:auto}
.cine--static .cine-cue,.cine--static .cine-glow,.cine--static .box-shade{display:none}

/* ===== cara penyediaan — tiga PILIHAN, bukan tiga langkah =====
   Nombor 01-03 cuma label untuk rujukan; tiada garis progres dan
   tiada anak panah, kerana ketiga-tiganya setara dan pembaca hanya
   perlu memilih satu. */
/* Jalur hijau gelap, bukan kad di atas krim. Kad memberi setiap
   pilihan bingkainya sendiri, yang membuatkan ketiga-tiganya
   kelihatan seperti tiga produk berasingan; jalur rata dengan garis
   pemisah nipis membacanya sebagai satu set pilihan setara. */
/* Tajuk mengikut gaya seksyen lain (lihat "Pilihan Untuk Anda"):
   serif besar, huruf biasa, tiada hiasan daun dan tiada rawatan
   huruf besar beremas. Padding dan margin kepala sengaja dibiarkan
   kepada .sec dan .head lalai supaya seksyen ini berkongsi irama
   menegak yang sama seperti yang lain. */
.sec--ways .head h2{color:var(--cream)}
/* Ruang tambahan di atas. Seksyen ini mendarat betul-betul pada tepi
   ATAS viewport apabila peralihan kotak tamat, dan nav yang terapung
   menutupi 76px pertama — jadi padding .sec biasa meninggalkan tajuk
   terhimpit di bawahnya. Seksyen lain tidak menghadapi ini kerana
   pengguna menatal masuk kepadanya secara beransur. */
.sec--ways{padding-top:calc(var(--pad) + clamp(18px,3.4vh,40px))}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start}
.way{position:relative;padding:6px clamp(16px,2.6vw,40px) 0;text-align:center}
/* garis pemisah pada item ke-2 dan ke-3 sahaja, jadi tiada garis
   tergantung di hujung baris apabila ia berbalut */
.way + .way::before{
  content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px;
  background:linear-gradient(rgba(216,168,78,0),rgba(216,168,78,.3),rgba(216,168,78,0));
}
.way-ico{
  display:block;margin:0 auto clamp(14px,1.8vw,22px);
  width:clamp(72px,7.4vw,98px);height:clamp(72px,7.4vw,98px);
  color:var(--gold);
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) ease;
}
.way-ico svg{width:100%;height:100%;display:block}
.way:hover .way-ico{transform:translateY(-4px)}
/* Gambar kaedah kini LATAR kadnya sendiri, pudar di belakang teks.
   Teks kekal krim di atas hijau pekat; gambar hanya memberi suasana,
   jadi kelegapan sengaja rendah dan satu lapisan hijau ditambah di
   atasnya supaya baris terkecil pun masih terbaca. */
.ways{gap:clamp(12px,1.6vw,22px)}
.way{
  position:relative;overflow:hidden;border-radius:20px;
  padding:clamp(30px,3.4vw,46px) clamp(18px,2.2vw,30px) clamp(26px,3vw,38px);
  background:rgba(4,29,17,.55);
  transition:transform var(--t-ui) var(--e-out);
}
.way:hover{transform:translateY(-4px)}
/* pembahagi menegak tidak lagi masuk akal antara kad */
.way + .way::before{display:none}
.way-photo{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;margin:0;
  object-fit:cover;border-radius:inherit;
  opacity:.6;transition:opacity var(--t-ui) ease;
}
.way:hover .way-photo{opacity:.7}
/* lapisan hijau di atas gambar: tanpa ini teks kecil hilang dalam
   bahagian gambar yang cerah */
.way::after{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(4,29,17,.2),rgba(4,29,17,.54));
  pointer-events:none;
}
.way h3,.way ul,.way .way-ico{position:relative;z-index:1}
@media (max-width:760px){
  .way{border-radius:16px;padding:clamp(26px,6vw,34px) 18px}
}
.way h3{
  display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap;
  font-family:var(--sans);font-size:clamp(14px,1.25vw,17px);font-weight:600;
  letter-spacing:.03em;color:var(--cream);margin-bottom:10px;
}
.way-no{
  font-family:var(--serif);font-size:1.02em;letter-spacing:.1em;
  color:var(--gold);font-weight:600;
}
.way ul{display:grid;gap:5px;max-width:30ch;margin-inline:auto}
/* tiada bulet: rujukan itu dua baris teks berpusat yang tenang, dan
   bulet pada teks berpusat menarik mata ke tepi kiri yang beralun */
.way li{
  font-size:clamp(12px,.95vw,13.5px);line-height:1.66;
  color:rgba(244,231,199,.72);
}
/* Tiada lagi baris terakhir beremas. Emas itu dahulu menyerlahkan
   "Sedia untuk dimakan" sebagai ganjaran setiap kaedah; setelah baris
   itu digugurkan daripada lajur 2 dan 3, :last-child akan menyerlahkan
   "Rendam..." dan "Panaskan..." sebagai gantinya — satu langkah
   pertengahan yang ditonjolkan tanpa sebab. Rujukan itu sendiri
   menggunakan satu warna badan yang seragam. */
/* 820px menjatuhkan tablet menegak 768px ke dalam satu lajur, dan
   tiga langkah pendek ini kemudian menduduki 786px tinggi pada skrin
   yang lebarnya lebih daripada cukup untuk tiga lajur. 700px ialah
   titik sebenar ia menjadi sempit: di bawah itu setiap lajur kurang
   218px dan tajuk langkah mula berpecah dua baris. */
@media (max-width:700px){
  .ways{grid-template-columns:1fr;gap:clamp(28px,4.6vh,40px)}
  .way{padding:0 12px}
  /* menegak jadi mendatar apabila lajur bertindan */
  .way + .way::before{
    left:18%;right:18%;top:calc(clamp(28px,4.6vh,40px) / -2);
    bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,rgba(216,168,78,0),rgba(216,168,78,.3),rgba(216,168,78,0));
  }
}

/* ===== products ===== */
/* ===== kedai: sisi penapis + bar alat + grid/senarai ===== */
.shop{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.shop-side{
  position:sticky;top:calc(var(--nav-h) + 16px);
  background:var(--putih);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(18px,2vw,24px);
}
.fgrp + .fgrp{margin-top:clamp(18px,2vw,26px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--rule)}
.fgrp h4{
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gula);margin-bottom:12px;
}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;font-size:var(--small);color:var(--kopi-soft)}
.fopt input{position:absolute;opacity:0;width:0;height:0}
/* kotak semak dilukis sendiri: kotak asal tidak boleh diwarnakan
   secara konsisten merentas pelayar */
.fopt i{
  width:19px;height:19px;flex:none;border-radius:6px;border:1.5px solid var(--rule);
  display:flex;align-items:center;justify-content:center;background:var(--putih);
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease;
}
.fopt i svg{width:12px;height:12px;color:var(--putih);opacity:0;transition:opacity var(--t-micro) ease}
.fopt input:checked + i{background:var(--daun);border-color:var(--daun)}
.fopt input:checked + i svg{opacity:1}
.fopt input:focus-visible + i{outline:2.5px solid var(--terracotta);outline-offset:2px}
.fopt:hover{color:var(--kopi)}
.fopt b{font-weight:400}
.fcount{margin-left:auto;font-size:var(--tiny);color:var(--kopi-faint);font-weight:600}
.fclear{
  margin-top:18px;width:100%;padding:10px;border-radius:var(--r-btn);
  border:1.5px solid var(--rule);font-size:var(--tiny);font-weight:600;color:var(--kopi-soft);
  transition:border-color var(--t-micro) ease,color var(--t-micro) ease;
}
.fclear:hover{border-color:var(--daun);color:var(--daun)}

.shop-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:clamp(16px,2vw,24px);
}
.shop-count{margin:0;font-size:var(--small);color:var(--kopi-soft)}
.shop-count b{color:var(--gula);font-weight:700}
.shop-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* butang penapis: tersembunyi di desktop, di mana panel sudah kelihatan */
.fbtn{
  display:none;align-items:center;gap:9px;
  height:42px;padding:0 16px;border-radius:var(--r-btn);
  border:1.5px solid var(--rule);background:var(--putih);
  font-size:var(--small);font-weight:600;color:var(--kopi-soft);
  transition:border-color var(--t-micro) ease,color var(--t-micro) ease;
}
.fbtn svg{width:17px;height:17px}
.fbtn:hover{border-color:var(--daun);color:var(--daun)}
.fbtn-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--daun);color:var(--putih);font-size:11px;font-weight:700;
}
/* display:inline-flex di atas mengalahkan [hidden] daripada helaian
   pelayar, jadi lencana "0" tetap kelihatan walaupun JS menetapkan
   hidden. Sifar penapis aktif tidak sepatutnya dipaparkan langsung. */
.fbtn-n[hidden]{display:none}
/* kepala helaian — hanya untuk mod lembaran timbul */
.fhead{display:none;align-items:center;justify-content:space-between;margin-bottom:16px}
.fhead b{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--gula)}
.fclose{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--rule);color:var(--kopi-soft);
}
.fclose svg{width:16px;height:16px}
.fclose:hover{border-color:var(--daun);color:var(--daun)}
.sortw{display:flex;align-items:center;gap:9px;font-size:var(--tiny);color:var(--kopi-soft)}
.sortw select{
  font:inherit;font-size:var(--small);color:var(--kopi);
  background:var(--putih);border:1.5px solid var(--rule);border-radius:var(--r-btn);
  padding:9px 12px;cursor:pointer;
}
.sortw select:hover{border-color:rgba(82,107,74,.42)}
.viewsw{display:flex;gap:6px}
.viewsw button{
  width:42px;height:42px;border-radius:var(--r-btn);
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--rule);color:var(--kopi-soft);background:var(--putih);
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease,color var(--t-micro) ease;
}
.viewsw button svg{width:18px;height:18px}
.viewsw button:hover{border-color:rgba(82,107,74,.42);color:var(--daun)}
.viewsw button.on{background:var(--daun);border-color:var(--daun);color:var(--putih)}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:20px}
/* ---- paparan senarai: kad yang sama, dibaringkan ---- */
/* Kekhususan 0,2,0 sengaja: peraturan .pgrid di dalam media query
   di bawah datang KEMUDIAN dalam fail, jadi pada kekhususan yang
   sama ia menang dan paparan senarai kekal dua lajur pada telefon. */
.pgrid.pgrid--list{grid-template-columns:minmax(0,1fr);gap:12px}
.pgrid--list .pcard{flex-direction:row;align-items:stretch}
/* Sebelum ini seni senarai ialah panel rata yang meregang penuh
   tinggi kad (align-items:stretch), jadi nisbahnya berubah mengikut
   panjang teks setiap produk — satu kad kelihatan persegi, kad
   seterusnya jalur tinggi. Sekarang ia lakaran PERSEGI bersaiz
   tetap yang ditengahkan, jadi setiap baris membahagi ruang dengan
   cara yang sama. */
.pgrid--list .pcard-art{
  aspect-ratio:1;width:clamp(104px,14vw,156px);flex:none;align-self:center;
  margin:14px 0 14px 14px;border-radius:14px;
}
.pgrid--list .pcard-body{padding-left:18px}
.pgrid--list .pcard-body{flex-direction:row;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.pgrid--list .pcard-main{flex:1 1 260px;min-width:0}
.pgrid--list .pcard-desc{flex:none}
.pgrid--list .pcard-meta{margin:0;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.pgrid--list .pcard-buy{grid-template-columns:auto auto;align-items:center;flex:none}
.pgrid--list .pcard:hover{transform:none;box-shadow:0 14px 30px rgba(45,37,32,.08)}
/* dalam grid, bahagian utama hanya mengalir seperti biasa */
.pcard-main{display:flex;flex-direction:column;flex:1;min-width:0}

.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(24px,3vw,40px)}
.pager button,
.pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  min-width:40px;height:40px;padding:0 12px;border-radius:var(--r-btn);
  border:1.5px solid var(--rule);font-size:var(--small);font-weight:600;color:var(--kopi-soft);
  background:var(--putih);
  transition:background var(--t-micro) ease,border-color var(--t-micro) ease,color var(--t-micro) ease;
}
.pager button:hover:not(:disabled),
.pager a.page-numbers:hover{border-color:var(--daun);color:var(--daun)}
.pager button.on,
.pager .page-numbers.current{background:var(--daun);border-color:var(--daun);color:var(--putih)}
.pager button:disabled,
.pager .page-numbers.is-off{opacity:.4;cursor:default}
.pager .page-numbers.dots{border-color:transparent;background:transparent}
.pager svg{width:15px;height:15px}
.shop-empty{padding:44px 20px;text-align:center;color:var(--kopi-soft);font-size:var(--small)}

@media (max-width:900px){
  /* Panel penapis menjadi lembaran timbul dari bawah. Sebagai jalur
     penuh di atas grid ia menolak produk jauh ke bawah skrin sebelum
     satu pun kelihatan; sebagai lembaran ia hanya muncul apabila
     diminta. */
  .shop{grid-template-columns:minmax(0,1fr);gap:20px}
  .fbtn{display:inline-flex}
  .fhead{display:flex}
  .shop-side{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
    max-height:82vh;overflow:auto;-webkit-overflow-scrolling:touch;
    border-radius:22px 22px 0 0;border:0;
    box-shadow:0 -18px 44px rgba(38,51,31,.28);
    padding:20px 20px calc(22px + env(safe-area-inset-bottom,0px));
    transform:translateY(101%);visibility:hidden;
    transition:transform .42s var(--e-out),visibility 0s .42s;
  }
  .shop-side.on{transform:none;visibility:visible;transition:transform .42s var(--e-out),visibility 0s}
  /* elemen .rv memudarkan masuk semasa tatal; pada lembaran ini
     ia mesti sentiasa legap atau panel dibuka tanpa kandungan */
  .shop-side.rv{opacity:1;transform:translateY(101%)}
  .shop-side.rv.on{transform:none}
  /* baris penapis lebih tinggi dalam mod lembaran: 38px berada di
     bawah ambang sasaran sentuh dan senarai ini semuanya sasaran */
  .fopt{padding:11px 0}
  .pgrid--list .pcard-body{flex-direction:column;align-items:flex-start;gap:10px}
  /* 260px pada .pcard-main ialah asas LEBAR selagi badan kad sebaris.
     Sebaik ia bertukar menjadi lajur di sini, asas yang sama menjadi
     asas TINGGI — dan kad senarai terbuka dengan lubang kosong 200px
     di bawah tajuk kerana tiada apa-apa yang mengisinya. */
  .pgrid--list .pcard-main{flex:0 1 auto}
  .pgrid--list .pcard-meta{flex-direction:row;align-items:baseline;align-self:stretch;justify-content:space-between}
  .pgrid--list .pcard-buy{align-self:stretch;grid-template-columns:auto 1fr}
}
@media (max-width:560px){
  /* 44px penuh — 40-42px berada di bawah ambang sasaran sentuh */
  .viewsw button{width:44px;height:44px}
  .pager button,.pager .page-numbers{min-width:44px;height:44px}
  .fbtn{height:44px}
  .fclose{width:44px;height:44px}
  .shop-bar{align-items:flex-start;flex-direction:column}
  /* Sebagai flex, ketiga-tiga alat ini tidak muat pada satu baris
     (146 + 270 + 94 > 342) dan setiap satu jatuh ke barisnya sendiri:
     152px kromium sebelum satu produk pun kelihatan. Grid dua baris
     memberi butang penapis dan penukar paparan berkongsi baris atas,
     dan menu susunan mengambil selebar penuh di bawahnya. */
  .shop-tools{
    width:100%;display:grid;gap:10px 12px;
    grid-template-columns:1fr auto;align-items:center;
  }
  .shop-tools .fbtn{justify-self:start}
  .shop-tools .viewsw{grid-column:2;grid-row:1}
  .shop-tools .sortw{grid-column:1/-1;grid-row:2}
  .sortw select{flex:1;min-width:0}
  /* ---- baris senarai pada telefon ----
     Lakaran kecil di sebelah badan yang bertindan meninggalkan satu
     lajur kosong setinggi 200px di bawah gambar — harga dan butang
     duduk jauh ke kanan sementara ruang di kiri tidak digunakan.

     Jadi kad menjadi grid dua lajur: gambar dan tajuk berkongsi
     baris pertama, kemudian harga dan butang merentangi SELURUH
     lebar kad di bawahnya. display:contents pada .pcard-body
     mengangkat ketiga-tiga bahagiannya menjadi item grid kad,
     supaya tiada pembungkus di tengah yang menghalang rentangan. */
  .pgrid--list .pcard{
    display:grid;grid-template-columns:104px minmax(0,1fr);
    gap:10px 12px;padding:12px;align-items:start;
  }
  .pgrid--list .pcard-art{width:104px;margin:0;border-radius:12px;grid-column:1;grid-row:1}
  .pgrid--list .pcard-body{display:contents}
  .pgrid--list .pcard-main{grid-column:2;grid-row:1;min-width:0}
  .pgrid--list .pcard-meta{
    grid-column:1/-1;flex-direction:row;align-items:baseline;
    justify-content:space-between;margin:0;min-width:0;
  }
  .pgrid--list .pcard-sum{grid-column:1/-1;margin:0}
  /* butang troli mengambil baki lebar; pada 342px kad, penambah
     kuantiti 138px dan butang berkongsi satu baris dengan selesa */
  .pgrid--list .pcard-buy{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
}

.pcard{
  position:relative;display:flex;flex-direction:column;background:var(--putih);
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;
  transition:transform .38s cubic-bezier(.2,.8,.3,1),box-shadow .38s ease,border-color .38s ease;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 42px rgba(45,37,32,.11);border-color:rgba(82,107,74,.3)}
.pcard-art{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard-art .batik{opacity:.13}
.pcard-art .pk{background-image:var(--pack-sm);position:relative;z-index:1;height:84%;width:auto;aspect-ratio:1005/1504;filter:drop-shadow(0 12px 18px rgba(45,37,32,.28));transition:transform .4s ease}
.pcard:hover .pcard-art .pk{transform:translateY(-4px) scale(1.04)}
.pcard-art::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translateX(-40%);transition:opacity .45s ease,transform .75s var(--e-out);
}
.pcard:hover .pcard-art::after{opacity:1;transform:translateX(40%)}
.pcard-price,.pcard-buy .btn{transition:transform var(--t-ui) var(--e-out),background var(--t-ui) ease,box-shadow var(--t-ui) ease}
.pcard:hover .pcard-price{transform:translateY(-2px)}
.pcard:hover .pcard-buy .btn--green{box-shadow:0 10px 22px rgba(82,107,74,.24)}
.a-lauk{background:linear-gradient(160deg,#EFE3CB,#DFC9A4);color:var(--gula)}
.a-nasi{background:linear-gradient(160deg,#F2ECDC,#DED3B4);color:var(--daun-deep)}
.a-bubur{background:linear-gradient(160deg,#EAE6D4,#CFC7A6);color:var(--gula-deep)}
.a-set{background:linear-gradient(160deg,#465E3F,#041D11);color:var(--santan)}
.pcard-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pcard-cat{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--terracotta)}
.pcard h3{font-size:clamp(19px,1.8vw,22px);color:var(--gula);margin:8px 0 7px;line-height:1.16}
.pcard-desc{font-size:var(--tiny);color:var(--kopi-soft);line-height:1.6;flex:1}
/* harga siar dipalang, di sebelah harga sebenar */
.pcard-price s{
  margin-left:8px;font-size:.62em;font-weight:400;
  color:var(--kopi-faint);text-decoration-thickness:1px;
}
/* jumlah baris muncul hanya apabila lebih daripada satu dipilih —
   pada kuantiti 1 ia hanya mengulang harga di atasnya */
.pcard-sum{
  margin:6px 0 0;font-size:var(--tiny);font-weight:600;color:var(--daun);
}
.pcard-sum[hidden]{display:none}
.line-unit{display:block;font-size:var(--tiny);color:var(--kopi-faint);margin:2px 0 6px}
.drawer-bulk{
  margin:0 0 12px;padding:10px 12px;border-radius:var(--r-btn);
  background:rgba(82,107,74,.09);color:var(--daun);
  font-size:var(--tiny);font-weight:600;text-align:center;
}
.drawer-bulk[hidden]{display:none}
.pcard-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 14px}
.pcard-price{font-family:var(--sans);font-size:20px;font-weight:600;color:var(--daun);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pcard-wt{font-size:var(--tiny);color:var(--kopi-faint);font-weight:600}
.qty{display:flex;align-items:center;gap:12px;border:1.5px solid var(--rule);border-radius:var(--r-btn);padding:5px}
.qty button{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:var(--daun);transition:background .22s ease;
}
.qty button:hover{background:rgba(82,107,74,.12)}
.qty span{min-width:22px;text-align:center;font-weight:700;font-size:var(--small)}
.pcard-buy{display:grid;gap:10px}
.pcard-buy .qty{justify-content:space-between}

/* ===== testimonials ===== */
.tst-wrap{max-width:760px;margin-inline:auto}
.tst-view{overflow:hidden;border-radius:var(--r-card);touch-action:pan-y}
/* kad sendiri sudah bersudut; radius pada bingkai hanya mengerat
   sudut kad hujung apabila tiga kad berkongsi satu halaman */
@media (min-width:1024px){.tst-view{border-radius:0;overflow:clip visible;overflow-x:clip}}
.tst-track{
  display:flex;gap:var(--tst-gap,0px);
  /* satu halaman dianjak selebar paparan DITAMBAH satu jurang: kad
     terakhir halaman ini dan kad pertama halaman berikutnya
     dipisahkan oleh jurang itu */
  transform:translateX(calc(var(--i,0) * -1 * (100% + var(--tst-gap,0px))));
  transition:transform .62s var(--e-soft);will-change:transform;
}
.tst-card{
  position:relative;flex:0 0 calc((100% - (var(--per,1) - 1) * var(--tst-gap,0px)) / var(--per,1));min-width:0;
  background:var(--putih);border-radius:var(--r-card);padding:clamp(28px,4vw,42px);
  border:1px solid var(--rule);display:flex;flex-direction:column;gap:18px;
}
.tst-card blockquote{font-size:clamp(21px,2.6vw,30px)}
.tst-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.tst-arrow{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rule);
  display:flex;align-items:center;justify-content:center;color:var(--kopi-soft);
  transition:border-color var(--t-micro) ease,color var(--t-micro) ease,transform var(--t-micro) var(--e-out);
}
.tst-arrow:hover{border-color:var(--daun);color:var(--daun);transform:scale(1.06)}
.tst-arrow svg{width:22px;height:12px}
.tst-arrow.prev svg{transform:rotate(180deg)}
.tst-dots{display:flex;align-items:center;gap:9px}
.tst-dot{
  width:9px;height:9px;border-radius:50%;background:var(--rule);
  transition:width var(--t-ui) var(--e-out),background var(--t-ui) ease;
}
.tst-dot.on{width:26px;border-radius:5px;background:var(--daun)}
/* ---- ulasan pada latar gelap ----
   Anak panah dan titik dilukis dengan --rule dan --kopi-soft: dua
   warna gelap yang lenyap sepenuhnya pada #041D11. Titik aktif pula
   bertukar kepada emas — hijau --daun hanya mencapai 2.0:1 pada
   latar itu dan hampir tidak dapat dibezakan daripada yang mati. */
.sec--daun .tst-arrow{border-color:rgba(247,241,227,.28);color:rgba(247,241,227,.82)}
.sec--daun .tst-arrow:hover{border-color:var(--gold);color:var(--gold)}
.sec--daun .tst-dot{background:rgba(247,241,227,.26)}
.sec--daun .tst-dot.on{background:var(--gold)}

/* ============================================================
   KAD DI ATAS LATAR GELAP

   Kad ulasan dan FAQ dibina untuk latar krim: isian putih, garis
   --rule gelap, teks coklat. Di atas #041D11 kad putih menjadi
   blok terang yang terapung, bukan sebahagian seksyen.

   Di sini isiannya hanya diangkat sedikit daripada latar
   (#0A2A19), garisnya krim lut sinar, dan teksnya krim. Nisbah
   beza: tajuk 13.4:1, teks badan 8:1, meta 4.4:1.

   Token diisytiharkan pada .sec--daun supaya kedua-dua jenis kad
   berkongsi nilai yang sama — dan supaya menukar satu warna kad
   di masa depan hanya perlu disentuh di satu tempat.
   ============================================================ */
.sec--daun{
  --card:#0A2A19;
  --card-line:rgba(247,241,227,.14);
  --on-dark:#F7F1E3;
  --on-dark-dim:rgba(247,241,227,.72);
  --on-dark-faint:rgba(247,241,227,.5);
}

/* ---- kad ulasan ---- */
.sec--daun .tst-card{background:var(--card);border-color:var(--card-line)}
.sec--daun .tst-card blockquote{color:var(--on-dark)}
.sec--daun .tst-who{border-top-color:var(--card-line)}
.sec--daun .tst-who b{color:var(--on-dark)}
.sec--daun .tst-who span span{color:var(--on-dark-faint)}
/* bintang emas sudah sesuai pada gelap; bulatan avatar hijau kekal
   kerana teks krim di atasnya masih mencapai 5.8:1 */

/* ---- kad FAQ ---- */
.sec--daun .qa{background:var(--card);border-color:var(--card-line)}
.sec--daun .qa.on{border-color:rgba(216,168,78,.55)}
.sec--daun .qa-q{color:var(--on-dark)}
/* latar hijau .11 dan ikon --daun hanya mencapai 2.6:1 pada kad
   gelap — hampir tidak kelihatan. Emas dibaca pada 7.2:1. */
.sec--daun .qa-q i{background:rgba(247,241,227,.1);color:var(--gold)}
.sec--daun .qa.on .qa-q i{background:var(--gold);color:#20180A}
.sec--daun .qa-a p{color:var(--on-dark-dim)}
.stars{display:flex;gap:3px;color:var(--kunyit)}
.stars svg{width:17px;height:17px}
.tst-card blockquote{
  margin:0;font-family:var(--serif);font-size:clamp(19px,1.9vw,22px);line-height:1.42;color:var(--gula);flex:1;
}
.tst-who{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid var(--rule)}
.tst-av{position:relative;width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center}
.tst-av .batik{opacity:.5;color:var(--daun);border-radius:50%;overflow:hidden}
.tst-av i{
  position:relative;z-index:1;width:42px;height:42px;border-radius:50%;background:var(--daun);color:var(--putih);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-style:normal;
}
.tst-who b{display:block;font-weight:700;font-size:var(--small)}
.tst-who span{font-size:var(--tiny);color:var(--kopi-faint)}
/* ---- desktop: ketiga-tiga ulasan serentak ----
   Hanya ada tiga ulasan. Menunjukkan satu kad 760px pada skrin
   1440px menyembunyikan dua pertiga bukti sosial di belakang
   butang, dan meninggalkan seksyen setinggi 626px untuk satu ayat.
   Di bawah 1024px lajur menjadi terlalu sempit untuk petikan
   serif, jadi karusel kekal di sana. */
@media (min-width:1024px){
  .tst-wrap{max-width:1200px}
  /* tiga kad setiap halaman; --per dan --tst-gap sahaja yang berubah,
     lebar kad dan anjakan halaman terbit daripada kedua-duanya */
  .tst-track{--per:3;--tst-gap:clamp(16px,1.8vw,24px)}
  /* lajur ~368px, bukan kad 760px: pelapik dan petikan mengecil
     seiring supaya bilangan baris kekal munasabah */
  .tst-card{padding:clamp(22px,2.2vw,32px)}
  .tst-card blockquote{font-size:clamp(17px,1.35vw,20px)}
}
/* ===== storage ===== */
/* Tab pil — kini hanya digunakan oleh "Di Mana Nak Beli". Seksyen
   produk bertukar kepada penapis sisi, tetapi seksyen ini masih
   memerlukan gaya yang sama. */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:38px}
.tab{
  font-size:var(--small);font-weight:600;padding:11px 20px;border-radius:100px;
  border:1.5px solid var(--rule);color:var(--kopi-soft);
  transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s ease;
}
.tab:hover{border-color:var(--daun);color:var(--daun)}
/* Pada emas, sempadan --rule dan teks --kopi-soft kedua-duanya terlalu
   lemah, dan hijau --daun pada tuding jatuh ke 2.65:1. */
.sec--emas .tab{border-color:rgba(45,37,32,.3);color:rgba(45,37,32,.82)}
.sec--emas .tab:hover{border-color:var(--gula-deep);color:var(--gula-deep)}
/* pil aktif kekal hijau: putih atas hijau ialah 5.8:1, dan bentuknya
   jelas terpisah daripada emas di belakangnya */

/* ============================================================
   KAD DI ATAS LATAR EMAS

   Kad putih pada emas kelihatan seperti kertas yang ditampal, bukan
   sebahagian seksyen. Di sini isiannya emas yang diangkat sedikit
   (#E6C689) dan dakwatnya coklat pekat.

   Beza isian kad dengan latar hanya 1.37:1 — terlalu halus untuk
   menandakan tepi dengan sendirinya, jadi setiap kad DIWAJIBKAN
   mempunyai garis gelap. Tanpa garis itu kad hilang bentuk.

   Nisbah beza teks: tajuk 6.9:1, badan 5.4:1, jarak km 5.2:1.
   ============================================================ */
.sec--emas{
  --card:#E6C689;
  --card-line:rgba(45,37,32,.22);
  --ink:#54321F;
  --ink-body:rgba(45,37,32,.78);
  --ink-faint:rgba(45,37,32,.58);
}
.sec--emas .shop-card,
.sec--emas .geo-bar,
.sec--emas .outlet,
.sec--emas .mapbox,
.sec--emas .pop,
.sec--emas .zbtn{background:var(--card);border-color:var(--card-line)}

.sec--emas .shop-card b,
.sec--emas .geo-bar b,
.sec--emas .outlet b,
.sec--emas .zbtn{color:var(--ink)}
.sec--emas .shop-card p,
.sec--emas .geo-bar p,
.sec--emas .outlet span{color:var(--ink-body)}
.sec--emas .swipe-note,
.sec--emas .map-hint{color:var(--ink-faint)}

/* pelapik ikon hijau .11 hilang pada emas; dakwat gelap lut sinar
   memberikan bentuk yang sama tanpa warna yang bertelagah */
.sec--emas .shop-ic{background:rgba(45,37,32,.1);color:var(--ink)}

/* butang bergaris: isian putihnya menjadikan setiap kad berlubang */
.sec--emas .btn--line{background:transparent;border-color:rgba(45,37,32,.35);color:var(--ink)}
.sec--emas .btn--line:hover{border-color:var(--ink);color:var(--ink);background:rgba(45,37,32,.07)}

/* titik daratan peta: pada emas ia perlu sedikit lebih tumpat untuk
   kekal terbaca seperti pada latar putih dahulu */
.sec--emas .mapbox .dots{opacity:.55}
.sec--emas .map-hint{background:rgba(230,198,137,.92)}
/* terracotta jatuh ke 2.56:1 pada kad emas — nada yang lebih dalam
   ini kekal sebagai aksen tetapi mengukur 5.2:1 */
.sec--emas .outlet .km{color:#7A3A22}
.sec--emas .outlets::-webkit-scrollbar-track{background:rgba(45,37,32,.1)}
.tab.on{background:var(--daun);border-color:var(--daun);color:var(--putih)}

.store{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.store-item{
  position:relative;overflow:hidden;background:var(--putih);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:30px 28px 30px;
  box-shadow:0 1px 0 rgba(45,37,32,.03),0 14px 32px -24px rgba(45,37,32,.28);
  transition:transform var(--t-ui) var(--e-out),box-shadow var(--t-ui) ease,border-color var(--t-ui) ease;
}
@media (hover:hover){
  .store-item:hover{transform:translateY(-4px);border-color:rgba(82,107,74,.28);box-shadow:0 22px 40px -26px rgba(45,37,32,.38)}
}
/* ikon dalam medalion — setiap langkah warnanya sendiri; "Elakkan"
   memakai terracotta supaya ia dibaca sebagai amaran */
.store-ic{
  --ic:var(--daun);
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  color:var(--ic);background:color-mix(in srgb,var(--ic) 11%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 18%,transparent);
}
.store-ic svg{width:28px;height:28px}
.store-item:nth-child(2) .store-ic{--ic:var(--terracotta)}
.store-item:nth-child(3) .store-ic{--ic:#9A6B1F}
.store-txt{min-width:0}
.store-item::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--terracotta),var(--kunyit));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--e-out);transition-delay:calc(var(--rvd,0ms) + 140ms);
}
.store-item.in::before{transform:scaleX(1)}
/* nombor besar pudar di penjuru — penanda urutan, bukan tajuk */
.store-no{
  position:absolute;top:14px;right:22px;font-family:var(--serif);font-size:58px;line-height:1;
  color:var(--gula);opacity:.09;letter-spacing:-.02em;pointer-events:none;
}
.store-item b{display:block;font-family:var(--serif);font-size:clamp(22px,2.1vw,26px);font-weight:500;color:var(--gula);margin:20px 0 6px;line-height:1.15}
.store-item p{font-size:var(--small);color:var(--kopi-soft);line-height:1.6}

/* ===== faq ===== */
.faq{max-width:840px;margin-inline:auto;display:grid;gap:12px}
.qa{background:var(--putih);border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;transition:border-color .3s ease}
.qa.on{border-color:rgba(82,107,74,.4)}
.qa-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;
  padding:20px 22px;font-size:clamp(16px,1.4vw,18px);font-weight:600;color:var(--gula);
}
.qa-q i{
  width:30px;height:30px;flex:none;border-radius:50%;background:rgba(82,107,74,.11);color:var(--daun);
  display:flex;align-items:center;justify-content:center;transition:transform .35s ease,background .35s ease;
}
.qa.on .qa-q i{transform:rotate(45deg);background:var(--daun);color:var(--putih)}
.qa-q svg{width:15px;height:15px}
.qa-a{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
.qa-a p{padding:0 22px 22px;font-size:var(--small);color:var(--kopi-soft);max-width:66ch}

/* ===== final cta ===== */

/* ===== footer =====
   Palet daripada taklimat, dikunci pada footer sahaja supaya ia tidak
   melimpah ke seksyen lain. Hijaunya kini SAMA dengan --daun-deep
   (#041D11) yang digunakan seksyen gelap, jadi jalur hijau di kaki
   laman bersambung terus dengan seksyen FAQ di atasnya. */
.foot{
  --f-green:#041D11;
  --f-cream:#F3EEE3;
  --f-gold:#8C6D3F;
  /* Emas taklimat (#8C6D3F) hanya mencapai 3.68:1 pada hijau #041D11
     — masih gagal ambang teks biasa. Nada yang lebih cerah ini kekal
     dalam keluarga emas pudar yang sama tetapi mengukur 7.33:1, jadi
     ia digunakan untuk SEGALA-GALANYA di dalam jalur hijau. */
  --f-gold-on-green:#C8A15E;
  --f-ink:#231F20;
  position:relative;z-index:1;overflow:hidden;
  /* sama dengan seksyen Beli di atasnya supaya tiada garis sambungan */
  background:var(--santan);color:var(--f-ink);
  padding-top:clamp(44px,5.6vw,84px);
}
.batik--foot{opacity:.05}

/* ---- bingkai makanan di kiri dan kanan ----
   Disembunyikan di bawah 1240px. Di bawah lebar itu, lajur mangkuk
   dan lajur kandungan mula bertindih, dan taklimat itu jelas: jangan
   letak gambar makanan di belakang teks. */
.foot-food{display:none}
@media (min-width:1240px){
  .foot-food{
    position:absolute;top:0;bottom:0;z-index:0;
    width:clamp(92px,9.5vw,168px);
    display:flex;flex-direction:column;justify-content:space-between;
    padding-block:clamp(6px,1.4vw,22px);
    pointer-events:none;
  }
  .foot-food--l{left:0}
  .foot-food--r{right:0}
  .foot-food i{
    display:block;width:100%;aspect-ratio:1/.92;
    background:var(--b) center/contain no-repeat;
  }
  /* dipotong oleh tepi skrin, bukan duduk rapi di dalamnya */
  .foot-food--l i{margin-left:clamp(-56px,-3.4vw,-30px)}
  .foot-food--r i{margin-right:clamp(-56px,-3.4vw,-30px)}
  /* mangkuk berselang sedikit supaya tepinya tidak membentuk
     garis lurus menegak yang kaku */
  .foot-food i:nth-child(even){transform:translateX(var(--stagger,0))}
  .foot-food--l i:nth-child(even){--stagger:14px}
  .foot-food--r i:nth-child(even){--stagger:-14px}
}

/* ---- dua kawasan kandungan sahaja: jenama + navigasi ---- */
.foot-top{
  position:relative;z-index:1;
  width:100%;max-width:1000px;margin-inline:auto;
  padding-inline:clamp(24px,3vw,40px);
  padding-bottom:clamp(40px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,5vw,76px);
}
.foot-logo{
  /* 600/457 ialah nisbah lambang PENUH daripada fail vektor. Nilai
     lama 520/324 ialah nisbah keratan yang memotong jalur "CEPAT
     SIAP / RASA MANTAP" di bawah lambang. */
  display:block;width:clamp(160px,17vw,224px);aspect-ratio:600/457;
  background:var(--f-logo) center/contain no-repeat;
  margin-bottom:clamp(16px,2vw,26px);
}
.foot-brand b{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(28px,3.1vw,40px);line-height:1.08;color:var(--f-green);
}
.foot-brand p{
  margin-top:6px;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,1.65vw,23px);color:var(--f-gold);
}
.brand-rule{
  display:block;width:74px;height:1px;margin:clamp(14px,1.6vw,20px) 0;
  background:linear-gradient(90deg,var(--f-gold),rgba(140,109,63,0));
}
.foot-brand small{
  display:block;max-width:34ch;
  font-size:clamp(13.5px,1.05vw,15px);line-height:1.72;
  color:rgba(35,31,32,.72);
}
.halal-chip{
  display:inline-flex;align-items:center;gap:9px;margin-top:clamp(18px,2.2vw,26px);
  border:1px solid rgba(140,109,63,.5);border-radius:100px;padding:9px 18px;
  font-size:clamp(12.5px,1vw,14px);font-weight:500;color:var(--f-green);
}
.halal-chip svg{width:16px;height:16px;color:var(--f-gold)}
/* satu baris sahaja: saiz teks mengecil mengikut lebar skrin supaya
   ayat penuh muat tanpa berbalut */
.halal-chip{max-width:100%;white-space:nowrap;line-height:1.3}
.halal-chip svg{flex:none}
@media (max-width:620px){
  .halal-chip{font-size:clamp(8.5px,2.75vw,12.5px);padding:8px 13px;gap:6px}
  .halal-chip svg{width:14px;height:14px}
}

/* ---- LAMAN + HUBUNGI, dua sub-lajur sama lebar ---- */
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.foot-col h4{
  font-family:var(--sans);font-size:clamp(12.5px,1vw,14px);font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--f-green);
}
/* garis emas nipis dengan rozet geometri di tengahnya */
.col-rule{
  display:flex;align-items:center;gap:8px;margin:12px 0 18px;
  color:var(--f-gold);
}
.col-rule::before,.col-rule::after{
  content:"";flex:1;height:1px;background:rgba(140,109,63,.42);
}
.col-rule svg{width:13px;height:13px;flex:none}
.foot-col a{
  display:block;padding:7px 0;
  font-size:clamp(13.5px,1.05vw,15px);color:rgba(35,31,32,.8);
  transition:color var(--t-micro) ease,transform var(--t-micro) var(--e-out);
}
.foot-col a:hover{color:var(--f-green);transform:translateX(3px)}

/* ---- jalur hijau melengkung ----
   50% pada setiap sudut atas bertemu tepat di tengah, jadi lengkungnya
   satu lengkok tunggal yang lembut dan bukan dua bonjol berasingan. */
.foot-end{
  position:relative;z-index:1;
  margin-top:clamp(16px,2.4vw,34px);
  background:var(--f-green);color:var(--f-cream);
  border-top:1.5px solid rgba(140,109,63,.9);
  border-radius:50% 50% 0 0 / clamp(28px,4.2vw,62px) clamp(28px,4.2vw,62px) 0 0;
  padding:clamp(34px,4.4vw,62px) 0 clamp(26px,3vw,40px);
}
.foot-end-in{
  width:100%;max-width:1000px;margin-inline:auto;
  padding-inline:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(18px,3.4vw,54px);
}
.fe-mark{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.fe-dish{width:clamp(52px,5.4vw,72px);height:auto;aspect-ratio:66/40;color:var(--f-gold-on-green);flex:none}
.fe-script{
  font-family:var(--script);font-weight:500;
  font-size:clamp(19px,2.1vw,29px);line-height:1.16;color:var(--f-gold-on-green);
}
/* pembahagi menegak emas mengapit hak cipta, seperti rujukan */
.fe-copy{
  margin:0;text-align:center;
  padding-inline:clamp(18px,3vw,46px);
  border-inline:1px solid rgba(200,161,94,.42);
  font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.7;
  color:rgba(243,238,227,.86);
}
.fe-sprig{width:clamp(96px,11vw,150px);height:auto;aspect-ratio:124/48;color:var(--f-gold-on-green);justify-self:end;opacity:.72}

/* ---- tablet: jenama di atas, navigasi di bawah ---- */
@media (max-width:900px){
  /* Sebaik lajur bertindan, semuanya berpusat. Blok jenama yang rata
     kiri di bawah logo yang berpusat kelihatan seperti tersasar, dan
     tiada lajur kedua lagi untuk dijajarkan. */
  .foot-top{grid-template-columns:1fr;gap:clamp(28px,5vw,42px);justify-items:center;text-align:center}
  .foot-logo{margin-inline:auto}
  .brand-rule{margin-inline:auto}
  .foot-brand small{margin-inline:auto}
  .foot-nav{max-width:420px;width:100%}
  .foot-col{text-align:center}
  /* anjakan mendatar pada tuding tidak masuk akal pada teks berpusat */
  .foot-col a:hover{transform:none}
  .foot-end-in{
    grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:clamp(20px,3.4vw,30px);
  }
  .fe-copy{border-inline:0;padding-inline:0;padding-block:16px;
           border-block:1px solid rgba(200,161,94,.42);width:100%;max-width:340px}
  .fe-sprig{justify-self:center}
  /* tersusun menegak: setiap teks satu baris sahaja */
  .fe-br{display:none}
  .fe-script,.fe-copy{white-space:nowrap}
}
@media (max-width:520px){
  .foot-brand b{font-size:26px}
  .fe-mark{flex-direction:column;gap:10px;text-align:center}
  .fe-script{font-size:clamp(15px,4.9vw,21px)}
  .fe-copy{font-size:clamp(11px,3.4vw,12.5px)}
}

/* ===== where to buy ===== */
.wtb-panel{display:none}
.wtb-panel.on{display:block;animation:panelIn .52s var(--e-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px}
.shop-card{
  background:var(--putih);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.shop-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(45,37,32,.1);border-color:rgba(82,107,74,.34)}
.shop-ic{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(82,107,74,.11);color:var(--daun);margin-bottom:18px;
}
.shop-ic svg{width:25px;height:25px}
.shop-card b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--gula)}
.shop-card p{font-size:var(--small);color:var(--kopi-soft);margin:8px 0 20px;flex:1}
/* dua nombor WhatsApp: bertindan supaya kedua-duanya sasaran sentuh penuh */
.wa-links{display:grid;gap:8px}
/* label kecil di atas nombor, jadi pengunjung tahu mana satu untuk pesanan */
.wa-links .btn{flex-direction:column;gap:2px;line-height:1.25;padding-block:10px}
.wa-links .btn b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta)}
.wa-links .btn span{font-weight:600}
.geo-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:22px;
  background:var(--putih);border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px 18px;
}
.geo-bar p{font-size:var(--small);color:var(--kopi-soft);flex:1;min-width:200px}
.geo-bar b{color:var(--gula)}
.map-wrap{display:block}
.mapbox{
  position:relative;aspect-ratio:1040/408;background:var(--putih);
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;
  cursor:grab;touch-action:pan-y;user-select:none;
}
.mapbox.dragging{cursor:grabbing}
.map-canvas{
  position:absolute;inset:0;transform-origin:0 0;--s:1;
  transition:transform .55s cubic-bezier(.2,.8,.3,1);
}
.map-canvas.nofx{transition:none}
.zoomers{position:absolute;top:14px;right:14px;z-index:8;display:grid;gap:8px}
.zbtn{
  width:38px;height:38px;border-radius:12px;background:var(--putih);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;color:var(--gula);
  box-shadow:0 4px 12px rgba(45,37,32,.12);transition:border-color .25s ease,color .25s ease;
}
.zbtn:hover{border-color:var(--daun);color:var(--daun)}
.zbtn svg{width:16px;height:16px}
.map-hint{
  position:absolute;left:14px;bottom:12px;z-index:8;font-size:11px;color:var(--kopi-faint);
  background:rgba(255,253,248,.86);border-radius:100px;padding:5px 12px;pointer-events:none;
  transition:opacity .3s ease;
}
.mapbox.has-pop .map-hint{opacity:0}
.mapbox .dots{position:absolute;inset:0;width:100%;height:100%;color:var(--daun);opacity:.46}
.mapbox .pin{transform:translate(-50%,-50%) scale(calc(1/var(--s)))}
.pin{
  position:absolute;width:26px;height:26px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.pin::before{
  content:"";position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--daun);border:2.5px solid var(--putih);box-shadow:0 2px 6px rgba(45,37,32,.3);
  transition:transform .3s cubic-bezier(.34,1.5,.64,1),background .3s ease;
}
.pin:hover::before{transform:scale(1.35)}
.pin.on{z-index:5}
.pin.on::before{background:var(--terracotta);transform:scale(1.5)}
.pin.near::after{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--terracotta);animation:ping 2.4s ease-out infinite;
}
@keyframes ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.pop{
  position:absolute;left:50%;bottom:16px;z-index:9;
  width:min(430px,calc(100% - 32px));transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:11px;
  background:var(--putih);border-radius:var(--r-sm);border:1px solid var(--rule);
  box-shadow:0 18px 40px rgba(45,37,32,.22);
  animation:popbar .34s cubic-bezier(.2,.8,.3,1);
}
@keyframes popbar{from{opacity:0;transform:translate(-50%,16px)}}
.pop-thumb{
  height:70px;width:56px;flex:none;border-radius:11px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#EFE3CB,#DFC9A4);
}
.pop-thumb .pk{background-image:var(--pack-sm);width:auto;height:88%;aspect-ratio:1005/1504;filter:drop-shadow(0 5px 8px rgba(45,37,32,.28))}
.pop-body{flex:1;min-width:0;padding:0 22px 0 0}
.pop-body b{display:block;font-size:var(--small);font-weight:700;line-height:1.3;color:var(--gula)}
.pop-body span{display:block;font-size:12px;color:var(--kopi-faint);margin:2px 0 9px}
.pop-body .btn{width:100%;padding:9px 10px;font-size:12px}
.pop-x{position:absolute;top:9px;right:9px;width:24px;height:24px;border-radius:50%;background:rgba(255,253,248,.9);display:flex;align-items:center;justify-content:center}
.pop-x svg{width:12px;height:12px}
.outlets{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;margin-top:18px;
  padding:4px 4px 14px;scroll-snap-type:x proximity;scroll-padding-left:4px;
}
.outlets::-webkit-scrollbar{height:8px}
.outlets::-webkit-scrollbar-track{background:rgba(45,37,32,.06);border-radius:4px}
.outlets::-webkit-scrollbar-thumb{background:rgba(82,107,74,.4);border-radius:4px}
.outlet{
  flex:0 0 262px;scroll-snap-align:start;text-align:left;background:var(--putih);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;padding:0;
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease;
}
.outlet:hover{border-color:var(--daun);transform:translateY(-4px)}
.outlet-thumb{height:118px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#EFE3CB,#DFC9A4)}
.outlet-thumb .pk{background-image:var(--pack-sm);width:auto;height:86%;aspect-ratio:1005/1504;filter:drop-shadow(0 8px 12px rgba(45,37,32,.26))}
.outlet-info{padding:14px 16px 16px;display:grid;gap:4px}
.swipe-note{font-size:12px;color:var(--kopi-faint);text-align:center;margin-top:2px}
.outlet.on{border-color:var(--terracotta);box-shadow:0 8px 20px rgba(183,102,70,.14)}
.outlet-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.outlet b{font-size:var(--small);font-weight:700;color:var(--gula)}
.outlet .km{font-size:12px;font-weight:700;color:var(--terracotta);white-space:nowrap}
.outlet span{font-size:12px;color:var(--kopi-soft)}
.badge-near{
  display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terracotta);background:rgba(183,102,70,.11);
  border-radius:100px;padding:3px 9px;width:max-content;margin-top:4px;
}
.outlet-links{display:flex;gap:14px;margin-top:10px}
.outlet-links a,.outlet-links button{font-size:12px;font-weight:600;color:var(--daun);text-decoration:underline;text-underline-offset:3px}
.outlet-links a:hover,.outlet-links button:hover{color:var(--terracotta)}

/* ===== cart drawer ===== */
.scrim{position:fixed;inset:0;z-index:88;background:rgba(38,51,31,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.scrim.on{opacity:1;visibility:visible;transition-delay:0s}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:89;width:min(440px,100%);
  background:var(--santan);display:flex;flex-direction:column;padding:26px 26px 24px;
  box-shadow:-22px 0 54px rgba(38,51,31,.3);transform:translateX(101%);
  transition:transform .46s cubic-bezier(.4,0,.2,1);
}
.drawer.on{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.drawer-top h2{font-size:33px;color:var(--gula)}
.x-btn{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--rule);transition:background .25s ease,border-color .25s ease}
.x-btn:hover{background:var(--putih);border-color:var(--gula)}
.x-btn svg{width:18px;height:18px}
.lines{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.line{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.line-art{width:60px;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#EFE3CB,#DFC9A4)}
.line-art .pk{background-image:var(--pack-sm);width:auto;height:82%;aspect-ratio:1005/1504}
.line-info b{display:block;font-size:var(--small);font-weight:700;line-height:1.35}
.line-info .qty{margin-top:9px;padding:3px;gap:8px}
.line-info .qty button{width:27px;height:27px;font-size:15px}
.line-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.line-right b{font-size:var(--small);font-weight:700;white-space:nowrap}
.line-del{font-size:var(--tiny);color:var(--kopi-faint);text-decoration:underline;text-underline-offset:3px}
.line-del:hover{color:var(--terracotta)}
.cart-empty{text-align:center;padding:60px 16px;color:var(--kopi-faint);font-size:var(--small)}
.cart-empty svg{width:46px;height:46px;color:var(--rule);margin:0 auto 16px;display:block;opacity:.8}
.drawer-foot{padding-top:20px;border-top:2px solid var(--rule)}
/* baris kecil di atas jumlah — sengaja jauh lebih kecil daripada
   .sum supaya jumlah akhir kekal nombor yang paling jelas */
.subline{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:var(--small);color:var(--kopi-soft);margin-bottom:7px;
}
.subline s{color:var(--kopi-faint);text-decoration-thickness:1px}
.subline--save{color:var(--daun);font-weight:700;margin-bottom:14px}
.subline[hidden]{display:none}
.sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.sum[hidden]{display:none}
.sum b{font-family:var(--serif);font-size:23px;color:var(--gula)}
.sum span{font-family:var(--sans);font-size:24px;font-weight:600;color:var(--daun);font-variant-numeric:tabular-nums}
.drawer-note{font-size:12px;text-align:center;color:var(--kopi-faint);margin-top:12px}

/* ===== pembayaran: langkah dalam laci yang sama =====
   Laci sudah selebar telefon (440px), jadi tiada sebab membina satu
   seksyen halaman berasingan untuk borang yang sama. Setiap langkah
   ialah satu panel; hanya satu kelihatan pada satu masa. */
.ck-pane[hidden]{display:none}
.ck-pane{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}

/* jejak langkah */
.ck-track{display:flex;align-items:center;gap:8px;margin-bottom:18px}
.ck-track i{
  flex:1;height:3px;border-radius:2px;background:var(--rule);
  transition:background .3s ease;
}
.ck-track i.done{background:var(--daun)}
.ck-track b{font-size:var(--tiny);font-weight:600;color:var(--kopi-faint);white-space:nowrap}
/* display:flex di atas mengalahkan [hidden] daripada helaian pelayar */
.ck-track[hidden]{display:none}

/* pemilih hantar / ambil — dua pilihan saling eksklusif yang
   mengubah baki aliran, jadi kedua-duanya kekal kelihatan */
.mode{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
  background:rgba(45,37,32,.06);border-radius:var(--r-btn);padding:5px;margin-bottom:14px;
}
.mode button{
  border:0;background:transparent;border-radius:9px;padding:10px 8px;
  font:inherit;font-size:13px;font-weight:600;color:var(--kopi-soft);line-height:1.3;
  transition:background var(--t-ui) ease,color var(--t-ui) ease,box-shadow var(--t-ui) ease;
}
.mode button small{display:block;font-size:11px;font-weight:500;opacity:.72;margin-top:1px}
.mode button[aria-pressed="true"]{
  background:var(--daun);color:var(--putih);box-shadow:0 4px 12px -4px rgba(82,107,74,.6);
}
.mode button:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:2px}
.mode[hidden]{display:none}

/* borang */
.fld{margin-bottom:13px}
.fld > label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kopi-faint);margin-bottom:6px;
}
.fld input,.fld select,.fld textarea{
  width:100%;font:inherit;font-size:var(--small);color:var(--kopi);
  background:var(--putih);border:1.5px solid var(--rule);border-radius:var(--r-btn);
  padding:12px 13px;transition:border-color var(--t-micro) ease;
}
.fld textarea{resize:vertical;min-height:64px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--daun)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:2px}
.fld.bad input,.fld.bad select{border-color:var(--terracotta)}
.fld .err{display:none;font-size:var(--tiny);color:var(--terracotta);margin-top:5px;font-weight:600}
.fld.bad .err{display:block}
.fld2{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* kad stokis terpilih */
.outlet-card{
  background:var(--putih);border:1.5px solid var(--daun);border-radius:var(--r-card);
  padding:14px;margin-bottom:13px;
}
.outlet-card b{display:block;font-size:var(--small);font-weight:700;color:var(--gula)}
.outlet-card small{display:block;font-size:12px;color:var(--kopi-soft);line-height:1.5;margin-top:3px}
.outlet-card .hrs{
  display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--daun);
  background:rgba(82,107,74,.1);border-radius:7px;padding:4px 9px;
}

/* slot masa */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.slots button{
  border:1.5px solid var(--rule);background:var(--putih);border-radius:10px;
  padding:10px 4px;font:inherit;font-size:12px;font-weight:600;color:var(--kopi-soft);
  transition:border-color var(--t-micro) ease,background var(--t-micro) ease,color var(--t-micro) ease;
}
.slots button[aria-pressed="true"]{border-color:var(--daun);background:rgba(82,107,74,.1);color:var(--daun)}
.slots button:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:2px}

/* baris semakan */
.ck-row{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.ck-row b{display:block;font-size:var(--small);font-weight:700;line-height:1.4}
.ck-row small{display:block;font-size:12px;color:var(--kopi-soft);line-height:1.5;margin-top:2px}
.ck-row button{
  flex:none;font:inherit;font-size:12px;font-weight:600;color:var(--daun);
  text-decoration:underline;text-underline-offset:3px;background:none;border:0;
}
.ck-items{margin:0;padding:0;list-style:none}
.ck-items li{
  display:flex;justify-content:space-between;gap:12px;
  font-size:var(--small);color:var(--kopi-soft);padding:7px 0;
}
.ck-items li span:last-child{font-weight:700;color:var(--kopi);white-space:nowrap}

/* keadaan menunggu dan keputusan */
.ck-mid{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:7px;padding:40px 20px;
}
.ck-spin{
  width:44px;height:44px;border-radius:50%;margin-bottom:14px;
  border:3px solid rgba(82,107,74,.22);border-top-color:var(--daun);
  animation:ckspin 1s linear infinite;
}
@keyframes ckspin{to{transform:rotate(360deg)}}
.ck-mid h3{font-family:var(--serif);font-size:29px;font-weight:600;color:var(--gula)}
.ck-mid p{margin:0;font-size:var(--small);color:var(--kopi-soft);max-width:32ch}
.ck-ic{
  width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:6px;background:var(--daun);color:var(--putih);
}
.ck-ic svg{width:32px;height:32px}
.ck-ic--bad{background:var(--terracotta)}
.ck-ic--flat{background:rgba(45,37,32,.13);color:var(--kopi-soft)}
.ck-ref{
  margin-top:14px;padding:9px 16px;border:1px dashed var(--rule);border-radius:10px;
  background:var(--putih);font-size:12px;color:var(--kopi-faint);letter-spacing:.04em;
}
.ck-ref b{display:block;font-size:16px;font-weight:700;color:var(--gula);letter-spacing:.06em;margin-top:2px}

/* amaran mod tiruan — mesti mustahil untuk terlepas pandang */
.ck-mock{
  margin:0 0 14px;padding:9px 12px;border-radius:var(--r-btn);
  background:rgba(183,102,70,.12);border:1px solid rgba(183,102,70,.32);
  color:#8A4227;font-size:11.5px;font-weight:600;text-align:center;line-height:1.45;
}
.ck-mock[hidden]{display:none}
/* cetakan halus dalam panel semakan — kelas sendiri, bukan
   .drawer-note, supaya ia tidak dikelirukan dengan nota kaki laci
   yang berubah mengikut langkah */
.ck-fineprint{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--kopi-faint)}

@media (max-width:560px){
  .fld2{grid-template-columns:1fr}
  .slots{grid-template-columns:1fr}
  /* setiap piksel kaki laci ialah piksel yang dirampas daripada
     borang yang boleh ditatal di atasnya */
  .ck-mock{padding:7px 10px;font-size:11px;margin-bottom:10px}
  .ck-track{margin-bottom:14px}
}

/* ===== toast ===== */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;transform:translate(-50%,150%);
  background:var(--daun-ink);color:var(--santan);border-radius:100px;padding:13px 24px;
  display:flex;align-items:center;gap:11px;font-size:var(--small);font-weight:600;
  box-shadow:0 16px 38px rgba(38,51,31,.4);pointer-events:none;opacity:0;visibility:hidden;
  transition:transform .46s cubic-bezier(.34,1.4,.64,1),opacity .3s ease,visibility 0s linear .46s;
}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s,0s,0s}
.toast svg{width:18px;height:18px;color:var(--kunyit)}

/* ===== reveal ===== */
/* (1) REVEAL — satu kelas, lengah diatur melalui --rvd */
.rv{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out);
  transition-delay:var(--rvd,0ms);
}
.rv.in{opacity:1;transform:none}

.rv--fade{transform:none}   


/* ===== responsive ===== */
@media (max-width:1080px){
  .nav-links{gap:0}
  .nav-links a{padding:9px 10px;font-size:var(--tiny)}

  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:980px){
  .nav-links,.nav-tools .btn{display:none}
  .burger{display:flex}
}
/* sama seperti .ways: tiga kad pendek, dan 768px masih muat tiga */
@media (max-width:700px){
  .store{grid-template-columns:1fr;gap:12px}
  /* telefon: ikon di kiri, teks di kanan — tiga kad setinggi skrin
     menjadi tiga baris ringkas yang boleh dibaca sekali pandang */
  .store-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding:20px 20px 20px 18px}
  .store-ic{width:52px;height:52px}
  .store-ic svg{width:25px;height:25px}
  .store-item b{margin:0 0 3px;font-size:21px}
  .store-no{top:50%;right:16px;translate:0 -50%;font-size:44px}
  .store-txt{padding-right:34px}
}
@media (max-width:900px){
  .mapbox{aspect-ratio:1040/560}
}
@media (max-width:620px){
  .mapbox{aspect-ratio:1/1}
  .outlet{flex-basis:232px}
  .pop{left:10px;right:10px;bottom:10px;width:auto;transform:none;padding:10px;gap:11px;
    animation:popbarm .32s cubic-bezier(.2,.8,.3,1)}
  @keyframes popbarm{from{opacity:0;transform:translateY(14px)}}
  .pop-thumb{height:62px;width:50px}
  .pop-x{top:6px;right:6px;width:22px;height:22px}
}
@media (max-width:620px){
  :root{--nav-h:66px}
  .logo span span,.logo b + span{display:none}
  .logo b{font-size:17px}
  .cine-cue{display:none}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pcard-buy .btn{font-size:13px;padding:12px 6px}
  .qty{gap:4px;padding:4px}
  /* 28px ialah sasaran sentuh terkecil di seluruh halaman, pada
     kawalan yang paling kerap ditekan. 44px muat: 44+44 tambah
     jurang 8 dan pelapik 8 menggunakan 104 daripada 136px yang ada,
     meninggalkan 32px untuk angka. */
  .qty button{width:44px;height:44px}
  .qty > span{min-width:32px;text-align:center}
  .pcard-body{padding:14px 14px 16px}
  .pcard h3{font-size:16px}
  .pcard-desc{display:none}
  /* keterangan disembunyikan dalam grid dua lajur kerana tiada ruang;
     paparan senarai pula wujud justeru untuk maklumat lebih, jadi di
     sana ia kembali */
  .pgrid--list .pcard-desc{display:block;flex:none}
  .pcard-meta{margin:10px 0 10px;flex-direction:column;align-items:flex-start;gap:2px}
  .pcard-price{font-size:18px}
  .foot-grid{grid-template-columns:1fr}
  .drawer{padding:20px 18px}
  body.cart-open .toast{display:none}
}
/* Telefon kecil (<=380px) kekal DUA lajur. Kad hanya ~150px lebar,
   jadi pelapik, butang kuantiti dan teks dirapatkan supaya muat. */
@media (max-width:380px){
  .pgrid{gap:10px}
  .pcard-body{padding:12px 10px 14px}
  .pcard h3{font-size:15px}
  .pcard-cat{font-size:10px;letter-spacing:.12em}
  .pcard-price{font-size:16px}
  .qty{gap:2px;padding:3px}
  .qty button{width:36px;height:36px}
  .qty input[type="number"]{width:32px;min-width:0}
  .pcard-buy .btn{font-size:12px;padding:11px 4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:auto;min-height:100svh;padding-block:calc(var(--nav-h) + 30px) 56px}
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .logo,.nav-links a,.nav-tools{animation:none;opacity:1;transform:none}
  .step:not(.on) h3,.step:not(.on) p{opacity:1}

  .store-item::before{transform:scaleX(1)}
  .tst-track{transition:none}
}

/* ============================================================
   TAMBAHAN WOOCOMMERCE

   Kad produk kini dijana oleh PHP, bukan JavaScript. Markupnya
   sengaja sama, jadi hanya beberapa elemen baharu memerlukan gaya:
   pautan yang membungkus seni kad, gambar produk sebenar
   menggantikan pek yang dikongsi, dan medan kuantiti yang kini
   input borang sebenar dan bukan <span>.
   ============================================================ */

/* .pcard-art kini <a>: ia perlu berkelakuan seperti blok seperti dulu */
a.pcard-art{text-decoration:none;color:inherit}

/* Gambar produk sebenar (foto hidangan) memenuhi seluruh bingkai
   kad, dipotong dari tengah. Produk tanpa foto kekal memakai gambar
   pek di atas latar kategori. */
.pcard-art .pk-img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 55%;
  transition:transform .6s var(--e-out);
}
.pcard:hover .pcard-art .pk-img{transform:scale(1.05)}

.pcard h3 a{color:inherit;text-decoration:none}
.pcard h3 a:hover{color:var(--daun)}

/* Medan kuantiti: <input type="number"> yang dipakaikan rupa <span>
   lama. Anak panah putar dibuang kerana butang + dan − sudah ada. */
.qty input[type="number"]{
  min-width:22px;width:44px;text-align:center;font:inherit;font-weight:700;
  font-size:var(--small);color:var(--kopi);background:transparent;border:0;
  padding:0;-moz-appearance:textfield;appearance:textfield;
}
.qty input[type="number"]::-webkit-outer-spin-button,
.qty input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type="number"]:focus-visible{outline:2.5px solid var(--terracotta);outline-offset:2px;border-radius:6px}

/* Petunjuk kadar 4 keping di bawah harga */
.ua-tier-hint{
  display:block;margin-top:4px;font-size:var(--tiny);font-weight:600;color:var(--daun);
}

.pcard-oos{
  margin:0;padding:12px;text-align:center;font-size:var(--small);
  font-weight:600;color:var(--kopi-faint);border:1.5px dashed var(--rule);
  border-radius:var(--r-btn);
}

/* .fclear kini <a> — kekalkan rupa butang */
a.fclear{display:block;text-align:center;text-decoration:none}

/* Sisi penapis dan grid duduk dalam satu <form>, jadi bekas itu
   mesti mewarisi susunan grid yang dulunya pada .shop */
.shop-filters{display:contents}

/* Notis WooCommerce mengambil warna jenama, bukan biru lalai */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  border-radius:var(--r-btn);border:1px solid var(--rule);
  background:var(--putih);color:var(--kopi);font-size:var(--small);
  /* Ruang kiri 3.4em ialah tempat ikon ::before WooCommerce (kedudukan
     mutlak pada 1.5em). Padding 16px dahulu membiarkan ikon itu
     menindih huruf pertama mesej. */
  padding:14px 16px 14px 3.4em;margin-bottom:18px;list-style:none;
}
.woocommerce-message{border-color:rgba(82,107,74,.4)}
.woocommerce-error{border-color:rgba(183,102,70,.5)}

/* ============================================================
   TROLI & PEMBAYARAN WOOCOMMERCE (templat klasik)

   Halaman troli, pembayaran dan akaun menggunakan templat klasik
   WooCommerce, bukan blok — supaya teksnya boleh diterjemah ke
   Bahasa Melayu dan borangnya berfungsi tanpa JavaScript.

   Templat itu datang dengan gaya lalainya sendiri, termasuk butang
   ungu yang tiada kaitan dengan jenama ini. Blok di bawah
   menyelaraskannya dengan reka bentuk selebihnya.
   ============================================================ */

/*
 * Tiada lebar atau padding di sini dengan sengaja: .woocommerce
 * sentiasa berada di dalam .wrap, yang sudah menetapkan lebar
 * maksimum dan padding tepi. Menambahnya sekali lagi mengecilkan
 * jadual troli kepada separuh skrin pada telefon.
 */
.woocommerce{width:100%}

/* ---- butang ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:var(--btn);font-weight:700;letter-spacing:.01em;
  padding:14px 24px;border-radius:var(--r-btn);border:0;white-space:nowrap;text-shadow:none;
  background:var(--daun);color:var(--putih);
  box-shadow:0 8px 20px rgba(82,107,74,.26);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,background .3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover{
  background:var(--daun-deep);color:var(--putih);transform:translateY(-2px);
}

/* Butang utama tindakan — emas, sama seperti "Beli Sekarang". */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order{
  background:var(--gold);color:var(--dark);
  box-shadow:0 8px 20px rgba(216,168,78,.3);
  width:100%;padding:17px 26px;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover{background:#C79A3F;color:var(--dark)}

/* Butang sekunder — garis sahaja, supaya ia tidak bersaing. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"]{
  background:transparent;color:var(--kopi);
  border:1.5px solid var(--rule);box-shadow:none;
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover{
  background:transparent;color:var(--daun);border-color:var(--daun);transform:none;
}
.woocommerce button[name="update_cart"]:disabled{opacity:.45}

/* ---- jadual troli ---- */
.woocommerce table.shop_table{
  border:1px solid var(--rule);border-radius:var(--r-card,18px);
  border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--putih);
}
.woocommerce table.shop_table th{
  font-family:var(--sans);font-size:var(--small);font-weight:700;
  color:var(--kopi);background:rgba(45,37,32,.04);padding:16px 14px;
}
.woocommerce table.shop_table td{padding:16px 14px;border-top:1px solid var(--rule)}
.woocommerce table.shop_table img{width:64px;border-radius:10px}
.woocommerce a.remove{
  color:var(--terracotta);font-weight:700;line-height:1;
}
.woocommerce a.remove:hover{background:var(--terracotta);color:var(--putih)}

/* ---- jumlah troli ---- */
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--serif);font-weight:400;color:var(--gula);
  font-size:clamp(24px,3vw,32px);margin:0 0 16px;
}
.woocommerce .cart_totals table.shop_table{background:var(--putih)}

/* ---- borang pembayaran ---- */
.woocommerce form .form-row label{
  font-family:var(--sans);font-size:var(--small);font-weight:600;color:var(--kopi);
  margin-bottom:6px;display:block;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  width:100%;padding:13px 14px;border:1.5px solid var(--rule);border-radius:12px;
  background:var(--putih);font-family:var(--sans);font-size:15px;color:var(--kopi);
  transition:border-color .25s ease;height:auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:0;border-color:var(--daun)}
.woocommerce form.checkout_coupon,
.woocommerce-checkout #payment{
  background:var(--putih);border:1px solid var(--rule);border-radius:var(--r-card,18px);
}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--rule)}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(82,107,74,.08);color:var(--kopi-soft);
}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:rgba(82,107,74,.08)}

/* ---- notis ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top-color:var(--daun);background:var(--putih);
  border-radius:12px;font-family:var(--sans);font-size:var(--small);
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--daun)}
.woocommerce-error{border-top-color:var(--terracotta)}
.woocommerce-error::before{color:var(--terracotta)}

@media (max-width:720px){
  /*
   * Baris kupon ialah <input> dan <butang> bersebelahan dalam satu
   * sel jadual. Pada 375px ia tidak muat dan butangnya terkeluar
   * daripada kad, jadi ia disusun menegak.
   */
  .woocommerce .coupon{display:flex;flex-wrap:wrap;gap:10px;width:100%}
  .woocommerce .coupon input[type="text"],
  .woocommerce .coupon #coupon_code{width:100%;flex:1 1 100%;min-width:0}
  .woocommerce button[name="update_cart"],
  .woocommerce button[name="apply_coupon"]{width:100%;flex:1 1 100%}
  .woocommerce table.shop_table img{width:48px}

  /* Sel jadual tidak boleh menolak jadual melebihi skrin. */
  .woocommerce table.shop_table,
  .woocommerce table.shop_table td,
  .woocommerce table.shop_table th{min-width:0;word-break:break-word}
}

/* Kedai sedang menukar halaman atau penapis. Grid dipudarkan sedikit
   dan klik disekat supaya dua permintaan tidak berlumba; kekal pada
   ketinggian yang sama supaya halaman tidak melompat. */
.shop.is-loading{opacity:.55;pointer-events:none;transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){
  .shop.is-loading{transition:none}
}

/* ============================================================
   LACI TROLI — pratonton WooCommerce

   Isinya ialah keluaran woocommerce_mini_cart(), jadi kelasnya milik
   WooCommerce. Gaya di sini menjadikannya sepadan dengan baris .line
   dalam reka bentuk asal.
   ============================================================ */

/* WooCommerce menyelitkan pautan "Lihat troli" selepas setiap
   tambah-ke-troli AJAX. Laci dan lencana nav sudah memberitahu perkara
   yang sama dengan lebih jelas, dan pautan itu menolak susun atur kad
   setiap kali. */
.pcard .added_to_cart{display:none!important}

#cartDrawer .widget_shopping_cart_content{
  flex:1;display:flex;flex-direction:column;min-height:0;
}
#cartDrawer ul.woocommerce-mini-cart{
  flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px;list-style:none;
}
/* WooCommerce meletakkan <img> DI DALAM pautan nama, bukan sebagai
   anak <li>. Jadi grid mesti berada pada pautan itu, bukan pada baris
   — kalau tidak gambar terkeluar daripada susun atur. */
#cartDrawer li.woocommerce-mini-cart-item{
  position:relative;padding:16px 34px 16px 0;border-bottom:1px solid var(--rule);
}
#cartDrawer li.woocommerce-mini-cart-item > a:not(.remove){
  display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;
  font-family:var(--sans);font-size:var(--small);font-weight:700;
  line-height:1.35;color:var(--kopi);text-decoration:none;
}
#cartDrawer li.woocommerce-mini-cart-item > a:not(.remove):hover{color:var(--daun)}
#cartDrawer li.woocommerce-mini-cart-item img{
  width:60px;height:60px;object-fit:cover;border-radius:12px;
  background:linear-gradient(160deg,#EFE3CB,#DFC9A4);margin:0;
}
/* Kuantiti duduk di bawah nama, sejajar dengannya. */
#cartDrawer .woocommerce-mini-cart-item .quantity{
  display:block;margin:8px 0 0 74px;font-size:var(--small);
  color:var(--kopi-soft);font-weight:400;background:none;border:0;padding:0;
}
#cartDrawer a.remove_from_cart_button{
  position:absolute;top:50%;right:0;transform:translateY(-50%);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:18px;line-height:1;color:var(--kopi-faint);
  text-decoration:none;transition:background .2s ease,color .2s ease;
}
#cartDrawer a.remove_from_cart_button:hover{background:var(--terracotta);color:var(--putih)}

#cartDrawer .woocommerce-mini-cart__total{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:18px 0;padding-top:18px;border-top:2px solid var(--rule);
}
#cartDrawer .woocommerce-mini-cart__total strong{
  font-family:var(--serif);font-size:23px;font-weight:400;color:var(--gula);
}
#cartDrawer .woocommerce-mini-cart__total .woocommerce-Price-amount{
  font-family:var(--sans);font-size:24px;font-weight:600;color:var(--daun);font-variant-numeric:tabular-nums;
}
/* Lebar mengikut teks, bukan seluruh laci — tetapi satu lajur
   max-content bermakna kedua-dua butang berkongsi lebar yang sama
   (lebar teks terpanjang), jadi ia kekal sepasang. */
#cartDrawer .woocommerce-mini-cart__buttons{
  display:grid;grid-template-columns:max-content;justify-content:center;
  gap:10px;margin:0;
}
#cartDrawer .woocommerce-mini-cart__buttons a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:var(--btn);font-weight:700;
  padding:15px 24px;border-radius:var(--r-btn);text-decoration:none;
  background:transparent;color:var(--kopi);border:1.5px solid var(--rule);
  transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease;
}
#cartDrawer .woocommerce-mini-cart__buttons a:hover{border-color:var(--daun);color:var(--daun)}
#cartDrawer .woocommerce-mini-cart__buttons a.checkout{
  background:var(--gold);color:var(--dark);border-color:transparent;
  box-shadow:0 8px 20px rgba(216,168,78,.3);
}
#cartDrawer .woocommerce-mini-cart__buttons a.checkout:hover{
  background:#C79A3F;color:var(--dark);transform:translateY(-2px);
}
#cartDrawer .woocommerce-mini-cart__empty-message{
  text-align:center;padding:60px 16px;color:var(--kopi-faint);font-size:var(--small);
}

/* Kepingan yang terbang dari kad ke butang troli. */
.fly-ghost{
  position:fixed;z-index:95;pointer-events:none;border-radius:14px;
  overflow:hidden;box-shadow:0 14px 30px rgba(38,51,31,.28);
}

@media (max-width:520px){
  .drawer{width:100%}
}

/* ============================================================
   KEPALA RINGKAS — troli dan pembayaran

   Bar nav penuh dan kaki laman ditinggalkan pada halaman ini supaya
   tiada apa yang menarik perhatian keluar daripada pembayaran. Yang
   tinggal hanyalah logo: jenama pada saat pengunjung paling perlu
   mempercayainya, dan satu-satunya jalan kembali.

   Ia tidak melekat (position: static): tanpa menu, tiada apa yang
   perlu kekal dalam capaian semasa menatal borang yang panjang.
   ============================================================ */
.co-head{
  /* Tiga lajur: pautan kembali, logo, ruang kosong. Lajur ketiga itu
     yang mengekalkan logo betul-betul di tengah halaman — dengan flex
     ia hanya akan berada di tengah ruang yang tinggal selepas pautan
     kembali, iaitu sedikit ke kanan. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--rule);
  background:var(--santan);
}
.co-back{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--small);font-weight:600;
  color:var(--kopi-soft);text-decoration:none;
  padding:9px 14px 9px 10px;border-radius:var(--r-btn);
  border:1.5px solid transparent;
  transition:color .25s ease,border-color .25s ease,background .25s ease;
}
.co-back svg{width:16px;height:16px;flex:none;transform:rotate(180deg)}
.co-back:hover{color:var(--daun);border-color:var(--rule);background:var(--putih)}
.co-back:focus-visible{outline:2px solid var(--daun);outline-offset:2px}
.co-logo{display:inline-flex;align-items:center;transition:opacity .25s ease}
.co-logo:hover{opacity:.75}
.co-logo img{width:auto;height:52px;display:block}

/* Tanpa bar nav tetap di atas, ruang atas datang daripada seksyen itu
   sendiri — dan halaman pembayaran tidak perlu sebanyak halaman
   pemasaran. */
.woocommerce-cart .sec,
.woocommerce-checkout .sec,
.woocommerce-order-received .sec{padding-block:clamp(32px,5vw,56px)}

@media (max-width:620px){
  .co-head{padding:16px 14px}
  .co-logo img{height:42px}
  /* Pada telefon anak panah sudah memadai; teksnya menolak logo
     keluar dari tengah. Label kekal untuk pembaca skrin. */
  .co-back span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  /* Tanpa label ia mengecil menjadi anak panah kecil. Sasaran sentuh
     dikekalkan pada 44px — di bawah itu ia meleset pada ibu jari. */
  .co-back{padding:0;min-width:44px;min-height:44px;justify-content:center}
}

/* ============================================================
   HALAMAN PRODUK TUNGGAL

   Templat WooCommerce lalai, dibalut dengan .sec + .wrap tema (lihat
   ua_woo_wrapper_start). Tanpa nav dan kaki laman, jadi ruang atas
   datang daripada seksyen ini sendiri — sama seperti troli.

   Gambar dan ringkasan disusun dengan grid, bukan float 48% lalai
   WooCommerce: float meninggalkan tab dan produk berkaitan bergantung
   pada clear, dan tidak boleh diberi jurang yang konsisten.
   ============================================================ */
.ua-woo-page{padding-block:clamp(24px,4vw,48px) clamp(56px,7vw,96px)}

.ua-woo-page .woocommerce-breadcrumb{
  margin:0 0 clamp(18px,2.6vw,30px);
  font-size:var(--small);color:var(--kopi-faint);
}
.ua-woo-page .woocommerce-breadcrumb a{color:var(--kopi-soft);text-decoration:none}
.ua-woo-page .woocommerce-breadcrumb a:hover{color:var(--daun)}

.woocommerce .ua-woo-page div.product{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start;
}
.woocommerce .ua-woo-page div.product div.images,
.woocommerce .ua-woo-page div.product div.summary{float:none;width:auto;margin:0}
.woocommerce .ua-woo-page div.product .woocommerce-tabs,
.woocommerce .ua-woo-page div.product section.related{grid-column:1/-1;clear:none}

/* ---- gambar ---- */
.woocommerce .ua-woo-page div.product div.images{
  border-radius:var(--r-card,18px);overflow:hidden;
  background:var(--putih);border:1px solid var(--rule);
}
.woocommerce .ua-woo-page div.product div.images img{display:block;width:100%;height:auto}

/* Lencana "Promosi!" — pil kecil di bucu gambar, bukan bulatan hijau
   lalai WooCommerce yang menindih logo dan breadcrumb. */
.woocommerce .ua-woo-page span.onsale{
  top:16px;left:16px;right:auto;z-index:2;
  min-width:0;min-height:0;margin:0;padding:6px 14px;
  border-radius:999px;background:var(--terracotta);color:var(--putih);
  font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.04em;
}

/* ---- ringkasan ---- */
.woocommerce .ua-woo-page div.product .product_title{
  margin:0 0 14px;font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,3.6vw,52px);line-height:1.08;color:var(--gula);
}
.woocommerce .ua-woo-page div.product .summary .price{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  margin:0 0 20px;font-family:var(--sans);font-size:clamp(22px,2vw,26px);font-weight:600;color:var(--daun);font-variant-numeric:tabular-nums;
}
.woocommerce .ua-woo-page div.product .summary .price del{font-size:.62em;font-weight:500;color:var(--kopi-faint);opacity:1}
.woocommerce .ua-woo-page div.product .summary .price ins{text-decoration:none;font-weight:600}
.woocommerce .ua-woo-page div.product .summary .price .ua-tier-hint{flex-basis:100%;margin:2px 0 0}
.ua-woo-page .woocommerce-product-details__short-description{
  margin:0 0 26px;color:var(--kopi-soft);line-height:1.7;
}
.ua-woo-page .woocommerce-product-details__short-description p{margin:0}

.woocommerce .ua-woo-page div.product form.cart{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0 0 26px;
}
.woocommerce .ua-woo-page div.product form.cart::before,
.woocommerce .ua-woo-page div.product form.cart::after{display:none}
.woocommerce .ua-woo-page div.product form.cart div.quantity{float:none;margin:0}
.woocommerce .ua-woo-page .quantity input.qty{
  width:92px;height:100%;min-height:50px;padding:0 10px;
  border:1.5px solid var(--rule);border-radius:12px;background:var(--putih);
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--kopi);text-align:center;
}
.woocommerce .ua-woo-page div.product form.cart .button{float:none;flex:1 1 200px;margin:0}

.ua-woo-page .product_meta{
  padding-top:18px;border-top:1px solid var(--rule);
  font-size:var(--small);color:var(--kopi-soft);
}
.ua-woo-page .product_meta a{color:var(--daun);text-decoration:none}
.ua-woo-page .product_meta a:hover{text-decoration:underline}

/* ---- tab ---- */
.woocommerce .ua-woo-page div.product .woocommerce-tabs{margin-top:clamp(8px,2vw,24px)}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs{
  /* justify-content eksplisit: kelas .tabs juga dimiliki oleh tab
     "Di Mana Nak Beli" tema, yang memusatkannya. Tab produk mesti
     sejajar kiri dengan kandungan di bawahnya. */
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:4px;margin:0 0 26px;padding:0;
  border-bottom:1px solid var(--rule);overflow:visible;
}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li{
  margin:0;padding:0;border:0;border-radius:0;background:transparent;
}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:12px 18px;margin-bottom:-1px;
  border-bottom:2px solid transparent;
  font-weight:600;color:var(--kopi-soft);text-decoration:none;
}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--gula)}
.woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--gula);border-bottom-color:var(--gold);
}
.woocommerce .ua-woo-page div.product .woocommerce-tabs .panel{margin:0;max-width:760px}
.ua-woo-page .woocommerce-Tabs-panel h2,
.ua-woo-page .woocommerce-Reviews-title,
.ua-woo-page .comment-reply-title{
  margin:0 0 12px;font-family:var(--serif);font-weight:500;
  font-size:clamp(24px,2.4vw,30px);color:var(--gula);
}
.ua-woo-page .woocommerce-Tabs-panel p{color:var(--kopi-soft);line-height:1.7}
.woocommerce .ua-woo-page table.shop_attributes{border-top:1px solid var(--rule)}
.woocommerce .ua-woo-page table.shop_attributes th,
.woocommerce .ua-woo-page table.shop_attributes td{
  padding:12px 14px;border-bottom:1px solid var(--rule);font-style:normal;background:transparent;
}
.woocommerce .ua-woo-page table.shop_attributes td p{padding:0}

/* ---- produk berkaitan ---- */
.woocommerce .ua-woo-page div.product section.related{margin-top:clamp(44px,6vw,80px)}
.ua-woo-page section.related > h2{
  margin:0 0 22px;font-family:var(--serif);font-weight:500;
  font-size:clamp(28px,3vw,40px);color:var(--gula);
}
.ua-woo-page section.related .pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1024px){
  .ua-woo-page section.related .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .woocommerce .ua-woo-page div.product{grid-template-columns:minmax(0,1fr);gap:24px}
  /* Tab boleh ditatal mendatar pada telefon — tiga tab tidak muat
     sebaris dan membungkusnya menjadikan garis bawah aktif berselerak. */
  .woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .woocommerce .ua-woo-page div.product .woocommerce-tabs ul.tabs li a{white-space:nowrap;padding:12px 14px}
}
/* Produk Berkaitan kekal dua lajur pada telefon, sama seperti grid
   produk di halaman utama. */
@media (max-width:560px){
  .ua-woo-page section.related .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ===== muzik latar ===== */
/* Butang di penjuru kiri bawah; pemain YouTube sebenar muncul di
   atasnya semasa muzik dimainkan (syarat API: pemain mesti kelihatan,
   sekurang-kurangnya 200 x 200 px). z-index di bawah laci troli. */
.music{position:fixed;left:16px;bottom:16px;z-index:85;display:grid;gap:10px;justify-items:start}
/* Pemain disembunyikan atas permintaan pemilik: hanya butang yang
   kelihatan. Ia TIDAK boleh display:none — pelayar menghentikan main
   balik bagi bingkai yang tidak dirender — jadi ia dialihkan keluar
   skrin sambil terus berjalan. */
.music-panel{
  position:fixed;left:-9999px;bottom:0;width:200px;height:200px;
  opacity:0;pointer-events:none;
}
.music-panel[hidden]{display:block}
.music-frame,.music-frame iframe{width:200px;height:200px;border:0;display:block}
.music-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:var(--putih);border:1px solid var(--rule);color:var(--kopi-soft);
  font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 10px 24px rgba(45,37,32,.14);
  transition:color var(--t-ui) ease,border-color var(--t-ui) ease,transform var(--t-ui) var(--e-out);
}
.music-btn:hover{color:var(--daun);border-color:var(--daun);transform:translateY(-2px)}
.music-btn svg{width:18px;height:18px}
.music-btn .mus-on{display:none}
.music.is-on .music-btn{color:var(--daun);border-color:var(--daun)}
.music.is-on .music-btn .mus-on{display:block}
.music.is-on .music-btn .mus-off{display:none}
/* laci troli terbuka: butang ini cuma menghalang */
body.cart-open .music{display:none}
@media (max-width:620px){
  .music{left:12px;bottom:12px;gap:8px}
  .music-btn{padding:9px 13px;font-size:12px}
}

/* penambah kuantiti dalam laci troli */
#cartDrawer .mc-qty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
#cartDrawer .mc-qty.is-busy{opacity:.55;pointer-events:none}
#cartDrawer .mc-step{
  display:inline-flex;align-items:center;gap:6px;padding:3px;
  border:1.5px solid var(--rule);border-radius:var(--r-btn);background:var(--putih);
}
#cartDrawer .mc-step button{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;color:var(--daun);background:transparent;border:0;cursor:pointer;
  transition:background .2s ease;
}
#cartDrawer .mc-step button:hover{background:rgba(82,107,74,.12)}
#cartDrawer .mc-step b{min-width:22px;text-align:center;font-size:var(--small);font-weight:700}
#cartDrawer .mc-unit{font-size:var(--small);color:var(--kopi-soft)}
@media (max-width:620px){
  #cartDrawer .mc-step button{width:34px;height:34px}
}

/* ralat di bawah medannya sendiri, bukan satu kotak di atas borang */
.woocommerce form .form-row .checkout-inline-error-message{
  display:block;margin:6px 0 0;padding:0;font-size:12.5px;line-height:1.45;
  color:var(--terracotta);font-weight:600;
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection{
  border-color:var(--terracotta);
}

/* Padding kad kaedah ditulis semula di hujung fail: peraturan telefon
   lama (.way{padding:0 12px}) datang selepas blok di atas dan
   memampatkan kad menjadi 45px. */
.sec--ways .way{padding:clamp(30px,3.4vw,46px) clamp(18px,2.2vw,30px) clamp(26px,3vw,38px);min-height:clamp(170px,17vw,230px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:760px){
  .sec--ways .way{padding:clamp(26px,6vw,34px) 18px;min-height:clamp(150px,34vw,190px)}
}

/* lencana "Disyorkan" pada kaedah yang dicadangkan */
.way-tag{
  position:absolute;top:10px;right:10px;z-index:2;
  padding:3px 9px;border-radius:999px;
  background:var(--gold);color:var(--dark);
  font-family:var(--sans);font-size:9px;font-weight:700;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
@media (max-width:760px){
  .way-tag{top:8px;right:8px;font-size:8.5px;padding:2px 8px}
}
/* Tajuk produk mesti jelas lebih besar daripada keterangannya —
   pada paparan senarai kedua-duanya hampir sama saiz (16px lawan
   13px) dan kad itu terbaca sebagai satu blok teks. */
.pcard h3{font-size:clamp(17px,1.8vw,22px)}
.pgrid--list .pcard h3{font-size:clamp(19px,2vw,23px);line-height:1.2}
.pgrid--list .pcard-desc{font-size:13px}
@media (max-width:620px){
  .pcard h3{font-size:17px}
  .pgrid--list .pcard h3{font-size:18px}
}
@media (max-width:380px){
  .pcard h3{font-size:16px}
}

/* gambar stokis sebenar menggantikan pek di kad */
.outlet-thumb.has-img{padding:0;background:#E7DDC7}
.outlet-thumb.has-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
/* nombor telefon stokis — boleh diketik untuk memanggil */
.outlet-tel{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:var(--small);font-weight:600;color:var(--daun);text-decoration:none;
}
.outlet-tel::before{content:"\260E";font-size:.95em}
.outlet-tel:hover{text-decoration:underline}

/* gambar stokis sebenar dalam tetingkap pin peta */
.pop-thumb.has-img{background:#E7DDC7}
.pop-thumb.has-img img{width:100%;height:100%;object-fit:cover;object-position:48% 20%;display:block}

/* Gambar stokis nisbah 1:1 (kad dan tetingkap pin). Kad tanpa gambar
   (pek) juga segi empat supaya semua kad sama tinggi. */
.outlet-thumb{height:auto;aspect-ratio:1}
.outlet-thumb.has-img img{object-position:50% 50%}
.pop-thumb{width:64px;height:64px}
.pop-thumb.has-img img{object-position:50% 50%}
@media (max-width:620px){
  .pop-thumb{width:56px;height:56px}
}

/* Tetingkap pin: gambar lebih besar, butang Arah Jalan lebih kecil
   (lebar ikut teks, bukan penuh) supaya gambar menjadi tumpuan. */
.pop{align-items:center}
.pop-thumb{width:96px;height:96px;border-radius:14px}
.pop-body .btn{width:auto;display:inline-flex;padding:7px 14px;font-size:11.5px;gap:6px;border-radius:10px}
.pop-body .btn svg{width:14px;height:14px}
@media (max-width:620px){
  .pop-thumb{width:84px;height:84px;border-radius:12px}
}

/* Tetingkap pin: sekecil kandungannya dan sentiasa di tengah — pada
   telefon juga (sebelum ini ia terbentang penuh dari tepi ke tepi). */
.pop{width:auto;max-width:calc(100% - 32px);left:50%;right:auto;transform:translateX(-50%)}
.pop-body{flex:0 1 auto;padding-right:26px}
@media (max-width:620px){
  .pop{left:50%;right:auto;width:auto;max-width:calc(100% - 20px);transform:translateX(-50%);
    animation:popbar .34s cubic-bezier(.2,.8,.3,1)}
}

/* Butang muzik di sebelah KANAN. Semasa jalur faedah hero kelihatan,
   ia naik ke atas jalur itu (--lift diisi JS) supaya tidak menutup
   "Siap Dalam 5 Minit"; selepas itu ia turun semula ke penjuru. */
.music{left:auto;right:16px;justify-items:end;bottom:calc(16px + var(--lift,0px));transition:bottom .35s cubic-bezier(.2,.8,.3,1)}
@media (max-width:620px){
  .music{left:auto;right:12px;bottom:calc(12px + var(--lift,0px))}
}

/* butang pesanan ke WhatsApp di halaman Pesanan Diterima */
.ua-wa-order{
  margin:0 0 26px;padding:18px 20px;border-radius:var(--r-card);
  background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.35);
}
.ua-wa-order p{margin:0 0 12px;color:var(--kopi-soft);font-size:var(--small);line-height:1.6}
.ua-wa-order p b{color:var(--kopi)}
.ua-wa-btn{
  display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:var(--r-btn);
  background:#25D366;color:#fff;font-weight:700;text-decoration:none;border:0;
  box-shadow:0 10px 22px rgba(37,211,102,.3);
}
.ua-wa-btn:hover{background:#1EBE5A;color:#fff}
.ua-wa-btn svg{width:20px;height:20px}

/* produk akan datang */
.pcard-art{position:relative}
.pcard-flag{
  position:absolute;top:10px;left:10px;z-index:3;padding:4px 10px;border-radius:999px;
  background:var(--gold);color:var(--dark);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.pcard-soon{
  margin:0;padding:12px;border-radius:var(--r-btn);text-align:center;
  background:rgba(216,168,78,.14);color:var(--gula);font-weight:700;font-size:var(--small);
}
/* lencana DISYORKAN di bawah kad, bukan di penjuru atas */
.way-tag{top:auto;bottom:10px;right:50%;translate:50% 0}
@media (max-width:760px){ .way-tag{top:auto;bottom:8px;right:50%} }

/* medan kuantiti WooCommerce dengan butang − / + */
.woocommerce .quantity:has(.qty-step){
  display:inline-flex;align-items:stretch;gap:0;
  border:1.5px solid var(--rule);border-radius:12px;background:var(--putih);overflow:hidden;
}
.woocommerce .quantity .qty-step{
  width:44px;min-height:48px;border:0;background:transparent;cursor:pointer;
  font-size:20px;line-height:1;color:var(--daun);transition:background .2s ease;
}
.woocommerce .quantity .qty-step:hover{background:rgba(82,107,74,.12)}
.woocommerce .quantity:has(.qty-step) input.qty,
.woocommerce .ua-woo-page .quantity:has(.qty-step) input.qty{
  width:48px;min-height:48px;border:0;border-radius:0;background:transparent;padding:0;
  text-align:center;font-weight:700;-moz-appearance:textfield;appearance:textfield;
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* halaman produk: harga semasa dahulu (kiri), harga asal dipalang di
   kanannya — sama seperti kad produk */
.woocommerce .ua-woo-page div.product .summary .price ins{order:1}
.woocommerce .ua-woo-page div.product .summary .price del{order:2}
.woocommerce .ua-woo-page div.product .summary .price .ua-tier-hint{order:3}

/* halaman produk: kuantiti dan "Tambah ke Troli" sentiasa sebaris —
   butang mengambil baki lebar, bukan asas 200px yang memaksanya turun */
.woocommerce .ua-woo-page div.product form.cart{flex-wrap:nowrap}
.woocommerce .ua-woo-page div.product form.cart div.quantity{flex:none}
.woocommerce .ua-woo-page div.product form.cart .button{flex:1 1 0;min-width:0;white-space:nowrap;padding-inline:14px}
@media (max-width:380px){
  .woocommerce .ua-woo-page div.product form.cart .quantity .qty-step{width:36px}
  .woocommerce .ua-woo-page div.product form.cart .quantity input.qty{width:40px}
}
/* label "Akan Datang" di tempat butang: teks lebih kecil, sebaris */
.pcard-soon{font-size:12px;padding:10px 8px;white-space:nowrap;letter-spacing:.02em}

/* nombor 01/02/03 dibuang — teks tidak lagi perlu ruang di kanan */
.store-txt{padding-right:0}

/* jawapan FAQ bertitik */
.qa-a ul,.qa-a ol{margin:0;padding:0 22px 22px 40px;display:grid;gap:6px;max-width:66ch}
.qa-a li{font-size:var(--small);line-height:1.6;color:var(--kopi-soft);list-style:disc}
.qa-a ol li{list-style:decimal}
.qa-a li::marker{color:var(--gold)}
.qa-a p + ul{margin-top:-12px}
.sec--daun .qa-a li{color:var(--on-dark-dim)}

/* ---- kupon dalam troli ----
   Medan dan butang kupon datang tanpa gaya daripada WooCommerce, jadi
   ia kelihatan seperti borang pelayar lalai di tengah-tengah troli.
   Di sini kedua-duanya memakai bentuk yang sama seperti borang lain:
   satu baris pada desktop, bertindan pada telefon. */
.woocommerce table.shop_table td.actions .coupon{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px;border:1px solid var(--rule);border-radius:var(--r-card);
  background:rgba(82,107,74,.05);
}
.woocommerce table.shop_table td.actions .coupon .input-text{
  flex:1 1 140px;min-width:0;margin:0;height:46px;padding:0 14px;
  border:1.5px solid var(--rule);border-radius:var(--r-btn);
  background:var(--putih);font-family:var(--sans);font-size:14px;color:var(--kopi);
  transition:border-color var(--t-ui) ease;
}
.woocommerce table.shop_table td.actions .coupon .input-text::placeholder{color:var(--kopi-faint)}
.woocommerce table.shop_table td.actions .coupon .input-text:focus{
  outline:none;border-color:var(--daun);
}
.woocommerce table.shop_table td.actions .coupon .button{
  flex:0 0 auto;height:46px;margin:0;padding:0 18px;border-radius:var(--r-btn);
  background:transparent;border:1.5px solid var(--daun);color:var(--daun);
  font-family:var(--sans);font-size:13.5px;font-weight:700;white-space:nowrap;
  transition:background var(--t-ui) ease,color var(--t-ui) ease;
}
.woocommerce table.shop_table td.actions .coupon .button:hover{
  background:var(--daun);color:var(--putih);
}
@media (max-width:620px){
  .woocommerce table.shop_table td.actions .coupon{padding:12px;gap:8px}
    .woocommerce table.shop_table td.actions .coupon .input-text,
  .woocommerce table.shop_table td.actions .coupon .button{flex:1 1 100%;width:100%}
}

/* Peraturan troli lama menegakkan kupon di bawah 720px; di sini medan
   dan butang kembali sebaris sebaik sahaja ada ruang (>620px). */
@media (min-width:621px){
  /* peraturan lama memakai #coupon_code, jadi ID itu perlu disebut di
     sini juga supaya keutamaannya cukup */
  .woocommerce table.shop_table td.actions .coupon input#coupon_code{flex:1 1 140px;width:auto}
  .woocommerce table.shop_table td.actions .coupon button[name="apply_coupon"]{flex:0 0 auto;width:auto}
}

/* ===== nav: label tidak patah dua baris ===== */
/* Label tidak boleh patah kepada dua baris; bar dipadatkan dahulu,
   kemudian bertukar kepada menu burger. Had ini diturunkan selepas
   label diringkaskan (619px berbanding 870px dahulu), jadi menu
   penuh kekal pada kebanyakan skrin laptop. */
.nav-links a{white-space:nowrap}
@media (max-width:1180px){
  .nav-links{gap:0}
  .nav-links a{padding:9px 9px;font-size:var(--tiny)}
}
@media (max-width:1000px){
  .nav-links,.nav-tools .btn{display:none}
  .burger{display:flex}
}

/* ===== butang status "Akan Datang" pada kad kedai online ===== */
/* Bukan pautan: garis putus-putus dan warna lembut supaya jelas
   ia belum boleh diklik. */
.shop-card .is-soon{
  background:transparent;
  border-style:dashed;
  border-color:rgba(45,37,32,.22);
  color:rgba(45,37,32,.5);
  cursor:default;
  letter-spacing:.02em;
}
.shop-card .is-soon:hover{background:transparent;border-color:rgba(45,37,32,.22);color:rgba(45,37,32,.5);transform:none;box-shadow:none}

/* ===== halaman Pesanan Diterima ===== */
/* WooCommerce mencetak halaman ini sebagai senarai dan jadual mentah.
   Blok di bawah menyusunnya menjadi kad: pengesahan, ringkasan
   pesanan, butiran bank, langkah WhatsApp, kemudian butiran pesanan. */
.woocommerce-order{max-width:760px;margin-inline:auto}
/* tajuk halaman berkongsi lebar yang sama dengan kad di bawahnya */
.woocommerce-order-received .head{max-width:760px;margin-inline:auto;text-align:left}
.woocommerce-order-received .head h2{margin-bottom:6px}

/* pengesahan */
.woocommerce-order .woocommerce-thankyou-order-received{
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;padding:16px 18px;border-radius:var(--r-card);
  background:rgba(82,107,74,.09);border:1px solid rgba(82,107,74,.28);
  color:var(--kopi);font-weight:600;font-size:var(--body);
}
.woocommerce-order .woocommerce-thankyou-order-received::before{
  content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--daun) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* ringkasan: nombor pesanan, tarikh, jumlah, kaedah bayaran */
.woocommerce-order ul.woocommerce-order-overview{
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media (min-width:700px){
  .woocommerce-order ul.woocommerce-order-overview{grid-template-columns:repeat(4,1fr)}
}
/* WooCommerce menambah clearfix ::before/::after pada senarai ini;
   dalam grid ia menjadi sel kosong dan menolak kad ke tepi. */
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after,
.woocommerce-bacs-bank-details ul.bacs_details::before,
.woocommerce-bacs-bank-details ul.bacs_details::after,
.woocommerce-customer-details .woocommerce-columns::before,
.woocommerce-customer-details .woocommerce-columns::after{display:none}
.woocommerce-order ul.woocommerce-order-overview li{
  /* WooCommerce mengapungkan item .order_details; grid perlukan float
     dimatikan supaya kad sebaris dan sama tinggi. */
  float:none;width:auto;border-right:0;
  margin:0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r-sm);
  background:var(--putih);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--kopi-faint);line-height:1.4;
}
.woocommerce-order ul.woocommerce-order-overview li strong{
  display:block;margin-top:6px;
  font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--kopi);
}

/* arahan bayaran */
.woocommerce-order > p{
  margin:0 0 16px;font-size:var(--small);line-height:1.7;color:var(--kopi-soft);max-width:62ch;
}

/* butiran akaun bank */
.woocommerce-bacs-bank-details{
  margin:0 0 22px;padding:22px 24px;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(216,168,78,.14),rgba(216,168,78,.06));
  border:1px solid rgba(216,168,78,.4);
}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-heading{
  margin:0;font-family:var(--serif);font-size:23px;font-weight:600;color:var(--gula);
}
.woocommerce-bacs-bank-details .wc-bacs-bank-details-account-name{
  margin:2px 0 16px;font-family:var(--sans);font-size:var(--small);font-weight:600;
  letter-spacing:.02em;color:var(--kopi-soft);
}
.woocommerce-bacs-bank-details ul.bacs_details{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}
.woocommerce-bacs-bank-details ul.bacs_details li{
  float:none;width:auto;border-right:0;
  margin:0;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--putih);border:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kopi-faint);
}
.woocommerce-bacs-bank-details ul.bacs_details li strong{
  margin-left:auto;font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:none;color:var(--kopi);
}
.woocommerce-bacs-bank-details .account_number strong{font-variant-numeric:tabular-nums}
/* butang salin nombor akaun (ditambah oleh ua-woo.js) */
.ua-copy{
  flex:none;margin-left:10px;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(45,37,32,.18);background:var(--santan);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--kopi-soft);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.ua-copy:hover{background:var(--daun);border-color:var(--daun);color:#fff}
.ua-copy.is-done{background:var(--daun);border-color:var(--daun);color:#fff}

/* jadual butiran pesanan */
.woocommerce-order-details,
.woocommerce-customer-details{margin-top:30px}
.woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title{
  margin:0 0 12px;font-family:var(--serif);font-size:26px;font-weight:600;color:var(--gula);
}
.woocommerce-table--order-details{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--putih);
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{
  padding:13px 18px;text-align:left;font-size:var(--small);border-bottom:1px solid var(--rule);
}
.woocommerce-table--order-details thead th{
  background:rgba(45,37,32,.04);font-weight:700;letter-spacing:.02em;
}
/* Semua amaun dalam jadual ini sewarna; baris Jumlah dibezakan
   dengan saiz dan warna tajuk (gula melaka), bukan warna asing. */
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tbody th{color:var(--kopi)}
.woocommerce-table--order-details tbody .product-name{color:var(--kopi-soft)}
.woocommerce-table--order-details tbody td a{color:var(--kopi);font-weight:600;text-decoration:none}
.woocommerce-table--order-details tfoot th{font-weight:700;color:var(--kopi)}
.woocommerce-table--order-details tfoot td{font-weight:700;color:var(--kopi)}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0}
/* Baris Jumlah: ditanda oleh ua_tanda_baris_jumlah() dalam woo.php.
   Hijau daun ialah warna harga di seluruh kedai — kad produk, halaman
   produk dan jumlah dalam troli — jadi jumlah besar di sini sama. */
.woocommerce-table--order-details tfoot tr:has(.ua-total-value) th,
.woocommerce-table--order-details tfoot tr:has(.ua-total-value) td{background:rgba(82,107,74,.07)}
.ua-total-value .woocommerce-Price-amount{font-size:20px;color:var(--daun)}
.woocommerce-table--order-details .shipped_via{color:var(--kopi-faint);font-weight:400}

/* alamat pembeli dan penghantaran */
.woocommerce-customer-details .woocommerce-columns{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
}
.woocommerce-customer-details .woocommerce-column{margin:0}
.woocommerce-customer-details address{
  margin:0;padding:16px 18px;border-radius:var(--r-card);
  background:var(--putih);border:1px solid var(--rule);
  font-style:normal;font-size:var(--small);line-height:1.8;color:var(--kopi-soft);
}
.woocommerce-customer-details address p{margin:8px 0 0;font-size:var(--small)}

@media (max-width:620px){
  .woocommerce-bacs-bank-details{padding:18px 16px}
  .woocommerce-bacs-bank-details .bacs_details li strong{margin-left:0;width:100%}
  .ua-copy{margin-left:0}
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td{padding:11px 13px}
}

/* kad DuitNow QR di halaman Pesanan Diterima */
.ua-qr{
  margin:-8px 0 22px;padding:20px 24px 18px;border-radius:var(--r-card);text-align:center;
  background:linear-gradient(180deg,rgba(216,168,78,.1),rgba(216,168,78,.04));
  border:1px solid rgba(216,168,78,.4);
}
/* lebih khusus daripada peraturan h3 umum tema */
.ua-qr h3.ua-qr-title{
  margin:0 0 14px;font-family:var(--sans);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kopi-faint);
}
.ua-qr-img{
  display:block;margin:0 auto;width:210px;height:auto;max-width:100%;
  padding:10px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--rule);
}
.ua-qr-note{
  margin:14px auto 0;max-width:42ch;
  font-size:var(--tiny);line-height:1.6;color:var(--kopi-soft);
}

/* borang muat naik resit di halaman Pesanan Diterima */
.ua-resit{
  margin:0 0 26px;padding:20px 22px;border-radius:var(--r-card);
  background:var(--putih);border:1px solid var(--rule);
}
.ua-resit h3.ua-resit-title{
  margin:0 0 10px;font-family:var(--sans);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--kopi-faint);
}
.ua-resit-note,.ua-resit-nama{margin:0 0 12px;font-size:var(--small);line-height:1.6;color:var(--kopi-soft)}
.ua-resit-nama{font-size:var(--tiny);color:var(--kopi-faint);word-break:break-all}
.ua-resit-ok{
  margin:0 0 10px;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(82,107,74,.1);border:1px solid rgba(82,107,74,.3);
  font-size:var(--small);font-weight:600;color:var(--kopi);
}
.ua-resit-ralat{
  margin:0 0 10px;padding:11px 14px;border-radius:var(--r-sm);
  background:rgba(168,50,37,.08);border:1px solid rgba(168,50,37,.3);
  font-size:var(--small);font-weight:600;color:var(--chili);
}
.ua-resit-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Kawasan pilih fail: input asli disembunyikan, label ini yang
   digayakan dan diklik. */
.ua-resit-pick{
  flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-btn);cursor:pointer;
  border:1.5px dashed rgba(45,37,32,.24);background:var(--santan);
  transition:border-color .22s ease,background .22s ease;
}
.ua-resit-pick:hover{border-color:var(--daun);background:rgba(82,107,74,.06)}
.ua-resit-pick:focus-within{outline:2px solid var(--daun);outline-offset:2px}
.ua-resit-ic{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:rgba(82,107,74,.12);color:var(--daun);
}
.ua-resit-ic svg{width:19px;height:19px}
.ua-resit-txt{min-width:0;display:block;line-height:1.35}
.ua-resit-txt b{
  display:block;font-size:var(--small);font-weight:700;color:var(--kopi);
}
.ua-resit-txt em{
  display:block;margin-top:2px;font-style:normal;font-size:var(--tiny);color:var(--kopi-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ua-resit-pick.is-pilih{border-style:solid;border-color:var(--daun);background:rgba(82,107,74,.07)}
.ua-resit-pick.is-pilih .ua-resit-txt em{color:var(--daun);font-weight:600}
/* Input kekal dalam DOM untuk kebolehcapaian, cuma tidak dilihat. */
.ua-resit-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ua-resit-form .btn{flex:none}
@media (max-width:620px){
  .ua-resit-form .btn{width:100%}
}

/* ===== mesej timbul (toast) ===== */
/* Digunakan selepas resit dimuat naik: pelanggan perlu pengesahan
   jelas bahawa fail itu benar-benar sampai kepada kedai. */
.ua-toast{
  position:fixed;left:50%;top:18px;z-index:120;
  display:flex;align-items:center;gap:10px;
  max-width:min(440px,calc(100vw - 24px));padding:13px 14px 13px 16px;
  border-radius:var(--r-btn);background:var(--putih);
  border:1px solid rgba(82,107,74,.35);
  box-shadow:0 16px 38px rgba(45,37,32,.18);
  font-size:var(--small);line-height:1.5;color:var(--kopi);
  transform:translate(-50%,-14px);opacity:0;
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .32s ease;
}
.ua-toast.on{transform:translate(-50%,0);opacity:1}
.ua-toast-ic{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--daun);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size:14px 14px;background-position:center;background-repeat:no-repeat;
}
.ua-toast-teks{flex:1 1 auto;min-width:0}
.ua-toast-x{
  flex:none;border:0;background:transparent;cursor:pointer;padding:0 2px;
  font-size:20px;line-height:1;color:var(--kopi-faint);
}
.ua-toast-x:hover{color:var(--kopi)}
.ua-toast--ralat{border-color:rgba(168,50,37,.4)}
.ua-toast--ralat .ua-toast-ic{
  background-color:var(--chili);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E");
}
/* semasa fail sedang dihantar */
.ua-resit.is-hantar .ua-resit-pick{opacity:.55;pointer-events:none}
.ua-resit.is-hantar .btn[disabled]{opacity:.7;cursor:progress}
@media (prefers-reduced-motion:reduce){
  .ua-toast{transition:opacity .2s ease}
}

/* ===== jadual semakan pesanan: latar sel seragam ===== */
/* .shop_table th berlorek supaya tajuk lajur menonjol, tetapi dalam
   tfoot setiap label baris juga <th> — hasilnya sel kiri berlorek dan
   sel kanan putih dalam baris yang sama. Lorek itu dibuang di sini,
   dan baris Jumlah pula dilorek penuh merentas kedua-dua sel. */
.woocommerce table.shop_table tfoot th{background:transparent}
.woocommerce table.shop_table tfoot tr.order-total th,
.woocommerce table.shop_table tfoot tr.order-total td{background:rgba(82,107,74,.07)}
.woocommerce table.shop_table tfoot tr.order-total td .woocommerce-Price-amount{
  font-size:19px;font-weight:700;color:var(--daun);
}
/* Jadual jumlah troli tiada <tfoot>: labelnya <th> dalam <tbody>,
   jadi lorek th dibuang di sini juga supaya satu baris satu warna. */
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{background:transparent}
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td{background:rgba(82,107,74,.07)}
.woocommerce .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount{
  font-size:19px;font-weight:700;color:var(--daun);
}

/* ===== Cara Penyediaan: label di atas kad + gambar lebih terang ===== */
/* Setiap kad kini dibungkus .way-item supaya label boleh duduk di
   luar kad (kad itu overflow:hidden dan gambarnya memenuhi kad). */
.way-item{display:flex;flex-direction:column;min-width:0}
.way-kicker{
  margin:0 0 10px;text-align:center;
  font-family:var(--sans);font-size:clamp(15px,1.3vw,17px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
}
/* Gambar pada 90%; lapisan hijau .way::after dikekalkan dan teks
   diberi bayang supaya masih terbaca di atas gambar yang lebih terang. */
.way-photo{opacity:.9}
.way:hover .way-photo{opacity:1}
.way h3,.way li{text-shadow:0 1px 12px rgba(4,29,17,.75)}
@media (max-width:760px){
  .way-kicker{font-size:14px;margin-bottom:10px}
}

/* pesanan dibayar melalui gateway (toyyibPay): pengesahan, bukan arahan resit */
.ua-paid-order{
  margin:0 0 26px;padding:18px 20px;border-radius:var(--r-card);
  background:rgba(82,107,74,.09);border:1px solid rgba(82,107,74,.3);
}
.ua-paid-order p{margin:0;color:var(--kopi-soft);font-size:var(--small);line-height:1.6}
.ua-paid-order p b{color:var(--daun)}

/* ===== Kata Mereka: navigasi muat di telefon walau ulasan bertambah ===== */
/* 13 titik + dua butang melebihi lebar telefon 375px dan butang
   terpotong di tepi skrin. Butang dikunci saiznya (tidak mengecut),
   titik dikecilkan di telefon, dan jika ulasan terus bertambah titik
   turun ke baris kedua — tidak lagi melimpah keluar. */
.tst-arrow{flex:none}
.tst-dots{min-width:0;flex-wrap:wrap;justify-content:center;row-gap:8px}
/* titik ialah <button>: buang padding lalai pelayar (6px kiri-kanan)
   yang menjadikan setiap titik 12px lebar, bukan saiz yang ditetapkan */
.tst-dot{padding:0;flex:none}
@media (max-width:620px){
  .tst-bar{gap:10px}
  .tst-arrow{width:38px;height:38px}
  .tst-dots{gap:6px}
  .tst-dot{width:7px;height:7px}
  .tst-dot.on{width:18px;border-radius:4px}
}

/* pengesahan pesanan FPX: tajuk yang jelas + butang WhatsApp pilihan */
.ua-paid-order .ua-paid-title{
  margin:0 0 8px;font-size:var(--body);font-weight:700;color:var(--daun);
}
.ua-paid-order p + p{margin-top:8px}
.ua-paid-order .ua-paid-note{font-size:var(--tiny);color:var(--kopi-faint);margin-bottom:12px}

/* ===== kotak promosi bermusim (troli & pembayaran) ===== */
.woocommerce-info.ua-promo{
  padding:18px 18px 16px 18px;border-color:rgba(216,168,78,.55);
  background:linear-gradient(180deg,rgba(216,168,78,.14),rgba(216,168,78,.05));
}
.woocommerce-info.ua-promo::before{display:none}
.ua-promo p{margin:0}
.ua-promo .ua-promo-title{
  font-family:var(--serif);font-size:clamp(20px,2.2vw,24px);font-weight:600;color:var(--gula);line-height:1.2;
}
.ua-promo .ua-promo-title span{font-family:var(--sans);font-size:var(--tiny);font-weight:600;color:var(--kopi-faint)}
.ua-promo .ua-promo-slogan{margin-top:4px;font-size:var(--small);color:var(--kopi-soft)}
.ua-promo-tiers{
  list-style:none;margin:12px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.ua-promo-tiers li{
  margin:0;padding:10px 6px;border-radius:12px;text-align:center;
  background:var(--putih);border:1px solid var(--rule);
}
.ua-promo-tiers b{display:block;font-size:20px;font-weight:700;color:var(--gula);line-height:1.1}
.ua-promo-tiers span{display:block;margin-top:3px;font-size:11px;color:var(--kopi-faint)}
.ua-promo-tiers li.on{background:var(--daun);border-color:var(--daun)}
.ua-promo-tiers li.on b,.ua-promo-tiers li.on span{color:#fff}
.ua-promo .ua-promo-status{margin-top:12px;font-size:var(--small);line-height:1.6;color:var(--kopi)}
.ua-promo .ua-promo-status b{color:var(--daun)}
@media (max-width:620px){
  .ua-promo-tiers{grid-template-columns:repeat(2,1fr)}
}

/* ===== promosi bermusim: lencana hero + jalur di atas menu ===== */
/* Lencana duduk di baris sendiri di bawah butang "Beli Sekarang". */
.hz-cta{flex-direction:column;align-items:flex-start}
@media (max-width:980px){
  .hz-cta,.hz-copy .hz-cta{flex-direction:column;align-items:center}
}
.hz-promo{
  display:inline-flex;align-items:center;gap:10px;max-width:100%;
  padding:6px 14px 6px 6px;border-radius:999px;
  background:rgba(216,168,78,.14);border:1px solid rgba(216,168,78,.55);
  color:var(--cream);text-decoration:none;font-size:var(--tiny);line-height:1.3;
  transition:background .2s ease,border-color .2s ease;
}
.hz-promo:hover{background:rgba(216,168,78,.24);border-color:var(--gold);color:var(--cream)}
.hz-promo-tag{
  flex:none;padding:4px 10px;border-radius:999px;background:var(--gold);color:var(--dark);
  font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
}
.hz-promo-txt{min-width:0}
.hz-promo svg{flex:none;width:18px;height:8px;color:var(--gold)}
@media (max-width:420px){
  .hz-promo{font-size:11.5px;gap:8px;padding-right:10px}
  .hz-promo svg{display:none}
}

/* Di telefon gambar kotak naik di belakang salinan hero: lencana diberi
   latar padu dan lapisan di atas gambar, dan teksnya dipendekkan. */
.hz-promo{position:relative;z-index:4}
@media (max-width:980px){
  .hz-promo{background:rgba(7,31,20,.9);backdrop-filter:blur(4px)}
}
@media (max-width:620px){
  .hz-promo-more{display:none}
}

/* ===== Cara Membuat Pesanan: laluan enam langkah ===== */
/* Garis emas menyambung semua langkah. Desktop: kad berselang
   kiri-kanan garis. Telefon (lihat @media): garis di kiri. Kad masuk
   dari sisinya dan bulatan ikon "muncul" bila .rv menjadi .in. */
.journey{
  --node:58px;
  position:relative;list-style:none;margin:clamp(6px,1.6vw,16px) auto 0;padding:0;max-width:980px;
  display:grid;gap:clamp(14px,2.2vw,26px);
}
.journey::before{
  content:"";position:absolute;top:calc(var(--node) / 2);bottom:calc(var(--node) / 2);left:50%;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(216,168,78,0),rgba(216,168,78,.85) 7%,rgba(216,168,78,.85) 93%,rgba(216,168,78,0));
}
.jstep{
  position:relative;margin:0;
  display:grid;grid-template-columns:1fr var(--node) 1fr;column-gap:clamp(16px,3vw,34px);align-items:center;
}
.jstep.rv:nth-child(odd){transform:translateX(-28px)}
.jstep.rv:nth-child(even){transform:translateX(28px)}
.jstep.rv.in{transform:none}
.jstep-node{
  grid-column:2;grid-row:1;position:relative;z-index:1;
  display:grid;place-items:center;width:var(--node);height:var(--node);border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f6d58e,var(--gold) 58%,#b5832e);color:var(--dark);
  box-shadow:0 0 0 7px rgba(216,168,78,.13),0 0 0 1px rgba(255,226,160,.7),0 14px 30px -12px rgba(216,168,78,.65);
  transform:scale(.35);opacity:0;
  transition:transform .65s cubic-bezier(.2,1.5,.4,1) calc(var(--rvd,0ms) + 160ms),opacity .3s ease calc(var(--rvd,0ms) + 160ms);
}
.jstep.in .jstep-node{transform:none;opacity:1}
.jstep-node svg{width:24px;height:24px}
.jstep-card{
  grid-row:1;position:relative;overflow:hidden;padding:20px 24px;border-radius:20px;
  background:linear-gradient(160deg,rgba(244,231,199,.09),rgba(244,231,199,.025));
  border:1px solid rgba(216,168,78,.26);
  transition:transform var(--t-ui) var(--e-out),border-color .25s ease,box-shadow .25s ease;
}
.jstep:nth-child(odd) .jstep-card{grid-column:1;text-align:right}
.jstep:nth-child(even) .jstep-card{grid-column:3}
.jstep-card:hover{transform:translateY(-4px);border-color:rgba(216,168,78,.6);box-shadow:0 22px 44px -26px rgba(0,0,0,.7)}
.jstep-no{
  position:absolute;top:-18px;font-family:var(--serif);font-size:104px;font-weight:600;line-height:1;
  color:rgba(216,168,78,.11);pointer-events:none;
}
.jstep:nth-child(odd) .jstep-no{left:10px}
.jstep:nth-child(even) .jstep-no{right:10px}
.jstep-label{
  position:relative;display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.jstep-card b{
  position:relative;display:block;margin:4px 0 6px;
  font-family:var(--serif);font-size:clamp(21px,2.2vw,25px);font-weight:600;line-height:1.2;color:var(--cream);
}
.jstep-card p{position:relative;margin:0;font-size:var(--small);line-height:1.65;color:var(--on-dark-dim)}
.steps-cta{margin:clamp(26px,3.4vw,40px) 0 0;text-align:center}
@media (max-width:760px){
  .journey{--node:46px}
  .journey::before{left:calc(var(--node) / 2)}
  .jstep{grid-template-columns:var(--node) 1fr;column-gap:14px;align-items:start}
  .jstep-node{grid-column:1;margin-top:14px}
  .jstep-node svg{width:20px;height:20px}
  .jstep:nth-child(odd) .jstep-card,
  .jstep:nth-child(even) .jstep-card{grid-column:2;text-align:left}
  .jstep:nth-child(odd) .jstep-no,
  .jstep:nth-child(even) .jstep-no{left:auto;right:8px;font-size:78px;top:-12px}
  .jstep.rv:nth-child(odd),.jstep.rv:nth-child(even){transform:translateX(20px)}
  .jstep.rv.in{transform:none}
  .jstep-card{padding:16px 18px}
}

/* ===== poster promosi di atas senarai produk ===== */
.promo-band{
  position:relative;overflow:hidden;isolation:isolate;scroll-margin-top:110px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,3.4vw,44px);align-items:end;
  margin:0 0 clamp(24px,3.4vw,40px);padding:clamp(22px,3.2vw,40px);
  border-radius:24px;color:var(--cream);text-align:left;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(216,168,78,.28),transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(82,107,74,.5),transparent 60%),
    linear-gradient(135deg,#06261a,#0d3f28 55%,#082a1b);
  border:1px solid rgba(216,168,78,.5);
  box-shadow:0 30px 60px -30px rgba(4,29,17,.75),inset 0 1px 0 rgba(255,255,255,.06);
}
.promo-band > .batik{opacity:.08;z-index:-1}
/* kilauan emas yang melintas perlahan */
.pb-sheen{
  position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 42%,rgba(255,226,160,.14) 50%,transparent 58%);
  transform:translateX(-60%);animation:pbSheen 7s ease-in-out infinite;
}
@keyframes pbSheen{0%,25%{transform:translateX(-60%)}65%,100%{transform:translateX(60%)}}
.pb-lead{min-width:0}
.promo-band p{margin:0}
.pb-ribbon{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:999px;
  background:rgba(216,168,78,.15);border:1px solid rgba(216,168,78,.5);
  color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.pb-ribbon svg{width:15px;height:15px;flex:none}
.promo-band .pb-big{margin-top:14px;line-height:.86}
.pb-big small{
  display:block;margin-bottom:6px;font-family:var(--serif);font-style:italic;
  font-size:clamp(21px,2.3vw,27px);color:var(--cream);line-height:1.1;
}
.pb-big b{
  display:inline-block;font-family:var(--sans);font-weight:800;letter-spacing:-.045em;
  font-size:clamp(78px,10vw,132px);
  background:linear-gradient(180deg,#ffe6aa,var(--gold) 55%,#b5832e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 26px rgba(216,168,78,.32));
}
.pb-big i{font-style:normal;font-size:.48em;vertical-align:.8em;margin-left:3px}
.promo-band .pb-title{margin-top:12px;font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);line-height:1.2;color:var(--cream)}
.promo-band .pb-note{margin-top:8px;font-size:var(--tiny);color:rgba(244,231,199,.72)}
.promo-band .pb-count{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:12px;
  background:rgba(0,0,0,.24);border:1px solid rgba(244,231,199,.14);font-size:var(--small);color:var(--cream);
}
.pb-count svg{width:16px;height:16px;color:var(--gold);flex:none}
.pb-count b{color:var(--gold);font-size:1.15em}
/* tangga kadar: makin tinggi, makin jimat */
.pb-stairs{
  list-style:none;margin:0;padding:0;height:clamp(210px,24vw,270px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px);align-items:end;
}
.pb-stairs li{margin:0;height:100%;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.pb-bar{
  position:relative;height:var(--h);display:flex;flex-direction:column;align-items:center;padding-top:14px;
  border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg,rgba(244,231,199,.16),rgba(244,231,199,.04));
  border:1px solid rgba(216,168,78,.35);
  transform-origin:bottom;transform:scaleY(.12);opacity:0;
  transition:transform .85s cubic-bezier(.2,.9,.3,1) calc(var(--d,0ms) + 200ms),opacity .4s ease calc(var(--d,0ms) + 200ms);
}
.promo-band.in .pb-bar{transform:none;opacity:1}
.pb-bar b{font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--gold);line-height:1}
.pb-unit{text-align:center;font-size:12px;font-weight:600;color:rgba(244,231,199,.8)}
.is-top .pb-bar{
  background:linear-gradient(180deg,#ffe6aa,var(--gold) 58%,#c1903a);border-color:#ffe6aa;
  box-shadow:0 20px 44px -16px rgba(216,168,78,.75);
}
.is-top .pb-bar b{color:var(--dark);font-size:clamp(26px,2.9vw,38px)}
.is-top .pb-unit{color:var(--gold)}
.pb-bar em{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:3px 10px;border-radius:999px;background:var(--chili);color:#fff;
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 6px 14px -6px rgba(168,50,37,.7);
}
@media (max-width:860px){
  .promo-band{grid-template-columns:1fr;text-align:center;align-items:center}
  .pb-stairs{height:200px}
}
@media (max-width:480px){
  .pb-stairs{height:175px;gap:6px}
  .pb-unit{font-size:11px}
  .pb-bar{padding-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .pb-sheen{display:none}
  .pb-bar,.jstep-node{transform:none;opacity:1}
}

/* Desktop: kad berselang dirapatkan supaya bertindih separuh baris —
   laluan lebih padat, ruang kosong di sisi bertentangan tidak membazir. */
@media (min-width:761px){
  .jstep + .jstep{margin-top:calc(clamp(14px,2.2vw,26px) * -1 - 34px)}
}

/* Telefon: tarikh disembunyikan dari reben supaya kekal satu baris —
   kiraan hari di bawah sudah memberitahu tempohnya. */
@media (max-width:480px){
  .pb-ribbon-date{display:none}
}

/* ===== Kata Mereka: latar Gula Melaka =====
   Seksyen di atas (Cara Membuat Pesanan) hijau gelap dan di bawah
   (Cara Simpan) krim, jadi ulasan memakai coklat gula melaka jenama
   supaya ketiga-tiganya jelas terpisah. Kad diangkat sedikit daripada
   latar; teks krim dan bintang emas kekal. */
.sec--gula{
  color:var(--santan);
  background:
    radial-gradient(90% 70% at 85% 0%,rgba(216,168,78,.22),transparent 60%),
    radial-gradient(80% 70% at 0% 100%,rgba(183,102,70,.28),transparent 60%),
    linear-gradient(160deg,#5E3824,#43261A 60%,#381F14);
  --card:rgba(255,236,205,.07);
  --card-line:rgba(247,241,227,.18);
  --on-dark:#F7F1E3;
  --on-dark-dim:rgba(247,241,227,.76);
  --on-dark-faint:rgba(247,241,227,.6);
}
.sec--gula .head h2{color:var(--cream)}
.sec--gula .tst-card{
  background:var(--card);border-color:var(--card-line);
  box-shadow:0 24px 48px -30px rgba(20,8,2,.8);backdrop-filter:blur(2px);
}
.sec--gula .tst-card blockquote{color:var(--on-dark)}
.sec--gula .tst-who{border-top-color:var(--card-line)}
.sec--gula .tst-who b{color:var(--on-dark)}
.sec--gula .tst-who span span{color:var(--on-dark-faint)}
.sec--gula .stars{color:var(--gold)}
.sec--gula .tst-av i{background:var(--gold);color:#3A2015;font-weight:600}
.sec--gula .tst-av .batik{color:var(--gold)}
.sec--gula .tst-arrow{border-color:rgba(247,241,227,.32);color:rgba(247,241,227,.86)}
.sec--gula .tst-arrow:hover{border-color:var(--gold);color:var(--gold)}
.sec--gula .tst-dot{background:rgba(247,241,227,.3)}
.sec--gula .tst-dot.on{background:var(--gold)}

/* ===== Selang krim / hijau: Kata Mereka → Di Mana Nak Beli =====
   Ulasan dan Soalan kini krim (kad putih asal); Cara Simpan dan
   Di Mana Nak Beli kini hijau gelap. Di bawah ialah varian gelap
   untuk unsur yang dahulu hanya dilukis untuk latar krim. */

/* -- Cara Simpan pada hijau: kad diangkat sedikit, ikon cerah -- */
.sec--daun .store-item{background:var(--card);border-color:var(--card-line);box-shadow:none}
@media (hover:hover){
  .sec--daun .store-item:hover{border-color:rgba(216,168,78,.55);box-shadow:0 22px 44px -26px rgba(0,0,0,.7)}
}
.sec--daun .store-item b{color:var(--cream)}
.sec--daun .store-item p{color:var(--on-dark-dim)}
.sec--daun .store-ic{--ic:var(--gold)}
.sec--daun .store-item:nth-child(2) .store-ic{--ic:#E58B66}
.sec--daun .store-item:nth-child(3) .store-ic{--ic:#E9C77E}
.sec--daun .store-ic{background:color-mix(in srgb,var(--ic) 16%,transparent)}
.sec--daun .store-no{color:var(--gold);opacity:.14}

/* -- Di Mana Nak Beli pada hijau: kad, peta dan senarai stokis
   kekal putih (peta perlu latar cerah); hanya tab dan teks yang
   duduk terus atas hijau diberi warna krim / emas. -- */
.sec--daun .tab{border-color:rgba(247,241,227,.3);color:rgba(247,241,227,.86)}
.sec--daun .tab:hover{border-color:var(--gold);color:var(--gold)}
.sec--daun .tab.on{background:var(--gold);border-color:var(--gold);color:#20180A}
.sec--daun .swipe-note{color:var(--on-dark-faint)}

/* -- Di Mana Nak Beli: semua kotak selaras dengan latar hijau --
   Bar lokasi, peta, butang zum, tetingkap pin, kad stokis dan kad
   kedai memakai kad gelap yang sama seperti ulasan/simpan (--card),
   teks krim, dan aksen emas. Gambar stokis kekal seperti asal. */
#beli.sec--daun .shop-card,
#beli.sec--daun .geo-bar,
#beli.sec--daun .outlet,
#beli.sec--daun .mapbox,
#beli.sec--daun .pop,
#beli.sec--daun .zbtn,
#beli.sec--daun .outlet-card{background:var(--card);border-color:var(--card-line);box-shadow:none}

#beli.sec--daun .shop-card b,
#beli.sec--daun .outlet b,
#beli.sec--daun .pop-body b,
#beli.sec--daun .outlet-card b{color:var(--on-dark)}
#beli.sec--daun .shop-card p,
#beli.sec--daun .geo-bar p,
#beli.sec--daun .outlet span,
#beli.sec--daun .outlet-card small{color:var(--on-dark-dim)}
#beli.sec--daun .geo-bar b{color:var(--gold)}
#beli.sec--daun .pop-body span{color:var(--on-dark-faint)}

/* hover dan pilihan: emas, bukan hijau yang lenyap pada hijau */
#beli.sec--daun .shop-card:hover,
#beli.sec--daun .outlet:hover{border-color:rgba(216,168,78,.6);box-shadow:0 22px 44px -26px rgba(0,0,0,.7)}
#beli.sec--daun .outlet.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ikon dan butang */
#beli.sec--daun .shop-ic{background:rgba(216,168,78,.14);color:var(--gold)}
#beli.sec--daun .btn--green{background:var(--gold);color:#20180A;box-shadow:0 10px 24px -10px rgba(216,168,78,.6)}
#beli.sec--daun .shop-card .is-soon,
#beli.sec--daun .shop-card .is-soon:hover{border-color:rgba(247,241,227,.24);color:rgba(247,241,227,.55)}
#beli.sec--daun .zbtn{color:var(--on-dark)}
#beli.sec--daun .zbtn:hover{border-color:var(--gold);color:var(--gold)}
#beli.sec--daun .pop-x{background:rgba(247,241,227,.12);color:var(--on-dark)}

/* peta: titik daratan krim pudar, pin emas */
#beli.sec--daun .mapbox .dots{color:var(--cream);opacity:.4}
#beli.sec--daun .pin::before{background:var(--gold);border-color:var(--card)}
#beli.sec--daun .pin.on::before{background:#E58B66}
#beli.sec--daun .map-hint{background:rgba(10,42,25,.88);color:var(--on-dark-faint)}

/* butiran stokis */
#beli.sec--daun .outlet-tel,
#beli.sec--daun .outlet-links a,
#beli.sec--daun .outlet-links button{color:var(--gold)}
#beli.sec--daun .outlet-links a:hover,
#beli.sec--daun .outlet-links button:hover{color:#E58B66}
#beli.sec--daun .outlet .km,
#beli.sec--daun .badge-near{color:#E58B66}
#beli.sec--daun .badge-near{background:rgba(229,139,102,.14)}
#beli.sec--daun .outlet-card .hrs{background:rgba(216,168,78,.14);color:var(--gold)}
#beli.sec--daun .outlet-thumb:not(.has-img),
#beli.sec--daun .pop-thumb:not(.has-img){background:linear-gradient(160deg,#16432A,#0D3020)}
#beli.sec--daun .outlets::-webkit-scrollbar-track{background:rgba(247,241,227,.08)}
#beli.sec--daun .outlets::-webkit-scrollbar-thumb{background:rgba(216,168,78,.5)}

/* ===== menu = tajuk seksyen penuh =====
   Label menu kini sama dengan tajuk setiap seksyen (ua_section_titles).
   Lapan tajuk penuh perlukan ~1600px dalam bar, jadi bar penuh hanya
   dipaparkan pada skrin yang sangat lebar; selain itu menu dibuka
   melalui butang burger. Di desktop menu itu panel lungsur di kanan,
   bukan helaian selebar skrin. */
@media (max-width:1680px){
  .nav-links{display:none}
  .burger{display:flex}
}
.msheet{max-height:calc(100dvh - var(--nav-h) - 12px);overflow-y:auto;overscroll-behavior:contain}
@media (min-width:1001px){
  .msheet{
    top:calc(var(--nav-h) + 14px);left:auto;
    right:max(24px,calc((100vw - var(--container)) / 2 + 24px));
    width:360px;padding:10px 22px 20px;border:1px solid var(--rule);border-radius:var(--r-lg);
    box-shadow:0 26px 60px -20px rgba(45,37,32,.35);
    transform:translateY(-10px);opacity:0;visibility:hidden;
    /* tertutup tanpa transition: kalau tidak, panel berkelip sekejap
       bila lebar tetingkap melintasi 1000px (keadaan telefon -> desktop) */
    transition:none;
  }
  .msheet.on{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--e-out),opacity .25s ease}
  .msheet a{text-align:left;font-size:15px;padding:12px 6px;border-radius:10px}
  .msheet a:not(.btn):hover{color:var(--daun);background:rgba(82,107,74,.07)}
  .msheet a:nth-last-child(2){border-bottom:0}
  /* butang Beli Sekarang sudah ada dalam bar di desktop */
  .msheet .btn{display:none}
}

/* ============================================================
   ANIMASI SEMASA MENATAL
   Dibina di atas .rv / .rv.in yang sedia ada. Keadaan awal ditulis
   sebagai :not(.in) supaya selepas masuk, gaya hover asal setiap
   kad (angkat, bayang) kekal berfungsi tanpa bertembung.
   ============================================================ */

/* -- bar kemajuan tatal: --sp (0..1) ditetapkan oleh ua-core.js -- */
.scroll-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--terracotta),var(--gold) 60%,#ffe6aa);
  box-shadow:0 0 12px rgba(216,168,78,.55);
}

/* -- tajuk seksyen: tajuk naik dari kabur, garis emas dilukis,
      kemudian perenggan menyusul -- */
.head.rv{opacity:1;transform:none}
.head.rv h2,.head.rv p{
  transition:opacity .9s var(--e-out),transform .9s var(--e-out),filter .9s var(--e-out);
}
.head.rv:not(.in) h2{opacity:0;transform:translateY(30px);filter:blur(8px)}
.head.rv:not(.in) p{opacity:0;transform:translateY(18px)}
.head.rv p{transition-delay:.22s}
.head h2::after{
  content:"";display:block;width:72px;height:2px;margin-top:16px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform-origin:0 50%;transition:transform .9s var(--e-out) .35s,opacity .5s ease .35s;
}
.head--mid h2::after{margin-inline:auto;transform-origin:50% 50%}
.head.rv:not(.in) h2::after{transform:scaleX(0);opacity:0}

/* -- kad: masuk dengan sedikit skala; lengah berperingkat (--rvd)
      diberi oleh ua-core.js mengikut kedudukan dalam baris -- */
.pcard.rv:not(.in){transform:translateY(40px) scale(.95)}
.store-item.rv:not(.in){transform:translateY(40px) scale(.95)}
.tst-wrap.rv:not(.in){transform:translateY(36px) scale(.97)}
.promo-band.rv:not(.in){transform:translateY(36px) scale(.97)}
.steps-cta.rv:not(.in){transform:scale(.9)}
/* soalan lazim: berselang dari kiri dan kanan */
.qa.rv:nth-child(odd):not(.in){transform:translateX(-34px)}
.qa.rv:nth-child(even):not(.in){transform:translateX(34px)}
/* cara penyediaan: gambar "terbuka" dari bawah */
.way-item.rv:not(.in){transform:translateY(34px);clip-path:inset(18% 0 0 0 round 20px)}
.way-item.rv{clip-path:inset(0 0 0 0 round 0);transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out),clip-path 1.1s var(--e-out);transition-delay:var(--rvd,0ms)}

/* -- Di Mana Nak Beli: isi panel masuk satu demi satu. Animasi
      (bukan transition) dengan fill backwards, supaya selepas tamat
      tiada transform yang tertinggal menghalang hover. -- */
@keyframes uaRise{from{opacity:0;transform:translateY(28px) scale(.97)}}
.wtb-panel.in .geo-bar,
.wtb-panel.in .mapbox,
.wtb-panel.in .shop-card,
.wtb-panel.in .outlet{animation:uaRise .75s var(--e-out) backwards}
.wtb-panel.in .mapbox{animation-delay:.12s}
.wtb-panel.in .shop-card:nth-child(1),.wtb-panel.in .outlet:nth-child(1){animation-delay:.1s}
.wtb-panel.in .shop-card:nth-child(2),.wtb-panel.in .outlet:nth-child(2){animation-delay:.2s}
.wtb-panel.in .shop-card:nth-child(3),.wtb-panel.in .outlet:nth-child(3){animation-delay:.3s}
.wtb-panel.in .shop-card:nth-child(4),.wtb-panel.in .outlet:nth-child(4){animation-delay:.4s}
.wtb-panel.in .outlet:nth-child(n+5){animation-delay:.5s}

/* -- laluan pesanan: garis asal dipudarkan, dan garis emas terang
      "mengisi" ke bawah mengikut tatal (--jp 0..1 daripada JS) -- */
.journey::before{opacity:.28}
.journey::after{
  content:"";position:absolute;top:calc(var(--node) / 2);bottom:calc(var(--node) / 2);left:50%;width:2px;
  transform:translateX(-50%) scaleY(var(--jp,0));transform-origin:50% 0;
  background:linear-gradient(180deg,#ffe6aa,var(--gold));box-shadow:0 0 10px rgba(216,168,78,.6);
}
@media (max-width:760px){
  .journey::after{left:calc(var(--node) / 2)}
  .qa.rv:nth-child(odd):not(.in),.qa.rv:nth-child(even):not(.in){transform:translateX(-22px)}
}

@media (prefers-reduced-motion:reduce){
  .scroll-bar{display:none}
  .head.rv:not(.in) h2,.head.rv:not(.in) p{opacity:1;transform:none;filter:none}
  .head.rv:not(.in) h2::after{transform:none;opacity:1}
  .way-item.rv:not(.in){clip-path:none}
  .journey::after{transform:translateX(-50%)}
  .wtb-panel.in .geo-bar,.wtb-panel.in .mapbox,.wtb-panel.in .shop-card,.wtb-panel.in .outlet{animation:none}
}


/* ===== jalur faedah: tajuk + pautan; tajuk "Jom Kenali" lebih dekat =====
   Maklum balas pelanggan: ikon faedah disangka butang, dan bila tiada
   apa berlaku jurang gelap di bawahnya membuat mereka menyangka laman
   sudah habis. (1) jalur kini bertajuk; (2) setiap faedah membawa ke
   seksyen Tentang; (3) di telefon tajuk "Jom Kenali" dan logo naik dan
   membesar supaya ia duduk dekat dengan jalur ini. */
.hz-usp-title{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 auto clamp(12px,1.6vw,18px);padding-inline:20px;
  font-family:var(--sans);font-size:clamp(10.5px,.85vw,12.5px);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--h-cta);text-align:center;
}
.hz-usp-title::before,.hz-usp-title::after{
  content:"";flex:0 1 56px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,164,65,.7));
}
.hz-usp-title::after{transform:scaleX(-1)}
.hz-usp li > a{
  display:flex;flex-direction:column;align-items:center;gap:inherit;
  color:inherit;text-decoration:none;border-radius:14px;padding:4px 2px;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-micro) var(--e-out);
}
.hz-usp li > a:hover i,.hz-usp li > a:focus-visible i{background:rgba(217,164,65,.14);border-color:var(--h-cta)}
.hz-usp li > a:active{transform:scale(.95)}
.hz-usp i{transition:background var(--t-micro) ease,border-color var(--t-micro) ease}
@media (max-width:620px){
  .hz-usp-title{font-size:10px;letter-spacing:.16em;margin-bottom:10px}
  .hz-usp-title::before,.hz-usp-title::after{flex-basis:28px}
}
@media (max-width:760px){
  /* tajuk + logo duduk pada 34% tinggi pentas, bukan tepat di tengah:
     sebelum pin, pentas bermula betul-betul di bawah jalur faedah */
  .cine-title{top:34%}
  .cine-title::after{width:clamp(170px,46vw,210px);margin-top:16px}
}


/* ===== pakej kombo: medan pilihan dalam kad ===== */
.ua-pilihan{display:grid;gap:5px;margin:0 0 10px;font-size:12px;font-weight:600;color:var(--kopi-soft)}
.ua-pilihan select{
  width:100%;padding:10px 34px 10px 12px;border:1.5px solid var(--rule);border-radius:12px;
  background:var(--putih) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23526B4A' stroke-width='1.8'/%3E%3C/svg%3E") right 12px center/12px no-repeat;
  -webkit-appearance:none;appearance:none;font:600 13px/1.2 var(--sans);color:var(--kopi);
}
.ua-pilihan select:focus{outline:none;border-color:var(--daun)}
.single-product .ua-pilihan{max-width:360px;margin-bottom:16px}