/* ============================================================
   BASTLIK.CZ — Produktové slidery na HOMEPAGE
   (Nejprodávanější, Doporučujeme) — karty ve stejném stylu jako
   v kategorii + sjednocený font a nadpisy.
   Vložit do: Shoptet -> Vzhled a obsah -> Editor -> HTML kód ->
   Záhlaví, do <style>...</style>. VLOŽIT AŽ ZA stávající CSS.

   Scope: .products-wrapper (skupiny produktů na HP) + jejich
   nadpisy .homepage-group-title. Mechanika slideru zůstává —
   stylujeme jen vnitřní karty (.product > .p).
   Prefix proměnných --bstlhp-.
   ============================================================ */

.products-wrapper {
  --bstlhp-navy:#16233a;
  --bstlhp-blue:#007bff;
  --bstlhp-green:#9ccc00;
  --bstlhp-green-dark:#8bb400;
  --bstlhp-red:#ed0505;
  --bstlhp-border:#e5e7eb;
  --bstlhp-bg-soft:#f9fafb;
  --bstlhp-muted:#6b7280;
  --bstlhp-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* font napříč sekcí + nadpisy */
.products-wrapper,
.homepage-group-title {
  font-family:var(--bstlhp-font) !important;
}

/* ---------- Nadpisy "Nejprodávanější" / "Doporučujeme" ---------- */
.homepage-group-title.homepage-products-heading-6,
.homepage-group-title.homepage-products-heading-4,
.homepage-group-title {
  font-family:var(--bstlhp-font) !important;
  font-size:27px !important;
  font-weight:800 !important;
  color:var(--bstlhp-navy) !important;
  letter-spacing:-.01em;
  margin:4px 0 14px !important;
}
/* zmenšit bílý prostor mezi nadpisem a produkty + odsadit sekce od sebe */
.products-wrapper.product-slider-holder,
.products-wrapper .products.product-slider {
  margin-top:0 !important;
  padding-top:0 !important;
}
.products-wrapper {
  margin-bottom:26px !important;
}

/* ============================================================
   Karta produktu (.product > .p) — stejný vzhled jako v kategorii
   (slider necháváme být, jen karty)
   ============================================================ */
/* vypnout starý zelený vnější rámeček/hover z původního CSS —
   ať zůstane jen jeden čistý hover na naší kartě (.p) */
.products-wrapper .product,
.products-wrapper .product:hover,
.products-wrapper .product.active,
.products-wrapper .product.active:hover {
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}

.products-wrapper .product .p {
  display:flex !important;
  flex-direction:column !important;
  height:100%;
  background:#ffffff !important;
  border:1px solid var(--bstlhp-border) !important;
  border-radius:14px !important;
  padding:16px !important;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.products-wrapper .product .p:hover {
  box-shadow:0 8px 24px rgba(22,34,56,.08);
  border-color:var(--bstlhp-border) !important;
}
/* žádné podtržení názvu ani textu tlačítka při hoveru */
.products-wrapper .product .name,
.products-wrapper .product .name:hover,
.products-wrapper .product .name span,
.products-wrapper .product .p-tools .btn,
.products-wrapper .product .p-tools .btn:hover {
  text-decoration:none !important;
}

/* Obrázek — bílé pozadí, poměr 4:3, bez oříznutí */
.products-wrapper .product .p > a.image {
  display:block;
  margin:0 0 14px 0 !important;
  border-radius:10px;
  overflow:hidden;
  background:#ffffff;
  aspect-ratio:4 / 3;
}
.products-wrapper .product .p > a.image img {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Vnitřní layout — tlačítko dole, karty stejně vysoké */
.products-wrapper .product .p-in,
.products-wrapper .product .p-in-in {
  display:flex !important;
  flex-direction:column !important;
  flex:1;
  min-width:0;
}

/* Název — max 2 řádky, pak "…" */
.products-wrapper .product .name {
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--bstlhp-navy) !important;
  line-height:1.35 !important;
  margin-bottom:8px !important;
  text-align:left !important;
}
.products-wrapper .product .name span {
  color:var(--bstlhp-navy) !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Hvězdičky a kód skryté (jako v kategorii) */
.products-wrapper .product .stars-wrapper,
.products-wrapper .product .stars-placeholder,
.products-wrapper .product .p-code {
  display:none !important;
}

/* Dostupnost */
.products-wrapper .product .availability {
  font-size:13.5px;
  font-weight:600;
  margin-bottom:10px;
  text-align:left !important;
}
.products-wrapper .product .availability-amount {
  color:var(--bstlhp-muted);
  font-weight:500;
}

/* Spodní blok — cena + tlačítko dole */
.products-wrapper .product .p-bottom {
  margin-top:auto !important;
}
.products-wrapper .product .prices {
  margin-bottom:12px;
  text-align:left !important;
}
/* prázdný placeholder ceny nesmí dělat mezeru */
.products-wrapper .product .price-standard-wrapper {
  display:none !important;
}
/* Cena — červená, ve stejném duchu jako v kategorii */
.products-wrapper .product .price-final,
.products-wrapper .product .price-final strong {
  color:var(--bstlhp-red) !important;
  text-align:left !important;
}

/* Tlačítko (Do košíku i Detail) — zelené na celou šířku */
.products-wrapper .product .p-tools {
  margin:0 !important;
}
.products-wrapper .product .p-tools form {
  margin:0 !important;
}
.products-wrapper .product .p-tools .btn,
.products-wrapper .product .p-tools .btn:last-child,
.products-wrapper .product .p-tools .add-to-cart-button {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  width:100% !important;
  height:46px !important;
  padding:0 16px !important;
  background:var(--bstlhp-green) !important;
  border:none !important;
  border-color:var(--bstlhp-green) !important;
  border-radius:10px !important;
  color:#ffffff !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.2px;
  transition:background .15s ease, transform .1s ease;
}
.products-wrapper .product .p-tools .btn:hover,
.products-wrapper .product .p-tools .btn:last-child:hover,
.products-wrapper .product .p-tools .add-to-cart-button:hover {
  background:var(--bstlhp-green-dark) !important;
  border-color:var(--bstlhp-green-dark) !important;
  transform:translateY(-1px);
}

/* ---------- drobná mezera mezi kartami ve slideru ---------- */
.products-wrapper .product-slider .product {
  padding:0 8px;
}

/* ============================================================
   LISTOVACÍ ŠIPKY — varianta 4 (squircle), VŽDY viditelné
   ============================================================ */
.products-wrapper .product-slider-navigation {
  opacity:1 !important;
  visibility:visible !important;
  width:44px !important;
  height:44px !important;
  border-radius:13px !important;
  border:1px solid var(--bstlhp-border) !important;
  background-color:#ffffff !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;
  box-shadow:none !important;
  font-size:0 !important;
  color:transparent !important;
  cursor:pointer;
  z-index:5;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease;
}
/* skrýt původní ikonu ze šablony, kreslíme vlastní chevron přes pozadí */
.products-wrapper .product-slider-navigation::before,
.products-wrapper .product-slider-navigation::after {
  display:none !important;
}
.products-wrapper .product-slider-navigation.navigation-prev {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316233a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}
.products-wrapper .product-slider-navigation.navigation-next {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316233a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}
/* hover: navy pozadí, bílý chevron */
.products-wrapper .product-slider-navigation:hover {
  background-color:var(--bstlhp-navy) !important;
  border-color:var(--bstlhp-navy) !important;
  box-shadow:none !important;
}
.products-wrapper .product-slider-navigation.navigation-prev:hover {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important;
}
.products-wrapper .product-slider-navigation.navigation-next:hover {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   UKAZATEL POZICE (tečky) — varianta 5
   ============================================================ */
.products-wrapper .product-slider-pagination {
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:20px !important;
}
.products-wrapper .product-slider-pagination .pagination-button {
  width:8px !important;
  height:8px !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:50% !important;
  background:#d3d9e2 !important;
  font-size:0 !important;
  color:transparent !important;
  cursor:pointer;
  transition:background .15s ease, width .15s ease;
}
.products-wrapper .product-slider-pagination .pagination-button:hover {
  background:#b9c2d0 !important;
}
.products-wrapper .product-slider-pagination .pagination-button.active {
  width:22px !important;
  border-radius:5px !important;
  background:var(--bstlhp-blue) !important;
}

/* ---------- PC: odsadit šipky ven od produktů ---------- */
@media (min-width:768px){
  /* obal má overflow:hidden (ořezával šipky venku) — povolíme přetečení,
     samotný slider si vnitřní ořez slidů nechává */
  .products-wrapper.product-slider-holder,
  .products-wrapper.product-slider-holder.has-navigation {
    overflow:visible !important;
  }
  .products-wrapper .product-slider-navigation.navigation-prev {
    left:-14px !important;
    right:auto !important;
  }
  .products-wrapper .product-slider-navigation.navigation-next {
    right:-14px !important;
    left:auto !important;
  }
}

/* ---------- Mobil ---------- */
@media (max-width:767px){
  .homepage-group-title {
    font-size:20px !important;
    margin-bottom:6px !important;
  }
  .products-wrapper .product .p {
    padding:12px !important;
  }
  .products-wrapper .product-slider .product {
    padding:0 5px;
  }
  /* víc místa mezi sekcemi, ať ovládací pruh nelepí na další blok */
  .products-wrapper {
    margin-bottom:34px !important;
  }

  /* šipky POD produkty — ovládací pruh se ukazatelem uprostřed:
     [‹]      • • • •      [›]  */
  .products-wrapper.product-slider-holder {
    position:relative;
    padding-bottom:0 !important;
  }
  .products-wrapper .products.product-slider {
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  .products-wrapper .product-slider-pagination {
    min-height:42px;
    margin-top:8px !important;
    margin-bottom:0 !important;
  }
  .products-wrapper .product-slider-navigation {
    position:absolute !important;
    top:auto !important;
    bottom:0 !important;
    transform:none !important;
    width:42px !important;
    height:42px !important;
    margin:0 !important;
  }
  .products-wrapper .product-slider-navigation.navigation-prev {
    left:4px !important;
    right:auto !important;
  }
  .products-wrapper .product-slider-navigation.navigation-next {
    right:4px !important;
    left:auto !important;
  }
}