/* =========================================================================
   SvetX Comparatore Tariffe — frontend
   ========================================================================= */

.stc-compare {
	--stc-accent: #0a84ff;
	--stc-bg: #ffffff;
	--stc-surface: #f7f8fa;
	--stc-border: #e4e7ec;
	--stc-text: #101828;
	--stc-muted: #667085;
	--stc-radius: 16px;
	--stc-gap: 18px;
	--stc-btn-radius: 10px;
	--stc-price-size: 34px;
	--stc-font: 15px;
	--stc-maxw: none;
	--stc-visible: 4;
	--stc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18);

	position: relative;
	max-width: var(--stc-maxw, none);
	margin-inline: auto;
	color: var(--stc-text);
	font-size: var(--stc-font);
	line-height: 1.5;
	container-type: inline-size;
}

@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]) {
		--stc-bg: #16181d;
		--stc-surface: #1e2127;
		--stc-border: #2c313a;
		--stc-text: #eceef2;
		--stc-muted: #9aa2b1;
		--stc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7);
	}
}

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

/* Il tema può reimpostare display su questi elementi: l'attributo hidden vince. */
.stc-compare [hidden] {
	display: none !important;
}

.stc-title {
	margin: 0 0 18px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.2;
	font-weight: 700;
}

.stc-notice {
	padding: 16px 18px;
	border: 1px dashed var(--stc-border);
	border-radius: var(--stc-radius);
	color: var(--stc-muted);
	background: var(--stc-surface);
}

/* ------------------------------------------------------------------ Filtri */

.stc-filters {
	margin-bottom: 20px;
}

.stc-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.stc-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	color: var(--stc-text);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}

.stc-chip:hover {
	border-color: var(--stc-chip, var(--stc-accent));
	transform: translateY(-1px);
}

.stc-chip.is-active {
	background: var(--stc-chip, var(--stc-accent));
	border-color: var(--stc-chip, var(--stc-accent));
	color: #fff;
}

.stc-chip-logo {
	max-height: 18px;
	width: auto;
	display: block;
}

.stc-chip.is-active .stc-chip-logo {
	filter: brightness(0) invert(1);
}

.stc-chip-sub {
	font-size: 11px;
	font-style: normal;
	opacity: .7;
}

.stc-chip-sm {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
}

.stc-subrow {
	padding-left: 4px;
	border-left: 3px solid var(--stc-border);
}

.stc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--stc-muted);
	cursor: pointer;
}

/* ------------------------------------------------------------------ Slider */

.stc-slider {
	position: relative;
}

.stc-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--stc-visible) - 1) * var(--stc-gap)) / var(--stc-visible));
	gap: var(--stc-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 4px 2px 12px;
	overscroll-behavior-x: contain;
}

.stc-track::-webkit-scrollbar {
	display: none;
}

@container (max-width: 1100px) {
	.stc-track { --stc-visible: 3; }
}

@container (max-width: 820px) {
	.stc-track { --stc-visible: 2; }
}

@container (max-width: 560px) {
	.stc-track { --stc-visible: 1.1; }
}

/* Fallback per browser senza container queries. */
@media (max-width: 1100px) { .stc-track { --stc-visible: 3; } }
@media (max-width: 820px)  { .stc-track { --stc-visible: 2; } }
@media (max-width: 560px)  { .stc-track { --stc-visible: 1.1; } }

/* ------------------------------------------------------------------ *
 * Frecce di scorrimento
 *
 * Il disegno e' un SVG di 24x24 dentro a una griglia centrata: la punta
 * resta al centro esatto della cornice qualunque forma si scelga. Con i
 * vecchi caratteri tipografici ("<" e ">") questo non era possibile,
 * perche' ogni font gli lascia intorno uno spazio diverso.
 * ------------------------------------------------------------------ */

.stc-compare {
	--stc-nav-size: 46px;
	--stc-nav-icon: 22px;
	--stc-nav-out: -20px;
	--stc-nav-radius: 50%;
}

.stc-nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--stc-nav-size);
	height: var(--stc-nav-size);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--stc-nav-fg, var(--stc-text));
	line-height: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transform: translateY(-50%);
	transition: transform .18s ease, opacity .18s ease;
}

/* La cornice: e' lei a prendere forma, colore e ombra. */
.stc-nav-face {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 1px solid var(--stc-nav-line, var(--stc-border));
	border-radius: var(--stc-nav-radius);
	background: var(--stc-nav-bg, var(--stc-bg));
	box-shadow: var(--stc-shadow);
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.stc-nav-ico {
	display: block;
	width: var(--stc-nav-icon);
	height: var(--stc-nav-icon);
	/* Ottica: le punte pesano verso la coda, un capello a destra le centra. */
	margin-inline-start: 1px;
	pointer-events: none;
}

/* La freccia di sinistra e' la stessa, ribaltata: simmetria perfetta. */
.stc-nav-prev .stc-nav-ico {
	transform: scaleX(-1);
	margin-inline-start: 0;
	margin-inline-end: 1px;
}

.stc-nav:hover { transform: translateY(-50%) scale(1.07); }
.stc-nav:active { transform: translateY(-50%) scale(.96); }

.stc-nav:focus-visible {
	outline: none;
}

.stc-nav:focus-visible .stc-nav-face {
	outline: 2px solid var(--stc-accent);
	outline-offset: 3px;
}

.stc-nav[hidden] { display: none; }

.stc-nav-prev { left: var(--stc-nav-out); }
.stc-nav-next { right: var(--stc-nav-out); }

/* ---- Dimensioni ---- */

.stc-navsize-sm { --stc-nav-size: 38px; --stc-nav-icon: 18px; --stc-nav-out: -16px; }
.stc-navsize-md { --stc-nav-size: 46px; --stc-nav-icon: 22px; --stc-nav-out: -20px; }
.stc-navsize-lg { --stc-nav-size: 58px; --stc-nav-icon: 27px; --stc-nav-out: -26px; }

/* ---- Posizione ---- */

.stc-navpos-bordo  { --stc-nav-out: 0px; }
.stc-navpos-dentro { --stc-nav-out: 14px; }

.stc-navpos-sopra .stc-slider { position: relative; }

.stc-navpos-sopra .stc-nav {
	top: auto;
	bottom: calc(100% + 14px);
	transform: none;
}

.stc-navpos-sopra .stc-nav:hover { transform: scale(1.07); }
.stc-navpos-sopra .stc-nav:active { transform: scale(.96); }
.stc-navpos-sopra .stc-nav-prev { left: auto; right: calc(var(--stc-nav-size) + 8px); }
.stc-navpos-sopra .stc-nav-next { right: 0; }

/* ---- Forme della cornice ---- */

.stc-navshape-cerchio  { --stc-nav-radius: 50%; }
.stc-navshape-quadrato { --stc-nav-radius: 0; }
.stc-navshape-smussato { --stc-nav-radius: 13px; }

.stc-navshape-pillola {
	--stc-nav-radius: 999px;
}

.stc-navshape-pillola .stc-nav {
	width: calc(var(--stc-nav-size) * 1.55);
}

/* Diamante: la cornice ruota, il disegno resta dritto. */
.stc-navshape-diamante { --stc-nav-radius: 6px; }

.stc-navshape-diamante .stc-nav-face {
	transform: rotate(45deg);
}

.stc-navshape-diamante .stc-nav-ico {
	transform: rotate(-45deg);
}

.stc-navshape-diamante .stc-nav-prev .stc-nav-ico {
	transform: rotate(-45deg) scaleX(-1);
}

/* Le forme ritagliate non possono avere bordo ne' box-shadow: l ombra la
   mette drop-shadow, che segue il ritaglio invece del rettangolo. */
.stc-navshape-esagono .stc-nav,
.stc-navshape-tagliato .stc-nav {
	filter: drop-shadow(0 2px 6px rgba(15, 20, 30, .18));
}

.stc-navshape-esagono .stc-nav-face,
.stc-navshape-tagliato .stc-nav-face {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--stc-nav-bg, var(--stc-bg));
}

.stc-navshape-esagono .stc-nav-face {
	clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
}

.stc-navshape-tagliato .stc-nav-next .stc-nav-face {
	clip-path: polygon(26% 0, 100% 0, 100% 74%, 74% 100%, 0 100%, 0 26%);
}

/* Speculare, cosi' le due frecce si guardano invece di puntare uguale. */
.stc-navshape-tagliato .stc-nav-prev .stc-nav-face {
	clip-path: polygon(0 0, 74% 0, 100% 26%, 100% 100%, 26% 100%, 0 74%);
}

.stc-navshape-scudo .stc-nav-face {
	border-radius: 46% 46% 46% 46% / 34% 34% 62% 62%;
}

.stc-navshape-ondulato .stc-nav-next .stc-nav-face {
	border-radius: 62% 38% 46% 54% / 46% 54% 46% 54%;
}

.stc-navshape-ondulato .stc-nav-prev .stc-nav-face {
	border-radius: 38% 62% 54% 46% / 54% 46% 54% 46%;
}

.stc-navshape-goccia .stc-nav-next .stc-nav-face {
	border-radius: 50% 50% 12% 50%;
}

.stc-navshape-goccia .stc-nav-prev .stc-nav-face {
	border-radius: 50% 50% 50% 12%;
}

.stc-navshape-foglia .stc-nav-next .stc-nav-face {
	border-radius: 8% 60% 8% 60%;
}

.stc-navshape-foglia .stc-nav-prev .stc-nav-face {
	border-radius: 60% 8% 60% 8%;
}

.stc-navshape-squircle .stc-nav-face {
	border-radius: 32%;
}

/* Senza cornice: resta soltanto il disegno. */
.stc-navshape-nuda .stc-nav-face,
.stc-navshape-barra .stc-nav-face {
	border: 0;
	background: none;
	box-shadow: none;
}

.stc-navshape-nuda { --stc-nav-icon: 30px; }
.stc-navshape-nuda.stc-navsize-sm { --stc-nav-icon: 24px; }
.stc-navshape-nuda.stc-navsize-lg { --stc-nav-icon: 38px; }

.stc-navshape-barra .stc-nav-face {
	border-radius: 0;
}

.stc-navshape-barra .stc-nav-face::before {
	content: "";
	position: absolute;
	top: 12%;
	bottom: 12%;
	width: 2px;
	border-radius: 2px;
	background: var(--stc-nav-line, var(--stc-border));
}

.stc-navshape-barra .stc-nav-next .stc-nav-face::before { left: 0; }
.stc-navshape-barra .stc-nav-prev .stc-nav-face::before { right: 0; }

/* ---- Riempimento ---- */

.stc-navfill-contorno .stc-nav-face {
	background: transparent;
	border-color: var(--stc-nav-line, var(--stc-text));
	box-shadow: none;
}

