/* ===================================================================
   NOBAMO Candle Theme — CSS Custom Properties
   Centralizované farby pre jednoduchú údržbu a budúce theming.
   Fáza 141: Tmavé časti sidebaru tečú z theme colors (BrandConfig)
   Plameň/vosk sú realistické — ostávajú hardcoded.
   =================================================================== */
:root {
    /* Plameň — realistické amber/zlaté, nezávislé od theme */
    --nobamo-gold: #E8B84D;
    --nobamo-gold-light: #FFE4A0;
    --nobamo-gold-dark: #C9A84C;
    --nobamo-gold-bright: #FFD700;

    /* Pozadie stránky — z theme cream */
    --nobamo-page-bg: var(--color-cream-100, #FAF8F5);

    /* Vosk — realistické krémové/béžové tóny, nezávislé od theme */
    --nobamo-wax-light: #EDE6DA;
    --nobamo-wax-medium: #E8DFD2;
    --nobamo-wax-dark: #E0D5C5;

    /* Sidebar tmavé prvky — dynamické z theme primary (zlatá/bronz) */
    --nobamo-wax-text: var(--color-primary-900, #4A3728);
    --nobamo-wax-icon: var(--color-primary-700, #6B5240);
    --nobamo-sidebar-cta: var(--color-primary-800, #5C4A38);
    --nobamo-sidebar-cta-light: var(--color-primary-700, #6B5A48);
    --nobamo-sidebar-cta-dark: var(--color-primary-900, #4A3C2E);
    --nobamo-sidebar-cta-hover: var(--color-primary-600, #7A6855);
    --nobamo-sidebar-link-hover: var(--color-primary-600, #8A6A3A);
}

/**
 * NOBAMO Candle/Flame UI Elements — Fáza 136.6 + 136.7 + 139
 *
 * Sviečkové a ohňové dekorácie pre NOBAMO brand.
 * Všetky štýly sú scoped pod body.brand-nobamo.
 * Čistý CSS — žiadne knižnice, minimálny performance dopad.
 *
 * Obsah:
 * 1. Candle Loading Spinner
 * 2. Section Divider (plameňový gradient)
 * 3. Footer Candle Decoration
 * 4. Candle Glow Hover Effect
 * 5. Flame Accent Underline
 * 6. Candle SVG Icon
 * 7. Hero Section — Candle Motif (Fáza 136.7)
 * 8. Category Cards — Candle Motif (Fáza 136.8)
 * 9. Header Sparks — Jemné iskry v headeri (Fáza 136.10)
 * 10. Hero Background (Fáza 138.6)
 * 11. Brand Story Section (Fáza 138.6)
 * 12. Seasonal Banner (Fáza 138.6)
 * 13. Newsletter Card (Fáza 138.6)
 * (14: Removed — header/footer zostáva green primary-900)
 * 15. Sidebar Candle — Desktop kategórie ako sviečka (Fáza 139)
 * 16. NOBAMO Header & Footer — Gradient zelená → zlatá (Fáza 141)
 */

/* ===================================================================
   1. CANDLE LOADING SPINNER
   Nahradí default SVG spinner na NOBAMO. Elegantná CSS sviečka s plameňom.
   =================================================================== */

.nobamo-candle-spinner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Sviečka kontajner */
.nobamo-candle {
    position: relative;
    width: 28px;
    height: 72px;
}

/* Knôt */
.nobamo-candle__wick {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 8px;
    background: #3D3D3D;
    border-radius: 1px;
}

/* Plameň — vonkajší */
.nobamo-candle__flame {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 22px;
    background: radial-gradient(
        ellipse at 50% 90%,
        #FFE4A0 0%,
        #E8B84D 30%,
        #C9A84C 55%,
        color-mix(in srgb, var(--color-primary-500) 40%, transparent) 80%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    animation: nobamo-flame 1.8s ease-in-out infinite;
    filter: blur(0.5px);
}

/* Plameň — vnútorný (svetlejší) */
.nobamo-candle__flame::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 10px;
    background: radial-gradient(
        ellipse at 50% 85%,
        #FFFDE6 0%,
        #FFE4A0 50%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: nobamo-flame-inner 1.2s ease-in-out infinite alternate;
}

/* Žiara okolo plameňa */
.nobamo-candle__glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 40px;
    background: radial-gradient(
        ellipse at 50% 70%,
        color-mix(in srgb, var(--nobamo-gold) 15%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-500) 8%, transparent) 40%,
        transparent 70%
    );
    animation: nobamo-glow 2.5s ease-in-out infinite;
    pointer-events: none;
}

/* Telo sviečky */
.nobamo-candle__body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 42px;
    background: linear-gradient(
        180deg,
        #E8E0D4 0%,
        #F5F0E8 20%,
        #EDE6DA 60%,
        #E0D8CC 100%
    );
    border-radius: 2px 2px 3px 3px;
    box-shadow:
        inset -2px 0 4px rgba(0, 0, 0, 0.06),
        inset 2px 0 4px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Vosk stekajúci */
.nobamo-candle__body::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -1px;
    right: -1px;
    height: 6px;
    background: linear-gradient(
        180deg,
        #F0E8DC 0%,
        #E8E0D4 100%
    );
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Plameň animácie */
@keyframes nobamo-flame {
    0%, 100% {
        transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg);
    }
    20% {
        transform: translateX(-50%) scaleX(1.04) scaleY(0.96) rotate(1deg);
    }
    40% {
        transform: translateX(-50%) scaleX(0.96) scaleY(1.04) rotate(-0.5deg);
    }
    60% {
        transform: translateX(-50%) scaleX(1.02) scaleY(0.98) rotate(1.5deg);
    }
    80% {
        transform: translateX(-50%) scaleX(0.98) scaleY(1.02) rotate(-1.5deg);
    }
}

@keyframes nobamo-flame-inner {
    0% {
        transform: translateX(-50%) scaleY(1);
        opacity: 0.85;
    }
    100% {
        transform: translateX(-50%) scaleY(0.85);
        opacity: 1;
    }
}

@keyframes nobamo-glow {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.08);
    }
}

/* Reduced motion — statický plameň */
@media (prefers-reduced-motion: reduce) {
    .nobamo-candle__flame,
    .nobamo-candle__flame::before,
    .nobamo-candle__glow {
        animation: none;
    }
}


/* ===================================================================
   2. SECTION DIVIDER — Plameňový gradient
   Používať medzi sekciami na homepage a pod headerom.
   Trieda: .nobamo-divider
   =================================================================== */

body.brand-nobamo .nobamo-divider {
    position: relative;
    height: 3px;
    margin: 2rem auto;
    max-width: 200px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nobamo-gold-dark) 15%,
        var(--nobamo-gold) 35%,
        var(--nobamo-gold-light) 50%,
        var(--nobamo-gold) 65%,
        var(--nobamo-gold-dark) 85%,
        transparent 100%
    );
    border-radius: 2px;
    overflow: visible;
}

/* Žiara pod dividerom */
body.brand-nobamo .nobamo-divider::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 25%;
    right: 25%;
    height: 7px;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--nobamo-gold) 25%, transparent) 0%,
        transparent 80%
    );
    filter: blur(2px);
    pointer-events: none;
}

/* Širší variant */
body.brand-nobamo .nobamo-divider--wide {
    max-width: 320px;
}

/* Full-width variant */
body.brand-nobamo .nobamo-divider--full {
    max-width: 100%;
}

/* Sviečková ikona v strede dividera */
body.brand-nobamo .nobamo-divider--icon {
    max-width: 300px;
    display: flex;
    align-items: center;
    gap: 0;
    height: auto;
    background: none;
}

body.brand-nobamo .nobamo-divider--icon::before,
body.brand-nobamo .nobamo-divider--icon::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nobamo-gold-dark) 40%,
        var(--nobamo-gold) 100%
    );
    border-radius: 1px;
}

body.brand-nobamo .nobamo-divider--icon::after {
    background: linear-gradient(
        90deg,
        var(--nobamo-gold) 0%,
        var(--nobamo-gold-dark) 60%,
        transparent 100%
    );
}


/* ===================================================================
   3. FOOTER CANDLE DECORATION
   Jemný plameňový gradient nad patičkou.
   Trieda: .nobamo-footer-glow
   =================================================================== */

