/* ========================================================================== MENU COM IMAGENS - Meuri Quadros Versão 8 Mudou em relação à v7: quando a rolagem existir, ela fica evidente. 1) barra larga e branca, sempre visível (não é a barrinha fininha do sistema, que no Mac ainda por cima só aparece quando você rola) 2) sombra na borda de baixo que diz "tem mais coisa aqui" e some sozinha quando você chega no fim 3) espaço reservado para a barra, então nada pula de lugar A) desktop B) mobile C) "Temas" não clicável (opcional) D) imagens ========================================================================== */ /* ========================================================================== A) DESKTOP ========================================================================== */ @media (min-width: 768px) { /* ---------- A0. LARGURA DO PAINEL ---------- */ .nivel-um > li.categoria-id-24420751 { position: static !important; } .nivel-um > li.categoria-id-24420751 > 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.categoria-id-24420751 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.categoria-id-24420751 .level2-prod-wrap { display: none !important; } .nivel-um > li.categoria-id-24420751 .level2-cat-wrap, .nivel-um > li.categoria-id-24420751 .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.categoria-id-24420751 .submenu-wrap { box-sizing: border-box; padding: 18px 20px !important; width: 100%; max-height: 82vh; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; /* reserva o espaço da barra */ 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; /* barra de rolagem - Firefox */ scrollbar-width: auto; scrollbar-color: #ffffff rgba(0,0,0,.30); } /* barra de rolagem - Chrome, Edge, Safari, Opera */ .nivel-um > li.categoria-id-24420751 .submenu-wrap::-webkit-scrollbar { width: 14px; } .nivel-um > li.categoria-id-24420751 .submenu-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,.30); border-radius: 10px; margin: 6px 0; } .nivel-um > li.categoria-id-24420751 .submenu-wrap::-webkit-scrollbar-thumb { background: #ffffff; border-radius: 10px; border: 3px solid transparent; /* folga em volta do puxador */ background-clip: content-box; min-height: 40px; /* nunca vira um tracinho */ } .nivel-um > li.categoria-id-24420751 .submenu-wrap::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.85); background-clip: content-box; } /* ---------- 3. A grade de cards ---------- auto-fill = o navegador decide quantas colunas cabem. Regule pelo --mm-card lá em cima. */ .nivel-um > li.categoria-id-24420751 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.categoria-id-24420751 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.categoria-id-24420751 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.categoria-id-24420751 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.categoria-id-24420751 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.categoria-id-24420751 ul.level2 > li > a > i, .nivel-um > li.categoria-id-24420751 ul.level2 > li > a > svg, .nivel-um > li.categoria-id-24420751 ul.level3 { display: none !important; } /* ---------- 4. AVISO "role para ver mais" -- OPCIONAL -- Só funciona junto com o