/*
 *  ONYX HUB � Premium Red & Black Gaming Theme v3
 *  Complete visual overhaul � gradient borders, glass effects, glow
 */

/* ???????????????????????????????????????????????????????????
   1. GLOBAL
   ??????????????????????????????????????????????????????????? */
::selection { background: rgba(220,38,38,.4); color: #fff; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #06060c; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #dc2626, #991b1b); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ef4444; }
body { animation: fadeIn .6s ease; -webkit-font-smoothing: antialiased; }
/* Scroll performance — offscreen sections skip rendering */
.component { content-visibility: auto; contain-intrinsic-size: 500px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ???????????????????????????????????????????????????????????
   2. BACKGROUND GLOW
   ??????????????????????????????????????????????????????????? */
body::before {
  content: ''; position: fixed; top: -40%; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 1200px;
  background: radial-gradient(ellipse, rgba(220,38,38,.06) 0%, transparent 65%);
  pointer-events: none; z-index: -1;
}
body::after {
  content: ''; position: fixed; bottom: -30%; right: -15%;
  width: 800px; height: 800px;
  background: radial-gradient(ellipse, rgba(220,38,38,.04) 0%, transparent 65%);
  pointer-events: none; z-index: -1;
}
#particles-js { opacity: .25; }

/* ???????????????????????????????????????????????????????????
   3. CARDS � Gradient border glow + lift on hover
   ??????????????????????????????????????????????????????????? */
.bg-card\/75, .bg-card\/90, [class*="bg-card/"] {
  transition: all .35s cubic-bezier(.4,0,.2,1);
  border: 1px solid rgba(255,255,255,.04) !important;
}
a[href*="/product/"]:hover .bg-card\/75,
a[href*="/product/"]:hover [class*="bg-card/"] {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(220,38,38,.1), 0 8px 30px rgba(0,0,0,.4) !important;
  border-color: rgba(220,38,38,.2) !important;
}

/* ???????????????????????????????????????????????????????????
   4. BUTTONS � Gradient red with glow
   ??????????????????????????????????????????????????????????? */
.bg-accent-500, button.bg-accent-500 {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  box-shadow: 0 0 20px rgba(220,38,38,.3), 0 2px 8px rgba(0,0,0,.3);
  border: none !important;
  font-weight: 700; letter-spacing: .5px;
  transition: all .3s ease;
}
.bg-accent-500:hover, button.bg-accent-500:hover {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  box-shadow: 0 0 35px rgba(220,38,38,.5), 0 4px 12px rgba(0,0,0,.4);
  transform: translateY(-1px);
}
.border-accent-500 {
  border-color: rgba(220,38,38,.25) !important;
  transition: all .3s ease;
}
.border-accent-500:hover {
  background: rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.5) !important;
  box-shadow: 0 0 20px rgba(220,38,38,.15);
}

/* ???????????????????????????????????????????????????????????
   5. NAVBAR � Frosted glass + red underline
   ??????????????????????????????????????????????????????????? */
nav .bg-card\/75 {
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(220,38,38,.12) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.3);
}
nav a[href]:not([href="/cart"]) {
  position: relative; font-weight: 500; letter-spacing: .3px;
}
nav a[href]:not([href="/cart"])::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #dc2626, #ef4444);
  border-radius: 1px;
  transition: width .3s cubic-bezier(.4,0,.2,1);
}
nav a[href]:not([href="/cart"]):hover { color: #fff; }
nav a[href]:not([href="/cart"]):hover::after { width: 100%; }

/* ???????????????????????????????????????????????????????????
   6. HERO � Dramatic gradient text
   ??????????????????????????????????????????????????????????? */
[data-component-id="hero"] h1 {
  font-size: clamp(2rem, 5vw, 3.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.5px;
}
[data-component-id="hero"] h1 .text-accent-500 {
  background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none !important;
  filter: drop-shadow(0 0 30px rgba(220,38,38,.4));
}
[data-component-id="hero"] p {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.55) !important;
  max-width: 650px; margin: 0 auto;
}
[data-component-id="hero"] a {
  padding: .75rem 2rem !important;
  font-weight: 600 !important; letter-spacing: .5px;
  border-radius: 4px;
  transition: all .3s ease;
}
[data-component-id="hero"] a:hover { transform: translateY(-2px); }

/* ???????????????????????????????????????????????????????????
   7. STATS � Gradient numbers
   ??????????????????????????????????????????????????????????? */
[data-component-id="stats"] .text-accent-500 {
  font-size: 2.25rem !important; font-weight: 900 !important;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff 0%, rgba(220,38,38,.8) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-component-id="stats"] > div > div {
  background: rgba(255,255,255,.015);
  border-radius: 6px;
  padding: 1.5rem 1rem !important;
  border: 1px solid rgba(255,255,255,.03) !important;
}
[data-component-id="stats"] > div > div:hover {
  border-color: rgba(220,38,38,.1) !important;
}

/* ???????????????????????????????????????????????????????????
   8. PRODUCT CARDS � Image zoom + bold prices
   ??????????????????????????????????????????????????????????? */
a[href*="/product/"] img {
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  filter: brightness(.9);
}
a[href*="/product/"]:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}
.badges > div {
  font-weight: 700 !important; letter-spacing: .8px;
  font-size: .65rem !important; padding: .25rem .7rem !important;
  border-radius: 3px;
}
a[href*="/product/"] .text-accent-500 {
  font-weight: 800 !important; font-size: 1.05rem !important;
  letter-spacing: -.3px;
}

