:root{
  --cream:#FAF6F1;--cream2:#F3ECE4;--paper:#FFFFFF;--ink:#2A1B20;--ink2:#5C4B51;--mute:#8E7F85;--line:#E7DDD6;--line2:#D6C8BF;
  --wine:#7A1F3D;--wine2:#5E1730;--wine-soft:#F4E6EB;--sand:#C9B8A8;--ok:#3B7A57;--warn:#B7791F;--bad:#B23A48;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Jost",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --r:4px;--max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:11px 13px;width:100%;outline:none}
/* teks contoh dibuat jelas berbeda dari isian sungguhan — miring dan lebih muda */
input::placeholder,textarea::placeholder{color:#B3A6A0;font-style:italic;opacity:1}
/* kotak teks hanya boleh ditarik ke bawah; ke samping bisa merusak tata letak */
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px var(--wine-soft)}
:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
/* Menu atas dibangun setelah pengaturan toko sampai dari server. Tanpa ruang
   yang disediakan dulu, isi halaman tersentak turun saat menu muncul. */
#top{min-height:112px}
@media (max-width:760px){#top{min-height:124px}}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;letter-spacing:.005em;line-height:1.1}
/* Cormorant memakai angka gaya lama — tingginya naik-turun dan sebagian menjulur
   ke bawah. Bagus untuk kalimat, buruk untuk kode pesanan dan angka yang harus
   dibaca atau disalin. Paksa angka rata atas-bawah dengan lebar seragam. */
h1,h2,h3,.serif,.code,.kode,.stat b,.flash-timer div,.hero-notes b,.howto b,.rev-score b{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
/* Khusus kode pesanan: pakai huruf sans yang angkanya memang sudah rata, tidak
   bergantung pada dukungan fitur font. Kode dibaca dan disalin karakter per
   karakter, jadi kejelasan lebih penting daripada gaya. */
.code,.kode{font-family:var(--sans);font-weight:500;letter-spacing:.08em}
h2{font-size:clamp(32px,4vw,46px)}
h3{font-size:22px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--wine);font-weight:500}
/* kategori di halaman produk kini bisa ditekan — diberi garis bawah tipis supaya
   ketahuan bisa ditekan, bukan sekadar label seperti sebelumnya */
a.eyebrow{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(122,31,61,.35);display:inline-block;padding:2px 0}
a.eyebrow:hover{text-decoration-color:var(--wine)}
.muted{color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 26px;border-radius:999px;font-weight:500;font-size:14px;letter-spacing:.04em;border:1px solid var(--ink);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-wine{background:var(--wine);border-color:var(--wine);color:#fff}.btn-wine:hover{background:var(--wine2);border-color:var(--wine2)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:#fff}.btn-ink:hover{background:#000}
.btn-line{color:var(--ink);background:transparent}.btn-line:hover{background:var(--paper)}
.btn-white{background:#fff;border-color:#fff;color:var(--ink)}.btn-white:hover{background:var(--cream2)}
.btn-sm{height:40px;padding:0 18px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.btn svg{width:16px;height:16px}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(250,246,241,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:34px;width:auto}
.brand span{font-family:var(--serif);font-size:24px;letter-spacing:.22em;font-weight:500;color:var(--wine);padding-left:2px}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.nav ul a:hover{color:var(--wine)}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink)}
.icon-btn:hover{background:var(--cream2)}
.icon-btn svg{width:22px;height:22px}
.icon-btn .count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--wine);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.icon-btn .count:empty{display:none}
/* Kedipan sekali waktu angkanya bertambah — penanda satu-satunya yang tetap di
   layar bahwa barang masuk keranjang, sejak laci tidak lagi dibuka otomatis. */
@keyframes kedipKeranjang{
  0%{transform:scale(1)}
  30%{transform:scale(1.45);background:var(--ink)}
  100%{transform:scale(1)}
}
.icon-btn .count.kedip{animation:kedipKeranjang .45s ease-out}
/* pembeli yang mematikan animasi di HP-nya tetap dapat tanda, tanpa gerakan */
@media (prefers-reduced-motion:reduce){
  .icon-btn .count.kedip{animation:none;outline:2px solid var(--ink);outline-offset:1px}
}
.menu-btn{display:none}
@media (max-width:900px){.nav ul{display:none}.menu-btn{display:inline-flex}}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--cream)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;letter-spacing:.06em;text-transform:uppercase}

/* announcement */
.announce{background:var(--wine);color:#fff;text-align:center;font-size:13px;letter-spacing:.06em;padding:9px 16px}
@media (max-width:520px){.announce{font-size:11px;letter-spacing:.02em;padding:8px 10px}}

/* hero */
.hero{padding:56px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(46px,6.6vw,88px);line-height:.98;font-weight:400}
.hero h1 em{font-style:italic;color:var(--wine)}
.hero p{margin-top:22px;font-size:17px;color:var(--ink2);max-width:46ch}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.hero-art[hidden]{display:none}   /* display:grid di atas menimpa [hidden] kalau tidak ditulis ulang */
.hero-art img{width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:var(--r)}
.hero-art .a{margin-top:60px}
.hero-art .b{margin-bottom:60px}
.hero-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 40px rgba(42,27,32,.12)}
.hero-mark img{width:52px;height:auto;aspect-ratio:auto;border-radius:0}
.hero-notes{display:flex;gap:36px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line2);flex-wrap:wrap}
.hero-notes b{display:block;font-family:var(--serif);font-size:28px;font-weight:500;line-height:1}
.hero-notes span{font-size:13px;color:var(--mute)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero-art .a{margin-top:30px}.hero-art .b{margin-bottom:30px}.hero{padding-top:36px}}
/* Mode banner: hero diringkas jadi satu jalur di bawah banner. Fotonya dilepas
   (banner sudah jadi gambar utama), tiga angka pindah ke kolom kanan. */
