/*
Theme Name: Dexso D.M.E. — Elementor Edition
Theme URI: https://dexso.com/
Author: Dexso AG
Author URI: https://dexso.com/
Description: Premium single-product landing page for Dexso D.M.E. — 3D WebGL showcase + full WooCommerce + Elementor widget library. Edit every hero / story / extraction / stats / features section visually in Elementor. Inner-page shell keeps header, footer, cursor and ambient background consistent on About, Contact, FAQ and any Elementor-built sub-page. Based on Version B (Trichomes + Extraction).
Version: 1.3.18
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: dexso-dme-elementor
Tags: woocommerce, elementor, three-js, single-product, landing-page, dark, premium
WC requires at least: 8.0
WC tested up to: 8.8
Elementor tested up to: 3.20
*/

/* ============================================================
   DEXSO D.M.E. — Premium Showcase
   Dark luxury, glass, blue accent
   ============================================================ */

:root {
  --bg: #0a0e14;
  --bg-2: #0f141c;
  --bg-3: #141a24;
  --fg: #eef2f7;
  --fg-dim: #98a4b3;
  --fg-mute: #5b6675;
  --accent: #7dd3f0;
  --accent-soft: rgba(125, 211, 240, 0.12);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.14);

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

body {
  background:
    radial-gradient(ellipse at top, rgba(125, 211, 240, 0.04), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(125, 211, 240, 0.02), transparent 70%),
    var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: none;
  border: none;
  background: none;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* ============================================================
   Custom Cursor
   ============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.25s cubic-bezier(0.65, 0, 0.35, 1), height 0.25s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.25s;
}
.cursor-ring.hover {
  width: 60px;
  height: 60px;
  border-color: var(--accent);
}

/* ============================================================
   Noise Grain Overlay
   ============================================================ */
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Loader
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  pointer-events: auto;
}
.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  text-align: center;
  width: min(440px, 80vw);
}
.loader-logo {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 0.4em;
  color: var(--fg);
  margin-bottom: 36px;
}
.loader-bar-wrap {
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  overflow: hidden;
  margin-bottom: 14px;
}
.loader-bar {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.loader-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.loader-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 60px 28px 80px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.6), rgba(10, 14, 20, 0));
}
.nav-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.32em;
  color: var(--fg);
}
.nav-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
}
.nav-links li {
  position: relative;
}
/* Glowing vertical separator between menu items — taller than the text,
   with a gradient fade at the top and bottom and a soft neon halo. */
.nav-links li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: linear-gradient(
    180deg,
    rgba(125, 211, 240, 0) 0%,
    rgba(125, 211, 240, 0.95) 50%,
    rgba(125, 211, 240, 0) 100%
  );
  box-shadow:
    0 0 12px rgba(125, 211, 240, 0.8),
    0 0 4px rgba(125, 211, 240, 0.95);
  pointer-events: none;
}
.nav-links a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              text-shadow 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              font-weight 0.3s;
}
.nav-links a:hover {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(125, 211, 240, 0.5);
}
.nav-links a.active {
  color: var(--accent);
  font-weight: 500;
  text-shadow:
    0 0 16px rgba(125, 211, 240, 0.8),
    0 0 6px rgba(125, 211, 240, 0.6),
    0 0 2px rgba(125, 211, 240, 0.9);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 3px var(--accent);
}
.nav-cta {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg);
  transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  text-shadow: 0 0 10px rgba(125, 211, 240, 0.75);
  box-shadow:
    0 0 18px rgba(125, 211, 240, 0.55),
    0 0 40px rgba(125, 211, 240, 0.28),
    inset 0 0 12px rgba(125, 211, 240, 0.18);
}

/* ============================================================
   WebGL canvas — fixed full screen
   ============================================================ */
#webgl {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1;
  display: block;
  pointer-events: auto;
}

/* ============================================================
   Explode Slider (left rail)
   ============================================================ */
.slider-rail {
  position: fixed;
  left: 48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.slider-rail.visible { opacity: 1; }
.slider-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--fg-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.slider-track {
  position: relative;
  width: 2px;
  height: 220px;
  background: var(--line-strong);
  cursor: none;
}
.slider-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.slider-thumb {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transform: translate(-50%, 50%);
  box-shadow: 0 0 14px var(--accent);
}
.slider-value {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--accent);
}

/* ============================================================
   Side Panel
   ============================================================ */
.side-panel {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  width: min(360px, 80vw);
  background: rgba(15, 20, 28, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--line-strong);
  padding: 36px 40px;
  z-index: 60;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.side-panel.open { transform: translate(0, -50%); }
.side-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 26px;
  color: var(--fg-mute);
  transition: color 0.2s;
}
.side-close:hover { color: var(--accent); }
.side-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 16px;
}
.side-title {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  line-height: 1;
}
.side-desc {
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.side-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-mute);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Tooltip
   ============================================================ */
.tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 90;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  background: rgba(125, 211, 240, 0.95);
  color: var(--bg);
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.tooltip.visible { opacity: 1; }

/* ============================================================
   Right edge progress bar
   ============================================================ */
.progress-rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 320px;
  background: var(--line-strong);
  z-index: 50;
}
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.progress-ticks {
  position: absolute;
  inset: 0;
}
.progress-ticks .tick {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 1px;
  background: var(--fg-mute);
}

/* ============================================================
   Story sections
   ============================================================ */
.story {
  position: relative;
  z-index: 10;
}
.story-section {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 120px 0 380px;
  position: relative;
}
.story-text {
  position: relative;
  max-width: 480px;
  padding-left: 24px;
  /* Initial state set by JS via GSAP */
  will-change: opacity, transform;
}
.story-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 2px;
  height: 48px;
  background: linear-gradient(180deg, var(--accent), rgba(125, 211, 240, 0));
  box-shadow:
    0 0 14px rgba(125, 211, 240, 0.85),
    0 0 4px rgba(125, 211, 240, 0.6);
}
.story-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 24px;
}
.story-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 110px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin-bottom: 28px;
  color: var(--fg);
}
.story-body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg-dim);
  max-width: 380px;
}
.scroll-hint {
  margin-top: 60px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--fg-mute);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}
.cta-large {
  display: inline-block;
  position: relative;
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 0 rgba(125, 211, 240, 0);
}
.cta-large:hover {
  background: var(--accent);
  color: var(--bg);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 32px rgba(125, 211, 240, 0.7),
    0 0 68px rgba(125, 211, 240, 0.4),
    0 0 110px rgba(125, 211, 240, 0.22),
    inset 0 0 18px rgba(255, 255, 255, 0.25);
}

/* Inline blue accent for key words inside titles/body */
.accent {
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.55),
    0 0 4px rgba(125, 211, 240, 0.35);
}

/* ============================================================
   Extraction (Cannabinoid Extraction section)
   ============================================================ */
.extraction {
  position: relative;
  z-index: 10;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: 180px 80px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.extraction::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 211, 240, 0.5) 50%,
    transparent 100%
  );
  box-shadow: 0 0 14px rgba(125, 211, 240, 0.45);
}
.extraction-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.extraction-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
  display: block;
  margin-bottom: 22px;
  text-shadow:
    0 0 14px rgba(125, 211, 240, 0.55),
    0 0 4px rgba(125, 211, 240, 0.4);
}
.extraction-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.98;
  max-width: 1000px;
  margin-bottom: 36px;
  color: var(--fg);
}
.extraction-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--fg-dim);
  max-width: 640px;
  margin-bottom: 90px;
}
.extraction-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.extraction-card {
  background: var(--bg);
  padding: 48px 36px 44px;
  position: relative;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.extraction-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(125, 211, 240, 0));
  box-shadow:
    0 0 14px rgba(125, 211, 240, 0.8),
    0 0 4px rgba(125, 211, 240, 0.6);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.extraction-card:hover {
  background: var(--bg-2);
}
.extraction-card:hover::before { opacity: 1; }
.extraction-num {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 24px;
  text-shadow:
    0 0 24px rgba(125, 211, 240, 0.55),
    0 0 6px rgba(125, 211, 240, 0.35);
}
.extraction-num span {
  font-size: 36px;
  margin-left: 2px;
}
.extraction-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--fg);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.extraction-card p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-dim);
}

/* ============================================================
   Stats
   ============================================================ */
