/* KEBIKE — header de 3 barras (DESIGN-SPEC.md secao 3). Bloco 2, 23/08/2026.
   Consome os tokens da Secao 1 do DESIGN-SPEC (segundo :root do custom_css
   170, ainda nao usado por nenhuma outra regra ate este bloco) — nunca os
   --kb-* antigos. As regras legadas de header/nav em custom_css 170 foram
   escopadas com ":not(.kb-header *)" para nao competir com as regras
   abaixo (custom_css imprime depois deste arquivo no wp_head).
   Bloco L1F (26/08/2026): a barra utilitaria (Rechtliches no header) foi
   removida -- os seis destinos ja existiam no rodape (coluna Rechtliches/
   Service) e essa era a unica casa deles. Numeracao das barras restantes
   renumerada de 1/3/4 para 1/2/3 nos comentarios abaixo. */

.kb-header,
.kb-header *{
	box-sizing:border-box;
}

.kb-header{
	font-family:var(--fonte-base);
	color:var(--preto);
}

.kb-header a{
	text-decoration:none;
	color:inherit;
}

.kb-bar__inner{
	max-width:1608px;
	margin:0 auto;
	padding:0 24px;
	height:100%;
	display:flex;
	align-items:center;
}

/* ===== Barra 1 — aviso, 52px ===== */
.kb-bar--announcement{
	height:52px;
	background:var(--verde);
	color:var(--branco);
}
.kb-bar--announcement .kb-bar__inner{
	justify-content:space-between;
	gap:16px;
}
.kb-announcement__arrow{
	background:transparent;
	border:0;
	color:var(--branco);
	font-size:22px;
	line-height:1;
	cursor:pointer;
	padding:4px 8px;
	opacity:0.85;
}
.kb-announcement__arrow:hover{ opacity:1; }
.kb-announcement__center{
	display:flex;
	align-items:center;
	gap:18px;
	flex:1;
	justify-content:center;
	min-width:0;
}
/* Bloco L1 (25/08/2026): as 4 mensagens ocupam a MESMA celula de grid
   (grid-area:1/1) em vez de alternar display:none/inline — o container
   passa a ter tamanho fixo (o maior texto entre as 4), entao trocar a
   mensagem ativa nunca desloca o pill ao lado nem o centro da barra,
   independente da causa medida do defeito original (ver RESULTADO-L1). */
.kb-announcement__messages{
	display:grid;
	margin-top:4.3px; /* corrige diferenca de metrica de fonte com o pill ao lado (13px+padding vs 14px), medido em runtime — ver RESULTADO-L1 */
	font-size:14px;
	font-weight:700;
	text-align:center;
	white-space:nowrap;
}
.kb-announcement__msg{
	grid-area:1/1;
	opacity:0;
	visibility:hidden;
	transition:opacity 200ms ease;
}
.kb-announcement__msg.is-active{
	opacity:1;
	visibility:visible;
}
/* Rede de seguranca: qualquer <br> que algum filtro de conteudo venha a
   reinserir entre os 4 <span> (ver comentario em header.php) fica fora do
   fluxo do grid, em vez de virar uma linha implicita propria. */
.kb-announcement__messages br{
	display:none;
}
.kb-bar--announcement .kb-announcement__pill{
	flex:0 0 auto;
	background:var(--branco);
	color:var(--verde);
	font-size:13px;
	font-weight:700;
	padding:7px 18px;
	border-radius:var(--raio-pill);
	white-space:nowrap;
}

/* ===== Barra 2 — header, 105px ===== */
.kb-bar--main{
	height:105px;
	background:var(--verde-claro-1);
}
.kb-bar--main .kb-bar__inner{
	gap:28px;
}
/* Bloco L1E (25/08/2026), achado do E5: um filtro tipo wpautop() (a mesma
   causa ja documentada na barra de aviso e nos 3 icones, Bloco L1) insere
   um <p></p> vazio como QUINTO filho de ".kb-bar__inner" depois de
   ".kb-icons" -- confirmado comparando a saida crua de
   kebike_render_header() com o HTML final da pagina. Vazio, ele nao
   aparece visualmente, mas CONTA para o "gap:28px" do flex acima, tirando
   28px que deveriam ir para o espaco entre logo e busca (D-05, achado do
   responsavel: metade direita da barra vazia). Mesma correcao das outras
   duas ocorrencias: neutralizar por CSS em vez de brigar com o pipeline de
   blocos. */
.kb-bar--main .kb-bar__inner > p:empty{
	display:none;
}
.kb-search{
	margin-left:auto;
}