.hero.ringkas{padding:38px 0 42px}
.hero.ringkas .hero-grid{grid-template-columns:1.3fr .7fr;gap:48px;align-items:center}
.hero.ringkas h1{font-size:clamp(30px,3.8vw,50px);line-height:1.05}
.hero.ringkas p{margin-top:14px;font-size:16px;max-width:52ch}
.hero.ringkas .hero-cta{margin-top:24px}
.hero.ringkas .hero-notes{margin-top:0;padding:0 0 0 40px;border-top:0;border-left:1px solid var(--line2);flex-direction:column;gap:20px}
.hero.ringkas .hero-notes b{font-size:24px}
@media (max-width:900px){
  .hero.ringkas .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero.ringkas .hero-notes{flex-direction:row;gap:26px;padding:22px 0 0;border-left:0;border-top:1px solid var(--line2)}
}

/* sections */
.sec{padding:80px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sec-head p{color:var(--ink2);margin-top:10px;max-width:56ch}
.sec-head .eyebrow{display:block;margin-bottom:10px}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillars div{background:var(--cream);padding:34px 30px}
.pillars h3{margin-bottom:10px}
.pillars p{color:var(--ink2);font-size:15px}
@media (max-width:760px){.pillars{grid-template-columns:1fr}}

/* filters & grid */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.chip{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);font-size:13px;letter-spacing:.04em;color:var(--ink2);background:transparent}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:22px 12px}}
/* bagian "Cocok dipadukan": tiga produk, jadi kolomnya tiga — bukan empat yang
   akan meninggalkan satu lubang kosong di layar lebar */
.grid.grid-3{grid-template-columns:repeat(3,1fr)}
/* Di HP tiga kartu dalam dua kolom meninggalkan satu kartu menggantung sendirian.
   Dijadikan satu baris yang digeser ke samping: ketiganya sejajar, fotonya tetap
   cukup besar, dan tingginya tidak memakan layar sebanyak dua baris. */
@media (max-width:640px){
  .grid.grid-3{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .grid.grid-3::-webkit-scrollbar{display:none}
  .grid.grid-3>.card{flex:0 0 46%;scroll-snap-align:start}
}
.sec-more{font-size:13.5px;color:var(--wine);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.card{display:flex;flex-direction:column;gap:10px}
.card .media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream2);border-radius:var(--r)}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .media img{transform:scale(1.04)}
.card .badge{position:absolute;top:10px;left:10px;background:var(--paper);color:var(--wine);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:2px}
.card .badge.sale{background:var(--wine);color:#fff}
.card .soldout{position:absolute;inset:0;background:rgba(250,246,241,.7);display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.card h3{font-size:17px;font-family:var(--sans);font-weight:500;line-height:1.35}
.card .cat{font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
/* Harga tidak boleh patah di tengah. Tanpa penjagaan ini, di kartu yang sempit
   "Rp 119.000" terbelah jadi "Rp" di satu baris dan "119.000" di baris bawahnya.
   Yang boleh berpindah baris adalah harga coretnya sebagai satu kesatuan. */
.card .price{display:flex;gap:2px 8px;align-items:baseline;flex-wrap:wrap}
.card .price>*{white-space:nowrap}
.card .price b{font-weight:500;font-size:16px}
.card .price .from{font-size:11px;color:var(--mute);letter-spacing:.04em}
.pdp-info .price .from{font-size:13px;color:var(--mute)}
.card .price s{color:var(--mute);font-size:13px}
.card .sizes{display:flex;gap:4px;flex-wrap:wrap}
.card .sizes span{font-size:11px;padding:2px 7px;border:1px solid var(--line2);border-radius:2px;color:var(--ink2)}
.card .sizes span.out{text-decoration:line-through;opacity:.45}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--mute);border:1px dashed var(--line2)}

/* size chart */
.sizechart{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media (max-width:900px){.sizechart{grid-template-columns:1fr}}
table.chart{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)}
table.chart th,table.chart td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:center}
table.chart th{font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:var(--cream2)}
table.chart td:first-child{font-weight:500;text-align:left}
.howto{display:grid;gap:18px}
.howto div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.howto b{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--wine);line-height:1}
.howto p{color:var(--ink2);font-size:15px}

/* live */
.live{background:var(--ink);color:#fff;padding:64px 0}
.live .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
@media (max-width:800px){.live .wrap{grid-template-columns:1fr}}
.live h2{color:#fff}
.live p{color:#CDBFC5;margin-top:10px;max-width:56ch}
.live .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#FF4D6D;margin-right:10px;box-shadow:0 0 0 4px rgba(255,77,109,.25)}
.live .btn{border-color:#fff;color:#fff}.live .btn:hover{background:#fff;color:var(--ink)}

/* faq */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line2)}
.faq details:first-of-type{border-top:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:28px;color:var(--wine);line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink2);padding:0 0 22px;max-width:66ch}

/* footer */
footer.site{border-top:1px solid var(--line2);padding:56px 0 30px;background:var(--cream2)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
@media (max-width:800px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.foot{grid-template-columns:1fr}}
.foot h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px;font-size:15px}
.foot ul a:hover{color:var(--wine)}
.foot-brand img{height:60px;width:auto}
.foot-brand p{color:var(--ink2);font-size:14px;margin-top:14px;max-width:34ch}
.copy{margin-top:44px;padding-top:20px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mute)}

