/**
 * Layout dello shortcode [nimax_catalog]. Le card prodotto arrivano già
 * stilate dal template Elementor esistente (widget-loop-grid.min.css ecc.);
 * qui definiamo l'impalcatura (colonne, sidebar) e replichiamo i valori
 * esatti del blocco filtri originale (misurati sul widget Elementor Pro
 * dal vivo: titolo 12px/900/#333, bottoni 14px/500/#4e6073, spaziature),
 * perché il nostro markup non eredita le regole scoped-per-ID di Elementor
 * da cui provenivano.
 */

.nimax-catalog {
	display: flex;
	align-items: flex-start;
	gap: 0; /* il "margine" visivo viene dal padding-right della sidebar, non da un gap qui */
	flex-wrap: wrap;
}

.nimax-catalog-sidebar {
	flex: 0 0 348px;
	max-width: 348px;
	/* Padding su tutti i lati come nel blocco originale (32px, tranne il
	 * fondo a 90px): il contenuto è inset di 32px da ogni bordo, non solo
	 * "più stretto" a destra. */
	padding: 32px 32px 90px;
	box-sizing: border-box;
}

.nimax-catalog-results {
	flex: 1 1 0;
	min-width: 0; /* evita overflow della griglia in un flex item */
	background: #F9FAFB;
	padding: 48px 48px 90px;
	box-sizing: border-box;
}

/* --- Bottone "Filtri", overlay e intestazione mobile del pannello:
 * nascosti di default (desktop), resi visibili solo sotto il breakpoint
 * mobile più in basso in questo file. --- */
.nimax-catalog-filters-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #4e6073;
	background: #fff;
	border: 1px solid #E1E3E4;
	border-radius: 6px;
	padding: 10px 16px;
	cursor: pointer;
}
.nimax-catalog-filters-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #e95d0e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}
.nimax-catalog-backdrop {
	display: none;
}
.nimax-catalog-sidebar-mobile-header {
	display: none;
}
.nimax-catalog-filters-apply {
	display: none;
}

/* --- Reset filtri: compare solo quando c'è almeno un filtro attivo --- */
.nimax-catalog-reset-filters {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: #e95d0e;
	background: none;
	border: 0;
	padding: 4px 10px 4px 10px;
	margin: 0 0 20px;
	cursor: pointer;
	text-decoration: none;
}
.nimax-catalog-reset-filters:hover {
	color: #333333;
}

/* --- "Filtri soluzioni" (icona + titolo, sopra i gruppi filtro) --- */
.nimax-catalog-filters-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0 8px;
	margin: 0 0 20px;
}
.nimax-catalog-filters-title .elementor-heading-title {
	font-family: 'Roboto', sans-serif;
	font-size: 12px !important;
	font-weight: 900 !important;
	text-transform: uppercase;
	color: #333333 !important;
	margin: 0;
}
.nimax-catalog-filters-icon {
	display: inline-flex;
	width: 10px;
	height: 10px;
}
.nimax-catalog-filters-icon svg {
	width: 100%;
	height: 100%;
}

/* --- Titoli dei gruppi filtro ("Tipo di codifica", "Mercati", ...) --- */
.nimax-catalog-filter-title {
	margin: 0 0 12px !important;
}
.nimax-catalog-filter-title .elementor-heading-title {
	font-family: 'Roboto', sans-serif;
	font-size: 10px !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	line-height: 15px;
	letter-spacing: 1px;
	color: #909CA7 !important;
	margin: 0;
}

/* --- Ogni gruppo filtro (titolo + bottoni) --- */
.nimax-catalog-filter {
	margin: 0 0 24px !important;
}
.nimax-catalog-filter .e-filter {
	display: flex;
	flex-direction: column;
	align-items: stretch !important;
	flex-wrap: wrap;
	gap: 0;
	padding: 0;
	margin: 0;
}

