/* ================================================================
 * TECH CARE — responsive-fix.css  (v8 — surgical rewrite)
 * Definitive responsive layer — loads LAST, wins all conflicts
 * Covers: 320px → 2560px
 * ================================================================ */

/* ── 0. GLOBAL SANITY ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { overflow-x: hidden; scroll-behavior: smooth; }
body  { overflow-x: hidden; max-width: 100vw; }
img   { max-width: 100%; height: auto; display: block; }
video, table { max-width: 100%; }
input, textarea, select { touch-action: manipulation; }

/* ── 1. FLUID CONTAINER ── */
.container {
  width: min(94%, 1200px) !important;
  padding-left:  clamp(12px, 3vw, 24px) !important;
  padding-right: clamp(12px, 3vw, 24px) !important;
  margin: 0 auto !important;
}

/* ── 2. NAVBAR ─────────────────────────────────────────────────── */
header { width: 100% !important; left: 0 !important; }

.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, 1.5vw, 12px) !important;
  padding: clamp(0.65rem, 1.4vw, 1.2rem) 0 !important;
}

.navbar .logo {
  font-size: clamp(0.9rem, 2.8vw, 1.5rem) !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.navbar > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: clamp(6px, 1.2vw, 15px) !important;
  flex-shrink: 0 !important;
}

.navbar .btn {
  padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 20px) !important;
  font-size: clamp(0.72rem, 1.3vw, 0.85rem) !important;
  white-space: nowrap !important;
}

.cart-icon {
  width:  clamp(36px, 4.5vw, 50px) !important;
  height: clamp(36px, 4.5vw, 50px) !important;
  flex-shrink: 0 !important;
}

.user-avatar-nav {
  width:  clamp(32px, 4vw, 45px) !important;
  height: clamp(32px, 4vw, 45px) !important;
  flex-shrink: 0 !important;
}

/* ── 3. TYPOGRAPHY ─────────────────────────────────────────────── */
.section-title    { font-size: clamp(1.25rem, 3.5vw, 2rem)    !important; }
.section-subtitle { font-size: clamp(0.8rem,  1.8vw, 0.95rem) !important; }

/* ── 4. HERO SECTION ───────────────────────────────────────────── */
.home-section {
  padding: clamp(100px, 18vw, 200px) 0 clamp(60px, 10vw, 200px) !important;
}

.home-content { max-width: min(700px, 100%); }

.home-content h1 {
  font-size: clamp(1.5rem, 5vw, 3rem) !important;
  line-height: 1.15 !important;
}

.home-content p {
  font-size: clamp(0.85rem, 1.8vw, 1rem) !important;
}

/* ── 5. CATEGORY PILLS ─────────────────────────────────────────── */
.category-filter-section { overflow: hidden; width: 100%; }


.category-pills-container::-webkit-scrollbar { display: none; }

.category-pill {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(0.7rem, 1.2vw, 0.85rem) !important;
  padding: clamp(6px, 1vw, 9px) clamp(10px, 1.8vw, 16px) !important;
}

/* ── 6. PRODUCT CONTROLS BAR ───────────────────────────────────── */
.produk-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: clamp(12px, 2vw, 24px) !important;
}

.produk-count {
  font-size: clamp(0.78rem, 1.4vw, 0.92rem) !important;
  flex-shrink: 0;
}

.sort-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}

.sort-controls select {
  font-size: clamp(0.75rem, 1.3vw, 0.88rem) !important;
  padding: clamp(5px, 0.8vw, 8px) clamp(8px, 1.2vw, 12px) !important;
  max-width: clamp(130px, 30vw, 220px) !important;
  min-width: 0 !important;
}

/* ── 7. PRODUCT GRID ───────────────────────────────────────────── */
.produk-section { padding: clamp(50px, 8vw, 100px) 0 !important; }

/* Default: 2 columns */
.produk-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(10px, 2vw, 24px) !important;
  align-items: stretch !important;
  justify-content: center !important;
}

@media (min-width: 640px) {
  .produk-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .produk-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 320px)) !important;
  }
}

