/* ============================================================
   HLASY — samostatný vložitelný widget (auto-scroll pás karet)  ·  v1
   Scopované pod .dmv. Přebarvení = přepiš proměnné na .dmv.
   ============================================================ */

.dmv {
  --dmv-accent: #C8005F;
  --dmv-accent-2: #9E0A54;
  --dmv-teal: #1E7A70;
  --dmv-teal-bright: #33B3A6;
  --dmv-ink: #141118;
  --dmv-body: #3A3540;
  --dmv-muted: #8A8490;
  --dmv-card: #fff;
  --dmv-bg: transparent;
  --dmv-border: rgba(20, 17, 24, .08);
  --dmv-star: #E6A817;
  --dmv-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --dmv-speed: 46s;
  --dmv-card-w: 340px;
  --dmv-gap: 14px;

  box-sizing: border-box;
  font-family: var(--dmv-font);
  background: var(--dmv-bg);
  padding: 34px 0;
  position: relative;
}

.dmv *,
.dmv *::before,
.dmv *::after { box-sizing: border-box; }

.dmv :where(figure, blockquote, figcaption, p, h2) { margin: 0; }

/* ---------- hlavička ---------- */
.dmv-head { text-align: center; padding: 0 20px; margin-bottom: 22px; }

.dmv-eyebrow {
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--dmv-accent);
  margin: 0;
}

.dmv-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  color: var(--dmv-ink);
  margin: 10px 0 0;
}

.dmv-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5A5560;
  margin: 8px auto 0;
  max-width: 62ch;
}

/* ---------- pás (auto-scroll) ---------- */
.dmv-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dmv-track {
  display: flex;
  gap: var(--dmv-gap);
  width: max-content;
  animation: dmv-scroll var(--dmv-speed) linear infinite;
  will-change: transform;
}

/* jen na zařízeních s myší — na telefonu by klepnutí (sticky :hover / focus) pás zastavilo.
   Hover: pás jen ZPOMALÍ (řeší hlasy.js přes playbackRate, atribut data-dmv-slow).
   Pauza na hover zůstává jen jako záloha pro prohlížeče bez Web Animations API. */
@media (hover: hover) and (pointer: fine) {
  .dmv:not([data-dmv-slow]) .dmv-marquee:hover .dmv-track,
  .dmv-marquee:focus-within .dmv-track { animation-play-state: paused; }
}
.dmv[data-dmv-paused="1"] .dmv-track { animation-play-state: paused; }

@keyframes dmv-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - (var(--dmv-gap) / 2))); }
}

.dmv[data-dmv-direction="right"] .dmv-track { animation-direction: reverse; }

/* ---------- karta citace ---------- */
.dmv-chip {
  flex: 0 0 var(--dmv-card-w);
  width: var(--dmv-card-w);
  min-width: var(--dmv-card-w);
  max-width: var(--dmv-card-w);
  margin: 0;
  background: var(--dmv-card);
  border: 1px solid var(--dmv-border);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 12px 30px -24px rgba(20, 17, 24, .3);
  display: flex;
  flex-direction: column;
}

.dmv-stars {
  color: var(--dmv-star);
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1;
  white-space: nowrap;
}

.dmv-quote {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dmv-body);
  margin: 10px 0 16px;
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: pretty;
  font-style: normal;
  quotes: none;
}

.dmv-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }

