:root {

  /* ============================
     THEME COLORS (Blue palette)
     ============================ */

  /* Source palette (Generated from #3B60FF) */
  --e-global-color-accent: #EEF2FF;
  --e-global-color-light: #6F8CFF;
  --e-global-color-mid: #3B60FF;
  --e-global-color-deep: #2F4DE0;
  --e-global-color-dark: #1F35A8;
  --e-global-color-navy: #141F5C;

  /* Primary brand */
  --primary: #3B60FF;          /* Main theme blue */
  --primary-dark: #2F4DE0;     /* Darker blue */
  --primary-light: #6F8CFF;    /* Lighter blue */

  /* Accent */
  --accent: #6F8CFF;
  --accent-glow: rgba(59, 96, 255, 0.45);

  /* Optional theme tints */
  --theme-soft: #EEF2FF;
  --theme-blue-light: #8EA5FF;
  --theme-blue-deep: #1F35A8;

  /* ============================
     DARK GYM BACKGROUND SYSTEM
     ============================ */

  /* Ultra Premium Black */
  --secondary: #0a0c12;        
  --secondary-light: #141824;

  /* Deep Metallic Gray */
  --steel: #1f2937;
  --steel-light: #2f3b4d;

  /* ============================
     TEXT COLORS (Optimized Contrast)
     ============================ */

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-dark: #111827;
  --text-inverse: #ffffff;

  /* ============================
     BACKGROUNDS
     ============================ */

  --bg-primary: #0a0c12;       /* Main site background */
  --bg-secondary: #11141d;     /* Sections */
  --bg-tertiary: #171c26;      /* Cards */

  --bg-light: #f8fafc;         /* Optional light section */

  /* Blue subtle section overlay (optional use) */
  --bg-blue-glow: radial-gradient(
    circle at top right,
    rgba(59, 96, 255, 0.08),
    transparent 60%
  );

  /* ============================
     STATUS COLORS (Premium tuned)
     ============================ */

  --success: #16a34a;
  --error: #b91c1c;
  --warning: #d97706;
  --info: #2563eb;

  /* ============================
     SPACING SYSTEM
     ============================ */

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3rem;
  --spacing-xl: 5rem;
  --spacing-2xl: 7rem;

  /* ============================
     BORDER RADIUS (Modern but Strong)
     ============================ */

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  /* ============================
     SHADOWS – Blue Depth Style
     ============================ */

  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.6);

  /* Blue glow shadow for buttons/cards */
  --shadow-glow: 0 0 40px rgba(59, 96, 255, 0.35);

  /* ============================
     TRANSITIONS
     ============================ */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

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

  --font-primary: 'Anybody', sans-serif;
  --font-body: 'Anybody', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sticky nav height */
  --header-height: 80px;
}

/* ============================
   GLOBAL FONT SYSTEM
   Anybody — site-wide (headings + body, home + all pages)
   ============================ */

/* All headings: Anybody */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Anybody', sans-serif;
  letter-spacing: 0.02em;
  font-weight: 600;
}

/* Gym/display utility — Anybody */
.gym-font,
[class*="bebas"],
.font-bebas {
  font-family: 'Anybody', sans-serif;
  letter-spacing: 0.04em;
}

/* Home page only: all headings uppercase + italic, responsive */
.page-home h1,
.page-home h2,
.page-home h3,
.page-home h4,
.page-home h5,
.page-home h6 {
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.05em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 639px) {
  .page-home h1, .page-home h2, .page-home h3,
  .page-home h4, .page-home h5, .page-home h6 {
    letter-spacing: 0.03em;
    line-height: 1.25;
  }
}

/* ============================
   LIGHT MODE (default) – dark text on light backgrounds
   ============================ */
body {
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-dark: #0f172a;
}

/* Full-bleed heroes sit under fixed nav (pull up by nav height only) — home only */
.hero-v,
.page-hero,
.hero {
  margin-top: calc(-1 * var(--header-height));
}

