/* ═══════════════════════════════════════════════════════════════════════
   homepage-cls.css — Cumulative Layout Shift fix + image sizing
   Verze: 2026-05-14 (rev 2 — scoping pravidel pod body.type-index pro Shoptet widget)
   Cíl: snížit CLS 0.527 → ~0.05 reservováním vertikálního prostoru
        a doplněním aspect-ratio na obrázky bez width/height atributů.

   Pozn.: #products-5 / .homepage-products-5 pravidla scoped pod body.type-index
   (Shoptet widget ID kolize risk — pokud by produktový widget s #products-5 byl
   nasazen i mimo homepage, by 1931px prázdný blok rozbil layout). Ostatní pravidla
   (logo, footer rádce, cart counter, carousel obecně) zůstávají bez scope —
   těmto elementům CLS prevention prospívá kdekoliv.
   ═══════════════════════════════════════════════════════════════════════ */

/* === Reservace prostoru pro Shoptet produktový widget (jen homepage) === */
body.type-index #products-5,
body.type-index .homepage-products-5 { min-height: 1931px; }

@media (min-width: 600px) {
  body.type-index #products-5,
  body.type-index .homepage-products-5 { min-height: 1000px; }
}

@media (min-width: 992px) {
  body.type-index #products-5,
  body.type-index .homepage-products-5 { min-height: 600px; }
}

/* === Product card images uvnitř #products-5 — fixní 1:1 placeholder (jen homepage) === */
body.type-index #products-5 .product .image,
body.type-index .homepage-products-5 .product .image {
  display: block;
  aspect-ratio: 1 / 1;
  background: #f8f8f8;
}
body.type-index #products-5 .product .image img,
body.type-index .homepage-products-5 .product .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* === Footer "Rádce pro výběr" widget — itoppanel ikony (globální, footer všude) === */
.itoppanel--picture-rdc {
  display: block;
}
.itoppanel--picture-rdc img {
  aspect-ratio: 400 / 231;
  width: 100%;
  height: auto;
  max-width: 200px;
  object-fit: contain;
}

/* === Logo + obecné platby/mapa wrap (globální) === */
.site-name a img {
  height: auto;
  max-height: 60px;
  width: auto;
}

/* Platby + mapa banners (span > p > a > img, footer) */
span > p > a > img[src*="platebn"],
span > p > a > img[src*="mapa"] {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Carousel banner — fix shift při loadu (jen homepage, kde je hero carousel) === */
body.type-index .banners-row .carousel img,
body.type-index #carousel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 198;
}

@media (max-width: 768px) {
  body.type-index .banners-row .carousel img,
  body.type-index #carousel img {
    aspect-ratio: 800 / 300;
  }
}

/* === Header cart counter — drobný CLS (globální) === */
.navigation-buttons > a.btn.cart-count {
  min-width: 130px;
  text-align: center;
}