/**
 * Scheda prodotto CN Garden — struttura AgriEuro.
 *
 * Scritto mobile-first: le regole base valgono sul telefono, i breakpoint
 * aggiungono le due colonne e le griglie man mano che c'e' spazio.
 * L'ordine del markup e' gia' quello giusto per il mobile (titolo, galleria,
 * acquisto, dati tecnici, servizi, accessori, descrizione, recensioni),
 * quindi non serve riordinare nulla con flex/order.
 *
 * Breakpoint:
 *   base      fino a 599px   telefono
 *   600px     tablet verticale
 *   900px     tablet orizzontale / laptop piccolo — parte il layout a 2 colonne
 *   1200px    desktop
 */

/* ==========================================================================
   Contenitore generale
   ========================================================================== */
.cng-product {
	--cng-buybox-width: 380px;
}

.single-product .cng-product {
	font-family: var(--cng-font-body);
	color: var(--cng-color-ink);
}

/* Sul telefono il percorso sta su una riga sola e scorre di lato: a capo
   occuperebbe tre righe di spazio prima ancora del titolo. */
.single-product .woocommerce-breadcrumb {
	margin-bottom: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	font-size: 12px;
	color: var(--cng-color-muted);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.single-product .woocommerce-breadcrumb::-webkit-scrollbar {
	display: none;
}

/* ==========================================================================
   1-2. Fascia superiore: titolo + livello/recensioni | codici
   ========================================================================== */
/*
 * Sul telefono questa fascia deve restare bassa: se occupa mezza schermata,
 * la foto del prodotto finisce sotto la piega e il cliente non vede cosa sta
 * comprando. Da 600px in su torna ariosa.
 */
.cng-product-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: var(--cng-space-md);
}

/*
 * Sul telefono la fascia superiore e' piatta: niente cornici ne' sfondi.
 * I riquadri servono da tablet in su, dove separano due blocchi affiancati;
 * in colonna singola aggiungono solo bordi e padding da scrollare.
 */
.cng-product-header,
.cng-product-ids {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.cng-product-header .product_title {
	margin: 0 0 8px;
	font-family: var(--cng-font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Riga delle caratteristiche chiave: livello, recensioni, garanzia.
   Sono i tre elementi che il cliente guarda per primi, quindi hanno
   dimensione piena, non da etichetta. */
/* Livello e recensioni affiancati, garanzia su una riga sua sotto: tre
   riquadri impilati costerebbero oltre 200 pixel di altezza. */
.cng-product-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	padding-top: 8px;
	border-top: 1px solid var(--cng-color-border);
}

.cng-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 0;
	margin: 0;
	padding: 4px 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--cng-font-body);
	color: var(--cng-color-ink);
	text-align: left;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cng-feature-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 0;
	text-align: center;
}

.cng-feature-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.cng-feature-sub {
	font-size: 11px;
	color: var(--cng-color-muted);
	line-height: 1.3;
}

/* Livello e recensioni sono cliccabili: devono sembrarlo. */
.cng-feature-level,
.cng-feature-rating {
	cursor: pointer;
}

/* Un filetto sottile fra le due colonne, al posto delle cornici. */
.cng-feature-rating {
	border-left: 1px solid var(--cng-color-border);
}

.cng-feature-level:hover,
.cng-feature-level:focus-visible,
.cng-feature-rating:hover,
.cng-feature-rating:focus-visible {
	background: var(--cng-color-trust-bg);
	color: var(--cng-color-ink);
}

.cng-feature-level .cng-feature-sub {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cng-rating-value {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cng-feature-rating .star-rating {
	margin: 0 0 2px;
	font-size: 15px;
	color: var(--cng-color-orange);
}

.cng-feature-rating .star-rating::before,
.cng-feature-rating .star-rating span::before {
	color: var(--cng-color-orange);
}

/* La garanzia e' la meno urgente delle tre: su telefono va a tutta riga,
   compatta, sotto a livello e recensioni. */
.cng-feature-warranty {
	grid-column: 1 / -1;
	flex-direction: row;
	gap: 6px;
	padding: 6px 0 0;
	border-top: 1px solid var(--cng-color-border);
	color: var(--cng-color-muted);
}

.cng-feature-warranty .cng-feature-title {
	font-size: 12px;
	font-weight: 600;
}

.cng-feature-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: currentColor;
	opacity: 0.5;
}

/* Scudo della garanzia, disegnato in CSS per non caricare un'immagine. */
.cng-icon-shield {
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6.5c0 5-3.5 8.2-8 9.5-4.5-1.3-8-4.5-8-9.5V5.5z'/%3E%3Cpath d='m9 12 2 2 4.5-4.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3v6.5c0 5-3.5 8.2-8 9.5-4.5-1.3-8-4.5-8-9.5V5.5z'/%3E%3Cpath d='m9 12 2 2 4.5-4.5'/%3E%3C/svg%3E");
}

/* Barre del livello, versione grande della fascia superiore. */
.cng-level-bars-large {
	height: 18px;
	gap: 2px;
}

.cng-level-bars-large .cng-level-bar {
	width: 5px;
	border-radius: 2px;
}

/* --- Riquadro codici --- */
.cng-product-ids {
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
	font-size: 13px;
}

/* Tre riquadrini affiancati, come sul mobile di AgriEuro, con etichetta e
   codice sulla STESSA riga: "ID: CNG609387" si legge come un'unica cosa,
   mentre su due righe sembravano due informazioni diverse.
   Larghezza a contenuto (flex, non griglia a terzi fissi): l'EAN e' molto piu'
   lungo dell'MPN, e a terzi uguali il piu' lungo andrebbe a capo mentre gli
   altri due sprecherebbero spazio. Se proprio non ci stanno, vanno a capo
   interi invece di spezzare un codice. */
.cng-codes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.cng-code {
	display: flex;
	flex: 1 1 auto;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--cng-color-bg);
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}

