/* ── PDP Reviews (v7.97) — built on the storefront --clr-* tokens,
     so dark mode and RTL are inherited with no extra rules. ── */
  .pdp-rating{
      display:inline-flex; align-items:center; gap:8px; margin-top:10px;
      text-decoration:none; cursor:pointer;
  }
  .pdp-rating--empty{ opacity:.75; }
  .pdp-rating-val{ font-size:14px; font-weight:900; color:var(--clr-text); font-variant-numeric:tabular-nums; }
  .pdp-rating-count{ font-size:12.5px; font-weight:700; color:var(--clr-text-3); }
  .pdp-rating:hover .pdp-rating-count{ color:var(--clr-primary); }

  .pdp-reviews{ margin-top:32px; scroll-margin-top:var(--anchor-offset, 96px); }
  .pdp-reviews-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
  .pdp-reviews-title{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:900; color:var(--clr-text); }
  .pdp-reviews-title i{ color:#f59e0b; font-size:.9em; }
  .pdp-reviews-count{
      font-size:12px; font-weight:800; color:var(--clr-text-3);
      background:var(--clr-surface-2); padding:2px 9px; border-radius:99px;
  }

  /* Summary: score + distribution bars */
  .pdp-rv-summary{
      display:flex; gap:28px; flex-wrap:wrap; align-items:center;
      background:var(--clr-surface); border:1px solid var(--clr-border);
      border-radius:var(--radius-xl); padding:20px 22px; margin-bottom:24px;
  }
  .pdp-rv-score{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:110px; }
  .pdp-rv-score-val{ font-size:38px; font-weight:900; color:var(--clr-text); line-height:1; font-variant-numeric:tabular-nums; }
  .pdp-rv-score-count{ font-size:11.5px; font-weight:700; color:var(--clr-text-3); }
  .pdp-rv-bars{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:6px; }
  .pdp-rv-bar-row{ display:flex; align-items:center; gap:9px; }
  .pdp-rv-bar-label{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:800; color:var(--clr-text-2); min-width:26px; }
  .pdp-rv-bar-label i{ font-size:9px; color:#f59e0b; }
  .pdp-rv-bar-track{ flex:1; height:7px; border-radius:99px; background:var(--clr-surface-2); overflow:hidden; }
  .pdp-rv-bar-fill{ display:block; height:100%; border-radius:99px; background:#f59e0b; transition:width .4s ease; }
  .pdp-rv-bar-num{ font-size:11px; font-weight:700; color:var(--clr-text-3); min-width:20px; text-align:end; font-variant-numeric:tabular-nums; }

  /* Review list */
  .pdp-rv-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:26px; }
  .pdp-rv-item{
      background:var(--clr-surface); border:1px solid var(--clr-border);
      border-radius:var(--radius-lg); padding:16px 18px;
  }
  .pdp-rv-item.is-featured{ border-color:var(--clr-primary); }
  /* Arriving via the admin's deep link (#review-ID): mark the target so
     the moderator's eye lands on the right card immediately. Pure CSS
     :target — no JS, and it costs nothing on normal visits.
     scroll-margin-top uses the centralized --anchor-offset (real sticky
     stack height, desktop + mobile) instead of a fixed guess — the old
     96px sat well under the header's actual height once the top bar
     and/or admin quick-bar were on screen, so the card landed hidden
     behind them. */
  .pdp-rv-item:target{
      border-color:var(--clr-primary);
      box-shadow:0 0 0 3px rgba(var(--clr-primary-rgb, 37,99,235), .16);
      scroll-margin-top:var(--anchor-offset, 96px);
      animation:pdpRvFocus 1.8s ease-out 1;
  }
  @keyframes pdpRvFocus{
      0%   { box-shadow:0 0 0 0   rgba(var(--clr-primary-rgb, 37,99,235), .45); }
      60%  { box-shadow:0 0 0 6px rgba(var(--clr-primary-rgb, 37,99,235), .12); }
      100% { box-shadow:0 0 0 3px rgba(var(--clr-primary-rgb, 37,99,235), .16); }
  }
  @media (prefers-reduced-motion: reduce){ .pdp-rv-item:target{ animation:none; } }
  .pdp-rv-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .pdp-rv-author{ display:flex; align-items:center; gap:10px; min-width:0; }
  .pdp-rv-avatar{
      width:36px; height:36px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      background:var(--clr-primary-100, var(--clr-surface-2)); color:var(--clr-primary);
      font-size:15px; font-weight:900;
  }
  .pdp-rv-author-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .pdp-rv-author-name{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px; font-weight:800; color:var(--clr-text); }
  .pdp-rv-verified{ color:#16a34a; font-size:11.5px; }
  .pdp-rv-date{ font-size:11px; color:var(--clr-text-3); font-weight:600; }
  .pdp-rv-item-title{ font-size:14px; font-weight:800; color:var(--clr-text); margin-bottom:6px; }
  .pdp-rv-body{ font-size:13.5px; color:var(--clr-text-2); line-height:1.7; }

  .pdp-rv-photos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .pdp-rv-photo{
      width:72px; height:72px; padding:0; border-radius:var(--radius);
      overflow:hidden; border:1px solid var(--clr-border); background:none;
      cursor:pointer; transition:transform .15s ease, border-color .15s ease;
  }
  .pdp-rv-photo:hover{ transform:scale(1.05); border-color:var(--clr-primary); }
  .pdp-rv-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

  .pdp-rv-reply{
      margin-top:12px; padding:11px 14px;
      background:var(--clr-surface-2); border-radius:var(--radius);
      border-inline-start:3px solid var(--clr-primary);
  }
  .pdp-rv-reply-head{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:900; color:var(--clr-primary); margin-bottom:5px; }
  .pdp-rv-reply p{ font-size:13px; color:var(--clr-text-2); line-height:1.65; }

  .pdp-rv-empty{
      text-align:center; padding:32px; margin-bottom:24px;
      background:var(--clr-surface-2); border-radius:var(--radius-xl); color:var(--clr-text-3);
  }
  .pdp-rv-empty i{ font-size:32px; opacity:.25; margin-bottom:10px; display:block; }
  .pdp-rv-empty p{ font-weight:600; }

  /* Collapsible form */
  .pdp-review-form-wrap{
      display:grid; grid-template-rows:0fr; opacity:0; overflow:hidden;
      transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
  .pdp-review-form-wrap > #review-form{ min-height:0; }
  .pdp-review-form-wrap.open{ grid-template-rows:1fr; opacity:1; }
  #review-form-toggle.active{ background:var(--clr-primary); color:#fff; border-color:var(--clr-primary); }
  .pdp-rv-form{
      background:var(--clr-surface); border:1px solid var(--clr-border);
      border-radius:var(--radius-xl); padding:24px;
  }
  .pdp-rv-form-title{ font-size:16px; font-weight:900; margin-bottom:20px; }
  .pdp-rv-flash{
      display:none; padding:12px 16px; border-radius:var(--radius);
      margin-bottom:16px; font-size:13.5px; font-weight:700;
  }
  .pdp-rv-flash.is-ok{ display:block; background:#dcfce7; color:#15803d; }
  .pdp-rv-flash.is-error{ display:block; background:#fee2e2; color:#b91c1c; }
  .pdp-rv-picker{ display:flex; align-items:center; gap:5px; }
  .pdp-rv-pick-btn{
      background:none; border:none; padding:3px; cursor:pointer; line-height:0;
      border-radius:6px; transition:transform .12s ease;
  }
  .pdp-rv-pick-btn:hover{ transform:scale(1.15); }
  .pdp-rv-pick-btn .yalo-star{ --yalo-star-size:30px; }
  .pdp-rv-moderation-note{ font-size:11.5px; color:var(--clr-text-3); font-weight:600; margin-top:12px; }

  @media (max-width:600px){
      .pdp-rv-summary{ gap:18px; padding:16px; }
      .pdp-rv-score{ min-width:90px; }
      .pdp-rv-score-val{ font-size:32px; }
  }

  /* ══════════════════════════════════════════════════════════════
     REVIEW SUCCESS DIALOG  (.pdp-rv-done)  — v10.4.1
     ──────────────────────────────────────────────────────────────
     Shown once a review is accepted, in place of the inline green
     strip that used to sit above a form the shopper had already
     submitted. Because a review is moderated, nothing changes on the
     page itself — so the confirmation has to carry the whole message
     on its own: received, held for review, published shortly.

     Centred with flexbox on the viewport rather than nudged with
     transforms: the card is centred at every size without a magic
     offset, and on a phone the same rule bottoms it out as a sheet,
     which is where a thumb already is. Built entirely on the
     storefront --clr-* tokens, so dark mode and RTL are inherited
     with no extra rules — the same contract as the rest of this file.
     ══════════════════════════════════════════════════════════════ */
  .pdp-rv-done{
      position:fixed; inset:0; z-index:950;
      display:flex; align-items:center; justify-content:center;
      padding:20px;
  }
  .pdp-rv-done[hidden]{ display:none; }

  .pdp-rv-done__backdrop{
      position:absolute; inset:0;
      background:rgba(15,23,42,.55);
      -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
      opacity:0; transition:opacity .22s ease;
  }
  .pdp-rv-done.is-open .pdp-rv-done__backdrop{ opacity:1; }

  .pdp-rv-done__card{
      position:relative; width:100%; max-width:400px;
      background:var(--clr-surface); color:var(--clr-text);
      border:1px solid var(--clr-border); border-radius:var(--radius-xl);
      padding:30px 26px 24px; text-align:center;
      box-shadow:0 24px 60px rgba(0,0,0,.28);
      opacity:0; transform:translateY(12px) scale(.96);
      transition:opacity .22s ease, transform .28s cubic-bezier(.2,.8,.3,1.05);
  }
  .pdp-rv-done.is-open .pdp-rv-done__card{ opacity:1; transform:none; }

  /* The tick draws itself. A static check would land at the same time
     as the card and read as a picture; drawn, it reads as the moment
     the thing succeeded. */
  .pdp-rv-done__mark{ display:flex; justify-content:center; margin-bottom:16px; }
  .pdp-rv-done__ring{
      stroke:var(--clr-success, #16a34a); stroke-width:2.5; opacity:.28;
      stroke-dasharray:145; stroke-dashoffset:145;
  }
  .pdp-rv-done__check{
      stroke:var(--clr-success, #16a34a); stroke-width:4;
      stroke-linecap:round; stroke-linejoin:round;
      stroke-dasharray:40; stroke-dashoffset:40;
  }
  .pdp-rv-done.is-open .pdp-rv-done__ring{ animation:rvDoneRing .5s ease forwards .08s; }
  .pdp-rv-done.is-open .pdp-rv-done__check{ animation:rvDoneCheck .38s ease forwards .34s; }
  @keyframes rvDoneRing { to{ stroke-dashoffset:0; } }
  @keyframes rvDoneCheck{ to{ stroke-dashoffset:0; } }

  .pdp-rv-done__title{
      font-size:19px; font-weight:900; line-height:1.4;
      margin:0 0 9px; color:var(--clr-text);
  }
  .pdp-rv-done__body{
      font-size:14px; font-weight:600; line-height:1.85;
      margin:0 0 24px; color:var(--clr-text-2);
  }

  .pdp-rv-done__btn{
      width:100%; min-height:46px; padding:13px 20px;
      border:none; border-radius:var(--btn-radius, var(--radius));
      background:var(--clr-primary); color:#fff;
      font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer;
      transition:filter .15s ease, transform .12s ease;
  }
  .pdp-rv-done__btn:hover{ filter:brightness(1.07); }
  .pdp-rv-done__btn:active{ transform:translateY(1px); }
  .pdp-rv-done__btn:focus-visible{ outline:3px solid var(--clr-primary); outline-offset:2px; }

  @media (max-width:520px){
      /* A sheet rather than a floating card: on a phone the dialog
         meets the thumb instead of asking it to reach the middle. */
      .pdp-rv-done{ padding:0; align-items:flex-end; }
      .pdp-rv-done__card{
          max-width:100%; border-radius:var(--radius-xl) var(--radius-xl) 0 0;
          padding:26px 20px calc(22px + env(safe-area-inset-bottom, 0px));
          transform:translateY(100%);
      }
      .pdp-rv-done.is-open .pdp-rv-done__card{ transform:translateY(0); }
      .pdp-rv-done__title{ font-size:18px; }
  }

  @media (prefers-reduced-motion: reduce){
      .pdp-rv-done__backdrop, .pdp-rv-done__card{ transition:none; }
      .pdp-rv-done__ring, .pdp-rv-done__check{ animation:none; stroke-dashoffset:0; }
      .pdp-rv-done__btn{ transition:none; }
  }