/* Add custom CSS styles below */
/* =========================================================================
   GAMEBACK  Premium Dark Gaming Theme    Salla Raed   (cleaned 2026-06)
   Paste into:  Store > Design > Custom CSS
   Pair with:   custom.js
   Done: removed pasted Gmail text, merged duplicate blocks, repaired cut lines,
   and added the dropdown-menu readability fix (last section).
   ========================================================================= */

:root{
  --gb-red:#E50914;
  --gb-red-d:#b30710;
  --gb-black:#050505;
  --gb-card:#111111;
  --gb-card2:#171717;
  --gb-white:#FFFFFF;
  --gb-muted:#b8b8b8;
  --gb-border:rgba(229,9,20,.35);
  --gb-line:rgba(255,255,255,.08);
  --gb-glow:0 18px 45px rgba(229,9,20,.18);
  --gb-glow-strong:0 26px 70px rgba(229,9,20,.30);
  --gb-r:18px;
  --gb-wa:#25D366;
  --gb-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Salla Raed theme variable overrides ---- */
:root,.s-theme,body{
  --color-primary:#E50914;
  --color-primary-rgb:229 9 20;
  --color-primary-d:#b30710;
  --salla-primary:#E50914;
}

/* =========================================================================
   GLOBAL
   ========================================================================= */
html{scroll-behavior:smooth}
body,.s-theme,.store-body{
  background:var(--gb-black)!important;
  color:var(--gb-white);
  -webkit-font-smoothing:antialiased;
}
.gb-scope ::selection,body ::selection{background:var(--gb-red);color:#fff}
.gb-container{width:min(1200px,92%);margin-inline:auto}
img{max-width:100%;transition:.3s ease}
svg{transition:.3s ease}

/* utility reveal (driven by custom.js) */
[data-gb-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--gb-ease),transform .6s var(--gb-ease)}
[data-gb-reveal].gb-in{opacity:1;transform:none}

/* scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:#E50914;border-radius:20px}

/* =========================================================================
   1  HEADER  (sticky  glass  scroll shadow)
   ========================================================================= */
.gb-header,
header.s-header,.store-header,#mainnav{
  position:sticky;top:0;z-index:300;
  background:rgba(5,5,5,.92)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(229,9,20,.22);
  transition:box-shadow .3s var(--gb-ease),background .3s var(--gb-ease);
}
.gb-header.gb-scrolled,
header.s-header.gb-scrolled,.store-header.gb-scrolled,#mainnav.gb-scrolled{
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  background:rgba(5,5,5,.97)!important;
}
.gb-nav{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.gb-logo{display:flex;align-items:center;gap:14px;font-weight:900}
.gb-logo-mark{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,#fff 0 48%,var(--gb-red) 48% 100%);
  display:grid;place-items:center;color:#000;font-weight:900;font-size:20px;
  box-shadow:0 12px 35px rgba(229,9,20,.35);
}
.gb-logo-text{font-size:28px;line-height:1;font-weight:900;letter-spacing:.5px}
.gb-logo-text span{color:var(--gb-red)}
.gb-menu{display:flex;gap:22px;color:#eee;font-size:15px}
.gb-menu a{position:relative;padding:6px 0;transition:color .2s}
.gb-menu a:hover,.gb-menu a.active{color:var(--gb-red)}
.gb-menu a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;width:0;height:2px;background:var(--gb-red);transition:width .25s var(--gb-ease)}
.gb-menu a:hover::after{width:100%}
.gb-cta{background:var(--gb-red);padding:12px 18px;border-radius:12px;font-weight:800;color:#fff;box-shadow:0 12px 30px rgba(229,9,20,.3);transition:transform .2s var(--gb-ease),box-shadow .2s var(--gb-ease)}
.gb-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(229,9,20,.45)}

/* Logo (final merged value) */
.store-logo img,.navbar-brand img,.header-logo img{max-height:72px!important}

/* =========================================================================
   2 . HERO + BANNERS
   ========================================================================= */
.gb-hero{padding:34px 0 20px}
.gb-hero-card{
  min-height:430px;border-radius:28px;overflow:hidden;position:relative;
  border:1px solid var(--gb-border);
  background:
    radial-gradient(circle at 20% 20%,rgba(229,9,20,.36),transparent 32%),
    radial-gradient(circle at 80% 35%,rgba(255,255,255,.10),transparent 24%),
    linear-gradient(135deg,#0b0b0b,#151515 50%,#080808);
  box-shadow:var(--gb-glow-strong);
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;padding:54px;
}
.gb-hero h1{font-size:clamp(34px,5vw,54px);margin:0 0 18px;line-height:1.06;font-weight:900}
.gb-hero h1 span{color:var(--gb-red)}
.gb-hero p{color:var(--gb-muted);font-size:clamp(16px,1.6vw,22px);margin:0 0 28px;line-height:1.8}
.gb-actions{display:flex;gap:14px;flex-wrap:wrap}
.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:14px;font-weight:900;border:1px solid rgba(255,255,255,.14);background:#151515;color:#fff;cursor:pointer;transition:transform .22s var(--gb-ease),box-shadow .22s var(--gb-ease),background .22s}
.gb-btn:hover{transform:translateY(-2px)}
.gb-btn.primary{background:var(--gb-red);border-color:var(--gb-red);box-shadow:0 14px 35px rgba(229,9,20,.3)}
.gb-btn.primary:hover{box-shadow:0 20px 46px rgba(229,9,20,.5)}
.gb-hero-visual{
  height:320px;border-radius:24px;
  background:linear-gradient(135deg,rgba(229,9,20,.85),rgba(20,20,20,.4));
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 90px rgba(0,0,0,.5);
}

/* Salla banners (final: radius 18 + red glow) */
.s-block-fixed-banner img,.s-block--fixed-banner img,
.s-block-photos-slider img,.s-block--photos-slider img,
.s-block--banner img,.banner img,.hero img{
  border-radius:18px!important;box-shadow:0 20px 50px rgba(229,9,20,.25)!important;
}

/* =========================================================================
   3  STORE FEATURES
   ========================================================================= */
.gb-features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:24px 0}
.gb-feature{
  background:linear-gradient(180deg,var(--gb-card2),var(--gb-card));
  border:1px solid var(--gb-border);border-radius:20px;padding:24px;
  transition:transform .25s var(--gb-ease),box-shadow .25s var(--gb-ease),border-color .25s;
}
.gb-feature:hover{transform:translateY(-6px);box-shadow:var(--gb-glow);border-color:rgba(229,9,20,.6)}
.gb-feature .icon{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;margin-bottom:14px;
  border:1.5px solid var(--gb-red);box-shadow:inset 0 0 18px -6px var(--gb-red);
}
.gb-feature h3{margin:0 0 6px;font-size:18px;font-weight:800}
.gb-feature p{margin:0;color:var(--gb-muted);font-size:14px;line-height:1.6}

.store-feature,.feature-item,.s-block--features .feature{
  background:#111!important;border:1px solid rgba(229,9,20,.35)!important;
  border-radius:16px!important;color:#fff!important;
}

/* =========================================================================
   4  SECTION TITLES  (final: white - removed old rule that made them black)
   ========================================================================= */
.gb-section{padding:30px 0}
.gb-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}
.gb-section-title{font-size:clamp(22px,2.6vw,28px);font-weight:900;margin:0;display:flex;align-items:center;gap:12px}
.gb-section-title::before{content:"";width:6px;height:30px;background:var(--gb-red);border-radius:10px;box-shadow:0 0 16px -2px var(--gb-red)}
.gb-see-all{font-size:14px;font-weight:700;color:var(--gb-red);display:inline-flex;align-items:center;gap:6px;transition:opacity .2s}
.gb-see-all:hover{opacity:.75}