.cng-code-label {
	color: var(--cng-color-muted);
}

.cng-code-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cng-brand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 8px;
	padding-top: 8px;
	border-top: 1px solid var(--cng-color-border);
}

.cng-brand-link,
.cng-brand-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--cng-color-forest);
	text-decoration: none;
}

.cng-brand-link:hover,
.cng-brand-link:focus {
	text-decoration: underline;
}

.cng-brand-service {
	color: var(--cng-color-muted);
}

/* ==========================================================================
   3. Corpo: galleria + riquadro acquisto
   ========================================================================== */
.cng-product-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-lg);
	margin-bottom: var(--cng-space-xl);
}

.cng-product-media {
	position: relative;
	min-width: 0;
}

.cng-product-media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.cng-product-media .woocommerce-product-gallery__image img {
	border-radius: var(--cng-radius-card);
}

.cng-product-media .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--cng-color-orange);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Riquadro acquisto --- */
.cng-product-main .cng-buybox {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: var(--cng-space-md);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
	box-shadow: var(--cng-shadow-card);
}

/* Disponibilita', spedizione, ritiro, reso */
.cng-availability {
	display: grid;
	gap: 10px;
	padding-bottom: var(--cng-space-md);
	margin-bottom: var(--cng-space-md);
	border-bottom: 1px solid var(--cng-color-border);
}

.cng-avail-row {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	align-items: start;
	font-size: 14px;
}

.cng-avail-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cng-avail-text strong {
	font-weight: 600;
}

.cng-avail-text span {
	color: var(--cng-color-muted);
	font-size: 13px;
}

/* Il pallino colorato sostituisce un'icona: zero richieste in piu', si adatta al colore del tema. */
.cng-avail-icon {
	width: 10px;
	height: 10px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--cng-color-muted);
}

.cng-avail-row.is-available .cng-avail-icon {
	background: var(--cng-color-success);
	box-shadow: 0 0 0 4px rgba(47, 122, 69, 0.15);
}

.cng-avail-row.is-available strong {
	color: var(--cng-color-success);
}

.cng-avail-row.is-unavailable .cng-avail-icon {
	background: #B4402A;
}

.cng-avail-row.is-shipping .cng-avail-icon,
.cng-avail-row.is-pickup .cng-avail-icon,
.cng-avail-row.is-return .cng-avail-icon {
	background: var(--cng-color-forest);
}

/* Prezzo */
.cng-buybox .price,
.cng-buybox p.price {
	display: block;
	margin: 0 0 var(--cng-space-xs);
	font-family: var(--cng-font-body);
	font-size: clamp(28px, 6vw, 34px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--cng-color-ink);
}

.cng-buybox .price del {
	display: inline-block;
	margin-right: 10px;
	font-size: 18px;
	font-weight: 500;
	color: var(--cng-color-muted);
	opacity: 1;
}

.cng-buybox .price ins {
	text-decoration: none;
	color: var(--cng-color-orange);
}

.cng-buybox .woocommerce-price-suffix {
	font-size: 13px;
	font-weight: 400;
	color: var(--cng-color-muted);
}

/* Rate */
.cng-installments {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 10px 12px;
	margin-bottom: var(--cng-space-md);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-trust-bg);
	font-size: 13px;
}

.cng-installments-amount {
	font-weight: 700;
}

.cng-installments-amount .amount {
	white-space: nowrap;
}

/* Descrizione breve */
.cng-buybox .woocommerce-product-details__short-description {
	margin-bottom: var(--cng-space-md);
	font-size: 15px;
	line-height: 1.6;
	color: var(--cng-color-ink-soft);
}

/* Modulo d'acquisto */
.cng-buybox form.cart {
	margin-bottom: var(--cng-space-md);
}

.cng-buybox form.cart .quantity {
	margin-right: 10px;
}

.cng-buybox form.cart .quantity input.qty {
	width: 72px;
	height: 52px;
	padding: 0 8px;
	border: 1.5px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

.cng-buybox .single_add_to_cart_button,
.cng-buybox form.cart .button {
	min-height: 52px;
	padding: 14px 26px;
	border: none;
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-orange);
	color: #fff;
	font-family: var(--cng-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 0.18s ease;
}

.cng-buybox .single_add_to_cart_button:hover,
.cng-buybox .single_add_to_cart_button:focus {
	background: var(--cng-color-orange-dark);
}

/* Stato disabilitato: finche' non e' stata scelta una variante, WooCommerce
   disattiva il pulsante. Astra colora quello stato con il proprio blu, quindi
   serve un selettore piu' specifico del suo per riportarlo nella palette.
   Il grigio dice "non ancora": l'arancio deve restare l'invito ad agire. */
.woocommerce div.product .cng-buybox .single_add_to_cart_button.disabled,
.woocommerce div.product .cng-buybox .single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce-js div.product .cng-buybox .single_add_to_cart_button.disabled,
.woocommerce-js div.product .cng-buybox .single_add_to_cart_button.wc-variation-selection-needed {
	background: #CFC8BA;
	color: var(--cng-color-ink);
	opacity: 1;
	cursor: not-allowed;
}

/* Sul telefono il pulsante occupa tutta la riga: e' il bersaglio piu' importante. */
.cng-buybox form.cart .single_add_to_cart_button {
	width: calc(100% - 82px);
}

/* Selettore varianti */
.cng-buybox table.variations {
	width: 100%;
	margin-bottom: var(--cng-space-sm);
	border: none;
}

.cng-buybox table.variations th,
.cng-buybox table.variations td {
	display: block;
	width: 100%;
	padding: 0 0 8px;
	border: none;
	text-align: left;
}

.cng-buybox table.variations label {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cng-color-muted);
}

.cng-buybox table.variations select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1.5px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-surface);
	font-size: 15px;
}

.cng-buybox .woocommerce-variation-price .price {
	font-size: 26px;
}

