/* ======================================================= */
/*   1. ГЛОБАЛНИ СТИЛОВЕ И ПРОМЕНЛИВИ (LIFE BIOHACK DESIGN) */
/*   Визуална идентичност: Фармацевтична чистота × Биотех   */
/*   Вижте DESIGN_BRIEF.md за пълния дизайн наръчник.        */
/* ======================================================= */

:root {
    /* ── LIFE BioHack — Pharmaceutical White × Biotech Theme ──
       Concept: pharmaceutical purity + high-tech biotechnology.
       Pure white canvas, cool-neutral secondary surfaces,
       precision cyan (#00C4C8) as the science accent.
       Ref: DESIGN_BRIEF.md
    ── */
    --bg-light: #ffffff;
    --bg-subtle: #F7F9FB;           /* Cool clean white — pharma-grade surface */
    --bg-card: #ffffff;
    --accent-cyan: #00c4c8;
    --accent-gold: #d4a843;
    --text-primary: #0f2540;
    --text-secondary: #4a6a85;
    --border-glow: rgba(0, 196, 200, 0.15);
    --shadow-glow: 0 4px 24px rgba(0, 0, 0, 0.05);
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;
    --color-sale: #c9a227;          /* Gold — promotion / sale accent */

    /* Legacy aliases */
    --color-primary: #00c4c8;
    --color-secondary: #00c4c8;
    --color-dark: #0f2540;
    --color-light: #F7F9FB;         /* Cool clean white (no teal tint) */
    --color-white: #ffffff;
    --color-gray: #4a6a85;

    /* Typography — DESIGN_BRIEF.md */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-primary: 'Space Grotesk', sans-serif;
    --font-secondary: 'DM Sans', sans-serif;

    /* Design Elements */
    --border-radius: 14px;
    --box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --transition-speed: 0.3s ease;

    /* Button Gradients */
    --btn-gradient-primary: linear-gradient(135deg, #00c4c8 0%, #00a8ac 100%);
    --btn-gradient-primary-hover: linear-gradient(135deg, #00d4d8 0%, #00c4c8 100%);
    --btn-gradient-cta: linear-gradient(135deg, #00c4c8 0%, #00a8ac 100%);
    --btn-gradient-premium: linear-gradient(135deg, #00c4c8 0%, #0090a8 100%);
    --btn-gradient-biohack: linear-gradient(135deg, #00c4c8 0%, #0090a8 45%, #00c4c8 100%);

    /* Glow shadows — cyan */
    --glow-primary-sm: 0 4px 16px rgba(0, 196, 200, 0.25);
    --glow-primary-md: 0 8px 28px rgba(0, 196, 200, 0.30);
    --glow-primary-lg: 0 12px 40px rgba(0, 196, 200, 0.38), 0 0 50px rgba(0, 196, 200, 0.15);
    --glow-cta-sm: 0 4px 16px rgba(0, 196, 200, 0.25);
    --glow-cta-md: 0 8px 28px rgba(0, 196, 200, 0.30);
    --glow-cta-lg: 0 12px 40px rgba(0, 196, 200, 0.35), 0 0 50px rgba(0, 196, 200, 0.15);

    /* Glass effects */
    --glass-bg-light: rgba(255, 255, 255, 0.90);
    --glass-bg-dark: rgba(240, 247, 248, 0.90);
    --glass-border-light: rgba(0, 196, 200, 0.18);
    --glass-border-dark: rgba(0, 196, 200, 0.22);
    --glass-blur: blur(20px) saturate(180%);

    /* Neon → softer glow for light bg */
    --neon-primary: 0 0 6px rgba(0, 196, 200, 0.5), 0 0 16px rgba(0, 196, 200, 0.3);
    --neon-cta: 0 0 6px rgba(0, 196, 200, 0.5), 0 0 16px rgba(0, 196, 200, 0.3);

    /* Semantic theme variables */
    --bg-primary: #ffffff;
    --bg-secondary: #F7F9FB;        /* Cool pharma-white secondary surface */
    --accent: #00c4c8;
    --accent-rgb: 0, 196, 200;
    --accent-secondary: #d4a843;
    --accent-secondary-rgb: 212, 168, 67;
    --border-color: rgba(0, 196, 200, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --spotlight-color: rgba(0, 196, 200, 0.04);
    --note-color: #00a8ac;
    --success-color: #10b981;
    --error-color: #ef4444;
    --skeleton-bg: #EEF2F7;         /* Clean cool-gray skeleton */
    --skeleton-highlight: #F7F9FB;

    /* Header */
    --header-height: 70px;
    --header-offset: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    --header-bg: rgba(255, 255, 255, 0.72);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --header-gradient-start: rgba(255, 255, 255, 0.78);
    --header-gradient-end: rgba(247, 249, 251, 0.78);
    --header-border: rgba(0, 196, 200, 0.10);
    --header-border-scrolled: rgba(0, 196, 200, 0.22);
    --header-scrolled-bg: rgba(255, 255, 255, 0.88);
    --header-glass-blur: blur(16px) saturate(180%);
    --header-glass-blur-scrolled: blur(24px) saturate(200%);
    --hero-bg-start: #ffffff;
    --hero-bg-end: #F7F9FB;
    --theme-gradient: linear-gradient(155deg, #ffffff 0%, #F7F9FB 100%);

    /* Promo banner */
    --promo-banner-height: 48px;
    --double-promo-banner-height: var(--promo-banner-height);
}

/* Single light-cyan theme */
[data-theme] {
    --bg-primary: #ffffff;
    --bg-secondary: #F7F9FB;        /* Cool pharma-white secondary surface */
    --accent: #00c4c8;
    --accent-rgb: 0, 196, 200;
    --accent-secondary: #d4a843;
    --accent-secondary-rgb: 212, 168, 67;
    --border-color: rgba(0, 196, 200, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.05);
    --spotlight-color: rgba(0, 196, 200, 0.04);
    --note-color: #00a8ac;
    --success-color: #10b981;
    --error-color: #ef4444;
    --skeleton-bg: #EEF2F7;         /* Clean cool-gray skeleton */
    --skeleton-highlight: #F7F9FB;
    --header-bg: rgba(255, 255, 255, 0.96);
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --header-gradient-start: rgba(255, 255, 255, 0.98);
    --header-gradient-end: rgba(248, 252, 253, 0.98);
    --header-border: rgba(0, 196, 200, 0.12);
    --header-border-scrolled: rgba(0, 196, 200, 0.25);
    --header-scrolled-bg: rgba(255, 255, 255, 0.99);
    --hero-bg-start: #ffffff;
    --hero-bg-end: #F7F9FB;
    --theme-gradient: linear-gradient(155deg, #ffffff 0%, #F7F9FB 100%);
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
    height: 100%;
}

@supports (height: 100dvh) {
    html {
        height: 100dvh;
    }
}

body {
    font-family: var(--font-secondary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: clip;
    transition: background-color 0.4s ease, color 0.4s ease;
    padding-top: var(--header-offset);
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* ── SKIP-TO-CONTENT LINK (Accessibility) ── */
.skip-link {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--color-primary);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: var(--glow-primary-md);
    transition: top 0.2s ease;
    white-space: nowrap;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* ── GLOBAL FOCUS-VISIBLE STYLES (Keyboard nav) ── */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #00c4c8, #00d4d8, #00a8ac);
    z-index: 9998;
    transition: width 0.1s linear;
    box-shadow: 0 0 6px rgba(0, 196, 200, 0.5);
    pointer-events: none;
}

/* ── HIGH CONTRAST MODE (Accessibility) ── */
@media (prefers-contrast: more) {
    :root {
        --color-primary: #0066CC;
        --color-secondary: #CC3300;
    }

    .btn-primary,
    .btn-hero-primary,
    .btn-premium {
        outline: 2px solid currentColor;
    }

    .product-card,
    .stat-item,
    .testimonial-card,
    .ingredient-card,
    .faq-item,
    .info-card-section {
        border-width: 2px;
        border-style: solid;
        border-color: var(--text-primary);
    }

    .nav-links a::after {
        height: 3px;
    }
}

/* Prevent flashing of content that's dynamically loaded */
.content-loading {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.content-loaded {
    opacity: 1;
}
        
body.nav-open {
    overflow: hidden;
}

body.no-transition .product-grid {
    transition: none !important;
}

body.no-transition * {
    transition: none !important;
    animation: none !important;
}

a {
    text-decoration: none;
    color: var(--color-primary);
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--color-secondary);
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

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

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding {
    padding: 80px 0;
}

.section-bg {
    background-color: var(--bg-secondary);
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.01em;
}

/* Creates the underline effect for titles (LIFE BioHack style) */
.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    border-radius: 2px;
}

.section-title p {
    font-size: 1.1rem;
    color: var(--color-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Buttons (LIFE BioHack — Premium Style) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-align: center;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.35s ease,
                box-shadow 0.35s ease,
                color 0.35s ease,
                border-color 0.35s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Shimmer sweep on all btn variants */
.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn:hover::after {
    left: 150%;
}

.btn-primary {
    background: linear-gradient(135deg, #00c4c8 0%, #0090a8 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 196, 200, 0.35);
    border-radius: 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00d4d8 0%, #00c4c8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 196, 200, 0.5);
}

.btn-primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: var(--glow-primary-sm);
}

.btn-back {
    position: fixed;
    z-index: 1000;
    top: 90px;
    left: 20px;
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all var(--transition-speed);
}

.btn-back::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    border-style: solid;
    border-width: 0.2em 0.2em 0 0;
    border-color: var(--color-secondary);
    transform: rotate(-135deg);
    transition: all var(--transition-speed);
}

.btn-back:hover::before {
    border-color: var(--color-primary);
    transform: rotate(-135deg) scale(1.2);
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .btn-back {
        top: 80px;
        left: 15px;
        width: 2em;
        height: 2em;
    }
    
    .btn-back::before {
        width: 0.9em;
        height: 0.9em;
    }
}

.btn-large {
    padding: 15px 35px;
    font-size: 1.1rem;
}

.btn-full {
    display: block;
    width: 100%;
}

/* Animation on scroll (LIFE BioHack style) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ======================================================= */
/*          2. PROMO BANNER (LIPOLOR STYLE)              */
/* ======================================================= */

.promo-banner {
    position: relative; /* Changed from fixed to relative - banner stays in page flow */
    width: 100%;
    background: #ffffff;
    color: #0f2540;
    text-align: center;
    padding: 11px 20px;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(0, 196, 200, 0.25);
    z-index: 1; /* No longer needs high z-index since it's not fixed */
}

[data-theme] .promo-banner {
    background: #ffffff;
    color: #0f2540;
    border-bottom-color: rgba(0, 196, 200, 0.20);
}

.promo-banner svg {
    color: #00c4c8;
    stroke: #00c4c8;
}

[data-theme] .promo-banner svg {
    color: #00c4c8;
    stroke: #00c4c8;
}

.promo-banner p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* ======================================================= */
/*          3. СКЕЛЕТНО ЗАРЕЖДАНЕ И ПРЕХОДИ                */
/* ======================================================= */
.skeleton {
    background-color: var(--skeleton-bg);
    border-radius: 4px;
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    background-image: linear-gradient(90deg, var(--skeleton-bg) 0px, var(--skeleton-highlight) 40px, var(--skeleton-bg) 80px);
    background-size: 600px;
}
@keyframes skeleton-pulse {
    0% { background-position: -100px; }
    40%, 100% { background-position: 270px; }
}

.skeleton-wrapper .skeleton-h2 { width: 60%; height: 45px; margin-bottom: 1.5rem; }
.skeleton-wrapper .skeleton-title { width: 70%; height: 60px; margin: 0 auto 1rem; }
.skeleton-wrapper .skeleton-text { width: 90%; height: 20px; margin: 0 auto; }
.skeleton-wrapper .skeleton-text.short { width: 60%; margin-top: 1rem; }
.skeleton-wrapper .skeleton-image { width: 100%; height: 350px; }
.skeleton-wrapper .skeleton-button { width: 150px; height: 48px; margin-top: 2rem; }
.skeleton-wrapper .category-title-skeleton { margin: 4rem 0 1rem 0; }

.skeleton-card { background: transparent; border-color: transparent; }
.skeleton-card .skeleton-line { height: 20px; margin-bottom: 0.5rem; }
.skeleton-card .skeleton-line.short { width: 50%; }
.skeleton-card .skeleton-bar { height: 22px; margin-bottom: 10px; }
.skeleton-card:hover { transform: none; box-shadow: none; border-color: transparent; }

/* Плавни преходи при зареждане на съдържание */
#main-content-container.is-loaded > * {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
#main-content-container:not(.is-loaded) > * {
    opacity: 0;
}


/* ======================================================= */
/*          4. ХЕДЪР И НАВИГАЦИЯ (LIPOLOR STYLE)          */
/* ======================================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--header-offset);
    padding-top: env(safe-area-inset-top, 0px);
    background: linear-gradient(135deg,
        var(--header-gradient-start) 0%,
        var(--header-gradient-end) 100%);
    backdrop-filter: var(--header-glass-blur);
    -webkit-backdrop-filter: var(--header-glass-blur);
    border-bottom: 1px solid var(--header-border);
    z-index: 1001;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 4px 24px rgba(0, 0, 0, 0.04);
}

/* Morphing glass — intensifies on scroll without layout shift */
.main-header.scrolled,
html.header-pre-scrolled .main-header {
    background: var(--header-scrolled-bg);
    backdrop-filter: var(--header-glass-blur-scrolled);
    -webkit-backdrop-filter: var(--header-glass-blur-scrolled);
    border-bottom-color: var(--header-border-scrolled);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 32px rgba(0, 196, 200, 0.10);
}

.header-container {
    max-width: 1140px; 
    margin: 0 auto; 
    padding: 0 20px; 
    height: 100%;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 1rem;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--font-primary);
}

.logo-container img { 
    height: 52px; 
    width: 52px; 
    /* Keep alt text accessible for screen readers but hide it visually when image loads */
    object-fit: contain;
    /* Smooth transition when image loads */
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

/* While loading, reduce opacity but don't hide completely for accessibility */
.logo-container img:not([src]),
.logo-container img[src=""] {
    opacity: 0.1;
}

.logo-container .brand-name {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1.15;
}

.logo-container .brand-slogan {
    font-family: var(--font-secondary);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
    display: block;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.main-nav { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
}

/* Mobile-only cart link: hidden on desktop, shown inside the mobile nav drawer */
.cart-link-mobile {
    display: none;
}

.nav-links { 
    list-style: none; 
    display: flex; 
    gap: 1.5rem; 
    align-items: center; 
}

.nav-links a { 
    text-decoration: none; 
    color: var(--text-primary);
    font-weight: 600;
    position: relative;
    padding: 5px 0;
    transition: color var(--transition-speed);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-speed);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover { 
    color: var(--accent); 
}

.cart-link { 
    position: relative; 
}

/* Стил за активен линк при скрол */
.nav-links a.active {
    color: var(--accent);
    font-weight: 700;
}

/* ── NAV DROPDOWN (Категории) ── */
.nav-item.has-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    transition: color var(--transition-speed);
    line-height: 1;
}

.nav-dropdown-toggle:hover {
    color: var(--accent);
}

.dropdown-arrow {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.nav-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    list-style: none;
    padding: 0.4rem 0;
    margin: 0;
}

.nav-dropdown-menu.open {
    display: block;
}

.nav-dropdown-menu li a {
    display: block;
    padding: 0.55rem 1.25rem;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
}

.nav-dropdown-menu li a:hover {
    background: var(--bg-secondary);
    color: var(--accent);
    padding-left: 1.5rem;
}

/* Suppress the underline pseudo-element inside the dropdown */
.nav-dropdown-menu li a::after {
    display: none !important;
}

/* -- Header Actions Container -- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 196, 200, 0.05);
    border: 1px solid rgba(0, 196, 200, 0.12);
    border-radius: 50px;
    padding: 4px 6px;
}

/* -- Cart Icon Button -- */
.cart-icon-btn {
    background: transparent;
    border: 2px solid rgba(0, 196, 200, 0.35);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    position: relative;
    text-decoration: none;
    color: var(--accent);
    flex-shrink: 0;
}

.cart-icon-btn:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--color-white);
    transform: scale(1.08);
    box-shadow: 0 4px 18px rgba(0, 196, 200, 0.45);
}

.cart-icon-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.cart-icon-btn .cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent);
    color: var(--color-white);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--color-white);
}

.cart-icon-btn:hover .cart-badge {
    background: var(--color-white);
    color: var(--accent);
}

/* -- Fixed Mobile Cart Icon -- */
.cart-icon-fixed-mobile {
    display: none; /* Hidden by default, shown only on mobile */
    position: fixed;
    top: 80px; /* Position below the header to avoid overlapping */
    right: 20px;
    z-index: 1004;
    background: var(--color-white);
    border: 2px solid rgba(0, 196, 200, 0.45);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    text-decoration: none;
    color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 196, 200, 0.2);
}

.cart-icon-fixed-mobile:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--color-white);
    transform: scale(1.08);
    box-shadow: 0 6px 22px rgba(0, 196, 200, 0.5);
}

.cart-icon-fixed-mobile svg {
    width: 22px;
    height: 22px;
    transition: all 0.3s ease;
}

.cart-icon-fixed-mobile .cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: var(--color-white);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid var(--color-white);
    box-shadow: 0 2px 8px rgba(0, 196, 200, 0.3);
}

