/* ============================================================
   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 (tato verze) - 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 (tato verze) - 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 (tato verze) - 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.
   ============================================================ */

@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;
  }
}

/* ---- 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);
    transition: transform .2s ease, box-shadow .2s 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;
  }
}