/* Product */
@import url("./product/card-product.css");
.grid-image-post img {
    object-fit: contain;
}



/* Header */
.cms-index-index .page-header {
    position: fixed;
    width: 100%;
    z-index: 5;
}

.page-header {
    background: #000;
    
    .content {
        padding: 32px 0!important;
    }

    .header {
        justify-content: space-between;
        align-items: center;

        &:before {
            display: none
        }
        
        .nav-toggle {
            display: flex;
            align-items: center;
            gap: 8px;

            &:before {
                color: #FFF!important;
                height: 32px;
                width: 32px;
                display: flex;
                align-items: center;
            }

            &:after {
                content: 'Menu';
                color: #FFF;
                font-size: 16px;
                font-family: 'Red Hat Display';
            }
            
        }

        .block-search {
            order: 1;
            max-width: 340px;

            input,
            input::placeholder {
                border-radius: 2px;
                font-family: 'Red Hat Display';
                font-weight: 400;
                font-size: 16px;
                color: #000
            }
        }
        
        .logo {
            order: 2;
        }

        .login-block {
            order: 3;
            display: flex;

            .icon {
                display: none;
            }

            .text {
                display: flex !important;
                gap: 22px;
                align-items: center;
            }
            
            a,
            p {
                font-family: 'Red Hat Display';
                font-weight: 400;
                font-size: 16px;
                line-height: 18px;
                margin-bottom: 0;
                color: #FFF !important;
            }
        }
        
        .minicart-wrapper {
            order: 4;

            .showcart {
                &:before {
                    background-image: url('/pub/media/website/icon/cart.svg')!important;
                    width: 32px!important;
                    height: 32px!important;
                }
            }
        }
    } 
} 

.nav-sections {
    display: none;
}

.nav-open {
    .page-wrapper {
        overflow: hidden;
        position: relative;
    }

    #maincontent {
        position: relative;
        
        &:before {
            content: '';
            height: 100vh;
            width: 100vw;
            z-index: 2;
            background: #00000038;
            position: absolute;
        }
    }

    .page-header {
        
        .header {
            .nav-toggle {
                &:after {
                    content: 'Fechar menu';
                }

                &:before {
                    content: 'X';
                    font-family: 'Red Hat Display';
                    font-size: 32px;
                }
            }
        }    
    }
    
    .nav-sections {
        position: absolute !important;
        max-width: 400px !important;
        top: 90px;
        z-index: 100;
        height: 100%;
        display: block;
    } 

    .nav-sections-item-content {
        display: flex;
        flex-direction: column;
        
        .magicmenu {
            .nav-desktop {
                display: flex !important;
                position: unset;
                flex-direction: column;
            }    
        }
    }
}

/* Footer */

.page-footer {
    background: #000 !important;
    padding: 68px 0 42px;

    .footer-content-links {
        .pagebuilder-column-group {
            justify-content: space-between !important;

            > .pagebuilder-column {
                width: fit-content !important;
            } 
        }
    }
    
    .footer-content-item-title {
        color: #FFF;
        margin-bottom: 24px;
        font-family: 'Red Hat Display';
        font-weight: 600;
        font-size: 20px;
        letter-spacing: 1px;
        margin-top: 0;
    }

    .footer-content-item {
        width: fit-content !important;
    }

    .footer-content-item-link {
        margin-bottom: 18px;

        p {
            margin-bottom: 0;
            font-family: 'Red Hat Display';
            font-weight: 500;
            font-size: 18px;
            line-height: 18px;
        }
    }

    .footer-content-copy {
        border-top: 1px solid #F8B408;
        padding: 36px 42px 0;
        margin-top: 36px;
    }

    .newsletter {
        width: 100%;
        display: flex !important;
        float: unset !important;
        max-width: 340px !important;

        .content {
            width: 100%;
            display: flex;
            flex-direction: column;

            &:before {
                content: 'Receba novidades, ofertas e conteúdos exclusivos!';
                font-family: 'Red Hat Display';
                font-weight: 400;
                font-size: 17.3px;
                line-height: 20px;
                letter-spacing: 0%;
                margin-bottom: 24px;
                color: #FFF;
            }
        }

        .control {
            display: flex;
            width: 100%;

            &:before {
                display: none !important;
            }
        }

        .field {
            max-width: unset !important;
            margin-bottom: 16px;

            input,
            input::placeholder {
                width: 100% !important;
                max-width: unset !important;
                display: flex;
                margin: 0;
                background: #000;
                font-family: 'Red Hat Display';
                font-weight: 500;
                font-size: 16px;
                padding: 16px 8px 16px;
                height: unset;
                color: #e4e3e3;
            }

            input {
                border: 1px solid #F8B408; 
            }
        }

        .actions {
            display: flex;
            float: unset !important;
            width: 100%;
            text-align: center;
        }

        .action.subscribe {
            width: 100%;
            background: #F8B408;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 1px;
            font-family: 'Red Hat Display';
            color: #000;
            border: 1px solid #FFF; 
        }
    }
    
    .footer-content-social-links {
        display: flex;
        flex-direction: row !important;
        gap: 16px;
        justify-content: end !important;

        figure {
            width: fit-content;
            display: flex;
        }
    }
}