/* ── 8. PRODUCT CARD ───────────────────────────────────────────── */
.produk-card {
  width: 100% !important;
  min-height: unset !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

.produk-image {
  height: clamp(140px, 28vw, 260px) !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0;
}

.card-deck {
  width:  clamp(80px, 14vw, 140px) !important;
  height: clamp(96px, 17vw, 165px) !important;
  position: relative !important;
  flex-shrink: 0;
}

.deck-card {
  width:  clamp(68px, 12vw, 120px) !important;
  height: clamp(82px, 14.5vw, 150px) !important;
  margin-left: calc(clamp(68px, 12vw, 120px) / -2) !important;
  margin-top:  calc(clamp(82px, 14.5vw, 150px) / -2) !important;
}

.produk-info {
  padding: clamp(8px, 1.5vw, 16px) !important;
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(4px, 0.8vw, 8px) !important;
}

.produk-card h3 {
  font-size: clamp(0.72rem, 1.5vw, 1rem) !important;
  line-height: 1.3 !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.6em;
}

.produk-card .deskripsi {
  font-size: clamp(0.65rem, 1.2vw, 0.82rem) !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: #6b7280;
  margin-bottom: 0 !important;
}

.produk-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.price-final {
  font-size: clamp(0.82rem, 1.8vw, 1.15rem) !important;
  font-weight: 700;
}

.price-original {
  font-size: clamp(0.65rem, 1.1vw, 0.82rem) !important;
}

.stok-info {
  font-size: clamp(0.65rem, 1.1vw, 0.8rem) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Image swatch picker */
.img-pick-row { overflow: hidden; width: 100%; }

.img-pick-label {
  font-size: clamp(0.65rem, 1.1vw, 0.78rem) !important;
  gap: 4px !important;
  margin-bottom: 5px !important;
}

.img-pick-swatches {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: clamp(4px, 0.8vw, 8px) !important;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.img-pick-swatches::-webkit-scrollbar { display: none; }

.img-pick-swatch {
  width:  clamp(36px, 7vw, 54px) !important;
  height: clamp(36px, 7vw, 54px) !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
}

.produk-actions { margin-top: auto !important; }

.produk-actions .tambah-keranjang,
.produk-actions .btn-disabled {
  width: 100% !important;
  font-size: clamp(0.65rem, 1.3vw, 0.85rem) !important;
  padding: clamp(8px, 1.2vw, 12px) clamp(8px, 1.5vw, 14px) !important;
  justify-content: center !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.badge {
  font-size: clamp(0.58rem, 1vw, 0.78rem) !important;
  padding: clamp(2px, 0.4vw, 5px) clamp(5px, 0.8vw, 10px) !important;
  white-space: nowrap !important;
}

/* ── 9. TESTIMONIALS ───────────────────────────────────────────── */
.testimoni-section {
  padding: clamp(50px, 7vw, 100px) 0 !important;
}

/* Base card — moved from inline HTML */
.testimoni-card {
  background: white !important;
  border-radius: var(--radius, 16px) !important;
  padding: clamp(1.2rem, 2.5vw, 2rem) !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07) !important;
  border-top: 4px solid var(--primary, #3a86ff) !important;
  display: flex !important;
  flex-direction: column !important;
  /* CRITICAL: do NOT set overflow:hidden — it clips the quote ::before decoration */
  overflow: visible !important;
}

/* Quote mark pseudo element needs space */
.testimoni-card p {
  position: relative;
  padding-top: clamp(16px, 3vw, 24px);
  font-size: clamp(0.78rem, 1.4vw, 0.95rem) !important;
  line-height: 1.6 !important;
  color: #555;
}

/* Rating stars */
.testimoni-card .rating {
  display: flex;
  gap: 4px;
  margin-bottom: clamp(8px, 1.5vw, 16px) !important;
  font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
  flex-wrap: nowrap;
}

/* Author row */
.testimoni-author {
  display: flex !important;
  align-items: center !important;
  gap: clamp(10px, 1.5vw, 15px) !important;
  flex-wrap: nowrap !important;
  margin-top: auto !important;
  padding-top: clamp(0.8rem, 1.5vw, 1.5rem) !important;
  border-top: 1px solid #e9ecef !important;
}

.testimoni-author h4 {
  font-size: clamp(0.78rem, 1.3vw, 0.95rem) !important;
  margin: 0 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimoni-author small,
.testimoni-author p {
  font-size: clamp(0.68rem, 1.1vw, 0.82rem) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Avatar circle */
.testimoni-author .user-avatar {
  width:  clamp(38px, 5vw, 50px) !important;
  height: clamp(38px, 5vw, 50px) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  font-size: clamp(1rem, 1.8vw, 1.5rem) !important;
}

/* The testimoni grid — overrides all inline styles */
.testimoni-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
  gap: clamp(16px, 2.5vw, 28px) !important;
}

/* ── 10. ABOUT / FEATURES ──────────────────────────────────────── */
.about-section { padding: clamp(50px, 7vw, 100px) 0 !important; }

.features-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  margin-top: clamp(1.5rem, 3vw, 3rem) !important;
}

.feature {
  padding: clamp(1.2rem, 2.5vw, 2rem) clamp(0.8rem, 2vw, 1.2rem) !important;
  text-align: center !important;
  /* do NOT overflow:hidden — ruins glassmorphism bg */
}

.feature i { font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important; }
.feature h4 { font-size: clamp(0.9rem, 1.8vw, 1.2rem)  !important; }
.feature p  { font-size: clamp(0.78rem, 1.4vw, 1rem)   !important; }

/* ── 11. CONTACT ───────────────────────────────────────────────── */
.kontak-section { padding: clamp(50px, 7vw, 100px) 0 !important; }

.kontak-form {
  padding: clamp(1.2rem, 3vw, 2rem) !important;
  max-width: min(650px, 100%) !important;
  margin: 0 auto clamp(1.5rem, 3vw, 3rem) !important;
  width: 100% !important;
}

.kontak-form input,
.kontak-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── 12. FOOTER ────────────────────────────────────────────────── */
footer, footer.footer {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(40px, 6vw, 60px) 0 clamp(20px, 3vw, 40px) !important;
}

.footer-container {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1.2fr !important;
  gap: clamp(20px, 3vw, 50px) !important;
  padding: 0 clamp(16px, 3vw, 24px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.footer-brand p { max-width: 100%; }

.footer-links h4,
.footer-contact h4 {
  font-size: clamp(0.82rem, 1.4vw, 0.95rem) !important;
}

.footer-links a {
  font-size: clamp(0.78rem, 1.3vw, 0.92rem) !important;
}

.footer-bottom p {
  font-size: clamp(0.72rem, 1.1vw, 0.85rem) !important;
}

/* ── 13. OVERLAY / SIDEBAR ─────────────────────────────────────── */
.nav-drawer-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1199;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.nav-drawer-overlay.is-open {
  display: block;
  opacity: 1; pointer-events: auto;
}

.logo-sidebar {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 250px;
  height: 100vh;
  background: #ffffff;
  z-index: 1200;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.logo-sidebar.is-open { transform: translateX(0); }

/* ── 14. CART SIDEBAR ──────────────────────────────────────────── */
.cart-sidebar { max-width: 100vw; }

/* ================================================================
 * BREAKPOINTS
 * ================================================================ */

/* ── TABLET ≤ 1024px ── */
@media (max-width: 1024px) {
  .features-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(20px, 3vw, 35px) !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }

  .footer-brand p {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-links { padding-left: 0 !important; }

  /* Other pages */
  .checkout-wrapper { grid-template-columns: 1fr !important; }
  .checkout-summary-card { position: relative !important; top: auto !important; }
  .review-wrapper { grid-template-columns: 1fr !important; }
  .payment-card { position: relative !important; top: auto !important; }
  .od-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .product-detail-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── MOBILE ≤ 768px ── */
@media (max-width: 768px) {

  /* Sidebar on, desktop nav off */
  .nav-drawer-overlay { display: block; }
  .logo-sidebar { display: flex; }
  .logo { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
  .nav-menu { display: none !important; }
  .nav-username { display: none !important; }

  /* Hero */
  .home-content { max-width: 100%; text-align: center; }
  .home-content .logo { display: none !important; }
  .home-content h1 { font-size: clamp(1.4rem, 5.5vw, 2.2rem) !important; }

  /* Products */
  .produk-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Category pills */
  .category-pills-container {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  /* ── TESTIMONI — single column, full readable cards ── */
  .testimoni-grid,
  .testimoni-section .testimoni-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 3vw, 22px) !important;
  }

  .testimoni-card {
    padding: clamp(1rem, 3.5vw, 1.6rem) !important;
    /* Ensure card doesn't clip quote mark */
    overflow: visible !important;
  }

  .testimoni-card p {
    font-size: clamp(0.8rem, 2.2vw, 0.92rem) !important;
  }

  .testimoni-author {
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(10px, 2.5vw, 14px) !important;
  }

  /* ── ABOUT — 2-col grid stays on tablet, fine ── */
  .features-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(12px, 2.5vw, 20px) !important;
  }

  /* ── FOOTER — single column, centred ── */
  .footer-container {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: clamp(24px, 4vw, 36px) !important;
    padding: 0 clamp(16px, 4vw, 28px) !important;
  }

  .footer-brand,
  .footer-links,
  .footer-contact {
    text-align: center !important;
    grid-column: auto !important; /* reset the 1/-1 span from ≤1024px */
  }

  .footer-brand p {
    text-align: center !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
  }

  .footer-links { padding-left: 0 !important; }

  .footer-links h4::after,
  .footer-contact h4::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .footer-links a { text-align: center !important; }
  .footer-links a:hover { padding-left: 0 !important; }
  .footer-links a::before { display: none !important; }

  .footer-contact .contact-row {
    justify-content: center !important;
  }

  /* ── CONTACT FORM ── */
  .kontak-form {
    padding: clamp(1rem, 4vw, 1.6rem) clamp(1rem, 4vw, 1.4rem) !important;
  }

  /* ── Cart / checkout ── */
  .cart-sidebar { width: 100vw !important; right: -100vw !important; }
  .cart-sidebar.active { right: 0 !important; }
  .notification-dropdown { width: min(340px, calc(100vw - 20px)) !important; right: -10px !important; }
  .cart-container { grid-template-columns: 1fr !important; }
  .cart-right { position: static !important; }
  .form-row-2col { grid-template-columns: 1fr !important; }
  .checkout-wrapper { grid-template-columns: 1fr !important; }

  /* ── Order ── */
  .info-row { grid-template-columns: 1fr !important; gap: 0.2rem; }
  .progress-tracker { flex-wrap: wrap; gap: 10px; }
  .progress-line { width: clamp(24px, 5vw, 40px); }
  .od-action-buttons { flex-direction: column; align-items: center; }
  .od-btn-outline, .od-btn-primary { width: 100%; max-width: 300px; justify-content: center; }
  .od-payment-image-box { width: 100%; }
  .od-cards-grid { grid-template-columns: 1fr !important; }
  .od-products-row {
    grid-template-columns: 1fr !important; gap: 6px; padding: 12px;
    background: #f9fafb; border-radius: 8px; margin-bottom: 10px;
    border: 1px solid #e5e7eb;
  }
  .od-products-row.header { display: none; }
  .od-col-name { flex-direction: column; align-items: flex-start; gap: 6px; }
  .od-col-price, .od-col-qty, .od-col-total { display: flex; justify-content: space-between; text-align: left; }
  .od-col-price::before  { content: 'Harga: ';  color: #6b7280; font-size: 12px; }
  .od-col-qty::before    { content: 'Jumlah: '; color: #6b7280; font-size: 12px; }
  .od-col-total::before  { content: 'Total: ';  color: #6b7280; font-size: 12px; }

  /* ── Dashboard ── */
  .welcome-banner { flex-direction: column !important; text-align: center; }
  .welcome-graphic { margin-left: 0 !important; margin-top: 1rem; }
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .info-grid { grid-template-columns: 1fr !important; }
  .action-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .action-buttons { flex-direction: column; }
  .btn-outline-edit, .btn-primary-shop { width: 100%; justify-content: center; }

  /* ── Edit profile ── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-actions { flex-direction: column; gap: 10px; }
  .form-actions .btn-save, .form-actions .btn-cancel { width: 100%; justify-content: center; }

  /* ── Auth ── */
  .auth-left { display: none !important; }
  .auth-right { padding: clamp(1.6rem, 4vw, 2.5rem) clamp(1.2rem, 4vw, 2rem) !important; }

  /* ── Product detail ── */
  .product-detail-grid { grid-template-columns: 1fr !important; }

  /* ── General overflow guard (EXCLUDE testimoni-card and feature) ── */
  section,
  .produk-card,
  .kontak-form,
  .dashboard-card,
  .stat-card,
  .order-card {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ── SMALL MOBILE ≤ 540px ── */
@media (max-width: 540px) {

  .produk-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .produk-image { height: clamp(120px, 32vw, 180px) !important; }

  .card-deck {
    width:  clamp(72px, 18vw, 110px) !important;
    height: clamp(86px, 22vw, 130px) !important;
  }

  .deck-card {
    width:  clamp(60px, 16vw, 96px) !important;
    height: clamp(72px, 19vw, 115px) !important;
    margin-left: clamp(-30px, -8vw, -48px) !important;
    margin-top:  clamp(-36px, -9.5vw, -57px) !important;
  }

  .sort-controls label { display: none !important; }

  /* Testimoni still 1 col, slightly tighter padding */
  .testimoni-card {
    padding: clamp(0.9rem, 3.5vw, 1.4rem) !important;
  }

  .notification-dropdown {
    width: calc(100vw - 14px) !important;
    right: -7px !important;
  }

  /* Cart */
  .cart-item { flex-direction: column; gap: 12px; }
  .item-footer { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .qty-elegant-ctrl { width: 100% !important; justify-content: space-between !important; }

  /* iOS input zoom */
  .form-group input, .form-group textarea, .form-group select,
  .kontak-form input, .kontak-form textarea,
  .auth-form input, .input-wrap input {
    font-size: 16px !important;
  }
}

/* ── MINIMUM PHONE ≤ 375px ── */
@media (max-width: 375px) {

  .container { padding: 0 10px !important; }
  .logo { font-size: 0.88rem !important; }
  .home-content h1 { font-size: 1.35rem !important; }
  .section-title { font-size: 1.1rem !important; }

  .produk-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .produk-image { height: clamp(100px, 30vw, 140px) !important; }
  .produk-card h3 { font-size: 0.66rem !important; }
  .produk-card .deskripsi { font-size: 0.58rem !important; }

  .produk-actions .tambah-keranjang,
  .produk-actions .btn-disabled {
    font-size: 0.6rem !important;
    padding: 6px !important;
  }

  .img-pick-swatch {
    width:  clamp(28px, 8vw, 40px) !important;
    height: clamp(28px, 8vw, 40px) !important;
  }

  /* Footer */
  .footer-container { padding: 0 8px !important; gap: 16px !important; }

  /* Dashboard stats */
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .stat-card { padding: 0.65rem !important; }
  .stat-number { font-size: 0.78rem !important; }
  .stat-label  { font-size: 0.55rem !important; }
}

/* ── MINIMUM PHONE ≤ 320px ── */
@media (max-width: 320px) {
  .produk-grid { gap: 4px !important; }
  .features-container { grid-template-columns: repeat(2, 1fr) !important; }
  .testimoni-grid { grid-template-columns: 1fr !important; }
  .footer-container { padding: 0 6px !important; gap: 14px !important; }
}

/* ── WIDE SCREENS ≥ 1440px ── */
@media (min-width: 1440px) {
  .produk-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 320px)) !important;
  }
}

/* ── ULTRA WIDE ≥ 1920px ── */
@media (min-width: 1920px) {
  .container { max-width: 1400px !important; }
  .produk-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px)) !important;
  }
}

/* ================================================================
 * PRINT
 * ================================================================ */
@media print {
  .nav-menu, .cart-icon, .cart-sidebar, .cart-overlay,
  footer, .admin-sidebar, .logo-sidebar, .nav-drawer-overlay {
    display: none !important;
  }
  body { font-size: 12pt; color: #000; }
  .dashboard-card, .order-card, .produk-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

@media (max-width: 768px) {

    .category-pills-container {
        display: flex;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .category-pills-container::-webkit-scrollbar {
        display: none;
    }

}