/*
 * Fedeltà 3 (globale): il body qui sotto sovrascriveva base.css del
 * prototipo (sfondo panna invece di bianco, 16px/1.6 invece di 17px/1.5 —
 * lasciato di proposito dalla consegna fondamenta, ora rimosso). color/
 * font-family erano alias identici a base.css (nessun effetto): tolti con
 * lo stesso taglio, il body eredita tutto da base.css senza differenze.
 */

/*
 * Fedeltà 2 (giro di tutte le pagine) — contenitore incassato, reso
 * globale. #page (markup di GeneratePress) porta la classe "container"
 * oltre a "grid-container", e collide col nome dell'utility class del
 * design in base.css (.container{width:calc(100% - 112px);max-width:
 * var(--container)}) — non intenzionale, base.css usa quel nome per
 * wrapper di CONTENUTO, non per lo shell di pagina. Per questo ogni
 * pagina restava incassata di 56px per lato invece di arrivare ai bordi
 * (qualunque sfondo colorato/panna di sezione restava boxed). In Fedeltà 1
 * era stato azzerato solo sulla home (css/home-extra.css, caricato solo su
 * is_front_page()); qui diventa la regola per tutto il sito, perché
 * main.css è l'unico foglio caricato su ogni pagina. Le sezioni interne
 * restano allineate alla griglia per conto proprio: header/nav/footer
 * hanno un .container interno indipendente da #page (header.php/
 * footer.php), ogni CSS di pagina idem per i propri blocchi interni
 * (.cb-container, .compat-section, ecc.).
 */
/*
 * Griglia: ".container" e' un'utility a UN livello. Dove un contenitore ne
 * avvolge un altro il rientro si somma e il blocco interno risulta stretto e
 * fuori asse: misurato sull'avviso d'errore di Mein Konto, stampato dentro
 * "main.auth-page.container" (136..1304 invece di 80..1360 a 1440px, 40..350
 * invece di 20..370 a 390px). Il figlio riempie il genitore, che la griglia
 * ce l'ha gia'. #page e' escluso perche' porta la classe per conto di
 * GeneratePress (vedi la regola qui sotto), non come utility del design.
 */
.container:not(#page) .container {
	width: 100%;
	max-width: none;
}

#page.container {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Fedeltà 4 (§1.1 margini parassiti di GeneratePress): il layout "Separate
 * Containers" di GP aggiunge margin:20px al <main class="site-main"> (azzerato
 * a sinistra/destra dalla variante "no-sidebar", restavano 20px sopra/sotto) e
 * la regola generica ".site-main>*{margin-bottom:20px}" aggiunge altri 20px
 * sotto ogni sezione diretta (.compat-section, .products-section,
 * .about-section, .shop-intro, .system-section, ecc.). Nel prototipo le
 * sezioni si accostano senza margine: lo spazio verticale è tutto nel
 * padding-block delle sezioni stesse. Stessa specificità delle regole GP
 * (main.min.css, caricato prima): vince per ordine di sorgente, non serve
 * !important.
 */
.separate-containers .site-main { margin: 0; }
.site-main > * { margin-bottom: 0; }

/*
 * Fedeltà 4 (§1.1, griglia catalogo): WooCommerce applica "ul.products{margin:
 * 0 0 1em}" (woocommerce.css, caricato prima di cb-listing.css) alla griglia
 * prodotti, che nel tema porta anche la classe "listing-grid" (vedi
 * woocommerce/loop/loop-start.php). Nel prototipo la griglia non ha margine:
 * lo spazio verso la sezione successiva è nel padding delle sezioni. Stessa
 * specificità della regola WooCommerce (.woocommerce ul.products): vince per
 * ordine di sorgente.
 */
.woocommerce ul.products.listing-grid { margin: 0; }

/*
 * Fedeltà 4 (§1 priorità zero + §3.1): h1/h2 restavano #14110f (--cb-ink) su
 * ogni pagina tranne la home perché questa regola, caricata dopo base.css
 * (cb-main dipende da cb-tokens che dipende da cb-base), sovrascriveva il
 * "color:var(--blue)" di base.css con --cb-ink. Sulla home non si notava
 * perché home.css (caricato ancora dopo) riapplica "h1,h2{color:var(--blue)}".
 * Stesso motivo per cui gli h3 generici (es. i trust item della home, "Original
 * Caffè Borbone" ecc.) prendevano Fraunces invece di ereditare il font del
 * body: la regola includeva anche h3 nel selettore font-family, ma nel
 * prototipo (base.css) solo h1/h2 hanno "font-family:var(--display)"; gli h3
 * senza stile specifico ereditano il font del body (Source Sans 3). Ogni h3
 * che DEVE essere Fraunces (.compat-card h3, .filter-help h3, #empty-results
 * h3, ecc.) ha già la propria regola più specifica altrove: non tocco quelle.
 *
 * Fedeltà 4 (§2.5 footer, "line-height titoli colonna"): stesso bug ancora,
 * di riflesso — "line-height:1.2" qui sotto (avanzo di un giro precedente,
 * mai stato nel prototipo) batteva "h1,h2{line-height:1.1}" di base.css su
 * ogni pagina tranne la home (dove home.css lo riscrive a 1.1), portando
 * ".footer-main h2" (senza un proprio line-height) a 19.2px invece di
 * 17.6px. Rimosso: base.css copre già 1.1 per h1/h2 e 1.25 per h3 ovunque
 * non ci sia una regola più specifica (ogni h1/h2/h3 "di contenuto" ne ha
 * già una propria — verificato su header/hero/categoria/shop/footer/
 * checkout/account — quindi qui restava solo da togliere).
 */
h1, h2 {
	font-family: var(--cb-font-display);
	color: var(--cb-brand);
}

h1 {
	font-size: var(--cb-h1);
}

h2 {
	font-size: var(--cb-h2);
}

a {
	color: var(--cb-brand);
}