/* ???????????????????????????????????????????????????????????
   9. FEATURE CARDS � Red icon box + hover lift
   ??????????????????????????????????????????????????????????? */
[data-component-id*="features"] .bg-card\/75 {
  padding: 1.75rem !important; border-radius: 6px;
  transition: all .35s ease;
}
[data-component-id*="features"] .bg-card\/75:hover {
  border-color: rgba(220,38,38,.15) !important;
  box-shadow: 0 0 30px rgba(220,38,38,.06), 0 4px 16px rgba(0,0,0,.3);
  transform: translateY(-2px);
}
[data-component-id*="features"] .text-accent-500 {
  display: flex !important; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: linear-gradient(135deg, rgba(220,38,38,.15), rgba(220,38,38,.05));
  border: 1px solid rgba(220,38,38,.15);
  border-radius: 10px;
  font-size: 1.2rem !important;
  margin-bottom: 1rem;
}
[data-component-id*="features"] h4 {
  font-size: 1rem !important; font-weight: 700 !important;
  letter-spacing: .2px; margin-bottom: .5rem !important;
}
[data-component-id*="features"] .text-t-primary\/80 {
  font-size: .8rem !important; line-height: 1.55 !important;
  color: rgba(255,255,255,.45) !important;
}

/* ???????????????????????????????????????????????????????????
   10. SECTION TITLES � Glowing red line
   ??????????????????????????????????????????????????????????? */
.component h1 {
  font-weight: 800 !important; letter-spacing: -.3px;
}
.component hr.border-accent-500 {
  height: 2px !important; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,.4), transparent) !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(220,38,38,.2);
  width: 60px !important;
  margin: .75rem auto 2rem !important;
}

/* ???????????????????????????????????????????????????????????
   11. FAQ � Accordion polish
   ??????????????????????????????????????????????????????????? */
[data-component-id*="faq"] .bg-card\/75 { border-radius: 4px; transition: all .3s ease; }
[data-component-id*="faq"] .bg-card\/75:hover { border-color: rgba(220,38,38,.1) !important; }
[data-component-id*="faq"] button { font-weight: 600 !important; letter-spacing: .3px; }
[data-component-id*="faq"] [x-ref="content"] { transition: max-height .5s cubic-bezier(.4,0,.2,1); }

/* ???????????????????????????????????????????????????????????
   12. FOOTER � Blur bar
   ??????????????????????????????????????????????????????????? */
footer .bg-card\/90 {
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(220,38,38,.08) !important;
}

/* ???????????????????????????????????????????????????????????
   13. INPUTS � Red focus ring
   ??????????????????????????????????????????????????????????? */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220,38,38,.15), 0 0 25px rgba(220,38,38,.08) !important;
  border-color: rgba(220,38,38,.3) !important;
}

/* ???????????????????????????????????????????????????????????
   14. ANNOUNCEMENT � Gradient bar
   ??????????????????????????????????????????????????????????? */
.announcement {
  background: linear-gradient(90deg, rgba(220,38,38,.06), rgba(220,38,38,.03), rgba(220,38,38,.06)) !important;
  border-bottom: 1px solid rgba(220,38,38,.1) !important;
  font-weight: 500; letter-spacing: .3px;
}

/* ???????????????????????????????????????????????????????????
   15. BADGE GLOW ANIMATIONS
   ??????????????????????????????????????????????????????????? */
