/* ============================================================

   voxrender WordPress Theme — Main Stylesheet

   Design: Ultra-minimal, dark-mode SaaS / Architecture AI

   ============================================================ */



/* ---------- Google Fonts ---------- */

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



/* ---------- CSS Variables ---------- */

:root {

  --bg:          #0a0a0a;

  --bg2:         #111111;

  --bg3:         #181818;

  --border:      rgba(255,255,255,0.08);

  --border-mid:  rgba(255,255,255,0.12);

  --text:        #f0f0f0;

  --text-muted:  #888;

  --text-dim:    #555;

  --accent:      #3b82f6;

  --accent-glow: rgba(59,130,246,0.18);

  --accent-dark: #1d4ed8;

  --radius:      12px;

  --radius-sm:   8px;

  --font-sans:   'Inter', system-ui, sans-serif;

  --font-display:'Syne', sans-serif;

  --max-w:       1200px;

  --transition:  0.2s ease;

}



/* ---------- Reset & Base ---------- */

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



html {

  scroll-behavior: smooth;

  overflow-x: hidden; /* prevent any child from creating horizontal scroll */

}



body {

  font-family: var(--font-sans);

  background: var(--bg);

  color: var(--text);

  font-size: 15px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

  width: 100%;

  max-width: 100vw;

}



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

img, video { max-width: 100%; display: block; }

ul { list-style: none; }

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



.container {

  max-width: var(--max-w);

  margin: 0 auto;

  padding: 0 24px;

}



/* ============================================================

   HEADER / NAV

   ============================================================ */



/* Noise texture overlay (pure CSS, no image file needed) */

@keyframes header-shimmer {

  0%   { background-position: 0% 50%; }

  50%  { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



.site-header {

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 1000;

  padding: 0 24px;

  height: 64px;

  display: flex;

  align-items: center;



  /* Apple iOS style glass — base */

  background: rgba(18, 18, 18, 0.45);

  backdrop-filter: blur(30px) saturate(180%);

  -webkit-backdrop-filter: blur(30px) saturate(180%);



  /* Subtle bottom border */

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);



  /* Smooth multi-property transition */

  transition:

    background       0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),

    backdrop-filter  0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),

    border-color     0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),

    box-shadow       0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



/* WP Admin Bar clearance for fixed header */

body.admin-bar .site-header {

  top: 32px;

}

@media (max-width: 782px) {

  body.admin-bar .site-header {

    top: 46px;

  }

}



/* Noise grain layer — pseudo-element overlay */

.site-header::before {

  content: '';

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: -1;

  opacity: 0;

  transition: opacity 0.4s ease;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");

  background-repeat: repeat;

  border-radius: 0;

}



/* Glowing top accent line — pseudo-element */

.site-header::after {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 1px;

  pointer-events: none;

  background: linear-gradient(

    90deg,

    transparent 0%,

    rgba(59, 130, 246, 0) 15%,

    rgba(59, 130, 246, 0.5) 50%,

    rgba(59, 130, 246, 0) 85%,

    transparent 100%

  );

  opacity: 0;

  transition: opacity 0.5s ease;

}



/* ── Scrolled state: full premium glass ── */

.site-header.scrolled {

  /* Apple iOS style premium glass — scrolled */

  background: rgba(28, 28, 30, 0.65);

  backdrop-filter: blur(50px) saturate(220%) brightness(1.05);

  -webkit-backdrop-filter: blur(50px) saturate(220%) brightness(1.05);



  /* Crisp inner border */

  border-bottom-color: rgba(255, 255, 255, 0.15);



  /* Multi-layer shadow: ambient + directional + color bloom */

  box-shadow:

    0 1px 0   0    rgba(255, 255, 255, 0.06) inset,

    0 8px 32px -4px rgba(0, 0, 0, 0.55),

    0 2px 8px  -1px rgba(0, 0, 0, 0.35),

    0 0   48px -8px rgba(59, 130, 246, 0.08);

}



/* Activate noise grain on scroll */

.site-header.scrolled::before {

  opacity: 1;

}



/* Activate top glow line on scroll */

.site-header.scrolled::after {

  opacity: 1;

}



.header-inner {

  max-width: var(--max-w);

  margin: 0 auto;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 32px;

}



/* Logo */

.site-logo {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  text-decoration: none;

}



.site-logo .logo-svg {

  height: 28px;

  width: auto;

}



.site-logo .logo-text {

  font-family: var(--font-display);

  font-size: 18px;

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--text);

}



/* Primary Nav — list-based with dropdown support */

.primary-nav {

  display: flex;

  align-items: center;

}



.primary-nav .nav-menu,

.header-cta .nav-menu {

  display: flex;

  align-items: center;

  gap: 2px;

  list-style: none;

  margin: 0;

  padding: 0;

}



/* Top-level <li> */

.primary-nav .nav-menu > li,

.header-cta .nav-menu > li {

  position: relative;

}



/* All nav links */

.primary-nav a,

.header-cta .nav-menu a {

  display: flex;

  align-items: center;

  gap: 4px;

  font-size: 13.5px;

  font-weight: 400;

  color: var(--text-muted);

  padding: 6px 12px;

  border-radius: var(--radius-sm);

  transition: color var(--transition), background var(--transition);

  white-space: nowrap;

  text-decoration: none;

}



.primary-nav a:hover,

.primary-nav a.current-menu-item,

.primary-nav a.current-menu-ancestor,

.header-cta .nav-menu a:hover,

.header-cta .nav-menu a.current-menu-item,

.header-cta .nav-menu a.current-menu-ancestor {

  color: var(--text);

  background: transparent;

}



/* Chevron icon */

.nav-chevron {

  width: 13px;

  height: 13px;

  flex-shrink: 0;

  color: var(--text-dim);

  transition: transform 0.22s ease, color 0.22s ease;

}



.has-dropdown:hover > a .nav-chevron,

.has-dropdown:focus-within > a .nav-chevron {

  transform: rotate(180deg);

  color: var(--text-muted);

}



/* ——— Dropdown submenu panel ——— */

.primary-nav .sub-menu,

.header-cta .sub-menu {

  position: absolute;

  top: calc(100% + 10px);

  left: 0;

  min-width: 200px;

  background: rgba(18,18,18,0.96);

  border: 1px solid var(--border-mid);

  border-radius: var(--radius);

  padding: 8px 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: all var(--transition);

  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  z-index: 100;

}



/* For CTA right-align dropdown */

.header-cta .sub-menu {

  left: auto;

  right: 0;

}



/* Show submenu on hover / focus-within / mobile tap */

.has-dropdown:hover > .sub-menu,

.has-dropdown:focus-within > .sub-menu,

.has-dropdown.submenu-open > .sub-menu,

.header-cta .has-dropdown:hover > .sub-menu,

.header-cta .has-dropdown:focus-within > .sub-menu,

.header-cta .has-dropdown.submenu-open > .sub-menu {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);

}



/* Submenu items */

.primary-nav .sub-menu li {

  position: relative;

}



.primary-nav .sub-menu a,

.primary-nav .sub-menu .sub-menu-link,

.header-cta .sub-menu a,

.header-cta .sub-menu .sub-menu-link {

  display: flex;

  align-items: center;

  width: 100%;

  font-size: 13px;

  font-weight: 400;

  color: var(--text-muted);

  padding: 9px 14px;

  border-radius: var(--radius-sm);

  transition: color var(--transition), background var(--transition);

  white-space: nowrap;

}



.primary-nav .sub-menu a:hover,

.primary-nav .sub-menu .sub-menu-link:hover,

.primary-nav .sub-menu a.current-menu-item,

.header-cta .sub-menu a:hover,

.header-cta .sub-menu .sub-menu-link:hover,

.header-cta .sub-menu a.current-menu-item {

  color: var(--text);

  background: rgba(255,255,255,0.07);

}



/* Connector bridge so submenu doesn't disappear when moving cursor */

.has-dropdown::after {

  content: '';

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  height: 12px;

}



/* Custom logo image sizing — header */

.site-logo .custom-logo {

  height: 32px;

  width: auto;

  max-width: 140px;

  display: block;

  object-fit: contain;

  flex-shrink: 0;

}



/* Footer logo: slightly smaller */

.footer-brand .site-logo .custom-logo {

  height: 28px;

  max-width: 120px;

}



/* Footer logo: flex row so img + text sit side-by-side */

.footer-brand .site-logo {

  display: inline-flex;

  align-items: center;

}



/* Header CTA */

.header-cta {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  height: 100%;

}



.header-cta .nav-menu {

  margin: 0 !important;

  padding: 0 !important;

  display: flex;

  align-items: center;

}



html body .site-header .btn-primary,

html body .site-header .btn-ghost,

.site-header a.btn-primary,

.site-header a.btn-ghost,

.header-cta a.btn-primary,

.header-cta a.btn-ghost {

  padding-top: 16px !important;

  padding-bottom: 10px !important;

  padding-left: 24px !important;

  padding-right: 24px !important;

  line-height: 1 !important;

  display: inline-block !important;

  height: auto !important;

}



.btn-ghost {

  font-size: 13.5px;

  font-weight: 500;

  line-height: 1.5 !important;

  color: var(--text-muted);

  padding: 12px 16px 8px 16px !important;

  border-radius: var(--radius-sm);

  transition: color var(--transition), background var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.06); }