/* Non-home pages: first section (hero) starts below sticky nav — do not pull up, add top padding */
.below-sticky-header {
  margin-top: 0 !important;
  padding-top: 5rem; /* h-20 */
}
@media (min-width: 640px) {
  .below-sticky-header {
    padding-top: 4rem; /* h-16 on sm+ */
  }
}

/* ============================
   DARK THEME (demo) – Zinc palette – body.theme-dark
   ============================ */
body.theme-dark {
  --bg-primary: #0f0f0f;
  --bg-secondary: #1c1f26;
  --bg-tertiary: #2a2d35;
  --text-primary: #ffffff;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-inverse: #0f0f0f;
  
  --primary: #2563EB;
  --primary-dark: #1E40AF;
  --primary-light: #3B82F6;
  
  --secondary: #2a2d35;
  --secondary-light: #374151;
  
  --bg-dark: #0f0f0f;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 40px 80px rgba(0, 0, 0, 0.6);
}

/* Global Tailwind overrides in dark mode */
body.theme-dark .text-gray-950,
body.theme-dark .text-gray-900,
body.theme-dark .text-gray-800,
body.theme-dark .text-gray-700,
body.theme-dark .text-gray-600 { color: var(--text-primary) !important; }
body.theme-dark .text-gray-500 { color: var(--text-muted) !important; }
body.theme-dark .text-gray-400 { color: var(--text-muted) !important; }
body.theme-dark .bg-white,
body.theme-dark .bg-gray-50,
body.theme-dark .bg-gray-100 { background-color: var(--bg-tertiary) !important; }
body.theme-dark .bg-gray-200 { background-color: var(--bg-tertiary) !important; }

/* ---------- Hero ---------- */
body.theme-dark .hero { background: var(--bg-primary); }
body.theme-dark .hero-panel-left { background: var(--bg-secondary) !important; }
body.theme-dark .hero-headline,
body.theme-dark .hero-headline .outline { color: var(--text-primary) !important; -webkit-text-stroke-color: var(--primary) !important; }
body.theme-dark .hero-subtitle,
body.theme-dark .hero-description { color: var(--text-muted) !important; }
body.theme-dark .hero-stats .stat-value { color: var(--text-primary) !important; }
body.theme-dark .hero-stats .stat-label { color: var(--text-muted) !important; }
body.theme-dark .hero .btn-secondary { background: transparent; border-color: rgba(255,255,255,0.25); color: var(--text-primary); }
body.theme-dark .hero .btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
body.theme-dark .hero-overlay { background: linear-gradient(to right, rgba(9,9,11,0.7) 0%, transparent 40%), linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%) !important; }
body.theme-dark .hero-float-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.1); }
body.theme-dark .hero-float-card .float-card-label,
body.theme-dark .hero-float-card .float-card-sub { color: var(--text-muted) !important; }
body.theme-dark .hero-float-card .float-card-value { color: var(--primary) !important; }
body.theme-dark .hero-panel-right { background: var(--bg-dark); }

/* New hero (hero-new) — same design as new-hero, gym content */
body.theme-dark .hero-new { background: var(--bg-secondary) !important; }
body.theme-dark .hero-new .hero-title { color: var(--text-primary) !important; }
body.theme-dark .hero-new .hero-desc,
body.theme-dark .hero-new .hero-rating-label { color: var(--text-muted) !important; }
body.theme-dark .hero-new .hero-pill,
body.theme-dark .hero-new .hero-float-icon { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.08); }
body.theme-dark .hero-new .hero-pill { color: var(--text-primary) !important; }
body.theme-dark .hero-new .hero-float-icon { color: var(--primary) !important; }