.cart-icon-fixed-mobile:hover .cart-badge {
    background: var(--color-white);
    color: var(--accent);
}

/* Hide fixed cart when menu is open */
body.nav-open .cart-icon-fixed-mobile {
    display: none !important;
}

/* -- Search Container -- */
.search-container {
    position: relative;
}

.search-toggle-btn {
    background: transparent;
    border: 2px solid rgba(0, 196, 200, 0.35);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
    color: var(--accent);
    flex-shrink: 0;
}

.search-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--color-white);
    transform: scale(1.08);
    box-shadow: 0 4px 18px rgba(0, 196, 200, 0.45);
}

.search-toggle-btn[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--color-white);
    box-shadow: 0 4px 18px rgba(0, 196, 200, 0.45);
}

.search-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    max-height: 0;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1000;
}

.search-dropdown.active {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
}

.search-input-wrapper {
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-secondary);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.search-clear-btn {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.search-clear-btn:hover {
    color: var(--accent);
    background: var(--bg-tertiary);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.search-results::-webkit-scrollbar {
    width: 6px;
}

.search-results::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.search-results::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.search-result-item:hover {
    background: var(--bg-tertiary);
    transform: translateX(5px);
}

.search-result-image {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-name mark {
    background: linear-gradient(135deg, rgba(255, 107, 153, 0.2), rgba(255, 204, 107, 0.2));
    color: var(--accent);
    font-weight: 700;
    padding: 0 0.2em;
    border-radius: 3px;
}

.search-result-tagline {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-price {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.search-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    animation: fadeInUp 0.3s ease-out;
}

.search-no-results svg {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    opacity: 0.35;
    animation: searchBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

@keyframes searchBounce {
    from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1)   rotate(0deg);   opacity: 0.35; }
}

.search-no-results p {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.search-no-results .search-no-results-hint {
    font-size: 0.82rem;
    opacity: 0.75;
}

.search-loading {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.search-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

/* -- Мобилно меню -- */
.menu-toggle { 
    display: none; 
    width: 30px; 
    height: 22px; 
    flex-direction: column; 
    justify-content: space-between; 
    background: none; 
    border: none; 
    cursor: pointer; 
    z-index: 1003; 
}

.menu-toggle span { 
    display: block; 
    width: 100%; 
    height: 2px; 
    background-color: var(--text-primary); 
    border-radius: 2px; 
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: var(--overlay-bg); 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.4s ease, visibility 0.4s ease; 
    z-index: 999; 
}

.nav-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

main { 
    padding-top: 0; /* Removed since body already has padding */
}

/* ======================================================= */
/*          5. СЕКЦИИ НА СТРАНИЦАТА (LIPOLOR & STORE)    */
/* ======================================================= */

/* --- HERO SECTION (LIFE BioHack style) --- */
.hero-section {
    min-height: 500px;
    padding: 60px 0;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    text-align: center;
    position: relative;
    color: var(--text-primary);
    background: var(--theme-gradient);
    overflow: hidden; /* Prevents animated overlay from extending beyond bounds */
}

/* Hero section with custom background image */
.hero-section[data-bg-image] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay for better text readability when using background images */
.hero-section[data-bg-image]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 196, 200, 0.15) 0%, 
        rgba(0, 196, 200, 0.15) 100%);
    backdrop-filter: blur(2px);
    z-index: 0;
}

[data-theme] .hero-section[data-bg-image]::before {
    background: linear-gradient(135deg, 
        rgba(6, 8, 14, 0.75) 0%, 
        rgba(5, 13, 32, 0.75) 100%);
}

/* Overlay for custom gradients to ensure text readability */
.hero-section.hero-custom-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none; /* No overlay by default, let gradient show through */
    z-index: 0;
}

/* Ensure text is always readable with custom backgrounds */
.hero-section.hero-custom-bg .hero-content,
.hero-section[data-bg-image] .hero-content {
    position: relative;
    z-index: 1;
}

/* Theme-aware text colors for custom gradients - Light theme */
[data-theme] .hero-section.hero-custom-bg .hero-content h1 {
    color: var(--text-primary);
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.8), 
                 0 1px 4px rgba(255, 255, 255, 0.9);
}

[data-theme] .hero-section.hero-custom-bg .hero-content p {
    color: var(--text-secondary);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9), 
                 0 1px 3px rgba(255, 255, 255, 0.95);
}

[data-theme] .hero-section.hero-custom-bg .stat-item strong {
    color: #0f2540;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.8),
                 0 1px 4px rgba(255, 255, 255, 0.9);
    background: none;
    -webkit-text-fill-color: #0f2540;
}

[data-theme] .hero-section.hero-custom-bg .stat-item span {
    color: #0f2540;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
}

/* General light theme styles for stat-item */
[data-theme] .stat-item strong {
    color: #0f2540;
    -webkit-text-fill-color: #0f2540;
}

[data-theme] .stat-item span {
    color: #0f2540;
}

[data-theme] .stat-item {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    box-shadow: 0 4px 24px rgba(0, 196, 200, 0.08);
}

/* Theme-aware text colors for custom gradients - Dark theme */
[data-theme] .hero-section.hero-custom-bg .hero-content h1 {
    color: var(--text-primary);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
                 0 0 4px rgba(0, 0, 0, 0.15);
}

[data-theme] .hero-section.hero-custom-bg .hero-content p {
    color: var(--text-secondary);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25),
                 0 0 3px rgba(0, 0, 0, 0.12);
}

[data-theme] .hero-section.hero-custom-bg .stat-item strong {
    color: var(--text-primary);
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.28),
                 0 0 4px rgba(0, 0, 0, 0.15);
    background: none;
    -webkit-text-fill-color: var(--text-primary);

}

[data-theme] .hero-section.hero-custom-bg .stat-item span {
    color: var(--text-secondary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Theme-aware trust badges for custom backgrounds - Light theme */
[data-theme] .hero-section.hero-custom-bg .trust-badge {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

[data-theme] .hero-section.hero-custom-bg .trust-badge:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
}

/* Theme-aware trust badges for custom backgrounds - Dark theme */
[data-theme] .hero-section.hero-custom-bg .trust-badge {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    backdrop-filter: blur(10px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

[data-theme] .hero-section.hero-custom-bg .trust-badge:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

/* Enhanced gradient animation for premium feel */
.hero-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at center,
        rgba(0, 196, 200, 0.08) 0%,
        transparent 50%
    );
    animation: heroGradientPulse 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .hero-section::before,
    .hero-section::after {
        animation: none !important;
        transform: none !important;
        opacity: 0.35;
    }
}

[data-theme] .hero-section::after {
    background: radial-gradient(
        circle at center,
        rgba(0, 196, 200, 0.07) 0%,
        transparent 50%
    );
}

@keyframes heroGradientPulse {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(10%, 10%) scale(1.1);
        opacity: 0.8;
    }
}

.hero-section .container { 
    width: 100%; 
}

.hero-content { 
    z-index: 1; 
    padding: 1rem 0;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700; 
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-shadow: none;
    animation: fadeInDown 1s ease-out;
    letter-spacing: -0.03em;
    -webkit-text-fill-color: currentColor;
}

/* Light theme: solid pharma navy — no gradient text hacks */
[data-theme="light"] .hero-content h1,
[data-theme="light"] .hero-content h1 .hero-gradient-word {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: var(--text-primary);
    background-clip: border-box;
    animation: none;
}

/* Dark theme only: subtle cyan accent in title */
[data-theme="dark"] .hero-content h1 {
    background: linear-gradient(135deg, #e8f4f8 0%, #00c4c8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-content p {
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: var(--text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
    opacity: 1;
    animation: fadeInUp 1s ease-out 0.3s; 
    animation-fill-mode: both;
}

.hero-stats {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.6s;
    animation-fill-mode: both;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-light);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 196, 200, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-icon {
    margin-bottom: 10px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow-primary-sm);
}

.stat-item:hover .stat-icon {
    transform: scale(1.1);
}

.stat-item strong {
    font-size: 2rem;
    font-family: var(--font-primary);
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Hero CTA Buttons */
.hero-cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.4s;
    animation-fill-mode: both;
}

.btn-hero-primary {
    background: var(--btn-gradient-cta);
    color: white;
    border: none;
    padding: 17px 44px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--glow-cta-sm), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

@keyframes bioCtaPulse {
    0%, 100% {
        box-shadow: var(--glow-cta-sm),
                    0 0 0 0 rgba(0, 196, 200, 0.3);
    }
    50% {
        box-shadow: var(--glow-cta-md),
                    0 0 0 12px rgba(0, 196, 200, 0);
    }
}

.btn-hero-primary svg {
    display: inline-block;
    vertical-align: middle;
    color: white;
    stroke: white;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-hero-primary:hover::before {
    left: 150%;
}

.btn-hero-primary:hover {
    transform: translateY(-5px) scale(1.07);
    box-shadow: var(--glow-cta-lg);
    animation: none;
    background: linear-gradient(135deg, #00c4c8 0%, #0090a8 50%, #d4a843 100%);
}

.btn-hero-primary:hover svg {
    transform: translateX(4px);
}

.btn-hero-primary:active {
    transform: translateY(0) scale(1.01);
    animation: none;
    box-shadow: var(--glow-cta-sm);
}

.btn-hero-secondary {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--text-primary);
    border: 2px solid var(--glass-border-light);
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(0, 196, 200, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-hero-secondary svg {
    display: inline-block;
    vertical-align: middle;
    color: var(--accent);
    stroke: var(--accent);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.btn-hero-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 196, 200, 0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-hero-secondary:hover::before {
    left: 150%;
}

.btn-hero-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 196, 200, 0.07);
    transform: translateY(-4px) scale(1.03);
    box-shadow: var(--glow-primary-sm),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn-hero-secondary:hover svg {
    transform: translateX(4px);
}

[data-theme] .btn-hero-secondary {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 196, 200, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme] .btn-hero-secondary:hover {
    background: rgba(0, 196, 200, 0.1);
    box-shadow: var(--glow-primary-md),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Hero Trust Badges */
.hero-trust-badges {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
    animation: fadeInUp 1s ease-out 0.8s;
    animation-fill-mode: both;
}

.trust-badge {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trust-badge svg {
    color: var(--success-color);
    stroke: var(--success-color);
    flex-shrink: 0;
}

.trust-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 196, 200, 0.1), 
        transparent);
    transition: left 0.6s ease;
}

.trust-badge:hover::before {
    left: 100%;
}

.trust-badge:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 196, 200, 0.25);
}

[data-theme] .trust-badge {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.12);
}

[data-theme] .trust-badge:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    box-shadow: 0 8px 20px rgba(212, 168, 67, 0.25);
}

.hero-guarantee {
    margin-top: 20px;
    font-size: 0.95rem;
    opacity: 0.95;
}

/* --- INFO CARD SECTION (LIFE BioHack style) --- */
.info-card-section { 
    padding: 80px 0; 
}

.info-card-section .container { 
    display: flex; 
    align-items: center; 
    gap: 3rem; 
}

.info-card-section.image-align-right .container { 
    flex-direction: row-reverse; 
}

.info-card-image, .info-card-content { 
    flex: 1; 
    min-width: 300px; 
}

.info-card-content {
    padding: 2.5rem;
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-light);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.08);
}

[data-theme] .info-card-content {
    background: var(--glass-bg-dark);
    border-color: var(--glass-border-dark);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.08);
}

.info-card-image img { 
    width: 100%; 
    height: auto; 
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.info-card-content h2 { 
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 500;
    margin-bottom: 1rem; 
}

.info-card-content p { 
    color: var(--text-secondary);
    margin-bottom: 1.5rem; 
}


/* --- CATEGORY & PRODUCT SECTIONS (Store + LIFE BioHack style) --- */
.category-section { 
    padding: 60px 0; 
}

/* First category section should be closer to hero section */
.category-section:first-of-type {
    padding-top: 30px;
}

.category-header { 
    cursor: pointer; 
    outline: none; 
}

.category-header:focus-visible { 
    box-shadow: 0 0 0 2px var(--accent); 
    border-radius: 8px; 
}

.category-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 500;
    color: var(--text-primary);
    margin: 2rem 0 1rem 0;
    position: relative;
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: -0.02em;
}

.category-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-visible .category-title::after { 
    transform: scaleX(1); 
}

.category-image-wrapper { 
    width: 100%; 
    border-radius: var(--border-radius);
    overflow: hidden; 
    margin: 1rem 0 2rem 0; 
    box-shadow: var(--box-shadow);
}

.category-image-wrapper img { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    display: block; 
}

.category-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 1rem auto 2rem auto;
    text-align: center;
    max-width: 800px;
}

.expand-icon {
    /* Removed - expand icon no longer used */
    display: none;
}

.category-expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
}

.category-expand-icon svg {
    display: block;
}

[aria-expanded="true"] .category-expand-icon {
    transform: rotate(180deg);
    color: var(--accent);
}

/* --- PRODUCT GRID & CARDS (Store + LIFE BioHack style) --- */
.product-grid {
    display: grid; 
    gap: 30px; 
    grid-template-columns: 1fr;
    max-height: 0; 
    overflow: hidden; 
    opacity: 0; 
    margin-top: 0;
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.7s ease-in-out;
}

.category-header[aria-expanded="true"] + .product-grid { 
    max-height: 15000px; 
    opacity: 1; 
    margin-top: 2rem; 
}

.category-section.not-collapsible .product-grid { 
    max-height: none; 
    overflow: visible; 
    opacity: 1; 
    margin-top: 2rem; 
}

.category-section.not-collapsible .category-expand-icon { 
    display: none; 
}

.category-section.not-collapsible .category-header { 
    cursor: default; 
}

.product-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    padding: 30px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: block; /* Make it a proper link block */
    text-decoration: none; /* Remove underline from link */
    color: inherit; /* Inherit text color */
}

[data-theme] .product-card {
    background: #ffffff;
    border-color: rgba(0, 196, 200, 0.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.product-card::before {
    content: ""; 
    position: absolute; 
    left: var(--mouse-x, 50%); 
    top: var(--mouse-y, 50%); 
    width: 300px; 
    height: 300px;
    background: radial-gradient(circle at center, var(--spotlight-color) 0%, transparent 70%);
    transform: translate(-50%, -50%); 
    opacity: 0; 
    transition: opacity 0.4s ease; 
    pointer-events: none;
}

.product-card:hover::before { 
    opacity: 1; 
}

.product-card:hover { 
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 196, 200, 0.15);
}

[data-theme] .product-card:hover {
    border-color: var(--accent);
    box-shadow: 0 15px 40px rgba(0, 196, 200, 0.18), 0 0 0 1px rgba(0, 196, 200, 0.1);
}

.product-image {
    position: relative;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    min-height: 140px;
}

.product-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center;
    max-height: 250px;
}

.card-content { 
    /* Renamed from card-header - no longer a button/accordion */
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-start; 
    gap: 1rem;
}

