/**
 * Pagine editoriali — contatti (3D) e chi siamo (3C).
 */

.ad-page { background: var(--ad-surface); }

/* ---------------------------------------------------------------------------
 * Contatti
 * ------------------------------------------------------------------------ */

/* Le due colonne partono dall'alto: senza questo la card del modulo si
   allungava fino all'altezza della colonna di destra, lasciando un vuoto
   sotto il bottone. */
.ad-contatti__grid {
	align-items: start;
	display: grid;
	gap: 56px;
	grid-template-columns: 1.25fr 1fr;
	padding: var(--ad-section-y) var(--ad-gutter);
}

@media (max-width: 1100px) {
	.ad-contatti__grid { gap: var(--ad-gap-2xl); grid-template-columns: 1fr; }
}

.ad-contatti__form {
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-2xl);
	box-shadow: var(--ad-shadow-card);
	padding: 40px;
}

.ad-contatti__aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ad-contatti__block {
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-xl);
	box-shadow: var(--ad-shadow-card);
	overflow: hidden;
	padding: 26px;
}

/* I contatti diretti stanno su fondo scuro: sono la scorciatoia della
   pagina e nell'artboard si staccano dal resto. */
.ad-contatti__block--dark {
	background: var(--ad-gradient-note);
	box-shadow: none;
	color: var(--ad-text-on-dark);
	padding: 32px;
}

.ad-contatti__block--dark .ad-block-label { color: var(--ad-teal); }

.ad-contatti__block--dark .ad-contact-list > div {
	border-top: 0;
	padding: 0;
}

.ad-contatti__block--dark .ad-contact-list dt { color: var(--ad-text-on-dark-4); }

.ad-contatti__block--dark .ad-contact-list dd,
.ad-contatti__block--dark .ad-contact-list dd a {
	color: #fff;
	font-family: var(--ad-font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.ad-contatti__block--dark .ad-contact-list dd a:hover { color: var(--ad-teal); }

.ad-contatti__block--sand {
	background: var(--ad-sand);
	box-shadow: none;
}

.ad-contact-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.ad-contact-list > div {
	border-top: 1px solid var(--ad-border-lightest);
	padding: 14px 0;
}

.ad-contact-list > div:first-child { border-top: 0; padding-top: 0; }

.ad-contact-list dt {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-3xs);
}

.ad-contact-list dd {
	font-size: var(--ad-fs-xs);
	font-weight: 500;
	margin: 4px 0 0;
}

/* La mappa esce dai 26px di margine interno della card e va a filo: il blocco
   ha `overflow: hidden`, quindi gli angoli restano arrotondati. Stessa
   sagoma per l'immagine e per il segnaposto che la sostituisce. */
.ad-contatti__map,
.ad-map-placeholder {
	height: 190px;
	margin: -26px -26px 26px;
	width: calc(100% + 52px);
}

.ad-contatti__map {
	display: block;
	/* Senza questo il `max-width: 100%` dell'azzeramento in base.css taglia i
	   52px del calc qui sopra: l'immagine resta a filo a sinistra e corta a
	   destra. */
	max-width: none;
	object-fit: cover;
}

/* Segnaposto: finché l'immagine non c'è si vede che manca qualcosa, invece di
   lasciare un buco. L'indirizzo scritto è comunque il dato che si cerca. */
.ad-map-placeholder {
	align-items: center;
	background: var(--ad-gradient-placeholder);
	color: var(--ad-text-on-dark-5);
	display: flex;
	font-family: var(--ad-font-mono);
	font-size: var(--ad-fs-4xs);
	justify-content: center;
	letter-spacing: 0.08em;
	padding: var(--ad-gap-sm);
	text-align: center;
	text-transform: uppercase;
}

.ad-contatti__address-title {
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-lead);
	font-weight: 700;
	line-height: 1.3;
}

.ad-contatti__address address {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-sm);
	font-style: normal;
	line-height: var(--ad-lh-relaxed);
	margin: 8px 0 0;
}

/* Gli orari sono un elenco sotto una linea sola, non righe separate. */
.ad-hours {
	border-top: 1px solid var(--ad-border-lightest);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 18px 0 0;
	padding-top: 18px;
}

.ad-hours > div {
	display: flex;
	font-size: var(--ad-fs-xs);
	justify-content: space-between;
}

.ad-hours dt { color: var(--ad-text-muted); }
.ad-hours dd { margin: 0; }