.btn-primary {

  font-size: 13.5px;

  font-weight: 600;

  line-height: 1.5 !important;

  color: #fff;

  background: var(--accent);

  padding: 12px 20px !important;

  border-radius: var(--radius-sm);

  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



.btn-primary:hover {

  background: #2563eb;

  box-shadow: 0 0 0 4px var(--accent-glow);

  transform: translateY(-1px);

}



/* Mobile hamburger */

.menu-toggle {

  display: none;

  flex-direction: column;

  gap: 5px;

  padding: 8px;

  cursor: pointer;

}



.menu-toggle span {

  display: block;

  width: 22px;

  height: 1.5px;

  background: var(--text-muted);

  transition: all 0.3s;

}



/* ============================================================

   HERO SECTION

   ============================================================ */

.hero-section {

  padding-top: 140px;

  padding-bottom: 80px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



/* Subtle radial glow behind hero */

.hero-section::before {

  content: '';

  position: absolute;

  top: -80px; left: 50%;

  transform: translateX(-50%);

  width: 700px; height: 700px;

  background: radial-gradient(circle, rgba(59,130,246,0.10) 0%, transparent 70%);

  pointer-events: none;

  z-index: 0;

}



.hero-section .container { position: relative; z-index: 1; }



/* Eyebrow pill */

.hero-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  font-weight: 500;

  color: var(--text-muted);

  background: rgba(255,255,255,0.05);

  border: 1px solid var(--border-mid);

  border-radius: 100px;

  padding: 5px 14px;

  margin-bottom: 28px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.hero-eyebrow::before {

  content: '';

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--accent);

  box-shadow: 0 0 8px var(--accent);

}



/* Hero heading */

.hero-title {

  font-family: var(--font-display);

  font-size: clamp(40px, 6vw, 72px);

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: -0.03em;

  color: var(--text);

  margin-bottom: 24px;

}



.hero-title .line-muted {

  color: var(--text-dim);

  display: block;

}



.hero-subtitle {

  font-size: 16px;

  color: var(--text-muted);

  max-width: 520px;

  margin: 0 auto 36px;

  line-height: 1.7;

}



/* Hero CTA group */

.hero-cta-group {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 16px;

}



.btn-hero-primary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 14.5px;

  font-weight: 500;

  color: #fff;

  background: var(--accent);

  padding: 12px 24px;

  border-radius: var(--radius-sm);

  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);

}



.btn-hero-primary:hover {

  background: #2563eb;

  box-shadow: 0 0 0 4px var(--accent-glow), 0 8px 24px rgba(59,130,246,0.25);

  transform: translateY(-2px);

}



.hero-meta {

  font-size: 12.5px;

  color: var(--text-dim);

  margin-bottom: 64px;

}



.hero-meta span { margin: 0 6px; }



/* Hero image / video frame */

.hero-media-wrap {

  position: relative;

  border-radius: var(--radius);

  overflow: hidden;

  border: 1px solid var(--border);

  background: var(--bg2);

  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px var(--border);

  max-width: 1000px;

  margin: 0 auto;

}



.hero-media-wrap img,

.hero-media-wrap video {

  width: 100%;

  display: block;

  border-radius: var(--radius);

}



/* Trusted by bar */

.trusted-bar {

  margin-top: 60px;

  padding: 20px 0;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

}



.trusted-bar-label {

  font-size: 11.5px;

  color: var(--text-dim);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 16px;

}



.trusted-logos {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 32px;

}



.trusted-logos span {

  font-family: var(--font-display);

  font-size: 13px;

  font-weight: 600;

  color: var(--text-dim);

  letter-spacing: 0.03em;

  transition: color var(--transition);

}



.trusted-logos span:hover { color: var(--text-muted); }



/* ============================================================

   SECTION DEFAULTS

   ============================================================ */

section { padding: 100px 0; }



.section-label {

  display: inline-block;

  font-size: 11.5px;

  font-weight: 500;

  color: var(--accent);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 16px;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(28px, 4vw, 48px);

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: var(--text);

  margin-bottom: 16px;

}



.section-desc {

  font-size: 15px;

  color: var(--text-muted);

  max-width: 560px;

  line-height: 1.7;

}



/* ============================================================

   FEATURED WORKFLOWS / GRID SECTION

   ============================================================ */

.workflows-section {

  background: var(--bg);

  border-top: 1px solid var(--border);

}



.section-header-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 48px;

  gap: 24px;

  flex-wrap: wrap;

}



.link-arrow {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  color: var(--text-muted);

  padding: 8px 14px;

  border: 1px solid var(--border-mid);

  border-radius: var(--radius-sm);

  transition: color var(--transition), border-color var(--transition), background var(--transition);

  white-space: nowrap;

}



.link-arrow:hover {

  color: var(--text);

  border-color: rgba(255,255,255,0.22);

  background: rgba(255,255,255,0.04);

}



.link-arrow svg { width: 14px; height: 14px; }



/* ============================================================

   STUDIO SECTION (dark gradient card)

   ============================================================ */

.studio-section {

  background: var(--bg);

}



.studio-card {

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: 20px;

  overflow: hidden;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  min-height: 480px;

}



.studio-card-content {

  padding: 60px 56px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.studio-card-media {

  position: relative;

  background: var(--bg3);

  overflow: hidden;

}



.studio-card-media img {

  width: 100%; height: 100%;

  object-fit: cover;

  opacity: 0.9;

  transition: opacity 0.4s, transform 0.6s;

}



.studio-card:hover .studio-card-media img {

  opacity: 1;

  transform: scale(1.02);

}



.studio-card-content .section-label { margin-bottom: 12px; }

.studio-card-content .section-title { font-size: clamp(22px, 3vw, 36px); margin-bottom: 16px; }

.studio-card-content .section-desc { margin-bottom: 32px; }



.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }



.btn-outline {

  font-size: 13.5px;

  font-weight: 500;

  color: var(--text-muted);

  padding: 9px 18px;

  border-radius: var(--radius-sm);

  border: 1px solid var(--border-mid);

  transition: all var(--transition);

}



.btn-outline:hover {

  color: var(--text);

  border-color: rgba(255,255,255,0.22);

  background: rgba(255,255,255,0.04);

}



/* ============================================================

   TWO MODES SECTION

   ============================================================ */

.modes-section {

  background: var(--bg);

  border-top: 1px solid var(--border);

}



.modes-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  margin-top: 56px;

}



.mode-card {

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

  transition: border-color var(--transition), box-shadow var(--transition);

}



.mode-card:hover {

  border-color: var(--border-mid);

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);

}



.mode-card-media {

  aspect-ratio: 16/9;

  overflow: hidden;

  background: var(--bg3);

}



.mode-card-media img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.mode-card:hover .mode-card-media img { transform: scale(1.03); }



.mode-card-body { padding: 28px 28px 32px; }



.mode-card-body h3 {

  font-family: var(--font-display);

  font-size: 20px;

  font-weight: 600;

  letter-spacing: -0.01em;

  color: var(--text);

  margin-bottom: 10px;

}



.mode-card-body p {

  font-size: 14px;

  color: var(--text-muted);

  line-height: 1.65;

}



.mode-card-body p a { color: var(--accent); }

.mode-card-body p a:hover { text-decoration: underline; }



/* ============================================================

   TOOLS SECTION

   ============================================================ */

.tools-section {

  border-top: 1px solid var(--border);

}



.tools-intro {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 48px;

  align-items: center;

  margin-bottom: 64px;

}



.tools-intro-media img {

  border-radius: var(--radius);

  border: 1px solid var(--border);

}



.tools-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



.tool-card {

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  overflow: hidden;

  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);

  cursor: pointer;

}



.tool-card:hover {

  border-color: var(--border-mid);

  transform: translateY(-3px);

  box-shadow: 0 16px 48px rgba(0,0,0,0.4);

}



.tool-card-thumb {

  aspect-ratio: 16/9;

  background: var(--bg3);

  overflow: hidden;

  position: relative;

}



.tool-card-thumb img,

.tool-card-thumb video {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.5s;

}



.tool-card:hover .tool-card-thumb img,

.tool-card:hover .tool-card-thumb video { transform: scale(1.04); }



.tool-card-body { padding: 20px; }



.tool-card-body h3 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 6px;

  letter-spacing: -0.01em;

}



.tool-card-body p {

  font-size: 12.5px;

  color: var(--text-muted);

  line-height: 1.6;

  margin-bottom: 14px;

}



.tool-link {

  font-size: 12px;

  color: var(--accent);

  font-weight: 500;

  transition: opacity var(--transition);

}



.tool-link:hover { opacity: 0.7; }



.tools-more {

  text-align: center;

  margin-top: 40px;

}



/* ============================================================

   ENTERPRISE SECTION

   ============================================================ */

.enterprise-section {

  border-top: 1px solid var(--border);

}



.enterprise-card {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0;

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: 20px;

  overflow: hidden;

}



