/* Mega menu — Bestseller / Online Shop -50% (DESIGN-SPEC.md secao 5, Bloco V1 24/08/2026).
   Ancorado na barra 4 (.kb-bar--nav), que ja tem o chevron dos itens
   kb-nav-bestseller/kb-nav-sale desde o Bloco 2. Painel de largura total,
   nao por item de menu — por isso .kb-bar--nav precisa de position:relative,
   que header.css nao define (arquivo do Bloco 2 nao tocado nesta janela). */

.kb-bar--nav{
	position:relative;
}

.kb-mega{
	position:absolute;
	top:100%;
	left:0;
	right:0;
	background:var(--verde-claro-1);
	padding:28px 0;
	box-shadow:0 14px 26px rgba(0,0,0,.13);
	z-index:120;
	display:none;
}
.kb-mega.is-open{
	display:block;
}
.kb-mega__grid{
	max-width:1608px;
	margin:0 auto;
	padding:0 24px;
	display:grid;
	grid-template-columns:repeat(7,1fr);
	gap:22px;
	align-items:stretch;
}
/* Bloco L1 (25/08/2026), desvio consciente do DESIGN-SPEC.md secao 5,
   autorizado pelo responsavel: card mais denso (foto menor, botao
   compacto) para caber 7 por linha em 1608px sem apertar demais. */
.kb-mega__card{
	display:flex;
	flex-direction:column;
	gap:8px;
	text-decoration:none !important;
	color:var(--preto) !important;
}
.kb-mega__foto{
	width:100%;
	height:110px;
	background:var(--branco);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	flex:0 0 auto;
}
.kb-mega__foto img{
	max-width:100%;
	max-height:100%;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
}
.kb-mega__nome{
	font-size:13px;
	line-height:1.35;
	min-height:calc(1.35em * 2);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.kb-mega__preco{
	font-size:14px;
	font-weight:700;
	color:var(--verde);
}
.kb-mega__preco del{
	color:var(--cinza-preco);
	font-weight:400;
	font-size:0.85em;
	text-decoration:line-through;
	margin-right:4px;
}
.kb-mega__preco ins{
	text-decoration:none;
}
/* Linha fiscal obrigatoria (kebike-pangv-display injeta a referencia de
   30 dias dentro do mesmo woocommerce_get_price_html() — NUNCA removida
   nem escondida, so reduzida a uma segunda linha compacta, igual ao
   padrao ja usado na grade classica/blockified em custom_css 170). */
.kb-mega__preco .woocommerce-price-suffix{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:11px !important;
	font-weight:400;
	color:var(--verde) !important;
	margin-top:2px;
}
.kb-mega__botao{
	align-self:center;
	margin-top:auto;
	background:var(--verde);
	color:var(--branco);
	font-size:12px;
	font-weight:700;
	padding:8px 16px;
	border-radius:var(--raio-botao);
	text-align:center;
}

/* Toggle por clique/teclado — chevron ja existe no header (Bloco 2); este
   botao fica invisivel por cima dele, mesma area de clique, so para dar um
   alvo acessivel por teclado/toque independente do hover. */
.kb-mega-toggle{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	background:transparent;
	border:0;
	padding:0;
	margin:0;
	cursor:pointer;
	opacity:0;
}
.kb-bar--nav .wp-block-navigation-item.kb-nav-bestseller,
.kb-bar--nav .wp-block-navigation-item.kb-nav-sale,
.kb-bar--nav .wp-block-navigation-item.kb-nav-kategorie{
	position:relative;
}

/* ===== Painel Kategorie — lista vertical, ancorada no proprio item
   (nao na barra inteira), Bloco L1 25/08/2026 ===== */
.kb-mega--narrow{
	left:0;
	right:auto;
	width:auto;
	min-width:240px;
	padding:10px 0;
}
.kb-mega__list{
	display:flex;
	flex-direction:column;
	margin:0;
	padding:0;
	list-style:none;
}
.kb-mega__list li{
	margin:0;
}
.kb-mega__list a{
	display:block;
	padding:10px 20px;
	font-size:14px;
	font-weight:600;
	color:var(--preto) !important;
	text-decoration:none !important;
	white-space:nowrap;
}
.kb-mega__list a:hover{
	background:var(--verde-claro-2);
}

/* Abaixo de 780px a barra 4 inteira some (header.css, Bloco 2) — o painel
   nunca precisa de tratamento responsivo proprio. */