/* wcb-casa, módulo Mega menu B (Etapa 2, 12/10/2026): colunas de links + cartões com pictograma (última coluna desde a rodada 4), sobre os
   menus "MM 2026 · ...". Cores da Etapa 1 com valor próprio (as duas etapas voltam separadas). Volta do desenho: option
   wcb_mega_menu_b_desligado = sim. */

@media (min-width: 992px) {
	/* faixa: rótulo por extenso numa linha (dono, 03h39); os 7 rótulos cabem a 1280 com os 4 pictogramas (medido) */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_link,
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown_link .oxy-mega-dropdown_link-text { white-space: nowrap !important; width: auto !important; max-width: none !important; }
	/* rodada 2 (04h41): os 6 rótulos juntos à esquerda, 4 px entre eles e 12 px de cada lado do texto (o fundo do mouse
	   em cima e o alvo continuam do tamanho do rótulo); o que sobra fica entre Acessórios e os pictogramas */
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul { justify-content: flex-start !important; flex-wrap: nowrap !important; column-gap: 4px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul > li.oxy-mega-dropdown { flex: 0 0 auto !important; margin: 0 !important; }
	/* rodada 4 (dono, 13h51: "não estão centralizadas, parece um pouco mais acima"): acima de 1280 o universal dá 4 px
	   de recuo embaixo do rótulo, e a maiúscula subia 1,5 px do meio da faixa (medido na tinta: 194 a 202 para o meio
	   em 199,5). Sem recuo em cima e embaixo o texto centra no rótulo de 48 px, que já centra na faixa de 66. */
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul > li.oxy-mega-dropdown > .oxy-mega-dropdown_link { padding: 0 12px !important; }
	/* 04h56: o grupo vai para o eixo do logo. A lista termina 244 px antes da borda do cabeçalho (32 px antes dos ícones,
	   folha identidade), então o centro dela fica 122 px à esquerda do eixo. Dois espaçadores flex resolvem sem medir o
	   grupo: o da esquerda nasce com 244 px e os dois dividem a sobra; quando a sobra acaba, só o da esquerda encolhe e o
	   grupo encosta na margem de 32 px dos ícones, nunca neles. */
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul::before,
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul::after { content: ""; display: block; flex: 1 1 0; min-width: 0; }
	html body #-mega-menu-76-35#-mega-menu-76-35 > ul::before { flex-basis: 244px; }

	/* painel: largura do contêiner, cartões numa coluna de 250 px (até 4 linhas de cartão, rodada 3) e até 3 colunas de
	   grupos. As linhas levam !important porque o universal zera `grid-template-rows` no 88 (Aparelhos) com !important */
	/* o painel largo nasce centrado no cabeçalho (a caixa de referência do inner é o #_header-2-35 quando o li não é
	   posicionado): com o li em relative, o painel de 1.000 px dos itens da direita saía da tela (Acessórios ia a x=1.936) */
	html body #-mega-menu-76-35#-mega-menu-76-35 li.oxy-mega-dropdown { position: static !important; }
	/* rodada 3 (dono, 10h28: Acessórios "fora do padrão e morre ao tentar clicar"): os 6 painéis com a mesma caixa. O
	   bloco de 29/09 do universal.css da hcteste dá aos painéis 580, 83, 84, 79, 80 e 88 `top: 100%`, `width:
	   max-content` no fundo e 10 px a mais em cima da lista; o 85 (Coils) ficou fora dele. Aqui os seis: o inner nasce
	   logo abaixo do botão (top auto = posição estática, y do fim do rótulo), sem os 9 px de faixa em que o mouse saía do
	   item, e o fundo encosta na faixa (9 px de recuo = a faixa de 66 px menos o rótulo de 48, dividido por 2) e ocupa a
	   largura toda do inner, embaixo de qualquer botão em qualquer largura. */
	/* rodada 5 (dono, 15h19: "o espaçamento das colunas deve ser proporcional em todas as abas; NicSalt é um bom
	   parâmetro; diminua a parte azul proporcionalmente"): o painel tem a largura do conteúdo, até a caixa de 1.240 px.
	   Ancoragem, para o mouse ir do botão a qualquer link sem passar por vão: os 3 primeiros botões encostam o painel
	   na borda ESQUERDA da caixa, os outros na DIREITA (a mesma borda do painel largo de antes). Medido: o painel cobre
	   100% do botão nos 6, a 1280, 1366, 1536 e 1920. */
	html body #-mega-menu-76-35#-mega-menu-76-35 li.oxy-mega-dropdown { --wcb-mm-caixa: min(1240px, calc(100vw - 40px)); --wcb-mm-vao: 145px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.oxy-mega-dropdown > .oxy-mega-dropdown_inner { width: max-content !important; max-width: var(--wcb-mm-caixa) !important; top: auto !important; left: calc(50% - var(--wcb-mm-caixa) / 2) !important; right: auto !important; transform: none !important; padding: 9px 0 0 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.oxy-mega-dropdown:nth-child(n+4) > .oxy-mega-dropdown_inner { left: auto !important; right: calc(50% - var(--wcb-mm-caixa) / 2) !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown :is(.oxy-mega-dropdown_container, .oxy-mega-dropdown_content) { width: 100% !important; max-width: none !important; }
	/* o painel 2 px maior de cada lado (dono, 14/10/2026 10h42: "aumentar a aba deles de maneira uniforme em torno de 2
	   pixels de cada lado"): recuo de 26 (era 24). O ancora.js põe a borda do painel no início do rótulo menos esse
	   recuo, e deixa o painel passar 2 px da caixa: o conteúdo fica no mesmo x e desce 2 px. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content { padding: 26px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-mega-dropdown_content .ct-div-block.ct-div-block { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu { width: 100% !important; }
	/* rodada 5: cada coluna de grupo tem a largura do conteúdo dela (o nome mais longo, com o foguinho) e o vão entre
	   colunas é um só, o do NicSalt: com as colunas dele no tamanho do conteúdo, 145 px de vão dá ao painel dele os
	   mesmos 1.240 px de antes (a régua não muda de tamanho). Antes as trilhas eram iguais (1fr): o vão à vista, do
	   fim do texto de uma coluna ao começo da seguinte, ia de 152 px (NicSalt) a 369 px (Pods). Cartões em 250.
	   `minmax(0, ...)`: se um painel passar da caixa de 1.240, as colunas encolhem em vez de vazar do azul. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list { display: grid !important; grid-template-columns: repeat(3, minmax(0, max-content)) max-content !important; grid-template-rows: auto 1fr !important; grid-auto-flow: row dense !important; column-gap: var(--wcb-mm-vao) !important; row-gap: 0 !important; columns: auto !important; column-count: auto !important; width: 100% !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li { width: auto !important; margin: 0 !important; break-inside: avoid; }
	/* rodada 4 (dono, 13h51: os cartões "vão para a última posição no final do bloco"): a coluna dos cartões é a última.
	   Os grupos têm linha fixa (1 / -1) e coluna automática, então a grade os põe primeiro, da coluna 1 em diante, na
	   ordem do menu; o cartão tem coluna fixa (a última) e cai na 1a linha livre dela. Não depende da ordem no DOM (o
	   HOT reordena grupos acesos), mas o menu também foi reordenado (r4-menus.php) para o Tab e a gaveta seguirem a
	   tela. Painel com 2 grupos (Pods) ganha 2 colunas de grupo, e não um buraco antes dos cartões. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list:not(:has(> li:not(.wcb-mm-card, .wcb-mm-embaixo) ~ li:not(.wcb-mm-card, .wcb-mm-embaixo) ~ li:not(.wcb-mm-card, .wcb-mm-embaixo))) { grid-template-columns: repeat(2, minmax(0, max-content)) max-content !important; }
	/* rodada 5: os cartões empilham numa célula só (todos na linha 1 / -1, um embaixo do outro pela margem: 64 px de
	   cartão e 10 de vão). Antes cada cartão tinha a sua linha, e as linhas vazias de um painel com 2 cartões cobravam
	   o vão delas: Acessórios tinha 49 px de azul vazio embaixo, e não os 24 do recuo. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card { grid-column: -2 / -1; grid-row: 1 / -1; align-self: start !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card ~ li.wcb-mm-card { margin-top: 74px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card ~ li.wcb-mm-card ~ li.wcb-mm-card { margin-top: 148px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card ~ li.wcb-mm-card ~ li.wcb-mm-card ~ li.wcb-mm-card { margin-top: 222px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card) { grid-row: 1 / -1; grid-column: auto; }
	/* rodada 5 (dono, 15h25: "Kit deve vir abaixo de Mod"): o grupo com a classe `wcb-mm-embaixo` (no item do menu)
	   desce para a linha 2 da coluna do grupo de cima, que fica só na linha 1; o painel perde uma coluna. A ordem do
	   menu já é essa (Tab e gaveta seguem a tela). */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card):has(+ li.wcb-mm-embaixo) { grid-row: 1 / 2; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-embaixo { grid-row: 2 / 3; margin-top: 24px !important; }
	/* rodada 5 (dono, 15h52: "adotar o traço branco do mega Coils e Cartuchos em todos os outros"): o traço é o filete
	   de 1 px rgba(255,255,255,.12) entre as colunas, que só o Coils tinha, por uma regra do universal.css da hcteste
	   presa ao slide menu dele (`#-slide-menu-375-35 ... > .menu-item + .menu-item::after`, left -14 px = o meio do vão
	   de 28 de antes). Vira a regra dos 6: no meio do vão novo, do topo ao fim da lista, antes de cada coluna menos a
	   primeira, e antes da coluna dos cartões (o 1o cartão estica até o fim da lista para levar o traço; os outros
	   ficam no topo). No Kit, que fica embaixo do Mod, o traço sobe os 24 px do respiro e emenda com o do Mod. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li { position: relative !important; }
	/* rodada 7d (dono, 13/10 14h25: "Divisor branco poderia ser posicionado próximo ao início de cada coluna? Funcionando quase
	   como uma coluna de títulos"): o traço sai do meio do vão e fica 16 px antes do texto da coluna (o filete do mouse
	   do título fica a 12 px, entre os dois). Na coluna dos cartões o desenho precisa de 34 px antes do texto (22 + 12 de
	   respiro): o traço fica a 44 px, com 10 px de ar até o desenho e 4 até o filete do cartão. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card { --wcb-mm-divisor: -44px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card) + li.wcb-mm-card { align-self: stretch !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card ~ li.wcb-mm-card::after { content: none !important; display: none !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card) ~ li:not(.wcb-mm-card)::after,
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card) + li.wcb-mm-card::after { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: var(--wcb-mm-divisor, -16px) !important; width: 1px !important; height: auto !important; background: rgba(255, 255, 255, .12) !important; pointer-events: none; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li:not(.wcb-mm-card) ~ li.wcb-mm-embaixo:not(.wcb-mm-card)::after { top: -24px !important; }

	/* cartão: pictograma num círculo de 44 px (desenho da rodada 6 no fim deste bloco), título 14/700 #000, linha 12,5 #303030 (4,55:1).
	   Rodada 4 (dono, 13h51: "perdem o retângulo cinza e o quadrado azul que envolve o pictograma, trocar por círculo"):
	   sem contorno nem fundo no cartão, e o quadrado vira círculo do mesmo tamanho (o centro do ladrilho não muda, então
	   os deslocamentos ópticos da SPEC valem iguais). O pictograma fica branco (decisão de 11h1x, "em branco como os
	   vizinhos"), e branco pede o fundo escuro: por isso o círculo é cheio. Margem e fonte fixas aqui: o universal dá
	   -12 px ao item sem filhos e -2 px só aos 5 painéis da lista de 29/09 (rodada 3).
	   Rodada 6 (dono, 13/10 10h34): o pictograma em #101238, o marinho do menu, com o traço do foguinho do HOT (1,2 px
	   na tela: os SVG -r6 levam stroke 2,4 na grade de 40 desenhada a 20 px; o foguinho, 3 a 16 px), e em volta só um
	   círculo fino e vazado, 1 px #101238. Sem preenchimento: #101238 sobre o painel #829AB6 dá 6,22:1 (ícone pede 3:1).
	   Rodada 7b (dono, 13/10 13h34: "considerar apenas a fonte sem pictograma para calcular a distância entre as colunas"):
	   o texto do cartão começa onde começa o das outras colunas (72,5 px do divisor, metade do vão) e o desenho fica
	   pendurado à esquerda dele: coluna de 22 px, respiro de 12, e o link recua 46 px (2 do filete + 10 + 22 + 12; 40 desde a 7d, com 4 de recuo) para
	   dentro do vão. A coluna dos cartões deixa os 250 px fixos e fica do tamanho do texto, como as outras. O alvo do
	   clique continua o link inteiro, com o desenho dentro */
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a { display: grid !important; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 64px; font-size: 14px !important; line-height: 1.25 !important; border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: #000000 !important; text-decoration: none !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a::before { content: ""; grid-column: 1; grid-row: 1 / 3; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #101238; background: none; }
	/* rodada 3 (dono, 11h17: "não parece centralizado no quadrado marinho"): o pictograma era posto por `left: 23px`
	   contando com 12 px de recuo, e o universal dá 10 px aos 5 painéis da lista de 29/09 (2 px à direita; no Coils, 3 px
	   acima). Agora ele ocupa a mesma célula da grade que o ladrilho e centra nela, qualquer que seja o recuo; o ajuste
	   por ícone é --wcb-mm-dx/--wcb-mm-dy, a regra da designer (SPEC dos pictogramas, "Centralização no ladrilho"):
	   o centroide da tinta no centro, arredondado a 0,5 px. */
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a::after { content: ""; position: static; grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; width: 22px; height: 20px; background: #101238; transform: translate(var(--wcb-mm-dx, 0px), var(--wcb-mm-dy, 0px)); -webkit-mask: var(--wcb-mm-ic) center / contain no-repeat; mask: var(--wcb-mm-ic) center / contain no-repeat; }
	/* os pictogramas, um por papel (as classes ficaram com o nome do ícone antigo: --lupa é "Por sabor", --carrinho é
	   "Todos"). Escolha do dono em 12/10 13h5x, sobre a SPEC dos pictogramas: Por sabor S1 (cerejas), Todos T2
	   (camadas), Sem nicotina A1 (frasco Chubby Gorilla fechado); Mais vendidos segue a chama A. Os deslocamentos são os
	   da tabela "Centralização no ladrilho" da SPEC; o círculo tem o mesmo centro e o mesmo tamanho do ladrilho de 44.
	   Trocar um desenho = trocar o arquivo e os dois números desta linha (e a do bloco da gaveta, no fim da folha). */
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card--mais-vendidos > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/hot-sellers-A-r6.svg"); --wcb-mm-dx: -0.5px; --wcb-mm-dy: -2px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card--lupa > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/por-sabor-S1-r6.svg"); --wcb-mm-dx: -0.5px; --wcb-mm-dy: -0.5px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card--carrinho > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/todos-T2-r6.svg"); --wcb-mm-dx: 0px; --wcb-mm-dy: 0px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card--sem-nicotina > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/sem-nicotina-A1-r6.svg"); --wcb-mm-dx: 0px; --wcb-mm-dy: -1.5px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card .wcb-mm-tit { grid-column: 2; font-size: 14px; font-weight: 700; line-height: 1.25; color: #000000; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card .wcb-mm-desc { grid-column: 2; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #303030; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a:is(:hover, :focus-visible) { background: none !important; border-left-color: #000000 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a:is(:hover, :focus-visible) .wcb-mm-tit { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a:is(:hover, :focus-visible) .wcb-mm-desc { color: #000000; }
	/* sem caixa e com o filete do mouse: o seletor mais pesado vence a folha identidade (raio 0 8 8 0) e a borda zerada
	   com !important de fora (medido: border-left 0 no cartão). Margem e recuo moram aqui desde a rodada 7b: o universal dá
	   `margin: 0 -2px` e `padding: 5px 10px` com !important aos 5 painéis da lista de 29/09 e vencia a regra mais leve */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card.menu-item > a { margin: 0 0 0 -40px !important; padding: 10px 0 10px 4px !important; border: 0 !important; border-left: 2px solid transparent !important; border-radius: 0 !important; background: none !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.wcb-mm-card.menu-item > a:is(:hover, :focus-visible) { border-left-color: #000000 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a:focus-visible { outline: 2px solid #000000 !important; outline-offset: 2px !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a:active { transform: translateY(1px); }

	/* grupo: título 12,5/800 caixa alta #000 com filete #101238; é link para a categoria (decisão do dono). Rodada 3: vale
	   também para o item de topo SEM filhos (Mod e Kit, que saíam a 500 e sem filete: a folha identidade pesa mais em
	   `.menu-item:not(.menu-item-has-children) > a`), e o filete é um só para os dois casos. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a { display: inline-block !important; padding: 0 0 8px !important; margin: 0 0 6px !important; font-size: 12.5px !important; font-weight: 800 !important; line-height: 20px !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: #000000 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a::after { content: "" !important; display: block !important; width: clamp(56px, 50%, 160px) !important; height: 3px !important; margin-top: 8px !important; background: #101238 !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a:is(:hover, :focus-visible) { color: #000000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list > li:not(.wcb-mm-card) > .sub-menu { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; columns: auto !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li > a { display: block !important; min-height: 32px; line-height: 32px !important; padding: 0 10px !important; font-size: 14px !important; font-weight: 500 !important; color: #303030 !important; border-left: 2px solid transparent; white-space: nowrap; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li > a:is(:hover, :focus-visible) { color: #000000 !important; border-left-color: #000000; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; background: none !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li > a:focus-visible { outline: 2px solid #000000 !important; outline-offset: 2px; }
	/* "Ver tudo" no fim da coluna (rodada 3, dono 10h32), o mesmo desenho discreto do "Ver tudo" que ele aprovou
	   (folha identidade): 13/400, sem caixa alta e sem contorno, setinha fina; #303030 sobre #829AB6 = 4,55:1. O item
	   nasce no modulo.php, só na saída, para o grupo marcado com a classe `wcb-mm-ver-tudo`. A caixa é a dos itens
	   da coluna (-12 px do universal, filete de 2 px, 10 px de recuo) para o texto alinhar com as marcas. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li.wcb-mm-ver-tudo-item { list-style: none !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li.wcb-mm-ver-tudo-item > a { display: inline-flex !important; align-items: center; gap: 6px; min-height: 32px; margin: 4px 0 0 -12px !important; padding: 0 10px !important; font-size: 13px !important; font-weight: 400 !important; color: #303030 !important; border-left: 2px solid transparent !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li.wcb-mm-ver-tudo-item > a::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li.wcb-mm-ver-tudo-item > a:is(:hover, :focus-visible) { color: #000000 !important; border-left-color: #000000 !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .sub-menu > li.wcb-mm-ver-tudo-item > a:is(:hover, :focus-visible)::after { transform: translateX(2px) rotate(45deg); }
	/* rodada 4 (dono, 13h51: "alguns itens dentro do mega estão além do traço vertical SEM um sublinhado no mouseover,
	   em salts BLVK, LQD ART, Nasty"): são os acesos pelo HOT. O hot.js põe o nome numa caixa inline-flex
	   (.wcb-hot-caixa) e o sublinhado do link não desce para dentro de caixa atômica: o filete vertical aparecia e o
	   sublinhado não (medido: link com underline, .wcb-hot-nome com none). O nome recebe o mesmo sublinhado direto. */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list a:is(:hover, :focus-visible) .wcb-hot-nome { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
	/* "Todo link de dentro dos painéis tem o mesmo hover": o título do grupo ganha o filete vertical dos itens, 2 px
	   #000 na altura da linha do título (20 px), na mesma coluna x dos filetes dos itens (o link do item tem -12 px de
	   margem do universal) */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a { position: relative !important; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a::before { content: "" !important; position: absolute !important; left: -12px; top: 0; width: 2px; height: 20px; background: transparent; }
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-mega-dropdown .oxy-slide-menu_list > li.menu-item:not(.wcb-mm-card) > a:is(:hover, :focus-visible)::before { background: #000000; }
	/* o botão de abrir submenu do slide menu não tem papel no painel aberto */
	html body #-mega-menu-76-35#-mega-menu-76-35 .oxy-slide-menu_list .oxy-slide-menu_dropdown-icon-click-area { display: none !important; }
}

/* na gaveta do celular o nível 3 já abre com "Ver tudo em <grupo>" (menu-celular.js): o item do fim da coluna sairia
   repetido */
html body #-off-canvas-310-35 li.wcb-mm-ver-tudo-item { display: none !important; }

/* gaveta, nível 3 (achado da rodada 5, 12/10): no painel em lista o menu-celular.js põe o "Ver tudo em <grupo>" dentro do
   li.wcb-mc-cabeca-li, que o identidade.css pinta de #101238, e o texto #000 ficava a 1,1:1 (borda e anel de foco também
   sumiam). O li volta à cor do painel e só a faixa do título (.wcb-mc-cabeca) segue #101238: o nível 3 fica igual ao 2,
   texto #000 sobre #829AB6 (7,25:1) com a borda #101238. A cor do li mora no identidade.css; esta linha a vence por
   especificidade. */
@media (max-width: 991px) {
	html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel > li.wcb-mc-cabeca-li { background-color: var(--wcb-e1-menu) !important; }
}

/* gaveta do celular (rodada 3, dono 11h1x: "prove os cartões na gaveta"): o cartão tinha título e linha corridos numa
   linha só, sem pictograma. Aqui o mesmo cartão do computador numa linha de 64 px (spec da designer): ladrilho de 44 com
   o pictograma, título em cima, linha de apoio embaixo. O seletor pesa mais que o `.wcb-mc-painel .menu-item > a` do
   universal (flex, 48 px, recuo 0). */
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item > a { display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 64px; padding: 10px 16px !important; color: #000000 !important; text-decoration: none !important; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item > a::before { content: ""; grid-column: 1; grid-row: 1 / 3; box-sizing: border-box; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #101238; background: none; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item > a::after { content: ""; grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: center; width: 22px; height: 20px; background: #101238; transform: translate(var(--wcb-mm-dx, 0px), var(--wcb-mm-dy, 0px)); -webkit-mask: var(--wcb-mm-ic) center / contain no-repeat; mask: var(--wcb-mm-ic) center / contain no-repeat; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item .wcb-mm-tit { grid-column: 2; align-self: end; font-size: 16px; font-weight: 700; line-height: 1.25; color: #000000; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item .wcb-mm-desc { grid-column: 2; align-self: start; font-size: 13px; font-weight: 500; line-height: 1.3; color: #303030; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card--lupa.menu-item > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/por-sabor-S1-r6.svg"); --wcb-mm-dx: -0.5px; --wcb-mm-dy: -0.5px; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card--carrinho.menu-item > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/todos-T2-r6.svg"); --wcb-mm-dx: 0px; --wcb-mm-dy: 0px; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card--mais-vendidos.menu-item > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/hot-sellers-A-r6.svg"); --wcb-mm-dx: -0.5px; --wcb-mm-dy: -2px; }
html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card--sem-nicotina.menu-item > a { --wcb-mm-ic: url("/wp-content/plugins/wcb-casa/modulos/mega-menu-b/assets/ic/sem-nicotina-A1-r6.svg"); --wcb-mm-dx: 0px; --wcb-mm-dy: -1.5px; }

/* Rodada 7 (dono, 13/10 13h25, TESTE): sem o círculo em volta do pictograma, no painel e na gaveta. A caixa de 44 px
   fica (vazia), então o desenho, o texto e o alvo do clique (o cartão inteiro) não mudam de lugar. Voltar o círculo =
   apagar a linha de baixo (no painel, desde a 7b a caixa tem 22 px: o círculo de 44 volta junto com a folha da rodada 7). */
html body #-mega-menu-76-35#-mega-menu-76-35 li.wcb-mm-card > a::before, html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.wcb-mm-card.menu-item > a::before { border-color: transparent; }

/* Rodada 7e (dono, 13/10 15h30, proposta D da designer: entregue/leitura/menu-mobile-destaque-2026-10-13/ESPEC.md; trocou
   a B da 7c): na gaveta, o abridor de grupo em 16/800, sem caixa alta, com fundo #99ACC3 (#8696B0 pressionado; texto
   #000 9,04:1); o link simples em 15/600 #000 (era 15/500 #303030, 4,55:1; agora 7,25:1). Nível 1 e cartões não mudam.
   Prefixo e !important da ESPEC: o universal.css fixa 15/500 com !important em `.wcb-mc-painel .menu-item > a` e o
   identidade.css fixa cor, peso e fundo com !important. O link atual (.wcb-mc-aceso) segue o identidade.css (700).
   Voltar = apagar este bloco. */
@media (max-width: 991px) {
	html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.menu-item.menu-item-has-children > a { font-size: 16px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: 0 !important; color: #000000 !important; line-height: 1.3 !important; background-color: #99ACC3 !important; }
	html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.menu-item.menu-item-has-children > a:active { background-color: #8696B0 !important; }
	html body #-off-canvas-310-35.wcb-mc .wcb-mc-painel li.menu-item:not(.menu-item-has-children):not(.wcb-mm-card):not(.wcb-mc-aceso) > a { font-size: 15px !important; font-weight: 600 !important; color: #000000 !important; }
}