/* ta-speed.com Edge + cross-browser compatibility fix */
/* Generated: 2026-04-29 */

/* 1. backdrop-filter: Edge 17+, Safari 9+ need -webkit- prefix */
.neon-card,
.neon-border,
.nav-bar,
.nav-esports,
.product-card,
.stat-card,
.neon-card:hover,
#mobileMenu {
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* nav inline backdrop-filter fix (Edge/Safari) */
nav[style*="backdrop-filter"] {
  -webkit-backdrop-filter: blur(14px) !important;
}

/* 2. clip-path: Safari 9-13 needs -webkit- prefix */
.esports-label {
  -webkit-clip-path: polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
  clip-path: polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
}

/* 3. gap in flex: EdgeHTML (Edge < 84) does NOT support gap in flex containers */
/* Fallback using margins for Edge legacy */
.spec-row { gap: 8px; }
.spec-row > * + * { margin-left: 8px; }

.group-header { gap: .75rem; }
.group-header > * + * { margin-left: .75rem; }

/* 4. Tailwind grid responsive fixes for Edge */
@supports not (grid-template-columns: repeat(4, 1fr)) {
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.grid-cols-3 { grid-template-columns: repeat(1, 1fr) !important; }
}

/* 5. text-shadow glow: Edge may render differently, ensure fallback */
.neon-text, .neon-text-blue {
  color: #00d4ff;
}

/* 6. object-fit: Edge 16-18 needs this for images */
.product-img img,
.neon-card img {
  font-family: 'object-fit: cover;'; /* IE/old Edge hack */
}

/* 7. rgba() with 0.x format: ensure Edge parses correctly */
/* (already using 0.xx format which Edge supports - no change needed) */

/* 8. space-y / space-x Tailwind JIT fallback for Edge < 84 */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* 9. border-white/10 Tailwind opacity: Edge < 79 */
[class*="border-white/"] {
  border-color: rgba(255,255,255,0.1);
}

/* 10. Sidebar fixed layout fix for Edge */
.sidebar {
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}


