/* ============================================================================
 * nfp-correzioni.css — le nostre correzioni alla testata dello shop.
 *
 * Va caricato SUBITO DOPO nfp-header.css, mai prima: quel file e' la copia
 * congelata dei fogli di stile del sito WordPress, e alcune sue regole vanno
 * corrette proprio perche' allo shop non appartengono. Se questo file venisse
 * caricato prima (per esempio mettendolo in css/autoload/, da dove PrestaShop
 * carica da solo) perderebbe la partita a parita' di specificita'.
 *
 * Separato dal congelato di proposito: li' non si mette mano, qui si.
 *
 * The Crew, 30/07/2026.
 * ========================================================================= */


/* --- 1. La barra della paginazione ---------------------------------------
 *
 * Difetto segnalato da Giuseppe: il tasto verde «Confronta (0)» finiva sopra
 * il «Successivo ›», illeggibili tutti e due. C'era da prima dei nostri
 * interventi.
 *
 * Misurato su Safari a 1680, 1440, 1280 e 1024px: la sovrapposizione c'era
 * SEMPRE, di 36px esatti — quindi non era mancanza di spazio. Di spazio ce
 * n'e' d'avanzo: il contenuto della riga occupa 780px su 1250 disponibili.
 *
 * La causa e' una regola del tema WordPress hello-elementor che finisce qui
 * perche' il nome della classe coincide:
 *
 *     .pagination { display:flex; justify-content:space-between; margin:20px auto }
 *
 * E' la paginazione degli articoli del blog del sito. Qui colpisce il
 * <div class="pagination"> del tema default-bootstrap, che contiene due cose:
 * il bottone «Visualizza tutto» e l'elenco delle pagine. Con
 * `space-between` quei due vengono spinti agli estremi di un box troppo
 * stretto, e l'elenco sborda oltre il bordo destro finendo sotto il
 * «Confronta».
 *
 * ATTENZIONE, i due elementi si chiamano uguale: c'e' un <div class="pagination">
 * che contiene un <ul class="pagination">, e quella da correggere e' la regola
 * sul DIV. Correggere solo l'UL sposta il sintomo senza risolverlo — provato.
 *
 * Il flex si tiene (togliendolo, «Visualizza tutto» e l'elenco si
 * sovrappongono: provato anche quello) ma si sistemano le tre cose sbagliate:
 * niente `space-between`, larghezza dal contenuto e non fissa, e gli elementi
 * in fila senza andare a capo.
 *
 * NOTA: e' il secondo mismatch documentato dopo il centraggio del footer di
 * luglio. Markup del 2021 vestito con il CSS di WordPress di oggi. Congelare
 * li ha fermati dove sono, non li ripara: ce ne sono altri non ancora notati.
 */
.content_sortPagiBar div.pagination,
.top-pagination-content div.pagination,
.bottom-pagination-content div.pagination {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	gap: 18px;
	width: auto;
	margin: 20px 0;
}

.content_sortPagiBar div.pagination > * {
	flex: 0 0 auto;
	float: none;
	margin: 0;
}

/* I <li> in inline-block invece che in float: cosi' la larghezza dell'elenco
   e' quella vera del contenuto — la larghezza di un box in float non tiene
   conto dei float dei figli — e «Successivo ›» resta in riga. */
.content_sortPagiBar ul.pagination {
	display: inline-block;
	margin: 0;
	padding-left: 0;
	white-space: nowrap;
	vertical-align: middle;
}
.content_sortPagiBar ul.pagination > li {
	float: none;
	display: inline-block;
	vertical-align: middle;
}


