/*
Theme Name:   Chianti Ceramiche Carbini Gabriella
Theme URI:    https://www.chianticeramica.it/
Description:  Tema figlio di Divi. Impianto grafico su richiesta del cliente modellato su ceramichesofia.it, ribaltato su fondo bianco. Header, footer e pagine di negozio non passano da Divi: il Generatore resta disponibile per le pagine editoriali.
Author:       Ruggiero Media
Template:     Divi
Version:      2.0.0
Text Domain:  chianticeramica
*/

/* ==========================================================================
   PALETTE

   Richiesta del cliente: stesso impianto di ceramichesofia.it, ma FONDO BIANCO
   invece che nero. Il riferimento e' #101010 con testo bianco e accento ambra
   #ffb74a: qui i ruoli restano, i valori si ribaltano.

   L'accento non e' l'ambra del riferimento ma l'OCRA DEL LOGO, #d8a830,
   campionata dai pixel del marchio. Gioca la stessa parte e appartiene a questo
   marchio invece che a un altro.

   Due trappole di questa palette, scritte qui perche' non si riscoprano a
   contrasto fallito:
     - l'ocra NON regge testo bianco sopra (1,9:1). I pulsanti ocra portano
       testo quasi nero, esattamente come fa il riferimento;
     - l'ocra non regge nemmeno come testo su bianco (2,2:1): per il testo
       esiste --cc-accento-testo, piu' scura.
   ========================================================================== */

:root {
	--cc-fondo: #fff;
	--cc-fondo-caldo: #f7f4ee;
	--cc-fondo-scuro: #101010;

	--cc-testo: #101010;
	--cc-testo-tenue: #5a5651;
	--cc-testo-chiaro: #ebe7e0;
	--cc-testo-chiaro-tenue: #c9c4bb;

	--cc-accento: #d8a830;
	--cc-accento-caldo: #c2941f;
	--cc-accento-testo: #7a5c0d;

	--cc-rosso: #c80b0c;
	--cc-rosso-fondo: #a80a0b;
	--cc-rosso-scuro: #7e0708;

	--cc-bordo: #e6e0d4;
	--cc-bordo-campo: #8f877a;
	--cc-bianco: #fff;

	--cc-larghezza: 1280px;
	--cc-larghezza-testo: 44rem;

	--cc-raggio: 0;

	--cc-ombra: 0 1px 2px rgba(16, 16, 16, .05), 0 12px 32px rgba(16, 16, 16, .07);

	--cc-titolo: 'Crimson Text', Georgia, 'Times New Roman', serif;
	--cc-testo-font: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	/* Il riferimento tiene 0,96px di spaziatura su 16px di corpo. Riportata in
	   em resta corretta anche quando il corpo cambia. */
	--cc-spaziatura: .055em;
}

/* ==========================================================================
   Font, serviti dal nostro dominio. Zero richieste a terzi.

   Tre pesi soli. Con cinque si arrivava a 128 KB per pagina; con questi tre a
   77 KB, e la differenza a schermo non si vede. Le varianti latin-ext ci sono
   ma il browser le scarica solo se una pagina usa quei caratteri.
   Entrambe le famiglie sono SIL Open Font License: la licenza viaggia nello zip.
   ========================================================================== */

@font-face {
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/font/CrimsonText-400-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

@font-face {
	font-family: 'Crimson Text';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/font/CrimsonText-400-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Crimson Text';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/font/CrimsonText-400-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/font/Jost-300-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('assets/font/Jost-300-normal-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/font/Jost-500-normal-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122;
}

/* ==========================================================================
   Base
   box-sizing va dichiarato nel NOSTRO foglio: fuori dal reset di Divi i bottoni
   crescono, e le pagine a template il reset di Divi non ce l'hanno affatto.
   ========================================================================== */

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

html {
	/* clip, non hidden: hidden rompe position:sticky sui discendenti, e
	   l'intestazione qui e' sticky. */
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.cc {
	margin: 0;
	background: var(--cc-fondo);
	color: var(--cc-testo);
	font-family: var(--cc-testo-font);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.75;
	letter-spacing: var(--cc-spaziatura);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

/*
 * :where() azzera la specificita' del selettore che contiene.
 *
 * Scritta come `.cc img, .cc video` questa regola vale 0,1,1 e batte qualunque
 * componente scritto con una classe sola (0,1,0). Su un elemento sostituito -
 * immagine o video - `height: auto` non e' innocuo: con position:absolute e
 * inset:0 l'elemento smette di riempire il contenitore e torna al proprio
 * rapporto d'aspetto. Misurato sulla copertina: il video usciva alto 680 px
 * dentro un blocco di 736, e sotto restava una striscia nera di 56 px.
 *
 * Con :where() la regola scende a 0,1,0 e ogni classe di componente dichiarata
 * dopo vince. Cosi' il difetto non si ripresenta al prossimo elemento a piena
 * copertura, invece di essere corretto uno per uno.
 */
.cc :where(img, svg, video) { max-width: 100%; height: auto; }

.cc h1,
.cc h2,
.cc h3,
.cc h4 {
	font-family: var(--cc-titolo);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: .01em;
	color: var(--cc-testo);
	margin: 0 0 .55em;
}

.cc h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem); }
.cc h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); }
.cc h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
.cc h4 { font-size: 1.1rem; }

.cc p { margin: 0 0 1.15em; }

.cc a {
	color: var(--cc-rosso-fondo);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.cc a:hover,
.cc a:focus-visible { color: var(--cc-rosso-scuro); }

.cc :focus-visible {
	outline: 2px solid var(--cc-accento-testo);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   SPECIFICITA': da qui in giu' i componenti si scrivono `.cc .cc-x`, non
   `.cc-x`.

   La regola di base `.cc a` vale 0,1,1 (una classe e un tipo). Un componente
   scritto `.cc-bottone` vale 0,1,0 e PERDE: il colore del collegamento gli
   passa sopra. Nella prima versione di questo tema il pulsante pieno usciva
   rosso su rosso - etichetta invisibile, markup completo, nessun errore.
   E' il § 3.11 del capitolato preso in pieno. Il prefisso porta i componenti a
   0,2,0, che batte 0,1,1.
   -------------------------------------------------------------------------- */

.cc .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cc .screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	white-space: normal;
}

.cc .cc-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cc-testo);
	color: var(--cc-bianco);
	padding: .7rem 1.1rem;
	z-index: 400;
}

.cc .cc-salta:focus { left: 0; }

.cc-contenitore {
	width: min(100% - 2.5rem, var(--cc-larghezza));
	margin-inline: auto;
}

.cc-stretto { max-width: var(--cc-larghezza-testo); margin-inline: auto; }
.cc-colonna { max-width: var(--cc-larghezza-testo); }

.cc-sezione { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.cc-sezione--caldo { background: var(--cc-fondo-caldo); }

/* I blocchi scuri sono la citazione diretta del riferimento: li' e' tutto il
   sito, qui sono le pause. */
.cc-sezione--scuro { background: var(--cc-fondo-scuro); color: var(--cc-testo-chiaro); }

/* --------------------------------------------------------------------------
   Sezione scura CON FOTOGRAFIA sotto.
   Il velo e' nero al 90%: la fotografia resta percepibile come materia e
   profondita', ma il contrasto del testo non dipende piu' da quale immagine ci
   finisce dentro. A meno del 90% il testo bianco su un punto chiaro sparisce, e
   quale foto ci va lo decide chi carica i contenuti, non chi scrive il tema.
   -------------------------------------------------------------------------- */

.cc-sezione--foto { position: relative; overflow: hidden; }

.cc .cc-sezione--foto__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-sezione--foto::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(16, 16, 16, .9);
}