.enterprise-card-content {

  padding: 60px 56px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.enterprise-card-media {

  background: var(--bg3);

  overflow: hidden;

}



.enterprise-card-media img {

  width: 100%; height: 100%;

  object-fit: cover;

}



/* ============================================================

   CTA BANNER SECTION

   ============================================================ */

.cta-banner-section {

  border-top: 1px solid var(--border);

}



.cta-banner {

  background: var(--bg2);

  border: 1px solid var(--border);

  border-radius: 20px;

  overflow: hidden;

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 360px;

}



.cta-banner-content {

  padding: 60px 56px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.cta-banner-media {

  background: var(--bg3);

  overflow: hidden;

}



.cta-banner-media img {

  width: 100%; height: 100%;

  object-fit: cover;

  opacity: 0.8;

}



/* ============================================================

   FAQ SECTION

   ============================================================ */

.faq-section {

  border-top: 1px solid var(--border);

}



.faq-grid {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 80px;

  align-items: start;

}



.faq-sidebar .section-title { font-size: 28px; margin-bottom: 12px; }



.faq-list { margin-top: 0; }



.faq-item {

  border-bottom: 1px solid var(--border);

}



.faq-question {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 0;

  cursor: pointer;

  font-size: 14.5px;

  font-weight: 500;

  color: var(--text);

  transition: color var(--transition);

  gap: 16px;

  width: 100%;

  text-align: left;

  background: none;

  border: none;

  color: inherit;

}



.faq-question:hover { color: var(--text); }



.faq-icon {

  flex-shrink: 0;

  width: 20px; height: 20px;

  border: 1px solid var(--border-mid);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all var(--transition);

}



.faq-icon::after {

  content: '+';

  font-size: 14px;

  color: var(--text-muted);

  line-height: 1;

}



.faq-item.open .faq-icon {

  background: var(--accent);

  border-color: var(--accent);

}



.faq-item.open .faq-icon::after {

  content: '−';

  color: #fff;

}



.faq-answer {

  display: none;

  padding: 0 0 20px;

  font-size: 13.5px;

  color: var(--text-muted);

  line-height: 1.7;

}



.faq-item.open .faq-answer { display: block; }



/* ============================================================

   FOOTER

   ============================================================ */

.site-footer {

  border-top: 1px solid var(--border);

  padding: 60px 0 40px;

  margin-top: 0;

}



.footer-inner {

  display: grid;

  grid-template-columns: 200px 1fr;

  gap: 80px;

  margin-bottom: 48px;

}



.footer-brand .site-logo {

  margin-bottom: 16px;

  display: flex;

}



.footer-brand p {

  font-size: 13px;

  color: var(--text-dim);

  line-height: 1.7;

  max-width: 220px;

}



.footer-cols {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 32px;

}



.footer-col h4 {

  font-size: 12px;

  font-weight: 600;

  color: var(--text);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 16px;

}



.footer-col ul li { margin-bottom: 10px; }



.footer-col ul li a {

  font-size: 13px;

  color: var(--text-dim);

  transition: color var(--transition);

}



.footer-col ul li a:hover { color: var(--text-muted); }



.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 24px;

  border-top: 1px solid var(--border);

  flex-wrap: wrap;

  gap: 16px;

}



.footer-bottom-left {

  font-size: 12.5px;

  color: var(--text-dim);

}



.footer-bottom-links {

  display: flex;

  gap: 20px;

  flex-wrap: wrap;

}



.footer-bottom-links a {

  font-size: 12.5px;

  color: var(--text-dim);

  transition: color var(--transition);

}



.footer-bottom-links li {

  list-style: none;

}



.footer-bottom-links a:hover { color: var(--text-muted); }







/* ============================================================

   WOOCOMMERCE / DASHBOARD FIXES (DESKTOP DEFAULT)

   ============================================================ */

.woocommerce-MyAccount-content .vox-dashboard-grid,

.vox-dashboard-grid {

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 16px !important;

  margin-bottom: 40px !important;

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}



.woocommerce-MyAccount-content .vox-dash-card,

.vox-dash-card {

  width: 100% !important;

  height: auto !important;

  max-width: none !important;

  margin: 0 !important;

  box-sizing: border-box !important;

}



.vox-account-nav-toggle {

  display: none; /* Hidden on desktop */

}



/* Hide footer on MyAccount page */

body.woocommerce-account .site-footer {

  display: none !important;

}



/* Prevent all horizontal scrolling globally */

body {

  overflow-x: hidden !important;

  width: 100% !important;

}



/* WooCommerce My Account — header clearance

   Header is fixed at 64px. Ensure title is never hidden behind it. */

/* (padding-top is set per-breakpoint in the responsive section below) */



/* ============================================================

   RESPONSIVE

   ============================================================ */

@media (min-width: 1025px) {

  .mobile-only { display: none !important; }

}



@media (max-width: 1024px) {

  .desktop-only { display: none !important; }



  /* Center the logo when nav + CTA are hidden */

  .header-inner {

    gap: 16px;

    justify-content: center;

  }

  .site-logo {

    flex-shrink: 1;   /* allow it to shrink if needed */

    justify-content: center;

  }

  .site-logo .logo-svg { height: 26px; }

  .site-logo .custom-logo { max-height: 28px; }

  html body .site-header .btn-primary,

  .site-header a.btn-primary,

  .header-cta a.btn-primary {

    padding-top: 12px !important;

    padding-bottom: 8px !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    font-size: 13px;

  }



  /* Disable header backdrop filter when menu is open to prevent fixed positioning clipping */

  body.menu-open {

    overflow: hidden !important;

    position: fixed !important;

    width: 100% !important;

    height: 100vh !important;

  }

  

  body.menu-open .site-header {

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    background: transparent !important;

  }



  body.menu-open .site-header::before,

  body.menu-open .site-header::after {

    opacity: 0 !important;

  }



  .studio-card,

  .enterprise-card,

  .cta-banner { grid-template-columns: 1fr; }



  .studio-card-media,

  .enterprise-card-media,

  .cta-banner-media { min-height: 260px; }



  .tools-grid { grid-template-columns: repeat(2, 1fr); }

  .tools-intro { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); }

  .faq-grid { grid-template-columns: 1fr; gap: 40px; }



  /* Off-canvas tablet/mobile menu — completely hidden */

  .primary-nav { display: none !important; }

  .primary-nav.open { display: none !important; }

  .header-cta .btn-ghost { display: none; }



  /* Header CTA buttons (Login / Get Started / Dashboard) — hidden on tablet & mobile */

  .header-cta {

    display: none !important;

  }



  /* Hamburger FAB — hidden on tablet & mobile */

  .menu-toggle {

    display: none !important;

  }

  .menu-toggle span {

    display: block !important;

    width: 24px !important;

    height: 2px !important;

    background: var(--text) !important;

    transition: all 0.3s !important;

  }



  /* Off-canvas nav: stay hidden even when JS adds .open */

  .primary-nav.open {

    display: none !important;

  }



  /* Thumb Zone Optimization */

  .primary-nav.open .nav-menu {

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

    margin-top: 24px;

    margin-bottom: 20px;

    width: 100%;

  }



  /* Offcanvas header for logo */

  .offcanvas-header {

    display: flex;

    align-items: center;

    width: 100%;

    margin-bottom: 24px;

    padding-bottom: 16px;

    border-bottom: 1px solid var(--border);

    /* Make sure logo doesn't overlap the absolute positioned X button */

    padding-right: 48px; 

  }

  

  .offcanvas-header .site-logo {

    padding: 0 !important;

    background: transparent !important;

    justify-content: flex-start !important;

    gap: 8px !important;

  }

  

  .offcanvas-header .site-logo:hover {

    background: transparent !important;

  }

  

  /* Fix mobile My Account padding for perfect symmetry */

  .woocommerce-account .woocommerce {

    display: flex !important;

    flex-direction: column !important;

    padding-left: 16px !important;

    padding-right: 16px !important;

    overflow: visible !important;

    width: 100% !important;

    max-width: 100vw !important;

    box-sizing: border-box !important;

  }

  .woocommerce-MyAccount-navigation {

    width: 100% !important;

    box-sizing: border-box !important;

    margin-bottom: 5px !important;

    float: none !important;

  }

  .woocommerce-MyAccount-content {

    width: 100% !important;

    box-sizing: border-box !important;

    float: none !important;

    margin-top: 0 !important;

  }

  .vox-dashboard-hero {

    padding: 24px !important;

  }

  

  /* Tablet: keep 3-column horizontal grid for dashboard cards */

  .woocommerce-MyAccount-content .vox-dashboard-grid,

  .vox-dashboard-grid {

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    flex-direction: unset !important;

    gap: 16px !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .woocommerce-MyAccount-content .vox-dash-card,

  .vox-dashboard-card,

  .vox-dash-card {

    width: 100% !important;

    min-width: 0 !important;

    flex: none !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  /* vox-dashboard-grid-v2: always 3 columns on tablet */

  .vox-dashboard-grid-v2 {

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    width: 100% !important;

  }

  

  /* Mobile My Account Sidebar Dropdown */

  .woocommerce-MyAccount-navigation {

    position: relative;

    margin-bottom: 5px !important;

    z-index: 50;

  }

  .vox-account-nav-toggle {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 14px 20px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: var(--radius);

    color: #fff;

    font-size: 14.5px;

    font-weight: 500;

    cursor: pointer;

  }

  .woocommerce-MyAccount-navigation ul {

    display: none !important;

    flex-direction: column !important;

    margin-top: 8px !important;

    background: rgba(20,20,25,1) !important;

    border: 1px solid rgba(255,255,255,0.1) !important;

    border-radius: 8px !important;

    padding: 8px 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .woocommerce-MyAccount-navigation.dropdown-open ul {

    display: flex !important;

  }

  .woocommerce-MyAccount-navigation ul li {

    margin: 0 !important;

    border: none !important;

  }

  .woocommerce-MyAccount-navigation ul li a {

    padding: 12px 20px !important;

    display: block !important;

    color: #fff !important;

    font-size: 14.5px !important;

    font-weight: 500 !important;

    background: transparent !important;

    border-radius: 0 !important;

  }

  .woocommerce-MyAccount-navigation ul li a i,

  .woocommerce-MyAccount-navigation ul li a::before,

  .woocommerce-MyAccount-navigation ul li a::after {

    display: none !important;

  }

  .woocommerce-MyAccount-navigation ul li.is-active a,

  .woocommerce-MyAccount-navigation ul li a:hover {

    color: var(--accent) !important;

    background: transparent !important;

  }



  /* When body has menu-open, we slide it in */

  body.menu-open .primary-nav.open {

    transform: translateX(0);

    opacity: 1;

  }



  /* Glassmorphic dark overlay behind the menu */

  body::after {

    content: '';

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

  }



  body.menu-open::after {

    opacity: 1;

    visibility: visible;

  }



  /* Mobile: stack nav-menu vertically */

  .primary-nav.open {

    overflow-y: auto !important;

    max-height: 100vh !important;

    padding-bottom: 160px !important; /* Ensure content is fully scrollable above bottom bar */

  }



  .primary-nav.open .nav-menu {

    flex-direction: column;

    width: 100%;

    gap: 0;

  }



  .primary-nav.open .nav-menu > li {

    width: 100%;

    border-bottom: 1px solid var(--border);

  }



  .primary-nav.open a {

    font-size: 16px;

    padding: 16px 8px;

    width: 100%;

    justify-content: space-between;

  }



  /* Mobile submenu accordion */

  .primary-nav.open .sub-menu {

    position: static;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;

    box-shadow: none;

    border: none;

    border-radius: 0;

    background: transparent;

    backdrop-filter: none;

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

    padding: 0 0 0 12px;

  }



  .primary-nav.open .has-dropdown.submenu-open > .sub-menu {

    /* max-height set inline by JS */

  }



  .primary-nav.open .sub-menu a {

    font-size: 14.5px;

    padding: 12px 8px;

  }

}



@media (max-width: 768px) {

  .site-header { padding: 0 16px; }

  .header-inner { gap: 12px; }

  .site-logo .logo-text { font-size: 16px; }

  .site-logo .logo-svg { height: 24px; }

  .site-logo .custom-logo { max-height: 26px; }

  html body .site-header .btn-primary,

  .site-header a.btn-primary,

  .header-cta a.btn-primary {

    padding-top: 10px !important;

    padding-bottom: 8px !important;

    padding-left: 14px !important;

    padding-right: 14px !important;

    font-size: 12px;

  }



  .modes-grid { grid-template-columns: 1fr; }

  .tools-grid { grid-template-columns: 1fr; }

  .footer-cols { grid-template-columns: repeat(2, 1fr); }



  .studio-card-content,

  .enterprise-card-content,

  .cta-banner-content { padding: 36px 28px; }



  section { padding: 64px 0; }

  .hero-section { padding-top: 110px; }

}





@media (max-width: 480px) {

  .site-header { padding: 0 12px; }

  .header-inner { gap: 8px; }

  .site-logo { gap: 6px; }

  .site-logo .logo-text { font-size: 15px; }

  .site-logo .logo-svg { height: 22px; }

  .site-logo .custom-logo { max-height: 24px; }

  html body .site-header .btn-primary,

  .site-header a.btn-primary,

  .header-cta a.btn-primary {

    padding-top: 8px !important;

    padding-bottom: 6px !important;

    padding-left: 12px !important;

    padding-right: 12px !important;

    font-size: 11.5px;

  }



  .footer-cols { grid-template-columns: 1fr 1fr; }

  .hero-cta-group { flex-direction: column; }

  .btn-hero-primary { width: 100%; justify-content: center; }

}



/* ============================================================

   PAGE TEMPLATE (page.php) — inner pages with shortcodes etc.

   Page title uses the SAME font + clamp() scale as .section-title

   so all pages feel visually consistent with the home page.

   ============================================================ */



/* Offset the fixed site header (64px) + possible WP admin bar (32px) */

.page-main {

  padding-top: 64px;

  min-height: 70vh;

}

/* When WP admin bar is present, push main content lower */

body.admin-bar .page-main {

  padding-top: 96px;

}



/* Title bar — same background as hero section */

.page-title-bar {

  padding: 56px 0 40px;

  border-bottom: 1px solid var(--border);

  position: relative;

  overflow: hidden;

}



/* Subtle radial glow — mirrors hero section */

.page-title-bar::before {

  content: '';

  position: absolute;

  top: -60px; left: 50%;

  transform: translateX(-50%);

  width: 600px; height: 400px;

  background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);

  pointer-events: none;

}



/* Page title — identical spec to .section-title for consistent scale */

.page-display-title {

  font-family: var(--font-display);          /* Customizer → Heading Font  */

  font-size: clamp(28px, 4vw, 48px);         /* same clamp as .section-title */

  font-weight: 700;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: var(--text);

  position: relative;

  z-index: 1;

}



/* Content area */

.page-content-area {

  padding: 48px 0 100px;

}



.page-content-area--notitle {

  padding-top: 80px;

}



/* Entry content — sensible typography defaults for WP page content */

.entry-content {

  max-width: 860px;

}



/* WooCommerce Account — full width layout (override 860px blog constraint) */

.woocommerce-account .entry-content {

  max-width: 100% !important;

}

.woocommerce-account .page-content-area .container {

  max-width: 1280px !important;

  padding: 0 32px !important;

}

/* WooCommerce Account — full width, no extra woocommerce-wrapper padding */

.woocommerce-account .woocommerce {

  padding-top: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

}



/* WooCommerce Account: page-title-bar clears the fixed header.

   64px header + 32px admin-bar = 96px. Use 120px for safety. */

.woocommerce-account .page-title-bar {

  padding-top: 120px !important;

  padding-bottom: 36px !important;

}

/* No title bar shown? page-content-area must clear the header instead. */

.woocommerce-account .page-content-area--notitle {

  padding-top: 150px !important;

}

/* With title bar: extra breathing room after the h1 */

.woocommerce-account .page-content-area {

  padding-top: 48px !important;

  padding-bottom: 80px !important;

}



/* ══════════════════════════════════════════════════════════════

   ELEMENTOR HEADER/FOOTER TEMPLATE CONTEXT

   When Elementor's header_footer builder is active, our page.php

   .page-main / .page-title-bar wrappers do NOT exist in the DOM.

   Apply header clearance + centred max-width directly to .woocommerce.

   Also override Elementor container overflow so the mobile sidebar

   max-height animation is not trapped inside a scroll clip.

   ══════════════════════════════════════════════════════════════ */



/* Target when Elementor's page template is used (server-side class) */

body.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

body.page-template-elementor_header_footer.woocommerce-account .woocommerce,

/* Target when Elementor JS has initialised (client-side class) */

body.elementor-page.woocommerce-account .woocommerce {

  /* Boxed layout: centred max-width block.

     Width/centering is owned here rather than by Elementor's container

     so the sidebar always touches the left edge of the content box. */

  max-width: 1200px !important;

  width: 100% !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding-left: 32px !important;

  padding-right: 32px !important;

  box-sizing: border-box !important;

  padding-top: 120px !important; /* clears 64px fixed header + breathing room */

}

/* Extra room when the WP admin bar is also present */

body.admin-bar.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

body.admin-bar.page-template-elementor_header_footer.woocommerce-account .woocommerce,

body.admin-bar.elementor-page.woocommerce-account .woocommerce {

  padding-top: 150px !important;

}



/* ──────────────────────────────────────────────────────────────

   ELEMENTOR OVERFLOW FIX — only on the account page

   Elementor sections/columns may have overflow:hidden set

   (either by default or via the Elementor editor's section settings).

   This traps the sidebar max-height dropdown: .is-open expands but

   the expansion is clipped by an ancestor, so "nothing appears".

   We override all known Elementor container classes to overflow:visible.

   ────────────────────────────────────────────────────────────── */

body.woocommerce-account .elementor-section,

body.woocommerce-account .elementor-container,

body.woocommerce-account .elementor-inner,

body.woocommerce-account .elementor-column,

body.woocommerce-account [class*="elementor-col-"],

body.woocommerce-account .elementor-column-wrap,

body.woocommerce-account .elementor-widget-wrap,

body.woocommerce-account .elementor-widget-container,

/* Elementor 3.x Flexbox Container */

body.woocommerce-account .e-con,

body.woocommerce-account .e-con-inner {

  overflow: visible !important;

  /* Remove any padding the Elementor editor may have set on these containers.

     Our .woocommerce box already owns all horizontal spacing via padding: 0 32px.

     Without this, Elementor's container padding stacks on top of ours and

     pushes the sidebar away from the content-box left edge. */

  padding-left: 0 !important;

  padding-right: 0 !important;

}



.entry-content p {

  font-size: 15px;

  line-height: 1.75;

  color: var(--text-muted);

  margin-bottom: 1.2em;

}



.entry-content h1,

.entry-content h2,

.entry-content h3,

.entry-content h4,

.entry-content h5,

.entry-content h6 {

  font-family: var(--font-display);

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -0.02em;

  color: var(--text);

  margin: 1.6em 0 0.6em;

}



.entry-content h2 { font-size: clamp(22px, 3vw, 36px); }

.entry-content h3 { font-size: clamp(18px, 2.5vw, 28px); }

.entry-content h4 { font-size: 18px; }



@media (max-width: 768px) {

  .page-title-bar  { padding: 80px 0 28px; }

  .page-content-area { padding: 48px 0 72px; }

  .page-content-area--notitle { padding-top: 80px !important; }

  .page-display-title { letter-spacing: -0.015em; }

}



.page-title-bar {

  padding-top: 130px;

}

.page-content-area--notitle {

  padding-top: 130px;

}



/* ── Scroll to Top Button ── */

.scroll-top-btn {

  position: fixed;

  bottom: 32px;

  width: 44px;

  height: 44px;

  background: var(--bg-card, #111);

  border: 1px solid var(--border, #333);

  border-radius: 8px;

  color: var(--text, #fff);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform: translateY(16px);

  transition: all 0.3s ease;

  z-index: 999;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.scroll-top-btn.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}

.scroll-top-btn:hover {

  background: var(--border, #222);

  color: #fff;

  transform: translateY(-4px);

}

.scroll-top-btn.pos-right { right: 32px; }

.scroll-top-btn.pos-left { left: 32px; }



@media (max-width: 768px) {

  .scroll-top-btn { bottom: 20px; }

  .scroll-top-btn.pos-right { right: 20px; }

  .scroll-top-btn.pos-left { left: 20px; }

}



/* ============================================================

   WOOCOMMERCE MY ACCOUNT DASHBOARD CUSTOMIZATION

   ============================================================ */



.vox-dashboard-wrapper {

  display: flex;

  flex-direction: column;

  gap: 32px;

  animation: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



.vox-dashboard-hero {

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(24px) saturate(180%);

  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.3);

  border-radius: 24px;

  padding: 40px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 32px;

  flex-wrap: wrap;

  position: relative;

  overflow: hidden;

}



.vox-dashboard-hero::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--accent), transparent);

  opacity: 0.3;

}



.vox-dashboard-hero-content {

  display: flex;

  align-items: center;

  gap: 24px;

  flex: 1;

}



.vox-avatar-wrap {

  width: 80px;

  height: 80px;

  border-radius: 50%;

  overflow: hidden;

  border: 2px solid var(--border);

  flex-shrink: 0;

}



.vox-avatar-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.vox-hero-text h2 {

  font-family: var(--font-display);

  font-size: 28px;

  font-weight: 600;

  color: var(--text);

  margin: 0 0 12px;

  letter-spacing: -0.01em;

}



.vox-hero-text .vox-highlight {

  background: linear-gradient(90deg, #fff, var(--accent));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight: 700;

}



.vox-hero-text .vox-intro-text {

  font-size: 14px;

  color: var(--text-muted);

  margin: 0;

  max-width: 500px;

  line-height: 1.6;

}



.vox-hero-actions {

  display: flex;

  gap: 12px;

}



.vox-dashboard-grid {

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 0px !important;

  width: 100% !important;

}



.vox-dash-card {

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(24px) saturate(180%);

  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.2);

  border-radius: 20px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.vox-dash-card:hover {

  transform: translateY(-8px);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), 0 20px 40px rgba(0, 0, 0, 0.4);

  border-color: rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.04);

}



.vox-card-icon {

  width: 56px;

  height: 56px;

  border-radius: 16px;

  background: rgba(255,255,255,0.03);

  border: 1px solid rgba(255,255,255,0.05);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  color: var(--accent);

  margin-bottom: 24px;

  transition: transform 0.3s ease;

}



.vox-dash-card:hover .vox-card-icon {

  transform: scale(1.05);

}



.vox-card-body {

  flex: 1;

}



.vox-card-body h3 {

  font-size: 16px;

  font-weight: 600;

  margin: 0 0 8px;

  color: var(--text);

}



.vox-card-desc {

  font-size: 13px;

  color: var(--text-muted);

  line-height: 1.5;

  margin: 0;

}



.vox-credit-balance {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-top: 8px;

}



.vox-credit-balance .vox-amount {

  font-family: var(--font-display);

  font-size: 32px;

  font-weight: 700;

  color: var(--text);

  letter-spacing: -0.02em;

}



.vox-credit-balance .vox-label {

  font-size: 13px;

  color: var(--accent);

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.vox-card-footer {

  margin-top: 24px;

}



.btn-block {

  display: block;

  width: 100%;

  text-align: center;

}



@media (max-width: 767px) {

  .vox-dashboard-hero {

    flex-direction: column;

    align-items: flex-start;

  }

  .vox-hero-actions {

    width: 100%;

  }

  .vox-hero-actions .btn {

    flex: 1;

    justify-content: center;

  }



  /* Mobile only: stack dashboard cards vertically */

  .woocommerce-MyAccount-content .vox-dashboard-grid,

  .vox-dashboard-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 16px !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .woocommerce-MyAccount-content .vox-dash-card,

  .vox-dashboard-card,

  .vox-dash-card {

    width: 100% !important;

    flex: none !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

}



/* My Account — inner WooCommerce wrapper.

   page.php owns page-level spacing. This wrapper needs no extra padding. */

.woocommerce-account .woocommerce {

  display: block;

  width: 100%;

  box-sizing: border-box;

  overflow-x: hidden;

}



/* ─────────────────────────────────────────

   BREADCRUMB — vox-acct-breadcrumb

   Base styles. premium-account.css adds glass pill.

   ───────────────────────────────────────── */

.vox-acct-breadcrumb {

  display: inline-flex;

  flex-direction: row;

  align-items: center;

  flex-wrap: nowrap;

  gap: 0;

  font-size: 13px;

  color: rgba(255,255,255,0.5);

  margin-bottom: 12px;

}

.vox-acct-breadcrumb a {

  color: rgba(255,255,255,0.5);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  height: 20px;

  line-height: 1;

  white-space: nowrap;

  transition: color 0.15s ease;

}

.vox-acct-breadcrumb a:hover {

  color: rgba(255,255,255,0.85);

}

/* separator chevron */

.vox-acct-sep {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 20px;

  height: 20px;

  flex-shrink: 0;

  color: rgba(255,255,255,0.2);

}

.vox-acct-sep svg {

  display: block;

  width: 12px;

  height: 12px;

}

.vox-acct-breadcrumb span[aria-current="page"] {

  color: rgba(255,255,255,0.75);

  display: inline-flex;

  align-items: center;

  height: 20px;

  white-space: nowrap;

}



/* ─────────────────────────────────────────

   ENDPOINT SUBTITLE (e.g. "Dashboard", "Orders")

   Appears below the WP page title (H1 from page.php)

   ───────────────────────────────────────── */

.vox-acct-subtitle {

  font-family: var(--font-display);

  font-size: clamp(22px, 2.5vw, 34px);

  font-weight: 700;

  letter-spacing: -0.025em;

  color: var(--text);

  margin: 0 0 24px;

  line-height: 1.1;

}





.vox-breadcrumbs a {

  color: var(--text-muted);

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: color var(--transition);

}



.vox-breadcrumbs a:hover {

  color: var(--accent);

}



.vox-breadcrumbs .vox-current {

  color: var(--text);

  font-weight: 500;

}



.vox-account-header {

  margin-bottom: 0px;

}



.vox-account-title {

  font-family: var(--font-display);

  font-size: 36px;

  font-weight: 700;

  color: var(--text);

  margin: 0;

  line-height: 1.2;

  letter-spacing: -0.02em;

}



.vox-account-wrapper {

  position: relative;

  z-index: 1;

  overflow: hidden; /* clip the 800px decorative pseudo-element blobs */

  width: 100%;

  box-sizing: border-box;

}



.vox-account-wrapper::before {

  content: '';

  position: absolute;

  top: 0;

  left: 20%;

  width: 800px;

  height: 800px;

  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);

  filter: blur(100px);

  z-index: -1;

  pointer-events: none;

}



.vox-account-wrapper::after {

  content: '';

  position: absolute;

  bottom: 0;

  right: 10%;

  width: 600px;

  height: 600px;

  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 60%);

  filter: blur(100px);

  z-index: -1;

  pointer-events: none;

}



/* ══════════════════════════════════════════════════════════════

   MY ACCOUNT — PREMIUM SAAS LAYOUT

   ══════════════════════════════════════════════════════════════



   DOM order (my-account.php):

     .vox-account-page

       button.vox-nav-toggle   ← mobile only, ABOVE sidebar in DOM

       .vox-account-layout

         aside.vox-account-sidebar  ← left col on desktop/tablet

         .vox-account-main          ← right col / content



   On mobile (≤640px):

     layout = block,  sidebar max-height: 0 → 600px (dropdown)

     toggle visible → opens sidebar below itself ✓

   ══════════════════════════════════════════════════════════════ */



/* ── Page container ── */

.vox-account-page {

  width: 100%;

  box-sizing: border-box;

}



/* ── Mobile toggle (details/summary native HTML5) ── */

.vox-mobile-nav {

  display: none;

}

.vox-mobile-nav-summary {

  display: flex;

  align-items: center;

  gap: 9px;

  background: rgba(255,255,255,0.06);

  color: rgba(255,255,255,0.88);

  border: 1px solid rgba(255,255,255,0.12);

  padding: 10px 20px 10px 15px;

  border-radius: 14px;

  font-family: var(--font-sans);

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  margin-bottom: 0;

  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

  white-space: nowrap;

  letter-spacing: 0.01em;

  list-style: none; /* Hide default arrow */

}

.vox-mobile-nav-summary::-webkit-details-marker {

  display: none; /* Hide default arrow on Safari */

}

.vox-mobile-nav-summary:hover {

  background: rgba(255,255,255,0.1);

  border-color: rgba(255,255,255,0.22);

  transform: translateY(-1px);

}

.vox-mobile-nav-summary:active { transform: translateY(0); }

.vox-mobile-nav[open] .vox-mobile-nav-summary svg {

  transform: rotate(90deg);

}



/* ── 2-column layout ── */

.vox-account-layout {

  display: flex;

  align-items: flex-start;

  gap: 5px;

  width: 100%;

  box-sizing: border-box;

}

.vox-account-layout.vox-sidebar-right { flex-direction: row-reverse; }



/* ─────────────────────────────────────────

   SIDEBAR — desktop & tablet

   ───────────────────────────────────────── */

.vox-account-sidebar {

  width: 280px;

  flex-shrink: 0;

  align-self: flex-start;

  position: sticky;

  top: 88px; /* 64px fixed header + 24px gap */

}



.vox-sidebar-inner {

  background: transparent !important;

  border: none !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}



/* ─────────────────────────────────────────

   NAVIGATION — sidebar list items

   ───────────────────────────────────────── */



/* Hide plugin-injected select dropdowns */

.woocommerce-account .woocommerce-MyAccount-navigation select,

.vox-account-sidebar select { display: none !important; }



.woocommerce-account .woocommerce-MyAccount-navigation {

  /* Force full width so WooCommerce's own CSS (float:left; width:30%) cannot narrow it */

  width: 100% !important;

  float: none !important;

  box-sizing: border-box !important;

  /* CRITICAL: WooCommerce's JavaScript calls jQuery .hide() on this element

     at mobile breakpoints (replacing it with a <select> dropdown).

     .hide() sets style="display:none" as an inline style.

     An inline style WITHOUT !important loses to a stylesheet rule WITH !important.

     So display:block !important here will keep the navigation visible. */

  display: block !important;

}

.woocommerce-account .woocommerce-MyAccount-navigation ul {

  list-style: none !important;

  margin: 0 !important;

  padding: 0 !important;

  /* Same reason as above: WooCommerce JS may hide the ul too */

  display: flex !important;

  flex-direction: column !important;

  gap: 2px !important;

  width: 100% !important;

}

.woocommerce-account .woocommerce-MyAccount-navigation li {

  margin: 0 !important;

  width: 100% !important;

  display: block !important;

  box-sizing: border-box !important;

}

.woocommerce-account .woocommerce-MyAccount-navigation a {

  display: flex;

  align-items: center;

  width: 100%;

  box-sizing: border-box;

  padding: 11px 14px;

  color: rgba(255,255,255,0.55);

  font-size: 14px;

  font-weight: 500;

  line-height: 1.3;

  border-radius: 12px;

  gap: 10px;

  text-decoration: none;

  transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease;

  /* white-space:normal so long labels wrap rather than get ellipsised */

  white-space: normal;

  overflow: visible;

  border: 1px solid transparent;

}

.woocommerce-account .woocommerce-MyAccount-navigation a i.ph {

  font-size: 18px;

  color: rgba(255,255,255,0.3);

  transition: color 0.18s ease;

  flex-shrink: 0;

}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {

  color: rgba(255,255,255,0.9);

  background: rgba(255,255,255,0.06);

}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover i.ph {

  color: rgba(255,255,255,0.6);

}



/* Active state — full-width glass pill */

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a,

.woocommerce-account .woocommerce-MyAccount-navigation li.current-menu-item > a {

  color: #fff;

  background: linear-gradient(135deg, rgba(99,102,241,0.22) 0%, rgba(59,130,246,0.14) 100%);

  border-color: rgba(99,102,241,0.35);

  box-shadow: 0 0 16px rgba(99,102,241,0.2), inset 0 1px 0 rgba(255,255,255,0.08);

  font-weight: 600;

  width: 100%;

  display: flex;

  box-sizing: border-box;

}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active > a i.ph,

.woocommerce-account .woocommerce-MyAccount-navigation li.current-menu-item > a i.ph {

  color: var(--accent);

}



/* ─────────────────────────────────────────

   MAIN CONTENT COLUMN

   ───────────────────────────────────────── */

.vox-account-main {

  flex: 1;

  min-width: 0;

  overflow-x: hidden;

  box-sizing: border-box;

}



/* ─────────────────────────────────────────

   CONTENT AREA (WooCommerce content div)

   ───────────────────────────────────────── */

.vox-account-content,

.woocommerce-account .woocommerce-MyAccount-content {

  width: 100%;

  min-width: 0;

  overflow-x: hidden;

  box-sizing: border-box;

}



/* ══════════════════════════════════════════════════════════════

   TABLET & MOBILE  (≤ 1024px)

   Block layout. Sidebar and mobile nav completely hidden.

   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {



  /* Tablet/mobile: clear header.

     Also reset Elementor desktop boxed layout — full-width on small screens. */

  .woocommerce-account .woocommerce,

  body.elementor-page.woocommerce-account .woocommerce,

  body.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

  body.page-template-elementor_header_footer.woocommerce-account .woocommerce,

  body.admin-bar.elementor-page.woocommerce-account .woocommerce,

  body.admin-bar.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

  body.admin-bar.page-template-elementor_header_footer.woocommerce-account .woocommerce {

    padding: 110px 20px 60px !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    box-sizing: border-box !important;

  }



  /* ── Completely hide both the desktop sidebar and the mobile nav dropdown ── */

  .vox-mobile-nav {

    display: none !important;

  }



  /* Switch layout to block (content only, no sidebar column) */

  .vox-account-layout {

    display: block !important;

    gap: 0 !important;

  }



  /* ── Sidebar: hide completely on tablet & mobile ── */

  .vox-account-sidebar {

    display: none !important;

  }



  /* Nav inside mobile/tablet: vertical list */

  .vox-account-sidebar .vox-sidebar-inner {

    border-radius: 16px !important;

    padding: 8px !important;

  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {

    flex-direction: column !important;

    gap: 4px !important;

  }

  .woocommerce-account .woocommerce-MyAccount-navigation li {

    width: 100% !important;

  }

  .woocommerce-account .woocommerce-MyAccount-navigation a {

    white-space: normal !important;

    padding: 12px 14px !important;

    font-size: 14px !important;

    gap: 10px !important;

    border-radius: 10px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }



  /* Main column */

  .vox-account-main {

    width: 100% !important;

    overflow-x: hidden !important;

  }



  /* Title & Header spacing */

  .vox-account-title { font-size: 26px !important; }

  .vox-breadcrumbs   { font-size: 12.5px !important; flex-wrap: wrap !important; gap: 4px !important; }

  .vox-account-header { margin-bottom: 18px !important; }



  /* Tables scroll */

  .woocommerce-account table.shop_table,

  .woocommerce-account table.pvc-transactions-table {

    display: block !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

  }

  .woocommerce-account table.shop_table th,

  .woocommerce-account table.pvc-transactions-table th,

  .woocommerce-account table.shop_table td,

  .woocommerce-account table.pvc-transactions-table td {

    padding: 11px 12px !important;

    white-space: nowrap !important;

    font-size: 13.5px !important;

  }



  /* Forms & inputs */

  .woocommerce-account form.edit-account,

  .woocommerce-account form.woocommerce-EditAddressForm {

    padding: 24px 20px !important;

    border-radius: 16px !important;

  }

}



/* ══════════════════════════════════════════════════════════════

   MOBILE  (≤ 640px)

   ══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Smaller outer padding on mobile */

  .woocommerce-account .woocommerce {

    padding: 110px 14px 56px !important;

  }



  .vox-account-title { font-size: 22px !important; }

  .vox-breadcrumbs { font-size: 12px !important; }

  .vox-account-header { margin-bottom: 14px !important; }



  /* Forms */

  .woocommerce-account form.edit-account,

  .woocommerce-account form.woocommerce-EditAddressForm {

    padding: 18px 14px !important;

    border-radius: 12px !important;

  }

  .woocommerce-account form .input-text,

  .woocommerce-account form select,

  .woocommerce-account form textarea {

    font-size: 15px !important;   /* prevent iOS zoom on focus */

    padding: 12px 14px !important;

  }



  /* Buttons */

  .woocommerce-account a.button,

  .woocommerce-account button[type="submit"],

  .woocommerce-account input[type="submit"] {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

  }



  /* Dashboard hero */

  .vox-dashboard-hero {

    flex-direction: column !important;

    align-items: flex-start !important;

    padding: 22px 18px !important;

    gap: 18px !important;

  }

  .vox-dashboard-hero h2 { font-size: 22px !important; }



  /* 3 cards: stack */

  #vox-cards-row { flex-direction: column !important; }



  /* Notices */

  .woocommerce-account .woocommerce-message,

  .woocommerce-account .woocommerce-info,

  .woocommerce-account .woocommerce-error {

    flex-direction: column !important;

    align-items: flex-start !important;

    padding: 14px !important;

    gap: 10px !important;

  }



  /* Addresses */

  .woocommerce-account .woocommerce-Address {

    padding: 18px 14px !important;

    border-radius: 12px !important;

  }

}



/* ============================================================



   WOOCOMMERCE ACCOUNT PAGES (TABLES & FORMS)

   ============================================================ */



/* Tables (Orders, Downloads, Transactions) */

.woocommerce-account table.shop_table,

.woocommerce-account table.pvc-transactions-table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0;

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(24px) saturate(180%);

  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.2);

  border-radius: 16px;

  overflow: hidden;

  margin-bottom: 24px;

}