/* Video hero (hero-v) — theme colors only, full viewport */
body.theme-dark .hero-v .hero-v-overlay { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-primary) 92%, transparent) 0%, color-mix(in srgb, var(--bg-secondary) 88%, transparent) 100%); }
body.theme-dark .hero-v .hero-v-overlay::after { background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 35%, color-mix(in srgb, var(--bg-primary) 40%, transparent) 100%); }
body.theme-dark .hero-v .hero-v-title { color: var(--text-primary) !important; }
body.theme-dark .hero-v .hero-v-subtitle,
body.theme-dark .hero-v .hero-v-desc { color: var(--text-secondary) !important; }
body.theme-dark .hero-v .hero-v-badge-text,
body.theme-dark .hero-v .hero-v-scroll-text { color: var(--text-muted) !important; }
body.theme-dark .hero-v .hero-v-badge { background: color-mix(in srgb, var(--primary) 15%, var(--bg-tertiary)); border-color: color-mix(in srgb, var(--primary) 40%, var(--bg-tertiary)); }
body.theme-dark .hero-v .hero-v-btn-outline { border-color: rgba(255,255,255,0.25); color: var(--text-primary); }
body.theme-dark .hero-v .hero-v-btn-outline:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- Tagline & Pillars ---------- */
body.theme-dark .tagline-pillars-section { background: var(--bg-secondary) !important; }
body.theme-dark .tagline-serif { color: var(--text-secondary) !important; }
body.theme-dark .pillar-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.08); }
body.theme-dark .pillar-title { color: var(--text-primary) !important; }
body.theme-dark .pillar-desc { color: var(--text-muted) !important; }
body.theme-dark .pillar-icon { color: var(--text-secondary) !important; }

/* ---------- Wellness ---------- */
body.theme-dark .wellness-section { background: var(--bg-secondary) !important; }
body.theme-dark .wellness-section .text-gray-900 { color: var(--text-primary) !important; }
body.theme-dark .wellness-section .text-gray-600 { color: var(--text-muted) !important; }
body.theme-dark .wellness-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.06); }
body.theme-dark .wellness-card h3 { color: var(--text-primary) !important; }
body.theme-dark .wellness-card p { color: var(--text-muted) !important; }
body.theme-dark .wellness-card-body,
body.theme-dark .wellness-cta { color: var(--text-secondary) !important; }
body.theme-dark .wellness-main-cta { background: var(--primary); color: #fff !important; }

/* ---------- Affiliate (keep dark, use zinc) ---------- */
body.theme-dark .affiliate-section { background: linear-gradient(180deg, #16181d 0%, #15171c 50%, #14161b 100%) !important; color: var(--text-primary); }
body.theme-dark .affiliate-section .text-white { color: var(--text-primary) !important; }
body.theme-dark .affiliate-section .text-gray-300 { color: var(--text-secondary) !important; }
body.theme-dark .affiliate-section .text-gray-200 { color: var(--text-secondary) !important; }
body.theme-dark .affiliate-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.1); }

/* ---------- How It Works ---------- */
body.theme-dark .hiw-section { --hiw-bg: var(--bg-secondary); --hiw-card-bg: var(--bg-tertiary); --hiw-text: var(--text-primary); --hiw-muted: var(--text-muted); }
body.theme-dark .hiw-section::after { opacity: 0.5; }
body.theme-dark .hiw-title { color: var(--text-primary) !important; }
body.theme-dark .hiw-subtext { color: var(--text-muted) !important; }
body.theme-dark .hiw-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.2); }
body.theme-dark .hiw-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
body.theme-dark .hiw-card-title,
body.theme-dark .hiw-card-subtitle,
body.theme-dark .hiw-card-desc { color: var(--text-primary) !important; }
body.theme-dark .hiw-card-desc { opacity: 0.85; }
body.theme-dark .hiw-card-steps li { color: var(--text-secondary) !important; }
body.theme-dark .hiw-card-steps li::before { background: var(--bg-tertiary); box-shadow: 0 0 0 4px var(--bg-tertiary); }
body.theme-dark .hiw-card:hover .hiw-card-steps li::before { background: var(--primary); color: #fff; }
body.theme-dark .hiw-divider-badge { background: var(--primary); }
body.theme-dark .hiw-cta-btn { background: var(--primary) !important; color: #fff !important; }

/* ---------- Shop Banner ---------- */
body.theme-dark .shop-banner { background-color: var(--bg-tertiary) !important; }
body.theme-dark .shop-banner-overlay { background: linear-gradient(105deg, rgba(9,9,11,0.92) 0%, rgba(9,9,11,0.8) 45%, rgba(9,9,11,0.5) 100%) !important; }
body.theme-dark .shop-banner-title { color: var(--text-primary) !important; }
body.theme-dark .shop-banner-subtext { color: var(--text-secondary) !important; }

/* ---------- Featured Products ---------- */
body.theme-dark #featured-products-section { background: var(--bg-secondary) !important; }
  body.theme-dark #featured-products-section h2 { color: var(--text-primary) !important; }
  body.theme-dark #featured-products-section .best-sellers-subtitle { color: var(--text-muted) !important; }
  body.theme-dark #featured-products-section .best-sellers-btn { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.2); color: var(--text-primary) !important; }
  body.theme-dark #featured-products-section .bs-card-body { color: var(--text-secondary); }
  body.theme-dark #featured-products-section .bs-card-title a { color: var(--text-primary) !important; }
  body.theme-dark #featured-products-section .bs-card-image-wrap { background: var(--bg-tertiary) !important; }
  body.theme-dark .col-span-full.text-gray-500 { color: var(--text-muted) !important; }
  body.theme-dark .product-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.06); }
