/* ==========================================================================
   Lesley Guitar — Stylesheet v2
   Butuh css/theme.css (token) dimuat LEBIH DULU.
   Versi lama disimpan di css/style-v1-backup.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  background: var(--cream-100);
  color: var(--text-on-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
/* height:auto wajib — atribut width/height di HTML (dipasang untuk mencegah
   layout bergeser saat loading) akan mengalahkan aspect-ratio tanpa ini. */
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--copper-600); outline-offset: 3px; border-radius: var(--radius-xs); }
.band-ink :focus-visible, .site-header :focus-visible, .hero-intro :focus-visible, .hero-banner :focus-visible { outline-color: var(--copper-400); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-4); }
.tabular { font-variant-numeric: tabular-nums; }


.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-overlay);
  background: var(--copper-600); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: var(--sp-3); }

/* ---- Band ---------------------------------------------------------------- */
.band { padding: var(--band-py-mobile) 0; }
.band-ink { background: var(--ink-800); color: var(--text-on-ink); }
.band-cream { background: var(--cream-200); }
.band-white { background: var(--cream-100); }
.band-tight { padding: var(--sp-6) 0; }
@media (min-width: 768px) { .band { padding: var(--band-py-desktop) 0; } }

/* ---- Announcement -------------------------------------------------------- */
.announce {
  background: var(--copper-600); color: #fff; text-align: center;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; padding: var(--sp-2) var(--sp-4);
}

/* ---- Header -------------------------------------------------------------- */
.site-header {
  background: var(--ink-800); color: var(--text-on-ink);
  border-bottom: 1px solid var(--ink-600);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.header-top {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  max-width: var(--container); margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.logo img { height: 36px; width: auto; }
.logo span {
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--copper-400); display: block;
}
.search-form {
  flex: 1; min-width: 0; display: flex;
  background: var(--ink-700); border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm); overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.search-form:focus-within { border-color: var(--copper-500); }
.search-form input {
  flex: 1; min-width: 0; border: none; background: transparent;
  color: var(--text-on-ink); padding: 11px var(--sp-3);
  font-size: var(--fs-md); outline: none;
}
.search-form input::placeholder { color: var(--text-on-ink-muted); }
.search-form button {
  background: var(--copper-600); border: none; color: #fff;
  padding: 0 var(--sp-4); cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out);
}
.search-form button:hover { background: var(--copper-700); }
.header-actions { display: flex; align-items: center; gap: var(--sp-5); white-space: nowrap; }
.header-actions a {
  color: var(--text-on-ink); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.header-actions a:hover { color: var(--copper-400); border-bottom-color: var(--copper-500); }
.header-actions svg { flex-shrink: 0; }
.cart-count {
  background: var(--copper-600); color: #fff; border-radius: var(--radius-full);
  font-size: var(--fs-2xs); font-weight: 700; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; font-variant-numeric: tabular-nums;
}

/* ---- Hero: banner slider full-bleed, meniru lesleyguitars.com --------------
   Situs asli pakai Revolution Slider: 2 banner 1366x700 penuh lebar, teks &
   CTA "Shop Now" dicetak langsung ke gambar (jadi TIDAK bisa diklik di sana —
   itu cacat UX di situs asli). CTA yang benar-benar bisa diklik tetap kita
   taruh di section di bawahnya (lihat .hero-intro), bukan didiamkan seperti
   aslinya.
   Transisi awalnya flip 3D (perspective + rotateY), tapi perspective pada
   elemen selebar ini memicu bug render nyata di sejumlah browser/perangkat —
   gambar terpotong di satu sisi (bukan cuma masalah alat preview, terverifikasi
   hilang begitu perspective dimatikan). Diganti crossfade opacity: efek
   pergantian banner tetap terasa halus, tanpa risiko itu. */
/* max-height dulu 78vh — di monitor desktop lebar (mis. 1920px) itu memotong
   tinggi banner di BAWAH tinggi hasil aspect-ratio, jadi object-fit:cover
   kepaksa crop sisi kiri/kanan gambar (termasuk teks "Lesley Guitar"). Dicabut
   supaya aspect-ratio 1366:700 selalu dipatuhi utuh, gambar tidak pernah
   dipotong. 100vh cuma jaring pengaman kalau ada window sangat pendek. */
.hero-banner {
  position: relative; width: 100%; overflow: hidden;
  aspect-ratio: 1366 / 700; max-height: 100vh;
  background: var(--ink-900);
}
.hero-banner-inner { position: relative; width: 100%; height: 100%; }
.hero-banner-face {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-banner-face img { width: 100%; height: 100%; object-fit: cover; }
.hero-banner-face.is-front { opacity: 1; z-index: 1; }
.hero-banner-inner.is-flipped .hero-banner-face.is-front { opacity: 0; z-index: 0; }
.hero-banner-inner.is-flipped .hero-banner-face.is-back { opacity: 1; z-index: 1; }

.hero-banner-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; z-index: var(--z-raised);
  background: rgba(20, 16, 14, 0.55); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out);
}
.hero-banner-nav:hover { background: rgba(20, 16, 14, 0.85); }
.hero-banner-nav.prev { left: var(--sp-3); }
.hero-banner-nav.next { right: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  .hero-banner-face { transition: none; }
}

