/** Shopify CDN: Minification failed

Line 333:3 Unexpected "2026"
Line 478:3 Unexpected "@media"
Line 478:151 Expected ":"
Line 478:184 Expected ":"
Line 478:189 Expected ":"
Line 479:58 Unexpected "\\n"
Line 479:205 Unterminated string token
Line 481:0 Expected "]" to go with "["

**/
/* ═══════════════════════════════════════════════════════════
   MYSTIC SKIN — MASTER BUILD (v4.0 - The Deep Moat)
   Target: Shopify Motion Theme
   Scope: body.skin-mystic
   Vibe: Dark luxury, cosmic ritual, premium wellness, tactile
   ═══════════════════════════════════════════════════════════ */

/* custom fonts - make sure to upload the matching TTF files into /assets */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('{{ "CormorantGaramond-Regular.ttf" | asset_url }}') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Gallette Medium';
  font-style: normal;
  font-weight: 500;
  src: url('{{ "GalletteMedium.ttf" | asset_url }}') format('truetype');
  font-display: swap;
}

/* 1. CORE VARIABLES & TOKENS */
body.skin-mystic {
  /* ─── Background Layers ─── */
  --mystic-bg-void: #04060C;
  --mystic-bg-surface: #0B1020;
  --mystic-bg-elevated: #12152a;
  --mystic-bg-glass: rgba(18, 21, 42, 0.55);
  --mystic-bg-overlay: rgba(4, 6, 12, 0.95);

  /* ─── Brand Colors: Amethyst & Gold ─── */
  --mystic-primary: #7A69C5;
  --mystic-primary-light: #9B8DD6;
  --mystic-primary-dark: #3F3275;
  --mystic-primary-glow: rgba(122, 105, 197, 0.6);

  --mystic-secondary: #E0B647;
  --mystic-secondary-light: #F4D08C;
  --mystic-secondary-dark: #A67B35;
  --mystic-secondary-glow: rgba(217, 162, 74, 0.5);

  /* ─── Text Colors ─── */
  --mystic-text-primary: #F3F1EA;
  --mystic-text-secondary: #B5B2C6;
  --mystic-text-inverse: #04060C;
  --mystic-text-gold: #E8C17A;

  /* ─── Borders, Dividers & Glass ─── */
  --mystic-border-glass: rgba(155, 141, 214, 0.2);
  --mystic-border-glow: rgba(217, 162, 74, 0.4);
  --mystic-glass-blur: blur(24px);
  --mystic-divider: linear-gradient(90deg, transparent, rgba(122, 105, 197, 0.4), transparent);

  /* ─── Shadows & Ambient Light ─── */
  --mystic-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.6);
  --mystic-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  --mystic-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.1);
  --mystic-shadow-ambient: 0 0 50px var(--mystic-primary-glow);
  --mystic-shadow-gold: 0 0 40px var(--mystic-secondary-glow);

  /* ─── Gradients ─── */
  --mystic-gradient-void: linear-gradient(180deg, #04060C 0%, #0B1020 100%);
  --mystic-gradient-gold: linear-gradient(135deg, #C08A32 0%, #F4D08C 50%, #D9A24A 100%);
  --mystic-gradient-text: linear-gradient(135deg, #F3F1EA 0%, #9B8DD6 100%);
  --mystic-gradient-shimmer: linear-gradient(110deg, transparent 20%, rgba(244, 208, 140, 0.3) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(244, 208, 140, 0.3) 60%, transparent 80%);
  
  /* ─── Typography & Architecture ─── */
  --mystic-font-display: 'Cormorant Garamond', serif;
  --mystic-font-body: 'Gallette Medium', sans-serif;
  --mystic-radius-sm: 4px;
  --mystic-radius-md: 10px;
  --mystic-radius-lg: 16px;
  --mystic-radius-pill: 100px;
  --mystic-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

/* 2. THEME MAPPING & NATIVE OVERRIDES */
body.skin-mystic {
  --color-background: var(--mystic-bg-void);
  --color-foreground: var(--mystic-text-primary);
  --color-heading: var(--mystic-text-primary);
  --color-link: var(--mystic-primary-light);
  --color-button: var(--mystic-secondary);
  --color-button-text: var(--mystic-text-inverse);
  --color-border: var(--mystic-border-glass);
  background: var(--mystic-gradient-void);
  color: var(--mystic-text-primary);
}

/* Tactile Analog Noise Overlay */
body.skin-mystic::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
  opacity: 0.04;
  mix-blend-mode: overlay;
}

/* Cosmic Void Parallax Background */
@keyframes mystic-breathe {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}
body.skin-mystic::before {
  content: '';
  position: fixed;
  inset: -20%;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(122, 105, 197, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(217, 162, 74, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(19, 140, 122, 0.08) 0%, transparent 60%);
  z-index: -2;
  pointer-events: none;
  animation: mystic-breathe 18s ease-in-out infinite;
}

/* 3. CORE TYPOGRAPHY & BUTTONS */

body.skin-mystic h1, body.skin-mystic h2, body.skin-mystic .h1, body.skin-mystic .h2 {
  font-family: var(--mystic-font-display);
  font-weight: 300;
  letter-spacing: 0.03em;
  background: var(--mystic-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 24px rgba(122, 105, 197, 0.25);
}

body.skin-mystic .button.button--primary,
body.skin-mystic .btn {
  background: var(--mystic-gradient-gold) !important;
  color: var(--mystic-text-inverse) !important;
  font-family: var(--mystic-font-body);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--mystic-radius-pill);
  box-shadow: var(--mystic-shadow-md), var(--mystic-shadow-gold);
  border: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  transition: all 0.5s var(--mystic-ease-spring);
  z-index: 1;
}

@keyframes mystic-shimmer {
  0% { transform: translateX(-150%) skewX(-15deg); }
  100% { transform: translateX(150%) skewX(-15deg); }
}

body.skin-mystic .button.button--primary::after,
body.skin-mystic .btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--mystic-gradient-shimmer);
  animation: mystic-shimmer 3.5s infinite;
  z-index: -1;
}

body.skin-mystic .button.button--primary:hover,
body.skin-mystic .btn:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--mystic-shadow-lg), 0 0 50px var(--mystic-secondary-glow);
  border-color: #FFF;
}

