/* =============================================================================
   Chiossi e Cavazzuti — componenti del progetto (prefisso cc-)
   Sopra il Keyweb Flatsome Kit: colori, caratteri, pulsanti, focus e
   animazioni vengono dai token e dalle classi del kit (pannello del kit).
   Qui niente colori letterali: solo token del kit e loro derivati.
   Valori del pannello per questo progetto (da impostare nel kit):
     primario #196292 · secondario #CC5033 · inchiostro #14181C · testo #4A5560
     carta #F3F5F7 · scuro #0D2F47 · titoli Barlow Semi Condensed · testi Barlow
   ========================================================================== */

:root {
	--cc-blu: var(--kw-primario);
	--cc-blu-scuro: var(--kw-primario-sc);
	--cc-arancio: var(--kw-secondario);
	--cc-arancio-scuro: var(--kw-secondario-sc); /* #B5432A: testo bianco 5,5:1 */
	--cc-notte: var(--kw-scuro);
	--cc-notte-2: color-mix(in srgb, var(--kw-scuro) 80%, black);
	--cc-carta: var(--kw-carta);
	--cc-chiaro: var(--kw-titolo-chiaro);
	--cc-linea: var(--kw-filetto);
	--cc-muto: var(--kw-testo);
	--cc-velo: color-mix(in srgb, var(--kw-scuro) 62%, transparent);
	--cc-ease: var(--kw-curva);
}

/* ---------- segno del titolo (filetto blu e arancio, come nel logo) */
.cc-titolo::before {
	content: ""; display: block; width: 72px; height: 6px; margin-bottom: 22px;
	background: linear-gradient(90deg, var(--cc-blu) 0 50%, var(--cc-arancio) 50% 100%);
}
.cc-grazie .cc-titolo::before, .cc-landing h1.cc-titolo::before { display: none; }
.cc-sotto { font-family: var(--kw-serif); font-size: 1.375rem; font-weight: 500; color: var(--cc-blu); margin: 0; }
.dark .cc-sotto { color: color-mix(in srgb, var(--kw-primario) 45%, white); }
.cc-lead { font-size: 1.25rem; line-height: 1.45; }
.cc-nota { font-size: .875rem; color: var(--cc-muto); }
.cc-numero { font-weight: 600; font-size: .875rem; letter-spacing: .12em; color: var(--cc-blu); margin-bottom: 8px; }
.cc-occhiello { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--cc-arancio-scuro); }

/* ---------- pulsante caldo (sopra kw-btn--solid): fondo secondario scuro del kit */
.cc-btn--caldo.kw-btn { background-color: var(--cc-arancio-scuro); border-color: var(--cc-arancio-scuro); }
.cc-btn--caldo.kw-btn:hover { background-color: color-mix(in srgb, var(--kw-secondario-sc) 80%, black); border-color: color-mix(in srgb, var(--kw-secondario-sc) 80%, black); }

/* ---------- fotografie con proporzioni fisse */
.cc-foto .img-inner { overflow: hidden; }
.cc-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-foto--54 .img-inner { aspect-ratio: 5 / 4; }
.cc-foto--45 .img-inner { aspect-ratio: 4 / 5; }
.cc-foto--43 .img-inner { aspect-ratio: 4 / 3; }
.cc-foto--1610 .img-inner { aspect-ratio: 16 / 10; }
.cc-foto--contain .img-inner { aspect-ratio: 16 / 10; background: var(--cc-chiaro); }
.cc-foto--contain img { object-fit: contain; }

/* ---------- apertura della home */
.cc-hero { overflow: hidden; }
.cc-hero > .section-content { min-height: min(92vh, 980px); display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.cc-hero__slider { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; }
.cc-hero__slider .flickity-viewport { height: 100% !important; }
.cc-hero__slider .flickity-slider > * { width: 100%; height: 100%; }
.cc-hero__foto, .cc-hero__foto .img-inner { height: 100%; }
.cc-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.cc-hero > .section-content::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--kw-scuro) 92%, transparent) 0%, color-mix(in srgb, var(--kw-scuro) 70%, transparent) 45%, color-mix(in srgb, var(--kw-scuro) 15%, transparent) 100%);
}
.cc-hero > .section-content > .row { position: relative; z-index: 2; }
.cc-hero__titolo { font-family: var(--kw-serif); font-weight: 600; font-size: clamp(2.6rem, 5.6vw, 6rem); line-height: .98; color: var(--cc-chiaro); max-width: 14ch; margin: 0; }
.cc-hero__sotto { font-family: var(--kw-serif); font-size: clamp(1.3rem, 2vw, 2rem); color: color-mix(in srgb, var(--kw-secondario) 65%, white); margin: 18px 0 0; }
.cc-hero__frase { color: var(--cc-chiaro); max-width: 58ch; font-size: 1.125rem; opacity: .92; }
.cc-hero__dati { border-top: 1px solid color-mix(in srgb, white 22%, transparent); padding-top: 22px; margin-top: 40px; }
.cc-dato { margin: 0; color: var(--cc-chiaro); }
.cc-dato b { display: block; font-family: var(--kw-serif); font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1; }
.cc-dato span { display: block; margin-top: 6px; opacity: .85; }

