/* ==========================================================
   Reviews & Q&A (pfx) — modern, clean, brand‑ready styling
   ----------------------------------------------------------
   ✅ Drop‑in replacement: keeps your existing HTML structure
   ✅ Brand: uses your #1976d2 → #2196f3 gradient
   ✅ A11y: strong focus states, reduced‑motion safe
   ✅ Modes: light + dark, compact on mobile, optional sticky tabs
   ✅ Notes:
      • Bars: set width via inline style="--w:0.72" or data‑attr.
      • Stars: set overall rating via style on .pfx-stars__row--fg → --val: 0..5
      • Truncation: add .is-truncated to .rev to clamp body text (remove to expand)
      • Sticky tabs: add .is-sticky to .pfx-tabs (and set --pfx-sticky-top if needed)
   ========================================================== */

:root{
  /* Typography & base */
  --pfx-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  --pfx-text: #0f172a;           /* slate-900 */
  --pfx-subtle: #64748b;         /* slate-500 */
  --pfx-muted: #94a3b8;          /* slate-400 */
  --pfx-bg: #f8fafc;             /* slate-50 */
  --pfx-card: #ffffff;
  --pfx-border: #e7ecf2;
  --pfx-chip: #f1f5f9;           /* slate-100 */
  --pfx-success-ink:#137a2a;
  --pfx-success-bg:#e8fff0;

  /* Brand */
  --pfx-brand-1:#1976d2; /* primary */
  --pfx-brand-2:#2196f3; /* accent */
  --pfx-grad: linear-gradient(90deg,var(--pfx-brand-1),var(--pfx-brand-2));
  --pfx-brand-ink:#0b3a6a;

  /* Sizes */
  --pfx-radius:14px;
  --pfx-radius-lg:16px;
  --pfx-space:12px;

  /* Effects */
  --pfx-focus-ring:0 0 0 3px rgba(33,150,243,.22);
  --pfx-shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --pfx-shadow-md:0 6px 22px rgba(2,24,48,.08);
  --pfx-shadow-lg:0 18px 55px rgba(2,24,48,.12);

  /* Stars (mask) */
  --star: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M11.48 3.5a.56.56 0 0 1 1.04 0l2.01 4.07 4.5.65c.5.07.7.7.32 1.05l-3.25 3.17.77 4.48a.56.56 0 0 1-.82.59L12 15.35l-4.04 2.08a.56.56 0 0 1-.82-.59l.77-4.48-3.25-3.17a.56.56 0 0 1 .32-1.05l4.5-.65 2-4.07Z'/></svg>");
}

@media (prefers-color-scheme: dark){
  :root{
    --pfx-text:#e5e7eb;          /* zinc-200 */
    --pfx-subtle:#cbd5e1;        /* slate-300 */
    --pfx-muted:#94a3b8;
    --pfx-bg:#0b1220;            /* deep navy */
    --pfx-card:#0f172a;          /* slate-900 */
    --pfx-border:#1f2937;        /* slate-800 */
    --pfx-chip:#111827;          /* slate-900-ish */
    --pfx-success-ink:#34d399;
    --pfx-success-bg:#052e1b;
    --pfx-focus-ring:0 0 0 3px rgba(59,130,246,.35);
    --pfx-shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --pfx-shadow-md:0 10px 28px rgba(0,0,0,.45);
    --pfx-shadow-lg:0 20px 75px rgba(0,0,0,.55);
  }
}

