/**
 * myPrivacy — Cookie banner.
 *
 * Nota di progetto: questo componente vive dentro migliaia di siti diversi, quindi
 * non può avere una personalità cromatica propria — la eredita dal brand tramite le
 * custom properties impostate dal pannello. La sua identità è quindi STRUTTURALE:
 * un banner che non ha un aspetto, ma ha buone maniere.
 *
 * Le tre decisioni che ne derivano:
 *
 *  1. Comportamento nativo per dispositivo. Su telefono è un bottom sheet con
 *     maniglia, ancorato al bordo e rispettoso della safe area; su desktop è una
 *     scheda d'angolo che non copre il contenuto. Non una barra a tutta larghezza
 *     che taglia la pagina in due.
 *
 *  2. Divulgazione progressiva sul posto. Il pannello preferenze non sostituisce il
 *     banner: lo espande, con una transizione di altezza. L'utente non perde il
 *     contesto, e non c'è il salto tipico dei banner che scambiano due riquadri.
 *
 *  3. Adattamento al componente, non alla finestra. Le container query fanno sì che
 *     il banner si riorganizzi in base alla larghezza che ha davvero, quindi funziona
 *     anche dentro layout stretti, iframe o anteprime nel pannello di amministrazione.
 *
 * Ogni scelta ha un fallback: @supports dove serve, e nessuna funzionalità critica
 * dipende da una proprietà recente.
 */

