:root {
--border-radius-top-category: 20px;
--color-top-category-black: #543130;
--color-top-category-black-hover: #754a4b;
--color-top-category-gray: #b2b2b2;
--border-color-top-category: #e2e2e2;
--background-color-menu-style-1-top-category: #fbfbfb;
--background-color-arrow-top-category: #f1f1f1;
--background-color-arrow-top-category-hover: #e2e2e2;
--background-color-slider-style-1-top-category: #e2e2e2;
--background-color-slider-style-1-top-category-hover: var(--color-primary);
--color-slider-style-1-top-category: #000000;
--color-slider-style-1-top-category-hover: #ffffff;
}

/* ==========================================================
   AVITA – O NÁS DROPDOWN
   natívna štruktúra Shoptet STEP
   ========================================================== */

/* Rodič dropdownu */
#navigation .menu-level-1 > li.avita-about-menu {
    position: relative;
}

/* Hlavný odkaz O NÁS */
#navigation .menu-level-1 > li.avita-about-menu > a {
    box-sizing: border-box;
    white-space: nowrap;
}

/*
 * Dropdown používa natívnu triedu menu-level-2,
 * preto vzhľad preberá zo Shoptet STEP.
 */
#navigation .avita-about-menu > .menu-level-2 {
    box-sizing: border-box;
}

/* Podpoložky */
#navigation .avita-about-menu > .menu-level-2 > li {
    box-sizing: border-box;
}

/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {

    /*
     * Dropdown nesmie ovplyvňovať šírku hlavného menu.
     * Je absolútne pozicionovaný rovnako ako ostatné submenu.
     */
    #navigation .avita-about-menu > .menu-level-2 {
        position: absolute;
        top: 100%;
        left: 0;

        min-width: 230px;
        width: max-content;

        z-index: 1000;
    }

    #navigation .avita-about-menu > .menu-level-2 > li > a {
        white-space: nowrap;
    }

    /*
     * Trochu priestoru medzi textom O NÁS a natívnou šípkou.
     */
    #navigation .avita-about-menu > a {
        padding-right: 32px !important;
    }

    /*
     * Šípka zostáva súčasťou odkazu,
     * nie samostatným absolútnym buttonom.
     */
    #navigation .avita-about-menu > a > .submenu-arrow {
        display: inline-block;
        margin-left: 7px;
        vertical-align: middle;
    }
}


/* ==========================================================
   MOBIL / TABLET
   ========================================================== */

@media (max-width: 991px) {

    /*
     * Na mobile nechávame STEP-u jeho natívne
     * rozbaľovanie menu-level-2.
     */
    #navigation .avita-about-menu > .menu-level-2 {
        width: 100%;
        box-sizing: border-box;
    }

    #navigation .avita-about-menu > a {
        box-sizing: border-box;
    }

    /*
     * Žiadne vlastné right/left pozicionovanie šípky.
     * Tým pádom nemôže vliezť do zatváracieho X.
     */
    #navigation .avita-about-menu > a > .submenu-arrow {
        display: inline-block;
    }
}


/* ==========================================================
   STABILITA LAYOUTU
   ========================================================== */

/*
 * Zamedzí horizontálnemu poskakovaniu stránky,
 * keď sa objaví/zmizne vertikálny scrollbar.
 */
@media (min-width: 992px) {
    html {
        overflow-y: scroll;
    }
}

/* =========================================================
   AVITA – KOMPAKTNEJŠÍ DESKTOP HEADER
   iba desktop, tablet a mobil ostávajú bez zmeny
   ========================================================= */

@media (min-width: 1200px) {

    /* Celkový obsah headera */
    #header .container {
        max-width: 1420px !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Navigácia */
    #navigation {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Hlavné menu */
    #navigation .menu-level-1 {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    /* Jednotlivé položky menu */
    #navigation .menu-level-1 > li {
        margin: 0 !important;
        flex: 0 0 auto !important;
    }

    /* Text / klikacia plocha položiek */
    #navigation .menu-level-1 > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Trochu kompaktnejšie šípky pri dropdownoch */
    #navigation .menu-level-1 > li > a::after {
        margin-left: 5px !important;
    }

    /* Pravá časť headera – jazyk, lupa, účet, košík */
    #header .navigation-buttons {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Menšie bočné medzery pravých tlačidiel */
    #header .navigation-buttons > a,
    #header .navigation-buttons > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}

/* =========================================
   AVITA – TOP KATEGÓRIE HOMEPAGE
   ========================================= */

.avita-home-topcats {
    width: 100%;
    max-width: 1420px;
    margin: 0 auto 36px;
    padding: 60px 15px 0;
    box-sizing: border-box;
    text-align: center;
}


/* NADPIS */

.avita-home-topcats__title {
    margin: 0 0 20px !important;
    color: #663234;
    text-align: center;
    font-size: 25px !important;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
}


/* ZOZNAM */

.avita-home-topcats__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}


/* BUTTON */

.avita-home-topcats__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    min-height: 76px;
    padding: 9px 23px;

    border: 1px solid #eadfdd;
    border-radius: 12px;

    background: #faf8f7;

    box-sizing: border-box;

    color: #663234 !important;
    text-decoration: none !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}


/* PIKTOGRAM */

.avita-home-topcats__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 60px;

    width: 60px;
    height: 60px;
}

.avita-home-topcats__icon img {
    display: block;

    width: 60px;
    height: 60px;

    max-width: 60px;
    max-height: 60px;

    object-fit: contain;
}


/* TEXT */

.avita-home-topcats__text {
    color: #663234;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 600;
    text-transform: uppercase;
    white-space: normal;
}


/* HOVER */

.avita-home-topcats__item:hover {
    background: #fff1ee;
    border-color: #d5796c;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(102, 50, 52, 0.08);
}


/* SKRYTÉ KATEGÓRIE */

.avita-home-topcats__item.avita-cat-hidden {
    display: none !important;
}

.avita-home-topcats.expanded
.avita-home-topcats__item.avita-cat-hidden {
    display: inline-flex !important;
}


/* ZOBRAZIŤ VIAC */