.woocommerce-account table.shop_table th,

.woocommerce-account table.pvc-transactions-table th {

  background: rgba(255, 255, 255, 0.02);

  color: var(--text-muted);

  font-weight: 600;

  text-transform: uppercase;

  font-size: 12px;

  letter-spacing: 0.05em;

  padding: 16px 24px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  text-align: left;

}



.woocommerce-account table.shop_table td,

.woocommerce-account table.pvc-transactions-table td {

  padding: 16px 24px;

  color: var(--text);

  border-bottom: 1px solid rgba(255, 255, 255, 0.03);

  font-size: 14px;

  vertical-align: middle;

}



.woocommerce-account table.shop_table tbody tr:last-child td,

.woocommerce-account table.pvc-transactions-table tbody tr:last-child td {

  border-bottom: none;

}



.woocommerce-account table.shop_table tbody tr:hover,

.woocommerce-account table.pvc-transactions-table tbody tr:hover {

  background: rgba(255, 255, 255, 0.01);

}



.woocommerce-account table.shop_table a {

  color: var(--accent);

  text-decoration: none;

  font-weight: 500;

}



.woocommerce-account table.shop_table a:hover {

  text-decoration: underline;

}



.woocommerce-account .woocommerce-button.button.view {

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

  padding: 8px 16px;

  border-radius: 8px;

  font-size: 13px;

  transition: all 0.2s ease;

}

