/* ================================================================
   products.css — the /products catalog, filter rail and watchlist.

   Loads AFTER css/blog-v2.css, which owns the nav, footer and every
   --v2-* token used here. No @import: see the note at the top of
   blog-v2.css — an @import is invisible to the preload scanner and
   pushed font loading from ~850ms to ~4200ms on 4G.

   Everything is scoped under `body.products-v2` for the same reason
   blog-index-v2.css scopes under `body.blog-index`: blog-v2.css sets
   `body.blog-v2 a { color: inherit }`, and an unscoped `.pr-*` rule
   loses to it on specificity. Scoping wins the anchor colours back
   without !important.
================================================================ */

body.products-v2 {
  --pr-rail-w: 236px;
  --pr-gap: 16px;
}

/* ===== HERO ===================================================== */

body.products-v2 .pr-hero {
  background:
    radial-gradient(1200px 320px at 12% -10%, rgba(29, 78, 216, 0.10), transparent 60%),
    var(--v2-bg);
  border-bottom: 1px solid var(--v2-hairline);
  padding: 28px 0 20px;
}
body.products-v2 .pr-wrap {
  max-width: var(--v2-max-w);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { body.products-v2 .pr-wrap { padding: 0 24px; } }

body.products-v2 .pr-eyebrow {
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v2-brand-soft);
  margin-bottom: 8px;
}
body.products-v2 .pr-h1 {
  font-family: var(--v2-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
body.products-v2 .pr-sub {
  color: var(--v2-ink-soft);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

/* --- search + watchlist toggle --- */

body.products-v2 .pr-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  body.products-v2 .pr-tools { flex-direction: row; align-items: center; }
}

body.products-v2 .pr-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--v2-card);
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-xl);
  padding: 11px 14px;
  transition: border-color .15s, box-shadow .15s;
}
body.products-v2 .pr-search:focus-within {
  border-color: var(--v2-brand-soft);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}
body.products-v2 .pr-search-icon {
  width: 17px; height: 17px; flex: none;
  color: var(--v2-ink-soft);
}
body.products-v2 .pr-search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  color: var(--v2-ink);
  /* 16px stops iOS Safari zooming the whole page on focus. */
  font-size: 16px;
  min-width: 0;
}
@media (min-width: 768px) { body.products-v2 .pr-search input { font-size: 14px; } }
body.products-v2 .pr-search input::placeholder { color: rgba(100, 116, 139, .75); }
body.products-v2 .pr-search input::-webkit-search-cancel-button { display: none; }

body.products-v2 .pr-search-clear {
  display: none;
  align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: none;
  border: none; background: var(--v2-secondary);
  border-radius: 50%; cursor: pointer;
  color: var(--v2-ink-soft);
}
body.products-v2 .pr-search-clear svg { width: 12px; height: 12px; }
body.products-v2 .pr-search.has-query .pr-search-clear { display: flex; }

body.products-v2 .pr-watch-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  flex: none;
  padding: 12px 18px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-xl);
  background: var(--v2-card);
  color: var(--v2-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
body.products-v2 .pr-watch-toggle svg { width: 17px; height: 17px; }
body.products-v2 .pr-watch-toggle:hover { border-color: var(--v2-brand-soft); }
/* On the watchlist view this becomes the way back, so it reads as primary. */
body.products-v2 .pr-watch-toggle.is-active {
  background: var(--v2-brand);
  border-color: var(--v2-brand);
  color: #fff;
}
body.products-v2 .pr-watch-clear {
  flex: none;
  padding: 12px 16px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-xl);
  background: var(--v2-card);
  color: var(--v2-ink-soft);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
body.products-v2 .pr-watch-clear:hover { color: var(--v2-ink); border-color: var(--v2-ink-soft); }

/* ===== LAYOUT =================================================== */

body.products-v2 .pr-body {
  max-width: var(--v2-max-w);
  margin: 0 auto;
  padding: 20px 16px 56px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  body.products-v2 .pr-body {
    grid-template-columns: var(--pr-rail-w) minmax(0, 1fr);
    gap: 28px;
    padding: 24px 24px 72px;
  }
}

/* ===== FILTER RAIL ============================================== */

/* Mobile: the rail is a bottom sheet, hidden until the Filters button
   opens it. Desktop: a sticky column. Same markup drives both. */
body.products-v2 .pr-rail {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  max-height: 82vh;
  background: var(--v2-card);
  border-radius: var(--v2-r-2xl) var(--v2-r-2xl) 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .18);
  transform: translateY(101%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  /* Never let a closed sheet swallow taps on the grid behind it. */
  visibility: hidden;
}
body.products-v2 .pr-rail.is-open { transform: translateY(0); visibility: visible; }

body.products-v2 .pr-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--v2-hairline);
  flex: none;
}
body.products-v2 .pr-rail-title {
  font-family: var(--v2-display);
  font-weight: 700; font-size: 17px;
}
body.products-v2 .pr-rail-actions { display: flex; align-items: center; gap: 10px; }
body.products-v2 .pr-rail-clear {
  border: none; background: none; cursor: pointer;
  font-family: var(--v2-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-brand);
}
body.products-v2 .pr-rail-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--v2-brand-soft); border-radius: 50%;
  background: none; color: var(--v2-brand); cursor: pointer;
}
body.products-v2 .pr-rail-close svg { width: 14px; height: 14px; }

