/**
 * Creativa — Quantità e prezzo nel pulsante
 * I valori sono variabili CSS: il widget Elementor le sovrascrive,
 * e puoi cambiarle anche a mano dal CSS del tema.
 */

:root{
	--cqp-verde:#234126;
	--cqp-arancia:#C55204;
	--cqp-arancia-hover:#A64203;
	--cqp-testo:#2A2A27;
	--cqp-soft:#71716B;
	--cqp-linea:#E7E2DA;
	--cqp-crema:#FAF8F3;
	--cqp-raggio:6px;
	--cqp-altezza:54px;
}

/* ---------- stepper ---------- */
.cqp-qty{
	display:inline-flex !important;
	box-shadow:none !important;
	padding:0 !important;
	align-items:stretch;
	border:1.5px solid var(--cqp-linea);
	border-radius:var(--cqp-raggio);
	overflow:hidden;
	background:#fff;
	width:auto !important;
	float:none !important;
	margin:0 10px 0 0;
	vertical-align:middle;
}

.cqp-qty .cqp-b,
.cqp-wrap .cqp-qty .cqp-b,
form.cart .cqp-qty .cqp-b{
	/* !important necessario: il tema e il widget Add To Cart di Elementor
	   colorano tutto ciò che sta dentro form.cart. Il + e il − no. */
	width:var(--cqp-lato,48px) !important;
	min-width:var(--cqp-lato,48px) !important;
	height:var(--cqp-altezza) !important;
	border:0 !important;
	border-radius:0 !important;
	background:var(--cqp-qty-fondo,#fff) !important;
	background-image:none !important;
	color:var(--cqp-testo) !important;
	font-size:20px;
	font-weight:400;
	line-height:1;
	letter-spacing:0;
	text-transform:none;
	cursor:pointer;
	padding:0 !important;
	margin:0 !important;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-appearance:none;
	appearance:none;
	box-shadow:none !important;
	text-decoration:none;
	min-height:0;
}

.cqp-qty .cqp-b:hover{ background:var(--cqp-crema) !important; color:var(--cqp-verde) !important; }
.cqp-qty .cqp-b:active{ background:var(--cqp-linea) !important; }
.cqp-qty .cqp-b:focus-visible{ outline:3px solid var(--cqp-focus,#C55204); outline-offset:-3px; }

.cqp-qty input.qty,
.cqp-wrap .cqp-qty input.qty{
	width:var(--cqp-campo,52px) !important;
	background-image:none !important;
	min-height:0 !important;
	margin:0 !important;
	height:var(--cqp-altezza);
	border:0 !important;
	border-radius:0 !important;
	text-align:center;
	font-weight:600;
	font-size:16px;
	color:var(--cqp-testo);
	background:#fff;
	padding:0 !important;
	box-shadow:none !important;
	-moz-appearance:textfield;
}

.cqp-qty input.qty::-webkit-outer-spin-button,
.cqp-qty input.qty::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

.cqp-qty input.qty:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--cqp-verde) !important; }

/* ---------- pulsante con prezzo ---------- */
.cqp-wrap form.cart{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:0;
}

.cqp-wrap form.cart .single_add_to_cart_button,
form.cart .single_add_to_cart_button.cqp-btn{
	min-height:var(--cqp-altezza);
}

.single_add_to_cart_button .cqp-prezzo{
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}

/* Il pulsante è un contenitore flex in alcuni layout: l'etichetta e
   il prezzo restano due elementi distinti, con lo spazio garantito. */
form.cart .single_add_to_cart_button{
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:0;
}

/* Stile pulsante applicato solo dentro il widget, per non
   sovrascrivere i pulsanti del tema nel resto del sito. */
.cqp-wrap .single_add_to_cart_button{
	background:var(--cqp-arancia);
	color:#fff;
	border:0;
	border-radius:var(--cqp-raggio);
	padding:0 28px;
	font-weight:600;
	line-height:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:background .18s ease;
}

.cqp-wrap .single_add_to_cart_button:hover{ background:var(--cqp-arancia-hover); }
.cqp-wrap .single_add_to_cart_button:focus-visible{ outline:3px solid var(--cqp-verde); outline-offset:2px; }
.cqp-wrap .single_add_to_cart_button:disabled,
.cqp-wrap .single_add_to_cart_button.disabled{ opacity:.55; cursor:not-allowed; }

/* pulsante a larghezza piena (interruttore del widget) */
.cqp-piena form.cart .single_add_to_cart_button{ flex:1 1 auto; }

/* larghezza piena su schermi stretti */
@media (max-width:480px){
	.cqp-wrap form.cart{ gap:10px; }
	.cqp-wrap form.cart .single_add_to_cart_button{ flex:1 1 100%; }
}

/* ---------- pagina carrello ---------- */
.woocommerce-cart-form .cqp-qty{ margin:0; }
.woocommerce-cart-form .cqp-qty .cqp-b{ width:40px; min-width:40px; height:44px; }
.woocommerce-cart-form .cqp-qty input.qty{ width:44px !important; height:44px; font-size:15px; }

/* ---------- accessibilità ---------- */
@media (prefers-reduced-motion:reduce){
	.cqp-qty .cqp-b,
	.cqp-wrap .single_add_to_cart_button{ transition:none; }
}

/* ============================================================
   v1.1 — riquadri variazione ed esito AJAX
   ============================================================ */

/* il menu a tendina resta nel DOM: serve al form di WooCommerce */
.cqp-select-nascosto{
	position:absolute !important;
	width:1px;height:1px;
	margin:-1px;padding:0;border:0;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	overflow:hidden;
	white-space:nowrap;
}

/* nasconde anche la riga "Cancella" quando i riquadri sono attivi */
.cqp-varianti ~ .reset_variations,
.woocommerce-variation-add-to-cart .reset_variations{ display:none !important; }

.cqp-varianti{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(var(--cqp-v-min,150px),1fr));
	gap:var(--cqp-v-gap,10px);
	margin:0 0 6px;
}

