/*
Theme Name: Sanctum Gold
Theme URI: https://example.com/sanctum-gold
Author: ItemGG
Description: An original mobile-first WooCommerce theme for a Diablo-style in-game goods shop. Clean light theme with an optional dark gothic mode.
Version: 1.9.216
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sanctum-gold
*/

:root,
.sg-search-drop{
  /* v1.9.158 (owner): "nearly neutral" page, warm charcoal bands (see .sg-band-dark below).
     v1.9.170 (owner, "B2 + T1"): lighter page, white cards with a soft shadow (less warm, less eye strain) */
  --bg:#faf9f8;
  --bg2:#f2f1ee;
  --card:#ffffff;
  --card2:#faf9f7;
  --surface:#ffffff; /* v1.9.48: was never defined — broke every rule referencing it (server highlights, pills, cards) */
  --accent:#f97316; /* v1.9.49: was never defined — focus outlines, radio hovers, card CTAs were silently dropped */
  --surface2:#f2f1ee; /* v1.9.49: was scoped to D2R archives only — product-page radios and POE2/D4 cards lost their tint */
  --border:#e4e2de;
  --border-gold:#f3b67f;
  --gold:#9a3a1c;
  --gold-light:#f97316;
  --gold-dim:#9a3a1c;
  --gold-hover:#7a2c14;
  --price:#282422;
  --heading-accent:#9a3a1c;
  --red:#c42e36; /* v1.9.158: was #d43a41 (4.1:1 on the near-neutral page) */
  --red-dark:#a81c22;
  --text:#282422;
  --muted:#524c48;
  --muted2:#6a645f;
  --green:#157a48;
  --radius:10px;
  --font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --header-bg:rgba(250,249,248,.96);
  --footer-bg:#262321;
  --input-bg:#ffffff;
  --body-glow:none;
  --hero-bg:linear-gradient(180deg,#f2f1ee,#faf9f8);
  --hero-fade:linear-gradient(180deg,transparent,rgba(250,249,248,.96));
  --hero-shadow:none;
  --card-shadow:0 1px 2px rgba(40,30,20,.05), 0 4px 14px rgba(40,30,20,.04);
  --card-shadow-hover:0 12px 28px rgba(0,0,0,.13);
  --btn-bg:linear-gradient(180deg,#fb923c,#f97316 55%,#ea580c);
  --btn-border:#c2410c;
  --btn-shadow:0 2px 10px rgba(249,115,22,.35), inset 0 1px 0 rgba(255,255,255,.5);
  /* v1.9.156 (owner): near-black label on the bright orange — white was 2.3–3.6:1 */
  --btn-text:#1a120a;
  /* v1.9.158 (owner): option rows and server buttons follow the page; the picked one gets a faint peach + orange edge.
     v1.9.170 (owner, "T1"): softer tiles — a lighter fill and a faint edge so they sit into the white card */
  --opt-bg:#fbfaf9;
  --opt-border:#efedea;
  --opt-hover:#e9c7ae;
  --opt-sel-bg:#fff6f0;
  --opt-sel-border:#f3c4a2;
  --srv-bg:#fcfbfa;
  --opt-pill-bg:#fbfaf9;
  --opt-pill-edge:#efedea;
  --opt-pill-sel-bg:#fff6f0;
  --opt-pill-sel-edge:#f3c4a2;
}
/* v1.9.156: native form controls (radios, selects, scrollbars) follow the mode */
:root{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
/* Dark mode (opt-in via the header toggle). v1.9.156: today's warm colours kept (owner); main areas one step lighter than the bands. */
[data-theme="dark"],
[data-theme="dark"] .sg-search-drop{
  --bg:#13100e;
  --bg2:#181411;
  --card:#1b1613;
  --card2:#211b17;
  --surface:#1b1613;
  --surface2:#1f1915;
  --accent:#fdba74;
  --border:#2e251d;
  --border-gold:#7c4a1e;
  --gold:#fb923c;
  --gold-light:#fdba74;
  --gold-dim:#d97706;
  --gold-hover:#fdba74;
  --price:#fdba74;
  --heading-accent:#fdba74;
  --red:#b01e24;
  --red-dark:#7c1216;
  --text:#ece2cd;
  --muted:#ab9d83;
  --muted2:#978b75;
  --green:#58b368;
  --header-bg:rgba(19,16,14,.95);
  --footer-bg:#080707;
  --input-bg:#1c1815;
  --body-glow:none;
  --hero-bg:
    radial-gradient(1000px 480px at 50% -140px, rgba(176,30,36,.28), transparent 70%),
    radial-gradient(800px 420px at 50% 130%, rgba(249,115,22,.1), transparent 70%),
    linear-gradient(180deg,#100d0b,#0b0a09);
  --hero-fade:linear-gradient(180deg,transparent,rgba(11,10,9,.9));
  --hero-shadow:0 3px 24px rgba(0,0,0,.8);
  --card-shadow:0 2px 10px rgba(0,0,0,.35);
  --card-shadow-hover:0 12px 32px rgba(0,0,0,.55);
  /* v1.9.156 (owner): deep orange with a white label in dark mode — white on the light orange was 1.7–2.8:1 */
  --btn-bg:linear-gradient(180deg,#c94a0b,#b93f0b 55%,#9a3412);
  --btn-border:#7c2d12;
  --btn-text:#ffffff;
  --btn-shadow:0 2px 14px rgba(249,115,22,.3), inset 0 1px 0 rgba(255,255,255,.35);
  /* v1.9.158: option rows and server buttons look as before in dark mode */
  --opt-bg:var(--surface2);
  --opt-border:var(--border);
  --opt-hover:var(--accent);
  --opt-sel-bg:var(--surface2);
  --opt-sel-border:var(--border);
  --srv-bg:var(--surface);
  --opt-pill-bg:var(--card2);
  --opt-pill-edge:transparent;
  --opt-pill-sel-bg:var(--card2);
  --opt-pill-sel-edge:transparent;
}
/* v1.9.156 (owner, combo 2): dark bands — header, hero slider, footer, homepage "Why" + questions,
   game-hub questions, product "How delivery works", toast. Graphite in light mode, deepest warm black in dark mode.
   The search dropdown inside the header keeps the page colours (declared with :root above). */
.sg-band-dark,.sg-header,.sg-footer,.sg-slider,.sg-delivery-steps,.sg-toast{
  --bg:#262321;
  --bg2:#302c29;
  --card:#302c29;
  --card2:#38332f;
  --surface:#302c29;
  --surface2:#38332f;
  --accent:#ff9a4a;
  --border:#45403c;
  --border-gold:rgba(255,122,26,.5);
  --gold:#ff9a4a;
  --gold-light:#ffb070;
  --gold-dim:#ff9a4a;
  --gold-hover:#ffc08a;
  --price:#ff9a4a;
  --heading-accent:#ff9a4a;
  --text:#f2efec;
  --muted:#c9c2bb;
  --muted2:#a0978f;
  --header-bg:rgba(38,35,33,.97);
  --footer-bg:#262321;
  --input-bg:#302c29;
  --card-shadow:0 2px 10px rgba(0,0,0,.35);
  --band-bg:radial-gradient(900px 340px at 50% 110%, rgba(230,90,30,.22), transparent 70%), #262321;
  color:var(--text);
}
[data-theme="dark"] .sg-band-dark,[data-theme="dark"] .sg-header,[data-theme="dark"] .sg-footer,
[data-theme="dark"] .sg-slider,[data-theme="dark"] .sg-delivery-steps,[data-theme="dark"] .sg-toast{
  --bg:#0b0a09;
  --bg2:#161311;
  --card:#161311;
  --card2:#1c1815;
  --surface:#161311;
  --surface2:#1c1815;
  --accent:#fdba74;
  --border:#2b231b;
  --border-gold:#7c4a1e;
  --gold:#fb923c;
  --gold-light:#fdba74;
  --gold-dim:#d97706;
  --gold-hover:#fdba74;
  --price:#fdba74;
  --heading-accent:#fdba74;
  --text:#ece2cd;
  --muted:#b5a88f;
  --muted2:#978b75;
  --header-bg:rgba(11,10,9,.95);
  --footer-bg:#080707;
  --input-bg:#1c1815;
  --band-bg:radial-gradient(900px 360px at 50% 0%, rgba(176,30,36,.20), transparent 70%), radial-gradient(800px 340px at 50% 115%, rgba(249,115,22,.10), transparent 70%), #0b0a09;
}
.sg-band-dark{background:var(--band-bg)}
.sg-band-dark h2,.sg-band-dark h3{color:var(--text)}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--body-glow);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hover)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.12;color:var(--text)}
p{margin:0 0 1em}
ul,ol{list-style:none}

/* ---------- layout ---------- */
.sg-container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
.sg-section{padding:56px 0}
.sg-section-title{text-align:center;margin-bottom:8px;font-size:clamp(1.5rem,4vw,2.2rem);text-transform:uppercase}
.sg-section-title .accent{color:var(--gold)}
.sg-ornament{text-align:center;color:var(--gold-dim);letter-spacing:.6em;margin-bottom:28px;font-size:.85rem}
.sg-section-sub{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 34px}

/* ---------- buttons ---------- */
.sg-btn,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-block;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.85rem;color:var(--btn-text) !important;
  background:var(--btn-bg);
  border:1px solid var(--btn-border);border-radius:6px;padding:13px 28px;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
  box-shadow:var(--btn-shadow);
}
.sg-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  filter:brightness(1.08);transform:translateY(-1px);color:var(--btn-text) !important;
  box-shadow:0 4px 20px rgba(249,115,22,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
/* v1.9.156: WooCommerce's default ".woocommerce:where(body:not(...)) button.button:hover" (0,3,1) sets a lilac-grey
   background and beat the theme's button rule on hover, so hovered buttons lost their orange (white-on-lilac was 1.4:1
   in dark mode). Keep the orange on hover; one element more specific than WooCommerce's rule. */
html .woocommerce a.button:hover,html .woocommerce button.button:hover,html .woocommerce input.button:hover{background:var(--btn-bg);background-color:transparent}
/* v1.9.156 (ChatGPT, Low): no brightness filter on dark-mode hover — it lightened the deep orange under the white label */
[data-theme="dark"] .sg-btn:hover,[data-theme="dark"] .woocommerce a.button:hover,[data-theme="dark"] .woocommerce button.button:hover,[data-theme="dark"] .woocommerce input.button:hover,
[data-theme="dark"] .woocommerce button.button.sg-d2r-add.sg-needs-server:hover,[data-theme="dark"] .sg-d2r-buynow:hover{filter:none}
.sg-btn-red{
  background:linear-gradient(180deg,#d43a41,var(--red) 55%,var(--red-dark));
  border-color:#5c0e11;color:#fff !important;
  box-shadow:0 2px 14px rgba(176,30,36,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.sg-btn-red:hover{color:#fff !important;box-shadow:0 4px 22px rgba(176,30,36,.5);filter:none} /* v1.9.156 (ChatGPT S156-7): the shared hover brightness lifted the red to 4.09:1 under the white label */
.sg-btn-ghost{
  background:transparent;color:var(--gold) !important;border:1px solid var(--border-gold);box-shadow:none;
}
.sg-btn-ghost:hover{border-color:var(--gold);color:var(--gold-hover) !important;background:rgba(249,115,22,.06)}
.woocommerce button.button:disabled,.woocommerce button.button.disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- header ---------- */
.sg-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.sg-header-inner{display:flex;align-items:center;gap:16px;height:66px}
/* v1.9.162 (owner): ItemGG — gold coin + "ITEMGG" in Russo One, "GG" in the coin's gold (functions.php sg_brand_logo). */
.sg-logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;flex:0 0 auto;color:#f3eadc}
.sg-logo-coin{display:block;width:34px;height:34px;flex:0 0 auto}
.sg-logo-word{font-family:'Russo One','Barlow Condensed',sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:.14em;line-height:1;color:#f3eadc} /* own colour: footer link colours must not grey it */
.sg-logo-gg{color:#dba640}
.sg-logo--footer .sg-logo-coin{width:40px;height:40px}
.sg-logo--footer .sg-logo-word{font-size:1.6rem}
/* v1.9.163 (owner, option C): hover / keyboard focus — "ITEM" turns light orange like the old logo's
 * "SANCTUM", "GG" stays gold, the coin tilts a little and glows. No tilt for reduced motion. */
.sg-logo-coin{transition:transform .2s ease,filter .2s ease}
.sg-logo-word{transition:color .2s ease}
.sg-logo:hover .sg-logo-word,.sg-logo:focus-visible .sg-logo-word{color:var(--gold-hover)}
.sg-logo:hover .sg-logo-gg,.sg-logo:focus-visible .sg-logo-gg{color:#dba640}
.sg-logo:hover .sg-logo-coin,.sg-logo:focus-visible .sg-logo-coin{transform:rotate(-12deg) scale(1.06);filter:drop-shadow(0 0 6px rgba(219,166,64,.55))}
@media (prefers-reduced-motion:reduce){
  .sg-logo-coin,.sg-logo-word{transition:none}
  .sg-logo:hover .sg-logo-coin,.sg-logo:focus-visible .sg-logo-coin{transform:none}
}
.sg-nav{margin-left:auto}
.sg-nav ul{display:flex;gap:4px;align-items:center}
.sg-nav a{
  color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 13px;border-radius:6px;transition:color .15s,background .15s;
}
.sg-nav a:hover,.sg-nav .current-menu-item a{color:var(--gold-hover);background:rgba(249,115,22,.08)}
/* v1.9.46: desktop nav must stay on one line (QA issue 1). Hamburger takes over below 861px. */
@media (min-width:861px){
  .sg-nav ul{gap:2px}
  .sg-nav a{white-space:nowrap;padding:10px 6px;letter-spacing:.05em;font-size:.76rem}
  .sg-header-inner{gap:10px}
  .sg-header-inner .sg-search{flex:1 1 420px;min-width:180px;max-width:520px} /* v1.9.161: longer (fewer menu items) */
}
/* v1.9.160 (ChatGPT S160-1): the header row (logo, search, 6 menu items, theme, account, basket) needed
 * ~1240px; between the phone header (≤860px) and that width it ran off the screen. Compact desktop: icon-only
 * basket, tighter menu, a search box that can shrink. (1.9.160 also moved the search under the header below
 * 1100px; 1.9.161's single "Games" item made room, so that row is gone.) */
@media (min-width:861px) and (max-width:1279px){
  .sg-cart-link .sg-cart-label{display:none}
  .sg-nav a{padding:10px 4px;letter-spacing:.02em;font-size:.72rem}
  .sg-header-inner .sg-search{flex:1 1 140px;min-width:120px}
}
/* v1.9.161: the 861–1099px search row under the header is gone — with "Games" as one menu item the search
 * fits in the header row down to 861px (≈260px wide there), so the header is one 66px row at every desktop width. */
@media (min-width:861px) and (max-width:959px){
  .sg-header-inner{gap:6px}
  .sg-logo-word{font-size:1.3rem;letter-spacing:.1em}
  .sg-nav a{padding:10px 3px}
}
/* Dropdown sub-menus (game categories). */
.sg-nav li{position:relative;list-style:none}
.sg-nav ul ul{
  display:none;position:absolute;top:100%;left:0;min-width:230px;z-index:120;
  flex-direction:column;align-items:stretch;gap:2px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.35);
  max-height:70vh;overflow-y:auto;
}
.sg-nav li:hover > ul,.sg-nav li:focus-within > ul{display:flex}
.sg-nav ul ul a{display:block;padding:10px 14px;white-space:nowrap}
.sg-nav .menu-item-has-children > a::after{content:"▾";margin-left:6px;font-size:.7em;color:var(--gold)}
/* v1.9.161 (owner, option A): desktop menu "Home · Games · FAQ · Contact" (inc-mobile-nav.php sg_desktop_nav).
 * Games opens a panel: games on the left, the active game's servers on the right. theme.js adds .is-js
 * and opens it on hover / click; without JS it opens on hover / focus. Phones hide it (.sg-mnav instead). */
.sg-dnav-btn{
  background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 13px;border-radius:6px;transition:color .15s,background .15s;white-space:nowrap;
}
.sg-dnav-btn::after{content:"▾";margin-left:6px;font-size:.7em;color:var(--gold)}
.sg-dnav-btn:hover,.sg-dnav-games.is-open .sg-dnav-btn,.sg-dnav-games.current-menu-ancestor .sg-dnav-btn{color:var(--gold-hover);background:rgba(249,115,22,.08)}
.sg-dnav-panel{
  display:none;position:absolute;top:calc(100% + 10px);left:-12px;z-index:120;
  grid-template-columns:minmax(210px,auto) minmax(230px,auto);grid-auto-rows:min-content;column-gap:8px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:8px;box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.sg-dnav-panel{overflow-y:auto;overscroll-behavior:contain} /* theme.js caps max-height to the visible window (S161-2) */
.sg-dnav-games.is-open::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:12px} /* hover bridge to the panel */
.sg-dnav-games.is-open > .sg-dnav-panel,
.sg-dnav:not(.is-js) .sg-dnav-games:hover > .sg-dnav-panel,
.sg-dnav:not(.is-js) .sg-dnav-games:focus-within > .sg-dnav-panel{display:grid}
.sg-nav .sg-dnav-panel a{
  display:block;white-space:nowrap;padding:10px 14px;border-radius:8px;
  font-size:.9rem;letter-spacing:.02em;text-transform:none;
}
.sg-nav .sg-dnav-panel a.sg-dnav-game{grid-column:1}
.sg-nav .sg-dnav-panel a.sg-dnav-game.is-active,.sg-nav .sg-dnav-panel a:hover{background:rgba(249,115,22,.16);color:var(--gold)} /* orange tint on the dark panel: ≥4.5:1 in both modes (a light peach fill gave 1.9:1) */
.sg-dnav-srv{grid-column:2;grid-row:1 / span 40;display:flex;flex-direction:column;gap:2px;
  border-left:1px solid var(--border);padding-left:8px}
.sg-dnav-srv[hidden]{display:none}
.sg-dnav-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--gold);font-size:.95rem;padding:8px 14px 2px}
.sg-dnav-sub{font-size:.75rem;color:var(--muted);padding:0 14px 6px}
.sg-nav .sg-dnav-srv a.is-current{color:var(--gold);font-weight:700}
@media (min-width:861px) and (max-width:1279px){
  .sg-dnav-btn{padding:10px 4px;letter-spacing:.02em;font-size:.72rem}
}
/* v1.9.161 (owner, 2px): a thin orange line under the header, on every page */
.sg-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#c2410c,#f97316 30%,#fb923c 50%,#f97316 70%,#c2410c)}
.sg-cart-link{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border-gold);border-radius:8px;padding:9px 14px;
  color:var(--gold-light);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  background:rgba(249,115,22,.07);white-space:nowrap;
}
.sg-cart-link:hover{border-color:var(--gold);background:rgba(249,115,22,.14)}
/* v1.9.84: account icon next to the cart. v1.9.160: on desktop too — it opens the account card (inc-account.php). */
.sg-account-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid var(--border-gold);border-radius:8px;padding:9px 10px;
  color:var(--gold-light);background:rgba(249,115,22,.07);white-space:nowrap}
.sg-account-link:hover,.sg-account-link.is-open{border-color:var(--gold);background:rgba(249,115,22,.14)}
.sg-account-link svg{width:18px;height:18px;display:block}
.sg-cart-count{
  background:var(--red);color:#fff;font-size:.72rem;font-weight:700;min-width:22px;height:22px;
  border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
}
.sg-menu-toggle{display:none;background:none;border:1px solid var(--border-gold);border-radius:8px;color:var(--gold);font-size:1.3rem;padding:6px 12px;cursor:pointer;margin-left:auto}

/* breadcrumbs */
.sg-crumbs{font-size:.8rem;color:var(--muted2);padding:16px 0 0;letter-spacing:.04em}
.sg-crumbs a{color:var(--muted)}
.sg-crumbs a:hover{color:var(--gold-hover)}
.sg-crumbs .sep{margin:0 8px;color:var(--border-gold)}
:root:not([data-theme="dark"]) .sg-crumbs .sep{color:var(--gold)} /* v1.9.173: rust "/" in light mode (owner 2026-10-21; was --border-gold, 1.7:1); dark keeps its brown (review S173-1) */
.woocommerce .woocommerce-breadcrumb{color:var(--muted2);font-size:.8rem;margin:0 0 1.2em}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}

/* ---------- hero ---------- */
.sg-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:88px 18px 76px;
  background:var(--hero-bg);
  border-bottom:1px solid var(--border);
}
.sg-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;pointer-events:none;
  background:var(--hero-fade);
}
.sg-hero-kicker{color:var(--gold);letter-spacing:.42em;font-size:.72rem;font-weight:700;text-transform:uppercase;margin-bottom:18px}
.sg-hero h1{
  font-size:clamp(2rem,7vw,3.6rem);text-transform:uppercase;margin-bottom:16px;
  text-shadow:var(--hero-shadow);
}
.sg-hero h1 .gold{color:var(--gold)}
.sg-hero p{color:var(--muted);max-width:620px;margin:0 auto 30px;font-size:1.02rem}
.sg-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.sg-hero-stats{display:flex;gap:36px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.sg-hero-stats .stat{text-align:center}
.sg-hero-stats .num{font-family:var(--font-display);font-size:1.6rem;color:var(--gold-light);font-weight:700}
.sg-hero-stats .lbl{font-size:.72rem;letter-spacing:.22em;color:var(--muted2);text-transform:uppercase}

/* ---------- category tiles ---------- */
.sg-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.sg-cat-tile{
  position:relative;display:block;border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card2),var(--card));
  padding:26px 18px;text-align:center;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  box-shadow:var(--card-shadow);
}
.sg-cat-tile::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(220px 160px at 50% 0%, rgba(249,115,22,.12), transparent 70%);
}
.sg-cat-tile:hover{transform:translateY(-3px);border-color:var(--border-gold);box-shadow:var(--card-shadow-hover)}
.sg-cat-icon{width:54px;height:54px;margin:0 auto 12px;display:block;color:var(--gold-light)}
.sg-cat-tile h3{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.sg-cat-tile .count{color:var(--muted2);font-size:.78rem;letter-spacing:.06em}

/* ---------- product cards / grids ---------- */
.sg-product-grid,.woocommerce ul.products{
  display:grid !important;grid-template-columns:repeat(2,1fr);gap:14px;
  margin:0 !important;padding:0 !important;
}
/* D2R: single-column cards on phones (room for inline roll variations) */
@media (max-width:639px){
  body.sg-game-diablo-2-resurrected .sg-product-grid,
  body.sg-game-diablo-2-resurrected.woocommerce ul.products{
    grid-template-columns:1fr;
  }
}
.sg-product-grid::before,.sg-product-grid::after,.woocommerce ul.products::before,.woocommerce ul.products::after{display:none !important}
.sg-card,.woocommerce ul.products li.product{
  position:relative;display:flex !important;flex-direction:column;width:auto !important;float:none !important;
  margin:0 !important;background:linear-gradient(170deg,var(--card2),var(--card));
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  box-shadow:var(--card-shadow);
}
.sg-card:hover,.woocommerce ul.products li.product:hover{
  transform:translateY(-3px);border-color:var(--border-gold);box-shadow:var(--card-shadow-hover);
}
.sg-card-media,.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{position:relative;display:block;order:-1}
.sg-card-media img,.woocommerce ul.products li.product img{
  width:100%;aspect-ratio:1/1;object-fit:cover;margin:0 !important;
  border-bottom:1px solid var(--border);
}
.sg-card-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:linear-gradient(180deg,#d43a41,var(--red-dark));
  color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.sg-card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
/* v1.9.46 desktop QA fixes 3–5. */
.woocommerce-cart .coupon .input-text{min-width:200px;width:200px}
.wc-block-components-order-summary-item .wc-block-components-product-name{overflow-wrap:break-word !important;word-break:normal !important}
.woocommerce div.product p.price ins,.woocommerce div.product span.price ins{text-decoration:none}
/* v1.9.46: 404 recovery page (QA issue 6). */
.sg-404{padding:72px 0;text-align:center}
.sg-404-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center}
.sg-404 h1{font-family:var(--font-display);font-size:2rem;letter-spacing:.04em;color:var(--text);margin:0}
.sg-404-sub{color:var(--muted);line-height:1.6;margin:0}
.sg-404 .sg-search{width:100%;max-width:460px}
.sg-404-hubs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sg-card-cat,.woocommerce ul.products li.product .sg-card-cat{
  font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);
}
.sg-card-title,.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-display);font-size:.98rem !important;letter-spacing:.03em;
  line-height:1.35;color:var(--text);padding:0 !important;
}
.sg-card-realms{font-size:.72rem;color:var(--muted2)}
.sg-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.sg-card-buy{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.sg-card-realm{width:100%;padding:9px 12px;font-size:.8rem;font-weight:600;color:var(--text);
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer}
.sg-card-realm:focus{outline:2px solid var(--accent);outline-offset:1px}
.sg-card-buy .button{width:100%;text-align:center}
/* v1.9.169: currency product card — the amount box (−/+ by the minimum) has the server dropdown's size and colours */
.sg-cur-qty{display:flex;align-items:stretch;background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.sg-cur-step{flex:0 0 40px;border:0;background:transparent;color:var(--gold);font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer;padding:6px 0}
.sg-cur-step:hover:not([disabled]){background:var(--border);color:var(--gold-hover)}
.sg-cur-step[disabled]{opacity:.35;cursor:default}
.sg-cur-step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sg-cur-qty input{flex:1;min-width:0;width:auto;margin:0;padding:9px 4px;border:0;border-radius:0;background:transparent;color:var(--text);
  text-align:center;font-size:.9rem;font-weight:700;box-shadow:none;-moz-appearance:textfield;appearance:textfield}
.sg-cur-qty input::-webkit-outer-spin-button,.sg-cur-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sg-cur-qty input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.sg-cur-card > .sg-card-body > .button{width:100%;text-align:center;margin-top:8px}
.sg-cur-qty-page{width:220px;max-width:100%}
.sg-cur-each{white-space:nowrap}
/* D2R variation radios */
.sg-card-variations{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.sg-var-option{display:flex;align-items:center;gap:10px;padding:8px 10px;
  background:var(--opt-bg);border:1px solid var(--opt-border);border-radius:10px;cursor:pointer;font-size:.82rem}
.sg-var-option:hover{border-color:var(--opt-hover)}
/* v1.9.158 (owner): the picked option shows at a glance (faint peach + orange edge in light mode) */
.sg-var-option:has(input[type=radio]:checked){background:var(--opt-sel-bg);border-color:var(--opt-sel-border)}
.sg-var-option:has(input[type=radio]:checked):hover{border-color:var(--opt-hover)} /* review: hover still shows on the picked row */
.sg-var-option input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.sg-var-option input[type=radio]:checked + .sg-var-label{font-weight:700;color:var(--text)}
.sg-var-label{flex:1;color:var(--muted)}
.sg-var-price{font-weight:700;color:var(--price);white-space:nowrap}
/* Out-of-stock variations stay visible but unusable on the current realm. */
.sg-var-option.sg-var-oos{opacity:.55;cursor:not-allowed}
.sg-var-option.sg-var-oos:hover{border-color:var(--border)}
.sg-var-option.sg-var-oos .sg-var-label::after{content:" — out of stock";font-size:.78em;color:var(--muted2)}
.sg-price,.woocommerce ul.products li.product .price{color:var(--price) !important;font-size:1.15rem !important;font-weight:800;margin:0 !important}
.sg-price del,.woocommerce ul.products li.product .price del{color:var(--muted2);font-weight:400;font-size:.85rem}
.sg-price ins,.woocommerce ul.products li.product .price ins{text-decoration:none}
.sg-add,.woocommerce ul.products li.product .button{
  margin:0 !important;padding:10px 16px !important;font-size:.74rem !important;white-space:nowrap;
}
.sg-stock{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--green);font-weight:600}
.sg-stock::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.sg-delivery{font-size:.74rem;color:var(--muted2)}
.sg-delivery strong{color:var(--muted)}

/* ---------- trust badges ---------- */






/* ---------- how it works ---------- */
.sg-steps{display:grid;gap:14px}
.sg-step{
  display:flex;gap:18px;align-items:flex-start;border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;background:linear-gradient(160deg,var(--card2),var(--card));
}
.sg-step-num{
  flex:0 0 46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--gold-light);
  border:1px solid var(--border-gold);background:rgba(249,115,22,.08);
}
.sg-step h3{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;color:var(--heading-accent)}
.sg-step p{font-size:.88rem;color:var(--muted);margin:0}

/* ---------- FAQ ---------- */
.sg-faq{max-width:760px;margin:0 auto}
.sg-faq details{
  border:1px solid var(--border);border-radius:8px;margin-bottom:10px;
  background:var(--card);overflow:hidden;
}
.sg-faq summary{
  cursor:pointer;padding:16px 18px;font-weight:700;font-size:.94rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text);
}
.sg-faq summary::-webkit-details-marker{display:none}
.sg-faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;font-weight:400;flex:0 0 auto}
.sg-faq details[open] summary::after{content:"–"}
.sg-faq details[open] summary{color:var(--heading-accent)}
.sg-faq .faq-a{padding:0 18px 18px;color:var(--muted);font-size:.9rem}