/* --- 1a. Gli elementi della barra allineati sulla stessa linea -----------
 *
 * Segnalato da Giuseppe: «l'allineamento in verticale dei tasti, mi sembrano
 * ciascuno a suo». Misurato a 1728px, i tre elementi della barra avevano il
 * centro a tre altezze diverse — 695, 700 e 719 — e la barra risultava alta
 * 107px per contenere 45px di roba.
 *
 * Colpa dei float: «Mostrando N articoli» va a sinistra, elenco pagine e
 * «Confronta» a destra, e ognuno si appoggia dove capita senza che nulla li
 * metta in riga.
 *
 * Rimedio: la barra diventa flex con `align-items:center`, che e' il modo
 * diretto di dire «tutti sulla stessa linea». L'ordine va ridichiarato con
 * `order` perche' nel markup gli elementi stanno al contrario di come si
 * vedono: prima il «Confronta», poi le pagine, per ultimo il conteggio.
 * Il `margin-right:auto` sul conteggio tiene lui a sinistra e spinge gli
 * altri due a destra, come adesso.
 */
.content_sortPagiBar .top-pagination-content,
.content_sortPagiBar .bottom-pagination-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* Allineati a destra: cosi' quando lo spazio non basta e il «Confronta»
	   va a capo — succede intorno ai 1440px — finisce comunque a destra e non
	   sotto il conteggio, dove sembrerebbe un errore. */
	justify-content: flex-end;
	gap: 14px;
}

.content_sortPagiBar .top-pagination-content > *,
.content_sortPagiBar .bottom-pagination-content > * {
	float: none;
	margin-top: 0;
	margin-bottom: 0;
}

.content_sortPagiBar .top-pagination-content .product-count,
.content_sortPagiBar .bottom-pagination-content .product-count {
	order: 1;
	margin-right: auto;
}
.content_sortPagiBar .top-pagination-content div.pagination,
.content_sortPagiBar .bottom-pagination-content div.pagination {
	order: 2;
	margin: 0;
}
.content_sortPagiBar .top-pagination-content .compare-form,
.content_sortPagiBar .bottom-pagination-content .compare-form {
	order: 3;
}


/* --- 1b. Il marrone della barra in alto ----------------------------------
 *
 * Segnalato da Giuseppe: «il marrone mi sembra diverso, mi sembra piu' scuro
 * quello di prestashop». Misurato, ed e' cosi':
 *
 *     sito  #482E15  rgb(72, 46, 21)
 *     shop  #3C281C  rgb(60, 40, 28)     <- piu' scuro e piu' freddo
 *
 * Il colore giusto e' quello del sito, che e' anche quello dichiarato nel
 * template Elementor dell'header (sezione 0b09198).
 */
#header .nav {
	background-color: #482E15;
}


/* --- 2. La testata alla stessa misura del sito ---------------------------
 *
 * Sul sito il logo NON ha una misura fissa: e' largo il 30% della finestra
 * (elemento Elementor 78999a5), quindi cresce con lo schermo — 432px a 1440,
 * 518px a 1728. Il primo tentativo lo aveva fissato a 432px: coincideva a
 * 1440 e su schermi piu' grandi tornava a sembrare piu' piccolo del sito.
 * Ora segue la finestra, con `width:30vw` (nel CSS in header.tpl).
 *
 * Perche' ci stia, la colonna centrale della testata passa al 45% e le due
 * laterali al 27,5%. E il container della testata va a 1300px come quello del
 * sito, invece dei 1170px fissi di Bootstrap: e' anche cio' che allinea il
 * «CONTATTACI SUBITO» della barra in alto, che sul sito parte dal bordo del
 * container mentre qui partiva 150px piu' a destra.
 */
@media (min-width: 992px) {
	#header .container {
		width: 100%;
		max-width: 1300px;
	}
	#header #search_block_top.col-sm-4 {
		width: 27.5%;
	}
	#header .elementor-element-22d3c9e7.col-sm-4 {
		width: 45%;
	}
	#header #search_block_top.col-sm-4 ~ .col-sm-4:not(.elementor-element-22d3c9e7) {
		width: 27.5%;
	}
}


