/** Shopify CDN: Minification failed

Line 2604:0 Unexpected "@font-face"

**/
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --white: #ffffff;
  --off-white: #f5f5f7;
  --light-gray: #e8e8ed;
  --mid-gray: #86868b;
  --dark-gray: #1d1d1f;
  --black: #000000;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --divider: rgba(0,0,0,0.08);
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #a1a1a6;
  --radius: 18px;
  --radius-sm: 12px;
}

/* scroll-behavior: smooth removed — causes main thread jank on mobile */

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  background: var(--white);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.nav-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--black);
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }
.nav-cta { color: var(--accent) !important; font-weight: 500; }

/* HERO */
.hero {
  padding-top: 140px;
  padding-bottom: 80px;
  text-align: center;
  background: var(--white);
}

.hero-eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 2.8s 0.0s  cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp 2.8s 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  min-height: 1.05em;
}

.hero-headline em { font-style: italic; color: var(--text-secondary); }

.hero-tagline {
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 400;
  color: var(--text-secondary);
  margin: -10px auto 24px;
  letter-spacing: -0.01em;
  opacity: 0;
  animation: fadeUp 2.8s 0.68s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.65;
  opacity: 0;
  animation: fadeUp 2.8s 0.90s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 2.8s 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.18s;
  font-family: inherit;
}


.hero-stats {
  display: flex;
  justify-content: center;
  margin-top: 72px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  opacity: 0;
  animation: fadeUp 2.8s 1.80s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stat {
  flex: 1;
  max-width: 200px;
  padding: 30px 20px;
  border-right: 1px solid var(--divider);
  text-align: center;
}

.stat:last-child { border-right: none; }

.stat-num {
  font-family: 'DM Serif Display', serif;
  font-size: 34px;
  letter-spacing: -0.01em;
  color: var(--black);
  display: block;
  margin-bottom: 4px;
}

.stat-label { font-size: 12px; color: var(--text-tertiary); }

/* SECTION */
.section-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.section-header { text-align: center; margin-bottom: 56px; }

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 10px;
}

.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -0.015em;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 12px;
}

.section-desc {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

/* WHY */
.why-section { background: var(--off-white); padding: 96px 0; }

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
}

.why-card {
  background: var(--white);
  padding: 44px 36px;
}

.why-num {
  font-family: 'DM Serif Display', serif;
  font-size: 13px;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 20px;
}

