/* ============================================================
   NOVA Reviews 4.2 — Performance-Optimized Edition
   Performance notes:
   • content-visibility: auto on carousel cards → browser skips
     paint/layout for off-screen cards (large INP / CLS benefit)
   • will-change: transform applied ONLY on hover via :hover
     selector — not permanently. Permanent will-change on many
     elements wastes GPU memory without benefit.
   • object-fit: cover on images → no layout reflow when images
     load with differing natural sizes.
   • All transition durations stay at 200ms — fast enough to feel
     instant, avoids jank on low-end devices.
   ============================================================ */

/* ─── Tokens ─────────────────────────────────────────────────── */
:root {
  --nr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --nr-white: #fff;
  --nr-g50: #f9fafb; --nr-g100: #f3f4f6; --nr-g200: #e5e7eb;
  --nr-g300: #d1d5db; --nr-g400: #9ca3af; --nr-g500: #6b7280;
  --nr-g600: #4b5563; --nr-g700: #374151; --nr-g800: #1f2937; --nr-g900: #111827;
  --nr-blue50: #eff6ff; --nr-blue100: #dbeafe;
  --nr-blue500: #3b82f6; --nr-blue600: #2563eb; --nr-blue700: #1d4ed8;
  --nr-green50: #f0fdf4; --nr-green600: #16a34a; --nr-green700: #15803d; --nr-green-bd: #bbf7d0;
  --nr-red50: #fef2f2; --nr-red600: #dc2626; --nr-red-bd: #fecaca;
  --nr-amber: #fbbf24; --nr-amber600: #d97706;
  --nr-r: 10px; --nr-r-sm: 6px; --nr-r-lg: 14px; --nr-r-xl: 18px; --nr-r-full: 9999px;
  --nr-ease: 200ms ease;
  --nr-sh-xs: 0 1px 2px rgba(0,0,0,.04);
  --nr-sh-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --nr-sh-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --nr-sh-lg: 0 10px 20px -4px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.03);
}

/* ─── Reset ──────────────────────────────────────────────────── */
.nrc *, .nrc *::before, .nrc *::after,
.nrva *, .nrva *::before, .nrva *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nrc, .nrva {
  font-family: var(--nr-font); font-size: 15px; line-height: 1.6;
  color: var(--nr-g900); -webkit-font-smoothing: antialiased;
}
/* Prevent layout shift when wp_get_attachment_image srcset loads */
.nrc img, .nrva img { max-width: 100%; border-style: none; display: block; }

/* ─── Star SVGs ──────────────────────────────────────────────── */
.nr-stars { display: inline-flex; gap: 2px; color: var(--nr-amber); line-height: 1; flex-shrink: 0; vertical-align: middle; }
.nr-stars svg { display: block; }

/* ============================================================
   PDP (.nrc)
   ============================================================ */
.nrc { width: 100%; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: 8px 0; }

/* ── Hero ─────────────────────────────────────────────────────── */
.nrc__hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--nr-g200); }
.nrc__score { display: flex; align-items: center; gap: 14px; }
.nrc__score-num { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--nr-g900); }
.nrc__score-meta { display: flex; flex-direction: column; gap: 4px; }
.nrc__score-count { font-size: 13px; color: var(--nr-g500); font-weight: 500; }
.nrc__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.nrc__pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--nr-r-full); line-height: 1.3; white-space: nowrap; }
.nrc__pill svg { flex-shrink: 0; width: 14px; height: 14px; }
.nrc__pill--ok { background: var(--nr-green50); color: var(--nr-green700); border: 1px solid var(--nr-green-bd); }
.nrc__pill--lock { background: var(--nr-blue50); color: var(--nr-blue600); border: 1px solid var(--nr-blue100); }