.stats {
  position: relative;
  z-index: 10;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 140px 80px;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto;
}
.stat {
  border-left: 1px solid var(--line);
  padding-left: 40px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 1;
  color: var(--fg);
  margin-bottom: 12px;
}
.stat-num span {
  font-size: 36px;
  color: var(--accent);
  margin-left: 4px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 10px;
}
.stat-desc {
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.6;
}

/* ============================================================
   Features
   ============================================================ */
.features {
  position: relative;
  z-index: 10;
  background: var(--bg);
  padding: 160px 80px;
}
.features-head {
  max-width: 1300px;
  margin: 0 auto 80px;
}
.features-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--accent);
  display: block;
  margin-bottom: 18px;
}
.features-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  max-width: 800px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 1300px;
  margin: 0 auto;
  background: var(--line);
  border: 1px solid var(--line);
}
.feature {
  background: var(--bg);
  padding: 48px 36px;
  transition: background 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.feature:hover { background: var(--bg-2); }
.feature-num {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 28px;
  text-shadow:
    0 0 24px rgba(125, 211, 240, 0.55),
    0 0 6px rgba(125, 211, 240, 0.35);
}
.feature h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  color: var(--fg);
}
.feature p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-dim);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  z-index: 10;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 100px 80px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  max-width: 1300px;
  margin: 0 auto 80px;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.32em;
  margin-bottom: 18px;
}
.footer-col p {
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.7;
  max-width: 280px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 18px;
  text-transform: uppercase;
  font-weight: 400;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--fg-dim);
  margin-bottom: 10px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bot {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  text-transform: uppercase;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .nav { padding: 20px 24px; }
  .nav-links { display: none; }

  /* Text sits at the top of each section so the centered can stays
     visible in the bottom half. Left padding clears the vertical slider
     rail, right padding clears the progress rail. */
  .story-section {
    align-items: flex-start;
    padding: 110px 36px 0 68px;
  }
  .story-text {
    max-width: 100%;
    padding: 22px 22px 24px 22px;
    background: linear-gradient(
      135deg,
      rgba(10, 14, 20, 0.82),
      rgba(10, 14, 20, 0.45)
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 240, 0.18);
  }
  .story-text::before { display: none; }
  .story-title {
    font-size: clamp(40px, 11vw, 72px);
    margin-bottom: 18px;
  }
  .story-body { font-size: 14px; line-height: 1.6; }
  .story-tag { margin-bottom: 16px; }
  .scroll-hint { margin-top: 28px; }
  .cta-large {
    display: inline-block;
    margin-top: 32px;
    padding: 14px 28px;
    font-size: 11px;
  }

  .slider-rail { left: 16px; }
  .progress-rail { right: 14px; height: 220px; }

  /* Left padding gives the vertical slider-rail + right padding gives the
     progress-rail enough breathing room so neither overlaps content. */
  .stats, .features, .footer { padding-left: 68px; padding-right: 36px; }
  /* The feature cards already get a +36px internal padding that clears the
     slider, but the features-head has no internal padding of its own, so
     align it with the card content position by adding the same offset. */
  .features-head { padding-left: 36px; padding-right: 36px; }
  .stats-inner, .features-grid, .footer-grid { grid-template-columns: 1fr; }
  .stat { border-left: none; border-top: 1px solid var(--line); padding: 32px 0 0; }
  .stat-num { font-size: 72px; }
  .feature-num { font-size: 56px; }
  .features { padding: 100px 32px; }
  .features-head { margin-bottom: 60px; }

  /* Extraction section on mobile */
  .extraction {
    padding: 120px 36px 120px 68px;
  }
  .extraction-title {
    font-size: clamp(40px, 11vw, 72px);
  }
  .extraction-body {
    font-size: 14px;
    margin-bottom: 60px;
  }
  .extraction-cards {
    grid-template-columns: 1fr;
  }
  .extraction-card {
    padding: 36px 32px;
  }
  .extraction-num {
    font-size: 64px;
    margin-bottom: 18px;
  }
}

/* ============================================================
   WordPress / WooCommerce integration overrides
   Appended to the Dexso D.M.E. Version B CSS — all new styles
   below this banner are WordPress-theme-specific.
   ============================================================ */

/* --- Cart badge on the nav CTA --- */
.nav-cta {
  position: relative;
}
.nav-cta-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent, #7dd3f0);
  color: #05070a;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 12px rgba(125, 211, 240, 0.6);
}
.nav-cta-count:empty,
.nav-cta-count.is-empty {
  display: none;
}