/* ==========================================================================
 * PROVA — TESTATA MOBILE come quella del sito           (The Crew, 30/07/2026)
 *
 * PER TORNARE INDIETRO: cancellare tutto quello che sta da qui alla fine del
 * file, e alzare il ?v= in header.tpl. Non c'e' altro da disfare: il markup
 * non e' stato toccato e queste regole valgono solo sotto i 768px.
 *
 * Il problema, misurato a 430px:
 *
 *     sito   header alto 192px — logo a sinistra, hamburger a destra, in riga
 *     shop   header alto 448px — cinque blocchi impilati uno sotto l'altro
 *
 * Scelta di Giuseppe: logo a sinistra, carrello e menu a destra sulla stessa
 * riga, ricerca sotto. Il carrello resta visibile — su un ecommerce conta —
 * ma ridotto a icona.
 *
 * La difficolta': logo, carrello e ricerca stanno dentro `.container > .row`,
 * mentre l'hamburger sta FUORI, in un blocco Elementor fratello. Per metterli
 * in fila senza toccare il markup si usa `display: contents` sui due
 * contenitori di mezzo: i loro figli salgono di livello e diventano figli del
 * flex esterno, dove si dispongono con `order`.
 * ========================================================================== */

@media (max-width: 767px) {

	/* l'unico antenato comune dei quattro blocchi */
	#header > div:has(> .elementor.elementor-7) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 10px;
	}

	/* sciolti: i figli salgono di livello e diventano ordinabili */
	#header > div:has(> .elementor.elementor-7) > .container,
	#header > div:has(> .elementor.elementor-7) > .container > .row {
		display: contents;
	}

	/* 1. logo a sinistra */
	#header .elementor-element-22d3c9e7.col-sm-4 {
		order: 1;
		/* `flex: 0 1 auto` e non `1 1`: con il grow la colonna si allargava a
		   riempire lo spazio — misurata 300px su 370 disponibili — e il menu,
		   che ne vuole un centinaio, finiva a capo. Su uno schermo da 430 ci
		   stava per un soffio, su uno da 390 no. */
		flex: 0 1 auto;
		width: auto;
		max-width: 46vw;
		text-align: left;
		padding: 0;
	}
	#header .elementor-element-22d3c9e7 .elementor-widget-container {
		margin: 0;
	}
	#header .elementor-widget-image .logo-nfp {
		width: 46vw;
		max-width: 230px;
	}

	/* 2. carrello a destra, ridotto a icona: via il testo «Carrello» e il
	      «(vuoto)», resta il simbolo */
	#header .col-sm-4:not(#search_block_top):not(.elementor-element-22d3c9e7) {
		order: 2;
		width: auto;
		flex: 0 0 auto;
		padding: 0;
	}
	#header .shopping_cart {
		margin: 0;
		padding: 0;
	}
	#header .shopping_cart > a:first-child {
		padding: 8px 10px;
	}
	#header .shopping_cart > a:first-child b,
	#header .shopping_cart .ajax_cart_no_product,
	#header .shopping_cart .ajax_cart_product_txt,
	#header .shopping_cart .ajax_cart_product_txt_s {
		display: none;
	}

	/* 3. hamburger, subito dopo il carrello */
	#header .elementor.elementor-7 {
		order: 3;
		width: auto;
		flex: 0 0 auto;
		margin-left: 14px;   /* era attaccato al carrello */
	}
	#header .elementor.elementor-7 .elementor-container,
	#header .elementor.elementor-7 .elementor-row,
	#header .elementor.elementor-7 .elementor-column,
	#header .elementor.elementor-7 .elementor-column-wrap,
	#header .elementor.elementor-7 .elementor-widget-wrap,
	#header .elementor.elementor-7 .elementor-widget,
	#header .elementor.elementor-7 .elementor-widget-container,
	#header .elementor.elementor-7 .elementor-section {
		padding: 0;
		margin: 0;
		width: auto;
	}
	/* il bottone del menu compatto: prima il blocco misurava 114px per
	   contenere un'icona da 13 */
	#header .elementor.elementor-7 .elementor-menu-toggle {
		margin: 0;
		padding: 4px;
	}
	/* Il pulsante era 13x33 — un carattere «=» grande quanto il testo. Sul
	   sito l'hamburger e' 38x38, che su un telefono e' anche la misura minima
	   perche' sia comodo da toccare. */
	#header .elementor.elementor-7 .pulsante-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		font-size: 30px;
		line-height: 1;
		font-style: normal;
	}

	/* 3b. Il menu si apre SOTTO la testata e a tutta larghezza, come sul sito.
	 *
	 * Senza queste righe il dropdown si apriva dentro il blocco del menu, che
	 * ora e' largo una quarantina di pixel: veniva fuori una colonna stretta
	 * appoggiata a destra, con le voci allineate a destra sopra il logo.
	 *
	 * Sul sito (misurato a 390px) il dropdown e' `position:absolute`, largo
	 * quanto lo schermo — x0-390 — con le voci allineate a sinistra. Qui si fa
	 * lo stesso, ancorandolo al contenitore della testata invece che al
	 * bloccheto del menu. */
	/* Il riferimento resta il contenitore della testata, che e' largo quanto lo
	   schermo: ancorandolo al blocchetto del menu il pannello sbordava a
	   sinistra di 61px, perche' quel blocchetto sta a destra e non al centro. */
	#header > div:has(> .elementor.elementor-7) {
		position: relative;
	}
	/* I contenitori intermedi del blocco menu vanno resi `static`, altrimenti
	   uno di loro fa da riferimento al dropdown e il `width:100%` qui sotto si
	   calcola su un blocchetto largo 29px invece che sullo schermo. */
	#header .elementor.elementor-7 .elementor-widget-nav-menu,
	#header .elementor.elementor-7 .elementor-widget-container,
	#header .elementor.elementor-7 .elementor-widget-wrap,
	#header .elementor.elementor-7 .elementor-column-wrap,
	#header .elementor.elementor-7 .elementor-column,
	#header .elementor.elementor-7 .elementor-row,
	#header .elementor.elementor-7 .elementor-container,
	#header .elementor.elementor-7 .elementor-section,
	#header .elementor.elementor-7 .elementor-menu-toggle {
		position: static;
	}

	/* Il pannello parte dove comincia la barra di ricerca, cosi' la copre e si
	   apre subito sotto l'hamburger invece che sotto tutta la testata.
	   I 63px sono l'altezza della ricerca (55) piu' il suo margine (8): e'
	   l'ultima riga del contenitore, quindi `100% - 63` e' il suo bordo alto. */
	#header .elementor.elementor-7 .elementor-nav-menu__container {
		position: absolute !important;
		top: calc(100% - 63px);
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: none !important;
		margin-top: 0 !important;
		background: #fff;
		z-index: 9997;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
	}
	#header .elementor.elementor-7 .elementor-nav-menu--dropdown .elementor-item {
		text-align: left;
		padding: 12px 16px;
	}

	/* L'apertura del menu va forzata a mano. Elementor la governa con
	 *
	 *     max-height: var(--menu-height)
	 *
	 * ma qui quella variabile non si risolve, e il dropdown restava a
	 * `max-height:0` anche con il toggle attivo: si apriva un pannello alto
	 * zero, con le voci schiacciate a 5px l'una. */
	#header.nfp-menu-aperto .elementor.elementor-7 .elementor-nav-menu__container {
		max-height: 80vh !important;
		transform: scaleY(1) !important;
		overflow-y: auto;
	}

	/* 4. la ricerca va a capo, tutta larga */
	#header #search_block_top.col-sm-4 {
		order: 4;
		width: 100%;
		flex: 0 0 100%;
		padding: 8px 0 0 0;
	}
}


