/**
 * Il menu online.
 *
 * Il modello e' una carta di ristorante, non una sala giochi: titoli nel
 * carattere del tema, molto spazio, fili sottili al posto delle scatole,
 * un colore d'accento usato solo dove si deve agire. Il resto e'
 * inchiostro su fondo.
 *
 * Mobile-first sul serio: chi ordina una pizza lo fa dal divano, con il
 * telefono. Le tre colonne compaiono solo quando c'e' spazio vero.
 *
 * I ripieghi stanno su :where(:root), specificita' zero, cosi' un tema
 * che definisce le stesse variabili vince davvero. Su :root solo
 * variabili: qualunque altra dichiarazione varrebbe per tutto il sito.
 */

:where( :root ) {
	--twc-accent: var( --wp--preset--color--accent-1, #9a4a2c );
	--twc-bg: var( --wp--preset--color--base, #fbf8f2 );
	--twc-surface: var( --wp--preset--color--base-2, #f4efe6 );
	--twc-ink: var( --wp--preset--color--contrast, #1d1b19 );
	--twc-muted: var( --wp--preset--color--contrast-2, rgba( 29, 27, 25, 0.64 ) );
	--twc-line-soft: rgba( 29, 27, 25, 0.12 );
	--twc-danger: #a02c22;
	--twc-ok: #2f6b46;
	--twc-radius: 12px;
	--twc-tap: 44px;
}

.twc-ord {
	--twc-ord-titoli: var( --wp--preset--font-family--heading, Georgia, "Times New Roman", serif );
	--twc-ord-campo: color-mix( in srgb, var( --twc-ink ) 22%, transparent );
	--twc-ord-velo: color-mix( in srgb, var( --twc-ink ) 4%, transparent );

	position: relative;
	/*
	 * Il menu si porta il proprio sfondo. Senza, la fotografia del tema
	 * passa sotto ai piatti e non si legge piu' niente: il colore lo
	 * sceglie il ristoratore, ma qualcosa di pieno ci deve essere.
	 */
	background: var( --twc-bg );
	color: var( --twc-ink );
	font-family: var( --wp--preset--font-family--body, inherit );
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.twc-ord *,
.twc-ord *::before,
.twc-ord *::after {
	box-sizing: border-box;
}

/*
 * Quello che il JavaScript nasconde deve restare nascosto. Una regola
 * di classe come "display: grid" batte il nascondi del browser, ed e'
 * il motivo per cui il modulo d'ordine si vedeva per intero anche con
 * il carrello ancora vuoto.
 */
.twc-ord [hidden] {
	display: none !important;
}

.twc-ord .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

.twc-ord__icona {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
}

/* A tutta finestra ------------------------------------------------
 *
 * Un menu e' una vetrina, non un articolo da leggere: la colonna
 * stretta del tema lo strozza. Qui esce dai suoi margini e prende
 * tutta la larghezza.
 *
 * I due margini negativi li calcola il JavaScript sulla larghezza
 * vera della finestra. Il valore scritto qui e' il ripiego: funziona
 * sempre, ma conta anche la barra di scorrimento, quindi puo' avanzare
 * una decina di pixel.
 */
.twc-ord--pieno {
	margin-left: var( --twc-ord-fuga-sx, calc( 50% - 50vw ) );
	margin-right: var( --twc-ord-fuga-dx, calc( 50% - 50vw ) );
	max-width: none;
}

.twc-ord__dentro {
	max-width: 1600px;
	margin: 0 auto;
	padding: clamp( 1.25rem, 3vw, 3rem ) clamp( 1rem, 3vw, 3rem );
}

.twc-ord:not( .twc-ord--pieno ) .twc-ord__dentro {
	padding-left: 0;
	padding-right: 0;
}

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

.twc-ord__testata {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 3rem;
	margin-bottom: clamp( 1.5rem, 3vw, 2.5rem );
	padding-bottom: clamp( 1.25rem, 2.5vw, 2rem );
	border-bottom: 1px solid var( --twc-line-soft );
}

.twc-ord__logo {
	flex: 0 0 auto;
	width: 64px;
	height: auto;
	border-radius: 50%;
}

.twc-ord__testata-testo {
	flex: 1 1 22rem;
	min-width: 0;
}

.twc-ord__titolo {
	margin: 0;
	font-family: var( --twc-ord-titoli );
	font-size: clamp( 2rem, 1.4rem + 2.2vw, 3.1rem );
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.twc-ord__intro {
	max-width: 40rem;
	margin: 0.6rem 0 0;
	color: var( --twc-muted );
	font-size: 1.05rem;
}

/* Consegna o ritiro ---------------------------------------------- */

.twc-ord__servizio {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}

@media ( min-width: 880px ) {
	.twc-ord__servizio {
		align-items: flex-end;
		text-align: right;
	}
}

.twc-ord__servizio-scelta {
	display: inline-flex;
	padding: 4px;
	border: 1px solid var( --twc-line-soft );
	border-radius: 999px;
	background: var( --twc-surface );
}

.twc-ord__servizio-voce {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 8.5rem;
	min-height: var( --twc-tap );
	padding: 0.45rem 1.35rem;
	border-radius: 999px;
	color: var( --twc-muted );
	line-height: 1.25;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.twc-ord__servizio-voce input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.twc-ord__servizio-voce:hover {
	color: var( --twc-ink );
}

.twc-ord__servizio-voce:has( input:checked ) {
	background: var( --twc-ink );
	color: var( --twc-bg );
}

.twc-ord__servizio-voce:has( input:focus-visible ) {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

.twc-ord__servizio-nome {
	font-size: 0.95rem;
	font-weight: 600;
}

.twc-ord__servizio-tempo {
	font-size: 0.78rem;
	opacity: 0.78;
}

.twc-ord__servizio-unico {
	margin: 0;
	font-weight: 600;
}

.twc-ord__servizio-info {
	margin: 0;
	color: var( --twc-muted );
	font-size: 0.86rem;
}

/* Impianto ------------------------------------------------------- */

.twc-ord__corpo {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 1.5rem;
	align-items: start;
}

@media ( min-width: 880px ) {
	.twc-ord__corpo {
		/*
		 * Le colonne crescono con la finestra invece di restare ferme:
		 * su uno schermo grande il menu deve riempirlo, non lasciare due
		 * terzi di vuoto ai lati.
		 */
		grid-template-columns:
			clamp( 150px, 13vw, 230px )
			minmax( 0, 1fr )
			clamp( 300px, 25vw, 420px );
		gap: clamp( 1.5rem, 3vw, 3.5rem );
		/* La pagina si riempie anche con un menu di quattro piatti. */
		min-height: 62svh;
	}
}

/* Sul telefono la barra dell'ordine sta sopra al contenuto: sotto
   all'ultimo piatto ci vuole lo spazio per non nasconderlo. */
@media ( max-width: 879px ) {
	.twc-ord__dentro {
		padding-bottom: calc( 6rem + env( safe-area-inset-bottom ) );
	}
}

/* L'indice delle categorie ---------------------------------------- */

.twc-ord__categorie ul {
	display: flex;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	/* Le categorie scorrono di lato senza trascinare la pagina. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.twc-ord__categorie ul::-webkit-scrollbar {
	display: none;
}

.twc-ord__categoria {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: var( --twc-tap );
	color: var( --twc-muted );
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.twc-ord__categoria:hover {
	color: var( --twc-ink );
}

.twc-ord__categoria:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

.twc-ord__categoria.is-attiva {
	color: var( --twc-ink );
	font-weight: 600;
}

.twc-ord__conta {
	color: var( --twc-muted );
	font-size: 0.75rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Sul telefono le categorie restano in alto mentre si scorre il menu:
   senza, per cambiare categoria bisogna risalire tutta la pagina. */
@media ( max-width: 879px ) {
	.twc-ord__categorie {
		position: sticky;
		top: 0;
		z-index: 4;
		margin: 0 calc( -1 * clamp( 1rem, 3vw, 3rem ) );
		padding: 0 clamp( 1rem, 3vw, 3rem );
		background: var( --twc-bg );
		border-bottom: 1px solid var( --twc-line-soft );
	}

	.twc-ord__categoria {
		border-bottom: 2px solid transparent;
	}

	.twc-ord__categoria.is-attiva {
		border-bottom-color: var( --twc-accent );
	}

	.twc-ord__conta {
		display: none;
	}
}

@media ( min-width: 880px ) {
	.twc-ord__categorie {
		position: sticky;
		top: 1.5rem;
		max-height: calc( 100svh - 3rem );
		overflow-y: auto;
	}

	.twc-ord__categorie ul {
		flex-direction: column;
		gap: 0;
		overflow: visible;
		border-left: 1px solid var( --twc-line-soft );
	}

	.twc-ord__categoria {
		min-height: 0;
		margin-left: -1px;
		padding: 0.5rem 0 0.5rem 1rem;
		border-left: 2px solid transparent;
	}

	.twc-ord__categoria.is-attiva {
		border-left-color: var( --twc-accent );
	}
}

/* Sezioni e prodotti --------------------------------------------- */

.twc-ord__sezione {
	margin: 0 0 clamp( 2.5rem, 5vw, 4rem );
	scroll-margin-top: 4.5rem;
}

.twc-ord__sezione-titolo {
	margin: 0 0 0.35rem;
	font-family: var( --twc-ord-titoli );
	font-size: clamp( 1.55rem, 1.25rem + 0.9vw, 2.05rem );
	font-weight: 400;
	line-height: 1.15;
}

.twc-ord__sezione-nota {
	max-width: 42rem;
	margin: 0 0 1rem;
	color: var( --twc-muted );
	font-size: 0.95rem;
}

/*
 * L'elenco: un prodotto per riga, separati da un filo.
 *
 * Una riga per piatto si legge come si legge un menu di carta, dall'alto
 * in basso. Niente scatole intorno a ogni piatto: quaranta scatole una
 * sotto l'altra fanno un tabellone, non una carta.
 */
.twc-ord__elenco {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var( --twc-line-soft );
}

.twc-ord__voce {
	border-bottom: 1px solid var( --twc-line-soft );
}

.twc-ord__voce-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.6rem 1.25rem;
	width: 100%;
	padding: 1.15rem 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

a.twc-ord__voce-riga:hover {
	background: var( --twc-ord-velo );
}

a.twc-ord__voce-riga:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: -2px;
}

.twc-ord__voce.is-esaurito .twc-ord__voce-riga {
	opacity: 0.5;
}

.twc-ord__voce-foto {
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 10px;
}

/* Base zero: il testo si stringe accanto alla foto invece di spingere
   il pulsante a capo quando la descrizione e' lunga. */
.twc-ord__voce-dati {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.twc-ord__voce-nome {
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * La descrizione si ferma a due righe: con tre ingredienti o con venti,
 * le righe dell'elenco restano alte uguali e l'occhio scorre dritto.
 */
.twc-ord__voce-testo {
	display: -webkit-box;
	overflow: hidden;
	color: var( --twc-muted );
	font-size: 0.92rem;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.twc-ord__voce-coda {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
	min-width: 7.5rem;
	text-align: right;
}

.twc-ord__voce-prezzo {
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.twc-ord__voce-esaurito {
	color: var( --twc-danger );
	font-size: 0.85rem;
	font-weight: 600;
}

/*
 * Il pulsante compare passando sopra la riga con il mouse. Non e' un
 * secondo pulsante: e' la stessa riga, che porta alla scheda del
 * prodotto. Per questo quando manca il mouse - telefono, tablet - resta
 * sempre visibile, e compare anche quando la riga prende il fuoco con
 * la tastiera.
 */
.twc-ord__voce-vai {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 1rem;
	border: 1px solid var( --twc-ink );
	border-radius: 999px;
	color: var( --twc-ink );
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

a.twc-ord__voce-riga:hover .twc-ord__voce-vai,
a.twc-ord__voce-riga:focus-visible .twc-ord__voce-vai {
	opacity: 1;
	transform: none;
	background: var( --twc-ink );
	color: var( --twc-bg );
}

@media ( hover: none ) {
	.twc-ord__voce-vai {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.twc-ord__voce-riga,
	.twc-ord__voce-vai {
		transition: none;
	}

	.twc-ord__voce-vai {
		transform: none;
	}
}

/*
 * I formati in una riga sotto alla descrizione, allineata al testo.
 *
 * Con tre formati servono tre prezzi visibili insieme: chi guarda il
 * menu sceglie anche in base a quanto costa la famiglia rispetto alla
 * singola. Il titolo sopra lo scrive il ristoratore, e puo' non
 * esserci.
 */
.twc-ord__formati-riga {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.9rem;
	margin-top: -0.2rem;
}

.twc-ord__voce-riga:has( .twc-ord__voce-foto ) .twc-ord__formati-riga {
	padding-left: calc( 92px + 1.25rem );
}

.twc-ord__formati-titolo {
	color: var( --twc-muted );
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.twc-ord__formati-elenco {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.1rem;
}

.twc-ord__formato-voce {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.twc-ord__formato-voce-nome {
	color: var( --twc-muted );
}

.twc-ord__formato-voce-prezzo {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/*
 * Sul telefono prezzo e pulsante scendono su una riga loro, larga
 * quanto il piatto: messi di fianco al testo lasciavano alla
 * descrizione due parole e mezzo.
 */
@media ( max-width: 560px ) {
	.twc-ord__voce-riga {
		gap: 0.6rem 0.9rem;
		padding: 1rem 0;
	}

	.twc-ord__voce-foto {
		width: 76px;
		height: 76px;
	}

	.twc-ord__formati-riga {
		order: 3;
	}

	.twc-ord__voce-riga:has( .twc-ord__voce-foto ) .twc-ord__formati-riga {
		padding-left: 0;
	}

	.twc-ord__voce-coda {
		flex-direction: row;
		order: 4;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 0.6rem;
	}
}

/*
 * L'avviso sull'eta' minima e' rosso perche' deve essere letto prima di
 * ordinare, non dopo. E' anche l'unica cosa rossa della riga, cosi' non
 * si confonde con altro.
 */
.twc-ord__eta {
	margin: 0.15rem 0 0;
	color: var( --twc-danger );
	font-size: 0.84rem;
	font-weight: 600;
}

.twc-ord__esaurito {
	margin: 0.5rem 0 0;
	color: var( --twc-danger );
	font-weight: 600;
}

/* La scheda del prodotto ------------------------------------------
 *
 * Un prodotto alla volta, con lo spazio per sceglierlo bene: formato,
 * ingredienti a scelta, quantita'. Il pulsante in fondo e' l'unico che
 * mette davvero qualcosa nel carrello. Sugli schermi larghi la foto sta
 * a sinistra e le scelte a destra, come sfogliando una carta.
 */

.twc-ord__scheda {
	max-width: 1040px;
}

/* Le due colonne della scheda dipendono dallo spazio della colonna del
   catalogo, non dalla finestra: con il carrello di fianco, una finestra
   larga puo' lasciare al prodotto meno spazio di un telefono girato. */
.twc-ord__catalogo {
	container-type: inline-size;
	min-width: 0;
}

@container ( min-width: 780px ) {
	.twc-ord__scheda:has( .twc-ord__scheda-foto ) {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
		column-gap: clamp( 2rem, 3vw, 3.5rem );
		align-items: start;
	}

	.twc-ord__scheda:has( .twc-ord__scheda-foto ) > * {
		grid-column: 2;
	}

	.twc-ord__scheda:has( .twc-ord__scheda-foto ) > .twc-ord__indietro {
		grid-column: 1 / -1;
	}

	.twc-ord__scheda:has( .twc-ord__scheda-foto ) > .twc-ord__scheda-foto {
		position: sticky;
		top: 1.5rem;
		grid-column: 1;
		grid-row: 2 / span 30;
		max-height: none;
		aspect-ratio: 1;
		margin: 0;
	}
}

.twc-ord__indietro {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var( --twc-tap );
	margin-bottom: 0.5rem;
	color: var( --twc-muted );
	font-size: 0.92rem;
	text-decoration: none;
}

.twc-ord__indietro:hover,
.twc-ord__indietro:focus-visible {
	color: var( --twc-ink );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.twc-ord__scheda-foto {
	display: block;
	width: 100%;
	max-height: 380px;
	margin: 0 0 1.5rem;
	object-fit: cover;
	border-radius: 16px;
}

.twc-ord__scheda-nome {
	margin: 0 0 0.6rem;
	font-family: var( --twc-ord-titoli );
	font-size: clamp( 1.9rem, 1.5rem + 1.4vw, 2.6rem );
	font-weight: 400;
	line-height: 1.1;
}

.twc-ord__scheda-testo {
	margin: 0 0 0.6rem;
	color: var( --twc-muted );
	font-size: 1rem;
}

.twc-ord__formati {
	margin: 1.75rem 0 0;
	padding: 0;
	border: 0;
}

.twc-ord__formati legend,
.twc-ord__gruppo-extra legend {
	float: left;
	width: 100%;
	margin: 0 0 0.7rem;
	padding: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var( --twc-muted );
}

.twc-ord__formati legend ~ *,
.twc-ord__gruppo-extra legend ~ * {
	clear: both;
}

.twc-ord__formato {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 52px;
	margin-bottom: 0.5rem;
	padding: 0.6rem 1rem;
	border: 1px solid var( --twc-line-soft );
	border-radius: var( --twc-radius );
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.twc-ord__formato:hover {
	border-color: var( --twc-ord-campo );
}

.twc-ord__formato:has( input:checked ) {
	border-color: var( --twc-ink );
	box-shadow: inset 0 0 0 1px var( --twc-ink );
}

.twc-ord__formato input,
.twc-ord__opzione input,
.twc-ord__pagamento input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var( --twc-ink );
}

.twc-ord__formato-nome {
	flex: 1 1 auto;
}

.twc-ord__formato-prezzo {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Le aggiunte ---------------------------------------------------- */

.twc-ord__aggiunte {
	margin: 1.5rem 0 0;
}

.twc-ord__aggiunte > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var( --twc-tap );
	border-bottom: 1px solid var( --twc-line-soft );
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.twc-ord__aggiunte > summary::-webkit-details-marker {
	display: none;
}

.twc-ord__aggiunte > summary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg ) translateY( -2px );
	transition: transform 0.2s ease;
}

.twc-ord__aggiunte[open] > summary::after {
	transform: rotate( -135deg ) translateY( -2px );
}

.twc-ord__gruppo-extra {
	margin: 1.25rem 0 0;
	padding: 0;
	border: 0;
}

.twc-ord__obbligatorio {
	margin-left: 0.5rem;
	color: var( --twc-danger );
	font-size: 0.72rem;
	letter-spacing: 0.06em;
}

/*
 * Ogni opzione e' alta quanto un dito: si sceglie dal telefono, con una
 * mano, spesso in piedi.
 */
.twc-ord__opzione {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	border-bottom: 1px solid var( --twc-line-soft );
	cursor: pointer;
}

.twc-ord__opzione > span:first-of-type {
	flex: 1 1 auto;
}

.twc-ord__extra-prezzo {
	color: var( --twc-muted );
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * Il piede resta attaccato in fondo allo schermo mentre si scorrono le
 * aggiunte: il prezzo cambia mentre si sceglie, e va visto mentre si
 * sceglie, non dopo essere tornati in fondo alla pagina.
 */
.twc-ord__scheda-piede {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.75rem;
	padding: 1rem 0 calc( 1rem + env( safe-area-inset-bottom ) );
	border-top: 1px solid var( --twc-line-soft );
	background: var( --twc-bg );
}

.twc-ord__quantita {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.twc-ord__quantita button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.twc-ord__quantita button:hover {
	border-color: var( --twc-ink );
}

.twc-ord__quantita button:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

.twc-ord__quantita span {
	min-width: 1.6ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.twc-ord__quantita--grande button {
	width: 44px;
	height: 44px;
	font-size: 1.25rem;
}

.twc-ord__quantita--grande span {
	min-width: 2ch;
	font-size: 1.1rem;
	font-weight: 600;
}

/* I pulsanti che fanno qualcosa ----------------------------------- */

.twc-ord__aggiungi--grande,
.twc-ord__ordina,
.twc-ord__conferma,
.twc-ord__barra-tasto {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	min-height: 54px;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var( --twc-accent );
	color: var( --twc-on-accent, #fff );
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.twc-ord__aggiungi--grande:hover,
.twc-ord__ordina:hover:not( :disabled ),
.twc-ord__conferma:hover:not( :disabled ),
.twc-ord__barra-tasto:hover {
	filter: brightness( 1.08 );
}

.twc-ord__aggiungi--grande:focus-visible,
.twc-ord__ordina:focus-visible,
.twc-ord__conferma:focus-visible,
.twc-ord__barra-tasto:focus-visible {
	outline: 2px solid var( --twc-ink );
	outline-offset: 3px;
}

.twc-ord__ordina:disabled,
.twc-ord__conferma:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.twc-ord__aggiungi--grande {
	flex: 1 1 auto;
	justify-content: space-between;
	white-space: nowrap;
}

.twc-ord__aggiungi-totale {
	font-variant-numeric: tabular-nums;
}

.twc-ord__ordina,
.twc-ord__conferma {
	width: 100%;
}

/* Un collegamento che si comporta da pulsante: Cambia, Togli, Usa. */
.twc-ord__link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
}

.twc-ord__link:hover {
	color: var( --twc-accent );
}

/* Carrello ------------------------------------------------------- */

.twc-ord__carrello {
	padding: clamp( 1.25rem, 2vw, 1.75rem );
	background: var( --twc-surface );
	border: 1px solid var( --twc-line-soft );
	border-radius: 18px;
}

@media ( min-width: 880px ) {
	.twc-ord__carrello {
		position: sticky;
		top: 1.5rem;
		/* svh e non vh: sul telefono vh conta anche la barra del browser
		   che sparisce scorrendo, e il fondo del carrello finisce sotto. */
		max-height: calc( 100svh - 3rem );
		overflow-y: auto;
	}
}

.twc-ord__carrello-testata {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
}

.twc-ord__carrello-titolo {
	margin: 0;
	font-family: var( --twc-ord-titoli );
	font-size: 1.45rem;
	font-weight: 400;
}

.twc-ord__servizio-scelto {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	margin: 0 0 1rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var( --twc-line-soft );
	color: var( --twc-muted );
	font-size: 0.9rem;
}

.twc-ord__servizio-scelto .twc-ord__link {
	color: var( --twc-ink );
	font-size: 0.85rem;
}

/* Il tasto per chiudere serve solo quando l'ordine e' un foglio a tutto
   schermo, cioe' sul telefono. Sul computer il carrello e' sempre li'. */
.twc-ord__chiudi {
	display: none;
	width: var( --twc-tap );
	height: var( --twc-tap );
	padding: 0;
	border: 1px solid var( --twc-line-soft );
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.twc-ord__righe {
	display: grid;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.twc-ord__riga-carrello {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 0.5rem 0.75rem;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 1px solid var( --twc-line-soft );
	font-size: 0.95rem;
}

.twc-ord__riga-nome {
	grid-column: 1 / -1;
	font-weight: 600;
	line-height: 1.35;
}

.twc-ord__riga-extra {
	display: block;
	color: var( --twc-muted );
	font-size: 0.84rem;
	font-weight: 400;
}

.twc-ord__riga-prezzo {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.twc-ord__totali {
	margin: 0 0 0.25rem;
}

.twc-ord__totali p {
	display: flex;
	justify-content: space-between;
	margin: 0.35rem 0;
	color: var( --twc-muted );
	font-size: 0.93rem;
}

.twc-ord__totali strong {
	color: var( --twc-ink );
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.twc-ord__totali .twc-ord__totale {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --twc-line-soft );
	color: var( --twc-ink );
	font-size: 1.1rem;
	font-weight: 600;
}

.twc-ord__totali .twc-ord__totale strong {
	font-weight: 700;
}

.twc-ord__ordina {
	margin-top: 1.1rem;
}

.twc-ord__vuoto,
.twc-ord__nota {
	margin: 0;
	color: var( --twc-muted );
	font-size: 0.93rem;
}

/* Il credito di prova: sfondo spento, come in area clienti, perché non
 * deve sembrare denaro vero. */
.twc-ord__credito {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0.9rem 0 0;
	padding: 0.75rem 0.9rem;
	min-height: var( --twc-tap, 44px );
	border: 1px solid var( --twc-line );
	border-left: 3px solid var( --twc-accent );
	border-radius: var( --twc-radius-sm, 8px );
	background: var( --twc-surface-alt, transparent );
	cursor: pointer;
}

.twc-ord__credito input {
	margin-top: 0.2rem;
	flex: none;
}

.twc-ord__credito span {
	display: grid;
	gap: 0.15rem;
	font-weight: 600;
}

.twc-ord__credito small {
	font-weight: 400;
	color: var( --twc-muted );
	font-size: 0.85rem;
}

.twc-ord__fatto-credito {
	font-weight: 600;
}

.twc-ord__avviso-eta {
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var( --twc-danger );
	background: color-mix( in srgb, var( --twc-danger ) 7%, transparent );
	color: var( --twc-danger );
	font-size: 0.86rem;
	font-weight: 600;
}

.twc-ord__errore {
	margin: 0.75rem 0 0;
	color: var( --twc-danger );
	font-size: 0.9rem;
	font-weight: 600;
}

/* L'ordine sul telefono ------------------------------------------
 *
 * Il carrello non puo' stare in fondo alla pagina: con quaranta piatti
 * sopra non ci arriva nessuno. Sta attaccato in basso in una barra che
 * dice sempre quanto si sta spendendo, e toccandola si apre a tutto
 * schermo, come in qualsiasi applicazione per ordinare.
 */
@media ( max-width: 879px ) {
	.twc-ord__chiudi {
		display: block;
		flex: 0 0 auto;
	}

	.twc-ord__carrello {
		position: fixed;
		inset: 0;
		z-index: 60;
		margin: 0;
		padding: 0 clamp( 1rem, 4vw, 1.5rem ) calc( 1.5rem + env( safe-area-inset-bottom ) );
		border: 0;
		border-radius: 0;
		background: var( --twc-bg );
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY( 100% );
		visibility: hidden;
		transition: transform 0.28s ease, visibility 0.28s;
	}

	.twc-ord__carrello[data-aperto] {
		transform: none;
		visibility: visible;
	}

	/*
	 * Il titolo resta in alto mentre si scorre l'ordine. I margini
	 * negativi lo allargano fino ai bordi del foglio; quello in alto
	 * pero' no, o la prima riga della spesa gli finisce sotto.
	 */
	.twc-ord__carrello-testata {
		position: sticky;
		top: 0;
		z-index: 1;
		margin: 0 clamp( -1.5rem, -4vw, -1rem ) 0.75rem;
		padding: 0.9rem clamp( 1rem, 4vw, 1.5rem );
		background: var( --twc-bg );
		border-bottom: 1px solid var( --twc-line-soft );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.twc-ord__carrello {
		transition: none;
	}
}

/* La barra in fondo ---------------------------------------------- */

.twc-ord__barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
	padding: 0.6rem 0.9rem calc( 0.6rem + env( safe-area-inset-bottom ) );
	background: color-mix( in srgb, var( --twc-bg ) 92%, transparent );
	border-top: 1px solid var( --twc-line-soft );
	-webkit-backdrop-filter: blur( 10px );
	backdrop-filter: blur( 10px );
}

@media ( min-width: 880px ) {
	.twc-ord__barra {
		display: none !important;
	}
}

.twc-ord__barra-tasto {
	justify-content: flex-start;
	width: 100%;
	padding: 0 1.1rem;
}

.twc-ord__barra-conta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 0.45rem;
	border-radius: 14px;
	background: color-mix( in srgb, var( --twc-on-accent, #fff ) 22%, transparent );
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

.twc-ord__barra-testo {
	flex: 1 1 auto;
	text-align: left;
}

.twc-ord__barra-totale {
	font-variant-numeric: tabular-nums;
}

/* Mentre l'ordine e' aperto la pagina sotto non deve scorrere: si
   scorre il foglio, non il menu che ci sta dietro. */
.twc-ord-fermo,
.twc-ord-fermo body {
	overflow: hidden;
}

/* Il modulo ------------------------------------------------------- */

.twc-ord__modulo {
	display: grid;
	margin-top: 1.5rem;
}

.twc-ord__gruppo {
	margin: 0;
	padding: 1.35rem 0 1.15rem;
	border: 0;
	border-top: 1px solid var( --twc-line-soft );
}

/*
 * Il titolo del gruppo dentro lo spazio del gruppo: di suo un legend si
 * appoggia sulla riga del bordo e su uno sfondo a fotografia sembra
 * tagliato a meta'.
 */
.twc-ord__gruppo legend {
	float: left;
	width: 100%;
	margin: 0 0 0.9rem;
	padding: 0;
	font-family: var( --twc-ord-titoli );
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
}

.twc-ord__gruppo legend ~ * {
	clear: both;
}

.twc-ord__campo {
	display: grid;
	/* La colonna non cresce oltre il riquadro: senza minmax( 0, ... )
	   un campo allargato a mano allarga anche il contenitore, e il
	   modulo esce dai suoi bordi. */
	grid-template-columns: minmax( 0, 1fr );
	gap: 0.35rem;
	margin: 0 0 0.85rem;
	color: var( --twc-muted );
	font-size: 0.85rem;
	font-weight: 500;
}

.twc-ord__etichetta {
	display: block;
	margin: 0 0 0.35rem;
	color: var( --twc-muted );
	font-size: 0.85rem;
	font-weight: 500;
}

.twc-ord input[type="text"],
.twc-ord input[type="tel"],
.twc-ord input[type="email"],
.twc-ord input[type="search"],
.twc-ord select,
.twc-ord textarea {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 10px;
	background: var( --twc-bg );
	color: var( --twc-ink );
	/* 16 pixel: sotto, il telefono ingrandisce la pagina quando si
	   tocca un campo, e il cliente si ritrova in mezzo al modulo. */
	font: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.twc-ord textarea {
	min-height: 84px;
	resize: vertical;
}

.twc-ord input[type="text"]:focus,
.twc-ord input[type="tel"]:focus,
.twc-ord input[type="email"]:focus,
.twc-ord input[type="search"]:focus,
.twc-ord select:focus,
.twc-ord textarea:focus {
	border-color: var( --twc-ink );
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --twc-accent ) 22%, transparent );
}

.twc-ord__riga {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0 0.75rem;
}

@media ( min-width: 420px ) {
	.twc-ord__riga {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	.twc-ord__riga--cap {
		grid-template-columns: minmax( 0, 0.7fr ) minmax( 0, 1.3fr );
	}
}

.twc-ord__pagamento {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	border-bottom: 1px solid var( --twc-line-soft );
	cursor: pointer;
}

.twc-ord__pagamento:last-of-type {
	border-bottom: 0;
}

.twc-ord__ritiro {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	margin: 0;
	font-weight: 600;
}

/* Le fasce orarie ------------------------------------------------- */

.twc-ord__slot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.twc-ord__ora {
	min-width: 4.6rem;
	min-height: 42px;
	padding: 0 0.9rem;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 999px;
	background: transparent;
	color: var( --twc-ink );
	font: inherit;
	font-size: 0.93rem;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.twc-ord__ora:hover {
	border-color: var( --twc-ink );
}

.twc-ord__ora.is-scelta {
	border-color: var( --twc-ink );
	background: var( --twc-ink );
	color: var( --twc-bg );
}

.twc-ord__ora:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

/* Dove consegniamo: indirizzo e mappa ------------------------------- */

.twc-ord__cerca {
	position: relative;
	margin: 0 0 0.85rem;
}

.twc-ord__suggerimenti {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 290px;
	margin: 0;
	padding: 0.3rem 0;
	overflow-y: auto;
	list-style: none;
	background: var( --twc-bg );
	border: 1px solid var( --twc-line-soft );
	border-radius: 12px;
	box-shadow: 0 14px 34px -14px rgba( 0, 0, 0, 0.35 );
}

.twc-ord__suggerimento {
	display: flex;
	flex-direction: column;
	padding: 0.6rem 0.95rem;
	cursor: pointer;
}

.twc-ord__suggerimento:hover,
.twc-ord__suggerimento[aria-selected="true"] {
	background: var( --twc-ord-velo );
}

.twc-ord__suggerimento-via {
	font-weight: 600;
}

.twc-ord__suggerimento-luogo {
	color: var( --twc-muted );
	font-size: 0.86rem;
}

/*
 * Indirizzo oppure mappa: due schede una accanto all'altra. Si vede
 * solo la parte di quella scelta, l'altra non c'e' proprio.
 */
.twc-ord__dove-scelta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
	margin-bottom: 1.1rem;
}

.twc-ord__dove-voce {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 54px;
	padding: 0.55rem 0.8rem;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 12px;
	color: var( --twc-muted );
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.twc-ord__dove-voce input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.twc-ord__dove-voce .twc-ord__icona {
	flex: 0 0 auto;
}

.twc-ord__dove-voce:hover {
	border-color: var( --twc-ink );
	color: var( --twc-ink );
}

.twc-ord__dove-voce:has( input:checked ) {
	border-color: var( --twc-ink );
	background: var( --twc-ord-velo );
	color: var( --twc-ink );
	box-shadow: inset 0 0 0 1px var( --twc-ink );
}

.twc-ord__dove-voce:has( input:checked ) .twc-ord__icona {
	color: var( --twc-accent );
}

.twc-ord__dove-voce:has( input:focus-visible ) {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

@media ( max-width: 330px ) {
	.twc-ord__dove-scelta {
		grid-template-columns: 1fr;
	}
}

.twc-ord__posizione .twc-ord__posizione-stato {
	margin: 0 0 0.75rem;
}

.twc-ord__tasto-mappa {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: var( --twc-tap );
	padding: 0 1.1rem;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 999px;
	background: transparent;
	color: var( --twc-ink );
	font: inherit;
	font-size: 0.93rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.twc-ord__tasto-mappa:hover,
.twc-ord__tasto-mappa[aria-expanded="true"] {
	border-color: var( --twc-ink );
}

.twc-ord__tasto-mappa:focus-visible {
	outline: 2px solid var( --twc-accent );
	outline-offset: 2px;
}

.twc-ord__tasto-mappa .twc-ord__icona {
	color: var( --twc-accent );
}

/*
 * La finestra della mappa.
 *
 * Sopra la pagina e grande: un punto si mette bene solo su una mappa in
 * cui si vedono le case. Sul telefono prende tutto lo schermo, con i
 * pulsanti in basso dove arriva il pollice.
 */
.twc-ord__dialogo {
	width: min( 760px, calc( 100vw - 2rem ) );
	max-width: none;
	max-height: calc( 100svh - 2rem );
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var( --twc-bg );
	color: var( --twc-ink );
	box-shadow: 0 30px 80px -20px rgba( 0, 0, 0, 0.5 );
	overflow: hidden;
}

.twc-ord__dialogo[open] {
	display: flex;
	flex-direction: column;
}

.twc-ord__dialogo::backdrop {
	background: rgba( 20, 17, 14, 0.55 );
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

.twc-ord__dialogo-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem 0.85rem 1.25rem;
	border-bottom: 1px solid var( --twc-line-soft );
}

.twc-ord__dialogo-titolo {
	margin: 0;
	font-family: var( --twc-ord-titoli );
	font-size: 1.35rem;
	font-weight: 400;
}

.twc-ord__chiudi--sempre {
	display: block;
	flex: 0 0 auto;
}

.twc-ord__dialogo .twc-mappa {
	flex: 1 1 auto;
	aspect-ratio: 4 / 3;
	max-height: none;
	border: 0;
	border-radius: 0;
}

.twc-ord__dialogo-piede {
	padding: 1rem 1.25rem calc( 1rem + env( safe-area-inset-bottom ) );
	border-top: 1px solid var( --twc-line-soft );
}

.twc-ord__mappa-aiuto {
	margin: 0;
	color: var( --twc-muted );
	font-size: 0.88rem;
}

.twc-ord__mappa-qui {
	min-height: 1.4em;
	margin: 0.4rem 0 0;
	font-size: 0.93rem;
	font-weight: 600;
}

.twc-ord__dialogo-azioni {
	display: flex;
	gap: 0.75rem;
	margin-top: 0.9rem;
}

.twc-ord__dialogo-azioni > * {
	flex: 1 1 0;
}

.twc-ord__tasto-secondario {
	min-height: 54px;
	padding: 0 1.25rem;
	border: 1px solid var( --twc-ord-campo );
	border-radius: 999px;
	background: transparent;
	color: var( --twc-ink );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.twc-ord__tasto-secondario:hover {
	border-color: var( --twc-ink );
}

@media ( max-width: 640px ) {
	.twc-ord__dialogo {
		width: 100vw;
		height: 100svh;
		max-height: none;
		border-radius: 0;
	}

	.twc-ord__dialogo .twc-mappa {
		aspect-ratio: auto;
		min-height: 0;
	}
}

.twc-ord__posizione-stato {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.9rem;
	margin: 0.75rem 0 0;
	color: var( --twc-ok );
	font-size: 0.9rem;
	font-weight: 600;
}

.twc-ord__posizione-stato .twc-ord__link {
	color: var( --twc-muted );
	font-weight: 500;
}

/* Conferma ------------------------------------------------------- */

.twc-ord__fatto {
	margin-top: 1.5rem;
	padding: 1.75rem 1.25rem;
	border: 1px solid var( --twc-line-soft );
	border-radius: 16px;
	background: var( --twc-bg );
	text-align: center;
}

.twc-ord__fatto h3 {
	margin: 0 0 0.5rem;
	font-family: var( --twc-ord-titoli );
	font-size: 1.6rem;
	font-weight: 400;
}

.twc-ord__numero {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.twc-ord__fatto-dove {
	margin: 0.6rem 0 0;
	color: var( --twc-muted );
}

.twc-ord__box {
	padding: 1.5rem;
	background: var( --twc-surface );
	border: 1px solid var( --twc-line-soft );
	border-radius: 16px;
}

/*
 * La fascia della dimostrazione.
 *
 * Sobria ma impossibile da non vedere: un filo d'accento a sinistra e
 * l'etichetta in maiuscoletto. Non si confonde con un avviso del
 * ristorante, che e' rosso e riguarda l'ordine.
 */
.twc-ord__demo {
	margin: 0 0 1.75rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var( --twc-line-soft );
	border-left: 3px solid var( --twc-accent );
	border-radius: 10px;
	background: var( --twc-surface );
	font-size: 0.92rem;
}

.twc-ord__demo strong {
	margin-right: 0.5rem;
	color: var( --twc-accent );
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}