.s-block__title,.s-block-title,.section-title,.s-section-title,.products-slider h2{
  color:#fff!important;font-weight:800!important;position:relative;
}
.s-block__title::before,.section-title::before{
  content:"";display:inline-block;width:5px;height:24px;border-radius:4px;
  background:var(--gb-red);margin-inline-end:10px;vertical-align:-4px;
  box-shadow:0 0 14px -2px var(--gb-red);
}

/* =========================================================================
   5  CATEGORIES
   ========================================================================= */
.gb-categories{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.gb-category{
  min-height:120px;border-radius:18px;overflow:hidden;position:relative;
  border:1px solid var(--gb-border);
  background:linear-gradient(180deg,rgba(229,9,20,.18),rgba(17,17,17,.96)),var(--gb-card);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;
  text-align:center;padding:14px;
  transition:transform .25s var(--gb-ease),box-shadow .25s var(--gb-ease),border-color .25s;
}
.gb-category:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(229,9,20,.32);border-color:rgba(229,9,20,.7)}
.gb-category span:first-child{font-size:30px;filter:drop-shadow(0 4px 10px rgba(229,9,20,.4))}
.gb-category span:last-child{font-weight:800;font-size:15px}

/* Salla category cards (final merged values) */
.category-card,.categories-item,.category-item,
.s-block-main-links a,.s-block--categories a,.s-block--square-photos a{
  background:#101010!important;border:1px solid rgba(229,9,20,.4)!important;
  border-radius:18px!important;overflow:hidden;transition:.25s ease!important;
}
.category-card:hover,.categories-item:hover,.category-item:hover,
.s-block-main-links a:hover,.s-block--categories a:hover,.s-block--square-photos a:hover{
  transform:translateY(-5px);box-shadow:0 12px 30px rgba(229,9,20,.22)!important;
}

