/**
 * Framework: Hyper-Fast WP
 * File dt-woo-archive.css
 * Aggiornato al 07-07-2023
 * Attualmente non incluso
 * La parte grafica di questo codice è nei file desktop-stile-0x.css
 */

/* GRID: box prodotti stessa altezza riga per riga */
.desktop .pagina-categoria ul.products, 
	.desktop .estratto-prodotti ul.products { display: grid; }
.desktop .pagina-categoria ul.products li.product, 
	.desktop .estratto-prodotti li.product { width: 100% !important; }

/* Rimuove il primo spazio vuoto */
.desktop .pagina-categoria ul.products::before, 
	.desktop .estratto-prodotti ul.products::before { content: none !important; }

/* Box con grid */
.desktop .pagina-categoria ul.products, 
	.desktop .estratto-prodotti ul.products { grid-template-columns: repeat( var(--wc-archive-numerocolonne), 1fr); grid-auto-rows: auto; 
    	grid-column-gap: var(--wc-archive-columngap); grid-row-gap: var(--wc-archive-rowgap);  }
		
	/* Dobbiamo diversificare tra i primi tre box e il quarto, che deve essere senza margine a destra */

	.woocommerce.estratto-prodotti ul.products li.product { margin-right: var(--wc-archive-columngap); }
	.woocommerce.estratto-prodotti ul.products li.product:nth-child( 4 ) { margin-right: 0px !important; }

	/* Si deve impostare nelle variabili il numero delle colonne e la percentuale della larghezza */	
	.woocommerce.estratto-prodotti ul.products li.product { width: calc( 25% - var(--wc-archive-columngap) ); }
	.woocommerce.estratto-prodotti ul.products li.product:nth-child( 4 ) { width: calc( var(--wc-archive-larghezzacolonne) ); }

.immaginedisfondo {
	background-image: url('https://www.super-fast.it/wp-content/themes/hyperfast/moduli/slider/foto/02-1600.webp');
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 100%;
	grid-column: span 2;
}