/* CzarCommerce #84 — Mega-menu petz-style: abertura instantânea (sem delay/animação).
 * O dropdown do header herdado abre por :hover com transição de opacidade/visibilidade.
 * Aqui zeramos a duração/atraso para o menu aparecer imediato ao passar o mouse,
 * mantendo o layout em colunas de texto (sem imagens) já definido nos cms_blocks. */

.whb-header .wd-dropdown-menu,
.whb-header .wd-dropdown,
.whb-header .menu-item-has-children > .wd-dropdown-menu {
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	animation-duration: 0s !important;
	animation-delay: 0s !important;
}

/* Colunas do mega-menu: respiro e quebra limpa quando há muitas categorias. */
.whb-header .wd-dropdown-menu .wp-block-wd-row {
	row-gap: 10px;
}

.whb-header .wd-dropdown-menu .wp-block-wd-menu-list {
	margin-bottom: 18px;
	break-inside: avoid;
}

/* CzarCommerce — Mega-menu estilo Petz (N1->N2->N3, CSS puro, sem JS).
 * Painel CONTIDO (nao full-width): coluna N2 (322px) + painel N3 flutuante (612px) no hover.
 * Larguras espelhadas do petz.com.br. O fundo da pagina ESCURECE quando o menu abre; o
 * header permanece claro (overlay so no conteudo). */

/* o dropdown full-width do WoodMart vira transparente: o painel branco e o .czar-petz */
.whb-header .wd-dropdown-menu:has(.czar-petz) { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }

/* overlay escurecendo o conteudo (abaixo do header) com o mega-menu aberto */
.whb-header { position: relative; z-index: 120; }
/* Fade lento (0.6s ease-out, igual ao Petz) — ao alternar entre N1 o escuro mal
 * decai antes de re-escurecer no proximo, entao nao "pisca"; e ao sair do menu o
 * dark->claro e suave. Sem visibility (cortaria o fade-out); pointer-events:none ja
 * garante que opacity:0 nao bloqueia cliques. */
.wd-page-content::before { content: ""; position: fixed; inset: 0; background: rgba(29, 29, 29, .64); pointer-events: none; z-index: 50; opacity: 0; transition: opacity .6s ease-out; }
body:has(.whb-header .menu-item.menu-mega-dropdown:hover) .wd-page-content::before { opacity: 1; }

/* coluna N2 (Petz ~322px) */
.whb-header .wd-dropdown-menu .czar-petz { position: relative; display: flex; width: 322px; min-height: 360px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .16); }
/* com o N3 aberto, o canto inferior DIREITO vira reto (casa com o painel N3); o
 * esquerdo continua arredondado. Sem N3, mantem os dois arredondados (regra base). */