/* --- Inner page shell (blog, about, contact, 404, search) --- */
body.dexso-inner {
  background: #05070a;
  min-height: 100vh;
}
.dexso-plain {
  padding: 140px 48px 120px;
  min-height: calc(100vh - 300px);
  color: #e8edf2;
}
.plain-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.plain-entry {
  margin-bottom: 80px;
}
.plain-entry .entry-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 6vw, 76px);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 24px;
  color: #fff;
}
.plain-entry .entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.plain-entry .entry-title a:hover {
  color: var(--accent, #7dd3f0);
}
.plain-entry .entry-meta {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(232, 237, 242, 0.5);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.plain-entry .entry-content {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(232, 237, 242, 0.85);
}
.plain-entry .entry-content h2,
.plain-entry .entry-content h3 {
  font-family: 'Bebas Neue', sans-serif;
  color: #fff;
  margin-top: 48px;
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
.plain-entry .entry-content a {
  color: var(--accent, #7dd3f0);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 240, 0.3);
  transition: border-color 0.2s ease;
}
.plain-entry .entry-content a:hover {
  border-bottom-color: var(--accent, #7dd3f0);
}
.plain-entry .entry-content blockquote {
  border-left: 2px solid var(--accent, #7dd3f0);
  padding-left: 24px;
  margin: 32px 0;
  color: rgba(232, 237, 242, 0.65);
  font-style: italic;
}
.plain-entry .entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 24px 0;
}

/* --- WooCommerce shell --- */
.dexso-wc {
  padding: 140px 48px 120px;
  color: #e8edf2;
  min-height: calc(100vh - 300px);
}
.wc-wrap {
  max-width: 1240px;
}
.dexso-wc-content {
  color: #e8edf2;
}
.dexso-wc .woocommerce-breadcrumb {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, 0.5);
  margin-bottom: 48px;
}
.dexso-wc .woocommerce-breadcrumb a {
  color: var(--accent, #7dd3f0);
  text-decoration: none;
}
.dexso-wc h1.product_title,
.dexso-wc h1.page-title,
.dexso-wc .woocommerce-products-header__title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 24px;
}
.dexso-wc .price,
.dexso-wc .woocommerce-Price-amount {
  font-family: 'DM Mono', monospace;
  font-size: 22px;
  color: var(--accent, #7dd3f0) !important;
}
.dexso-wc .woocommerce-product-details__short-description,
.dexso-wc .woocommerce-product-details__short-description p,
.dexso-wc .woocommerce-loop-product__title {
  color: rgba(232, 237, 242, 0.85);
  font-family: 'DM Sans', sans-serif;
}
.dexso-wc .button,
.dexso-wc button.button,
.dexso-wc input[type="submit"],
.dexso-wc .wp-element-button {
  background: transparent !important;
  color: var(--accent, #7dd3f0) !important;
  border: 1px solid var(--accent, #7dd3f0) !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 0 0 rgba(125, 211, 240, 0);
}
.dexso-wc .button:hover,
.dexso-wc button.button:hover,
.dexso-wc input[type="submit"]:hover,
.dexso-wc .wp-element-button:hover {
  background: var(--accent, #7dd3f0) !important;
  color: #05070a !important;
  box-shadow: 0 0 40px rgba(125, 211, 240, 0.35) !important;
}
.dexso-wc table.shop_table,
.dexso-wc .woocommerce-cart-form,
.dexso-wc .cart-collaterals,
.dexso-wc .woocommerce-checkout-review-order {
  color: #e8edf2;
}
.dexso-wc table.shop_table th,
.dexso-wc table.shop_table td {
  border-color: rgba(255, 255, 255, 0.08);
  background: transparent;
  padding: 18px 14px;
  font-family: 'DM Sans', sans-serif;
}
.dexso-wc .woocommerce-info,
.dexso-wc .woocommerce-message,
.dexso-wc .woocommerce-error {
  background: rgba(125, 211, 240, 0.06);
  border-left: 2px solid var(--accent, #7dd3f0);
  color: #e8edf2;
  padding: 18px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}
.dexso-wc input[type="text"],
.dexso-wc input[type="email"],
.dexso-wc input[type="tel"],
.dexso-wc input[type="number"],
.dexso-wc input[type="password"],
.dexso-wc select,
.dexso-wc textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e8edf2 !important;
  padding: 12px 14px !important;
  border-radius: 4px !important;
  font-family: 'DM Sans', sans-serif !important;
}
.dexso-wc input[type="text"]:focus,
.dexso-wc input[type="email"]:focus,
.dexso-wc input[type="tel"]:focus,
.dexso-wc input[type="number"]:focus,
.dexso-wc input[type="password"]:focus,
.dexso-wc select:focus,
.dexso-wc textarea:focus {
  border-color: var(--accent, #7dd3f0) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 211, 240, 0.15);
}
.dexso-wc ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 48px 0 !important;
}
.dexso-wc ul.products li.product {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 32px;
  width: auto !important;
  margin: 0 !important;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.dexso-wc ul.products li.product:hover {
  border-color: rgba(125, 211, 240, 0.4);
  transform: translateY(-4px);
}

/* --- Added-to-cart toast --- */
.dexso-toast {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 10000;
  background: rgba(5, 7, 10, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 211, 240, 0.4);
  color: #fff;
  padding: 16px 22px;
  border-radius: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  gap: 16px;
  align-items: center;
}
.dexso-toast a {
  color: var(--accent, #7dd3f0);
  text-decoration: none;
}

@media (max-width: 900px) {
  .dexso-plain,
  .dexso-wc {
    padding: 110px 24px 80px;
  }
  .dexso-wc ul.products {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ============================================================
   INNER PAGE SHELL (page.php, dexso-inner.php template, blog,
   search, 404 — anything that is NOT the hardcoded landing).
   Inherits the shared header/footer/cursor/noise overlay from
   header.php and adds its own ambient gradient + typography.
   ============================================================ */

body.dexso-inner {
  background:
    radial-gradient(ellipse at top, rgba(125, 211, 240, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(125, 211, 240, 0.035), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(125, 211, 240, 0.025), transparent 65%),
    var(--bg);
  min-height: 100vh;
  cursor: none;
}

/* Subtle animated accent line at the very top of every inner page */
body.dexso-inner::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 211, 240, 0.4) 30%,
    rgba(125, 211, 240, 0.6) 50%,
    rgba(125, 211, 240, 0.4) 70%,
    transparent 100%
  );
  z-index: 10;
  pointer-events: none;
}

/* Full-bleed ambient grid texture behind inner page content */
body.dexso-inner::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Make sure everything on an inner page sits above the grid texture */
body.dexso-inner .nav,
body.dexso-inner .footer,
body.dexso-inner .site-main {
  position: relative;
  z-index: 1;
}

/* ---------- Shared inner-page main containers ---------- */

.dexso-inner-shell,
.dexso-inner-canvas {
  position: relative;
  min-height: calc(100vh - 320px);
  padding-top: 120px; /* space below the fixed nav */
  color: #e8edf2;
}

/* The Elementor canvas template lets Elementor handle all internal
   spacing, so only reserve room for the nav — no side padding. */
.dexso-inner-canvas {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* The classic page.php shell handles its own padding for readable prose. */
.dexso-inner-shell {
  padding-bottom: 120px;
}

/* ---------- Page hero (used by page.php) ---------- */

.dexso-page-hero {
  position: relative;
  padding: 80px 48px 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.dexso-page-hero::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(125, 211, 240, 0.5) 0%,
    rgba(125, 211, 240, 0.15) 40%,
    transparent 100%
  );
}
.dexso-page-hero-inner {
  max-width: 960px;
}
.dexso-page-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dexso-page-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.dexso-page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 24px;
}
.dexso-page-hero-title .dexso-accent,
.dexso-widget-hero-title .dexso-accent,
.dexso-section-title .dexso-accent {
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.55),
    0 0 42px rgba(125, 211, 240, 0.28);
}
.dexso-page-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 640px;
  font-weight: 300;
}

/* ---------- Inner article (classic content below the hero) ---------- */

.dexso-inner-article {
  padding: 60px 48px 80px;
  max-width: 1440px;
  margin: 0 auto;
}
.dexso-inner-wrap {
  max-width: 760px;
}
.dexso-inner-content {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(232, 237, 242, 0.82);
}
.dexso-inner-content > * + * {
  margin-top: 1.2em;
}
.dexso-inner-content h2,
.dexso-inner-content h3,
.dexso-inner-content h4 {
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}
.dexso-inner-content h2 { font-size: clamp(32px, 4vw, 48px); }
.dexso-inner-content h3 { font-size: clamp(24px, 3vw, 34px); }
.dexso-inner-content h4 { font-size: clamp(20px, 2.2vw, 26px); }
.dexso-inner-content a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 211, 240, 0.35);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.dexso-inner-content a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.dexso-inner-content blockquote {
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 28px;
  margin: 2em 0;
  color: rgba(232, 237, 242, 0.7);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
}
.dexso-inner-content img,
.dexso-inner-content figure {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1.8em 0;
}
.dexso-inner-content figure figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 12px;
  text-align: center;
}
.dexso-inner-content ul,
.dexso-inner-content ol {
  padding-left: 1.2em;
}
.dexso-inner-content li + li {
  margin-top: 0.5em;
}
.dexso-inner-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 3px;
  color: var(--accent);
}
.dexso-inner-content pre {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}
.dexso-inner-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(125, 211, 240, 0.35),
    transparent
  );
  margin: 3em 0;
}
.dexso-inner-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-family: var(--font-body);
}
.dexso-inner-content table th,
.dexso-inner-content table td {
  border-bottom: 1px solid var(--line);
  padding: 14px 12px;
  text-align: left;
}
.dexso-inner-content table th {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Elementor canvas helpers ----------
   These keep Elementor widgets aligned to the 1440 grid and
   give them the same dark ambient look as the landing. */

.dexso-inner-canvas .elementor-section {
  position: relative;
}
.dexso-inner-canvas .elementor-heading-title {
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: 0.005em;
}
.dexso-inner-canvas .elementor-widget-text-editor {
  font-family: var(--font-body);
  color: rgba(232, 237, 242, 0.82);
  line-height: 1.7;
}
.dexso-inner-canvas .elementor-widget-text-editor a {
  color: var(--accent);
  border-bottom: 1px solid rgba(125, 211, 240, 0.35);
  text-decoration: none;
}

/* ---------- Reusable Dexso inner-page widget styles ---------- */

.dexso-section-title {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin: 0 0 28px;
}
.dexso-section-title .accent {
  color: var(--accent);
}
.dexso-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dexso-section-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.dexso-rich-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: rgba(232, 237, 242, 0.82);
  max-width: 680px;
}
.dexso-rich-text p + p {
  margin-top: 1.1em;
}

/* Generic Dexso CTA wrapper (Elementor widget) */
.dexso-cta-wrap {
  margin-top: 32px;
}
.dexso-cta-wrap .cta-large {
  display: inline-block;
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 18px 40px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  box-shadow: 0 0 0 rgba(125, 211, 240, 0);
  text-decoration: none;
}
.dexso-cta-wrap .cta-large:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 40px rgba(125, 211, 240, 0.35);
  transform: translateY(-1px);
}

/* Dexso Page Hero widget (Elementor) — for inner page banners */
.dexso-widget-hero {
  padding: 60px 0 40px;
  position: relative;
}
.dexso-widget-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(125, 211, 240, 0.5) 0%,
    rgba(125, 211, 240, 0.15) 40%,
    transparent 100%
  );
}
.dexso-widget-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dexso-widget-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.dexso-widget-hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  color: #fff;
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
}
.dexso-widget-hero-title .accent {
  color: var(--accent);
}
.dexso-widget-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 640px;
  font-weight: 300;
}

/* ---------- Inner-page responsive ---------- */

@media (max-width: 900px) {
  .dexso-inner-shell {
    padding-top: 100px;
    padding-bottom: 80px;
  }
  .dexso-page-hero {
    padding: 40px 24px 40px;
  }
  .dexso-page-hero::after {
    left: 24px;
    right: 24px;
  }
  .dexso-inner-article {
    padding: 40px 24px 60px;
  }
  .dexso-inner-content {
    font-size: 16px;
  }
  .dexso-widget-hero {
    padding: 40px 0 30px;
  }
}

