/* ============================================
   Nored Farms - Theme System
   3 themes: Light (default) | Dark (Dusk) | Extra-Dark (Deep Iron)

   Loaded AFTER styles.css to override :root variables.
   Default: Light theme (cool white + accessible teal)
   [data-theme="dark"]: Dusk (midnight slate + bright teal)
   [data-theme="extra-dark"]: Deep Iron (near-black + bright teal)
   ============================================ */


/* ============================================
   LIGHT THEME (DEFAULT) - :root overrides
   Cool white backgrounds + accessible teal accent
   ============================================ */

:root {
    /* Light palette */
    --color--seedgreen: #1e2a24;
    --color--seedgreen-hover: #e8f0ec;
    --color--seedgreen-card: #ffffff;
    --color--snowwhite: #f4f7f5;
    --color--foamwhite: #eaf0ec;
    --color--mossroot: #10a080;
    --color--olivegreen: #4a5c54;
    --color--frostedglass: rgba(16, 160, 128, 0.12);
    --color--frostedglass-t55: rgba(16, 160, 128, 0.18);
    --color--frostedglass-t35: rgba(16, 160, 128, 0.10);
    --color--frostedglass-t8: rgba(16, 160, 128, 0.04);
    --color-guidance-fluorescent-green: #10a080;
    --color--lemongrass: rgba(16, 160, 128, 0.06);

    /* Frosted glass tokens */
    --seed-glass: rgba(255, 255, 255, 0.85);
    --seed-blur: blur(48px);
    --seed-text-on-glass: #1e2a24;
    --seed-text-muted-on-glass: rgba(30, 42, 36, 0.5);
    --seed-tab-pill: rgba(16, 160, 128, 0.10);

    /* Mapped vars */
    --color-primary: #10a080;
    --color-primary-light: #14b892;
    --color-primary-dark: #0d8a6e;
    --color-primary-subtle: rgba(16, 160, 128, 0.06);
    --color-primary-rgb: 16, 160, 128;

    --color-secondary: #10a080;
    --color-secondary-light: #4a5c54;
    --color-secondary-dark: #0d8a6e;

    --color-accent: #10a080;
    --color-accent-light: rgba(16, 160, 128, 0.12);
    --color-accent-subtle: rgba(16, 160, 128, 0.06);

    --color-bg: #f4f7f5;
    --color-bg-rgb: 244, 247, 245;
    --color-bg-alt: #eaf0ec;
    --color-bg-elevated: #ffffff;
    --color-bg-muted: #e4ece8;

    --color-surface: #ffffff;
    --color-surface-hover: #f0f5f2;
    --color-surface-active: #e8f0ec;

    --color-text: #1e2a24;
    --color-text-secondary: #4a5c54;
    --color-text-muted: #8a9c94;
    --color-text-inverse: #f4f7f5;

    --color-border: rgba(30, 60, 48, 0.08);
    --color-border-light: rgba(30, 60, 48, 0.05);
    --color-border-dark: rgba(30, 60, 48, 0.12);

    /* Status colors */
    --color-success: #10a080;
    --color-warning: #c4942a;
    --color-error: #c45c4b;
    --color-info: #3a8ab0;

    /* Gradients - light teal */
    --gradient-primary: linear-gradient(135deg, #e0f5ef 0%, #d0ece4 100%);
    --gradient-hero: linear-gradient(180deg, #f4f7f5 0%, #eaf0ec 100%);
    --gradient-text: linear-gradient(135deg, #10a080 0%, #0d8a6e 100%);
    --gradient-card: linear-gradient(180deg, #ffffff 0%, #f4f7f5 100%);

    /* Category accent colors */
    --color-adaptogen: #10a080;
    --color-mushroom: #7b4ed0;
    --color-nootropic: #3a6ad0;
    --color-mood: #d05088;

    /* Shadows - soft light */
    --shadow-card: 0 4px 12px -1px rgba(0, 0, 0, 0.05), 0 2px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-elevated: 0 20px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 14px -6px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.07), 0 4px 8px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 14px -6px rgba(0, 0, 0, 0.04);

    /* Color alias */
    --color-primary-alpha: rgba(16, 160, 128, 0.06);

    /* Animation tokens */
    --ease-luxury: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-reveal: 0.8s;
    --duration-slow: 1.2s;

    /* Theme-specific tokens */
    --stat-color: #1e2a24;
    --label-color: #10a080;
    --link-color: #10a080;
    --bg-dark-section: #111a22;
    --accent-on-dark: #50e8c0;

    /* Component tokens (used by overrides below) */
    --th-glass-bg: rgba(255, 255, 255, 0.92);
    --th-glass-border: rgba(30, 60, 48, 0.08);
    --th-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    --th-glass-text: #1e2a24;
    --th-glass-text-muted: rgba(30, 42, 36, 0.5);
    --th-nav-link: #1e2a24;
    --th-hamburger-bar: rgba(30, 42, 36, 0.45);
    --th-dd-bg: rgba(255, 255, 255, 0.98);
    --th-dd-border: rgba(30, 60, 48, 0.08);
    --th-dd-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    --th-dd-heading: rgba(30, 42, 36, 0.5);
    --th-dd-link: #1e2a24;
    --th-dd-meta: rgba(30, 42, 36, 0.5);
    --th-dd-group-label: rgba(30, 42, 36, 0.4);
    --th-menu-bg: rgba(255, 255, 255, 0.97);
    --th-menu-border: rgba(30, 60, 48, 0.06);
    --th-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    --th-menu-backdrop: rgba(0, 0, 0, 0.15);
    --th-menu-tab: rgba(30, 42, 36, 0.45);
    --th-menu-tab-hover: rgba(30, 42, 36, 0.7);
    --th-menu-tab-active: #1e2a24;
    --th-menu-close-bg: rgba(30, 42, 36, 0.06);
    --th-menu-close-border: rgba(30, 42, 36, 0.1);
    --th-menu-close-text: rgba(30, 42, 36, 0.45);
    --th-menu-close-hover-bg: rgba(30, 42, 36, 0.1);
    --th-menu-close-hover-text: #1e2a24;
    --th-menu-item-text: #1e2a24;
    --th-menu-pill-bg: rgba(16, 160, 128, 0.06);
    --th-menu-pill-border: rgba(16, 160, 128, 0.10);
    --th-menu-pill-hover-bg: rgba(16, 160, 128, 0.12);
    --th-menu-pill-hover-border: rgba(16, 160, 128, 0.15);
    --th-menu-footer-bg: rgba(244, 247, 245, 0.92);
    --th-menu-ref-link: rgba(30, 42, 36, 0.55);
    --th-menu-ref-link-hover: #1e2a24;
    --th-menu-ref-border: rgba(30, 60, 48, 0.06);
    --th-menu-group-header: rgba(30, 42, 36, 0.5);
    --th-menu-promo: rgba(30, 42, 36, 0.35);
    --th-menu-promo-hover: rgba(30, 42, 36, 0.6);
    --th-login-heading: #1e2a24;
    --th-social-btn-text: #1e2a24;
    --th-social-google-bg: rgba(16, 160, 128, 0.04);
    --th-social-google-border: rgba(16, 160, 128, 0.08);
    --th-social-google-hover: rgba(16, 160, 128, 0.08);
    --th-social-fb-bg: rgba(16, 160, 128, 0.03);
    --th-social-fb-border: rgba(16, 160, 128, 0.06);
    --th-social-fb-hover: rgba(16, 160, 128, 0.06);
    --th-login-input-bg: rgba(16, 160, 128, 0.03);
    --th-login-input-border: rgba(16, 160, 128, 0.12);
    --th-login-input-text: #1e2a24;
    --th-login-input-placeholder: rgba(16, 160, 128, 0.4);
    --th-login-input-focus-border: rgba(16, 160, 128, 0.4);
    --th-login-input-focus-bg: rgba(16, 160, 128, 0.04);
    --th-login-divider: rgba(16, 160, 128, 0.10);
    --th-login-submit-bg: rgba(16, 160, 128, 0.10);
    --th-login-submit-border: rgba(16, 160, 128, 0.2);
    --th-login-submit-text: #1e2a24;
    --th-login-submit-hover-bg: rgba(16, 160, 128, 0.18);
    --th-login-submit-hover-border: rgba(16, 160, 128, 0.35);
    --th-login-forgot: rgba(30, 42, 36, 0.5);
    --th-login-forgot-underline: rgba(16, 160, 128, 0.15);
    --th-login-forgot-hover: #1e2a24;
    --th-login-signup-cta-bg: rgba(16, 160, 128, 0.04);
    --th-login-signup-cta-border: rgba(16, 160, 128, 0.08);
    --th-login-signup-text: #4a5c54;
    --th-wholesale-bg: rgba(16, 160, 128, 0.04);
    --th-wholesale-border: rgba(16, 160, 128, 0.08);
    --th-wholesale-text: #1e2a24;
    --th-wholesale-hover-bg: rgba(16, 160, 128, 0.08);
    --th-wholesale-hover-border: rgba(16, 160, 128, 0.12);
    --th-footer-bg: #1e2a24;
    --th-footer-heading: rgba(244, 247, 245, 0.9);
    --th-footer-text: rgba(244, 247, 245, 0.55);
    --th-footer-text-dim: rgba(244, 247, 245, 0.35);
    --th-footer-border: rgba(244, 247, 245, 0.08);
    --th-footer-input-bg: rgba(244, 247, 245, 0.06);
    --th-footer-input-border: rgba(244, 247, 245, 0.12);
    --th-footer-input-text: rgba(244, 247, 245, 0.9);
    --th-footer-input-placeholder: rgba(244, 247, 245, 0.35);
    --th-footer-input-focus-border: rgba(244, 247, 245, 0.3);
    --th-footer-col-heading: rgba(244, 247, 245, 0.45);
    --th-footer-social-border: rgba(244, 247, 245, 0.12);
    --th-footer-social-text: rgba(244, 247, 245, 0.55);
    --th-footer-pattern-opacity: 0.12;
    --th-box-bg: rgba(255, 255, 255, 0.95);
    --th-box-border: rgba(30, 60, 48, 0.06);
    --th-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    --th-box-dark-bg: rgba(255, 255, 255, 0.92);
    --th-box-dark-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    --th-pattern-opacity: 0.06;
    --th-selection-bg: rgba(16, 160, 128, 0.12);
    --th-newsletter-text: rgba(30, 42, 36, 0.6);
    --th-newsletter-input-bg: rgba(16, 160, 128, 0.04);
    --th-newsletter-input-text: #1e2a24;
    --th-newsletter-input-border: rgba(16, 160, 128, 0.10);
    --th-newsletter-placeholder: rgba(16, 160, 128, 0.4);
    --th-carousel-arrow-bg: rgba(255, 255, 255, 0.95);
    --th-carousel-arrow-border: rgba(30, 60, 48, 0.08);
    --th-carousel-arrow-text: #4a5c54;
    --th-carousel-arrow-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    --th-carousel-arrow-hover-bg: var(--color-primary);
    --th-carousel-arrow-hover-border: var(--color-primary);
    --th-carousel-arrow-hover-text: #ffffff;
    --th-swipe-hint: rgba(30, 42, 36, 0.4);
    --th-thumb-bg: #eaf0ec;
    --th-product-thumb-bg: rgba(16, 160, 128, 0.06);
    --th-btn-frosted-bg: rgba(16, 160, 128, 0.06);
    --th-btn-frosted-hover: rgba(16, 160, 128, 0.12);
    --th-btn-pill-light-bg: #ffffff;
    --th-btn-pill-light-text: #1e2a24;
    --th-btn-pill-light-hover: #eaf0ec;
    --th-fav-btn-bg: rgba(255, 255, 255, 0.85);
    --th-fav-btn-border: rgba(30, 60, 48, 0.08);
    --th-fav-btn-hover-bg: rgba(255, 255, 255, 0.95);
    --th-btn-primary-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --th-inline-input-bg: #ffffff;
    --th-inline-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    --th-contact-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    --th-contact-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    --th-featured-hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    --th-mobile-cta-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
    --th-signup-overlay: rgba(0, 0, 0, 0.2);
    --th-scroll-indicator-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --th-tab-indicator-bg: rgba(16, 160, 128, 0.10);
    --th-tab-indicator-shadow: 0 0 8px rgba(16, 160, 128, 0.04), inset 0 0.5px 0 rgba(16, 160, 128, 0.15);
    --th-tab-indicator-border: rgba(16, 160, 128, 0.10);
    --th-btn-accent-bg: var(--color-primary);
    --th-btn-accent-hover: var(--color-primary-dark);
    --th-btn-accent-shadow: 0 4px 16px rgba(16, 160, 128, 0.15);
    --th-btn-accent-shimmer: 0.15;
    --th-btn-green-hover: var(--color-primary-dark);
    --th-btn-discover-hover: var(--color-primary-dark);
    --th-btn-discover-svg: #ffffff;
    --th-login-signup-btn-bg: var(--color-primary);
    --th-login-signup-btn-text: #ffffff;
    --th-login-signup-btn-hover: var(--color-primary-dark);
    --th-login-signup-btn-shadow: 0 0 16px rgba(16, 160, 128, 0.15);
}


/* ============================================
   DARK THEME (DUSK) - Midnight slate + bright teal
   ============================================ */

[data-theme="dark"] {
    --color--seedgreen: #c8d4da;
    --color--seedgreen-hover: #2a3644;
    --color--seedgreen-card: #222e3a;
    --color--snowwhite: #16202c;
    --color--foamwhite: #1c2836;
    --color--mossroot: #50e8c0;
    --color--olivegreen: #8a9ca6;
    --color--frostedglass: rgba(80, 232, 192, 0.12);
    --color--frostedglass-t55: rgba(80, 232, 192, 0.18);
    --color--frostedglass-t35: rgba(80, 232, 192, 0.10);
    --color--frostedglass-t8: rgba(80, 232, 192, 0.04);
    --color-guidance-fluorescent-green: #50e8c0;
    --color--lemongrass: rgba(80, 232, 192, 0.06);

    --seed-glass: rgba(22, 32, 44, 0.75);
    --seed-text-on-glass: #c8d4da;
    --seed-text-muted-on-glass: rgba(200, 212, 218, 0.5);
    --seed-tab-pill: rgba(80, 232, 192, 0.12);

    --color-primary: #50e8c0;
    --color-primary-light: #6aecd0;
    --color-primary-dark: #3cc4a0;
    --color-primary-subtle: rgba(80, 232, 192, 0.07);
    --color-primary-rgb: 80, 232, 192;

    --color-secondary: #50e8c0;
    --color-secondary-light: #8a9ca6;
    --color-secondary-dark: #3cc4a0;

    --color-accent: #50e8c0;
    --color-accent-light: rgba(80, 232, 192, 0.15);
    --color-accent-subtle: rgba(80, 232, 192, 0.07);

    --color-bg: #16202c;
    --color-bg-rgb: 22, 32, 44;
    --color-bg-alt: #1c2836;
    --color-bg-elevated: #2a3644;
    --color-bg-muted: #1e2a38;

    --color-surface: #1e2a38;
    --color-surface-hover: #2a3644;
    --color-surface-active: #324050;

    --color-text: #c8d4da;
    --color-text-secondary: #8a9ca6;
    --color-text-muted: #5a7080;
    --color-text-inverse: #12181a;

    --color-border: rgba(80, 232, 192, 0.06);
    --color-border-light: rgba(80, 232, 192, 0.04);
    --color-border-dark: rgba(80, 232, 192, 0.12);

    --color-success: #50e8c0;
    --color-warning: #d4a84b;
    --color-error: #c45c4b;
    --color-info: #5a9fb8;

    --gradient-primary: linear-gradient(135deg, #28584e 0%, #1e4640 100%);
    --gradient-hero: linear-gradient(180deg, #1c2836 0%, #16202c 100%);
    --gradient-text: linear-gradient(135deg, #50e8c0 0%, #3cc4a0 100%);
    --gradient-card: linear-gradient(180deg, #222e3a 0%, #1c2836 100%);

    --color-adaptogen: #50e8c0;
    --color-mushroom: #9b6ef0;
    --color-nootropic: #5a8af0;
    --color-mood: #f070a8;

    --shadow-card: 0 4px 12px -1px rgba(0, 0, 0, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 20px 30px -5px rgba(0, 0, 0, 0.4), 0 8px 14px -6px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.35), 0 4px 8px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.4), 0 8px 14px -6px rgba(0, 0, 0, 0.3);

    --color-primary-alpha: rgba(80, 232, 192, 0.07);

    --stat-color: #c8d4da;
    --label-color: #50e8c0;
    --link-color: #50e8c0;
    --bg-dark-section: #111a24;
    --accent-on-dark: #50e8c0;

    /* Component tokens - Dusk */
    --th-glass-bg: rgba(30, 42, 54, 0.92);
    --th-glass-border: rgba(80, 232, 192, 0.18);
    --th-glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    --th-glass-text: #c8d4da;
    --th-glass-text-muted: rgba(200, 212, 218, 0.65);
    --th-nav-link: #c8d4da;
    --th-hamburger-bar: rgba(200, 212, 218, 0.45);
    --th-dd-bg: rgba(34, 46, 58, 0.97);
    --th-dd-border: rgba(80, 232, 192, 0.08);
    --th-dd-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    --th-dd-heading: rgba(200, 212, 218, 0.5);
    --th-dd-link: #c8d4da;
    --th-dd-meta: rgba(200, 212, 218, 0.5);
    --th-dd-group-label: rgba(200, 212, 218, 0.4);
    --th-menu-bg: rgba(34, 46, 58, 0.95);
    --th-menu-border: rgba(80, 232, 192, 0.08);
    --th-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --th-menu-backdrop: rgba(0, 0, 0, 0.08);
    --th-menu-tab: rgba(200, 212, 218, 0.5);
    --th-menu-tab-hover: rgba(200, 212, 218, 0.7);
    --th-menu-tab-active: #c8d4da;
    --th-menu-close-bg: rgba(200, 212, 218, 0.06);
    --th-menu-close-border: rgba(200, 212, 218, 0.1);
    --th-menu-close-text: rgba(200, 212, 218, 0.4);
    --th-menu-close-hover-bg: rgba(200, 212, 218, 0.1);
    --th-menu-close-hover-text: #c8d4da;
    --th-menu-item-text: #c8d4da;
    --th-menu-pill-bg: rgba(80, 232, 192, 0.06);
    --th-menu-pill-border: rgba(80, 232, 192, 0.1);
    --th-menu-pill-hover-bg: rgba(80, 232, 192, 0.12);
    --th-menu-pill-hover-border: rgba(80, 232, 192, 0.15);
    --th-menu-footer-bg: rgba(28, 40, 54, 0.85);
    --th-menu-ref-link: rgba(200, 212, 218, 0.6);
    --th-menu-ref-link-hover: #c8d4da;
    --th-menu-ref-border: rgba(80, 232, 192, 0.08);
    --th-menu-group-header: rgba(200, 212, 218, 0.5);
    --th-menu-promo: rgba(200, 212, 218, 0.35);
    --th-menu-promo-hover: rgba(200, 212, 218, 0.6);
    --th-login-heading: #c8d4da;
    --th-social-btn-text: #c8d4da;
    --th-social-google-bg: rgba(80, 232, 192, 0.06);
    --th-social-google-border: rgba(80, 232, 192, 0.1);
    --th-social-google-hover: rgba(80, 232, 192, 0.12);
    --th-social-fb-bg: rgba(80, 232, 192, 0.04);
    --th-social-fb-border: rgba(80, 232, 192, 0.08);
    --th-social-fb-hover: rgba(80, 232, 192, 0.1);
    --th-login-input-bg: rgba(80, 232, 192, 0.03);
    --th-login-input-border: rgba(80, 232, 192, 0.12);
    --th-login-input-text: #c8d4da;
    --th-login-input-placeholder: rgba(80, 232, 192, 0.35);
    --th-login-input-focus-border: rgba(80, 232, 192, 0.5);
    --th-login-input-focus-bg: rgba(80, 232, 192, 0.04);
    --th-login-divider: rgba(80, 232, 192, 0.1);
    --th-login-submit-bg: rgba(80, 232, 192, 0.1);
    --th-login-submit-border: rgba(80, 232, 192, 0.2);
    --th-login-submit-text: #c8d4da;
    --th-login-submit-hover-bg: rgba(80, 232, 192, 0.2);
    --th-login-submit-hover-border: rgba(80, 232, 192, 0.4);
    --th-login-forgot: rgba(200, 212, 218, 0.5);
    --th-login-forgot-underline: rgba(80, 232, 192, 0.15);
    --th-login-forgot-hover: #c8d4da;
    --th-login-signup-cta-bg: rgba(80, 232, 192, 0.04);
    --th-login-signup-cta-border: rgba(80, 232, 192, 0.08);
    --th-login-signup-text: #8a9ca6;
    --th-wholesale-bg: rgba(80, 232, 192, 0.06);
    --th-wholesale-border: rgba(80, 232, 192, 0.1);
    --th-wholesale-text: #c8d4da;
    --th-wholesale-hover-bg: rgba(80, 232, 192, 0.12);
    --th-wholesale-hover-border: rgba(80, 232, 192, 0.15);
    --th-footer-bg: #1c2836;
    --th-footer-heading: #c8d4da;
    --th-footer-text: rgba(200, 212, 218, 0.55);
    --th-footer-text-dim: rgba(200, 212, 218, 0.35);
    --th-footer-border: rgba(80, 232, 192, 0.08);
    --th-footer-input-bg: rgba(80, 232, 192, 0.04);
    --th-footer-input-border: rgba(80, 232, 192, 0.12);
    --th-footer-input-text: #c8d4da;
    --th-footer-input-placeholder: rgba(80, 232, 192, 0.35);
    --th-footer-input-focus-border: rgba(80, 232, 192, 0.4);
    --th-footer-col-heading: rgba(200, 212, 218, 0.45);
    --th-footer-social-border: rgba(80, 232, 192, 0.12);
    --th-footer-social-text: #8a9ca6;
    --th-footer-pattern-opacity: 0.18;
    --th-box-bg: rgba(34, 46, 58, 0.92);
    --th-box-border: rgba(80, 232, 192, 0.06);
    --th-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --th-box-dark-bg: rgba(34, 46, 58, 0.90);
    --th-box-dark-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    --th-pattern-opacity: 0.18;
    --th-selection-bg: rgba(80, 232, 192, 0.15);
    --th-newsletter-text: rgba(200, 212, 218, 0.6);
    --th-newsletter-input-bg: rgba(80, 232, 192, 0.04);
    --th-newsletter-input-text: #c8d4da;
    --th-newsletter-input-border: rgba(80, 232, 192, 0.1);
    --th-newsletter-placeholder: rgba(80, 232, 192, 0.4);
    --th-carousel-arrow-bg: rgba(34, 46, 58, 0.95);
    --th-carousel-arrow-border: rgba(80, 232, 192, 0.1);
    --th-carousel-arrow-text: #8a9ca6;
    --th-carousel-arrow-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --th-carousel-arrow-hover-bg: #50e8c0;
    --th-carousel-arrow-hover-border: #50e8c0;
    --th-carousel-arrow-hover-text: #0a1210;
    --th-swipe-hint: rgba(200, 212, 218, 0.4);
    --th-thumb-bg: #1c2836;
    --th-product-thumb-bg: rgba(80, 232, 192, 0.08);
    --th-btn-frosted-bg: rgba(80, 232, 192, 0.08);
    --th-btn-frosted-hover: rgba(80, 232, 192, 0.15);
    --th-btn-pill-light-bg: #ffffff;
    --th-btn-pill-light-text: #c8d4da;
    --th-btn-pill-light-hover: #2a3644;
    --th-fav-btn-bg: rgba(34, 46, 58, 0.85);
    --th-fav-btn-border: rgba(80, 232, 192, 0.08);
    --th-fav-btn-hover-bg: rgba(34, 46, 58, 0.95);
    --th-btn-primary-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    --th-inline-input-bg: #ffffff;
    --th-inline-input-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --th-contact-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --th-contact-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --th-featured-hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    --th-mobile-cta-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    --th-signup-overlay: rgba(0, 0, 0, 0.3);
    --th-scroll-indicator-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    --th-tab-indicator-bg: rgba(80, 232, 192, 0.12);
    --th-tab-indicator-shadow: 0 0 8px rgba(80, 232, 192, 0.06), inset 0 0.5px 0 rgba(80, 232, 192, 0.2);
    --th-tab-indicator-border: rgba(80, 232, 192, 0.12);
    --th-btn-accent-bg: #50e8c0;
    --th-btn-accent-hover: #3cc4a0;
    --th-btn-accent-shadow: 0 4px 16px rgba(80, 232, 192, 0.2);
    --th-btn-accent-shimmer: 0.15;
    --th-btn-green-hover: #3cc4a0;
    --th-btn-discover-hover: #3cc4a0;
    --th-btn-discover-svg: #ffffff;
    --th-login-signup-btn-bg: #50e8c0;
    --th-login-signup-btn-text: #0a1210;
    --th-login-signup-btn-hover: #3cc4a0;
    --th-login-signup-btn-shadow: 0 0 16px rgba(80, 232, 192, 0.2);
}


/* ============================================
   EXTRA-DARK THEME (DEEP IRON) - Near-black + bright teal
   ============================================ */

[data-theme="extra-dark"] {
    --color--seedgreen: #bccac4;
    --color--seedgreen-hover: #263032;
    --color--seedgreen-card: #1e2628;
    --color--snowwhite: #12181a;
    --color--foamwhite: #181e20;
    --color--mossroot: #50e8c0;
    --color--olivegreen: #8e9c98;
    --color--frostedglass: rgba(80, 232, 192, 0.15);
    --color--frostedglass-t55: rgba(80, 232, 192, 0.2);
    --color--frostedglass-t35: rgba(80, 232, 192, 0.12);
    --color--frostedglass-t8: rgba(80, 232, 192, 0.05);
    --color-guidance-fluorescent-green: #50e8c0;
    --color--lemongrass: rgba(80, 232, 192, 0.07);

    --seed-glass: rgba(18, 24, 26, 0.7);
    --seed-text-on-glass: #bccac4;
    --seed-text-muted-on-glass: rgba(188, 202, 196, 0.5);
    --seed-tab-pill: rgba(80, 232, 192, 0.12);

    --color-primary: #50e8c0;
    --color-primary-light: #6aecd0;
    --color-primary-dark: #3cc4a0;
    --color-primary-subtle: rgba(80, 232, 192, 0.07);
    --color-primary-rgb: 80, 232, 192;

    --color-secondary: #50e8c0;
    --color-secondary-light: #8e9c98;
    --color-secondary-dark: #3cc4a0;

    --color-accent: #50e8c0;
    --color-accent-light: rgba(80, 232, 192, 0.15);
    --color-accent-subtle: rgba(80, 232, 192, 0.07);

    --color-bg: #12181a;
    --color-bg-rgb: 18, 24, 26;
    --color-bg-alt: #181e20;
    --color-bg-elevated: #263032;
    --color-bg-muted: #1a2022;

    --color-surface: #1a2022;
    --color-surface-hover: #263032;
    --color-surface-active: #2e3a3c;

    --color-text: #bccac4;
    --color-text-secondary: #8e9c98;
    --color-text-muted: #506460;
    --color-text-inverse: #12181a;

    --color-border: rgba(80, 232, 192, 0.05);
    --color-border-light: rgba(80, 232, 192, 0.05);
    --color-border-dark: rgba(80, 232, 192, 0.12);

    --color-success: #50e8c0;
    --color-warning: #d4a84b;
    --color-error: #c45c4b;
    --color-info: #5a9fb8;

    --gradient-primary: linear-gradient(135deg, #28584e 0%, #1e4640 100%);
    --gradient-hero: linear-gradient(180deg, #181e20 0%, #12181a 100%);
    --gradient-text: linear-gradient(135deg, #50e8c0 0%, #3cc4a0 100%);
    --gradient-card: linear-gradient(180deg, #1e2628 0%, #181e20 100%);

    --color-adaptogen: #50e8c0;
    --color-mushroom: #9b6ef0;
    --color-nootropic: #5a8af0;
    --color-mood: #f070a8;

    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    --color-primary-alpha: rgba(80, 232, 192, 0.07);

    --stat-color: #bccac4;
    --label-color: #50e8c0;
    --link-color: #50e8c0;
    --bg-dark-section: #0e1214;
    --accent-on-dark: #50e8c0;

    /* Component tokens - Deep Iron */
    --th-glass-bg: rgba(40, 52, 56, 0.88);
    --th-glass-border: rgba(80, 232, 192, 0.18);
    --th-glass-shadow: none;
    --th-glass-text: #bccac4;
    --th-glass-text-muted: rgba(188, 202, 196, 0.75);
    --th-nav-link: #bccac4;
    --th-hamburger-bar: rgba(188, 202, 196, 0.6);
    --th-dd-bg: #12181a;
    --th-dd-border: rgba(80, 232, 192, 0.05);
    --th-dd-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.15);
    --th-dd-heading: rgba(188, 202, 196, 0.5);
    --th-dd-link: #e8eeeb;
    --th-dd-meta: rgba(188, 202, 196, 0.5);
    --th-dd-group-label: rgba(188, 202, 196, 0.4);
    --th-menu-bg: rgba(18, 24, 26, 0.92);
    --th-menu-border: rgba(80, 232, 192, 0.08);
    --th-menu-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --th-menu-backdrop: rgba(0, 0, 0, 0.15);
    --th-menu-tab: rgba(188, 202, 196, 0.55);
    --th-menu-tab-hover: rgba(188, 202, 196, 0.8);
    --th-menu-tab-active: #e8eeeb;
    --th-menu-close-bg: rgba(255, 255, 255, 0.1);
    --th-menu-close-border: rgba(255, 255, 255, 0.15);
    --th-menu-close-text: #e8eeeb;
    --th-menu-close-hover-bg: rgba(255, 255, 255, 0.18);
    --th-menu-close-hover-text: #e8eeeb;
    --th-menu-item-text: #e8eeeb;
    --th-menu-pill-bg: rgba(80, 232, 192, 0.06);
    --th-menu-pill-border: rgba(80, 232, 192, 0.08);
    --th-menu-pill-hover-bg: rgba(80, 232, 192, 0.12);
    --th-menu-pill-hover-border: rgba(80, 232, 192, 0.12);
    --th-menu-footer-bg: var(--seed-glass);
    --th-menu-ref-link: var(--seed-text-muted-on-glass);
    --th-menu-ref-link-hover: #e8eeeb;
    --th-menu-ref-border: rgba(80, 232, 192, 0.08);
    --th-menu-group-header: var(--seed-text-muted-on-glass);
    --th-menu-promo: rgba(188, 202, 196, 0.35);
    --th-menu-promo-hover: rgba(188, 202, 196, 0.7);
    --th-login-heading: #e8eeeb;
    --th-social-btn-text: #e8eeeb;
    --th-social-google-bg: rgba(80, 232, 192, 0.08);
    --th-social-google-border: rgba(80, 232, 192, 0.12);
    --th-social-google-hover: rgba(80, 232, 192, 0.15);
    --th-social-fb-bg: rgba(80, 232, 192, 0.06);
    --th-social-fb-border: rgba(80, 232, 192, 0.1);
    --th-social-fb-hover: rgba(80, 232, 192, 0.12);
    --th-login-input-bg: rgba(80, 232, 192, 0.04);
    --th-login-input-border: rgba(80, 232, 192, 0.15);
    --th-login-input-text: #e8eeeb;
    --th-login-input-placeholder: rgba(188, 202, 196, 0.4);
    --th-login-input-focus-border: rgba(80, 232, 192, 0.4);
    --th-login-input-focus-bg: rgba(80, 232, 192, 0.08);
    --th-login-divider: rgba(80, 232, 192, 0.12);
    --th-login-submit-bg: rgba(80, 232, 192, 0.12);
    --th-login-submit-border: rgba(80, 232, 192, 0.2);
    --th-login-submit-text: #e8eeeb;
    --th-login-submit-hover-bg: rgba(80, 232, 192, 0.2);
    --th-login-submit-hover-border: rgba(80, 232, 192, 0.4);
    --th-login-forgot: var(--seed-text-muted-on-glass);
    --th-login-forgot-underline: rgba(80, 232, 192, 0.15);
    --th-login-forgot-hover: #e8eeeb;
    --th-login-signup-cta-bg: rgba(80, 232, 192, 0.04);
    --th-login-signup-cta-border: rgba(80, 232, 192, 0.08);
    --th-login-signup-text: #8e9c98;
    --th-wholesale-bg: rgba(80, 232, 192, 0.08);
    --th-wholesale-border: rgba(80, 232, 192, 0.12);
    --th-wholesale-text: #e8eeeb;
    --th-wholesale-hover-bg: rgba(80, 232, 192, 0.15);
    --th-wholesale-hover-border: rgba(80, 232, 192, 0.25);
    --th-footer-bg: #0e1214;
    --th-footer-heading: #bccac4;
    --th-footer-text: rgba(188, 202, 196, 0.55);
    --th-footer-text-dim: rgba(188, 202, 196, 0.35);
    --th-footer-border: rgba(80, 232, 192, 0.06);
    --th-footer-input-bg: rgba(80, 232, 192, 0.06);
    --th-footer-input-border: rgba(80, 232, 192, 0.1);
    --th-footer-input-text: #bccac4;
    --th-footer-input-placeholder: rgba(188, 202, 196, 0.35);
    --th-footer-input-focus-border: rgba(80, 232, 192, 0.3);
    --th-footer-col-heading: rgba(188, 202, 196, 0.4);
    --th-footer-social-border: rgba(80, 232, 192, 0.12);
    --th-footer-social-text: #8e9c98;
    --th-footer-pattern-opacity: 0.22;
    --th-box-bg: rgba(18, 24, 26, 0.92);
    --th-box-border: rgba(80, 232, 192, 0.05);
    --th-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --th-box-dark-bg: rgba(18, 24, 26, 0.88);
    --th-box-dark-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --th-pattern-opacity: 0.22;
    --th-selection-bg: rgba(80, 232, 192, 0.2);
    --th-newsletter-text: var(--color-text-secondary);
    --th-newsletter-input-bg: var(--color-surface);
    --th-newsletter-input-text: var(--color-text);
    --th-newsletter-input-border: var(--color-border);
    --th-newsletter-placeholder: var(--color-text-muted);
    --th-carousel-arrow-bg: rgba(30, 38, 40, 0.85);
    --th-carousel-arrow-border: rgba(80, 232, 192, 0.08);
    --th-carousel-arrow-text: var(--color-text-secondary);
    --th-carousel-arrow-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --th-carousel-arrow-hover-bg: rgba(80, 232, 192, 0.15);
    --th-carousel-arrow-hover-border: rgba(80, 232, 192, 0.15);
    --th-carousel-arrow-hover-text: var(--color-text);
    --th-swipe-hint: var(--color-text-muted);
    --th-thumb-bg: #1e2628;
    --th-product-thumb-bg: rgba(80, 232, 192, 0.08);
    --th-btn-frosted-bg: var(--color--frostedglass-t35);
    --th-btn-frosted-hover: var(--color--frostedglass-t55);
    --th-btn-pill-light-bg: var(--color--snowwhite);
    --th-btn-pill-light-text: var(--color--seedgreen);
    --th-btn-pill-light-hover: var(--color--foamwhite);
    --th-fav-btn-bg: rgba(30, 38, 40, 0.85);
    --th-fav-btn-border: rgba(80, 232, 192, 0.08);
    --th-fav-btn-hover-bg: rgba(30, 38, 40, 0.95);
    --th-btn-primary-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    --th-inline-input-bg: var(--color-surface);
    --th-inline-input-shadow: var(--shadow-md);
    --th-contact-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    --th-contact-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    --th-featured-hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    --th-mobile-cta-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    --th-signup-overlay: rgba(0, 0, 0, 0.4);
    --th-scroll-indicator-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    --th-tab-indicator-bg: rgba(80, 232, 192, 0.15);
    --th-tab-indicator-shadow: 0 0 8px rgba(80, 232, 192, 0.06), inset 0 0.5px 0 rgba(80, 232, 192, 0.2);
    --th-tab-indicator-border: rgba(80, 232, 192, 0.12);
    --th-btn-accent-bg: #50e8c0;
    --th-btn-accent-hover: #6aecd0;
    --th-btn-accent-shadow: 0 4px 16px rgba(80, 232, 192, 0.2);
    --th-btn-accent-shimmer: 0.15;
    --th-btn-green-hover: #6aecd0;
    --th-btn-discover-hover: #6aecd0;
    --th-btn-discover-svg: #0a1210;
    --th-login-signup-btn-bg: #50e8c0;
    --th-login-signup-btn-text: #12181a;
    --th-login-signup-btn-hover: #5eedc8;
    --th-login-signup-btn-shadow: 0 0 16px rgba(80, 232, 192, 0.25);
}


/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 1001;
    background: transparent;
}

.scroll-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transform-origin: left;
    transform: scaleX(0);
    animation: scroll-progress linear;
    animation-timeline: scroll(root);
}

@keyframes scroll-progress {
    to { transform: scaleX(1); }
}

.scroll-progress.js-fallback::after {
    animation: none;
}


/* ============================================
   SCROLL REVEAL SYSTEM
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--duration-reveal) var(--ease-luxury),
        transform var(--duration-reveal) var(--ease-luxury);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }


/* ============================================
   HERO TEXT REVEAL (line-by-line)
   ============================================ */

.hero-text-content > * {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s var(--ease-out-expo),
        transform 0.9s var(--ease-out-expo);
}

.hero-text-content.is-visible > .hero-label { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.hero-text-content.is-visible > .hero-heading { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.hero-text-content.is-visible > .hero-body { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.hero-text-content.is-visible > .hero-actions { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.hero-text-content.is-visible > .hero-quicknav { transition-delay: 0.7s; opacity: 1; transform: translateY(0); }


/* ============================================
   KEN BURNS HERO IMAGE
   ============================================ */

.hero-photo img {
    animation: kenBurns 20s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes kenBurns {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}


/* ============================================
   PULL QUOTE
   ============================================ */

.pull-quote {
    position: relative;
    padding-left: 24px;
    margin: 48px 0;
    max-width: 640px;
}

.pull-quote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--color-primary);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.8s var(--ease-luxury) 0.2s;
}

.pull-quote.is-visible::before {
    transform: scaleY(1);
}

.pull-quote p {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 300;
    color: var(--color-text);
    line-height: 1.4;
    letter-spacing: -0.3px;
}

.pull-quote cite {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    color: var(--color-text-muted);
}


/* ============================================
   SECTION DIVIDER (draw on scroll)
   ============================================ */

.section-divider {
    display: block;
    width: 100%;
    max-width: 1000px;
    height: 1px;
    margin: 0 auto;
    border: none;
    background: var(--color-border-dark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease-luxury);
}

.section-divider.is-visible {
    transform: scaleX(1);
}


/* ============================================
   EDITORIAL LINK UNDERLINES
   ============================================ */

.link-editorial {
    position: relative;
    text-decoration: none;
    color: var(--link-color, var(--color-text));
    font-weight: 400;
}

.link-editorial::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.4s var(--ease-luxury);
}

.link-editorial:hover::after { width: 100%; }

.link-arrow {
    position: relative;
    text-decoration: none;
    color: var(--link-color, var(--color-text));
    font-weight: 400;
    font-size: 14px;
}

.link-arrow::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 0.3s var(--ease-luxury);
}

.link-arrow:hover::after { transform: translateX(4px); }


/* ============================================
   PREMIUM BUTTON MICRO-INTERACTIONS (shimmer)
   ============================================ */

.btn-pill-accent {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--th-btn-accent-bg);
    color: #0a1210;
    border-radius: 99em;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s var(--ease-luxury), box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-pill-accent:hover {
    background: var(--th-btn-accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--th-btn-accent-shadow);
}

.btn-pill-accent:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-pill-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, var(--th-btn-accent-shimmer)), transparent);
    transition: left 0.6s ease;
}

.btn-pill-accent:hover::before { left: 100%; }


/* ============================================
   NUMBER COUNTER - tabular-nums
   ============================================ */

.proof-stat-number {
    font-variant-numeric: tabular-nums;
}


/* ============================================
   OVERLAPPING SECTION STYLES
   Products (dark section) + Classes
   ============================================ */

.s-products {
    background: var(--bg-dark-section, #111a22);
    padding: 72px 24px;
    position: relative;
    z-index: 2;
    margin-top: -24px;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 40px rgba(17, 26, 42, 0.15);
}

.s-classes {
    position: relative;
    z-index: 3;
    margin-top: -16px;
    border-radius: 24px 24px 0 0;
    background: var(--color-bg);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.06);
}


/* ============================================
   SELECTION + FOCUS
   ============================================ */

::selection {
    background: var(--th-selection-bg);
}

:focus-visible {
    outline-color: var(--color-primary);
}


/* ============================================
   NAV / HEADER OVERRIDES
   Uses component tokens for all 3 themes
   ============================================ */

.nav-logo {
    color: var(--color--seedgreen);
}

.nav-logo .dot {
    background: var(--color-primary);
}

.nav-main-links a,
.nav-auth-links a {
    color: var(--color--seedgreen);
}

/* Scrolled nav: frosted glass pills */
.nav.scrolled .nav-left {
    background: var(--th-glass-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-color: var(--th-glass-border);
    box-shadow: var(--th-glass-shadow);
}

.nav.scrolled .nav-logo {
    color: var(--th-glass-text);
}

.nav.scrolled .nav-logo .dot {
    background: var(--color-primary);
}

.nav.scrolled .nav-main-links a {
    color: var(--th-nav-link);
}

.nav.scrolled .nav-auth-links {
    background: var(--th-glass-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-color: var(--th-glass-border);
    box-shadow: var(--th-glass-shadow);
}

/* Ensure auth pill matches nav-left pill exactly */
.nav.scrolled .nav-auth-links a:not(.nav-cta):not(.nav-auth-signup) {
    color: var(--th-glass-text-muted);
}

.nav.scrolled .nav-auth-links a:not(.nav-cta) {
    color: var(--th-glass-text-muted);
}

/* CTA button */
.nav-cta {
    background: var(--color-primary);
    color: #0a1210 !important;
}

.nav-cta:hover {
    background: var(--color-primary-dark);
    color: #0a1210 !important;
}

.nav.scrolled .nav-cta {
    background: var(--color-primary);
    color: #0a1210 !important;
    border-color: transparent;
}

.nav.scrolled .nav-cta:hover {
    background: var(--color-primary-dark);
    color: #0a1210 !important;
}

/* Auth links */
.nav-link-auth {
    color: var(--color--seedgreen);
}

.nav.scrolled .nav-link-auth {
    color: var(--th-glass-text-muted);
}

.nav-auth-signup {
    background: var(--color-primary);
    color: #0a1210 !important;
}

.nav-auth-signup:hover {
    background: var(--color-primary-dark);
}

.nav.scrolled .nav-auth-signup {
    background: var(--color-primary);
    color: #0a1210 !important;
}

.nav.scrolled .nav-auth-signup:hover {
    background: var(--color-primary-dark);
    color: #0a1210 !important;
}

/* Hamburger */
.hamburger span {
    background: var(--th-hamburger-bar);
}

.nav.scrolled .hamburger {
    background: var(--th-glass-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--th-glass-border);
    box-shadow: var(--th-glass-shadow);
}

.nav.scrolled .hamburger span {
    background: var(--th-glass-text);
}

/* Mobile CTA */
.nav-cta-mobile {
    background: var(--color-primary);
    color: #0a1210 !important;
}

.nav.scrolled .nav-cta-mobile {
    background: var(--color-primary);
    color: #0a1210 !important;
    border: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Theme toggle scrolled state */
.nav.scrolled .theme-toggle {
    background: var(--th-glass-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-color: var(--th-glass-border);
    box-shadow: var(--th-glass-shadow);
    color: var(--th-glass-text);
}


/* ============================================
   NAV DROPDOWN OVERRIDES
   ============================================ */

.nav-dropdown {
    background: var(--th-dd-bg);
    border-color: var(--th-dd-border);
    box-shadow: var(--th-dd-shadow);
}

.nav-dropdown::before {
    background: var(--th-dd-bg);
    border-left-color: var(--th-dd-border);
    border-top-color: var(--th-dd-border);
}

.nav-dropdown-col:first-child {
    border-right-color: var(--th-dd-border);
}

.nav-dropdown-footer {
    border-top-color: var(--th-dd-border);
}

.nav-dropdown-footer a {
    color: var(--color-primary);
}

/* Scrolled dropdown */
.nav.scrolled .nav-dropdown {
    background: var(--th-dd-bg);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border-color: var(--th-dd-border);
    box-shadow: var(--th-dd-shadow);
}

.nav.scrolled .nav-dropdown::before {
    background: var(--th-dd-bg);
    border-color: var(--th-dd-border);
}

.nav.scrolled .nav-dropdown-heading {
    color: var(--th-dd-heading);
}

.nav.scrolled .nav-dropdown-link {
    color: var(--th-dd-link);
}

.nav.scrolled .nav-dropdown-meta {
    color: var(--th-dd-meta);
}

.nav.scrolled .nav-dropdown-col:first-child {
    border-color: var(--th-dd-border);
}

.nav.scrolled .nav-dropdown-footer {
    border-color: var(--th-dd-border);
}

.nav.scrolled .nav-dropdown-footer a {
    color: var(--color-primary);
}

.nav.scrolled .nav-dropdown-group-label {
    color: var(--th-dd-group-label);
}


/* ============================================
   FULLSCREEN MOBILE MENU
   ============================================ */

.fs-menu-tabs {
    background: var(--th-menu-bg);
    border-color: var(--th-menu-border);
    box-shadow: var(--th-menu-shadow);
}

.fs-menu-backdrop {
    background: var(--th-menu-backdrop);
}

.fs-menu-scroll {
    background: var(--th-menu-bg);
    border-color: var(--th-menu-border);
    box-shadow: var(--th-menu-shadow);
}

.fs-tab {
    color: var(--th-menu-tab);
}

.fs-tab:hover {
    color: var(--th-menu-tab-hover);
}

.fs-tab.active {
    color: var(--th-menu-tab-active);
}

.fs-tab-indicator {
    background: var(--th-tab-indicator-bg);
    box-shadow: var(--th-tab-indicator-shadow);
    border-color: var(--th-tab-indicator-border);
}

.fs-menu-close {
    background: var(--th-menu-close-bg);
    border-color: var(--th-menu-close-border);
    color: var(--th-menu-close-text);
}

.fs-menu-close:hover {
    background: var(--th-menu-close-hover-bg);
    color: var(--th-menu-close-hover-text);
}

.fs-menu-logo {
    background: var(--color-primary);
}

.fs-menu.panels-collapsed .fs-menu-tabs {
    background: var(--th-menu-bg);
}

.fs-menu.panels-collapsed.over-light .fs-menu-tabs {
    background: var(--th-menu-bg);
}

.fs-menu.panels-collapsed.over-light .fs-menu-close {
    color: var(--th-menu-close-text);
}

.fs-menu.panels-collapsed.over-light .fs-menu-logo {
    background: var(--color-primary);
}

/* Menu panel content */
.product-name,
.panel-item-title,
.fs-panel[data-panel="login"] {
    color: var(--th-menu-item-text);
}

.category-pill-link {
    color: var(--th-menu-item-text);
    background: var(--th-menu-pill-bg);
    border-color: var(--th-menu-pill-border);
}

.category-pill-link:hover {
    background: var(--th-menu-pill-hover-bg);
    border-color: var(--th-menu-pill-hover-border);
}

.product-price,
.shop-all-link,
.all-articles-link {
    color: var(--color-primary);
}

.ref-list li a {
    color: var(--th-menu-ref-link);
    border-color: var(--th-menu-ref-border);
}

.ref-list li a:hover {
    color: var(--th-menu-ref-link-hover);
}

.product-thumb {
    background: var(--th-product-thumb-bg);
}

.panel-group-header {
    color: var(--th-menu-group-header);
}

/* Menu footer */
.fs-menu-footer {
    background: var(--th-menu-footer-bg);
    backdrop-filter: blur(48px);
    -webkit-backdrop-filter: blur(48px);
}

.fs-cta-primary {
    background: var(--color-primary);
    color: #0a1210;
}

.fs-cta-primary:hover {
    background: var(--color-primary-dark);
}

.fs-cta-secondary {
    color: var(--th-menu-item-text);
}

.fs-menu-promo {
    color: var(--th-menu-promo);
}

.fs-menu-promo:hover {
    color: var(--th-menu-promo-hover);
}


/* ============================================
   LOGIN PANEL IN MOBILE MENU
   ============================================ */

.login-heading {
    color: var(--th-login-heading);
}

.social-btn {
    color: var(--th-social-btn-text);
}

.social-google {
    background: var(--th-social-google-bg);
    box-shadow: inset 0 0 0 1px var(--th-social-google-border);
}

.social-google:hover {
    background: var(--th-social-google-hover);
}

.social-facebook {
    background: var(--th-social-fb-bg);
    box-shadow: inset 0 0 0 1px var(--th-social-fb-border);
}

.social-facebook:hover {
    background: var(--th-social-fb-hover);
}

.login-input {
    color: var(--th-login-input-text);
    background: var(--th-login-input-bg);
    border-color: var(--th-login-input-border);
}

.login-input::placeholder {
    color: var(--th-login-input-placeholder);
}

.login-input:focus {
    border-color: var(--th-login-input-focus-border);
    background: var(--th-login-input-focus-bg);
}

.login-divider::before,
.login-divider::after {
    background: var(--th-login-divider);
}

.login-submit {
    color: var(--th-login-submit-text);
    background: var(--th-login-submit-bg);
    border-color: var(--th-login-submit-border);
}

.login-submit:hover {
    background: var(--th-login-submit-hover-bg);
    border-color: var(--th-login-submit-hover-border);
}

.login-forgot {
    color: var(--th-login-forgot);
    text-decoration-color: var(--th-login-forgot-underline);
}

.login-forgot:hover {
    color: var(--th-login-forgot-hover);
}

.login-signup-cta {
    background: var(--th-login-signup-cta-bg);
    border-color: var(--th-login-signup-cta-border);
}

.login-signup-text {
    color: var(--th-login-signup-text);
}

.login-signup-btn {
    background: var(--th-login-signup-btn-bg);
    color: var(--th-login-signup-btn-text);
}

.login-signup-btn:hover {
    background: var(--th-login-signup-btn-hover);
    box-shadow: var(--th-login-signup-btn-shadow);
}


/* ============================================
   WHOLESALE + MISC MOBILE MENU
   ============================================ */

.wholesale-login-link {
    color: var(--th-wholesale-text);
    background: var(--th-wholesale-bg);
    border-color: var(--th-wholesale-border);
}

.wholesale-login-link:hover {
    background: var(--th-wholesale-hover-bg);
    border-color: var(--th-wholesale-hover-border);
}


/* ============================================
   FOOTER OVERRIDES
   ============================================ */

.seed-footer {
    background: var(--th-footer-bg);
}

.seed-footer-mission h3 {
    color: var(--th-footer-heading);
}

.seed-footer-mission p {
    color: var(--th-footer-text);
}

.seed-footer-signup p {
    color: var(--th-footer-text);
}

.seed-footer-email {
    color: var(--th-footer-input-text);
    background: var(--th-footer-input-bg);
    border-color: var(--th-footer-input-border);
}

.seed-footer-email::placeholder {
    color: var(--th-footer-input-placeholder);
}

.seed-footer-email:focus {
    border-color: var(--th-footer-input-focus-border);
}

.seed-footer-email-btn {
    background: var(--color-primary);
    color: #0a1210;
}

.seed-footer-email-btn:hover {
    background: var(--color-primary-dark);
}

.seed-footer-top {
    border-bottom-color: var(--th-footer-border);
}

.seed-footer-col h4 {
    color: var(--th-footer-col-heading);
}

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

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

.seed-footer-links {
    border-bottom-color: var(--th-footer-border);
}

.seed-footer-disclaimer {
    color: var(--th-footer-text-dim);
}

.seed-footer-social {
    border-top-color: var(--th-footer-border);
}

.seed-footer-social .social-follow a {
    border-color: var(--th-footer-social-border);
    color: var(--th-footer-social-text);
}

.seed-footer-social .social-follow a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-alpha);
}

.seed-footer-bottom {
    color: var(--th-footer-text-dim);
}

/* Footer pattern opacity */
footer::before,
.seed-footer::before {
    opacity: var(--th-footer-pattern-opacity);
}


/* ============================================
   BUTTON OVERRIDES
   ============================================ */

/* Green dot label */
.green-dot-label::before {
    background: var(--color-primary);
}

/* btn-pill-green */
.btn-pill-green {
    background: var(--color-primary);
    color: #0a1210;
}

.btn-pill-green:hover {
    background: var(--th-btn-green-hover);
}

/* btn-discover */
.btn-discover {
    background: var(--color-primary);
    color: #0a1210;
}

.btn-discover:hover {
    background: var(--th-btn-discover-hover);
}

.btn-discover svg {
    fill: var(--th-btn-discover-svg);
}

/* btn-frosted */
.btn-frosted {
    background: var(--th-btn-frosted-bg);
}

.btn-frosted:hover {
    background: var(--th-btn-frosted-hover);
}

/* btn-primary */
.btn-primary {
    background: var(--color-primary);
    color: #0a1210;
}

.btn-primary:hover {
    box-shadow: var(--th-btn-primary-hover-shadow);
}

/* btn-pill-light */
.btn-pill-light {
    background: var(--th-btn-pill-light-bg);
    color: var(--th-btn-pill-light-text);
}

.btn-pill-light:hover {
    background: var(--th-btn-pill-light-hover);
}

/* Favorite button */
.fav-btn {
    background: var(--th-fav-btn-bg);
    border-color: var(--th-fav-btn-border);
    color: var(--color-text-muted);
}

.fav-btn:hover {
    background: var(--th-fav-btn-hover-bg);
    color: var(--color-text);
}

/* Hero CTA */
.hero-cta {
    background: var(--color-primary);
    color: #0a1210;
}

.final-cta-btn {
    background: var(--color-primary);
    color: #0a1210;
}

/* Featured badge */
.featured-badge {
    background: var(--color-primary);
    color: #0a1210;
}

/* Product badges */
.product-badge.rare,
.product-badge.premium {
    background: var(--color-primary);
    color: #0a1210;
}


/* ============================================
   CONTENT BOX OVERRIDES
   ============================================ */

.content-box {
    background: var(--th-box-bg);
    border-color: var(--th-box-border);
    box-shadow: var(--th-box-shadow);
}

.tech-inner,
.lab-inner,
.cta-inner {
    background: var(--th-box-dark-bg);
    border-color: var(--th-box-border);
    box-shadow: var(--th-box-dark-shadow);
}

.interstitial-inner {
    background: var(--th-box-dark-bg);
    border-color: var(--th-box-border);
    box-shadow: var(--th-box-dark-shadow);
}

.about-inner {
    background: var(--th-box-dark-bg);
    border-color: var(--th-box-border);
    box-shadow: var(--th-box-dark-shadow);
}

.proof-inner {
    background: var(--th-box-dark-bg);
    border-color: var(--th-box-border);
    box-shadow: var(--th-box-shadow);
}


/* ============================================
   BACKGROUND PATTERN OPACITY
   ============================================ */

section::before,
main::before {
    opacity: var(--th-pattern-opacity);
}

section::after {
    opacity: var(--th-pattern-opacity);
}

.hero-pattern {
    opacity: 0.03;
}


/* ============================================
   NEWSLETTER / FORMS
   ============================================ */

.newsletter-content p {
    color: var(--th-newsletter-text);
}

.newsletter-form input {
    background: var(--th-newsletter-input-bg);
    color: var(--th-newsletter-input-text);
    border: 1px solid var(--th-newsletter-input-border);
}

.newsletter-form input::placeholder {
    color: var(--th-newsletter-placeholder);
}


/* ============================================
   INLINE CTA
   ============================================ */

.inline-cta-title {
    color: var(--color-text);
}

.inline-cta-text {
    color: var(--color-text-secondary);
}

.inline-input-group {
    background: var(--th-inline-input-bg);
    box-shadow: var(--th-inline-input-shadow);
}

.inline-input-group input {
    color: var(--color-text);
}

.inline-input-group input::placeholder {
    color: var(--color-text-muted);
}


/* ============================================
   MISC ELEMENT OVERRIDES
   ============================================ */

/* Carousel overlay arrows */
.carousel-overlay-arrow {
    background: var(--th-carousel-arrow-bg);
    border-color: var(--th-carousel-arrow-border);
    color: var(--th-carousel-arrow-text);
    box-shadow: var(--th-carousel-arrow-shadow);
}

.carousel-overlay-arrow:hover {
    background: var(--th-carousel-arrow-hover-bg);
    border-color: var(--th-carousel-arrow-hover-border);
    color: var(--th-carousel-arrow-hover-text);
}

/* Contact card shadows */
.contact-card {
    box-shadow: var(--th-contact-shadow);
}

.contact-card:hover {
    box-shadow: var(--th-contact-hover-shadow);
}

/* Featured card shadows */
.featured-card:hover {
    box-shadow: var(--th-featured-hover-shadow);
}

/* Mobile sticky CTA */
.mobile-cta {
    box-shadow: var(--th-mobile-cta-shadow);
}

/* Signup overlay */
.signup-overlay {
    background: var(--th-signup-overlay);
}

/* Scroll indicator */
.scroll-indicator {
    background: var(--color-primary);
    color: #0a1210;
    box-shadow: var(--th-scroll-indicator-shadow);
}

/* Swipe hint */
.swipe-hint {
    color: var(--th-swipe-hint);
}

/* Panel thumbnails */
.panel-item-image.img-approach {
    background: var(--th-thumb-bg);
}

.article-thumb-1 {
    background: var(--th-thumb-bg);
}


/* ============================================
   DARK SECTIONS - Keep dark in ALL themes
   Products section retains midnight background
   ============================================ */

.s-products {
    background: #111a22 !important;
    color: rgba(255, 255, 255, 0.88);
}

.s-products h2 {
    color: rgba(255, 255, 255, 0.88);
}

.s-products p {
    color: rgba(255, 255, 255, 0.4);
}

.s-products .product-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.s-products .product-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.s-products .product-card-code {
    color: rgba(255, 255, 255, 0.3);
}

.s-products .product-card-name {
    color: rgba(255, 255, 255, 0.85);
}

.s-products .product-card-price {
    color: #50e8c0;
}

.s-products .product-card-img {
    background: rgba(255, 255, 255, 0.03);
}

.s-products .products-shopall {
    color: #50e8c0;
}

.s-products .products-shopall::after {
    background: #50e8c0;
}

.s-products::before {
    opacity: 0.22 !important;
}


/* ============================================
   PREFERS-REDUCED-MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .reveal-left, .reveal-right, .reveal-scale,
    .reveal-stagger > *, .hero-text-content > *,
    .tech-col ul li {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-photo {
        opacity: 1 !important;
        transform: none !important;
    }

    .pull-quote::before {
        transform: scaleY(1) !important;
    }

    .section-divider {
        transform: scaleX(1) !important;
    }

    .s-products { margin-top: 0; border-radius: 0; }
    .s-classes { margin-top: 0; border-radius: 0; }
}


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

@media (max-width: 768px) {
    .s-products { border-radius: 16px 16px 0 0; margin-top: -12px; }
    .s-classes { border-radius: 16px 16px 0 0; margin-top: -8px; }
}


/* ============================================
   HARDCODED COLOR OVERRIDES
   Button text on accent backgrounds always dark
   ============================================ */

.btn-pill-green,
.btn-discover,
.nav-cta:hover,
.nav.scrolled .nav-cta:hover,
.nav-auth-signup,
.nav.scrolled .nav-auth-signup:hover,
.login-signup-btn,
.fs-cta-primary,
.btn-primary,
.product-badge.rare,
.seed-footer-email-btn,
.inline-cta button,
.hero-cta,
.final-cta-btn,
.product-option button.active,
.btn-dark {
    color: #0a1210 !important;
}

/* Nav logo text */
.nav-logo,
.nav.scrolled .nav-logo,
.nav-logo-text {
    color: var(--color-text) !important;
}

/* Nav CTA */
.nav-cta,
.nav.scrolled .nav-cta {
    background: var(--color-primary) !important;
    color: #0a1210 !important;
    border-color: var(--color-primary) !important;
}

.nav-auth-signup {
    background: var(--color-primary) !important;
    color: #0a1210 !important;
}

/* Footer mission heading */
.seed-footer-mission h3 {
    color: var(--th-footer-heading);
}

.seed-footer-email {
    color: var(--th-footer-input-text);
}

/* Inline CTA */
.inline-input-group {
    background: var(--th-inline-input-bg);
}

.inline-cta-title {
    color: var(--color-text);
}

/* SVG strokes */
.hero-graphic svg path {
    stroke: var(--color-border-dark);
}

/* Login form labels */
.login-form label {
    color: var(--color-text-secondary);
}

/* Auto table overrides */
.auto-table thead th {
    background: var(--color-primary);
    color: #0a1210;
}

.auto-table tbody td {
    color: var(--color-text);
    background: var(--color-bg);
}

.auto-table tbody tr:nth-child(even) td {
    background: var(--color-bg-alt);
}