.avita-topcats-more {
    display: none;

    margin: 19px auto 0;
    padding: 7px 14px;

    border: 0;
    border-bottom: 1px solid #d5796c;

    background: transparent;

    color: #663234;

    font-family: inherit;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;

    text-transform: uppercase;
    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.avita-topcats-more.is-visible {
    display: block;
}

.avita-topcats-more:hover {
    color: #d5796c;
    border-color: #663234;
}


/* DESKTOP */

@media (min-width: 992px) {

    .avita-home-topcats__item.avita-cat-hidden {
        display: none !important;
    }

    .avita-home-topcats.expanded
    .avita-home-topcats__item.avita-cat-hidden {
        display: inline-flex !important;
    }
}


/* TABLET */

@media (max-width: 991px) {

    .avita-home-topcats {
        margin-bottom: 30px;
        padding: 20px 12px 0;
    }

    .avita-home-topcats__title {
        margin-bottom: 17px !important;
        font-size: 23px !important;
    }

    .avita-home-topcats__list {
        gap: 9px;
    }

    .avita-home-topcats__item {
        min-height: 64px;
        padding: 8px 16px;
        gap: 10px;
    }

    .avita-home-topcats__icon {
        flex-basis: 50px;
        width: 50px;
        height: 50px;
    }

    .avita-home-topcats__icon img {
        width: 50px;
        height: 50px;
        max-width: 50px;
        max-height: 50px;
    }

    .avita-home-topcats__text {
        font-size: 16px;
    }

    .avita-home-topcats__item.avita-cat-hidden {
        display: none !important;
    }

    .avita-home-topcats.expanded
    .avita-home-topcats__item.avita-cat-hidden {
        display: inline-flex !important;
    }

    .avita-topcats-more {
        margin-top: 17px;
        font-size: 14px;
    }
}


/* MOBIL */

@media (max-width: 767px) {

    .avita-home-topcats {
        margin-bottom: 27px;
        padding: 20px 10px 0;
    }

    .avita-home-topcats__title {
        margin-bottom: 16px !important;
        font-size: 21px !important;
    }

    .avita-home-topcats__list {
        gap: 8px;
    }

    .avita-home-topcats__item {
        min-height: 58px;
        padding: 7px 12px;
        gap: 9px;
        border-radius: 10px;
    }

    .avita-home-topcats__icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .avita-home-topcats__icon img {
        width: 44px;
        height: 44px;
        max-width: 44px;
        max-height: 44px;
    }

    .avita-home-topcats__text {
        font-size: 15px;
        line-height: 1.15;
    }

    .avita-home-topcats__item.avita-cat-hidden {
        display: none !important;
    }

    .avita-home-topcats.expanded
    .avita-home-topcats__item.avita-cat-hidden {
        display: inline-flex !important;
    }

    .avita-topcats-more {
        margin-top: 16px;
        font-size: 14px;
    }
}


/* MALÉ MOBILY */

@media (max-width: 380px) {

    .avita-home-topcats__item {
        min-height: 54px;
        padding: 6px 10px;
        gap: 7px;
    }

    .avita-home-topcats__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .avita-home-topcats__icon img {
        width: 40px;
        height: 40px;
        max-width: 40px;
        max-height: 40px;
    }

    .avita-home-topcats__text {
        font-size: 14px;
    }
}



/* =========================================================
   AVITA – BLOG KATEGÓRIE
   Kompaktné obdĺžnikové tlačidlá + piktogramy
   ========================================================= */

/* KONTAJNER */
body.type-posts-listing ul.subcategories.with-image{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:stretch !important;
    gap:8px !important;
    margin:14px 0 32px !important;
    padding:0 !important;
    list-style:none !important;
}

/* POLOŽKA */
body.type-posts-listing ul.subcategories.with-image > li{
    display:block !important;
    float:none !important;
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}

/* ODSTRÁNENIE BODIEK */
body.type-posts-listing ul.subcategories.with-image > li::before,
body.type-posts-listing ul.subcategories.with-image > li::after{
    display:none !important;
    content:none !important;
}

/* TLAČIDLO */
body.type-posts-listing ul.subcategories.with-image > li > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:auto !important;
    min-height:48px !important;

    padding:6px 14px !important;

    border:1px solid #eadfdd !important;
    border-radius:10px !important;
    background:#faf8f7 !important;

    box-sizing:border-box !important;

    color:#663234 !important;
    text-decoration:none !important;
    text-align:left !important;

    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    text-transform:uppercase !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease !important;
}

/* OBLASŤ PIKTOGRAMU */
body.type-posts-listing ul.subcategories.with-image > li > a .image{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:static !important;

    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;

    margin:0 9px 0 0 !important;
    padding:0 !important;

    line-height:1 !important;
}

/* SAMOTNÝ PIKTOGRAM */
body.type-posts-listing ul.subcategories.with-image > li > a .image img{
    display:block !important;

    width:36px !important;
    height:36px !important;
    max-width:36px !important;
    max-height:36px !important;

    object-fit:contain !important;

    margin:0 !important;
    padding:0 !important;
}

/* TEXT */
body.type-posts-listing ul.subcategories.with-image > li > a .text{
    display:flex !important;
    align-items:center !important;

    position:static !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#663234 !important;

    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    text-align:left !important;
}