/* Omaggi nel riquadro acquisto */
.cng-gifts {
	padding: 12px 14px;
	margin-top: var(--cng-space-sm);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-trust-bg);
}

.cng-gifts-title {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-forest);
}

.cng-gifts-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cng-gift {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--cng-color-surface);
	font-size: 13px;
	line-height: 1.3;
}

.cng-gift-image {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	object-fit: cover;
}

.cng-gifts-list-large .cng-gift {
	background: var(--cng-color-trust-bg);
	padding: 10px 14px;
	font-size: 14px;
}

.cng-gifts-list-large .cng-gift-image {
	width: 48px;
	height: 48px;
}

.cng-equipment-list {
	margin: 0 0 var(--cng-space-md);
	padding-left: 20px;
	color: var(--cng-color-ink-soft);
}

/* Pagamenti */
.cng-payments {
	padding-top: var(--cng-space-md);
	margin-top: var(--cng-space-md);
	border-top: 1px solid var(--cng-color-border);
}

.cng-payments-title {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-muted);
}

.cng-payments-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ogni metodo e' una tesserina bianca di altezza costante: i marchi hanno
   proporzioni diverse fra loro e senza un'altezza comune la riga sembrerebbe
   sconnessa. */
.cng-pay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--cng-color-border);
	border-radius: 6px;
	background: var(--cng-color-surface);
	font-size: 12px;
	color: var(--cng-color-ink-soft);
}

.cng-pay-logo {
	display: block;
	width: auto;
	height: 22px;
}

.cng-pay-svg {
	display: inline-flex;
	align-items: center;
}

.cng-pay-label {
	white-space: nowrap;
}

/* Marchi resi come scritta, nei colori del circuito. */
.cng-pay-word {
	font-family: var(--cng-font-body);
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.cng-pay-word.is-visa {
	font-style: italic;
	letter-spacing: 0.04em;
	color: #1434CB;
}

.cng-pay-word.is-amex {
	padding: 4px 6px;
	border-radius: 3px;
	background: #2E77BC;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: #fff;
}

.cng-pay-word.is-paypal {
	font-style: italic;
	color: #003087;
}

.cng-pay-word.is-paypal span {
	color: #009CDE;
}

.cng-pay-word.is-scalapay {
	font-size: 14px;
	font-weight: 700;
	color: #C6007E;
}

.cng-pay-word.is-klarna {
	padding: 4px 8px;
	border-radius: 3px;
	background: #FFB3C7;
	font-size: 12px;
	color: #0B051D;
}

.cng-product-meta {
	margin-top: var(--cng-space-sm);
	font-size: 13px;
	color: var(--cng-color-muted);
}

.cng-product-meta a {
	color: var(--cng-color-forest);
}

/* ==========================================================================
   Titoli di sezione condivisi
   ========================================================================== */
.cng-section-title {
	margin: 0 0 var(--cng-space-md);
	font-family: var(--cng-font-display);
	font-size: clamp(20px, 3.5vw, 26px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* ==========================================================================
   4. Dati tecnici
   ========================================================================== */
.cng-tech {
	padding: var(--cng-space-md);
	margin-bottom: var(--cng-space-lg);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
}

/* Ogni caratteristica in evidenza ha la sua icona, scelta in automatico dal
   nome (vedi inc/icons.php): si riconosce peso, potenza o lunghezza a colpo
   d'occhio, senza leggere l'etichetta. */
.cng-tech-highlights {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cng-space-md) var(--cng-space-sm);
	margin-bottom: var(--cng-space-lg);
}

.cng-highlight {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.cng-spec-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	color: var(--cng-color-forest);
}

.cng-highlight-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.cng-highlight-name {
	font-size: 13px;
	color: var(--cng-color-muted);
	line-height: 1.3;
}

.cng-highlight-value {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.cng-tech-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cng-space-sm);
	margin-bottom: var(--cng-space-md);
}

.cng-tech-buttons .cng-button {
	flex: 1 1 200px;
}

/* Tabella a gruppi */
.cng-datasheet-group + .cng-datasheet-group {
	margin-top: var(--cng-space-md);
}

/* Titolo del gruppo: fascia piena scura, come su AgriEuro. Separa i blocchi
   in modo netto anche scorrendo velocemente una tabella lunga. */
.cng-datasheet-title {
	margin: 0 0 4px;
	padding: 11px 16px;
	border-radius: 6px;
	background: var(--cng-color-ink);
	font-family: var(--cng-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.cng-datasheet-rows {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	margin: 0;
	font-size: 14px;
}

.cng-datasheet-rows dt,
.cng-datasheet-rows dd {
	margin: 0;
	padding: 10px 8px;
	border-bottom: 1px solid var(--cng-color-border);
	line-height: 1.4;
}

.cng-datasheet-rows dt {
	font-weight: 700;
	color: var(--cng-color-ink);
}

.cng-datasheet-rows dd {
	font-weight: 400;
	text-align: left;
	color: var(--cng-color-ink-soft);
}

/* Tabella lunga: parte chiusa, si apre col pulsante. */
.cng-datasheet.is-collapsed {
	position: relative;
	max-height: 320px;
	overflow: hidden;
}

.cng-datasheet.is-collapsed::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--cng-color-surface));
	pointer-events: none;
}

.cng-datasheet-toggle {
	width: 100%;
	margin-top: var(--cng-space-sm);
}

/* ==========================================================================
   5. Servizi e promozione
   ========================================================================== */
.cng-services {
	margin-bottom: var(--cng-space-lg);
}

.cng-promo {
	padding: 14px 18px;
	margin-bottom: var(--cng-space-sm);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-forest);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
}

.cng-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-sm);
}

.cng-service {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
}

.cng-service-title {
	font-weight: 700;
	font-size: 15px;
}

.cng-service-text {
	font-size: 13px;
	line-height: 1.5;
	color: var(--cng-color-muted);
}

/* ==========================================================================
   6. Accessori consigliati
   ========================================================================== */
