/* ==========================================================================
   OVR90 SPORTSWEAR — OFFICIAL STYLESHEET (CLEAN EDITORIAL LUXURY)
   Predominantly White Minimalist Aesthetic with Deep Black Typography
   Authentic Real E-Commerce Button Styling & Smooth Image Sliders
   ========================================================================== */
/* Google Fonts loaded asynchronously via <link rel="preconnect"> in HTML <head> for zero-render-blocking speed */

:root {
  --color-bg: #ffffff;
  --color-surface: #f9f9fb;
  --color-panel: #ffffff;
  --color-border: #e8e8ed;
  --color-border-dark: #000000;
  --color-text: #0a0a0c;
  --color-muted: #6b7280;
  --color-black: #000000;
  --color-white: #ffffff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
  background-color: #ffffff;
  color: #0a0a0c;
  font-family: 'Inter', sans-serif;
  overflow-x: clip;
}

body {
  background-color: #ffffff;
  color: #0a0a0c;
  overflow-x: clip;
  min-height: 100vh;
}

/* ==========================================================================
   PERSISTENT & FLOATING NAVBAR SYSTEM
   ========================================================================== */

/* Default Sticky Navbar for regular pages */
#main-navbar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  will-change: transform, background-color, border-color;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
}

/* Homepage Floating Navbar Overlaying Hero Video */
#main-navbar.navbar-hero-floating {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* State 1: Transparent at the top over Hero Video */
#main-navbar.navbar-transparent {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dual Logo Display Switch based on navbar state */
#main-navbar.navbar-transparent .navbar-logo-white {
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}
#main-navbar.navbar-transparent .navbar-logo-black {
  display: none !important;
}

#main-navbar:not(.navbar-transparent) .navbar-logo-white,
#main-navbar.navbar-scrolled .navbar-logo-white {
  display: none !important;
}
#main-navbar:not(.navbar-transparent) .navbar-logo-black,
#main-navbar.navbar-scrolled .navbar-logo-black {
  display: block !important;
}

/* State 2: Scrolled Solid State */
#main-navbar.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.9) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Typography Classes */
.font-heading {
  font-family: 'Syne', sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.font-condensed {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.05em;
}

.font-mono-sport {
  font-family: 'Space Grotesk', monospace;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   LUXURY NAV TYPOGRAPHY & INTERACTIVE CONTROLS
   ========================================================================== */

/* Enhanced Nav Link - Modern Sportswear Luxury Editorial Feel */
.nav-link {
  position: relative;
  letter-spacing: 0.14em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: #111827;
  transition: color 0.25s ease, opacity 0.25s ease;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover {
  color: #000000;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: currentColor;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1px;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #000000;
  font-weight: 700;
}

/* Transparent Hero State - Crisp High-Contrast White Typography */
#main-navbar.navbar-transparent .nav-link {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

#main-navbar.navbar-transparent .nav-link:hover {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 255, 255, 0.7) !important;
}

#main-navbar.navbar-transparent .nav-link::after {
  background-color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* Transparent State: Action Icons & Buttons */
#main-navbar.navbar-transparent #mobile-menu-btn,
#main-navbar.navbar-transparent .nav-control-btn {
  color: #ffffff !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

#main-navbar.navbar-transparent #mobile-menu-btn:hover,
#main-navbar.navbar-transparent .nav-control-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Transparent State: Currency Selector */
#main-navbar.navbar-transparent .currency-selector {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(8px);
}
#main-navbar.navbar-transparent .currency-selector option {
  color: #000000;
  background-color: #ffffff;
}