/* HOVER */
body.type-posts-listing ul.subcategories.with-image > li > a:hover{
    background:#fff1ee !important;
    border-color:#d5796c !important;
    color:#663234 !important;
    transform:translateY(-1px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991px){

    body.type-posts-listing ul.subcategories.with-image{
        gap:7px !important;
        margin:12px 0 20px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a{
        min-height:44px !important;
        padding:6px 11px !important;
        font-size:14px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .text{
        font-size:14px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .image{
        flex:0 0 32px !important;
        width:32px !important;
        height:32px !important;
        margin-right:8px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .image img{
        width:32px !important;
        height:32px !important;
        max-width:32px !important;
        max-height:32px !important;
    }
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:767px){

    body.type-posts-listing ul.subcategories.with-image{
        gap:6px !important;
        margin:10px 0 18px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a{
        min-height:42px !important;
        padding:6px 9px !important;
        border-radius:9px !important;
        font-size:14px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .text{
        font-size:14px !important;
        line-height:1.15 !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .image{
        flex:0 0 28px !important;
        width:28px !important;
        height:28px !important;
        margin-right:7px !important;
    }

    body.type-posts-listing ul.subcategories.with-image > li > a .image img{
        width:28px !important;
        height:28px !important;
        max-width:28px !important;
        max-height:28px !important;
    }
}

/* AVITA – PRODUKTOVÉ PODKATEGÓRIE */

body:not(.type-posts-listing) ul.subcategories{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    margin:14px 0 22px !important;
    padding:0 !important;
    list-style:none !important;
}

body:not(.type-posts-listing) ul.subcategories > li{
    float:none !important;
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 10px 10px 0 !important;
    padding:0 !important;
    list-style:none !important;
}

body:not(.type-posts-listing) ul.subcategories > li > a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-height:40px !important;
    padding:7px 16px !important;
    border:1px solid #eadfdd !important;
    border-radius:10px !important;
    background:#faf8f7 !important;
    box-sizing:border-box !important;
    color:#663234 !important;
    text-align:center !important;
    text-decoration:none !important;
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    transition:.2s ease;
}

body:not(.type-posts-listing) ul.subcategories > li > a:hover{
    background:#fff1ee !important;
    border-color:#d5796c !important;
    transform:translateY(-1px);
}

body:not(.type-posts-listing) ul.subcategories img,
body:not(.type-posts-listing) ul.subcategories .image,
body:not(.type-posts-listing) ul.subcategories .category-image,
body:not(.type-posts-listing) ul.subcategories > li::before,
body:not(.type-posts-listing) ul.subcategories > li::after{
    display:none !important;
    content:none !important;
}

@media(max-width:991px){

    body:not(.type-posts-listing) ul.subcategories{
        margin:12px 0 18px !important;
    }

    body:not(.type-posts-listing) ul.subcategories > li{
        margin:0 7px 7px 0 !important;
    }

    body:not(.type-posts-listing) ul.subcategories > li > a{
        min-height:38px !important;
        padding:6px 12px !important;
        font-size:13px !important;
    }
}

@media(max-width:767px){

    body:not(.type-posts-listing) ul.subcategories{
        margin:10px 0 16px !important;
    }

    body:not(.type-posts-listing) ul.subcategories > li{
        margin:0 6px 6px 0 !important;
    }

    body:not(.type-posts-listing) ul.subcategories > li > a{
        min-height:36px !important;
        padding:5px 10px !important;
        border-radius:9px !important;
        font-size:12px !important;
    }
}

/* Blog – presne 3 články vedľa seba */
@media screen and (min-width: 992px) {
    body.type-posts-listing .news-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        column-gap: 30px !important;
        row-gap: 30px !important;
        justify-content: flex-start !important;
    }

    body.type-posts-listing .news-wrapper > .news-item,
    body.type-posts-listing.one-column-body .news-wrapper > .news-item {
        display: flex !important;
        flex: 0 0 calc((100% - 60px) / 3) !important;
        width: calc((100% - 60px) / 3) !important;
        max-width: calc((100% - 60px) / 3) !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================
   AVITA – HODNOTENIE + DISKUSIA POD AKTÍVNYM POPISOM
   Panely označuje JavaScript podľa názvu záložky
   ========================================================== */

body.type-detail
.p-detail-tabs-wrapper:has(.tab-content > .tab-pane:first-child.active)
.tab-content
> .tab-pane.avita-show-under-description {

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    overflow: visible !important;

    margin-top: 50px !important;
    padding-top: 35px !important;

    border-top: 1px solid #e5e5e5 !important;
}

/* Veľkosť písma v popise produktu */
.type-detail .tab-content{
font-size:12pt!important;
line-height:1.6
}

/* Maximálna šírka produktovej stránky */
body.type-detail .p-detail-inner,
body.type-detail .p-detail{
width:100%;
max-width:1178px;
margin-left:auto;
margin-right:auto;
box-sizing:border-box
}

/* Obsahové stránky, blog a blogové články */
body.type-page .content-wrapper-in,
body.type-posts-listing .content-wrapper-in,
body.type-post .content-wrapper-in {
    width: 100%;
    max-width: 1178px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Ikony dopravy a darčeka */
.extra.delivery::before,
.extra.gift::before{
color:#513130!important;
margin-right:6px!important;
font-size:1em!important
}

/* Nadpis v košíku */
#cart-wrapper h4{
font-size:15px!important;
margin:0 0 8px!important;
font-weight:700!important
}

/* SKRYTIE INTERNÝCH KATEGÓRIÍ – ODKAZY */

a[href*="/skryte/"] {
    display: none !important;
}

/* Odstránenie nežiaducej linky pod produktovým obrázkom */
body.type-detail .p-image::after {
    display: none !important;
    content: none !important;
}

/* Natvrdo vynútené posunutie bannerov pod carousel */
#homepage-carousels .banner-wrapper,
div.banner-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
}

/* Osamostatnenie a roztiahnutie hlavného carouselu */
.banner-wrapper .carousel-inner {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* Roztiahnutie a odsunutie bočných bannerov na plnú šírku pod ním */
.banner-wrapper .next-to-carousel-banners,
div.next-to-carousel-banners {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 40px !important; /* Vytvorí jasný odstup pod kolotočom */
    clear: both !important;
}

/* Kontajner, ktorý drží všetky ikony zdravia */
.iconTextList {
    display: flex !important;
    flex-wrap: wrap !important; /* Na mobile povolí skok na nový riadok */
    justify-content: flex-start !important; /* Radenie prirodzene za sebou */
    gap: 12px 15px !important; /* Medzera: 12px medzi riadkami, 15px medzi ikonami */
    margin: 20px 0 !important;
    align-items: center !important;
    width: 100% !important;
    overflow: hidden !important; /* Zruší posuvník (scroll) */
}

.iconText {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important; /* Text ostane pri ikone v jednom kuse */
}

.iconText img {
    width: 26px !important;
    height: auto !important;
    margin-right: 6px !important;
}

/* Optimalizácia pre veľmi úzke mobily ikony zdravia*/
@media only screen and (max-width: 380px) {
    .iconText {
        font-size: 12px !important;
    }
    .iconText img {
        width: 22px !important;
    }
}

/* Bubliny pre Dopravu a Darček */
.extra.delivery, .extra.gift {
    background-color: #f5f1f0 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important; 
    margin-bottom: 5px !important;
    display: block !important;
    border: none !important;
}

/* --- OPRAVA NATLAČENEJ CENY NA MOBILE --- */
@media only screen and (max-width: 767px) {
    /* Posledná bublina pred cenou dostane na mobile spodný margin */
    .extra.gift:last-of-type, 
    .extra.delivery:last-of-type {
        margin-bottom: 30px !important;
    }
    
    .extra.delivery, .extra.gift {
        margin-right: 0 !important;
    }
}

/* --- NASTAVENIE PRE POČÍTAČ --- */
@media only screen and (min-width: 768px) {
    .extra.delivery, .extra.gift {
        margin-right: 40px !important;
    }
}

/* Text v bublinách */
.extra span {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #000 !important;
    display: block !important;
    margin-bottom: 3px !important;
    line-height: 1.2 !important;
}

/* Progress bar - štíhla lišta v hnedej farbe #513130 */
.price-range {
    height: 5px !important;
    background-color: #e6e6e6 !important;
    border-radius: 10px !important;
    margin: 2px 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.price-range > div {
    background-color: #513130 !important;
    height: 100% !important;
    border-radius: 10px !important;
}

/* Všetky produktové stránky (bez ohľadu na Pobo) */
body.type-detail .p-detail-inner,
body.type-detail .p-detail {
    width: 100%;
    max-width: 1178px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Ikony a Nadpis */
.extra.delivery::before, .extra.gift::before {
    color: #513130 !important;
    margin-right: 6px !important;
    font-size: 1em !important;
}

#cart-wrapper h4 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    font-weight: bold !important;
}

/* Informačný prúžok – zarovnanie úplne hore, bez plávania dole vľavo */
.site-msg.information, .site-msg--information {
    position: static !important;
    bottom: auto !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 20px;
    text-align: center;
    background: #f5e1c4;
    color: #000;
    box-shadow: none;
    border-radius: 0 !important;
    font-weight: 700 !important;
    font-size: 15px;
}

/* ak má Shoptet vnorený kontajner, nech sa nerozbíja šírka */
.site-msg.information > div,
.site-msg--information > div {
    width: 100% !important;
    text-align: center;
}

/*Drobeckova navigacia do mobilu*/
 @media (max-width: 991px) {
.breadcrumbs {
display: block;
padding: 5px !important;
}
}

.menu-item-869 {
		display: none !important;
}

div.p a[href="/c-d3-zinok-liposomal-plus-vip/"] {
		display: none !important;
}
div.search-whisperer ul li a[href="/c-d3-zinok-liposomal-plus-vip/"] {
		display: none !important;
}

a[href="/vip/"] {
		display: none !important;
}


span.flag.flag-discount {
    background-color: #663234 !important;
  }
span.flag.flag-new {
    background-color: #663234 !important;
}

.navigation-in > ul > li > a {
    text-transform: uppercase;
}

.categories .topic {
    text-transform: uppercase;
}

.navigation-in ul.menu-level-2 {
    z-index: 1001;
    position: absolute;
    left: 0;
    top: calc(100% - 32px / 2);
    width: 300px;
    margin-left: 0;
    border-style: solid;
    border-width: 1px;
}

@media only screen and (max-width: 420px) {
.navigation-in ul.menu-level-2 li a {
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #fff;
}

.navigation-in ul.menu-level-2 {
    z-index: 1001;
    left: 0;
    top: calc(100% - 0px / 2);
    width: 100%;
    margin-left: 0;
    border-style: solid;
    border-width: 0px;
    background: #663234;
    color: #fff;
}
}

.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
  width:5%;
    opacity: 0.5;
    filter: alpha(opacity=50);
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
  
  ol.top-products li::before {
    counter-increment: top;
    content: counter(top);
    flex: 0 0 30px;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    font-weight: 800;
}
  
  ol.top-products li a.top-products-image {
    flex: 0 0 80px;
    display: block;
}
  .columns-3 .columns-4 .products-block>div {
    width: 33.333333%;

}
  
.columns-3 .columns-4 .products-block>div :hover {
    width: 33.333333%;
-moz-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    -o-transform: scale(1.05) slow;
    -ms-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    transform: scale(1.05) slow;
}
.btn.btn-primary, a.btn.btn-primary {
    color: #663234;
    border-color: #663234;
    background-color: #fff;
    color: #fff;
    border-color: #45A509;
    background-color: #45A509;
    border-radius: 50px;
}
.external-fonts-loaded h1, .external-fonts-loaded h2, .external-fonts-loaded h3, .external-fonts-loaded h4, .external-fonts-loaded h5, .external-fonts-loaded h6, .external-fonts-loaded .h1, .external-fonts-loaded .h2, .external-fonts-loaded .h3, .external-fonts-loaded .h4, .external-fonts-loaded .h5, .external-fonts-loaded .h6, .external-fonts-loaded .cart-table .main-link, .external-fonts-loaded .cart-related-name, .blank-mode h1, .blank-mode h2, .blank-mode h3, .blank-mode h4, .blank-mode h5, .blank-mode h6, .blank-mode .h1, .blank-mode .h2, .blank-mode .h3, .blank-mode .h4, .blank-mode .h5, .blank-mode .h6, .blank-mode .cart-table .main-link, .blank-mode .cart-related-name {
    font-family: 'Titillium Web', sans-serif!important;
font-weight:700;
}
.news-item .text .title {
    line-height: 32px;
    font-size: 28px;
    text-decoration: none;
    font-weight: 800;
    display: block;
    margin-bottom: 10px;
}
.recommended-products .browse {
    position: absolute;
    top: 50%;
    display: block;
    width: 50px;
    height: 50px;
    margin-top: -23px;
    border-style: solid;
    border-width: 3px;
    border-radius: 50%;
    text-decoration: none;
}
.wide-carousel{
background-repeat:no-repeat;
background-size:contain;
background-position: center;
}
.dklab_instagram_widget_box>a>span>img {
    display: block;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%; 
    padding: 10px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
}
  #dklab_instagram_widget {
    margin-top: 50px;
}
  #dklab_instagram_widget_in {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: white;
    margin-bottom: 50px;
}
footer .footer-newsletter, #footer .footer-rows, #footer .footer-bottom {
    border-top: solid 2px #ccc;
}
#dklab_instagram_widget {
    margin-top: 40px;
    width: 72%;
    margin: auto;
}



html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 100px; /* posun kvôli fixnému menu – nastavte podľa výšky vášho headeru */
  }


/* Zvýraznenie odkazu Strážiť cenu */

.p-param-block .link-icons a.link-icon.watchdog {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    margin: 1px 1px !important;
    padding: 6px 14px !important;

    border: 2px solid #663234 !important;
    border-radius: 6px !important;

    background-color: #f7f0f1 !important;
    color: #663234 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;

    box-shadow: none !important;
}

.p-param-block .link-icons a.link-icon.watchdog span {
    color: #663234 !important;
    font-weight: 700 !important;
}

.p-param-block .link-icons a.link-icon.watchdog::before {
    color: #663234 !important;
    margin-right: 2px !important;
    font-size: 14px !important;
}

.p-param-block .link-icons a.link-icon.watchdog:hover {
    background-color: #663234 !important;
    border-color: #663234 !important;
    color: #ffffff !important;
}

.p-param-block .link-icons a.link-icon.watchdog:hover span,
.p-param-block .link-icons a.link-icon.watchdog:hover::before {
    color: #ffffff !important;
}


/* ==========================================================
   AVITA – UNIVERZÁLNE VIACÚROVŇOVÉ MENU
   Desktop = ďalšia úroveň doprava
   Mobil/tablet = ďalšia úroveň pod rodičom
   ========================================================== */


/* ==========================================================
   SPOLOČNÉ
   ========================================================== */

#navigation .avita-nested-parent{
    position:relative;
}

#navigation .avita-nested-menu{
    box-sizing:border-box;
}

#navigation .avita-nested-parent > a{
    position:relative;
}


/* Vlastná šípka pri položkách s ďalšou úrovňou */
#navigation .avita-submenu-toggle{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
    box-sizing:border-box;
}

