/* ---------------------------------------------------------------
   WpStoreWizard — colori, caratteri e cornici.

   I colori vengono dall'icona del prodotto: il rosso è il 42% dei
   pixel, il giallo è quello delle stelle. Sono dichiarati anche
   come variabili, così si possono richiamare da Elementor.
   --------------------------------------------------------------- */

:root {
	--wsw-rosso:        #be1622;
	--wsw-rosso-scuro:  #9a111b;
	--wsw-rosso-tenue:  #fbecee;
	--wsw-giallo:       #fecf00;
	--wsw-inchiostro:   #12161c;
	--wsw-grigio:       #59626d;
	--wsw-grigio-chiaro:#f5f7f8;
	--wsw-bordo:        #dde3e7;

	--wsw-ombra-schermata: 0 1px 1px rgba(18,22,28,.04), 0 12px 32px rgba(18,22,28,.10), 0 32px 64px rgba(18,22,28,.06);
}

/* --- caratteri auto-ospitati ----------------------------------- */

@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plex-sans-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/plex-sans-600.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/plex-sans-700.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/plex-mono-400.woff2") format("woff2");
}

/* ---------------------------------------------------------------
   CORNICI PER LE SCHERMATE

   Si applicano da Elementor: seleziona il widget Immagine, apri
   Avanzate → Classi CSS e scrivi una di queste:

       wsw-cornice wsw-cornice--excel
       wsw-cornice wsw-cornice--browser

   La didascalia del widget, se c'è, diventa la fascia in fondo.
   --------------------------------------------------------------- */

.wsw-cornice {
	position: relative;
	padding-top: 2.25rem;
	border: 1px solid var(--wsw-bordo);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wsw-grigio-chiaro);
	box-shadow: var(--wsw-ombra-schermata);
}

.wsw-cornice::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2.25rem;
	background: var(--wsw-grigio-chiaro);
	border-bottom: 1px solid var(--wsw-bordo);
	z-index: 1;
}

.wsw-cornice::after {
	content: "";
	position: absolute;
	top: 1.125rem;
	left: .85rem;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	transform: translateY(-50%);
	background: var(--wsw-bordo);
	box-shadow: .85rem 0 0 var(--wsw-bordo), 1.7rem 0 0 var(--wsw-bordo);
	z-index: 2;
}

/* la barra di Excel resta verde: quella finestra è di Microsoft,
   non nostra. Colorarla di rosso direbbe una cosa falsa. */
.wsw-cornice--excel::before {
	background: #1f6f4a0d;
	border-bottom-color: #1f6f4a26;
}

.wsw-cornice img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}
.wsw-cornice figure { margin: 0; }

.wsw-cornice figcaption,
.wsw-cornice .widget-image-caption {
	margin: 0;
	padding: .7rem .9rem;
	background: #fff;
	border-top: 1px solid var(--wsw-bordo);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wsw-grigio);
	text-align: left;
}
.wsw-cornice figcaption strong,
.wsw-cornice .widget-image-caption strong {
	color: var(--wsw-inchiostro);
	font-weight: 600;
}

/* La didascalia: sulle pagine atomiche l'immagine non ne ha una
   nativa, quindi si scrive in un paragrafo sotto la cornice e gli si
   mette questa classe. Sulle pagine classiche basta la didascalia
   del widget Immagine, che diventa la fascia in fondo alla finestra. */

.wsw-didascalia {
	margin-top: .75rem;
	padding-left: .9rem;
	border-left: 2px solid var(--wsw-rosso);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wsw-grigio);
}
.wsw-didascalia strong {
	color: var(--wsw-inchiostro);
	font-weight: 600;
}

/* --- riquadro nota --------------------------------------------- */

.wsw-nota {
	border-left: 3px solid var(--wsw-rosso);
	background: var(--wsw-rosso-tenue);
	padding: 1.25rem 2rem;
	border-radius: 0 6px 6px 0;
}
.wsw-nota > *:last-child { margin-bottom: 0; }

/* --- occhiello -------------------------------------------------- */

.wsw-occhiello {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .8125rem;
	color: var(--wsw-rosso);
}

/* --- indice della documentazione -------------------------------- */