@media (max-width: 600px) {
  body.dexso-inner::after {
    background-size: 48px 48px;
  }
  .dexso-page-hero-eyebrow,
  .dexso-widget-hero-eyebrow,
  .dexso-section-eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
  }
}

/* ============================================================
   PREMIUM SINGLE-PRODUCT PAGE (v1.2)
   Landing-matched layout rendered by
   woocommerce/content-single-product.php.
   Reuses .dexso-wc shell set by woocommerce.php.
   ============================================================ */

/* Neutralize default WC single wrappers inside our layout */
.dexso-wc .dexso-product {
  max-width: none;
  margin: 0;
  padding: 0;
}
.dexso-wc .dexso-product .product_title,
.dexso-wc .dexso-product .price,
.dexso-wc .dexso-product .woocommerce-product-details__short-description {
  /* these move into our hero / summary slots */
}

/* Kill the default .plain-wrap padding — our product layout manages its own */
.dexso-wc.has-product {
  padding: 0 !important;
}

/* ---------- Product hero ---------- */
.dexso-product-hero {
  position: relative;
  padding: 140px 48px 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.dexso-product-hero-inner {
  max-width: 960px;
}
.dexso-product-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dexso-product-hero-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.dexso-product-hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 8.5vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 28px;
  text-transform: uppercase;
}
.dexso-product-hero-title .dexso-accent {
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.55),
    0 0 42px rgba(125, 211, 240, 0.28);
}
.dexso-product-hero-lede {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 680px;
  font-weight: 300;
  margin-bottom: 34px;
}
.dexso-product-hero-lede p {
  margin: 0 0 12px;
}
.dexso-product-hero-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.dexso-product-hero-price {
  font-family: var(--font-mono);
  font-size: 28px;
  color: var(--accent) !important;
  letter-spacing: 0.01em;
}
.dexso-product-hero-price .woocommerce-Price-amount {
  font-size: inherit !important;
}
.dexso-product-hero-price del {
  color: var(--fg-mute);
  opacity: 0.6;
  margin-right: 10px;
}
.dexso-product-hero-stock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.dexso-product-hero-stock .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #44d07b;
  box-shadow: 0 0 8px rgba(68, 208, 123, 0.6);
}
.dexso-product-hero-stock[data-in-stock="0"] .dot {
  background: #ff7a59;
  box-shadow: 0 0 8px rgba(255, 122, 89, 0.6);
}

/* ---------- Two-column layout ---------- */
.dexso-product-layout {
  padding: 20px 48px 80px;
  max-width: 1440px;
  margin: 0 auto;
}
.dexso-product-layout-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: start;
}

/* Gallery frame — glass card with blue ambient glow */
.dexso-product-gallery-wrap {
  position: relative;
}
.dexso-product-gallery-frame {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(125, 211, 240, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 48px;
  overflow: hidden;
}
.dexso-product-gallery-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(125, 211, 240, 0.12), transparent 55%);
  pointer-events: none;
}
.dexso-product-gallery-frame .woocommerce-product-gallery {
  position: relative;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.dexso-product-gallery-frame .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
/* ----- Zoom trigger: hide the magnifying-glass pin, keep click-to-zoom ----- */
/* WooCommerce renders a floating magnifying-glass <a.woocommerce-product-gallery__trigger>
   in the top-right of the gallery. The PhotoSwipe lightbox is ALSO bound to clicks
   on the image link (<a>) around the image — so hiding the trigger cleanly removes
   the visible pin without disabling click-to-zoom. */
.dexso-product-gallery-frame .woocommerce-product-gallery__trigger,
body.single-product .woocommerce-product-gallery__trigger {
  display: none !important;
}
/* Signal that the image itself is the zoom target. */
.dexso-product-gallery-frame .woocommerce-product-gallery__image a,
.dexso-product-gallery-frame .woocommerce-product-gallery__image img {
  cursor: zoom-in;
}
.dexso-product-gallery-frame .flex-control-thumbs {
  display: flex !important;
  gap: 12px;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}
.dexso-product-gallery-frame .flex-control-thumbs li {
  width: 72px !important;
  margin: 0 !important;
}
.dexso-product-gallery-frame .flex-control-thumbs img {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.dexso-product-gallery-frame .flex-control-thumbs img.flex-active,
.dexso-product-gallery-frame .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--accent);
}
.dexso-product-gallery-frame .onsale {
  position: absolute !important;
  top: 20px;
  left: 20px;
  background: var(--accent) !important;
  color: #05070a !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  box-shadow: 0 0 24px rgba(125, 211, 240, 0.4);
}

/* Summary buy card */
.dexso-product-summary-wrap {
  position: sticky;
  top: 110px;
}
.dexso-product-summary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 36px 34px;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.dexso-product-summary .quantity {
  display: inline-flex;
  margin-right: 14px;
}
.dexso-product-summary .quantity input.qty {
  width: 72px !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  padding: 14px 10px !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
}
.dexso-product-summary form.cart {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dexso-product-summary .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 180px;
  padding: 18px 34px !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.dexso-product-summary .product_meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 6px;
  line-height: 1.9;
}
.dexso-product-summary .product_meta > span {
  display: block;
}
.dexso-product-summary .product_meta a {
  color: var(--fg-dim);
  text-decoration: none;
}
.dexso-product-summary .product_meta a:hover {
  color: var(--accent);
}
.dexso-product-summary .woocommerce-product-rating {
  margin-bottom: 18px;
}

/* Fact chips below the buy card */
.dexso-product-summary-facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dexso-product-summary-facts li {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dexso-product-summary-facts .fact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.dexso-product-summary-facts .fact-value {
  font-family: var(--font-body);
  font-size: 14px;
  color: #eef2f7;
  font-weight: 500;
}

/* ---------- Product tabs ---------- */
.dexso-product-tabs-wrap {
  padding: 40px 48px 120px;
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.dexso-product-tabs-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 40px;
}
.dexso-wc .woocommerce-tabs ul.tabs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 40px !important;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  background: transparent !important;
}
.dexso-wc .woocommerce-tabs ul.tabs::before,
.dexso-wc .woocommerce-tabs ul.tabs::after {
  display: none !important;
}
.dexso-wc .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dexso-wc .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 16px 28px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fg-mute) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.dexso-wc .woocommerce-tabs ul.tabs li a:hover {
  color: var(--fg-dim) !important;
}
.dexso-wc .woocommerce-tabs ul.tabs li.active a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}
.dexso-wc .woocommerce-tabs .panel {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(232, 237, 242, 0.82);
  padding: 0 !important;
}
.dexso-wc .woocommerce-tabs .panel h2 {
  font-family: var(--font-display);
  font-size: 32px;
  color: #fff;
  letter-spacing: 0.01em;
  margin: 0 0 20px;
  text-transform: uppercase;
}
.dexso-wc .woocommerce-tabs .panel p {
  margin: 0 0 18px;
}
.dexso-wc .woocommerce-tabs .shop_attributes {
  width: 100%;
  border-collapse: collapse;
}
.dexso-wc .woocommerce-tabs .shop_attributes th,
.dexso-wc .woocommerce-tabs .shop_attributes td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.dexso-wc .woocommerce-tabs .shop_attributes th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  width: 220px;
  font-weight: 500;
}
.dexso-wc .woocommerce-tabs .shop_attributes td {
  color: #eef2f7;
}
.dexso-wc .woocommerce-tabs .shop_attributes td p {
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .dexso-product-layout-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .dexso-product-summary-wrap {
    position: static;
  }
}
@media (max-width: 900px) {
  .dexso-product-hero {
    padding: 120px 24px 40px;
  }
  .dexso-product-layout {
    padding: 10px 24px 60px;
  }
  .dexso-product-tabs-wrap {
    padding: 30px 24px 80px;
  }
  .dexso-product-gallery-frame {
    padding: 28px;
  }
  .dexso-product-summary {
    padding: 28px 24px;
  }
  .dexso-product-summary-facts {
    grid-template-columns: 1fr;
  }
  .dexso-wc .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
  }
  .dexso-wc .woocommerce-tabs ul.tabs li a {
    padding: 12px 18px !important;
  }
  .dexso-wc .woocommerce-tabs .shop_attributes th {
    width: 140px;
    font-size: 10px;
  }
}

/* ============================================================
   BLOCK-BASED CHECKOUT & CART (WP Woo 8.x+) — v1.2.3
   Woo ships the new React block checkout by default. It needs
   its own layout rules; the legacy .dexso-wc shell doesn't
   apply because the block markup is different.
   ============================================================ */

