/* ============================================================
   FAZONETKA – "Svadlenky hodnoti Fazonetku" (sekce s hodnocenim obchodu)
   Zobrazuje se automaticky na produktovych strankach:
   - PC: pod fotogalerii v levem sloupci (pravy sloupec beze zmeny)
   - Mobil (do 767px): pod fotorecenzemi zakaznic (kdyz produkt fotorecenze
     nema, tak pod radkem ikon Tisk/Zeptat se/Hlidat/Sdilet - viz JS).
   Data (prumer, pocet, jednotliva hodnoceni) se nactou automaticky
   z realne stranky /hodnoceni-obchodu/ - viz doplnkovy JS soubor.
   Nic v puvodnim doplnku Hodnoceni obchodu+ se timto nemeni.

   v3 zmeny:
   - vsechna pisma, hvezdicky a sirka ramecku sladeny s velikostmi
     ze skutecne stranky /hodnoceni-obchodu/ (zmereno live)
   - nadpis vetsi, "5,0" + hvezdicky v souhrnu vyrazne vetsi,
     pocet hodnoceni tucne
   - na mobilu mala mezera (6px) mezi kartami pri posunu
   - na pocitaci se ted vejdou presne 2 cele karty bez nakukujici
     treti (sirku karet dopocitava JS, viz skript v3)

   v4 zmeny:
   - nadpis "Svadlenky hodnoti Fazonetku" je na mobilu o neco mensi
     nez na pocitaci (22px misto 24px) - pri 24px uz se na beznou
     sirku mobilu neveslo na jeden radek a zalamovalo se to na 2
     radky, coz nechtela
   - tlacitko "Zobrazit vsechna hodnoceni" melo byt vycentrovane
     (pokus, ktery se ale kvuli chybe popsane niz jeste neprojevil)

   v5 oprava:
   - tlacitko "Zobrazit vsechna hodnoceni" se PRED touto opravou
     centrovat nemohlo vubec (ani na mobilu, ani na pocitaci) - v3
     pridalo pravidlo ".fz-store-rating a.fzr-btn-all" (kvuli opravene
     bile barve textu tlacitka), ktere ma vyssi CSS "specificitu" nez
     puvodni pravidla pro vycentrovani, takze tise vyhravalo ono a
     tlacitko zustavalo "inline-block" (nejde vycentrovat pres
     margin:auto). Ted maji centrovaci pravidla stejne vysokou
     specificitu a jsou az za tim puvodnim, takze uz spravne vyhravaji
     ona - tlacitko je vycentrovane na mobilu i na pocitaci.

   v6 zmena:
   - hvezdicky u jednotlive recenze (uvnitr karty) zvetsene o 20 %
     (16px -> 19,2px). Hvezdicky v souhrnu nahore ("5,0 + hvezdicky")
     se nemeni, ty uz byly zvetsene v ramci v3.
   ============================================================ */

.fz-store-rating {
  --fzr-border-blue: #A4DBE8;
  --fzr-star-yellow: #ECB911;
  --fzr-petrol: #2274A5;
  --fzr-petrol-dark: #1B5A82;
  --fzr-text: #1F1F1F;
  --fzr-time: #666666;
  /* Raleway a Roboto uz nacita samotna sablona Shoptet (stejne fonty pouziva
     i doplnek Hodnoceni obchodu+), takze se tu nic dalsiho nedotahuje. */
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--fzr-text);
}
.fz-store-rating a {
  text-decoration: none;
  color: inherit;
}

.fzr-heading {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  margin: 0 0 10px;
  white-space: nowrap;
}

.fzr-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  cursor: pointer;
  width: fit-content;
}
.fzr-summary:hover .fzr-avg,
.fzr-summary:hover .fzr-count {
  text-decoration: underline;
}
.fzr-avg { font-size: 30px; font-weight: 700; color: var(--fzr-star-yellow); line-height: 1; }
.fzr-stars-sum { color: var(--fzr-star-yellow); font-size: 22px; letter-spacing: 1px; }
.fzr-count { font-size: 13px; font-weight: 700; color: var(--fzr-time); }