.cc-sezione--foto > .cc-contenitore { position: relative; z-index: 2; }
.cc-sezione--scuro h2,
.cc-sezione--scuro h3 { color: var(--cc-bianco); }
.cc-sezione--scuro a { color: var(--cc-accento); }

/* Occhiello: maiuscoletto spaziato sopra il titolo, come nel riferimento. */
.cc-occhiello {
	font-family: var(--cc-testo-font);
	font-weight: 500;
	font-size: .74rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cc-accento-testo);
	margin: 0 0 1rem;
}

.cc-sezione--scuro .cc-occhiello { color: var(--cc-accento); }

.cc-testata-sezione { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.cc-testata-sezione p:last-child { margin-bottom: 0; color: var(--cc-testo-tenue); }
.cc-sezione--scuro .cc-testata-sezione p { color: var(--cc-testo-chiaro-tenue); }

.cc-filetto {
	width: 2.75rem;
	height: 2px;
	background: var(--cc-accento);
	border: 0;
	margin: 0 auto 1.5rem;
}

.cc-filetto--sinistra { margin-inline: 0 auto; }

/* ==========================================================================
   Bottoni
   Fondo ocra e testo quasi nero: e' il pulsante del riferimento, ed e' anche
   l'unica combinazione che l'ocra regge (9,2:1). Con testo bianco starebbe
   a 1,9:1, cioe' illeggibile.
   ========================================================================== */

.cc .cc-bottone {
	display: inline-block;
	font-family: var(--cc-testo-font);
	font-weight: 500;
	font-size: .82rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 1.05rem 2.2rem;
	border: 1px solid var(--cc-accento);
	border-radius: var(--cc-raggio);
	background: var(--cc-accento);
	color: var(--cc-testo);
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.cc .cc-bottone:hover,
.cc .cc-bottone:focus-visible {
	background: var(--cc-accento-caldo);
	border-color: var(--cc-accento-caldo);
	color: var(--cc-testo);
}

.cc .cc-bottone--linea {
	background: transparent;
	color: var(--cc-testo);
	border-color: var(--cc-testo);
}

.cc .cc-bottone--linea:hover,
.cc .cc-bottone--linea:focus-visible {
	background: var(--cc-testo);
	color: var(--cc-bianco);
	border-color: var(--cc-testo);
}

/* Sul fondo scuro il contorno chiaro. */
.cc-sezione--scuro .cc-bottone--linea,
.cc-copertina .cc-bottone--linea {
	color: var(--cc-bianco);
	border-color: rgba(255, 255, 255, .75);
}

.cc-sezione--scuro .cc-bottone--linea:hover,
.cc-copertina .cc-bottone--linea:hover,
.cc-sezione--scuro .cc-bottone--linea:focus-visible,
.cc-copertina .cc-bottone--linea:focus-visible {
	background: var(--cc-bianco);
	color: var(--cc-testo);
	border-color: var(--cc-bianco);
}

/* ==========================================================================
   Barra annunci
   Il nastro scorrevole in cima al sito di riferimento. Dice SOLO cose vere:
   il riferimento promette spedizione gratuita e a impatto zero, noi non
   abbiamo ne' tariffe ne' vettore confermati.
   ========================================================================== */

.cc-annunci {
	position: relative;
	z-index: 210;
	background: var(--cc-fondo-scuro);
	color: var(--cc-testo-chiaro);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	overflow: hidden;
	height: 2.6rem;
}

.cc-annunci__nastro {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: cc-scorri 42s linear infinite;
}

.cc-annunci__voce { display: flex; align-items: center; white-space: nowrap; padding: 0 2.2rem; }

.cc-annunci__voce::after {
	content: '';
	width: 4px; height: 4px;
	margin-left: 2.2rem;
	border-radius: 50%;
	background: var(--cc-accento);
}

@keyframes cc-scorri {
	from { transform: translateX(0); }
	/* -50%: il nastro contiene l'elenco DUE volte, quindi a meta' corsa il
	   secondo blocco si trova esattamente dov'era il primo e il salto non si
	   vede. Con una copia sola comparirebbe uno spazio vuoto. */
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-annunci__nastro { animation: none; }
}

/* ==========================================================================
   Intestazione
   Trasparente sopra la copertina, piena dopo lo scorrimento: e' il
   comportamento del sito di riferimento.
   ========================================================================== */

.cc-testata {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Con la barra annunci l'intestazione parte sotto di essa, e ci sale sopra
   appena si scorre. */
.cc-testata { top: 2.6rem; }
.cc-testata[data-fissa='si'] { top: 0; }

.cc-testata[data-fissa='si'] {
	background: rgba(255, 255, 255, .96);
	border-bottom-color: var(--cc-bordo);
	box-shadow: 0 1px 20px rgba(16, 16, 16, .07);
}

/* Il velo sfocato sta su uno pseudo-elemento, non sull'intestazione:
   backdrop-filter crea un containing block per i discendenti position:fixed, e
   applicato qui farebbe collassare il pannello del menu su telefono. */
.cc-testata[data-fissa='si']::before {
	content: '';
	position: absolute;
	inset: 0;
	backdrop-filter: saturate(140%) blur(10px);
	z-index: -1;
}

/*
 * Sopra la copertina il testo e' chiaro; da fermo su fondo bianco torna scuro.
 *
 * Le regole vanno scritte `.cc .cc-testata ...` e non `.cc-testata ...`: la
 * regola di base dei collegamenti vale 0,1,1 e batterebbe una classe sola.
 * E' lo stesso inciampo che aveva reso invisibile il pulsante della copertina.
 */
/*
 * `> li > a` e non `a`: SOLO le voci di primo livello.
 *
 * Scritto come `.cc-menu a`, il selettore prendeva anche i collegamenti dentro
 * il sottomenu, che pero' sta su un pannello BIANCO: le voci di
 * "Complementi d'arredo, Creazioni cucina, Creazioni regalo" uscivano bianche su
 * bianco, cioe' invisibili. Si vedeva solo il filetto ocra della voce attiva, e
 * il pannello sembrava vuoto.
 *
 * Il colore chiaro serve alla barra trasparente sopra la fotografia. Il
 * sottomenu non e' trasparente: e' un pannello pieno con i propri colori, e non
 * deve ereditare nulla da quello stato.
 */
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-menu > li > a,
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-carrello,
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-azione {
	color: var(--cc-bianco);
}

.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-menu > li > a:hover,
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-menu > li > a:focus-visible,
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-carrello:hover,
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-azione:hover {
	color: var(--cc-accento);
	border-bottom-color: var(--cc-accento);
}

.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-interruttore {
	color: var(--cc-bianco);
	border-color: rgba(255, 255, 255, .5);
}

/* Senza copertina l'intestazione e' piena fin da subito, o si avrebbe testo
   bianco su fondo bianco. */
.cc.cc-senza-copertina .cc-testata {
	background: rgba(255, 255, 255, .96);
	border-bottom-color: var(--cc-bordo);
}

/* L'intestazione e' fissa: senza questo margine coprirebbe le prime righe
   delle pagine che non hanno una copertina dietro cui stare. */
.cc.cc-senza-copertina .cc-principale { padding-top: calc(5.25rem + 2.6rem); }

.cc-testata__riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.25rem;
}

.cc-marchio { display: flex; align-items: center; flex: 0 0 auto; }

/* Nome di classe che non usa nessun altro: in un progetto gemello lo stesso
   nome per due cose diverse ha reso il logo 176x104 invece di 176x45. */
.cc-marchio__img { display: block; width: auto; height: 3.4rem; max-height: 3.4rem; }

/* Lo stiramento deve attraversare riga, navigazione ed elenco, o il pannello
   del sottomenu non si aggancia al bordo inferiore della fascia. */
.cc-navigazione { display: flex; align-items: stretch; align-self: stretch; gap: 1.9rem; }

.cc-menu {
	display: flex;
	align-items: stretch;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-menu > li { display: flex; align-items: center; position: relative; }

.cc-menu a {
	font-family: var(--cc-testo-font);
	font-weight: 400;
	font-size: .78rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--cc-testo);
	text-decoration: none;
	padding-block: .4rem;
	border-bottom: 1px solid transparent;
}

.cc-menu a:hover,
.cc-menu a:focus-visible,
.cc-menu .current-menu-item > a,
.cc-menu .current-menu-parent > a {
	color: var(--cc-accento-testo);
	border-bottom-color: var(--cc-accento);
}

.cc-menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: .34em; height: .34em;
	margin-left: .5em;
	vertical-align: .16em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translate(-.05em, -.05em);
}

.cc-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1.1rem;
	z-index: 220;
	min-width: 16rem;
	margin: 0;
	padding: .6rem 0;
	list-style: none;
	background: var(--cc-bianco);
	border: 1px solid var(--cc-bordo);
	box-shadow: var(--cc-ombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(.3rem);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* :focus-within e non solo :hover, cosi' il sottomenu si apre anche con il
   tasto di tabulazione e senza JavaScript. */
.cc-menu > li:hover > .sub-menu,
.cc-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Il colore qui e' DICHIARATO, non ereditato.
   Lasciandolo ereditare, il sottomenu prendeva il bianco della barra
   trasparente e spariva sul proprio pannello chiaro. Un pannello pieno si
   dichiara i colori da solo: e' l'unico modo perche' resti leggibile qualunque
   cosa succeda sopra di lui. */
.cc .cc-menu .sub-menu a {
	display: block;
	padding: .65rem 1.2rem;
	border-bottom: 0;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: .04em;
	font-size: .92rem;
	color: var(--cc-testo);
}

.cc .cc-menu .sub-menu a:hover,
.cc .cc-menu .sub-menu a:focus-visible { color: var(--cc-accento-testo); }

.cc-menu .sub-menu a:hover,
.cc-menu .sub-menu a:focus-visible { background: var(--cc-fondo-caldo); border-bottom-color: transparent; }

.cc-azioni { display: flex; align-items: center; gap: 1.1rem; }

.cc .cc-azione {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .35rem;
	background: none;
	border: 0;
	color: var(--cc-testo);
	cursor: pointer;
	text-decoration: none;
}

.cc .cc-azione:hover,
.cc .cc-azione:focus-visible { color: var(--cc-accento-testo); }

.cc-azione__icona { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* --------------------------------------------------------------------------
   Selettore di lingua

   Due sigle separate da un filetto. Non bandierine: a 16 pixel non si
   distinguono e la bandiera britannica per "inglese" e' una convenzione che
   esclude chi legge inglese senza essere britannico.

   La lingua attiva NON e' solo piu' scura: e' anche un elemento senza
   collegamento attivo per il lettore di schermo (aria-current). Distinguere
   due voci col solo colore e' il caso tipico del criterio WCAG 1.4.1.
   -------------------------------------------------------------------------- */

.cc-lingue { display: inline-flex; align-items: center; gap: .5rem; }

.cc .cc-lingue__voce {
	font-family: var(--cc-font-titoli-sans, inherit);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--cc-testo-tenue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

.cc .cc-lingue__voce + .cc-lingue__voce { border-left: 1px solid var(--cc-bordo); padding-left: .5rem; }

.cc .cc-lingue__voce:hover,
.cc .cc-lingue__voce:focus-visible { color: var(--cc-accento-testo); }

.cc .cc-lingue__voce--attivo { color: var(--cc-testo); border-bottom-color: var(--cc-accento); }

/* Sopra la copertina, finche' l'intestazione non si e' riempita di bianco, il
   testo e' chiaro: stesso stato usato per menu, carrello e azioni poco sopra. */
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-lingue__voce { color: rgba(255, 255, 255, .78); }
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-lingue__voce--attivo { color: #fff; }
.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-lingue__voce + .cc-lingue__voce { border-left-color: rgba(255, 255, 255, .38); }

/* --------------------------------------------------------------------------
   Orari di apertura

   Due colonne: il giorno a sinistra, l'orario a destra allineato. Non e' una
   tabella perche' non e' un dato tabellare a due dimensioni: e' un elenco di
   coppie, e un <table> costringerebbe un lettore di schermo ad annunciare righe
   e colonne per leggere "sabato 9-13".
   -------------------------------------------------------------------------- */

.cc-orari { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 24rem; }

.cc-orari li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--cc-bordo);
}

.cc-orari li:last-child { border-bottom: 0; }

.cc-orari li > span:first-child { color: var(--cc-testo-tenue); }
.cc-orari li > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cc-sezione--scuro .cc-orari li { border-bottom-color: rgba(255, 255, 255, .18); }
.cc-sezione--scuro .cc-orari li > span:first-child { color: var(--cc-testo-chiaro-tenue); }

/* --------------------------------------------------------------------------
   Pulsante WhatsApp

   Fisso in basso a destra. L'etichetta e' nascosta sotto i 40rem: su telefono
   occuperebbe mezza larghezza dello schermo sopra il contenuto, e li' l'icona
   verde di WhatsApp e' riconosciuta da chiunque senza bisogno di scritte.

   z-index sotto quello del riquadro dell'invito: quando il riquadro e' aperto,
   il pulsante non deve galleggiarci sopra.
   -------------------------------------------------------------------------- */

.cc .cc-whatsapp {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.15rem;

	/* Non e' il verde di marca #25d366: quello col bianco sopra da' 1,98:1,
	   cioe' meta' della soglia AA. E' un colore nato per un'icona, non per
	   portarci del testo. Questo verde scuro dello stesso marchio da' 5,3:1 e
	   resta riconoscibile, tanto piu' che accanto c'e' il glifo. Misurato con
	   tools\contrasto.ps1, dove la coppia e' elencata insieme al controllo. */
	background: #0b7a5e;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--cc-font-titoli-sans, inherit);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	box-shadow: 0 6px 20px rgba(16, 16, 16, .22);
	transition: transform .16s ease, box-shadow .16s ease;
}

.cc .cc-whatsapp:hover,
.cc .cc-whatsapp:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(16, 16, 16, .28);
}

.cc-whatsapp__icona { width: 1.35rem; height: 1.35rem; fill: currentColor; flex: none; }

@media (max-width: 40rem) {
	.cc .cc-whatsapp { right: 1rem; bottom: 1rem; padding: .9rem; }
	.cc-whatsapp__testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Chi ha chiesto meno animazioni non vuole nemmeno che il pulsante si sollevi. */
@media (prefers-reduced-motion: reduce) {
	.cc .cc-whatsapp { transition: none; }
	.cc .cc-whatsapp:hover,
	.cc .cc-whatsapp:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   Pannello di ricerca
   -------------------------------------------------------------------------- */

.cc-ricerca {
	border-top: 1px solid var(--cc-bordo);
	background: var(--cc-bianco);
	padding-block: 1.25rem;
}

.cc-ricerca[hidden] { display: none; }

.cc-ricerca__modulo { display: flex; align-items: center; gap: .75rem; }

.cc-ricerca__campo {
	flex: 1 1 auto;
	font: inherit;
	font-size: 1.05rem;
	padding: .85rem 1rem;
	border: 1px solid var(--cc-bordo-campo);
	background: var(--cc-bianco);
	color: var(--cc-testo);
}

.cc-ricerca__campo:focus-visible { border-color: var(--cc-accento-testo); }

.cc .cc-ricerca__chiudi {
	background: none;
	border: 0;
	padding: .5rem;
	color: var(--cc-testo-tenue);
	cursor: pointer;
}

.cc .cc-ricerca__chiudi:hover { color: var(--cc-testo); }

/* --------------------------------------------------------------------------
   Catalogo: barra laterale a sinistra, risultati a destra.
   E' l'impianto del sito di riferimento: colonna filtri di 250 px, gruppi a
   fisarmonica, campioni di colore.
   -------------------------------------------------------------------------- */

.cc-catalogo {
	display: grid;
	grid-template-columns: 15.5rem minmax(0, 1fr);
	gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
	align-items: start;
}

/* minmax(0, 1fr) e non 1fr: una colonna di griglia ha larghezza minima
   `auto`, cioe' il contenuto piu' largo che contiene. Con una griglia di
   prodotti dentro, quella misura cresce e la colonna sfonda il contenitore
   invece di restringersi. E' il difetto piu' comune delle griglie annidate. */

.cc-lato { position: sticky; top: calc(5.25rem + 1.5rem); }

.cc-lato__testa {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--cc-testo);
	font-size: .74rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cc-testo);
}

.cc-lato__icona { width: .9rem; height: .9rem; fill: var(--cc-testo); }

.cc .cc-lato__azzera {
	margin-left: auto;
	color: var(--cc-rosso-fondo);
	text-decoration: none;
	letter-spacing: .06em;
	text-transform: none;
	font-size: .82rem;
}

.cc-lato__gruppo { border-bottom: 1px solid var(--cc-bordo); }

.cc-lato__titolo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 1.1rem 0;
	cursor: pointer;
	font-family: var(--cc-titolo);
	font-size: 1.15rem;
	list-style: none;
}

/* Il triangolino predefinito di <summary> non si toglie allo stesso modo su
   tutti i browser: servono entrambe le righe. */
.cc-lato__titolo::-webkit-details-marker { display: none; }
.cc-lato__titolo::marker { content: ''; }

.cc-lato__freccia {
	width: .5rem;
	height: .5rem;
	border-right: 1px solid var(--cc-testo);
	border-bottom: 1px solid var(--cc-testo);
	transform: rotate(45deg) translate(-.1em, -.1em);
	transition: transform .2s ease;
}

.cc-lato__gruppo[open] .cc-lato__freccia { transform: rotate(-135deg) translate(-.1em, -.1em); }

.cc-lato__corpo { padding-bottom: 1.25rem; }

.cc-lato__voci { display: grid; gap: .1rem; }

.cc .cc-lato__voce {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .45rem 0;
	color: var(--cc-testo);
	text-decoration: none;
	font-size: .94rem;
}

.cc .cc-lato__voce:hover .cc-lato__nome,
.cc .cc-lato__voce:focus-visible .cc-lato__nome { color: var(--cc-accento-testo); text-decoration: underline; }

.cc-lato__nome { flex: 1 1 auto; }
.cc-lato__conteggio { font-size: .8rem; color: var(--cc-testo-tenue); }

.cc .cc-lato__voce--attivo .cc-lato__nome { font-weight: 500; color: var(--cc-accento-testo); }

/* Un pallino pieno segna la voce attiva: senza, l'unico segnale sarebbe il
   grassetto, che su un elenco lungo non si nota. */
.cc .cc-lato__voce--attivo::before {
	content: '';
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--cc-accento);
	flex: 0 0 auto;
}