.cms-home {
    #maincontent {
        padding: 0;
    }
}

.banner-hero-home {
   margin-top: 100px;
}

.banner-hero-home,
.banner-hero-home *{
    height: calc(100vh - 110px)!important;
    max-height: 1110px;
    object-fit: contain;
    background: #000;
}

.grid-featured-headline-second-column {
    margin-bottom: 0!important;
}

.slide-categories-home {
    max-width: 1200px;
    margin: 32px auto;

    .categories-home-title {
        font-family: 'Red Hat Display';
        font-size: 74px;
        color: #000;
        padding-bottom: 32px;
    }

    .slide-category-item {
        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: auto;
            gap: 16px;
        }

        img {
            width: 85px !important;
            height: 85px !important;
            object-fit: cover;
            position: relative;
            display: flex;
            border-radius: 50px;
        }

        p {
            font-family: 'Red Hat Display';
            font-weight: 500;
            font-size: 18px;
        }
    } 
}

.grid-images-posts {
    margin: 74px auto;
    max-width: 1288px;
    gap: 21px;

    > .pagebuilder-column-group {
        gap: 21px;
        display: flex;
    }

    .grid-image-post {
        width: 100% !important;
        border-radius: 21px;
        position: relative;
    }

    .grid-image-post-left-top {
        max-width: 630px !important;
        padding-bottom: 16px;
        
        .grid-title-box {
            font-family: 'Red Hat Display';
            font-weight: 900;
            font-size: 45px;
            max-width: 550px;
            margin: auto;
            padding: 40px 0;
            color: #000;
        }

        .grid-image-box {
            max-width: 350px;
            display: flex;
            justify-content: center;
            margin-left: 80px;
            height: 400px;
        }

        .grid-button-box {
            position: absolute;
            bottom: 53px;
            right: 48px;
            background: #000;
            color: #F8B408;
        }
    }

    .grid-image-post-right-top {
        max-width: 630px !important;

        .grid-title-box {
            font-family: 'Red Hat Display';
            font-weight: 900;
            font-size: 56px;
            color: #FFF;
            text-align: start !important;
            padding: 36px 0 0 52px;
            max-width: 380px;
        }

        .grid-description-box {
            font-family: 'Red Hat Display';
            font-weight: 600;
            font-size: 20px;
            color: #FFF;
            max-width: 200px !important;
            padding-left: 52px;
            
        }

        .grid-button-box {
            position: absolute;
            background: #FFF;
            color: #F8B408;
            top: 62px;
            right: 72px;
        }

        .grid-image-box {
            display: flex;
            justify-content: end;
            padding-right: 72px;
            margin-bottom: 32px;
            position: absolute;
            bottom: 0;
            right: 0;
        } 
        
    }

    .grid-image-post-left-bottom {
        max-width: 525px !important;
        padding-bottom: 42px;
        
        .grid-title-box {
            font-family: 'Red Hat Display';
            font-weight: 900;
            font-size: 45px;
            max-width: 460px;
            margin: auto;
            padding: 40px 0 63px;
            color: #FFF;
            text-align: start!important;
            padding-left: 32px;
            border: none!important;
        }

        .grid-button-box {
            border: none!important;
        }
  
        .grid-image-box {
            justify-content: end;
            display: flex;
            padding-right: 40px;
        }

        .grid-button-box {
            position: absolute;
            bottom: 80px;
            left: 70px;
            background: #FFF;
            color: #000!important;

            span {
                color: #000!important;  
            }

            a {
                &:after {
                    content: url('/pub/media/website/icon/arrow-right-dark.svg') !important;
                }
            }
        }
    }
    
    .grid-image-post-right-bottom {
        max-width: 740px !important;
        align-items: end;

        .grid-title-box {
            font-family: 'Red Hat Display';
            font-weight: 900;
            font-size: 57px;
            text-align: right !important;
            display: flex;
            max-width: 450px;
            z-index: 1;
            color: #000;
            margin-right: 32px;
            margin-top: 48px;
        }

        .grid-description-box {
            font-family: 'Red Hat Display';
            font-weight: 600;
            font-size: 23px;
            text-align: right;
            max-width: 220px;
            z-index: 1;
            color: #000;
            margin-right: 32px;
        }

        .grid-image-box {
            position: absolute;
            left: 0;
            max-width: 390px;
            width: 100%;
            height: 100%;
            max-height: 420px;
            left: 46px;
            top: 50%;
            transform: translate(0, -50%);
            
            img {
                height: 100%!important;
            }
        }

        .grid-button-box {
            background: #000;
            color: #F8B408;
            margin-right: 32px;
            position: absolute;
            bottom: 90px;
            right: 120px
        }
    }

    .grid-button-box {
        width: fit-content;
        font-family: 'Red Hat Display';
        font-weight: 600;
        font-size: 16px; 
        border: 1px solid #F8B408;
        border-radius: 52px;
        padding: 0!important;

        a {
            padding: 16px 28px;
            display: flex;
            align-items: center;
            gap: 8px;  
            color: #F8B408!important;

            &:after {   
                content: url('/pub/media/website/icon/arrow-right-orange.svg'); 
                margin-bottom: -5px;
            }
        }
    }
}