/* =========================================================
   4. THE MOAT: MOTION THEME EXPANSIONS
   ========================================================= */

/* MOAT 1: The "Eclipse" Page Loader */
@keyframes mystic-eclipse-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 162, 74, 0.7), 0 0 40px rgba(122, 105, 197, 0.8); }
  70% { box-shadow: 0 0 0 20px rgba(217, 162, 74, 0), 0 0 80px rgba(122, 105, 197, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 162, 74, 0), 0 0 40px rgba(122, 105, 197, 0.8); }
}
body.skin-mystic .page-transition,
body.skin-mystic .loader {
  background: var(--mystic-bg-void) !important;
}
body.skin-mystic .loader::after {
  content: '';
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--mystic-bg-void);
  border: 2px solid var(--mystic-secondary);
  animation: mystic-eclipse-pulse 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* MOAT 2: Smoked Glass Mega-Menus */
body.skin-mystic .site-nav__dropdown,
body.skin-mystic .mega-menu {
  background: var(--mystic-bg-glass) !important;
  backdrop-filter: var(--mystic-glass-blur);
  -webkit-backdrop-filter: var(--mystic-glass-blur);
  border: 1px solid var(--mystic-border-glass);
  box-shadow: var(--mystic-shadow-lg);
  border-radius: 0 0 var(--mystic-radius-lg) var(--mystic-radius-lg);
}

/* MOAT 3: Holographic Cart Drawer */
body.skin-mystic .drawer,
body.skin-mystic .cart-drawer {
  background: var(--mystic-bg-overlay) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--mystic-border-glass);
  box-shadow: -20px 0 50px rgba(0,0,0,0.8);
}
body.skin-mystic .cart__item-subtotal {
  color: var(--mystic-primary-light);
  text-shadow: 0 0 10px var(--mystic-primary-glow);
}

/* MOAT 4: Ethereal "Quick View" Artifacts */
body.skin-mystic .modal__inner {
  background: var(--mystic-bg-glass) !important;
  backdrop-filter: blur(30px);
  border: 1px solid var(--mystic-border-glow);
  box-shadow: var(--mystic-shadow-lg), var(--mystic-shadow-ambient);
  border-radius: var(--mystic-radius-lg);
}
body.skin-mystic #QuickViewModal {
  background: var(--mystic-bg-overlay);
}

