/* ============================================================
   Brand — red and blue (owner, 2026-10-02):
   "blue is where I need to look, red is I need to buy."

   - BLUE (the banner's royal blue #3371B5): the panels that tell
     you where you are — home carousel, shop/category headers,
     info page headers, graded band, Nerd Coins, account and order
     panels — with white writing. Plain buttons are blue too.
   - RED: only the buttons that take money (Add, Add to basket,
     Place order, Try paying again) and urgency ("1 left").
   - Everything else: white cards on a light page, navy writing,
     so the stock stays the colour. Gold = Nerd Coins / graded.
   The header (soft cyan, assets/header.css) is the one the owner
   picked ("B"). The full-cyan version lives in "NerdWare Theme1".
   Loaded last.
   ============================================================ */
:root {
  --nw-bg: #f3f6fa;                    /* page */
  --nw-yellow: #dbe8fb;                /* small light-blue accents (hovers, badges) */
  --nw-aqua-soft: #eaf2fc;
  --b-panel: #ffffff;
  --b-ink: #0b2239;                    /* writing on white */
  --b-ink-soft: rgba(11, 34, 57, .68);
  --b-blue: #3371b5;                   /* LOOK HERE */
  --b-blue-deep: #234f8f;
  --b-blue-panel: linear-gradient(135deg, #3d7fc8 0%, #3371b5 45%, #234f8f 100%);
  --b-on-blue-soft: rgba(255, 255, 255, .84);
  --b-soft: #f1f5fa;
  --b-tint: #e6effa;
  --b-line: 1px solid #dbe4ef;
  --b-lift: 0 8px 24px rgba(11, 34, 57, .08);
  --b-red: #d7262d;                    /* BUY */
  --b-red-dark: #bd1f25;
  --b-red-edge: #8f161b;

  /* The two colours that can be changed in Management → Settings → 🎨 Website Colours. These are
     today's; inc/colours.php prints new ones (and the shades that go with them) over them. */
  --buy: #d7262d; --buy-rgb: 215, 38, 45; --buy-hi: #f2444b; --buy-dark: #bd1f25;     /* Buy buttons */
  --buy-edge: #8f161b; --buy-mid: #9a2c6b; --buy-ink: #fff; --buy-text: #d7262d;
  --hue: #d7262d; --hue-rgb: 215, 38, 45; --hue-hi-rgb: 232, 42, 50;                  /* Red glow */
  --hue-go-mid: #6c3f97; --hue-go-end: #c42f47; --hue-line-mid: #7a3a8e; --hue-tint: #fbeef3;
  --hue-tag: #d93f45; --hue-ink: #fff; --hue-text: #d7262d;
}

/* Small labels: red on the light page, white on blue */
.nw-kicker { background: #fde8e9; color: #b8161d; }
.nw-band-dark .nw-kicker, .nw-coins-band .nw-kicker, .nw-pagehero .nw-kicker,
.nw-cat-hero .nw-kicker, .nw-login-hello .nw-kicker { background: #fff; color: var(--b-blue); }

/* ── Buttons ───────────────────────────────────────────────── */
/* Not money (How it works, Keep shopping, Sign up, Track my parcel): blue */
.nw-btn-yellow { background: var(--b-blue); color: #fff; box-shadow: 0 4px 0 var(--b-blue-deep); }
.nw-btn-yellow:hover { background: var(--b-blue-deep); color: #fff; }

/* Money: red. "In our shop" buttons (online orders off) are not money — they stay navy. */
.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-ty-hero.is-failed .nw-btn-yellow {
  background: var(--buy); color: var(--buy-ink); box-shadow: 0 4px 0 var(--buy-edge);
}
.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,
.nw-ty-hero.is-failed .nw-btn-yellow:hover { background: var(--buy-dark); color: var(--buy-ink); }
.nw-pcard .nw-btn.nw-add.added:not(.nw-add-instore) { background: var(--nw-green); box-shadow: none; }
.nw-co-side #place_order, .nw-summary .wc-proceed-to-checkout .checkout-button {
  background: var(--buy) !important; color: var(--buy-ink) !important;
  box-shadow: 0 6px 0 var(--buy-edge), 0 12px 24px rgba(var(--buy-rgb), .25) !important;
}
.nw-co-side #place_order:hover, .nw-summary .wc-proceed-to-checkout .checkout-button:hover { background-color: var(--buy-dark) !important; }   /* colour only: the blend and its shine stay on hover */
.nw-co-side #place_order:active, .nw-summary .wc-proceed-to-checkout .checkout-button:active { box-shadow: 0 2px 0 var(--buy-edge) !important; }

/* Plain buttons sitting on a blue panel: white */
.nw-coins-band .nw-btn-yellow, .nw-rewards .nw-btn-yellow, .nw-pagehero .nw-btn-yellow, .nw-cat-hero .nw-btn-yellow,
.nwa-hello .nw-btn-yellow, .nwa-coins-hero .nw-btn-yellow, .nw-ty-hero:not(.is-failed) .nw-btn-yellow, .nw-band-dark .nw-btn-yellow,
.nw-login-hello .nw-btn-yellow { background: #fff; color: var(--b-blue); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.nw-coins-band .nw-btn-yellow:hover, .nw-rewards .nw-btn-yellow:hover, .nw-pagehero .nw-btn-yellow:hover, .nw-cat-hero .nw-btn-yellow:hover,
.nwa-hello .nw-btn-yellow:hover, .nwa-coins-hero .nw-btn-yellow:hover, .nw-ty-hero:not(.is-failed) .nw-btn-yellow:hover, .nw-band-dark .nw-btn-yellow:hover,
.nw-login-hello .nw-btn-yellow:hover { background: var(--b-tint); color: var(--b-blue-deep); }
.nw-btn-glass, .nw-ty-hero .nw-btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.nw-btn-glass:hover, .nw-ty-hero .nw-btn-ghost:hover { background: #fff; color: var(--b-blue); }

/* ── Home carousel: blue ───────────────────────────────────── */
.nw-hero { border: 0; box-shadow: 0 14px 34px rgba(35, 79, 143, .22); }
.nw-hero.has-products, .nw-hero-slide.is-image-only { background: var(--b-blue); }
.nw-hero-product { --acc: 255, 255, 255; color: #fff; background: radial-gradient(circle at 78% 45%, rgba(255, 255, 255, .2), transparent 40%), var(--b-blue-panel); }
.nw-hp-glow { background: radial-gradient(circle, rgba(255, 255, 255, .32), transparent 65%); }
.nw-hero-product h2 a, .nw-hero-product h2 a:hover { color: #fff; }
.nw-hp-sub { color: var(--b-on-blue-soft); }
.nw-hp-price { color: #fff; }
.nw-hp-price del { color: rgba(255, 255, 255, .7); }
.nw-hp-new { background: var(--hue); color: var(--hue-ink); }
.nw-hp-when, .nw-hp-cond { background: rgba(255, 255, 255, .16); color: #fff; }
.nw-hp-graded { background: #fff; color: var(--b-blue-deep); border-color: #fff; }
.nw-hp-left { padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--hue-text); }
.nw-hero-product .added_to_cart { color: #fff; }
.nw-hp-face, .nw-hp-back.has-picture { box-shadow: 0 22px 44px rgba(0, 0, 0, .35); }
.nw-hp-art::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .3), transparent); }
.nw-hero.has-products .nw-hero-dots button { background: rgba(255, 255, 255, .35); }
.nw-hero.has-products .nw-hero-dots button.is-active { background: #fff; }
.nw-hero-dots.nw-hero-thumbs { background: rgba(0, 0, 0, .18); }
.nw-hero-thumbs button.is-active { box-shadow: 0 0 0 3px #fff; }
.nw-hero-progress { background: rgba(255, 255, 255, .18); }
.nw-hero-progress span { background: #fff; }

/* ── The menu (home carousel + shop side): white panel, blue marks ── */
.nw-hero-menu, .nw-side .nw-hero-menu {
  background: var(--b-panel); border: var(--b-line); box-shadow: var(--b-lift);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nw-side .nw-hero-menu { border-radius: 22px; }
.nw-hero-menu h3 { color: var(--b-blue); }
.nw-hero-menu a { background: var(--b-soft); color: var(--b-ink); }
.nw-hm-count { background: var(--b-blue); color: #fff; }
.nw-hero-menu a:hover, .nw-hm-item:hover > a, .nw-hm-item:focus-within > a,
.nw-hero-menu.js-menu .nw-hm-item:hover > a,
.nw-hero-menu.js-menu .nw-hm-item.is-open > a,
.nw-hero-menu.js-menu .nw-hm-item:focus-within > a,
.nw-hero-menu.is-dropdown .nw-hm-row > a:hover { background: var(--b-tint); color: var(--b-ink); }
.nw-hero-menu a:hover .nw-hm-count, .nw-hm-item:hover > a .nw-hm-count,
.nw-hero-menu.js-menu .nw-hm-item.is-open > a .nw-hm-count { background: var(--b-blue); color: #fff; }
.nw-hero-menu a.nw-hm-all { background: transparent; color: var(--b-blue); box-shadow: inset 0 0 0 2px var(--b-blue); }
.nw-hero-menu a.nw-hm-all:hover { background: var(--b-blue); color: #fff; }
.nw-hm-toggle { background: var(--b-soft); color: var(--b-ink); }
.nw-hm-toggle:hover, .nw-hm-item.is-expanded .nw-hm-toggle { background: var(--b-tint); color: var(--b-blue); }
.nw-hm-drop { border-left-color: rgba(51, 113, 181, .3); }
.nw-hero-menu.is-dropdown .nw-hm-drop a { color: var(--b-ink); }
.nw-hero-menu.is-dropdown .nw-hm-drop a b { color: var(--b-blue); }
.nw-hero-menu.is-dropdown .nw-hm-drop a:hover { background: var(--b-soft); color: var(--b-ink); }
.nw-hero-menu.is-dropdown .nw-hm-drop a.is-current { background: var(--b-tint); color: var(--b-blue-deep); }
.nw-hero-menu.is-dropdown a.nw-hm-drop-head { color: var(--b-ink); }
.nw-hero-menu.is-dropdown a.nw-hm-drop-all { color: var(--b-blue); }
.nw-hm-item.is-here > a, .nw-hero-menu.is-dropdown .nw-hm-item.is-here > .nw-hm-row > a { box-shadow: inset 0 0 0 2px var(--b-blue); }
.nw-hm-item.is-here > a .nw-hm-label::before { color: var(--b-blue); }

/* ── Home: trust strip, category tiles (blue tops, white names) ── */
.nw-trust-ico { background: var(--b-tint); box-shadow: inset 0 0 0 1px #d3e1f5; }
.nw-cat-card { --acc: 255, 255, 255; color: var(--b-ink); background: var(--b-panel); border: 0; box-shadow: var(--b-lift); }
.nw-cat-card:hover { color: var(--b-ink); box-shadow: 0 14px 32px rgba(35, 79, 143, .2); }
.nw-cat-card .nw-cat-fan { background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .25), transparent 60%), var(--b-blue-panel); }
.nw-fan-card { box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.nw-cat-info { background: none; }
.nw-cat-info small { color: var(--b-ink-soft); }
.nw-cat-meta { color: var(--b-ink); }
.nw-cat-meta i { background: var(--b-blue); color: #fff; }
.nw-cat-card:hover .nw-cat-meta i { background: var(--b-blue-deep); color: #fff; }

/* ── Blue panels with white writing ───────────────────────── */
.nw-band-dark, .nw-coins-band, .nw-rewards, .nw-cat-hero, .nw-pagehero, .nw-login-hello, .nwa-hello, .nwa-coins-hero, .nw-ty-hero {
  color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .14), transparent 42%), var(--b-blue-panel);
}
.nw-coins-band, .nw-rewards, .nw-cat-hero, .nwa-hello, .nwa-coins-hero, .nw-ty-hero { border: 0; box-shadow: 0 12px 30px rgba(35, 79, 143, .22); }
.nw-band-dark { border: 0; }
.nw-band-dark .nw-section-head h2, .nw-coins-copy h2, .nw-rewards h2, .nw-cat-hero h1, .nw-pagehero h1, .nw-login-hello h2,
.nwa-hello h2, .nw-ty-hero h1, .nw-ty-hero p b { color: #fff; }
.nw-coins-copy p, .nw-rewards p, .nw-cat-hero-desc, .nw-login-hello > p, .nwa-hello p, .nwa-coins-hero span, .nw-ty-hero p { color: var(--b-on-blue-soft); }
.nwa-hello small, .nwa-coins-hero small { color: rgba(255, 255, 255, .75); }
.nw-cat-hero::before, .nwa-hello::before { display: none; }

/* Graded band */
.nw-band-dark .nw-more { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75); }
.nw-band-dark .nw-more:hover { background: #fff; color: var(--b-blue); }
.nw-band-dark .nw-pcard { box-shadow: 0 12px 26px rgba(0, 0, 0, .22); }

/* Nerd Coins */
.nw-coin-steps li { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.nw-coin-steps b { color: #fff; }
.nw-coin-steps span { background: var(--nw-gold); color: var(--b-ink); }
.nw-coin-steps small { color: rgba(255, 255, 255, .8); }
.nw-big-coin { filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .3)); }
.nw-rewards::after { background: rgba(255, 255, 255, .12); }

/* Shop / category header */
.nw-cat-hero-count { background: #fff; color: var(--b-blue); }
.nw-cat-hero-chips a { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.nw-cat-hero-chips a span { background: rgba(255, 255, 255, .2); }
.nw-cat-hero-chips a:hover { background: #fff; color: var(--b-blue); }
.nw-cat-hero-chips a:hover span { background: var(--b-tint); }
.nw-cat-hero-fan .nw-fan-card { box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }

/* Sign in / sign up */
.nw-login { border: 0; box-shadow: 0 18px 50px rgba(35, 79, 143, .16); }
.nw-login-perks li, .nw-login-perks li b, .nw-login-perks li span { color: #fff; }
.nw-login-cards span { border-color: rgba(255, 255, 255, .22) !important; background: rgba(255, 255, 255, .06); }
.nw-login-perks li .nw-perk-icon { background: #fff; border: 0; }
.nw-hello-cta { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.nw-hello-cta p { color: #fff; }
.nw-hello-cta small { color: rgba(255, 255, 255, .8); }

/* Info pages */
.nw-pagehero { border-bottom: 0; }
.nw-pagehero-icon { background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); border: 0; }
.nw-info-nav a.is-here { background: var(--b-blue); color: #fff; }
.nw-hours-list li.is-today { background: var(--b-blue); color: #fff; }
.nw-hours-list li.is-today b { color: #fff; }

/* My Account */
.nwa-nav { color: var(--b-ink); background: var(--b-panel) !important; border: var(--b-line); box-shadow: var(--b-lift) !important; }
.nwa-nav h3 { color: var(--b-blue); }
.woocommerce-MyAccount-navigation.nwa-nav a { background: var(--b-soft); color: var(--b-ink); }
.woocommerce-MyAccount-navigation.nwa-nav a:hover { background: var(--b-tint); color: var(--b-ink); }
.woocommerce-MyAccount-navigation.nwa-nav .is-active a { background: var(--b-blue); color: #fff; }
.woocommerce-MyAccount-navigation-link--customer-logout { border-top-color: rgba(11, 34, 57, .12); }
.woocommerce-MyAccount-navigation.nwa-nav .woocommerce-MyAccount-navigation-link--customer-logout a { background: none; color: var(--b-red); }
.nwa-hello-coins { color: var(--b-ink); background: #fff; box-shadow: none; }
.nwa-hello-coins:hover { background: #fff8e6; color: var(--b-ink); }
.nwa-hello-coins em { color: var(--b-ink-soft); }
.nwa-hello-coins b { color: #b07800; }
.nwa-coins-hero b { color: var(--nw-gold); }
.nwa-hello-tc { background: #fff; box-shadow: none; }
.nwa-hello-tc:hover { background: #effaf3; }
.nwa-hello-tc b { color: var(--nw-green); }

/* Order pages (thank you + My Account → order) */
.nw-ty-steps li { color: rgba(255, 255, 255, .75); }
.nw-ty-steps li + li::before { background: rgba(255, 255, 255, .3); }
.nw-ty-steps li span { background: rgba(255, 255, 255, .2); color: #fff; }
.nw-ty-steps li.is-done { color: #fff; }
.nw-ty-steps li.is-next span { background: #fff; color: var(--b-blue); }
.nw-ty-pick { background: rgba(255, 255, 255, .15); color: #fff !important; }
.nw-ty-pick b { color: #fff !important; }
.nw-ty-collect { color: var(--b-on-blue-soft) !important; }
.nw-ty-track b { color: #fff; }
.nw-vo-top a { color: #fff; }

/* Small section labels: solid red (owner wants the red to show) */
.nw-kicker { background: var(--b-red); color: #fff; }