/* ---- Hero intro: judul + CTA hidup di bawah banner (di situs asli ini juga
   section terpisah, bukan bagian dari slider) --------------------------- */
.hero-intro {
  background: var(--ink-800); color: var(--text-on-ink);
  padding: var(--sp-7) 0; text-align: center;
}
.hero-intro h1 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-4);
}
.hero-intro p {
  font-size: var(--fs-md); color: var(--text-on-ink-muted);
  max-width: 56ch; margin: 0 auto var(--sp-5);
}
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* ---- Pill kategori — desain diambil dari lesleyguitars.com asli:
   kapsul putih, badge ikon bulat warna tembaga, shadow lembut. Ukuran &
   warna diukur langsung dari situs asli (radius 999px, shadow 0 2px 12px). */
.hero-pills {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
  max-width: 720px; margin: var(--sp-6) auto 0;
}
.hero-pill {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--cream-50); color: #555555;
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  font-weight: 700; font-size: var(--fs-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hero-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24); }
.hero-pill:active { transform: translateY(0) scale(0.98); }
.hero-pill-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--copper-600); color: #fff;
}
@media (min-width: 640px) {
  .hero-pills { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .hero-pills { grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); max-width: none; }
  .hero-pill { font-size: var(--fs-xs); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); }
  .hero-pill-icon { width: 32px; height: 32px; }
}
@media (min-width: 820px) {
  .hero-intro { padding: var(--sp-8) 0; }
  .hero-intro h1 { font-size: var(--fs-4xl); }
}

/* ---- Why Choose: diambil dari situs asli ----------------------------------
   Struktur asli itu DUA band penuh-lebar bertumpuk, bukan satu baris kiri/
   kanan: (1) band tembaga berisi teks + foto profil BERDAMPINGAN, (2) band
   terang berisi "Our Product" + grid 4 fitur. Foto aslinya persegi 400x400
   utuh (radius 0), bukan avatar bulat kecil — ukurannya diukur langsung dari
   situs asli, bukan ditebak. */
.why-choose-intro { position: relative; background: var(--copper-600); color: #fff; padding: var(--sp-7) 0; }
.why-choose-intro-inner { display: grid; gap: var(--sp-6); align-items: center; }
.why-choose-text h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  margin: 0 0 var(--sp-3);
}
.why-choose-text .accent-gold { color: var(--gold-400); }
.why-choose-text p { font-size: var(--fs-sm); color: rgba(255,255,255,0.88); margin: 0 0 var(--sp-5); }
.why-choose-photo { position: relative; }
/* Blob dekoratif organik di belakang foto — bentuk asimetris via border-radius
   4 sudut berbeda, warna copper lebih gelap supaya foto tetap menonjol. */
.why-choose-blob {
  position: absolute; inset: -6% -10% -6% -4%;
  background: var(--copper-700);
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  z-index: 0;
}
.why-choose-photo img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius-sm);
}

.why-choose-features { background: var(--cream-50); padding: var(--sp-7) 0; }
.why-choose-eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--copper-600); text-align: center;
  margin: 0 0 var(--sp-5);
}
/* 2 kolom dari mobile — 4 kartu jadi 2 baris, bukan 4 baris panjang ke bawah. */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-2); }
.feature-card { text-align: center; }
.feature-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 2px solid var(--copper-600); color: var(--copper-600);
  margin: 0 auto var(--sp-2);
}
.feature-card h3 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--text-on-cream); margin: 0 0 var(--sp-1);
}
.feature-card p { font-size: var(--fs-xs); color: var(--text-on-cream-muted); margin: 0; }