#navigation .avita-submenu-toggle__icon{
    display:block;
    width:8px;
    height:8px;
    border-top:2px solid currentColor;
    border-right:2px solid currentColor;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media(min-width:992px){

    /*
     * Vnorené submenu je napravo od rodičovskej položky.
     */
    #navigation .avita-nested-parent > .avita-nested-menu{
        position:absolute !important;
        top:0 !important;
        left:100% !important;

        display:none !important;

        width:290px !important;
        min-width:290px !important;

        margin:0 !important;
        padding:0 !important;

        background:#663234 !important;

        border:0 !important;

        z-index:1300 !important;

        list-style:none !important;
    }


    /*
     * Zobrazenie pri hoveri.
     */
    #navigation
    .avita-nested-parent:hover
    > .avita-nested-menu{

        display:block !important;
    }


    /*
     * Odkaz rodičovskej položky.
     */
    #navigation
    .avita-nested-parent
    > a{

        display:flex !important;

        align-items:center;

        width:100%;

        padding-right:42px !important;

        box-sizing:border-box;

        white-space:nowrap;
    }


    /*
     * Šípka doprava.
     */
    #navigation
    .avita-submenu-toggle{

        position:absolute;

        top:0;
        right:0;

        display:flex;

        align-items:center;
        justify-content:center;

        width:42px;
        height:100%;

        z-index:3;

        pointer-events:none;
    }


    #navigation
    .avita-submenu-toggle__icon{

        transform:rotate(45deg);
    }


    /*
     * Jednotlivé položky ďalšej úrovne.
     */
    #navigation
    .avita-nested-menu
    > li{

        position:relative;

        display:block;

        width:100%;

        margin:0 !important;
        padding:0 !important;

        list-style:none !important;
    }


    #navigation
    .avita-nested-menu
    > li
    > a{

        display:block !important;

        width:100%;

        padding:12px 18px !important;

        background:#663234 !important;

        color:#fff !important;

        font-size:14px !important;

        line-height:1.3 !important;

        font-weight:600 !important;

        text-decoration:none !important;

        white-space:normal !important;

        box-sizing:border-box;
    }


    #navigation
    .avita-nested-menu
    > li
    > a:hover{

        background:#754a4b !important;

        color:#fff !important;
    }


    /*
     * Neviditeľný most medzi submenu,
     * aby sa menu nezavrelo pri presune kurzora doprava.
     */
    #navigation
    .avita-nested-parent::after{

        content:"";

        position:absolute;

        top:0;
        left:100%;

        width:10px;
        height:100%;
    }

}


