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

/* ---- Tlačítka ve slideru: tyrkysově modrá ---- */
.homepage-products-section {
  --wendy-turquoise: #22b8c9;
  --wendy-turquoise-dark: #1d9dad;
}

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

.homepage-products-section a.btn,
.homepage-products-section button.btn,
.homepage-products-section input.btn,
.homepage-products-section .btn,
.homepage-products-section .btn-primary,
.homepage-products-section .btn-default,
.homepage-products-section .btn-conversion,
.homepage-products-section .p-tools a,
.homepage-products-section .p-tools a.btn,
.homepage-products-section .p-tools button,
.homepage-products-section .p-tools button.btn,
.homepage-products-section .p-tools .btn,
.homepage-products-section .product .btn,
.homepage-products-section .product .btn-primary,
.homepage-products-section .product .btn-default,
.homepage-products-section .product .btn-conversion,
.homepage-products-section .p-in .btn,
.homepage-products-section .p-in .btn-primary,
.homepage-products-section .p-bottom .btn,
.homepage-products-section .p-bottom .btn-primary {
  background: var(--wendy-turquoise) !important;
  background-image: none !important;
  background-color: var(--wendy-turquoise) !important;
  border: 1px solid var(--wendy-turquoise) !important;
  border-color: var(--wendy-turquoise) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.homepage-products-section a.btn:hover,
.homepage-products-section a.btn:focus,
.homepage-products-section button.btn:hover,
.homepage-products-section button.btn:focus,
.homepage-products-section input.btn:hover,
.homepage-products-section input.btn:focus,
.homepage-products-section .btn:hover,
.homepage-products-section .btn:focus,
.homepage-products-section .btn-primary:hover,
.homepage-products-section .btn-primary:focus,
.homepage-products-section .btn-default:hover,
.homepage-products-section .btn-default:focus,
.homepage-products-section .btn-conversion:hover,
.homepage-products-section .btn-conversion:focus,
.homepage-products-section .p-tools a:hover,
.homepage-products-section .p-tools a:focus,
.homepage-products-section .p-tools a.btn:hover,
.homepage-products-section .p-tools a.btn:focus,
.homepage-products-section .p-tools button:hover,
.homepage-products-section .p-tools button:focus,
.homepage-products-section .p-tools button.btn:hover,
.homepage-products-section .p-tools button.btn:focus,
.homepage-products-section .p-tools .btn:hover,
.homepage-products-section .p-tools .btn:focus,
.homepage-products-section .product .btn:hover,
.homepage-products-section .product .btn:focus,
.homepage-products-section .product .btn-primary:hover,
.homepage-products-section .product .btn-primary:focus,
.homepage-products-section .product .btn-default:hover,
.homepage-products-section .product .btn-default:focus,
.homepage-products-section .product .btn-conversion:hover,
.homepage-products-section .product .btn-conversion:focus,
.homepage-products-section .p-in .btn:hover,
.homepage-products-section .p-in .btn:focus,
.homepage-products-section .p-bottom .btn:hover,
.homepage-products-section .p-bottom .btn:focus {
  background: var(--wendy-turquoise-dark) !important;
  background-image: none !important;
  background-color: var(--wendy-turquoise-dark) !important;
  border-color: var(--wendy-turquoise-dark) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 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: var(--wendy-turquoise);
  border: 1px solid var(--wendy-turquoise-dark);
  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: var(--wendy-turquoise-dark);
  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: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}