/* ------------------------------
   OBRÁZKY PRODUKTŮ
------------------------------- */

/* mezery mezi produkty na mobilu */
@media (max-width:640px){
  #products.products-block { gap: 8px !important; }
}

/* obal obrázku */
#products .product .image{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* poměr stran obrázků (150 %) */
#products .product .image::before{
  content: "" !important;
  display: block !important;
  padding-top: 150% !important;
}

/* vyšší obrázek na mobilu */
@media (max-width:640px){
  #products .product .image::before{ padding-top: 190% !important; }
}

/* samotný <img> */
#products .product .image img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* ------------------------------
   TEXTOVÉ BLOKY A POŘADÍ
------------------------------- */

/* sloupcové uspořádání obsahu karty */
#products .product .p-in{ display:flex !important; flex-direction:column !important; }

/* vnitřní wrapper bez zbytečných okrajů */
#products .product .p-in-in{ margin:0 !important; }

/* název produktu – 1. v pořadí */
#products .product .name{
  order:1 !important;
  margin:2px !important;
  padding:0 !important;
  line-height:2 !important;
  display:block !important;
}

/* samotný text názvu */
#products .product .name span{
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;
  margin:2px !important;                 /* sjednocený margin */
  display:-webkit-box !important;
  -webkit-line-clamp:1 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  height:auto !important;                /* přepíše dřívější fixních 25px */
}

/* wrapper hodnocení/dostupnosti – 2. v pořadí */
#products .product .ratings-wrapper{ order:2 !important; margin:2px !important; }

/* dostupnost (Skladem) – 2. v pořadí */
#products .product .availability{ order:2 !important; margin:2px !important; }
#products .product .availability span{
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  color:#0042aa !important;
  margin:2px !important;
}

/* ------------------------------
   CENA + TLAČÍTKO (GRID)
------------------------------- */

/* řádek cena + tlačítko: grid zajistí tlačítko přesně vpravo */
#products .product .p-bottom{
  order:3 !important;                     /* 3. v pořadí */
  display:grid !important;
  grid-template-columns: 1fr auto !important; /* 1fr = cena, auto = tlačítko */
  align-items:center !important;
  column-gap:1px !important;
  width:100% !important;
  margin:2px !important;
  position:relative !important;
  z-index:2 !important;
}

/* cena vlevo */
#products .product .prices{
  font-size:16px !important;
  font-weight:700 !important;
  margin:2px !important;
  padding:0 !important;
  /* bez flex-grow/shrink – řídí to grid */
}

/* obal tlačítka zarovnaný vpravo */
#products .product .p-tools{
  justify-self:end !important;            /* pošle tlačítko na pravý okraj karty */
  margin:2px !important;
  padding:0 !important;
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  position:static !important;
  height:auto !important;
  pointer-events:auto !important;
  z-index:2 !important;
}

/* hover nemění viditelnost tlačítka */
#products .product:hover .p-tools{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}

/* ------------------------------
   TLAČÍTKO
------------------------------- */

/* odstranit šipku u tlačítka */
#products .product .p-tools .btn::after,
#products .product .p-tools .btn::before,
#products .product .p-tools .js-inline-cart-btn::before{
  content:none !important;
  display:none !important;
  border:0 !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}

/* vzhled tlačítka */
#products .product .p-tools .js-inline-cart-btn,
#products .product .p-tools .btn,
#products .product .p-tools button[type="submit"],
#products .product .p-tools input[type="submit"]{
  background:#00346B !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  padding:6px 10px !important;
  min-width:92px !important;
  height:32px !important;
  border:0 !important;
  border-radius:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  text-decoration:none !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* hover */
#products .product .p-tools .btn:hover,
#products .product .p-tools .js-inline-cart-btn:hover,
#products .product .p-tools button[type="submit"]:hover,
#products .product .p-tools input[type="submit"]{
  background:#022b57 !important;
}