/* Centered max-width wrapper for checkout + cart block pages */
.dexso-wc.wc-block-checkout-wrap,
.dexso-wc .wp-block-woocommerce-checkout,
.dexso-wc .wp-block-woocommerce-cart {
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px 48px 120px;
}

/* When the checkout block is inside our .wc-wrap, kill the wrap's
   own padding so we don't double-pad */
.dexso-wc.has-product,
.dexso-wc .wc-wrap:has(.wp-block-woocommerce-checkout),
.dexso-wc .wc-wrap:has(.wp-block-woocommerce-cart) {
  padding: 0 !important;
  max-width: none;
}
.dexso-wc .wc-wrap .wp-block-woocommerce-checkout,
.dexso-wc .wc-wrap .wp-block-woocommerce-cart {
  padding: 140px 48px 120px;
}

/* Two-column layout: main on the left, sidebar on the right */
.dexso-wc .wp-block-woocommerce-checkout .wc-block-components-main,
.dexso-wc .wp-block-woocommerce-cart .wc-block-cart__main {
  flex: 1 1 60%;
  min-width: 0;
  padding-right: 48px;
}
.dexso-wc .wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
.dexso-wc .wp-block-woocommerce-cart .wc-block-cart__sidebar {
  flex: 0 0 420px;
  max-width: 420px;
  min-width: 0;
}
.dexso-wc .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
.dexso-wc .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
  display: flex !important;
  gap: 48px;
  align-items: flex-start;
}

/* Sidebar sticks while scrolling the main form */
.dexso-wc .wc-block-checkout__sidebar,
.dexso-wc .wc-block-cart__sidebar {
  position: sticky;
  top: 110px;
}

/* Section headings ("Contact information", "Billing address",
   "Payment options", "Order summary") */
.dexso-wc .wc-block-components-checkout-step__title,
.dexso-wc .wc-block-components-title,
.dexso-wc .wp-block-woocommerce-checkout h2,
.dexso-wc .wp-block-woocommerce-cart h2 {
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  color: #fff !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 0 24px !important;
}

/* Order summary card (right column) */
.dexso-wc .wc-block-components-sidebar {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 32px 28px;
}
.dexso-wc .wc-block-components-sidebar * {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Order summary line items — product title must NOT break per-char */
.dexso-wc .wc-block-components-order-summary-item__title,
.dexso-wc .wc-block-components-product-name {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #eef2f7 !important;
  line-height: 1.35 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  hyphens: none !important;
  display: block;
}
.dexso-wc .wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.dexso-wc .wc-block-components-order-summary-item__image {
  width: 56px !important;
  height: 56px !important;
}
.dexso-wc .wc-block-components-order-summary-item__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.dexso-wc .wc-block-components-order-summary-item__description,
.dexso-wc .wc-block-components-order-summary-item__description p {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--fg-dim) !important;
  line-height: 1.55 !important;
  margin: 6px 0 0 !important;
}
.dexso-wc .wc-block-components-order-summary-item__total-price,
.dexso-wc .wc-block-components-product-price,
.dexso-wc .wc-block-formatted-money-amount {
  font-family: var(--font-mono) !important;
  color: var(--accent) !important;
  font-size: 14px !important;
  white-space: nowrap;
}
.dexso-wc .wc-block-components-order-summary-item__quantity {
  background: var(--accent) !important;
  color: #05070a !important;
  font-family: var(--font-mono) !important;
  font-weight: 600;
}

/* Totals footer */
.dexso-wc .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 18px;
}
.dexso-wc .wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font-body);
  color: var(--fg-dim);
  font-size: 14px;
}
.dexso-wc .wc-block-components-totals-footer-item {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
.dexso-wc .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  font-size: 22px !important;
  color: var(--accent) !important;
}

/* Form inputs in the block checkout */
.dexso-wc .wc-block-components-text-input input,
.dexso-wc .wc-block-components-address-form input,
.dexso-wc .wc-block-components-combobox input,
.dexso-wc .wc-block-components-select select,
.dexso-wc .wc-blocks-components-select select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #eef2f7 !important;
  font-family: var(--font-body) !important;
  border-radius: 4px !important;
  padding: 16px 14px !important;
}
.dexso-wc .wc-block-components-text-input input:focus,
.dexso-wc .wc-block-components-address-form input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(125, 211, 240, 0.15) !important;
  outline: none !important;
}
.dexso-wc .wc-block-components-text-input label,
.dexso-wc .wc-block-components-checkbox__label {
  color: var(--fg-dim) !important;
}

/* "Place Order" primary button */
.dexso-wc .wc-block-components-checkout-place-order-button,
.dexso-wc .wc-block-components-button {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}
.dexso-wc .wc-block-components-checkout-place-order-button:hover,
.dexso-wc .wc-block-components-button:hover {
  background: var(--accent) !important;
  color: #05070a !important;
  box-shadow: 0 0 40px rgba(125, 211, 240, 0.35) !important;
}

/* Notice banners */
.dexso-wc .wc-block-components-notice-banner {
  background: rgba(255, 122, 89, 0.08) !important;
  border: 1px solid rgba(255, 122, 89, 0.3) !important;
  border-radius: 4px !important;
  color: #fff !important;
  padding: 16px 20px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.dexso-wc .wc-block-components-notice-banner.is-success {
  background: rgba(68, 208, 123, 0.08) !important;
  border-color: rgba(68, 208, 123, 0.3) !important;
}

/* Return to cart / continue shopping links */
.dexso-wc .wc-block-components-checkout-return-to-cart-button,
.dexso-wc .wp-block-woocommerce-cart-order-summary-block a {
  color: var(--accent) !important;
  text-decoration: none !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Responsive: stack on mobile */
@media (max-width: 900px) {
  .dexso-wc .wp-block-woocommerce-checkout,
  .dexso-wc .wp-block-woocommerce-cart {
    padding: 110px 20px 80px !important;
  }
  .dexso-wc .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
  .dexso-wc .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    flex-direction: column;
    gap: 32px;
  }
  .dexso-wc .wp-block-woocommerce-checkout .wc-block-components-main,
  .dexso-wc .wp-block-woocommerce-cart .wc-block-cart__main {
    padding-right: 0;
  }
  .dexso-wc .wp-block-woocommerce-checkout .wc-block-checkout__sidebar,
  .dexso-wc .wp-block-woocommerce-cart .wc-block-cart__sidebar {
    flex: 1 1 auto;
    max-width: none;
    position: static;
  }
}

/* ============================================================
   DEXSO GLOW TEXT widget (v1.3.0)
   Standalone Elementor widget rendering text with the signature
   blue glow accent on [bracketed] words (or the entire string).
   ============================================================ */

.dexso-glow-text {
  color: #fff;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  font-family: var(--font-display);
}
.dexso-glow-text--display {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  text-transform: uppercase;
}
.dexso-glow-text--hero {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 84px);
  line-height: 0.95;
  text-transform: uppercase;
}
.dexso-glow-text--title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1;
  text-transform: uppercase;
}
.dexso-glow-text--body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  font-weight: 300;
  text-transform: none;
}
.dexso-glow-text--mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.3;
}
.dexso-glow-text .accent,
.dexso-glow-text.is-all-glow {
  color: var(--accent) !important;
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.55),
    0 0 42px rgba(125, 211, 240, 0.28);
}

/* ============================================================
   DEXSO FACT widget (v1.3.0)
   Single fact / stat card with 3 visual variants.
   ============================================================ */

.dexso-fact {
  --fact-pad: 28px;
  position: relative;
  color: #eef2f7;
  font-family: var(--font-body);
}
.dexso-fact--glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: var(--fact-pad);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.dexso-fact--glass:hover {
  border-color: rgba(125, 211, 240, 0.35);
  transform: translateY(-2px);
}
.dexso-fact--bare {
  padding: 12px 0;
}
.dexso-fact--line {
  padding: 14px 0 14px 24px;
  border-left: 2px solid var(--accent);
}