.cc-lato__voce--figlia { padding-left: 1rem; font-size: .88rem; }
.cc-lato__voce--figlia .cc-lato__nome { color: var(--cc-testo-tenue); }
.cc-lato__voce--madre .cc-lato__nome { font-family: var(--cc-titolo); font-size: 1.02rem; }

/* Campioni di colore, come le pastiglie del riferimento. */
.cc-lato__voci--campioni { grid-template-columns: 1fr; }

.cc-campione {
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
	border: 1px solid var(--cc-bordo-campo);
	border-radius: 50%;
}

@media (max-width: 60rem) {
	/* Sotto i 960 px la colonna sparisce e i filtri tornano in cima, chiusi:
	   una barra laterale di 250 px su un telefono lascerebbe ai prodotti una
	   striscia inutilizzabile. */
	.cc-catalogo { grid-template-columns: 1fr; }
	.cc-lato { position: static; border: 1px solid var(--cc-bordo); padding: 1rem 1.25rem; background: var(--cc-fondo-caldo); }
	.cc-lato__gruppo:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Riquadro d'invito
   -------------------------------------------------------------------------- */

.cc-invito {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(16, 16, 16, .55);
}

.cc-invito[hidden] { display: none; }

/* Impianto del riquadro del riferimento: fotografia a sinistra per tutta
   l'altezza, pannello a destra con testo centrato, due campi impilati, pulsante
   a piena larghezza e la nota legale sotto.

   Il pannello e' SCURO anche se il tema e' chiaro. Non e' una dimenticanza: e'
   un elemento che compare sopra la pagina e deve staccare da essa, ed e'
   l'unico punto in cui il riferimento e' stato seguito anche nel colore.
   Il resto del sito resta chiaro come richiesto. */
.cc-invito__riquadro {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	max-width: 48rem;
	width: 100%;
	max-height: calc(100dvh - 2.5rem);
	overflow-y: auto;
	background: var(--cc-fondo-scuro);
	color: var(--cc-testo-chiaro);
	box-shadow: var(--cc-ombra);
}

.cc-invito__figura { margin: 0; position: relative; min-height: 16rem; }
.cc .cc-invito__figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cc-invito__testo { padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); text-align: center; }
.cc-invito__testo h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--cc-bianco); margin-bottom: .5rem; }
.cc-invito__testo > p { color: var(--cc-testo-chiaro-tenue); font-size: .93rem; }
.cc-invito__testo .cc-occhiello { color: var(--cc-accento); }