.badges .bg-accent-500 { animation: badgeGlow 2.5s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(220,38,38,.2); }
  50% { box-shadow: 0 0 14px rgba(220,38,38,.4); }
}
.badges [style*="#16a34a"] { animation: greenGlow 3s ease-in-out infinite !important; }
@keyframes greenGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(22,163,74,.2); }
  50% { box-shadow: 0 0 12px rgba(22,163,74,.35); }
}

/* ???????????????????????????????????????????????????????????
   16. VIDEO BORDER
   ??????????????????????????????????????????????????????????? */
[data-component-id*="text-video"] lite-youtube {
  border: 1px solid rgba(220,38,38,.12);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 50px rgba(220,38,38,.06);
}

/* ???????????????????????????????????????????????????????????
   17. RESPONSIVE
   ??????????????????????????????????????????????????????????? */
@media (max-width: 768px) {
  [data-component-id="hero"] h1 { font-size: 2rem !important; }
  .component > .py-6 { padding: 2rem 0 !important; }
  [data-component-id*="features"] .bg-card\/75 { padding: 1.25rem !important; }
}

/* ???????????????????????????????????????????????????????????
   18. CART & CHECKOUT � Premium payment section
   ??????????????????????????????????????????????????????????? */
[data-component-id*="cart"] .bg-card\/75,
[data-component-id*="cart"] [class*="bg-card/"] {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.05) !important;
}
[data-component-id*="cart"] .bg-accent-500 {
  width: 100%; justify-content: center;
  font-size: 1rem !important; padding: .875rem 2rem !important;
  letter-spacing: .8px; text-transform: uppercase;
}
[data-component-id*="cart"] input,
[data-component-id*="cart"] select,
[data-component-id*="cart"] textarea {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 4px; padding: .7rem .9rem !important;
  transition: all .3s ease; color: #fff !important;
}
[data-component-id*="cart"] input:focus,
[data-component-id*="cart"] select:focus {
  border-color: rgba(220,38,38,.3) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1), 0 0 20px rgba(220,38,38,.06) !important;
}
[data-component-id*="cart"] label {
  font-weight: 600; letter-spacing: .3px; font-size: .85rem;
  color: rgba(255,255,255,.7) !important;
  margin-bottom: .4rem; display: block;
}
[data-component-id*="cart"] button.bg-accent-500 {
  position: relative; overflow: hidden;
}
[data-component-id*="cart"] button.bg-accent-500::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-100%); transition: transform .6s ease;
}
[data-component-id*="cart"] button.bg-accent-500:hover::after {
  transform: translateX(100%);
}

/* ???????????????????????????????????????????????????????????
   19. NOISE TEXTURE � Subtle grain for premium feel
   ??????????????????????????????????????????????????????????? */
#app::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 256px 256px;
  pointer-events: none; z-index: 9999; opacity: .5;
}

/* ???????????????????????????????????????????????????????????
   20. SECTION DIVIDERS � Glow separators
   ??????????????????????????????????????????????????????????? */
.component + .component {
  position: relative;
}
.component + .component::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 80%; max-width: 800px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,.08), transparent);
}

/* ???????????????????????????????????????????????????????????
   21. FEEDBACK CARDS � Red top accent line
   ??????????????????????????????????????????????????????????? */
[data-component-id*="feedback"] .bg-card\/75,
[data-component-id*="feedbacks"] .bg-card\/75 {
  padding: 1.5rem !important; border-radius: 6px;
  position: relative; overflow: hidden;
}
[data-component-id*="feedback"] .bg-card\/75::before,
[data-component-id*="feedbacks"] .bg-card\/75::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,.3), transparent);
}
[data-component-id*="feedback"] .text-accent-500 svg,
[data-component-id*="feedbacks"] .text-accent-500 svg {
  filter: drop-shadow(0 0 2px rgba(220,38,38,.3));
}

/* ???????????????????????????????????????????????????????????
   22. STRIKETHROUGH PRICES
   ??????????????????????????????????????????????????????????? */
.line-through {
  color: rgba(255,255,255,.3) !important;
  text-decoration-color: rgba(220,38,38,.4) !important;
}

/* ???????????????????????????????????????????????????????????
   23. PRODUCT PAGE � Complete redesign
   ??????????????????????????????????????????????????????????? */