/* Shoptet šablony někdy skrývají tlačítka – přinuť je být vidět */
.products-block.products .product .btn,
.products-block.products .product .button,
.products-block.products .product button{
  opacity:1 !important;
  visibility:visible !important;
}

/* ------------------------------
   SJEDNOCENÉ MARGINY
------------------------------- */

#products .products-block .product .name,
#products .products-block .product .name span,
#products .products-block .product .availability,
#products .products-block .product .availability span,
#products .products-block .product .prices,
#products .products-block .product .p-tools,
#products .products-block .product .ratings-wrapper,
#products .products-block .product .p-in-in,
#products .products-block .product .p-bottom{
  margin:2px !important;
}

/* ------------------------------
   MOBILE TWEAKS
------------------------------- */

@media (max-width:640px){
  #products .product .p-bottom{ column-gap:8px !important; }
  #products .product .p-tools .js-inline-cart-btn,
  #products .product .p-tools .btn,
  #products .product .p-tools button[type="submit"],
  #products .product .p-tools input[type="submit"]{
    min-width:100px !important;
    padding:9px 10px !important;
    font-size:13px !important;
    height:34px !important;
  }
}

/* ------------------------------
   NAVIGACE / POMOCNÉ
------------------------------- */


/* ------------------------------
   KARTY V ŘADĚ (volitelné rozestupy)
------------------------------- */

.product{ flex:1 1 260px; max-width:270px; margin:5px; }
.products, .products-block{ display:flex; flex-wrap:wrap; gap:10px !important; justify-content:flex-start; }

/* ------------------------------
   Tlacitko mobil
------------------------------- */

/* FIX: mobil – drž tlačítko vpravo v jediném řádku */
#products .product .p-bottom{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important; /* 1. sloupec může zúžit až na 0 */
  align-items: center !important;
  column-gap: 12px !important;
  width: 100% !important;
}

/* dovol ceně zúžit se v gridu (jinak vytlačí tlačítko na další řádek) */
#products .product .prices{
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;   /* zkrať na … když je hodně úzký telefon */
}

/* jistota: žádné staré hacky neblokují zarovnání vpravo */
#products .product .p-tools{
  justify-self: end !important;
  margin-left: 0 !important;
}

/* extra úzké telefony */
@media (max-width: 360px){
  #products .product .p-bottom{ column-gap: 8px !important; }
  #products .product .prices{ font-size: 14px !important; }
  #products .product .p-tools .js-inline-cart-btn,
  #products .product .p-tools .btn{
    min-width: 88px !important;
    height: 32px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
}

/* ------------------------------
   Baner 
------------------------------- */

/* Průhledné pozadí pro captiony v karuselu */
#carousel .carousel-slide-caption,
#carousel .extended-banner-texts{
  background: transparent !important;
  box-shadow: none !important; /* kdyby tam šablona házela stín */
}

/* (pro jistotu) pokud šablona dělá překryv přes ::before */
#carousel .carousel-slide-caption::before,
#carousel .extended-banner-texts::before{
  background: transparent !important;
}
#carousel .carousel-slide-caption,
#carousel .extended-banner-texts{
  position: absolute;
  top: 70%; left: 50%;
  right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  align-items: center;
  background: transparent !important;
  width: min(92vw, 700px);
  padding: clamp(16px, 4vw, 40px);
}

/* Mobil: dole uprostřed (lepší čitelnost) */
@media (max-width: 767px){
  #carousel .carousel-slide-caption,
  #carousel .extended-banner-texts{
    top: auto; bottom: 20%;
    left: 50%; right: auto;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    text-align: center;
    align-items: center;
    padding: 12px;
  }
}


/* NADPIS v banneru – větší, bílý, tučný */
#carousel .carousel-slide-caption .extended-banner-text,
#carousel .extended-banner-texts .extended-banner-text{
  color: #fff !important;
  font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 900 !important;
  font-size: clamp(24px, 6vw, 58px) !important; /* výrazně větší a responzivní */
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 .4em;
  background: transparent !important;
  box-shadow: none !important;
}