.cng-bundle {
	padding: var(--cng-space-md);
	margin-bottom: var(--cng-space-lg);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-trust-bg);
}

.cng-bundle-intro {
	margin: -12px 0 var(--cng-space-md);
	font-size: 14px;
	color: var(--cng-color-ink-soft);
}

.cng-bundle-items {
	display: grid;
	gap: 8px;
	margin-bottom: var(--cng-space-md);
}

.cng-bundle-item {
	display: grid;
	grid-template-columns: 24px 64px minmax(0, 1fr);
	grid-template-areas:
		"check thumb info"
		"check thumb price";
	gap: 4px 12px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-surface);
}

.cng-bundle-item.is-main {
	border-color: var(--cng-color-forest);
}

.cng-bundle-check {
	grid-area: check;
}

.cng-bundle-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--cng-color-orange);
	cursor: pointer;
}

.cng-bundle-check-placeholder {
	display: block;
	width: 20px;
	height: 20px;
	border: 1.5px dashed var(--cng-color-border);
	border-radius: 4px;
}

.cng-bundle-thumb {
	grid-area: thumb;
}

.cng-bundle-thumb img {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
}

.cng-bundle-info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cng-bundle-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
}

.cng-bundle-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-forest);
}

.cng-bundle-note {
	font-size: 12px;
	color: var(--cng-color-muted);
}

.cng-bundle-price {
	grid-area: price;
	font-size: 15px;
	font-weight: 700;
}

.cng-bundle-price del {
	margin-right: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--cng-color-muted);
}

.cng-bundle-price ins {
	text-decoration: none;
	color: var(--cng-color-orange);
}

.cng-bundle-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cng-space-sm);
	padding-top: var(--cng-space-md);
	border-top: 1px solid var(--cng-color-border);
}

.cng-bundle-total {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cng-bundle-total-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-muted);
}

.cng-bundle-total-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
}

.cng-bundle-saving {
	font-size: 13px;
	font-weight: 600;
	color: var(--cng-color-success);
}

.cng-bundle-footer .cng-button {
	flex: 1 1 100%;
}

/* ==========================================================================
   7. Sezioni lunghe: descrizione, omaggi, recensioni
   ========================================================================== */
.cng-sections {
	margin-bottom: var(--cng-space-xl);
}

/* Le linguette del template originale non servono piu': sezioni impilate. */
.cng-sections > ul.tabs,
.cng-sections > .wc-tabs {
	display: none;
}

.cng-section {
	padding: var(--cng-space-md) 0;
	border-top: 1px solid var(--cng-color-border);
}

.cng-section-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--cng-color-ink-soft);
}

.cng-section-body h2,
.cng-section-body h3,
.cng-section-body h4 {
	margin: var(--cng-space-md) 0 8px;
	font-family: var(--cng-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--cng-color-ink);
}

.cng-section-body h2:first-child,
.cng-section-body h3:first-child,
.cng-section-body h4:first-child {
	margin-top: 0;
}

.cng-section-body p {
	margin: 0 0 var(--cng-space-sm);
}

.cng-section-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cng-radius-control);
}

.cng-section-body ul,
.cng-section-body ol {
	margin: 0 0 var(--cng-space-sm);
	padding-left: 22px;
}

/* La tabella "Informazioni aggiuntive" di WooCommerce dentro la sezione. */
.cng-section-body table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.cng-section-body table.shop_attributes th,
.cng-section-body table.shop_attributes td {
	padding: 9px 6px;
	border-bottom: 1px solid var(--cng-color-border);
	text-align: left;
}

/* Recensioni */
.cng-section-reviews .commentlist {
	margin: 0 0 var(--cng-space-md);
	padding: 0;
	list-style: none;
}

.cng-section-reviews .comment_container {
	display: flex;
	gap: var(--cng-space-sm);
	padding: var(--cng-space-sm) 0;
	border-bottom: 1px solid var(--cng-color-border);
}

.cng-section-reviews .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.cng-section-reviews .comment-form input[type="text"],
.cng-section-reviews .comment-form input[type="email"],
.cng-section-reviews .comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	font-family: var(--cng-font-body);
	font-size: 15px;
}

.cng-section-reviews .comment-form .submit {
	min-height: 48px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-ink);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}


/* ==========================================================================
   Finestra "Livello prodotto"
   Si apre cliccando il livello nella fascia superiore. Mostra tutti e cinque
   i livelli a scalini, con quello del prodotto evidenziato: e' l'informazione
   che serve per capire se la macchina regge il lavoro che si ha in mente.
   ========================================================================== */
.cng-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}

.cng-modal[hidden] {
	display: none;
}

.cng-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(19, 18, 16, 0.55);
	border: 0;
	cursor: pointer;
}

.cng-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: 92vh;
	padding: var(--cng-space-md);
	overflow-y: auto;
	border-radius: var(--cng-radius-card) var(--cng-radius-card) 0 0;
	background: var(--cng-color-surface);
	box-shadow: 0 -8px 40px rgba(19, 18, 16, 0.3);
}

.cng-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cng-space-sm);
	margin-bottom: var(--cng-space-xs);
}

.cng-modal-title {
	margin: 0;
	font-family: var(--cng-font-display);
	font-size: clamp(20px, 4vw, 28px);
	font-weight: 600;
	color: var(--cng-color-forest);
}

.cng-modal-close {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--cng-color-border);
	border-radius: 50%;
	background: var(--cng-color-surface);
	font-size: 24px;
	line-height: 1;
	color: var(--cng-color-ink);
	cursor: pointer;
}

.cng-modal-close:hover,
.cng-modal-close:focus-visible {
	background: var(--cng-color-trust-bg);
	border-color: var(--cng-color-ink);
}

.cng-modal-intro,
.cng-modal-note {
	margin: 0 0 var(--cng-space-md);
	font-size: 14px;
	line-height: 1.6;
	color: var(--cng-color-muted);
}

