/* ===========================================================================
   Donut Market v2 — Complete Design System
   ALL CSS lives in this file (SellAuth standard).
   Contains:
   - Brand tokens (colors, fonts)
   - 4-layer background system (aurora, dots, voxels)
   - Components: cards, buttons, chips, badges
   - dm-* utility classes (HOW IT WORKS, FAQ, Footer v2)
   - Navbar polish overrides
   - SellAuth-specific fallbacks for Tailwind classes
   - !important overrides for old theme conflicts
   =========================================================================== */

/* The page's scrollbar lives on <body> (overflow-propagation; <html> is visible).
   Force it always-present on <body> so it never appears/disappears — which was
   causing the layout to re-center left ("slides right-to-left") on every reload.
   Do NOT also set it on <html>, or you get TWO scrollbars (a doubled slider). */
body { overflow-y: scroll; }

/* Entrance/scroll fade animations removed (not wanted) — every component renders
   in place with no fade or rise. Neutralizes AOS (`data-aos`) site-wide. */
[data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Also neutralize the JS entrance cascade in CSS (belt-and-suspenders), so the
   navbar/sections never hide, fade, or shift on load even if the cascade JS runs. */
html.dm-will-enter header.sticky.top-0,
html.dm-will-enter #main-content > .component,
html.dm-will-enter footer.dm-footer,
html.dm-enter header.sticky.top-0,
html.dm-enter #main-content > .component,
html.dm-enter footer.dm-footer { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Tailwind purged `sr-only` / `focus:not-sr-only` out of built.css, so the
   "Skip to main content" link had nothing hiding it and flashed on every load.
   Define it here (custom.css is render-blocking) — hidden until keyboard focus. */
.skip-link {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  top: 1rem; left: 1rem; z-index: 9999;
  padding: 8px 16px; border-radius: 8px;
  background: #5b8cff; color: #fff;
  white-space: nowrap;
}

:root {
  --bg:        #0a0b14;
  --surface:   #101220;
  --elevated:  #181b2c;
  --line:      rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --muted:     rgba(255,255,255,0.64);
  --subtle:    rgba(255,255,255,0.46);
  --faint:     rgba(255,255,255,0.30);
  --accent:    #5b8cff;
  --accent-from: #3b82f6;
  --accent-to:   #8b5cf6;
  --emerald:   #10b981;
  --amber:     #fbbf24;
  --red:       #ef4444;
  --violet:    #a855f7;
  --cyan:      #22d3ee;

  /* DM-prefixed aliases for v2 components that use these explicitly */
  --dm-bg:        var(--bg);
  --dm-surface:   var(--surface);
  --dm-elevated:  var(--elevated);
  --dm-line:      var(--line);
  --dm-line-strong: var(--line-strong);
  --dm-muted:     var(--muted);
  --dm-subtle:    var(--subtle);
  --dm-faint:     var(--faint);
  --dm-accent:    var(--accent);
  --dm-accent-from: var(--accent-from);
  --dm-accent-to:   var(--accent-to);
  --dm-emerald:   var(--emerald);
  --dm-amber:     var(--amber);
  --dm-red:       var(--red);
  --dm-violet:    var(--violet);
  --dm-cyan:      var(--cyan);
}

* { box-sizing: border-box; }
/* CRITICAL: force-override built.css's hardcoded Tomorrow + Chivo Mono fonts.
   built.css was Tailwind-compiled with the old theme defaults baked into the html root.
   Without these !important overrides, every element fell back to Tomorrow. */
/* Metric-matched fallback fonts: the system fallback is scaled (size-adjust +
   ascent/descent overrides) to occupy the SAME box as the real webfont, so when
   Inter / JetBrains Mono swap in there is ZERO reflow — kills the font-swap CLS
   while still showing the real font once it loads. Must sit right after the
   primary family in every stack below. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('Courier New'), local('Courier');
  ascent-override: 102%;
  descent-override: 30%;
  line-gap-override: 0%;
  size-adjust: 100%;
}
html, :host {
  background: var(--bg);
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body {
  /* !important: built.css puts a bg-* class on <body> which beats this element
     selector — an opaque body bg paints OVER the fixed z:-1..-3 background
     layers (aurora/dots/voxels), hiding them entirely. */
  background: transparent !important;
  color: #fff;
  font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
}
/* Override built.css's Chivo Mono default for code-family elements */
code, kbd, pre, samp, .font-mono, .donut-title, h1, h2, h3, h4, h5, h6 {
  font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
}
/* But generic body paragraphs should still be Inter, not mono */
body, p, span, div, a, li, button, input, textarea, select, label {
  font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
/* h1-h6 explicitly mono for headings */
h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace !important; }

/* ============================================================
   BACKGROUND LAYERS — 4-layer GPU-friendly system
   z=-4 video iframe (homepage only, hero-confined)
   z=-3 aurora corner blobs (drifting)
   z=-2 constellation dot field (static)
   z=-1 floating Minecraft voxels (drifting)
============================================================ */

/* Video iframe — confined to hero area on homepage.
   absolute (NOT fixed): it must scroll away with the hero instead of
   staying pinned behind every section. !important beats the master.njk
   inline rule that sets it fixed. */
.video-background {
  position: absolute !important; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: -4;
  pointer-events: none;
  overflow: hidden;
}
/* tall dissolve at the video's bottom edge — melts into the page background
   so there's no visible seam where the hero hands off to the next section */
.video-background::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 48%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(10, 11, 20, 0.45) 45%,
    rgba(10, 11, 20, 0.85) 75%,
    #0a0b14 97%);
  z-index: 2;
  pointer-events: none;
}
.video-background iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.15);
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  border: 0;
  opacity: 0;
  transition: opacity 1.2s ease, filter 1.2s ease;
  filter: blur(8px) brightness(0.55) saturate(1.15) contrast(1.05);
}
.video-background.loaded iframe { opacity: 1; }
.video-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, transparent 0%, rgba(10,11,20,0.4) 70%, rgba(10,11,20,0.85) 100%),
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(59,130,246,0.18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,92,246,0.15), transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(10,11,20,0.35) 60%, var(--bg) 100%);
  backdrop-filter: blur(2px) saturate(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
}
@media (max-width: 768px) { .video-background { display: none; } }
@media (max-width: 1024px) { .video-background iframe { filter: brightness(0.55); } }

/* Aurora — corners only, leaves center clean */
.dm-bg-aurora, .bg-aurora {
  position: fixed; inset: 0;   /* was -10% — extended past the viewport and caused an 8px mobile horizontal scroll */
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 450px at 0% 0%,   rgba(91,140,255,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 5%, rgba(139,92,246,0.20) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 0% 100%, rgba(236,72,153,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 500px 400px at 100% 100%, rgba(16,185,129,0.10) 0%, transparent 60%);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  animation: aurora-drift 40s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.03); }
}

/* Constellation dot field */
.dm-bg-grid, .bg-grid-layer {
  position: fixed; inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle 1px at 50% 50%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0.12) 1px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 40%, #000 20%, transparent 92%);
}
.dm-bg-grid::after, .bg-grid-layer::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle 1.5px at 50% 50%, rgba(91,140,255,0.55) 0, rgba(91,140,255,0.3) 1.5px, transparent 4px);
  background-size: 192px 192px; background-position: 32px 32px;
  pointer-events: none;
}
.dm-bg-grid::before, .bg-grid-layer::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle 2px at 50% 50%, rgba(139,92,246,0.5) 0, rgba(139,92,246,0.25) 2px, transparent 5px);
  background-size: 288px 288px; background-position: 144px 96px;
  pointer-events: none;
}

/* Floating voxels */
.dm-bg-voxels, .bg-voxels {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.dm-bg-voxels .v, .bg-voxels .v {
  position: absolute;
  width: 28px; height: 28px;
  box-shadow:
    inset -4px -4px 0 rgba(0,0,0,0.30),
    inset 4px 4px 0 rgba(255,255,255,0.20),
    0 8px 24px rgba(0,0,0,0.4);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.dm-bg-voxels .v1, .bg-voxels .v1 { top: 14%; left: 7%;  background: linear-gradient(135deg, rgba(91,140,255,0.7), rgba(91,140,255,0.4)); animation: vox-drift-1 40s ease-in-out infinite alternate; }
.dm-bg-voxels .v2, .bg-voxels .v2 { top: 72%; right: 9%; width: 22px; height: 22px; background: linear-gradient(135deg, rgba(251,191,36,0.7), rgba(245,158,11,0.5)); animation: vox-drift-2 52s ease-in-out infinite alternate; }
.dm-bg-voxels .v3, .bg-voxels .v3 { top: 46%; right: 26%; width: 18px; height: 18px; background: linear-gradient(135deg, rgba(16,185,129,0.7), rgba(52,211,153,0.5)); animation: vox-drift-3 38s ease-in-out infinite alternate; }
.dm-bg-voxels .v4, .bg-voxels .v4 { top: 28%; left: 78%; width: 16px; height: 16px; background: linear-gradient(135deg, rgba(236,72,153,0.6), rgba(168,85,247,0.4)); animation: vox-drift-4 46s ease-in-out infinite alternate; }
.dm-bg-voxels .v5, .bg-voxels .v5 { top: 84%; left: 38%; width: 14px; height: 14px; background: linear-gradient(135deg, rgba(139,92,246,0.6), rgba(91,140,255,0.4)); animation: vox-drift-5 60s ease-in-out infinite alternate; }
@keyframes vox-drift-1 { to { transform: translate3d(40px,  -30px, 0) rotate(15deg);  } }
@keyframes vox-drift-2 { to { transform: translate3d(-50px, -40px, 0) rotate(-20deg); } }
@keyframes vox-drift-3 { to { transform: translate3d(30px,   50px, 0) rotate(10deg);  } }
@keyframes vox-drift-4 { to { transform: translate3d(-40px,  60px, 0) rotate(-12deg); } }
@keyframes vox-drift-5 { to { transform: translate3d(60px,  -40px, 0) rotate(22deg);  } }

@media (max-width: 768px) { .dm-bg-voxels, .bg-voxels { display: none; } .dm-bg-aurora, .bg-aurora { animation: none; } }

/* ============================================================
   LAYOUT
============================================================ */
/* Sticky navbar must paint above all scrolling content (badges, carousel
   arrows, etc. used z>=10 and tied/beat the header's z-10, floating over it
   while scrolling). Intentional overlays stay higher: story HUD 40,
   mobile buy bar 70, coupon modal 80. */
header.sticky.top-0 { z-index: 30 !important; }

/* ============================================================
   PAGE ENTRANCE — staggered component cascade on load.
   html.dm-will-enter (added by JS pre-paint) hides the pieces;
   html.dm-enter fades them in: navbar slides down, sections rise
   one after another. Classes are removed once done, so nothing
   lingers. JS-off = classes never added = everything visible.
============================================================ */
/* 0.001 not 0: opacity-0 elements are EXCLUDED from LCP measurement,
   which would push the metric later — 0.001 looks identical but counts. */
html.dm-will-enter header.sticky.top-0 {
  opacity: 0.001; transform: translateY(-14px);
}
html.dm-will-enter #main-content > .component,
html.dm-will-enter footer.dm-footer {
  opacity: 0.001; transform: translateY(18px);
}
html.dm-enter header.sticky.top-0,
html.dm-enter #main-content > .component,
html.dm-enter footer.dm-footer {
  opacity: 1; transform: translateY(0);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
/* the cascade: navbar first, then each section in order */
html.dm-enter header.sticky.top-0 { transition-delay: 0s; }
html.dm-enter #main-content > .component:nth-child(1) { transition-delay: .10s; }
html.dm-enter #main-content > .component:nth-child(2) { transition-delay: .20s; }
html.dm-enter #main-content > .component:nth-child(3) { transition-delay: .30s; }
html.dm-enter #main-content > .component:nth-child(4) { transition-delay: .38s; }
html.dm-enter #main-content > .component:nth-child(n+5),
html.dm-enter footer.dm-footer { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  html.dm-will-enter header.sticky.top-0,
  html.dm-will-enter #main-content > .component,
  html.dm-will-enter footer.dm-footer { opacity: 1; transform: none; }
}

.container { max-width: 1280px; margin-inline: auto; padding: 0 16px; }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.dm-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }

/* ============================================================
   HOMEPAGE SECTION RHYTHM
   The content components each used a different bottom margin
   (mb-16 / lg:mb-24 / lg:mb-32 → 0, 96, 128px) plus, for HOW IT
   WORKS, a 60px internal top pad. That produced wildly uneven
   gaps (0, 96, 128, 156). Normalize to ONE consistent gap for
   every section inside <main>.
============================================================ */
/* Below-the-fold sections: skip their layout/paint work until the user
   scrolls near them (big Style & Layout saving on load). Feedbacks is
   EXCLUDED — its carousel JS measures widths at load and would read 0.
   `auto Npx` placeholder keeps the scrollbar stable before first render. */
#main-content > .component[data-component-id^="features"],
#main-content > .component[data-component-id^="faq"],
#main-content > .component[data-component-id^="socials"],
#main-content > .component[data-component-id^="video-gallery"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

/* margin-BOTTOM on every section (robust: some components emit a trailing
   <script>, which breaks the adjacent .component + .component selector) */
#main-content > .component { margin-top: 0 !important; margin-bottom: 56px; }
#main-content > .component:last-of-type { margin-bottom: 0; }
/* First component sits flush under the sticky navbar. The hero supplies its own
   top padding; every other page (store, etc.) needs breathing room added. */
#main-content > .component:first-child:not([data-component-id^="hero"]) { padding-top: 40px; }
/* strip each component's own ad-hoc bottom margin + internal top pad
   so they don't stack on top of the uniform gap */
#main-content > .component > .container[class*="mb-"] { margin-bottom: 0 !important; }
#main-content > .component .hiw-section { padding-top: 0 !important; }
@media (min-width: 1024px) {
  #main-content > .component { margin-bottom: 96px; }
}
@media (min-width: 1024px) { .dm-container { padding: 0 32px; } }
.section { padding: 64px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } }
.section-sm { padding: 48px 0; }
.dm-section { padding: 80px 0; position: relative; }
@media (min-width: 768px) { .dm-section { padding: 120px 0; } }

/* ============================================================
   TYPOGRAPHY
============================================================ */
.font-mono { font-family: 'JetBrains Mono', monospace; }
.muted   { color: var(--muted); }
.subtle  { color: var(--subtle); }
.faint   { color: var(--faint); }
.dm-muted   { color: var(--muted); }
.dm-subtle  { color: var(--subtle); }
.dm-faint   { color: var(--faint); }

.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.dm-eyebrow { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); padding: 4px 10px; background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.25); border-radius: 6px; }

