/** Shopify CDN: Minification failed

Line 108:0 All "@import" rules must come first

**/
/**
 * Cyberpunk Theme - Effects & Enhancements
 * 
 * This file contains ONLY visual effects and enhancements.
 * Colors are managed via Shopify theme settings (color_scheme).
 * 
 * Includes: Glows, gradients, animations, borders, spacing
 * Excludes: Hardcoded colors (now in Shopify settings)
 */

/* ========================================
   GLOBAL THEME OVERRIDES
   ======================================== */
body,
body.gradient,
.gradient,
#MainContent,
.shopify-section {
  background-color: #050505 !important;
  background-image: none !important;
}

/* Animated Hero - Transparent backgrounds for all containers */
.animated-hero__box,
.animated-hero .banner__box,
.animated-hero .content-container,
.animated-hero .content-container--full-width-mobile,
.animated-hero__content,
.animated-hero .banner__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Policy Pages & Page Titles - Ensure titles are white */
.shopify-policy__title,
.page-title,
.main-page-title,
h1.page-title,
h1.main-page-title,
h1.h0,
.h0,
h2.page-title,
h2.h0 {
  color: #fff !important;
}

/* Additional override for all h1-h6 with page-title or h0 classes */
h1.page-title,
h2.page-title,
h3.page-title,
h4.page-title,
h5.page-title,
h6.page-title {
  color: #fff !important;
}

/* ========================================
   CSS VARIABLES - EFFECTS ONLY
   ======================================== */