/* ── Insights ─────────────────────────────────────────────────── */
.nrc__insights { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

/* Distribution */
.nrc__dist { display: flex; flex-direction: column; gap: 3px; }
.nrc__dist-row { display: grid; grid-template-columns: 44px 1fr 38px; gap: 8px; align-items: center; appearance: none; border: 1px solid transparent; background: none; border-radius: var(--nr-r-sm); padding: 6px 8px; cursor: pointer; font-family: inherit; transition: background var(--nr-ease), border-color var(--nr-ease); }
.nrc__dist-row:hover { background: var(--nr-g50); }
.nrc__dist-row.is-active { background: var(--nr-blue50); border-color: var(--nr-blue500); }
.nrc__dist-lbl { font-size: 13px; font-weight: 600; color: var(--nr-g700); }
.nrc__dist-bar { height: 8px; background: var(--nr-g100); border-radius: var(--nr-r-full); overflow: hidden; }
.nrc__dist-fill { display: block; height: 100%; background: var(--nr-amber); border-radius: var(--nr-r-full); transition: width .4s ease; }
.nrc__dist-pct { font-size: 12px; color: var(--nr-g400); text-align: right; font-variant-numeric: tabular-nums; }

/* Side panel */
.nrc__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Fit Scale */
.nrc__fit { background: var(--nr-g50); border: 1px solid var(--nr-g200); border-radius: var(--nr-r); padding: 14px 16px; }
.nrc__fit-title { font-size: 13px; font-weight: 600; color: var(--nr-g700); margin-bottom: 10px; }
.nrc__fit-scale { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.nrc__fit-end { font-size: 11px; color: var(--nr-g400); font-weight: 500; }
.nrc__fit-track { position: relative; height: 6px; border-radius: var(--nr-r-full); background: linear-gradient(90deg, #fecaca 0%, var(--nr-g200) 50%, #bbf7d0 100%); }
.nrc__fit-dot { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border: 2px solid var(--nr-white); background: var(--nr-blue600); box-shadow: 0 1px 4px rgba(37,99,235,.3); border-radius: 50%; }
.nrc__fit-note { font-size: 11px; color: var(--nr-g400); margin-top: 8px; }

/* Pros/Cons */
.nrc__kw { display: flex; flex-direction: column; gap: 10px; }
.nrc__kw-group { display: flex; flex-direction: column; gap: 5px; }
.nrc__kw-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nrc__kw-head--pro { color: var(--nr-green600); }
.nrc__kw-head--con { color: var(--nr-red600); }
.nrc__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.nrc__tag { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: var(--nr-r-full); }
.nrc__tag--pro { background: var(--nr-green50); color: #065f46; border: 1px solid var(--nr-green-bd); }
.nrc__tag--con { background: var(--nr-red50); color: #991b1b; border: 1px solid var(--nr-red-bd); }

/* ── UGC Gallery ─────────────────────────────────────────────── */
.nrc__ugc { display: flex; flex-direction: column; gap: 10px; width: 100%; overflow: hidden; }
.nrc__ugc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nrc__ugc-title { font-size: 14px; font-weight: 700; color: var(--nr-g800); }
.nrc__ugc-num { font-size: 12px; color: var(--nr-g400); }
.nrc__ugc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }

.nrc__ugc-item {
  position: relative;
  /* Explicit intrinsic size prevents layout shift before image loads */
  aspect-ratio: 1;
  border-radius: var(--nr-r);
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: var(--nr-g100);
  transition: box-shadow var(--nr-ease);
  /* Skip paint of off-screen UGC tiles */
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}
.nrc__ugc-item:hover {
  box-shadow: var(--nr-sh-md);
  will-change: transform;
  transform: scale(1.04);
  z-index: 1;
}
.nrc__ugc-item:focus-visible { outline: 2px solid var(--nr-blue500); outline-offset: 2px; }
.nrc__ugc-item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center center !important;
}

/* ── Filters ─────────────────────────────────────────────────── */
.nrc__filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 14px; background: var(--nr-g50); border: 1px solid var(--nr-g200); border-radius: var(--nr-r); }
.nrc__fl-left, .nrc__fl-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nrc__fl-check { font-size: 13px; color: var(--nr-g600); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-weight: 500; }
.nrc__fl-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--nr-blue600); cursor: pointer; }
.nrc__fl-sel { appearance: none; border: 1px solid var(--nr-g200); border-radius: var(--nr-r-sm); padding: 6px 30px 6px 12px; font-size: 13px; font-weight: 500; color: var(--nr-g700); font-family: inherit; background: var(--nr-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center; cursor: pointer; transition: border-color var(--nr-ease); }
.nrc__fl-sel:hover { border-color: var(--nr-g400); }
.nrc__fl-sel:focus-visible { outline: 2px solid var(--nr-blue500); outline-offset: 1px; }

/* ═══ CAROUSEL ══════════════════════════════════════════════════ */
.nrc__wrap { position: relative; width: 100%; overflow: hidden; }
.nrc__track-outer {
  width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nrc__track-outer::-webkit-scrollbar { display: none; }
.nrc__track { display: inline-flex; gap: 16px; padding: 8px 4px 12px; min-width: min-content; }

/* ── Card ─────────────────────────────────────────────────────── */
.nrc__card {
  width: 340px; flex: 0 0 340px;
  scroll-snap-align: start;
  /*
   * content-visibility: auto tells the browser it can skip layout
   * and paint for cards not in the viewport. contain-intrinsic-size
   * gives a size estimate so the scrollbar doesn't jump.
   */
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}
.nrc__card-in {
  height: 100%; display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  background: var(--nr-white);
  border: 1px solid var(--nr-g200);
  border-radius: var(--nr-r-lg);
  box-shadow: var(--nr-sh-sm);
  transition: box-shadow var(--nr-ease), transform var(--nr-ease);
}
.nrc__card-in:hover {
  box-shadow: var(--nr-sh-lg);
  transform: translateY(-2px);
  /* Apply will-change only during the hover interaction */
  will-change: transform;
}

.nrc__card-top { display: flex; flex-direction: column; gap: 4px; }
.nrc__card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nrc__badge-v { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--nr-r-full); background: var(--nr-green50); color: var(--nr-green700); border: 1px solid var(--nr-green-bd); }
.nrc__card-ttl { font-size: 15px; font-weight: 700; color: var(--nr-g900); line-height: 1.35; }
.nrc__card-txt { color: var(--nr-g600); font-size: 14px; line-height: 1.65; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.nrc__card-txt p { margin-bottom: .4em; }
.nrc__card-txt p:last-child { margin-bottom: 0; }

/* Card Images */
.nrc__card-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.nrc__card-imgs--1 { grid-template-columns: 1fr; }
.nrc__card-imgs--1 .nrc__card-pic { aspect-ratio: 16/10; }
.nrc__card-pic {
  display: block; position: relative;
  aspect-ratio: 1;
  border-radius: var(--nr-r);
  overflow: hidden; text-decoration: none;
  background: var(--nr-g100);
  transition: transform var(--nr-ease);
}
.nrc__card-pic:hover { transform: scale(1.04); z-index: 1; will-change: transform; }
/* wp_get_attachment_image outputs img with inline width/height;
   these overrides ensure cover behavior regardless of natural size */
.nrc__card-pic img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center center !important;
}
.nrc__card-extra { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--nr-g500); background: var(--nr-g100); border-radius: var(--nr-r); aspect-ratio: 1; cursor: pointer; }
.nrc__card-extra:hover { background: var(--nr-g200); }

/* Reply */
.nrc__reply { background: var(--nr-g50); border-radius: var(--nr-r-sm); padding: 10px 12px; font-size: 13px; color: var(--nr-g500); border-left: 3px solid var(--nr-blue500); }
.nrc__reply strong { font-size: 12px; font-weight: 700; color: var(--nr-g700); display: block; margin-bottom: 2px; }
.nrc__reply p { margin: 0; }

/* Card Footer */
.nrc__card-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--nr-g100); margin-top: auto; }
.nrc__author { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.nrc__av { width: 32px; height: 32px; border-radius: 50%; background: var(--nr-blue50); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--nr-blue600); flex-shrink: 0; }
.nrc__author-info { min-width: 0; }
.nrc__author-info strong { font-size: 13px; font-weight: 600; color: var(--nr-g800); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrc__date { font-size: 11px; color: var(--nr-g400); white-space: nowrap; }
.nrc__acts { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }

/* Action Buttons */
.nr-btn { appearance: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: transparent; border-radius: var(--nr-r-sm); padding: 4px 8px; font-size: 12px; font-family: inherit; color: var(--nr-g400); cursor: pointer; transition: all var(--nr-ease); line-height: 1.3; }
.nr-btn svg { flex-shrink: 0; }
.nr-btn--vote:hover { color: var(--nr-green700); background: var(--nr-green50); border-color: var(--nr-green-bd); }
.nr-btn--flag:hover { color: var(--nr-red600); }

/* Arrows */
.nrc__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 38px; height: 38px; border: 1px solid var(--nr-g200); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: var(--nr-sh-md); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--nr-g800); transition: all var(--nr-ease); }
.nrc__arrow:hover:not(:disabled) { box-shadow: var(--nr-sh-lg); background: var(--nr-white); }
.nrc__arrow:disabled { opacity: 0; pointer-events: none; }
.nrc__arrow--prev { left: 8px; }
.nrc__arrow--next { right: 8px; }

