/* 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: 1px; }
/* hover com fundo arredondado, igual ao N2/Petz; padding+margin negativa alinham o texto com o cabecalho */
.czar-petz-n3-list a { display: block; padding: 5px 10px; border-radius: 9px; color: #444; text-decoration: none; font-size: 14px; line-height: 1.3; }
.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; }
}