/* ---------- primo modulo */
.cc-focus { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.cc-focus li { margin: 0; padding-top: 16px; border-top: 2px solid var(--cc-linea); color: var(--cc-muto); }
.cc-focus strong { display: block; font-family: var(--kw-serif); font-size: 1.25rem; color: var(--kw-inchiostro); margin-bottom: 4px; }
.cc-primo__foto > .col-inner { position: relative; }
.cc-badge { position: absolute; left: -28px; bottom: 40px; background: var(--cc-blu); color: var(--cc-chiaro); padding: 24px 28px; max-width: 280px; }
.cc-badge p { margin: 0; line-height: 1.35; }
.cc-badge b { display: block; font: 600 3.2rem/1 var(--kw-serif); margin-bottom: 6px; }

/* ---------- materiali (banner nativi) */
.cc-materiale .text-box { color: var(--cc-chiaro); }
.cc-materiale .overlay { background: linear-gradient(0deg, color-mix(in srgb, var(--kw-scuro) 96%, transparent) 0%, color-mix(in srgb, var(--kw-scuro) 70%, transparent) 38%, color-mix(in srgb, var(--kw-scuro) 15%, transparent) 100%) !important; }
.cc-materiale__num { font-size: .875rem; letter-spacing: .14em; opacity: .75; margin: 0 0 6px; }
.cc-materiale__nome { font-size: clamp(1.8rem, 2.4vw, 2.6rem); color: inherit; margin: 0 0 6px; }
.cc-materiale__dove { margin: 0; opacity: .9; }
.cc-materiale__altro { max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .5s var(--cc-ease), opacity .4s, margin .4s; }
.cc-materiale:hover .cc-materiale__altro, .cc-materiale:focus-within .cc-materiale__altro { max-height: 8em; opacity: 1; margin-top: 12px; }
.cc-materiale__link { margin: 16px 0 0; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; }
.cc-materiale__link::after { content: " ↗"; }

/* ---------- SpeedyT in home */
.cc-speedy__foto > .col-inner { position: relative; overflow: hidden; }
.cc-speedy__etichetta { position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--cc-arancio-scuro); color: var(--cc-chiaro); padding: 8px 14px; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.cc-speedy__etichetta p { margin: 0; }
.cc-speedy__cifre { display: flex; gap: 40px; flex-wrap: wrap; }
.cc-cifra { margin: 0; }
.cc-cifra b { display: block; font: 600 clamp(2.4rem, 4vw, 4.4rem)/1 var(--kw-serif); }
.cc-cifra span { display: block; margin-top: 8px; max-width: 24ch; opacity: .85; }
.cc-settori-speedy, .cc-settori { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cc-settori-speedy li { margin: 0; border: 1px solid color-mix(in srgb, white 30%, transparent); padding: 8px 14px; }
.cc-settori li { margin: 0; font-family: var(--kw-serif); font-size: clamp(1.4rem, 2.4vw, 2.4rem); padding-right: 32px; }

/* ---------- cifre in fascia */
.cc-sez--cifre { background: var(--cc-blu); color: var(--cc-chiaro); }
.cc-cifre .col-inner { border-left: 2px solid color-mix(in srgb, white 35%, transparent); padding-left: 24px; }

/* ---------- duo, testo, tappe */
.cc-duo__testo .text p { max-width: 62ch; }
.cc-testo__corpo .text p:first-child { font-size: 1.25rem; line-height: 1.45; }
.cc-tappa-riga { border-bottom: 1px solid var(--cc-linea); padding-block: 18px; }
.cc-tappe__anno { font: 600 clamp(1.6rem, 2.4vw, 2.4rem)/1 var(--kw-serif); color: var(--cc-blu); margin: 0; }

/* ---------- schede e passi */
.cc-schedina > .col-inner { background: var(--cc-chiaro); border: 1px solid var(--cc-linea); height: 100%; display: flex; flex-direction: column; transition: border-color .3s, transform .4s var(--cc-ease); }
.cc-schedina > .col-inner:hover { border-color: var(--cc-blu); transform: translateY(-4px); }
.cc-schedina__testo { padding: 22px 24px 0; }
.cc-schedina__testo p { color: var(--cc-muto); }
.cc-schedina .kw-link, .cc-schedina .button { margin: auto 24px 24px !important; align-self: flex-start; }
.cc-passo > .col-inner { border-top: 3px solid var(--cc-blu); padding-top: 20px; }
.cc-passo:nth-child(even) > .col-inner { border-top-color: var(--cc-arancio); }
.cc-elenco { list-style: none; margin: 0; padding: 0; }
.cc-elenco li { margin: 0; padding: 18px 0 18px 40px; border-bottom: 1px solid color-mix(in srgb, white 16%, transparent); position: relative; }
.cc-elenco li::before { content: ""; position: absolute; left: 0; top: 22px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--kw-primario) 45%, white) 0 50%, var(--cc-arancio) 50% 100%); }
.cc-elenco strong { font-family: var(--kw-serif); font-size: 1.2rem; }