/* Le pill dei social: icona e nome della rete. Gli indirizzi arrivano dal
   pannello del tema, vedi inc/social.php. */
.ad-social--pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.ad-social--pills .ad-social__link {
	align-items: center;
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-pill);
	color: var(--ad-blue-700);
	display: inline-flex;
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	gap: 8px;
	line-height: 1;
	padding: 12px 18px;
}

.ad-social--pills .ad-social__link:hover { color: var(--ad-teal); }

.ad-social--pills .ad-social__icon svg {
	display: block;
	fill: currentColor;
	height: 15px;
	width: 15px;
}

/* ---------------------------------------------------------------------------
 * Modulo (Contact Form 7)
 * ------------------------------------------------------------------------ */

/* Le misure sono quelle dell'artboard: 18px fra i campi, 26px fra i blocchi. */
.ad-form__row {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.ad-form__row { grid-template-columns: 1fr; }
	.ad-contatti__form { padding: var(--ad-gap-xl); }
}

.wpcf7-form > .ad-form__row,
.wpcf7-form > .ad-field { margin-bottom: 18px; }

.ad-field { display: block; }

.ad-field__label {
	color: var(--ad-text-muted);
	display: block;
	font-size: var(--ad-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-nav);
	margin-bottom: 8px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	background: var(--ad-surface);
	border: 1px solid var(--ad-border-lighter);
	border-radius: var(--ad-radius-sm);
	box-sizing: border-box;
	color: var(--ad-text-body);
	display: block;
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-xs);
	padding: 15px 16px;
	width: 100%;
}

.wpcf7 textarea { height: 130px; }

/* Il contenitore che CF7 mette attorno a ogni campo non deve aggiungere
   spazio: la distanza la danno i campi stessi. */
.wpcf7 .wpcf7-form-control-wrap { display: block; }

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--ad-teal);
	outline: 2px solid rgba(27, 154, 170, 0.25);
	outline-offset: 0;
}

.wpcf7 textarea { line-height: var(--ad-lh-body); resize: vertical; }

/* Consenso privacy */
.wpcf7 .wpcf7-acceptance {
	align-items: flex-start;
	display: flex;
	margin: 20px 0 0;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.wpcf7 .wpcf7-acceptance label {
	align-items: flex-start;
	color: var(--ad-text-muted);
	display: flex;
	font-size: var(--ad-fs-2xs);
	gap: var(--ad-gap-sm);
	line-height: var(--ad-lh-body);
}

.wpcf7 input[type="checkbox"] {
	accent-color: var(--ad-blue-700);
	height: 16px;
	margin-top: 1px;
	width: 16px;
}

/* Bottone a tutta larghezza, staccato dal consenso come nell'artboard. */
.wpcf7 input[type="submit"] {
	border: 0;
	cursor: pointer;
	font-size: var(--ad-fs-xs);
	margin-top: 26px;
	padding: 20px;
	width: 100%;
}

/* Messaggi di esito */
.wpcf7 form .wpcf7-response-output {
	border-radius: var(--ad-radius-sm);
	border-width: 1px;
	font-size: var(--ad-fs-2xs);
	margin: var(--ad-gap-md) 0 0;
	padding: 12px 14px;
}

.wpcf7 .wpcf7-not-valid-tip {
	color: var(--ad-coral-alt-1);
	font-size: var(--ad-fs-3xs);
	margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * Chi siamo (3C)
 * ------------------------------------------------------------------------ */

.ad-stats {
	background: var(--ad-sand);
	border-bottom: 1px solid var(--ad-border);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Il margine di pagina sta sul contenitore, come nell'artboard 3C: senza,
	   il primo valore partiva dai soli 24px di padding della cella e non era
	   incolonnato con occhiello e titolo. Si sottraggono quei 24px, che
	   restano per dare aria alle righe divisorie. */
	padding: 0 calc(var(--ad-gutter) - var(--ad-gap-xl));
}

.ad-stats__item {
	border-right: 1px solid var(--ad-border-sand);
	padding: 28px var(--ad-gap-xl);
}

.ad-stats__item:last-child { border-right: 0; }

.ad-stats__value {
	color: var(--ad-blue-700);
	font-family: var(--ad-font-heading);
	font-size: 38px;
	font-weight: 800;
	letter-spacing: var(--ad-ls-heading);
	line-height: 1;
}

.ad-stats__label {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-3xs);
	line-height: 1.5;
	margin-top: 10px;
}

@media (max-width: 1100px) {
	.ad-stats { grid-template-columns: repeat(2, 1fr); }
	.ad-stats__item:nth-child(2) { border-right: 0; }
	.ad-stats__item:nth-child(-n + 2) { border-bottom: 1px solid var(--ad-border-sand); }
}

/* Sotto i 782px il margine di pagina scende a 18px, meno del padding delle
   celle: la sottrazione qui sopra andrebbe in negativo, quindi il margine
   torna sulle celle. */
@media (max-width: 782px) {
	.ad-stats { padding: 0; }
	.ad-stats__item { padding-inline: var(--ad-gutter); }
}

@media (max-width: 640px) {
	.ad-stats { grid-template-columns: 1fr; }
	.ad-stats__item { border-bottom: 1px solid var(--ad-border-sand); border-right: 0; padding: 20px var(--ad-gutter); }
}

/* Sezione testo + immagine */
.ad-split {
	align-items: center;
	display: grid;
	gap: 56px;
	grid-template-columns: 1.05fr 1fr;
	padding: var(--ad-section-y) var(--ad-gutter);
}

.ad-split--dark {
	background: var(--ad-gradient-band);
	color: var(--ad-text-on-dark);
}

.ad-split--dark h2 { color: #fff; }
.ad-split--dark p { color: var(--ad-text-on-dark-2); }

.ad-split__text h2 {
	font-size: var(--ad-fs-h2);
	font-weight: 700;
	letter-spacing: var(--ad-ls-heading);
	margin: 14px 0 0;
}

.ad-split__text p {
	font-size: var(--ad-fs-body);
	line-height: 1.65;
	margin: 18px 0 0;
	max-width: 52ch;
}

.ad-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-gap-sm);
	margin-top: 28px;
}

