/* =========================================================
   global.css — STRUCTURE ONLY (safe baseline)
   Tokens → reset → layout → components → product → browse
   ========================================================= */
   
/* ======================================
   GLOBAL = STRUCTURE ONLY
   Do NOT add colors or themes here
   ====================================== */

/* ---------- 1) TOKENS (dark baseline) ---------- */
:root{
  --bg-page:#05070b;
  --bg-elev:#10131b;
  --panel:#10131b;
  --ink:#f4f4f7;
  --ink-dim:#9a9aac;
  --bw:#262632;
  --bw-2:#343446;

  --card-bg:#151622;
  --card-border:#303144;

  --maxw:1100px;
  --gutter:16px;

  --r-xs:8px;
  --r:12px;
  --r-lg:14px;

  --chip-bg:#1a1c27;
  --chip-border:#2d2f3f;
  --chip-ink:#e6e6ef;

  --muted:#a0a0b0;

  /* optional */
  --shadow-card:0 8px 28px rgba(0,0,0,.35);
}

/* ---------- 2) RESET / BASE ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- 3) LAYOUT ---------- */
.wr-container,.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px;
}
.wr-row{display:flex; gap:var(--gutter); align-items:center}
.wr-space{flex:1}

.wr-grid,.grid{display:grid; gap:16px}
.wr-grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .wr-grid.cols-4{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){  .wr-grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){  .wr-grid.cols-4{grid-template-columns:1fr} }

/* Generic card */
.wr-card,.card{
  background:var(--bg-elev);
  color:var(--ink);
  border:1px solid var(--bw);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:16px;
}

/* Legacy product container hook */
body.page-game .shell{
  max-width: var(--maxw);
  margin: 18px auto;
  padding: 0 16px;
}

/* ---------- 4) HEADER (structure only; colors in BO) ---------- */
.header{
  position:sticky;
  top:0;
  z-index:1000;
}
.header .in{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 16px;
}
.header .user-slot{
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.header .hello{font-size:13px; opacity:.9}

/* Brand image sizing baseline */
.brand.brand-text img{
  height:32px;
  width:auto;
}

/* ---------- 5) FORMS & BUTTONS (neutral baseline) ---------- */
select,input[type="text"]{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--bw);
  outline:0;
  background:#fff;
  color:#111;
}
.btn,.wr-btn{
  background:#fff;
  color:#111;
  border:1px solid var(--bw);
  border-radius:8px;
  padding:8px 12px;
  font-weight:600;
  cursor:pointer;
}
.btn.btn-sm{ padding:6px 10px }

/* ---------- 6) UTILITIES ---------- */
.hidden,.hide{ display:none !important; }
.u-dim{color:var(--ink-dim)}
.u-muted{opacity:.75}
.u-link-plain{ text-decoration:none; color:inherit; }

/* Accessibility */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ---------- 7) CHIPS (canonical geometry only) ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  font-size:12.5px;
  line-height:1;
  border-radius:12px;
  background:var(--chip-bg);
  color:var(--chip-ink);
  border:1px solid var(--chip-border);
}

/* ---------- 8) PAGINATION (geometry only) ---------- */
.pagination{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:22px 0;
}
.pagination a,.pagination span{
  padding:8px 12px;
  border-radius:8px;
}
.pagination .disabled{opacity:.5; pointer-events:none}

/* ---------- 9) BAR FILL helper ---------- */
.bar-fill{
  width:var(--bar-w,0%);
  transition:width 0.35s ease-out;
}

/* =========================================================
   10) PRODUCT PAGE — STRUCTURE (layout + sizing)
   ========================================================= */

body.page-product{
  background:var(--bg-page);
  color:var(--ink);
}

/* Outer shell */
.page-product .product-shell{
  max-width:1100px;
  margin:24px auto 36px;
  padding:20px 22px 26px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.05);
}

/* Pull up content */
.page-product .shell{ padding-top:10px !important; margin-top:0 !important; }
.page-product .glowframe{ padding-top:0 !important; margin-top:0 !important; }
.page-product .product-shell{ padding-top:10px !important; margin-top:0 !important; }

/* Breadcrumb + title */
.page-product .product-hero-bc{ font-size:12px; margin:0 0 6px; }
.page-product .product-title{ margin:0 0 10px; font-size:26px; letter-spacing:.02em; }

