/* =========================================================
   TikTas Store — Etalase premium (editorial, adidas-inspired)
   ========================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Warna — palet hangat kulit, 1 aksen (cognac) */
  --bg:        #FAF8F4;   /* dasar off-white hangat */
  --surface:   #FFFFFF;   /* kartu */
  --ink:       #1A1712;   /* teks utama near-black */
  --ink-2:     #5C5548;   /* teks sekunder */
  --ink-3:     #8A8172;   /* teks tersier / caption */
  --line:      #E6E0D5;   /* garis / border */
  --accent:    #A85D33;   /* aksen cognac (link, highlight, hover) */
  --accent-deep:#8A4A26;  /* aksen gelap (hover tombol) */
  --ok:        #2E7D5B;

  /* Tipografi — 2 family: Archivo (display) + Inter (body) */
  /* Font dimuat dari server sendiri (assets/fonts/fonts.css) — tidak lagi dari
     Google Fonts, supaya tampilan tidak bergeser saat internet pembeli lambat.
     Font pengganti dipilih yang lebarnya mirip agar pergeseran tata letak minim. */
  --f-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* Skala 1.25 dari 16px */
  --fs-xs:  0.80rem;   /* 12.8 */
  --fs-sm:  0.875rem;  /* 14 */
  --fs-base:1rem;      /* 16 */
  --fs-md:  1.25rem;   /* 20 */
  --fs-lg:  1.563rem;  /* 25 */
  --fs-xl:  1.953rem;  /* 31 */
  --fs-2xl: 2.441rem;  /* 39 */
  --fs-3xl: 3.052rem;  /* 49 */
  --fs-4xl: 3.815rem;  /* 61 */

  /* Spacing — kelipatan 8 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;

  /* Bentuk & bayangan */
  --r:0px;              /* sudut tegas (adidas) */
  --wrap:1200px;
  --shadow: 0 1px 3px rgba(26,23,18,.05), 0 10px 30px rgba(26,23,18,.07);
  --ease: 200ms ease;
}

/* ---------- 2. RESET / DASAR ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:72px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.hidden{display:none !important}
/* Kunci gulir dipasang lewat kelas (bukan style langsung) supaya satu sumber
   kebenaran: lihat updateScrollLock() di shop.js */
body.no-scroll{overflow:hidden}
/* Jejak fokus keyboard yang jelas — sebelumnya mengandalkan bawaan browser
   yang sering tidak terlihat di atas latar gelap. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s3)}
::selection{background:var(--accent); color:#fff}

/* ---------- 3. TIPOGRAFI SISTEM ---------- */
.eyebrow{
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  display:inline-block;
}
.eyebrow-light{color:#E9C9AE}
.sec-title{
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-2xl);
  line-height:1.05; letter-spacing:-.02em; text-transform:uppercase;
  margin:var(--s1) 0 0;
}
.sec-head{margin-bottom:var(--s5)}
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); flex-wrap:wrap}

