/* Generated from the approved WCell professional redesign. */
/* WCELL REDESIGN 2 -- light / black / red theme, ported from the
   Codex-built "WCell Professional" preview. Loaded after style.css so
   these rules win the cascade; every selector here targets existing
   markup/ids so app.js's DOM queries keep working unchanged. */

:root{
  --rd-ink:#080808;
  --rd-muted-ink:#606060;
  --rd-paper:#f7f7f7;
  --rd-white:#fff;
  --rd-line:#dedede;
  --rd-brand:#e51b2b;
  --rd-brand-dark:#b60d1a;

  /* Remap only the AMBIENT page-level tokens (default text, borders,
     accent) to the new light theme. --bg2/--panel/--panel2/--panel3/
     --header are deliberately left at style.css's original dark
     values: those are used throughout dialogs/modals/cart/game-topup
     UI paired with HARDCODED (not var()) white text -- flipping them
     to light here made that text invisible on its now-light
     background. Every page-level surface that DOES need to go light
     (body, header, hero, footer, product cards, account.html) has an
     explicit override below instead of relying on these variables. */
  --line:var(--rd-line);
  --line2:#cfcfcf;
  --text:var(--rd-ink);
  --muted:var(--rd-muted-ink);
  --red:var(--rd-brand);
  --red2:#ff2639;
  --redsoft:rgba(229,27,43,.13);
}

html{background:var(--rd-paper)}
html,body{overflow-x:hidden}
body{background:var(--rd-paper);color:var(--rd-ink);font-family:"Arial Nova","Avenir Next",Arial,sans-serif}

