/* Revive product page — Reviews tab + "someone purchased" popup.
   Loaded only on the product template. Uses the same card as the main reviews page
   (snippets/revive-review-card.njk) but follows each product's theme colour (--pp-*). */

/* =========================== REVIEWS TAB =========================== */
.pp-reviews {
  --rv-line: rgba(255,255,255,.085); --rv-muted: #9290aa; --rv-accent: var(--pp-a, #a855f7);
  display: flex; flex-direction: column; gap: 14px;
}
.pp-reviews *, .pp-reviews *::before, .pp-reviews *::after { box-sizing: border-box; }
.pp-tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1; color: var(--pp-soft, #c9a0ff);
  background: rgba(var(--pp-rgb, 168,85,247), .14); border: 1px solid rgba(var(--pp-rgb, 168,85,247), .3);
}

/* summary strip */
.pp-reviews-summary {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 34px; align-items: center;
  padding: 22px 26px; border-radius: 16px; border: 1px solid rgba(var(--pp-rgb, 168,85,247), .22);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--pp-rgb, 168,85,247), .2), transparent 55%),
    linear-gradient(155deg, rgba(20,16,32,.9), rgba(10,9,16,.95));
}
.pp-reviews-score { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 120px; }
.pp-reviews-score > b {
  font-size: 54px; line-height: 1; font-weight: 800; letter-spacing: -.05em;
  background: linear-gradient(135deg, #fff, var(--pp-p2, #c26bff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pp-reviews-score > span:last-child { font-size: 12px; color: var(--rv-muted); font-weight: 600; letter-spacing: .02em; }
.pp-reviews .revive-rating-stars { position: relative; display: block; width: 65px; height: 13px; flex: none; }
.pp-reviews .revive-rating-track, .pp-reviews .revive-rating-fill > span { display: flex; width: 65px; height: 13px; }
.pp-reviews .revive-rating-track { color: rgba(255,255,255,.14); }
.pp-reviews .revive-rating-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; height: 13px; color: #facc15; }
.pp-reviews .revive-rating-stars svg { width: 13px; height: 13px; min-width: 13px; fill: currentColor; stroke: none; display: block; }
.pp-reviews-score .revive-rating-stars { width: 100px; height: 20px; }
.pp-reviews-score .revive-rating-track, .pp-reviews-score .revive-rating-fill > span { width: 100px; height: 20px; }
.pp-reviews-score .revive-rating-fill { height: 20px; }
.pp-reviews-score .revive-rating-stars svg { width: 20px; height: 20px; min-width: 20px; }

.pp-reviews-bars { display: flex; flex-direction: column; gap: 7px; }
.pp-reviews-bar { display: grid; grid-template-columns: 28px minmax(0,1fr) 26px; align-items: center; gap: 10px; font-size: 12px; color: var(--rv-muted); }
.pp-reviews-bar > span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: #cfc8dc; }
.pp-reviews-bar > span svg { width: 10px; height: 10px; fill: #facc15; }
.pp-reviews-bar > i { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.pp-reviews-bar > i > u { display: block; height: 100%; border-radius: inherit; text-decoration: none; background: linear-gradient(90deg, var(--pp-a3, #7c3aed), var(--pp-a, #a855f7), var(--pp-a2, #d946ef)); box-shadow: 0 0 12px rgba(var(--pp-rgb, 168,85,247), .6); }
.pp-reviews-bar > em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* all-5-star → compact one-line summary */
.pp-reviews-summary--solo { display: flex; justify-content: center; padding: 14px 22px; }
.pp-reviews-summary--solo .pp-reviews-score { flex-direction: row; gap: 16px; flex-wrap: wrap; justify-content: center; }
.pp-reviews-summary--solo .pp-reviews-score > b { font-size: 40px; }

/* review cards (same markup as the reviews page) */
.pp-reviews-list { display: flex; flex-direction: column; gap: 12px; }
.pp-reviews .revive-review-card {
  margin: 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--rv-line);
  background: linear-gradient(160deg, rgba(18,14,28,.85), rgba(11,9,18,.9));
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
}
.pp-reviews .revive-review-card:hover {
  border-color: rgba(var(--pp-rgb, 168,85,247), .4); transform: translateY(-2px);
  background: linear-gradient(160deg, rgba(24,18,38,.92), rgba(12,10,20,.95)); box-shadow: 0 16px 40px -22px rgba(var(--pp-rgb, 168,85,247), .55);
}
.pp-reviews .revive-review-card-header { display: flex; align-items: center; gap: 12px; min-width: 0; margin-bottom: 10px; }
.pp-reviews .revive-review-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--pp-a, #a855f7), var(--pp-a3, #7c3aed)); box-shadow: 0 6px 18px -6px rgba(var(--pp-rgb, 168,85,247), .7);
}
.pp-reviews .revive-review-card--automatic .revive-review-avatar { background: rgba(var(--pp-rgb, 168,85,247), .16); color: var(--pp-soft, #d0b3ed); box-shadow: none; border: 1px solid rgba(var(--pp-rgb, 168,85,247), .25); }
.pp-reviews .revive-review-card-identity { min-width: 0; flex: 1; }
.pp-reviews .revive-review-card-identity strong { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 700; color: #f1eef8; letter-spacing: -.02em; }
.pp-reviews .revive-review-verified-icon { width: 14px; height: 14px; fill: none; stroke: #4ade80; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pp-reviews .revive-review-card-identity time { display: block; font-size: 12px; line-height: 16px; color: #8b819b; margin-top: 1px; }
.pp-reviews .revive-review-source {
  display: inline-flex; align-items: center; align-self: flex-start; flex: none; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; line-height: 16px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--pp-soft, #c08ef6); background: rgba(var(--pp-rgb, 168,85,247), .1); border: 1px solid rgba(var(--pp-rgb, 168,85,247), .32);
}
.pp-reviews .revive-review-source.is-automatic { color: #a59aaf; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.09); }
.pp-reviews .revive-review-card-rating { margin-bottom: 8px; }
.pp-reviews .revive-review-message { margin: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: #d9d4e3; white-space: pre-line; overflow-wrap: anywhere; }
.pp-reviews .revive-review-card--automatic .revive-review-message { color: #a59bb2; font-weight: 500; }
.pp-reviews .revive-review-card-footer { display: none; }
.pp-reviews .revive-review-photo { display: block; padding: 0; margin-top: 14px; border: 1px solid var(--rv-line); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.pp-reviews .revive-review-photo img { width: 80px; height: 80px; object-fit: cover; display: block; }
.pp-reviews .revive-review-reply { margin-top: 14px; padding: 12px 14px; border-radius: 0 10px 10px 0; border-left: 2px solid rgba(var(--pp-rgb, 168,85,247), .55); background: rgba(var(--pp-rgb, 168,85,247), .06); }
.pp-reviews .revive-review-reply > span { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pp-soft, #bc96e2); margin-bottom: 5px; }
.pp-reviews .revive-review-reply svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pp-reviews .revive-review-reply p { margin: 0; font-size: 13px; line-height: 20px; color: #b3a9be; white-space: pre-line; overflow-wrap: anywhere; }
.pp-reviews .revive-review-reply time { display: block; margin-top: 6px; font-size: 11px; color: #81748e; }
.pp-reviews .revive-review-more { display: none; }

.pp-reviews-all {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--pp-soft, #c9a0ff); text-decoration: none !important;
  background: rgba(var(--pp-rgb, 168,85,247), .08); border: 1px solid rgba(var(--pp-rgb, 168,85,247), .3);
  transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.pp-reviews-all svg { width: 15px; height: 15px; transition: transform .25s; }
.pp-reviews-all:hover { background: rgba(var(--pp-rgb, 168,85,247), .18); border-color: rgba(var(--pp-rgb, 168,85,247), .6); color: #fff; }
.pp-reviews-all:hover svg { transform: translateX(3px); }

.pp-reviews-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; border-radius: 16px; border: 1px dashed rgba(var(--pp-rgb, 168,85,247), .28); background: rgba(var(--pp-rgb, 168,85,247), .04); }
.pp-reviews-empty svg { width: 30px; height: 30px; color: var(--pp-soft, #c9a0ff); opacity: .8; }
.pp-reviews-empty p { margin: 0; font-size: 14px; color: var(--rv-muted); }

@media (max-width: 640px) {
  .pp-reviews-summary { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .pp-reviews-score { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; }
  .pp-reviews-score > b { font-size: 44px; }
  .pp-reviews .revive-review-card { padding: 16px; }
}

/* ======================= "SOMEONE PURCHASED" POPUP ======================= */
.pp-sp {
  --sp-rgb: var(--pp-rgb, 168, 85, 247);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 10px 36px 13px 10px;
  border-radius: 14px; border: 1px solid rgba(var(--sp-rgb), .28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--sp-rgb), .22), transparent 55%),
    linear-gradient(160deg, rgba(22,18,34,.96), rgba(9,8,15,.97));
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.03) inset, 0 10px 40px -14px rgba(var(--sp-rgb), .55);
}
.pp-sp-media { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; }
.pp-sp-media > img, .pp-sp-fallback {
  width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: grid; place-items: center;
  border: 1px solid rgba(var(--sp-rgb), .4); background: #0b0a12; box-shadow: 0 8px 22px -8px rgba(var(--sp-rgb), .7);
}
.pp-sp-fallback { color: rgb(var(--sp-rgb)); }
.pp-sp-fallback svg { width: 22px; height: 22px; }
.pp-sp-live {
  position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #0b0a12;
}
.pp-sp-live::after { content: ""; position: absolute; inset: -2.5px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: ppSpPing 2s ease-out infinite; }
@keyframes ppSpPing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.pp-sp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-sp-kicker { font-size: 11.5px; line-height: 16px; font-weight: 500; color: #a39cb5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sp-title { font-size: 14px; line-height: 19px; font-weight: 800; letter-spacing: -.02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sp-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 11.5px; line-height: 16px; color: #8b839c; white-space: nowrap; }
.pp-sp-verified {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-weight: 700; color: #4ade80;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.28);
}
.pp-sp-verified svg { width: 12px; height: 12px; }
.pp-sp-time { overflow: hidden; text-overflow: ellipsis; }
.pp-sp-close {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 8px; border: 0; color: #8b839c; background: transparent; transition: background .2s, color .2s;
}
.pp-sp-close svg { width: 14px; height: 14px; }
.pp-sp-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.pp-sp-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(1);
  background: linear-gradient(90deg, rgba(var(--sp-rgb), .2), rgb(var(--sp-rgb)));
  animation: ppSpDrain 7s linear forwards;
}
.pp-sp:hover .pp-sp-bar { animation-play-state: paused; }
@keyframes ppSpDrain { to { transform: scaleX(0); } }
@media (max-width: 480px) { .pp-sp { padding-right: 34px; } }
@media (prefers-reduced-motion: reduce) { .pp-sp-live::after, .pp-sp-bar { animation: none; } }