.fzr-cards-wrap { position: relative; }
.fzr-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.fzr-viewport::-webkit-scrollbar { display: none; }
.fzr-viewport.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.fzr-track { display: flex; width: max-content; }

.fzr-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
  color: #333;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s;
  z-index: 2;
  padding: 0;
}
.fzr-nav:hover { opacity: 1; }
.fzr-nav-prev { left: -4px; }
.fzr-nav-next { right: -4px; }

.fzr-card {
  background: #fff;
  border: 2px solid var(--fzr-border-blue);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  scroll-snap-align: start;
}
.fzr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fzr-name { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 20px; color: var(--fzr-text); }
.fzr-time { font-size: 16px; color: var(--fzr-time); white-space: nowrap; }
.fzr-stars { color: var(--fzr-star-yellow); font-size: 19.2px; letter-spacing: 1px; margin-bottom: 10px; }
.fzr-text {
  color: var(--fzr-text);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.fzr-card.expanded .fzr-text { -webkit-line-clamp: unset; overflow: visible; }
.fzr-card.expanded { min-height: auto; }
.fzr-toggle {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--fzr-petrol);
  background: none; border: none; padding: 0;
  text-align: left;
  width: fit-content;
  cursor: pointer;
}
.fzr-toggle.visible { display: inline-block; }

.fz-store-rating a.fzr-btn-all {
  display: inline-block;
  padding: 10px 22px;
  background: var(--fzr-petrol);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}
.fz-store-rating a.fzr-btn-all:hover { background: var(--fzr-petrol-dark); }

/* ---------- VYCHOZI (POCITAC, nad 767px) ---------- */
.fz-store-rating--desktop {
  display: block;
  padding: 20px 4px 4px;
}
.fz-store-rating--mobile { display: none; }

.fz-store-rating--desktop .fzr-viewport { padding: 2px 4px 6px; scroll-snap-type: x proximity; }
.fz-store-rating--desktop .fzr-track { gap: 14px; }
/* sirka karty (300px) je jen zalozni hodnota, nez ji JS presne dopocita
   tak, aby se na pocitaci vzdy vesly presne 2 cele karty bez nakukujici
   treti - viz applyCardWidth() ve skriptu */
.fz-store-rating--desktop .fzr-card { flex: 0 0 auto; width: 300px; min-height: 190px; padding: 16px 18px; }
/* v5: "a.fzr-btn-all" (ne jen ".fzr-btn-all") - musi to mit stejne
   vysokou specificitu jako pravidlo vyse, jinak by "display:block"
   prohralo a margin:auto by nemel na cem centrovat */
.fz-store-rating--desktop a.fzr-btn-all { display: block; width: fit-content; margin: 4px auto 6px; }

/* ---------- MOBIL (do 767px) ----------
   Sekce se vykresluje na strance dvakrat (PC i mobilni varianta) a media
   query pak vzdy jednu z nich schova - stejny princip jako u ostatnich
   uprav na webu, zadne duplicitni viditelne kopie ani duplicitni id. */
@media (max-width: 767px) {
  .fz-store-rating--desktop { display: none; }
  .fz-store-rating--mobile {
    display: block;
    margin-top: 20px;
    padding: 0 16px 22px;
  }
  /* v4: o trochu mensi nez na pocitaci, aby se "Svadlenky hodnoti
     Fazonetku" na beznou sirku mobilu vzdy veslo na jeden radek */
  .fz-store-rating--mobile .fzr-heading { font-size: 22px; }
  .fz-store-rating--mobile .fzr-viewport { scroll-snap-type: x mandatory; }
  /* mala mezera mezi kartami, aby pri posunu nepusobily "slepene" */
  .fz-store-rating--mobile .fzr-track { gap: 6px; }
  .fz-store-rating--mobile .fzr-card { min-height: 170px; padding: 16px 18px; }
  /* v5: totez co u pocitace - "a.fzr-btn-all" kvuli specificite */
  .fz-store-rating--mobile a.fzr-btn-all {
    display: block;
    width: fit-content;
    margin: 18px auto 0;
  }
}