/* =========================================================
   STORE THEME – black / red / gold "energy" gaming style
   ========================================================= */

:root{
  --red:#E21B2D;
  --red-hot:#ff1530;
  --red-dark:#70080f;
  --gold:#F5B82E;
  --gold-light:#FFD972;
  --black:#050505;
  --bg:#000;
  --panel:#0b0b0b;
  --text:#f0f0f0;
  --muted:#8f8f8f;
  --muted-2:#a8a8a8;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.12);
  --green:#22c55e;
  --card-bg:linear-gradient(145deg,#151515 0%,#090909 58%,#050505 100%);
  --energy:linear-gradient(90deg,transparent,#7A0B13,var(--red),var(--gold),var(--red),#7A0B13,transparent);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  --font-display:"Orbitron",var(--font);
  --font-alt:"Rajdhani",var(--font);
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;line-height:1.15;font-weight:900;color:#fff}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.gold{color:var(--gold)}
.red{color:var(--red)}
.wrap{width:96%;max-width:1800px;margin:0 auto}
.narrow{max-width:1100px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--red);color:#fff;padding:8px 14px;z-index:100000}
.skip-link:focus{left:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* Shared animated energy rail (top line of panels) */
.energy-top{position:relative;isolation:isolate;overflow:hidden}
.energy-top::before{
  content:"";position:absolute;z-index:10;top:0;left:8%;right:8%;height:2px;pointer-events:none;
  background:var(--energy);background-size:250% 100%;
  animation:energyRail 7s linear infinite;
  box-shadow:0 0 15px rgba(226,27,45,.25);
}
@keyframes energyRail{from{background-position:0% 50%}to{background-position:250% 50%}}

/* Section headings */
.kicker{display:block;color:var(--red);font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.kicker--gold{color:var(--gold);display:flex;align-items:center;gap:9px;letter-spacing:1.8px}
.kicker--gold::before{content:"";width:28px;height:1px;background:var(--gold);box-shadow:0 0 10px rgba(245,184,46,.28)}
.section-title{font-size:34px;font-weight:900;line-height:1.1;text-transform:uppercase}
.section-title span{color:var(--gold)}
.section-desc{color:#929292;max-width:760px;margin-top:14px;line-height:1.7}
.section{margin:55px auto 45px}
.section-head{margin-bottom:24px}
.section-head--center{text-align:center}
.section-head--center .section-desc{margin-left:auto;margin-right:auto}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 22px;border-radius:10px;border:1px solid transparent;
  font-size:13px;font-weight:850;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;
  transition:transform .22s ease,filter .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--red{color:#fff;background:linear-gradient(135deg,var(--red-dark),#d81725);border-color:rgba(255,60,70,.40);box-shadow:0 8px 20px rgba(226,27,45,.13)}
.btn--red:hover{filter:brightness(1.15);box-shadow:0 12px 27px rgba(226,27,45,.24)}
.btn--ghost{color:#fff;background:rgba(255,255,255,.03);border-color:var(--line-2)}
.btn--ghost:hover{border-color:rgba(245,184,46,.5);color:var(--gold)}
.btn--gold{color:#120a00;background:linear-gradient(135deg,#c98a12,var(--gold) 55%,var(--gold-light));box-shadow:0 8px 22px rgba(245,184,46,.18)}
.btn--gold:hover{filter:brightness(1.08)}
.btn--block{width:100%}
.btn--sm{height:40px;padding:0 16px;font-size:11px}
.btn--lg{height:56px;font-size:14px;padding:0 28px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* Animated-border "energy" button (Buy Now) */
.btn-energy{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:16px;
  height:56px;padding:0 34px;font-weight:800;font-size:16px;letter-spacing:.3px;
  clip-path:polygon(8% 0,95% 0,100% 23%,93% 100%,0 100%,6% 18%);
  transition:transform .2s ease,filter .2s ease;
}
.btn-energy::before{content:"";position:absolute;inset:0;z-index:-2;clip-path:inherit;
  background:linear-gradient(110deg,#ff1427,#ff1427 28%,var(--gold) 48%,#ff1728 72%,var(--gold));
  background-size:220% 100%;animation:buyBorder 3s linear infinite}
.btn-energy::after{content:"";position:absolute;inset:3px;z-index:-1;clip-path:inherit;
  background:radial-gradient(circle at 75% 50%,rgba(255,70,70,.25),transparent 38%),linear-gradient(135deg,#3b0305,#b10811 45%,#e6101b 73%,#520407)}
.btn-energy svg{transition:transform .25s ease}
.btn-energy:hover{transform:translateY(-2px);filter:brightness(1.12)}
.btn-energy:hover svg{transform:translateX(5px)}
@keyframes buyBorder{from{background-position:0% 50%}to{background-position:220% 50%}}

/* =========================================================
   HEADER (angular animated frame)
   ========================================================= */
.hdx-header{position:relative;z-index:9999;display:flex;justify-content:center;padding:22px 24px;background:#000;overflow:clip}
.hdx-header.is-sticky{position:sticky;top:0}
.hdx-frame{
  position:relative;width:96%;max-width:1820px;height:128px;display:flex;align-items:center;padding:0 38px;isolation:isolate;
  clip-path:polygon(3% 0,42% 0,43.2% 9%,70% 9%,71.4% 0,96.5% 0,100% 27%,98.5% 100%,74% 100%,72.7% 91%,31% 91%,29.4% 100%,3% 100%,0 70%,1.2% 27%);
  filter:drop-shadow(0 18px 25px rgba(0,0,0,.75));
}
.hdx-frame::before{
  content:"";position:absolute;inset:0;z-index:-2;clip-path:inherit;
  background:linear-gradient(110deg,#301010 0%,#ff2020 7%,#ff5630 10%,#f5b82e 14%,#282828 22%,#151515 34%,#f5b82e 44%,#ff7235 48%,#ff2020 52%,#292929 65%,#181818 75%,#f5b82e 84%,#ff2020 93%,#421111 100%);
  background-size:350% 100%;animation:frameEnergy 7s linear infinite;
}
.hdx-frame::after{
  content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;
  background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.045),transparent 45%),linear-gradient(180deg,#151515 0%,#0b0b0b 36%,#070707 65%,#030303 100%);
}
@keyframes frameEnergy{from{background-position:0% 50%}to{background-position:350% 50%}}

.hdx-top-rail{position:absolute;z-index:3;left:20%;right:3.5%;top:29px;height:3px;
  clip-path:polygon(0 0,42% 0,44% 100%,100% 100%);
  background:linear-gradient(90deg,transparent,#7c5a27 8%,#ffd77b 32%,#f5b82e 55%,#78501f 83%,transparent);
  box-shadow:0 0 6px rgba(245,184,46,.25)}
.hdx-top-marks{position:absolute;top:17px;right:29%;z-index:4;display:flex;gap:4px;transform:skewX(-25deg)}
.hdx-top-marks span{width:5px;height:14px;background:#d89c2d;box-shadow:0 0 4px rgba(245,184,46,.25)}
.hdx-bottom-detail{position:absolute;bottom:14px;left:33%;width:120px;height:6px;opacity:.55;
  background:repeating-linear-gradient(110deg,#3d3d3d 0 5px,transparent 5px 9px)}

/* energy edges */
.hdx-energy{position:absolute;top:50%;z-index:5;display:flex;gap:5px;transform:translateY(-50%)}
.hdx-energy-left{left:14px}
.hdx-energy-right{right:18px}
.hdx-energy i{display:block;width:3px;height:26px;border-radius:2px;background:linear-gradient(180deg,#ff2a3a,#a30b16);
  box-shadow:0 0 8px rgba(255,23,38,.6);transform:rotate(-41deg);animation:edgePulse 1.6s ease-in-out infinite alternate}
.hdx-energy i:nth-child(2){animation-delay:.25s}
.hdx-energy i:nth-child(3){animation-delay:.5s}
@keyframes edgePulse{from{opacity:.55;filter:brightness(.85);transform:rotate(-41deg) scaleY(.92)}to{opacity:1;filter:brightness(1.35);transform:rotate(-41deg) scaleY(1.06)}}

.hdx-logo-panel{
  position:relative;flex:0 0 390px;width:390px;height:96px;display:flex;align-items:center;justify-content:center;margin-left:4px;overflow:hidden;
  clip-path:polygon(12% 0,100% 0,86% 100%,0 100%,5% 50%);
  background:linear-gradient(130deg,#171717,#080808 60%,#040404);box-shadow:12px 0 30px rgba(0,0,0,.65);
}
.hdx-logo-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(128deg,rgba(255,255,255,.06),transparent 29%)}
.hdx-logo-panel::after{content:"";position:absolute;top:0;right:-2px;width:98px;height:100%;pointer-events:none;background:linear-gradient(130deg,transparent 0 38%,rgba(0,0,0,.72) 39% 100%)}
.hdx-logo{position:relative;z-index:5;width:250px;display:flex;align-items:center;justify-content:center}
.hdx-logo img{width:100%;max-width:250px;height:auto;object-fit:contain;filter:drop-shadow(0 0 9px rgba(255,30,30,.18))}
.hdx-logo-detail{position:absolute;right:45px;bottom:8px;width:60px;height:7px;opacity:.6;background:repeating-linear-gradient(110deg,#3d3d3d 0 5px,transparent 5px 9px)}

/* Text wordmark (used when no logo is uploaded) */
.wordmark{font-family:var(--font-display);font-weight:900;font-size:28px;letter-spacing:2px;color:#fff;white-space:nowrap;
  text-shadow:0 0 18px rgba(255,30,30,.25)}
.wordmark b{color:var(--red)}

.hdx-nav{position:relative;z-index:6;flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;gap:44px;padding-top:4px}
.hdx-nav a{position:relative;color:#f0f0f0;font-size:16px;font-weight:700;white-space:nowrap;transition:color .22s ease,transform .22s ease}
.hdx-nav a:hover{color:#fff;transform:translateY(-1px)}
.hdx-nav a::after{content:"";position:absolute;left:50%;bottom:-23px;width:0;height:3px;transform:translateX(-50%);background:var(--red-hot);box-shadow:0 0 10px rgba(255,20,45,.55);transition:width .25s ease}
.hdx-nav a:hover::after{width:24px}
.hdx-nav a.is-current::after{width:48px}
.hdx-nav a.is-current::before{content:"";position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--red-hot)}

.hdx-actions{position:relative;z-index:6;flex:0 0 auto;height:74px;display:flex;align-items:center;margin-left:20px;padding-left:28px;
  background:linear-gradient(180deg,rgba(13,13,13,.88),rgba(5,5,5,.90));clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.hdx-icon{position:relative;width:58px;height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:center;color:#f7f7f7;background:none;border:0;cursor:pointer;transition:color .2s ease,background .2s ease}
.hdx-icon svg.i{width:25px;height:25px;stroke-width:1.7}
.hdx-icon:hover{color:var(--gold);background:rgba(255,255,255,.025)}
.hdx-divider{width:1px;height:30px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),transparent)}
.cart-count{position:absolute;top:8px;right:6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 0 10px rgba(226,27,45,.5)}
.cart-count[data-count="0"]{display:none}
.cart-count.bump{animation:bump .45s ease}
@keyframes bump{40%{transform:scale(1.35)}}

.hdx-buy{
  position:relative;isolation:isolate;width:225px;height:66px;flex:0 0 225px;margin-left:13px;display:flex;align-items:center;justify-content:center;gap:20px;overflow:hidden;color:#fff;
  clip-path:polygon(14% 0,92% 0,100% 23%,90% 100%,0 100%,12% 18%);
  font-size:19px;font-weight:800;transition:transform .2s ease,filter .2s ease;
}
.hdx-buy::before{content:"";position:absolute;inset:0;z-index:-2;clip-path:inherit;background:linear-gradient(110deg,#ff1427,#ff1427 28%,#f5b82e 48%,#ff1728 72%,#f5b82e);background-size:220% 100%;animation:buyBorder 3s linear infinite}
.hdx-buy::after{content:"";position:absolute;inset:3px;z-index:-1;clip-path:inherit;background:radial-gradient(circle at 75% 50%,rgba(255,70,70,.25),transparent 38%),linear-gradient(135deg,#3b0305,#b10811 45%,#e6101b 73%,#520407)}
.hdx-buy span,.hdx-buy svg{position:relative;z-index:3}
.hdx-buy svg{width:23px;height:23px;transition:transform .25s ease}
.hdx-buy:hover{transform:translateY(-2px);filter:brightness(1.12)}
.hdx-buy:hover svg{transform:translateX(5px)}
.hdx-spark{position:absolute;z-index:2;right:34px;top:50%;width:4px;height:4px;border-radius:50%;background:#ffd77b;box-shadow:0 0 6px #ffb02e;animation:spark 2.2s ease-out infinite}
.hdx-spark:nth-of-type(2){animation-delay:.7s;right:48px}
.hdx-spark:nth-of-type(3){animation-delay:1.4s;right:22px}
@keyframes spark{0%{opacity:0;translate:0 4px;scale:.4}20%{opacity:1}100%{opacity:0;translate:18px -19px;scale:1.2}}

.hdx-burger{display:none}

/* Mobile drawer menu */
.mnav{position:fixed;inset:0;z-index:100002;pointer-events:none}
.mnav__overlay{position:absolute;inset:0;background:rgba(0,0,0,.65);opacity:0;transition:opacity .3s ease}
.mnav__panel{position:absolute;top:0;left:0;bottom:0;width:min(330px,86%);padding:24px;transform:translateX(-102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(160deg,#141414,#060606);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.mnav__panel a{padding:14px 12px;border-radius:10px;font-weight:700;border:1px solid transparent}
.mnav__panel a:hover,.mnav__panel a.is-current{border-color:rgba(226,27,45,.35);background:rgba(226,27,45,.06);color:var(--gold)}
.mnav__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mnav.open{pointer-events:auto}
.mnav.open .mnav__overlay{opacity:1}
.mnav.open .mnav__panel{transform:none}

/* =========================================================
   SEARCH OVERLAY (Fibo-style, with live results)
   ========================================================= */
.search-overlay{position:fixed;inset:0;z-index:100003;display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.search-overlay.open{opacity:1;visibility:visible}
.search-overlay__inner{width:100%;max-width:720px;transform:translateY(-14px);transition:transform .3s ease}
.search-overlay.open .search-overlay__inner{transform:none}
.search-overlay__close{position:absolute;top:22px;right:26px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);cursor:pointer;font-size:24px}
.search-overlay__close:hover{color:var(--gold);border-color:var(--gold)}

.fsearch{position:relative;width:100%;max-width:720px;margin:0 auto;padding:2px;border-radius:14px;
  background:linear-gradient(110deg,#5f1017 0%,#e21b2d 18%,#242424 33%,#f5b82e 50%,#242424 66%,#e21b2d 82%,#5f1017 100%);
  background-size:300% 100%;animation:searchBorder 8s linear infinite;box-shadow:0 18px 50px rgba(0,0,0,.45)}
@keyframes searchBorder{from{background-position:0% 50%}to{background-position:300% 50%}}
.fsearch__inner{position:relative;display:flex;align-items:center;height:64px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#121212,#070707)}
.fsearch__inner::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(226,27,45,.2),var(--red),rgba(226,27,45,.2),transparent);pointer-events:none}
.fsearch__ico{position:absolute;left:20px;color:var(--gold)}
.fsearch input{width:100%;height:64px;padding:0 72px 0 58px;background:transparent;border:0;outline:0;color:#fff;font-size:16px;font-weight:500}
.fsearch input::placeholder{color:#777}
.fsearch button{position:absolute;top:7px;right:7px;width:50px;height:50px;border:0;border-radius:10px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8f0712,#e21b2d);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.fsearch button:hover{transform:translateY(-1px);filter:brightness(1.15);box-shadow:0 10px 26px rgba(226,27,45,.28)}
.suggest{margin-top:10px;border-radius:14px;overflow:hidden;background:#0b0b0b;border:1px solid var(--line);display:none}
.suggest.show{display:block}
.suggest a{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.04);transition:background .2s}
.suggest a:hover,.suggest a.active{background:rgba(226,27,45,.08)}
.suggest img,.suggest .ph{width:54px;height:40px;border-radius:7px;object-fit:cover;flex:0 0 54px}
.suggest strong{display:block;font-size:14px}
.suggest small{color:var(--muted)}
.suggest .price{margin-left:auto;flex:0 0 auto;color:var(--gold);font-weight:800;font-size:13px;white-space:nowrap;overflow:visible;text-overflow:clip}
.suggest .empty{padding:16px;color:var(--muted)}
.suggest .all{justify-content:center;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:.5px}

/* =========================================================
   PAGE TITLE BANNER (inner pages)
   ========================================================= */
.page-banner{padding:34px 0 10px;text-align:center}
.page-banner h1{font-size:clamp(30px,4vw,48px);text-transform:uppercase;letter-spacing:-.5px}
.breadcrumb{color:var(--muted);font-size:13px;margin-top:10px}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{margin:0 6px;opacity:.6}

/* =========================================================
   SHOP HERO
   ========================================================= */
.shop-hero{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:70px 24px;margin-top:10px;border:1px solid rgba(255,255,255,.07);border-radius:18px;
  background:radial-gradient(circle at 50% 0%,rgba(225,20,38,.13),transparent 38%),radial-gradient(circle at 10% 80%,rgba(245,184,46,.055),transparent 28%),linear-gradient(135deg,#111 0%,#080808 45%,#040404 100%);
  box-shadow:0 25px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.035);
}
.shop-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.018) 35%,transparent 48%);background-size:300% 100%;animation:shine 9s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.shop-hero .kicker{font-size:13px;margin:0}
.shop-hero h1{font-size:54px;line-height:1.05;letter-spacing:-1px;text-transform:uppercase;max-width:1000px}
.shop-hero p{color:var(--muted-2);font-size:17px;line-height:1.7;max-width:720px;margin:0}
.shop-hero .fsearch{margin-top:10px}

/* =========================================================
   CATEGORY (GAME) TILES
   ========================================================= */
.cat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.cat-tile{position:relative;min-height:155px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#080808;box-shadow:0 12px 30px rgba(0,0,0,.30);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.cat-tile::before{content:"";position:absolute;z-index:8;top:0;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--red) 20%,var(--gold) 50%,var(--red) 80%,transparent);opacity:.75;transition:opacity .25s,box-shadow .25s}
.cat-tile::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.92) 100%)}
.cat-tile a{position:absolute;inset:0;display:block}
.cat-tile img,.cat-tile .cat-ph{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;filter:saturate(.85) contrast(1.08) brightness(.80);transform:scale(1.01);transition:transform .4s ease,opacity .3s ease,filter .3s ease}
.cat-ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:38px;font-weight:900;color:rgba(255,255,255,.18);
  background:radial-gradient(circle at 30% 20%,rgba(226,27,45,.35),transparent 55%),radial-gradient(circle at 80% 90%,rgba(245,184,46,.18),transparent 50%),linear-gradient(135deg,#1b1b1b,#070707)}
.cat-tile h3{position:absolute;z-index:10;left:12px;right:12px;bottom:12px;padding:11px 14px 11px 17px;font-size:14px;font-weight:800;letter-spacing:.45px;line-height:1.2;
  background:linear-gradient(90deg,rgba(5,5,5,.96) 0%,rgba(10,10,10,.92) 72%,rgba(10,10,10,.55) 100%);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--red);border-radius:3px 9px 9px 3px;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:border-color .25s,background .25s}
.cat-tile h3 small{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.3px}
.cat-tile:hover{transform:translateY(-5px);border-color:rgba(226,27,45,.55);box-shadow:0 18px 42px rgba(0,0,0,.48),0 0 24px rgba(226,27,45,.09)}
.cat-tile:hover::before{opacity:1;box-shadow:0 0 12px rgba(226,27,45,.35)}
.cat-tile:hover img,.cat-tile:hover .cat-ph{transform:scale(1.08);opacity:.92;filter:saturate(1) contrast(1.1) brightness(.88)}
.cat-tile:hover h3{border-left-color:var(--gold)}
.cat-tile.is-active{border-color:rgba(245,184,46,.6)}

/* =========================================================
   SHOP TOOLBAR + PRODUCT GRID
   ========================================================= */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.result-count{color:var(--muted);font-size:13px;font-weight:600;margin:0}
.select{min-width:220px;height:48px;padding:0 42px 0 16px;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:10px;outline:none;cursor:pointer;font-size:13px;font-weight:600;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F5B82E' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center,linear-gradient(180deg,#151515,#090909);
  box-shadow:0 10px 25px rgba(0,0,0,.25);-webkit-appearance:none;appearance:none;transition:border-color .2s}
.select:hover,.select:focus{border-color:rgba(226,27,45,.55)}
.select option{background:#101010;color:#fff}

.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:0}
.pcard{position:relative;display:flex;flex-direction:column;height:100%;min-height:530px;padding-bottom:17px;overflow:hidden;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.28);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.pcard::before{content:"";position:absolute;z-index:30;top:0;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--red) 20%,var(--gold) 50%,var(--red) 80%,transparent);opacity:.55;pointer-events:none;transition:opacity .28s}
.pcard__media{position:relative;display:block;height:250px;flex:0 0 250px;overflow:hidden;background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.05)}
.pcard__media img,.pcard__media .ph{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.04) brightness(.92);transition:transform .45s ease,filter .35s ease}
.ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:56px;color:rgba(255,255,255,.14);
  background:radial-gradient(circle at 25% 15%,rgba(226,27,45,.35),transparent 55%),radial-gradient(circle at 85% 95%,rgba(245,184,46,.16),transparent 50%),linear-gradient(135deg,#1c1c1c,#060606)}
.pcard__body{flex:1;display:grid;grid-template-rows:15px 52px 18px 25px auto;row-gap:10px;padding:18px 18px 0;align-content:start}
.pcard__cat{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard__cat:hover{color:var(--gold)}
.pcard__title{font-size:16px;font-weight:800;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.pcard__rating{display:flex;align-items:center;gap:6px;height:18px}
.pcard__rating small{color:var(--muted);font-size:11px}
.price{color:var(--gold);font-size:17px;font-weight:850;line-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price del{color:#696969;opacity:.85;font-size:13px;margin-right:5px;font-weight:600}
.pcard .btn{margin-top:6px;height:46px;width:100%;font-size:12px}
.pcard:hover{transform:translateY(-6px);border-color:rgba(226,27,45,.50);box-shadow:0 22px 48px rgba(0,0,0,.45),0 0 25px rgba(226,27,45,.075)}
.pcard:hover::before{opacity:1}
.pcard:hover .pcard__media img,.pcard:hover .pcard__media .ph{transform:scale(1.055);filter:saturate(1) contrast(1.07) brightness(.98)}
.pcard:hover .pcard__title{color:var(--gold)}

.badge{position:absolute;z-index:35;top:12px;left:12px;padding:7px 11px;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:7px;box-shadow:0 6px 16px rgba(0,0,0,.35);font-size:10px;font-weight:900;letter-spacing:.7px;line-height:1;text-transform:uppercase;
  background:linear-gradient(135deg,#a50914,var(--red))}
.badge--hot{left:auto;right:12px;color:#160c00;background:linear-gradient(135deg,#c98a12,var(--gold))}

/* stars */
.stars{position:relative;display:inline-block;width:82px;height:16px;font-size:16px;line-height:16px;letter-spacing:1px;color:#3d3d3d;white-space:nowrap}
.stars::before{content:"★★★★★"}
.stars__fill{position:absolute;inset:0 auto 0 0;overflow:hidden;color:var(--gold)}
.stars__fill::before{content:"★★★★★"}
.stars-text{color:var(--gold);letter-spacing:2px}

/* pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin:44px 0 0;flex-wrap:wrap}
.pagination a,.pagination span{min-width:44px;height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(180deg,#141414,#090909);font-weight:800;font-size:14px;transition:border-color .2s,color .2s,transform .2s}
.pagination a:hover{border-color:rgba(226,27,45,.6);color:var(--gold);transform:translateY(-2px)}
.pagination .current{background:linear-gradient(135deg,var(--red-dark),#d81725);border-color:rgba(255,60,70,.4)}
.empty-state{padding:60px 20px;text-align:center;border:1px dashed var(--line-2);border-radius:16px;color:var(--muted)}

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;min-height:115px;margin:10px auto 80px;padding:20px 28px;border:1px solid rgba(255,255,255,.075);border-radius:16px;
  background:radial-gradient(circle at 50% 0,rgba(226,27,45,.06),transparent 45%),linear-gradient(135deg,#121212,#080808 55%,#050505);box-shadow:0 20px 55px rgba(0,0,0,.35)}
.trust__item{display:flex;align-items:center;justify-content:center;gap:15px;padding:12px 20px;min-width:0}
.trust__icon{width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(226,27,45,.28);border-radius:11px;background:linear-gradient(145deg,rgba(226,27,45,.10),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);color:var(--red);transition:transform .25s,border-color .25s,box-shadow .25s,color .25s}
.trust__item strong{display:block;font-size:13px;font-weight:850;letter-spacing:.7px;line-height:1.15;white-space:nowrap}
.trust__item span{display:block;color:#777;font-size:12px;font-weight:500;margin-top:5px;white-space:nowrap}
.trust__divider{width:1px;height:48px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.trust__item:hover .trust__icon{transform:translateY(-2px);border-color:rgba(245,184,46,.45);box-shadow:0 0 18px rgba(226,27,45,.08);color:var(--gold)}

/* =========================================================
   PANELS / CARDS (generic)
   ========================================================= */
.panel{position:relative;padding:30px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 5% 10%,rgba(226,27,45,.08),transparent 30%),linear-gradient(145deg,#141414 0%,#090909 50%,#040404 100%);box-shadow:0 25px 60px rgba(0,0,0,.4)}
.panel h2,.panel h3{margin-bottom:14px}
.panel + .panel{margin-top:22px}

/* forms */
.form-row{margin-bottom:16px}
.form-row label,.label{display:block;margin-bottom:7px;color:#cfcfcf;font-size:13px;font-weight:700;letter-spacing:.3px}
.input,.form-row input[type=text],.form-row input[type=email],.form-row input[type=tel],.form-row input[type=password],.form-row input[type=number],.form-row textarea,.form-row select{
  width:100%;min-height:50px;padding:12px 16px;color:#fff;background:#0a0a0a;border:1px solid var(--line-2);border-radius:10px;outline:none;transition:border-color .2s,box-shadow .2s}
.form-row textarea{min-height:110px;resize:vertical}
.input:focus,.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:rgba(226,27,45,.6);box-shadow:0 0 0 3px rgba(226,27,45,.12)}
.form-row .errorlist,.errorlist{list-style:none;margin:6px 0 0;padding:0;color:#ff6170;font-size:13px}
.form-row .help{color:var(--muted);font-size:12px;margin-top:5px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.checkbox{display:flex;gap:10px;align-items:flex-start;color:#cfcfcf;font-size:14px}
.checkbox input{margin-top:4px;accent-color:var(--red);width:17px;height:17px}

/* notices / toasts */
.toasts{position:fixed;z-index:100005;top:20px;right:20px;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100% - 40px))}
.toast{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:#111;border:1px solid var(--line-2);border-left:3px solid var(--green);box-shadow:0 18px 40px rgba(0,0,0,.5);font-size:14px;animation:toastIn .35s ease}
.toast--error{border-left-color:var(--red)}
.toast--info,.toast--warning{border-left-color:var(--gold)}
.toast button{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);font-size:18px;line-height:1}
.toast.hide{opacity:0;transform:translateX(20px);transition:.3s}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}}
.notice{padding:14px 18px;border-radius:12px;border:1px solid rgba(245,184,46,.3);background:rgba(245,184,46,.06);color:#f3dfb0;margin-bottom:20px}
.notice--red{border-color:rgba(226,27,45,.35);background:rgba(226,27,45,.07);color:#ffc2c8}
.notice--green{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07);color:#bff0cf}

/* tables */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.table td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tfoot td,.table tfoot th{border-bottom:0}
.status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;border:1px solid}
.status--pending{color:var(--gold);border-color:rgba(245,184,46,.4)}
.status--paid{color:#60a5fa;border-color:rgba(96,165,250,.4)}
.status--completed{color:var(--green);border-color:rgba(34,197,94,.4)}
.status--cancelled,.status--refunded{color:#999;border-color:#444}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
.pp-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;margin-top:20px;align-items:start}
.pp-info{padding:34px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 0% 0%,rgba(226,27,45,.12),transparent 35%),linear-gradient(145deg,#131313,#070707 60%,#040404)}
.pp-info h1{font-size:clamp(30px,3.4vw,50px);letter-spacing:-1px;text-transform:uppercase}
.pp-info .breadcrumb{margin:12px 0 18px;text-align:left}
.pp-status{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;color:#bff0cf;font-size:12px;font-weight:900;letter-spacing:1.5px;border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulseDot 1.8s infinite}
@keyframes pulseDot{70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;font-size:11px;font-weight:850;letter-spacing:.8px;text-transform:uppercase;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.chip svg.i{width:14px;height:14px;color:var(--red)}
.chip--gold{border-color:rgba(245,184,46,.35);color:var(--gold)}
.pp-compat{margin:6px 0 18px}
.pp-compat .label{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.pp-price{font-size:34px;font-weight:900;color:var(--gold);margin:10px 0 18px;font-family:var(--font-alt)}
.pp-price del{font-size:20px;color:#666;margin-right:10px}
.pp-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.pp-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hl{padding:16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);display:flex;gap:12px;align-items:center;transition:border-color .25s,transform .25s}
.hl:hover{border-color:rgba(245,184,46,.35);transform:translateY(-2px)}
.hl__icon{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--red);border:1px solid rgba(226,27,45,.28);background:rgba(226,27,45,.08)}
.hl strong{display:block;font-size:13px}
.hl span{color:var(--muted);font-size:12px}

.pp-media{display:flex;flex-direction:column;gap:18px}
.gallery{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0a0a0a;aspect-ratio:16/10}
.gallery img,.gallery .ph{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs button{width:84px;height:56px;padding:0;border-radius:9px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#111;opacity:.7;transition:.2s}
.thumbs button.active,.thumbs button:hover{border-color:var(--gold);opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover}

.plan-card{padding:28px;border-radius:18px;border:1px solid rgba(245,184,46,.18);background:radial-gradient(circle at 100% 0%,rgba(245,184,46,.08),transparent 40%),linear-gradient(145deg,#141414,#070707)}
.plan-card h3{font-size:20px;letter-spacing:.5px}
.plan-card > p{color:var(--muted);margin:4px 0 18px;font-size:14px}
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.plan{position:relative;cursor:pointer}
.plan input{position:absolute;opacity:0}
.plan span{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:12px;border:1px solid var(--line-2);background:#0a0a0a;transition:.2s}
.plan b{font-size:14px}
.plan em{font-style:normal;color:var(--gold);font-weight:850;font-size:15px}
.plan em del{color:#666;font-size:12px;margin-right:4px}
.plan small{color:var(--muted);font-size:11px}
.plan input:checked + span{border-color:var(--red);background:linear-gradient(145deg,rgba(226,27,45,.14),rgba(10,10,10,1));box-shadow:0 0 0 1px var(--red),0 10px 26px rgba(226,27,45,.14)}
.plan input:focus-visible + span{outline:2px solid var(--gold)}
.plan input:disabled + span{opacity:.4;cursor:not-allowed}
.buy-row{display:flex;gap:12px}
.qty{display:flex;align-items:center;height:56px;border:1px solid var(--line-2);border-radius:10px;background:#0a0a0a;overflow:hidden}
.qty button{width:42px;height:100%;border:0;background:none;cursor:pointer;font-size:18px;color:#ccc}
.qty button:hover{color:var(--gold)}
.qty input{width:44px;height:100%;text-align:center;border:0;background:none;outline:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy-row .btn{flex:1;height:56px}
.ticks{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;color:#bdbdbd;font-size:13px}
.ticks span{display:inline-flex;align-items:center;gap:6px}
.ticks svg.i{width:16px;height:16px;color:var(--green)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:40px 0;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#121212,#070707)}
.stat{padding:30px 20px;text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.stat strong{display:block;font-family:var(--font-display);font-size:clamp(24px,2.6vw,38px);font-weight:900;background:linear-gradient(180deg,#fff,#c9c9c9);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat:nth-child(odd) strong{background:linear-gradient(180deg,var(--gold-light),var(--gold));-webkit-background-clip:text;background-clip:text}
.stat span{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}

/* Review highlight block (hdc-rv) */
.rv{margin:45px auto;padding:38px;font-family:var(--font-alt);border:1px solid rgba(255,255,255,.085);border-radius:18px;
  background:radial-gradient(circle at 5% 10%,rgba(226,27,45,.11),transparent 30%),radial-gradient(circle at 95% 5%,rgba(245,184,46,.07),transparent 25%),linear-gradient(145deg,#141414 0%,#090909 50%,#030303 100%);box-shadow:0 32px 80px rgba(0,0,0,.48)}
.rv__grid-bg{position:absolute;z-index:-3;inset:0;opacity:.25;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);background-size:50px 50px}
.rv__glow{position:absolute;z-index:-2;border-radius:50%;filter:blur(100px);pointer-events:none}
.rv__glow--red{top:-130px;left:-120px;width:430px;height:350px;background:rgba(226,27,45,.12)}
.rv__glow--gold{right:-130px;bottom:-150px;width:420px;height:330px;background:rgba(245,184,46,.07)}
.rv__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:30px}
.rv__head h2{font-family:var(--font-display);font-size:clamp(26px,2.6vw,40px);line-height:1.1;text-transform:uppercase}
.rv__head h2 span{color:var(--gold)}
.rv__head p{color:#949494;font-size:17px;max-width:520px;margin:12px 0 0;font-family:var(--font)}
.rv__score{display:flex;align-items:center;gap:18px;padding:18px 24px;border-radius:14px;border:1px solid rgba(245,184,46,.2);background:rgba(0,0,0,.35)}
.rv__score strong{font-family:var(--font-display);font-size:46px;line-height:1;color:var(--gold)}
.rv__score strong small{font-size:18px;color:#777}
.rv__score .stars-text{font-size:18px}
.rv__score em{display:block;font-style:normal;color:#8a8a8a;font-size:14px}
.rv__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rv-card{position:relative;padding:26px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,#151515,#080808);overflow:hidden;transition:transform .3s,border-color .3s}
.rv-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--energy);background-size:250% 100%;animation:energyRail 6s linear infinite;opacity:.8}
.rv-card:hover{transform:translateY(-5px);border-color:rgba(245,184,46,.3)}
.rv-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.rv-card__score{font-family:var(--font-display);font-weight:800;color:var(--gold);font-size:15px}
.rv-card__quote{font-size:44px;line-height:.6;color:var(--red);font-family:Georgia,serif;height:22px}
.rv-card p{color:#d4d4d4;font-size:17px;line-height:1.5;min-height:76px;font-weight:500}
.rv-user{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:#fff;
  background:linear-gradient(135deg,#8f0712,var(--red));box-shadow:0 0 0 2px #0b0b0b,0 0 0 3px rgba(245,184,46,.5)}
.rv-user strong{display:block;font-size:17px}
.verified{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-family:var(--font)}
.verified svg.i{width:12px;height:12px}
.rv__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.rv__bottom strong{display:block;font-size:18px}
.rv__bottom span{color:#888;font-family:var(--font)}

/* Detailed overview */
.overview{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px}
.prose{color:#c7c7c7;line-height:1.8}
.prose h2,.prose h3,.prose h4{margin:1.4em 0 .6em;text-transform:uppercase}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose a{color:var(--gold);text-decoration:underline}
.prose ul{padding-left:1.2em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--red)}
.prose img{border-radius:12px;margin:1em 0}
.feature-group + .feature-group{margin-top:22px}
.feature-group h4{font-size:13px;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);font-size:14px}
.feature-list svg.i{width:16px;height:16px;margin-top:3px;color:var(--red)}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq{overflow:hidden;background:linear-gradient(145deg,#0b0b0b,#070707);border:1px solid #242424;border-radius:15px;transition:border-color .25s,box-shadow .25s}
.faq:hover{border-color:rgba(245,184,46,.30)}
.faq[open]{border-color:rgba(245,184,46,.40);box-shadow:0 15px 38px rgba(0,0,0,.28)}
.faq summary{position:relative;min-height:72px;display:flex;align-items:center;padding:21px 72px 21px 24px;list-style:none;font-size:17px;font-weight:800;cursor:pointer;user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;width:34px;height:34px;margin-top:-17px;display:flex;align-items:center;justify-content:center;border-radius:9px;border:1px solid rgba(245,184,46,.3);color:var(--gold);font-size:20px;font-weight:400;transition:transform .3s,background .3s}
.faq[open] summary::after{transform:rotate(45deg);background:rgba(245,184,46,.1)}
.faq__a{padding:0 24px 22px;color:#9a9a9a;line-height:1.75}
.faq[open] .faq__a{animation:faqIn .35s ease}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* Reviews list */
.reviews-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;align-items:start}
.bars{display:grid;gap:8px;margin-top:18px}
.bar{display:grid;grid-template-columns:42px 1fr 34px;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.bar div{height:8px;border-radius:9px;background:#1a1a1a;overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red),var(--gold))}
.review{padding:20px 0;border-bottom:1px solid var(--line)}
.review:first-child{padding-top:0}
.review__head{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.review__head time{color:var(--muted);font-size:13px}
.review p{color:#cfcfcf;margin:0}
.rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.rating-input input{position:absolute;opacity:0}
.rating-input label{font-size:30px;color:#333;cursor:pointer;transition:color .15s,transform .15s;margin:0}
.rating-input label:hover,.rating-input label:hover ~ label,.rating-input input:checked ~ label{color:var(--gold)}
.rating-input label:hover{transform:scale(1.15)}

/* =========================================================
   CART (page + slide-out drawer)
   ========================================================= */
.drawer-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.drawer{position:fixed;z-index:100001;top:0;right:0;bottom:0;width:min(450px,100%);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(170deg,#121212,#060606);border-left:1px solid var(--line);box-shadow:-30px 0 60px rgba(0,0,0,.5)}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-overlay{opacity:1;visibility:visible}
.drawer__head{position:relative;display:flex;align-items:center;justify-content:center;padding:22px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:22px}
.drawer__head h3 small{font-size:13px;color:var(--muted);font-weight:600}
.drawer__close{position:absolute;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;font-size:20px}
.drawer__close:hover{border-color:var(--gold);color:var(--gold)}
.drawer__body{flex:1;overflow:auto;display:flex;flex-direction:column}
.mini-items{flex:1;padding:0 20px}
.mini-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:20px 0;border-bottom:1px solid var(--line);align-items:center}
.mini-item .thumb,.mini-item .thumb .ph{width:72px;height:54px;border-radius:9px;object-fit:cover;font-size:18px}
.mini-item strong{display:block;font-size:14px;line-height:1.3}
.mini-item small{color:var(--muted)}
.mini-item .price{font-size:14px}
.mini-qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.mini-qty button{width:28px;height:28px;border:0;background:#141414;cursor:pointer}
.mini-qty button:hover{color:var(--gold)}
.mini-qty span{min-width:30px;text-align:center;font-size:13px;font-weight:700}
.remove-btn{background:none;border:0;color:#777;cursor:pointer;padding:6px}
.remove-btn:hover{color:var(--red)}
.mini-foot{padding:20px;border-top:1px solid var(--line);background:#080808}
.mini-foot .row{display:flex;justify-content:space-between;margin-bottom:8px;color:#bdbdbd}
.mini-foot .row.total{font-size:18px;font-weight:900;color:#fff;margin:12px 0 16px}
.mini-foot .row.total span:last-child{color:var(--gold)}
.mini-foot .btn + .btn{margin-top:10px}
.mini-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px;text-align:center;color:var(--muted)}
.mini-empty svg.i{width:56px;height:56px;color:#333}
.drawer.loading .drawer__body{opacity:.5;pointer-events:none}
.progress{height:6px;border-radius:9px;background:#1a1a1a;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}

.cart-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px;align-items:start}
.cart-item{display:flex;align-items:center;gap:14px}
.cart-item img,.cart-item .ph{width:80px;height:58px;border-radius:9px;object-fit:cover;font-size:20px}
.coupon{display:flex;gap:10px;margin-top:16px}
.coupon .input{min-height:48px}
.totals .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.totals .row.total{font-size:20px;font-weight:900;border:0}
.totals .row.total span:last-child{color:var(--gold)}

/* checkout */
.pay-methods{display:grid;gap:10px}
.pay-methods label{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--line-2);cursor:pointer;background:#0a0a0a;transition:.2s;margin:0}
.pay-methods label:has(input:checked){border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.pay-methods input{accent-color:var(--red)}
.coins{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.billing-address{margin:8px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--line-2)}
.billing-address[hidden]{display:none}
.billing-address legend{padding:0;margin-bottom:6px;font-size:15px;font-weight:800;color:#fff}
.billing-address .help{color:var(--muted);font-size:12px}
.billing-address>.help{margin:0 0 16px}
.billing-address>.help:last-child{margin:4px 0 0}
.card-brand{height:22px;min-width:36px;padding:0 6px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;font-style:italic;letter-spacing:.02em;color:#fff}
.card-brand--visa{background:#1a1f71}
.card-brand--amex{background:#2e77bc;font-style:normal}
.card-brand--mc{background:#252525;padding:0 4px}
.card-brand--mc i{width:14px;height:14px;border-radius:50%;background:#eb001b;display:block}
.card-brand--mc i+i{background:#f79e1b;margin-left:-6px;mix-blend-mode:screen}
.coin{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#fff}
.order-summary .line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.keys{display:grid;gap:8px;margin-top:8px}
.key{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:9px;background:#050505;border:1px dashed rgba(245,184,46,.4);font-family:ui-monospace,Menlo,monospace;color:var(--gold);font-size:15px;letter-spacing:1px}
.key button{font-family:var(--font);font-size:11px}
.waiting{display:flex;align-items:center;gap:14px}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid #222;border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* account */
.account{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start}
.account-nav{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#121212,#070707)}
.account-nav a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:10px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.2s}
.account-nav a:hover{color:var(--gold)}
.account-nav a.active{border-color:rgba(226,27,45,.4);background:rgba(226,27,45,.08);color:#fff}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1100px;margin:0 auto}
.auth-card{max-width:520px;margin:0 auto}

/* blog */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--card-bg);transition:transform .28s,border-color .28s}
.post-card:hover{transform:translateY(-6px);border-color:rgba(226,27,45,.5)}
.post-card__media{height:220px;overflow:hidden}
.post-card__media img,.post-card__media .ph{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card__body time{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.post-card__body h3{font-size:19px;line-height:1.35}
.post-card:hover h3{color:var(--gold)}
.post-card__body p{color:#9a9a9a;font-size:14px;margin:0}
.post-card__more{margin-top:auto;color:var(--gold);font-weight:800;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.article{max-width:860px;margin:0 auto}
.article__cover{border-radius:18px;overflow:hidden;margin:20px 0 30px;border:1px solid var(--line)}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding:0 0 110px}
.footer__shell{position:relative;overflow:hidden;width:96%;max-width:1800px;margin:0 auto;border:1px solid rgba(255,255,255,.075);border-radius:20px;
  background:radial-gradient(circle at 0% 0%,rgba(226,27,45,.10),transparent 30%),radial-gradient(circle at 100% 100%,rgba(245,184,46,.05),transparent 30%),linear-gradient(145deg,#111,#070707 55%,#040404)}
.footer__energy{position:absolute;top:0;left:5%;right:5%;height:2px;background:var(--energy);background-size:250% 100%;animation:energyRail 7s linear infinite;box-shadow:0 0 15px rgba(226,27,45,.28)}
.footer__main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:56px 50px 40px}
.footer__brand p{color:#8a8a8a;line-height:1.75;margin:18px 0 22px;max-width:420px}
.footer__logo img{max-width:220px}
.footer h3{font-size:14px;letter-spacing:2px;margin-bottom:20px;position:relative;padding-bottom:12px}
.footer h3::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--red);box-shadow:0 0 8px rgba(226,27,45,.5)}
.footer nav{display:flex;flex-direction:column;gap:12px}
.footer nav a{color:#9a9a9a;font-size:14px;display:inline-flex;align-items:center;gap:8px;transition:color .2s,transform .2s;width:fit-content}
.footer nav a::before{content:"";width:0;height:1px;background:var(--gold);transition:width .25s}
.footer nav a:hover{color:#fff;transform:translateX(3px)}
.footer nav a:hover::before{width:12px}
.discord-btn{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 20px;border-radius:12px;font-weight:850;font-size:13px;letter-spacing:.8px;color:#fff;
  background:linear-gradient(135deg,#3a43c9,#5865F2);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 26px rgba(88,101,242,.22);transition:transform .2s,filter .2s}
.discord-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.discord-btn .arrow{transition:transform .2s}
.discord-btn:hover .arrow{transform:translate(3px,-3px)}
.footer__trust{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 50px 34px}
.footer__trust div{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015)}
.footer__trust svg.i{color:var(--red)}
.footer__trust strong{display:block;font-size:12px;letter-spacing:.8px}
.footer__trust span{color:#6f6f6f;font-size:12px}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 50px;border-top:1px solid rgba(255,255,255,.06);color:#6f6f6f;font-size:13px}
.footer__legal{display:flex;gap:22px;flex-wrap:wrap}
.footer__legal a:hover{color:var(--gold)}

/* =========================================================
   FLOATING BANNER
   ========================================================= */
.float-banner{position:fixed;z-index:99990;left:50%;bottom:18px;transform:translateX(-50%);width:94%;max-width:1180px;min-height:76px;display:flex;align-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:14px;
  background:radial-gradient(circle at 15% 0%,rgba(226,27,45,.18),transparent 28%),radial-gradient(circle at 78% 120%,rgba(245,184,46,.07),transparent 28%),linear-gradient(110deg,rgba(16,16,16,.98) 0%,rgba(6,6,6,.985) 48%,rgba(13,6,7,.99) 100%);
  box-shadow:0 18px 60px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.055);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  animation:bannerIn .6s cubic-bezier(.2,.8,.2,1) .8s both}
.float-banner.hide{animation:bannerOut .35s ease forwards}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,40px)}}
@keyframes bannerOut{to{opacity:0;transform:translate(-50%,40px)}}
.float-banner::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--energy);background-size:250% 100%;animation:energyRail 5s linear infinite}
.float-glow{position:absolute;left:-40px;top:-40px;width:180px;height:140px;border-radius:50%;background:rgba(226,27,45,.25);filter:blur(50px);pointer-events:none;animation:glow 4s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.4;transform:translateX(30px)}}
.float-main{flex:1;display:flex;align-items:center;gap:18px;padding:12px 64px 12px 16px;min-width:0}
.float-icon{width:50px;height:50px;flex:0 0 50px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#8f0712,var(--red));box-shadow:0 8px 20px rgba(226,27,45,.3)}
.float-content{flex:1;min-width:0}
.float-topline{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.float-live{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-size:10px;font-weight:900;letter-spacing:1.5px}
.float-live i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulseRed 1.4s ease-in-out infinite alternate}
@keyframes pulseRed{from{opacity:.45}to{opacity:1;box-shadow:0 0 12px var(--red-hot)}}
.float-mini{color:#555;font-size:10px;font-weight:800;letter-spacing:1.5px}
.float-title{font-size:17px;font-weight:900;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-desc{color:#8c8c8c;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float-cta{display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:11px;border:1px solid rgba(245,184,46,.3);background:rgba(245,184,46,.06);transition:.25s}
.float-cta small{display:block;color:#8a8a8a;font-size:10px;font-weight:800;letter-spacing:1.2px}
.float-cta strong{display:block;color:var(--gold);font-size:14px;letter-spacing:.8px}
.float-arrow{color:var(--gold);font-size:20px;transition:transform .25s}
.float-main:hover .float-cta{background:rgba(245,184,46,.12)}
.float-main:hover .float-arrow{transform:translateX(4px)}
.float-close{position:absolute;right:14px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);cursor:pointer;color:#aaa;font-size:18px}
.float-close:hover{color:#fff;border-color:var(--red);transform:rotate(90deg);transition:.25s}

/* Scroll reveal */
.js .reveal:not(.in){opacity:0;transform:translateY(22px)}
.reveal{transition:opacity .7s ease,transform .7s ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1500px){
  .hdx-logo-panel{flex-basis:300px;width:300px}
  .hdx-logo{width:200px}
  .hdx-nav{gap:28px}
  .hdx-buy{width:180px;flex-basis:180px;font-size:17px}
}
@media (max-width:1200px){
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hdx-nav{gap:20px}
  .hdx-nav a{font-size:14px}
  .hdx-logo-panel{flex-basis:240px;width:240px}
  .hdx-logo{width:160px}
  .wordmark{font-size:20px}
  .footer__main{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1100px){
  .trust{grid-template-columns:1fr 1fr;padding:20px}
  .trust__divider{display:none}
  .trust__item{justify-content:flex-start;min-height:82px}
  .pp-top,.overview,.reviews-layout,.cart-layout{grid-template-columns:1fr}
  .rv__cards{grid-template-columns:1fr 1fr}
  .post-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  .hdx-header{padding:12px}
  .hdx-frame{height:84px;padding:0 14px;clip-path:polygon(2.5% 0,97.5% 0,100% 30%,100% 70%,97.5% 100%,2.5% 100%,0 70%,0 30%)}
  .hdx-nav,.hdx-top-marks,.hdx-energy,.hdx-bottom-detail,.hdx-logo-detail{display:none}
  .hdx-top-rail{top:10px;left:30%}
  .hdx-burger{display:flex}
  .hdx-logo-panel{flex:1 1 auto;width:auto;height:64px;clip-path:none;background:none;box-shadow:none;justify-content:flex-start;padding-left:6px}
  .hdx-logo-panel::before,.hdx-logo-panel::after{display:none}
  .hdx-logo{width:170px;justify-content:flex-start}
  .hdx-actions{height:60px;padding-left:12px;margin-left:8px;clip-path:none;background:none}
  .hdx-icon{width:44px;height:44px;flex-basis:44px}
  .hdx-icon svg.i{width:22px;height:22px}
  .hdx-buy{width:120px;flex-basis:120px;height:48px;font-size:13px;gap:8px}
  .hdx-spark{display:none}
}
@media (max-width:900px){
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .shop-hero h1{font-size:38px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3)::before{display:none}
  .account{grid-template-columns:1fr}
  .account-nav{flex-direction:row;overflow:auto}
  .account-nav a{white-space:nowrap}
  .auth-grid{grid-template-columns:1fr}
  .footer__main{grid-template-columns:1fr 1fr;padding:40px 24px 30px}
  .footer__trust{grid-template-columns:1fr 1fr;padding:0 24px 24px}
  .footer__bottom{padding:20px 24px}
}
@media (max-width:767px){
  .wrap{width:94%}
  .hdx-account,.hdx-account-divider{display:none}
  .hdx-buy{width:96px;flex-basis:96px;height:44px;font-size:12px;gap:6px;margin-left:5px}
  .hdx-buy svg{width:17px;height:17px}
  .hdx-logo{width:130px}
  .shop-hero{padding:50px 18px;min-height:0}
  .shop-hero h1{font-size:30px}
  .shop-hero p{font-size:15px}
  .section-title{font-size:26px}
  .cat-tile{min-height:135px;border-radius:11px}
  .cat-tile h3{left:8px;right:8px;bottom:8px;padding:9px 9px 9px 12px;font-size:11px;border-left-width:2px}
  .pcard{min-height:390px;padding-bottom:10px;border-radius:12px}
  .pcard__media{height:150px;flex-basis:150px}
  .pcard__body{padding:12px 12px 0;grid-template-rows:15px 40px 18px 20px auto;row-gap:7px}
  .pcard__title{font-size:12px;line-height:1.5}
  .price{font-size:13px;line-height:20px}
  .pcard .btn{height:39px;font-size:9px;letter-spacing:.2px;padding:0 6px}
  .badge{top:7px;left:7px;padding:5px 7px;font-size:8px}
  .badge--hot{left:auto;right:7px}
  .trust{width:94%;margin-bottom:50px;padding:12px 8px;border-radius:13px}
  .trust__item{min-height:90px;gap:10px;padding:12px 8px}
  .trust__icon{width:38px;height:38px;flex-basis:38px}
  .trust__item strong{font-size:10px;letter-spacing:.25px;white-space:normal}
  .trust__item span{font-size:9px;white-space:normal}
  .pp-info,.plan-card,.panel{padding:20px}
  .pp-highlights{grid-template-columns:1fr}
  .rv{padding:22px}
  .rv__cards{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .table thead{display:none}
  .table tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  .table td{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border:0}
  .table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:12px}
  .float-banner{min-height:64px;bottom:10px}
  .float-main{gap:10px;padding:10px 48px 10px 10px}
  .float-icon{width:40px;height:40px;flex-basis:40px}
  .float-title{font-size:13px}
  .float-desc,.float-mini,.float-cta small{display:none}
  .float-cta{padding:8px 10px}
  .float-cta strong{font-size:11px}
  .footer__main,.footer__trust{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hdx-frame{padding:0 8px}
  .hdx-divider{display:none}
  .hdx-logo{width:110px}
  .wordmark{font-size:16px;letter-spacing:1px}
  .hdx-icon{width:38px;height:38px;flex-basis:38px}
  .hdx-actions{padding-left:4px;margin-left:4px}
  .hdx-buy{width:80px;flex-basis:80px;font-size:11px}
  .hdx-buy svg{display:none}
}
@media (max-width:380px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
}

/* =========================================================
   BLOG POST (single)
   ========================================================= */
.post-head{padding:34px 0 26px;max-width:1500px;margin:0 auto}
.breadcrumb--post{text-align:left;margin:0 0 16px;font-size:13px}
.post-head h1{font-size:clamp(30px,3.6vw,50px);line-height:1.12;letter-spacing:-1px;max-width:1100px}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;color:var(--muted);font-size:13px}
.post-meta a:hover{color:var(--gold)}
.post-meta span{opacity:.5}

/* trust strip */
.post-trust{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:1500px;margin:0 auto;overflow:hidden;border:1px solid #292929;border-radius:13px;
  background:radial-gradient(circle at 0% 50%,rgba(226,27,45,.06),transparent 25%),radial-gradient(circle at 100% 50%,rgba(245,184,46,.04),transparent 25%),linear-gradient(145deg,#111,#070707);
  box-shadow:0 20px 50px rgba(0,0,0,.48)}
.post-trust::before{content:"";position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--red),var(--gold),var(--red),transparent)}
.post-trust__item{display:flex;align-items:center;justify-content:center;gap:13px;min-width:0;min-height:86px;padding:16px 20px;border-right:1px solid #252525}
.post-trust__item:last-child{border-right:0}
.post-trust__icon{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;color:var(--red);background:rgba(226,27,45,.08);border:1px solid rgba(226,27,45,.35)}
.post-trust__icon svg.i{width:17px;height:17px}
.post-trust__item strong{display:block;font-size:12px;font-weight:900;letter-spacing:.3px;line-height:1.2}
.post-trust__item span{display:block;margin-top:4px;color:#8B8B8B;font-size:11px;font-weight:500}

/* layout */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start;max-width:1500px;margin:38px auto 0}
.post-main{padding:34px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#111,#070707);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.post-cover{margin:0 0 26px;border-radius:14px;overflow:hidden;border:1px solid #242424}
.post-cover img{width:100%}
.post-lead{color:#d6d6d6;font-size:18px;line-height:1.75;margin-bottom:24px}

/* "in this guide" contents box */
.post-toc{margin:0 0 30px;padding:22px 24px;border:1px solid #242424;border-radius:13px;background:linear-gradient(145deg,#0c0c0c,#070707)}
.post-toc h2{font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.post-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.post-toc li.lvl-h3{padding-left:18px}
.post-toc a{display:inline-flex;align-items:center;gap:9px;color:#b9b9b9;font-size:14px;font-weight:600;transition:color .2s,transform .2s}
.post-toc a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:0 0 6px;box-shadow:0 0 7px rgba(226,27,45,.5)}
.post-toc li.lvl-h3 a::before{background:#4a4a4a;box-shadow:none;width:5px;height:5px;flex-basis:5px}
.post-toc a:hover{color:var(--gold);transform:translateX(3px)}

/* article body */
.post-body{font-size:16px;line-height:1.85}
.post-body h2{scroll-margin-top:30px;font-size:clamp(23px,2.2vw,30px);margin:1.7em 0 .6em;padding-top:1.1em;border-top:1px solid var(--line);text-transform:none}
.post-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
.post-body h3{scroll-margin-top:30px;font-size:19px;margin:1.5em 0 .5em;color:var(--gold);text-transform:none}
.post-body figure{margin:1.6em 0}
.post-body figure img{border-radius:12px;border:1px solid #242424;width:100%}
.post-body figcaption{margin-top:10px;color:#7d7d7d;font-size:13px;font-style:italic;text-align:center}
.post-body ul,.post-body ol{padding-left:1.3em;margin:1em 0}
.post-body li{margin:.45em 0}
.post-body blockquote{margin:1.5em 0;padding:16px 22px;border-left:3px solid var(--red);border-radius:0 10px 10px 0;background:rgba(226,27,45,.05);color:#d2d2d2}
.post-body table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14px}
.post-body th{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2);color:var(--gold);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.post-body td{padding:12px 14px;border-bottom:1px solid var(--line)}
.post-body video{width:100%;border-radius:12px;border:1px solid #242424;margin:1.5em 0}

/* in-article CTA */
.post-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:38px;padding:24px 26px;overflow:hidden;border:1px solid #2B2B2B;border-radius:13px;
  background:radial-gradient(circle at 0% 50%,rgba(226,27,45,.10),transparent 30%),radial-gradient(circle at 100% 50%,rgba(245,184,46,.05),transparent 30%),linear-gradient(145deg,#111,#070707);
  box-shadow:0 18px 40px rgba(0,0,0,.25)}
.post-cta::before{content:"";position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--red),var(--gold),var(--red),transparent)}
.post-cta__copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.post-cta__label{color:var(--red);font-size:10px;font-weight:900;letter-spacing:1px}
.post-cta__title{color:#fff;font-size:19px;font-weight:900;line-height:1.25}
.post-cta__action{display:flex;align-items:center;gap:20px;flex-shrink:0}
.post-cta__price{color:var(--gold);font-size:20px;font-weight:900;white-space:nowrap}
.post-cta__btn{display:flex;align-items:center;justify-content:center;min-width:165px;min-height:48px;padding:0 20px;color:#fff;border-radius:8px;font-size:11px;font-weight:900;letter-spacing:.7px;
  background:linear-gradient(135deg,#970B18,var(--red));border:1px solid rgba(255,70,85,.45);box-shadow:0 10px 25px rgba(226,27,45,.15);transition:transform .2s,filter .2s,box-shadow .2s}
.post-cta__btn:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 13px 30px rgba(226,27,45,.25)}
.post-tags{margin-top:26px}

/* sidebar */
.post-side__sticky{position:sticky;top:20px;display:grid;gap:18px}
.rp,.post-side__box{overflow:hidden;border:1px solid #292929;border-radius:14px;background:linear-gradient(145deg,#101010,#070707);box-shadow:0 20px 45px rgba(0,0,0,.28)}
.rp__label{padding:14px 18px;color:var(--gold);background:#0A0A0A;border-bottom:1px solid #252525;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.rp__image{display:flex;align-items:center;justify-content:center;width:100%;min-height:200px;padding:14px;background:#050505;overflow:hidden}
.rp__image img{width:100%;height:auto;max-height:300px;object-fit:contain;transition:transform .3s}
.rp__image .ph{width:100%;height:180px;border-radius:10px}
.rp__image:hover img{transform:scale(1.025)}
.rp__body{padding:22px}
.rp__title{font-size:20px;font-weight:900;line-height:1.25;margin-bottom:12px}
.rp__title a:hover{color:var(--gold)}
.rp__rating{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.rp__rating span{color:#A0A0A0;font-size:11px;font-weight:600}
.rp__features{margin-bottom:20px;color:#BEBEBE;font-size:13px;line-height:1.5}
.rp__price{margin-bottom:16px;color:var(--gold);font-size:23px;font-weight:900}
.rp__button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 18px;color:#fff;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;
  background:linear-gradient(135deg,#970B18,var(--red));border:1px solid rgba(255,70,85,.45);box-shadow:0 10px 25px rgba(226,27,45,.12);transition:transform .2s,filter .2s,box-shadow .2s}
.rp__button:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 12px 30px rgba(226,27,45,.22)}

.post-support{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid #292929;border-radius:12px;background:linear-gradient(145deg,#101010,#080808)}
.post-support__icon{display:flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;color:var(--gold);background:rgba(245,184,46,.07);border:1px solid rgba(245,184,46,.30)}
.post-support__icon svg.i{width:18px;height:18px}
.post-support__title{margin-bottom:6px;font-size:13px;font-weight:900;letter-spacing:.5px}
.post-support__text{margin-bottom:13px;color:#999;font-size:12px;line-height:1.55}
.post-support__btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 15px;color:#fff;background:var(--red);border-radius:7px;font-size:10px;font-weight:900;letter-spacing:.5px;transition:transform .2s,filter .2s}
.post-support__btn:hover{transform:translateY(-2px);filter:brightness(1.12)}

.side-posts{display:grid}
.side-post{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .2s}
.side-post:last-child{border-bottom:0}
.side-post:hover{background:rgba(226,27,45,.05)}
.side-post img,.side-post .ph{width:64px;height:46px;flex:0 0 64px;border-radius:8px;object-fit:cover;font-size:15px}
.side-post strong{display:block;font-size:13px;line-height:1.35;font-weight:700}
.side-post small{color:var(--muted);font-size:11px}
.side-post:hover strong{color:var(--gold)}

@media (max-width:1100px){
  .post-layout{grid-template-columns:1fr}
  .post-side__sticky{position:static;grid-template-columns:1fr 1fr;align-items:start}
}
@media (max-width:1024px){
  .post-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-trust__item{justify-content:flex-start;min-height:72px;padding:14px 18px}
  .post-trust__item:nth-child(2){border-right:0}
  .post-trust__item:nth-child(1),.post-trust__item:nth-child(2){border-bottom:1px solid #252525}
}
@media (max-width:767px){
  .post-main{padding:20px}
  .post-toc{padding:18px}
  .post-body{font-size:15px}
  .post-side__sticky{grid-template-columns:1fr}
  .post-trust{border-radius:10px}
  .post-trust__item{gap:9px;min-height:66px;padding:11px 10px}
  .post-trust__icon{flex:0 0 29px;width:29px;height:29px}
  .post-trust__icon svg.i{width:14px;height:14px}
  .post-trust__item strong{font-size:10px}
  .post-trust__item span{font-size:9px}
  .post-cta{flex-direction:column;align-items:stretch;gap:18px;margin-top:28px;padding:20px 18px}
  .post-cta__title{font-size:17px}
  .post-cta__action{width:100%;justify-content:space-between;gap:15px}
  .post-cta__btn{min-width:145px;min-height:46px;font-size:10px}
}
@media (max-width:420px){
  .post-cta__action{flex-direction:column;align-items:stretch}
  .post-cta__price{text-align:center}
  .post-cta__btn{width:100%}
}

/* =========================================================
   PRODUCT – POWERFUL FEATURES GRID
   ========================================================= */
.df,.media{margin:85px auto 0}
.df__head,.media__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px;flex-wrap:wrap}
.df__heading{max-width:75%}
.df__title,.media__title{font-size:clamp(34px,3vw,52px);font-weight:900;line-height:1;letter-spacing:-1.6px;text-transform:uppercase}
.df__title span,.media__title span{color:var(--gold)}
.df__subtitle,.media__desc{margin:15px 0 0;color:#929292;font-size:15px;line-height:1.7;max-width:760px}
.df__counter,.media__count{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:12px 17px;border:1px solid #292929;border-radius:12px;background:rgba(14,14,14,.78)}
.df__counter strong,.media__count strong{color:var(--gold);font-size:24px;font-weight:900;line-height:1}
.df__counter span,.media__count span{color:#9A9A9A;font-size:10px;font-weight:600;line-height:1.25;text-transform:uppercase;letter-spacing:.7px}

.df__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,.75fr);grid-auto-rows:minmax(245px,auto);gap:14px}
.df__grid:has(.df__card:first-child:nth-last-child(-n+2)){grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.df__card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:25px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#080808;
  box-shadow:0 15px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.df__card:first-child{padding:34px}
.df__card:first-child:nth-last-child(n+5){grid-row:span 2}
.df__image{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.01);transition:transform .55s ease,filter .55s ease}
.df__image--empty{background:radial-gradient(circle at 25% 15%,rgba(226,27,45,.35),transparent 55%),radial-gradient(circle at 85% 95%,rgba(245,184,46,.18),transparent 50%),linear-gradient(135deg,#1c1c1c,#060606)}
.df__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(3,3,3,.99) 0%,rgba(4,4,4,.91) 25%,rgba(5,5,5,.56) 53%,rgba(5,5,5,.14) 100%)}
.df__overlay::after{content:"";position:absolute;right:-100px;bottom:-120px;width:250px;height:250px;border-radius:50%;background:rgba(245,184,46,.11);filter:blur(60px)}
.df__content{position:relative;z-index:3}
.df__label{display:inline-flex;width:fit-content;margin-bottom:10px;padding:5px 9px;color:var(--gold);border:1px solid rgba(245,184,46,.16);border-radius:20px;background:rgba(245,184,46,.08);font-size:9px;font-weight:800;line-height:1;letter-spacing:1px;text-transform:uppercase}
.df__name{font-size:23px;font-weight:800;line-height:1.05;letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.df__card:first-child .df__name{font-size:clamp(28px,2.1vw,38px)}
.df__card:first-child:nth-last-child(n+5) .df__name{font-size:clamp(31px,2.4vw,43px)}
.df__desc{margin:10px 0 0;color:#A0A0A0;font-size:12px;line-height:1.6}
.df__card:first-child .df__desc{width:76%;margin-top:14px;font-size:14px;line-height:1.7}
.df__card:hover{transform:translateY(-4px);border-color:rgba(245,184,46,.35);box-shadow:0 22px 50px rgba(0,0,0,.42),0 0 30px rgba(245,184,46,.05)}
.df__card:hover .df__image{transform:scale(1.07);filter:brightness(1.08) contrast(1.04)}

/* =========================================================
   PRODUCT – SEE IT IN ACTION
   ========================================================= */
.media__grid{display:grid;grid-template-columns:1.35fr .95fr;gap:14px}
.media__grid--no-video{grid-template-columns:1fr}
.video{position:relative;height:620px;overflow:hidden;border:1px solid #242424;border-radius:18px;background:#050505}
.video__player{position:absolute;inset:0}
.video__player iframe,.video__player video{width:100%;height:100%;display:block;border:0;background:#000}
.video__player video{object-fit:contain}
.video__poster{position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;border:0;cursor:pointer;background-color:#050505;background-size:cover;background-position:center}
.video__poster::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(245,184,46,.07),transparent 32%),linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,.15) 55%,rgba(0,0,0,.78))}
.video__play{position:absolute;top:50%;left:50%;width:86px;height:86px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;border-radius:50%;color:#111;
  background:linear-gradient(135deg,#FFD15A,#EFAE18);box-shadow:0 0 0 12px rgba(245,184,46,.09),0 15px 40px rgba(0,0,0,.5);transition:.25s ease}
.video__play svg.i{width:31px;height:31px;margin-left:5px}
.video__poster:hover .video__play{transform:translate(-50%,-50%) scale(1.08)}
.video__info{position:absolute;left:25px;bottom:23px;text-align:left}
.video__info small{display:block;margin-bottom:6px;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:1.3px}
.video__info strong{color:#fff;font-size:25px;font-weight:900}
.shots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:14px;height:620px}
.media__grid--no-video .shots{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;height:300px}
.shot{position:relative;display:block;min-width:0;min-height:0;padding:0;overflow:hidden;border:1px solid #242424;border-radius:18px;background:#050505;cursor:zoom-in;transition:.25s ease}
.shot:hover{transform:translateY(-3px);border-color:rgba(245,184,46,.4)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.shot:hover img{transform:scale(1.04)}
.shot__icon{position:absolute;top:16px;left:16px;z-index:3;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--gold);border:1px solid rgba(245,184,46,.35);border-radius:11px;background:rgba(5,5,5,.76);backdrop-filter:blur(8px);pointer-events:none}

.lightbox{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:25px;background:rgba(0,0,0,.94);backdrop-filter:blur(10px)}
.lightbox.open{display:flex}
.lightbox img{max-width:94vw;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:12px}
.lightbox__close{position:absolute;top:20px;right:22px;width:45px;height:45px;display:flex;align-items:center;justify-content:center;border:1px solid #444;border-radius:50%;background:#141414;color:#fff;font-size:28px;cursor:pointer}
.lightbox__close:hover{border-color:var(--gold);color:var(--gold)}

@media (max-width:1024px){
  .df,.media{margin-top:65px}
  .df__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .df__card{min-height:235px;padding:24px}
  .df__card:first-child{grid-column:span 2;grid-row:auto;min-height:340px}
  .media__grid{grid-template-columns:1fr}
  .video{height:460px}
  .shots,.media__grid--no-video .shots{height:540px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
}
@media (max-width:767px){
  .df,.media{margin-top:50px}
  .df__head,.media__head{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:24px}
  .df__heading{max-width:100%}
  .df__title,.media__title{font-size:34px;line-height:1.05}
  .df__subtitle,.media__desc{font-size:13px}
  .df__grid{grid-template-columns:1fr;gap:11px}
  .df__card,.df__card:first-child{grid-column:auto;grid-row:auto;min-height:230px;padding:22px}
  .df__card:first-child{min-height:360px}
  .df__card:first-child .df__desc{width:100%}
  .df__name{font-size:22px}
  .df__card:first-child .df__name{font-size:31px}
  .video{height:280px}
  .shots,.media__grid--no-video .shots{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .shot{height:240px}
  .video__play{width:68px;height:68px}
}