@media (min-width: 640px) {
  .feature-grid { gap: var(--sp-5); }
  .feature-icon { width: 56px; height: 56px; margin-bottom: var(--sp-3); }
  .feature-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
  .feature-card p { font-size: var(--fs-sm); }
}
@media (min-width: 768px) {
  .why-choose-intro { padding: var(--sp-8) 0; }
  .why-choose-intro-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); text-align: left; }
  .why-choose-photo { order: 2; }
  .why-choose-features { padding: var(--sp-8) 0; }
  .why-choose-eyebrow { text-align: left; }
  /* 4 kartu sejajar sebaris begitu ada cukup ruang, bukan tumpuk 2x2 sampai desktop lebar. */
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Tombol -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 13px 26px;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--copper-600); color: #fff; }
.btn-primary:hover { background: var(--copper-700); }
.btn-outline { background: transparent; color: var(--text-on-ink); border-color: rgba(247,241,230,0.35); }
.btn-outline:hover { border-color: var(--text-on-ink); background: rgba(247,241,230,0.08); }
.btn-copper-outline { background: transparent; color: var(--copper-600); border-color: var(--copper-600); }
.btn-copper-outline:hover { background: var(--copper-600); color: #fff; }
.btn-outline-dark { background: transparent; color: var(--text-on-cream); border-color: var(--cream-300); }
.btn-outline-dark:hover { border-color: var(--text-on-cream-muted); background: var(--cream-200); }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #0E7A40; }
.btn-block { display: flex; width: 100%; }

/* ---- Trust badges -------------------------------------------------------- */
.trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.trust-badge {
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); padding: var(--sp-5) var(--sp-4); text-align: center;
}
.trust-badge .icon { color: var(--copper-600); margin: 0 auto var(--sp-3); display: block; }
.trust-badge h3 {
  margin: 0 0 var(--sp-1); font-family: var(--font-display);
  font-size: var(--fs-md); font-weight: 600;
}
.trust-badge p { margin: 0; color: var(--text-on-cream-muted); font-size: var(--fs-sm); }

