/* ============================================================
   skinspecialist.cz — ss-storerating-5.css — v5
   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)); }

/* ============================================================
   v5: CTA hodnocení obchodu — vizuál produktových recenzí.
   SAMOSTATNÁ replikace ss-product designu (paddingy/barvy/fonty/layout),
   BEZ závislosti na product CSS/JS. Scope: .ss-sr-cta. Stavy řídí
   ss-storerating-5.js třídami .ss-rv-mode-empty / .ss-rv-mode-open.
   ============================================================ */
.ss-sr-cta { margin: clamp(40px, 5vw, 72px) auto clamp(72px, 9vw, 120px); }

/* skryj nativní trigger + prázdný ghost — otevíráme přes write-cta */
.ss-sr-cta .rate-form-trigger,
.ss-sr-cta [data-testid="buttonAddRating"] { display: none !important; }
.ss-sr-cta .rate-wrap { display: none !important; }

/* stavy: form area skrytá dokud nezmáčkneš write-cta; invite pryč při otevřeném */
.ss-sr-cta:not(.ss-rv-mode-open) .ss-sr-native { display: none; }
.ss-sr-cta.ss-rv-mode-open .ss-rv-invite { display: none !important; }

/* ---- INVITE KARTA (zavřený stav) ---- */
.ss-sr-cta .ss-rv-invite {
  max-width: 540px; margin: 0 auto;
  background: var(--ss-white, #fff);
  border: 1px solid rgba(15, 15, 15, .07);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(15, 15, 15, .06);
  padding: clamp(32px, 3vw, 46px) clamp(28px, 3vw, 44px);
  text-align: center;
}
.ss-sr-cta .ss-rv-invite-eyebrow { display: block; font-family: var(--ss-sans, "Manrope", sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ss-sage, #6B8B85); margin: 0 0 14px; }
.ss-sr-cta .ss-rv-invite-prompt { font-family: var(--ss-serif, Georgia, serif); font-style: italic; font-weight: 300; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; color: var(--ss-text, #0F0F0F); margin: 0 0 18px; }
.ss-sr-cta .ss-rv-invite-prompt em { font-style: italic; }
.ss-sr-cta .ss-rv-invite-stars { font-family: var(--ss-sans, "Manrope", Arial, sans-serif); font-size: 30px; letter-spacing: 8px; color: var(--ss-sage, #6B8B85); opacity: .5; margin: 0 0 26px; padding-left: 8px; line-height: 1; }
.ss-sr-cta .ss-rv-invite .write-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border: 0; border-radius: 4px; background: var(--ss-sage, #6B8B85); color: #fff; font-family: var(--ss-sans, "Manrope", sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .25s cubic-bezier(.4, 0, .2, 1); }
.ss-sr-cta .ss-rv-invite .write-cta:hover { background: var(--ss-sage-deep, #5A7E78); }

/* ---- KARTA FORMULÁŘE (otevřený stav) ---- */
.ss-sr-cta.ss-rv-mode-open #rate-form {
  display: block !important; visibility: visible !important;
  height: auto !important; max-height: none !important; overflow: visible !important;
  background: var(--ss-white, #fff);
  border: 1px solid rgba(15, 15, 15, .07);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 15, 15, .06);
  padding: clamp(26px, 3vw, 44px);
  max-width: 1100px; margin: 0 auto;
  position: relative;
}

/* FORM = grid 3 sloupce (vlevo hvězdy, vpravo pole) */
.ss-sr-cta.ss-rv-mode-open #formRating {
  max-width: none !important; width: 100%;
  display: grid;
  grid-template-columns: minmax(290px, .95fr) 1fr 1fr;
  grid-template-areas:
    "rate name    email"
    "rate comment comment"
    "rate consent submit";
  column-gap: clamp(32px, 3vw, 52px); row-gap: 18px; align-items: start;
}
.ss-sr-cta #formRating > * { min-width: 0; }
.ss-sr-cta #formRating .form-legend { display: none; }

/* levý panel = hvězdy přes celou výšku, svislý oddělovač */
.ss-sr-cta.ss-rv-mode-open #formRating .rating-stars-group {
  grid-area: rate; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; margin: 0;
  padding: 4px clamp(28px, 3vw, 48px) 4px 0;
  border-right: 1px solid rgba(15, 15, 15, .08);
}
.ss-sr-cta .rating-stars-description { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.ss-sr-cta .rating-star-description { display: none; }
.ss-sr-cta .ss-rv-head { text-align: center; }
.ss-sr-cta .ss-rv-eyebrow { display: block; font-family: var(--ss-sans, "Manrope", sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ss-sage, #6B8B85); margin: 0 0 12px; }
.ss-sr-cta .ss-rv-prompt { font-family: var(--ss-serif, Georgia, serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.2; color: var(--ss-text, #0F0F0F); margin: 0 0 16px; }
.ss-sr-cta .ss-rv-prompt em { font-style: italic; }

/* hvězdy (glyf cream-deep → sage při .full / hoveru) */
.ss-sr-cta .rating-stars-wrapper { display: flex; flex-direction: row; justify-content: center; gap: 8px; }
.ss-sr-cta .rating-star { display: inline-flex; align-items: center; justify-content: center; position: relative; width: auto; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; line-height: 1; cursor: pointer; }
.ss-sr-cta .rating-star input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ss-sr-cta .rating-star::before {
  content: "\2605" !important; font-family: var(--ss-sans, "Manrope", Arial, sans-serif) !important;
  color: var(--ss-cream-deep, #DCCFB6) !important; font-size: 38px; line-height: 1;
  transition: color .12s cubic-bezier(.4, 0, .2, 1), transform .12s cubic-bezier(.4, 0, .2, 1);
}
.ss-sr-cta .rating-star.full::before { color: var(--ss-sage, #6B8B85) !important; }
.ss-sr-cta .rating-star:hover::before { transform: scale(1.12); }

/* pole (jméno / e-mail / komentář) */
.ss-sr-cta.ss-rv-mode-open #formRating .form-group:has(#name)    { grid-area: name; }
.ss-sr-cta.ss-rv-mode-open #formRating .form-group:has(#email)   { grid-area: email; }
.ss-sr-cta.ss-rv-mode-open #formRating .form-group:has(#message) { grid-area: comment; }
.ss-sr-cta #formRating label { display: block; font-family: var(--ss-sans, "Manrope", sans-serif); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-muted, rgba(15, 15, 15, .62)); margin: 0 0 7px; }
.ss-sr-cta #formRating .form-control { width: 100%; box-sizing: border-box; font-family: var(--ss-sans, "Manrope", sans-serif); font-size: 15px; color: var(--ss-text, #0F0F0F); background: var(--ss-canvas, #FAF6EE); border: 1px solid rgba(15, 15, 15, .12); border-radius: 8px; padding: 12px 14px; transition: border-color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1); }
.ss-sr-cta #formRating .form-control:focus { outline: 0; border-color: var(--ss-sage, #6B8B85); background: #fff; }
.ss-sr-cta #formRating textarea.form-control { resize: vertical; min-height: 82px; }

/* consent + submit (spodní řádek) */
.ss-sr-cta.ss-rv-mode-open #formRating .consents { grid-area: consent; align-self: center; margin: 0; }
.ss-sr-cta #formRating .consents label { font-family: var(--ss-sans, "Manrope", sans-serif); font-weight: 400; font-size: 12.5px; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--ss-muted, rgba(15, 15, 15, .62)); margin: 0; }
.ss-sr-cta #formRating .consents a { color: var(--ss-terracotta, #9A7A5F); }
.ss-sr-cta.ss-rv-mode-open #formRating .form-group:has([data-testid="buttonSendRating"]) { grid-area: submit; justify-self: end; align-self: center; margin: 0; }
.ss-sr-cta [data-testid="buttonSendRating"] {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px;
  background: var(--ss-sage, #6B8B85) !important; color: #fff !important; border: 0; border-radius: 6px;
  font-family: var(--ss-sans, "Manrope", sans-serif); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
}
.ss-sr-cta [data-testid="buttonSendRating"]:hover { background: var(--ss-sage-deep, #5A7E78) !important; }

/* × zavírací křížek karty */
.ss-sr-cta .ss-rv-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ss-muted, rgba(15, 15, 15, .5)); cursor: pointer;
  transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
}
.ss-sr-cta .ss-rv-close:hover { background: var(--ss-canvas, #FAF6EE); color: var(--ss-text, #0F0F0F); }
.ss-sr-cta .ss-rv-close svg { display: block; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ss-sr-cta.ss-rv-mode-open #formRating {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "rate    rate"
      "name    email"
      "comment comment"
      "consent submit";
  }
  .ss-sr-cta.ss-rv-mode-open #formRating .rating-stars-group {
    align-self: center; padding: 0 0 24px; border-right: 0; border-bottom: 1px solid rgba(15, 15, 15, .08);
  }
}
@media (max-width: 560px) {
  .ss-sr-cta.ss-rv-mode-open #formRating {
    grid-template-columns: 1fr;
    grid-template-areas: "rate" "name" "email" "comment" "consent" "submit";
  }
  .ss-sr-cta.ss-rv-mode-open #formRating .form-group:has([data-testid="buttonSendRating"]) { justify-self: stretch; }
  .ss-sr-cta [data-testid="buttonSendRating"] { width: 100%; justify-content: center; }
}

/* ---- 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; }
}