.cc-invito__modulo { display: grid; gap: .7rem; margin-top: 1.5rem; text-align: left; }

/* Campi bianchi pieni sul pannello scuro, come nel riferimento. */
.cc-invito__modulo .cc-campo label { color: var(--cc-testo-chiaro); }
.cc-invito__modulo .cc-campo input[type="text"],
.cc-invito__modulo .cc-campo input[type="email"] { border-color: transparent; }
.cc-invito__modulo .cc-campo__nota { color: var(--cc-testo-chiaro-tenue); text-align: center; font-size: .78rem; line-height: 1.5; }
.cc-invito__modulo .cc-campo--scelta label { font-size: .85rem; color: var(--cc-testo-chiaro-tenue); }
.cc-invito__modulo .cc-campo--scelta a { color: var(--cc-accento); }

/* Il pulsante occupa tutta la riga: e' l'azione del riquadro, non una scelta
   fra pari. Il rifiuto resta comunque un pulsante vero e leggibile, non un
   link grigio: e' la contestazione piu' frequente su questi riquadri. */
.cc-invito__scelte { display: grid; gap: .6rem; margin-top: .3rem; }
.cc .cc-invito__scelte .cc-bottone { padding: .95rem 1.4rem; font-size: .78rem; text-align: center; }

.cc .cc-invito__scelte .cc-bottone--linea {
	background: transparent;
	color: var(--cc-testo-chiaro-tenue);
	border-color: rgba(255, 255, 255, .3);
}

.cc .cc-invito__scelte .cc-bottone--linea:hover {
	background: rgba(255, 255, 255, .1);
	color: var(--cc-bianco);
	border-color: rgba(255, 255, 255, .5);
}

.cc .cc-invito__chiudi {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 3;
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	background: transparent;
	border: 0;
	color: var(--cc-bianco);
	cursor: pointer;
	opacity: .8;
}

.cc .cc-invito__chiudi:hover { opacity: 1; }

/* Il brindisi dopo l'iscrizione: sta in basso e sparisce da solo. */
.cc-brindisi {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	transform: translateX(-50%);
	z-index: 600;
	max-width: min(100% - 2rem, 30rem);
	padding: 1rem 1.4rem;
	box-shadow: var(--cc-ombra);
	font-size: .95rem;
}

