/* ============================================================
   FAZONETKA - Uprava homepage (uvodni strany)
   ============================================================
   Vsechny CSS upravy tykajici se HOMEPAGE jsou od ted spolecne
   v tomto jednom souboru (misto samostatneho souboru pro kazdou
   drobnost) - do pole "Zahlavi" v administraci tak pribude jen
   jeden odkaz na tento soubor, at se nevycerpava limit 8192 znaku.

   Pri kazde zmene obsahu se cely soubor uklada pod novym cislem
   verze v nazvu (v1, v2, v3...), aby prohlizece spolehlive nacetly
   novou verzi a ne starou z mezipameti.

   Barvy, pismo a zaobleni pouzite v teto i dalsich upravach
   homepage:
   - pismo: Roboto (bezny text), Raleway (nadpisy/popisky)
   - modra (odkazy/informacni prvky): #2274A5
   - zelena (odkazy/informacni prvky): #48B333
   - oranzova (JEN nakup/kosik): #F68E5F
   - svetle modra (podklady/rámečky): rgba(164, 219, 232, 0.45)
     - stejny odstin, jaky uz je u produktu v ramecku s dostupnymi
       velikostmi (.fzt-sizes-banner)
   - zlata (hvezdicky/hodnoceni): #ECB911
   - zaobleni rohu: 6px u vseho noveho

   ------------------------------------------------------------
   v1 - prvni banner nahore pod vyhledavanim ("Podzim patri ven"),
   POUZE MOBILNI ZOBRAZENI (do 767px), zbytek banneru (velikost,
   pomer stran, umisteni, vzhled) zustava presne stejny jako drive:
   - zaobleni rohu banneru 6px
   - mezera 6px mezi vyhledavacim polem a bannerem
   - mezera 6px mezi bannerem a dalsim blokem pod nim

   Technicka poznamka: banner je carousel s id "carousel". Mezera
   nad nim byla dana obecnou "mezerou pod hlavickou" (10px), ktera
   se pouziva na cele strance - proto je zmena scopovana jen na
   homepage (body.in-index) a jen na mobil, aby se nedotkla
   ostatnich stranek. Drobny -2px dopocet reaguje na to, ze hlavicka
   je na mobilu "plovouci" (position:fixed) a pro ni vyhrazene misto
   je o 2px vyssi, nez sama skutecne je - zmereno primo na webu.

   ------------------------------------------------------------
   v2 - novy uzky proužek s hodnocenim obchodu, hned POD hlavnim
   bannerem. POUZE MOBILNI ZOBRAZENI. Stejna sirka jako banner,
   svetle modre pozadi, zaobleni 6px.

   v3 - mezera 6px i POD timto proužkem (k dalsimu bloku), stejne
   jako uz je nad nim a kolem hlavniho banneru.

   v4 - obsah proužku (viz doplnkovy JS soubor, ktery skutecny
   obsah vklada): nazev "Hodnoceni obchodu" tucne cerne, prumerne
   hodnoceni + hvezdicky zlate, tenka tmava oddelovaci cara, tucny
   pocet recenzi. Cely proužek je nyni odkaz na /hodnoceni-obchodu/.

   v5 - vsechny texty v proužku zvetseny o 1 px
   (13px -> 14px). Ostatni vzhled, rozestupy ani vyska proužku se
   temer nezmeni.

   Dale v teto verzi: POD proužek s hodnocenim pribyla dve nova
   proklikavaci tlacitka vedle sebe ("PDF střihy" / "Tištěné
   střihy"), viz doplnkovy JS soubor, ktery je vklada. Stejne
   svetle modre pozadi a zaobleni 6px jako u proužku, vyska cca
   2x vyssi. Na jejich miste se schovavaji dva puvodni bannery
   (next-to-carousel-banners), ktere tyto tlacitka nahrazuji -
   POUZE MOBILNI ZOBRAZENI, na pocitaci zustavaji puvodni bannery
   beze zmeny.

   v6 - POD tlacitka "PDF střihy / Tištěné střihy"
   pribyla nova sekce se 4 proklikavacimi dlazdicemi s fotkami
   ("Vyberte si střih podle toho, pro koho šijete"): Dětské,
   Dámské, Pánské střihy a Střihy pro začátečníky, v mřížce 2×2.
   Obsah (fotky, odkazy, popisky) vklada doplnkovy JS soubor,
   toto je jen vzhled:
   - cela sekce: zaoblene rohy 6px, pozadi svetle zelena #D6EDBD
     (zakladni fazonetkova zelena #BCE194 zesvetlena o 3 odstiny -
     schvaleno Janou)
   - 4 dlazdice v mrizce 2×2, kazda v pomeru 4:3, zaobleni 6px,
     fotka vyplnuje celou dlazdici (object-fit: cover)
   - pres spodni cast fotky mlecny poloprusvitny pruh (cca 20 %
     vysky dlazdice, cca 77 % krytí) se zaoblenim jen dole, v nem
     cerny tucny nazev kategorie - VZDY na jeden radek, velikost
     pisma spocitana tak, aby se na jeden radek vesel i nejdelsi
     text ("Střihy pro začátečníky"), stejna velikost pisma je
     pak u vsech ctyr dlazdic
   - POUZE MOBILNI ZOBRAZENI, na pocitaci se sekce nezobrazuje

   v7 - text zvetsen o 1 px u dvou mist: tlacitka
   "PDF střihy" / "Tištěné střihy" (14px -> 15px) a nadpis nove
   sekce "Vyberte si střih podle toho, pro koho šijete" (16px ->
   17px). Popisky uvnitr fotografickych dlazdic (Dětské střihy
   apod.) zustavaji stejne velke jako drive.

   v8 - vsechny 3 klikatelne bloky pod hlavnim
   bannerem (proužek "Hodnocení obchodu", tlacitka "PDF střihy" /
   "Tištěné střihy" a 4 fotograficke dlazdice "Vyberte si střih...")
   maji ted stejny hover efekt, jaky uz web pouziva u zelenych karet
   podkategorii (napr. "Trička a halenky" na strance Dámské střihy):
   jemne zvetseni (scale 1.02) a modry stin, plynule za 0.2 s.
   Na mobilu (kde se cely tento blok zobrazuje) se hover projevi
   jen kratce pri doteku, coz nevadi - jde o vizualni sjednoceni
   se zbytkem webu.

   v9 - text u tlacitek "PDF střihy" / "Tištěné
   střihy" dale zvetsen, aby byl stejne velky jako nadpis nove
   sekce "Vyberte si střih podle toho, pro koho šijete" (obojí
   17px). Predtim byl jen o 1 px vetsi nez puvodne (15px), coz
   Jane porad prislo malo.

   v10 (tato verze) - POD sekci se 4 dlazdicemi ("Vyberte si
   střih...") pribyla nova sekce s recenzemi "Švadlenky hodnotí
   Fazonetku" (viz doplnkovy JS soubor, ktery skutecny obsah -
   vcetne jednotlivych recenzi - nacita ZE STEJNE stranky
   /hodnoceni-obchodu/, jako uz pouziva proužek s hodnocenim -
   tedy skutecna, aktualni data, ktera se sama aktualizuji):
   - cela sekce: stejne svetle modre pozadi jako proužek "Hodnocení
     obchodu" a tlacitka "PDF/Tištěné střihy" (rgba(164,219,232,.45)),
     zaobleni 6px - kvuli sjednoceni vzhledu se zbytkem homepage
   - nadpis "Švadlenky hodnotí Fazonetku" stejne velky jako nadpis
     "Vyberte si střih..." (17px)
   - pod nadpisem radek se souhrnem: prumerne hodnoceni, zlate
     hvezdicky, oddelovac, pocet recenzi - stejny styl (tridy
     .fzhp-score/.fzhp-sep/.fzhp-count), jaky uz pouziva proužek
     s hodnocenim nahoře. Neni to odkaz, jen informace.
   - pod tim jedna karta s konkretni recenzi (jmeno, datum,
     hvezdicky, text recenze omezeny na 4 radky) - karta je na
     TEMER CELOU SIRKU sekce (ne uzsi), odsazeni uvnitr karty je
     mensi/stisknutejsi nez u karet na strance produktu
   - pokud je text recenze delsi nez 4 radky, objevi se pod nim
     modry odkaz "Zobrazit celé hodnocení", ktery po kliknuti
     zobrazi cely text - stejne, jako je to u recenzi na produktu
   - mezi recenzemi se prochazi pomoci dvou poloprůhledných
     kulatych sipek (vlevo/vpravo), prekryvajicich okraje karty -
     recenze lze na mobilu prochazet i prstem (swipe)
   - POUZE MOBILNI ZOBRAZENI, na pocitaci se sekce nezobrazuje

   v11 (tato verze) - zjemneni vzhledu sekce s recenzemi podle
   zpetne vazby po prvnim naostro nasazeni (cely blok pusobil
   moc velky/rozlezly):
   - mezera mezi nadpisem a radkem se souhrnem zmensena (nadpis
     a "5,0 ★★★★★ | 52 recenzí" jsou k sobe blize)
   - cislo "5,0" a hvezdicky v souhrnnem radku zvetseny (17px
     misto puvodnich 14px, pocet recenzi zustava 14px)
   - karta s recenzi zmensena - mensi vnitrni odsazeni, radky
     (jmeno+datum / hvezdicky / text) jsou k sobe blize
   - jmeno s datem prebarveno ze seda na cernou
   - hvezdicky u jednotlive recenze uvnitr karty zvetseny
   - cela sekce celkove o neco stissknutejsi (mensi odsazeni
     sekce, mensi mezery mezi bloky)

   v12 (tato verze) - dalsi zmenseni karty s recenzi podle
   zpetne vazby (samotny text recenze/jeho radkovani NEMENIT,
   jen odsazeni od okraju karty a mezery mezi hvezdickami/textem):
   - vnitrni odsazeni karty shora/zdola zmenseno (8px -> 6px,
     bocni odsazeni 34px zustava kvuli mistu pro sipky)
   - mezera mezi jmenem/datem a hvezdickami zmensena (2px -> 1px)
   - mezera mezi hvezdickami a textem recenze zmensena (3px -> 2px)

   v13 (tato verze) - objeven a opraven skutecny duvod, proc
   mezi hvezdickami a textem porad pusobilo hodne mista: hvezdicky
   (★) maji ve vychozim pismu mnohem vyssi radkovani (line-height),
   nez je jejich viditelna velikost - u 18px hvezdicek to bylo
   neviditelnych +12px navic pod nimi, i kdyz margin byl jen 2px.
   Opraveno nastavenim presneho radkovani jen pro radek s
   hvezdickami a se jmenem/datem (samotny text recenze a jeho
   radkovani zustava beze zmeny):
   - jmeno+datum: radkovani zpresneno (misto neurciteho "normal")
   - hvezdicky: radkovani zpresneno presne na vysku pisma (misto
     +12px navic), mezera pod nimi zmensena na 1px

   v14 (tato verze) - vsechny texty uvnitr karty s recenzi o 1px
   vetsi (jmeno+datum 12->13px, hvezdicky 18->19px, text recenze
   13->14px, tlacitko "Zobrazit cele hodnoceni" 12->13px).
   Radkovani textu recenze (18px na radek, 4 radky) zustava schvalne
   beze zmeny, takze tam se karta nezvetsi vubec - zvetsi se jen
   nepatrne (o cca 2px) kvuli radku se jmenem/datem a hvezdickami,
   ktere maji sve radkovani prepocitane pomerem k velikosti pisma.

   v15 (tato verze) - nativni blok "Co se teď šije nejvíce" (presun
   na nove misto hned pod sekci s recenzemi resi doplnkovy JS soubor,
   v8) mel nadpisovy pruh s ruzovookrovym pozadim, ktery pretekal
   pres celou sirku displeje (zaporne okraje -10px vlevo/vpravo).
   Zde jen zrusen tento presah, aby byl pruh zase kontejnovany
   obdelnik (stejne siroky jako karty produktu pod nim) + pridano
   zaobleni rohu 6px kvuli sjednoceni s ostatnimi bloky. Nic jineho
   (velikost pisma, karty produktu, jejich ramecek) se nemeni - karty
   uz na mobilu ukazuji cca 20 % druhe karty, coz je presne to, co
   Jana chtela, takze na nich nebylo potreba nic upravovat.

   v16 (tato verze) - dokonceni opravy z v15: stejny problem
   (presah pres celou sirku displeje + ctvercove rohy) mela i cast
   se samotnymi kartami produktu hned pod nadpisovym pruhem - ta ma
   navic sirku vynucenou primo JavaScriptem sablony (inline stylem),
   proto ji nestacilo prepsat jen tridou, ale bylo nutne cilit primo
   na jeji ID (#products-1 - stabilni ID prvni skupiny produktu
   "Co se teď šije nejvíce"). Vysledek: nadpis i cast s kartami ted
   spolu tvori jeden souvisly ramecek se zaoblenim 6px (nahore i
   dole), misto puvodniho dojmu dvou ruznych ramecku. Karty produktu
   uvnitr (velikost, ramecek, pocet viditelnych karet) se opet
   nijak nemeni.

   v17 (tato verze) - doladeni v16: nadpis mel zaobleni na VSECH
   4 rozich (6px), ale cast s kartami hned pod nim jen na spodnich
   2 rozich - v miste, kde na sebe navazuji, tak vznikla 2 mala
   bila zare (nedovirala se tam presne k sobe, protoze horni cast
   mela dole zaobleny roh a spodni cast mela nahore hranaty roh).
   Opraveno: nadpis ma nove zaobleni JEN nahore (6px 6px 0 0),
   cast s kartami zaobleni JEN dole (0 0 6px 6px) - uprostred, kde
   na sebe navazuji, jsou tak oba rovne a bez mezery, cely blok
   vypada jako 1 souvisly ramecek se zaoblenim jen na vnejsich
   (nahornich a dolnich) rozich.

   v18 (tato verze) - puvodni nativni blok "Konkurenční výhody"
   (4 ikonky: PDF ihned, Tištěné střihy až domů, Ráda vám poradím,
   Střihy prověřené praxí) se na mobilu schovava a nahrazuje novym
   blokem #fzhp-benefit-buttons (obsah vklada doplnkovy JS soubor,
   v10) - stejny vzhled jako uz existujici tlacitka "PDF střihy" /
   "Tištěné střihy" (trida .fzhp-cat-btn - stejna velikost, stejne
   pismo, stejne svetle modre pozadi a zaobleni), jen misto 2 vedle
   sebe jsou ted 4 v mrizce 2×2. POZOR: obsah (texty/obrazky) je
   zatim jen provizorni ukazka pro overeni rozvrzeni - nahradi se
   skutecnym obsahem, az ho Jana posle.

   v19 (tato verze) - doladeni vzhledu bloku "Proč šít podle
   Fazonetky" (viz v18): nadpis byl predtim natlaceny hned nahoru
   k carouselu, ted je nadpis vycentrovany presne doprostred volneho
   bileho prostoru nad ikonkami a tento prostor je zaroven o tretinu
   vyssi (z ~32px na 43px) - reseno pomoci flexboxu (min-height +
   align-items/justify-content: center), aby centrovani fungovalo
   spolehlive i kdyby se nadpis kvuli delsimu textu zalomil na 2
   radky. Dale: modre kartičky (ikonky vyhod) jsou o tretinu nizsi
   (z 76px na 51px vysky), vcetne pomerne zmensene ikonky (z 56px na
   37px) a mensiho svisleho odsazeni uvnitr - zmena je scopovana jen
   na tento novy blok (#fzhp-benefit-buttons), takze se nedotkne
   puvodnich tlacitek "PDF střihy" / "Tištěné střihy", ktera pouzivaji
   stejnou tridu .fzhp-cat-btn, ale jinde na strance.

   v20 (tato verze) - text v kartickach vyhod ("PDF ihned ve vasem
   mailu" apod.) zmensen z 17px na 13px, aby mel stejnou velikost
   pisma jako popisky "Dětské střihy" / "Dámské střihy" apod. v bloku
   "Vyberte si střih podle toho, pro koho šijete" (.fzhp-kat-label).
   Opet scopovano jen na #fzhp-benefit-buttons, puvodni tlacitka
   "PDF střihy" / "Tištěné střihy" maji pismo beze zmeny (17px).

   v21 (tato verze) - text v kartickach vyhod je nove vycentrovany
   (misto puvodniho zarovnani vlevo) - tyka se pripadu, kdy se text
   zalomi na vice radku. Opet jen v tomto bloku (#fzhp-benefit-buttons).

   v22 (tato verze) - ikonky v pravem sloupci (2. a 4. karticka -
   "Tištěné střihy až domů" a "Střihy prověřené praxí") jsou o kousek
   vetsi (37px -> 44px) nez ikonky v levem sloupci, na prani Jany.

   v23 (tato verze) - ikonka "Tištěné střihy až domů" (2. karticka)
   jeste vetsi (44px -> 52px), ostatni 3 ikonky beze zmeny.

   v24 (tato verze) - oprava probliknuti/poskoceni bloku "Co se teď
   šije nejvíce" pri nacteni/obnoveni stranky na mobilu: JS soubor
   (v15) tento blok presouva az po nacteni stranky, ale prohlizec
   nekdy stihne vykreslit jeho PUVODNI polohu jeste pred tim, nez se
   skript spusti - pak to vypada, ze blok "poskoci" z jednoho mista
   na druhe. Reseni: blok je pomoci CSS od zacatku schovany
   (visibility: hidden - zabira si misto, jen neni videt) a az JS
   soubor dokonci presun, prida na <body> tridu "fzhp-sije-ready",
   ktera ho v CSS zase odkryje - uzivatel tak uvidi blok vzdy az na
   spravnem, finalnim miste. DULEZITE: tato uprava vyzaduje NOVOU
   verzi JS souboru (v15) - samotna tato CSS zmena bez noveho JS by
   blok jen schovala natrvalo, protoze by nikdo neprisel tridu
   "fzhp-sije-ready" pridat.
   ============================================================ */