/* ---------- 4. TOMBOL ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.06em; text-transform:uppercase;
  padding:14px 28px; border:1.5px solid transparent; border-radius:var(--r);
  transition:background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink); color:#FAF8F4}
.btn-primary:hover{background:var(--accent-deep)}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn-ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--line);
  font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase; padding:12px 20px; cursor:pointer;
  border-radius:var(--r); transition:border-color var(--ease), background var(--ease);
}
.btn-ghost:hover{border-color:var(--ink)}

/* ---------- 5. ANNOUNCE BAR ---------- */
.announce{background:var(--ink); color:#EFE9DF}
.announce-in{
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:9px var(--s3); font-size:var(--fs-xs); letter-spacing:.04em; flex-wrap:wrap;
}
.announce .dot{width:4px; height:4px; border-radius:50%; background:var(--accent)}

/* ---------- 6. HEADER ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(250,248,244,.86);
  backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);
}
.tb-inner{display:flex; align-items:center; gap:var(--s4); height:64px}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-weight:800; font-size:var(--fs-md);
  letter-spacing:-.01em; text-transform:uppercase; color:var(--ink);
}
.brand-mark{color:var(--accent)}
.mainnav{display:flex; gap:var(--s4); margin-left:var(--s3)}
.mainnav a{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2);
  padding:4px 0; position:relative; transition:color var(--ease);
}
.mainnav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--accent); transition:width var(--ease);
}
.mainnav a:hover{color:var(--ink)}
.mainnav a:hover::after{width:100%}
.cart-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--ink); color:#FAF8F4; border:none; border-radius:var(--r);
  padding:10px 16px; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; transition:background var(--ease);
}
.cart-btn:hover{background:var(--accent-deep)}
.cart-count{
  background:var(--accent); color:#fff; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; font-size:var(--fs-xs); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---------- 7. HERO ---------- */
.hero{position:relative; min-height:clamp(460px, 72vh, 720px); display:flex; align-items:center; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,16,12,.72) 0%, rgba(20,16,12,.42) 42%, rgba(20,16,12,.05) 78%);
}
.hero-in{position:relative; width:100%}
.hero-copy{max-width:560px; color:#fff; padding:var(--s5) 0}
.hero-h1{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.6rem, 6.5vw, var(--fs-4xl)); line-height:.98; letter-spacing:-.02em;
  margin:var(--s2) 0 var(--s3);
}
.hero-p{font-size:var(--fs-md); color:#F0E9E0; max-width:44ch; margin:0 0 var(--s4)}
.hero-cta{display:flex; gap:var(--s2); flex-wrap:wrap}

/* ---------- 8. TRUST STRIP ---------- */
.trust{background:var(--surface); border-bottom:1px solid var(--line)}
.trust-in{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3);
  padding:var(--s4) var(--s3);
}
.trust-item{display:flex; align-items:center; gap:12px; color:var(--ink)}
.trust-item svg{color:var(--accent); flex-shrink:0}
.trust-item b{display:block; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.02em}
.trust-item span{display:block; font-size:var(--fs-xs); color:var(--ink-3)}

/* ---------- 9. SECTION UMUM ---------- */
.section{padding:var(--s7) 0}

