/* template.css overrides
================================*/
.banner { padding-top: 41.667%; }
.banner-img {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-height: 300px;
  background: url(../imgs/hero.jpg) no-repeat 0 0;
  background-size: 289.722222%;
}
.header2021-logo-img > img { width: 102px !important; height: auto; }
.price { margin: 0 0 0.825em 0; }
.price-save-dollar,.price-save-label,.price-save-percent { position: relative; background: #cc4e00; color: #fff; font-weight: 700; font-size: 14px; }
.price-save-percent:after { left: 100%; border-bottom: 19px solid #cc4e00; border-right: 10px solid transparent; margin-bottom: 0; }
.price-save-label { padding: 2px 0 1px 6px; }
.price-save-dollar { padding: 2px 0 1px 2px; }
.price-save-percent { padding: 2px 6px 1px 2px; }
.price-save-label:before,.price-save-percent:after { content: ''; position: absolute; bottom: 0; width: 0; height: 0; }
.item-cell { border-bottom: none; }
.item-promo { margin-top: 1em; }
.item-promo-code { border-color: #888; }
.item-promo-title span { color: #333; }
.item-promo-info { color: #cc4e00; }
.item-promo-code { padding: 1.5em 5px 1em 5px; height: auto; color: #cc4e00; }
.item-promo-code-save { display: inline; }
li.mir { display: none; }
.instantSavings, .mir { display: block; }
.finalPrice { font-size: 1.6em; }
.instantSavings { font-size: 0.925em; }
.finalPrice, .instantSavings { color: #000; }
.shipping { visibility: hidden; }
.mir { font-size: 1em; margin: 0; color: #016B04; }
.header .logo { width: 125px; }
.items-grid:after { background: none; }
.item-title a { font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.item-container:hover { opacity: 1; filter: alpha(opacity=100); transition: all 0.2s ease-in-out; }
/* template.css's .main-title/.main-title-text are built for a light-theme
   template: black uppercase text on a white "highlight" box straddling a
   horizontal rule. That only became visible once the real template.css
   started loading (see the protocol-relative URL fix) — reset it for this
   dark campaign design: no rule, no box, plain white text, our own casing. */
.main-title, .main-title-text { color: inherit !important; text-transform: none !important; }
.main-title:after { display: none !important; }
.main-title-text { background: none !important; padding: 0 !important; }

/* CSS Custom Properties — design tokens
================================*/
:root {
  --ne-logo-blue:   #09144F;
  --ne-blue:        #002D6A;
  --ne-light-blue:  #084BA6;
  --ne-yellow:      #FA9D28;
  --ne-lt-orange:   #FF8500;
  --ne-orange:      #F06C00;
  --ne-navy:        #00283A;
  --bg-dark-1:      #0a0a0f;
  --bg-dark-2:      #0d0d14;
  --bg-dark-3:      #111118;
  --bg-light-1:     #f5f5f7;
  --bg-light-2:     #fafafa;
  --bg-light-3:     #f0f0f0;
  --surface-dark-1: #0f1a2e;
  --surface-dark-2: #0d1b33;
  --text-primary:   #f0f0f0;
  --text-secondary: #9e9e9e;
  --gray-bg:        #F2F2F2;
  --gray-line:      #E8E8E8;
  --gray-border:    #D1D1D1;
  --gray-aux-light: #6E6E6E;
  --gray-body:      #212121;
  --ngg-orange:     #FA9D28;
  --ngg-darkorange: #FF8500;
  --ngg-btn-txt:    #212121;
  --ngg-opensans:   'Open Sans', sans-serif;
  --ngg-montserrat: 'Montserrat', sans-serif;
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-section:    40px;
  --sp-section-lg: 64px;
}

/* Newegg button standards
================================*/
.btn-primary, .button.button-primary, .ngg-shopall, .ngg-buynow {
  text-transform: none; font-family: var(--ngg-opensans); border: 0;
  background-color: var(--ngg-orange); color: var(--ngg-btn-txt);
}
.ngg-btn { border: 0; background: none; width: 100%; margin: 3% auto; text-align: center; }
.ngg-item-btn { margin: auto; text-align: center; }
.ngg-item-btn a { border-radius: 35px; width: 100%; letter-spacing: 0; font-size: 14px; }
.ngg-shopall, .ngg-buynow { border-radius: 30px; text-align: center; transition: 0.5s; font-weight: 700; font-family: var(--ngg-opensans); }
.ngg-shopall { border-radius: 50px; background-color: var(--ngg-orange); color: var(--ngg-btn-txt); border: 0; padding: 10px 4%; font-weight: 700; text-transform: none; font-size: clamp(1rem, 2vw, 1.5rem); }
.ngg-buynow { padding: 10px 8%; }
.ngg-shopall:hover, .ngg-buynow:hover, .ngg-item-btn a:hover { background-color: var(--ngg-darkorange); transition: 0.35s; }
.btn-primary:hover, .btn-primary:active, .button.button-primary:hover, .button.button-primary:active { background: var(--ngg-darkorange); color: var(--ngg-btn-txt); }

/* Global base — scoped to .section-inner only
   CRITICAL: Never apply color, font, or inherited rules to bare body, *, a, p, h1-h6.
   Newegg header and footer live outside .section-inner and must never be overridden.
   body may only receive background, margin, and padding.
================================*/
body { background: var(--bg-dark-1); margin: 0; }
.section-inner {
  max-width: 1920px; margin: 0 auto; overflow: hidden;
  font-size: 14px; font-family: var(--ngg-opensans); color: var(--text-primary);
}
.section-inner * { font-size: max(14px, inherit); }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* Hero height cap — never exceeds 400px
================================*/
.lp-hero { max-height: 400px; overflow: hidden; position: relative; width: 100%; }
.lp-hero-bg { width: 100%; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Scroll reveal
================================*/
.reveal { opacity: 1; transform: none; }
.will-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
.will-reveal.visible { opacity: 1; transform: none; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .will-reveal { opacity: 1; transform: none; }
}

/* Disclaimer */
.disclaimer { font-size: 12px; color: var(--text-secondary); text-align: center; padding: var(--sp-2) clamp(24px, 6vw, 80px); }

/* Responsive breakpoints
================================*/
@media only screen and (max-width: 550px) {
  .items-grid .item-cell { width: 90%; text-align: center; border-bottom: 1px solid #333; padding-bottom: 8%; }
  .item-img > img { max-width: 300px; }
  .items-grid .item-title { height: auto; }
  .lp-hero { max-height: 200px; }
  .lp-hero-bg { height: 200px; }
}
@media only screen and (min-width: 375px) {}
@media only screen and (min-width: 481px) {}
@media only screen and (min-width: 641px) {
  .banner { padding-top: 21.96%; }
  .banner-img { background-position: 100% 0; background-size: 152.7086383601757%; }
  .items-grid .item-cell { width: 19%; margin: 0; }
}
@media only screen and (min-width: 769px) {}
@media only screen and (min-width: 1025px) {}
@media only screen and (min-width: 1440px) {}

/* ── PAGE-SPECIFIC STYLES BELOW THIS LINE ──────────── */

/* NVIDIA Sans — self-hosted, licensed webfont files supplied by the client
   for this campaign (not a public/redistributable font; do not reuse these
   files on a different page without separate clearance).
   Weight ranges are set wide enough (700–900) that the existing 800-weight
   headline rules resolve to the Bold face instead of hunting for a heavier
   cut that doesn't exist, or synthesizing a fake bold on a fallback font.
================================*/
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans-Regular.woff2') format('woff2');
  font-weight: 1 549;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans-Bold.woff2') format('woff2');
  font-weight: 550 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans-Italic.woff2') format('woff2');
  font-weight: 1 549;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'NVIDIA Sans';
  src: url('../fonts/NVIDIASans-BoldItalic.woff2') format('woff2');
  font-weight: 550 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --ngg-montserrat: 'NVIDIA Sans', 'Montserrat', sans-serif;
  --ngg-opensans: 'NVIDIA Sans', 'Open Sans', sans-serif;
}

/* Campaign background — Precision Dark direction
================================*/
.section-inner {
  background: var(--bg-dark-3);
  font-family: var(--ngg-opensans);
}
.section-inner h1, .section-inner h2, .section-inner h3, .section-inner h4 {
  font-family: var(--ngg-montserrat);
  margin: 0;
}

/* Hero
================================*/
.lp-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "copy media";
  align-items: stretch;
  gap: var(--sp-6);
  min-height: 480px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 90px);
  background: var(--bg-dark-1);
}
.lp-hero-copy {
  grid-area: copy;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-6) 0;
  text-align: left;
}
.lp-hero-media { grid-area: media; position: relative; overflow: hidden; min-height: 320px; border-radius: 6px; }
.lp-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero-media-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: linear-gradient(180deg, rgba(10,10,15,0) 0%, var(--bg-dark-1) 100%);
  pointer-events: none;
}
.lp-badge-row { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lp-badge-nvidia { height: 52px; width: auto; }
.lp-badge-newegg-hero { height: 52px; width: auto; }
.lp-hero-headline {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: clamp(30px, 3.4vw, 46px);
  color: var(--text-primary);
}
.lp-hero-sub {
  font-family: var(--ngg-montserrat);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--text-primary);
  margin: var(--sp-3) 0 0;
}
.lp-hero-sub em, .lp-lede-body em, .lp-lede-fine em, .lp-feature-body em,
.video-caption em, .main-title-text em {
  font-style: italic;
  font-weight: inherit;
}
.lp-hero-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.lp-hero-fine { display: block; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.lp-hero-fine a { color: #76B900; text-decoration: underline; }
.lp-hero-fine a:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

/* Lede — centered body copy directly under the hero
================================*/
.lp-lede {
  background: var(--bg-dark-3);
  padding: var(--sp-section) clamp(24px, 6vw, 90px);
  text-align: center;
}
.lp-lede-body {
  max-width: 820px; margin: 0 auto;
  color: var(--text-primary); line-height: 1.7; font-size: 16px;
}
.lp-lede-fine {
  max-width: 820px; margin: var(--sp-2) auto 0;
  color: var(--text-secondary); line-height: 1.6; font-size: 12px;
}

/* Section rhythm
================================*/
.lp-section {
  padding: var(--sp-section) clamp(20px, 6vw, 90px);
  position: relative;
}
/* .section-inner h1/h2/h3/h4 { margin:0 } above is a compound selector
   (class + element) with higher specificity than a plain .main-title rule,
   so it was silently winning and zeroing this out — !important to be sure
   it sticks regardless of what else targets headings. */
.main-title { text-align: center; margin-bottom: var(--sp-6) !important; }
.main-title-text {
  font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(20px, 2.6vw, 30px); color: var(--text-primary);
}

/* Video
================================*/
.lp-section-video { background: var(--bg-dark-2); text-align: center; }
.video-box-wrap { max-width: 960px; margin: 0 auto; }
.video-box { position: relative; width: 100%; padding-top: 56.25%; border-radius: 6px; overflow: hidden; background: #000; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { color: var(--text-secondary); font-size: 13px; margin-top: var(--sp-2); }
.video-caption a { color: #76B900; text-decoration: underline; }
.video-caption a:hover { color: #8fd400; }

/* Feature sections (path tracing / DLSS)
================================*/
.lp-feature { background: var(--bg-dark-3); }
.lp-feature + .lp-feature { background: var(--bg-dark-2); }
.lp-feature-copy { max-width: 700px; margin: 0 auto var(--sp-4); text-align: center; }
.lp-eyebrow {
  display: block; font-family: var(--ngg-montserrat); font-weight: 700;
  letter-spacing: 0.06em; font-size: 14px;
  color: var(--text-primary); margin-bottom: var(--sp-1);
}
.lp-feature-title {
  font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(22px, 3vw, 32px); color: var(--text-primary); margin-bottom: var(--sp-2);
}
.lp-feature-body {
  text-align: center; color: var(--text-primary); line-height: 1.6; font-size: 15px;
  max-width: 620px; margin: 0 auto;
}
.lp-feature-media { max-width: 630px; margin: 0 auto; border-radius: 6px; overflow: hidden; }

/* "Shop all" CTA — reverted to Newegg's standard template large button
   (see the mandatory "Newegg button standards" block near the top of this
   file: orange pill, .ngg-shopall/.ngg-buynow). The custom NVIDIA-green
   Figma-matched treatment that used to live here has been removed per
   request — this class now inherits the standard styling unchanged.
================================*/
.ngg-shopall:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }
.ngg-btn-spaced { margin-top: var(--sp-8); }

/* Shop grid
================================*/
.ngg-skus { background: var(--bg-dark-1); }
/* 4 across on desktop; drops to a clean 2x2 (not the old auto-fit "3x1"
   wrapping) once the row gets tight, then to 1 column at the mobile
   breakpoint further down. row-gap/gap repeated with !important as a
   defensive guard — .items-grid is a common Newegg template classname and
   this makes sure our vertical spacing always wins if anything else on
   the page ever targets it. */
.items-grid {
  list-style: none; margin: 0 auto; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-3); row-gap: var(--sp-3) !important; gap: var(--sp-3) !important;
  max-width: 1280px;
}
.items-grid .item-cell { width: auto; margin: 0 !important; }
@media only screen and (max-width: 1100px) {
  .items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
/* box-sizing:border-box is the fix for the row-gap-eating bug: with the
   default content-box, height:100% only sized the CONTENT box, and the
   24px padding was then added on top of that — so the card silently grew
   ~48px taller than its grid cell and painted straight through the gap
   into the row below. border-box folds the padding into the 100%. */
.item-container {
  background: var(--surface-dark-2); border-radius: 8px; padding: var(--sp-3);
  height: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0;
}
/* Fixed-height frame with a white background so all 4 product photos read
   as one consistent size/look even though the real photos come from Newegg
   at different aspect ratios and crops — object-fit:contain letterboxes
   each one instead of stretching or cropping it. */
.item-container .item-img {
  margin-bottom: var(--sp-2); height: 200px;
  background: #fff; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.item-container .item-img img { width: 100%; height: 100%; object-fit: contain; }
/* .item-info was a plain block, not a flex container — margin-top:auto on
   .btn-area (below) only pins to the bottom when its own parent is the flex
   context, so it was silently doing nothing and leaving the card's stretched
   leftover height stranded below the button instead. Making item-info the
   flex column that actually grows fixes that. */
.item-container .item-info { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* template.css's mandatory .item-title rule clamps product names to 2 lines
   with an ellipsis — the user wants the full product name shown, so drop
   the clamp for this page's cards and let the title wrap naturally. */
.item-container .item-title { min-height: 0; margin-bottom: var(--sp-1); }
.item-container .item-title a {
  color: var(--text-primary); font-weight: 600;
  display: block !important; -webkit-line-clamp: unset !important;
  overflow: visible !important; white-space: normal;
}
.item-container .price { color: var(--ne-yellow); font-weight: 700; font-size: 18px; min-height: 22px; }
/* The mandatory template.css-overrides block at the top of this file sets
   .finalPrice/.instantSavings to #000 for the legacy light-background
   template — invisible black-on-navy on this dark campaign card, which is
   why the live price silently didn't show. Re-color for this dark surface. */
.item-container .price .finalPrice { color: var(--ne-yellow); font-size: 1.3em; font-weight: 800; }
.item-container .price .originalPrice { color: var(--text-secondary); font-size: 0.85em; text-decoration: line-through; }
.item-container .price .instantSavings { color: var(--text-secondary); font-size: 0.8em; }
.item-container .price .productList { list-style: none; margin: 0; padding: 0; }
/* Out-of-stock items: the mandatory adjustStock-soldout script (loaded at the
   bottom of the page) overwrites this same #ngl_[item] element with
   <div class="soldout">Sold Out</div> on window load when Product[item].stock
   is "0" — style it so it reads as a clear status, not the active-price yellow. */
.item-container .soldout { color: #ff6b6b; font-weight: 700; font-size: 16px; }
/* .ngg-item-btn (mandatory rule, higher up in this file) sets margin:auto on
   all four sides — left unchecked, that splits the flex free space between
   margin-top AND margin-bottom, leaving the button "floating" above a gap
   instead of flush at the card's bottom. Zero out every side but the one
   that should actually consume the free space. */
.item-container .btn-area { margin: auto 0 0; padding-top: var(--sp-3); }
/* Standard small item-template button (.btn/.btn-primary/.ngg-item-btn a) —
   the min-height:44px this used to carry was inflating it past the
   mandatory template's natural ~8px-padding compact size. Just center the
   icon+label, no forced height. */
.item-container .btn-area a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* Disclaimer + legal footer
================================*/
.disclaimer { background: var(--bg-dark-3); max-width: 900px; margin: 0 auto; line-height: 1.6; }
.lp-legal-footer {
  background: var(--bg-dark-3); padding: var(--sp-4) clamp(20px, 6vw, 90px) var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.lp-legal-badges {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-4);
}
.lp-legal-badges-row1 { margin-bottom: var(--sp-3); }
.lp-legal-badges-row2 { margin-bottom: var(--sp-3); }
.lp-badge-remedy { height: 56px; width: auto; }
.lp-badge-nvidia-sm { height: 40px; width: auto; }
.lp-badge-esrb { height: 58px; width: auto; }
.lp-badge-pegi { height: 58px; width: auto; }
.lp-badge-newegg { height: 46px; width: auto; }
.lp-legal-copy { max-width: 900px; margin: 0 auto; color: var(--text-secondary); font-size: 11px; line-height: 1.7; text-align: center; }

/* Mobile — mirrors the phone artboard: stacked, centered, full-bleed media
================================*/
@media only screen and (max-width: 768px) {
  .lp-hero-split {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "copy";
    min-height: 0;
    gap: 0;
    max-width: none;
    padding: 0;
  }
  .lp-hero-media { min-height: 220px; border-radius: 0; }
  .lp-hero-copy { padding: var(--sp-3) 20px var(--sp-4); }
  .lp-hero-headline { font-size: 26px; }
  .lp-hero-cta-row { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .lp-section { padding: var(--sp-3) 20px; }
  .lp-lede { padding: var(--sp-3) 20px; }
  .lp-feature-body { text-align: center; }
  .items-grid { grid-template-columns: 1fr; }
  .items-grid .item-cell { width: 100%; max-width: 340px; margin: 0 auto; }
  .lp-legal-badges { gap: var(--sp-2); }
  .ngg-btn-spaced { margin-top: var(--sp-6); }
}
@media only screen and (max-width: 550px) {
  .lp-hero-media { min-height: 180px; }
}