[data-component-id="product-page"] {
  max-width: 960px; margin: 0 auto;
}
[data-component-id="product-page"] .lg\:w-3\/5 { width: 55% !important; }
[data-component-id="product-page"] .lg\:w-2\/5 { width: 45% !important; }

/* Product image container - thicker border, glow */
[data-component-id="product-page"] .aspect-video {
  border: 2px solid rgba(220,38,38,.12) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 0 40px rgba(220,38,38,.08) !important;
  background: #0a0a0f !important;
}
[data-component-id="product-page"] .aspect-video img {
  object-fit: contain !important;
  padding: 1rem;
}

/* Product title - BIG and BOLD */
[data-component-id="product-page"] h1 {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  letter-spacing: -.4px !important;
  color: #fff !important;
  text-transform: uppercase;
}

/* Status badge */
[data-component-id="product-page"] .status span {
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 3px;
  background: rgba(22,163,74,.1);
}

/* Tabs */
[data-component-id="product-page"] [x-data*="activeTab"] button {
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
  transition: all .2s ease;
}

/* Description area */
[data-component-id="product-page"] .editor {
  font-size: .95rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,.6) !important;
}
[data-component-id="product-page"] .editor ul {
  list-style: none !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem 1.5rem;
}
[data-component-id="product-page"] .editor ul li {
  padding: .4rem 0 .4rem 1.4rem !important;
  position: relative !important;
  font-size: .85rem;
}
[data-component-id="product-page"] .editor ul li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: .7rem !important;
  width: 7px !important;
  height: 7px !important;
  background: #dc2626 !important;
  border-radius: 1px !important;
  box-shadow: 0 0 6px rgba(220,38,38,.4);
}
[data-component-id="product-page"] .editor strong {
  color: #fff !important;
  font-weight: 700;
}
[data-component-id="product-page"] .editor p {
  margin-bottom: .75rem;
}