.why-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.why-body {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* PRODUCTS */
.products-section { padding: 96px 0; background: var(--white); }

.filter-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.filter-pill {
  padding: 8px 18px;
  border-radius: 980px;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid var(--light-gray);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.filter-pill:hover { border-color: var(--mid-gray); color: var(--text); }
.filter-pill.active { background: var(--black); border-color: var(--black); color: white; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
}

.product-card {
  background: var(--white);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}

.product-card:hover { background: #fafafa; }

/* MAX featured card */
.product-card.featured {
  grid-column: 1 / -1;
  background: #000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 60px;
  align-items: start;
  overflow: hidden;
}

.product-card.featured:hover { background: #0a0a0a; }

/* ── SOLD OUT ──
   When a product's available inventory drops to zero, Liquid adds the
   product-card--sold-out class. The whole card desaturates: contents
   fade, the badge swaps to a red "Sold Out" pill, the Get Started button
   disables, and hover no longer brightens the background. The Add to
   Comparison button stays active — informational comparison is still
   useful even when the build can't be ordered right now. */
.product-card--sold-out {
  position: relative;
}
/* Fade most card content. Use a wide selector so it works for both the
   standard card structure (children at the top level) and the featured
   Max card structure (content nested in two grid-column wrappers). */
.product-card--sold-out > *,
.product-card--sold-out > div > * {
  opacity: 0.7;
  filter: grayscale(0.25);
  transition: opacity 0.15s;
}
/* Keep the sold-out pill crisp and the card actions interactive. The
   selectors here are descendants (not direct children) so they win on
   both standard and featured card layouts. */
.product-card--sold-out .sold-out-badge,
.product-card--sold-out .card-actions {
  opacity: 1;
  filter: none;
}
.product-card--sold-out:hover { background: var(--white); cursor: default; }
.product-card--sold-out.featured:hover { background: #000; }

/* Sold Out pill replaces the tier badge */
.sold-out-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #c92a2a;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Disabled Get Started button */
.btn-get-started--sold-out {
  color: var(--text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
}
.btn-get-started--sold-out:hover { gap: 4px; }
.product-card.featured .btn-get-started--sold-out { color: rgba(255,255,255,0.35); }

.product-badge {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.product-card.featured .product-badge { color: rgba(255,255,255,0.35); }

.product-name {
  font-family: 'DM Serif Display', serif;
  font-size: 34px;
  letter-spacing: 0;
  color: var(--black);
  line-height: 1.08;
  margin-bottom: 5px;
  word-break: keep-all;
}

/* Featured Max card — larger size needs even looser tracking */
.product-card.featured .product-name {
  font-size: 52px;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: white;
  word-break: keep-all;
}

.product-tagline {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
  font-weight: 300;
}

.product-card.featured .product-tagline { color: rgba(255,255,255,0.35); }

.product-price {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 24px;
}

.product-card.featured .product-price { font-size: 38px; letter-spacing: -0.01em; color: white; }

/* Specs table */
.specs-list {
  border-top: 1px solid var(--divider);
  margin-bottom: 24px;
}

.product-card.featured .specs-list { border-top-color: rgba(255,255,255,0.1); }

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--divider);
}

.product-card.featured .spec-row { border-bottom-color: rgba(255,255,255,0.07); }

.spec-key {
  font-size: 13px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.product-card.featured .spec-key { color: rgba(255,255,255,0.3); }

.spec-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  min-width: 0;
}
.product-card.featured .spec-val { color: rgba(255,255,255,0.8); }

/* FPS bars */
.fps-section { margin-bottom: 24px; flex: 1; position: relative; }

.fps-rows {
  transition: opacity 0.4s ease;
}

.fps-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.fps-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fps-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.product-card.featured .fps-label { color: rgba(255,255,255,0.25); }

.fps-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.product-card.featured .fps-legend { color: rgba(255,255,255,0.25); }

.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.dot-console { background: #b0b0b8; }
.dot-blue { background: var(--accent); }
.dot-green { background: #30d158; }
.dot-white { background: rgba(255,255,255,0.6); }

.product-card.featured .dot-console { background: rgba(255,255,255,0.4); }

.fps-rows { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

.fps-row {
  display: grid;
  grid-template-columns: 110px 1fr 58px;
  align-items: center;
  gap: 8px;
  height: 32px;
  overflow: hidden;
}

.fps-game {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.product-card.featured .fps-game { color: rgba(255,255,255,0.35); }

/* Superscript reference into the footnote table beneath the card grid.
   Slightly muted vs the game name so the eye reads the title first. */
.fps-footnote-ref {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-left: 2px;
  vertical-align: super;
  line-height: 0;
}
.product-card.featured .fps-footnote-ref { color: rgba(255,255,255,0.30); }
.pdp-page--max .fps-footnote-ref { color: rgba(255,255,255,0.45); }

/* Two-track bar layout */
.fps-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fps-track-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fps-track-label {
  font-size: 9px;
  color: var(--text-tertiary);
  width: 38px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
  white-space: nowrap;
}

.product-card.featured .fps-track-label { color: rgba(255,255,255,0.2); }

.fps-track {
  flex: 1;
  height: 5px;
  background: #e0e0e5;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}

.product-card.featured .fps-track { background: rgba(255,255,255,0.07); }

.bar-console {
  position: absolute;
  left: 0; top: 0; height: 100%;
  background: #b0b0b8;
  border-radius: 3px;
  /* Width is set inline by JS using the same MAX_FPS scale as the PC bar.
     Default of 11% (60fps / 530fps * 95) shown if JS hasn't initialized. */
  width: 11%;
}

.product-card.featured .bar-console { background: rgba(255,255,255,0.4); }

.bar-pc {
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-blue { background: var(--accent); }
.bar-green { background: #30d158; }
.bar-white { background: rgba(255,255,255,0.75); }

.fps-num {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
  line-height: 1.25;
  white-space: nowrap;
}

/* Capped-FPS indicator: small lock icon next to the number.
   Designed to fit the same 52px column as a normal "194-237 fps" reading. */
.fps-capped {
  cursor: help;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  border-bottom: 1px dotted currentColor;
  line-height: 1.25;
}
.fps-cap-icon {
  width: 9px;
  height: 11px;
  flex-shrink: 0;
  align-self: center;
  opacity: 0.7;
}

/* PC-only indicator: replaces the solid console bar with a dashed empty track.
   Visual difference signals "no console comparison available"; tooltip explains. */
.fps-track-pc-only {
  background: transparent !important;
  border: 1px dashed var(--text-tertiary);
  opacity: 0.45;
  cursor: help;
  box-sizing: border-box;
}
.product-card.featured .fps-track-pc-only,
.pdp-page--max .fps-track-pc-only {
  border-color: rgba(255,255,255,0.4);
}

.product-card.featured .fps-num { color: rgba(255,255,255,0.3); }

/* Card actions */
.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  flex-wrap: wrap;
}

.product-card.featured .card-actions { margin-top: 28px; }

.btn-get-started {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: gap 0.18s;
  white-space: nowrap;
  text-decoration: none;
}

.btn-get-started:hover { gap: 8px; }
.product-card.featured .btn-get-started { color: rgba(255,255,255,0.7); }

.btn-compare {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--light-gray);
  border-radius: 980px;
  cursor: pointer;
  padding: 5px 12px;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-compare:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-compare.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-compare.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.product-card.featured .btn-compare {
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
}

.product-card.featured .btn-compare:hover {
  border-color: rgba(255,255,255,0.6);
  color: rgba(255,255,255,0.8);
}

.product-card.featured .btn-compare.selected {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  color: white;
}

/* Compare bar */
.compare-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: var(--black);
  color: white;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.2);
}

.compare-bar.visible { transform: translateY(0); }

.compare-bar-slots {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.compare-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  min-width: 130px;
}

.compare-slot.filled {
  border-color: rgba(255,255,255,0.3);
  color: white;
}

.compare-slot-name {
  font-weight: 500;
  flex: 1;
}

.compare-slot-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
}

.compare-slot-remove:hover { color: white; }

.compare-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-compare-now {
  background: white;
  color: var(--black);
  border: none;
  border-radius: 980px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.btn-compare-now:hover { opacity: 0.85; }
.btn-compare-now:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-clear-compare {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: color 0.15s;
}

.btn-clear-compare:hover { color: white; }

/* Comparison modal — frosted glass popup */
.compare-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.compare-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.compare-modal {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.compare-overlay.open .compare-modal {
  transform: translateY(0) scale(1);
}

.compare-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.compare-modal-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--black);
}

.compare-modal-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
  font-weight: 300;
}

.btn-close-compare {
  background: var(--off-white);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s;
  flex-shrink: 0;
}

.btn-close-compare:hover { background: var(--light-gray); }

.compare-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* System header row */
.cm-system-headers {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--divider);
  background: var(--off-white);
  padding: 20px 28px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.cm-system-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cm-system-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.cm-system-name {
  font-family: 'DM Serif Display', serif;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--black);
  line-height: 1;
}

.cm-system-price {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 300;
  margin-top: 2px;
}

/* Sections */
.cm-section {
  padding: 0 28px;
}

.cm-section-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 0;
}

.cm-row {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--divider);
  align-items: start;
}

.cm-row:last-child { border-bottom: none; }

.cm-label {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 12px 0;
  font-weight: 400;
  align-self: center;
}

.cm-val {
  font-size: 13px;
  color: var(--text);
  padding: 12px 12px 12px 0;
  font-weight: 400;
  align-self: center;
}

.cm-val.best {
  color: #30d158;
  font-weight: 500;
}

.cm-val.worst {
  color: var(--text-tertiary);
}

/* FPS bar in compare */

/* Analysis box */
.cm-analysis {
  margin: 0 28px 24px;
  background: var(--off-white);
  border-radius: 12px;
  padding: 18px 20px;
}

.cm-analysis-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.cm-analysis-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cm-point {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  align-items: flex-start;
}

.cm-point-icon {
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  width: 16px;
}

/* Power draw indicator */


/* Parts list popup — same style as comparison modal */
.parts-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.parts-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.parts-drawer {
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 580px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.parts-overlay.open .parts-drawer {
  transform: translateY(0) scale(1);
}

.parts-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.parts-drawer-title {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--black);
  line-height: 1.1;
}

.parts-drawer-price {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 300;
  margin-top: 3px;
}

.btn-close-parts {
  background: var(--off-white);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background 0.15s;
  flex-shrink: 0;
}

.btn-close-parts:hover { background: var(--light-gray); }

.parts-drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0 8px;
}

.parts-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  padding: 10px 28px;
  gap: 16px;
  border-bottom: 1px solid var(--divider);
}

.parts-item:last-child { border-bottom: none; }

.parts-item-cat {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  flex-shrink: 0;
  padding-top: 1px;
}

.parts-item-name {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}

/* Parts list button on cards */
.btn-parts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: color 0.15s;
  white-space: nowrap;
}

.btn-parts:hover { color: var(--text-secondary); }

/* Inside fps-below-bars, Parts pill matches the tooltip pill style */
.fps-below-bars .btn-parts {
  border: 1px solid var(--light-gray);
  border-radius: 980px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  touch-action: manipulation;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fps-below-bars .btn-parts:hover,
.fps-below-bars .btn-parts:active {
  border-color: var(--mid-gray);
  color: var(--text);
  background: var(--off-white);
}
.product-card.featured .btn-parts { color: rgba(255,255,255,0.25); }
.product-card.featured .btn-parts:hover { color: rgba(255,255,255,0.5); }

/* Featured bullets */
.feat-bullets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }

.feat-bullet {
  display: flex;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  align-items: flex-start;
}

.feat-bullet-icon {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 8px;
  color: rgba(255,255,255,0.4);
  margin-top: 1px;
}

/* VERSUS */
.versus-section { background: var(--off-white); padding: 96px 0; }

.versus-table {
  max-width: 760px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--light-gray);
  overflow: hidden;
}

.versus-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
}

.v-th {
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.v-th.em { color: var(--black); }

.v-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--divider);
}