/* Nav */
.nrc__nav { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.nrc__dots { display: flex; gap: 6px; align-items: center; }
.nrc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nr-g200); border: none; padding: 0; cursor: pointer; transition: all var(--nr-ease); }
.nrc__dot.is-active { background: var(--nr-blue600); width: 22px; border-radius: var(--nr-r-full); }
.nrc__pginfo { font-size: 13px; color: var(--nr-g400); font-variant-numeric: tabular-nums; }
.nrc__more { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--nr-g200); background: var(--nr-white); border-radius: var(--nr-r); padding: 9px 18px; font-size: 13px; font-weight: 600; font-family: inherit; color: var(--nr-g700); cursor: pointer; transition: all var(--nr-ease); }
.nrc__more:hover { background: var(--nr-g50); border-color: var(--nr-g300); box-shadow: var(--nr-sh-xs); }
.nrc__more:disabled { opacity: .35; pointer-events: none; }

/* Trust footer */
.nrc__trust { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--nr-g100); }
.nrc__seal { font-size: 12px; color: var(--nr-g400); display: inline-flex; align-items: center; gap: 5px; }

/* Empty / Loading */
.nrc__empty { width: 100%; border: 2px dashed var(--nr-g200); border-radius: var(--nr-r-lg); padding: 40px 20px; text-align: center; color: var(--nr-g400); font-size: 14px; }
.nrc__track-outer.is-loading { opacity: .4; pointer-events: none; position: relative; }
.nrc__track-outer.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 3px solid var(--nr-g200); border-top-color: var(--nr-blue600); border-radius: 50%; animation: nr-spin .6s linear infinite; z-index: 5; }
@keyframes nr-spin { to { transform: rotate(360deg); } }

