/* =========================================
       FIREMNÍ BARVY VIVIANE
       ========================================= */
    :root {
        --v-mint: #8ce2c4;
        --v-mint-dark: #5eb799;
        --v-mint-pale: #f0fbf8;
        --v-dark: #2d3436;
        --v-gray: #636e72;
    }

    #sp-main-menu {
        text-align: center;
    }

    .final-container { 
        max-width: 900px; 
        margin: 0 auto; 
        background: #fff; 
        padding: 50px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
        border-radius: 12px; 
        color: var(--v-gray); 
        line-height: 1.8;
    }

    /* Zjednodušená definice SVG pro náhledy */
    svg { display: inline-block; }

    /* =========================================
       1. BENEFITY
       ========================================= */
    .final-benefit-bar { display: flex; gap: 20px; margin-bottom: 30px; }
    .final-benefit-item { flex: 1; background: var(--v-mint-pale); padding: 20px; display: flex; align-items: center; gap: 15px; border-radius: 8px; }
    .final-benefit-item svg { width: 30px; height: 30px; fill: var(--v-mint-dark); flex-shrink: 0;}
    .final-benefit-item span { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--v-dark); letter-spacing: 0.5px;}

    /* =========================================
       2. IDEÁLNÍ PRO & HLAVNÍ TEXT
       ========================================= */
    .final-ideal-for { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--v-mint-pale); color: var(--v-dark); }
    .final-ideal-for strong { text-transform: uppercase; font-size: 12px; color: var(--v-mint-dark); letter-spacing: 1px;}
    .final-ideal-for svg { width: 20px; height: 20px; fill: var(--v-mint-dark); }
    
    .final-main-text { font-size: 16px; margin-bottom: 40px; }
    .final-main-text strong { color: var(--v-dark); }

    /* =========================================
       3. VÝSLEDKY & PROČ MILUJÍ
       ========================================= */
    .final-results { margin-bottom: 30px; }
    .final-results h4 { color: var(--v-dark); font-size: 14px; text-transform: uppercase; margin: 0 0 15px 0; border-bottom: 2px solid var(--v-mint); display: inline-block; padding-bottom: 5px; letter-spacing: 1px;}
    .final-results ul { list-style: none; padding: 0; margin: 0; }
    .final-results li { position: relative; padding-left: 25px; margin-bottom: 10px; color: var(--v-gray); }
    .final-results li::before { content: '✓'; position: absolute; left: 0; color: var(--v-mint-dark); font-weight: bold; }

    .final-love-box { background: #fffafb; border: 1px dashed #ffb3c6; padding: 25px 30px; border-radius: 12px; margin-bottom: 60px; display: flex; align-items: center; gap: 20px; }
    .final-love-box svg { width: 40px; height: 40px; fill: #ffb3c6; flex-shrink: 0; }
    .final-love-box p { margin: 0; font-style: italic; color: var(--v-dark); font-size: 15px; }

    /* =========================================
       4. KLÍČOVÉ LÁTKY
       ========================================= */
    .final-grid-title { font-weight: 700; text-transform: uppercase; margin-bottom: 20px; color: var(--v-dark); font-size: 18px; border-bottom: 2px solid var(--v-mint-pale); padding-bottom: 10px; letter-spacing: 1px;}
    .final-ing-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 60px; }
    .final-ing-row { display: flex; border-bottom: 1px solid var(--v-mint-pale); padding-bottom: 15px; margin-bottom: 10px; }
    .final-ing-header { width: 200px; font-weight: 700; color: var(--v-dark); text-transform: uppercase; font-size: 13px; padding-top: 3px; }
    .final-ing-body { flex: 1; font-size: 14px; }

    /* =========================================
       5. APLIKACE & RUTINA
       ========================================= */
    .final-usage { background: var(--v-mint-pale); padding: 30px 40px; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; border-radius: 8px; }
    .final-usage-icon svg { width: 35px; height: 35px; fill: var(--v-mint-dark); flex-shrink: 0; margin-top: 2px;}
    .final-usage h4 { color: var(--v-dark); margin: 0 0 10px 0; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
    
    .final-routine { display: flex; align-items: center; gap: 20px; padding: 20px 40px; background: #fff; border: 1px solid #eee; border-radius: 8px; margin-bottom: 60px; }
    .final-routine-title { font-weight: 700; text-transform: uppercase; color: var(--v-dark); font-size: 13px; flex-shrink: 0; letter-spacing: 1px;}
    .final-routine-steps { font-size: 14px; color: var(--v-dark); }
    .final-routine-steps strong { color: var(--v-mint-dark); }

    /* =========================================
       6. O ZNAČCE
       ========================================= */
    .final-brand { display: flex; align-items: center; gap: 40px; }
    .final-brand-info { flex: 2; }
    .final-brand-info h3 { margin-top: 0; border-bottom: 2px solid var(--v-mint); display: inline-block; padding-bottom: 5px; color: var(--v-dark); text-transform: uppercase; font-size: 18px; letter-spacing: 1px;}
    .final-brand-logo { flex: 1; padding: 20px; border: 1px solid #eee; border-radius: 8px; text-align: center; }

    /* =========================================
       7. ŠABLONA KATEGORIE VIVIANE
       ========================================= */
    .category-info-box {
        display: flex;
        align-items: center;
        background: #ffffff;
        border: 2px solid var(--v-mint); 
        border-radius: 12px;
        margin-bottom: 30px;
        overflow: hidden;
        font-family: 'Open Sans', sans-serif;
        min-height: 200px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }

    .category-image-container {
        flex: 1;
        background: #f9f9f9;
        border-right: 2px solid var(--v-mint);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        position: relative;
    }

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

    .category-text-container {
        flex: 1.5;
        padding: 25px 30px;
    }

    .category-description {
        font-size: 15px; 
        line-height: 1.8; 
        color: var(--v-gray);
        margin-bottom: 25px;
    }

    .category-description strong {
        color: var(--v-dark);
    }

    .category-stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .stat-item {
        text-align: center;
        padding: 15px 10px;
        background: var(--v-mint-pale);
        border-radius: 8px;
        border-bottom: 3px solid var(--v-mint);
    }

    .stat-item strong {
        display: block;
        font-size: 12px;
        text-transform: uppercase;
        color: var(--v-dark);
        margin-top: 8px;
        letter-spacing: 0.5px;
    }

    .stat-item span {
        font-size: 13px;
        color: var(--v-gray);
    }

    /* =========================================
       8. RESPONZIVNÍ STYLY PRO MOBILY (VYLEPŠENO)
       ========================================= */
    @media (max-width: 768px) {
        /* Výrazné zmenšení okrajů pro úsporu místa na mobilu */
        .final-container { padding: 20px 15px; }
        
        /* Benefity se naskládají pod sebe s menší mezerou */
        .final-benefit-bar { flex-direction: column; gap: 10px; }
        .final-benefit-item { padding: 15px; }

        /* U klíčových látek musí jít nadpis NAD popis, jinak se text mačká */
        .final-ing-row { flex-direction: column; }
        .final-ing-header { width: 100%; margin-bottom: 5px; padding-top: 0; }

        /* Aplikace a rutina: zmenšení paddingů, zarovnání doleva pro lepší čtení */
        .final-usage { flex-direction: column; align-items: flex-start; padding: 20px; gap: 15px; }
        .final-routine { flex-direction: column; align-items: flex-start; padding: 20px; gap: 10px; }

        /* Recenze: pěkně na střed s menším okrajem */
        .final-love-box { flex-direction: column; text-align: center; padding: 20px; gap: 15px; }

        /* O značce: logo půjde pod text */
        .final-brand { flex-direction: column; gap: 20px; }
        .final-brand-info { text-align: left; }

        /* Kategorie: Skládání pod sebe a upravení rámečků */
        .category-info-box { flex-direction: column; }
        .category-image-container { width: 100%; min-height: 200px; border-right: none; border-bottom: 2px solid var(--v-mint); }
        .category-text-container { padding: 20px 15px; }
        .category-stats-grid { grid-template-columns: 1fr; gap: 10px; }
    }