/* ==========================================================
   MOBIL / TABLET
   ========================================================== */

@media(max-width:991px){

    /*
     * Rodičovská položka musí mať priestor pre šípku.
     */
    #navigation
    .avita-nested-parent
    > a{

        display:block !important;

        width:100%;

        padding-right:52px !important;

        box-sizing:border-box;
    }


    /*
     * Tlačidlo šípky vpravo.
     */
    #navigation
    .avita-submenu-toggle{

        position:absolute;

        top:0;
        right:0;

        display:flex;

        align-items:center;
        justify-content:center;

        width:48px;
        height:48px;

        color:#fff;

        z-index:5;
    }


    #navigation
    .avita-submenu-toggle__icon{

        transform:rotate(135deg);

        transition:transform .2s ease;
    }


    /*
     * Po otvorení šípka smeruje hore.
     */
    #navigation
    .avita-submenu-open
    > .avita-submenu-toggle
    .avita-submenu-toggle__icon{

        transform:rotate(-45deg);
    }


    /*
     * Vnorené submenu je na mobile normálne pod rodičom.
     */
    #navigation
    .avita-nested-parent
    > .avita-nested-menu{

        position:static !important;

        display:none !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        padding:0 !important;

        background:#754a4b !important;

        border:0 !important;

        list-style:none !important;

        box-sizing:border-box;
    }


    /*
     * Otvorená vetva.
     */
    #navigation
    .avita-nested-parent.avita-submenu-open
    > .avita-nested-menu{

        display:block !important;
    }


    /*
     * Odkazy vo vnorenom menu.
     */
    #navigation
    .avita-nested-menu
    > li{

        position:relative;

        display:block;

        width:100%;

        margin:0 !important;

        padding:0 !important;

        list-style:none !important;
    }


    #navigation
    .avita-nested-menu
    > li
    > a{

        display:block !important;

        width:100%;

        padding:11px 52px 11px 32px !important;

        background:#754a4b !important;

        color:#fff !important;

        font-size:14px !important;

        line-height:1.3 !important;

        font-weight:600 !important;

        text-decoration:none !important;

        box-sizing:border-box;
    }


    #navigation
    .avita-nested-menu
    > li
    > a:hover{

        background:#663234 !important;

        color:#fff !important;
    }

}


/* ==========================================================
   MALÝ MOBIL
   ========================================================== */

@media(max-width:420px){

    #navigation
    .avita-nested-menu
    > li
    > a{

        padding-top:12px !important;
        padding-bottom:12px !important;

        font-size:14px !important;
    }

}

/* ==========================================================
   AVITA – ODLÍŠENIE 2. VNORENEJ ÚROVNE NA MOBILE
   ========================================================== */

@media(max-width:991px){

    /* prvé vnorené submenu */
    #navigation
    .avita-nested-parent
    > .avita-nested-menu{
        background:#754a4b !important;
    }


    /* druhé vnorené submenu */
    #navigation
    .avita-nested-menu
    .avita-nested-menu{
        background:#86595b !important;
    }


    /* položky druhej vnorenej úrovne */
    #navigation
    .avita-nested-menu
    .avita-nested-menu
    > li
    > a{
        background:#86595b !important;

        padding-left:46px !important;
    }


    /* hover / aktívny stav */
    #navigation
    .avita-nested-menu
    .avita-nested-menu
    > li
    > a:hover{
        background:#754a4b !important;
    }


    /* tretia úroveň, ak by niekedy vznikla */
    #navigation
    .avita-nested-menu
    .avita-nested-menu
    .avita-nested-menu{
        background:#956a6c !important;
    }


    #navigation
    .avita-nested-menu
    .avita-nested-menu
    .avita-nested-menu
    > li
    > a{
        background:#956a6c !important;

        padding-left:60px !important;
    }

}

/* ==========================================================
   AVITA – ODSADENIE ÚROVNÍ MENU NA MOBILE
   ========================================================== */

@media(max-width:991px){

    /* ======================================================
       HLAVNÉ POLOŽKY
       PODĽA POTREBY / PODĽA ČASTI TELA / PRE KOHO /
       TYP PRODUKTU / BESTSELLERY
       ====================================================== */

    #navigation
    .menu-level-2
    > li
    > a{
        padding-left:18px !important;
    }


    /* ======================================================
       1. SUBMENU
       napr. VITAMÍNY, MINERÁLY, OMEGA 3 A OLEJE
       ====================================================== */

    #navigation
    .menu-level-2
    > li
    > .avita-nested-menu
    > li
    > a{
        padding-left:34px !important;
    }


    /* ======================================================
       2. SUBMENU
       napr. VITAMÍN C, VITAMÍN D3 A K2,
       VITAMÍNY SKUPINY B, MULTIVITAMÍNY
       ====================================================== */

    #navigation
    .menu-level-2
    > li
    > .avita-nested-menu
    > li
    > .avita-nested-menu
    > li
    > a{
        padding-left:50px !important;
    }


    /* ======================================================
       3. SUBMENU – rezerva do budúcnosti
       ====================================================== */

    #navigation
    .menu-level-2
    > li
    > .avita-nested-menu
    > li
    > .avita-nested-menu
    > li
    > .avita-nested-menu
    > li
    > a{
        padding-left:66px !important;
    }

}

/* ============================================================
   AVITA – CELÝ NÁKUPNÝ PROCES (Košík + Krok 2 + Krok 3)
   Vytiahnuté z hlavného customcz68.css, pripravené na prenos
   a adaptáciu pre avita.sk.

   POZOR – jedna závislosť mimo tohto výpisu:
   Na CZ webe existuje globálne pravidlo (font-family Titillium Web,
   font-weight 700), ktoré okrem nadpisov cieli aj na .cart-table
   .main-link a .cart-related-name. Ak SK web nemá rovnaké globálne
   pravidlo, možno bude treba font/váhu pre tieto dva prvky doplniť
   zvlášť, inak môžu vyzerať inak než na CZ.
   ============================================================ */

/* ================================================================
   ČASŤ 1 – KOŠÍK (/kosik/)
   ================================================================ */

/* ============================================================
   AVITA – KOŠÍK (/kosik/) – iba časti CSS týkajúce sa stránky
   nákupného košíka, vytiahnuté z hlavného customcz68.css.
   Pripravené na prenos/adaptáciu pre avita.sk.

   POZOR – jedna závislosť mimo tohto výpisu:
   Na CZ webe existuje globálne pravidlo (font-family Titillium Web,
   font-weight 700), ktoré okrem nadpisov cieli aj na .cart-table
   .main-link a .cart-related-name. Ak SK web nemá rovnaké globálne
   pravidlo, možno bude treba font/váhu pre tieto dva prvky doplniť
   zvlášť, inak môžu vyzerať inak než na CZ.
   ============================================================ */

/* ============================================================
   AVITA – NOVÝ BLOK: Košík (Krok 1) – zmeny scopované len na #cart-wrapper,
   nezasahujú do tlačidiel na homepage/kategóriách/produktoch
   ============================================================ */

