/* Desktop-first responsive overrides. Breakpoints: 1024px, 768px */

@media (max-width: 1024px) {
  :root {
    --fs-3xl: 3rem;
    --fs-2xl: 2.25rem;
  }

  .hero-grid { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
  .product-detail { gap: var(--space-6); }
}

@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-2xl: 1.875rem;
    --fs-xl: 1.5rem;
    --header-height: 64px;
  }

  .container { padding-inline: var(--space-4); }

  .nav-toggle { display: flex; }

  /* `position: fixed` here used to be anchored to the viewport, but a fixed
     descendant of a `position: sticky` header can get miscomputed once the
     header is in its stuck state (nav-links ends up positioned as if it
     scrolled away with the page instead of staying put). `.site-header` is
     itself `position: sticky` and reliably pinned to the top, so anchoring
     the panel to IT with `position: absolute` sidesteps the fixed-in-sticky
     case entirely while landing in the same place. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: calc(100vh - var(--header-height));
    background: var(--color-surface);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
  }

  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: var(--fs-md); width: 100%; padding-block: var(--space-3); }

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

  .hero-grid { grid-template-columns: 1fr; }
  .hero-image { order: -1; }
  .hero p.lead { max-width: 100%; }

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

  .about-row { grid-template-columns: 1fr; gap: var(--space-5); }
  .about-row.reverse .about-row-media { order: -1; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .contact-info-grid { grid-template-columns: 1fr; }

  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); }
  .cart-table td { border: none; padding-block: var(--space-1); }
  .cart-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }

  .cart-summary { position: static; margin-top: var(--space-6); }

  .product-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); }

  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; margin-top: var(--space-6); }

  .contact-info-grid { grid-template-columns: 1fr; }

  .hero { padding-block: var(--space-7) var(--space-6); }
  .section { padding-block: var(--space-6); }
  .related-products, .product-long-description { margin-top: var(--space-7); }

  .qty-selector button { width: 44px; height: 44px; }
  .filter-btn { padding: 11px 18px; }

  .account-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .account-tab { white-space: nowrap; }
}

/* Small phones */
@media (max-width: 420px) {
  :root {
    --fs-3xl: 1.875rem;
    --fs-2xl: 1.625rem;
  }

  .container { padding-inline: var(--space-3); }
  .nav { padding-inline: var(--space-3); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .two-col-grid { grid-template-columns: 1fr; max-width: 340px !important; }

  .category-grid { grid-template-columns: 1fr; }
  .category-card { aspect-ratio: 3 / 2; }

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

  .product-detail-actions { flex-wrap: wrap; }

  .cart-item-info { gap: var(--space-2); }
  .cart-item-image { width: 48px; height: 48px; }

  .footer-bottom { text-align: center; justify-content: center; }
}