/* ===================================================
   MOLAPRO - PRODUTOS
=================================================== */

.molapro-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:18px;

}


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

.molapro-card{

    position:relative;

    overflow:hidden;

    background:#fff;

}

.molapro-card-link{

    display:block;

    position:relative;

    color:#fff;

    text-decoration:none;

}


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

.molapro-card-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:1 / 1;

}

.molapro-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s ease;
    

}


/* ===================================================
   OVERLAY
=================================================== */

.molapro-card-overlay{

    position:absolute;

    left:0;

    right:0;

    top:0;

    bottom:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:24px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.20) 45%,
        rgba(0,0,0,0) 75%
    );

    transition:.35s;

}

.molapro-card:hover .molapro-card-overlay{

    background:rgba(231,119,35,.82);

}


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

.molapro-card-title{

    margin:0;

    color:#fff;

    font-size:17px;

    font-weight:400;

    line-height:1.3;

    text-transform:uppercase;

    letter-spacing:.2px;

}


/* ===================================================
   SABER MAIS
=================================================== */

.molapro-card-more{

    display:inline-block;

    margin-top:12px;

    color:#fff;

    font-size:13px;

    font-weight:400;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.molapro-card-more::before{

    content:"";

    display:block;

    width:75px;

    height:1px;

    background:#fff;

    margin-bottom:8px;

}


/* ===================================================
   HOVER
=================================================== */

.molapro-card:hover img{

    transform:scale(1.08);

}


/* ===================================================
   RESPONSIVO
=================================================== */

@media(max-width:768px){

    .molapro-grid{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }

.molapro-card-image {
    height: auto;
    width: 100%;
  }

    .molapro-card-title{

        font-size:15px;

    }

}

@media(max-width:480px){

    .molapro-grid{

        grid-template-columns:1fr;

    }

}


.molapro-swiper{

    width:100%;

    overflow:hidden;

}

.molapro-swiper .swiper-wrapper{

    align-items:stretch;

}

.molapro-swiper .swiper-slide{

    height:auto;

}

.molapro-swiper .molapro-card{

    width:100%;

}



/* ==========================================
   CAROUSEL
========================================== */

.molapro-carousel{

    position:relative;

}

/* Navegação */

.molapro-carousel-nav{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:50;

}

/* Botões */

.molapro-prev,
.molapro-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#F58023 !important;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    cursor:pointer;

    pointer-events:auto;

    transition:.3s;

    box-shadow:0 8px 25px rgba(0,0,0,.18);

}

/* esquerda */

.molapro-prev{

    left:-27px;

}

/* direita */

.molapro-next{

    right:-27px;

}

/* Hover */

.molapro-prev:hover,
.molapro-next:hover{

    background:#F58023;

    color:#fff !important;

}


/* Active */

.molapro-prev:active,
.molapro-next:active{

    background:#fff;

    color:#F58023 !important;

}



/* Active */

.molapro-prev:focus,
.molapro-next:focus{

    background:#fff;

    color:#F58023 !important;

}

/* ==================================
   MENU CATEGORIAS / PRODUTOS
================================== */
.molapro-categorias{
    display:flex;
    flex-wrap:wrap;
    gap:35px;
    margin-bottom:35px;
    padding-bottom:18px;
    border-bottom:1px solid #ececec;
}
.molapro-categorias a{
    color:#222;
    text-decoration:none;
    font-size:15px;
    text-transform:uppercase;
    transition:.3s;
    position:relative;
}
.molapro-categorias a:hover{ color:#F58023; }
.molapro-categorias a.active{ color:#F58023; font-weight:600; }
.molapro-categorias a.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-19px;
    width:100%;
    height:2px;
    background:#F58023;
}