.whb-header .wd-dropdown-menu .czar-petz.czar-petz-js:has(.czar-petz-n2-item.is-active),
.whb-header .wd-dropdown-menu .czar-petz:not(.czar-petz-js):has(.czar-petz-n2-item:hover) { border-bottom-right-radius: 0; }
.czar-petz-n2 { flex: 0 0 322px; list-style: none; margin: 0; padding: 8px 10px; }
.czar-petz-n2-item { position: static; }
.czar-petz-n2-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; border-radius: 10px; color: #1d1d1d; font-weight: 500; font-size: 15px; text-decoration: none; line-height: 1.35; }
.czar-petz-n2-link::after { content: ""; flex: none; width: 7px; height: 7px; border-top: 2px solid #c2c2c2; border-right: 2px solid #c2c2c2; transform: rotate(45deg); }
/* destaque do N2: :hover da feedback instantaneo; .is-active (JS) mantem o ativo */
.czar-petz-n2-item:hover > .czar-petz-n2-link,
.czar-petz.czar-petz-js .czar-petz-n2-item.is-active > .czar-petz-n2-link { background: #f3f0ff; color: var(--wd-primary-color); }
.czar-petz-n2-item:hover > .czar-petz-n2-link::after,
.czar-petz.czar-petz-js .czar-petz-n2-item.is-active > .czar-petz-n2-link::after { border-color: var(--wd-primary-color); }

/* N3: painel branco flutuante a direita (Petz ~612px), so no hover/ativo do N2 (sem N3 default) */
.czar-petz-n3 { display: none; position: absolute; left: 322px; top: 0; width: 612px; min-height: 100%; padding: 22px 28px; background: #fff; box-shadow: 14px 16px 40px rgba(0, 0, 0, .10); border-left: 1px solid #f0f0f0; border-radius: 0 0 10px 0; }
/* sem JS (fallback): :hover puro. Com JS: .is-active (sem piscar ao trocar de N2). */
.czar-petz:not(.czar-petz-js) .czar-petz-n2-item:hover > .czar-petz-n3 { display: block; }
.czar-petz.czar-petz-js .czar-petz-n2-item.is-active > .czar-petz-n3 { display: block; }
.czar-petz-n3-head { display: inline-block; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #1d1d1d; text-decoration: none; }
.czar-petz-n3-list { list-style: none; margin: 0 -10px 14px; padding: 0; columns: 2; column-gap: 16px; }
.czar-petz-n3-list li { break-inside: avoid; margin-bottom: 0; }
/* hover com fundo arredondado, igual ao N2/Petz; padding+margin negativa alinham o texto com o cabecalho.
 * Metrica vertical igual a do N2 (font 15 + padding 8 + line-height 1.35). */
.czar-petz-n3-list a { display: block; padding: 8px 10px; border-radius: 9px; color: #1d1d1d; text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.35; }
.czar-petz-n3-list a:hover { background: #f3f0ff; color: var(--wd-primary-color); }
.czar-petz-vertudo { display: inline-block; font-weight: 600; font-size: 13px; color: var(--wd-primary-color); text-decoration: none; }

/* MOBILE/TABLET: vira lista vertical empilhada (sem overlay, sem flutuante); N3 indentado */
@media (max-width: 1024.98px) {
	.wd-page-content::before { display: none !important; }
	.whb-header .wd-dropdown-menu .czar-petz { display: block; width: auto; min-height: 0; box-shadow: none; border-radius: 0; }
	.czar-petz-n2 { flex: none; padding: 0; }
	.czar-petz-n2-link { padding: 10px 16px; }
	.czar-petz-n2-link::after { display: none; }
	.czar-petz-n3 { position: static; display: block !important; width: auto; min-height: 0; padding: 0 0 10px 28px; box-shadow: none; border: 0; }
	.czar-petz-n3-head { display: none; }
	.czar-petz-n3-list { columns: 1; margin: 0; }
	.czar-petz-n3-list li { margin-bottom: 5px; }
	.czar-petz-vertudo { display: none; }
}

/* ===== Drawer mobile (aba CATEGORIAS) — normalizacao visual (jun/2026) ===== */
/* 1) sem MAIUSCULO forcado: mostra o titulo real (Petiscos e Ossos, Casa e Jardim) */
.mobile-categories-menu a,
.mobile-categories-menu .wd-drilldown-back > a { text-transform: none !important; }
/* fonte um pouco maior (13px -> 15px) p/ legibilidade no mobile (N1/N2/N3 + Voltar) */
.mobile-categories-menu a { font-size: 15px !important; }
/* peso normal (sem negrito 600 -> 400) + linha enxuta + altura menor (50->42px tap-friendly)
 * + padding lateral menor: o item mais longo ("Adestramento e Comportamento", ~229px) passa a
 * caber em 1 linha. Tudo igual ao espirito do Petz. */
.mobile-categories-menu a { font-weight: 400 !important; padding: 4px 12px 4px 16px !important; line-height: 1.3 !important; min-height: 42px !important; }
/* coluna da setinha menor (50->36px) -> mais espaco horizontal pro texto (sem quebra) */
.mobile-categories-menu .wd-nav-opener { width: 36px !important; }
/* drawer um pouco mais largo (Petz ~332px), com teto p/ telas estreitas */
.mobile-nav { width: min(88vw, 332px) !important; }
/* 3) sem linhas tipo "tabela": separadores horizontais (border do link) e a linha
 *    vertical da coluna (box-shadow -1px do submenu) saem. */
.mobile-categories-menu a,
.mobile-categories-menu .wd-nav-opener { border: 0 !important; }
.mobile-categories-menu ul { box-shadow: none !important; }
/* 2) botao "Voltar": fundo cinza claro + negrito; o texto vira o nome da categoria
 *    atual (categoria pai dos itens do painel) via czar-petz-mobile.js. A seta "<"
 *    e o .wd-nav-opener herdado do WoodMart. */
.mobile-categories-menu .wd-drilldown-back { background: #f4f4f5; }
.mobile-categories-menu .wd-drilldown-back > a { font-weight: 700 !important; color: #1d1d1d; }
/* itens "Ver tudo em…/Tudo para…" (classe czar-seeall) em azul do tema */
.mobile-categories-menu li.czar-seeall > a { color: var(--wd-primary-color) !important; }

/* ===== N1 (barra do mega-menu) em laptops 1025–1440px ===== */
/* Em 1366x768 os 8 itens (Cães…Marcas) + gap 40px somavam 902px num espaço de ~871px,
 * jogando "Marcas" pra uma 2a linha. Reduz o gap entre itens nessas larguras pra caber
 * em 1 linha. Acima de 1440 mantem o respiro original. */
@media (min-width: 1025px) and (max-width: 1440px) {
	.whb-header .wd-nav-main { column-gap: 24px !important; }
}