﻿/*DESKTOP*/
h2.titulo-dept {display: none}

div.content_checkout > div:nth-of-type(2) {height: 41px}
    div.content_checkout > div:nth-of-type(2) > ul {height: 30px}

div.tit_complementos_prod {
    position: relative;
    top: -18px;
    height: 33px;
}

ul.menu_complementePresente > div:nth-of-type(1) {
    height: 40px;
    top: 10px;
    margin-left: 244px;
}

div.box_basket {
    position: relative;
}

ul.tit_basket {
    height: 60px;
    position: relative;
    top: -2px;
}

div.basket {
    position: relative;
    top: -21px;
}

.parcelas_list {
    margin: 0px 0px -1px 0px !important;
}

#divHeader {
    height: 107px;
}

#box-destinatario-basket {
    margin-top: 0px;
}

#jProductDept .menu-complemente-mobile {
    height: 214px;
    top: -17px;
}

#jCarouselDepart .owl.wrapper {
    top: -30px;
    height: 189px;
}

#jCarouselContent {
    top: -23px;
    height: 189px;
}

.menu_complementePresente li.menuPresente_ativo a {
    background-color: rgb(219, 22, 31) !important;
    color: #ffffff;
}

.add-presente, .bt_add_presente {
    margin-top: 20px !important;
}

.jSelectDept {
    padding: 8px !important;
    letter-spacing: -1px !important;
}

.box_complementePresente #icone-recomendamos {
    display: flex;
    margin-top: -15px;
}

.titulo-dept {
    margin-bottom: 23px;
    margin-top: -8px;
}

@media only screen and (max-width: 1080px) {
    ul.menu_complementePresente > div:nth-of-type(1) {
        margin-left: 67px;
        top: 5px;
        height: 55px;
    }
}

@media only screen and (min-width:1080px ) {
    ul.menu_complementePresente > div:nth-of-type(1) {
        max-width: 1190px;
    }

    .menu_complementePresente .owl-wrapper .owl-item {
        width: 205px !important;
        margin-left: -11px;
    }
}

@media only screen and (max-width:1420px) {
    ul.menu_complementePresente > div:nth-of-type(1) {
        top: 5px;
        width: 1018px;
    }
}
/*FINAL DESKTOP*/