.ad-split__media img {
	border-radius: var(--ad-radius-lg);
	display: block;
	height: 340px;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 1100px) {
	.ad-split { gap: var(--ad-gap-2xl); grid-template-columns: 1fr; }
	.ad-split__media img { height: 240px; }
}

/* Motivi per comprare */
.ad-reason { box-shadow: var(--ad-shadow-card-sm); padding: 30px; }

.ad-reason__title {
	font-size: var(--ad-fs-h3);
	font-weight: 600;
	margin: 0 0 10px;
}

.ad-reason p {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-xs);
	line-height: var(--ad-lh-body);
	margin: 0;
}

.ad-about__why .ad-section-title { margin: 0 0 var(--ad-gap-2xl); }

/* Il titolo sta su una riga sola: i 900px di `.ad-page-head__title` andavano a
   capo lasciando "usa." da solo. Niente larghezza fissa al suo posto — così la
   riga si spezza da sé quando la finestra si stringe, invece che a un numero
   scelto a mano. */
.ad-about .ad-page-head__title { max-width: none; }

/* ---------------------------------------------------------------------------
 * Marchi trattati (5E)
 * ------------------------------------------------------------------------ */

/* Il foglio dello shop e quello del blog, che definiscono la briciola, non
   vengono caricati sulle pagine: qui serve la sua regola. */
.ad-page .ad-breadcrumb,
.ad-page .ad-breadcrumb a {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-3xs);
}

.ad-page .ad-breadcrumb a:hover { color: var(--ad-teal); }

.ad-brands-page .ad-page-head__title { font-size: var(--ad-fs-h1-lg); }

.ad-brands-page__stats {
	color: var(--ad-text-muted-2);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--ad-fs-xs);
	gap: var(--ad-gap-2xl);
	margin-top: 28px;
}

.ad-brands-page__stat b {
	color: var(--ad-blue-700);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-h3);
	font-weight: 700;
	line-height: 1;
	margin-right: 4px;
}

/* Filtri per reparto: pillole chiare su sfondo pagina, l'attiva in blu. */
.ad-brands-page__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 44px var(--ad-gutter) 0;
}

.ad-brands-page__chip {
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-pill);
	box-shadow: var(--ad-shadow-soft);
	color: var(--ad-blue-700);
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
	padding: 12px 18px;
	transition: background 0.15s ease, color 0.15s ease;
}

.ad-brands-page__chip:hover {
	background: var(--ad-sand);
	color: var(--ad-blue-700);
}

.ad-brands-page__chip.is-active {
	background: var(--ad-blue-700);
	box-shadow: none;
	color: var(--ad-text-on-dark);
}