.cng-modal-note {
	margin: var(--cng-space-md) 0 0;
	padding-top: var(--cng-space-md);
	border-top: 1px solid var(--cng-color-border);
}

/* I cinque livelli. Su telefono uno sotto l'altro, dal desktop a scalini
   crescenti, cosi' l'ordine di intensita' si legge dalla forma. */
.cng-levels-stair {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-sm);
}

.cng-level-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--cng-space-md);
	border: 1.5px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-surface);
}

.cng-level-card.is-active {
	border-color: var(--cng-color-forest);
	background: var(--cng-color-forest);
	color: #fff;
}

/* Su fondo verde scuro il titolo deve tornare bianco: altrimenti eredita
   il colore scuro del testo e sparisce. */
.cng-level-card.is-active .cng-level-card-title {
	color: #fff;
}

.cng-level-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cng-level-card-title {
	margin: 0;
	font-family: var(--cng-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
}

.cng-level-card-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cng-color-ink-soft);
}

.cng-level-card.is-active .cng-level-card-text {
	color: rgba(255, 255, 255, 0.92);
}

.cng-level-card.is-active .cng-level-bar {
	background: rgba(255, 255, 255, 0.35);
}

.cng-level-card.is-active .cng-level-bar.is-active {
	background: var(--cng-color-accent-light);
}

.cng-level-card-flag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cng-color-accent-light);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-ink);
}

.cng-level-bars-card {
	height: 18px;
	gap: 3px;
}

.cng-level-bars-card .cng-level-bar {
	width: 5px;
}

/* ==========================================================================
   Descrizione su due colonne, con le foto del prodotto accanto al testo
   ========================================================================== */
.cng-description-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-lg);
	align-items: start;
}

.cng-description-media {
	min-width: 0;
}

.cng-description-figure {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
}

.cng-description-image {
	display: block;
	width: 100%;
	height: auto;
}

.cng-description-thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.cng-description-thumb {
	padding: 0;
	overflow: hidden;
	border: 1.5px solid var(--cng-color-border);
	border-radius: 8px;
	background: var(--cng-color-surface);
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.cng-description-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.cng-description-thumb:hover,
.cng-description-thumb:focus-visible {
	border-color: var(--cng-color-forest);
}

.cng-description-thumb.is-active {
	border-color: var(--cng-color-orange);
}


/* ==========================================================================
   Recensioni clienti
   Riquadro riepilogativo in cima (media generale, media per aspetto,
   distribuzione dei voti, foto dei clienti) e singola recensione con i voti
   per aspetto a barre.
   ========================================================================== */
.cng-reviews-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-sm);
	margin-bottom: var(--cng-space-lg);
}

.cng-reviews-panel {
	padding: var(--cng-space-md);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
}

.cng-reviews-panel-title {
	margin: 0 0 var(--cng-space-sm);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cng-color-border);
	font-family: var(--cng-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--cng-color-ink);
}

/* --- Media generale --- */
.cng-reviews-average {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cng-reviews-average .cng-reviews-panel-title {
	align-self: stretch;
}

.cng-reviews-average-value {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.cng-reviews-average .star-rating {
	margin: 6px 0;
	font-size: 20px;
	color: var(--cng-color-orange);
}

.cng-reviews-average .star-rating span::before {
	color: var(--cng-color-orange);
}

.cng-reviews-average-note {
	font-size: 13px;
	line-height: 1.4;
	color: var(--cng-color-muted);
}

/* --- Barra a cinque segmenti, usata per le medie per aspetto --- */
.cng-score-bar {
	display: inline-flex;
	gap: 3px;
	width: 100%;
	max-width: 180px;
}

.cng-score-segment {
	flex: 1 1 0;
	height: 9px;
	overflow: hidden;
	border: 1px solid var(--cng-color-orange);
	border-radius: 2px;
	background: transparent;
}

.cng-score-fill {
	display: block;
	height: 100%;
	background: var(--cng-color-orange);
}

.cng-criterion-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cng-color-border);
}

.cng-criterion-row:last-child {
	border-bottom: 0;
}

.cng-criterion-label {
	font-size: 14px;
	color: var(--cng-color-ink-soft);
}

.cng-criterion-score {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cng-criterion-value {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Distribuzione dei voti --- */
.cng-distribution-row {
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) 36px;
	gap: 10px;
	align-items: center;
	padding: 5px 0;
	font-size: 13px;
}

.cng-distribution-track {
	height: 9px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--cng-color-trust-bg);
}

.cng-distribution-fill {
	display: block;
	height: 100%;
	background: var(--cng-color-orange);
}

.cng-distribution-count {
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* --- Foto dei clienti --- */
.cng-customer-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 8px;
}

.cng-customer-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--cng-color-border);
}

/* --- Singola recensione --- */
.cng-section-reviews .comment_container {
	display: flex;
	gap: var(--cng-space-sm);
	align-items: flex-start;
	padding: var(--cng-space-md) 0;
}

.cng-section-reviews .comment_container > img.avatar {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.cng-section-reviews .review-rating .star-rating {
	font-size: 17px;
	color: var(--cng-color-orange);
}

.cng-section-reviews .review-rating .star-rating span::before {
	color: var(--cng-color-orange);
}

.cng-section-reviews .description {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cng-color-ink-soft);
}

.cng-section-reviews .comment-text {
	min-width: 0;
}

.cng-section-reviews .woocommerce-review__author {
	font-size: 15px;
	color: var(--cng-color-forest);
}

.cng-section-reviews .woocommerce-review__verified {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--cng-color-trust-bg);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	color: var(--cng-color-success);
}

.cng-review-criteria {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px var(--cng-space-md);
	margin: var(--cng-space-sm) 0;
	padding: var(--cng-space-sm) 0;
	border-top: 1px solid var(--cng-color-border);
	border-bottom: 1px solid var(--cng-color-border);
}