.product-image .product-price {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 2;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a1a;
    background: rgba(240, 240, 240, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    font-family: var(--font-primary);
    line-height: 1.3;
}

.product-image .product-price.has-sale {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.product-image .product-price .price-original {
    font-size: 0.78em;
}

.product-image .product-price .price-sale {
    color: var(--color-sale, #c9a227);
}

.product-title { 
    flex: 1 1 200px; 
    margin-right: auto; 
}

.product-title h3 { 
    font-size: 1.2rem;
    font-weight: 600; 
    color: var(--text-primary);
    font-family: var(--font-primary);
    letter-spacing: -0.01em;
}

.product-title p { 
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400; 
    margin-top: 5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fallback price when product card has no image */
.card-content > .product-price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-primary);
    flex-shrink: 0;
    font-family: var(--font-primary);
}

.effects-container { 
    flex: 1 1 100%; 
    order: 3;
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.card-details {
    /* Removed - product details are now on separate page */
    display: none;
}

/* --- RESEARCH NOTE STYLE --- */
.research-note {
    font-size: 0.85rem; 
    font-style: italic; 
    color: var(--note-color);
    opacity: 0.8; 
    text-align: right; 
    margin-top: 1.5rem;
}

.research-note a { 
    color: inherit; 
    text-decoration: underline; 
    text-decoration-style: dotted; 
    transition: color 0.3s ease; 
}

.research-note a:hover { 
    color: var(--accent); 
}

/* --- EFFECT BARS STYLES --- */
.effect-bar-group { margin-bottom: 0; }
.effect-label {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 5px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.effect-bar-container {
  width: 100%;
  height: 16px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.effect-bar {
  width: 0;
  height: 100%;
  min-width: 2.35rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 7px;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(0, 196, 200, 0.42), rgba(0, 151, 167, 0.42));
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease-out, box-shadow 0.4s ease-out;
}
.effect-bar.animated {
  background: linear-gradient(90deg, var(--accent), #0097a7);
  box-shadow: 0 1px 5px rgba(0, 196, 200, 0.16);
}
.effect-bar-value {
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 640px) {
    .effects-container { gap: 0.82rem; }
    .effect-bar-container { height: 18px; }
    .effect-bar-value { font-size: 0.7rem; }
}
        
/* ======================================================= */
/*          6. ФУТЪР (LIPOLOR STYLE)                     */
/* ======================================================= */
.main-footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 3rem 0 1.5rem 0; 
    margin-top: 80px;
}

.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem; 
    margin-bottom: 2rem; 
}

.footer-column .footer-logo-container {
    margin-bottom: 1rem;
    align-items: flex-start;
    background: none;
}

.footer-logo-container img {
    display: block;
    height: 52px;
    width: 52px;
    min-width: 52px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 1;
}

.footer-logo-container .brand-name {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.06em;
}

.footer-logo-container .brand-slogan {
    font-family: var(--font-secondary);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.footer-column h4 {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column ul { 
    list-style: none; 
    padding: 0; 
}

.footer-column ul li { 
    margin-bottom: 0.75rem; 
}

.footer-column ul a { 
    color: var(--text-secondary);
    text-decoration: none; 
    transition: color var(--transition-speed);
}

.footer-column ul a:hover { 
    color: var(--color-primary);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem; 
    font-size: 0.9rem; 
    color: var(--text-secondary);
}

.footer-social-links {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), transform 0.2s ease;
    text-decoration: none;
}

.footer-social-link:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .footer-bottom {
        justify-content: center;
    }
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-links span {
    color: var(--border-color);
}

/* ======================================================= */
/*          SOCIAL FEED SECTION                            */
/* ======================================================= */

.social-feed-section {
    overflow: hidden;
}

.social-feed-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}

.social-feed-wrapper.instagram-layout {
    grid-template-columns: 1fr 1fr;
}

.social-feed-iframe-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    background: var(--bg-secondary, #f7f9fb);
    min-height: 600px;
    display: flex;
    align-items: stretch;
}

.social-feed-iframe-container iframe {
    width: 100%;
    min-height: 600px;
    border: none;
    display: block;
}

.social-feed-cta {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.social-feed-cta h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.social-feed-cta p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.social-feed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.social-feed-icon.facebook-icon {
    background: #1877f2;
    color: #fff;
}

.social-feed-icon.instagram-icon {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.social-feed-icon.youtube-icon {
    background: #ff0000;
    color: #fff;
}

.social-handle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.social-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 0.75rem 1.5rem;
}

.social-follow-btn.instagram-btn {
    background: var(--btn-gradient-primary);
    border-color: transparent;
}

.social-follow-btn.instagram-btn:hover {
    background: var(--btn-gradient-primary-hover);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--glow-primary-md);
}

.social-follow-btn.youtube-btn {
    background: #ff0000;
    border-color: transparent;
}

.social-follow-btn.youtube-btn:hover {
    background: #cc0000;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,0,0,0.4);
}

/* Instagram profile card */
.instagram-profile-card {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 1 / 1;
    max-width: 400px;
    width: 100%;
}

.instagram-profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}

.instagram-profile-bg {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: linear-gradient(155deg, #ffffff 0%, #F7F9FB 100%);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    text-align: center;
}

.instagram-profile-cta {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .social-feed-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .social-feed-wrapper.instagram-layout {
        grid-template-columns: 1fr;
    }

    .instagram-profile-card {
        max-width: 100%;
    }

    .social-feed-iframe-container,
    .social-feed-iframe-container iframe {
        min-height: 400px;
    }
}

/* ======================================================= */
/*          7. ПОМОЩНИ ЕЛЕМЕНТИ И АНИМАЦИИ                 */
/* ======================================================= */
/* --- THEME TOGGLE & BACK TO TOP --- */
#back-to-top {
    width: 44px; 
    height: 44px; 
    background: #00c4c8;
    border: 1px solid rgba(0, 196, 200, 0.5);
    border-radius: 50%; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    transition: all var(--transition-speed);
    position: fixed; 
    z-index: 1000; 
    bottom: 20px; 
    right: 20px;
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(20px); 
    text-decoration: none;
    font-size: 1.2rem; 
    color: var(--color-white);
}

#back-to-top:hover { 
    background: #d4a843;
    border-color: #d4a843;
    transform: scale(1.1) translateY(0);
}

#back-to-top.visible { 
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0); 
}

/* --- QUEST MODAL --- */
#quest-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 1000;
    display: none; opacity: 0; transition: opacity 0.3s ease;
}
#quest-modal-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-secondary); z-index: 1001;
    display: none; flex-direction: column; opacity: 0;
    transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease;
}
#quest-modal-backdrop.show, #quest-modal-container.show { display: flex; opacity: 1; }
#quest-modal-container.show { transform: translateY(0); }
#quest-modal-container iframe { border: none; width: 100%; height: 100%; flex-grow: 1; }
body.modal-open { overflow: hidden; }


/* --- Toast Notifications (top-right corner, modern style) --- */
#toast-container {
    position: fixed;
    top: calc(var(--header-height) + 16px);
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    pointer-events: none;
    max-width: 360px;
    width: calc(100vw - 40px);
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    color: #fff;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: toast-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
}

.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px 0 0 10px;
}

.toast-message {
    flex: 1;
    min-width: 0;
}

.toast-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
}

.toast-dismiss:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.toast.success { background: linear-gradient(135deg, rgba(22, 163, 74, 0.95), rgba(21, 128, 61, 0.95)); }
.toast.error   { background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(185, 28, 28, 0.95)); }
.toast.info    { background: linear-gradient(135deg, rgba(0, 196, 200, 0.95), rgba(212, 168, 67, 0.95)); }
.toast.fade-out { opacity: 0; transform: translateX(110%); }

@keyframes toast-slide-in {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@media (max-width: 480px) {
    #toast-container {
        right: 12px;
        left: 12px;
        width: auto;
        top: calc(var(--header-height) + 12px);
    }
}

/* --- UTILITY & ANIMATIONS --- */
.fade-in-up {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-visible { opacity: 1; transform: translateY(0); }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ======================================================= */
/*          8. ЛИПOLOR СЕКЦИИ (BENEFITS, TIMELINE, ETC)  */
/* ======================================================= */

/* --- ABOUT & BENEFITS SECTION --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.about-image-placeholder {
    width: 100%;
    min-height: 400px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-gray);
    box-shadow: var(--box-shadow);
}

.about-content h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
}

.benefits {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.benefit-item svg {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--color-secondary);
}

.benefit-item h4 {
    color: var(--color-secondary);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

/* --- TIMELINE / HOW IT WORKS SECTION --- */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: var(--color-secondary);
    opacity: 0.2;
    top: 0;
    bottom: 0;
    left: 20px;
}

.timeline-item {
    padding: 10px 40px;
    padding-left: 60px;
    position: relative;
    margin-bottom: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 4px solid var(--color-secondary);
    top: 15px;
    left: 12px;
    z-index: 1;
}

.timeline-content {
    padding: 20px;
    background: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.timeline-content h4 {
    color: var(--color-primary);
}

/* --- INGREDIENTS SECTION (FLIP CARDS) --- */
.ingredients-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.ingredient-card {
    background-color: transparent;
    min-height: 120px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    min-height: 120px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius);
}

.ingredient-card:hover .card-inner,
.ingredient-card:focus .card-inner,
.ingredient-card.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    min-height: 120px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: var(--border-radius);
}

.card-front {
    background: linear-gradient(135deg, #ffffff, #F7F9FB);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.12);
}

.card-front h5 {
    font-size: 1.2rem;
    color: #0f2540;
}

.card-front span {
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.card-back {
    background: linear-gradient(135deg, #F0FDFD, #E8F8F8);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.15);
    transform: rotateY(180deg);
    overflow-y: auto;
}

/* --- MANUFACTURER SECTION --- */
.manufacturer-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.manufacturer-logo {
    margin-bottom: 20px;
}

.manufacturer-content h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.trust-badges {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.badge-item svg {
    color: var(--color-secondary);
}

.badge-item span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* --- TESTIMONIALS SECTION --- */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.testimonial-card {
    background: var(--bg-primary);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    border-left: 3px solid rgba(0, 196, 200, 0.5);
}

.stars {
    color: #FFD700;
    font-size: 1.2rem;
    margin-bottom: 15px;
    display: flex;
    gap: 2px;
    align-items: center;
}

.stars svg {
    color: #FFD700;
    stroke: #FFD700;
    flex-shrink: 0;
}

.testimonial-text {
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.8;
    color: var(--color-dark);
}

.testimonial-author {
    display: flex;
    flex-direction: column;
}

.testimonial-author strong {
    color: var(--color-dark);
    font-size: 1rem;
}

.testimonial-author span {
    color: var(--color-gray);
    font-size: 0.9rem;
}

.result-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #00c4c8;
    color: var(--color-white);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* --- FAQ SECTION --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: var(--bg-primary);
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.faq-question:hover {
    background-color: var(--bg-secondary);
}

.faq-question h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.faq-toggle {
    font-size: 1.5rem;
    color: var(--color-primary);
    font-weight: 700;
    transition: transform var(--transition-speed);
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 25px;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 25px 20px 25px;
}

.faq-answer p {
    color: var(--color-gray);
    line-height: 1.8;
}

/* --- ORDER/CONTACT SECTION --- */
.order-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-details h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--color-primary);
}

.contact-details ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.contact-details ul li {
    margin-bottom: 10px;
    color: var(--color-dark);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-primary);
    transition: all var(--transition-speed);
}

.social-links a:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-3px);
}

.order-form {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: var(--border-radius);
}

.order-form h4 {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--color-primary);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-dark);
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: border-color var(--transition-speed);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

@media (min-width: 768px) {
    .order-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ======================================================= */
/*          9. РЕСПОНСИВ МОБИЛНИ УСТРОЙСТВА              */
/* ======================================================= */

/* Hide theme toggle in mobile menu by default (shown only on mobile via media query) */
.theme-toggle-mobile {
    display: none;
}

@media (max-width: 992px) {
    /* backdrop-filter/transform on header trap position:fixed nav inside header height (~102px).
       Disable on mobile so the slide-out drawer covers the full viewport. */
    .main-header,
    .main-header.scrolled,
    html.header-pre-scrolled .main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transform: none;
        -webkit-transform: none;
        background: var(--bg-secondary);
    }

    .nav-links {
        position: fixed; 
        top: 0; 
        right: -100%; 
        bottom: 0;
        left: auto;
        width: min(300px, 85vw);
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        background: var(--bg-secondary);
        display: flex;
        flex-direction: column; 
        justify-content: flex-start;
        align-items: center; 
        gap: 1.25rem; 
        transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
        z-index: 1002;
        padding: calc(var(--header-offset, 72px) + 1rem) 1.25rem 2rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
    }
    .nav-links.active { 
        right: 0; 
    }
    .nav-links > li { 
        text-align: center; 
        width: 80%;
        flex-shrink: 0;
    }
    .nav-links a { 
        font-size: 1.2rem; 
    }
    .menu-toggle { 
        display: flex; 
    }

    /* Nav dropdown: inline accordion on mobile */
    .nav-item.has-dropdown {
        width: 80%;
        text-align: center;
    }
    .nav-dropdown-toggle {
        width: 100%;
        justify-content: center;
        font-size: 1.2rem;
    }
    .nav-dropdown-menu {
        position: static;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0;
    }
    .nav-dropdown-menu.open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .nav-dropdown-menu li a {
        font-size: 1rem;
        padding: 0.4rem 1rem;
        white-space: normal;
        text-align: center;
    }
    .nav-dropdown-menu li a:hover {
        padding-left: 1rem;
        background: transparent;
    }
    
    /* Hide theme toggle in header on mobile */
    .header-actions .theme-toggle-btn {
        display: none;
    }

    /* Hide header cart icon on mobile and show fixed version */
    .header-actions .cart-icon-btn {
        display: none;
    }

    /* Pages without search (e.g. life-category): hide empty cyan pill next to menu */
    .header-actions:not(:has(.search-container)) {
        display: none;
    }

    /* Show fixed mobile cart icon */
    .cart-icon-fixed-mobile {
        display: flex;
    }

    /* Search dropdown responsive */
    .search-dropdown {
        width: 280px;
        right: -10px;
    }

    .search-dropdown.active {
        max-height: 400px;
    }

    .search-result-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .search-result-image {
        width: 40px;
        height: 40px;
    }

    /* Show theme toggle in mobile menu */
    .nav-links .theme-toggle-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
        width: 80%;
    }
    
    .nav-links .theme-toggle-mobile .theme-toggle-btn {
        display: flex;
    }
    
    .theme-toggle-mobile-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 600;
    }
    
    /* Cart link in mobile menu */
    .nav-links .cart-link-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
        width: 80%;
    }
    
    .cart-link-mobile-label {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 600;
    }
    
    .cart-link-mobile a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.8rem 1.75rem;
        background: var(--color-white);
        color: var(--accent);
        border: 2px solid var(--accent);
        border-radius: 50px;
        text-decoration: none;
        font-weight: 700;
        font-size: 0.95rem;
        letter-spacing: 0.02em;
        transition: all var(--transition-speed);
        position: relative;
        box-shadow: 0 2px 12px rgba(0, 196, 200, 0.18);
        width: 100%;
        justify-content: center;
    }
    
    .cart-link-mobile a:hover {
        background: var(--accent);
        color: var(--color-white);
        border-color: var(--accent);
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(0, 196, 200, 0.45);
    }
    
    .cart-link-mobile a .cart-badge {
        position: relative;
        top: unset;
        right: unset;
        background: var(--accent);
        color: var(--color-white);
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        border: 2px solid var(--color-white);
        flex-shrink: 0;
    }
    
    .cart-link-mobile a:hover .cart-badge {
        background: var(--color-white);
        color: var(--accent);
        border-color: var(--accent);
    }
    
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    body {
        padding-top: var(--header-offset);
    }
    
    .info-card-section .container, .info-card-section.image-align-right .container {
        flex-direction: column; 
        text-align: center; 
        gap: 2rem;
    }
    
    .hero-stats {
        gap: 20px;
    }
    
    .stat-item strong {
        font-size: 1.5rem;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .timeline::after {
        left: 15px;
    }
    
    .timeline-item {
        padding-left: 50px;
    }
    
    .product-card {
        padding: 20px;
    }
    
    /* Optimize product images for mobile — full product visible, no crop */
    .product-image {
        min-height: 120px;
    }
    .product-image img {
        max-height: 220px;
        object-fit: contain;
        object-position: center;
    }
    
    /* Reduce animation intensity on mobile */
    .hero-section {
        min-height: 450px;
        padding: 40px 0;
    }
    
    /* Fix category-section spacing on mobile */
    .category-section {
        padding: 40px 0;
    }
    
    .category-section:first-of-type {
        padding-top: 15px;
    }
}

