/* Main stylesheet (moved placeholder). Styles are currently inline in HTML files. */
/* ============================================================
   ERAVAULTX — STYLESHEET
   1. Tokens & Reset
   2. Utilities
   3. Chrome (header, nav, footer, progress)
   4. Hero
   5. Trust
   6. Categories
   7. Products
   8. Newsletter
   9. Cart, Modal, Toast
   10. Category page
   11. Product detail page
   12. Responsive
   ============================================================ */

/* ---------- 1. TOKENS & RESET ---------- */
:root{
  --bg:#07080b;
  --bg-soft:#0a0c11;
  --surface:#111419;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --text:#eef1f6;
  --muted:#98a1b2;
  --accent:#c9ff3d;
  --accent-ink:#0a0d02;
  --radius:22px;
  --max:1240px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0c10}
::-webkit-scrollbar-thumb{background:#22262e;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#333943}

/* ---------- 2. UTILITIES ---------- */
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:104px 0;position:relative}
.section-head{max-width:660px;margin-bottom:54px}
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;
}
.kicker::before{content:'';width:26px;height:1px;background:var(--accent);opacity:.6}
.section-title{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:.01em;
}
.section-sub{color:var(--muted);margin-top:16px;font-size:15px;max-width:520px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:999px;font-weight:600;font-size:14px;
  letter-spacing:.02em;cursor:pointer;border:1px solid transparent;
  transition:transform .28s var(--ease),background .28s,box-shadow .28s,border-color .28s,color .28s;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(201,255,61,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-full{width:100%}
.btn-lg{padding:16px 34px;font-size:15px}

.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 3. CHROME ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:600;
  background:linear-gradient(90deg,var(--accent),#7ee62e);
  box-shadow:0 0 14px rgba(201,255,61,.7);
}

.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:linear-gradient(180deg,rgba(7,8,11,.9),rgba(7,8,11,0));
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(9,10,14,.85);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom-color:var(--line);
}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:0 24px;height:74px;
  display:flex;align-items:center;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#7ee62e);
  color:var(--accent-ink);display:grid;place-items:center;
  font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:.5px;
  box-shadow:0 6px 18px rgba(201,255,61,.25);
}
.logo-text{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.07em}
.logo-text em{font-style:normal;color:var(--accent)}

.nav{display:flex;gap:4px;margin-right:auto}
.nav a{
  position:relative;padding:9px 14px;border-radius:99px;font-size:13.5px;
  font-weight:500;color:var(--muted);transition:color .25s,background .25s;
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}

.actions{display:flex;align-items:center;gap:10px;margin-left:auto}

.search{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:14px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.search input{
  width:210px;height:42px;padding:0 34px 0 38px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  outline:none;font-size:13.5px;
  transition:width .35s var(--ease),border-color .3s,background .3s,box-shadow .3s;
}
.search input::placeholder{color:#6b7484}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{
  width:272px;border-color:rgba(201,255,61,.5);
  background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(201,255,61,.08);
}
.search-clear{
  position:absolute;right:9px;width:22px;height:22px;border-radius:50%;
  display:none;place-items:center;color:var(--muted);font-size:11px;line-height:1;
  background:rgba(255,255,255,.08);transition:.2s;
}
.search-clear:hover{background:rgba(255,255,255,.16);color:#fff}
.search.has-value .search-clear{display:grid}

.search-results{
  position:absolute;top:calc(100% + 10px);left:0;width:352px;
  background:#0f1218;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);padding:8px;max-height:380px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s,transform .25s,visibility .25s;z-index:60;
}
.search-results.open{opacity:1;visibility:visible;transform:none}
.sr-item{
  display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;
  cursor:pointer;transition:background .2s;
}
.sr-item:hover{background:rgba(255,255,255,.06)}
.sr-thumb{
  width:44px;height:50px;border-radius:9px;flex-shrink:0;padding:4px;
  background:radial-gradient(circle at 50% 25%,#1c2230,#0b0e13 75%);
  display:grid;place-items:center;
}
.sr-info{min-width:0}
.sr-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:11.5px;color:var(--muted)}
.sr-price{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.sr-empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:13px}

.icon-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text);transition:.25s;position:relative;flex-shrink:0;
}
.icon-btn:hover{background:rgba(255,255,255,.1);border-color:var(--line-strong);transform:translateY(-1px)}
.icon-btn:active{transform:scale(.95)}

.cart-count{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:99px;background:var(--accent);color:var(--accent-ink);
  font-size:11px;font-weight:800;display:grid;place-items:center;
  transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1);
}
.cart-count.show{transform:scale(1)}
.cart-count.pop{animation:pop .45s ease}
@keyframes pop{50%{transform:scale(1.4)}}

.menu-btn,.search-toggle{display:none}

.mobile-nav{
  position:fixed;inset:0;z-index:190;padding:110px 32px 44px;
  background:rgba(7,8,11,.98);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;
  transform:translateY(-100%);transition:transform .55s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.mobile-nav.open{transform:none;pointer-events:auto}
.mobile-nav a{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,9vw,38px);
  letter-spacing:.03em;padding:14px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s;
}
.mobile-nav a:hover{color:var(--accent)}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav.open a:nth-child(1){transition-delay:.08s}
.mobile-nav.open a:nth-child(2){transition-delay:.14s}
.mobile-nav.open a:nth-child(3){transition-delay:.20s}
.mobile-nav.open a:nth-child(4){transition-delay:.26s}
.mobile-nav.open a:nth-child(5){transition-delay:.32s}
.mobile-nav.open a:nth-child(6){transition-delay:.38s}

.footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:72px 0 34px}
.footer-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;
  border-bottom:1px solid var(--line);
}
.footer-brand p{color:var(--muted);font-size:13.5px;margin:18px 0 22px;max-width:290px;line-height:1.7}
.socials{display:flex;gap:10px}
.socials a{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);transition:.25s;
}
.socials a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-3px)}
.footer-col h5{
  font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);margin-bottom:18px;
}
.footer-col a{
  display:block;font-size:13.5px;color:var(--muted);padding:7px 0;
  transition:color .25s,transform .25s;
}
.footer-col a:hover{color:var(--accent);transform:translateX(4px)}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:26px;font-size:12.5px;color:#6b7484;
}

/* ---------- 4. HERO ---------- */
.hero{position:relative;padding:158px 0 90px;overflow:hidden;isolation:isolate}
.hero::before{
  content:'';position:absolute;inset:-25% -12% auto -12%;height:130%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(920px 620px at 78% 24%, rgba(201,255,61,.13), transparent 62%),
    radial-gradient(780px 540px at 6% 72%, rgba(110,80,255,.15), transparent 66%);
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 50% 38%,#000,transparent 76%);
}
.hero-slides{display:grid}
.slide{
  grid-area:1/1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:56px;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .85s ease;
}
.slide.active{opacity:1;pointer-events:auto}