body.products-v2 .pr-rail-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  /* Room for the sticky Show-N bar so the last filter is never trapped. */
  padding-bottom: 84px;
  flex: 1 1 auto;
}

body.products-v2 .pr-rail-foot {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--v2-card);
  border-top: 1px solid var(--v2-hairline);
}
body.products-v2 .pr-rail-apply {
  width: 100%;
  padding: 14px;
  border: none; border-radius: var(--v2-r-xl);
  background: var(--v2-brand); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}

body.products-v2 .pr-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
body.products-v2 .pr-scrim.is-open { opacity: 1; pointer-events: auto; }

/* The chat FAB is fixed bottom-right at a higher z-index than the sheet, so it
   sat squarely on top of "Show 5,736 products" — the one control the sheet
   exists for. Hidden for as long as the sheet is open; js/products.js toggles
   this class, and the FAB's own styles are untouched. */
body.pr-sheet-open #nopturnia-chat-fab { display: none !important; }

@media (min-width: 1024px) {
  body.products-v2 .pr-rail {
    position: sticky;
    top: calc(var(--v2-nav-h) + 16px);
    inset: auto;
    transform: none;
    visibility: visible;
    max-height: calc(100vh - var(--v2-nav-h) - 32px);
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  body.products-v2 .pr-rail-head { padding: 0 0 12px; }
  body.products-v2 .pr-rail-close { display: none; }
  body.products-v2 .pr-rail-scroll { padding: 0; padding-bottom: 8px; }
  body.products-v2 .pr-rail-foot { display: none; }
  body.products-v2 .pr-scrim { display: none; }
}

/* --- filter groups --- */

body.products-v2 .pr-group { padding: 16px 0; border-top: 1px solid var(--v2-hairline); }
body.products-v2 .pr-group:first-child { border-top: none; padding-top: 0; }
body.products-v2 .pr-group-title {
  font-family: var(--v2-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 12px;
}

body.products-v2 .pr-check {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 14px;
}
body.products-v2 .pr-check input {
  width: 17px; height: 17px; flex: none;
  accent-color: var(--v2-brand);
  cursor: pointer;
}
body.products-v2 .pr-check-label { flex: 1; min-width: 0; }
body.products-v2 .pr-check-n {
  font-family: var(--v2-mono);
  font-size: 11.5px;
  color: var(--v2-ink-soft);
  flex: none;
}
/* A filter that would return nothing is shown, dimmed, rather than removed —
   a disappearing option reads as a bug, and the zero is information. */
body.products-v2 .pr-check.is-empty { opacity: .42; }

body.products-v2 .pr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.products-v2 .pr-chip {
  border: 1px solid var(--v2-hairline);
  background: var(--v2-card);
  border-radius: 999px;
  padding: 6px 11px;
  font-family: var(--v2-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: all .13s;
}
body.products-v2 .pr-chip:hover { border-color: var(--v2-brand-soft); color: var(--v2-ink); }
body.products-v2 .pr-chip[aria-pressed="true"] {
  background: var(--v2-brand); border-color: var(--v2-brand); color: #fff;
}
body.products-v2 .pr-feature-chip { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
/* Dimmed rather than removed when the current filters would leave it empty —
   a disappearing option reads as a bug, and the emptiness is information. */
body.products-v2 .pr-chip.is-empty { opacity: .4; }

/* --- price slider --- */

body.products-v2 .pr-slider { margin-top: 14px; }
body.products-v2 .pr-slider input[type="range"] {
  width: 100%;
  accent-color: var(--v2-brand);
  cursor: pointer;
}
body.products-v2 .pr-slider-vals {
  display: flex; justify-content: space-between;
  font-family: var(--v2-mono);
  font-size: 11px;
  color: var(--v2-ink-soft);
  margin-top: 4px;
}

/* ===== RESULTS HEADER =========================================== */

body.products-v2 .pr-results { min-width: 0; }

body.products-v2 .pr-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.products-v2 .pr-bar-left {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
body.products-v2 .pr-count {
  font-family: var(--v2-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "· page 1 of 239" is the first thing to go when the bar is tight — the pager
   at the foot of the grid says the same thing with more room. */
body.products-v2 .pr-count-page { display: none; }
@media (min-width: 640px) { body.products-v2 .pr-count-page { display: inline; } }
body.products-v2 .pr-filters-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg);
  background: var(--v2-card);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--v2-ink);
  cursor: pointer;
}
body.products-v2 .pr-filters-btn svg { width: 15px; height: 15px; }
body.products-v2 .pr-filters-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--v2-brand); color: #fff;
  font-family: var(--v2-mono); font-size: 11px;
}
body.products-v2 .pr-filters-n:empty { display: none; }
@media (min-width: 1024px) { body.products-v2 .pr-filters-btn { display: none; } }

body.products-v2 .pr-sort {
  display: inline-flex; align-items: center; gap: 8px;
  flex: none;
}
body.products-v2 .pr-sort-label {
  display: none;
  font-family: var(--v2-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v2-ink-soft);
}
@media (min-width: 640px) { body.products-v2 .pr-sort-label { display: inline; } }
body.products-v2 .pr-sort select {
  appearance: none;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg);
  background: var(--v2-card)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 10px center / 13px;
  padding: 9px 30px 9px 12px;
  font-family: inherit; font-size: 13.5px;
  color: var(--v2-ink);
  cursor: pointer;
}

/* --- active filter chips --- */

body.products-v2 .pr-active {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
body.products-v2 .pr-active:empty { display: none; }
body.products-v2 .pr-active-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--v2-hairline);
  border-radius: 999px;
  background: var(--v2-secondary);
  font-size: 12.5px;
  color: var(--v2-ink);
  cursor: pointer;
}
body.products-v2 .pr-active-chip svg { width: 11px; height: 11px; color: var(--v2-ink-soft); }
body.products-v2 .pr-active-clear {
  border: none; background: none; cursor: pointer;
  font-family: var(--v2-mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-brand);
}