.kb-nav-toggle-slot .wp-block-navigation{
	font-family:var(--fonte-base);
}
.kb-nav-toggle-slot .wp-block-navigation__responsive-container-open{
	width:27px;
	height:27px;
	padding:0;
	color:var(--preto);
}
.kb-nav-toggle-slot .wp-block-navigation__responsive-container-open svg{
	width:27px;
	height:27px;
}
/* A regra de fundo do overlay que vivia aqui (Bloco 2, 23/08/2026) foi
   substituida pelo painel lateral do Bloco L1E -- ver assets/menu-
   panel.css, que trata ".is-menu-open" como o SCRIM escuro e
   ".responsive-close" como o painel verde-claro-1 de 405px (DESIGN-SPEC
   secao 6). Removida em vez de sobrescrita com especificidade maior:
   as duas regras competindo pelo mesmo "!important" e a mesma
   propriedade era exatamente o tipo de duplicidade que a regra 14 do
   projeto pede para evitar. */

.kb-logo{
	flex:0 0 auto;
	display:block;
	line-height:0;
}
.kb-logo__img{
	height:62px;
	width:99px;
	max-width:none;
	display:block;
}

.kb-search{
	flex:1 1 auto;
	max-width:640px;
	min-width:0;
	display:flex;
	align-items:center;
	height:52px;
	border-radius:26px;
	background:var(--verde-claro-2);
	overflow:hidden;
}
.kb-search__cat{
	flex:0 0 290px;
	min-width:0;
	height:100%;
	border:0;
	background:transparent;
	padding:0 16px;
	font-size:14px;
	color:var(--preto);
	font-family:var(--fonte-base);
	appearance:none;
	-webkit-appearance:none;
}
.kb-search__divider{
	flex:0 0 1px;
	width:1px;
	height:26px;
	background:#cfe0d4;
}
.kb-search__input{
	flex:1 1 auto;
	min-width:0;
	height:100%;
	border:0;
	background:transparent;
	padding:0 16px;
	font-size:14px;
	font-family:var(--fonte-base);
	outline:none;
}
.kb-search__input:focus-visible{
	outline:2px solid var(--verde);
	outline-offset:-2px;
}
.kb-search__submit{
	flex:0 0 56px;
	width:56px;
	height:100%;
	border:0;
	background:transparent;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--preto);
	cursor:pointer;
}

.kb-icons{
	flex:0 0 auto;
	display:flex;
	align-items:flex-start;
	gap:30px;
}
.kb-icon{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
}
.kb-icon__svg{
	width:26px;
	height:26px;
	display:block;
}
.kb-icon__label{
	font-size:13px;
	color:var(--preto);
}

/* Carrinho fica em linha (glifo + rotulo/valor empilhados ao lado), mas
   alinhado pelo topo do glifo com os dois irmaos em coluna acima — os
   tres ".kb-icon__glyph" tem a mesma altura (26px, mesmo svg) e o
   mesmo topo dentro de ".kb-icons" (Bloco L1, 25/08/2026). */
.kb-icon--cart{
	flex-direction:row;
	align-items:flex-start;
	gap:10px;
}
.kb-icon__glyph{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	height:26px;
}
.kb-cart-badge{
	position:absolute;
	top:-7px;
	right:-11px;
	pointer-events:none;
}
.kb-cart-badge__inner{
	display:flex;
	align-items:center;
	justify-content:center;
	width:19px;
	height:19px;
	border-radius:50%;
	background:var(--verde);
	color:var(--branco);
	font-size:11px;
	font-weight:700;
	line-height:1;
}
.kb-cart-text{
	display:flex;
	flex-direction:column;
	line-height:1.3;
}

/* Badge do icone Favoriten (Bloco 3B, 23/08/2026) — mesma metrica do
   kb-cart-badge acima (DESIGN-SPEC Secao 3, linha do badge de contador),
   classe propria porque os dois icones convivem na mesma barra. */
.kb-fav-badge{
	position:absolute;
	top:-7px;
	right:-11px;
	pointer-events:none;
}
.kb-fav-badge__inner{
	display:flex;
	align-items:center;
	justify-content:center;
	width:19px;
	height:19px;
	border-radius:50%;
	background:var(--verde);
	color:var(--branco);
	font-size:11px;
	font-weight:700;
	line-height:1;
}
.kb-cart-text__label{
	font-size:14px;
	color:var(--cinza-texto);
}
.kb-cart-text__value{
	font-size:15px;
	font-weight:700;
	color:var(--preto);
}

