/*
 * Negozio dei voucher: configuratore, anteprima della copertina, ringraziamento.
 *
 * Caricato solo sulle due pagine del negozio. La Home non deve pagare nulla per
 * una pagina che non ha (sezione 9 della spec).
 *
 * L'anteprima della copertina e' la stessa geometria del PDF rifatta in HTML:
 * pagina 559 x 397 px del design, pannello scuro a sinistra per meta', foto a
 * destra, filetto dorato sulla giunzione. Tutte le misure sono espresse in
 * `--px`, che vale un pixel del disegno: cosi' i numeri qui dentro sono gli
 * stessi di SSM_Voucher_Layout e si confrontano a colpo d'occhio.
 */

@font-face {
	font-family: "SSMV Cinzel";
	src: url("fonts/Cinzel-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "SSMV Belleza";
	src: url("fonts/Belleza-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "SSMV Cormorant";
	src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

.ssmv-shop {
	--ssmv-gold: #b99a55;
	--ssmv-gold-hover: #d8c17c;
	--ssmv-link: #856424;
	--ssmv-gold-soft: #dcc592;
	--ssmv-ivory: #f3eada;
	--ssmv-dark: #18130c;
	--ssmv-ink: #4a4036;
	--ssmv-muted: #6f6255;
	--ssmv-line: #e1d3bd;
	--ssmv-paper: #fbf6ed;
	--ssmv-card: #fffdf8;

	color: var(--ssmv-ink);
	font-size: 17px;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 1120px;
}

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

.ssmv-shop__notice,
.ssmv-shop__errors {
	border-left: 3px solid var(--ssmv-gold);
	background: var(--ssmv-paper);
	margin: 0 0 24px;
	padding: 16px 20px;
}

.ssmv-shop__errors {
	border-left-color: #b32d2e;
}

.ssmv-shop__errors ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssmv-shop__errors li + li {
	margin-top: 6px;
}

.ssmv-shop__trap {
	position: absolute !important;
	left: -9999px !important;
	height: 1px;
	overflow: hidden;
	width: 1px;
}

.ssmv-shop__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.ssmv-shop__grid {
		grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
		gap: 48px;
	}
}

/* --- Passi del configuratore --------------------------------------------- */

.ssmv-shop__step {
	border: 0;
	border-top: 1px solid var(--ssmv-line);
	margin: 0;
	padding: 28px 0 0;
}

.ssmv-shop__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.ssmv-shop__step + .ssmv-shop__step {
	margin-top: 32px;
}

.ssmv-shop__step legend {
	align-items: center;
	display: flex;
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 1.35rem;
	gap: 12px;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
	padding: 0;
}

.ssmv-shop__num {
	align-items: center;
	background: var(--ssmv-dark);
	border-radius: 50%;
	color: var(--ssmv-gold-soft);
	display: inline-flex;
	flex: 0 0 auto;
	font-family: system-ui, sans-serif;
	font-size: 0.85rem;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.ssmv-shop__hint {
	color: var(--ssmv-muted);
	font-size: 0.95rem;
	margin: 0 0 18px;
}

.ssmv-shop__options {
	display: grid;
	gap: 10px;
}

/* Gli extra stanno in colonna unica, non affiancati.
 *
 * Su due colonne i titoli lunghi andavano a capo sotto il prezzo e le schede
 * di una stessa riga restavano di altezze diverse, con buchi visibili. Una
 * riga per voce usa tutta la larghezza disponibile, allinea i prezzi in
 * colonna e toglie il problema alla radice. */
.ssmv-shop__group + .ssmv-shop__group {
	margin-top: 24px;
}

.ssmv-shop__group-title {
	align-items: baseline;
	color: #171512;
	display: flex;
	flex-wrap: wrap;
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 1rem;
	gap: 10px;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
}

.ssmv-shop__group-note {
	color: var(--ssmv-muted);
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ssmv-shop__option {
	cursor: pointer;
	display: block;
	position: relative;
}

.ssmv-shop__option input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.ssmv-shop__option-body {
	align-items: start;
	background: var(--ssmv-card);
	border: 1px solid var(--ssmv-line);
	border-radius: 8px;
	display: flex;
	gap: 14px;
	padding: 15px 18px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.ssmv-shop__option-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ssmv-shop__option:hover .ssmv-shop__option-body {
	border-color: var(--ssmv-gold);
}

.ssmv-shop__option input:checked + .ssmv-shop__option-body {
	background: #fff;
	border-color: var(--ssmv-gold);
	box-shadow: inset 0 0 0 1px var(--ssmv-gold);
}

.ssmv-shop__option input:focus-visible + .ssmv-shop__option-body {
	outline: 2px solid var(--ssmv-dark);
	outline-offset: 2px;
}

/* Il segno di spunta.
 *
 * Il bordo dorato da solo non bastava: l'utente in revisione non capiva di
 * poter togliere un servizio gia' scelto, perche' niente diceva a schermo
 * "questo e' selezionato, e si puo' deselezionare". Quadrato per gli extra,
 * tondo per la formula, come vuole la convenzione di caselle e radio. */
.ssmv-shop__mark {
	align-self: start;
	background: #fff;
	border: 1.5px solid var(--ssmv-line);
	border-radius: 4px;
	height: 22px;
	margin-top: 1px;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 22px;
}

.ssmv-shop__mark--radio {
	border-radius: 50%;
}

.ssmv-shop__option input:checked + .ssmv-shop__option-body .ssmv-shop__mark {
	background: var(--ssmv-gold);
	border-color: var(--ssmv-gold);
}

.ssmv-shop__option input:checked + .ssmv-shop__option-body .ssmv-shop__mark::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: "";
	height: 10px;
	left: 7px;
	position: absolute;
	top: 3px;
	transform: rotate(45deg);
	width: 5px;
}

.ssmv-shop__option-title {
	color: #171512;
	display: block;
	font-weight: 600;
	line-height: 1.35;
}

.ssmv-shop__option-price {
	color: var(--ssmv-gold);
	flex: 0 0 auto;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}

.ssmv-shop__option-note {
	color: var(--ssmv-muted);
	display: block;
	font-size: 0.9rem;
	line-height: 1.5;
	margin-top: 3px;
}

/* --- Campi ---------------------------------------------------------------- */

.ssmv-shop__field {
	margin: 0 0 18px;
}

.ssmv-shop__field label {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}

.ssmv-shop__field input[type="text"],
.ssmv-shop__field input[type="email"],
.ssmv-shop__field textarea {
	background: #fff;
	border: 1px solid var(--ssmv-line);
	color: inherit;
	font: inherit;
	padding: 12px 14px;
	width: 100%;
}

.ssmv-shop__field textarea {
	line-height: 1.6;
	resize: vertical;
}

.ssmv-shop__field input:focus,
.ssmv-shop__field textarea:focus {
	border-color: var(--ssmv-gold);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.ssmv-shop__note {
	color: var(--ssmv-muted);
	display: block;
	font-size: 0.85rem;
	line-height: 1.55;
	margin-top: 6px;
}

.ssmv-shop__note a {
	color: var(--ssmv-link);
	font-weight: 700;
}

.ssmv-shop__consent {
	background: var(--ssmv-paper);
	border: 1px solid var(--ssmv-line);
	border-radius: 8px;
	margin: 22px 0 14px;
	padding: 16px 18px;
}

.ssmv-shop__consent label {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	font-size: 0.95rem;
	line-height: 1.55;
}

.ssmv-shop__consent input {
	flex: 0 0 auto;
	margin-top: 4px;
}

.ssmv-shop__consent a {
	color: var(--ssmv-link);
	font-weight: 700;
}

/* --- Colonna dell'anteprima ---------------------------------------------- */

/* Il tema mette `overflow-x: hidden` su `html` e su `body`.
 *
 * Quella riga rende il body un contenitore di scorrimento, e per un
 * comportamento noto dei browser disattiva `position: sticky` per tutto quello
 * che gli sta dentro: la colonna aveva `position: sticky` dal primo giorno e
 * **non si e' mai appiccicata sul sito vero**. La QA non poteva accorgersene,
 * perche' rende il solo shortcode senza il tema addosso: si e' visto rimontando
 * la pagina in locale con il CSS del tema e misurando la colonna mentre si
 * scorre.
 *
 * `clip` taglia esattamente come `hidden` ma non crea un contenitore di
 * scorrimento. Questo foglio si carica solo sulle due landing e sulle due
 * pagine di ringraziamento, quindi la riga non tocca il resto del sito.
 *
 * I selettori sono scritti storti di proposito: `html:root` e `html body`
 * pesano piu' di `html` e `body` del tema, quindi vincono **qualunque sia
 * l'ordine di caricamento dei fogli**. Con `html, body` la correzione avrebbe
 * funzionato solo finche' il nostro foglio fosse uscito dopo quello del tema,
 * cioe' finche' nessuno avesse toccato le dipendenze degli stili.
 *
 * Il blocco dello scorrimento del menu del telefono resta intatto: il tema lo
 * fa con `html.art-main-holder-mask-show { overflow: hidden }`, che pesa
 * ancora di piu' e continua a vincere quando serve. */
html:root,
html body {
	overflow-x: clip;
}

/* Il contenitore delle query e' la scatola della sola copertina, non tutta la
   colonna: `--px` si calcola da li', e restringere la copertina quando lo
   schermo e' basso non deve mandare a capo il titolo e la nota che le stanno
   intorno. La prima stesura capiva la colonna intera, e la nota andando a capo
   si riprendeva meta' dello spazio guadagnato. */
.ssmv-shop__cover-fit {
	container-type: inline-size;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 900px) {
	.ssmv-shop__sticky {
		position: sticky;
		/* Lo scrive il JavaScript dopo aver misurato la testata del tema e
		   l'altezza della colonna. Il ripiego vale per chi non esegue
		   JavaScript: si appiccica comunque, solo senza tenere conto della
		   testata che compare scorrendo. */
		top: var(--ssmv-sticky-top, 24px);
	}

	/* Quando la colonna e' piu' alta dello schermo la copertina si restringe
	   quel tanto che basta a far entrare tutto: il riepilogo con il totale e il
	   pulsante contano piu' della dimensione della copertina. */
	.ssmv-shop__cover-fit {
		max-width: var(--ssmv-cover-max, none);
	}
}

/* Sul telefono l'ordine cambia: prima si vede il voucher, poi si compila, e il
   totale sta in fondo, dove si decide. `display: contents` scioglie i due
   contenitori e lascia che preview e carrello si dispongano da soli. */
@media (max-width: 899px) {
	.ssmv-shop__aside,
	.ssmv-shop__sticky {
		display: contents;
	}

	.ssmv-shop__preview {
		order: 1;
	}

	.ssmv-shop__steps {
		order: 2;
	}

	.ssmv-shop__cart {
		order: 3;
	}
}

.ssmv-shop__cart {
	background: var(--ssmv-paper);
	border: 1px solid var(--ssmv-line);
	border-radius: 8px;
	margin-top: 22px;
	padding: 20px;
}

.ssmv-shop__aside-title {
	color: var(--ssmv-muted);
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ssmv-shop__summary {
	font-size: 0.95rem;
}

.ssmv-shop__summary-empty {
	color: var(--ssmv-muted);
	font-size: 0.9rem;
	margin: 0;
}

.ssmv-shop__summary-row {
	align-items: baseline;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr auto 26px;
	padding: 5px 0;
}

.ssmv-shop__summary-row + .ssmv-shop__summary-row {
	border-top: 1px solid var(--ssmv-line);
}

.ssmv-shop__summary-price {
	color: var(--ssmv-muted);
	white-space: nowrap;
}

.ssmv-shop__remove {
	background: none;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--ssmv-muted);
	cursor: pointer;
	font-size: 18px;
	height: 26px;
	line-height: 1;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	width: 26px;
}

.ssmv-shop__remove:hover,
.ssmv-shop__remove:focus-visible {
	background: #fdf3e3;
	border-color: var(--ssmv-gold);
	color: var(--ssmv-dark);
}

.ssmv-shop__total {
	align-items: baseline;
	border-top: 1px solid var(--ssmv-line);
	display: flex;
	justify-content: space-between;
	margin: 12px 0 18px;
	padding-top: 12px;
}

.ssmv-shop__total span {
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ssmv-muted);
}

.ssmv-shop__total strong {
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 1.6rem;
}

.ssmv-shop__submit {
	background: var(--ssmv-gold);
	border: 0;
	border-radius: 4px;
	color: var(--ssmv-dark);
	cursor: pointer;
	display: block;
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	min-height: 56px;
	padding: 18px 20px;
	text-transform: uppercase;
	transition: background 0.15s ease;
	width: 100%;
}

.ssmv-shop__submit:hover,
.ssmv-shop__submit:focus-visible {
	background: var(--ssmv-gold-hover);
	color: var(--ssmv-dark);
}

.ssmv-shop__note--pay {
	text-align: center;
}

/* --- Anteprima della copertina ------------------------------------------- */

.ssmv-cover {
	--px: 0.62px;

	aspect-ratio: 559 / 397;
	background: #17130d;
	display: flex;
	overflow: hidden;
	position: relative;
	width: 100%;
}

@supports (container-type: inline-size) {
	.ssmv-cover {
		--px: calc(100cqw / 559);
	}
}

.ssmv-cover__panel {
	align-items: center;
	display: flex;
	flex: 0 0 50%;
	padding: calc(28 * var(--px)) calc(30 * var(--px));
}

.ssmv-cover__inner {
	text-align: center;
	width: 100%;
}

.ssmv-cover__eyebrow {
	color: #a6863f;
	font-family: "SSMV Belleza", system-ui, sans-serif;
	font-size: calc(8 * var(--px));
	letter-spacing: calc(4.6 * var(--px));
	line-height: 1;
	margin: 0 0 calc(26 * var(--px));
	text-indent: calc(4.6 * var(--px));
	text-transform: uppercase;
}

.ssmv-cover__lockup {
	display: block;
}

.ssmv-cover__ornament {
	display: block;
	line-height: 0;
	margin-bottom: calc(5 * var(--px));
}

.ssmv-cover__ornament svg {
	height: calc(19 * var(--px));
	width: calc(15 * var(--px));
}

.ssmv-cover__word {
	color: #f3eada;
	display: block;
	font-family: "SSMV Cinzel", Georgia, serif;
	letter-spacing: calc(5.6 * var(--px));
	text-indent: calc(5.6 * var(--px));
}

.ssmv-cover__word--small {
	font-size: calc(12 * var(--px));
	line-height: 1;
	margin-bottom: calc(3 * var(--px));
}

.ssmv-cover__word--big {
	font-size: calc(17 * var(--px));
	line-height: 1.2;
	margin-bottom: calc(6 * var(--px));
}

.ssmv-cover__rule {
	align-items: center;
	display: flex;
	gap: calc(9 * var(--px));
	justify-content: center;
	margin-bottom: calc(7 * var(--px));
}

.ssmv-cover__rule i {
	background: linear-gradient(90deg, #17130d, #dcc592);
	display: block;
	height: 1px;
	width: calc(62 * var(--px));
}

.ssmv-cover__rule i:last-child {
	background: linear-gradient(90deg, #dcc592, #17130d);
}

.ssmv-cover__rule svg {
	height: calc(8 * var(--px));
	width: calc(8 * var(--px));
}

.ssmv-cover__sub {
	color: #c6b694;
	display: block;
	font-family: "SSMV Belleza", system-ui, sans-serif;
	font-size: calc(6.5 * var(--px));
	letter-spacing: calc(5.2 * var(--px));
	line-height: 1.25;
	text-indent: calc(5.2 * var(--px));
}

.ssmv-cover__phrase {
	color: #e7dcc6;
	font-family: "SSMV Cormorant", Georgia, serif;
	font-size: calc(13.5 * var(--px));
	font-style: italic;
	line-height: 1.45;
	margin: calc(34 * var(--px)) 0 0;
	overflow-wrap: break-word;
	/* Gli a capo scritti dall'acquirente si vedono, come nel PDF: la Fase 1 ha
	   gia' pagato il difetto opposto, con il misuratore che contava otto righe
	   e la stampa che ne faceva una. */
	white-space: pre-wrap;
}

.ssmv-cover__phrase:empty {
	margin: 0;
}

/* Sopra i ~400 caratteri il PDF scende al corpo minimo: l'anteprima fa lo
   stesso, cosi' chi scrive vede subito che il testo si sta stringendo. */
.ssmv-cover__phrase[data-ssmv-size="2"] {
	font-size: calc(12.5 * var(--px));
	line-height: 1.4;
}

.ssmv-cover__phrase[data-ssmv-size="3"] {
	font-size: calc(11.5 * var(--px));
	line-height: 1.4;
}

.ssmv-cover__phrase[data-ssmv-size="4"] {
	font-size: calc(10.5 * var(--px));
	line-height: 1.35;
}

.ssmv-cover__photo {
	background-position: 42% 50%;
	background-size: cover;
	flex: 0 0 50%;
}

.ssmv-cover__photo--empty {
	background: #241c12;
}

.ssmv-cover__seam {
	background: linear-gradient(180deg, #17130d 0%, #a6863f 20%, #dcc592 50%, #a6863f 80%, #17130d 100%);
	bottom: 0;
	left: calc(50% - (0.8 * var(--px)));
	position: absolute;
	top: 0;
	width: calc(1.6 * var(--px));
}

/* --- Pagina di ringraziamento -------------------------------------------- */

.ssmv-thanks {
	background: #fffdf8;
	border: 1px solid #e1d3bd;
	border-left: 3px solid #b99a55;
	border-radius: 8px;
	box-shadow: 0 18px 46px rgba(47, 41, 34, 0.07);
	color: #4a4036;
	font-size: 17px;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 720px;
	padding: 28px 32px;
}

.ssmv-thanks--warn {
	border-left-color: #b3862d;
}

.ssmv-thanks__title {
	font-family: "SSMV Cinzel", Georgia, serif;
	font-size: 1.6rem;
	margin: 0 0 12px;
}

.ssmv-thanks__facts {
	border-top: 1px solid #e1d3bd;
	display: grid;
	gap: 4px 20px;
	grid-template-columns: auto 1fr;
	margin: 20px 0;
	padding-top: 16px;
}

.ssmv-thanks__facts dt {
	color: #6f6255;
	font-size: 0.82rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ssmv-thanks__facts dd {
	margin: 0;
}

/* --- Landing --------------------------------------------------------------
 *
 * Lo stile della landing sta qui e non dentro il contenuto della pagina, come
 * invece succede per le condizioni di vendita. La ragione e' pratica: quel
 * blocco `<style>` va riscritto in due pagine ogni volta che cambia una
 * misura, e su una pagina che si tocchera' spesso e' un debito che si paga
 * subito. La palette e i raggi sono gli stessi delle pagine legali, cos&igrave;
 * le quattro pagine restano una famiglia.
 */

.ssmv-landing {
	--ssmv-gold: #b99a55;
	--ssmv-link: #856424;
	--ssmv-ink: #4a4036;
	--ssmv-muted: #6f6255;
	--ssmv-line: #e1d3bd;
	--ssmv-card: #fffdf8;
	--ssmv-paper: #fbf6ed;
	--ssmv-dark: #18130c;

	color: var(--ssmv-ink);
	font-size: 17px;
	line-height: 1.74;
	margin: 0 auto;
	width: min(100% - 40px, 1120px);
}

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

.ssmv-landing a {
	color: var(--ssmv-link);
	font-weight: 700;
}

.ssmv-landing__eyebrow {
	color: var(--ssmv-gold);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.ssmv-landing h2 {
	color: #171512;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.18;
	margin: 0 0 16px;
}

.ssmv-landing h3 {
	color: #171512;
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.25;
	margin: 0 0 10px;
}

/* L'introduzione prende tutta la larghezza della sezione, come il titolo.
 *
 * Prima si fermava a 760 px, per la regola tipografica che vuole 60-75
 * caratteri per riga. Misurando pero' si scopre che quel limite non stava
 * proteggendo granche': il carattere del tema e' stretto e a 760 px ci
 * stavano gia' **92 caratteri**. In cambio il paragrafo finiva 360 px prima
 * del titolo, e lo stacco si vedeva - rilievo dell'utente, 2026-09-17.
 *
 * A piena larghezza, tenendo il corpo a 21 px, l'ultima riga si riduceva a un
 * moncone di 244 px. Per questo il corpo sale: a 25 px le tre righe misurano
 * 1114, 1065 e 698 px su una sezione di 1120, e il blocco finisce ordinato.
 * Sul telefono non cambia niente: li' comanda il minimo del clamp. */
.ssmv-landing__lead {
	color: var(--ssmv-muted);
	font-size: clamp(18px, 2vw, 25px);
	margin: 0;
}

.ssmv-landing__lead + .ssmv-landing__lead {
	margin-top: 16px;
}

.ssmv-landing__section,
.ssmv-landing__notice {
	background: var(--ssmv-card);
	border: 1px solid var(--ssmv-line);
	border-radius: 8px;
	box-shadow: 0 18px 46px rgba(47, 41, 34, 0.07);
}

.ssmv-landing__section {
	margin-top: 18px;
	padding: clamp(24px, 4vw, 36px);
}

.ssmv-landing__section p {
	margin: 14px 0 0;
}

.ssmv-landing__notice {
	background: var(--ssmv-paper);
	margin-top: 24px;
	padding: 22px;
}

.ssmv-landing__notice p {
	margin: 10px 0 0;
}

.ssmv-landing__notice p:first-of-type {
	margin-top: 0;
}

.ssmv-landing__faq {
	margin: 22px 0 0;
}

.ssmv-landing__faq > div + div {
	border-top: 1px solid var(--ssmv-line);
	margin-top: 18px;
	padding-top: 18px;
}

.ssmv-landing__faq h4 {
	color: #171512;
	font-size: 18px;
	margin: 0 0 6px;
}

.ssmv-landing__faq p {
	margin: 0;
}

.ssmv-landing .ssmv-shop {
	margin-top: 18px;
	max-width: none;
}

@media (max-width: 720px) {
	.ssmv-landing {
		width: min(100% - 28px, 1120px);
	}
}

.ssmv-shop__notice--closed {
	background: #fdf3e3;
	border-left-color: #b3862d;
	font-weight: 600;
}

/* Le tre garanzie.
 *
 * Erano tre schede alte e spingevano il configuratore sotto la piega; poi tre
 * righe puntate, che sembravano un elenco della spesa. Ora sono una fascia con
 * tre colonne divise da un filetto: occupa poco, si legge in un colpo, e ha
 * l'aria di una promessa invece che di un appunto. */
.ssmv-landing__assurances {
	display: grid;
	gap: 18px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

@media (min-width: 760px) {
	.ssmv-landing__assurances {
		gap: 0;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ssmv-landing__assurances li {
		border-left: 1px solid var(--ssmv-line);
		padding: 2px 24px 2px 22px;
	}

	.ssmv-landing__assurances li:first-child {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 759px) {
	.ssmv-landing__assurances li {
		border-top: 1px solid var(--ssmv-line);
		padding-top: 14px;
	}
}

.ssmv-landing__assurance-label {
	color: #171512;
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.ssmv-landing__assurance-label::before {
	background: var(--ssmv-gold);
	content: "";
	display: inline-block;
	height: 7px;
	margin-right: 9px;
	transform: rotate(45deg) translateY(-1px);
	width: 7px;
}

.ssmv-landing__assurance-text {
	color: var(--ssmv-muted);
	display: block;
	font-size: 15px;
	line-height: 1.6;
}

/* Il configuratore apre la pagina: niente cornice, niente filetto sopra. Le
   sezioni di approfondimento vengono dopo, e da li' riprende il ritmo a
   schede. */
.ssmv-landing__buy {
	margin: 34px 0 0;
}

/* L'anteprima che compariva in alto mentre si scriveva la dedica e' stata
 * tolta il 2026-09-17, su rilievo dell'utente: si vedeva una copia tagliata
 * della copertina, e la copia serviva solo perche' la colonna di destra non
 * seguiva la pagina. Ora che la colonna segue davvero, la copia non ha piu'
 * ragione di esistere. */