/* Fazonetka - Uvodni strana (pocitac a tablet, od 768 px), v5
   v5: STRANKA MA SPRAVNOU VYSKU UZ OD PRVNIHO VYKRESLENI. Kazdy blok, ktery se na
   uvodni strane dosazuje az pozdeji (pruh a kategorie, vyber strihu, fotorecenze,
   slidery, hodnoceni obchodu), ma predem rezervovane misto presne tak velke, jak
   bude vysledny blok. Rezervy zmizi samy ve chvili, kdy se blok objevi.
   v2: karty strihu se ukazou az hotove (nic neposkakuje pri nacteni).
   1) Dva pruhy se strihy ("Co se ted sije nejvice", "Popularni tistene strihy"):
      mensi karty (4 vedle sebe), bez barevneho ramecku, bez tlacitka do kosiku
      a bez dlouheho textu, misto toho tlacitko "Detail strihu" (jako na mobilu).
      Pocet karet (4) nastavuje maly skript primo do slideru Shoptetu.
   2) Blok "Hodnoceni obchodu" (doplnek) se presouva mezi oba pruhy. Misto pro nej
      se rezervuje predem (#fz-hodnoceni-slot), aby nic neproblikavalo.
   Na mobilu se nic nemeni. */

@media (min-width: 768px) {

  /* ---- nadpisy pruhu ---- */
  body.in-index .homepage-products-heading-1,
  body.in-index .homepage-products-heading-2 {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin: 43px 0 18px !important;
    padding: 0 !important;
    text-align: center;
    background: none !important;
  }

  /* ---- obal slideru: okraje stejne jako ostatni bloky ----
     (karty maji po stranach 6 px odsazeni, proto o 6 px sirsi obal) */
  body.in-index .homepage-products-heading-1 + .products-wrapper,
  body.in-index .homepage-products-heading-2 + .products-wrapper {
    padding: 0 !important;
    margin: 0 0 0 -26px !important;
    width: calc(100% + 52px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* ---- karta: bila s jemnym ramckem, rohy 6 px ---- */
  #products-1 .products-block > .product,
  #products-2 .products-block > .product {
    display: flex !important;
    box-sizing: border-box !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
  }
  #products-1 .product .p,
  #products-2 .product .p {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
  }
  #products-1 .product .p-in,
  #products-2 .product .p-in {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 10px 10px;
  }
  #products-1 .product .p-in-in,
  #products-2 .product .p-in-in {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  #products-1 .product .p-bottom,
  #products-2 .product .p-bottom {
    margin-top: auto;
  }

  /* ---- ctvercova fotka ---- */
  #products-1 .product .p > a.image,
  #products-2 .product .p > a.image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
  #products-1 .product .p > a.image img,
  #products-2 .product .p > a.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- nazev max 2 radky ---- */
  #products-1 .product .name,
  #products-2 .product .name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3em;
    min-height: 2.6em;
    text-align: center;
  }

  /* ---- skryti zbytecnych informaci ---- */
  #products-1 .product .ratings-wrapper,
  #products-2 .product .ratings-wrapper,
  #products-1 .product .price-additional,
  #products-2 .product .price-additional {
    display: none !important;
  }

  /* ---- modry pruh s velikostmi (jen cisla velikosti) ---- */
  #products-1 .product .fzt-sizes-banner,
  #products-2 .product .fzt-sizes-banner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 6px !important;
    margin: 4px 0 !important;
    border-radius: 4px !important;
    background: rgba(164, 219, 232, 0.45) !important;
  }
  #products-1 .product .fzt-sizes-banner-title,
  #products-2 .product .fzt-sizes-banner-title {
    display: none !important;
  }
  #products-1 .product .fzt-sizes-banner-list,
  #products-2 .product .fzt-sizes-banner-list {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---- bez tlacitka do kosiku a bez dlouheho textu, misto toho "Detail strihu" ---- */
  #products-1 .product .p-tools,
  #products-2 .product .p-tools,
  #products-1 .product .p-desc,
  #products-2 .product .p-desc {
    display: none !important;
  }
  #products-1 .fz-detail-btn,
  #products-2 .fz-detail-btn {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 9px 0;
    background-color: #F68E5F;
    color: #000000;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
  }

  /* ---- sipky slideru: bile kolecko u kraje karet ---- */
  body.in-index .homepage-products-heading-1 + .products-wrapper .product-slider-navigation,
  body.in-index .homepage-products-heading-2 + .products-wrapper .product-slider-navigation {
    top: 200px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
    z-index: 5;
  }
  body.in-index .homepage-products-heading-1 + .products-wrapper .navigation-prev,
  body.in-index .homepage-products-heading-2 + .products-wrapper .navigation-prev {
    left: 14px !important;
    right: auto !important;
  }
  body.in-index .homepage-products-heading-1 + .products-wrapper .navigation-next,
  body.in-index .homepage-products-heading-2 + .products-wrapper .navigation-next {
    left: auto !important;
    right: 14px !important;
  }

  /* ---- Hodnoceni obchodu: misto mezi pruhy je rezervovane nize (v5) ---- */
  /* dokud doplnek blok neprenese, na puvodnim miste dole se neukaze */
  body.fz-hodnoceni-move #hodnoceniobchodu:not(.fz-hodnoceni-moved) {
    display: none !important;
  }
  body.in-index #hodnoceniobchodu.fz-hodnoceni-moved {
    margin: 13px 0 0 -20px !important;
    width: calc(100% + 40px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- karty se ukazou az jsou hotove (tridu na <html> pridava kratky skript v
     Zahlavi, odebira ji hlavni skript). Pojistka bez JavaScriptu: po 4 s se ukazou. ---- */
  html.fz-prod4-pending body.in-index #products-1,
  html.fz-prod4-pending body.in-index #products-2 {
    visibility: hidden;
    animation: fzProd4Show 0s linear 4s forwards;
  }

  /* ---- misto pro tlacitko "Detail strihu" (doplnuje se az pozdeji) ---- */
  #products-1 .product:not(.fz-dup-hide) .p div:has(> .prices):not(:has(> .fz-detail-btn))::after,
  #products-2 .product:not(.fz-dup-hide) .p div:has(> .prices):not(:has(> .fz-detail-btn))::after {
    content: "";
    display: block;
    height: 51.2px;
  }

  /* ---- fotorecenze: pevna vyska od zacatku (hotovy pruh ma 716 px) ---- */
  body.in-index .fz-photo-reviews-band {
    min-height: 716px;
  }
}

