/* Ported 1:1 from components/ProductReviews/index.tsx's injected
   <style> string. Two render variants exist in the DOM (see
   template-parts/product-reviews.php) exactly matching the original's
   own branch: pinned desktop stack vs. a plain revealed list on
   mobile / prefers-reduced-motion — picked here by CSS instead of a
   JS isMobile/reduceMotion check, same conditions either way. */
.pr-kicker{display:inline-block;font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.pr-h{font-family:var(--font-display);font-size:clamp(32px,4vw,52px);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;color:#fff;margin-bottom:18px;}
.pr-sub{font-size:clamp(14px,1.1vw,16px);line-height:1.6;color:#fff;max-width:400px;margin-bottom:44px;}

.pr-caps{position:relative;display:grid;min-height:132px;}
.pr-cap{grid-area:1/1;will-change:transform,opacity;}
.pr-cap-index{display:block;font-family:var(--font-body);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:10px;}
.pr-cap-client{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:#fff;
  margin-bottom:6px;}
.pr-cap-meta{font-size:.85rem;line-height:1.55;color:#fff;max-width:380px;margin-bottom:18px;}

.pr-cta{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  color:#fff;text-decoration:none;padding:11px 22px;border-radius:100px;background:#45454a;
  transition:box-shadow .25s,transform .25s;}
.pr-cta:hover{box-shadow:0 0 30px rgba(255,255,255,.15);transform:translateY(-2px);}
.pr-cta svg{transition:transform .25s;transform:scaleX(-1);}
.pr-cta:hover svg{transform:scaleX(-1) translateX(3px);}

.pr-stackwrap{position:relative;display:flex;justify-content:center;align-items:center;}
.pr-stack{position:relative;width:min(100%,540px);aspect-ratio:4/5;}
.pr-photo{position:absolute;inset:0;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);
  will-change:transform,opacity;}
.pr-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.pr-rail{display:flex;flex-direction:column;justify-content:center;gap:14px;
  height:100%;padding-left:4px;}
.pr-rail-n{font-family:var(--font-body);font-size:.68rem;letter-spacing:.08em;
  color:#fff;opacity:.55;transition:opacity .3s;}

.pr-grid{position:relative;max-width:1360px;margin:0 auto;padding:0 40px;width:100%;
  display:grid;grid-template-columns:.85fr 1.05fr auto;gap:32px;align-items:center;}

.pr-mcard{position:relative;}
.pr-mimg{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);margin-bottom:14px;}
.pr-mtag{display:block;font-family:var(--font-body);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px;}
.pr-mclient{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:#fff;
  margin-bottom:5px;}
.pr-mmeta{font-size:.85rem;line-height:1.5;color:#fff;margin-bottom:16px;}

/* ── Variant switch: desktop pinned stack vs. mobile static list ──
   Same two conditions as the original's isMobile (max-width:767px)
   ||reduceMotion — NOT the same breakpoint as the grid collapse
   below, which only affects the desktop variant's own internal
   layout on tablet widths (768-1024px, still pinned+scrubbed, just
   single-column). */
.pr-desktop { display: block; }
.pr-mobile { display: none; }
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .pr-desktop { display: none; }
  .pr-mobile { display: block; }
}
@media(max-width:1024px){
  .pr-grid{grid-template-columns:1fr;gap:60px;}
  .pr-rail{display:none;}
}