.myprivacy,
.myprivacy-badge,
.myprivacy-embed {
	/* Palette derivata da un solo accento: il pannello imposta 4 valori, il resto
	   si calcola, così i contrasti restano coerenti con qualunque brand. */
	--_bg: var( --myprivacy-bg, #fff );
	--_text: var( --myprivacy-text, #1b1f24 );
	--_accent: var( --myprivacy-accent, #2563eb );
	--_accent-text: var( --myprivacy-accent-text, #fff );
	--_radius: var( --myprivacy-radius, 14px );
	--_width: var( --myprivacy-width, 400px );

	--_muted: color-mix( in srgb, var( --_text ) 58%, transparent );
	--_line: color-mix( in srgb, var( --_text ) 12%, transparent );
	--_surface: color-mix( in srgb, var( --_text ) 4%, var( --_bg ) );
	--_ring: color-mix( in srgb, var( --_accent ) 45%, transparent );

	/* Ombra a due livelli: una vicina per il distacco, una lontana e morbida per la
	   profondità. Una sola ombra grande legge sempre come "riquadro incollato". */
	--_shadow:
		0 1px 2px color-mix( in srgb, #000 8%, transparent ),
		0 12px 32px -8px color-mix( in srgb, #000 22%, transparent );

	--_pad: 22px;
	--_gap: 14px;
	--_ease: cubic-bezier( .22, .68, .36, 1 );

	font-family: var( --myprivacy-font, inherit );
	color: var( --_text );
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

/* Densità compatta: non riduce solo i margini ma anche la scala tipografica,
   altrimenti il testo resta grande e il risparmio di spazio è illusorio. */
.myprivacy--compact {
	--_pad: 16px;
	--_gap: 10px;
}

.myprivacy--compact .myprivacy__title { font-size: .9rem; }
.myprivacy--compact .myprivacy__message { font-size: .8125rem; line-height: 1.55; }
.myprivacy--compact .myprivacy__cat-desc { font-size: .78125rem; }
.myprivacy--compact .myprivacy-btn { min-height: 36px; padding: 9px 13px; font-size: .8125rem; }
.myprivacy--compact .myprivacy__cat { padding-block: 11px; }
.myprivacy--compact .myprivacy__mark { width: 24px; height: 24px; }

.myprivacy *,
.myprivacy *::before,
.myprivacy *::after { box-sizing: inherit; }

.myprivacy[hidden],
.myprivacy [hidden] { display: none !important; }

/* Tema scuro: si ridefiniscono solo i due colori di base, tutto il resto è derivato. */

.myprivacy--theme-dark {
	--_bg: #16181c;
	--_text: #f1f3f5;
	--_shadow:
		0 1px 2px color-mix( in srgb, #000 40%, transparent ),
		0 16px 40px -10px color-mix( in srgb, #000 60%, transparent );
}

@media ( prefers-color-scheme: dark ) {
	.myprivacy--theme-auto {
		--_bg: #16181c;
		--_text: #f1f3f5;
		--_shadow:
			0 1px 2px color-mix( in srgb, #000 40%, transparent ),
			0 16px 40px -10px color-mix( in srgb, #000 60%, transparent );
	}
}

/* ------------------------------------------------------------------ overlay */

.myprivacy__overlay {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: color-mix( in srgb, #05070a 52%, transparent );
	animation: myprivacy-fade .28s var( --_ease ) both;
}

@supports ( backdrop-filter: blur( 2px ) ) {
	.myprivacy__overlay { backdrop-filter: blur( 3px ) saturate( .9 ); }
}

/* -------------------------------------------------------------- contenitore */

/* LA STRUTTURA SCORREVOLE VALE A OGNI DIMENSIONE, NON SOLO SUL TELEFONO.
   
   Il foglio ha un limite di altezza e `overflow: hidden`: se il contenuto lo
   supera viene tagliato in silenzio, senza barra di scorrimento e senza alcun
   segno che manchi qualcosa. Avevo previsto lo scorrimento solo sotto i 640px
   di larghezza, come se il problema fosse la larghezza — ma dipende
   dall'ALTEZZA della finestra: un portatile con una finestra da 780px e le
   preferenze aperte supera il limite esattamente come un telefono.
   
   Tre fasce: intestazione ferma, centro scorrevole, comandi sempre raggiungibili.
   È la disposizione dei fogli modali, e vale ovunque. */
.myprivacy.is-expanded .myprivacy__prefs {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.myprivacy.is-expanded .myprivacy__prefs-inner {
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.myprivacy .myprivacy__head,
.myprivacy .myprivacy__actions {
	flex: none;
}

.myprivacy.is-expanded .myprivacy__prefs-foot {
	position: sticky;
	inset-block-end: 0;
	background: var( --_bg );
	padding-block: 12px;
	box-shadow: 0 -8px 12px -12px rgba( 0, 0, 0, .5 );
}

.myprivacy__sheet {
	position: fixed;
	z-index: 999999;
	container-type: inline-size;
	container-name: myprivacy;
	background: var( --_bg );
	border: 1px solid var( --_line );
	border-radius: var( --_radius );
	box-shadow: var( --_shadow );
	overflow: hidden;
	max-height: min( 88dvh, 900px );
	display: flex;
	flex-direction: column;
	isolation: isolate;
}

/* Elemento firma: un filo d'accento in testa al foglio, spesso 2px, che sfuma
   verso i bordi. È l'unico ornamento del componente — tutto il resto è
   tipografia e spaziatura — e nasce dal colore del brand, quindi cambia identità
   con il sito senza che io debba scegliere nulla al posto dell'editore. */
.myprivacy__sheet::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix( in srgb, var( --_accent ) 70%, transparent ) 22%,
		var( --_accent ) 50%,
		color-mix( in srgb, var( --_accent ) 70%, transparent ) 78%,
		transparent
	);
	z-index: 2;
	pointer-events: none;
}

/* Fallback per i browser senza unità dvh. */
@supports not ( height: 1dvh ) {
	.myprivacy__sheet { max-height: 88vh; }
}

/* ---------------------------------------------------- posizione sullo schermo

   Nove ancoraggi su una griglia 3x3. La posizione dice DOVE compare, la forma
   dice CHE COSA è: due assi indipendenti, così ogni combinazione ha senso e
   nessuna scelta ne esclude un'altra.

   Le posizioni centrate usano transform per il centraggio; le animazioni sono
   quindi differenziate per asse, altrimenti la keyframe sovrascriverebbe il
   centraggio e il banner si sposterebbe di mezza larghezza al termine.
*/

.myprivacy__sheet {
	--_edge: 18px;
}

.myprivacy--compact .myprivacy__sheet { --_edge: 14px; }

.myprivacy--pos-top-left .myprivacy__sheet,
.myprivacy--pos-top-center .myprivacy__sheet,
.myprivacy--pos-top-right .myprivacy__sheet {
	inset-block-start: max( var( --_edge ), env( safe-area-inset-top ) );
}

.myprivacy--pos-bottom-left .myprivacy__sheet,
.myprivacy--pos-bottom-center .myprivacy__sheet,
.myprivacy--pos-bottom-right .myprivacy__sheet {
	inset-block-end: max( var( --_edge ), env( safe-area-inset-bottom ) );
}

.myprivacy--pos-middle-left .myprivacy__sheet,
.myprivacy--pos-center .myprivacy__sheet,
.myprivacy--pos-middle-right .myprivacy__sheet {
	inset-block-start: 50%;
}

.myprivacy--pos-top-left .myprivacy__sheet,
.myprivacy--pos-middle-left .myprivacy__sheet,
.myprivacy--pos-bottom-left .myprivacy__sheet {
	inset-inline-start: var( --_edge );
}

.myprivacy--pos-top-right .myprivacy__sheet,
.myprivacy--pos-middle-right .myprivacy__sheet,
.myprivacy--pos-bottom-right .myprivacy__sheet {
	inset-inline-end: var( --_edge );
}

.myprivacy--pos-top-center .myprivacy__sheet,
.myprivacy--pos-bottom-center .myprivacy__sheet {
	inset-inline-start: 50%;
	transform: translateX( -50% );
}

.myprivacy--pos-middle-left .myprivacy__sheet,
.myprivacy--pos-middle-right .myprivacy__sheet {
	transform: translateY( -50% );
}

.myprivacy--pos-center .myprivacy__sheet {
	inset-inline-start: 50%;
	transform: translate( -50%, -50% );
}

/* --------------------------------------------------------------- forma

   card  scheda contenuta, la meno invadente: non copre il contenuto
   bar   striscia da bordo a bordo, per chi vuole la massima evidenza
   pill  striscia sottile a una riga, l'ingombro minimo possibile
*/

.myprivacy--shape-card .myprivacy__sheet {
	width: var( --_width );
	max-width: calc( 100vw - var( --_edge ) * 2 );
}

.myprivacy--shape-bar .myprivacy__sheet {
	inset-inline: var( --_edge );
	width: auto;
	max-width: none;
	transform: none;
}

.myprivacy--shape-bar.myprivacy--pos-center .myprivacy__sheet {
	inset-block-start: 50%;
	transform: translateY( -50% );
}

/* La striscia sottile: contenuto su una riga sola, testo troncato con eleganza,
   nessuna descrizione lunga. È il compromesso per chi vuole essere presente
   senza occupare spazio. */
.myprivacy--shape-pill .myprivacy__sheet {
	width: auto;
	max-width: min( calc( var( --_width ) * 1.9 ), calc( 100vw - var( --_edge ) * 2 ) );
	border-radius: 999px;
	--_pad: 8px;
}

@container myprivacy ( min-width: 460px ) {
	.myprivacy--shape-pill .myprivacy__sheet {
		flex-direction: row;
		align-items: center;
		gap: 4px;
	}

	.myprivacy--shape-pill .myprivacy__head { padding: 0 0 0 16px; }
	.myprivacy--shape-pill .myprivacy__body { padding: 0 4px; }
	.myprivacy--shape-pill .myprivacy__actions { padding: 6px 6px 6px 0; }
	.myprivacy--shape-pill .myprivacy__actions-set { grid-auto-flow: column; grid-auto-columns: max-content; }
}

.myprivacy--shape-pill .myprivacy__title { display: none; }
.myprivacy--shape-pill .myprivacy__links { margin-top: 2px; }

.myprivacy--shape-pill .myprivacy__message {
	font-size: .8125rem;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.myprivacy--shape-pill .myprivacy-btn {
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: .8125rem;
}

/* Quando si aprono le preferenze, la striscia deve poter crescere:
   una pillola alta 44px non può contenere quattro categorie. */
.myprivacy--shape-pill.is-expanded .myprivacy__sheet {
	border-radius: var( --_radius );
	width: var( --_width );
	--_pad: 18px;
}

@container myprivacy ( min-width: 460px ) {
	.myprivacy--shape-pill.is-expanded .myprivacy__sheet { flex-direction: column; align-items: stretch; }
	.myprivacy--shape-pill.is-expanded .myprivacy__head { padding: var( --_pad ) var( --_pad ) 0; }
	.myprivacy--shape-pill.is-expanded .myprivacy__body { padding: 10px var( --_pad ) 0; }
	.myprivacy--shape-pill.is-expanded .myprivacy__actions { padding: var( --_pad ); }
}

.myprivacy--shape-pill.is-expanded .myprivacy__title { display: block; }
.myprivacy--shape-pill.is-expanded .myprivacy__message { -webkit-line-clamp: none; }

/* ------------------------------------------------------------ animazione

   Una keyframe per asse di centraggio: le posizioni centrate conservano il
   proprio translate, altrimenti al termine dell'animazione il banner
   scatterebbe di mezza larghezza. */

.myprivacy--animated .myprivacy__sheet { animation: myprivacy-rise .32s var( --_ease ) both; }

.myprivacy--animated.myprivacy--pos-top-center .myprivacy__sheet,
.myprivacy--animated.myprivacy--pos-bottom-center .myprivacy__sheet {
	animation-name: myprivacy-rise-x;
}

.myprivacy--animated.myprivacy--pos-middle-left .myprivacy__sheet,
.myprivacy--animated.myprivacy--pos-middle-right .myprivacy__sheet {
	animation-name: myprivacy-rise-y;
}

.myprivacy--animated.myprivacy--pos-center .myprivacy__sheet {
	animation-name: myprivacy-rise-center;
}

.myprivacy--animated.myprivacy--shape-bar .myprivacy__sheet { animation-name: myprivacy-rise; }

.myprivacy--animated.myprivacy--shape-bar.myprivacy--pos-center .myprivacy__sheet {
	animation-name: myprivacy-rise-y;
}

@keyframes myprivacy-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes myprivacy-rise {
	from { opacity: 0; transform: translateY( 12px ) scale( .99 ); }
	to { opacity: 1; transform: none; }
}

@keyframes myprivacy-rise-x {
	from { opacity: 0; transform: translate( -50%, 12px ) scale( .99 ); }
	to { opacity: 1; transform: translateX( -50% ); }
}

@keyframes myprivacy-rise-y {
	from { opacity: 0; transform: translate( 0, calc( -50% + 12px ) ) scale( .99 ); }
	to { opacity: 1; transform: translateY( -50% ); }
}

@keyframes myprivacy-rise-center {
	from { opacity: 0; transform: translate( -50%, calc( -50% + 12px ) ) scale( .99 ); }
	to { opacity: 1; transform: translate( -50%, -50% ); }
}

/* ------------------------------------------------------------------ maniglia */

.myprivacy__grip { display: none; }

/* ------------------------------------------------------------------- testata */

.myprivacy__head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: var( --_pad ) var( --_pad ) 0;
}

/* Segno d'identità quando il sito non ha un logo: uno scudo piccolo, nel colore
   d'accento, che dà al banner un punto d'appoggio visivo senza pesare. */
.myprivacy__mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: color-mix( in srgb, var( --_accent ) 12%, transparent );
	color: var( --_accent );
}

.myprivacy__mark svg { width: 15px; height: 15px; }

.myprivacy__logo {
	height: var( --myprivacy-logo-height, 28px );
	width: auto;
	max-width: 180px;
	object-fit: contain;
	flex: 0 0 auto;
	/* Il logo del sito è spesso pensato per uno sfondo chiaro: in tema scuro
	   lo lasciamo intatto ma gli diamo un piano d'appoggio neutro. */
}

.myprivacy--theme-dark .myprivacy__logo,
.myprivacy--theme-auto .myprivacy__logo { filter: none; }

.myprivacy__title {
	margin: 0;
	font-size: clamp( .96rem, .9rem + .3cqi, 1.06rem );
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.014em;
	color: var( --_text );
	text-wrap: balance;
}

.myprivacy__body { padding: 11px var( --_pad ) 0; }

.myprivacy__message {
	margin: 0;
	font-size: .8625rem;
	line-height: 1.62;
	color: var( --_muted );
	text-wrap: pretty;
	max-width: 62ch;
}

.myprivacy__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 10px;
	margin-top: 11px;
}

.myprivacy__link {
	position: relative;
	font-size: .78125rem;
	font-weight: 500;
	color: var( --_accent );
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-color: color-mix( in srgb, var( --_accent ) 30%, transparent );
	transition: text-decoration-color .16s var( --_ease );
}

.myprivacy__link:hover {
	text-decoration: underline;
	text-decoration-color: var( --_accent );
}

/* Separatore fra i collegamenti: un punto mediano, non una barra verticale.
   Legge come prosa invece che come tabella. */
.myprivacy__link + .myprivacy__link::before {
	content: "·";
	position: absolute;
	inset-inline-start: -8px;
	color: var( --_muted );
	opacity: .5;
}

/* ------------------------------------------------------------------- azioni */

.myprivacy__actions { padding: var( --_pad ); }

.myprivacy__actions-set {
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr;
}

/* Container query: sopra i 380px di larghezza del COMPONENTE (non della finestra)
   i pulsanti stanno in riga. Così il banner si comporta bene anche dentro
   un'anteprima o un layout stretto, dove la larghezza della finestra mentirebbe. */
@container myprivacy ( min-width: 380px ) {
	.myprivacy__actions-set {
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
	}

	.myprivacy--shape-bar .myprivacy__actions-set {
		grid-auto-columns: max-content;
		justify-content: flex-end;
	}
}

/* Le barre a tutta larghezza mettono testo e pulsanti sulla stessa riga
   quando c'è spazio: è ciò che le rende meno alte e quindi meno invadenti. */
@container myprivacy ( min-width: 720px ) {
	/* La striscia mette testo e pulsanti sulla stessa riga quando c'è spazio:
	   è ciò che la rende bassa e quindi meno ingombrante. */
	.myprivacy--shape-bar .myprivacy__sheet { flex-direction: row; align-items: center; }
	.myprivacy--shape-bar .myprivacy__head { padding-bottom: var( --_pad ); }
	.myprivacy--shape-bar .myprivacy__body { padding-block: var( --_pad ); flex: 1 1 auto; }
	.myprivacy--shape-bar.is-expanded .myprivacy__sheet { flex-direction: column; align-items: stretch; }
}

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

.myprivacy-btn {
	font: inherit;
	font-size: .84375rem;
	font-weight: 550;
	line-height: 1.2;
	letter-spacing: -.005em;
	padding: 11px 15px;
	min-height: 40px;
	border-radius: calc( var( --_radius ) * .5 );
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	text-align: center;
	transition:
		background-color .16s var( --_ease ),
		border-color .16s var( --_ease ),
		box-shadow .16s var( --_ease ),
		transform .08s var( --_ease );
}

.myprivacy-btn:active { transform: scale( .985 ); }

.myprivacy-btn--accent {
	background: var( --_accent );
	color: var( --_accent-text );
	box-shadow:
		inset 0 1px 0 color-mix( in srgb, #fff 18%, transparent ),
		0 1px 2px color-mix( in srgb, var( --_accent ) 30%, transparent );
}

.myprivacy-btn--accent:hover {
	background: color-mix( in srgb, var( --_accent ) 90%, #000 );
	box-shadow:
		inset 0 1px 0 color-mix( in srgb, #fff 18%, transparent ),
		0 3px 10px -2px color-mix( in srgb, var( --_accent ) 45%, transparent );
}

/* «Rifiuta» ha lo stesso peso visivo di «Accetta»: in Unione europea rifiutare
   deve costare quanto accettare, e un pulsante sbiadito è un dark pattern. */
.myprivacy-btn--equal {
	background: var( --_surface );
	color: var( --_text );
	border-color: var( --_line );
}

.myprivacy-btn--equal:hover {
	border-color: color-mix( in srgb, var( --_text ) 28%, transparent );
}

.myprivacy-btn--ghost {
	background: transparent;
	color: var( --_muted );
	padding-inline: 10px;
}

.myprivacy-btn--ghost:hover { color: var( --_text ); }

.myprivacy-btn:focus-visible,
.myprivacy__close:focus-visible,
.myprivacy__link:focus-visible,
.myprivacy__switch input:focus-visible + .myprivacy__track {
	outline: 2px solid var( --_accent );
	outline-offset: 2px;
	border-radius: 6px;
}

/* --------------------------------------------------------------- preferenze */

/* Espansione sul posto: il trucco grid 0fr → 1fr anima l'altezza senza conoscerla
   in anticipo, cosa che max-height non permette senza numeri arbitrari. */
.myprivacy__prefs {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s var( --_ease );
	border-top: 1px solid transparent;
	min-height: 0;
}

.myprivacy__prefs > * { overflow: hidden; min-height: 0; }

.myprivacy.is-expanded .myprivacy__prefs {
	grid-template-rows: 1fr;
	border-top-color: var( --_line );
}

.myprivacy.is-expanded .myprivacy__prefs > * { overflow-y: auto; }

@supports not ( grid-template-rows: 0fr ) {
	.myprivacy__prefs { display: block; height: 0; }
	.myprivacy.is-expanded .myprivacy__prefs { height: auto; }
}

.myprivacy__prefs-inner { padding: 4px var( --_pad ) var( --_pad ); }

.myprivacy__cat {
	padding: 13px 12px;
	margin-inline: -12px;
	border-radius: 10px;
	border-bottom: 1px solid var( --_line );
	transition: background-color .16s var( --_ease );
}

.myprivacy__cat:hover { background: color-mix( in srgb, var( --_text ) 3%, transparent ); }
.myprivacy__cat:last-of-type { border-bottom: 0; }

.myprivacy__switch {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	font-size: .875rem;
	font-weight: 500;
}

.myprivacy__switch input {
	position: absolute;
	opacity: 0;
	width: 42px;
	height: 24px;
	margin: 0;
	cursor: pointer;
}

.myprivacy__track {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 23px;
	border-radius: 999px;
	background: color-mix( in srgb, var( --_text ) 18%, transparent );
	box-shadow: inset 0 1px 2px color-mix( in srgb, #000 12%, transparent );
	transition: background-color .22s var( --_ease );
}

.myprivacy__track::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .3 );
	/* Il pomello si allunga leggermente durante la corsa e torna tondo all'arrivo:
	   dà peso fisico al gesto. Un dettaglio piccolo, ma è ciò che distingue un
	   interruttore curato da un quadrato che cambia colore. */
	transition: transform .22s var( --_ease ), width .22s var( --_ease );
}

.myprivacy__switch input:checked + .myprivacy__track { background: var( --_accent ); }
.myprivacy__switch input:checked + .myprivacy__track::after { transform: translateX( 17px ); }
.myprivacy__switch:active .myprivacy__track::after { width: 21px; }
.myprivacy__switch input:disabled + .myprivacy__track { opacity: .5; cursor: not-allowed; }

.myprivacy__cat-desc {
	margin: 7px 0 0 52px;
	font-size: .8125rem;
	line-height: 1.55;
	color: var( --_muted );
	text-wrap: pretty;
}

.myprivacy__prefs-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var( --_line );
}

.myprivacy__prefs-foot .myprivacy-btn { flex: 1 1 auto; }

.myprivacy__close {
	margin-inline-start: auto;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var( --_muted );
	padding: 2px 6px;
	border-radius: 6px;
	flex: 0 0 auto;
}

.myprivacy__close:hover { color: var( --_text ); }

/* ------------------------------------------------------- telefoni: sheet */

@media ( max-width: 640px ) {
	/* Su telefono ogni combinazione di posizione e forma converge sul foglio
	   ancorato in basso: è la convenzione che gli utenti già conoscono, e su
	   uno schermo stretto non esistono davvero nove posizioni diverse. */
	.myprivacy .myprivacy__sheet {
		inset: auto 0 0 0 !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		border-radius: var( --_radius ) var( --_radius ) 0 0 !important;
		border-inline: 0;
		border-block-end: 0;
		padding-bottom: env( safe-area-inset-bottom );
		max-height: 90dvh;
		--_pad: 18px;
	}

	.myprivacy--shape-pill .myprivacy__title { display: block; }
	.myprivacy--shape-pill .myprivacy__message { -webkit-line-clamp: none; }
	.myprivacy--shape-pill .myprivacy-btn { border-radius: calc( var( --_radius ) * .5 ); }

	/* ---------------------------------------------------------------------
	   Il foglio deve SCORRERE, non essere tagliato.

	   Con le preferenze aperte il contenuto supera facilmente l'altezza di uno
	   schermo piccolo: quattro categorie con la loro descrizione non ci stanno
	   su un iPhone SE. Senza una struttura scorrevole il foglio cresce oltre lo
	   schermo, il limite di altezza lo taglia e il ritaglio nasconde proprio la
	   parte che serve — l'inizio del testo in alto e i comandi in basso.

	   La struttura è a tre fasce: intestazione e piede restano fermi, e scorre
	   solo la parte centrale. È la stessa disposizione dei fogli modali delle
	   app native, ed è ciò che gli utenti si aspettano da un pannello ancorato
	   al bordo inferiore.
	   ------------------------------------------------------------------- */
	.myprivacy .myprivacy__sheet {
		display: flex;
		flex-direction: column;
		max-height: 88dvh;
		/* Ripiego per i browser senza dvh: su iOS le barre che compaiono e
		   scompaiono rendono vh inaffidabile, ma è meglio di nessun limite. */
		max-height: min( 88dvh, 88vh );
		overflow: hidden;
	}

	/* La fascia centrale è l'unica che scorre. `min-height: 0` è necessario:
	   senza, un figlio flessibile non scende mai sotto la propria altezza
	   naturale e l'area scorrevole non si comprime. */
	.myprivacy.is-expanded .myprivacy__prefs {
		flex: 1 1 auto;
		min-height: 0;
		overflow: hidden;
	}

	.myprivacy.is-expanded .myprivacy__prefs-inner {
		max-height: 100%;
		overflow-y: auto;
		/* Impedisce che lo scorrimento arrivato a fine corsa trascini la pagina
		   sotto al foglio, cosa che su iOS chiude il pannello per sbaglio. */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Intestazione e comandi restano visibili mentre il resto scorre. */
	.myprivacy .myprivacy__head,
	.myprivacy .myprivacy__actions {
		flex: none;
	}

	/* Il piede delle preferenze resta agganciato in fondo all'area scorrevole:
	   i pulsanti per confermare non devono richiedere di scorrere fino in fondo. */
	.myprivacy.is-expanded .myprivacy__prefs-foot {
		position: sticky;
		inset-block-end: 0;
		background: var( --_bg );
		padding-block: 12px;
		margin-block-start: 4px;
		box-shadow: 0 -8px 12px -12px rgba( 0, 0, 0, .5 );
	}

	/* Su schermi molto bassi il testo descrittivo cede il posto ai comandi:
	   meglio un pannello usabile che uno completo e inutilizzabile. */
	@media ( max-height: 620px ) {
		.myprivacy .myprivacy__message { display: none; }
		.myprivacy .myprivacy__cat-desc { font-size: .75rem; }
		.myprivacy .myprivacy__sheet { --_pad: 14px; }
	}

	.myprivacy--animated .myprivacy__sheet { animation-name: myprivacy-slide-up !important; }

	@keyframes myprivacy-slide-up {
		from { transform: translateY( 100% ); }
		to { transform: none; }
	}

	/* Maniglia: segnala che l'elemento è un foglio ancorato al bordo, la
	   convenzione che gli utenti già conoscono dalle app native. */
	.myprivacy__grip {
		display: block;
		width: 36px;
		height: 4px;
		margin: 8px auto 0;
		border-radius: 999px;
		background: color-mix( in srgb, var( --_text ) 18%, transparent );
	}

	.myprivacy__head { padding-top: 12px; }
	.myprivacy__cat-desc { margin-left: 0; }
	.myprivacy__actions-set { grid-auto-flow: row; }
}

/* --------------------------------------------------------------- badge */

/* Il pulsante e il banner non devono ereditare contesti di posizionamento dal
   tema: se un antenato ha transform, filter o contain, `fixed` si riferisce a
   quell'antenato invece che alla finestra. banner.js li sposta come figli diretti
   del body; queste regole evitano che siano loro stessi a crearne uno. */
/* Solo il contenitore esterno: il foglio interno usa transform per il
   posizionamento centrato e per l'animazione d'ingresso, e azzerarlo lo
   sposterebbe di mezza larghezza. */
#myprivacy-root {
	filter: none;
	contain: none;
	will-change: auto;
}

.myprivacy-badge,
.myprivacy-withdrawal-link {
	filter: none;
	contain: none;
}

.myprivacy-badge {
	position: fixed;
	/* Il molo: scostamento calcolato a runtime da coexistence.js quando in basso
	   ci sono già controlli di altri sistemi, come il pannello di Google. */
	z-index: 999997;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var( --_line );
	background: var( --_bg );
	color: var( --_muted );
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba( 0, 0, 0, .4 );
	opacity: .72;
	transition: opacity .18s var( --_ease ), transform .18s var( --_ease );
}

/* Posizione scelta dall'editore. Il molo si somma solo dal lato in cui il
   pulsante è ancorato: sommarlo in alto quando il pulsante sta in basso lo
   sposterebbe nella direzione sbagliata. */
.myprivacy-badge--bottom-left,
.myprivacy-badge--bottom-right {
	inset-block-end: calc( max( 16px, env( safe-area-inset-bottom ) ) + var( --myprivacy-dock, 0px ) );
}

.myprivacy-badge--top-left,
.myprivacy-badge--top-right {
	inset-block-start: max( 16px, env( safe-area-inset-top ) );
}

.myprivacy-badge--bottom-left,
.myprivacy-badge--top-left {
	inset-inline-start: 16px;
}

.myprivacy-badge--bottom-right,
.myprivacy-badge--top-right {
	inset-inline-end: 16px;
}

.myprivacy-badge:hover { opacity: 1; transform: scale( 1.06 ); }
.myprivacy-badge svg { width: 19px; height: 19px; }

/* ------------------------------------------------- placeholder degli embed */

/* Il contenitore NON impone dimensioni.

   Un segnaposto che si dimensiona da sé deve indovinare l'altezza dell'elemento
   che sostituisce, e indovinare male sposta tutto ciò che sta sotto: è il motivo
   per cui una colonna laterale con un video incorporato si disallineava.

   Qui l'iframe resta nel flusso, privato del solo `src`, e continua a ricevere le
   regole del tema esattamente come prima. Il contenitore si limita a fare da
   riferimento per il pannello sovrapposto, con `display: contents` come ripiego
   concettuale ma senza rinunciare al bordo: si usa quindi un blocco che non
   aggiunge larghezza propria. */
.myprivacy-embed {
	position: relative;
	display: block;
	max-width: 100%;
	background:
		linear-gradient( 135deg,
			color-mix( in srgb, var( --_text ) 6%, var( --_bg ) ),
			color-mix( in srgb, var( --_text ) 3%, var( --_bg ) ) );
	border: 1px solid var( --_line );
	border-radius: var( --_radius );
	overflow: hidden;
}

/* L'iframe congelato conserva la propria scatola: niente src, nessun contenuto,
   ma stesse dimensioni di prima. È ciò che rende lo scambio invisibile al layout. */
.myprivacy-embed__frame {
	display: block;
	border: 0;
	max-width: 100%;
	background: transparent;
	pointer-events: none;
}

/* Senza le classi del tema il riquadro non ha più dimensioni proprie.
   
   Le classi vengono messe da parte durante il blocco per impedire al tema di
   costruire un player su un iframe congelato, ma con esse se ne va anche il CSS
   che lo dimensionava. Un segnaposto alto zero è invisibile: il visitatore non
   vedrebbe né il contenuto né la spiegazione del perché manca.
   
   Quando gli attributi originali dichiaravano le dimensioni si usa la loro
   proporzione; altrimenti vale un'altezza minima, che è approssimativa ma
   leggibile — e comunque preferibile al nulla. */
.myprivacy-embed:not( .myprivacy-embed--sized ) {
	min-height: 180px;
}

.myprivacy-embed:not( .myprivacy-embed--sized ) .myprivacy-embed__frame {
	width: 100%;
	min-height: 180px;
}

/* La proporzione va sul CONTENITORE, non sull'iframe.

   Molti temi costruiscono i video con un contenitore a proporzione fissa e il
   player in altezza 100% al suo interno. Il riquadro di myPrivacy si inserisce
   fra i due e rompe quel rapporto: il player chiede il 100% di un genitore che
   non ha più altezza propria, e il risultato è zero.

   Dando la proporzione al riquadro, il genitore ha di nuovo un'altezza e la
   regola del tema torna a funzionare. Vale sia mentre il contenuto è bloccato
   sia dopo il rilascio: la geometria non deve dipendere dallo stato del
   consenso, altrimenti la pagina si riorganizza al clic. */
.myprivacy-embed--sized {
	aspect-ratio: var( --myprivacy-embed-ratio, 16 / 9 );
}

.myprivacy-embed--sized .myprivacy-embed__frame {
	width: 100%;
	height: 100%;
}

/* Dopo il rilascio il player del tema può essere posizionato in assoluto:
   il riquadro fa da riferimento, come faceva il contenitore che ha sostituito. */
.myprivacy-embed.is-released {
	position: relative;
}

/* Il pannello è sovrapposto e non occupa spazio: non contribuisce all'altezza,
   quindi non può spostare nulla. */
.myprivacy-embed__panel {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
	overflow: auto;
}

/* Su riquadri molto piccoli il testo non ci sta: si riduce invece di traboccare. */
@container ( max-height: 160px ) {
	.myprivacy-embed__text { display: none; }
}

.myprivacy-embed.is-released { background: none; border: 0; }

/* Regola volutamente NON presente: `.myprivacy-embed iframe { width:100%; height:100% }`.
   Forzava l'iframe a riempire il contenitore, annullando le dimensioni che il
   tema gli assegna — ed è ciò che disallineava le colonne laterali. L'iframe
   congelato è stilizzato da .myprivacy-embed__frame, che non impone dimensioni. */

.myprivacy-embed__panel {
	padding: clamp( 16px, 4cqi, 28px );
	max-width: 440px;
	margin-inline: auto;
}

.myprivacy-embed__title { margin: 0 0 6px; font-size: .95rem; font-weight: 600; }

.myprivacy-embed__text {
	margin: 0 0 14px;
	font-size: .8125rem;
	line-height: 1.55;
	color: var( --_muted );
	text-wrap: pretty;
}

.myprivacy-embed__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/* ------------------------------------------------------------ form bloccato */

.myprivacy-form-notice {
	margin: 10px 0 0;
	padding: 10px 12px;
	font-size: .8125rem;
	line-height: 1.5;
	border-radius: 8px;
	border-inline-start: 3px solid var( --myprivacy-accent, #2563eb );
	background: color-mix( in srgb, var( --myprivacy-accent, #2563eb ) 8%, transparent );
}

/* ---------------------------------------------------------- documenti legali */

.myprivacy-doc__meta {
	font-size: .8125rem;
	opacity: .65;
	margin-bottom: 1.6em;
}

.myprivacy-doc__table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0 2.2em;
	font-size: .875rem;
}

.myprivacy-doc__table th,
.myprivacy-doc__table td {
	border: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	padding: 9px 11px;
	text-align: start;
	vertical-align: top;
}

.myprivacy-doc__table th {
	font-weight: 600;
	background: color-mix( in srgb, currentColor 5%, transparent );
}

@media ( max-width: 600px ) {
	.myprivacy-doc__table,
	.myprivacy-doc__table tbody,
	.myprivacy-doc__table tr,
	.myprivacy-doc__table td { display: block; width: 100%; }

	.myprivacy-doc__table thead { display: none; }

	.myprivacy-doc__table tr {
		margin-bottom: 14px;
		border: 1px solid color-mix( in srgb, currentColor 15%, transparent );
		border-radius: 8px;
		overflow: hidden;
	}

	.myprivacy-doc__table td { border: 0; border-bottom: 1px solid color-mix( in srgb, currentColor 10%, transparent ); }
	.myprivacy-doc__table td:last-child { border-bottom: 0; }
}

/* -------------------------------------------------------- accessibilità */

@media ( prefers-reduced-motion: reduce ) {
	.myprivacy *,
	.myprivacy__sheet,
	.myprivacy__overlay,
	.myprivacy-embed * {
		animation: none !important;
		transition: none !important;
	}
}

@media ( prefers-contrast: more ) {
	.myprivacy {
		--_line: color-mix( in srgb, var( --_text ) 40%, transparent );
		--_muted: color-mix( in srgb, var( --_text ) 85%, transparent );
	}

	.myprivacy__sheet { border-width: 2px; }
}

@media print {
	.myprivacy,
	.myprivacy-badge { display: none !important; }
}

/* Servizi di prima parte nei documenti: ogni voce è una scheda con la
   motivazione in evidenza, perché è la parte che il lettore deve poter
   valutare, non scorrere. */

.myprivacy-doc__service {
	margin: 0 0 1.6em;
	padding: 16px 18px;
	border: 1px solid color-mix( in srgb, currentColor 14%, transparent );
	border-radius: 12px;
}

.myprivacy-doc__service h3 { margin: 0 0 .5em; font-size: 1rem; }
.myprivacy-doc__service p { margin: 0 0 .6em; font-size: .875rem; line-height: 1.6; }
.myprivacy-doc__service p:last-child { margin-bottom: 0; }

.myprivacy-doc__consent {
	padding: 10px 12px;
	border-radius: 8px;
	border-inline-start: 3px solid;
}

.myprivacy-doc__consent--no {
	border-color: #2e7d32;
	background: color-mix( in srgb, #2e7d32 7%, transparent );
}

.myprivacy-doc__consent--yes {
	border-color: var( --myprivacy-accent, #2563eb );
	background: color-mix( in srgb, var( --myprivacy-accent, #2563eb ) 8%, transparent );
}

/* ------------------------------------------- funzione di recesso online */

.myprivacy-recesso { max-width: 620px; }

.myprivacy-recesso__intro {
	font-size: .9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
}

.myprivacy-recesso__field { margin-bottom: 1.1em; }

.myprivacy-recesso__field label {
	display: block;
	font-weight: 600;
	font-size: .875rem;
	margin-bottom: 5px;
}

.myprivacy-recesso__field input,
.myprivacy-recesso__field textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: .9375rem;
	border: 1px solid color-mix( in srgb, currentColor 25%, transparent );
	border-radius: 8px;
	background: transparent;
	color: inherit;
}

.myprivacy-recesso__field input:focus-visible,
.myprivacy-recesso__field textarea:focus-visible {
	outline: 2px solid var( --myprivacy-accent, #2563eb );
	outline-offset: 1px;
}

.myprivacy-recesso__hint {
	display: block;
	margin-top: 4px;
	font-size: .8125rem;
	opacity: .7;
}

/* Trappola anti-automatismi: invisibile agli utenti, non nascosta con display:none
   perché alcuni sistemi automatici ignorano i campi non renderizzati. */
.myprivacy-recesso__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.myprivacy-recesso__errors {
	padding: 12px 16px;
	margin-bottom: 1.4em;
	border-radius: 8px;
	border-left: 3px solid #d63638;
	background: color-mix( in srgb, #d63638 8%, transparent );
}

.myprivacy-recesso__errors ul { margin: 0; padding-left: 1.2em; }

.myprivacy-recesso__summary {
	margin: 0 0 1.6em;
	padding: 16px 18px;
	border: 1px solid color-mix( in srgb, currentColor 15%, transparent );
	border-radius: 10px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 18px;
	font-size: .9375rem;
}

.myprivacy-recesso__summary dt { font-weight: 600; }
.myprivacy-recesso__summary dd { margin: 0; }

.myprivacy-recesso__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.myprivacy-withdrawal-link {
	position: fixed;
	inset-block-end: calc( max( 16px, env( safe-area-inset-bottom ) ) + var( --myprivacy-dock, 0px ) );
	inset-inline-end: 16px;
	z-index: 999996;
	font-size: .75rem;
	padding: 7px 12px;
	border-radius: 999px;
	background: var( --myprivacy-bg, #fff );
	color: var( --myprivacy-text, #1b1f24 );
	border: 1px solid color-mix( in srgb, var( --myprivacy-text, #1b1f24 ) 15%, transparent );
	text-decoration: none;
	opacity: .8;
	box-shadow: 0 4px 14px -6px rgba( 0, 0, 0, .35 );
}

.myprivacy-withdrawal-link:hover { opacity: 1; }

@media print { .myprivacy-withdrawal-link { display: none; } }

/* Resa al CMP certificato.

   Quando il pannello di Google occupa lo schermo per raccogliere il consenso
   pubblicitario, i controlli di myPrivacy si tolgono di mezzo: davanti a una
   richiesta di consenso in corso non deve esserci altro a distrarre, e due
   pannelli sovrapposti sono il modo più rapido per far cliccare a caso.

   Si usa visibility invece di display per non provocare riposizionamenti
   quando il pannello si chiude. */
body.myprivacy-yield .myprivacy-badge,
body.myprivacy-yield .myprivacy-withdrawal-link,
body.myprivacy-yield #myprivacy-root {
	visibility: hidden;
	pointer-events: none;
}

/* Lo z-index di myPrivacy resta deliberatamente sotto quello del CMP di Google,
   che usa valori prossimi al massimo consentito: se qualcosa deve coprire
   qualcos'altro, è il sistema certificato a dover vincere. */

/* ------------------------------------ WooCommerce: recesso nel negozio */

.myprivacy-wc-waiver {
	margin: 16px 0;
	padding: 14px 16px;
	border-radius: 10px;
	border-inline-start: 3px solid var( --myprivacy-accent, #2563eb );
	background: color-mix( in srgb, var( --myprivacy-accent, #2563eb ) 6%, transparent );
}

.myprivacy-wc-waiver__intro {
	margin: 0 0 10px;
	font-weight: 600;
	font-size: .875rem;
}

.myprivacy-wc-waiver .form-row { margin-bottom: 8px; }
.myprivacy-wc-waiver label { font-size: .8125rem; line-height: 1.5; }

.myprivacy-wc-withdrawal {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid color-mix( in srgb, currentColor 12%, transparent );
}

.myprivacy-wc-withdrawal span {
	display: block;
	margin-top: 8px;
	font-size: .8125rem;
	opacity: .75;
}

.myprivacy-wc-withdrawal--closed {
	font-size: .875rem;
	opacity: .8;
}

/* Segnaposto costruito nel browser per i contenuti bloccati dopo il caricamento.

   A differenza di quello prodotto dal server, qui non conosciamo le dimensioni
   che il tema assegnerà all'iframe: si garantisce quindi solo un'altezza minima
   perché il riquadro sia leggibile, senza imporre una proporzione. */
.myprivacy-embed--runtime {
	min-height: 160px;
}

.myprivacy-embed--runtime .myprivacy-embed__frame {
	width: 100%;
	min-height: 160px;
}

/* Identificativo di consenso mostrato all'utente. */

.myprivacy__uid {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 8px;
	background: color-mix( in srgb, var( --_text ) 4%, transparent );
	font-size: .75rem;
	line-height: 1.5;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 10px;
	align-items: center;
}

.myprivacy__uid-label {
	font-weight: 600;
	grid-column: 1 / -1;
}

.myprivacy__uid code {
	font-size: .7rem;
	word-break: break-all;
	opacity: .85;
}

.myprivacy__uid-copy {
	border: 1px solid var( --_line );
	background: transparent;
	color: inherit;
	border-radius: 6px;
	padding: 4px 10px;
	font: inherit;
	font-size: .7rem;
	cursor: pointer;
	white-space: nowrap;
}

.myprivacy__uid-copy:hover { background: color-mix( in srgb, var( --_text ) 8%, transparent ); }

.myprivacy__uid-hint {
	grid-column: 1 / -1;
	opacity: .7;
	font-size: .6875rem;
}


/* ------------------------------------------------- scelte già confermate */

.myprivacy__confirmed { padding: 11px var( --_pad ) var( --_pad ); }
.myprivacy__confirmed[hidden] { display: none; }

/* Nella vista confermata la domanda iniziale e i suoi pulsanti non servono. */
.myprivacy.is-confirmed .myprivacy__body,
.myprivacy.is-confirmed .myprivacy__actions { display: none; }

.myprivacy__confirmed-status {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font-size: .9rem;
	color: var( --_text );
}

.myprivacy__confirmed-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background: var( --_accent );
	color: var( --_accent-text );
}

.myprivacy__confirmed-icon svg { inline-size: 14px; block-size: 14px; }

.myprivacy__confirmed-meta {
	margin: 6px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var( --_muted );
}

.myprivacy__confirmed-meta[hidden] { display: none; }

.myprivacy__confirmed-list {
	display: grid;
	gap: 0;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid color-mix( in srgb, var( --_text ) 10%, transparent );
}

.myprivacy__confirmed-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	font-size: .8375rem;
	color: var( --_text );
}

.myprivacy__confirmed-item + .myprivacy__confirmed-item {
	border-top: 1px solid color-mix( in srgb, var( --_text ) 7%, transparent );
}

.myprivacy__confirmed-state { font-size: .78125rem; color: var( --_muted ); white-space: nowrap; }
.myprivacy__confirmed-item.is-on .myprivacy__confirmed-state { color: var( --_accent ); font-weight: 600; }

.myprivacy__confirmed-note {
	margin: 12px 0 0;
	font-size: .78125rem;
	line-height: 1.55;
	color: var( --_muted );
	text-wrap: pretty;
}

.myprivacy__confirmed-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 14px;
}

@media ( max-width: 380px ) {
	.myprivacy__confirmed-actions { grid-template-columns: 1fr; }
}