.cb-lingua-tendina{display:none}
/*
 * Fase 1 (fondamenta design): l'aspetto di header/shipping-bar/menu viene da base.css
 * (Fase 1, invariato — vedi css/base.css), caricato prima di questo foglio. Qui restano
 * solo le "colle" che base.css non può prevedere perché il prototipo è statico e questo
 * sito è dinamico:
 *
 * 1) il menu vero (wp_nav_menu) esce come <ul class="cb-menu__list"><li><a>...</a></li>…
 *    — il prototipo aveva <a> diretti dentro .nav-inner, senza <ul>/<li>. ".main-nav a"
 *    di base.css continua a funzionare invariata (selettore discendente, non diretto);
 *    qui serve solo far "sparire" la scatola <ul> (display:contents) perché .nav-inner
 *    (flex/grid) tratti ogni <li> come items al posto degli <a>.
 * 2) il menu 52 ha una voce con sottomenu (PRODUKTE, 7 figli) che il prototipo — piatto,
 *    senza sottomenu — non mostra mai: base.css non ha nessuna regola per un <ul> annidato.
 *    Sotto, una tendina minima con gli stessi toni del design (var(--white)/var(--line)/
 *    ombra coerente con dialog::backdrop di base.css), aperta a hover/focus da tastiera;
 *    su telefono resta semplicemente in linea, senza tendina.
 * 3) apertura menu telefono e ricerca telefono: il prototipo le pilota con classi
 *    (.main-nav.is-open, .header-main.search-expanded) aggiunte da app.js. Qui niente
 *    JavaScript nuovo: due checkbox nascoste (tecnica già in uso in questo tema prima di
 *    questa fase, Task 3) ottengono lo stesso risultato solo in CSS.
 */

.cb-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.icon-button.mobile-menu {
	cursor: pointer;
}

/* focus da tastiera visibile sulla checkbox nascosta (:has, non serve adiacenza nel DOM) */
.site-header:has(#cb-menu-toggle:focus-visible) .mobile-menu {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

@media (max-width: 850px) {
	#cb-menu-toggle:checked ~ .main-nav {
		display: block;
	}

}

/* Punto 1: il contenitore <ul> del menu vero non deve contare per il layout di .nav-inner */
.main-nav .cb-menu__list {
	display: contents;
}

.main-nav .cb-menu__list > li {
	list-style: none;
	position: relative;
}

/* Punto 2: sottomenu (solo "PRODUKTE" oggi) — tendina desktop, elenco in linea su telefono */
.main-nav .cb-menu__list .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: .5rem 0;
}

.main-nav .cb-menu__list > li:hover > .sub-menu,
.main-nav .cb-menu__list > li:focus-within > .sub-menu {
	display: flex;
	flex-direction: column;
}

@media (min-width: 851px) {
	.main-nav .cb-menu__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 12rem;
		background: var(--white);
		border: 1px solid var(--line);
		border-radius: 3px;
		box-shadow: 0 6px 16px -8px rgba(20, 17, 15, .35);
		z-index: 20;
	}

	.main-nav .cb-menu__list .sub-menu a {
		padding-inline: 16px;
		white-space: nowrap;
	}
}

@media (max-width: 850px) {
	.main-nav .cb-menu__list .sub-menu {
		padding-inline-start: 16px;
	}
}

/*
 * Fedeltà 4 (§2.1/§2.4, padding bottoni icona): ".icon-button"/".cart-toggle"
 * di base.css non impostano un padding proprio (box fisso 48x48, icona
 * centrata a prescindere) — nel prototipo il valore che ne risulta è quello
 * di default del browser per <button> (1px 6px). Qui il bottone ricerca è un
 * <button> reale ma main.min.css di GeneratePress applica
 * "button{padding:10px 20px}" (elemento, specificità 0,0,1): batte comunque
 * perché base.css non dichiara nulla per quella proprietà. A parità di
 * box (48x48, flex centrato) non cambia nulla a vista, ma per fedeltà allo
 * stato misurato del prototipo lo fissiamo esplicitamente.
 */
.icon-button,
.cart-toggle {
	padding: 1px 6px;
}

/*
 * Fedeltà 4 (§2.4 header, divisore nav): il prototipo ha
 * "<span class="nav-divider">" come settimo figlio flex di .nav-inner, fra
 * "Bohnen & Gemahlen" e "Über uns" (vedi css/base.css .nav-divider). Con
 * wp_nav_menu() non si può inserire un nodo estraneo fra due <li> senza un
 * Walker dedicato o una voce fittizia in wp-admin: stesso segno visivo (linea
 * verticale var(--line), alta 20px, margine 4px) reso con uno pseudo-elemento
 * davanti al link "Über uns", scelto per href (stabile — punta sempre a
 * /uber-uns/) invece che per posizione, cosà regge anche se l'ordine dei menu
 * cambia in wp-admin.
 */
