/* ==========================================================
   SEÇÃO BRANCA
   ========================================================== */

.leo-choice-section {

    width:
        100vw;

    max-width:
        100vw;

    position:
        relative;

    left:
        50%;

    margin-left:
        -50vw;

    padding:
        30px 0 34px;

    background:
        #ffffff;

    box-sizing:
        border-box;

    overflow:
        hidden;
}


/* ==========================================================
   CONTEÚDO CENTRAL
   ========================================================== */

.leo-choice-inner {

    width:
        min(
            1280px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 32fr)
        minmax(0, 68fr);

    gap:
        22px;

    align-items:
        start;

    box-sizing:
        border-box;
}


/* ==========================================================
   BANNER
   ========================================================== */

.leo-choice-banner-column {

    min-width:
        0;

    width:
        100%;
}


.leo-choice-banner-link {

    display:
        block;

    width:
        100%;

    aspect-ratio:
        4 / 5;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        #123B82;

    text-decoration:
        none;
}


.leo-choice-banner-image {

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    border-radius:
        12px;
}


.leo-choice-banner-placeholder {

    aspect-ratio:
        4 / 5;

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    padding:
        25px;

    box-sizing:
        border-box;

    border:
        2px dashed #d6d6d6;

    border-radius:
        12px;

    color:
        #777777;

    text-align:
        center;
}


/* ==========================================================
   DIREITA
   ========================================================== */

.leo-choice-content {

    width:
        100%;

    min-width:
        0;
}


/* ==========================================================
   TÍTULO / SUBTÍTULO
   ========================================================== */

.leo-choice-header {

    width:
        100%;

    margin:
        0 0 14px;

    padding:
        0;
}


.leo-choice-title {

    margin:
        0 0 5px;

    padding:
        0;

    color:
        #111111;

    font-family:
        inherit;

    font-size:
        28px;

    font-weight:
        700;

    line-height:
        1.12;

    letter-spacing:
        -0.3px;

    text-align:
        left;
}


.leo-choice-subtitle {

    margin:
        0;

    padding:
        0;

    color:
        #6c6c6c;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.4;

    text-align:
        left;
}


/* ==========================================================
   CARROSSEL
   ========================================================== */

.leo-choice-carousel {

    --leo-choice-visible:
        3;

    --leo-choice-gap:
        14px;

    --leo-choice-image:
        185px;

    position:
        relative;

    width:
        100%;

    padding:
        0 0 39px;

    box-sizing:
        border-box;
}


/* ==========================================================
   VIEWPORT
   ========================================================== */

.leo-choice-viewport {

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:
        smooth;

    overscroll-behavior-x:
        contain;

    -webkit-overflow-scrolling:
        touch;

    scrollbar-width:
        none;
}


.leo-choice-viewport::-webkit-scrollbar {

    display:
        none;
}


/* ==========================================================
   WOOCOMMERCE
   ========================================================== */

.leo-choice-products,
.leo-choice-section
.woocommerce {

    width:
        100% !important;
}


