/* ============================================================
   skinspecialist.cz — ss-storerating-3.css — v3
   SECTION: /hodnoceni-obchodu/ — PLNĚ CUSTOM (replace pattern)
   Gate: body.in-hodnoceni-obchodu + body.ss-storerating-loaded

   ss-storerating-3.js přečte nativní hodnocení obchodu (#ratingsList
   .vote-wrap) a postaví: hero s agregátem + ss-reviews carousel +
   karty ve stylu produktových recenzí (.ss-product-review, styl je
   globálně v ss-product-13.css) + CTA s přesunutým nativním rate
   formulářem. Nativní výpis + sidebar se schovají.

   Reference v Záhlaví HTML kódy (po style.css + ss-product-13.css).
   ============================================================ */

/* ---- KILL NATIVE (jen když JS postavil root) ---- */
body.ss-storerating-loaded #content-wrapper,
body.ss-storerating-loaded .breadcrumbs-wrapper { display: none !important; }
body.ss-storerating-loaded { background: var(--ss-canvas, #F2EBDB) !important; }

/* ---- ROOT ---- */
.ss-storerating-root { font-family: var(--ss-sans, sans-serif); color: var(--ss-black, #0F0F0F); }
.ss-sr-wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

/* ---- HERO ---- */
.ss-sr-hero { text-align: center; padding: clamp(56px, 7vw, 104px) 0 clamp(36px, 4vw, 56px); }
.ss-sr-hero__eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ss-sage, #6B8B85); margin-bottom: 22px; }
.ss-sr-hero__title { font-family: var(--ss-serif, Georgia, serif); font-weight: 340; font-size: clamp(38px, 6vw, 72px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 28px; color: var(--ss-dark, #2A2520); }
.ss-sr-hero__title em { font-style: italic; font-weight: 340; }
.ss-sr-hero__agg { display: inline-flex; align-items: center; gap: 18px; padding: 14px 26px; background: var(--ss-white, #fff); border: 1px solid var(--ss-border, rgba(15,15,15,.10)); border-radius: 100px; box-shadow: var(--ss-shadow, 0 8px 32px rgba(15,15,15,.06)); }
.ss-sr-hero__stars { color: var(--ss-terracotta, #9A7A5F); letter-spacing: 3px; font-size: 18px; }
.ss-sr-hero__score { font-family: var(--ss-serif, Georgia, serif); font-size: 26px; font-weight: 400; color: var(--ss-dark, #2A2520); line-height: 1; }
.ss-sr-hero__score span { font-size: 15px; color: var(--ss-muted, rgba(15,15,15,.62)); }
.ss-sr-hero__count { font-size: 13.5px; color: var(--ss-muted, rgba(15,15,15,.62)); border-left: 1px solid var(--ss-border-mid, rgba(15,15,15,.16)); padding-left: 18px; }
.ss-sr-hero__sub { max-width: 520px; margin: 26px auto 0; font-size: 15.5px; line-height: 1.6; color: var(--ss-muted, rgba(15,15,15,.62)); }

/* ---- karty hodnocení (reuse .ss-product-review z ss-product-13.css) ---- */
.ss-sr-reviews { padding: clamp(56px, 7vw, 104px) 0 clamp(24px, 3vw, 40px); }
.ss-sr-reviews__head { text-align: center; margin-bottom: clamp(36px, 4vw, 56px); }
.ss-sr-reviews__eyebrow { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ss-sage, #6B8B85); margin-bottom: 16px; }
.ss-sr-reviews__title { font-family: var(--ss-serif, Georgia, serif); font-weight: 340; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.015em; margin: 0; color: var(--ss-dark, #2A2520); }
.ss-storerating-root .ss-product-reviews-list { max-width: 920px; margin: 0 auto; }

/* prázdný stav */
.ss-sr-empty { max-width: 560px; margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ss-muted, rgba(15,15,15,.62)); }

/* ---- CTA + přesunutý nativní rate formulář ---- */
.ss-sr-cta { margin: clamp(40px, 5vw, 72px) auto clamp(72px, 9vw, 120px); }
.ss-sr-cta__box { max-width: 680px; margin: 0 auto; text-align: center; background: var(--ss-cream, #E8DDC8); border: 1px solid var(--ss-border, rgba(15,15,15,.10)); border-radius: 14px; padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px); }
.ss-sr-cta__title { font-family: var(--ss-serif, Georgia, serif); font-weight: 340; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; margin: 0 0 12px; color: var(--ss-dark, #2A2520); }
.ss-sr-cta__sub { font-size: 15px; color: var(--ss-muted, rgba(15,15,15,.62)); margin: 0 0 28px; line-height: 1.6; }
.ss-sr-cta__formslot { margin-top: 8px; }

/* nativní rate trigger/tlačítka uvnitř CTA → brand sage */
.ss-sr-cta__formslot .btn,
.ss-sr-cta__formslot [data-testid="buttonAddRating"],
.ss-sr-cta__formslot [data-testid="buttonSendRating"] {
  display: inline-block; background: var(--ss-sage, #6B8B85) !important; color: #fff !important;
  border: 0 !important; border-radius: var(--ss-r, 6px) !important; font-family: var(--ss-sans, sans-serif) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .22em !important; text-transform: uppercase !important;
  padding: 16px 38px !important; cursor: pointer; transition: background-color var(--ss-ease, .3s ease);
}
.ss-sr-cta__formslot .btn:hover,
.ss-sr-cta__formslot [data-testid="buttonAddRating"]:hover,
.ss-sr-cta__formslot [data-testid="buttonSendRating"]:hover { background: var(--ss-sage-deep, #5A7E78) !important; }
.ss-sr-cta__formslot .form-control { border: 1px solid rgba(15,15,15,.22); border-radius: 4px; }
.ss-sr-cta__formslot .form-control:focus { border-color: var(--ss-sage, #6B8B85); }
/* hvězdičkový výběr v rate formuláři → terakota */
.ss-sr-cta__formslot .rate-star.stars .star-on,
.ss-sr-cta__formslot .rating-star { color: var(--ss-terracotta, #9A7A5F); }

/* ---- ss-reviews carousel: full-bleed funguje (root je čistý centrovaný
   sourozenec #content-wrapper, žádný sidebar) — necháváme z ss-reviews-3.css.
   Jen vertikální odsazení. ---- */
.ss-storerating-root .ss-reviews { margin-top: clamp(8px, 1vw, 16px) !important; margin-bottom: 0 !important; }

@media (max-width: 600px) {
  .ss-sr-hero__agg { flex-direction: column; gap: 10px; }
  .ss-sr-hero__count { border-left: 0; padding-left: 0; }
}