/* ============================================================
   GEEKYTEC — MARIO BROS PIXEL STYLE + NEON PURPLE/CYAN
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&display=swap');

:root {
  --purple:  #cc44ff;
  --cyan:    #44aaff;
  --pink:    #ff44cc;
  --yellow:  #ffdd00;
  --green:   #44ff88;
  --red:     #ff3333;
  --bg:      #08081a;
  --bg2:     #0e0e28;
  --bg3:     #141438;
  --border:  #2a1a4a;
  --pixel:   'Press Start 2P', monospace;
  --orb:     'Orbitron', sans-serif;
  --glow-p:  0 0 8px #cc44ff, 0 0 20px #cc44ff66;
  --glow-c:  0 0 8px #44aaff, 0 0 20px #44aaff66;
  --glow-pk: 0 0 8px #ff44cc, 0 0 20px #ff44cc66;
  --glow-y:  0 0 8px #ffdd00, 0 0 20px #ffdd0066;
  --block-shadow: 4px 4px 0 #000, inset -3px -3px 0 rgba(0,0,0,0.4), inset 3px 3px 0 rgba(255,255,255,0.15);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* Circuit board background */
body {
  font-family: var(--orb);
  background: var(--bg);
  color: #ccd;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(204,68,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(68,170,255,0.06) 0%, transparent 50%),
    linear-gradient(rgba(68,170,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68,170,255,0.03) 1px, transparent 1px),
    linear-gradient(rgba(204,68,255,0.015) 2px, transparent 2px),
    linear-gradient(90deg, rgba(204,68,255,0.015) 2px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px, 200px 200px, 200px 200px;
}

/* Scanlines */
body::before {
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.12) 3px,rgba(0,0,0,0.12) 4px);
}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--purple);box-shadow:var(--glow-p)}
::selection{background:var(--purple);color:#fff}

/* ---- ANIMATIONS ------------------------------------------ */
@keyframes blink    {0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes coinSpin {0%{transform:scaleX(1)}40%{transform:scaleX(0.1)}50%{transform:scaleX(0)}60%{transform:scaleX(0.1)}100%{transform:scaleX(1)}}
@keyframes bounce   {0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes starPop  {0%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1.3) rotate(180deg);opacity:1}100%{transform:scale(1) rotate(360deg);opacity:1}}
@keyframes marquee  {0%{transform:translateX(100%)}100%{transform:translateX(-150%)}}
@keyframes neonFlicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.7}94%{opacity:1}98%{opacity:1}99%{opacity:.8}}
@keyframes slideIn  {from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes float    {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rotateStar{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes bannerSlide{0%,18%{transform:translateX(0%)}23%,41%{transform:translateX(-20%)}46%,64%{transform:translateX(-40%)}69%,87%{transform:translateX(-60%)}92%,99%{transform:translateX(-80%)}100%{transform:translateX(0%)}}

/* ---- PIXEL BLOCK (Mario brick) --------------------------- */
.pixel-block {
  border: 4px solid;
  box-shadow: var(--block-shadow);
  image-rendering: pixelated;
}

/* ---- HEADER ---------------------------------------------- */
.site-header {
  background: var(--bg2);
  border-bottom: 4px solid var(--purple);
  box-shadow: 0 4px 0 #660099, var(--glow-p);
  position: sticky; top: 0; z-index: 200;
  animation: neonFlicker 10s infinite;
}
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; gap: 16px; flex-wrap: wrap;
}

/* LOGO */
.logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; animation: float 3s ease-in-out infinite;
}
.logo img {
  height: 52px; width: auto;
  filter: drop-shadow(0 0 12px var(--purple));
}
.logo-text {
  display: flex; flex-direction: column; gap: 3px;
}
.logo-name {
  font-family: var(--pixel);
  font-size: clamp(11px, 2vw, 18px);
  color: var(--cyan);
  text-shadow: var(--glow-c);
  letter-spacing: 3px;
}
.logo-tag {
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--pink);
  text-shadow: var(--glow-pk);
  letter-spacing: 2px;
}