.dexso-fact-number-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  margin-bottom: 14px;
}
.dexso-fact-number {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
}
.dexso-fact--accent-number .dexso-fact-number {
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.45),
    0 0 42px rgba(125, 211, 240, 0.22);
}
.dexso-fact-unit {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--fg-dim);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.dexso-fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 12px;
}
.dexso-fact-label .accent {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(125, 211, 240, 0.45);
}
.dexso-fact-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 38ch;
}
.dexso-fact-desc .accent {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(125, 211, 240, 0.45);
}
.dexso-fact[style*="text-align:center"] .dexso-fact-desc,
.dexso-fact[style*="text-align: center"] .dexso-fact-desc {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   ARCHIVE / SEARCH / 404 heroes — v1.3.0
   ============================================================ */

.dexso-404-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 48px 100px;
  text-align: center;
}
.dexso-404-code {
  font-family: var(--font-display);
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.85;
  color: var(--accent);
  text-shadow:
    0 0 28px rgba(125, 211, 240, 0.55),
    0 0 80px rgba(125, 211, 240, 0.3);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.dexso-404-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
  line-height: 1;
}
.dexso-404-lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-dim);
  max-width: 560px;
  margin: 0 auto 40px;
  font-weight: 300;
}
.dexso-404-ctas {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.dexso-search-form {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  max-width: 560px;
}
.dexso-search-form input[type="search"] {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef2f7;
  padding: 14px 18px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
}
.dexso-search-form input[type="search"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 211, 240, 0.15);
}

.dexso-archive-empty {
  padding: 40px 0;
  text-align: center;
}
.dexso-archive-empty p {
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: 17px;
  margin-bottom: 24px;
}

/* ============================================================
   1.3.3 — Featured image banner on single blog posts
   ============================================================ */

.dexso-post-hero-media {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 48px 0;
}
.dexso-post-hero-media .dexso-post-hero-image,
.dexso-post-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(125, 211, 240, 0.04);
  background: var(--bg-2);
}
.dexso-post-hero-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
@media (max-width: 720px) {
  .dexso-post-hero-media {
    padding: 24px 20px 0;
  }
  .dexso-post-hero-media .dexso-post-hero-image,
  .dexso-post-hero-media img {
    border-radius: 3px;
  }
}

/* ============================================================
   1.3.3 — Dexso FAQ widget
   ------------------------------------------------------------
   Native <details>/<summary> accordion. Zero-JS, accessible,
   crawlable. Two layouts: glass cards (default) and thin lines.
   ============================================================ */

.dexso-faq {
  color: var(--fg);
  font-family: var(--font-body);
}
.dexso-faq-head {
  margin-bottom: 32px;
  max-width: 760px;
}
.dexso-faq-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.dexso-faq-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.dexso-faq-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.dexso-faq-title .dexso-accent {
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(125, 211, 240, 0.45),
    0 0 42px rgba(125, 211, 240, 0.22);
}

.dexso-faq-list {
  display: flex;
  flex-direction: column;
}
.dexso-faq--cards .dexso-faq-list {
  gap: 14px;
}
.dexso-faq--lines .dexso-faq-list {
  gap: 0;
  border-top: 1px solid var(--line);
}

/* Item = <details> */
.dexso-faq-item {
  position: relative;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.dexso-faq--cards .dexso-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
}
.dexso-faq--cards .dexso-faq-item:hover,
.dexso-faq--cards .dexso-faq-item[open] {
  border-color: rgba(125, 211, 240, 0.35);
  background: rgba(255, 255, 255, 0.04);
}
.dexso-faq--lines .dexso-faq-item {
  border-bottom: 1px solid var(--line);
}

/* Summary (the clickable question row) */
.dexso-faq-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  cursor: none; /* theme uses custom cursor */
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}
.dexso-faq--lines .dexso-faq-summary {
  padding: 22px 0;
}
/* Strip the default disclosure triangle in all browsers */
.dexso-faq-summary::-webkit-details-marker {
  display: none;
}
.dexso-faq-summary::marker {
  content: '';
}
.dexso-faq-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dexso-faq-q {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.dexso-faq-item[open] .dexso-faq-q {
  color: var(--accent);
}

/* +/- icon (CSS-only, rotates on open) */
.dexso-faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.dexso-faq-icon::before,
.dexso-faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--fg-dim);
  transform-origin: center;
  transition: transform 0.3s var(--ease), background-color 0.25s ease;
}
.dexso-faq-icon::before {
  transform: translate(-50%, -50%);
}
.dexso-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.dexso-faq-item:hover .dexso-faq-icon::before,
.dexso-faq-item:hover .dexso-faq-icon::after {
  background: var(--accent);
}
.dexso-faq-item[open] .dexso-faq-icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
  background: var(--accent);
}
.dexso-faq-item[open] .dexso-faq-icon::after {
  transform: translate(-50%, -50%) rotate(180deg);
  opacity: 0;
  background: var(--accent);
}

/* Answer panel */
.dexso-faq-a {
  padding: 0 26px 24px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-dim);
  max-width: 720px;
}
.dexso-faq--lines .dexso-faq-a {
  padding: 0 0 26px;
}
.dexso-faq-a > * + * {
  margin-top: 0.9em;
}
.dexso-faq-a p {
  margin: 0;
}
.dexso-faq-a a {
  color: var(--accent);
  border-bottom: 1px solid rgba(125, 211, 240, 0.35);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.dexso-faq-a a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.dexso-faq-a ul,
.dexso-faq-a ol {
  margin: 0;
  padding-left: 20px;
}
.dexso-faq-a code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
}

/* Subtle open/close glide — CSS `content-visibility: auto` friendly */
.dexso-faq-item[open] .dexso-faq-a {
  animation: dexso-faq-slide 0.28s var(--ease);
}
@keyframes dexso-faq-slide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dexso-faq-item[open] .dexso-faq-a,
  .dexso-faq-icon::before,
  .dexso-faq-icon::after {
    animation: none;
    transition: none;
  }
}

@media (max-width: 720px) {
  .dexso-faq-summary {
    padding: 18px 20px;
    gap: 16px;
  }
  .dexso-faq-a {
    padding: 0 20px 20px;
    font-size: 15px;
  }
  .dexso-faq-q {
    font-size: 17px;
  }
}

/* ============================================================
   1.3.3 — Dexso Divider widget
   ------------------------------------------------------------
   Thin fading separator line, 3 directions (ltr / rtl / center),
   3 color presets, 3 intensity levels. Gradient is inlined per
   instance by the widget's render() so users can change color +
   intensity without a stylesheet rebuild.
   ============================================================ */

.dexso-divider-wrap {
  display: block;
  width: 100%;
  line-height: 0;
  font-size: 0;
}
.dexso-divider {
  display: inline-block;
  width: 100%;
  height: 1px;
  vertical-align: middle;
  /* background is injected inline per direction/color/intensity */
}

/* ============================================================
   1.3.8 — Footer widget area (dexso-footer-widgets)
   ------------------------------------------------------------
   Optional sidebar rendered above the footer-grid columns when
   the user has placed at least one widget in Appearance → Widgets
   → "Footer Widgets". Kept visually light so it sits cleanly on
   top of the existing column block without fighting the footer
   nav typography.
   ============================================================ */

.footer-widgets {
  max-width: 1280px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 2.5rem;
}

.dexso-footer-widget {
  color: var(--text, #e8e8ef);
  font-size: 0.95rem;
  line-height: 1.55;
}

.dexso-footer-widget-title {
  color: var(--accent, #4fe3ff);
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.8rem;
}

.dexso-footer-widget a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dexso-footer-widget a:hover {
  color: var(--accent, #4fe3ff);
  border-bottom-color: currentColor;
}

.dexso-footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dexso-footer-widget li + li {
  margin-top: 0.35rem;
}

/* Gracefully shrink on small screens — single column under 640px. */
@media (max-width: 640px) {
  .footer-widgets {
    grid-template-columns: 1fr;
    padding: 0 1.5rem 2rem;
    margin-bottom: 2rem;
  }
}

/* ============================================================
   1.3.9 — Accessibility + mobile navigation
   ------------------------------------------------------------
   Adds three things the 1.3.8 nav was missing:
     1. A visible-on-focus "Skip to content" link (WCAG 2.4.1
        Bypass Blocks).
     2. A hamburger toggle button that appears below 900px.
     3. A slide-in drawer for .nav-links when the toggle is
        pressed, with body-scroll lock and a focus ring on the
        drawer for keyboard users.
   No colours are baked in outside of var() — so the existing
   brand-color custom properties (--accent, --bg) drive the
   look, and anything the 1.3.9 Brand Colors Customizer section
   overrides also flows through these styles automatically.
   ============================================================ */

/* --- Skip link ---------------------------------------------- */
.dexso-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-150%);
  z-index: 10000;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: transform 0.2s var(--ease);
}
.dexso-skip-link:focus,
.dexso-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* Make <main> focus-ring-free when targeted by the skip link —
   the user asked the browser to take them there; a ring would be
   noise. */
#dexso-main:focus {
  outline: none;
}

