/* v2-recenze.css – recenze obchodu z Heureky (Ověřeno zákazníky), vykresluje js/script/v2-recenze.js.
   Načítá head-block.htm globálně. Kontejnery [data-heureka-recenze]: topbar (text v hlavičce / buyboxu),
   hp (sekce .hp-recenze na úvodu: souhrn + vodorovný pruh karet), detail (.pd-recenze pod #pd-hodnoceni:
   souhrn + 3 karty v mřížce), mini (patička košíku). Hvězdy = sprite #i-star z MasterMain. */

/* hvězdy s částečným vyplněním */
.v2 .hr-stars { position: relative; display: inline-flex; line-height: 1; color: #f59e0b; vertical-align: middle; }
.v2 .hr-stars-off, .v2 .hr-stars-on { display: inline-flex; gap: 1px; white-space: nowrap; }
.v2 .hr-stars-off { color: var(--c-border-strong); }
.v2 .hr-stars-on { position: absolute; left: 0; top: 0; overflow: hidden; }
.v2 .hr-stars .ico { width: 16px; height: 16px; flex: none; fill: currentColor; stroke: none; }
.v2 .hr-stars--lg .ico { width: 22px; height: 22px; }

/* souhrn (velké číslo, hvězdy, počty, odznak, odkaz) */
.v2 .hr-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding: 18px 20px; background: var(--c-bg); border-radius: var(--radius-m); }
.v2 .hr-sum-big { font-family: var(--font-head); font-size: 44px; font-weight: 700; line-height: 1; color: var(--c-text); white-space: nowrap; }
.v2 .hr-sum-big span { font-size: 18px; color: var(--c-muted); font-weight: 600; margin-left: 2px; }
.v2 .hr-sum-mid { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--c-muted); }
.v2 .hr-sum-right { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-left: auto; }
.v2 .hr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--c-border); font-size: 13px; font-weight: 600; color: var(--c-ok); white-space: nowrap; }
.v2 .hr-badge .ico { color: var(--c-ok); }
.v2 .hr-sum-link { font-size: 14px; font-weight: 600; color: var(--c-info); text-decoration: underline; text-underline-offset: 2px; }
.v2 .hr-sum-link:hover { color: var(--c-brand); }
.v2 .hr-sum--compact { padding: 14px 16px; gap: 12px 20px; }
.v2 .hr-sum--compact .hr-sum-big { font-size: 34px; }
@media (max-width: 767.98px) {
    .v2 .hr-sum { gap: 12px 16px; padding: 14px; }
    .v2 .hr-sum-big { font-size: 36px; }
    .v2 .hr-sum-right { margin-left: 0; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* karta recenze */
.v2 .hr-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 14px 16px; font-size: 14px; color: var(--c-text); }
.v2 .hr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2 .hr-card-date { font-size: 12px; color: var(--c-muted); white-space: nowrap; }
.v2 .hr-card-text { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.v2 .hr-card-pm { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.v2 .hr-card-pm li { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }
.v2 .hr-card-pm .ico { flex: none; margin-top: 2px; }
.v2 .hr-card-pm .is-plus .ico { color: var(--c-ok); }
.v2 .hr-card-pm .is-minus .ico { color: var(--c-brand); }
.v2 .hr-card-foot { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); }
.v2 .hr-card-foot .ico { color: var(--c-ok); }

/* úvodní stránka – vodorovný pruh karet */
.v2 .hr-hp { display: flex; flex-direction: column; gap: 4px; }
.v2 .hr-strip { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.v2 .hr-strip .hr-card { flex: 0 0 300px; scroll-snap-align: start; }
@media (max-width: 767.98px) { .v2 .hr-strip .hr-card { flex-basis: 260px; } }

/* detail produktu – souhrn + 3 poslední recenze */
.v2 .hr-detail { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; max-width: 980px; }
.v2 .hr-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .v2 .hr-list { grid-template-columns: repeat(3, 1fr); } }