/* ============================================================
   POP (owner, 2026-10-02: "make it pop, it's flat"), after the
   owner's notes on the red:
   - "blue is perfect" — the blue panels stay blue
   - hard red slashes/stripes "look like a football team / the NFL"
     — none anywhere
   - "we need center eye" + "blend the red" — the red is a soft glow
     that melts into the blue in the MIDDLE, behind the product
     (carousel card, fanned cards, coin, page icon), never under text
   - header keeps its solid black bottom line
   Depth and life: comic halftone dots on the blue, a light sweep
   now and then, glossy red buy buttons, sections rising in as you
   scroll (assets/pop.js). Movement switches off for "reduce motion".
   ============================================================ */

/* ── The page: soft blue light top-left, red bottom-right ── */
body {
  background:
    radial-gradient(1100px 620px at -8% -10%, rgba(51, 113, 181, .13), transparent 62%),
    radial-gradient(1000px 640px at 108% 112%, rgba(var(--hue-rgb), .08), transparent 62%),
    #f3f6fa fixed;
}

/* ── Header: halftone on the left, a gloss line on top, a soft red glow in the middle behind the search ── */
.nw-header {
  background:
    radial-gradient(ellipse 380px 110px at 50% 55%, rgba(var(--hue-hi-rgb), .7), rgba(var(--hue-rgb), .28) 45%, transparent 75%),
    linear-gradient(180deg, #3d7fc8 0%, #3371b5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(11, 34, 57, .18);
}
.nw-header .nw-swirls {
  display: block; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1.2px, transparent 1.7px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 35%); mask-image: linear-gradient(90deg, #000 0%, transparent 35%);
}
.nw-header .nw-swirl { display: none; }
.nw-hd-basket { background-image: linear-gradient(180deg, var(--buy-hi), var(--buy) 55%, var(--buy-dark)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--buy-edge); }

/* ── The blended red "centre eye" behind the product, melting into the blue ── */
:root {
  --glow-red: rgba(var(--hue-hi-rgb), .9);    /* colour: Management → Settings → 🎨 Website Colours */
  --glow-mid: rgba(var(--hue-rgb), .42);
}
/* Carousel: behind the card (the text on the left stays clean blue) */
.nw-hero-product {
  background:
    radial-gradient(440px circle at 78% 52%, var(--glow-red) 0%, var(--glow-mid) 48%, transparent 100%),
    var(--b-blue-panel);
}
.nw-hp-glow { background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 62%); }
/* Shop / category header: behind the fanned cards on the right */
.nw-cat-hero {
  background:
    radial-gradient(300px circle at calc(100% - 176px) 50%, var(--glow-red) 0%, var(--glow-mid) 48%, transparent 100%),
    var(--b-blue-panel);
}
/* Category tiles: behind the fanned cards, in the middle of the picture */
.nw-cat-card .nw-cat-fan {
  background:
    radial-gradient(165px circle at 50% 52%, var(--glow-red) 0%, var(--glow-mid) 50%, transparent 100%),
    linear-gradient(135deg, #3d7fc8 0%, #3371b5 45%, #234f8f 100%);
}
/* Graded band: a glow in the middle, behind the row of slabs */
.nw-band-dark {
  background:
    radial-gradient(ellipse 520px 260px at 50% 62%, rgba(var(--hue-hi-rgb), .75) 0%, rgba(var(--hue-rgb), .3) 45%, transparent 100%),
    var(--b-blue-panel);
}
/* Nerd Coins: behind the coin */
.nw-coins-band {
  background:
    radial-gradient(150px circle at 144px 50%, var(--glow-red) 0%, var(--glow-mid) 45%, transparent 100%),
    var(--b-blue-panel);
}
/* Info pages: behind the page icon */
.nw-pagehero-icon { position: relative; box-shadow: 0 0 0 10px rgba(var(--hue-hi-rgb), .35), 0 0 46px 22px rgba(var(--hue-rgb), .55), 0 8px 20px rgba(0, 0, 0, .18); }
/* Product cards: plain blue name bars */
.nw-pcard-bar { background: linear-gradient(160deg, #3d7fc8 0%, #3371b5 45%, #234f8f 100%); }

/* ── Comic halftone on the blue panels (fades out towards the middle) ── */
.nw-hero-product::before, .nw-cat-hero::before, .nwa-hello::before,
.nw-pagehero::before, .nw-band-dark::before, .nw-coins-band::before, .nw-ty-hero::before, .nw-login-hello::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
  background-image: radial-gradient(rgba(255, 255, 255, .24) 1.3px, transparent 1.8px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(118deg, #000 0%, rgba(0, 0, 0, .5) 26%, transparent 52%);
          mask-image: linear-gradient(118deg, #000 0%, rgba(0, 0, 0, .5) 26%, transparent 52%);
}
.nw-band-dark { position: relative; }
.nw-band-dark > .nw-wrap, .nw-pagehero > *, .nw-coins-band > *, .nw-ty-hero > * { position: relative; z-index: 1; }

/* ── A light sweep passing over the big blue panels now and then ── */
.nw-hero::after, .nw-cat-hero::after, .nw-coins-band::after, .nw-pagehero::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 28%; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14) 45%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .14) 55%, transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: nwSweep 9s ease-in-out 2s infinite;
}
.nw-pagehero { overflow: hidden; }
@keyframes nwSweep { 0%, 72% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(480%) skewX(-18deg); } }

/* Big panels get real depth */
.nw-hero { box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px rgba(35, 79, 143, .28), 0 4px 0 #234f8f; }
.nw-cat-hero, .nw-coins-band, .nwa-hello, .nwa-coins-hero, .nw-ty-hero { box-shadow: 0 16px 36px rgba(35, 79, 143, .26), 0 4px 0 #234f8f; }

/* ── Glossy red buy buttons, with a shine on hover ── */
.nw-hero-product .nw-btn.add_to_cart_button,
.nw-pcard .nw-btn.nw-add:not(.nw-add-instore),
.single_add_to_cart_button.button, .woocommerce button.button.single_add_to_cart_button,
.nw-hero-product .nw-btn.add_to_cart_button:hover,
.nw-pcard .nw-btn.nw-add:not(.nw-add-instore):hover,
.single_add_to_cart_button.button:hover, .woocommerce button.button.single_add_to_cart_button:hover {
  background-color: var(--buy);
  background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%), linear-gradient(180deg, var(--buy-hi) 0%, var(--buy) 55%, var(--buy-dark) 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--buy-edge), 0 10px 22px rgba(var(--buy-rgb), .3);
  transition: background-position .7s ease, transform .15s ease, box-shadow .15s ease;
}
.nw-hero-product .nw-btn.add_to_cart_button,
.nw-pcard .nw-btn.nw-add:not(.nw-add-instore),
.single_add_to_cart_button.button, .woocommerce button.button.single_add_to_cart_button { background-position: 140% 0, 0 0; }
.nw-hero-product .nw-btn.add_to_cart_button:hover,
.nw-pcard .nw-btn.nw-add:not(.nw-add-instore):hover,
.single_add_to_cart_button.button:hover, .woocommerce button.button.single_add_to_cart_button:hover {
  background-position: -40% 0, 0 0; transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 0 var(--buy-edge), 0 14px 28px rgba(var(--buy-rgb), .38);
}
.nw-pcard .nw-btn.nw-add.added:not(.nw-add-instore) { background-image: none; background-color: var(--nw-green); box-shadow: none; transform: none; }
.nw-co-side #place_order, .nw-summary .wc-proceed-to-checkout .checkout-button {
  background-image: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%), linear-gradient(180deg, var(--buy-hi) 0%, var(--buy) 55%, var(--buy-dark) 100%) !important;
  background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important; background-position: 140% 0, 0 0 !important;
  transition: background-position .7s ease, transform .15s ease !important;
}
.nw-co-side #place_order:hover, .nw-summary .wc-proceed-to-checkout .checkout-button:hover { background-position: -40% 0, 0 0 !important; transform: translateY(-2px); }