/*
 * Fase 1 (fondamenta design): base.css lascia i link di .footer-bottom (Impressum/
 * Datenschutz/AGB) SENZA colore proprio, per eredità dal grigio-caldo di .footer-bottom
 * (var(--muted), impostato sul contenitore) — così sono nel prototipo. La regola "a{...}"
 * qui sopra, generale a tutto il sito, li ricolorava blu (qualunque regola che tocca
 * l'elemento vince sull'eredità, a prescindere dalla specificità). Ripristino
 * l'eredità solo lì, senza toccare base.css.
 */
.footer-bottom a {
	color: inherit;
}

.cb-container {
	max-width: var(--cb-container);
	margin: 0 auto;
	padding-inline: var(--cb-gap);
}

.cb-btn {
	display: inline-block;
	padding: .8em 1.4em;
	border-radius: var(--cb-radius);
	background: var(--cb-brand);
	color: var(--cb-on-brand);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 2px solid var(--cb-brand);
}@media(hover:hover){.cb-btn:hover{
	background: var(--cb-brand-dark);
	border-color: var(--cb-brand-dark);
	color: var(--cb-on-brand);
}}

/*
 * Pulsanti nativi WooCommerce ovunque nel sito (carrello, cassa, "Mein
 * Konto"...), non solo dentro le griglie prodotto già coperte da shop.css:
 * qui, non lì, perché main.css è l'unico foglio caricato su ogni pagina
 * (Task 7, giro di correzioni 1 — altrimenti restano nel viola/grigio di
 * default di WooCommerce). ".alt"/"add_to_cart_button" sono l'azione
 * principale (pieno, come .cb-btn); il resto (applica cupone, ecc.) lo
 * stile secondario (contorno) — stessa coppia già usata in shop.css per
 * "In den Warenkorb"/"Ausführung wählen", qui resa generale invece di
 * ripetuta per contesto.
 *
 * Fedeltà 3 (scheda prodotto): il modulo d'acquisto nativo
 * (woocommerce/single-product/add-to-cart/simple.php) stampa un
 * `<button class="single_add_to_cart_button button main-add">`, non un
 * `<a class="add_to_cart_button">` come nelle griglie — restava sulla sola
 * regola di contorno sopra (bianco/bordo blu) perché "single_add_to_cart_
 * button" non è ".alt" e non è ".add_to_cart_button". Stessa azione
 * principale delle griglie, aggiunta qui sotto.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--cb-surface);
	color: var(--cb-brand);
	border: var(--cb-stroke-w) solid var(--cb-brand);
	border-radius: var(--cb-radius);
	font-weight: 700;
}@media(hover:hover){.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
	background: var(--cb-bg);
}}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce button.button.full,
.woocommerce button.button.step-next,
.woocommerce button.button.mobile-status-cta {
	background: var(--cb-brand);
	color: var(--cb-on-brand);
	border-color: var(--cb-brand);
}@media(hover:hover){.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce input.button.alt:hover,.woocommerce a.add_to_cart_button:hover,.woocommerce button.single_add_to_cart_button:hover,.woocommerce button.button.full:hover,.woocommerce button.button.step-next:hover,.woocommerce button.button.mobile-status-cta:hover{
	background: var(--cb-brand-dark);
	border-color: var(--cb-brand-dark);
}}

/*
 * Fedeltà 5 (R05, audit design 2026-09-19): "Weiter zur Adresse"/"Weiter zur
 * Zahlung" (checkout, ".step-next"), "Anmelden"/"Konto erstellen"/il
 * recupero password (Mein Konto, ".full" — solo i <button> nativi di
 * login/iscrizione/password: i link ".full" del cruscotto non sono toccati,
 * fuori da questo rilievo) tornavano a contorno perché ".woocommerce
 * button.button" (sopra) è lo stile SECONDARIO di default — solo ".alt"/
 * "add_to_cart_button" ricevono il pieno. Questi pulsanti sono la CTA
 * primaria della loro pagina/passaggio quanto ".alt", ma WooCommerce non
 * aggiunge mai ".alt" da solo ai submit nativi di login/iscrizione/password
 * né il tema lo aggiunge a ".step-next" (JavaScript puro, vedi js/
 * checkout.js): selettori scoped sopra, stessa tecnica di ".alt", non un
 * cambio generale a tutti i ".button" del sito (le card prodotto restano a
 * contorno). "font-weight:600" (non 700, via ".woocommerce button.button"
 * sopra): il prototipo usa 600 su questi pulsanti (account/v1/base.css,
 * checkout/v2/checkout.css) — 700 è solo per il resto del sito.
 */
.woocommerce button.button.full,
.woocommerce button.button.step-next,
.woocommerce button.button.mobile-status-cta {
	font-weight: 600;
}

/*
 * Fedeltà 2 (giro di tutte le pagine) — pulsanti grigi, generalizzato a
 * tutto il sito. Stessa causa già isolata e corretta solo sulla home in
 * Fedeltà 1 (css/home-extra.css, ora tolta perché ridondante con questa):
 * il colore "Buttons" del Customizer di GeneratePress genera
 * `a.button{background-color:#55555e}` (grigio), selettore (elemento+
 * classe, specificità 0,1,1) più specifico della sola `.button` del design
 * (0,1,0) in base.css — vince a prescindere dall'ordine di caricamento.
 * Trovato su Über uns e Für Unternehmen (bottoni "Lernen Sie uns kennen",
 * "Ihren Kaffee entdecken", "Anfrage für Ihren Betrieb") e sulle pagine
 * informative ("Kontakt aufnehmen") — fuori dal contesto .woocommerce già
 * coperto sopra (carrello/cassa/account, dove ".woocommerce a.button" è già
 * più specifico e vince). "body" aggiunge un elemento alla specificità
 * (0,1,2) per batterlo in modo affidabile invece di sperare nell'ordine di
 * caricamento. I `<button class="button">` nativi (moduli account/cassa)
 * non ne avevano bisogno: la sola classe `.button` (0,1,0) batte già il
 * selettore d'elemento `button` di GeneratePress (0,0,1).
 */
