/* Il CSS condiviso dello storefront.  JT-111, 2026-09-01.
 *
 * Fino a oggi queste 1908 righe erano una stringa PHP dentro `jt_functions.php`
 * (`jt_cfg_css()`), stampata da ogni pagina dentro un proprio <style>: 51 KB di
 * CSS dentro l'HTML, non cacheabili, a OGNI navigazione. Ora e' un file, linkato
 * con `?v=<filemtime>` e servito con `Cache-Control: max-age=604800` (JT-109).
 *
 * Il contenuto e' identico byte per byte a quello che la funzione stampava:
 * estratto valutando la funzione da sola e confrontato con il <style> vero di una
 * pagina in produzione.
 *
 * ⚠️ Le pagine lo linkano DOPO le librerie e PRIMA del loro <style> di pagina:
 * quell'ordine e' la cascata, non un dettaglio.
 *
 * ⚠️ Le variabili si chiamano ancora `--tw-*`: rinominarle in `--jt-*` tocca ~300
 * dichiarazioni e non porta niente. Stessa ragione per cui `tw_` e' rimasto nelle
 * usermeta e nelle costanti dei config.
 *
 * ⚠️ I 15 `url()` qui dentro sono `../img/`, non `img/`, e la differenza NON e'
 * estetica: dentro uno <style> un percorso relativo si risolve sulla PAGINA
 * (/web/house/jt_home.php -> /web/house/img/...), dentro un file si risolve sul
 * FILE (/web/house/css/jt.css -> /web/house/css/img/...). Uscendo da PHP sono
 * stati riscritti tutti e 15. Chi ne aggiunge uno parta da `../img/`.
 */
	/* ====================================================================================
	   JT-197 — LA PELLE DELLA DEMO, passo 1 del piano (docs/PIANO_ADEGUAMENTO_GRAFICO.md).
	   Decisione di Luca (2026-09-02): la base grafica del sito e' quella di `limited/`, angoli
	   compresi. Qui stanno i suoi TOKEN — gli stessi nomi e valori di
	   `limited/assets/css/style.css`, che la demo ridichiara identici dopo questo file, quindi
	   li' non si muove niente — e le variabili `--bs-*` con cui Bootstrap si riveste. Piu'
	   sotto, nel `:root` storico, quattro variabili del sito sono rimappate su questi token;
	   dopo i due `:root` ci sono i due bottoni del negozio e quattro primitive.
	   ⚠️ Le `--bs-*` e le primitive sono in rem, NON in px: la radice del sito e' gia'
	   `var(--tw-base-font-size)` e sale coi gradini (14/16/18/22/24/26/29), quindi un rem
	   scala come le `--tw-*` — e come scala la demo. Un px scritto qui non lo farebbe.
	   ⚠️ Niente `!important`: se una regola vince solo con quello, la cascata e' sbagliata.
	   ================================================================================== */
	:root {
		--ink: #111111;
		--text: #2a2723;
		--sub: #6f6a63;
		--muted: #8a8378;
		--line: #e2ded8;
		--silver-top: #f2f0ec;
		--silver-bottom: #d2cdc4;
		--card-bg: #ffffff;
		--card-bg-2: #fcfbfa;
		--soft: #f3f1ec;
		--paper: #ffffff;
		--accent: #a16207;
		--accent-bg: #faf3e3;
		--ok: #3f6212;
		--ok-bg: #f1f5e9;
		--blue: #1e40af;
		--blue-bg: #eef2ff;
		--blue-foil-top: #7593e4;
		--blue-foil-bottom: #1e40af;
		--blue-bg-2: #e0e8fc;
		--gold: #7d5f06;
		--gold-line: #bd9526;
		--gold-bg: #fffdf6;
		--gold-foil-top: #e0c069;
		--gold-foil-bottom: #8a6a12;
		--gold-bg-2: #fbf2dc;
		/* Bootstrap: il corpo del testo, il testo secondario e i filetti della demo. Da qui
		   prendono campi, menu a tendina, modali, piede e pastiglie di tutto il sito. Gli
		   angoli stanno nel `:root` storico qui sotto, dove prima erano a zero. */
		--bs-body-color: var(--text);
		--bs-secondary-color: var(--sub);
		--bs-border-color: var(--line);
		--bs-border-color-translucent: var(--line);
		/* JT-206: gli AVVISI di Bootstrap (`.alert-*`) nelle tinte della demo. Il giallo di
		   Bootstrap nel pannello Utente e l'azzurro di «Accedi» erano gli ultimi colori fuori
		   palette: `warning` prende l'evidenza oro di `.hl` (bordo `--accent`, fondo `--accent-bg`),
		   `primary` e `info` il blu delle pastiglie di stato, `success` il verde `--ok`. `danger`
		   resta rosso: un errore deve sembrare un errore, e la demo non ha un rosso suo. */
		--bs-warning-bg-subtle: var(--accent-bg);
		--bs-warning-border-subtle: var(--accent);
		--bs-warning-text-emphasis: var(--text);
		--bs-primary-bg-subtle: var(--blue-bg);
		--bs-primary-border-subtle: var(--blue-foil-top);
		--bs-primary-text-emphasis: var(--blue);
		--bs-info-bg-subtle: var(--blue-bg);
		--bs-info-border-subtle: var(--blue-foil-top);
		--bs-info-text-emphasis: var(--blue);
		--bs-success-bg-subtle: var(--ok-bg);
		--bs-success-border-subtle: var(--ok);
		--bs-success-text-emphasis: var(--ok);
	}
	:root {
		--main-font-family: 'Roboto';
		--sec-font-family: 'Cormorant';
		--max-page-width: 900px;
		--tw-base-font-size: 14px;
		--tw-vision-font-size: 16px;
		--tw-h1-font-size: 30px;
		--tw-h1-big-font-size: 44px;
		--tw-h1-home-font-size: 10vw;
		--tw-h2-font-size: 24px;
		--tw-h3-font-size: 20px;
		--tw-h3-inline-font-size: 20px;
		--tw-h3-home-inline-font-size: 5vw;
		--tw-hb3-font-size: 20px;
		--tw-h4-font-size: 16px;
		--tw-h5-font-size: 14px;
		--tw-h5-st-font-size: 3.5vw;
		--tw-txt-tabs-font-size: 12px;
		--main-bg-color: #fff;
		--secondary-bg-color: #fff;
		--tbheader-bg-color: var(--soft); /* JT-197: era #efedec */
		--main-txt-color: var(--text); /* JT-197: era #000 */
		--accordion-color: var(--ink); /* JT-197: era #000000 */
		--accordion-hover-color: #990000;
		--tw-total-color: var(--accent-bg); /* JT-207: era #fff9e6, ora la crema della demo */
		--items-border-color: var(--line); /* JT-197: era #666 */
		--tw-trow-sel-color: #f8f5f4;
		--tw-padding-elements: 10px;
		--tw-padding-btn: 10px;
		--tw-padding-ele1: 5px;
		--tw-padding-ele2: 20px;
		--tw-padding-sma: 25px;
		--tw-ele-lat-cat-w: 30px;
		--tw-cat-font-size: 16px;
		--tw-p-btn-bgcolor-hover: #333;
		--tw-p-btn-height: 70px;
		--tw-p-iconbg-height: 50px;
		--tw-p-iconimg-height: 30px;
		--tw-p-btn-2r-height: 90px;
		--tw-p-iconbg-2r-height: 70px;
		--tw-p-iconimg-2r-height: 50px;
		--tw-p-btn-font-size: 22px;
		--tw-p-btn-font-subsize: 16px;
		--tw-p-btn-font-size-big: 28px;
		/* JT-197: angoli come la demo — 4px su bottoni, campi, tendine e immagini, 8px su card
		   e modali. Erano 0 in sei righe qui, piu' cinque `!important` sparsi (tolti). */
		--bs-border-radius: .25rem;
		--bs-border-radius-sm: .1875rem;
		--bs-border-radius-lg: .5rem;
		--bs-border-radius-xl: .5rem;
		--bs-border-radius-xxl: .5rem;
		--tw-live-btn-height: 150px;
		--tw-logo-width: 74px;
		--tw-hover-opacity: 0.75;
		--tw-jt-inline-img-size: 30px;
		/* --tw-menu-icon-width: 26px; */
		/* JT-106: -15% e poi un altro -10% su ogni gradino (era 30/32/34/40/43/47/52). Da qui scende TUTTA la
		   testata: lo stacco fra le icone, i tondi neri, i pallini rossi e la loro posizione
		   sono `calc()` su questa variabile — vedi il blocco `.jt_header`. */
		--tw-menu-icon-width: 23px;
		--tw-readmore: 3.5vw;
        --tm-beyondspoke-logo-width: 70%;
		--tw-ffc-width: 150px;
        --jt-logo-width: 15vw;
        --jt-logo-height: 15vw;
	}
	* {
		outline: none !important;
	}
	/* JT-197 — i due bottoni del negozio, vestiti come `.jt-btn` e `.jt-btn-primary` della
	   demo: DUE STRATI — il campo si ferma al padding-box, la "lamina" occupa il border-box —
	   perche' `border-image` non rispetta `border-radius`. Il bordo di Bootstrap resta ma
	   diventa trasparente, cosi' la lamina si vede attraverso. Gli hover NON tornano a un fondo
	   piatto: cancellerebbero i due strati (lezione della demo). Le classi restano quelle di
	   Bootstrap: vale sulle 13 pagine che le usano, bottone contatti compreso. */
	.btn-outline-dark,
	.btn-dark {
		--bs-btn-border-color: transparent;
		--bs-btn-hover-border-color: transparent;
		--bs-btn-active-border-color: transparent;
		--bs-btn-disabled-border-color: transparent;
		--bs-btn-font-weight: 500;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	}
	.btn-outline-dark {
		--bs-btn-color: var(--ink);
		--bs-btn-hover-color: var(--ink);
		--bs-btn-active-color: var(--ink);
		--bs-btn-disabled-color: var(--ink);
		background: linear-gradient(180deg, #ffffff, #f8f7f4) padding-box,
		            linear-gradient(180deg, #e6e2db, #bdb7ad) border-box;
	}
	.btn-outline-dark:hover,
	.btn-outline-dark:focus-visible,
	.btn-outline-dark:active,
	.btn-outline-dark.show {
		background: linear-gradient(180deg, #fbfaf8, #f1efea) padding-box,
		            linear-gradient(180deg, #ded9d1, #b3ada2) border-box;
	}
	/* Sul nero l'escursione e' PIU' ampia che sul chiaro: lo stesso salto, su fondo scuro, si
	   vede molto meno (tarato nella demo a dimensione reale, non a 2x). */
	.btn-dark {
		--bs-btn-color: #fff;
		--bs-btn-hover-color: #fff;
		--bs-btn-active-color: #fff;
		--bs-btn-disabled-color: #fff;
		background: linear-gradient(180deg, #383838, #000000) padding-box,
		            linear-gradient(180deg, #6b6b6b, #000000) border-box;
	}
	.btn-dark:hover,
	.btn-dark:focus-visible,
	.btn-dark:active,
	.btn-dark.show {
		background: linear-gradient(180deg, #474747, #0f0f0f) padding-box,
		            linear-gradient(180deg, #7d7d7d, #0d0d0d) border-box;
	}
	/* I campi: a fuoco un filetto inchiostro, non il bagliore blu di Bootstrap. */
	.form-control:focus,
	.form-select:focus {
		border-color: var(--ink);
		box-shadow: 0 0 0 .2rem rgba(17, 17, 17, .12);
	}
	/* Quattro primitive della demo, coi nomi del sito: la superficie argento delle card
	   (`.camp-card`/`.step`), il titolo di sezione (`.sect`) con la sua icona (`.sect-ico`),
	   il testo secondario (`.jt-small`), il raggio delle immagini. Le pagine le prendono nei
	   passi 2-4 del piano; pastiglie foil e barra restano nella demo finche' nessuna pagina
	   del sito le usa. */
	.jt_card {
		border: 1px solid transparent;
		border-radius: .5rem;
		padding: 1rem;
		background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) padding-box,
		            linear-gradient(180deg, var(--silver-top), var(--silver-bottom)) border-box;
	}
	.jt_sect {
		font-weight: 700;
		font-size: .8125rem;
		line-height: 1.3;
		letter-spacing: .15625rem;
		text-transform: uppercase;
		text-align: center;
		color: var(--text);
		margin: 0 0 .875rem;
	}
	.jt_sect_ico {
		display: block;
		text-align: center;
		font-size: 1.625rem;
		line-height: 1;
		color: var(--ink);
		margin-bottom: .625rem;
	}
	.jt_small {
		font-size: .78125rem;
		line-height: 1.5;
		color: var(--sub);
	}
	.jt_img_r {
		border-radius: .25rem;
	}
	/* JT-198: le frecce di Splide come i bottoni argento della demo — tondo a due strati,
	   glifo inchiostro, niente grigio piatto al 70%. `jt.css` e' linkato DOPO `splide.min.css`,
	   quindi a pari specificita' vince questa. Vale per tutti i caroselli del sito. */
	.splide__arrow {
		opacity: 1;
		border: 1px solid transparent;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
		background: linear-gradient(180deg, #ffffff, #f8f7f4) padding-box,
		            linear-gradient(180deg, #e6e2db, #bdb7ad) border-box;
	}
	.splide__arrow:hover:not(:disabled) {
		opacity: 1;
		background: linear-gradient(180deg, #fbfaf8, #f1efea) padding-box,
		            linear-gradient(180deg, #ded9d1, #b3ada2) border-box;
	}
	.splide__arrow svg {
		fill: var(--ink);
	}
	.splide__arrow:disabled {
		opacity: .35;
	}
	/* JT-201: il blocco WorldcApp in fondo alla home, nato come `.step` della demo. Compare quando
	   si arriva in fondo (script in jt_home.php): la visibilita' la danno le utility `.invisible`
	   e `.visible` di Bootstrap, qui c'e' solo la dissolvenza. Prima era una pastiglia grigia
	   `#333` a 20px con il suo <style> dentro la pagina.
	   JT-262: non e' piu' una scatola — niente `.jt_card` e niente padding suo: con i due
	   `.jt_spacer` della pagina attorno, cornice e rientro si sommavano e il blocco finiva troppo
	   in basso. La distanza dal piede la danno solo gli spaziatori. */
	.jt_home_wa {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		text-align: center;
		opacity: 0;
		transition: opacity .5s ease-in-out;
	}
	.jt_home_wa.visible {
		opacity: 1;
	}
	.jt_home_wa_logo {
		display: block;
		height: 3.375rem;
		width: auto;
		/* JT-263: il logo sta piu' vicino alla riga sotto (Luca). Il `gap` del blocco vale anche
		   fra riga e bottone, quindi qui si toglie solo al logo: il margine negativo annulla i
		   10,5px di `gap` e le discendenti di «pp» sfiorano la riga — provato dal vivo con -.5rem
		   (4px) e -.75rem (0): la seconda. Il file non ha margini trasparenti (bbox = tutta
		   l'immagine), quindi lo spazio che si vedeva era tutto del CSS. */
		margin-bottom: -.75rem;
	}
	/* JT-201: il popup del video della home (prima nello <style> della pagina): velo caldo come
	   `.overlay` della demo, iframe con l'angolo delle card, la X tonda argento come le frecce.
	   Misure in px perche' e' un livello fisso sulla finestra, non un elemento della colonna. */
	.jt-fullscreen-iframe {
		position: fixed;
		inset: 0;
		z-index: 1050;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
		padding: 40px 30px 120px;
		background-color: rgba(20, 17, 12, .5);
	}
	.jt-fullscreen-iframe.active {
		opacity: 1;
		visibility: visible;
	}
	.jt-fullscreen-iframe iframe {
		width: 100%;
		height: 100%;
		border: none;
		border-radius: 8px;
		background-color: #fff;
	}
	.jt-close-btn {
		position: absolute;
		top: 5px;
		right: 5px;
		z-index: 1060;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		font-size: 16px;
		line-height: 1;
		cursor: pointer;
		color: var(--ink);
		border: 1px solid transparent;
		border-radius: 50%;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
		background: linear-gradient(180deg, #ffffff, #f8f7f4) padding-box,
		            linear-gradient(180deg, #e6e2db, #bdb7ad) border-box;
	}
	/* JT-205 — LE ANIMAZIONI D'INGRESSO, ADDOLCITE. Decisione di Luca («la prima volta fanno
	   effetto wow, poi stancano»). La demo non ha nessuna entrata; qui le classi di animate.css
	   che il sito usa (34 entrate su 12 pagine: cadute dall'alto con rimbalzo, gonfiamenti da
	   zero, ritardi di 1-2 secondi) diventano UNA dissolvenza morbida — 12px dal basso in mezzo
	   secondo, `ease-out` — e i ritardi scendono a 0,15/0,3/0,45/0,6. Il markup non cambia: si
	   ridefiniscono le classi, e si torna indietro cancellando questo blocco.
	   ⚠️ La libreria e' linkata PRIMA di jt.css e queste regole hanno la sua stessa specificita':
	   vincono perche' vengono dopo. Chi ha «riduci movimento» nel sistema continua a non vedere
	   niente: la libreria porta le durate a 1ms da sola.
	   Resta com'era `animate__flash`: e' il feedback al click di «Vedi piu' Collezioni», non un
	   ingresso, e a mezzo secondo diventerebbe un battito d'occhio. */
	@keyframes jt_entrata {
		from { opacity: 0; transform: translate3d(0, 12px, 0); }
		to   { opacity: 1; transform: translate3d(0, 0, 0); }
	}
	.animate__animated {
		--animate-duration: .5s;
	}
	.animate__animated.animate__flash {
		--animate-duration: 1s;
	}
	.animate__backInDown,
	.animate__zoomIn,
	.animate__zoomInUp,
	.animate__lightSpeedInLeft,
	.animate__lightSpeedInRight,
	.animate__fadeInDown,
	.animate__fadeInUp {
		animation-name: jt_entrata;
		animation-timing-function: ease-out;
	}
	.animate__animated.animate__delay-1s { animation-delay: .15s; }
	.animate__animated.animate__delay-2s { animation-delay: .3s; }
	.animate__animated.animate__delay-3s { animation-delay: .45s; }
	.animate__animated.animate__delay-4s { animation-delay: .6s; }
	/* JT-207 — IL CONFIGURATORE (jt_elegant, jt_smart) nella pelle della demo. I componenti stanno
	   in jt_functions.php e sono condivisi dalle due pagine: qui si vestono una volta sola.
	   Le SCHEDE (`.nav-tabs`) e le PILLOLE del riquadro impostazioni (`.nav-pills`): pillole
	   argento a due strati, l'attiva nera come `.btn-dark`. Prima l'attiva era un rettangolo nero
	   con due `!important`, tolti. Le schede si dividono lo spazio con `flex`, non piu' con le
	   larghezze fisse `.jt_w_25prc`/`.jt_w_50prc`, perche' con lo stacco fra le pillole quelle
	   percentuali andrebbero a capo. */
	.nav-tabs {
		--bs-nav-tabs-border-width: 0;
		gap: .5rem;
		margin-bottom: .75rem;
	}
	.nav-tabs .nav-link {
		flex: 1 1 0;
		width: auto;
		border: 1px solid transparent;
		border-radius: .25rem;
		color: var(--text);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
		background: linear-gradient(180deg, #ffffff, #f8f7f4) padding-box,
		            linear-gradient(180deg, #e6e2db, #bdb7ad) border-box;
	}
	.nav-tabs .nav-link:hover {
		border-color: transparent;
		color: var(--ink);
		background: linear-gradient(180deg, #fbfaf8, #f1efea) padding-box,
		            linear-gradient(180deg, #ded9d1, #b3ada2) border-box;
	}
	.nav-pills .nav-link {
		color: var(--sub);
	}
	.nav-tabs .nav-link.active,
	.nav-pills .nav-link.active {
		color: #fff;
		border-color: transparent;
		background: linear-gradient(180deg, #383838, #000000) padding-box,
		            linear-gradient(180deg, #6b6b6b, #000000) border-box;
	}
	/* Il RIEPILOGO (tabella del configuratore, in elegant e in smart): niente griglia verticale,
	   filetti fra le righe come nel carrello; la riga del totale in crema (`--tw-total-color`). */
	.jt_outfit .table-bordered > :not(caption) > *,
	.jt_items .table-bordered > :not(caption) > * {
		border-width: 1px 0;
	}
	.jt_outfit .table-bordered > :not(caption) > * > *,
	.jt_items .table-bordered > :not(caption) > * > * {
		border-width: 0;
	}
	/* Le immagini del configuratore (figura, collezione/capsula, tessuti, miniature del
	   riepilogo, articoli) con l'angolo della demo. */
	.jt_outfit img,
	.jt_items img {
		border-radius: .25rem;
	}
	/* Le barre nere «avanti» del percorso smart come il bottone nero della demo. */
	.jt_next_s1, .jt_next_s2, .jt_next_s3, .jt_next_s4, .jt_next_s5, .jt_next_s5_v, .jt_button {
		border-radius: .25rem;
		background: linear-gradient(180deg, #383838, #000000);
	}
	html {
		font-family: var(--main-font-family);
		font-size: var(--tw-base-font-size);
		margin: 0px;
		background-color: var(--main-bg-color);
	}
	body {
		background-color: var(--main-bg-color);
	}
    .txt-roboto {
        font-family: 'Roboto', sans-serif !important;
    }
    .txt-montserrat {
        font-family: 'Montserrat', sans-serif !important;
    }
	.txt_vision {
		font-size: var(--tw-vision-font-size);
	}
	.jt_tooltip {
		font-family: var(--main-font-family);
	}
	.jt_bg_secondary {
		background-color: var(--secondary-bg-color);
	}
	a {
		color: var(--main-txt-color);
		text-decoration: none;
		transition: all 1s ease;
	}
	a:hover {
		color: var(--main-txt-color);
		text-decoration: none;
	}
	.jt_h3_home_inline {
		transition: all 1s ease;
	}
	.jt_h3_home_inline:hover {
		opacity: var(--tw-hover-opacity);
	}
	.jt_text_corm {
		font-family: var(--sec-font-family);
	}
	.jt_required_field {
		color: var(--bs-danger);
	}
	.jt_h1,
	.jt_h1_big,
	.jt_h1_home,
	.jt_h2,
	.jt_h3,
	.jt_h3_inline,
	.jt_h3_home_inline,
	.jt_hb3,
	.jt_h4,
	.jt_h5,
	.jt_h5_subtitle {
		font-weight: 300;
	}
	.jt_h1 {
		font-size: var(--tw-h1-font-size);
	}
	.jt_h1_big {
		font-size: var(--tw-h1-big-font-size);
	}
	.jt_h1_home {
		font-size: var(--tw-h1-home-font-size);
		/* font-size: clamp(30px, var(--tw-h1-home-font-size), 90px); */
	}
	.jt_h2 {
		font-size: var(--tw-h2-font-size);
	}
	.jt_h3 {
		font-size: var(--tw-h3-font-size);
	}
	.jt_h3_inline {
		font-size: var(--tw-h3-inline-font-size);
	}
	.jt_h3_home_inline {
		font-size: var(--tw-h3-home-inline-font-size);
	}
	.jt_hb3 {
		font-size: var(--tw-hb3-font-size);
	}
	.jt_h4 {
		font-size: var(--tw-h4-font-size);
	}
	.jt_h5 {
		font-size: var(--tw-h5-font-size);
	}
	.jt_h5_subtitle {
		font-size: var(--tw-h5-st-font-size);
	}
	.jt_dropleft {
		font-size: 1.5em;
		color: var(--sub); /* JT-197: era `--items-border-color`, #666, usato come colore di TESTO — oggi quella variabile e' il filetto chiaro della demo, e qui si vedrebbe a malapena */
	}
	.jt_body {
		font-family: var(--main-font-family);
		background-color: var(--main-bg-color);
		/* JT-091: il contenitore centrale, come la `.wrap` della demo. Prima la colonna
		   ce l'avevano i singoli blocchi `.jt_page`, quindi tutto quello che stava FUORI
		   da uno di quelli — il carosello della home, le fasce a tutta pagina — restava
		   largo quanto lo schermo: su un 4K il contenuto stava in mezzo e i caroselli
		   andavano da bordo a bordo. Messo qui vale per tutto, in un punto solo.
		   ⚠️ Scelta di Luca, e va detto perche' non e' gratis: su schermi grandi il
		   carosello NON tocca piu' i bordi. E' il prezzo dichiarato per avere una misura
		   sola invece di due.
		   Non tocca il #spinner ne' la fascia dei cookie: sono `position: fixed`, quindi
		   si misurano sulla finestra e non sul body. E `html` ha lo stesso sfondo, quindi
		   ai lati non compare una banda di colore diverso. */
		max-width: var(--max-page-width);
		margin-left: auto;
		margin-right: auto;
	}
	.jt_home {
		font-family: var(--main-font-family);
		background-color: var(--main-bg-color);
		padding-left: 8%;
		padding-right: 8%;
	}
	.jt_page {
		max-width: var(--max-page-width);
		margin: auto;
	}
	.jt_ns {
		text-decoration: none;
	}
	.jt_center {
		text-align: center;
	}
	.jt_txt_for {
		padding-top: var(--tw-padding-elements);
	}
	#bbb5 {
		padding: var(--tw-padding-elements);
	}
	#jt_row_02 {
		display: none;
	}
	#jt_for {
		display: none;
	}
	.jt_hidden {
		display: none;
	}
    .jt_header {
		/* JT-095/096: lo stacco fra il monogramma e «JAMAL TASLAQ» erano i 28px di
		   padding della testata, non un margine del titolo — le tre righe hanno margini
		   e padding a ZERO. In JT-094 ci avevo messo un margine negativo sul titolo:
		   curava il sintomo e lasciava la causa dov'era.
		   Ridotto il padding VERTICALE al 22% (28 → 6px), sopra e sotto — in tre giri:
		   prima solo sotto al 40%, poi anche sopra, poi ancora piu' stretto. Quello
		   ORIZZONTALE resta intero: e' il rientro delle icone dai bordi della colonna,
		   un mestiere diverso, e non e' fra le cose da stringere. */
		padding: calc(var(--tw-padding-elements) * 0.22) var(--tw-padding-elements);
		/* JT-098: sopra un po' piu' d'aria che sotto, e va bene cosi'. I due lati fanno
		   due mestieri: SOPRA stacca dal bordo della finestra, SOTTO stacca il monogramma
		   dal titolo. Tenerli uguali era una simmetria di comodo, non una regola. */
		padding-top: calc(var(--tw-padding-elements) * 0.45);
		/* JT-090: la testata sta FUORI da .jt_page (nella home il suo genitore e' .jt_body),
		   quindi senza questo restava larga quanto lo schermo mentre il contenuto stava in una
		   colonna: su un 4K le icone finivano agli estremi, staccate da tutto il resto. Nella
		   demo `.chrome` ha lo stesso max-width di `.wrap`, ed e' quello che la fa sembrare a
		   posto. Stessa cosa qui, con la stessa variabile della colonna. Dove la testata e'
		   gia' dentro .jt_page non cambia niente: un max-width uguale a quello del genitore
		   non stringe. */
		max-width: var(--max-page-width);
		margin-left: auto;
		margin-right: auto;
    }
	.jt_header,
	footer {
		color: var(--sub); /* JT-197: era `--items-border-color`, #666, usato come colore di TESTO — oggi quella variabile e' il filetto chiaro della demo, e qui si vedrebbe a malapena */
		text-align: center;
	}
	div.jt_logo {
		width: calc(var(--tw-logo-width)+2);
	}
	img.jt_logo {
		width: var(--tw-logo-width);
		transition: all 1s ease;
	}
	img.jt_logo:hover {
		opacity: var(--tw-hover-opacity);
	}
	/* JT-089 (seguito): i glifi stanno piu' stretti dei PNG che hanno sostituito — la
	   scatola di un carattere aderisce al disegno, mentre le immagini avevano il loro
	   margine trasparente dentro il file. Nella demo il problema non c'era perche' li'
	   il contenitore e' gia' `display:flex; gap`, qui invece le icone erano elementi in
	   linea separati solo dallo spazio bianco del markup.
	   Stessa soluzione della demo, sulle due sole colonne laterali (quella centrale del
	   marchio non si tocca). Il passo e' una FRAZIONE della misura dell'icona, cosi'
	   segue da solo i quattro gradini di --tw-menu-icon-width invece di essere un numero
	   fisso da riaggiustare a ogni breakpoint. 0.385 = il rapporto della demo (10px su
	   icone da 26), che e' quello che Luca ha indicato come giusto.

	   ⚠️ Fra le icone c'erano anche quattro `&nbsp;`, il modo con cui erano distanziate
	   quando erano <img> in linea. In un contenitore flex un &nbsp; NON e' spazio
	   collassabile: diventa un elemento flex a se', quindi si prende un `gap` per lato.
	   Con gap 15,3px lo spazio reale misurato era 35px invece di 15. Tolti. */
	.jt_header .col.text-start,
	.jt_header .col.text-end {
		display: flex;
		align-items: center;
		gap: calc(var(--tw-menu-icon-width) * 0.385);
	}
	.jt_header .col.text-start { justify-content: flex-start; }
	/* JT-089 (seguito): i pallini di notifica erano `p-2 border border-light` di Bootstrap,
	   cioe' 18px fissi — il 60% di un'icona da 30. Nella demo, che Luca ha indicato come
	   quella giusta, sono 9px su 26, cioe' il 35%. Qui la stessa proporzione, legata alla
	   misura dell'icona invece che a un numero fisso, cosi' regge i quattro breakpoint. */
	/* JT-092: il contenitore del pallino era `display: inline`, quindi la sua scatola
	   era la RIGA DI TESTO (31px) e non il glifo (46px): il pallino si ancorava a quella
	   e usciva staccato in alto. Nella demo il wrapper e' inline-flex e aderisce al glifo.
	   Qui uguale. */
	.jt_header .position-relative {
		display: inline-flex;
		align-items: center;
	}
	/* JT-229: le tre icone a sinistra stavano allineate PER CASO, e nella demo si vedeva.
	   Le due colonne sono flex e centrate, ma l'icona dentro il suo involucro non lo era:
	   dove l'involucro e' un <a> normale (casa, cuore, borsa) il glifo e' inline-block su
	   una RIGA DI TESTO e si appoggia alla sua linea di base, dove invece c'e' di mezzo un
	   `.position-relative` (persona, misure — quelli col pallino) l'involucro e' inline-flex
	   e il glifo viene "blockificato": niente riga, si appoggia in alto. Finche' la riga di
	   testo e' alta quanto il glifo i due modi coincidono — ed e' il caso del sito, corpo 14px
	   — ma la demo scala il corpo con `html { font-size }` (JT-115): li' la riga e' 36px
	   contro 32 di glifo, e i due gruppi si separano di 4px.
	   Rimedio: nessun involucro di questa testata usa piu' la riga di testo. Sono tutti
	   inline-flex centrati, quindi l'allineamento non dipende piu' dal corpo del testo.
	   Esclusi i posizionati assoluti (i pallini e i contatori) e i testi per lo screen
	   reader, che non sono involucri di icone. */
	.jt_header .col.text-start a,
	.jt_header .col.text-end a,
	.jt_header .col.text-start span:not(.position-absolute):not(.visually-hidden),
	.jt_header .col.text-end span:not(.position-absolute):not(.visually-hidden) {
		display: inline-flex;
		align-items: center;
	}
	/* ⚠️ Le utility di posizione di Bootstrap (`top-0 start-100 translate-middle`) sono
	   state TOLTE DAL MARKUP, non sovrascritte: le scrive con `!important`, quindi da CSS
	   non si vincono senza rilanciare con un altro `!important`. Meglio non metterle.

	   Posizione presa dalla demo invece che dalle utility di Bootstrap: li' il pallino
	   e' a `top:-1px; right:-3px` su un'icona da 26, cioe' MORDE l'icona per il 23%
	   della sua larghezza. Con `start-100 translate-middle` il morso era solo meta'
	   pallino (l'8%): il pallino sembrava appoggiato fuori invece che attaccato.
	   Espressi in frazione dell'icona, cosi' reggono i sei gradini. */
	.jt_header .jt_badge {
		top: calc(var(--tw-menu-icon-width) * -0.04);
		right: calc(var(--tw-menu-icon-width) * -0.115);
		left: auto;
		bottom: auto;
		transform: none;
		width: calc(var(--tw-menu-icon-width) * 0.35);
		height: calc(var(--tw-menu-icon-width) * 0.35);
		padding: 0;
		border: 1.5px solid #fff;
		box-sizing: border-box;
	}
	/* JT-185: i contatori di preferiti e carrello. Il .badge di Bootstrap si misura in em
	   del GENITORE (il testo dell'intestazione), non dell'icona: usciva piu' grande dell'icona
	   stessa. Qui si lega alla larghezza dell'icona come il pallino qui sopra: alto 0,6 icona,
	   tondo con una cifra, e la posizione resta quella di Bootstrap (top-0 start-100).
	   JT-186: e' NERO (bg-dark nel markup), non rosso: il rosso qui vuol dire «manca qualcosa»
	   (i pallini su persona e misure), non «hai qualcosa». */
	.jt_header .jt_badge_cnt {
		font-size: calc(var(--tw-menu-icon-width) * 0.4);
		line-height: 1;
		padding: calc(var(--tw-menu-icon-width) * 0.1) calc(var(--tw-menu-icon-width) * 0.16);
		min-width: calc(var(--tw-menu-icon-width) * 0.6);
	}
	.jt_header .col.text-end { justify-content: flex-end; }

	/* JT-089: le icone della testata erano sei PNG, ora sono glifi Bootstrap Icons.
	   La stessa variabile che dava la LARGHEZZA all'immagine ora da' il CORPO al glifo:
	   i quattro valori ai breakpoint (30/32/34/36px) restano quelli. */
	img.jt_icon,
	i.jt_icon {
		width: var(--tw-menu-icon-width);
		transition: all 1s ease;
	}
	i.jt_icon {
		width: auto;
		font-size: var(--tw-menu-icon-width);
		line-height: 1;
		color: #000;
		display: inline-block;
		vertical-align: middle;
	}
	img.jt_icon:hover,
	i.jt_icon:hover {
		opacity: var(--tw-hover-opacity);
	}
	/* Freccia indietro e WhatsApp erano PNG con il cerchio nero DISEGNATO DENTRO.
	   Bootstrap Icons quel cerchio non ce l'ha in quella forma (`bi-arrow-left-circle-fill`
	   ha una freccia a tratto, non il triangolo pieno), quindi il cerchio lo fa il CSS:
	   glifo bianco su tondo nero, come prima. Il corpo scende perche' dentro un tondo il
	   glifo va rimpicciolito, non la scatola. */
	img.jt_icon_small {
		width: 20px;
	}
	.jt_step_accordion {
		background-color: var(--tbheader-bg-color);
		color: var(--main-txt-color);
		cursor: pointer;
		padding: var(--tw-padding-elements);
		width: 100%;
		border: none;
		text-align: left;
		outline: none;
		transition: 0.4s;
		font-weight: 300;
	}
	.jt_summary_accordion {
		font-family: var(--main-font-family);
		background-color: var(--secondary-bg-color);
		color: var(--accordion-color);
		padding: 18px;
		width: 100%;
		border: none;
		text-align: center;
		outline: none;
		font-size: 16px;
	}
	.jt_active, .jt_step_accordion:hover {
		background-color: var(--accordion-color);
		color: var(--secondary-bg-color);
	}
	.jt_step_accordion:after {
		content: '+';
		font-weight: 300;
		float: right;
		margin-left: 5px;
	}
	.jt_active:after {
		content: '-';
	}
	.jt_page_inside {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
	}
	.panel {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
		background-color: var(--secondary-bg-color);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}
	.summary_panel {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
		text-align: center;
		background-color: var(--secondary-bg-color);
	}
	.cfg {
		margin: auto;
	}
	.jt_intro {
		text-align: center;
		color: var(--accordion-color);
		line-height: 1.35;
	}
	/* JT-094: nel blocco JT / JAMAL TASLAQ / MAISON della home l'aria non veniva da
	   margini o padding — sono tutti a zero — ma dall'INTERLINEA: 1.35 su un carattere
	   da 94px fa 127px di riga, cioe' 33px di piombo che si leggono come spazio sopra e
	   sotto la parola. Su un titolo di una riga sola l'interlinea non serve a niente:
	   qui scende a 1, e i due stacchi si accorciano da soli. */
	.jt_intro.jt_h1_home {
		line-height: 1;
	}
	.jt_h5_subtitle {
		line-height: 1.1;
	}
	.jt_items {
	}
	.jt_item_s1,
	.jt_item_s2,
	.jt_item_s3,
	.jt_item_s4,
	.jt_item_s5 {
		text-align: center;
		margin-top: var(--tw-padding-elements);
		border: 1px solid var(--items-border-color);
		border-radius: .5rem; /* JT-207: card, come nella demo */
		overflow: hidden;
	}
	/* JT-207: il riquadro delle impostazioni del configuratore e' una card della demo. */
	.jt_row {
		border: 1px solid transparent;
		border-radius: .5rem;
		padding: .75rem;
		background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) padding-box,
		            linear-gradient(180deg, var(--silver-top), var(--silver-bottom)) border-box;
		--bs-gutter-x: 0px;
	}
	.jt_item_sel {
		background-color: var(--main-bg-color);
	}
	.jt_total {
		background-color: var(--main-bg-color);
		color: var(--accordion-color);
	}
	.jt_item_radio {
		text-align: center;
		display: none;
	}
	.jt_rb {
	}
	.jt_item_img {
		text-align: center;
	}
	.jt_product_img {
		text-align: center;
	}
	.jt_item_title {
		text-align: center;
	}
	.jt_item_description {
		text-align: center;
	}
	.jt_product_description {
		text-align: center;
	}
	.jt_item_size {
	}
	.jt_item_price {
		text-align: center;
	}
	.jt_next_s1,
	.jt_next_s2,
	.jt_next_s3,
	.jt_next_s4,
	.jt_next_s5 {
		background-color: var(--accordion-color);
		color: var(--secondary-bg-color);
		padding: var(--tw-padding-btn);
		text-align: center;
		display: none;
	}
	.jt_next_s5_v {
		background-color: var(--accordion-color);
		color: var(--secondary-bg-color);
		padding: var(--tw-padding-btn);
		text-align: center;
	}
	.jt_button {
		background-color: var(--accordion-color);
		color: var(--secondary-bg-color);
		padding: var(--tw-padding-btn);
		text-align: center;
	}
	.jt_next_s1:hover,
	.jt_next_s2:hover,
	.jt_next_s3:hover,
	.jt_next_s4:hover,
	.jt_next_s5:hover,
	.jt_next_s5_v:hover,
	.jt_button:hover {
		/* background-color: var(--accordion-hover-color); */
		background-color: var(--tw-p-btn-bgcolor-hover);
	}
	.jt_spacer {
		text-align: center;
		height: var(--tw-padding-elements);
	}
	.jt_spacer_small {
		text-align: center;
		height: calc(var(--tw-padding-elements)/2);
	}
	.jt_spacer_big {
		text-align: center;
		height: calc(var(--tw-padding-elements)*2);
	}
	.jt_item_summary_img {
		max-width: 70px;
		max-height: 70px;
	}
	/* DivTable.com */
	.divTable{
		display: table;
		width: 100%;
	}
	.divTableRow {
		display: table-row;
	}
	.divTableHeading {
		display: table-header-group;
	}
	.divTableCell, .divTableHead {
		display: table-cell;
	}
	.divTableHeading {
		display: table-header-group;
	}
	.divTableFoot {
		display: table-footer-group;
	}
	.divTableBody {
		display: table-row-group;
	}
	.jt_row_sel {
		background-color: var(--tw-trow-sel-color);
	}
	.jt_green {
		color: green;
	}
	/* (A) FULL SCREEN WRAPPER */
	#spinner {
	  position: fixed;
	  top: 0; left: 0; z-index: 9999;
	  width: 100vw; height: 100vh;
	  background: rgba(0, 0, 0, 0.7);
	  transition: opacity 0.2s;
	}
	/* (B) CENTER LOADING SPINNER */
	#spinner img {
	  position: absolute;
	  top: 50%; left: 50%;
	  transform: translate(-50%);
	}
	/* (C) SHOW & HIDE */
	#spinner {
	  visibility: hidden;
	  opacity: 0;
	}
	#spinner.show {
	  visibility: visible;
	  opacity: 1;
	}
	/* ==================== CSS ELEGANT ==================== */
	.tw-form-contact {
		text-align: left;
		padding-left: calc( var(--tw-padding-ele1) + var(--tw-ele-lat-cat-w) );
		padding-right: calc( var(--tw-padding-ele1) + var(--tw-ele-lat-cat-w) );
	}
	#id_elegant {
		padding-left: var(--tw-padding-ele1);
		padding-right: var(--tw-padding-ele1);
	}
	#id_smart {
		padding-left: var(--tw-padding-sma);
		padding-right: var(--tw-padding-sma);
	}
	#id_smart_step3 {
		margin-left: var(--tw-padding-elements);
		margin-right: var(--tw-padding-elements);
		border: 1px solid var(--items-border-color);
	}
	.jt_ele {
		padding-left: var(--tw-padding-ele2);
		padding-right: var(--tw-padding-ele2);
	}
	.jt_grid {
		display: grid;
		align-content: center;
		width: 100%;
		grid-template-columns: var(--tw-ele-lat-cat-w) 1fr 1fr var(--tw-ele-lat-cat-w);
		grid-template-rows: 50% 50%;
		gap: .75rem; /* JT-199: le card stanno staccate, come `.grid2` della demo */
	}
	/* JT-217: sul telefono le due etichette ruotate ai lati della griglia («Colori per il
	   Business», «Colori nel Tempo Libero») finivano contro il bordo dello schermo: la colonna
	   laterale e' di 30px e la pagina, sotto i 768px, non ha margine. Un rientro alla griglia. */
	@media (max-width: 767.98px) {
		.jt_grid {
			padding-left: .75rem;
			padding-right: .75rem;
		}
	}
	/* JT-218/219: le etichette sopra e sotto la griglia («Modello Classico», «Modello
	   Contemporaneo») stanno staccate dalle card. Nato per il telefono, poi ovunque (Luca). */
	.jt_e_top {
		margin-bottom: .75rem;
	}
	.jt_e_bottom {
		margin-top: .75rem;
	}
	.jt_grid_e2 {
		display: grid;
		align-content: center;
		width: 100%;
		grid-template-columns: 100%;
		grid-template-rows: 50% 50%;
		gap: .75rem; /* JT-220: le due card stanno staccate, come nella griglia 2x2 (JT-199) */
	}
	.jt_cellgrid_e2 {
		display: grid;
		align-content: center;
		width: 100%;
		grid-template-columns: 25% 75%;
	}
	.jt_submenu {
		text-align: center;
		width: 100%;
		display: grid;
		align-content: center;
		width: 100%;
		grid-template-columns: 50px 1fr 50px;
		grid-template-rows: 60px;
	}
	.jt_submenu_cell {
		margin: auto;
		font-size: 20px;
		font-weight: bold;
	}
	.jt_e_top {
		text-align: center;
		height: var(--tw-ele-lat-cat-w);
		line-height: var(--tw-ele-lat-cat-w);
		vertical-align: middle;
	}
	/* JT-199: le quattro etichette attorno alla griglia (sopra, sotto, e le due ruotate ai lati,
	   tenute per decisione di Luca) nella tipografia del titolo di sezione della demo (`.sect`). */
	.jt_e_categories {
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .15625rem;
		text-transform: uppercase;
		color: var(--sub);
	}
	.jt_e_bottom {
		text-align: center;
		height: var(--tw-ele-lat-cat-w);
		line-height: var(--tw-ele-lat-cat-w);
		vertical-align: middle;
	}
	.jt_e_sx {
		grid-row: 1 / span 2;
		grid-column: 1;
		text-align: center;
		transform: rotate(180deg);
		writing-mode: vertical-rl;
	}
	.jt_e_dx {
		grid-row: 1 / span 2;
		grid-column: 4;
		text-align: center;
		writing-mode: vertical-rl;
	}
	/* JT-199: ogni cella della griglia del configuratore e' una CARD della demo (`.camp-card`):
	   superficie argento a due strati, angoli 8px, niente bordi 1px condivisi fra celle. Vale su
	   jt_for_men (YouMan) e sui tre passi del configuratore (jt_outfit_s1/s2/s3), per decisione di
	   Luca (JT-196, d). L'hover non torna a un fondo piatto: alza la lamina, come i bottoni. */
	.jt_e_cell {
		text-align: center;
		padding: var(--tw-padding-elements);
		border: 1px solid transparent;
		border-radius: .5rem;
		background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) padding-box,
		            linear-gradient(180deg, var(--silver-top), var(--silver-bottom)) border-box;
		cursor: pointer;
	}
	.jt_mw:hover {
		opacity: var(--tw-hover-opacity);
	}
	.jt_e_cell:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
		background: linear-gradient(180deg, var(--card-bg), var(--card-bg-2)) padding-box,
		            linear-gradient(180deg, #ded9d1, #b3ada2) border-box;
	}
	.jt_click {
		cursor: pointer;
	}
	.jt_e_b1 {
		border-color: transparent; /* JT-199: la cella e' una card, i bordi 1px non ci sono piu' */
	}
	.jt_e_b2 {
		border-color: transparent; /* JT-199: la cella e' una card, i bordi 1px non ci sono piu' */
	}
	.jt_e_b3 {
		border-color: transparent; /* JT-199: la cella e' una card, i bordi 1px non ci sono piu' */
	}
	.jt_e_b4 {
		border-color: transparent; /* JT-199: la cella e' una card, i bordi 1px non ci sono piu' */
	}
	.jt_e2_b1 {
		border-color: transparent; /* JT-220: la cella e' una card (JT-199), i bordi 1px non ci sono piu' */
	}
	.jt_e2_b2 {
		border-color: transparent; /* JT-220: la cella e' una card (JT-199), i bordi 1px non ci sono piu' */
	}
	.jt_e_cell img {
		transition: transform 1s ease;
	}
	.jt_e_cell:hover img {
		transform: scale(1.1);
	}
	.tw-img-hover-zoom {
		width: 100%;
		overflow: hidden;
		border-radius: .25rem; /* JT-199: e' il contenitore che ritaglia lo zoom, quindi l'angolo va qui e non sull'immagine */
	}
	.jt_e_cell_img {
		width: 100%;
	}
	.jt_e2_cell_img {
		width: 100%;
	}
	.jt_instructions {
		text-align: center;
		color: var(--sub); /* JT-199: e' un'istruzione, testo secondario come `.microcopy` della demo */
		font-size: .875rem;
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
	}
	.jt_snippets,
	.jt_collections {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
	}
	.jt_e2_cell {
		margin: auto;
	}
	.jt_e_cat {
		padding-top: calc(var(--tw-padding-elements)/2);
		margin-bottom: 0px;
		font-weight: 500; /* JT-199: la didascalia della card, come `.camp-card h3` */
	}
	/* ========== START ========== */
	.jt_start_subsection {
		text-align: center;
	}
	.jt_by {
		text-align: center;
	}
	.jt_byjt {
		height: 3.375rem; /* JT-221: la misura del logo nella scatola della home (`.jt_home_wa_logo`); era width 40% sul PNG vecchio */
		width: auto;
	}
	/* ========== PL ========== */
	.jt_outfit {
		padding: var(--tw-padding-elements);
	}
	.jt_sb {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
	}
	.jt_sb_item {
		text-align: center;
		border: 1px solid var(--items-border-color);
		padding: var(--tw-padding-elements);
		margin-bottom: var(--tw-padding-elements);
		background-color: var(--secondary-bg-color);
	}
	.jt_for {
		/* color: var(--tw-p-btn-bgcolor-hover); */
		color: var(--accordion-color);
	}
	/* ========== BOOTSTRAP ========== */
	.jt_subitem_img {
		width: 100%;
		max-width: 80px;
		/* border: 1px solid #dee2e6; */
	}
	.jt_backtotoptabs_img {
		width: 50%;
		max-width: 40px;
		margin-bottom: 4px;
		opacity: 0.20;
	}
	.table {
		margin-bottom: 0px;
	}
	.tw-table-warning {
		background-color: var(--tw-total-color);
	}
	.jt_icon_medium {
		height: 30px;
	}
	.jt_icon_medium_desc {
		padding-top: 5px;
	}
	.jt_table-info, .jt_table-info>td, .jt_table-info>th {
		background-color: var(--tbheader-bg-color);
	}
	.jt_table-tips, .jt_table-tips>td, .jt_table-tips>th {
		background-color: #e6f9ff;
	}
	.jt_sb:hover button {
		background-color: var(--accordion-hover-color);
	}
	.btn-group-lg>.btn, .btn-lg {
		font-size: unset;
	}
	.dropstart .dropdown-toggle::before {
		content: unset;
	}
	.big-checkbox,
	.big-radiobutton {
		width: 22px;
		height: 22px;
		accent-color: var(--ink); /* JT-207: il pallino in inchiostro, non nel blu del sistema */
	}
	/* ============================== Jamal Taslaq Couture PAGE ============================== */
	.jt_jtc_logo {
		color: var(--tw-p-btn-bgcolor-hover);
	}
	/* =============================================================================================== */
	/* ======================================== BOTTONI START ======================================== */
	/* =============================================================================================== */
	.jt_new_start_btn {
		background-color: var(--main-txt-color);
		height: var(--tw-p-btn-height);
		line-height: var(--tw-p-btn-height);
		vertical-align: middle;
		display: inline-block;
		border-radius: calc( var(--tw-p-btn-height) / 2 );
	}
	.jt_new_start_btn:hover {
		background-color: var(--tw-p-btn-bgcolor-hover);
	}
	.jt_new_start_icon {
		float: left;
		width: var(--tw-p-iconbg-height);
		background-color: var(--secondary-bg-color);
		margin: calc( calc( var(--tw-p-btn-height) - var(--tw-p-iconbg-height) ) / 2 );
		border-radius: calc( var(--tw-p-iconbg-height) / 2 );
	}
	.jt_new_start_icon_img {
		width: var(--tw-p-iconbg-height);
		height: var(--tw-p-iconbg-height);
	}
	.jt_new_start_text {
		text-align: center;
		float: left;
		color: var(--secondary-bg-color);
		margin-top: calc( var(--tw-p-btn-height) / 9 );
		margin-bottom: calc( var(--tw-p-btn-height) / 9 );
	}
	.jt_new_start_text_r1 {
		font-size: var(--tw-p-btn-font-size);
		line-height: calc( var(--tw-p-btn-height) / 9 * 4 );
	}
	.jt_new_start_text_r2 {
		font-size: var(--tw-p-btn-font-subsize);
		line-height: calc( var(--tw-p-btn-height) / 9 * 3 );
	}
	.jt_new_start_btn_txt_spacer_left {
		float: left;
		width: calc( var(--tw-p-btn-height) / 6 );
	}
	.jt_new_start_btn_txt_spacer_right {
		float: left;
		width: calc( var(--tw-p-btn-height) / 2 );
	}
	/* =============================================================================================== */
	.jt_new2 {
		margin-bottom: var(--tw-padding-elements);
	}
	.jt_new2_start_btn {
		cursor: pointer;
		background-color: var(--accordion-color);
		height: var(--tw-p-btn-height);
		line-height: var(--tw-p-btn-height);
		vertical-align: middle;
		display: inline-block;
		border-radius: calc( var(--tw-p-btn-height) / 2 );
	}
	.jt_new2_start_btn:hover {
		background-color: var(--accordion-hover-color);
	}
	.jt_new2_start_icon {
		float: left;
		width: var(--tw-p-iconbg-height);
		background-color: var(--secondary-bg-color);
		margin: calc( calc( var(--tw-p-btn-height) - var(--tw-p-iconbg-height) ) / 2 );
		border-radius: calc( var(--tw-p-iconbg-height) / 2 );
	}
	.jt_new2_start_icon_img {
		width: var(--tw-p-iconbg-height);
		height: var(--tw-p-iconbg-height);
	}
	.jt_new2_start_text {
		text-align: center;
		float: left;
		color: var(--secondary-bg-color);
	}
	.jt_new2_txt {
		font-size: var(--tw-p-btn-font-size-big);
	}
	.jt_new2_start_btn_txt_spacer_left {
		float: left;
		width: calc( var(--tw-p-iconimg-height) / 6 );
	}
	.jt_new2_start_btn_txt_spacer_right {
		float: left;
		width: calc( var(--tw-p-btn-height) / 2 );
	}
	.jt_wa_section {
		background-color: var(--secondary-bg-color);
		text-align: center;
		padding-bottom: calc(var(--tw-padding-elements)/2);
		border: 1px solid var(--items-border-color);
	}
	.jt_wa_img:hover {
		opacity: var(--tw-hover-opacity);
	}
	.jt_txt_align_left {
		text-align: left;
	}
	.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
		background-color: var(--accordion-color);
	}
	.nav-link {
		color: var(--text); /* JT-207: era #333 */
	}
	.nav-link:focus, .nav-link:hover {
		color: var(--accordion-color);
	}
	.jt-nav-link-01 {
		background-color: var(--tbheader-bg-color);
	}
	/* JT-242: qui c'era `.pe-4 { padding-right: 0 !important; }` — cioe' l'utility di Bootstrap
	   ANNULLATA a tappeto, per tutto il sito, per servire un punto solo. Due difetti in una
	   riga: chiunque scrivesse `pe-4` da qualche altra parte non otteneva niente, e nell'unico
	   punto che la usava il risultato era sbagliato — la pillola dell'elenco arrivava a **1px**
	   dal filetto a destra, mentre a sinistra restavano 18px. Segnalato da Luca guardandolo.

	   Ora l'elenco dello scrollspy ha una classe sua e il padding giusto, e `pe-4` torna a fare
	   quello che dice. Il valore e' lo stesso `.75rem` che `.jt_row` — la card che contiene le
	   due colonne — mette su tutti i suoi lati: cosi' l'aria fra la pillola e il filetto e'
	   quella fra la pillola e il bordo della card, e non un numero scelto a occhio.

	   ⚠️ Il primo tentativo era `calc(var(--bs-gutter-x) * .5)`, cioe' mezzo gutter di
	   Bootstrap: da' **zero**, perche' `.jt_row` azzera `--bs-gutter-x` apposta e mette
	   l'aria col proprio `padding`. Le colonne qui dentro hanno padding 0: la spaziatura la
	   fa la card, non la griglia. */
	.jt_ss_nav {
		padding-right: .75rem;
	}
	/* ========== */
	.tw-scrollspy {
		height: 666px;
		overflow: auto;
	}
	.tw-scrollspy-item-desc {
		padding: var(--tw-padding-elements);
	}
	/*
	.nav-pills {
		height: 666px;
	}
	*/
	/* ========== */
	.jt_carousel {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.jt_und {
		text-decoration: underline;
	}
	.jt_tt {
		text-decoration: underline;
		color: var(--accordion-color);
	}
	.jt_tt:hover {
		color: var(--accordion-hover-color)
	}
	.jt_button_badge {
		background-color: #fa3e3e;
		border-radius: 2px;
		color: white;
		padding: 1px 3px;
		font-size: 10px;
		position: relative;
		top: 0;
		right: 0;
	}
	.jt_oc_sel {
		width: unset !important;
	}
	.jt_outfit_tr,
	.jt_outfit_sugg_tr {
		text-align: center;
		vertical-align: middle;
	}
	.jt_outfit_sugg_tr {
		background-color: var(--blue-bg); /* JT-207: il blu chiaro delle pastiglie, era #ecf2f9 */
	}
	/* JT-206: le miniature del carrello e dei preferiti (pannelli e pagina) con l'angolo della
	   demo, come `.update img`. */
	.jt_cart_prod_img,
	.jt_wishlist_prod_img {
		max-width: 100px;
		max-height: 100px;
		margin-right: 5px;
		border-radius: .25rem;
	}
	.jt_text_black {
		color: var(--ink); /* JT-206: l'inchiostro della demo, non il nero puro */
	}
	.jt_img_measurements {
		width: 50%;
	}
	.jt_tr_removing {
		background-color: var(--soft); /* JT-206: la riga che sta uscendo si spegne in crema, non in nero */
		opacity: .6;
	}
	.jt_login_form {
		max-width: 350px;
		margin-left: auto;
		margin-right: auto;
	}
	.jt_txt_tabs {
		font-size: var(--tw-txt-tabs-font-size);
	}
	.jt_qrcode {
		max-width: 300px;
	}
	.jt_alert_link {
		text-decoration: underline !important;
	}
	.jt_alert_success {
		color: #0a3622;
		background-color: #d1e7dd;
	}
	.modal-dialog {
		max-width: 600px !important;
	}
	/* */
	.jt_cfg_img {
		width: 100%;
	}
	.jt_fabric_img {
		width: 100%;
		border: 1px solid var(--line); /* JT-207 */
		aspect-ratio: 1 / 1;
	}
	.jt_oc_txt {
		margin-top: 4px;
		font-weight: 300;
	}
	.jt_ar_square {
		aspect-ratio: 1 / 1 !important;
	}
	/* ============================================ COLORS ============================================ */
	.jt_color_333333 {
		color: #333333;
	}
	.jt_color_666666 {
		color: #666666;
	}
	/* ============================================ TASLAQ Live ============================================ */
	.jt_live_cat_parent {
		overflow: hidden;
		width: 100%;
		height: var(--tw-live-btn-height);
		border: 1px solid #000;
	}
	.jt_live_cat_child {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		transition: transform 1s ease;
	}
	.jt_bg1 {
		background-image: url('../img/live/bg1.jpg');
		background-position: center;
	}
	.jt_bg2 {
		background-image: url('../img/live/bg2.jpg');
		background-position: center;
	}
	.jt_bg3 {
		background-image: url('../img/live/bg3.jpg');
		background-position: center;
	}
	.jt_bg1:hover,
	.jt_bg2:hover,
	.jt_bg3:hover {
		opacity: var(--tw-hover-opacity);
	}
	.jt_live_cat_parent:hover .jt_live_cat_child,
	.jt_live_cat_parent:focus .jt_live_cat_child {
		transform: scale(1.1);
	}
	.jt_live_cat_txt {
		color: #fff;
		text-shadow: 1px 1px 2px #000, 0 0 25px #000, 0 0 5px #000;
		text-align: center;
		padding-left: 30px;
		padding-right: 30px;
		height: var(--tw-live-btn-height);
		line-height: var(--tw-live-btn-height);
	}
	.carousel-control-prev-icon {
		background-image: url('../img/ci_prev.png');
	}
	.carousel-control-next-icon {
		background-image: url('../img/ci_next.png');
	}
	.jt_sb_txt {
		color: #fff;
		text-shadow: 1px 1px 2px #000, 0 0 25px #000, 0 0 5px #000;
		text-align: center;
	}
	/* JT-145: via `.jt_sb_f5`, `.jt_sb_m2` e `.jt_sb_m5` con le due pagine timeless;
	   JT-179/180: via `.jt_sb_m1` e `.jt_sb_m4` con le voci in fondo a jt_for_men.
	   Le altre restano: `m3` la usa jt_for_men, le `f*` jt_for_women. */
	.jt_sb_f1,
	.jt_sb_f2,
	.jt_sb_f3,
	.jt_sb_f4,
	.jt_sb_m3 {
		background-position: center;
		background-size: cover;
	}
	.jt_sb_f1 {
		background-image: url('../img/timeless/f1.jpg');
	}
	.jt_sb_f2 {
		background-image: url('../img/timeless/f2.jpg');
	}
	.jt_sb_f3 {
		background-image: url('../img/timeless/f3.jpg');
	}
	.jt_sb_f4 {
		background-image: url('../img/timeless/f4.jpg');
	}
	.jt_sb_m3 {
		background-image: url('../img/timeless/m3.jpg');
	}
	.jt_snippet_btn_ext {
		background-color: #000;
		padding: 10px;
		cursor: pointer;
	}
	.jt_snippet_btn_int {
		color: #fff;
		border: 1px solid #fff;
		transition: all 1s ease;
	}
	.jt_snippet_btn_int:hover {
		background-color: #000;
		opacity: var(--tw-hover-opacity);
	}
	.jt_hr_sep {
		background-color: #fff;
		height: 1px;
		padding: 0;
		margin: 18px auto 16px;
		width: 30%;
	}
	.jt_timeless_sb {
		color: #fff;
		text-align: center;
		padding: 10px !important;
	}
	.jt_timeless_sb_body {
		color: #000;
		text-align: center;
		padding: 20px !important;
		background-color: #fff;
	}
	/* JT-178: il banner «(UN)LIMITED EDITION» su jt_w_prive, che rimanda alla demo.
	   Stessa resa del banner che apre la demo (limited/assets/css/style.css, .banner*):
	   velo scuro, cornice bianca a 10px, titolo spaziato, riga sottile, sottotitolo.
	   Titolo e sottotitolo scalano con le variabili del sito, non in rem come nella demo. */
	.jt_ule_banner,
	.jt_ule_banner:hover {
		color: #fff;
		text-decoration: none;
	}
	.jt_ule_banner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: relative;
		isolation: isolate;
		min-height: 240px;
		padding: 40px 20px;
		background: #1e1912 url('../limited/assets/img/banner-limited.jpg') center / cover no-repeat;
		border-radius: .25rem; /* JT-209: l'angolo della demo anche qui, come sulle foto grandi e sulle card dello slider */
		overflow: hidden; /* JT-210: il velo `::before` e' un figlio e non segue l'angolo del padre: senza ritaglio i suoi angoli scuri restano squadrati e l'arrotondamento non si vede */
		text-align: center;
		text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
	}
	.jt_ule_banner::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: rgba(30, 25, 18, .42);
		transition: background-color 1s ease;
	}
	.jt_ule_banner:hover::before {
		background-color: rgba(30, 25, 18, .6);
	}
	.jt_ule_banner::after {
		content: '';
		position: absolute;
		inset: 10px;
		border: 1px solid rgba(255, 255, 255, .85);
		/* JT-239: la cornice segue l'angolo del banner invece di restare squadrata dentro un
		   riquadro arrotondato. Stesso valore del padre e non uno piu' piccolo: geometricamente
		   un bordo 10px dentro un raggio di 4px avrebbe raggio zero — cioe' l'angolo vivo di
		   prima — ma a schermo quello che si legge e' il rapporto fra le due cornici, non la
		   costruzione. Stessa riga in `limited/assets/css/style.css` su `.banner-frame`: e' la
		   stessa grafica in due fogli, e correggerne una sola le fa divergere. */
		border-radius: .25rem;
		pointer-events: none;
	}
	.jt_ule_title {
		font-size: var(--tw-h1-font-size);
		line-height: 1;
		letter-spacing: .15em;
	}
	.jt_ule_rule {
		width: 30%;
		max-width: 220px;
		border-top: 1px solid rgba(255, 255, 255, .8);
	}
	.jt_ule_sub {
		/* piu' piccolo dell'h4 del sito: nella demo il sottotitolo e' circa la meta' del titolo */
		font-size: clamp(13px, calc(var(--tw-h4-font-size) * .7), 26px);
		letter-spacing: .07em;
	}
	@media (max-width: 767.98px) {
		/* sotto i 768px l'h1 del sito (30px + spaziatura) non sta in una riga a 375px:
		   stessi numeri del banner della demo al suo breakpoint stretto */
		.jt_ule_banner {
			min-height: 155px;
			padding: 28px 16px;
			gap: 7px;
		}
		.jt_ule_title {
			font-size: 20px;
			letter-spacing: 2px;
		}
		.jt_ule_sub {
			font-size: 13px;
		}
	}
	/* =============================================================== */
	/*                               YSYW                              */
	/* =============================================================== */
	.jt_collapse_padding {
		padding-left: var(--tw-padding-elements);
		padding-right: var(--tw-padding-elements);
	}
	.jt_btn_fw {
		width: 100%;
	}
	.jt_oc_table {
		border: 1px solid #000;
	}
	.jt_oc_tr {
		color: #000;
	}
	.jt_oc_tr:hover {
		color: #fff;
		background-color: #000;
	}
	.jt_btn_txt {
		--bs-btn-font-size: 1rem;
		--bs-btn-font-weight: 300;
		--bs-btn-line-height: 1.5;
		font-size: var(--bs-btn-font-size);
		font-weight: var(--bs-btn-font-weight);
		line-height: var(--bs-btn-line-height);
	}
	.jt_lightbulb:hover {
		color: orange;
	}
	/* ============================================ owl carousel ============================================ */
	.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
		background: var(--accordion-color);
	}
	button.owl-prev span,
	button.owl-next span {
		font-size: var(--tw-h3-font-size) !important;
	}
	form {
		margin-top: 0em;
		margin-block-end: 0em;
	}
	.jt_avatar_img {
		width: 150px;
		height: 150px;
		border-radius: 75px;
	}
	.jt_offcanvas {
		background-color: var(--main-bg-color);
	}
	/* ======================================== COLORS ======================================== */
	.jt_readmore {
		color: #808080;
		font-size: var(--tw-readmore);
		font-weight: 300;
	}
	.jt_c_808080 {
		color: #808080;
	}
	.jt_c_ffffff {
		color: #ffffff !important;
	}
	/* JT-201: le card dello slider della home vestite come il banner della demo (vedi
	   `.jt_ule_banner`): titolo Roboto spaziato, filetto, sottotitolo spaziato, angolo 4px.
	   La cornice bianca sottile dentro la foto (un `::after` sul <li>) c'era dal JT-201 al
	   JT-253, poi Luca l'ha tolta: sulle foto verticali del carosello era un bordino, non una
	   cornice. L'ombra sotto il testo resta a gradiente — le foto sono verticali, un velo
	   uniforme le spegnerebbe — ma vira dal nero all'inchiostro caldo della demo. */
	.jt_hs_overlay {
		position: absolute;
		width: 100%;
		height: 75%;
		background-image: linear-gradient(to bottom, transparent, rgba(30, 25, 18, .96));
		bottom: 0px;
		left: 0px;
	}
	.jt_hs_titdes {
		position: absolute;
		bottom: 22px;
		width: 100%;
		text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
	}
	.jt_hs_title {
		/* JT-223: Montserrat come prima del JT-201 — il «JT» dei titoli (`.appiccicato`) è fatto per
		   somigliare al monogramma, e la città accanto è Roboto per conto suo (`.txt-roboto` nella stringa). */
		font-family: 'Montserrat', sans-serif;
		font-weight: 400;
		/* JT-260: dal JT-259 le tre card stanno affiancate anche sul telefono, e a 375px una card
		   e' larga 118px: «JT MILAN» a 20px con .15em di spaziatura sfiorava il bordo (e sotto i
		   375 finiva sotto l'`overflow: hidden`). Il corpo segue la larghezza dello schermo —
		   4.5vw: 16,9px a 375, 14,4px a 320 — con pavimento 12px e tetto il corpo di sempre, che
		   torna da 444px in su: sul desktop non cambia un pixel. */
		font-size: clamp(12px, 4.5vw, var(--tw-h3-font-size));
		line-height: 1;
		letter-spacing: .15em;
	}
	.jt_hs_rule {
		width: 30%;
		max-width: 160px;
		margin: 8px auto;
		border-top: 1px solid rgba(255, 255, 255, .8);
	}
	.jt_hs_desc {
		font-weight: 300;
		font-size: clamp(12px, calc(var(--tw-h4-font-size) * .8), 22px);
		letter-spacing: .07em;
	}
	.splide__pagination {
		opacity: 0.5;
	}
	/* ======================================== COSMOPOLITAN ======================================== */
	.tw-w40 {
		min-width: 40% !important;
	}
	.jt_vision_img_banner:hover {
		opacity: var(--tw-hover-opacity);
	}
	/* ======================================== MEASUREMENTS ======================================== */
	.jt_video,
	.jt_misure_img {
		width: 60%;
	}
	/* JT-202: la foto dell'atelier sulla pagina Misure — la stessa larghezza del video che
	   sostituisce, ma sul telefono prende tutta la colonna, come l'hero della demo. */
	@media (max-width: 767.98px) {
		.jt_misure_img {
			width: 100%;
		}
	}
	/* ======================================== ACCORDION BOOTSTRAP OVERRIDE ======================================== */
	.accordion {
		--bs-accordion-btn-focus-box-shadow: unset;
		--bs-accordion-active-bg: unset;
		--bs-accordion-btn-focus-box-shadow: unset;
		--bs-accordion-active-bg: var(--tbheader-bg-color);
		--bs-accordion-active-color: var(--accordion-color);
	}
	.jt_accordion {
		padding: 0px;
		--bs-accordion-bg: var(--main-bg-color);
		--bs-accordion-border-color: var(--main-bg-color);
		--bs-accordion-border-width: 0px;
		--bs-accordion-btn-icon-width: 0px;
		--bs-accordion-btn-active-icon: unset;
		--bs-accordion-btn-focus-box-shadow: unset;
		--bs-accordion-active-bg: unset;
		--bs-accordion-btn-focus-box-shadow: unset;
		--bs-accordion-active-bg: var(--tbheader-bg-color);
		--bs-accordion-active-color: var(--accordion-color);
	}
	.jt_accordion-item {
		margin-bottom: var(--tw-padding-elements);
	}
	.jt_accordion-button {
		background-color: var(--main-bg-color);
		padding: 0px;
		display: block;
	}
	.jt_accordion-body {
		background-color: var(--main-bg-color);
		padding: 0px;
	}
	.jt-cosmopolitan-accordion-button {
		background-color: var(--tbheader-bg-color);
	}
	.jt-cosmopolitan-acc-title {
		display: block !important;
	}
	.jt-cosmopolitan-acc-txt {
	}
	.jt-cosmopolitan-acc-app {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	/* ======================================== ACCORDION ======================================== */
	img.jt_home_img {
		width: 100%;
	}
	.jt_home_img {
		transition: all 1s ease;
		border-radius: .25rem; /* JT-198: angoli della demo sulle immagini grandi, ovunque la classe e' usata */
	}
	.jt_home_img:hover {
		transform: scale(1.05); /* JT-215: solo lo zoom, senza sbiadire (Luca) */
	}
	/* JT-204: l'angolo sta anche sul CONTENITORE. In hover l'immagine scala (1.05) e il
	   contenitore la ritaglia con `overflow: hidden`: senza raggio suo, il ritaglio e' squadrato e
	   l'angolo dell'immagine sparisce per un secondo. Segnalato da Luca sulla home. */
	.jt_home_img_container {
		width: 100%;
		overflow: hidden;
		border-radius: .25rem;
	}
	img.jt_inline_img {
		width: var(--tw-jt-inline-img-size);
		height: var(--tw-jt-inline-img-size);
		border-radius: .25rem; /* JT-201: angolo della demo sulle foto inline */
	}
	/* ====================================== SPLIDE CAROUSEL ====================================== */
	.jt_img_splide_100pc {
		width: 100%;
		height: auto;
	}
	.jt_img_splide_50pc {
		width: 40%;
		height: auto;
	}
	.jt_splide_height {
		height: unset !important;
	}
	.jt_hid_col {
		display: none;
	}
	.jt_w_25prc {
		width: 25%;
	}
	.jt_w_50prc {
		width: 50%;
	}
	/* JT-241: l'icona dei quattro tab del configuratore (IMPOSTAZIONI / SUPERIORE / INFERIORE /
	   TESSUTI). Si chiamava `.jt_mb_4px`, cioe' un nome che dichiarava il valore: cambiarlo
	   avrebbe reso il nome falso ovunque, e quella classe portava anche il CORPO dell'icona,
	   quindi non era nemmeno l'utility che il nome prometteva. Rinominata su quello che e'.
	   ⚠️ Prima di rinominare, verificato che nessuna delle stringhe di
	   `twct_string_translations` la nominasse: li' dentro ci sono nomi di classe, ed e' cosi'
	   che il rename del 2026-05-24 lascio' `tw_tt` rotta per mesi (JT-142).
	   Lo stacco fra icona e testo passa da 4px a `.4em`: legato al corpo dell'icona invece che
	   fisso, cosi' segue i gradini di `--tw-h4-font-size` invece di restare indietro. */
	.jt_tab_ico {
		font-size: var(--tw-h4-font-size);
		/* ⚠️ JT-243: senza questo `display`, il `margin-bottom` qui sotto NON FA NIENTE. Un `<i>`
		   e' `display: inline`, e su un elemento inline i margini verticali non entrano nel
		   flusso: il valore si legge nei calcolati e non sposta un pixel. Era cosi' da sempre —
		   i 4px della vecchia `.jt_mb_4px` non hanno mai staccato niente, e il JT-241 li ha
		   portati a `.4em` senza che si vedesse alcuna differenza. Se ne e' accorto Luca
		   guardando: «non mi sembra cambiato nulla». Misurato dopo: fondo del glifo e cima del
		   testo distavano **-0,6px**, cioe' si sfioravano. */
		display: inline-block;
		margin-bottom: .4em;
	}
	/*
	.jt_subitem_nav_link.active {
		background-color: #666 !important;
	}
	*/
	.jt_contrib_section {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.ts_ss_li {
		overflow: hidden;
		border-radius: .25rem; /* JT-201 */
	}
	/* JT-212: sul telefono lo slider della home — figlio diretto del body, fuori dalla colonna
	   `.jt_home` che ha l'8% di rientro — andava da bordo a bordo, e con l'angolo del JT-201 la
	   prima e l'ultima card si appoggiavano al bordo con l'angolo tondo: `.75rem` ai lati sotto
	   i 768px. JT-213 lo sostitui' con il `padding` di Splide (jt_home.php), JT-259 tolse anche
	   quello, e JT-261 lo rimette qui, identico, sulla stessa osservazione di Luca di due giorni
	   prima. Le tre card restano affiancate: a 375px sono 111px, e il titolo (JT-260) ci sta.
	   JT-253: qui c'era anche `.ts_ss_li::after`, la cornice bianca a 10px dal bordo (JT-201):
	   tolta. Il <li> resta `overflow: hidden` con l'angolo, che ora e' l'unica cosa che gli si
	   chiede. */
	@media (max-width: 767.98px) {
		.jt_body > .splide {
			padding: 0 .75rem;
		}
	}
	.jt_ss_a {
		transition: all 1s ease;
	}
	/* JT-215: in hover le card dello slider non sbiadiscono piu': resta solo lo zoom dell'immagine. */
	.jt_ss_a img {
		transition: transform 1s ease;
	}
	.jt_ss_a:hover img {
		transform: scale(1.05);
	}
	/* ============================================ FLOATING MENU 1 ============================================ */
	.jt_home_float {
		position: fixed;
		bottom: calc(var(--tw-padding-elements)*2);
		left: 50%;
		transform: translateX(-50%);
		background-color: #333;
		color: #fff;
		padding: 10px 20px;
		border-radius: 30px;
		z-index: 1000;
		transition: all 1s ease;
		display: none;
	}
	.jt_home_float:hover {
		opacity: var(--tw-hover-opacity);
		color: #fff;
	}
	/* ============================================ FLOATING MENU 2 ============================================ */
	.tw-floating-button {
		display: flex;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #333;
		color: #fff;
		border: none;
		width: 60px;
		height: 60px;
		cursor: pointer;
		border-radius: 30px;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 3333;
	}
	.tw-floating-button:hover {
		background-color: #1a1a1a;
	}
	.tw-floating-menu {
		display: none;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #333;
		color: white;
		width: 320px;
		height: 60px;
		border-radius: 30px;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
		z-index: 3333;
	}
	.tw-fm-icon {
		height: 24px;
		width: 24px;
		line-height: 60px;
		font-size: 24px;
		cursor: pointer;
		text-align: center;
		vertical-align: middle;
		color: #ccc;
	}
	.tw-fm-icon:hover {
		color: #fff;
	}
	#tw-close-floating-menu-button {
		color: #999;
		padding-left: 12px;
		padding-right: 12px;
	}
	#tw-close-floating-menu-button:hover {
		color: #fff;
	}
	/* JT-226: qui c'era il CSS del «FLOATING MENU 3» (.jt_shop_flo_btn/.jt_shop_flo_menu/.jt_flo_*),
	   usato solo da jt_renderFloatingHomeMenu(), rimossa. */
    .jt_w_col_sx {
        border-left: 1px solid var(--items-border-color);
        border-right: 1px solid var(--items-border-color);
        border-top: 1px solid var(--items-border-color);
        border-bottom: 1px solid var(--items-border-color);
        padding: var(--tw-padding-elements);
    }
    .jt_w_col_dx {
        border-right: 1px solid var(--items-border-color);
        border-top: 1px solid var(--items-border-color);
        border-bottom: 1px solid var(--items-border-color);
        padding: var(--tw-padding-elements);
    }
	.jt_w_col_sx:hover,
    .jt_w_col_dx:hover {
		box-shadow: inset 0px 0px 4px var(--accordion-color);
	}
	.jt_w_col_sx img,
    .jt_w_col_dx img {
		transition: all 1s ease;
	}
	.jt_w_col_sx:hover img,
    .jt_w_col_dx:hover img {
		opacity: var(--tw-hover-opacity);
		transform: scale(1.05);
	}
    .appiccicato {
        letter-spacing: -0.10em;
        font-weight: 500;
    }

    .jt-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .active {
        opacity: 1;
    }

	/* ================================================================================================================================================================================================================ */
	/* ================================================================================================== THE MAKERS ================================================================================================== */
	/* ================================================================================================================================================================================================================ */
    
    #logo-container {
        width: var(--jt-logo-width);
        height: var(--jt-logo-height);
        max-width: 500px;
        max-height: 500px;
        position: relative;
        overflow: hidden;
    }

	/* =============================================================================================== */
	/* ============================================ MEDIA ============================================ */
	/* =============================================================================================== */
	@media only screen and (min-width: 576px) {
		:root {
			--tw-base-font-size: 14px;
			--tw-vision-font-size: 16px;
			--tw-h1-font-size: 30px;
			--tw-h1-big-font-size: 44px;
			--tw-h1-home-font-size: 10vw;
			--tw-h2-font-size: 24px;
			--tw-h3-font-size: 20px;
			--tw-h3-inline-font-size: 20px;
			--tw-h3-home-inline-font-size: 5vw;
			--tw-hb3-font-size: 20px;
			--tw-h4-font-size: 16px;
			--tw-h5-font-size: 14px;
			--tw-h5-st-font-size: 3.5vw;
			--tw-txt-tabs-font-size: 12px;
			--tw-padding-elements: 10px;
			--tw-ele-lat-cat-w: 30px;
			--tw-padding-ele1: 5px;
			--tw-padding-ele2: 20px;
			--tw-padding-sma: 25px;
			--tw-cat-font-size: 16px;
			--tw-p-btn-height: 70px;
			--tw-p-iconbg-height: 50px;
			--tw-p-iconimg-height: 30px;
			--tw-p-btn-2r-height: 90px;
			--tw-p-iconbg-2r-height: 70px;
			--tw-p-iconimg-2r-height: 50px;
			--tw-p-btn-font-size: 22px;
			--tw-p-btn-font-subsize: 16px;
			--tw-p-btn-font-size-big: 28px;
			--tw-live-btn-height: 150px;
			--tw-logo-width: 74px;
			--tw-jt-inline-img-size: 30px;
			--tw-menu-icon-width: 23px;
			--tw-readmore: 3.5vw;
			--tm-beyondspoke-logo-width: 70%;
			--jt-logo-width: 15vw;
			--jt-logo-height: 15vw;
		}	
	}
	@media only screen and (min-width: 768px) {
		:root {
			--tw-base-font-size: 16px;
			--tw-vision-font-size: 18px;
			--tw-h1-font-size: 34px;
			--tw-h1-big-font-size: 50px;
			--tw-h1-home-font-size: 9vw;
			--tw-h2-font-size: 28px;
			--tw-h3-font-size: 24px;
			--tw-h3-inline-font-size: 34px;
			--tw-h3-home-inline-font-size: 5vw;
			--tw-hb3-font-size: 22px;
			--tw-h4-font-size: 20px;
			--tw-h5-font-size: 16px;
			--tw-h5-st-font-size: 3vw;
			--tw-txt-tabs-font-size: 14px;
			--tw-padding-elements: 15px;
			--tw-ele-lat-cat-w: 40px;
			--tw-padding-ele1: 10px;
			--tw-padding-ele2: 30px;
			--tw-padding-sma: 40px;
			--tw-cat-font-size: 18px;
			--tw-p-btn-height: 90px;
			--tw-p-iconbg-height: 70px;
			--tw-p-iconimg-height: 50px;
			--tw-p-btn-2r-height: 110px;
			--tw-p-iconbg-2r-height: 90px;
			--tw-p-iconimg-2r-height: 70px;
			--tw-p-btn-font-size: 32px;
			--tw-p-btn-font-subsize: 20px;
			--tw-p-btn-font-size-big: 36px;
			--tw-live-btn-height: 180px;
			--tw-logo-width: 84px;
			--tw-jt-inline-img-size: 40px;
			--tw-menu-icon-width: 24.3px;
			--tw-readmore: 3vw;
			--tm-beyondspoke-logo-width: 60%;
			--jt-logo-width: 13vw;
			--jt-logo-height: 13vw;
		}	
	}
	@media only screen and (min-width: 992px) {
		:root {
			--tw-base-font-size: 18px;
			--tw-vision-font-size: 20px;
			--tw-h1-font-size: 38px;
			--tw-h1-big-font-size: 56px;
			--tw-h1-home-font-size: 8vw;
			--tw-h2-font-size: 32px;
			--tw-h3-font-size: 28px;
			--tw-h3-inline-font-size: 38px;
			--tw-h3-home-inline-font-size: 4vw;
			--tw-hb3-font-size: 24px;
			--tw-h4-font-size: 24px;
			--tw-h5-font-size: 18px;
			--tw-h5-st-font-size: 2.5vw;
			--tw-txt-tabs-font-size: 16px;
			--tw-padding-elements: 20px;
			--tw-ele-lat-cat-w: 50px;
			--tw-padding-ele1: 20px;
			--tw-padding-ele2: 30px;
			--tw-padding-sma: 50px;
			--tw-cat-font-size: 20px;
			--tw-p-btn-height: 110px;
			--tw-p-iconbg-height: 90px;
			--tw-p-iconimg-height: 70px;
			--tw-p-btn-2r-height: 130px;
			--tw-p-iconbg-2r-height: 110px;
			--tw-p-iconimg-2r-height: 90px;
			--tw-p-btn-font-size: 42px;
			--tw-p-btn-font-subsize: 24px;
			--tw-p-btn-font-size-big: 44px;
			--tw-live-btn-height: 200px;
			--tw-logo-width: 94px;
			--tw-jt-inline-img-size: 50px;
			--tw-menu-icon-width: 26.1px;
			--tw-readmore: 2.5vw;
			--tm-beyondspoke-logo-width: 50%;
			--jt-logo-width: 11vw;
			--jt-logo-height: 11vw;
		}	
	}
	@media only screen and (min-width: 1200px) {
		:root {
			--tw-base-font-size: 22px;
			--tw-vision-font-size: 25px;
			--tw-h1-font-size: 47px;
			--tw-h1-big-font-size: 69px;
			--tw-h1-home-font-size: 80px;
			--tw-h2-font-size: 40px;
			--tw-h3-font-size: 36px;
			--tw-h3-inline-font-size: 52px;
			--tw-h3-home-inline-font-size: 54px;
			--tw-hb3-font-size: 29px;
			--tw-h4-font-size: 31px;
			--tw-h5-font-size: 22px;
			--tw-h5-st-font-size: 20px;
			--tw-txt-tabs-font-size: 20px;
			--tw-padding-elements: 28px;
			--tw-ele-lat-cat-w: 67px;
			--tw-padding-ele1: 28px;
			--tw-padding-ele2: 39px;
			--tw-padding-sma: 67px;
			--tw-cat-font-size: 25px;
			--tw-p-btn-height: 146px;
			--tw-p-iconbg-height: 123px;
			--tw-p-iconimg-height: 101px;
			--tw-p-btn-2r-height: 168px;
			--tw-p-iconbg-2r-height: 146px;
			--tw-p-iconimg-2r-height: 123px;
			--tw-p-btn-font-size: 58px;
			--tw-p-btn-font-subsize: 36px;
			--tw-p-btn-font-size-big: 58px;
			--tw-live-btn-height: 280px;
			--tw-logo-width: 116px;
			--tw-jt-inline-img-size: 67px;
			--tw-menu-icon-width: 30.6px;
			--tw-readmore: 20px;
			--tm-beyondspoke-logo-width: 40%;
			--jt-logo-width: 103px;
			--jt-logo-height: 103px;
			/* JT-092: la colonna prende il valore EFFETTIVO della demo, cioe' il suo
			   max-width MOLTIPLICATO per il suo zoom: 700x1.55 = 1085. Confrontare i due
			   numeri dichiarati non serviva a niente — la demo scala con `zoom`, il sito no. */
			--max-page-width: 1085px;
		}
	}

	/* JT-090: sopra i 1200px il sito non aveva piu' gradini. Restavano solo sei
	   variabili in `vw`, che crescono LINEARMENTE con la finestra: a 3840px il titolo
	   della home diventava 269px e il monogramma 346px, mentre il testo restava a 20px
	   e le icone a 36. Non era «grande»: erano DUE POPOLAZIONI, una ferma e una al triplo.
	   Quelle sei sono state congelate al loro valore a 1200px, e da li' in su cresce
	   tutto insieme, con questi tre gradini.

	   I rapporti sono quelli della demo, che Luca ha indicato come riferimento: il suo
	   `zoom` va 1.55 → 1.65 → 1.8 → 2.0, cioe' ×1.065, ×1.16, ×1.29 rispetto al punto di
	   partenza. Stessi fattori qui, e la colonna che si allarga come la sua (700→1060).

	   ⚠️ NON si e' usato lo `zoom` della demo, pur avendone copiato i numeri. La demo e'
	   una pagina statica; qui ci sono Owl Carousel, Splide, Fancybox e gli offcanvas di
	   Bootstrap, che misurano larghezze in JS — e sotto `zoom` getBoundingClientRect e
	   offsetWidth non concordano. E' la stessa famiglia di guaio dei comandi del video in
	   JT-072. Il sito ha gia' il suo meccanismo (variabili px per gradino): si estende
	   quello, che ottiene lo stesso risultato senza toccare come i carosello si misurano. */
	/* JT-092: due gradini in piu' per la SOLA colonna, che la demo ha e il sito no. */
	@media only screen and (min-width: 1500px) { :root { --max-page-width: 1240px; } }
	@media only screen and (min-width: 1800px) {
		:root {
			--tw-base-font-size: 24px;
			--tw-vision-font-size: 26px;
			--tw-h1-font-size: 50px;
			--tw-h1-big-font-size: 74px;
			--tw-h1-home-font-size: 85px;
			--tw-h2-font-size: 43px;
			--tw-h3-font-size: 38px;
			--tw-h3-inline-font-size: 55px;
			--tw-h3-home-inline-font-size: 57px;
			--tw-hb3-font-size: 31px;
			--tw-h4-font-size: 34px;
			--tw-h5-font-size: 24px;
			--tw-h5-st-font-size: 21px;
			--tw-txt-tabs-font-size: 21px;
			--tw-padding-elements: 30px;
			--tw-ele-lat-cat-w: 72px;
			--tw-padding-ele1: 30px;
			--tw-padding-ele2: 41px;
			--tw-padding-sma: 72px;
			--tw-cat-font-size: 26px;
			--tw-p-btn-height: 155px;
			--tw-p-iconbg-height: 131px;
			--tw-p-iconimg-height: 108px;
			--tw-p-btn-2r-height: 179px;
			--tw-p-iconbg-2r-height: 155px;
			--tw-p-iconimg-2r-height: 131px;
			--tw-p-btn-font-size: 62px;
			--tw-p-btn-font-subsize: 38px;
			--tw-p-btn-font-size-big: 62px;
			--tw-live-btn-height: 298px;
			--tw-logo-width: 124px;
			--tw-jt-inline-img-size: 72px;
			--tw-menu-icon-width: 32.9px;
			--tw-readmore: 21px;
			--jt-logo-width: 110px;
			--jt-logo-height: 110px;
			--max-page-width: 1419px;
		}
	}
	@media only screen and (min-width: 2200px) { :root { --max-page-width: 1518px; } }
	@media only screen and (min-width: 2600px) {
		:root {
			--tw-base-font-size: 26px;
			--tw-vision-font-size: 29px;
			--tw-h1-font-size: 55px;
			--tw-h1-big-font-size: 81px;
			--tw-h1-home-font-size: 93px;
			--tw-h2-font-size: 47px;
			--tw-h3-font-size: 41px;
			--tw-h3-inline-font-size: 59px;
			--tw-h3-home-inline-font-size: 63px;
			--tw-hb3-font-size: 34px;
			--tw-h4-font-size: 36px;
			--tw-h5-font-size: 26px;
			--tw-h5-st-font-size: 24px;
			--tw-txt-tabs-font-size: 24px;
			--tw-padding-elements: 32px;
			--tw-ele-lat-cat-w: 78px;
			--tw-padding-ele1: 32px;
			--tw-padding-ele2: 46px;
			--tw-padding-sma: 78px;
			--tw-cat-font-size: 29px;
			--tw-p-btn-height: 169px;
			--tw-p-iconbg-height: 143px;
			--tw-p-iconimg-height: 116px;
			--tw-p-btn-2r-height: 195px;
			--tw-p-iconbg-2r-height: 169px;
			--tw-p-iconimg-2r-height: 143px;
			--tw-p-btn-font-size: 67px;
			--tw-p-btn-font-subsize: 41px;
			--tw-p-btn-font-size-big: 67px;
			--tw-live-btn-height: 325px;
			--tw-logo-width: 136px;
			--tw-jt-inline-img-size: 78px;
			--tw-menu-icon-width: 36px;
			--tw-readmore: 24px;
			--jt-logo-width: 119px;
			--jt-logo-height: 119px;
			--max-page-width: 1764px;
		}
	}
	@media only screen and (min-width: 3200px) {
		:root {
			--tw-base-font-size: 29px;
			--tw-vision-font-size: 31px;
			--tw-h1-font-size: 60px;
			--tw-h1-big-font-size: 90px;
			--tw-h1-home-font-size: 103px;
			--tw-h2-font-size: 52px;
			--tw-h3-font-size: 46px;
			--tw-h3-inline-font-size: 66px;
			--tw-h3-home-inline-font-size: 69px;
			--tw-hb3-font-size: 38px;
			--tw-h4-font-size: 40px;
			--tw-h5-font-size: 29px;
			--tw-h5-st-font-size: 26px;
			--tw-txt-tabs-font-size: 26px;
			--tw-padding-elements: 36px;
			--tw-ele-lat-cat-w: 86px;
			--tw-padding-ele1: 36px;
			--tw-padding-ele2: 50px;
			--tw-padding-sma: 86px;
			--tw-cat-font-size: 31px;
			--tw-p-btn-height: 188px;
			--tw-p-iconbg-height: 159px;
			--tw-p-iconimg-height: 130px;
			--tw-p-btn-2r-height: 217px;
			--tw-p-iconbg-2r-height: 188px;
			--tw-p-iconimg-2r-height: 159px;
			--tw-p-btn-font-size: 75px;
			--tw-p-btn-font-subsize: 46px;
			--tw-p-btn-font-size-big: 75px;
			--tw-live-btn-height: 361px;
			--tw-logo-width: 150px;
			--tw-jt-inline-img-size: 86px;
			--tw-menu-icon-width: 39.8px;
			--tw-readmore: 26px;
			--jt-logo-width: 133px;
			--jt-logo-height: 133px;
			--max-page-width: 2120px;
		}
	}