/* 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 { display:none; }
.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; }

.page-btn { max-width:150px; }
.b2c-remote .footer2021.page-section, .b2c-remote .footer2021.page-section:first-child, .b2c-remote .footer2021-disclaimer { background-color: #fff; }

/* 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 ──────────── */
/* AMD × Onimusha™: Way of the Sword — Brand Arena
   Campaign accent tokens sampled from the approved AMD/Capcom module.
================================================================ */
:root {
  --oni-orange:   #F36523;
  --oni-red:      #EC1D23;
  --oni-surface:  #222222;
  --oni-surface-2:#1a1a1f;
  --oni-rule:     rgba(243, 101, 35, 0.35);
}

.oni-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- HERO : cinematic full-bleed ---------- */
.oni-hero-wrap { position: relative; width: 100%; overflow: hidden; background: var(--bg-dark-1); }
.oni-hero-backdrop {
  position: absolute; inset: -8% -4%;
  /*background: url(../imgs/hero.jpg) no-repeat center center;
  background-size: cover;
  filter: blur(48px) saturate(1.35) brightness(0.55);
  transform: scale(1.12);
  opacity: 0.85;*/
}
.oni-hero-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 38%, rgba(10,10,15,0.72) 78%, var(--bg-dark-1) 100%),
    linear-gradient(180deg, rgba(10,10,15,0.55) 0%, rgba(10,10,15,0) 22%);
}
.oni-hero-stage {
  position: relative; z-index: 2;
  padding: 0 var(--sp-3) var(--sp-3);
}
.oni-hero-wrap .lp-hero {
  max-width: 1366px;      /* 1366 / 2.885 aspect = 473px tall */
  max-height: none;       /* campaign-scoped: baked-in headline must not crop */
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.05);
}
.oni-hero-img { width: 100%; height: auto; display: block; }