.slide-copy > *{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.slide.active .slide-copy > *{opacity:1;transform:none}
.slide.active .slide-copy > *:nth-child(1){transition-delay:.08s}
.slide.active .slide-copy > *:nth-child(2){transition-delay:.18s}
.slide.active .slide-copy > *:nth-child(3){transition-delay:.28s}
.slide.active .slide-copy > *:nth-child(4){transition-delay:.38s}
.slide.active .slide-copy > *:nth-child(5){transition-delay:.48s}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
  border-radius:99px;border:1px solid rgba(201,255,61,.28);
  background:rgba(201,255,61,.07);color:var(--accent);
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.hero-eyebrow i{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

.hero-title{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(3rem,7.4vw,5.9rem);line-height:.92;letter-spacing:.005em;
  margin:20px 0;
}
.hero-title em{font-style:normal;color:var(--accent);display:inline-block}
.hero-text{color:var(--muted);font-size:15.5px;max-width:490px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:flex;gap:38px;flex-wrap:wrap}
.stat b{display:block;font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.02em;line-height:1.1}
.stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}

.slide-visual{position:relative;display:grid;place-items:center;min-height:430px}
.slide-visual{
  opacity:0;transform:scale(.92) translateY(22px);
  transition:opacity .95s var(--ease) .18s,transform .95s var(--ease) .18s;
}
.slide.active .slide-visual{opacity:1;transform:none}

.jersey-stage{position:relative;width:min(430px,86%);aspect-ratio:1/1;display:grid;place-items:center}
.jersey-stage::before{
  content:'';position:absolute;width:76%;height:76%;border-radius:50%;
  background:radial-gradient(circle,var(--glow,rgba(201,255,61,.3)),transparent 66%);
  filter:blur(34px);
}
.jersey-stage::after{
  content:'';position:absolute;width:66%;height:66%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.11);
  animation:spin 30s linear infinite;
}
.jersey-stage svg{
  width:74%;height:auto;position:relative;z-index:1;
  filter:drop-shadow(0 34px 46px rgba(0,0,0,.65));
  animation:float 6.5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-9px) rotate(-1.2deg)}50%{transform:translateY(9px) rotate(1.2deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-controls{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;margin-top:52px;
}
.dots{display:flex;gap:9px}
.dot{
  width:26px;height:3px;border-radius:99px;background:rgba(255,255,255,.2);
  transition:width .35s var(--ease),background .35s;cursor:pointer;
}
.dot.active{background:var(--accent);width:46px;box-shadow:0 0 12px rgba(201,255,61,.6)}
.arrows{display:flex;gap:10px}
.arrow{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03);
  color:var(--text);transition:.28s;
}
.arrow:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px)}

/* ---------- 5. TRUST ---------- */
.trust{padding:96px 0 104px;background:linear-gradient(180deg,#0a0c11,#07080b)}
.trust-card{
  position:relative;text-align:center;padding:66px 32px 58px;
  border-radius:30px;border:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(620px 220px at 50% 0%, rgba(201,255,61,.12), transparent 72%),
    linear-gradient(180deg,#101319,#0a0d12);
}
.trust-card::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.trust-shield{
  width:56px;height:56px;margin:0 auto 24px;border-radius:18px;
  display:grid;place-items:center;
  background:rgba(201,255,61,.1);border:1px solid rgba(201,255,61,.3);
  color:var(--accent);
}
.trust-statement{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:clamp(1.6rem,3.9vw,2.9rem);line-height:1.16;
  letter-spacing:.012em;max-width:920px;margin:0 auto;
}
.trust-statement .hl{color:var(--accent)}
.trust-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:30px}
.trust-pills span{
  padding:8px 16px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.03);
}
.trust-pills span b{color:var(--accent);margin-right:5px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.trust-item{
  padding:30px 26px;border-radius:20px;border:1px solid var(--line);
  background:linear-gradient(180deg,#0f1217,#0a0c11);
  transition:transform .45s var(--ease),border-color .35s;
}
.trust-item:hover{transform:translateY(-6px);border-color:rgba(201,255,61,.3)}
.trust-item h4{font-size:15px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:9px}
.trust-item h4::before{
  content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 10px rgba(201,255,61,.7);flex-shrink:0;
}
.trust-item p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* ---------- 6. CATEGORIES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cat-card{
  position:relative;display:flex;flex-direction:column;min-height:430px;
  border-radius:26px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#111419,#0a0d12);
  transition:transform .55s var(--ease),border-color .4s,box-shadow .5s;
}
.cat-card:hover{
  transform:translateY(-9px);border-color:rgba(201,255,61,.34);
  box-shadow:0 34px 64px -26px rgba(0,0,0,.85);
}
.cat-media{position:relative;flex:1;display:grid;place-items:center;padding:38px;overflow:hidden}
.cat-media::before{
  content:'';position:absolute;width:72%;aspect-ratio:1;border-radius:50%;
  background:var(--glow,rgba(201,255,61,.22));filter:blur(52px);
  opacity:.6;transition:opacity .55s,transform .55s var(--ease);
}
.cat-card:hover .cat-media::before{opacity:1;transform:scale(1.18)}
.cat-media svg{
  width:min(180px,62%);position:relative;z-index:1;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.6));
  transition:transform .6s var(--ease);
}
.cat-card:hover .cat-media svg{transform:scale(1.08) rotate(-3.5deg)}
.cat-body{padding:24px 26px 28px;border-top:1px solid var(--line);background:rgba(8,10,14,.5)}
.cat-count{font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);opacity:.85}
.cat-body h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:27px;letter-spacing:.03em;margin:8px 0}
.cat-body p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.cat-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);transition:gap .3s var(--ease),color .3s}
.cat-card:hover .cat-link{gap:14px;color:var(--accent)}