.case-hint{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;color:#0c4a6e;font-size:14px;line-height:1.45}
.case-hint__icon{font-size:22px;line-height:1}
.case-hint__text{flex:1 1 auto}
.case-hint__link{font-weight:600;text-decoration:none}
.case-hint__link--tg{color:#0ea5e9}
.case-hint__link--vb{color:#7c3aed}
.case-hint__link:hover{text-decoration:underline}
.case-hint__tel{white-space:nowrap;color:#0c4a6e;text-decoration:none}
.case-hint__tel:hover{text-decoration:underline}

.pfx{margin-block:28px;font-family:var(--pfx-font);color:var(--pfx-text)}
.pfx *{box-sizing:border-box}

/* ----------------------------------------------------------
   Header: score + bars + CTAs
   ---------------------------------------------------------- */
/* .pfx-head{
  display:grid;grid-template-columns:1.4fr .9fr auto;gap:24px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--pfx-border);border-radius:var(--pfx-radius-lg);
  background:linear-gradient(180deg, rgba(2,24,48,.02), rgba(2,24,48,0)), var(--pfx-card);
  padding:16px 18px;box-shadow:var(--pfx-shadow-sm);
} */

.help-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid #e5e7eb; background:#fff; color:#334155;
  border-radius:999px; cursor:pointer; line-height:1; transition:.18s ease;
}
.help-btn .ico{ width:18px; height:18px; display:block; }
.help-btn .count{ font-variant-numeric: tabular-nums; }

.help-btn:hover{ border-color:#cbd5e1; background:#f8fafc; }
.help-btn.up:hover{ color:#16a34a; border-color:#bbf7d0; background:#f0fdf4; }
.help-btn.dn:hover{ color:#dc2626; border-color:#fecaca; background:#fef2f2; }

/* коли користувач уже проголосував — підсвічуємо (додавай клас .is-active у JS) */
.help-btn.up.is-active{ color:#15803d; border-color:#86efac; background:#ecfdf5; }
.help-btn.dn.is-active{ color:#b91c1c; border-color:#fca5a5; background:#fee2e2; }

/* опціонально: стан disabled */
.help-btn:disabled{ opacity:.55; cursor:not-allowed; }

.pfx-head {
    display: grid;
    grid-template-columns: 1fr 0fr auto;
    /* gap: 24px; */
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid var(--pfx-border);
    border-radius: var(--pfx-radius-lg);
    background: linear-gradient(180deg, rgba(2, 24, 48, .02), rgba(2, 24, 48, 0)), var(--pfx-card);
    padding: 16px 18px;
    box-shadow: var(--pfx-shadow-sm);
}

@media (max-width: 980px){
  .pfx-head{grid-template-columns:1fr;align-items:start}
}

.pfx-sum{display:flex;gap:18px;align-items:center;min-width:260px;flex-direction: column;}
/* .pfx-score{display:grid;grid-template-columns:auto auto;align-items:center;gap:12px} */
.pfx-score {
    display: flex
;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 12px;
    flex-direction: column;
    width: 50%;
}
.pfx-score__num{
  font:900 40px/1.05 var(--pfx-font);
  letter-spacing:-.02em;color:var(--pfx-text);
}
.pfx-score__num::after{content:"/5";margin-left:6px;font:700 14px/1 var(--pfx-font);color:var(--pfx-muted)}

/* Stars (summary) */
.pfx-stars{--s:45px;--g:4px;position:relative;width:calc(5*var(--s) + 4*var(--g));height:var(--s)}
.pfx-stars__row{position:absolute;inset:0;display:flex;gap:var(--g)}
.pfx-stars__row>span{width:var(--s);height:var(--s);flex:0 0 var(--s);background:#e2e8f0;mask:var(--star) center/contain no-repeat;-webkit-mask:var(--star) center/contain no-repeat}
.pfx-stars__row--fg{overflow:hidden;width:max(0px, calc(var(--val,0)*(var(--s) + var(--g)) - var(--g)))}
.pfx-stars__row--fg>span{background:#ffc107}

.pfx-meta{grid-column:1 / -1;color:var(--pfx-subtle);font-size:13px}
.pfx-dot{margin:0 .4rem}

/* Distribution bars */
.pfx-bar{
  height:10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(2,24,48,.05),rgba(2,24,48,.02));
  border:1px solid var(--pfx-border);
  overflow:hidden; position:relative;
}

.pfx-bars{
  flex: 1 1 120px;                             /* ← РОСТИ */
  min-width: 260px;                            /* щоб не ламався на вузьких екранах */
  width: 50%;                                 /* гарантія width:100%; */
}
.pfx-bars li{display:grid;grid-template-columns:22px 1fr 48px;gap:10px;align-items:center}
.pfx-bars li .lbl{font-weight:700;color:var(--pfx-text);opacity:.9}
.pfx-bar{height:10px;border-radius:999px;background:linear-gradient(180deg,rgba(2,24,48,.05),rgba(2,24,48,.02));border:1px solid var(--pfx-border);overflow:hidden;position:relative}
.pfx-bar > span{
  position:absolute; top:0; bottom:0; left:0;
  width:calc(var(--w,0) * 100%);               /* читаємо --w з <li> */
  background:var(--pfx-grad);
  transition: width .25s ease;                 /* приємна анімація */
}
.pfx-bars .cnt{justify-self:end;color:var(--pfx-subtle);font-variant-numeric:tabular-nums}
.pfx-bars li:hover .pfx-bar{box-shadow:0 0 0 1px rgba(25,118,210,.12) inset}

/* CTAs */
.pfx-ctas{display:flex;gap:10px;align-items:center}
.pfx-btn{border:1px solid var(--pfx-border);background:var(--pfx-card);border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;color:var(--pfx-text);box-shadow:var(--pfx-shadow-sm);transition:transform .06s ease, box-shadow .15s ease}
.pfx-btn:hover{transform:translateY(-1px);box-shadow:var(--pfx-shadow-md)}
.pfx-btn:active{transform:translateY(0)}
.pfx-btn.primary{background:var(--pfx-grad);color:#fff;border:none}
.pfx-btn.ghost{background:var(--pfx-card)}
.pfx-btn[disabled]{opacity:.6;cursor:not-allowed;box-shadow:none}
.pfx-btn:focus-visible{outline:none;box-shadow:var(--pfx-focus-ring)}

/* Reviews navigation — editorial tabs instead of capsules */
.pfx-tabs{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:22px 0 18px;
  padding:0;
  border:0;
  border-bottom:1px solid #dbe5ef;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.pfx-tabs.is-sticky{
  position:sticky;
  top:var(--pfx-sticky-top,64px);
  z-index:5;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(12px);
}
.pfx-tab-switch{display:flex;align-items:flex-end;gap:28px;padding:0;border:0;border-radius:0;background:transparent}
.pfx-tab{
  position:relative;
  appearance:none;
  min-height:56px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 2px 14px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#66788c;
  font:800 15px/1 var(--pfx-font);
  cursor:pointer;
  transition:color .18s ease,transform .12s ease;
}
.pfx-tab::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:3px;border-radius:3px 3px 0 0;background:var(--pfx-grad);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}
.pfx-tab:hover{color:#174f83;background:transparent}
.pfx-tab:active{transform:translateY(1px)}
.pfx-tab:focus-visible{outline:none;box-shadow:var(--pfx-focus-ring);border-radius:8px}
.pfx-tab.is-active{color:#0f172a;background:transparent;box-shadow:none}
.pfx-tab.is-active::after{transform:scaleX(1)}
.pfx-tab__icon{width:22px;height:22px;display:grid;place-items:center;border-radius:0;background:transparent;color:#8092a5}
.pfx-tab__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.pfx-tab.is-active .pfx-tab__icon{color:var(--pfx-brand-1);background:transparent}
.pfx-tab__count{min-width:24px;height:22px;display:inline-grid;place-items:center;padding:0 7px;border-radius:999px;background:#edf2f7;color:#6b7c8e;font-size:12px;font-variant-numeric:tabular-nums}
.pfx-tab.is-active .pfx-tab__count{background:#e5f2fe;color:#1269ba}
.pfx-tab-tools{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding-bottom:9px}
.pfx-sort{display:flex;align-items:center;gap:7px;min-width:0;min-height:40px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.pfx-sort[hidden]{display:none!important}
.pfx-sort label{color:#8493a3;font-size:12px;font-weight:700;line-height:1;text-transform:none;letter-spacing:0}
.pfx-sort select{width:auto;min-width:128px;padding:9px 29px 9px 11px;border:1px solid #dbe5ef;border-radius:10px;outline:0;background:var(--pfx-card);color:#334155;font:700 13px/1.2 var(--pfx-font);cursor:pointer}
.pfx-compose-toggle{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 17px;border:0;border-radius:11px;background:var(--pfx-grad);color:#fff;box-shadow:0 8px 20px rgba(25,118,210,.22);font:800 14px/1.2 var(--pfx-font);white-space:nowrap;cursor:pointer;transition:transform .12s ease,box-shadow .18s ease}
.pfx-compose-toggle:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(25,118,210,.28)}
.pfx-compose-toggle:active{transform:translateY(0)}
.pfx-compose-toggle:focus-visible{outline:none;box-shadow:var(--pfx-focus-ring),0 8px 20px rgba(25,118,210,.22)}
.pfx-compose-toggle.is-open{color:#1269ba;background:#eaf5ff;box-shadow:inset 0 0 0 1px #b8d9f8}
.pfx-compose-toggle__icon{font-size:19px;font-weight:500;line-height:1}

@media (max-width:760px){
  .pfx-tabs{align-items:stretch;flex-direction:column;gap:10px;padding-bottom:12px}
  .pfx-tab-switch{width:100%;justify-content:space-around;gap:12px}
  .pfx-tab{flex:1 1 0}
  .pfx-tab-tools{width:100%;padding:0}
  .pfx-sort{flex:1 1 auto}
  .pfx-sort select{flex:1 1 auto;width:100%}
  .pfx-compose-toggle{flex:0 0 auto}
}
@media (max-width:480px){
  .pfx-tab__icon{display:none}
  .pfx-tab-tools{display:grid;grid-template-columns:1fr}
  .pfx-sort,.pfx-compose-toggle{width:100%}
}

.pfx .pfx-panel{ display:none !important; }
.pfx .pfx-panel.is-active{ display:block !important; }

/* ----------------------------------------------------------
   Lists & cards
   ---------------------------------------------------------- */
.pfx-list{display:grid;gap:14px}
.pfx-empty{display:flex;align-items:center;justify-content:center;gap:15px;min-height:118px;padding:22px;border:1px dashed #cbd9e7;border-radius:16px;background:linear-gradient(135deg,#fbfdff,#f5f9fd);color:#617386;text-align:left}
.pfx-empty__icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:15px;background:#e8f3fe;color:#1976d2}
.pfx-empty__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pfx-empty__copy{display:block;min-width:0}
.pfx-empty__copy strong{display:block;margin-bottom:5px;color:#1e293b;font-size:17px}
.pfx-empty__copy span{display:block;font-size:14px;line-height:1.5}
@media(max-width:520px){.pfx-empty{align-items:flex-start;justify-content:flex-start;min-height:0;padding:18px}.pfx-empty__icon{width:42px;height:42px;flex-basis:42px}}

.rev,.qa{border:1px solid var(--pfx-border);border-radius:var(--pfx-radius);padding:14px;background:var(--pfx-card);box-shadow:var(--pfx-shadow-sm)}

/* Review */
.rev__head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.rev__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--pfx-subtle);font-size:13px}
.rev__avatar{width:36px;height:36px;border-radius:999px;background:linear-gradient(180deg,#e2e8f0,#f8fafc);border:1px solid var(--pfx-border);display:inline-grid;place-items:center;font-weight:800;color:var(--pfx-brand-ink)}
.rev__name{font-weight:800;color:var(--pfx-text)}
.rev__verified{background:var(--pfx-success-bg);color:var(--pfx-success-ink);padding:2px 10px;border-radius:999px;font-size:12px;font-weight:800}

/* Stars inside review */
.rev__stars{--s:20px;--g:4px;position:relative;display:inline-block;vertical-align:middle;width:calc(5*var(--s) + 4*var(--g));height:var(--s)}
.rev__stars .row{position:absolute;inset:0;display:flex;gap:var(--g)}
.rev__stars .row i{width:var(--s);height:var(--s);flex:0 0 var(--s);background:#d1d5db;mask:var(--star) center/contain no-repeat;-webkit-mask:var(--star) center/contain no-repeat}
.rev__stars .row.fg{overflow:hidden;width:max(0px, calc(var(--val,0)*(var(--s) + var(--g)) - var(--g)))}
.rev__stars .row.fg i{background:#ffc107}

.rev__body{color:var(--pfx-text);line-height:1.6}
.rev.is-truncated .rev__body{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;position:relative}
.rev.is-truncated .rev__body::after{content:"";position:absolute;inset:auto 0 0; height:40px;background:linear-gradient(to bottom, rgba(255,255,255,0), var(--pfx-card))}

.rev__proscons{display:grid;gap:8px;margin:10px 0;color:var(--pfx-text)}
.rev__pc{background:linear-gradient(180deg,rgba(2,24,48,.02),rgba(2,24,48,0));border:1px solid var(--pfx-border);border-radius:10px;padding:10px}
.rev__pc b{display:block;margin-bottom:6px}

/* Photos grid */
.rev__photos{display:grid;grid-template-columns:repeat(6, minmax(60px, 1fr));gap:8px;margin-top:10px}
.rev__photos img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1px solid var(--pfx-border)}
@media (max-width: 640px){.rev__photos{grid-template-columns:repeat(4,1fr)}}

/* Footer actions */
.rev__foot{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:12px}
.rev__help{display:flex;gap:8px}
.rev__help button{border:1px solid var(--pfx-border);background:var(--pfx-chip);border-radius:999px;padding:6px 10px;cursor:pointer;font-weight:700}
.rev__help button.is-on{background:var(--pfx-grad);color:#fff;border:none}
.rev__share{color:var(--pfx-brand-ink);font-size:13px;cursor:pointer}

/* Q&A */
.qa__title{font-weight:800;margin:0 0 4px;color:var(--pfx-text)}
.qa__meta{color:var(--pfx-subtle);font-size:13px;margin-bottom:6px}
.qa__ans{margin-top:10px;padding-left:14px;border-left:3px solid var(--pfx-border)}

/* Pager */
.pfx-pager{display:flex;gap:10px;align-items:center;justify-content:center;margin:14px 0}
.pfx-pager[hidden]{ display:none !important; }
.pfx-page{min-width:2ch;text-align:center}

/* ----------------------------------------------------------
   Contextual composer: only one form is visible at a time
   ---------------------------------------------------------- */
.pfx-submit-notice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 14px;
  padding:15px 17px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.pfx-submit-notice[hidden]{display:none!important}
.pfx-submit-notice.is-success{border:0;background:var(--pfx-grad);color:#fff;box-shadow:0 9px 26px rgba(25,118,210,.23)}
.pfx-submit-notice.is-error{border:1px solid #efb4b4;background:#fff3f3;color:#8f1f1f;box-shadow:0 8px 24px rgba(198,40,40,.1)}
.pfx-submit-notice__icon{width:30px;height:30px;display:inline-grid;place-items:center;flex:0 0 30px;border-radius:50%;font-size:18px;font-weight:900}
.pfx-submit-notice.is-success .pfx-submit-notice__icon{background:rgba(255,255,255,.18)}
.pfx-submit-notice.is-error .pfx-submit-notice__icon{background:#ffd9d9}
.pfx-submit-notice__content{display:block;flex:1;min-width:0;line-height:1.45}
.pfx-submit-notice__content strong{display:block;margin-bottom:3px;font-size:16px}
.pfx-submit-notice__content span{display:block}
#pfx-submit-notice-close{flex:0 0 auto;padding:0;border:0;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}

.pfx-inline{
  position:relative;
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.75fr);
  margin:0 0 24px;
  overflow:hidden;
  border:0;
  border-radius:22px;
  background:var(--pfx-card);
  box-shadow:0 24px 60px rgba(15,44,74,.16),0 2px 8px rgba(15,23,42,.06);
  animation:pfxComposerIn .24s cubic-bezier(.2,.75,.25,1);
}
.pfx-inline[hidden]{display:none!important}
.pfx-inline>details{display:none!important}
.pfx-inline::before{content:none}
@keyframes pfxComposerIn{from{opacity:0;transform:translateY(-10px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}

.pfx-composer__head{
  position:relative;
  min-height:100%;
  display:block;
  overflow:hidden;
  padding:34px 30px;
  border:0;
  background:linear-gradient(145deg,#0d4072 0%,#1976d2 56%,#29a1f5 100%);
  color:#fff;
}
.pfx-composer__head::before{content:"";position:absolute;width:220px;height:220px;right:-115px;top:-80px;border:42px solid rgba(255,255,255,.085);border-radius:50%}
.pfx-composer__head::after{content:"";position:absolute;width:110px;height:110px;left:-66px;bottom:-56px;border:26px solid rgba(255,255,255,.07);border-radius:50%}
.pfx-composer__brand{position:relative;z-index:1}
.pfx-composer__eyebrow{display:block;margin-bottom:14px;color:rgba(255,255,255,.76);font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.pfx-composer__head h3{max-width:270px;margin:0;color:#fff;font-size:28px;line-height:1.12;letter-spacing:-.025em}
.pfx-composer__head p{max-width:290px;margin:15px 0 0;color:rgba(255,255,255,.8);font-size:14px;line-height:1.62}
.pfx-composer__mark{position:absolute;right:-4px;top:180px;color:rgba(255,255,255,.08);font-size:150px;font-weight:950;line-height:.8;letter-spacing:-.12em;user-select:none}
.pfx-composer__close{position:absolute;z-index:2;top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:rgba(255,255,255,.1);color:#fff;font-size:25px;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.pfx-composer__close:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.19);transform:rotate(4deg)}
.pfx-composer__close:focus-visible{outline:none;box-shadow:var(--pfx-focus-ring)}

.pfx-form-panel{min-width:0;background:var(--pfx-card)}
.pfx-form-panel[hidden]{display:none!important}
.pfx-inline form{width:100%;padding:28px 30px 30px;background:var(--pfx-card)}
.f-row{margin:0 0 17px;display:flex;flex-direction:column;gap:8px}
.f-row label{font-weight:800;color:#1e293b;font-size:13px}
.pfx-label-note{margin-left:4px;color:var(--pfx-subtle);font-size:12px;font-weight:600}
.pfx-field-grid{display:grid;gap:14px}
.pfx-field-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfx-field-grid .f-row{min-width:0}
.pfx-rating-row{margin-bottom:20px;padding:16px 18px;border:1px solid #d7e9fa;border-radius:15px;background:linear-gradient(135deg,#f4f9ff,#fbfdff)}
.pfx-rating-row>label{color:#164f82}
.pfx-inline input[type="text"],
.pfx-inline input[type="email"],
.pfx-inline input[type="tel"],
.pfx-inline input[type="file"],
.pfx-inline textarea,
.pfx-inline select{
  display:block;
  width:100%;
  padding:12px 14px;
  border:1px solid #d5e0ea;
  border-radius:12px;
  outline:none;
  background:#fff;
  color:#172033;
  font:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.pfx-inline textarea{min-height:112px;resize:vertical;line-height:1.55}
.pfx-inline input::placeholder,.pfx-inline textarea::placeholder{color:var(--pfx-muted)}
.pfx-inline input:hover,.pfx-inline textarea:hover,.pfx-inline select:hover{border-color:#9fb8d0}
.pfx-inline input:focus,.pfx-inline textarea:focus,.pfx-inline select:focus{border-color:#58a5e8;box-shadow:0 0 0 4px rgba(33,150,243,.13)}
.pfx-inline input[type="file"]{padding:9px;background:#f7fbff;color:var(--pfx-subtle)}
.pfx-inline input[type="file"]::file-selector-button{margin-right:10px;padding:8px 11px;border:0;border-radius:8px;background:#e3f1fd;color:#1268b9;font-weight:800;cursor:pointer}
.field-error{margin:0;color:#c62828;font-size:13px;font-weight:700}

.f-row.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.f-row.grid>div{min-width:0}
.f-row.grid>div>label{display:block;margin-bottom:7px}
.f-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding-top:19px;border-top:1px solid #e4ebf2}
.f-actions__buttons{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex:0 0 auto}
.pfx-moderation-note{max-width:480px;margin:0;color:var(--pfx-subtle);font-size:12px;line-height:1.45}
.req{color:#e53935}
.hp{position:absolute;left:-9999px;top:-9999px;opacity:0}

/* Logged-in: hide guest fields */
.pfx-inline form[data-logged="1"] .guest-only{display:none!important}
.pfx-inline form[data-logged="1"] .guest-only *{pointer-events:none}

@media (max-width:860px){
  .pfx-inline{grid-template-columns:1fr}
  .pfx-composer__head{min-height:205px;padding:28px 24px}
  .pfx-composer__head h3{max-width:520px;font-size:25px}
  .pfx-composer__head p{max-width:560px;margin-top:10px}
  .pfx-composer__mark{right:20px;top:74px;font-size:125px}
}
@media (max-width:760px){
  .pfx-field-grid--2,.f-row.grid{grid-template-columns:1fr}
  .pfx-inline{border-radius:18px}
  .pfx-composer__head{min-height:190px;padding:26px 20px}
  .pfx-inline form{padding:21px 18px 23px}
  .f-actions{align-items:stretch;flex-direction:column}
  .pfx-moderation-note{max-width:none}
  .f-actions__buttons{width:100%}
  .f-actions__buttons .pfx-btn{flex:1 1 0}
}
@media (max-width:430px){
  .f-actions__buttons{display:grid;grid-template-columns:1fr}
  .f-actions__buttons .pfx-btn.primary{order:-1}
}

@media (prefers-color-scheme:dark){
  .pfx-tabs{border-color:var(--pfx-border);background:transparent}
  .pfx-tab-switch{background:transparent}
  .pfx-tab:hover{color:#8bc8ff;background:transparent}
  .pfx-tab.is-active{background:transparent;color:#e5e7eb}
  .pfx-tab.is-active .pfx-tab__count{background:rgba(33,150,243,.14);color:#8bc8ff}
  .pfx-compose-toggle.is-open{color:#8bc8ff;background:#10243a;box-shadow:inset 0 0 0 1px #28577f}
  .pfx-inline{border-color:var(--pfx-border)}
  .pfx-form-panel,.pfx-inline form{background:#0f172a}
  .pfx-rating-row{border-color:#213b55;background:#111d30}
  .pfx-rating-row>label,.f-row label{color:#dbeafe}
  .pfx-inline input[type="text"],.pfx-inline input[type="email"],.pfx-inline input[type="tel"],.pfx-inline input[type="file"],.pfx-inline textarea,.pfx-inline select{border-color:#2a3a50;background:#111b2d;color:#e5e7eb}
}

/* ----------------------------------------------------------
   Modals (if you switch to <dialog> later)
   ---------------------------------------------------------- */
.pfx-modal{width:min(720px,96vw);border:none;border-radius:16px;padding:0;overflow:hidden;box-shadow:var(--pfx-shadow-lg)}
.pfx-modal::backdrop{background:rgba(15,23,42,.45)}
.pfx-modal form{padding:16px;background:var(--pfx-card)}
.pfx-modal h3{margin:0 0 10px}

/* ----------------------------------------------------------
   Interactive Stars (form)
   ---------------------------------------------------------- */
.rate-stars{display:inline-flex;gap:8px;align-items:center;user-select:none}
.rate-stars button{width:26px;height:26px;border:none;background:#d1d5db;cursor:pointer;padding:0;mask:var(--star) center/contain no-repeat;-webkit-mask:var(--star) center/contain no-repeat;transition:background-color .12s ease, transform .06s ease}
.rate-stars button.is-on{background:#ffc107}
.rate-stars button:hover{transform:translateY(-1px)}

/* ----------------------------------------------------------
   Utilities & accessibility
   ---------------------------------------------------------- */
.pfx .sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pfx a, .pfx button{outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .pfx *, .pfx *::before, .pfx *::after{transition:none!important;animation:none!important}
}

/* ----------------------------------------------------------
   Optional: skeleton loading states (add .is-loading to card)
   ---------------------------------------------------------- */
@keyframes pfx-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.rev.is-loading .rev__body, .qa.is-loading .qa__title{color:transparent;user-select:none;background:linear-gradient(90deg,#e5edf7 0%,#f3f7fd 40%,#e5edf7 80%);background-size:200% 100%;animation:pfx-shimmer 1.6s infinite linear}

/* ----------------------------------------------------------
   Backward‑compat for any legacy classes used earlier
   ---------------------------------------------------------- */
.pfx-page{min-width:2ch}

/* End */

.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ===== Відповідь на відгук ===== */
.rev__reply{ margin-top:10px; border-top:1px dashed #e5e7eb; padding-top:10px; }
.rev__reply[open]{ border-top-color:#cfe0fb; }

.rev__reply-sum{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #e7ecf2; background:#fff; color:#0f172a;
  border-radius:999px; cursor:pointer; user-select:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rev__reply-sum .ico{ width:16px; height:16px; }
.rev__reply-sum:hover{ background:#f8fafc; border-color:#cbd5e1; }
.rev__reply[open] .rev__reply-sum{ border-color:#9ec5ff; box-shadow:0 0 0 3px rgba(33,150,243,.12); }

.rev__reply-form{
  margin-top:10px; padding:12px; border:1px solid #e7ecf2; background:#f9fbff;
  border-radius:12px; animation: revDrop .18s ease;
}
.rev__reply-form textarea{
  width:100%; display:block; padding:10px 12px; border:1px solid #dbe3ef; border-radius:10px;
  background:#fff; color:#0f172a; font:inherit; outline:none; resize:vertical; min-height:96px;
}
.rev__reply-form textarea:focus{ border-color:#9ec5ff; box-shadow:0 0 0 3px rgba(33,150,243,.15); }

.rev__reply-actions{ margin-top:10px; display:flex; gap:8px; justify-content:flex-end; }

@keyframes revDrop{
  from{ opacity:0; transform: translateY(-4px); }
  to  { opacity:1; transform: translateY(0); }
}

  /* Компактний рядок біля назви */
.pfx-mini{
  --bd:#e7ecf2;
  --bg1:#ffffff; --bg2:#fafbfd;
  --txt:#0f172a;
  --link:#2563eb;
  --dot:#cbd5e1;
  --stars:#ffb400; /* колір зірок (можна перекрити тоном нижче) */

  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--txt);
  font-weight:600; font-size:14px; line-height:1;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pfx-mini:hover{
  border-color:#cfe0fb;
  box-shadow:0 0 0 4px rgba(33,150,243,.08);
}

.pfx-mini .pfx-stars{ --s:21px; --g:3px; vertical-align:-2px; }
.pfx-mini .pfx-stars__row--fg > span{ background:var(--stars); }

.pfx-mini-avg{ font-variant-numeric:tabular-nums; opacity:.92; }
.pfx-mini .dot{ width:3px; height:3px; border-radius:50%; background:var(--dot); }
.pfx-mini a.pfx-mini-count{
  color:var(--link); text-decoration:none; font-weight:600;
}
.pfx-mini a.pfx-mini-count:hover{ text-decoration:underline; }

/* Тональні варіації за середньою оцінкою (опційно) */
.pfx-mini[data-tone="good"]{ --stars:#16a34a; }
.pfx-mini[data-tone="ok"]  { --stars:#f59e0b; }
.pfx-mini[data-tone="bad"] { --stars:#ef4444; }

/* Темна тема */
@media (prefers-color-scheme: dark){
  .pfx-mini{
    --bd:#1f2937; --bg1:#0b1220; --bg2:#0e1526; --txt:#e5e7eb; --dot:#475569; --link:#60a5fa;
    box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .pfx-mini:hover{ border-color:#334155; box-shadow:0 0 0 4px rgba(96,165,250,.12); }
}

.gslide-image img {
  min-width: 0%;
  max-width: 100%;
}


.product-variants{
    margin:18px 0 16px;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 20px rgba(15,23,42,.05);
}

.color-picker,
.variant-picker{
    margin:0;
}

.color-picker + .variant-picker{
    margin-top:16px;
}

.color-picker__label,
.variant-picker__label{
    font-size:14px;
    font-weight:700;
    color:#111827;
    margin-bottom:10px;
}

.color-picker__name{
    color:#2563eb;
    font-weight:700;
}

.color-picker__list,
.variant-picker__list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.color-swatch{
    width:28px;
    height:28px;
    border-radius:999px;
    padding:0;
    border:2px solid #e5e7eb;
    background:var(--swatch-color,#fff);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    box-shadow:0 0 0 1px rgba(15,23,42,.06);
    transition:.15s ease;
}

.color-swatch:hover{
    transform:translateY(-1px);
    box-shadow:0 0 0 3px rgba(37,99,235,.16);
}

.color-swatch--active{
    border-color:#2563eb;
    box-shadow:
        0 0 0 3px rgba(37,99,235,.22),
        0 6px 16px rgba(37,99,235,.18);
}

.color-swatch--disabled{
    opacity:1;
}

.color-swatch--disabled::after{
    content:'';
    position:absolute;
    top:50%;
    left:-3px;
    width:calc(100% + 6px);
    height:2px;
    background:#ef4444;
    transform:rotate(-45deg);
    transform-origin:center;
    pointer-events:none;
}

.color-swatch--disabled .color-swatch__inner{
    opacity:.7;
}

.variant-option{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:86px;
    height:38px;
    padding:0 14px;
    border:1px solid #d1d5db;
    border-radius:12px;
    background:#fff;
    color:#111827;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    position:relative;
    transition:.15s ease;
}

.variant-option:hover{
    border-color:#2563eb;
    color:#2563eb;
    transform:translateY(-1px);
}

.variant-option--active{
    border-color:#2563eb !important;
    background:#eff6ff !important;
    color:#2563eb !important;
    box-shadow:
        0 0 0 3px rgba(37,99,235,.2),
        0 6px 16px rgba(37,99,235,.16);
}

.variant-option--disabled{
    opacity:.55;
    text-decoration:line-through;
    background:#f3f4f6;
}

@media (max-width:640px){
    .product-variants{
        padding:14px;
        margin:16px 0;
    }

    .variant-option{
        min-width:auto;
        height:36px;
        padding:0 12px;
        font-size:13px;
    }

    .color-swatch{
        width:26px;
        height:26px;
    }
}

.product-variants{
    margin:18px 0 16px;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:#fff;
}

.product-buy-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:16px 0 10px;
    padding:18px;
    border:1px solid #e5e7eb;
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#f8fafc);
}

.product-buy-box .product-price-box{
    margin:0;
}

.product-buy-box .add-to-cart-section{
    margin:0;
    flex-shrink:0;
}

@media(max-width:640px){
    .product-buy-box{
        flex-direction:column;
        align-items:stretch;
    }
}



.pp-lite{
    margin-top:14px;
}

.pp-lite__trigger{
    width:100%;

    border:none;

    background:#fff;

    border-radius:16px;

    padding:16px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    cursor:pointer;

    border:1px solid #e6ebf2;

    box-shadow:
        0 1px 2px rgba(15,23,42,.03);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.pp-lite__trigger:hover{
    transform:translateY(-1px);

    border-color:#cfe0fb;

    box-shadow:
        0 10px 24px rgba(37,99,235,.08);
}

.pp-lite__content{
    flex:1;
    text-align:left;
}

.pp-lite__top{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:4px;
}

.pp-lite__brand{
    display:flex;
    align-items:center;
    gap:8px;
}

.pp-lite__brand img{
    height:35px;
    width:auto;
    display:block;
}

.pp-lite__brand span{
    font-size:13px;
    font-weight:600;
    color:#334155;
}

.pp-lite__monthly{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.pp-lite__bottom{
    font-size:14px;
    color:#64748b;
}

.pp-lite__arrow{
    width:38px;
    height:38px;

    border-radius:12px;

    background:#f1f5f9;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    color:#2563eb;

    flex-shrink:0;
}

.pp-modal{
    position:fixed;
    inset:0;

    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;
}

.pp-modal__backdrop{
    position:absolute;
    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(3px);
}

.pp-modal__dialog{
    position:relative;

    width:100%;
    max-width:460px;

    background:#fff;

    border-radius:24px;

    padding:28px;

    z-index:2;

    animation:ppModalShow .16s ease;

    box-shadow:
        0 30px 80px rgba(15,23,42,.22);
}

@keyframes ppModalShow{

    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.pp-modal__close{
    position:absolute;

    top:14px;
    right:14px;

    width:38px;
    height:38px;

    border:none;

    border-radius:10px;

    background:#f1f5f9;

    cursor:pointer;

    font-size:24px;
}

.pp-modal__head{
    margin-bottom:24px;
}

.pp-modal__title{
    font-size:26px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:6px;
}

.pp-modal__subtitle{
    color:#64748b;
    font-size:14px;
}

.pp-form__group{
    margin-bottom:20px;
}

.pp-form__group label{
    display:block;
    margin-bottom:8px;

    font-size:14px;
    font-weight:600;

    color:#334155;
}

.pp-select{
    width:100%;
    height:52px;

    border:1px solid #dbe2ea;

    border-radius:14px;

    padding:0 16px;

    background:#fff;

    font-size:15px;
    font-weight:600;
}

.pp-summary{
    margin-bottom:20px;

    border:1px solid #e6ebf2;

    border-radius:16px;

    background:#f8fafc;

    padding:18px;
}

.pp-summary__row{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.pp-summary__row + .pp-summary__row{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid #e2e8f0;
}

.pp-summary__row span{
    color:#64748b;
}

.pp-summary__row strong{
    color:#0f172a;
    font-size:18px;
}

.pp-submit{
    width:100%;
    height:54px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    background:
        linear-gradient(
            90deg,
            #1976d2,
            #2196f3
        );

    color:#fff;

    font-size:15px;
    font-weight:700;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.pp-submit:hover{
    transform:translateY(-1px);
}

@media (max-width:640px){

    .pp-lite__trigger{
        padding:14px;
    }

    .pp-lite__monthly{
        font-size:16px;
    }

    .pp-modal__dialog{
        padding:22px;
        border-radius:20px;
    }

    .pp-modal__title{
        font-size:22px;
    }
}

@media (max-width:640px){

    .pp-installment-btn{
        padding:16px;
        border-radius:18px;
    }

    .pp-installment-title{
        font-size:16px;
    }

    .pp-installment-subtitle{
        font-size:13px;
    }

    .pp-modal-dialog{
        padding:24px;
        border-radius:24px;
    }

    .pp-modal-top h3{
        font-size:24px;
    }
}

.pp-summary__logo{
    margin-bottom:18px;
}

.pp-summary__logo img{
    height:80px;
    width:auto;
    display:block;
}

.pp-summary__row--muted span{
    font-size:13px;
    color:#94a3b8;
}

.pp-summary__row--muted strong{
    font-size:15px;
}