/* --- Bottoni filtro --- */
.nimax-catalog-filter .e-filter-item {
	font-family: 'Roboto', sans-serif;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #4e6073;
	padding: 8px 12px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	/* Voci allineate a sinistra, come i titoli dei gruppi. Larghezza bloccata
	 * al 100% con !important: lo stato attivo (.e-active) riceve altrimenti
	 * una larghezza "a misura di contenuto" da una regola riusata di Elementor,
	 * si allarga oltre il contenitore e sposta lateralmente le voci sorelle. */
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	justify-content: flex-start !important;
	text-align: left;
}
.nimax-catalog-filter .e-filter-item.e-active {
	font-weight: 700 !important;
	color: #e95d0e;
}
/* Checkbox visivo: stesso quadratino usato nell'originale (misure/bordo
 * identici), ma con lo sfondo che si colora quando selezionato — nell'originale
 * lo sfondo resta bianco anche da selezionato, rendendo la spunta bianca
 * praticamente invisibile (difetto del lavoro del fornitore, non replicato). */
.nimax-catalog-filter .e-filter-item::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(78, 96, 115, 0.2);
	border-radius: 2px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.nimax-catalog-filter .e-filter-item[aria-pressed="true"]::before {
	background-color: #e95d0e;
	border-color: #e95d0e;
	background-image: var(--nimax-check-icon);
}