.leo-choice-section
.woocommerce
ul.products {

    display:
        flex !important;

    flex-wrap:
        nowrap !important;

    align-items:
        stretch !important;

    gap:
        var(--leo-choice-gap)
        !important;

    grid-template-columns:
        none !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        2px !important;

    list-style:
        none !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.leo-choice-section
.woocommerce
ul.products
li.product {

    flex:
        0 0
        calc(
            (
                100%
                -
                (
                    var(--leo-choice-gap)
                    *
                    (
                        var(--leo-choice-visible)
                        -
                        1
                    )
                )
            )
            /
            var(--leo-choice-visible)
        )
        !important;

    width:
        auto !important;

    max-width:
        none !important;

    min-width:
        0 !important;

    float:
        none !important;

    clear:
        none !important;

    margin:
        0 !important;

    padding:
        10px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    box-sizing:
        border-box !important;

    scroll-snap-align:
        start;

    scroll-snap-stop:
        always;

    background:
        #ffffff !important;

    border:
        1px solid #dedede !important;

    border-radius:
        17px !important;

    box-shadow:
        none !important;

    overflow:
        hidden;
}


/* ==========================================================
   REMOVE CATEGORIAS DO TEMA
   ========================================================== */

.leo-choice-section
.ct-product-categories,

.leo-choice-section
li.product
a[rel="tag"] {

    display:
        none !important;
}


/* ==========================================================
   IMAGEM
   ========================================================== */

.leo-choice-section
li.product
img {

    display:
        block !important;

    width:
        100% !important;

    height:
        var(--leo-choice-image)
        !important;

    max-height:
        var(--leo-choice-image)
        !important;

    margin:
        0 0 9px !important;

    padding:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    background:
        #ffffff;
}


/* ==========================================================
   NOME DO PRODUTO
   ========================================================== */

.leo-choice-section
.woocommerce-loop-product__title {

    min-height:
        37px !important;

    margin:
        0 0 5px !important;

    padding:
        0 !important;

    color:
        #1a1a1a !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

    line-height:
        1.3 !important;

    display:
        -webkit-box !important;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden !important;
}


/* ==========================================================
   AVALIAÇÕES
   ========================================================== */

.leo-choice-rating {

    min-height:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    margin:
        0 0 4px;
}


.leo-choice-rating
.star-rating {

    float:
        none !important;

    margin:
        0 !important;

    font-size:
        11px !important;
}


.leo-choice-rating
.star-rating::before {

    color:
        #d8d8d8 !important;
}


.leo-choice-rating
.star-rating
span::before {

    color:
        #F5A000 !important;
}


.leo-choice-review-count {

    color:
        #777777;

    font-size:
        10px;

    font-weight:
        400;

    white-space:
        nowrap;
}


/* ==========================================================
   PREÇO
   ========================================================== */

.leo-choice-section
.price {

    display:
        block !important;

    margin:
        2px 0 9px !important;

    color:
        #111111 !important;

    font-size:
        18px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;
}


.leo-choice-section
.price del {

    color:
        #999999 !important;

    font-size:
        10px !important;

    font-weight:
        400 !important;

    opacity:
        .85;
}


.leo-choice-section
.price ins {

    text-decoration:
        none !important;
}


/* ==========================================================
   BOTÃO
   ========================================================== */

.leo-choice-section
li.product
.button {

    width:
        100% !important;

    min-height:
        42px;

    margin:
        auto 0 0 !important;

    padding:
        8px !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    box-sizing:
        border-box;

    border:
        0 !important;

    border-radius:
        9px !important;

    background:
        #1A7A53 !important;

    color:
        #ffffff !important;

    /* v0.5.11.35 — tipografia alinhada ao botão Adicionar das demais vitrines da Home. */
    font-family:
        inherit !important;

    font-size:
        14px !important;

    font-weight:
        600 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        normal !important;

    text-align:
        center !important;

    text-decoration:
        none !important;

    box-shadow:
        none !important;
}


.leo-choice-cart {

    width:
        18px;

    height:
        18px;

    flex:
        0 0 18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ==========================================================
   OFERTA
   ========================================================== */

.leo-choice-section
.onsale {

    top:
        10px !important;

    left:
        10px !important;

    right:
        auto !important;

    min-width:
        auto !important;

    min-height:
        auto !important;

    padding:
        5px 8px !important;

    border-radius:
        20px !important;

    background:
        #ef3d43 !important;

    color:
        #ffffff !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   SETAS
   ========================================================== */

.leo-choice-arrow {

    position:
        absolute;

    top:
        43%;

    z-index:
        20;

    width:
        34px;

    height:
        34px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        #e8ebed;

    color:
        #333333;

    font-size:
        27px;

    font-weight:
        300;

    line-height:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    cursor:
        pointer;
}


.leo-choice-prev {

    left:
        -40px;
}


.leo-choice-next {

    right:
        -40px;
}


.leo-choice-arrow:disabled {

    opacity:
        .25;

    cursor:
        default;
}


/* ==========================================================
   PAGINAÇÃO
   ========================================================== */

.leo-choice-pagination {

    position:
        absolute;

    left:
        50%;

    bottom:
        5px;

    transform:
        translateX(-50%);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;
}


.leo-choice-dot {

    width:
        8px;

    height:
        8px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        #c5cbd0;

    cursor:
        pointer;
}


.leo-choice-dot.is-active {

    width:
        36px;

    background:
        #FFB800;
}


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

@media
(min-width:690px)
and
(max-width:999px) {

    .leo-choice-inner {

        width:
            calc(100% - 32px);

        grid-template-columns:
            minmax(0, 36fr)
            minmax(0, 64fr);

        gap:
            18px;
    }


    .leo-choice-title {

        font-size:
            23px;
    }


    .leo-choice-carousel {

        --leo-choice-visible:
            2;

        --leo-choice-image:
            168px;
    }


    .leo-choice-prev {

        left:
            -30px;
    }


    .leo-choice-next {

        right:
            -30px;
    }
}


/* ==========================================================
   CELULAR
   ========================================================== */

@media
(max-width:689px) {

    .leo-choice-section {

        padding:
            26px 0 30px;
    }


    .leo-choice-inner {

        width:
            min(
                430px,
                calc(100% - 18px)
            );

        display:
            flex;

        flex-direction:
            column;

        gap:
            18px;
    }


    /* BANNER */

    .leo-choice-banner-link,
    .leo-choice-banner-placeholder {

        width:
            min(
                285px,
                78vw
            );

        margin:
            0 auto;

        aspect-ratio:
            4 / 5;
    }


    /* CABEÇALHO */

    .leo-choice-header {

        margin:
            0 0 12px;

        text-align:
            center;
    }


    .leo-choice-title {

        margin:
            0 0 5px;

        font-size:
            20px;

        line-height:
            1.15;

        text-align:
            center;
    }


    .leo-choice-subtitle {

        max-width:
            345px;

        margin:
            0 auto;

        font-size:
            13px;

        line-height:
            1.35;

        text-align:
            center;
    }


    /* 2 PRODUTOS */

    .leo-choice-carousel {

        --leo-choice-visible:
            2;

        --leo-choice-gap:
            9px;

        --leo-choice-image:
            clamp(
                125px,
                37vw,
                155px
            );

        padding-bottom:
            36px;
    }


    .leo-choice-section
    .woocommerce
    ul.products {

        gap:
            var(--leo-choice-gap)
            !important;

        padding:
            1px !important;
    }


    .leo-choice-section
    .woocommerce
    ul.products
    li.product {

        padding:
            9px !important;

        border-radius:
            15px !important;
    }


    .leo-choice-section
    .woocommerce-loop-product__title {

        min-height:
            34px !important;

        font-size:
            12.5px !important;
    }


    .leo-choice-section
    .price {

        font-size:
            16px !important;
    }


    .leo-choice-section
    li.product
    .button {

        min-height:
            40px;

        padding:
            7px 5px !important;

        font-size:
            12.5px !important;
    }


    /*
     * No mobile não ficam setas
     * em cima dos cards.
     */

    .leo-choice-arrow {

        display:
            none !important;
    }
}