/* ─── Lightbox ───────────────────────────────────────────────── */
.nrc-lb { position: fixed; inset: 0; display: none; background: rgba(0,0,0,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 100000; align-items: center; justify-content: center; }
.nrc-lb.is-open { display: flex; }
.nrc-lb__img { max-width: 92vw; max-height: 85vh; border-radius: var(--nr-r-lg); box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); object-fit: contain; }
.nrc-lb__close, .nrc-lb__prev, .nrc-lb__next { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--nr-g900); transition: transform var(--nr-ease); }
.nrc-lb__close:hover, .nrc-lb__prev:hover, .nrc-lb__next:hover { transform: scale(1.08); }
.nrc-lb__close { top: 20px; right: 20px; }
.nrc-lb__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.nrc-lb__next { right: 20px; top: 50%; transform: translateY(-50%); }
.nrc-lb__prev:hover { transform: translateY(-50%) scale(1.08); }
.nrc-lb__next:hover { transform: translateY(-50%) scale(1.08); }

/* ============================================================
   SITEWIDE (.nrva)
   ============================================================ */
.nrva { width: 100%; max-width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 20px; }

/* Hero */
.nrva__hero { background: linear-gradient(135deg, var(--nr-g50), var(--nr-blue50)); border: 1px solid var(--nr-g200); border-radius: var(--nr-r-xl); padding: 32px 24px; text-align: center; }
.nrva__hero-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.nrva__hero-score { display: flex; align-items: baseline; gap: 2px; }
.nrva__hero-big { font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.nrva__hero-max { font-size: 18px; font-weight: 600; color: var(--nr-g500); }
.nrva__hero-count { font-size: 14px; color: var(--nr-g500); font-weight: 500; }
.nrva__badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.nrva__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--nr-r-full); }
.nrva__badge svg { flex-shrink: 0; width: 12px; height: 12px; }
.nrva__badge--ok { background: var(--nr-green50); color: var(--nr-green700); border: 1px solid var(--nr-green-bd); }
.nrva__badge--lock { background: var(--nr-blue50); color: var(--nr-blue600); border: 1px solid var(--nr-blue100); }