/* Main grid */
.page-product .product-main-row{
  display:grid;
  grid-template-columns:minmax(0, 3fr) minmax(260px, 2fr);
  grid-template-rows:auto auto;
  gap:22px;
  align-items:flex-start;
}
.page-product .product-grid-media{ grid-column:1; grid-row:1; }
.page-product .product-grid-right{ grid-column:2; grid-row:1 / span 2; }
.page-product .product-grid-info{ grid-column:1; grid-row:2; }

/* Media */
.page-product .media-block{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
}
.page-product .media-main{
  position:relative;
  border-radius:12px;
  overflow:hidden;
}
.page-product .media-main-layer{ display:none; }
.page-product .media-main-layer.is-active{ display:block; }
.page-product .media-main img,
.page-product .media-main iframe{ width:100%; height:auto; display:block; }

/* Thumbnails */
.page-product .media-thumbs{ display:flex; gap:6px; margin-top:8px; }
.page-product .media-thumb{
  width:72px;
  height:44px;
  border-radius:6px;
  overflow:hidden;
  flex:0 0 auto;
  cursor:pointer;
  border:1px solid transparent;
}
.page-product .media-thumb img{ width:100%; height:100%; object-fit:cover; }
.page-product .media-thumb.is-active{ border-color:#e60000; }

/* Overall pill over media */
.page-product .product-overall-pill{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  pointer-events:none;
}

/* Mobile tabs */
.page-product .mobile-tabs{
  display:none;
  margin:0 0 10px;
  border-radius:999px;
  overflow:hidden;
}
.page-product .mobile-tabs button{
  flex:1;
  padding:7px 0;
  font-size:12px;
  border:0;
  background:none;
  cursor:pointer;
}

/* Ratings panel + info panel shells */
.page-product .rating-panel,
.page-product .info-panel{
  padding:16px 18px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
}

/* Rating rows: grid geometry */
.page-product .rating-row{
  display:grid;
  grid-template-columns:minmax(0, 130px) 1fr auto;
  gap:8px;
  align-items:center;
  font-size:13px;
  margin-bottom:7px;
}

/* Tight rating layout (the “gold” alignment) */
.rating-row{
  row-gap:2px;
  padding:0px 0 3px;
}
.rating-row-name{ grid-column:1; grid-row:1; white-space:nowrap; }
.rating-row-label{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1.1;
  white-space:nowrap;
}
.rating-row-bar{
  grid-column:1 / span 2;
  grid-row:2;
  height:10px;
  border-radius:6px;
  overflow:hidden;
  align-self:end;
}
.rating-row-fill{
  height:100%;
  width:0;
  border-radius:6px;
  /* keep a safe default gradient here so product never goes “plain” */
  background:linear-gradient(90deg,#d81f26 0%,#f06a1c 45%,#f5b61d 100%);
  transition:width .7s cubic-bezier(.4,0,.2,1);
}
.rating-row-scorebox{
  grid-column:3;
  grid-row:2;
  width:38px;
  height:32px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:5px;
  font-size:13.5px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.9);
  border-radius:4px;
  background:transparent;
  align-self:end;
}

/* Overall row sizing */
.rating-row--overall .rating-row-scorebox{
  width:52px;
  height:40px;
  font-size:18px;
  padding-bottom:7px;
}
.rating-row--overall .rating-row-bar{ height:11px; }

/* Move text closer to bar (your visual preference) */
.rating-row-name,
.rating-row-label{
  margin-bottom:-35px;
  line-height:1.05;
}

/* Selected row (JS adds .is-selected) */
.rating-row.is-selected{
  padding:0 10px 7px;
  margin:0 -10px;
  border-radius:12px;
}

/* Rate it line */
.page-product .rateit-wrap{ margin-top:12px; }

/* Inline breakdown container */
.inline-breakdown{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.14);
}
.inline-breakdown-body{
  margin-top:10px;
  max-height:360px;
  overflow:auto;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}