body a.button {
	background-color: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
body a.button:hover {
	background-color: var(--blue-dark);
}
body a.button.button-light {
	background-color: var(--cream);
	border-color: var(--cream);
	color: var(--blue);
}
body a.button.button-light:hover {
	background-color: var(--white);
}

/*
 * Nota IVA/spedizione sotto il prezzo (Task 8, inc/checkout.php,
 * cb_price_suffix()). Qui e non in checkout.css/shop.css/product.css:
 * il filtro woocommerce_get_price_html gira ovunque compaia un prezzo
 * (negozio, categorie, scheda prodotto, home "più venduti", suggerimenti
 * nel carrello) — main.css è l'unico foglio caricato su ogni pagina.
 */
.cb-price-note {
	display: block;
	font-size: var(--cb-text-sm);
	color: var(--cb-ink-soft);
	font-weight: 400;
}

.cb-price-note a {
	color: var(--cb-ink-soft);
	text-decoration: underline;
}

/*
 * Fase 1 (fondamenta design): il footer non usa più .cb-footer/.cb-footer__inner/
 * .cb-footer__legal/.cb-footer__copy (rimosse qui, morte — inc/footer.php ora usa
 * "footer"/".footer-main"/".footer-bottom" di base.css, invariato). Nessun altro file
 * del tema le richiamava (verificato con grep su css/ e inc/ prima di toglierle).
 */

/*
 * Bolla WhatsApp (Task 9, inc/whatsapp.php): sostituisce il plugin
 * click-to-chat-for-whatsapp. Qui in main.css (non in un CSS di pagina)
 * perché compare su tutto il sito tranne la cassa (la funzione PHP non la
 * stampa affatto lì, quindi non serve una regola per nasconderla). Stessa
 * posizione già in uso (opzioni del plugin lette prima di disattivarlo):
 * basso-sinistra su schermo grande, basso-destra su mobile.
 */
.cb-whatsapp {
	position: fixed;
	inset-block-end: 15px;
	inset-inline-start: 15px;
	z-index: var(--cb-z-dropdown);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--cb-ok);
	color: var(--cb-on-brand);
	box-shadow: var(--cb-shadow);
}

.cb-whatsapp svg {
	width: 1.75rem;
	height: 1.75rem;
}

@media (max-width: 767px) {
	.cb-whatsapp {
		inset-inline-start: auto;
		inset-inline-end: 10px;
		inset-block-end: 10px;
	}
}

/*
 * Fedeltà 4 (§2.5 footer, "font-size del <small> copyright"): GeneratePress
 * (main.min.css) applica "small{font-size:75%}" (elemento, specificità
 * 0,0,1) — nel prototipo il rapporto è 0.8333em (14.17px su un body 17px,
 * non 12.75px). Selettore più specifico per riportarlo al valore giusto,
 * scoping alla sola riga copyright (l'unico <small> del footer).
 */
.footer-bottom small {
	font-size: .8333em;
}

/* Revisione Codex R09: il comando per rivedere le preferenze cookie sta nella
   riga legale del footer e deve sembrare uno dei link accanto, non un
   pulsante. È un <button> per necessità: complianz.js ascolta proprio
   "button.cmplz-manage-consent" per riaprire il banner (inc/footer.php). */