.h1 { font-family: 'JetBrains Mono', monospace; font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.h2 { font-family: 'JetBrains Mono', monospace; font-size: clamp(26px, 4vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.h3 { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; margin: 0; }

.display-massive { font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: clamp(48px, 9vw, 140px); line-height: 0.92; letter-spacing: -0.04em; }
.display-huge    { font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: clamp(36px, 5.5vw, 84px); line-height: 0.95; letter-spacing: -0.03em; }
.display         { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(28px, 4vw, 56px); line-height: 1.0; letter-spacing: -0.02em; }
.dm-display-massive { font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: clamp(48px, 9vw, 140px); line-height: 0.92; letter-spacing: -0.04em; }
.dm-display-huge    { font-family: 'JetBrains Mono', monospace; font-weight: 900; font-size: clamp(36px, 5.5vw, 84px); line-height: 0.95; letter-spacing: -0.03em; }
.dm-h2 { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(28px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; }
.dm-h3 { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; letter-spacing: -0.01em; }

.gradient-text, .dm-gradient-text {
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   HIGHLIGHTED TITLE WORDS — SellAuth wraps [bracketed] words in
   <span class="glitch">. Style them as an outlined purple glass
   box (not the default filled/glitch block). Kill the glitch
   duplicate layers so there's no RGB smear.
============================================================ */
.glitch:not(.glitch-btn) {
  display: inline-block;
  position: relative;
  padding: 2px 14px;
  margin: 0 2px;
  border: 2px solid rgba(139, 92, 246, 0.8);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #b07cff !important;
  -webkit-text-fill-color: #b07cff !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  font-weight: 800 !important;
  text-shadow: 0 0 22px rgba(139, 92, 246, 0.7), 0 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 8px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(139, 92, 246, 0.15);
  animation: none !important; -webkit-animation: none !important;
  transform: none !important; clip-path: none !important;
}
.glitch:not(.glitch-btn)::before,
.glitch:not(.glitch-btn)::after { display: none !important; content: none !important; }

.stars { letter-spacing: 1px; color: var(--amber); font-family: 'JetBrains Mono', monospace; }

/* ============================================================
   QUANTITY STEPPER — clean unified control (was a floating
   input box detached from the −/+ buttons).
============================================================ */
.dm-qty-stepper {
  border: 1px solid rgba(139, 92, 246, 0.4) !important;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  width: 100%;            /* fit the buy box / match the buttons below */
}
.dm-qty-stepper > button {
  flex: 0 0 auto;
  width: 56px !important; height: 54px !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff;
  border: none !important; border-radius: 0 !important;
  transition: background .2s ease;
}
.dm-qty-stepper > button svg { width: 20px; height: 20px; }
.dm-qty-stepper > button:hover:not(:disabled) { background: rgba(139, 92, 246, 0.4) !important; }
.dm-qty-stepper > button:disabled { opacity: 0.4; }
.dm-qty-stepper input[type="number"] {
  flex: 1 1 auto; width: auto !important; min-width: 0;
  height: 54px;
  background: transparent !important;
  border: none !important; border-radius: 0 !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 18px; color: #fff !important;
  -moz-appearance: textfield;
}
.dm-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.dm-qty-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   VARIANT PICKER — theme-aligned selectable cards (was flat
   squares with a harsh focus ring).
============================================================ */
.dm-variant-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 12px 16px !important;
  transition: border-color .2s ease, background .2s ease, transform .18s ease, box-shadow .2s ease !important;
}
.dm-variant-btn:hover:not(:disabled):not(.is-active) {
  border-color: rgba(91, 140, 255, 0.35) !important;
  background: rgba(91, 140, 255, 0.06) !important;
  transform: translateY(-1px);
}
/* selected: gradient tint + accent ring + glow (replaces the default ring) */
.dm-variant-btn.is-active {
  --tw-ring-shadow: 0 0 #0000 !important;   /* neutralize Tailwind ring */
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  border-color: rgba(91, 140, 255, 0.60) !important;
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.16), rgba(124, 92, 255, 0.07)) !important;
  box-shadow: 0 0 18px -5px rgba(91, 140, 255, 0.60), inset 0 0 14px rgba(91, 140, 255, 0.08) !important;
}
.dm-variant-btn.is-active > div:first-child p:first-child { color: #fff; }
.dm-variant-btn:disabled { opacity: 0.45; filter: grayscale(0.4); }
/* variant name + price hierarchy */
.dm-variant-btn > div:first-child p:first-child { font-weight: 700; }
.dm-variant-btn > div:last-child .font-medium {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  color: #a855f7;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.30);
}
/* select fallback (many-variants dropdown) gets the same pill look */
select[name="variant"] {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff;
}

/* compact variant — cart line items */
.dm-qty-stepper.dm-qty-sm { border-radius: 9px; }
.dm-qty-stepper.dm-qty-sm > button { width: 32px !important; height: 34px !important; }
.dm-qty-stepper.dm-qty-sm > button svg { width: 14px; height: 14px; }
.dm-qty-stepper.dm-qty-sm input[type="number"] { height: 34px; font-size: 13.5px; }

/* ============================================================
   CORE COMPONENTS — buttons, cards, chips, badges
============================================================ */
.card {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .card-hover:hover { border-color: rgba(91,140,255,0.5); transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 48px -20px rgba(59,130,246,0.45); }
  .card-hover:hover .card-img { transform: scale(1.05); }
}
.card-img { transition: transform .35s ease; }
.dm-card { background: linear-gradient(180deg, rgba(15,17,32,0.95), rgba(15,17,32,0.8)); border: 1px solid var(--line-strong); border-radius: 16px; transition: all .25s ease; }
.dm-card.dm-card-hover:hover { border-color: rgba(91,140,255,0.4); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(91,140,255,0.18); }
.dm-card.dm-card-emerald { border-color: rgba(16,185,129,0.3); background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(15,17,32,0.85)); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%);
  color: #fff; font-weight: 600;
  border-radius: 12px; border: 0; cursor: pointer;
  padding: 12px 20px; font-size: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -8px rgba(91,140,255,0.6);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 16px 36px -10px rgba(139,92,246,0.7); }
.btn-primary:active { transform: translateY(0); }

/* SellAuth-core primary buttons (Proceed to Payment, Add to cart, modal submits…)
   ship as a FLAT .bg-accent-500 fill. Re-skin them to the theme's blue→violet
   gradient so checkout/cart/product buttons match .btn-primary instead of the
   raw accent colour. Scoped to buttons/links so badges etc. are untouched. */
button.bg-accent-500,
a.bg-accent-500 {
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -8px rgba(91,140,255,0.55) !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
button.bg-accent-500:hover,
a.bg-accent-500:hover {
  /* override Tailwind's hover:bg-accent-600 which would flatten it again */
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%) !important;
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 16px 36px -10px rgba(139,92,246,0.65) !important;
}
button.bg-accent-500:active,
a.bg-accent-500:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff; font-weight: 500;
  border-radius: 12px; cursor: pointer;
  padding: 12px 20px; font-size: 14px;
  transition: background .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); }

.dm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; transition: all .15s ease; cursor: pointer; border: 1px solid transparent; }
.dm-btn-primary { background: linear-gradient(135deg, var(--accent-from), var(--accent-to)); color: #fff; box-shadow: 0 6px 20px -8px rgba(91,140,255,0.6); }
.dm-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgba(91,140,255,0.7); }
.dm-btn-secondary { background: rgba(255,255,255,0.04); border-color: var(--line-strong); color: #fff; }
.dm-btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); }

.chip, .dm-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px; color: rgba(255,255,255,0.85);
}

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; text-transform: uppercase;
}
.dm-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(91,140,255,0.1); color: var(--accent); border: 1px solid rgba(91,140,255,0.25); }