/* Price section */
[data-component-id="product-page"] .lg\:w-2\/5 .text-3xl {
  font-size: 2.25rem !important;
  font-weight: 900 !important;
  letter-spacing: -1px !important;
  background: linear-gradient(180deg, #fff 0%, rgba(220,38,38,.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stock badge */
[data-component-id="product-page"] .text-accent-500 svg {
  color: #22c55e !important;
}

/* Buy form container */
[data-component-id="product-page"] .lg\:w-2\/5 .bg-card {
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

/* Quantity buttons */
[data-component-id="product-page"] button[type="button"] {
  border-radius: 4px !important;
  font-size: 1.1rem !important;
  transition: all .2s ease;
}

/* Buy Now / Add to Cart buttons */
[data-component-id="product-page"] button[type="submit"],
[data-component-id="product-page"] button.bg-accent-500,
[data-component-id="product-page"] a.bg-accent-500 {
  width: 100% !important;
  justify-content: center !important;
  padding: 1rem !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  margin-top: .5rem !important;
  position: relative;
  overflow: hidden;
}
[data-component-id="product-page"] button[type="submit"]::after,
[data-component-id="product-page"] button.bg-accent-500::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
[data-component-id="product-page"] button[type="submit"]:hover::after,
[data-component-id="product-page"] button.bg-accent-500:hover::after {
  transform: translateX(100%);
}

/* Live stats */
[data-component-id="product-page"] .fa-eye,
[data-component-id="product-page"] .fa-shopping-cart {
  color: #dc2626 !important;
}

/* Badges in product page */
[data-component-id="product-page"] .badges > div {
  font-weight: 700 !important;
  letter-spacing: .8px !important;
  text-transform: uppercase;
  font-size: .7rem !important;
  padding: .35rem .85rem !important;
  border-radius: 4px !important;
}

/* ???????????????????????????????????????????????????????????
   17. RESPONSIVE
   ??????????????????????????????????????????????????????????? */
@media (max-width: 768px) {
  [data-component-id="hero"] h1 { font-size: 2rem !important; }
  .component > .py-6 { padding: 2rem 0 !important; }
  [data-component-id*="features"] .bg-card\/75 { padding: 1.25rem !important; }
}

/* ???????????????????????????????????????????????????????????
   18. CART & CHECKOUT � Premium payment section
   ??????????????????????????????????????????????????????????? */
[data-component-id*="cart"] .bg-card\/75,
[data-component-id*="cart"] [class*="bg-card/"] {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.05) !important;
}
[data-component-id*="cart"] .bg-accent-500 {
  width: 100%;
  justify-content: center;
  font-size: 1rem !important;
  padding: .875rem 2rem !important;
  letter-spacing: .8px;
  text-transform: uppercase;
}
[data-component-id*="cart"] input,
[data-component-id*="cart"] select,
[data-component-id*="cart"] textarea {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 4px;
  padding: .7rem .9rem !important;
  transition: all .3s ease;
  color: #fff !important;
}
[data-component-id*="cart"] input:focus,
[data-component-id*="cart"] select:focus {
  border-color: rgba(220,38,38,.3) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1), 0 0 20px rgba(220,38,38,.06) !important;
}
[data-component-id*="cart"] label {
  font-weight: 600;
  letter-spacing: .3px;
  font-size: .85rem;
  color: rgba(255,255,255,.7) !important;
  margin-bottom: .4rem;
  display: block;
}
/* Checkout CTA glow */
[data-component-id*="cart"] button.bg-accent-500 {
  position: relative;
  overflow: hidden;
}
[data-component-id*="cart"] button.bg-accent-500::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
[data-component-id*="cart"] button.bg-accent-500:hover::after {
  transform: translateX(100%);
}

/* ???????????????????????????????????????????????????????????
   24. SOCIAL PROOF BAR
   ??????????????????????????????????????????????????????????? */
.social-proof { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:center; padding:1rem 1.5rem; background:rgba(220,38,38,.03); border:1px solid rgba(220,38,38,.06); border-radius:8px; max-width:900px; margin:2rem auto; }
.social-proof > div { display:flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:600; color:rgba(255,255,255,.5); letter-spacing:.3px; }
.social-proof > div:not(:last-child)::after { content:''; display:inline-block; width:1px; height:12px; background:rgba(255,255,255,.08); margin-left:.75rem; }

/* ???????????????????????????????????????????????????????????
   25. BACK TO TOP BUTTON
   ??????????????????????????????????????????????????????????? */
#back-to-top { position:fixed; bottom:28px; right:28px; width:48px; height:48px; background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; border:none; border-radius:50%; font-size:22px; cursor:pointer; z-index:100; opacity:0; transform:translateY(12px); transition:all .35s ease; box-shadow:0 0 25px rgba(220,38,38,.35),0 4px 12px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; }
#back-to-top.show { opacity:1; transform:translateY(0); }
#back-to-top:hover { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 0 40px rgba(220,38,38,.5); transform:translateY(-2px); }

/* ???????????????????????????????????????????????????????????
   26. TRUST BADGES IN FOOTER
   ??????????????????????????????????????????????????????????? */
footer::before { content:''; display:block; padding:1.5rem 1rem; border-bottom:1px solid rgba(220,38,38,.06); text-align:center; }
footer .trust-row { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; margin-bottom:1.5rem; font-size:.7rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:rgba(255,255,255,.3); }
footer .trust-row span { color:rgba(255,255,255,.5); }

/* ???????????????????????????????????????????????????????????
   25. CARD 3D TILT � Mouse tracking
   ??????????????????????????????????????????????????????????? */
.tilt-card { transform-style: preserve-3d; perspective: 1000px; transition: transform .1s ease; }
.tilt-card:hover { transition: transform .15s ease; }
.tilt-card .tilt-inner { transition: transform .15s ease; }

/* ???????????????????????????????????????????????????????????
   26. LIVE PURCHASE TOAST
   ??????????????????????????????????????????????????????????? */
.live-toast { position:fixed; bottom:90px; left:24px; z-index:99; background:rgba(255,255,255,.02); backdrop-filter:blur(16px); border:1px solid rgba(220,38,38,.15); border-radius:10px; padding:.85rem 1rem; font-size:.78rem; color:rgba(255,255,255,.8); box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 30px rgba(220,38,38,.06); transform:translateX(-120%); transition:transform .5s cubic-bezier(.4,0,.2,1); display:flex; align-items:center; gap:.6rem; max-width:320px; }
.live-toast.show { transform:translateX(0); }
.live-toast .toast-icon { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#dc2626,#b91c1c);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0; }
.live-toast .toast-close { position:absolute;top:6px;right:10px;background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-size:1rem;line-height:1; }

/* Cart toast */
.cart-toast { position:fixed; bottom:24px; right:24px; z-index:100; background:rgba(6,6,12,.95); backdrop-filter:blur(16px); border:1px solid rgba(34,197,94,.2); border-radius:10px; padding:.85rem 1.2rem; box-shadow:0 4px 24px rgba(0,0,0,.5),0 0 20px rgba(34,197,94,.08); transform:translateX(120%); transition:transform .4s cubic-bezier(.4,0,.2,1); display:flex; align-items:center; gap:.7rem; max-width:320px; }
.cart-toast.show { transform:translateX(0); }
.cart-toast .toast-icon { width:34px;height:34px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:#fff;flex-shrink:0; }

/* ???????????????????????????????????????????????????????????
   27. IMAGE LAZY LOAD BLUR
   ??????????????????????????????????????????????????????????? */
img[loading="lazy"] { filter:blur(8px); transition:filter .5s ease; }
img[loading="lazy"].loaded { filter:blur(0); }

/* ???????????????????????????????????????????????????????????
   28. NAV ACTIVE LINK
   ??????????????????????????????????????????????????????????? */
nav a[href].active { color:#dc2626 !important; }
nav a[href].active::after { width:100% !important; }

/* ???????????????????????????????????????????????????????????
   29. PAYMENT METHODS IN FOOTER
   ??????????????????????????????????????????????????????????? */
.payment-methods { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; padding:1rem 0; margin-bottom:1rem; }
.payment-methods .pm-icon { display:flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:600; letter-spacing:.4px; color:rgba(255,255,255,.3); background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); border-radius:6px; padding:.4rem .75rem; transition:all .2s ease; }
.payment-methods .pm-icon:hover { color:rgba(255,255,255,.6); border-color:rgba(220,38,38,.15); }
.payment-methods .pm-icon svg { width:16px; height:16px; opacity:.5; }

/* ???????????????????????????????????????????????????????????
   30. ANIMATED STATS COUNTER (CSS only - JS in master.njk)
   ??????????????????????????????????????????????????????????? */
[data-component-id="stats"] .stat-number { transition: opacity .3s ease; }

/* ???????????????????????????????????????????????????????????
   31. LOADING SCREEN
   ??????????????????????????????????????????????????????????? */
#loading-screen { position:fixed;inset:0;z-index:99999;background:#06060c;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease; }
#loading-screen.hidden { opacity:0;visibility:hidden;pointer-events:none; }
#loading-screen .loader-logo { font-size:2rem;font-weight:900;letter-spacing:2px;color:#dc2626;text-transform:uppercase;margin-bottom:1.5rem;animation:logoPulse 1.5s ease-in-out infinite; }
#loading-screen .loader-bar { width:180px;height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden; }
#loading-screen .loader-bar-inner { width:40%;height:100%;background:linear-gradient(90deg,#dc2626,#ef4444,#dc2626);border-radius:2px;animation:loaderSlide 1.2s ease-in-out infinite; }
@keyframes logoPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.03)} }
@keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} }