/* ---------- servizi in home (pista orizzontale) */
.cc-servizi-pista { flex-wrap: nowrap !important; }
.cc-tappa > .col-inner { min-width: 300px; }

/* ---------- case history */
.cc-caso__colonna > .col-inner { position: sticky; top: 120px; }
.cc-caso__dati { background: var(--cc-carta); padding: 28px; }
.cc-caso__dati p { margin: 0 0 14px; }
.cc-caso__dati span { display: block; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-muto); }

/* ---------- moduli */
.cc-modulo-card > .col-inner { background: var(--cc-chiaro); padding: clamp(24px, 3vw, 40px); box-shadow: var(--kw-ombra); }
.cc-modulo-card .kw-form__grid { grid-template-columns: 1fr; } /* nella colonna stretta, una colonna sola */
.cc-contatti__dati > .col-inner { background: var(--cc-carta); padding: clamp(24px, 3vw, 40px); }
.cc-landing h1 { font-size: var(--kw-h1); }
.cc-punti { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.cc-punti li { margin: 0; padding-left: 26px; position: relative; font-weight: 500; }
.cc-punti li::before { content: ""; position: absolute; left: 0; top: .35em; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--cc-blu) 0 50%, var(--cc-arancio) 50% 100%); }
.cc-grazie { text-align: center; }
.cc-grazie .text p { margin-inline: auto; max-width: 56ch; }
.cc-mappa-posto { min-height: 280px; display: grid; place-items: center; border: 1px dashed var(--cc-linea); padding: 24px; }

/* ---------- scheda prodotto: tabella dei dati tecnici */
.cc-tabella-wrap { overflow-x: auto; margin-block: 40px; }
.cc-tabella-wrap table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cc-tabella-wrap th, .cc-tabella-wrap td { padding: 12px 16px; border-bottom: 1px solid var(--cc-linea); text-align: left; vertical-align: top; }
.cc-tabella-wrap thead th { background: var(--cc-notte); color: var(--cc-chiaro); font-weight: 600; }
.cc-tabella-wrap tbody th { font-weight: 600; color: var(--kw-inchiostro); }
.cc-tabella-wrap tbody tr:nth-child(even) { background: var(--cc-carta); }
.cc-accessori { margin-block: 48px; }

/* ---------- categorie: secondo e terzo paragrafo */
.cc-categoria-testo { max-width: 78ch; margin: 40px 0 0; }