.woocommerce-account .woocommerce-button.button.view:hover {

  background: var(--accent);

  color: #fff;

  text-decoration: none;

}



/* Forms (Edit Address, Edit Account) */

.woocommerce-account form.edit-account,

.woocommerce-account form.woocommerce-EditAddressForm {

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(24px) saturate(180%);

  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.2);

  border-radius: 16px;

  padding: 32px;

}



.woocommerce-account fieldset {

  background: transparent;

  border: none;

  padding: 0;

  margin: 24px 0 0;

}



.woocommerce-account legend {

  font-size: 18px;

  font-weight: 600;

  color: var(--text);

  margin-bottom: 16px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  width: 100%;

}



/* Addresses Grid */

.woocommerce-account .u-columns.woocommerce-Addresses {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 24px;

}



.woocommerce-account .woocommerce-Address {

  background: rgba(255, 255, 255, 0.02);

  backdrop-filter: blur(24px) saturate(180%);

  -webkit-backdrop-filter: blur(24px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.2);

  border-radius: 16px;

  padding: 24px;

}



.woocommerce-account .woocommerce-Address-title {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 16px;

}



.woocommerce-account .woocommerce-Address-title h3 {

  margin: 0;

  font-size: 18px;

}



.woocommerce-account .woocommerce-Address-title .edit {

  font-size: 13px;

  color: var(--accent);

}