/* The carousel's "Add to basket" breathes, to draw the eye */
.nw-hero-slide.is-active .nw-btn.add_to_cart_button { animation: nwBuyPulse 2.8s ease-in-out 1.2s infinite; }
@keyframes nwBuyPulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--buy-edge), 0 10px 22px rgba(var(--buy-rgb), .3), 0 0 0 0 rgba(255, 255, 255, .55); }
  50%      { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--buy-edge), 0 10px 22px rgba(var(--buy-rgb), .3), 0 0 0 9px rgba(255, 255, 255, 0); }
}

/* ── Section titles: bigger, with a blue-into-red underline that wipes in ── */
.nw-section-head h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); letter-spacing: -.8px; }
.nw-section-head h2::after {
  content: ""; display: block; width: 96px; height: 5px; margin-top: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #3371b5, var(--hue));
  transform-origin: left center; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .25s;
}
.nw-band-dark .nw-section-head h2::after { background: linear-gradient(90deg, #fff, #ff6b70); }
html.nw-rise .nw-reveal:not(.is-in) .nw-section-head h2::after { transform: scaleX(0); }

/* ── Product cards: lift on hover ── */
.nw-pcard:hover { transform: translateY(-7px); box-shadow: 0 20px 40px rgba(35, 79, 143, .24), 0 3px 0 rgba(35, 79, 143, .2); }

/* ── Category tiles: lift on hover, the arrow slides ── */
.nw-cat-card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(35, 79, 143, .28), 0 4px 0 #234f8f; }
.nw-cat-card .nw-cat-meta i { transition: transform .2s ease, background .2s ease; }
.nw-cat-card:hover .nw-cat-meta i { transform: translateX(4px); }   /* colour: assets/buttons.css (blue = go) */

/* ── Nerd Coins steps: solid white cards ── */
.nw-coin-steps li { background: #fff; border: 0; box-shadow: 0 6px 16px rgba(11, 34, 57, .18); }
.nw-coin-steps b { color: #0b2239; }
.nw-coin-steps small { color: rgba(11, 34, 57, .68); }

/* ── Carousel card follows the mouse a little (assets/pop.js) ── */
.nw-hp-right { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .25s ease-out; }

/* ── Things rise in as you scroll (assets/pop.js adds html.nw-rise / .nw-reveal / .is-in —
      not "nw-pop": that name is the filter pop-up) ── */
html.nw-rise .nw-reveal { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
html.nw-rise .nw-reveal:not(.is-in) { opacity: 0; transform: translateY(26px); }
/* children (and shop-page cards) animate in, then let go: fill "backwards", never "both",
   or the end transform sticks and the hover lift stops working */
html.nw-rise .nw-reveal:not(.is-in) .nw-stagger, html.nw-rise .nw-reveal-card:not(.is-in) { opacity: 0; }
html.nw-rise .nw-reveal.is-in .nw-stagger { animation: nwRiseIn .65s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
html.nw-rise .nw-reveal-card.is-in { animation: nwRiseIn .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes nwRiseIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }

/* ── Phones ── */
@media (max-width: 900px) {
  .nw-header { background: radial-gradient(ellipse 260px 90px at 50% 30%, rgba(var(--hue-hi-rgb), .55), transparent 75%), linear-gradient(180deg, #3d7fc8 0%, #3371b5 100%); }
  .nw-header .nw-swirls { -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
  .nw-hero-product { background: radial-gradient(160px circle at 22% 42%, var(--glow-red) 0%, var(--glow-mid) 42%, transparent 100%), var(--b-blue-panel); }
  .nw-hp-right { transform: none; }
}

/* ── Reduce motion: no movement at all ── */
@media (prefers-reduced-motion: reduce) {
  .nw-hero::after, .nw-cat-hero::after, .nw-coins-band::after, .nw-pagehero::after,
  .nw-hero-slide.is-active .nw-btn.add_to_cart_button { animation: none; }
  .nw-hero::after, .nw-cat-hero::after, .nw-coins-band::after, .nw-pagehero::after { display: none; }
}

/* ── Trust strip (secure checkout / delivery / Nerd Coins / returns): same place, now in the
      site's style — white strip with the blended blue→red edge like the "see more" buttons,
      line icons on the blue→red blend like the go buttons, blended dividers (owner, 2026-10-02:
      "good where they are but the style doesn't fit"). Blend colours: assets/buttons.css. ── */
.nw-trust-bar {
  border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(#fff, #fff) padding-box, var(--mix-line) border-box;
  box-shadow: 0 4px 0 rgba(11, 34, 57, .22), 0 14px 30px rgba(35, 79, 143, .12);
}
.nw-trust-cell + .nw-trust-cell::before { width: 2px; background: linear-gradient(180deg, transparent, #3371b5 30%, var(--hue) 70%, transparent); opacity: .45; }
.nw-trust-ico {
  width: 48px; height: 48px; border-radius: 14px; color: #fff; font-size: 1.4rem;
  background: var(--mix-go); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--mix-edge);
  transition: transform .15s ease, filter .15s ease;
}
.nw-trust-ico svg { width: 56%; height: 56%; }
a.nw-trust-cell:hover { background: linear-gradient(120deg, #eef5fd, var(--hue-tint)); }
a.nw-trust-cell:hover .nw-trust-ico { transform: translateY(-2px) rotate(-4deg); filter: brightness(1.08); }
a.nw-trust-cell:first-child:hover { border-radius: 18px 0 0 18px; }
a.nw-trust-cell:last-child:hover { border-radius: 0 18px 18px 0; }
@media (max-width: 600px) {
  .nw-trust-bar { border: 0; background: none; box-shadow: none; }
  .nw-trust-cell { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--mix-line) border-box !important; }
}