/* Very small mobile screens - further optimizations */
@media (max-width: 480px) {
    /* Adjust hero section for small screens */
    .hero-section {
        min-height: 400px;
        padding: 30px 0;
    }
    
    .hero-content {
        padding: 1rem 15px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-stats {
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .stat-item strong {
        font-size: 1.3rem;
    }
    
    .hero-cta-group {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Further optimize product images for very small screens */
    .product-image img {
        max-height: 200px;
        object-fit: contain;
        object-position: center;
    }
    
    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 14px 30px;
        font-size: 1rem;
        width: 100%;
    }
}

/* ======================================================= */
/*          ACCESSIBILITY - REDUCED MOTION                 */
/* ======================================================= */
/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    /* Disable all animations for users who prefer reduced motion */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Remove bounce and pulse animations */
    .sticky-cta-btn,
    .exit-modal-icon,
    .product-badge {
        animation: none !important;
    }
}

@media (min-width: 768px) { 
    .product-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) { 
    .product-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .main-nav {
        display: flex !important;
    }
    
    .ingredients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ======================================================= */
/*          MARKETING ENHANCEMENTS - TRUST & URGENCY      */
/* ======================================================= */

/* Enhanced Promo Banner with Timer */
.promo-banner {
    background: #ffffff;
    color: #0f2540;
    text-align: center;
    padding: 11px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    animation: slideDown 0.5s ease-out;
}

[data-theme] .promo-banner {
    background: #ffffff;
    color: #0f2540;
}

.promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.promo-content {
    position: relative;
    z-index: 1;
}

.promo-timer {
    font-weight: 600;
    margin-left: 10px;
    padding: 3px 12px;
    background: rgba(0, 196, 200, 0.2);
    border-radius: 20px;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.05em;
}

/* Sticky CTA Button */
.sticky-cta {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 998;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.sticky-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

.sticky-cta-btn {
    background: var(--btn-gradient-cta);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 16px 36px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: var(--glow-cta-md);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    animation: bioCtaFloat 3s ease-in-out infinite;
}

.sticky-cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: skewX(-20deg) translateX(-120%);
    transition: transform 0.7s ease;
    pointer-events: none;
}

.sticky-cta-btn:hover::before {
    transform: skewX(-20deg) translateX(220%);
}

.sticky-cta-btn svg {
    color: white;
    stroke: white;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

@keyframes bioCtaFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: var(--glow-cta-md);
    }
    50% {
        transform: translateY(-8px);
        box-shadow: var(--glow-cta-lg);
    }
}

.sticky-cta-btn:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: var(--glow-cta-lg);
    animation-play-state: paused;
    background: linear-gradient(135deg, #00c4c8 0%, #0090a8 50%, #d4a843 100%);
}

.sticky-cta-btn:hover svg {
    transform: translateX(4px);
}

.sticky-cta-btn:active {
    transform: scale(1.03);
    animation-play-state: paused;
}

/* Product Badge Styles */
.product-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.product-badge.bestseller {
    background: #d4a843;
}

.product-badge.new {
    background: #00c4c8;
    color: #0f2540;
}

.product-badge.limited {
    background: linear-gradient(135deg, #9a7b2e, #d4a843);
    animation: none;
}

.product-badge.sale {
    background: linear-gradient(135deg, var(--color-sale, #c9a227), #d4a843);
    animation: none;
}

@keyframes badgeUrgent {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
    }
}

/* Structured description bullets (→ lines) */
.desc-bullet-list {
    list-style: none;
    margin: 0.75rem 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.desc-bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    line-height: 1.65;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.desc-bullet-icon {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 0.55em;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}

.product-detail-description .desc-bullet-list {
    margin-top: 0.5rem;
}

@media (max-width: 480px) {
    .desc-bullet-list li {
        font-size: 0.95rem;
        gap: 0.6rem;
    }

    .desc-bullet-icon {
        width: 6px;
        height: 6px;
        margin-top: 0.5em;
    }
}

/* Sale / Promotion price display */
.product-price.has-sale {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.price-original {
    text-decoration: line-through;
    color: var(--text-secondary, #8AAFC0);
    font-size: 0.88em;
    font-weight: 500;
}

.price-sale {
    color: var(--color-sale, #c9a227);
    font-weight: 700;
}

/* Product detail — brand & label links (never pink) */
.product-detail-container .product-detail-brand {
    color: var(--accent, #00c4c8);
}

.product-detail-container .product-label-link a {
    color: var(--accent, #00c4c8);
}

.product-detail-container .product-label-link a:hover {
    color: var(--note-color, #00a8ac);
}

/* Product detail page sale price */
.product-detail-price.has-sale {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.product-detail-price .price-original {
    text-decoration: line-through;
    color: var(--text-secondary, #8AAFC0);
    font-size: 0.75em;
    font-weight: 500;
}

.product-detail-price .price-sale {
    color: var(--color-sale, #c9a227);
}

/* Enhanced Product Card with Badges */
.product-card {
    position: relative;
    overflow: visible;
}

/* Media Queries for Mobile */
@media (max-width: 768px) {
    .sticky-cta {
        right: 50%;
        transform: translateX(50%) translateY(100px);
    }
    
    .sticky-cta.visible {
        transform: translateX(50%) translateY(0);
    }
    
    .sticky-cta-btn {
        padding: 14px 24px;
        font-size: 1rem;
    }
    
    .promo-timer {
        display: block;
        margin-top: 5px;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .sticky-cta-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

/* ======================================================= */
/*          EXIT INTENT MODAL - CONVERSION BOOSTER        */
/* ======================================================= */

.exit-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.exit-modal.active {
    opacity: 1;
    visibility: visible;
}

.exit-modal-content {
    background: var(--bg-primary);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    position: relative;
    animation: modalSlideIn 0.5s ease-out;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.exit-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s ease;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
}

.exit-modal-close:hover {
    color: var(--accent);
}

.exit-modal-body {
    padding: 40px 30px;
    text-align: center;
}

.exit-modal-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounce 1s ease-in-out infinite;
}

.exit-modal-icon svg {
    color: var(--accent);
    stroke: var(--accent);
}

.exit-modal-content h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.exit-modal-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

.exit-offer {
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.08) 0%, rgba(0, 196, 200, 0.05) 100%);
    border: 1px solid rgba(0, 196, 200, 0.30);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
}

[data-theme] .exit-offer {
    background: linear-gradient(135deg, #1A1410 0%, #2A2218 100%);
    border-color: rgba(0, 196, 200, 0.30);
}

.exit-offer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s linear infinite;
}

.exit-offer-badge {
    display: inline-block;
    background: rgba(0, 196, 200, 0.15);
    color: #00c4c8;
    border: 1px solid rgba(0, 196, 200, 0.4);
    font-size: 2.5rem;
    font-weight: 700;
    padding: 10px 25px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.exit-offer p {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 0;
}

[data-theme] .exit-offer p {
    color: white;
}

.promo-code {
    background: rgba(0, 196, 200, 0.2);
    padding: 5px 15px;
    border-radius: 5px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    font-size: 1.1rem;
    color: #E8D4A0;
    border: 1px solid rgba(0, 196, 200, 0.3);
}

.exit-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.exit-benefit {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-align: left;
    display: flex;
    align-items: center;
}

.exit-benefit svg {
    color: var(--success-color);
    stroke: var(--success-color);
    flex-shrink: 0;
}

.exit-cta-btn {
    background: var(--btn-gradient-cta);
    color: white;
    border: none;
    padding: 18px 44px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--glow-cta-md);
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.exit-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.exit-cta-btn:hover::before {
    left: 150%;
}

.exit-cta-btn:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--glow-cta-lg);
    background: linear-gradient(135deg, #00c4c8 0%, #0090a8 50%, #d4a843 100%);
}

.exit-modal-footer {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ======================================================= */
/*          ENHANCED TESTIMONIALS WITH IMAGES             */
/* ======================================================= */

.testimonial-card {
    position: relative;
    padding-top: 40px;
}

.testimonial-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto 15px;
    border: 3px solid var(--accent);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-verified {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--success-color);
    color: white;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 10px;
}

/* ======================================================= */
/*          COMPARISON SECTION                            */
/* ======================================================= */

.comparison-section {
    padding: 80px 0;
    background: var(--bg-secondary);
}

.comparison-table {
    background: var(--bg-primary);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--border-color);
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-cell {
    padding: 20px;
    text-align: center;
    transition: background 0.3s ease;
}

.comparison-cell:first-child {
    text-align: left;
    font-weight: 600;
}

.comparison-header {
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.12) 0%, rgba(0, 196, 200, 0.08) 100%);
    color: #8B6820;
    font-weight: 600;
}

[data-theme] .comparison-header {
    background: linear-gradient(135deg, #1A1410 0%, #2A2218 100%);
    color: #00c4c8;
}

.comparison-highlight {
    background: rgba(0, 196, 200, 0.04);
}

.check-icon {
    color: var(--success-color);
    font-size: 1.5rem;
}

.x-icon {
    color: var(--error-color);
    font-size: 1.5rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .exit-modal-content {
        max-width: 95%;
    }
    
    .exit-modal-body {
        padding: 30px 20px;
    }
    
    .exit-modal-content h2 {
        font-size: 1.5rem;
    }
    
    .exit-offer-badge {
        font-size: 2rem;
    }
    
    .comparison-row {
        grid-template-columns: 1fr;
    }
    
    .comparison-cell:first-child {
        background: var(--bg-secondary);
        font-weight: 700;
    }
}

/* ======================================================= */
/*          GUARANTEE SECTION                             */
/* ======================================================= */

.guarantee-section {
    background: var(--bg-secondary);
}

.guarantee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.guarantee-card {
    background: var(--bg-primary);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.guarantee-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 196, 200, 0.15);
    border-color: var(--accent);
}

.guarantee-icon {
    margin-bottom: 20px;
    color: var(--accent);
}

.guarantee-icon svg {
    stroke: var(--accent);
}

.guarantee-card h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.guarantee-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

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

/* ======================================================= */
/*          PRODUCT DETAIL SECTIONS                       */
/* ======================================================= */

.product-description {
    margin-bottom: 30px;
}

.product-about-section,
.product-ingredients-section,
.product-faq-section,
.product-target-profile-section,
.product-protocol-hint-section,
.product-safety-warnings-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}

.product-about-section h3,
.product-ingredients-section h3,
.product-faq-section h3,
.product-target-profile-section h3,
.product-protocol-hint-section h3,
.product-safety-warnings-section h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 20px;
    font-family: var(--font-primary);
}

/* Product About Section - Benefits */
.product-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.product-benefits .benefit-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.product-benefits .benefit-item svg {
    flex-shrink: 0;
    stroke: var(--accent-secondary);
    width: 32px;
    height: 32px;
}

.product-benefits .benefit-item h4 {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-family: var(--font-primary);
}

.product-benefits .benefit-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Product Ingredients Grid - Mini version */
.ingredients-grid-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.ingredient-card-mini {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    perspective: 1000px;
    min-height: 120px;
}

.ingredient-card-mini .card-inner {
    position: relative;
    width: 100%;
    min-height: 120px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.ingredient-card-mini.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.ingredient-card-mini .card-front,
.ingredient-card-mini .card-back {
    position: absolute;
    width: 100%;
    min-height: 120px;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ingredient-card-mini .card-front h5 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.ingredient-card-mini .card-front span {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
}

.ingredient-card-mini .card-front {
    background: linear-gradient(135deg, #ffffff, #F7F9FB);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.12);
    border-radius: var(--border-radius);
}

.ingredient-card-mini .card-back {
    background: linear-gradient(135deg, #F0FDFD, #E8F8F8);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.15);
    border-radius: var(--border-radius);
    transform: rotateY(180deg);
    padding: 15px;
    overflow-y: auto;
}

.ingredient-card-mini .card-back p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #0f2540;
}

.ingredient-card-mini:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 196, 200, 0.15);
}

/* Product FAQ - Mini version */
.faq-container-mini {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.faq-item-mini {
    background: var(--bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.faq-question-mini:hover {
    background: rgba(0, 196, 200, 0.05);
}

.faq-question-mini h4 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    font-family: var(--font-secondary);
    font-weight: 500;
}

.faq-toggle-mini {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 300;
    transition: transform 0.3s ease;
    min-width: 25px;
    text-align: center;
}

.faq-item-mini.active .faq-toggle-mini {
    transform: rotate(45deg);
}

.faq-answer-mini {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 20px;
}

.faq-item-mini.active .faq-answer-mini {
    max-height: 500px;
    padding: 0 20px 20px 20px;
}

.faq-answer-mini p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ingredients-grid-mini {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .ingredient-card-mini {
        min-height: 100px;
        padding: 15px;
    }
    
    .product-benefits .benefit-item {
        flex-direction: column;
        gap: 10px;
    }
}

/* ======================================================= */
/*   PRODUCT EXPANSION SECTIONS (LIPOLOR DESIGN)          */
/* ======================================================= */

/* About Content Section for Products */
.product-about-section {
    padding: 40px 30px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    margin-top: 20px;
}

.product-about-section h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.product-about-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Product Benefits Grid (larger version) */
.product-benefits-full {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.product-benefits-full .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.product-benefits-full .benefit-item svg {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: var(--accent-secondary);
}

.product-benefits-full .benefit-item h4 {
    color: var(--accent-secondary);
    font-size: 1.2rem;
    margin-bottom: 8px;
    font-family: var(--font-primary);
    font-weight: 600;
}

.product-benefits-full .benefit-item p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* Ingredients Section (Full Version with Flip Cards) */
.product-ingredients-section {
    padding: 40px 30px;
    margin-top: 20px;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
}

.product-ingredients-section h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    text-align: center;
}

.product-ingredients-section .section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 1rem;
}

.ingredients-grid-full {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .ingredients-grid-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ingredients-grid-full {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ingredient-card-full {
    background-color: transparent;
    min-height: 140px;
    perspective: 1000px;
    cursor: pointer;
}

.ingredient-card-full .card-inner {
    position: relative;
    width: 100%;
    min-height: 140px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius);
}

.ingredient-card-full:focus .card-inner,
.ingredient-card-full.is-flipped .card-inner {
    transform: rotateY(180deg);
}

.ingredient-card-full .card-front,
.ingredient-card-full .card-back {
    position: absolute;
    width: 100%;
    min-height: 140px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: var(--border-radius);
}

.ingredient-card-full .card-front {
    background: linear-gradient(135deg, #ffffff, #F7F9FB);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.12);
}

.ingredient-card-full .card-front h5 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--accent);
    font-family: var(--font-primary);
    font-weight: 600;
}

.ingredient-card-full .card-front span {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ingredient-card-full .card-back {
    background: linear-gradient(135deg, #F0FDFD, #E8F8F8);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.15);
    transform: rotateY(180deg);
    overflow-y: auto;
}

.ingredient-card-full .card-back p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #0f2540;
}

/* FAQ Section (Full Version) */
.product-faq-section {
    padding: 40px 30px;
    margin-top: 20px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
}

.product-faq-section h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    text-align: center;
}

.faq-container-full {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item-full {
    background: var(--bg-primary);
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question-full {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    user-select: none;
}

.faq-question-full:hover {
    background-color: var(--bg-secondary);
}

.faq-question-full h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
    font-family: var(--font-secondary);
}

.faq-toggle-full {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
    transition: transform var(--transition-speed);
    min-width: 30px;
    text-align: center;
}

.faq-item-full.active .faq-toggle-full {
    transform: rotate(45deg);
}

.faq-answer-full {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s ease, padding 0.4s ease;
    padding: 0 25px;
}

.faq-answer-full > * {
    overflow: hidden;
}

.faq-item-full.active .faq-answer-full {
    grid-template-rows: 1fr;
    padding: 0 25px 20px;
}

.faq-answer-full p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}

/* Target Profile Section */
.product-target-profile-section {
    padding: 30px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-radius: var(--border-radius);
    border-left: 3px solid rgba(0, 196, 200, 0.4);
}

.target-profile-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

/* Protocol Hint Section (Reception/Usage) */
.product-protocol-hint-section {
    padding: 30px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.protocol-hint-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

/* Safety Warnings Section */
.product-safety-warnings-section {
    padding: 30px;
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.1) 0%, rgba(255, 159, 64, 0.1) 100%);
    border-radius: var(--border-radius);
    border: 2px solid rgba(0, 196, 200, 0.3);
}

.product-safety-warnings-section h3 {
    color: #00c4c8;
    display: flex;
    align-items: center;
    gap: 10px;
}

.safety-warnings-content {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.safety-warnings-content .warning-icon {
    flex-shrink: 0;
    stroke: #00c4c8;
    width: 28px;
    height: 28px;
    margin-top: 3px;
}

.safety-warnings-text {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
    flex: 1;
}

/* Responsive adjustments for expansion sections */
@media (max-width: 768px) {
    .product-about-section,
    .product-ingredients-section,
    .product-faq-section,
    .product-target-profile-section,
    .product-protocol-hint-section,
    .product-safety-warnings-section {
        padding: 30px 20px;
    }
    
    .product-about-section h3,
    .product-ingredients-section h3,
    .product-faq-section h3,
    .product-target-profile-section h3,
    .product-protocol-hint-section h3,
    .product-safety-warnings-section h3 {
        font-size: 1.5rem;
    }
    
    .product-benefits-full .benefit-item {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        text-align: center;
    }
    
    .ingredients-grid-full {
        grid-template-columns: 1fr;
    }
    
    .ingredient-card-full {
        min-height: 120px;
    }
}

/* =======================================================
   PRODUCT FILTER BAR
   ======================================================= */
.product-filter-bar {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border: 1px solid var(--border-color, #e0e0e0);
}

.product-filter-bar .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.product-filter-bar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 180px;
    min-width: 150px;
}

.product-filter-bar .filter-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-filter-bar .filter-select,
.product-filter-bar .filter-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--bg-color, #fff);
    color: var(--text-primary, #333);
    transition: border-color 0.2s;
}

.product-filter-bar .filter-select:focus,
.product-filter-bar .filter-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.filter-results-count {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #888);
}

/* Brand label on product cards — always on its own row above title */
.brand-label {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary, #999);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

/* Load more button */
.load-more-container {
    text-align: center;
    margin: 2rem 0;
}

.btn-load-more {
    background: var(--btn-gradient-primary);
    color: #fff;
    border: none;
    padding: 0.8rem 2.2rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--glow-primary-sm);
    position: relative;
    overflow: hidden;
}

.btn-load-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.btn-load-more:hover::before {
    left: 150%;
}

.btn-load-more:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: var(--glow-primary-md);
    background: var(--btn-gradient-primary-hover);
}

@media (max-width: 600px) {
    .product-filter-bar .filter-row {
        flex-direction: column;
    }
    .product-filter-bar .filter-group {
        flex: 1 1 100%;
    }
}

/* ======================================================= */
/*   BIOHACK DESIGN v2 - НОВA ВИЗУАЛНA ИДЕНТИЧНОСТ        */
/*   Teal/Cyan палитра + Hexagon + Glassmorphism          */
/* ======================================================= */

/* --- CTA PULSE ANIMATIONS (клетъчно дишане) ---
   bioCtaPulse  → hero CTA / sticky CTA buttons (coral)
   bioCtaFloat  → sticky-cta-btn floating animation */

@keyframes bioPrimaryPulse {
    0%, 100% {
        box-shadow: var(--glow-primary-sm),
                    0 0 0 0 rgba(0, 196, 200, 0.3);
    }
    50% {
        box-shadow: var(--glow-primary-md),
                    0 0 0 12px rgba(0, 196, 200, 0);
    }
}

/* --- HEXAGONAL BACKGROUND PATTERN --- */
/* Субтилна шестоъгълна мрежа <3% прозрачност */
.hex-bg-pattern {
    position: relative;
}

.hex-bg-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16 L56 49 L28 65 L0 49 L0 16 Z' fill='none' stroke='%2300c4c8' stroke-width='0.8' opacity='0.18'/%3E%3Cpath d='M28 33 L56 49 L56 82 L28 98 L0 82 L0 49 Z' fill='none' stroke='%2300c4c8' stroke-width='0.8' opacity='0.18'/%3E%3C/svg%3E");
    background-size: 56px 98px;
    opacity: 0.028;
    pointer-events: none;
    z-index: 0;
}

/* Секции, при които трябва да се показва hex pattern */
.hero-section,
.comparison-section,
.guarantee-section,
#benefits.section-padding,
section[id="scientific"] {
    position: relative;
}

.hero-section::before,
[data-theme] .comparison-section::before,
[data-theme] .guarantee-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 0 L56 16 L56 49 L28 65 L0 49 L0 16 Z' fill='none' stroke='%2300c4c8' stroke-width='0.8'/%3E%3Cpath d='M28 33 L56 49 L56 82 L28 98 L0 82 L0 49 Z' fill='none' stroke='%2300c4c8' stroke-width='0.8'/%3E%3C/svg%3E");
    background-size: 56px 98px;
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
}

/* Изключи дублирания ::before за hero-section (вече е дефиниран за bg-image overlay) */
.hero-section[data-bg-image]::before,
.hero-section.hero-custom-bg::before {
    background-image: none;
    opacity: 1;
}

/* --- HEXAGONAL IMAGE MASK --- */
/* Клас за изображения в шестоъгълни маски */
.hex-img-wrapper {
    display: inline-block;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    border-radius: 6px;
    overflow: hidden;
}

.hex-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Testimonial avatars in hex */
.testimonial-avatar {
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    border-radius: 4px;
    border: none; /* clip-path replaces border */
    box-shadow: 0 0 0 3px var(--accent), 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- HEX ICON CONTAINERS --- */
/* Шестоъгълни контури за иконки на ползи */
.hex-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background: transparent;
    position: relative;
    flex-shrink: 0;
}

.hex-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    border: 2px solid var(--accent);
    background: rgba(0, 196, 200, 0.06);
}

.hex-icon svg {
    position: relative;
    z-index: 1;
    color: var(--accent);
    stroke: var(--accent);
}

/* Benefit items с hex иконки */
.benefit-item .hex-icon,
.guarantee-card .guarantee-icon.hex-icon {
    width: 60px;
    height: 60px;
}

/* --- GLASSMORPHISM PANELS --- */
/* Стъклен ефект за падащи менюта и информационни карти */
.glass-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(0, 196, 200, 0.18);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme] .glass-panel {
    background: rgba(6, 8, 14, 0.72);
    border-color: rgba(0, 196, 200, 0.18);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Search dropdown gets glassmorphism */
.search-dropdown {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 196, 200, 0.18);
    box-shadow: 0 12px 40px rgba(0, 196, 200, 0.12);
}

[data-theme] .search-dropdown {
    background: rgba(6, 8, 14, 0.88);
    border-color: rgba(0, 196, 200, 0.18);
    box-shadow: 0 12px 40px rgba(0, 196, 200, 0.1);
}

/* Product cards get subtle glassmorphism in light theme */
[data-theme] .product-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 196, 200, 0.12);
    box-shadow: 0 4px 16px rgba(0, 196, 200, 0.07);
}

/* Exit modal glassmorphism */
.exit-modal-content {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 196, 200, 0.15);
}

[data-theme] .exit-modal-content {
    background: rgba(6, 8, 14, 0.92);
    border-color: rgba(0, 196, 200, 0.15);
}

/* --- SKELETON HEXAGONAL LOADING --- */
/* Шестоъгълни скелетни елементи при зареждане */
.skeleton-hex {
    display: inline-block;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background-color: var(--skeleton-bg);
    animation: skeleton-pulse 1.5s infinite ease-in-out;
    background-image: linear-gradient(90deg, var(--skeleton-bg) 0px, var(--skeleton-highlight) 40px, var(--skeleton-bg) 80px);
    background-size: 600px;
}

/* --- PROTOCOL ROADMAP STYLES --- */
/* Визуализация на биохакинг протоколи като пътна карта */
.protocol-roadmap {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 20px 0;
    max-width: 700px;
    margin: 0 auto;
}

.protocol-roadmap::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(to bottom,
        var(--accent) 0%,
        rgba(0, 196, 200, 0.3) 100%);
}

.protocol-node {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
    position: relative;
}

.protocol-node-icon {
    width: 80px;
    height: 80px;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background: rgba(0, 196, 200, 0.08);
    border: 2px solid rgba(0, 196, 200, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.protocol-node-icon.active,
.protocol-node-icon:hover,
.is-visible .protocol-node-icon {
    background: rgba(0, 196, 200, 0.18);
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(0, 196, 200, 0.35);
}

.protocol-node-icon span {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-primary);
}

.protocol-node-content {
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 196, 200, 0.14);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[data-theme] .protocol-node-content {
    background: rgba(6, 8, 14, 0.72);
    border-color: rgba(0, 196, 200, 0.14);
}

.protocol-node-content:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(0, 196, 200, 0.12);
}

.protocol-node-content h4 {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 6px;
}

.protocol-node-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

/* Active/scrolled-to node glow */
.protocol-node.active .protocol-node-icon,
.is-visible .protocol-node-icon {
    animation: hexNodeGlow 2s ease-in-out infinite;
}

@keyframes hexNodeGlow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(0, 196, 200, 0.3);
        border-color: var(--accent);
    }
    50% {
        box-shadow: 0 0 28px rgba(0, 196, 200, 0.6);
        border-color: var(--accent);
    }
}