/* ???????????????????????????????????????????????????????????
   32. SCROLL PROGRESS BAR
   ??????????????????????????????????????????????????????????? */
#scroll-progress { position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#dc2626,#ef4444);z-index:10001;transition:width .1s linear;box-shadow:0 0 10px rgba(220,38,38,.4); }

/* ???????????????????????????????????????????????????????????
   33. FLOATING DISCORD WIDGET
   ??????????????????????????????????????????????????????????? */
#discord-float { position:fixed;bottom:28px;left:28px;z-index:100;display:flex;align-items:center;gap:.6rem;background:rgba(88,101,242,.15);backdrop-filter:blur(16px);border:1px solid rgba(88,101,242,.2);border-radius:50px;padding:.6rem 1.1rem .6rem .6rem;cursor:pointer;transition:all .3s ease;text-decoration:none;box-shadow:0 4px 20px rgba(0,0,0,.3); }
#discord-float:hover { background:rgba(88,101,242,.25);border-color:rgba(88,101,242,.35);transform:translateY(-2px);box-shadow:0 0 30px rgba(88,101,242,.2); }
#discord-float .discord-icon { width:40px;height:40px;border-radius:50%;background:#5865f2;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0; }
#discord-float .discord-text { font-size:.72rem;font-weight:700;letter-spacing:.4px;color:#fff;white-space:nowrap; }
#discord-float .discord-count { font-size:.62rem;color:rgba(255,255,255,.5); }
#discord-float .discord-pulse { position:absolute;top:-4px;right:-4px;width:12px;height:12px;background:#22c55e;border-radius:50%;border:2px solid #06060c;animation:onlinePulse 2s ease-in-out infinite; }
@keyframes onlinePulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)} 50%{box-shadow:0 0 0 8px rgba(34,197,94,0)} }