.v-row:last-child { border-bottom: none; }

.v-cell {
  padding: 14px 22px;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.v-cell.feature { font-weight: 400; color: var(--text); }
.v-cell.em { color: var(--text); font-weight: 400; }

.check { color: #30d158; }
.cross { color: var(--text-tertiary); }

/* GUIDE */
.guide-section { padding: 96px 0; background: var(--white); }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 780px;
  margin: 0 auto;
}

.guide-card { background: var(--white); padding: 40px 36px; }

.guide-for {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.guide-q {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 20px;
  line-height: 1.3;
}

.guide-recs { display: flex; flex-direction: column; gap: 8px; }

.guide-rec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--off-white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: inherit;
}

.guide-rec:hover { background: var(--light-gray); }

.rec-name { font-size: 14px; font-weight: 500; color: var(--black); display: block; margin-bottom: 2px; }
.rec-note { font-size: 12px; color: var(--text-tertiary); font-weight: 300; }
.rec-price { font-size: 13px; font-weight: 400; color: var(--text-secondary); }

/* PICKS */
.picks-section { background: var(--off-white); padding: 72px 0; content-visibility: auto; contain-intrinsic-size: 0 600px; }

.picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
}

.pick-cell { background: var(--white); padding: 32px 24px; text-align: center; }

.pick-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.pick-name {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 4px;
}

.pick-price { font-size: 13px; color: var(--text-secondary); font-weight: 300; margin-bottom: 14px; }

.pick-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* FOOTER */
footer {
  background: var(--off-white);
  border-top: 1px solid var(--divider);
  padding: 56px 24px 40px;
  text-align: center;
}

.footer-inner {
  max-width: 720px;
  margin: 0 auto;
}

.footer-brand {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--black);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* Primary nav links */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }

/* Policy links — smaller, more muted */
.footer-policies {
  display: flex;
  justify-content: center;
  gap: 4px 18px;
  list-style: none;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.footer-policies a {
  font-size: 11px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-policies a:hover { color: var(--text-secondary); }

.footer-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 auto 24px;
  max-width: 400px;
}

.footer-note {
  font-size: 11px;
  color: var(--text-tertiary);
  max-width: 560px;
  margin: 0 auto 12px;
  line-height: 1.65;
}

.footer-copyright {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ANIMATIONS */
@keyframes fpsRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 2.2s cubic-bezier(0.16, 1, 0.3, 1), transform 2.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-up.visible { opacity: 1; transform: none; }

/* RESPONSIVE */
/* ─── MOBILE ─── */
@media (max-width: 860px) {

  /* Nav — hide text links, show hamburger-free mobile nav */
  .nav-links { gap: 14px; }
  .nav-links li:not(:last-child):not(:nth-last-child(2)) { display: none; }

  /* Layouts */
  .why-grid, .products-grid { grid-template-columns: 1fr; }
  .product-card.featured { grid-template-columns: 1fr; gap: 36px; padding: 36px 24px; }
  .guide-grid { grid-template-columns: 1fr; }
  .picks-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { flex-wrap: wrap; }
  .stat { max-width: 50%; }

  /* Card actions — stack vertically so compare button is always visible */
  .card-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .btn-compare { width: 100%; justify-content: center; }
  .btn-get-started { width: 100%; justify-content: center; padding: 10px 0; }
  .btn-parts { margin-left: 0; }

  /* Compare bar — stack vertically, full width button */
  .compare-bar {
    flex-direction: column;
    padding: 14px 16px 20px;
    gap: 12px;
  }
  .compare-bar-slots {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .compare-slot {
    flex: 1;
    min-width: calc(50% - 4px);
    min-height: 40px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .compare-bar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .btn-compare-now {
    flex: 1;
    text-align: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* Compare modal — full screen on mobile */
  .compare-overlay { padding: 0; align-items: flex-end; }
  .compare-modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
  }
  .compare-modal-header { padding: 18px 20px 14px; }
  .compare-modal-title { font-size: 18px; }
  .cm-section { padding: 0 16px; }
  .cm-system-headers { padding: 16px; }
  .cm-system-name { font-size: 18px; }
  .cm-analysis { margin: 0 16px 20px; }

  /* Parts drawer */
  .parts-overlay { padding: 0; align-items: flex-end; }
  .parts-drawer {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
  }

  /* Cart drawer full width */
  .cart-drawer { max-width: 100%; }
}

@media (max-width: 540px) {
  .picks-grid { grid-template-columns: 1fr 1fr; }

  /* Versus table — tighten */
  .versus-head, .v-row { grid-template-columns: 1fr 1fr 1fr; }
  .v-cell, .v-th { padding: 10px 8px; font-size: 11px; }

  /* Hero */
  .hero { padding-top: 100px; padding-bottom: 60px; }
  .hero-stats { flex-direction: column; }
  .stat { max-width: 100%; border-right: none; border-bottom: 1px solid var(--divider); }
  .stat:last-child { border-bottom: none; }

  /* Section padding */
  .section-wrap { padding: 0 16px; }
  .why-card, .guide-card { padding: 32px 20px; }
  .product-card { padding: 28px 20px; }
  .product-card.featured { padding: 28px 20px; }

  /* FPS row tighten */
  .fps-row { grid-template-columns: 90px 1fr 52px; gap: 6px; height: 32px; overflow: hidden; }
  .fps-game { font-size: 11px; white-space: nowrap; overflow: hidden; }
  .fps-num { font-size: 10px; }

  /* Compare modal scrollable table */
  .compare-modal-body { -webkit-overflow-scrolling: touch; }
  .cm-row, .cm-system-headers { overflow-x: auto; }
}


/* Shopify cart additions */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 400px;
  background: var(--white);
  box-shadow: -8px 0 48px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-overlay.open .cart-drawer { transform: translateX(0); }
.cart-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid var(--divider); }
.cart-drawer-title { font-family: 'DM Serif Display', serif; font-size: 20px; letter-spacing: -0.015em; color: var(--black); }
.cart-drawer-subtitle { font-size: 13px; color: var(--text-tertiary); font-weight: 300; margin-top: 2px; }
.btn-close-cart { background: var(--off-white); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background 0.15s; }
.btn-close-cart:hover { background: var(--light-gray); }
.cart-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: 20px; text-align: center; color: var(--text-tertiary); font-size: 14px; }
.cart-item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--divider); }
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex: 1; }
.cart-item-name { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.cart-item-price { font-size: 13px; color: var(--text-secondary); }
.cart-item-remove { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.cart-item-remove:hover { color: var(--text); }
.cart-drawer-footer { padding: 16px 24px 24px; border-top: 1px solid var(--divider); }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 15px; font-weight: 500; margin-bottom: 16px; }
.cart-disclaimer { font-size: 11px; color: var(--text-tertiary); text-align: center; margin-top: 10px; }
.cart-count { background: var(--accent); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; font-weight: 600; display: none; align-items: center; justify-content: center; }
.cart-count.has-items { display: flex; }
nav .nav-cart-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; font-family: inherit; transition: color 0.2s; padding: 0; }
nav .nav-cart-btn:hover { color: var(--text); }
/* Product page, collection page */
.page-content { padding-top: 100px; padding-bottom: 80px; }
.page-title { font-family: 'DM Serif Display', serif; font-size: clamp(36px,5vw,60px); letter-spacing: -0.03em; color: var(--black); margin-bottom: 32px; }
.page-body { font-size:16px; font-weight:300; color:var(--text-secondary); line-height:1.8; max-width:680px; }
.collection-page { padding-top: 100px; padding-bottom: 80px; }
.collection-header { margin-bottom: 48px; text-align: center; }
.collection-title { font-family: 'DM Serif Display', serif; font-size: clamp(36px,5vw,60px); letter-spacing: -0.03em; color: var(--black); margin-bottom: 8px; }
.collection-desc { font-size: 17px; font-weight: 300; color: var(--text-secondary); max-width: 500px; margin: 0 auto; }