/* =========================================================================
   6  PRODUCT CARDS  (final: radius 16 . soft white border . red hover)
   ========================================================================= */
.gb-products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gb-product{
  background:var(--gb-card);border:1px solid var(--gb-line);border-radius:22px;overflow:hidden;
  transition:transform .25s var(--gb-ease),box-shadow .25s var(--gb-ease),border-color .25s;
}
.gb-product:hover{transform:translateY(-6px);box-shadow:var(--gb-glow);border-color:var(--gb-border)}
.gb-product-img{height:230px;background-size:cover;background-position:center;transition:transform .5s var(--gb-ease)}
.gb-product:hover .gb-product-img{transform:scale(1.07)}
.gb-product-body{padding:16px}
.gb-product h3{font-size:16px;line-height:1.5;min-height:48px;margin:0 0 12px;font-weight:700}
.gb-price{color:var(--gb-red);font-weight:900;font-size:20px;margin-bottom:14px}
.gb-buy{
  width:100%;border:0;background:var(--gb-red);color:#fff;padding:12px;border-radius:12px;
  font-weight:900;cursor:pointer;transition:background .2s,box-shadow .2s var(--gb-ease),transform .15s;
}
.gb-buy:hover{background:var(--gb-red-d);box-shadow:0 12px 28px rgba(229,9,20,.4)}
.gb-buy:active{transform:scale(.98)}

/*   */
.s-product-card-entry,.product-entry,.product-card{
  background:#111!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;overflow:hidden;transition:.25s ease!important;
}
.s-product-card-entry:hover,.product-entry:hover,.product-card:hover{
  transform:translateY(-6px);border-color:var(--gb-red)!important;
  box-shadow:0 15px 35px rgba(229,9,20,.25)!important;
}
.s-product-card-image,.product-entry__image{overflow:hidden}
.s-product-card-image img,.product-entry__image img{transition:transform .5s var(--gb-ease)!important}
.s-product-card-entry:hover .s-product-card-image img,
.product-entry:hover .product-entry__image img{transform:scale(1.07)}

