/* Pilates in Italy: stile dei blocchi. I colori arrivano dal tema (theme.json), con valori di riserva. */

:root {
	--pii-p: var(--wp--preset--color--primario, #7b2f3d);
	--pii-p-scuro: var(--wp--preset--color--primario-scuro, #5e2230);
	--pii-rosa: var(--wp--preset--color--rosa, #e8d5d1);
	--pii-rosa-chiaro: var(--wp--preset--color--rosa-chiaro, #f4e9e6);
	--pii-notte: var(--wp--preset--color--notte, #4b1e26);
	--pii-testo: var(--wp--preset--color--testo, #34424a);
	--pii-testo-2: var(--wp--preset--color--testo-secondario, #5d6a70);
	--pii-testo-3: #8a9498;
	--pii-sfondo: var(--wp--preset--color--sfondo, #f5f5f5);
	--pii-bordo: var(--wp--preset--color--bordo, #dce1e0);
	--pii-bordo-campo: #c3cacb;
	--pii-scuro: var(--wp--preset--color--scuro, #344349);
	--pii-titoli: var(--wp--preset--font-family--raleway, Raleway, "Helvetica Neue", Arial, sans-serif);
	--pii-larghezza: var(--wp--style--global--wide-size, 1240px);
	--pii-pad: clamp(16px, 4vw, 48px);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.pii-i { flex: none; }
:where([class^="pii-"], [class*=" pii-"]) :focus-visible,
:where(.pii-bottone, .pii-chip, .pii-segmento, .pii-salva):focus-visible {
	outline: 2px solid var(--pii-p);
	outline-offset: 2px;
}

/* Pulsanti ------------------------------------------------------------- */

.pii-bottone {
	align-items: center;
	background: var(--pii-p);
	border: 1px solid var(--pii-p);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	line-height: 1.1;
	padding: 14px 26px;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
}
.pii-bottone:hover { background: var(--pii-p-scuro); border-color: var(--pii-p-scuro); color: #fff; }
.pii-bottone .pii-i { height: 18px; width: 18px; }
.pii-bottone--contorno { background: transparent; border-color: #4a4547; color: var(--pii-testo); }
.pii-bottone--contorno:hover { background: #fff; border-color: var(--pii-testo); color: var(--pii-testo); }
.pii-bottone--chiaro { background: #fff; border-color: #fff; color: var(--pii-p); }
.pii-bottone--piccolo { font-size: 14px; padding: 10px 18px; }
.pii-bottone--largo { width: 100%; }
.pii-azioni { display: flex; flex-wrap: wrap; gap: 10px; }

.pii-badge {
	align-items: center;
	background: var(--pii-p);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 4px;
	letter-spacing: .01em;
	line-height: 1;
	padding: 5px 9px;
}
.pii-badge--chiaro { background: #fff; color: var(--pii-testo); }
.pii-badge .pii-i { color: var(--pii-p); height: 13px; width: 13px; }

/* Intestazione ---------------------------------------------------------- */

.pii-header { background: #fff; border-bottom: 1px solid var(--pii-bordo); }
/* Resta in alto mentre si scorre: l'aggancio va sul contenitore della parte del tema. */
.wp-block-template-part:has(> .pii-header),
.pii-header:only-child { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-block-template-part:has(> .pii-header) { top: var(--wp-admin--admin-bar--height, 32px); }
.pii-header__dentro {
	align-items: center;
	display: flex;
	gap: 44px;
	height: 76px;
	margin: 0 auto;
	max-width: var(--pii-larghezza);
	padding: 0 var(--pii-pad);
}
.pii-logo { align-items: center; color: #3c3a3b; display: inline-flex; flex: none; gap: 8px; text-decoration: none; }
.pii-logo__testo { font-size: 19px; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pii-logo__by { color: var(--pii-testo-3); font-size: 11px; margin-top: 6px; }
/* !important: sulle pagine WooCommerce ".woocommerce-page img" rimetterebbe il logo a grandezza naturale. */
.pii-logo img { display: block; height: 30px !important; max-width: none !important; width: auto !important; }
.pii-nav { display: flex; gap: 26px; }
.pii-nav a {
	border-bottom: 2px solid transparent;
	color: var(--pii-testo);
	font-size: 14px;
	padding: 6px 0;
	text-decoration: none;
}
.pii-nav a:hover { color: var(--pii-p); }
.pii-nav a[aria-current="page"] { border-color: var(--pii-p); color: var(--pii-p); }
.pii-header__azioni { align-items: center; display: flex; gap: 14px; margin-left: auto; }
.pii-accedi { color: var(--pii-testo); font-size: 14px; text-decoration: none; }
.pii-tondo {
	align-items: center;
	background: #fff;
	border: 1px solid var(--pii-bordo);
	border-radius: 50%;
	color: var(--pii-testo);
	cursor: pointer;
	display: inline-flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 40px;
}
.pii-tondo .pii-i { height: 19px; width: 19px; }
.pii-utente { align-items: center; color: var(--pii-testo); display: inline-flex; font-size: 14px; gap: 10px; text-decoration: none; }
.pii-avatar {
	align-items: center;
	background: #5a1e2b;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	height: 36px;
	justify-content: center;
	letter-spacing: .03em;
	width: 36px;
}
.pii-menu-apri, .pii-menu-mobile { display: none; }
/* La stessa icona diventa una X quando il menu è aperto: nel pulsante in alto e nella barra in basso. */
.pii-menu-apri__chiudi, [aria-expanded="true"] > .pii-menu-apri__apri { display: none; }
[aria-expanded="true"] > .pii-menu-apri__chiudi { display: block; }
/* Con un pannello aperto la pagina sotto non scorre. Solo su html: sul body staccherebbe l'intestazione che resta in alto. */
.pii-bloccata { overflow: hidden; }

.pii-barra-mobile { display: none; }

/* Titoli di sezione ----------------------------------------------------- */

.pii-testata { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; margin: 0 0 22px; }
.pii-testata__titolo { color: var(--pii-testo); font-size: 28px; font-weight: 300; letter-spacing: -.005em; line-height: 1.2; margin: 0; }
.pii-testata--grande .pii-testata__titolo { font-size: clamp(30px, 3.4vw, 42px); }
.pii-testata--trattino .pii-testata__titolo { flex-basis: 100%; }
.pii-testata--trattino .pii-testata__titolo::before { background: var(--pii-p); content: ""; display: block; height: 2px; margin-bottom: 22px; width: 36px; }
.pii-testata--trattino { align-items: flex-end; }
.pii-testata--trattino .pii-testata__titolo { flex: 1 1 auto; }
.pii-testata__link { align-items: center; color: var(--pii-p); display: inline-flex; font-size: 14px; font-weight: 600; gap: 4px; text-decoration: none; }
.pii-testata__link .pii-i { height: 16px; width: 16px; }
.pii-testata__destra { color: var(--pii-testo-3); font-size: 14px; }

/* Schede delle lezioni -------------------------------------------------- */

.pii-griglia { display: grid; gap: 34px 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pii-scheda { min-width: 0; }
.pii-scheda__media,
.pii-serie__media,
.pii-prova__media,
.pii-riprendi__media,
.pii-vicina__media {
	aspect-ratio: 16 / 9;
	background: #dcd8d8;
	border-radius: 12px;
	display: block;
	overflow: hidden;
	position: relative;
}
.pii-scheda__media img,
.pii-serie__media img,
.pii-prova__media img,
.pii-riprendi__media img,
.pii-vicina__media img,
.pii-immagine-vuota { display: block; height: 100%; object-fit: cover; width: 100%; }
.pii-scheda__media img { transition: transform .35s ease; }
.pii-scheda:hover .pii-scheda__media img { transform: scale(1.03); }
.pii-scheda__badge { display: flex; gap: 6px; left: 10px; position: absolute; top: 10px; }
.pii-scheda__durata {
	align-items: center;
	background: rgba(38, 31, 33, .78);
	border-radius: 999px;
	bottom: 10px;
	color: #fff;
	display: inline-flex;
	font-size: 11px;
	font-weight: 600;
	gap: 4px;
	padding: 4px 8px;
	position: absolute;
	right: 10px;
}
.pii-scheda__durata .pii-i { height: 13px; width: 13px; }
.pii-scheda__barra { background: rgba(255, 255, 255, .55); bottom: 0; height: 3px; left: 0; position: absolute; right: 0; }
.pii-scheda__barra span { background: var(--pii-p); display: block; height: 100%; }
.pii-scheda__testo { column-gap: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-top: 12px; }
.pii-scheda__titolo { -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; overflow: hidden; }
.pii-scheda__titolo a { color: var(--pii-testo); text-decoration: none; }
.pii-scheda__titolo a:hover { color: var(--pii-p); }
.pii-scheda__luogo { color: var(--pii-testo-2); font-size: 13px; grid-column: 1 / -1; margin: 5px 0 0; }
.pii-scheda__meta { align-items: center; color: var(--pii-testo-2); display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 4px 10px; grid-column: 1 / -1; margin: 6px 0 0; }
.pii-scheda__meta > span { align-items: center; display: inline-flex; }

.pii-salva {
	align-items: center;
	background: none;
	border: 0;
	color: var(--pii-testo-2);
	cursor: pointer;
	display: inline-flex;
	gap: 6px;
	height: 26px;
	justify-content: center;
	padding: 0;
	text-decoration: none;
	width: 26px;
}
.pii-salva:hover, .pii-salva[aria-pressed="true"] { color: var(--pii-p); }
.pii-salva--testo {
	background: #efeded;
	border-radius: 999px;
	color: var(--pii-testo);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	padding: 12px 20px;
	width: auto;
}
.pii-salva--testo[aria-pressed="true"] { background: var(--pii-rosa-chiaro); color: var(--pii-p); }
.pii-salva--testo .pii-i { height: 18px; width: 18px; }

.pii-tacche { align-items: flex-end; display: inline-flex; gap: 2px; height: 12px; margin-right: 6px; }
.pii-tacche span { background: #d8cdcf; border-radius: 1px; display: block; width: 3px; }
.pii-tacche span.on { background: var(--pii-p); }

/* Serie ------------------------------------------------------------------ */

.pii-sezione-serie { margin-bottom: 64px; }
.pii-serie-griglia { display: grid; gap: 34px 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pii-serie { color: var(--pii-testo); display: block; text-decoration: none; }
.pii-serie__media { isolation: isolate; margin-top: 12px; overflow: visible; }
.pii-serie__media img, .pii-serie__media .pii-immagine-vuota { border-radius: 12px; position: relative; z-index: 2; }
.pii-serie__media::before,
.pii-serie__media::after { border-radius: 12px; content: ""; left: 7%; position: absolute; right: 7%; top: -11px; height: 40px; z-index: 0; }
.pii-serie__media::before { background: var(--pii-rosa-chiaro); }
.pii-serie__media::after { background: var(--pii-rosa); left: 3.5%; right: 3.5%; top: -6px; z-index: 1; }
.pii-serie__titolo { display: block; font-size: 15px; font-weight: 600; margin-top: 14px; }
.pii-serie:hover .pii-serie__titolo { color: var(--pii-p); }
.pii-serie__sotto { color: var(--pii-testo-2); display: block; font-size: 13px; margin-top: 4px; }

/* Filtri del catalogo ---------------------------------------------------- */

.pii-catalogo { scroll-margin-top: 100px; }
.pii-filtri { margin-bottom: 30px; }
.pii-filtri__riga { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
.pii-filtri__piu, .pii-filtri__campi { display: contents; }
.pii-filtri__testa, .pii-filtri__piede, .pii-filtri__velo { display: none; }
.pii-select__nome { border: 0; clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.pii-cerca,
.pii-segmenti,
.pii-select { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 999px; height: 46px; }
.pii-cerca { align-items: center; color: var(--pii-testo-2); display: flex; flex: 1 1 340px; gap: 10px; padding: 0 18px; }
.pii-cerca input { background: transparent; border: 0; color: var(--pii-testo); flex: 1; font: inherit; font-size: 14px; min-width: 0; outline: 0; }
.pii-cerca:focus-within { border-color: var(--pii-testo-3); }
.pii-segmenti { align-items: center; display: flex; gap: 4px; margin: 0; min-width: 0; padding: 0 5px 0 16px; }
.pii-segmenti legend { color: var(--pii-testo); float: left; font-size: 14px; margin-right: 8px; padding: 0; }
.pii-segmenti > div { display: flex; gap: 2px; }
/* position: relative tiene le radio nascoste dentro la riga degli attrezzi, che sul telefono scorre: altrimenti allargano la pagina. */
.pii-segmento, .pii-chip { position: relative; }
.pii-segmento input, .pii-chip input { opacity: 0; pointer-events: none; position: absolute; }
.pii-segmento span { border-radius: 999px; color: var(--pii-testo); cursor: pointer; display: inline-block; font-size: 14px; padding: 7px 14px; }
.pii-segmento input:checked + span { background: var(--pii-rosa-chiaro); color: var(--pii-p); font-weight: 600; }
.pii-segmento input:focus-visible + span, .pii-chip input:focus-visible + span { outline: 2px solid var(--pii-p); outline-offset: 2px; }
.pii-select { align-items: center; display: inline-flex; position: relative; }
.pii-select select { appearance: none; background: transparent; border: 0; color: var(--pii-testo); cursor: pointer; font: inherit; font-size: 14px; height: 100%; padding: 0 40px 0 18px; }
.pii-select .pii-i { height: 16px; pointer-events: none; position: absolute; right: 14px; width: 16px; }
/* I nomi delle serie sono lunghi: la tendina resta della misura delle altre e taglia il nome scelto. */
.pii-select--serie select { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Quando ricerca e filtri non stanno in una riga: la ricerca sopra, i filtri sotto con l'ordinamento a destra. */
@media (min-width: 901px) and (max-width: 1320px) {
	.pii-cerca { flex-basis: 100%; }
	.pii-select--ordine { margin-left: auto; }
}
/* Durata o serie scelte: la tendina prende il colore del livello selezionato. */
.pii-filtri__campi .pii-select:not(.pii-select--ordine):has(option:checked:not([value=""])) select,
.pii-filtri__campi .pii-select:not(.pii-select--ordine):has(option:checked:not([value=""])) .pii-i { color: var(--pii-p); }
.pii-filtri__campi .pii-select:not(.pii-select--ordine):has(option:checked:not([value=""])) select { font-weight: 600; }
@media (min-width: 901px) {
	.pii-filtri__campi .pii-select:not(.pii-select--ordine):has(option:checked:not([value=""])) { background: var(--pii-rosa-chiaro); border-color: var(--pii-rosa-chiaro); }
}
.pii-filtri__apri { display: none; }
.pii-chips { border-bottom: 1px solid var(--pii-bordo); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-bottom: 24px; }
.pii-chip span { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 999px; color: var(--pii-testo); cursor: pointer; display: inline-block; font-size: 14px; padding: 9px 16px; white-space: nowrap; }
.pii-chip span:hover { border-color: var(--pii-testo-3); }
.pii-chip input:checked + span { background: var(--pii-scuro); border-color: var(--pii-scuro); color: #fff; }

.pii-pag { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 48px; }
.pii-pag a, .pii-pag span { align-items: center; border-radius: 999px; color: var(--pii-testo); display: inline-flex; font-size: 14px; height: 40px; justify-content: center; min-width: 40px; padding: 0 12px; text-decoration: none; }
.pii-pag a:hover { background: #fff; }
.pii-pag [aria-current] { background: var(--pii-scuro); color: #fff; }
.pii-pag__freccia { border: 1px solid var(--pii-bordo); }

.pii-vuoto { color: var(--pii-testo-2); padding: 48px 0; text-align: center; }
.pii-vuoto p { margin: 0 0 18px; }

/* Riprendi --------------------------------------------------------------- */

.pii-riprendi { margin-bottom: 56px; }
.pii-riprendi__ciao { font-size: clamp(30px, 3vw, 38px); font-weight: 300; margin: 0 0 6px; }
.pii-riprendi__sotto { color: var(--pii-testo-2); font-size: 15px; margin: 0 0 24px; }
.pii-riprendi__scheda { background: #fff; border-radius: 16px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; }
.pii-riprendi__media { aspect-ratio: auto; border-radius: 0; min-height: 260px; }
.pii-riprendi__media .pii-scheda__barra { height: 4px; }
.pii-riprendi__testo { padding: 28px 30px; }
.pii-riprendi__titolo { font-size: 28px; font-weight: 300; margin: 4px 0 10px; }
.pii-riprendi__mancano { color: var(--pii-testo-2); font-size: 14px; line-height: 1.5; margin: 14px 0 22px; }
.pii-riprendi__mancano strong { color: var(--pii-testo); }
.pii-riprendi__anche { font-size: 15px; font-weight: 600; margin: 30px 0 14px; }
.pii-lista { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Home: numeri e prova --------------------------------------------------- */

.pii-statistiche { border-top: 1px solid var(--pii-bordo); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 44px; padding-top: 22px; }
.pii-stat { border-left: 1px solid var(--pii-bordo); display: grid; gap: 3px; padding: 0 22px; }
.pii-stat:first-child { border-left: 0; padding-left: 0; }
.pii-stat strong { color: var(--pii-testo); font-size: 14px; font-weight: 600; }
.pii-stat span { color: var(--pii-testo-2); font-size: 13px; line-height: 1.45; max-width: 15em; }

.pii-prova { scroll-margin-top: 100px; }
.pii-prova__griglia { display: grid; gap: 28px 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pii-prova__scheda { color: var(--pii-testo); text-decoration: none; }
.pii-play {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	color: var(--pii-p);
	display: inline-flex;
	height: 52px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 52px;
}
.pii-play .pii-i { height: 22px; margin-left: 3px; width: 22px; }
.pii-prova__testo { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; padding-top: 12px; }
.pii-prova__titolo { font-size: 15px; font-weight: 600; }
.pii-prova__etichetta { color: var(--pii-testo-3); font-size: 13px; }
.pii-prova__scheda:hover .pii-prova__titolo { color: var(--pii-p); }

/* Pagina della lezione --------------------------------------------------- */

.pii-lezione { margin: 0 auto; max-width: var(--pii-larghezza); padding: 26px var(--pii-pad) 72px; }
.pii-briciole { align-items: center; color: var(--pii-testo-2); display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px; }
.pii-briciole a { color: var(--pii-testo-2); text-decoration: none; }
.pii-briciole a:hover { color: var(--pii-p); }
.pii-briciole span { color: var(--pii-testo); font-weight: 600; }
.pii-briciole .pii-i { height: 14px; width: 14px; }
.pii-lezione__corpo { align-items: start; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 360px; margin-top: 22px; }

.pii-player { background: #1f1c1d; border-radius: 16px; overflow: hidden; position: relative; }
.pii-player__video { aspect-ratio: 16 / 9; position: relative; }
.pii-player__video iframe { border: 0; height: 100%; inset: 0; position: absolute; width: 100%; }
.pii-player__riprendi {
	align-items: center;
	background: #fff;
	border: 0;
	border-radius: 999px;
	bottom: 76px;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
	color: var(--pii-testo);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	gap: 12px;
	left: 20px;
	padding: 7px 20px 7px 7px;
	position: absolute;
}
.pii-player__riprendi .pii-play { background: var(--pii-p); box-shadow: none; color: #fff; height: 36px; left: auto; position: static; transform: none; width: 36px; }
.pii-player__riprendi .pii-play .pii-i { height: 15px; width: 15px; }
.pii-player__linea { background: #3d393a; border-radius: 3px; height: 5px; margin: 12px 16px 14px; position: relative; }
.pii-player__visto { background: var(--pii-p); border-radius: 3px; display: block; height: 100%; }
.pii-player__tacca { background: rgba(255, 255, 255, .75); height: 100%; position: absolute; top: 0; width: 2px; }
.pii-player--bloccato { aspect-ratio: 16 / 9; }
.pii-player--bloccato img, .pii-player--bloccato .pii-immagine-vuota { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.pii-player__blocco { align-items: center; background: rgba(31, 24, 26, .62); color: #fff; display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; padding: 24px; position: relative; text-align: center; }
.pii-player__blocco .pii-i { height: 34px; width: 34px; }
.pii-player__blocco p { color: #fff; font-size: 17px; margin: 0; }
.pii-avviso { color: var(--pii-testo-2); font-size: 13px; margin: 10px 2px 0; }
.pii-avviso a { color: var(--pii-p); }

.pii-lezione__serie { color: var(--pii-testo-2); font-size: 13px; margin: 28px 0 8px; }
.pii-lezione__titolo { color: var(--pii-testo); font-size: clamp(26px, 2.6vw, 34px); font-weight: 300; line-height: 1.22; margin: 0 0 18px; max-width: 18em; }
.pii-etichette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pii-etichetta { align-items: center; background: #fff; border: 1px solid var(--pii-bordo); border-radius: 999px; color: var(--pii-testo); display: inline-flex; font-size: 13px; gap: 6px; padding: 7px 13px; }
.pii-etichetta .pii-i { color: var(--pii-testo-2); height: 15px; width: 15px; }
.pii-etichetta .pii-tacche { margin-right: 0; }
.pii-completa[aria-pressed="true"] { background: var(--pii-rosa-chiaro); border-color: var(--pii-rosa-chiaro); color: var(--pii-p); }
.pii-lezione__descrizione { border-top: 1px solid var(--pii-bordo); color: var(--pii-testo-2); font-size: 15px; line-height: 1.75; margin-top: 26px; max-width: 42em; padding-top: 22px; }
.pii-lezione__descrizione:empty { display: none; }
.pii-schede-mobile { display: none; }

.pii-riquadro { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 16px; margin-bottom: 16px; padding: 18px 16px; }
.pii-riquadro__testa { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; padding: 0 4px; }
.pii-riquadro__testa h2 { font-size: 15px; font-weight: 600; margin: 0; }
.pii-riquadro__testa span { color: var(--pii-testo-3); font-size: 12px; }
.pii-riquadro__testa--colonna { align-items: flex-start; flex-direction: column; gap: 2px; }
.pii-riquadro__nota { border-top: 1px solid var(--pii-bordo); color: var(--pii-testo-3); font-size: 12px; line-height: 1.5; margin: 10px 4px 0; padding-top: 12px; }

/* Pagina del trailer: come la lezione, con l'invito ad abbonarsi e gli altri trailer accanto */
.pii-trailer__testo { color: var(--pii-testo-2); font-size: 15px; line-height: 1.7; margin: 0; max-width: 38em; }
.pii-trailer__invito { padding: 22px 20px; }
.pii-trailer__invito h2 { font-family: var(--pii-titoli); font-size: 26px; font-weight: 300; margin: 0 0 8px; }
.pii-trailer__invito p { color: var(--pii-testo-2); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
.pii-trailer__invito .pii-riquadro__nota { margin: 18px 0 0; }
.pii-trailer__invito .pii-riquadro__nota a { color: var(--pii-p); font-weight: 600; }
.pii-trailer__altri .pii-in-corso { gap: 14px; grid-template-columns: 120px minmax(0, 1fr); padding: 12px 4px; }
.pii-trailer__altri .pii-in-corso:last-child { border-bottom: 0; padding-bottom: 2px; }
@media (max-width: 900px) {
	.pii-trailer .pii-lezione__titolo { margin-top: 20px; }
	.pii-trailer .pii-lezione__info { margin-bottom: 22px; }
	.pii-trailer__invito .pii-azioni { display: grid; }
	.pii-trailer__invito .pii-bottone { box-sizing: border-box; width: 100%; }
}
.pii-capitoli ol { list-style: none; margin: 10px 0 0; padding: 0; }
.pii-capitolo {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 10px;
	color: var(--pii-testo-2);
	cursor: pointer;
	display: grid;
	font: inherit;
	font-size: 14px;
	gap: 12px;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	padding: 9px 10px;
	text-align: left;
	width: 100%;
}
.pii-capitolo:hover:not([disabled]) { background: #f7f5f5; }
.pii-capitolo[disabled] { cursor: default; }
.pii-capitolo__n { color: var(--pii-testo-3); display: inline-flex; font-size: 12px; justify-content: center; }
.pii-capitolo__n .pii-i { color: var(--pii-p); height: 17px; width: 17px; }
.pii-capitolo__ora { font-size: 12px; font-variant-numeric: tabular-nums; }
.pii-capitolo.is-attivo { background: var(--pii-rosa-chiaro); color: var(--pii-p); font-weight: 600; }
.pii-capitolo.is-attivo .pii-capitolo__n { color: var(--pii-p); }

.pii-insegnante { align-items: center; display: flex; gap: 14px; }
.pii-insegnante__foto { align-items: center; background: var(--pii-rosa); border-radius: 50%; color: var(--pii-p); display: inline-flex; flex: none; font-size: 20px; height: 52px; justify-content: center; overflow: hidden; width: 52px; }
.pii-insegnante__foto img { height: 100%; object-fit: cover; width: 100%; }
.pii-insegnante__nome { color: var(--pii-testo); display: block; font-size: 15px; font-weight: 600; margin: 0; }
.pii-insegnante__ruolo { color: var(--pii-testo-2); display: block; font-size: 13px; margin: 3px 0 6px; }
.pii-insegnante__conta { color: var(--pii-p); display: block; font-size: 13px; font-weight: 600; }
.pii-insegnanti { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pii-insegnante--scheda { margin: 0; text-decoration: none; }
.pii-insegnante--scheda:hover { border-color: var(--pii-testo-3); }

.pii-vicine ul { list-style: none; margin: 12px 0 0; padding: 0; }
.pii-vicina { align-items: center; border-radius: 12px; color: var(--pii-testo); display: grid; gap: 12px; grid-template-columns: 78px minmax(0, 1fr); padding: 8px; text-decoration: none; }
.pii-vicina:hover { background: #f7f5f5; }
.pii-vicina.is-corrente { background: var(--pii-rosa-chiaro); }
.pii-vicina__media { aspect-ratio: 16 / 10; border-radius: 8px; }
.pii-vicina__titolo { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pii-vicina__stato { align-items: center; color: var(--pii-testo-2); display: flex; font-size: 12px; gap: 4px; margin-top: 3px; }
.pii-vicina.is-corrente .pii-vicina__stato { color: var(--pii-p); }
.pii-vicina__stato .pii-i { color: var(--pii-p); height: 14px; width: 14px; }

/* Abbonamento ------------------------------------------------------------ */

.pii-piani { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pii-piano { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 18px; display: flex; flex-direction: column; padding: 28px; position: relative; }
.pii-piano.is-evidenza { border-color: var(--pii-p); box-shadow: 0 14px 40px rgba(123, 47, 61, .12); }
.pii-piano .pii-badge { position: absolute; right: 20px; top: 20px; }
.pii-piano h3 { font-size: 19px; font-weight: 400; line-height: 1.3; margin: 0 0 14px; padding-right: 70px; }
.pii-piano__prezzo { color: var(--pii-testo); font-size: 34px; font-weight: 300; margin: 0 0 12px; }
.pii-piano__periodo { color: var(--pii-testo-2); font-size: 14px; }
.pii-piano__testo { color: var(--pii-testo-2); flex: 1; font-size: 14px; line-height: 1.6; }
.pii-piano .pii-bottone { margin-top: 18px; }
/* Due piani (mensile e annuale): affiancati e non troppo larghi; prezzo + IVA, prezzo con IVA, giorni gratuiti */
.pii-piani--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: 880px; }
.pii-piano__ivato { color: var(--pii-testo-2); font-size: 14px; margin: -6px 0 16px; }
.pii-piano__omaggio { align-items: center; align-self: flex-start; background: var(--pii-rosa-chiaro); border-radius: 999px; color: var(--pii-p); display: inline-flex; font-size: 13.5px; font-weight: 600; gap: 6px; margin: 0; padding: 6px 13px 6px 10px; }
.pii-piano__omaggio .pii-i { height: 15px; width: 15px; }
.pii-piani-sicuro { align-items: center; color: var(--pii-testo-2); display: flex; font-size: 14px; gap: 8px; margin: 22px 0 0; }
.pii-piani-sicuro::before {
	background: var(--pii-p);
	content: "";
	flex: none;
	height: 17px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='10.5' width='13' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 17px;
}
.pii-avvertenza { border-left: 3px solid var(--pii-rosa); color: var(--pii-testo-2); font-size: 14px; line-height: 1.7; margin: 30px 0 0; max-width: 880px; padding: 2px 0 2px 18px; }

/* Tablet e telefono ------------------------------------------------------ */

@media (max-width: 1100px) {
	.pii-griglia, .pii-serie-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pii-header__dentro { gap: 28px; }
	.pii-nav { gap: 18px; }
	.pii-lezione__corpo { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 900px) {
	.pii-header__dentro { gap: 12px; height: 62px; }
	.pii-nav, .pii-accedi, .pii-header__azioni > .pii-bottone, .pii-utente__nome { display: none; }
	.pii-menu-apri { display: inline-flex; }
	.pii-logo__testo { font-size: 14px; letter-spacing: .08em; }
	.pii-logo img { height: 24px !important; }

	.pii-barra-mobile {
		background: #fff;
		border-top: 1px solid var(--pii-bordo);
		bottom: 0;
		display: flex;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		right: 0;
		z-index: 60;
	}
	.pii-barra-mobile a,
	.pii-barra-mobile button { align-items: center; background: none; border: 0; color: var(--pii-testo-2); cursor: pointer; display: flex; flex: 1; flex-direction: column; font: inherit; font-size: 11px; gap: 4px; min-width: 0; padding: 10px 0 9px; text-decoration: none; }
	.pii-barra-mobile a[aria-current="page"],
	.pii-barra-mobile button[aria-expanded="true"] { color: var(--pii-p); font-weight: 600; }
	.pii-barra-mobile .pii-i { height: 22px; width: 22px; }
	body:has(.pii-barra-mobile) { padding-bottom: 72px; }

	/* Menu: un pannello sopra la pagina, sotto l'intestazione (che resta in vista con la X) */
	.pii-menu-mobile {
		background: #fff;
		bottom: 0;
		display: flex;
		flex-direction: column;
		left: 0;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 62px;
		transform: translateY(-10px);
		transition: opacity .2s ease, transform .24s cubic-bezier(.2, .75, .25, 1);
		z-index: 40;
	}
	.pii-menu-mobile[hidden] { display: none; }
	.pii-menu-mobile.is-aperto { opacity: 1; transform: none; }
	body:has(.pii-barra-mobile) .pii-menu-mobile { bottom: calc(63px + env(safe-area-inset-bottom)); }
	.pii-menu-mobile__corpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px var(--pii-pad) 22px; }
	.pii-menu-mobile__voci { display: grid; gap: 2px; margin: 0 -8px; }
	.pii-menu-mobile__voci a { align-items: center; border-radius: 16px; color: var(--pii-testo); display: grid; font-size: 17px; gap: 14px; grid-template-columns: 44px minmax(0, 1fr) 18px; padding: 8px; text-decoration: none; transition: background-color .15s; }
	.pii-menu-mobile__voci a:active { background: var(--pii-sfondo); }
	.pii-menu-mobile__voci a[aria-current="page"] { background: var(--pii-rosa-chiaro); color: var(--pii-p); font-weight: 600; }
	.pii-menu-mobile__voci > a > .pii-i { color: var(--pii-testo-3); height: 18px; width: 18px; }
	.pii-menu-mobile__icona { align-items: center; background: var(--pii-rosa-chiaro); border-radius: 13px; color: var(--pii-p); display: inline-flex; height: 44px; justify-content: center; width: 44px; }
	.pii-menu-mobile__icona .pii-i { height: 21px; width: 21px; }
	.pii-menu-mobile__voci a[aria-current="page"] .pii-menu-mobile__icona { background: #fff; }
	.pii-menu-mobile__attrezzi { border-top: 1px solid var(--pii-bordo); margin-top: 14px; padding-top: 18px; }
	.pii-menu-mobile__attrezzi p { color: var(--pii-testo-2); font-size: 13px; font-weight: 600; margin: 0 0 12px; }
	.pii-menu-mobile__attrezzi div { display: flex; flex-wrap: wrap; gap: 8px; }
	.pii-menu-mobile__attrezzi a { border: 1px solid var(--pii-bordo); border-radius: 999px; color: var(--pii-testo); font-size: 14px; padding: 9px 15px; text-decoration: none; }
	.pii-menu-mobile__piede { border-top: 1px solid var(--pii-bordo); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px var(--pii-pad) calc(14px + env(safe-area-inset-bottom)); }
	.pii-menu-mobile__piede .pii-bottone { box-sizing: border-box; padding: 14px 10px; }
	.pii-menu-mobile__piede--utente { align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
	.pii-menu-mobile__piede--solo { grid-template-columns: minmax(0, 1fr); }
	.pii-menu-mobile__piede--utente .pii-bottone { padding: 11px 16px; }
	.pii-menu-mobile__utente { align-items: center; color: var(--pii-testo); display: flex; font-weight: 600; gap: 10px; min-width: 0; text-decoration: none; }

	.pii-griglia, .pii-serie-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pii-prova__griglia, .pii-lista { grid-template-columns: minmax(0, 1fr); }
	.pii-riprendi__scheda { grid-template-columns: minmax(0, 1fr); }
	.pii-riprendi__media { aspect-ratio: 16 / 9; min-height: 0; }
	.pii-riprendi__testo { padding: 18px 16px 20px; }
	.pii-riprendi__titolo { font-size: 26px; }

	/* Filtri sul telefono: la ricerca, poi "Filtri" e gli attrezzi in una riga che scorre.
	   Livello, durata, serie e ordine stanno in un foglio che sale dal basso. */
	.pii-filtri { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
	.pii-filtri__riga { display: contents; }
	.pii-cerca { flex: 1 1 100%; order: 1; }
	.pii-cerca input, .pii-select select { font-size: 16px; } /* sotto i 16 px l'iPhone ingrandisce la pagina al tocco */
	.pii-cerca input::placeholder { font-size: 14.5px; }
	.pii-filtri__apri { align-items: center; background: #fff; border: 1px solid var(--pii-bordo); border-radius: 999px; color: var(--pii-testo); cursor: pointer; display: inline-flex; flex: none; font: inherit; font-size: 14px; font-weight: 500; gap: 7px; height: 40px; order: 2; padding: 0 14px; }
	.pii-filtri__apri .pii-i { height: 17px; width: 17px; }
	.pii-filtri__numero { align-items: center; background: var(--pii-p); border-radius: 999px; color: #fff; display: inline-flex; font-size: 11.5px; font-weight: 700; height: 19px; justify-content: center; min-width: 19px; padding: 0 5px; }
	.pii-filtri__numero[hidden] { display: none; }
	/* Con un filtro attivo si vede anche a foglio chiuso. */
	.pii-filtri:has(.pii-segmenti input:checked:not([value=""]), .pii-filtri__campi .pii-select:not(.pii-select--ordine) option:checked:not([value=""])) .pii-filtri__apri { background: var(--pii-rosa-chiaro); border-color: var(--pii-rosa-chiaro); color: var(--pii-p); font-weight: 600; }
	.pii-chips {
		border-bottom: 0;
		box-sizing: border-box;
		flex: 1 1 0;
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 calc(-1 * var(--pii-pad)) 0 0;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
		min-width: 0;
		order: 3;
		overflow-x: auto;
		padding: 0 calc(var(--pii-pad) + 16px) 0 0;
		scrollbar-width: none;
	}
	.pii-chips::-webkit-scrollbar { display: none; }
	.pii-chip span { font-size: 14px; line-height: 20px; padding: 9px 14px; }
	.pii-chips .pii-chip input:checked + span { box-shadow: none; }

	.pii-filtri__velo { background: rgba(38, 24, 28, .46); display: block; inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 200; }
	.pii-filtri.is-aperto .pii-filtri__velo { opacity: 1; pointer-events: auto; }
	.pii-filtri__piu {
		background: #fff;
		border-radius: 22px 22px 0 0;
		bottom: 0;
		box-shadow: 0 -14px 40px rgba(38, 24, 28, .18);
		display: flex;
		flex-direction: column;
		left: 0;
		margin: 0 auto;
		max-height: 88dvh;
		max-width: 560px;
		position: fixed;
		right: 0;
		transform: translateY(104%);
		transition: transform .32s cubic-bezier(.2, .8, .25, 1), visibility .32s;
		visibility: hidden;
		z-index: 210;
	}
	/* Aprendo diventa subito visibile: il fuoco deve poter andare sul pulsante di chiusura. */
	.pii-filtri.is-aperto .pii-filtri__piu { transform: none; transition: transform .32s cubic-bezier(.2, .8, .25, 1); visibility: visible; }
	.pii-filtri__testa { align-items: center; border-bottom: 1px solid var(--pii-bordo); display: flex; flex: none; justify-content: space-between; padding: 12px 14px 12px 20px; }
	.pii-filtri__titolo { color: var(--pii-testo); font-family: var(--pii-titoli); font-size: 22px; font-weight: 400; margin: 0; }
	.pii-filtri__campi { display: grid; flex: 1; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 22px; }
	.pii-filtri__piede { align-items: center; border-top: 1px solid var(--pii-bordo); display: flex; flex: none; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
	.pii-filtri__piede .pii-bottone { flex: 1; }
	.pii-filtri__azzera { background: none; border: 0; color: var(--pii-testo-2); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 6px; text-decoration: underline; text-underline-offset: 3px; }

	.pii-filtri__campi .pii-segmenti { background: none; border: 0; border-radius: 0; display: block; height: auto; padding: 0; }
	.pii-filtri__campi .pii-segmenti legend { color: var(--pii-testo); float: none; font-size: 14px; font-weight: 600; margin: 0 0 8px; }
	.pii-filtri__campi .pii-segmenti > div { background: var(--pii-sfondo); border-radius: 14px; display: grid; gap: 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; }
	.pii-filtri__campi .pii-segmento span { border-radius: 11px; display: block; font-size: 15px; padding: 10px 0; text-align: center; }
	.pii-filtri__campi .pii-segmento input:checked + span { background: #fff; box-shadow: 0 1px 4px rgba(52, 67, 73, .18); }
	.pii-filtri__campi .pii-select { background: none; border: 0; border-radius: 0; display: block; height: auto; }
	.pii-filtri__campi .pii-select__nome { clip-path: none; color: var(--pii-testo); display: block; font-size: 14px; font-weight: 600; height: auto; margin: 0 0 8px; position: static; width: auto; }
	.pii-filtri__campi .pii-select select { background: #fff; border: 1px solid var(--pii-bordo-campo); border-radius: 14px; box-sizing: border-box; height: 50px; max-width: none; padding: 0 42px 0 14px; width: 100%; }
	.pii-filtri__campi .pii-select .pii-i { bottom: 17px; right: 14px; top: auto; }
	.pii-filtri__campi .pii-select:not(.pii-select--ordine):has(option:checked:not([value=""])) select { background: var(--pii-rosa-chiaro); border-color: var(--pii-rosa-chiaro); }

	/* Bersagli più comodi per il dito */
	.pii-testata__link { margin: -8px 0; padding: 8px 0; }

	.pii-statistiche { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.pii-stat { border-left: 0; grid-template-columns: 7.5em minmax(0, 1fr); padding: 0; }

	.pii-lezione { padding-top: 0; }
	.pii-briciole { display: none; }
	.pii-lezione__corpo { gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
	.pii-player { border-radius: 0; margin: 0 calc(-1 * var(--pii-pad)); }
	.pii-player__riprendi { bottom: 60px; left: 12px; }
	.pii-lezione__serie { margin-top: 20px; }
	.pii-schede-mobile { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 999px; display: flex; gap: 4px; margin: 24px 0 16px; padding: 4px; }
	.pii-schede-mobile button { background: transparent; border: 0; border-radius: 999px; color: var(--pii-testo); cursor: pointer; flex: 1; font: inherit; font-size: 14px; padding: 10px; }
	.pii-schede-mobile button[aria-selected="true"] { background: var(--pii-rosa-chiaro); color: var(--pii-p); font-weight: 600; }
	.pii-lezione .pii-pannello:not(.is-attivo) { display: none; }
	.pii-lezione__descrizione { border-top: 0; margin-top: 0; padding-top: 0; }
	.pii-lezione__descrizione.is-attivo { margin-bottom: 16px; }
}

@media (max-width: 600px) {
	.pii-griglia { gap: 16px; grid-template-columns: minmax(0, 1fr); }
	.pii-scheda { column-gap: 14px; display: grid; grid-template-columns: 132px minmax(0, 1fr); }
	.pii-scheda__testo { padding-top: 0; }
	.pii-scheda__titolo { font-size: 14px; }
	.pii-scheda__luogo { font-size: 12px; }
	.pii-scheda__badge { left: 6px; top: 6px; }
	.pii-scheda__badge .pii-badge { font-size: 10px; padding: 4px 7px; }
	.pii-scheda__durata { bottom: 6px; font-size: 10px; right: 6px; }
	.pii-serie-griglia { gap: 28px 14px; }
	.pii-testata__titolo { font-size: 26px; }
}

/* -------------------------------------------------------------------------- */
/* Versione 2: allineamento all'artefatto con le pagine intere                */
/* -------------------------------------------------------------------------- */

.pii-logo__testo,
.pii-testata__titolo,
.pii-riprendi__ciao,
.pii-riprendi__titolo,
.pii-lezione__titolo,
.pii-invito__titolo { font-family: var(--pii-titoli); }
.pii-logo__testo { color: var(--pii-testo); font-weight: 300; }
.pii-nav a { font-size: 15px; }
.pii-scheda__titolo a, .pii-serie, .pii-prova__scheda { color: var(--pii-testo); }
.pii-testata__titolo { font-weight: 300; }
.pii-testata--trattino .pii-testata__titolo { font-size: clamp(32px, 3.6vw, 46px); }
.pii-testata--trattino .pii-testata__titolo::before { margin-bottom: 26px; width: 38px; }

/* Prova una lezione: una scheda grande e due piccole */
.pii-prova__griglia--mosaico { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.pii-prova__griglia--mosaico .pii-prova__scheda:first-child { display: flex; flex-direction: column; grid-row: span 2; }
.pii-prova__griglia--mosaico .pii-prova__scheda:first-child .pii-prova__media { aspect-ratio: auto; flex: 1; min-height: 320px; }
.pii-prova__griglia--mosaico .pii-play { height: 62px; width: 62px; }
.pii-prova__titolo { font-size: 16px; }

/* Appena pubblicate e correlate: a scorrimento orizzontale sul telefono */
.pii-recenti, .pii-correlate { margin: 0; }
.pii-correlate { margin-top: clamp(48px, 7vw, 90px); }

/* Riprendi: scheda grande e, accanto, le altre lezioni in corso */
.pii-riprendi__corpo { align-items: start; display: grid; gap: 36px; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.pii-riprendi__corpo--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.pii-riprendi__scheda { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.pii-riprendi__titolo { font-size: clamp(30px, 2.8vw, 40px); }
.pii-anche { display: grid; }
.pii-anche__titolo { border-bottom: 1px solid var(--pii-bordo); font-size: 15px; font-weight: 600; margin: 12px 0 0; padding-bottom: 14px; }
.pii-in-corso { align-items: center; border-bottom: 1px solid var(--pii-bordo); color: var(--pii-testo); display: grid; gap: 16px; grid-template-columns: 150px minmax(0, 1fr); padding: 14px 0; text-decoration: none; }
.pii-in-corso__media { aspect-ratio: 16 / 9; border-radius: 10px; display: block; overflow: hidden; position: relative; }
.pii-in-corso__media img, .pii-in-corso__media .pii-immagine-vuota { display: block; height: 100%; object-fit: cover; width: 100%; }
.pii-in-corso__titolo { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pii-in-corso__mancano { color: var(--pii-testo-2); display: block; font-size: 13px; margin-top: 6px; }
.pii-in-corso:hover .pii-in-corso__titolo { color: var(--pii-p); }
.pii-anche .pii-testata__link { margin-top: 20px; }

/* Catalogo */
.pii-gruppo-attivo { margin: -10px 0 18px; }
.pii-gruppo-attivo a { align-items: center; color: var(--pii-p); display: inline-flex; font-size: 14px; font-weight: 600; gap: 6px; text-decoration: none; }
.pii-gruppo-attivo .pii-i { height: 16px; width: 16px; }
.pii-altre { align-items: center; display: flex; flex-direction: column; gap: 14px; margin-top: 52px; }
.pii-altre .pii-bottone { min-width: 260px; }
.pii-altre__conta { color: var(--pii-testo-2); font-size: 14px; margin: 0; }
.pii-sezione-blocco + .pii-sezione-blocco { margin-top: 56px; }
.pii-vuoto--riquadro { background: #fff; border: 1px solid var(--pii-bordo); border-radius: 16px; }

/* Insegnanti come etichette con la foto */
.pii-chip-insegnanti__titolo { color: var(--pii-testo); font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.pii-chip-insegnanti > div { display: flex; flex-wrap: wrap; gap: 12px; }
.pii-chip-insegnante { align-items: center; background: transparent; border: 1px solid var(--pii-bordo); border-radius: 999px; color: var(--pii-testo); display: inline-flex; font-size: 15px; gap: 12px; padding: 5px 22px 5px 5px; text-decoration: none; }
.pii-chip-insegnante:hover { background: #fff; }
.pii-chip-insegnante .pii-avatar { background: var(--pii-notte); flex: none; height: 40px; overflow: hidden; width: 40px; }
.pii-chip-insegnante .pii-avatar img { height: 100%; object-fit: cover; width: 100%; }
.pii-insegnanti .pii-insegnante--scheda { padding: 20px; }
.pii-insegnanti .pii-insegnante__foto { height: 60px; width: 60px; }

/* Invito ad abbonarsi */
.pii-invito { background: var(--pii-rosa-chiaro); }
.pii-invito__dentro { align-items: center; display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; margin: 0 auto; max-width: var(--pii-larghezza); padding: clamp(48px, 6vw, 84px) var(--pii-pad); }
.pii-invito__titolo { color: var(--pii-testo); font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; line-height: 1.15; margin: 0 0 12px; }
.pii-invito p { color: var(--pii-testo-2); font-size: 16px; margin: 0; }
.pii-invito .pii-bottone--contorno { border-color: var(--pii-testo); }

@media (max-width: 900px) {
	/* scroll-padding: senza, l'aggancio porta la prima scheda a filo del bordo dello schermo. */
	.pii-griglia--scorrevole,
	.pii-serie-griglia--scorrevole { display: flex; gap: 16px; margin: 0 calc(-1 * var(--pii-pad)); overflow-x: auto; padding: 0 var(--pii-pad) 6px; scroll-padding: 0 var(--pii-pad); scroll-snap-type: x mandatory; scrollbar-width: none; }
	.pii-griglia--scorrevole::-webkit-scrollbar,
	.pii-serie-griglia--scorrevole::-webkit-scrollbar { display: none; }
	.pii-serie-griglia--scorrevole { gap: 14px; }
	.pii-serie-griglia--scorrevole > .pii-serie { flex: 0 0 min(64%, 280px); min-width: 0; scroll-snap-align: start; }
	.pii-griglia--scorrevole > .pii-scheda { display: block; flex: 0 0 78%; scroll-snap-align: start; }
	.pii-griglia--scorrevole > .pii-scheda .pii-scheda__testo { padding-top: 12px; }
	.pii-prova__griglia--mosaico { grid-template-columns: minmax(0, 1fr); }
	.pii-prova__griglia--mosaico .pii-prova__scheda:first-child { grid-row: auto; }
	.pii-prova__griglia--mosaico .pii-prova__scheda:first-child .pii-prova__media { aspect-ratio: 16 / 9; min-height: 0; }
	.pii-riprendi__corpo { grid-template-columns: minmax(0, 1fr); }
	.pii-riprendi__scheda { grid-template-columns: minmax(0, 1fr); }
	.pii-in-corso { grid-template-columns: 120px minmax(0, 1fr); }
	.pii-testata--trattino { align-items: flex-start; flex-direction: column; }
	.pii-invito__dentro .pii-azioni { width: 100%; }
	.pii-invito__dentro .pii-bottone { flex: 1 1 100%; }
}

/* -------------------------------------------------------------------------- */
/* Filtri senza ricaricare: caricamento, entrata delle schede, chip           */
/* -------------------------------------------------------------------------- */

/* Barra sottile che scorre sotto i filtri mentre arrivano i risultati */
.pii-catalogo__barra { background: transparent; border-radius: 2px; height: 2px; margin: -14px 0 12px; overflow: hidden; position: relative; }
.pii-catalogo.is-caricamento .pii-catalogo__barra { background: var(--pii-bordo); }
.pii-catalogo.is-caricamento .pii-catalogo__barra::after {
	animation: pii-barra 1s cubic-bezier(.6, 0, .4, 1) infinite;
	background: linear-gradient(90deg, transparent, var(--pii-p), transparent);
	content: "";
	inset: 0;
	position: absolute;
	transform: translateX(-100%);
	width: 45%;
}
@keyframes pii-barra { to { transform: translateX(240%); } }

/* Le schede vecchie si attenuano mentre si aspetta */
.pii-catalogo .pii-griglia,
.pii-catalogo .pii-vuoto { transition: opacity .25s ease, filter .25s ease, transform .25s ease; }
.pii-catalogo.is-caricamento .pii-griglia,
.pii-catalogo.is-caricamento .pii-vuoto { filter: saturate(.4); opacity: .38; pointer-events: none; transform: translateY(4px); }

/* Le schede nuove salgono e compaiono una dopo l'altra */
@keyframes pii-entra {
	from { opacity: 0; transform: translateY(18px) scale(.985); }
	to { opacity: 1; transform: none; }
}
.pii-entra { animation: pii-entra .55s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--pii-i, 0) * 40ms); }

/* Il numero di lezioni si illumina quando cambia */
@keyframes pii-lampeggia {
	0% { color: var(--pii-p); transform: translateY(-3px); opacity: .2; }
	100% { color: var(--pii-testo-3); transform: none; opacity: 1; }
}
.pii-testata__destra.pii-lampeggia { animation: pii-lampeggia .6s ease both; display: inline-block; }

/* Chip e livelli: passaggio morbido e una piccola "pressione" al clic */
.pii-chip span, .pii-segmento span { transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .12s ease, box-shadow .22s ease; }
.pii-chip:active span, .pii-segmento:active span { transform: scale(.96); }
.pii-chip input:checked + span { box-shadow: 0 6px 16px -8px rgba(52, 67, 73, .7); }
.pii-segmento input:checked + span { box-shadow: inset 0 0 0 1px rgba(122, 47, 61, .12); }
.pii-cerca { transition: border-color .2s ease, box-shadow .2s ease; }
.pii-cerca:focus-within { box-shadow: 0 0 0 4px rgba(122, 47, 61, .08); }
.pii-altre .pii-bottone.is-caricamento { opacity: .6; pointer-events: none; }

/* Recesso dal contratto: il modulo della pagina /recesso/ e il link nel dettaglio dell'abbonamento. */
.pii-recesso { max-width: 640px; }
.pii-recesso__riquadro { background: #fff; border: 1px solid var(--wp--preset--color--bordo, #e4e7e8); border-radius: 16px; padding: clamp(20px, 4vw, 32px); }
.pii-recesso__riquadro h2 { font-size: 24px; margin: 0 0 10px; }
.pii-recesso__riquadro p { line-height: 1.7; margin: 0 0 18px; }
.pii-recesso__riquadro p:last-child { margin-bottom: 0; }
.pii-recesso__riquadro a { color: var(--pii-p); }
.pii-recesso__campo label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.pii-recesso__campo input { background: #fff; border: 1px solid var(--pii-bordo-campo); border-radius: 10px; box-sizing: border-box; color: var(--pii-testo); font: inherit; font-size: 16px; padding: 12px 14px; width: 100%; }
.pii-recesso__campo input:focus { border-color: var(--pii-p); outline: 2px solid var(--pii-rosa); }
.pii-recesso__campo input[aria-invalid="true"] { border-color: #b3261e; }
.pii-recesso__campo small { color: var(--pii-testo-2); display: block; font-size: 13px; line-height: 1.5; margin-top: 6px; }
.pii-recesso .pii-recesso__errore { color: #b3261e; }
.pii-recesso__trappola { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; }
.pii-recesso .pii-bottone { cursor: pointer; }
.pii-recesso .pii-avvertenza { margin-top: 24px; }
.pii-recesso .pii-avvertenza a, .pii-recesso-link a { color: var(--pii-p); }
.pii-recesso-link { font-size: 14px; margin: 16px 0 0; }
.pii-legale > .pii-legale__azione { margin: 1.25rem 0 1.5rem; }
@media (max-width: 600px) {
	.pii-recesso .pii-bottone { box-sizing: border-box; justify-content: center; width: 100%; }
}

.pii-video { color: #fff; cursor: pointer; inset: 0; position: absolute; }
.pii-video__copertina { display: block; height: 100%; object-fit: cover; width: 100%; }
.pii-video__avvia { background: none; border: 0; cursor: pointer; inset: 0; padding: 0; position: absolute; }
.pii-video__avvia:focus-visible .pii-play { outline: 3px solid #fff; outline-offset: 3px; }
.pii-video__avvia .pii-play { height: 72px; width: 72px; }
.pii-video__avvia .pii-play .pii-i { height: 30px; width: 30px; }
.pii-video .pii-video__nota { background: linear-gradient(transparent, rgba(0, 0, 0, .74)); bottom: 0; color: #fff; font-size: 13px; left: 0; line-height: 1.4; margin: 0; padding: 34px 16px 10px; position: absolute; right: 0; }
.pii-video .pii-video__nota a { color: inherit; }

.pii-cookie table { border-collapse: collapse; font-size: 14px; width: 100%; }
.pii-cookie th, .pii-cookie td { border-bottom: 1px solid var(--pii-bordo); color: var(--pii-testo); font-weight: 400; line-height: 1.5; padding: 10px 14px 10px 0; text-align: left; vertical-align: top; }
.pii-cookie thead th { font-weight: 600; }
.pii-cookie tbody th { width: 32%; }
.pii-cookie code { display: block; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
	.pii-cookie thead { display: none; }
	.pii-cookie tr { border-bottom: 1px solid var(--pii-bordo); display: block; padding: 10px 0; }
	.pii-cookie th, .pii-cookie td { border: 0; display: block; padding: 2px 0; }
	.pii-cookie tbody th { width: auto; }
	.pii-cookie td:nth-child(2)::before { content: "Di chi è: "; font-weight: 600; }
	.pii-cookie td:nth-child(3)::before { content: "A cosa serve: "; font-weight: 600; }
	.pii-cookie td:nth-child(4)::before { content: "Durata: "; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
	.pii-entra, .pii-testata__destra.pii-lampeggia, .pii-catalogo.is-caricamento .pii-catalogo__barra::after { animation: none; }
	.pii-catalogo .pii-griglia, .pii-filtri__piu, .pii-filtri__velo, .pii-menu-mobile, .pii-chip span, .pii-segmento span { transition: none; }
}