@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap');

/* QODE Storefront Refresh -- neon-green direction, tokens from DESIGN.md */
:root{
  --qnew-bg:#20253a;
  --qnew-surface:#252836;
  --qnew-line:#1c2740;
  --qnew-ink:#F7F8FC;
  --qnew-muted:#8b96ad;
  --qnew-accent:#00ce7a;
  --qnew-accent-dim:#00a865;
  --qnew-deal:#ff3b5c;
  --qnew-radius-card:12px;
  --qnew-radius-control:10px;
  --qnew-radius-pill:999px;
}
body.home{ background:var(--qnew-bg); color:var(--qnew-ink); }
body{ background:var(--qnew-bg); color:var(--qnew-ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
.qnew{ font-family:'Inter',ui-sans-serif,system-ui,sans-serif; background:var(--qnew-bg); color:var(--qnew-ink); }
.qnew *{ box-sizing:border-box; }
.qnew a{ color:inherit; text-decoration:none; }
/* Matches the site header/footer container formula exactly so the category
   nav, hero, and every section below line up with the logo and nav above. */
.qnew-shell{ width:calc(100% - 80px); max-width:1360px; margin-inline:auto; padding:0; }
@media (max-width:1180px){ .qnew-shell{ width:calc(100% - 48px); } }
@media (max-width:980px){ .qnew-shell{ width:calc(100% - 32px); } }

/* Trust banner */
.qnew-trust-wrap{ display:flex; justify-content:center; padding:0.75rem 1rem; }
.qnew-trust{ display:inline-flex; align-items:center; gap:0.5rem; background:var(--qnew-surface); border:1px solid rgba(0,206,122,0.3); border-radius:var(--qnew-radius-pill); padding:0.4rem 1rem 0.4rem 0.5rem; font-size:0.8rem; font-weight:600; }
.qnew-trust__check{ width:1.25rem; height:1.25rem; border-radius:50%; background:var(--qnew-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qnew-trust__check svg{ width:0.75rem; height:0.75rem; color:var(--qnew-bg); }
.qnew-trust strong{ color:var(--qnew-accent); }

/* Category nav */
.qnew-catnav{ background:#080e1c; border-top:1px solid var(--qnew-line); border-bottom:1px solid var(--qnew-line); }
.qnew-catnav__row{ display:flex; justify-content:space-between; align-items:center; height:3.5rem; gap:1.75rem; overflow-x:auto; }
.qnew-catnav__left, .qnew-catnav__right{ display:flex; align-items:center; gap:1.75rem; flex-shrink:0; }
.qnew-catnav a{ font-size:0.9rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; white-space:nowrap; color:var(--qnew-ink); }
.qnew-catnav__right a{ color:var(--qnew-muted); font-size:0.82rem; font-weight:700; }
.qnew-catnav a:hover{ color:var(--qnew-accent); }
@media (max-width:640px){
  .qnew-catnav__row{ height:3.1rem; gap:1.25rem; }
  .qnew-catnav__left, .qnew-catnav__right{ gap:1.25rem; }
  .qnew-catnav a{ font-size:0.8rem; }
  .qnew-catnav__right a{ font-size:0.75rem; }
}

/* Hero */
.qnew-hero-wrap{ padding-top:1rem; }
@media (min-width:1024px){ .qnew-hero-wrap{ padding-top:2rem; } }
.qnew-hero{ position:relative; border-radius:20px; overflow:hidden; }
/* 3-card peek carousel: track centers the active slide via JS-computed
   pixel offset (robust regardless of gap/percentage math), while inactive
   neighbors peek in dimmed and scaled down at the container edges. */
.qnew-hero__track{ display:flex; justify-content:center; align-items:center; gap:1rem; transition:transform .5s ease-out; will-change:transform; }
.qnew-hero__slide{ flex:0 0 84%; max-width:84%; height:460px; position:relative; display:flex; align-items:flex-end; padding:2rem 1.5rem; border-radius:20px; overflow:hidden; transform:scale(0.95); opacity:0.4; filter:brightness(0.5); transition:transform .5s ease, opacity .5s ease, filter .5s ease; }
@media (min-width:768px){ .qnew-hero__slide{ flex-basis:78%; max-width:78%; } }
@media (min-width:1024px){ .qnew-hero__slide{ flex-basis:72%; max-width:72%; height:560px; align-items:center; padding:2rem 3.5rem; } }
.qnew-hero__slide.is-active{ transform:scale(1); opacity:1; filter:brightness(1); }
/* Dark gradient scrim over the art so title, badge, and price stay readable
   against any background, on every slide. */
.qnew-hero__slide::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(8,14,28,0.05) 0%, rgba(8,14,28,0.45) 55%, rgba(8,14,28,0.88) 100%),
    linear-gradient(90deg, rgba(8,14,28,0.75) 0%, rgba(8,14,28,0.15) 55%, rgba(8,14,28,0) 100%);
}
.qnew-hero__copy{ max-width:28rem; position:relative; z-index:2; }
.qnew-hero__tag{ display:inline-block; font-size:0.7rem; font-weight:700; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:var(--qnew-radius-pill); padding:0.25rem 0.65rem; margin-bottom:1rem; }
.qnew-hero__copy h1{ font-size:2rem; font-weight:900; line-height:1.1; margin:0 0 0.75rem; }
@media (min-width:1024px){ .qnew-hero__copy h1{ font-size:3rem; } }
.qnew-hero__price{ display:flex; align-items:center; gap:0.75rem; margin-bottom:1.25rem; }
.qnew-hero__badge{ background:var(--qnew-deal); font-size:0.75rem; font-weight:700; padding:0.25rem 0.6rem; border-radius:6px; }
.qnew-hero__was{ color:var(--qnew-muted); text-decoration:line-through; font-size:0.9rem; }
.qnew-hero__now{ font-size:1.4rem; font-weight:800; color:var(--qnew-accent); }
.qnew-hero__cta{ display:inline-block; background:var(--qnew-accent); color:var(--qnew-bg); font-weight:700; font-size:0.85rem; padding:0.6rem 1.5rem; border-radius:var(--qnew-radius-pill); transition:filter .15s; }
.qnew-hero__cta:hover{ filter:brightness(1.1); }
.qnew-hero__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:2.75rem; height:2.75rem; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s, transform .1s; }
.qnew-hero__arrow svg{ width:1.4rem; height:1.4rem; }
.qnew-hero__arrow:hover{ background:rgba(255,255,255,0.25); }
.qnew-hero__arrow:active{ transform:translateY(-50%) scale(0.9); }
.qnew-hero__arrow--prev{ left:0.75rem; }
.qnew-hero__arrow--next{ right:0.75rem; }

/* Section layout */
.qnew-section{ padding-top:3rem; }
@media (min-width:1024px){ .qnew-section{ padding-top:4rem; } }
.qnew-section-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.qnew-section-head h2{ font-size:1.3rem; font-weight:800; white-space:nowrap; margin:0; }
@media (min-width:1024px){ .qnew-section-head h2{ font-size:1.6rem; } }
.qnew-rule{ height:1px; background:var(--qnew-line); flex:1; }
.qnew-view-more{ font-size:0.85rem; font-weight:600; color:var(--qnew-accent); margin-left:auto; }
.qnew-view-more:hover{ text-decoration:underline; }

/* Product rails / cards */
.qnew-rail{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:0.5rem; scroll-snap-type:x mandatory; }
@media (min-width:1024px){ .qnew-rail{ display:grid; grid-template-columns:repeat(5,1fr); overflow:visible; } }
.qnew-card{ flex-shrink:0; width:10rem; scroll-snap-align:start; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); overflow:hidden; transition:border-color .15s, transform .15s, box-shadow .15s; display:block; }
.qnew-card:hover{ border-color:var(--qnew-accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.qnew-card:hover .qnew-card__image{ transform:scale(1.04); }
.qnew-card__image{ transition:transform .25s; }
/* Same link-reset as ".qnew a", scoped directly to the card so it also works on pages (catalogue/shop archive) not wrapped in the homepage's .qnew container -- otherwise default browser/WooCommerce link styling (blue, underlined) shows through on the title text. */
a.qnew-card, a.qnew-card:visited, a.qnew-card:hover, a.qnew-card *{ color:inherit; text-decoration:none; }
@media (min-width:1024px){ .qnew-card{ width:auto; } }
.qnew-card:hover{ border-color:rgba(0,206,122,0.5); }
.qnew-card__art{ position:relative; aspect-ratio:3/4; overflow:hidden; }
.qnew-card__image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.qnew-card__platform{ position:absolute; top:0.5rem; left:0.5rem; z-index:2; display:inline-flex; align-items:center; gap:0.3rem; font-size:0.6rem; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); padding:0.2rem 0.55rem; border-radius:var(--qnew-radius-pill); }
.qnew-card__platform img{ width:0.85rem; height:0.85rem; flex-shrink:0; }
/* Real brand colors per platform -- used as a safe, recognizable
   compatibility indicator without reproducing exact trademarked logo
   artwork from memory. */
.qnew-card__platform--steam{ background:rgba(23,26,33,0.85); }
.qnew-card__platform--xbox{ background:#107C10; }
.qnew-card__platform--playstation{ background:#003791; }
.qnew-card__platform--nintendo{ background:#E60012; }
.qnew-card__platform--epic{ background:#2F2D2E; }
.qnew-card__platform--ea{ background:#000000; }
.qnew-card__platform--ubisoft{ background:#0070FF; }
.qnew-card__platform--gog{ background:#7B2CBF; }
.qnew-card__platform--pc{ background:rgba(0,0,0,0.55); }
.qnew-card__platform--generic{ background:rgba(0,0,0,0.55); }
.qnew-card__badge{ position:absolute; top:0.5rem; right:0.5rem; font-size:0.62rem; font-weight:700; background:var(--qnew-deal); padding:0.15rem 0.5rem; border-radius:var(--qnew-radius-pill); }
.qnew-card__body{ padding:0.75rem; }
.qnew-card__title{ font-size:1rem; font-weight:700; line-height:1.3; margin:0 0 0.6rem; min-height:2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.qnew-card__prices{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.6rem; }
.qnew-card__was{ font-size:0.72rem; color:var(--qnew-muted); text-decoration:line-through; }
.qnew-card__now{ font-size:0.9rem; font-weight:800; }
.qnew-card__buy{ display:block; text-align:center; background:var(--qnew-accent); color:var(--qnew-bg); font-size:0.72rem; font-weight:700; padding:0.5rem; border-radius:var(--qnew-radius-control); }
.qnew-card:hover .qnew-card__buy{ background:var(--qnew-accent-dim); }

/* Homepage rail cards: two-button BUY/ADD layout, matching the same
   pattern used on the catalogue archive cards and the single-product
   page (.qpp-btn--solid / .qpp-btn--outline). Visual-only for now. */
.qnew-card__actions{ display:flex; gap:0.4rem; }
.qnew-card__buy--solid,
.qnew-card__buy--outline{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.3rem;
  text-align:center;
  font-size:0.8rem;
  font-weight:700;
  padding:0.55rem;
  border-radius:var(--qnew-radius-control);
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.qnew-card__buy--solid svg,
.qnew-card__buy--outline svg{
  width:0.95em;
  height:0.95em;
  flex-shrink:0;
}
.qnew-card__buy--solid{
  background:var(--qnew-accent);
  color:var(--qnew-bg);
}
.qnew-card:hover .qnew-card__buy--solid{ background:var(--qnew-accent-dim); }
.qnew-card__buy--outline{
  background:#252836;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.4);
}
.qnew-card:hover .qnew-card__buy--outline{ background:#32364a; border-color:#ffffff; }
.qnew-empty{ color:var(--qnew-muted); font-size:0.9rem; }

/* Dots (JS-populated) */
.qnew-dots{ display:flex; justify-content:center; gap:0.4rem; margin-top:1rem; }
.qnew-dots button{ width:0.5rem; height:0.5rem; border-radius:999px; background:var(--qnew-line); border:none; cursor:pointer; transition:width .15s, background .15s; }
.qnew-dots button.is-active{ background:var(--qnew-accent); width:1.25rem; }

/* Banner */
.qnew-banner{ background:linear-gradient(90deg,#0f6b4f,#00ce7a22); border:1px solid rgba(0,206,122,0.3); border-radius:20px; padding:2rem 1.5rem; text-align:center; }
@media (min-width:1024px){ .qnew-banner{ display:flex; align-items:center; justify-content:space-between; text-align:left; padding:2.5rem; } }
.qnew-banner p{ font-weight:600; font-size:1rem; max-width:40rem; margin:0 0 1.25rem; }
@media (min-width:1024px){ .qnew-banner p{ margin:0; } }
.qnew-btn{ display:inline-block; font-weight:700; font-size:0.85rem; padding:0.75rem 1.75rem; border-radius:var(--qnew-radius-pill); }
.qnew-btn--accent{ background:var(--qnew-accent); color:var(--qnew-bg); }
.qnew-btn--accent:hover{ filter:brightness(1.1); }

/* Memberships */
.qnew-membership{ display:flex; flex-direction:column; gap:1.25rem; border-radius:20px; padding:2rem; background:radial-gradient(120% 140% at 20% 0%,#0f3b2e,#0b1426 70%); }
@media (min-width:640px){ .qnew-membership{ flex-direction:row; justify-content:center; } }
.qnew-membership__card{ width:100%; height:8rem; border-radius:var(--qnew-radius-card); padding:1rem; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
@media (min-width:640px){ .qnew-membership__card{ width:13rem; } }
.qnew-membership__card--xbox{ background:linear-gradient(140deg,#16a34a,#064e2e); transform:rotate(-3deg); }
.qnew-membership__card--ps{ background:linear-gradient(140deg,#2563eb,#0b2a63); transform:rotate(3deg); }
@media (min-width:640px){ .qnew-membership__card--ps{ margin-top:1.5rem; } }
.qnew-membership__card span{ font-size:0.7rem; font-weight:700; color:rgba(255,255,255,0.7); }
.qnew-membership__card b{ font-size:1.1rem; font-weight:800; }

/* Gift cards */
.qnew-giftcards{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.qnew-gift{ border-radius:20px; padding:1.25rem; height:9rem; display:flex; flex-direction:column; justify-content:space-between; transition:filter .15s; }
@media (min-width:1024px){ .qnew-gift{ height:11rem; } }
.qnew-gift:hover{ filter:brightness(1.1); }
.qnew-gift b{ font-size:1.1rem; font-weight:800; }
@media (min-width:1024px){ .qnew-gift b{ font-size:1.25rem; } }
.qnew-gift span{ font-size:0.85rem; font-weight:600; opacity:0.9; }
.qnew-gift--ps{ background:linear-gradient(140deg,#2563eb,#0b2a63); }
.qnew-gift--xbox{ background:linear-gradient(140deg,#16a34a,#064e2e); }
.qnew-gift--steam{ background:linear-gradient(140deg,#dc2626,#450a0a); }
.qnew-gift--nintendo{ background:linear-gradient(140deg,#0f766e,#042f2c); }

/* USP */
.qnew-usp{ border-top:1px solid var(--qnew-line); }
.qnew-usp__row{ display:flex; align-items:center; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--qnew-line); }
.qnew-usp__row:last-child{ border-bottom:none; }
.qnew-usp__icon{ width:2.75rem; height:2.75rem; flex-shrink:0; border-radius:50%; background:var(--qnew-surface); color:var(--qnew-accent); display:flex; align-items:center; justify-content:center; }
.qnew-usp__icon svg{ width:1.25rem; height:1.25rem; }
.qnew-usp__row p{ font-weight:700; font-size:0.9rem; margin:0; }
.qnew-usp__row small{ color:var(--qnew-muted); font-size:0.78rem; }

/* Spotlight (Latest Games hero card) */
.qnew-spotlight{ display:block; border-radius:20px; overflow:hidden; padding:1.5rem; min-height:13rem; display:flex; flex-direction:column; justify-content:flex-end; margin-bottom:1.5rem; }
@media (min-width:1024px){ .qnew-spotlight{ min-height:18rem; } }
.qnew-spotlight h3{ font-size:1.5rem; font-weight:900; margin:0.75rem 0 0.25rem; }
@media (min-width:1024px){ .qnew-spotlight h3{ font-size:1.9rem; } }
.qnew-spotlight p{ color:var(--qnew-muted); font-size:0.85rem; margin:0; }

/* Why QODE (honest trust cards, replaces fabricated reviews) */
.qnew-why h2{ text-align:center; font-size:1.4rem; font-weight:800; margin-bottom:1.5rem; }
.qnew-why__grid{ display:grid; gap:1rem; max-width:64rem; margin:0 auto; }
@media (min-width:640px){ .qnew-why__grid{ grid-template-columns:repeat(3,1fr); } }
.qnew-why__grid article{ background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1.25rem; }
.qnew-why__grid b{ display:block; font-size:0.95rem; margin-bottom:0.4rem; }
.qnew-why__grid p{ color:var(--qnew-muted); font-size:0.85rem; line-height:1.5; margin:0; }

/* Newsletter */
.qnew-newsletter{ background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:20px; padding:2rem; text-align:center; }
@media (min-width:1024px){ .qnew-newsletter{ display:flex; align-items:center; justify-content:space-between; text-align:left; } }
.qnew-newsletter h2{ font-size:1.2rem; font-weight:800; margin:0 0 0.4rem; }
.qnew-newsletter p{ color:var(--qnew-muted); font-size:0.85rem; margin:0 0 1.25rem; }
@media (min-width:1024px){ .qnew-newsletter p{ margin:0; } }
.qnew-newsletter form{ display:flex; gap:0.5rem; justify-content:center; }
.qnew-newsletter input{ background:var(--qnew-bg); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-control); padding:0.6rem 1rem; color:var(--qnew-ink); font-size:0.85rem; min-width:14rem; }
.qnew-newsletter input:focus{ outline:2px solid var(--qnew-accent); }
.qnew-newsletter button{ background:var(--qnew-accent); color:var(--qnew-bg); font-weight:700; font-size:0.85rem; padding:0.6rem 1.25rem; border-radius:var(--qnew-radius-control); border:none; cursor:pointer; }

/* FAQ / footer content */
.qnew-faq-title{ font-size:1.15rem; font-weight:800; margin-bottom:1rem; }
.qnew-faq-copy{ color:var(--qnew-muted); font-size:0.85rem; line-height:1.6; max-width:50rem; margin-bottom:1.5rem; }
.qnew-accordion{ max-width:50rem; border-top:1px solid var(--qnew-line); margin-bottom:2rem; }
.qnew-accordion__item{ border-bottom:1px solid var(--qnew-line); }
.qnew-accordion__toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; color:var(--qnew-ink); font-weight:600; font-size:0.9rem; padding:1rem 0; cursor:pointer; text-align:left; }
.qnew-accordion__toggle span{ color:var(--qnew-accent); font-size:1.2rem; transition:transform .2s; }
.qnew-accordion__item.is-open .qnew-accordion__toggle span{ transform:rotate(45deg); }
.qnew-accordion__panel{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.qnew-accordion__item.is-open .qnew-accordion__panel{ max-height:200px; }
.qnew-accordion__panel p{ color:var(--qnew-muted); font-size:0.85rem; line-height:1.6; padding-bottom:1rem; padding-right:2rem; margin:0; }
.qnew-payments{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.75rem; margin-bottom:0.75rem; }
.qnew-payments__icon{ width:2.75rem; height:2rem; border-radius:8px; background:var(--qnew-surface); border:1px solid var(--qnew-line); display:flex; align-items:center; justify-content:center; color:var(--qnew-muted); }
.qnew-payments__icon svg{ width:1.15rem; height:1.15rem; }
.qnew-payments__label{ text-align:center; color:var(--qnew-muted); font-size:0.75rem; }

/* Header breathing room: parent theme sets a fixed 72px height on the
   sticky header; swap to padding-driven sizing (~py-5 / py-4 at narrower
   widths) so the logo and nav sit clear of the very top of the screen.
   Content stays vertically centered via the parent's align-items:center. */
.qode-site-header,
.qode-site-header__inner{
  height:auto;
  min-height:0;
  padding-block:0.9rem; /* trimmed from py-5 for a tighter header */
}
@media (max-width:1279px){
  .qode-site-header,
  .qode-site-header__inner{ padding-block:0.8rem; }
}
@media (max-width:980px){
  .qode-site-header,
  .qode-site-header__inner{ padding-block:0.7rem; }
}

/* Header search: real, functional pill search bar (submits to WP search
   scoped to products), matching the design's pill/white-input treatment. */
.qnew-header-search-row{ background:var(--qnew-bg); border-bottom:1px solid var(--qnew-line); padding:0.75rem 0; }
.qnew-header-search{ position:relative; max-width:38rem; margin:0 auto; }
.qnew-header-search input[type="search"]{ width:100%; background:#fff; color:var(--qnew-bg); border:none; border-radius:var(--qnew-radius-pill); padding:0.7rem 1.25rem 0.7rem 3.4rem; font-size:0.9rem; font-weight:500; font-family:inherit; }
.qnew-header-search input[type="search"]::placeholder{ color:#64748b; }
.qnew-header-search input[type="search"]:focus{ outline:2px solid var(--qnew-accent); outline-offset:1px; }
.qnew-header-search button{ position:absolute; left:0.5rem; top:50%; transform:translateY(-50%); width:2.1rem; height:2.1rem; border-radius:50%; background:none; border:none; color:#475569; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s; }
.qnew-header-search button:hover{ background:none; color:var(--qnew-accent-dim); }
.qnew-header-search button svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; }
.qnew-header-search input[type="search"]::-webkit-search-cancel-button{ display:none; }

/* Consolidated single-row header: logo, search, and utilities together.
   Overrides the parent theme's 3-column grid with a flex row. */
.qnew-header-row{ display:flex !important; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:nowrap; }

.qnew-header-search--inline{ flex:1 1 auto; min-width:0; max-width:36rem; margin:0; }

.qnew-header-utilities{ display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.qnew-header-utilities__lang-cluster{ display:flex; align-items:center; gap:0.5rem; }
.qnew-header-divider{ width:1px; height:1.5rem; background:var(--qnew-line); display:block; }

.qnew-lang-dropdown{ position:relative; }
.qnew-lang-dropdown__toggle{ display:flex; align-items:center; gap:0.25rem; padding:0.4rem 0.5rem; border-radius:8px; background:none; border:none; color:var(--qnew-muted); font-size:0.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:color .15s, background .15s; }
.qnew-lang-dropdown__toggle:hover{ color:#fff; background:var(--qnew-surface); }
.qnew-lang-dropdown__chevron{ width:0.85rem; height:0.85rem; transition:transform .2s; }
.qnew-lang-dropdown.is-open .qnew-lang-dropdown__chevron{ transform:rotate(180deg); }
.qnew-lang-dropdown__menu{ position:absolute; right:0; top:calc(100% + 0.5rem); width:6rem; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:10px; box-shadow:0 20px 40px rgba(0,0,0,0.4); overflow:hidden; opacity:0; transform:scale(0.95); transform-origin:top right; pointer-events:none; transition:opacity .15s, transform .15s; z-index:60; }
.qnew-lang-dropdown.is-open .qnew-lang-dropdown__menu{ opacity:1; transform:scale(1); pointer-events:auto; }
.qnew-lang-dropdown__option{ display:block; width:100%; text-align:left; padding:0.5rem 0.75rem; background:none; border:none; color:var(--qnew-muted); font-size:0.85rem; font-family:inherit; cursor:pointer; transition:background .15s, color .15s; }
.qnew-lang-dropdown__option:hover{ background:var(--qnew-line); color:#fff; }

@media (max-width:980px){
  .qnew-header-utilities__lang-cluster{ display:none; }
  .qnew-header-search--inline{ max-width:none; }
}

/* Account & cart icons: the parent theme's fill/stroke/color rules for
   these SVGs were scoped to .qode-site-header__utilities as an ancestor,
   which no longer wraps them after the header consolidation. Restore
   explicit white icons here (cart badge below is untouched -- it's styled
   separately by .qode-site-cart__count and stays purple as requested). */
.qode-site-header__account,
.qode-site-header__cart{
  display:inline-flex;
  align-items:center;
  height:40px;
  color:#ffffff;
  transition:color .15s;
}
.qode-site-header__account svg,
.qode-site-header__cart svg{
  fill:none;
  stroke:#ffffff;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .15s;
}
.qode-site-header__account:hover,
.qode-site-header__cart:hover{
  color:var(--qnew-accent);
}
.qode-site-header__account:hover svg,
.qode-site-header__cart:hover svg{
  stroke:var(--qnew-accent);
}

/* Brand logo: single-row "Q[hex]DE GAMES." wordmark with an adjacent
   tagline, both on one non-wrapping line via .qnew-brand-group. Overrides
   the parent's column-flex brand container back to a simple inline link;
   the whole group is vertically centered against the search bar and
   utilities via the header row's own align-items:center. */
.qnew-brand-group{
  display:flex;
  align-items:center; /* the logo is itself a nested flex container with no
                          baseline-participating children, so its synthetic
                          baseline is its box's bottom edge, not the actual
                          text baseline -- align-items:baseline here was
                          comparing that bottom edge against the tagline's
                          real text baseline, causing the mismatch. Both
                          strings are all-caps with no descenders, so
                          centering by box height reads as aligned. */
  gap:1.25rem; /* tightened from 2.5rem now that the tagline carries its own divider + padding-left */
  white-space:nowrap;
}
.qode-site-header__brand.qnew-brand,
.qode-site-footer__brand.qnew-brand{
  width:auto;
  flex-direction:row;
  align-items:center;
  line-height:1;
}
.qnew-brand__mark{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-family:'Rajdhani','Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:700; /* Rajdhani ships real weights now (was locked to 400 under Black Ops One, which never actually loaded) */
  letter-spacing:0.02em;
  position:relative;
  top:3px; /* Rajdhani's metrics sit slightly higher than the tagline's Inter baseline -- nudged down to match */
  font-size:1.1rem; /* text-xl -- this theme doesn't load Tailwind, so the
                       utility class names in the markup need a real rule */
  color:#ffffff;
  text-transform:uppercase;
}
@media (min-width:1024px){
  .qnew-brand__mark{ font-size:1.3rem; /* lg:text-2xl */ }
}
.qnew-brand__key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0.08em;
  color:var(--qnew-accent);
  filter:drop-shadow(0 0 5px rgba(0,206,122,0.8));
}
.qnew-brand__key-icon{
  width:0.72em;
  height:0.72em;
}
/* animate-pulse: real @keyframes behind the utility-style class name,
   since this theme doesn't load Tailwind. Subtle glow pulse on the hollow
   hexagon's core; disabled for users who've asked for reduced motion. */
@keyframes qnew-pulse-glow{
  0%, 100%{ opacity:1; filter:drop-shadow(0 0 4px rgba(0,206,122,0.6)); }
  50%{ opacity:0.6; filter:drop-shadow(0 0 11px rgba(0,206,122,0.95)); }
}
.qnew-brand__key-icon.animate-pulse{
  animation:qnew-pulse-glow 2s cubic-bezier(0.4,0,0.6,1) infinite;
}
@media (prefers-reduced-motion: reduce){
  .qnew-brand__key-icon.animate-pulse{ animation:none; }
}
/* Sliced-E: a thin diagonal neon cut across the E in "DE", for a
   futuristic notched-letterform accent without altering the glyph itself. */
.qnew-brand__sliced-e{
  position:relative;
  display:inline-block;
}
.qnew-brand__sliced-e::after{
  content:'';
  position:absolute;
  left:-10%;
  right:-10%;
  top:44%;
  height:2px;
  background:var(--qnew-accent);
  transform:rotate(-20deg);
  box-shadow:0 0 4px rgba(0,206,122,0.85);
  pointer-events:none;
}
.qnew-brand__games{
  margin-left:0.4em;
  color:var(--qnew-accent);
  font-weight:500; /* one step lighter than QODE's 700, for visual hierarchy -- possible now that Rajdhani actually ships multiple weights */
  letter-spacing:0.06em;
}
/* Finisher dot: an isolated literal period, not the Black Ops One glyph
   (its own period sits oddly relative to the letterforms). Rendered in a
   standard sans-serif so it draws as a clean, perfectly round dot.
   align-self:baseline (not a manual transform) is what actually locks it
   to the wordmark's text baseline -- real flexbox baseline math, computed
   from font metrics, so it holds correctly at any font-size/breakpoint
   instead of a pixel guess tuned to one viewport. */
.qnew-brand__dot{
  display:inline-block;
  align-self:baseline;
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:900;
  font-size:1.3em;
  color:var(--qnew-accent);
  text-shadow:0 0 6px rgba(0,206,122,0.85);
  user-select:none;
  margin-left:0.25rem; /* ml-1 */
  line-height:1;
}
.qnew-brand__tagline{
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  font-size:0.75rem;
  line-height:1;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffffff;
  white-space:nowrap;
  position:relative;
  top:2px;
  padding-left:1.1rem;
}
.qnew-brand__tagline::before{
  content:'';
  position:absolute;
  left:0;
  top:-2px;
  height:1.4em;
  width:1px;
  background:rgba(0,206,122,0.4);
}

/* Original abstract game-art placeholders (no third-party trademarks) */
.qnew-art-1{ background:linear-gradient(160deg,#3a2a52,#16101f); }
.qnew-art-2{ background:linear-gradient(160deg,#4a1420,#1a0509); }
.qnew-art-3{ background:linear-gradient(160deg,#0d3b4a,#061119); }
.qnew-art-4{ background:linear-gradient(160deg,#2b3a1e,#0a0f08); }
.qnew-art-5{ background:linear-gradient(160deg,#4a3510,#1a1204); }
.qnew-art-6{ background:linear-gradient(160deg,#1a2a4a,#060a14); }
.qnew-art-7{ background:linear-gradient(160deg,#4a1046,#14041d); }
.qnew-art-8{ background:linear-gradient(160deg,#0f4a2e,#041a10); }

/* ============================================================
   SITE-WIDE RESKIN -- brings the storefront's navy/neon-green
   design system to every page, not just the homepage. Reskins
   the EXISTING functional markup on each page type (generic
   pages, shop catalogue, product page, my-account, and the
   WooCommerce Blocks cart/checkout) rather than rebuilding any
   of their PHP/logic -- keeps checkout and payment flows intact.
   ============================================================ */

/* Generic pages (About, Terms, Refund Policy, etc.) */
section.wrap.page{ max-width:56rem; margin:0 auto; padding:3rem 1.5rem 5rem; }
section.wrap.page h1{ font-size:2rem; font-weight:800; margin-bottom:1.5rem; }
section.wrap.page .prose{ color:var(--qnew-muted); font-size:0.95rem; line-height:1.7; }
section.wrap.page .prose h2{ color:var(--qnew-ink); font-size:1.3rem; font-weight:700; margin-top:2rem; }
section.wrap.page .prose a{ color:var(--qnew-accent); }

/* My Account renders through the generic page template, which is built
   for narrow article text (Terms, Privacy Policy) -- 56rem max-width was
   squeezing the login/register two-column layout down before it ever hit
   its own 800px breakpoint. WooCommerce always adds this body class on
   the account page, so widen the container specifically there. */
body.woocommerce-account section.wrap.page{ max-width:68rem; }
body.woocommerce-account section.wrap.page .prose{ color:inherit; font-size:inherit; line-height:inherit; }

/* Shop / catalogue archive */
.qode-catalogue{ background:var(--qnew-bg); }
.qode-catalogue-hero{ background:var(--qnew-surface); border-bottom:1px solid var(--qnew-line); padding:3rem 0; }
.qode-catalogue-shell{ width:calc(100% - 32px); max-width:1360px; margin-inline:auto; }
@media (min-width:980px){ .qode-catalogue-shell{ width:calc(100% - 80px); } }
.qode-catalogue-hero__inner{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between; }
.qode-kicker{ color:var(--qnew-accent); font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:0.5rem; }
.qode-catalogue-hero h1{ color:var(--qnew-ink); font-size:2rem; font-weight:800; margin:0 0 0.5rem; }
.qode-catalogue-hero__intro{ color:var(--qnew-muted); font-size:0.9rem; max-width:32rem; }
.qode-catalogue-search{ position:relative; display:flex; align-items:center; }
.qode-catalogue-search input{ background:#fff; color:var(--qnew-bg); border:none; border-radius:var(--qnew-radius-pill); padding:0.7rem 1.25rem; font-size:0.9rem; min-width:18rem; }
.qode-catalogue-search svg{ position:absolute; left:0.9rem; width:1rem; height:1rem; color:#64748b; }
.qode-catalogue-search input{ padding-left:2.5rem; }
.qode-catalogue-search button{ background:var(--qnew-accent); color:var(--qnew-bg); border:none; border-radius:var(--qnew-radius-pill); font-weight:700; font-size:0.8rem; padding:0.55rem 1.1rem; margin-left:0.5rem; cursor:pointer; }
.qode-catalogue__workspace{ display:flex; gap:2rem; padding:2.5rem 0; align-items:flex-start; }
.qode-filter-toggle{ display:none; background:var(--qnew-surface); border:1px solid var(--qnew-line); color:var(--qnew-ink); border-radius:var(--qnew-radius-control); padding:0.6rem 1rem; font-weight:600; font-size:0.85rem; cursor:pointer; }
.qode-filter-panel{ flex-shrink:0; width:15rem; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1.25rem; }
.qode-filter-panel__header h2{ font-size:1rem; font-weight:700; margin:0; }
.qode-filter-field{ display:block; margin-bottom:1rem; }
.qode-filter-field span{ display:block; font-size:0.75rem; font-weight:600; color:var(--qnew-muted); margin-bottom:0.35rem; }
.qode-filter-field select{ width:100%; background:var(--qnew-bg); border:1px solid var(--qnew-line); color:var(--qnew-ink); border-radius:var(--qnew-radius-control); padding:0.5rem; font-size:0.85rem; }
.qode-product-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:1.25rem; flex:1; }
.qode-catalogue-card{ background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); overflow:hidden; transition:border-color .15s; }
.qode-catalogue-card:hover{ border-color:rgba(0,206,122,0.5); }
.qode-catalogue-card__cover{ position:relative; display:block; aspect-ratio:3/4; background:linear-gradient(160deg,#1a2a4a,#060a14); }
.qode-catalogue-card__flags{ position:absolute; top:0.5rem; left:0.5rem; right:0.5rem; display:flex; justify-content:space-between; }
.qode-card-flag{ font-size:0.6rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:var(--qnew-radius-pill); }
.qode-card-flag--demo{ background:rgba(0,0,0,0.55); color:#fff; }
.qode-card-flag--sale{ background:var(--qnew-deal); color:#fff; }
.qode-catalogue-card__body{ padding:0.85rem; }
.qode-card-badges{ display:flex; flex-wrap:wrap; gap:0.3rem; margin-bottom:0.5rem; }
.qode-card-badge{ font-size:0.6rem; font-weight:600; background:var(--qnew-bg); border:1px solid var(--qnew-line); color:var(--qnew-muted); padding:0.1rem 0.4rem; border-radius:4px; }
.qode-catalogue-card__title{ font-size:0.9rem; font-weight:700; margin:0 0 0.5rem; }
.qode-catalogue-card__title a{ color:var(--qnew-ink); }
.qode-catalogue-card__price del{ color:var(--qnew-muted); font-size:0.72rem; }
.qode-catalogue-card__price ins{ text-decoration:none; color:var(--qnew-ink); font-weight:800; font-size:0.95rem; margin-left:0.35rem; }
.qode-availability{ display:block; font-size:0.7rem; color:var(--qnew-muted); margin-top:0.25rem; }
.qode-card-action{ display:flex; align-items:center; justify-content:center; gap:0.35rem; background:var(--qnew-accent); color:var(--qnew-bg); font-weight:700; font-size:0.8rem; padding:0.55rem; border-radius:var(--qnew-radius-control); margin-top:0.75rem; }
.qode-card-action:hover{ background:var(--qnew-accent-dim); }

/* Two-button catalogue card layout: BUY (primary/solid) + ADD (secondary/outline),
   matching the .qpp-btn--solid / .qpp-btn--outline pattern already used on the
   single-product page for visual consistency across the site. Visual-only for
   now (both currently link to the product page) -- wiring to real add-to-cart /
   buy-now logic is a separate step once checkout goes live. */
.qode-card-actions{
  display:flex;
  gap:0.5rem;
  margin-top:0.75rem;
}
.qode-card-action--buy,
.qode-card-action--add{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:0.55rem 0.5rem;
  border-radius:var(--qnew-radius-control);
  transition:all 0.15s ease-in-out;
  margin-top:0;
}
.qode-card-action--buy{
  background:var(--qnew-accent);
  color:var(--qnew-bg);
}
.qode-card-action--buy:hover{
  background:var(--qnew-accent-dim);
}
.qode-card-action--add{
  background:#252836;
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.4);
}
.qode-card-action--add:hover{
  background:#32364a;
  border-color:#ffffff;
}
.qode-pagination a, .qode-pagination span{ color:var(--qnew-ink); }

/* Catalogue/archive pagination -- "Items X-Y of Z" summary + numbered
   page links with prev/next arrows, matching the qnew-accent styling
   used everywhere else on the catalogue page (BUY buttons, etc). */
.qode-catalogue-pagination{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  padding:2rem 0;
}
.qode-catalogue-pagination__summary{
  color:var(--qnew-ink);
  font-size:0.95rem;
  margin:0;
}
.qode-catalogue-pagination__nav ul{
  display:flex;
  align-items:center;
  gap:0.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.qode-catalogue-pagination__link,
.qode-catalogue-pagination__nav span.qode-catalogue-pagination__link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:2.5rem;
  height:2.5rem;
  padding:0 0.5rem;
  border-radius:var(--qnew-radius-control);
  color:var(--qnew-ink);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  transition:background-color .15s;
}
.qode-catalogue-pagination__link:hover{
  background:rgba(255,255,255,0.08);
}
.qode-catalogue-pagination__nav span.qode-catalogue-pagination__link.current{
  background:var(--qnew-accent);
  color:var(--qnew-bg);
}
.qode-catalogue-pagination__nav .qode-catalogue-pagination__link.dots{
  color:var(--qnew-muted);
}
.qode-catalogue-pagination__nav .prev.qode-catalogue-pagination__link,
.qode-catalogue-pagination__nav .next.qode-catalogue-pagination__link{
  background:transparent;
}
.qode-catalogue-pagination__nav .prev.qode-catalogue-pagination__link svg,
.qode-catalogue-pagination__nav .next.qode-catalogue-pagination__link svg{
  width:1.1rem;
  height:1.1rem;
}

/* Single product page */
.qode-product-page{ background-color: #434d91 !important; }
.qpp-shell{ width:calc(100% - 32px); max-width:1360px; margin-inline:auto; }
@media (min-width:980px){ .qpp-shell{ width:calc(100% - 80px); } }
.qpp-breadcrumb{ padding:0; margin:0 0 0.85rem; font-size:0.8rem; color:var(--qnew-muted); }
.qpp-breadcrumb ol{ display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem; margin:0; padding:0; list-style:none; }
.qpp-breadcrumb li{ display:flex; align-items:center; gap:0.4rem; }
.qpp-breadcrumb a{ color:var(--qnew-muted); display:inline-flex; align-items:center; gap:0.35rem; font-size:0.72rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.qpp-breadcrumb a:hover, .qpp-breadcrumb a:focus-visible{ color:var(--qnew-accent); }
.qpp-breadcrumb svg{ width:11px; height:11px; }
.qpp-breadcrumb__sep{ display:inline-flex; align-items:center; color:var(--qnew-muted); opacity:0.55; }
.qpp-breadcrumb__sep svg{ width:8px; height:8px; }
.qpp-breadcrumb [aria-current]{ color:var(--qnew-ink); font-size:0.72rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; }
.qpp-grid{ display:grid; gap:2rem; padding-bottom:3rem; }
@media (min-width:900px){ .qpp-grid{ grid-template-columns:minmax(300px,420px) 1fr; } }
.qpp-media{ width:100%; max-width:420px; }
.qpp-cover{ position:relative; width:100%; aspect-ratio:3/4; border-radius:var(--qnew-radius-card); overflow:hidden; margin:0; background:var(--qnew-surface); border:1px solid var(--qnew-line); }
.qpp-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.qpp-arrow:hover, .qpp-arrow:focus-visible{ border-color:rgba(0,206,122,0.6); }
.qpp-thumb.is-active, .qpp-thumb:hover, .qpp-thumb:focus-visible{ border-color:rgba(0,206,122,0.75); }
.qpp-pill{ background:var(--qnew-accent); color:var(--qnew-bg); }
.qpp-btn--solid{ background:var(--qnew-accent); color:var(--qnew-bg); border:1px solid var(--qnew-accent-dim); box-shadow:0 6px 20px rgba(0,206,122,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }
.qpp-activation-link{ color:var(--qnew-accent); }
.qpp-activation-link:hover, .qpp-activation-link:focus-visible{ color:var(--qnew-accent-dim); }
.qpp-thumbs{ color:var(--qnew-muted); font-size:0.8rem; margin-top:0.75rem; }
.qpp-title-row{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.75rem; }
.qpp-title{ font-size:1.75rem; font-weight:800; margin:0; color:var(--qnew-ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; overflow:visible !important; white-space:normal !important; text-overflow:clip !important; min-width:0; }
@media (min-width:1024px){ .qpp-title{ font-size:2.1rem; } }
.qpp-price{ font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
/* Feature headings inside the About section's product description --
   bold, distinct, brand-accent-colored, matching the requested "punchy
   sections" treatment for gameplay feature breakdowns. */
.qode-product-prose h2, .qode-product-prose h3{ color:var(--qnew-accent); font-size:1.05rem; font-weight:800; margin:1.5rem 0 0.5rem; letter-spacing:0.01em; }
.qode-product-prose h2:first-child, .qode-product-prose h3:first-child{ margin-top:0; }
.qode-product-prose p{ color:var(--qnew-muted); font-size:0.92rem; line-height:1.7; margin:0 0 1rem; }
.qode-product-prose p:first-child{ color:var(--qnew-ink); font-size:1rem; }
.qpp-price-block{ display:flex; align-items:flex-end; gap:0.75rem; margin-bottom:1.25rem; padding:0; border-radius:0; background:none; }
.qpp-price{ display:flex; flex-direction:column; gap:0.25rem; }
.qpp-price del{ display:block; margin:0; color:var(--qnew-muted); font-size:1rem; line-height:1; }
.qpp-price ins{ display:block; margin:0; text-decoration:none; color:var(--qnew-accent); font-weight:800; font-size:2rem; line-height:1; }
.qpp-buttons{ display:flex; gap:0.75rem; margin-bottom:1.25rem; }
.qpp-btn{ flex:1; padding:0.75rem 1rem; border-radius:var(--qnew-radius-pill); font-weight:700; font-size:0.85rem; border:none; cursor:pointer; }
.qpp-btn--outline{ background:transparent; border:1px solid var(--qnew-line); color:var(--qnew-ink); }
.qpp-btn--solid{ background:var(--qnew-accent); color:var(--qnew-bg); }
.qpp-checks{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem 1.25rem; margin-bottom:1.25rem; }
@media (max-width:640px){ .qpp-checks{ grid-template-columns:1fr; } }
.qpp-check{ display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--qnew-muted); }
.qpp-check svg{ color:var(--qnew-accent); width:1rem; height:1rem; flex-shrink:0; }

/* Discount badge, real Buy Now/Add to Cart button pair, per-check info
   tooltips, and the buy-box quick-info panel (Publisher/Platform/etc). */
.qpp-discount-badge{ display:inline-flex; align-items:center; background:var(--qnew-deal); color:#fff; font-weight:800; font-size:0.95rem; padding:0.4rem 0.9rem; border-radius:var(--qnew-radius-pill); margin:0 0 0.3rem; line-height:1; }
.qpp-buttons form{ margin:0; flex:1; }
.qpp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; }
.qpp-btn svg{ width:1.1rem; height:1.1rem; }
.qpp-check{ position:relative; }
.qpp-check__info{ display:inline-flex; color:var(--qnew-muted); cursor:help; }
.qpp-check__info svg{ width:0.9rem; height:0.9rem; color:var(--qnew-muted); }

/* Draft preview banner: was completely unstyled before (default browser
   block div), which is why it rendered as a large, heavy purple block.
   Kept clearly visible and legible -- this label exists to prevent
   mistaking a draft for a real listing, so it stays present, just
   compact rather than dominating the page. */
.qode-visual-preview-banner{
  display:block;
  background:#3a2a0d;
  border-bottom:1px solid #7a5a1a;
  color:#ffd479;
  font-size:0.75rem;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  padding:0.4rem 1rem;
}

/* Sticky purchase bar: hidden by default, revealed via JS once the
   original hero buy-box scrolls out of view. */
.qode-sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--qnew-surface); border-top:1px solid var(--qnew-line); box-shadow:0 -10px 30px rgba(0,0,0,0.35); transform:translateY(100%); transition:transform .25s ease; }
.qode-sticky-bar.is-visible{ transform:translateY(0); }
.qode-sticky-bar__inner{ width:calc(100% - 32px); max-width:1200px; margin-inline:auto; padding:0.85rem 0; display:flex; align-items:center; gap:1.25rem; }
@media (min-width:980px){ .qode-sticky-bar__inner{ width:calc(100% - 80px); } }
.qode-sticky-bar__title{ display:none; font-size:0.95rem; font-weight:700; color:var(--qnew-ink); flex-shrink:0; }
@media (min-width:900px){ .qode-sticky-bar__title{ display:block; max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
.qode-sticky-bar__price{ display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.qode-sticky-bar__price del{ color:var(--qnew-muted); font-size:0.85rem; }
.qode-sticky-bar__price ins{ text-decoration:none; color:var(--qnew-ink); font-weight:800; font-size:1.3rem; }
.qode-sticky-bar__buttons{ display:flex; gap:0.75rem; flex:1; min-width:0; }
.qode-sticky-bar__buttons form{ margin:0; flex:1; max-width:16rem; }
.qode-sticky-bar .qpp-btn{ padding:0.6rem 1rem; font-size:0.85rem; }
@media (max-width:640px){
  .qode-sticky-bar__inner{ gap:0.75rem; padding:0.7rem 0; }
  .qode-sticky-bar__buttons form{ max-width:none; }
}

/* Product-page intro heading: sits right below the hero/photo, above the
   Media/About/Requirements stack. Same phrase pattern on every product,
   with the real title interpolated -- this heading also serves as the
   Media section's title, so Media itself renders without its own <h2>. */
.qode-product-intro{ padding:2.5rem 0 0.5rem; text-align:left; }
.qode-product-intro__title{ color:var(--qnew-ink); font-size:1.4rem; font-weight:800; margin:0; }
@media (min-width:1024px){ .qode-product-intro__title{ font-size:1.6rem; } }

/* Steam activation guide modal */
.qpp-activation-link{ background:none; border:none; padding:0; font:inherit; cursor:pointer; text-align:left; display:block; margin-top:0.5rem; }
.qode-modal{ display:none; position:fixed; inset:0; z-index:200; }
.qode-modal.is-open{ display:block; }
.qode-modal__overlay{ position:absolute; inset:0; background:rgba(8,14,28,0.85); backdrop-filter:blur(2px); animation:qode-modal-fade .2s ease; }
.qode-modal__panel{ position:relative; z-index:1; max-width:44rem; width:calc(100% - 2rem); margin:5vh auto; max-height:90vh; overflow-y:auto; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); box-shadow:0 30px 80px rgba(0,0,0,0.5); animation:qode-modal-pop .2s ease; -webkit-overflow-scrolling:touch; }
.qode-modal__close{ position:absolute; top:0.75rem; right:0.75rem; z-index:2; width:2.25rem; height:2.25rem; border-radius:50%; background:rgba(8,14,28,0.75); border:1px solid var(--qnew-line); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.qode-modal__close:hover{ background:var(--qnew-accent); color:var(--qnew-bg); border-color:var(--qnew-accent); }
.qode-modal__close svg{ width:1.1rem; height:1.1rem; }
.qode-modal__body{ padding:0.5rem; }
.qode-modal__body img{ display:block; width:100%; height:auto; border-radius:calc(var(--qnew-radius-card) - 4px); }
.qode-modal__missing{ padding:2.5rem 1.5rem; text-align:center; color:var(--qnew-muted); font-size:0.9rem; }
body.qode-modal-open{ overflow:hidden; }
@keyframes qode-modal-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes qode-modal-pop{ from{ opacity:0; transform:translateY(12px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:640px){
  .qode-modal__panel{ margin:0; max-height:100vh; width:100%; border-radius:0; }
}
.qpp-check__info:hover svg, .qpp-check__info:focus-visible svg{ color:var(--qnew-accent); }
.qpp-quick-info{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem 1.5rem; margin:1.25rem 0 0; padding-top:1.25rem; border-top:1px solid var(--qnew-line); }
.qpp-quick-info__col{ display:grid; grid-template-columns:auto 1fr; row-gap:0.6rem; column-gap:0.5rem; align-items:center; }
.qpp-quick-info__col div{ display:contents; }
.qpp-quick-info dt{ color:var(--qnew-muted); font-size:0.78rem; font-weight:600; white-space:nowrap; }
.qpp-quick-info dd{ color:var(--qnew-ink); font-size:0.95rem; font-weight:700; margin:0; }
.qpp-quick-info__flags{ display:flex; align-items:center; gap:0.35rem; }
.qpp-quick-info__flags .qode-lang-flag{ font-size:1.15rem; }
.qpp-quick-info__more{ color:var(--qnew-muted); font-size:0.8rem; font-weight:600; }
@media (max-width:640px){ .qpp-quick-info{ grid-template-columns:1fr; gap:0.75rem; } }

/* Classic WooCommerce forms (My Account login/register) */
.woocommerce-form{ max-width:26rem; }
.woocommerce-form-row label{ display:block; font-size:0.8rem; font-weight:600; color:var(--qnew-muted); margin-bottom:0.35rem; }
.woocommerce-Input, input.input-text, select{ width:100%; background:var(--qnew-surface); border:1px solid var(--qnew-line); color:var(--qnew-ink); border-radius:var(--qnew-radius-control); padding:0.6rem 0.85rem; font-size:0.9rem; margin-bottom:0.5rem; }
.woocommerce-Input:focus, input.input-text:focus{ outline:2px solid var(--qnew-accent); }
.woocommerce-form .button, .woocommerce a.button, .woocommerce button.button, #place_order{ background:var(--qnew-accent); color:var(--qnew-bg); font-weight:700; border:none; border-radius:var(--qnew-radius-pill); padding:0.65rem 1.5rem; cursor:pointer; }
.woocommerce-form .button:hover, #place_order:hover{ background:var(--qnew-accent-dim); }
.woocommerce-LostPassword a, .woocommerce-form a{ color:var(--qnew-accent); }

/* My Account: login/register split, dashboard sidebar nav, addresses.
   Verified against the real rendered markup, not guessed from templates. */
.woocommerce { max-width: 100%; margin: 0 auto; padding: 0.3rem 1.5rem 4rem; }
.woocommerce h2 { font-size: 1.4rem; font-weight: 800; color: var(--qnew-ink); margin: 0 1.25rem; }

/* Login / Register: single card, JS-toggled between the two -- not a
   two-column layout, so WooCommerce's own float-based .col2-set CSS never
   gets a chance to fight it. */
#customer_login.u-columns{ display:block !important; width:100%; max-width:26rem; margin:0 auto; }
#customer_login .col-1, #customer_login .col-2,
#customer_login .u-column1, #customer_login .u-column2{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  background:var(--qnew-surface);
  border:1px solid var(--qnew-line);
  border-radius:var(--qnew-radius-card);
  padding:1.75rem;
}
#customer_login .u-column2{ display:none; }
#customer_login.qode-show-register .u-column1{ display:none; }
#customer_login.qode-show-register .u-column2{ display:block; }
.qode-auth-toggle{ text-align:center; font-size:0.85rem; color:var(--qnew-muted); margin-top:1rem !important; }
.qode-auth-toggle a{ color:var(--qnew-accent); font-weight:600; }

/* Social login: buttons + "or" divider above the traditional form fields */
.qode-social-login{ display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; }
.qode-social-login-container{ display:flex; flex-direction:column; gap:0.6rem; }
.qode-social-login__divider{ display:flex; align-items:center; text-align:center; color:var(--qnew-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; margin:0 0 1.25rem !important; }
.qode-social-login__divider::before, .qode-social-login__divider::after{ content:''; flex:1; height:1px; background:var(--qnew-line); }
.qode-social-login__divider span{ padding:0 0.85rem; }
.woocommerce-form-login__rememberme{ display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--qnew-muted); margin-bottom:1rem; cursor:pointer; }
.woocommerce-form__input-checkbox{ width:1rem; height:1rem; accent-color:var(--qnew-accent); cursor:pointer; }
.woocommerce-privacy-policy-text p{ color:var(--qnew-muted); font-size:0.78rem; line-height:1.5; margin:0.5rem 0 1rem; }

/* Dashboard layout: sidebar nav + content, side by side on desktop */
.woocommerce-MyAccount-navigation{ margin-bottom:2rem; }
@media (min-width:900px){
  .woocommerce > div:not(#customer_login):not(.woocommerce-notices-wrapper){ display:grid; grid-template-columns:14rem 1fr; gap:2.5rem; align-items:start; }
  .woocommerce-MyAccount-navigation{ margin-bottom:0; }
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); overflow:hidden; }
.woocommerce-MyAccount-navigation-link{ border-bottom:1px solid var(--qnew-line); }
.woocommerce-MyAccount-navigation-link:last-child{ border-bottom:none; }
.woocommerce-MyAccount-navigation-link a{ display:block; padding:0.75rem 1rem; color:var(--qnew-muted); font-size:0.9rem; font-weight:600; }
.woocommerce-MyAccount-navigation-link a:hover{ color:var(--qnew-ink); background:var(--qnew-bg); }
.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-MyAccount-navigation-link--orders.is-active a,
.woocommerce-MyAccount-navigation-link--downloads.is-active a,
.woocommerce-MyAccount-navigation-link--edit-address.is-active a,
.woocommerce-MyAccount-navigation-link--edit-account.is-active a,
.woocommerce-MyAccount-navigation-link--game-keys.is-active a,
.woocommerce-MyAccount-navigation-link--support.is-active a{ color:var(--qnew-accent); background:var(--qnew-bg); }
.woocommerce-MyAccount-content p{ color:var(--qnew-muted); font-size:0.92rem; line-height:1.7; }
.woocommerce-MyAccount-content a{ color:var(--qnew-accent); }

/* Addresses */
.woocommerce-Addresses.col2-set{ display:grid !important; grid-template-columns:1fr !important; gap:1.25rem; width:100% !important; }
@media (min-width:769px){
  .woocommerce-Addresses.col2-set{ grid-template-columns:1fr 1fr !important; }
}
.woocommerce-Addresses.col2-set .col-1, .woocommerce-Addresses.col2-set .col-2{
  width:100% !important;
  max-width:100% !important;
  float:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.woocommerce-Address{ background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1.25rem; }
.woocommerce-Address-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; }
.woocommerce-Address-title h2{ font-size:1rem; margin:0; }
.woocommerce-Address-title a.edit{ color:var(--qnew-accent); font-size:0.82rem; font-weight:600; }
.woocommerce-Address address{ color:var(--qnew-muted); font-size:0.88rem; font-style:normal; line-height:1.6; }

/* Orders table */
.woocommerce-orders-table{ width:100%; border-collapse:collapse; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); overflow:hidden; }
.woocommerce-orders-table th{ text-align:left; padding:0.75rem 1rem; color:var(--qnew-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; border-bottom:1px solid var(--qnew-line); }
.woocommerce-orders-table td{ padding:0.85rem 1rem; color:var(--qnew-ink); font-size:0.88rem; border-bottom:1px solid var(--qnew-line); }
.woocommerce-orders-table tr:last-child td{ border-bottom:none; }
.woocommerce-orders-table .button{ font-size:0.78rem; padding:0.4rem 0.9rem; }

/* WooCommerce Blocks (Cart & Checkout) -- these render client-side via
   React using WooCommerce's own stable, documented block class names. */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout{ color:var(--qnew-ink); }
.wc-block-cart, .wc-block-checkout{ background:var(--qnew-bg); }
.wc-block-components-product-name{ color:var(--qnew-ink); font-weight:600; }
.wc-block-cart-item__wrap, .wc-block-cart-items, .wc-block-components-totals-wrapper{ background:var(--qnew-surface); border-color:var(--qnew-line) !important; }
.wc-block-components-totals-item, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value{ color:var(--qnew-ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ color:var(--qnew-accent); font-weight:800; }
.wc-block-components-button, .wc-block-cart__submit-button, .wc-block-components-checkout-return-to-cart-button{ background:var(--qnew-accent) !important; color:var(--qnew-bg) !important; border-radius:var(--qnew-radius-pill) !important; font-weight:700 !important; border:none !important; }
.wc-block-components-button:hover{ background:var(--qnew-accent-dim) !important; }
.wc-block-components-text-input input, .wc-block-components-textarea textarea, .wc-block-components-select select{ background:var(--qnew-surface) !important; border-color:var(--qnew-line) !important; color:var(--qnew-ink) !important; }
.wc-block-components-text-input label{ color:var(--qnew-muted) !important; }
.wc-block-components-radio-control__label, .wc-block-components-checkbox__label{ color:var(--qnew-ink); }
.wc-block-components-order-summary, .wc-block-checkout__payment-method, .wc-block-checkout__main{ background:transparent; }
.wc-block-components-panel, .wc-block-components-checkout-step{ background:var(--qnew-surface); border-color:var(--qnew-line) !important; border-radius:var(--qnew-radius-card); }
.wc-block-components-checkout-step__title{ color:var(--qnew-ink); }
.wc-block-components-checkout-step__description{ color:var(--qnew-muted); }

/* Product page: "Why Buy From Us" trust strip and native WooCommerce
   reviews, reskinned to match the storefront design system. */
.qpp-why-buy{ list-style:none; margin:0; padding:0; display:grid; gap:0.75rem; max-width:40rem; }
@media (min-width:640px){ .qpp-why-buy{ grid-template-columns:repeat(3,1fr); } }
.qpp-why-buy li{ display:flex; align-items:flex-start; gap:0.6rem; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1rem; }
.qpp-why-buy li svg{ width:1.25rem; height:1.25rem; color:var(--qnew-accent); flex-shrink:0; margin-top:0.1rem; }
.qpp-why-buy li span{ color:var(--qnew-ink); font-size:0.85rem; font-weight:600; line-height:1.4; }

.qpp-reviews .woocommerce-Reviews-title{ font-size:1.1rem; font-weight:800; color:var(--qnew-ink); margin:0 0 1rem; }
.qpp-reviews .woocommerce-noreviews{ color:var(--qnew-muted); font-size:0.9rem; }
.qpp-reviews #comments ol.commentlist{ list-style:none; margin:0 0 2rem; padding:0; display:flex; flex-direction:column; gap:1rem; }
.qpp-reviews .comment_container{ display:flex; gap:0.85rem; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1rem; }
.qpp-reviews .comment_container img{ border-radius:50%; flex-shrink:0; }
.qpp-reviews .star-rating{ color:var(--qnew-accent); font-size:0.85rem; margin-bottom:0.35rem; }
.qpp-reviews .description p{ color:var(--qnew-muted); font-size:0.88rem; line-height:1.6; margin:0.35rem 0 0; }
.qpp-reviews #review_form_wrapper{ background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1.5rem; }
.qpp-reviews #reply-title{ font-size:1rem; font-weight:800; color:var(--qnew-ink); display:block; margin-bottom:1rem; }
.qpp-reviews .comment-form-rating select,
.qpp-reviews .comment-form-author input,
.qpp-reviews .comment-form-email input,
.qpp-reviews .comment-form-comment textarea{ width:100%; max-width:28rem; background:var(--qnew-bg); border:1px solid var(--qnew-line); color:var(--qnew-ink); border-radius:var(--qnew-radius-control); padding:0.55rem 0.8rem; font-size:0.88rem; margin-top:0.3rem; margin-bottom:0.9rem; font-family:inherit; }
.qpp-reviews label{ color:var(--qnew-muted); font-size:0.82rem; font-weight:600; }
.qpp-reviews .form-submit input[type="submit"]{ background:var(--qnew-accent); color:var(--qnew-bg); font-weight:700; border:none; border-radius:var(--qnew-radius-pill); padding:0.65rem 1.5rem; cursor:pointer; font-size:0.85rem; }
.qpp-reviews .form-submit input[type="submit"]:hover{ background:var(--qnew-accent-dim); }

/* Activation section: generic Steam-key redemption walkthrough shown
   when a product has no real, product-specific instructions. */
.qode-activation-guide__intro{ color:var(--qnew-muted); font-size:0.92rem; margin:0 0 1.5rem; }
.qode-activation-guide{ list-style:none; margin:0 0 1.75rem; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
.qode-activation-step{ display:flex; flex-direction:column; gap:0.6rem; background:var(--qnew-surface); border:1px solid var(--qnew-line); border-radius:var(--qnew-radius-card); padding:1.1rem; }
.qode-activation-step__num{ display:inline-flex; align-items:center; justify-content:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--qnew-accent); color:var(--qnew-bg); font-weight:800; font-size:0.85rem; }
.qode-activation-step strong{ color:var(--qnew-ink); font-size:0.92rem; font-weight:800; }
.qode-activation-step span:last-child{ color:var(--qnew-muted); font-size:0.82rem; line-height:1.5; }
@media (max-width:900px){ .qode-activation-guide{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .qode-activation-guide{ grid-template-columns:1fr; } }

.qode-activation-notes{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; border-top:1px solid var(--qnew-line); padding-top:1.25rem; }
.qode-activation-note{ display:flex; gap:0.75rem; align-items:flex-start; }
.qode-activation-note__icon{ flex-shrink:0; width:2rem; height:2rem; border-radius:50%; background:rgba(0,206,122,0.12); color:var(--qnew-accent); display:flex; align-items:center; justify-content:center; }
.qode-activation-note__icon svg{ width:1rem; height:1rem; }
.qode-activation-note strong{ display:block; color:var(--qnew-ink); font-size:0.85rem; margin-bottom:0.2rem; }
.qode-activation-note p{ margin:0; color:var(--qnew-muted); font-size:0.82rem; line-height:1.5; }
.qode-activation-note a{ color:var(--qnew-accent); }
@media (max-width:640px){ .qode-activation-notes{ grid-template-columns:1fr; } }

/* ============================================================
   PRODUCT PAGE COHESION PASS -- the content sections below the
   hero (About, Requirements, Media, Details, Why Buy, Reviews,
   Related, FAQ) still carry catalogue.css's older purple/"Sora"
   treatment from before the storefront refresh. catalogue.css
   loads before this file, so overriding the same selectors here
   swaps those leftovers for the real tokens without touching the
   parent theme. Decorative placeholder cover art (.qode-cover-
   placeholder) and the amber region-compatibility warning are
   intentionally left alone -- neither is the stray accent, both
   are deliberate variety/semantics elsewhere on the site.
   ============================================================ */

/* Page background: one deliberate accent, not a purple+blue glow. */
.qode-product-page.qode-product-page--blueprint{ background-color: #434d91 !important; }

/* Section headings: the storefront's own body font instead of the
   leftover "Sora" display face; accent bar in the one true accent
   instead of a purple-to-blue gradient. */
.qode-product-section__heading h2{ font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:1.4rem; font-weight:800; }
@media (min-width:1024px){ .qode-product-section__heading h2{ font-size:1.6rem; } }
.qode-product-section__heading h2::before{ background:var(--qnew-accent); }

/* New: quiet sub-headings inside the merged Details section (Game
   info / Region & language) -- smaller than a full section h2. */
.qode-product-subheading{ margin:1.75rem 0 0.75rem; color:var(--qnew-muted); font-size:0.78rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.qode-product-subheading:first-of-type{ margin-top:0; }

/* Supporting-tier sections (Why Buy, Related, FAQ) read as lower
   priority than core product info: smaller heading, tighter card. */
.qode-product-section--supporting{ padding:1.5rem clamp(22px,3vw,34px); }
.qode-product-section--supporting .qode-product-section__heading h2{ font-size:1.15rem; padding-left:12px; }
.qode-product-section--supporting .qode-product-section__heading h2::before{ width:3px; }

/* Jump-nav active tab, genre/language pills, and the "+N more"
   disclosure: same purple-to-accent swap so the one accent color
   reads consistently across every interactive element on the page. */
.qode-product-tabs a.is-active,
.qode-product-tabs a:hover,
.qode-product-tabs a:focus-visible{ background:rgba(0,206,122,0.13); }
.qode-product-tabs a.is-active::after{ background:var(--qnew-accent); }
.qode-product-genre-chips span,
.qode-product-language-pills span{ border-color:rgba(0,206,122,0.3); background:rgba(0,206,122,0.12); color:var(--qnew-accent); }
.qode-tag-more summary{ border-color:rgba(0,206,122,0.34); background:rgba(0,206,122,0.14); color:var(--qnew-accent); }
.qode-tag-more summary:hover,
.qode-tag-more summary:focus-visible{ border-color:rgba(0,206,122,0.6); background:rgba(0,206,122,0.24); color:#fff; }
.qode-product-faq summary::after{ border-color:rgba(0,206,122,0.34); background:rgba(0,206,122,0.1); color:var(--qnew-accent); }
.qode-product-faq summary:hover::after,
.qode-product-faq summary:focus-visible::after{ border-color:rgba(0,206,122,0.64); background:rgba(0,206,122,0.18); }

/* Spacing rhythm: these block-level gaps had drifted to four
   different ad-hoc values (14/16/18/22px) across separate edits;
   one consistent gap reads as one page instead of stitched panels. */
.qode-product-genre-chips,
.qode-product-quick-details,
.qode-product-language-block,
.qode-region-limitations{ margin-top:1.5rem; }

/* ============================================================
   APPENDED: new :root color variables + product grid template
   override (added after page-width/layout troubleshooting)
   ============================================================ */
/* ==========================================================================
   QODE GAMES: TRUST BANNER HORIZONTAL CENTERING OVERRIDE
   ========================================================================== */
body.single-product .qnew-trust-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* --- METADATA GRID: CLEAN LABEL/VALUE PAIRS, NO OVERLAP/WRAP ---
   Replaces an earlier repeat(4, 1fr) override: .qpp-quick-info only ever
   has two .qpp-quick-info__col children (left/right), so forcing four
   equal outer columns starved each column of width and caused labels and
   values to collide and wrap vertically. Desktop now keeps the original
   two-column outer grid and gives each label a fixed-width lane so every
   value lines up straight to the right. */
@media (min-width: 980px) {
    .qpp-quick-info {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 2.5rem !important;
    }

    .qpp-quick-info__col {
        grid-template-columns: 120px 1fr !important;
        column-gap: 0.75rem !important;
    }

    .qpp-quick-info dt,
    .qpp-quick-info dd {
        white-space: nowrap !important;
    }

    .qpp-quick-info__flags .qode-lang-flag {
        width: 24px !important;
        font-size: 1.4rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* ==========================================================================
   QODE GAMES: HERO STRUCTURAL WRAPPER -- EDGE-TO-EDGE (final, consolidated)
   Replaces the widescreen/breakout/full-canvas override blocks that used to
   sit above this one -- they fought each other on the same .qpp-shell /
   .qpp-grid selectors across several troubleshooting rounds. Scoped to
   .qpp-shell.qpp-grid specifically, the real markup for the HERO row
   (<div class="qpp-shell qpp-grid">), NOT the bare .qpp-shell class --
   that class is reused by the lower content sections (About/Requirements/
   Reviews/FAQ, <div class="qpp-shell qode-product-blueprint-shell">) where
   flush-edge/zero-padding text would hurt readability. Those keep their
   original contained-width base rule untouched. The gallery column stays a
   fixed 500px and now sits flush against the true left viewport edge since
   the shell itself carries zero padding on that side; the buy box column
   fills the remaining width, with a small right-edge gutter so its text
   and buttons aren't glued to the browser edge.
   ========================================================================== */
body.single-product .qpp-shell.qpp-grid {
    /* True viewport-edge breakout: the shared body{padding:...24px...} rule
       (used site-wide, not something this page-scoped fix should touch)
       insets every page by a fixed 24px, so width/margin:0 alone still
       leaves a 24px gap. A calc(-50vw + 50%) breakout was tried first but
       overshot by ~7px -- vw is measured against the full viewport
       including the scrollbar gutter, while body's own width excludes it,
       so the two don't cancel out exactly (the exact issue the earlier
       overflow-x fix warned about). Body's padding is a fixed, non-
       responsive 24px at every width we checked (375/768/1440), so exact
       negative margins are precise here and fully scrollbar-safe. */
    width: auto !important;
    max-width: none !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #434d91 !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 0 !important;
    padding-right: 2rem !important;
}

@media (min-width: 980px) {
    body.single-product .qpp-grid {
        display: flex !important;
        grid-template-columns: unset !important;
        align-items: flex-start !important;
        column-gap: 3rem !important;
    }

    body.single-product .qpp-media,
    body.single-product .woocommerce-product-gallery {
        flex: 0 0 500px !important;
        width: 500px !important;
        max-width: 500px !important;
    }

    body.single-product .qpp-summary {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 1.5rem !important;
    }
}
/* ==========================================================================
   QODE GAMES: PRODUCT TITLE SCALE-DOWN (post full-width expansion)
   Real selector is h1.qpp-title (#qode-product-title) -- this theme does not
   use WooCommerce's default .product_title markup.
   ========================================================================== */
body.single-product .qpp-title,
body.single-product h1.qpp-title,
body.single-product #qode-product-title {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
/* ==========================================================================
   QODE GAMES: PRICE STACK (original price above, selling price + pill badge
   below). Real markup is <div class="qpp-price"> wrapping WooCommerce's
   native get_price_html() output (<del>/<ins>), plus a sibling
   <span class="qpp-discount-badge"> inside .qpp-price-block; this theme
   never prints WooCommerce's default <p class="price">/.onsale markup, so
   both the real classes and the WooCommerce-default aliases are targeted
   together. .qpp-price-block keeps its base align-items: flex-end, which
   pulls the sibling badge down beside <ins> once <del> stacks on top.
   ========================================================================== */
body.single-product .qpp-price,
body.single-product p.price {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
}

body.single-product .qpp-price del,
body.single-product p.price del {
    display: inline !important;
    color: #94a3b8 !important;
    font-size: 1.0rem !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
}

body.single-product .qpp-price ins {
    display: inline !important;
    text-decoration: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 2rem !important; /* raised back up after seeing full-page context -- the large cover art and tall pill buttons carry a lot of visual weight, and price is the most important conversion element on the page, so it needed to hold its own rather than read as understated */
}

body.single-product .qpp-discount-badge,
body.single-product .onsale {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ff1e42 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    text-transform: uppercase !important;
}
/* ==========================================================================
   QODE GAMES: TITLE SIZE TRIM (round 2, tighter/more balanced)
   ========================================================================== */
body.single-product .qpp-title,
body.single-product h1.qpp-title,
body.single-product #qode-product-title {
    font-size: 1.95rem !important;
    line-height: 1.15 !important;
}
/* ==========================================================================
   QODE GAMES: METADATA GRID TYPE SCALE-DOWN (premium/compact spec sheet)
   Fixed label lanes from the earlier grid fix stay untouched -- only the
   type scale shrinks, and the language flags shrink with it so they stay
   proportional to the smaller label/value text around them.
   ========================================================================== */
body.single-product .qpp-quick-info,
body.single-product .qpp-quick-info dt,
body.single-product .qpp-quick-info dd {
    font-size: 0.85rem !important;
}

body.single-product .qpp-quick-info__flags .qode-lang-flag {
    font-size: 1.15rem !important;
    width: 20px !important;
}
/* ==========================================================================
   QODE GAMES: TITLE SIZE TRIM (round 4, compact reference style)
   ========================================================================== */
body.single-product .qpp-title,
body.single-product h1.qpp-title,
body.single-product #qode-product-title {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}
/* ==========================================================================
   QODE GAMES: STEAM BADGE / TITLE VERTICAL ALIGNMENT
   Real outer wrapper is .qpp-title-row (holds .qpp-title-icon + the h1).
   ========================================================================== */
body.single-product .qpp-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
/* ==========================================================================
   QODE GAMES: GLOBAL DARK LAYER REFACTOR (site-wide)
   Real selectors that actually exist in this theme: bare <header> (theme
   markup is <header class="qode-site-header qnew-header">, no #masthead
   or .site-header id/class); body has no #page wrapper either, but the
   bare body selector still applies. #page/.site-header/#masthead are kept
   as harmless no-op selectors in case a future template introduces them.
   Text stays on the existing --qnew-ink (#F7F8FC) / --qnew-muted tokens,
   which were already tuned for a dark background, so contrast is preserved.
   ========================================================================== */
body,
#page {
    background-color: #434d91 !important;
}

header,
.site-header,
#masthead {
    background-color: #11151f !important;
    border-bottom: 1px solid #1a202f !important;
}

/* ==========================================================================
   QODE GAMES: FLAT LAYOUT -- NO NESTED CARD BOXES
   Was a bordered/rounded dark "card" panel; now fully transparent so every
   section blends into the shared body background instead of reading as a
   boxed-in panel. This selector is intentionally the bare .qpp-shell class
   (not .qpp-shell.qpp-grid), which reaches BOTH usages in this template:
   the hero row (<div class="qpp-shell qpp-grid">) and the lower content
   sections (<div class="qpp-shell qode-product-blueprint-shell">, About/
   Requirements/Reviews/FAQ). The hero has its own more specific
   .qpp-shell.qpp-grid rule (higher specificity: 2 classes vs 1) that keeps
   owning its edge-to-edge geometry -- flush-left padding, breakout
   margins -- so the padding/margin set here only visibly affects the
   content sections below, which don't have a competing override.

   Uniform canvas: this same specificity gap now keeps both sections on
   the identical #0b0e14 tone -- #0b0e14 here is the shared/default (wins
   for the content sections); the hero rule below also sets its own
   #0b0e14, keeping it explicit there too rather than relying on fallthrough
   (a later request asked for one continuous canvas instead of the earlier
   two-tone split; this note is kept for the specificity explanation, not
   the color values, which have since changed).
   Deliberately NOT using :first-of-type / :nth-of-type(2) as originally
   proposed -- checked live via el.matches(): both .qpp-shell divs sit
   under different parents (hero's div is the only div in <section
   class="qpp-hero">; the content div is a direct <main> child after that
   section), so BOTH independently match :first-of-type, and neither
   matches :nth-of-type(2). Those selectors would have leaked the hero tone
   onto the content section and matched nothing for the second rule.
   ========================================================================== */
body.single-product .qpp-shell {
    background-color: #434d91 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    margin-top: 2rem !important;
}
/* ==========================================================================
   QODE GAMES: HORIZONTAL OVERFLOW FIX
   Measured cause: at medium desktop widths (980-1279px, inside the earlier
   quick-info min-width:980px breakpoint), .qpp-quick-info__col's fixed
   120px label lane plus white-space:nowrap content doesn't fit and pushes
   past the viewport (confirmed ~244px overflow at 1024px). Not vw units or
   .qpp-shell padding -- .site-container doesn't exist in this theme's
   markup either, kept as a harmless no-op selector. overflow-x:hidden is
   the safety net that guarantees no visible scrollbar regardless of cause.
   ========================================================================== */
html,
body,
#page,
.site-container {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* ==========================================================================
   QODE GAMES: BUY-BOX VERTICAL RHYTHM (title / price / buttons spacing)
   .qpp-title and .qpp-price are flex ITEMS inside .qpp-title-row
   (align-items:center, holds the Steam icon) and .qpp-price-block
   (align-items:flex-end, holds the sibling discount badge). Putting
   margin-bottom directly on the item inflates its margin box and throws
   off the row's cross-axis alignment -- measured live: it shifted the
   title ~10px out of vertical center with the icon, and pushed the badge
   33px below the selling price into empty space. Same visual gap, applied
   to the row wrapper instead, avoids both regressions. Real selector for
   the buttons row is .qpp-buttons (holds the Add to Cart / Buy Now forms,
   or the disabled "Preview Only" button) -- that one isn't a shared flex
   row with another sibling needing cross-axis alignment, so it's safe as
   originally specified.
   ========================================================================== */
body.single-product .qpp-title-row {
    margin-bottom: 1.25rem !important;
}

body.single-product .qpp-discount-badge {
    margin: 0 !important; /* base rule has margin-bottom:0.3rem, which throws off flex-end alignment against the selling price */
    position: relative !important;
    top: -2px !important; /* small nudge up to center against the price after the font-size trim */
}

body.single-product .qpp-price-block {
    align-items: flex-end !important; /* center pulled the badge toward $29.99 (the del line); flex-end aligns it to the bottom of the stack, which is where the selling price (ins) actually sits -- confirmed visually */
    margin-top: 0.75rem !important;
    margin-bottom: 2rem !important;
}

body.single-product .qpp-buttons {
    margin-bottom: 2rem !important;
}
/* ==========================================================================
   QODE GAMES: KILL REMAINING BACKGROUND MISMATCH (real sources, verified)
   The requested selectors (#page, .site-main, .content-area) don't exist
   anywhere in this theme -- confirmed via querySelector, all null. The
   actual mismatched panel came from two real, verified sources instead:
   .qode-product-page (the real <main id="primary">, was background:
   var(--qnew-bg) = #0b1426, edited above) and .qpp-hero (the real <section>
   wrapping the hero row, set to #0b1020 in the PARENT theme's separate
   qode-product-page.css file -- not one of our own stylesheets, so it had
   never been touched by any earlier round). body.single-product itself was
   already #0b0e14 via the bare `body` rule; restated here explicitly since
   it's a real, matching selector.
   ========================================================================== */
body.single-product,
body.single-product .qpp-hero {
    background-color: #434d91 !important;
}
/* ==========================================================================
   QODE GAMES: COMPACT HEADER (tighter vertical footprint)
   Real header element is <header class="qode-site-header qnew-header">;
   .container doesn't exist in this theme's markup (kept as a harmless
   no-op alongside the real `header div` selector, which does reach the
   real flex rows inside -- e.g. .qode-site-header__inner.qnew-header-row).
   ========================================================================== */
body.single-product header.qnew-header,
body.single-product .qode-site-header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

body.single-product header.qnew-header .container,
body.single-product header.qnew-header div {
    align-items: center !important;
}
/* ==========================================================================
   QODE GAMES: HEADER EDGE-TO-EDGE (site-wide -- header is shared across
   every page, not just single-product, so this rule is intentionally
   unscoped like the request specified).
   header, .qode-site-header, and .qnew-header all resolve to the same
   single <header class="qode-site-header qnew-header"> element -- already
   had max-width:none, so that wasn't the actual constraint. Three things
   from the literal request don't do what they look like they'd do here:
   - width:100% resolves against body's own already-padded content box,
     not the true viewport -- the exact issue solved for the hero row
     earlier. But UNLIKE the hero (single-product only, verified constant
     24px padding), this header is site-wide: body padding is 24px on
     single-product pages but 0px on the homepage (checked both live) --
     first tried a hardcoded -24px margin here and it overshot by 24px on
     the homepage. Using the viewport-relative calc(-50vw + 50%) breakout
     instead, which is page-agnostic regardless of each template's own
     body padding. It has a few px of scrollbar-gutter imprecision (the
     reason it was avoided for the hero, where pixel-perfect image
     alignment mattered), but that's invisible against a flat background
     band, and overflow-x:hidden (added earlier) clips any overshoot.
   - left:0/right:0 are no-ops here: the header is position:sticky, and
     sticky only uses left/right for its scroll-stuck offset, not normal-
     flow horizontal placement -- so they're omitted rather than shipped
     as dead CSS.
   ========================================================================== */
header,
.qode-site-header,
.qnew-header {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important; /* was 5% -- conflicted with .qode-site-header__inner's own margin-inline:auto centering, which now handles the inner content position instead */
    padding-right: 0 !important;
    background-color: #252836 !important;
    border: none !important;
    box-shadow: none !important;
}
/* ==========================================================================
   QODE GAMES: CATEGORY NAV -- TRANSPARENT, UNBOXED
   None of the guessed selectors (.qode-sub-header, .qnew-navigation,
   .navbar, [class*="navigation"], [class*="sub-header"], ".qnew-header +
   nav") exist or match: checked live DOM order is header -> .qnew-trust-
   wrap -> nav.qnew-catnav -> main, so the header's immediate next sibling
   is the trust-wrap div, not this nav. The real, unambiguous element is
   nav.qnew-catnav (was background:#080e1c -- the "muddy" band described);
   its inner row is .qnew-catnav__row, which also carries the shared
   .qnew-shell class (max-width:1360px, used elsewhere too, so left
   untouched at the shared-class level -- overridden here per-element via
   !important instead, matching the "container" role from the request).
   No breakout-margin needed for the outer nav itself: once its background
   is transparent, any small body-padding inset on its own box is
   invisible (there's no band to misalign), so this is safe across every
   template regardless of that per-page padding difference.
   ========================================================================== */
.qnew-catnav {
    /* Now carries a real background again (was transparent), so it needs
       the same viewport-safe breakout as the header -- body padding varies
       0-24px by template, so a plain width:100% would leave the same
       template-dependent gap diagnosed for the header two rounds ago. */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    background: #252836 !important;
    background-color: #252836 !important;
    border: none !important;
    border-bottom: 1px solid #282b3d !important;
    box-shadow: none !important;
}

.qnew-catnav__row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    display: flex !important;
    align-items: center !important;
}
/* ==========================================================================
   QODE GAMES: DARK TEXT ON THE NEW LIGHT POWDER-BLUE BARS
   .qnew-catnav a added alongside the requested header selectors: the
   category nav is a sibling <nav>, not nested inside <header>, so
   "header a"/".qnew-header a" alone would miss it and its links (still on
   the old light var(--qnew-ink)/var(--qnew-muted) tones) would wash out
   against the same new light background just applied to it above.
   ========================================================================== */
header a,
.qnew-header a,
.qnew-catnav a,
header span,
.qnew-catnav span {
    color: #ffffff !important;
    font-weight: 500 !important;
}
/* ==========================================================================
   QODE GAMES: EXPLICIT main/article INDIGO COVERAGE
   Mostly a defensive restatement -- #main/#primary were already transparent
   over the indigo body, so this doesn't visibly change anything, but it's
   applied explicitly since main/article are real, generic tags (unlike
   #page/#content/.site/.site-content, which still don't exist anywhere in
   this theme -- checked again via querySelector, all null).
   ========================================================================== */
main,
article {
    background: #434d91 !important;
    background-color: #434d91 !important;
}
/* ==========================================================================
   QODE GAMES: LOGO LEFT / ICONS RIGHT (real elements)
   The requested selectors (.qnew-header__logo, .qnew-header__top-left/
   right, and the various [class*="..."] guesses removed above) don't exist
   -- checked live, all null. Targeting .qode-site-header__brand (the <a>
   logo link itself) first gave only ~12px, because percentage padding
   resolves against the element's own containing block -- and that <a> is
   nested a level deep inside .qnew-brand-group (308px), not a direct flex
   item of the 1218px header row like .qnew-header-utilities is. Using
   .qnew-brand-group instead so both sides resolve their 4% against the
   same row width, matching the requested "push to the outer edge" effect
   symmetrically on both sides (confirmed live: 48.7px on each).
   ========================================================================== */
.qnew-brand-group {
    padding-left: 4% !important;
}

.qnew-header-utilities {
    padding-right: 4% !important;
}
/* ==========================================================================
   QODE GAMES: HEADER ROW WIDTH CAP -- REAL ROOT CAUSE
   The requested selectors (.qnew-header__top-inner, .qnew-header__top
   .container, .qode-site-header-inner, header .row/.flex-row,
   .qnew-header__logo-wrap) don't exist -- checked live, all null. The
   real constraint is .qode-site-header__inner (also carries the
   .qnew-header-row class), set by the PARENT theme's qode.css to
   width:calc(100% - 80px); max-width:1360px; margin-inline:auto -- a
   3-column CSS grid originally. Our own .qnew-header-row{display:flex}
   rule only overrode the display mode, never the width/max-width/margin,
   so the row stayed capped and centered inside an already full-width
   header (confirmed live: row sat at x=104 while the header itself
   spanned x=-7 to 1433). This is the actual reason the earlier 4%
   padding fix only shifted the logo within that centered, capped box
   instead of toward the true edge.
   ========================================================================== */
/* REMOVED: the previous translateX(-4%) + width:100vw hack was the
   real cause of the logo appearing to shift position when navigating
   between pages -- a hardcoded -4% shift of a 100vw-wide element is
   fragile and inconsistent. Letting .qode-site-header__inner fall back
   to the parent theme's clean width:calc(100% - 80px); max-width:1360px;
   margin-inline:auto instead -- the same standard centered-container
   pattern already used consistently elsewhere on the site (e.g.
   .qode-catalogue-shell), so the header now aligns predictably with the
   rest of the page on every page. */
/* ==========================================================================
   QODE GAMES: HEADER/TRUST-BAR OVERFLOW FIX (real root cause)
   Everything below this point through the prior end of file (~15KB) has
   been removed: it was a chain of ~7 successive, self-overriding attempts
   by someone editing this file directly (not through this conversation)
   to fix this exact overlap, each one redeclaring the same properties on
   the same partly-real/partly-fake selectors with different values
   (height 50px, then 65px, then 55px, then auto...). None of them
   actually fixed it: measured live, header was still clamped to exactly
   50px while its own content (.qnew-header-row, containing the 42px-tall
   search input) rendered at 62px -- so the row overflowed 22px past the
   header's own box, and .qnew-trust-wrap (the "QODE Verified" bar, a
   normal-flow sibling starting right at the header's clamped 50px edge)
   rendered on top of that overflow, covering the search input's bottom
   half. The specific bug: one of the removed blocks used the compound
   selector `header.qnew-header { height: 50px !important }` (specificity
   0-1-1), which beat a *later* plain `header { height: auto !important }`
   rule (0-0-1) in the same removed chain -- specificity wins over source
   order once both sides are !important, so the clamp kept winning no
   matter how many times "auto" was re-added after it.
   .qnew-header__top / .qnew-header__top-inner never existed (checked live
   against the real header.php template); the real inner row is
   .qode-site-header__inner (also carries .qnew-header-row).
   ========================================================================== */
header,
.qnew-header,
.qode-site-header {
    height: auto !important;
    max-height: none !important;
}

.qode-site-header__inner {
    height: 60px !important;
    position: relative !important;
    z-index: 99 !important;
}

.qnew-trust-wrap {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    clear: both !important;
}

/* ==========================================================================
   QODE GAMES: HEADER FLUID SHELL + INNER LAYER MIN-HEIGHT (final pass)
   Supersedes the earlier fixed .qode-site-header__inner height:60px rule
   above -- source order means this wins for the same selector without
   needing to delete the old block.
   ========================================================================== */
header.qnew-header,
.qode-site-header {
    background-color: #252836 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.qode-site-header__inner {
    height: auto !important;
    min-height: 65px !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   QODE GAMES: CATEGORY NAV UNIFIED WITH HEADER + BOTTOM DIVIDER
   (Consolidated -- removed a dead nav.qnew-catnav background:#434d91
   fragment from an earlier header-fluid-shell pass that was already fully
   superseded by this rule; kept only the winning declaration.)
   ========================================================================== */
nav.qnew-catnav {
    background: #252836 !important;
    background-color: #252836 !important;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #1c1e29 !important;
}

/* ==========================================================================
   QODE GAMES: FORCE HEADER FLUSH TO TOP VIEWPORT MARGIN (SITE-WIDE)
   #page and .site are kept as harmless no-op selectors -- confirmed not
   present in this theme's markup (documented earlier in this file at the
   GLOBAL DARK LAYER REFACTOR block). Real, confirmed selectors are html,
   body, and header.qnew-header / .qode-site-header.
   ========================================================================== */
html,
body,
body.single-product,
#page,
.site {
    margin-top: 0px !important;
    padding-top: 0px !important;
    top: 0 !important;
}

header.qnew-header,
.qode-site-header {
    top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   QODE GAMES: TOTAL SEAMLESS FLAT CANVAS OVERRIDES (LOADED REPLICATION)
   Real selectors only -- .product-info, .qode-tabs, .woocommerce-Tabs-panel,
   .description, .specifications, and .wp-block-group do not exist in this
   theme (no default WooCommerce tabs markup, no Gutenberg blocks on this
   template). Replaced with the theme's actual content-section wrappers:
   .qpp-shell, .qpp-grid, .qode-product-section, and
   .qode-product-blueprint-shell (the real About/Requirements/Reviews/FAQ
   wrapper, confirmed earlier in this file). Scoped to body.single-product
   only, so the header/catnav fixes above are untouched.
   ========================================================================== */
body.single-product .qpp-shell,
body.single-product .qpp-grid,
body.single-product .qode-product-section,
body.single-product .qode-product-blueprint-shell,
body.single-product main,
body.single-product article {
    background: #434d91 !important;
    background-color: #434d91 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.single-product .qpp-shell p,
body.single-product .qpp-shell span,
body.single-product .qpp-shell li,
body.single-product .qode-product-prose p,
body.single-product .qode-product-section__heading h2,
body.single-product table td,
body.single-product table th {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.single-product table,
body.single-product tr,
body.single-product td {
    background: transparent !important;
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   QODE GAMES: PUSH PRODUCT IMAGE AWAY FROM FAR LEFT EDGE
   .qpp-gallery, [class*="gallery-wrapper"], and .product-image-summary-wrap
   do not exist in this theme. Real selectors are .qpp-media and its alias
   .woocommerce-product-gallery (both already used together in the hero
   flex-basis rule above). The actual cause of the flush-left edge is
   .qpp-shell.qpp-grid's padding-left:0 from the earlier edge-to-edge hero
   override -- this adds padding directly on the image container instead,
   which doesn't touch that rule or the header/background colors.
   ========================================================================== */
body.single-product .qpp-media,
body.single-product .woocommerce-product-gallery {
    padding-left: 4% !important;
}

/* ==========================================================================
   QODE GAMES: CRISP DIVIDER LINE SEPARATING HERO FROM DESCRIPTION
   ========================================================================== */
body.single-product .qode-product-intro {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 2rem !important;
    margin-top: 2rem !important;
    width: 100% !important;
    clear: both !important;
}

/* ==========================================================================
   QODE GAMES: HIGH-READABILITY LUMINOUS ICE TYPOGRAPHY OVERRIDES
   .woocommerce-Tabs-panel and .product-info do not exist in this theme.
   Real body-text containers used instead: .qpp-shell, .qode-product-prose.
   [class*="description"] p is kept -- it legitimately resolves to
   .qpp-reviews .description p, a real element.
   ========================================================================== */
body.single-product .qpp-shell p,
body.single-product .qpp-shell li,
body.single-product .qode-product-prose p,
body.single-product [class*="description"] p,
body.single-product table td {
    color: #cbd5e1 !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

/* Section/intro headings kept pure white. Deliberately NOT a blanket
   "h2, h3" rule -- .qode-product-prose h2/h3 (feature headings inside the
   About text) are intentionally styled in var(--qnew-accent) green
   elsewhere in this file; a blanket white rule would silently override
   that established accent treatment. */
body.single-product .qode-product-intro,
body.single-product .qode-product-section__heading h2,
body.single-product table th {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   QODE GAMES: HIGH-CONVERSION ALL-CAPS ACTION BUTTONS
   .single_add_to_cart_button, .qpp-add-to-cart, .qpp-buy-now, and the
   buy-now/button-green wildcards do not exist -- this theme uses its own
   .qpp-btn / .qpp-btn--outline / .qpp-btn--solid system instead of
   WooCommerce's default button markup. Styled below; the green button's
   label text and disabled/preview-only state are template-level (PHP),
   not fixable from CSS -- see chat note.
   ========================================================================== */
body.single-product .qpp-btn--outline {
    background: #252836 !important;
    background-color: #252836 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    transition: all 0.2s ease-in-out !important;
}

body.single-product .qpp-btn--outline:hover {
    background-color: #32364a !important;
    border-color: #ffffff !important;
}

body.single-product .qpp-btn--solid {
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
}

/* ==========================================================================
   QODE GAMES: SEO PRODUCT TITLE TYPOGRAPHY STABILIZATION
   h1.product_title and [class*="product-title"] do not exist -- this theme
   does not use WooCommerce's default .product_title markup (confirmed
   earlier in this file). Real selector is .qpp-title / h1.qpp-title /
   #qode-product-title. NOTE: this reopens the font-size/weight this file's
   own history shows was deliberately trimmed down across 4 earlier rounds
   (2.2rem/800 -> 1.95rem -> 1.65rem/700 "compact reference style"). This
   rule wins by source order (last + !important), taking it back up to
   1.85rem/800 -- confirm that's the intended reversal.
   ========================================================================== */
body.single-product .qpp-title,
body.single-product h1.qpp-title,
body.single-product #qode-product-title {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 0.5rem !important;
    text-transform: none !important;
}

@media (max-width: 767px) {
    body.single-product .qpp-title,
    body.single-product h1.qpp-title,
    body.single-product #qode-product-title {
        font-size: 1.45rem !important;
    }
}

/* ==========================================================================
   QODE GAMES: TITLE SIZE REVERT TO ORIGINAL COMPACT SCALE
   Reverts the SEO Title Typography Stabilization block above back to the
   file's prior "compact reference style" (1.65rem/700), per explicit
   request. Wins by source order (last + !important).
   ========================================================================== */
body.single-product .qpp-title,
body.single-product h1.qpp-title,
body.single-product #qode-product-title {
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   QODE GAMES: UNIFIED NAV RECOVERY PASS (header + catnav divider)
   width/max-width: 100% removed here -- confirmed to conflict with the
   earlier viewport-relative calc(-50vw + 50%) breakout rule already in
   this file (which exists specifically because width:100% resolves
   against the header's own padded parent, not the true viewport --
   documented at the GLOBAL DARK LAYER REFACTOR block above). Leaving
   width unset lets that calc() rule govern edge-to-edge sizing correctly.
   ========================================================================== */
header.qnew-header,
.qode-site-header,
nav.qnew-catnav {
    background: #252836 !important;
    background-color: #252836 !important;
    box-shadow: none !important;
    border: none !important;
}

nav.qnew-catnav,
header.qnew-header,
.qode-site-header {
    border-bottom: 1px solid #1c1e29 !important;
}

/* ==========================================================================
   QODE GAMES: UNIVERSAL SITE-WIDE HEADER HEIGHT LOCK (HOME CLONE)
   [class*="logo"] img / header img dropped -- this theme has no <img>
   logo, only a text/SVG wordmark (.qnew-brand__mark, confirmed by its own
   comment). The single-product-only 10px header padding that was the
   actual cause of the height mismatch has been zeroed above, at its
   source rule, rather than patched over here.
   ========================================================================== */
header,
.qnew-header,
.qode-site-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.qode-site-header__inner {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

header form input,
header input[type="text"],
header input[type="search"] {
    height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   QODE GAMES: ALIGN STEAM TITLE ICON PERFECTLY WITH TEXT
   .qpp-title img / h1.product_title img/i/svg don't reach the icon --
   it's not nested inside .qpp-title, it's a sibling: .qpp-title-icon,
   living alongside the h1 inside .qpp-title-row (confirmed by this
   file's own earlier comment). .qpp-title-row already sets
   align-items:center via flexbox, so this is a small optical nudge on
   top of that, not a replacement for it.
   ========================================================================== */
/* ==========================================================================
   QODE GAMES: BULLETPROOF TRANSFORM TRANSLATION FOR OPTICAL CENTER ALIGNMENT
   Replaces the .qpp-title-icon position:relative/top rule above --
   position:top was being ignored because .qpp-title-row is a flex
   container (align-items:center governs cross-axis position of flex
   items directly; top/relative offsets don't reliably override that).
   transform:translateY() operates independently of flex layout, so it
   applies on top of the flex-centered position instead.
   ========================================================================== */
body.single-product .qpp-title-row .qpp-title-icon {
    display: inline-flex !important;
    align-self: center !important;
    transform: translateY(-2.5px) !important;
}

/* ==========================================================================
   QODE GAMES: PC [STEAM] KEY BADGE
   ========================================================================== */
.badge-pc-steam-key {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: rgba(0, 206, 122, 0.14);
    border: 1px solid rgba(0, 206, 122, 0.34);
    border-radius: 999px;
    color: var(--qnew-accent, #00ce7a);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
}

/* ==========================================================================
   QODE GAMES: BRAND CLUSTER (logo + "Get It. Play It." tagline, real
   classes only)
   Corrects a long-standing gap: the previous .qnew-brand-group /
   .qnew-brand__* system earlier in this file never matched anything --
   confirmed against the real header.php, which uses
   .qode-site-header__brand / __wordmark / __tagline with no "qnew-brand"
   class present at all, and .qode-site-header__inner without the
   "qnew-header-row" class those earlier rules depended on. That block is
   left in place as inert dead weight rather than removed here, to avoid
   an unrelated large diff -- worth deleting in a future cleanup pass.
   This block targets the real markup directly, including the new
   .qode-brand-cluster wrapper and .qode-brand-cluster__slogan span added
   to header.php just now, so both the tagline placement and the logo's
   position are finally under real, direct control on every page.
   ========================================================================== */
.qode-site-header__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.qode-brand-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem;
    flex-shrink: 0;
}

.qode-site-header__brand {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    line-height: 1;
}

.qode-brand-cluster__slogan {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 0.85;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .qode-brand-cluster__slogan {
        display: none;
    }
}


.qnew-card__art {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-top-left-radius: var(--qnew-radius-card);
    border-top-right-radius: var(--qnew-radius-card);
}
.qnew-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}
/* Card elements added for the discount badge / divider design that aren't
   duplicated elsewhere in this file (gradient overlay, discount badge,
   divider line). The duplicate .qnew-card__art, __image, __platform,
   __platform-icon (x2), __actions, __buy rules that used to live here were
   removed -- they were fighting the original, correct definitions earlier
   in this file (different aspect-ratio, conflicting top/bottom position,
   etc.) and are not needed since the originals already cover these. */
.qnew-card__gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
}
.qnew-card__discount-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    background: #ff3b30;
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
}
.qnew-card__divider {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 12px 0;
}
.qode-activation-badge {
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    margin: 10px 0;
    display: inline-block;
}
.qode-activation-badge--valid {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.qode-activation-badge--invalid {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* ==========================================================================
   QODE GAMES: CATEGORY NAV DROPDOWN
   ========================================================================== */
.qnew-catnav__dropdown {
    position: relative;
    display: inline-block;
}
.qnew-catnav__dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    cursor: pointer;
}
.qnew-catnav__dropdown-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}
.qnew-catnav__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #252836 !important;
    border: 1px solid #1c1e29 !important;
    border-radius: 8px;
    min-width: 200px;
    padding: 0.5rem 0;
    z-index: 1000;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
.qnew-catnav__dropdown-menu a {
    display: block !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: normal !important;
}
.qnew-catnav__dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--qnew-accent, #00ce7a) !important;
}
.qnew-catnav__dropdown:hover .qnew-catnav__dropdown-menu {
    display: block !important;
}
.qnew-catnav__dropdown:hover .qnew-catnav__dropdown-toggle svg {
    transform: rotate(180deg);
}

/* Region Filter Toggle Styles */
.qode-filter-check {
    cursor: pointer;
    background: #1e2030;
    transition: background 0.2s;
}
.qode-filter-check:hover {
    background: #252836;
}

/* Pagination Counter Styling */
.qode-results-count {
    font-weight: 700;
    color: #8b96ad;
}

/* Region Toggle Switch */
.switch input { opacity: 0; width: 0; height: 0; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #00ff88; }
input:checked + .slider:before { transform: translateX(26px); }

/* Ensure Pagination alignment */
.qode-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 0 !important;
    border-top: 1px solid #1c2740 !important;
}

.qode-catalogue__workspace-full { width: 100%; }
.qode-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }

.qode-card-media { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: #151822; border-radius: 8px 8px 0 0; }
.qode-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qode-card-placeholder { width: 100%; height: 100%; background: #151822; }
.qode-card-badges { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.qode-discount-badge { background: #ff4757; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.qode-btn-buy { background: #00ff88; color: #000; padding: 10px; display: block; text-align: center; border-radius: 4px; text-decoration: none; font-weight: bold; }
.qode-btn-add { border: 1px solid #00ff88; color: #00ff88; padding: 10px; display: block; text-align: center; border-radius: 4px; text-decoration: none; font-weight: bold; margin-top: 5px; }

/* Updated Product Card Component */
.qode-game-card { background: #1b1e2e; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.qode-card-media { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: #151822; }
.qode-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.qode-card-overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; }
.qode-card-platform { width: 32px; height: 32px; background: rgba(0,0,0,0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qode-card-platform img { width: 18px; height: 18px; filter: invert(1); }
.qode-card-discount { background: #ff3b30; color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.qode-card-body { padding: 16px; flex-grow: 1; display: flex; flex-direction: column; }
.qode-card-title { color: #ffffff !important; font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; text-decoration: none !important; }
.qode-card-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 12px 0; }
.qode-card-price { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 12px; }
.qode-card-actions { display: flex; gap: 8px; margin-top: auto; }
.qode-btn-buy { background: #00ff88; color: #0d1117; font-weight: 800; border-radius: 6px; padding: 10px 16px; flex: 1; text-align: center; text-decoration: none; }
.qode-btn-add { background: transparent; color: #00ff88; border: 1.5px solid #00ff88; font-weight: 700; border-radius: 6px; padding: 10px 16px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }

/* Refactored Product Card */
.qode-game-card { background: #1b1e2e; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); overflow: hidden; display: flex; flex-direction: column; }
.qode-card-media { position: relative; aspect-ratio: 3 / 4; width: 100%; overflow: hidden; border-radius: 12px 12px 0 0; background: #151822; }
.qode-card-image { width: 100%; height: 100%; object-fit: cover; }
.qode-card-overlay { position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.qode-card-platform { background: rgba(0,0,0,0.6); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qode-discount-pill { background: #ff3b30; color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.qode-card-body { padding: 16px; flex-grow: 1; display: flex; flex-direction: column; }
.qode-card-title { color: #ffffff !important; font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; text-decoration: none !important; }
.qode-card-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 12px 0; }
.qode-card-price { font-size: 18px; font-weight: 700; color: #ffffff; margin-bottom: 12px; }
.qode-card-actions { display: flex; gap: 8px; margin-top: auto; }

/* Homepage-Aligned Product Card */
.qode-cloned-card-item { background: #1b1e2e; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; list-style:none; }
.qode-card-media-wrapper { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #151822; border-radius: 12px 12px 0 0; }
.qode-card-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qode-card-title a { color: #ffffff !important; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none !important; }

/* Homepage Card Parity Styles */
.qode-cloned-card-item { background: #1b1e2e; border-radius: 12px; list-style: none; display: flex; flex-direction: column; }
.qode-card-media-wrapper { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px 12px 0 0; background: #151822; }
.qode-card-cover-img { width: 100%; height: 100%; object-fit: cover; }
.qode-platform-badge-overlay { position: absolute; bottom: 10px; left: 10px; z-index: 2; background: rgba(0,0,0,0.6); color: #fff; padding: 5px; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.qode-discount-badge-overlay { position: absolute; bottom: 10px; right: 10px; z-index: 2; background: #ff3b30; color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 20px; }
.qode-card-content-body { padding: 16px; }
.qode-card-title a { color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; }
.qode-card-separator { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 12px 0; }
.qode-btn-buy { display: block; background: #00ff88; color: #0d1117; font-weight: 800; padding: 10px; border-radius: 6px; text-align: center; text-decoration: none; }
.qode-btn-add { display: block; border: 1.5px solid #00ff88; color: #00ff88; font-weight: 700; padding: 10px; border-radius: 6px; text-align: center; text-decoration: none; margin-top: 8px; }

/* Catalogue archive: category SEO block + trust strip, added below the
   product grid pagination, before the footer. */
.qode-catalogue-seo{
  max-width:44rem;
  padding:3rem 0 2rem;
  border-top:1px solid var(--qnew-line);
}
.qode-catalogue-seo__kicker{
  display:block;
  color:var(--qnew-accent);
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:0.6rem;
}
.qode-catalogue-seo__title{
  display:block;
  list-style:none;
  color:var(--qnew-ink);
  font-size:1.6rem;
  font-weight:800;
  margin:0 0 0.9rem;
}
.qode-catalogue-seo__body{
  color:var(--qnew-muted);
  font-size:0.98rem;
  line-height:1.65;
}
.qode-catalogue-seo__body p{ margin:0 0 0.75rem; }
.qode-catalogue-seo__body p:last-child{ margin-bottom:0; }

.qode-catalogue-trust{
  display:grid;
  gap:1.25rem;
  padding:2rem 0 3rem;
  border-top:1px solid var(--qnew-line);
}
@media (min-width:768px){
  .qode-catalogue-trust{ grid-template-columns:repeat(3,1fr); }
}
.qode-catalogue-trust__item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1.25rem;
  background:var(--qnew-surface);
  border:1px solid var(--qnew-line);
  border-radius:var(--qnew-radius-card);
}
.qode-catalogue-trust__icon{
  width:2.75rem;
  height:2.75rem;
  flex-shrink:0;
  border-radius:50%;
  background:var(--qnew-bg);
  color:var(--qnew-accent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.qode-catalogue-trust__icon svg{ width:1.25rem; height:1.25rem; }
.qode-catalogue-trust__item b{
  display:block;
  color:var(--qnew-ink);
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:0.3rem;
}
.qode-catalogue-trust__item p{
  margin:0;
  color:var(--qnew-muted);
  font-size:0.85rem;
  line-height:1.5;
}

/* Catalogue breadcrumbs (top of archive page) */
.qode-catalogue-breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.4rem;
  padding:1.5rem 0 0;
  font-size:0.85rem;
  color:var(--qnew-muted);
}
.qode-catalogue-breadcrumbs a{
  color:var(--qnew-muted);
  text-decoration:none;
}
.qode-catalogue-breadcrumbs a:hover{ color:var(--qnew-accent); }
.qode-catalogue-breadcrumbs__sep{ color:var(--qnew-line); }
.qode-catalogue-breadcrumbs__current{ color:var(--qnew-ink); font-weight:600; }

/* Catalogue FAQ section */
.qode-catalogue-faq{
  max-width:50rem;
  padding:1rem 0 3rem;
}
.qode-catalogue-faq h2{
  color:var(--qnew-ink);
  font-size:1.3rem;
  font-weight:800;
  margin:0 0 1.25rem;
}

/* Catalogue top control bar (Sort, Advanced Filters, region toggle) --
   rebuilt to use the site's actual accent/surface tokens instead of the
   inline neon-green (#00ff88) and emoji icon this originally shipped with. */
.qode-catalogue-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding:1.5rem 0;
}
.qode-catalogue-controls__left{
  display:flex;
  gap:0.75rem;
  align-items:center;
}
.qode-catalogue-controls__btn{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:var(--qnew-surface);
  color:var(--qnew-ink);
  padding:0.6rem 1.1rem;
  border-radius:var(--qnew-radius-control);
  border:1px solid var(--qnew-line);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .15s, color .15s;
}
.qode-catalogue-controls__btn:hover{
  border-color:var(--qnew-accent);
  color:var(--qnew-accent);
}
.qode-catalogue-controls__btn svg{ width:1rem; height:1rem; flex-shrink:0; }

.qode-sort-dropdown{ position:relative; }
.qode-dropdown-menu{
  display:none;
  position:absolute;
  top:calc(100% + 0.4rem);
  left:0;
  background:var(--qnew-surface);
  border:1px solid var(--qnew-line);
  border-radius:var(--qnew-radius-control);
  z-index:1000;
  min-width:200px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.qode-dropdown-menu.is-open{ display:block; }
.qode-dropdown-menu a{
  display:block;
  padding:0.65rem 1rem;
  color:var(--qnew-ink);
  text-decoration:none;
  font-size:0.88rem;
}
.qode-dropdown-menu a:hover{ background:var(--qnew-bg); color:var(--qnew-accent); }

.qode-catalogue-region-toggle{
  display:flex;
  align-items:center;
  gap:0.6rem;
  color:var(--qnew-muted);
  font-size:0.85rem;
  cursor:pointer;
}
.qode-catalogue-region-toggle__switch{
  position:relative;
  display:inline-block;
  width:2.4rem;
  height:1.4rem;
  flex-shrink:0;
}
.qode-catalogue-region-toggle__switch input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
  z-index:1;
}
.qode-catalogue-region-toggle__track{
  position:absolute;
  inset:0;
  background:var(--qnew-surface);
  border:1px solid var(--qnew-line);
  border-radius:999px;
  transition:background-color .15s;
}
.qode-catalogue-region-toggle__track::before{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:1rem;
  height:1rem;
  background:var(--qnew-muted);
  border-radius:50%;
  transition:transform .15s, background-color .15s;
}
.qode-catalogue-region-toggle__switch input:checked ~ .qode-catalogue-region-toggle__track{
  background:var(--qnew-accent);
  border-color:var(--qnew-accent);
}
.qode-catalogue-region-toggle__switch input:checked ~ .qode-catalogue-region-toggle__track::before{
  transform:translateX(1rem);
  background:var(--qnew-bg);
}

/* Filter drawer + backdrop, rebuilt with class-based open state instead
   of inline style.right manipulation, and matching the site's actual
   colors instead of the inline #191c2b/#00ff88 values. */
.qode-catalogue-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:1500;
}
.qode-catalogue-backdrop.is-open{ display:block; }
.qode-catalogue-drawer{
  position:fixed;
  top:0;
  right:-400px;
  width:min(400px, 100vw);
  height:100%;
  background:var(--qnew-surface);
  border-left:1px solid var(--qnew-line);
  z-index:2000;
  transition:right .3s;
  overflow-y:auto;
  padding:1.5rem;
  padding-bottom:7rem;
}
.qode-catalogue-drawer.is-open{ right:0; }
.qode-catalogue-drawer__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
}
.qode-catalogue-drawer__head h2{ color:var(--qnew-ink); font-size:1.15rem; margin:0; }
.qode-catalogue-drawer__close{
  background:none;
  border:none;
  color:var(--qnew-muted);
  cursor:pointer;
  padding:0.3rem;
}
.qode-catalogue-drawer__close svg{ width:1.3rem; height:1.3rem; }
.qode-catalogue-drawer__close:hover{ color:var(--qnew-ink); }
.qode-catalogue-drawer__footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:1.25rem 1.5rem;
  background:var(--qnew-surface);
  border-top:1px solid var(--qnew-line);
}
.qode-catalogue-drawer__apply{
  width:100%;
  background:var(--qnew-accent);
  color:var(--qnew-bg);
  padding:0.75rem;
  border:none;
  border-radius:var(--qnew-radius-control);
  font-weight:700;
  cursor:pointer;
}
.qode-catalogue-drawer__apply:hover{ background:var(--qnew-accent-dim); }
.qode-catalogue-drawer__clear{
  display:block;
  text-align:center;
  padding:0.6rem;
  color:var(--qnew-muted);
  text-decoration:none;
  font-size:0.85rem;
}
.qode-catalogue-drawer__clear:hover{ color:var(--qnew-ink); }

/* .qnew-card__platform-icon: small circular platform badge, bottom-left
   over the card art. Its only CSS definition was accidentally removed
   during an earlier cleanup of duplicate rules -- this restores it. */
.qnew-card__platform-icon{
  position:absolute;
  bottom:0.6rem;
  left:0.6rem;
  z-index:2;
  width:1.75rem;
  height:1.75rem;
  border-radius:50%;
  background:#171a21;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.qnew-card__platform-icon img{
  width:65%;
  height:65%;
  object-fit:contain;
}

/* Force the footer to genuinely span the full viewport width regardless
   of any constrained parent container -- a reliable "breakout" technique
   rather than depending on finding the exact ancestor causing the inset. */
.qode-site-footer{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
}
html, body{
  overflow-x:hidden;
}
html{
  overflow-y:scroll; /* always reserve the scrollbar gutter, on every page,
    regardless of whether that page's content is tall enough to need one.
    Without this, 100vw (used above for the footer's full-bleed breakout)
    resolves to a different pixel value depending on whether a given page
    happens to have a vertical scrollbar -- which shifts the ENTIRE page,
    header included, left/right by the scrollbar's width when navigating
    between a tall page and a short one. This makes scrollbar space
    constant so that shift can't happen. */
}

/* Final, definitive rule for the "QODE Verified" trust bar -- this
   element has accumulated several partial overrides over time (see the
   comments earlier in this file documenting past header-height/overlap
   bugs tied to it). Rather than keep stacking more partial fixes, this
   sets every relevant property explicitly so there's no ambiguity, and
   it wins by source order (last rule, same specificity via !important). */
.qnew-trust-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  max-width:none !important;
  float:none !important;
  position:static !important;
  margin:0.75rem auto !important;
  padding:0 1rem !important;
  box-sizing:border-box !important;
}

/* Cart count badge: parent theme hardcodes #8b5cf6 (purple), which
   clashes with the site's actual established accent green used
   everywhere else (buttons, checkmarks, discount badges, etc). Header.php
   is a single shared file already loading identically on every page, so
   this fix applies site-wide automatically. */
.qode-site-cart__count{
  background:var(--qnew-accent) !important;
  color:var(--qnew-bg) !important;
}

/* Match .qode-site-header__inner's left/right inset to .qnew-catnav__row's
   exact formula (width:100% + padding-left/right:5%) so the logo and the
   category nav below it align pixel-for-pixel, instead of the header
   using a different max-width:1360px centered-box approach that produced
   a different offset. */
.qode-site-header__inner{
  width:100% !important;
  max-width:100% !important;
  margin-inline:0 !important;
  padding-left:5% !important;
  padding-right:5% !important;
  box-sizing:border-box !important;
}

/* Sticky footer: on pages with little content (e.g. an empty or
   near-empty category page), the total page height is shorter than the
   viewport, which leaves the <body> background exposed below the footer
   instead of the footer sitting flush at the bottom. Standard flexbox
   sticky-footer fix: body becomes a column flex container spanning the
   full viewport height, and #main grows to absorb any leftover space so
   the footer is always pushed down to the true bottom of the viewport. */
html{
  height:100%;
}
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
#main{
  flex:1 0 auto;
}
.qode-site-footer{
  flex-shrink:0;
}

/* Parent theme's qode.css contains a bare, unscoped "body{padding:16px 17px}"
   rule sitting inside unrelated .qode-product-card component CSS -- almost
   certainly a mistake (a stripped class prefix), but it applies real
   padding to the literal <body> on every page site-wide. This is the real
   cause of the persistent gap below the footer (body's own padding-bottom
   pushes the visible content edge inward, showing body's background
   instead of the footer reaching the true viewport edge) and the color
   mismatch in that gap. Neutralizing it here rather than editing the
   parent file directly. */
body{
  padding:0 !important;
}