/* Cat pill (category filter) */
.cat-pill { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; transition: all .15s ease; cursor: pointer; white-space: nowrap; }
.cat-pill:hover { color: #fff; border-color: rgba(91,140,255,0.45); background: rgba(91,140,255,0.08); }
.cat-pill.active { color: #fff; font-weight: 600; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2)); border-color: rgba(139,92,246,0.55); }

/* ============================================================
   GLOWS + GRADIENT BORDER + VOXEL ACCENT
============================================================ */
.glow-purple { box-shadow: 0 0 60px -10px rgba(139,92,246,0.5), 0 30px 60px -20px rgba(0,0,0,0.6); }
.glow-blue   { box-shadow: 0 0 60px -10px rgba(59,130,246,0.5), 0 30px 60px -20px rgba(0,0,0,0.6); }
.glow-gold   { box-shadow: 0 0 60px -10px rgba(251,191,36,0.4), 0 30px 60px -20px rgba(0,0,0,0.6); }
.glow-emerald { box-shadow: 0 0 60px -10px rgba(16,185,129,0.4), 0 30px 60px -20px rgba(0,0,0,0.6); }

.gradient-border {
  position: relative;
  background: var(--surface);
  border-radius: 18px;
}
.gradient-border::before {
  content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(91,140,255,0.6), rgba(139,92,246,0.6), rgba(91,140,255,0.2));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.dm-gradient-border { position: relative; padding: 1.5px; border-radius: 18px; background: linear-gradient(135deg, rgba(91,140,255,0.6), rgba(139,92,246,0.4), rgba(236,72,153,0.3)); }
.dm-gradient-border > * { border-radius: 17px; background: var(--surface); display: block; }

.voxel-accent {
  position: absolute; width: 28px; height: 28px;
  background: linear-gradient(135deg, rgba(91,140,255,0.6), rgba(139,92,246,0.6));
  box-shadow: inset -4px -4px 0 rgba(0,0,0,0.25), inset 4px 4px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(91,140,255,0.4);
  pointer-events: none;
}

/* Premium gold border for high-value items */
.holo-border { position: relative; isolation: isolate; border-color: rgba(251,191,36,0.35) !important; box-shadow: 0 0 0 1px rgba(251,191,36,0.18), 0 0 30px -10px rgba(251,191,36,0.30), 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.6); background-image: linear-gradient(180deg, rgba(251,191,36,0.04), transparent 40%); }
.holo-border:hover { border-color: rgba(251,191,36,0.55) !important; box-shadow: 0 0 0 1px rgba(251,191,36,0.30), 0 0 40px -8px rgba(251,191,36,0.45), 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 36px -10px rgba(0,0,0,0.6); }
.holo-border::after { content: '✦'; position: absolute; top: 8px; right: 8px; font-size: 14px; color: #fbbf24; text-shadow: 0 0 8px rgba(251,191,36,0.6); pointer-events: none; opacity: 0.8; z-index: 2; }

/* ============================================================
   PRICE / STARS / LIVE DOT
============================================================ */
.price-mega { font-family: 'JetBrains Mono', monospace; font-weight: 800; background: linear-gradient(135deg, #34d399 0%, #10b981 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 0 60px rgba(16,185,129,0.3); }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: pulse-ring 2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 100% { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }
.dm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 10px rgba(16,185,129,0.7); animation: dm-pulse 1.6s ease-in-out infinite; display: inline-block; }
@keyframes dm-pulse { 0%,100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* ============================================================
   ANIMATIONS — reveal, stagger, micro
============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.stagger.in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.stagger.in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.stagger.in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.stagger.in > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.stagger.in > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.fade-in { animation: fade-in .25s ease both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.tick-bump { display: inline-block; animation: tick-bump 0.55s cubic-bezier(.22, 1, .36, 1); transform-origin: center; }
@keyframes tick-bump { 0% { transform: scale(1); color: inherit; text-shadow: none; } 30% { transform: scale(1.28); color: #34d399; text-shadow: 0 0 14px rgba(52,211,153,0.7); } 100% { transform: scale(1); color: inherit; text-shadow: none; } }
.cart-bump { animation: cart-bump 0.55s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; }
@keyframes cart-bump { 0% { transform: scale(1); box-shadow: none; } 40% { transform: scale(1.45); box-shadow: 0 0 18px rgba(52,211,153,0.7); } 100% { transform: scale(1); box-shadow: none; } }

/* Cursor-following glow */
/* inset:-600px on top/bottom pushes the glow element's hard edges well past
   the hero, so the soft light never gets cut flat at the hero boundary.
   The JS computes --mx/--my relative to THIS element (see hero.njk). */
.cursor-glow { position: absolute; inset: -600px 0; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: radial-gradient(circle 520px at var(--mx, 50%) var(--my, 50%), rgba(91,140,255,0.13) 0%, rgba(139,92,246,0.08) 30%, transparent 65%); z-index: 0; mix-blend-mode: screen; }
.cursor-glow.visible { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* 3D tilt */
.tilt-3d { transform-style: preserve-3d; transform: perspective(900px) rotateX(0) rotateY(0); transition: transform .25s cubic-bezier(.22,1,.36,1); will-change: transform; }
.tilt-3d > * { transform: translateZ(0); }
@media (hover: none) { .tilt-3d { transform: none !important; } }

/* ============================================================
   HOW IT WORKS (dm-hiw)
============================================================ */
.dm-hiw-step { position: relative; background: linear-gradient(180deg, rgba(15,17,32,0.95), rgba(15,17,32,0.85)); border: 1px solid var(--line-strong); border-radius: 16px; padding: 24px 22px 20px; transition: all .25s ease; }
.dm-hiw-step:hover { border-color: rgba(91,140,255,0.5); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(91,140,255,0.18); }
.dm-hiw-step.final { border-color: rgba(16,185,129,0.4); background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(15,17,32,0.85)); }
.dm-hiw-step.final:hover { border-color: var(--emerald); box-shadow: 0 14px 32px rgba(16,185,129,0.22); }
.dm-hiw-num { position: absolute; top: -14px; left: 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 6px; background: linear-gradient(135deg, var(--accent-from), var(--accent-to)); color: #fff; letter-spacing: 0.05em; }
.dm-hiw-step.final .dm-hiw-num { background: linear-gradient(135deg, var(--emerald), #34d399); color: #052e1a; }
.dm-hiw-icon { font-size: 34px; line-height: 1; margin-bottom: 16px; }
.dm-hiw-title { font-weight: 700; font-size: 17px; margin-bottom: 8px; color: #fff; }
.dm-hiw-desc { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; min-height: 60px; }
.dm-hiw-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.08); }
.dm-hiw-chip { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 4px; background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.25); color: #c7d4ff; letter-spacing: 0.04em; }
.dm-hiw-chip.emerald { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #b6f4d2; }
.dm-hiw-chip.amber   { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3); color: #fde8a8; }
.dm-hiw-chip.violet  { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); color: #e9d5ff; }
.dm-hiw-chip .live { width: 5px; height: 5px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 6px rgba(16,185,129,0.8); animation: dm-pulse 1.5s ease-in-out infinite; }
.dm-bot-stream { background: rgba(0,0,0,0.35); border: 1px solid rgba(168,85,247,0.2); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7; }
.dm-bot-stream .ok   { color: var(--emerald); flex-shrink: 0; }
.dm-bot-stream .ping { color: var(--amber); flex-shrink: 0; }

/* ============================================================
   FAQ
============================================================ */
.dm-faq-item-wrap.is-open { border-color: rgba(91,140,255,0.5) !important; box-shadow: 0 8px 24px -8px rgba(91,140,255,0.25) !important; }

/* ============================================================
   FOOTER v2 (dm-footer)
============================================================ */
.dm-footer { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,18,32,0) 0%, rgba(16,18,32,0.6) 30%, rgba(10,11,20,0.95) 100%); padding: 72px 0 32px; margin-top: 96px; overflow: hidden; }
.dm-footer-aurora { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(ellipse 800px 300px at 0% 100%, rgba(91,140,255,0.08) 0%, transparent 70%),
  radial-gradient(ellipse 600px 250px at 100% 100%, rgba(16,185,129,0.06) 0%, transparent 70%),
  radial-gradient(ellipse 500px 200px at 50% 0%, rgba(139,92,246,0.06) 0%, transparent 70%); }
.dm-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
@media (min-width: 768px) { .dm-footer-grid { grid-template-columns: 2fr 1fr 1fr; } .dm-footer-brand { grid-column: span 3; } }
@media (min-width: 1024px) { .dm-footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1fr 1.1fr; gap: 48px; } .dm-footer-brand { grid-column: span 1; } }
.dm-footer-hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #fff; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dm-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.dm-footer-list a { color: var(--muted); text-decoration: none; transition: all .2s ease; display: inline-block; }
.dm-footer-list a:hover { color: #fff; transform: translateX(3px); }
.dm-discord-cta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(135deg, rgba(88,101,242,0.2), rgba(71,82,196,0.18)); border: 1px solid rgba(88,101,242,0.45); border-radius: 10px; color: #fff; text-decoration: none; margin-bottom: 14px; transition: all .2s ease; }
.dm-discord-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(88,101,242,0.5); border-color: rgba(88,101,242,0.7); }
.dm-socials { display: flex; gap: 8px; }
.dm-socials a { width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); transition: all .2s ease; }
.dm-socials a:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: var(--line-strong); transform: translateY(-2px); }
.dm-pay-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin-bottom: 24px; }
.dm-pay-hd { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dm-pay-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dm-pay-badge { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; min-width: 52px; height: 32px; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
.dm-bottombar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 20px; }
.dm-copy { color: var(--subtle); font-size: 13px; line-height: 1.5; }
.dm-bottombar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dm-top-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 8px 14px; background: rgba(91,140,255,0.1); border: 1px solid rgba(91,140,255,0.3); border-radius: 999px; color: #c7d4ff; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.dm-top-btn:hover { background: rgba(91,140,255,0.18); border-color: rgba(91,140,255,0.5); transform: translateY(-2px); }
@media (max-width: 640px) { .dm-bottombar { flex-direction: column; align-items: flex-start; } .dm-bottombar-right { width: 100%; justify-content: space-between; } .dm-top-btn { margin-left: auto; } }

/* ============================================================
   PRODUCT CARD v2
============================================================ */
.dm-product-card { background: var(--elevated); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; transition: transform .35s cubic-bezier(0.22, 0.8, 0.3, 1), border-color .3s ease, box-shadow .3s ease; position: relative; }
.dm-product-card:hover {
  border-color: rgba(139,92,246,0.6);
  /* CARD movement: zoom + rise toward the cursor */
  transform: translateY(-10px) scale(1.045);
  /* breathing glow halo — live site's cyberPulse, done via box-shadow so it
     survives overflow:hidden */
  animation: dm-card-pulse 2.5s ease-in-out infinite;
}
@keyframes dm-card-pulse {
  0%, 100% {
    box-shadow:
      0 12px 40px rgba(0,0,0,0.5),
      0 0 32px rgba(139,92,246,0.22),
      inset 0 0 0 1px rgba(139,92,246,0.15);
  }
  50% {
    box-shadow:
      0 12px 40px rgba(0,0,0,0.5),
      0 0 56px rgba(139,92,246,0.42),
      inset 0 0 0 1px rgba(139,92,246,0.22);
  }
}
/* 1px top glow line fading in on hover (live store style) */
.dm-product-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.55) 50%, transparent 100%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.dm-product-card:hover::before { opacity: 1; }
/* image stays static — the movement animation lives on the CARD */
.dm-product-card .thumb { position: relative; overflow: hidden; }
.dm-product-card img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block;
}
.dm-product-card:hover .title { text-shadow: 0 0 22px rgba(139,92,246,0.45); }
.dm-product-card .body { padding: 14px 16px; }
.dm-product-card .title { font-family: 'JetBrains Mono', monospace !important; font-weight: 700; font-size: 15px; color: #fff; margin: 0 0 8px; line-height: 1.3; letter-spacing: -0.01em; }
.dm-product-card .meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dm-product-card .price-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.dm-product-card .price {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 17px;
  color: #a855f7;                              /* purple, matching the live store card */
  text-shadow: 0 0 12px rgba(168,85,247,0.3);
}
.dm-product-card .strike { color: var(--subtle); text-decoration: line-through; font-size: 12px; }
.dm-product-card .stock-txt { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; flex-shrink: 0; }
.dm-product-card .stock-txt.out { color: #f87171; }
.dm-product-card .stock-txt.low { color: #fbbf24; }

/* --- Product badges on the image (live-store style, + designed animation) --- */
.dm-badges {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  z-index: 3;
}
.dm-badge {
  --bc: #FFD700;                       /* badge color, overridden inline per-badge */
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;                /* PILL — live theme forces corner-xs to 50px */
  font-family: 'Inter', sans-serif;    /* proportional sans, NOT mono */
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: none;                /* keep "Best Value", not ALL-CAPS */
  white-space: nowrap;
  color: #0a0b14;
  /* layered glow rings in the badge's own color + glossy inset highlight */
  box-shadow:
    0 0 6px color-mix(in srgb, var(--bc) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--bc) 18%, transparent),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.18);
  /* live recipe: gentle brighten pulse + color-glow pulse + floating wobble,
     plus a one-shot entrance pop */
  /* entrance pop + wobble only — the glow (filter) and pulse (box-shadow)
     loops repainted every frame; the static layered shadow covers the look */
  animation:
    dm-badge-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
    dm-badge-wobble 8s ease-in-out infinite;
}
.dm-badge i { font-size: 11px; }
/* brighten/saturate breathing */
@keyframes dm-badge-glow {
  0%   { filter: brightness(1) saturate(1); }
  100% { filter: brightness(1.15) saturate(1.25); }
}
/* glow ring pulse in the badge color */
@keyframes dm-badge-pulse {
  0%, 100% {
    box-shadow:
      0 0 6px color-mix(in srgb, var(--bc) 24%, transparent),
      0 0 14px color-mix(in srgb, var(--bc) 18%, transparent),
      0 4px 16px rgba(0,0,0,0.35),
      inset 0 2px 0 rgba(255,255,255,0.45),
      inset 0 -1px 0 rgba(0,0,0,0.18);
  }
  50% {
    box-shadow:
      0 0 9px color-mix(in srgb, var(--bc) 34%, transparent),
      0 0 20px color-mix(in srgb, var(--bc) 26%, transparent),
      0 4px 16px rgba(0,0,0,0.35),
      inset 0 2px 0 rgba(255,255,255,0.55),
      inset 0 -1px 0 rgba(0,0,0,0.18);
  }
}
/* tiny floating wobble */
@keyframes dm-badge-wobble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, -1px); }
}
/* entrance pop when the card loads */
@keyframes dm-badge-pop {
  from { transform: scale(0.6) translateY(-6px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
/* badge brightens a touch with card hover (glow/pulse keep running) */
.dm-product-card:hover .dm-badge { filter: brightness(1.12) saturate(1.2); }
.dm-price-mega { font-family: 'JetBrains Mono', monospace; font-weight: 900; color: var(--emerald); font-size: 32px; line-height: 1; letter-spacing: -0.02em; }

/* ============================================================
   STORE PAGE PRODUCT CARDS (/donutsmp-store → product-card.njk)
   Match the homepage featured card: rounded card, lift + purple
   glow pulse on hover, image zoom, gold pill badge, purple price.
============================================================ */
.product-glow-container { position: relative; display: block; height: 100%; }
.product-card { position: relative; height: 100%; }
.product-card > a {
  display: block; height: 100%;
  background: var(--elevated) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 14px !important;
  clip-path: none !important; -webkit-clip-path: none !important;  /* kill corner notch */
  overflow: hidden;
  transition: transform .35s cubic-bezier(0.22,0.8,0.3,1), border-color .3s ease, box-shadow .3s ease;
}
/* hover: lift + zoom + breathing purple halo (same as featured card) */
.product-glow-container:hover .product-card > a {
  border-color: rgba(139,92,246,0.6) !important;
  transform: translateY(-10px) scale(1.045);
  animation: dm-card-pulse 2.5s ease-in-out infinite;
}
/* top glow line on hover */
.product-card > a::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(139,92,246,0.55), transparent);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.product-glow-container:hover .product-card > a::before { opacity: 1; }
/* image already has Tailwind group-hover:scale-105; smooth it + clip */
.product-card > a > .relative { overflow: hidden; }
.product-card > a img { transition: transform .5s cubic-bezier(0.22,0.8,0.3,1) !important; }

/* title → chunky mono white (matches featured) */
.product-card > a h3 { font-family: 'JetBrains Mono', monospace !important; color: #fff !important; }
.product-glow-container:hover .product-card > a h3 { text-shadow: 0 0 22px rgba(139,92,246,0.45); }
/* price → purple like featured + live store */
.product-card > a .text-accent-500 { color: #a855f7 !important; text-shadow: 0 0 12px rgba(168,85,247,0.3); }

/* Restore Tailwind positioning utilities that got purged from built.css
   (used in templates but tree-shaken out). .left-2 = the active-filter
   underline glow; .right-1 handled by the .badges rule below. */
.left-2 { left: 0.5rem; }

/* --- Badge container: `.right-1` is purged from built.css, so the ABSOLUTE
   image badge loses its right anchor and drifts to the top-left, overflowing
   the card. Re-anchor it to the top-right corner. Scoped to .absolute so it
   does NOT shift the inline upsell badges (which align with the title). --- */
.badges.absolute {
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  justify-content: flex-end;
  max-width: calc(100% - 16px);   /* never spill past the card edges */
  transform-origin: top right;    /* JS (dm-fit-badges) scales from here */
  transition: transform .2s ease;
}

/* ============================================================
   PREMIUM ANIMATED BADGE (ported from the badgewebs reference)
   Pill shell + glossy inner with the badge's OWN colour driving a
   layered glow that pulses, a shine sweep, and a subtle wavy float.
   The --badge-color-r/g/b vars + gradient are set by JS (master.njk).
============================================================ */
.badges .corner-xs,
.badges .corner-flip-x-xs {
  border-radius: 50px !important;
  clip-path: none !important; -webkit-clip-path: none !important;
  overflow: visible !important;
  position: relative; z-index: 5;   /* stay BELOW the sticky navbar (z-30) */
  pointer-events: none; isolation: isolate;
}
.badges .product-badge-inner,
.badges .corner-xs .product-badge-inner,
.badges .corner-flip-x-xs .product-badge-inner {
  border-radius: 7px !important;
  position: relative; z-index: 6;
  overflow: hidden !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important; letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  padding: 0.3rem 0.8rem !important;
  display: inline-flex !important; align-items: center; gap: 6px;
  color: rgba(0,0,0,0.9) !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.35), 0 0 4px rgba(255,255,255,0.2) !important;
  background-size: 300% 300% !important;
  box-shadow:
    0 0 6px rgba(0,0,0,0.2),
    0 4px 20px rgba(0,0,0,0.3),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, box-shadow, filter;
}
/* Colored badges (data-color / JS-set rgb vars): premium animation set */
.badges .corner-xs[data-color] .product-badge-inner,
.badges .corner-flip-x-xs[data-color] .product-badge-inner,
.badges .product-badge-inner[style*="--badge-color-r"],
.badges .product-badge-inner[data-badge-color] {
  /* shine + wobble only: the glow (filter) and pulse (box-shadow) loops
     forced a repaint every frame on every badge — main-thread tax for a
     barely-visible effect. Static glow shadow stays on the base style. */
  animation: customPremiumShine 4s ease-in-out infinite,
             wavyMovement 8s ease-in-out infinite !important;
}
@keyframes customPremiumShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes customPremiumGlow { 0% { filter: brightness(1) saturate(1); } 100% { filter: brightness(1.18) saturate(1.3); } }
@keyframes customPremiumPulse {
  0%,100% { box-shadow: 0 0 6px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.24), 0 0 12px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.18), 0 0 18px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.12), 0 4px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.2); }
  50%     { box-shadow: 0 0 9px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.3),  0 0 16px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.24), 0 0 24px rgba(var(--badge-color-r,255),var(--badge-color-g,215),var(--badge-color-b,0),0.18), 0 4px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.2); }
}
@keyframes wavyMovement { 0%,100% { transform: translate(0,0); } 25% { transform: translate(1px,-1px); } 50% { transform: translate(-1px,1px); } 75% { transform: translate(1px,-1px); } }
@media (prefers-reduced-motion: reduce) {
  .badges .product-badge-inner { animation: none !important; }
}