/* ===== PRODUCT GRID ============================================= */

body.products-v2 .pr-grid {
  display: grid;
  gap: var(--pr-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { body.products-v2 .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.products-v2 .pr-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { body.products-v2 .pr-grid { grid-template-columns: repeat(4, 1fr); } }

body.products-v2 .pr-card {
  position: relative;
  display: flex;
  background: var(--v2-card);
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-xl);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  /* Below 560px the card is a row: image left, everything else right.
     That is the PWA layout, and it keeps ~3 products on screen instead of 1. */
  flex-direction: row;
}
@media (min-width: 560px) { body.products-v2 .pr-card { flex-direction: column; } }
body.products-v2 .pr-card:hover {
  border-color: var(--v2-brand-soft);
  box-shadow: 0 8px 26px rgba(15, 23, 42, .09);
}

body.products-v2 .pr-card-media {
  position: relative;
  flex: none;
  width: 116px;
  background: var(--v2-secondary);
}
@media (min-width: 560px) {
  body.products-v2 .pr-card-media { width: auto; aspect-ratio: 4 / 3; }
}
body.products-v2 .pr-card-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 10px;
  /* Amazon thumbnails are inconsistent sizes; contain + a fixed box keeps the
     grid from shifting as they load. */
}

body.products-v2 .pr-watch-btn {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: background .13s, color .13s, transform .13s;
}
body.products-v2 .pr-watch-btn svg { width: 16px; height: 16px; }
body.products-v2 .pr-watch-btn:hover { transform: scale(1.08); color: var(--v2-brand); }
body.products-v2 .pr-watch-btn[aria-pressed="true"] {
  background: var(--v2-brand); color: #fff;
}

/* Remove pill, watchlist view only. */
body.products-v2 .pr-remove-btn {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: none; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14);
  font-family: var(--v2-mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--v2-ink-soft);
  cursor: pointer;
}
body.products-v2 .pr-remove-btn svg { width: 10px; height: 10px; }
body.products-v2 .pr-remove-btn:hover { color: #B91C1C; }

body.products-v2 .pr-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  min-width: 0;
  flex: 1;
}