.stc-navfill-contorno .stc-nav:hover .stc-nav-face {
	background: var(--stc-nav-bg, var(--stc-bg));
}

.stc-navfill-vetro .stc-nav-face {
	background: color-mix(in srgb, var(--stc-nav-bg, var(--stc-bg)) 62%, transparent);
	border-color: color-mix(in srgb, var(--stc-nav-line, var(--stc-border)) 70%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	box-shadow: 0 6px 20px rgba(15, 20, 30, .12);
}

.stc-navfill-ombra .stc-nav-face {
	border-color: transparent;
	box-shadow: 0 10px 26px rgba(15, 20, 30, .22), 0 2px 6px rgba(15, 20, 30, .12);
}

.stc-navfill-tinta .stc-nav-face {
	background: var(--stc-nav-bg, var(--stc-accent));
	border-color: transparent;
	color: var(--stc-nav-fg, #fff);
}

.stc-navfill-tinta .stc-nav {
	color: var(--stc-nav-fg, #fff);
}

.stc-navfill-tinta .stc-nav:hover .stc-nav-face {
	filter: brightness(1.08);
}

/* ---- Adattamento agli schermi stretti ---- */

@media (max-width: 900px) {
	.stc-compare { --stc-nav-out: 2px; }
	.stc-navpos-dentro { --stc-nav-out: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.stc-nav,
	.stc-nav-face { transition: none; }
	.stc-nav:hover,
	.stc-nav:active { transform: translateY(-50%); }
}

.stc-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--stc-border);
	overflow: hidden;
	margin: 4px auto 0;
	max-width: 260px;
}

.stc-progress-bar {
	display: block;
	height: 100%;
	width: 30%;
	border-radius: 999px;
	background: var(--stc-accent);
	transition: transform .2s ease, width .2s ease;
}

.stc-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--stc-muted);
}

/* -------------------------------------------------------------------- Card */

.stc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	background: var(--stc-bg);
	border: 1px solid var(--stc-border);
	border-radius: var(--stc-radius);
	box-shadow: var(--stc-shadow);
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.stc-card:hover {
	transform: translateY(-3px);
	border-color: var(--stc-brand, var(--stc-accent));
}

.stc-card.is-selected {
	border-color: var(--stc-accent);
	box-shadow: 0 0 0 2px var(--stc-accent) inset, var(--stc-shadow);
}

.stc-card[hidden] {
	display: none;
}

.stc-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 6px 12px;
	border-bottom-left-radius: 12px;
	background: var(--stc-badge, #e74c3c);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.stc-card-head {
	padding: 22px 20px 14px;
	border-bottom: 1px solid var(--stc-border);
	background: linear-gradient(180deg, color-mix(in srgb, var(--stc-brand, #0a3d62) 7%, transparent), transparent);
}

.stc-card-logo {
	height: 22px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: 12px;
	display: block;
}

.stc-card-operator {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--stc-brand, #0a3d62);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.stc-card-name {
	margin: 0;
	font-size: 21px;
	line-height: 1.25;
	font-weight: 700;
}

.stc-card-sub {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--stc-muted);
}

.stc-card-body {
	flex: 1 1 auto;
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.stc-sec-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stc-muted);
}

/*
 * Il tondo con il disegno accanto al titolo di sezione, come nelle
 * schede dei cellulari: cerchio pieno nel colore dell operatore, con
 * dentro un segno bianco a tratto. Sul tema scuro il cerchio prende la
 * versione schiarita, che sul fondo notte si vede.
 */
.stc-sec-badge {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--stc-gradient);
	color: var(--stc-sec-badge-ink, #fff);
}

.stc-sec-badge svg {
	width: 15px;
	height: 15px;
}

/* La sfumatura in diagonale, costruita sul colore dell operatore:
   schiarito in alto a sinistra, pieno al centro, scurito in fondo. */
.stc-compare,
.stc-modal,
.stc-card {
	--stc-gradient: linear-gradient(
		135deg,
		var(--stc-grad-a, color-mix(in srgb, var(--stc-accent) 70%, #ffffff)) 0%,
		var(--stc-brand-btn, var(--stc-brand, var(--stc-accent))) 55%,
		var(--stc-grad-b, var(--stc-accent)) 100%
	);
}

.stc-card {
	--stc-sec-badge-bg: var(--stc-brand-btn, var(--stc-brand, var(--stc-accent)));
	--stc-sec-badge-ink: var(--stc-brand-ink, #fff);
}

@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]) .stc-card {
		--stc-sec-badge-bg: var(--stc-brand-lite, var(--stc-accent));
		--stc-sec-badge-ink: #101828;
		--stc-gradient: linear-gradient(
			135deg,
			var(--stc-grad-la, var(--stc-accent)) 0%,
			var(--stc-brand-lite, var(--stc-accent)) 55%,
			var(--stc-grad-lb, var(--stc-accent)) 100%
		);
	}
}

.stc-compare[data-theme="dark"] .stc-card,
.stc-preset-svetix-scuro .stc-card,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-card {
	--stc-sec-badge-bg: var(--stc-brand-lite, var(--stc-accent));
	--stc-sec-badge-ink: #101828;

	/* Sul fondo notte la sfumatura si costruisce sul colore schiarito,
	   altrimenti il blu di Swisscom sparisce dentro la card. */
	--stc-gradient: linear-gradient(
		135deg,
		var(--stc-grad-la, var(--stc-accent)) 0%,
		var(--stc-brand-lite, var(--stc-accent)) 55%,
		var(--stc-grad-lb, var(--stc-accent)) 100%
	);
}

.stc-feats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stc-feat {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: 14px;
}

.stc-feat-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--stc-brand, #0a3d62) 15%, transparent);
	color: var(--stc-brand, #0a3d62);
	font-size: 10px;
	font-weight: 700;
}

.stc-feat.is-negative .stc-feat-icon {
	background: rgba(180, 35, 24, .12);
	color: #b42318;
}

.stc-feat.is-negative .stc-feat-text {
	color: var(--stc-muted);
}

/* Trigger dei popup: "36 paesi" cliccabile dentro la frase. */
.stc-popup-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--stc-accent-text, var(--stc-accent));
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}

.stc-popup-link:hover,
.stc-popup-link:focus-visible {
	text-decoration-style: solid;
}

/*
 * Il segnalino «i».
 *
 * Stesso disegno del segnalino nelle schede dei cellulari di svetix.ch:
 * cerchio vuoto con bordo sottile e riempimento appena accennato, lettera
 * in grassetto nel colore della marca. Al passaggio del mouse si riempie,
 * la lettera diventa chiara e il cerchio cresce un po'.
 *
 * A riposo tiene il colore della marca dell operatore, che sul fondo
 * chiaro delle card si legge bene; sul tema scuro la tinta viene
 * schiarita piu' sotto, dove il rosso pieno sarebbe troppo cupo.
 */
.stc-popup-link::after {
	content: "i";
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;

	/* Ovale, non cerchio: e' la forma della pagina dei cellulari, dove il
	   riquadro e' piu' largo che alto e il raggio al 50% lo arrotonda in
	   un'ellisse. Il rapporto fra larghezza e altezza e' lo stesso. */
	height: var(--stc-info-h, 27px);
	width: var(--stc-info-w, 42px);
	margin-left: 6px;
	margin-right: 3px;
	border: 1.5px solid color-mix(in srgb, var(--stc-info-tint) 60%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--stc-info-tint) 15%, transparent);
	box-shadow: 0 1px 3px rgba(20, 20, 40, .08);
	color: var(--stc-info-tint);
	font-family: inherit;
	font-size: var(--stc-info-font, 12px);
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	vertical-align: -5px;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.stc-popup-link:hover::after,
.stc-popup-link:focus-visible::after {
	transform: scale(1.12);
	border-color: transparent;
	background: var(--stc-gradient);
	color: var(--stc-info-ink, #fff);
	box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--stc-info-tint) 45%, transparent);
}

/* La tinta: il colore scelto nelle Impostazioni, altrimenti quello della
   marca. Va dichiarata anche sulla card, perche' e' li' che vive
   --stc-brand: una variabile si risolve dove viene dichiarata, non dove
   viene usata. */
.stc-compare,
.stc-modal,
.stc-card,
.stc-matrix td,
.stc-table td {
	--stc-info-tint: var(--stc-info-bg, var(--stc-brand, var(--stc-accent)));
	--stc-info-ink: #fff;
}

/* Sul fondo scuro i marchi cupi annegano: si usa la versione schiarita
   calcolata dal plugin, e la lettera al passaggio torna scura. */
@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]),
	.stc-modal:not([data-theme="light"]),
	.stc-compare:not([data-theme="light"]) .stc-card,
	.stc-modal:not([data-theme="light"]) td {
		--stc-info-tint: var(--stc-info-lite, var(--stc-brand-lite, var(--stc-accent)));
		--stc-info-ink: #101828;
	}
}

.stc-compare[data-theme="dark"],
.stc-modal[data-theme="dark"],
.stc-preset-svetix-scuro,
.stc-preset-svetix-auto.stc-preset-is-dark,
.stc-compare[data-theme="dark"] .stc-card,
.stc-modal[data-theme="dark"] td,
.stc-preset-svetix-scuro .stc-card,
.stc-preset-svetix-scuro td,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-card,
.stc-preset-svetix-auto.stc-preset-is-dark td {
	--stc-info-tint: var(--stc-info-lite, var(--stc-brand-lite, var(--stc-accent)));
	--stc-info-ink: #101828;
}

.stc-info-sm {
	--stc-info-h: 23px;
	--stc-info-w: 36px;
	--stc-info-font: 11px;
}

.stc-info-md {
	--stc-info-h: 27px;
	--stc-info-w: 42px;
	--stc-info-font: 12px;
}

.stc-info-lg {
	--stc-info-h: 32px;
	--stc-info-w: 50px;
	--stc-info-font: 13px;
}

/* L alone ha bisogno di respiro: senza, tocca il testo della riga dopo. */
.stc-feat-text .stc-popup-link,
.stc-countries .stc-popup-link {
	margin-right: 3px;
}

.stc-countries {
	margin: 0;
	font-size: 13px;
}

/* Documenti PDF */