body.brand-nobamo .nobamo-footer-glow {
    position: relative;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--color-primary-500) 10%, transparent) 10%,
        color-mix(in srgb, var(--nobamo-gold-dark) 30%, transparent) 30%,
        color-mix(in srgb, var(--nobamo-gold) 50%, transparent) 50%,
        color-mix(in srgb, var(--nobamo-gold-dark) 30%, transparent) 70%,
        color-mix(in srgb, var(--color-primary-500) 10%, transparent) 90%,
        transparent 100%
    );
}

/* Žiara efekt */
body.brand-nobamo .nobamo-footer-glow::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20%;
    right: 20%;
    height: 16px;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--nobamo-gold) 12%, transparent) 0%,
        transparent 75%
    );
    filter: blur(4px);
    pointer-events: none;
}


/* ===================================================================
   4. CANDLE GLOW HOVER EFFECT
   Jemná žiara (glow) okolo prvkov pri hoveri.
   Trieda: .nobamo-glow-hover
   =================================================================== */

body.brand-nobamo .nobamo-glow-hover {
    transition: box-shadow 0.3s ease;
}

body.brand-nobamo .nobamo-glow-hover:hover {
    box-shadow:
        0 0 15px color-mix(in srgb, var(--nobamo-gold) 15%, transparent),
        0 0 30px color-mix(in srgb, var(--color-primary-500) 8%, transparent);
}


/* ===================================================================
   5. FLAME ACCENT UNDERLINE
   Plameňový podčiarknutie pre nadpisy a linky.
   Trieda: .nobamo-flame-underline
   =================================================================== */

body.brand-nobamo .nobamo-flame-underline {
    position: relative;
    display: inline-block;
}

body.brand-nobamo .nobamo-flame-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--color-primary-500) 0%,
        var(--nobamo-gold) 50%,
        var(--color-primary-500) 100%
    );
    border-radius: 2px;
    opacity: 0.7;
}


/* ===================================================================
   6. CANDLE SVG ICON (inline SVG helper)
   Malá sviečka ikona pre divider--icon variant.
   =================================================================== */

body.brand-nobamo .nobamo-candle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--nobamo-gold);
    opacity: 0.8;
}


/* ===================================================================
   7. HERO SECTION — CANDLE MOTIF (Fáza 136.7)
   Sviečkový motív pre NOBAMO homepage hero.
   Floating spark partikle, warm glow overlay, flame wave border.
   Všetko scoped pod body.brand-nobamo.
   =================================================================== */

/* --- 7a. Warm Glow Overlay ---
   Nahrádza štandardný čierny gradient teplým amber/zeleným.
   Trieda: .nobamo-hero-overlay */
body.brand-nobamo .nobamo-hero-overlay {
    background: linear-gradient(
        to top,
        rgba(26, 26, 46, 0.75) 0%,
        color-mix(in srgb, var(--color-primary-700) 35%, transparent) 35%,
        color-mix(in srgb, var(--color-primary-500) 15%, transparent) 55%,
        color-mix(in srgb, var(--nobamo-gold) 8%, transparent) 75%,
        transparent 100%
    ) !important;
}

/* --- 7b. Ambient Glow ---
   Jemná žiara v dolnej časti hero.
   Trieda: .nobamo-hero-ambient */
body.brand-nobamo .nobamo-hero-ambient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: radial-gradient(
        ellipse at 50% 100%,
        color-mix(in srgb, var(--nobamo-gold) 12%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-500) 6%, transparent) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
}

/* --- 7c. Floating Spark Particles ---
   CSS-only floating sparks. 8 pseudo-elementov cez .nobamo-hero-sparks.
   Používa ::before a ::after + box-shadow pre viacero bodiek. */
body.brand-nobamo .nobamo-hero-sparks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* Spark dot — base */
body.brand-nobamo .nobamo-hero-sparks span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--nobamo-gold-light);
    opacity: 0;
    animation: nobamo-spark-float var(--spark-duration, 6s) var(--spark-delay, 0s) ease-in-out infinite;
}

/* Spark pozície a timing — variácie */
body.brand-nobamo .nobamo-hero-sparks span:nth-child(1) {
    left: 10%;
    bottom: 15%;
    --spark-duration: 5.5s;
    --spark-delay: 0s;
    width: 2px;
    height: 2px;
    background: var(--nobamo-gold);
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(2) {
    left: 25%;
    bottom: 20%;
    --spark-duration: 7s;
    --spark-delay: 1.2s;
    width: 3px;
    height: 3px;
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(3) {
    left: 45%;
    bottom: 10%;
    --spark-duration: 6s;
    --spark-delay: 0.5s;
    width: 2px;
    height: 2px;
    background: var(--nobamo-gold-dark);
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(4) {
    left: 60%;
    bottom: 25%;
    --spark-duration: 8s;
    --spark-delay: 2s;
    width: 4px;
    height: 4px;
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(5) {
    left: 75%;
    bottom: 12%;
    --spark-duration: 5s;
    --spark-delay: 0.8s;
    width: 2px;
    height: 2px;
    background: var(--nobamo-gold);
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(6) {
    left: 88%;
    bottom: 18%;
    --spark-duration: 7.5s;
    --spark-delay: 1.5s;
    width: 3px;
    height: 3px;
    background: var(--nobamo-gold-dark);
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(7) {
    left: 35%;
    bottom: 30%;
    --spark-duration: 9s;
    --spark-delay: 3s;
    width: 2px;
    height: 2px;
}

body.brand-nobamo .nobamo-hero-sparks span:nth-child(8) {
    left: 55%;
    bottom: 8%;
    --spark-duration: 6.5s;
    --spark-delay: 0.3s;
    width: 3px;
    height: 3px;
    background: var(--nobamo-gold);
}

/* Spark float animation — stúpa hore, mierne vlní */
@keyframes nobamo-spark-float {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }
    10% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.6;
        transform: translateY(-120px) translateX(15px) scale(0.8);
    }
    80% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
        transform: translateY(-250px) translateX(-10px) scale(0.4);
    }
}

/* --- 7d. Flame Wave Border ---
   Plameňová vlna na spodku hero sekcie.
   Trieda: .nobamo-hero-flame-wave */
body.brand-nobamo .nobamo-hero-flame-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 24px;
    z-index: 3;
    overflow: hidden;
}

/* SVG wave s plameňovým gradientom */
body.brand-nobamo .nobamo-hero-flame-wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -5%;
    right: -5%;
    height: 24px;
    background: var(--nobamo-page-bg, #F5F9F6);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24h1200V12c-50-8-100 4-150 0s-50-12-100-8-50 12-100 8-50-8-100-4-50 12-100 8-50-12-100-6-50 10-100 6-50-8-100-4-50 12-100 8-50-10-100-4S50 4 0 12z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24h1200V12c-50-8-100 4-150 0s-50-12-100-8-50 12-100 8-50-8-100-4-50 12-100 8-50-12-100-6-50 10-100 6-50-8-100-4-50 12-100 8-50-10-100-4S50 4 0 12z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

/* Plameňový gradient glow nad wave */
body.brand-nobamo .nobamo-hero-flame-wave::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 10%;
    right: 10%;
    height: 12px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--nobamo-gold) 20%, transparent) 20%,
        color-mix(in srgb, var(--nobamo-gold-light) 30%, transparent) 50%,
        color-mix(in srgb, var(--nobamo-gold) 20%, transparent) 80%,
        transparent 100%
    );
    filter: blur(6px);
    pointer-events: none;
}

/* --- 7e. Hero CTA Button — NOBAMO variant ---
   Zelená CTA so sviečkovou žiarou.
   Trieda: .nobamo-hero-cta */
body.brand-nobamo .nobamo-hero-cta {
    background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--nobamo-gold) 30%, transparent);
    transition: all 0.3s ease;
}

body.brand-nobamo .nobamo-hero-cta:hover {
    background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%) !important;
    box-shadow:
        0 0 20px color-mix(in srgb, var(--nobamo-gold) 20%, transparent),
        0 0 40px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
    border-color: color-mix(in srgb, var(--nobamo-gold) 50%, transparent);
    transform: scale(1.05);
}

/* --- 7f. Hero Navigation Dots — NOBAMO variant --- */
body.brand-nobamo .nobamo-hero-dot {
    background: color-mix(in srgb, var(--nobamo-gold) 40%, transparent);
}

body.brand-nobamo .nobamo-hero-dot.active,
body.brand-nobamo .nobamo-hero-dot[data-active="true"] {
    background: var(--nobamo-gold);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    body.brand-nobamo .nobamo-hero-sparks span {
        animation: none;
        opacity: 0.4;
    }
}