/* ---------- Guides (v1.9.191, owner 2026-11-08: the "Ready to gear up?" box became "Latest Guides") ---------- */
.sg-guides-title{text-align:center;font-size:clamp(1.4rem,4.5vw,2.1rem);text-transform:uppercase;margin-bottom:8px}
.sg-guides-title .gold{color:var(--gold)}
.sg-guides-game .sg-guides-title{margin-bottom:22px}
.sg-guides-sub{text-align:center;color:var(--muted);margin:0 auto 26px;max-width:560px}
.sg-guides-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* v1.9.200 (owner 2026-11-09): the home page shows one guide per game, 4 across; 2 across on narrower screens above phones */
.sg-guides-home .sg-guides-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:821px) and (max-width:1100px){.sg-guides-home .sg-guides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sg-guide-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--card-shadow);text-decoration:none;color:var(--text);transition:box-shadow .2s,transform .2s}
.sg-guide-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px);color:var(--text)}
.sg-guide-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-guide-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.sg-guide-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.sg-guide-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--border-gold);border-radius:999px;padding:2px 10px}
.sg-guide-body h3{font-size:1.05rem;line-height:1.3;margin:0}
.sg-guide-body p{color:var(--muted);font-size:.9rem;margin:0}
.sg-guide-more{margin-top:auto;font-weight:700;font-size:.85rem;color:var(--gold)}
.sg-guides-all{text-align:center;margin-top:26px}
.sg-hub-about + .sg-guides{padding-top:0} /* the hub's About block already leaves the gap */
.sg-cat-after .sg-why + .sg-guides{padding-top:0} /* v1.9.203 (owner 2026-11-11): a category's Why Buy cards right above its guides: one gap, not two (not on the home page or hubs) */
.sg-guides-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 26px}
.sg-guides-filter a{border:1px solid var(--border);border-radius:999px;padding:6px 16px;font-weight:600;font-size:.85rem;color:var(--text);text-decoration:none;background:var(--card)}
.sg-guides-filter a:hover{border-color:var(--border-gold)}
.sg-guides-filter a[aria-current]{border-color:var(--gold);color:var(--gold)}
.sg-guides-list .navigation.pagination{margin-top:26px;text-align:center}
.sg-guides-list .nav-links{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sg-guides-list .page-numbers{border:1px solid var(--border);border-radius:8px;padding:6px 12px;color:var(--text);text-decoration:none}
.sg-guides-list .page-numbers.current{background:var(--gold);border-color:var(--gold);color:#fff}
/* The guide page (1.9.195, owner 2026-11-08): the PR #453 mock-up. Text column + a side column on wide
 * screens (one column under 960px, the side boxes after the text). */
.sg-section.sg-guide-article{padding-top:14px}
.sg-guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.sg-guide-main{min-width:0}
.sg-guide-head .sg-guide-tag{display:inline-block;margin-bottom:10px;text-decoration:none;background:var(--opt-sel-bg)}
.sg-guide-h1{text-align:left;margin-bottom:8px}
.sg-guide-meta{color:var(--muted2);font-size:.85rem;margin:0 0 18px}
.sg-guide-hero{width:100%;height:auto;border-radius:14px;display:block;margin:0 0 24px}
.sg-prose.sg-guide-content{max-width:760px;color:var(--text);font-size:1.02rem;line-height:1.7}
.sg-prose.sg-guide-content p{margin:0 0 1em}
.sg-prose.sg-guide-content > p:first-child{font-size:1.1rem;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--gold-light);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--card-shadow)}
.sg-prose.sg-guide-content h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.5rem;line-height:1.15;color:var(--heading-accent);margin:1.8em 0 .5em;scroll-margin-top:90px}
.sg-prose.sg-guide-content h3{font-size:1.08rem;margin:1.4em 0 .4em;color:var(--text)}
.sg-prose.sg-guide-content ul,.sg-prose.sg-guide-content ol{padding-left:22px;margin:0 0 1.1em}
.sg-prose.sg-guide-content ul{list-style:disc}
.sg-prose.sg-guide-content ol{list-style:decimal}
.sg-prose.sg-guide-content li{margin:.3em 0}
.sg-prose.sg-guide-content img{max-width:100%;height:auto;border-radius:10px}
.sg-prose.sg-guide-content a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.sg-prose.sg-guide-content strong{color:var(--text)}
.sg-prose.sg-guide-content .schema-faq-section{margin:0 0 .9em}
.sg-prose.sg-guide-content .schema-faq-question{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.08rem;margin:1.1em 0 .3em;color:var(--text)}
.sg-prose.sg-guide-content .schema-faq-answer{margin:0}
/* Item cards: a list made only of shop links (sg_guide_prepare). */
.sg-prose.sg-guide-content .sg-guide-shop{list-style:none;padding:0;margin:10px 0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;align-items:stretch}
.sg-guide-shop-item{margin:0!important;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:14px;display:flex;flex-direction:column;gap:8px}
.sg-prose.sg-guide-content .sg-guide-shop-img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;background:#0d0b10}
.sg-guide-shop-name{font-weight:700;line-height:1.25;color:var(--text)}
.sg-guide-shop-price{font-size:.9rem;color:var(--muted)}
.sg-prose.sg-guide-content a.sg-guide-shop-btn,.sg-guide-box-btn{margin-top:auto;display:block;text-align:center;text-decoration:none;font-weight:700;font-size:.9rem;color:var(--btn-text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:8px;padding:8px 10px;box-shadow:var(--btn-shadow)}
/* The side column: "In this guide" and "Shop <game>". */
.sg-guide-aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:16px}
.sg-guide-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:16px}
.sg-guide-box-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;font-size:1rem;margin:0 0 10px;color:var(--heading-accent)}
.sg-guide-box ol{list-style:decimal;margin:0;padding-left:18px;font-size:.88rem;line-height:1.5}
.sg-guide-box li{margin:.3em 0}
.sg-guide-box ol a{color:var(--muted);text-decoration:none}
.sg-guide-box ol a:hover{color:var(--gold)}
.sg-guide-box p{font-size:.88rem;color:var(--muted);margin:0 0 10px}
@media (max-width:960px){
  .sg-guide-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .sg-guide-aside{position:static}
}
/* 1.9.196: at 860px and below the sticky header is ~128px (bar + search row): "In this guide" jumps land below it */
@media (max-width:860px){.sg-prose.sg-guide-content h2{scroll-margin-top:150px}}
@media (max-width:600px){
  .sg-prose.sg-guide-content{font-size:1rem}
  .sg-prose.sg-guide-content .sg-guide-shop{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .sg-guides-grid,.sg-guides-home .sg-guides-grid{grid-template-columns:1fr;gap:16px}
  .sg-guide-card{flex-direction:row}
  /* 1.9.196: a square picture stretched to the card. The old aspect-ratio:auto + min-height:100% left the height to the
   * picture itself, and a lazy picture (WordPress sizes="auto") is held at 1500px until it loads: cards were 1502px tall. */
  .sg-guide-card .sg-guide-img{width:38%;aspect-ratio:1/1;height:auto;min-height:0;align-self:stretch;object-fit:cover;object-position:78% center;flex:none}
  .sg-guide-body{padding:12px 14px;gap:5px}
  .sg-guide-body h3{font-size:.95rem}
  .sg-guide-body p{display:none}
}

/* ---------- single product ---------- */
.sg-product-wrap{padding:26px 0 60px}
.woocommerce div.product{display:block}
.woocommerce div.product div.images{margin-bottom:24px}
.woocommerce div.product div.images img{border:1px solid var(--border);border-radius:var(--radius)}
/* v1.9.143 (owner pick A): D4 product-page cards (unique stat cards, Hellfire Torch) — rounded like the D2R tooltip cards */
.woocommerce div.product div.images.sg-product-gallery--d4card img{border-radius:22px}
.woocommerce div.product .product_title{font-size:clamp(1.5rem,5vw,2.2rem);text-transform:uppercase;margin-bottom:10px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--price) !important;font-size:1.9rem !important;font-weight:800;margin-bottom:14px;
}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);margin-bottom:18px}
.sg-realm-picker{margin:0 0 20px;border:1px solid var(--border-gold);border-radius:10px;padding:16px;background:rgba(249,115,22,.04)}
.sg-realm-picker label.sg-rp-title{display:block;font-family:var(--font-display);font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--heading-accent);margin-bottom:12px}
.sg-realm-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-realm-opts label{
  display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:8px;
  padding:11px 12px;font-size:.84rem;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s;
}
.sg-realm-opts label:hover{border-color:var(--gold-dim)}
.sg-realm-opts input{accent-color:var(--gold)}