.cc .cc-carrello {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--cc-testo);
	text-decoration: none;
	font-size: .78rem;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.cc .cc-carrello:hover,
.cc .cc-carrello:focus-visible { color: var(--cc-accento-testo); }

.cc-carrello__conteggio {
	display: inline-grid;
	place-items: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding: 0 .34rem;
	border-radius: 1rem;
	background: var(--cc-rosso-fondo);
	color: var(--cc-bianco);
	font-size: .7rem;
	letter-spacing: 0;
	line-height: 1;
}

.cc-interruttore {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem; height: 2.75rem;
	padding: 0;
	border: 1px solid var(--cc-bordo);
	background: transparent;
	color: var(--cc-testo);
	cursor: pointer;
}

.cc-interruttore__icona,
.cc-carrello__icona { width: 1.1rem; height: 1.1rem; fill: currentColor; }

@media (max-width: 1000px) {
	.cc-interruttore { display: inline-flex; }

	/* absolute dentro l'intestazione fissa, non fixed con un'origine calcolata
	   a mano: l'intestazione si sposta di 2,6rem quando il nastro annunci esce
	   di scena, e un valore fisso lascerebbe il pannello staccato dal bordo. */
	.cc-navigazione {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--cc-bianco);
		border-bottom: 1px solid var(--cc-bordo);
		box-shadow: 0 12px 24px rgba(16, 16, 16, .08);
		padding: .5rem 1.25rem 1.75rem;
		max-height: calc(100dvh - 8rem);
		overflow-y: auto;
		display: none;
	}

	/* Nel pannello bianco il testo torna scuro anche sopra la copertina. */
	.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-navigazione .cc-menu a,
	.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-navigazione .cc-carrello,
	.cc.cc-con-copertina .cc-testata:not([data-fissa='si']) .cc-navigazione .cc-azione {
		color: var(--cc-testo);
	}

	.cc-azioni { padding-top: 1rem; justify-content: flex-start; }

	.cc-navigazione[data-aperto='si'] { display: flex; }

	.cc-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.cc-menu > li { display: block; }

	.cc-menu a {
		display: block;
		padding: .95rem 0;
		border-bottom: 1px solid var(--cc-bordo);
	}

	/* Su telefono il sottomenu e' un elenco rientrato, sempre visibile: un
	   pannello dentro un pannello vorrebbe JavaScript e un secondo tocco, e le
	   categorie sono la ragione per cui il menu esiste. */
	.cc-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0 0 0 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.cc-menu .sub-menu a { padding: .8rem 0; white-space: normal; color: var(--cc-testo-tenue); }
	.cc-menu > li.menu-item-has-children > a::after { display: none; }
}

/* ==========================================================================
   Copertina con video
   ========================================================================== */

.cc-copertina {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(88vh, 46rem);
	background: var(--cc-fondo-scuro);
	color: var(--cc-bianco);
	overflow: hidden;
}

.cc .cc-copertina__media,
.cc .cc-copertina__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Il girato del cliente e' 736x400: steso a tutto schermo resta morbido.
	   Il velo scuro qui sotto lo rende molto meno evidente, oltre a garantire
	   il contrasto del testo. */
	object-position: center;
}

/* Velo: senza, il testo bianco sopra un fotogramma chiaro sparisce, e il
   contrasto cambierebbe a ogni fotogramma. Con il velo e' costante e
   misurabile. */
.cc-copertina::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 16, .82) 0%, rgba(16, 16, 16, .45) 45%, rgba(16, 16, 16, .25) 100%);
}

.cc-copertina__contenuto {
	position: relative;
	z-index: 2;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.cc-copertina__contenuto > * { max-width: 44rem; }

.cc-copertina h1 { color: var(--cc-bianco); margin-bottom: .35em; }
.cc-copertina .cc-occhiello { color: var(--cc-accento); }

.cc-copertina__testo {
	font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
	color: var(--cc-testo-chiaro);
	margin-bottom: 2rem;
}

.cc-copertina__scelte { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Chi ha chiesto meno animazioni non deve ricevere un video che si muove. */
@media (prefers-reduced-motion: reduce) {
	.cc-copertina__media { display: none; }
}

/* ==========================================================================
   Garanzie: la riga di icone del riferimento.
   Qui dichiara solo cose vere. Il riferimento promette spedizione gratuita e
   a impatto zero; noi non abbiamo ne' tariffe ne' vettore confermati, quindi
   non lo scriviamo.
   ========================================================================== */

.cc-garanzie {
	display: grid;
	gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	text-align: center;
}

.cc-garanzia__icona {
	display: grid;
	place-items: center;
	width: 3.75rem; height: 3.75rem;
	margin: 0 auto 1.1rem;
	border: 1px solid var(--cc-accento);
	border-radius: 50%;
}

.cc-garanzia__icona svg { width: 1.4rem; height: 1.4rem; fill: var(--cc-accento-testo); }
.cc-sezione--scuro .cc-garanzia__icona svg { fill: var(--cc-accento); }

.cc-garanzia h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.cc-garanzia p { margin: 0; font-size: .95rem; color: var(--cc-testo-tenue); }
.cc-sezione--scuro .cc-garanzia p { color: var(--cc-testo-chiaro-tenue); }

/* ==========================================================================
   Duetto a piena larghezza: mezzo testo, mezzo immagine.
   E' il blocco portante del riferimento.
   ========================================================================== */

.cc-duetto-pieno {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
	align-items: stretch;
	min-height: 30rem;
}

.cc-duetto-pieno__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
}

.cc-duetto-pieno__testo > * { max-width: 34rem; }

.cc-duetto-pieno__figura { margin: 0; position: relative; min-height: 22rem; }

.cc-duetto-pieno__figura img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* L'immagine a destra o a sinistra: l'alternanza e' quello che tiene su la
   pagina lunga del riferimento. */
.cc-duetto-pieno--invertito .cc-duetto-pieno__figura { order: -1; }

@media (max-width: 60rem) {
	.cc-duetto-pieno--invertito .cc-duetto-pieno__figura { order: 0; }
}

/* ==========================================================================
   Griglie: collezioni e catalogo
   ========================================================================== */

.cc-griglia {
	display: grid;
	gap: clamp(1.1rem, .7rem + 1.4vw, 1.9rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.cc-griglia--tre { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }

/* Scheda collezione: immagine a tutta cella con il titolo sopra, come le
   "collection card" del riferimento. */
.cc-collezione {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	text-decoration: none;
	background: var(--cc-fondo-caldo);
}

.cc-collezione img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.cc-collezione:hover img,
.cc-collezione:focus-visible img { transform: scale(1.05); }

.cc-collezione::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 16, .78) 0%, rgba(16, 16, 16, .18) 55%, rgba(16, 16, 16, 0) 100%);
}

.cc-collezione__testo {
	position: absolute;
	z-index: 2;
	left: 0; right: 0; bottom: 0;
	padding: 1.6rem 1.5rem;
	color: var(--cc-bianco);
}

.cc-collezione__testo h3 { color: var(--cc-bianco); margin: 0 0 .3rem; }

.cc-collezione__testo p {
	margin: 0;
	font-size: .88rem;
	color: var(--cc-testo-chiaro-tenue);
}

/* Scheda prodotto */
.cc-scheda {
	display: flex;
	flex-direction: column;
	background: var(--cc-bianco);
	border: 1px solid var(--cc-bordo);
	overflow: hidden;
}

.cc-scheda__figura { margin: 0; aspect-ratio: 1 / 1; background: var(--cc-fondo-caldo); overflow: hidden; }

.cc-scheda__figura img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.cc-scheda:hover .cc-scheda__figura img { transform: scale(1.04); }

