/* 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; }
.wd-page-content::before { content: ""; position: fixed; inset: 0; background: rgba(29, 29, 29, .6); pointer-events: none; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .15s ease; }
body:has(.whb-header .menu-item.menu-mega-dropdown:hover) .wd-page-content::before { opacity: 1; visibility: visible; }

/* 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); }
.czar-petz-n2 { flex: 0 0 322px; list-style: none; margin: 0; padding: 8px 0; }
.czar-petz-n2-item { position: static; }
.czar-petz-n2-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 22px; color: #2a2a2a; font-weight: 500; font-size: 14px; text-decoration: none; line-height: 1.3; }
.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); }
.czar-petz-n2-item:hover > .czar-petz-n2-link { background: #f3f0ff; color: var(--wd-primary-color); }
.czar-petz-n2-item:hover > .czar-petz-n2-link::after { border-color: var(--wd-primary-color); }

/* N3: painel branco flutuante a direita (Petz ~612px), so no hover 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; }
.czar-petz-n2-item:hover > .czar-petz-n3 { display: block; }
.czar-petz-n3-head { display: inline-block; margin: 0 0 16px; font-size: 15px; font-weight: 700; color: #2a2a2a; text-decoration: none; }
.czar-petz-n3-list { list-style: none; margin: 0 0 16px; padding: 0; columns: 2; column-gap: 30px; }
.czar-petz-n3-list li { break-inside: avoid; margin-bottom: 11px; }
.czar-petz-n3-list a { color: #666; text-decoration: none; font-size: 13px; }
.czar-petz-n3-list a:hover { 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; }
}