@media (max-width: 767px) {
  body.in-index .container.content-wrapper {
    padding-top: 6px !important;
  }
  body.in-index #carousel img {
    border-radius: 6px;
  }
  body.in-index #carousel {
    margin-top: -2px;
    margin-bottom: 6px;
  }
}

/* ---- proužek s hodnocenim obchodu ---- */

/* na pocitaci se nezobrazuje vubec */
#fzhp-rating-strip {
  display: none;
}

@media (max-width: 767px) {
  body.in-index #fzhp-rating-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 12px;
    background: rgba(164, 219, 232, 0.45);
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 6px;
    gap: 8px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
}

.fzhp-label {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  color: #000000;
}
.fzhp-score {
  color: #ECB911;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
}
.fzhp-sep {
  width: 1px;
  height: 16px;
  background: #1F1F1F;
}
.fzhp-count {
  font-weight: 700;
  color: #1F1F1F;
}

/* ---- dve tlacitka "PDF střihy" / "Tištěné střihy" pod proužkem ---- */

/* na pocitaci se nezobrazuji, puvodni bannery zustavaji beze zmeny */
#fzhp-cat-buttons {
  display: none;
}

@media (max-width: 767px) {
  /* schovat puvodni dva bannery (next-to-carousel-banners) - nahrazuji
     je nova tlacitka nize */
  body.in-index .banners-row > .col-sm-4 {
    display: none !important;
  }

  body.in-index #fzhp-cat-buttons {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
  }

  body.in-index .fzhp-cat-btn {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 76px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: rgba(164, 219, 232, 0.45);
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  body.in-index .fzhp-cat-btn img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
  }

  body.in-index .fzhp-cat-btn span {
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #000000;
    line-height: 1.15;
  }
}