.feature-card-home.active {
    display: block!important;
}

.feature-card-home {
    background: #F8B408;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    padding: 65px;
    border-radius: 16px;
    max-height: 750px;
    max-width: 750px;
    display: none!important;
    

    p {
        font-family: 'Red Hat Display';
        font-size: 20px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 7%;
        color: #000;

        strong {
            margin: 8px 0!important;
            display: flex;
        }

        br {
            display: none;
        }
    }
}

.grid-featured-headline-button {
    cursor: pointer;
}

.feature-card-home-button {
    font-family: 'Red Hat Display';
    font-weight: 500;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
    display: flex;
    margin-top: 32px;

    a {
        color: #000;
        padding: 16px;
        border: 1px solid #000;
        border-radius: 52px;
        position: relative;
        gap: 8px;
        display: flex;
        align-items: center;
        
        &:before {
            content: url(/pub/media/website/icon/add-to-cart.svg);
        }
    }
}

main#maincontent:has(.feature-card-home.active) {
    position: relative;
    
    &:after {
        background: #00000033;
        z-index: 1!important; 
        content: '';
        height: 100vh;
        width: 100vw;
        position: fixed!important;
        left: 0;
        right: 0;
        top: 0;
    }
}

.feature-card-home-close {
    position: absolute;
    right: 16px;
    top: 16px;

    p {
        font-size: 24px!important;
        cursor: pointer;
    }
}