.stc-docs {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.stc-doc {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border: 1px solid var(--stc-border);
	border-radius: 9px;
	background: var(--stc-surface);
	color: var(--stc-text);
	font-size: 13px;
	text-decoration: none;
	transition: border-color .15s ease;
}

.stc-doc:hover {
	border-color: var(--stc-accent);
}

.stc-doc-icon {
	flex: 0 0 auto;
	padding: 2px 6px;
	border-radius: 4px;
	background: #b42318;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .04em;
}

.stc-doc-title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stc-doc-size {
	color: var(--stc-muted);
	font-size: 11px;
}

/* Footer card */

.stc-card-foot {
	padding: 16px 20px 20px;
	border-top: 1px solid var(--stc-border);
	background: var(--stc-surface);
}

.stc-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.stc-price-old {
	color: var(--stc-muted);
	font-size: 14px;
	text-decoration: line-through;
}

.stc-price-value {
	font-size: var(--stc-price-size);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}

.stc-price-meta {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: var(--stc-muted);
	line-height: 1.25;
}

.stc-price-cur {
	font-weight: 700;
	color: var(--stc-text);
}

.stc-terms {
	margin: 8px 0 14px;
	font-size: 12px;
	color: var(--stc-muted);
}

.stc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--stc-btn-radius);
	background: var(--stc-accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}

.stc-btn:hover {
	filter: brightness(1.08);
	color: #fff;
}

.stc-btn-cta {
	width: 100%;
}

.stc-btn-pdf {
	flex: 0 0 auto;
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .22);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
}

.stc-btn.is-pdf {
	background: #b42318;
}

.stc-btn-ghost {
	background: transparent;
	border-color: var(--stc-border);
	color: var(--stc-text);
}

.stc-btn-ghost:hover {
	color: var(--stc-text);
	filter: none;
	border-color: var(--stc-accent);
}

.stc-compare-check {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--stc-muted);
	cursor: pointer;
}

/* --------------------------------------------------------- Barra confronto */

/* La barra viene spostata in <body> dal JavaScript: così resta sopra al
   footer del tema anche quando il comparatore passa dietro. Per questo si
   ridefinisce da sola i colori, come fa la finestra dei popup. */
.stc-compare-bar {
	--stc-accent: #0a84ff;
	--stc-bg: #ffffff;
	--stc-surface: #f7f8fa;
	--stc-border: #e4e7ec;
	--stc-text: #101828;
	--stc-muted: #667085;
	--stc-radius: 16px;
	--stc-btn-radius: 10px;
	--stc-font: 15px;
	--stc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 40px -18px rgba(16, 24, 40, .45);

	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2147482000;
	display: flex;
	justify-content: center;
	padding: 0 16px;
	margin: 0;
	color: var(--stc-text);
	font-size: var(--stc-font);
	line-height: 1.5;
	pointer-events: none;
}

.stc-compare-bar *,
.stc-compare-bar *::before,
.stc-compare-bar *::after {
	box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
	.stc-compare-bar:not([data-theme="light"]) {
		--stc-bg: #16181d;
		--stc-surface: #1e2127;
		--stc-border: #2c313a;
		--stc-text: #eceef2;
		--stc-muted: #9aa2b1;
	}
}

.stc-compare-bar[hidden] {
	display: none;
}

.stc-compare-bar-inner {
	pointer-events: auto;
	width: 100%;
	max-width: 900px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 16px;
	border: 1px solid var(--stc-border);
	border-radius: 14px;
	background: var(--stc-bg);
	box-shadow: var(--stc-shadow);
}

.stc-compare-count {
	font-weight: 600;
	font-size: 14px;
}

.stc-compare-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	flex: 1 1 auto;
}

.stc-compare-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--stc-surface);
	border: 1px solid var(--stc-border);
	font-size: 12px;
}

.stc-compare-chip button {
	border: 0;
	background: none;
	color: var(--stc-muted);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

/* ------------------------------------------------------------------- Modal */

/* La finestra viene spostata in <body> dal JavaScript: qui ridefinisce da sola
   i propri token, perché fuori da .stc-compare non li eredita più. */
.stc-modal {
	--stc-accent: #0a84ff;
	--stc-bg: #ffffff;
	--stc-surface: #f7f8fa;
	--stc-border: #e4e7ec;
	--stc-text: #101828;
	--stc-muted: #667085;
	--stc-radius: 16px;
	--stc-btn-radius: 10px;
	--stc-font: 15px;

	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 20px;
	font-size: var(--stc-font);
	line-height: 1.5;
	color: var(--stc-text);
}

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

.stc-modal[hidden] {
	display: none !important;
}

@media (prefers-color-scheme: dark) {
	.stc-modal:not([data-theme="light"]) {
		--stc-bg: #16181d;
		--stc-surface: #1e2127;
		--stc-border: #2c313a;
		--stc-text: #eceef2;
		--stc-muted: #9aa2b1;
	}
}

.stc-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .55);
	backdrop-filter: blur(2px);
}

.stc-modal-dialog {
	position: relative;
	width: min(980px, 100%);
	max-height: min(86vh, 900px);
	display: flex;
	flex-direction: column;
	background: var(--stc-bg);
	border: 1px solid var(--stc-border);
	border-radius: var(--stc-radius);
	box-shadow: 0 24px 64px -12px rgba(16, 24, 40, .4);
	overflow: hidden;
}

.stc-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px 16px;
	border-bottom: 1px solid var(--stc-border);
}

.stc-modal-heading {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* La riga piccola sopra al titolo, come nelle schede dei cellulari. */
.stc-modal-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-modal-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

/* Il tondo di chiusura: gira su se stesso e si riempie al passaggio. */
.stc-modal-close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--stc-surface);
	color: var(--stc-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease, transform .2s ease;
}

.stc-modal-close:hover,
.stc-modal-close:focus-visible {
	background: var(--stc-accent);
	color: #fff;
	transform: rotate(90deg);
}

/* Il riquadro entra salendo di poco, invece di comparire di colpo. */
.stc-modal:not([hidden]) .stc-modal-dialog {
	animation: stc-modal-in .26s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes stc-modal-in {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.stc-modal:not([hidden]) .stc-modal-dialog { animation: none; }
	.stc-modal-close:hover { transform: none; }
}

/* --- Tabelle delle opzioni e delle tariffe dentro al popup ---------- */

.stc-rates {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.stc-rates th,
.stc-rates td {
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--stc-border);
}

.stc-rates th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stc-muted);
	white-space: nowrap;
}

.stc-rates td:first-child {
	font-weight: 600;
	color: var(--stc-text);
}

.stc-rates tbody tr:last-child th,
.stc-rates tbody tr:last-child td {
	border-bottom: 0;
}

.stc-rates tbody tr:hover td {
	background: color-mix(in srgb, var(--stc-accent) 5%, transparent);
}

.stc-rates-vuoto {
	color: var(--stc-muted);
}

.stc-rates-nota {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--stc-border);
	font-size: 13px;
	line-height: 1.6;
	color: var(--stc-muted);
}

/* Su schermo stretto la tabella scorre da sola invece di sfondare. */
@media (max-width: 640px) {
	.stc-modal-body .stc-rates {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.stc-modal-body .stc-rates td {
		white-space: normal;
		min-width: 150px;
	}
}

.stc-modal-body {
	padding: 20px;
	overflow: auto;
}

/* Elenco paesi nel popup */

.stc-popup-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 6px 16px;
}

.stc-popup-list li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
}

.stc-popup-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--stc-accent);
}

.stc-popup-note {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--stc-border);
	font-size: 13px;
	color: var(--stc-muted);
}

/* Tabella confronto */

.stc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Colonne tutte della stessa larghezza.
 *
 * Con la disposizione automatica il browser allarga la colonna che contiene
 * piu' testo: l abbonamento in risalto, che ha in piu' l etichetta e i segni
 * «piu'», finiva per essere piu' largo degli altri. Con table-layout: fixed
 * la prima colonna tiene la sua misura e tutte le altre si dividono lo
 * spazio in parti uguali, qualunque cosa contengano. In risalto resta solo
 * il colore di sfondo.
 */
.stc-table {
	--stc-cmp-label: 190px;
	--stc-cmp-col: 168px;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
	min-width: calc( var(--stc-cmp-label) + var(--stc-cmp-cols, 2) * var(--stc-cmp-col) );
}

.stc-table th,
.stc-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--stc-border);
	text-align: left;
	vertical-align: top;
	/* Le parole lunghe vanno a capo invece di allargare la colonna. */
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: auto;
}

.stc-table thead th {
	position: sticky;
	top: 0;
	background: var(--stc-bg);
	z-index: 1;
}

.stc-table thead th:first-child,
.stc-table tbody th {
	width: var(--stc-cmp-label);
}

/* La colonna delle voci resta ferma mentre si scorre di lato: si vede
   sempre a che riga appartiene il valore che si sta leggendo. */
.stc-table thead th:first-child,
.stc-table tbody th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--stc-bg);
	box-shadow: 1px 0 0 var(--stc-border);
}

.stc-table thead th:first-child {
	z-index: 3;
}

.stc-table tbody th {
	color: var(--stc-muted);
	font-weight: 600;
	font-size: 13px;
}

.stc-table th[scope="row"] .stc-row-action {
	display: inline-block;
	margin-top: 4px;
	text-align: left;
}

.stc-table-op {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--stc-th-color, var(--stc-muted));
}

.stc-table-name {
	display: block;
	font-size: 16px;
	font-weight: 700;
}

