/* ==========================================================================
   MENU COM IMAGENS - Meuri Quadros
   Versão 9

   Mudou em relação à v8: saiu o categoria-id-24420751 dos seletores.
   O layout agora vale para QUALQUER item de 1º nível com submenu -
   Temas, Cores, Formatos e os que você criar depois.

   Por que é seguro tirar o ID: as regras só têm efeito dentro de
   ul.submenu (desktop) e ul.nivel-dois (mobile), e esses <ul> só
   existem em item que tem filhos. Item sem submenu não é afetado.

   A) desktop   B) mobile   C) imagens
   ========================================================================== */


/* ==========================================================================
   A) DESKTOP
   ========================================================================== */
@media (min-width: 768px) {

  /* ---------- A0. LARGURA DO PAINEL ---------- */
  .nivel-um > li.com-filho { position: static !important; }

  .nivel-um > li.com-filho > ul.submenu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* ---------- CORES (mude aqui) ---------- */
  .nivel-um > li ul.submenu {
    --mm-bg:    #ff1630;   /* fundo do painel */
    --mm-txt:   #ffffff;   /* cor do texto */
    --mm-place: #C20C15;   /* cor do card sem imagem */
    --mm-card:  112px;     /* tamanho mínimo do card */
  }

  /* ---------- 1. Esconde a coluna de produtos ----------
     Melhor ainda: no backuphtml troque para  var produtosMenu = false;  */
  .nivel-um > li .level2-prod-wrap { display: none !important; }

  .nivel-um > li .level2-cat-wrap,
  .nivel-um > li .sub-categorias {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }

  /* ---------- 2. O painel + as pistas de rolagem ----------
     As 4 camadas de background formam a "sombra de rolagem": as duas
     primeiras são da cor do fundo e rolam junto com o conteúdo, tapando
     as duas seguintes (as sombras) quando você está no topo ou no fim.
     Resultado: a sombra aparece só quando há mais o que ver.          */
  .nivel-um > li .submenu-wrap {
    box-sizing: border-box;
    padding: 18px 20px !important;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;

    background-color: var(--mm-bg) !important;
    background-image:
      linear-gradient(to bottom, var(--mm-bg), transparent),
      linear-gradient(to top,    var(--mm-bg), transparent),
      linear-gradient(to bottom, rgba(0,0,0,.55), transparent),
      linear-gradient(to top,    rgba(0,0,0,.55), transparent);
    background-position: 0 0, 0 100%, 0 0, 0 100%;
    background-size: 100% 34px, 100% 34px, 100% 20px, 100% 20px;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;

    scrollbar-width: auto;                     /* Firefox */
    scrollbar-color: #ffffff rgba(0,0,0,.30);
  }

  /* barra de rolagem - Chrome, Edge, Safari, Opera */
  .nivel-um > li .submenu-wrap::-webkit-scrollbar {
    width: 14px;
  }
  .nivel-um > li .submenu-wrap::-webkit-scrollbar-track {
    background: rgba(0,0,0,.30);
    border-radius: 10px;
    margin: 6px 0;
  }
  .nivel-um > li .submenu-wrap::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: content-box;
    min-height: 40px;
  }
  .nivel-um > li .submenu-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.85);
    background-clip: content-box;
  }

  /* ---------- 3. A grade de cards ---------- */
  .nivel-um > li ul.level2 {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--mm-card), 1fr));
    gap: 14px 12px;
    align-items: start;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    columns: auto !important;
    float: none !important;
  }

  .nivel-um > li ul.level2 > li.item-level2 {
    width: auto !important;
    min-width: 0;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    position: relative;
  }

  .nivel-um > li ul.level2 > li.item-level2 > a {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: center;
    color: var(--mm-txt) !important;
    font-size: 12px;
    line-height: 1.25;
    min-height: 2.5em;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-decoration: none;
  }

  .nivel-um > li ul.level2 > li.item-level2 > a:before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 6px;
    border-radius: 10px;
    background: var(--mm-place) center / cover no-repeat;
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .nivel-um > li ul.level2 > li.item-level2 > a:hover:before {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,.4);
  }

  /* setinhas, SVGs e 3º nível fora do painel */
  .nivel-um > li ul.level2 > li > a > i,
  .nivel-um > li ul.level2 > li > a > svg,
  .nivel-um > li ul.level3 {
    display: none !important;
  }

  /* ---------- 4. AVISO "role para ver mais" -- OPCIONAL --
     Depende do <script> que põe a classe .mm-rola. Sem ele, inerte.   */
  .nivel-um > li ul.submenu.mm-rola:after {
    content: '\2193  role para ver mais';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    text-align: center;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--mm-txt);
    padding: 22px 0 7px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    pointer-events: none;
  }
}