/* ---- Section header ------------------------------------------------------ */
.section { padding: 0; }
.section + .section { margin-top: var(--sp-8); }
.section-header { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-header::before, .section-header::after { content: ""; flex: 1; height: 1px; background: var(--cream-300); }
.band-ink .section-header::before, .band-ink .section-header::after { background: var(--ink-600); }
.section-header h2 {
  margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.section-header a {
  color: var(--copper-600); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.band-ink .section-header a { color: var(--copper-400); }
.section-header a svg { transition: transform var(--dur-base) var(--ease-out); }
.section-header a:hover svg { transform: translateX(4px); }
@media (min-width: 768px) { .section-header h2 { font-size: var(--fs-3xl); } }

/* ---- Kategori (band gelap) ----------------------------------------------- */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.category-card {
  background: var(--ink-700); border: 1px solid var(--ink-600);
  border-radius: var(--radius-sm); padding: var(--sp-5) var(--sp-4);
  text-align: center; color: var(--text-on-ink); display: block;
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.category-card:hover { border-color: var(--copper-500); transform: translateY(-3px); background: #31261F; }
.category-card .icon { color: var(--copper-400); margin: 0 auto var(--sp-3); display: block; }
.category-card h3 {
  margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: var(--fs-md);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.category-card p { margin: 0; font-size: var(--fs-xs); color: var(--text-on-ink-muted); }

/* ---- Kartu produk -------------------------------------------------------- */
/* auto-fit (bukan auto-fill) supaya baris dengan sedikit kartu — misal 3 produk
   unggulan — tetap mengisi lebar penuh, bukan menyisakan kolom kosong. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); }
/* Produk Pilihan: selalu 3 kartu sebaris di tablet ke atas (bukan auto-fit
   yang melebar jadi 5-6 kolom kecil) — kartu jadi lebih besar & jelas. Di HP
   sempit (<600px) tetap ikut aturan .product-grid 3-kolom padat di bawah. */
@media (min-width: 600px) {
  #featured-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
}
.product-card {
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.product-card:hover { box-shadow: var(--elev-3); transform: translateY(-3px); border-color: var(--copper-500); }
.product-card .thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; }
.product-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .thumb img { transform: scale(var(--hover-zoom)); }
.badge-featured, .badge-discount {
  position: absolute; top: 10px; z-index: var(--z-raised);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 9px; border-radius: var(--radius-xs);
}
.badge-featured { left: 10px; background: var(--ink-800); color: var(--cream-200); }
.badge-discount { right: 10px; background: var(--copper-600); color: #fff; }
.product-info { padding: var(--sp-4); flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
.product-name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  line-height: var(--lh-snug); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price { font-weight: 600; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.product-price-original {
  color: var(--text-on-cream-muted); text-decoration: line-through;
  font-size: var(--fs-sm); margin-left: var(--sp-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; /* jangan pecah "Rp" dan angkanya ke baris berbeda */
}
.product-meta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 600; color: var(--text-on-cream-muted);
}
.product-cta {
  margin-top: auto; padding-top: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--copper-600);
  display: flex; align-items: center; gap: 6px;
}
.product-cta svg { transition: transform var(--dur-base) var(--ease-out); }
.product-card:hover .product-cta svg { transform: translateX(4px); }

/* ---- Video review ---------------------------------------------------------
   Layout diambil dari situs asli: foto pemain gitar penuh tinggi di kiri,
   grid video di kanan (bukan band gelap satu kolom seperti versi lama). */
.review-band { padding: var(--sp-6) 0; }
.review-layout { display: grid; gap: var(--sp-6); }
.review-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%;
  border-radius: var(--radius-md); display: block;
}
@media (min-width: 900px) {
  .review-layout { grid-template-columns: minmax(260px, 340px) 1fr; align-items: stretch; }
  .review-photo img { height: 100%; aspect-ratio: auto; }
  .review-content { display: flex; flex-direction: column; justify-content: center; }
}

/* ---- Koleksi Lesley Guitars ------------------------------------------------
   Foto cutout transparan (bukan foto persegi) + copy & 2 CTA di kanan, sama
   seperti situs asli. Foto pakai object-fit:contain (bukan cover) karena
   background-nya sudah transparan — tidak perlu/boleh dipotong ke kotak. */
.koleksi-band { padding: var(--sp-6) 0; }
.koleksi-layout { display: grid; gap: var(--sp-6); align-items: center; text-align: center; }
.koleksi-photo { display: flex; justify-content: center; }
.koleksi-photo img { width: 100%; max-width: 280px; height: auto; object-fit: contain; display: block; }
.koleksi-content h2 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl);
  margin: 0 0 var(--sp-3);
}
.koleksi-content p { color: var(--text-on-cream-muted); margin: 0 0 var(--sp-5); max-width: 52ch; margin-inline: auto; }
.koleksi-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }
@media (min-width: 768px) {
  .koleksi-layout { grid-template-columns: minmax(240px, 320px) 1fr; text-align: left; gap: var(--sp-8); }
  .koleksi-photo img { max-width: none; }
  .koleksi-content p { margin-inline: 0; }
  .koleksi-actions { justify-content: flex-start; }
}

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.video-card {
  position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--cream-300); aspect-ratio: 16 / 9;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.video-card:hover { border-color: var(--copper-500); transform: translateY(-3px); }
.video-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.video-card:hover img { transform: scale(var(--hover-zoom)); }
.video-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 14, 0.35); color: #fff;
  transition: background var(--dur-base) var(--ease-out);
}
.video-card:hover .video-play { background: rgba(20, 16, 14, 0.15); }
.video-play svg {
  width: 54px; height: 54px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: transform var(--dur-base) var(--ease-out);
}
.video-card:hover .video-play svg { transform: scale(1.08); }

/* Video diputar langsung di dalam kartu (lihat js/video.js) */
.video-card iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-card.is-playing { cursor: default; border-color: var(--copper-500); transform: none; }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .video-grid { grid-template-columns: 1fr; } }

/* ---- Testimoni ----------------------------------------------------------- */
.testimoni-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.testimoni-grid img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--cream-300);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.testimoni-grid img:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
@media (max-width: 900px) { .testimoni-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .testimoni-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- CTA band ------------------------------------------------------------ */
/* Latar foto dekoratif di band CTA. Scrim gelap dijaga cukup pekat supaya
   teks putih + tombol tetap terbaca di atas foto apa pun (measured, bukan
   angka asal). Kalau --cta-bg tidak diisi, band tetap solid ink seperti biasa. */
.cta-photo-band {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(20,16,14,0.82), rgba(20,16,14,0.9)),
    var(--cta-bg, none);
  background-size: cover;
  background-position: center 30%;
}

