/* ================================================
   NUTIVA CUSTOM CSS
   v7.6 — jún 2026 (zjednotené pre nutiva.sk + nutiva.cz)
   ================================================ */


/* ===== PROMO BANNER — INFORMAČNÝ PRUŽOK ===== */

@media (min-width: 992px) {
    html body .top-navigation-bar {
        background: #83bb1b !important;
    }
    html body .top-navigation-bar .site-msg.information {
        background: transparent !important;
    }
    html body .top-navigation-bar .site-msg.information .text {
        color: white !important;
        font-weight: 600 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        font-size: 13px !important;
    }
    html body .top-navigation-bar .site-msg.information .text a {
        background: white !important;
        color: #E25D68 !important;
        padding: 3px 12px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        margin-left: 10px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
        transition: all 0.2s ease !important;
    }
    html body .top-navigation-bar .site-msg.information .text a:hover {
        background: #ffffffff !important;
        transform: scale(1.03) !important;
    }
    html body .top-navigation-bar .top-navigation-bar-menu > li > a,
    html body .top-navigation-bar .close.js-close-information-msg {
        color: white !important;
        opacity: 0.9 !important;
        font-size: 14px !important;   /* bolo 12px (pod normou 13px) → 14px */
    }
    html body .top-navigation-bar .top-navigation-bar-menu > li > a:hover {
        opacity: 1 !important;
    }
    html body .top-navigation-bar .top-navigation-bar-menu-helper a {
        color: #222222 !important;
        opacity: 1 !important;
    }
    html body .top-navigation-bar .top-navigation-bar-menu-helper a:hover {
        color: #E25D68 !important;
        text-decoration: none !important;
    }
}

@media (max-width: 991px) {
    html body .site-msg.information {
        background-color: #83bb1b !important;
        background-image: none !important;
        opacity: 1 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15) !important;
    }
    html body .site-msg.information .container {
        position: relative !important;
        padding: 6px 15px 6px 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
    }
    html body .site-msg.information .text {
        color: white !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        text-align: left !important;
        margin: 0 !important;
        display: block !important;
        width: 100% !important;
    }
    html body .site-msg.information .text a {
        background: white !important;
        color: #E25D68 !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 700 !important;
        margin-left: 6px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    html body .site-msg.information .close.js-close-information-msg {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
        margin: 0 !important;
        display: block !important;
        font-size: 26px !important;
        color: white !important;
        opacity: 1 !important;
        cursor: pointer !important;
        padding: 8px 10px !important;
        height: 100% !important;
        line-height: normal !important;
    }
}

@media (max-width: 767px) {
    html body .site-msg.information .container {
        padding: 10px 15px 10px 44px !important;
    }
    html body .site-msg.information .text {
        line-height: 1.7 !important;
    }
}


/* ===== KATALÓG PRODUKTOV — NÁHĽADY ===== */

#products.products-block {
    align-items: stretch !important;
}
#products .product {
    display: flex !important;
    flex-direction: column !important;
}
.product .p {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
}
.product .p-in {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 10px !important;
}
.product .p-in-in {
    flex: 1;
    padding: 0 !important;
}
.product .p-bottom {
    margin-top: auto;
}
#products .product .p-bottom > div {
    display: block !important;
}
#products .product .p-tools {
    display: block !important;
}
#products .product .p a.name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    margin: 4px auto 6px !important;
}
#products .product span.quantity {
    display: none !important;
}

/* Veľkosť textu v katalógu — desktop */
#products .product .p a.name span {
    font-size: 18px !important;
}
#products .product .price-final strong {
    font-size: 20px !important;
}



/* ===== ZĽAVOVÁ BUBLINA ===== */

