/* ==========================================================================
   MERIDIAN — Responsive rules
   Mobile-first overrides layered on top of style.css, largest breakpoint down.
   ========================================================================== */

/* ------------------------------ Laptop (<=1180px) -------------------------- */
@media (max-width: 1180px){
  .category-grid{ grid-template-columns: repeat(4, 1fr); }
  .product-grid{ grid-template-columns: repeat(4, 1fr); }
  .feature-grid{ grid-template-columns: repeat(3, 1fr); }
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-top .footer-col.newsletter-col{ grid-column: 1 / -1; }
}

/* ------------------------------ Tablet (<=980px) --------------------------- */
@media (max-width: 980px){
  :root{ --header-h: 68px; }

  .main-nav{ display: none; }
  .menu-toggle{ display: grid; place-items: center; }

  .hero-inner{ grid-template-columns: 1fr; text-align: center; padding-block: var(--sp-xl); }
  .hero-copy{ order: 1; }
  .hero-visual{ order: 0; max-width: 420px; margin-inline: auto; width: 100%; }
  .hero-desc{ margin-inline: auto; }
  .hero-ctas{ justify-content: center; }
  .hero-stats{ justify-content: center; }
  .hero-badge-card{ left: 50%; transform: translateX(-50%); bottom: -16px; }

  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .values-grid{ grid-template-columns: 1fr; }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-strip{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }

  .promo-banner{ grid-template-columns: 1fr; }
  .promo-image{ min-height: 220px; order: -1; }

  .flash-sale{ flex-direction: column; align-items: flex-start; }
  .category-strip-item{ width: 78px; }
  .category-strip-item .strip-icon{ width: 56px; height: 56px; }

  .newsletter{ flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-form{ min-width: 0; }

  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }

  .shop-layout{ grid-template-columns: 1fr; }
  .filters-panel{ display: none; }
  .filters-panel.is-open{
    display: block; position: fixed; inset: 0; z-index: 400; overflow-y: auto;
    border-radius: 0; top: 0; padding: var(--sp-md);
  }
  .mobile-filter-btn{ display: inline-flex; }

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

  .product-detail{ grid-template-columns: 1fr; }

  .cart-layout{ grid-template-columns: 1fr; }
  .cart-summary{ position: static; }

  .policy-layout{ grid-template-columns: 1fr; }
  .toc-panel{ position: static; margin-bottom: var(--sp-lg); }

  .review-summary{ flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
}

/* ------------------------------ Mobile (<=640px) ---------------------------- */
@media (max-width: 640px){
  :root{ --sp-2xl: 3rem; --sp-3xl: 4rem; }

  .announce-track{ gap: var(--sp-md); }
  .announce-track span:not(:first-child){ display: none; }

  .hero-title{ font-size: var(--fs-2xl); }
  .hero-ctas{ flex-direction: column; width: 100%; }
  .hero-ctas .btn{ width: 100%; }
  .hero-stats{ flex-wrap: wrap; gap: var(--sp-md); }

  .section-head{ flex-direction: column; align-items: flex-start; }
  .section-title{ font-size: var(--fs-xl); }

  .category-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
  .feature-grid{ grid-template-columns: 1fr 1fr; }
  .team-grid{ grid-template-columns: 1fr 1fr; }
  .contact-info-grid{ grid-template-columns: 1fr; }
  .stats-strip{ grid-template-columns: 1fr 1fr; }

  .promo-copy{ padding: var(--sp-lg); }
  .promo-copy h2{ font-size: var(--fs-xl); }

  .flash-sale{ padding: var(--sp-md); }
  .countdown-unit{ min-width: 46px; padding: 6px 8px; }
  .countdown-unit strong{ font-size: var(--fs-md); }

  .footer-top{ grid-template-columns: 1fr; gap: var(--sp-lg); }
  .footer-bottom{ flex-direction: column; gap: var(--sp-sm); text-align: center; }

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

  .pd-actions-row{ flex-direction: column; }
  .pd-actions-row .btn{ width: 100%; }

  .cart-item{ grid-template-columns: 64px 1fr; grid-template-areas: "img name" "img controls" "img total"; }
  .cart-item img{ width: 64px; height: 64px; grid-area: img; }
  .cart-item-name-block{ grid-area: name; }
  .cart-item-controls{ grid-area: controls; }
  .cart-item-total{ grid-area: total; text-align: left; }

  .newsletter-form{ flex-direction: column; }

  .error-page .code{ font-size: 5.5rem; }
}

/* No horizontal scroll safety net */
@media (max-width: 480px){
  .container{ padding-inline: var(--sp-sm); }
  .drawer-panel{ width: 100vw; }
}

/* ============================================================================
   ACCOUNT / AUTH / CHECKOUT / ORDERS — responsive overrides
   ============================================================================ */
@media (max-width: 980px){
  .account-name{ display: none; }
  .cart-preview{ width: 300px; }
  .dashboard-layout{ grid-template-columns: 1fr; }
  .dashboard-sidebar{ position: static; }
  .dashboard-nav{ flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .dashboard-nav a{ flex: 0 0 auto; white-space: nowrap; }
  .dashboard-nav .nav-sep{ display: none; }
  .stat-grid{ grid-template-columns: repeat(3, 1fr); }
  .checkout-layout{ grid-template-columns: 1fr; }
  .payment-methods{ grid-template-columns: 1fr; }
  .tracking-summary-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .auth-card{ padding: var(--sp-lg) var(--sp-md); }
  .cart-preview{ position: fixed; top: var(--header-h); right: 8px; left: 8px; width: auto; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr); }
  .checkout-steps{ gap: 4px; }
  .checkout-step span{ display: none; }
  .checkout-step-line{ width: 24px; }
  .order-card-head{ flex-direction: column; align-items: flex-start; }
  .order-card-foot{ flex-direction: column; align-items: flex-start; }
  .order-filters{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .dash-welcome{ flex-direction: column; align-items: flex-start; }
  .tracking-lookup{ flex-direction: column; }
  .avatar-upload{ flex-direction: column; align-items: flex-start; }
}