/* ===================================================================
   8. CATEGORY CARDS — Sviečkový dizajn (Fáza 136.8)
   NOBAMO kategórie s candle motívom — warm glow, flame accenty.
   Scoped pod body.brand-nobamo.
   =================================================================== */

/* --- 8a. Category Card — Candle Glow Hover ---
   Nahradí štandardný shadow teplou amber+green žiarou. */
body.brand-nobamo .nobamo-category-card {
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

body.brand-nobamo .nobamo-category-card:hover {
    box-shadow:
        0 0 20px color-mix(in srgb, var(--nobamo-gold) 20%, transparent),
        0 0 40px color-mix(in srgb, var(--color-primary-500) 10%, transparent),
        0 4px 20px rgba(0, 0, 0, 0.12);
}

/* --- 8b. Featured Card — Flame Top Accent ---
   Veľká (2x2) karta dostáva plameňový gradient na vrchu pri hover. */
body.brand-nobamo .nobamo-category-card--featured::after {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--nobamo-gold-dark) 20%,
        var(--nobamo-gold) 40%,
        var(--nobamo-gold-light) 50%,
        var(--nobamo-gold) 60%,
        var(--nobamo-gold-dark) 80%,
        transparent 100%
    );
    border-radius: 0 0 2px 2px;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.4s ease;
}

body.brand-nobamo .nobamo-category-card--featured:hover::after {
    opacity: 1;
}

/* --- 8c. Warm Ambient Overlay ---
   Jemná teplá žiara v rohu karty, imituje svetlo sviečky. */
body.brand-nobamo .nobamo-category-warmth {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 25% 75%,
        color-mix(in srgb, var(--nobamo-gold) 10%, transparent) 0%,
        color-mix(in srgb, var(--nobamo-gold-dark) 5%, transparent) 30%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

body.brand-nobamo .nobamo-category-card:hover .nobamo-category-warmth {
    opacity: 1;
}

/* --- 8d. Category Icon Glow ---
   Ikona kategórie dostáva teplú žiaru. */
body.brand-nobamo .nobamo-category-card:hover .nobamo-category-icon {
    filter: brightness(0) invert(1) drop-shadow(0 0 6px color-mix(in srgb, var(--nobamo-gold) 40%, transparent));
}

/* --- 8e. All Categories Page — Accordion NOBAMO styling --- */

/* Accordion header — subtle green border */
body.brand-nobamo .nobamo-cat-accordion {
    border: 1px solid color-mix(in srgb, var(--color-primary-500) 15%, transparent);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.brand-nobamo .nobamo-cat-accordion:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 30%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary-500) 8%, transparent);
}

/* Subcategory chip — Nordic Green tint */
body.brand-nobamo .nobamo-cat-chip {
    background: color-mix(in srgb, var(--color-primary-500) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    transition: all 0.2s ease;
}

body.brand-nobamo .nobamo-cat-chip:hover {
    background: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    border-color: color-mix(in srgb, var(--color-primary-500) 25%, transparent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--nobamo-gold) 8%, transparent);
}

/* --- 8f. "Všetky kategórie" Button — NOBAMO variant --- */
body.brand-nobamo .nobamo-all-categories-btn {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary-500) 20%, transparent);
    color: var(--color-primary-700);
    transition: all 0.3s ease;
}

body.brand-nobamo .nobamo-all-categories-btn:hover {
    background: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
    border-color: color-mix(in srgb, var(--color-primary-500) 35%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--nobamo-gold) 10%, transparent);
    color: var(--color-primary-800);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    body.brand-nobamo .nobamo-category-card {
        transition: none;
    }
    body.brand-nobamo .nobamo-category-warmth {
        transition: none;
    }
    body.brand-nobamo .nobamo-header-sparks span {
        animation: none;
        opacity: 0.3;
    }
}


/* ===================================================================
   9. HEADER SPARKS — Jemné iskry v headeri (Fáza 136.10)
   Subtílne plávajúce bodky v NOBAMO headeri. Len dekorácia.
   Scoped pod body.brand-nobamo.
   =================================================================== */

body.brand-nobamo .nobamo-header-sparks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

body.brand-nobamo .nobamo-header-sparks span {
    position: absolute;
    border-radius: 50%;
    background: var(--nobamo-gold-light);
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--nobamo-gold) 60%, transparent);
    opacity: 0;
    animation: nobamo-header-spark var(--hs-duration, 4s) var(--hs-delay, 0s) ease-in-out infinite;
}

/* Spark 1 */
body.brand-nobamo .nobamo-header-sparks span:nth-child(1) {
    left: 6%;
    bottom: 15%;
    width: 4px;
    height: 4px;
    --hs-duration: 3.5s;
    --hs-delay: 0s;
}

/* Spark 2 — s výrazným glow */
body.brand-nobamo .nobamo-header-sparks span:nth-child(2) {
    left: 22%;
    bottom: 50%;
    width: 5px;
    height: 5px;
    background: var(--nobamo-gold-bright);
    box-shadow: 0 0 8px 3px color-mix(in srgb, var(--nobamo-gold-bright) 70%, transparent);
    --hs-duration: 5s;
    --hs-delay: 0.8s;
}

/* Spark 3 */
body.brand-nobamo .nobamo-header-sparks span:nth-child(3) {
    left: 42%;
    bottom: 25%;
    width: 4px;
    height: 4px;
    background: var(--nobamo-gold);
    box-shadow: 0 0 7px 2px color-mix(in srgb, var(--nobamo-gold) 65%, transparent);
    --hs-duration: 4s;
    --hs-delay: 0.3s;
}

/* Spark 4 — najväčšia */
body.brand-nobamo .nobamo-header-sparks span:nth-child(4) {
    left: 65%;
    bottom: 40%;
    width: 5px;
    height: 5px;
    background: var(--nobamo-gold-bright);
    box-shadow: 0 0 10px 3px color-mix(in srgb, var(--nobamo-gold-bright) 60%, transparent);
    --hs-duration: 6s;
    --hs-delay: 1.5s;
}

/* Spark 5 */
body.brand-nobamo .nobamo-header-sparks span:nth-child(5) {
    left: 85%;
    bottom: 20%;
    width: 4px;
    height: 4px;
    background: var(--nobamo-gold);
    box-shadow: 0 0 7px 2px color-mix(in srgb, var(--nobamo-gold) 65%, transparent);
    --hs-duration: 4.5s;
    --hs-delay: 2s;
}

/* Spark 6 */
body.brand-nobamo .nobamo-header-sparks span:nth-child(6) {
    left: 50%;
    bottom: 60%;
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--nobamo-gold-light) 55%, transparent);
    --hs-duration: 5.5s;
    --hs-delay: 3s;
}

/* Spark 7 */
body.brand-nobamo .nobamo-header-sparks span:nth-child(7) {
    left: 15%;
    bottom: 65%;
    width: 3px;
    height: 3px;
    background: var(--nobamo-gold-bright);
    box-shadow: 0 0 8px 2px color-mix(in srgb, var(--nobamo-gold-bright) 50%, transparent);
    --hs-duration: 4s;
    --hs-delay: 1s;
}

/* Header spark animácia — výraznejšia, dlhšie viditeľná */
@keyframes nobamo-header-spark {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translateY(-3px) translateX(2px) scale(1);
    }
    40% {
        opacity: 0.85;
        transform: translateY(-15px) translateX(10px) scale(1.1);
    }
    70% {
        opacity: 0.5;
        transform: translateY(-30px) translateX(-5px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(-45px) translateX(3px) scale(0.4);
    }
}


/* ===================================================================
   10. HERO BACKGROUND — Lifestyle Image + Warm Fallback (Fáza 138.6)
   Teplý gradient s candle ambientom. Nahradiť background-image keď bude fotka.
   =================================================================== */

body.brand-nobamo .nobamo-hero-bg {
    background:
        radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--nobamo-gold) 12%, transparent) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--nobamo-gold-dark) 8%, transparent) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 40%, color-mix(in srgb, var(--color-primary-500) 6%, transparent) 0%, transparent 40%),
        linear-gradient(to bottom, var(--color-primary-950) 0%, var(--color-primary-800) 40%, var(--color-primary-900) 100%);
    /* TODO: Nahradiť lifestyle fotkou sviečky:
       background: url('/img/nobamo-hero.jpg') center/cover no-repeat; */
}


/* ===================================================================
   11. BRAND STORY SECTION (Fáza 138.6)
   "Náš príbeh" — krémová karta s CSS sviečkovým vizuálom.
   =================================================================== */