body.products-v2 .pr-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
body.products-v2 .pr-card-cat {
  font-family: var(--v2-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}

/* The price-signal chip that replaces the design's star rating — there is no
   rating data in the catalog, and this says something Amazon's own page doesn't. */
body.products-v2 .pr-signal {
  display: inline-flex; align-items: center; gap: 4px;
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--v2-mono);
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
}
body.products-v2 .pr-signal-deal { background: #FEF3C7; color: #92400E; }
body.products-v2 .pr-signal-low  { background: #DCFCE7; color: #166534; }
body.products-v2 .pr-signal-out  { background: var(--v2-secondary); color: var(--v2-ink-soft); }

body.products-v2 .pr-card-title {
  font-family: var(--v2-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  /* Two lines everywhere, so every card in a row is the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.products-v2 .pr-price-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px;
}
body.products-v2 .pr-price {
  font-family: var(--v2-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--v2-brand);
}
body.products-v2 .pr-mrp {
  font-size: 12.5px;
  color: var(--v2-ink-soft);
  text-decoration: line-through;
}
body.products-v2 .pr-off {
  padding: 2px 7px;
  border-radius: 5px;
  background: #DCFCE7;
  color: #166534;
  font-family: var(--v2-mono);
  font-size: 10.5px;
  font-weight: 500;
}

/* Slot the price-history strip mounts into. Reserved even when empty so the
   card doesn't jump when price-insights decorates it a moment later. */
body.products-v2 .pr-card-history { min-height: 34px; }
/* ...but once price-insights has resolved the ASIN and decided there is
   nothing worth showing (no history, or too little of it to make an honest
   claim), it adds this class and the reservation is released. Holding 34px
   for a strip that is never coming is dead space. */
body.products-v2 .pr-card-history.pr-card-history-empty { min-height: 0; }

body.products-v2 .pr-card-cta { margin-top: auto; padding-top: 2px; }
body.products-v2 .pr-amz-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--v2-r-lg);
  background: var(--v2-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .13s;
}
body.products-v2 .pr-amz-btn:hover { background: #1740b8; }
body.products-v2 .pr-amz-btn svg { width: 13px; height: 13px; }
/* Out of stock: the link still works (Amazon may have restocked), but it must
   not look like a live buying CTA. */
body.products-v2 .pr-card.is-out .pr-amz-btn {
  background: var(--v2-secondary);
  color: var(--v2-ink-soft);
}
body.products-v2 .pr-card.is-out .pr-card-media img { opacity: .62; }

/* ===== PAGER ==================================================== */

body.products-v2 .pr-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-top: 32px;
  flex-wrap: wrap;
}
body.products-v2 .pr-page,
body.products-v2 .pr-nav {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-lg);
  background: var(--v2-card);
  font-family: var(--v2-mono);
  font-size: 13px;
  color: var(--v2-ink);
  cursor: pointer;
}
body.products-v2 .pr-page:hover:not([aria-current]),
body.products-v2 .pr-nav:hover:not(:disabled) { border-color: var(--v2-brand-soft); }
body.products-v2 .pr-page[aria-current="page"] {
  background: var(--v2-brand); border-color: var(--v2-brand); color: #fff;
}
body.products-v2 .pr-nav:disabled { opacity: .4; cursor: default; }
body.products-v2 .pr-nav svg { width: 15px; height: 15px; }
body.products-v2 .pr-ellipsis { color: var(--v2-ink-soft); padding: 0 2px; }

/* ===== EMPTY + WATCHLIST STATES ================================= */

body.products-v2 .pr-empty {
  border: 1px solid var(--v2-hairline);
  border-radius: var(--v2-r-2xl);
  background: var(--v2-card);
  padding: 44px 24px;
  text-align: center;
}
body.products-v2 .pr-empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(29, 78, 216, .09);
  color: var(--v2-brand);
}
body.products-v2 .pr-empty-icon svg { width: 26px; height: 26px; }
body.products-v2 .pr-empty-eyebrow {
  font-family: var(--v2-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v2-brand-soft);
  margin-bottom: 8px;
}
body.products-v2 .pr-empty h2 {
  font-family: var(--v2-display);
  font-weight: 700;
  font-size: clamp(20px, 3.2vw, 26px);
  margin-bottom: 10px;
}
body.products-v2 .pr-empty p {
  color: var(--v2-ink-soft);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 auto 20px;
}
body.products-v2 .pr-empty-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
body.products-v2 .pr-btn-primary,
body.products-v2 .pr-btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: var(--v2-r-lg);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
body.products-v2 .pr-btn-primary { background: var(--v2-brand); color: #fff; }
body.products-v2 .pr-btn-primary:hover { background: #1740b8; }
body.products-v2 .pr-btn-ghost {
  background: var(--v2-card); border-color: var(--v2-hairline); color: var(--v2-ink);
}
body.products-v2 .pr-btn-ghost:hover { border-color: var(--v2-brand-soft); }

/* The three explainer tiles under the empty watchlist. */
body.products-v2 .pr-tiles {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--v2-hairline);
  border-top: 1px solid var(--v2-hairline);
  margin: 32px -24px -44px;
}
@media (min-width: 700px) { body.products-v2 .pr-tiles { grid-template-columns: repeat(3, 1fr); } }
body.products-v2 .pr-tile { background: var(--v2-card); padding: 20px; text-align: left; }
body.products-v2 .pr-tile svg { width: 18px; height: 18px; color: var(--v2-brand); margin-bottom: 10px; }
body.products-v2 .pr-tile h3 { font-family: var(--v2-display); font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
body.products-v2 .pr-tile p { font-size: 13px; color: var(--v2-ink-soft); line-height: 1.55; margin: 0; max-width: none; }
body.products-v2 .pr-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 14px;
  border-top: 1px solid var(--v2-hairline);
  background: var(--v2-card);
  font-family: var(--v2-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin: 0 -24px -44px;
}
body.products-v2 .pr-note svg { width: 13px; height: 13px; }

/* ===== SEO PROSE + CROSS-LINKS ================================== */

/* The generated intro and the sibling-facet links. These carry the page's
   crawlable text, so they sit in normal document flow, never behind JS. */
body.products-v2 .pr-intro {
  color: var(--v2-ink-soft);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 72ch;
  margin-bottom: 4px;
}
body.products-v2 .pr-links {
  border-top: 1px solid var(--v2-hairline);
  margin-top: 40px;
  padding-top: 26px;
}
body.products-v2 .pr-links-group + .pr-links-group { margin-top: 22px; }
body.products-v2 .pr-links h2 {
  font-family: var(--v2-mono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v2-ink-soft);
  margin-bottom: 12px;
  font-weight: 500;
}
body.products-v2 .pr-links-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.products-v2 .pr-links-list a {
  padding: 7px 13px;
  border: 1px solid var(--v2-hairline);
  border-radius: 999px;
  background: var(--v2-card);
  font-size: 13px;
  color: var(--v2-ink);
  transition: border-color .13s, color .13s;
}
body.products-v2 .pr-links-list a:hover { border-color: var(--v2-brand-soft); color: var(--v2-brand); }

body.products-v2 .pr-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px;
  color: var(--v2-ink-soft);
  margin-bottom: 14px;
}
body.products-v2 .pr-crumbs a:hover { color: var(--v2-brand); }
body.products-v2 .pr-crumbs span { opacity: .55; }

/* ===== MOTION =================================================== */

@media (prefers-reduced-motion: reduce) {
  body.products-v2 .pr-rail,
  body.products-v2 .pr-scrim,
  body.products-v2 .pr-card,
  body.products-v2 .pr-watch-btn { transition: none; }
}