/* ==========================================================================
   Responsive rules — mobile-first overrides layered on style.css
   Breakpoints: 1080 (small desktop) / 900 (tablet) / 600 (mobile)
   ========================================================================== */

@media (max-width: 1080px){
  .grid-4{ grid-template-columns: repeat(3, 1fr); }
  .delivery-grid{ grid-template-columns: repeat(2, 1fr); }
  .delivery-item:nth-child(2){ border-right: none; }
  .footer-top{ grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-top .footer-col:last-child{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  .pd-grid{ grid-template-columns: 1fr; gap: 32px; }
  .pd-gallery{ position: static; }
  .checkout-grid{ grid-template-columns: 1fr; }
  .order-summary-card{ position: static; }
  .container{ padding: 0 20px; }
  .nav-links{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .hero .container{ grid-template-columns: 1fr; text-align: center; }
  .hero-copy p.lead{ margin-left: auto; margin-right: auto; }
  .hero-cta{ justify-content: center; }
  .hero-stats{ justify-content: center; }
  .hero-art{ max-width: 420px; margin: 0 auto; }
  .grid-4, .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .about-grid{ grid-template-columns: 1fr; }
  .about-grid .hero-art{ order: -1; }
  .value-list{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand{ grid-column: 1 / -1; }
  .timeline{ grid-template-columns: 1fr; }
  .newsletter{ flex-direction: column; text-align: center; padding: 40px 28px; }
  .newsletter-form{ width: 100%; }
  .trust-strip .container{ justify-content: center; }
}

/* ---- Mobile nav drawer (JS toggles .nav-open on body) ---- */
@media (max-width: 900px){
  .nav-links{
    display: flex; flex-direction: column; position: fixed; top: var(--nav-height); left: 0; right: 0;
    background: var(--white); padding: 20px 24px 28px; gap: 4px; border-bottom: 1px solid var(--gray-mid);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all .22s ease; box-shadow: var(--shadow-md);
  }
  body.nav-open .nav-links{ transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a{ padding: 12px 4px; border-bottom: 1px solid var(--gray-light); width: 100%; }
  .nav-toggle.active span{ background: transparent; }
  .nav-toggle.active span::before{ transform: rotate(45deg); top: 0; }
  .nav-toggle.active span::after{ transform: rotate(-45deg); top: 0; }
}

@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .section--tight{ padding: 40px 0; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .product-body{ padding: 14px; }
  .product-name{ font-size: 14px; }
  .price{ font-size: 16px; }
  .product-actions{ flex-direction: column; }
  .filters-bar{ flex-direction: column; align-items: stretch; }
  .filter-chips{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .delivery-grid{ grid-template-columns: 1fr; }
  .delivery-item{ border-right: none !important; border-bottom: 1px solid var(--gray-mid); }
  .delivery-item:last-child{ border-bottom: none; }
  .footer-top{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .cart-drawer{ width: 100%; }
  .hero-stats{ gap: 20px; flex-wrap: wrap; }
  .stat-strip{ flex-wrap: wrap; gap: 20px; }
  .stat-strip div{ flex: 1 1 40%; }
  .value-item{ flex-direction: column; }
  .confirm-details{ display: block; width: 100%; padding: 20px; }
  .confirm-details div{ gap: 12px; }
  .pd-actions{ flex-direction: column; }
  .pd-trust-list{ grid-template-columns: 1fr; }
  .pd-price-row .price{ font-size: 26px; }
}

@media (max-width: 420px){
  .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr 1fr; }
  .hero-copy h1{ font-size: 30px; }
  .newsletter-form{ flex-direction: column; }
}