:root {
  /* Gradients - Using cyberpunk accent colors */
  --gradient-primary: linear-gradient(135deg, #40feff 0%, #bd00ff 100%);
  --gradient-secondary: linear-gradient(90deg, #40feff, #bd00ff);
  --gradient-accent: linear-gradient(135deg, #ff006e 0%, #bd00ff 100%);
  --gradient-highlight: linear-gradient(135deg, #40feff 0%, #ff006e 100%);
  /* Cyan to Pink - for badges/highlights */

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 60px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 50px;

  /* Effects - Glows using cyberpunk colors */
  --glow-cyan: 0 0 15px rgba(64, 254, 255, 0.3);
  --glow-cyan-strong: 0 0 25px rgba(64, 254, 255, 0.6);
  --glow-purple: 0 0 15px rgba(189, 0, 255, 0.3);
  --glow-purple-strong: 0 0 25px rgba(189, 0, 255, 0.6);
  --text-glow: 0 0 10px rgba(64, 254, 255, 0.8);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   GOOGLE FONTS
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Inter:wght@400;600;700&display=swap');

/* ========================================
   EFFECTS & ENHANCEMENTS
   ======================================== */

/* Neon Border Effect */
.neon-border,
.cyberpunk-border {
  border: 2px solid rgba(64, 254, 255, 0.2);
  transition: var(--transition-normal);
}

.neon-border:hover,
.cyberpunk-border:hover {
  border-color: rgba(64, 254, 255, 0.5);
  box-shadow: var(--glow-cyan);
}

/* Gradient Text Effect */
.text-gradient,
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Highlight Gradient - for badges and attention-grabbing elements */
.gradient-highlight {
  background: var(--gradient-highlight);
}

.text-gradient-highlight {
  background: var(--gradient-highlight);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow Effects */
.glow-cyan {
  box-shadow: var(--glow-cyan);
}

.glow-cyan-strong {
  box-shadow: var(--glow-cyan-strong);
}

.glow-purple {
  box-shadow: var(--glow-purple);
}

.glow-purple-strong {
  box-shadow: var(--glow-purple-strong);
}

/* Glassmorphism Effect */
.glassmorphism {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========================================
   WIDTH STANDARDIZATION
   ======================================== */

/* Ensure all sections have consistent max-width */
.page-width,
.rich-text__wrapper,
.featured-product,
section>.page-width {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--spacing-lg) !important;
  padding-right: var(--spacing-lg) !important;
}

/* Full-width sections should still respect padding */
.rich-text--full-width,
.content-container--full-width {
  max-width: 100% !important;
}

.rich-text--full-width .page-width {
  max-width: 1200px !important;
}

.card__media {
  border-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-xl) !important;
  border-end-start-radius: var(--radius-xl) !important;
  border-start-end-radius: var(--radius-xl) !important;
  border-start-start-radius: var(--radius-xl) !important;
  box-shadow: var(--glow-cyan) !important;
}

.card__inner.gradient {
  border-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-xl) !important;
  border-end-start-radius: var(--radius-xl) !important;
  border-start-end-radius: var(--radius-xl) !important;
  border-start-start-radius: var(--radius-xl) !important;
}

.card-wrapper:hover .gradient {
  border-radius: var(--radius-md) !important;
  border-end-end-radius: var(--radius-xl) !important;
  border-end-start-radius: var(--radius-xl) !important;
  border-start-end-radius: var(--radius-xl) !important;
  border-start-start-radius: var(--radius-xl) !important;
}

/* Sale Badge - Vibrant Gradient Highlight */

.card__badge {
  background: transparent !important;
  border: none !important;
}

.card__badge .badge,
.badge.badge--bottom-left {
  background: linear-gradient(135deg, #bd00ff 0%, #ff006e 100%) !important;
  border: 2px solid rgba(64, 254, 255, 0.8) !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 16px !important;
}



/* ========================================
   BUTTON ENHANCEMENTS
   ======================================== */

/* Remove base.css pseudo-elements that cause conflicts */
.button:before,
.btn:before,
button[type="submit"]:before,
input[type="submit"]:before,
.product-form__submit:before,
.button:after,
.btn:after,
button[type="submit"]:after,
input[type="submit"]:after,
.product-form__submit:after {
  content: none !important;
  display: none !important;
}

/* Button hover effects */
.button:hover,
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.product-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-cyan-strong);
  transition: var(--transition-normal);
}

/* Add to Cart, Checkout & Product Page Buttons - Unified Cyberpunk Style */
.product-form__submit,
button[name='add'],
.shopify-payment-button__button,
.product .button,
.quick-add__submit,
.featured-product .button {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  box-shadow: var(--glow-cyan) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  border-radius: var(--buttons-radius-outset) !important;
  padding: 1rem 3rem !important;
  min-height: 4.6rem !important;
  position: relative;
  z-index: 1;
}

.product-form__submit:hover,
button[name='add']:hover,
.shopify-payment-button__button:hover,
.product .button:hover,
.quick-add__submit:hover,
.featured-product .button:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--glow-cyan-strong) !important;
  opacity: 0.95;
}

.product-form__submit[disabled],
.product .button[disabled],
.quick-add__submit[disabled] {
  background: #333 !important;
  color: #777 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.7 !important;
}

/* Specific fix for quantity buttons to keep them distinct but themed */
.quantity__button {
  color: #40feff !important;
  transition: all 0.2s ease !important;
}

.quantity__button:hover {
  color: #ffffff !important;
  text-shadow: var(--text-glow) !important;
}

/* Variant Picker Pills - Integrated Cyberpunk Style */
.product-form__input--pill input[type='radio']+label {
  border: 1px solid rgba(64, 254, 255, 0.3) !important;
  background-color: rgba(10, 12, 16, 0.6) !important;
  color: #40feff !important;
  transition: all 0.3s ease !important;
  border-radius: 4px !important;
  font-family: 'Inter', sans-serif !important;
}

.product-form__input--pill input[type='radio']+label:hover {
  border-color: #40feff !important;
  box-shadow: 0 0 10px rgba(64, 254, 255, 0.3) !important;
  color: #fff !important;
}

.product-form__input--pill input[type='radio']:checked+label {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: var(--glow-cyan) !important;
}

.product-form__input--pill input[type='radio']:disabled+label,
.product-form__input--pill input[type='radio'].disabled+label {
  border-color: #333 !important;
  color: #555 !important;
  opacity: 0.5 !important;
}


/* ========================================
   CARD ENHANCEMENTS
   ======================================== */

.card:hover,
.product-card:hover,
.collection-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--glow-cyan);
  transition: var(--transition-normal);
}

