/* ==========================================================================
   RESPONSIVE LAYER
   Base styles in style.css are mobile-first. This file layers on
   progressive enhancements at wider breakpoints. No horizontal scroll
   at any width from 360px to 1920px.
   ========================================================================== */

/* ---- Small phones: tighten up ---- */
@media (max-width: 374px) {
  .hero__title { font-size: 1.75rem; }
  .trust-ticket { gap: var(--sp-3); padding: var(--sp-3); }
  .container { padding-inline: var(--sp-3); }
}

/* ---- 480px+: two-across stays, breathing room grows ---- */
@media (min-width: 480px) {
  .products__grid { gap: var(--sp-5); }
}

/* ---- Tablet portrait (768px+) ---- */
@media (min-width: 768px) {
  .desktop-only { display: inline-flex !important; }
  .mobile-only { display: none !important; }

  .container { padding-inline: var(--sp-6); }

  .hero__inner { flex-direction: row; align-items: center; padding-block: var(--sp-9); }
  .hero__content { flex: 1.1; }
  .hero__visual { flex: 1; }
  .hero__title { max-width: 16ch; }

  .categories__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .products__grid { grid-template-columns: repeat(3, 1fr); }

  .catalogue__toolbar-row { flex-wrap: nowrap; }

  .about__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; }

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

  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

  /* Modals become centered dialogs instead of bottom sheets */
  .modal { align-items: center; }
  .modal__panel {
    max-width: 640px; border-radius: var(--radius-lg); max-height: 88vh;
    animation: modalPopIn var(--t-med) var(--ease);
  }
  .modal__panel--product { max-width: 760px; }
  @keyframes modalPopIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

  .product-modal-layout { display: flex; gap: var(--sp-6); }
  .product-modal-layout .product-modal__image { flex: 0 0 300px; margin-bottom: 0; }
  .product-modal-layout .product-modal__info { flex: 1; }

  /* Cart becomes a fixed-width slide-out drawer, not full width */
  .cart-drawer__panel { width: 420px; box-shadow: var(--shadow-lg); }
}

/* ---- Small laptop / large tablet (1024px+) ---- */
@media (min-width: 1024px) {
  .categories__grid { grid-template-columns: repeat(4, 1fr); }
  .products__grid { grid-template-columns: repeat(4, 1fr); }

  .hero__title { font-size: clamp(2.6rem, 4.2vw, 3.6rem); }
  .hero-illustration { width: 400px; }

  .section { padding-block: var(--sp-9); }
}

/* ---- Desktop (1280px+) ---- */
@media (min-width: 1280px) {
  .products__grid { gap: var(--sp-6); }
  .main-nav { gap: var(--sp-7); }
}

/* ---- Large desktop (1440px+ / 1920px) ---- */
@media (min-width: 1440px) {
  :root { --container-w: 1320px; }
  .hero__inner { padding-block: var(--sp-10); }
}

/* ---- Fine pointer only: hover-dependent affordances ---- */
@media (hover: hover) and (pointer: fine) {
  .category-card, .product-card { cursor: pointer; }
}

/* ---- Print ---- */
@media print {
  .site-header, .mobile-nav, .scrim, .cart-drawer, .modal, .toast-container, .hero__ctas, footer { display: none !important; }
}