#cart-wrapper .btn.btn-primary,
#cart-wrapper a.btn.btn-primary,
#cart-wrapper .btn.btn-cart,
#cart-wrapper a.btn.btn-cart,
#cart-wrapper .btn.btn-conversion,
#cart-wrapper a.btn.btn-conversion {
  border-color: #663234 !important;
  background-color: #663234 !important;
  color: #fff !important;
  border-radius: 50px !important;
}

#cart-wrapper .btn.btn-primary:hover,
#cart-wrapper a.btn.btn-primary:hover,
#cart-wrapper .btn.btn-cart:hover,
#cart-wrapper a.btn.btn-cart:hover,
#cart-wrapper .btn.btn-conversion:hover,
#cart-wrapper a.btn.btn-conversion:hover {
  border-color: #d5796c !important;
  background-color: #d5796c !important;
  color: #fff !important;
}

/* Progress bar "doprava zdarma" */
#cart-wrapper .price-range {
  background: #f0e5e4 !important;
}

#cart-wrapper .price-range > div {
  background: #d5796c !important;
}

/* Trust riadok v košíku v3 – jemné farebné pozadie so zaoblenými
   rohmi, jednotná fajka (✓) namiesto piktogramov, väčší text. */
#cart-wrapper .avita-cart-trust {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  background: #f7f0f1 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 8px !important;
  margin: 0 0 16px !important;
}

#cart-wrapper .avita-cart-trust > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 8px !important;
  border-right: none !important;
}

#cart-wrapper .avita-cart-trust > span:last-child {
  border-right: none !important;
}

#cart-wrapper .avita-cart-trust .act-icon {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #663234 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#cart-wrapper .avita-cart-trust .act-text {
  text-align: left !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #663234 !important;
}

@media (max-width: 767px) {
  #cart-wrapper .avita-cart-trust {
    padding: 10px 4px !important;
  }

  #cart-wrapper .avita-cart-trust > span {
    gap: 6px !important;
    padding: 0 4px !important;
  }

  #cart-wrapper .avita-cart-trust .act-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }

  #cart-wrapper .avita-cart-trust .act-text {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}





/* ============================================================
   AVITA – Krok 0: Breadcrumb (cart-header) v4
   OPRAVA MOBILU: flex položky (.step) nemali min-width:0, takže sa
   pri úzkom okne (napr. mini-popup ~300-320px) odmietali zmenšiť pod
   šírku textu -> texty sa prekrývali/zlepovali namiesto zalomenia.
   Teraz sú rovnomerne 1/3 široké (flex:1 1 0) a smú sa zmenšiť
   (min-width:0), text sa zalomí na 2 riadky ako pri Brain Markete.
   ============================================================ */

.cart-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  gap: 4px !important;
  padding: 20px 10px 12px !important;
  margin: 0 0 16px !important;
  background: transparent !important;
  border: none !important;
}

.cart-header::before {
  content: '' !important;
  position: absolute !important;
  top: 32px !important;
  left: 15% !important;
  right: 15% !important;
  height: 2px !important;
  background: #e5dcda !important;
  z-index: 0 !important;
}

.cart-header .step {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 33.333% !important;
  text-align: center !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

.cart-header .step,
.cart-header .step *,
.cart-header .step a,
.cart-header .step a *,
.cart-header .step strong,
.cart-header .step strong *,
.cart-header .step:hover,
.cart-header .step:hover *,
.cart-header .step a:hover,
.cart-header .step a:hover *,
.cart-header .step a:focus,
.cart-header .step strong:hover,
.cart-header .step strong:hover * {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cart-header .step a,
.cart-header .step strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  color: inherit !important;
  cursor: default !important;
  min-width: 0 !important;
  width: 100% !important;
}

.cart-header .step a {
  cursor: pointer !important;
}

.cart-header .step a::before,
.cart-header .step strong::before {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid #e5dcda !important;
  background: #fff !important;
  color: #9a9a9a !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.cart-header .step-1 a::before,
.cart-header .step-1 strong::before { content: "1" !important; }
.cart-header .step-2 a::before,
.cart-header .step-2 strong::before { content: "2" !important; }
.cart-header .step-3 a::before,
.cart-header .step-3 strong::before { content: "3" !important; }

.cart-header .step.active a::before,
.cart-header .step.active strong::before {
  background: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
}

.cart-header .step.completed a::before,
.cart-header .step.completed strong::before {
  content: "✓" !important;
  background: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
}

.cart-header .step span {
  display: inline-block !important;
  max-width: 100% !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #9a9a9a !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.cart-header .step.active span,
.cart-header .step.completed span {
  color: #663234 !important;
}

/* TABLET / MENŠÍ MOBIL */
@media (max-width: 767px) {
  .cart-header {
    gap: 2px !important;
    padding: 14px 4px 8px !important;
  }

  .cart-header::before {
    top: 24px !important;
    left: 14% !important;
    right: 14% !important;
  }

  .cart-header .step {
    padding: 0 2px !important;
  }

  .cart-header .step a::before,
  .cart-header .step strong::before {
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
  }

  .cart-header .step span {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}

/* VEĽMI ÚZKE OKNO (napr. mini-popup košíka ~300-340px) */
@media (max-width: 360px) {
  .cart-header {
    padding: 12px 2px 6px !important;
  }

  .cart-header::before {
    top: 20px !important;
  }

  .cart-header .step a::before,
  .cart-header .step strong::before {
    width: 26px !important;
    height: 26px !important;
    font-size: 12px !important;
  }

  .cart-header .step span {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
}


/* ============================================================
   AVITA – Košík: Produktový riadok v4
   Desktop AJ mobil vrátené na natívne rozloženie Shoptetu.
   Predošlé pokusy o custom mobilný layout (grid aj flex) spôsobovali
   viac problémov než riešili – vraciame sa na overený základ a
   meníme len to, čo je bezpečne overené (podfarbenie fotky).
   Steper množstva (−/1/+) má v skutočnosti štruktúru
   span.quantity > button.increase / button.decrease (potvrdené
   z DevTools), NIE input+button ako som predpokladala – preto
   predošlé zaoblenie netrafilo správne elementy. Riešime to
   v ďalšom kroku, až budeme mať kompletne rozbalený DOM.
   ============================================================ */

/* Jemné podfarbenie produktovej fotky – jediná zmena, ktorá je
   bezpečne overená a funguje na desktope aj mobile */
#cart-wrapper .cart-table .cart-p-image img {
  background: #f5f1f0 !important;
  mix-blend-mode: multiply !important;
  border-radius: 8px !important;
  border: 1px solid #e5dcda !important;
}

/* ============================================================
   AVITA – Košík: Zľavový kupón – kompaktný jednoriadkový vzhľad
   Štruktúra potvrdená z DevTools:
   div.discount-coupon > form.input-group.compact-form
     > input#discountCouponCode.form-control
     > button.btn.btn-lg...
   Cieľ: input + tlačidlo vedľa seba v jednom riadku (ako Brain
   Market), nie dva veľké bloky nad sebou.
   ============================================================ */

/* SK špecifikum: medzi "Bonusový program" boxom (mehub-bonus-cart-
   container, doplnok tretej strany) a kupónom je v DOM skrytý
   <h2 style="display:none">, takže priamy súrodenecký selektor (+)
   naň nesedel. Všeobecný súrodenecký selektor (~) funguje bez ohľadu
   na tento skrytý medzičlánok a nemení poradie prvkov, len pridáva
   odsadenie zhora. */
/* Medzera pridaná na predchádzajúci prvok (bonusový box), nie na
   samotné okno kupónu – tak zostáva štýl kupónu netknutý. */
#cart-wrapper .mehub-bonus-cart-container {
  padding-bottom: 20px !important;
}

/* Zarovnanie kupónu doprava na desktope – rovnaké správanie ako má
   mini košík (popup). .discount-coupon je bežný blokový prvok (nie
   flex/grid dieťa), preto klasický trik: obmedzená šírka + margin-
   left:auto, ktorý ho vytlačí k pravému okraju. */
#cart-wrapper .discount-coupon {
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
}

@media (max-width: 767px) {
  #cart-wrapper .discount-coupon {
    width: 100% !important;
    max-width: 100% !important;
  }

  #cart-wrapper .discount-coupon .input-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

#cart-wrapper .discount-coupon .input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}

#cart-wrapper .discount-coupon input.form-control {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  background: #fff !important;
}

#cart-wrapper .discount-coupon input.form-control:focus {
  border-color: #d5796c !important;
  outline: none !important;
}

