/* ==========================================================
   CLENO — DOPORUČENÉ PRODUKTY V KOŠÍKU
   FV Doplňkový prodej
   ========================================================== */


/* ==========================================================
   CELÝ BLOK
   ========================================================== */

body.in-kosik .fvDoplnek {
    margin-top: 28px !important;
    margin-bottom: 28px !important;

    padding: 22px !important;

    background:
        linear-gradient(
            135deg,
            #F5FAFD 0%,
            #FFFFFF 100%
        ) !important;

    border:
        1px solid #E1EBF0 !important;

    border-radius:
        20px !important;
}


/* případný nadpis */
body.in-kosik .fvDoplnek > h2,
body.in-kosik .fvDoplnek > h3,
body.in-kosik .fvDoplnek > h4 {
    margin:
        0 0 16px 0 !important;

    padding: 0 !important;

    color:
        #20222A !important;

    font-size:
        20px !important;

    line-height:
        1.25 !important;

    font-weight:
        750 !important;

    letter-spacing:
        -.02em !important;
}


/* ==========================================================
   PRODUKTOVÁ KARTA
   ========================================================== */

body.in-kosik .fvDoplnek-produkt {
    position: relative !important;

    margin:
        0 0 10px 0 !important;

    padding:
        15px 17px !important;

    background:
        #FFFFFF !important;

    border:
        1px solid #E3EAEE !important;

    border-radius:
        14px !important;

    overflow:
        hidden !important;

    box-shadow:
        0 2px 8px
        rgba(23, 43, 58, .035) !important;

    transition:
        border-color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}


body.in-kosik
.fvDoplnek-produkt:last-child {
    margin-bottom:
        0 !important;
}


/* hover desktop */
@media (hover: hover) {

    body.in-kosik
    .fvDoplnek-produkt:hover {
        border-color:
            #BDDDEB !important;

        box-shadow:
            0 6px 18px
            rgba(25, 75, 100, .08) !important;

        transform:
            translateY(-1px) !important;
    }

}


/* ==========================================================
   VYBRANÝ PRODUKT
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt:has(
    input[type="checkbox"]:checked
) {
    background:
        #F3FAFE !important;

    border-color:
        #0090C9 !important;

    box-shadow:
        0 0 0 2px
        rgba(0, 144, 201, .10) !important;
}


/*
 * modrý akcent vlevo
 */
body.in-kosik
.fvDoplnek-produkt:has(
    input[type="checkbox"]:checked
)::after {
    content: "";

    position:
        absolute !important;

    top:
        8px !important;

    bottom:
        8px !important;

    left:
        0 !important;

    width:
        3px !important;

    background:
        #0090C9 !important;

    border-radius:
        0 4px 4px 0 !important;
}


/* ==========================================================
   FORM
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt form {
    margin:
        0 !important;

    padding:
        0 !important;
}


body.in-kosik
.fvDoplnek-produkt form > p,
body.in-kosik
.fvDoplnek-produkt form > div {
    margin-top:
        0 !important;

    margin-bottom:
        7px !important;
}


body.in-kosik
.fvDoplnek-produkt form > p:last-child,
body.in-kosik
.fvDoplnek-produkt form > div:last-child {
    margin-bottom:
        0 !important;
}


/* ==========================================================
   NÁZEV PRODUKTU
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt a {
    color:
        #20222A !important;

    font-weight:
        700 !important;

    line-height:
        1.35 !important;

    text-decoration:
        none !important;

    transition:
        color .15s ease !important;
}


body.in-kosik
.fvDoplnek-produkt a:hover {
    color:
        #0090C9 !important;
}


/* ==========================================================
   OBRÁZEK
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt img {
    border-radius:
        10px !important;

    object-fit:
        contain !important;

    background:
        #FFFFFF !important;
}


/* ==========================================================
   CENA
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt .price,
body.in-kosik
.fvDoplnek-produkt .price-final,
body.in-kosik
.fvDoplnek-produkt .price-final-holder {
    color:
        #17191F !important;

    font-weight:
        750 !important;
}


/* ==========================================================
   CHECKBOX
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt
input[type="checkbox"] {
    width:
        21px !important;

    height:
        21px !important;

    margin:
        0 8px 0 0 !important;

    accent-color:
        #0090C9 !important;

    cursor:
        pointer !important;

    vertical-align:
        middle !important;
}


body.in-kosik
.fvDoplnek-produkt label {
    cursor:
        pointer !important;

    color:
        #3A4249 !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   BUTTON
   pokud ho doplněk u některého produktu používá
   ========================================================== */

body.in-kosik
.fvDoplnek-produkt .btn,
body.in-kosik
.fvDoplnek-produkt button {
    min-height:
        40px !important;

    padding:
        0 16px !important;

    background:
        #0090C9 !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    color:
        #FFFFFF !important;

    font-family:
        inherit !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    box-shadow:
        none !important;
}


body.in-kosik
.fvDoplnek-produkt .btn:hover,
body.in-kosik
.fvDoplnek-produkt button:hover {
    background:
        #007EB0 !important;
}


/* ==========================================================
   VARIANTY
   ========================================================== */

body.in-kosik
.fvDoplnek-variants {
    margin-top:
        10px !important;

    padding-top:
        10px !important;

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


body.in-kosik
.fvDoplnek-variants select {
    min-height:
        40px !important;

    padding:
        0 36px 0 12px !important;

    background-color:
        #FFFFFF !important;

    border:
        1px solid #DCE5EA !important;

    border-radius:
        10px !important;

    color:
        #252A31 !important;

    font-family:
        inherit !important;

    outline:
        none !important;
}


body.in-kosik
.fvDoplnek-variants select:focus {
    border-color:
        #0090C9 !important;

    box-shadow:
        0 0 0 3px
        rgba(0, 144, 201, .08) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    body.in-kosik .fvDoplnek {
        margin-top:
            20px !important;

        margin-bottom:
            20px !important;

        padding:
            12px !important;

        border-radius:
            16px !important;
    }


    body.in-kosik
    .fvDoplnek > h2,

    body.in-kosik
    .fvDoplnek > h3,

    body.in-kosik
    .fvDoplnek > h4 {
        margin-bottom:
            12px !important;

        font-size:
            18px !important;
    }


    body.in-kosik
    .fvDoplnek-produkt {
        margin-bottom:
            9px !important;

        padding:
            13px !important;

        border-radius:
            12px !important;

        box-shadow:
            none !important;
    }


    /*
     * Na mobilu žádný hover/floating efekt.
     */
    body.in-kosik
    .fvDoplnek-produkt:hover {
        transform:
            none !important;
    }


    body.in-kosik
    .fvDoplnek-produkt a {
        font-size:
            14px !important;
    }


    body.in-kosik
    .fvDoplnek-produkt
    input[type="checkbox"] {
        width:
            22px !important;

        height:
            22px !important;
    }

}cart