.ad-brands-page__body { padding: 28px var(--ad-gutter) 56px; }

/* `minmax(0, 1fr)` e non `1fr`: con la forma breve la colonna non scende
   sotto il min-content del figlio più largo — un logo con un formato insolito
   sfonda la colonna e con lei l'intera griglia, mandando la pagina in scroll
   laterale. Stesso bug delle griglie correlate, vedi CLAUDE.md §8. */
.ad-brands-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) { .ad-brands-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ad-brands-grid { grid-template-columns: 1fr; } }

.ad-brand-card {
	background: var(--ad-surface-raised);
	border-radius: var(--ad-radius-lg);
	box-shadow: var(--ad-shadow-card);
	display: flex;
	flex-direction: column;
	padding: 28px 28px 24px;
	position: relative;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ad-brand-card:hover {
	box-shadow: var(--ad-shadow-card-lg);
	transform: translateY(-2px);
}

/* I loghi forniti hanno molto bianco attorno: serve un'area generosa,
   altrimenti il segno vero resta minuscolo. */
.ad-brand-card__logo {
	align-items: center;
	border-radius: var(--ad-radius-ms);
	display: flex;
	height: 78px;
	justify-content: center;
}

.ad-brand-card__logo img {
	display: block;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

/* Senza logo resta il riquadro tratteggiato del design, con dentro il nome:
   una cornice vuota sembrerebbe un'immagine rotta. */
.ad-brand-card__logo.is-empty {
	border: 1px dashed var(--ad-border);
	color: var(--ad-text-faint);
	font-family: var(--ad-font-mono);
	font-size: var(--ad-fs-4xs);
	padding: 0 12px;
	text-align: center;
}

.ad-brand-card__name {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 22px 0 0;
}

.ad-brand-card__origin {
	color: var(--ad-text-faint-2);
	font-size: var(--ad-fs-3xs);
	margin-top: var(--ad-gap-xs);
}

.ad-brand-card__note {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-xs);
	line-height: 1.65;
	margin: var(--ad-gap-sm) 0 0;
}

.ad-brand-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-gap-xs);
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.ad-brand-card__tags li {
	background: var(--ad-sand);
	border-radius: var(--ad-radius-pill);
	color: var(--ad-blue-700);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	padding: 8px 12px;
	text-transform: uppercase;
}

/* `margin-top: auto` allinea i piedini delle schede anche quando le note
   hanno lunghezze diverse; il margine sull'elemento che precede tiene lo
   stacco minimo del design quando la scheda è già alta. */
.ad-brand-card > *:nth-last-child(2) { margin-bottom: 22px; }

.ad-brand-card__foot {
	align-items: center;
	border-top: 1px solid var(--ad-border-lightest);
	display: flex;
	gap: var(--ad-gap-sm);
	justify-content: space-between;
	margin-top: auto;
	padding-top: 18px;
}

.ad-brand-card__count {
	color: var(--ad-text-faint-2);
	font-size: var(--ad-fs-2xs);
}

.ad-brand-card__link {
	color: var(--ad-coral);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-4xs);
	font-weight: 700;
	letter-spacing: var(--ad-ls-badge);
	text-transform: uppercase;
	white-space: nowrap;
}

/* Un solo collegamento per scheda, ma cliccabile su tutta la card. */
.ad-brand-card__link::after {
	content: "";
	inset: 0;
	position: absolute;
}

.ad-brand-card__link:hover { color: var(--ad-coral-alt-1); }

/* Come scegliamo -------------------------------------------------------- */

.ad-brands-why {
	align-items: center;
	background: var(--ad-gradient-blog);
	color: var(--ad-text-on-dark-2);
	display: grid;
	gap: 56px;
	grid-template-columns: 1fr 1fr;
	padding: 56px var(--ad-gutter);
}

.ad-brands-why h2 {
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: var(--ad-ls-heading);
	line-height: 1.15;
	margin: 14px 0 0;
}

.ad-brands-why__list {
	counter-reset: ad-brands-why;
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-md);
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.ad-brands-why__list li {
	display: flex;
	font-size: var(--ad-fs-body);
	gap: 14px;
	line-height: 1.65;
}

.ad-brands-why__list li::before {
	color: var(--ad-teal);
	content: counter(ad-brands-why, decimal-leading-zero);
	counter-increment: ad-brands-why;
	font-family: var(--ad-font-mono);
	font-size: var(--ad-fs-xs);
	font-weight: 700;
	line-height: 1.6;
}