/* con 4 o 5 riquadri due righe pulite invece di una fila stretta */
@media (min-width:720px){
	.cqp-varianti{ grid-template-columns:repeat(auto-fit,minmax(var(--cqp-v-min,150px),1fr)); }
}
@media (max-width:480px){
	.cqp-varianti{ grid-template-columns:repeat(auto-fit,minmax(var(--cqp-v-min-mobile,132px),1fr)); gap:8px; }
}

.cqp-varianti .cqp-variante{
	position:relative;
	display:flex !important;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	gap:3px;
	min-height:var(--cqp-v-altezza,72px);
	padding:12px 14px !important;
	margin:0 !important;
	text-align:left;
	background:var(--cqp-v-fondo,#fff) !important;
	background-image:none !important;
	border:1.5px solid var(--cqp-linea) !important;
	border-radius:var(--cqp-raggio) !important;
	color:var(--cqp-testo) !important;
	cursor:pointer;
	box-shadow:none !important;
	text-transform:none;
	letter-spacing:0;
	line-height:1.3;
	transition:border-color .15s ease,background .15s ease;
	width:100%;
}

.cqp-varianti .cqp-variante:hover{ border-color:var(--cqp-verde) !important; }
.cqp-varianti .cqp-variante:focus-visible{ outline:3px solid var(--cqp-focus,#C55204); outline-offset:2px; }

.cqp-varianti .cqp-variante.attiva{
	border-color:var(--cqp-verde) !important;
	background:var(--cqp-crema) !important;
	box-shadow:inset 0 0 0 1px var(--cqp-verde) !important;
}

.cqp-varianti .cqp-variante.esaurita{
	opacity:.5;
	cursor:not-allowed;
	background:var(--cqp-crema) !important;
}
.cqp-varianti .cqp-variante.esaurita .cqp-v-titolo{ text-decoration:line-through; }

.cqp-v-titolo{
	font-size:var(--cqp-v-titolo,16px);
	font-weight:600;
	display:block;
}

.cqp-v-riga{
	font-size:13px;
	font-weight:400;
	color:var(--cqp-soft);
	display:block;
}
.cqp-v-riga.vuota{ display:none; }

/* ---------- esito dell'aggiunta AJAX ---------- */
.cqp-esito{
	display:none;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	width:100%;
	margin-top:14px;
	padding:13px 16px;
	border-radius:var(--cqp-raggio);
	font-size:14.5px;
	line-height:1.45;
	border:1px solid;
}
.cqp-esito.visibile{ display:flex; }

.cqp-esito[data-tipo="ok"]{
	background:#EDF4EC;
	border-color:var(--cqp-verde);
	color:var(--cqp-verde);
}
.cqp-esito[data-tipo="ok"] .cqp-e-testo::before{
	content:"✓";
	margin-right:8px;
	font-weight:700;
}
.cqp-esito[data-tipo="errore"]{
	background:#FCEEEC;
	border-color:#B3261E;
	color:#B3261E;
}

.cqp-e-link{
	margin-left:auto;
	color:inherit;
	font-weight:600;
	text-decoration:underline;
	text-underline-offset:3px;
	white-space:nowrap;
}
.cqp-e-link:hover{ text-decoration:none; }

/* pulsante mentre l'AJAX lavora: solo un velo, nessun blocco
   permanente. Il doppio invio lo impedisce il JavaScript. */
.single_add_to_cart_button.cqp-in-corso{
	opacity:.8;
	cursor:progress;
}

/* Alcuni temi lasciano addosso al pulsante lo stato "aggiunto":
   qui lo neutralizziamo, il carrello laterale dice già tutto. */
form.cart .single_add_to_cart_button.added::after,
form.cart .single_add_to_cart_button.added::before{ content:none !important; }
/* Link "Visualizza carrello": ultimo elemento, riga tutta sua,
   sotto ogni cosa. Le regole riguardano solo il link: nessun
   contenitore viene toccato, così il selettore quantità resta
   esattamente com'è. */
form.cart .added_to_cart,
.cqp-vai-carrello{
	/* !important solo su posizione e larghezza: colore, tipografia e
	   spaziatura restano nelle mani dei controlli "View Cart". */
	display:block !important;
	width:100% !important;
	clear:both !important;
	float:none !important;
	margin-top:14px;
	text-decoration:underline;
	text-underline-offset:3px;
	/* se il form o il suo contenitore sono flex o grid */
	flex:1 0 100% !important;
	order:99 !important;
	grid-column:1 / -1;
}
form.cart .added_to_cart:hover{ text-decoration:none; }

@media (prefers-reduced-motion:reduce){
	.cqp-varianti .cqp-variante{ transition:none; }
}

/* ============================================================
   v1.2 — via la gabbia della tabella variazioni
   ============================================================ */

/* WooCommerce stampa le variazioni dentro una <table>: la smontiamo,
   così i riquadri occupano tutta la larghezza disponibile e vanno
   in griglia regolare invece di stare in una cella stretta. */
.variations,
.variations tbody,
.variations tr,
.variations td,
.variations th{
	display:block !important;
	width:100% !important;
	max-width:none !important;
	background:transparent !important;
	border:0 !important;
	padding:0 !important;
	margin:0 !important;
	text-align:left !important;
}

.variations tr + tr{ margin-top:18px !important; }

/* L'etichetta dell'attributo ("Formato") sparisce: il titolo
   della sezione lo scrivi già tu sopra i riquadri. */
.cqp-senza-etichetta .variations th.label,
.cqp-senza-etichetta .variations .label{ display:none !important; }

/* Se invece la vuoi, togli il filtro e la mostriamo così. */
.variations th.label label{
	font-size:13px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--cqp-soft);
	font-weight:500;
	margin:0 0 10px;
	display:block;
}

/* Il prezzo che WooCommerce ripete sopra la quantità: inutile,
   c'è già in cima alla scheda e dentro il pulsante. */
.cqp-senza-prezzo-variazione .woocommerce-variation-price{ display:none !important; }

/* La disponibilità invece resta, ma più discreta. */
.woocommerce-variation-availability{
	margin:0 0 12px;
	font-size:14px;
	color:var(--cqp-soft);
}

/* Il riquadro grigio che alcuni temi mettono attorno alle variazioni */
.cqp-wrap .variations_form,
.cqp-wrap .woocommerce-variation-add-to-cart{
	background:transparent !important;
	border:0 !important;
	padding:0 !important;
}

.woocommerce-variation-add-to-cart{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:10px;
	margin-top:16px;
}

/* seconda riga del riquadro: prezzo + suffisso fiscale */
.cqp-v-riga{ line-height:1.35; }

/* ============================================================
   v1.3 — titolo sopra i riquadri variazione
   ============================================================ */

/* Solo spaziatura: tipografia, colore e dimensioni restano quelle
   dello stile globale H2 di Elementor, anche sui breakpoint. */
.cqp-titolo-varianti{
	margin:0 0 var(--cqp-titolo-spazio,14px) !important;
	padding:0 !important;
	width:100%;
}

.cqp-titolo-varianti .elementor-heading-title{
	margin:0;
}

@media (max-width:767px){
	.cqp-titolo-varianti{ margin-bottom:var(--cqp-titolo-spazio-mobile,10px) !important; }
}

/* ============================================================
   v1.5 — avviso standard WooCommerce dopo l'aggiunta AJAX
   ============================================================ */

/* Contenitore creato al volo solo se nel template non ce n'è uno:
   lo stile vero arriva dal widget Avvisi o dal tema. */
.cqp-avvisi{ margin:0 0 18px; }

/* Nessun avviso, nessuno spazio vuoto. */
.woocommerce-notices-wrapper:empty{ display:none; margin:0; padding:0; }

/* ============================================================
   v1.8 — larghezze decise dalle impostazioni, non dal layout
   ------------------------------------------------------------
   Il controllo "Layout" di Elementor (Auto / Stacked) non decide
   più le larghezze: quantità e pulsante restano compatti, e si
   allargano solo se lo scegli tu in
   WooCommerce → Creativa carrello.
   Le regole di larghezza le stampa quella pagina.
   ============================================================ */

/* distanza tra i due quando sono affiancati */
form.cart .cqp-qty{ margin-right:10px; }

/* ============================================================
   v1.9 — riquadri variazione nell'archivio prodotti
   Blocco indipendente: tutto sotto .cqp-arc, niente tocca
   il resto della card né la scheda prodotto.
   ============================================================ */

.cqp-arc{
	--arc-testo:14px;
	--arc-py:9px;
	--arc-px:12px;
	--arc-gap:8px;
	--arc-prezzo:12px;

	display:flex;
	flex-wrap:wrap;
	gap:var(--arc-gap);
	margin:10px 0 12px;
	justify-content:inherit;
}

.cqp-arc .cqp-arc-v{
	display:inline-flex !important;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	padding:var(--arc-py) var(--arc-px) !important;
	margin:0 !important;
	min-height:0;
	background:#fff !important;
	background-image:none !important;
	border:1.5px solid var(--cqp-linea) !important;
	border-radius:var(--cqp-raggio) !important;
	color:var(--cqp-testo) !important;
	font-size:var(--arc-testo);
	font-weight:600;
	line-height:1.25;
	letter-spacing:0;
	text-transform:none;
	cursor:pointer;
	box-shadow:none !important;
	transition:border-color .15s ease, background .15s ease;
	width:auto !important;
}

.cqp-arc .cqp-arc-v:hover{ border-color:var(--cqp-verde) !important; }
.cqp-arc .cqp-arc-v:focus-visible{ outline:3px solid var(--cqp-arancia); outline-offset:2px; }

.cqp-arc .cqp-arc-v.attiva{
	border-color:var(--cqp-verde) !important;
	background:var(--cqp-crema) !important;
	box-shadow:inset 0 0 0 1px var(--cqp-verde) !important;
}

.cqp-arc .cqp-arc-v.esaurita{
	opacity:.45;
	cursor:not-allowed;
}
.cqp-arc .cqp-arc-v.esaurita .cqp-arc-t{ text-decoration:line-through; }

.cqp-arc .cqp-arc-p{
	font-size:var(--arc-prezzo);
	font-weight:400;
	color:var(--cqp-soft);
	white-space:nowrap;
}

/* il prezzo della card cambia con il formato scelto */
.cqp-arc-prezzo-scelto{ display:inline; }

/* pulsante della card mentre lavora */
.cqp-arc-caricamento{ opacity:.7; cursor:progress; }

@media (prefers-reduced-motion:reduce){
	.cqp-arc .cqp-arc-v{ transition:none; }
}

/* ============================================================
   v1.9.1 — allineamento e tre stili grafici per l'archivio
   ============================================================ */

/* ---------- allineamento ---------- */
.cqp-arc.arc-sinistra{ justify-content:flex-start; }
.cqp-arc.arc-centro{ justify-content:center; }
.cqp-arc.arc-destra{ justify-content:flex-end; }

.cqp-arc.arc-giustificato{
	justify-content:stretch;
	width:100%;
}
.cqp-arc.arc-giustificato .cqp-arc-v{
	flex:1 1 0 !important;
	min-width:0;
	text-align:center;
}

/* ============================================================
   STILE 1 — riquadri con bordo, prezzo sotto il formato
   (è quello attuale: le regole base bastano)
   ============================================================ */

/* ============================================================
   STILE 2 — pillole su una riga: formato e prezzo accanto
   ============================================================ */
.cqp-arc.stile-2{ gap:calc(var(--arc-gap) - 2px); }

.cqp-arc.stile-2 .cqp-arc-v{
	flex-direction:row !important;
	align-items:baseline;
	gap:7px;
	border-radius:100px !important;
	border-width:1px !important;
	padding:calc(var(--arc-py) - 2px) calc(var(--arc-px) + 4px) !important;
	background:var(--cqp-crema) !important;
	font-weight:500;
}

.cqp-arc.stile-2 .cqp-arc-p{
	font-size:calc(var(--arc-prezzo) - .5px);
	color:var(--cqp-soft);
}

.cqp-arc.stile-2 .cqp-arc-v.attiva{
	background:var(--cqp-verde) !important;
	border-color:var(--cqp-verde) !important;
	color:#fff !important;
	box-shadow:none !important;
}
.cqp-arc.stile-2 .cqp-arc-v.attiva .cqp-arc-p{ color:rgba(255,255,255,.85); }

/* ============================================================
   STILE 3 — barra segmentata: riquadri uniti, un solo bordo
   ============================================================ */
.cqp-arc.stile-3{
	gap:0;
	border:1.5px solid var(--cqp-linea);
	border-radius:var(--cqp-raggio);
	overflow:hidden;
	display:inline-flex;
	flex-wrap:nowrap;
	max-width:100%;
}
.cqp-arc.stile-3.arc-giustificato{ display:flex; width:100%; }
.cqp-arc.stile-3.arc-centro{ margin-left:auto; margin-right:auto; }
.cqp-arc.stile-3.arc-destra{ margin-left:auto; }

.cqp-arc.stile-3 .cqp-arc-v{
	border:0 !important;
	border-radius:0 !important;
	border-right:1px solid var(--cqp-linea) !important;
	flex:1 1 auto !important;
	background:#fff !important;
	box-shadow:none !important;
}
.cqp-arc.stile-3 .cqp-arc-v:last-child{ border-right:0 !important; }

.cqp-arc.stile-3 .cqp-arc-v.attiva{
	background:var(--cqp-verde) !important;
	color:#fff !important;
	box-shadow:none !important;
}
.cqp-arc.stile-3 .cqp-arc-v.attiva .cqp-arc-p{ color:rgba(255,255,255,.85); }

/* su schermi stretti la barra segmentata va comunque a capo */
@media (max-width:420px){
	.cqp-arc.stile-3{ flex-wrap:wrap; }
	.cqp-arc.stile-3 .cqp-arc-v{ flex:1 1 33%; }
}

/* ============================================================
   v1.9.3 — convivenza con altri plugin di quantità
   ============================================================ */

/* I comandi + e − di temi o altri plugin, quando usiamo i nostri. */
.cqp-stepper-doppio{ display:none !important; }

/* Il contenitore che quei plugin creano attorno al campo non deve
   aggiungere bordi, sfondi o spazi ai nostri. */
.qib-container,
.quantity-wrapper,
.quantity-nav{
	display:inline-flex !important;
	align-items:center;
	border:0 !important;
	background:none !important;
	padding:0 !important;
	margin:0 !important;
	gap:0 !important;
	width:auto !important;
}

/* Se invece scegli di tenere i comandi dell'altro plugin, il nostro
   riquadro resta neutro e non si sovrappone al loro stile. */
.cqp-qty-esterna{
	border:0 !important;
	background:none !important;
	padding:0 !important;
}

/* ============================================================
   v1.9.4 — il riquadro tiene il suo aspetto ovunque
   ------------------------------------------------------------
   Nelle card dell'archivio molti temi azzerano bordo e sfondo di
   .quantity e impongono al campo un'altezza fissa più bassa dei
   comandi: il riquadro spariva e il numero restava in alto.
   Queste regole valgono sia nella scheda sia nell'archivio, e
   non toccano il caso in cui hai scelto di usare i comandi di
   un altro plugin (.cqp-qty-esterna).
   ============================================================ */

.cqp-qty:not(.cqp-qty-esterna){
	border:1.5px solid var(--cqp-linea) !important;
	border-radius:var(--cqp-raggio) !important;
	background:#fff !important;
	align-items:stretch !important;
	overflow:hidden !important;
	box-sizing:border-box;
}

.cqp-qty:not(.cqp-qty-esterna) input.qty{
	height:auto !important;
	align-self:stretch !important;
	padding:0 !important;
	line-height:normal !important;
	text-align:center !important;
	border:0 !important;
	background:transparent !important;
	box-shadow:none !important;
}

.cqp-qty:not(.cqp-qty-esterna) .cqp-b{
	align-self:stretch !important;
	height:auto !important;
}

/* ============================================================
   v1.10 — selettore quantità nelle card dell'archivio
   ============================================================ */

.cqp-arc-qty{
	display:flex;
	margin:10px 0;
}
.cqp-arc-qty.arc-sinistra{ justify-content:flex-start; }
.cqp-arc-qty.arc-centro{ justify-content:center; }
.cqp-arc-qty.arc-destra{ justify-content:flex-end; }
.cqp-arc-qty.arc-giustificato{ justify-content:stretch; }
.cqp-arc-qty.arc-giustificato .cqp-qty{ width:100% !important; flex:1 1 100% !important; }
.cqp-arc-qty.arc-giustificato .cqp-qty input.qty{ flex:1 1 auto !important; width:auto !important; }

/* nelle card il riquadro è un po' più basso che nella scheda */
.cqp-arc-qty .cqp-qty{ --cqp-altezza:46px; }
.cqp-arc-qty .cqp-qty .cqp-b{ width:42px !important; min-width:42px !important; font-size:18px; }
.cqp-arc-qty .cqp-qty input.qty{ width:46px !important; font-size:15px; }

/* l'etichetta nascosta di WooCommerce non deve occupare spazio */
.cqp-arc-qty .screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ============================================================
   v1.10.3 — i riquadri vanno a capo invece di allargare la card
   ------------------------------------------------------------
   Le card sono elementi di griglia: con min-width:auto il loro
   contenuto più largo detta la larghezza della colonna, così
   quattro riquadri in fila allargavano la card e su telefono
   facevano sbordare la pagina.
   ============================================================ */

.cqp-card{
	min-width:0 !important;
	max-width:100% !important;
}

.cqp-arc{
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	flex-wrap:wrap !important;
}

.cqp-arc .cqp-arc-v{
	max-width:100%;
	min-width:0;
}

/* anche la barra segmentata va a capo quando non ci sta */
.cqp-arc.stile-3{
	flex-wrap:wrap !important;
	width:100% !important;
}

/* ---- numero fisso di riquadri per riga ---- */
.cqp-arc.col-2,
.cqp-arc.col-3,
.cqp-arc.col-4{
	display:grid !important;
	align-items:stretch;
}
.cqp-arc.col-2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
.cqp-arc.col-3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.cqp-arc.col-4{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }

.cqp-arc[class*="col-"] .cqp-arc-v{ width:100% !important; }

/* sotto i 480 px al massimo due per riga, comunque sia impostato */
@media (max-width:480px){
	.cqp-arc.col-3,
	.cqp-arc.col-4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}