.wsw-indice { font-size: .9375rem; }
@media (min-width: 900px) {
	.wsw-indice { position: sticky; top: 6rem; }
}
.wsw-indice ol { list-style: none; margin: 0; padding: 0; }
.wsw-indice li { margin: 0; }
.wsw-indice a {
	display: block;
	padding: .35rem 0 .35rem .8rem;
	border-left: 2px solid var(--wsw-bordo);
	color: var(--wsw-grigio);
	text-decoration: none;
}
.wsw-indice a:hover,
.wsw-indice a[aria-current="true"] {
	border-left-color: var(--wsw-rosso);
	color: var(--wsw-inchiostro);
}
.wsw-docs__contenuto :is(h2, h3)[id] { scroll-margin-top: 6rem; }

/* --- codici e chiavi -------------------------------------------- */

code, kbd, samp {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
	background: var(--wsw-grigio-chiaro);
	border: 1px solid var(--wsw-bordo);
	border-radius: 4px;
	padding: .1em .35em;
}

/* chi preferisce meno movimento non deve subire i video in loop */
@media (prefers-reduced-motion: reduce) {
	.wsw-cornice video { display: none; }
}

/* ---------------------------------------------------------------
   Testata.

   La disposizione ora la fa la struttura atomica del modello. Qui
   resta solo il menu, che è ancora un widget classico e nasce con
   flex-wrap:wrap: con quattro voci andrebbe a capo.
   --------------------------------------------------------------- */

/* Elementor dichiara flex-wrap:wrap con due classi: per vincere
   serve pari specificità, altrimenti la regola non passa. */
header .elementor-nav-menu--layout-horizontal ul.elementor-nav-menu,
header nav.elementor-nav-menu--main ul.elementor-nav-menu {
	flex-wrap: nowrap;
}
header ul.elementor-nav-menu .elementor-item {
	white-space: nowrap;
}
header .elementor-widget-button .elementor-button {
	white-space: nowrap;
}

/* su schermi stretti tornare a capo va benissimo */
@media (max-width: 1024px) {
	header .elementor-nav-menu--layout-horizontal ul.elementor-nav-menu,
	header nav.elementor-nav-menu--main ul.elementor-nav-menu { flex-wrap: wrap; }
}

/* Su tablet il menu resta completo, quindi va stretto abbastanza da entrare
   nella riga insieme a marchio e pulsante: a 768 px lo spazio utile è 720. */
@media (max-width: 1024px) and (min-width: 768px) {
	header ul.elementor-nav-menu .elementor-item {
		padding-inline-start: 5px;
		padding-inline-end: 5px;
	}
}

/* Il pulsante del menu su telefono.
   Elementor fissa la larghezza del widget con tre classi: per vincere serve
   una classe in più, altrimenti l'icona resta a mezz'aria in mezzo alla barra. */
@media (max-width: 767px) {
	header .elementor-element.elementor-widget-nav-menu.elementor-nav-menu--dropdown-mobile {
		width: -moz-fit-content;
		width: fit-content;
		flex: 0 0 auto;
		/* senza questo il pannello qui sotto si aggancia al widget, largo 40px */
		position: static;
	}
	/* il pannello del menu resta in flusso e allarga il widget: lo appoggio
	   sotto la testata, che è già sticky e fa da riferimento. */
	header .elementor-nav-menu--dropdown {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		width: auto;
		border-block-start: 1px solid var(--wsw-bordo);
		box-shadow: 0 12px 24px rgba(18, 22, 28, .10);
	}
}

/* Stile del pulsante ☰: stesso bordo e stesso raggio delle cornici del sito,
   al posto del quadratino grigio predefinito di Elementor. */
header div.elementor-menu-toggle {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border: 1px solid var(--wsw-bordo);
	border-radius: 8px;
	color: var(--wsw-inchiostro);
	transition: background-color .15s ease, border-color .15s ease;
}
header div.elementor-menu-toggle:hover,
header div.elementor-menu-toggle:focus-visible,
header div.elementor-menu-toggle.elementor-active {
	background-color: var(--wsw-grigio-chiaro);
	border-color: var(--wsw-grigio);
}
header div.elementor-menu-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* Voci del menu a tendina su telefono: bersagli grandi abbastanza da un dito. */
@media (max-width: 767px) {
	header .elementor-nav-menu--dropdown .elementor-item {
		padding: 13px 24px;
		font-size: 16px;
		color: var(--wsw-inchiostro);
	}
	header .elementor-nav-menu--dropdown li + li .elementor-item {
		border-block-start: 1px solid var(--wsw-bordo);
	}
}

