/* RED20-HORIZONTAL-V3-20260902
   Cache-proof homepage section scroller.
   Purpose: ONE ROW ONLY. Mobile ~= 2 full cards + half of third.
   Desktop = one row with multiple cards, horizontal scroll for the rest.
   This file intentionally loads AFTER all existing eShop/RED20 CSS.
*/

html body .red20-horizontal-section {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body .red20-horizontal-section .red20-products-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  touch-action: pan-x !important;
  white-space: normal !important;
}
html body .red20-horizontal-section .red20-products-scroll::-webkit-scrollbar { display:none !important; }

/* Kill Bootstrap row/list/swiper behavior inside the homepage section. */
html body .red20-horizontal-section .red20-products-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 28px 12px 2px !important;
  transform: none !important;
  position: static !important;
}

html body .red20-horizontal-section .red20-product-slide {
  display: block !important;
  float: none !important;
  position: relative !important;
  flex: 0 0 210px !important;
  width: 210px !important;
  min-width: 210px !important;
  max-width: 210px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start !important;
}

html body .red20-horizontal-section .red20-product-slide > .product-grid {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Desktop/tablet: one row. */
@media (min-width:1200px) {
  html body .red20-horizontal-section .red20-product-slide {
    flex-basis: 205px !important;
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }
}
@media (min-width:768px) and (max-width:1199.98px) {
  html body .red20-horizontal-section .red20-product-slide {
    flex-basis: 185px !important;
    width: 185px !important;
    min-width: 185px !important;
    max-width: 185px !important;
  }
}

/* Mobile app view: 2 complete cards + ~half of card 3 visible. */
@media (max-width:767.98px) {
  html body .red20-horizontal-section {
    padding-left: 6px !important;
    padding-right: 0 !important;
  }
  html body .red20-horizontal-section .red20-products-scroll {
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-type: x proximity !important;
  }
  html body .red20-horizontal-section .red20-products-track {
    gap: 7px !important;
    padding: 1px 20px 8px 0 !important;
  }
  html body .red20-horizontal-section .red20-product-slide {
    /* 2.5 cards in the viewport, allowing for small gaps/padding */
    flex: 0 0 calc((100vw - 31px) / 2.5) !important;
    width: calc((100vw - 31px) / 2.5) !important;
    min-width: calc((100vw - 31px) / 2.5) !important;
    max-width: calc((100vw - 31px) / 2.5) !important;
  }
  html body .red20-horizontal-section .red20-product-slide .product-grid {
    margin-bottom: 0 !important;
  }
}

@media (max-width:360px) {
  html body .red20-horizontal-section .red20-product-slide {
    flex-basis: calc((100vw - 27px) / 2.45) !important;
    width: calc((100vw - 27px) / 2.45) !important;
    min-width: calc((100vw - 27px) / 2.45) !important;
    max-width: calc((100vw - 27px) / 2.45) !important;
  }
}