/* v1.9.44: SELECT SERVER prompt — pulsing highlight + tooltip bubble. */
@keyframes sg-server-pulse{
  0%,100%{box-shadow:0 0 0 2px #f97316}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,.45)}
}
.sg-server-attn{animation:sg-server-pulse .9s ease-in-out 3;border-radius:12px}
.sg-server-tip{
  display:none;margin:10px auto 0;max-width:440px;text-align:center;
  background:#1d2327;color:#fff;border:1px solid #f97316;border-radius:8px;
  padding:9px 14px;font-size:13px;font-weight:600;position:relative;
}
.sg-server-tip.is-show{display:block}
.sg-server-tip::before{
  content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;
  background:#1d2327;border-left:1px solid #f97316;border-top:1px solid #f97316;
  transform:translateX(-50%) rotate(45deg);
}
/* v1.9.44: specificity bumped to beat .woocommerce button.button now that the
 * SELECT SERVER button also carries the standard .button class. */
.woocommerce button.button.sg-d2r-add.sg-needs-server{
  background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;border:none;
  font-weight:800;letter-spacing:.05em;cursor:pointer;box-shadow:var(--btn-shadow);
}
.woocommerce button.button.sg-d2r-add.sg-needs-server:hover{filter:brightness(1.06);transform:none}
/* v1.9.156: deep version in dark mode, where the label is white (it was 2.8:1 on the bright orange) */
[data-theme="dark"] .woocommerce button.button.sg-d2r-add.sg-needs-server{background:linear-gradient(135deg,#c2410c,#b91c1c)}
.sg-realm-opts label:has(input:checked){border-color:var(--gold);background:rgba(249,115,22,.1);color:var(--text)}
/* v1.9.23: Roll variation radios (replaced the variation dropdown).
 * v1.9.24: single column rows, real radio buttons, per-roll price. */
/* v1.9.26: product variations ("Options") stack: label above the radio list. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr{display:block}
.single-product table.variations th.label,
.single-product table.variations td.value{display:block;width:100%;padding:0;text-align:left}
.single-product table.variations th.label{margin:0 0 10px}
.single-product table.variations th.label label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)}
.single-product table.variations td.value{margin:0}
.single-product .reset_variations{display:inline-block;margin-top:10px;font-size:12px}
.sg-roll-radios{display:flex;flex-direction:column;gap:8px;margin:10px 0 6px}
.sg-roll-radio{
  display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;user-select:none;
  border:1px solid var(--border);border-radius:10px;background:var(--card);
  transition:border-color .15s,background .15s;
}
.sg-roll-radio:hover{border-color:var(--gold-dim)}
.sg-roll-radio:has(input:checked){border-color:var(--gold);background:rgba(249,115,22,.1)}
.sg-roll-radio input{accent-color:var(--gold);width:18px;height:18px;margin:0;flex:0 0 auto;cursor:pointer}
/* v1.9.158 (owner): product-page options follow the option rows (light mode; dark mode unchanged) */
:root:not([data-theme="dark"]) .sg-roll-radio{background:var(--opt-bg);border-color:var(--opt-border)}
:root:not([data-theme="dark"]) .sg-roll-radio:hover{border-color:var(--opt-hover)}
:root:not([data-theme="dark"]) .sg-roll-radio:has(input:checked){background:var(--opt-sel-bg);border-color:var(--opt-sel-border)}
.sg-roll-radio input:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.sg-roll-name{flex:1 1 auto;color:var(--text);font-size:.92rem;font-weight:600}
.sg-roll-radio input:checked ~ .sg-roll-name{color:var(--gold-light)}
.sg-roll-price{flex:0 0 auto;font-weight:700;color:var(--gold-light);font-size:.95rem;white-space:nowrap}
/* v1.9.156: light orange on the off-white page was 2.5:1 — the deeper orange in light mode (dark mode keeps the light orange) */
:root:not([data-theme="dark"]) .sg-roll-price{color:var(--gold)}
/* the selected row has an orange tint, so its name and price take the deepest orange (ChatGPT #275: 4.27:1) */
:root:not([data-theme="dark"]) .sg-roll-radio input:checked ~ .sg-roll-name,:root:not([data-theme="dark"]) .sg-roll-radio input:checked ~ .sg-roll-price{color:var(--gold-hover)}
/* v1.9.64: hide the variable price range under the product title and the
 * "Clear" variations link — the selected option's price already shows
 * below the options list. */
/* v1.9.112: variable products only — simple products always show their
 * price (or "Unavailable") under the title. */
.single-product div.product.product-type-variable .summary > p.price,
.single-product .reset_variations{ display:none !important; }
/* v1.9.62: out-of-stock options (revealed via the toggle) are grey and unclickable. */
.sg-roll-radio.sg-roll-oos{opacity:.55;cursor:not-allowed;background:var(--surface)}
.sg-roll-radio.sg-roll-oos:hover{border-color:var(--border)}
.sg-roll-radio.sg-roll-oos .sg-roll-name{color:var(--muted);font-weight:500}
.sg-roll-radio.sg-roll-oos .sg-roll-name::after{content:" — out of stock";font-size:.78em;color:var(--muted2)}
.sg-roll-radio.sg-roll-oos .sg-roll-price{color:var(--muted)}
.sg-roll-radio.sg-roll-oos input{cursor:not-allowed;accent-color:var(--muted)}
/* v1.9.69: tighter, smaller option rows on mobile.
 * v1.9.70: reduced further per Darren. */
@media(max-width:639px){
  .single-product table.variations th.label{margin:0 0 6px}
  .sg-roll-radios{gap:4px;margin:6px 0 2px}
  .sg-roll-radio{gap:6px;padding:6px 8px;border-radius:6px}
  .sg-roll-radio input{width:14px;height:14px}
  .sg-roll-name{font-size:.75rem}
  .sg-roll-price{font-size:.78rem}
}
.woocommerce div.product form.cart{margin-bottom:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.woocommerce .quantity .qty{
  background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);
  padding:12px;width:76px;font-size:1rem;text-align:center;
}
.woocommerce div.product .product_meta{color:var(--muted2);font-size:.82rem;border-top:1px solid var(--border);padding-top:16px;margin-top:8px}
.woocommerce div.product .product_meta a{color:var(--muted)}
.woocommerce div.product .woocommerce-tabs{margin-top:34px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;display:flex;gap:6px;overflow-x:auto}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border-bottom:1px solid var(--border)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:1px solid var(--border);background:var(--card);border-radius:8px 8px 0 0;margin:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted);font-weight:600;font-size:.85rem;padding:10px 18px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--card2);border-bottom-color:var(--card2)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--heading-accent)}
.woocommerce div.product .woocommerce-tabs .panel{background:var(--card2);border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:22px;color:var(--muted)}
/* v1.9.206 (owner 2026-11-11, "just fix the border"): the buy column's boxes share one left and right edge, and
 * quantity and Add to cart line up. Server box (and so its chosen row): full column width (like the Roll boxes); quantity
 * and Add to cart on their own row, the same height, 12px apart, the button filling the rest (WooCommerce's clearfix
 * pieces are switched off: in a flex row they add gaps). */