/* --- indice laterale delle pagine lunghe ------------------------
   Griglia a due colonne: l'indice sta nella prima e resta fermo,
   tutto il resto del corpo scorre nella seconda. Sotto i 1024 px
   torna una fila di pastiglie sopra al testo. */

#wsw-corpo {
	display: grid;
	grid-template-columns: 220px minmax(0, 920px);
	column-gap: 40px;
	max-width: 1180px;   /* come il blocco d'introduzione, così vanno a filo */
	margin-inline: auto;
	padding-inline: 0;
	/* l'indice può scendere fino in fondo alla griglia: senza questo
	   spazio l'ultima voce finisce appiccicata alla sezione seguente */
	padding-block-end: 72px;
	align-items: start;
}

/* Il margine laterale serve solo quando la finestra è più stretta del blocco:
   sopra i 1228 px ci pensa già lo spazio attorno. */
#wsw-testata { padding-inline: 0; }
@media (max-width: 1227px) {
	#wsw-testata,
	#wsw-corpo { padding-inline: 24px; }
}
@media (max-width: 1023px) {
	#wsw-testata { padding-inline: 40px; }
}
@media (max-width: 767px) {
	#wsw-testata { padding-inline: 20px; }
}
#wsw-corpo > :not(#wsw-indice-pagina) {
	grid-column: 2;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
#wsw-indice-pagina {
	grid-column: 1;
	grid-row: 1 / -1;
	position: sticky;
	top: 96px;
	display: block;
	padding: 36px 0 0;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
#wsw-indice-pagina a {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	padding: 8px 0 8px 14px;
	border-inline-start: 2px solid var(--wsw-bordo);
	color: var(--wsw-grigio);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
#wsw-indice-pagina a:hover,
#wsw-indice-pagina a:focus-visible,
#wsw-indice-pagina a[aria-current="true"] {
	border-inline-start-color: var(--wsw-rosso);
	color: var(--wsw-inchiostro);
}
#wsw-indice-pagina a[aria-current="true"] {
	font-weight: 600;
}

@media (max-width: 1023px) {
	#wsw-corpo {
		display: block;
		max-width: 1180px;
		padding-inline: 40px;
	}
	#wsw-indice-pagina {
		position: static;
		max-height: none;
		overflow: visible;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 0 24px;
	}
	#wsw-indice-pagina a {
		border: 1px solid var(--wsw-bordo);
		border-radius: 999px;
		padding: 8px 14px;
		background: #fff;
	}
	#wsw-indice-pagina a[aria-current="true"] {
		border-color: var(--wsw-rosso);
		color: var(--wsw-rosso);
	}
}
@media (max-width: 767px) {
	#wsw-corpo { padding-inline: 20px; }
}

/* Le ancore si fermano sotto la testata, non sparendoci dietro. */
#viste, #varianti, #categorie, #campi, #immagini,
#permessi, #conflitti, #lingue, #manutenzione,
#passo-1, #passo-2, #passo-3, #passo-4, #domande {
	scroll-margin-block-start: 96px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ================================================================
   MISURE COMUNI A TUTTE LE PAGINE

   Il sito impagina in tre modi diversi, a seconda di chi disegna
   la pagina:
     1. Elementor V4 atomico  — Funzionalità, Documentazione (#wsw-corpo)
     2. Elementor classico    — Home, Prezzi, Contatti, Il mio account
     3. Il tema hello-elementor — negozio, carrello, pagamento, note legali
   Qui i tre sistemi vengono portati alla stessa larghezza e alla
   stessa intestazione, così le pagine si assomigliano.
   ================================================================ */

:root { --wsw-larghezza: 1180px; }

/* 2. Elementor classico: la larghezza dei contenitori viene da qui.
   Il selettore deve battere `.elementor-kit-74`, che vale 1140. */
body[class*="elementor-kit-"],
body .elementor,
.elementor .e-con { --container-max-width: var(--wsw-larghezza); }

/* 3. Pagine servite dal tema. hello-elementor le stringe a scalini
   (500, 600, 800, 1140): le riportiamo alla misura di tutto il resto. */
body:not([class*="elementor-page-"]) .site-main {
	max-width: calc(var(--wsw-larghezza) + 48px);
	padding-inline: 24px;
}
@media (max-width: 1023px) {
	body:not([class*="elementor-page-"]) .site-main { padding-inline: 40px; }
}
@media (max-width: 767px) {
	body:not([class*="elementor-page-"]) .site-main { padding-inline: 20px; }
}

/* --- intestazione di pagina, una sola per tutte ------------------ */

.site-main > .page-header,
.site-main > .woocommerce-products-header {
	/* la testata del sito è fissa e alta 96 px: sotto quella quota
	   il titolo ci finirebbe dietro */
	padding-block: 144px 40px;
	text-align: center;
	margin: 0;
}
.site-main > .page-header > .entry-title,
.site-main > .woocommerce-products-header > .woocommerce-products-header__title {
	font-size: clamp(32px, 4.5vw, 46px);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--wsw-inchiostro);
	margin: 0;
}