body.brand-nobamo .nobamo-story-card {
    background: #FDFBF7;
    border: 1px solid color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* Ľavá strana — vizuálne pozadie */
body.brand-nobamo .nobamo-story-visual {
    background:
        radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--nobamo-gold) 15%, transparent) 0%, transparent 50%),
        linear-gradient(to bottom right, var(--color-primary-800), var(--color-primary-900));
}

/* Skupina 3 sviečok */
body.brand-nobamo .nobamo-story-candle-group {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

body.brand-nobamo .nobamo-story-candle {
    position: relative;
    background: linear-gradient(180deg, #EDE6DA 0%, #E0D8CC 100%);
    border-radius: 4px 4px 6px 6px;
    box-shadow:
        inset -2px 0 6px rgba(0,0,0,0.06),
        inset 2px 0 6px rgba(255,255,255,0.2),
        0 4px 12px rgba(0,0,0,0.15);
}

body.brand-nobamo .nobamo-story-candle--tall {
    width: 32px;
    height: 100px;
}

body.brand-nobamo .nobamo-story-candle--medium {
    width: 36px;
    height: 76px;
}

body.brand-nobamo .nobamo-story-candle--short {
    width: 28px;
    height: 56px;
}

/* Plameň */
body.brand-nobamo .nobamo-story-flame {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 18px;
    background: radial-gradient(
        ellipse at 50% 90%,
        #FFE4A0 0%, #E8B84D 40%, rgba(201, 168, 76, 0.4) 75%, transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    animation: nobamo-flame 1.8s ease-in-out infinite;
    filter: blur(0.5px);
}

body.brand-nobamo .nobamo-story-flame--delay {
    animation-delay: 0.4s;
}

body.brand-nobamo .nobamo-story-flame--delay2 {
    animation-delay: 0.9s;
}

/* Plameň glow */
body.brand-nobamo .nobamo-story-flame::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 28px;
    background: radial-gradient(
        ellipse at 50% 70%,
        color-mix(in srgb, var(--nobamo-gold) 20%, transparent) 0%, transparent 70%
    );
    pointer-events: none;
}

/* Knôt */
body.brand-nobamo .nobamo-story-candle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background: #3D3D3D;
    border-radius: 1px;
}

/* Story CTA link — underline animation */
body.brand-nobamo .nobamo-story-cta {
    position: relative;
}

body.brand-nobamo .nobamo-story-cta::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary-600), var(--nobamo-gold));
    border-radius: 1px;
    transition: width 0.3s ease;
}

body.brand-nobamo .nobamo-story-cta:hover::after {
    width: 100%;
}


/* ===================================================================
   12. SEASONAL BANNER (Fáza 138.6)
   Gradientový banner pre sezónne kolekcie.
   =================================================================== */

body.brand-nobamo .nobamo-seasonal-banner {
    background:
        radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--nobamo-gold) 10%, transparent) 0%, transparent 35%),
        radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--nobamo-gold) 15%, transparent) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--nobamo-gold) 8%, transparent) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-primary-800) 0%, var(--color-primary-600) 40%, var(--color-primary-800) 100%);
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

body.brand-nobamo .nobamo-seasonal-banner:hover {
    box-shadow:
        0 0 40px color-mix(in srgb, var(--nobamo-gold) 20%, transparent),
        0 8px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* --- 12b. Seasonal Banner — Floating Ember Sparks ---
   Jemné iskričky ako od sviečkového plameňa, prispôsobené pre menší banner.
   10 sparkov s rôznymi veľkosťami, rýchlosťami a pozíciami. */
body.brand-nobamo .nobamo-seasonal-sparks {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

body.brand-nobamo .nobamo-seasonal-sparks span {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: nobamo-seasonal-spark-rise var(--ss-dur, 5s) var(--ss-delay, 0s) ease-in-out infinite;
}

/* Spark 1 — malá zlatá, ľavá strana */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(1) {
    left: 8%;  bottom: 10%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold);
    box-shadow: 0 0 4px var(--nobamo-gold);
    --ss-dur: 4.5s; --ss-delay: 0s;
}

/* Spark 2 — väčšia svetlá, stred-ľavo */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(2) {
    left: 22%; bottom: 20%;
    width: 3px; height: 3px;
    background: var(--nobamo-gold-light);
    box-shadow: 0 0 6px var(--nobamo-gold-light);
    --ss-dur: 6s; --ss-delay: 0.8s;
}

/* Spark 3 — drobná tmavá, stred */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(3) {
    left: 38%; bottom: 5%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold-dark);
    box-shadow: 0 0 3px var(--nobamo-gold-dark);
    --ss-dur: 5s; --ss-delay: 1.5s;
}

/* Spark 4 — jasná veľká, stred-pravo */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(4) {
    left: 52%; bottom: 15%;
    width: 3px; height: 3px;
    background: var(--nobamo-gold-bright);
    box-shadow: 0 0 8px var(--nobamo-gold-bright);
    --ss-dur: 7s; --ss-delay: 0.3s;
}

/* Spark 5 — malá, pravo */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(5) {
    left: 68%; bottom: 25%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold);
    box-shadow: 0 0 4px var(--nobamo-gold);
    --ss-dur: 5.5s; --ss-delay: 2s;
}

/* Spark 6 — svetlá, pravý kraj */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(6) {
    left: 82%; bottom: 8%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold-light);
    box-shadow: 0 0 5px var(--nobamo-gold-light);
    --ss-dur: 6.5s; --ss-delay: 1s;
}

/* Spark 7 — drobná, ľavý stred */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(7) {
    left: 15%; bottom: 30%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold-dark);
    box-shadow: 0 0 3px var(--nobamo-gold-dark);
    --ss-dur: 8s; --ss-delay: 3s;
}

/* Spark 8 — stredná jasná, stred-pravo */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(8) {
    left: 60%; bottom: 5%;
    width: 3px; height: 3px;
    background: var(--nobamo-gold);
    box-shadow: 0 0 6px var(--nobamo-gold);
    --ss-dur: 5s; --ss-delay: 1.8s;
}

/* Spark 9 — veľká žiarivá, ľavá tretina */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(9) {
    left: 30%; bottom: 12%;
    width: 3px; height: 3px;
    background: var(--nobamo-gold-bright);
    box-shadow: 0 0 8px var(--nobamo-gold-bright);
    --ss-dur: 7.5s; --ss-delay: 0.5s;
}

/* Spark 10 — malá, pravý okraj */
body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(10) {
    left: 92%; bottom: 18%;
    width: 2px; height: 2px;
    background: var(--nobamo-gold-light);
    box-shadow: 0 0 4px var(--nobamo-gold-light);
    --ss-dur: 4.8s; --ss-delay: 2.5s;
}

/* Seasonal spark animation — jemný vzostup s miháním
   Menší rozsah ako hero sparks (max -80px), plus jemné blikanie */
@keyframes nobamo-seasonal-spark-rise {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0.6);
    }
    8% {
        opacity: 0.9;
        transform: translateY(-5px) scale(1);
    }
    25% {
        opacity: 0.7;
        transform: translateY(-25px) translateX(8px) scale(0.9);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50px) translateX(-5px) scale(0.7);
    }
    75% {
        opacity: 0.3;
        transform: translateY(-65px) translateX(10px) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) translateX(-3px) scale(0.3);
    }
}

/* Hover: sparky zrýchlia a zjasnia */
body.brand-nobamo .nobamo-seasonal-banner:hover .nobamo-seasonal-sparks span {
    animation-duration: calc(var(--ss-dur) * 0.7);
    filter: brightness(1.3);
}

/* Mobile: menej sparklingov pre performance */
@media (max-width: 768px) {
    body.brand-nobamo .nobamo-seasonal-sparks span:nth-child(n+7) {
        display: none;
    }
}

/* Reduced motion — statické iskričky */
@media (prefers-reduced-motion: reduce) {
    body.brand-nobamo .nobamo-seasonal-sparks span {
        animation: none;
        opacity: 0.4;
    }
}


/* ===================================================================
   13. NEWSLETTER CARD (Fáza 138.6)
   Tmavý zelený pozadie s candle ambientom.
   =================================================================== */

body.brand-nobamo .nobamo-newsletter-card {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--nobamo-gold) 10%, transparent) 0%, transparent 50%),
        linear-gradient(to bottom, var(--color-primary-900), var(--color-primary-800), var(--color-primary-900));
}

