/* ==================================================
   MEGA MENU - PRODUTOS
================================================== */

/* somente o item que possui mega menu */
.mega-produtos {
    position: relative;
}


/* container principal */
/* Configuração do mega menu */
:root {
    --cm-mega-offset: 28%;
}


/* somente o item que possui mega menu */
.mega-produtos {
    position: relative;
}


/* container principal */
.mega-produtos .cm-mega-menu {

    display: none;

    position: absolute;

    top: 100%;
    left: var(--cm-mega-offset);

    transform: translateX(-50%);

    width: 100vw;

    background: #fff;

    padding: 30px 0;

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

    z-index: 9999;
}


/* abertura */
.mega-produtos:hover .cm-mega-menu,
.mega-produtos:focus-within .cm-mega-menu {

    display: block;

}


/* grid interno */

.cm-mega-columns {

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr)
        320px;

    gap: 40px;

    padding: 0 20px;

    align-items: start;

}


/* colunas */

.cm-mega-column {

    min-width: 0;

}


.cm-mega-column h4 {

    font-size: 14px;

    margin: 0 0 10px;

    text-transform: uppercase;

}


/* listas */

.cm-mega-menu ul {

    list-style: none;

    margin: 0;

    padding: 0;

}


.cm-mega-menu li {

    margin-bottom: 6px;

}


.cm-mega-menu a {

    color: #333;

    text-decoration: none;

}


.cm-mega-menu a:hover {

    color: #000;

}


/* banner */

.cm-mega-banner {

    display: flex;

    flex-direction: column;

    gap: 12px;

    background: #f7f7f7;

    padding: 16px;

    border-radius: 10px;

}


.cm-mega-banner-img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 8px;

}


/* conteúdo banner */

.cm-banner-content h3 {

    margin: 0;

    font-size: 16px;

}


.cm-banner-content p {

    font-size: 13px;

    color: #666;

}


/* botão */

.cm-btn {

    display: inline-flex;

    padding: 10px 16px;

    background: #FFA500;

    color: #fff;

    border-radius: 6px;

    text-decoration: none;

}


.cm-btn:hover {

    background: #FFD700;

    color: #fff;

}