/* ==========================================================================
   B) MOBILE - gaveta lateral
   inline-block em vez de float: com float, um rótulo de 2 linhas
   "segura" o card seguinte e a grade sai torta.
   Sem mexer no display do <ul> - o tema abre/fecha por JS inline.
   ========================================================================== */
@media (max-width: 767px) {

  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois {
    padding: 14px 8px 4px !important;
    margin: 0 !important;
    list-style: none;
    font-size: 0 !important;          /* mata o espaço entre os inline-blocks */
    text-align: left;
    box-sizing: border-box;
  }

  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois > li {
    display: inline-block !important;
    vertical-align: top;
    float: none !important;
    width: 50%;                       /* 2 por linha. 33.333% para 3 */
    box-sizing: border-box;
    padding: 0 6px 16px !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    list-style: none;
  }

  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois > li > a {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    text-align: center;
    font-size: 12px !important;       /* devolve o tamanho do texto */
    line-height: 1.25;
    min-height: 2.5em;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-decoration: none;
  }

  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois > li > a:before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 7px;
    border-radius: 10px;
    background: #ececec center / cover no-repeat;
  }

  /* setinhas e 3º nível fora da grade */
  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois > li > a > i,
  .menu-mobile .categorias-mobile .menu
  ul.nivel-um > li > ul.nivel-dois ul.nivel-tres {
    display: none !important;
  }
}


/* ==========================================================================
   C) AS IMAGENS - valem para desktop E mobile

   TEMAS
   ========================================================================== */