/* ==========================================================================
 * PROVA — MOBILE: prima i prodotti, poi le promozioni  (The Crew, 31/07/2026)
 *
 * PER TORNARE INDIETRO: cancellare questo blocco e alzare il ?v=.
 *
 * Richiesta di Giuseppe: *«non conviene far vedere subito i prodotti e dopo le
 * promo? si scorre troppo»*. Misurato nella pagina categoria a 430px:
 *
 *     filtri (categorie + marchi)      116 px
 *     banner promozioni              2.387 px      <- il 92%
 *     ------------------------------------------
 *     da scorrere prima del 1o prodotto  2.601 px
 *
 * Una decina di scrollate a vuoto prima di vedere un prodotto. I filtri
 * restano sopra, come chiesto: sono 116px, non danno fastidio.
 *
 * `#left_column` e `#center_column` sono fratelli dentro `.row`, ma le promo
 * stanno DENTRO la colonna sinistra insieme ai filtri. Stesso metodo della
 * testata: `display:contents` scioglie la colonna, i suoi figli salgono di
 * livello e si riordinano con `order`.
 * ========================================================================== */

@media (max-width: 767px) {

	#columns > .row:has(> #center_column) {
		display: flex;
		flex-direction: column;
	}

	/* sciolta: filtri e promo diventano fratelli dei prodotti */
	#columns > .row > #left_column {
		display: contents;
	}

	/* Sciogliendo la colonna con `display:contents` sparisce anche il suo
	   padding, che serviva a compensare i margini negativi della griglia
	   Bootstrap dentro i banner: senza, `ul.htmlcontent-home` diventava largo
	   404px su 390 di schermo e la pagina scorreva in orizzontale.
	   Il padding va quindi rimesso sui blocchi che sono saliti di livello. */
	#columns > .row > #left_column > * {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 1. i filtri restano in cima */
	#columns > .row > #left_column > .block:not(#htmlcontent_left) {
		order: 1;
	}

	/* 2. i prodotti subito dopo */
	#columns > .row > #center_column {
		order: 2;
	}

	/* 3. promozioni e box informazioni in fondo */
	#columns > .row > #left_column > #htmlcontent_left {
		order: 3;
	}
	#columns > .row > #left_column > #informations_block_left_1 {
		order: 4;
	}
}