body.brand-nobamo .nobamo-nl-btn {
    background: linear-gradient(135deg, var(--nobamo-gold) 0%, var(--nobamo-gold-dark) 100%);
    color: var(--color-primary-900);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--nobamo-gold) 30%, transparent);
    transition: all 0.3s ease;
}

body.brand-nobamo .nobamo-nl-btn:hover {
    background: linear-gradient(135deg, var(--nobamo-gold-light) 0%, var(--nobamo-gold) 100%);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--nobamo-gold) 50%, transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.brand-nobamo .nobamo-story-flame,
    body.brand-nobamo .nobamo-story-flame--delay,
    body.brand-nobamo .nobamo-story-flame--delay2 {
        animation: none;
    }
    body.brand-nobamo .nobamo-seasonal-banner:hover {
        transform: none;
    }
}


/* ===================================================================
   15. SIDEBAR CANDLE — Desktop kategórie ako sviečka (Fáza 139)
   Celý sidebar vyzerá ako sviečka: plameň, knôt, iskry, voskové telo.
   Candle wrapper je sticky (z Tailwind triedy v HTML).
   Len desktop (2xl+), scoped pod body.brand-nobamo.
   =================================================================== */

/* --- 15. Candle wrapper ---
   POZOR: position: sticky je z Tailwind triedy v HTML, NEPREPÍSAŤ! */
body.brand-nobamo .nobamo-sidebar-candle {
    padding-top: 52px;
    overflow: visible;
}

/* --- 15a. Candle Body — voskové telo sviečky --- */
body.brand-nobamo .nobamo-sidebar-body {
    position: relative;
    /* Vosk: vrch je tmavší (blízko plameňa = ohriaty), dole svetlejší */
    background: linear-gradient(
        180deg,
        #EDE6DA 0%,       /* vrch — tmavší ohriaty vosk, nadväzuje na header */
        #F0EAE0 8%,
        #F5F0E8 25%,      /* prechod do svetlejšieho */
        #F8F4EE 50%,      /* stred — svetlý krémový vosk */
        #F5F0E8 80%,
        #EDE6DA 100%      /* spodok — tmavší */
    );
    /* Zaoblenie: hore jemné, dole mierne = navezuje na podstavec */
    border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
    /* 3D cylindrický efekt — svetlo z ľavého boku, tieň na pravom */
    box-shadow:
        inset 3px 0 8px rgba(255, 255, 255, 0.4),
        inset -3px 0 8px rgba(0, 0, 0, 0.04),
        inset 0 -4px 8px rgba(0, 0, 0, 0.03),
        0 0 28px color-mix(in srgb, var(--nobamo-gold) 12%, transparent),
        0 6px 20px rgba(0, 0, 0, 0.08);
    /* Jemná vosková "textúra" border */
    border: 1px solid rgba(224, 216, 204, 0.6);
}

/* Melt pool — roztopený vosk okolo knôtu, viditeľný amber krúžok */
body.brand-nobamo .nobamo-sidebar-body::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 10px;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 210, 100, 0.2) 0%,
        color-mix(in srgb, var(--nobamo-gold) 12%, transparent) 35%,
        rgba(224, 200, 160, 0.06) 60%,
        transparent 100%
    );
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    filter: blur(1.5px);
}

/* Teplé svetlo od plameňa — dopadá na vrch sviečky */
body.brand-nobamo .nobamo-sidebar-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background:
        /* Stredový warm spot */
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 200, 80, 0.18) 0%,
            rgba(255, 180, 60, 0.09) 30%,
            transparent 55%
        ),
        /* Širšia jemná žiara */
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 220, 140, 0.1) 0%,
            transparent 70%
        );
    pointer-events: none;
    z-index: 0;
    border-radius: 0.5rem 0.5rem 0 0;
}

/* --- 15k. Wax Pool — "U" misočka roztaveného vosku pod knôtom ---
   Keď sviečka horí, vosk sa topí a vytvára konkávnu "U" misočku okolo knôtu.
   Rim = vyvýšený okraj, melt = tekutý vosk v strede. */
body.brand-nobamo .nobamo-sidebar-wax-pool {
    position: absolute;
    top: 47px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 12px;
    z-index: 4;
    pointer-events: none;
}

/* Rim — vyvýšený okraj misočky (svetlejší vosk) */
body.brand-nobamo .nobamo-wax-pool-rim {
    position: absolute;
    inset: 0;
    background:
        /* Ľavý vyvýšený okraj */
        radial-gradient(
            ellipse at 12% 50%,
            rgba(245, 238, 228, 0.95) 0%,
            rgba(237, 230, 218, 0.7) 40%,
            transparent 70%
        ),
        /* Pravý vyvýšený okraj */
        radial-gradient(
            ellipse at 88% 50%,
            rgba(245, 238, 228, 0.95) 0%,
            rgba(237, 230, 218, 0.7) 40%,
            transparent 70%
        );
    border-radius: 50%;
    /* 3D hrana — svetlo zhora, tieň zdola = vyvýšený okraj */
    box-shadow:
        inset 0 -3px 4px rgba(0, 0, 0, 0.06),
        inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

/* Melt — tekutý vosk v strede "U" misočky */
body.brand-nobamo .nobamo-wax-pool-melt {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 8px;
    background: radial-gradient(
        ellipse at 50% 50%,
        rgba(255, 210, 100, 0.35) 0%,
        rgba(232, 184, 77, 0.2) 40%,
        rgba(240, 220, 170, 0.1) 70%,
        transparent 100%
    );
    border-radius: 50%;
    /* Zapustenie — tieň zhora simuluje konkávnosť */
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 -1px 2px rgba(255, 240, 200, 0.3);
    /* Jemný shimmer efekt — tekutý vosk sa leskne */
    animation: nobamo-wax-pool-shimmer 4s ease-in-out infinite;
}

@keyframes nobamo-wax-pool-shimmer {
    0%, 100% {
        opacity: 0.8;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
}

/* --- 15b. Knôt --- */
body.brand-nobamo .nobamo-sidebar-wick {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) rotate(1.5deg);
    width: 2.5px;
    height: 22px;
    background: linear-gradient(to bottom, #888, #555, #2a2a2a);
    border-radius: 1px;
    z-index: 5;
}

/* Ohorený koniec knôtu — malé zhrubnutie */
body.brand-nobamo .nobamo-sidebar-wick::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
}

/* --- 15c. Plameň — veľký, realistický --- */
body.brand-nobamo .nobamo-sidebar-flame {
    position: absolute;
    top: 2px;
    left: 50%;
    width: 26px;
    height: 44px;
    /* Vonkajší plameň — oranžovo-žltý s jemným červeným nádychom */
    background: radial-gradient(
        ellipse at 50% 82%,
        #FFE4A0 0%,
        #FFCC55 18%,
        #F0A030 35%,
        #E88A20 50%,
        rgba(220, 120, 30, 0.3) 72%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    animation: nobamo-sidebar-flicker 2s ease-in-out infinite;
    filter: blur(0.4px);
    z-index: 6;
    transform-origin: 50% 100%;
}

/* Plameň vnútorný — jasné bielo-žlté jadro */
body.brand-nobamo .nobamo-sidebar-flame::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 22px;
    background: radial-gradient(
        ellipse at 50% 78%,
        #FFFEF8 0%,
        #FFFDE0 25%,
        #FFE4A0 50%,
        #FFCC55 75%,
        transparent 100%
    );
    border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
    animation: nobamo-sidebar-core 1.3s ease-in-out infinite alternate;
}

/* Glow okolo plameňa — veľký, teplý */
body.brand-nobamo .nobamo-sidebar-flame::after {
    content: '';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 68px;
    background: radial-gradient(
        ellipse at 50% 60%,
        rgba(255, 200, 80, 0.35) 0%,
        rgba(255, 180, 60, 0.18) 25%,
        rgba(232, 150, 50, 0.08) 50%,
        transparent 72%
    );
    pointer-events: none;
    animation: nobamo-sidebar-glow 3s ease-in-out infinite;
}

/* --- 15d. Iskričky — stúpajú od plameňa --- */
body.brand-nobamo .nobamo-sidebar-sparks {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 40px;
    pointer-events: none;
    z-index: 7;
    overflow: visible;
}

body.brand-nobamo .nobamo-sidebar-sparks span {
    position: absolute;
    bottom: 4px;
    border-radius: 50%;
    background: var(--nobamo-gold-light);
    opacity: 0;
    animation: nobamo-sidebar-spark var(--ss-dur, 2.5s) var(--ss-del, 0s) ease-out infinite;
}

body.brand-nobamo .nobamo-sidebar-sparks span:nth-child(1) {
    left: 40%;
    width: 2px;
    height: 2px;
    --ss-dur: 2.2s;
    --ss-del: 0s;
    background: var(--nobamo-gold-bright);
}

body.brand-nobamo .nobamo-sidebar-sparks span:nth-child(2) {
    left: 55%;
    width: 2.5px;
    height: 2.5px;
    --ss-dur: 2.8s;
    --ss-del: 0.6s;
    background: var(--nobamo-gold-light);
}

body.brand-nobamo .nobamo-sidebar-sparks span:nth-child(3) {
    left: 35%;
    width: 1.5px;
    height: 1.5px;
    --ss-dur: 3.2s;
    --ss-del: 1.1s;
    background: #F0C040;
}

body.brand-nobamo .nobamo-sidebar-sparks span:nth-child(4) {
    left: 60%;
    width: 2px;
    height: 2px;
    --ss-dur: 2.5s;
    --ss-del: 1.8s;
    background: var(--nobamo-gold-bright);
}

body.brand-nobamo .nobamo-sidebar-sparks span:nth-child(5) {
    left: 48%;
    width: 1.5px;
    height: 1.5px;
    --ss-dur: 3s;
    --ss-del: 0.3s;
    background: var(--nobamo-gold);
}

/* Iskry animácia — stúpajú, kolíšu sa, miznú */
@keyframes nobamo-sidebar-spark {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }
    15% {
        opacity: 0.9;
    }
    40% {
        opacity: 0.7;
        transform: translateY(-18px) translateX(6px) scale(0.8);
    }
    70% {
        opacity: 0.3;
        transform: translateY(-35px) translateX(-4px) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) translateX(2px) scale(0.2);
    }
}