#main-navbar.navbar-transparent .nav-divider {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Transparent State: BAG Button - Crisp White Pill */
#main-navbar.navbar-transparent .nav-cart-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
#main-navbar.navbar-transparent .nav-cart-btn:hover {
  background-color: #f3f4f6 !important;
  transform: translateY(-1.5px);
}
#main-navbar.navbar-transparent .nav-cart-btn .cart-count-badge {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Scrolled / Solid State: Controls */
#main-navbar:not(.navbar-transparent) .nav-control-btn,
#main-navbar.navbar-scrolled .nav-control-btn {
  color: #1f2937;
}
#main-navbar:not(.navbar-transparent) .nav-control-btn:hover,
#main-navbar.navbar-scrolled .nav-control-btn:hover {
  color: #000000;
  background-color: #f3f4f6;
}
#main-navbar:not(.navbar-transparent) #mobile-menu-btn,
#main-navbar.navbar-scrolled #mobile-menu-btn {
  color: #1f2937;
}
#main-navbar:not(.navbar-transparent) #mobile-menu-btn:hover,
#main-navbar.navbar-scrolled #mobile-menu-btn:hover {
  color: #000000;
}
#main-navbar:not(.navbar-transparent) .currency-selector,
#main-navbar.navbar-scrolled .currency-selector {
  color: #1f2937;
  border-color: #e5e7eb;
  background-color: #f9fafb;
}
#main-navbar:not(.navbar-transparent) .nav-divider,
#main-navbar.navbar-scrolled .nav-divider {
  background-color: #e5e7eb;
}
#main-navbar:not(.navbar-transparent) .nav-cart-btn,
#main-navbar.navbar-scrolled .nav-cart-btn {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}
#main-navbar:not(.navbar-transparent) .nav-cart-btn .cart-count-badge,
#main-navbar.navbar-scrolled .nav-cart-btn .cart-count-badge {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* ==========================================================================
   LUXURY DROPDOWN NAVIGATION MENUS
   ========================================================================== */
.nav-item-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10px;
  min-width: 260px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 60;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-dropdown-inner {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.22), 0 0 1px rgba(0, 0, 0, 0.12);
  padding: 8px;
}
.nav-dropdown-inner a {
  text-shadow: none !important;
}

/* ==========================================================================
   REAL COMMERCIAL E-COMMERCE BUTTON STYLES (TACTILE, RESPONSIVE, NOT ARTSY)
   ========================================================================== */

/* Primary Solid Action Button - Real Retail E-Commerce Feel */
.btn-real-primary {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 4px;
  padding: 12px 24px;
  border: 1px solid #000000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.btn-real-primary:hover {
  background-color: #18181b;
  border-color: #18181b;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-real-primary:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  background-color: #000000;
}

/* Secondary Outlined Button */
.btn-real-secondary {
  background-color: #ffffff;
  color: #000000;
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 4px;
  padding: 11px 22px;
  border: 1px solid #d4d4d8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.btn-real-secondary:hover {
  border-color: #000000;
  background-color: #fafafa;
  color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.btn-real-secondary:active {
  transform: translateY(1px) scale(0.985);
  background-color: #f4f4f5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

/* Commercial Pill Filter Button */
.btn-real-pill {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  padding: 8px 16px;
  border: 1px solid #e4e4e7;
  background-color: #ffffff;
  color: #52525b;
  transition: all 0.18s ease;
  cursor: pointer;
  user-select: none;
}

.btn-real-pill:hover {
  border-color: #000000;
  color: #000000;
  background-color: #fafafa;
}

.btn-real-pill.active {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Floating Carousel Slider Arrow Button - Visible & Tactile */
.btn-slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
  z-index: 25;
}

.btn-slider-arrow:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  border-color: #000000;
}

.btn-slider-arrow:active {
  transform: translateY(-50%) scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Image Slider Smooth Track */
.slider-stage {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slider-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.slider-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Dot pagination indicator */
.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.slider-dot.active {
  width: 24px;
  border-radius: 9999px;
  background-color: #000000;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #f7f7f9;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* Selection Color */
::selection {
  background: #000000;
  color: #ffffff;
}

/* Infinite Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Pulse Animation */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.pulse-dot {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Product Card Image Zoom */
.product-card-img-wrap {
  overflow: hidden;
  position: relative;
  background-color: #f5f5f7;
}

.product-card-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.group:hover .product-card-img {
  transform: scale(1.06);
}

/* Modal Backdrop - Clean luxury dark tint with zero blur distortion (sits behind modal content at z-1) */
.modal-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.6) !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

/* Hardware-accelerated 60fps/120fps slide drawers (Eliminates mobile lag) */
.drawer-right,
#cart-drawer,
#mobile-drawer {
  will-change: transform;
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12) !important;
}

#cart-drawer:not(.translate-x-full) {
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

#mobile-drawer {
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
}

#mobile-drawer:not(.-translate-x-full) {
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
}

#cart-overlay,
#mobile-drawer-overlay,
#mobile-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: opacity;
  background-color: rgba(0, 0, 0, 0.55) !important;
}