.woocommerce-account address {

  font-style: normal;

  color: var(--text-muted);

  line-height: 1.6;

}







.pvc-account-widget { display: none !important; }





/* ============================================================

   FIX: Dead space above the account breadcrumb header

   .page-main already clears the fixed header (64px / 96px with

   admin bar), and .page-title-bar is hidden on account pages,

   so the old 48px / 150px content-area offsets just stacked

   empty space above .vox-account-header. Collapse them to a

   small breathing gap. Placed last in the file so it wins the

   cascade against the earlier !important rules of equal

   specificity.

   ============================================================ */

.woocommerce-account .page-content-area,

.woocommerce-account .page-content-area--notitle {

  padding-top: 24px !important;

}



/* ============================================================

   FIX: Orphaned Elementor-context padding

   Elementor has been uninstalled, but pages that still carry

   _wp_page_template = elementor_header_footer in post meta keep

   the body class, which triggered the 120px/150px .woocommerce

   clearance above. Those pages now render through page.php, so

   .page-main already clears the fixed header - zero this out.

   (If Elementor is ever reinstalled and genuinely renders the

   header/footer template, delete this block.)

   ============================================================ */

body.page-template-elementor_header_footer.woocommerce-account .woocommerce,

body.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

body.elementor-page.woocommerce-account .woocommerce,