/* Histogram (rb-hist) layout */
.page-product .hist-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  justify-content:space-between;
  padding:8px 4px 16px;
}
.page-product .hist-bar{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  flex:1 1 0;
  min-width:0;
  height:110px;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.page-product .hist-fill{
  position:absolute;
  left:0; right:0; bottom:0;
  height:var(--h,0%);
  border-radius:12px 12px 10px 10px;
  background:linear-gradient(180deg,#f6b018,#f0452d,#b3131f);
}
.page-product .hist-x{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  font-size:11px;
  line-height:1;
  pointer-events:none;
}
.page-product .hist-tip{
  display:none;
  margin:10px auto 0;
  max-width:92%;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Reviews grid layout */
.page-product .reviews-panel{ margin-top:20px; border-radius:16px; border:1px solid rgba(255,255,255,0.06); }
.page-product .reviews-panel .pad{ padding:16px 18px 18px; }
.page-product .reviews-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  align-items:start;
}
@media (max-width: 900px){
  .page-product .reviews-grid{ grid-template-columns:1fr; }
}
.page-product .review-card{
  border-radius:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.07);
}
.page-product .review-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.page-product .review-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.page-product .review-expand{
  display:none;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:10px;
  margin-top:8px;
}
.page-product .review-card.is-open .review-expand{ display:block; }

/* Responsive: tabs behaviour */
@media (max-width: 900px){
  .page-product .product-shell{
    padding:16px 14px 20px;
    border-radius:0;
    box-shadow:none;
  }
  .page-product .product-main-row{ display:block; }
  .page-product .mobile-tabs{ display:flex; }

  .page-product .has-tab-ratings .js-panel-ratings{ display:block; }
  .page-product .has-tab-ratings .js-panel-info{ display:none; }
  .page-product .has-tab-info .js-panel-ratings{ display:none; }
  .page-product .has-tab-info .js-panel-info{ display:block; }
}
@media (min-width: 901px){
  .page-product .mobile-tabs{ display:none; }
  .page-product .js-panel-ratings,
  .page-product .js-panel-info{ display:block; }
}

/* =========================================================
   11) BROWSE CARD GRID — STRUCTURE ONLY
   ========================================================= */

.wr-grid-cards{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  align-items:start;
}
@media (max-width:1400px){
  .wr-grid-cards{ grid-template-columns:repeat(5,1fr); gap:16px; }
}
@media (max-width:1120px){
  .wr-grid-cards{ grid-template-columns:repeat(4,1fr); gap:14px; }
}
@media (max-width:880px){
  .wr-grid-cards{ grid-template-columns:repeat(3,1fr); gap:12px; }
}
@media (max-width:680px){
  .wr-grid-cards{ grid-template-columns:repeat(2,1fr); gap:6px; }
}

.card-minimal{
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--card-border);
  display:flex;
  flex-direction:column;
  font-size:13px;
}
.card-minimal .thumb{ position:relative; display:block; overflow:hidden; }
.card-minimal .info{ padding:8px 10px 12px; }

/* Poster overlay strip geometry */
.card-rating-strip{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 9px 7px;
  font-size:11px;
  pointer-events:none;
}
.card-rating-strip .crs-left{ flex:1; min-width:0; }
.card-rating-strip .crs-bar-bg{
  height:6px;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:4px;
}
.card-rating-strip .crs-bar-fill{
  height:100%;
  width:var(--bar-w,0%);
  transition:width .35s ease-out;
}
.card-minimal .crs-score{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:17px;
  margin-top:1px;
  margin-left:6px;
}

/* RC overlay geometry */
.rc-filter-overlay{
  position:absolute;
  left:10px;
  bottom:16px;
  max-width:88%;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:700;
  pointer-events:none;
  white-space:normal;
  word-break:break-word;
}

/* =========================================================
   12) BROWSE — FILTER BAR + HEADING + MODALS (STRUCTURE)
   ========================================================= */

/* ---- Filter bar shell (structure) ---- */
.filter-bar{
  margin:12px 0 16px;
  padding:10px;
  border-radius:12px;
}

/* The form row inside the bar */
.filter-bar .wr-hbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  align-items:flex-end;
}

/* Field blocks */
.filter-bar .wr-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}
.filter-bar .wr-field label{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.1;
}

/* Give selects/buttons a consistent height on browse */
.filter-bar select,
.filter-bar .bo-btn{
  height:36px;
}

/* Mobile: make the bar feel full-width */
@media (max-width:700px){
  main.container{ padding:16px; }
  .container .filter-bar{
    margin-left:-16px;
    margin-right:-16px;
    width:calc(100% + 32px);
    border-radius:14px;
  }
  .filter-bar .wr-field{ min-width:140px; flex:1 1 140px; }
  .filter-bar .wr-field select{ width:100%; }
  .filter-bar .wr-field .bo-btn{ width:100%; justify-content:center; }
}