/*MOBILE*/
@media only screen and (max-width: 840px){
    .menu-complemente-mobile .arrow-left, .menu-complemente-mobile .arrow-right {top: -6px; display:none; background: #fff !important}
    div.tit_complementos_prod {position : relative;top : -11px;height: auto;}

    ul.menu_complementePresente>div:nth-of-type(1) {height: auto;top: 5px; margin-left:-19px; width: 100%; margin-inline: 0}
    #jCarouselContent {height: auto; top: -23px; padding: 0 13px}    
    .menu_complementePresente li.menuPresente_ativo a {background-color: #DB2016; color: #ffffff;}

    .add-presente {margin-top : 20px !important;}
    .jSelectDept {padding : 6px !important; letter-spacing : -1px !important; height:37px;}
    .bt_add_presente {margin-top : 20px !important;}
    .menu_complementePresente li a {width: 100%;}
}
/*FINAL MOBILE*/


/* RECOMENDADOS SWIPER - INICIO     */
.container-recommended {
    position: relative;
    width: 100%;
    min-height: 270px;
    padding: 0.5rem 3.5rem;
    margin: 0 auto 10px;
    background: #F0F0F0;
    font-family: 'Montserrat' !important;
    box-sizing: border-box;
    float: left;
    min-height: 0;
    height: 0;
    padding: 0;
    margin: 0;
}
    .container-recommended > button {
        top: 60%;
        width: 35px;
        height: 35px;
        border: none;
        border-radius: 50%;
        transition: all .3s ease-in-out;
    }
        .container-recommended > button:active {
            background: #E0E0E0;
            transform: scale(1.1)
        }
        .container-recommended > button::after {
            font-size: 30px;
            font-weight: bold;
            color: black;
        }

/* CAROUSEL MENU RECOMMENDED */
.container-recommended .stripe-recommended {display: flex}
.container-recommended .menu-title-recommended {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 240px;
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
    margin-left: -35px;
}
    .container-recommended .menu-title-recommended::before {
        content: '';
        display: block;
        width: 32px;
        min-width: 32px;
        height: 32px;
        background-image: url("https://static.giulianaflores.com.br/images/site/icone-menu-presentes-com-flores.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        border-radius: 5px;
    }

    .container-recommended .menu-recommended {
        width: 100%;
        padding: 10px 0;
        opacity: 0;
        transition: opacity .3s ease-in-out;
    }
        .container-recommended .menu-recommended.swiper-initialized {opacity: 1}
        .container-recommended .menu-recommended .menu-list-recommended {align-items: center; padding: 0; margin: 0}
            .container-recommended .menu-recommended .menu-list-recommended .menuPresente_ativo a {
                color: white;
                background: #DB2016;
                border-color: #DB2016;
                font-weight: bold;
            }

        .container-recommended .menu-recommended .menu-item-recommended {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 5px;
            font-family: 'Montserrat';
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            color: black;
            border: 1px solid #CACACA;
            box-sizing: border-box;
            transition: all .3s ease-in-out;
        }
        .container-recommended .menu-recommended .menu-item-recommended:hover {background: #CACACA}
        .container-recommended .menu-recommended .menu-item-recommended.active {
            background: #DB2016;
            color: white;
            font-weight: bold;
        }

/* CAROUSEL RECOMMENDED PRODUCTS */
.container-recommended .box-recommended {
    max-width: 100%;
    margin: 10px auto 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
    .container-recommended .box-recommended.swiper-initialized {opacity: 1}

.box-recommended .box-list-recommended {
    padding: 0;
    margin: 0;
}
    .box-recommended .box-list-recommended .box-item-recommended {
        display: flex;
        padding: 10px;
        background: white;
        border: 1px solid #D9D9D9;
        box-sizing: border-box;
    }

.box-item-recommended .recommended-img {width: 30%}
    .box-item-recommended .recommended-img img {
        width: 100%;
        height: auto
    }

.box-item-recommended .recommended-info {
    width: 70%;
    min-width: 70%;
    text-align: center;
}
    .box-item-recommended .recommended-info .recommended-title {
        height: 36px;
        font-size: 14px;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .box-item-recommended .recommended-info .recommended-price {
        font-size: 16px;
        font-weight: bold;
        margin-block: 10px;
    }
    .box-item-recommended .recommended-info .recommended-parcel {font-size: 12px}

/* CAROUSEL RECOMMENDED BUTTONS GROUP */
.recommended-info .recommended-add {
    display: flex;
    margin-top: 15px;
}
    .recommended-info .recommended-add > button {
        width: 100%;
        padding: 0;
        font-size: 16px;
        /*font-weight: bold;*/
        text-transform: uppercase;
        color: white;
        background: #DB2016;
        border: 1px solid #F0F0F0;
        border-radius: 0;
        transition: all .3s;

        color: #000000;
        background: #FFFFFF;
        border-color: #000000;
    }
        .recommended-info .recommended-add > button:hover {
            background: #90111E;

            color: #FFFFFF;
            background: #DB2016;
        }

.recommended-info .recommended-add-qty {
    display: flex;
    margin-right: 2px;
    border: 1px solid #D9D9D9;

    border-color: #000000;
}

.recommended-info .recommended-qty {
    width: 30px;
    font-size: 16px;
    text-align: center;
    border: none;
    border-radius: 0;
}

.recommended-info .recommended-groupbtn {
    border-left: 1px solid #D9D9D9;
    border-color: #000000;
}
    .recommended-info .recommended-groupbtn button {
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 25px;
        padding: 0;
        font-weight: 500;
        background: #E0E0E0;
        border: none;
        border-radius: 0;

        color: #000000;
        background: #FFFFFF;
        border-color: #000000;
    }
        .recommended-info .recommended-groupbtn button:first-of-type {
            background: #C4C4C4;
            border-bottom: 1px solid #D9D9D9;
            border-color: #000000;

            color: #000000;
            background: #FFFFFF;
            border-color: #000000;
        }
        .recommended-info .recommended-groupbtn button:hover {
            background: #808080;
            background: #E0E0E0;
        }

@media (max-width:980px) {
    .container-recommended {
        background: none;
        padding-inline: 1.5rem;
        margin-bottom: 0;
    }
        .container-recommended > button {
            top: 70%;
            width: 30px;
            height: 30px;
            background: #808080;
        }
            .container-recommended > button::after {font-size: 16px; color: #FFF}

    .container-recommended .stripe-recommended {flex-direction: column}
    .container-recommended .menu-title-recommended {max-width: none; font-size: 16px}
        .container-recommended .menu-title-recommended::before {
            width: 32px;
            min-width: 32px;
            height: 32px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Crect width='32' height='32' fill='%23DB161F'/%3E%3Cg clip-path='url(%23clip0_12273_495)'%3E%3Cpath d='M11.2471 23.7705H21.5072C21.7285 23.6792 21.9722 23.6163 22.1666 23.4895C22.6004 23.2062 22.7639 22.7902 22.7633 22.3037C22.7593 20.2502 22.7587 18.1966 22.7613 16.1428C22.7613 16.0921 22.7738 16.034 22.7514 15.9926C22.6904 15.8795 22.6382 15.7436 22.5367 15.6737C22.4352 15.6038 22.2828 15.5846 22.1521 15.5843C19.825 15.5795 17.4978 15.5783 15.1707 15.581H14.9897C15.0198 15.5462 15.0608 15.521 15.107 15.5086C16.0024 15.206 16.8979 14.9037 17.7935 14.6016C19.3489 14.0766 20.9047 13.5518 22.4608 13.027C22.8138 12.9078 22.9321 12.6801 22.8073 12.3581C22.6008 11.8266 22.3921 11.2958 22.181 10.7658C22.0612 10.4642 21.8714 10.2103 21.5735 10.0361C21.1368 9.77976 20.6764 9.75209 20.1943 9.91446C19.7122 10.0768 19.2226 10.2419 18.7494 10.4009C18.7386 10.1863 18.7465 9.97526 18.7143 9.76669C18.5895 8.96461 17.8276 8.30727 16.9495 8.23308C16.0603 8.15676 15.1713 8.65175 14.9014 9.42281C14.7717 9.79344 14.7336 10.192 14.6584 10.5782C14.6206 10.7722 14.5927 10.9677 14.5563 11.1863L13.4618 10.2957C13.0555 9.96432 12.5876 9.79953 12.0408 9.80773C10.7043 9.8275 9.74641 11.1504 10.2413 12.3009C10.3695 12.597 10.5709 12.8611 10.8294 13.072C10.7683 13.0936 10.725 13.1097 10.681 13.1246C10.2052 13.2857 9.73098 13.4505 9.25317 13.6065C8.45191 13.8686 8.04931 14.6254 8.30086 15.3168C8.51923 15.9188 8.75731 16.515 8.99966 17.1106C9.09489 17.3447 9.35629 17.4369 9.62359 17.3581C9.74116 17.3238 9.85642 17.2824 9.99532 17.2365V17.4189C9.99532 18.3649 9.99532 19.3108 9.99532 20.2566C9.99532 21.0052 9.99204 21.754 10.0055 22.5023C10.0124 22.8671 10.1963 23.1685 10.4823 23.419C10.7004 23.6072 10.9713 23.692 11.2471 23.7705ZM21.7722 16.5086V16.6652C21.7722 18.5503 21.7722 20.4354 21.7722 22.3205C21.7722 22.6887 21.5893 22.8589 21.1936 22.8589C20.1401 22.8589 19.0866 22.8589 18.0329 22.8589H17.8687V16.5086H21.7722ZM14.8892 22.8608H14.7641C13.6824 22.8608 12.601 22.8608 11.5197 22.8608C11.1992 22.8608 10.9841 22.6805 10.9838 22.4047C10.9814 20.6041 10.9799 18.8037 10.9795 17.0033C10.9795 16.9121 11.0219 16.8817 11.1013 16.8552C11.3893 16.7619 11.6734 16.6585 11.9633 16.5716C12.0965 16.5297 12.2356 16.5066 12.3761 16.5028C13.1462 16.4965 13.9162 16.4998 14.6863 16.4998H14.8892V22.8608ZM21.7335 12.3024L17.1239 13.8552C16.898 13.2793 16.6776 12.719 16.4563 12.155C16.5082 12.1361 16.5433 12.1227 16.5788 12.1109L18.9103 11.3243C19.4623 11.1382 20.014 10.9503 20.5674 10.7676C20.8511 10.6737 21.1085 10.7573 21.2107 10.9953C21.3926 11.4207 21.5551 11.8528 21.7335 12.3024ZM14.3507 14.7895L9.74378 16.3429C9.58517 15.9407 9.43116 15.5524 9.27945 15.1653C9.13167 14.788 9.23446 14.5861 9.64067 14.4484C10.7405 14.0769 11.8402 13.7055 12.9396 13.3344C13.1833 13.2523 13.4276 13.1726 13.6805 13.089C13.9054 13.6564 14.1231 14.2097 14.3507 14.7889V14.7895ZM16.8484 16.5104V22.8529H15.9069V16.5098L16.8484 16.5104ZM15.505 11.4973C15.6035 10.9181 15.6747 10.3629 15.8005 9.81868C15.9043 9.37112 16.43 9.08076 16.9019 9.15555C17.3791 9.23126 17.7097 9.5572 17.7629 10.0035C17.8096 10.3988 17.5531 10.791 17.1246 10.9488C16.7512 11.0866 16.3693 11.206 15.9916 11.3334L15.505 11.4973ZM14.0486 11.9926C13.4733 12.1833 12.9298 12.3757 12.3771 12.542C11.9213 12.6792 11.4356 12.4733 11.2143 12.0805C11.0087 11.7156 11.1023 11.2228 11.4241 10.9707C11.8264 10.656 12.3456 10.6271 12.7268 10.9221C13.1662 11.2611 13.5895 11.6189 14.0486 11.992V11.9926ZM15.2781 14.477C15.0511 13.8993 14.8324 13.3411 14.6101 12.7743L15.5257 12.4657L16.1952 14.1684L15.2781 14.477Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12273_495'%3E%3Crect width='14.6286' height='15.5429' fill='white' transform='translate(8.22852 8.22852)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
            border-radius: 50%
        }
}

@media (max-width: 520px) {
    .container-recommended .menu-title-recommended {margin-left: -15px}
}
/* RECOMENDADOS SWIPER - FIM        */

/* RECOMENDADOS MODAL - INICIO      */
.content_checkout {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-recommended .menu-title-recommended {cursor: pointer}

.modal-recommended {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 10000;
    z-index: 99;
    background: rgba(0,0,0,.55);
    box-sizing: border-box;
}
    .modal-recommended.is-active {opacity: 1; visibility: visible;}
    .modal-recommended .modal-container-recommended {
        position: relative;
        width: 90%;
        height: 100%;
        max-width: 1570px;
        max-height: 90vh;
        background: white;
        padding: 30px;
        padding-bottom: 50px;
        margin-inline: auto;
        animation: modalIn .35s ease;
        border-radius: 12px;
        box-shadow: 5px -5px 16px lightgray;
        box-sizing: border-box;
        z-index: 10055;
        z-index: 2;
    }

    .modal-recommended .menu-title-recommended {
        display: flex;
        justify-content: center;
        max-width: 1140px;
        width: 100%;
        margin: auto;
    }
        .modal-recommended .menu-title-recommended .btn-close {
            position: absolute;
            right: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            font-weight: bold;
            line-height: 1;
            margin-inline: auto 0;
            color: white;
            background: #DB2016;
            border: 1px solid #DB2016;
            border-radius: 5px;
            transition: all .3s ease-in-out;
        }
            .modal-recommended .menu-title-recommended .btn-close:hover {
                background: #90111E;
                transform: scale(1.05)
            }

    .modal-recommended .menu-container-recommended {
        position: relative;
        max-width: 1140px;
        padding-inline: 50px;
        margin: auto;
    }

    .modal-recommended .btn-menu-recommended {
        width: 40px;
        background: transparent;
        border: none;
        border-radius: 4px;
        transition: all .3s ease-in-out;
    }
        .modal-recommended .btn-menu-recommended::after {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            background: gray;
            border-radius: 50%;
        }

.grid-recommended {opacity: 1 !important}
    .grid-recommended .box-list-recommended {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
        gap: 10px 0;
        max-height: 65vh;
        padding-bottom: 10px;
        overflow-y: auto;
    }
        .grid-recommended .box-list-recommended .box-item-recommended {
            flex-direction: column;
            justify-content: space-between;
            max-width: 200px;
        }
            .grid-recommended .box-list-recommended .box-item-recommended .recommended-img,
            .grid-recommended .box-list-recommended .box-item-recommended .recommended-info {
                width: 100%;
            }

/* Estilo dos botões */
.grid-recommended .recommended-info .recommended-add-qty {display: none;}
    .grid-recommended .recommended-info .recommended-add > button {width: 70%; height: 35px; color: white; background: #118834; margin-inline:auto; border-color: white; border-radius: 5px;}
        .grid-recommended .recommended-info .recommended-add > button:hover {background: #0D6A28;}

    .grid-recommended .box-list-recommended .box-item-recommended {border-color: transparent;}

@keyframes modalIn {
    from {transform: translateY(-20px); opacity: 0;}
    to {transform: translateY(0); opacity: 1;}
}

@media (max-width: 820px) {
    .modal-recommended .modal-container-recommended {
        width: 100%;
        padding: 30px 10px;
        border-radius: 30px;
    }

    .modal-recommended .menu-title-recommended .btn-close {
        position: initial;
        color: gray;
        background: white;
        border-color: lightgray;
    }
}

@media only screen and (max-width: 360px) {
    .grid-recommended .box-list-recommended {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}
}
/* RECOMENDADOS MODAL - FIM        */

/* NOTIFICAÇÃO: PRODUTO ADICIONADO - INICIO */
.modal-containerPopUp {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1600px;
    z-index: 10000;
}
    .modal-containerPopUp .modal_PopUp {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 350px;
        height: 75px;
        margin-inline: auto;
        background-color: white;
        border-radius: 35px;
        box-shadow: 5px -5px 16px lightgray;
    }
        .modal-containerPopUp .modal_PopUp p {
            font-size: 20px;
            font-weight: bold;
            line-height: normal;
        }
/* NOTIFICAÇÃO: PRODUTO ADICIONADO - FIM */