/* ---------- 7. PRODUCTS ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product-card{
  position:relative;display:flex;flex-direction:column;
  border-radius:26px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#111419,#0a0d12);
  transition:transform .55s var(--ease),border-color .4s,box-shadow .5s;
}
.product-card:hover{
  transform:translateY(-9px);border-color:rgba(201,255,61,.3);
  box-shadow:0 34px 64px -26px rgba(0,0,0,.85);
}
.product-media{
  position:relative;aspect-ratio:4/3.5;display:grid;place-items:center;padding:28px;
  background:radial-gradient(circle at 50% 18%, var(--pc,#1b2130), #0a0c11 72%);
  overflow:hidden;
}
.product-media::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 120%, rgba(201,255,61,.1), transparent 60%);
  opacity:0;transition:opacity .5s;
}
.product-card:hover .product-media::after{opacity:1}
.product-media svg{
  width:min(178px,62%);position:relative;z-index:1;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.6));
  transition:transform .6s var(--ease);
}
.product-card:hover .product-media svg{transform:translateY(-9px) scale(1.05)}

.product-tag{
  position:absolute;top:16px;left:16px;z-index:2;padding:6px 12px;border-radius:99px;
  font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  background:rgba(201,255,61,.14);color:var(--accent);
  border:1px solid rgba(201,255,61,.32);backdrop-filter:blur(8px);
}
.wish-btn{
  position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:var(--muted);
  background:rgba(12,14,19,.6);border:1px solid var(--line);
  backdrop-filter:blur(10px);transition:.25s;
}
.wish-btn:hover{color:#ff5f7a;border-color:rgba(255,95,122,.5);transform:scale(1.08)}
.wish-btn.on{color:#ff5f7a;background:rgba(255,95,122,.14);border-color:rgba(255,95,122,.5)}

.product-info{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.product-cat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.product-name{font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;transition:color .25s}
a.product-name:hover{color:var(--accent)}
.rating{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.rating b{color:#ffc94d;font-weight:600}
.price-row{display:flex;align-items:baseline;gap:10px;margin-top:6px;flex-wrap:wrap}
.price{font-family:'Bebas Neue',sans-serif;font-size:27px;letter-spacing:.02em;line-height:1}
.old{font-size:13px;color:#6b7484;text-decoration:line-through}
.disc{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--accent);background:rgba(201,255,61,.12);padding:3px 9px;border-radius:99px}
.product-info .btn{margin-top:14px}

/* ---------- 8. NEWSLETTER ---------- */
.newsletter{padding:0 0 104px}
.news-card{
  position:relative;border-radius:30px;padding:62px 44px;overflow:hidden;
  border:1px solid var(--line);text-align:center;
  background:
    radial-gradient(700px 240px at 50% 0%, rgba(201,255,61,.13), transparent 72%),
    linear-gradient(180deg,#101319,#0a0d12);
}
.news-card h2{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.05;letter-spacing:.012em}
.news-card p{color:var(--muted);font-size:14.5px;margin:14px auto 30px;max-width:480px}
.news-form{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.news-form input{
  flex:1;min-width:220px;height:52px;padding:0 22px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  outline:none;font-size:14px;transition:border-color .3s,box-shadow .3s,background .3s;
}
.news-form input::placeholder{color:#6b7484}
.news-form input:focus{border-color:rgba(201,255,61,.5);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(201,255,61,.08)}
.news-form .btn{height:52px}

/* ---------- 9. CART, MODAL, TOAST ---------- */
.overlay{
  position:fixed;inset:0;z-index:300;background:rgba(3,4,6,.72);
  backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.4s;
}
.overlay.open{opacity:1;visibility:visible}

.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:320;
  background:#0b0d12;border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(105%);transition:transform .55s cubic-bezier(.65,0,.35,1);
  box-shadow:-30px 0 70px rgba(0,0,0,.6);
}
.cart-drawer.open{transform:none}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px;border-bottom:1px solid var(--line);
}
.cart-head h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:24px;letter-spacing:.05em}
.cart-head span{font-size:12px;color:var(--muted);margin-left:8px}
.cart-close{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--muted);transition:.25s;
}
.cart-close:hover{background:rgba(255,255,255,.08);color:#fff}
.cart-items{flex:1;overflow-y:auto;padding:8px 24px}
.ci{display:grid;grid-template-columns:66px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.ci-thumb{
  width:66px;height:74px;border-radius:14px;display:grid;place-items:center;padding:6px;
  background:radial-gradient(circle at 50% 25%,var(--pc,#1b2130),#0a0c11 76%);
}
.ci-name{font-size:13.5px;font-weight:600;line-height:1.35}
.ci-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.ci-price{font-size:14px;font-weight:700;color:var(--accent);margin-top:8px}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.ci-remove{font-size:16px;color:#5c6573;line-height:1;transition:.2s}
.ci-remove:hover{color:#ff5f7a}
.qty{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.qty button{width:28px;height:28px;display:grid;place-items:center;font-size:14px;color:var(--muted);transition:.2s}
.qty button:hover{background:rgba(255,255,255,.08);color:#fff}
.qty span{min-width:22px;text-align:center;font-size:12.5px;font-weight:600}

.cart-empty{flex:1;display:grid;place-items:center;text-align:center;padding:40px 24px}
.cart-empty svg{color:#2a2f3a;margin:0 auto 18px}
.cart-empty h4{font-size:16px;font-weight:600;margin-bottom:8px}
.cart-empty p{font-size:13px;color:var(--muted);margin-bottom:22px}

.cart-foot{padding:22px 24px 26px;border-top:1px solid var(--line);background:#0d1015}
.cart-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.cart-row span:first-child{font-size:13.5px;color:var(--muted)}
.cart-row span:last-child{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:.02em}
.cart-note{font-size:11.5px;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:7px}
.cart-note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)}

.modal{position:fixed;inset:0;z-index:340;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:.35s}
.modal.open{opacity:1;visibility:visible}
.modal-card{
  position:relative;width:min(900px,100%);max-height:90vh;overflow-y:auto;
  display:grid;grid-template-columns:1fr 1fr;
  background:#0d1015;border:1px solid var(--line);border-radius:26px;
  box-shadow:var(--shadow);
  transform:scale(.94) translateY(18px);transition:transform .48s var(--ease);
}
.modal.open .modal-card{transform:none}
.modal-close{
  position:absolute;top:16px;right:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(12,14,19,.7);
  border:1px solid var(--line);color:var(--muted);backdrop-filter:blur(10px);transition:.25s;
}
.modal-close:hover{background:rgba(255,255,255,.1);color:#fff}
.modal-media{
  display:grid;place-items:center;padding:44px 32px;min-height:340px;
  background:radial-gradient(circle at 50% 30%,var(--pc,#1b2130),#0a0c11 74%);
  border-radius:26px 0 0 26px;
}
.modal-media svg{width:min(230px,80%);filter:drop-shadow(0 26px 34px rgba(0,0,0,.6))}
.modal-body{padding:40px 36px}
.modal-body .product-cat{display:block;margin-bottom:10px}
.modal-body h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.02em;line-height:1.1;margin-bottom:12px}
.modal-body .rating{margin-bottom:16px}
.modal-body .desc{font-size:13.5px;color:var(--muted);line-height:1.7;margin-bottom:24px}
.opt-label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:block}
.sizes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.size-btn{
  min-width:46px;height:42px;padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:13px;font-weight:600;color:var(--muted);transition:.25s;
}
.size-btn:hover{border-color:var(--line-strong);color:var(--text)}
.size-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.modal-price{display:flex;align-items:baseline;gap:12px;margin-bottom:22px}
.modal-price .price{font-size:34px}
.modal-actions{display:flex;gap:12px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:150px}

.toast-wrap{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:400;
  display:flex;flex-direction:column;gap:10px;align-items:center;
  pointer-events:none;padding:0 16px;width:max-content;max-width:100%;
}
.toast{
  display:flex;align-items:center;gap:11px;padding:14px 22px;border-radius:14px;
  background:rgba(15,18,24,.96);border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  font-size:13.5px;font-weight:500;box-shadow:var(--shadow);
  animation:toastIn .42s var(--ease);
}
.toast.out{animation:toastOut .35s var(--ease) forwards}
.toast svg{color:var(--accent);flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateY(22px) scale(.94)}}
@keyframes toastOut{to{opacity:0;transform:translateY(14px) scale(.96)}}

/* ---------- 10. CATEGORY PAGE ---------- */
.page-hero{padding:140px 0 10px}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:20px}
.breadcrumb a{transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:#4d5563}
.breadcrumb .cur{color:var(--text)}

.filter-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:32px;padding-bottom:22px;border-bottom:1px solid var(--line);
}
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border-radius:99px;font-size:13px;font-weight:600;
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
  transition:.25s;
}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.sort{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.sort select{
  height:42px;padding:0 38px 0 16px;border-radius:99px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  outline:none;font-size:13.5px;color:var(--text);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1b2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
  transition:border-color .25s;
}
.sort select:focus{border-color:rgba(201,255,61,.5)}
.sort select option{background:#0f1218;color:var(--text)}

.empty-state{padding:80px 20px;text-align:center}
.empty-state h3{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:28px;margin-bottom:8px}
.empty-state p{color:var(--muted);font-size:14px}

/* ---------- 11. PRODUCT DETAIL ---------- */
.pd{padding:30px 0 90px}
.pd-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.pd-media{
  position:sticky;top:104px;
  border-radius:26px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(circle at 50% 30%, var(--pc,#1b2130), #0a0c11 74%);
  display:grid;place-items:center;padding:60px 40px;aspect-ratio:1/1.05;
}
.pd-media svg{width:min(340px,78%);filter:drop-shadow(0 30px 44px rgba(0,0,0,.65))}

.pd-tag{
  display:inline-block;padding:6px 14px;border-radius:99px;margin-bottom:16px;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(201,255,61,.12);color:var(--accent);border:1px solid rgba(201,255,61,.3);
}
.pd-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.05;letter-spacing:.015em}
.pd-rating{display:flex;align-items:center;gap:8px;margin:14px 0 22px;font-size:13px;color:var(--muted)}
.pd-rating b{color:#ffc94d}
.pd-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.pd-price .price{font-size:44px}
.pd-desc{font-size:14.5px;color:var(--muted);line-height:1.75;margin-bottom:30px}

.pd-block{margin-bottom:28px}
.pd-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.size-guide{font-size:12px;color:var(--muted);transition:color .2s}
.size-guide:hover{color:var(--accent)}

.qty-big{display:flex;align-items:center;border:1px solid var(--line);border-radius:99px;overflow:hidden;width:fit-content}
.qty-big button{width:44px;height:44px;display:grid;place-items:center;font-size:17px;color:var(--muted);transition:.2s}
.qty-big button:hover{background:rgba(255,255,255,.08);color:#fff}
.qty-big span{min-width:44px;text-align:center;font-size:15px;font-weight:600}

.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.pd-actions .btn{flex:1;min-width:170px}

.pd-meta{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:12px}
.pd-meta div{display:flex;gap:10px;font-size:13px;color:var(--muted)}
.pd-meta div b{color:var(--text);font-weight:600;min-width:110px;flex-shrink:0}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width:1100px){
  .search input{width:170px}
  .search input:focus{width:220px}
  .nav a{padding:9px 11px;font-size:13px}
}
@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:grid}
  .search-toggle{display:grid}

  .search{display:none;position:absolute;top:calc(100% + 6px);left:16px;right:16px;width:auto}
  .search.open{display:flex}
  .search input{width:100%;height:46px}
  .search input:focus{width:100%}
  .search-results{width:auto;left:0;right:0}

  .hero{padding:126px 0 78px}
  .slide{grid-template-columns:1fr;gap:30px;text-align:center}
  .slide-visual{order:1;min-height:320px}
  .slide-copy{order:2}
  .hero-text{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-stats{justify-content:center;gap:30px}
  .hero-controls{margin-top:44px}
  .jersey-stage{width:min(330px,82%)}

  .trust-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{min-height:auto}
  .cat-media{padding:42px}

  .footer-top{grid-template-columns:1fr 1fr;gap:34px}
  .footer-brand{grid-column:1/-1}

  .modal-card{grid-template-columns:1fr}
  .modal-media{border-radius:26px 26px 0 0;padding:36px 24px;min-height:260px}
  .modal-body{padding:30px 24px}

  .pd-wrap{grid-template-columns:1fr;gap:34px}
  .pd-media{position:static;aspect-ratio:4/3.4;padding:44px 24px}
}
@media (max-width:1024px) and (min-width:681px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .container{padding:0 18px}
  .header-inner{padding:0 16px;gap:14px}
  .logo-text{font-size:19px}
  .logo-mark{width:31px;height:31px;font-size:14px}
  .section{padding:76px 0}
  .section-head{margin-bottom:38px}
  .product-grid{grid-template-columns:1fr}
  .hero{padding:112px 0 64px}
  .hero-stats{gap:22px}
  .stat b{font-size:22px}
  .trust-card{padding:48px 20px 42px;border-radius:24px}
  .news-card{padding:46px 22px;border-radius:24px}
  .news-form .btn{width:100%}
  .footer-top{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center;justify-content:center}
  .cart-drawer{width:100%}
  .toast-wrap{width:100%}
  .toast{width:100%;justify-content:center}
  .page-hero{padding:120px 0 0}
  .pd-actions .btn{min-width:100%}
  .pd-media{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* ============================================================
   NEW ADDITIONS — Fan Base section, logo, reviews page
   Paste this at the very bottom of css/style.css
   ============================================================ */

/* ---------- LOGO (matches the eravaultx wordmark) ---------- */
.logo-text{
  font-family:'Inter',sans-serif;
  font-size:25px;
  font-weight:800;
  letter-spacing:-.028em;
  color:#fff;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  transition:opacity .25s;
}
.logo:hover .logo-text{opacity:.85}
.footer-brand .logo-text{font-size:28px}

/* ---------- FAN BASE SECTION (shown first on homepage) ---------- */
.fanbase{
  position:relative;
  padding:110px 0 60px;
  background:
    radial-gradient(700px 320px at 15% 0%, rgba(201,255,61,.09), transparent 65%),
    linear-gradient(180deg,#0a0c11,#07080b);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.fanbase-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:36px;
}
.fanbase-head > div{max-width:560px}
.fanbase-sub{
  font-size:14px;color:var(--muted);max-width:340px;line-height:1.6;
  padding-bottom:8px;
}

.fanbase-scroll{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.fan-card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#111419,#0a0d12);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;
  cursor:pointer;
}
.fan-card:hover{
  transform:translateY(-7px);
  border-color:rgba(201,255,61,.34);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.85);
}
.fan-rank{
  position:absolute;top:12px;left:12px;z-index:3;
  padding:6px 12px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  background:rgba(201,255,61,.16);color:var(--accent);
  border:1px solid rgba(201,255,61,.36);
  backdrop-filter:blur(10px);
}
.fan-media{
  aspect-ratio:1/1;display:grid;place-items:center;padding:22px;
  background:radial-gradient(circle at 50% 22%, var(--pc,#1b2130), #0a0c11 74%);
  overflow:hidden;
}
.fan-media svg{
  width:min(140px,72%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));
  transition:transform .55s var(--ease);
}
.fan-card:hover .fan-media svg{transform:translateY(-8px) scale(1.06)}

.fan-info{
  padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line);
}
.fan-name{
  font-size:13.5px;font-weight:600;line-height:1.35;
  letter-spacing:-.005em;
}
.fan-votes{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--accent);font-weight:600;
}
.fan-price-row{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.fan-price-row .price{font-size:22px}
.fan-btn{padding:10px 16px;font-size:12.5px;margin-top:10px}

/* ---------- REVIEWS PAGE ---------- */
.reviews-overview{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:16px;
}
.review-stat{
  padding:26px 24px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#101319,#0a0d12);
  transition:transform .45s var(--ease),border-color .35s;
}
.review-stat:hover{transform:translateY(-5px);border-color:rgba(201,255,61,.3)}
.review-stat-hero{
  background:
    radial-gradient(360px 140px at 20% 0%, rgba(201,255,61,.16), transparent 70%),
    linear-gradient(180deg,#101319,#0a0d12);
  border-color:rgba(201,255,61,.22);
}
.rs-big{
  font-family:'Bebas Neue',sans-serif;font-size:56px;
  line-height:1;letter-spacing:.01em;
}
.rs-num{
  font-family:'Bebas Neue',sans-serif;font-size:34px;
  line-height:1;letter-spacing:.02em;
}
.rs-stars{
  color:#ffc94d;font-size:15px;letter-spacing:3px;margin:8px 0 10px;
}
.rs-label{
  font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text);margin-bottom:4px;
}
.rs-sub{font-size:12.5px;color:var(--muted)}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.review-card{
  padding:26px;border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#101319,#0a0d12);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .45s var(--ease),border-color .35s;
}
.review-card:hover{transform:translateY(-6px);border-color:rgba(201,255,61,.28)}

.review-card-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.reviewer{display:flex;align-items:center;gap:12px;min-width:0}
.reviewer-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(201,255,61,.22),rgba(201,255,61,.06));
  color:var(--accent);
  font-weight:800;font-size:13px;letter-spacing:.02em;
  border:1px solid rgba(201,255,61,.3);
}
.reviewer-name{font-size:13.5px;font-weight:700;line-height:1.2}
.reviewer-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted);margin-top:3px;
}
.verified{color:var(--accent);font-weight:700}

.review-stars{
  color:#ffc94d;font-size:14px;letter-spacing:2px;white-space:nowrap;
  flex-shrink:0;
}

.review-title{
  font-family:'Bebas Neue',sans-serif;font-weight:400;
  font-size:20px;letter-spacing:.02em;line-height:1.15;
}
.review-text{
  font-size:13.5px;color:var(--muted);line-height:1.7;flex:1;
}

.review-product{
  display:flex;align-items:center;gap:12px;
  padding:12px;border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  transition:border-color .25s,background .25s,transform .25s;
}
.review-product:hover{
  border-color:rgba(201,255,61,.4);
  background:rgba(201,255,61,.05);
  transform:translateX(2px);
}
.rp-thumb{
  width:46px;height:52px;border-radius:10px;flex-shrink:0;padding:4px;
  background:radial-gradient(circle at 50% 25%, var(--pc,#1b2130), #0a0c11 76%);
  display:grid;place-items:center;
}
.rp-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.rp-info .product-cat{font-size:10px}
.rp-name{
  font-size:12.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rp-arrow{color:var(--muted);flex-shrink:0;transition:color .25s,transform .25s}
.review-product:hover .rp-arrow{color:var(--accent);transform:translateX(3px)}

.review-foot{
  padding-top:6px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);
}
.helpful{display:inline-flex;align-items:center;gap:6px}

/* ---------- REVIEW FORM ---------- */
.review-form-card{
  padding:52px 44px;border-radius:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(201,255,61,.09), transparent 70%),
    linear-gradient(180deg,#101319,#0a0d12);
}
.review-form-head{margin-bottom:32px;max-width:520px}
.review-form{display:flex;flex-direction:column;gap:22px}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.review-form label{display:flex;flex-direction:column;gap:9px}
.review-form label > span{
  font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.review-form input,
.review-form select,
.review-form textarea{
  width:100%;padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  outline:none;font-size:14px;color:var(--text);
  font-family:inherit;resize:vertical;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.review-form input::placeholder,
.review-form textarea::placeholder{color:#6b7484}
.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus{
  border-color:rgba(201,255,61,.5);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(201,255,61,.08);
}
.review-form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1b2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.review-form select option{background:#0f1218;color:var(--text)}
.review-form .btn{align-self:flex-start;min-width:220px}

.star-input{display:flex;gap:6px}
.star-input button{
  font-size:26px;line-height:1;color:#3a4050;
  transition:color .15s,transform .15s;
}
.star-input button.on{color:#ffc94d}
.star-input button:hover{transform:scale(1.12)}

/* ---------- RESPONSIVE for new sections ---------- */
@media (max-width:1100px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .fanbase-scroll{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews-overview{grid-template-columns:1fr 1fr}
  .review-stat-hero{grid-column:1/-1}
}
@media (max-width:680px){
  .fanbase{padding:100px 0 44px}
  .fanbase-head{flex-direction:column;align-items:flex-start}
  .fanbase-scroll{
    display:flex;gap:14px;overflow-x:auto;
    padding-bottom:12px;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    margin:0 -18px;padding-left:18px;padding-right:18px;
  }
  .fanbase-scroll::-webkit-scrollbar{height:4px}
  .fanbase-scroll::-webkit-scrollbar-thumb{background:#2a2f38}
  .fan-card{flex:0 0 74%;scroll-snap-align:start}

  .reviews-overview{grid-template-columns:1fr 1fr;gap:12px}
  .review-stat{padding:20px 18px}
  .rs-big{font-size:44px}
  .rs-num{font-size:28px}

  .reviews-grid{grid-template-columns:1fr}
  .rf-row{grid-template-columns:1fr}
  .review-form-card{padding:36px 22px;border-radius:24px}
  .review-form .btn{align-self:stretch;min-width:0;width:100%}
}
/* ============================================================
   NEW ADDITIONS — Fan Base as 4th category + logo + reviews
   Paste this at the very bottom of css/style.css
   ============================================================ */

/* ---------- LOGO (matches the eravaultx wordmark) ---------- */
.logo-text{
  font-family:'Inter',sans-serif;
  font-size:25px;
  font-weight:800;
  letter-spacing:-.028em;
  color:#fff;
  line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
  transition:opacity .25s;
}
.logo:hover .logo-text{opacity:.85}
.footer-brand .logo-text{font-size:28px}

/* ---------- FAN BASE category card (special accent) ---------- */
.cat-card-fanbase{
  border-color:rgba(201,255,61,.28);
  background:
    radial-gradient(420px 200px at 50% 0%, rgba(201,255,61,.14), transparent 70%),
    linear-gradient(180deg,#111419,#0a0d12);
}
.cat-card-fanbase::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:70%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  z-index:2;
}
.cat-card-fanbase .cat-crown{
  position:absolute;top:16px;right:16px;z-index:3;
  padding:7px 14px;border-radius:99px;
  font-size:10px;font-weight:800;letter-spacing:.14em;
  background:rgba(201,255,61,.16);color:var(--accent);
  border:1px solid rgba(201,255,61,.4);
  backdrop-filter:blur(10px);
}
.cat-card-fanbase .cat-media::before{
  opacity:.85;
  background:radial-gradient(circle, rgba(201,255,61,.4), transparent 68%);
}

/* ---------- Category grid: 4 cards on desktop ---------- */
@media (min-width:1101px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Fan Base CARDS (used on category.html?cat=fanbase) ---------- */
.product-grid-fan{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.fan-card{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#111419,#0a0d12);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s;
  cursor:pointer;
}
.fan-card:hover{
  transform:translateY(-7px);
  border-color:rgba(201,255,61,.34);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.85);
}
.fan-rank{
  position:absolute;top:12px;left:12px;z-index:3;
  padding:6px 12px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.08em;
  background:rgba(201,255,61,.16);color:var(--accent);
  border:1px solid rgba(201,255,61,.36);
  backdrop-filter:blur(10px);
}
.fan-media{
  aspect-ratio:1/1;display:grid;place-items:center;padding:22px;
  background:radial-gradient(circle at 50% 22%, var(--pc,#1b2130), #0a0c11 74%);
  overflow:hidden;
}
.fan-media svg{
  width:min(140px,72%);
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));
  transition:transform .55s var(--ease);
}
.fan-card:hover .fan-media svg{transform:translateY(-8px) scale(1.06)}

.fan-info{
  padding:16px 18px 18px;
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line);
}
.fan-name{
  font-size:13.5px;font-weight:600;line-height:1.35;
  letter-spacing:-.005em;
}
.fan-votes{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--accent);font-weight:600;
}
.fan-price-row{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.fan-price-row .price{font-size:22px}
.fan-btn{padding:10px 16px;font-size:12.5px;margin-top:10px}

/* ---------- REVIEWS PAGE (unchanged from before) ---------- */
.reviews-overview{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:16px;
}
.review-stat{
  padding:26px 24px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#101319,#0a0d12);
  transition:transform .45s var(--ease),border-color .35s;
}
.review-stat:hover{transform:translateY(-5px);border-color:rgba(201,255,61,.3)}
.review-stat-hero{
  background:
    radial-gradient(360px 140px at 20% 0%, rgba(201,255,61,.16), transparent 70%),
    linear-gradient(180deg,#101319,#0a0d12);
  border-color:rgba(201,255,61,.22);
}
.rs-big{font-family:'Bebas Neue',sans-serif;font-size:56px;line-height:1;letter-spacing:.01em}
.rs-num{font-family:'Bebas Neue',sans-serif;font-size:34px;line-height:1;letter-spacing:.02em}
.rs-stars{color:#ffc94d;font-size:15px;letter-spacing:3px;margin:8px 0 10px}
.rs-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.rs-sub{font-size:12.5px;color:var(--muted)}

.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.review-card{
  padding:26px;border-radius:22px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,#101319,#0a0d12);
  display:flex;flex-direction:column;gap:14px;
  transition:transform .45s var(--ease),border-color .35s;
}
.review-card:hover{transform:translateY(-6px);border-color:rgba(201,255,61,.28)}
.review-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.reviewer{display:flex;align-items:center;gap:12px;min-width:0}
.reviewer-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(201,255,61,.22),rgba(201,255,61,.06));
  color:var(--accent);
  font-weight:800;font-size:13px;letter-spacing:.02em;
  border:1px solid rgba(201,255,61,.3);
}
.reviewer-name{font-size:13.5px;font-weight:700;line-height:1.2}
.reviewer-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:3px}
.verified{color:var(--accent);font-weight:700}
.review-stars{color:#ffc94d;font-size:14px;letter-spacing:2px;white-space:nowrap;flex-shrink:0}
.review-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1.15}
.review-text{font-size:13.5px;color:var(--muted);line-height:1.7;flex:1}
.review-product{
  display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .25s,background .25s,transform .25s;
}
.review-product:hover{
  border-color:rgba(201,255,61,.4);background:rgba(201,255,61,.05);transform:translateX(2px);
}
.rp-thumb{
  width:46px;height:52px;border-radius:10px;flex-shrink:0;padding:4px;
  background:radial-gradient(circle at 50% 25%, var(--pc,#1b2130), #0a0c11 76%);
  display:grid;place-items:center;
}
.rp-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.rp-info .product-cat{font-size:10px}
.rp-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-arrow{color:var(--muted);flex-shrink:0;transition:color .25s,transform .25s}
.review-product:hover .rp-arrow{color:var(--accent);transform:translateX(3px)}
.review-foot{padding-top:6px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.helpful{display:inline-flex;align-items:center;gap:6px}

.review-form-card{
  padding:52px 44px;border-radius:28px;
  border:1px solid var(--line);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(201,255,61,.09), transparent 70%),
    linear-gradient(180deg,#101319,#0a0d12);
}
.review-form-head{margin-bottom:32px;max-width:520px}
.review-form{display:flex;flex-direction:column;gap:22px}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.review-form label{display:flex;flex-direction:column;gap:9px}
.review-form label > span{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.review-form input,
.review-form select,
.review-form textarea{
  width:100%;padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  outline:none;font-size:14px;color:var(--text);
  font-family:inherit;resize:vertical;
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.review-form input::placeholder,
.review-form textarea::placeholder{color:#6b7484}
.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus{
  border-color:rgba(201,255,61,.5);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 4px rgba(201,255,61,.08);
}
.review-form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a1b2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.review-form select option{background:#0f1218;color:var(--text)}
.review-form .btn{align-self:flex-start;min-width:220px}
.star-input{display:flex;gap:6px}
.star-input button{font-size:26px;line-height:1;color:#3a4050;transition:color .15s,transform .15s}
.star-input button.on{color:#ffc94d}
.star-input button:hover{transform:scale(1.12)}

/* ---------- RESPONSIVE for new sections ---------- */
@media (max-width:1100px){
  .product-grid-fan{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .product-grid-fan{grid-template-columns:repeat(2,1fr)}
  .reviews-overview{grid-template-columns:1fr 1fr}
  .review-stat-hero{grid-column:1/-1}
}
@media (max-width:680px){
  .product-grid-fan{grid-template-columns:1fr}
  .reviews-overview{grid-template-columns:1fr 1fr;gap:12px}
  .review-stat{padding:20px 18px}
  .rs-big{font-size:44px}
  .rs-num{font-size:28px}
  .reviews-grid{grid-template-columns:1fr}
  .rf-row{grid-template-columns:1fr}
  .review-form-card{padding:36px 22px;border-radius:24px}
  .review-form .btn{align-self:stretch;min-width:0;width:100%}
}
/* ============================================================
   PRODUCT IMAGE STYLES
   Paste this at the very bottom of css/style.css
   Makes real product images work alongside the SVG fallbacks.
   ============================================================ */

/* ---- Product card image ---- */
.product-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  transition: transform .6s var(--ease);
  box-shadow: 0 22px 32px rgba(0,0,0,.55);
}
.product-card:hover .product-media img{
  transform: translateY(-9px) scale(1.05);
}

/* ---- Hero stage image ---- */
.jersey-stage img{
  width: 78%;
  height: auto;
  max-height: 82%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 18px;
  filter: drop-shadow(0 34px 46px rgba(0,0,0,.7));
  animation: float 6.5s ease-in-out infinite;
}

/* ---- Category card image ---- */
.cat-media img{
  width: min(190px, 68%);
  height: auto;
  max-height: 210px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.6));
  transition: transform .6s var(--ease);
}
.cat-card:hover .cat-media img{
  transform: scale(1.08) rotate(-2deg);
}

/* ---- Fan card image (category.html?cat=fanbase) ---- */
.fan-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  transition: transform .55s var(--ease);
  box-shadow: 0 18px 24px rgba(0,0,0,.55);
}
.fan-card:hover .fan-media img{
  transform: translateY(-8px) scale(1.05);
}

/* ---- Quick view modal image ---- */
.modal-media img{
  width: min(330px, 82%);
  height: auto;
  max-height: 78%;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.65));
}

/* ---- Cart thumbnail image ---- */
.ci-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ---- Search result thumbnail image ---- */
.sr-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}

/* ---- Review product thumbnail ---- */
.rp-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* ---- Product detail page images ---- */
.pd-media img{
  width: min(380px, 82%);
  height: auto;
  max-height: 82%;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.7));
}

/* ---- Fix: When using images, soften the backdrop gradients ---- */
.product-media:has(img),
.fan-media:has(img),
.cat-media:has(img){
  background: radial-gradient(circle at 50% 40%, #1a1e26, #0a0c11 78%);
}
/* ============================================================
   PRODUCT IMAGE FITTING — correct aspect ratios & object-fit
   Paste at the very bottom of css/style.css
   ============================================================ */

/* ---------- 1. HERO: image sits nicely in the jersey stage ---------- */
.jersey-stage{
  position: relative;
  width: min(460px, 92%);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.jersey-stage::after{
  /* keeps the dashed ring */
  content:'';position:absolute;width:66%;height:66%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.11);
  animation:spin 30s linear infinite;
  pointer-events:none;
}
.hero-img-wrap{
  position: relative;
  z-index: 1;
  width: 86%;
  height: 86%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 6.5s ease-in-out infinite;
}
.hero-img-wrap img,
.hero-img-wrap svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 34px 46px rgba(0,0,0,.7));
  border-radius: 18px;
  background: transparent;
}

/* ---------- 2. PRODUCT CARDS: real photos fit nicely ---------- */
.product-media{
  position: relative;
  aspect-ratio: 4 / 4.2;                /* slightly taller than wide */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 32%, var(--pc,#1b2130), #0a0c11 76%);
}
.media-frame{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: transform .55s var(--ease);
}
.product-card:hover .media-frame{
  transform: translateY(-8px) scale(1.03);
}
.media-frame img{
  width: 100%;
  height: 100%;
  object-fit: contain;                  /* show the FULL product */
  object-position: center;
  border-radius: 12px;
  filter: drop-shadow(0 20px 26px rgba(0,0,0,.5));
}
.media-frame svg{
  width: min(178px, 90%);
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.6));
}

/* ---------- 3. CATEGORY CARDS: full jersey visible ---------- */
.cat-media{
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: hidden;
  min-height: 240px;
}
.cat-img-wrap{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .55s var(--ease);
}
.cat-card:hover .cat-img-wrap{
  transform: scale(1.06) rotate(-2deg);
}
.cat-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  filter: drop-shadow(0 22px 32px rgba(0,0,0,.55));
}
.cat-img-wrap svg{
  width: 100%;
  height: auto;
}

/* ---------- 4. FAN BASE CARDS: real photos ---------- */
.product-grid-fan{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.fan-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg,#111419,#0a0d12);
  transition: transform .5s var(--ease),border-color .4s,box-shadow .5s;
  cursor: pointer;
}
.fan-card:hover{
  transform: translateY(-7px);
  border-color: rgba(201,255,61,.34);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.85);
}
.fan-rank{
  position: absolute;top:12px;left:12px;z-index:3;
  padding: 6px 12px;border-radius: 99px;
  font-size: 11px;font-weight: 800;letter-spacing: .08em;
  background: rgba(201,255,61,.16);color: var(--accent);
  border: 1px solid rgba(201,255,61,.36);
  backdrop-filter: blur(10px);
}
.fan-media{
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, var(--pc,#1b2130), #0a0c11 76%);
}
.fan-img-wrap{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .55s var(--ease);
}
.fan-card:hover .fan-img-wrap{
  transform: translateY(-8px) scale(1.04);
}
.fan-img-wrap img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
}
.fan-img-wrap svg{
  width: min(140px, 90%);
  height: auto;
}
.fan-info{
  padding: 16px 18px 18px;
  display: flex;flex-direction: column;gap: 6px;
  border-top: 1px solid var(--line);
}
.fan-name{
  font-size: 13.5px;font-weight: 600;line-height: 1.35;
  letter-spacing: -.005em;
}
.fan-votes{
  display: flex;align-items: center;gap: 6px;
  font-size: 11.5px;color: var(--accent);font-weight: 600;
}
.fan-price-row{display: flex;align-items: baseline;gap: 9px;margin-top: 4px}
.fan-price-row .price{font-size: 22px}
.fan-btn{padding: 10px 16px;font-size: 12.5px;margin-top: 10px}

/* ---------- 5. QUICK VIEW MODAL image ---------- */
.modal-media{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 340px;
  background: radial-gradient(circle at 50% 32%, var(--pc,#1b2130), #0a0c11 76%);
  border-radius: 26px 0 0 26px;
}
.modal-media img,
.modal-media svg{
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.6));
}

/* ---------- 6. CART / SEARCH / REVIEW thumbnails ---------- */
.ci-thumb{
  width: 66px;height: 74px;border-radius: 14px;padding: 4px;
  display: flex;align-items: center;justify-content: center;
  background: radial-gradient(circle at 50% 30%, var(--pc,#1b2130), #0a0c11 76%);
  overflow: hidden;
}
.ci-thumb img{
  width: 100%;height: 100%;object-fit: contain;object-position: center;
}
.ci-thumb svg{width: 100%;height: auto;}

.sr-thumb{
  width: 44px;height: 50px;border-radius: 9px;padding: 3px;
  display: flex;align-items: center;justify-content: center;
  background: radial-gradient(circle at 50% 25%, #1c2230, #0b0e13 75%);
  overflow: hidden;
}
.sr-thumb img{width: 100%;height: 100%;object-fit: contain;}
.sr-thumb svg{width: 100%;height: auto;}

.rp-thumb{
  width: 46px;height: 52px;border-radius: 10px;padding: 3px;
  display: flex;align-items: center;justify-content: center;
  background: radial-gradient(circle at 50% 25%, var(--pc,#1b2130), #0a0c11 76%);
  overflow: hidden;
}
.rp-thumb img{width: 100%;height: 100%;object-fit: contain;}
.rp-thumb svg{width: 100%;height: auto;}

/* ---------- 7. PRODUCT DETAIL page ---------- */
.pd-media{
  position: sticky;top: 104px;
  border-radius: 26px;border: 1px solid var(--line);
  overflow: hidden;
  background: radial-gradient(circle at 50% 32%, var(--pc,#1b2130), #0a0c11 76%);
  display: flex;align-items: center;justify-content: center;
  padding: 40px;
  aspect-ratio: 1 / 1;
}
.pd-media img,
.pd-media svg{
  width: 100%;height: auto;max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.6));
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .product-grid-fan{grid-template-columns: repeat(3, minmax(0,1fr))}
}
@media (max-width: 980px){
  .product-grid-fan{grid-template-columns: repeat(2, minmax(0,1fr))}
  .modal-media{border-radius: 26px 26px 0 0;min-height: 260px;padding: 30px}
}
@media (max-width: 680px){
  .product-grid-fan{grid-template-columns: 1fr}
  .jersey-stage{width: min(320px, 94%)}
  .hero-img-wrap{width: 92%;height: 92%}
  .product-media{padding: 14px}
  .cat-media{padding: 24px;min-height: 200px}
  .fan-media{padding: 14px}
  .pd-media{position: static;aspect-ratio: 1/1;padding: 28px}
}
/* ============================================================
   PRODUCT ACTIONS + PERFORMANCE OPTIMIZATIONS
   Paste at the very bottom of css/style.css
   ============================================================ */

/* ---------- DUAL BUTTONS: Add to Cart + View Details ---------- */
.product-actions{
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.product-actions .product-action-btn{
  flex: 1;
  padding: 12px 10px;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
}
.product-actions .btn-ghost{
  border-color: var(--line-strong);
  color: var(--text);
}
.product-actions .btn-ghost:hover{
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201,255,61,.06);
  transform: none;
  box-shadow: none;
}
.product-actions .btn-primary:hover{
  transform: none;
  box-shadow: 0 6px 16px rgba(201,255,61,.2);
}

/* Media link on image = clickable to product page */
.media-link{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* ---------- PERFORMANCE: stop constant animations ---------- */

/* Remove the dashed spinning ring (was running every frame forever) */
.jersey-stage::after{
  animation: none !important;
  opacity: .35;
}

/* Lighter float animation */
@keyframes float{
  0%,100%{transform: translate3d(0,-6px,0)}
  50%{transform: translate3d(0,6px,0)}
}
.hero-img-wrap{
  animation-duration: 8s !important;
  will-change: transform;
}
.jersey-stage svg{
  animation-duration: 8s !important;
}

/* ---------- GPU-accelerated hover transforms ---------- */
.product-card,
.fan-card,
.cat-card{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.product-card:hover,
.fan-card:hover,
.cat-card:hover{
  transform: translate3d(0, -6px, 0);
}

/* Lighter hero slide transition (no blur) */
.slide{
  transition: opacity .6s ease !important;
}
.slide-visual{
  transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2,.7,.2,1) .1s !important;
  transform: translate3d(0, 14px, 0);
}
.slide.active .slide-visual{
  transform: translate3d(0,0,0);
}

/* ---------- Reduce expensive filter: drop-shadow ---------- */
.product-media img,
.media-frame img,
.cat-img-wrap img,
.fan-img-wrap img,
.hero-img-wrap img{
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
}
.product-card:hover .media-frame img,
.product-card:hover .product-media img{
  transform: translate3d(0, -6px, 0) scale(1.02);
}

/* ---------- Reduce backdrop-filter cost (only on header) ---------- */
.header.scrolled{
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.search-results,
.cart-drawer,
.modal-card,
.toast,
.hero-eyebrow,
.icon-btn,
.cat-crown,
.fan-rank,
.product-tag{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep visual weight with a slight background tint instead */
.search-results{ background: rgba(15,18,24,.98); }
.cart-drawer{ background: #0b0d12; }
.modal-card{ background: #0d1015; }
.toast{ background: rgba(15,18,24,.98); }

/* ---------- Content-visibility: skip off-screen rendering ---------- */
.section,
.trust,
.fanbase,
.newsletter,
.footer{
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* ---------- Remove unnecessary transitions on scroll-triggered elements ---------- */
.reveal{
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1) !important;
}

/* ---------- Faster, lighter shadows on cards ---------- */
.product-card:hover,
.fan-card:hover{
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.7) !important;
}
.cat-card:hover{
  box-shadow: 0 22px 44px -24px rgba(0,0,0,.75) !important;
}

/* ---------- Touch: disable hover effects on mobile for smoothness ---------- */
@media (hover: none){
  .product-card:hover,
  .fan-card:hover,
  .cat-card:hover{
    transform: none;
  }
  .product-card:hover .media-frame img,
  .product-card:hover .product-media img,
  .cat-card:hover .cat-img-wrap,
  .fan-card:hover .fan-img-wrap{
    transform: none;
  }
  .reveal{
    transition: none;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- Small screen: stack buttons nicely ---------- */
@media (max-width: 420px){
  .product-actions{
    flex-direction: column;
    gap: 8px;
  }
  .product-actions .product-action-btn{
    padding: 12px 14px;
  }
}

/* ---------- Reset the fan card grid so buttons don't break layout ---------- */
.fan-card .fan-info .btn{
  width: 100%;
  margin-top: 10px;
}
/* ============================================================
   CHECKOUT · SIZE GUIDE · PREPAID NOTICE · CART SIZES
   Paste at the very bottom of css/style.css
   ============================================================ */

/* ---------- Prepaid badge in cart ---------- */
.cart-prepaid-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(201,255,61,.08);
  border: 1px solid rgba(201,255,61,.28);
}
.cart-prepaid-badge svg{flex-shrink: 0}

/* ---------- Cart rows: subtotal / shipping / total ---------- */
.cart-row-ship span:last-child,
.cart-row-total span:last-child{font-family:'Inter',sans-serif;font-size:14px;font-weight:600}
.cart-row-ship span:first-child,
.cart-row-total span:first-child{font-size:13px}
.cart-row-total{
  padding-top: 10px;
  margin-top: 4px;
  margin-bottom: 16px;
  border-top: 1px solid var(--line);
}
.cart-row-total span:last-child{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px !important;
  letter-spacing: .02em;
  color: var(--accent);
}

/* ---------- Cart size line ---------- */
.ci-size{
  font-size: 12px;
  color: var(--text);
  margin-top: 6px;
  letter-spacing: .01em;
}
.ci-size b{
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Size guide button (link style) ---------- */
.size-guide{
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  transition: color .2s;
  padding: 0;
}
.size-guide:hover{color: var(--accent)}

/* ---------- Size guide modal ---------- */
.size-guide-modal{
  position: fixed;
  inset: 0;
  z-index: 345;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: .35s;
}
.size-guide-modal.open{opacity:1;visibility:visible}

.size-guide-card{
  position: relative;
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 44px 40px;
  border-radius: 26px;
  background: #0d1015;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: scale(.94) translateY(18px);
  transition: transform .48s var(--ease);
}
.size-guide-modal.open .size-guide-card{transform: none}

.size-table-wrap{
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.size-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}
.size-table th,
.size-table td{
  padding: 14px 18px;
  text-align: left;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.size-table th{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(201,255,61,.05);
}
.size-table tbody tr:last-child td{border-bottom: 0}
.size-table tbody tr:hover td{background: rgba(255,255,255,.03)}
.size-table td:first-child{
  font-weight: 800;
  color: var(--text);
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .04em;
  font-size: 18px;
}
.size-table td{color: var(--muted)}

.size-tips{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 24px;
}
.size-tip{
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.size-tip b{
  display: block;
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.size-tip span{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- Checkout modal ---------- */
.checkout-modal{
  position: fixed;
  inset: 0;
  z-index: 350;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: .35s;
}
.checkout-modal.open{opacity:1;visibility:visible}

.checkout-card{
  position: relative;
  width: min(720px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 44px 40px;
  border-radius: 26px;
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(201,255,61,.08), transparent 70%),
    #0d1015;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: scale(.94) translateY(18px);
  transition: transform .48s var(--ease);
}
.checkout-modal.open .checkout-card{transform: none}

.checkout-head{
  margin-bottom: 28px;
}
.prepaid-notice{
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: rgba(201,255,61,.06);
  border: 1px solid rgba(201,255,61,.3);
}
.prepaid-notice svg{
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}
.prepaid-notice b{color: var(--accent)}

/* ---------- Checkout form ---------- */
.checkout-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checkout-form .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkout-form label{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-form label > span{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout-form input,
.checkout-form textarea{
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  outline: none;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.checkout-form input::placeholder,
.checkout-form textarea::placeholder{color: #6b7484}
.checkout-form input:focus,
.checkout-form textarea:focus{
  border-color: rgba(201,255,61,.5);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 4px rgba(201,255,61,.08);
}

/* ---------- Checkout summary ---------- */
.checkout-summary{
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.cs-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.cs-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.cs-line em{
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}
.cs-line span:last-child{color: var(--text);font-weight: 600;white-space: nowrap}
.cs-sub{
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.cs-total{
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.cs-total span:first-child{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--text);
}
.cs-total span:last-child{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .02em;
  color: var(--accent);
}

/* ---------- Checkout footer note ---------- */
.checkout-foot-note{
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- WhatsApp submit button ---------- */
.checkout-form .btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  padding: 16px 28px;
  margin-top: 8px;
}
.checkout-form .btn-primary svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.checkout-form .btn-primary:hover{
  box-shadow: 0 14px 34px rgba(201,255,61,.28);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .checkout-card,
  .size-guide-card{padding: 34px 22px;border-radius: 22px}
  .checkout-form .form-row{grid-template-columns: 1fr}
  .size-tips{grid-template-columns: 1fr}
  .size-table th,
  .size-table td{padding: 12px 14px}
}
/* ============================================================
   BUSINESS CONTACT BLOCK IN FOOTER
   Paste at the very bottom of css/style.css
   ============================================================ */

.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 22px;
  max-width: 320px;
}

.fc-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  font-size: 13px;
  color: var(--text);
  transition: border-color .22s, background .22s, transform .22s;
  text-decoration: none;
  line-height: 1.25;
}
.fc-item:hover{
  border-color: rgba(201,255,61,.4);
  background: rgba(201,255,61,.05);
  transform: translateX(3px);
}
.fc-item b{
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.fc-item span:last-child{color: var(--text);font-weight: 500}

.fc-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  transition: background .22s, color .22s;
}
.fc-item:hover .fc-icon{
  background: rgba(201,255,61,.14);
  color: var(--accent);
}
.fc-wa{
  background: rgba(37,211,102,.12);
  color: #25d366;
}
.fc-item:hover .fc-wa{
  background: rgba(37,211,102,.22);
  color: #25d366;
}

@media (max-width: 680px){
  .footer-contact{max-width: 100%}
  .fc-item{padding: 10px 12px}
}
/* ============================================================
   MOBILE 2-COLUMN PRODUCT GRID
   Paste at the very bottom of css/style.css
   ============================================================ */

/* ---------- Tablet: 3 columns ---------- */
@media (max-width: 1024px) and (min-width: 681px){
  .product-grid{grid-template-columns:repeat(3, 1fr) !important;gap:14px}
}

/* ---------- Mobile: 2 columns ---------- */
@media (max-width: 680px){
  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Slimmer card */
  .product-card{border-radius: 16px}

  /* Media frame — square-ish so it fits 2-up nicely */
  .product-media{
    aspect-ratio: 1 / 1.15 !important;
    padding: 12px !important;
  }
  .product-media img,
  .media-frame img{
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)) !important;
  }
  .media-frame svg{width: 92% !important}

  /* Product tag — smaller */
  .product-tag{
    top: 10px !important;
    left: 10px !important;
    padding: 4px 9px !important;
    font-size: 8.5px !important;
    letter-spacing: .12em !important;
  }

  /* Wishlist heart — smaller */
  .wish-btn{
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  /* Product info — compact */
  .product-info{
    padding: 12px 12px 14px !important;
    gap: 5px !important;
  }
  .product-cat{font-size: 9px !important;letter-spacing: .14em !important}
  .product-name{
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    /* limit to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rating{font-size: 11px !important;gap: 4px !important}
  .rating span{display: none} /* hide "(156 reviews)" on mobile to save space */
  .price-row{gap: 6px !important;margin-top: 2px !important;align-items: baseline}
  .price{font-size: 18px !important}
  .old{font-size: 11px !important}
  .disc{font-size: 8.5px !important;padding: 2px 6px !important}

  /* Actions — stack vertically, full-width buttons */
  .product-actions{
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .product-actions .product-action-btn{
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
  }

  /* ---------- Fan Base grid — also 2 columns on mobile ---------- */
  .product-grid-fan{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .fan-card{border-radius: 16px}
  .fan-rank{
    top: 8px !important;
    left: 8px !important;
    padding: 4px 9px !important;
    font-size: 9.5px !important;
  }
  .fan-media{
    aspect-ratio: 1 / 1 !important;
    padding: 10px !important;
  }
  .fan-info{padding: 10px 12px 12px !important;gap: 4px !important}
  .fan-name{
    font-size: 12px !important;
    line-height: 1.35 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .fan-votes{font-size: 10px !important}
  .fan-price-row .price{font-size: 16px !important}
  .fan-price-row .disc{font-size: 8.5px !important;padding: 2px 6px !important}

  /* ---------- Fan card: link + actions wrapper ---------- */
  .fan-card{
    display: flex;
    flex-direction: column;
  }
  .fan-card-link{
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .fan-actions{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 12px;
  }
  .fan-actions .fan-btn{
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    border-radius: 10px !important;
    margin: 0 !important;
  }

  /* ---------- Tighter filter bar ---------- */
  .filter-bar{
    gap: 10px !important;
    padding-bottom: 14px !important;
    margin-bottom: 20px !important;
  }
  .chip{padding: 7px 14px !important;font-size: 12px !important}
  .sort select{height: 38px !important;font-size: 12.5px !important}

  /* ---------- Category cards — also 2 columns on mobile ---------- */
  .cat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .cat-card{border-radius: 16px;min-height: 0}
  .cat-media{padding: 18px 12px !important;min-height: 120px !important}
  .cat-media img{max-width: 130px !important}
  .cat-body{padding: 14px 14px 16px !important}
  .cat-body h3{font-size: 18px !important;margin: 4px 0 !important}
  .cat-body p{font-size: 11.5px !important;margin-bottom: 8px !important;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}
  .cat-count{font-size: 9px !important}
  .cat-link{font-size: 11.5px !important}
}

/* ---------- Extra-small phones (≤380px) — tighter still ---------- */
@media (max-width: 380px){
  .product-grid{gap: 10px !important}
  .product-media{padding: 10px !important}
  .product-info{padding: 10px 10px 12px !important}
  .product-name{font-size: 11.5px !important}
  .price{font-size: 16px !important}
  .product-actions .product-action-btn{padding: 8px 8px !important;font-size: 11px !important}
  .fan-info{padding: 8px 10px 10px !important}
  .fan-name{font-size: 11px !important}
  .fan-actions{padding: 0 10px 10px}
  .fan-actions .fan-btn{padding: 8px 8px !important;font-size: 11px !important}
}