.footer-bottom button.cmplz-manage-consent {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.footer-bottom button.cmplz-manage-consent:hover {
	text-decoration: underline;
}


/* ---------- Sfondo sotto le foto trasparenti ---------- */

/*
 * Le foto prodotto sono trasparenti (misurato: 304_00_sito.webp, 1600x1600,
 * alpha 0 agli angoli). Il panna finora lo dipingeva solo il CONTENITORE, e
 * l'immagine ci appoggiava sopra il proprio vuoto. Funziona, e da qui non si
 * riesce a far comparire niente di diverso — ma se su iOS quel riquadro
 * finisce su un livello di composizione a se', il fondo del genitore puo'
 * non essere ridipinto sotto e resta il grigio scuro di sistema.
 *
 * Quella spiegazione NON l'ho verificata: qui il grigio non si manifesta.
 * Dipingere lo sfondo anche sull'immagine costa nulla e rende il caso
 * impossibile a prescindere dal meccanismo, quindi si fa comunque.
 *
 * I colori NON sono tutti uguali: ogni immagine prende quello del suo
 * contenitore, altrimenti si vedrebbe un riquadro del colore sbagliato.
 * ".compat-image img" resta fuori di proposito: quella card diventa bianca
 * al passaggio del mouse (".compat-card:hover{background:#fff}"), quindi un
 * panna fisso sull'immagine si vedrebbe come una macchia.
 */
.gallery-stage img,
.gallery-open img,
.listing-photo img,
.line-photo img,
.extra-photo img {
	background: var(--cream);
}

.product-image img {
	background: var(--white);
}

.gallery-thumb img {
	background: #fff;
}

/* ---------- Pulsanti scuriti da GeneratePress al tocco ---------- */

/*
 * LA causa del "grigio" che Stefan segnala da stamattina, trovata il
 * 20.09.2026 misurando i pixel di una miniatura toccata: dentro il bordo blu
 * c'erano 4px di rgb(63,64,71). E' il padding del pulsante, dipinto di
 * #3f4047 — un default del Customizer di GeneratePress, iniettato come CSS in
 * linea:
 *
 *   button:hover, ..., a.button:hover, button:focus, ... { background-color:#3f4047 }
 *
 * Il selettore comprende ":focus", non solo ":hover". Il passaggio del mouse
 * NON da' il fuoco, il TOCCO si': ecco perche' da desktop non si riproduceva
 * ne' con me ne' con le altre sessioni, e perche' "tocco fuori e sparisce" —
 * e' il fuoco che se ne va. "button:focus" e' (0,1,1) e batteva le nostre
 * classi (0,1,0).
 *
 * Spiega anche la prima segnalazione in assoluto, la "sagoma grigia" sulla
 * foto grande: ".gallery-open" e' un <button> trasparente sotto un PNG
 * trasparente, quindi il grigio si vedeva attraverso il prodotto.
 *
 * Otto classi colpite, trovate dando il fuoco a ogni pulsante di 10 pagine.
 * Qui ognuna riprende il proprio sfondo, con due classi di specificita' per
 * battere la regola di GeneratePress.
 */
.icon-button:hover,
.icon-button:focus,
.gallery-open:hover,
.gallery-open:focus,
.review-toggle:hover,
.review-toggle:focus,
.password-toggle:hover,
.password-toggle:focus {
	background: none;
}

.gallery-thumb:hover,
.gallery-thumb:focus {
	background: #fff;
}

.mobile-filter-button:hover,
.mobile-filter-button:focus {
	background: white;
}

/* ---------- Fuoco e tocco ---------- */

/*
 * Segnalato da Stefan il 20.09.2026: toccando un campione di colore, o la foto
 * grande, compare "un contorno grigio" invece del solo bordo blu.
 *
 * Tre cose distinte, misurate sullo staging:
 *
 * 1. Il grigio al tocco non e' nostro: e' quello che iOS disegna da solo
 *    sull'elemento toccato. Tre meccanismi diversi, tutti spenti qui:
 *    -webkit-tap-highlight-color (il velo grigio al tocco), -webkit-touch-
 *    callout (l'anteprima alla pressione lunga) e -webkit-user-drag (il
 *    fantasma grigio quando il dito trascina un'immagine).
 *    base.css spegneva solo il primo, e solo su "button, a" — copia fedele
 *    del prototipo, che ha la stessa lacuna. Il campione di colore e' una
 *    <label>, quindi restava scoperto.
 *    NOTA ONESTA: non riproducibile qui. Chromium su Linux non disegna
 *    niente di tutto questo, quindi non posso verificare quale dei tre
 *    fosse. Da confermare sull'iPhone.
 *
 * 2. Con la tastiera comparivano DUE anelli sullo stesso campione: quello blu
 *    del prototipo sulla .swatch (2px, offset 4px — e' il "bordo bello", resta)
 *    e, in piu', quello dorato globale di base.css addosso all'<input> radio
 *    nascosto, che e' 1x1 pixel: un rettangolino dorato vagante a 5px di
 *    distanza, che non circonda niente. Stesso difetto sui "temi" del modulo
 *    contatti, che nasconde l'input allo stesso modo e disegna il fuoco sullo
 *    <span> accanto. L'anello si toglie dall'input: il contenitore lo mostra
 *    gia' per conto suo.
 *
 * 3. La foto grande e le miniature non hanno uno stile di fuoco proprio e
 *    ricadevano sull'anello dorato globale: 3px a 5px di DISTANZA da un
 *    pulsante di 655x623 px, cioe' una cornice staccata attorno a tutta la
 *    foto. Qui l'anello va portato dentro il riquadro (offset negativo) e in
 *    blu: il dorato su fondo panna sta attorno a 2.8:1 di contrasto, sotto il
 *    3:1 che si chiede a un indicatore di fuoco, e il blu e' gia' il colore
 *    dello stato selezionato (.gallery-thumb.active).
 */
html {
	-webkit-tap-highlight-color: transparent;
}

.gallery-stage,
.gallery-open,
.gallery-open img,
.gallery-thumb,
.gallery-thumb img,
.swatch,
.listing-photo,
.listing-photo img,
.product-image,
.product-image img {
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}

.swatch input:focus-visible,
.topic-options input:focus-visible {
	outline: none;
}

/*
 * Safari disegna un anello di fuoco suo su un <button> toccato, grigio e piu'
 * spesso del nostro bordo. Fino al 20.09.2026 non si vedeva perche' l'hover
 * appiccicato di iOS dipingeva la miniatura di blu e lo copriva; protetti gli
 * hover, e' rimasto scoperto. Segnalato da Stefan: "il bordo non e' piu' blu,
 * e' grigio ed e' anche piu' spesso".
 * Si toglie l'anello di sistema sul :focus semplice (quello che arriva col
 * dito) e si tiene il nostro su :focus-visible, che e' quello che serve a chi
 * naviga da tastiera. La miniatura scelta resta riconoscibile dal suo bordo
 * blu di 2px (".gallery-thumb.active", css/product.css).
 */
.gallery-open:focus,
.gallery-thumb:focus {
	outline: none;
}

/*
 * Correzione 20.09.2026, secondo giro. Spegnere l'anello di sistema non
 * bastava: Safari fa scattare anche ":focus-visible" su un pulsante toccato,
 * quindi l'anello qui sotto veniva disegnato col dito. Cadendo a -3px finisce
 * DENTRO il bordo blu da 2px della miniatura scelta, e i due si sommano: la
 * cornice spessa e scura che Stefan ha fotografato. Toccando altrove il fuoco
 * se ne va e resta il bordo giusto — la firma di uno stato di fuoco.
 *
 * Due limiti, invece di uno:
 *  - "pointer: fine": col dito l'anello non serve, lo stato lo dice gia' il
 *    bordo blu di ".gallery-thumb.active";
 *  - ":not(.active)": anche da tastiera, sulla miniatura gia' scelta i due
 *    anelli si sommerebbero allo stesso modo.
 * Chi naviga da tastiera su un iPad con tastiera fisica perde l'anello: caso
 * raro e con lo stato comunque visibile dal bordo blu.
 */
@media (pointer: fine) {
	.gallery-open:focus-visible,
	.gallery-thumb:focus-visible:not(.active) {
		outline: 2px solid var(--blue);
		outline-offset: -3px;
	}
}

/* ---------- Casella di spunta di WooCommerce, su TUTTE le pagine ---------- */

/*
 * Passata sui fogli di stile del 20.09.2026. ".checkbox" e' la classe che
 * WooCommerce mette sulle etichette delle caselle di spunta: "Angemeldet
 * bleiben" su Mein Konto, ma anche l'accettazione delle AGB in cassa. Lo
 * stile stava solo in css/account.css, quindi in cassa la riga restava alta
 * quanto il testo invece dei 44px minimi che ha ogni altro controllo
 * toccabile di questo tema — su una casella obbligatoria per legge.
 * css/checkout.css resta libero di rifinire la sua riga: carica dopo.
 */
.checkbox {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 8px;
	cursor: pointer;
}

.checkbox input {
	width: 17px;
	height: 17px;
	accent-color: var(--blue);
}

/* ---------- Nota legale sui marchi, su TUTTE le pagine ---------- */

/*
 * Passata sui fogli di stile del 20.09.2026. La stessa frase ("Nespresso® ist
 * eine eingetragene Marke Dritter…") compare in due punti con due classi
 * diverse: ".trademark-note", scritta dal tema nell'accordion
 * "Kompatibilität" (inc/single-product.php), e ".cb-tm-note", che sta dentro
 * il testo lungo salvato nel database.
 *
 * Aveva stile solo la prima, e solo in css/product.css; la seconda era vestita
 * unicamente come ".guide-copy .cb-tm-note" (css/listing.css), cioè solo sulle
 * pagine categoria. Sulle 20 schede prodotto che la contengono usciva a 16px
 * senza margine, indistinguibile da un paragrafo normale (misurato su
 * blu-100-stuck: 16px contro i 13px della categoria).
 *
 * Base qui, dove arriva a tutte le pagine; ".accordion-copy" tiene i 12px
 * della scheda. Specificità di due classi: batte ".accordion-copy p"
 * (16px, css/product.css), che altrimenti vincerebbe per numero di selettori.
 */
.cb-tm-note,
.trademark-note {
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}

.accordion-copy .cb-tm-note,
.accordion-copy .trademark-note {
	font-size: 12px;
	margin-top: 18px;
}

/* ---------- Avvisi WooCommerce, su TUTTE le pagine (Task 14) ---------- */

/*
 * Il tema sostituisce già i modelli degli avvisi (woocommerce/notices/
 * success.php ed error.php) con la scatola ".undo-notice" del prototipo, ma
 * il suo stile stava in css/main.css solo da ora: prima era in css/cart.css,
 * caricato sul solo carrello. Ovunque altro — Mein Konto, scheda prodotto,
 * negozio — l'avviso ricadeva sullo stile di WooCommerce: riquadro grigio e,
 * al posto dell'icona, un rettangolo nero, perché il font delle icone di
 * WooCommerce questo tema non lo carica.
 *
 * Misurato su /my-account/edit-account/ salvando con un campo vuoto: sfondo
 * rgb(246,245,248) e ::before con content "\e016".
 *
 * Stessi valori di prima, solo spostati nel foglio che arriva a tutte le
 * pagine. css/cart.css conserva le sole rifiniture del carrello (media
 * query, pulsante "Rückgängig").
 */
.undo-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	margin: -8px auto 24px;
	border: 1px solid var(--line);
	background: var(--cream);
	font-size: 15px;
	color: var(--blue);
}