.ad-brands-why__ask {
	background: rgba(255, 255, 255, 0.06);
	border-radius: var(--ad-radius-xl);
	padding: 32px 34px;
}

.ad-brands-why__ask h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.ad-brands-why__ask p {
	font-size: var(--ad-fs-sm);
	line-height: var(--ad-lh-relaxed);
	margin: var(--ad-gap-sm) 0 22px;
}

@media (max-width: 900px) {
	.ad-brands-why { gap: var(--ad-gap-2xl); grid-template-columns: 1fr; padding: 40px var(--ad-gutter); }
	.ad-brands-why h2 { font-size: var(--ad-fs-h2); }
}

@media (max-width: 782px) {
	.ad-brands-page__filters { padding-top: 26px; }
	.ad-brands-page__body { padding-bottom: 32px; }
	.ad-brands-page__stats { gap: var(--ad-gap-md); }
}

/* ---------------------------------------------------------------------------
 * Pagine informative — spedizioni, resi, garanzia, privacy, cookie, termini
 *
 * Nessuna artboard le prevede: riprendono l'intestazione sabbia delle altre
 * pagine editoriali e aggiungono un indice laterale, perché sono testi lunghi
 * in cui si entra cercando una risposta precisa.
 * ------------------------------------------------------------------------ */

/* Qui la briciola precede l'occhiello: senza respiro le due righe piccole si
   leggono come una sola. */
.ad-legal .ad-breadcrumb { display: block; margin-bottom: 18px; }

.ad-legal__updated {
	color: var(--ad-text-muted);
	font-size: var(--ad-fs-3xs);
	margin: 22px 0 0;
}

.ad-legal__grid {
	align-items: start;
	display: grid;
	gap: 56px;
	grid-template-columns: 240px minmax(0, 780px);
	justify-content: center;
	padding: var(--ad-section-y) var(--ad-gutter);
}

/* Pagina generica: nessun indice laterale, solo la colonna di lettura. */
.ad-legal__grid--single { grid-template-columns: minmax(0, 780px); }

/* L'indice segue la lettura: su testi di venti sezioni, doverlo rincorrere in
   cima alla pagina lo renderebbe inutile. */
.ad-legal__aside {
	display: flex;
	flex-direction: column;
	gap: var(--ad-gap-lg);
	position: sticky;
	top: calc(var(--ad-header-h) + var(--ad-gap-xl));
}

.ad-legal__index ol {
	counter-reset: ad-legal;
	list-style: none;
	margin: var(--ad-gap-md) 0 0;
	padding: 0;
}

.ad-legal__index li {
	border-top: 1px solid var(--ad-border-lightest);
	counter-increment: ad-legal;
	padding: 9px 0;
}

.ad-legal__index li:first-child { border-top: 0; padding-top: 0; }

.ad-legal__index a {
	color: var(--ad-text-body);
	display: block;
	font-size: var(--ad-fs-2xs);
	line-height: var(--ad-lh-snug);
}

.ad-legal__index a::before {
	color: var(--ad-text-faint);
	content: counter(ad-legal) ".";
	font-family: var(--ad-font-mono);
	margin-right: 8px;
}

.ad-legal__index a:hover { color: var(--ad-teal); }

.ad-legal__help {
	background: var(--ad-sand);
	border-radius: var(--ad-radius-md);
	padding: 22px;
}

.ad-legal__help p {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-2xs);
	line-height: var(--ad-lh-body);
	margin: var(--ad-gap-sm) 0 var(--ad-gap-md);
}

.ad-legal__help a {
	color: var(--ad-blue-700);
	display: block;
	font-size: var(--ad-fs-2xs);
	font-weight: 600;
}

.ad-legal__help a + a { margin-top: 6px; }
.ad-legal__help a:hover { color: var(--ad-teal); }

/* Colonna di testo. Ripete le regole del corpo articolo (blog.css) perché
   quel foglio sulle pagine non viene caricato. */
.ad-legal__content {
	color: var(--ad-text-body-2);
	font-size: var(--ad-fs-body);
	line-height: var(--ad-lh-relaxed);
}

.ad-legal__content > p:first-of-type {
	color: var(--ad-text-body);
	font-size: var(--ad-fs-lead);
}