/* Child model bar row (chips) */
.child-model-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:10px 0 12px;
}

/* Page heading row */
.page-heading{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 10px;
  font-size:26px;
  line-height:1.15;
  letter-spacing:.02em;
}

/* Year link next to heading */
.heading-year-link{
  font-size:14px;
  font-weight:850;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
}

/* Meta line under heading */
.meta{
  margin:4px 0 14px;
  font-size:13px;
}

/* RC inline sort row under title */
.rc-text-sort{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:10px 0 12px;
}
.rc-text-sort .rc-label{
	color:#999;
  font-size:13px;
  font-weight:850;
  margin-right:4px;
}

/* Hidden “More” section */
#rcInlineMore{
  display:none;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
#rcInlineMore.is-open{ display:flex; }

/* Pager wrapper (browse uses .wr-pager too) */
.wr-pager{
  margin:22px 0 8px;
}

/* =========================================================
   MODALS (STRUCTURE — single system)
   Uses: <div class="wr-modal"> ... <div class="wr-modal__panel">
   JS toggles: .open on modal + .modal-open on body
   ========================================================= */

.wr-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9998;
}
.wr-modal.open{ display:block; }

.wr-modal__backdrop{
  position:absolute;
  inset:0;
}

.wr-modal__panel{
  position:relative;
  z-index:9999;
  width:min(560px, calc(100% - 28px));
  margin:8vh auto 0;
  border-radius:14px;
  overflow:hidden;
}

.wr-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
}
.wr-modal__head h3{
  margin:0;
  font-size:16px;
}

.wr-modal__close{
  appearance:none;
  border:0;
  background:none;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  padding:6px 8px;
}

.wr-modal__body{
  padding:12px 14px 14px;
}

.wr-modal-fieldset{
  border:0;
  padding:0;
  margin:0 0 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wr-modal-fieldset label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
}

/* Year modal inner layout */
.yearquick-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.yearselect-label{
  font-weight:850;
  font-size:13px;
  margin:8px 0 8px;
}
.yearselect-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.yearselect-row label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
}
.yearselect-row select{ height:36px; }

.wr-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}

/* Prevent background scroll while modal open */
body.modal-open{ overflow:hidden; }

/* =========================================================
   FIX: Product rating bar fill gradient missing
   (keep in global.css, not in blood-orange.css)
   ========================================================= */

.page-product .rating-row-bar{
  background:#252938; /* track */
}