body.admin-bar.page-template-elementor_header_footer.woocommerce-account .woocommerce,

body.admin-bar.page-template-el-mentor_header_footer.woocommerce-account .woocommerce,

body.admin-bar.elementor-page.woocommerce-account .woocommerce {

  padding-top: 0 !important;

}



/* ============================================================

   FIX: 130px dead space on regular pages (Pricing, Gallery,

   Home, ...). A late override near line 1733 raised

   .page-title-bar / .page-content-area--notitle to 130px top

   padding - clearance for the fixed header from the era when

   .page-main didn't wrap the content. .page-main now provides

   the 64px clearance on every page, so restore a normal band.

   (Account pages are untouched: their .woocommerce-account

   rules are more specific and already tuned to 24px.)

   ============================================================ */

.page-title-bar {

  padding-top: 40px !important;

}

.page-content-area--notitle {

  padding-top: 40px !important;

}



/* ============================================================

   FIX: Remove the radial gradient glow behind page titles

   (.page-title-bar::before - the blue atmosphere mirrored from

   the hero section). Titles now sit on the flat page background.

   ============================================================ */

.page-title-bar::before {

  display: none !important;

}



/* ============================================================

   FIX: Remove the divider line under the page title

   (.page-title-bar border-bottom). The title now sits flush on

   the page background with no band separator.

   ============================================================ */

.page-title-bar {

  border-bottom: none !important;

}



/* ============================================================

   FIX: Show the footer on the My Account page

   Overrides the Hide footer on MyAccount page rule at ~line

   1168 (body.woocommerce-account .site-footer { display:none }).

   ============================================================ */

body.woocommerce-account .site-footer {

  display: block !important;

}



/* ============================================================

   HEADER HEIGHT VARIABLE SYSTEM + NOTIFICATION BAR OFFSETS

   ============================================================ */

:root {

  --vxr-header-h: 64px;

  --vxr-notifbar-h: 0px;

}

.site-header {

  height: var(--vxr-header-h) !important;

  top: var(--vxr-notifbar-h);

}

body.admin-bar .site-header {

  top: calc(32px + var(--vxr-notifbar-h));

}

@media (max-width: 782px) {

  body.admin-bar .site-header {

    top: calc(46px + var(--vxr-notifbar-h));

  }

}

.page-main {

  padding-top: calc(var(--vxr-header-h) + var(--vxr-notifbar-h)) !important;

}

body.admin-bar .page-main {

  padding-top: calc(var(--vxr-header-h) + var(--vxr-notifbar-h) + 32px) !important;

}

.hero-section {

  padding-top: calc(var(--vxr-header-h) + var(--vxr-notifbar-h) + 76px) !important;

}

@media (max-width: 768px) {

  .hero-section {

    padding-top: calc(var(--vxr-header-h) + var(--vxr-notifbar-h) + 46px) !important;

  }

}



.site-header .btn-primary:hover,

.site-header a.btn-primary:hover,

.header-cta a.btn-primary:hover,

.site-header .btn-ghost:hover,

.site-header a.btn-ghost:hover,

.header-cta a.btn-ghost:hover {

  transform: none !important;

  box-shadow: none !important;

}



/* ============================================================

   NOTIFICATION BAR

   ============================================================ */

.vxr-notifbar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1200;

  background: var(--vxr-notifbar-bg, var(--accent));

  color: var(--vxr-notifbar-text, #ffffff);

  font-family: var(--vxr-notifbar-font-family, inherit);

  font-size: var(--vxr-notifbar-font-size, 14px);

  font-weight: var(--vxr-notifbar-font-weight, 400);

  font-style: var(--vxr-notifbar-font-style, normal);

  text-decoration: var(--vxr-notifbar-text-decoration, none);

  text-transform: var(--vxr-notifbar-text-transform, none);

  line-height: 1.5;

}

body.admin-bar .vxr-notifbar {

  top: 32px;

}

@media (max-width: 782px) {

  body.admin-bar .vxr-notifbar {

    top: 46px;

  }

}



.vxr-notifbar-inner {

  max-width: var(--max-w);

  margin: 0 auto;

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 10px 24px;

}



.vxr-notifbar-content {

  flex: 1;

  min-width: 0;

  text-align: var(--vxr-notifbar-text-align, center);

  overflow-wrap: break-word;

}

.vxr-notifbar-content a {

  color: inherit;

  text-decoration: underline;

  text-underline-offset: 2px;

  font-weight: 600;

}

.vxr-notifbar-content a:hover {

  opacity: 0.85;

}

.vxr-notifbar-content p {

  margin: 0;

  display: inline;

}



.vxr-notifbar-close {

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: transparent;

  border: 0;

  color: inherit;

  opacity: 0.8;

  cursor: pointer;

  padding: 8px;

  margin: -8px -8px -8px 0;

  border-radius: 6px;

  transition: opacity 0.15s, background 0.15s;

}

.vxr-notifbar-close:hover {

  opacity: 1;

  background: rgba(255, 255, 255, 0.12);

}

.vxr-notifbar-close:focus-visible {

  outline: 2px solid currentColor;

  outline-offset: 1px;

}



.vxr-notifbar-icon {

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

  font-size: 1.1em;

}

.vxr-notifbar-icon svg,

.vxr-notifbar-icon img {

  width: 1.1em;

  height: 1.1em;

  display: block;

}

.vxr-notifbar-icon .dashicons {

  font-size: 1.1em;

  width: auto;

  height: auto;

}

@media (max-width: 1024px) {

  .vxr-notifbar-inner {

    padding: 9px 20px;

    gap: 12px;

  }

}

/* Mobile */

@media (max-width: 640px) {

  .vxr-notifbar {

    font-size: 12.5px;

    line-height: 1.45;

  }

  .vxr-notifbar-inner {

    padding: 8px 14px;

    gap: 10px;

  }

  .vxr-notifbar-content {

    text-align: left;

  }

}



/* ============================================================

   VXR SIGNUP LIGHTBOX

   Dark glass dialog matching the theme tokens. Desktop: centered

   auth card. Phone (<=640px): bottom sheet. Overlay blur, scale

   entrance, reduced-motion respected.

   ============================================================ */

body.vxr-modal-open {

  overflow: hidden !important;

}



.vxr-modal[hidden] {

  display: none !important; /* CRITICAL: .vxr-modal's display:flex would

     otherwise override the [hidden] attribute, leaving an invisible

     full-viewport layer that blocks all clicks */

}



.vxr-modal {

  position: fixed;

  inset: 0;

  z-index: 1400; /* above header and notification bar (1200) */

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

}



.vxr-modal-overlay {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  opacity: 0;

  transition: opacity 0.18s ease;

  cursor: pointer;

}