/* --- Intestazione: titolo + contatore + switcher griglia/lista --- */
.nimax-catalog-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}
.nimax-catalog-title {
	font-family: 'Roboto', sans-serif;
	font-size: 30px !important;
	font-weight: 900 !important;
	line-height: 36px;
	color: #000000 !important;
	margin: 0 0 4px;
}
.nimax-catalog-header .product-count {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: rgba(78, 96, 115, 0.6);
}
.nimax-catalog-header .viewSwitcher {
	/* Uno stile globale del sito mette ".viewSwitcher" in position:absolute
	 * (pensato per il contenitore specifico dell'originale): lo neutralizziamo
	 * perché qui deve comportarsi come un normale elemento flex nell'header. */
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.nimax-catalog-header .switchView {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 8px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	cursor: pointer;
}
.nimax-catalog-header .switchView.active {
	background: #edeeef;
}
.nimax-catalog-header .switchView img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Griglia risultati --- */
.nimax-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* L'equalizzazione (JS) imposta l'altezza sul wrapper ".e-loop-item", che
 * non ha bordo/sfondo propri: la card visibile è il ".productCard" al suo
 * interno, che di suo non si estende a riempirlo e resta alla sua altezza
 * naturale (diversa da card a card). La costringiamo a riempire il wrapper. */
.nimax-catalog-grid:not(.list-view) > .e-loop-item {
	display: flex;
}
.nimax-catalog-grid:not(.list-view) > .e-loop-item > .productCard {
	height: 100% !important;
	flex: 1 1 auto;
}

/* Vista lista: una colonna, card orizzontali (immagine a sinistra, testo a
 * destra). Funzione mai stata attiva in produzione (il pulsante puntava a un
 * ID inesistente), quindi non c'è un layout originale da replicare: è un
 * layout ragionevole, da affinare a vista. */
.nimax-catalog-grid.list-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.nimax-catalog-grid.list-view > * {
	height: auto !important;
	width: 100%;
}
/* Il template della card è pensato per una colonna stretta (griglia a 3
 * colonne): alcuni elementi (es. il bottone "Scopri di più", allineato
 * "giustificato") arrivano da Elementor con larghezze fisse in pixel legate
 * a quel contesto originale. In riga orizzontale il loro contenitore è molto
 * più largo, quindi vanno ricontenuti esplicitamente. */
.nimax-catalog-grid.list-view *,
.nimax-catalog-grid.list-view *::before,
.nimax-catalog-grid.list-view *::after {
	max-width: 100%;
	box-sizing: border-box;
}
.nimax-catalog-grid.list-view .productCard {
	flex-direction: row !important;
	align-items: stretch;
}
.nimax-catalog-grid.list-view .imgBox {
	flex: 0 0 220px;
	min-height: 160px;
}
/* Il template originale mette flex-shrink:0 sulla colonna di testo (pensato
 * per la griglia, dove non deve mai restringersi): in riga orizzontale
 * questo le impedisce di adattarsi allo spazio rimasto dopo l'immagine e
 * fa traboccare tutto (bottone incluso) oltre il bordo della pagina. */
.nimax-catalog-grid.list-view .productCard > * {
	flex-shrink: 1 !important;
	min-width: 0;
}

.nimax-catalog-load-more-wrap {
	text-align: center;
	margin-top: 32px;
}

.nimax-catalog.is-loading {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.nimax-filter-count {
	opacity: 0.6;
	font-size: 0.85em;
}

@media (max-width: 1024px) {
	.nimax-catalog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nimax-catalog {
		flex-direction: column;
		/* spazio in fondo per non far coprire l'ultimo contenuto dalla barra
		 * "Filtri" fissa */
		padding-bottom: 72px;
	}
	.nimax-catalog-grid {
		grid-template-columns: 1fr;
	}

	/* La griglia è già a una colonna qui: la vista "lista" (righe orizzontali)
	 * non aggiunge una differenza reale a schermi stretti, aggiunge solo
	 * complessità e rischio di bug. Switcher nascosto, resta solo la griglia. */
	.nimax-catalog-header .viewSwitcher {
		display: none;
	}

	/* Barra "Filtri" agganciata in fondo allo schermo: resta raggiungibile
	 * scorrendo in mezzo ai risultati, ma solo mentre il blocco prodotti è
	 * (almeno in parte) a schermo — la mostra/nasconde un IntersectionObserver
	 * in JS aggiungendo/togliendo ".is-visible". */
	.nimax-catalog-filters-toggle {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		border-radius: 0;
		border-width: 1px 0 0;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
		z-index: 998;
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
	}
	.nimax-catalog-filters-toggle.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.nimax-catalog.js-transitions-ready .nimax-catalog-filters-toggle {
		transition: opacity 0.2s ease, transform 0.2s ease;
	}

	/* Overlay scuro dietro il pannello */
	.nimax-catalog-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(17, 24, 39, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s ease;
		z-index: 999;
	}
	.nimax-catalog-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Il pannello filtri diventa un cassetto che sale dal basso ("bottom
	 * sheet"), non più da destra. */
	.nimax-catalog-sidebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		max-width: none;
		max-height: 85vh;
		flex-basis: auto;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
		overflow-y: auto;
		transform: translateY(100%);
		z-index: 1000;
		padding: 12px 24px 32px;
	}
	.nimax-catalog-sidebar.is-open {
		transform: translateY(0);
	}
	/* La transizione si attiva solo dopo il primo render (vedi JS,
	 * classe "js-transitions-ready"): così il pannello parte già chiuso,
	 * senza il lampeggio "si vede aperto per un attimo e poi scompare". */
	.nimax-catalog.js-transitions-ready .nimax-catalog-sidebar {
		transition: transform 0.25s ease;
	}
	.nimax-catalog.js-transitions-ready .nimax-catalog-backdrop {
		transition: opacity 0.25s ease;
	}

	/* Maniglietta visiva in cima al pannello, tipica dei bottom sheet */
	.nimax-catalog-sidebar::before {
		content: "";
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: #E1E3E4;
		margin: 0 auto 16px;
	}

	.nimax-catalog-sidebar-mobile-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
		padding-bottom: 16px;
		border-bottom: 1px solid #E1E3E4;
	}
	.nimax-catalog-filters-title-text {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		font-weight: 900;
		color: #000;
	}
	.nimax-catalog-filters-close {
		font-size: 28px;
		line-height: 1;
		background: none;
		border: 0;
		color: #4e6073;
		cursor: pointer;
		padding: 0 4px;
	}

	/* Sopra il titolo "Filtri soluzioni" interno il pannello ha già la sua
	 * intestazione ("Filtri" + X): quella riga diventa ridondante. */
	.nimax-catalog-sidebar .nimax-catalog-filters-title {
		display: none;
	}

	.nimax-catalog-filters-apply {
		display: block;
		width: 100%;
		margin-top: 24px;
		background: #e95d0e;
		color: #fff;
		border: 0;
		border-radius: 6px;
		padding: 14px;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
	}

	body.nimax-catalog-scroll-lock {
		overflow: hidden;
	}
}