.grid-general-brands {
    max-width: 1280px;
    margin: auto;

    .grid-general-brands-title {
        font-family: 'Red Hat Display';
        font-weight: 900;
        font-size: 40px;
        text-align: center;
        max-width: 530px;
        margin: auto;
        color: #000;
        padding-top: 74px;
    }

    .grid-general-brands-description {
        font-family: 'Red Hat Display';
        font-weight: 500;
        font-size: 20px;
        line-height: 25px;
        text-align: center;
        max-width: 620px;
        margin: 24px auto;
        color: #000;
    }
    
    .pagebuilder-column-group {
        gap: 12px;

        figure {
            height: fit-content !important;
            display: flex;
        }

        img {
            width: fit-content !important;
        }

        .grid-general-brand-item {
            width: fit-content !important;
            justify-content: center !important;
            gap: 18px;
        }
    }
}

.grid-products-home {
    max-width: 1280px;
    margin: auto;
}

.grid-products-home {
    .owl-prev,
    .owl-next {
        position: absolute;
        top: -50px !important;
    }
    
    .owl-prev {
        right: 75px !important;
        left: unset!important
    }

    .owl-nav {
        button {
            border-radius: 100% !important;
            border: 1px solid #000 !important;
            opacity: 1 !important;
            
            &:after {
                transform: unset !important;
                border: none!important;
                width: unset!important;
                height: unset!important;
                margin-left: unset!important;
            }
        }
    }
    
    .owl-prev {
        background: #000 !important;
        
        &:after {
            content: url('/pub/media/website/icon/arrow-left-orange.svg') !important; 
        }
        
        &.disabled {
            background: #FFF !important;
            
            &:after {
                content: url('/pub/media/website/icon/arrow-left-dark.svg') !important; 
            }
        }
    }

    .owl-next {
        background: #000 !important;
        right: 0!important;

        &:after {
            content: url('/pub/media/website/icon/arrow-right-orange.svg') !important; 
            margin-right: 0!important;
        }
        
        &.disabled {
            background: #FFF !important;
            
            &:after {
                content: url('/pub/media/website/icon/arrow-right-dark.svg') !important; 
            }
        }
    }

    .block-title {
        position: relative !important;

        &:after {
            content: '';
            width: 100%;
            position: absolute;
            height: 2px;
            background: #000000;
            max-width: 800px;
            bottom: 24px;
            margin-left: 32px;
        }

        strong {
            font-family: 'Red Hat Display';
            font-weight: 900;
            font-size: 40px;
            color: #000;
        }
    }
}

.grid-featured-headline {
    max-width: 1280px;
    margin: auto;
    border-radius: 20px;
    padding:  0 93px 43px!important;
    margin-top: 78px;

    .grid-featured-headline-image {
        padding-top: 32px;
        justify-content: center;
        display: flex;
    }
    
    .grid-featured-headline-title {
        text-align: center;
        font-family: 'Red Hat Display';
        font-weight: 800;
        font-size: 40px;
        text-align: center;
        max-width: 620px;
        margin: auto;
        color: #FFF;
        padding: 32px 0;
    }
}

.grid-featured-headline-video {
    iframe {
        width: 100%;
        height: 670px !important;
        border-radius: 20px;
    }
}

.grid-featured-headline-first-column {
    position: relative;
    align-items: center;
    width: calc(100% - 200px)!important;

    iframe {
        width: 100%;
        height: 420px;
        max-width: 750px;
        margin: auto;
    }

    .grid-featured-headline-top {
        position: absolute;
        left: 0;
    }
}


.grid-featured-headline-pick-video {
    width: 100%;
    display: flex;
    justify-content: center;

    .pagebuilder-video-inner {
        width: 100%
    }

    .pagebuilder-video-container {
        display: flex;
        margin-bottom: 32px;

        iframe {
        border-radius: 20px;
        }
    }
}

.grid-featured-headline-add-product {
    font-family: 'Red Hat Display';
    font-weight: 500;
    font-size: 16px;
    background: #FFF;
    color: #000 !important;
    border-radius: 52px;
    margin-top: 48px;
    margin-bottom: 16px;
    margin-left: 64px;
    position: relative;
    z-index: 1;
    
    a {
        padding: 16px 32px;
        display: flex !important;
        align-items: center;
        flex-direction: row!important;
        gap: 8px;
        color: #000 !important;

        &:before {
            content: url('/pub/media/website/icon/add-to-cart.svg'); 
        }
    } 
}