.stc-best {
	display: block;
	width: fit-content;
	margin: 6px 0 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #067647;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

/* Colonna dell'abbonamento con più servizi. */
.stc-table th.is-best,
.stc-table td.is-best {
	background: color-mix(in srgb, #067647 7%, transparent);
}

.stc-table th.is-best {
	box-shadow: inset 0 3px 0 #067647;
}

.stc-table tr:last-child td.is-best {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.stc-table .stc-doc {
	margin-bottom: 4px;
}

/* Schermi stretti: il popup prende tutto e le colonne si stringono, cosi'
   il confronto resta leggibile senza dover scorrere all infinito. */

@media (max-width: 780px) {
	.stc-table { --stc-cmp-label: 132px; --stc-cmp-col: 158px; font-size: 13px; }
	.stc-table.stc-matrix { --stc-cmp-label: 168px; --stc-cmp-col: 104px; }
	.stc-table th,
	.stc-table td { padding: 9px 10px; }
	.stc-table-name { font-size: 15px; }
}

@media (max-width: 560px) {
	.stc-price-value { font-size: calc(var(--stc-price-size) * .88); }
	.stc-modal { padding: 0; }
	.stc-modal-dialog {
		width: 100%;
		max-width: none;
		max-height: 100dvh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}
	.stc-modal-head { padding: 13px 14px; }
	.stc-modal-title { font-size: 16px; }
	.stc-modal-body { padding: 12px; }
	.stc-table { --stc-cmp-label: 112px; --stc-cmp-col: 146px; }
	.stc-table.stc-matrix { --stc-cmp-label: 140px; --stc-cmp-col: 92px; }
	.stc-table th,
	.stc-table td { padding: 8px 9px; }
	.stc-table-name { font-size: 14px; }
	.stc-best { font-size: 9px; padding: 2px 6px; }
}


/* =========================================================================
   Opzioni grafiche impostabili dall'amministratore
   ========================================================================= */

/* --- Sovrapposizione con il tema -------------------------------------- */

/* "Dietro": la radice crea un proprio contesto di impilamento a livello 0,
   così header e footer del tema, che vengono dopo nel documento, restano
   sopra alle card mentre si scorre. La finestra dei popup viene spostata
   dal JavaScript direttamente in <body>, quindi resta sempre sopra a tutto. */
.stc-compare.stc-stack-behind {
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.stc-compare.stc-stack-above {
	position: relative;
	z-index: 9990;
}

.stc-compare.stc-stack-auto {
	position: relative;
	z-index: auto;
}

/* --- Ombre ------------------------------------------------------------ */

.stc-shadow-none { --stc-shadow: none; }
.stc-shadow-sm   { --stc-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.stc-shadow-md   { --stc-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .18); }
.stc-shadow-lg   { --stc-shadow: 0 2px 4px rgba(16, 24, 40, .06), 0 24px 48px -18px rgba(16, 24, 40, .28); }

/* --- Stile delle card -------------------------------------------------- */

.stc-cards-outlined .stc-card {
	box-shadow: none;
	border-width: 1.5px;
}

.stc-cards-flat .stc-card {
	box-shadow: none;
	border-color: transparent;
	background: transparent;
}

.stc-cards-flat .stc-card-head,
.stc-cards-flat .stc-card-foot {
	border-color: transparent;
	background: transparent;
}

.stc-cards-divided .stc-card {
	box-shadow: none;
	border: 0;
	border-left: 1px solid var(--stc-border);
	border-radius: 0;
	background: transparent;
}

.stc-cards-divided .stc-card:first-child { border-left: 0; }

.stc-cards-divided .stc-card-head,
.stc-cards-divided .stc-card-foot {
	background: transparent;
	border-color: var(--stc-border);
}

.stc-cards-divided .stc-card:hover,
.stc-cards-flat .stc-card:hover {
	transform: none;
	border-color: transparent;
}

/* --- Stile dei pulsanti ------------------------------------------------ */

.stc-btns-outline .stc-btn {
	background: transparent;
	border-color: var(--stc-accent);
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-btns-outline .stc-btn:hover {
	background: var(--stc-accent);
	color: #fff;
}

.stc-btns-soft .stc-btn {
	background: color-mix(in srgb, var(--stc-accent) 14%, transparent);
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-btns-soft .stc-btn:hover {
	background: color-mix(in srgb, var(--stc-accent) 22%, transparent);
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-btns-brand .stc-btn-cta {
	background: var(--stc-brand, var(--stc-accent));
}

/* I pulsanti PDF restano riconoscibili in ogni stile. */
.stc-btns-outline .stc-btn.is-pdf,
.stc-btns-soft .stc-btn.is-pdf,
.stc-btns-brand .stc-btn.is-pdf {
	background: #b42318;
	border-color: #b42318;
	color: #fff;
}

/* --- Elementi nascondibili --------------------------------------------- */

.stc-no-logo .stc-card-logo,
.stc-no-badge .stc-badge,
.stc-no-subtitle .stc-card-sub,
.stc-no-terms .stc-terms,
.stc-no-sections .stc-sec-title { display: none; }

.stc-no-progress .stc-progress { display: none !important; }

.stc-no-tint .stc-card-head { background: none; }

/* --- Barra di confronto non agganciata --------------------------------- */

/* Impostazione «barra non agganciata»: resta in fondo alla pagina. */
.stc-compare-bar.is-static {
	position: static;
	display: block;
	padding: 0;
	margin-top: 16px;
}

.stc-compare-bar.is-static .stc-compare-bar-inner {
	max-width: none;
}

/* =========================================================================
   Console di ricerca
   ========================================================================= */

.stc-console {
	position: relative;
	margin-bottom: 22px;
	padding: 12px;
	border-radius: calc(var(--stc-radius) + 6px);
	background: color-mix(in srgb, var(--stc-surface) 82%, transparent);
	border: 1px solid var(--stc-border);
	backdrop-filter: blur(10px) saturate(1.3);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset, var(--stc-shadow);
}

/* Filo luminoso in alto, del colore dell'operatore scelto. */
.stc-console::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	border-radius: calc(var(--stc-radius) + 6px) calc(var(--stc-radius) + 6px) 0 0;
	background: linear-gradient(90deg, transparent, var(--stc-accent), transparent);
	opacity: .8;
	transition: opacity .3s ease;
}

.stc-console-main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ------------------------------------------------- Selettore operatore */

.stc-seg {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 340px;
	min-width: 0;
	padding: 4px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--stc-text) 5%, transparent);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.stc-seg::-webkit-scrollbar { display: none; }

.stc-seg-glider {
	position: absolute;
	top: 4px;
	left: 0;
	height: calc(100% - 8px);
	width: 0;
	border-radius: 999px;
	background: var(--stc-accent);
	box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--stc-accent) 70%, transparent);
	transition: transform .38s cubic-bezier(.34, 1.2, .38, 1), width .38s cubic-bezier(.34, 1.2, .38, 1), background-color .3s ease;
	pointer-events: none;
	z-index: 0;
}

.stc-seg-item {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--stc-muted);
	font: inherit;
	font-size: .92em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color .25s ease;
}

.stc-seg-item:hover { color: var(--stc-text); }

.stc-seg-item.is-active { color: #fff; }

.stc-seg-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--stc-chip, var(--stc-accent));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stc-chip, var(--stc-accent)) 22%, transparent);
	transition: box-shadow .25s ease;
}

.stc-seg-item.is-active .stc-seg-dot {
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}

.stc-seg-logo {
	max-height: 16px;
	width: auto;
	display: block;
}

.stc-seg-item.is-active .stc-seg-logo { filter: brightness(0) invert(1); }

.stc-seg-plus {
	font-size: .75em;
	font-style: normal;
	font-weight: 700;
	opacity: .65;
}

/* --------------------------------------------------- Ricerca e ordine */

.stc-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 300px;
	min-width: 0;
}

.stc-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 12px;
	height: 42px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.stc-search:focus-within {
	border-color: var(--stc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stc-accent) 18%, transparent);
}

.stc-search svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--stc-muted);
	stroke-width: 2;
	stroke-linecap: round;
}

.stc-search-input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	color: var(--stc-text);
	font: inherit;
	font-size: .92em;
	outline: none;
	padding: 0;
	box-shadow: none;
}

.stc-search-input::-webkit-search-cancel-button { display: none; }

.stc-search-clear {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--stc-text) 10%, transparent);
	color: var(--stc-muted);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.stc-sort {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.stc-sort-select {
	appearance: none;
	-webkit-appearance: none;
	height: 42px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	color: var(--stc-text);
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	cursor: pointer;
	outline: none;
}

.stc-sort-select:focus-visible {
	border-color: var(--stc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stc-accent) 18%, transparent);
}

.stc-sort svg {
	position: absolute;
	right: 12px;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--stc-muted);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

/* -------------------------------------------------------------- Pillole */

.stc-subrow,
.stc-pills {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.stc-subrow[hidden] { display: none !important; }

.stc-subrow {
	animation: stc-slide-in .3s cubic-bezier(.2, .9, .3, 1);
}

@keyframes stc-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.stc-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	color: var(--stc-muted);
	font: inherit;
	font-size: .82em;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.stc-pill:hover {
	color: var(--stc-text);
	border-color: color-mix(in srgb, var(--stc-accent) 50%, var(--stc-border));
}

.stc-pill.is-active {
	color: var(--stc-accent-text, var(--stc-accent));
	border-color: var(--stc-accent);
	background: color-mix(in srgb, var(--stc-accent) 10%, transparent);
}

.stc-pill em {
	font-style: normal;
	font-size: .85em;
	opacity: .65;
}

.stc-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

/* ------------------------------------------------ Riga inferiore */

.stc-console-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.stc-console-foot:empty { display: none; }

.stc-console-right {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

/* Interruttore compatto */

.stc-switch-mini {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .82em;
	font-weight: 600;
	color: var(--stc-muted);
	cursor: pointer;
	user-select: none;
}

.stc-switch-mini input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.stc-switch-track {
	position: relative;
	width: 34px;
	height: 19px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--stc-text) 18%, transparent);
	transition: background-color .25s ease;
}

.stc-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .3);
	transition: transform .25s cubic-bezier(.34, 1.3, .4, 1);
}

.stc-switch-mini input:checked + .stc-switch-track {
	background: var(--stc-accent);
}

.stc-switch-mini input:checked + .stc-switch-track .stc-switch-knob {
	transform: translateX(15px);
}

.stc-switch-mini input:focus-visible + .stc-switch-track {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--stc-accent) 25%, transparent);
}

/* Contatore */

.stc-count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-size: .82em;
	color: var(--stc-muted);
	white-space: nowrap;
}

.stc-count-n {
	font-size: 1.35em;
	font-weight: 800;
	color: var(--stc-text);
	font-variant-numeric: tabular-nums;
}

.stc-count.is-bump .stc-count-n {
	animation: stc-bump .34s cubic-bezier(.34, 1.4, .4, 1);
}

@keyframes stc-bump {
	0%   { transform: translateY(4px) scale(.85); opacity: .3; }
	100% { transform: none; opacity: 1; }
}

/* Azzeramento */

.stc-reset {
	border: 0;
	background: none;
	padding: 4px 2px;
	color: var(--stc-accent-text, var(--stc-accent));
	font: inherit;
	font-size: .82em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.stc-reset[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.stc-seg-glider,
	.stc-switch-knob,
	.stc-subrow { transition: none; animation: none; }
	.stc-count.is-bump .stc-count-n { animation: none; }
}

@media (max-width: 720px) {
	.stc-console { padding: 10px; }
	.stc-console-main { gap: 10px; }
	.stc-seg { flex: 1 1 100%; }
	.stc-tools { flex: 1 1 100%; }
	.stc-sort-select { padding-right: 30px; font-size: .85em; }
	.stc-console-right { width: 100%; margin-left: 0; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
	.stc-pricemode { order: -1; width: 100%; }
	.stc-pricemode-item { flex: 1; text-align: center; }
}

/* ------------------------------------------- Prezzo promozionale e condizioni */

.stc-promo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: -4px 0 10px;
	font-size: 12.5px;
	color: var(--stc-muted);
}

.stc-promo-line {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.stc-promo-line::before {
	content: "";
	width: 6px;
	height: 6px;
	flex: none;
	border-radius: 50%;
	background: var(--stc-brand, var(--stc-accent));
}

.stc-terms-open {
	padding: 2px 9px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-surface);
	color: var(--stc-text);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.stc-terms-open:hover {
	border-color: var(--stc-brand, var(--stc-accent));
	color: var(--stc-brand, var(--stc-accent));
}

.stc-modal-body .stc-terms-content p {
	margin: 0 0 10px;
}

.stc-modal-body .stc-terms-content ul {
	margin: 0 0 10px;
	padding-left: 18px;
}

.stc-price-label {
	display: block;
	width: 100%;
	margin-bottom: 2px;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--stc-muted);
}

.stc-promo-existing::before {
	background: var(--stc-muted);
}

/* --------------------------- Interruttore nuovo cliente / cliente esistente */

.stc-pricemode {
	display: inline-flex;
	padding: 3px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-surface);
}