/* --- Hamburger button --------------------------------------- */
.nav-toggle {
  display: none; /* hidden on desktop */
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.nav-toggle-bar {
  display: block;
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--fg);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), top 0.25s var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav-toggle-bar:nth-child(3) { top: 28px; }

/* Pressed/open: bars morph into an X. */
.nav.is-open .nav-toggle-bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.nav.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav-toggle-bar:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* --- Mobile drawer (below 900px) ---------------------------- */
@media (max-width: 900px) {
  .nav {
    padding: 20px 24px;
  }
  .nav-toggle {
    display: block;
    order: 3; /* keep to the right of the brand */
  }

  /* Drawer defaults: off-screen, full-height sheet covering the
     viewport, body scroll can continue behind while drawer is
     closed. */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 28px 32px;
    background: var(--bg-2, var(--bg));
    border-left: 1px solid var(--line-strong);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  }

  .nav-links li:not(:last-child)::after {
    /* Remove the vertical glow separator inside the drawer — it
       was designed for horizontal layout. */
    display: none;
  }
  .nav-links li + li {
    border-top: 1px solid var(--line);
  }
  .nav-links li {
    padding: 0;
  }
  .nav-links a {
    display: block;
    padding: 18px 4px;
    font-size: 14px;
  }

  .nav.is-open .nav-links {
    transform: translateX(0);
  }

  /* CTA stays visible in the nav bar but compresses. */
  .nav-cta {
    padding: 10px 16px;
    font-size: 10px;
  }

  /* Prevent background scroll while drawer is open. The body
     class is toggled by main.js. */
  body.dexso-nav-open {
    overflow: hidden;
  }
}

/* --- Global focus-visible baseline -------------------------- */
/* Before 1.3.9 most interactive elements relied on :hover only,
   which is invisible to keyboard users. Add a consistent focus
   ring that doesn't disturb hover-driven interactions. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Inside the story drawer / side panel, scale ring down so it
   doesn't clip against tight surface borders. */
.side-panel *:focus-visible,
.nav-links a:focus-visible {
  outline-offset: 2px;
}

/* ============================================================
   ACCOUNT SHELL — clean WooCommerce My-Account on Elementor
   ============================================================
   Add the CSS class "dexso-account-shell" to any Elementor page
   that embeds [woocommerce_my_account]. The WC sidebar
   (Dashboard / Orders / Downloads / Addresses / Logout) is
   hidden and the content column stretches to full width, so
   each endpoint URL — /my-account/, /my-account/orders/,
   /my-account/edit-account/, /my-account/edit-address/ — looks
   like its own standalone, branded page.

   How to use:
     1. In Elementor, edit the page → Settings → Advanced →
        CSS Classes → add: dexso-account-shell
     2. Embed the shortcode [woocommerce_my_account]
     3. Link your menu items to the endpoint URLs above.

   Scoped selectors only. No !important. Safe to ship globally. */

.dexso-account-shell .woocommerce-MyAccount-navigation {
  display: none;
}

.dexso-account-shell .woocommerce-MyAccount-content {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}

.dexso-account-shell .woocommerce-account .woocommerce {
  display: block;
}