/* --- 15e. Plameň animácie --- */

/* Hlavný flicker — nakláňanie, škálovanie */
@keyframes nobamo-sidebar-flicker {
    0%, 100% {
        transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg);
        opacity: 0.95;
    }
    10% {
        transform: translateX(-50%) scaleX(1.08) scaleY(0.92) rotate(2deg);
    }
    25% {
        transform: translateX(-50%) scaleX(0.93) scaleY(1.08) rotate(-1.5deg);
        opacity: 1;
    }
    40% {
        transform: translateX(-50%) scaleX(1.05) scaleY(0.95) rotate(2.5deg);
    }
    55% {
        transform: translateX(-50%) scaleX(0.95) scaleY(1.06) rotate(-2deg);
        opacity: 0.9;
    }
    70% {
        transform: translateX(-50%) scaleX(1.07) scaleY(0.94) rotate(1.5deg);
        opacity: 1;
    }
    85% {
        transform: translateX(-50%) scaleX(0.96) scaleY(1.04) rotate(-1deg);
    }
}

/* Vnútorné jadro — pulzujúce */
@keyframes nobamo-sidebar-core {
    0% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-50%) scaleY(0.85) scaleX(1.1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(1.05) scaleX(0.9);
        opacity: 0.85;
    }
}

/* Glow pulz — dýchanie */
@keyframes nobamo-sidebar-glow {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(-50%) scale(1);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
    60% {
        opacity: 0.7;
        transform: translateX(-50%) scale(0.95);
    }
}

/* --- 15f. Header "Kategórie" — plynulý prechod do tela sviečky --- */
body.brand-nobamo .nobamo-sidebar-header {
    overflow: visible;
    z-index: 1;
    /* Jemný gradient zhora (tmavší vosk) dole splýva s telom */
    background: linear-gradient(
        to bottom,
        var(--nobamo-wax-dark),
        var(--nobamo-wax-medium),
        var(--nobamo-wax-light)
    ) !important;
    border-bottom: none !important;
}

/* Subtitle text — tmavší pre čitateľnosť na svetlom pozadí */
body.brand-nobamo .nobamo-sidebar-header p {
    color: rgba(120, 100, 75, 0.7) !important;
}

/* H2 text — tmavý na svetlom pozadí */
body.brand-nobamo .nobamo-sidebar-header h2 {
    color: var(--nobamo-wax-text) !important;
}

/* Ikona wrapper — teplý hnedý odtieň */
body.brand-nobamo .nobamo-sidebar-header .rounded-xl {
    background: rgba(140, 110, 70, 0.15) !important;
}

/* Ikona SVG — tmavá na svetlom pozadí */
body.brand-nobamo .nobamo-sidebar-header .rounded-xl svg {
    color: var(--nobamo-wax-icon) !important;
}

/* --- 15g. Wax Rim — tenká linka na spodku headera --- */
body.brand-nobamo .nobamo-sidebar-wax-rim {
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 185, 160, 0.4) 20%,
        rgba(200, 185, 160, 0.6) 50%,
        rgba(200, 185, 160, 0.4) 80%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

/* --- 15h. Spodný CTA "Všetky kategórie" — teplý, harmonický --- */
body.brand-nobamo .nobamo-sidebar-body .border-t:last-child a {
    background: linear-gradient(
        135deg,
        var(--nobamo-sidebar-cta-light) 0%,
        var(--nobamo-sidebar-cta) 50%,
        var(--nobamo-sidebar-cta-dark) 100%
    ) !important;
    border: 1px solid rgba(200, 180, 150, 0.25);
    transition: all 0.3s ease;
}

body.brand-nobamo .nobamo-sidebar-body .border-t:last-child a:hover {
    background: linear-gradient(
        135deg,
        var(--nobamo-sidebar-cta-hover) 0%,
        var(--nobamo-sidebar-cta-light) 50%,
        var(--nobamo-sidebar-cta) 100%
    ) !important;
    border-color: rgba(200, 180, 150, 0.4);
    box-shadow: 0 0 12px rgba(200, 180, 150, 0.15);
}

/* Blog link — teplý hover */
body.brand-nobamo .nobamo-sidebar-body .border-t .group:hover span {
    color: var(--nobamo-sidebar-link-hover) !important;
}

/* --- 15i. Spodok tela sviečky --- */
body.brand-nobamo .nobamo-sidebar-body .border-t:last-child {
    border-color: rgba(200, 190, 175, 0.3) !important;
    border-radius: 0 0 1rem 1rem;
}

/* --- 15k. Vintage mosadzný svietnik --- */
body.brand-nobamo .nobamo-sidebar-base {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -1px;
    z-index: 1;
    pointer-events: none;
}

/* Miska — rozšírená pod telom sviečky, chytá vosk */
body.brand-nobamo .nobamo-sidebar-base-plate {
    position: relative;
    width: 105%;
    height: 10px;
    background: linear-gradient(
        to bottom,
        #C5A55A,
        #B8953E,
        #A68530
    );
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 160, 0.5),
        inset 4px 0 6px rgba(255, 235, 160, 0.2),
        inset -4px 0 6px rgba(100, 70, 20, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.12);
}

/* Nôžka — tenký stredový stĺpik */
body.brand-nobamo .nobamo-sidebar-base-plate::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 10px;
    background: linear-gradient(
        to right,
        #A68530,
        #C5A55A,
        #D4B86A,
        #C5A55A,
        #A68530
    );
    border-radius: 0 0 3px 3px;
    box-shadow:
        inset 3px 0 4px rgba(255, 235, 160, 0.2),
        inset -3px 0 4px rgba(100, 70, 20, 0.15);
}

/* Pätka — širšia základňa */
body.brand-nobamo .nobamo-sidebar-base-plate::after {
    content: '';
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 8px;
    background: linear-gradient(
        to bottom,
        #C5A55A,
        #B8953E,
        #A07828
    );
    border-radius: 3px 3px 50% 50% / 3px 3px 100% 100%;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 160, 0.45),
        inset 4px 0 5px rgba(255, 235, 160, 0.15),
        inset -4px 0 5px rgba(100, 70, 20, 0.12),
        0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Tieň pod svietníkom */
body.brand-nobamo .nobamo-sidebar-base::after {
    content: '';
    position: absolute;
    bottom: -36px;
    left: 8%;
    right: 8%;
    height: 10px;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(0, 0, 0, 0.07) 0%,
        rgba(0, 0, 0, 0.02) 50%,
        transparent 100%
    );
}

/* --- 15l. Dymové prúžky — stúpajú z plameňa (Fáza 139.9A) ---
   3 vlnité prúžky, veľmi subtílne, pomalé, sivé/priesvitné. */
body.brand-nobamo .nobamo-sidebar-smoke {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 60px;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
}