.stc-pricemode-item {
	border: 0;
	border-radius: 999px;
	padding: 6px 12px;
	background: none;
	color: var(--stc-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.stc-pricemode-item.is-active {
	background: var(--stc-bg);
	color: var(--stc-text);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}

.stc-pricebox[hidden] {
	display: none !important;
}

@media (max-width: 560px) {
	.stc-pricemode {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------- Paesi dentro alla tabella di confronto */

.stc-cell-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	color: var(--stc-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.stc-cell-toggle:hover {
	border-color: var(--stc-accent);
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-cell-toggle i {
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .2s ease;
}

.stc-cell-toggle.is-open i {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.stc-cell-list {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
	max-height: 320px;
	overflow-y: auto;
	font-size: 13px;
}

.stc-cell-list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.stc-cell-list[hidden] {
	display: none;
}

.stc-row-action {
	display: block;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--stc-accent-text, var(--stc-accent));
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/* --- Tabella dei paesi ------------------------------------------------ */

.stc-matrix-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.stc-matrix-diff {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--stc-muted);
}

/* La cella resta una cella di tabella: con display:flex uscirebbe dal
   calcolo delle colonne e la larghezza fissa non varrebbe piu'. */
.stc-matrix th[scope="row"] {
	white-space: normal;
	vertical-align: middle;
}

.stc-matrix th[scope="row"] .stc-flag {
	margin-right: 8px;
	vertical-align: -2px;
}

.stc-matrix td {
	vertical-align: middle;
}

/* La colonna dei paesi e' un elenco di nomi: puo' stare piu' stretta. */
.stc-matrix {
	--stc-cmp-label: 200px;
	--stc-cmp-col: 130px;
}

.stc-matrix td {
	text-align: center;
	font-size: 15px;
}

.stc-matrix td.is-yes { color: #067647; font-weight: 700; }
.stc-matrix td.is-no { color: var(--stc-muted); }

.stc-matrix .stc-matrix-total td,
.stc-matrix .stc-matrix-total th {
	font-weight: 700;
	background: var(--stc-surface);
}

.stc-matrix.only-diff tr.is-common {
	display: none;
}

/* Valore più alto della riga. */

.stc-more {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, #067647 14%, transparent);
	color: #067647;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.stc-table td.is-top {
	font-weight: 600;
}

/* -------------------------------------------- Pulsante «Scopri» su misura */

.stc-btn-cta {
	background: var(--stc-cta-bg, var(--stc-accent));
	color: var(--stc-cta-fg, #fff);
	border-radius: var(--stc-cta-radius, var(--stc-btn-radius));
}

.stc-btns-brand .stc-btn-cta {
	background: var(--stc-cta-bg, var(--stc-brand, var(--stc-accent)));
}

.stc-cta-pill { --stc-cta-radius: 999px; }
.stc-cta-round { --stc-cta-radius: 14px; }
.stc-cta-square { --stc-cta-radius: 0; }

.stc-no-cta .stc-btn-cta {
	display: none !important;
}


/* =========================================================================
   Vestito «SvetiX»: colori presi dal tema del sito
   -------------------------------------------------------------------------
   I valori arrivano dal tema di svetix.ch: rosso di marca #d63131, testo
   #262c47, sfondo di pagina #f4f6fb, card bianche con angoli da 16px e
   pulsanti a pillola. La versione scura e' la stessa tavolozza portata su
   fondo notte, con un rosso piu' chiaro dove fa da testo (sul nero il rosso
   pieno non si legge abbastanza).

   Sono classi, non stili in linea: qualunque colore scelto a mano nelle
   Impostazioni continua a vincere su queste regole.
   ========================================================================= */

.stc-preset-svetix,
.stc-preset-svetix-auto {
	--stc-accent: #d63131;
	--stc-accent-text: #c22a2a;
	--stc-bg: #ffffff;
	--stc-surface: #f4f6fb;
	--stc-border: #e3e7f2;
	--stc-text: #262c47;
	--stc-muted: #6b7291;
	--stc-radius: 16px;
	--stc-btn-radius: 200px;
	--stc-shadow: 0 1px 2px rgba(38, 44, 71, .06), 0 10px 28px -14px rgba(38, 44, 71, .3);
}

.stc-preset-svetix-scuro,
.stc-preset-svetix-auto.stc-preset-is-dark {
	--stc-accent: #d63131;
	--stc-accent-text: #ff6b6b;
	--stc-bg: #171c33;
	--stc-surface: #1f2542;
	--stc-border: #2e3559;
	--stc-text: #e9ecf7;
	--stc-muted: #99a1c2;
	--stc-radius: 16px;
	--stc-btn-radius: 200px;
	--stc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .8);
}

/* «Automatico»: segue l impostazione chiaro/scuro del visitatore. */
@media (prefers-color-scheme: dark) {
	.stc-preset-svetix-auto:not([data-theme="light"]) {
		--stc-accent: #d63131;
		--stc-accent-text: #ff6b6b;
		--stc-bg: #171c33;
		--stc-surface: #1f2542;
		--stc-border: #2e3559;
		--stc-text: #e9ecf7;
		--stc-muted: #99a1c2;
		--stc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .8);
	}
}

/* Il popup vive fuori dal comparatore: prende il vestito da solo. */
.stc-modal.stc-preset-svetix,
.stc-modal.stc-preset-svetix-auto {
	--stc-accent: #d63131;
	--stc-accent-text: #c22a2a;
	--stc-bg: #ffffff;
	--stc-surface: #f4f6fb;
	--stc-border: #e3e7f2;
	--stc-text: #262c47;
	--stc-muted: #6b7291;
	--stc-radius: 16px;
	--stc-btn-radius: 200px;
}

.stc-modal.stc-preset-svetix-scuro {
	--stc-accent: #d63131;
	--stc-accent-text: #ff6b6b;
	--stc-bg: #171c33;
	--stc-surface: #1f2542;
	--stc-border: #2e3559;
	--stc-text: #e9ecf7;
	--stc-muted: #99a1c2;
	--stc-radius: 16px;
	--stc-btn-radius: 200px;
}

@media (prefers-color-scheme: dark) {
	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) {
		--stc-accent: #d63131;
		--stc-accent-text: #ff6b6b;
		--stc-bg: #171c33;
		--stc-surface: #1f2542;
		--stc-border: #2e3559;
		--stc-text: #e9ecf7;
		--stc-muted: #99a1c2;
	}
}

/* Sul fondo scuro il rosso pieno dietro al testo bianco resta leggibile,
   ma il verde del «piu' incluso» va schiarito. */
.stc-preset-svetix-scuro .stc-more,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-more {
	background: rgba(110, 231, 183, .16);
	color: #6ee7b7;
}

.stc-preset-svetix-scuro .stc-table th.is-best,
.stc-preset-svetix-scuro .stc-table td.is-best {
	background: rgba(110, 231, 183, .09);
}

.stc-preset-svetix-scuro .stc-table th.is-best {
	box-shadow: inset 0 3px 0 #6ee7b7;
}

.stc-preset-svetix-scuro .stc-best {
	background: #6ee7b7;
	color: #10281f;
}

@media (prefers-color-scheme: dark) {
	.stc-preset-svetix-auto:not([data-theme="light"]) .stc-more {
		background: rgba(110, 231, 183, .16);
		color: #6ee7b7;
	}

	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) .stc-table th.is-best,
	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) .stc-table td.is-best {
		background: rgba(110, 231, 183, .09);
	}

	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) .stc-table th.is-best {
		box-shadow: inset 0 3px 0 #6ee7b7;
	}

	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) .stc-best {
		background: #6ee7b7;
		color: #10281f;
	}
}


/* =========================================================================
   Scelta della lingua, in cima al comparatore
   ========================================================================= */

.stc-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-bottom: 14px;
}

.stc-topbar .stc-title {
	margin: 0 auto 0 0;
}

.stc-langs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--stc-border);
	border-radius: 999px;
	background: var(--stc-bg);
	box-shadow: var(--stc-shadow);
}