html body #content-wrapper .flags-extra .flag.flag-discount,
html body #content-wrapper .p-image-wrapper .flags-extra .flag.flag-discount,
html body .slick-list .flags-extra .flag.flag-discount,
html body .slick-track .flags-extra .flag.flag-discount {
    background: linear-gradient(135deg, #e63946 0%, #ff7332 100%) !important;
    background-color: #d32f2f !important;
    background-image: linear-gradient(135deg, #e63946 0%, #ff7332 100%) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
html body #content-wrapper .flags-extra .flag.flag-discount .price-standard,
html body #content-wrapper .p-image-wrapper .flags-extra .flag.flag-discount .price-standard,
html body .slick-list .flags-extra .flag.flag-discount .price-standard,
html body .slick-track .flags-extra .flag.flag-discount .price-standard {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}
html body #content-wrapper .flags-extra .flag.flag-discount .price-save,
html body #content-wrapper .p-image-wrapper .flags-extra .flag.flag-discount .price-save,
html body .slick-list .flags-extra .flag.flag-discount .price-save,
html body .slick-track .flags-extra .flag.flag-discount .price-save {
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
    text-align: center !important;
}

.custom-old-price {
    text-decoration: line-through;
    color: #541717;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
    text-align: center;
}


/* ===== PODKATEGÓRIE — KARTY ===== */

html body .subcategories.with-image li {
    width: 16.666% !important;
    max-width: 16.666% !important;
    flex: 0 0 16.666% !important;
}
html body .subcategories.with-image li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 10px !important;
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    min-height: 180px !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
html body .subcategories.with-image li a:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    border-color: #98ca3e !important;
    transform: translateY(-3px) !important;
}
html body .subcategories.with-image li a img,
html body .subcategories.with-image li a .image {
    width: 120px !important;
    height: 120px !important;
    max-width: 100% !important;
    max-height: 120px !important;
    object-fit: contain !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
}
html body .subcategories.with-image li a span,
html body .subcategories.with-image li a strong,
html body .subcategories.with-image li a .name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111111 !important;
    margin: 0 !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    white-space: normal !important;
}


/* ===== SKRYTÉ ELEMENTY ===== */

.latest-contribution-wrapper {
    display: none !important;
}


/* ===== PÄTIČKA ===== */

footer .site-name::after {
    content: "";
    display: block;
    margin-top: 25px;
    width: 100%;
    height: 55px;
    background-image: url("/user/documents/upload/Loga/Eu_founded_By_EU_plan_obnovy.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
.custom-footer__facebook .fb_iframe_widget,
.custom-footer__facebook .fb_iframe_widget span,
.custom-footer__facebook .fb_iframe_widget iframe {
    width: 100% !important;
    min-width: 250px !important;
    min-height: 214px !important;
    display: block !important;
}


/* ===== RESPONZÍVNOSŤ — MOBILE ===== */

@media (max-width: 767px) {

    /* Katalóg — veľkosť textu */
    #products .product .p a.name span {
        font-size: 15px !important;
    }
    #products .product .price-final strong {
        font-size: 18px !important;
    }

      
    /* Podkategórie */
    html body .subcategories.with-image {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    html body .subcategories.with-image li {
        width: 33.333% !important;
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
    }
    html body .subcategories.with-image li a {
        padding: 12px 8px !important;
        min-height: 130px !important;
        border-radius: 8px !important;
    }
    html body .subcategories.with-image li a img,
    html body .subcategories.with-image li a .image {
        width: 80px !important;
        height: 80px !important;
        max-height: 80px !important;
        margin-bottom: 10px !important;
    }
    html body .subcategories.with-image li a span,
    html body .subcategories.with-image li a strong,
    html body .subcategories.with-image li a .name {
        font-size: 13px !important;
        line-height: 1.2 !important;
        min-height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Zľavová bublina */
    html body #content-wrapper .flags-extra .flag.flag-discount,
    html body #content-wrapper .p-image-wrapper .flags-extra .flag.flag-discount,
    html body .slick-list .flags-extra .flag.flag-discount,
    html body .slick-track .flags-extra .flag.flag-discount {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    html body #content-wrapper .flags-extra .flag.flag-discount .price-save,
    html body #content-wrapper .p-image-wrapper .flags-extra .flag.flag-discount .price-save,
    html body .slick-list .flags-extra .flag.flag-discount .price-save,
    html body .slick-track .flags-extra .flag.flag-discount .price-save {
        font-size: 13px !important;
    }

}


/* ===== CTA TLAČIDLÁ V KARTÁCH PRODUKTOV (Košík + Detail) ===== */
/* Platí len pre karty v listingu a HP blokoch (.products / .products-block).
   Nezasahuje do detailu produktu ani košíka. */

:root {
    --cta: #73512d;        /* HNEDÁ — konverzná farba, len pre cestu do košíka */
    --cta-hover: #5c4124;  /* tmavšia hnedá pre hover */
}

/* Košík + Detail len v kartách produktov (listing + HP bloky) */
:is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    min-height: 40px;
    border-radius: 8px;
    background: var(--cta) !important;
    border: 2px solid var(--cta) !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    vertical-align: middle;
}

/* zdedí farbu/veľkosť aj vnútorný <span> */
:is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail) span {
    color: inherit !important;
    font: inherit !important;
}

/* vypni mliečny overlay šablóny */
:is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail)::before,
:is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail)::after {
    content: none !important;
}

