/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .prod-grid, .skeleton-grid { grid-template-columns: repeat(3, 1fr) }
  .info-strip-inner { grid-template-columns: repeat(2, 1fr) }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr }
  /* Kolom Artikel (M19) di-drop duluan di lebar ini supaya kolom Info
     (Cara Order/FAQ/Retur/Syarat, konten penting) tidak ikut ketutup —
     ditarget by-id, bukan :last-child, biar tidak ikut nyembunyiin kolom
     lain kalau urutan DOM berubah lagi nanti. */
  #footer-articles-col { display: none }
  .hero-float { display: none }
}
@media (max-width: 900px) {
  .prod-grid, .skeleton-grid { grid-template-columns: repeat(2, 1fr) }
  .nav-links { display: none }
  .btn-wa { display: none }
  .hamburger { display: flex }
  .footer-grid { grid-template-columns: 1fr 1fr }

  /* Mobile nav fixes */
  .nav-actions { gap: 8px }

  /* Cart button - icon only, perfectly centered */
  .btn-cart {
    padding: 0;
    width: 48px;
    height: 48px;
    font-size: 0 !important;        /* Hide text "Keranjang" */
    line-height: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
  }
  .btn-cart svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    display: block;                 /* Make sure SVG shows */
  }
  .btn-cart .cbadge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hamburger - prevent cutoff */
  .hamburger {
    padding: 10px;
    min-width: 44px;
    justify-content: center;
  }

  /* Login button - icon only, matches cart button (frees up space so hamburger isn't pushed off-screen) */
  .btn-login {
    padding: 0;
    width: 44px;
    height: 44px;
    font-size: 0 !important;
    line-height: 0;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0;
  }
  .btn-login svg { flex-shrink: 0; margin: 0; display: block }
}
@media (max-width: 600px) {
  .prod-grid, .skeleton-grid { grid-template-columns: repeat(2, 1fr) }
  .prod-grid { gap: 10px }
  .info-strip-inner { grid-template-columns: 1fr 1fr; gap: 12px }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px }
  .footer-grid > *:first-child { grid-column: 1 / -1 }
  footer { padding: 36px 16px 24px }
  .usp-strip-inner { justify-content: flex-start; gap: 0; flex-wrap: nowrap; overflow-x: auto }
  .usp-divider { display: none }
  .sort-bar { gap: 8px }
  .hero-cta { flex-direction: column; gap: 10px }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center }
  .hero { min-height: 75vh }
  .hero-content { padding: 48px 16px }
  .hero-stat-divider { display: none }
  .hero-stats { gap: 16px }
  .products-inner { padding: 24px 16px 40px }
  nav { padding: 0 16px }
}
@media (max-width: 400px) {
  .prod-grid, .skeleton-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
  .hero-content { padding: 36px 12px }
  .hero-heading { font-size: clamp(28px, 9vw, 48px) }
  .hero-stats { flex-wrap: wrap; gap: 10px }
}