.cta-band { text-align: center; position: relative; z-index: 1; }
.cta-band h2 {
  margin: 0 0 var(--sp-3); font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display);
}
.cta-band p { color: var(--text-on-ink-muted); margin: 0 auto var(--sp-5); max-width: 52ch; }
@media (min-width: 768px) { .cta-band h2 { font-size: var(--fs-3xl); } }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink-900); color: var(--text-on-ink-muted); padding: var(--sp-8) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-6); }
.footer-grid h4 {
  color: var(--text-on-ink); margin: 0 0 var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.footer-grid li { margin-bottom: var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.footer-grid a { transition: color var(--dur-base) var(--ease-out); }
.footer-grid a:hover { color: var(--copper-400); }
.footer-contact li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--copper-400); }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-600);
  font-size: var(--fs-xs); text-align: center;
}
/* Halaman dalam memakai footer ringkas (hanya baris hak cipta) —
   jangan sisakan ruang kosong besar di atasnya. */
.site-footer:not(:has(.footer-grid)) { padding: var(--sp-5) 0; }
.footer-bottom:only-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb {
  padding: var(--sp-4) 0; font-size: var(--fs-xs);
  color: var(--text-on-cream-muted); letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--text-on-cream-muted); transition: color var(--dur-base) var(--ease-out); }
.breadcrumb a:hover { color: var(--copper-600); }

/* ---- Judul halaman ------------------------------------------------------- */
.page-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl);
  letter-spacing: var(--ls-display); line-height: var(--lh-tight); margin: 0 0 var(--sp-5);
}
@media (min-width: 768px) { .page-title { font-size: var(--fs-3xl); } }

/* ---- Katalog ------------------------------------------------------------- */
.catalog-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--sp-6); align-items: start; }
.filters {
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); padding: var(--sp-5);
  position: sticky; top: 96px;
}
.filters h3 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-on-cream-muted); margin: 0 0 var(--sp-4);
}
/* Panel filter: sidebar biasa di layar lebar, panel lipat di layar sempit. */
.filters-summary { display: none; }
.filters-fold > summary { list-style: none; }
.filters-fold > summary::-webkit-details-marker { display: none; }

.filter-group { margin-bottom: var(--sp-5); }
.filter-group label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); margin-bottom: var(--sp-2);
  cursor: pointer; min-height: 32px;
}
.filter-group input[type="number"] {
  width: 100%; padding: 10px var(--sp-3); font-size: var(--fs-md);
  border: 1px solid var(--cream-300); border-radius: var(--radius-xs);
  background: var(--cream-50); color: var(--text-on-cream);
}
.filter-group input[type="checkbox"], .filter-group input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--copper-600); flex-shrink: 0;
}
.price-range { display: flex; align-items: center; gap: var(--sp-2); }
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.catalog-toolbar select, .catalog-toolbar input[type="search"] {
  padding: 11px var(--sp-3); font-size: var(--fs-md);
  border: 1px solid var(--cream-300); border-radius: var(--radius-xs);
  background: var(--cream-50); color: var(--text-on-cream); min-height: 44px;
}
.result-count {
  color: var(--text-on-cream-muted); font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 600;
}

/* ---- Detail produk ------------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: start; }
/* Item grid/flex punya min-width:auto, jadi strip thumbnail yang panjang bisa
   memaksa kolom melebar dan membuat seluruh halaman ikut menggeser. */
.product-detail > * { min-width: 0; }
.detail-gallery img {
  width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--cream-300); background: #fff;
}

/* ---- Galeri produk (slider) ---------------------------------------------
   Track memakai scroll-snap native: geser jari di HP terasa seperti aplikasi,
   tanpa library apa pun. Tombol panah dan thumbnail memakai scrollTo halus. */
.gallery { position: relative; min-width: 0; }
.gallery-stage {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--cream-300); background: #fff;
}
.gallery-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.gallery-slide img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border: 0; border-radius: 0; display: block;
}

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--cream-300); background: rgba(255,255,255,0.92);
  color: var(--text-on-cream); cursor: pointer; z-index: var(--z-raised);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-2); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.gallery:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { background: #fff; border-color: var(--copper-500); }
.gallery-nav:active { transform: translateY(-50%) scale(0.94); }
.gallery-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.gallery-nav.prev { left: var(--sp-3); }
.gallery-nav.next { right: var(--sp-3); }

.gallery-counter {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3); z-index: var(--z-raised);
  background: rgba(20,16,14,0.72); color: var(--cream-200);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
}