@media (max-width: 768px) {
    .protocol-roadmap::before {
        left: 32px;
    }
    .protocol-node-icon {
        width: 64px;
        height: 64px;
    }
}

/* --- CLINICAL DATA / DATA-DRIVEN UI --- */
.clinical-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 196, 200, 0.14);
    border-radius: 12px;
    transition: all 0.3s ease;
}

[data-theme] .clinical-stat {
    background: rgba(6, 8, 14, 0.72);
    border-color: rgba(0, 196, 200, 0.14);
}

.clinical-stat:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(0, 196, 200, 0.15);
    transform: translateY(-4px);
}

.clinical-stat-value {
    font-size: 2.8rem;
    font-weight: 700;
    font-family: var(--font-primary);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #00c4c8, #0097a7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.clinical-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.4;
}

/* --- STACK BUILDER (Модулен Builder) --- */
.stack-builder {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1.5px solid rgba(0, 196, 200, 0.18);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.08);
}

[data-theme] .stack-builder {
    background: rgba(6, 8, 14, 0.82);
    border-color: rgba(0, 196, 200, 0.18);
}

.stack-builder-title {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stack-molecule {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 80px;
    padding: 16px;
    background: rgba(0, 196, 200, 0.04);
    border: 1px dashed rgba(0, 196, 200, 0.3);
    border-radius: 12px;
    margin-bottom: 16px;
    align-items: center;
}

.stack-molecule-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 196, 200, 0.1);
    border: 1px solid rgba(0, 196, 200, 0.3);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    animation: nodeConnect 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

@keyframes nodeConnect {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.stack-molecule-node .remove-node {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    line-height: 1;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.stack-molecule-node .remove-node:hover {
    opacity: 1;
    background: rgba(0, 196, 200, 0.15);
    color: #00c4c8;
}

/* Hex connector between stack nodes */
.stack-connector {
    width: 20px;
    height: 20px;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background: rgba(0, 196, 200, 0.25);
    flex-shrink: 0;
}

/* ======================================================= */
/*   PREMIUM BUTTON DESIGN CONCEPT — LIFE BioHack v3       */
/*   Glassmorphism · Neon Glow · CTA Coral · Bio-Cyan      */
/* ======================================================= */

/* ── GLASS BUTTON ── */
.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 196, 200, 0.3);
    color: var(--text-primary);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn-glass:hover::before {
    left: 150%;
}

.btn-glass:hover {
    background: rgba(0, 196, 200, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 40px rgba(0, 196, 200, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

[data-theme] .btn-glass {
    background: rgba(6, 8, 14, 0.5);
    border-color: rgba(0, 196, 200, 0.25);
    color: var(--text-primary);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.1),
                inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme] .btn-glass:hover {
    background: rgba(0, 196, 200, 0.1);
    border-color: var(--accent);
    box-shadow: var(--glow-primary-md),
                inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ── NEON OUTLINE BUTTON (Cyan) ── */
.btn-neon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    transition: all 0.35s ease;
    box-shadow: 0 0 10px rgba(0, 196, 200, 0.45),
                inset 0 0 10px rgba(0, 196, 200, 0.08);
}

.btn-neon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-gradient-primary);
    opacity: 0;
    transition: opacity 0.35s ease;
    border-radius: inherit;
}

.btn-neon:hover {
    color: white;
    border-color: transparent;
    box-shadow: var(--neon-primary);
    transform: translateY(-3px);
}

.btn-neon:hover::before {
    opacity: 1;
}

.btn-neon span {
    position: relative;
    z-index: 1;
}

/* ── NEON CTA BUTTON (Coral) ── */
.btn-neon-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
    transition: all 0.35s ease;
    box-shadow: 0 0 10px rgba(0, 196, 200, 0.45),
                inset 0 0 10px rgba(0, 196, 200, 0.08);
}

.btn-neon-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--btn-gradient-cta);
    opacity: 0;
    transition: opacity 0.35s ease;
    border-radius: inherit;
}

.btn-neon-cta:hover {
    color: white;
    border-color: transparent;
    box-shadow: var(--neon-cta);
    transform: translateY(-3px);
}

.btn-neon-cta:hover::before {
    opacity: 1;
}

.btn-neon-cta span {
    position: relative;
    z-index: 1;
}

/* ── PREMIUM FULL-SPECTRUM GRADIENT BUTTON ── */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 44px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: var(--btn-gradient-premium);
    background-size: 200% 200%;
    background-position: 0% 50%;
    border: none;
    color: white;
    box-shadow: 0 8px 30px rgba(0, 196, 200, 0.35),
                0 4px 16px rgba(0, 196, 200, 0.25);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: bioGradientShift 5s ease infinite;
}

@keyframes bioGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    pointer-events: none;
}

.btn-premium:hover::before {
    left: 160%;
}

.btn-premium:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 16px 50px rgba(0, 196, 200, 0.5),
                0 8px 25px rgba(0, 196, 200, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-premium:active {
    transform: translateY(0) scale(1.01);
}

/* ── RIPPLE EFFECT ──
   Requires JavaScript: on click, append a <span class="ripple"> with width/height/top/left
   set to the click position, then remove it after the animation completes (~700ms). */
.btn-primary .ripple,
.btn-hero-primary .ripple,
.btn-premium .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: bioRipple 0.7s linear;
    pointer-events: none;
}

@keyframes bioRipple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── VISUAL EFFECTS UTILITIES ── */

/* Gradient text — Cyan */
.text-gradient-primary {
    background: var(--btn-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient text — Coral CTA */
.text-gradient-cta {
    background: var(--btn-gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient text — Full Spectrum */
.text-gradient-premium {
    background: var(--btn-gradient-premium);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: bioGradientShift 4s ease infinite;
}

/* Glowing card on hover */
.glow-card {
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.glow-card:hover {
    box-shadow: 0 0 0 1px rgba(0, 196, 200, 0.2),
                0 8px 40px rgba(0, 196, 200, 0.18);
    transform: translateY(-4px);
}

[data-theme] .glow-card:hover {
    box-shadow: 0 0 0 1px rgba(0, 196, 200, 0.3),
                0 8px 40px rgba(0, 196, 200, 0.2);
}

/* Shimmer background (badges, tags) */
.shimmer-bg {
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        #F0E0A0 30%,
        var(--color-secondary) 60%,
        var(--color-primary) 100%);
    background-size: 300% 100%;
    animation: bioShimmerMove 3s linear infinite;
    color: #0f2540;
}

@keyframes bioShimmerMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Pulse glow for important elements */
.pulse-glow {
    animation: bioPulseGlowAnim 2.5s ease-in-out infinite;
}

@keyframes bioPulseGlowAnim {
    0%, 100% {
        box-shadow: var(--glow-cta-sm);
    }
    50% {
        box-shadow: var(--glow-cta-lg);
    }
}

.pulse-glow-cyan {
    animation: bioPulseGlowCyan 2.5s ease-in-out infinite;
}

@keyframes bioPulseGlowCyan {
    0%, 100% {
        box-shadow: var(--glow-primary-sm);
    }
    50% {
        box-shadow: var(--glow-primary-lg);
    }
}

/* Neon border glow (static, for elements that need subtle neon) */
.neon-border {
    border: 1.5px solid var(--accent);
    box-shadow: var(--neon-primary);
}

.neon-border-cta {
    border: 1.5px solid var(--color-secondary);
    box-shadow: var(--neon-cta);
}


/* ======================================================= */
/*   PRIMER.JPG REDESIGN – HEXAGONAL BIOTECH LIGHT THEME   */
/* ======================================================= */

/* ── 1. HERO LAYOUT: TWO-COLUMN GRID ── */
[data-theme] .hero-section {
    text-align: left;
    background: linear-gradient(155deg, #ffffff 0%, #F7F9FB 50%, #ffffff 100%);
    min-height: 640px;
    padding: 70px 0 40px;
    align-items: stretch;
    overflow: visible;
}

/* Subtle hexagonal grid pattern in background.
   Note: CSS custom properties cannot be used inside url() data URIs (browser limitation),
   so the light and dark theme variants below intentionally use separate data URIs
   with different stroke colours rather than a shared variable. */
[data-theme] .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zm0-83L5.5 16v33L28 62l22.5-13V16zm0 83v17M5.5 49L0 52m51 0l5.5 3' fill='none' stroke='%2300c4c8' stroke-width='1' opacity='0.12'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Override the animated radial pulse (replaced by static hex grid) */
[data-theme] .hero-section::after {
    display: none;
}

[data-theme] .hero-section .container.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

[data-theme] .hero-section .container:not(.hero-grid) {
    position: relative;
    z-index: 1;
}

/* Left text column */
[data-theme] .hero-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Cyan tagline above h1 */
.hero-tagline {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 600;
    color: #00c4c8;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 0.8rem;
}

/* Large dark bold title */
[data-theme] .hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 4rem);
    font-weight: 600;
    color: #0f2540;
    background: none;
    -webkit-text-fill-color: #0f2540;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 1.2rem;
    text-shadow: none;
}

[data-theme] .hero-content p {
    font-size: 1.05rem;
    color: #4a6a85;
    max-width: 540px;
    margin-bottom: 2rem;
    line-height: 1.65;
}

/* CTA group left-aligned */
[data-theme] .hero-cta-group {
    justify-content: flex-start;
    margin-bottom: 2rem;
}

/* Coral primary CTA → pharma cyan */
[data-theme] .btn-hero-primary {
    background: var(--btn-gradient-primary);
    border-radius: 8px;
    padding: 15px 36px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    box-shadow: var(--glow-primary-md);
}

[data-theme] .btn-hero-primary:hover {
    background: var(--btn-gradient-primary-hover);
    box-shadow: var(--glow-primary-lg);
    transform: translateY(-3px) scale(1.03);
}

/* Secondary: transparent + cyan border */
[data-theme] .btn-hero-secondary {
    background: transparent;
    border: 1.5px solid rgba(0, 196, 200, 0.5);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 13px 36px;
    font-size: 0.95rem;
    backdrop-filter: none;
    box-shadow: none;
}

[data-theme] .btn-hero-secondary:hover {
    background: rgba(0, 196, 200, 0.06);
    border-color: #00c4c8;
    color: var(--text-primary);
    transform: translateY(-2px);
}

[data-theme] .btn-hero-secondary svg {
    stroke: var(--accent);
}

/* Trust badges left-aligned */
[data-theme] .hero-trust-badges {
    justify-content: flex-start;
    margin-top: 0;
}

/* Stats row below the two columns */
[data-theme] .hero-stats {
    justify-content: flex-start;
    gap: 48px;
    padding: 24px 0 0;
    border-top: 1px solid rgba(0, 196, 200, 0.18);
    margin-top: 16px;
}

[data-theme] .stat-item strong {
    color: var(--accent);
    background: none;
    -webkit-text-fill-color: var(--accent);
}

[data-theme] .stat-item span {
    color: #64748B;
}

/* ── 2. HEX BACKGROUND PATTERN ELEMENT ── */
.hex-bg-pattern {
    display: none; /* handled via CSS pseudo-element above */
}

/* ── 3. HERO BANNER PANEL – RIGHT COLUMN ── */
[data-theme] .hero-banner-panel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(15, 37, 64, 0.16),
        0 4px 16px rgba(0, 196, 200, 0.12);
    align-self: stretch;
    min-height: 420px;
    flex-shrink: 0;
}

[data-theme] .hero-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

[data-theme] .hero-banner-panel:hover .hero-banner-img {
    transform: scale(1.03);
}

/* No-banner: collapse to single-column centered layout */
[data-theme] .hero-section .container.hero-grid.no-banner {
    grid-template-columns: 1fr;
    max-width: 720px;
    text-align: center;
}

[data-theme] .hero-section .container.hero-grid.no-banner .hero-content {
    text-align: center;
}

[data-theme] .hero-section .container.hero-grid.no-banner .hero-cta-group,
[data-theme] .hero-section .container.hero-grid.no-banner .hero-trust-badges {
    justify-content: center;
}

/* ── 3a. HERO VISUAL ── */
[data-theme] .hero-visual {
    position: relative;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* DNA helix SVG in background of visual panel */
.hero-dna-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}

.dna-helix-svg {
    width: 55%;
    height: 90%;
    filter: drop-shadow(0 0 18px rgba(0, 196, 200, 0.25));
    animation: dnaDrift 8s ease-in-out infinite alternate;
}

@keyframes dnaDrift {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-14px); }
}