/* Collection and search pages can have an odd item count (e.g. 7) which leaves
   empty trailing cells in the 3-column grid. The homepage's gray-bg-with-2px-gap
   technique shows the gray through those empties and looks broken, so on these
   pages we use a white grid background with thin card borders instead. */
.collection-page .products-grid,
.search-page .products-grid {
  background: var(--white);
  gap: 0;
}
.collection-page .products-grid > .product-card,
.search-page .products-grid > .product-card {
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.collection-page .products-grid > .product-card:nth-child(3n),
.collection-page .products-grid > .product-card:last-child,
.search-page .products-grid > .product-card:nth-child(3n),
.search-page .products-grid > .product-card:last-child {
  border-right: none;
}
@media (max-width: 860px) {
  .collection-page .products-grid > .product-card,
  .search-page .products-grid > .product-card {
    border-right: none;
  }
}
.product-page { padding-top: 100px; padding-bottom: 80px; }
.product-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-page-title { font-family: 'DM Serif Display', serif; font-size: clamp(40px,5vw,64px); letter-spacing: -0.03em; color: var(--black); line-height: 1; margin-bottom: 8px; }
.product-page-tagline { font-size: 16px; color: var(--text-tertiary); font-weight: 300; margin-bottom: 20px; }
.product-page-price { font-family: 'DM Serif Display', serif; font-size: 36px; letter-spacing: -0.02em; color: var(--black); margin-bottom: 32px; }
.product-page-desc { font-size: 15px; font-weight: 300; color: var(--text-secondary); line-height: 1.7; margin-bottom: 32px; }
.btn-filled { background: var(--accent); color: white; }
.btn-filled:hover { background: var(--accent-hover); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid rgba(0,113,227,0.35); }
.btn-outline:hover { background: rgba(0,113,227,0.05); border-color: var(--accent); }
.btn-buy-now { background: var(--accent); color: white; border: none; border-radius: 980px; padding: 14px 32px; font-size: 16px; font-weight: 500; cursor: pointer; font-family: inherit; transition: background 0.18s; }
.btn-buy-now:hover { background: var(--accent-hover); }
@media (max-width: 860px) { .product-page-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ─── CHECKOUT / CART PAGE ─── */
.checkout-page {
  min-height: 100vh;
  background: var(--off-white);
  padding-top: 0;
}

.checkout-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 48px;
}

.checkout-back {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}
.checkout-back:hover { color: var(--text); }

.checkout-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--black);
  text-decoration: none;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

/* Items column */
.checkout-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--black);
  margin-bottom: 4px;
}
.checkout-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 300;
  margin-bottom: 32px;
}

.checkout-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: start;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 12px;
  border: 1px solid var(--light-gray);
}

.checkout-item-img {
  border-radius: 10px;
  overflow: hidden;
  background: var(--off-white);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-item-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--off-white);
}

.checkout-item-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}

.checkout-item-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 4px;
}

.checkout-item-variant {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.checkout-item-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.checkout-qty-form { display: flex; }

.checkout-qty {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn {
  width: 32px;
  height: 32px;
  background: var(--off-white);
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  font-family: inherit;
}
.qty-btn:hover { background: var(--light-gray); }

.qty-val {
  width: 36px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-left: 1px solid var(--light-gray);
  border-right: 1px solid var(--light-gray);
  line-height: 32px;
}

.checkout-remove {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
  padding: 0;
}
.checkout-remove:hover { color: #ff3b30; }

.checkout-item-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding-top: 2px;
}

.checkout-price-original {
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: line-through;
}

.checkout-price-final {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--black);
}

.checkout-footnote {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 16px 0 0;
  margin-top: 8px;
}

/* Summary column */
.checkout-summary-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--light-gray);
  padding: 28px;
  position: sticky;
  top: 80px;
}

.checkout-summary-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 20px;
}

.checkout-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.checkout-summary-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 300;
  flex: 1;
  line-height: 1.4;
}

.checkout-summary-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
}

.checkout-discounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.checkout-discount-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

.checkout-discount-val { color: #30d158; font-weight: 500; }

.checkout-summary-divider {
  height: 1px;
  background: var(--divider);
  margin: 16px 0;
}

.checkout-summary-subtotal {
  font-size: 17px;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 6px;
}

.checkout-summary-subtotal .checkout-summary-val {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.checkout-shipping-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}

.checkout-btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--black);
  color: white;
  border: none;
  border-radius: 980px;
  padding: 15px 28px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: opacity 0.18s;
  margin-bottom: 20px;
}
.checkout-btn-main:hover { opacity: 0.85; }

.checkout-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--divider);
}

.checkout-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Discount toggle */
.checkout-discount-toggle {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.checkout-discount-toggle summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.checkout-discount-toggle summary::-webkit-details-marker { display: none; }

.checkout-discount-form { margin-top: 12px; }

.checkout-discount-input-row {
  display: flex;
  gap: 8px;
}

.checkout-discount-input {
  flex: 1;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--off-white);
  outline: none;
  transition: border-color 0.15s;
}
.checkout-discount-input:focus { border-color: var(--accent); }

.checkout-discount-apply {
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}
.checkout-discount-apply:hover { background: var(--light-gray); }

/* Empty state */
.checkout-empty {
  text-align: center;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.checkout-empty-icon {
  width: 80px;
  height: 80px;
  background: var(--white);
  border-radius: 50%;
  border: 1px solid var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.checkout-empty-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--black);
}
.checkout-empty-sub {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 300;
}

@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary-card { position: static; }
  .checkout-item { grid-template-columns: 90px 1fr; }
  .checkout-item-price { grid-column: 2; }
}

@media (max-width: 540px) {
  .checkout-item { grid-template-columns: 1fr; }
  .checkout-item-img { width: 100%; height: 120px; }
}

/* ─── COMPARE MODAL MOBILE SPECIFICS ─── */
@media (max-width: 860px) {
  /* Sticky header conflicts with horizontal scroll container — disable on mobile */
  .cm-system-headers {
    position: static;
  }
  /* Make the scroll wrapper take full width */
  #compareContent > div {
    width: 100%;
  }
  /* Prevent horizontal overflow on small screens */
  .compare-modal {
    max-width: calc(100vw - 32px);
    overflow: hidden;
  }
  .compare-modal-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Tighten modal padding */
  .cm-section { padding: 0 12px; }
  .cm-label { font-size: 11px; padding: 10px 0; }
  .cm-val { font-size: 12px; padding: 10px 8px 10px 0; }
  .cm-system-headers { padding: 14px 12px; }
  .cm-system-name { font-size: 17px; }
  .cm-analysis { margin: 0 12px 16px; padding: 14px 16px; }
  .cm-point { font-size: 12px; }
  .cm-fps-num { width: 46px; font-size: 10px; }
}