.woocommerce div.product .summary .sg-realm-picker{flex:1 0 100%;width:100%;max-width:none;box-sizing:border-box}
.woocommerce div.product .summary .woocommerce-variation-add-to-cart{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.woocommerce div.product .summary form.cart .quantity{flex:none;margin:0}
.woocommerce div.product .summary form.cart .quantity .qty{height:48px;box-sizing:border-box}
.woocommerce div.product .summary form.cart .single_add_to_cart_button{flex:1 1 0;min-width:0;min-height:48px;margin:0}
.woocommerce div.product .summary form.cart::before,.woocommerce div.product .summary form.cart::after,.woocommerce div.product .summary .woocommerce-variation-add-to-cart::before,.woocommerce div.product .summary .woocommerce-variation-add-to-cart::after{display:none}
.woocommerce div.product .summary .sg-realm-picker,.woocommerce div.product .summary .sg-realm-picker.sg-srv.is-chosen > .sg-srv-row{margin:0}
/* v1.9.206 (owner 2026-11-12, approved mockup "A"): the buying area is one bordered card beside the picture (the server
 * row inside it: light fill, no second shadow) with no Category line (the breadcrumb shows it); Description and Best
 * used for sit in one bordered card in their usual heading and text style, a thin line between them, without the
 * "Details" tab when it is the only tab (review 606-M1: a product with reviews keeps its tab row, Details | Reviews, so
 * both stay reachable; the row then sits on the card, no gap, no WooCommerce corner pieces); the same −/+ quantity
 * control on every product (grey frame, white number box, orange −/+; theme.js adds it, currency items already had it),
 * 156px wide and as tall as Add to cart. */
.woocommerce div.product .summary{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--card-shadow);box-sizing:border-box}
.woocommerce div.product .summary .product_title{margin-bottom:6px}
.woocommerce div.product .summary .sg-srv.is-chosen > .sg-srv-row{box-shadow:none;background:var(--card2)}
.woocommerce div.product .summary .product_meta{display:none}
.woocommerce div.product .summary form.cart{margin-bottom:0}
.woocommerce div.product .woocommerce-tabs ul.tabs:has(> li:only-child){display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs .panel{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--card-shadow);padding:24px;margin:0}
.woocommerce div.product .woocommerce-tabs .sg-details h2:nth-of-type(2){border-top:1px solid var(--border);padding-top:20px}
.woocommerce div.product .summary form.cart .sg-cur-qty-page{width:156px;height:48px;box-sizing:border-box;max-width:none;align-items:center}
.woocommerce div.product .summary form.cart .sg-cur-qty-page .qty{height:38px;width:auto;flex:1;min-width:0;margin:0;padding:0 4px;background:var(--input-bg);border:1px solid var(--border);border-radius:8px;font-weight:700}
.woocommerce div.product .summary form.cart .sg-cur-qty-page .sg-cur-step{flex:0 0 42px;align-self:stretch}
@media (max-width:760px){.woocommerce div.product .summary{padding:18px 16px}.woocommerce div.product .woocommerce-tabs .panel{padding:18px 16px}}
/* v1.9.182: Details tab ("Description" + "Best used for", owner 2026-11-03) */
.sg-details h2{margin:0 0 8px}
.sg-details p{margin:0 0 22px}
.sg-details > :last-child{margin-bottom:0}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:1.1rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em}
.related.products>h2,.upsells.products>h2{font-size:1.3rem;text-transform:uppercase;margin:40px 0 20px;text-align:center}
.related.products>h2::after,.upsells.products>h2::after{content:"❖ ❖ ❖";display:block;color:var(--gold-dim);letter-spacing:.6em;font-size:.8rem;margin-top:10px}

/* ---------- shop toolbar ---------- */
.sg-shop-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:6px 0 22px}
.woocommerce .woocommerce-ordering{margin:0}
.woocommerce .woocommerce-ordering select,.woocommerce .widget select{
  background:var(--input-bg);border:1px solid var(--border);color:var(--text);
  border-radius:6px;padding:10px 12px;font-size:.85rem;
}
.woocommerce .woocommerce-result-count{color:var(--muted2);font-size:.82rem;margin:0}
.woocommerce nav.woocommerce-pagination ul{border:1px solid var(--border);border-radius:8px;overflow:hidden}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--card);color:var(--muted);padding:12px 16px;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--card2);color:var(--gold-hover)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--gold);color:#ffffff;font-weight:700}
[data-theme="dark"] .woocommerce nav.woocommerce-pagination ul li span.current{color:#1a120a}

/* ---------- cart / checkout ---------- */
.woocommerce table.shop_table{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--card);
}
.woocommerce table.shop_table th{background:var(--card2);color:var(--heading-accent);font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 12px}
.woocommerce table.shop_table td{border-top:1px solid var(--border);padding:14px 12px;color:var(--text)}
.woocommerce table.shop_table td a{color:var(--text)}
.woocommerce table.shop_table td a:hover{color:var(--gold-hover)}
.woocommerce-cart .cart-collaterals .cart_totals{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:var(--card)}
.woocommerce-cart .cart-collaterals .cart_totals h2{font-size:1.1rem;text-transform:uppercase;margin-bottom:16px;color:var(--heading-accent)}
#add_payment_method table.cart img,.woocommerce-cart table.cart img,.woocommerce-checkout table.cart img{width:64px;border-radius:6px;border:1px solid var(--border)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{
  background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:12px;font-size:.92rem;
}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{
  border-color:var(--gold-dim);outline:none;box-shadow:0 0 0 2px rgba(249,115,22,.15);
}
.woocommerce form .form-row label{color:var(--muted);font-size:.84rem;margin-bottom:6px}
/* Review comment box has no .form-row wrapper; its cols attribute makes it
 * ~420px wide on phones. Keep it inside the viewport. */
.woocommerce #review_form #comment{max-width:100%;box-sizing:border-box}
.woocommerce-checkout #payment{background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--border)}
.woocommerce-checkout #payment div.payment_box{background:var(--card2);color:var(--muted)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--card2)}
.woocommerce #payment #place_order{width:100%;font-size:1rem;padding:16px}
.woocommerce-error,.woocommerce-info,.woocommerce-message{
  border:1px solid var(--border);border-top:3px solid var(--gold);background:var(--card);
  color:var(--text);border-radius:8px;
}
.woocommerce-error{border-top-color:var(--red)}
/* v1.9.207 (owner 2026-11-12, tried in a mockup: "stay red for 0.3 sec", "dark red"): an error notice opens dark red with
 * white text, holds 0.3 s, then fades over 1.4 s to the style above. Each new notice is a new element, so it flashes again.
 * The empty end frame means "the notice's own style", in light and dark mode. Links and the "!" turn white while red.
 * No flash for visitors who ask for less motion. */
@keyframes sg-error-flash{0%,17.6%{background:var(--red-dark);color:#fff;border-color:var(--red-dark)}}
@keyframes sg-error-flash-fg{0%,17.6%{color:#fff}}
.woocommerce-error{animation:sg-error-flash 1.7s ease-out}
.woocommerce-error::before,.woocommerce-error a{animation:sg-error-flash-fg 1.7s ease-out}
@media (prefers-reduced-motion:reduce){.woocommerce-error,.woocommerce-error::before,.woocommerce-error a{animation:none}}
.woocommerce-info{border-top-color:var(--gold)}
.woocommerce-message .button{margin-left:8px}
.woocommerce a.remove{color:var(--red) !important}
.woocommerce a.remove:hover{background:var(--red);color:#fff !important}

/* ---------- generic pages ---------- */
.sg-page{padding:34px 0 64px}
.sg-page h1{font-size:clamp(1.6rem,5vw,2.4rem);text-transform:uppercase;margin-bottom:20px;text-align:center}
.sg-page h1::after{content:"❖ ❖ ❖";display:block;color:var(--gold-dim);letter-spacing:.6em;font-size:.8rem;margin-top:12px}
.sg-page .entry-content{max-width:780px;margin:0 auto;color:var(--muted)}
.sg-page .entry-content h2,.sg-page .entry-content h3{color:var(--heading-accent);margin:1.6em 0 .6em;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem}
.sg-page .entry-content ul{list-style:disc;padding-left:22px;margin-bottom:1em}
/* v1.9.205 (owner 2026-11-11): WooCommerce's notices are lists; on a page (cart, checkout) the page-text list rule
 * just above (padding-left 22px, disc) cut their indent, so the "!" icon (left 1.5em) sat on the text. */
.sg-page .entry-content ul.woocommerce-error,.sg-page .entry-content ul.woocommerce-info,.sg-page .entry-content ul.woocommerce-message{padding-left:3.5em;list-style:none}
.sg-page .entry-content a{color:var(--gold)}

/* ---------- footer ---------- */
.sg-footer{border-top:1px solid var(--border);background:var(--footer-bg);margin-top:20px}
.sg-footer-grid{display:grid;gap:28px;padding:44px 0 30px}
.sg-footer h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.18em;color:var(--heading-accent);margin-bottom:14px}
.sg-footer p,.sg-footer li{font-size:.85rem;color:var(--muted2)}
.sg-footer ul li{margin-bottom:8px}
.sg-footer a{color:var(--muted2)}
.sg-footer a:hover{color:var(--gold-hover)}
.sg-footer-bottom{border-top:1px solid var(--border);padding:18px 0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.7rem;line-height:1.6;color:var(--muted2)} /* v1.9.190 (owner 2026-11-08): centred and stacked, smaller */
.sg-footer-bottom span{max-width:980px}

/* ---------- footer mini cart drawer ---------- */
.sg-drawer{position:fixed;top:0;right:-380px;width:min(380px,92vw);height:100dvh;z-index:200;background:var(--bg2);border-left:1px solid var(--border-gold);display:flex;flex-direction:column;transition:right .28s ease,box-shadow .28s ease;box-shadow:none}
/* v1.9.131: the shadow only while open — parked off-screen it reached 60px into the page (grey right edge on phones) */
.sg-drawer.open{right:0;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.sg-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--border)}
.sg-drawer-head h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em}
.sg-drawer-close{background:none;border:1px solid var(--border);color:var(--muted);border-radius:6px;font-size:1.1rem;padding:4px 12px;cursor:pointer}
.sg-drawer-body{flex:1;overflow-y:auto;padding:18px}
.sg-drawer-foot{padding:18px;border-top:1px solid var(--border)}
.sg-drawer-foot .sg-btn{width:100%;text-align:center;margin-bottom:10px}
.sg-drawer-item{display:flex;gap:12px;margin-bottom:16px;align-items:center}
.sg-drawer-item img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.sg-drawer-item .di-name{font-size:.84rem;font-weight:600}
.sg-drawer-item .di-meta{font-size:.74rem;color:var(--muted2)}
.sg-drawer-item .di-price{margin-left:auto;color:var(--price);font-weight:700;font-size:.88rem;white-space:nowrap}
.sg-drawer-empty{text-align:center;color:var(--muted2);padding:40px 0}
.sg-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:150;opacity:0;pointer-events:none;transition:opacity .28s}
.sg-overlay.show{opacity:1;pointer-events:auto}

/* Add-to-basket toast: small confirmation that auto-dismisses. */
.sg-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:400;
  display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px));
  background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;
  padding:12px 18px 12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.sg-toast.show{opacity:1;transform:translate(-50%,0)}