/* ---- sekce se 4 dlazdicemi "Vyberte si střih podle toho, pro koho šijete" ---- */

/* na pocitaci se nezobrazuje vubec */
#fzhp-kat-section {
  display: none;
}

@media (max-width: 767px) {
  body.in-index #fzhp-kat-section {
    display: block;
    background: #D6EDBD;
    border-radius: 6px;
    padding: 14px;
    box-sizing: border-box;
    margin-bottom: 6px;
  }

  body.in-index .fzhp-kat-heading {
    margin: 0 0 12px 0;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    color: #000000;
    text-align: center;
  }

  body.in-index .fzhp-kat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.in-index .fzhp-kat-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
  }

  body.in-index .fzhp-kat-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.in-index .fzhp-kat-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20%;
    min-height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    box-sizing: border-box;
    background: rgba(255, 255, 250, 0.77);
    border-radius: 0 0 6px 6px;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---- sekce s recenzemi "Švadlenky hodnotí Fazonetku" ---- */

/* na pocitaci se nezobrazuje vubec */
#fzhp-recenze-section {
  display: none;
}

@media (max-width: 767px) {
  body.in-index #fzhp-recenze-section {
    display: block;
    background: rgba(164, 219, 232, 0.45);
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    margin-bottom: 6px;
  }

  body.in-index .fzhp-recenze-heading {
    margin: 0 0 4px 0;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #000000;
    text-align: center;
  }

  body.in-index .fzhp-recenze-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 9px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* "5,0 ★★★★★" v souhrnnem radku o neco vetsi nez pocet recenzi
     (scopovano jen sem, aby se nedotklo puvodniho proužku nahore,
     ktery pouziva stejne tridy .fzhp-score/.fzhp-sep/.fzhp-count) */
  body.in-index .fzhp-recenze-summary .fzhp-score {
    font-size: 17px;
  }
  body.in-index .fzhp-recenze-summary .fzhp-sep {
    height: 18px;
  }

  body.in-index .fzhp-recenze-cards-wrap {
    position: relative;
  }

  body.in-index .fzhp-recenze-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.in-index .fzhp-recenze-viewport::-webkit-scrollbar {
    display: none;
  }

  body.in-index .fzhp-recenze-track {
    display: flex;
  }

  body.in-index .fzhp-recenze-card {
    flex: 0 0 100%;
    scroll-snap-align: center;
    background: #FFFFFF;
    border: 2px solid rgba(164, 219, 232, 1);
    border-radius: 6px;
    padding: 6px 34px;
    box-sizing: border-box;
  }

  body.in-index .fzhp-recenze-head {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    margin-bottom: 1px;
  }

  body.in-index .fzhp-recenze-stars {
    display: block;
    color: #ECB911;
    font-size: 19px;
    line-height: 1;
    margin-bottom: 1px;
  }

  body.in-index .fzhp-recenze-text {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #1F1F1F;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.in-index .fzhp-recenze-text.fzhp-recenze-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  body.in-index .fzhp-recenze-toggle {
    display: none;
    margin-top: 6px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    color: #2274A5;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  body.in-index .fzhp-recenze-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: #333333;
    cursor: pointer;
    z-index: 2;
    padding: 0;
  }
  body.in-index .fzhp-recenze-nav-prev {
    left: 6px;
  }
  body.in-index .fzhp-recenze-nav-next {
    right: 6px;
  }
}