.undo-notice > svg {
	width: 20px;
}

.undo-notice > span {
	flex: 1;
}

/* Collaudo C162: l'errore aveva la stessa grafica del successo (crema e
   blu). Ora si distingue: fondo e bordo rossi, testo scuro, icona d'allarme. */
.undo-notice--error {
	border-color: #b3261e;
	background: #fdf1f0;
	color: #7a1b15;
}

.undo-notice--error > svg,
.undo-notice--error .undo-notice__dismiss svg {
	color: #b3261e;
}

.undo-notice__dismiss {
	width: 44px;
	height: 44px;
}

.undo-notice__dismiss svg {
	width: 18px;
}

/* Lo stile nativo di WooCommerce sotto la nostra scatola: bordo colorato,
   pallino dell'elenco e icona presa dal suo font (che non carichiamo, e che
   si vedeva come un rettangolo nero). */
.undo-notice.woocommerce-message,
.undo-notice.woocommerce-error,
.undo-notice.woocommerce-info {
	list-style: none;
}

.undo-notice.woocommerce-message::before,
.undo-notice.woocommerce-error::before,
.undo-notice.woocommerce-info::before {
	content: none;
}


/* ---------- Stelle delle recensioni, componente condiviso (20.09.2026) ---------- */

/*
 * Queste regole stavano solo in css/listing.css e css/shop.css, cioè sui
 * fogli di negozio, categoria e ricerca. Portandole nella home servivano
 * anche lì: è la quarta volta in questa revisione che una regola giusta non
 * arriva alla pagina dove il componente viene riusato (spazio fra le card,
 * stato vuoto, avvisi, ora le stelle). Il posto di un componente condiviso è
 * qui, in css/main.css, che è su ogni pagina.
 *
 * Gli aggiustamenti per pagina (altezze minime, margini, misure su telefono)
 * restano nei rispettivi fogli: qui c'è solo la base.
 */
/* min-height 20px e margin-top 8px sono i valori della rifinitura compatta
   (DESIGN BY CODEX/shop/v1/CARD-SPAZI-PER-CLAUDE.md): negozio e categoria li
   riscrivevano già uguali sopra la vecchia base da 35px/6px, che non usava
   più nessuno. Qui diventano la base, così la home li eredita senza una
   quarta copia. */
.card-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 20px;
	font-size: 13px;
	color: var(--blue);
	margin-top: 8px;
}

.card-rating > span > span {
	color: var(--muted);
}

.rating-stars {
	position: relative;
	display: inline-block;
	width: 85px;
	height: 15px;
	flex-shrink: 0;
}

.star-base,
.star-fill {
	display: flex;
	gap: 2px;
	position: absolute;
	top: 0;
	left: 0;
	height: 15px;
	overflow: hidden;
	white-space: nowrap;
}