.cc-scheda__corpo { display: flex; flex-direction: column; gap: .45rem; padding: 1.3rem 1.35rem 1.5rem; flex: 1 1 auto; }
.cc-scheda__titolo { margin: 0; font-size: 1.22rem; }
.cc-scheda__titolo a { color: var(--cc-testo); text-decoration: none; }
.cc-scheda__titolo a:hover,
.cc-scheda__titolo a:focus-visible { color: var(--cc-accento-testo); }
.cc-scheda__testo { margin: 0; color: var(--cc-testo-tenue); font-size: .93rem; }
.cc-scheda__coda { margin-top: auto; padding-top: .9rem; }

/* Duetto normale, dentro un contenitore */
.cc-duetto {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.cc-duetto__figura { margin: 0; }
.cc-duetto__figura img { width: 100%; display: block; }

.cc-didascalia { font-size: .85rem; color: var(--cc-testo-tenue); margin-top: .7rem; }

/* Mosaico di immagini */
.cc-mosaico {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cc-mosaico figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.cc-mosaico img { width: 100%; height: 100%; object-fit: cover; }

/* Editoriale a piena larghezza con testo sovrapposto */
.cc-editoriale {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(70vh, 34rem);
	overflow: hidden;
	text-align: center;
	color: var(--cc-bianco);
}

.cc-editoriale img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

.cc-editoriale::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(16, 16, 16, .58);
}

.cc-editoriale__contenuto { position: relative; z-index: 2; max-width: 44rem; padding: 2rem 1.5rem; }
.cc-editoriale h2 { color: var(--cc-bianco); }
.cc-editoriale p { color: var(--cc-testo-chiaro); }

/* Numeri e fatti */
.cc-dati {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc-dati__voce { border-top: 2px solid var(--cc-accento); padding-top: 1rem; }
.cc-dati__numero { display: block; font-family: var(--cc-titolo); font-size: 2.1rem; line-height: 1.1; }
.cc-dati__etichetta { font-size: .92rem; color: var(--cc-testo-tenue); }
.cc-sezione--scuro .cc-dati__etichetta { color: var(--cc-testo-chiaro-tenue); }

/* ==========================================================================
   Contenuto editoriale
   ========================================================================== */

.cc-principale { display: block; }

/* --------------------------------------------------------------------------
   Copertina del titolo di pagina: fotografia con maschera scura.

   La maschera e' un GRADIENTE, non un velo piatto. Il testo sta in basso: un
   velo uniforme abbastanza scuro da garantire il contrasto laggiu' spegnerebbe
   anche la parte alta della fotografia. Cosi' invece il contrasto e' garantito
   dove serve e l'immagine resta leggibile sopra.

   Il fondo .cc-fondo-scuro sotto l'immagine non e' ridondante: se la fotografia
   non arriva - lenta, mancante, formato non supportato - il testo bianco
   resterebbe su bianco. Con il fondo scuro resta leggibile comunque.
   -------------------------------------------------------------------------- */

.cc-testata-pagina {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(58vh, 30rem);
	/* L'intestazione e' fissa e trasparente: senza questo spazio il titolo
	   finirebbe sotto il menu. */
	padding-top: calc(5.25rem + 2.6rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: var(--cc-fondo-scuro);
	color: var(--cc-bianco);
	overflow: hidden;
}

.cc .cc-testata-pagina__sfondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cc-testata-pagina::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 16, 16, .88) 0%, rgba(16, 16, 16, .62) 40%, rgba(16, 16, 16, .3) 100%);
}

/* Niente width:100% qui: l'elemento porta anche .cc-contenitore, che vale
   `min(100% - 2.5rem, 1280px)`. Le due dichiarazioni hanno la stessa
   specificita' e vince l'ultima scritta, cioe' questa: il titolo finiva
   incollato al bordo sinistro dello schermo. */
.cc-testata-pagina__contenuto { position: relative; z-index: 2; }
.cc-testata-pagina h1 { color: var(--cc-bianco); margin-bottom: .3em; }
.cc-testata-pagina .cc-occhiello { color: var(--cc-accento); }

.cc-testata-pagina__sottotitolo {
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	color: var(--cc-testo-chiaro);
	max-width: 42rem;
	margin-bottom: 0;
}

.cc-testata-pagina__intro { max-width: 44rem; color: var(--cc-testo-chiaro); }
.cc-testata-pagina__intro p:last-child { margin-bottom: 0; }
.cc-testata-pagina__intro a { color: var(--cc-accento); }

.cc-briciole { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-testo-chiaro-tenue); margin-bottom: 1rem; }
.cc .cc-briciole a { color: var(--cc-testo-chiaro); text-decoration: none; }
.cc .cc-briciole a:hover { color: var(--cc-accento); }

.cc-contenuto { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.cc-contenuto h2 { margin-top: 2.2em; }
.cc-contenuto h3 { margin-top: 1.8em; }
.cc-contenuto > *:first-child { margin-top: 0; }
.cc-contenuto ul,
.cc-contenuto ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.cc-contenuto li { margin-bottom: .4em; }

.cc-contenuto blockquote {
	margin: 1.8em 0;
	padding: .2em 0 .2em 1.4rem;
	border-left: 2px solid var(--cc-accento);
	font-family: var(--cc-titolo);
	font-size: 1.3rem;
	font-style: italic;
	color: var(--cc-testo);
}

.cc-contenuto table,
.cc .et_pb_text table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5em;
	font-size: .95rem;
}

.cc-contenuto th,
.cc-contenuto td,
.cc .et_pb_text th,
.cc .et_pb_text td {
	text-align: left;
	padding: .75rem .8rem;
	border-bottom: 1px solid var(--cc-bordo);
	vertical-align: top;
}

.cc-contenuto th,
.cc .et_pb_text th { font-weight: 400; color: var(--cc-testo-tenue); width: 34%; }

/* Segnaposto visibile: un dato che manca deve VEDERSI. Una pagina con un
   riquadro cosi' e' lavoro da finire; una frase plausibile al suo posto
   sarebbe lavoro da rifare. */
.cc-daconfermare {
	display: inline-block;
	padding: .1em .5em;
	border: 1px dashed var(--cc-rosso);
	background: #fdf2f2;
	color: var(--cc-rosso-scuro);
	font-size: .88em;
	font-family: var(--cc-testo-font);
	letter-spacing: .02em;
}

.cc-avviso {
	border: 1px solid var(--cc-bordo);
	border-left: 2px solid var(--cc-accento);
	background: var(--cc-fondo-caldo);
	padding: 1.1rem 1.3rem;
	margin: 0 0 1.5em;
}

.cc-avviso > *:last-child { margin-bottom: 0; }

.cc-video { position: relative; aspect-ratio: 16 / 9; background: var(--cc-fondo-scuro); overflow: hidden; }
.cc-video iframe,
.cc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cc-video--facciata { cursor: pointer; }
.cc .cc-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }

.cc .cc-video__avvia {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--cc-bianco);
	background: rgba(16, 16, 16, .3);
	transition: background .2s ease;
}

.cc .cc-video__avvia:hover,
.cc .cc-video__avvia:focus-visible { background: rgba(16, 16, 16, .52); color: var(--cc-bianco); }

.cc-video__triangolo { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--cc-accento); position: relative; }

.cc-video__triangolo::after {
	content: '';
	position: absolute;
	top: 50%; left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .7rem 0 .7rem 1.2rem;
	border-color: transparent transparent transparent var(--cc-testo);
}

.cc-video__etichetta { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; background: rgba(16, 16, 16, .75); padding: .55rem 1.1rem; }

/* ==========================================================================
   Contenuto dei moduli del Generatore
   La riga Divi e' a larghezza piena (lo imposta cc_sezione), quindi senza
   questa regola la prosa correrebbe da bordo a bordo. I figli si fermano alla
   larghezza di lettura, e il bordo sinistro coincide con quello dei blocchi
   sopra e sotto: una colonna centrata per conto suo non si allinea con niente.
   ========================================================================== */

