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

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

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

@media (max-width: 479px) {
  .hero__image { min-height: 0; max-height: none; height: auto; object-fit: contain; }
  .trust-ticket { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust-ticket__div { width: 100%; min-height: 1px; height: 1px; }
}

@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; }
  .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(5, 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; }
  .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,
   the search bar becomes permanently visible in the header. ---- */
@media (min-width: 1024px) {
  .categories__grid { grid-template-columns: repeat(6, 1fr); }
  .products__grid { grid-template-columns: repeat(4, 1fr); }
  .value-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .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);
  }

  /* Desktop search bar: an ID-specificity override beats the global
     [hidden]{display:none!important} rule regardless of source order,
     the same way whatsappHeaderBtn's visibility is guaranteed correct
     below. #searchToggle/#searchClose stay hidden via the .mobile-only
     utility class already on them in the HTML. #searchOverlay is a DOM
     child of .header-bar__inner (a flex row), so switching it from
     position:absolute (mobile dropdown) to static + flex:1 here makes
     it sit inline as a permanent search bar, matching the flex row
     it's part of. */
  #searchOverlay[hidden] { display: block !important; }
  #searchOverlay {
    position: static; flex: 1; max-width: 640px; margin-inline: var(--sp-4);
    border: none; box-shadow: none; padding-block: 0; animation: none;
  }
  .header-bar__inner .search-overlay__inner {
    height: 44px; border-radius: var(--radius-btn); border: 2px solid var(--green);
    background: var(--paper-raised); padding-inline: var(--sp-3); position: relative;
  }
  #searchClose { display: none !important; }
  .search-suggestions {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--paper-raised);
    border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    padding: var(--sp-3); z-index: 65; margin: 0;
  }
}

@media (min-width: 1280px) {
  .products__grid { gap: var(--sp-6); }
  .shop-layout .products__grid { grid-template-columns: repeat(5, 1fr); }
  :root { --header-h: 68px; }
  .header-bar__inner .search-overlay__inner { box-shadow: 0 2px 10px rgba(10,26,16,.06); }
}

@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; }