/* ============================================================
   firemnikrabicky.cz — fk-rating-1.css — v1
   /hodnoceni-obchodu/ (+ /strana-N/) — body.in-hodnoceni-obchodu.
   CSS-only reskin nativni Shoptet stranky hodnoceni obchodu
   (zadny type-page -> fk-docs na ni NESAHA; zadny JS).
   Do Zahlavi ZA fk-kontakt-4.css.

   Nativni mechanika (main-11, ums_discussion_rating_forms--on):
   - hvezdy = font shoptet, .star-on:before content \e91c -> prebarvit color
   - histogram: .rate-bar{width:var(--rate-bar-width)} = VYPLN, track delame my
   - form labely: nativni label{float:left;padding-right:20px} -> NUTNO nulovat
     (handoff past z kontakt v4)
   - avatary .vote-initials s inline --avatar-bg (barevne krouzky = nativni,
     NECHAT, schvaleny vzor z footeru)
   - #rate-form je .js-hidden, odkryva nativni JS (unveil) po kliku na tlacitko
   - POZOR: tlacitka NEMAJI id, jen data-testid -> selektory pres tridy;
     .rate-block ma nativne padding-right:40px (nulovat, kazi % zaklad baru)
   ============================================================ */

/* ---- 1) PLATNO + NEUTRALIZACE ---- */
body.in-hodnoceni-obchodu{background:#F4F0E6!important;font-family:'Aspekta',-apple-system,sans-serif}
body.in-hodnoceni-obchodu .breadcrumbs-wrapper{display:none!important}
body.in-hodnoceni-obchodu aside.sidebar,
body.in-hodnoceni-obchodu .sidebar-left{display:none!important}
body.in-hodnoceni-obchodu .container.content-wrapper,
body.in-hodnoceni-obchodu .content-wrapper-in,
body.in-hodnoceni-obchodu main#content,
body.in-hodnoceni-obchodu main#content.narrow{
  display:block!important;background:transparent!important;max-width:100%!important;
  width:100%!important;margin:0!important;padding:0!important;float:none!important;border:none!important}
body.in-hodnoceni-obchodu main#content .content-inner{
  max-width:900px;margin:0 auto;padding:clamp(30px,4.5vw,54px) clamp(16px,3vw,28px) clamp(44px,6vw,72px)}
/* patecni pruh (margin sdileneho footeru) pryc — jako kontakt v4 */
body.in-hodnoceni-obchodu footer.fk-foot{margin-top:0!important}