.ad-legal__content h2 {
	font-size: 24px;
	letter-spacing: var(--ad-ls-heading);
	line-height: var(--ad-lh-snug);
	margin: 44px 0 var(--ad-gap-sm);
	/* L'ancora dell'indice non deve incollare il titolo al bordo. */
	scroll-margin-top: calc(var(--ad-header-h) + var(--ad-gap-xl));
}

.ad-legal__content h2:first-child { margin-top: 0; }

.ad-legal__content h3 {
	font-size: var(--ad-fs-h3);
	line-height: var(--ad-lh-snug);
	margin: 28px 0 10px;
}

.ad-legal__content p { margin: 0 0 var(--ad-gap-md); }

.ad-legal__content a {
	color: var(--ad-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ad-legal__content ul,
.ad-legal__content ol {
	margin: 0 0 var(--ad-gap-md);
	padding-left: 20px;
}

.ad-legal__content li { margin-bottom: 8px; }

/* Tabelle: dati secchi, righe leggere come nella scheda tecnica del prodotto. */
.ad-legal__content .wp-block-table { margin: 0 0 var(--ad-gap-xl); }

.ad-legal__content table {
	border-collapse: collapse;
	font-size: var(--ad-fs-xs);
	width: 100%;
}

/* `border: 0` prima della riga: il blocco tabella dell'editor incornicia ogni
   cella (`.wp-block-table td`) e mette un filo spesso sotto l'intestazione,
   mentre nel design le tabelle hanno solo la riga leggera fra un rigo e
   l'altro. */
.ad-legal__content thead,
.ad-legal__content tbody,
.ad-legal__content tfoot { border: 0; }

.ad-legal__content th,
.ad-legal__content td {
	border: 0;
	border-bottom: 1px solid var(--ad-border-faint);
	padding: 12px 14px 12px 0;
	text-align: left;
	vertical-align: top;
}

.ad-legal__content th {
	color: var(--ad-text-muted);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-4xs);
	font-weight: 700;
	letter-spacing: var(--ad-ls-label);
	text-transform: uppercase;
}

.ad-legal__content tbody td:first-child {
	color: var(--ad-blue-700);
	font-weight: 600;
}

/* Stessi stili di blocco dell'articolo: "In breve" e elenco tecnico. */
.ad-legal__content .is-style-ad-callout {
	background: var(--ad-sand);
	border-radius: var(--ad-radius-md);
	margin: 0 0 var(--ad-gap-2xl);
	padding: 26px 28px;
}

.ad-legal__content .is-style-ad-callout > *:first-child { margin-top: 0; }
.ad-legal__content .is-style-ad-callout > *:last-child { margin-bottom: 0; }

.ad-legal__content .is-style-ad-callout p { font-size: var(--ad-fs-sm); }

.ad-legal__content .is-style-ad-checklist {
	list-style: none;
	padding: 0;
}

.ad-legal__content .is-style-ad-checklist li {
	padding-left: 22px;
	position: relative;
}

.ad-legal__content .is-style-ad-checklist li::before {
	color: var(--ad-teal);
	content: "\2014";
	left: 0;
	position: absolute;
}

@media (max-width: 1100px) {
	.ad-legal__grid {
		gap: var(--ad-gap-2xl);
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	/* In colonna singola l'indice sta in cima: appiccicarlo non avrebbe senso. */
	.ad-legal__aside { position: static; }
}

@media (max-width: 782px) {
	.ad-legal__grid { padding-top: 32px; }
	.ad-legal__content { font-size: var(--ad-fs-sm); }
	.ad-legal__content h2 { font-size: var(--ad-fs-h2-sm); margin-top: 34px; }

	/* Le tabelle a due o tre colonne non stanno in 390px: scorrono. */
	.ad-legal__content .wp-block-table { overflow-x: auto; }
	.ad-legal__content table { min-width: 460px; }
}

/* ---------------------------------------------------------------------------
 * Pagina 404 (8A)
 *
 * Colonna di testo e foto scura affiancate. Sul telefono la foto sale in cima
 * ridotta a una fascia, col numero appoggiato sopra: il numero però resta un
 * figlio della colonna di testo — nel markup è uno solo — e ci finisce sopra
 * in posizione assoluta, sfruttando l'altezza fissa della fascia.
 * ------------------------------------------------------------------------ */

.ad-404 {
	align-items: stretch;
	background: var(--ad-surface);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
}

.ad-404__body { padding: 80px 56px 72px var(--ad-gutter); }

.ad-404__code {
	color: var(--ad-sand-deep);
	font-family: var(--ad-font-heading);
	font-size: 96px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.ad-404__title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: var(--ad-ls-hero);
	line-height: 1.08;
	margin: var(--ad-gap-lg) 0 0;
	max-width: 520px;
}

.ad-404__text {
	color: var(--ad-text-lead);
	font-size: 17px;
	line-height: var(--ad-lh-relaxed);
	margin: var(--ad-gap-md) 0 0;
	max-width: 520px;
}

/* Campo di ricerca: qui è su fondo chiaro e ha il bottone accanto, mentre
   nell'header è scuro e senza (layout.css). */
.ad-404__search { margin-top: var(--ad-gap-2xl); max-width: 540px; }

.ad-404__search .ad-search {
	display: flex;
	gap: 10px;
}

.ad-404__search input[type="search"] {
	background: var(--ad-surface-raised);
	border: 1px solid var(--ad-border-lighter);
	border-radius: var(--ad-radius-ms);
	color: var(--ad-text-body);
	flex: 1 1 auto;
	font-size: var(--ad-fs-sm);
	min-width: 0;
	padding: 18px 20px;
	width: auto;
}

.ad-404__search input::placeholder { color: var(--ad-text-faint); }

.ad-404__search .ad-search__submit {
	border-radius: var(--ad-radius-ms);
	flex: none;
	padding: 20px 26px;
}

/* La tendina della ricerca live parte da sotto il campo, non da sotto il
   bottone: senza questo si allineerebbe al bordo destro del form. */
.ad-404__search .ad-search__panel { left: 0; right: 0; width: auto; }

.ad-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ad-gap-sm);
	margin-top: 22px;
}