body.theme-dark .product-card h3,
body.theme-dark .product-card .text-gray-700,
body.theme-dark .product-card .font-semibold { color: var(--text-primary) !important; }
body.theme-dark .product-card .text-gray-500 { color: var(--text-muted) !important; }

/* ---------- Benefits ---------- */
body.theme-dark .benefits-section { background: linear-gradient(180deg, #16181d 0%, #15171c 50%, #14161b 100%) !important; }
body.theme-dark .benefits-section::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 35%, transparent), transparent) !important; opacity: 0.6; }
body.theme-dark .benefits-title { color: var(--text-primary) !important; }
body.theme-dark .benefits-subtext { color: var(--text-muted) !important; }
body.theme-dark .assurance-card { background: var(--bg-tertiary) !important; border-color: rgba(255,255,255,0.08); }
body.theme-dark .assurance-heading,
body.theme-dark .assurance-card:hover .assurance-heading { color: var(--text-primary) !important; }
body.theme-dark .assurance-desc { color: var(--text-muted) !important; }
body.theme-dark .assurance-icon-wrap i { color: var(--primary) !important; }
body.theme-dark .assurance-card:hover .assurance-icon-wrap i { color: #fff !important; }

/* ---------- Testimonials ---------- */
body.theme-dark section#testimonials,
body.theme-dark section.bg-gray-50.py-12 { background: var(--bg-secondary) !important; }
body.theme-dark section#testimonials h2 { color: var(--text-primary) !important; }
body.theme-dark section#testimonials .bg-white { background: var(--bg-tertiary) !important; border: 1px solid rgba(255,255,255,0.06); }
body.theme-dark section#testimonials .text-gray-600,
body.theme-dark section#testimonials .text-gray-700 { color: var(--text-secondary) !important; }
body.theme-dark section#testimonials .text-gray-500 { color: var(--text-muted) !important; }
body.theme-dark section#testimonials .font-semibold { color: var(--text-primary) !important; }
body.theme-dark section#testimonials .bg-gray-200 { background: var(--bg-primary) !important; }
body.theme-dark section#testimonials .text-gray-400 { color: var(--text-muted) !important; }

/* ---------- Newsletter ---------- */
body.theme-dark #newsletter,
body.theme-dark .newsletter-block { border-top: 1px solid rgba(255,255,255,0.08); }
/* Keep newsletter bg image visible in dark theme — do not override background */
body.theme-dark #newsletter h2 { color: var(--text-primary) !important; }
body.theme-dark #newsletter .text-blue-100 { color: var(--text-secondary) !important; }
body.theme-dark #newsletter input { background: var(--bg-secondary) !important; border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary) !important; }
body.theme-dark #newsletter input::placeholder { color: var(--text-muted); }
body.theme-dark #newsletter button { background: var(--primary) !important; color: #fff !important; }
body.theme-dark #newsletter button:hover { background: var(--primary-dark) !important; }

/* ---------- Header ---------- */
body.theme-dark .header-promo { background: var(--primary); border-bottom-color: rgba(0,0,0,0.2); }
body.theme-dark .site-header-bar { background: rgba(9, 9, 11, 0.9); border-bottom-color: rgba(255,255,255,0.08); }
body.theme-dark .site-header-bar.scrolled { background: rgba(9, 9, 11, 0.98); box-shadow: 0 4px 24px rgba(0,0,0,0.5); }
body.theme-dark .header-logo-link .header-logo-text { color: var(--text-primary); }
body.theme-dark .header-logo-link .header-logo-tag { color: var(--text-muted); }
body.theme-dark .header-nav-link { color: var(--text-secondary); }
body.theme-dark .header-search-input { background: var(--bg-tertiary); border-color: rgba(255,255,255,0.12); color: var(--text-primary); }
body.theme-dark .header-search-input::placeholder { color: var(--text-muted); }
body.theme-dark .header-action-btn { color: var(--text-secondary); }
body.theme-dark .header-action-btn:hover { background: var(--bg-tertiary); color: var(--primary); }
body.theme-dark .header-drawer { background: var(--bg-secondary); border-left-color: rgba(255,255,255,0.08); }
body.theme-dark .header-drawer-head { background: var(--bg-tertiary); }
body.theme-dark .header-drawer .gym-font { color: var(--text-primary); }
body.theme-dark #mobile-search { background: var(--bg-secondary); border-bottom-color: rgba(255,255,255,0.08); }
body.theme-dark #drawer-overlay { background: rgba(0,0,0,0.7); }

/* ---------- Footer ---------- */
body.theme-dark footer { background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important; border-top: 1px solid rgba(255,255,255,0.06); }
body.theme-dark footer .text-gray-300,
body.theme-dark footer .text-gray-400 { color: var(--text-secondary) !important; }
body.theme-dark footer .text-white { color: var(--text-primary) !important; }
body.theme-dark footer input::placeholder { color: var(--text-muted); }

/* ============================
   GLOBAL BEHAVIOR
   ============================ */

* {
  scroll-behavior: smooth;
}

/* ============================
   TYPOGRAPHY
   ============================ */

/* Gym display font utility class */
.gym-font {
  font-family: 'Anybody', sans-serif !important;
  letter-spacing: 0.08em;
  font-weight: 400;
  text-transform: uppercase;
}

/* Prevent horizontal overflow and white space on the right */
html {
  overflow-x: hidden;
  max-width: 100%;
}

/* Body font — Anybody site-wide */
body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================
   BUTTONS
   ============================ */

.btn-primary {
  background-color: var(--primary);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(200, 30, 30, 0.35);
}

/* Secondary button */
.btn-secondary {
  background-color: var(--secondary);
  color: var(--text-inverse);
  transition: all var(--transition-base);
}

.btn-secondary:hover {
  background-color: var(--secondary-light);
  transform: translateY(-2px);
}

/* ============================
   PRODUCT CARDS
   ============================ */

.product-card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

/* ============================
   BADGES
   ============================ */

.badge-sale {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #fff;
}

.badge-new {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
}

/* ============================
   HERO SECTIONS
   ============================ */

.hero-gradient {
  background: linear-gradient(
    135deg,
    #020617 0%,
    #020617 40%,
    #1e293b 100%
  );
  color: var(--text-inverse);
}

/* ============================
   USER PAGES LAYOUT
   ============================ */

body.user-page .container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Allow true full-width sections */
body.user-page section[class*="hero"],
body.user-page section[class*="Hero"],
body.user-page .full-width,
body.user-page .hero-img {
  max-width: 100% !important;
}

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

@media (max-width: 1024px) {
  body.user-page .container {
    max-width: 95%;
  }
}

@media (max-width: 768px) {
  body.user-page .container {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ============================
   RESPONSIVE – ALL DEVICES
   ============================ */

/* Prevent images and media from overflowing */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Prevent flex/grid children from overflowing */
.min-w-0 {
  min-width: 0;
}

/* Responsive tables – scroll on small screens */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 100%;
}

/* Form inputs full width on small screens */
@media (max-width: 640px) {
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}