.grid-featured-headline-second-column {
    justify-content: space-between!important;
    margin-bottom: 28px;
    max-width: 200px;
    width: 100%!important;
}

.grid-featured-headline-button {
    font-family: 'Red Hat Display';
    font-weight: 700;
    font-style: Bold;
    font-size: 20px;
    background-color: #FFF;
    width: fit-content;
    padding: 16px;
    border-radius: 20px;
    margin-top: 120px;
    gap: 90px;
    display: flex;
    border: 1px solid #000;
    
     &:after {
        content: url('/pub/media/website/icon/browser.svg'); 
    }

    span {
        text-decoration: underline;
        color: #000;
    }
}

.footer-content-social-links h3.footer-content-item-title,
figure.footer-content-item-social figcaption {
    display: none;
}



@media(max-width: 767px) {
.cnpj-footer {
    display: flex;
    justify-content: center;
}
    .footer {
        border-top: 0!important;
        padding: 32px !important;
    }

    .page-footer {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .footer-content-links {
        .footer-content-item-link {
            margin-bottom: 0;
        } 
        
        .pagebuilder-column-group {
            flex-direction: column !important; 
            gap: 42px;
        }

        .footer-content-item {
            flex-direction: row!important;
            flex-wrap: wrap!important;
            gap: 16px;
        }

        .footer-content-item-title {
            width: 100%;
            margin: 0;
        }

        .footer-content-item-newsletter {
            display: none !important;
        }
    }

    .footer-content-copy {
        padding-left: 0 !important;

        .pagebuilder-column {
            width: 100%!important;
        }
        
        .pagebuilder-column-group {
            flex-direction: column-reverse !important; 
        }

        .footer-content-social-links {
            flex-direction: column !important;
        }

        .footer-content-item-logo {
            text-align: center;
            padding-top: 32px
        }
    }

    .header.content {
        display: flex;
        gap: 0;
        padding: 20px!important;

        &:after {
            display: none;
        }
    
        .login-block {
            display: none;
        }

        #search_mini_form.sparsh-minisearch #search {
            margin: 0;
            padding: 6px!important;
        }
        
        .block-search {
            max-width: 135px;
            order: 3;
            margin-top: 0;
        }

        .nav-toggle {
            left: unset;
            position: unset !important;
            order: 4;
            margin-right: 0!important;

            &:after {
                display: none;
            }
        }

        .logo {
            max-width: 95px;
        }

        .minicart-wrapper {
            margin-left: 0;
        }
    }

    .nav-open {
        .nav-sections {
            position: fixed!important;
        }
    }

    h4.categories-home-title {
        font-size: 24px !important;
        padding-bottom: 0!important;
    }

    .slide-categories-home {
        .slide-category-item {
            padding: 20px;
            
            img {
                width: 48px!important;
                height: 48px!important;
            }
            
            p {
                font-size: 14px;
                text-align: center;
            }
        }
    }
    

    .grid-products-home {
        padding: 0 20px;
        
        .block-title {
            strong {
                font-size: 24px;
            }
            
            &:after {
                display: none;
            }
        }
    }
    

    .grid-general-brands {
        .pagebuilder-column-group {
            padding: 0 20px;

            overflow: auto;
        }

        .grid-general-brand-item {
            min-width: 200px;
        }

        .grid-general-brands-description {
            display: none;
        }

        h4.grid-general-brands-title {
            padding-bottom: 24px;
            font-size: 24px;
            line-height: 32px;
        }
    }

    .grid-featured-headline {
        margin: 20px!important;
        padding: 20px !important;
    }

    .grid-featured-headline-second-column {
        display: none!important;
    }

    .grid-featured-headline-first-column {
        width: 100% !important;
        max-width: 100%!important
    } 
    
    .grid-featured-headline-add-product {
        margin-left: 0px!important;
    }
    
    figure.grid-featured-headline-top {
        display: none;
    }

    .grid-image-post-left-top  .grid-image-box {
        height: unset!important;
    }

    .grid-featured-headline-title {
        font-size: 32px !important;
        padding-bottom: 0!important;
    }

    
    figure.grid-featured-headline-image {
        img {
            width: 180px;
        }
    }

    .banner-hero-home {
        margin-top: 70px;
    }

    .banner.banner-hero-home,
    .banner-hero-home * {
        height: fit-content!important;
        background: unset;
        max-height: fit-content!important;
        min-height: unset!important;
        object-fit: cover!important;
    }

    .custom-products-items {
        .product-item {
            .product-item-link {
                font-size: 16px !important;
            }

            .actions-primary {
                display: none;
            }
            
            .product-item-details {
                .price-box {
                    .price {
                        font-size: 14px !important;
                    }
                }
                
                #preco-a-vista-mm {
                    .price {
                        flex-direction: column;
                        align-items: start;
                        font-size: 16px;
                        gap: 0px;
                    }
                }

                .mm-price-parcels-grid {
                    margin-top: 4px;
                }
            }
            
        }
    }

    .grid-images-posts {
        display: flex!important;
        flex-direction: row!important;
        flex-wrap: nowrap!important;
        overflow-x: auto;
        padding: 0px 20px;
        margin-top: 0!important;

        .grid-image-post {
            min-width: 220px;
            position: relative !important;
            padding: 16px;
            justify-content: space-between!important;
            align-items: center!important;

            h4.grid-title-box {
                font-size: 24px!important;
                padding: 0!important;
                margin: 0!important;
                text-align: center!important;
            }
        }
        
        figure.grid-image-box {
            margin-bottom: 0!important;
        }

        .grid-image-box {
            margin-left: 0!important;
            padding: 0!important;
            position: unset!important;
            transform: unset!important;
        }

        .grid-description-box {
            font-size: 16px !important;
            padding: 0!important;
            text-align: center!important;
            margin-right: 0!important
        }


        .grid-button-box {
            padding: 16px;
            right: 16px !important;
            bottom: 16px !important;
            top: unset !important;
            left: unset!important;
            margin-right: 0!important;
            
            
            > div {
                display: none!important;
            }
            
            span {
                display: none;
            }
        }
    }

    .nav-open {
        .page-header {
            .header {
                .nav-toggle {
                    position: absolute!important;
                    background: #FFF;
                    left: 10px!important;
                    z-index: 999;
                    
                    &:before {
                        color: #000 !important;
                        justify-content: center;
                    }
                }
            }
        }

        .nav-sections {
            top: 0;
        }

        .grid-images-posts {
            margin-top: 16px;
        }   
    }

    figure.footer-content-item-logo {
        border-top: 1px solid #F8B408!important;
        margin-top: 48px;
    }

    .footer-content-copy {
        padding: 24px 0 0!important;
        border-top: 0 !important;
    }

    figure.footer-content-item-social {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: 'Red Hat Display';
        font-weight: 500;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: 0px;
        color: #FFF;
    }

    .footer-content-social-links h3.footer-content-item-title,
    figure.footer-content-item-social figcaption {
        display: flex!important;
    }

     .grid-products-home {
        .summary-container {
            display: none;
        }
    }
 
    h4.grid-general-brands-title {
        padding-top: 16px!important
    }
}


.grid-products-home {
    .product-reviews-summary {
        display: flex;
    }
    
    .summary-container {
        order: 3;
        padding-top: 8px;
    }
    
    .product-reviews-summary:has(.rating-summary) {
         margin-left: -6px;
        
        .reviews-actions a.action.add {
            display: none;
        }
    }
    
    .rating-summary .rating-result > span:before {
        color: #F8B408;
    }
    
    .product-reviews-summary a.action.view {
        font-family: 'Red Hat Display';
        font-weight: 400;
        font-size: 14px;
    }   
}