/* ===== Barra 3 — nav, 62px ===== */
.kb-bar--nav{
	height:62px;
	background:var(--verde-claro-1);
	border-top:1px solid var(--verde-nav-borda);
}
.kb-bar--nav .wp-block-navigation{
	width:100%;
	font-family:var(--fonte-base);
}
.kb-bar--nav .wp-block-navigation__container{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
}
.kb-bar--nav .wp-block-navigation-item__content{
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	color:var(--preto);
	padding:10px 16px;
	white-space:nowrap;
}
.kb-bar--nav .wp-block-navigation-item.kb-nav-bestseller{
	margin-left:auto;
}
.kb-bar--nav .kb-nav-bestseller > .wp-block-navigation-item__content::after,
.kb-bar--nav .kb-nav-sale > .wp-block-navigation-item__content::after,
.kb-bar--nav .kb-nav-kategorie > .wp-block-navigation-item__content::after{
	content:"\25BE";
	margin-left:6px;
	font-size:11px;
}

/* ===== Responsivo — regra aprovada 23/08/2026 (silente no DESIGN-SPEC) =====
   Abaixo de 780px: busca vai para largura total abaixo do logo; nav
   (barra 3) some, resta o hamburguer da barra 2. A barra utilitaria que
   também sumia aqui foi removida de vez no F1 (nao existe mais no header). */
@media (max-width: 780px){
	.kb-bar--nav{
		display:none;
	}
	.kb-bar--main{
		height:auto;
	}
	.kb-bar--main .kb-bar__inner{
		flex-wrap:wrap;
		row-gap:12px;
		padding-top:12px;
		padding-bottom:12px;
	}
	.kb-search{
		order:3;
		flex:0 0 100%;
		max-width:none;
	}
	.kb-icons{
		margin-left:auto;
	}
}

/* ===== L1F (26/08/2026) — header fixo no desktop =====
   Decisao do responsavel, 26/08/2026 (nao esta no DESIGN-SPEC.md — a unica
   ocorrencia de "sticky" ali e o indice das paginas legais). Emenda por
   acrescimo, ver DESIGN-SPEC.md secao 17.
   Armadilha medida em runtime antes de fechar este bloco: "position:sticky"
   no PROPRIO ".kb-header" nao gruda em nada — o "containing block" de um
   elemento sticky e o bloco do PAI, e o pai aqui e
   "header.wp-block-template-part" (marcado pelo core do WordPress para o
   template part do cabecalho), que so tem 219px de altura (embrulha so o
   header, nada mais) — sem sobra de altura, o filho sticky nunca tem onde
   "flutuar" e rola junto com o pai desde scrollY=0 (medido: headerTop ==
   -scrollY em todo ponto testado). A correcao e prender o PROPRIO
   "header.wp-block-template-part", cujo pai e ".wp-site-blocks" — esse sim
   com a altura da pagina inteira, dando ao sticky a sobra que falta.
   z-index:40 fica acima do conteudo normal (nao posicionado, portanto
   sempre pintado atras de qualquer elemento posicionado, mesmo sem
   z-index) e abaixo do painel do hamburguer (menu-panel.css/WordPress
   core, dezenas de milhares) e do banner de consentimento (kebike-
   consent.php, 99999) — os dois continuam por cima. */
@media (min-width: 783px){
	.wp-site-blocks > header.wp-block-template-part{
		position:sticky;
		top:0;
		z-index:40;
	}
	/* Skip-link nativo do WordPress ("Zum Inhalt springen") aponta para
	   <main id="wp--skip-link--target">. Sem isto, o alvo do salto fica
	   exatamente sob o header preso (medido: main.top vira 0, escondido
	   atras dos 219px) -- unica ancora de pagina encontrada nas 6 paginas
	   do funil (nenhuma outra "a[href^='#']" alem desta, propria do core). */
	#wp--skip-link--target{
		scroll-margin-top:219px;
	}
}

/* ===== F2-bis (26/08/2026) — NAO APLICADO =====
   Porta de medicao exigida antes de escrever qualquer CSS: ".kb-bar--main"
   a 375px mede 248,59px de altura real (nao os "≤140px" que o bloco
   assumia) -- ja incluia campo de busca em linha propria + wrap dos 3
   icones antes desta janela, comportamento preexistente, nao introduzido
   aqui. 248,59px > 140px: pelo criterio do proprio bloco ("pare este sub-
   bloco e reporte o numero"), a barra principal NAO foi presa no mobile.
   Decisao de prender mais que 140px de tela volta para o responsavel --
   ver RESULTADO-L1F.md. Nenhuma outra regra deste bloco (F1, F3, F4) foi
   afetada por este recuo. */