/* ─── SEARCH BAR ─── */
.nav-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s, background 0.15s;
  position: relative;
}
.nav-icon-btn:hover { color: var(--text); background: rgba(0,0,0,0.04); }

.search-bar-overlay {
  position: fixed;
  top: 52px; left: 0; right: 0;
  z-index: 190;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  height: calc(100vh - 52px);
}
.search-bar-overlay.open { opacity: 1; pointer-events: all; }

.search-bar-wrap {
  background: var(--white);
  border-bottom: 1px solid var(--divider);
  padding: 12px 24px;
  transform: translateY(-8px);
  transition: transform 0.2s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.search-bar-overlay.open .search-bar-wrap { transform: translateY(0); }

.search-bar-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 980px;
  padding: 10px 16px;
  transition: border-color 0.15s;
}
.search-bar-form:focus-within { border-color: var(--accent); }

.search-bar-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.search-bar-input::placeholder { color: var(--text-tertiary); }

.search-bar-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-size: 14px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.search-bar-close:hover { color: var(--text); }

/* ─── SEARCH PAGE ─── */
.search-page { padding-top: 100px; padding-bottom: 80px; min-height: 70vh; }
.search-header { margin-bottom: 28px; }
.search-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -0.02em;
  color: var(--black);
  line-height: 1.1;
}
.search-form { margin-bottom: 40px; }
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--off-white);
  border: 1px solid var(--light-gray);
  border-radius: 980px;
  padding: 12px 20px;
  max-width: 560px;
  transition: border-color 0.15s;
}
.search-input-wrap:focus-within { border-color: var(--accent); }
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-family: inherit;
  color: var(--text);
  outline: none;
}
.search-input::placeholder { color: var(--text-tertiary); }
.search-submit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  padding: 0;
  transition: color 0.15s;
}
.search-submit:hover { color: var(--accent); }
.search-count { font-size: 13px; color: var(--text-tertiary); margin-bottom: 4px; }
.search-empty { padding: 40px 0; font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
.search-empty a { color: var(--accent); }
.search-suggestions { padding: 20px 0; }
.search-suggestions-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: 12px; }
.search-suggestion-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggestion-pills .filter-pill { text-decoration: none; }

/* ─── PRODUCT DETAIL PAGE ─── */
.pdp-page { padding-top: 88px; padding-bottom: 80px; }

.pdp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 36px;
}
.pdp-breadcrumb a { color: var(--text-tertiary); text-decoration: none; transition: color 0.15s; }
.pdp-breadcrumb a:hover { color: var(--text); }
.pdp-breadcrumb span { color: var(--text-tertiary); }

.pdp-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: start;
}

/* Left column */
.pdp-badge { margin-bottom: 12px; }

.pdp-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--black);
  margin-bottom: 10px;
}

.pdp-tagline {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.5;
}

/* Body description below the tagline. The container holds rich HTML written
   in the Shopify editor (paragraphs, headers, lists, bold, italic, links).
   Children get tuned typography so the description reads as body copy and
   stays visually subordinate to the headline tagline above. */
.pdp-description {
  margin-bottom: 28px;
  max-width: 56ch;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
}
.pdp-description > *:first-child { margin-top: 0; }
.pdp-description > *:last-child { margin-bottom: 0; }
.pdp-description p {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary);
}
.pdp-description h2,
.pdp-description h3,
.pdp-description h4 {
  font-family: 'DM Serif Display', serif;
  letter-spacing: -0.01em;
  color: var(--black);
  font-weight: 400;
  margin: 24px 0 8px;
  line-height: 1.25;
}
.pdp-description h2 { font-size: 24px; }
.pdp-description h3 { font-size: 19px; }
.pdp-description h4 { font-size: 16px; }
.pdp-description strong, .pdp-description b {
  font-weight: 600;
  color: var(--text);
}
.pdp-description em, .pdp-description i { font-style: italic; }
.pdp-description a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.pdp-description a:hover { opacity: 0.8; }
.pdp-description ul,
.pdp-description ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.pdp-description li {
  margin-bottom: 6px;
  line-height: 1.55;
}
.pdp-description blockquote {
  margin: 14px 0;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--divider);
  font-style: italic;
}
.pdp-description hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 24px 0;
}

/* Dark variant for the Max PDP background. */
.pdp-page--max .pdp-description,
.pdp-page--max .pdp-description p,
.pdp-page--max .pdp-description li {
  color: rgba(255,255,255,0.55);
}
.pdp-page--max .pdp-description h2,
.pdp-page--max .pdp-description h3,
.pdp-page--max .pdp-description h4 { color: #f5f5f7; }
.pdp-page--max .pdp-description strong,
.pdp-page--max .pdp-description b { color: rgba(255,255,255,0.8); }
.pdp-page--max .pdp-description blockquote { border-left-color: rgba(255,255,255,0.2); }
.pdp-page--max .pdp-description hr { border-top-color: rgba(255,255,255,0.15); }

.pdp-price {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 40px;
}

.pdp-section { margin-bottom: 36px; }
.pdp-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

.pdp-specs { margin-bottom: 0; }
.pdp-specs .spec-row { padding: 11px 0; }
.pdp-specs .spec-key { font-size: 14px; }
.pdp-specs .spec-val { font-size: 14px; }

.pdp-parts { border-top: 1px solid var(--divider); }
.pdp-part-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.pdp-part-cat {
  font-size: 12px;
  color: var(--text-tertiary);
  width: 100px;
  flex-shrink: 0;
}
.pdp-part-name { font-size: 14px; color: var(--text); }

.pdp-why { display: flex; flex-direction: column; gap: 12px; }
.pdp-why-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.5;
}
.pdp-why-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,113,227,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Right column */
.pdp-fps-card {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 16px;
  border: 1px solid var(--light-gray);
}

.pdp-fps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 8px;
}

.pdp-fps-res {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.pdp-fps-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.pdp-fps-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
  font-size: 11px;
  color: var(--text-tertiary);
}

.pdp-buy-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 12px;
}

.pdp-buy-price {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 4px;
}

.pdp-buy-title {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}

.pdp-atc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 980px;
  padding: 14px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s;
  margin-bottom: 10px;
}
.pdp-atc-btn:hover { background: var(--accent-hover); }
.pdp-atc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pdp-atc-btn--sold-out, .pdp-atc-btn--sold-out:hover {
  background: var(--off-white);
  color: var(--text-tertiary);
  cursor: not-allowed;
  pointer-events: none;
}

.pdp-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--black);
  color: white;
  border: none;
  border-radius: 980px;
  padding: 14px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.18s;
  margin-bottom: 16px;
}
.pdp-checkout-btn:hover { opacity: 0.85; }

.pdp-shipping-note {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}

.pdp-back-link {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  padding: 4px 0;
}
.pdp-back-link:hover { color: var(--text); }