.gallery-thumbs {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 68px; height: 68px; padding: 0; cursor: pointer;
  border: 1px solid var(--cream-300); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden; opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb:active { transform: scale(0.95); }
.gallery-thumb.is-active { opacity: 1; border-color: var(--copper-600); }

@media (prefers-reduced-motion: reduce) { .gallery-track { scroll-behavior: auto; } }
@media (hover: none) { .gallery-nav { opacity: 1; } }
@media (max-width: 600px) { .gallery-thumb { flex-basis: 56px; height: 56px; } }
.detail-info h1 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 var(--sp-2);
}
.detail-meta {
  color: var(--text-on-cream-muted); font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 600; margin-bottom: var(--sp-4);
}
.detail-price-box {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-4) 0; border-block: 1px solid var(--cream-300); margin-bottom: var(--sp-5);
}
.detail-price { font-size: var(--fs-2xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-price-original {
  color: var(--text-on-cream-muted); text-decoration: line-through;
  font-size: var(--fs-md); font-variant-numeric: tabular-nums;
}
.detail-discount {
  background: var(--copper-600); color: #fff; font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--radius-xs);
}
.variant-group { margin-bottom: var(--sp-5); }
.variant-group h4 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-on-cream-muted); margin: 0 0 var(--sp-3);
}
.variant-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.variant-btn {
  min-height: 44px; padding: 11px var(--sp-4); font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid var(--cream-300); background: var(--cream-50);
  color: var(--text-on-cream); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.variant-btn:hover { border-color: var(--copper-500); }
.variant-btn:active { transform: scale(0.97); }
.variant-btn.active { border-color: var(--copper-600); background: var(--copper-600); color: #fff; }
.qty-selector { display: flex; align-items: center; margin-bottom: var(--sp-5); }
.qty-selector button {
  width: 44px; height: 44px; border: 1px solid var(--cream-300);
  background: var(--cream-50); color: var(--text-on-cream); cursor: pointer;
  font-size: var(--fs-lg); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.qty-selector button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.qty-selector button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.qty-selector button:hover { background: var(--cream-200); border-color: var(--copper-500); }
.qty-selector input {
  width: 60px; height: 44px; text-align: center; border: 1px solid var(--cream-300);
  border-inline: none; background: var(--cream-50); color: var(--text-on-cream);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.detail-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.detail-actions .btn { flex: 1; min-width: 200px; }
.product-description { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--cream-300); }
.product-description h2 {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  margin: 0 0 var(--sp-3);
}
.product-description p {
  line-height: var(--lh-body); color: var(--text-on-cream);
  white-space: pre-line; max-width: 68ch; margin: 0;
}
.similar-products { margin-top: var(--sp-8); }

/* ---- Keranjang ----------------------------------------------------------- */
.table-responsive { overflow-x: auto; }
.cart-table {
  width: 100%; min-width: 560px; border-collapse: collapse;
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); overflow: hidden;
}
.cart-table th {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-on-cream-muted);
  background: var(--cream-200); border-bottom: 1px solid var(--cream-300);
}
.cart-table td {
  padding: var(--sp-4); border-bottom: 1px solid var(--cream-300);
  text-align: left; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.cart-table tr:last-child td { border-bottom: none; }
.cart-item-row { display: flex; align-items: center; gap: var(--sp-3); }
.cart-item-row img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-xs); border: 1px solid var(--cream-300); background: #fff;
}
.cart-item-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; }
.cart-item-variant {
  color: var(--text-on-cream-muted); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 600;
}
.cart-qty { display: flex; align-items: center; }
.cart-qty button {
  width: 34px; height: 34px; border: 1px solid var(--cream-300);
  background: var(--cream-50); color: var(--text-on-cream); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out);
}
.cart-qty button:hover { background: var(--cream-200); }
.cart-qty span { min-width: 40px; text-align: center; font-weight: 600; }
.remove-btn {
  color: var(--danger); cursor: pointer; background: none; border: none;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; min-height: 44px; padding: 0 var(--sp-2);
}
.remove-btn:hover { text-decoration: underline; }
.cart-summary {
  background: var(--cream-50); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); padding: var(--sp-5); margin-top: var(--sp-5);
  margin-left: auto; max-width: 420px;
}
.cart-summary .row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.cart-summary .total {
  font-size: var(--fs-xl); font-weight: 700;
  padding-top: var(--sp-3); border-top: 1px solid var(--cream-300);
}
.empty-state {
  text-align: center; padding: var(--sp-9) var(--sp-5);
  background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-sm);
}
.empty-state .icon { color: var(--copper-500); margin: 0 auto var(--sp-4); display: block; }
.empty-state p { color: var(--text-on-cream-muted); margin: 0 0 var(--sp-5); }