/* ???????????????????????????????????????????????????????????
   34. AS SEEN ON BADGES
   ??????????????????????????????????????????????????????????? */
.trust-strip { display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:center;padding:1rem 1.5rem;max-width:900px;margin:0 auto 2rem; }
.trust-strip .trust-item { display:flex;align-items:center;gap:.5rem;font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.3);transition:color .2s ease;text-decoration:none; }
.trust-strip .trust-item:hover { color:rgba(255,255,255,.6); }
.trust-strip .trust-item .trust-icon { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem; }
.trust-strip .trust-check { color:#22c55e;font-weight:700; }

/* ???????????????????????????????????????????????????????????
   35. SKELETON LOADERS
   ??????????????????????????????????????????????????????????? */
.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.02) 25%,rgba(255,255,255,.04) 50%,rgba(255,255,255,.02) 75%);background-size:200% 100%;animation:skeletonShimmer 1.5s ease-in-out infinite;border-radius:4px; }
@keyframes skeletonShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ???????????????????????????????????????????????????????????
   36. CURSOR GLOW
   ??????????????????????????????????????????????????????????? */
.cursor-glow { position:fixed;pointer-events:none;z-index:9998;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(220,38,38,.06) 0%,transparent 70%);transform:translate(-50%,-50%);transition:opacity .3s ease;opacity:0; }
.cursor-glow.active { opacity:1; }

/* ???????????????????????????????????????????????????????????
   37. CART NOTIFICATION DOT
   ??????????????????????????????????????????????????????????? */
.cart-icon-wrap { position:relative; }
.cart-dot { position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:#dc2626;border-radius:50%;font-size:.55rem;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 12px rgba(220,38,38,.5);animation:cartPop .4s cubic-bezier(.4,0,.2,1); }
@keyframes cartPop { 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} }

/* ???????????????????????????????????????????????????????????
   38. STICKY MOBILE CTA
   ??????????????????????????????????????????????????????????? */
#mobile-cta { display:none; }
@media (max-width:768px) {
  #mobile-cta { display:flex;position:fixed;bottom:0;left:0;right:0;z-index:101;background:rgba(6,6,12,.95);backdrop-filter:blur(16px);border-top:1px solid rgba(220,38,38,.15);padding:.75rem 1rem;gap:.75rem;align-items:center; }
  #mobile-cta .cta-price { font-size:1.3rem;font-weight:900;color:#dc2626;letter-spacing:-.5px; }
  #mobile-cta .cta-btn { flex:1;background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.5px;text-transform:uppercase;padding:.75rem;border:none;border-radius:6px;text-align:center;text-decoration:none; }
  #back-to-top { bottom:85px !important; }
  #discord-float { bottom:85px !important; }
}

/* ???????????????????????????????????????????????????????????
   39. SMOOTH SCROLL OFFSET
   ??????????????????????????????????????????????????????????? */
html { scroll-behavior:smooth; scroll-padding-top:80px; }

/* ???????????????????????????????????????????????????????????
   40. PAGE TRANSITION FADE
   ??????????????????????????????????????????????????????????? */
body { animation:pageIn .35s ease; }
@keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* ???????????????????????????????????????????????????????????
   41. FOCUS STYLES � Keyboard accessibility
   ??????????????????????????????????????????????????????????? */