.sg-toast-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;font-weight:800;font-size:.9rem}
.sg-toast-msg{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.sg-toast-msg strong{font-size:.86rem;font-weight:800;letter-spacing:.02em}
.sg-toast-msg em{font-style:normal;font-size:.78rem;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
/* v1.9.204 (owner 2026-11-11): the one-game-one-server cart message: stays until the shopper picks, takes clicks,
 * wraps its text, an orange "!" (a warning, not the green "added" tick), View cart / Start a new cart buttons. */
.sg-toast.sg-toast-rule{pointer-events:auto;flex-wrap:wrap;align-items:flex-start;gap:12px;
  width:max-content;max-width:min(560px,calc(100vw - 32px));padding:14px 40px 14px 16px}
.sg-toast.sg-toast-rule .sg-toast-check{background:#e8611a}
.sg-toast.sg-toast-rule .sg-toast-msg{flex:1 1 0}
.sg-toast.sg-toast-rule .sg-toast-msg em{white-space:normal;overflow:visible;max-width:none}
.sg-toast-x{position:absolute;top:8px;right:10px;background:none;border:0;color:inherit;opacity:.6;font-size:18px;line-height:1;cursor:pointer;padding:4px}
.sg-toast-x:hover,.sg-toast-x:focus-visible{opacity:1}
.sg-toast-actions{flex:1 0 100%;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.sg-toast-actions a,.sg-toast-actions button{font:700 .78rem/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;
  border-radius:8px;padding:10px 14px;cursor:pointer;text-decoration:none}
.sg-toast-actions .sg-rule-ghost{background:transparent;color:inherit;border:1px solid var(--border)}
.sg-toast-actions .sg-rule-go{background:linear-gradient(180deg,#ff8a2b,#e8611a);color:#1c140f;border:0}
.sg-toast-actions button:disabled{opacity:.6;cursor:default}

/* ---------- theme toggle ---------- */
.sg-theme-toggle{
  background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;transition:border-color .15s,color .15s;
}
.sg-theme-toggle:hover{border-color:var(--border-gold);color:var(--gold)}
.sg-theme-toggle svg{width:18px;height:18px;display:block}
.sg-theme-toggle .icon-sun{display:none}
[data-theme="dark"] .sg-theme-toggle .icon-sun{display:block}
[data-theme="dark"] .sg-theme-toggle .icon-moon{display:none}

/* ---------- responsive ---------- */
@media (min-width:640px){
  .sg-cat-grid{grid-template-columns:repeat(3,1fr)}
  .sg-product-grid,.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
  .sg-steps{grid-template-columns:repeat(3,1fr)}
  .sg-step{flex-direction:column}
  .sg-footer-grid{grid-template-columns:2fr 1fr 1fr} /* v1.9.190: three columns (Our Promise removed) */
  .woocommerce div.product div.images{float:left;width:46%;margin-right:4%}
  .woocommerce div.product div.summary{float:right;width:50%}
  .woocommerce div.product::after{content:"";display:table;clear:both}
}
@media (min-width:1024px){
  .sg-product-grid,.woocommerce ul.products{grid-template-columns:repeat(4,1fr);gap:18px}
  .sg-section{padding:72px 0}
}
@media (max-width:860px){
  /* Wider mobile canvas: trim the page gutters so boxes and grids get more room.
     v1.9.160: side padding only — the old "padding:0 12px" also zeroed .sg-page's top/bottom
     space, so on phones the cart/checkout/FAQ/contact titles touched the header. */
  .sg-container{padding-left:12px;padding-right:12px}
  .sg-page{padding-top:24px}
  .sg-nav{
    display:none;position:absolute;top:66px;left:0;right:0;background:var(--header-bg);
    border-bottom:1px solid var(--border);padding:10px 18px 18px;
  }
  .sg-nav.open{display:block;background:var(--bg);box-shadow:0 24px 48px rgba(0,0,0,.18);
    border-radius:0 0 16px 16px;
    max-height:calc(100dvh - 72px);max-height:calc(100svh - 72px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .sg-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .sg-nav > ul > li > a{font-weight:700}
  .sg-nav ul ul{display:flex;position:static;box-shadow:none;border:none;background:none;
    padding:2px 0 6px;min-width:0;border-left:2px solid var(--border-gold);margin:2px 0 6px 10px}
  .sg-nav ul ul a{padding:10px 10px 10px 16px;font-size:.92em;color:var(--muted);border-bottom:0}
  .sg-nav ul ul a:hover,.sg-nav ul ul .current-menu-item a{color:var(--gold-hover)}
  .sg-nav a{display:block;padding:13px 10px;border-bottom:1px solid var(--border)}
  .sg-nav > ul > li:last-child > a{border-bottom:0}
  .sg-menu-toggle{display:block;padding:10px 14px;margin-left:0}
  /* v1.9.84: mobile header layout — hamburger left,
   * logo next, then theme/account/cart icons pushed right. */
  .sg-theme-toggle{margin-left:auto}
  .sg-cart-link .sg-cart-label{display:none}
  .sg-header-inner{gap:10px}
  .sg-header-inner > *{min-width:0}
  .sg-logo{gap:8px}
  .sg-logo-coin{width:30px;height:30px}
  .sg-header .sg-logo-word{font-size:1.2rem}
  .sg-cart-link{padding:9px 10px}
  .sg-hero{padding:64px 18px 56px}
}
/* v1.9.162 (review S162-3): narrow phones (320–400px) — the basket and its count never shrink; the
 * spacing, coin and wordmark get smaller instead so every header button stays on screen. */
@media (max-width:400px){
  .sg-header-inner{gap:6px}
  .sg-menu-toggle{padding:9px 11px}
  .sg-theme-toggle,.sg-account-link{width:36px;height:36px}
  .sg-cart-link{flex:0 0 auto;padding:8px 9px}
  .sg-logo{gap:6px}
  .sg-logo-coin{width:26px;height:26px}
  .sg-header .sg-logo-word{font-size:1.02rem;letter-spacing:.08em}
  .sg-menu-toggle{flex:0 0 auto}
  .sg-cart-link{gap:5px}
}
@media (max-width:359px){
  .sg-header-inner{gap:4px}
  .sg-menu-toggle{padding:8px 9px}
  .sg-theme-toggle,.sg-account-link{width:34px;height:34px}
  .sg-cart-link{padding:7px 7px;gap:4px}
  .sg-logo{gap:5px}
  .sg-logo-coin{width:24px;height:24px}
  .sg-header .sg-logo-word{font-size:.92rem;letter-spacing:.06em}
}
/* misc WP compat */
.wp-block-image img{border-radius:8px}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================================================
   v1.2.0 — marketplace redesign (original implementation)
   Airy layout, bento grids, hairline rules, two-tone
   headlines, restrained cards; marketplace density,
   HOT/NEW ribbon badges, promo tiles, game-shop trust cues.
   ============================================================ */

/* ---------- mix hero: Stripe left-aligned + MF promo tiles ---------- */
.sg-hero-mix{text-align:left;padding:72px 0 64px}
.sg-hero-mix .sg-container{display:grid;gap:36px;align-items:center}
@media(min-width:960px){.sg-hero-mix .sg-container{grid-template-columns:1.1fr .9fr}}
.sg-hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green);margin-bottom:18px;
}
.sg-hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.sg-hero-mix h1{font-size:clamp(2.3rem,6vw,3.6rem);line-height:1.02;letter-spacing:.015em;margin-bottom:18px;text-transform:uppercase}
.sg-hero-mix h1 .tone2{color:var(--muted);font-weight:500}
.sg-hero-mix h1 .gold{color:var(--gold)}
.sg-hero-mix .sg-hero-sub{font-size:1.05rem;max-width:520px;margin:0 0 28px}
.sg-hero-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.sg-hero-note{font-size:.8rem;color:var(--muted2);margin-top:14px}
.sg-promo-grid{display:grid;gap:14px}
.sg-promo{
  position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--border);
  padding:26px 24px;background:var(--card);box-shadow:var(--card-shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.sg-promo:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
.sg-promo .p-eyebrow{font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;margin-bottom:8px}
.sg-promo h3{font-size:1.25rem;margin-bottom:6px;letter-spacing:.02em}
.sg-promo p{font-size:.88rem;color:var(--muted);margin:0 0 14px}
.sg-promo .p-cta{font-size:.85rem;font-weight:800;color:var(--gold)}
.sg-promo .p-cta::after{content:" ›"}
.sg-promo-1{background:linear-gradient(135deg,#fff7ed,#ffedd5 55%,#fed7aa);border-color:#fdba74}
.sg-promo-1 .p-eyebrow{color:#c2410c}
[data-theme="dark"] .sg-promo-1{background:linear-gradient(135deg,#2c1608,#431407);border-color:#7c4a1e}
.sg-promo-2{background:linear-gradient(135deg,#ecfdf5,#d1fae5 60%,#a7f3d0);border-color:#9ad9b8}
.sg-promo-2 .p-eyebrow{color:#047857}
[data-theme="dark"] .sg-promo-2{background:linear-gradient(135deg,#0a1f16,#0f2f20);border-color:#1f4a33}
.sg-promo .p-badge{
  position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  padding:5px 10px;border-radius:20px;text-transform:uppercase;
}

/* ---------- Stripe-style stats band with hairline rules ---------- */
.sg-stats-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2)}
.sg-stats-band .sg-container{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.sg-stat-cell{padding:26px 18px;text-align:center;border-left:1px solid var(--border)}
.sg-stat-cell:first-child{border-left:none}
.sg-stat-cell .num{font-size:1.9rem;font-weight:800;color:var(--text);letter-spacing:-.02em}
.sg-stat-cell .num em{font-style:normal;color:var(--gold)}
.sg-stat-cell .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted2);margin-top:4px}
@media(min-width:760px){.sg-stats-band .sg-container{grid-template-columns:repeat(4,1fr)}}

/* ---------- Ribbon badges ---------- */
.sg-ribbons{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.sg-ribbon{
  font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border-radius:20px;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.sg-ribbon-hot{background:linear-gradient(180deg,#f97316,#ea580c)}
.sg-ribbon-new{background:linear-gradient(180deg,#22c55e,#15803d)}
.sg-ribbon-sale{background:linear-gradient(180deg,#ef4444,#b91c1c)}
.sg-ribbon-best{background:linear-gradient(180deg,#fb923c,#ea580c);color:#431407}

/* ---------- bento category cards ---------- */
.sg-cat-tile{text-align:left;padding:22px 20px;display:flex;gap:16px;align-items:center}
.sg-cat-tile .sg-cat-icon{width:48px;height:48px;margin:0;flex:0 0 48px}
.sg-cat-tile .ct-body{flex:1}
.sg-cat-tile h3{margin-bottom:2px}
.sg-cat-tile .count{display:block}
.sg-cat-tile .ct-tags{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sg-platetag{font-size:.64rem;font-weight:700;letter-spacing:.08em;border:1px solid var(--border);border-radius:4px;padding:2px 7px;color:var(--muted2);text-transform:uppercase}
.sg-cat-tile .ct-arrow{font-size:1.2rem;color:var(--gold);font-weight:700}

/* ---------- marketplace product card tweaks ---------- */
.sg-card .sg-card-media{position:relative}
.sg-card .sg-delivery-tag{font-size:.72rem;color:var(--green);font-weight:700}
.sg-card .sg-card-foot .sg-btn{border-radius:20px}

/* ---------- Stripe-style section headers (two-tone) ---------- */
.sg-section-title{text-transform:uppercase;letter-spacing:.03em}
.sg-section-title .tone2{color:var(--muted);font-weight:500}

/* ---------- game picker (multi-game store) ---------- */
.sg-game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.sg-game-card{position:relative;display:block;padding:26px 24px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--surface),var(--bg));text-decoration:none;overflow:hidden}
.sg-game-card::after{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.18),transparent 70%)}
.sg-game-card .g-eyebrow{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#16a34a;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.3);border-radius:20px;padding:3px 10px;margin-bottom:10px}
.sg-game-card h3{font-size:1.5rem;margin:0 0 6px;text-transform:uppercase;letter-spacing:.02em}
.sg-game-card .g-meta{display:block;color:var(--muted);font-size:.85rem;margin-bottom:14px}
.sg-game-card .g-cta{font-weight:800;color:var(--accent)}
.sg-game-card:hover{border-color:var(--accent)}
.sg-prose{max-width:820px;color:var(--muted);line-height:1.75}
.sg-prose p{margin:0 0 14px}
.sg-prose-center{margin:18px auto 0} /* v1.9.190: the home page text block sits centred under its centred heading */

/* ---------- v1.6: marketplace filtering, hub tabs, badges, FAQ ---------- */
.sg-banner{background:linear-gradient(90deg,#7c2d12,#c2410c);color:#fff;font-size:.85rem;font-weight:600}
.sg-banner .sg-container{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
.sg-banner-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px #4ade80;flex:none;animation:sg-pulse 2s infinite}
@keyframes sg-pulse{50%{opacity:.5}}
/* v1.9.49: removed dead .sg-filterbar rule — no markup generates it. */
.sg-filter-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sg-pills{display:flex;flex-wrap:wrap;gap:8px}
.sg-pill{display:inline-block;padding:7px 14px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text);background:var(--surface);text-decoration:none;transition:border-color .15s,background .15s}
.sg-pill:hover{border-color:var(--gold);text-decoration:none}
.sg-pill.active{background:var(--gold);border-color:var(--gold);color:#fff}
.sg-filter-clear{font-size:.82rem;color:var(--muted);margin-left:auto}
.sg-filter-clear:hover{color:var(--gold)}
/* v1.6.4: top-of-page server selector + AJAX add-to-basket */
/* ---------- server selector: 2-per-row click buttons ---------- */
/* v1.9.53: clear the WooCommerce-floated result count above — without this the
 * realmbar title wraps up onto the same line and overlaps it on mobile. */
.sg-realmbar{margin:0 0 6px;clear:both}
.sg-market-tools .sg-realmbar{flex:1 1 100%}
.sg-realmbar-title{font-weight:700;font-size:clamp(.85rem,3.8vw,1rem);margin:0 0 10px;color:var(--text)}
.sg-server-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sg-server-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  border:1px solid var(--opt-border);border-radius:12px;background:var(--srv-bg);
  color:var(--text);padding:11px 10px;min-height:56px;
  font-size:clamp(.8rem,3.6vw,.92rem);font-weight:600;line-height:1.35;
  transition:border-color .15s,box-shadow .15s,transform .08s;
}
.sg-server-btn:active{transform:scale(.98)}
.sg-server-btn.is-active{
  border:2px solid transparent;
  /* v1.9.53: same selected treatment as the D2R pills — warm tint wash inside
   * the orange-to-red gradient border, bold, no glow. */
  background:
    linear-gradient(rgba(249,115,22,.12),rgba(249,115,22,.12)) padding-box,
    linear-gradient(var(--srv-bg),var(--srv-bg)) padding-box,
    linear-gradient(135deg,#f97316,#ef4444) border-box;
  font-weight:700;
}
.sg-server-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* v1.9.29: tighter "choose your server" boxes on mobile. */
@media (max-width:640px){
  .sg-server-grid{gap:6px}
  .sg-server-btn{padding:8px 6px;min-height:48px;border-radius:10px}
  .sg-realmbar-title{margin:0 0 6px}
}
.sg-card-realm{width:100%}
.sg-card-buy .button.sg-loading,.sg-d2r-buy .button.sg-loading,.cart .button.sg-loading{opacity:.6;pointer-events:none;position:relative}
.sg-card-buy .button.sg-loading::after,.sg-d2r-buy .button.sg-loading::after{content:'';display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sg-spin .7s linear infinite;vertical-align:-2px}
@keyframes sg-spin{to{transform:rotate(360deg)}}
.sg-tabs{margin-top:6px}
.sg-tab-btns{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.sg-tab-btn{padding:10px 22px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit}
.sg-tab-btn:hover{border-color:var(--gold)}
.sg-tab-btn.active{background:var(--gold);border-color:var(--gold);color:#fff}
.sg-tab-panel{display:none}
.sg-tab-panel.active{display:block}
.sg-tab-empty{color:var(--muted);padding:20px 0}
.sg-badge-sale{background:#15803d !important}
.ct-desc{display:block;font-size:.8rem;color:var(--muted);line-height:1.45;margin-top:6px}
.sg-faq{max-width:820px;display:flex;flex-direction:column;gap:10px}
.sg-faq-item{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
.sg-faq-item summary{padding:16px 18px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sg-faq-item summary::-webkit-details-marker{display:none}
.sg-faq-item summary::after{content:'+';font-size:1.3rem;color:var(--gold);flex:none}
.sg-faq-item[open] summary::after{content:'–'}
.sg-faq-item p{padding:0 18px 18px;color:var(--muted);line-height:1.65;margin:0}
.sg-delivery-steps{margin:34px 0;padding:24px;background:var(--band-bg);border:1px solid var(--border);border-radius:14px}
.sg-delivery-steps h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;font-size:1.05rem}
.sg-delivery-steps ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;color:var(--muted);line-height:1.6}
.sg-delivery-steps strong{color:var(--text)}

/* ---------- v1.6.6: hero slider, game picker, top sellers, AJAX grid, socials ---------- */
.sg-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--heading-accent)}

/* Hero slider — dark band, readable in both themes. */
.sg-slider{position:relative;background:radial-gradient(900px 420px at 85% 10%,rgba(249,115,22,.16),transparent 65%),radial-gradient(700px 500px at 10% 110%,rgba(212,58,65,.10),transparent 60%),var(--bg);color:#fff;overflow:hidden}
[data-theme="dark"] .sg-slider{background:radial-gradient(1000px 480px at 50% -140px,rgba(176,30,36,.28),transparent 70%),radial-gradient(800px 420px at 85% 10%,rgba(249,115,22,.10),transparent 65%),var(--bg)}
.sg-slides{position:relative}
.sg-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;pointer-events:none}
.sg-slide.active{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.sg-slide-inner{display:grid;gap:24px;align-items:center;padding-top:54px;padding-bottom:64px;min-height:380px}
@media(min-width:900px){.sg-slide-inner{grid-template-columns:1.15fr .85fr;min-height:420px}}
.sg-slide-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#1a120a;background:linear-gradient(180deg,#fdba74,#fb923c);border-radius:20px;padding:4px 12px;margin-bottom:12px}
.sg-slide-eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fdba74;margin-bottom:10px}
.sg-slide-copy h2{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.8rem);line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:0 0 14px;color:#fff}
.sg-slide-copy h2 .gold{color:#fb923c}
.sg-slide-copy p{color:var(--muted);max-width:520px;margin:0 0 26px;font-size:1.02rem;line-height:1.6}
.sg-slide-art{display:none;justify-content:center}
@media(min-width:900px){.sg-slide-art{display:flex}}
.sg-slide-art img{max-height:400px;width:auto;height:auto} /* v1.9.193: the picture is a fan of item cards with its own shadows */
@media(max-width:899px){.sg-slide-art{display:flex;order:-1}.sg-slide-art img{max-height:240px}.sg-slide-inner{padding-top:16px}} /* v1.9.193: phones show the picture above the text */
.sg-btn-light{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.06)}
.sg-btn-light:hover{border-color:#fb923c;color:#fdba74;background:rgba(249,115,22,.12)}
/* v1.9.156: the outlined slide button read orange-on-dark (the .sg-btn-ghost colour won); it is white now, orange on hover. */
.sg-btn-ghost.sg-btn-light{color:#fff !important}
.sg-btn-ghost.sg-btn-light:hover{color:#fdba74 !important}
.sg-hero-note-light{color:var(--muted2)}
.sg-slider-prev,.sg-slider-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:4;transition:background .2s,border-color .2s} /* v1.9.194: arrows above the dots */
.sg-slider-prev{left:14px}.sg-slider-next{right:14px}
.sg-slider-prev:hover,.sg-slider-next:hover{background:#c2410c; /* v1.9.156: white arrow on .85 orange was 3.6:1 */border-color:#fb923c}
.sg-slider-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;justify-content:center;gap:8px;z-index:3} /* v1.9.194: only as wide as the dots, so it never covers the arrows */
.sg-slider-dots button{width:26px;height:4px;border-radius:2px;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:background .2s}
.sg-slider-dots button.active{background:#fb923c}
/* v1.9.156: on phones the arrows sat on the slide text; they now sit on the dots row at the bottom. */
@media(max-width:640px){.sg-slider-prev,.sg-slider-next{width:36px;height:36px;font-size:1.2rem;top:auto;bottom:4px;transform:none}.sg-slider-prev{left:12px}.sg-slider-next{right:12px}}

/* Game picker cards. */
/* v1.9.25: game picker is now name-forward banner cards (common marketplace pattern, own design). */
.sg-game-picks{display:grid;gap:14px;grid-template-columns:1fr}
/* v1.9.42: game picks sit right under the hero banner (no section heading),
 * so the section keeps only a tight top padding. */
.sg-section.sg-picks{padding-top:28px}
@media (min-width:1024px){
  .sg-section.sg-picks{padding-top:36px}
}
.sg-game-pick{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 28px;border:1px solid rgba(245,185,66,.28);border-radius:18px;text-decoration:none;overflow:hidden;background:radial-gradient(120% 160% at 8% 0%,rgba(245,185,66,.14) 0%,rgba(20,32,54,.0) 46%),linear-gradient(120deg,#101d33 0%,#0a1425 70%,#0c1830 100%);transition:transform .18s,border-color .18s,box-shadow .18s}
.sg-game-pick::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--gold-light),var(--gold));opacity:.9}
.sg-game-pick:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 1px rgba(245,185,66,.35)}
.sg-game-pick .gp-name{font-family:var(--font-display,inherit);font-size:clamp(1.9rem,7.5vw,3.2rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.05;color:#fff;text-wrap:balance}
.sg-game-pick .gp-go{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;line-height:1;color:#fff;background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:0 6px 18px rgba(249,115,22,.35);transition:transform .18s}
.sg-game-pick:hover .gp-go{transform:translateX(6px)}
@media(max-width:480px){.sg-game-pick{padding:24px 20px}.sg-game-pick .gp-go{width:44px;height:44px;font-size:1.6rem}}
/* Dark-mode already dark by design; keep identical. */

/* v1.9.68: top-sellers sections removed; rules deleted. */

/* AJAX listing refresh loading state. */
#sg-loop-wrap{transition:opacity .25s ease}
#sg-loop-wrap.sg-grid-loading{opacity:.45;pointer-events:none;position:relative;min-height:200px}
#sg-loop-wrap.sg-grid-loading::after{content:'';position:absolute;top:60px;left:50%;width:34px;height:34px;margin-left:-17px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:sg-spin .7s linear infinite}

/* Footer socials. */
.sg-social{display:flex;align-items:center;gap:10px;padding:24px 0;border-bottom:1px solid var(--border)}
.sg-social-label{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.sg-social-link{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);color:var(--muted);transition:border-color .18s,color .18s,transform .18s}
.sg-social-link:hover{border-color:var(--gold);color:var(--gold-hover);transform:translateY(-2px)}

/* Hub marketplace: search + server + category filters. */
.sg-market{margin-top:8px}
.sg-market-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sg-market-search{flex:1 1 260px;position:relative}
.sg-market-q{width:100%;padding:12px 16px 12px 42px;font-size:.95rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;outline:none;transition:border-color .18s,box-shadow .18s}
.sg-market-q:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.sg-market-search::before{content:'';position:absolute;left:15px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.7}
/* v1.9.49: removed dead .sg-market-tools .sg-filterbar override. */
.sg-market-body{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:901px){.sg-market-body{grid-template-columns:295px 1fr;align-items:start}}
.sg-market-side{margin:0 0 4px}
.sg-market-side-title{display:none}
/* v1.9.148 (owner): the category box itself is the shared category sidebar (assets/cats.css). */
.sg-market-count{font-size:.85rem;color:var(--muted);margin:0 0 12px}
.sg-market-more{text-align:center;margin-top:22px}
/* v1.9.114: load/refresh failure with Retry (hub marketplace). */
.sg-market-error{margin:18px 0 0;text-align:center;color:var(--muted)}
.sg-market-error .sg-btn{margin-left:8px}
/* Review fix: hub grid showing a previous selection after a failed filter change. */
.sg-product-grid.sg-grid-stale{opacity:.45;pointer-events:none}
.sg-no-results{grid-column:1/-1;text-align:center;color:var(--muted);padding:44px 16px;font-size:.95rem}
.sg-product-grid.sg-grid-loading{opacity:.45;pointer-events:none;position:relative;min-height:200px;transition:opacity .25s ease}
.sg-product-grid.sg-grid-loading::after{content:'';position:absolute;top:60px;left:50%;width:34px;height:34px;margin-left:-17px;border:3px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:sg-spin .7s linear infinite}

/* v1.9.68: top-sellers scroller removed; rules deleted. */

/* ============================================================
   v1.7.0 — header search with live suggestions (live-suggestion UX,
   original Sanctum Gold design). Desktop: in-header box.
   Mobile: full-width bar pinned under the header.
   ============================================================ */
.sg-search{position:relative;flex:1 1 auto;max-width:460px;min-width:0}
.sg-search-form{position:relative;display:flex;align-items:center}
.sg-search-input{
  width:100%;height:40px;padding:0 44px 0 16px;border-radius:10px;
  border:1px solid var(--border);background:var(--input-bg);color:var(--text);
  font-size:.88rem;font-family:var(--font-body);outline:none;transition:border-color .15s,box-shadow .15s;
}
.sg-search-input::placeholder{color:var(--muted2)}
.sg-search-input:focus{border-color:var(--gold-light);box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.sg-search-btn{
  position:absolute;right:4px;top:4px;bottom:4px;width:36px;border:none;border-radius:8px;
  background:var(--btn-bg);color:var(--btn-text);cursor:pointer; /* v1.9.156: same fill + label colour as the buttons */
  display:flex;align-items:center;justify-content:center;
}
.sg-search-btn svg{width:17px;height:17px}
.sg-search-btn:hover{filter:brightness(1.08)}
/* suggestion dropdown */
.sg-search-drop{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:220;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 22px 50px rgba(0,0,0,.22);overflow-y:auto;max-height:400px;
  padding:6px;text-align:left;
}
.sg-srow{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--text);text-decoration:none}
.sg-srow:hover,.sg-srow.sg-active{background:rgba(249,115,22,.09)}
.sg-srow-game .sg-srow-mono{
  width:44px;height:44px;flex:0 0 44px;border-radius:9px;background:linear-gradient(145deg,#302c29,#38332f);
  color:var(--gold-light);font-family:var(--font-display);font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;letter-spacing:.03em;
}
.sg-srow-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sg-srow-main strong{font-size:.92rem;line-height:1.25}
.sg-srow-main small{color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:.04em}
.sg-srow-div{
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);padding:12px 10px 4px;
}
.sg-srow-thumb{width:40px;height:40px;flex:0 0 40px;border-radius:8px;object-fit:cover;background:var(--bg2);border:1px solid var(--border)}
.sg-srow-thumb-blank{display:block}
.sg-srow-name{flex:1 1 auto;min-width:0;font-size:.88rem;line-height:1.3}
.sg-srow-name mark{background:#fdba74;color:#1a120a;border-radius:3px;padding:0 2px}
.sg-srow-arrow{color:var(--muted2);font-size:1.25rem;line-height:1;flex:0 0 auto}
.sg-srow-all{
  justify-content:center;margin-top:4px;border-top:1px solid var(--border);border-radius:0 0 9px 9px;
  color:var(--gold);font-weight:700;font-size:.85rem;padding:12px 10px 10px;
}
.sg-srow-empty{padding:26px 12px;text-align:center;color:var(--muted2);font-size:.88rem}
/* v1.9.154 (owner 2026-10-12): buy from the dropdown — a game's in-stock options as lines with
 * price and Add; servers first when none is chosen; "Which game?" outside a game. */
.sg-search-drop.sg-sbuy-open{padding:0;max-height:min(600px,65vh); /* v1.9.157 (owner): never more than 65% of the window */width:min(720px,calc(100vw - 32px));right:auto}
.sg-sbuy-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 14px;background:var(--surface2);border-bottom:1px solid var(--border);font-size:.82rem;color:var(--muted)}
.sg-sbuy-head strong,.sg-sbuy-gname{color:var(--text);font-weight:700}
[data-theme="dark"] .sg-sbuy-chip{color:var(--green)}
.sg-sbuy-chip{display:inline-flex;align-items:center;background:rgba(24,138,82,.08);border:1px solid var(--green);color:#126b3f;font-weight:700;border-radius:999px;padding:2px 10px}
.sg-sbuy-close{margin-left:auto;background:none;border:0;padding:2px 6px;font-size:1.1rem;line-height:1;color:var(--muted);cursor:pointer}
.sg-sbuy-close:hover{color:var(--text)}
.sg-sbuy-change,.sg-sbuy-back{background:none;border:0;padding:2px 4px;color:var(--gold-dim);font-weight:700;font-size:.82rem;cursor:pointer}
:root .sg-search-drop .sg-sbuy-change,:root .sg-search-drop .sg-sbuy-back{color:var(--gold-hover)}
[data-theme="dark"] .sg-search-drop .sg-sbuy-change,[data-theme="dark"] .sg-search-drop .sg-sbuy-back{color:var(--gold)}
.sg-sbuy-servers{padding:10px 14px;border-bottom:1px solid var(--border)}
.sg-sbuy-ask{font-weight:600;font-size:.85rem;color:var(--text);margin-bottom:8px}
.sg-sbuy-srvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.sg-sbuy-srv{border:1px solid var(--border);border-radius:8px;padding:9px;font-weight:700;font-size:.82rem;background:var(--card);color:var(--text);cursor:pointer}
.sg-sbuy-srv:hover,.sg-sbuy-srv.is-on{border-color:var(--accent);background:rgba(249,115,22,.08)}
/* v1.9.158: the dropdown's server buttons match the page's server buttons (light mode) */
:root:not([data-theme="dark"]) .sg-sbuy-srv{background:var(--srv-bg);border-color:var(--opt-border)}
:root:not([data-theme="dark"]) .sg-sbuy-srv:hover,:root:not([data-theme="dark"]) .sg-sbuy-srv.is-on{background:var(--opt-sel-bg);border-color:var(--opt-sel-border)}
.sg-sbuy-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border)}
.sg-sbuy-row.sg-active{background:rgba(249,115,22,.09)}
.sg-sbuy-row.is-wait{grid-template-columns:40px minmax(0,1fr);opacity:.6}
.sg-sbuy-thumb{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--surface2);display:block}
.sg-sbuy-name{font-size:.86rem;font-weight:600;color:var(--text);line-height:1.3}
.sg-sbuy-name .sg-sbuy-opt{font-weight:400;color:var(--muted)}
.sg-sbuy-add-p{display:none} /* the price inside Add: phones only (v1.9.155) */
.sg-sbuy-price{font-weight:800;color:var(--price);white-space:nowrap}
.woocommerce .sg-search .button.sg-sbuy-add,.sg-search .button.sg-sbuy-add,.sg-sbuy-add{padding:7px 12px;font-size:.72rem;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--btn-text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:6px;cursor:pointer;box-shadow:var(--btn-shadow)}
.sg-sbuy-add.is-added,.woocommerce .sg-search .button.sg-sbuy-add.is-added{background:var(--green) !important;border-color:var(--green) !important;color:#fff !important}
/* v1.9.156 (ChatGPT S156-4): dark mode keeps a deep green behind the white label (the light dark-mode green was 2.4:1) */
[data-theme="dark"] .sg-sbuy-add.is-added,[data-theme="dark"] .woocommerce .sg-search .button.sg-sbuy-add.is-added{background:#1f6f3e !important;border-color:#1f6f3e !important}
.sg-sbuy-add:disabled{opacity:.6;cursor:progress}
.sg-sbuy-add:focus-visible,.sg-sbuy-srv:focus-visible,.sg-sbuy-game:focus-visible,.sg-sbuy-change:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-sbuy-msg{grid-column:2/-1;font-size:.76rem;color:var(--red)}
.sg-sbuy-err{padding:14px 12px;color:var(--red)}
/* v1.9.156 (ChatGPT S156-5): the dark-mode red was 2.6:1 on the dark dropdown */
[data-theme="dark"] .sg-sbuy-msg,[data-theme="dark"] .sg-sbuy-err,
/* v1.9.158: red warning/error text in dark mode used --red #b01e24 (2.6–2.9:1); same lighter red as the dropdown errors */
[data-theme="dark"] .sg-sheet-srvlink.is-none,[data-theme="dark"] .woocommerce-cart table.cart td.actions .coupon .coupon-error-notice{color:#f0646a}
[data-theme="dark"] .woocommerce a.remove:not(:hover){color:#f0646a !important}
/* v1.9.158: on the near-neutral cards the light red was 4.37:1; the darker red reads 6+:1 */
:root:not([data-theme="dark"]) .sg-sbuy-msg,:root:not([data-theme="dark"]) .sg-sbuy-err{color:var(--red-dark)}
.sg-sbuy-retry{margin-left:8px;background:none;border:1px solid currentColor;border-radius:6px;color:inherit;font:inherit;font-size:.8rem;padding:3px 10px;cursor:pointer}
.sg-sbuy-retry:hover,.sg-sbuy-retry:focus-visible{background:var(--red);color:#fff}
.sg-sbuy-more{padding:12px;text-align:center;color:var(--muted2);font-size:.8rem}
.sg-sbuy-games{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 14px}
.sg-sbuy-game{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--card);color:var(--text);cursor:pointer}
.sg-sbuy-game strong{font-family:var(--font-display);font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.sg-sbuy-game span{font-size:.78rem;color:var(--muted2)}
.sg-sbuy-game:hover:not([disabled]),.sg-sbuy-game.sg-active{border-color:var(--accent);background:rgba(249,115,22,.06)}
.sg-sbuy-game[disabled]{opacity:.45;cursor:default}
@media (max-width:860px){
  /* phones: full width below the search box, as tall as its rows, at most 65% of the screen (left/width/max-height set by search.js) */
  .sg-search-drop.sg-sbuy-open{right:auto;max-height:65vh;border-radius:0;border-left:0;border-right:0;overscroll-behavior:contain}
  /* v1.9.155 (owner layout C): no picture; name with the option under it; one button "ADD · $4.95" */
  .sg-sbuy-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n a";gap:10px;padding:12px 14px}
  .sg-sbuy-row .sg-sbuy-thumb{display:none}
  .sg-sbuy-row .sg-sbuy-name{grid-area:n}
  .sg-sbuy-row .sg-sbuy-sep{display:none}
  .sg-sbuy-row .sg-sbuy-opt{display:block}
  .sg-sbuy-row .sg-sbuy-price{display:none}
  .sg-sbuy-row .sg-sbuy-add{grid-area:a;justify-self:end;min-width:96px;padding:9px 12px;font-size:.76rem}
  .sg-sbuy-row .sg-sbuy-add-p{display:inline}
  .sg-sbuy-row .sg-sbuy-msg{grid-column:1/-1}
  .sg-sbuy-row.is-wait{grid-template-areas:"n";grid-template-columns:minmax(0,1fr)}
  /* the header on one line: game · server · Change · ✕ */
  .sg-sbuy-head{flex-wrap:nowrap;white-space:nowrap}
  .sg-sbuy-head .sg-sbuy-gname{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}
  .sg-sbuy-games{grid-template-columns:1fr}
}
/* results page */
.sg-search-head{padding:26px 0 6px}
.sg-search-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.5rem,4vw,2.1rem);margin:0 0 6px}
.sg-search-count{color:var(--muted2);font-size:.9rem;margin:0 0 18px}
.sg-search-empty{padding:44px 0 70px;text-align:center;color:var(--muted)}
.sg-search-empty .button{margin-top:14px}
/* v1.9.153 (owner 2026-10-12): results page as rows — the category pages' row card (assets/d2r.css)
 * plus a game badge, the row's realm picker, game tabs, sort and the nickname note. Phones: no buy
 * controls in the list, "View options" opens the product page. */
.sg-search-count{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sg-search-count strong{color:var(--text)}
.sg-srch-alias{display:inline-flex;align-items:center;background:rgba(249,115,22,.08);border:1px solid var(--border-gold);
  color:var(--gold);border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600}
.sg-srch-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 18px}
.sg-srch-tabs{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.sg-srch-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:7px 14px;
  font-weight:600;font-size:.86rem;color:var(--muted);background:var(--card);text-decoration:none;white-space:nowrap}
.sg-srch-tab span{color:var(--muted2);font-weight:500}
.sg-srch-tab:hover{border-color:var(--border-gold);color:var(--text)}
.sg-srch-tab.is-on{background:var(--text);border-color:var(--text);color:var(--bg)}
.sg-srch-tab.is-on span{color:var(--bg);opacity:.75}
/* v1.9.156: in dark mode the inverted (cream) pill glared; use the orange tint instead */
[data-theme="dark"] .sg-srch-tab.is-on{background:rgba(249,115,22,.16);border-color:var(--gold);color:var(--gold-light)}
[data-theme="dark"] .sg-srch-tab.is-on span{color:var(--gold-light)}
.sg-srch-tab.is-empty{color:var(--muted2)} /* v1.9.156: was opacity .6 (3.1:1); a quieter colour reads at 4.5:1+ */
.sg-srch-tab.is-empty span{color:var(--muted2)}
/* v1.9.156 (ChatGPT S156-8): a selected tab with zero results keeps the selected (light-on-dark) label in light mode —
   the muted colour above came later and greyed it out on the dark pill. Dark mode's selected rule is already more specific. */
:root:not([data-theme="dark"]) .sg-srch-tab.is-on.is-empty{color:var(--bg)}
:root:not([data-theme="dark"]) .sg-srch-tab.is-on.is-empty span{color:var(--bg)}
.sg-srch-tab:focus-visible,.sg-srch-sort select:focus-visible,.sg-srch-realm select:focus-visible,.sg-srch-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sg-srch-sort{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
.sg-srch-sort select{padding:8px 12px;font-size:.86rem;color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:8px;cursor:pointer}
.sg-srch-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sg-srch-badge{display:inline-block;font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:.72rem;
  text-transform:uppercase;padding:3px 8px;border-radius:4px;color:#fff;background:#524c48;line-height:1.3}
.sg-srch-g-diablo-4{background:#8b1a1a}
.sg-srch-g-diablo-2-resurrected{background:#6b4a12}
.sg-srch-g-path-of-exile-2{background:#1f4b5c}
.sg-srch-realm{display:flex;flex-direction:column;gap:4px}
.sg-srch-realm select{width:100%;padding:9px 12px;font-size:.82rem;font-weight:600;color:var(--text);background:var(--surface2);
  border:1px solid var(--border);border-radius:10px;cursor:pointer}
.sg-srch-realm.is-set select{border-color:var(--green)}
.sg-srch-realm-note{font-size:.72rem;font-weight:600;color:var(--green)}
.sg-srch-list .sg-card-realm:has(+ .sg-srch-realm-note:not([hidden])){border-color:var(--green)}
.sg-srch-list .sg-card-buy .sg-srch-realm-note{margin-top:-4px}
.sg-srch-list .sg-var-option.sg-srch-capped{display:none}
.sg-srch-more{align-self:flex-start;font-size:.8rem;font-weight:600;color:var(--gold);text-decoration:none;padding:2px 2px}
.sg-srch-more:hover{text-decoration:underline}
.sg-srch-view,.sg-srch-mrealm{display:none !important}
.sg-srch-busy{opacity:.55;pointer-events:none}
.sg-srch-pickfirst{width:100%}
/* the grid card (Path of Exile 2 and other items without per-realm options) laid out as a row */
.sg-srch-list .sg-card{display:grid !important;grid-template-columns:148px minmax(0,1fr);gap:20px;padding:16px;align-items:start}
.sg-srch-list .sg-card:hover{transform:none}
.sg-srch-list .sg-card .sg-card-media img{border:1px solid var(--border);border-radius:8px}
.sg-srch-list .sg-card .sg-card-body{padding:0}
.sg-srch-list .sg-card .sg-card-variations{max-width:680px}
.sg-srch-list .sg-card .sg-card-buy{max-width:420px}
@media (min-width:901px){
  .sg-srch-list .sg-d2r-row{grid-template-columns:148px minmax(0,1fr) 236px}
  /* a grid card without options: price, realm and button in a right column like the other rows */
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)){display:grid;grid-template-columns:minmax(0,1fr) 236px;column-gap:20px;align-content:start}
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)) > :not(.sg-card-foot):not(.sg-card-buy):not(.button){grid-column:1}
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)) > .sg-card-foot{grid-column:2;grid-row:1;margin:0;padding:0 0 0 20px;border-left:1px solid var(--border)}
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)) > .sg-card-buy,
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)) > .button{grid-column:2;grid-row:2 / span 3;margin:0;padding:10px 0 0 20px;border-left:1px solid var(--border);align-self:stretch}
  .sg-srch-list .sg-card .sg-card-body:not(:has(.sg-card-variations)) .sg-price{font-size:1.7rem !important}
}
@media (max-width:900px){
  .sg-srch-tools{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .sg-srch-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .sg-srch-tabs::-webkit-scrollbar{display:none}
  .sg-srch-sort{justify-content:flex-end}
  /* phones: a compact row; the product page does the choosing */
  .sg-srch-list .sg-d2r-row{grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:"media meta" "media title" "media stock" "media price" "view view";gap:4px 12px}
  .sg-srch-list .sg-d2r-row-media{width:72px}
  .sg-srch-list .sg-srch-meta{grid-area:meta}
  .sg-srch-list .sg-d2r-row-main .sg-stock{display:inline-flex;grid-area:stock}
  .sg-srch-list .sg-d2r-row-pricewrap{display:flex;align-items:baseline;justify-content:space-between;text-align:left}
  .sg-srch-list .sg-card-variations,.sg-srch-list .sg-d2r-row-foot,.sg-srch-list .sg-srch-realm,
  .sg-srch-list .sg-card-buy,.sg-srch-list .sg-card > .sg-card-body > .button:not(.sg-srch-view){display:none !important}
  .sg-srch-list .sg-srch-view{display:block !important;grid-area:view;width:100%;text-align:center;margin-top:8px}
  .sg-srch-list .sg-srch-mrealm{display:inline !important;font-size:.76rem;font-weight:600;color:var(--green)}
  .sg-srch-list .sg-card{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
}
/* mobile search bar (under header) */
.sg-search-mobile{display:none;border-bottom:1px solid var(--border);background:var(--header-bg);padding:10px 0}
.sg-search-mobile .sg-search{max-width:none}
@media(max-width:860px){
  .sg-header-inner .sg-search{display:none}
  .sg-search-mobile{display:block}
  .sg-search-drop{max-height:320px}
}


/* v1.9.141/148: the D4/POE2 hub's desktop layout gives the shared category sidebar (cats.css) the
 * same 320px column as D2R, from the same width (901px) */
@media(min-width:901px){
  .sg-market-body{grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start}
}

/* v1.9.128: "How delivery works" (woocommerce_after_single_product_summary) goes below the
 * image and the options, full width. It did not clear the two floated columns, so its
 * background stretched behind both of them and stopped where its own text ended: products
 * with a long option list (e.g. Crown Shield, 11 rolls) spilled out under that "card". Its
 * .sg-container also added a second 18 px gutter inside the page's container. */
.woocommerce div.product > .sg-container{clear:both;padding:0}

/* --- v1.9.129 (owner): a chosen server collapses each server picker to one row -------------
 * "Server [name] Change" on the D2R category pages, the D4/POE2 game pages and D2R product
 * pages, desktop and mobile (markup: sg_server_row(); behaviour: theme.js). With no server
 * chosen the full picker shows as before. Change opens it in place (.is-open). */
.sg-srv-row{display:none}
.sg-srv.is-chosen > .sg-srv-row{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
  padding:10px 14px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);box-shadow:var(--card-shadow);margin:0 0 14px}
.sg-srv.is-chosen .sg-srv-title{display:none}
.sg-srv.is-chosen:not(.is-open) .sg-srv-full{display:none}
.sg-srv-lbl{flex:none;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;color:var(--text)}
.sg-srv-chip{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; /* one line: a long name shortens with … */
  background:#fff1e7;color:var(--gold);border:1px solid var(--border-gold);border-radius:999px;
  padding:5px 12px;font-weight:700;font-size:.9rem;line-height:1.2}
.sg-srv-chip::before{content:"";display:inline-block;vertical-align:middle;width:8px;height:8px;margin:-2px 6px 0 0;border-radius:50%;background:#16a34a}
[data-theme="dark"] .sg-srv-chip{background:rgba(249,115,22,.14)}
@media (max-width:420px){.sg-srv.is-chosen > .sg-srv-row{gap:8px;padding:9px 10px}.sg-srv-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* narrow phones: the full server name wins the space; "Server" stays for screen readers */.sg-srv-chip{padding:5px 10px;font-size:.85rem}.sg-srv-change{padding:6px 10px}}
.sg-srv-change{flex:none;white-space:nowrap;margin-left:auto;background:none;border:1px solid var(--border);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:.82rem;font-weight:700;color:var(--gold);cursor:pointer}
.sg-srv-change:hover{border-color:var(--gold-light);color:var(--gold-hover)}
.sg-srv-change:focus-visible,.sg-srv-note-change:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
/* product page: the row replaces the orange "Select your server" box */
.sg-realm-picker.sg-srv.is-chosen{padding:0;border:0;background:none;box-shadow:none}
.sg-realm-picker.sg-srv.is-chosen > .sg-srv-row{margin:0 0 10px}
.sg-srv-note-change{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--gold);text-decoration:underline;cursor:pointer}
/* D4/POE2: the per-card server dropdown repeats the chosen server — hidden (still submitted) */
.sg-market.sg-has-server .sg-card-realm.sg-realm-auto{display:none}

/* --- v1.9.130 (owner): homepage "Shop by Game" (inc-shop-by-game.php, theme.js) -------------
 * Tabs (All Games + one per game) with ‹ › arrows; cards = banner art + title + server buttons.
 * Desktop: 4 category cards per row, All Games one card per game. Phones: 2 per row, the tab row
 * scrolls sideways, an odd last card spans the row (its servers in two columns). */
.gn{padding:6px 0 10px}
.gn .sg-section-title{margin-bottom:4px}
.gn-tabs{display:flex;align-items:center;gap:8px;padding:8px;margin:18px 0 22px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.gn-arrow{flex:none;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer}
.gn-arrow:hover{color:var(--gold-hover);border-color:var(--border-gold)} /* v1.9.156: was 4.45:1 */
.gn-tablist{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.gn-tablist::-webkit-scrollbar{display:none}
.gn-tab{flex:none;padding:10px 18px;border:0;border-radius:10px;background:var(--bg2);color:var(--text);font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.03em;cursor:pointer;white-space:nowrap}
.gn-tab:hover{color:var(--gold-hover)} /* v1.9.156: was 4.45:1 on the tab fill */
.gn-tab.is-active{background:var(--btn-bg);color:var(--btn-text)} /* v1.9.156: same as the buttons (white on orange was 2.8:1) */
.gn-tab:focus-visible,.gn-arrow:focus-visible,.gn-chip:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.gn-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gn-panel[data-panel="all"]{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gn-panel[hidden]{display:none}
.gn-card{border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:var(--card-shadow);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.gn-img{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0b0d14;transition:transform .2s ease,box-shadow .2s ease}
.gn-img img{display:block;width:100%;height:100%;object-fit:cover}
.gn-card:hover .gn-img{transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,20,40,.25)}
.gn-title{margin:0;font-family:var(--font-display);font-size:1.35rem;letter-spacing:.02em;text-transform:none}
.gn-title a{color:var(--text)}
.gn-title a:hover{color:var(--gold)}
.gn-srv{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.gn-chip{display:flex;align-items:center;min-height:42px;padding:7px 10px;border-radius:9px;background:var(--bg2);border:1px solid transparent;color:var(--text);font-size:.82rem;font-weight:600;line-height:1.25}
.gn-chip:hover{border-color:var(--border-gold);color:var(--gold);background:#fff1e7}
[data-theme="dark"] .gn-chip:hover{background:rgba(249,115,22,.14)}
@media(max-width:1100px){
  .gn-panel,.gn-panel[data-panel="all"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gn-panel .gn-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:600px){
  .gn-tabs{padding:6px;gap:6px;margin:14px 0 16px}
  .gn-arrow{width:32px;height:32px;font-size:1.25rem}
  .gn-tab{padding:8px 12px;font-size:.95rem}
  .gn-panel{gap:12px}
  .gn-card{padding:10px;gap:9px;border-radius:12px}
  .gn-title{font-size:1.05rem}
  .gn-srv{grid-template-columns:1fr;gap:6px}
  .gn-chip{min-height:36px;padding:6px 8px;font-size:.74rem}
  .gn-panel .gn-card:last-child:nth-child(odd) .gn-srv{grid-template-columns:1fr 1fr}
  .gn-panel .gn-card:last-child:nth-child(odd) .gn-img{aspect-ratio:16/8}
}

/* --- v1.9.132: phone menu = Home, games (Shop by Game order) › servers, FAQ, Contact ----------
 * inc-mobile-nav.php renders .sg-mnav inside #sgNav; phones show it instead of the WordPress menu
 * (desktop keeps that menu and its dropdowns). The open menu sits above the category bar. */
.sg-nav ul.sg-mnav{display:none}
@media (max-width:860px){
  .sg-nav.open{z-index:20}
  .sg-nav > ul:not(.sg-mnav){display:none}
  .sg-nav ul.sg-mnav{display:flex}
  .sg-mnav-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    padding:13px 10px;border:0;border-bottom:1px solid var(--border);background:none;cursor:pointer;
    font:700 .82rem var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-align:left;
  }
  .sg-mnav-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);margin:0 6px 4px 0;transition:transform .2s}
  .sg-mnav-toggle[aria-expanded="true"] .sg-mnav-chev{transform:rotate(-135deg);margin-bottom:-4px}
  .sg-nav ul.sg-mnav-srv{display:flex;margin:2px 0 8px 10px;padding:2px 0 4px;border-left:2px solid var(--border-gold)}
  .sg-nav ul.sg-mnav-srv[hidden]{display:none}
  .sg-nav .sg-mnav-srv a{
    display:flex;align-items:center;gap:10px;padding:11px 10px 11px 16px;border:0;border-radius:8px;
    font:500 .93rem var(--font-body);letter-spacing:0;text-transform:none;color:var(--text);
  }
  .sg-nav .sg-mnav-srv a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted2)}
  .sg-nav .sg-mnav-srv a.is-current{background:rgba(249,115,22,.1);color:var(--gold);font-weight:700}
  .sg-nav .sg-mnav-srv a.is-current::before{background:var(--green);border-color:var(--green)}
}

/* v1.9.136 (owner pick "B"): D4 items with options use the D2R row card (d2r.css); the only
 * addition is the class chips above the option list (theme.js sgChipShow). In the D4/POE2 grid a
 * row card takes the full row. */
.sg-opt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px}
.sg-opt-chip{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:6px 12px;font:600 .82rem var(--font-body);line-height:1.2;cursor:pointer}
.sg-opt-chip:hover{border-color:var(--gold-light)}
.sg-opt-chip.is-on{background:var(--text);border-color:var(--text);color:var(--card)}
.sg-opt-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
[data-sg-chips] [data-sg-class][hidden]{display:none!important}
[data-sg-grid] > .sg-d2r-row{grid-column:1/-1}

/* v1.9.145 (owner 2026-10-07, mockup A): phone thumbnail popup — the tooltip card (or image), name, price,
 * "View details". Phones only (theme.js opens it at max-width 860px). */
.sg-pop{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.sg-pop[hidden]{display:none}
.sg-pop-dim{position:absolute;inset:0;background:rgba(10,14,25,.62)}
.sg-pop-box{position:relative;width:100%;max-width:420px;background:var(--card);color:var(--text);border-radius:18px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sg-pop-img{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:calc(100vh - 210px);object-fit:contain;border-radius:14px;background:var(--surface2)}
.sg-pop.is-loading .sg-pop-img{opacity:.35}
.sg-pop-x{position:absolute;top:-12px;right:-6px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font:600 22px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:1}
.sg-pop-name{font:600 22px/1.1 var(--font-display);text-transform:uppercase;margin:12px 2px 2px}
.sg-pop-price{font:600 15px var(--font-body);color:var(--muted);margin:0 2px 12px}
.sg-pop-btn{display:block;text-align:center;background:var(--btn-bg);color:var(--btn-text);border-radius:10px;padding:13px;font:700 15px var(--font-body);letter-spacing:.5px;text-transform:uppercase;text-decoration:none}
.sg-pop-btn:hover,.sg-pop-btn:focus{color:var(--btn-text)} /* v1.9.156: was #fff (ChatGPT S156-1) */
html.sg-pop-open{overflow:hidden}

/* v1.9.156: WooCommerce block checkout fields, selects and notices use the theme colours
   (the plugin draws them white, which glared in dark mode). */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select .wc-blocks-components-select__container,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input{background:var(--input-bg) !important;color:var(--text) !important;border-color:var(--border) !important}
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label{color:var(--muted) !important}
.wc-block-components-notice-banner{background:var(--card) !important;color:var(--text) !important;border-color:var(--border) !important}
.wc-block-components-notice-banner.is-error{border-color:var(--red) !important}
/* v1.9.156 (ChatGPT S156-3): WooCommerce draws the notice close button #2f2f2f !important at 60% opacity
   (".wc-block-components-notice-banner>.wc-block-components-button"), which vanished on dark notices.
   This selector is one class more specific, so it wins whichever stylesheet loads last. */
.wc-block-components-notice-banner>.wc-block-components-button.wc-block-components-notice-banner__dismiss{color:var(--text) !important;opacity:.85}
.wc-block-components-notice-banner>.wc-block-components-button.wc-block-components-notice-banner__dismiss:hover,
.wc-block-components-notice-banner>.wc-block-components-button.wc-block-components-notice-banner__dismiss:focus{opacity:1}
.wc-block-components-notice-banner>.wc-block-components-button.wc-block-components-notice-banner__dismiss svg{fill:currentColor !important}
[data-theme="dark"] .woocommerce form .form-row .required,[data-theme="dark"] .required{color:#f0646a}
/* v1.9.156: the search results page renders the D2R quantity box without d2r.css — keep it on the card colour, not browser white */
.sg-d2r-qty-input{background:transparent;color:var(--text)}
/* v1.9.156: the block checkout "Place order" button was the plugin's plain grey; it uses the shop's main button now */
.wc-block-components-checkout-place-order-button,.wc-block-cart__submit-button{
  font-family:var(--font-display) !important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--btn-text) !important;background:var(--btn-bg) !important;border:1px solid var(--btn-border) !important;
  border-radius:6px !important;box-shadow:var(--btn-shadow)}
/* v1.9.156: the "out of stock on this server" note had an inline dark red (#b3261e) that was hard to read in dark mode */
.sg-mode-oos-note{color:#b3261e}
[data-theme="dark"] .sg-mode-oos-note{color:#f0646a}
/* v1.9.156 (hover/focus scan): WooCommerce's default pagination :focus (lilac #816f98 on #e9e6ed, 3.65:1) and product-tab
   :hover (#6b6b6b, 3.37:1 in dark mode) leaked through; "html" makes these one element more specific than WooCommerce's. */
html .woocommerce nav.woocommerce-pagination ul li a:focus,html .woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--card2);color:var(--gold-hover)}
html .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,html .woocommerce div.product .woocommerce-tabs ul.tabs li a:focus{color:var(--gold-hover)}

/* v1.9.160 (owner 2026-10-15): account card under the person icon (inc-account.php, assets/account.js). */
.sg-acct{position:fixed;inset:0;z-index:1000;pointer-events:none}
.sg-acct[hidden]{display:none}
.sg-acct-scrim{position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(20,16,14,.42);pointer-events:auto}
.sg-acct-card{position:fixed;z-index:0;width:320px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;pointer-events:auto;
  background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28);padding:16px}
/* The pointer is its own element: the card scrolls (overflow:auto), which would clip a ::before. */
.sg-acct-caret{position:fixed;z-index:1;width:12px;height:12px;background:var(--card);pointer-events:none;
  border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.sg-acct-h{font:700 13px var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.sg-acct-email{font-size:13px;color:var(--muted);margin:-6px 0 8px;overflow-wrap:anywhere}
.sg-acct-form input[type=email],.sg-acct-form input[type=password]{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;padding:11px 12px;
  font:16px var(--font-body);color:var(--text);background:var(--input-bg);border:1px solid var(--border);border-radius:8px}
.sg-acct-form input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.sg-acct-form input[aria-invalid=true]{border-color:var(--red)}
.sg-acct-err{margin:-2px 0 8px;font-size:13px;line-height:1.35;color:var(--red-dark,#b3261e)}
[data-theme="dark"] .sg-acct-err{color:#f0646a}
.sg-acct-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px;font-size:13px;color:var(--muted)}
.sg-acct-line a{color:var(--gold)}
.sg-acct-remember{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.sg-acct-note{margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.sg-acct-btn{display:block;width:100%;padding:12px;cursor:pointer;font:700 15px var(--font-display);letter-spacing:.08em;text-transform:uppercase;
  color:var(--btn-text);background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:8px;box-shadow:var(--btn-shadow)}
.sg-acct-btn:disabled{opacity:.7;cursor:progress}
.sg-acct-switch{margin:12px 0 2px;text-align:center;font-size:13.5px}
.sg-acct-switch button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--gold);cursor:pointer}
.sg-acct-guest{margin:8px 0 6px;text-align:center;font-size:12.5px;color:var(--muted)}
.sg-acct-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--border);color:var(--text);text-decoration:none;font-size:15px}
.sg-acct-row:hover,.sg-acct-row:focus-visible{color:var(--gold-hover)}
.sg-acct-row svg{color:var(--gold);flex:0 0 auto}
.sg-acct-row .sg-acct-chev{margin-left:auto;color:var(--muted)}
.sg-acct-links:empty{display:none}
/* v1.9.180: hub intro text (from wp-admin) under the H1 */
.sg-hub-intro p{margin:0 0 8px;max-width:72ch}

/* v1.9.189 (owner 2026-11-08): "Why Buy From ItemGG" — four cards (sg_trust_badges): one column on phones, two from
   640px, four from 1000px (icon on top there). Theme tokens only, so dark mode follows. */
.sg-why-head{text-align:center;max-width:720px;margin:0 auto 32px}
.sg-why-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0 0 10px}
.sg-why-head h2 .accent{color:var(--gold-light)}
.sg-why-head p{color:var(--muted);margin:0;font-size:1rem;line-height:1.6}
.sg-why-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.sg-why-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(min-width:1000px){.sg-why-grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.sg-why-card{position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 22px 22px 20px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.sg-why-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,#fb923c,#ea580c);opacity:.9}
@media(hover:hover){.sg-why-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover);border-color:var(--border-gold)}}
.sg-why-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#fb923c,#ea580c 60%,#9a3a1c);box-shadow:0 6px 16px rgba(234,88,12,.28),inset 0 1px 0 rgba(255,255,255,.25)}
.sg-why-ic svg{width:26px;height:26px}
.sg-why-card h3{font-size:1.25rem;margin:2px 0 6px;letter-spacing:.04em}
.sg-why-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media(min-width:1000px){.sg-why-card{flex-direction:column;gap:14px;padding:26px}.sg-why-ic{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.sg-why-card{transition:none}.sg-why-card:hover{transform:none}}

/* v1.9.190 (owner 2026-11-08, "spacing is off" / "white bar"):
   - the text under a product list keeps clear of it (was an inline padding-top:0 that glued it to the last card);
   - headings inside these text blocks get room above (they sat on the previous paragraph);
   - the Why cards right after a light text section do not stack a second full padding on top;
   - a page that ends on a dark band (the questions) runs straight into the dark footer, with no light strip. */
.sg-after-list{padding-top:40px}
.sg-prose h2{margin:30px 0 10px}
.sg-prose h2:first-child{margin-top:0}
.sg-section:not(.sg-band-dark) + .sg-why:not(.sg-band-dark){padding-top:0}
#sg-main:has(> .sg-band-dark:last-child, > :last-child > .sg-band-dark:last-child, > :last-child > :last-child > .sg-band-dark:last-child) ~ .sg-footer{margin-top:0}

/* v1.9.215: the "Featured" heading (star icon first) at the top of the D2R / Diablo 4 hub's product area */
.sg-featured-head{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:1.4rem;color:var(--text)}
.sg-featured-head .sg-cat-icon{width:1.1em;height:1.1em;flex:none;margin:0;color:var(--heading-accent)}
/* desktop: on the same line as the sidebar's "Categories" title (the sidebar's 16px padding + 1px border; its title size) */
@media (min-width:901px){.sg-featured-head{font-size:1.25rem;letter-spacing:.06em;line-height:1.12;margin:17px 0 14px}}