/* ======================================================
   HOME — Product Showcase (ONE-LINE SECTIONS) — FINAL
   Fixes:
   - Gap = 1px (all devices)
   - Hover shadow/top/left NOT clipped
   - Hover card comes to front (z-index)
====================================================== */

body.home .stm-ps-section{
  max-width: 1400px;
  margin: 26px auto;
  padding: 18px 18px 22px;
  background: #fff;
  border-radius: 18px;

  /* ✅ allow hover shadow to escape section */
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Head row */
body.home .stm-ps-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 14px;
  border-bottom: 2px solid #16a34a;
  margin-bottom: 14px;
}

body.home .stm-ps-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 18px;
}

body.home .stm-ps-viewall{
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
body.home .stm-ps-viewall:hover{ text-decoration: underline; }

/* Reset list spacing */
body.home .stm-ps-section .stm-ps-products,
body.home .stm-ps-section ul.products{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
/* ======================================================
   FIX: Product Showcase inner container gutter = 0
   Target: <div class="stm-container stm-ps__inner">
====================================================== */
body.home .stm-ps-section > .stm-container.stm-ps__inner{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ======================================================
   ONE ROW — ALL DEVICES (HORIZONTAL SCROLL) — FIXED
   - IMPORTANT: overflow-y MUST be visible for hover shadow
   - Add inner padding so first card shadow isn't clipped
====================================================== */

body.home .stm-ps-section .stm-ps-products,
body.home .stm-ps-section ul.products{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;

  /* ✅ GAP = 1px */
  gap: 1px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;     /* ✅ KEY FIX */

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scroll-snap-type: x mandatory;

  /* ✅ give space for hover shadow (top/left/right) */
  padding: 14px 14px 16px !important;

  width: 100% !important;

  float: none !important;
  clear: none !important;

  position: relative;
  z-index: 1;
}

body.home .stm-ps-section .stm-ps-products > li.product,
body.home .stm-ps-section ul.products > li.product{
  float: none !important;
  margin: 0 !important;
  scroll-snap-align: start;

  /* ✅ allow hover layering */
  position: relative;
  z-index: 1;
  overflow: visible !important;       /* ✅ KEY FIX */
}

/* ✅ Hover: bring card to front (important for shadow + quickview) */
body.home .stm-ps-section .stm-ps-products > li.product:hover,
body.home .stm-ps-section ul.products > li.product:hover{
  z-index: 50 !important;
}

/* Desktop: ~6 visible */
@media (min-width: 981px){
  body.home .stm-ps-section .stm-ps-products > li.product,
  body.home .stm-ps-section ul.products > li.product{
    /* padding exists, so keep calc simple (works fine in real layout) */
    flex: 0 0 calc((100% - (1px * 5)) / 6) !important;
    max-width: calc((100% - (1px * 5)) / 6) !important;
  }

  /* Optional: hide scrollbar desktop */
  body.home .stm-ps-section .stm-ps-products,
  body.home .stm-ps-section ul.products{
    scrollbar-width: none;
  }
  body.home .stm-ps-section .stm-ps-products::-webkit-scrollbar,
  body.home .stm-ps-section ul.products::-webkit-scrollbar{
    height: 0;
  }
}

/* Wrapper responsive */
@media (max-width: 1480px){
  body.home .stm-ps-section{
    max-width: 100%;
    margin-left: 18px;
    margin-right: 18px;
  }
}

/* Tablet: 2.5 visible */
@media (max-width: 980px){
  body.home .stm-ps-section .stm-ps-products > li.product,
  body.home .stm-ps-section ul.products > li.product{
    flex: 0 0 calc((100% - (1px * 2)) / 2.5) !important;
    max-width: calc((100% - (1px * 2)) / 2.5) !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  body.home .stm-ps-section{
    padding: 14px 12px 18px;
    border-radius: 14px;
  }

  body.home .stm-ps-section .stm-ps-products,
  body.home .stm-ps-section ul.products{
    /* keep gap 1px */
    gap: 1px !important;
    padding: 12px 12px 14px !important; /* slightly smaller */
  }

  body.home .stm-ps-section .stm-ps-products > li.product,
  body.home .stm-ps-section ul.products > li.product{
    flex: 0 0 calc((100% - 1px) / 1.5) !important;
    max-width: calc((100% - 1px) / 1.5) !important;
  }
}

/* Scrollbar styling (tablet/mobile only) */
@media (max-width: 980px){
  body.home .stm-ps-section .stm-ps-products,
  body.home .stm-ps-section ul.products{
    scrollbar-width: thin;
  }
  body.home .stm-ps-section .stm-ps-products::-webkit-scrollbar,
  body.home .stm-ps-section ul.products::-webkit-scrollbar{
    height: 8px;
  }
  body.home .stm-ps-section .stm-ps-products::-webkit-scrollbar-thumb,
  body.home .stm-ps-section ul.products::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
  }
}