/* Kerdilpedia — responsive.css: satu-satunya tempat aturan lintas-ukuran.
   Prinsip: mobile = layout sendiri, bukan desktop diperkecil.
   Urutan: telepon (<=640) -> tablet (641-1023) -> desktop (>=1024 tetap apa adanya). */

/* ===== Fondasi: anak grid/flex boleh menyusut (KECUALI kontrol sentuh), dekorasi tak melebarkan ===== */
#kd-main, main { min-width: 0; }
#kd-main .grid > *, main .grid > * { min-width: 0; }
#kd-main .flex > :not(button):not(input):not(select):not(textarea):not(a), main .flex > :not(button):not(input):not(select):not(textarea):not(a) { min-width: 0; }
header .absolute.inset-0,
main section .absolute.inset-0,
main .absolute.-top-24 {
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
}
header .absolute.inset-0 svg,
main section .absolute.inset-0 svg,
main section svg {
  max-width: 100%;
  height: auto;
}
img { max-width: 100%; }
/* semua ukuran: keranjang header & tombol kartu katalog >= 44px (tanpa ubah tampilan) */
header [onclick*=kdToggleCart] { min-height: 44px; }
#katalog-produk .grid button, #kd-grid button { min-width: 44px; min-height: 44px; }
input, select, textarea, button { max-width: 100%; }

/* ===== Kartu katalog: ukuran sama dengan kartu beranda ===== */
#kd-grid .kd-judul {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 24px;
}
/* Harga kartu: satu baris penuh, ukuran menyesuaikan ruang (JS kdPasHarga).
   Ellipsis hanya jaring terakhir (modul: harga > ~Rp 1,3 jt). */
#katalog-produk .grid [data-harga], #katalog-produk .grid [data-price], #kd-grid .kd-harga {
  font-size: 15px;
  white-space: nowrap;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
#kd-grid > div > div:last-child > div:first-child { min-width: 0; flex: 1 1 auto; }
#kd-grid > div > div:last-child { gap: 8px; }
/* tinggi kartu disamakan lintas breakpoint: beranda = acuan */
#katalog-produk .grid > div, #kd-grid > div { min-height: 417px; }

/* ===== Kolom pencarian di header (global semua halaman) ===== */
.kd-cari { max-width: 520px; margin: 0 16px; }
.kd-cari input { min-height: 34px; }

/* ===== Katalog di beranda: jangan tertutup header saat dituju dari menu ===== */
#katalog-produk { scroll-margin-top: 100px; }

/* ===== Foto produk: persegi 1:1 supaya admin cukup simpan gambar kotak ===== */
.kd-foto {
  aspect-ratio: 1 / 1;
  height: auto;
}
.kd-foto > img,
.kd-foto-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* banner utama halaman produk: 4:3, bukan persegi (memuat judul + info) */
.kd-foto-banner { aspect-ratio: 4 / 3; }

/* navigasi bawah HP: sembunyi di desktop/tablet */
#kd-bnav { display: none; }