/* =====================================================================
   REZERVOVANA MISTA (v5) - vysky jsou po skocich podle sirky obrazovky
   ===================================================================== */

@media (min-width: 768px) {
  /* A) Horni pruh + kategorie + vyber strihu: pred jejich vlozenim drzi misto
        puvodni (nepouzity) blok benefitBanner. Ve 2 krocich:
        1. nic z toho jeste neni  -> misto na vse
        2. pruh a kategorie jsou, vyber strihu jeste ne -> misto na vyber
        3. vse je -> rezerva zmizi, benefitBanner se schova (jak to dela hlavni skript) */
  body.in-index main#content:not(:has(#fzv-wrap)) .benefitBanner.position--benefitHomepage {
    display: block !important;
    visibility: hidden;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 527px;
    animation: fzSpacerOff 0s linear 5s forwards;
  }
  body.in-index main#content:has(#fzv-wrap):not(:has(#fzhp-kat-desktop)) .benefitBanner.position--benefitHomepage {
    display: block !important;
    visibility: hidden;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 228px;
    animation: fzSpacerOff 0s linear 5s forwards;
  }
  body.in-index main#content:has(#fzhp-kat-desktop) .benefitBanner.position--benefitHomepage {
    display: none !important;
  }

  /* B) Fotorecenze: misto se drzi nad nadpisem prvniho pruhu, dokud se pruh nevlozi */
  body.in-index main#content:not(:has(.fz-photo-reviews-band)) .homepage-products-heading-1::before {
    content: "";
    display: block;
    height: 759px;
    animation: fzSpacerOff 0s linear 6s forwards;
  }

  /* C) Hodnoceni obchodu: misto se drzi nad nadpisem druheho pruhu, dokud se blok
        nepresune */
  body.in-index main#content:not(:has(.fz-hodnoceni-moved)) .homepage-products-heading-2::before {
    content: "";
    display: block;
    height: 651px;
    animation: fzSpacerOff 0s linear 6s forwards;
  }

  /* D) Slidery se strihy: pred sestavenim slideru (Shoptet) jsou karty v puvodnim
        kodu pod sebou - misto toho drzime presnou vysku hotoveho slideru */
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)),
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) {
    padding-bottom: 42px !important;
  }
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)) > .products,
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) > .products {
    height: 556.5px;
    overflow: hidden;
  }
}