/* Results bar */
.nrva__bar { font-size: 14px; font-weight: 600; color: var(--nr-g700); padding: 0 2px; }

/* Grid layout */
.nrva__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }

/* Sidebar */
.nrva__side { border: 1px solid var(--nr-g200); border-radius: var(--nr-r-lg); padding: 16px; background: var(--nr-white); position: sticky; top: 16px; }
.nrva__form { display: flex; flex-direction: column; gap: 14px; }
.nrva__form-group { display: flex; flex-direction: column; gap: 8px; }
.nrva__form-legend { font-size: 13px; font-weight: 600; color: var(--nr-g700); }
.nrva__input { width: 100%; border: 1px solid var(--nr-g200); border-radius: var(--nr-r-sm); padding: 9px 12px; font-size: 13px; color: var(--nr-g900); background: var(--nr-white); font-family: inherit; transition: border-color var(--nr-ease); }
.nrva__input:focus { border-color: var(--nr-blue500); outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.nrva__chk, .nrva__rad { font-size: 13px; color: var(--nr-g600); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.nrva__chk input, .nrva__rad input { width: 16px; height: 16px; accent-color: var(--nr-blue600); cursor: pointer; }
.nrva__selects { display: flex; flex-direction: column; gap: 10px; }
.nrva__selects label { font-size: 13px; color: var(--nr-g500); font-weight: 500; display: flex; flex-direction: column; gap: 4px; }
.nrva__sel { width: 100%; appearance: none; border: 1px solid var(--nr-g200); border-radius: var(--nr-r-sm); padding: 8px 28px 8px 10px; font-size: 13px; color: var(--nr-g700); font-family: inherit; background: var(--nr-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center; cursor: pointer; transition: border-color var(--nr-ease); }
.nrva__sel:focus { border-color: var(--nr-blue500); outline: none; }
.nrva__submit { appearance: none; border: none; background: var(--nr-g900); color: #fff; border-radius: var(--nr-r); padding: 10px 16px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--nr-ease); width: 100%; }
.nrva__submit:hover { background: var(--nr-g800); box-shadow: var(--nr-sh-md); }

/* Main list */
.nrva__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nrva__list { display: flex; flex-direction: column; gap: 12px; }

/* Sitewide Card */
.nrva__card {
  border: 1px solid var(--nr-g200); border-radius: var(--nr-r-lg); padding: 20px;
  background: var(--nr-white); box-shadow: var(--nr-sh-xs);
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow var(--nr-ease);
  /* Skip off-screen cards in a long list */
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.nrva__card:hover { box-shadow: var(--nr-sh-md); }
.nrva__card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nrva__av { width: 40px; height: 40px; border-radius: 50%; background: var(--nr-g100); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--nr-g600); flex-shrink: 0; }
.nrva__card-who { flex: 1; min-width: 0; }
.nrva__card-who strong { font-size: 14px; color: var(--nr-g900); display: block; }
.nrva__card-date { font-size: 12px; color: var(--nr-g400); }
.nrva__card-stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.nrva__badge-v { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--nr-r-full); background: var(--nr-green50); color: var(--nr-green700); border: 1px solid var(--nr-green-bd); }
.nrva__card-prod { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nrva__card-prod a { font-size: 13px; font-weight: 600; color: var(--nr-blue600); text-decoration: none; }
.nrva__card-prod a:hover { text-decoration: underline; }
.nrva__card-tag { font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: var(--nr-r-full); border: 1px solid var(--nr-g200); background: var(--nr-g50); color: var(--nr-g500); }
.nrva__card-ttl { font-size: 15px; font-weight: 600; color: var(--nr-g900); }
.nrva__card-body { color: var(--nr-g600); font-size: 14px; line-height: 1.7; }
.nrva__card-body p { margin-bottom: .5em; }
.nrva__card-body p:last-child { margin-bottom: 0; }

/* Sitewide media */
.nrva__card-media { display: flex; gap: 8px; flex-wrap: wrap; }
.nrva__thumb {
  width: 80px; height: 80px;
  border-radius: var(--nr-r); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; background: var(--nr-g100); flex-shrink: 0;
  transition: transform var(--nr-ease);
}
.nrva__thumb:hover { transform: scale(1.06); will-change: transform; }
.nrva__thumb img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: center center !important;
}
.nrva__thumb--vid { color: var(--nr-g500); }

/* Sitewide reply */
.nrva__reply { background: var(--nr-g50); border-radius: var(--nr-r); padding: 12px; font-size: 14px; color: var(--nr-g600); border-left: 3px solid var(--nr-blue500); }
.nrva__reply strong { font-size: 13px; color: var(--nr-g800); display: block; margin-bottom: 4px; }

/* Card footer */
.nrva__card-ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--nr-g100); margin-top: auto; }
.nrva__card-ft .nr-btn { padding: 6px 12px; font-size: 13px; border: 1px solid var(--nr-g200); background: var(--nr-white); border-radius: var(--nr-r); }
.nrva__card-ft .nr-btn:hover { background: var(--nr-g50); }
.nrva__card-ft .nr-btn--vote:hover { color: var(--nr-green700); background: var(--nr-green50); border-color: var(--nr-green-bd); }
.nrva__card-ft .nr-btn--flag { border-color: transparent; background: transparent; color: var(--nr-g400); }
.nrva__card-ft .nr-btn--flag:hover { color: var(--nr-red600); background: var(--nr-red50); }

/* Pagination */
.nrva__pg { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.nrva__pg-arr { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--nr-g200); background: var(--nr-white); border-radius: var(--nr-r-sm); text-decoration: none; color: var(--nr-g600); transition: all var(--nr-ease); }
.nrva__pg-arr:hover:not(.is-off) { background: var(--nr-g50); border-color: var(--nr-g300); }
.nrva__pg-arr.is-off { opacity: .3; pointer-events: none; }
.nrva__pg-nums { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.nrva__pg-n { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid var(--nr-g200); border-radius: var(--nr-r-sm); background: var(--nr-white); color: var(--nr-g600); text-decoration: none; font-size: 14px; font-weight: 500; transition: all var(--nr-ease); }
.nrva__pg-n:hover { background: var(--nr-g50); }
.nrva__pg-n.is-cur { background: var(--nr-g900); color: #fff; border-color: var(--nr-g900); }
.nrva__pg-gap { color: var(--nr-g400); display: flex; align-items: center; font-size: 14px; padding: 0 4px; }
.nrva__pg-info { text-align: center; font-size: 13px; color: var(--nr-g400); margin-top: -6px; }

/* Footer */
.nrva__footer { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.nrva__footer a { color: var(--nr-g500); text-decoration: none; font-size: 13px; transition: color var(--nr-ease); }
.nrva__footer a:hover { color: var(--nr-g900); text-decoration: underline; }
.nrva__empty { border: 2px dashed var(--nr-g200); border-radius: var(--nr-r-lg); padding: 32px; text-align: center; color: var(--nr-g400); font-size: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .nrc__hero { flex-direction: column; align-items: flex-start; }
  .nrc__score-num { font-size: 40px; }
  .nrc__insights { grid-template-columns: 1fr; gap: 16px; }
  .nrc__card { width: 300px; flex: 0 0 300px; }
  .nrc__arrow { display: none; }
  .nrva__grid { grid-template-columns: 1fr; }
  .nrva__side { position: static; }
  .nrva__card-head { flex-wrap: wrap; }
  .nrva__card-stars { width: 100%; }
  .nrva__thumb { width: 64px; height: 64px; }
}
@media (max-width: 480px) {
  .nrc { gap: 18px; }
  .nrc__pills { flex-direction: column; gap: 4px; }
  .nrc__card { width: calc(100vw - 40px); flex: 0 0 calc(100vw - 40px); }
  .nrc__card-imgs { grid-template-columns: repeat(3, 1fr); }
  .nrc__ugc-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
  .nrc__filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .nrc__fl-left, .nrc__fl-right { justify-content: space-between; }
  .nrva__hero { padding: 20px 16px; }
  .nrva__hero-big { font-size: 40px; }
  .nrva__card { padding: 16px; }
  .nrva__card-ft { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1024px) {
  .nrc__card { width: 360px; flex: 0 0 360px; }
  .nrc__ugc-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/*
 * Reduced Motion: remove all transitions and animations.
 * Also disable scroll-behavior (momentum scrolling can feel sickening
 * for users with vestibular disorders).
 */
@media (prefers-reduced-motion: reduce) {
  .nrc *, .nrva * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .nrc__track-outer { scroll-behavior: auto; }
}