/* =============================================================
   SUMB — Responsive Breakpoints
   Desktop-first overrides for tablet & mobile
   ============================================================= */

/* ---------- Large tablets / small desktops ---------- */
@media (max-width:1200px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .category-grid{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ---------- Tablets ---------- */
@media (max-width:992px){
  :root{ --nav-height:68px; }

  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }

  /* This rule was missing entirely: JS was toggling this class (and
     locking body scroll) with nothing defined to show, which is why
     the menu looked "frozen" — tap opened it, page scroll locked,
     but no panel ever appeared. */
  .nav-links.mobile-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    position:fixed;
    top:var(--nav-height);
    right:0;
    left:0;
    bottom:0;
    background:#fff;
    padding:8px 24px 24px;
    overflow-y:auto;
    z-index:1200;
    box-shadow:0 16px 30px rgba(0,0,0,.12);
  }
  .nav-links.mobile-open a{
    width:100%;
    padding:16px 0;
    border-bottom:1px solid var(--color-border);
    font-size:16px;
  }
  .nav-links.mobile-open a::after{ display:none; }

  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero-content p{ margin-inline:auto; }
  .hero-actions{ justify-content:center; }
  .hero-stats{ justify-content:center; }
  .hero-visual{ margin-top:40px; }
  .hero-badge{ display:none; }

  .shop-layout,.cart-layout,.checkout-layout,.contact-grid{ grid-template-columns:1fr; }
  .filters{ position:static; margin-bottom:24px; }
  .summary-card{ position:static; }

  .product-detail{ grid-template-columns:1fr; gap:32px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-grid.reverse .about-media{ order:-1; }

  .testimonial-track{ grid-template-columns:repeat(2,1fr); }
  .stats-strip{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .value-grid{ grid-template-columns:1fr 1fr; }

  .mini-cart{ width:100%; }
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .container{ padding:0 16px; }
  .section{ padding:56px 0; }

  .topbar{ display:none; }

  .navbar .container{ gap:10px; }
  .logo{ font-size:20px; }
  .nav-actions{ gap:8px; }

  .hero{ min-height:auto; padding:60px 0 90px; }
  .hero-content h1{ font-size:34px; }
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .hero-stats{ gap:20px; flex-wrap:wrap; }

  .section-head{ flex-direction:column; align-items:flex-start; }

  .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .product-info{ padding:12px; }
  .price-now{ font-size:16px; }

  .category-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .feature-grid{ grid-template-columns:1fr; }

  .offer-banner{ flex-direction:column; text-align:center; padding:40px 24px; }
  .countdown{ justify-content:center; }

  .testimonial-track{ grid-template-columns:1fr; }
  .newsletter{ padding:36px 22px; }
  .newsletter-form{ flex-direction:column; }

  .footer-grid{ grid-template-columns:1fr; gap:32px; text-align:center; }
  .social-row{ justify-content:center; }
  .footer-brand p{ margin-inline:auto; }
  .footer-bottom{ flex-direction:column; text-align:center; }

  .form-grid{ grid-template-columns:1fr; }
  .payment-methods{ grid-template-columns:1fr; }

  .cart-item{ grid-template-columns:72px 1fr; grid-template-areas:"img info" "img actions"; }
  .cart-item img{ grid-area:img; width:72px; height:72px; }
  .cart-item-info{ grid-area:info; }

  .pd-actions{ flex-direction:column; }

  .stats-strip{ grid-template-columns:1fr 1fr; }
  .value-grid{ grid-template-columns:1fr; }

  .auth-card{ padding:32px 24px; }

  .toast-stack{ left:12px; right:12px; top:auto; bottom:20px; }
  .toast{ min-width:0; width:100%; }

  /* Account dashboard / order tracking / policy pages */
  .dash-panel{ padding:20px; min-height:0; }
  .track-result{ padding:20px; }
  .track-form{ padding:18px; }
  .track-order-head{ margin-bottom:24px; padding-bottom:16px; }
  .policy-block{ padding:20px; }
  .order-modal{ padding:20px; }
  .orders-table th,.orders-table td{ padding:10px 8px; }
  .timeline{ margin-bottom:28px; }

  /* Orders list: swap the overflow-scroll table for stacked cards so
     payment/order status and the details button are always visible
     without a hidden horizontal scroll (see account.css). */
  #ordersWrap .table-scroll{ display:none; }
  #ordersWrap .orders-cards{ display:block; }
}

/* ---------- Small phones ---------- */
@media (max-width:380px){
  .hero-content h1{ font-size:28px; }
  .product-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .category-grid{ grid-template-columns:1fr; }
}