/*
 * Le righe di Divi non devono stringere niente.
 *
 * cc_sezione() passa gia' width="100%" max_width="100%" a ogni riga, ma Divi
 * genera un foglio PER RIGA (.et_pb_row_8, .et_pb_row_9...) e su questa pagina
 * le ultime due righe ne erano rimaste senza: risultato, sette blocchi larghi
 * 1251 px e due larghi 1001, incassati con 125 px di bianco ai lati. Non e' un
 * errore dei nostri attributi, e' la cache del CSS dinamico di Divi che si
 * disallinea quando cambia il numero di moduli.
 *
 * Qui la larghezza la decide il nostro foglio e non dipende piu' da un file
 * generato: la spaziatura interna la mettono comunque .cc-contenitore e
 * .cc .et_pb_text.
 */
.cc .et_pb_row {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding: 0;
}

.cc .et_pb_text {
	width: min(100% - 2.5rem, var(--cc-larghezza));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}

.cc .et_pb_text > * { max-width: var(--cc-larghezza-testo); }
.cc .et_pb_text > *:first-child { margin-top: 0; }
.cc .et_pb_text > *:last-child { margin-bottom: 0; }
.cc .et_pb_text h2 { margin-top: 2.2em; }
.cc .et_pb_text h3 { margin-top: 1.8em; }
.cc .et_pb_text ul,
.cc .et_pb_text ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.cc .et_pb_text li { margin-bottom: .4em; }

/* ==========================================================================
   Modulo di contatto
   ========================================================================== */

.cc-modulo { display: grid; gap: 1.1rem; max-width: 34rem; }
.cc-campo { display: grid; gap: .4rem; }
.cc-campo label { font-size: .88rem; letter-spacing: .06em; color: var(--cc-testo); }

.cc-campo input,
.cc-campo textarea,
.cc-campo select {
	font: inherit;
	font-size: 1rem;
	padding: .8rem .9rem;
	/* Bordo scuro: il contorno di un CONTROLLO deve stare ad almeno 3:1
	   (WCAG 1.4.11), ed e' l'unica cosa che dice dove si puo' scrivere.
	   Con il grigio decorativo i campi risultavano quasi senza contorno. */
	border: 1px solid var(--cc-bordo-campo);
	border-radius: var(--cc-raggio);
	background: var(--cc-bianco);
	color: var(--cc-testo);
	width: 100%;
}

.cc-campo textarea { min-height: 9rem; resize: vertical; }
.cc-campo input:focus-visible,
.cc-campo textarea:focus-visible { border-color: var(--cc-accento-testo); }
.cc-campo--scelta { grid-template-columns: auto 1fr; align-items: start; gap: .65rem; }
.cc-campo--scelta input { width: auto; margin-top: .35rem; }
.cc-campo__nota { font-size: .85rem; color: var(--cc-testo-tenue); }

/* Trappola per i robot: nascosta con position, non con display:none - alcuni
   robot saltano i campi display:none e compilano gli altri. */
.cc-esca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.cc-esito { padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.cc-esito--ok { background: #eef6ee; border: 1px solid #b9d8b9; color: #1d4d1f; }
.cc-esito--ko { background: #fdf2f2; border: 1px solid #e6b8b8; color: var(--cc-rosso-scuro); }

/* ==========================================================================
   WooCommerce
   Fuori dal reset di Divi le classi di WooCommerce partono nude. Le regole
   sono scoperizzate sotto .cc: una regola generica come `#page-container a`
   (1,0,1) batterebbe .cc-scheda (0,1,0) e darebbe testo del colore del fondo.
   ========================================================================== */

.cc .woocommerce-products-header { margin-bottom: 1.5rem; }

/* WooCommerce mette ::before e ::after sul contenitore come clearfix, che
   serviva quando le schede erano flottanti. In una griglia CSS uno pseudo-
   elemento NON e' invisibile: diventa una cella a tutti gli effetti e occupa la
   prima posizione. Misurato: la prima scheda partiva dalla seconda colonna e
   in alto a sinistra restava un buco. */
.cc ul.products::before,
.cc ul.products::after { content: none; display: none; }

.cc ul.products {
	display: grid;
	gap: clamp(1.1rem, .7rem + 1.4vw, 1.9rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.cc ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--cc-bianco);
	border: 1px solid var(--cc-bordo);
	overflow: hidden;
	padding: 0 0 1.4rem;
	margin: 0;
	text-align: left;

	/* WooCommerce mette float:left e width:22.05% sulle schede, perche' il suo
	   impianto e' a colonne flottanti. Dentro una griglia CSS quelle due
	   dichiarazioni non vengono ignorate: la cella resta larga 281 px e la
	   scheda dentro si restringe al 22% di quella. Misurato: schede da 62 px.
	   Vanno azzerate esplicitamente, non basta ridefinire il contenitore. */
	width: auto;
	float: none;
	clear: none;
}

/* Correlati e "ti potrebbe interessare".
   WooCommerce li stila con `.woocommerce .related ul.products li.product`, che
   vale 0,4,2 e batte la regola qui sopra (0,3,2): dentro i correlati le schede
   tornavano larghe il 30% della propria cella, con il titolo a capo una parola
   per riga. Serve un selettore altrettanto specifico. */
.cc .related ul.products li.product,
.cc .up-sells ul.products li.product,
.cc .cross-sells ul.products li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

.cc .related > h2,
.cc .up-sells > h2,
.cc .cross-sells > h2 { margin-bottom: 1.5rem; }

.cc ul.products li.product a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 1.1rem; display: block; }

.cc ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--cc-titolo);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.25;
	margin: 0 1.35rem .4rem;
	padding: 0;
}

.cc ul.products li.product a { text-decoration: none; color: var(--cc-testo); }
.cc ul.products li.product .price { display: block; margin: 0 1.35rem .9rem; color: var(--cc-testo); font-size: 1.05rem; }
.cc ul.products li.product .price del { color: var(--cc-testo-tenue); margin-right: .4rem; }
.cc ul.products li.product .price ins { text-decoration: none; color: var(--cc-rosso-fondo); }

/* I selettori portano il tipo di elemento e la classe .alt.
   WooCommerce colora i pulsanti principali con `.woocommerce button.button.alt`
   (specificita' 0,3,1) e il suo viola vinceva su `.cc .single_add_to_cart_button`
   (0,2,0): il pulsante "aggiungi al carrello" usciva viola in mezzo a un sito
   ocra. Qui si pareggia la specificita' e, a parita', vince questo foglio
   perche' viene caricato dopo. */
.cc ul.products li.product a.button,
.cc button.single_add_to_cart_button,
.cc a.checkout-button,
.cc button.button,
.cc a.button,
.cc input.button,
.cc button.button.alt,
.cc a.button.alt,
.cc input.button.alt,
.cc #place_order {
	display: inline-block;
	font-family: var(--cc-testo-font);
	font-weight: 500;
	font-size: .8rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.2;
	padding: .95rem 1.9rem;
	border: 1px solid var(--cc-accento);
	border-radius: var(--cc-raggio);
	background: var(--cc-accento);
	color: var(--cc-testo);
	text-decoration: none;
	cursor: pointer;
}

.cc ul.products li.product .button { margin: auto 1.35rem 0; align-self: flex-start; }

.cc button.button:hover,
.cc a.button:hover,
.cc input.button:hover,
.cc #place_order:hover { background: var(--cc-accento-caldo); border-color: var(--cc-accento-caldo); }