/* MOAT 5: "Smoke Clear" Image Reveals */
body.skin-mystic .grid-product__image-mask {
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-position: center;
  transition: mask-size 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s ease;
}
body.skin-mystic .grid-product:hover .grid-product__image-mask {
  mask-size: 200% 200%;
  -webkit-mask-size: 200% 200%;
  transform: scale(1.02);
}

/* MOAT 6: Alchemical Swatch Locks */
@keyframes mystic-alchemical-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
body.skin-mystic .variant-input-wrap input[type="radio"]:checked + label {
  position: relative;
  border-color: transparent !important;
}
body.skin-mystic .variant-input-wrap input[type="radio"]:checked + label::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130%; height: 130%;
  background: conic-gradient(transparent, var(--mystic-secondary), transparent 40%);
  animation: mystic-alchemical-spin 4s linear infinite;
  border-radius: 50%;
  z-index: -1;
}

/* MOAT 7: Hypnotic Pendulum Badges */
@keyframes mystic-pendulum {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
body.skin-mystic .grid-product__tag,
body.skin-mystic .badge {
  background: rgba(4, 6, 12, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid var(--mystic-secondary);
  color: var(--mystic-text-gold);
  font-family: var(--mystic-font-display);
  transform-origin: top center;
  animation: mystic-pendulum 5s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5), 0 0 15px rgba(217, 162, 74, 0.25);
  padding: 8px 16px;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 50% 85%, 0 100%);
}

/* MOAT 8: The "Scrying Pool" Footer */
@keyframes mystic-ripple {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}
body.skin-mystic .site-footer {
  background: radial-gradient(circle at center bottom, rgba(122, 105, 197, 0.15), transparent 70%), var(--mystic-bg-void) !important;
  border-top: 1px solid var(--mystic-border-glass);
  position: relative;
  overflow: hidden;
}
body.skin-mystic .site-footer::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 200px;
  background-image: repeating-radial-gradient(circle at 50% 150%, transparent, rgba(122, 105, 197, 0.05) 10px, transparent 20px);
  animation: mystic-ripple 20s linear infinite;
  pointer-events: none;
}

/* MOAT 9: Phosphorescent Reading (Rich Text) */
body.skin-mystic .rte p {
  transition: color 0.5s ease, text-shadow 0.5s ease;
  color: var(--mystic-text-secondary);
}
body.skin-mystic .rte:hover p {
  opacity: 0.6; /* Dim the surrounding text */
}
body.skin-mystic .rte p:hover {
  opacity: 1;
  color: var(--mystic-text-primary);
  text-shadow: 0 0 16px var(--mystic-primary-glow);
}

   2026 MODERN FLUID STACKING & MARGIN RESET
   ========================================================= */

/* 1. Unlock the main wrapper so all sections can stack naturally */
body.skin-mystic #MainContent {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important; /* Kills the 100vh lock */
    overflow-x: hidden !important; /* Prevents horizontal scroll breaking */
    overflow-y: visible !important;
}

/* 2. Force Shopify's hidden section wrappers to go full-bleed */
body.skin-mystic .shopify-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 3. Modern Mobile Optimization for our custom sections */
/* This ensures they fill the screen perfectly, minus the mobile toolbar */
body.skin-mystic .shopify-section:has(> div[id^="nexus-hero-"]),
body.skin-mystic .shopify-section:has(> div[id^="extracts-container-"]),
body.skin-mystic .shopify-section:has(> div[id^="realms-container-"]),
body.skin-mystic .shopify-section:has(> div[id^="omega-container-"]) {
    min-height: 100svh !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 4. Ensure the inner content max-widths stay centered and elegant */
body.skin-mystic .shopify-section > div {
    margin: 0 auto !important;
    width: 100% !important;
}
/* ==========================================================================
   ONEIRO TYPOGRAPHY ENFORCEMENT
   ========================================================================== */

/* Enforce Cormorant Garamond for main titles and headings */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400; /* Classic weight for Cormorant */
  text-transform: none;
}