/* ============================================================
   NAVBAR POLISH — overrides for existing SellAuth navbar
============================================================ */
nav.component[data-component-id="navbar"] .bg-b-tertiary {
  background: rgba(10,11,20,0.85) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(91,140,255,0.12) !important;
}
nav.component[data-component-id="navbar"] .navbar-title {
  background: linear-gradient(135deg, #fff 0%, #c7d4ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

/* Reserve the navbar row at its full (font-loading) height so a webfont swap
   can't shrink it on load — that shrink pulled the whole page up ~5px ("bounce"
   on reload). min-height keeps it responsive-safe (can still grow if needed). */
nav.component[data-component-id="navbar"] .flex.justify-between.items-center { min-height: 51px; }
nav.component[data-component-id="navbar"] a.text-accent-500 {
  position: relative;
}
nav.component[data-component-id="navbar"] a.text-accent-500::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  border-radius: 1px;
}

/* ============================================================
   FORMS
============================================================ */
input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input::placeholder { color: var(--subtle); }
:focus-visible { outline: 2px solid var(--accent-to); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   SELLAUTH PRESERVED — corner, bg-b-* compatibility
   These keep SellAuth's existing components rendering after we
   wiped custom.css.
============================================================ */
.corner { border-radius: 12px; }
.bg-b-secondary { background: var(--surface); }
.bg-b-primary { background: var(--bg); }
.bg-b-tertiary { background: var(--elevated); }
.bg-border { background: var(--line-strong); }
.text-t-primary { color: #fff; }
/* text-t-accent in this theme is ONLY ever text sitting ON a coloured button
   (Add to cart, Login, Proceed to Payment, etc.) — so it must be white, not the
   accent blue (blue-on-blue was unreadable). Badges set their own text colour
   via more-specific .badges rules, so they're unaffected. */
.text-t-accent { color: #fff; }
.border-b-border { border-color: var(--line); }
.text-accent-500 { color: var(--accent); }
.text-accent-400 { color: #93b5ff; }
.text-accent-300 { color: #c7d4ff; }
.bg-accent-500 { background: var(--accent); }

/* Glitch button (preserved animation from old custom.css) */
.glitch-btn {
  position: relative;
  overflow: hidden;
  border-color: rgba(91,140,255,0.4);
}
.glitch-btn .content {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  transition: transform 0.2s ease;
}
.glitch-btn:hover .content { transform: scale(1.02); }

/* Secondary CTA — ghost variant (Add to Cart recedes under the primary Buy Now) */
.glitch-btn--ghost { background: rgba(255,255,255,0.035) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; }
.glitch-btn--ghost .content { background: transparent !important; color: rgba(255,255,255,0.85) !important; }
.glitch-btn--ghost:hover { background: rgba(255,255,255,0.07) !important; animation: none !important; filter: none !important; box-shadow: none !important; }
.glitch-btn--ghost:hover .content { transform: none !important; color: #fff !important; }

/* ============================================================
   AOS — CONTENT MUST ALWAYS BE VISIBLE
   The AOS CDN sets [data-aos]{opacity:0} until scrolled into view.
   That makes below-the-fold content invisible on screenshots, slow
   devices, and if AOS ever fails to init. Content visibility is NOT
   negotiable — force every data-aos element fully visible. We keep the
   page's life via the aurora/voxels/hover effects instead.
============================================================ */
html [data-aos],
html [data-aos].aos-animate,
html [data-aos]:not(.aos-animate) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ============================================================
   OLD-CSS OVERRIDES (force-win in case custom.css hasn't been synced yet)
   These use !important to beat any old .hero-container, .donut-title,
   .feature-card or .hero-feature-highlight rules still on the page.
============================================================ */
.hero-container {
  min-height: 0 !important;
  padding: 0 !important;
  background: none !important;
}
.hero-content-wrapper { padding: 0 !important; }

h1.donut-title,
.donut-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 7vw, 80px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.03em !important;
  color: #fff !important;
  text-transform: none !important;
  text-align: inherit !important;
  margin: 0 0 28px !important;
  background: none !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  /* Kill any pseudo-element glitch effects from old custom.css */
}
.donut-title::before, .donut-title::after,
.donut-title span.glitch, .donut-title span.glitch::before, .donut-title span.glitch::after {
  display: none !important;
  content: none !important;
}
.donut-title .gradient-text {
  background: linear-gradient(135deg, var(--accent-from) 0%, var(--accent-to) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Kill old hero feature-cards / feature-highlight (we have features.njk replacement) */
.hero-feature-highlight, .feature-cards, .feature-highlight {
  display: none !important;
}

/* Kill old feedback-glassmorphism + glassmorphism-card backdrop-blur fallback */
.glassmorphism-card, .feedback-glassmorphism {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Kill old modern-footer in case any of its scaffolding lingers */
.modern-footer { display: none !important; }

/* Old theme's vertical line columns — v2 background replaces them */
.lines { display: none !important; }

/* ============================================================
   ANNOUNCEMENT BAR — dark + subtle instead of solid bright accent
============================================================ */
.announcement .bg-accent-500 {
  background: linear-gradient(90deg, rgba(91,140,255,0.14), rgba(139,92,246,0.12), rgba(91,140,255,0.14)) !important;
  border-bottom: 1px solid rgba(91,140,255,0.25);
  color: #dbe4ff !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.announcement .bg-accent-500 a,
.announcement .bg-accent-500 p { color: #dbe4ff !important; }

/* ============================================================
   NAVBAR v2 — glass transparency + blur (was solid bg-b-tertiary)
============================================================ */
nav[data-component-id="navbar"] .bg-b-tertiary {
  background: rgba(10, 11, 20, 0.6) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Rounded buttons — kill the old notched clip-path square shape on
   glitch buttons (LOGIN, cart, etc.) and round them to match the cards */
.glitch-btn,
.glitch-btn .content,
.glitch-btn .anim {
  clip-path: none !important;
  border-radius: 12px !important;
}
.glitch-btn .content { border-radius: 10px !important; } /* inner sits inside the 12px shell */

/* The legacy hover glitch layer animates clip-path SLICES — with clip-path
   forced off (rounded buttons) it degenerates into a solid flashing block.
   Retire it; the glint sweep below replaces it. */
.glitch-btn .anim { display: none !important; animation: none !important; }

/* ============================================================
   GLITCH HOVER — RGB-split glitch like the live site, but in
   THEME colors (accent blue + violet). Works on rounded buttons:
   drop-shadow copies + micro-jitter bursts every 2s, no clip-path.
============================================================ */
.glitch-btn .content::after { content: none !important; } /* kill legacy content:after anim */

/* Hover = lift + glow + shine sweep (ref: badgewebs) — no RGB-glitch jitter */
.glitch-btn {
  position: relative;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), filter .22s ease, box-shadow .25s ease !important;
}
.glitch-btn::before {
  content: ''; position: absolute; top: 0; left: -130%;
  width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.32), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  z-index: 1; pointer-events: none;
}
.glitch-btn:hover::before { left: 130%; }
.glitch-btn:hover .content { animation: none !important; transform: none !important; filter: none !important; }
.glitch-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.05);
  animation: dm-btn-glow 1.8s ease-in-out infinite;
}
.dm-btn { transition: transform .22s cubic-bezier(.22,1,.36,1); }
.dm-btn:hover { transform: translateY(-2px) scale(1.02); animation: dm-btn-glow 1.8s ease-in-out infinite; }
/* Navbar buttons: keep a calm lift + the shine, but no glow-pulse */
nav[data-component-id="navbar"] .glitch-btn:hover { transform: translateY(-2px) !important; animation: none !important; }
@keyframes dm-btn-glow {
  0%, 100% { box-shadow: 0 0 14px rgba(124,92,255,0.45), 0 0 30px rgba(91,140,255,0.26); }
  50%      { box-shadow: 0 0 24px rgba(124,92,255,0.75), 0 0 52px rgba(91,140,255,0.48); }
}

/* ============================================================
   NAVBAR DESIGN UPGRADE — aurora hairline, scroll elevation,
   logo micro-interaction, glass mobile menu.
============================================================ */
/* gradient hairline along the bar's bottom edge */
header.sticky.top-0::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 2%, rgba(91,140,255,0.55) 30%, rgba(139,92,246,0.55) 70%, transparent 98%);
  opacity: 0.45;
  transition: opacity .35s ease;
  pointer-events: none;
}
header.sticky.top-0.is-scrolled::after { opacity: 1; }
/* scrolled: darker glass + lift shadow */
header.is-scrolled nav[data-component-id="navbar"] .bg-b-tertiary {
  background: rgba(8, 9, 16, 0.88) !important;
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.75);
}
/* logo: playful spring on hover */
nav[data-component-id="navbar"] .navbar-logo-link img {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
nav[data-component-id="navbar"] .navbar-logo-link:hover img {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 26px -4px rgba(91, 140, 255, 0.8);
}

/* --- Mobile menu: glass panel with tappable rows --- */
nav[data-component-id="navbar"] [x-ref="mobileMenu"] {
  background: rgba(10, 11, 20, 0.94) !important;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(91, 140, 255, 0.25);
  border-radius: 18px;
  margin-top: 8px;
  padding: 14px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px -12px rgba(91,140,255,0.35);
}
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul { gap: 8px !important; }
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > a,
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > button {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px; letter-spacing: 0.06em;
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.78) !important;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > a::after,
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > button::after {
  content: '→';
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, 0.3);
  transition: transform .2s ease, color .2s ease;
}
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > a:active,
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > button:active { transform: scale(0.985); }
/* active page row */
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > a.text-accent-500 {
  background: linear-gradient(135deg, rgba(91,140,255,0.28), rgba(124,92,255,0.14));
  border-color: rgba(91, 140, 255, 0.5);
  color: #fff !important;
  box-shadow: 0 0 18px -6px rgba(91, 140, 255, 0.6), inset 0 0 12px rgba(91, 140, 255, 0.08);
}
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li > a.text-accent-500::after { color: #8cb0ff; }
/* login / my-account row = gradient CTA */
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li:last-child > a,
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li:last-child > button {
  justify-content: center;
  background: linear-gradient(135deg, #7c5cff, #5b8cff);
  border-color: transparent;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 8px 22px -8px rgba(124, 92, 255, 0.7);
}
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li:last-child > a::after,
nav[data-component-id="navbar"] [x-ref="mobileMenu"] ul li:last-child > button::after { content: none; }

/* ============================================================
   CURRENCY SELECTOR — align Choices.js with the glass theme.
   (Panel BACKGROUND stays solid via the force-opaque block in
   master.njk; everything else is themed here.)
============================================================ */
/* closed pill button */
/* Pre-init: the raw <select> is a direct child of .currency-selector until
   Choices.js wraps it. Style it to match the final Choices button so it doesn't
   flash as a deformed native control (choices.css loads async). After init,
   Choices moves the <select> inside .choices, so this no longer applies. */
.currency-selector { min-width: 0; position: relative; }
/* built.css gives the container a bg + 2px padding but no radius → square corners
   poke out behind the rounded button. Round the container to match. */
.currency-selector.lg, .currency-selector.xs { border-radius: 14px !important; }
.currency-selector > select {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  min-height: 40px;
  padding: 5px 12px;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: transparent !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  cursor: pointer;
}
/* "$" placeholder so the pre-init box isn't blank, positioned like the final symbol.
   Hidden once Choices builds its widget (.choices wrapper appears). */
.currency-selector:not(:has(.choices)) > select { color: transparent !important; }
.currency-selector:not(:has(.choices))::before {
  content: "$ USD";
  position: absolute; left: 12px; top: 0; bottom: 0;
  display: flex; align-items: center;
  color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
  pointer-events: none; z-index: 1;
}

.currency-selector .choices { margin-bottom: 0; }
.currency-selector .choices__inner {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  padding: 5px 10px !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.currency-selector .choices:hover .choices__inner {
  border-color: rgba(91, 140, 255, 0.40) !important;
  background: rgba(91, 140, 255, 0.08) !important;
  box-shadow: 0 0 14px -6px rgba(91, 140, 255, 0.55);
}
.currency-selector .choices.is-open .choices__inner {
  border-color: rgba(91, 140, 255, 0.55) !important;
  box-shadow: 0 0 16px -6px rgba(91, 140, 255, 0.6);
}
.currency-selector .choices__list--single { padding: 2px 6px 2px 2px; }
.currency-selector .choices__list--single .choices__item { color: #fff; font-weight: 600; }
/* dropdown panel frame (bg handled by force-opaque block) */
.currency-selector .choices__list--dropdown {
  border: 1px solid rgba(91, 140, 255, 0.30) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), 0 0 32px -12px rgba(91, 140, 255, 0.45) !important;
  overflow: hidden !important;
  margin-top: 8px;
  z-index: 60 !important;
}
/* search box */
.currency-selector .choices__input--cloned {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 9px !important;
  color: #fff !important;
  font-size: 13px !important;
  margin: 10px !important;
  width: calc(100% - 20px) !important;
  padding: 9px 12px !important;
}
.currency-selector .choices__input--cloned::placeholder { color: rgba(255, 255, 255, 0.35); }
/* option rows */
.currency-selector .choices__list--dropdown .choices__list { max-height: 290px; }
.currency-selector .choices__list--dropdown .choices__item {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  border-radius: 9px;
  margin: 2px 8px;
  transition: background .15s ease, color .15s ease;
}
.currency-selector .choices__list--dropdown .choices__item.is-highlighted {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.26), rgba(124, 92, 255, 0.12)) !important;
  color: #fff !important;
}
.currency-selector .choices__list--dropdown .choices__item.is-selected {
  color: #fff !important;
  background: rgba(91, 140, 255, 0.10) !important;
}
/* currency symbol chip (both in the pill and the rows) */
.currency-selector .symbol {
  background: rgba(91, 140, 255, 0.14) !important;
  border: 1px solid rgba(91, 140, 255, 0.22);
  border-radius: 6px;
  color: #cfe0ff !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
/* Selected button (single display): Choices forces min-width:80px on the inner,
   stranding the $ far left with a big gap to the arrow. Drop the min-width and
   compact the button so it shows a clean, centered "$  ▾". The boxed .symbol
   style above is for the dropdown rows only. */
.currency-selector.lg .choices .choices__inner,
.currency-selector.xs .choices .choices__inner {
  min-width: 88px !important; width: auto !important;
  display: inline-flex !important; align-items: center !important;
  padding: 5px 28px 5px 12px !important;   /* right padding clears the arrow */
}
/* Desktop (lg) + mobile (xs): one clean compact button — translucent bg, thin
   border, rounded, 40px. The cleaner mobile look, now on both. */
.currency-selector.lg .choices .choices__inner,
.currency-selector.xs .choices .choices__inner {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  height: 40px !important; min-height: 40px !important;
  padding: 0 26px 0 12px !important;
}
/* Strip the desktop outer container "pill" (bg + padding from built.css) so it's
   a single clean button like mobile, not a button-inside-a-box. */
.currency-selector.lg { background: transparent !important; padding: 0 !important; }
.currency-selector .choices__list--single {
  width: auto !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 42px !important;
}
.currency-selector .choices__list--single .choices__item { padding: 0 !important; }
.currency-selector .choices__list--single .symbol {
  width: auto !important; min-width: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 6px 0 0 !important;   /* gap before the code */
  color: #fff !important; font-size: 14px !important;
}
/* Show the currency code ("USD") next to the symbol → "$ USD". */
.currency-selector .choices__list--single .code {
  display: inline !important;
  color: #fff !important; font-weight: 600 !important;
  font-size: 13px !important; letter-spacing: 0.02em;
}
.currency-selector .choices__list--single .default,
.currency-selector .choices__list--single .text-xs { display: none !important; }

.currency-selector .code { font-weight: 600; letter-spacing: 0.03em; }
.currency-selector .default { color: #8cb0ff !important; }
/* slim themed scrollbar */
.currency-selector .choices__list--dropdown .choices__list::-webkit-scrollbar { width: 8px; }
.currency-selector .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb { background: rgba(91, 140, 255, 0.35); border-radius: 8px; }
.currency-selector .choices__list--dropdown .choices__list::-webkit-scrollbar-thumb:hover { background: rgba(91, 140, 255, 0.55); }

/* --- Logo in a glowing rounded frame (like live site) --- */
nav[data-component-id="navbar"] .navbar-logo-link img {
  width: 44px !important;
  height: 44px !important;
  max-height: none !important;
  padding: 4px;
  background: rgba(91, 140, 255, 0.10);
  border: 1px solid rgba(91, 140, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 0 18px -4px rgba(91, 140, 255, 0.55);
  object-fit: contain;
}

/* --- Nav links as pill chips (live-site style) --- */
.dm-nav-link {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03);
  padding: 9px 18px !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  transition: all 0.25s cubic-bezier(.22,1,.36,1) !important;
}
/* animated gradient underline — sweeps in from the center on hover */
.dm-nav-link::before {
  content: '';
  position: absolute; bottom: 5px; left: 50%;
  width: 55%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #5b8cff, #8b5cf6, transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.dm-nav-link:not(.is-active):hover::before { transform: translateX(-50%) scaleX(1); }
.dm-nav-link:not(.is-active):hover {
  opacity: 1 !important;
  color: #fff !important;
  border-color: rgba(91, 140, 255, 0.40) !important;
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.13), rgba(91, 140, 255, 0.04));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(91, 140, 255, 0.55);
  text-shadow: 0 0 14px rgba(91, 140, 255, 0.55);
}
.dm-nav-link.is-active {
  color: #fff !important;
  opacity: 1 !important;
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.30), rgba(91, 140, 255, 0.12));
  border-color: rgba(91, 140, 255, 0.55) !important;
  box-shadow: 0 0 16px -4px rgba(91, 140, 255, 0.55), inset 0 0 12px rgba(91, 140, 255, 0.10);
}

/* --- LOGIN button: purple→blue gradient like live --- */
nav[data-component-id="navbar"] .glitch-btn.bg-accent-500\/60,
nav[data-component-id="navbar"] .glitch-btn[class*="bg-accent"] {
  border-color: rgba(124, 92, 255, 0.6) !important;
  background: transparent !important;
}
nav[data-component-id="navbar"] .glitch-btn[class*="bg-accent"] .content {
  background: linear-gradient(135deg, #7c5cff, #5b8cff) !important;
  color: #fff !important;
}
nav[data-component-id="navbar"] .glitch-btn[class*="bg-accent"]:hover .content {
  box-shadow: 0 6px 20px -6px rgba(124, 92, 255, 0.7);
}

/* --- Cart button: dark outlined square like live --- */
nav[data-component-id="navbar"] a[aria-label="Shopping cart"].glitch-btn {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: transparent !important;
}
nav[data-component-id="navbar"] a[aria-label="Shopping cart"].glitch-btn .content {
  background: rgba(16, 18, 32, 0.9) !important;
  color: #fff !important;
}

/* --- Login / My Account buttons: purple→blue gradient like live --- */
nav[data-component-id="navbar"] button.glitch-btn,
nav[data-component-id="navbar"] a[href*="customer/dashboard"].glitch-btn {
  border-color: rgba(124, 92, 255, 0.6) !important;
  background: transparent !important;
}
nav[data-component-id="navbar"] button.glitch-btn .content,
nav[data-component-id="navbar"] a[href*="customer/dashboard"].glitch-btn .content {
  background: linear-gradient(135deg, #7c5cff, #5b8cff) !important;
  color: #fff !important;
}
nav[data-component-id="navbar"] button.glitch-btn:hover .content {
  box-shadow: 0 6px 20px -6px rgba(124, 92, 255, 0.7);
}

/* ============================================================
   NAVBAR BUTTON HOVER — kill the RGB glitch jitter on LOGIN
   and the cart button; replace with a smooth lift + glow.
============================================================ */
nav[data-component-id="navbar"] .glitch-btn .content {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
nav[data-component-id="navbar"] .glitch-btn:hover .content {
  animation: none !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}
/* LOGIN / My Account — brighten the gradient + soft glow */
nav[data-component-id="navbar"] button.glitch-btn:hover .content,
nav[data-component-id="navbar"] a[href*="customer/dashboard"].glitch-btn:hover .content,
nav[data-component-id="navbar"] .glitch-btn[class*="bg-accent"]:hover .content {
  background: linear-gradient(135deg, #8b6bff, #6b97ff) !important;
  box-shadow: 0 8px 22px -6px rgba(124, 92, 255, 0.75) !important;
}
/* Mobile cart icon: 20×20 is too small a tap target — pad to ~40px
   without shifting the header layout (padding offset by negative margin) */
nav[data-component-id="navbar"] a[aria-label="Shopping cart"]:not(.glitch-btn) {
  padding: 10px;
  margin: -10px;
}

/* Cart — subtle accent fill + glow */
nav[data-component-id="navbar"] a[aria-label="Shopping cart"].glitch-btn:hover .content {
  background: rgba(91, 140, 255, 0.14) !important;
  border-color: rgba(91, 140, 255, 0.45) !important;
  box-shadow: 0 6px 18px -6px rgba(91, 140, 255, 0.5) !important;
}

/* ============================================================
   FOOTER ICON CHIPS — colored heading icons + product icons
   (matches the live footer's "emoji" look, done with FA icons)
============================================================ */
.dm-footer-hd { display: flex; align-items: center; gap: 9px; }
.dm-hd-ic {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 8px; font-size: 12px;
}
.dm-fp-list a { display: flex !important; align-items: center; gap: 9px; }
.dm-fp-ic {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 8px; font-size: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.dm-fp-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 999px; text-transform: uppercase;
  margin-left: 2px; flex-shrink: 0;
}
/* ============================================================
   PRODUCTS PAGE SEARCH BAR — input was unstyled (icon overlapped
   placeholder; .search-input-main CSS never ported from old theme)
============================================================ */
.search-input-main {
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  height: 100%;
  padding: 0 12px 0 34px !important; /* clears the 18px search icon */
  color: #fff !important;
  font-family: 'Inter', sans-serif;
}
.search-input-main::placeholder { color: rgba(255, 255, 255, 0.45); }
.search-input-main:focus { outline: none !important; }
.filter-btn-attached { cursor: pointer; border-radius: 0 12px 12px 0; }

/* chevron arrows on plain link columns (Support / Company) */
.dm-chev a { display: inline-flex !important; align-items: center; gap: 7px; }
.dm-chev a::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 8px;
  color: rgba(91, 140, 255, 0.65);
}

/* ============================================================
   REVIEW CARD v2 — attractive feedback cards (yellow stars, quote, verified)
============================================================ */
.feedback-card-enhanced { height: 100%; }
.dm-review-card {
  height: 100%;            /* fill the slide so every card in the row is equal height */
  display: flex;
  flex-direction: column;
  /* TRUE frosted glass — translucent enough that the blurred page
     (dots/voxels/aurora) shows through, while the dark tint keeps text readable */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(13,15,28,0.48);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 20px 20px 16px;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* layered depth shadow + top inset highlight = lifted glass look */
  box-shadow:
    0 8px 32px rgba(0,0,0,0.30),
    0 4px 16px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transition: border-color .3s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
  /* 3D context so the JS cursor-tilt has depth */
  transform-style: preserve-3d;
  will-change: transform;
}
/* gradient border ring (gold → violet → blue) — the premium frame */
.dm-review-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(251,191,36,0.55), rgba(139,92,246,0.40) 50%, rgba(91,140,255,0.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.45;
  transition: opacity .3s ease;
  pointer-events: none;
}
/* subtle gold top accent line on top of the ring */
.dm-review-card::before {
  content: '';
  position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,0.7), transparent);
  z-index: 1;
}
.feedback-card-enhanced:hover .dm-review-card {
  border-color: rgba(251,191,36,0.30);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.40),
    0 8px 24px rgba(139,92,246,0.18),
    inset 0 1px 0 rgba(255,255,255,0.16);
}
.feedback-card-enhanced:hover .dm-review-card::after { opacity: 1; }
.dm-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dm-review-stars { display: inline-flex; gap: 2px; }
.dm-star { width: 18px; height: 18px; filter: drop-shadow(0 0 5px rgba(251,191,36,0.4)); }
.dm-review-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: #34d399;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase;
}
.dm-review-body { position: relative; margin-bottom: 14px; }
.dm-review-quote {
  position: absolute; top: -8px; left: -2px;
  font-family: Georgia, serif; font-size: 44px; line-height: 1;
  color: rgba(251,191,36,0.25);
  pointer-events: none;
}
.dm-review-msg {
  position: relative;
  color: rgba(255,255,255,0.88);
  font-size: 14.5px; line-height: 1.55;
  padding-left: 18px;
  margin: 0;
}
.dm-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dm-review-reply p.dm-clamp { -webkit-line-clamp: 2; }  /* keep the reply card from towering over the others */

/* --- /feedback PAGE (masonry, not carousel): cards size to content ---
   The carousel wants equal-height cards (height:100% above). On the page that
   stretches short reviews into tall hollow cards (footer pinned by margin-top:auto),
   so size to content here. Reply is hidden until expanded via Alpine x-show, so a
   card with a reply is no taller than a normal one until clicked. */
.dm-reviews-page .feedback-card-enhanced,
.dm-reviews-page .dm-review-card { height: auto; }
/* ~30% shorter cards: tighter padding/margins + 2-line message */
.dm-reviews-page .dm-review-card { padding: 14px 18px 12px; }
.dm-reviews-page .dm-review-top { margin-bottom: 8px; }
.dm-reviews-page .dm-review-body { margin-bottom: 8px; }
.dm-reviews-page .dm-review-foot { padding-top: 10px; }
.dm-reviews-page .dm-review-msg { -webkit-line-clamp: 2; min-height: 3.1em; }  /* reserve 2 lines so short reviews match clamped ones — keeps cards to 2 sizes */
.dm-review-more {
  margin: 10px 0 0 18px; font-size: 12.5px; font-weight: 600;
  color: #8aa6ff; user-select: none; transition: color .2s ease;
}
.dm-reviews-page .feedback-card-enhanced:hover .dm-review-more { color: #a7bcff; }

/* --- Carousel preview: keep every card compact + uniform ---
   Reserve a consistent 3-line message area and hide the shop reply
   (replies still show on the /feedback page, which isn't a carousel).
   This stops one tall/reply card from forcing a hollow gap in the rest. */
.carousel-slide .dm-review-msg { min-height: 3.1em; }            /* reserve ~2 lines so cards stay short + uniform */
.carousel-slide .dm-review-msg.dm-clamp { -webkit-line-clamp: 2; } /* clamp to 2 lines in the carousel teaser */
.carousel-slide .dm-review-reply { display: none; }
.dm-review-reply {
  background: rgba(0,0,0,0.24);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px;
}
.dm-review-reply p {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.82);
  padding-left: 12px; border-left: 3px solid var(--accent);
}
.dm-review-reply-by {
  display: block; text-align: right; font-size: 11px;
  color: var(--subtle); margin-top: 10px; font-weight: 500;
}
.dm-review-reply-by .dm-rep-name { color: #fbbf24; font-weight: 700; }
.dm-review-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;   /* pin product + date to the bottom so equal-height cards read as full, not hollow */
}
.dm-review-prod { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-review-thumb { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-strong); }
.dm-review-thumb-ph { display: grid; place-items: center; background: rgba(255,255,255,0.05); font-size: 15px; }
.dm-review-prod-name { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-review-date { font-size: 11px; color: var(--subtle); flex-shrink: 0; }

/* ============================================================
   FAQ COMPREHENSIVE STYLING (force visual to match preview)
   The faq.njk uses inline styles + dm-faq-item-wrap class.
   These rules harden the visual against any old conflicting CSS.
============================================================ */
.dm-faq-item-wrap {
  position: relative !important;
  background: linear-gradient(180deg, rgba(15,17,32,0.95), rgba(15,17,32,0.8)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.dm-faq-item-wrap[open] {
  border-color: rgba(91,140,255,0.5) !important;
  box-shadow: 0 8px 24px -8px rgba(91,140,255,0.25) !important;
}
.dm-faq-item-wrap > button {
  cursor: pointer;
  user-select: none;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100%;
}
.dm-faq-item-wrap > button:focus { outline: none !important; }
.dm-faq-item-wrap > button:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: -2px; }
.dm-faq-item-wrap > button > span:first-child {
  /* Q01-Q10 number chip */
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace !important;
}
.dm-faq-item-wrap > button > h3 {
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ============================================================
   MOBILE STORE GRID — 2 cards per row on phones.
   One-per-row made /donutsmp-store ~10,000px tall; 2-up halves
   the scroll and matches mobile shop conventions. Card text is
   compacted and badges scaled so they fit the narrow cards.
============================================================ */
@media (max-width: 639px) {
  [data-component-id^="products"] [data-name] {
    width: calc((100% - 0.5rem) / 2) !important;
    padding: 2px !important;
  }
  .product-card > a h3 { font-size: 13.5px !important; margin-bottom: 4px !important; }
  .product-card > a .text-lg { font-size: 13.5px !important; }
  .product-card > a .text-base { font-size: 11px !important; }
  .product-card > a > div.text-left { padding: 10px 12px !important; }
  /* long badge auto-fit is handled by JS (dm-fit-badges); just the origin here */
  .badges.absolute { transform-origin: top right; }

  /* category chips are redundant on phones — the search bar's funnel
     dropdown holds the same filters. Hiding them saves ~130px of
     scroll before the first product. */
  .cyber-filter-container { display: none !important; }
}

/* ============================================================
   MOBILE SECTION HEADINGS + FAQ POLISH
   At 390px the 30px mono headings with the boxed [glitch] word
   render as a giant full-width banner (worst on "Frequently
   ASKED QUESTIONS"), and FAQ question rows feel dense.
============================================================ */
@media (max-width: 640px) {
  /* section h2s: calmer scale, boxed word fits inline */
  #main-content .component h2 { font-size: 23px !important; line-height: 1.35 !important; letter-spacing: 0.01em; }
  .glitch:not(.glitch-btn) { padding: 1px 9px; border-width: 1.5px; border-radius: 8px; margin: 0 1px; }

  /* FAQ rows: lighter, easier to scan */
  .dm-faq-item-wrap > button { padding: 14px 16px !important; gap: 10px !important; }
  .dm-faq-item-wrap > button > h3 { font-size: 14.5px !important; line-height: 1.5 !important; }
  .dm-faq-item-wrap > button > span:last-child { width: 26px !important; height: 26px !important; font-size: 0 !important; }
  .dm-faq-item-wrap [id^="faq-answer"] { font-size: 14px; }
}

/* ============================================================
   FAQ TOGGLE — animated +/× : springy 225° spin, gradient fill
   + glow when open, pop on hover.
============================================================ */
.dm-faq-toggle {
  position: relative;
  width: 32px; height: 32px;
  flex-shrink: 0;
  color: #5b8cff;
  font-size: 0;            /* hide the text glyph — bars below draw the +  */
  background: rgba(91,140,255,0.08);
  border: 1px solid rgba(91,140,255,0.28);
  border-radius: 50%;
  transition:
    transform .5s cubic-bezier(.34,1.56,.64,1),  /* springy overshoot */
    background .25s ease, color .25s ease,
    border-color .25s ease, box-shadow .25s ease;
}
/* geometric, perfectly-centered + (rotates into × with the span) */
.dm-faq-toggle::before,
.dm-faq-toggle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 2px;
}
.dm-faq-toggle::before { width: 44%; height: 2px; }
.dm-faq-toggle::after  { width: 2px;  height: 44%; }
.dm-faq-item-wrap > button:hover .dm-faq-toggle {
  transform: scale(1.14);
  border-color: rgba(91,140,255,0.55);
  box-shadow: 0 0 14px rgba(91,140,255,0.35);
}
.dm-faq-item-wrap.is-open .dm-faq-toggle {
  transform: rotate(225deg);                      /* full spin, lands as × */
  background: linear-gradient(135deg, #7c5cff, #5b8cff);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 18px rgba(124,92,255,0.5);
}
.dm-faq-item-wrap.is-open > button:hover .dm-faq-toggle {
  transform: rotate(225deg) scale(1.14);
}
@media (prefers-reduced-motion: reduce) {
  .dm-faq-toggle { transition: background .2s ease, color .2s ease; }
  .dm-faq-item-wrap.is-open .dm-faq-toggle { transform: rotate(45deg); }
}

/* Hide old SellAuth FAQ glassmorphism if its scaffolding is still in DOM */
.glassmorphism-card[x-data] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ============================================================
   HERO ENHANCEMENT — preview-style flourishes
============================================================ */
/* Floating voxel accents inside hero (decorative) */
.hero-voxel-acc {
  position: absolute;
  width: 24px; height: 24px;
  pointer-events: none;
  box-shadow:
    inset -3px -3px 0 rgba(0,0,0,0.25),
    inset 3px 3px 0 rgba(255,255,255,0.18),
    0 8px 24px rgba(0,0,0,0.3);
  border-radius: 4px;
  animation: hero-vox-float 12s ease-in-out infinite alternate;
}
.hero-voxel-acc.v1 { top: 18%; right: 12%; background: linear-gradient(135deg, rgba(91,140,255,0.7), rgba(91,140,255,0.4)); }
.hero-voxel-acc.v2 { top: 64%; right: 22%; width: 18px; height: 18px; background: linear-gradient(135deg, rgba(251,191,36,0.7), rgba(245,158,11,0.5)); animation-delay: -3s; }
.hero-voxel-acc.v3 { bottom: 18%; left: 10%; width: 16px; height: 16px; background: linear-gradient(135deg, rgba(16,185,129,0.7), rgba(52,211,153,0.5)); animation-delay: -6s; }
.hero-voxel-acc.v4 { top: 30%; left: 12%; width: 14px; height: 14px; background: linear-gradient(135deg, rgba(236,72,153,0.6), rgba(168,85,247,0.4)); animation-delay: -9s; }
@keyframes hero-vox-float {
  0%   { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-22px) rotate(12deg); }
}
@media (max-width: 768px) { .hero-voxel-acc { display: none; } }

/* ============ HERO 2-COLUMN GRID + PRODUCT SHOWCASE (preview parity) ============ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 64px; }
}
.hero-copy { max-width: 640px; }

/* ============================================================
   MOBILE HERO FIRST IMPRESSION — get the Shop Now CTA above the
   fold: smaller type, tighter rhythm, and the CTA moves BEFORE
   the info box (which drops below with the stats).
============================================================ */
@media (max-width: 640px) {
  #hero-section { min-height: auto !important; }
  #hero-section > .container { padding-top: 32px !important; }
  .hero-copy { display: flex; flex-direction: column; }
  /* equal order keeps DOM flow (chip → h1 → lead → CTA); these two drop below the CTA */
  .hero-copy .gradient-border { order: 5; margin: 20px 0 0 !important; }
  .hero-copy .grid { order: 6; margin-top: 18px; }
  .hero-copy > div[data-aos]:first-child { margin-bottom: 12px !important; }  /* status chip */
  .donut-title { font-size: clamp(28px, 8.6vw, 36px) !important; margin-bottom: 12px !important; }
  .hero-copy p.muted { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 16px !important; max-width: none !important; }
  .hero-cta { margin-bottom: 22px !important; flex-wrap: nowrap !important; gap: 10px !important; }
  /* split the row evenly so both buttons reach the text edges (no lopsided right gap, no uneven wrap on narrow phones) */
  .hero-cta .btn-primary, .hero-cta .btn-secondary { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; padding: 13px 14px !important; font-size: 14.5px !important; }
}

/* Right-side product showcase — angled 3D card stack */
.hero-showcase {
  display: none;
  position: relative;
  height: 560px;
}
@media (min-width: 1024px) { .hero-showcase { display: block; } }

.showcase-voxel {
  position: absolute;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, rgba(91,140,255,0.65), rgba(139,92,246,0.55));
  box-shadow: inset -3px -3px 0 rgba(0,0,0,0.25), inset 3px 3px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(91,140,255,0.35);
  border-radius: 4px;
  pointer-events: none;
  animation: hero-vox-float 11s ease-in-out infinite alternate;
}

.showcase-card {
  position: absolute;
  background: rgba(24,27,44,0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 24px 50px -16px rgba(0,0,0,0.6);
}
.showcase-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}
.showcase-back-1 {
  top: 0; right: 0;
  width: 280px;
  transform: rotate(6deg);
  z-index: 1;
}
.showcase-back-2 {
  bottom: 30px; left: 0;
  width: 240px;
  transform: rotate(-8deg);
  z-index: 1;
}
.showcase-back-2 img { aspect-ratio: 16/10; margin-bottom: 10px; }

.showcase-front {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 340px;
  z-index: 3;
}

/* "Recently sold" inline strip */
.hero-recent {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 48px; flex-wrap: wrap;
}
.hero-recent .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.hero-recent .live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 999px;
  font-size: 12px; font-weight: 500; color: #6ee7b7;
}

/* ============================================================
   ACCESSIBILITY
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .live-dot { animation: none; }
}


/* ============================================================
   SELLAUTH GLITCH v2 COMPAT (added 2026-10-30 with the theme upgrade)
   The new default theme restructured its markup: chamfer/corner clip-path
   layers, a new glitch-btn structure (no .content span), a mobile nav
   sheet, an Alpine currency popover (Choices.js is gone), a reveal
   engine (data-dsr) and light/dark scheme tokens. These rules keep the
   Donut Market look on that markup without touching the features.
============================================================ */

/* --- Scheme tokens: the design is tuned for dark; pin the dark palette so a
       stray light-scheme attribute never flips the page to light colours. --- */
html[data-scheme="light"], [data-scheme="light"] {
  --cl-b-primary: 10, 11, 20;
  --cl-b-secondary: 16, 18, 32;
  --cl-b-tertiary: 24, 27, 44;
  --cl-t-primary: 255, 255, 255;
  --cl-t-muted: 163, 170, 190;
  --cl-border: 34, 35, 43;
  --cl-line: 34, 35, 43;
  --cl-accent-text: rgb(var(--cl-accent));
  color-scheme: dark;
}
:root { --cl-t-muted: 163, 170, 190; }
.text-t-muted { color: rgba(255, 255, 255, 0.64); }

/* --- Chamfer + corner layers -> rounded (the Donut Market shape language) --- */
.chamfer::before, .chamfer::after,
.glitch-btn::after {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 12px;
}
.chamfer::after, .glitch-btn::after { border-radius: 11px; }
.chamfer { border-radius: 12px; }
.corner-xs, .corner-sm, .corner-flip-x-xs {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 8px;
}
.corner-b::before, .corner-b::after { clip-path: none !important; -webkit-clip-path: none !important; border-radius: 8px; }

/* --- New glitch-btn structure (text directly inside, no .content span) --- */
.glitch-btn {
  font-family: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
}
.glitch-btn-primary {
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 24px -8px rgba(91,140,255,0.55);
}
.glitch-btn-primary::after { background: transparent !important; }
.glitch-btn-secondary, .glitch-btn-outline {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.glitch-btn-secondary::after, .glitch-btn-outline::after { background: transparent !important; }
.glitch-btn-outline { border-color: rgba(91,140,255,0.45) !important; }
/* product-form ghost button: the theme's :after bg layer must not show through */
.glitch-btn--ghost::after { background: transparent !important; }

/* --- Navbar (new macros) --- */
nav[data-component-id="navbar"] .sa-navbar-logo img { max-height: none; }
nav[data-component-id="navbar"] .dm-nav-account {
  border: 1px solid rgba(124, 92, 255, 0.6) !important;
  background: linear-gradient(135deg, #7c5cff, #5b8cff) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
nav[data-component-id="navbar"] .dm-nav-account:hover {
  background: linear-gradient(135deg, #8b6bff, #6b97ff) !important;
  box-shadow: 0 8px 22px -6px rgba(124, 92, 255, 0.75) !important;
}
nav[data-component-id="navbar"] .sa-navbar-cart.glitch-btn {
  background: rgba(16, 18, 32, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-radius: 12px !important;
}
nav[data-component-id="navbar"] .sa-navbar-cart.glitch-btn:hover {
  background: rgba(91, 140, 255, 0.14) !important;
  border-color: rgba(91, 140, 255, 0.45) !important;
  box-shadow: 0 6px 18px -6px rgba(91, 140, 255, 0.5) !important;
}
/* bar tabs: the old pill chip look (dm-nav-link) - reset the theme tab padding */
nav[data-component-id="navbar"] .sa-navbar-tab.dm-nav-link { height: auto; }
nav[data-component-id="navbar"] .sa-navbar-tab.dm-nav-link.is-active { color: #fff !important; }
/* theme utility divider + ghost toggles blend with the glass bar */
nav[data-component-id="navbar"] .bg-border { background: rgba(255,255,255,0.12); }

/* Alpine currency / language popover (replaces Choices.js) */
.sa-currency-selector > button, .sa-language-selector > button {
  min-width: 72px; height: 40px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600; letter-spacing: 0.02em; text-transform: none !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.sa-currency-selector > button:hover, .sa-language-selector > button:hover,
.sa-currency-selector > button[aria-expanded="true"], .sa-language-selector > button[aria-expanded="true"] {
  border-color: rgba(91, 140, 255, 0.40) !important;
  background: rgba(91, 140, 255, 0.08) !important;
  box-shadow: 0 0 14px -6px rgba(91, 140, 255, 0.55);
}
.sa-currency-selector [role="listbox"], .sa-language-selector [role="listbox"] {
  background: #0d0f1c !important;
  border: 1px solid rgba(91, 140, 255, 0.30) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), 0 0 32px -12px rgba(91, 140, 255, 0.45) !important;
  overflow: hidden;
}
.sa-currency-selector [role="listbox"]::before, .sa-currency-selector [role="listbox"]::after,
.sa-language-selector [role="listbox"]::before, .sa-language-selector [role="listbox"]::after { display: none !important; }
.sa-currency-selector [role="option"], .sa-language-selector [role="option"] { border-radius: 9px; color: rgba(255,255,255,0.75); font-family: 'Inter', sans-serif; }
.sa-currency-selector [role="option"]:hover, .sa-language-selector [role="option"]:hover { background: linear-gradient(135deg, rgba(91, 140, 255, 0.26), rgba(124, 92, 255, 0.12)); color: #fff; }
.sa-currency-selector [role="option"] > span:first-child {
  background: rgba(91, 140, 255, 0.14) !important; border: 1px solid rgba(91, 140, 255, 0.22);
  border-radius: 6px; color: #cfe0ff !important; font-family: 'JetBrains Mono', monospace;
}

/* --- Mobile nav sheet (fixed full-height panel replaces the old dropdown card) --- */
nav[data-component-id="navbar"] .sa-nav-sheet[x-ref="mobileMenu"] {
  margin-top: 0 !important;
  border-radius: 0 !important;
  border-left: 0; border-right: 0; border-bottom: 0;
  padding: 0 !important;
}
nav[data-component-id="navbar"] .sa-nav-sheet ul li > a {
  text-transform: uppercase;
  min-height: 0;
}
/* every link row is a plain row - the gradient CTA belongs to the account button only */
nav[data-component-id="navbar"] .sa-nav-sheet ul li:last-child > a {
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: inherit;
  box-shadow: none;
}
nav[data-component-id="navbar"] .sa-nav-sheet ul li:last-child > a::after { content: '\2192'; }
nav[data-component-id="navbar"] .sa-nav-sheet ul li > a.is-active,
nav[data-component-id="navbar"] .sa-nav-sheet ul li > a[aria-current="page"] {
  background: linear-gradient(135deg, rgba(91,140,255,0.28), rgba(124,92,255,0.14));
  border-color: rgba(91, 140, 255, 0.5);
  color: #fff !important;
  box-shadow: 0 0 18px -6px rgba(91, 140, 255, 0.6), inset 0 0 12px rgba(91, 140, 255, 0.08);
}
nav[data-component-id="navbar"] .sa-nav-sheet ul li > a.is-active::after,
nav[data-component-id="navbar"] .sa-nav-sheet ul li > a[aria-current="page"]::after { color: #8cb0ff; }
nav[data-component-id="navbar"] .sa-nav-sheet .sa-nav-sheet-foot .dm-nav-account { width: 100%; justify-content: center; min-height: 48px; }

/* --- Review card clamp lines (feedback-card.njk sets --dm-clamp-lines from the theme's message_clamp) --- */
.dm-clamp { -webkit-line-clamp: var(--dm-clamp-lines, 3); }

/* --- Theme reveal engine: hide nothing when JS is off (html.rv is added by JS only) --- */
html:not(.rv) [data-dsr] { opacity: 1 !important; transform: none !important; }

/* --- Breadcrumbs (new): sit on the glass background, mono, no notched chip --- */
.sa-breadcrumbs { position: relative; z-index: 1; }
.sa-breadcrumbs-current { border-radius: 6px; background: rgba(91,140,255,0.12); color: #c7d4ff; }

/* --- Cart drawer / search modal / cookie banner: rounded glass surfaces --- */
.sa-cart-panel, .sa-search-modal, .sa-cc-box {
  background: rgba(10, 11, 20, 0.96) !important;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(91, 140, 255, 0.25) !important;
}
.sa-cc-box { border-radius: 16px !important; }
.sa-cc-btn { border-radius: 10px !important; }
.sa-cc-solid { background: linear-gradient(135deg, var(--accent-from), var(--accent-to)) !important; color: #fff !important; border: 0 !important; }

/* --- Section headings rendered by the theme's section-heading snippet (legal pages, blog, customer area) --- */
.sa-section-eyebrow { letter-spacing: 0.18em; }
.sa-section-title .glitch { font-size: 0.9em; }

/* --- Navbar account button: must out-rank the legacy `nav button.glitch-btn { background: transparent }` rule --- */
nav[data-component-id="navbar"] button.dm-nav-account,
nav[data-component-id="navbar"] a.dm-nav-account {
  background: linear-gradient(135deg, #7c5cff, #5b8cff) !important;
  color: #fff !important;
  border-color: rgba(124, 92, 255, 0.6) !important;
}
nav[data-component-id="navbar"] button.dm-nav-account:hover,
nav[data-component-id="navbar"] a.dm-nav-account:hover {
  background: linear-gradient(135deg, #8b6bff, #6b97ff) !important;
}
nav[data-component-id="navbar"] .dm-nav-account::after { background: transparent !important; }

/* --- Reveal engine policy (same as the old dm-reveal): phones never hide content,
       and the breadcrumb trail keeps its own room above page titles --- */
@media (max-width: 767px) {
  html.rv [data-dsr] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
html.rv-done [data-dsr] { opacity: 1 !important; transform: none !important; }
.sa-breadcrumbs { margin-bottom: 0 !important; padding-bottom: 8px; }

/* --- Chamfer border layer: plain hairline (the accent corner ticks were drawn for the notched shape) --- */
.chamfer::before { background: var(--chamfer-border, rgba(255,255,255,0.14)) !important; }
.chamfer-accent::before { background: rgba(91, 140, 255, 0.6) !important; }


/* ============================================================
   TAILWIND UTILITY FALLBACKS (added 2026-10-30)
   The v2 built.css is compiled from the stock templates, so utilities that
   only the Donut Market markup uses are missing from it. Defined here with
   Tailwind's exact values so the ported components render identically even
   if the platform does not rebuild built.css from the custom templates.
============================================================ */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-gray-300 { color: #d1d5db; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-t-primary\/30 { color: rgba(var(--cl-t-primary), 0.3); }
.text-t-primary\/40 { color: rgba(var(--cl-t-primary), 0.4); }
.text-t-primary\/50 { color: rgba(var(--cl-t-primary), 0.5); }
.text-t-primary\/60 { color: rgba(var(--cl-t-primary), 0.6); }
.text-t-primary\/70 { color: rgba(var(--cl-t-primary), 0.7); }
.text-t-primary\/75 { color: rgba(var(--cl-t-primary), 0.75); }
.bg-white\/5 { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.1); }
.bg-white\/\[0\.03\] { background-color: rgba(255,255,255,0.03); }
.bg-red-500 { background-color: #ef4444; }
.bg-red-500\/10 { background-color: rgba(239,68,68,0.1); }
.border-2 { border-width: 2px; }
.border-b-2 { border-bottom-width: 2px; }
.border-white\/5 { border-color: rgba(255,255,255,0.05); }
.border-y-white\/5 { border-top-color: rgba(255,255,255,0.05); border-bottom-color: rgba(255,255,255,0.05); }
.border-red-500\/10 { border-color: rgba(239,68,68,0.1); }
.max-h-0 { max-height: 0; }
.ml-2 { margin-left: 0.5rem; }
.overflow-visible { overflow: visible; }
.pl-1 { padding-left: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.right-2 { right: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.size-\[41px\] { width: 41px; height: 41px; }
.w-\[calc\(100\%-82px\)\] { width: calc(100% - 82px); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.focus-within\:border-accent-500:focus-within { border-color: rgb(var(--cl-accent)); }
.hover\:text-accent-500:hover { color: rgb(var(--cl-accent)); }
.hover\:text-red-400:hover { color: #f87171; }
.hover\:bg-\[rgba\(255\2c 255\2c 255\2c 0\.015\)\]:hover { background-color: rgba(255,255,255,0.015); }
.hover\:enabled\:bg-red-500\/20:hover:enabled { background-color: rgba(239,68,68,0.2); }
.hover\:enabled\:border-red-500:hover:enabled { border-color: #ef4444; }
@media (min-width: 640px) {
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:max-w-48 { max-width: 12rem; }
  .sm\:mb-1 { margin-bottom: 0.25rem; }
  .sm\:mb-2 { margin-bottom: 0.5rem; }
  .sm\:pl-4 { padding-left: 1rem; }
  .sm\:pr-4 { padding-right: 1rem; }
  .sm\:text-left { text-align: left; }
}
@media (min-width: 768px) {
  .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .lg\:mb-24 { margin-bottom: 6rem; }
  .lg\:mt-8 { margin-top: 2rem; }
}

/* --- Nav tabs: only the dm-nav-link underline, never the theme's extra bar --- */
nav[data-component-id="navbar"] .dm-nav-link::after { content: none !important; }