/*
 * Briciole di pane: stesso aspetto e stessa riga su tutte le viste.
 *
 * Misurato il 16/09 su desktop e telefono, IT ed EN. Il widget del percorso è
 * stato piazzato a mano dentro contenitori diversi, quindi ogni vista aveva
 * colore, corpo e rientro suoi. Qui si decide una volta sola.
 *
 * Serve !important quasi ovunque: i valori di partenza arrivano dai singoli
 * widget Elementor e dal CSS del tema, che sono più specifici.
 */

/* ------------------------------------------------------------------ colore */

.woocommerce-breadcrumb {
	/* La pagina in cui sei: nera, e non è un link. */
	color: #000 !important;
	/* 0.92rem = i 14.72px che il sito ha già ovunque tranne le pagine legali,
	   che stavano a 14px: si allineano quelle, non tutto il resto. */
	font-size: 0.92rem !important;
}

.woocommerce-breadcrumb a {
	/* I passi indietro: grigio leggibile (5:1 su bianco), così si distinguono
	   dall'ultimo anello e si capisce che sono cliccabili. */
	color: #6f6f6f !important;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus {
	color: #000 !important;
	text-decoration: underline;
}

/* Il fuoco da tastiera deve vedersi: qui sopra il solo colore non basta. */
.woocommerce-breadcrumb a:focus-visible {
	outline: 1px solid #000;
	outline-offset: 2px;
}

/* ----------------------------------------------- posizione sopra e a sinistra */

/*
 * Il percorso aggiunto dal PHP sulle pagine che non hanno il widget. Sta in
 * cima a `main`, che comincia dove finisce la barra: gli si dà lo stesso
 * respiro che header-spazi dà a tutto il resto, così cade a 102px come i
 * widget già piazzati.
 */
.frasette-briciole {
	margin: var(--frasette-aria, 32px) 0 24px;
}

.frasette-briciole .woocommerce-breadcrumb {
	margin-block: 0 !important;
}

/*
 * TUTTE SULLA STESSA RIGA VERTICALE.
 *
 * A 1440px il percorso cominciava a 40 (nuovi arrivi), 54 (legali), 60
 * (tipologia), 90 (quelle stampate dal modulo), 160 (scheda prodotto) e 298
 * (archivi). La riga scelta è 70px, cioè dove sta già la maggioranza: quasi
 * nessuna vista si sposta di più di una ventina di pixel.
 *
 * Come: il percorso prende una larghezza fissa (1300px, la misura dei
 * contenitori del sito) e margini laterali calcolati, negativi dove il
 * contenitore è più stretto. Finché il contenitore è a tutta pagina — ed è
 * così su tutte le pagine — il bordo sinistro cade sempre a metà pagina meno
 * metà riga: 70px a 1440, 20px sotto i 1340.
 */
/*
 * 29/09: la riga non è più una scatola da 1300 centrata ma la pagina meno i
 * due margini dell'header (`--fr-lato`, da margini.css): il percorso comincia
 * esattamente sotto «Home» del menu. `--fr-vw` è la larghezza della pagina
 * SENZA la barra di scorrimento (la scrive header.php): 100vw la comprende, e
 * su Windows sposterebbe tutto di mezza barra.
 */
:root {
	--frasette-riga-briciole: calc(var(--fr-vw, 100vw) - 2 * var(--fr-lato, 40px));
}

.woocommerce-breadcrumb {
	box-sizing: border-box;
	width: var(--frasette-riga-briciole);
	max-width: none !important;
	margin-inline: calc((100% - var(--frasette-riga-briciole)) / 2) !important;
	text-align: left !important;
}

/*
 * I rientri scritti dentro i singoli widget sballavano la riga: «nuovi arrivi»
 * aveva 10px di margine sinistro, le pagine legali 54 a sinistra e 50 a destra
 * (asimmetrici, quindi il centro non cadeva al centro), tipologia 30 di
 * imbottitura. Si azzerano SOLO dentro i widget del percorso.
 */
.elementor-widget-woocommerce-breadcrumb > .elementor-widget-container {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/*
 * Tipologia e «nuovi arrivi» (contenitore 56a8fa9): il rientro di 30px è del
 * contenitore, non del widget, e serve al resto del contenuto. Non si tocca:
 * si sposta il percorso di metà rientro, che è quanto basta perché il centro
 * torni a cadere al centro della pagina.
 */
.elementor-element-56a8fa9 .woocommerce-breadcrumb {
	margin-inline:
		calc((100% - var(--frasette-riga-briciole)) / 2 - 15px)
		calc((100% - var(--frasette-riga-briciole)) / 2 + 15px) !important;
}

/*
 * Scheda prodotto (widget 2eacc3b, template #58 IT e #2614 EN): il percorso
 * non sta in un contenitore a tutta pagina ma nella colonna sinistra della
 * prima sezione, che non è centrata. Il conto va rifatto partendo dalla
 * pagina: la colonna comincia a 16px del contenitore esterno + 10 di
 * imbottitura, più la centratura della scatola da 1140 quando lo schermo è più
 * largo di quella. Si toglie tutto e si aggiunge il margine della riga.
 * Verificato a 1440, 1320, 1024, 768 e 390.
 */
.elementor-element-2eacc3b .woocommerce-breadcrumb {
	width: auto;
	margin-inline: calc(
		var(--fr-lato, 40px)
		- 26px
		- max(0px, (var(--fr-vw, 100vw) - 1172px) / 2)
	) 0 !important;
}

/*
 * Archivi e shop (template #65 IT e #3095 EN): il 17/09 il widget del percorso
 * è stato spostato FUORI dalla colonna dei prodotti, in una sezione sua sopra
 * le due colonne (prima stava a fianco dei filtri e non poteva andare in riga
 * senza coprirli). Ora sta in un contenitore a tutta pagina e ci pensa la
 * regola generale qui sopra: nessuna eccezione da scrivere.
 */

/*
 * Le colonne nuove che ospitano il percorso negli archivi (#65 e #3095): via i
 * 10px che Elementor mette in cima a ogni colonna, se no il percorso cade a
 * 112 invece che a 102 come in tutte le altre viste.
 */
.elementor-element-bc65a02 > .elementor-element-populated,
.elementor-element-bc3095b > .elementor-element-populated {
	padding: 0 !important;
}