/* SEARCH */
.search-form { display:flex; flex:1; max-width:500px; }
.search-form input {
  flex:1; background:var(--bg3); border:3px solid var(--purple);
  border-right:none; color:#eef; font-family:var(--orb); font-size:13px;
  padding:11px 16px; outline:none; transition:all .2s;
}
.search-form input::placeholder { color: #554477; }
.search-form input:focus { border-color:var(--cyan); box-shadow:var(--glow-c); }
.search-form button {
  background:var(--purple); color:#fff; border:3px solid var(--purple);
  font-family:var(--pixel); font-size:8px; padding:11px 16px; cursor:pointer;
  transition:all .2s; white-space:nowrap; box-shadow:var(--block-shadow);
  border-color:var(--purple);
}
.search-form button:hover { background:var(--cyan); border-color:var(--cyan); box-shadow:var(--glow-c); }

/* HEADER META */
.header-meta { font-size:11px; color:var(--cyan); text-align:right; line-height:2; }
.header-meta a { color:var(--yellow); text-decoration:none; font-weight:700; }
.header-meta a:hover { text-shadow:var(--glow-y); }

/* TICKER */
.ticker-wrap {
  background: linear-gradient(90deg, var(--purple), #8800cc, var(--purple));
  overflow:hidden; padding:6px 0; font-family:var(--pixel); font-size:8px; letter-spacing:1px; color:#fff;
}
.ticker-inner { display:inline-block; white-space:nowrap; animation:marquee 40s linear infinite; }
.ticker-inner span { margin:0 40px; }
.ticker-inner span::before { content:'★ '; color:var(--yellow); }

/* MAIN NAV */
.main-nav {
  background:var(--bg3); border-top:2px solid var(--border);
  padding:0 24px; display:flex; overflow:visible; gap:0;
}
.main-nav a {
  color:#8877aa; font-family:var(--pixel); font-size:8px; text-decoration:none;
  padding:13px 18px; border-right:2px solid var(--border); white-space:nowrap;
  transition:all .2s; letter-spacing:1px; position:relative;
}
.main-nav a::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  background:var(--purple); transform:scaleX(0); transition:transform .2s;
}
.main-nav a:hover, .main-nav a.active { color:var(--cyan); text-shadow:var(--glow-c); }
.main-nav a:hover::after, .main-nav a.active::after { transform:scaleX(1); }
.main-nav a:first-child { border-left:2px solid var(--border); }

/* ---- CONTAINER ------------------------------------------- */
.container { max-width:1300px; margin:0 auto; padding:0 20px; }

/* ---- HERO BANNER SLIDESHOW ------------------------------- */
.hero-banner {
  position:relative; overflow:hidden;
  border-bottom:4px solid var(--purple); box-shadow:0 4px 0 #330066;
  height: 420px;
}
.slides-track {
  display:flex; width:500%;
  animation: bannerSlide 20s ease-in-out infinite;
  height:100%;
}
.slide {
  flex:0 0 20%; height:100%; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* Slide backgrounds */
.slide-1 { background: linear-gradient(135deg, #1a0040 0%, #3a0080 40%, #200055 100%); }
.slide-2 { background: linear-gradient(135deg, #001540 0%, #003080 40%, #001555 100%); }
.slide-3 { background: linear-gradient(135deg, #402000 0%, #804000 40%, #552a00 100%); }
.slide-4 { background: linear-gradient(135deg, #003020 0%, #006040 40%, #002015 100%); }
.slide-5 { background: linear-gradient(135deg, #400020 0%, #800040 40%, #550030 100%); }

/* Pixel grid overlay on slides */
.slide::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 32px 32px;
}

/* Decorative pixel coins on slides */
.slide::after {
  content:'●'; position:absolute; font-size:60px; opacity:.06;
  color:var(--yellow); right:10%; top:15%;
  animation: coinSpin 2s linear infinite;
}

/* Slide pixel art stars decoration */
.slide-deco {
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.slide-deco span {
  position:absolute; font-size:20px; animation:bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px currentColor);
}

.slide-content {
  position:relative; z-index:2; text-align:center; padding:30px 40px;
  max-width:900px;
}
.slide-eyebrow {
  font-family:var(--pixel); font-size:9px; letter-spacing:4px;
  margin-bottom:16px; display:block;
}
.slide-title {
  font-family:var(--pixel); font-size:clamp(18px, 3.5vw, 36px);
  line-height:1.5; margin-bottom:16px; letter-spacing:2px;
}
.slide-sub {
  font-family:var(--orb); font-size:clamp(12px,1.5vw,16px);
  font-weight:400; letter-spacing:2px; margin-bottom:28px;
  opacity:.85;
}
.slide-cta {
  display:inline-block; font-family:var(--pixel); font-size:10px;
  padding:14px 28px; text-decoration:none; letter-spacing:1px;
  border:4px solid; transition:all .15s;
  box-shadow:6px 6px 0 rgba(0,0,0,0.5);
}
.slide-cta:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(0,0,0,0.5); }

/* Slide colour themes */
.slide-1 .slide-eyebrow { color:var(--yellow); text-shadow:var(--glow-y); }
.slide-1 .slide-title   { color:#fff; text-shadow:0 0 20px var(--purple), var(--glow-p); }
.slide-1 .slide-sub     { color:var(--cyan); }
.slide-1 .slide-cta     { background:var(--purple); color:#fff; border-color:var(--purple); }
.slide-1 .slide-cta:hover { background:transparent; color:var(--purple); }

.slide-2 .slide-eyebrow { color:var(--pink); text-shadow:var(--glow-pk); }
.slide-2 .slide-title   { color:var(--cyan); text-shadow:var(--glow-c); }
.slide-2 .slide-sub     { color:#aabbff; }
.slide-2 .slide-cta     { background:var(--cyan); color:var(--bg); border-color:var(--cyan); }
.slide-2 .slide-cta:hover { background:transparent; color:var(--cyan); }

.slide-3 .slide-eyebrow { color:var(--yellow); text-shadow:var(--glow-y); }
.slide-3 .slide-title   { color:var(--yellow); text-shadow:var(--glow-y); }
.slide-3 .slide-sub     { color:#ffcc88; }
.slide-3 .slide-cta     { background:var(--yellow); color:var(--bg); border-color:var(--yellow); }
.slide-3 .slide-cta:hover { background:transparent; color:var(--yellow); }

.slide-4 .slide-eyebrow { color:var(--green); }
.slide-4 .slide-title   { color:var(--green); text-shadow:0 0 20px var(--green); }
.slide-4 .slide-sub     { color:#88ffbb; }
.slide-4 .slide-cta     { background:var(--green); color:var(--bg); border-color:var(--green); }
.slide-4 .slide-cta:hover { background:transparent; color:var(--green); }

.slide-5 .slide-eyebrow { color:var(--pink); text-shadow:var(--glow-pk); }
.slide-5 .slide-title   { color:#fff; text-shadow:var(--glow-p); }
.slide-5 .slide-sub     { color:var(--pink); }
.slide-5 .slide-cta     { background:var(--pink); color:#fff; border-color:var(--pink); }
.slide-5 .slide-cta:hover { background:transparent; color:var(--pink); }

/* Slide dot indicators */
.banner-dots {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.banner-dots span {
  width:10px; height:10px; background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.3); cursor:pointer;
  transition:all .3s;
}
.banner-dots span.active { background:var(--purple); border-color:var(--purple); box-shadow:var(--glow-p); }

/* ---- SECTION TITLE --------------------------------------- */
.section-title {
  font-family:var(--pixel); font-size:clamp(10px,2vw,14px);
  color:var(--yellow); text-shadow:var(--glow-y);
  letter-spacing:3px; margin:44px 0 24px;
  display:flex; align-items:center; gap:16px;
}
.section-title::before,.section-title::after {
  content:''; flex:1; height:3px;
  background:linear-gradient(90deg,transparent,var(--yellow),transparent);
}
.section-title .star {
  display:inline-block; animation:bounce 1s ease-in-out infinite;
  color:var(--yellow); text-shadow:var(--glow-y);
}

/* ---- CATEGORY CARDS (Mario ? blocks) --------------------- */
.cat-section { margin-bottom: 50px; }
.cat-section-label {
  font-family:var(--pixel); font-size:9px; color:var(--purple);
  text-shadow:var(--glow-p); letter-spacing:3px; margin-bottom:14px;
  padding:10px 16px; background:var(--bg2); border-left:4px solid var(--purple);
  display:flex; align-items:center; gap:10px;
}
.cat-grid {
  display:grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap:8px;
}
.cat-card {
  background:var(--bg2); border:4px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  padding:20px 12px; text-align:center; text-decoration:none;
  color:var(--cyan); font-family:var(--pixel); font-size:7px;
  letter-spacing:1px; line-height:2; transition:all .15s;
  position:relative; overflow:hidden;
}
/* "?" block pattern on hover */
.cat-card::before {
  content:'?'; position:absolute; top:6px; right:8px;
  font-family:var(--pixel); font-size:10px; color:var(--yellow);
  opacity:0; transition:opacity .2s;
}
.cat-card:hover {
  border-color:var(--purple); color:#fff; background:var(--bg3);
  box-shadow:4px 4px 0 var(--purple), var(--glow-p);
  transform:translate(-2px,-2px);
}
.cat-card:hover::before { opacity:1; }
.cat-icon { font-size:22px; display:block; margin-bottom:8px; }
/* Cap SVG/image icons on desktop too — without this they render at
   intrinsic size and look huge when cells are wide. */
.cat-icon svg,
.cat-icon img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px;
  max-height: 44px;
}

/* ---- CATEGORY CARDS — mobile sizing -------------------- */
/* On mobile the SVG icons render at their intrinsic size which is huge.
   Force a sensible cap and tighten card padding so the grid fits 2-up. */
@media (max-width: 600px) {
  .cat-grid {
    --cols: 2 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
  }
  .cat-card {
    padding: 12px 6px;
    font-size: 6px;
    letter-spacing: 0.5px;
    line-height: 1.6;
    /* Ensure long category names don't clip — wrap and break if needed */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .cat-icon { margin-bottom: 4px; }
  .cat-icon svg,
  .cat-icon img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px;
    max-height: 36px;
  }
}

/* ---- PRODUCT GRID ---------------------------------------- */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:40px; }

/* ---- PRODUCT CARD (Mario block style) -------------------- */
.product-card {
  background:var(--bg2); border:4px solid var(--border);
  box-shadow: 4px 4px 0 #000;
  display:flex; flex-direction:column; text-decoration:none; color:#ccd;
  transition:all .15s; position:relative; overflow:hidden;
}
.product-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--purple), var(--cyan), var(--purple));
  transform:scaleX(0); transition:transform .3s; z-index:1;
}
.product-card:hover {
  border-color:var(--purple);
  box-shadow:6px 6px 0 var(--purple);
  transform:translate(-3px,-3px);
}
.product-card:hover::before { transform:scaleX(1); }

.card-badge {
  position:absolute; top:10px; left:0;
  font-family:var(--pixel); font-size:7px; padding:4px 10px; z-index:2;
}
.card-badge.promo  { background:var(--yellow); color:var(--bg); }
.card-badge.low    { background:var(--pink); color:#fff; box-shadow:var(--glow-pk); }
.card-badge.out    { background:var(--red);  color:#fff; }

.card-img {
  aspect-ratio:1; background:var(--bg3); display:flex;
  align-items:center; justify-content:center;
  overflow:hidden; border-bottom:3px solid var(--border); padding:14px;
  position:relative;
}
.card-img img {
  max-width:100%; max-height:180px; object-fit:contain;
  filter: drop-shadow(0 0 10px rgba(204,68,255,0.25)); transition:all .3s;
}
.product-card:hover .card-img img {
  filter: drop-shadow(0 0 18px rgba(68,170,255,0.6)) brightness(1.1);
  transform:scale(1.05);
}
.card-img .no-img {
  font-family:var(--pixel); font-size:7px; color:#332255;
  text-align:center; line-height:3;
}

.card-body { padding:14px; flex:1; display:flex; flex-direction:column; gap:8px; }

.card-brand {
  font-family:var(--pixel); font-size:7px; color:var(--purple);
  text-shadow:var(--glow-p); letter-spacing:2px;
}
.card-name {
  font-family:var(--orb); font-size:12px; color:#dde; line-height:1.5;
  flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.card-code { font-size:10px; color:#4a3a6a; font-family:var(--pixel); font-size:7px; }

/* Heart/life stock indicator */
.stock-lives { display:flex; gap:4px; align-items:center; }
.heart { font-size:14px; line-height:1; }
.heart.full  { filter:drop-shadow(0 0 4px var(--pink)); }
.heart.empty { opacity:.2; }
.stock-label { font-family:var(--pixel); font-size:7px; margin-left:6px; }
.stock-label.out  { color:var(--red); }
.stock-label.low  { color:var(--pink); }
.stock-label.med  { color:var(--yellow); }
.stock-label.high { color:var(--green); }

/* Coin price */
.card-price {
  font-family:var(--pixel); font-size:15px; color:var(--yellow);
  text-shadow:var(--glow-y); display:flex; align-items:center; gap:8px;
}
.card-price::before { content:'🪙'; font-size:14px; }

.card-actions { padding:12px 14px; border-top:3px solid var(--border); display:flex; gap:8px; }
.card-actions a {
  font-family:var(--pixel); font-size:7px; padding:9px 10px; text-decoration:none;
  transition:all .15s; flex:1; text-align:center; border:3px solid;
  box-shadow:3px 3px 0 rgba(0,0,0,0.5);
}
.card-actions a:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(0,0,0,0.5); }
.btn-view { color:var(--cyan); border-color:var(--cyan); background:transparent; }
.btn-view:hover { background:var(--cyan); color:var(--bg); box-shadow:3px 3px 0 #006699; }
.btn-wa { background:#128C7E; color:#fff; border-color:#128C7E; }
.btn-wa:hover { background:#25D366; border-color:#25D366; }

/* ---- SHOP LAYOUT ----------------------------------------- */
.shop-layout { display:grid; grid-template-columns:230px 1fr; gap:24px; margin-top:24px; align-items:start; }

/* SIDEBAR */
.sidebar { background:var(--bg2); border:4px solid var(--border); box-shadow:4px 4px 0 #000; position:sticky; top:100px; }
.sidebar-title {
  font-family:var(--pixel); font-size:8px; color:var(--bg);
  background:var(--purple); padding:12px 16px; letter-spacing:2px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.3);
}
.filter-group { padding:14px; border-bottom:2px solid var(--border); }
.filter-label { font-family:var(--pixel); font-size:7px; color:var(--cyan); letter-spacing:2px; margin-bottom:10px; display:block; }
.filter-select {
  width:100%; background:var(--bg); color:#ccd; border:3px solid var(--border);
  font-family:var(--orb); font-size:12px; padding:9px; cursor:pointer; outline:none; transition:all .2s;
}
.filter-select:focus { border-color:var(--purple); box-shadow:var(--glow-p); }
.filter-select option { background:var(--bg2); }
.sidebar-apply { padding:14px; }
.sidebar-apply button {
  width:100%; font-family:var(--pixel); font-size:8px; padding:12px;
  background:var(--purple); color:#fff; border:4px solid var(--purple);
  cursor:pointer; box-shadow:4px 4px 0 #330066; letter-spacing:1px; transition:all .15s;
}
.sidebar-apply button:hover { background:var(--bg); color:var(--purple); transform:translate(-1px,-1px); }
.clear-btn {
  display:block; margin:0 14px 14px; font-family:var(--pixel); font-size:7px; padding:10px;
  background:transparent; color:var(--pink); border:3px solid var(--pink); text-align:center;
  text-decoration:none; box-shadow:3px 3px 0 rgba(0,0,0,0.4); transition:all .15s;
}
.clear-btn:hover { background:var(--pink); color:#fff; }

/* RESULTS BAR */
.results-bar {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:2px solid var(--border); margin-bottom:20px; flex-wrap:wrap; gap:10px;
}
.results-count { font-family:var(--pixel); font-size:8px; color:var(--cyan); }
.results-count span { color:var(--yellow); }

/* ---- PAGINATION ------------------------------------------ */
.pagination { display:flex; gap:8px; justify-content:center; padding:30px 0; flex-wrap:wrap; }
.pagination a,.pagination span {
  font-family:var(--pixel); font-size:8px; padding:10px 14px;
  text-decoration:none; border:4px solid; transition:all .15s;
  box-shadow:4px 4px 0 rgba(0,0,0,0.4);
}
.pagination a { color:var(--cyan); border-color:var(--border); }
.pagination a:hover { border-color:var(--purple); color:var(--purple); box-shadow:4px 4px 0 var(--purple); transform:translate(-1px,-1px); }
.pagination span { background:var(--purple); color:#fff; border-color:var(--purple); }
.pagination .dots { border:none; box-shadow:none; color:#554477; }

/* ---- PRODUCT DETAIL -------------------------------------- */
.product-detail { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:24px; }
.product-image-box {
  background:var(--bg2); border:4px solid var(--border); box-shadow:6px 6px 0 #000;
  display:flex; align-items:center; justify-content:center; padding:30px; min-height:340px;
}
.product-image-box img { max-width:100%; max-height:420px; object-fit:contain; filter:drop-shadow(0 0 24px rgba(204,68,255,.4)); }
.product-info { display:flex; flex-direction:column; gap:18px; }
.product-brand { font-family:var(--pixel); font-size:9px; color:var(--purple); text-shadow:var(--glow-p); letter-spacing:3px; }
.product-title { font-family:var(--orb); font-size:clamp(16px,2.5vw,24px); color:#eef; line-height:1.5; font-weight:700; }
.product-sku { font-family:var(--pixel); font-size:8px; color:#4a3a6a; }
.product-price { font-family:var(--pixel); font-size:clamp(20px,3vw,32px); color:var(--yellow); text-shadow:var(--glow-y); display:flex; align-items:center; gap:10px; }
.product-price::before { content:'🪙'; font-size:24px; }
.product-price .was { font-size:13px; color:#666; text-decoration:line-through; }
.product-meta {
  background:var(--bg3); border:3px solid var(--border); padding:18px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.meta-item { display:flex; flex-direction:column; gap:5px; }
.meta-key { font-family:var(--pixel); font-size:7px; color:#4a3a6a; letter-spacing:2px; }
.meta-val { font-family:var(--orb); font-size:13px; color:#ccd; }
.product-desc { background:var(--bg3); border:2px solid var(--border); padding:16px; font-size:13px; color:#9988bb; line-height:1.9; }
.product-actions { display:flex; flex-direction:column; gap:12px; }
.product-actions .btn {
  width:100%; justify-content:center; font-family:var(--pixel); font-size:10px;
  padding:16px 20px; text-decoration:none; border:4px solid; letter-spacing:1px;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  box-shadow:5px 5px 0 rgba(0,0,0,0.5); transition:all .15s;
}
.product-actions .btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(0,0,0,0.5); }
.btn-purple { background:var(--purple); color:#fff; border-color:var(--purple); }
.btn-purple:hover { background:transparent; color:var(--purple); }
.btn-cyan { background:transparent; color:var(--cyan); border-color:var(--cyan); }
.btn-cyan:hover { background:var(--cyan); color:var(--bg); }
.btn-green { background:var(--green); color:var(--bg); border-color:var(--green); }
.btn-green:hover { background:transparent; color:var(--green); }

/* ---- BREADCRUMB ------------------------------------------ */
.breadcrumb { font-family:var(--pixel); font-size:7px; padding:16px 0; color:#4a3a6a; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb a { color:var(--cyan); text-decoration:none; }
.breadcrumb a:hover { text-shadow:var(--glow-c); }
.breadcrumb .sep { color:var(--purple); }

/* ---- NO RESULTS ------------------------------------------ */
.no-results { text-align:center; padding:80px 20px; }
.no-results .code { font-family:var(--pixel); font-size:48px; color:var(--red); text-shadow:0 0 20px var(--red); margin-bottom:16px; }
.no-results p { font-family:var(--pixel); font-size:9px; color:#4a3a6a; margin-bottom:24px; line-height:2.5; }

/* ---- SETUP BOX ------------------------------------------- */
.setup-box { border:4px dashed var(--yellow); padding:40px; text-align:center; margin:40px 0; box-shadow:inset 0 0 40px rgba(255,221,0,0.05); }
.setup-box h2 { font-family:var(--pixel); font-size:12px; color:var(--yellow); text-shadow:var(--glow-y); margin-bottom:20px; line-height:2; }
.setup-box ol { text-align:left; display:inline-block; line-height:3; font-size:13px; color:#8888aa; }
.setup-box code { background:var(--bg3); color:var(--cyan); padding:2px 8px; border:2px solid var(--border); }

/* ---- FOOTER ---------------------------------------------- */
.site-footer {
  background:var(--bg2); border-top:4px solid var(--purple);
  box-shadow:0 -4px 0 #330066, 0 -8px 30px rgba(204,68,255,0.1);
  margin-top:70px; padding:50px 24px 24px;
}
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px; margin-bottom:36px; }
.footer-col h4 { font-family:var(--pixel); font-size:9px; color:var(--purple); text-shadow:var(--glow-p); letter-spacing:2px; margin-bottom:18px; }
.footer-col a,.footer-col p { display:block; color:#6655aa; font-size:13px; text-decoration:none; line-height:2.4; transition:color .2s; }
.footer-col a:hover { color:var(--cyan); }
.footer-bottom { border-top:2px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-copy { font-family:var(--pixel); font-size:7px; color:#332255; }
.footer-copy span { color:var(--purple); }

/* ---- FLOATING WHATSAPP ----------------------------------- */
.float-wa {
  position:fixed; bottom:24px; right:24px;
  background:#25D366; color:#fff; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  font-size:28px; text-decoration:none; z-index:500;
  border:4px solid #128C7E; box-shadow:5px 5px 0 #0a5a0a;
  transition:all .2s; animation:bounce 2s ease-in-out infinite;
}
.float-wa:hover { transform:translate(-2px,-2px) scale(1.05); box-shadow:7px 7px 0 #0a5a0a; }

/* ---- RESPONSIVE ------------------------------------------ */
@media(max-width:900px) {
  .shop-layout { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .product-detail { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .header-top { padding:10px; flex-wrap:wrap; gap:10px; }
  .logo img { height:40px; }
  .logo-name { font-size:10px; }
  .hero-banner { height:300px; }
  .slide-title { font-size:14px; }
  .product-grid { grid-template-columns:repeat(2,1fr); }
  .main-nav { padding:0 10px; }
  .main-nav a { padding:10px 12px; font-size:7px; }
}

/* ---- CART BUTTON ----------------------------------------- */
.cart-btn {
  font-family:var(--pixel); font-size:12px; color:var(--yellow);
  text-decoration:none; padding:10px 16px; border:3px solid var(--yellow);
  box-shadow:3px 3px 0 #554400; transition:all .15s; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.cart-btn:hover { background:var(--yellow); color:var(--bg); transform:translate(-1px,-1px); }
.cart-count {
  background:var(--purple); color:#fff; font-family:var(--pixel); font-size:9px;
  padding:2px 6px; min-width:20px; text-align:center;
  box-shadow:var(--glow-p);
}

/* ---- CHECKOUT / CART PAGES ------------------------------- */
.checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:28px; margin-top:24px; }
@media(max-width:900px){ .checkout-layout { grid-template-columns:1fr; } }

.cart-table { width:100%; border-collapse:collapse; }
.cart-table th {
  font-family:var(--pixel); font-size:8px; color:var(--purple); letter-spacing:2px;
  padding:14px; text-align:left; border-bottom:3px solid var(--purple); background:var(--bg2);
}
.cart-table td { padding:14px; border-bottom:2px solid var(--border); vertical-align:middle; }
.cart-table tr:hover td { background:var(--bg3); }

.cart-img-cell img { width:70px; height:70px; object-fit:contain; filter:drop-shadow(0 0 6px rgba(204,68,255,.3)); }
.cart-name { font-size:13px; color:#dde; line-height:1.5; }
.cart-brand { font-family:var(--pixel); font-size:7px; color:var(--purple); margin-bottom:5px; }
.cart-price { font-family:var(--pixel); font-size:13px; color:var(--yellow); }
.qty-input {
  background:var(--bg); color:#ccd; border:3px solid var(--border); font-family:var(--pixel);
  font-size:11px; padding:8px; width:60px; text-align:center; outline:none;
}
.qty-input:focus { border-color:var(--purple); }
.remove-btn {
  font-family:var(--pixel); font-size:8px; color:var(--red); background:transparent;
  border:2px solid var(--red); padding:6px 10px; cursor:pointer; transition:all .15s;
}
.remove-btn:hover { background:var(--red); color:#fff; }

/* ORDER SUMMARY BOX */
.order-summary {
  background:var(--bg2); border:4px solid var(--border); box-shadow:4px 4px 0 #000;
  padding:24px; position:sticky; top:100px;
}
.order-summary h3 { font-family:var(--pixel); font-size:10px; color:var(--yellow); text-shadow:var(--glow-y); margin-bottom:20px; letter-spacing:2px; }
.summary-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:13px; }
.summary-row.total { font-family:var(--pixel); font-size:14px; color:var(--yellow); border-bottom:none; padding-top:16px; }
.summary-row.shipping-free { color:var(--green); }
.summary-row.shipping-free .val { font-family:var(--pixel); font-size:9px; }

/* FORM FIELDS */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){ .form-grid { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group.full { grid-column:1/-1; }
.form-label { display:block; font-family:var(--pixel); font-size:7px; color:var(--cyan); letter-spacing:2px; margin-bottom:8px; }
.form-input, .form-select {
  width:100%; box-sizing:border-box;
  background:var(--bg); color:#eef; border:3px solid var(--border);
  font-family:var(--orb); font-size:13px; padding:12px 14px; outline:none; transition:all .2s;
}
.form-input:focus, .form-select:focus { border-color:var(--purple); box-shadow:var(--glow-p); }
.form-input.error { border-color:var(--red); }
.form-error { font-family:var(--pixel); font-size:7px; color:var(--red); }

/* SECURE BADGE */
.secure-badge {
  background:var(--bg3); border:2px solid var(--border); padding:14px 16px;
  margin-top:16px; display:flex; align-items:center; gap:10px;
  font-family:var(--pixel); font-size:7px; color:#554477; letter-spacing:1px; line-height:2;
}
.secure-badge .lock { font-size:22px; filter:drop-shadow(0 0 6px var(--green)); }

/* SUCCESS / CANCEL PAGES */
.result-box { text-align:center; padding:60px 24px; max-width:600px; margin:0 auto; }
.result-icon { font-size:64px; margin-bottom:20px; }
.result-title { font-family:var(--pixel); font-size:clamp(14px,2vw,20px); margin-bottom:16px; line-height:1.6; }
.result-ref { font-family:var(--pixel); font-size:10px; color:var(--cyan); margin-bottom:24px; padding:12px; border:2px solid var(--cyan); display:inline-block; }

/* ============================================================
   FIXES: Cart, QTY, Logo, Sort
   ============================================================ */

/* FIX 1 — CART BUTTON (highly visible) */
.cart-btn {
  font-family: var(--pixel) !important;
  font-size: 10px !important;
  color: var(--bg) !important;
  background: var(--yellow) !important;
  text-decoration: none;
  padding: 10px 18px !important;
  border: 3px solid var(--yellow) !important;
  box-shadow: 4px 4px 0 #554400 !important;
  transition: all .15s;
  white-space: nowrap;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.cart-btn:hover {
  background: var(--bg) !important;
  color: var(--yellow) !important;
  transform: translate(-1px,-1px);
  box-shadow: 5px 5px 0 #554400 !important;
}
.cart-count {
  background: var(--purple) !important;
  color: #fff !important;
  font-family: var(--pixel);
  font-size: 9px !important;
  padding: 3px 7px !important;
  min-width: 22px;
  text-align: center;
  box-shadow: var(--glow-p);
}

/* FIX 2 — QTY CUSTOM STEPPER (hide ugly browser arrows) */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Stepper wrapper */
.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 3px solid var(--purple);
  box-shadow: 3px 3px 0 #330066;
  overflow: hidden;
}
.qty-stepper button {
  background: var(--purple);
  color: #fff;
  border: none;
  font-family: var(--pixel);
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s;
  line-height: 1;
  flex-shrink: 0;
}
.qty-stepper button:hover { background: #aa22ee; }
.qty-stepper input {
  background: var(--bg) !important;
  color: #eef !important;
  border: none !important;
  border-left: 2px solid var(--border) !important;
  border-right: 2px solid var(--border) !important;
  font-family: var(--pixel) !important;
  font-size: 12px !important;
  padding: 8px !important;
  width: 56px !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Cart table qty stepper */
.cart-table .qty-stepper { display: flex; }

/* FIX 3 — LOGO: better text fallback + SVG logo holder */
.logo-svg-fallback {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-name {
  font-family: var(--pixel);
  font-size: clamp(12px, 2.2vw, 20px);
  letter-spacing: 3px;
  line-height: 1;
}
.logo-name .gt { color: var(--cyan); text-shadow: var(--glow-c); }
.logo-name .ec { color: var(--purple); text-shadow: var(--glow-p); }
.logo-tag {
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--pink);
  text-shadow: var(--glow-pk);
  letter-spacing: 2px;
}

/* FIX 4 — SORT BAR */
.sort-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sort-label {
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--purple);
  letter-spacing: 2px;
  white-space: nowrap;
}
.sort-select {
  background: var(--bg2);
  color: var(--cyan);
  border: 3px solid var(--border);
  font-family: var(--pixel);
  font-size: 8px;
  padding: 8px 12px;
  cursor: pointer;
  outline: none;
  letter-spacing: 1px;
  transition: border-color .2s;
}
.sort-select:focus { border-color: var(--purple); }
.sort-select option { background: var(--bg2); }
.results-right {
  margin-left: auto;
  font-family: var(--pixel);
  font-size: 7px;
  color: #4a3a6a;
}

/* ── SLOW BANNER (was 20s) ──────────────────────────────────── */
.slides-track { animation: bannerSlide 32s ease-in-out infinite !important; }

/* ── BRAND CAROUSEL ─────────────────────────────────────────── */
.brands-section { margin: 0 0 50px; }
.brands-title {
  font-family: var(--pixel); font-size: 11px; color: var(--cyan);
  text-shadow: var(--glow-c); letter-spacing: 3px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.brands-title::before, .brands-title::after {
  content: ''; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.brands-viewport { overflow: hidden; position: relative; }
.brands-track {
  display: flex; gap: 12px;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.brand-card {
  flex: 0 0 160px; min-width: 160px;
  background: var(--bg2); border: 3px solid var(--border);
  padding: 16px 12px; text-align: center; cursor: pointer;
  text-decoration: none; transition: all .2s;
  box-shadow: 3px 3px 0 #000;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.brand-card:hover, .brand-card.active {
  border-color: var(--purple); box-shadow: 3px 3px 0 var(--purple);
  transform: translate(-1px,-1px);
}
.brand-card.active { background: #1a0040; }
.brand-initial {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel); font-size: 16px; color: #fff;
  box-shadow: 0 0 12px rgba(204,68,255,.4); flex-shrink: 0;
}
.brand-name {
  font-family: var(--pixel); font-size: 7px; color: var(--cyan);
  letter-spacing: 1px; line-height: 1.5; text-transform: uppercase;
}
.brand-count {
  font-family: var(--pixel); font-size: 7px; color: #4a3a6a;
}
.brands-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 14px; margin-top: 12px;
}
.brands-btn {
  font-family: var(--pixel); font-size: 12px;
  background: var(--bg2); color: var(--purple);
  border: 3px solid var(--purple); padding: 8px 16px;
  cursor: pointer; box-shadow: 3px 3px 0 #330066;
  transition: all .15s;
}
.brands-btn:hover { background: var(--purple); color: #fff; }
.brands-btn:disabled { opacity: .3; cursor: default; }
.brands-dots { display: flex; gap: 8px; }
.brands-dots span {
  width: 8px; height: 8px; background: var(--border);
  border: 2px solid var(--border); cursor: pointer; transition: all .2s;
}
.brands-dots span.active { background: var(--purple); border-color: var(--purple); }


/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive pass (≤600px)
   Fixes price wrapping, card cramping, action button overflow,
   stock-lives wrapping, and category-icon sizing.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── PRODUCT GRID ── */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 24px;
  }

  /* ── PRODUCT CARD BODY ── */
  .card-body {
    padding: 10px !important;
    gap: 5px !important;
    overflow: visible;
  }
  .card-brand {
    font-size: 6px !important;
    letter-spacing: 1px !important;
    /* Truncate long brand names instead of wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-name {
    font-size: 10px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;  /* 2 lines max so cards align */
    min-height: 2.7em;                 /* reserve space so price aligns */
  }
  .card-code {
    font-size: 6px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── STOCK LIVES ROW ── prevent wrapping that breaks card height */
  .stock-lives {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow: hidden;
  }
  .heart { font-size: 11px !important; }
  .stock-label {
    font-size: 6px !important;
    margin-left: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── PRICE — auto-scales to fit, never clips ── */
  .card-price {
    /* clamp(min, preferred, max) — vw scales with viewport so prices
       like R 38 999.00 always fit on the narrowest phones */
    font-size: clamp(9px, 3.2vw, 13px) !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex-wrap: nowrap !important;
    min-width: 0;
    letter-spacing: 0;
  }
  .card-price::before {
    font-size: clamp(8px, 2.8vw, 11px) !important;
    flex-shrink: 0;
  }

  /* ── ACTION BUTTONS — single column, bigger tap target ── */
  .card-actions {
    padding: 8px !important;
    gap: 5px !important;
  }
  .card-actions .btn-view,
  .card-actions a,
  .card-actions button {
    font-size: 6px !important;
    padding: 7px 5px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap;
  }

  /* ── CATEGORY GRID (homepage tiles) ── */
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .cat-card {
    padding: 12px 6px;
    font-size: 6px;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
  .cat-icon { margin-bottom: 4px; }
  .cat-icon svg,
  .cat-icon img {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px;
    max-height: 36px;
  }

  /* ── SECTION TITLES smaller on mobile ── */
  .section-title { font-size: 14px !important; letter-spacing: 2px; }
  .cat-section-label { font-size: 8px !important; padding: 8px 12px !important; }

  /* ── CART / CHECKOUT cards more compact ── */
  .order-summary,
  .cart-summary {
    padding: 14px !important;
  }

  /* ── PRODUCT DETAIL PAGE price ── */
  .product-price {
    font-size: 22px !important;
    white-space: nowrap;
  }

  /* ── BUTTONS in general — bigger tap target, smaller text ── */
  .btn { padding: 10px 14px !important; font-size: 8px !important; }
}

/* Even narrower phones (≤380px e.g. iPhone SE 1st gen, small Androids) */
@media (max-width: 380px) {
  .card-name { font-size: 9px !important; }
  /* card-price uses clamp() above — auto-scales, no override needed */
  .card-actions .btn-view,
  .card-actions a,
  .card-actions button { font-size: 5px !important; padding: 6px 3px !important; }
}

/* ── Nav links ── */
.gtnl { font-family:var(--pixel);font-size:8px;color:#8877aa;text-decoration:none;padding:0 14px;letter-spacing:1px;display:flex;align-items:center;border-right:2px solid var(--border);white-space:nowrap;min-height:44px;position:relative;transition:color .15s; }
.gtnl::after { content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--purple);transform:scaleX(0);transition:transform .2s; }
.gtnl:hover,.gtnl.active { color:var(--cyan);text-shadow:var(--glow-c); }
.gtnl:hover::after,.gtnl.active::after { transform:scaleX(1); }
.gtdd { position:relative;display:inline-flex;align-items:stretch; }
.gtdd>.gtnl { border-right:none;padding-right:4px; }
.gtarr { background:transparent;border:none;border-right:2px solid var(--border);color:#554477;font-size:9px;padding:0 10px;cursor:pointer;display:flex;align-items:center;min-height:44px;transition:color .15s,transform .2s; }
.gtarr:hover,.gtarr.open { color:var(--cyan); }
.gtarr.open { transform:rotate(180deg); }
.gtdp { display:none;position:fixed;z-index:99999;background:#0e0e28;border:3px solid #cc44ff;box-shadow:0 8px 32px rgba(204,68,255,.35),6px 6px 0 #000;padding:10px;grid-template-columns:repeat(3,1fr);gap:3px;min-width:380px;animation:gtDrop .15s ease; }
.gtdp.open { display:grid; }
.gtdp::before { content:'';grid-column:1/-1;display:block;height:3px;background:linear-gradient(90deg,#cc44ff,#44aaff,#cc44ff);margin:-10px -10px 6px; }
@keyframes gtDrop { from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
.gtdp a { font-family:var(--pixel);font-size:7px;color:#8877aa;text-decoration:none;padding:9px 10px;border:1px solid transparent;display:block;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .15s; }
.gtdp a:hover { color:#44aaff;background:#141438;border-color:#2a1a4a; }
#gt-ham { display:none;position:fixed;top:14px;right:14px;z-index:99999;background:#0e0e28;border:2px solid #cc44ff;padding:9px 11px;cursor:pointer;box-shadow:0 0 12px rgba(204,68,255,.4); }
#gt-ham span { display:block;width:22px;height:2px;background:#cc44ff;margin:5px 0;transition:all .25s; }
#gt-ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#gt-ham.open span:nth-child(2) { opacity:0; }
#gt-ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media(max-width:768px){
  #gt-ham{display:block !important}
  .header-top{padding-right:56px !important}
  .ticker-wrap{display:none}
  #gt-nav{display:none !important;position:fixed !important;top:0;left:0;right:0;bottom:0;z-index:9998;background:#08081a;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-top:60px}
  #gt-nav.mob-open{display:flex !important}
  #gt-nav .gtnl{padding:15px 22px !important;font-size:10px !important;border-right:none !important;border-bottom:1px solid #1a0a3a !important;min-height:auto !important;white-space:normal !important;flex:1}
  .gtnl::after{display:none !important}
  #gt-nav .gtdd{flex-direction:column;border-bottom:1px solid #1a0a3a}
  #gt-nav .gtdd>.gtnl{border-bottom:none !important}
  #gt-nav .gtarr{min-height:54px;padding:0 22px;border-left:1px solid #1a0a3a;border-right:none;font-size:12px;flex-shrink:0}
  #gt-nav .gtdp{position:static !important;top:auto !important;left:auto !important;width:100% !important;min-width:auto !important;border:none !important;border-top:1px solid #1a0a3a !important;box-shadow:none !important;animation:none !important;background:#0c0c22 !important;grid-template-columns:repeat(2,1fr) !important;padding:8px !important;gap:2px !important}
  #gt-nav .gtdp::before{display:none !important}
  #gt-nav .gtdp a{font-size:7px !important;padding:12px 10px !important;white-space:normal !important;overflow:visible !important;text-overflow:unset !important;color:#6655aa !important;border-bottom:1px solid #1a0a3a !important}
  #gt-nav .gtdp a:hover{color:#44aaff !important}
}

/* ── Smooth scroll + card hover ── */
html { scroll-behavior: smooth; }
.product-card { transition: transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(204,68,255,.25), 4px 4px 0 var(--purple); }