@media (max-width: 860px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 36px; }
  .pdp-right { order: 1; }  /* fps/buy below specs on mobile */
  .pdp-fps-card, .pdp-buy-card { position: static; }
  .search-page { padding-top: 80px; }
}

/* ─── PERFORMANCE: reduce CLS and improve font loading ─── */
html { font-display: swap; }
.product-name, .hero-headline, .section-title, .pdp-title, .footer-brand,
.stat-num, .product-price, .pick-name, .guide-q, .pdp-price, .pdp-buy-price,
.checkout-logo, .checkout-title, .compare-modal-title, .parts-drawer-title {
  font-display: optional;
}
/* Contain layout shift from images */
img { content-visibility: auto; }
/* Custom game input focus */
#cmGameInput:focus { border-color: var(--accent); background: var(--white); }
/* Custom game estimate area */
.cm-custom-game { border-top: 1px solid var(--divider); }

/* ─── CORE WEB VITALS OPTIMISATIONS ─── */

/* content-visibility: defer rendering of below-fold sections */
.why-section,
.versus-section,
.guide-section,

/* Avoid layout shift from font swap — reserve space with line-height */

/* Font display swap for fallback → web font transition */
@font-face {
  font-family: 'DM Sans';
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  font-display: swap;
}

/* will-change applied only when element is about to animate, not globally
   (Applying to hundreds of .bar-pc elements wastes GPU memory) */
.bar-pc.animating { will-change: width; }

/* Reduce paint area for fixed elements */
nav, .compare-bar, .cart-overlay, .parts-overlay, .compare-overlay, .search-bar-overlay {
  isolation: isolate;
}

/* Font size adjustment to reduce CLS during font swap */
@font-face {
  font-family: 'DM Sans';
  font-display: swap;
  size-adjust: 100%;
}
@font-face {
  font-family: 'DM Serif Display';
  font-display: swap;
  size-adjust: 105%;
}

/* ─── FPS EXPLAINER BOX ─── */
.fps-explainer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0f5ff;
  border: 1px solid rgba(0,113,227,0.15);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 32px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.fps-explainer-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.8;
}

.fps-explainer-body {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.6;
}

.fps-explainer-body strong {
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}

/* ─── FPS TOOLTIP ─── */
.fps-label-group {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.fps-tooltip-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--light-gray);
  border-radius: 980px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1.6;
}

.fps-tooltip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,113,227,0.04);
}

.fps-tooltip-box {
  display: none;
  position: absolute;
  z-index: 9999;
  width: 290px;
  background: var(--black);
  color: rgba(255,255,255,0.82);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
}



.fps-tooltip-box.visible {
  display: block;
  pointer-events: auto;
  animation: tooltipIn 0.15s ease;
}

.fps-tooltip-box strong {
  display: block;
  font-weight: 500;
  color: white;
  margin-bottom: 6px;
  font-size: 12px;
}

@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Keep tooltip open on hover */

@media (max-width: 860px) {
  .fps-tooltip-box {
    width: 240px;
    font-size: 11px;
  }
}

/* Tooltip button works inside pdp-fps-header too */
.pdp-fps-header .fps-label-group {
  align-items: center;
}
.pdp-fps-header .fps-tooltip-btn {
  font-size: 10px;
  padding: 2px 8px;
}

/* ─── FPS HEADER CLEAN — centred label + meta row ─── */
.fps-header-clean {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.fps-res-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  text-align: center;
}

.product-card.featured .fps-res-label { color: rgba(255,255,255,0.25); }

.fps-header-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Tooltip pill centred below the bars */
.fps-tooltip-bottom {
  display: block;
  margin: 10px auto 0;
  text-align: center;
}

/* Tooltip box: position relative to fps-section when pill is at bottom */
.fps-tooltip-bottom + .fps-tooltip-box {
  position: absolute;
  bottom: calc(100% + 10px);
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}

.fps-tooltip-bottom + .fps-tooltip-box::before {
  top: auto;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 1px 1px 0 rgba(255,255,255,0.06);
}

/* Make fps-section position:relative so tooltip can anchor to it */

/* Tooltip + Parts row below fps bars */
.fps-below-bars {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Featured (Max) card — pills on dark bg need a bit more space */
.product-card.featured .fps-below-bars {
  gap: 10px;
  margin-top: 16px;
}

/* Centered variant — sits inside fps-section under the bars */
.fps-below-bars--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
}

/* On featured dark card, center the pills with light colors */
.product-card.featured .fps-below-bars--centered {
  margin-top: 18px;
}

/* ─── EDITION PICKER (Standard / RGB) ─── */
.pdp-edition-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.pdp-edition-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  position: relative;
}

.pdp-edition-btn:hover {
  border-color: var(--mid-gray);
}

.pdp-edition-btn.active {
  border-color: var(--accent);
  background: rgba(0,113,227,0.03);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
}

/* Checkmark on active */
.pdp-edition-btn.active::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Colour dot */
.edition-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.08);
}

.edition-dot-standard {
  background: linear-gradient(135deg, #e8e8ed 0%, #c8c8cc 100%);
}

.edition-dot-rgb {
  background: conic-gradient(
    #ff4444 0deg,
    #ff8800 51deg,
    #ffdd00 102deg,
    #44cc44 153deg,
    #0088ff 204deg,
    #8844ff 255deg,
    #ff44cc 306deg,
    #ff4444 360deg
  );
}

/* Text stack */
.edition-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.edition-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

.edition-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: rgba(0,113,227,0.08);
  border-radius: 980px;
  padding: 1px 7px;
  white-space: nowrap;
}

.edition-desc {
  font-size: 12px;
  font-weight: 300;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edition-price {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  padding-right: 28px; /* space for checkmark */
}

.pdp-edition-btn.active .edition-price {
  padding-right: 36px;
}

/* ═══════════════════════════════════════════════════════
   PDP PERFORMANCE ESTIMATOR SECTION
   ═══════════════════════════════════════════════════════ */

.pdp-estimator-section {
  background: var(--off-white);
  border-top: 1px solid var(--divider);
  padding: 80px 0 96px;
}

.pdp-estimator-header {
  text-align: center;
  margin-bottom: 40px;
}

.pdp-estimator-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px, 3.5vw, 42px);
  letter-spacing: -0.025em;
  color: var(--black);
  line-height: 1.1;
  margin-bottom: 10px;
}

.pdp-estimator-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.pdp-estimator-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: 32px 36px 36px;
  max-width: 720px;
  margin: 0 auto;
}

/* Input rows */
.pdp-estimator-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.pdp-estimator-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pdp-estimator-row--controls {
  align-items: center;
}

.pdp-est-input {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
}

.pdp-est-input:focus {
  border-color: var(--accent);
}

.pdp-est-select {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s;
  cursor: pointer;
}

.pdp-est-select:focus {
  border-color: var(--accent);
}

.pdp-est-select--sm {
  flex: 0 0 auto;
  min-width: 90px;
}

.pdp-est-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.pdp-est-btn:hover {
  background: var(--accent-hover);
}

/* Result area */
.pdp-est-result {
  min-height: 0;
}

.pdp-est-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 8px 0;
}

.pdp-est-output {
  border-top: 1px solid var(--divider);
  padding-top: 24px;
}

.pdp-est-game-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.pdp-est-game-name {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--black);
  line-height: 1.1;
}