.cng-review-criterion {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cng-review-criterion-label {
	font-size: 12px;
	color: var(--cng-color-muted);
}

.cng-review-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--cng-space-sm);
}

.cng-review-photos img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--cng-color-border);
}

/* --- "Questa recensione ti è stata utile?" --- */
.cng-review-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: var(--cng-space-sm);
}

.cng-review-helpful-question {
	font-size: 13px;
	font-weight: 600;
	color: var(--cng-color-ink-soft);
}

.cng-helpful-button {
	min-height: 38px;
	padding: 8px 18px;
	border: 1.5px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-surface);
	font-family: var(--cng-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--cng-color-ink);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cng-helpful-button.is-yes:hover,
.cng-helpful-button.is-yes.is-voted {
	border-color: var(--cng-color-success);
	background: var(--cng-color-success);
	color: #fff;
}

.cng-helpful-button.is-no:hover,
.cng-helpful-button.is-no.is-voted {
	border-color: #B4402A;
	background: #B4402A;
	color: #fff;
}

.cng-review-helpful.is-done .cng-helpful-button {
	cursor: default;
	opacity: 0.85;
}

/* --- Modulo di inserimento recensione --- */
.cng-review-criteria-form {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cng-space-sm);
	margin-bottom: var(--cng-space-md);
	padding: var(--cng-space-md);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-trust-bg);
}

.cng-review-form-label {
	grid-column: 1 / -1;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-forest);
}

.cng-review-criterion-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cng-review-criterion-field label {
	font-size: 13px;
	font-weight: 600;
}

.cng-review-criterion-field select {
	min-height: 42px;
	padding: 8px 10px;
	border: 1.5px solid var(--cng-color-border);
	border-radius: 8px;
	background: var(--cng-color-surface);
	font-size: 14px;
}

.cng-review-photos-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cng-review-photos-hint {
	font-size: 12px;
	color: var(--cng-color-muted);
}


/* ==========================================================================
   Confronto con modelli simili
   Una griglia sola: colonna di etichette + una colonna per prodotto. Cosi'
   ogni caratteristica sta su un'unica riga condivisa e i valori restano
   allineati anche quando un modello non ha quel dato.
   ========================================================================== */
.cng-compare {
	margin-bottom: var(--cng-space-xl);
}

.cng-compare-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cng-space-sm);
	margin-bottom: var(--cng-space-md);
}

.cng-compare-head .cng-section-title {
	margin: 0;
}

/*
 * Su telefono le colonne non ci stanno e si scorre in orizzontale.
 * overflow-y: hidden e' esplicito di proposito: in CSS basta impostare
 * overflow-x diverso da visible perche' anche overflow-y diventi auto, e
 * comparirebbe una barra verticale parassita dentro al riquadro.
 */
.cng-compare-scroll {
	/*
	 * position: relative serve al ritaglio, non al posizionamento: un elemento
	 * in position absolute viene tagliato da un antenato con overflow nascosto
	 * solo se quell'antenato e' a sua volta posizionato. Senza, i testi per i
	 * lettori di schermo (assoluti e larghi 1px) sfuggono dal riquadro e
	 * allargano l'intera pagina, facendola scorrere di lato sul telefono.
	 */
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.cng-compare-grid {
	display: grid;
	grid-template-columns: repeat(var(--cng-compare-cols), minmax(240px, 1fr));
	gap: var(--cng-space-sm);
	min-width: min-content;
}

.cng-compare-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--cng-space-sm);
	border: 1px solid var(--cng-color-border);
	border-radius: var(--cng-radius-card);
	background: var(--cng-color-surface);
}

.cng-compare-card.is-current {
	border-color: var(--cng-color-orange);
	box-shadow: 0 0 0 1px var(--cng-color-orange);
}

.cng-compare-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	font-size: 11px;
}

.cng-compare-level {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
}

.cng-compare-level-name {
	font-weight: 700;
	color: var(--cng-color-forest);
}

.cng-compare-brand-group {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 3px;
	text-align: right;
}

.cng-compare-brand {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--cng-color-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
}

.cng-compare-service {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: var(--cng-color-success);
}

.cng-compare-service-value {
	font-size: 15px;
	font-weight: 700;
}

.cng-compare-service-label {
	font-size: 10px;
	color: var(--cng-color-muted);
}

.cng-compare-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--cng-radius-control);
	background: var(--cng-color-bg);
}

.cng-compare-image img {
	display: block;
	width: 100%;
	height: auto;
}

.cng-compare-flag {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cng-color-forest);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
}

.cng-compare-flag.is-sale {
	background: var(--cng-color-orange);
}

.cng-compare-gifts {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cng-compare-gifts-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-muted);
}

.cng-compare-gifts ul {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cng-compare-gifts img {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	object-fit: cover;
}

.cng-compare-gift-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cng-color-accent-light);
}

.cng-compare-title {
	margin: 0;
	font-family: var(--cng-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.cng-compare-title a {
	color: var(--cng-color-ink);
	text-decoration: none;
}

.cng-compare-title a:hover,
.cng-compare-title a:focus {
	text-decoration: underline;
}

.cng-compare-availability {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.5;
}

.cng-compare-availability .is-ok {
	color: var(--cng-color-success);
}

.cng-compare-availability .is-ko {
	color: #B4402A;
}

.cng-compare-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}

.cng-compare-rating-value {
	font-size: 15px;
	font-weight: 700;
}

.cng-compare-rating .star-rating {
	font-size: 12px;
	color: var(--cng-color-orange);
}

.cng-compare-rating .star-rating span::before {
	color: var(--cng-color-orange);
}

.cng-compare-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--cng-color-border);
	font-size: 19px;
	font-weight: 700;
}

.cng-compare-price del {
	font-size: 13px;
	font-weight: 500;
	color: var(--cng-color-muted);
	opacity: 1;
}

