/* ==========================================================================
   RESPONSIVE LAYER — mobile-first. No horizontal scroll 360px–1920px.
   ========================================================================== */

@media (max-width: 419px) {
  .logo__sub { display: none; }
}

@media (max-width: 374px) {
  .container { padding-inline: var(--sp-3); }
  .mega-menu__list { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-3); }
}

@media (max-width: 479px) {
  .hero__stat-card { position: static; margin-top: -22px; margin-inline: 14px; }
  .budget-tile:last-child:nth-child(odd) { grid-column: auto; }
}

@media (min-width: 480px) {
  .products__grid { gap: var(--sp-5); }
  .budget-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

  .utility-bar { display: block; }
  .container { padding-inline: var(--sp-6); }

  .hero__inner { padding-block: var(--sp-5) var(--sp-7); }

  .value-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }

  .categories__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .budget-tile:last-child:nth-child(odd) { grid-column: auto; }
  .brand-tile { width: 152px; }
  /* Homepage rails fetch four products (a neat 2x2 on phones); once the grid
     is three across, drop the fourth so it never sits alone on a second row. */
  .products__grid--rail > :nth-child(n+4) { display: none; }

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

  .about__inner { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; }
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .store-info__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

  .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: 780px; }
  @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__gallery { flex: 0 0 300px; }
  .product-modal-layout .product-modal__info { flex: 1; }

  .cart-drawer__panel { width: 420px; box-shadow: var(--shadow-lg); }

  /* Filter sheet becomes a touch more spacious, still a bottom sheet
     until the sidebar breakpoint below. */
  .filter-panel { max-width: 420px; left: auto; right: 0; }
}

/* ---- Desktop (1024px+): sidebar filters replace the bottom sheet. ---- */
@media (min-width: 1024px) {
  .categories__grid { grid-template-columns: repeat(3, 1fr); }
  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .shop-layout .products__grid { grid-template-columns: repeat(4, 1fr); }
  .value-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .budget-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .budget-tile:last-child:nth-child(odd) { grid-column: auto; }
  .section { padding-block: var(--sp-9); }

  .shop-layout { display: grid; grid-template-columns: 248px 1fr; gap: var(--sp-7); align-items: start; }
  .filter-panel {
    position: sticky; top: calc(var(--header-h) + var(--category-nav-h) + var(--sp-4)); z-index: 10;
    transform: none; max-height: none; overflow-y: visible;
    left: auto; right: auto; max-width: none;
    border-radius: var(--radius-lg); box-shadow: none; border: 1px solid var(--line);
    padding: var(--sp-5); background: var(--paper-raised);
  }

  /* Search is icon-triggered at every breakpoint now — on desktop the
     dropdown panel simply keeps its input to a comfortable reading
     width instead of stretching across the whole container. The close
     button stays visible so the panel never depends on knowing about
     Escape or re-clicking the magnifier. */
  .search-overlay__inner { max-width: 720px; margin-inline: auto; }
  .search-overlay__inner input { font-size: 1.05rem; }
  .search-suggestions { max-width: 720px; margin-inline: auto; }
}

@media (min-width: 1280px) {
  .products__grid { gap: var(--sp-6); }
  .shop-layout .products__grid { grid-template-columns: repeat(5, 1fr); }
  :root { --header-h: 68px; }
}

@media (min-width: 1440px) {
  :root { --container-w: 1360px; }
  .hero__inner { padding-block: var(--sp-10); }
}

@media (hover: hover) and (pointer: fine) {
  .category-card, .product-card { cursor: pointer; }
}

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

/* [hidden] must always win over .desktop-only/.mobile-only, regardless
   of source order within a media query (equal-specificity !important
   ties resolve by source order otherwise, which would let a later
   utility rule wrongly show a still-hidden element). */
.desktop-only[hidden], .mobile-only[hidden] { display: none !important; }