/* === TA-Speed Browser Compatibility Pack v20260506 ===
   Target: Chrome, Safari, Firefox, Edge + iPhone Safari / Android Chrome.
   Safe CSS only: layout/viewport/form/table/flex fallback fixes. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{min-width:320px;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%;height:auto}img{border-style:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:rgba(0,212,255,.18)}
input,select,textarea{font-size:16px} /* iOS: prevent focus zoom */
[hidden],template{display:none!important}
/* Fixed nav / iPhone notch / Safari safe-area */
nav.fixed.top-0{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}
body{padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left);padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}
footer{padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}
/* Backdrop fallbacks for Firefox/older Edge: keep readable if blur unsupported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.neon-card,.glass,.card,.nav-bar,nav.fixed,#mobileMenu{background:rgba(8,10,20,.98)!important}}
/* Safari/Firefox: gradient text fallback */
[style*="background-clip:text"],[style*="-webkit-background-clip:text"]{color:#00d4ff}
@supports(-webkit-background-clip:text){[style*="-webkit-background-clip:text"]{-webkit-background-clip:text!important}}
/* Flex-gap fallback for older Safari / legacy Edge */
@supports not (gap:1rem){.flex.gap-1>*+*{margin-left:.25rem}.flex.gap-2>*+*{margin-left:.5rem}.flex.gap-3>*+*{margin-left:.75rem}.flex.gap-4>*+*{margin-left:1rem}.flex.gap-5>*+*{margin-left:1.25rem}.flex.gap-6>*+*{margin-left:1.5rem}.grid.gap-4>*{margin:.5rem}.grid.gap-5>*{margin:.625rem}.grid.gap-6>*{margin:.75rem}}
/* Product/action rows should wrap instead of overflowing on narrow or translated browsers */
.product-card,.neon-card,.card{min-width:0;overflow-wrap:anywhere}.spec-row{min-width:0}.spec-row span{min-width:0;overflow-wrap:anywhere}
/* Tables: allow horizontal scroll on Firefox/Safari mobile instead of breaking layout */
table{border-collapse:collapse;max-width:100%}.table-wrap,.overflow-x-auto{-webkit-overflow-scrolling:touch;overflow-x:auto}
/* Checkout/member sticky fallback */
@supports not (position:sticky){.sticky{position:static!important}}
/* Prefer stable viewport units; old mobile browsers fallback to vh */
.hero-carousel{height:85vh;height:85svh}.hero-slide{min-height:420px}.min-h-screen{min-height:100vh;min-height:100svh}
/* Touch devices: no hover lift that causes jump/flicker */
@media(hover:none),(pointer:coarse){.neon-card:hover,.product-card:hover,.btn-neon:hover,.btn-primary:hover{transform:none!important}.carousel-dot{min-width:14px;min-height:14px}}
/* Reduced motion for Safari/Firefox accessibility */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Core responsive hardening */
@media(max-width:1024px){.max-w-7xl{max-width:100%!important}nav .max-w-7xl{padding-left:1rem!important;padding-right:1rem!important}}
@media(max-width:767px){
  body{font-size:15px}.hero-carousel{height:70vh!important;height:70svh!important;min-height:420px!important}.hero-slide{padding-left:16px!important;padding-right:16px!important;background-position:center!important}.hero-slide h1{font-size:clamp(1.45rem,8vw,2rem)!important;line-height:1.25!important}.hero-slide p{font-size:.95rem!important}.hero-slide .max-w-2xl{max-width:100%!important}
  main,.max-w-7xl,.max-w-6xl,.max-w-5xl,.max-w-4xl{width:100%!important;padding-left:1rem!important;padding-right:1rem!important}
  .grid{min-width:0}.grid.grid-cols-2,.grid.grid-cols-3,.grid.grid-cols-4{grid-template-columns:1fr!important}.sm\:grid-cols-2,.sm\:grid-cols-3,.sm\:grid-cols-4{grid-template-columns:1fr!important}
  #productsGrid,#featuredProducts,#heroCatGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.75rem!important}
  .product-img{height:135px!important}.product-card h3,.neon-card h3{font-size:.95rem!important;line-height:1.35!important}
  input,select,textarea{font-size:16px!important}.toast{left:12px!important;right:12px!important;top:76px!important;max-width:none!important}.modal{padding:12px!important}.modal>*{max-width:100%!important}
}
@media(max-width:430px){#productsGrid,#featuredProducts,#heroCatGrid{grid-template-columns:1fr!important}.hero-carousel{height:64vh!important;height:64svh!important;min-height:360px!important}.product-img{height:160px!important}.btn-neon,.btn-primary,.btn-outline{width:100%;text-align:center;justify-content:center}}
/* Firefox scrollbar/readability */
*{scrollbar-color:rgba(0,212,255,.45) rgba(255,255,255,.06);scrollbar-width:thin}


/* === MS Edge formal-site hotfix 20260506_edge_hotfix2 === */
html,body{width:100%;max-width:100%;overflow-x:hidden}
/* Some Edge builds/cached CSS can visually stack carousel slides; force inactive slides fully hidden. */
.hero-carousel{position:relative;overflow:hidden;isolation:isolate}
.hero-carousel .hero-slide{visibility:hidden!important;opacity:0!important;pointer-events:none!important;z-index:0!important;transition:opacity .6s ease-in-out,visibility 0s linear .6s!important}
.hero-carousel .hero-slide.active{visibility:visible!important;opacity:1!important;pointer-events:auto!important;z-index:2!important;transition:opacity .6s ease-in-out!important}
.hero-carousel .hero-slide>div{z-index:3!important}
#carouselDots,.hero-carousel>button{z-index:10!important}
/* Keep nav above Edge rendering layers */
nav.fixed{z-index:9999!important;transform:translateZ(0)}
/* Prevent Edge/Chrome translate from changing brand/site UI when possible */
.notranslate{translate:no}