.cng-compare-price ins {
	text-decoration: none;
	color: var(--cng-color-orange);
}

.cng-compare-tax {
	font-size: 11px;
	font-weight: 500;
	color: var(--cng-color-muted);
}

.cng-compare-installments {
	flex-basis: 100%;
	font-size: 12px;
	font-weight: 500;
	color: var(--cng-color-ink-soft);
}

.cng-compare-action {
	width: 100%;
	padding: 10px 16px;
	font-size: 14px;
}

/* --- Tabella di confronto --- */
.cng-compare-body {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(var(--cng-compare-cols), minmax(240px, 1fr));
	/* Stessa distanza fra le colonne della griglia delle schede: senza, i
	   valori risulterebbero spostati di qualche pixel rispetto alla scheda a
	   cui appartengono. */
	column-gap: var(--cng-space-sm);
	row-gap: 0;
	margin-top: var(--cng-space-md);
}

.cng-compare-body[hidden] {
	display: none;
}

.cng-compare-group-title {
	grid-column: 1 / -1;
	margin-top: var(--cng-space-sm);
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--cng-color-ink);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

/* Il nome della caratteristica occupa una riga tutta sua, sopra ai valori:
   cosi' le schede restano allineate al resto della pagina invece di essere
   spinte a destra da una colonna di etichette. */
.cng-compare-label {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding: 8px 6px 4px;
	border-bottom: 1px solid var(--cng-color-border);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cng-color-muted);
}

.cng-compare-value {
	padding: 8px 6px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--cng-color-ink);
}

.cng-compare-value.is-empty {
	color: var(--cng-color-border);
}

/* ==========================================================================
   8. Alternative e correlati
   ========================================================================== */
.single-product .up-sells > h2,
.single-product .related > h2 {
	margin: 0 0 var(--cng-space-md);
	font-family: var(--cng-font-display);
	font-size: clamp(20px, 3.5vw, 26px);
	font-weight: 600;
}

.single-product .up-sells,
.single-product .related {
	margin-bottom: var(--cng-space-xl);
}

/* ==========================================================================
   Breakpoint: tablet verticale
   ========================================================================== */
@media (min-width: 600px) {
	.single-product .woocommerce-breadcrumb {
		margin-bottom: var(--cng-space-md);
		overflow: visible;
		white-space: normal;
		font-size: 13px;
	}

	/* Da tablet in su lo spazio non manca: la fascia superiore torna
	   alle dimensioni piene pensate per il desktop. */
	.cng-product-top {
		gap: var(--cng-space-sm);
		margin-bottom: var(--cng-space-lg);
	}

	/* Da qui tornano i due riquadri affiancati, quindi servono cornice,
	   sfondo e spaziatura interna. */
	.cng-product-header,
	.cng-product-ids {
		padding: var(--cng-space-md);
		border: 1px solid var(--cng-color-border);
		border-radius: var(--cng-radius-card);
		background: var(--cng-color-surface);
		box-shadow: var(--cng-shadow-card);
	}

	.cng-product-header .product_title {
		margin-bottom: var(--cng-space-md);
		font-size: clamp(24px, 3.2vw, 34px);
		line-height: 1.15;
	}

	.cng-product-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
		gap: var(--cng-space-sm);
		padding-top: var(--cng-space-md);
	}

	.cng-feature {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		min-height: 52px;
		padding: 8px 12px;
		border: 1px solid transparent;
		border-radius: var(--cng-radius-control);
	}

	.cng-feature-level,
	.cng-feature-rating {
		border-color: var(--cng-color-border);
		background: var(--cng-color-surface);
	}

	.cng-feature-level:hover,
	.cng-feature-level:focus-visible,
	.cng-feature-rating:hover,
	.cng-feature-rating:focus-visible {
		border-color: var(--cng-color-forest);
	}

	.cng-feature-body {
		align-items: flex-start;
		text-align: left;
	}

	.cng-feature-title {
		font-size: 17px;
	}

	.cng-level-bars-large {
		height: 30px;
		gap: 4px;
	}

	.cng-level-bars-large .cng-level-bar {
		width: 8px;
	}

	.cng-feature-sub {
		font-size: 13px;
	}

	.cng-feature-warranty {
		grid-column: auto;
		padding: 8px 12px;
		border-top: 0;
	}

	.cng-feature-warranty .cng-feature-title {
		font-size: 14px;
	}

	.cng-feature-icon {
		width: 26px;
		height: 26px;
	}

	.cng-rating-value {
		font-size: 24px;
	}

	.cng-level-bars-large {
		height: 30px;
		gap: 4px;
	}

	.cng-level-bars-large .cng-level-bar {
		width: 8px;
	}

	.cng-product-ids {
		gap: var(--cng-space-sm);
	}

	/* Da tablet in su i riquadrini restano, ma piu' respirati: dentro il
	   riquadro bianco della fascia superiore servono a raggruppare i codici. */
	.cng-codes {
		gap: 6px;
	}

	.cng-code {
		padding: 7px 12px;
		font-size: 13px;
	}

	.cng-brand {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 2px;
		padding-top: var(--cng-space-sm);
	}

	.cng-brand-link,
	.cng-brand-name {
		font-size: 16px;
	}

	.cng-tech-highlights {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cng-levels-stair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cng-modal {
		align-items: center;
		padding: var(--cng-space-md);
	}

	.cng-modal-panel {
		max-width: 1100px;
		padding: var(--cng-space-lg);
		border-radius: var(--cng-radius-card);
	}

	.cng-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cng-bundle-item {
		grid-template-columns: 24px 72px minmax(0, 1fr) auto;
		grid-template-areas: "check thumb info price";
	}

	.cng-bundle-price {
		text-align: right;
	}

	.cng-bundle-footer .cng-button {
		flex: 0 0 auto;
	}

	.cng-buybox form.cart .single_add_to_cart_button {
		width: auto;
		min-width: 220px;
	}
}