:focus-visible { outline:2px solid #dc2626 !important; outline-offset:3px; border-radius:2px; }
a:focus-visible, button:focus-visible { box-shadow:0 0 0 4px rgba(220,38,38,.25) !important; }

/* ???????????????????????????????????????????????????????????
   PERFORMANCE FIXES � Reduce lag
   ??????????????????????????????????????????????????????????? */
.cursor-glow, #cursor-glow { display:none !important; }
#particles-js canvas { opacity:.15 !important; }
.tilt-card { transform-style:flat !important; }
@keyframes badgeGlow { 0%,100%{box-shadow:0 0 2px rgba(220,38,38,.15)} 50%{box-shadow:0 0 8px rgba(220,38,38,.3)} }
@keyframes greenGlow { 0%,100%{box-shadow:0 0 2px rgba(22,163,74,.15)} 50%{box-shadow:0 0 8px rgba(22,163,74,.25)} }

/* ???????????????????????????????????????????????????????????
   SEARCH BAR � Premium redesign
   ??????????????????????????????????????????????????????????? */
[data-component-id="hero"] input[type="text"],
[data-component-id="hero"] input[type="search"],
input[placeholder*="Search"],
input[placeholder*="search"] {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: .85rem 1rem .85rem 3rem !important;
  font-size: .9rem !important;
  color: #fff !important;
  width: 100% !important;
  max-width: 500px !important;
  transition: all .3s ease !important;
  backdrop-filter: blur(8px);
}
[data-component-id="hero"] input[type="text"]:focus,
[data-component-id="hero"] input[type="search"]:focus,
input[placeholder*="Search"]:focus {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(220,38,38,.4) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1), 0 0 30px rgba(220,38,38,.08) !important;
  outline: none !important;
}
[data-component-id="hero"] input[type="text"]::placeholder,
[data-component-id="hero"] input[type="search"]::placeholder,
input[placeholder*="Search"]::placeholder {
  color: rgba(255,255,255,.25) !important;
  font-weight: 400;
  letter-spacing: .3px;
}
/* Search icon positioning */
[data-component-id="hero"] .relative img,
[data-component-id="hero"] [class*="search"] svg,
[data-component-id="hero"] [class*="search"] .fa-search {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: .35;
  transition: opacity .3s ease;
}
[data-component-id="hero"] input:focus + img,
[data-component-id="hero"] input:focus ~ .fa-search,
[data-component-id="hero"] input:focus ~ svg {
  opacity: .7 !important;
}
/* Search wrapper */
[data-component-id="hero"] .relative:has(input) {
  max-width: 500px;
  margin: 0 auto;
}

/* ???????????????????????????????????????????????????????????
   SEARCH BAR FIX � Centered + polished
   ??????????????????????????????????????????????????????????? */
[data-component-id="hero"] .flex.flex-col { align-items:center !important; text-align:center !important; }
[data-component-id="hero"] .flex.flex-col > * { margin-left:auto !important; margin-right:auto !important; }
[data-component-id="hero"] [x-data*="searchTerm"],
[data-component-id="hero"] .mb-4,
[data-component-id="hero"] [class*="mb-4"] {
  display:flex !important;
  justify-content:center !important;
  width:100% !important;
}
[data-component-id="hero"] input[type="text"],
[data-component-id="hero"] input[type="search"] {
  margin:0 auto !important;
  text-align:left !important;
}

/* ???????????????????????????????????????????????????????????
   PRODUCT CARDS � Premium CSS-only styling
   ??????????????????????????????????????????????????????????? */
a[href*="/product/"] { border-radius:12px !important; border-color:rgba(255,255,255,.07) !important; transition:all .3s ease !important; background:rgba(255,255,255,.04) !important; }
a[href*="/product/"]:hover { transform:translateY(-3px); box-shadow:0 0 35px rgba(220,38,38,.1),0 10px 25px rgba(0,0,0,.5) !important; border-color:rgba(220,38,38,.2) !important; }
a[href*="/product/"] img { transition:transform .4s ease,filter .4s ease; filter:brightness(.85); border-radius:8px; }
a[href*="/product/"]:hover img { transform:scale(1.04); filter:brightness(1); }
a[href*="/product/"] h3 { font-weight:800 !important; letter-spacing:-.2px; font-size:1rem !important; }
.badges > div { font-weight:700 !important; letter-spacing:.7px; font-size:.62rem !important; padding:.25rem .7rem !important; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.3); }
a[href*="/product/"] .text-accent-500 { font-weight:800 !important; font-size:1.1rem !important; letter-spacing:-.3px; }
a[href*="/product/"] .line-through { color:rgba(255,255,255,.25) !important; text-decoration-color:rgba(220,38,38,.3) !important; }
a[href*="/product/"] .hover\:bg-accent-500:hover { background:linear-gradient(135deg,#dc2626,#b91c1c) !important; box-shadow:0 0 20px rgba(220,38,38,.3); }
/* View Details arrow */
a[href*="/product/"] .border-accent-500 { border-color:rgba(220,38,38,.2) !important; border-radius:5px; font-weight:600; letter-spacing:.3px; transition:all .2s ease; }

/* Red diamond bullets */
a[href*="/product/"] [style*="grid-template-columns"] span { color:rgba(255,255,255,.4) !important; }
a[href*="/product/"] [style*="grid-template-columns"] span::first-letter { color:#dc2626; }