/* Testo corrente delle pagine di servizio e delle note legali.
   Erano a 14 px, cioè metà del resto del sito. */
body:not([class*="elementor-page-"]) .site-main :is(.page-content, .entry-content) :is(p, li) {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wsw-grigio);
}
body:not([class*="elementor-page-"]) .site-main :is(.page-content, .entry-content) :is(h2, h3) {
	color: var(--wsw-inchiostro);
	letter-spacing: -.015em;
}
body:not([class*="elementor-page-"]) .site-main .page-content { padding-block-end: 72px; }

/* --- Il mio account: il menu laterale come l'indice delle altre pagine --- */

/* Solo quando il menu c'è davvero: da sloggati la stessa area
   contiene il modulo di accesso, che in una colonna da 220 px non ci sta. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	column-gap: 40px;
	align-items: start;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation)::after { content: none; }
.woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
	margin: 0;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	padding: 8px 0 8px 14px;
	border-inline-start: 2px solid var(--wsw-bordo);
	color: var(--wsw-grigio);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce-MyAccount-navigation li.is-active a {
	border-inline-start-color: var(--wsw-rosso);
	color: var(--wsw-inchiostro);
}
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 600; }
.woocommerce-MyAccount-content { float: none; width: auto; margin: 0; }

@media (max-width: 767px) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: block; }
	.woocommerce-MyAccount-navigation { margin-block-end: 28px; }
}

/* Note legali di Complianz: il plugin impone 14 px con un selettore a id. */
#cmplz-document,
.cmplz-document {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wsw-grigio);
	margin-inline: auto;
}
#cmplz-document :is(p, li),
.cmplz-document :is(p, li) { font-size: 17px; line-height: 1.7; }
#cmplz-document :is(h2, h3),
.cmplz-document :is(h2, h3) { color: var(--wsw-inchiostro); letter-spacing: -.015em; }

/* Pagine del tema senza intestazione propria (carrello, pagamento):
   anche lì il contenuto deve partire sotto la testata fissa. */
body:not([class*="elementor-page-"]) .site-main > .page-content:first-child,
body:not([class*="elementor-page-"]) .site-main > .woocommerce:first-child {
	padding-block-start: 144px;
}

/* --- blocco d'apertura, uguale su tutte le pagine ---------------- */

#wsw-testata {
	padding-block-start: 144px;
	/* senza questo il margine superiore esce dal contenitore
	   (margin collapsing) e sposta in giù tutta la pagina */
	margin-block-start: 0;
	text-align: center;
}
#wsw-testata h1 {
	font-size: clamp(32px, 4.5vw, 46px);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-weight: 700;
	color: var(--wsw-inchiostro);
}
#wsw-testata p {
	max-width: 640px;
	margin-inline: auto;
	font-size: 20px;
	line-height: 1.6;
	color: var(--wsw-grigio);
}

/* Briciole di pane del negozio: erano sotto la testata fissa. */
.site-main > .woocommerce-breadcrumb {
	padding-block-start: 144px;
	margin: 0;
	font-size: 15px;
	color: var(--wsw-grigio);
}
.site-main > .woocommerce-breadcrumb a { color: var(--wsw-grigio); }
.site-main > .woocommerce-breadcrumb a:hover { color: var(--wsw-rosso); }
.site-main > .woocommerce-breadcrumb + .woocommerce-products-header {
	padding-block-start: 28px;
}

/* Sull'elenco del negozio le briciole dicono solo «Home / Shop»,
   e spostano il titolo 50 px più in basso che in tutte le altre pagine.
   Sulla scheda di un prodotto invece servono, e restano. */
.post-type-archive-product .site-main > .woocommerce-breadcrumb { display: none; }
.post-type-archive-product .site-main > .woocommerce-products-header {
	padding-block-start: 144px;
}

