/*
 * CDC Shop Grid — griglia prodotti del negozio.
 *
 * Mobile-first: i soci comprano quasi sempre da telefono, quindi la regola
 * base e' quella a due colonne e le righe @media aggiungono spazio salendo.
 *
 * Le regole sono prefissate .cdc-shop / .cdc-card e non toccano nessuna classe
 * di Avada o di WooCommerce: se la griglia si spegne (opzione
 * cdc_shop_grid_attiva), questo foglio non viene nemmeno caricato.
 */

/*
 * Colori e font si agganciano alle variabili che Avada gia' emette, non a
 * valori copiati: se la palette o la tipografia del tema cambiano, la griglia
 * segue da sola. I fallback sono i valori attuali, per non restare senza
 * colore se una variabile sparisce.
 *
 * --awb-color7 = #950c45, il bordeaux del sito.
 * ⚠️ Il logo e l'app usano #85102A: sono due bordeaux diversi. Qui si segue il
 * sito; allinearli e' una decisione che riguarda tutte le pagine, non questa.
 *
 * I titoli del sito sono in Bebas Neue (--h1/--h2_typography-font-family),
 * caricato da Google Fonts su ogni pagina, il testo in Rubik
 * (--body_typography-font-family). Nessun font nuovo da importare: e' la
 * stessa coppia display/neutro che l'app 4.0 usa con Bebas sui numeri in
 * evidenza.
 *
 * I grigi caldi (--cdc-grigio, --cdc-bordo) sono i token dell'app 4.0
 * TEXT_MUTED e BORDER. Il #8a8079 del prototipo e' stato scartato: sulla
 * crema sta sotto 4,5:1 di contrasto, #7d6556 arriva a 4,9:1.
 *
 * Il colore del testo normale non si imposta: si eredita dalla pagina, cosi'
 * le card non stonano con quello che ci sta attorno.
 */