/* ---------- QUALIFYING TABLE ---------- */
.oni-offer {
  padding: var(--sp-section) var(--sp-3);
  background:
    linear-gradient(180deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 45%, var(--bg-dark-1) 100%);
}
.oni-offer-inner { max-width: 1046px; margin: 0 auto; }
.oni-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  table-layout: fixed; overflow: hidden; border-radius: 3px;
}
.oni-table thead th {
  font-family: var(--ngg-montserrat); font-weight: 800; font-size: 15px;
  letter-spacing: 0.045em; text-transform: uppercase; color: #fff;
  padding: 12px var(--sp-2); text-align: center; vertical-align: middle;
  border: 0; line-height: 1.3;
}
.oni-th-left  { background: linear-gradient(90deg, var(--oni-orange) 0%, #F04E22 100%); }
.oni-th-right { background: linear-gradient(90deg, #EE4123 0%, var(--oni-red) 100%); }
.oni-table tbody th {
  background: var(--oni-surface); color: var(--text-primary);
  font-family: var(--ngg-opensans); font-weight: 400; font-size: 16px;
  text-align: center; padding: 11px var(--sp-2); border: 0; line-height: 1.4;
}
.oni-table tbody tr:first-child th { padding-top: var(--sp-3); }
.oni-table tbody tr:last-child th { padding-bottom: var(--sp-3); }
.oni-check {
  background: var(--oni-surface); text-align: center; vertical-align: middle;
  border: 0; border-left: 2px solid var(--bg-dark-1); color: #fff;
}
.oni-check svg { width: 88px; height: 66px; display: block; margin: 0 auto; }
.oni-table-note {
  margin: var(--sp-2) 0 0; text-align: center; font-size: 14px;
  color: var(--text-secondary); font-family: var(--ngg-opensans);
}

/* ---------- SECTION HEADERS ---------- */
.oni-section { padding: var(--sp-section) clamp(16px, 4vw, 56px); position: relative; }
.oni-section:nth-of-type(even) { background: linear-gradient(180deg, var(--bg-dark-1) 0%, var(--oni-surface-2) 50%, var(--bg-dark-1) 100%); }
.oni-sec-head {
  max-width: 1500px; margin: 0 auto var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.oni-section--right .oni-sec-head { flex-direction: row-reverse; text-align: right; }
.oni-sec-index {
  font-family: var(--ngg-montserrat); font-weight: 900; font-size: clamp(38px, 6vw, 64px);
  line-height: 0.85; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 2px var(--oni-rule);
  flex: 0 0 auto;
}
.oni-sec-titles { flex: 1 1 auto; min-width: 0; }
.oni-sec-title {
  margin: 0; font-family: var(--ngg-montserrat); font-weight: 900;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.03em;
  text-transform: uppercase; color: #fff;
}
.oni-sec-blurb {
  margin: 8px 0 0; font-family: var(--ngg-opensans); font-size: 15px;
  line-height: 1.55; color: var(--text-secondary); max-width: 62ch;
}
.oni-section--right .oni-sec-blurb { margin-left: auto; }
.oni-sec-head::after {
  content: ''; flex: 0 0 auto; width: clamp(40px, 12vw, 220px); height: 2px;
  background: linear-gradient(90deg, var(--oni-orange), rgba(236,29,35,0));
}
.oni-section--right .oni-sec-head::after { background: linear-gradient(270deg, var(--oni-orange), rgba(236,29,35,0)); }

/* ---------- PRODUCT GRIDS ---------- */
.oni-grid {
  max-width: 1500px; margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: var(--sp-2); justify-content: center; list-style: none; padding: 0;
}
.oni-grid .item-cell { float: none; padding: 0; margin: 0; box-sizing: border-box; }
.oni-card {
  background: var(--oni-surface-2); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px; padding: var(--sp-2); height: 100%;
  display: flex; flex-direction: column;
  transition: transform 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.oni-card:hover {
  transform: translateY(-4px); border-color: var(--oni-rule);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
}
.oni-card .item-img { display: block; background: #fff; border-radius: 4px; padding: 10px; }
.oni-card .item-img img { margin: 0 auto; max-height: 190px; width: auto; object-fit: contain; }
.oni-card .item-info { padding: var(--sp-2) 0 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.oni-grid .item-title { height: auto; }
.oni-card .item-title { margin: 0 0 var(--sp-2); min-height: 3.2em; }
.oni-card .item-title a { color: var(--text-primary); line-height: 1.5; }
.oni-card .item-title a:hover { color: var(--ngg-orange); text-decoration: underline; }
.oni-card .price { margin-top: auto; }
.oni-card .finalPrice, .oni-card .instantSavings { color: #fff; }
.oni-card .finalPrice { font-family: var(--ngg-montserrat); font-weight: 800; }
.oni-card .price .originalPrice { color: var(--text-secondary); }
.oni-card .ngg-item-btn { margin-top: var(--sp-2); }
.oni-card .btn-primary { display: block; padding: 11px 20px; font-weight: 700; }

/* ---------- FULL-WIDTH BUTTON CLICK TARGET ----------
   .item-info is a flex column. The template's `.ngg-item-btn { margin: auto }`
   cancels the default cross-axis stretch, so .btn-area shrink-wrapped to the
   text and only the label area was the link. Restoring the stretch makes the
   entire button surface the <a> itself.                                        */
.oni-card .ngg-item-btn {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  align-self: stretch;
}
.oni-card .ngg-item-btn a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
/* template.css renders .items-grid::after as an absolutely-positioned 15px strip
   pinned 21px above the grid bottom. Its background is already cleared, but it
   still swallowed pointer events across the top edge of every button.           */
.oni-grid:after { pointer-events: none; }
.oni-card a:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

/* ---------- WIDE ROWS (desktops) ---------- */
.oni-grid--wide .oni-card { flex-direction: row; align-items: center; gap: var(--sp-3); padding: var(--sp-3); }
.oni-grid--wide .oni-card .item-img { flex: 0 0 40%; max-width: 40%; }
.oni-grid--wide .oni-card .item-img img { max-height: 220px; }
.oni-grid--wide .oni-card .item-info { padding: 0; flex: 1 1 auto; }
.oni-grid--wide .oni-card .item-title { min-height: 0; margin-bottom: var(--sp-2); }
.oni-grid--wide .oni-card .item-title a { font-size: 16px; line-height: 1.45; -webkit-line-clamp: 6; line-clamp: 6; }
.oni-grid--wide .oni-card .ngg-item-btn a { padding: 11px 20px; }
.oni-grid--wide .oni-card .ngg-item-btn { text-align: center; }

/* ---------- CLOSING CTA ---------- */
.oni-closer {
  padding: var(--sp-section-lg) var(--sp-3);
  background:
    radial-gradient(90% 130% at 50% 100%, rgba(243,101,35,0.20) 0%, rgba(236,29,35,0.06) 42%, rgba(10,10,15,0) 72%),
    var(--bg-dark-1);
  text-align: center;
}
.oni-closer-inner { max-width: 760px; margin: 0 auto; }
.oni-closer-eyebrow {
  margin: 0 0 var(--sp-1); font-family: var(--ngg-montserrat); font-weight: 700;
  font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ngg-orange);
}
.oni-closer-head {
  margin: 0 0 var(--sp-3); font-family: var(--ngg-montserrat); font-weight: 900;
  font-size: clamp(30px, 5.5vw, 62px); line-height: 1; letter-spacing: -0.035em;
  text-transform: uppercase; color: #fff;
}
.oni-closer .ngg-btn { margin: 0; }
.oni-closer .ngg-shopall {
  display: inline-block; padding: 14px 52px; font-family: var(--ngg-montserrat);
  font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 10px 30px rgba(250,157,40,0.28);
}
.oni-closer .ngg-shopall:hover { transform: translateY(-2px); transition: all 0.2s ease-out; }
.oni-closer .ngg-shopall:focus-visible { outline: 3px solid var(--ne-yellow); outline-offset: 3px; }

.disclaimer { max-width: 1400px; margin: 0 auto; line-height: 1.7; text-align: left; padding-bottom: var(--sp-6); }

/* ---------- RESPONSIVE — campaign breakpoints: 1000px / 550px ---------- */

/* Desktop: 1001px and up */
@media only screen and (min-width: 1001px) {
  .oni-grid--5 .item-cell { width: calc(20% - 14px); }
  .oni-grid--4 .item-cell { width: calc(25% - 13px); }
  .oni-grid--wide .item-cell { width: calc(50% - 9px); }
}

/* Tablet: 551px - 1000px — every product grid drops to 2 columns */
@media only screen and (min-width: 551px) and (max-width: 1000px) {
  .oni-grid { justify-content: flex-start; }
  .oni-grid--5 .item-cell,
  .oni-grid--4 .item-cell,
  .oni-grid--wide .item-cell { width: calc(50% - 9px); }
  /* wide rows stack internally so a 2-up column stays readable */
  .oni-grid--wide .oni-card { flex-direction: column; align-items: stretch; padding: var(--sp-2); }
  .oni-grid--wide .oni-card .item-img { flex: 1 1 auto; max-width: 100%; }
  .oni-grid--wide .oni-card .item-img img { max-height: 190px; }
  .oni-grid--wide .oni-card .item-info { padding: var(--sp-2) 0 0; }
  .oni-grid--wide .oni-card .item-title a { font-size: 14px; }
  .oni-grid--wide .oni-card .ngg-item-btn { text-align: center; }
}

/* Tablet and below: table tuning */
@media only screen and (max-width: 1000px) {
  .oni-check svg { width: 60px; height: 46px; }
  .oni-table thead th { font-size: 14px; padding: 10px var(--sp-1); letter-spacing: 0.02em; }
  .oni-table tbody th { font-size: 15px; }
}

/* Mobile: 550px and below — single column */
@media only screen and (max-width: 550px) {
  .oni-hero-stage { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
  .oni-hero-wrap .lp-hero { border-radius: 3px; }
  .oni-section { padding: var(--sp-4) var(--sp-2); }
  .oni-sec-head, .oni-section--right .oni-sec-head { flex-direction: column; align-items: flex-start; text-align: left; gap: var(--sp-1); margin-bottom: var(--sp-3); }
  .oni-section--right .oni-sec-blurb { margin-left: 0; }
  .oni-sec-head::after { width: 90px; }
  .oni-grid { gap: var(--sp-3); }
  .oni-grid .item-cell { width: 100%; border-bottom: none; padding-bottom: 0; text-align: left; }
  .oni-grid--wide .oni-card { flex-direction: column; align-items: stretch; padding: var(--sp-2); }
  .oni-grid--wide .oni-card .item-img { flex: 1 1 auto; max-width: 100%; }
  .oni-grid--wide .oni-card .item-info { padding: var(--sp-2) 0 0; }
  .oni-grid--wide .oni-card .ngg-item-btn { text-align: center; }
  .oni-grid--wide .oni-card .ngg-item-btn a { width: 100%; }
  .oni-card .item-img img { max-width: 100%; max-height: 170px; }
  .oni-table tbody th { font-size: 14px; padding: 9px 10px; }
  .oni-check svg { width: 46px; height: 36px; }
  .disclaimer { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}