/* ---- Checkout modal ------------------------------------------------------ */
.shipping-weight-note { color: var(--text-on-cream-muted); font-size: var(--fs-xs); margin-top: var(--sp-2); }
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(20, 16, 14, 0.62);
  align-items: center; justify-content: center; padding: var(--sp-4);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--cream-100); border-radius: var(--radius-md);
  padding: var(--sp-6); width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--elev-4);
}
.modal-close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px; border: none; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--text-on-cream-muted);
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.modal-close:hover { background: var(--cream-200); color: var(--text-on-cream); }
.modal-box h3 {
  margin: 0 0 var(--sp-4); font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 600; padding-right: var(--sp-7);
}
.modal-order-summary {
  background: var(--cream-200); border: 1px solid var(--cream-300);
  border-radius: var(--radius-sm); padding: var(--sp-4); margin-bottom: var(--sp-5);
}
.modal-order-list { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.modal-order-list li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-1) 0; font-variant-numeric: tabular-nums;
}
.modal-order-subtotal {
  font-size: var(--fs-sm); text-align: right; padding-top: var(--sp-2);
  border-top: 1px solid var(--cream-300); font-variant-numeric: tabular-nums;
}
#checkout-form label {
  display: block; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-on-cream-muted); margin: var(--sp-4) 0 var(--sp-2);
}
#checkout-form label:first-of-type { margin-top: 0; }
#checkout-form input[type="text"],
#checkout-form input[type="tel"],
#checkout-form select,
#checkout-form textarea {
  width: 100%; padding: 12px var(--sp-3); font-size: var(--fs-md);
  border: 1px solid var(--cream-300); border-radius: var(--radius-sm);
  background: var(--cream-50); color: var(--text-on-cream); min-height: 44px;
  transition: border-color var(--dur-base) var(--ease-out);
}
#checkout-form input:focus, #checkout-form textarea:focus { border-color: var(--copper-600); }
#checkout-form textarea { resize: vertical; line-height: var(--lh-body); }
#checkout-submit-btn { margin-top: var(--sp-5); }
#checkout-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Toast --------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 12px);
  background: var(--ink-800); color: var(--text-on-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--elev-4);
  z-index: var(--z-overlay); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- WA float ------------------------------------------------------------ */
.wa-float {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4);
  width: 56px; height: 56px; border-radius: var(--radius-full);
  background: var(--whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev-4); z-index: var(--z-float);
  transition: transform var(--dur-base) var(--ease-out);
}
.wa-float:hover { transform: scale(1.06); }
.wa-float:active { transform: scale(0.96); }

/* ---- Scroll reveal ------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); }
[data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Plus Jakarta Sans perlu bobot lebih tinggi dari serif untuk terbaca sebagai
   judul. Diletakkan setelah semua komponen supaya menang cascade. Nama produk
   sengaja ditinggal di 600 supaya kartu tidak terasa berat. */
.hero-intro h1,
.section-header h2,
.page-title,
.detail-info h1,
.cta-band h2,
.footer-grid h4,
.modal-box h3,
.product-description h2 { font-weight: 700; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .catalog-layout { grid-template-columns: 210px 1fr; gap: var(--sp-5); }
}