/* ---------- megamenu prodotti */
.cc-mega { display: grid; grid-template-columns: 260px minmax(0, 1fr) 340px; grid-template-areas: "fam liste anteprima" "fam liste promo" "materiali materiali materiali"; gap: 0 32px; max-height: calc(100vh - 160px); overflow: auto; }
.cc-mega__famiglie { grid-area: fam; border-right: 1px solid var(--cc-linea); padding-right: 16px; }
.cc-mega__liste { grid-area: liste; }
.cc-mega__anteprima { grid-area: anteprima; }
.cc-mega__promo { grid-area: promo; }
.cc-mega__materiali { grid-area: materiali; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-top: 1px solid var(--cc-linea); margin-top: 20px; padding-top: 16px; }
.cc-mega ul { list-style: none; margin: 0; padding: 0; }
.cc-mega li { margin: 0; }
.cc-mega__etichetta { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-muto); margin: 0 0 10px; font-weight: 600; }
.cc-mega__famiglia { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; color: var(--kw-inchiostro); text-decoration: none; font-family: var(--kw-serif); font-size: 1.2rem; font-weight: 600; border-left: 3px solid transparent; }
.cc-mega__famiglia small { font-family: var(--kw-sans); font-size: .8125rem; font-weight: 400; color: var(--cc-muto); white-space: nowrap; }
.cc-mega__famiglia[aria-current="true"], .cc-mega__famiglia:hover { background: var(--cc-carta); border-left-color: var(--cc-blu); color: var(--cc-blu); }
.cc-mega__lista ul { columns: 2; column-gap: 24px; }
.cc-mega__lista li { break-inside: avoid; }
.cc-mega__lista a { display: block; padding: 7px 0; color: var(--kw-inchiostro); text-decoration: none; }
.cc-mega__lista a:hover, .cc-mega__lista a:focus-visible { color: var(--cc-blu); }
.cc-mega__lista small { display: block; font-size: .8125rem; color: var(--cc-muto); }
.cc-mega__tutti { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .8125rem; color: var(--cc-blu); text-decoration: none; }
.cc-freccia { width: 14px; height: 14px; }
.cc-mega__foto { aspect-ratio: 4 / 3; background: var(--cc-carta); overflow: hidden; }
.cc-mega__foto img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s; }
.cc-mega__foto img.is-pronta { opacity: 1; }
.cc-mega__nome { font-family: var(--kw-serif); font-weight: 600; font-size: 1.25rem; margin: 12px 0 4px; }
.cc-mega__testo { font-size: .875rem; color: var(--cc-muto); margin: 0; }
.cc-mega__promo { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 14px; background: var(--cc-notte); color: var(--cc-chiaro); text-decoration: none; }
.cc-mega__promo img { width: 84px; height: 84px; object-fit: cover; flex: none; }
.cc-mega__promo strong { display: block; font-family: var(--kw-serif); font-size: 1.2rem; }
.cc-mega__promo em { display: inline-flex; gap: 6px; align-items: center; font-style: normal; font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; margin-top: 6px; color: color-mix(in srgb, var(--kw-secondario) 60%, white); }
.cc-mega__chip { display: inline-block; padding: 8px 14px; border: 1px solid var(--cc-linea); color: var(--kw-inchiostro); text-decoration: none; }
.cc-mega__chip:hover { border-color: var(--cc-blu); color: var(--cc-blu); }
.cc-mega-voci .cc-schedina > .col-inner { border: 0; }

/* ---------- distributori */
.cc-dist__barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 12px; }
.cc-dist__aree { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--cc-chiaro); border: 1px solid var(--cc-linea); color: var(--kw-inchiostro); font: inherit; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; min-height: 0; line-height: 1.2; }
.cc-chip em { font-style: normal; font-size: .8125rem; color: var(--cc-muto); }
.cc-chip[aria-pressed="true"] { background: var(--cc-blu); border-color: var(--cc-blu); color: var(--cc-chiaro); }
.cc-chip[aria-pressed="true"] em { color: inherit; opacity: .8; }
.cc-dist__cerca { margin: 0; min-width: min(100%, 360px); }
.cc-dist__cerca label { display: block; font-weight: 500; margin-bottom: 6px; }
.cc-dist { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--cc-linea); border: 1px solid var(--cc-linea); }
.cc-dist__voce { margin: 0; background: var(--cc-chiaro); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.cc-dist__voce[hidden] { display: none; }
.cc-dist__zona { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-blu); font-weight: 600; }
.cc-dist__voce h3 { margin: 0; font-size: 1.375rem; }
.cc-dist__voce p { margin: 0; color: var(--cc-muto); font-size: .9375rem; flex: 1; }
.cc-dist__vuoto { margin-top: 24px; padding: 32px; background: var(--cc-carta); }

/* ---------- piede */
.cc-piede__nome { font-family: var(--kw-serif); font-size: 1.6rem; font-weight: 600; }
.cc-piede__menu h2 { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--kw-primario) 45%, white); margin-bottom: 14px; }
.cc-piede__menu ul { list-style: none; margin: 0; padding: 0; }
.cc-piede__menu li { margin: 0 0 8px; }
.cc-sez--piede a { color: inherit; }
.cc-piede__basso { border-top: 1px solid color-mix(in srgb, white 16%, transparent); padding-top: 18px; margin-top: 24px; font-size: .875rem; opacity: .85; }

/* ---------- schermi */
@media (max-width: 1100px) {
	.cc-mega { grid-template-columns: 220px minmax(0, 1fr); grid-template-areas: "fam liste" "fam promo" "materiali materiali"; }
	.cc-mega__anteprima { display: none; }
}
@media (max-width: 849px) {
	.cc-focus, .cc-punti { grid-template-columns: 1fr; }
	.cc-badge { position: static; max-width: none; margin-top: -1px; }
	.cc-servizi-pista { flex-wrap: wrap !important; }
	.cc-caso__colonna > .col-inner { position: static; }
	.cc-mega { display: block; max-height: none; }
	.cc-mega__lista ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.cc-materiale__altro { transition: none; }
	.cc-schedina > .col-inner { transition: none; }
}