.vxr-modal-card {

  position: relative;

  width: 100%;

  max-width: 420px;

  background: var(--bg2, #111214);

  border: 1px solid var(--border-mid, rgba(255,255,255,0.1));

  border-radius: 16px;

  padding: 36px 32px 28px;

  box-shadow: 0 24px 80px -12px rgba(0, 0, 0, 0.7);

  opacity: 0;

  transform: translateY(12px) scale(0.97);

  transition: opacity 0.18s ease, transform 0.18s ease;

  outline: none;

}



.vxr-modal.is-open .vxr-modal-overlay { opacity: 1; }

.vxr-modal.is-open .vxr-modal-card {

  opacity: 1;

  transform: translateY(0) scale(1);

}



@media (prefers-reduced-motion: reduce) {

  .vxr-modal-overlay,

  .vxr-modal-card { transition: none; transform: none; }

}



.vxr-modal-close {

  position: absolute;

  top: 14px;

  right: 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  background: transparent;

  border: 0;

  border-radius: 8px;

  color: var(--text-muted, #9a9aa2);

  cursor: pointer;

  transition: color 0.15s, background 0.15s;

}

.vxr-modal-close:hover {

  color: var(--text, #f0f0f0);

  background: rgba(255, 255, 255, 0.07);

}

.vxr-modal-close:focus-visible {

  outline: 2px solid var(--accent, #3b82f6);

  outline-offset: 1px;

}



.vxr-modal-title {

  font-family: var(--font-display);

  font-size: 26px;

  font-weight: 700;

  letter-spacing: -0.02em;

  color: var(--text, #f0f0f0);

  margin: 0 0 8px;

  padding-right: 28px;

}



.vxr-modal-sub {

  font-size: 14px;

  line-height: 1.55;

  color: var(--text-muted, #9a9aa2);

  margin: 0 0 24px;

}



/* Social buttons: normalize whatever LoginPress outputs into

   full-width stacked rows that match the theme */

.vxr-modal-social a,

.vxr-modal-social button {

  display: flex !important;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100% !important;

  margin: 0 0 10px !important;

  padding: 12px 16px !important;

  border-radius: 10px !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  box-sizing: border-box !important;

  float: none !important;

}

.vxr-modal-social img,

.vxr-modal-social svg,

.vxr-modal-social i {

  flex: 0 0 auto;

}



.vxr-modal-register-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  padding: 12px 16px;

  border-radius: 10px;

  background: var(--accent, #3b82f6);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

}



.vxr-modal-divider {

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 18px 0 14px;

  color: var(--text-dim, #6b6b73);

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.vxr-modal-divider::before,

.vxr-modal-divider::after {

  content: '';

  flex: 1;

  height: 1px;

  background: var(--border, rgba(255,255,255,0.07));

}



.vxr-modal-footer {

  text-align: center;

  font-size: 13.5px;

  color: var(--text-muted, #9a9aa2);

}

.vxr-modal-footer a {

  color: var(--accent, #3b82f6);

  font-weight: 600;

  text-decoration: none;

}

.vxr-modal-footer a:hover {

  text-decoration: underline;

}



/* Phone: bottom sheet */

@media (max-width: 640px) {

  .vxr-modal {

    align-items: flex-end;

    padding: 0;

  }

  .vxr-modal-card {

    max-width: none;

    border-radius: 18px 18px 0 0;

    border-left: 0;

    border-right: 0;

    border-bottom: 0;

    padding: 32px 22px calc(24px + env(safe-area-inset-bottom, 0px));

    transform: translateY(28px);

  }

  .vxr-modal.is-open .vxr-modal-card {

    transform: translateY(0);

  }

}



/* ============================================================

   VXR AUTH FORMS (lightbox v2: signup/login views, fields,

   legal text, switcher, logo)

   ============================================================ */

.vxr-modal-logo {

  display: flex;

  justify-content: center;

  margin: 0 0 20px;

}

.vxr-modal-logo img {

  max-height: 34px;

  width: auto;

}



.vxr-view[hidden] {

  display: none !important;

}



.vxr-hp {

  position: absolute !important;

  left: -9999px !important;

  width: 1px; height: 1px;

  opacity: 0;

}



.vxr-field {

  margin: 0 0 14px;

}

.vxr-field label {

  display: block;

  font-size: 12.5px;

  font-weight: 600;

  color: var(--text-muted, #9a9aa2);

  margin: 0 0 6px;

  letter-spacing: 0.01em;

}

.vxr-field-labelrow {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

}

.vxr-forgot {

  font-size: 12px;

  color: var(--accent, #3b82f6);

  text-decoration: none;

  font-weight: 500;

}

.vxr-forgot:hover { text-decoration: underline; }



.vxr-field input[type="email"],

.vxr-field input[type="text"],

.vxr-field input[type="password"] {

  width: 100%;

  box-sizing: border-box;

  background: var(--bg, #0a0a0a);

  border: 1px solid var(--border-mid, rgba(255,255,255,0.1));

  border-radius: 10px;

  color: var(--text, #f0f0f0);

  font-size: 14px;

  line-height: 1.4;

  padding: 11px 14px;

  outline: none;

  transition: border-color 0.15s, box-shadow 0.15s;

}

.vxr-field input:focus {

  border-color: var(--accent, #3b82f6);

  box-shadow: 0 0 0 3px var(--accent-glow, rgba(59,130,246,0.25));

}

.vxr-field input::placeholder {

  color: var(--text-dim, #6b6b73);

}



.vxr-input-wrap {

  position: relative;

}

.vxr-input-wrap input {

  padding-right: 42px !important;

}

.vxr-eye {

  position: absolute;

  top: 50%;

  right: 8px;

  transform: translateY(-50%);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px; height: 30px;

  background: transparent;

  border: 0;

  border-radius: 7px;

  color: var(--text-dim, #6b6b73);

  cursor: pointer;

}

.vxr-eye:hover { color: var(--text, #f0f0f0); }



.vxr-modal-error {

  background: rgba(239, 68, 68, 0.1);

  border: 1px solid rgba(239, 68, 68, 0.3);

  border-radius: 8px;

  color: #f87171;

  font-size: 12.5px;

  line-height: 1.5;

  padding: 9px 12px;

  margin: 0 0 14px;

}



.vxr-modal-notice {

  font-size: 13px;

  color: var(--text-muted, #9a9aa2);

  text-align: center;

  margin: 0 0 6px;

}



.vxr-modal-submit {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  padding: 12px 16px;

  border: 0;

  border-radius: 10px;

  background: var(--accent, #3b82f6);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: background 0.15s, opacity 0.15s;

}

.vxr-modal-submit:hover { background: var(--accent-hover, #2563eb); }

.vxr-modal-submit:disabled { opacity: 0.75; cursor: default; }



.vxr-submit-spinner {

  display: none;

  width: 15px; height: 15px;

  margin-left: 10px;

  border: 2px solid rgba(255,255,255,0.35);

  border-top-color: #fff;

  border-radius: 50%;

  animation: vxr-spin 0.7s linear infinite;

}

.vxr-modal-submit.is-loading .vxr-submit-spinner { display: inline-block; }

@keyframes vxr-spin { to { transform: rotate(360deg); } }



.vxr-modal-legal {

  font-size: 11.5px;

  line-height: 1.55;

  color: var(--text-dim, #6b6b73);

  text-align: center;

  margin: 14px 0 0;

}

.vxr-modal-legal a {

  color: var(--text-muted, #9a9aa2);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.vxr-modal-legal a:hover { color: var(--text, #f0f0f0); }



.vxr-modal-switch {

  margin: 18px -32px 0;

  padding: 16px 32px 0;

  border-top: 1px solid var(--border, rgba(255,255,255,0.07));

  text-align: center;

  font-size: 13.5px;

  color: var(--text-muted, #9a9aa2);

}

.vxr-modal-switch button {

  background: none;

  border: 0;

  padding: 0;

  margin-left: 4px;

  color: var(--accent, #3b82f6);

  font-size: 13.5px;

  font-weight: 600;

  cursor: pointer;

}

.vxr-modal-switch button:hover { text-decoration: underline; }



@media (max-width: 640px) {

  .vxr-modal-switch {

    margin-left: -22px;

    margin-right: -22px;

    padding-left: 22px;

    padding-right: 22px;

  }

}



/* ============================================================

   VXR LIGHTBOX RESPONSIVE HARDENING + CAPTCHA CONTAINER

   Card scrolls internally when it exceeds the viewport (small

   laptops, landscape phones, on-screen keyboards). Tablet gets

   a slightly wider card; phones keep the bottom sheet.

   ============================================================ */

.vxr-modal-card {

  max-height: calc(100vh - 48px);

  max-height: calc(100dvh - 48px);

  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

}



/* Tablet: 641 - 1024px */

@media (min-width: 641px) and (max-width: 1024px) {

  .vxr-modal-card {

    max-width: 440px;

    padding: 34px 30px 26px;

  }

  .vxr-modal-title {

    font-size: 24px;

  }

}



/* Phone bottom sheet: cap height, keep the switcher reachable */

@media (max-width: 640px) {

  .vxr-modal-card {

    max-height: 88vh;

    max-height: 88dvh;

  }

  .vxr-modal-title {

    font-size: 22px;

  }

  .vxr-field input[type="email"],

  .vxr-field input[type="text"],

  .vxr-field input[type="password"] {

    font-size: 16px; /* prevents iOS auto-zoom on focus */

  }

}



/* Captcha container: centered, never overflows the card */

.vxr-captcha {

  display: flex;

  justify-content: center;

  margin: 2px 0 14px;

}

.vxr-captcha:empty {

  display: none;

  margin: 0;

}

.vxr-captcha > div,

.vxr-captcha iframe {

  max-width: 100% !important;

}

@media (max-width: 400px) {

  /* Turnstile/reCAPTCHA fixed 300px widgets on very narrow phones */

  .vxr-captcha {

    transform-origin: center top;

  }

}