/* --- Mobile: la barra sopra i prodotti non attaccata ai bordi -------------
 *
 * Segnalato da Giuseppe: «il tasto visualizza tutto e' attaccato al margine a
 * sinistra». Su mobile gli elementi della barra si impilano e, senza padding,
 * partono dal bordo dello schermo.
 */
@media (max-width: 767px) {
	.content_sortPagiBar .top-pagination-content,
	.content_sortPagiBar .bottom-pagination-content {
		padding-left: 15px;
		padding-right: 15px;
	}
}


/* --- Mobile: la paginazione puo' andare a capo ---------------------------
 *
 * Su desktop l'elenco pagine sta su una riga sola grazie a `white-space:nowrap`
 * (vedi punto 1). Su uno schermo da 390px pero' quel blocco vuole 405px e,
 * non potendo spezzarsi, sbordava a sinistra fino a x-53.
 * Sotto i 768px si lascia quindi andare a capo.
 */
@media (max-width: 767px) {
	.content_sortPagiBar div.pagination,
	.content_sortPagiBar ul.pagination {
		white-space: normal;
		flex-wrap: wrap;
		justify-content: center;
	}
	.content_sortPagiBar div.pagination {
		width: 100%;
	}
}


/* --- Mobile: niente «Visualizza tutto» -----------------------------------
 *
 * Su uno schermo da 390px il blocco «Visualizza tutto» (114px) e l'elenco
 * pagine (222px) vogliono insieme 336px, e la riga ne offre 314: finivano su
 * due righe, con il bottone isolato sopra l'elenco. La barra diventava alta
 * 233px per quattro righe di roba.
 *
 * Toglierlo e' anche la scelta giusta nel merito: «Visualizza tutto» carica
 * TUTTI i prodotti della categoria in una pagina sola — nella categoria Nuovo
 * sono 2.803 — e su un telefono e' l'ultima cosa che si vuole far succedere.
 * Su desktop resta.
 */
@media (max-width: 767px) {
	.content_sortPagiBar div.pagination .showall {
		display: none;
	}
}