/* ===== announcement + header ===== */
.utility-bar{height:34px;background:var(--rd-ink);border-bottom:3px solid var(--rd-brand);color:#fff}
.utility-inner span:not(:last-child){border-right-color:#ffffff26}
.utility-inner span:first-child{color:#ff4351}
.utility-inner b{color:#fff}

.site-header{background:#fffffff5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #0808081f;box-shadow:none}
.header-main{grid-template-columns:auto 1fr auto}
.logo i{background:var(--rd-brand);box-shadow:5px 5px 0 var(--rd-ink);border-radius:5px 11px;transform:skew(-8deg) rotate(-3deg);font-style:italic;font-weight:950}
.logo strong{color:var(--rd-ink)}
.logo strong span{color:var(--rd-brand)}
.search{border:1px solid var(--rd-line);background:#fff;border-radius:14px}
.search input{color:var(--rd-ink)}
.search input::placeholder{color:#9a9a9a}
.search-submit{background:var(--rd-brand)!important}
.account-nav .login{border:1px solid var(--rd-line);color:var(--rd-ink);background:#fff}
.account-nav .login:hover{border-color:var(--rd-brand);color:var(--rd-brand)}
.account-nav .wallet{background:var(--rd-ink);color:#fff;transition:background .15s,border-color .15s}
.account-nav .wallet:hover{background:var(--rd-brand)}
.account-nav .wallet b{color:#fff}
.store-nav{background:var(--rd-ink);border-top:1px solid #ffffff14}
.store-nav a{color:#d8d8d8}
.store-nav a:hover,.store-nav a.active{color:#fff}
.store-nav a:after{content:"";display:block;height:2px;background:var(--rd-brand);transform:scaleX(0);transition:transform .2s}
.store-nav a:hover:after,.store-nav a.active:after{transform:scaleX(1)}

/* Nav links (logo, 4 links, account) stay a single row -- the fuller
   category nav remains in the hidden .store-nav so its links stay in
   the DOM (kept for SEO/crawlability) without occupying a second
   visible row. Not touched by the V35 header pass. */
.simple-nav{grid-column:2;justify-self:center;align-items:center;gap:30px;font-size:14px;font-weight:650;display:flex}
.simple-nav a{position:relative;color:var(--rd-ink)}
.simple-nav a:after{content:"";display:block;height:3px;background:var(--rd-brand);position:absolute;bottom:-8px;left:0;right:100%;transition:right .2s}
.simple-nav a:hover:after{right:0}
@media (width<=900px){.simple-nav{display:none}}

/* V35: search moved out of the hero into a persistent row under the
   main header bar, so it's reachable from every page, not just home --
   previously it only lived in .hero-search-wrap, which only rendered on
   the homepage. Same #search/#clearSearch/#searchSuggest markup and JS
   wiring as before, just relocated and restyled for the header's light
   background instead of the hero's dark one. */
.header-search-row{border-top:1px solid #0808081f;padding:12px 0}
.header-search-row .search-wrap{width:min(640px,calc(100% - 48px));margin:0 auto}
.header-search-wrap .search{border-radius:12px;height:48px;box-shadow:0 6px 18px #00000012}
.header-search-wrap .search input{color:var(--rd-ink)}

/* Now redundant: the header search row above is reachable from every
   page, including catalogue/category views, so the compact search this
   session added to .catalogue-tools (for exactly that gap, before this
   existed) would otherwise show two search boxes on the same page. */
.catalogue-search{display:none!important}

/* ===== hero ===== */
.hero{color:#fff;isolation:isolate;background:radial-gradient(circle at 85% 20%,#e51b2b47,#0000 28%),var(--rd-ink);border-radius:0}
/* White wave accent -- z-index:-1 so it paints above the hero's own
   background but below hero-copy/hero-visual (position:absolute paints
   above non-positioned in-flow content by default regardless of
   z-index:auto, so this needs to be explicitly negative to sit behind
   the grid content instead of covering it). Fixed height, not a %:
   body.view-home .hero uses height:auto (content-driven, just a
   min-height), and percentage heights don't resolve against an
   auto-height containing block. .hero's overflow:hidden clips it to
   the rounded corners automatically regardless of hero's final height. */
.hero .eyebrow{color:#ff7b86;background:#e51b2b1a;border:1px solid #e51b2b94;border-radius:999px;padding:8px 12px;align-items:center;gap:9px;display:inline-flex;width:max-content}
.hero .live-dot{background:var(--rd-brand);border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 4px #e51b2b29}
.hero h1{color:#fff;letter-spacing:-.03em}
.hero h1 em{color:var(--rd-brand);font-style:normal;text-shadow:0 0 35px #e51b2b3d}
.hero-copy>p{color:silver}
.hero-actions #exploreBtn{background:var(--rd-brand);color:#fff;border:0;border-radius:10px;height:50px;padding-inline:22px;box-shadow:0 12px 32px #e51b2b47;font-weight:700}
.hero-actions #exploreBtn:hover{background:#ff2639}
.hero-actions a{color:#fff;border-bottom:1px solid #ffffff59}
.hero .trust span{color:#c7c7c7}
.hero .trust .icon{color:var(--rd-brand)}

.hero-visual{isolation:isolate;background:radial-gradient(circle at 22% 20%,#ffffff29,#0000 27%),linear-gradient(145deg,#232323 0%,#0b0b0b 54%,#39040a 100%);border:1px solid #ffffff21;border-radius:36px;box-shadow:0 30px 90px #00000080}
.hero-line{border-color:#e51b2b80}
.hero-live,.hero-market{color:#050505;background:#fff;border-radius:999px;box-shadow:0 0 28px #fff3}
.hero-game-card{background:#fffffff5;border:1px solid #ffffffc7;box-shadow:0 22px 55px #0000005c}
.hero-platform{background:#fffffff5;border:1px solid #ffffffc7;box-shadow:0 22px 55px #0000005c}
.hero-icon{background:#fff;color:var(--rd-ink)}

/* ===== trust strip (reuses the .benefits row) ===== */
.benefits{background:#fff;border-bottom:1px solid var(--rd-line);border-top:none}
.benefits article i{color:var(--rd-brand);background:none}
.benefits article b{color:var(--rd-ink)}
.benefits article span{color:var(--rd-muted-ink)}

/* ===== categories (new section, populated by JS below) ===== */
.wcell-categories{background:var(--rd-paper);padding:70px clamp(20px,7vw,108px);position:relative;overflow:hidden}
.wcell-categories:after{content:"";z-index:0;pointer-events:none;border:42px solid #e51b2b2e;border-radius:50%;width:115%;height:220px;position:absolute;bottom:-175px;left:-8%;transform:rotate(3deg)}
.wcell-categories-heading{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:80px;position:relative;z-index:1}
.wcell-categories-heading .section-kicker{color:#cc1626;letter-spacing:.17em;text-transform:uppercase;font-size:12px;font-weight:850;margin:0 0 18px}
.wcell-categories-heading h2{letter-spacing:-.03em;margin:0;font-size:clamp(34px,4vw,52px);line-height:1.05;color:var(--rd-ink)}
.wcell-categories-heading>p{max-width:460px;color:var(--rd-muted-ink);margin:0;font-size:16px;line-height:1.7}
.category-grid{grid-template-columns:repeat(4,1fr);gap:15px;margin-top:50px;display:grid;position:relative;z-index:1}
.category-card{text-align:left;cursor:pointer;border:1px solid #0808081f;border-radius:18px;flex-direction:column;align-items:flex-start;min-height:200px;padding:24px;transition:transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden;font:inherit}
.category-card:hover{transform:translateY(-5px);box-shadow:0 20px 38px #10181d1c}
.category-card:after{content:"";opacity:.12;border:1px solid;border-radius:50%;width:150px;height:150px;position:absolute;bottom:-55px;right:-55px}
.category-card .category-icon{background:#ffffffb8;border-radius:13px;width:47px;height:47px;display:grid;place-items:center}
.category-card .category-icon .icon{width:22px;height:22px}
.category-card .category-copy{display:flex;flex-direction:column;margin-top:23px}
.category-card strong{letter-spacing:-.01em;font-size:18px}
.category-card small{opacity:.7;margin-top:7px}
.category-card .category-arrow{width:19px;margin-top:auto;transition:transform .2s}
.category-card:hover .category-arrow{transform:translate(5px)}
.category-1{border-top:5px solid var(--rd-brand);color:var(--rd-ink);background:#fff}
.category-2{background:var(--rd-ink);border-color:var(--rd-ink);color:#fff}
.category-2 .category-icon{background:#ffffff26}
.category-3{background:var(--rd-brand);border-color:var(--rd-brand);color:#fff}
.category-3 .category-icon{background:#ffffff3d}
.category-4{border-bottom:5px solid var(--rd-brand);background:#fff;color:var(--rd-ink)}
@media (width<=900px){.category-grid{grid-template-columns:1fr 1fr}}
@media (width<=560px){.category-grid{grid-template-columns:1fr}.wcell-categories-heading{grid-template-columns:1fr;gap:20px}}

/* ===== footer ===== */
footer{background:var(--rd-ink);color:#d8d8d8}
footer .logo i{background:var(--rd-brand);box-shadow:5px 5px #3b3b3f;border-radius:5px 11px;transform:skew(-8deg) rotate(-3deg)}
footer .logo strong{color:#fff}
/* --rd-brand is a hair under 4.5:1 on this dark footer background; use a
   lighter red scoped to just this spot instead of touching the shared
   brand variable, which is also used as a background color elsewhere. */
footer .logo strong span{color:#ff7b87}
footer a{color:#c7c9cc}
footer a:hover{color:#fff}

/* =========================================================
   GLOBAL surfaces -- applied site-wide so account/checkout/
   static pages inherit the light theme without a full rebuild.
========================================================= */
.utility-bar,.store-nav{background:var(--rd-ink)}
.search-suggest{background:#fff;border-color:var(--rd-line);color:var(--rd-ink);box-shadow:0 18px 40px #0000001a}
.search-suggest-item{color:var(--rd-ink)}
.search-suggest-item small{color:#6b6b6b}
.toast{background:var(--rd-ink);color:#fff;border:1px solid #ffffff26}

button.primary,.account-tabs button.active,#profileForm button.primary{background:var(--rd-brand);border-color:var(--rd-brand);color:#fff}
button.primary:hover{background:#ff2639;border-color:#ff2639}
button.secondary,.secondary{background:#fff;border:1px solid var(--rd-line);color:var(--rd-ink)}
button.secondary:hover,.secondary:hover{border-color:var(--rd-brand);color:var(--rd-brand)}

/* =========================================================
   PRODUCT CARDS -- the single most-repeated component
   (category/group pages, search results, trending grid).
========================================================= */
.product{border:1px solid var(--rd-line);border-radius:18px;background:#fff;box-shadow:none}
.product::before{display:none}
.product:hover{border-color:#e51b2b6b;transform:translateY(-4px);box-shadow:0 18px 44px #0808081c}
.product-art,.product-art img,.generated-art{background:#fafafa}
.product-art>small{background:var(--rd-brand);border-color:var(--rd-brand);color:#fff}
.product-info>small{color:var(--rd-muted-ink)}
.product-info h3{color:var(--rd-ink)}
.product-description{color:var(--rd-muted-ink)}
.product-foot{border-top-color:var(--rd-line)}
.product-foot b{color:var(--rd-ink)}
.product-foot button,.topup-open-link{border-color:var(--rd-brand);background:var(--rd-brand)}
.product-foot button:hover,.topup-open-link:hover{background:#ff2639;border-color:#ff2639}
.filter-row button,.chip,.pill-filter{border:1px solid var(--rd-line);background:#fff;color:#5c5c5c}
.filter-row button.active{border-color:var(--rd-brand);background:var(--rd-brand);color:#fff}

/* Homepage "Trending Now" strip -- a separate class from .product
   that was missed in the earlier retheme, so it was still showing
   the old dark card style (var(--panel2) + hardcoded white text)
   next to the now-light product grid. */
.trend-card{background:#fff;border:1px solid var(--rd-line);box-shadow:none}
.trend-card:hover{box-shadow:0 10px 24px #0808081a}
.trend-art,.trend-art img,.trend-art .generated-art{background:#fafafa;border-right-color:var(--rd-line)}
.trend-copy small{color:var(--rd-muted-ink)}
.trend-copy h3{color:var(--rd-ink)}
.trend-copy p{color:var(--rd-muted-ink)}
.trend-foot b{color:var(--rd-ink)}
.trend-foot button{border-color:var(--rd-brand);background:var(--rd-brand)}
.trend-foot button:hover{background:#ff2639;border-color:#ff2639}

/* =========================================================
   ACCOUNT PAGE
========================================================= */
.topbar{background:var(--rd-ink);color:#fff;border-bottom:3px solid var(--rd-brand)}
header:has(.back-store){background:#fffffff5;border-bottom:1px solid #0808081f}
.back-store{color:var(--rd-ink)!important;border:1px solid var(--rd-line);border-radius:999px;padding:8px 14px}
#signOut{border:1px solid var(--rd-line);background:#fff;color:var(--rd-ink);border-radius:999px}
#signOut:hover{border-color:var(--rd-brand);color:var(--rd-brand)}
.account-heading{color:#fff;background:radial-gradient(circle at 88% 15%,#e51b2b4d,#0000 27%),var(--rd-ink);border-radius:26px;margin:24px clamp(20px,5vw,40px) 0;padding:clamp(28px,4vw,48px)}
.account-heading .eyebrow{color:var(--rd-brand)}
.account-heading h1{color:#fff}
.account-heading>div>p:last-child{color:#aaa}
.balance-card{border:1px solid #343434;background:#ffffff0a;border-radius:16px}
.balance-card small{color:#8e8e8e}
.balance-card strong{color:#fff}
.balance-card a:hover{background:#ff2639}
.account-tabs{border-bottom-color:var(--rd-line)}
.account-tabs button{border:1px solid var(--rd-line);background:#fff;color:#5c5c5c}
.account-tabs button.active{color:#fff}
.account-message{color:var(--rd-muted-ink)}
.stat-grid article,.account-box{border:1px solid var(--rd-line);border-radius:17px;background:#fff}
.stat-grid small{color:var(--rd-muted-ink)}
.stat-grid strong{color:var(--rd-ink)}
.account-box h2{color:var(--rd-ink)}
.alerts-badge{background:#fdeee0;color:#b5590a}
.history-row{border-top-color:var(--rd-line)}
.history-row small,.history-row p{color:var(--rd-muted-ink)}
.history-row strong{color:var(--rd-ink)}
.amount.credit{color:#1a8a5c}
.amount.debit{color:var(--rd-brand)}
.status{background:var(--rd-paper);color:var(--rd-muted-ink)}
.status.approved,.status.completed{background:#e4f5ec;color:#157a4f}
.status.pending{background:#fdf1d9;color:#a06400}
.status.rejected,.status.failed{background:#fbe3e3;color:#b0221f}
.code-list{background:var(--rd-paper);border:1px solid var(--rd-line)}
.code-item code{color:var(--rd-ink)}
#profileForm input,.review-form select,.review-form input,.review-form textarea{background:#fff;border:1px solid var(--rd-line);color:var(--rd-ink);border-radius:10px}
#profileForm label{color:var(--rd-muted-ink)}
.review-form{background:var(--rd-paper);border-color:var(--rd-line)}

/* =========================================================
   CHECKOUT CONFIRMATION -- real values from the Codex
   checkout page's own light-card + dark-summary pattern
   (checkout-main-card is white, checkout-summary-card/
   checkout-totals is #0a0a0a -- the same "light page, dark
   accent panel" language as the hero and account-hero).
========================================================= */
#checkoutDialog{background:#fff;color:var(--rd-ink);border:1px solid var(--rd-line);border-radius:20px}
#checkoutDialog::backdrop{background:#0000009e}
#checkoutDialog h2{color:var(--rd-ink)}
#checkoutDialog .dialog-icon{color:var(--rd-brand)}
#checkoutDialog #checkoutClose{background:var(--rd-paper);border:1px solid var(--rd-line);color:var(--rd-ink)}
#checkoutDialog .checkout-line{border-bottom-color:#e6e6e6}
#checkoutDialog .checkout-line span{color:var(--rd-muted-ink)}
#checkoutDialog .checkout-line b{color:var(--rd-ink)}
#checkoutDialog .checkout-line-region{color:var(--rd-brand-dark)}
#checkoutDialog .checkout-total{background:#0a0a0a;color:#fff;border-top:0;border-radius:13px;padding:16px 18px;margin:18px 0}
#checkoutDialog label{color:var(--rd-muted-ink);display:block;margin-top:10px}
#checkoutDialog select{background:#fff;border:1px solid var(--rd-line);color:var(--rd-ink);border-radius:8px;padding:9px;width:100%;margin-top:5px}
#checkoutDialog .hub-sub{color:var(--rd-muted-ink)}
#checkoutDialog .dialog-actions .ghost{background:#fff;border:1px solid var(--rd-line);color:var(--rd-ink)}
#checkoutDialog .dialog-actions .ghost:hover{border-color:var(--rd-brand);color:var(--rd-brand)}
#checkoutDialog .dialog-actions .primary{background:var(--rd-brand);color:#fff;border:0}
#checkoutDialog .dialog-actions .primary:hover{background:#ff2639}

/* Delivery-codes dialog shares the same light card treatment as the
   dedicated login page (Codex has no dark login modal in its design). */
#deliveryDialog{background:#fff;color:var(--rd-ink);border:1px solid var(--rd-line);border-radius:20px}
#deliveryDialog::backdrop{background:#0000009e}
#deliveryDialog h2{color:var(--rd-ink)}
#deliveryDialog .dialog-icon{color:var(--rd-brand)}
#deliveryDialog #deliveryClose{background:var(--rd-paper);border:1px solid var(--rd-line);color:var(--rd-ink)}
#deliveryDialog p{color:var(--rd-muted-ink)}
#deliveryDialog #copyAllCodes,#deliveryDialog #deliveryDone{background:var(--rd-brand);color:#fff}
#deliveryDialog #copyAllCodes:hover,#deliveryDialog #deliveryDone:hover{background:#ff2639}


/* WCell V25 — Final homepage conversion pass.
   Presentation only: no catalogue, auth, checkout or purchase logic changes. */

body.view-home{
  --v25h-ink:#090909;
  --v25h-muted:#666;
  --v25h-paper:#f7f7f7;
  --v25h-surface:#fff;
  --v25h-line:#e3e3e3;
  --v25h-red:#e11d2e;
  background:var(--v25h-paper);
  color:var(--v25h-ink);
}

body.view-home main{width:min(1240px,calc(100% - 40px));margin:auto}

body.view-home .hero{
  min-height:500px;
  height:auto;
  margin:22px 0 18px;
  padding:clamp(38px,5vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:54px;
  overflow:hidden;
  border:1px solid #242424;
  border-radius:28px;
  background:
    radial-gradient(circle at 78% 8%,rgb(225 29 46 / 34%),transparent 28%),
    radial-gradient(circle at 8% 92%,rgb(255 255 255 / 8%),transparent 31%),
    linear-gradient(135deg,#070707,#111 65%,#2b070b);
  box-shadow:0 28px 80px rgb(0 0 0 / 22%);
}

body.view-home .hero h1{
  max-width:680px;
  font:700 clamp(46px,6vw,76px)/.98 "Space Grotesk","DM Sans",system-ui,sans-serif;
  letter-spacing:-.055em;
}

body.view-home .hero-copy>p:not(.eyebrow){max-width:650px;font-size:17px;line-height:1.7}
body.view-home .hero-actions{margin-top:28px}
body.view-home .hero-actions #exploreBtn{min-height:52px;border-radius:11px;padding-inline:23px}
body.view-home .hero .trust{gap:12px 22px;flex-wrap:wrap;margin-top:23px}
body.view-home .hero .trust span{display:inline-flex;align-items:center;gap:6px}

body.view-home .hero-visual{
  min-height:360px;
  height:100%;
  border-radius:28px;
  border-color:rgb(255 255 255 / 16%);
  box-shadow:0 26px 72px rgb(0 0 0 / 45%);
}

body.view-home .wcell-categories{
  margin:0 -20px;
  padding:72px 20px 78px;
  background:transparent;
}

body.view-home .wcell-categories-heading{gap:70px}
body.view-home .wcell-categories-heading h2{font-size:clamp(36px,4.8vw,58px);max-width:660px}
body.view-home .wcell-categories-heading>p{font-size:16px;line-height:1.75}

body.view-home .category-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  margin-top:42px;
}

body.view-home .category-card{
  min-height:290px;
  padding:0;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid var(--v25h-line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgb(0 0 0 / 5%);
  isolation:isolate;
}

body.view-home .category-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:58%;
  background:
    linear-gradient(180deg,transparent 46%,rgb(255 255 255 / 94%)),
    var(--v25-home-image,linear-gradient(135deg,#151515,#2b070b));
  background-size:cover;
  background-position:center;
  z-index:-1;
  transition:transform .25s ease;
}

body.view-home .category-card::after{display:none}
body.view-home .category-card:hover::before{transform:scale(1.035)}
body.view-home .category-card:hover{transform:translateY(-5px);border-color:rgb(225 29 46 / 35%);box-shadow:0 20px 44px rgb(0 0 0 / 12%)}
body.view-home .category-card .category-icon{position:absolute;left:18px;top:18px;z-index:2;border:1px solid rgb(255 255 255 / 22%);background:rgb(0 0 0 / 58%);color:#fff;backdrop-filter:blur(9px)}
body.view-home .category-card .category-copy{position:relative;z-index:2;width:100%;margin:0;padding:22px 20px 18px;background:linear-gradient(180deg,rgb(255 255 255 / 2%),#fff 26%)}
body.view-home .category-card strong{color:var(--v25h-ink);font:700 18px "Space Grotesk","DM Sans",sans-serif}
body.view-home .category-card small{color:var(--v25h-muted);line-height:1.45}
body.view-home .category-card .category-arrow{position:absolute;right:18px;bottom:18px;color:var(--v25h-red)}

body.view-home .featured-categories{margin:8px 0 54px}
body.view-home .featured-categories .section-head,
body.view-home .home-trending .section-head,
body.view-home .products>.section-head{
  padding-bottom:17px;
  border-bottom:1px solid var(--v25h-line);
}

body.view-home .featured-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

body.view-home .featured-grid button{
  min-height:116px;
  height:auto;
  padding:16px;
  border:1px solid var(--v25h-line);
  border-radius:15px;
  background:#fff;
  color:var(--v25h-ink);
  box-shadow:0 5px 18px rgb(0 0 0 / 5%);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

body.view-home .featured-grid button:hover,
body.view-home .featured-grid button:focus-visible{
  transform:translateY(-3px);
  border-color:rgb(225 29 46 / 35%);
  background:#fff;
  box-shadow:0 14px 32px rgb(0 0 0 / 10%);
}

body.view-home .featured-grid button>span{border:0;border-radius:12px;background:#f2f2f2;color:var(--v25h-ink)}
body.view-home .featured-grid small{color:var(--v25h-muted);opacity:1}
/* .eyebrow's global color (--red / --rd-brand, #e51b2b) is a hair under
   4.5:1 on the light homepage background -- override with a darker red at
   every section that sits on it, scoped like this rather than touching the
   shared brand variable (used as a background color in dozens of other
   components) or a blanket body.view-home .eyebrow rule, which would also
   catch the hero's eyebrow -- that one sits on its own tinted dark
   background and already has sufficient contrast with the brighter red. */
body.view-home #homeTrending .eyebrow,
body.view-home .featured-categories .eyebrow,
body.view-home #products .eyebrow,
body.view-home .home-seo .eyebrow,
body.view-home .how .eyebrow{color:#cc1626!important}
body.view-home .featured-grid .topup-feature>span{background:#111;color:#fff}

body.view-home .products{
  margin-bottom:54px;
  padding:30px;
  border:1px solid var(--v25h-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 10px 35px rgb(0 0 0 / 5%);
}

body.view-home .products>.section-head{margin-bottom:22px}
body.view-home #productTitle{font:700 clamp(30px,3vw,40px) "Space Grotesk","DM Sans",sans-serif;letter-spacing:-.035em}
body.view-home .product-grid,
body.view-home .hierarchy-grid{gap:18px}

body.view-home .home-trending{margin:0 0 58px}
body.view-home .trend-grid{gap:14px}
body.view-home .trend-card{border-radius:16px;overflow:hidden}

body.view-home .home-seo{
  margin:0 0 50px;
  padding:36px;
  border:1px solid #202020;
  border-radius:22px;
  background:linear-gradient(135deg,#0a0a0a,#141414 70%,#2b070b);
  color:#fff;
}
body.view-home .home-seo .section-head{margin-bottom:24px}
body.view-home .home-seo h2{color:#fff;font-size:clamp(30px,4vw,46px)}
body.view-home .home-seo .section-head p:last-child{max-width:900px;color:#bbb;line-height:1.7}
body.view-home .home-seo-grid{gap:14px}
body.view-home .home-seo-grid article{border:1px solid #2c2c2c;border-radius:15px;background:rgb(255 255 255 / 5%);color:#fff}
body.view-home .home-seo-grid article p{color:#bcbcbc}
body.view-home .home-seo-grid article a{color:#ff717d;font-weight:700}

body.view-home .how{
  margin:0 0 24px;
  padding:44px 36px;
  border:1px solid var(--v25h-line);
  border-radius:22px;
  background:#fff;
}
body.view-home .how>div{gap:16px}
body.view-home .how article{border:1px solid var(--v25h-line);border-radius:15px;background:#fafafa}
body.view-home .how article h3{color:var(--v25h-ink)}
body.view-home .how article p{color:var(--v25h-muted)}

body.view-home .benefits{
  margin:0 0 50px;
  border:1px solid var(--v25h-line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}

body.view-home .benefits article{min-height:96px}
body.view-home .benefits article:not(:last-child){border-right:1px solid var(--v25h-line)}

body.view-home :focus-visible{outline:3px solid rgb(225 29 46 / 34%);outline-offset:3px}

@media(max-width:1120px){
  body.view-home .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.view-home .featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:900px){
  body.view-home main{width:min(100% - 28px,1240px)}
  body.view-home .hero{grid-template-columns:1fr;min-height:0;padding:42px 30px}
  body.view-home .hero-visual{min-height:290px}
  body.view-home .wcell-categories-heading{grid-template-columns:1fr;gap:18px}
  body.view-home .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.view-home .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.view-home .benefits{grid-template-columns:repeat(2,1fr)}
  body.view-home .benefits article:nth-child(2){border-right:0}
}

@media(max-width:620px){
  body.view-home main{width:min(100% - 20px,1240px)}
  body.view-home .hero{margin-top:10px;padding:32px 20px;border-radius:20px}
  body.view-home .hero h1{font-size:clamp(42px,13vw,58px)}
  body.view-home .hero-copy>p:not(.eyebrow){font-size:15px}
  body.view-home .hero-actions{display:grid}
  body.view-home .hero-actions #exploreBtn,body.view-home .hero-actions a{width:100%}
  body.view-home .hero-visual{min-height:240px}
  body.view-home .hero .trust{display:grid;gap:8px}
  body.view-home .wcell-categories{padding-top:52px;padding-bottom:56px}
  body.view-home .category-grid{grid-template-columns:1fr}
  body.view-home .category-card{min-height:260px}
  body.view-home .featured-grid{grid-template-columns:1fr}
  body.view-home .products{padding:20px 15px;border-radius:17px}
  body.view-home .home-seo{padding:28px 20px;border-radius:18px}
  body.view-home .home-seo-grid{grid-template-columns:1fr}
  body.view-home .how{padding:30px 18px;border-radius:18px}
  body.view-home .how>div{grid-template-columns:1fr}
  body.view-home .benefits{grid-template-columns:1fr}
  body.view-home .benefits article{border-right:0!important;border-bottom:1px solid var(--v25h-line)}
  body.view-home .benefits article:last-child{border-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  body.view-home *,body.view-home *::before,body.view-home *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* WCell V33 — professional homepage source of truth.
   Black, red and white only. Catalogue, auth, balance, order and supplier logic remain untouched. */
:root{
  --w33-black:#080808;
  --w33-ink:#111111;
  --w33-red:#e11d2e;
  --w33-red-dark:#b80f1f;
  --w33-white:#ffffff;
  --w33-paper:#f6f6f4;
  --w33-soft:#eeeeeb;
  --w33-line:#deded9;
  --w33-muted:#666663;
  --green:var(--w33-red);
}

html{scroll-behavior:smooth}
body{font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;transform:translateY(-160%);padding:10px 14px;border-radius:9px;background:var(--w33-white);color:var(--w33-black);font-weight:800;box-shadow:0 12px 30px rgb(0 0 0 / 28%)}
.skip-link:focus{transform:none}

body.view-home .utility-inner{max-width:1240px;margin-inline:auto}
body.view-home .site-header{position:sticky;top:0;z-index:100;background:rgb(255 255 255 / 94%);backdrop-filter:blur(18px) saturate(150%)}
body.view-home .header-main{width:min(1240px,calc(100% - 40px));margin-inline:auto;min-height:76px;height:auto;padding-block:12px}
body.view-home .simple-nav a{padding-block:8px}
body.view-home .account-nav{gap:10px}
body.view-home .account-nav button{min-height:44px}
body.view-home .account-nav .wallet{border:1px solid var(--w33-black);box-shadow:none}
body.view-home .account-nav .wallet:hover{background:var(--w33-red);border-color:var(--w33-red)}

body.view-home .hero{
  position:relative;
  margin-top:26px;
  padding:clamp(38px,5vw,70px);
  min-height:560px;
  border:1px solid #262626;
  background:
    radial-gradient(circle at 86% 12%,rgb(225 29 46 / 34%),transparent 28%),
    radial-gradient(circle at 12% 115%,rgb(225 29 46 / 18%),transparent 34%),
    linear-gradient(135deg,#050505 0%,#111 68%,#260508 100%);
}
body.view-home .hero::before{opacity:.12;background-size:58px 58px}
body.view-home .hero h1{font-size:clamp(48px,6vw,78px);max-width:720px}
body.view-home .hero h1 em{color:#ff4050}
body.view-home .hero-copy{position:relative;z-index:2}
body.view-home .hero-copy>p:not(.eyebrow){max-width:640px;color:#c8c8c8}
body.view-home .hero-actions #exploreBtn{background:var(--w33-red);box-shadow:0 14px 34px rgb(225 29 46 / 30%)}
body.view-home .hero-actions #exploreBtn:hover{background:#f12236;transform:translateY(-1px)}
body.view-home .hero-visual{border:1px solid rgb(255 255 255 / 16%);background:radial-gradient(circle at 50% 24%,rgb(225 29 46 / 22%),transparent 42%),#0b0b0b}
body.view-home .hero-market,
body.view-home .hero-live{background:rgb(12 12 12 / 82%);border-color:rgb(255 255 255 / 15%);backdrop-filter:blur(12px)}
body.view-home .hero-live b,
body.view-home .hero-market b{color:#ff4050}
body.view-home .hero-icon{color:#fff;background:#171717;border-color:#333}
body.view-home .hero-game-card{border-color:#fff;box-shadow:0 28px 70px rgb(0 0 0 / 52%)}

body.view-home .wcell-categories{padding-top:82px}
body.view-home .category-card,
body.view-home .featured-grid button,
body.view-home .products,
body.view-home .how,
body.view-home .benefits{border-color:var(--w33-line)}
body.view-home .category-card,
body.view-home .featured-grid button{box-shadow:0 8px 28px rgb(0 0 0 / 5%)}
body.view-home .category-card:hover,
body.view-home .featured-grid button:hover{border-color:rgb(225 29 46 / 42%);box-shadow:0 18px 44px rgb(0 0 0 / 11%)}

body.view-home .product-card{border-color:var(--w33-line);box-shadow:0 8px 26px rgb(0 0 0 / 5%)}
body.view-home .product-card:hover{border-color:rgb(225 29 46 / 38%);box-shadow:0 18px 42px rgb(0 0 0 / 11%);transform:translateY(-4px)}
body.view-home .stock-badge,
body.view-home .availability-badge,
body.view-home [class*="available"],
body.view-home [class*="instant"]{accent-color:var(--w33-red)}
body.view-home .home-seo{background:linear-gradient(135deg,#070707,#121212 70%,#250508)}
body.view-home footer{border-top:4px solid var(--w33-red)}

@media(max-width:900px){
  body.view-home .utility-inner span:nth-child(2),
  body.view-home .utility-inner span:nth-child(3){display:none}
  body.view-home .header-main{width:min(100% - 24px,1240px);grid-template-columns:auto 1fr;gap:12px}
  body.view-home .account-nav{justify-self:end}
  body.view-home .account-nav .wallet small{display:none}
  body.view-home .hero{margin-top:14px;min-height:0}
}
@media(max-width:620px){
  body.view-home .utility-bar{height:31px}
  body.view-home .utility-inner{padding-inline:12px;font-size:11px}
  body.view-home .utility-location{display:none}
  body.view-home .header-main{min-height:66px}
  body.view-home .logo strong{font-size:19px}
  body.view-home .account-nav .login{padding-inline:12px}
  body.view-home .account-nav .wallet{padding-inline:10px}
  body.view-home .hero{border-radius:18px;padding:30px 18px}
  body.view-home .hero .eyebrow{font-size:11px}
  body.view-home .hero-visual{min-height:230px}
}