/* ==================================================
   ELOBOOSTLEAGUE · CUSTOMER REVIEWS PAGE  (F3 redesign)
   Verified-orders feed + score summary + review wall.
   Inherits tokens, header, footer, .btn base, section heads
   and the .rv reveal from home-page.css, plus the shared page
   primitives (.page-hero, .crumbs, .support-band, .tp-stars)
   from pages.css. Both are enqueued first. Ported from the
   Claude Design exploration (EBL/LoL): recoloured to the
   eloboostleague red palette via inherited tokens, hardcoded
   EBL-blue/navy rgba() swapped to red/dark, and scaled x1.2
   to match the redesign (+20%). The per-tier rank colours
   (--tier) are kept and extended for the Valorant ladder.
   ================================================== */

/* hero right-side rating block */
.rev-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36.96px;
  align-items: end;
}
@media (max-width: 1032px) { .rev-hero-grid { grid-template-columns: 1fr; align-items: start; } }
.rev-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 18.48px; }
@media (max-width: 1032px) { .rev-hero-actions { align-items: flex-start; } }
.tp-band {
  display: inline-flex;
  align-items: center;
  gap: 13.2px;
  background: rgba(255,255,255,0.08);
  border: 1.2px solid rgba(255,255,255,0.16);
  border-radius: var(--r);
  padding: 13.2px 18.48px;
}
.tp-band .tp-stars { color: #22b358; }
.tp-band .tp-stars svg { width: 21.12px; height: 21.12px; }
.tp-band-text { font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; letter-spacing: calc(0.06em * var(--tracking)); text-transform: uppercase; color: rgba(255,255,255,0.85); }
.tp-band-text b { color: #fff; }
.btn-allrev {
  background: rgba(255,255,255,0.96);
  color: var(--royal);
  box-shadow: 0 12px 33.6px -14.4px rgba(10,17,25,0.5);
}
.btn-allrev:hover { transform: translateY(-1.32px); background: #fff; }

/* ---------- layout ---------- */
.rev-layout {
  max-width: 1742.4px;
  margin: 0 auto;
  padding: 0 31.68px;
  display: grid;
  grid-template-columns: 448.8px 1fr;
  gap: 29.04px;
  align-items: start;
}
@media (max-width: 1176px) { .rev-layout { grid-template-columns: 1fr; } }

.rev-aside { display: flex; flex-direction: column; gap: 21.12px; position: sticky; top: 110.88px; }
@media (max-width: 1176px) { .rev-aside { position: static; } }

/* score summary card */
.score-card {
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: calc(var(--r) + 2.64px);
  box-shadow: var(--shadow-soft);
  padding: 29.04px;
}
.score-top { display: flex; align-items: center; gap: 21.12px; padding-bottom: 21.12px; border-bottom: 1.2px solid var(--line-soft); }
.score-big { font-family: var(--font-display); font-weight: 700; font-size: 71.28px; letter-spacing: -0.04em; line-height: 0.9; color: var(--ink); }
.score-big small { font-size: 29.04px; font-weight: 500; color: var(--ink-muted); }
.score-side { display: flex; flex-direction: column; gap: 6.6px; }
.score-side .tp-stars { color: var(--green); }
.score-side .tp-stars svg { width: 19.8px; height: 19.8px; }
.score-side .based {
  font-family: var(--font-ui);
  font-size: 12.54px;
  letter-spacing: calc(0.1em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1.5;
}
.score-side .based b { color: var(--ink-soft); font-weight: 700; }

.dist { display: flex; flex-direction: column; gap: 9.24px; padding: 21.12px 0; border-bottom: 1.2px solid var(--line-soft); }
.dist-row { display: flex; align-items: center; gap: 13.2px; }
.dist-row .lab { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; color: var(--ink-soft); width: 15.84px; text-align: right; }
.dist-row .star-mini { width: 14.52px; height: 14.52px; color: var(--gold-deep); flex-shrink: 0; }
.dist-bar { flex: 1; height: 10.56px; border-radius: 1318.68px; background: var(--bg-deep); overflow: hidden; }
.dist-fill { height: 100%; border-radius: 1318.68px; background: #22b358; width: 0; transition: width 1s var(--ease-out); }
.dist-row .pct { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; color: var(--ink-muted); width: 39.6px; text-align: right; font-variant-numeric: tabular-nums; }

.score-stats { display: flex; justify-content: space-between; gap: 10.56px; padding-top: 21.12px; }
.score-stat { display: flex; flex-direction: column; align-items: center; gap: 6.6px; text-align: center; flex: 1; }
.score-stat svg { width: 21.12px; height: 21.12px; color: var(--royal); }
.score-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 18.48px; color: var(--ink); white-space: nowrap; }
.score-stat .l { font-family: var(--font-ui); font-size: 11.22px; letter-spacing: calc(0.1em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }

/* review submission form */
.rev-form {
  background: var(--bg-soft);
  border: 1.2px solid var(--line);
  border-radius: calc(var(--r) + 2.64px);
  padding: 29.04px;
}
.rev-form h3 { font-family: var(--font-display); font-weight: 700; font-size: 23.76px; letter-spacing: -0.01em; color: var(--ink); }
.rev-form .sub { font-size: 16.5px; color: var(--ink-soft); margin: 5.28px 0 21.12px; line-height: 1.5; }
.form-label { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.14em * var(--tracking)); text-transform: uppercase; color: var(--ink-muted); display: block; margin: 18.48px 0 9.24px; }
.form-label:first-of-type { margin-top: 0; }
.star-input { display: flex; gap: 7.92px; }
.star-input button {
  width: 44.88px; height: 44.88px;
  border: none;
  background: var(--bg-deep);
  border-radius: 6.6px;
  color: #c7d3e0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}
.star-input button svg { width: 22.44px; height: 22.44px; }
.star-input button:hover { transform: translateY(-2.64px); }
.star-input button.on { background: var(--gold); color: var(--navy); }
.rev-form input[type="text"], .rev-form textarea {
  width: 100%;
  border: 1.2px solid var(--line);
  background: #fff;
  border-radius: var(--r);
  padding: 14.52px 17.16px;
  font-family: var(--font-body);
  font-size: 17.82px;
  color: var(--ink);
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.rev-form input::placeholder, .rev-form textarea::placeholder { color: var(--ink-muted); }
.rev-form input:focus, .rev-form textarea:focus { border-color: var(--royal-soft); box-shadow: 0 0 0 3.6px var(--royal-tint); }
.rev-form textarea { resize: vertical; min-height: 110.88px; line-height: 1.55; }
.rev-form .btn { width: 100%; justify-content: center; margin-top: 21.12px; }
.rev-form .verified-note { display: inline-flex; align-items: center; gap: 7.92px; margin-top: 15.84px; font-family: var(--font-ui); font-size: 12.54px; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.rev-form .verified-note svg { width: 15.84px; height: 15.84px; color: var(--green); }

/* ---------- main column ---------- */
.rev-main { min-width: 0; }
.rev-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18.48px;
  flex-wrap: wrap;
  margin-bottom: 21.12px;
}
.rev-showing { font-family: var(--font-ui); font-size: 13.2px; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.rev-showing em { font-style: normal; color: var(--ink); font-weight: 700; }
.sort-seg { display: inline-flex; align-items: center; gap: 5.28px; background: #fff; border: 1.2px solid var(--line); border-radius: var(--r); padding: 3.96px; }
.sort-seg .lab { font-family: var(--font-ui); font-size: 12.54px; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); padding: 0 10.56px; }
.sort-btn {
  font-family: var(--font-ui);
  font-size: 14.52px;
  font-weight: 600;
  letter-spacing: calc(0.04em*var(--tracking));
  color: var(--ink-soft);
  background: none;
  border: none;
  border-radius: 5.28px;
  padding: 9.24px 15.84px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.sort-btn:hover { color: var(--royal); }
.sort-btn.on { background: var(--royal); color: #fff; }

.rev-grid { columns: 2; column-gap: 21.12px; }
@media (max-width: 1488px) { .rev-grid { columns: 2; } }
@media (max-width: 864px) { .rev-grid { columns: 1; } }
body[data-revcols="1"] .rev-grid { columns: 1; max-width: 950.4px; }

.rcard {
  break-inside: avoid;
  margin-bottom: 21.12px;
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: 26.4px;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease-out);
}
.rcard:hover { border-color: var(--royal-soft); box-shadow: var(--shadow-pop); transform: translateY(-2.64px); }
.rcard.is-hidden { display: none; }
.rcard-top { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; margin-bottom: 15.84px; }
.rcard .tp-stars { color: var(--green); }
.rcard .tp-stars svg { width: 19.8px; height: 19.8px; }
.rcard-date { font-family: var(--font-ui); font-size: 12.54px; letter-spacing: calc(0.08em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.rcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 21.12px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 9.24px; }
.rcard p { font-size: 17.82px; line-height: 1.62; color: var(--ink-soft); margin-bottom: 18.48px; }
.rcard-foot { display: flex; align-items: center; gap: 13.2px; padding-top: 15.84px; border-top: 1.2px solid var(--line-soft); }
.rcard-avatar {
  width: 39.6px; height: 39.6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.16px;
  color: #fff;
  flex-shrink: 0;
}
.rcard-name { font-size: 17.16px; font-weight: 600; color: var(--ink); }
.rcard-verified { display: inline-flex; align-items: center; gap: 6.6px; font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.08em*var(--tracking)); text-transform: uppercase; color: var(--green); margin-left: auto; }
.rcard-verified svg { width: 14.52px; height: 14.52px; }
.rcard-tags { display: flex; gap: 7.92px; flex-wrap: wrap; margin-bottom: 15.84px; }
.rcard-tag {
  font-family: var(--font-ui);
  font-size: 11.88px;
  font-weight: 600;
  letter-spacing: calc(0.06em*var(--tracking));
  text-transform: uppercase;
  color: var(--royal);
  background: var(--royal-tint);
  border-radius: 1318.68px;
  padding: 3.96px 11.88px;
}

.rev-more { display: flex; justify-content: center; margin-top: 31.68px; }

/* numbered pagination (review wall #revPager + the live glsr/WP .nav-links) */
.rev-pagination,
.ebl-reviews-page .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 7.92px; margin-top: 31.68px; }
.rev-pagination[hidden] { display: none; }
.rev-page,
.ebl-reviews-page .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46.2px; height: 46.2px; padding: 0 14.52px;
  border: 1.2px solid var(--line); border-radius: var(--r); background: #fff;
  font-family: var(--font-ui); font-size: 15.84px; font-weight: 700; color: var(--ink-soft);
  text-decoration: none; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.rev-page:hover,
.ebl-reviews-page a.page-numbers:hover { border-color: var(--royal-soft); background: var(--royal-tint); color: var(--royal); }
.rev-page.on,
.ebl-reviews-page .page-numbers.current { background: var(--royal); border-color: var(--royal-deep); color: #fff; }
.rev-page:disabled { opacity: 0.4; cursor: default; }
.rev-page-gap,
.ebl-reviews-page .page-numbers.dots { border: none; background: none; color: var(--ink-muted); min-width: 0; padding: 0 4.4px; }

/* ==================================================
   RECENT COMPLETED ORDERS (rank-up cards)
   ================================================== */
.co-head-row {
  max-width: 1742.4px;
  margin: 0 auto 29.04px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26.4px;
  flex-wrap: wrap;
}
.co-head-row .co-h-txt { min-width: 0; }
.co-head-row h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(31.68px, 2.6vw, 44.88px);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.12;
}
.co-head-row .co-h-sub {
  font-family: var(--font-ui);
  font-size: 14.52px;
  font-weight: 600;
  letter-spacing: calc(0.08em * var(--tracking));
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 14.52px;
  line-height: 1.2;
}
.co-filter { display: inline-flex; gap: 9.24px; flex-wrap: wrap; }
.co-fbtn {
  font-family: var(--font-ui);
  font-size: 14.52px;
  font-weight: 600;
  letter-spacing: calc(0.04em * var(--tracking));
  color: var(--ink-soft);
  background: #fff;
  border: 1.2px solid var(--line);
  border-radius: 1318.68px;
  padding: 10.56px 21.12px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.co-fbtn:hover { border-color: var(--royal-soft); color: var(--royal); }
.co-fbtn.on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ===================== COMPLETED ORDERS · feed shell ===================== */
/* Align content start with the nav logo: zero the section's side padding and
   give the inner wrappers the same 28.8px inset the nav uses. */
.page-section { padding-left: 0; padding-right: 0; }
.co-wrap { max-width: 1742.4px; margin: 0 auto; padding: 0 31.68px; }

/* 1 · Trustpilot panel */
.tp-panel { text-align: center; padding: 5.28px 0 39.6px; }
.tp-eyebrow { display: block; text-align: left; font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.18em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 29.04px; }
.tp-widget { display: inline-flex; align-items: center; gap: 11.88px; background: #fff; border: 1.2px solid var(--line); border-radius: 7.92px; padding: 18.48px 29.04px; box-shadow: var(--shadow-soft); transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.tp-widget:hover { border-color: #00b67a; transform: translateY(-1.32px); box-shadow: var(--shadow-pop); }
.tp-w-label { font-family: var(--font-body); font-size: 21.12px; color: var(--ink); }
.tp-w-mark { display: inline-flex; align-items: center; gap: 7.92px; font-family: var(--font-display); font-weight: 700; font-size: 23.76px; color: var(--ink); letter-spacing: -0.01em; }
.tp-w-star { color: #00b67a; display: inline-flex; }
.tp-w-star svg { width: 23.76px; height: 23.76px; }
.tp-note { max-width: 844.8px; margin: 23.76px auto 0; font-size: 18.48px; line-height: 1.7; color: var(--ink-muted); }

/* 2 · live feed */
.live-feed { display: flex; align-items: center; gap: 18.48px; background: #fff; border: 1.2px solid var(--line); border-radius: var(--r); padding: 17.16px 23.76px; box-shadow: var(--shadow-soft); margin-bottom: 18.48px; }
.lf-live { display: inline-flex; align-items: center; gap: 9.24px; font-family: var(--font-ui); font-size: 13.2px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--green); flex-shrink: 0; }
.lf-dot { width: 10.56px; height: 10.56px; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) { .lf-dot { animation: lf-pulse 1.8s ease-out infinite; } }
@keyframes lf-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,179,88,0.5); } 70% { box-shadow: 0 0 0 8.4px rgba(34,179,88,0); } 100% { box-shadow: 0 0 0 0 rgba(34,179,88,0); } }
.lf-bar { width: 1.32px; height: 21.12px; background: var(--line); flex-shrink: 0; }
.lf-text { font-family: var(--font-body); font-size: 17.82px; font-weight: 600; color: var(--ink); min-width: 0; }
.lf-text em { font-style: normal; font-weight: 700; }
.lf-text em.r-diamond { color: #4079d6; } .lf-text em.r-gold { color: #d2982f; } .lf-text em.r-platinum { color: #2fa595; } .lf-text em.r-ascendant { color: #2a9e62; } .lf-text em.r-silver { color: #6c7d8c; } .lf-text em.r-immortal { color: #cf4247; } .lf-text em.r-radiant { color: #d2982f; }
.lf-text.lf-in { animation: lf-fade 0.5s var(--ease-out); }
@keyframes lf-fade { from { opacity: 0; transform: translateY(5.28px); } to { opacity: 1; transform: none; } }

/* 3 · privacy bar */
.privacy-bar { display: flex; align-items: center; gap: 21.12px; background: linear-gradient(135deg, color-mix(in srgb, var(--green) 13%, #fff), color-mix(in srgb, var(--green) 5%, #fff)); border: 1.2px solid color-mix(in srgb, var(--green) 30%, #fff); border-radius: calc(var(--r) + 2.64px); padding: 22.44px 26.4px; margin-bottom: 39.6px; }
.pb-ico { width: 58.08px; height: 58.08px; flex-shrink: 0; border-radius: 11.88px; background: linear-gradient(135deg, #2cc468, #168a44); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 7.2px 16.8px -7.2px rgba(22,138,68,0.6); }
.pb-ico svg { width: 27.72px; height: 27.72px; }
.pb-txt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 19.8px; letter-spacing: calc(0.01em*var(--tracking)); text-transform: uppercase; color: #14633b; }
.pb-txt p { font-size: 17.16px; line-height: 1.55; color: #2c6b48; margin-top: 5.28px; }
.pb-txt strong { color: #14633b; font-weight: 700; }
.pb-txt a { color: #14633b; font-weight: 700; text-decoration: underline; text-underline-offset: 2.64px; white-space: nowrap; }

/* 4 · grid (3 per row) */
.co-grid { max-width: 1742.4px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 19.8px; align-items: start; }
@media (max-width: 1488px) { .co-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1180px) { .co-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .co-grid { grid-template-columns: 1fr; } }
.co-card { position: relative; background: #fff; border: 1.2px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-soft); overflow: hidden; display: flex; flex-direction: column; transition: border-color 260ms ease, box-shadow 260ms ease, transform 200ms var(--ease-out); }
.co-card:hover { border-color: var(--royal-soft); box-shadow: var(--shadow-pop); transform: translateY(-2.64px); }
.co-card.is-hidden { display: none; }
.co-empty { grid-column: 1 / -1; text-align: center; padding: 52.8px; font-family: var(--font-ui); font-size: 15.84px; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }

/* ---- shared card atoms (yellow tile + navy star rating) ---- */
.co-stars { display: inline-flex; gap: 2.64px; }
.co-stars .st { width: 27.72px; height: 27.72px; border-radius: 6.6px; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.co-stars .st svg { width: 15.84px; height: 15.84px; fill: currentColor; }
.co-rating-wrap { display: inline-flex; flex-direction: row; align-items: center; gap: 10.56px; flex-shrink: 0; }
.co-rate-num { font-family: var(--font-body); font-weight: 800; font-size: 22.44px; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
/* flex:1 lets the customer block shrink and the name truncate, so the fixed-width
   green rating can't overlap it on narrow cards (C2). */
.co-cust { display: flex; align-items: center; gap: 14.52px; min-width: 0; flex: 1 1 auto; }
.co-flag { width: 34.32px; height: 23.76px; object-fit: cover; border-radius: 3.96px; box-shadow: 0 1.2px 3.6px rgba(10,17,25,0.18); flex-shrink: 0; }
.co-cust-txt { display: flex; flex-direction: column; gap: 3.96px; min-width: 0; line-height: 1.3; }
.co-cust-txt i { display: block; font-style: italic; font-weight: 600; font-size: 17.16px; color: var(--ink-soft); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-cust-txt small { display: block; font-family: var(--font-ui); font-size: 11.88px; font-weight: 600; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); line-height: 1.2; }
.rn { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; color: var(--ink); }
.rn.r-iron { color: #8a8d91; } .rn.r-bronze { color: #b0764e; } .rn.r-silver { color: #8093a4; } .rn.r-gold { color: #d2982f; } .rn.r-platinum { color: #2fa595; } .rn.r-ascendant { color: #2a9e62; } .rn.r-diamond { color: #4079d6; } .rn.r-immortal { color: #cf4247; } .rn.r-radiant { color: #f0c040; }
.co-lab { display: block; font-family: var(--font-ui); font-size: 10.56px; font-weight: 700; letter-spacing: calc(0.16em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2.64px; }
.co-tags { display: flex; align-items: center; gap: 10.56px; flex-wrap: wrap; }
.co-tag { font-family: var(--font-ui); font-size: 13.2px; font-weight: 600; letter-spacing: calc(0.03em*var(--tracking)); text-transform: uppercase; border-radius: 1318.68px; padding: 6.6px 15.84px; display: inline-flex; align-items: center; gap: 7.92px; }
.co-tag.region { color: var(--royal); background: var(--royal-tint); }
.co-tag.boost { color: var(--ink-soft); background: var(--bg-soft); }
.co-tag.done { color: var(--green); background: color-mix(in srgb, var(--green) 12%, #fff); }
.co-tag.done .dot { width: 7.92px; height: 7.92px; border-radius: 50%; background: var(--green); }
.co-time { font-family: var(--font-ui); font-size: 12.54px; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-left: auto; }
.co-champ-row { display: flex; align-items: center; gap: 15.84px; }
.co-champ-lab { font-family: var(--font-ui); font-size: 12.54px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.co-champ-pill { display: inline-flex; align-items: center; gap: 10.56px; font-family: var(--font-body); font-weight: 700; font-size: 17.82px; color: var(--ink); background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: 1318.68px; padding: 6.6px 17.16px; }
.co-champ-pill .dot { width: 9.24px; height: 9.24px; border-radius: 50%; background: var(--royal); }
/* review quotes — Valorant-flavored, one per bottom layout */
.co-quote { font-size: 18.48px; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
/* cq-a · dark ribbon (deep red + gold) */
.cq-a { position: relative; background: var(--bg-soft); border-left: 3.6px solid var(--royal); border-radius: var(--r); padding: 18.48px 21.12px 18.48px 58.08px; color: var(--ink-soft); }
.cq-a::before { content: '\201C'; position: absolute; left: 18.48px; top: 14.52px; font-family: var(--font-display); font-weight: 800; font-size: 50.16px; line-height: 0.7; color: var(--royal); }
/* cq-b · gold hex bullet (minimal, borderless) */
.cq-b { display: flex; gap: 17.16px; align-items: flex-start; padding: 2.64px; }
.cq-b::before { content: ''; flex-shrink: 0; width: 19.8px; height: 22.44px; margin-top: 3.96px; background: linear-gradient(150deg, var(--gold), var(--gold-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* cq-c · labeled editorial (top rule + gold label) */
.cq-c { border-top: 1.2px solid var(--line); padding-top: 15.84px; }
.cq-c::before { content: 'Player review'; display: block; font-family: var(--font-ui); font-size: 11.22px; font-weight: 700; letter-spacing: calc(0.18em*var(--tracking)); text-transform: uppercase; color: var(--gold-deep); margin-bottom: 7.92px; font-style: normal; }
/* cq-d · angular folded-corner card */
.cq-d { position: relative; background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: var(--r); padding: 18.48px 21.12px; overflow: hidden; }
.cq-d::before { content: ''; position: absolute; top: -1.32px; right: -1.32px; border-top: 21.6px solid var(--gold); border-left: 21.6px solid transparent; }
/* empty (neutral) */
.co-quote-empty { background: #fff; border: 1.2px dashed var(--line); border-radius: var(--r); color: var(--ink-muted); padding: 17.16px 21.12px; font-style: italic; }
.co-quote-empty::before { display: none; }
.co-booster { display: flex; align-items: flex-start; justify-content: space-between; gap: 15.84px; padding-top: 18.48px; border-top: 1.2px solid var(--line-soft); }
.co-booster-lab { font-family: var(--font-ui); font-size: 14.52px; letter-spacing: calc(0.02em*var(--tracking)); color: var(--ink-muted); }
.co-booster-name { font-family: var(--font-body); font-weight: 700; font-size: 21.12px; color: var(--ink); margin-left: 7.92px; }
.co-booster-meta { display: flex; align-items: center; gap: 13.2px; margin-top: 11.88px; flex-wrap: wrap; }
.co-climbed { font-family: var(--font-ui); font-size: 14.52px; color: var(--ink-muted); }
.co-tier { font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: #fff; background: var(--royal); border-radius: 5.28px; padding: 3.96px 10.56px; }
.co-tier.immortal { background: #cf4247; } .co-tier.radiant { background: #d2982f; } .co-tier.ascendant { background: #2a9e62; }
.co-verified { display: inline-flex; align-items: center; gap: 6.6px; flex-shrink: 0; font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; letter-spacing: calc(0.12em*var(--tracking)); text-transform: uppercase; color: #fff; background: var(--green); border-radius: 5.28px; padding: 5.28px 11.88px; }
.co-verified svg { width: 13.2px; height: 13.2px; }
.co-votes { display: flex; gap: 9.24px; flex-wrap: wrap; }
.co-vote { display: inline-flex; align-items: center; gap: 9.24px; border: 1.2px solid var(--line); border-radius: 1318.68px; padding: 9.24px 17.16px; font-family: var(--font-ui); font-size: 13.86px; font-weight: 600; color: var(--ink-muted); background: #fff; }
.co-vote svg { width: 18.48px; height: 18.48px; }
.co-vote.helpful svg { color: var(--green); } .co-vote.speedy svg { color: var(--royal); } .co-vote.skilled svg { color: var(--royal); }
.co-vote b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===================== TROPHY · SPOTLIGHT ×2 + HERO BANNER ×2 ===================== */

/* shared trophy meta + balanced type tokens */
/* scoped to .co-t2 (the only completed-order card layout reviews-page.js renders) so
   the UI-batch-4 size reduction can't leak to other co-t* tiers (UI batch 4). */
.co-t2 .t-meta { display: flex; flex-direction: column; gap: 14.52px; }
.co-t2 .t-rank { font-size: 39.6px; line-height: 1.0; letter-spacing: 0.005em; }
.co-card[class*="co-t"] .t-from { font-family: var(--font-ui); font-size: 14.52px; font-weight: 600; letter-spacing: calc(0.06em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.co-card[class*="co-t"] .t-from b { color: var(--ink-soft); }

/* tier color tokens for rings / blocks (LoL ladder). This file was ported from the
   Valorant skin still carrying ascendant/immortal/radiant — EBL's order feed emits
   tc-emerald / tc-master / tc-grandmaster / tc-challenger, which had NO --tier, so
   color-mix(var(--tier)) failed and those cards lost their hexagon plate entirely
   (the "some have hexagons and some not" report). The .co-card default is the
   belt-and-braces fallback so an unmapped future tier still paints. */
.co-card{--tier:#8093a4;}
.tc-iron{--tier:#7c7f84;} .tc-bronze{--tier:#b0764e;} .tc-silver{--tier:#8093a4;} .tc-gold{--tier:#d2982f;}
.tc-platinum{--tier:#2fa595;} .tc-emerald{--tier:#2a9e62;} .tc-diamond{--tier:#4079d6;}
.tc-master{--tier:#9b59c6;} .tc-grandmaster{--tier:#cf4247;} .tc-challenger{--tier:#f0c040;}

/* ---- T1 · SPOTLIGHT — GLOW ---- */
.co-t1 { padding: 29.04px 26.4px 26.4px; display: flex; flex-direction: column; }
.co-t1 .t-top { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; }
.co-t1 .t-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 21.12px 0 23.76px; margin: 21.12px 0 23.76px; border-bottom: 1.2px solid var(--line-soft); }
.co-t1 .t-crest { position: relative; display: inline-flex; }
.co-t1 .t-crest::before { content: ''; position: absolute; inset: -23.76px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 26%, transparent), transparent 64%); }
.co-t1 .t-crest img { position: relative; width: 184.8px; height: 184.8px; object-fit: contain; filter: drop-shadow(0 18.48px 29.04px rgba(10,17,25,0.32)); }
.co-t1 .t-rank { margin-top: 15.84px; }
.co-t1 .t-from { display: inline-flex; align-items: center; gap: 10.56px; margin-top: 15.84px; background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: 1318.68px; padding: 7.92px 18.48px; }
.co-t1 .t-from img { width: 26.4px; height: 26.4px; object-fit: contain; }
.co-t1 .t-from .ar { color: var(--green); display: inline-flex; }
.co-t1 .t-from .ar svg { width: 15.84px; height: 15.84px; }

/* ---- T2 · SPOTLIGHT — HEXAGON (hex plate) ---- */
.co-t2 { padding: 24.2px 22px 22px; display: flex; flex-direction: column; }
.co-t2 .t-top { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; }
.co-t2 .t-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 15.84px 0 17.6px; margin: 15.84px 0 17.6px; border-bottom: 1.2px solid var(--line-soft); }
.co-t2 .t-hex { position: relative; width: 211.2px; height: 211.2px; display: flex; align-items: center; justify-content: center; }
.co-t2 .t-hex::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(150deg, color-mix(in srgb, var(--tier) 30%, #fff), color-mix(in srgb, var(--tier) 13%, #fff)); box-shadow: 0 12px 26.4px -14.4px color-mix(in srgb, var(--tier) 60%, transparent); }
.co-t2 .t-hex img { position: relative; width: 145.2px; height: 145.2px; object-fit: contain; filter: drop-shadow(0 11.88px 18.48px rgba(10,17,25,0.28)); }
.co-t2 .t-rank { margin-top: 15.84px; }
.co-t2 .t-rank::after { content: ''; display: block; width: 44.88px; height: 3.96px; border-radius: 3.96px; background: var(--tier); margin: 11.88px auto 0; }
.co-t2 .t-from { margin-top: 15.84px; }

/* ---- T3 · HERO BANNER — TIER GRADIENT ---- */
.co-t3 { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.co-t3 .t-banner { position: relative; padding: 31.68px 23.76px 26.4px; text-align: center; color: #fff; overflow: hidden; background: linear-gradient(165deg, var(--tier), color-mix(in srgb, var(--tier) 52%, #240c12)); }
.co-t3 .t-banner::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.1) 1.32px, transparent 1.32px); background-size: 21.12px 21.12px; mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 82%); }
.co-t3 .t-done { position: absolute; top: 17.16px; right: 18.48px; z-index: 1; font-family: var(--font-ui); font-size: 11.22px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.2); border: 1.2px solid rgba(255,255,255,0.32); border-radius: 1318.68px; padding: 5.28px 13.2px; }
.co-t3 .t-banner img { position: relative; width: 168.96px; height: 168.96px; object-fit: contain; filter: drop-shadow(0 15.84px 26.4px rgba(0,0,0,0.45)); }
.co-t3 .t-rank { position: relative; color: #fff; margin-top: 13.2px; }
.co-t3 .t-from { position: relative; display: block; margin-top: 13.2px; color: rgba(255,255,255,0.92); }
.co-t3 .t-from b { color: #fff; }
.co-t3 .t-body { padding: 22.44px 23.76px 23.76px; display: flex; flex-direction: column; }
.co-t3 .t-top { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; margin-bottom: 19.8px; }

/* ---- T4 · LANDSCAPE HERO (crest left, details right) ---- */
.co-t4 { padding: 0; display: flex; flex-direction: column; }
.co-t4 .t-strip { display: flex; align-items: center; gap: 22.44px; padding: 26.4px 23.76px; background: linear-gradient(118deg, color-mix(in srgb, var(--tier) 14%, #fff), #fff 70%); border-bottom: 1.2px solid var(--line); }
.co-t4 .t-strip-crest { position: relative; flex-shrink: 0; display: inline-flex; }
.co-t4 .t-strip-crest::before { content: ''; position: absolute; inset: -13.2px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 24%, transparent), transparent 65%); }
.co-t4 .t-strip-crest img { position: relative; width: 142.56px; height: 142.56px; object-fit: contain; filter: drop-shadow(0 13.2px 22.44px rgba(10,17,25,0.3)); }
.co-t4 .t-strip-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 11.88px; }
.co-t4 .t-strip-info .co-rating-wrap { align-items: flex-start; }
.co-t4 .t-eyebrow { font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--green); display: inline-flex; align-items: center; gap: 7.92px; }
.co-t4 .t-eyebrow .dot { width: 7.92px; height: 7.92px; border-radius: 50%; background: var(--green); }
.co-t4 .t-rank { line-height: 1.0; }
.co-t4 .t-body { padding: 21.12px 23.76px 23.76px; display: flex; flex-direction: column; }
.co-t4 .t-top { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; margin-bottom: 18.48px; }

/* ===================== PER-DESIGN META (mixed bottoms) + balanced booster ===================== */
.co-vote .lbl { font-style: normal; }

/* balanced booster identity (avatar + label/name stack) */
.bo-id { display: flex; align-items: center; gap: 13.2px; min-width: 0; }
.bo-av { width: 44.88px; height: 44.88px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--royal-deep)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 19.8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* emoji avatar (boosters get a stable per-name emoji instead of a bare initial) —
   drop the royal gradient for a neutral tinted disc so any emoji stays legible. */
.bo-av-emoji { background: var(--bg-soft); border: 1.2px solid var(--line); color: inherit; font-size: 24.2px; line-height: 1; }
.bo-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.bo-lab { font-family: var(--font-ui); font-size: 11.22px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.bo-name { font-family: var(--font-body); font-weight: 700; font-size: 19.8px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* meta A · classic stack */
.mA-bo { padding-top: 18.48px; border-top: 1.2px solid var(--line-soft); }
.mA-bo-row { display: flex; align-items: center; justify-content: space-between; gap: 13.2px; }
.mA-bo-meta { display: flex; align-items: center; gap: 13.2px; margin-top: 13.2px; padding-left: 58.08px; flex-wrap: wrap; }

/* meta B · booster panel */
.mB-panel { display: flex; align-items: center; gap: 15.84px; padding: 17.16px 18.48px; background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: var(--r); }
.mB-climb { margin-left: auto; text-align: right; line-height: 1; flex-shrink: 0; }
.mB-climb .n { font-family: var(--font-display); font-weight: 800; font-size: 23.76px; color: var(--ink); letter-spacing: -0.02em; }
.mB-climb .l { display: block; font-family: var(--font-ui); font-size: 10.56px; font-weight: 600; letter-spacing: calc(0.1em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); margin-top: 3.96px; }
.mB-badges { display: flex; flex-direction: column; gap: 7.92px; align-items: flex-end; flex-shrink: 0; }
.mB-chips { display: flex; gap: 9.24px; flex-wrap: wrap; }
.mc-chip { font-family: var(--font-ui); font-size: 12.54px; font-weight: 600; letter-spacing: calc(0.03em*var(--tracking)); text-transform: uppercase; border-radius: 1318.68px; padding: 6.6px 15.84px; color: var(--ink-muted); background: var(--bg-soft); border: 1.2px solid var(--line); }
.mc-chip.region { color: var(--royal); background: var(--royal-tint); border-color: transparent; }
.mc-chip.boost { color: var(--orange-deep); background: color-mix(in srgb, var(--orange) 13%, #fff); border-color: transparent; }
.co-votes.bare { gap: 21.12px; }
.co-votes.bare .co-vote { border: none; background: transparent; padding: 5.28px 0; }

/* meta C · spec grid (reworked) */
.mC-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10.56px; }
.mC-cell { background: var(--bg-soft); border: 1.2px solid var(--line-soft); border-radius: var(--r); padding: 14.52px 17.16px; min-width: 0; }
.mC-cell .k { display: block; font-family: var(--font-ui); font-size: 10.56px; font-weight: 700; letter-spacing: calc(0.14em*var(--tracking)); text-transform: uppercase; color: var(--ink-muted); }
.mC-cell .v { display: block; font-family: var(--font-body); font-weight: 700; font-size: 17.16px; color: var(--ink); margin-top: 6.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mC-bo { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; }
.mC-foot { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; padding-top: 2.64px; }
.v-sum { font-family: var(--font-ui); font-size: 13.86px; color: var(--ink-muted); }
.v-sum b { color: var(--ink); font-weight: 700; }
.v-sum i { font-style: normal; margin: 0 7.92px; color: var(--line); }

/* meta D · horizontal footer */
.mD-chips { display: flex; flex-direction: column; gap: 17.16px; }
.mD-foot { display: flex; align-items: center; justify-content: space-between; gap: 15.84px; padding-top: 17.16px; border-top: 1.2px solid var(--line-soft); }
.mD-by { font-family: var(--font-body); font-size: 17.16px; color: var(--ink-muted); min-width: 0; }
.mD-by b { font-weight: 700; color: var(--ink); }
.mD-tier { font-family: var(--font-ui); font-size: 11.88px; font-weight: 700; letter-spacing: calc(0.08em*var(--tracking)); text-transform: uppercase; color: var(--royal); background: var(--royal-tint); border-radius: 5.28px; padding: 3.96px 10.56px; margin-left: 10.56px; }
.co-votes.mini { gap: 21.12px; }
.co-votes.mini .co-vote { border: none; background: transparent; padding: 0; gap: 7.92px; }
.co-votes.mini .lbl { display: none; }

/* Balbert: no League on small content headings — keep these in Bricolage */
.rcard h3, .rev-form h3 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; }


/* avatar color variants */
.av-1 { background: linear-gradient(135deg, #ff5c6a, #0e478c); }
.av-2 { background: linear-gradient(135deg, #2cc468, #168a44); }
.av-3 { background: linear-gradient(135deg, #8d6ce0, #5a3cb0); }
.av-4 { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: var(--navy); }
.av-5 { background: linear-gradient(135deg, var(--orange), var(--orange-deep)); }
.av-6 { background: linear-gradient(135deg, #34b3c9, #1d7f93); }

/* ==================================================
   FONT HIERARCHY CORRECTION
   League stays on big headings + numeric stats; small titles, names, subtitles
   and reading text use Barlow. Appended last to override the per-element
   --font-display at equal specificity.
   ================================================== */
.rev-form h3,
.rcard h3,
.rcard-avatar,
.tp-w-mark,
.pb-txt b,
.cq-a::before,
.rn,
.bo-av { font-family: var(--font-body); }

/* ==================================================
   NARROW-PHONE OVERFLOW PASS (≤480)
   The privacy bar's nowrap "See our full privacy policy" link + the fixed
   58px icon (with no min-width:0 on the text column) pushed the row ~17px
   past a 360px viewport. Let the text column shrink + the link wrap. Only
   affects ≤480px. (The .bo-name truncation is intentional ellipsis.)
   ================================================== */
@media (max-width: 480px) {
  .privacy-bar { gap: 13.2px; padding: 17.16px 15.84px; }
  .pb-txt { min-width: 0; }
  .pb-txt a { white-space: normal; }
}
</content>
</invoke>