/* ===== Telepon (<=640px) ===== */
@media (max-width: 640px) {
  /* --- HP: tepi 12px global (header, main, footer sejajar satu garis) --- */
  .px-margin { padding-left: 12px !important; padding-right: 12px !important; }
  /* --- Header: banner 1 baris ringkas --- */
  header .bg-primary { padding-top: 6px; padding-bottom: 6px; }
  header .bg-primary .max-w-7xl {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  header .bg-primary .max-w-7xl > div:last-child { display: none; }

  /* --- Header baris 1: logo ringkas + keranjang + menu kanan --- */
  header .h-20 {
    height: auto !important;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
    justify-content: flex-start;
  }
  /* header 1 baris: logo + nama toko (teks kembali tampil) + lonceng */
  header .h-20 .shrink-0 { align-items: center; }
  header .h-20 .shrink-0 img { height: 34px; }
  /* baris 2: kolom pencarian penuh (header jadi lebih tebal) */
  header .kd-cari { order: 5; flex: 0 0 100% !important; max-width: none !important; margin: 0 0 4px !important; }
  .kd-cari input { min-height: 44px; }
  .kd-cari form { padding: 4px 10px; }
  .kd-cari button { min-height: 44px; min-width: 44px; }
  header .pl-1 { display: none; }
  /* HP: keranjang atas disembunyikan (sudah ada di navigator bawah);
     lonceng dikembalikan tampil dengan label Beta (fungsi menyusul). */
  header [onclick*=kdToggleCart] { display: none; }
  header .h-20 > div:last-child { margin-left: 8px; }
  header .h-20 > div:last-child { order: 3; margin-left: auto; }

  /* --- Header: 1 baris saja (search pindah ke hero) --- */
  header button.p-2 { min-width: 44px; min-height: 44px; }
  header nav a { min-width: 44px; }
  header .h-20 a { min-width: 44px; }

  /* --- Beranda: hero ramping --- */
  main section:first-child { padding-bottom: 24px; }
  main section:first-child h1 { font-size: clamp(24px, 7vw, 40px); }
  /* kolom statistik hero: 2x2, bukan 1x3 memanjang */
  #kd-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- Katalog: 2 kolom di HP, gap 12px, deskripsi disembunyikan (detail ada di halaman produk) --- */
  #katalog-produk .grid, #kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #katalog-produk .grid > div p { display: none; }
  #katalog-produk .grid > div, #kd-grid > div { padding: 12px; }
  #katalog-produk .grid h3 { font-size: 14px; }
  main section:first-child input { min-height: 48px; }
  main section:first-child .lg\:col-span-5 .bg-surface-container-lowest { padding: 16px; }

  /* --- Seksi: padding HP 24-32px --- */
  main section.py-space-xl { padding-top: 24px; padding-bottom: 24px; }

  /* --- Halaman produk: satu kolom, tombol beli sticky --- */
  #kd-detail-box > div.grid { grid-template-columns: minmax(0, 1fr); }
  #kd-buy-bar { position: sticky; bottom: 0; z-index: 30; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #kd-qty-stepper button { min-width: 44px; min-height: 44px; }

  /* --- Checkout: form dulu, ringkasan setelah; kartu QRIS penuh --- */
  #kd-checkout-grid { grid-template-columns: minmax(0, 1fr); }
  [data-qr-box] { width: 100%; }
  [data-qr-box] ~ div button, [data-kirim-invoice] { flex: 1 1 100%; min-height: 48px; }

  /* --- Lacak: form penuh, hasil satu kolom --- */
  #kd-hasil-grid { grid-template-columns: minmax(0, 1fr); }
  #lacak-form input, #search-input { min-height: 48px; }
  #hero-search-input { min-height: 48px; }
  #tab-content-email input, #tab-content-wa input, #kd-masuk-grid input { min-height: 48px; }

  /* --- Masuk: panel di atas, form di bawah --- */
  #kd-masuk-grid { grid-template-columns: minmax(0, 1fr); }

  /* --- Footer: 2 kolom ringkas --- */
  footer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer .pb-space-xl { padding-bottom: 16px; }
  footer .pt-space-xl { padding-top: 24px; }
  footer .flex.flex-wrap.justify-center { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }

  /* --- Ruang napas tombol bawah browser --- */
  /* target sentuh: keranjang header & tombol kartu >= 44px */
  header [onclick*=kdToggleCart] { min-height: 44px; }
  /* tap target halaman dalam: breadcrumb, qty kecil, input mungil, tombol teks */
  main nav a, main nav span { min-height: 44px; display: inline-flex; align-items: center; }
  #kd-qty-stepper button { min-width: 44px; min-height: 44px; }
  main input[type=text], main input:not([type]) { min-height: 44px; }
  main input[type=tel], main input[type=email] { min-height: 44px; }
  main label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  main input.w-4 { min-height: 0; min-width: 0; width: 20px !important; height: 20px !important; flex: none; }
  main input#quantityVal { width: 44px; }
  main button.rounded-full.w-8 { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  main a.px-3.py-1\.5 { min-height: 44px; display: inline-flex; align-items: center; }
  main a.font-label-md { min-height: 44px; display: inline-flex; align-items: center; }
  #tab-content-email input, #tab-content-wa input, #kd-masuk-grid input { min-height: 48px; }
  main a.shrink-0 { min-height: 44px; }
  main a[data-cs-wa], main [data-ubah-data] { min-height: 44px; display: inline-flex; align-items: center; }
  /* tombol contoh & kosongkan di lacak: target sentuh 44px */
  main button.px-2\.5 { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  #katalog-produk .grid button, #kd-grid button { min-width: 44px; min-height: 44px; }
  /* --- Navigator bawah HP: 5 tujuan, ikon+label, badge keranjang --- */
  #kd-bnav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #e2e7ff;
    box-shadow: 0 -2px 12px rgba(9, 37, 103, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #kd-bnav a, #kd-bnav button {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    padding: 6px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #444650;
    background: none;
    border: 0;
    position: relative;
  }
  #kd-bnav .material-symbols-outlined { font-size: 24px; }
  #kd-bnav a[aria-current="page"], #kd-bnav .kd-aktif { color: #263c7e; }
  #kd-bnav .kd-aktif .material-symbols-outlined { font-variation-settings: "FILL" 1; }
  #kd-bnav .kd-bnav-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 2px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #fda600;
    color: #263c7e;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* konten & tombol sticky naik di atas navigator */
  /* chip populer di hero: target sentuh 44px (sekarang berupa tautan) */
  main .kd-chip { min-height: 44px; display: inline-flex; align-items: center; }
  /* deskripsi kartu katalog disembunyikan di HP, sama seperti kartu beranda */
  #kd-grid .kd-desc { display: none; }
  /* tinggi kartu HP disamakan (beranda = 318) */
  #katalog-produk .grid > div, #kd-grid > div { min-height: 318px; }
  /* harga di kartu HP: satu baris (aturan global di atas, JS menyesuaikan font) */
  #katalog-produk .grid [data-harga], #kd-grid [data-harga] { white-space: nowrap; }
  #kd-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #kd-buy-bar { bottom: calc(60px + env(safe-area-inset-bottom)); }
  footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ===== Tablet (641-1023px): dua kolom, bukan tumpukan HP yang diregangkan ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  #katalog-produk .grid, #kd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main section:first-child h1 { font-size: clamp(28px, 5vw, 40px); }
  footer .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  header button.p-2 { min-width: 44px; min-height: 44px; }
  header [onclick*=kdToggleCart] { min-height: 44px; }
  header .h-20 > div:nth-child(2) select,
  header .h-20 > div:nth-child(2) kbd { display: none; }
  header input { min-height: 44px; }
  main section:first-child input, #hero-search-input { min-height: 48px; }
  /* tinggi kartu tablet disamakan (beranda = 373) */
  #katalog-produk .grid > div, #kd-grid > div { min-height: 373px; }
}