/* --------------------------------------------------------------------------
   Scheda del singolo prodotto

   WooCommerce impagina la scheda a FLOAT: `div.images` a sinistra al 48%,
   `.summary` a destra al 48%. Dentro una griglia CSS quelle dichiarazioni non
   vengono ignorate: le due colonne restavano larghe il 48% della propria cella
   invece che della pagina, la fotografia usciva grande come un francobollo e il
   titolo andava a capo una parola per riga.
   Vanno azzerate esplicitamente, come per le schede del catalogo.
   -------------------------------------------------------------------------- */

/* La griglia NON va su div.product: va sul contenitore interno.
   L'integrazione WooCommerce di Divi avvolge galleria e riepilogo in un
   <div class="clearfix">. Con la griglia su div.product quel wrapper diventava
   UN SOLO elemento di griglia largo 368 px, con dentro tutta la scheda
   incolonnata: fotografia piccola e titolo a capo una parola per riga.
   Misurato: div.product largo 1211 px con tre colonne da 368 e un figlio solo.

   Il selettore :has() copre il caso in cui il wrapper cambi nome in una
   versione futura di Divi; .clearfix e' quello attuale. */
.cc div.product { display: block; }

.cc div.product > .clearfix,
.cc div.product > div:has(> .woocommerce-product-gallery) {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 4rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: start;
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.cc div.product .woocommerce-product-gallery,
.cc div.product div.images,
.cc div.product .summary,
.cc div.product .entry-summary {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

.cc div.product .woocommerce-tabs,
.cc div.product .related,
.cc div.product .up-sells { grid-column: 1 / -1; }

.cc .woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; }

/* La lente dello zoom va sopra l'immagine, non nel flusso. */
.cc .woocommerce-product-gallery { position: relative; }
.cc .woocommerce-product-gallery__trigger { position: absolute; top: 1rem; right: 1rem; z-index: 3; }

.cc .product .summary { display: grid; gap: .6rem; align-content: start; }
.cc .product .summary .price { font-size: 1.9rem; font-family: var(--cc-titolo); color: var(--cc-testo); }
.cc .product .summary .price .cc-campo__nota { display: block; font-family: var(--cc-testo-font); font-size: .85rem; }
.cc .product_title { margin-bottom: .2em; }
.cc .woocommerce-product-details__short-description { color: var(--cc-testo-tenue); }
.cc .product_meta { font-size: .88rem; color: var(--cc-testo-tenue); padding-top: 1rem; border-top: 1px solid var(--cc-bordo); }
.cc .product_meta a { color: var(--cc-testo-tenue); }

.cc .woocommerce-tabs ul.tabs {
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0 0 .7rem;
	border-bottom: 1px solid var(--cc-bordo);
	font-size: .8rem; letter-spacing: .13em; text-transform: uppercase;
}

.cc .woocommerce-tabs ul.tabs a { text-decoration: none; color: var(--cc-testo-tenue); }
.cc .woocommerce-tabs ul.tabs li.active a { color: var(--cc-testo); }

.cc table.shop_table,
.cc table.shop_attributes { width: 100%; border-collapse: collapse; font-size: .96rem; margin-bottom: 1.5rem; }

.cc table.shop_table th,
.cc table.shop_table td,
.cc table.shop_attributes th,
.cc table.shop_attributes td { text-align: left; padding: .8rem; border-bottom: 1px solid var(--cc-bordo); vertical-align: top; }

.cc table.shop_attributes th { font-weight: 400; color: var(--cc-testo-tenue); width: 34%; }

.cc .quantity input.qty { width: 4.5rem; padding: .6rem .5rem; border: 1px solid var(--cc-bordo-campo); font: inherit; text-align: center; }

.cc .woocommerce-message,
.cc .woocommerce-info,
.cc .woocommerce-error { list-style: none; padding: 1rem 1.2rem; margin: 0 0 1.5rem; border: 1px solid var(--cc-bordo); background: var(--cc-fondo-caldo); }
.cc .woocommerce-error { background: #fdf2f2; border-color: #e6b8b8; color: var(--cc-rosso-scuro); }

.cc .woocommerce form .form-row { display: grid; gap: .4rem; margin-bottom: 1rem; }

.cc .woocommerce form .form-row input.input-text,
.cc .woocommerce form .form-row textarea,
.cc .woocommerce form .form-row select,
.cc .select2-container .select2-selection { font: inherit; padding: .8rem .9rem; border: 1px solid var(--cc-bordo-campo); background: var(--cc-bianco); width: 100%; }

.cc .woocommerce-billing-fields h3,
.cc #order_review_heading { margin-top: 1.8rem; }

/* Un pezzo unico esaurito va detto, non nascosto. */
.cc .stock.out-of-stock { color: var(--cc-rosso-scuro); }
.cc .stock.in-stock { color: #1d4d1f; }

.cc .navigation.pagination { margin-top: 2.5rem; }
.cc .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }

.cc .nav-links .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 2.6rem; height: 2.6rem;
	padding: 0 .7rem;
	border: 1px solid var(--cc-bordo);
	text-decoration: none;
	color: var(--cc-testo);
	font-size: .9rem;
}

.cc .nav-links .page-numbers.current { background: var(--cc-testo); border-color: var(--cc-testo); color: var(--cc-bianco); }

/* ==========================================================================
   Consenso
   ========================================================================== */

.cc-consenso {
	position: fixed;
	inset: auto 1rem 1rem;
	z-index: 500;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	max-width: 62rem;
	margin-inline: auto;
	padding: 1.2rem 1.4rem;
	background: var(--cc-bianco);
	border: 1px solid var(--cc-bordo);
	box-shadow: var(--cc-ombra);
}

.cc-consenso__testo { flex: 1 1 22rem; }
.cc-consenso__testo p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* Il rifiuto ha lo stesso peso visivo dell'accettazione: un "solo necessari"
   nascosto in un link grigio e' una delle contestazioni piu' frequenti. */
.cc-consenso__scelte { display: flex; flex-wrap: wrap; gap: .6rem; }
.cc-consenso__scelte .cc-bottone { padding: .8rem 1.4rem; font-size: .74rem; }

/* ==========================================================================
   Chiusura
   ========================================================================== */

.cc-chiusura {
	background: var(--cc-fondo-scuro);
	color: var(--cc-testo-chiaro-tenue);
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 1.75rem;
	font-size: .92rem;
}

.cc-chiusura a { color: var(--cc-testo-chiaro); text-decoration: none; }
.cc-chiusura a:hover,
.cc-chiusura a:focus-visible { color: var(--cc-accento); text-decoration: underline; }

.cc-chiusura__griglia { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding-bottom: 2.5rem; }

.cc-chiusura h2 {
	font-family: var(--cc-testo-font);
	font-weight: 500;
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cc-accento);
	margin: 0 0 1.1rem;
}

.cc-chiusura ul { list-style: none; margin: 0; padding: 0; }
.cc-chiusura li { margin-bottom: .55rem; }
.cc-chiusura p { margin: 0 0 .55rem; }
.cc-chiusura__marchio img { height: 3.2rem; width: auto; margin-bottom: 1.1rem; }

.cc-social { display: flex; gap: .9rem; margin-top: 1.2rem; }

.cc-social a {
	display: inline-grid; place-items: center;
	width: 2.4rem; height: 2.4rem;
	border: 1px solid #3a3b38;
	border-radius: 50%;
}

.cc-social a:hover { border-color: var(--cc-accento); }
.cc-social svg { width: 1rem; height: 1rem; fill: currentColor; }

/* Dati fiscali: obbligo di legge per la vendita a distanza, su OGNI pagina. */
.cc-fiscali {
	border-top: 1px solid #2a2b29;
	padding-top: 1.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	color: #b3ada2;
	font-size: .83rem;
}

.cc-fiscali p { margin: 0; }
.cc-fiscali .cc-daconfermare { background: transparent; color: #f0b7b7; border-color: #8d3a3a; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}