/* card text readability */
.s-product-card-content-title a,.s-product-card-content-title,
.s-product-card-content,.s-product-card-content *,
.product-title,.product-entry h3,.product-entry a{color:#fff!important}
.s-product-card-content-subtitle{color:#cfcfcf!important}

/* prices (final values) */
.s-product-card-price,.price,.product-price{color:var(--gb-red)!important;font-weight:800!important;font-size:18px!important}
.s-product-card-sale-price{color:#ff1e1e!important;font-weight:900!important}

/* buy buttons */
.s-button-element,salla-button .s-button-element,.btn--add-to-cart,
.s-button-primary,.s-add-product-button-main,
.s-product-card-content-footer button,.add-to-cart,button[type="submit"]{
  background:#e50914!important;border:none!important;color:#fff!important;
  border-radius:10px!important;font-weight:700!important;transition:background .2s,box-shadow .2s!important;
}
.s-button-primary:hover,.btn--add-to-cart:hover{background:#ff1f2d!important;box-shadow:0 12px 28px rgba(229,9,20,.4)!important}

/* tabs: best sellers / PS5 games */
.s-tabs-nav button,.s-tabs-nav a,button[role="tab"]{
  background:#111!important;color:#fff!important;
  border:1px solid rgba(229,9,20,.45)!important;border-radius:12px!important;
}
.s-tabs-nav button[aria-selected="true"],button[role="tab"][aria-selected="true"]{
  background:#e50914!important;color:#fff!important;
}

/* slider arrows */
.swiper-button-next,.swiper-button-prev,.s-slider-next,.s-slider-prev{
  background:#111!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;
}

/* =========================================================================
   7  STATS + NEWSLETTER
   ========================================================================= */
.gb-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:26px;margin:30px 0;
  border-radius:22px;border:1px solid var(--gb-line);background:linear-gradient(180deg,var(--gb-card2),var(--gb-card))}
.gb-stat{display:flex;align-items:center;gap:14px}
.gb-stat .num{font-size:26px;font-weight:900;color:var(--gb-red)}
.gb-stat .lbl{color:var(--gb-muted);font-size:14px}
.gb-newsletter{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;padding:34px;margin:30px 0;
  border-radius:24px;border:1px solid var(--gb-border);background:linear-gradient(135deg,rgba(229,9,20,.10),var(--gb-card))}
.gb-newsletter input{width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--gb-line);background:#0c0c0c;color:#fff}
.gb-newsletter input:focus{outline:none;border-color:var(--gb-red);box-shadow:0 0 0 3px rgba(229,9,20,.2)}

/* search input */
input[type="search"]{background:#111!important;color:#fff!important;border:1px solid rgba(229,9,20,.35)!important}

/* =========================================================================
   8 . WHATSAPP  (section + floating pulse button)
   ========================================================================= */
.gb-whatsapp-section{
  margin:34px 0;padding:34px;border-radius:26px;
  border:1px solid rgba(37,211,102,.35);
  background:linear-gradient(135deg,rgba(37,211,102,.18),rgba(17,17,17,1));
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.gb-whatsapp-section h2{margin:0 0 8px;font-weight:900}
.gb-whatsapp-section p{margin:0;color:var(--gb-muted)}
.gb-whatsapp-btn{background:var(--gb-wa);color:#fff;padding:15px 24px;border-radius:14px;font-weight:900;white-space:nowrap;transition:transform .2s var(--gb-ease),box-shadow .2s}
.gb-whatsapp-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.45)}

.gb-floating-wa{
  position:fixed;bottom:22px;inset-inline-start:22px;width:58px;height:58px;border-radius:50%;
  background:var(--gb-wa);display:grid;place-items:center;font-size:28px;color:#fff;
  box-shadow:0 14px 35px rgba(37,211,102,.35);z-index:400;
  animation:gb-pulse 2.4s var(--gb-ease) infinite;
}
.gb-floating-wa:hover{animation-play-state:paused;transform:scale(1.08);transition:transform .2s}
@keyframes gb-pulse{
  0%{box-shadow:0 14px 35px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 14px 35px rgba(37,211,102,.35),0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 14px 35px rgba(37,211,102,.35),0 0 0 0 rgba(37,211,102,0)}
}

/* legacy whatsapp class - kept in case any HTML block uses it */
.gb-whatsapp{
  position:fixed;bottom:22px;left:22px;width:58px;height:58px;border-radius:50%;
  background:#25D366;color:white;display:flex;align-items:center;justify-content:center;
  font-size:30px;z-index:9999;box-shadow:0 10px 30px rgba(37,211,102,.45);text-decoration:none;
}

/* =========================================================================
   9  FOOTER
   ========================================================================= */
.gb-footer,footer.s-footer,.store-footer,footer{
  margin-top:40px;padding:40px 0;border-top:1px solid rgba(229,9,20,.25);
  background:#080808!important;color:var(--gb-muted);
}
footer *{color:#fff!important}
.gb-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px}
.gb-footer h3,.gb-footer h4{color:#fff;font-weight:800;margin:0 0 14px;font-size:15px}
.gb-footer a,.gb-footer p{display:block;margin:0 0 10px;transition:color .2s}
.gb-footer a:hover{color:var(--gb-red)!important}
.gb-pay{display:flex;gap:8px;flex-wrap:wrap}
.gb-pay span{height:34px;min-width:50px;display:grid;place-items:center;padding:0 10px;background:#fff;border-radius:7px;color:#111!important;font-weight:800;font-size:12px}
.gb-social{display:flex;gap:10px}
.gb-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gb-line)}
.gb-social a:hover{border-color:var(--gb-red);color:var(--gb-red)!important}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:900px){
  .gb-menu{display:none}
  .gb-hero-card{grid-template-columns:1fr;padding:30px;gap:24px}
  .gb-features{grid-template-columns:repeat(2,1fr)}
  .gb-categories{grid-template-columns:repeat(3,1fr)}
  .gb-products{grid-template-columns:repeat(2,1fr)}
  .gb-stats{grid-template-columns:repeat(2,1fr)}
  .gb-newsletter{grid-template-columns:1fr}
  .gb-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .store-logo img,.navbar-brand img,.logo img{max-height:45px!important;transform:scale(1.08)}
  .s-product-card-entry{border-radius:14px!important}
  .s-block--fixed-banner img,.banner img{border-radius:12px!important}
  .gb-whatsapp{width:52px;height:52px;font-size:26px;bottom:18px;left:18px}
}
@media(max-width:520px){
  .gb-nav{min-height:72px}
  .gb-logo-mark{width:46px;height:46px}
  .gb-logo-text{font-size:22px}
  .gb-cta{display:none}
  .gb-hero-card{padding:22px;border-radius:20px}
  .gb-hero-visual{height:200px}
  .gb-features{grid-template-columns:1fr 1fr}
  .gb-categories{grid-template-columns:repeat(2,1fr)}
  .gb-products{grid-template-columns:1fr}
  .gb-stats{grid-template-columns:1fr 1fr}
  .gb-whatsapp-section{flex-direction:column;align-items:flex-start}
  .gb-footer-grid{grid-template-columns:1fr}
  .gb-floating-wa{width:52px;height:52px;font-size:24px;bottom:16px;inset-inline-start:16px}
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,[data-gb-reveal]{transition:none!important;animation:none!important;transform:none!important}
  .gb-np{transform:translateY(-50%)!important} /* exception: keep next/prev arrows centered */
}

/* =========================================================================
   10 . HEADER DROPDOWN MENU READABILITY FIX  (new)
   links were light-on-white and invisible
   ========================================================================= */
header nav li ul a,
nav ul ul a,
.store-header li ul a,
#mainnav li ul a,
header [class*="sub-menu"] a,
header [class*="dropdown"] a{
  color:#111!important;
}
header nav li ul a:hover,
nav ul ul a:hover,
.store-header li ul a:hover,
#mainnav li ul a:hover,
header [class*="sub-menu"] a:hover,
header [class*="dropdown"] a:hover{
  color:#E8242C!important;
}

/* =========================================================================
   10-b . DROPDOWN FIX - BROADER COVERAGE (homepage menu)
   ========================================================================= */
header li ul, nav li ul, salla-menu li ul,
.sub-menu, .dropdown-menu, [class*="mega-menu"]{
  background:#fff !important;
}

header li li a, nav li li a, salla-menu li li a,
header li ul li a, .main-menu li li a, .header-menu li li a,
.sub-menu a, .dropdown-menu a, [class*="mega-menu"] a{
  color:#111 !important;
}

header li li a:hover, nav li li a:hover, salla-menu li li a:hover,
header li ul li a:hover, .main-menu li li a:hover, .header-menu li li a:hover,
.sub-menu a:hover, .dropdown-menu a:hover, [class*="mega-menu"] a:hover{
  color:#E8242C !important;
}