/* ========================================
   INPUT & FORM ENHANCEMENTS
   ======================================== */

/* Suppress base.css pseudo-element borders which can be hard to control */
.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  content: none !important;
}

.field__input,
.select__select,
.customer .field input,
.customer select,
.text-area {
  background-color: rgba(10, 12, 16, 0.95) !important;
  color: #ffffff !important;
  border: 2px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
}

/* Ensure textarea has enough height and respects padding */
textarea.text-area {
  min-height: 12rem !important;
  padding: 2.5rem 1.5rem 1.5rem !important;
}

/* Focus states */
.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.text-area:focus {
  border-color: #40feff !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.4) !important;
  outline: none !important;
  background-color: #000000 !important;
}

/* Label styling and positioning */
.field__label,
.customer .field label {
  color: rgba(64, 254, 255, 0.6) !important;
  transition: all 0.2s ease !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Orbitron', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* Active label state (when focused or has value) */
.field__input:focus~.field__label,
.field__input:not(:placeholder-shown)~.field__label,
.field__input:-webkit-autofill~.field__label {
  color: #40feff !important;
  text-shadow: 0 0 8px rgba(64, 254, 255, 0.5);
  transform: translateY(-0.8rem) scale(0.85);
  opacity: 1;
}

/* ========================================
   CONTACT FORM & CONTENT PAGE BACKGROUNDS
   ======================================== */

.contact-form,
.contact,
.article-template {
  position: relative;
  overflow: hidden;
  background-color: #000000 !important;
}

/* Outer wrapper transparency for color schemes */
.section-contact-form .gradient,
.contact .gradient {
  background: transparent !important;
}

.contact-form::before,
.contact::before,
.article-template::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(90deg, rgba(64, 254, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(64, 254, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  animation: footerCircuitPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.contact .page-width,
.contact-form .page-width,
.article-template .page-width {
  position: relative;
  z-index: 1;
}

/* ========================================
   LINK ENHANCEMENTS
   ======================================== */

a:hover {
  text-shadow: var(--text-glow);
  transition: var(--transition-normal);
}

/* ========================================
   SKIP TO CONTENT - ACCESSIBILITY
   ======================================== */

.skip-to-content-link,
a.skip-to-content-link.button.visually-hidden {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  z-index: 9999;
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.skip-to-content-link:focus,
a.skip-to-content-link.button.visually-hidden:focus {
  position: fixed !important;
  left: 50% !important;
  top: 10px !important;
  transform: translateX(-50%) !important;
  clip: auto !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: var(--glow-cyan);
  }

  50% {
    box-shadow: var(--glow-cyan-strong);
  }
}

/* Apply fade-in to page loads */
body {
  animation: fadeIn 0.3s ease-in;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .page-width {
    padding-left: var(--spacing-md) !important;
    padding-right: var(--spacing-md) !important;
  }
}

/* ============================================
   FOOTER CYBERPUNK STYLING
   ============================================ */

/* Footer links with cyan hover */
footer.footer a:hover,
.footer a:hover {
  color: #40feff !important;
  text-shadow: 0 0 8px rgba(64, 254, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

/* Social icons with cyan glow on hover */
footer.footer .list-social__link:hover svg,
.footer .footer__list-social .list-social__link:hover svg,
.footer .list-social__link:hover svg {
  fill: #40feff !important;
  filter: drop-shadow(0 0 8px rgba(64, 254, 255, 0.8)) !important;
  transition: all 0.3s ease !important;
}

/* Footer newsletter input */
footer.footer .field__input,
.footer .field__input {
  border: 2px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

/* Fix for footer language selector white border */
footer .localization-selector::after,
footer .localization-selector::before,
.footer .localization-form__select::after,
.footer .localization-form__select::before {
  box-shadow: none !important;
  content: none !important;
}

footer.footer .field__input:focus,
.footer .field__input:focus {
  border-color: #40feff !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.4) !important;
}

/* Footer newsletter button */
footer.footer .newsletter-form__button,
.footer .newsletter-form__button {
  background: linear-gradient(135deg, #40feff 0%, #bd00ff 100%) !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.3) !important;
}

footer.footer .newsletter-form__button:hover,
.footer .newsletter-form__button:hover {
  box-shadow: 0 0 25px rgba(64, 254, 255, 0.6) !important;
}

footer.footer .newsletter-form__button svg,
.footer .newsletter-form__button svg {
  fill: #ffffff !important;
}

/* Language and Country Selectors */
.localization-form select,
.localization-form .disclosure__button,
footer .localization-form select,
footer .disclosure__button {
  border: 2px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(10, 12, 16, 0.8) !important;
  color: #ffffff !important;
  transition: all 0.3s ease !important;
}

.localization-form select:hover,
.localization-form .disclosure__button:hover,
footer .localization-form select:hover,
footer .disclosure__button:hover {
  border-color: #40feff !important;
  box-shadow: 0 0 10px rgba(64, 254, 255, 0.4) !important;
}

.localization-form select:focus,
.localization-form .disclosure__button:focus,
footer .localization-form select:focus,
footer .disclosure__button:focus {
  border-color: #40feff !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.5) !important;
}

/* Unified Cyberpunk Theme Enforcement */
/* Force background and text colors for any section or wrapper using the cyberpunk scheme */
.color-cyberpunk,
.color-cyberpunk .newsletter__wrapper,
.color-cyberpunk .contact__wrapper,
.color-cyberpunk .image-with-text__content,
.color-cyberpunk .page-width,
.color-cyberpunk.newsletter--narrow {
  background-color: rgb(var(--color-background)) !important;
  color: rgb(var(--color-foreground)) !important;
}

/* Ensure headings in cyberpunk sections also respect the theme color */
.color-cyberpunk h1,
.color-cyberpunk h2,
.color-cyberpunk h3,
.color-cyberpunk h4,
.color-cyberpunk h5,
.color-cyberpunk h6 {
  color: rgb(var(--color-foreground)) !important;
}

/* Reset specific background overrides that might exist in component CSS */
.color-cyberpunk .isolate {
  background-color: transparent !important;
  z-index: 1;
  /* Ensure it stays above background */
}

/* ========================================
   GLOBAL PRODUCT CARD STYLING
   Enforce Cyberpunk aesthetics on all product cards
   (Collections, Featured Collection, Search Results)
   ======================================== */

/* Card Container */
.card-wrapper {
  height: 100%;
}

.card {
  position: relative;
  background: #1a1d24 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  isolation: isolate;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  height: 100%;
}

/* Remove default standard card transparency if present */
.card--standard {
  background: #1a1d24 !important;
}

/* Hover Effects */
.card-wrapper:hover .card {
  transform: translateY(-10px);
  border-color: #40feff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(64, 254, 255, 0.15) !important;
}


/* Image Area */
.card__inner,
.card__inner.ratio {
  border-radius: 20px !important;
  overflow: hidden;
  /* Remove default border radius if any */
  --border-radius: 20px !important;
}

/* Remove transform that creates new containing block */
.card__inner.gradient {
  transform: none !important;
}

.card__content {
  border-radius: 20px !important;
  overflow: hidden;
}


.card__inner.ratio::before {
  border-radius: 20px !important;
}

.card__media {
  z-index: 1;
  border-radius: 20px !important;
  overflow: hidden;
}


/* Target the .media wrapper inside card__media */
.card__media .media,
.card__media .media--transparent,
.card__media .media--hover-effect {
  border-radius: 20px !important;
  overflow: hidden;
}

/* Override component-card.css - force top corners to be rounded */
.card .card__inner .card__media,
.card--card .card__inner .card__media,
.card--standard .card__media {
  border-radius: 20px !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  overflow: hidden;
}

/* Target the actual images */
.card__media img,
.card__media .motion-reduce {
  border-radius: 20px !important;
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

/* Ensure pseudo-elements also respect border radius */
.card__inner::before,
.card__inner::after,
.card__media::before,
.card__media::after {
  border-radius: 20px !important;
}

/* Typography */
.card__content {
  padding: 20px !important;
}

.card__heading,
.card__heading a {
  font-family: var(--font-heading-family) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: 0.5px;
}

.card__information {
  padding-bottom: 0 !important;
}

/* Price */
.price {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.price .price-item--regular,
.price .price-item--sale {
  color: #fff !important;
}

.price .price-item--regular.price-item--sale {
  color: #666 !important;
  text-decoration: line-through !important;
}

dl .price-item--regular {
  color: #fff !important;
}

/* Button / Quick Add styling to match "View Kit" button style */
.quick-add__submit {
  background: rgba(64, 254, 255, 0.1) !important;
  color: #40feff !important;
  border: 1px solid #40feff !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  text-transform: none !important;
  margin-top: 15px;
}

.card-wrapper:hover .quick-add__submit {
  background: #40feff !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(64, 254, 255, 0.4) !important;
}

/* ========================================
   CYBERPUNK FOOTER ENHANCEMENTS
   ======================================== */

/* Footer Background & Border */
.footer {
  position: relative;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.95) 0%, rgba(0, 0, 0, 1) 100%) !important;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent 0%, #40feff 50%, transparent 100%) 1;
  overflow: hidden;
}

/* Animated Circuit Pattern Background */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(90deg, rgba(64, 254, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(64, 254, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  animation: footerCircuitPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes footerCircuitPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* Glowing Corner Accents */
.footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(64, 254, 255, 0.15) 0%, transparent 70%);
  pointer-events: none;
  animation: footerGlow 3s ease-in-out infinite alternate;
}

@keyframes footerGlow {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* Footer Headings */
.footer-block__heading {
  color: #40feff !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2rem !important;
  position: relative;
  padding-bottom: 1rem;
}

.footer-block__heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #40feff 0%, transparent 100%);
  box-shadow: 0 0 8px rgba(64, 254, 255, 0.6);
}

/* Footer Links */
.footer a {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
  position: relative;
}

.footer a:hover {
  color: #40feff !important;
  text-shadow: 0 0 10px rgba(64, 254, 255, 0.6) !important;
  transform: translateX(5px);
}

/* Arrow for regular links (not social icons) */
.footer a:not(.list-social__link)::before {
  content: '›';
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.3s ease;
  color: #40feff;
}

.footer a:not(.list-social__link):hover::before {
  opacity: 1;
  left: -20px;
}

/* Social Icons */
.footer .list-social__link {
  background: rgba(64, 254, 255, 0.1) !important;
  border: 1px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  transition: all 0.3s ease !important;
  position: relative;
}

/* Top arrow for social icons */
.footer .list-social__link::before {
  content: '▲';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s ease;
  color: #40feff;
  font-size: 10px;
}

/* Bottom arrow for social icons */
.footer .list-social__link::after {
  content: '▼';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s ease;
  color: #40feff;
  font-size: 10px;
}

.footer .list-social__link:hover {
  background: rgba(64, 254, 255, 0.2) !important;
  border-color: #40feff !important;
  box-shadow: 0 0 20px rgba(64, 254, 255, 0.4) !important;
  transform: translateY(-3px) !important;
}

.footer .list-social__link:hover::before {
  opacity: 1;
  top: -20px;
}

.footer .list-social__link:hover::after {
  opacity: 1;
  bottom: -20px;
}

.footer .list-social__link svg {
  fill: #40feff !important;
  filter: drop-shadow(0 0 5px rgba(64, 254, 255, 0.5)) !important;
  transition: all 0.3s ease !important;
}

.footer .list-social__link:hover svg {
  filter: drop-shadow(0 0 15px rgba(64, 254, 255, 0.8)) !important;
}

/* Newsletter Section */
.footer-block__newsletter {
  background: rgba(26, 29, 36, 0.6) !important;
  border: 1px solid rgba(64, 254, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 3rem !important;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.footer-block__newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(64, 254, 255, 0.05) 0%, rgba(189, 0, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.footer-block__newsletter:hover::before {
  opacity: 1;
}

/* Newsletter Input */
.footer .field__input {
  background: rgba(10, 12, 16, 0.8) !important;
  border: 2px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
}

.footer .field__input:focus {
  border-color: #40feff !important;
  box-shadow: 0 0 20px rgba(64, 254, 255, 0.3) !important;
  outline: none !important;
}

.footer .field__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Newsletter Button */
.footer .newsletter-form__button {
  background: linear-gradient(135deg, #40feff 0%, #bd00ff 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.3) !important;
}

.footer .newsletter-form__button:hover {
  box-shadow: 0 0 30px rgba(64, 254, 255, 0.6) !important;
  transform: scale(1.05) !important;
}

.footer .newsletter-form__button svg {
  fill: #fff !important;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)) !important;
}

/* Payment Icons */
.footer__payment {
  background: rgba(26, 29, 36, 0.4) !important;
  border: 1px solid rgba(64, 254, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 2rem !important;
}

.list-payment__item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  padding: 0.5rem !important;
  transition: all 0.3s ease !important;
}

.list-payment__item:hover {
  background: rgba(64, 254, 255, 0.1) !important;
  box-shadow: 0 0 10px rgba(64, 254, 255, 0.2) !important;
}

/* Copyright & Bottom Section */
.footer__content-bottom {
  border-top: 1px solid rgba(64, 254, 255, 0.2) !important;
  margin-top: 4rem !important;
  padding-top: 3rem !important;
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer__copyright a {
  color: #40feff !important;
  text-decoration: none !important;
}

.footer__copyright a:hover {
  text-shadow: 0 0 10px rgba(64, 254, 255, 0.8) !important;
}

/* Localization Selectors */
.footer .localization-form select,
.footer .disclosure__button {
  background: rgba(26, 29, 36, 0.8) !important;
  border: 1px solid rgba(64, 254, 255, 0.3) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 1rem 1.5rem !important;
  transition: all 0.3s ease !important;
}

.footer .localization-form select:hover,
.footer .disclosure__button:hover {
  border-color: #40feff !important;
  box-shadow: 0 0 15px rgba(64, 254, 255, 0.2) !important;
}

/* Tech Corner Decorations */
.footer__content-top {
  position: relative;
}

.footer__content-top::before,
.footer__content-top::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(64, 254, 255, 0.3);
  transition: all 0.3s ease;
  z-index: 1;
}

.footer__content-top::before {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.footer__content-top::after {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

/* Glow only on the visible borders */
.footer:hover .footer__content-top::before {
  border-color: #40feff;
  filter: drop-shadow(0 0 8px rgba(64, 254, 255, 0.6));
}

.footer:hover .footer__content-top::after {
  border-color: #40feff;
  filter: drop-shadow(0 0 8px rgba(64, 254, 255, 0.6));
}

/* ========================================
   JUDGEME REVIEW WIDGET CYBERPUNK
   ======================================== */

.jdgm-rev-widg,
.jdgm-widget,
.jdgm-rev-widg__title,
.jdgm-rev-widg__summary-text,
.jdgm-rev__title,
.jdgm-rev__author,
.jdgm-all-reviews__title {
  background-color: #050505 !important;
  color: #fff !important;
}

.jdgm-widget-container,
.jdgm-review-widget,
.jdgm-rev-widg__body {
  background-color: #050505 !important;
}

.jdgm-rev__body,
.jdgm-rev__timestamp,
.jdgm-rev__location,
.jdgm-facet-active-label,
.jdgm-sort-dropdown,
.jdgm-histogram__percentage,
.jdgm-histogram__clear-filter,
.jdgm-all-reviews__body {
  color: rgba(255, 255, 255, 0.8) !important;
}

.jdgm-star {
  color: #40feff !important;
  text-shadow: 0 0 5px rgba(64, 254, 255, 0.5) !important;
}

.jdgm-histogram__bar-content {
  background-color: #40feff !important;
  box-shadow: 0 0 10px rgba(64, 254, 255, 0.4) !important;
}

.jdgm-write-rev-link,
.jdgm-rev-widg__summary-text a,
.jdgm-rev__body a,
.jdgm-paginate__page {
  color: #40feff !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.jdgm-write-rev-link:hover,
.jdgm-paginate__page:hover {
  text-shadow: var(--text-glow) !important;
  color: #fff !important;
}

.jdgm-rev-widg__search-input {
  background: rgba(10, 12, 16, 0.8) !important;
  border: 1px solid rgba(64, 254, 255, 0.3) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

.jdgm-sort-dropdown {
  background: rgba(10, 12, 16, 0.8) !important;
  border: 1px solid rgba(64, 254, 255, 0.2) !important;
  padding: 5px 10px !important;
}

/* Ensure the main product page and themed sections have the correct background */
.color-cyberpunk,
.color-cyberpunk .gradient,
.section-main-product.gradient,
[class*="color-scheme-"].gradient,
.section-main-product {
  background-color: #050505 !important;
  background-image: none !important;
}

#MainProduct-main .product {
  background-color: transparent !important;
}

/* Digital Resources Background Support */
.digital-resources-container {
  background-color: rgba(26, 29, 36, 0.8) !important;
  border-color: rgba(64, 254, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ========================================
   MOBILE OPTIMIZATIONS (UNIFIED)
   ======================================== */
@media screen and (max-width: 749px) {

  /* Fix cramped logo */
  .header__heading-logo {
    max-height: 45px !important;
    width: auto !important;
  }

  .header {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Global Section Spacing */
  .shopify-section {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }

  /* Floating Card Effect - Neon Border Sections */
  .shopify-section.section {
    margin-left: 1.6rem !important;
    margin-right: 1.6rem !important;
  }


  .animated-hero__box,
  .animated-hero .banner__box,
  .animated-hero .content-container,
  .animated-hero .content-container--full-width-mobile,
  .animated-hero__content,
  .animated-hero .banner__content {
    min-height: 250px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  /* Keep page-width content at original padding */
  .page-width {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Reduce Heading Sizes to prevent cramping */
  h1,
  .h1 {
    font-size: 2.6rem !important;
    line-height: 1.1 !important;
  }

  h2,
  .h2 {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
  }

  h3,
  .h3 {
    font-size: 1.8rem !important;
  }

  /* Buttons - remove aggressive padding that crowds mobile */
  .button,
  .btn,
  .customer button {
    padding: 1rem 2rem !important;
    font-size: 1.4rem !important;
    min-height: 4rem !important;
  }

  /* Card spacing */
  .card__content {
    padding: 1.2rem !important;
  }

  .card__heading {
    font-size: 1.4rem !important;
  }

  /* Animated Hero Optimization */
  .animated-hero {
    min-height: 250px !important;
  }

  .animated-hero__box {
    padding: 2.5rem 1.5rem !important;
    margin: 0 10px !important;
    width: calc(100% - 20px) !important;
  }

  .animated-hero__heading {
    font-size: 2.22rem !important;
    margin-bottom: 1.5rem !important;
  }

  .animated-hero__text {
    font-size: 1.4rem !important;
    margin-bottom: 2rem !important;
  }

  .animated-hero__buttons {
    gap: 1.2rem !important;
  }

  /* Newsletter Teaser Spacing */
  .footer-block__newsletter {
    padding: 2rem 1.5rem !important;
  }
}