.rating-stars svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke-width: 1;
	flex-shrink: 0;
}

/* La regola ".card-rating>span>span" qui sopra colpisce anche .star-fill (è
   una span dentro .rating-stars, che a sua volta è una span dentro
   .card-rating) e lo tingeva di grigio. In css/listing.css il problema era
   risolto con !important; qui basta un selettore a due classi, che vince
   per specificità senza forzature. */
.card-rating .star-fill {
	color: var(--cb-star);
}
/* Stessa regola tingeva anche .star-base con il marrone scuro del testo:
   una stella vuota risultava piena, identica a quella oro come forma e
   quasi come peso. «4.0 (1)» si leggeva come cinque stelle (collaudo C050).
   Il contorno chiaro della linea e' il valore che listing.css usa gia'. */
.card-rating .star-base {
	color: var(--line);
}

.no-rating {
	color: var(--muted);
	font-size: 12px;
}

/* ---------- Card prodotto (.product-card): spazi e allineamento ---------- */

/*
 * Stessa rifinitura che Codex aveva fatto per negozio e ricerca
 * (DESIGN BY CODEX/shop/v1/CARD-SPAZI-PER-CLAUDE.md), portata qui dopo
 * l'aggiunta delle recensioni: con una riga in più il vuoto dentro la card
 * si vedeva anche in home.
 *
 * 20.09.2026: spostate da css/home.css a qui. Il markup .product-grid/
 * .product-card non e' solo della home: lo usano anche i prodotti correlati
 * della scheda prodotto (cb_single_related), dove quindi queste regole non
 * arrivavano — le card si sfalsavano appena un titolo andava a capo, come
 * segnalato da Stefan su telefono. E' la quinta volta in questa revisione che
 * una regola giusta vive in un foglio che non raggiunge tutti i posti dove il
 * componente viene riusato: qui sta in css/main.css, che e' su ogni pagina.
 *
 * Misurato prima, a 1440px: foto→marca 20px, marca→titolo 5px,
 * titolo→formato 8px, formato→recensioni 6px, recensioni→prezzo 16px,
 * prezzo→pulsante 18px, più 42px riservati al formato e 35px alle recensioni
 * anche quando una riga bastava. Card alta 559,5px contro i 478,8px del
 * negozio.
 *
 * NON si toccano: foto, caratteri, dimensioni di titolo e prezzo, colori,
 * pulsante. E il prezzo resta sulla stessa riga del prezzo unitario, come nel
 * prototipo della home (nel negozio è impilato: sono due disegni diversi).
 */
/* Selettori legati a .product-grid, non le classi nude: css/home.css e
   css/product.css contengono la copia verbatim del prototipo con i valori
   larghi (.product-brand{margin-bottom:5px}, .product-format{margin-top:8px},
   .price-row{margin:16px 0 18px}) e si caricano DOPO questo foglio. Misurato:
   con i selettori nudi la home tornava a 5/8/16px mentre i correlati avevano
   gia' 4/6/12. Tre classi battono una. */
.product-grid .product-card .product-info { padding-top: 16px; }
.product-grid .product-card .product-brand { margin-bottom: 4px; }
.product-grid .product-card .product-format { margin-top: 6px; min-height: 0; }
.product-grid .product-card .price-row { margin: 12px 0; }

/*
 * Allineamento senza altezze fisse, come prescrive la specifica: le riserve
 * tolte qui sopra erano ciò che teneva prezzi e pulsanti sulla stessa linea,
 * perché questa griglia — a differenza di quella del negozio — non usava
 * subgrid. Ogni card condivide due righe della griglia (foto, .product-info):
 * l'altezza la decide il contenuto più alto della stessa riga visiva, non una
 * riserva uguale per tutti. Dentro .product-info il testo scorre naturale e
 * .card-rating spinge prezzo+pulsante in fondo, che restano allineati fra
 * card vicine. Non è più un subgrid annidato a sei righe: un titolo corto
 * ereditava il riquadro a due righe del titolo lungo accanto (vuoto sotto il
 * titolo, visibile su iPhone; dettagli in css/listing.css, 20.09.2026).
 *
 * Il margine sotto la card sostituisce il row-gap azzerato, e resta quello
 * della home (22px, o 30px su telefono), non i 32/28 del negozio: sono due
 * griglie diverse.
 */
@supports (grid-template-rows: subgrid) {
	.product-grid { row-gap: 0; }

	.product-grid > .product-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		row-gap: 0;
		margin-bottom: 22px;
	}

	.product-grid > .product-card > .product-info {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.product-grid > .product-card .card-rating { margin-bottom: auto; }
}

/*
 * Riga del prezzo unitario vuota (macchine, accessori): occupa lo stesso la
 * sua riga, così il prezzo grande di una macchina non scende di ~20px
 * rispetto ai caffè accanto (card ancorate in basso, vedi sopra). Uno spazio
 * unificatore prende l'altezza della riga dal font dello span, senza
 * numeri fissi per breakpoint. Vale per home/correlati (.price-row) e
 * catalogo/categorie/ricerca (.listing-price, che stampa sempre lo span).
 */
.price-row > span:empty::before,
.listing-price > span:empty::before { content: "\00a0"; }

@media (max-width: 600px) {
	.product-grid .product-card .product-info { padding-top: 12px; }
	.product-grid .product-card .product-format { margin-top: 4px; }
	.product-grid .product-card .price-row { margin: 10px 0 12px; }

	@supports (grid-template-rows: subgrid) {
		.product-grid > .product-card { margin-bottom: 30px; }
	}
}

