/* Fixed storefront grids — loaded last in the CDN build.
   Pure CSS only: no observers, transforms or horizontal-scroll handlers. */

html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#discovery,
.discovery-section,
.category-discovery,
#products {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Category filters wrap naturally instead of becoming a horizontal rail. */
.category-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 2px 0 8px !important;
  scroll-snap-type: none !important;
  transform: none !important;
  touch-action: auto !important;
}

.category-strip button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  scroll-snap-align: none !important;
}

/* All category cards are visible in a stable grid. */
.category-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
  transform: none !important;
  touch-action: auto !important;
}

.category-card {
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: initial !important;
  scroll-snap-align: none !important;
  transform: none !important;
}

/* Each discovery list contains exactly four products:
   2 × 2 on phones and four cards in one row on wider screens. */
.discovery-grid,
.product-rail,
.horizontal-products,
[data-horizontal-scroll] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-x: visible !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
  overscroll-behavior: auto !important;
  transform: none !important;
  touch-action: auto !important;
}

.discovery-grid > .card,
.product-rail > .card,
.horizontal-products > .card,
[data-horizontal-scroll] > .card {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: initial !important;
  scroll-snap-align: none !important;
  transform: none !important;
}

.discovery-grid > .card:nth-child(n + 5) {
  display: none !important;
}

.discovery-grid .discovery-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex-basis: auto !important;
}

.discovery-grid .discovery-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

/* The complete catalogue remains a normal product grid. */
#products .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  overflow: visible !important;
}

#products .grid > .card {
  min-width: 0 !important;
}

@media (min-width: 720px) {
  .category-cards,
  .discovery-grid,
  .product-rail,
  .horizontal-products,
  [data-horizontal-scroll],
  #products .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}