.pdp-est-rating {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.pdp-est-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  font-weight: 300;
}

/* Big FPS number */
.pdp-est-fps-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}

.pdp-est-fps-num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(48px, 8vw, 72px);
  letter-spacing: -0.04em;
  color: var(--black);
  line-height: 1;
}

.pdp-est-fps-unit {
  font-size: 16px;
  font-weight: 300;
  color: var(--text-tertiary);
  padding-bottom: 6px;
}

/* Bar */
.pdp-est-bar-track {
  position: relative;
  height: 8px;
  background: var(--light-gray);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0;
}

.pdp-est-bar-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 4px;
}

/* Console marker — position set inline by JS based on dynamic ceiling */
.pdp-est-bar-console {
  position: absolute;
  left: 15%; /* fallback; overridden inline */
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(0,0,0,0.22);
  border-radius: 1px;
}

/* Legend row: scale labels + console label anchored under the marker */
.pdp-est-bar-legend {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: 16px;
  height: 14px;
}

.pdp-est-bar-legend span.scale-zero {
  position: absolute;
  left: 0;
}

.pdp-est-bar-legend span.scale-max {
  position: absolute;
  right: 0;
}

/* Console label sits directly under the marker line — position set inline by JS */
.pdp-est-bar-legend span.scale-console {
  position: absolute;
  left: 15%; /* fallback; overridden inline */
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(0,0,0,0.35);
}

.pdp-est-note {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.55;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
  margin-top: 4px;
}

/* Responsive */
@media (max-width: 680px) {
  .pdp-estimator-card {
    padding: 22px 18px 28px;
  }
  .pdp-estimator-row {
    flex-direction: column;
  }
  .pdp-est-select--sm {
    min-width: unset;
    width: 100%;
  }
  .pdp-est-fps-num {
    font-size: clamp(40px, 12vw, 60px);
  }
}

/* ── PDP reveal animation ─────────────────────────────────────────────────── */
@keyframes pdp-float-in {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pdp-reveal {
  opacity: 0;
  animation: pdp-float-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--pdp-delay, 0ms);
}