/* hover – Nutiva zelená */
:is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail):hover {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
}

/* HP bloky vedia prefarbovať text – prebi to */
.products-block.products .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail),
.products-block.products .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail) span {
    color: #fff !important;
}

/* Mobil ≤600px: nech „dýcha" a drží riadok, nič iné nemeň */
@media (max-width: 600px) {
    :is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail) {
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }
}

/* OPRAVA TABLET/DESKTOP: prebiť fixnú výšku Shoptetu */
@media (min-width: 601px) {
    /* tlačidlo */
    :is(.products, .products-block) .product :is(.btn-cart, .add-to-cart-button, a.btn.btn-primary, .btn-detail) {
        height: auto !important;            /* zruš 34px */
        min-height: 44px !important;        /* komfortný tap target */
        line-height: 1.1 !important;        /* nie 33–34px */
        white-space: nowrap !important;     /* nerozdeľuj "Do košíku" na 2 riadky */
        width: 100% !important;             /* CTA na celú šírku karty */
        padding: 12px 18px !important;      /* nech „dýcha" */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;                          /* žiadne centrovanie — full width */
    }

    /* wrapper s tlačidlom (Shoptet ho niekedy oreže) */
    :is(.products, .products-block) .product :is(.p-tools, .p-bottom, .p-action) {
        height: auto !important;
        min-height: 64px;                   /* pri 18px fonte stačí 56–64px */
        overflow: visible !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;               /* obsah na celú šírku (nie centrovať) */
        justify-content: center;
        padding: 6px 0;
    }
}


/* ===== PRODUKTOVÉ KARTY — zarovnanie VĽAVO + CTA na celú šírku ===== */
/* Platí na kategóriu (#products), HP bloky aj "Související/Podobné produkty" na
   detaile (všetky majú triedu .products-block). OTESTOVANÉ naživo: karty ostávajú
   v natívnej výške (nenaťahujú sa), len sa zjednotí zarovnanie. Obrázok ostáva
   centrovaný, vľavo idú len texty (názov, cena), tlačidlo na celú šírku. */

/* EQUAL-HEIGHT (rovnaká výška kariet) — kategória (#products), HP bloky aj
   súvisiace/podobné carousely. KĽÚČ: .slick-slide { flex:0 0 auto } zamkne slick
   šírku slidu (227px), takže flex na tracku vyrovná len VÝŠKU, nie šírku.
   Bez tohto zámku flex rozťahoval slidy na ~678px. OTESTOVANÉ naživo. */