/* ---- blok "Co se teď šije nejvíce" - nadpis + karty jako 1 souvisly ramecek ---- */

@media (max-width: 767px) {
  /* !important je tu potreba, protoze sablona ma pro tento nadpis
     pevne nastavenou sirku i zaporne okraje primo ve svem CSS */
  body.in-index .homepage-products-heading-1 {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 6px 6px 0 0 !important;
  }

  /* cast s kartami produktu hned pod nadpisem mela stejny problem
     (presah + ctvercove rohy), navic jeji sirku sablona vynucuje
     primo JavaScriptem (inline stylem) - proto se cili na konkretni
     ID #products-1 (prvni skupina produktu), aby to spolehlive
     prebilo. Zaobleni je jen dole (nahore navazuje rovnou na uz
     zaobleny nadpis nad tim, takze spolu tvori jeden ramecek). */
  body.in-index #products-1.product-slider {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 0 6px 6px !important;
  }
}

/* ---- v24: schovat blok "Co se teď šije nejvíce" (nadpis + carousel),
   dokud ho doplnkovy JS soubor (v15) nepresune na sve finalni misto -
   jinak bylo na mobilu pri nacitani/obnoveni stranky chvilku videt
   jeho PUVODNI polohu, coz vypadalo jako "poskoceni"/probliknuti.
   Jakmile JS presun dokonci (nebo po pojistce, kdyby se nepovedl),
   prida na <body> tridu "fzhp-sije-ready", ktera blok tady zase
   odkryje - uzivatel tak uvidi blok vzdy az na spravnem miste.
   visibility (misto display:none) zachovava misto v rozlozeni, takze
   se okoli behem schovavani/odkryvani jinak neposouva.

   v26 - najit skutecny duvod probliknuti/poskakovani vice prvku
   soucasne (ne jen tohoto jednoho bloku): proužek s hodnocenim
   (#fzhp-rating-strip) a sekce se švadlenkami (#fzhp-recenze-section)
   si sve udaje nactou z internetu AZ PO zobrazeni stranky - a kdyz
   se pak vlozi doprostred jiz zobrazene stranky, VSE POD NIMI
   (vcetne bloku "Co se teď šije nejvíce" a 4 ikonek vyhod, ktere by
   jinak uz byly hotove a viditelne) se viditelne posune dolu.
   Stejnou ochranu (schovano, dokud neni definitivne hotovo, pak
   odkryto vse najednou) proto ted maji i tyto dve sekce - a DULEZITE:
   VSECHNY casti uvnitr spolecneho ramecku #fzhp-reorder-wrap KROME
   samotneho "radku s bannery" (ten obsahuje hlavni banner #carousel,
   ktery musi byt videt uplne od zacatku) - tedy nadpis "Co se teď
   šije nejvíce", carousel produktu, fotorecenze i 4 ikonky vyhod -
   protoze kdyz "radek s bannery" postupne roste (jak do nej pribyva
   proužek/tlacitka/dlazdice/švadlenky), vse uvnitr stejneho ramecku
   POD nim by se jinak posouvalo spolu s nim, i kdyby uz samo o sobe
   bylo hotove. Viz upraveny JS soubor (v23), ktery ted na dokonceni
   obou nacitani ceka, nez cokoli z tohoto spolecneho bloku odkryje.

   v27 - overil jsem opakovane primo nastrojem, kterym prohlizec
   Chrome sam meri "poskakovani" stranky (Layout Instability API -
   stejna technologie, kterou pocitaji napr. Google nastroje pro
   rychlost webu): na skutecnem mobilnim zobrazeni, se studenou
   mezipameti (jako v novem anonymnim okne), opakovane a v ruznych
   rychlostech nacitani - a k zadnemu POSUNUTI polohy uz nedochazi.
   Zbyva ale jedna vec, kterou uz nemeri poloha, ale ktera muze
   pusobit jako probliknuti: vsechny schovane casti se ve chvili,
   kdy jsou hotove, objevi VSECHNY NARAZ a OKAMZITE (bez pozvolneho
   prechodu) - technicky se nic neposune, ale takove "naskoceni"
   muze oko vnimat podobne jako blik. Reseno pridanim jemneho
   prolnuti (0,25 vteriny) mezi schovanym a viditelnym stavem -
   misto okamziteho naskoceni se prvky jemne "rozsviti".

   v28 - i po v27 probliknuti hlaseno dal, a podle testovani na
   telefonu k nemu nedochazelo jeste pred tim, nez jsme zacali
   presouvat blok "Co se teď šije nejvíce". Zaver: spolecne "schovat
   uplne vsechno a odkryt to vsechno naraz v jednu chvili" je samo
   o sobe napadna zmena (najednou 4-5 casti stranky), i kdyz bez
   jakehokoli posunu polohy. Reseno zrusenim spolecneho odkryti:
   - tlacitka PDF/Tištěné, 4 dlazdice a 4 tlacitka vyhod uz vubec
     neschovavame - nejsou zavisla na zadnych datech ze site, takze
     se zobrazi hned (presne jako v uplne puvodni verzi stranky)
   - proužek s hodnocenim a sekce se švadlenkami se ted schovavaji
     a odkryvaji KAZDA SAMA ZA SEBE (vlastni trida "fzhp-visible" -
     viz upraveny JS soubor v25), nezavisle na sobe navzajem
   - presun bloku "Co se teď šije nejvíce" (nadpis+carousel) se
     poradi schovat/odkryt sam za sebe (trida "fzhp-block-moved" na
     #fzhp-reorder-wrap), nezavisle na obou predchozich ---- */

