/* =========================================
   ZMRAZU – UNIVERZÁLNÍ DLOUHÉ POPISKY
   Společný styl pro produktové popisky
   ========================================= */

/* -----------------------------------------
   ZÁKLADNÍ NASTAVENÍ
   ----------------------------------------- */

.zm-long{
    --zm-accent:#6f9d63;
    --zm-bg:#f7fbf6;
    --zm-bg-soft:#fbfdfb;
    --zm-text:#2f2f2f;
    --zm-muted:#666;
    --zm-border:#dfe9dc;

    color:var(--zm-text);
    line-height:1.65;
    font-size:16px;
}

.zm-long *{
    box-sizing:border-box;
}

.zm-long h2,
.zm-long h3,
.zm-long p{
    margin-top:0;
}

.zm-long-section{
    margin:28px 0;
}


/* -----------------------------------------
   ÚVODNÍ BLOK
   ----------------------------------------- */

.zm-long-hero{
    padding:34px 30px;
    background:linear-gradient(135deg,var(--zm-bg),#fff);
    border:1px solid var(--zm-border);
    border-radius:24px;
}

.zm-long-kicker{
    display:inline-block;
    margin-bottom:10px;
    color:var(--zm-accent);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.zm-long-hero h2{
    margin-bottom:14px;
    font-size:30px;
    line-height:1.2;
}

.zm-long-hero p{
    margin-bottom:0;
    font-size:17px;
}


/* -----------------------------------------
   BENEFIT KARTY
   ----------------------------------------- */

.zm-long-benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:20px;
}

.zm-long-benefit{
    padding:18px;
    background:#fff;
    border:1px solid var(--zm-border);
    border-radius:18px;
    text-align:center;
}

.zm-long-benefit-icon{
    display:block;
    margin-bottom:8px;
    font-size:24px;
}

.zm-long-benefit strong{
    display:block;
    margin-bottom:4px;
}

.zm-long-benefit span{
    color:var(--zm-muted);
    font-size:14px;
}


/* -----------------------------------------
   OBSAHOVÉ BLOKY
   ----------------------------------------- */

.zm-long-content{
    padding:28px 30px;
    background:var(--zm-bg-soft);
    border:1px solid var(--zm-border);
    border-radius:22px;
}

.zm-long-content h3{
    margin-bottom:12px;
    font-size:23px;
}


/* -----------------------------------------
   SEZNAMY / TIPY
   ----------------------------------------- */

.zm-long-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:18px 0 0;
    padding:0;
    list-style:none;
}

.zm-long-list li{
    position:relative;
    padding:14px 16px 14px 42px;
    background:#fff;
    border:1px solid var(--zm-border);
    border-radius:14px;
}

.zm-long-list li:before{
    content:"✓";
    position:absolute;
    left:16px;
    top:13px;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--zm-bg);
    color:var(--zm-accent);
    border-radius:50%;
    font-weight:700;
    font-size:13px;
}


/* -----------------------------------------
   ZÁVĚREČNÝ ZVÝRAZNĚNÝ BLOK
   ----------------------------------------- */

.zm-long-final{
    padding:30px;
    background:var(--zm-accent);
    color:#fff;
    border-radius:24px;
    text-align:center;
}

.zm-long-final h3{
    margin-bottom:10px;
    color:#fff;
    font-size:25px;
}

.zm-long-final p{
    margin-bottom:0;
    color:#fff;
}


/* -----------------------------------------
   VOLITELNÝ JEMNÝ CTA / POZNÁMKOVÝ BLOK
   ----------------------------------------- */

.zm-long-note{
    padding:20px 22px;
    background:#fff;
    border:1px dashed var(--zm-border);
    border-radius:18px;
}

.zm-long-note strong{
    color:var(--zm-accent);
}


/* -----------------------------------------
   TÉMATA PRODUKTŮ
   Stačí přidat druhou třídu k .zm-long
   ----------------------------------------- */

/* Výchozí zelené téma */
.zm-theme-default{
    --zm-accent:#6f9d63;
    --zm-bg:#f7fbf6;
    --zm-bg-soft:#fbfdfb;
    --zm-border:#dfe9dc;
}

/* Mrazivé pokušení – shodné s výchozími barvami krátkého popisku */
.zm-theme-pokuseni{
    --zm-accent:#e53935;
    --zm-bg:#fff1f1;
    --zm-bg-soft:#fff1f1;
    --zm-border:#ef6b6b;
}

/* Jahoda – shodné barvy s krátkým popiskem */
.zm-theme-strawberry{
    --zm-accent:#e85b5b;
    --zm-bg:#fff1f1;
    --zm-bg-soft:#fff1f1;
    --zm-border:#f4caca;
}

/* Malina – shodné barvy s krátkým popiskem */
.zm-theme-raspberry{
    --zm-accent:#d94362;
    --zm-bg:#fff0f3;
    --zm-bg-soft:#fff0f3;
    --zm-border:#f2c8d1;
}

