/* ══════════════════════════════════════════════════════════════════════════
   ОТЗЫВЫ ПОКУПАТЕЛЕЙ — блок .gpr (Green Power Reviews)
   Отдельный файл, все классы с префиксом gpr-, с темой не пересекается.
   Тёмная тема — как в ebike.css: [data-bs-theme="dark"] на <html>/предке
   или на самом блоке, а без атрибута — по prefers-color-scheme.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ПЕРЕМЕННЫЕ: СВЕТЛАЯ ТЕМА ─────────────────────────────────────────────── */
.gpr{
  color-scheme:light;
  --card:#FFFFFF;
  --card-2:#F7F9F5;
  --line:#E3EAE0;
  --line-soft:#EEF3EB;
  --line-strong:#BCCBB4;
  --hover:#F5F8F2;
  --ink:#14210F;
  --text:#2E3A28;
  --muted:#5A6752;
  --faint:#8B9684;
  --green:#50a816;
  --green-hi:#62BB22;
  --green-text:#3F8A0F;
  --green-ink:#1E3A08;
  --green-soft:#EFF8E7;
  --green-line:#CBE6B2;
  --amber:#FFC93D;
  --amber-deep:#E39B0B;
  --amber-soft:#FFF6E0;
  --star-off:#DDE5D8;
  --trk:#E8EEE4;
  --ring:rgba(80,168,22,.28);
  --sk:#EEF3EB;
  --sk-hi:#F8FBF6;
  --shadow:0 14px 34px -20px rgba(20,33,15,.45);
  --shadow-sm:0 6px 16px -10px rgba(20,33,15,.4);
  --brand:linear-gradient(125deg,#71B831 0%,#71B831 32.25%,#43B400 33.75%,#43B400 65.25%,#009C00 66.75%,#009C00 100%);
}

/* ── ПЕРЕМЕННЫЕ: ТЁМНАЯ ТЕМА ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .gpr:not([data-bs-theme="light"]),
.gpr[data-bs-theme="dark"]{
  color-scheme:dark;
  --card:#2A2A2A;
  --card-2:#303030;
  --line:#3D3D3D;
  --line-soft:#333333;
  --line-strong:#585858;
  --hover:#333333;
  --ink:#F4F6F2;
  --text:#D6DAD2;
  --muted:#A8AFA2;
  --faint:#7E877A;
  --green-hi:#6CC62A;
  --green-text:#7BD43F;
  --green-ink:#D2EDB8;
  --green-soft:#1F3014;
  --green-line:#3A5C23;
  --amber-deep:#F0A92C;
  --amber-soft:#322A15;
  --star-off:#4A4A4A;
  --trk:#3A3A3A;
  --ring:rgba(123,212,63,.32);
  --sk:#333333;
  --sk-hi:#3C3C3C;
  --shadow:0 16px 36px -20px rgba(0,0,0,.85);
  --shadow-sm:0 6px 16px -10px rgba(0,0,0,.8);
}
@media (prefers-color-scheme:dark){
  :root:not([data-bs-theme]) .gpr:not([data-bs-theme]){
    color-scheme:dark;
    --card:#2A2A2A;
    --card-2:#303030;
    --line:#3D3D3D;
    --line-soft:#333333;
    --line-strong:#585858;
    --hover:#333333;
    --ink:#F4F6F2;
    --text:#D6DAD2;
    --muted:#A8AFA2;
    --faint:#7E877A;
    --green-hi:#6CC62A;
    --green-text:#7BD43F;
    --green-ink:#D2EDB8;
    --green-soft:#1F3014;
    --green-line:#3A5C23;
    --amber-deep:#F0A92C;
    --amber-soft:#322A15;
    --star-off:#4A4A4A;
    --trk:#3A3A3A;
    --ring:rgba(123,212,63,.32);
    --sk:#333333;
    --sk-hi:#3C3C3C;
    --shadow:0 16px 36px -20px rgba(0,0,0,.85);
    --shadow-sm:0 6px 16px -10px rgba(0,0,0,.8);
  }
}

/* ── БАЗА И СБРОС СТИЛЕЙ ТЕМЫ ─────────────────────────────────────────────── */
.gpr{
  --r:22px;--r-md:16px;--r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  display:block;position:relative;margin:0 auto;
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--text);
  text-align:left;letter-spacing:normal;text-transform:none;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  container:gpr/inline-size;
}
.gpr,.gpr *,.gpr *::before,.gpr *::after{box-sizing:border-box}
.gpr [hidden]{display:none!important}
.gpr :where(h1,h2,h3,p,ul,ol,li,figure,blockquote){margin:0;padding:0;list-style:none}
.gpr :where(h1,h2,h3){color:var(--ink);font-family:inherit;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.gpr :where(a){color:inherit;text-decoration:none}
.gpr :where(img){display:block;max-width:100%;height:auto;border:0}
.gpr :where(button){font:inherit;color:inherit;margin:0;padding:0;border:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gpr :where(svg){display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gpr :focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
.gpr .gpr-vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── ЗАГОЛОВОК ────────────────────────────────────────────────────────────── */
.gpr__hd{margin:0 0 clamp(16px,2.4vw,24px)}
.gpr__title{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;margin:0 0 6px}
.gpr__sub{color:var(--muted);font-size:clamp(14px,1.5vw,16px)}

/* ── ЗВЁЗДЫ: одна полоса, заполнение по --v (0…5, можно дробное) ───────────── */
.gpr-stars{
  --v:5;--sz:16px;
  display:inline-block;flex:none;width:calc((var(--sz) + 2px) * 5);height:var(--sz);vertical-align:middle;
  background:linear-gradient(90deg,var(--amber) 0 calc(var(--v) / 5 * 100%),var(--star-off) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5L7 14.1l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0/calc(var(--sz) + 2px) 100% repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5L7 14.1l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0/calc(var(--sz) + 2px) 100% repeat-x;
}
.gpr-stars--lg{--sz:24px}
.gpr-stars--sm{--sz:13px}

/* ══ СВОДКА РЕЙТИНГА ═════════════════════════════════════════════════════════ */
.gpr-sum{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px;
  background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);
}
.gpr-sum__score{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:18px;border-radius:20px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.26),transparent 55%),linear-gradient(135deg,#3F8F0D 0%,var(--green) 48%,var(--green-hi) 100%);
}
.gpr-sum__score::after{
  content:"";position:absolute;right:-26px;bottom:-40px;width:150px;height:150px;opacity:.13;background:#fff;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5L7 14.1l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 24'%3E%3Cpath d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5L7 14.1l-5.3-5 7.2-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* кольцо: заполнение по --p (0…100) */
.gpr-ring{
  --p:98.8;
  position:relative;flex:none;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  background:conic-gradient(var(--amber) calc(var(--p) * 1%),rgba(255,255,255,.22) 0);
}
.gpr-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#3E8C0E;box-shadow:inset 0 2px 8px rgba(0,0,0,.18)}
.gpr-ring b{position:relative;font-size:32px;font-weight:850;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.gpr-sum__meta{position:relative;z-index:1;display:grid;gap:6px;min-width:0}
.gpr-sum__lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.gpr-sum__meta .gpr-stars{--star-off:rgba(255,255,255,.3)}
.gpr-sum__note{font-size:13.5px;line-height:1.4;opacity:.95}
.gpr-sum__note b{font-weight:800}

/* распределение оценок — кнопки-фильтры */
.gpr-dist{display:grid;gap:4px}
.gpr-dist__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) 3.4em;align-items:center;gap:12px;
  width:100%;padding:7px 10px;border-radius:12px;text-align:left;
  transition:background-color .15s,box-shadow .15s;
}
.gpr-dist__row:hover:not(:disabled){background:var(--hover)}
.gpr-dist__row[aria-pressed="true"]{background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-line)}
.gpr-dist__row:disabled{cursor:default;opacity:.5}
.gpr-dist__k{display:flex;align-items:center;gap:6px;min-width:6.4em;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.gpr-dist__k .gpr-stars{--sz:13px;--v:5;width:15px}
.gpr-dist__bar{position:relative;height:10px;border-radius:5px;background:var(--trk);overflow:hidden}
.gpr-dist__bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--w,0) * 1%);min-width:var(--min,0px);border-radius:inherit;background:var(--brand);transition:width .6s var(--ease)}
.gpr-dist__row--none .gpr-dist__bar i{background:var(--line-strong)}
.gpr-dist__n{font-size:13px;font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

/* ══ ПАНЕЛЬ ФИЛЬТРОВ ═════════════════════════════════════════════════════════ */
.gpr-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:clamp(18px,3vw,28px) 0 14px}
.gpr-bar__t{font-size:clamp(18px,2.2vw,22px);font-weight:800;color:var(--ink);outline:none}
.gpr-bar__t span{color:var(--green-text)}
.gpr-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:2px 4px}
.gpr-chips::-webkit-scrollbar{display:none}
.gpr-chip{
  flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);color:var(--text);
  font-size:13.5px;font-weight:650;line-height:1.2;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s;
}
.gpr-chip:hover{background:var(--hover)}
.gpr-chip[aria-pressed="true"]{background:var(--brand);border-color:transparent;color:#fff}
.gpr-chip small{font-size:inherit;font-weight:600;opacity:.7;margin-left:3px}

/* ══ СЕТКА КАРТОЧЕК ══════════════════════════════════════════════════════════ */
.gpr-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}