/* ---- 2) H1 ---- */
body.in-hodnoceni-obchodu .content-inner > h1{
  font-family:'Aspekta',-apple-system,sans-serif;font-size:clamp(30px,4.4vw,46px);font-weight:800;
  letter-spacing:-.02em;line-height:1.05;color:#1A2B1C;text-align:center;margin:0 0 clamp(22px,3vw,34px)}

/* ---- 3) HVEZDY (globalni prebarveni na strance) ---- */
body.in-hodnoceni-obchodu .star.star-on::before,
body.in-hodnoceni-obchodu .star.star-half::before{color:#E1B124}
body.in-hodnoceni-obchodu .star.star-off::before{color:rgba(26,43,28,.22)}

/* ---- 4) AGREGAT KARTA (.rate-wrap: prumer | histogram) ---- */
body.in-hodnoceni-obchodu .rate-wrap{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.5vw,48px);align-items:center;
  background:#FBF8F0;border:1px solid rgba(26,43,28,.08);border-radius:26px;
  padding:clamp(22px,3vw,36px) clamp(22px,3.5vw,44px);
  box-shadow:0 14px 34px rgba(34,57,36,.06);margin:0 0 clamp(18px,2.4vw,26px)}
body.in-hodnoceni-obchodu .rate-average-wrap{margin:0}
body.in-hodnoceni-obchodu .rate-average-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
body.in-hodnoceni-obchodu .rate-average{
  font-family:'Aspekta',-apple-system,sans-serif;font-size:clamp(48px,6vw,64px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:#1A2B1C}
body.in-hodnoceni-obchodu .rate-average-inner .star::before{font-size:18px!important;line-height:18px!important}
body.in-hodnoceni-obchodu .rate-star-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
body.in-hodnoceni-obchodu .rate-star-wrap .stars{display:flex;gap:3px}
body.in-hodnoceni-obchodu .stars-label{
  font-size:13.5px;font-weight:600;color:#6B7B6D;white-space:nowrap}

/* histogram */
body.in-hodnoceni-obchodu .votes{display:flex;flex-direction:column;gap:9px;margin:0}
body.in-hodnoceni-obchodu .rate-list{display:flex;align-items:center;gap:14px;cursor:default}
body.in-hodnoceni-obchodu .rate-list .rate-star{
  display:flex;align-items:center;gap:5px;flex:none;width:34px;justify-content:flex-end}
body.in-hodnoceni-obchodu .rate-list .rate-value{
  font-size:13.5px;font-weight:700;color:#1A2B1C;line-height:1}
body.in-hodnoceni-obchodu .rate-list .rate-star .star::before{font-size:13px;line-height:13px;color:#E1B124}
body.in-hodnoceni-obchodu .rate-block{
  flex:1;position:relative;background:#E6DFCD;border-radius:999px;height:10px;margin-right:58px;padding:0!important;display:block!important}
body.in-hodnoceni-obchodu .rate-bar{
  display:block;width:var(--rate-bar-width,0%);height:10px!important;min-width:0;
  background:#E1B124!important;border-radius:999px;position:static!important}
body.in-hodnoceni-obchodu .rate-count{
  position:absolute;right:-58px;top:50%;transform:translateY(-50%);
  font-size:12.5px;font-weight:600;color:#6B7B6D;white-space:nowrap;line-height:1}
body.in-hodnoceni-obchodu .rate-count.active{color:#1A2B1C}

/* ---- 5) TLACITKO PRIDAT HODNOCENI ---- */
body.in-hodnoceni-obchodu .add-comment{text-align:center;margin:0 0 clamp(26px,3.5vw,40px)}
body.in-hodnoceni-obchodu .add-comment .btn{
  display:inline-block;background:#E1B124!important;background-image:none!important;
  color:#1A2B1C!important;border:0!important;border-radius:999px!important;
  font-family:'Aspekta',-apple-system,sans-serif!important;font-size:15px!important;
  font-weight:800!important;letter-spacing:0!important;text-transform:none!important;
  padding:14px 34px!important;cursor:pointer;box-shadow:none!important;
  transition:background .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu .add-comment .btn:hover{background:#EBC23E!important;transform:translateY(-1px)}

/* ---- 6) FORMULAR (#rate-form; odkryva nativni JS) ---- */
body.in-hodnoceni-obchodu .vote-form{
  max-width:640px;margin:0 auto clamp(28px,4vw,44px);background:#FBF8F0;
  border:1px solid rgba(26,43,28,.08);border-radius:24px;
  padding:clamp(22px,3vw,34px);box-shadow:0 18px 44px rgba(34,57,36,.06)}
body.in-hodnoceni-obchodu .vote-form.js-hidden{display:none}
body.in-hodnoceni-obchodu .vote-form h3{
  font-family:'Aspekta',-apple-system,sans-serif;font-size:clamp(20px,2.2vw,25px);font-weight:800;
  letter-spacing:-.02em;color:#1A2B1C;text-align:center;margin:0 0 6px}
body.in-hodnoceni-obchodu .vote-form .form-legend{
  text-align:center;font-size:12.5px;color:#6B7B6D;margin:0 0 16px}
body.in-hodnoceni-obchodu .vote-form .form-legend .required-asterisk--before::before{color:#C0392B}
body.in-hodnoceni-obchodu #formRating .form-group{margin:0 0 16px}
/* labely: nativni float:left past (kontakt v4) + zarovnani s textem inputu */
body.in-hodnoceni-obchodu #formRating label{
  display:block;float:none!important;width:auto!important;position:static!important;
  transform:none!important;font-family:'Aspekta',-apple-system,sans-serif;
  text-align:left!important;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#3c4a3d;margin:0 0 7px;padding:0 0 0 20px!important}
body.in-hodnoceni-obchodu #formRating .form-control{
  width:100%;min-height:48px;font-family:'Aspekta',-apple-system,sans-serif;font-size:15px;
  color:#1A2B1C;background:#FFFFFF;border:1px solid rgba(26,43,28,.16);border-radius:999px;
  padding:12px 20px;box-sizing:border-box;box-shadow:none;text-align:left;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu #formRating textarea.form-control{
  border-radius:18px;min-height:150px;padding:14px 20px;resize:vertical;line-height:1.55}
body.in-hodnoceni-obchodu #formRating .form-control:focus{
  border-color:#E1B124;box-shadow:0 0 0 4px rgba(225,177,36,.18);outline:none}
body.in-hodnoceni-obchodu #formRating .no-display{display:none!important}
/* hvezdickovy vyber */
body.in-hodnoceni-obchodu #formRating .rating-stars-group{text-align:center}
body.in-hodnoceni-obchodu #formRating .rating-stars-description{
  font-size:13px;font-weight:600;color:#3c4a3d;margin:0 0 10px;padding:0!important;text-align:center!important}
body.in-hodnoceni-obchodu #formRating .rating-stars-wrapper{
  display:flex;justify-content:center;gap:2px}
body.in-hodnoceni-obchodu #formRating .rating-star{
  margin:0 0 0!important;padding:0!important;cursor:pointer}
body.in-hodnoceni-obchodu #formRating .rating-star::before{
  color:rgba(26,43,28,.22);font-size:32px!important;transition:color .15s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu #formRating .rating-star.full::before,
body.in-hodnoceni-obchodu #formRating .rating-star:hover::before{color:#E1B124}
body.in-hodnoceni-obchodu #formRating .rating-star-description{
  font-size:12.5px;color:#6B7B6D;margin:8px 0 0;text-align:center!important;padding:0!important}
/* consent + submit */
body.in-hodnoceni-obchodu #formRating .consents label{
  font-size:12.5px;color:#6B7B6D;font-weight:500;letter-spacing:0;
  text-align:center!important;padding:0!important}
body.in-hodnoceni-obchodu #formRating .consents a{
  color:#1A2B1C;text-decoration:none;border-bottom:1px solid rgba(26,43,28,.3)}
body.in-hodnoceni-obchodu #formRating button[type="submit"]{
  display:block;width:100%;background:#E1B124!important;background-image:none!important;
  color:#1A2B1C!important;border:0!important;border-radius:999px!important;
  font-family:'Aspekta',-apple-system,sans-serif!important;font-size:15.5px!important;
  font-weight:800!important;padding:15px 30px!important;cursor:pointer;
  text-transform:none!important;box-shadow:none!important;
  transition:background .25s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu #formRating button[type="submit"]:hover{background:#EBC23E!important;transform:translateY(-1px)}
/* validace (vzor kontakt v4) */
body.in-hodnoceni-obchodu #formRating .js-validated-element-wrapper.has-error .form-control,
body.in-hodnoceni-obchodu #formRating .form-control.error-field{
  border-color:#C0392B!important;box-shadow:0 0 0 4px rgba(192,57,43,.12)!important}
body.in-hodnoceni-obchodu #formRating .validator-msg,
body.in-hodnoceni-obchodu #formRating .js-validator-msg{
  display:block!important;margin:7px 4px 0 20px!important;text-align:left!important;
  font-family:'Aspekta',-apple-system,sans-serif!important;font-size:13px!important;
  font-weight:600!important;color:#C0392B!important}

/* ---- 7) VYPIS RECENZI (2sloupcovy masonry pres CSS columns) ---- */
body.in-hodnoceni-obchodu #ratingsList{
  columns:2;column-gap:18px;margin:0 0 clamp(24px,3vw,34px)}
body.in-hodnoceni-obchodu .vote-wrap{
  break-inside:avoid;display:block;background:#FBF8F0;border:1px solid rgba(26,43,28,.08);
  border-radius:18px;padding:18px 20px;margin:0 0 18px;box-shadow:0 10px 26px rgba(34,57,36,.05)}
body.in-hodnoceni-obchodu .vote-header{display:flex;align-items:center;gap:0;margin:0}
body.in-hodnoceni-obchodu .vote-pic{
  height:48px;min-width:48px;width:48px;padding-right:0;margin-right:14px;position:relative;flex:none}
body.in-hodnoceni-obchodu .vote-initials{
  width:48px;height:48px;line-height:46px;font-size:19px;font-weight:700;text-align:center;
  border:1px solid rgba(26,43,28,.08)}
body.in-hodnoceni-obchodu .vote-pic img{width:48px;height:48px;border-radius:50%}
body.in-hodnoceni-obchodu .vote-summary{display:flex;flex-direction:column;gap:3px;min-width:0}
body.in-hodnoceni-obchodu .vote-name{
  font-family:'Aspekta',-apple-system,sans-serif;font-size:15px;font-weight:750;color:#1A2B1C;
  overflow:hidden;text-overflow:ellipsis}
body.in-hodnoceni-obchodu .vote-rating{display:flex;align-items:center;gap:8px}
body.in-hodnoceni-obchodu .vote-rating .stars{display:flex;gap:2px}
body.in-hodnoceni-obchodu .vote-rating .star::before{font-size:12px;line-height:12px}
body.in-hodnoceni-obchodu .vote-delimeter{display:none}
body.in-hodnoceni-obchodu .vote-time{font-size:12.5px;color:#6B7B6D;font-weight:500;white-space:nowrap}
body.in-hodnoceni-obchodu .vote-content{
  font-size:14.5px;line-height:1.62;color:#1A2B1C;margin:12px 0 0;padding:0}

/* ---- 8) STRANKOVANI + PATICKA VYPISU ---- */
body.in-hodnoceni-obchodu .listingControls{
  display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
  align-items:center!important;justify-content:center!important;gap:14px!important;
  margin:6px 0 0!important}
/* nativni order/margin-auto trik (goToTop vlevo, pagination vpravo) -> sloupec */
body.in-hodnoceni-obchodu .listingControls .pagination{
  order:1!important;margin:0!important;flex-basis:auto!important}
body.in-hodnoceni-obchodu .listingControls .itemsTotal{
  order:2!important;margin:0!important;flex-basis:auto!important;display:block!important}
body.in-hodnoceni-obchodu .listingControls .goToTop{
  order:3!important;margin:0!important;flex-basis:auto!important;justify-content:center!important}
body.in-hodnoceni-obchodu .pagination__list{
  display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0}
body.in-hodnoceni-obchodu .pagination__list li{margin:0;padding:0}
body.in-hodnoceni-obchodu .pagination__currentPage{
  display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  background:#223924;color:#F4F0E6;border-radius:999px;font-family:'Aspekta',-apple-system,sans-serif;
  font-size:14px;font-weight:800;padding:0 14px}
body.in-hodnoceni-obchodu .pagination__link{
  display:flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  background:#FBF8F0!important;background-image:none!important;color:#1A2B1C!important;
  border:1px solid rgba(26,43,28,.14)!important;border-radius:999px!important;
  font-family:'Aspekta',-apple-system,sans-serif!important;font-size:14px!important;
  font-weight:700!important;padding:0 14px!important;text-decoration:none!important;
  box-shadow:none!important;text-transform:none!important;
  transition:border-color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu .pagination__link:hover{
  background:#FFFFFF!important;border-color:rgba(225,177,36,.6)!important}
body.in-hodnoceni-obchodu .pagination__link--next::before{font-size:13px;line-height:1}
body.in-hodnoceni-obchodu .itemsTotal{
  font-size:13px;color:#6B7B6D;text-align:center}
body.in-hodnoceni-obchodu .itemsTotal strong{color:#1A2B1C;font-weight:800}
body.in-hodnoceni-obchodu .goToTop{text-align:center}
body.in-hodnoceni-obchodu .goToTop__button{
  display:inline-block;background:transparent!important;background-image:none!important;
  color:#1A2B1C!important;border:1px solid rgba(26,43,28,.2)!important;border-radius:999px!important;
  font-family:'Aspekta',-apple-system,sans-serif!important;font-size:13px!important;
  font-weight:700!important;padding:10px 22px!important;text-decoration:none!important;
  box-shadow:none!important;text-transform:none!important;
  transition:border-color .2s cubic-bezier(.4,0,.2,1)}
body.in-hodnoceni-obchodu .goToTop__button:hover{border-color:rgba(225,177,36,.7)!important}

/* ---- 9) RESPONSIVE ---- */
@media(max-width:820px){
  body.in-hodnoceni-obchodu .rate-wrap{grid-template-columns:1fr;gap:20px;justify-items:stretch}
  body.in-hodnoceni-obchodu .rate-average-inner{margin:0 auto}
}
@media(max-width:760px){
  body.in-hodnoceni-obchodu #ratingsList{columns:1}
}
@media(max-width:480px){
  body.in-hodnoceni-obchodu .rate-block{margin-right:48px}
  body.in-hodnoceni-obchodu .rate-count{right:-48px}
}
/* ---- 10) REDUCED MOTION ---- */
@media(prefers-reduced-motion:reduce){
  body.in-hodnoceni-obchodu .add-comment .btn,
  body.in-hodnoceni-obchodu #formRating button[type="submit"],
  body.in-hodnoceni-obchodu .rate-bar{transition:none;animation:none!important}
  body.in-hodnoceni-obchodu .add-comment .btn:hover,
  body.in-hodnoceni-obchodu #formRating button[type="submit"]:hover{transform:none}
}