/* Mango – shodné barvy s krátkým popiskem */
.zm-theme-mango{
    --zm-accent:#e2a900;
    --zm-bg:#fff8df;
    --zm-bg-soft:#fff8df;
    --zm-border:#f1df9e;
}

/* Banán – shodné barvy s krátkým popiskem */
.zm-theme-banana{
    --zm-accent:#d6ad22;
    --zm-bg:#fff9dc;
    --zm-bg-soft:#fff9dc;
    --zm-border:#eee0a0;
}

/* Kiwi – shodné barvy s krátkým popiskem */
.zm-theme-kiwi{
    --zm-accent:#78a83b;
    --zm-bg:#f2f8e8;
    --zm-bg-soft:#f2f8e8;
    --zm-border:#d5e5c0;
}

/* Jablko – shodné barvy s krátkým popiskem */
.zm-theme-apple{
    --zm-accent:#77a94b;
    --zm-bg:#f1f8eb;
    --zm-bg-soft:#f1f8eb;
    --zm-border:#d4e5c6;
}

/* Broskev – shodné barvy s krátkým popiskem */
.zm-theme-peach{
    --zm-accent:#e98b6d;
    --zm-bg:#fff1eb;
    --zm-bg-soft:#fff1eb;
    --zm-border:#f3cec1;
}

/* Meruňka – shodné barvy s krátkým popiskem */
.zm-theme-apricot{
    --zm-accent:#e99a3c;
    --zm-bg:#fff3e3;
    --zm-bg-soft:#fff3e3;
    --zm-border:#f2d7b3;
}

/* Višeň – shodné barvy s krátkým popiskem */
.zm-theme-cherry{
    --zm-accent:#a8323d;
    --zm-bg:#fbedef;
    --zm-bg-soft:#fbedef;
    --zm-border:#e4c1c6;
}

/* Švestka – shodné barvy s krátkým popiskem */
.zm-theme-plum{
    --zm-accent:#79558f;
    --zm-bg:#f5eff8;
    --zm-bg-soft:#f5eff8;
    --zm-border:#dacbe2;
}

/* Borůvka – shodné barvy s krátkým popiskem */
.zm-theme-blueberry{
    --zm-accent:#526da8;
    --zm-bg:#eef2fa;
    --zm-bg-soft:#eef2fa;
    --zm-border:#ccd5e9;
}

/* Dračí ovoce – shodné barvy s krátkým popiskem */
.zm-theme-dragonfruit{
    --zm-accent:#d84d91;
    --zm-bg:#fceef5;
    --zm-bg-soft:#fceef5;
    --zm-border:#edc9dc;
}


/* -----------------------------------------
   MOBILNÍ ZOBRAZENÍ
   ----------------------------------------- */

@media(max-width:768px){

    .zm-long{
        font-size:15px;
    }

    .zm-long-hero,
    .zm-long-content,
    .zm-long-final{
        padding:24px 20px;
        border-radius:18px;
    }

    .zm-long-hero h2{
        font-size:25px;
    }

    .zm-long-benefits{
        grid-template-columns:repeat(2,1fr);
    }

    .zm-long-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){

    .zm-long-benefits{
        grid-template-columns:1fr;
    }

    .zm-long-hero h2{
        font-size:23px;
    }
}


/* =========================================
   CHUŤOVÁ STUPNICE
   Kyselé → Vyvážené → Sladké

   Pozice ukazatele se nastavuje v HTML:
   style="--taste:50%"
   0 % = velmi kyselé
   50 % = vyvážené
   100 % = velmi sladké
   ========================================= */

.zm-taste{
    margin:28px 0;
    padding:22px 24px;
    background:#fff;
    border:1px solid var(--zm-border);
    border-radius:18px;
}

.zm-taste-title{
    display:block;
    margin-bottom:16px;
    font-size:17px;
    font-weight:700;
    text-align:center;
}

.zm-taste-labels{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
    color:var(--zm-muted);
    font-size:12px;
    font-weight:700;
}

.zm-taste-track{
    position:relative;
    height:10px;
    margin:0 8px;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #8fbd58 0%,
        #d9cf54 25%,
        #efc45b 50%,
        #ee9461 75%,
        #e85b5b 100%
    );
    box-shadow:inset 0 1px 2px rgba(0,0,0,.10);
}

.zm-taste-marker{
    position:absolute;
    left:clamp(0%,var(--taste,50%),100%);
    top:50%;
    width:20px;
    height:20px;
    background:#fff;
    border:4px solid var(--zm-accent);
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,.18);
    transform:translate(-50%,-50%);
}

.zm-taste-value{
    margin-top:12px;
    color:var(--zm-accent);
    font-size:13px;
    font-weight:800;
    text-align:center;
}

@media(max-width:768px){
    .zm-taste{
        padding:18px 16px;
        border-radius:16px;
    }

    .zm-taste-title{
        margin-bottom:14px;
        font-size:16px;
    }

    .zm-taste-labels{
        font-size:11px;
    }

    .zm-taste-marker{
        width:18px;
        height:18px;
    }
}