/* ARABIC QUANTUM — Homepage Marketplace (/store). Dipindah dari <style> inline di includes/home.php supaya bisa di-cache browser.
   Warna brand dinamis (--brand, --brand-hover, --brand-rgb) tetap di-set inline oleh home.php. */
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: Plus Jakarta Sans,sans-serif;
    -webkit-font-smoothing: antialiased; transition: background .2s ease, color .2s ease;
  }
  a { color: inherit; text-decoration: none; }

  /* ── Elemen KHUSUS homepage (belum ada di layout.css) — dibangun dari
     token yang sama (--*), bukan warna/ukuran baru. Komponen yang SUDAH
     ada di layout.css (.theme-switch, .page-header, .badge,
     .btn-primary) sengaja TIDAK diulang di sini. ── */
  .home-topbar {
    height: 56px; background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
    position: sticky; top: 0; z-index: 20;
  }
  .home-topbar-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-width: 0; }
  .home-topbar-brand img { width: 26px; height: 26px; border-radius: var(--radius-md); object-fit: contain; }
  .home-topbar-brand span { font-size: var(--text-base); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .home-search {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 0 12px; color: var(--text-faint); flex: 1; max-width: 320px; margin-left: auto;
  }
  .home-search:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
  .home-search svg, .home-search .aq-icon { flex-shrink: 0; width: 14px; height: 14px; }
  .home-search input {
    border: none; background: transparent; outline: none; font-size: var(--text-sm); color: var(--text);
    width: 100%; min-width: 0; padding: 8px 0; font-family: inherit;
  }
  .theme-switch { flex-shrink: 0; }

  /* ── Tombol "Masuk"/"Akun Saya" — dibuat SETARA gaya .theme-switch-btn
     di sebelahnya (padding, border, radius pill), bukan .btn-primary
     (itu utk aksi checkout, bukan navigasi topbar). Icon-only di mobile
     (label disembunyikan) SAMA pola dgn .topbar-logout-label di admin. ── */
  .home-account-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap;
    transition: all .15s;
  }
  .home-account-btn:hover { background: var(--hover); border-color: var(--text-faint); }

  /* ── Modal Auth (Masuk / Lupa Password / Set Password Baru) — 1 modal,
     3 "tampilan" ditoggle lewat class .is-active pada .aq-auth-view (bukan
     3 modal terpisah), reuse .modal-backdrop/.modal-box/.modal-header/
     .modal-body dari layout.css. Elemen form (label/input/tombol/alert)
     SENGAJA dibuat 100% memakai class global yang sama dengan kartu login
     Admin (admin/login.php): .aq-label, .aq-input, .btn-primary, .alert/
     .alert-danger/.alert-success, .input-wrapper/.toggle-pass — bukan
     style lokal terpisah lagi, supaya tampilannya identik. ── */
  .aq-auth-view { display: none; }
  .aq-auth-view.is-active { display: block; }
  .aq-auth-field { margin-bottom: 14px; }
  .aq-auth-link { background: none; border: none; padding: 0; color: var(--brand); font-size: var(--text-sm); font-weight: 600; cursor: pointer; font-family: inherit; }
  .aq-auth-submit { width: 100%; margin-top: 4px; justify-content: center; }

  /* Toggle show/hide password — persis sama dgn .input-wrapper/.toggle-pass di admin/login.php */
  .input-wrapper { position: relative; }
  .input-wrapper .toggle-pass {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--text-faint); display: flex; align-items: center; transition: color 0.15s;
  }
  .input-wrapper .toggle-pass:hover { color: var(--text); }
  .input-wrapper .aq-input { padding-right: 38px; }

  /* Alert pesan sukses/gagal — pakai .alert/.alert-danger/.alert-success global,
     ditambah layout flex+icon spy sama persis dgn alert di admin/login.php. */
  #aqAuthMsg { display: none; align-items: flex-start; gap: 8px; }
  #aqAuthMsg .aq-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

  .aq-auth-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; }
  .aq-auth-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin: -6px 0 16px; }

  @media (max-width: 480px) {
    .home-account-btn span { display: none; }
    .home-account-btn { padding: 0; width: 32px; height: 32px; justify-content: center; }
  }

  .home-page { max-width: 1120px; margin: 0 auto; padding: 24px 20px 60px; }

  /* ── Hero "Bilah Cerita" (Opsi 7) — v8. Segmented progress bar ala story
     (3 segmen = 3 produk acak), 1 panel aktif ditampilkan bergantian
     otomatis, sisanya di-preload tapi disembunyikan (display:none) supaya
     JS tinggal toggle class, bukan re-render. Visual kanan pakai thumbnail
     produk asli kalau ada, fallback ke inisial (pola sama dgn kartu produk
     di grid). Warna & radius semuanya dari token --*, tidak ada yang
     baru. Lebar konten disamakan dgn .home-page biar sejajar dgn grid
     produk di bawahnya. ── */
  .home-hero {
    position: relative;
    /* ── Latar "notebook" — abu lembut + garis kotak-kotak tipis ala kertas
       kotak, dibangun dari 2 linear-gradient (horizontal & vertikal) di atas
       warna dasar --surface-alt (sudah abu lembut di kedua tema).
       color-mix() dipakai supaya garisnya benar2 SOFT (opacity ~45%) &
       otomatis menyesuaikan warna border tema aktif (terang/gelap), bukan
       warna baru yang di-hardcode. ── */
    background-color: var(--surface-alt);
    background-image:
      linear-gradient(color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--border) 45%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    padding: 36px 20px 44px; border-bottom: 1px solid var(--border); --home-hero-max: 1120px; /* disamakan dgn max-width .home-page (section Produk) di bawahnya */
  }
  .home-hero-segbar { display: flex; gap: 6px; max-width: var(--home-hero-max); margin: 0 auto 26px; }
  .home-hero-seg { flex: 1; height: 4px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; cursor: pointer; border: none; padding: 0; }
  .home-hero-seg i { display: block; height: 100%; width: 0%; background: var(--brand); }
  .home-hero-seg.is-done i { width: 100%; transition: none; }
  .home-hero-inner { max-width: var(--home-hero-max); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; min-height: 200px; }
  .home-hero-panel { display: none; }
  .home-hero-panel.is-active { display: block; animation: homeHeroFade .3s ease; }
  @keyframes homeHeroFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .home-hero-panel .badge { margin-bottom: 12px; }
  .home-hero-headline { color: var(--text); font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.3; margin: 0 0 10px; }
  .home-hero-subheadline { color: var(--text-muted); font-size: var(--text-md); line-height: 1.55; margin: 0 0 16px; }
  .home-hero-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
  .home-hero-meta .price-now { font-size: var(--text-xl); font-weight: 800; color: var(--text); }
  .home-hero-meta .price-old { font-size: var(--text-sm); color: var(--text-faint); text-decoration: line-through; }
  .home-hero-meta .price-free { font-size: var(--text-xl); font-weight: 800; color: var(--brand); }
  .home-hero-meta .sold-hint { font-size: var(--text-xs); color: var(--text-faint); }
  .home-hero .btn-primary {
    background: var(--brand); color: var(--color-on-solid); border: none; font-weight: 700; padding: 11px 24px; font-size: var(--text-sm);
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-md); box-shadow: 0 4px 14px rgba(var(--brand-rgb),0.24);
    transition: transform .15s, box-shadow .15s, background .15s;
  }
  .home-hero .btn-primary:hover { background: var(--brand-hover); transform: translateY(-1px); }
  .home-hero-visual {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9; height: auto; display: flex; align-items: center; justify-content: center; overflow: hidden;
    transition: opacity var(--home-hero-fade-ms, 220ms) ease; /* crossfade lembut saat renderVisual() ganti produk, lihat JS */
  }
  .home-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
  .home-hero-visual .initials-fallback { font-size: 2.5rem; font-weight: 800; color: var(--brand); }
  @media (max-width: 700px) {
    .home-hero { padding: 28px 16px 32px; }
    .home-hero-inner { grid-template-columns: 1fr; }
    .home-hero-visual { order: -1; }
  }

  /* ── Ticker "Pembelian Terbaru" — toast kecil mengambang pojok bawah,
     bergantian menampilkan 1 pembelian pada satu waktu (bukan daftar
     panjang), supaya tidak mengganggu tapi tetap kelihatan sbg bukti
     sosial real-time. Disembunyikan otomatis di layar sangat kecil kalau
     dianggap terlalu mengganggu ruang (lihat media query). ── */
  .purchase-ticker {
    position: fixed; left: 16px; bottom: 16px; z-index: 30; max-width: 300px;
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); padding: 10px 14px 10px 10px;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .purchase-ticker.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .purchase-ticker-icon {
    width: 34px; height: 34px; border-radius: var(--radius-pill); background: rgba(var(--brand-rgb),0.12); color: var(--brand);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .purchase-ticker-icon .aq-icon { width: 16px; height: 16px; }
  .purchase-ticker-text { min-width: 0; }
  .purchase-ticker-text strong { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .purchase-ticker-text span { display: block; font-size: var(--text-2xs); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
  .purchase-ticker-close {
    margin-left: 4px; background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; flex-shrink: 0; line-height: 0;
  }
  .purchase-ticker-close:hover { color: var(--text); }
  @media (max-width: 460px) { .purchase-ticker { left: 10px; right: 10px; bottom: 10px; max-width: none; } }

  /* ── Filter kategori — 1 baris & bisa discroll ke kanan kalau pil sudah
     penuh (bukan mendorong konten di bawahnya turun / wrap ke baris baru),
     pola chip-scroll umum di marketplace — berlaku di SEMUA ukuran layar
     termasuk mobile. flex-wrap:nowrap + overflow-x:auto; scrollbar
     disembunyikan (tetap scrollable via drag/swipe/wheel) biar rapi, & mask
     gradient tipis di ujung kanan sbg sinyal visual "masih ada lagi di
     kanan". ── */
  .filter-row {
    display: flex; gap: 8px; flex-wrap: nowrap; margin-bottom: 20px;
    overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip {
    font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
    transition: all .15s; font-family: inherit; flex-shrink: 0; white-space: nowrap;
  }
  .filter-chip.is-active { background: var(--brand); color: var(--color-on-solid); border-color: var(--brand); }
  .filter-chip:hover:not(.is-active) { background: var(--hover); border-color: var(--text-faint); }

  /* BUGFIX: grid-auto-rows dulu FIXED (190px) sementara .product-card punya
     overflow:hidden — kalau nama produk panjang (2+ baris) + deskripsi 2 baris
     + badge, tinggi konten kartu melebihi 190px dan harga/tombol "Lihat Detail"
     di bagian bawah kepotong/tidak kelihatan sama sekali. minmax(190px, auto)
     menjaga tinggi minimum yang sama tapi membiarkan baris tumbuh kalau
     kontennya butuh ruang lebih, jadi tidak ada lagi konten yang terpotong. */
  .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(190px, auto); gap: 14px; }
  .product-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .15s, border-color .15s, transform .15s, opacity .25s ease, scale .25s ease;
  }
  .product-card:hover { box-shadow: var(--shadow-md); border-color: var(--text-faint); transform: translateY(-2px); }
  .product-card.featured { grid-column: span 2; grid-row: span 2; flex-direction: row; }
  /* Efek lembut saat pil kategori/pencarian diklik — kartu yang tersaring
     memudar & mengecil dulu (bukan langsung "loncat" hilang), kartu yang
     kembali cocok memudar masuk lagi. Lihat aqFilterHomeProducts() di JS:
     class ini ditambah/dihapus dulu, display:none baru diset SETELAH durasi
     transisi selesai supaya animasinya sempat terlihat. */
  .product-card.is-filtering-out { opacity: 0; scale: 0.94; pointer-events: none; }

  .product-thumb {
    background: linear-gradient(135deg, var(--brand), rgba(var(--brand-rgb),0.6));
    display: flex; align-items: center; justify-content: center; color: var(--color-on-solid); font-weight: 700;
    position: relative; flex-shrink: 0;
  }
  /* Rasio 16:9 utk thumbnail kartu biasa (bukan featured) — pakai
     aspect-ratio drpd height tetap, supaya lebar gambar tetap proporsional
     di semua ukuran layar/kolom grid tanpa perlu diatur ulang per breakpoint.
     Kartu featured (bento 2x2) TETAP pakai rasio lama (tinggi mengikuti card,
     bukan 16:9) — lihat aturan .featured di bawah, sengaja tidak diubah. */
  .product-card:not(.featured) .product-thumb { aspect-ratio: 16 / 9; height: auto; font-size: 1.3rem; }
  .product-card.featured .product-thumb { width: 46%; font-size: 2.2rem; }
  .product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .product-thumb .badge { position: absolute; top: 10px; left: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 2; }

  /* Quick action (simpan / lihat cepat) — muncul saat kartu di-hover, biar
     pengunjung bisa bandingkan produk tanpa pindah halaman dulu. Tombolnya
     placeholder visual (belum ada backend wishlist), makanya event klik
     sengaja di-stop supaya tidak ikut memicu navigasi kartu <a>. */
  .thumb-quick-actions {
    position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px;
    opacity: 0; transform: translateX(6px); transition: opacity .15s, transform .15s; z-index: 2;
  }
  .product-card:hover .thumb-quick-actions { opacity: 1; transform: translateX(0); }
  .quick-btn {
    width: 28px; height: 28px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.92); color: var(--text);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    border: none; cursor: pointer; padding: 0;
  }
  .quick-btn .aq-icon { width: 13px; height: 13px; }
  .quick-btn:hover { background: var(--surface); color: var(--brand); }
  @media (hover: none) { .thumb-quick-actions { opacity: 1; transform: none; } }

  .product-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .product-card.featured .product-body {
    /* Opsi B — fluid via clamp(): di rentang lebar bento 2x2 (row layout,
       ≥901px), padding menyesuaikan lebar viewport, MAX di-cap 20px (bukan
       40px lagi) sesuai permintaan. Floor 16px supaya tidak pernah lebih
       sempit dari kartu biasa (14px) meski di ambang breakpoint. */
    padding: clamp(16px, 2.5vw, 20px);
    justify-content: center;
  }
  /* BUGFIX: judul produk sebelumnya tidak dibatasi baris sama sekali — nama
     produk panjang (mis. "Play Arabic - Bahasa Arab Tanpa Bosan, Tanpa
     Bingung") bisa mendorong harga/tombol keluar dari kartu (lalu kepotong
     oleh overflow:hidden di .product-card). Diclamp 2 baris + dipotong "…"
     supaya tinggi judul selalu terprediksi & konsisten antar kartu. */
  .product-title {
    font-size: var(--text-md); font-weight: 700; color: var(--text); margin: 0; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-card.featured .product-title { font-size: var(--text-xl); margin-bottom: 4px; -webkit-line-clamp: 3; }
  .product-desc {
    font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; margin: 2px 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .product-card.featured .product-desc { -webkit-line-clamp: 3; font-size: var(--text-sm); max-width: 90%; }

  /* Bukti sosial — hanya angka penjualan asli (COUNT order settlement),
     TIDAK ADA rating bintang di sini karena sistem belum punya data rating
     produk sama sekali (jangan tampilkan angka contoh/dummy). */
  .product-sold { font-size: var(--text-2xs); color: var(--text-faint); margin-top: 2px; }
  .product-card.featured .product-sold { font-size: var(--text-xs); }

  /* Chip urgensi — dari data promo (promo_label/promo_ends_at) ATAU kuota
     tersisa (quota_mode) yang SUDAH ADA di admin/order/produk.php utk
     checkout; di sini cuma dipakai ulang, bukan field baru. */
  .urgency-chip {
    display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-2xs); font-weight: 600;
    color: var(--color-warning-badge-text, #92400e); background: var(--color-warning-badge-bg, #fef3c7);
    padding: 3px 8px; border-radius: var(--radius-sm); margin-top: 6px; width: fit-content;
  }
  .urgency-chip .aq-icon { width: 11px; height: 11px; }

  .product-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .product-price small { display: block; font-size: var(--text-2xs); color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .product-price strong { font-size: var(--text-lg); font-weight: 700; color: var(--text); }
  .product-price strong.is-free { color: var(--brand); }
  .product-card.featured .product-price strong { font-size: var(--text-2xl); }
  /* Harga coret + persen hemat — dari compare_at_price plan termurah
     (kolom yang sama dipakai di halaman checkout, lihat public/checkout.php). */
  .product-price .old-price { font-size: var(--text-xs); color: var(--text-faint); text-decoration: line-through; margin-left: 5px; }
  .discount-badge {
    background: var(--color-danger-bg, #fdecea); color: var(--color-danger, #d72c0d);
    font-size: var(--text-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--radius-sm);
    margin-left: 5px; vertical-align: middle; white-space: nowrap;
  }

  .btn-primary.sm { padding: 6px 10px; font-size: var(--text-xs); }
  /* CTA tegas — sekarang tampil di SEMUA kartu (bukan cuma yang di-highlight),
     dengan ikon panah yang bergeser saat kartu di-hover. */
  .product-cta { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .product-cta .aq-icon { width: 12px; height: 12px; transition: transform .15s; }
  .product-card:hover .product-cta .aq-icon { transform: translateX(2px); }

  .home-empty {
    max-width: 420px; margin: 0 auto; padding: 60px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    color: var(--text-muted); font-size: var(--text-base); line-height: 1.6;
  }
  .home-empty .aq-icon { width: 40px; height: 40px; color: var(--text-faint); }
  #homeNoResults { display: none; }

  footer.home-foot { text-align: center; padding: 24px 20px; color: var(--text-faint); font-size: var(--text-xs); border-top: 1px solid var(--border); }
  footer.home-foot a { color: var(--text-faint); }
  footer.home-foot a:hover { color: var(--brand); }

  @media (max-width: 900px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(170px, auto); }
    .product-card.featured { grid-column: span 2; grid-row: span 2; flex-direction: column; }
    .product-card.featured .product-thumb { width: 100%; height: 140px; }
    /* Opsi C — begitu layout featured pindah dari row ke column (kartu jadi
       lebih sempit, konten ditumpuk vertikal), pakai nilai TETAP 20px drpd
       melanjutkan clamp() fluid di atas — lebih predictable persis di titik
       layout berubah. */
    .product-card.featured .product-body { padding: 20px; }
  }
  /* Tablet menengah (mis. iPad landscape ~1024px, laptop kecil) — 3 kolom
     drpd langsung 4, supaya kartu tidak terlalu sempit sebelum masuk ke
     breakpoint 2-kolom di atas. */
  @media (min-width: 901px) and (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 560px) {
    .product-grid { grid-template-columns: 1fr; }
    .product-card.featured { grid-column: span 1; }
    .home-topbar-brand span { display: none; }
    .home-search { margin-left: 0; }
    /* Opsi C (lanjutan) — di mobile sempit (1 kolom penuh), turunkan lagi
       supaya padding tidak "memakan" lebar konten pada layar kecil. */
    .product-card.featured .product-body { padding: 16px; }
  }
  /* Layar sangat sempit (HP kecil/landscape) — rapatkan sedikit padding &
     gap topbar + kontainer utama supaya elemen (logo, search, theme-switch)
     tidak mepet/berdesakan di lebar viewport terkecil. */
  @media (max-width: 400px) {
    .home-topbar { padding: 0 14px; gap: 10px; }
    .home-page { padding: 20px 14px 48px; }
    .home-hero { padding: 32px 14px 40px; }
    .product-grid { gap: 10px; }
  }