/* ==========================================================================
   MODE XV | Product page reviews
   Desktop: dark rating panel (sticky) beside a two-column card mosaic.
   Phone: rating panel on top, then a swipeable row of cards with a progress line.
   The section animates in once when it scrolls into view.
   ========================================================================== */
.rv-section{--rv-gold:var(--xv-gold,#a88f62);--rv-gold-deep:var(--xv-gold-deep,#8a7248);--rv-gold-soft:#d9c9a8;--rv-gold-light:#f3e6c4;--rv-ink:var(--xv-ink,#1d1c1b);--rv-card:var(--xv-card,#fffdfa);--rv-edge:var(--xv-edge,#e6dfd2);--rv-ease:var(--xv-ease,cubic-bezier(.22,1,.36,1));position:relative;overflow:hidden}
.rv-section::before{content:"";position:absolute;inset:auto -10% -30% auto;width:min(720px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(197,170,118,.16),transparent);pointer-events:none}
.rv-section .section-wrap{position:relative}
.rv-defs{position:absolute;width:0;height:0;overflow:hidden}
.rv-section .rv-head{margin-bottom:clamp(28px,3.6vw,44px)}
.rv-section .rv-head h2{margin-bottom:0}
.rv-section .rv-head h2 em{font-style:italic;background:linear-gradient(120deg,#b8955a,#8a7248 60%,#c9a86a);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.rv-layout{display:grid;grid-template-columns:minmax(270px,340px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}

/* ---------- Stars ---------- */
.rv-stars{position:relative;display:inline-block;flex:none;width:110px;height:22px;line-height:0}
.rv-stars svg{display:block;width:110px;height:22px}
.rv-stars-off{color:rgba(168,143,98,.2)}
.rv-stars-on{position:absolute;inset:0 auto 0 0;width:var(--rv-pct,100%);overflow:hidden;filter:drop-shadow(0 1px 1px rgba(110,84,40,.35))}
.rv-stars-on svg{width:110px}

/* ---------- Rating panel ---------- */
.rv-panel{position:sticky;top:calc(var(--chrome-height,100px) + 24px);isolation:isolate;overflow:hidden;padding:34px 30px 30px;border-radius:26px;color:#f5f2ec;background:radial-gradient(120% 70% at 0% 0%,rgba(212,182,124,.24),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgba(168,143,98,.18),transparent 70%),linear-gradient(160deg,#121314,#26272a 55%,#151617);box-shadow:0 34px 70px -34px rgba(20,18,14,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.rv-panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;background:linear-gradient(150deg,rgba(243,230,196,.55),rgba(217,201,168,.08) 40%,rgba(217,201,168,.04) 60%,rgba(212,182,124,.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.rv-panel::after{content:"XV";position:absolute;z-index:-1;right:-.06em;bottom:-.3em;font-family:var(--font-display,Georgia,serif);font-size:10rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(217,201,168,.12);pointer-events:none}
.rv-panel-glow{position:absolute;z-index:-1;top:-40%;left:-60%;width:60%;height:180%;background:linear-gradient(100deg,transparent,rgba(243,230,196,.09),transparent);transform:rotate(18deg);pointer-events:none}
.rv-score{display:flex;align-items:baseline;gap:12px}
.rv-score strong{font-family:var(--font-display,Georgia,serif);font-weight:400;font-size:clamp(4.4rem,6.4vw,5.6rem);line-height:.86;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;background:linear-gradient(180deg,#fbf3df 10%,#e2c891 55%,#b18f55);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 10px 30px rgba(212,182,124,.18)}
.rv-score span{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#b9a27a}
.rv-score-empty strong{font-size:clamp(2.8rem,4vw,3.4rem)}
.rv-panel .rv-stars{width:150px;height:30px;margin-top:16px}
.rv-panel .rv-stars svg{width:150px;height:30px}
.rv-panel .rv-stars-off{color:rgba(243,230,196,.16)}
.rv-panel .rv-stars-on{filter:drop-shadow(0 0 10px rgba(212,182,124,.35))}
.rv-based{margin:12px 0 0;color:#d4ccbd;font-size:.95rem;line-height:1.5}
.rv-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rv-stats span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid rgba(217,201,168,.22);border-radius:999px;background:rgba(255,255,255,.05);font-size:.78rem;font-weight:500;color:#e8dfcc}
.rv-stats svg{width:15px;height:15px;color:var(--rv-gold-soft)}
.rv-bars{list-style:none;display:grid;gap:7px;margin:22px 0 0;padding:20px 0 0;border-top:1px solid rgba(217,201,168,.16)}
.rv-bars li{display:grid;grid-template-columns:10px 12px minmax(0,1fr) 18px;align-items:center;gap:8px;font-size:.78rem;color:#b9b0a0}
.rv-bars li svg{width:12px;height:12px;color:var(--rv-gold-soft)}
.rv-bars i{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.rv-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--rv-w,0%);border-radius:inherit;background:linear-gradient(90deg,#9c7c45,#e2c891)}
.rv-bars b{font-weight:500;text-align:right;color:#e8dfcc;font-variant-numeric:tabular-nums}
.rv-controls{display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(217,201,168,.16)}
.rv-controls label{display:grid;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#b9a27a}
.rv-controls select{width:100%;height:44px;padding:0 38px 0 14px;border:1px solid rgba(217,201,168,.28);border-radius:12px;background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23d9c9a8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/12px no-repeat;color:#f5f2ec;font:inherit;font-size:.92rem;letter-spacing:0;text-transform:none;-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .25s ease}
.rv-controls select:hover{border-color:rgba(217,201,168,.55)}
.rv-controls select:focus-visible{outline:2px solid var(--rv-gold-soft);outline-offset:2px}
.rv-controls option{color:#1d1c1b}
.rv-write{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:50px;margin-top:24px;overflow:hidden;border-radius:999px;background:linear-gradient(135deg,#f0e2bf,#c9a86a 55%,#a88f62);color:#141414;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 14px 28px -14px rgba(201,168,106,.9),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .35s var(--rv-ease),box-shadow .35s ease}
.rv-write::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--rv-ease)}
.rv-write::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg);transition:transform .35s var(--rv-ease)}
.rv-write:hover{transform:translateY(-2px);box-shadow:0 20px 34px -16px rgba(201,168,106,1),inset 0 1px 0 rgba(255,255,255,.5);text-decoration:none}
.rv-write:hover::before{transform:translateX(120%)}
.rv-write:hover::after{transform:translateX(3px) rotate(45deg)}
.rv-write:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rv-note{margin:16px 0 0;font-size:.78rem;line-height:1.5;color:#9f978a}

/* ---------- Review cards ---------- */
.rv-feed{column-count:2;column-gap:18px}
.rv-card{position:relative;isolation:isolate;display:flex;flex-direction:column;break-inside:avoid;margin:0 0 18px;padding:26px 26px 20px;overflow:hidden;border:1px solid var(--rv-edge);border-radius:22px;background:radial-gradient(70% 60% at 100% 0%,rgba(212,182,124,.14),transparent 70%),linear-gradient(180deg,#fffdf9,#f8f3ea);color:var(--rv-ink);box-shadow:0 1px 2px rgba(60,48,28,.04),0 18px 36px -26px rgba(60,48,28,.45);transition:transform .5s var(--rv-ease),box-shadow .5s var(--rv-ease),border-color .3s ease}
.rv-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--rv-gold-deep),var(--rv-gold-light),var(--rv-gold));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--rv-ease)}
@media(hover:hover){.rv-card:hover{transform:translateY(-6px);border-color:#dccfb4;box-shadow:0 2px 4px rgba(60,48,28,.05),0 30px 54px -26px rgba(60,48,28,.55)}.rv-card:hover::after{transform:scaleX(1)}.rv-card:hover .rv-quote{transform:rotate(-8deg) scale(1.06)}}
.rv-quote{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#f7eedb,#ecdfc2);border:1px solid #e3d3ae;color:var(--rv-gold-deep);box-shadow:0 8px 16px -10px rgba(138,114,72,.6);transition:transform .45s var(--rv-ease)}
.rv-quote svg{width:19px;height:19px}
.rv-card-top{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:52px}
.rv-chips{display:flex;flex-wrap:wrap;gap:6px}
.rv-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border:1px solid var(--rv-edge);border-radius:999px;background:rgba(255,255,255,.7);color:#6b6357;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.rv-chip svg{width:14px;height:14px;color:var(--rv-gold-deep)}
.rv-chip-verified{border-color:#e3d3ae;background:#f5ecd9;color:var(--rv-gold-deep)}
/* Verified badges in the MODE XV palette. In-store = charcoal with a champagne tile (the barbershop);
   online = cream with a charcoal tile (the same badge, inverted). */
.rv-chips{align-items:center}
.rv-badge{--b-bg:radial-gradient(120% 160% at 0% 0%,rgba(226,200,145,.18),transparent 60%),linear-gradient(135deg,#1c1b19,#2f2c27 60%,#1b1a18);--b-edge:rgba(217,201,168,.38);--b-text:#f5efe2;--b-label:#d9c9a8;--b-tile:linear-gradient(145deg,#f3e6c4,#c9a86a 58%,#a88f62);--b-icon:#1d1c1b;--b-shadow:rgba(20,18,14,.55);position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px 0 5px;overflow:hidden;border:1px solid var(--b-edge);border-radius:12px;background:var(--b-bg);color:var(--b-text);white-space:nowrap;line-height:1;box-shadow:0 10px 20px -14px var(--b-shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.rv-badge-online{--b-bg:linear-gradient(135deg,#fffdf8,#f3eadb);--b-edge:#e2d3b3;--b-text:#1d1c1b;--b-label:#8a7248;--b-tile:linear-gradient(145deg,#3a3732,#1d1c1b 60%,#121110);--b-icon:#e2c891;--b-shadow:rgba(138,114,72,.45);box-shadow:0 10px 20px -14px var(--b-shadow),inset 0 1px 0 #fff}
.rv-badge::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;background:linear-gradient(100deg,transparent,rgba(255,246,222,.4),transparent);transform:skewX(-18deg);pointer-events:none;opacity:0}
.rv-badge-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:var(--b-tile);color:var(--b-icon);box-shadow:0 4px 10px -4px var(--b-shadow),inset 0 1px 0 rgba(255,255,255,.3)}
.rv-badge-icon svg{width:18px;height:18px}
.rv-seal{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-left:-1px;filter:drop-shadow(0 3px 5px rgba(110,84,40,.35))}
.rv-seal svg{width:32px;height:32px;overflow:visible;transition:transform .6s var(--rv-ease)}
.rv-seal-core{fill:#fdf8ec;stroke:rgba(138,114,72,.4);stroke-width:.6}
.rv-seal-check{stroke:#6e5a36;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.rv-animate.is-in .rv-seal{animation:rv-seal-in .9s var(--rv-ease) both;animation-delay:calc(.5s + var(--i,0)*90ms)}
@media(hover:hover){.rv-card:hover .rv-seal svg{transform:rotate(18deg)}}
@keyframes rv-seal-in{from{transform:scale(.4) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
.rv-badge-text{display:grid;gap:3px;text-align:left;font-size:.86rem;font-weight:600;letter-spacing:.005em}
.rv-badge-text small{font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--b-label)}
.rv-animate.is-in .rv-badge::after{animation:rv-badge-sheen 1.5s var(--rv-ease) both;animation-delay:calc(.9s + var(--i,0)*90ms)}
.rv-animate.is-in .rv-badge-icon{animation:rv-badge-pop .7s var(--rv-ease) both;animation-delay:calc(.5s + var(--i,0)*90ms)}
@media(hover:hover){.rv-card:hover .rv-badge::after{animation:rv-badge-sheen 1s var(--rv-ease) both}}
@keyframes rv-badge-sheen{0%{left:-60%;opacity:0}15%{opacity:1}100%{left:130%;opacity:0}}
@keyframes rv-badge-pop{0%{transform:scale(.5) rotate(-12deg);opacity:0}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}
.rv-card h3{margin:16px 0 0;font-family:var(--font-title,var(--font-display,Georgia,serif));font-weight:600;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em}
.rv-body{margin:16px 0 20px;font-size:1.04rem;line-height:1.65;color:#2b2824;white-space:pre-wrap;overflow-wrap:anywhere}
.rv-video{margin:-4px 0 20px;overflow:hidden;border-radius:16px;background:#111;box-shadow:0 0 0 1px var(--rv-edge),0 14px 26px -16px rgba(60,48,28,.7)}
.rv-video video{display:block;width:100%;max-height:420px;aspect-ratio:auto;background:#111}
.rv-photos{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 20px}
.rv-photos img{display:block;width:84px;height:84px;object-fit:cover;border-radius:14px;border:2px solid #fff;box-shadow:0 0 0 1px var(--rv-edge),0 10px 20px -12px rgba(60,48,28,.6);transition:transform .35s var(--rv-ease)}
@media(hover:hover){.rv-photos img:hover{transform:translateY(-2px) rotate(-2deg) scale(1.05)}}
/* Without JavaScript the original earlier-feedback section shows; keep its photos small too. */
.legacy-reviews .review-grid blockquote img.legacy-photo{display:inline-block;order:0;width:84px;max-width:84px;height:84px;margin:0 8px 16px 0;aspect-ratio:auto;object-fit:cover;border-radius:12px}
.rv-response{margin:0 0 18px;padding:12px 14px;border-left:3px solid var(--rv-gold);border-radius:0 12px 12px 0;background:#f4ecdc}
.rv-response strong{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rv-gold-deep)}
.rv-response p{margin:6px 0 0;line-height:1.55}
.rv-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--rv-edge)}
.rv-av{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(145deg,#2d2b28,#151413);color:#f3e6c4;font-family:var(--font-display,Georgia,serif);font-size:1rem;box-shadow:0 0 0 2px #fffdf9,0 0 0 3px #d4b67c,0 8px 16px -8px rgba(30,24,14,.6)}
.rv-name{display:grid;gap:3px;min-width:0}
.rv-name b{font-weight:600;font-size:.98rem}
.rv-name time{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#857d71}
.rv-name time svg{width:14px;height:14px;color:var(--rv-gold)}
.rv-helpful{margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--rv-edge);border-radius:999px;background:transparent;color:#6b665d;font:inherit;font-size:.78rem;cursor:pointer;white-space:nowrap;transition:border-color .25s ease,color .25s ease,background .25s ease}
.rv-helpful:hover:not(:disabled){border-color:var(--rv-gold);color:var(--rv-gold-deep);background:#faf5ea}
.rv-helpful:disabled{opacity:.7;cursor:default}
.rv-feed-empty{column-count:1}
.rv-empty{margin:0;padding:34px 28px;border:1px dashed #d8cdb9;border-radius:20px;background:rgba(255,253,250,.6);color:#6b665d;text-align:center;line-height:1.6}
.rv-progress{display:none}
.rv-pages{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px;color:#6b665d;font-size:.9rem}
.rv-pages button{height:42px;padding:0 18px;border:1px solid var(--rv-ink);border-radius:999px;background:var(--rv-ink);color:#fff;font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;transition:background .25s ease,transform .3s var(--rv-ease)}
.rv-pages button:hover:not(:disabled){background:#4a3f2c;transform:translateY(-1px)}
.rv-pages button:disabled{opacity:.4;cursor:default}

/* ---------- Scroll-in animation (runs once) ---------- */
.rv-animate .rv-head,.rv-animate .rv-panel,.rv-animate .rv-card{opacity:0}
.rv-animate.is-in .rv-head{animation:rv-rise .9s var(--rv-ease) both}
.rv-animate.is-in .rv-panel{animation:rv-slide .95s var(--rv-ease) .1s both}
.rv-animate.is-in .rv-card{animation:rv-rise .8s var(--rv-ease) both;animation-delay:calc(.25s + var(--i,0)*90ms)}
.rv-animate.is-in .rv-stars-on{animation:rv-fill 1.2s var(--rv-ease) both;animation-delay:.45s}
.rv-animate.is-in .rv-card .rv-stars-on{animation-delay:calc(.55s + var(--i,0)*90ms)}
.rv-animate.is-in .rv-bars i::after{animation:rv-bar 1.1s var(--rv-ease) .6s both}
.rv-animate.is-in .rv-panel-glow{animation:rv-sheen 6s ease-in-out 1.2s infinite}
@keyframes rv-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes rv-slide{from{opacity:0;transform:translateX(-24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rv-fill{from{width:0}to{width:var(--rv-pct,100%)}}
@keyframes rv-bar{from{width:0}to{width:var(--rv-w,0%)}}
@keyframes rv-sheen{0%{transform:translateX(0) rotate(18deg)}55%,100%{transform:translateX(420%) rotate(18deg)}}

/* Tablet: single column of cards beside the panel */
@media(min-width:701px) and (max-width:1000px){
  .rv-layout{grid-template-columns:minmax(240px,290px) minmax(0,1fr)}
  .rv-feed{column-count:1}
}

/* Phone: panel on top, swipeable cards */
@media(max-width:700px){
  .rv-layout{grid-template-columns:1fr;gap:18px}
  .rv-panel{position:relative;top:auto;padding:26px 22px 22px;border-radius:22px}
  .rv-panel::after{font-size:7.5rem}
  .rv-score strong{font-size:4.2rem}
  .rv-panel .rv-stars,.rv-panel .rv-stars svg{width:130px;height:26px}
  .rv-controls{grid-template-columns:1fr 1fr;margin-top:18px;padding-top:18px}
  .rv-write{margin-top:18px}
  .rv-main{min-width:0;margin-inline:-16px}
  .rv-feed{display:flex;gap:12px;column-count:auto;overflow-x:auto;padding:4px 16px 12px;scroll-snap-type:x mandatory;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rv-feed::-webkit-scrollbar{display:none}
  .rv-feed:focus-visible{outline:2px solid var(--rv-gold);outline-offset:-2px;border-radius:20px}
  .rv-card{flex:0 0 84%;margin:0;scroll-snap-align:start;padding:22px 20px 18px}
  .rv-card:only-child{flex-basis:100%}
  .rv-body{font-size:.98rem}
  .rv-feed-empty{display:block;padding-inline:16px}
  .rv-progress{display:block;position:relative;height:3px;margin:12px 16px 0;overflow:hidden;border-radius:3px;background:var(--rv-edge)}
  .rv-progress i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:3px;background:linear-gradient(90deg,var(--rv-gold-deep),var(--rv-gold-soft));transition:transform .15s linear}
  .rv-pages{margin:16px 16px 0}
}
@media(prefers-reduced-motion:reduce){
  .rv-card,.rv-write,.rv-write::before,.rv-write::after,.rv-pages button,.rv-helpful,.rv-progress i,.rv-quote,.rv-photos img{transition:none}
  .rv-animate .rv-head,.rv-animate .rv-panel,.rv-animate .rv-card{opacity:1}
  .rv-section *{animation:none!important}
}