/* ========================================
   FILE: frontend/css/responsive.css
   ======================================== */

/* ── Mobile First Base (< 640px) ──────────────────────────────────────────── */
.hide-mobile { display: none !important; }
.show-mobile { display: block; }

.container { padding: 0 var(--space-md); }

.section { padding: var(--space-2xl) 0; }
.section-title { font-size: var(--font-size-xl); }

/* ── Small tablets (≥ 640px) ──────────────────────────────────────────────── */
@media (min-width: 640px) {
  .container { padding: 0 var(--space-lg); }

  .form-grid-2 { grid-template-columns: repeat(2, 1fr); }

  .products-slider-track .product-card { width: 240px; }

  .otp-inputs { gap: var(--space-md); }
  .otp-input { width: 52px; height: 60px; font-size: var(--font-size-2xl); }
}

/* ── Tablets (≥ 768px) ────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .hide-mobile { display: block !important; }
  .show-mobile { display: none; }

  .container { padding: 0 var(--space-xl); }

  .section { padding: var(--space-3xl) 0; }
  .section-title { font-size: var(--font-size-2xl); }

  /* Hero */
  .hero-slide-content { padding: 0 var(--space-3xl); }

  /* Category grid */
  .category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
  }
  .category-card:nth-child(1) { grid-row: auto; aspect-ratio: 1; }

  /* Products grid */
  .products-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

  /* UGC */
  .ugc-grid { grid-template-columns: repeat(6, 1fr); }

  /* Trust badges */
  .trust-badges-grid { grid-template-columns: repeat(4, 1fr); }

  /* Cart drawer full-width on large mobile */
  #cart-drawer { width: 420px; }

  /* Account mobile tabs → sidebar on tablet+ */
  .account-mobile-tabs { display: none; }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr; }
}

/* ── Desktop (≥ 1024px) ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .container { padding: 0 var(--space-2xl); }

  /* Navbar */
  .navbar-nav { display: flex; }
  .mobile-hamburger { display: none; }

  /* Product page */
  .product-layout { grid-template-columns: 55% 1fr; gap: var(--space-3xl); }
  .product-sticky-bar { display: none; }

  /* Collection */
  .collection-layout { grid-template-columns: 260px 1fr; }
  .filter-fab { display: none; }
  .products-grid { grid-template-columns: repeat(3, 1fr); }

  /* Checkout */
  .checkout-layout { grid-template-columns: 1fr 380px; }

  /* Account */
  .account-layout { grid-template-columns: 260px 1fr; }
}

/* ── Wide desktop (≥ 1280px) ──────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-3xl); }
  .products-grid { grid-template-columns: repeat(4, 1fr); }
  .products-slider-track .product-card { width: 280px; }
}

/* ── Touch / hover adjustments ────────────────────────────────────────────── */

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
  #navbar, #footer, #cart-drawer, #cart-overlay,
  #mobile-drawer, #mobile-overlay, .hero-carousel,
  .product-sticky-bar, .filter-fab { display: none !important; }
  body { padding: 0; }
  .page-wrapper { padding-top: 0; }
}