
/* === HOMEPAGE: tvrdý override produktových karet a layoutu === */

/* 1) Grid místo floatů (přebít shoptet) */
#products-1.products.products-block.homepage-products-1,
#products-2.products.products-block.homepage-products-2{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important; /* mobil = 2 */
  gap: 14px !important;
  align-items: stretch !important;
}

/* shodíme šířky/margins/floats, které Shoptet cpe do .product  */
#products-1.products .product,
#products-2.products .product{
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

/* 2) Tablet/desktop sloupce */
@media (min-width: 640px){
  #products-1.products.products-block.homepage-products-1,
  #products-2.products.products-block.homepage-products-2{
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 16px !important;
  }
}
@media (min-width: 1024px){
  #products-1.products.products-block.homepage-products-1,
  #products-2.products.products-block.homepage-products-2{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 20px !important;
  }
}

/* 3) Vzhled karty (silný override) */
#products-1 .product .p,
#products-2 .product .p{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
  transition: transform .18s, box-shadow .18s !important;
}
@media (hover:hover){
  #products-1 .product .p:hover,
  #products-2 .product .p:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.09) !important;
  }
}

/* 4) Obrázek v pevném poměru */
#products-1 .product .p > a.image,
#products-2 .product .p > a.image{
  display:block !important;
  background:#f7f7f7 !important;
  aspect-ratio: 4 / 5 !important;
  overflow:hidden !important;
}
#products-1 .product .p > a.image img,
#products-2 .product .p > a.image img{
  width:100% !important;
  height:100% !important;
  object-fit: contain !important;
}

/* 5) Vnitřek karty */
#products-1 .product .p-in,
#products-2 .product .p-in{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:14px 14px 16px !important;
  flex:1 !important;
  color:#111827 !important;
}
#products-1 .product .name,
#products-2 .product .name{
  display:block !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  letter-spacing:.2px !important;
  line-height:1.25 !important;
  text-decoration:none !important;
  color:#111827 !important;
  margin:0 0 2px !important;
}
#products-1 .product .name span,
#products-2 .product .name span{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}

/* Dostupnost */
#products-1 .product .availability,
#products-2 .product .availability{
  display:flex !important; align-items:center !important; gap:8px !important;
  font-weight:700 !important; color:#0a9a22 !important;
}
#products-1 .product .availability-amount,
#products-2 .product .availability-amount{ color:#6b7280 !important; font-weight:600 !important; }

/* Cena + tlačítko */
#products-1 .product .p-bottom,
#products-2 .product .p-bottom{ margin-top:auto !important; }

#products-1 .product .price-final strong,
#products-2 .product .price-final strong{ font-size:1.15rem !important; }
#products-1 .product .pr-list-unit,
#products-2 .product .pr-list-unit{ color:#6b7280 !important; }

#products-1 .product .p-tools .btn-cart,
#products-2 .product .p-tools .btn-cart{
  width:100% !important;
  background:#EAAF00 !important;
  color:#111 !important;
  border:0 !important;
  border-radius:12px !important;
  font-weight:800 !important;
  padding:10px 14px !important;
  transition: transform .12s, filter .12s !important;
}
#products-1 .product .p-tools .btn-cart:hover,
#products-2 .product .p-tools .btn-cart:hover{ transform:translateY(-1px) !important; filter:brightness(.97) !important; }

/* Popisek na 2 řádky */
#products-1 .product .p-desc,
#products-2 .product .p-desc{
  color:#6b7280 !important; margin:10px 0 0 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
}

/* Skrytí "Kód:" u karty na homepage (nech v detailu) */
#products-1 .product .p + .p-code,
#products-2 .product .p + .p-code{ display:none !important; }

/* Jemnější mobil */
@media (max-width: 639.98px){
  #products-1 .product .p-in, #products-2 .product .p-in{ padding:12px 12px 14px !important; }
  #products-1 .product .price-final strong, #products-2 .product .price-final strong{ font-size:1.1rem !important; }
}
@media (min-width: 1024px){
  #products-1 .product .price-final strong, #products-2 .product .price-final strong{ font-size:1.2rem !important; }
}




/* Kontejnery: pružný grid, min. šířka karty 260px (můžeš klidně zvednout na 280–300) */
#products-1.products.products-block.homepage-products-1,
#products-2.products.products-block.homepage-products-2{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* zrušit shoptet šířky/floaty */
#products-1 .product, #products-2 .product{
  width:auto !important; margin:0 !important; float:none !important; clear:none !important;
}

/* karta – necháme tvůj styl, jen drobné úpravy výšek */
#products-1 .product .p, #products-2 .product .p{ border-radius:16px !important; }

/* obrázek – o chlup vyšší prostor, aby nebyl prťavý */
#products-1 .product .p > a.image,
#products-2 .product .p > a.image{
  aspect-ratio: 4 / 5 !important;   /* klidně 1 / 1.2, chceš-li ještě větší obraz */
  background:#f7f7f7 !important;
}
#products-1 .product .p > a.image img,
#products-2 .product .p > a.image img{
  width:100% !important; height:100% !important; object-fit:contain !important;
}

/* název – 3 řádky + lepší lámání slov (uppercase ponecháno) */
#products-1 .product .name span,
#products-2 .product .name span{
  display:-webkit-box !important;
  -webkit-line-clamp: 3 !important;          /* bylo 2 */
  -webkit-box-orient: vertical !important;
  overflow:hidden !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

/* popisek – taky 3 řádky */
#products-1 .product .p-desc,
#products-2 .product .p-desc{
  display:-webkit-box !important;
  -webkit-line-clamp: 3 !important;          /* bylo 2 */
  -webkit-box-orient: vertical !important;
  overflow:hidden !important;
}

/* jemné zahuštění obsahu pro širší karty */
#products-1 .product .p-in, #products-2 .product .p-in{
  padding:14px 16px 16px !important;
}

/* breakpoints – když je místa hodně, dovol 4 sloupce; když málo, jen 2 */
@media (max-width: 639.98px){
  #products-1.products.products-block.homepage-products-1,
  #products-2.products.products-block.homepage-products-2{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}
@media (min-width: 1280px){
  #products-1.products.products-block.homepage-products-1,
  #products-2.products.products-block.homepage-products-2{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* na velkých monitorech o chlup širší */
    gap: 20px !important;
  }
}