/* ==========================================================================
   Breakpoint: da qui la scheda va su due colonne
   ========================================================================== */
@media (min-width: 900px) {
	/* La fascia superiore va su due riquadri affiancati: titolo largo a
	   sinistra, codici stretti a destra. */
	.cng-product-top {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: stretch;
	}

	.cng-product-main {
		grid-template-columns: minmax(0, 1fr) var(--cng-buybox-width);
		align-items: start;
	}

	/* I cinque livelli a scalini crescenti: la forma stessa racconta che
	   sono in ordine di intensita' d'uso, come nella legenda di AgriEuro. */
	/* I cinque riquadri allineati in basso, con altezza minima crescente:
	   il profilo superiore disegna una scalinata che sale da sinistra a
	   destra, cosi' l'ordine di intensita' si legge dalla forma. */
	.cng-levels-stair {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		align-items: end;
		gap: 10px;
	}

	.cng-level-card {
		min-height: calc(200px + var(--cng-step) * 32px);
	}

	/* Descrizione: testo a sinistra, foto a destra che restano visibili
	   mentre si legge. */
	.cng-description-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}

	.cng-description-media {
		position: sticky;
		top: 24px;
	}

	/* Il riquadro acquisto resta visibile mentre si scorre la galleria. */
	.cng-product-main .cng-buybox {
		position: sticky;
		top: 24px;
	}

	.cng-tech {
		padding: var(--cng-space-lg);
	}

	.cng-tech-highlights {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cng-datasheet {
		column-count: 2;
		column-gap: var(--cng-space-lg);
	}

	.cng-datasheet-group {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	.cng-datasheet-group + .cng-datasheet-group {
		margin-top: var(--cng-space-lg);
	}

	.cng-datasheet.is-collapsed {
		max-height: 380px;
	}

	.cng-services-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Da qui le colonne ci stanno tutte: niente scorrimento orizzontale,
	   quindi nessuna barra di alcun tipo dentro la sezione. */
	.cng-compare-scroll {
		overflow: visible;
	}

	/* Riepilogo recensioni: i tre riquadri affiancati, foto a tutta riga. */
	.cng-reviews-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cng-reviews-photos {
		grid-column: 1 / -1;
	}

	/*
	 * Recensione a due colonne come su AgriEuro: a sinistra il voto in stelle
	 * e i voti per aspetto, a destra chi scrive, il testo, le foto e i
	 * pulsanti di utilita'.
	 *
	 * I voti per aspetto sono annidati dentro .comment-text (li stampa un hook
	 * di WooCommerce), quindi la griglia va messa li' e ogni pezzo collocato
	 * esplicitamente: non basta dividere in due il contenitore esterno.
	 */
	/* Il selettore e' lungo di proposito: WooCommerce imposta
	   "body.single-product #reviews #comments ol.commentlist li .comment-text { display: flex }"
	   e per sostituirlo serve una specificita' maggiore della sua. Meglio un
	   selettore lungo che un !important, che poi non si riesce piu' a
	   sovrascrivere. */
	body.single-product #reviews #comments ol.commentlist li .comment-text {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		column-gap: var(--cng-space-lg);
		align-items: start;
		width: 100%;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .review-rating {
		grid-column: 1;
		grid-row: 1;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .cng-review-criteria {
		grid-column: 1;
		grid-row: 2 / span 4;
		grid-template-columns: 1fr;
		margin: 0;
		padding: 0;
		border: 0;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .meta {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .description {
		grid-column: 2;
		grid-row: 2;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .cng-review-photos {
		grid-column: 2;
		grid-row: 3;
	}

	body.single-product #reviews #comments ol.commentlist li .comment-text > .cng-review-helpful {
		grid-column: 2;
		grid-row: 4;
	}

	.cng-bundle {
		padding: var(--cng-space-lg);
	}

	.cng-section {
		padding: var(--cng-space-lg) 0;
	}

	.cng-section-body {
		font-size: 16px;
	}
}

/* ==========================================================================
   Breakpoint: desktop
   ========================================================================== */
@media (min-width: 1200px) {
	.cng-product {
		--cng-buybox-width: 420px;
	}

	.cng-product-main {
		gap: var(--cng-space-xl);
	}
}

/* ==========================================================================
   Barra d'acquisto fissa in basso, solo su telefono.
   Compare quando il pulsante originale e' uscito dallo schermo (la classe
   la mette il JS), cosi' "Aggiungi al carrello" resta sempre a portata.
   ========================================================================== */
.cng-sticky-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cng-space-sm);
	padding: 10px 14px;
	border-top: 1px solid var(--cng-color-border);
	background: var(--cng-color-surface);
	box-shadow: 0 -4px 18px rgba(32, 29, 26, 0.12);
	transform: translateY(110%);
	transition: transform 0.2s ease;
}

.cng-sticky-bar.is-visible {
	transform: translateY(0);
}

.cng-sticky-bar-price {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}

.cng-sticky-bar-price del {
	display: none;
}

.cng-sticky-bar .cng-button {
	padding: 12px 20px;
}

@media (min-width: 900px) {
	.cng-sticky-bar {
		display: none;
	}
}

/* Stampa: via tutto cio' che non serve su carta. */
@media print {
	.cng-buybox,
	.cng-bundle,
	.cng-sticky-bar,
	.cng-services,
	.up-sells,
	.related {
		display: none !important;
	}

	.cng-datasheet.is-collapsed {
		max-height: none;
		overflow: visible;
	}

	.cng-datasheet.is-collapsed::after {
		display: none;
	}
}

/* Logo della marca nel riquadro codici (se caricato in Impostazioni). */
.cng-brand-logo {
	display: block;
	max-width: 140px;
	max-height: 34px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Icone a colori (immagini) nei dati tecnici della scheda prodotto. */
.cng-spec-icon-img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.cng-tech-highlight .cng-spec-icon-img {
	width: 44px;
	height: 44px;
}