.products-block .slick-track {
    display: flex !important;
    align-items: stretch !important;
}
.products-block .slick-slide {
    height: auto !important;
    flex: 0 0 auto !important;              /* zachovaj slick šírku slidu */
}
:is(#products, .products-block) .product {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}
:is(#products, .products-block) .product .p,
:is(#products, .products-block) .product .p-in,
:is(#products, .products-block) .product .p-in-in {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}
:is(#products, .products-block) .product .p-bottom {
    margin-top: auto !important;            /* tlačidlo vždy dole = zarovnané naprieč kartami */
    width: 100% !important;
}

/* ĽAVÉ zarovnanie názvu a cien — LEN hlavný výpis kategórie (#products), kde sa
   skenuje veľa produktov. Carousely (homepage top bloky, súvisiace/podobné)
   necháme CENTROVANÉ — pre showcase bloky to vyzerá čisto a je to štýl šablóny. */
#products .product a.name,
#products .product .prices,
#products .product .price-final,
#products .product .price-standard,
#products .product .custom-old-price {   /* stará preškrtnutá cena z JS — tiež vľavo */
    text-align: left !important;
}
/* názov nech sa neoreže */
:is(#products, .products-block) .product a.name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: unset !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
}

/* CTA "Do košíku" na CELÚ ŠÍRKU karty.
   Wrapper okolo ceny/tlačidla (div[data-micro], .p-tools, form) sa zmrští na
   obsah — preto ich tiež naťahujeme na 100%, inak by ostal úzky button. */
:is(#products, .products-block) .product .p-bottom > div,
:is(#products, .products-block) .product .p-tools,
:is(#products, .products-block) .product form.pr-action {
    width: 100% !important;
    text-align: left !important;
}
:is(#products, .products-block) .product .add-to-cart-button {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* SKRYTÝ +/- stepper počtu v kartách (HP aj kategória).
   Skryje sa len vizuálne — input[name=amount] ostáva v DOM s value=1,
   takže "Do košíku" vloží vždy 1 ks. */
:is(#products, .products-block) .product span.quantity {
    display: none !important;
}


/* ===== VEĽKOSŤ PÍSMA — norma (Kvasnička) + zväčšenie UI ===== */
/* Norma: min 13px (pod to Google postih), obsah ideál 15–17px, search ≥16px
   (iPhone zoom). Zväčšujeme len needitovateľné UI prvky — popisky kategórií/
   produktov nechávame (formátuješ si ich sám). Mobil zámerne nezväčšujeme. */

/* 1) POVINNÉ — floor 13px na drobné štítky/labely (platí všade) */
.flag,
.flag-tip,
.flag-new,
.flag-action,
.podpis,
label.whole-width {
    font-size: 13px !important;
}

/* 2) POVINNÉ — vyhľadávacie pole 16px (iPhone auto-zoom), všade */
.search input,
#search input {
    font-size: 16px !important;
}

/* 3) DESKTOP — zväčšenie UI (mimo popiskov) */
@media (min-width: 768px) {
    /* POZN.: menu lišty NEZVÄČŠUJEME — má veľa dlhých položiek, väčší font ju
       pretlačí do "viac" rozbaľováka. Riešime samostatne (viď nižšie). */

    /* breadcrumb — väčší font (farbu necháme natívnu zo systému) */
    .breadcrumbs a,
    .breadcrumb a,
    .breadcrumbs,
    .breadcrumb {
        font-size: 15px !important;
    }
    /* bežné UI texty na čitateľných 15px (footer, tabuľky, labely, řazení) */
    #footer,
    #footer a,
    .cart-table,
    .listSorting,
    .listSorting__control {
        font-size: 15px !important;
    }
}


/* ===== MENU LIŠTY — tučné názvy + AKCE verzálkami ===== */
/* Tučné je širšie, preto súčasne uberáme horizontálny padding (10→7px),
   aby sa 12 položiek zmestilo do jedného riadku a nezlomilo do "viac". */
#header #navigation ul.menu-level-1 > li > a {
    font-weight: 800 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}
/* AKCE/AKCIE — verzálky, nech promo kategória vyskočí.
   CZ slug = /akce/, SK slug = /akcie/. Oba v jednom selektore → jeden spoločný
   súbor pre obe domény; nezhodný selektor sa na danej doméne proste preskočí. */
#header #navigation ul.menu-level-1 > li > a[href="/akce/"],
#header #navigation ul.menu-level-1 > li > a[href="/akcie/"] {
    text-transform: uppercase !important;
}


/* ===== ZACHOVAŤ PÔVODNÚ ZELENÚ #98ca3e na vybraných prvkoch ===== */
/* Systémová (Adamin) primárna farba je zmenená na #558300 a ide natívne na
   ceny/sumy a texty — preto sme ODSTRÁNILI všetky naše override farby textu
   (text necháme natívny). CSS používame LEN na to, aby tieto 3 prvky ostali
   v pôvodnej svetlej zelenej #98ca3e: hlavná lišta, tlačidlo Hledat, košík. */

/* hlavná zelená lišta (menu) — LEN desktop. Na mobile lištu NEprefarbujeme
   (mobilné menu je hamburger drawer, necháme systémovú farbu). */
@media (min-width: 768px) {
    /* SIVÁ lišta, VYŠŠIA (72px). Výšku nastaviť naraz na #navigation, celoširoký
       pruh #header::before (top:73 + bottom:auto) aj položky menu — inak sa pruh
       rozíde. Rozbaľovacie menu sa pri otvorení mierne prekrýva (šablóna ho má
       natvrdo pre nižšiu lištu) — akceptované, zákazník aj tak chce podkategórie. */
    #header::before,
    #navigation {
        background-color: #f2f2f2 !important;
        border-bottom: 1px solid #e3e3e3 !important;
    }
    html body #header nav#navigation,
    html body #header nav#navigation .navigation-in {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;
    }
    #header::before {
        top: 73px !important;
        height: 72px !important;
        bottom: auto !important;
    }
    html body #header nav#navigation ul.menu-level-1 > li,
    html body #header nav#navigation ul.menu-level-1 > li > a {
        height: 72px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* text menu — tmavý #2d2d2d, tučný (800), 17px, rozostupy 14px */
    #header #navigation ul.menu-level-1 > li > a {
        color: #2d2d2d !important;
        font-weight: 800 !important;
        font-size: 17px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* AKTÍVNA / prejdená / otvorená kategória — tmavozelené zvýraznenie + biely
       text, nech zákazník vidí, na ktorej kategórii sa nachádza. */
    #header #navigation ul.menu-level-1 > li > a:hover,
    #header #navigation ul.menu-level-1 > li.exp > a {
        background-color: #61971E !important;
        color: #ffffff !important;
    }
    #header #navigation ul.menu-level-1 > li > a:hover .submenu-arrow:after,
    #header #navigation ul.menu-level-1 > li.exp > a .submenu-arrow:after {
        color: #ffffff !important;
    }
    /* "Více" prepínač (overflow kategórií) — biela ikona ::after na sivej lište
       neviditeľná; filter: brightness(0) ju spraví čiernou. */
    #header .menu-helper::after {
        filter: brightness(0) !important;
    }
}

