:root {
  color-scheme: dark;
}

/* Ensure hidden elements are strictly hidden only when NOT modified by responsive prefixes */
.hidden:not([class*="sm:"]):not([class*="md:"]):not([class*="lg:"]):not([class*="xl:"]):not([class*="2xl:"]) {
  display: none !important;
}

/* Header Search Engine Bar visibility guarantees across breakpoints (Laptops, Desktops, Tablets) */
.header-search-bar {
  display: none;
}

@media (min-width: 640px) {
  .header-search-bar {
    display: flex !important;
  }
  .sm\:inline {
    display: inline !important;
  }
  .sm\:flex {
    display: flex !important;
  }
  .sm\:block {
    display: block !important;
  }
  .sm\:hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md\:inline { display: inline !important; }
  .md\:flex { display: flex !important; }
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:inline { display: inline !important; }
  .lg\:flex { display: flex !important; }
  .lg\:block { display: block !important; }
  .lg\:hidden { display: none !important; }
}

@media (min-width: 1280px) {
  .xl\:inline { display: inline !important; }
  .xl\:flex { display: flex !important; }
  .xl\:block { display: block !important; }
  .xl\:hidden { display: none !important; }
}

body {
  background-color: var(--background-color, #07080c);
  color: var(--text-color, #f3f4f6);
  overflow-x: hidden;
}

/* Ambient Hero Glow using settings colors */
.hero-ambient-glow {
  background: 
    radial-gradient(circle at 20% 25%, var(--primary-glow, rgba(6, 182, 212, 0.22)) 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, var(--secondary-glow, rgba(139, 92, 246, 0.20)) 0%, transparent 55%),
    radial-gradient(circle at 50% 80%, var(--accent-glow, rgba(16, 185, 129, 0.16)) 0%, transparent 50%);
  filter: blur(40px);
}

/* Hero Seamless Pattern Background & Atmospheric Layering */
.hero-pattern-bg {
  background-repeat: repeat;
  background-size: 512px 512px;
  background-position: center;
  opacity: 0.34;
  mix-blend-mode: lighten;
  animation: heroPatternDrift 90s linear infinite;
}

@keyframes heroPatternDrift {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 512px 512px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-pattern-bg {
    animation: none;
  }
}

/* Vignette overlay ensures maximum eye comfort, text contrast & smooth edge blending */
.hero-vignette-overlay {
  background: 
    linear-gradient(180deg, var(--background-color, #07080c) 0%, transparent 22%),
    linear-gradient(0deg, var(--background-color, #07080c) 0%, transparent 32%),
    radial-gradient(ellipse at 50% 48%, rgba(7, 8, 12, 0.40) 0%, rgba(7, 8, 12, 0.82) 70%, var(--background-color, #07080c) 100%);
}

/* Custom Glass Cards */
.glass-panel {
  background: var(--surface-glass, rgba(16, 18, 26, 0.82));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.product-card {
  background: linear-gradient(180deg, var(--surface-card-from, rgba(22, 25, 36, 0.9)) 0%, var(--surface-card-to, rgba(13, 15, 22, 0.95)) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-color, #06b6d4);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 25px -5px var(--primary-glow, rgba(6, 182, 212, 0.15));
}

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

::-webkit-scrollbar-track {
  background: var(--background-color, #07080c);
}

::-webkit-scrollbar-thumb {
  background: #1f2433;
  border-radius: 9999px;
}

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

/* Pulse Glow for Badges */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.pulse-badge {
  animation: subtlePulse 3s infinite ease-in-out;
}

/* ==========================================================================
   Brand Logo Graffiti Typography (matches official smkoecity&vape logo)
   ========================================================================== */
.font-graffiti {
  font-family: 'Permanent Marker', 'Sedgwick Ave Display', cursive, sans-serif;
}

.brand-graffiti-heading {
  display: inline-block;
  transform: perspective(800px) rotate(-1.5deg) skewX(-4deg);
  letter-spacing: 0.04em;
  filter: 
    drop-shadow(0 2px 0 #000) 
    drop-shadow(0 4px 0 #000) 
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.9)) 
    drop-shadow(0 0 25px var(--primary-glow, rgba(85, 243, 251, 0.45))) 
    drop-shadow(0 0 45px var(--secondary-glow, rgba(252, 72, 252, 0.35)));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.brand-graffiti-heading:hover {
  transform: perspective(800px) rotate(0deg) skewX(-1deg) scale(1.02);
}

.brand-graffiti-smoke {
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 45%, #94a3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.85);
}

.brand-graffiti-city {
  background: linear-gradient(180deg, #a5f3fc 0%, var(--primary-color, #55f3fb) 45%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.85);
}

.brand-graffiti-amp {
  color: #ffffff;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.85);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.brand-graffiti-vape {
  background: linear-gradient(180deg, #fbcfe8 0%, var(--secondary-color, #fc48fc) 45%, #c026d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.85);
}

.brand-graffiti-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 20%, var(--primary-color, #55f3fb) 55%, var(--secondary-color, #fc48fc) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.85);
}