@media (max-width: 860px) {
  .header-top { flex-wrap: wrap; gap: var(--sp-3); }
  .search-form { order: 3; flex-basis: 100%; }
  .header-actions { margin-left: auto; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: static; padding: 0; }
  .filters-summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); cursor: pointer; min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--text-on-cream);
  }
  .filters-summary svg { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
  .filters-fold[open] .filters-summary svg { transform: rotate(180deg); }
  .filters-fold[open] > :not(summary) { margin-inline: var(--sp-4); }
  .filters-fold[open] > h3:first-of-type { margin-top: 0; }
  .filters-fold[open] > .btn { margin-bottom: var(--sp-4); width: calc(100% - var(--sp-6)); }
  .product-detail { grid-template-columns: 1fr; gap: var(--sp-5); }
  .detail-gallery img { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 600px) {
  /* --- Kepadatan tampilan ponsel -----------------------------------------
     Sebelumnya announce + header memakan 229px dari 812px layar (28%) sebelum
     konten pertama muncul. Blok ini merapatkan seluruh kerangka halaman. */

  :root { --band-py-mobile: var(--sp-6); }

  .announce {
    font-size: 10px; letter-spacing: 0.03em;
    padding: 6px var(--sp-3); line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .announce-extra { display: none; }   /* cukup satu pesan di layar sempit */

  .header-top { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); row-gap: var(--sp-2); }
  .logo { gap: var(--sp-2); }
  .logo img { height: 26px; }
  .logo span { display: none; }          /* "Toko Online Resmi" hanya hiasan di HP */
  .search-form input { padding: 9px var(--sp-3); }
  .search-form button { padding: 0 var(--sp-3); min-height: 38px; }
  .header-actions { gap: var(--sp-4); }
  .header-actions a { font-size: var(--fs-xs); min-height: 38px; padding: var(--sp-1) 0; }
  .cart-count { min-width: 18px; height: 18px; font-size: 10px; }

  .hero-banner { max-height: 42vh; }
  .hero-intro { padding: var(--sp-6) 0; }
  .hero-intro h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
  .hero-intro p { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }

  .section-header { margin-bottom: var(--sp-4); }
  .section-header h2 { font-size: var(--fs-md); letter-spacing: 0.1em; }
  .section-header a { font-size: var(--fs-2xs); min-height: 38px; }
  .section + .section { margin-top: var(--sp-6); }

  .btn { padding: 11px var(--sp-4); font-size: var(--fs-xs); }

  .page-title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
  .breadcrumb { padding: var(--sp-3) 0; font-size: var(--fs-2xs); }

  .category-card { padding: var(--sp-4) var(--sp-2); }
  .category-card .icon { width: 26px; height: 26px; margin-bottom: var(--sp-2); }
  .category-card h3 { font-size: var(--fs-sm); }
  .category-card p { font-size: var(--fs-2xs); }

  .trust-badges { grid-template-columns: 1fr; gap: var(--sp-2); }
  .trust-badge { padding: var(--sp-3); }
  .trust-badge h3 { font-size: var(--fs-sm); }
  .trust-badge p { font-size: var(--fs-xs); }

  .cta-band h2 { font-size: var(--fs-xl); }
  .cta-band p { font-size: var(--fs-sm); }

  .site-footer { padding: var(--sp-6) 0 var(--sp-4); }
  .footer-grid { gap: var(--sp-5); }
  .footer-grid h4 { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
  .footer-grid li { font-size: var(--fs-xs); }
  .footer-bottom { margin-top: var(--sp-5); font-size: var(--fs-2xs); }

  .detail-info h1 { font-size: var(--fs-xl); }
  .detail-price { font-size: var(--fs-xl); }
  .detail-price-box { padding: var(--sp-3) 0; margin-bottom: var(--sp-4); }
  .variant-group { margin-bottom: var(--sp-4); }
  .variant-btn { padding: 10px var(--sp-3); font-size: var(--fs-xs); }
  .trust-badge { display: flex; align-items: center; gap: var(--sp-4); text-align: left; padding: var(--sp-4); }
  .trust-badge .icon { margin: 0; }
  /* Grid padat 3 kolom di HP: lebih banyak produk terlihat, scroll jauh lebih
     pendek. Meta kategori dan CTA disembunyikan karena tidak muat terbaca. */
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .product-info { padding: var(--sp-2); gap: var(--sp-1); }
  .product-name { font-size: var(--fs-xs); line-height: 1.3; }
  .product-price { font-size: var(--fs-xs); }
  .product-price-original { display: block; margin-left: 0; font-size: var(--fs-2xs); }
  .product-meta, .product-cta { display: none; }
  .badge-featured, .badge-discount { font-size: 9px; padding: 3px 5px; top: 5px; letter-spacing: 0.04em; }
  .badge-featured { left: 5px; }
  .badge-discount { right: 5px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  /* Kartu terakhir yang sendirian di baris (jumlah kategori ganjil) melebar
     penuh, tidak menyisakan kolom kosong di sebelahnya. */
  .category-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .section-header { flex-wrap: wrap; }
  .section-header::before, .section-header::after { display: none; }
  .section-header h2 { white-space: normal; }
  .section-header a { margin-left: auto; }
  .detail-actions .btn { min-width: 100%; }
  .cart-summary { max-width: none; }
  .modal-box { padding: var(--sp-5); }
}

@media (max-width: 400px) {
  .logo img { height: 30px; }
  .header-actions { gap: var(--sp-3); }
  /* Sembunyikan label HANYA pada tautan yang punya ikon. Tautan Katalog tidak
     punya ikon, jadi labelnya harus tetap tampil atau link jadi kosong. */
  .header-actions a[href="keranjang.html"] .label { display: none; }
}