/* --- pulsanti di WooCommerce nei colori del sito ----------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
	background-color: var(--wsw-rosso);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	padding: 12px 22px;
	transition: background-color .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--wsw-rosso-scuro);
	color: #fff;
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled { background-color: var(--wsw-bordo); color: var(--wsw-grigio); }

/* prezzi e collegamenti dentro il negozio */
.woocommerce .price,
.woocommerce ul.products li.product .price { color: var(--wsw-inchiostro); font-weight: 600; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--wsw-inchiostro); }

/* Prezzo appoggiato in fondo alla scheda, subito sopra al pulsante:
   così le fasce restano allineate anche quando la descrizione va a capo. */
.elementor .wsw-prezzo {
	/* !important perché la classe locale di Elementor ha la stessa
	   specificità e su alcune pagine viene caricata dopo */
	margin-block-start: auto !important;
	margin-block-end: 0 !important;
	padding-block: 0;
	/* le sei fasce avevano interlinee diverse: i riquadri del prezzo
	   erano alti 40 px o 30 px, e i numeri non partivano alla stessa quota */
	line-height: 1.35 !important;
}

/* Un pulsante senza collegamento esce come <button>, che si stringe sul
   testo invece di riempire la scheda come fanno gli <a>. */
/* il pulsante della fascia riempie la scheda, sia che porti a un
   collegamento sia che sia un <button> senza destinazione */
.elementor .wsw-prezzo ~ .e-button-base { width: 100%; }

/* ================================================================
   AREA ACCOUNT, CARRELLO E PAGAMENTO
   WooCommerce e i suoi blocchi arrivano con un rosa acceso e pulsanti
   pesanti: qui vanno nei colori e nelle misure del resto del sito.
   ================================================================ */

/* --- la testata fissa e la barra di WordPress -------------------- */

#wsw-barra { inset-block-start: 0; }
body.admin-bar #wsw-barra { inset-block-start: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar #wsw-barra { inset-block-start: 46px; }
}

/* --- collegamenti ------------------------------------------------ */

.woocommerce a:not(.button):not(.wsw-mostra-chiave),
.woocommerce-MyAccount-content a:not(.button),
.wc-block-components-checkout-step a,
.wc-block-components-totals-item a,
.woocommerce-info a,
.woocommerce-message a {
	color: var(--wsw-rosso);
	text-decoration-color: color-mix(in srgb, var(--wsw-rosso) 35%, transparent);
}
.woocommerce a:not(.button):hover,
.woocommerce-MyAccount-content a:not(.button):hover {
	color: var(--wsw-rosso-scuro);
}

/* --- pulsanti dei blocchi (pagamento e carrello) ----------------- */

.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: var(--wsw-rosso);
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 15px;
	min-height: 0;
	padding: 14px 24px;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wsw-rosso-scuro);
	color: #fff;
}
.wc-block-components-button__text { color: inherit; }

/* --- titoli dentro l'account ------------------------------------- */

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-Address-title h3,
.woocommerce-column__title {
	color: var(--wsw-inchiostro);
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -.015em;
	font-weight: 600;
	margin-block: 0 12px;
}
.woocommerce-MyAccount-content > h2:first-child { margin-block-end: 20px; }

/* --- tabelle ----------------------------------------------------- */

.woocommerce table.shop_table,
.woocommerce table.woocommerce-table,
.woocommerce-MyAccount-content table {
	border: 1px solid var(--wsw-bordo);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 16px;
}
.woocommerce table.shop_table th,
.woocommerce table.woocommerce-table th {
	background: var(--wsw-grigio-chiaro);
	color: var(--wsw-inchiostro);
	font-weight: 600;
	text-align: start;
	border: 0;
	border-block-end: 1px solid var(--wsw-bordo);
	padding: 12px 16px;
}
.woocommerce table.shop_table td,
.woocommerce table.woocommerce-table td {
	border: 0;
	border-block-end: 1px solid var(--wsw-bordo);
	padding: 12px 16px;
	color: var(--wsw-grigio);
}
.woocommerce table.shop_table tr:last-child td,
.woocommerce table.woocommerce-table tr:last-child td,
.woocommerce table.woocommerce-table tr:last-child th { border-block-end: 0; }

/* Il pulsante di scaricamento porta il nome del file: va tenuto corto. */
.woocommerce-MyAccount-downloads .download-file a.button {
	font-size: 14px;
	font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	padding: 10px 16px;
	word-break: break-all;
}