/* cart drawer */
.drawer{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(42,27,32,.45)}
.drawer[hidden]{display:none}
.drawer-panel{width:100%;max-width:440px;height:100%;background:var(--cream);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.15)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line2)}
.drawer-head h3{font-size:26px}
.drawer-body{flex:1;overflow:auto;padding:12px 22px}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:72px;height:96px;object-fit:cover;border-radius:2px}
.cart-item h4{font-weight:500;font-size:15px;line-height:1.3}
.cart-item .meta{font-size:13px;color:var(--mute);margin-top:3px}
.cart-item .qty{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;margin-top:10px}
.cart-item .qty button{width:30px;height:30px}
.cart-item .qty span{min-width:24px;text-align:center;font-size:14px}
.cart-item .rm{color:var(--mute);font-size:12px;text-decoration:underline;margin-top:8px;display:inline-block}
.cart-item .line{font-weight:500;font-size:15px;text-align:right}
.drawer-foot{padding:18px 22px 24px;border-top:1px solid var(--line2);background:var(--cream2)}
.drawer-foot .row{display:flex;justify-content:space-between;font-size:15px;margin-bottom:8px}
.drawer-foot .row.total{font-size:18px;font-weight:500;margin:10px 0 16px}
.drawer-foot .btn{width:100%}
.drawer-foot .free{font-size:12px;color:var(--ok);margin-bottom:10px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:80;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* wa float */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:50;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.wa-float svg{width:28px;height:28px}
/* Tombol keranjang melayang — HANYA di layar HP. Sudut bawah adalah tempat jempol
   berada; ikon keranjang di header harus dijangkau ke ujung atas layar, yang di HP
   tinggi sekarang sering perlu menggeser genggaman. Ditaruh di kiri supaya tidak
   berebut jari dengan tombol WhatsApp di kanan, dan dibuat lebih kecil serta lebih
   tenang daripada WhatsApp supaya keduanya tidak sama-sama berteriak. */
.cart-float{display:none}
@media (max-width:760px){
  .cart-float{position:fixed;left:18px;bottom:18px;z-index:50;width:48px;height:48px;border:0;
    border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;
    justify-content:center;box-shadow:0 8px 22px rgba(42,27,32,.28);cursor:pointer;padding:0}
  .cart-float[hidden]{display:none}
  .cart-float svg{width:23px;height:23px}
  .cart-float .count{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
    border-radius:10px;background:var(--ink);color:#fff;font-size:11px;font-weight:600;
    display:flex;align-items:center;justify-content:center;border:2px solid var(--cream)}
  .cart-float .count:empty{display:none}
}

/* product page */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;padding:40px 0 80px;align-items:start}
@media (max-width:900px){.pdp{grid-template-columns:1fr;gap:28px}}
.gallery{display:grid;gap:12px}
.gallery .main{aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--cream2)}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.gallery .thumbs{display:flex;gap:10px}
.gallery .thumbs button{width:70px;height:90px;border:1px solid var(--line2);border-radius:2px;overflow:hidden;opacity:.7}
.gallery .thumbs button[aria-pressed="true"]{border-color:var(--wine);opacity:1}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover}
.pdp-info{position:sticky;top:96px}
.pdp-info h1{font-size:clamp(30px,3.6vw,42px);margin:8px 0 14px}
.pdp-info .price{display:flex;gap:4px 12px;align-items:baseline;margin-bottom:22px;flex-wrap:wrap}
.pdp-info .price>*{white-space:nowrap}
.pdp-info .price b{font-size:24px;font-weight:500}
.pdp-info .price s{color:var(--mute)}
.pdp-info .price .off{background:var(--wine);color:#fff;font-size:11px;padding:3px 7px;border-radius:2px;letter-spacing:.06em}
.color-pick{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 22px}
.color-pick button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);padding:3px;background:var(--paper);transition:border-color .15s}
.color-pick button i{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(0,0,0,.08)}
.color-pick button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--cream),0 0 0 3px var(--ink)}
.color-pick button:disabled{opacity:.35;cursor:not-allowed;position:relative}
.color-pick button:disabled::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--ink);transform:rotate(-45deg)}
.card .colorbar{display:flex;gap:4px;margin-top:2px}
.card .colorbar i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line2);display:block}
.size-pick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 22px}
.size-pick button{min-width:56px;height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:2px;font-size:14px;background:var(--paper)}
.size-pick button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Ukuran habis: tetap terbaca (.55, bukan .35 yang nyaris tembus pandang) dan
   tanpa coretan — coretan di halaman ini sudah berarti "harga lama". Yang
   memberi tahu stoknya adalah kata "habis" di bawah angkanya. */
.size-pick button:disabled{opacity:.55;cursor:not-allowed}
/* Jawaban untuk ukuran yang habis — letaknya tepat di bawah deretan ukuran,
   di tempat pembeli baru saja menyentuh, bukan jauh di bawah tombol beli. */
.habis-msg{font-size:13.5px;line-height:1.6;color:var(--ink2);background:var(--cream2);
  border-radius:3px;padding:10px 12px;margin:-12px 0 20px}
.habis-msg[hidden]{display:none}
/* tautan di dalam pesan ukuran: "Lihat Cream", "tanya CS lewat WhatsApp" */
.habis-msg .tautan,#sizeMsg .tautan{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--wine);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.size-pick button small{display:block;font-size:10px;color:var(--warn)}
.size-pick button small.habis{color:var(--mute);letter-spacing:.04em}
.size-pick button[aria-pressed="true"] small{color:#F7C5A0}
.pdp-info label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:500}
.pdp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.pdp-actions .btn{flex:1;min-width:180px}
.pdp-info .desc{color:var(--ink2);line-height:1.75}
.pdp-info .spec{margin-top:22px;font-size:14px;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;color:var(--ink2)}
.pdp-info .spec span:nth-child(odd){color:var(--mute)}

/* checkout */
.checkout{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:40px 0 80px;align-items:start}
/* Di layar sempit kolomnya menumpuk, dan form alamat yang panjang membuat
   ringkasan terdorong jauh ke bawah — pembeli mengisi data tanpa melihat apa
   yang dibelinya. Ringkasan dinaikkan ke atas. Di layar lebar tidak perlu,
   karena keduanya sudah bersebelahan; di sana ringkasan dibuat ikut menempel
   saat halaman digulir. */