/* 21.09.2026 — lo pseudo-elemento ::before di prima e' stato TOLTO: dal
   19.09 il divisore e' un vero <li class="nav-divider"> (functions.php,
   filtro wp_nav_menu_items) e i due insieme davano due linee parallele
   (collaudo C016). */

/* ================= Header mobile V3 + desktop V1, 20.09.2026 =================
 * Copia di "DESIGN BY CODEX/assets/site-header.css". Si sovrappone alle regole
 * qui sopra tramite ".billo-header"/".billo-shipping", che inc/header.php e
 * inc/promo-bar.php aggiungono al markup: cosi' il disegno precedente resta
 * leggibile e la differenza e' tutta in questo blocco.
 * Il vecchio interruttore della ricerca su telefono non c'e' piu' nel markup
 * (la ricerca e' sempre visibile), quindi la prima riga del prototipo, che lo
 * nascondeva, qui non serve — tolta.
 */
/* Mobile header V3: original assets, permanent search, no duplicated search trigger. */
.billo-header .bh-menu-label, .billo-header .bh-account-mobile, .billo-header .bh-cart-label { display: none; }
.billo-header .header-main > .brand { order: 0; }
.billo-header .header-main > .search-form { order: 1; }
.billo-header .header-main > .header-actions { order: 2; }
/* Approved desktop concept: a balanced search-led grid and grouped navigation. */
@media(min-width:851px) {
  .billo-shipping { min-height:28px; padding:4px max(32px,calc((100% - 1280px)/2)); font-size:12px; line-height:20px; letter-spacing:0; }
  .billo-shipping svg { width:17px; height:17px; }
  .site-header.billo-header { background:#fff; }
  .site-header.billo-header .header-main { display:grid; grid-template-columns:clamp(180px,18vw,248px) minmax(0,1fr) auto; gap:clamp(24px,6.1vw,88px); height:96px; width:calc(100% - 64px); max-width:1280px; margin-inline:auto; padding:0; }
  .site-header.billo-header .brand { width:100%; }
  .site-header.billo-header .brand img { width:100%; height:auto; }
  .site-header.billo-header .header-main .search-form { width:100%; max-width:none; min-width:0; height:48px; margin:0; padding:0; display:flex; align-items:center; background:var(--cream,#faf7f2); border:1px solid var(--line,#e6ded4); border-radius:4px; }
  .site-header.billo-header .search-form input { flex:1; min-width:0; width:100%; padding:12px 18px; font-size:16px; height:46px; border:0; background:transparent; }
  .site-header.billo-header .search-form:focus-within { outline:2px solid var(--blue,#003e78); outline-offset:3px; }
  .site-header.billo-header .search-form input:focus { outline:none; box-shadow:none; }
  .site-header.billo-header .search-form button { display:flex; align-items:center; justify-content:center; width:52px; height:48px; flex:0 0 52px; margin:-1px -1px -1px 0; padding:0; border:0; border-radius:0 4px 4px 0; background:var(--blue,#003e78); color:#fff; }
  .site-header.billo-header .search-form button:hover { background:var(--blue-dark,#002e59); }
  .site-header.billo-header .search-form button svg { width:23px; height:23px; }
  .site-header.billo-header .header-actions { display:flex; align-items:center; gap:28px; margin:0; }
  .site-header.billo-header .account-link, .site-header.billo-header .cart-toggle { display:flex; align-items:center; justify-content:center; gap:10px; width:auto; min-height:48px; padding:0; background:none; border:0; font-size:16px; font-weight:400; line-height:1.5; white-space:nowrap; color:var(--blue,#003e78); }
  .site-header.billo-header .account-link .bh-account-desktop, .site-header.billo-header .cart-toggle .bh-cart-label { display:inline; }
  .site-header.billo-header .account-link svg, .site-header.billo-header .cart-toggle svg { width:24px; height:24px; }
  .site-header.billo-header .cart-count { top:0; left:17px; right:auto; min-width:19px; height:19px; padding:0 4px; font-size:12px; line-height:19px; }
  .site-header.billo-header .nav-inner { width:calc(100% - 64px); max-width:1280px; margin-inline:auto; display:flex; justify-content:flex-start; align-items:center; gap:clamp(18px,3.9vw,56px); }
  .site-header.billo-header .main-nav a { position:relative; min-height:48px; font-size:16px; font-weight:600; }
  .site-header.billo-header .nav-divider { height:20px; margin-left:auto; margin-right:0; }
  .site-header.billo-header .main-nav a[aria-current="page"]::after { content:""; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--blue,#003e78); }
}
@media(min-width:851px) and (max-width:1100px) {
  .site-header.billo-header .header-main { gap:24px; }
  .site-header.billo-header .header-actions { gap:18px; }
  .site-header.billo-header .account-link, .site-header.billo-header .cart-toggle { font-size:14px; gap:8px; }
  .site-header.billo-header .nav-inner { gap:16px; }
  .site-header.billo-header .main-nav a { font-size:12px; }
}
@media(max-width:850px) {
  .billo-shipping { min-height: 40px; padding: 9px 16px; font-size: 13px; line-height: 21px; letter-spacing: 0; justify-content: space-between; gap: 12px; }
  /* Il messaggio si prende tutto lo spazio che avanza e si centra dentro
     quello: cosi' resta centrato all'occhio senza mai arrivare a toccare il
     selettore di lingua, qualunque sia la lunghezza della frase tradotta. */
  .billo-shipping > span { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .billo-shipping > span:first-of-type, .billo-shipping > span:last-of-type { display: none; }
  .billo-shipping svg { width: 18px; height: 18px; margin-right: 2px; }
  .site-header.billo-header { background: #fff; border-bottom: 1px solid var(--line, #e6ded4); }
  .site-header.billo-header .header-main, .site-header.billo-header .header-main.search-expanded { display: grid; grid-template-columns: 46px minmax(0,1fr) 101px; grid-template-rows: 67px 50px; gap: 0 10px; width: calc(100% - 64px); max-width: none; height: auto; padding: 0 0 12px; margin: 0 auto; }
  .site-header.billo-header .header-main > .brand { grid-column: 1/3; grid-row: 1; width: clamp(158px,47vw,184px); max-width: 100%; align-self: center; margin: 0; }
  .site-header.billo-header .brand img { display: block; width: 100%; height: auto; }
  .site-header.billo-header .header-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 0; width: 101px; margin: 0; }
  .site-header.billo-header .account-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 55px; min-width: 55px; min-height: 50px; padding: 0; color: var(--blue, #003e78); }
  .site-header.billo-header .account-link svg { width: 23px; height: 23px; stroke-width: 1.5; }
  .site-header.billo-header .account-link .bh-account-desktop { display: none; }
  .site-header.billo-header .account-link .bh-account-mobile { display: block; font-size: 12px; font-weight: 400; line-height: 1.2; white-space: nowrap; }
  .site-header.billo-header .cart-toggle { display: flex; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 50px; margin: 0; padding: 0; position: relative; }
  .site-header.billo-header .cart-toggle svg { width: 25px; height: 25px; stroke-width: 1.5; }
  .site-header.billo-header .cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; width: auto; height: 18px; padding: 0 4px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
  .site-header.billo-header .mobile-menu { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; min-width: 46px; height: 50px; margin: 0; padding: 0; gap: 4px; background: transparent; border: 0; }
  .site-header.billo-header .mobile-menu svg { width: 21px; height: 21px; stroke-width: 1.5; }
  .site-header.billo-header .bh-menu-label { display: block; font-size: 12px; line-height: 1.2; font-weight: 400; }
  .site-header.billo-header .header-main .search-form, .site-header.billo-header .header-main.search-expanded .search-form { grid-column: 2/4; grid-row: 2; display: flex; align-items: center; width: 100%; max-width: none; min-width: 0; height: 48px; margin: 0; padding: 0; background: #f5f5f3; border: 1px solid transparent; border-radius: 6px; overflow: visible; }
  .site-header.billo-header .search-form:focus-within { border-color: var(--blue, #003e78); outline: 2px solid var(--blue, #003e78); outline-offset: 2px; }
  .site-header.billo-header .search-form input { width: 100%; min-width: 0; height: 48px; padding: 10px 0 10px 14px; font-size: 17px; line-height: 25px; background: transparent; border: 0; border-radius: 6px; color: var(--blue, #003e78); }
  .site-header.billo-header .search-form input::placeholder { color: #686764; opacity: 1; }
  .site-header.billo-header .search-form input:focus { outline: none; box-shadow: none; }
  .site-header.billo-header .search-form button { display: flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 48px; min-height: 44px; padding: 0; margin: 0; background: transparent; border: 0; color: var(--blue, #003e78); }
  .site-header.billo-header .search-form button svg { width: 22px; height: 22px; stroke-width: 1.5; }
  .site-header.billo-header .main-nav { border-top: 1px solid var(--line, #e6ded4); }

	/*
	 * Lingua: fuori dalla fascia blu, dentro l'header (design di Stefan del
	 * 21.09.2026). Nella fascia le quattro sigle erano piccole, appiccicate e
	 * rubavano spazio al messaggio della spedizione; qui diventano un bottone
	 * solo con i nomi veri delle lingue dentro.
	 */
	.billo-shipping .cb-lingue { display: none; }
	.billo-shipping { justify-content: center; }

	.site-header.billo-header .header-main,
	.site-header.billo-header .header-main.search-expanded { grid-template-columns: 46px minmax(0,1fr) 140px; }
	.site-header.billo-header .header-actions { width: 140px; }

	.cb-lingua-tendina { display: block; position: relative; }
	.cb-lingua-tendina > summary {
		display: flex; align-items: center; justify-content: center; gap: 3px;
		width: 46px; min-width: 46px; height: 50px;
		list-style: none; cursor: pointer;
		/* la sigla e' l'unica cosa che si legge da chiusa: piu' grande del
		   resto dei testini dell'header, altrimenti non si distingue */
		font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--blue, #003e78);
	}
	.cb-lingua-tendina > summary::-webkit-details-marker { display: none; }
	.cb-lingua-tendina > summary svg { width: 14px; height: 14px; stroke-width: 2; transition: transform .15s; }
	.cb-lingua-tendina[open] > summary svg { transform: rotate(180deg); }

	.cb-lingua-pannello {
		position: absolute; z-index: 40; top: calc(100% - 4px); right: -8px;
		min-width: 172px; padding: 12px 0 6px;
		background: var(--cream, #fbf7f2); border: 1px solid var(--line, #e3d9cd);
		border-radius: 8px; box-shadow: 0 8px 24px rgba(0,42,82,.14);
	}
	/* la punta verso il bottone, come nel disegno */
	.cb-lingua-pannello::before {
		content: ''; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px;
		background: var(--cream, #fbf7f2);
		border-left: 1px solid var(--line, #e3d9cd); border-top: 1px solid var(--line, #e3d9cd);
		transform: rotate(45deg);
	}
	.cb-lingua-pannello > p {
		margin: 0 14px 8px; padding-bottom: 8px;
		border-bottom: 1px solid var(--line, #e3d9cd);
		font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
		font-weight: 600; color: var(--muted, #6b6560);
	}
	.cb-lingua-pannello ul { list-style: none; margin: 0; padding: 0; }
	.cb-lingua-pannello a,
	.cb-lingua-pannello span[aria-current] {
		display: flex; align-items: center; gap: 9px;
		min-height: 46px; padding: 6px 14px;
		font-size: 16px; color: var(--blue, #003e78); text-decoration: none;
	}
	.cb-lingua-pannello span[aria-current] { font-weight: 600; background: rgba(0,62,120,.06); }
	.cb-lingua-pannello svg { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 2.4; }
	.cb-lingua-pannello a { padding-left: 39px; }
}

/* Griglia dell'header allineata a quella del sito.
   Il prototipo dell'header usa un margine unico di 16px per lato sotto gli
   850px; il tema usa 112 / 64 / 40 / 32 ai suoi breakpoint (css/base.css,
   ".container"). Coi valori del prototipo l'header usciva a 16..374 su
   telefono mentre breadcrumb e contenuto stanno a 20..370: il logo partiva
   quattro pixel piu' a sinistra di tutto il resto. Stessa correzione gia'
   fatta sul footer nuovo lo stesso giorno, stesso motivo. */
@media (max-width: 600px) {
	.site-header.billo-header .header-main,
	.site-header.billo-header .header-main.search-expanded {
		width: calc(100% - 40px);
	}
}

@media (max-width: 360px) {
	.site-header.billo-header .header-main,
	.site-header.billo-header .header-main.search-expanded {
		width: calc(100% - 32px);
	}
}

/* Con dieci voci (Maschinen e Zubehör aggiunte il 21.09.2026) la barra del menu
   non entrava più nello schermo sotto i 1500px. Il testo resta 16px come nel
   design: si adatta solo la spaziatura, e resta la più larga che entra a ogni
   misura — misurata sul francese, la lingua con le parole più lunghe:
   1160px→28, 1280px→40, 1366px→48, 1440px→52, da 1500px→56 come prima.
   La formula segue quei numeri; sotto i 1150px valgono le regole di prima. */
@media (min-width: 1151px) {
	.site-header.billo-header .nav-inner { gap: clamp(24px, calc(8.2vw - 67px), 56px); }
}