/* ---------- 10. LOOKBOOK ---------- */
.look-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2)}
.look{position:relative; overflow:hidden; aspect-ratio:3/4; display:block}
.look img{width:100%; height:100%; object-fit:cover; transition:transform 500ms ease}
.look::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,16,12,0) 45%, rgba(20,16,12,.72) 100%);}
.look:hover img{transform:scale(1.05)}
.look-cap{position:absolute; left:var(--s3); right:var(--s3); bottom:var(--s3); z-index:2; color:#fff}
.look-lbl{display:block; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.look-go{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:#EAD9CB; margin-top:2px}
.look-go::after{content:"→"; transition:transform var(--ease)}
.look:hover .look-go::after{transform:translateX(4px)}

/* ---------- 11. EDITORIAL BANNER ---------- */
.editorial{position:relative; min-height:clamp(380px,52vh,540px); display:flex; align-items:center; overflow:hidden}
.ed-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 25%}
.ed-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,16,12,.7) 0%, rgba(20,16,12,.35) 55%, rgba(20,16,12,.05) 100%)}
.ed-in{position:relative; width:100%}
.ed-copy{max-width:520px; color:#fff; padding:var(--s5) 0}
.ed-h2{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(2.2rem,5vw,var(--fs-3xl)); line-height:1; letter-spacing:-.02em; margin:var(--s2) 0 var(--s3)}
.ed-p{font-size:var(--fs-md); color:#F0E9E0; max-width:42ch; margin:0 0 var(--s4)}

/* ---------- 12. TOOLS: SEARCH + CHIPS ---------- */
.search{display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r); padding:11px 16px; min-width:280px;
  transition:border-color var(--ease); color:var(--ink-3)}
.search:focus-within{border-color:var(--ink)}
.search input{border:none; outline:none; background:transparent; font-size:var(--fs-sm); color:var(--ink); width:100%; font-family:var(--f-body)}
.chips{margin-bottom:var(--s4)}
.chips-utama{display:flex; gap:10px; flex-wrap:wrap}
/* Baris kedua: sub-kategori dari induk yang sedang dipilih */
.chips-sub{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; padding-top:12px;
  border-top:1px solid var(--line)}
.chip-sub{font-size:var(--fs-xs); padding:6px 14px; border-style:dashed}
.chip-sub.active{border-style:solid}
/* Angka kecil penanda jumlah sub-kategori */
.chip-n{display:inline-block; margin-left:7px; font-size:10px; line-height:16px; min-width:16px;
  padding:0 4px; border-radius:999px; background:var(--line); color:var(--ink-2); text-align:center}
.chip.active .chip-n{background:rgba(255,255,255,.28); color:#FAF8F4}
.chip{
  font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm);
  letter-spacing:.02em; text-transform:uppercase;
  background:transparent; color:var(--ink-2); border:1.5px solid var(--line);
  padding:8px 18px; border-radius:var(--r); cursor:pointer;
  transition:all var(--ease);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.active{background:var(--ink); color:#FAF8F4; border-color:var(--ink)}

/* ---------- 13. GRID PRODUK ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.loading{grid-column:1/-1; text-align:center; color:var(--ink-3); padding:var(--s6) 0; font-size:var(--fs-sm)}
/* Tombol "Muat lebih banyak" — melintang penuh di bawah kartu produk */
.grid-more{grid-column:1/-1; display:flex; justify-content:center; padding-top:var(--s2)}
.grid-more .btn{border:1.5px solid var(--line); background:transparent; color:var(--ink)}
.grid-more .btn:hover{border-color:var(--ink)}
.pcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease)}
.pcard:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.pthumb{aspect-ratio:1/1; background:#F1ECE3; overflow:hidden; position:relative}
.pthumb img{width:100%; height:100%; object-fit:cover; transition:transform 450ms ease}
.pcard:hover .pthumb img{transform:scale(1.05)}
.pthumb .ph{width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 12px,#EBE5DA 12px,#EBE5DA 24px)}
.pthumb .ph::after{content:"TikTas"; font-family:var(--f-display); font-weight:800; letter-spacing:.1em; color:#CBBFAD; text-transform:uppercase; font-size:var(--fs-sm)}
.pbody{padding:var(--s2) var(--s2) var(--s3); display:flex; flex-direction:column; gap:6px; flex:1}
.pcat{font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.pname{font-family:var(--f-display); font-weight:700; font-size:var(--fs-base); line-height:1.25; color:var(--ink)}
.pprice{display:flex; align-items:baseline; gap:8px; margin-top:2px}
.pprice .now{font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); color:var(--ink)}
.pprice .was{font-size:var(--fs-sm); color:var(--ink-3); text-decoration:line-through}
.pstok{font-size:var(--fs-xs); color:var(--ink-3)}
.pstok.low{color:var(--accent); font-weight:600}
.badge-habis{font-size:var(--fs-xs); color:#B23B2E; font-weight:600; text-transform:uppercase; letter-spacing:.04em}
.pcard.habis{opacity:.62}
.addbtn{
  margin-top:auto; font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
  background:var(--ink); color:#FAF8F4; border:none; border-radius:var(--r);
  padding:12px 14px; transition:background var(--ease);
}
.addbtn:hover:not(:disabled){background:var(--accent-deep)}
.addbtn:disabled{background:#D9D2C6; color:#fff; cursor:not-allowed}

/* ---------- 14. CARA BELANJA ---------- */
.howto{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
.step{padding:var(--s3); border-left:2px solid var(--line)}
.step-no{font-family:var(--f-display); font-weight:800; font-size:var(--fs-xl); color:var(--accent); display:block; line-height:1}
.step b{display:block; font-family:var(--f-display); font-weight:700; font-size:var(--fs-md); text-transform:uppercase; letter-spacing:-.01em; margin:var(--s2) 0 4px}
.step p{margin:0; font-size:var(--fs-sm); color:var(--ink-2)}

/* ---------- 15. FOOTER ---------- */
.foot{background:var(--ink); color:#CFC7B9; padding:var(--s6) 0 var(--s4)}
.foot-in{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-bottom:var(--s4); border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{max-width:420px}
.brand-foot{color:#fff; margin-bottom:var(--s2)}
.brand-foot .brand-mark{color:var(--accent)}
.foot-brand p{margin:0; font-size:var(--fs-sm); color:#A79E8F; line-height:1.6}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{font-family:var(--f-display); font-weight:600; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.03em; color:#CFC7B9; transition:color var(--ease)}
.foot-links a:hover{color:#fff}
.foot-copy{padding-top:var(--s3); font-size:var(--fs-xs); color:#877E70}

/* ---------- 16. DRAWER KERANJANG ---------- */
.overlay{position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:84; backdrop-filter:blur(2px)}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bg);
  z-index:85; display:flex; flex-direction:column; box-shadow:-16px 0 40px rgba(20,16,12,.18)}
.drawer-hd{display:flex; align-items:center; justify-content:space-between; padding:var(--s3); border-bottom:1px solid var(--line)}
.drawer-hd h2{margin:0; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.x{border:none; background:transparent; font-size:var(--fs-md); cursor:pointer; color:var(--ink-2); width:36px; height:36px}
.x:hover{color:var(--ink)}
.drawer-body{flex:1; overflow:auto; padding:var(--s3)}
.cart-empty{text-align:center; color:var(--ink-3); padding:var(--s6) var(--s2); font-size:var(--fs-sm)}
.citem{display:flex; gap:12px; padding:var(--s2) 0; border-bottom:1px solid var(--line)}
.ci-thumb{width:64px; height:64px; flex-shrink:0; background:#F1ECE3; overflow:hidden}
.ci-thumb img{width:100%; height:100%; object-fit:cover}
.ci-thumb .ph{width:100%; height:100%; background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 8px,#EBE5DA 8px,#EBE5DA 16px)}
.ci-main{flex:1; min-width:0}
.ci-nm{font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); color:var(--ink)}
.ci-var-tag{display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-xs); background:#EFE7DA; color:var(--accent-deep); padding:1px 8px; border-radius:999px; margin-left:4px}
.ci-pr{font-size:var(--fs-xs); color:var(--ink-2); margin:3px 0 8px}
.ci-qty{display:flex; align-items:center; gap:8px}
.qbtn{width:28px; height:28px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font-size:var(--fs-base); color:var(--ink); border-radius:var(--r)}
.qbtn:hover{border-color:var(--ink)}
.qbtn:disabled{opacity:.4; cursor:not-allowed}
.qbtn:disabled:hover{border-color:var(--line)}
.ci-max{font-size:var(--fs-xs); color:var(--ink-3); margin-top:6px}
.ci-del{margin-left:auto; border:none; background:transparent; color:var(--ink-3); font-size:var(--fs-xs); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.ci-del:hover{color:#B23B2E}
.drawer-foot{padding:var(--s3); border-top:1px solid var(--line)}
.cf-total{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s2); font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); text-transform:uppercase}
.drawer-foot .btn-primary{width:100%; justify-content:center}

/* ---------- 17. MODAL ---------- */
.modal-bg{position:fixed; inset:0; background:rgba(20,16,12,.5); z-index:90; display:flex; align-items:center; justify-content:center; padding:var(--s2); backdrop-filter:blur(2px)}
.modal{background:var(--bg); width:460px; max-width:100%; max-height:92vh; overflow:auto; padding:var(--s4); border-radius:var(--r)}
.modal h2{margin:0 0 6px; font-family:var(--f-display); font-weight:800; font-size:var(--fs-lg); text-transform:uppercase; letter-spacing:-.01em}
.msub{font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:var(--s3)}
/* Ringkasan pesanan di dialog checkout — varian yang sudah dipilih ikut tampil */
.co-ringkas{border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:var(--s3); background:var(--bg)}
.co-line{display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-xs); color:var(--ink-2); padding:3px 0}
.co-line span:last-child{white-space:nowrap}
.co-var{display:inline-block; font-weight:600; background:#EFE7DA; color:var(--accent-deep); padding:0 7px; border-radius:999px; font-size:11px}
.co-total{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; font-family:var(--f-display); font-weight:800; font-size:var(--fs-sm); color:var(--ink); text-transform:uppercase}
.f-note{font-size:11.5px; color:var(--ink-3); margin-top:5px; line-height:1.45}
.f{margin-bottom:var(--s2)}
.f label{display:block; font-family:var(--f-display); font-weight:600; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin-bottom:6px}
.f input, .f textarea{width:100%; border:1.5px solid var(--line); border-radius:var(--r); padding:11px 14px; font-size:var(--fs-sm); font-family:var(--f-body); color:var(--ink); background:var(--surface); outline:none; transition:border-color var(--ease)}
.f input:focus, .f textarea:focus{border-color:var(--ink)}
.f textarea{min-height:72px; resize:vertical}
.err-line{color:#B23B2E; font-size:var(--fs-sm); margin:var(--s1) 0}
.modal-actions{display:flex; gap:10px; margin-top:var(--s3)}
.modal-actions .btn-primary{justify-content:center}

/* Variant picker */
.vpick-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin:var(--s2) 0}
.vpick{display:flex; flex-direction:column; gap:2px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; border-radius:var(--r); transition:border-color var(--ease)}
.vpick b{font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase}
.vpick span{font-size:var(--fs-xs); color:var(--ink-3)}
.vpick:hover:not(:disabled){border-color:var(--ink)}
.vpick.habis{opacity:.5; cursor:not-allowed}

/* Sukses / invoice */
.ok-box{text-align:center; margin-bottom:var(--s3)}
.ok-ic{width:56px; height:56px; margin:0 auto var(--s2); border-radius:50%; background:#E7F1EA; color:var(--ok); display:flex; align-items:center; justify-content:center}
.inv-line{display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm)}
.total-big{font-family:var(--f-display); font-weight:800; font-size:var(--fs-md); color:var(--ink)}
.bank-box{background:var(--surface); border:1px solid var(--line); padding:var(--s2); margin:var(--s3) 0; border-radius:var(--r)}
.bank-box .lbl{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3)}
.bank-box .val{font-family:var(--f-display); font-weight:700; font-size:var(--fs-base); color:var(--ink); margin-top:2px}
/* Rekening kedua dan seterusnya diberi garis pemisah supaya tidak terbaca menyambung. */
.bank-box .val + .val{margin-top:8px; padding-top:8px; border-top:1px solid var(--line)}
.wa-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:var(--s2);
  background:#1FA855; color:#fff; padding:14px; border-radius:var(--r); font-family:var(--f-display); font-weight:700; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.04em; transition:background var(--ease)}
.wa-btn:hover{background:#178A45}

/* ---------- 18. TOAST ---------- */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100;
  background:var(--ink); color:#FAF8F4; padding:12px 22px; border-radius:var(--r); font-size:var(--fs-sm); font-weight:500;
  box-shadow:var(--shadow); animation:toastin 200ms ease}
.toast.err{background:#B23B2E}
@keyframes toastin{from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}}


/* ---------- Footer kontak & sosial (Info Toko) ---------- */
.foot-in{align-items:flex-start}
.foot-col{min-width:160px}
.foot-h{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:#EAE3D6;margin:0 0 var(--s2)}
.foot-contact{display:flex;flex-direction:column;gap:10px}
.fc-row{display:flex;align-items:flex-start;gap:9px;color:#CFC7B9;font-size:var(--fs-sm);line-height:1.4}
a.fc-row:hover{color:#fff}
.fc-row svg{flex-shrink:0;margin-top:2px;color:var(--accent)}
.foot-social{display:flex;gap:10px;margin-top:var(--s3)}
.foot-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#CFC7B9;transition:all var(--ease)}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.foot-social:empty{display:none}
/* Pilihan WA saat sukses checkout */
.wa-choice-lbl{font-size:var(--fs-sm);color:var(--ink-2);margin:var(--s2) 0 8px;font-weight:600}
.wa-btn+.wa-btn{margin-top:8px}


/* ---------- Halaman Detail Produk (B1) ---------- */
.detail-view{position:fixed;inset:0;z-index:75;background:var(--bg);overflow-y:auto;overscroll-behavior:contain}
.detail-bar{position:sticky;top:0;z-index:2;background:rgba(250,248,244,.9);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.detail-bar-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.d-back{display:inline-flex;align-items:center;gap:7px;background:transparent;border:none;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.d-back:hover{color:var(--accent)}
.detail-main{padding:var(--s5) var(--s3) var(--s7)}
.detail-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s5);align-items:start}
.d-gallery{position:sticky;top:84px}
.d-main{aspect-ratio:1/1;background:#F1ECE3;overflow:hidden;border:1px solid var(--line)}
.d-main img{width:100%;height:100%;object-fit:cover}
.d-main .ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 14px,#EBE5DA 14px,#EBE5DA 28px)}
.d-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.d-thumb{width:72px;height:72px;padding:0;border:1.5px solid var(--line);background:#F1ECE3;cursor:pointer;overflow:hidden;transition:border-color var(--ease)}
.d-thumb img{width:100%;height:100%;object-fit:cover}
.d-thumb.active{border-color:var(--ink)}
.d-info{padding-top:var(--s1)}
.d-cat{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.d-name{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,var(--fs-2xl));line-height:1.05;letter-spacing:-.02em;margin:var(--s2) 0 var(--s3)}
.d-price{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--s2)}
.d-now{font-family:var(--f-display);font-weight:800;font-size:var(--fs-xl);color:var(--ink)}
.d-was{font-size:var(--fs-md);color:var(--ink-3);text-decoration:line-through}
.d-stok{display:inline-block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s3)}
.d-stok.low{color:var(--accent);font-weight:600}
.d-stok.habis{color:#B23B2E;font-weight:600}
.d-var{margin:var(--s3) 0}
.d-var-lbl{font-family:var(--f-display);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:10px}
.d-chips{display:flex;flex-wrap:wrap;gap:10px}
.d-chip{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px;min-width:78px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color var(--ease)}
.d-chip img,.d-chip-noimg{width:52px;height:52px;object-fit:cover;background:#EFE7DA;display:block}
.d-chip-nm{font-family:var(--f-display);font-weight:700;font-size:var(--fs-sm);text-transform:uppercase}
.d-chip small{font-size:var(--fs-xs);color:var(--ink-3)}
.d-chip:hover:not(:disabled){border-color:var(--ink)}
.d-chip.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.d-chip.habis{opacity:.45;cursor:not-allowed}
.d-add{width:100%;justify-content:center;margin-top:var(--s3)}
.d-add:disabled{background:#D9D2C6;color:#fff;cursor:not-allowed}
.d-note{font-size:var(--fs-xs);color:var(--ink-3);margin-top:12px}
/* Keterangan produk (diisi admin) di halaman detail */
.d-desk{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.d-desk-hd{font-family:var(--f-display); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-2); margin-bottom:8px}
.d-desk p{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7; margin:0 0 7px}
.d-desk p:last-child{margin-bottom:0}
@media (max-width:760px){
  .detail-grid{grid-template-columns:1fr;gap:var(--s4)}
  .d-gallery{position:static}
}


/* ---------- Artikel / Blog (B4) ---------- */
.artikel-home{background:var(--surface);border-top:1px solid var(--line)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.art-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:box-shadow var(--ease),transform var(--ease)}
.art-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.art-thumb{aspect-ratio:16/10;background:#F1ECE3;overflow:hidden}
.art-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 450ms ease}
.art-thumb .ph{width:100%;height:100%;background:repeating-linear-gradient(45deg,#F1ECE3,#F1ECE3 12px,#EBE5DA 12px,#EBE5DA 24px)}
.art-card:hover .art-thumb img{transform:scale(1.04)}
.art-body{padding:var(--s3);display:flex;flex-direction:column;gap:8px;flex:1}
.art-cat{align-self:flex-start;font-family:var(--f-display);font-weight:700;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.art-title{font-family:var(--f-display);font-weight:700;font-size:var(--fs-md);line-height:1.2;color:var(--ink);margin:0}
.art-ringkas{font-size:var(--fs-sm);color:var(--ink-2);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-date{font-size:var(--fs-xs);color:var(--ink-3);margin-top:auto}
/* Blog overlay */
.blog-view,.blog-main{}
.blog-main{padding:var(--s5) var(--s3) var(--s7)}
.page-hd-blog{margin-bottom:var(--s4)}
.blog-h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4vw,var(--fs-3xl));letter-spacing:-.02em;line-height:1.05;margin:var(--s1) 0 0}
.blog-layout{display:grid;grid-template-columns:1fr 240px;gap:var(--s5);align-items:start}
.blog-grid{grid-template-columns:repeat(2,1fr)}
.blog-cats{border:1px solid var(--line);padding:var(--s3);position:sticky;top:84px}
.blog-cats-hd{font-family:var(--f-display);font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:12px}
.blog-cat{display:flex;justify-content:space-between;gap:8px;padding:8px 0;font-size:var(--fs-sm);color:var(--ink-2);border-bottom:1px solid var(--line)}
.blog-cat:last-child{border-bottom:0}
.blog-cat span{color:var(--ink-3)}
.blog-cat:hover,.blog-cat.active{color:var(--accent);font-weight:600}
.blog-empty{padding:var(--s6) 0;color:var(--ink-3);font-size:var(--fs-sm)}
/* Halaman artikel tunggal */
.article{max-width:760px;margin:0 auto}
.article-title{font-family:var(--f-display);font-weight:900;text-transform:none;font-size:clamp(1.9rem,3.6vw,var(--fs-3xl));line-height:1.1;letter-spacing:-.02em;margin:var(--s2) 0}
.article-meta{font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:var(--s3)}
.article-hero{margin:var(--s3) 0;border:1px solid var(--line);overflow:hidden}
.article-hero img{width:100%;display:block}
.article-body{font-size:1.05rem;line-height:1.8;color:var(--ink)}
.article-body h2{font-family:var(--f-display);font-weight:800;font-size:var(--fs-lg);margin:var(--s4) 0 var(--s2);letter-spacing:-.01em}
.article-body p{margin:0 0 var(--s3)}
.article-body ul,.article-body ol{margin:0 0 var(--s3) 22px}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.article-body img{max-width:100%;height:auto;margin:var(--s2) 0}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.art-tag{font-size:var(--fs-xs);background:#EFE7DA;color:var(--accent-deep);padding:4px 10px;border-radius:999px}
.article-foot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}
@media (max-width:820px){
  .art-grid{grid-template-columns:1fr 1fr}
  .blog-layout{grid-template-columns:1fr}
  .blog-cats{position:static}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){ .art-grid,.blog-grid{grid-template-columns:1fr} }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .section{padding:var(--s6) 0}
  .mainnav{display:none}
  .trust-in{grid-template-columns:repeat(2,1fr); gap:var(--s2) var(--s3)}
  .look-grid{grid-template-columns:1fr 1fr}
  .look:last-child{grid-column:1/-1; aspect-ratio:16/9}
  .steps{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sec-title{font-size:var(--fs-xl)}
}
@media (max-width:560px){
  .wrap{padding:0 var(--s2)}
  .announce-in span:nth-child(5),.announce-in .dot:nth-child(4){display:none}
  .hero-copy{padding:var(--s4) 0}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{justify-content:center}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr; gap:var(--s2)}
  .search{min-width:0; width:100%}
  .sec-head-row{flex-direction:column; align-items:stretch}
}