.dexso-account-shell .woocommerce-account .entry-content > .woocommerce {
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   SHOP LOCKDOWN — password gate form
   ============================================================
   Rendered by inc/shop-lockdown.php when Shop Access Mode is
   set to "Password" and the visitor has no valid unlock cookie.
   Intentionally neutral so it works on any brand background. */

.dexso-lockdown {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  background: var(--bg, #0a0e14);
  color: var(--fg, #eef2f7);
  font-family: inherit;
}

.dexso-lockdown__card {
  width: 100%;
  max-width: 440px;
  padding: 40px 36px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--bg-2, #0f141c);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  text-align: left;
}

.dexso-lockdown__eyebrow {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent, #4aa8ff);
  margin: 0 0 14px;
}

.dexso-lockdown__title {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 10px;
  font-weight: 600;
}

.dexso-lockdown__lede {
  margin: 0 0 24px;
  color: var(--fg-dim, #98a4b3);
  font-size: 15px;
  line-height: 1.55;
}

.dexso-lockdown__field {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  font: inherit;
  margin-bottom: 14px;
}

.dexso-lockdown__field:focus {
  outline: 2px solid var(--accent, #4aa8ff);
  outline-offset: 2px;
}

.dexso-lockdown__submit {
  display: inline-block;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #4aa8ff);
  color: #061018;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.dexso-lockdown__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.dexso-lockdown__error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255, 70, 70, 0.1);
  color: #ff7b7b;
  font-size: 13px;
}

.dexso-lockdown__apply {
  margin-top: 18px;
  font-size: 13px;
  color: var(--fg-mute, #5b6675);
}

.dexso-lockdown__apply a {
  color: var(--accent, #4aa8ff);
  text-decoration: none;
}

.dexso-lockdown__apply a:hover {
  text-decoration: underline;
}

/* ============================================================
   LOCKDOWN — embedded wp_login_form() inside the gate card
   ============================================================
   wp_login_form() emits #dexso-lockdown-login with nested
   paragraphs. Style inputs and the submit to match the card. */

#dexso-lockdown-login {
  margin: 0;
}

#dexso-lockdown-login p {
  margin: 0 0 12px;
}

#dexso-lockdown-login label {
  display: block;
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  margin-bottom: 4px;
}

#dexso-lockdown-login input[type="text"],
#dexso-lockdown-login input[type="password"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg, #eef2f7);
  font: inherit;
  margin-top: 4px;
}

#dexso-lockdown-login input[type="text"]:focus,
#dexso-lockdown-login input[type="password"]:focus {
  outline: 2px solid var(--accent, #4aa8ff);
  outline-offset: 2px;
}

#dexso-lockdown-login .login-remember {
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
}

#dexso-lockdown-login .login-remember label {
  display: inline;
  margin: 0;
  color: inherit;
}

#dexso-lockdown-login input[type="submit"] {
  display: inline-block;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #4aa8ff);
  color: #061018;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#dexso-lockdown-login input[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ============================================================
   FORMS — shared styles for [dexso_b2b_apply], [dexso_register],
   [dexso_login], [dexso_contact]
   ============================================================
   BEM-scoped under .dexso-form so these only apply to shortcode
   output and never leak into Elementor widgets or WooCommerce
   native forms. Inherits brand colors through CSS custom props. */

.dexso-form {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  background: var(--bg-2, #0f141c);
  color: var(--fg, #eef2f7);
  font-size: 15px;
}

.dexso-form h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
}

.dexso-form p {
  margin: 0 0 16px;
  line-height: 1.6;
}

.dexso-form__row {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.dexso-form__row--two {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 560px) {
  .dexso-form__row--two {
    grid-template-columns: 1fr;
  }
}

.dexso-form__row label {
  display: block;
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dexso-form__row label > span {
  display: block;
  margin-bottom: 6px;
}

.dexso-form__row input[type="text"],
.dexso-form__row input[type="email"],
.dexso-form__row input[type="tel"],
.dexso-form__row input[type="url"],
.dexso-form__row input[type="password"],
.dexso-form__row textarea,
.dexso-form__row select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg, #eef2f7);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.dexso-form__row input:focus,
.dexso-form__row textarea:focus,
.dexso-form__row select:focus {
  outline: 2px solid var(--accent, #4aa8ff);
  outline-offset: 2px;
  border-color: transparent;
}

.dexso-form__row small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-mute, #5b6675);
  text-transform: none;
  letter-spacing: 0;
}

.dexso-form__submit {
  display: inline-block;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #4aa8ff);
  color: #061018;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.dexso-form__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.dexso-form__error {
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: rgba(255, 70, 70, 0.08);
  border: 1px solid rgba(255, 70, 70, 0.25);
  color: #ff9090;
  font-size: 14px;
}

.dexso-form__error strong {
  display: block;
  margin-bottom: 6px;
}

.dexso-form__error ul {
  margin: 0;
  padding-left: 18px;
}

.dexso-form__fine {
  margin-top: 14px;
  font-size: 12px;
  color: var(--fg-mute, #5b6675);
  line-height: 1.5;
}

.dexso-form__fine a {
  color: var(--accent, #4aa8ff);
  text-decoration: none;
}

.dexso-form__fine a:hover {
  text-decoration: underline;
}

.dexso-form--success,
.dexso-form--notice {
  text-align: left;
}

.dexso-form--success {
  border-color: rgba(125, 211, 240, 0.35);
  background: rgba(125, 211, 240, 0.08);
}

/* Scope the wp_login_form styling *inside* .dexso-form--login so
   it matches the rest of the form shortcodes. */
.dexso-form--login #dexso-login {
  margin: 0;
}

.dexso-form--login #dexso-login p {
  margin: 0 0 14px;
}

.dexso-form--login #dexso-login label {
  display: block;
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.dexso-form--login #dexso-login input[type="text"],
.dexso-form--login #dexso-login input[type="password"] {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg, #eef2f7);
  font: inherit;
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
}

.dexso-form--login #dexso-login input[type="submit"] {
  display: inline-block;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #4aa8ff);
  color: #061018;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.dexso-form--login #dexso-login .login-remember {
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  text-transform: none;
  letter-spacing: 0;
}

.dexso-form--login #dexso-login .login-remember label {
  display: inline;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   FORM — checkbox + public-fields (B2B apply opt-in, 1.3.12+)
   ============================================================ */

.dexso-form__row--checkbox {
  margin-top: 8px;
}

.dexso-form__checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.dexso-form__checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent, #7dd3f0);
}

.dexso-form__checkbox span {
  flex: 1;
  font-size: 14px;
  color: var(--fg, #eef2f7);
  text-transform: none;
  letter-spacing: 0;
}

.dexso-form__checkbox small {
  width: 100%;
  padding-left: 28px;
}

.dexso-form__public-fields {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}

.dexso-form__public-fields[hidden] {
  display: none;
}

/* ============================================================
   PARTNERS DIRECTORY — [dexso_partners] shortcode (1.3.12+)
   ============================================================
   CSS-grid card layout. Column count driven by the custom
   property --dexso-partners-cols set inline by the shortcode.
   Cards use the same glass-card aesthetic as the lockdown gate. */

.dexso-partners {
  margin: 0 auto;
  max-width: 1200px;
}

.dexso-partners--empty {
  text-align: center;
  color: var(--fg-dim, #98a4b3);
  padding: 48px 20px;
}

.dexso-partners__grid {
  display: grid;
  grid-template-columns: repeat(var(--dexso-partners-cols, 3), 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .dexso-partners__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .dexso-partners__grid {
    grid-template-columns: 1fr;
  }
}

.dexso-partner {
  padding: 28px 24px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--bg-2, #0f141c);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dexso-partner:hover {
  border-color: var(--accent, #7dd3f0);
  box-shadow: 0 8px 30px rgba(125, 211, 240, 0.06);
}

.dexso-partner__logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}

.dexso-partner__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dexso-partner__monogram {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 22px;
  color: var(--accent, #7dd3f0);
  letter-spacing: 0.05em;
}

.dexso-partner__name {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}

.dexso-partner__location {
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  margin: 0 0 10px;
}

.dexso-partner__links {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.dexso-partner__links li {
  margin-bottom: 4px;
}

.dexso-partner__links a {
  color: var(--accent, #7dd3f0);
  text-decoration: none;
}

.dexso-partner__links a:hover {
  text-decoration: underline;
}

/* ============================================================
   WOOCOMMERCE MY ACCOUNT — Dexso dark-theme skin (1.3.13+)
   ============================================================
   Themes the WC login + register forms, My Account nav and
   content to match the Dexso ambient shell. Scoped to
   .woocommerce-account so it only applies on the My Account
   page. No !important. */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin-bottom: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg-dim, #98a4b3);
  transition: background 0.15s, color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg, #eef2f7);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: rgba(125, 211, 240, 0.08);
  color: var(--accent, #7dd3f0);
}

/* Login + Register dual-column form */
.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 768px) {
  .woocommerce-account .u-columns {
    grid-template-columns: 1fr;
  }
}

.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
  padding: 32px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--bg-2, #0f141c);
}

.woocommerce-account .u-columns h2 {
  font-size: 22px;
  margin: 0 0 20px;
  font-weight: 600;
}

/* WC form fields — dark glass inputs */
.woocommerce-account .woocommerce-form label,
.woocommerce-account .woocommerce-EditAccountForm label {
  display: block;
  font-size: 13px;
  color: var(--fg-dim, #98a4b3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.woocommerce-account .woocommerce-form .woocommerce-Input,
.woocommerce-account .woocommerce-form .input-text,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Input,
.woocommerce-account .woocommerce-EditAccountForm .input-text {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg, #eef2f7);
  font: inherit;
  font-size: 15px;
}

.woocommerce-account .woocommerce-form .woocommerce-Input:focus,
.woocommerce-account .woocommerce-form .input-text:focus,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Input:focus,
.woocommerce-account .woocommerce-EditAccountForm .input-text:focus {
  outline: 2px solid var(--accent, #7dd3f0);
  outline-offset: 2px;
  border-color: transparent;
}

.woocommerce-account .woocommerce-form .form-row {
  margin-bottom: 16px;
}

/* WC buttons */
.woocommerce-account .woocommerce-form .woocommerce-button,
.woocommerce-account .woocommerce-form button[type="submit"],
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-Button {
  display: inline-block;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #7dd3f0);
  color: #061018;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.woocommerce-account .woocommerce-form .woocommerce-button:hover,
.woocommerce-account .woocommerce-form button[type="submit"]:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-Button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* WC messages */
.woocommerce-account .woocommerce-message {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(125, 211, 240, 0.08);
  border-left: 3px solid var(--accent, #7dd3f0);
  color: var(--fg, #eef2f7);
  margin-bottom: 24px;
}

.woocommerce-account .woocommerce-error {
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(255, 70, 70, 0.08);
  border-left: 3px solid #ff7b7b;
  color: #ff9090;
  margin-bottom: 24px;
  list-style: none;
}

/* Lost password link */
.woocommerce-account .woocommerce-LostPassword a,
.dexso-wc-b2b-link a {
  color: var(--accent, #7dd3f0);
  font-size: 13px;
}

.dexso-wc-b2b-link {
  margin-top: 14px;
  font-size: 13px;
  color: var(--fg-mute, #5b6675);
}

/* Remember me checkbox */
.woocommerce-account .woocommerce-form .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--fg-dim, #98a4b3);
  text-transform: none;
  letter-spacing: 0;
}

/* Partner listing description in My Account */
.dexso-wc-description {
  color: var(--fg-dim, #98a4b3);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.dexso-wc-description a {
  color: var(--accent, #7dd3f0);
}

/* My Account — disabled input styling */
.woocommerce-account .woocommerce-EditAccountForm input:disabled,
.woocommerce-account .woocommerce-EditAccountForm input[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.woocommerce-account .woocommerce-EditAccountForm small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--fg-mute, #5b6675);
}

/* ============================================================
   Dexso YouTube lite-embed (click-to-play poster)       @since 1.3.18
   Used in product descriptions + journal posts. Keeps page fast
   by not loading YouTube iframe until user clicks through.
   ============================================================ */

.dexso-yt-lite {
  max-width: 720px;
  margin: 28px auto;
}

.dexso-yt-lite h3 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: .02em;
  text-align: center;
  color: var(--fg, #e9edf2);
}

.dexso-yt-lite__link {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  transition: transform .25s ease, box-shadow .25s ease;
}

.dexso-yt-lite__link:hover,
.dexso-yt-lite__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 56px rgba(0, 220, 255, .25);
  outline: none;
}

.dexso-yt-lite__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.dexso-yt-lite__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 62px;
  background: rgba(0, 0, 0, .72);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .25s ease;
  pointer-events: none;
}

.dexso-yt-lite__link:hover .dexso-yt-lite__play,
.dexso-yt-lite__link:focus-visible .dexso-yt-lite__play {
  background: rgba(0, 220, 255, .92);
  transform: translate(-50%, -50%) scale(1.08);
}

.dexso-yt-lite__play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 6px;
}

.dexso-yt-lite__link:hover .dexso-yt-lite__play::after {
  border-left-color: #0b0e13;
}

.dexso-yt-lite__caption {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  opacity: .7;
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .dexso-yt-lite__play {
    width: 64px;
    height: 46px;
    border-radius: 10px;
  }
  .dexso-yt-lite__play::after {
    border-left-width: 16px;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
}