/* Smooth momentum scrolling for drawer content */
#cart-items-container,
#mobile-drawer,
#search-results-list,
#mobile-search-results {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Button hover shimmer */
.btn-ovr {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.btn-ovr::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: 0.5s;
}

.btn-ovr:hover::before {
  left: 100%;
}

/* Hide scrollbars for smooth product carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Carousel Control Arrows */
.carousel-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 20;
}
.carousel-nav-btn:hover {
  background-color: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: scale(1.08);
}
.carousel-nav-btn:active {
  transform: scale(0.95);
}

/* Subtle outline font for luxury sportswear branding */
.text-stroke-outline {
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.15);
  color: transparent;
  user-select: none;
}

.carousel-track {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure slide drawers and overlays sit cleanly above sticky/fixed navbar (navbar is z-50) */
#cart-overlay,
#mobile-overlay,
#mobile-drawer-overlay {
  z-index: 65 !important;
}

#cart-drawer,
#mobile-drawer {
  z-index: 70 !important;
}

/* Modals sit above all drawers and sticky navbar */
#quickview-modal,
#checkout-modal,
#search-modal,
#wishlist-modal {
  z-index: 80 !important;
}

/* Inside modals: dialog content cards sit at z-20 (above backdrop z-1) with full interactivity */
#search-modal > div:not(.modal-backdrop),
#wishlist-modal > div:not(.modal-backdrop),
#quickview-modal > div:not(.modal-backdrop),
#checkout-modal > div:not(.modal-backdrop) {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   SMOOTH REFINED SCROLL REVEAL SYSTEM
   Subtle, Cinematic, Hardware-Accelerated (Zero Jitter, No Flashy Bounces)
   ========================================================================== */

/* Base Scroll Reveal Element - Gentle glide up & fade */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Product Card Smooth Reveal - Delicate scale & glide */
.reveal-card {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  will-change: opacity, transform;
}

.reveal-card.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Subtle, refined hover lift on cards after reveal */
.reveal-card.is-revealed:hover {
  transform: translateY(-2.5px);
}

/* Stagger Delay Utility Classes */
.stagger-1 { transition-delay: 70ms !important; }
.stagger-2 { transition-delay: 140ms !important; }
.stagger-3 { transition-delay: 210ms !important; }
.stagger-4 { transition-delay: 280ms !important; }
.stagger-5 { transition-delay: 350ms !important; }
.stagger-6 { transition-delay: 420ms !important; }

/* Ultra-smooth image zooms across the entire store */
.aspect-\[3\/3\.8\] img,
.aspect-\[4\/4\.5\] img,
.product-card-img-wrap img {
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

/* Accessibility: Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  .reveal-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Hero entrance animation on initial page load */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate-fade {
  animation: heroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   MOBILE APP-LIKE RESPONSIVE & CENTERED NAVBAR SYSTEM
   ========================================================================== */

/* Mobile Navbar: Logo perfectly centered, clean app bar */
@media (max-width: 1023px) {
  .nav-brand-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 10;
  }

  #main-navbar .nav-control-desktop-only {
    display: none !important;
  }

  #mobile-bottom-appbar {
    display: none !important;
  }
}

/* Native Mobile App Touch & Feel */
body.overflow-hidden {
  overflow: hidden !important;
  touch-action: none;
}

button, a, input, select {
  -webkit-tap-highlight-color: transparent;
}

.mobile-tab-btn {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-tab-btn:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

/* Mobile Search Dropdown Transitions */
#mobile-search-dropdown {
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

@media (max-width: 1023px) {
  #main-navbar:not(.navbar-transparent) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
  }
}

/* Smooth Mobile Category Scrolling & Touch Physics */
.no-scrollbar::-webkit-scrollbar,
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.no-scrollbar,
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

/* Mobile Filter Drawer Animation & Touch UI (Smooth Sliding Drawer on Mobile) */
@media (max-width: 1023px) {
  #filter-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: 330px !important;
    max-width: 88vw !important;
    background: #ffffff !important;
    z-index: 60 !important;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem !important;
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.18) !important;
    transform: translate3d(-100%, 0, 0) !important;
    -webkit-transform: translate3d(-100%, 0, 0) !important;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    will-change: transform;
    backface-visibility: hidden;
  }
  #filter-sidebar.open {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
  }
}