body.brand-nobamo .nobamo-sidebar-smoke span {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(
        to top,
        rgba(160, 155, 145, 0.45) 0%,
        rgba(170, 165, 155, 0.2) 50%,
        transparent 100%
    );
    opacity: 0;
    filter: blur(2px);
    animation: nobamo-sidebar-smoke var(--smoke-dur, 8s) var(--smoke-del, 0s) ease-out infinite;
}

body.brand-nobamo .nobamo-sidebar-smoke span:nth-child(1) {
    left: 42%;
    --smoke-dur: 7s;
    --smoke-del: 0s;
    width: 4px;
    height: 30px;
}

body.brand-nobamo .nobamo-sidebar-smoke span:nth-child(2) {
    left: 54%;
    --smoke-dur: 9s;
    --smoke-del: 2.5s;
    width: 3px;
    height: 24px;
}

body.brand-nobamo .nobamo-sidebar-smoke span:nth-child(3) {
    left: 47%;
    --smoke-dur: 8s;
    --smoke-del: 5s;
    width: 3px;
    height: 22px;
}

/* Dym animácia — stúpa, vlní sa, zväčšuje sa a mizne */
@keyframes nobamo-sidebar-smoke {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scaleX(1) rotate(0deg);
    }
    8% {
        opacity: 0.45;
    }
    25% {
        opacity: 0.35;
        transform: translateY(-25px) translateX(5px) scaleX(2.2) rotate(8deg);
    }
    50% {
        opacity: 0.2;
        transform: translateY(-50px) translateX(-4px) scaleX(3.5) rotate(-5deg);
    }
    75% {
        opacity: 0.08;
        transform: translateY(-75px) translateX(6px) scaleX(5) rotate(6deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) translateX(-2px) scaleX(6) rotate(-3deg);
    }
}

/* --- 15m. Aróma vlnky — vôňa sviečky (Fáza 139.9F) ---
   Tenké vlnité čiary nad plameňom, pomalé stúpanie, simulujú arómu.
   CSS wavy lines cez border-radius + sin wave shape. */
body.brand-nobamo .nobamo-sidebar-aroma {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 50px;
    pointer-events: none;
    z-index: 7;
    overflow: visible;
}

body.brand-nobamo .nobamo-sidebar-aroma span {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    /* Vlnitý tvar cez box-shadow "S-krivku" — väčšie bodky, viditeľnejšie */
    box-shadow:
        0 0 1px 1px color-mix(in srgb, var(--nobamo-gold) 35%, transparent),
        3px -4px 1px 1px color-mix(in srgb, var(--nobamo-gold) 25%, transparent),
        0 -8px 1px 1px color-mix(in srgb, var(--nobamo-gold) 35%, transparent),
        -3px -12px 1px 1px color-mix(in srgb, var(--nobamo-gold) 25%, transparent),
        0 -16px 1px 1px color-mix(in srgb, var(--nobamo-gold) 15%, transparent);
    filter: blur(0.8px);
    animation: nobamo-sidebar-aroma var(--aroma-dur, 10s) var(--aroma-del, 0s) ease-out infinite;
}

body.brand-nobamo .nobamo-sidebar-aroma span:nth-child(1) {
    left: 30%;
    --aroma-dur: 10s;
    --aroma-del: 0.5s;
}

body.brand-nobamo .nobamo-sidebar-aroma span:nth-child(2) {
    left: 55%;
    --aroma-dur: 12s;
    --aroma-del: 4s;
    box-shadow:
        0 0 1px 1px color-mix(in srgb, var(--nobamo-gold) 30%, transparent),
        -3px -4px 1px 1px color-mix(in srgb, var(--nobamo-gold) 20%, transparent),
        0 -8px 1px 1px color-mix(in srgb, var(--nobamo-gold) 30%, transparent),
        3px -12px 1px 1px color-mix(in srgb, var(--nobamo-gold) 20%, transparent),
        0 -16px 1px 1px color-mix(in srgb, var(--nobamo-gold) 12%, transparent);
}

/* Aróma animácia — stúpa, vlní sa, jemný fade */
@keyframes nobamo-sidebar-aroma {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(1);
    }
    10% {
        opacity: 0.85;
    }
    30% {
        opacity: 0.6;
        transform: translateY(-18px) scaleY(1.4);
    }
    60% {
        opacity: 0.3;
        transform: translateY(-38px) scaleY(1.8);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scaleY(2.2);
    }
}

/* --- 15n. Warm Ambient Light — žiara na obsah (Fáza 139.9E) ---
   Teplé svetlo vyžarujúce z tela sviečky doprava, akoby osvetľovalo obsah.
   Aplikované na celý candle wrapper. */
body.brand-nobamo .nobamo-sidebar-candle::after {
    content: '';
    position: absolute;
    top: 50px;
    right: -40px;
    width: 70px;
    height: 75%;
    background: radial-gradient(
        ellipse at 0% 25%,
        rgba(255, 200, 80, 0.14) 0%,
        rgba(255, 185, 60, 0.08) 30%,
        rgba(255, 170, 50, 0.04) 55%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(10px);
    animation: nobamo-sidebar-ambient 4s ease-in-out infinite;
}

/* Ambient light aj na ľavom boku — slabšie (odraz od steny) */
body.brand-nobamo .nobamo-sidebar-candle::before {
    content: '';
    position: absolute;
    top: 70px;
    left: -25px;
    width: 40px;
    height: 55%;
    background: radial-gradient(
        ellipse at 100% 25%,
        rgba(255, 200, 80, 0.08) 0%,
        rgba(255, 185, 60, 0.04) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(8px);
    animation: nobamo-sidebar-ambient 4s ease-in-out infinite;
    animation-delay: 1s;
}

/* Ambient light "dýchanie" — pulzuje so žiarou plameňa */
@keyframes nobamo-sidebar-ambient {
    0%, 100% {
        opacity: 0.7;
        transform: scaleX(1);
    }
    40% {
        opacity: 1;
        transform: scaleX(1.2);
    }
    70% {
        opacity: 0.75;
        transform: scaleX(0.9);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.brand-nobamo .nobamo-sidebar-flame,
    body.brand-nobamo .nobamo-sidebar-flame::before,
    body.brand-nobamo .nobamo-sidebar-flame::after {
        animation: none;
    }
    body.brand-nobamo .nobamo-sidebar-sparks span {
        animation: none;
    }
    body.brand-nobamo .nobamo-sidebar-smoke span {
        animation: none;
    }
    body.brand-nobamo .nobamo-sidebar-aroma span {
        animation: none;
    }
    body.brand-nobamo .nobamo-sidebar-candle::after,
    body.brand-nobamo .nobamo-sidebar-candle::before {
        animation: none;
        opacity: 0.5;
    }
    body.brand-nobamo .nobamo-wax-pool-melt {
        animation: none;
    }
    body.brand-nobamo .nobamo-sidebar-wax-drip-stem,
    body.brand-nobamo .nobamo-sidebar-wax-drip::after {
        animation: none;
    }
}

/* --- 15o. Hover/Scroll Interaktivita plameňa (Fáza 142.1) ---
   Plameň reaguje na hover (zväčší sa) a scroll (intenzívnejšie kmitanie). */
@media (prefers-reduced-motion: no-preference) {
    body.brand-nobamo .nobamo-sidebar-candle:hover .nobamo-sidebar-flame {
        transform: translateX(-50%) scale(1.15);
        filter: blur(0.3px) brightness(1.1);
        transition: transform 0.5s ease, filter 0.5s ease;
    }

    body.brand-nobamo .nobamo-sidebar-candle:hover .nobamo-sidebar-flame::after {
        opacity: 1;
        transform: translateX(-50%) scale(1.2);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Scroll intenzita — body.scrolling trieda pridaná cez JS */
    body.brand-nobamo.scrolling .nobamo-sidebar-flame {
        animation-duration: 1.2s !important;
    }
    body.brand-nobamo.scrolling .nobamo-sidebar-sparks span {
        animation-duration: 1.5s !important;
    }
}

/* --- 15p. Wax Drip animácia (Fáza 142.2) ---
   Kvapka vosku pomaly steká po pravom boku sviečky. */
body.brand-nobamo .nobamo-sidebar-wax-drip {
    position: absolute;
    top: 55px;
    right: -2px;
    width: 6px;
    /* Fáza 530.1: FIXNÁ výška = pôvodný max (70 % z .nobamo-sidebar-candle).
       Vonkajší kontajner sa NEanimuje (žiadny reflow per frame) — drží len
       pozíciu + ::after kvapku. Animuje sa transform:scaleY() vnútorného -stem. */
    height: 70%;
    z-index: 3;
    pointer-events: none;
}

/* Vizuálny pruh vosku — JEDINÝ animovaný prvok (transform:scaleY → compositor-only).
   Fáza 530.1: refaktor z height-animácie (layout-thrash každý frame, reziduál 476.1). */
body.brand-nobamo .nobamo-sidebar-wax-drip-stem {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        var(--nobamo-wax-medium) 0%,
        var(--nobamo-wax-light) 40%,
        var(--nobamo-wax-dark) 100%
    );
    border-radius: 0 3px 50% 0;
    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    animation: nobamo-wax-drip 18s 5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Kvapka na konci — ostáva na VONKAJŠOM (nescaleovanom) kontajneri → guľatá,
   bez deformácie. Ukotvená k statickému spodku (bottom:-4px = spodok 70%-výšky).
   Viditeľná až od ~60 % cyklu, keď -stem dosiahne scaleY(1) (plná výška). */
body.brand-nobamo .nobamo-sidebar-wax-drip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(
        circle,
        var(--nobamo-wax-light) 30%,
        var(--nobamo-wax-medium) 70%,
        var(--nobamo-wax-dark) 100%
    );
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    opacity: 0;
    animation: nobamo-wax-drip-drop 18s 5s ease-in-out infinite;
}

/* Fáza 530.1: height → transform:scaleY() (compositor-only).
   Báza = fixná height:70% na -stem. Pomery: 40 % (60/70=0.857), 60/75/100 % (70/70=1.0),
   10 % (4px ≈ tenký sliver, scaleY 0.02 — krátky bod, opacity 0.9 dominuje vnímaniu).
   Opacity priebeh IDENTICKÝ s pôvodnou height-animáciou. */
@keyframes nobamo-wax-drip {
    0%, 5% {
        transform: scaleY(0);
        opacity: 0;
    }
    10% {
        transform: scaleY(0.02);
        opacity: 0.9;
    }
    40% {
        transform: scaleY(0.857);
        opacity: 0.85;
    }
    60% {
        transform: scaleY(1);
        opacity: 0.8;
    }
    75%, 100% {
        transform: scaleY(1);
        opacity: 0;
    }
}

@keyframes nobamo-wax-drip-drop {
    0%, 55% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5);
    }
    60% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1);
    }
    75%, 100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8) translateY(8px);
    }
}