/* Enforce gallete (Medium) for the Elixir buttons */
.elixir-btn {
  font-family: 'Gallete', sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* ==========================================================================
   ONEIRO EXTRACTS - NEXUS SKINS MATRIX
   ========================================================================== */

:root {
  /* Primary Hex Codes */
  --color-flow: #0B1020;    /* Midnight Indigo */
  --color-somn: #138C7A;    /* Green-Teal */
  --color-queefy: #722F37;  /* Deep Wine Red */
  --color-lunara: #7A69C5;  /* Amethyst */
  --color-maru: #E0B647;    /* Sunshine Gold */

  /* Secondary Accents */
  --color-flow-accent: #00FFFF;   /* Silver-cyan */
  --color-somn-accent: #FFBF00;   /* Soft amber */
  --color-queefy-accent: #FF00FF; /* Neon magenta */
  --color-lunara-accent: #FFD700; /* Gold foil */
  --color-maru-accent: #00FFFF;   /* Cyan sparks */
}

/* 1. ONEIRO FLOW - The Navigator (Bioluminescent Pulse) */
.skin-oneiro-flow {
  color: var(--color-flow-accent);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
}
.skin-oneiro-flow:hover, .skin-oneiro-flow.active {
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.4);
  box-shadow: inset 0 -2px 0 var(--color-flow-accent);
}

/* 2. SACRED SLEEP - Nyx Somn (Mercury Viscosity) */
.skin-sacred-sleep {
  color: var(--color-somn);
}
.skin-sacred-sleep:hover, .skin-sacred-sleep.active {
  color: var(--color-somn-accent);
  text-shadow: 0 0 15px rgba(255, 191, 0, 0.6);
  box-shadow: inset 0 -2px 0 var(--color-somn);
}

/* 3. HEART ALCHEMY - Queefy (Glitch Artifacts) */
.skin-heart-alchemy {
  color: var(--color-queefy);
}
.skin-heart-alchemy:hover, .skin-heart-alchemy.active {
  color: var(--color-queefy-accent);
  animation: glitch-skew 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  box-shadow: inset 0 -2px 0 var(--color-queefy-accent);
}

/* 4. THIRD EYE DIVINE - Lunara Yeon (Halo Accents) */
.skin-third-eye-divine {
  color: var(--color-lunara);
}
.skin-third-eye-divine:hover, .skin-third-eye-divine.active {
  color: #FFFFFF;
  text-shadow: 0 0 10px var(--color-lunara-accent), 0 0 20px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 -2px 0 var(--color-lunara-accent);
}

/* 5. QUANTUM RADIANCE - Maru B'Oba-9 (Solar Anchor) */
.skin-quantum-radiance {
  color: var(--color-maru);
}
.skin-quantum-radiance:hover, .skin-quantum-radiance.active {
  color: var(--color-maru-accent);
  text-shadow: 0 0 12px var(--color-maru), 0 0 24px rgba(224, 182, 71, 0.6);
  box-shadow: inset 0 -2px 0 var(--color-maru);
}

/* Subtle Glitch Animation for Heart Alchemy */
@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  20% { transform: skew(-5deg); text-shadow: -1px 0 var(--color-queefy); }
  40% { transform: skew(5deg); text-shadow: 1px 0 var(--color-queefy-accent); }
  60% { transform: skew(-2deg); text-shadow: -1px 0 var(--color-queefy); }
  80% { transform: skew(2deg); text-shadow: 1px 0 var(--color-queefy-accent); }
  100% { transform: skew(0deg); }
}
.elixir-lineup-placemat img {
  filter: drop-shadow(0 0 15px rgba(122, 105, 197, 0.4));
  transition: filter 0.5s ease;
}

.elixir-lineup-placemat img:hover {
  filter: drop-shadow(0 0 25px rgba(122, 105, 197, 0.7));
}\n@media (prefers-reduced-motion: reduce) {\n  body.skin-mystic .loader::after,\n  body.skin-mystic .grid-product__tag,\n  body.skin-mystic .badge {\n    animation: none !important;\n  }\n}\n
\n/* Additional mobile spacing between hub and extracts */\n@media (max-width: 767px) {\n  [id^=" nexus-hero-\] { margin-bottom: 4rem; z-index: 8; }\n [id^=\extracts-container-\] { margin-top: 1rem; }\n}\n
\n/* 2026 MOAT EXTENSIONS */\n.moat-shader-overlay { position: fixed; inset:0; z-index:9998; pointer-events:none; }\n.moat-physics-area { position:relative; }\n.moat-physics-area button { position:absolute; transition:transform .1s ease-out; }\n