/* E) Fotorecenze: dokud doplnek neprida hotovy pruh, jeho surovy obal neukazujeme
      (rezervu drzi spacer B). Pojistka: po 6 s se ukaze v kazdem pripade. */
@media (min-width: 768px) {
  body.in-index main#content > div[data-sf-id*="Fotorecenze"]:not(.fz-photo-reviews-band) {
    height: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    animation: fzRawOff 0s linear 6s forwards;
  }
  /* D) Dvojice a PDF bloky pod druhym pruhem: misto drzi puvodni (nepouzity)
        obal footer-banners, dokud se bloky nevlozi */
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row {
    display: block !important;
    visibility: hidden;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 2368px;
    animation: fzSpacerOff 0s linear 6s forwards;
  }
}
@media (min-width: 992px) {
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row { height: 1472px; }
}
@media (min-width: 1100px) {
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row { height: 1105px; }
}
@media (min-width: 1200px) {
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row { height: 1003px; }
}
@media (min-width: 1300px) {
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row { height: 977px; }
}
@media (min-width: 1440px) {
  body.in-index main#content:not(:has(.fzhp-duo-wrap)) .footer-banners.row { height: 885px; }
}

/* ---- vysky podle sirky obrazovky ---- */
/* 992-1198 px: kontejner 972 px, 3 karty */
@media (min-width: 992px) {
  body.in-index main#content:not(:has(#fzv-wrap)) .benefitBanner.position--benefitHomepage { height: 575px; }
  body.in-index main#content:has(#fzv-wrap):not(:has(#fzhp-kat-desktop)) .benefitBanner.position--benefitHomepage { height: 270px; }
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)) > .products,
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) > .products { height: 505px; }
  body.in-index main#content:not(:has(.fz-hodnoceni-moved)) .homepage-products-heading-2::before { height: 651px; }
}
/* od 1199 px: 4 karty (kontejner jeste 972 px) */
@media (min-width: 1199px) {
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)) > .products,
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) > .products { height: 423px; }
}
/* od 1200 px: kontejner 1178 px */
@media (min-width: 1200px) {
  body.in-index main#content:not(:has(#fzv-wrap)) .benefitBanner.position--benefitHomepage { height: 619px; }
  body.in-index main#content:has(#fzv-wrap):not(:has(#fzhp-kat-desktop)) .benefitBanner.position--benefitHomepage { height: 309px; }
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)) > .products,
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) > .products { height: 474.5px; }
  body.in-index main#content:not(:has(.fz-hodnoceni-moved)) .homepage-products-heading-2::before { height: 441px; }
}
/* od 1440 px: kontejner 1418 px */
@media (min-width: 1440px) {
  body.in-index main#content:not(:has(#fzv-wrap)) .benefitBanner.position--benefitHomepage { height: 664px; }
  body.in-index main#content:has(#fzv-wrap):not(:has(#fzhp-kat-desktop)) .benefitBanner.position--benefitHomepage { height: 354px; }
  body.in-index .homepage-products-heading-1 + .products-wrapper:not(:has(.product-slider-pagination)) > .products,
  body.in-index .homepage-products-heading-2 + .products-wrapper:not(:has(.product-slider-pagination)) > .products { height: 534.5px; }
}

/* pojistky (kdyby se nejaky blok vubec nenacetl, rezerva po case zmizi) */
@keyframes fzSpacerOff {
  to { height: 0; }
}
@keyframes fzProd4Show {
  to { visibility: visible; }
}
@keyframes fzRawOff {
  to { height: auto; max-height: none; visibility: visible; }
}