@media (max-width: 767px) {
  #fzhp-rating-strip,
  #fzhp-recenze-section {
    transition: opacity .25s ease;
  }
  #fzhp-rating-strip:not(.fzhp-visible),
  #fzhp-recenze-section:not(.fzhp-visible) {
    visibility: hidden;
    opacity: 0;
  }

  body.in-index #fzhp-reorder-wrap > .homepage-products-heading-1,
  body.in-index #fzhp-reorder-wrap > .homepage-products-heading-1 + .products-wrapper.product-slider-holder.has-navigation {
    transition: opacity .25s ease;
  }
  body.in-index #fzhp-reorder-wrap:not(.fzhp-block-moved) > .homepage-products-heading-1,
  body.in-index #fzhp-reorder-wrap:not(.fzhp-block-moved) > .homepage-products-heading-1 + .products-wrapper.product-slider-holder.has-navigation {
    visibility: hidden;
    opacity: 0;
  }
}

/* ============================================================
   v25 - spolehlive poradi bloku "Co se teď šije nejvíce",
   Fotorecenze a "Proč šít podle Fazonetky" pomoci CSS "order"
   ------------------------------------------------------------
   Cizi doplnek Fotorecenze si sam (nezavisle na nas, s vlastnim
   nepredvidatelnym zpozdenim - klidne az za nekolik vterin) vklada
   svuj blok tesne PRED nadpis "Co se teď šije nejvíce", at uz je
   kdekoli. Drivejsi pokusy to resit pomoci JS (hlidat a pripadne
   presunout) vedly bud k viditelnemu poskakovani, nebo (pri cekani
   na spravne poradi pred zobrazenim) k nepripustne pomalemu
   zobrazeni cele sekce.

   Novy zpusob: JS soubor (v22) uz obaluje nadpis a carousel do
   spolecneho ramecku #fzhp-reorder-wrap (spolu s puvodnim rádkem
   bannerů, kam se doplnek Fotorecenze vzdy vlozi taky, protoze je
   to nyni rodic nadpisu). Tady v CSS z tohoto ramecku uděláme
   flexbox a kazde jeho casti prideli poradove cislo (order) - takze
   se zobrazi VZDY ve spravnem poradi bez ohledu na to, kdy/kam se
   doplnek Fotorecenze skutecne vlozi do HTML. Zadne cekani, zadne
   dodatecne presouvani. ---- */