/* --- 15q. Cinzel font + gold efekt v sidebar headeri (Fáza 142.3) --- */
body.brand-nobamo .nobamo-sidebar-header h2 {
    font-family: 'Cinzel', 'Georgia', serif !important;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 2px rgba(200, 170, 100, 0.3);
}

/* SVG candle icon vedľa nadpisu */
body.brand-nobamo .nobamo-sidebar-header-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--nobamo-gold);
    opacity: 0.7;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(0 0 2px rgba(232, 184, 77, 0.4));
}

/* --- 15r. Performance — will-change + IntersectionObserver pause (Fáza 142.4) --- */
body.brand-nobamo .nobamo-sidebar-flame {
    will-change: transform, opacity;
}
body.brand-nobamo .nobamo-sidebar-flame::before,
body.brand-nobamo .nobamo-sidebar-flame::after {
    will-change: transform, opacity;
}
body.brand-nobamo .nobamo-sidebar-sparks span {
    will-change: transform, opacity;
}
body.brand-nobamo .nobamo-sidebar-smoke span {
    will-change: transform, opacity;
}

/* IntersectionObserver — pauzovať animácie keď sidebar nie je viditeľný */
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-flame,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-flame::before,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-flame::after,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-sparks span,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-smoke span,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-aroma span,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-wax-pool-melt,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-wax-drip-stem,
body.brand-nobamo .nobamo-sidebar-candle.paused .nobamo-sidebar-wax-drip::after,
body.brand-nobamo .nobamo-sidebar-candle.paused::before,
body.brand-nobamo .nobamo-sidebar-candle.paused::after {
    animation-play-state: paused !important;
}


/* ================================================================
   SEKCIA 16: NOBAMO Header & Footer — Gradient zlatá → zelená
   Fáza 141: Dynamické farby cez CSS variables
   Header: gradient zľava (zlatá primary) doprava (zelená accent)
   Footer: gradient zhora (zlatá primary) nadol (zelená accent)
   ================================================================ */

/* 16a. Header — gradient zlatá → zelená */
body.brand-nobamo header {
    background: linear-gradient(
        to right,
        var(--color-primary-950) 0%,
        var(--color-primary-900) 25%,
        var(--color-accent-800) 75%,
        var(--color-accent-900) 100%
    ) !important;
}

/* 16b. Header mobile/sticky — rovnaký gradient */
body.brand-nobamo header .bg-primary-900 {
    background: transparent !important;
}

/* 16a-fix. Blog article header NEMÁ dediť site-header gradient (Fáza 506.17 follow-up).
   16a selektor `body.brand-nobamo header` je príliš široký — targetuje aj
   <header class="blog-article-header"> v app/Views/blog/show.php. H1 inside je
   text-gray-900 (dark) → 0 kontrast na dark gradiente. */
body.brand-nobamo .blog-article-header {
    background: none !important;
    background-image: none !important;
}

/* 16a-fix-2. Product blog section header NEMÁ dediť site-header gradient
   (bug report 2026-05-15, follow-up 16a-fix v 506.17).
   Selector `body.brand-nobamo header` (16a) je príliš široký a targetuje aj
   bare <header> element v app/Views/partials/product-blog-articles.php:43 ktorý
   obsahuje H2 "Pred kúpou si prečítajte" (text-gray-900). Cream/svetlá sekcia
   bg-cream-50/white/stone-50 + dark gradient na headeri = stratený text + cudzí
   prvok vnútri svetlej karty.

   Fix: kill gradient na bare <header> inside .product-blog-section a doplniť
   subtle NOBAMO brand identity cez gold accent na eyebrow line + jemný gold
   underline pod H2 (zachová luxury feel bez čitateľnostnej penalty). */
body.brand-nobamo .product-blog-section header {
    background: none !important;
    background-image: none !important;
}

/* Subtle NOBAMO brand accent — gold tint pre eyebrow text + line */
body.brand-nobamo .product-blog-section .product-blog-eyebrow {
    color: var(--color-primary-700) !important;
}
body.brand-nobamo .product-blog-section .product-blog-eyebrow-line {
    background: linear-gradient(
        to right,
        var(--color-primary-600),
        var(--color-accent-700)
    ) !important;
}

/* NOBAMO title — italic serif zostáva, pridáva sa decoration pod textom */
body.brand-nobamo .product-blog-section .product-blog-title {
    background: linear-gradient(
        to right,
        var(--color-primary-900) 0%,
        var(--color-accent-900) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary-900);   /* fallback ak background-clip nepodporovaný */
}

/* Divider line zaladiť s brand gradientom */
body.brand-nobamo .product-blog-section .product-blog-divider {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--color-primary-600) 25%, transparent),
        color-mix(in srgb, var(--color-accent-700) 10%, transparent),
        transparent
    ) !important;
}

/* 16c. Footer — gradient zlatá → zelená (vertikálny) */
body.brand-nobamo footer {
    background: linear-gradient(
        to bottom,
        var(--color-primary-950) 0%,
        var(--color-primary-900) 40%,
        var(--color-accent-900) 100%
    ) !important;
}

/* 16d. Footer copyright bar — tmavší gradient */
body.brand-nobamo footer .border-t {
    border-color: color-mix(in srgb, var(--color-primary-700) 30%, transparent) !important;
}

/* ==============================================
 * 17. Newsletter CTA v pätičke — oprava kontrastu (WCAG 2.1 AA, 2026-07-20)
 * Zdieľaný footer.php dáva tlačidlu bg-secondary-500 + text-primary-900.
 * Na NOBAMO to je piesková #C0AC8C + hnedá #5A4215 = 4.28:1, po nabehnutí
 * myšou (secondary-600 #A99670) až 3.27:1 — oboje pod prahom SC 1.4.3 (4.5:1).
 * Stmavenie textu na primary-950 dá 6.45:1 / 4.93:1 pri zachovaní pieskového
 * vzhľadu tlačidla. primary-950 je existujúci token palety — žiadna nová farba.
 * Nález z auditu Fázy 655.12a (TONEXA mala ten istý problém horší: 3.69:1).
 * ============================================== */
body.brand-nobamo footer form button[type="submit"] {
    color: var(--color-primary-950);
}