/* Tlačidlo malo pôvodne dlhý text "Přidat slevový kupón" + šípku
   (cez triedu btn-arrow-right). Skrývame pôvodný text/ikonu cez
   font-size:0 a nahrádzame krátkym "PŘIDAT" cez ::after – bez JS. */
#cart-wrapper .discount-coupon button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #d5796c !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 0 !important;
  white-space: nowrap !important;
}

/* Pôvodná šípka je samostatný ::before pseudo-element (nie súčasť
   textu), preto ju font-size:0 na tlačidle neschoval – mažeme zvlášť */
#cart-wrapper .discount-coupon button::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

#cart-wrapper .discount-coupon button::after {
  content: "PŘIDAT" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'Titillium Web', sans-serif !important;
}

#cart-wrapper .discount-coupon button:hover {
  background: #AE6358 !important;
}

/* Na veľmi úzkom mobile zmenšiť tlačidlo aj vstupné pole */
@media (max-width: 400px) {
  #cart-wrapper .discount-coupon button {
    padding: 10px 14px !important;
  }

  #cart-wrapper .discount-coupon button::after {
    font-size: 11px !important;
  }

  #cart-wrapper .discount-coupon input.form-control {
    padding: 10px 10px !important;
    font-size: 13px !important;
  }
}



/* ============================================================
   AVITA – Košík: Súvisiace produkty (cart-related) – kompaktnejšie
   Selektory potvrdené z DevTools:
   tr.related > td[colspan] > div.cart-related-product
     > div.cart-related-info > a.cart-related-img / a.cart-related-name
     > div.cart-related-button
   Cieľ: menšia fotka, menšie odsadenie, riadok nezaberá celú výšku
   ako doteraz – na desktope aj mobile.
   ============================================================ */

#cart-wrapper .cart-related-product {
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 16px 4px !important;
  gap: 14px !important;
  border-bottom: 1px solid #f0e5e4 !important;
}

/* Vynulovanie natívnych okrajov na všetkých priamych potomkoch riadku
   (info blok, cena, tlačidlo) – tie spôsobovali veľké medzery */
#cart-wrapper .cart-related-product > * {
  margin: 0 !important;
}

#cart-wrapper .cart-related-product:last-child {
  border-bottom: none !important;
}

#cart-wrapper .cart-related-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#cart-wrapper .cart-related-img {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
}

#cart-wrapper .cart-related-img img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  background: #f5f1f0 !important;
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
}

#cart-wrapper .cart-related-name {
  font-size: 13px !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#cart-wrapper .cart-related-availability {
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* Cena – akákoľvek trieda so slovom "price" priamo v produktovom riadku
   (presný názov triedy sme z DevTools nepotvrdili, preto všeobecnejší
   selektor). Drží cenu na tej istej línii, nezalamuje na vlastný riadok. */
#cart-wrapper .cart-related-product [class*="price"] {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#cart-wrapper .cart-related-button {
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

#cart-wrapper .cart-related-button .btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-height: auto !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  /* Namiesto flex-wrap (nepredvídateľné pri dvoch rôzne veľkých
     položkách) – jednoznačné zvislé stohovanie: riadok 1 = fotka+názov,
     riadok 2 = cena+tlačidlo na opačných koncoch. */
  #cart-wrapper .cart-related-product {
    flex-direction: column !important;
    align-items: stretch !important;
    row-gap: 6px !important;
  }

  #cart-wrapper .cart-related-button {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  #cart-wrapper .cart-related-img,
  #cart-wrapper .cart-related-img img {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  #cart-wrapper .cart-related-name {
    font-size: 12px !important;
    max-width: 180px !important;
  }

  #cart-wrapper .cart-related-availability {
    display: none !important;
  }

  #cart-wrapper .cart-related-product [class*="price"] {
    font-size: 12px !important;
  }

  #cart-wrapper .cart-related-button .btn {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

/* ================================================================
   ČASŤ 2 – OBJEDNÁVKA: KROK 2 (Doprava & platba) A KROK 3 (Informace o vás)
   ================================================================ */

/* ============================================================
   AVITA – OBJEDNÁVKA (Krok 2: Doprava & platba, Krok 3: Informace o vás)
   Vytiahnuté z hlavného customcz68.css.
   Pripravené na prenos/adaptáciu pre avita.sk.
   ============================================================ */

/* ============================================================
   AVITA – Krok 2: Doprava & platba
   v5 – OPRAVA rozbitého gridu:
   - v4 omylom zrušila aj padding (nielen border) na .co-box sekciách,
     čo odstránilo natívne odsadenie medzi stĺpcami a rozbilo layout.
   - Teraz sa mení LEN border-width na 0 (rámik "vypnutý", nie odstránený
     štrukturálne), padding zostáva netknutý → grid/rozostupy sa vrátia.
   - Riadky ešte kompaktnejšie na výšku, ako bolo požadované.
   ============================================================ */

/* Vypnutie viditeľného rámika okolo sekcie – BEZ zásahu do paddingu/layoutu */
.co-delivery-method.co-box,
.co-payment-method.co-box {
  border-width: 0 !important;
}

/* Kompaktnejšie zaoblené karty pre jednotlivé možnosti */
.co-delivery-method .radio-wrapper,
.co-payment-method .radio-wrapper {
  border: 1px solid #e5dcda !important;
  border-radius: 10px !important;
  padding: 4px 8px !important;
  margin-bottom: 3px !important;
}

/* Vybraná možnosť – coral orámovanie + jemné podfarbenie */
.co-delivery-method .radio-wrapper.active,
.co-payment-method .radio-wrapper.active {
  border-color: #d5796c !important;
  background-color: #fff5f3 !important;
}

/* Hover pre nevybrané možnosti */
.co-delivery-method .radio-wrapper:not(.active):hover,
.co-payment-method .radio-wrapper:not(.active):hover {
  border-color: #AE6358 !important;
}

/* Text a cena vybranej možnosti – Umbra Brown */
.co-delivery-method .radio-wrapper.active label,
.co-payment-method .radio-wrapper.active label,
.co-delivery-method .radio-wrapper.active .payment-shipping-price,
.co-payment-method .radio-wrapper.active .payment-shipping-price {
  color: #663234 !important;
}

