/*
 * Enter any custom CSS here.
 * This file will not be overwritten by theme updates.
 */

/* 
 * PARALLAX STARFIELD LAYER 1: Big Foreground Stars (Moves Up Fast)
 */
html::before {
  content: " " !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
  box-shadow: 231px 542px #FFF, 1845px 123px #FFF, 654px 902px #FFF, 1201px 432px #FFF, 342px 1743px #FFF, 912px 654px #FFF, 1532px 1102px #FFF, 412px 843px #FFF, 1902px 1642px #FFF, 743px 1312px #FFF, 112px 412px #FFF, 1345px 954px #FFF, 821px 1890px #FFF, 1632px 431px #FFF, 512px 1204px #FFF, 1023px 743px #FFF, 1421px 1532px #FFF, 290px 891px #FFF, 1754px 1321px #FFF, 689px 234px #FFF, 1154px 1654px #FFF, 432px 912px #FFF, 1892px 342px #FFF, 765px 1201px #FFF, 98px 743px #FFF, 1254px 1832px #FFF, 843px 512px #FFF, 1642px 1421px #FFF, 542px 290px #FFF, 1092px 1754px #FFF, 1454px 689px #FFF, 201px 1154px #FFF;
  animation: animStar 50s linear infinite !important;
}

/* 
 * PARALLAX STARFIELD LAYER 2: Medium Midground Stars
 */
body::before {
  content: " " !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  height: 2px !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
  box-shadow: 450px 1200px #FFF, 1300px 350px #FFF, 850px 1700px #FFF, 100px 900px #FFF, 1750px 600px #FFF, 600px 1450px #FFF, 1150px 200px #FFF, 300px 1050px #FFF, 1600px 1850px #FFF, 950px 500px #FFF, 50px 1350px #FFF, 1400px 800px #FFF, 700px 1950px #FFF, 1250px 100px #FFF, 250px 1650px #FFF, 1050px 750px #FFF;
  animation: animStar 100s linear infinite !important;
}

/* 
 * PARALLAX STARFIELD LAYER 3: Large Background Stars
 */
body::after {
  content: " " !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 3px !important;
  background: transparent !important;
  z-index: 0 !important;
  pointer-events: none !important;
  box-shadow: 800px 400px #FFF, 200px 1500px #FFF, 1400px 900px #FFF, 600px 100px #FFF, 1100px 1800px #FFF, 350px 700px #FFF, 1650px 1200px #FFF, 900px 1600px #FFF, 100px 500px #FFF, 1250px 1350px #FFF;
  animation: animStar 150s linear infinite !important;
}

/* PARALLAX HARDWARE ANIMATION ENGINE */
@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

/* Deep Space Canvas Gradient Frame Resets */
html, body {
  background: radial-gradient(ellipse at bottom, #000000 0%, #000000 100%) !important;
  min-height: 100vh !important;
}

/* Global Container Transparency Unlocks */
.flex-wrapper, main, section, div.component, .products-layout, .footer {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Hero Dark Mask Removal Fix */
.hero .bg-overlay, .hero::after, .hero::before, div[data-component-id="hero"] .bg-overlay {
  background: none !important;
  background-color: transparent !important;
  display: none !important;
}
.hero, section.hero, div[data-component-id="hero"] {
  background-color: transparent !important;
}

/* --- GLASSMORPHISM CLASS MORPHISMS --- */
.morphism-card {
  background-color: rgba(10, 10, 10, 0.45) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
}

.morphism-hover-glow {
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.morphism-hover-glow:hover {
  background-color: rgba(20, 20, 20, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 40px 0 rgba(255, 255, 255, 0.02) !important;
  transform: translateY(-2px);
}

.morphism-highlight {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
}

/* Mobile Responsiveness for Cards */
@media (max-width: 992px) {
  .products-header-row { flex-direction: column; align-items: flex-start !important; gap: 20px; }
  .product-horizontal-row { flex-direction: column; align-items: stretch !important; gap: 20px; padding: 20px !important; }
  .prod-img-box { width: 100% !important; height: 140px !important; margin-right: 0 !important; }
  .prod-status-box, .prod-price-box, .prod-stock-box, .prod-action-box { text-align: left !important; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .prod-action-box { border-bottom: none; margin-top: 10px; }
}

/* Preserved Base Theme Code */
.showcase-section { padding: 120px 0; background: transparent !important; position: relative; overflow: hidden; }
.showcase-title { font-size: clamp(72px, 8vw, 140px); font-weight: 900; color: #fff; }
.showcase-title span { display: block; background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .08)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.showcase-grid { display: grid; grid-template-columns: 450px 1fr; gap: 80px; align-items: center; }
.showcase-video-wrapper iframe { width: 100%; aspect-ratio: 16/9; }
.showcase-pill { border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px; padding: 14px 34px; color: #fff; }
.showcase-features li { color: #fff; margin-bottom: 28px; }
.showcase-tag, .showcase-video-label { color: rgba(255, 255, 255, .7); }
.showcase-video-header h3 { color: #fff; }