/* KEBIKE — painel lateral do hambúrguer (DESIGN-SPEC.md secao 6, com
   emenda de 25/08/2026: logomarca no topo do painel, Bloco L1E). Reestiliza
   o overlay nativo do core/navigation usado na barra 3 (overlayMenu:
   "always") -- NUNCA a barra 4 (overlayMenu:"never", sem esse wrapper,
   ver includes/header.php). Nenhum seletor abaixo tem generico o bastante
   para casar com a barra 4. */

/* Camada 1: o proprio overlay nativo vira o "scrim" escuro cobrindo o
   resto da pagina -- ja e position:fixed e cobre a viewport inteira. */
.wp-block-navigation__responsive-container.is-menu-open{
	background:rgba(0,0,0,.5) !important;
	padding:0 !important;
	align-items:stretch !important;
	justify-content:flex-start !important;
}

/* Camada 2: o wrapper ".responsive-close" (ja fixed, ja cobre tudo) vira
   o PAINEL de 405px, ancorado a esquerda, com o fundo verde-claro-1 do
   §6. "max-width:90vw" evita que o painel fique mais largo que a tela em
   viewports muito estreitos (nao especificado no §6, guarda defensiva). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
	position:fixed;
	inset:0 auto 0 0;
	width:405px;
	max-width:90vw;
	height:100%;
	background:var(--verde-claro-1);
	overflow-y:auto;
	box-sizing:border-box;
	padding:24px;
}
.wp-block-navigation__responsive-dialog{
	position:relative;
	width:100%;
	max-width:none;
	height:auto;
	margin:0;
	padding:0 !important;
	background:transparent;
}
.wp-block-navigation__responsive-dialog > br{
	display:none;
}
.wp-block-navigation__responsive-container-content{
	width:100%;
	padding:0 !important;
	margin:0;
	display:block !important;
}
.wp-block-navigation__responsive-container-content > p:empty{
	display:none;
}

/* Botao de fechar (X), reancorado no canto superior direito do PAINEL —
   antes ficava no canto da viewport inteira, porque o dialogo nativo nao
   tinha largura propria. */
.wp-block-navigation__responsive-container-close{
	position:absolute;
	top:24px;
	right:24px;
	z-index:2;
	color:var(--preto);
}

/* Logo + busca injetados por menu-panel.js, antes da lista de itens. */
.kb-menu-panel__logo{
	display:block;
	margin:0 0 28px;
	line-height:0;
}
.kb-menu-panel__logo img{
	height:48px;
	width:auto;
	max-width:none;
}
.kb-menu-panel__search{
	margin:0 0 20px;
}
.kb-menu-panel__search .kb-search{
	height:48px;
	max-width:none;
}

/* Lista de itens — §6: 15px/700 caixa alta, padding 20px 2px, divisoria
   inferior 1px --verde-borda. */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container{
	display:block;
	margin:0;
	padding:0;
	list-style:none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
	display:block;
	border-bottom:1px solid var(--verde-borda);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	/* !important: o core tem ".is-menu-open:where(...) .responsive-
	   container-content .navigation-item__content{padding:0}" -- o
	   ":where()" nao conta, mas a classe extra ".responsive-container-
	   content" no meio da cadeia da a essa regra mais especificidade
	   (0,4,0) que a nossa (0,3,0) mesmo sem "!important" nenhum. */
	padding:20px 2px !important;
	font-family:var(--fonte-base);
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	color:var(--preto);
}

/* Chevron dos itens com submenu (so "Kategorie", injetado pelo JS como
   botao em vez de link -- ver menu-panel.js). Gira 180deg quando aberto. */
.kb-menu-panel__accordion-toggle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	width:100%;
	padding:20px 2px;
	background:transparent;
	border:0;
	cursor:pointer;
	font-family:var(--fonte-base);
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	color:var(--preto);
	text-align:left;
}
.kb-menu-panel__chevron{
	flex:0 0 auto;
	font-size:11px;
	transition:transform 150ms ease;
}
.kb-menu-panel__accordion-toggle[aria-expanded="true"] .kb-menu-panel__chevron{
	transform:rotate(180deg);
}
.kb-menu-panel__sublist{
	list-style:none;
	margin:0;
	padding:0 0 12px 14px;
}
.kb-menu-panel__sublist[hidden]{
	display:none;
}
.kb-menu-panel__sublist li{
	border-bottom:0;
}
.kb-menu-panel__sublist a{
	display:block;
	padding:12px 2px;
	font-family:var(--fonte-base);
	font-size:14px;
	font-weight:500;
	text-transform:none;
	letter-spacing:normal;
	color:var(--cinza-texto);
}
.kb-menu-panel__sublist a:hover{
	color:var(--verde);
}

@media (max-width:520px){
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
		width:100%;
		max-width:100%;
	}
}