/* Tlačidlo Hledat NEprefarbujeme — necháme systémovú tmavú zelenú, nech je
   zladené s ostatnými doplnkovými tlačidlami (Otevřít filtr, taby Popis/
   Doporučujeme…). Žiadny override (desktop aj mobil). */

/* Košík NEprefarbujeme — necháme systémovú farbu (desktop aj mobil). */

/* Zákaznícka podpora (text + telefón) — DOČASNE SKRYTÁ. */
.top-navigation-contacts {
    display: none !important;
}

/* Doprava zdarma v košíku — väčší a výraznejší pruh v brand zelenej #98ca3e. */
.extra.delivery {
    font-size: 16px !important;
    line-height: 1.5 !important;
}
.extra.delivery .price-range {
    height: 16px !important;
    width: 100% !important;
    border-radius: 10px !important;
    background-color: #e6e6e6 !important;
    margin-top: 10px !important;
    overflow: hidden !important;
}
.extra.delivery .price-range > div {
    height: 16px !important;
    background-color: #98ca3e !important;
    border-radius: 10px !important;
    min-width: 16px !important;   /* aj malý % progress je viditeľný */
}

/* Po skrytí podpory preskupíme hlavičku (flex space-between by inak nechal veľké
   medzery): vyhľadávanie k logu vľavo, prihlásenie + košík spolu vpravo.
   Search je zmenšiteľný (min-width:0 + flex-shrink) — na užšom okne sa zúži
   namiesto pretlačenia/prekrytia loga. */
@media (min-width: 768px) {
    .header-top .search {
        margin-left: 36px !important;    /* medzera od loga */
        margin-right: auto !important;   /* odtlačí prihlásenie+košík doprava */
        max-width: 600px !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }
    .header-top .navigation-buttons {
        margin-left: 18px !important;    /* malá medzera medzi prihlásením a košíkom */
    }
    /* Šablóna posúva vyhľadávací formulár o -80px doľava; po našom presune k logu
       to lezie cez logo. Vynulujeme ten posun. */
    .header-top #formSearchForm,
    .header-top .search-form {
        left: 0 !important;
    }
}


/* ===== KONVERZNÁ CESTA DO KOŠÍKA — všetko hnedá z loga ===== */
/* Shoptet trieda .btn-conversion pokrýva hover košíka ("Pokračovat do košíku")
   aj kroky checkoutu (.next-step-forward "Pokračovat"). Dnes boli nekonzistentné
   (zelená vs koralová) — zjednocujeme ich na konverznú hnedú. */
.btn-conversion {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
}
.btn-conversion:hover {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
    color: #fff !important;
}
.btn-conversion span,
.btn-conversion i {
    color: #fff !important;
}

/* "Do košíku" / pridanie do košíka VŠADE (karty, HP, detail produktu) */
.btn-cart.add-to-cart-button,
.add-to-cart-button {
    background: var(--cta) !important;
    border-color: var(--cta) !important;
    color: #fff !important;
}
.btn-cart.add-to-cart-button:hover,
.add-to-cart-button:hover {
    background: var(--cta-hover) !important;
    border-color: var(--cta-hover) !important;
    color: #fff !important;
}
.btn-cart.add-to-cart-button span,
.add-to-cart-button span {
    color: #fff !important;
}