.dmv-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dmv-accent), var(--dmv-accent-2));
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dmv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmv-avatar.dmv-teal { background: linear-gradient(135deg, var(--dmv-teal-bright), var(--dmv-teal)); }
.dmv-avatar.dmv-ink  { background: linear-gradient(135deg, #3A3540, #141118); }

.dmv-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
.dmv-meta b { font-size: 14.5px; font-weight: 700; color: var(--dmv-ink); }
.dmv-meta span { font-size: 12.5px; color: var(--dmv-muted); }

/* ---------- tmavá varianta ---------- */
.dmv.dmv-dark {
  --dmv-card: #201C26;
  --dmv-bg: var(--dmv-ink);
  --dmv-body: rgba(245, 241, 236, .82);
  --dmv-border: rgba(255, 255, 255, .12);
  --dmv-muted: rgba(245, 241, 236, .55);
}
.dmv.dmv-dark .dmv-eyebrow { color: var(--dmv-teal-bright); }
.dmv.dmv-dark .dmv-title { color: #F5F1EC; }
.dmv.dmv-dark .dmv-sub { color: rgba(245, 241, 236, .7); }
.dmv.dmv-dark .dmv-meta b { color: #F5F1EC; }

/* ---------- statická mřížka (bez pohybu) ---------- */
.dmv[data-dmv-layout="grid"] .dmv-marquee { -webkit-mask: none; mask: none; }
.dmv[data-dmv-layout="grid"] .dmv-track {
  animation: none;
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
}
.dmv[data-dmv-layout="grid"] .dmv-chip {
  flex: 0 1 var(--dmv-card-w);
  min-width: 0;
  max-width: min(var(--dmv-card-w), 100%);
}

/* ---------- responsivita ---------- */
@media (max-width: 640px) {
  .dmv { padding: 26px 0; }
  .dmv-title { font-size: 27px; }
  .dmv { --dmv-card-w: min(300px, 82vw); }
}

/* ---------- přístupnost ---------- */
@media (prefers-reduced-motion: reduce) {
  .dmv-marquee { -webkit-mask: none; mask: none; }
  .dmv-track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
  }
  .dmv-chip[data-dmv-clone] { display: none; }
  .dmv-chip { flex: 0 1 var(--dmv-card-w); min-width: 0; max-width: min(var(--dmv-card-w), 100%); }
}


/* ============================================================
   DREAMY B2C — napojení na HP blok „Hodnocení obchodu" (Shoptet)
   Používá se spolu s (C) hodnoceni-hp.js
   ============================================================ */
#hodnoceniobchodu .dmv {
  --dmv-star: #d90074;             /* hvězdičky v barvě webu (Shoptet je má růžové) */
  --dmv-font: Rubik, -apple-system, 'Segoe UI', system-ui, sans-serif;
  --dmv-card-w: 320px;
  padding: 8px 0 4px;
  margin: 0 -20px;                 /* pás až k okrajům kontejneru */
  flex: 0 0 calc(100% + 40px);     /* blok je flex .row — pás na vlastní řádek */
  min-width: 0;
  contain: inline-size;            /* nekonečný pás nesmí roztáhnout stránku do šířky */
}
#hodnoceniobchodu .dmv-quote {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* původní mřížka karet se skryje až ve chvíli, kdy je pás hotový */
#hodnoceniobchodu.dmv-ready .shop-eval,
#hodnoceniobchodu.dmv-ready > br { display: none !important; }

/* nadpis sekce — stejný styl jako ostatní nadpisy na HP (Bestsellery, Blog) */
#hodnoceniobchodu > h2 {
  font-family: Rubik, sans-serif !important;
  font-weight: 500 !important;
  font-size: 35px !important;
  line-height: 1.2 !important;
  text-align: center;
  margin: 0 0 14px !important;
}
#hodnoceniobchodu > h2 a { font-family: inherit !important; color: #d90074 !important; text-decoration: none !important; }

/* souhrn 4,9 ★ 103 hodnocení — jako „pilulka" */
#hodnoceniobchodu .rate-average-inner {
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 18px;
  padding: 8px 18px;
  border: 1px solid #f3d3e3;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}
#hodnoceniobchodu .rate-average { font-size: 20px !important; font-weight: 700; color: #1a1a1a !important; line-height: 1; }

@media (max-width: 640px) {
  #hodnoceniobchodu > h2 { font-size: 28px !important; }
  #hodnoceniobchodu .dmv { --dmv-card-w: min(290px, 80vw); }
}

/* ---------- Dreamy růžová varianta karet (v2) ---------- */
#hodnoceniobchodu .dmv {
  --dmv-card: #fcebf4;                     /* světle růžová jako dlaždice kategorií na HP */
  --dmv-border: rgba(217, 0, 116, .10);
  --dmv-accent: #d90074;
  --dmv-accent-2: #a3005a;
  --dmv-body: #3a2a33;
  --dmv-muted: #8a7a83;
}
#hodnoceniobchodu .dmv-chip {
  border: 0;
  border-radius: 15px;
  box-shadow: 0 14px 28px -22px rgba(217, 0, 116, .45);
}
#hodnoceniobchodu .dmv-meta b { color: #1a1a1a; }
/* avatary jen v odstínech růžové (místo tyrkysové a černé) */
#hodnoceniobchodu .dmv-avatar.dmv-teal { background: linear-gradient(135deg, #f06aa8, #d90074); }
#hodnoceniobchodu .dmv-avatar.dmv-ink  { background: linear-gradient(135deg, #a3005a, #6e003c); }

/* ---------- v3 — živější varianta: růžový pás přes celou šířku, bílé karty ---------- */
#hodnoceniobchodu {
  position: relative;
  padding-top: 64px !important;
  padding-bottom: 56px !important;
  margin-top: 40px;
  /* pozadí přes celou šířku okna bez vodorovného scrollu (border-image outset trik) */
  border-image: linear-gradient(180deg, #fff5fa 0%, #fce4f0 100%) fill 0 // 0 100vw;
}
/* malý nadtitulek nad nadpisem */
#hodnoceniobchodu > h2::before {
  content: "Co o nás říkají zákazníci";
  display: block;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d90074;
  opacity: .8;
  margin-bottom: 10px;
}
/* souhrn — bílý štítek se stínem, 4,9 v růžové */
#hodnoceniobchodu .rate-average-inner {
  background: #fff;
  border: 0 !important;
  box-shadow: 0 8px 22px -12px rgba(217, 0, 116, .35);
  padding: 10px 22px;
}
#hodnoceniobchodu .rate-average { color: #d90074 !important; font-size: 24px !important; }

/* karty — bílé na růžovém pásu, velká uvozovka, jemné nadzvednutí při najetí */
#hodnoceniobchodu .dmv { --dmv-card: #fff; }
#hodnoceniobchodu .dmv-marquee { padding: 16px 0 48px; margin-bottom: -24px; } /* místo pro stín karet — overflow pásu ho jinak usekne */
#hodnoceniobchodu .dmv-chip {
  position: relative;
  border-radius: 20px;
  padding: 24px 24px 20px;
  box-shadow: 0 14px 28px -18px rgba(217, 0, 116, .45);
  transition: transform .35s ease, box-shadow .35s ease;
}
#hodnoceniobchodu .dmv-chip:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 32px -18px rgba(217, 0, 116, .5);
}
#hodnoceniobchodu .dmv-chip::after {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: #d90074;
  opacity: .14;
  pointer-events: none;
}
#hodnoceniobchodu .dmv-stars { font-size: 15px; letter-spacing: 3px; }
#hodnoceniobchodu .dmv-quote { font-size: 15px; color: #2e2229; }

@media (max-width: 640px) {
  #hodnoceniobchodu { padding-top: 44px !important; padding-bottom: 40px !important; margin-top: 24px; }
}