/* ============================================================
   WENDY HRAČKY — Homepage product slider (majastore styl)
   Soubor: wendy-homepage-slider.css
   Upload: /user/documents/upload/css/wendy-homepage-slider.css
   ============================================================ */

/* Wrapper sekce — relativní pozice pro šipky */
.homepage-products-section {
  position: relative;
  padding: 0 24px;
}

/* Slider kontejner */
.products.products-block[class*="homepage-products-"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.products.products-block[class*="homepage-products-"]::-webkit-scrollbar {
  display: none;
}

/* Produktová karta */
.products.products-block[class*="homepage-products-"] > .product {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 220px;
  /* Fix: Shoptet šablona dává border-right jako grid separator — ve slideru to dělá rámy */
  border: none !important;
  outline: none !important;
}

@media (max-width: 768px) {
  .products.products-block[class*="homepage-products-"] > .product {
    width: 180px;
  }
  .wendy-slider-btn {
    display: none !important;
  }
}

/* ---- Šipky prev / next (přidány přes JS) ---- */
.wendy-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow .15s, background .15s;
  padding: 0;
  line-height: 1;
}

.wendy-slider-btn:hover {
  background: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

.wendy-slider-btn.wendy-prev { left: -8px; }
.wendy-slider-btn.wendy-next { right: -8px; }

.wendy-slider-btn svg {
  width: 16px;
  height: 16px;
  stroke: #333;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}