/* ── 4. HEXAGONAL IMAGE FRAMES ── */
.hex-frame {
    position: absolute;
    overflow: hidden;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background: transparent;
    z-index: 2;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Cyan border using a wrapping technique: outer shape + inner image */
.hex-frame::before {
    content: '';
    position: absolute;
    inset: -3px;
    background: #00c4c8;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    z-index: -1;
}

.hex-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Icon-fallback hex frame */
.hex-frame.hex-frame-icon {
    background: linear-gradient(135deg, #F7F9FB 0%, #EEF3F8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hex-frame.hex-frame-icon svg {
    stroke: #00c4c8;
}

.hex-frame:hover {
    transform: scale(1.07) translateY(-4px);
    filter: drop-shadow(0 12px 28px rgba(0, 196, 200, 0.35));
}

/* Vial – top right */
.hex-frame.hex-vial {
    width: 148px;
    height: 148px;
    top: 6%;
    right: 4%;
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.22);
}

/* Lab – centre-left */
.hex-frame.hex-lab {
    width: 162px;
    height: 162px;
    top: 36%;
    left: 2%;
    box-shadow: 0 10px 36px rgba(0, 196, 200, 0.25);
}

/* Face – bottom right */
.hex-frame.hex-face {
    width: 138px;
    height: 138px;
    bottom: 4%;
    right: 10%;
    box-shadow: 0 8px 28px rgba(0, 196, 200, 0.20);
}

/* Floating molecule nodes (decorative dots) */
.molecule-node {
    position: absolute;
    border-radius: 50%;
    background: #00c4c8;
    z-index: 1;
    animation: nodeFloat 4s ease-in-out infinite alternate;
}

.node-1 {
    width: 12px; height: 12px;
    top: 22%; right: 38%;
    opacity: 0.55;
    animation-delay: 0s;
}
.node-2 {
    width: 8px; height: 8px;
    top: 56%; right: 46%;
    opacity: 0.4;
    animation-delay: 1.2s;
    background: #00c4c8;
}
.node-3 {
    width: 10px; height: 10px;
    bottom: 24%; left: 44%;
    opacity: 0.45;
    animation-delay: 0.6s;
}

@keyframes nodeFloat {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(6px, -10px); }
}

/* ── 5. FEATURE CARDS SECTION ── */
[data-theme] .hero-features-section {
    background: #F7F9FB;
    padding: 56px 0 64px;
    border-top: 1px solid rgba(0, 196, 200, 0.1);
    position: relative;
}

.hero-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Glassmorphism feature card */
.hex-feature-card {
    background: rgba(240, 247, 248, 0.85);
    border-radius: 18px;
    padding: 38px 30px 36px;
    text-align: center;
    border: 1px solid rgba(0, 196, 200, 0.2);
    box-shadow: 0 6px 32px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(0, 196, 200, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    color: #0f2540;
}

.hex-feature-card::after {
    content: '';
    position: absolute;
    top: -24px;
    right: -24px;
    width: 80px;
    height: 80px;
    clip-path: polygon(50% 0%, 93.301% 25%, 93.301% 75%, 50% 100%, 6.699% 75%, 6.699% 25%);
    background: rgba(0, 196, 200, 0.05);
    pointer-events: none;
}

.hex-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 56px rgba(0, 196, 200, 0.15), 0 4px 12px rgba(0, 196, 200, 0.08);
    border-color: rgba(0, 196, 200, 0.35);
}

a.hex-feature-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.hex-feature-card--link .btn-learn-more {
    pointer-events: none;
}

/* Hexagonal icon wrapper */
.hex-icon-outer {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hex-icon-bg-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hex-icon-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.hex-feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: #0f2540;
    text-transform: none;
    letter-spacing: 0.01em;
    margin-bottom: 12px;
}

.hex-feature-card p {
    font-size: 0.92rem;
    color: #64748B;
    line-height: 1.65;
    margin-bottom: 24px;
}

/* "Виж повече" button – cyan outlined */
.btn-learn-more {
    display: inline-block;
    background: transparent;
    border: 1.5px solid rgba(0, 196, 200, 0.6);
    color: var(--text-primary);
    padding: 10px 28px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-learn-more:hover {
    background: #00c4c8;
    color: #0f2540;
    box-shadow: 0 6px 22px rgba(0, 196, 200, 0.30);
    transform: translateY(-2px);
}

/* Dark theme feature cards */
[data-theme] .hero-features-section {
    background: var(--bg-primary);
    border-top-color: rgba(0, 196, 200, 0.12);
}

[data-theme] .hex-feature-card {
    background: var(--bg-secondary);
    border-color: rgba(0, 196, 200, 0.14);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.3);
}

[data-theme] .hex-feature-card:hover {
    border-color: rgba(0, 196, 200, 0.35);
    box-shadow: 0 20px 56px rgba(0, 196, 200, 0.15);
}

[data-theme] .hex-feature-card h3 {
    color: var(--text-primary);
}

[data-theme] .hex-feature-card p {
    color: var(--text-secondary);
}

[data-theme] .hex-icon-bg-svg polygon {
    fill: rgba(0, 196, 200, 0.06);
    stroke: #00c4c8;
}

[data-theme] .hex-icon-inner svg {
    stroke: #00c4c8;
}

[data-theme] .btn-learn-more {
    border-color: rgba(0, 196, 200, 0.6);
    color: #00c4c8;
}

[data-theme] .btn-learn-more:hover {
    background: #00c4c8;
    color: #ffffff;
}

/* ── 6. DARK THEME HERO ── */
[data-theme] .hero-visual {
    display: flex;
}

[data-theme] .hero-section .container.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

[data-theme] .hero-content {
    text-align: left;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

[data-theme] .hero-cta-group {
    justify-content: flex-start;
}

[data-theme] .hero-trust-badges {
    justify-content: flex-start;
}

[data-theme] .hero-stats {
    justify-content: flex-start;
    gap: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 196, 200, 0.15);
}

[data-theme] .hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zm0-83L5.5 16v33L28 62l22.5-13V16zm0 83v17M5.5 49L0 52m51 0l5.5 3' fill='none' stroke='%2300c4c8' stroke-width='1' opacity='0.07'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

[data-theme] .hero-visual {
    position: relative;
    height: 480px;
}

/* ── 7. RESPONSIVE: TABLET & MOBILE ── */
@media (max-width: 1024px) {
    [data-theme] .hero-section .container.hero-grid,
    [data-theme] .hero-section .container.hero-grid {
        grid-template-columns: 1.3fr 0.7fr;
        gap: 28px;
    }

    [data-theme] .hero-banner-panel {
        min-height: 320px;
    }

    [data-theme] .hero-visual,
    [data-theme] .hero-visual {
        height: 380px;
    }

    .hex-frame.hex-vial  { width: 120px; height: 120px; }
    .hex-frame.hex-lab   { width: 130px; height: 130px; }
    .hex-frame.hex-face  { width: 112px; height: 112px; }
}

@media (max-width: 768px) {
    [data-theme] .hero-section .container.hero-grid,
    [data-theme] .hero-section .container.hero-grid {
        grid-template-columns: 1fr;
    }

    [data-theme] .hero-banner-panel {
        display: none;
    }

    [data-theme] .hero-visual,
    [data-theme] .hero-visual {
        display: none;
    }

    [data-theme] .hero-content,
    [data-theme] .hero-content {
        text-align: center;
    }

    [data-theme] .hero-content p,
    [data-theme] .hero-content p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    [data-theme] .hero-cta-group,
    [data-theme] .hero-cta-group {
        justify-content: center;
    }

    [data-theme] .hero-trust-badges,
    [data-theme] .hero-trust-badges {
        justify-content: center;
    }

    [data-theme] .hero-stats,
    [data-theme] .hero-stats {
        justify-content: center;
        gap: 24px;
    }

    .hero-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-features-grid {
        gap: 18px;
    }
    .hex-feature-card {
        padding: 30px 20px 28px;
    }
}


/* ======================================================= */
/*   PREMIUM UX/UI ENHANCEMENTS v4 – BIOHACK IMMERSIVE    */
/*   Cursor Glow · Ambient Orbs · 3D Tilt · Particles     */
/*   Counter Animation · Stagger Reveals · Magnetic CTA   */
/* ======================================================= */

/* ── CUSTOM CURSOR GLOW (Desktop only) ── */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        circle,
        rgba(0, 196, 200, 0.06) 0%,
        rgba(0, 196, 200, 0.03) 40%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    will-change: left, top;
    mix-blend-mode: screen;
}

[data-theme] .cursor-glow {
    background: radial-gradient(
        circle,
        rgba(0, 196, 200, 0.03) 0%,
        rgba(0, 196, 200, 0.01) 40%,
        transparent 70%
    );
    mix-blend-mode: multiply;
}

/* Hide on touch devices */
@media (hover: none), (max-width: 768px) {
    .cursor-glow { display: none; }
}

/* ── AMBIENT BACKGROUND ORBS ── */
.bg-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    animation: orbDrift 28s ease-in-out infinite;
    will-change: transform;
}

.bg-orb-1 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 196, 200, 0.07), transparent 70%);
    top: -250px;
    left: -200px;
    animation-delay: 0s;
}

.bg-orb-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(180, 140, 60, 0.06), transparent 70%);
    bottom: -150px;
    right: -150px;
    animation-delay: -14s;
}

.bg-orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(160, 128, 60, 0.05), transparent 70%);
    top: 45%;
    left: 35%;
    animation-delay: -7s;
    animation-duration: 35s;
}

[data-theme] .bg-orb-1 {
    background: radial-gradient(circle, rgba(0, 196, 200, 0.04), transparent 70%);
}

[data-theme] .bg-orb-2 {
    background: radial-gradient(circle, rgba(180, 140, 60, 0.03), transparent 70%);
}

[data-theme] .bg-orb-3 {
    background: radial-gradient(circle, rgba(160, 120, 50, 0.02), transparent 70%);
}

@keyframes orbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%       { transform: translate(50px, -70px) scale(1.06); }
    50%       { transform: translate(-40px, 50px) scale(0.94); }
    75%       { transform: translate(60px, 25px) scale(1.03); }
}

/* ── HERO PARTICLE CANVAS ── */
#hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

[data-theme] #hero-particles {
    opacity: 0.25;
}

/* ── STAGGERED CARD ANIMATION DELAYS ── */
.product-grid .product-card.fade-in-up:nth-child(1)  { transition-delay: 0ms; }
.product-grid .product-card.fade-in-up:nth-child(2)  { transition-delay: 90ms; }
.product-grid .product-card.fade-in-up:nth-child(3)  { transition-delay: 180ms; }
.product-grid .product-card.fade-in-up:nth-child(4)  { transition-delay: 270ms; }
.product-grid .product-card.fade-in-up:nth-child(5)  { transition-delay: 360ms; }
.product-grid .product-card.fade-in-up:nth-child(6)  { transition-delay: 450ms; }
.product-grid .product-card.fade-in-up:nth-child(n+7){ transition-delay: 450ms; }

/* ── 3D TILT CARD SUPPORT ── */
.product-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ── ANIMATED GRADIENT SPAN IN HERO H1 ── */
.hero-gradient-word {
    background: linear-gradient(
        135deg,
        #00c4c8 0%,
        #0097a7 50%,
        #00c4c8 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: heroWordGradient 6s linear infinite;
    display: inline;
}

@keyframes heroWordGradient {
    0%   { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ── STAT COUNTER ANIMATION ── */
.stat-item strong[data-target] {
    display: inline-block;
}

/* ── SECTION GLOW SEPARATOR ── */
.section-glow-line {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 196, 200, 0.35) 30%,
        rgba(0, 196, 200, 0.35) 70%,
        transparent 100%
    );
    margin: 0;
    position: relative;
}

.section-glow-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    filter: blur(3px);
    margin-top: -1.5px;
}

/* ── CATEGORY SECTION REVEAL POLISH ── */
.category-section.fade-in-up.is-visible .category-title {
    animation: titleReveal 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateX(-20px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

/* ── HEX FEATURE CARD STAGGER ── */
.hero-features-grid .hex-feature-card.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.hero-features-grid .hex-feature-card.fade-in-up:nth-child(2) { transition-delay: 150ms; }
.hero-features-grid .hex-feature-card.fade-in-up:nth-child(3) { transition-delay: 300ms; }

/* ── MAGNETIC BUTTON VISUAL ENHANCEMENT ── */
.btn-hero-primary,
.btn-hero-secondary,
.sticky-cta-btn {
    transform-origin: center;
}

/* ── PRODUCT CARD HOLOGRAPHIC HOVER ── */
.product-card {
    position: relative;
}

.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        rgba(var(--accent-rgb), 0.04) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% auto;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s ease;
    animation: holographic 3s ease-in-out infinite;
    animation-play-state: paused;
}

.product-card:hover::after {
    opacity: 1;
    animation-play-state: running;
}

@keyframes holographic {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ── SCROLL-TRIGGERED SECTION LINE REVEAL ── */
.category-section.fade-in-up .category-title::after {
    transition-duration: 0.8s;
}

/* ── FLOATING DOT GRID (Subtle Background) ── */
@keyframes dotPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.3); }
}

/* ── ENHANCED TOAST ── */
.toast {
    animation: toastBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastBounceIn {
    from { transform: translateX(110%) scale(0.8); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}

/* ── BACK-TO-TOP PULSE ── */
#back-to-top.visible {
    animation: backTopPulse 2.5s ease-in-out infinite;
}

@keyframes backTopPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 196, 200, 0.4); }
    50%       { box-shadow: 0 4px 30px rgba(0, 196, 200, 0.7), 0 0 0 8px rgba(0, 196, 200, 0); }
}

/* ── SECTION ENTRANCE: scale fade ── */
.hex-feature-card.fade-in-up {
    transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1),
                transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ── PROMO BANNER SHIMMER UPGRADE ── */
.promo-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    transform: skewX(-15deg);
    animation: bannerShimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bannerShimmer {
    0%   { left: -100%; }
    60%, 100% { left: 150%; }
}

/* ── DISABLE ALL PREMIUM EFFECTS ON REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .bg-orbs,
    .cursor-glow,
    #hero-particles {
        display: none !important;
    }

    .product-card::after,
    .hex-feature-card::after,
    .promo-banner::after {
        animation: none !important;
        opacity: 0 !important;
    }

    .hero-gradient-word {
        animation: none;
        background: linear-gradient(135deg, #00c4c8, #00c4c8);
    }
}


/* ======================================================= */
/*   PREMIUM CLINIC REFINEMENTS - Luxury Gold Palette      */
/*   Добавени за допълнително изчистване и финес           */
/* ======================================================= */

/* ── LUXURY PROMO BANNER SHIMMER (gold shimmer on dark bg) ── */
.promo-banner::before {
    background: linear-gradient(90deg, transparent, rgba(0, 196, 200, 0.15), transparent);
}

/* ── PREMIUM PRODUCT CARD HOVER (warm gold border) ── */
.product-card:hover {
    border-color: rgba(0, 196, 200, 0.5);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 196, 200, 0.15);
}