/* Estimator section — held until scrolled into view by JS */
.pdp-estimator-section.pdp-reveal {
  animation: none;  /* JS adds .pdp-revealed to trigger */
}
.pdp-estimator-section.pdp-revealed {
  animation: pdp-float-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Max product page — dark inversion ───────────────────────────────────── */
.pdp-page--max {
  background: #000;
  color: #f5f5f7;
  min-height: 100vh;
}

/* Override CSS vars locally so all child components inherit correct colours */
.pdp-page--max {
  --white:          #111;
  --off-white:      #1a1a1a;
  --divider:        rgba(255,255,255,0.10);
  --light-gray:     rgba(255,255,255,0.15);
  --mid-gray:       rgba(255,255,255,0.25);
  --text:           #f5f5f7;
  --text-secondary: rgba(255,255,255,0.65);
  --text-tertiary:  rgba(255,255,255,0.35);
  --accent:         #f5f5f7;
  --accent-hover:   #ffffff;
}

/* Breadcrumb */
.pdp-page--max .pdp-breadcrumb a,
.pdp-page--max .pdp-breadcrumb span { color: rgba(255,255,255,0.40); }
.pdp-page--max .pdp-breadcrumb a:hover { color: #f5f5f7; }

/* Hero */
.pdp-page--max .pdp-title       { color: #f5f5f7; }
.pdp-page--max .pdp-tagline     { color: rgba(255,255,255,0.55); }
.pdp-page--max .pdp-price       { color: #f5f5f7; }
.pdp-page--max .product-badge   { color: rgba(255,255,255,0.40); border-color: rgba(255,255,255,0.18); background: transparent; }

/* Specs */
.pdp-page--max .pdp-section-label { color: rgba(255,255,255,0.35); }
.pdp-page--max .spec-row          { border-bottom-color: rgba(255,255,255,0.08); }
.pdp-page--max .spec-key          { color: rgba(255,255,255,0.40); }
.pdp-page--max .spec-val          { color: #f5f5f7; }

/* Why bullets */
.pdp-page--max .pdp-why-item      { color: rgba(255,255,255,0.70); }
.pdp-page--max .pdp-why-icon      { color: #f5f5f7; border-color: rgba(255,255,255,0.20); }

/* FPS card */
.pdp-page--max .pdp-fps-card      { background: #111; border-color: rgba(255,255,255,0.10); }
.pdp-page--max .fps-res-label     { color: rgba(255,255,255,0.40); }
.pdp-page--max .fps-game          { color: rgba(255,255,255,0.60); }
.pdp-page--max .fps-num           { color: rgba(255,255,255,0.75); }
.pdp-page--max .fps-track         { background: rgba(255,255,255,0.08); }
.pdp-page--max .fps-tooltip-btn   { color: rgba(255,255,255,0.35); }
.pdp-page--max .fps-tooltip-btn:hover { color: rgba(255,255,255,0.65); }
.pdp-page--max .pdp-fps-note      { color: rgba(255,255,255,0.45); border-top-color: rgba(255,255,255,0.08); }

/* Bar colours — use white for max build bar */
.pdp-page--max .bar-pc    { background: #f5f5f7 !important; }
.pdp-page--max .bar-console { background: rgba(255,255,255,0.14); }

/* Buy card */
.pdp-page--max .pdp-buy-card      { background: #111; border-color: rgba(255,255,255,0.10); }
.pdp-page--max .pdp-buy-price     { color: #f5f5f7; }
.pdp-page--max .pdp-buy-title     { color: rgba(255,255,255,0.50); }
.pdp-page--max .pdp-shipping-note { color: rgba(255,255,255,0.35); }
.pdp-page--max .pdp-back-link     { color: rgba(255,255,255,0.35); }
.pdp-page--max .pdp-back-link:hover { color: #f5f5f7; }

/* Edition picker */
.pdp-page--max .pdp-edition-btn {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.65);
}
.pdp-page--max .pdp-edition-btn:hover { border-color: rgba(255,255,255,0.30); }
.pdp-page--max .pdp-edition-btn.active {
  background: #222;
  border-color: rgba(255,255,255,0.50);
  color: #f5f5f7;
}
/* Max-page checkmark: --accent on Max is white, so swap the SVG stroke to black
   so the check is visible inside the white circle. */
.pdp-page--max .pdp-edition-btn.active::after {
  background: #f5f5f7 url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8l3 3 6-6' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.pdp-page--max .edition-price { color: rgba(255,255,255,0.45); }

/* CTA buttons — inverted: white bg, black text */
.pdp-page--max .pdp-atc-btn {
  background: #f5f5f7;
  color: #000;
}
.pdp-page--max .pdp-atc-btn:hover { background: #fff; }
.pdp-page--max .pdp-checkout-btn {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: #f5f5f7;
}
.pdp-page--max .pdp-checkout-btn:hover { border-color: #f5f5f7; }

/* Estimator section */
.pdp-page--max .pdp-estimator-section {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.pdp-page--max .pdp-estimator-title { color: #f5f5f7; }
.pdp-page--max .pdp-estimator-desc  { color: rgba(255,255,255,0.50); }
.pdp-page--max .pdp-estimator-card  { background: #111; border-color: rgba(255,255,255,0.10); }
.pdp-page--max .pdp-est-input,
.pdp-page--max .pdp-est-select {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.15);
  color: #f5f5f7;
}
.pdp-page--max .pdp-est-input:focus,
.pdp-page--max .pdp-est-select:focus { border-color: rgba(255,255,255,0.45); }
.pdp-page--max .pdp-est-input::placeholder { color: rgba(255,255,255,0.25); }
.pdp-page--max .pdp-est-btn {
  background: #f5f5f7;
  color: #000;
}
.pdp-page--max .pdp-est-btn:hover { background: #fff; }
.pdp-page--max .pdp-est-output {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.10);
}
.pdp-page--max .pdp-est-game-name { color: #f5f5f7; }
.pdp-page--max .pdp-est-meta      { color: rgba(255,255,255,0.35); }
.pdp-page--max .pdp-est-fps-num   { color: #f5f5f7; }
.pdp-page--max .pdp-est-fps-unit  { color: rgba(255,255,255,0.40); }
.pdp-page--max .pdp-est-bar-track { background: rgba(255,255,255,0.08); }
.pdp-page--max .pdp-est-bar-console { background: rgba(255,255,255,0.25); }
.pdp-page--max .pdp-est-bar-legend span { color: rgba(255,255,255,0.30); }
.pdp-page--max .pdp-est-note      { color: rgba(255,255,255,0.30); border-top-color: rgba(255,255,255,0.08); }
.pdp-page--max .pdp-est-empty     { color: rgba(255,255,255,0.30); }

/* ── Max PDP — missing text colour inversions ─────────────────────────────── */

/* Edition picker: name, desc, badge */
.pdp-page--max .edition-name                { color: #f5f5f7; }
.pdp-page--max .edition-desc                { color: rgba(255,255,255,0.40); }
.pdp-page--max .edition-badge               { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.10); }

/* Edition dot border (light border on dark card) */
.pdp-page--max .edition-dot                 { border-color: rgba(255,255,255,0.15); }

/* FPS legend (Console / Max label row) */
.pdp-page--max .fps-legend                  { color: rgba(255,255,255,0.35); }
.pdp-page--max .dot-console                 { background: rgba(255,255,255,0.35); }

/* Eyebrow label ("No Compromise · 1440p / 4K") */
.pdp-page--max .eyebrow                     { color: rgba(255,255,255,0.45); }

/* FPS estimator bar fill — white on dark */
.pdp-page--max .pdp-est-bar-fill            { background: #f5f5f7 !important; }

/* FPS estimator rating pill */
.pdp-page--max .pdp-est-rating              { color: #f5f5f7; }

/* Scale legend labels (0 fps / console / max label under bar) */
.pdp-page--max .pdp-est-bar-legend span.scale-zero,
.pdp-page--max .pdp-est-bar-legend span.scale-max    { color: rgba(255,255,255,0.30); }
.pdp-page--max .pdp-est-bar-legend span.scale-console { color: rgba(255,255,255,0.40); }

/* ── Max PDP — header inversion ───────────────────────────────────────────── */
.pdp-page--max nav {
  background: rgba(8,8,8,0.80);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(255,255,255,0.07);
}
.pdp-page--max .nav-logo                  { color: #f5f5f7; }
.pdp-page--max .nav-links a               { color: rgba(255,255,255,0.55); }
.pdp-page--max .nav-links a:hover         { color: #f5f5f7; }
.pdp-page--max .nav-cta                   { color: rgba(255,255,255,0.90) !important; }
.pdp-page--max .nav-icon-btn              { color: rgba(255,255,255,0.55); }
.pdp-page--max .nav-icon-btn:hover        { color: #f5f5f7; background: rgba(255,255,255,0.07); }
.pdp-page--max nav .nav-cart-btn          { color: rgba(255,255,255,0.55); }
.pdp-page--max nav .nav-cart-btn:hover    { color: #f5f5f7; }


/* ── Philosophy page ─────────────────────────────────────────────────────── */
.section-wrap--narrow {
  max-width: 740px;
}

.philosophy-header {
  padding: 80px 0 64px;
}

.philosophy-title {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(48px, 7vw, 80px);
  line-height: 1.0;
  color: var(--text);
  margin: 8px 0 20px;
  letter-spacing: -0.02em;
}

.philosophy-intro {
  font-size: 17px;
  color: var(--text-secondary);
  margin: 0;
}

/* Pull banner */
.philosophy-pull-banner {
  background: var(--black);
  padding: 56px 24px;
  margin-bottom: 0;
}

.philosophy-pull-quote {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.3;
  color: var(--white);
  margin: 0;
  font-weight: 400;
}

/* Body */
.philosophy-body {
  padding: 0 0 40px;
}

.philosophy-block {
  padding: 56px 0;
  border-bottom: 1px solid var(--divider);
}

.philosophy-block-meta {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 20px;
}

.philosophy-block-num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  flex-shrink: 0;
}

.philosophy-block-heading {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.philosophy-block p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0;
}

/* Callout stat — bold statement within a block */
.philosophy-callout-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 28px 0;
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  background: var(--off-white);
}

.philosophy-callout-stat__line {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--text);
  line-height: 1.3;
}

.philosophy-callout-stat__sub {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Closing section */
.philosophy-closing {
  background: var(--black);
  padding: 80px 24px 100px;
  margin-top: 0;
}

.philosophy-closing-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.philosophy-closing-statement {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.philosophy-closing-body {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin: 0 0 40px;
  max-width: 560px;
}

@media (max-width: 860px) {
  .philosophy-title { font-size: clamp(40px, 10vw, 60px); }
  .philosophy-pull-banner { padding: 40px 20px; }
  .philosophy-block { padding: 40px 0; }
  .philosophy-block-meta { gap: 14px; }
  .philosophy-closing { padding: 60px 20px 80px; }
}

/* ── Hero philosophy callout ─────────────────────────────────────────────── */
.hero-philosophy-callout {
  margin: 28px auto 0;
  max-width: 480px;
  opacity: 0;
  animation: fadeUp 2.8s 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-philosophy-callout__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  text-decoration: none;
  background: var(--white);
  transition: border-color 0.2s, background 0.2s;
  text-align: left;
}

.hero-philosophy-callout__link:hover {
  border-color: var(--text-secondary);
  background: #f5f5f7;
}

.hero-philosophy-callout__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.hero-philosophy-callout__text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}

.hero-philosophy-callout__cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── PDP philosophy callout ──────────────────────────────────────────────── */
.pdp-philosophy-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--divider);
  border-radius: 12px;
  text-decoration: none;
  background: var(--white);
  transition: border-color 0.2s, background 0.2s;
}

.pdp-philosophy-callout:hover {
  border-color: var(--text-secondary);
  background: #f5f5f7;
}

.pdp-philosophy-callout__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.pdp-philosophy-callout__text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}

.pdp-philosophy-callout__cta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Max page dark variant */
.pdp-page--max .pdp-philosophy-callout {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.pdp-page--max .pdp-philosophy-callout:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
}

.pdp-page--max .pdp-philosophy-callout__text,
.pdp-page--max .pdp-philosophy-callout__cta {
  color: rgba(255,255,255,0.7);
}