.stc-lang {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--stc-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.stc-lang:hover,
.stc-lang:focus-visible {
	background: var(--stc-surface);
	color: var(--stc-text);
	text-decoration: none;
}

.stc-lang.is-active {
	background: var(--stc-accent);
	color: #fff;
}

.stc-lang.is-active:hover {
	background: var(--stc-accent);
	color: #fff;
}

@media (max-width: 560px) {
	.stc-topbar { justify-content: flex-start; }
	.stc-langs { padding: 3px; }
	.stc-lang { min-width: 36px; height: 28px; padding: 0 9px; font-size: 12px; }
}


/* Sul fondo scuro i marchi con colori molto cupi (il blu notte di Swisscom,
   per dirne uno) sparirebbero: qui vengono schiariti quanto basta per
   leggerli, senza perdere il colore della marca. */

.stc-preset-svetix-scuro .stc-feat-icon,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-feat-icon {
	background: color-mix(in srgb, var(--stc-brand, #ffffff) 30%, transparent);
	color: color-mix(in srgb, var(--stc-brand, #ffffff) 45%, #ffffff);
}

.stc-preset-svetix-scuro .stc-card-operator,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-card-operator {
	background: color-mix(in srgb, var(--stc-brand, var(--stc-accent)) 82%, #ffffff);
}

/* Nel confronto il nome dell operatore prende il colore della marca da un
   attributo in linea: qui lo si schiarisce senza toccarlo. */
.stc-modal.stc-preset-svetix-scuro .stc-table-op {
	color: color-mix(in srgb, var(--stc-th-color, #ffffff) 45%, #ffffff);
}

@media (prefers-color-scheme: dark) {
	.stc-preset-svetix-auto:not([data-theme="light"]) .stc-feat-icon {
		background: color-mix(in srgb, var(--stc-brand, #ffffff) 30%, transparent);
		color: color-mix(in srgb, var(--stc-brand, #ffffff) 45%, #ffffff);
	}

	.stc-preset-svetix-auto:not([data-theme="light"]) .stc-card-operator {
		background: color-mix(in srgb, var(--stc-brand, var(--stc-accent)) 82%, #ffffff);
	}

	.stc-modal.stc-preset-svetix-auto:not([data-theme="light"]) .stc-table-op {
		color: color-mix(in srgb, var(--stc-th-color, #ffffff) 45%, #ffffff);
	}
}


/* ------------------------------- Pulsante «Dettagli» / «Scheda tecnica»

   Con «Scopri» spento questo e' l unico comando della card: deve
   quindi vedersi bene. Fondo pieno, testo e icona bianchi, contrasto
   sempre sopra 4.5:1 sia sul tema chiaro sia su quello scuro. Il rosso
   e' riservato al PDF ufficiale dell operatore.

   Uso .stc-btn.stc-btn-sheet (due classi) cosi' gli stili pulsante
   scelti in amministrazione — contorno, morbido, marchio — non me lo
   svuotano rendendolo illeggibile.                                      */

.stc-btn.stc-btn-sheet {
	width: 100%;
	margin-top: 8px;
	gap: 9px;
	padding: 12px 16px;
	background: var(--stc-brand-btn, var(--stc-brand, var(--stc-accent)));
	border: 1px solid transparent;
	color: var(--stc-brand-ink, #fff);
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .16);
}

.stc-btn.stc-btn-sheet:hover {
	filter: brightness(1.1);
	color: var(--stc-brand-ink, #fff);
}

.stc-btn.stc-btn-sheet:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--stc-brand-btn, var(--stc-accent)) 45%, #ffffff);
	outline-offset: 2px;
}

.stc-sheet-ico {
	flex: 0 0 auto;
	color: currentColor;
	opacity: 1;
	transition: transform .16s ease;
}

.stc-btn-sheet:hover .stc-sheet-ico {
	transform: translateY(-1px);
}

/* Quando porta al PDF ufficiale dell operatore: rosso pieno, bianco sopra. */
.stc-btn.stc-btn-sheet.is-pdf {
	background: #b42318;
	border-color: #b42318;
	color: #fff;
}

.stc-btn.stc-btn-sheet.is-pdf .stc-sheet-ico {
	color: #fff;
}

.stc-btn.stc-btn-sheet.is-pdf:focus-visible {
	outline-color: rgba(180, 35, 24, .5);
}

/* Sul tema scuro il rosso pieno resta leggibile ma lo schiarisco un filo
   per staccare dal fondo della card. */
@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]) .stc-btn.stc-btn-sheet.is-pdf {
		background: #c9291c;
		border-color: #c9291c;
	}
}

.stc-compare[data-theme="dark"] .stc-btn.stc-btn-sheet.is-pdf,
.stc-preset-svetix-scuro .stc-btn.stc-btn-sheet.is-pdf,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-btn.stc-btn-sheet.is-pdf {
	background: #c9291c;
	border-color: #c9291c;
}

/* Sul fondo scuro i marchi molto scuri (Swisscom, Quickline, Lidl) si
   confondono con la card: un filo di bordo chiaro li stacca senza
   toccare il colore del marchio. */
.stc-compare[data-theme="dark"] .stc-btn.stc-btn-sheet,
.stc-preset-svetix-scuro .stc-btn.stc-btn-sheet,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-btn.stc-btn-sheet {
	border-color: color-mix(in srgb, var(--stc-brand-ink, #ffffff) 28%, transparent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]) .stc-btn.stc-btn-sheet {
		border-color: color-mix(in srgb, var(--stc-brand-ink, #ffffff) 28%, transparent);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	}
}

.stc-no-cta .stc-btn.stc-btn-sheet {
	margin-top: 0;
}


/* ------------------------------------------- Riquadro «Velocita e limiti»

   Non sono servizi inclusi ma dati tecnici: la spunta verde direbbe una
   cosa sbagliata, quindi al suo posto va un pallino neutro.            */

/* Le righe che rimandano a un prezzo da pagare a parte non portano la
   spunta: quella dice «compreso», e qui non lo è. */
.stc-feat.is-info .stc-feat-icon,
.stc-sec-speed .stc-feat-icon {
	position: relative;
	background: color-mix(in srgb, var(--stc-muted) 16%, transparent);
	color: transparent;
	font-size: 0;
}

.stc-feat.is-info .stc-feat-icon::after,
.stc-sec-speed .stc-feat-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--stc-muted);
}

/* L etichetta e' in grassetto e sbiadita, il valore che segue torna del
   colore del testo: e' il dato che conta davvero. */
.stc-sec-speed .stc-feat-text {
	color: var(--stc-text);
}

.stc-sec-speed .stc-feat-text strong {
	color: var(--stc-muted);
	font-weight: 600;
}


/* =========================================================================
   Vestito «SvetiX 2026»

   I colori sono quelli che svetix.ch usa davvero oggi, letti dalle sue
   variabili: fondo verde acqua chiarissimo #E9F6F6, card bianche, testo
   verde-nero #0A1616, rosso di marca #f23131, blu petrolio #155E75,
   angoli da 14px e pulsanti da 11px.

   Due cose le ho cambiate apposta, perche' il sito le usa su testi grandi
   mentre qui finiscono su righe piccole:

   - Il rosso #f23131 col bianco sopra fa 3.99:1, sotto la soglia. Come
     fondo di un pulsante diventa #CC1F1F (5.55:1) e come testo #A72222
     (7.25:1, la soglia alta).
   - Il grigio sbiadito passa da #4B6666 a #3F5C5C: da 6.19:1 a 7.25:1.

   Nessun testo di questo vestito sta sotto 5:1, e il testo normale sta
   sopra 7:1 su tutti e due i fondi.
   ========================================================================= */

.stc-preset-svetix2,
.stc-preset-svetix2-auto {
	--stc-accent: #cc1f1f;
	--stc-accent-text: #a72222;
	--stc-cta-bg: #155e75;
	--stc-bg: #ffffff;
	--stc-surface: #e9f6f6;
	--stc-border: #a9cccc;
	--stc-text: #0a1616;
	--stc-muted: #3f5c5c;
	--stc-radius: 14px;
	--stc-btn-radius: 11px;
	--stc-price-size: 30px;
	--stc-shadow: 0 1px 2px rgba(10, 38, 38, .05), 0 8px 24px rgba(10, 38, 38, .07);
}

.stc-preset-svetix2-scuro,
.stc-preset-svetix2-auto.stc-preset-is-dark {
	--stc-accent: #c51d1d;
	--stc-accent-text: #ff8f8f;
	--stc-cta-bg: #1a6e88;
	--stc-bg: #0e2626;
	--stc-surface: #16302f;
	--stc-border: #2e5555;
	--stc-text: #e8f5f5;
	--stc-muted: #a6c6c6;
	--stc-radius: 14px;
	--stc-btn-radius: 11px;
	--stc-price-size: 30px;
	--stc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .8);
}

@media (prefers-color-scheme: dark) {
	.stc-preset-svetix2-auto:not([data-theme="light"]) {
		--stc-accent: #c51d1d;
		--stc-accent-text: #ff8f8f;
		--stc-cta-bg: #1a6e88;
		--stc-bg: #0e2626;
		--stc-surface: #16302f;
		--stc-border: #2e5555;
		--stc-text: #e8f5f5;
		--stc-muted: #a6c6c6;
		--stc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -14px rgba(0, 0, 0, .8);
	}
}

/* Il popup vive fuori dal comparatore: prende il vestito da solo. */
.stc-modal.stc-preset-svetix2,
.stc-modal.stc-preset-svetix2-auto {
	--stc-accent: #cc1f1f;
	--stc-accent-text: #a72222;
	--stc-bg: #ffffff;
	--stc-surface: #e9f6f6;
	--stc-border: #a9cccc;
	--stc-text: #0a1616;
	--stc-muted: #3f5c5c;
	--stc-radius: 14px;
	--stc-btn-radius: 11px;
}

.stc-modal.stc-preset-svetix2-scuro {
	--stc-accent: #c51d1d;
	--stc-accent-text: #ff8f8f;
	--stc-bg: #0e2626;
	--stc-surface: #16302f;
	--stc-border: #2e5555;
	--stc-text: #e8f5f5;
	--stc-muted: #a6c6c6;
	--stc-radius: 14px;
	--stc-btn-radius: 11px;
}

@media (prefers-color-scheme: dark) {
	.stc-modal.stc-preset-svetix2-auto:not([data-theme="light"]) {
		--stc-accent: #c51d1d;
		--stc-accent-text: #ff8f8f;
		--stc-bg: #0e2626;
		--stc-surface: #16302f;
		--stc-border: #2e5555;
		--stc-text: #e8f5f5;
		--stc-muted: #a6c6c6;
	}
}

/* I caratteri del sito: Space Grotesk per i titoli, Inter per il resto.
   Se non sono caricati si scende sui caratteri di sistema, senza scarti. */
.stc-preset-svetix2,
.stc-preset-svetix2-auto,
.stc-preset-svetix2-scuro,
.stc-modal.stc-preset-svetix2,
.stc-modal.stc-preset-svetix2-auto,
.stc-modal.stc-preset-svetix2-scuro {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.stc-preset-svetix2 .stc-card-name,
.stc-preset-svetix2-auto .stc-card-name,
.stc-preset-svetix2-scuro .stc-card-name,
.stc-preset-svetix2 .stc-title,
.stc-preset-svetix2-auto .stc-title,
.stc-preset-svetix2-scuro .stc-title,
.stc-modal.stc-preset-svetix2 .stc-modal-title,
.stc-modal.stc-preset-svetix2-auto .stc-modal-title,
.stc-modal.stc-preset-svetix2-scuro .stc-modal-title {
	font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: -.022em;
}

/* Inter e' un filo piu' larga del carattere di sistema e il blocco del
   prezzo, dove c'e' anche l'importo barrato, andava a capo. Valuta e
   periodo stanno su una riga sola e il numero scende di un paio di
   punti: cosi' «24.95 CHF /mese» resta tutto in linea. */
.stc-preset-svetix2 .stc-price,
.stc-preset-svetix2-auto .stc-price,
.stc-preset-svetix2-scuro .stc-price {
	gap: 6px;
}

.stc-preset-svetix2 .stc-price-meta,
.stc-preset-svetix2-auto .stc-price-meta,
.stc-preset-svetix2-scuro .stc-price-meta {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	white-space: nowrap;
}

/* Il verde del «piu' incluso» sul fondo scuro va schiarito. */
.stc-preset-svetix2-scuro .stc-more,
.stc-preset-svetix2-auto.stc-preset-is-dark .stc-more {
	background: rgba(110, 231, 183, .16);
	color: #6ee7b7;
}


/* =========================================================================
   Vestito «Elegante» — chiaro, scuro e neutro

   Non e' solo una tavolozza: e' un restyling. Cambia il respiro (piu'
   aria fra le cose), il carattere, il fondo, il taglio delle card e il
   modo in cui i titoli di sezione tagliano la riga.

   L idea guida viene dalla pagina «Novita' di WordPress»: molto bianco,
   titoli decisi, colore usato con parsimonia — una riga sottile qui, un
   pulsante pieno la', e basta.

   I colori sono quelli del catalogo di svetix.ch, presi dalle sue
   variabili una per una: fondo #F5FAFC, card bianche, bordo #D9E9EF,
   testo #0F2733, sbiadito #3F6373 e la sfumatura azzurro-ciano dei suoi
   pulsanti. La versione scura usa la seconda pelle che il sito ha gia'
   nelle sue regole: fondo #0F0E17, card #1A1826, bordo #322F45 e la
   sfumatura viola-ciano.

   Come sul sito, il tondo accanto a ogni titolo di sezione e' sempre lo
   stesso: una sfumatura sola per tutte le card. Il colore dell operatore
   resta solo nella riga in cima e nella pastiglia con il suo nome.

   Tre versioni:
   - chiaro   il catalogo del sito, tale e quale
   - scuro    la pelle scura del sito
   - neutro   la stessa struttura con il colore tolto, per chi lo vuole
              silenzioso: caratteri di sistema e niente sfumature

   Tutti i testi stanno sopra 5.6:1, quasi tutti sopra 7:1.
   ========================================================================= */

.stc-preset-elegante,
.stc-preset-elegante-auto {
	--stc-accent: #0369a1;
	--stc-accent-text: #0369a1;
	--stc-cta-bg: #0369a1;
	--stc-bg: #ffffff;
	--stc-surface: #eaf4f8;
	--stc-border: #d9e9ef;
	--stc-text: #0f2733;
	--stc-muted: #3f6373;
	--stc-eleg-page: #f5fafc;
	--stc-eleg-glow: rgba(14, 165, 233, .08);
	--stc-eleg-hair: #d9e9ef;
	--stc-eleg-grad: linear-gradient(135deg, #0ea5e9 0%, #0369a1 55%, #06b6d4 100%);
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
	--stc-price-size: 29px;
	--stc-gap: 20px;
	--stc-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -16px rgba(17, 24, 39, .18);
}

.stc-preset-elegante-scuro,
.stc-preset-elegante-auto.stc-preset-is-dark {
	--stc-accent: #4f46e5;
	--stc-accent-text: #a5b4fc;
	--stc-cta-bg: #4f46e5;
	--stc-bg: #1a1826;
	--stc-surface: #211f31;
	--stc-border: #322f45;
	--stc-text: #eceaf6;
	--stc-muted: #a9a3c4;
	--stc-eleg-page: #0f0e17;
	--stc-eleg-glow: rgba(139, 92, 246, .10);
	--stc-eleg-hair: #322f45;
	--stc-eleg-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 100%);
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
	--stc-price-size: 29px;
	--stc-gap: 20px;
	--stc-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 16px 40px -20px rgba(0, 0, 0, .9);
}

@media (prefers-color-scheme: dark) {
	.stc-preset-elegante-auto:not([data-theme="light"]) {
		--stc-accent: #c0303a;
		--stc-accent-text: #ff8a8a;
		--stc-cta-bg: #e5e7eb;
		--stc-bg: #14171c;
		--stc-surface: #0b0d10;
		--stc-border: #262b33;
		--stc-text: #f4f5f7;
		--stc-muted: #a3aab6;
		--stc-eleg-page: #0b0d10;
		--stc-eleg-glow: rgba(255, 138, 138, .06);
		--stc-eleg-hair: #262b33;
		--stc-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 16px 40px -20px rgba(0, 0, 0, .9);
	}
}

.stc-preset-elegante-neutro {
	--stc-accent: #2a4a57;
	--stc-accent-text: #2a4a57;
	--stc-cta-bg: #2a4a57;
	--stc-bg: #ffffff;
	--stc-surface: #edf1f3;
	--stc-border: #e1e7ea;
	--stc-text: #0f2733;
	--stc-muted: #3f6373;
	--stc-eleg-page: #f7f9fa;
	--stc-eleg-glow: rgba(15, 39, 51, .05);
	--stc-eleg-hair: #e1e7ea;
	--stc-eleg-grad: linear-gradient(135deg, #43626f 0%, #2a4a57 55%, #1c3742 100%);
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
	--stc-price-size: 29px;
	--stc-gap: 20px;
	--stc-shadow: 0 1px 2px rgba(24, 24, 27, .05), 0 12px 32px -16px rgba(24, 24, 27, .16);
}

/* Il popup prende il vestito da solo, vive fuori dal comparatore. */
.stc-modal.stc-preset-elegante,
.stc-modal.stc-preset-elegante-auto {
	--stc-accent: #0369a1;
	--stc-accent-text: #0369a1;
	--stc-bg: #ffffff;
	--stc-surface: #eaf4f8;
	--stc-border: #d9e9ef;
	--stc-text: #0f2733;
	--stc-muted: #3f6373;
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
}

.stc-modal.stc-preset-elegante-scuro {
	--stc-accent: #4f46e5;
	--stc-accent-text: #a5b4fc;
	--stc-bg: #1a1826;
	--stc-surface: #211f31;
	--stc-border: #322f45;
	--stc-text: #eceaf6;
	--stc-muted: #a9a3c4;
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
}

.stc-modal.stc-preset-elegante-neutro {
	--stc-accent: #2a4a57;
	--stc-accent-text: #2a4a57;
	--stc-bg: #ffffff;
	--stc-surface: #edf1f3;
	--stc-border: #e1e7ea;
	--stc-text: #0f2733;
	--stc-muted: #3f6373;
	--stc-radius: 18px;
	--stc-btn-radius: 12px;
}

@media (prefers-color-scheme: dark) {
	.stc-modal.stc-preset-elegante-auto:not([data-theme="light"]) {
		--stc-accent: #c0303a;
		--stc-accent-text: #ff8a8a;
		--stc-bg: #14171c;
		--stc-surface: #0b0d10;
		--stc-border: #262b33;
		--stc-text: #f4f5f7;
		--stc-muted: #a3aab6;
	}
}

/* --- Il carattere ---------------------------------------------------- */

.stc-preset-elegante,
.stc-preset-elegante-auto,
.stc-preset-elegante-scuro,
.stc-modal.stc-preset-elegante,
.stc-modal.stc-preset-elegante-auto,
.stc-modal.stc-preset-elegante-scuro {
	font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Il neutro non chiede niente a nessuno: caratteri di sistema. */
.stc-preset-elegante-neutro,
.stc-modal.stc-preset-elegante-neutro {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.stc-preset-elegante .stc-card-name,
.stc-preset-elegante-auto .stc-card-name,
.stc-preset-elegante-scuro .stc-card-name,
.stc-preset-elegante-neutro .stc-card-name {
	font-size: 20px;
	font-weight: 650;
	letter-spacing: -.021em;
	line-height: 1.25;
}

/* I titoli nel carattere del sito. Il neutro resta sui caratteri di
   sistema: e' il suo scopo. */
.stc-preset-elegante .stc-card-name,
.stc-preset-elegante-auto .stc-card-name,
.stc-preset-elegante-scuro .stc-card-name,
.stc-preset-elegante .stc-title,
.stc-preset-elegante-auto .stc-title,
.stc-preset-elegante-scuro .stc-title,
.stc-modal.stc-preset-elegante .stc-modal-title,
.stc-modal.stc-preset-elegante-auto .stc-modal-title,
.stc-modal.stc-preset-elegante-scuro .stc-modal-title {
	font-family: "Space Grotesk", Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.stc-preset-elegante .stc-title,
.stc-preset-elegante-auto .stc-title,
.stc-preset-elegante-scuro .stc-title,
.stc-preset-elegante-neutro .stc-title,
.stc-modal.stc-preset-elegante .stc-modal-title,
.stc-modal.stc-preset-elegante-auto .stc-modal-title,
.stc-modal.stc-preset-elegante-scuro .stc-modal-title,
.stc-modal.stc-preset-elegante-neutro .stc-modal-title {
	font-weight: 650;
	letter-spacing: -.025em;
}

.stc-preset-elegante .stc-price-value,
.stc-preset-elegante-auto .stc-price-value,
.stc-preset-elegante-scuro .stc-price-value,
.stc-preset-elegante-neutro .stc-price-value {
	font-weight: 700;
	letter-spacing: -.032em;
	font-variant-numeric: tabular-nums;
}

.stc-preset-elegante .stc-price,
.stc-preset-elegante-auto .stc-price,
.stc-preset-elegante-scuro .stc-price,
.stc-preset-elegante-neutro .stc-price {
	gap: 6px;
}

/* Valuta e periodo in colonna accanto al numero: cosi' non e' il caso a
   decidere se vanno a capo, e la colonna dei prezzi resta allineata
   anche quando c'e' l'importo barrato e l'etichetta sopra. */
.stc-preset-elegante .stc-price-meta,
.stc-preset-elegante-auto .stc-price-meta,
.stc-preset-elegante-scuro .stc-price-meta,
.stc-preset-elegante-neutro .stc-price-meta {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	line-height: 1.2;
	white-space: nowrap;
}

.stc-preset-elegante .stc-feat,
.stc-preset-elegante-auto .stc-feat,
.stc-preset-elegante-scuro .stc-feat,
.stc-preset-elegante-neutro .stc-feat {
	font-size: 14.5px;
	line-height: 1.55;
}

/* --- Il fondo -------------------------------------------------------- */

/* Il comparatore diventa un pannello con un po' d aria intorno, invece
   di stare appoggiato sulla pagina. Sopra, un alone appena percepibile
   nel colore dell accento: si vede solo di sbieco, ed e' quello che
   toglie l aria da «foglio di calcolo». */
.stc-preset-elegante,
.stc-preset-elegante-auto,
.stc-preset-elegante-scuro,
.stc-preset-elegante-neutro {
	padding: clamp(18px, 3vw, 32px);
	border-radius: 26px;
	background-color: var(--stc-eleg-page);
	background-image:
		radial-gradient(120% 80% at 8% -10%, var(--stc-eleg-glow) 0%, transparent 62%),
		radial-gradient(90% 60% at 100% 0%, var(--stc-eleg-glow) 0%, transparent 55%);
}

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

.stc-preset-elegante .stc-card,
.stc-preset-elegante-auto .stc-card,
.stc-preset-elegante-scuro .stc-card,
.stc-preset-elegante-neutro .stc-card {
	overflow: hidden;
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease;
}

/* Una riga sottile in cima, nel colore dell operatore: e' il solo posto
   dove la marca colora la card. */
.stc-preset-elegante .stc-card::before,
.stc-preset-elegante-auto .stc-card::before,
.stc-preset-elegante-scuro .stc-card::before,
.stc-preset-elegante-neutro .stc-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--stc-gradient);
	opacity: .9;
}

.stc-preset-elegante .stc-card:hover,
.stc-preset-elegante-auto .stc-card:hover,
.stc-preset-elegante-scuro .stc-card:hover,
.stc-preset-elegante-neutro .stc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(17, 24, 39, .05), 0 22px 48px -20px rgba(17, 24, 39, .28);
}

@media (prefers-reduced-motion: reduce) {
	.stc-preset-elegante .stc-card,
	.stc-preset-elegante-auto .stc-card,
	.stc-preset-elegante-scuro .stc-card,
	.stc-preset-elegante-neutro .stc-card {
		transition: none;
	}

	.stc-preset-elegante .stc-card:hover,
	.stc-preset-elegante-auto .stc-card:hover,
	.stc-preset-elegante-scuro .stc-card:hover,
	.stc-preset-elegante-neutro .stc-card:hover {
		transform: none;
	}
}

/* --- I titoli di sezione --------------------------------------------- */

/* Il tondo, il titolo, e una riga sottile che arriva fino in fondo: e'
   il taglio da rivista, e da solo cambia la faccia alla card. */
.stc-preset-elegante .stc-sec-title,
.stc-preset-elegante-auto .stc-sec-title,
.stc-preset-elegante-scuro .stc-sec-title,
.stc-preset-elegante-neutro .stc-sec-title {
	margin-bottom: 10px;
	font-size: 10.5px;
	letter-spacing: .1em;
}

.stc-preset-elegante .stc-sec-title::after,
.stc-preset-elegante-auto .stc-sec-title::after,
.stc-preset-elegante-scuro .stc-sec-title::after,
.stc-preset-elegante-neutro .stc-sec-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--stc-eleg-hair);
}

.stc-preset-elegante .stc-sec-badge,
.stc-preset-elegante-auto .stc-sec-badge,
.stc-preset-elegante-scuro .stc-sec-badge,
.stc-preset-elegante-neutro .stc-sec-badge {
	width: 26px;
	height: 26px;
}

.stc-preset-elegante .stc-sec-badge svg,
.stc-preset-elegante-auto .stc-sec-badge svg,
.stc-preset-elegante-scuro .stc-sec-badge svg,
.stc-preset-elegante-neutro .stc-sec-badge svg {
	width: 13px;
	height: 13px;
}

/* Nel neutro il tondo non e' colorato: grafite pieno, segno chiaro. */
.stc-preset-elegante-neutro .stc-card {
	--stc-gradient: linear-gradient(135deg, #43626f 0%, #2a4a57 55%, #1c3742 100%);
	--stc-sec-badge-ink: #ffffff;
}

/* --- I pulsanti ------------------------------------------------------ */

.stc-preset-elegante .stc-btn,
.stc-preset-elegante-auto .stc-btn,
.stc-preset-elegante-scuro .stc-btn,
.stc-preset-elegante-neutro .stc-btn {
	padding: 12px 18px;
	font-weight: 620;
	letter-spacing: .005em;
}

/* Nel neutro anche il pulsante della scheda e' grafite: niente marca. */
.stc-preset-elegante-neutro .stc-btn.stc-btn-sheet {
	background: #2a4a57;
	border-color: #2a4a57;
	color: #ffffff;
}

.stc-preset-elegante-neutro .stc-btn.stc-btn-sheet.is-pdf {
	background: #43626f;
	border-color: #43626f;
}

/* --- Il verde del «piu' incluso» sul fondo scuro ---------------------- */

.stc-preset-elegante-scuro .stc-more,
.stc-preset-elegante-auto.stc-preset-is-dark .stc-more {
	background: rgba(110, 231, 183, .16);
	color: #6ee7b7;
}

/* --- Il taglio pulito della testata ---------------------------------- */

/* Via la velatura colorata dietro al nome dell abbonamento: con la riga
   sottile gia' in cima alla card faceva doppione, e su quattro card
   affiancate era la cosa che sporcava di piu'. */
.stc-preset-elegante .stc-card-head,
.stc-preset-elegante-auto .stc-card-head,
.stc-preset-elegante-scuro .stc-card-head,
.stc-preset-elegante-neutro .stc-card-head {
	padding: 24px 22px 16px;
	background: none;
	border-bottom-color: var(--stc-eleg-hair);
}

.stc-preset-elegante .stc-card-operator,
.stc-preset-elegante-auto .stc-card-operator,
.stc-preset-elegante-scuro .stc-card-operator,
.stc-preset-elegante-neutro .stc-card-operator {
	border-radius: 999px;
	padding: 4px 11px;
	font-size: 10.5px;
	letter-spacing: .06em;
}

/* --- Il neutro toglie il colore anche dove lo mette l operatore ------- */

.stc-preset-elegante-neutro .stc-card-operator,
.stc-preset-elegante-neutro .stc-badge {
	background: #2a4a57;
	color: #ffffff;
}

.stc-preset-elegante-neutro .stc-feat-icon {
	background: rgba(42, 74, 87, .12);
	color: #2a4a57;
}

.stc-preset-elegante-neutro .stc-card {
	--stc-info-tint: #2a4a57;
	--stc-info-ink: #ffffff;
	--stc-brand-btn: #2a4a57;
	--stc-brand-ink: #ffffff;
}

.stc-preset-elegante-neutro .stc-popup-link {
	color: #2a4a57;
}

/* Sul fondo scuro la spunta di ogni riga usava il colore pieno della
   marca: sul blu notte di Swisscom spariva. Prende la versione
   schiarita, la stessa che usa il tondo di sezione. */
.stc-compare[data-theme="dark"] .stc-feat-icon,
.stc-preset-svetix-scuro .stc-feat-icon,
.stc-preset-svetix2-scuro .stc-feat-icon,
.stc-preset-elegante-scuro .stc-feat-icon,
.stc-preset-svetix-auto.stc-preset-is-dark .stc-feat-icon,
.stc-preset-svetix2-auto.stc-preset-is-dark .stc-feat-icon,
.stc-preset-elegante-auto.stc-preset-is-dark .stc-feat-icon {
	background: color-mix(in srgb, var(--stc-brand-lite, var(--stc-accent)) 22%, transparent);
	color: var(--stc-brand-lite, var(--stc-accent));
}

@media (prefers-color-scheme: dark) {
	.stc-compare:not([data-theme="light"]) .stc-feat-icon {
		background: color-mix(in srgb, var(--stc-brand-lite, var(--stc-accent)) 22%, transparent);
		color: var(--stc-brand-lite, var(--stc-accent));
	}
}

/* --- Come sul sito: una sfumatura sola, non una per operatore -------- */

/* Nelle pagine dei cellulari il tondo accanto a ogni titolo e' sempre lo
   stesso, non cambia colore per marca. Qui si fa uguale: il colore
   dell operatore resta nella riga in cima alla card e nella pastiglia
   con il suo nome, e tutto il resto parla con la voce del sito. */
.stc-preset-elegante .stc-sec-badge,
.stc-preset-elegante-auto .stc-sec-badge,
.stc-preset-elegante-scuro .stc-sec-badge,
.stc-preset-elegante-neutro .stc-sec-badge {
	background: var(--stc-eleg-grad);
	color: #ffffff;
}

.stc-preset-elegante .stc-feat-icon,
.stc-preset-elegante-auto .stc-feat-icon,
.stc-preset-elegante-scuro .stc-feat-icon,
.stc-preset-elegante-neutro .stc-feat-icon {
	background: color-mix(in srgb, var(--stc-accent) 14%, transparent);
	color: var(--stc-accent-text, var(--stc-accent));
}

.stc-preset-elegante .stc-card,
.stc-preset-elegante-auto .stc-card,
.stc-preset-elegante-scuro .stc-card,
.stc-preset-elegante-neutro .stc-card {
	--stc-info-tint: var(--stc-accent-text, var(--stc-accent));
	--stc-info-ink: #ffffff;
	--stc-gradient: var(--stc-eleg-grad);
}

.stc-preset-elegante-scuro .stc-card,
.stc-preset-elegante-auto.stc-preset-is-dark .stc-card {
	--stc-info-ink: #1a1826;
}

/* La riga in cima resta la firma dell operatore: e' l'unico punto dove
   la marca colora la card, come «APPLE» sulle schede dei cellulari. */
.stc-preset-elegante .stc-card::before,
.stc-preset-elegante-auto .stc-card::before,
.stc-preset-elegante-scuro .stc-card::before,
.stc-preset-elegante-neutro .stc-card::before {
	background: var(--stc-brand-btn, var(--stc-brand, var(--stc-accent)));
}

/* Nel neutro anche quella riga si spegne: resta un filo grafite. */
.stc-preset-elegante-neutro .stc-card::before {
	background: #2a4a57;
}

/* La pastiglia con il nome dell operatore, come i badge del sito:
   pastiglia scura translucida, testo bianco. */
.stc-preset-elegante .stc-card-operator,
.stc-preset-elegante-auto .stc-card-operator {
	background: rgba(15, 39, 51, .82);
	color: #ffffff;
}

.stc-preset-elegante-scuro .stc-card-operator,
.stc-preset-elegante-auto.stc-preset-is-dark .stc-card-operator {
	background: rgba(236, 234, 246, .14);
	color: #eceaf6;
}

/* Il pulsante principale prende la sfumatura del sito, con l'alone
   colorato sotto che usa lui. */
.stc-preset-elegante .stc-btn.stc-btn-sheet:not(.is-pdf),
.stc-preset-elegante-auto .stc-btn.stc-btn-sheet:not(.is-pdf),
.stc-preset-elegante-scuro .stc-btn.stc-btn-sheet:not(.is-pdf) {
	background: var(--stc-eleg-grad);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--stc-accent) 55%, transparent);
}

.stc-preset-elegante .stc-btn.stc-btn-sheet:not(.is-pdf):hover,
.stc-preset-elegante-auto .stc-btn.stc-btn-sheet:not(.is-pdf):hover,
.stc-preset-elegante-scuro .stc-btn.stc-btn-sheet:not(.is-pdf):hover {
	color: #ffffff;
}

/* L'importo barrato va sulla sua riga: cosi' il numero grande e la sua
   valuta stanno sempre insieme, invece di spezzarsi quando la card e'
   stretta. */
.stc-preset-elegante .stc-price-old,
.stc-preset-elegante-auto .stc-price-old,
.stc-preset-elegante-scuro .stc-price-old,
.stc-preset-elegante-neutro .stc-price-old {
	flex: 0 0 100%;
	margin-bottom: -2px;
}