@media (max-width: 767px) {
  body.in-index #fzhp-reorder-wrap {
    display: flex;
    flex-direction: column;
  }
  body.in-index #fzhp-reorder-wrap > .row.banners-row {
    order: 0;
  }
  body.in-index .homepage-products-heading-1 {
    order: 10;
  }
  body.in-index .homepage-products-heading-1 + .products-wrapper.product-slider-holder.has-navigation {
    order: 11;
  }
  body.in-index #fzhp-reorder-wrap .fz-photo-reviews-band {
    order: 20;
  }
  body.in-index .fzhp-benefit-heading {
    order: 30;
  }
  body.in-index #fzhp-benefit-buttons {
    order: 31;
  }
}

/* ---- 4 ikonky vyhod - nove misto (pod "Co se teď šije nejvíce") a vzhled ---- */

@media (max-width: 767px) {
  /* schovat puvodni nativni blok "Konkurenční výhody" - nahrazuje
     ho novy blok #fzhp-benefit-buttons stejneho vzhledu jako
     tlacitka PDF/Tištěné střihy (viz JS soubor) */
  body.in-index .benefitBanner.position--benefitHomepage {
    display: none !important;
  }

  /* nadpis nad ikonkami - obycejne cerne pismo na bilem (beze
     zvlastniho barevneho pozadi, na rozdil od ostatnich sekci).
     v19: min-height + flexbox centrovani - nadpis je tak vzdy presne
     uprostred volneho prostoru nad ikonkami (misto pouheho odsazeni
     margin-bottom, ktere ho tlacilo nahoru), a soucasne tento volny
     prostor cely zvetsuje (z ~32px na 43px, tj. o tretinu). */
  body.in-index .fzhp-benefit-heading {
    margin: 0;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
    color: #000000;
    text-align: center;
  }

  /* stejna trida .fzhp-cat-btn jako u tlacitek PDF/Tištěné střihy
     (viz vyse) se tu pouzije znovu beze zmeny - jen wrapper je
     mrizka 2×2 misto jedne rady po 2 */
  body.in-index #fzhp-benefit-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 6px;
  }

  /* v19: karticky v tomto konkretnim bloku jsou o tretinu nizsi nez
     puvodni .fzhp-cat-btn (76px -> 51px), vcetne pomerne zmensene
     ikonky a mensiho svisleho odsazeni - cileno jen na tento blok
     (#fzhp-benefit-buttons), aby se nedotklo puvodnich tlacitek
     "PDF střihy" / "Tištěné střihy" jinde na strance, ktera pouzivaji
     stejnou tridu .fzhp-cat-btn beze zmeny. */
  body.in-index #fzhp-benefit-buttons .fzhp-cat-btn {
    min-height: 51px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  body.in-index #fzhp-benefit-buttons .fzhp-cat-btn img {
    width: 37px;
    height: 37px;
  }

  /* v20: stejna velikost pisma jako popisky "Dětské střihy" apod.
     (.fzhp-kat-label) o kus nize na strance.
     v21: text vycentrovany (dulezite hlavne kdyz se zalomi na
     vice radku) */
  body.in-index #fzhp-benefit-buttons .fzhp-cat-btn span {
    font-size: 13px;
    text-align: center;
  }

  /* v22: ikonky v pravem sloupci o kousek vetsi nez v levem.
     v23: ikonka "Tištěné střihy až domů" jeste vetsi nez zbyle 3. */
  body.in-index #fzhp-benefit-buttons .fzhp-cat-btn:nth-child(2) img {
    width: 52px;
    height: 52px;
  }
  body.in-index #fzhp-benefit-buttons .fzhp-cat-btn:nth-child(4) img {
    width: 44px;
    height: 44px;
  }
}

/* ---- hover efekt (sjednoceny se zelenymi kartami podkategorii, napr. na strance Damske strihy) ---- */

@media (max-width: 767px) {
  body.in-index #fzhp-rating-strip,
  body.in-index .fzhp-cat-btn,
  body.in-index .fzhp-kat-tile {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    /* v27: pridano "opacity .25s ease" - #fzhp-rating-strip potrebuje
       (krome tohoto puvodniho hover efektu) i plynuly prechod pri
       prvnim zobrazeni (viz vyse), a protoze toto pravidlo je v
       souboru napsane pozdeji, jinak by puvodni "transition" bez
       opacity to plynule zobrazeni prebilo/zrusilo. */
    transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
  }

  body.in-index #fzhp-rating-strip:hover,
  body.in-index .fzhp-cat-btn:hover,
  body.in-index .fzhp-kat-tile:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(34, 116, 165, .25);
    z-index: 2;
    position: relative;
  }
}