/* --- avvisi ------------------------------------------------------ */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background: var(--wsw-grigio-chiaro);
	border-block-start: 0;
	border-inline-start: 3px solid var(--wsw-rosso);
	border-radius: 0 8px 8px 0;
	color: var(--wsw-inchiostro);
	font-size: 16px;
	padding: 16px 20px;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before { display: none; }

/* --- scheda della licenza ---------------------------------------- */

.wswls-license-card {
	border: 1px solid var(--wsw-bordo);
	border-radius: 10px;
	padding: 20px;
	margin-block-end: 20px;
}
.wswls-license-card > table { margin-block-end: 16px; width: 100%; }
.wswls-license-card th { width: 34%; }
.wsw-chiave { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wswls-key-mask {
	font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	background: var(--wsw-grigio-chiaro);
	border: 1px solid var(--wsw-bordo);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 15px;
	color: var(--wsw-inchiostro);
}
.wsw-icona { width: 17px; height: 17px; flex: 0 0 auto; display: block; }
.wsw-mostra-chiave {
	/* !important perché il reset dei pulsanti lo rimette a block */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	/* line-height 1 fa combaciare il centro del testo con quello
	   dell'icona: con l'interlinea di default il disegno resta alto */
	line-height: 1;
	gap: 11px;
	/* il pulsante non si stringe e la scritta non va a capo sotto l'icona */
	flex: 0 0 auto;
	white-space: nowrap;
	background: #fff !important;
	color: var(--wsw-inchiostro) !important;
	border: 1px solid var(--wsw-bordo) !important;
	font-size: 14px !important;
	font-weight: 600;
	padding: 8px 14px !important;
	border-radius: 6px !important;
}
.wsw-mostra-chiave:hover {
	background: var(--wsw-grigio-chiaro) !important;
	border-color: var(--wsw-grigio) !important;
}
.wsw-avviso { color: var(--wsw-rosso); font-weight: 600; }
.wsw-dominio { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.wsw-dominio label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--wsw-grigio); }
.wsw-dominio input[type="url"] {
	border: 1px solid var(--wsw-bordo);
	border-radius: 6px;
	padding: 10px 12px;
	min-width: 280px;
	font-size: 15px;
}

/* Il menu dell'account resta grigio come l'indice delle pagine lunghe:
   la regola generale dei collegamenti qui non deve arrivare. */
.woocommerce nav.woocommerce-MyAccount-navigation a,
.woocommerce nav.woocommerce-MyAccount-navigation a:not(.button) {
	color: var(--wsw-grigio);
	text-decoration: none;
}
.woocommerce nav.woocommerce-MyAccount-navigation a:hover,
.woocommerce nav.woocommerce-MyAccount-navigation a:focus-visible,
.woocommerce nav.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--wsw-inchiostro);
	border-inline-start-color: var(--wsw-rosso);
}

/* Dettagli account: il pulsante di salvataggio era appoggiato al riquadro
   della password. */
.woocommerce-EditAccountForm fieldset { margin-block-end: 28px; }
.woocommerce-EditAccountForm button[type="submit"],
.woocommerce-EditAccountForm .woocommerce-Button { margin-block-start: 4px; }

/* --- riepilogo dell'ordine al pagamento -------------------------- */

/* La miniatura è il segnaposto di WooCommerce: le licenze non hanno
   un'immagine e un rettangolo grigio non dice niente. Resta il numero
   di pezzi, che diventa una pastiglia accanto al nome. */
.wc-block-components-order-summary-item__image img { display: none; }
.wc-block-components-order-summary-item__image {
	/* larghezza giusta per la pastiglia del numero di pezzi */
	width: 34px !important;
	min-width: 0;
	flex: 0 0 auto;
	margin-inline-end: 10px;
}
.wc-block-components-order-summary-item__quantity {
	/* !important: la regola di WooCommerce la posiziona in assoluto
	   sopra la miniatura e la colora di bianco su bianco */
	position: static !important;
	transform: none !important;
	background: var(--wsw-inchiostro) !important;
	color: #fff !important;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 0;
	border-radius: 999px;
	background: var(--wsw-inchiostro);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* La descrizione breve dice per quanti prodotti vale la licenza:
   nel riepilogo è l'informazione che conta. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description p {
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wsw-grigio);
}