/* 20.09.2026 — il fondo crema sta DIETRO la foto, non fuso con essa.
   Finche' molte foto prodotto avevano lo sfondo bianco cotto nel file, il
   "multiply" serviva a farlo sparire nel crema. Ora tutte le foto prodotto sono
   scontornate (WebP con trasparenza, foto-prodotti/04-consigliate) e quel
   trucco non serve piu': anzi moltiplicava anche i colori del prodotto, e i
   bianchi — tazze e confezioni — viravano al beige.
   Il crema resta dove stava, sul contenitore; l'immagine ci si appoggia sopra
   senza fusione. Restano in multiply solo le foto editoriali (chi siamo,
   aziende, 404, ricerca vuota), che non sono passate dallo scontorno. */


/* ---------- Niente selezione del testo sopra le foto (20.09.2026) ---------- */

/*
 * Su telefono, toccando la galleria o una card partiva la selezione del testo:
 * l'evidenziazione copre l'intero riquadro e — ora che le foto prodotto sono
 * trasparenti — si vede attraverso il prodotto, come un blocco grigio.
 * Segnalato da Stefan: "quando schiaccio l'immagine diventano tipo quel
 * contorno PNG grigio".
 *
 * Qui si toglie la selezione solo sui comandi che contengono una foto: sono
 * pulsanti e miniature, non testo che qualcuno vorrebbe copiare. Nomi
 * prodotto, prezzi e descrizioni restano selezionabili.
 *
 * -webkit-tap-highlight-color era gia' trasparente (css/base.css): non era
 * quello il problema.
 */
.gallery-stage,
.gallery-open,
.gallery-thumbs,
.gallery-thumb,
.listing-photo,
.product-art,
.product-image,
.cb-color-swatches label,
.line-photo,
.extra-photo {
	-webkit-user-select: none;
	user-select: none;
}


/* 20.09.2026 — selettore di lingua nella barra in alto (functions.php,
   cb_selettore_lingua()). Su schermo largo sta a destra; su telefono la barra
   resta centrata com'era e il selettore si appoggia al bordo destro, cosi' il
   messaggio sulla spedizione non si sposta. */
.shipping-bar { position: relative; }
.cb-lingue {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: .04em;
}
.cb-lingue a,
.cb-lingue .cb-lingua-attiva {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 2px;
	color: inherit;
}
.cb-lingue a { opacity: .72; }
.cb-lingue .cb-lingua-attiva { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) {
	.cb-lingue a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 850px) {
	.cb-lingue {
		flex: 0 0 auto;
		margin: 0;
		gap: 8px;
		font-size: 12px;
	}
	.cb-lingue a, .cb-lingue .cb-lingua-attiva { min-height: 24px; padding: 0 1px; }
}


/* 21.09.2026 - l'a-capo della descrizione in apertura resta anche su telefono.
   Prima era nascosto ( in css/base.css) e le
   due frasi si attaccavano: "...Caffe Borbone.Kapseln, Pads und Bohnen".
   Difetto presente da prima delle traduzioni, si vedeva in tutte le lingue. */
@media (max-width: 850px) {
	/* niente regola: l'a-capo resta quello previsto dal testo */
}

/* ® in apice (cb_marchio(), collaudo C025): piccolo e alzato, come si fa
   in tipografia, invece di una lettera a grandezza piena. */
sup.reg { font-size: .55em; line-height: 0; vertical-align: super; font-weight: 400; }

/* ---------- Banner cookie: scheda «Ihre Privatsphäre. Ihre Entscheidung.» ----------
   Design di Stefan del 21.09.2026 (nuova-design-banner-cookie.png). Complianz:
   posizione «center», soft cookie wall (pagina scurita), bottoni accetta / solo
   necessari / impostazioni. Su telefono la scheda sta in basso, su computer al
   centro. Sostituisce la barra compatta del collaudo C009: con la pagina scurita
   finché non si sceglie, il banner non copre più «a metà» nessun bottone. */