.gpr-card{
  --h:110;
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;
  padding:16px 16px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .25s,transform .25s var(--ease);
}
.gpr-card:hover{border-color:var(--green-line);box-shadow:var(--shadow);transform:translateY(-2px)}
.gpr-card.is-in{animation:gpr-rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes gpr-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* автор */
.gpr-card__top{display:flex;align-items:center;gap:11px;min-width:0}
.gpr-ava{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  font-size:17px;font-weight:800;color:#fff;text-transform:uppercase;
  background:linear-gradient(140deg,hsl(var(--h) 62% 52%),hsl(calc(var(--h) + 28) 64% 40%));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.gpr-card__who{display:grid;min-width:0;flex:1;line-height:1.25}
.gpr-card__name{display:block;font-size:15px;font-weight:750;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 6px 2px 0}
/* частично скрытое имя: первые буквы видны, остальное размыто */
.gpr-card__name .gpr-blur{display:inline-block;vertical-align:top;filter:blur(3.6px);opacity:.9;
  -webkit-user-select:none;user-select:none;pointer-events:none}
.gpr-card__date{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.gpr-card__rate{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.gpr-card__q{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--card-2);border:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap;
}
.gpr-card__q svg{width:13px;height:13px}

/* значок «Рекомендую» */
.gpr-rec{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 7px;border-radius:999px;
  background:var(--green-soft);color:var(--green-text);border:1px solid var(--green-line);
  font-size:12px;font-weight:750;line-height:1.3;
}
.gpr-rec svg{width:14px;height:14px;stroke-width:2.2}

/* текст */
.gpr-card__text{
  position:relative;font-size:14.5px;line-height:1.55;color:var(--text);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.gpr-card__text::before{
  content:"";float:left;width:22px;height:18px;margin:2px 6px 0 0;opacity:.85;background:var(--green-line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 20V12C0 5 3.5 1 10 0l1 3C7 4.5 5.4 7 5.3 10H10v10zm14 0V12c0-7 3.5-11 10-12l1 3c-4 1.5-5.6 4-5.7 7H24v10z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 20V12C0 5 3.5 1 10 0l1 3C7 4.5 5.4 7 5.3 10H10v10zm14 0V12c0-7 3.5-11 10-12l1 3c-4 1.5-5.6 4-5.7 7H24v10z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.gpr-card.is-open .gpr-card__text{-webkit-line-clamp:unset;display:block}
.gpr-card__toggle{
  display:inline-block;align-self:flex-start;margin-top:-6px;font-size:13px;font-weight:700;color:var(--green-text);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--green-line);
}
.gpr-card__toggle:hover{text-decoration-color:currentColor}

/* товар */
.gpr-prod{
  margin-top:auto;display:flex;align-items:center;gap:11px;padding:8px 10px 8px 8px;border-radius:14px;
  background:var(--card-2);border:1px solid var(--line-soft);transition:background-color .15s,border-color .15s;
}
.gpr-prod:hover{background:var(--green-soft);border-color:var(--green-line)}
.gpr-prod__img{
  position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--line);
}
.gpr-prod__img img{width:100%;height:100%;object-fit:contain}
.gpr-prod__img svg{width:22px;height:22px;color:var(--faint)}
.gpr-prod__img.is-noimg img{display:none}
.gpr-prod__img:not(.is-noimg) svg{display:none}
.gpr-prod__body{display:grid;min-width:0;flex:1;line-height:1.3}
.gpr-prod__lbl{font-size:11px;font-weight:650;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.gpr-prod__name{font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gpr-prod__go{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .2s var(--ease),color .2s}
.gpr-prod:hover .gpr-prod__go{transform:translateX(3px);color:var(--green-text)}

/* ── скелетон на время подгрузки ──────────────────────────────────────────── */
.gpr-card--sk{pointer-events:none;box-shadow:none}
.gpr-card--sk:hover{transform:none}
.gpr-sk{display:block;border-radius:8px;
  background:linear-gradient(100deg,var(--sk) 30%,var(--sk-hi) 50%,var(--sk) 70%) 0 0/300% 100%;
  animation:gpr-shim 1.2s linear infinite}
.gpr-sk--ava{width:42px;height:42px;border-radius:14px;flex:none}
.gpr-sk--l{height:12px}
@keyframes gpr-shim{from{background-position:100% 0}to{background-position:0 0}}

/* ══ ПОДГРУЗКА ═══════════════════════════════════════════════════════════════ */
.gpr-more{display:grid;justify-items:center;gap:12px;margin-top:clamp(18px,3vw,28px)}
.gpr-more__info{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gpr-more__info b{color:var(--ink)}
.gpr-more__prog{width:min(100%,260px);height:6px;border-radius:3px;background:var(--trk);overflow:hidden}
.gpr-more__prog i{display:block;height:100%;width:calc(var(--p,0) * 1%);border-radius:inherit;background:var(--brand);transition:width .5s var(--ease)}
.gpr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:16px;
  font-size:15.5px;font-weight:700;line-height:1.2;color:#fff;background:var(--brand);
  box-shadow:0 12px 24px -14px rgba(67,180,0,.95);
  transition:transform .16s var(--ease),box-shadow .2s,filter .15s;
}
.gpr-btn:hover{filter:brightness(.92);box-shadow:0 16px 28px -14px rgba(67,180,0,.95)}
.gpr-btn:active{transform:scale(.975)}
.gpr-btn svg{width:20px;height:20px;stroke-width:2.2;transition:transform .3s var(--ease)}
.gpr-btn:hover svg{transform:translateY(2px)}
.gpr-btn[aria-busy="true"]{pointer-events:none;filter:saturate(.7)}
.gpr-btn[aria-busy="true"] svg{display:none}
.gpr-btn[aria-busy="true"]::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:gpr-spin .7s linear infinite}
@keyframes gpr-spin{to{transform:rotate(360deg)}}
.gpr-more__sentinel{width:100%;height:1px}

.gpr-empty{
  grid-column:1/-1;padding:34px 18px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--card-2);
  color:var(--muted);font-size:14.5px;
}
.gpr-empty b{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}

/* ══ АДАПТИВ ПО ШИРИНЕ БЛОКА ═════════════════════════════════════════════════ */
@container gpr (min-width:620px){
  .gpr-sum{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:18px;padding:16px}
  .gpr-sum__score{padding:22px;min-height:100%}
  .gpr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@container gpr (min-width:980px){
  .gpr-sum{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);padding:18px}
  .gpr-ring{width:118px;height:118px}
  .gpr-ring b{font-size:36px}
  .gpr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .gpr-card{padding:18px 18px 16px}
}
@container gpr (min-width:1320px){
  .gpr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container gpr (max-width:379px){
  .gpr-sum{padding:10px;border-radius:22px}
  .gpr-sum__score{gap:14px;padding:14px}
  .gpr-ring{width:86px;height:86px}
  .gpr-ring b{font-size:26px}
  .gpr-card{padding:14px 13px 12px;border-radius:18px}
  .gpr-dist__row{gap:8px;padding:6px 6px}
}

@media (prefers-reduced-motion:reduce){
  .gpr *,.gpr *::before,.gpr *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .gpr-bar .gpr-chips,.gpr-more{display:none!important}
  .gpr-card[hidden]{display:flex!important}
  .gpr-card,.gpr-sum{box-shadow:none;break-inside:avoid}
}