/* Farba radio kruhu pri výbere */
.co-delivery-method .radio-wrapper.active input[type="radio"],
.co-payment-method .radio-wrapper.active input[type="radio"] {
  accent-color: #d5796c !important;
}

/* Nadpisy sekcií */
.order-icon.order-delivery,
.co-payment-method h2 {
  color: #663234 !important;
  font-family: 'Titillium Web', sans-serif !important;
}

/* Tlačidlo POKRAČOVAT na kroku 2 – over po nasadení */
.next-step.next-step--1 a,
.next-step.next-step--1 button {
  background-color: #d5796c !important;
  border-color: #d5796c !important;
  color: #fff !important;
  border-radius: 50px !important;
}

.next-step.next-step--1 a:hover,
.next-step.next-step--1 button:hover {
  background-color: #AE6358 !important;
  border-color: #AE6358 !important;
}




/* ============================================================
   AVITA – Krok 2: "Základní údaje objednávky" box – kompaktnejší
   Selektory potvrdené z DevTools (box.co-basic-information,
   h2.order-icon.order-information, .row, .col-sm-12).
   Cieľ: priblížiť sa výškou Brain Marketu (107px vs naše 183px na
   mobile pri rovnakej šírke).
   ============================================================ */

#checkoutContent .co-basic-information {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  border-radius: 10px !important;
}

#checkoutContent .co-basic-information .order-icon.order-information {
  font-size: 16px !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#checkoutContent .co-basic-information .row {
  margin: 0 !important;
}

#checkoutContent .co-basic-information .col-sm-12,
#checkoutContent .co-basic-information [class*="col-"] {
  padding: 0 !important;
}

#checkoutContent .co-basic-information .form-group {
  margin-bottom: 0 !important;
}

#checkoutContent .co-basic-information label {
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#checkoutContent .co-basic-information select.form-control {
  height: auto !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}


/* ============================================================
   AVITA – Univerzálna oprava: VŠETKY nadpisy s triedou "order-icon"
   (order-information, order-delivery, order-payment) majú rovnaké
   natívne padding-bottom:19px, ktoré vytvára zbytočnú medzeru.
   Namiesto opravy každého zvlášť riešime celú triedu naraz.
   ============================================================ */

#checkoutContent .order-icon {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}


/* ============================================================
   AVITA – Krok 2: Rekapitulace objednávky – zaoblenie boxu
   a zvýraznenie názvu produktu (väčší, tučný text)
   Selektory potvrdené z DevTools (.order-summary.box.co-box,
   [data-testid="recapItemName"]).
   ============================================================ */

#checkoutContent .order-summary.co-box {
  border-radius: 10px !important;
}

#checkoutContent [data-testid="recapItemName"] {
  font-size: 15px !important;
  font-weight: 700 !important;
}


/* ============================================================
   AVITA – Krok 2: Select "Země doručení" – zaoblenie + brand farby
   Selektor potvrdený priamo z HTML, čo si poslal:
   select#deliveryCountryId.form-control
   ============================================================ */

#checkoutContent select#deliveryCountryId {
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  color: #663234 !important;
  background-color: #fff !important;
  padding: 10px 30px 10px 12px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23663234' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px 8px !important;
}

/* Na mobile nech select zaberie celú šírku svojho stĺpca – na desktope
   necháme natívnu/pôvodnú šírku, aby sa to neroztiahlo cez celý riadok. */
@media (max-width: 767px) {
  #checkoutContent select#deliveryCountryId {
    width: 100% !important;
    max-width: 100% !important;
  }
}

#checkoutContent select#deliveryCountryId:focus {
  border-color: #d5796c !important;
  outline: none !important;
}


/* ============================================================
   AVITA – Krok 3: "Osobní údaje" a "Fakturační adresa" – zaoblenie,
   kompaktnejšia výška, hover efekt. Len vizuál, funkčnosť netknutá.
   Selektory potvrdené z DevTools:
   fieldset.co-contact-information  (Osobní údaje – rám je priamo na fieldsete)
   div.co-billing-address           (Fakturační adresa – rám je na obalovom divu)
   Obe scopované pod #checkoutContent, nezasahujú do kontaktu/registrácie.
   ============================================================ */

#checkoutContent .co-contact-information,
#checkoutContent .co-billing-address {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* kompaktnejšia výška – menšie odsadenie nadpisu a polí */
#checkoutContent .co-contact-information h2,
#checkoutContent .co-billing-address h2 {
  margin-bottom: 10px !important;
}

#checkoutContent .co-contact-information .form-group,
#checkoutContent .co-billing-address .form-group {
  margin-bottom: 10px !important;
}

/* hover efekt na celej sekcii */
#checkoutContent .co-contact-information:hover,
#checkoutContent .co-billing-address:hover {
  border-color: #d5796c !important;
  box-shadow: 0 2px 12px rgba(213, 121, 108, 0.15) !important;
}

/* Vstupné polia v týchto dvoch sekciách – jemné zaoblenie a brand
   focus štýl namiesto natívneho hranatého modrého outline prehliadača */
#checkoutContent .co-contact-information input.form-control,
#checkoutContent .co-contact-information select.form-control,
#checkoutContent .co-billing-address input.form-control,
#checkoutContent .co-billing-address select.form-control {
  border: 1px solid #e5dcda !important;
  border-radius: 8px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

#checkoutContent .co-contact-information input.form-control:focus,
#checkoutContent .co-contact-information select.form-control:focus,
#checkoutContent .co-billing-address input.form-control:focus,
#checkoutContent .co-billing-address select.form-control:focus {
  border-color: #d5796c !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(213, 121, 108, 0.18) !important;
}

/* Tlačidlo "Přihlásit se do mého účtu" – tmavohnedé, zaoblené, biely bold text */
#checkoutContent .login-button {
  background-color: #663234 !important;
  border-color: #663234 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

#checkoutContent .login-button:hover {
  background-color: #4d2628 !important;
  border-color: #4d2628 !important;
  color: #fff !important;
}

/* ============================================================
   AVITA – Krok 3: box s checkboxami (poznámka pre predajcu,
   newsletter, registrácia) – rovnaké zaoblenie a hover ako
   Osobní údaje / Fakturační adresa vyššie.
   Selektor: div.co-box.co-box-additional pod #checkoutContent.
   ============================================================ */

#checkoutContent .co-box-additional {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

#checkoutContent .co-box-additional:hover {
  border-color: #d5796c !important;
  box-shadow: 0 2px 12px rgba(213, 121, 108, 0.15) !important;
}

/* ============================================================
   AVITA – Krok 3: Bonusový program (mehub-bonus-checkout-container)
   Nová sekcia doplnku tretej strany – rovnaké zaoblenie a hover ako
   ostatné boxy na tejto stránke (Osobní údaje, Fakturační adresa,
   co-box-additional).
   Selektor potvrdený z DevTools: fieldset.mehub-bonus-checkout-container
   ============================================================ */

#checkoutContent .mehub-bonus-checkout-container {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

#checkoutContent .mehub-bonus-checkout-container:hover {
  border-color: #d5796c !important;
  box-shadow: 0 2px 12px rgba(213, 121, 108, 0.15) !important;
}