.page-product .rating-row-fill{
  display:block;
  height:100%;
  border-radius:inherit;
  opacity:1 !important;
  background:linear-gradient(90deg,#b3131f,#f0452d,#f6b018) !important;
}

/* width is driven by --bar-w (your JS sets it) */
.page-product .rating-row-fill.bar-fill{
  width:var(--bar-w,0%) !important;
}

/* ============================
   Product layout: left stack + right panel
   ============================ */

.product-main-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.product-left-col{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px; /* media -> info spacing */
}

/* right panel fixed-ish width, but responsive */
.product-grid-right{
  flex:0 0 420px;
  min-width:340px;
}

/* responsive: stack on smaller screens */
@media (max-width: 900px){
  .product-main-row{
    flex-direction:column;
  }
  .product-grid-right{
    flex:0 0 auto;
    min-width:0;
    width:100%;
  }
}
/* =========================================================
   PAGE: Review (full review page) — contain width like product
   ========================================================= */

.page-review .shell{
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Ensure the inner layout doesn't try to do a 2-col grid */
.page-review .grid{
  grid-template-columns: 1fr;
}

/* (safety) if .grid is flex in your global.css */
.page-review .grid{
  display: block;
}
/* =========================================================
   MOBILE: product page = near full-width (less padding/margins)
   Paste at END of global.css
   ========================================================= */

@media (max-width: 900px){

  /* Make the outer page container use more screen */
  body.page-product .shell{
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-top: 8px !important;
  }

  /* The main product card shell: minimal side padding */
  .page-product .product-shell{
    margin: 10px auto 18px !important;
    padding: 10px 10px 14px !important;
    border-radius: 0 !important;   /* keep your mobile edge-to-edge feel */
  }

  /* Media block: reduce inner padding so video/image is bigger */
  .page-product .media-block{
    padding: 6px !important;       /* was 12px */
    border-radius: 12px !important;
  }

  .page-product .media-main{
    border-radius: 10px !important;
  }

  /* Thumbs: slightly tighter */
  .page-product .media-thumbs{
    gap: 6px !important;
    margin-top: 6px !important;
  }

  /* Ratings panel: reduce padding so bars take more width */
  .page-product .rating-panel{
    padding: 12px 12px 10px !important;  /* was 16px 18px 14px */
    border-radius: 12px !important;
  }

  /* Info panel under media: also tighter */
  .page-product .info-panel{
    padding: 12px 12px 12px !important;
    border-radius: 12px !important;
  }

  /* Inline breakdown box: less chrome */
  .inline-breakdown-body{
    padding: 10px 10px !important;
  }

  /* Reviews section: less padding on mobile */
  .page-product .reviews-panel .pad{
    padding: 12px 12px 14px !important;
  }

  /* Optional: slightly tighter gap between sections (if it feels too airy) */
  .page-product .product-main-row{
    margin-top: 8px !important;
  }
}



/**********************************************************************/

/* === Product Rating Rows (new, isolated classes) === */
.page-product .prr-list{
  display:block;
}

/* One row = NAME | BAR | SCORE */
.page-product .prr-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 0;
}

/* Name column */
.page-product .prr-name{
  flex: 0 0 140px;   /* fixed label column like your screenshot */
  min-width: 140px;
  font-size: 13px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bar column */
.page-product .prr-bar{
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
}

/* Fill */
.page-product .prr-fill{
  height: 100%;
  width: var(--bar-w, 0%);
  border-radius: 999px;
}

/* Score column */
.page-product .prr-score{
  flex: 0 0 44px;
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

/* Selected row (your JS uses .is-selected) */
.page-product .prr-row.is-selected{
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Overall row emphasised (no red outline) */
.page-product .prr-row--overall{
  border: 1px dashed transparent;   /* no outline by default */
  border-radius: 14px;
  padding:10px;
  margin-top:6px;
}

/* subtle hover like the other rows */
.page-product .prr-row--overall:hover{
  border-color: rgba(129,124,122,.65);
}

/* Mobile tweak: give the name a bit less fixed width */
@media (max-width: 520px){
  .page-product .prr-name{
    flex-basis: 120px;
    min-width: 120px;
  }
  .page-product .prr-score{
    flex-basis: 40px;
    min-width: 40px;
  }
}

/* === NEW prr bars: ensure the fill is visible === */
.page-product .prr-bar{
  background: rgba(255,255,255,.08) !important; /* track */
}

.page-product .prr-fill{
  display:block !important;
  height:100% !important;
  width: var(--bar-w, 0%) !important; /* JS sets --bar-w on .bar-fill[data-w] */
  border-radius: 999px !important;
  background: linear-gradient(90deg,#d81f26 0%,#f06a1c 45%,#f5b61d 100%) !important;
}

/* Tighten spacing between rating rows */
.page-product .prr-row{
  padding: 4px 0 !important;   /* was 8px 0 */
  gap: 10px !important;        /* slightly tighter horizontally too */
}

/* Optional: tiny bar thickness tweak (matches your screenshot feel) */
.page-product .prr-bar{
  height: 7px !important;      /* was 8px */
}

/* =========================================================
   HS — Horizontal Swipe Row (reusable)
   Markup:
     <div class="hs" data-hs>
       <button class="hs-btn" data-dir="left">…</button>
       <div class="hs-track" data-hs-track>…items…</div>
       <button class="hs-btn" data-dir="right">…</button>
     </div>
   ========================================================= */

.hs{ position:relative; }

.hs-track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.hs-track::-webkit-scrollbar{ height:8px; }
.hs-track::-webkit-scrollbar-thumb{ border-radius:10px; }
.hs-track::-webkit-scrollbar-track{ border-radius:10px; }

.hs-item{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:block;
}

.hs-btn{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:54px;
  border-radius:10px;
  cursor:pointer;
  z-index:2;
}
.hs-btn[data-dir="left"]{ left:-8px; }
.hs-btn[data-dir="right"]{ right:-8px; }

@media (min-width:980px){
  .hs-btn{ display:block; }
  .hs-track{ padding-left:8px; padding-right:8px; }
}