.cdc-shop {
	--cdc-bordeaux: var(--awb-color7, #950c45);
	--cdc-bordeaux-scuro: #7a0a38;
	--cdc-crema: #faf7f3;
	--cdc-grigio: #7d6556;
	--cdc-bordo: #eae1d9;

	--cdc-font-testo: var(--body_typography-font-family, Rubik, Arial, Helvetica, sans-serif);
	--cdc-font-display: var(--h1_typography-font-family, "Bebas Neue", Arial, Helvetica, sans-serif);

	font-family: var(--cdc-font-testo, Rubik, Arial, Helvetica, sans-serif);
}

.cdc-shop *,
.cdc-shop *::before,
.cdc-shop *::after {
	box-sizing: border-box;
}

/*
 * Reset mirato dentro la card.
 *
 * Il tema veste gli elementi nudi — `h3` prende 32px di Rubik, `a` prende il
 * colore dei link, `p` prende margini — e la card e' fatta proprio di quegli
 * elementi. Senza azzerarli basta una regola del tema un po' piu' specifica
 * della nostra per far esplodere il titolo su cinque righe: e' successo il
 * 20/10/2026, in produzione.
 *
 * `:where()` ha specificita' zero: il reset pesa quanto i due selettori che lo
 * precedono (0,2,0) e le regole dei singoli pezzi, che vengono dopo nel file,
 * lo scavalcano per ordine senza dover rilanciare sulla specificita'.
 */
.cdc-shop .cdc-card :where(h3, h2, p, a, span, article, div) {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: inherit;
}

/* --- griglia ------------------------------------------------------------ */

.cdc-shop__griglia {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 600px) {
	.cdc-shop__griglia {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

/*
 * Tre colonne al massimo, mai quattro.
 *
 * La griglia vive accanto alla colonna dei filtri, quindi lo spazio utile e'
 * gia' ridotto: a quattro colonne la card scende sotto i 200px e la
 * bottiglia, alta e stretta, diventa un francobollo. Tre colonne danno ~400px
 * per card su uno schermo da 1920.
 *
 * Su schermi molto larghi la griglia smette di allargarsi invece di
 * aggiungere una colonna: card piu' grandi, non piu' numerose.
 */
@media (min-width: 1500px) {
	.cdc-shop__griglia {
		gap: 18px;
		max-width: 1500px;
	}
}

/* --- card --------------------------------------------------------------- */

.cdc-shop .cdc-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cdc-bordo, #eae1d9);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

@media (hover: hover) {
	.cdc-shop .cdc-card:hover {
		box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
		transform: translateY(-2px);
	}
}

.cdc-shop .cdc-card__media {
	position: relative;
	display: block;
	padding: 12px;
	background: #fff;
	text-align: center;
}

.cdc-shop .cdc-card__img,
.cdc-shop .cdc-card__noimg {
	display: block;
	width: 100%;
	height: 165px;
	object-fit: contain;
	margin: 0 auto;
}

.cdc-shop .cdc-card__noimg {
	background: var(--cdc-crema, #faf7f3);
	border-radius: 8px;
}

@media (min-width: 600px) {
	.cdc-shop .cdc-card__media {
		padding: 18px;
	}

	.cdc-shop .cdc-card__img,
	.cdc-shop .cdc-card__noimg {
		height: 250px;
	}
}

/* --- badge -------------------------------------------------------------- */

.cdc-shop .cdc-badge,
.cdc-scheda__media .cdc-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.2;
}

.cdc-shop .cdc-badge--sconto,
.cdc-scheda__media .cdc-badge--sconto {
	background: #fdecef;
	color: #b3003c;
	border: 1px solid #f3c2d0;
}

.cdc-shop .cdc-badge--gda,
.cdc-scheda__media .cdc-badge--gda {
	background: #eef5ff;
	color: #1d4ed8;
	border: 1px solid #cfe0fb;
}

.cdc-shop .cdc-badge--ultime,
.cdc-scheda__media .cdc-badge--ultime {
	background: #fff5e6;
	color: #9a6200;
	border: 1px solid #f3dcb5;
}

/* --- testo -------------------------------------------------------------- */

.cdc-shop .cdc-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 12px 12px;
}

@media (min-width: 600px) {
	.cdc-shop .cdc-card__corpo {
		padding: 0 18px 18px;
	}
}

.cdc-shop .cdc-card__produttore {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--cdc-grigio, #7d6556);
}

/* Il produttore porta al suo archivio: deve sembrare cliccabile senza
   rubare l'occhio al nome del vino, che resta il protagonista della card. */
.cdc-shop .cdc-card__produttore a {
	color: inherit;
	text-decoration: none;
}

.cdc-shop .cdc-card__produttore a:hover,
.cdc-shop .cdc-card__produttore a:focus-visible {
	color: var(--cdc-bordeaux, #950c45);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cdc-shop .cdc-card__nome {
	margin: 0 0 8px;
	font-size: 13.5px;
	line-height: 1.3;
	font-weight: 700;
}

.cdc-shop .cdc-card__nome a {
	color: inherit;
	text-decoration: none;
}

.cdc-shop .cdc-card__nome a:hover {
	color: var(--cdc-bordeaux, #950c45);
}

.cdc-shop .cdc-card__meta {
	margin: 0 0 2px;
	font-size: 11.5px;
	color: var(--cdc-grigio, #7d6556);
}

/*
 * Il separatore sta DAVANTI al dato che segue, non dietro a quello che
 * precede: cosi' quando la riga va a capo — su telefono quasi sempre — il
 * "·" scende insieme al dato invece di restare appeso a fine riga.
 */
.cdc-shop .cdc-card__meta span + span::before {
	content: " · ";
	white-space: pre;
}

/* Un dato non si spezza al suo interno: senza questo "0,75 L" andava a capo
   fra il numero e la L. */
.cdc-shop .cdc-card__meta span,
.cdc-scheda__dati span {
	white-space: nowrap;
}

/* I vitigni sono la prima cosa che si sacrifica quando lo spazio e' poco. */
.cdc-shop .cdc-card__vitigni {
	display: none;
	margin: 0;
	font-size: 12px;
	font-style: italic;
	color: var(--cdc-grigio, #7d6556);
}

@media (min-width: 600px) {
	.cdc-shop .cdc-card__nome {
		font-size: 16.5px;
	}

	.cdc-shop .cdc-card__meta {
		font-size: 13px;
	}

	.cdc-shop .cdc-card__vitigni {
		display: block;
	}
}

/* --- prezzo e azione ---------------------------------------------------- */

.cdc-shop .cdc-card__azione {
	margin-top: auto;
	padding-top: 12px;
}

.cdc-shop .cdc-card__prezzo-riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/*
 * Il prezzo e' il "numero in evidenza" del brand: va in Bebas Neue, come i
 * titoli del sito e come il token D dell'app. Bebas ha un solo peso (400):
 * chiedere il grassetto lo farebbe sintetizzare dal browser, sporco. Si
 * compensa con corpo e spaziatura.
 */
.cdc-shop .cdc-card__prezzo {
	font-family: var(--cdc-font-display, "Bebas Neue", Arial, Helvetica, sans-serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .5px;
	color: var(--cdc-bordeaux, #950c45);
	line-height: 1.1;
}

.cdc-shop .cdc-card__prezzo del {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-shop .cdc-card__prezzo ins {
	text-decoration: none;
}

@media (min-width: 600px) {
	.cdc-shop .cdc-card__prezzo {
		font-size: 30px;
	}
}

/* `.button` e' di WooCommerce/Avada: qui va riportato a zero, altrimenti
   arriva con padding e colori del tema. */
.cdc-shop .cdc-card__carrello,
.cdc-shop .cdc-card__carrello.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 9px 12px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: var(--cdc-bordeaux, #950c45);
	color: #fff;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.cdc-shop .cdc-card__carrello:hover {
	background: var(--cdc-bordeaux-scuro, #7a0a38);
	color: #fff;
}

/*
 * Cosa succede quando si clicca.
 *
 * Senza questi stati il bottone non dava alcun segno: si cliccava e la card
 * restava identica, quindi non si capiva se fosse successo qualcosa. Le
 * classi `loading` e `added` le mette gia' il JS di WooCommerce, bastava
 * vestirle.
 *
 * ⚠️ Il bottone ha `font-size: 0` per nascondere il testo del link: un
 * `content` nello pseudo-elemento eredita quello zero e resta invisibile.
 * Serve rimetterlo esplicitamente.
 */
.cdc-shop .cdc-card__carrello svg {
	display: block;
}

/* Mentre la richiesta e' in volo. */
.cdc-shop .cdc-card__carrello.loading {
	background: var(--cdc-bordeaux-scuro, #7a0a38);
	pointer-events: none;
}

.cdc-shop .cdc-card__carrello.loading svg {
	animation: cdc-pulsa .7s ease-in-out infinite;
}

@keyframes cdc-pulsa {
	0%, 100% { opacity: 1; }
	50%      { opacity: .35; }
}

/* Quando e' nel carrello: spunta al posto del carrello, su verde. */
.cdc-shop .cdc-card__carrello.added {
	background: #1d7a4c;
}

.cdc-shop .cdc-card__carrello.added:hover {
	background: #176139;
}

.cdc-shop .cdc-card__carrello.added svg {
	display: none;
}

.cdc-shop .cdc-card__carrello.added::after {
	content: "✓";
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
}

/*
 * "Visualizza carrello": lo aggiunge WooCommerce dopo il bottone. E' la
 * conferma esplicita, e insieme il passo successivo — senza, l'unico segnale
 * resta un'icona che cambia colore.
 */
.cdc-shop .cdc-card__azione .added_to_cart {
	display: block;
	margin-top: 8px;
	padding: 6px 10px;
	border: 1px solid #1d7a4c;
	border-radius: 8px;
	background: #eef7f1;
	color: #176139;
	font-size: 12.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.cdc-shop .cdc-card__azione .added_to_cart:hover {
	background: #1d7a4c;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.cdc-shop .cdc-card__carrello.loading svg {
		animation: none;
		opacity: .5;
	}
}

.cdc-shop .cdc-card__esaurito {
	font-size: 12px;
	color: var(--cdc-grigio, #7d6556);
}

/* --- ospiti ------------------------------------------------------------- */

.cdc-shop .cdc-card__ospite {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.cdc-shop .cdc-card__riservato {
	font-size: 12px;
	line-height: 1.25;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-shop .cdc-card__accedi {
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--cdc-bordeaux, #950c45);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.cdc-shop .cdc-card__accedi:hover {
	background: var(--cdc-bordeaux-scuro, #7a0a38);
	color: #fff;
}

@media (min-width: 600px) {
	.cdc-shop .cdc-card__ospite {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
	}

	.cdc-shop .cdc-card__riservato {
		font-size: 12.5px;
	}
}

/* --- paginazione -------------------------------------------------------- */

.cdc-shop__paginazione {
	margin-top: 28px;
}

.cdc-shop__paginazione ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdc-shop__paginazione li {
	margin: 0;
}

.cdc-shop__paginazione .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--cdc-bordo, #eae1d9);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}

.cdc-shop__paginazione .page-numbers:hover {
	border-color: var(--cdc-bordeaux, #950c45);
	color: var(--cdc-bordeaux, #950c45);
}

.cdc-shop__paginazione .page-numbers.current {
	background: var(--cdc-bordeaux, #950c45);
	border-color: var(--cdc-bordeaux, #950c45);
	color: #fff;
	font-weight: 700;
}

.cdc-shop__paginazione .page-numbers.dots {
	border-color: transparent;
}

.cdc-shop-vuoto {
	padding: 24px 0;
	color: #7d6556;
}

/* --- la barra dei comandi di Avada, sopra la griglia -------------------- */

/*
 * Questo foglio si carica solo sulle pagine di catalogo e solo a griglia
 * accesa, quindi puo' intervenire sugli elementi di Avada che le stanno
 * sopra senza toccare il resto del sito.
 *
 * ⚠️ Ancorate a `#main`: Avada ha le stesse regole con la stessa
 * specificita' (0,2,0) e il suo foglio compilato viene caricato DOPO questo,
 * quindi a parita' vincerebbe lui.
 *
 * Il selettore griglia/elenco agisce sulla griglia di Avada, che qui non
 * c'e' piu': cliccarlo non cambia niente. Un comando che non fa nulla e'
 * peggio di un comando assente, quindi sparisce.
 */
#main .fusion-woo-sorting .awb-product-view {
	display: none;
}

/*
 * Su telefono la barra occupava tre righe prima del primo vino: ordinamento,
 * "Show 20 Products" e il selettore vista, tutti centrati e grandi. Resta
 * l'ordinamento, su una riga sola.
 */
@media (max-width: 599px) {
	/* `.active-count` e' l'<li> selezionato DENTRO la tendina, non il
	   comando visibile: quello e' `ul.sort-count`. */
	#main .fusion-woo-sorting .sort-count {
		display: none;
	}

	#main .fusion-woo-sorting {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		margin-bottom: 12px;
	}

	#main .fusion-woo-sorting .awb-sort {
		flex: 1;
		min-width: 0;
	}

	#main .fusion-woo-sorting .awb-sort,
	#main .fusion-woo-sorting .awb-order {
		margin: 0;
	}
}

/* ======================================================================
   SCHEDA DEL SINGOLO VINO
   ====================================================================== */

/*
 * Mobile-first: una colonna, con la foto per prima. Prima la foto stava
 * sotto nome, dati e pulsante, e in cima restava mezzo schermo bianco.
 * Da tablet in su passa a due colonne, con la foto che resta visibile
 * mentre si scorre il testo.
 */
.cdc-scheda {
	--cdc-bordeaux: var(--awb-color7, #950c45);
	--cdc-bordeaux-scuro: #7a0a38;
	--cdc-grigio: #7d6556;
	--cdc-bordo: #eae1d9;

	--cdc-font-testo: var(--body_typography-font-family, Rubik, Arial, Helvetica, sans-serif);
	--cdc-font-display: var(--h1_typography-font-family, "Bebas Neue", Arial, Helvetica, sans-serif);

	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	font-family: var(--cdc-font-testo);
}

.cdc-scheda *,
.cdc-scheda *::before,
.cdc-scheda *::after {
	box-sizing: border-box;
}

/* Stesso reset della card: il tema veste gli elementi nudi. */
.cdc-scheda :where(h1, h2, p, a, span, dl, dt, dd) {
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	color: inherit;
}

/* --- foto ---------------------------------------------------------- */

.cdc-scheda__media {
	position: relative;
	padding: 12px;
	border: 1px solid var(--cdc-bordo, #eae1d9);
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.cdc-scheda__img,
.cdc-scheda__noimg {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: contain;
	margin: 0 auto;
}

.cdc-scheda__noimg {
	background: #faf7f3;
	border-radius: 10px;
}

/* --- testo --------------------------------------------------------- */

.cdc-scheda__produttore {
	margin-bottom: 6px;
	font-size: 12px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-scheda__produttore a {
	color: inherit;
	text-decoration: none;
}

.cdc-scheda__produttore a:hover,
.cdc-scheda__produttore a:focus-visible {
	color: var(--cdc-bordeaux, #950c45);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cdc-scheda__nome {
	margin-bottom: 10px;
	font-family: var(--cdc-font-display);
	font-size: 34px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: .5px;
}

/*
 * I dati senza emoji. Il separatore sta davanti al pezzo che segue, cosi'
 * andando a capo scende con lui — stessa regola della card.
 */
.cdc-scheda__dati {
	margin-bottom: 4px;
	font-size: 14px;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-scheda__dati span + span::before {
	content: " · ";
	white-space: pre;
}

.cdc-scheda__vitigni {
	margin-bottom: 18px;
	font-size: 13.5px;
	font-style: italic;
	color: var(--cdc-grigio, #7d6556);
}

/* --- acquisto ------------------------------------------------------ */

.cdc-scheda__acquisto {
	padding: 16px;
	border: 1px solid var(--cdc-bordo, #eae1d9);
	border-radius: 12px;
	background: #fff;
}

.cdc-scheda__prezzo {
	margin-bottom: 12px;
	font-family: var(--cdc-font-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .5px;
	color: var(--cdc-bordeaux, #950c45);
}

.cdc-scheda__prezzo del {
	display: block;
	font-family: var(--cdc-font-testo);
	font-size: 14px;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-scheda__prezzo ins {
	text-decoration: none;
}

.cdc-scheda__nota,
.cdc-scheda__esaurito {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cdc-grigio, #7d6556);
}

/* Il form standard di WooCommerce, vestito. */
.cdc-scheda__acquisto form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0;
}

.cdc-scheda__acquisto .quantity input {
	width: 72px;
	height: 46px;
	padding: 0 8px;
	border: 1px solid var(--cdc-bordo, #eae1d9);
	border-radius: 8px;
	text-align: center;
	font-size: 15px;
}

.cdc-scheda__acquisto button.button,
.cdc-scheda__acquisto .single_add_to_cart_button {
	flex: 1;
	min-width: 160px;
	min-height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--cdc-bordeaux, #950c45);
	color: #fff;
	font-family: var(--cdc-font-testo);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.cdc-scheda__acquisto button.button:hover,
.cdc-scheda__acquisto .single_add_to_cart_button:hover {
	background: var(--cdc-bordeaux-scuro, #7a0a38);
	color: #fff;
}

/* --- ospiti -------------------------------------------------------- */

.cdc-scheda__ospite {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cdc-scheda__riservato {
	font-size: 14px;
	line-height: 1.45;
	color: var(--cdc-grigio, #7d6556);
}

.cdc-scheda__accedi {
	display: block;
	min-height: 46px;
	padding: 13px 18px;
	border-radius: 8px;
	background: var(--cdc-bordeaux, #950c45);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.cdc-scheda__accedi:hover {
	background: var(--cdc-bordeaux-scuro, #7a0a38);
	color: #fff;
}

/* --- descrizione e dettagli ---------------------------------------- */

.cdc-scheda__descrizione,
.cdc-scheda__dettagli {
	margin-top: 22px;
}

.cdc-scheda__descrizione h2,
.cdc-scheda__dettagli h2,
.cdc-scheda__altri-titolo {
	margin-bottom: 10px;
	font-family: var(--cdc-font-display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: .5px;
}

/*
 * ⚠️ `font: inherit` e il wrap: la descrizione arrivava in monospace dentro
 * un <pre> e sbordava oltre il margine destro, tagliando il testo.
 */
.cdc-scheda__descrizione p {
	margin-bottom: 10px;
	font-family: var(--cdc-font-testo);
	font-size: 15px;
	line-height: 1.65;
	white-space: normal;
	overflow-wrap: anywhere;
}

.cdc-scheda__dettagli dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	font-size: 14px;
}

.cdc-scheda__dettagli dt {
	color: var(--cdc-grigio, #7d6556);
}

.cdc-scheda__dettagli dd {
	margin: 0;
}

/* --- altri vini della cantina -------------------------------------- */

.cdc-scheda__altri {
	margin-top: 36px;
}

.cdc-scheda__altri-tutti {
	margin-top: 16px;
	text-align: center;
}

.cdc-scheda__altri-tutti a {
	display: inline-block;
	padding: 11px 20px;
	border: 1px solid var(--cdc-bordeaux, #950c45);
	border-radius: 8px;
	color: var(--cdc-bordeaux, #950c45);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.cdc-scheda__altri-tutti a:hover {
	background: var(--cdc-bordeaux, #950c45);
	color: #fff;
}

/* --- due colonne da tablet in su ----------------------------------- */

@media (min-width: 800px) {
	.cdc-scheda {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 36px;
		align-items: start;
	}

	.cdc-scheda__media {
		position: sticky;
		top: 90px;
		padding: 20px;
	}

	.cdc-scheda__img,
	.cdc-scheda__noimg {
		height: 460px;
	}

	.cdc-scheda__nome {
		font-size: 44px;
	}

	.cdc-scheda__prezzo {
		font-size: 44px;
	}
}

/* --- il titolo del banner su telefono ---------------------------------- */

/*
 * L'h1 del tema e' 54px: dentro la fascia del catalogo, su un telefono,
 * "Il catalogo de La Compagnia del Calice" occupava due righe altissime e
 * spingeva il sottotitolo fuori dalla fascia.
 */
@media (max-width: 599px) {
	#main .fusion-tb-page-title-bar h1,
	#main .fusion-title h1.title-heading-center,
	#main .fusion-title h1.title-heading-left {
		font-size: 30px;
		line-height: 1.05;
	}
}

/*
 * Margini laterali su telefono.
 *
 * Il container Avada in cui vive la scheda ha i padding laterali vuoti: il
 * testo finiva attaccato al bordo dello schermo mentre la foto, che ha un
 * riquadro suo, sembrava rientrata. Da 800px in su ci pensa la riga di
 * Avada, quindi si interviene solo sotto.
 */
@media (max-width: 799px) {
	.cdc-scheda,
	.cdc-scheda__altri {
		padding-left: 16px;
		padding-right: 16px;
	}

	/*
	 * Su telefono bisogna arrivare al prezzo senza scorrere tre schermate.
	 * La foto scende a 230px, il titolo a 24 e i margini si stringono: con
	 * 320px di foto piu' un titolo di tre righe di Bebas a 28, prima di
	 * un'informazione utile non si vedeva niente.
	 */
	.cdc-scheda {
		gap: 14px;
	}

	.cdc-scheda__media {
		padding: 10px;
	}

	.cdc-scheda__img,
	.cdc-scheda__noimg {
		height: 230px;
	}

	.cdc-scheda__nome {
		font-size: 24px;
		line-height: 1.02;
		margin-bottom: 8px;
	}

	.cdc-scheda__vitigni {
		margin-bottom: 14px;
	}

	.cdc-scheda__acquisto {
		padding: 14px;
	}

	.cdc-scheda__prezzo {
		font-size: 34px;
	}
}

/*
 * La descrizione generata dal plugin e' HTML con sezioni e liste
 * ("In breve", "Profilo organolettico", "Abbinamenti"…): qui si veste.
 */
.cdc-scheda__descrizione h3 {
	margin: 20px 0 8px;
	font-family: var(--cdc-font-display);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: .4px;
	color: var(--cdc-bordeaux, #950c45);
}

.cdc-scheda__descrizione h3:first-child {
	margin-top: 0;
}

.cdc-scheda__descrizione ul {
	margin: 0 0 12px;
	padding-left: 20px;
	list-style: disc;
}

.cdc-scheda__descrizione li {
	margin-bottom: 5px;
	font-size: 15px;
	line-height: 1.6;
}

.cdc-scheda__descrizione strong {
	font-weight: 700;
}