.menu li.categoria-id-24451034 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/amarelo.jpg')!important; } /* Amarelo */
.menu li.categoria-id-24451156 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/azul.jpg')!important; } /* Azul */
.menu li.categoria-id-24451035 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/bege.jpg')!important; } /* Bege */
.menu li.categoria-id-24451036 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/branco.jpg')!important; } /* Branco */
.menu li.categoria-id-24451159 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/cinza.jpg')!important; } /* Cinza */
.menu li.categoria-id-24451147 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/colorido.jpg')!important; } /* Colorido */
.menu li.categoria-id-24451161 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/dourado.jpg')!important; } /* Dourado */
.menu li.categoria-id-24451148 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/laranja.jpg')!important; } /* Laranja */
.menu li.categoria-id-24451163 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/marrom.jpg')!important; } /* Marrom */
.menu li.categoria-id-24451149 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/preto.jpg')!important; } /* Preto */
.menu li.categoria-id-24451157 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/preto-e-branco.jpg')!important; } /* Preto e Branco */
.menu li.categoria-id-24451164 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/rosa.jpg')!important; } /* Rosa */
.menu li.categoria-id-24451153 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/roxo.jpg')!important; } /* Roxo */
.menu li.categoria-id-24451165 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/verde.jpg')!important; } /* Verde */
.menu li.categoria-id-24451154 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/vermelho.jpg?v=1')!important; } /* Vermelho */
.menu li.categoria-id-24451026 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/panoramico.jpg?v=1')!important; } /* Panorâmico */
.menu li.categoria-id-24451030 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/quadrado.jpg?v=1')!important; } /* Quadrado */
.menu li.categoria-id-24451027 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/retangular.jpg?v=1')!important; } /* Retangular */
.menu li.categoria-id-24451031 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/vertical.jpg?v=1')!important; } /* Vertical */
.menu li.categoria-id-24420755 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/abstratos.jpg')!important; } /* Abstratos */
.menu li.categoria-id-24445141 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/animais.jpg')!important; } /* Animais */
.menu li.categoria-id-24442732 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/aquarela-e-pinceladas.jpg')!important; } /* Aquarela e pinceladas */
.menu li.categoria-id-24442733 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/artistas-famosos.jpg')!important; } /* Artistas famosos */
.menu li.categoria-id-24442734 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/arvores.jpg')!important; } /* Árvores */
.menu li.categoria-id-24420770 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/cidades.jpg')!important; } /* Cidades */
.menu li.categoria-id-24442735 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/cultura-africana.jpg')!important; } /* Cultura africana */
.menu li.categoria-id-24420776 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/florais.jpg')!important; } /* Florais */
.menu li.categoria-id-17644600 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/fracionados.jpg')!important; } /* Fracionados */
.menu li.categoria-id-17644981 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/todos-os-quadros-fracionados.jpg')!important; } /* Todos os Quadros Fracionados */
.menu li.categoria-id-24445139 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/geometricos.jpg')!important; } /* Geométricos */
.menu li.categoria-id-24445143 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/minimalista.jpg')!important; } /* Minimalista */
.menu li.categoria-id-17644977 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/todos-os-quadros-minimalista.jpg')!important; } /* Todos os Quadros Minimalista */
.menu li.categoria-id-24420792 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/mulheres.jpg')!important; } /* Mulheres */
.menu li.categoria-id-24420794 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/paisagens.jpg')!important; } /* Paisagens */
.menu li.categoria-id-17564515 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/paisagens-a-oleo.jpg')!important; } /* Paisagens a óleo */
.menu li.categoria-id-17748740 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/florestas-campestres.jpg')!important; } /* Florestas/Campestres */
.menu li.categoria-id-17748737 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/lagos-rios-mar.jpg')!important; } /* Lagos/Rios/Mar */
.menu li.categoria-id-17721190 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/todas-as-paisagens.jpg')!important; } /* Todas as Paisagens */
.menu li.categoria-id-17564520 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/pinturas-sacras-a-oleo.jpg')!important; } /* Pinturas sacras a óleo */
.menu li.categoria-id-17748436 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/todas-as-pinturas-sacras.jpg')!important; } /* Todas as Pinturas Sacras */
.menu li.categoria-id-24445167 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/praia-e-mar.jpg')!important; } /* Praia e mar */
.menu li.categoria-id-24420805 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/religiosos.jpg')!important; } /* Religiosos */
.menu li.categoria-id-2545507 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/textura-relevos.jpg')!important; } /* Textura-Relevos */
.menu li.categoria-id-17564498 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/abstrato.jpg')!important; } /* Abstrato */
.menu li.categoria-id-17564501 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/arvores-e-flores.jpg')!important; } /* Árvores e Flores */
.menu li.categoria-id-17644972 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/cidade.jpg')!important; } /* Cidade */
.menu li.categoria-id-17564511 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/figurativo.jpg')!important; } /* Figurativo */
.menu li.categoria-id-17564509 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/mar-marinas-praias.jpg')!important; } /* Mar/Marinas/Praias */
.menu li.categoria-id-17564506 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/outros.jpg')!important; } /* Outros */
.menu li.categoria-id-24420864 > a:before { background-image: url('https://cdn.awsli.com.br/673/673315/arquivos/todos-os-quadros.jpg')!important; } /* Todos os quadros */

/* --------------------------------------------------------------------------
   CORES (categoria-id-24451025)
   Rode no console o gerador que está no chat e cole as linhas aqui.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   FORMATOS (categoria-id-24451024)
   Idem.
   -------------------------------------------------------------------------- */


/* Opcional: some com a categoria "Ocultar", que hoje aparece no menu
.menu li.categoria-id-17696386 { display: none !important; }
*/