.wc-block-components-order-summary-item .wc-block-components-product-name,
.wc-block-components-product-name {
	color: var(--wsw-inchiostro);
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.35;
}
.wc-block-components-order-summary-item__individual-prices {
	color: var(--wsw-grigio);
	font-size: 14px;
}
.wc-block-components-order-summary__title,
.wc-block-components-panel__button {
	color: var(--wsw-inchiostro);
	font-size: 17px;
	font-weight: 600;
}
.wc-block-components-totals-item__label { color: var(--wsw-grigio); }
.wc-block-components-totals-item__value { color: var(--wsw-inchiostro); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wsw-inchiostro);
	font-weight: 600;
	font-size: 20px;
}
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar .wc-block-components-panel {
	border-color: var(--wsw-bordo);
	border-radius: 10px;
}

/* ================================================================
   PAGINA DI PRESENTAZIONE
   Usa il modello «canvas», senza testata e piè di pagina del sito:
   quelli rimandano a pagine che restano chiuse. Qui ce ne sono due
   ridotti all'essenziale, che vivono dentro la pagina stessa.
   ================================================================ */

#wsw-landing-barra {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wsw-rosso);
	/* fondo a tutta larghezza, contenuto incolonnato a 1180 come le altre pagine */
	padding-block: 18px;
	padding-inline: max(24px, calc((100% - 1180px) / 2));
}
#wsw-landing-barra img { width: 30px; height: 30px; display: block; }
#wsw-landing-barra span {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.015em;
	color: #fff;
}
/* il selettore è l'ultimo elemento della barra e va in fondo a destra */
#wsw-landing-barra > *:last-child { margin-inline-start: auto; }

#wsw-landing-pie {
	border-block-start: 1px solid var(--wsw-bordo);
	margin-block-start: 64px;
	padding: 36px 24px 48px;
	text-align: center;
}
#wsw-landing-pie > * {
	max-width: 760px;
	margin-inline: auto;
}
#wsw-landing-pie p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wsw-grigio);
	margin-block: 0 10px;
}
#wsw-landing-pie p:last-child {
	font-size: 13px;
	color: var(--wsw-grigio);
	margin-block-end: 0;
}
#wsw-landing-pie a { color: var(--wsw-rosso); text-decoration: none; }
#wsw-landing-pie a:hover { text-decoration: underline; }

/* Senza la testata fissa del sito la pagina non deve scavalcare niente. */
body.page-template-elementor_canvas #wsw-testata,
.elementor-page-303 #wsw-testata { padding-block-start: 0; }

/* --- selettore di lingua ----------------------------------------- */

.wsw-lingue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.wsw-lingua {
	color: inherit;
	opacity: .6;
	text-decoration: none;
	padding: 4px 2px;
	transition: opacity .15s ease;
}
.wsw-lingua:hover,
.wsw-lingua:focus-visible { opacity: 1; }
.wsw-lingua--attiva { opacity: 1; }
.wsw-lingue__sep { opacity: .35; }

/* Nella testata del sito, che è rossa, il selettore è bianco. */
#wsw-barra .wsw-lingue { color: #fff; }

/* Nella barra della presentazione, che è bianca. */
#wsw-landing-barra .wsw-lingue { color: #fff; }

/* L'apertura eredita dalla Home 144 px di stacco dall'alto, che lì
   servono a scavalcare la testata fissa. Qui la barra è appiccicata ma
   occupa il suo spazio, quindi quel margine è tutto di troppo. */
#wsw-landing-barra + * { padding-block-start: 48px; }

/* --- dopo l'invio della richiesta --------------------------------
   Elementor aggiunge il messaggio di esito dentro al modulo, accanto
   ai campi. Qui i campi spariscono e resta solo il messaggio, così il
   popup non mostra un modulo già compilato e inviato. */

.elementor-popup-modal .elementor-form:has(.elementor-message-success) .elementor-form-fields-wrapper {
	display: none;
}
.elementor-popup-modal .e-con:has(.elementor-message-success) .elementor-widget-heading,
.elementor-popup-modal .e-con:has(.elementor-message-success) .elementor-widget-text-editor {
	display: none;
}
.elementor-popup-modal .elementor-message-success::before {
	/* l'icona di Elementor usa un carattere che qui non c'è e lascia
	   un quadratino davanti alla frase */
	content: none;
}
.elementor-popup-modal .elementor-message-success {
	display: block;
	padding: 28px 8px;
	font-size: 20px;
	line-height: 1.5;
	font-weight: 600;
	text-align: center;
	color: var(--wsw-inchiostro);
}