#cmplz-cookiebanner-container.cmplz-soft-cookiewall{background:rgba(17,22,30,.62)!important}
.cmplz-cookiebanner{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;grid-auto-rows:max-content;gap:0!important;width:min(560px,calc(100% - 32px))!important;max-height:calc(100dvh - 32px);overflow-y:auto;padding:34px 38px 20px!important;background:var(--cream)!important;border:0!important;border-top:6px solid var(--blue)!important;border-radius:8px!important;box-shadow:0 24px 70px rgba(0,20,45,.35)!important;font-family:var(--font)!important;color:var(--ink)!important}
.cmplz-cookiebanner>*{grid-column:1/-1!important;grid-row:auto!important}
.cmplz-cookiebanner .cmplz-divider{display:none!important}
.cmplz-cookiebanner .cmplz-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:14px 16px;align-items:start;min-height:0;height:auto!important}
.cmplz-cookiebanner .cmplz-logo{display:none!important}
.cb-cookie-eyebrow{grid-column:1;grid-row:1;margin:6px 0 0;font:600 12px/1.2 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.cmplz-cookiebanner .cmplz-title{display:block!important;grid-column:1/-1!important;grid-row:2;justify-self:start!important;text-align:left!important;font:500 clamp(31px,8.2vw,42px)/1.08 var(--display)!important;letter-spacing:-.035em;color:var(--blue)!important;margin:0}
.cmplz-cookiebanner .cmplz-close{grid-column:2!important;grid-row:1;position:static!important;width:44px;height:44px;margin:-8px -10px 0 0;display:flex;align-items:center;justify-content:center;color:var(--blue)!important;cursor:pointer}
.cmplz-cookiebanner .cmplz-close svg{width:26px;height:26px;stroke-width:1.4}
/* Complianz dà a messaggio e categorie una larghezza fissa (larghezza banner − 42px): con il nostro margine interno più ampio uscivano di 34px e il testo risultava tagliato a sinistra nella vista «Einstellungen». */
.cmplz-cookiebanner .cmplz-body{margin-top:22px;width:100%!important;min-width:0!important;max-width:100%}
.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-category{width:100%!important;max-width:100%!important;box-sizing:border-box}
.cmplz-cookiebanner .cmplz-message{font-size:17px!important;line-height:1.6;color:var(--ink)}
.cmplz-cookiebanner .cmplz-message p{margin:0!important}
.cmplz-cookiebanner .cmplz-message p+p{margin-top:14px!important}
.cmplz-cookiebanner .cmplz-categories{margin-top:18px}
.cmplz-cookiebanner .cmplz-category{background:#fff!important;border:1px solid var(--line)}
.cmplz-cookiebanner .cmplz-category-title{color:var(--blue);font-weight:600}
.cmplz-cookiebanner .cmplz-buttons{display:flex!important;flex-direction:column!important;gap:14px!important;margin-top:24px}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{position:relative;width:100%!important;height:auto!important;min-height:56px!important;margin:0!important;padding:14px 56px!important;font:600 17px/1.2 var(--font)!important;border-radius:3px!important;text-align:center;white-space:normal!important;cursor:pointer}
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept{background:var(--blue)!important;border:2px solid var(--blue)!important;color:#fff!important}
.cmplz-cookiebanner .cmplz-buttons .cmplz-accept svg{position:absolute;right:24px;top:50%;width:20px;height:20px;transform:translateY(-50%)}
.cmplz-cookiebanner .cmplz-buttons .cmplz-deny,.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences{background:#fff!important;border:2px solid var(--blue)!important;color:var(--blue)!important}
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences{display:inline-flex;align-items:center;gap:16px;align-self:flex-start;width:auto!important;min-height:44px!important;padding:0!important;margin-top:4px!important;background:none!important;border:0!important;color:var(--blue)!important;font-weight:400!important;font-size:17px!important}
.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences svg{width:20px;height:20px}
@media(hover:hover){.cmplz-cookiebanner .cmplz-buttons .cmplz-accept:hover{background:var(--blue-dark)!important;border-color:var(--blue-dark)!important}.cmplz-cookiebanner .cmplz-buttons .cmplz-deny:hover,.cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences:hover{background:var(--cream)!important}.cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences:hover span{text-decoration:underline;text-underline-offset:4px}}
/* Complianz mette il focus sulla X all'apertura: l'anello dorato si vede solo a chi usa davvero la tastiera (classe messa da js/footer.js al primo Tab). */
.cmplz-cookiebanner .cmplz-close:focus,.cmplz-cookiebanner .cmplz-close:focus-visible{outline:0!important;box-shadow:none!important}
.cb-tastiera .cmplz-cookiebanner .cmplz-btn:focus-visible,.cb-tastiera .cmplz-cookiebanner .cmplz-close:focus{outline:3px solid var(--gold)!important;outline-offset:3px}
.cmplz-cookiebanner .cmplz-documents{display:flex!important;align-items:center;justify-content:space-between!important;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
/* separatori «|» fra i link: bordo sinistro di ogni voce, tagliato dall'overflow sulla prima voce di OGNI riga (anche quando i link vanno a capo) */
.cmplz-cookiebanner .cmplz-documents ul{display:flex;flex-wrap:wrap;justify-content:flex-start!important;gap:6px 0;flex:1 1 auto;min-width:0;margin:0 0 0 -10px!important;padding:0!important;list-style:none;overflow:hidden}
.cmplz-cookiebanner .cmplz-documents li{margin:0 0 0 -1px!important;padding:0 9px;border-left:1px solid;border-image:linear-gradient(transparent 28%,#b8b1a9 28%,#b8b1a9 72%,transparent 72%) 1;line-height:1.15}
.cmplz-cookiebanner .cmplz-documents li:has(.privacy-statement){order:1}
.cmplz-cookiebanner .cmplz-documents li:has(.impressum){order:2}
.cmplz-cookiebanner .cmplz-documents li:has(.cookie-statement){order:3}
.cmplz-cookiebanner .cmplz-documents a{font-size:12.5px!important;color:var(--muted)!important;text-decoration:none!important}
.cmplz-cookiebanner .cmplz-documents a:hover{color:var(--blue)!important;text-decoration:underline!important}
.cb-cookie-bean{display:flex;align-items:center;gap:12px;flex:0 0 auto;color:var(--gold)}
.cb-cookie-bean{gap:10px}.cb-cookie-bean::before,.cb-cookie-bean::after{content:"";width:22px;height:1px;background:var(--gold)}
.cb-cookie-bean svg{width:20px;height:20px;fill:currentColor;stroke:none}
@media(max-width:600px){.cmplz-cookiebanner{top:auto!important;bottom:10px!important;left:10px!important;right:10px!important;transform:none!important;width:auto!important;max-height:calc(100dvh - 20px);padding:28px 24px 16px!important}.cmplz-cookiebanner .cmplz-message{font-size:16px!important}.cmplz-cookiebanner .cmplz-documents a{font-size:12px!important}.cb-cookie-bean::before,.cb-cookie-bean::after{width:18px}}
/* Telefoni bassi (iPhone SE, 360×640): tutto il banner chiuso deve stare nello schermo senza scorrere dentro la scheda. */
@media(max-width:600px) and (max-height:720px){.cmplz-cookiebanner{padding:22px 20px 12px!important}.cmplz-cookiebanner .cmplz-title{font-size:29px!important}.cmplz-cookiebanner .cmplz-header{gap:10px 16px}.cmplz-cookiebanner .cmplz-body{margin-top:14px}.cmplz-cookiebanner .cmplz-message{font-size:15px!important;line-height:1.5}.cmplz-cookiebanner .cmplz-message p+p{margin-top:10px!important}.cmplz-cookiebanner .cmplz-buttons{gap:10px!important;margin-top:16px}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{min-height:50px!important;padding-block:11px!important;font-size:16px!important}.cmplz-cookiebanner .cmplz-documents{margin-top:14px;padding-top:12px}}

/* CH25/C201: negli avvisi (woocommerce/notices/*.php) il testo non si allargava: a 390px restava in 158px su 310 e andava su tre righe. */
.undo-notice>span{flex:1 1 0;min-width:0}