[data-theme] .product-card:hover {
    border-color: rgba(0, 196, 200, 0.4);
    box-shadow: 0 15px 40px rgba(0, 196, 200, 0.15), 0 0 0 1px rgba(0, 196, 200, 0.15);
}

/* ── PREMIUM CATEGORY TITLE (refined gold underline) ── */
.is-visible .category-title::after {
    background: linear-gradient(90deg, #00c4c8, transparent);
}

/* ── LOGO: clean pharma typography ── */
.logo-container .brand-name {
    color: var(--text-primary);
}

/* (hero h1 light/dark rules consolidated above — removed duplicate [data-theme] override) */

/* ── STAT ITEM: refined glass for both themes ── */
[data-theme] .stat-item {
    background: rgba(255, 255, 255, 0.90);
    border-color: rgba(0, 196, 200, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.stat-item:hover {
    box-shadow: 0 8px 28px rgba(0, 196, 200, 0.20);
}

/* ── PRODUCT TITLE H3 - more refined ── */
.product-title h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── HERO SECTION: pharma clean gradient ── */
[data-theme] .hero-section {
    background: var(--theme-gradient);
}

/* ── PRODUCT PRICE: scientific gold accent ── */
.card-content > .product-price {
    color: var(--accent-gold);
    font-size: 1.25rem;
}

[data-theme] .card-content > .product-price {
    color: #00c4c8;
}

/* ── EFFECT BAR animated: cyan ── */
.effect-bar.animated {
    background: linear-gradient(90deg, #00c4c8, #00a8ac);
    box-shadow: 0 1px 5px rgba(0, 196, 200, 0.16);
}

/* ── GUARANTEE CARD hover: gold border ── */
.guarantee-card:hover {
    box-shadow: 0 15px 40px rgba(0, 196, 200, 0.15);
    border-color: rgba(0, 196, 200, 0.4);
}

/* ── TRUST BADGE hover ── */
.trust-badge:hover {
    border-color: #00c4c8;
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(0, 196, 200, 0.20);
}

/* ── HERO STATS STAT-ITEM ICON: gold ── */
.stat-icon {
    color: #00c4c8;
}

/* ── FOOTER HOVER LINKS: gold ── */
.footer-column ul a:hover {
    color: #00c4c8;
}

.footer-links a:hover {
    color: #00c4c8;
}

/* ── BACK-TO-TOP: refined gold pulse ── */
@keyframes backTopPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(0, 196, 200, 0.35); }
    50%       { box-shadow: 0 4px 28px rgba(0, 196, 200, 0.6), 0 0 0 8px rgba(0, 196, 200, 0); }
}

/* ── CLINICAL STAT VALUE: cyan ── */
.clinical-stat-value {
    color: #00c4c8;
}

/* ── STAT ITEM STRONG: cyan ── */
.stat-item strong {
    color: var(--accent);
}

[data-theme] .stat-item strong {
    background: none;
    color: var(--accent-gold);
    -webkit-text-fill-color: var(--accent-gold);
}

/* ── PRODUCT BADGE BESTSELLER: refined gold ── */
.product-badge.bestseller {
    background: #d4a843;
    color: #0f2540;
}

/* ── NAV LINKS UNDERLINE: cyan ── */
.nav-links a::after {
    background-color: #00c4c8;
}

.nav-links a:hover,
.nav-links a.active {
    color: #00c4c8;
}

[data-theme] .nav-links a:hover,
[data-theme] .nav-links a.active {
    color: #00c4c8;
}

/* ── GLASS PANEL: gold-tinted borders ── */
.glass-panel {
    border-color: rgba(0, 196, 200, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ── SEARCH INPUT FOCUS: gold ring ── */
.search-input:focus {
    border-color: #00c4c8;
    box-shadow: 0 0 0 3px rgba(0, 196, 200, 0.12);
}

/* ── CATEGORY DESCRIPTION: more refined ── */
.category-description {
    font-family: var(--font-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ── INFO CARD GLASS: warm gold border ── */
.info-card-content {
    border-color: rgba(0, 196, 200, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

[data-theme] .info-card-content {
    border-color: rgba(0, 196, 200, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ── HEX FEATURE CARD: gold icon stroke in dark ── */
[data-theme] .hex-icon-bg-svg polygon {
    fill: rgba(0, 196, 200, 0.06);
    stroke: #00c4c8;
}

[data-theme] .hex-icon-inner svg {
    stroke: #00c4c8;
}

/* ── FOOTER: clean pharmaceutical white ── */
[data-theme] .main-footer {
    background-color: #F7F9FB;
    border-top-color: rgba(0, 196, 200, 0.12);
}

/* ── SECTION BACKGROUND: clean cool white ── */
[data-theme] .section-bg,
[data-theme] .comparison-section,
[data-theme] .guarantee-section {
    background-color: #F7F9FB;
}

/* ── TIMELINE: gold accent ── */
.timeline::after {
    background-color: rgba(0, 196, 200, 0.3);
}

.timeline-item::before {
    border-color: #00c4c8;
}

.timeline-content h4 {
    color: var(--text-primary);
}

/* ── PRODUCT TAG/BENEFIT ITEM HEADING: gold accent ── */
.benefit-item h4,
.product-benefits-full .benefit-item h4 {
    color: #9a7b2e;
}

[data-theme] .benefit-item h4,
[data-theme] .product-benefits-full .benefit-item h4 {
    color: var(--accent-gold, #d4a843);
}

/* ── HEX ICON: gold border ── */
.hex-icon::before {
    border-color: rgba(0, 196, 200, 0.5);
    background: rgba(0, 196, 200, 0.05);
}

.hex-icon svg {
    color: #00c4c8;
    stroke: #00c4c8;
}

/* ── PROTOCOL NODE: gold accent ── */
.protocol-node-icon span {
    color: #00c4c8;
}

.protocol-node-content h4 {
    color: var(--text-primary);
}

[data-theme] .protocol-node-content h4 {
    color: #00c4c8;
}

/* ── FAQ TOGGLE: gold ── */
.faq-toggle,
.faq-toggle-mini,
.faq-toggle-full {
    color: #00c4c8;
}

/* ── INGREDIENT CARD BACK: clean clinical white ── */
.ingredient-card-full .card-back,
.card-back {
    background: linear-gradient(135deg, #F0FDFD, #E8F8F8);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.15);
}

.ingredient-card-full .card-front,
.card-front {
    background: linear-gradient(135deg, #ffffff, #F7F9FB);
    color: #0f2540;
    border: 1px solid rgba(0, 196, 200, 0.12);
}

[data-theme="dark"] .ingredient-card-full .card-back,
[data-theme="dark"] .card-back {
    background: linear-gradient(135deg, #1A2832, #243540);
    color: #E8F4F8;
    border-color: rgba(0, 196, 200, 0.2);
}

[data-theme="dark"] .ingredient-card-full .card-front,
[data-theme="dark"] .card-front {
    background: linear-gradient(135deg, #121c24, #1a2832);
    color: #E8F4F8;
    border-color: rgba(0, 196, 200, 0.15);
}

/* ── SEARCH RESULT HIGHLIGHT: gold ── */
.search-result-name mark {
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.15), rgba(0, 196, 200, 0.15));
    color: var(--text-primary);
}

/* ── SEARCH RESULT PRICE: gold ── */
.search-result-price {
    color: var(--text-primary);
}

[data-theme] .search-result-price {
    color: #00c4c8;
}

/* ── MOBILE CART LINK: cyan outlined pill ── */
.cart-link-mobile a {
    background: var(--color-white);
    color: var(--accent);
    border: 2px solid var(--accent);
}

.cart-link-mobile a:hover {
    background: var(--accent);
    color: var(--color-white);
}

/* ── SCROLL PROGRESS: cyan ── */
.scroll-progress {
    background: linear-gradient(90deg, #00c4c8, #00d4d8, #00a8ac);
}

/* ── TOAST INFO: gold-tinted ── */
.toast.info {
    background: linear-gradient(135deg, rgba(180, 140, 58, 0.95), rgba(160, 120, 45, 0.95));
}

/* ======================================================= */
/*   BIOHACK PREMIUM REDESIGN – Inspired by protocols.html */
/*   Dark-first design: cyan + gold, neon glow, glassmorphism */
/* ======================================================= */

/* ── BIOHACK CYAN: new accent variable ── */
:root {
    --color-cyan: #00C4C8;
    --accent-cyan-rgb: 0, 196, 200;
    --glow-cyan-sm: 0 4px 20px rgba(0, 196, 200, 0.35);
    --glow-cyan-md: 0 8px 30px rgba(0, 196, 200, 0.50);
    --glow-cyan-lg: 0 14px 50px rgba(0, 196, 200, 0.55), 0 0 60px rgba(0, 196, 200, 0.25);
    --btn-gradient-biohack: linear-gradient(135deg, #00C4C8 0%, #0090A8 45%, #00c4c8 100%);
}

/* ── DARK HERO: static mesh (no scale animation — causes viewport jitter) ── */
[data-theme="dark"] .hero-section:not([data-bg-image]):not(.hero-custom-bg)::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 40%, rgba(0, 196, 200, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 65%, rgba(0, 196, 200, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 15%, rgba(0, 130, 160, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* (removed darkHeroMeshShift scale animation — caused perceived screen scaling) */

/* Richer animated radial pulse in dark mode – add cyan orb alongside gold */
[data-theme] .hero-section::after {
    background:
        radial-gradient(ellipse at center, rgba(0, 196, 200, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 30% 70%, rgba(0, 196, 200, 0.07) 0%, transparent 40%);
}

/* ── DARK HERO h1: handled in consolidated hero-content h1 rules above ── */

/* ── DARK HERO tagline: cyan ── */
[data-theme="dark"] .hero-tagline {
    color: #00C4C8;
    text-shadow: 0 0 12px rgba(0, 196, 200, 0.45);
}

/* ── BTN-PRIMARY LIGHT: solid cyan button for light backgrounds ── */
[data-theme] .btn-primary {
    background: linear-gradient(135deg, #00c4c8 0%, #0090a8 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 196, 200, 0.35);
    border-radius: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[data-theme] .btn-primary:hover {
    background: linear-gradient(135deg, #00d4d8 0%, #00c4c8 100%);
    color: #ffffff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 196, 200, 0.50);
}

[data-theme] .btn-primary:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 12px rgba(0, 196, 200, 0.30);
}

/* ── BTN-HERO-PRIMARY DARK: cyan-to-gold gradient with pulsing neon glow ── */
[data-theme] .btn-hero-primary {
    background: var(--btn-gradient-biohack);
    border: none;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
    box-shadow:
        0 0 30px rgba(0, 196, 200, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    animation: biohackCtaPulse 3s ease-in-out infinite;
}

@keyframes biohackCtaPulse {
    0%, 100% {
        box-shadow:
            0 0 30px rgba(0, 196, 200, 0.35),
            0 8px 32px rgba(0, 0, 0, 0.10),
            0 0 0 0   rgba(0, 196, 200, 0.25);
    }
    50% {
        box-shadow:
            0 0 42px rgba(0, 196, 200, 0.52),
            0 8px 32px rgba(0, 0, 0, 0.10),
            0 0 0 10px rgba(0, 196, 200, 0);
    }
}

[data-theme] .btn-hero-primary:hover {
    background: linear-gradient(135deg, #00D4D8 0%, #00A0BC 45%, #00c4c8 100%);
    transform: translateY(-5px) scale(1.07);
    animation: none;
    box-shadow:
        0 0 50px rgba(0, 196, 200, 0.58),
        0 12px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme] .btn-hero-primary:hover::before {
    left: 150%;
}

[data-theme] .btn-hero-primary:active {
    transform: translateY(0) scale(1.01);
    animation: none;
    box-shadow: var(--glow-cyan-sm);
}

/* ── BTN-PREMIUM DARK: dual-spectrum neon (gold + cyan sweep) ── */
[data-theme] .btn-premium {
    background: linear-gradient(135deg, #0D1830 0%, #00c4c8 50%, #00C4C8 100%);
    background-size: 250% 250%;
    background-position: 0% 50%;
    border: none;
    color: #fff;
    box-shadow:
        0 8px 30px rgba(0, 196, 200, 0.28),
        0 4px 16px rgba(0, 196, 200, 0.22);
    animation: biohackPremiumShift 6s ease infinite;
}

@keyframes biohackPremiumShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

[data-theme] .btn-premium:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow:
        0 16px 50px rgba(0, 196, 200, 0.42),
        0 8px 25px rgba(0, 196, 200, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Sync ripple colour to the new btn styles */
[data-theme] .btn-primary .ripple {
    background: rgba(201, 118, 79, 0.40);
}

[data-theme] .btn-hero-primary .ripple {
    background: rgba(0, 196, 200, 0.40);
}

/* ======================================================= */
/*   LIGHT-ONLY LAYOUT FIXES & MOBILE IMPROVEMENTS        */
/*   Applied after all previous rules for highest priority */
/* ======================================================= */

/* ── Hide theme toggle everywhere (light-only build) ── */
.theme-toggle-btn,
.theme-toggle-mobile,
#theme-toggle,
#theme-toggle-mobile {
    display: none !important;
}

/* ── Fix info-card min-width overflow on small screens ── */
.info-card-image,
.info-card-content {
    min-width: 0;
}

/* ── Hero section: ensure full-width on all screens ── */
.hero-section .container.hero-grid {
    width: 100%;
    box-sizing: border-box;
}

/* ── Stat items: better mobile layout ── */
@media (max-width: 640px) {
    .hero-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .stat-item {
        flex: 1 1 calc(50% - 16px);
        min-width: 130px;
        padding: 16px 12px;
    }

    .stat-item strong {
        font-size: 1.4rem;
    }

    .stat-item span {
        font-size: 0.8rem;
    }

    /* Hero section padding */
    .hero-section {
        padding: 40px 0 30px;
        min-height: auto;
    }

    /* Feature cards: single column with reduced padding */
    .hero-features-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .hex-feature-card {
        padding: 28px 20px 24px;
    }

    /* Product grid: full width on small mobile */
    .product-grid {
        gap: 20px;
    }

    .product-card {
        padding: 16px;
    }

    /* Category title font on small mobile */
    .category-title {
        font-size: 1.8rem;
    }

    /* Section titles on small screens */
    .section-title h2 {
        font-size: 1.7rem;
    }

    /* CTA buttons: full width on small screens */
    .hero-cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Trust badges wrap nicely */
    .hero-trust-badges {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
}

/* ── Product grid: 2 columns on tablets, 1 on mobile ── */
@media (min-width: 600px) and (max-width: 767px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Sticky CTA: hide on very small screens (< 400px) ── */
@media (max-width: 400px) {
    .sticky-cta {
        display: none;
    }
}

/* ── Prevent horizontal scroll on mobile ── */
body {
    overflow-x: hidden;
}

/* ── Better promo banner on mobile ── */
@media (max-width: 640px) {
    .promo-banner {
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .promo-timer {
        display: none;
    }
}

/* ── Footer grid on mobile ── */
@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ── Nav links: mobile padding handled in main nav drawer block above ── */

/* ── Product filter bar: mobile ── */
@media (max-width: 640px) {
    .product-filter-bar {
        padding: 0.75rem 1rem;
    }

    .product-filter-bar .filter-row {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ── Info card section: better mobile spacing ── */
@media (max-width: 768px) {
    .info-card-section {
        padding: 40px 0;
    }

    .info-card-content {
        padding: 1.5rem;
    }

    .info-card-content h2 {
        font-size: 1.8rem;
    }
}

/* ── Promo banner: fix flex wrap on mobile ── */
.promo-banner p {
    flex-wrap: wrap;
    gap: 2px;
}

/* =======================================================
   МОБИЛЕН UX/UI – ПОДОБРЕНО ИЗЖИВЯВАНЕ v2
   Enhanced mobile experience: touch targets, gestures,
   safe areas, micro-interactions, scrolling, typography
   ======================================================= */

/* ── 1. HAMBURGER BUTTON – LARGER TAP TARGET ── */
/* Increase tap area to 44×44px without changing visual icon size */
.menu-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 11px 7px;
    border-radius: 8px;
    transition: background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle span {
    width: 26px;
    flex-shrink: 0;
}

.menu-toggle:active {
    background: rgba(0, 196, 200, 0.10);
}

/* ── 2. MOBILE NAV MENU – BETTER WIDTH, SCROLL, OVERLAY ── */
@media (max-width: 992px) {
    .nav-links a {
        padding: 0.65rem 1.25rem;
        border-radius: 8px;
        width: 100%;
        transition: background 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-links a:active {
        background: rgba(0, 196, 200, 0.10);
    }

    /* Smooth overlay fade */
    .nav-overlay {
        transition: opacity 0.35s ease;
    }
}

/* ── 3. FORM INPUTS – MINIMUM 44px TOUCH TARGET ── */
@media (max-width: 768px) {
    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
        border-radius: 10px;
        min-height: 48px;
    }

    .form-group label {
        margin-bottom: 10px;
        font-size: 0.95rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .search-input {
        font-size: 16px; /* Prevents iOS auto-zoom */
    }
}

/* ── 4. HERO SECTION – IMPROVED MOBILE TYPOGRAPHY ── */
@media (max-width: 640px) {
    [data-theme] .hero-content h1 {
        font-size: clamp(1.75rem, 7.5vw, 2.4rem);
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    [data-theme] .hero-content p {
        font-size: 0.97rem;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .hero-tagline {
        font-size: 0.78rem;
        letter-spacing: 0.14em;
    }

    .hero-section {
        padding-bottom: 24px;
    }
}

@media (max-width: 400px) {
    [data-theme] .hero-content h1 {
        font-size: clamp(1.6rem, 8vw, 2rem);
    }

    [data-theme] .hero-content p {
        font-size: 0.92rem;
    }
}

/* ── 5. PRODUCT IMAGES – BETTER SIZING ON SMALL SCREENS ── */
@media (max-width: 480px) {
    .product-image {
        min-height: 120px;
    }
    .product-image img {
        max-height: 200px;
        width: 100%;
        object-fit: contain;
        object-position: center;
        border-radius: 10px;
    }
}

/* ── 6. STICKY CTA – DISABLE FLOAT ANIMATION + BETTER MOBILE LAYOUT ── */
@media (max-width: 768px) {
    .sticky-cta-btn {
        animation: none; /* Save battery on mobile */
        box-shadow: 0 6px 20px rgba(0, 196, 200, 0.35);
    }

    .sticky-cta-btn:active {
        transform: scale(0.97);
        box-shadow: 0 3px 12px rgba(0, 196, 200, 0.25);
    }

    .sticky-cta {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 480px) {
    .sticky-cta-btn {
        padding: 14px 20px;
        font-size: 0.92rem;
        border-radius: 10px;
        min-height: 48px;
    }

    .sticky-cta-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ── 7. EXIT MODAL – BETTER SMALL SCREEN SUPPORT ── */
@media (max-width: 640px) {
    .exit-modal-content {
        width: 92%;
        min-width: 280px;
        border-radius: 16px;
        max-height: 92vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .exit-modal-body {
        padding: 28px 18px 22px;
    }

    .exit-modal-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 1.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
    }

    .exit-modal-content h2 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .exit-offer-badge {
        font-size: 1.8rem;
    }

    .exit-cta-btn {
        width: 100%;
        font-size: 1rem;
        padding: 14px 20px;
        min-height: 48px;
    }
}

/* ── 17. MOBILE CART ICON – aligned with header offset ── */
@media (max-width: 992px) {
    .cart-icon-fixed-mobile {
        width: 52px;
        height: 52px;
        top: calc(var(--header-offset) + 8px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .cart-icon-fixed-mobile svg {
        width: 24px;
        height: 24px;
    }

    .cart-icon-fixed-mobile:active {
        transform: scale(0.95);
    }
}

/* ── 9. TOUCH FEEDBACK ON BUTTONS/LINKS ── */
@media (hover: none) {
    .btn-primary:active,
    .btn-hero-primary:active,
    .btn-hero-secondary:active,
    .btn-premium:active,
    [data-theme] .btn-hero-primary:active {
        transform: scale(0.97);
        opacity: 0.9;
    }

    .product-card:active {
        transform: scale(0.99);
    }

    .nav-links a:active {
        opacity: 0.7;
    }

    /* Remove hover transforms on touch (they stay stuck on mobile) */
    .guarantee-card:hover,
    .hex-feature-card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ── 10. SAFE AREA INSETS – IPHONE NOTCH/HOME INDICATOR ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .main-footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    }

    @media (max-width: 992px) {
        .nav-links {
            padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
        }
    }
}

/* ── 11. HERO TRUST BADGES – COMPACT ON MOBILE ── */
@media (max-width: 640px) {
    [data-theme] .hero-trust-badges {
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    .trust-badge {
        font-size: 0.78rem;
        padding: 6px 12px;
        border-radius: 20px;
    }
}

/* ── 12. SECTION TITLES – FLUID SCALING ── */
@media (max-width: 640px) {
    .section-title h2 {
        font-size: clamp(1.5rem, 5.5vw, 1.9rem);
    }

    .section-title p {
        font-size: 0.93rem;
        line-height: 1.6;
    }

    .category-title {
        font-size: clamp(1.5rem, 6vw, 1.9rem);
    }
}

/* ── 13. PRODUCT CARDS – BETTER MOBILE EXPERIENCE ── */
@media (max-width: 640px) {
    .product-card {
        border-radius: 14px;
        padding: 18px;
    }

    .product-title h3 {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .product-image .product-price {
        font-size: 0.8rem;
        bottom: 6px;
        right: 6px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .card-content > .product-price {
        font-size: 1.1rem;
    }

    .effect-bar-container {
        height: 18px;
    }

    .effect-bar-value {
        font-size: 0.7rem;
    }

    .product-badge {
        font-size: 0.7rem;
        padding: 5px 10px;
    }
}

/* ── 14. PRODUCT FILTER BAR – SCROLLABLE CHIPS ON MOBILE ── */
@media (max-width: 640px) {
    .filter-chips {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none; /* Firefox */
    }

    .filter-chips::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .filter-chip {
        scroll-snap-align: start;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ── 15. PROMO BANNER – COMPACT ON MOBILE ── */
@media (max-width: 640px) {
    .promo-banner {
        font-size: 0.8rem;
        padding: 8px 12px;
        line-height: 1.4;
    }

    .promo-banner strong {
        font-size: 0.85rem;
    }
}

/* ── 16. INFO CARD SECTION – FULL-WIDTH IMAGE ON MOBILE ── */
@media (max-width: 640px) {
    .info-card-section .info-card-image {
        width: 100%;
        max-width: 100%;
    }

    .info-card-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 14px;
    }

    .info-card-content h2 {
        font-size: clamp(1.4rem, 5.5vw, 1.75rem);
    }

    .info-card-content p {
        font-size: 0.93rem;
        line-height: 1.65;
    }
}

/* ── MOBILE HEADER & LOGO SCALING ── */
@media (max-width: 768px) {
    .header-container {
        padding: 0 16px;
        gap: 0.75rem;
    }

    .logo-container img {
        height: 44px;
        width: 44px;
        min-width: 44px;
    }

    .logo-container .brand-name {
        font-size: 1rem;
    }

    .footer-logo-container img {
        height: 44px;
        width: 44px;
        min-width: 44px;
    }
}

@media (max-width: 480px) {
    .logo-container .brand-name {
        font-size: 0.95rem;
    }

    .logo-container .brand-slogan,
    .footer-logo-container .brand-slogan {
        font-size: 0.72rem;
    }
}

@media (max-width: 992px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── 19. MODAL BACKDROP – TOUCH TO CLOSE CURSOR ── */
@media (hover: none) {
    .modal-backdrop,
    .exit-modal,
    .nav-overlay {
        cursor: pointer;
    }
}

/* ── 20. FOOTER – BETTER MOBILE SPACING ── */
@media (max-width: 640px) {
    .footer-grid {
        gap: 2.5rem;
    }

    .footer-grid h4 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .footer-links li {
        margin-bottom: 0.6rem;
    }

    .footer-bottom {
        padding: 1.5rem 0;
        font-size: 0.82rem;
        text-align: center;
    }
}

/* ── 21. BACK BUTTON – MINIMUM TOUCH TARGET ── */
@media (max-width: 768px) {
    .btn-back {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── 22. TOAST NOTIFICATIONS – BETTER MOBILE POSITION ── */
@media (max-width: 480px) {
    .toast {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        max-width: 100%;
        font-size: 0.88rem;
        padding: 12px 14px;
        border-radius: 10px;
    }
}

/* ── 23. CONTAINER HORIZONTAL PADDING ON VERY SMALL SCREENS ── */
@media (max-width: 360px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    [data-theme] .hero-content h1 {
        font-size: 1.55rem;
    }
}

/* ── 24. PREVENT CONTENT SHIFT WHEN MENU OPENS ── */
body.nav-open {
    overflow: hidden;
}

/* ── 25. STAT ITEMS – BETTER GRID ON SMALL SCREENS ── */
@media (max-width: 480px) {
    [data-theme] .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: center;
    }

    .stat-item {
        text-align: center;
        padding: 14px 10px;
        background: rgba(0, 196, 200, 0.04);
        border-radius: 12px;
        border: 1px solid rgba(0, 196, 200, 0.12);
        width: 100%;
    }

    .stat-item strong {
        display: block;
        font-size: 1.25rem;
        margin-bottom: 4px;
    }

    .stat-item span {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}


/* =======================================================
   PHARMACEUTICAL CLEAN × BIOTECH PRECISION — Design System
   Ref: DESIGN_BRIEF.md
   Concept: sterile white canvas + precision cyan + science grid
   ======================================================= */

/* ── 1. CLEAN LAB SURFACE: sections that alternate background ── */
/* Guarantee section, comparison, info-card alt sections → cool clean */
.guarantee-section,
.comparison-section,
.section-bg {
    background-color: var(--bg-secondary);
}

/* Info card content — crisp white with clinical border */
[data-theme] .info-card-content {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.18);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

/* ── 2. PRODUCT CARD — Pharmaceutical precision styling ── */
[data-theme] .product-card {
    border: 1px solid rgba(0, 196, 200, 0.14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme] .product-card:hover {
    border-color: rgba(0, 196, 200, 0.45);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.13);
}

/* ── 3. GUARANTEE CARDS — white with clean borders ── */
[data-theme] .guarantee-card {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.14);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme] .guarantee-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 28px rgba(0, 196, 200, 0.14);
}

/* ── 4. PROMO BANNER — clean white with cyan accent text ── */
.promo-banner strong,
.promo-banner b {
    color: #00a8ac;
}

/* ── 5. SCROLLBAR — minimal pharmaceutical style ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #F7F9FB;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 196, 200, 0.35);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 196, 200, 0.6);
}

/* ── 6. STAT ITEMS — clinical data display ── */
[data-theme] .stat-item {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.12);
    border-radius: 12px;
    padding: 18px 24px;
}

[data-theme] .stat-item strong {
    font-family: var(--font-primary);
    letter-spacing: -0.02em;
}

/* ── 7. SECTION DIVIDERS — precision lines ── */
[data-theme] .category-section + .category-section {
    border-top: 1px solid rgba(0, 196, 200, 0.08);
}

/* ── 8. TRUST BADGES — clinical lab feel ── */
[data-theme] .trust-badge {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.18);
    border-radius: 24px;
    padding: 7px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4a6a85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ── 9. HEX FEATURE CARDS — white lab cards ── */
[data-theme] .hex-feature-card {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.14);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

[data-theme] .hex-feature-card:hover {
    border-color: rgba(0, 196, 200, 0.40);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.12);
}

/* ── 10. EFFECT BARS — clinical measurement bars ── */
[data-theme] .effect-bar {
    background: linear-gradient(90deg, #00c4c8 0%, #00a8ac 100%);
    border-radius: 4px;
}

[data-theme] .effect-bar-container {
    background: rgba(0, 196, 200, 0.08);
    border-radius: 8px;
    height: 16px;
}

/* ── 11. PRICE TAG — clinical precision (fallback cards without image) ── */
[data-theme] .card-content > .product-price {
    font-family: var(--font-primary);
    color: #0f2540;
    font-weight: 700;
}

/* ── 12. FOOTER — clean base ── */
[data-theme] .main-footer {
    border-top: 1px solid rgba(0, 196, 200, 0.12);
}

/* ── 13. SEARCH DROPDOWN — white clinical panel ── */
[data-theme] .search-dropdown {
    background: #ffffff;
    border: 1px solid rgba(0, 196, 200, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── 14. NAV LINKS — clean pharma menu ── */
[data-theme] .nav-links {
    background: #ffffff;
    border-left: 1px solid rgba(0, 196, 200, 0.12);
}

/* ── 15. BACKGROUND ORBS — very subtle for white theme ── */
[data-theme] .bg-orb-1 {
    background: radial-gradient(circle, rgba(0, 196, 200, 0.03), transparent 70%);
}

[data-theme] .bg-orb-2 {
    background: radial-gradient(circle, rgba(0, 196, 200, 0.02), transparent 70%);
}

[data-theme] .bg-orb-3 {
    background: radial-gradient(circle, rgba(0, 196, 200, 0.015), transparent 70%);
}

/* ======================================================= */
/*   HERO PARALLAX — background layers scroll at 40% speed */
/* ======================================================= */

/* Only active on desktop (mobile skips initHeroParallax) */
@media (min-width: 769px) {
    .hero-section {
        --parallax-offset: 0px;
    }

    /* Parallax: hero background mesh shifts vertically */
    .hero-section:not([data-bg-image]):not(.hero-custom-bg)::before,
    .hero-section:not([data-bg-image]):not(.hero-custom-bg)::after {
        will-change: transform;
        transform: translateY(var(--parallax-offset));
    }

    /* Ambient hero orbs (bg-orb children of hero) also parallax */
    .hero-section > .bg-orbs {
        will-change: transform;
        transform: translateY(calc(var(--parallax-offset) * 0.6));
    }
}

/* --- Реални frosted-glass икони (images/life-icons) --- */
.life-icon-img {
    display: inline-block;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.hex-icon-inner .life-icon-img { width: 48px; height: 48px; }

/* ======================================================= */
/*   MOBILE STABILITY — fixed viewport, no header flicker  */
/* ======================================================= */
@media (max-width: 768px) {
    .main-header,
    .main-header.scrolled {
        transition: none;
        background: var(--header-scrolled-bg);
    }

    .hero-content h1 {
        animation: none;
    }

    .hero-content p {
        animation: none;
        animation-fill-mode: none;
    }

    .hero-stats {
        animation: none;
        animation-fill-mode: none;
    }

    .fade-in-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .product-card,
    .category-section,
    .hex-feature-card {
        opacity: 1;
        transform: none;
    }
}

/* Frosted икони в stat картите (бял фон): сянката е в самото изображение */
.stat-item .life-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: none;
}

/* ── Homepage „Виж още“ ── */
.category-view-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}

.category-view-more-hint {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 28rem;
    line-height: 1.55;
}

.category-view-more-hint strong {
    color: var(--accent);
    font-weight: 700;
}

.category-view-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1rem 2rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 999px;
    border: 2px solid rgba(0, 196, 200, 0.45);
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.12) 0%, rgba(0, 196, 200, 0.04) 100%);
    color: var(--accent);
    box-shadow: 0 4px 24px rgba(0, 196, 200, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.category-view-more-btn svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.category-view-more-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(0, 196, 200, 0.22) 0%, rgba(0, 196, 200, 0.08) 100%);
    box-shadow: 0 8px 32px rgba(0, 196, 200, 0.2);
}

.category-view-more-btn:hover svg {
    transform: translateX(4px);
}

/* ── Life category catalog page (portfolio-style single column) ── */
.life-category-page {
    padding: calc(var(--header-offset, 72px) + 2rem) 0 5rem;
    min-height: 60vh;
}

.life-category-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    padding: 0 20px;
}

.life-category-header h1 {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.life-category-header p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.65;
}

.life-category-count {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(0, 196, 200, 0.1);
    border: 1px solid rgba(0, 196, 200, 0.25);
}

.life-catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    max-width: 640px;
    margin: 0 auto;
}

.life-catalog-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--box-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    animation: life-catalog-fade-up 0.4s ease both;
}

@keyframes life-catalog-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.life-catalog-card:hover {
    border-color: rgba(0, 196, 200, 0.45);
    box-shadow: 0 8px 28px rgba(0, 196, 200, 0.12);
    transform: translateY(-2px);
}

.life-catalog-image {
    flex: 0 0 clamp(96px, 28vw, 140px);
    aspect-ratio: 1;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.life-catalog-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    transition: transform 0.3s ease;
}

.life-catalog-card:hover .life-catalog-image img {
    transform: scale(1.05);
}

.life-catalog-no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, #eef3f8 100%);
}

.life-catalog-body {
    padding: 0.85rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}

.life-catalog-brand {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    font-family: var(--font-primary);
}

.life-catalog-title {
    font-family: var(--font-primary);
    font-size: clamp(0.88rem, 2.5vw, 0.98rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-primary);
    margin: 0;
}

.life-catalog-tagline {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.life-catalog-price {
    margin-top: auto;
    padding-top: 0.35rem;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

.life-catalog-price .price-from {
    font-weight: 500;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-right: 0.2rem;
}

.life-catalog-price .price-original {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.88rem;
    margin-right: 0.35rem;
}

.life-catalog-price .price-sale {
    color: var(--color-sale);
}

.life-category-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.life-category-back-float {
    position: fixed;
    bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
    left: calc(1rem + env(safe-area-inset-left, 0px));
    z-index: 1005;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.15rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 196, 200, 0.35);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.life-category-back-float:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 10px 32px rgba(0, 196, 200, 0.18);
}

[data-theme="dark"] .life-category-back-float {
    background: rgba(10, 18, 28, 0.92);
    color: var(--text-primary);
}