@media (max-width:900px){
  .checkout{grid-template-columns:1fr;gap:24px}
  .checkout .summary{order:-1}
  /* Angka-angkanya pindah ke atas tombol bayar, jadi di sini tinggal daftar
     barangnya saja — supaya tidak ada dua tempat yang menampilkan total. */
  .checkout .summary .row,
  .checkout .summary #freeNote{display:none}
  .checkout .summary .item:last-of-type{border-bottom:0;padding-bottom:0}
}
@media (min-width:901px){
  .checkout .summary{position:sticky;top:24px}
}
.box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.box h3{margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;font-weight:500}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.two{grid-template-columns:1fr}}
.summary .item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;align-items:center}
.summary .item img{width:56px;height:72px;object-fit:cover;border-radius:2px}
/* Tombol hapus di ringkasan checkout. Sengaja kecil dan redup supaya tidak
   menyaingi tombol bayar, tapi padding atas-bawahnya dibuat lega supaya masih
   enak ditekan dengan jempol di layar kecil. */
.summary .item .rmck{background:none;border:0;margin:0;padding:7px 10px 7px 0;font:inherit;font-size:13px;
  color:var(--mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer;line-height:1}
.summary .item .rmck:hover{color:var(--wine)}
.summary .item .rmck[disabled]{opacity:.45;cursor:default;text-decoration:none}
/* Pemilih jumlah di halaman produk & panel beli cepat. Tombolnya 38px supaya
   masih enak ditekan dengan jempol, dan angkanya dikunci lebar tetap supaya
   barisnya tidak bergeser waktu 9 berubah jadi 10. */
.jml-pick{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px}
.jml-pick[hidden]{display:none}
.jml-pick .jml-cap{padding-top:13px}
/* Kotak −/+ di atas, keterangan stoknya tepat di bawahnya. Dibungkus kolom
   sendiri karena .sp-row itu grid satu kolom — tanpa pembungkus, kotaknya
   melar selebar panel. */
.jml-baris{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* Panel beli cepat disamakan dengan halaman produk: tulisan "Jumlah" di kiri,
   kotak −/+ di sebelahnya, keterangan stok di bawah kotak. Baris lain di panel
   itu tetap bertumpuk seperti biasa. */
.sp-row.jml-row{grid-template-columns:auto 1fr;align-items:start;column-gap:12px}
.sp-row.jml-row .sp-cap{padding-top:13px}
.jml-sisa{font-size:13px;color:var(--mute)}
.jml-cap{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.jml-atur{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:2px;overflow:hidden}
.jml-atur button{width:38px;height:38px;border:0;background:var(--paper);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.jml-atur button:hover:not([disabled]){background:var(--cream2)}
.jml-atur button[disabled]{color:var(--line2);cursor:default}
.jml-atur span{min-width:42px;text-align:center;font-size:15px;
  font-variant-numeric:tabular-nums;border-left:1px solid var(--line2);border-right:1px solid var(--line2);line-height:38px}
/* Di layar sentuh tombolnya dibesarkan ke 46px — 38px cukup untuk kursor,
   tapi terasa sempit untuk jempol. */
@media (max-width:640px){
  .jml-atur button{width:46px;height:46px;font-size:20px}
  .jml-atur span{min-width:52px;line-height:46px;font-size:16px}
  .jml-pick .jml-cap,.sp-row.jml-row .sp-cap{padding-top:17px}
}
.summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:15px}
.summary .row.total{border-top:1px solid var(--line2);margin-top:8px;padding-top:14px;font-size:18px;font-weight:500}
.pay-logos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pay-logos span{font-size:11px;letter-spacing:.06em;padding:5px 9px;border:1px solid var(--line2);border-radius:2px;color:var(--ink2)}
.err{color:var(--bad);font-size:14px;margin-top:10px;min-height:20px}

/* track */
.track-form{display:flex;gap:10px;max-width:560px;margin-top:24px}
.track-form input{height:50px;font-size:16px;letter-spacing:.04em}
.order-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-top:24px}
.order-card .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.order-card .code{font-family:var(--serif);font-size:30px;letter-spacing:.04em}
.pill{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px;background:var(--cream2);color:var(--ink2)}
.pill.paid{background:#E4F1E9;color:var(--ok)}.pill.pending{background:#FBF0DC;color:var(--warn)}.pill.bad{background:#F8E1E4;color:var(--bad)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:26px 0}
@media (max-width:600px){.steps{grid-template-columns:repeat(2,1fr)}}
.steps div{border-top:3px solid var(--line2);padding-top:10px;font-size:13px;color:var(--mute)}
.steps div.done{border-color:var(--wine);color:var(--ink)}
.steps div.now{border-color:var(--wine);color:var(--wine);font-weight:500}
.steps div span{display:block;font-size:11px;color:var(--mute);font-weight:400}

/* ---------- flash sale ---------- */
.flashsec{background:linear-gradient(180deg,#FFF6F2,var(--cream));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap}
.flash-eyebrow{display:inline-flex;align-items:center;gap:7px;color:#C2410C}
.spark{width:9px;height:9px;border-radius:50%;background:#EA580C;box-shadow:0 0 0 4px rgba(234,88,12,.18);display:inline-block}
.flash-timer{text-align:right}
.flash-timer>span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.flash-timer div{font-family:var(--serif);font-size:30px;letter-spacing:.02em;color:var(--ink)}
.flash-timer div b{background:var(--ink);color:#fff;padding:2px 9px;border-radius:4px;font-weight:500;display:inline-block;min-width:46px;text-align:center}
.card .badge.flash{background:#EA580C;color:#fff}
/* Slot kanan atas: satu kata status (flash sale / best seller / baru) supaya
   tidak bertabrakan dengan angka diskon yang tetap di kiri atas. */
.card .badge.kanan{left:auto;right:10px;max-width:calc(100% - 20px)}
.card .badge.kanan.best{background:var(--ink);color:#fff}
.card .badge.kanan.flash{background:#EA580C;color:#fff}
.card .badge.kanan.baru{background:var(--wine-soft);color:var(--wine)}
@media (max-width:560px){.card .badge{font-size:10px;padding:4px 7px;letter-spacing:.06em;top:8px}
  .card .badge.kanan{right:8px}.card .badge.flash,.card .badge.sale{left:8px}
  .card .badge.kanan.flash{left:auto}}
/* Di layar sempit (iPhone SE dan sejenisnya) "-30%" + "Flash Sale" pada satu
   kartu sempat saling tindih; stikernya dikecilkan supaya tetap muat berdua. */
@media (max-width:380px){.card .badge{font-size:9px;padding:3px 5px;letter-spacing:.02em}}
.quota{margin-top:2px}
.quota>span{display:block;height:5px;background:#EA580C;border-radius:3px;max-width:100%}
.quota{background:var(--cream2);border-radius:3px;position:relative;padding-bottom:0}
.quota small{display:block;font-size:11px;color:var(--mute);margin-top:4px}
.quota.big{margin:-8px 0 20px;max-width:320px}
.quota.big>span{height:7px}
.flash-chip{display:inline-flex;align-items:center;gap:8px;background:#FFF1EA;color:#C2410C;border:1px solid #FBD5C0;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:500;margin-bottom:14px}
.flash-chip span{font-variant-numeric:tabular-nums;color:var(--ink);margin-left:2px}
.flash-chip span b{font-weight:600}

/* ---------- bintang & rating ---------- */
.stars{display:inline-flex;align-items:center;gap:4px;color:#E0A82E;font-size:13px;letter-spacing:.5px}
.stars b{color:var(--ink);font-weight:500;font-size:13px;margin-left:2px}
.stars small{color:var(--mute);font-size:12px}
.rate-link{display:inline-block;margin-bottom:10px}
.rate-link:hover .stars b{text-decoration:underline}
.fitwarn{background:#FBF0DC;border-left:3px solid var(--warn);padding:10px 14px;border-radius:0 4px 4px 0;font-size:14px;margin-bottom:16px}
.sizelink{color:var(--wine);text-decoration:underline;text-transform:none;letter-spacing:0;font-size:13px;margin-left:8px;font-weight:500}

/* ---------- ulasan di halaman produk ---------- */
.reviews{border-top:1px solid var(--line);padding:56px 0 80px}
.rev-top{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line)}
@media (max-width:760px){.rev-top{grid-template-columns:1fr;gap:20px}}
.rev-score{text-align:center}
.rev-score b{display:block;font-family:var(--serif);font-size:54px;line-height:1}
.rev-score div{color:#E0A82E;font-size:16px;letter-spacing:2px}
.rev-score span{font-size:12px;color:var(--mute)}
.rev-bars{display:grid;gap:5px;max-width:320px}
.rb{display:grid;grid-template-columns:28px 1fr 28px;gap:8px;align-items:center;font-size:12px;color:var(--mute)}
.rb i{display:block;height:7px;background:var(--cream2);border-radius:4px;overflow:hidden}
.rb i b{display:block;height:100%;background:#E0A82E;border-radius:4px}
.rev-fit{grid-column:1/-1;max-width:520px}
.rev-fit>b{font-size:13px;font-weight:500;display:block;margin-bottom:8px}
.fitbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--cream2);gap:2px}
.fitbar i{display:block;height:100%}
.fitbar i.k{background:#C2705B}.fitbar i.p{background:var(--ok)}.fitbar i.b{background:#8A93B5}
.fitleg{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--ink2)}
.fitleg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
.fitleg i.k{background:#C2705B}.fitleg i.p{background:var(--ok)}.fitleg i.b{background:#8A93B5}
.rev-list{display:grid;gap:0}
.rev{padding:22px 0;border-bottom:1px solid var(--line)}
.rev-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rev-h b{font-weight:500}
.rstars{color:#E0A82E;letter-spacing:1px;font-size:13px}
.rev-h small{color:var(--mute);font-size:12px}
.rev-m{font-size:12px;color:var(--mute);margin-top:3px}
.rev p{margin-top:9px;color:var(--ink2);max-width:72ch}
.rev-reply{margin-top:12px;padding:12px 16px;background:var(--cream2);border-radius:4px}
.rev-reply b{font-size:12px;letter-spacing:.06em;color:var(--wine)}
.rev-reply p{margin-top:4px;font-size:14px}
.reviewed{font-size:12px;color:var(--ok)}
.revbtn{font-size:12px;color:var(--wine);text-decoration:underline;margin-top:4px}
.notice{background:var(--cream2);border:1px solid var(--line2);border-radius:var(--r);padding:11px 14px;font-size:13px;color:var(--ink2);margin-bottom:16px}
.notice button{color:var(--wine);text-decoration:underline;font-size:13px}

/* ---------- popup temukan ukuranmu / tulis ulasan ---------- */
.sf-wrap{position:fixed;inset:0;z-index:70;background:rgba(42,27,32,.5);display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto}
.sf{background:var(--cream);border-radius:var(--r);width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.sf-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line2)}
.sf-head h3{font-size:26px}
.sf-x{font-size:28px;line-height:1;color:var(--mute);width:36px;height:36px;border-radius:50%}
.sf-x:hover{background:var(--cream2);color:var(--ink)}
.sf-body{padding:22px 24px 26px;overflow:auto}
.sf-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.sf-tabs button{padding:9px 14px;border:1px solid var(--line2);border-radius:999px;font-size:13px;background:var(--paper)}
.sf-tabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sf-hint{font-size:13px;color:var(--mute);margin-bottom:12px}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.sf-row{grid-template-columns:1fr}}
.sf-row label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500;position:relative}
.sf-row label span{position:absolute;right:12px;top:31px;font-size:12px;color:var(--mute);text-transform:none;letter-spacing:0}
.sf-row input{margin-top:6px;padding-right:38px}
.sf-go{width:100%;margin-top:16px}
.sf-result{margin-top:16px;background:var(--paper);border:1px solid var(--line2);border-radius:var(--r);padding:18px}
.sf-result.warn{background:#FBF0DC;border-color:#E6CF9E;font-size:14px}
.sf-size{font-family:var(--serif);font-size:26px;margin-bottom:8px}
.sf-size b{color:var(--wine)}
.sf-result p{font-size:14px;color:var(--ink2);margin-bottom:8px}
.sf-social{background:var(--wine-soft);border-radius:4px;padding:10px 12px;color:var(--ink)!important}
.sf-cav{font-size:12px!important;color:var(--mute)!important}
.sf-chart{margin-top:24px;padding-top:20px;border-top:1px solid var(--line2)}
.sf-chart h4{font-size:14px;font-weight:500;margin-bottom:10px}
.sf-scroll{overflow-x:auto}
.sf-chart table{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper)}
.sf-chart th,.sf-chart td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.sf-chart th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:var(--cream2);font-weight:500}
.sf-chart td:first-child{text-align:left}
.sf-note{font-size:12px;color:var(--mute);margin-top:12px}
.sf-note a{color:var(--wine);text-decoration:underline}
.starpick{display:flex;gap:4px}
.starpick button{font-size:30px;color:var(--line2);line-height:1}
.starpick button[aria-pressed="true"]{color:#E0A82E}
.fitpick{display:flex;gap:8px;flex-wrap:wrap}
.fitpick button{padding:9px 16px;border:1px solid var(--line2);border-radius:999px;font-size:13px;background:var(--paper)}
.fitpick button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sf .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){.sf .two{grid-template-columns:1fr}}


/* ---------- banner halaman depan ---------- */
.bansec{position:relative;background:var(--ink)}
/* Ruang banner disediakan lebih dulu, seukuran foto yang akan mengisinya, supaya
   isi halaman tidak tersentak turun saat bannernya sampai dari server. */
.bansec.menunggu{aspect-ratio:2000/900}
@media (max-width:760px){.bansec.menunggu{aspect-ratio:1080/1350}}
.banslides{position:relative}
.banslide{display:block;position:relative;color:inherit;text-decoration:none}
.banslide[hidden]{display:none}
.banslide picture,.banslide img{display:block;width:100%}
.banslide img{height:clamp(420px,46vw,660px);object-fit:cover;object-position:center}
/* Video latar menumpuk tepat di atas fotonya, ukurannya persis sama. Fotonya
   tetap di bawah sebagai gambar pembuka selagi video dimuat — dan sebagai
   tampilan tetap kalau perangkat pembeli menolak memutar video sendiri.
   Urutan lapisannya dipaku: video paling bawah (0), lapisan penggelap di
   tengah (1), teks paling atas (2). Tanpa ini video menutupi penggelapnya
   dan teksnya jadi susah dibaca di atas video yang ramai. */
.banslide .ban-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--vy,50%);pointer-events:none;z-index:0}
/* Banner tanpa foto: videonya sendiri yang memberi tinggi, sama persis dengan tinggi foto */
.banslide.tanpa-foto{background:var(--ink)}
.banslide.tanpa-foto .ban-vid{position:relative;display:block;height:clamp(420px,46vw,660px)}
@media (max-width:760px){.banslide.tanpa-foto .ban-vid{height:clamp(440px,120vw,560px)}}
/* Di HP banner-nya tegak, jadi yang terpotong kiri–kanan — posisinya pakai --vx */
@media (max-width:760px){.banslide .ban-vid{object-position:var(--vx,50%) 50%}}
/* Tombol suara: satu untuk seluruh banner, di atas teks dan lapisan penggelap */
.ban-suara{position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;border:0;border-radius:999px;background:rgba(20,16,18,.72);color:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.ban-suara:hover{background:rgba(20,16,18,.9)}
.ban-suara:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ban-suara[hidden]{display:none}
.ban-suara svg{width:16px;height:16px;flex:none}
/* Di HP cukup ikon dalam lingkaran 40px — tidak menutupi video, tetap pas untuk jari */
@media (max-width:760px){.ban-suara{top:12px;right:12px;width:40px;height:40px;padding:0;justify-content:center}.ban-suara .lbl{display:none}.ban-suara svg{width:18px;height:18px}}
.banslide::before{z-index:1}
.ban-text{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:2}
.ban-text .wrap{width:100%;pointer-events:auto}
.ban-text .wrap>*{max-width:560px}
/* lapisan gelap tipis supaya teks tetap terbaca di atas foto apa pun */
.banslide::before{content:"";position:absolute;inset:0;pointer-events:none}
.banslide.left::before{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 38%,transparent 66%)}
.banslide.right::before{background:linear-gradient(270deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 38%,transparent 66%)}
.banslide.center::before{background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.12) 45%,rgba(0,0,0,.42) 100%)}
.banslide.dark::before{background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 40%,transparent 68%)}
.banslide.dark.right::before{background:linear-gradient(270deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 40%,transparent 68%)}
.banslide.dark.center::before{background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.2) 45%,rgba(255,255,255,.5) 100%)}
.banslide.right .ban-text .wrap{display:flex;flex-direction:column;align-items:flex-end}
.banslide.right .ban-text .wrap>*{text-align:right}
.banslide.center .ban-text .wrap{text-align:center}
.banslide.center .ban-text .wrap>*{margin-left:auto;margin-right:auto}
.ban-text h1,.ban-text p,.ban-text .ban-note,.ban-text .ban-price b{color:#fff}
.banslide.dark .ban-text h1,.banslide.dark .ban-text p,.banslide.dark .ban-text .ban-price b{color:var(--ink)}
.ban-label{display:inline-block;background:var(--wine);color:#fff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.ban-text h1{font-size:clamp(30px,4vw,52px);line-height:1.1;margin:0 0 14px;text-shadow:0 1px 18px rgba(0,0,0,.3)}
.banslide.dark .ban-text h1{text-shadow:0 1px 18px rgba(255,255,255,.45)}
.ban-text p{font-size:16px;line-height:1.6;margin:0 0 18px}
.ban-price{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.banslide.right .ban-price{justify-content:flex-end}
.banslide.center .ban-price{justify-content:center}
.ban-price b{font-size:clamp(26px,3vw,38px);color:#FF5A5A!important;font-weight:600}
.banslide.dark .ban-price b{color:var(--wine)!important}
.ban-price s{font-size:16px;color:rgba(255,255,255,.75)}
.banslide.dark .ban-price s{color:var(--ink2)}
.ban-note{font-size:14px;color:#FF8A8A!important;margin-bottom:18px}
.banslide.dark .ban-note{color:var(--wine)!important}
.ban-btn{margin-top:4px}
.bandots{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:9px;z-index:2}
.bandots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.2s}
.bandots button[aria-current="true"]{background:#fff;width:26px;border-radius:999px}
@media(max-width:760px){
  .banslide img{height:clamp(440px,120vw,560px)}
  .ban-text{align-items:flex-end;padding-bottom:34px}
  .ban-text .wrap>*{max-width:none}
  .banslide::before,.banslide.left::before,.banslide.right::before{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.72) 100%)}
  .banslide.dark::before,.banslide.dark.left::before,.banslide.dark.right::before{background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.12) 35%,rgba(255,255,255,.8) 100%)}
  .banslide.right .ban-text .wrap,.banslide.center .ban-text .wrap{display:block;align-items:stretch;text-align:left}
  .banslide.right .ban-text .wrap>*,.banslide.center .ban-text .wrap>*{text-align:left;margin-left:0;margin-right:0}
  .banslide.right .ban-price,.banslide.center .ban-price{justify-content:flex-start}
  .ban-text p{font-size:15px}
  .bandots{bottom:12px}
}


/* ---------- kotak nomor resi di halaman lacak ---------- */
.resibox{margin-top:18px;background:var(--cream2);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:12px}
.resibox .muted{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.resino{font-size:20px;font-weight:600;letter-spacing:.06em;margin-top:4px;word-break:break-all}
.resiact{display:flex;gap:9px;flex-wrap:wrap}
.resihint{font-size:13px;color:var(--ink2);line-height:1.55;margin:0}
@media(min-width:640px){
  .resibox{grid-template-columns:1fr auto;align-items:center}
  .resibox .resihint{grid-column:1/-1}
}

/* ---------- Temukan ukuranmu di halaman depan: pilih produk lalu beli ---------- */
.sizepick{display:grid;gap:14px;align-content:start}
.sp-lab{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--wine);font-weight:500}
.sizepick>select{width:100%}
.sp-prev{display:flex;align-items:center;gap:12px;background:var(--cream2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;text-decoration:none;color:inherit}
.sp-prev img{width:54px;height:66px;object-fit:cover;border-radius:4px;flex:none}
.sp-prev>div{flex:1;min-width:0}
.sp-prev b{display:block;font-size:15px;line-height:1.3;margin-bottom:2px}
.sp-prev span{font-size:14px;color:var(--wine);font-weight:500}
.sp-lihat{font-size:12px;color:var(--ink2);white-space:nowrap;align-self:flex-start}
/* kalkulator yang menyatu di halaman */
.sf-inline .sf{background:transparent;border:0;box-shadow:none;max-width:none;width:auto}
.sf-inline .sf-body{padding:0}
/* kotak beli */
#spBeli{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:12px}
.sp-row{display:grid;gap:7px}
.sp-cap{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.sp-warna,.sp-ukuran{display:flex;gap:7px;flex-wrap:wrap}
.sp-warna button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:6px 12px 6px 7px;font-size:13px;background:#fff}
.sp-warna button i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block}
.sp-ukuran button{min-width:46px;border:1px solid var(--line2);border-radius:4px;padding:8px 10px;font-size:13px;background:#fff}
.sp-warna button.on,.sp-ukuran button.on{border-color:var(--wine);background:var(--wine-soft);color:var(--wine);font-weight:500}
.sp-warna button.habis,.sp-ukuran button.habis{opacity:.55;cursor:not-allowed}
.sp-ukuran button small{display:block;font-size:10px;color:var(--mute);letter-spacing:.04em;line-height:1.3}
.sp-harga{display:flex;align-items:baseline;gap:10px}
.sp-harga b{font-size:21px}
.sp-sisa{font-size:12px;color:var(--warn)}
.sp-habis{font-size:13px;color:var(--bad)}
.sp-aksi{display:flex;gap:8px;flex-wrap:wrap}
.sp-aksi .btn{flex:1;min-width:150px}
.sp-note{font-size:13px;color:var(--ink2);line-height:1.5;margin:0}
@media(max-width:860px){ .sp-aksi .btn{min-width:100%} }

/* anak grid harus boleh menyusut, kalau tidak isinya memaksa halaman melebar di HP */
.sizechart>*{min-width:0}
.sizepick,.sizepick>*{min-width:0;max-width:100%}
.sf-inline .sf,.sf-inline .sf-body,.sf-inline .sf-chart,.sf-inline .sf-row{min-width:0}
.sf-inline .sf-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sf-inline table{min-width:420px}
#spBeli{min-width:0;max-width:100%}
.sp-prev{min-width:0}
/* success */
.center{max-width:620px;margin:60px auto 90px;text-align:center}
.center .mark{width:70px;margin:0 auto 22px}
.center h1{font-size:44px;margin-bottom:12px}
.center p{color:var(--ink2)}
.center .code{font-family:var(--serif);font-size:34px;letter-spacing:.06em;margin:20px 0;color:var(--wine)}

/* ---------- ongkir RajaOngkir di checkout ---------- */
.acbox{border:1px solid var(--line);border-radius:6px;margin-top:6px;max-height:260px;overflow:auto;background:#fff;position:relative;z-index:5}
.acbox[hidden]{display:none}
.acrow{display:block;width:100%;text-align:left;padding:11px 13px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:14px;color:var(--ink);cursor:pointer;line-height:1.35}
.acrow:last-child{border-bottom:0}
.acrow:hover,.acrow:focus{background:var(--cream2)}
div.acrow{cursor:default;color:var(--muted)}
/* .field label dibuat huruf besar semua untuk judul kolom — pilihan kurir
   ikut kena kalau tidak dikembalikan, dan "RP 13.500 · 2-3 HARI" jadi berteriak */
label.kurir{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:6px;margin-bottom:7px;cursor:pointer;background:#fff;
  text-transform:none;letter-spacing:normal;font-size:14px;color:var(--ink);font-weight:400}
label.kurir:hover{border-color:var(--wine)}
label.kurir:has(input:checked){border-color:var(--wine);background:var(--wine-soft)}
label.kurir input{width:17px;height:17px;flex:none;accent-color:var(--wine);cursor:pointer}
label.kurir .kn{flex:1;font-size:14px;line-height:1.3}
label.kurir .kh{font-weight:500;white-space:nowrap}
button.ganti{display:block;width:100%;margin-top:2px;padding:9px 13px;border:1px dashed var(--line);border-radius:6px;background:none;
  font:inherit;font-size:13px;text-transform:none;letter-spacing:normal;color:var(--wine);cursor:pointer;text-align:center}
button.ganti:hover{border-color:var(--wine);background:var(--wine-soft)}
/* display:block di atas mengalahkan atribut hidden — tanpa baris ini tombol
   kosong tetap tampil sebagai kotak garis putus sebelum kurir dipilih */
button.ganti[hidden]{display:none}
label.kurir.sembunyi{display:none}
.summary .row b.gratis{color:var(--ok);font-weight:500}
.summary .row s{margin-right:7px;font-size:13.5px}
/* baris "Kamu hemat" — display:flex di .summary .row mengalahkan atribut hidden,
   jadi perlu aturan sendiri, seperti kasus tombol Ganti kurir */
.summary .row.hemat{color:var(--ok);font-weight:500;padding-top:2px;font-size:14.5px}
.summary .row.hemat[hidden]{display:none}
.summary .item b s{display:inline-block;font-weight:400;font-size:13px}
/* Di HP, ringkasan ada jauh di atas — saat sampai tombol bayar pembeli tidak
   lagi melihat totalnya. Di layar lebar ringkasan menempel di sebelah, jadi
   salinan ini justru mengulang tanpa guna. */
.bayar-ringkas{display:none}
@media (max-width:900px){
  .bayar-ringkas{display:block;border-top:1px solid var(--line2);margin-top:18px;padding-top:12px}
  .bayar-ringkas .row{display:flex;justify-content:space-between;padding:3px 0;font-size:17px;font-weight:500}
  .bayar-ringkas .row+.row.kecil{padding-top:0}
  .bayar-ringkas .row:not(.kecil):not(.hemat){border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
  .bayar-ringkas .row.hemat{color:var(--ok);font-size:14px;font-weight:500}
  .bayar-ringkas .row.hemat[hidden]{display:none}
}
.bayar-ringkas .row.kecil{font-size:15px;font-weight:400;color:var(--ink2);padding-bottom:6px}
.bayar-ringkas .row b.gratis{color:var(--ok);font-weight:500}
.bayar-ringkas .row.kecil s{margin-right:6px;font-size:13px}

/* ---------- poin & voucher di checkout ---------- */
label.poinbox{display:flex;align-items:flex-start;gap:11px;padding:13px;border:1px solid var(--ok);border-radius:6px;
  background:#F1F7F3;margin-top:16px;cursor:pointer;text-transform:none;letter-spacing:normal;font-size:14px;color:var(--ink);font-weight:400}
label.poinbox input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--ok);cursor:pointer}
label.poinbox b{font-weight:500}
label.poinbox .muted{font-size:13px;line-height:1.45}
#kotakPoin[hidden],#kotakVoucher[hidden]{display:none}
.vrow{display:flex;gap:8px}
.vrow input{flex:1;min-width:0}
.vrow .btn{flex:none;white-space:nowrap}
.summary .row#barisPoin,.summary .row#barisVoucher,
.bayar-ringkas .row#barisPoin2,.bayar-ringkas .row#barisVoucher2{color:var(--ok)}
.summary .row[hidden],.bayar-ringkas .row[hidden]{display:none}

/* ---- kartu saldo poin di halaman Lacak ---- */
.poinkartu{background:var(--wine-soft);border:1px solid var(--line);border-left:3px solid var(--wine);border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-top:24px}
.poinsaldo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.poinsaldo span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
/* Nominalnya pakai huruf sans, bukan serif: Cormorant itu cantik untuk judul,
   tapi goresannya tipis — angka rupiah jadi susah dibaca sekilas, apalagi maroon
   di atas merah muda. Warnanya juga dituakan supaya bedanya dengan latar lebih
   tegas. */
.poinsaldo b{font-family:var(--sans);font-size:34px;font-weight:500;color:var(--wine2);
  line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.poinkartu p{margin:6px 0 0;font-size:14px}
/* potongan di rincian pesanan — warna yang sama dengan "Kamu hemat" di checkout */
.order-card .summary .hemat{color:var(--ok);font-weight:500}