.ad-404__note {
	color: var(--ad-text-muted-2);
	font-size: var(--ad-fs-xs);
	line-height: var(--ad-lh-relaxed);
	margin: 40px 0 0;
	max-width: 560px;
}

.ad-404__note a { color: var(--ad-teal); }
.ad-404__note a:hover { text-decoration: underline; }

/* Senza foto scelta nel personalizzatore resta il gradiente, come per gli
   altri hero del tema. */
.ad-404__media {
	background: var(--ad-gradient-hero);
	background-position: center;
	background-size: cover;
	min-height: 640px;
}

.ad-404__media.has-image { background-image: var(--ad-404-overlay), var(--ad-404-photo); }

@media (max-width: 1100px) {
	.ad-404 { grid-template-columns: 1fr; }

	/* La foto passa in cima e diventa una fascia. */
	.ad-404__media {
		grid-row: 1;
		min-height: 150px;
	}

	.ad-404__media.has-image { background-image: var(--ad-404-overlay-mobile), var(--ad-404-photo); }

	.ad-404__body {
		padding: var(--ad-gap-xl) var(--ad-gutter) 28px;
		position: relative;
	}

	/* Il numero sale sulla fascia: 150px di altezza, appoggiato in basso. */
	.ad-404__code {
		align-items: flex-end;
		bottom: 100%;
		color: var(--ad-text-on-dark);
		display: flex;
		font-size: 62px;
		height: 150px;
		left: var(--ad-gutter);
		opacity: 0.55;
		padding-bottom: var(--ad-gap-md);
		position: absolute;
	}

	.ad-404__title { font-size: 27px; letter-spacing: var(--ad-ls-heading); line-height: 1.12; }
	.ad-404__text { font-size: var(--ad-fs-xs); line-height: 1.65; margin-top: var(--ad-gap-sm); }

	.ad-404__search { margin-top: 22px; max-width: none; }

	/* Bottone sotto il campo: affiancati, a 390px, il campo resterebbe un
	   francobollo. */
	.ad-404__search .ad-search { display: block; }
	.ad-404__search input[type="search"] { padding: 16px; width: 100%; }

	.ad-404__search .ad-search__submit {
		display: block;
		margin-top: 10px;
		padding: 19px;
		width: 100%;
	}

	.ad-404__actions { flex-direction: column; margin-top: 22px; }
	.ad-404__actions .ad-btn { padding: 18px; text-align: center; }

	/* La nota diventa un riquadro sabbia, come in 8A mobile. */
	.ad-404__note {
		background: var(--ad-sand);
		border-radius: 14px;
		color: var(--ad-text-body-2);
		font-size: var(--ad-fs-2xs);
		margin-top: var(--ad-gap-xl);
		max-width: none;
		padding: var(--ad-gap-md) 18px;
	}
}