/* FUPstudio · il vestito del negozio, uguale all'app: nero, Inter, angoli a 16, bottoni a pillola.
   Caricato da sections/fup-site.liquid su ogni pagina del tema (header, menu in alto, pagine prodotto e collezione).
   Il footer e le pagine About e Contact hanno il loro stile dentro le loro sezioni. Repo: public/fup-site.css. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ══ I CARATTERI E LE FORME DEL TEMA, RISCRITTI. Il tema legge tutto da queste variabili (snippets/css-variables):
   Inter, angoli a 16, bottoni neri a pillola. Le pagine prodotto, collezione e carrello restano bianche
   («per la pagina prodotto, collezioni e cart usa sfondo bianco», 20 settembre 2026); nero solo l'header e i cassetti del menu. ══ */
:root{
  --body-font-stack:'Inter',system-ui,-apple-system,sans-serif;--header-font-stack:'Inter',system-ui,-apple-system,sans-serif;--heading-font-stack:'Inter',system-ui,-apple-system,sans-serif;--button-font-stack:'Inter',system-ui,-apple-system,sans-serif;--label-font-stack:'Inter',system-ui,-apple-system,sans-serif;--navigation-font-stack:'Inter',system-ui,-apple-system,sans-serif;
  --header-font-weight:700;--font-weight-header-bold:800;--heading-spacing:-.03em;--heading-line-height:1.05;--heading-font-case:none;
  --text-color:#111111;--body-color:#FFFFFF;--body-secondary-color:#F5F5F5;--link-color:#111111;--border-color:rgba(0,0,0,.14);
  --primary-btn-bg-color:#000000;--primary-btn-text-color:#FFFFFF;--button-text-case:none;--button-text-spacing-px:0;--button-font-size-px:14px;--alt-btn-border-radius:999px;
  --header-color:#000000;--header-color-darken5:#000000;--header-border-color:transparent;--nav-text-color:#FFFFFF;--nav-text-hover:#FFFFFF;--overlay-header-text-color:#FFFFFF;
  --scheme-white-bg:#FFFFFF;--scheme-white-text:#111111;--scheme-light-bg:#F5F5F5;--scheme-light-text:#111111;--scheme-accent-bg:#000000;--scheme-accent-text:#FFFFFF;--scheme-dark-bg:#000000;--scheme-dark-text:#FFFFFF;
  --color-scheme-light-background:#F5F5F5;--color-scheme-light-text:#111111;--color-scheme-feature-background:#000000;--color-scheme-feature-text:#FFFFFF;--color-scheme-dark-background:#000000;--color-scheme-dark-text:#FFFFFF;
  --scheme-white-btn-bg:#000000;--scheme-white-btn-text:#FFFFFF;--scheme-white-link:#111111;--scheme-light-btn-bg:#000000;--scheme-light-btn-text:#FFFFFF;--scheme-light-link:#111111;--scheme-accent-btn-bg:#FFFFFF;--scheme-accent-btn-text:#000000;--scheme-accent-link:#FFFFFF;--scheme-dark-btn-bg:#FFFFFF;--scheme-dark-btn-text:#000000;--scheme-dark-link:#FFFFFF;
  --menu-drawer-color:#000000;--menu-drawer-text-color:#FFFFFF;--menu-drawer-text-hover-color:#B0B0B0;
  --cart-drawer-color:#FFFFFF;--cart-drawer-text-color:#111111;
  --block-border-radius:16px;--input-border-radius:12px;--thumbnail-border-radius:16px;--badge-border-radius:999px;--swatch-border-radius:50%;
}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body.template-index{background-color:#000000!important}
.btn,.button,button.btn,a.btn,input[type=submit],.shopify-payment-button__button{border-radius:999px!important;font-family:'Inter',system-ui,sans-serif!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
/* Le foto dei prodotti e delle collezioni: angoli a 16 come le anteprime dell'app. */
#MainContent .product-card img,#MainContent .product-card__image-wrapper,#MainContent .product-single__media img,#MainContent .product__media img,#MainContent .product-media img,#MainContent .swiper-slide img,#MainContent .thumbnail img,#MainContent .collection-header img,#MainContent .collection-card img,#MainContent .grid__item img{border-radius:16px}
#MainContent .product-card,#MainContent .product-card__image-wrapper,#MainContent .swiper-slide{overflow:hidden;border-radius:16px}
#MainContent .thumbnail img{border-radius:8px}

/* ══ L'HEADER, SU TUTTE LE PAGINE: nero pieno; sulla home invisibile da fermo e con un velo di vetro appena
   scorri («un leggero glass effect allo scendere, ma con un po' di ritardo»). Lo script mette `fh-scrolled`
   sul body dopo 80px; il velo arriva con 0,25 s di ritardo e 0,7 s di dissolvenza. ══ */
.header-section,.header-section .header-section--wrapper,.header-section .site-header__wrapper,.header-section .nav-bar-wrapper{background:transparent!important;background-color:transparent!important;box-shadow:none!important}
.header-section header.site-header,.header-section .nav-bar,.header-section .mobile-nav-bar-wrapper{background:#000000!important;background-color:#000000!important;box-shadow:none!important;border:0!important}
body.template-index .header-section header.site-header,body.template-index .header-section .nav-bar,body.template-index .header-section .mobile-nav-bar-wrapper{background:transparent!important;background-color:transparent!important;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background-color .7s ease .25s,backdrop-filter .7s ease .25s,-webkit-backdrop-filter .7s ease .25s}
body.template-index.fh-scrolled .header-section header.site-header,body.template-index.fh-scrolled .header-section .nav-bar,body.template-index.fh-scrolled .header-section .mobile-nav-bar-wrapper{background-color:rgba(8,8,10,.28)!important;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
/* Logo a sinistra (20 da sinistra e 20 da sopra, 42×55), menu al centro, icone a destra, qualunque layout abbia
   il tema: logo e menu si ancorano all'header stesso, non al contenitore che il tema cambia. */
header.site-header{position:relative!important;padding:0 20px!important;border:0!important}
header.site-header .site-header__wrapper{position:static!important;height:95px!important;min-height:0!important}
header.site-header .site-header__wrapper__left,header.site-header .site-header__logowrapper,header.site-header .site-header__logo{position:static!important;transform:none!important;padding:0!important;margin:0!important;line-height:0;height:auto!important}
header.site-header .site-header__logo-overlay-image,header.site-header .site-header__logo-image{position:absolute!important;left:20px!important;top:20px!important;right:auto!important;padding:0!important;margin:0!important;line-height:0;transform:none!important}
header.site-header .site-header__logo img{width:42px!important;height:55px!important;max-width:none!important;max-height:none!important}
header.site-header .site-header__nav.top-links{display:none!important}
header.site-header .site-header__wrapper__right a[href*="/search"],header.site-header .site-header__wrapper__right [class*="search"],header.site-header .site-header__wrapper__right [data-search],header.site-header .site-header__wrapper__right search-drawer-open{display:none!important}
nav.nav-bar .search-button{display:none!important}
/* ══ IL MENU IN ALTO: App · Shop · Pricing · About · Contact, con i pannelli a colonne come Leonardo. ══ */
#fh-nav{position:absolute;left:0;right:0;top:0;height:95px;margin:0 auto;width:max-content;display:flex;align-items:center;gap:6px;z-index:6;font-family:'Inter',system-ui,sans-serif}
#fh-nav .fh-nav-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:rgba(255,255,255,.88);background:transparent;border:0;cursor:pointer;text-decoration:none;transition:background .25s ease,color .25s ease;font-family:inherit}
#fh-nav .fh-nav-link:hover,#fh-nav .fh-nav-item.is-open > .fh-nav-link{color:#FFFFFF;background:rgba(255,255,255,.1)}
#fh-nav .fh-nav-link svg{width:10px;height:10px;transition:transform .25s ease}
#fh-nav .fh-nav-item.is-open > .fh-nav-link svg{transform:rotate(180deg)}
.fh-mega{position:absolute;left:50%;top:95px;width:min(1180px,calc(100vw - 48px));transform:translateX(-50%) translateY(-8px);opacity:0;pointer-events:none;z-index:5;background:rgba(10,10,12,.97);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:34px 36px;box-sizing:border-box;display:grid;grid-template-columns:1.2fr 1.2fr 1fr 300px;align-items:start;gap:32px;color:#FFFFFF;font-family:'Inter',system-ui,sans-serif;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.fh-mega.is-open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.fh-mega h4{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;font-family:inherit}
.fh-mega .fh-col{display:flex;flex-direction:column;gap:4px}
/* ⚠️ min-height, non height, e niente padding sotto (25 settembre 2026, testi lunghi): con 78 px fissi e overflow nascosto
   una descrizione tradotta (o l'inglese fra 990 e ~1180 px, dove le colonne sono strette) veniva tagliata a metà riga.
   Senza il padding di sotto le voci inglesi da 1200 px in su restano alte 78 e identiche al pixel (misurato); quelle più
   lunghe crescono invece di perdere parole. */
.fh-mega a.fh-voce{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;padding:8px 10px 0;margin:0 -10px;min-height:78px;box-sizing:border-box;overflow:hidden;border-radius:12px;color:#FFFFFF;text-decoration:none;transition:background .2s ease}
.fh-mega .fh-h4-dopo{margin-top:22px}
.fh-mega .fh-etichetta{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;font-weight:600;margin-bottom:3px}
.fh-mega a.fh-voce-tp{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:12px}
.fh-mega .fh-col:first-child a.fh-voce:last-child{border-top:1px solid transparent;margin-top:6px;padding-top:12px}
.fh-mega a.fh-voce:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
/* Le miniature dei generatori sono le stesse dell'app (public/styles/sez-*.webp); le librerie hanno le icone dell'app (components/IconeSezioni). */
.fh-mega .fh-mini{width:56px;height:56px;border-radius:12px;object-fit:cover;display:block;background:#1A1A1A}
.fh-mega a.fh-riga svg{width:20px;height:20px;flex:none;stroke:#FFFFFF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.fh-mega a.fh-voce b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.fh-mega a.fh-voce span{display:block;font-size:12.5px;color:#A8A8A8;line-height:1.4;margin-top:2px}
/* Otto righe di libreria alte quanto quattro voci con miniatura: le tre colonne finiscono alla stessa riga.
   Anche qui min-height (25 settembre 2026): una riga che va a capo («Bibliothèque de CAO vectorielle») cresce invece di
   finire sopra quella sotto; in inglese, su una riga, resta alta 37,75. */
.fh-mega a.fh-riga{display:flex;align-items:center;gap:10px;min-height:37.75px;padding:0;font-size:14px;color:#E6E6E6;text-decoration:none;transition:color .2s}
.fh-mega a.fh-riga:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:4px}
.fh-mega .fh-card{position:relative;border-radius:16px;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;color:#FFFFFF;text-decoration:none;background:#111111}
.fh-mega .fh-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease;border-radius:0}
.fh-mega .fh-card:hover img{transform:scale(1.04)}
.fh-mega .fh-card::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 100%)}
/* La foto del pannello App alta quanto le colonne («allunga un po' la foto di destra»); il bottone sopra la sfumatura, senza ombra. */
.fh-mega[data-for=app] .fh-card{align-self:stretch;min-height:400px}
.fh-mega .fh-card.fh-card-muta::after{background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.55) 100%)}
.fh-mega[data-for=shop]{grid-template-columns:1.2fr 1.2fr 1fr 380px}
.fh-mega .fh-card.fh-card-larga{min-height:0;aspect-ratio:8/5}
.fh-mega .fh-card b{position:relative;z-index:1;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.fh-mega .fh-card span{position:relative;z-index:1;box-shadow:none;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:#FFFFFF;color:#000000;font-size:13px;font-weight:600;width:max-content}
@media (max-width:900px){#fh-nav,.fh-mega{display:none!important}}
/* ══ IL CASSETTO DEL TELEFONO: righe tutte uguali e più grandi («distribuiti in modo uguale, font più grande», 21 set 2026).
   Il tema dava 20px di padding a Shop e 10px alle voci semplici: qui vince l'id. ══ */
#NavDrawer .mobile-nav__item.top-level > a.mobile-nav__link,#NavDrawer .mobile-nav__item.top-level > .mobile-nav__has-sublist > a.mobile-nav__link,#NavDrawer .fh-mob-app summary{padding:16px 0;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
#NavDrawer .mobile-nav__item.top-level > .mobile-nav__has-sublist{align-items:center}
#NavDrawer .mobile-nav__item.top-level > .mobile-nav__has-sublist > .mobile-nav__toggle{padding:0;align-self:center}
#NavDrawer .mobile-nav__item.top-level > .mobile-nav__has-sublist > .mobile-nav__toggle button{padding:0;height:auto;min-height:0}
/* Il sottomenu App: le stesse voci del pannello, miniature accanto ai generatori e icone accanto alle librerie.
   Il colore del cassetto il tema lo dà solo agli <a>: la riga «App» è un <summary> e senza il suo color resta #111 su nero. */
#NavDrawer .fh-mob-app summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--menu-drawer-text-color,#FFFFFF)}
/* Il colore «hover» solo dove il puntatore esiste: su iPhone restava appiccicato dopo il tocco e «App» sembrava spenta. */
@media (hover:hover){#NavDrawer .fh-mob-app summary:hover{color:var(--menu-drawer-text-hover-color,#B0B0B0)}}
#NavDrawer .fh-mob-app summary::-webkit-details-marker{display:none}
#NavDrawer .fh-mob-app summary svg{width:16px;height:16px;transition:transform .25s ease;margin-left:12px;flex:none}
#NavDrawer .fh-mob-app[open] summary svg{transform:rotate(180deg)}
#NavDrawer .fh-mob-gruppi{display:flex;flex-direction:column;padding:0 0 18px}
#NavDrawer .fh-mob-gruppi b{display:block;margin:14px 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A8A8A;font-weight:600;font-family:'Inter',system-ui,sans-serif}
#NavDrawer .fh-mob-gruppi a{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:17px;color:#FFFFFF;text-decoration:none;font-family:'Inter',system-ui,sans-serif}
#NavDrawer .fh-mob-mini{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:#1A1A1A}
#NavDrawer .fh-mob-ico{width:44px;height:44px;border-radius:10px;background:#161616;display:flex;align-items:center;justify-content:center;flex:none}
#NavDrawer .fh-mob-ico svg{width:20px;height:20px;stroke:#FFFFFF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#NavDrawer .fh-mob-gruppi a.fh-mob-apri{display:inline-flex;align-items:center;margin-top:18px;height:46px;padding:0 22px;border-radius:999px;background:#FFFFFF;color:#000000;font-weight:600;width:max-content}
/* ══ IN ALTO A DESTRA «Open the app» accanto alla X; IN FONDO social, Contact e Account, pagine legali (21 set 2026). ══ */
#NavDrawer .fh-mob-destra{display:flex;align-items:center;gap:6px}
#NavDrawer a.fh-mob-top{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#FFFFFF;color:#000000;font-size:13px;font-weight:600;font-family:'Inter',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
#NavDrawer a.fh-mob-top:hover{color:#000000;background:#E8E8E8}
#NavDrawer .fh-mob-fondo{margin-top:auto;padding:22px 15px 26px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:18px;font-family:'Inter',system-ui,sans-serif}
#NavDrawer .fh-mob-fondo .fs-social{display:flex;gap:8px;margin:0}
#NavDrawer .fh-mob-fondo .fs-social a{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center}
#NavDrawer .fh-mob-fondo .fs-social svg{width:16px;height:16px;fill:#FFFFFF;display:block}
#NavDrawer .fh-mob-fondo-link{display:flex;align-items:center;gap:24px;font-size:15px;font-weight:500}
#NavDrawer .fh-mob-fondo-link a{color:#FFFFFF;text-decoration:none}
#NavDrawer .fh-mob-fondo-link .nav--meta{margin:0;padding:0;list-style:none}
#NavDrawer .fh-mob-fondo-link .nav--meta .mobile-nav__item{font-size:15px;padding:0;font-family:'Inter',system-ui,sans-serif}
#NavDrawer .fh-mob-fondo-link .nav--meta .mobile-nav__item::after{display:none}
#NavDrawer .fh-mob-legale{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px}
#NavDrawer .fh-mob-legale a{color:#8A8A8A;text-decoration:none}
/* ══ «OPEN THE APP» SEMPRE IN ALTO A DESTRA (fup-site.js, 23 set 2026): la pillola bianca del cassetto, sull'header nero.
   Sul telefono la colonna di destra diventa una fila che trabocca verso sinistra, e la pillola si stringe per non
   toccare il logo al centro (13 px di aria a 375 px di larghezza). ══ */
/* 26 px: senza l'icona dell'account (login del negozio spento il 23 set) il bollino del carrello toccava la pillola.
   ⚠️ Col selettore lungo e !important: il tema azzera il margine dei `li` delle icone con una regola più forte, e la
   prima versione (solo `.fh-apri-li`) usciva a 0 px — misurato sul negozio vivo, «io lo vedo uguale» (Francesco). */
.fh-apri-li{display:flex;align-items:center}
header.site-header ul.top-links--icon-links > li.fh-apri-li{margin-left:26px!important}
a.fh-apri{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:999px;background:#FFFFFF;color:#000000!important;font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background .2s ease}
a.fh-apri:hover{background:#E8E8E8}
nav.mobile-nav-bar-wrapper .right-side .site-nav--mobile{display:flex;align-items:center;justify-content:flex-end;gap:2px}
a.fh-apri.fh-apri-mob{height:30px;padding:0 11px;font-size:12px}
/* ══ LA PILLOLA NON SALE SUL LOGO, IN NESSUNA LINGUA (25 settembre 2026). In Clarity un telefono con la traduzione automatica
   di Chrome in russo: «Откройте приложение» è lunga 160 px e copriva il logo quasi tutto. «Non adatterei il layout alla lingua
   russa… quello che mi preoccupa è che il layout si modifichi in funzione della lingua. Se succedesse con spagnolo, francese,
   tedesco, portoghese o giapponese?» (Francesco). Misurato a 375 px: logo 162,5–212,5; la pillola inglese 226–326 (100 px);
   spagnolo 199–326, francese 193–326, portoghese 205–326, russo 166–326: tre lingue su cinque di quelle che ci interessano
   toccavano il logo. Nessuna regola per lingua: la riga del tema (una tabella 25% · 50% · 25%, e la pillola traboccava dalla
   sua cella verso sinistra) diventa una griglia «1fr · logo · 1fr». La colonna del logo è larga quanto il logo, quella di
   destra finisce 6 px prima di lui, e la pillola, se il testo non ci sta, va su due righe dentro il suo spazio invece di
   allargarsi. In inglese da 360 px in su tutto resta al pixel dov'era (misurato a 360, 375, 390, 414: logo, pillola, carrello,
   tre linee); a 320 l'inglese stesso copriva il logo di 14 px e adesso va su due righe anche lui.
   ⚠️ margin:0 sulle celle: dentro la tabella il tema dà loro un margin-top di 30 px che una cella ignora e una griglia no.
   ⚠️ 6 px e non di più: a 360 px (tanti Android) la pillola inglese ha giusto 100 px di posto; con 8 andrebbe a capo.
   ⚠️ line-height 14px e non 1,15: con un numero che non cade sul pixel il testo inglese scendeva di 0,1 px.
   ⚠️ overflow-wrap anche sui figli: la traduzione di Chrome avvolge il testo in <font>, e a quelli arriva dal tema
   overflow-wrap:break-word, che non spezza una parola più larga della riga («приложение» a 320 px). ══ */
nav.mobile-nav-bar-wrapper .mobile-grid--table{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:6px}
nav.mobile-nav-bar-wrapper .mobile-grid--table > .grid__item{display:block;width:auto!important;min-width:0;margin:0!important}
nav.mobile-nav-bar-wrapper .right-side .site-nav--mobile{min-width:0}
nav.mobile-nav-bar-wrapper a.fh-apri.fh-apri-mob{min-width:0;white-space:normal;height:auto;min-height:30px;padding-top:4px;padding-bottom:4px;line-height:14px;text-align:center}
nav.mobile-nav-bar-wrapper a.fh-apri.fh-apri-mob,nav.mobile-nav-bar-wrapper a.fh-apri.fh-apri-mob *{overflow-wrap:anywhere}
/* ══ IL LOGO SI TOCCA ANCHE UN PO' INTORNO (26 settembre 2026). Con la tabella del tema il link del logo era largo tutta la
   cella di mezzo (165 px a 360) e un tocco nello spazio vuoto accanto al logo portava alla home; con la griglia qui sopra la
   colonna del logo è larga quanto lui (50 px) e quel tocco non faceva più niente. «Sull'area vicino al logo non saprei, tu
   faresti?» (Francesco). Non la cella intera di prima, che arrivava fino alla pillola «Open the app» e poteva rubarle i
   tocchi: un'area invisibile centrata sul logo, alta quanto tutto l'header e larga il logo più 4 px per lato. Sul telefono
   e sul tablet da 50×65 a 58×95 (15 px sopra e 15 sotto il logo, fino ai bordi dell'header); sul computer da 42×55 a 50×95
   (20 e 20): il logo lì era largo 42, sotto i 44 di Apple, e l'iPad in orizzontale ha proprio quell'header. È un ::after
   del link stesso, quindi il tocco apre la home come il logo, e non si vede: logo, pillola, carrello e tre linee restano al
   pixel dov'erano.
   ⚠️ 4 px e non di più: a 320 px, e in ogni lingua che riempie la colonna della pillola (spagnolo, francese, russo…), la
   pillola parte esattamente 6 px dopo il logo (il column-gap qui sopra). Con 4 restano 2 px d'aria sempre, qualunque sia il
   testo: un'area più larga solo dove la pillola inglese lascia spazio sarebbe di nuovo un layout che cambia con la lingua.
   ⚠️ position:relative sul link del telefono: senza, l'::after si misurerebbe sull'header intero. Sul computer il link è
   già absolute (regola del logo in cima).
   ⚠️ Scorrendo, il tema rimpicciolisce il logo (45×59) con un transform sul suo contenitore: l'area si stringe con lui
   (52×86) e resta centrata, sempre dentro l'header.
   ⚠️ Di lato l'area cresce solo di quei 4 px anche verso le tre linee, dove il posto ci sarebbe (86 px di vuoto a 320, 121
   a 390, 141 a 430): un tocco 20 px a sinistra del logo continua a non fare niente. Un'area storta, larga solo da quella
   parte, non sarebbe più «centrata sul logo» come abbiamo detto a Francesco e su Android anche il lampo qui sotto verrebbe
   storto: se la vuole, la decide lui (e il controllo di simmetria in tests/logo-tocco.test.cjs va cambiato con lei).
   ⚠️ A riposo non cambia niente; si vedono diverse due cose, solo nel momento del gesto. Col tasto Tab: l'anello del focus
   di Chrome (outline auto) abbraccia anche i figli del link, quindi ora incornicia l'area invece di passare sopra la
   scritta «studio» del logo. Col dito, su Android (Chrome e gli altri browser Chromium col touch): il lampo azzurro del
   tocco (-webkit-tap-highlight-color, che il tema lascia al colore di Chrome) si disegna sugli stessi rettangoli
   dell'anello, quindi ora copre tutta l'area, una colonna alta quanto l'header (58×95 sul telefono, 50×95 sul computer
   touch), invece del solo logo (50×65, 42×55). Prima della griglia del 25 settembre copriva la cella intera, 165×65 a 360.
   Spegnerlo (-webkit-tap-highlight-color:transparent sul link) toglierebbe il lampo del tutto: è un altro cambio di
   comportamento, solo col sì di Francesco. Su iPhone (Safari) il lampo non l'abbiamo misurato. ══ */
nav.mobile-nav-bar-wrapper a.site-header__logo-image,nav.mobile-nav-bar-wrapper a.site-header__logo-overlay-image{position:relative}
nav.mobile-nav-bar-wrapper a.site-header__logo-image::after,nav.mobile-nav-bar-wrapper a.site-header__logo-overlay-image::after{content:"";position:absolute;inset:-15px -4px}
header.site-header a.site-header__logo-image::after,header.site-header a.site-header__logo-overlay-image::after{content:"";position:absolute;inset:-20px -4px}
/* ══ LA HOME TIENE IL SUO POSTO FINCHÉ fup-home.js NON L'HA COSTRUITA (CLS 1 in Clarity, 23 set 2026).
   La sezione del tema è un contenitore vuoto più uno script `defer`: il browser dipingeva la pagina prima che lo script
   arrivasse, col contenitore alto 0 e il footer in cima sotto l'header trasparente; poi entravano ~11.800 px di home e
   il footer, che riempiva lo schermo, volava via. Adesso il contenitore vuoto è alto uno schermo (nero, come il body
   della home) e il footer parte già fuori vista. fup-home.js mette data-pronto sul contenitore nello stesso passo in cui
   inserisce la home, quindi la riserva cade mentre la home entra: nessun salto. Provato sul negozio vivo: CLS da 1,009 a 0
   a 1280×800, e a home costruita la regola non combacia più (altezza identica a prima).
   ⚠️ data-pronto è il segnale (public/fup-home.js riga 5, generata da scripts/build-home.py): se cambia nome lì, va
   cambiato anche qui. Non si romperebbe niente — la riserva scadrebbe solo col suo orologio, e la home costruita è
   molto più alta di uno schermo — ma la regola non saprebbe più quando la home è arrivata.
   ⚠️ Se lo script non arriva mai (bloccato, rete giù) la riserva scade dopo 8 s con un'animazione da 0 s e il footer
   compare: la pagina non resta nera per sempre. Uno script che arriva dopo gli 8 s costruisce la home lo stesso. ══ */
#fup-home-mount:not([data-pronto]){min-height:100vh;animation:fh-riserva-scade 0s linear 8s forwards}
@keyframes fh-riserva-scade{to{min-height:0}}

/* Pagine dei generatori (sezione fup-generatore del tema): niente etichetta «FUPstudio app · <generatore>» sopra il
   titolo. «in queste pagine toglierei questa scrittina, occupa altezza e non è utile» (Francesco, 25 settembre 2026).
   Solo quella in testa: le etichette delle altre sezioni («How it works», «FAQ»…) restano. */
.fg .fg-hero .fg-lab{display:none!important}

/* ══ TESTI LUNGHI: LA HOME E LE PAGINE DEI GENERATORI TENGONO CON QUALUNQUE LINGUA (25 settembre 2026).
   Le stesse prove della pillola in alto (traduzione di Chrome simulata in spagnolo, francese, tedesco, portoghese, giapponese
   e russo, a 320–414 px e sul computer) hanno trovato altri punti che si rompevano. Nessuna regola per lingua: dove un testo
   non ci sta, la sua scatola cresce o va a capo invece di uscire. In inglese, da 375 px in su, niente si sposta (misurato
   elemento per elemento, prima e dopo, nello stesso istante). Il CSS della home vive in docs/fup-home-shopify.liquid (→
   public/fup-home.js): queste regole lo correggono da qui, con `body` davanti per vincere a parità di selettore. ══ */
@media (max-width:900px){
  /* «Browse the shop · Brushes in the app» (sezione Shop): una riga che il CSS del telefono non lascia andare a capo. In
     spagnolo, francese, portoghese e russo il secondo bottone usciva dallo schermo (fino a 449 px su 375): la pagina
     diventava più larga del telefono, e Chrome allargava anche il palco fisso in cima — il titolo della home tagliato a
     destra. Adesso va a capo, ma solo quando non ci sta fino al bordo dello schermo: la riga può usare i 32 px del margine,
     come fa già l'inglese (327 px in una colonna da 311), così l'inglese resta su una riga da 360 px in su. */
  body #fup-home .fh-shop-azioni{flex-wrap:wrap!important;margin-right:-32px}
  /* I due bottoni dell'ultima sezione («Your next garment…») hanno altezza 56 scritta nell'HTML e il testo già su due righe
     in inglese: in francese «Parcourir la boutique» va su tre e usciva sopra e sotto. Crescono; in inglese restano 56. */
  body #fup-home .fh-close .fh-pill{height:auto!important;min-height:56px;padding-top:3px!important;padding-bottom:3px!important;text-align:center}
  /* Pay Yearly · 2 months free | Pay Monthly: con parole più lunghe l'etichetta e il bollino si spezzavano su due righe
     dentro 38 px e uscivano dal bottone. Adesso il bollino scende sotto l'etichetta, intero, e il bottone cresce.
     ⚠️ A 360 px succede anche all'inglese, che lì era già rotto (etichetta e bollino su due righe, fuori dal bottone). */
  body #fup-home .fh-ciclo button{height:auto;min-height:38px;padding-top:4px;padding-bottom:4px;flex-wrap:wrap;justify-content:center;row-gap:2px;min-width:0;text-align:center}
  body #fup-home .fh-ciclo button em{white-space:nowrap}
  /* L'etichetta bianca sulle copertine del negozio («Procreate brushes»): alta 34 fissi, e la copertina piccola è larga metà
     schermo. «Pinceles para Procreate», «Pinceaux Procreate», «Кисти для Procreate» vanno su due righe e uscivano dalla
     pillola sopra e sotto. Cresce verso l'alto (sta ancorata al fondo). Non quella del riquadro «Studio plan», che è testo. */
  body #fup-home .fh-copertina:not(.fh-copertina-piano) > span{height:auto;min-height:34px;padding-top:4px;padding-bottom:4px;text-align:center}
}
/* Le sette stanze della home, sul telefono: un nome lungo («Редакционная», «Redaktionell») allargava la sua colonna e
   spingeva la freccia fuori dalla riga (60 px a 320). Adesso il nome resta nella sua colonna: una parola che non ci sta va a
   capo dentro di lei (a 375 px in russo «Редакционна/я»; i puntini non compaiono, perché il tema dà a tutto
   overflow-wrap:break-word) e la freccia resta nella riga. Il padding sopra e sotto, restituito dal margine negativo, tiene
   dentro la scatola accenti e discendenti che overflow:hidden taglierebbe: il testo inglese resta dov'era al pixel.
   ⚠️ Solo fino a 900 px (26 settembre 2026). Sul computer la riga è «56px 1fr 1.15fr 32px» e con min-width:0 la colonna del
   nome scendeva alla sua parte di fr: fra 901 e ~1030 px spezzava a metà anche l'inglese («Mocku/p», «Editoria/l»,
   «Catalo/g», «Graphi/c»), sotto i ~1000 riflusso delle descrizioni e pagina più bassa di 270-292 px. Sul computer il nome
   tiene la larghezza della sua parola più lunga, come sul negozio vivo: l'inglese è identico al vivo da 901 a 1440
   (misurato elemento per elemento). Tradotto, lì un nome lungo spinge descrizione e freccia oltre la riga, come già fa il
   negozio vivo (a 1000 px in russo «Редакционная» porta la freccia 115 px fuori): è una scelta da fare a parte. */
@media (max-width:900px){body #fup-home .fh-row .fh-name{min-width:0;overflow:hidden;text-overflow:ellipsis;padding-top:8px;padding-bottom:8px;margin-top:-8px;margin-bottom:-8px}}
/* Pagine dei generatori (sezione fup-generatore del tema): «Open the … Generator» era white-space:nowrap. In russo
   «Откройте генератор редакционных материалов» fa 413 px: la colonna del titolo si allargava con lui e tutta la testa della
   pagina Editorial usciva dallo schermo (h1 compreso). Adesso il bottone va su due righe e cresce; in inglese sta su una
   e resta alto 52. */
.fg .fg-pill{white-space:normal;height:auto;min-height:52px;padding-top:6px;padding-bottom:6px;text-align:center}
/* Pagine dei generatori, sezione «What you can do» (26 settembre 2026): le pillole «See the … Generator» sono larghe
   quanto il loro testo e alte 38 fisse (sections/fup-generatore.liquid). Tradotte («Посмотреть генератор редакционных
   материалов» è 365 px) allargavano la carta e con lei la colonna della griglia, e la pagina diventava più larga dello
   schermo: sul telefono (Mockup a 390 px, 435 in russo) e anche sul computer (Catalog a 901 px, 1168 in tedesco e 1179 in
   russo; Avatar a 1024, 1160 in tedesco). Adesso la pillola ha un tetto: oltre, va a capo e cresce.
   · Il tetto non scende mai sotto 224 px: la pillola inglese più lunga («See the Tech Pack Generator») è 215,8, quindi in
     inglese nessuna va a capo e niente si sposta, nemmeno a 300 px o fra 901 e 937 dove una carta inglese è già più larga
     della sua parte (misurato sulle otto pagine da 300 a 1440).
   · Sopra i 224 il tetto è quanto la carta ha di suo: sul telefono lo schermo meno i 16+16 della pagina e i 26+26+1+1 della
     carta (86); sul computer un terzo di (schermo − 96 dei lati − 32 dei due spazi − 16 per una barra di scorrimento
     classica) meno 54.
   · Niente percentuali: quando la griglia misura il contenuto di una carta, una percentuale in max-width non conta (vale
     «none»), ed era proprio lì che la carta si allargava. Per questo il max-width:100% del tema non bastava.
   ⚠️ Fra 901 e ~960 px, tradotta, la fila delle tre carte può ancora uscire di poco (a 901 px al massimo 13, invece di
   fino a 278): lì tre pillole da 224 non ci stanno, e scendere sotto 224 sposterebbe l'inglese. */
.fg .fg-uso span{height:auto;min-height:38px;padding-top:4px;padding-bottom:4px}
@media (max-width:900px){.fg .fg-uso span{max-width:max(224px,calc(100vw - 86px))}}
@media (min-width:901px){.fg .fg-uso span{max-width:max(224px,calc((100vw - 144px) / 3 - 54px))}}
/* I titoli dei generatori (h1 dell'hero, h2 delle sezioni, h3 delle carte): una parola tradotta più larga della colonna
   («Redaktionsgenerator», «Verarbeitungshinweise», «Eingabeaufforderung» per «prompt») allargava la colonna, perché un
   elemento di griglia o di flex non scende sotto la sua parola più lunga. Sul computer il titolo dell'Editorial e del Catalog
   in tedesco a 901 px arrivava a 566 e 616 px con la colonna di testo che finisce a 405, e la foto accanto si stringeva (a
   1280 px, Editorial in tedesco: da 591 a 392 px di larghezza); sul telefono i titoli delle sezioni portavano la pagina a
   363-373 px su 360. overflow-wrap:anywhere spezza la parola solo quando non ci sta, e la toglie dal calcolo della
   larghezza minima; min-width:0 fa lo stesso per la colonna di testo dell'hero sul computer (sul telefono quel <div> è
   display:contents, regola qui sotto, e non conta). In inglese nessun titolo va a capo in un punto diverso (misurato sulle
   otto pagine da 300 a 1440).
   ⚠️ Anche sui figli: la traduzione di Chrome avvolge il testo in <font>, e a quelli il tema dà direttamente
   overflow-wrap:break-word, che vince sull'ereditato e non toglie la parola dal calcolo. Senza «*» i titoli delle sezioni
   restavano larghi come prima. */
.fg .fg-hero .fg-in > div{min-width:0}
.fg h1,.fg h2,.fg h3,.fg h1 *,.fg h2 *,.fg h3 *{overflow-wrap:anywhere}

/* ══ LE PAGINE DEI GENERATORI, SUL TELEFONO: TITOLO SU UNA RIGA, GALLERIA DA SCORRERE, BOTTONI, TESTO (25 settembre 2026).
   Prima, la sera stessa, solo il Mockup: titolo, frase breve, immagine, i due bottoni, poi il paragrafo lungo e la riga
   dei crediti («proviamo su mockup solo e vediamo come viene»). Visto sull'iPhone: «L'ho vista, mi piace, ma se invece di
   mettere una sola immagine mettessimo una galleria, quindi che puoi scorrere con diverse immagini, e mh, mettere il
   titolo su una sola riga così non crea altezza e si riescono a vedere i due tasti e, e il testo sotto, e applicarlo già a
   tutte le stanze» (Francesco). Quindi tutti e otto i generatori, solo sul telefono; computer e tablet restano identici.
   · L'ORDINE, come la sera prima: il testo sta in un <div> accanto alla <figure>; con display:contents i suoi pezzi
     diventano righe della griglia di .fg-in e `order` li rimette in fila. Il gap di 32 px della sezione va a 0 e gli spazi
     li danno i margini: 24 sopra e sotto la galleria, 24 dai bottoni al paragrafo, 14 alla riga dei crediti come prima.
     Solo l'ordine a schermo: chi legge con lo screen reader e il tasto Tab seguono ancora il codice, testo poi immagini
     (per questo la galleria dà al Tab un link solo, e le frecce per gli altri: fup-site.js, galleriaHero).
   · IL TITOLO SU UNA RIGA: la misura è quella che fa stare il titolo più lungo, «AI Tech Pack Generator» (in Inter 800 con
     la sua spaziatura è largo 10,55 volte la misura del carattere, misurato sul negozio vivo), nella colonna (lo schermo
     meno i 16+16 px dei lati), con il 3% di margine: 0,092 della colonna, mai più dei 44 px di prima. Uguale su tutte le
     pagine e scritta qui, non calcolata dallo script: così niente salta quando la pagina si carica. Un titolo più lungo,
     un giorno, andrebbe a capo come prima: non si taglia e non esce dallo schermo. I 16 px sopra il titolo erano per
     l'etichetta tolta qui sopra: sul telefono vanno a 0.
   · LA GALLERIA: fup-site.js (galleriaHero) mette nella <figure> una fila da scorrere col dito: l'immagine dell'hero, poi
     quelle degli esempi veri della stessa pagina (#fg-esempi), con i loro link, i loro alt e la pillola col nome, come la
     fila degli esempi più giù. Tutte alte uguali, ognuna larga quanto il suo formato; la seconda si affaccia a destra,
     così si capisce che scorre. La fila va da bordo a bordo dello schermo e la prima immagine parte a 16 px, come il testo.
   · L'ALTEZZA DELLA GALLERIA (--fg-alto) è la più piccola fra due: quella che fa stare l'immagine dell'hero intera
     nell'86% della colonna (--fg-ar è il suo formato, scritto dal tema sulla figure), e lo schermo meno 490 px, fra 120 e
     300. I 490 px sono l'header (95), il titolo e la frase breve coi loro margini (166, o 191 con la frase su tre righe
     come su Fabric e Graphic), i due bottoni coi loro margini (162) e la prima riga del paragrafo. Misurato sulle otto pagine
     vive con lo schermo di Safari (quello del telefono meno ~170 px di barre: 375×642, 390×674, 430×762): titolo, galleria,
     tutti e due i bottoni e almeno una riga del testo, su tutte. Con 460 le pagine con la frase su tre righe perdevano
     la riga del testo. svh è lo schermo con le barre di Safari aperte, cioè il primo sguardo vero; dove non esiste, vh.
     Il minimo è 120 e non 160 per l'iPhone SE (375×667, con le barre di Safari ~375×553) e i telefoni da 320×568: con
     160 il secondo bottone usciva di 5-30 px sotto il bordo su tutte le pagine tranne CAD, e i due tasti erano proprio
     quello che Francesco voleva vedere. Cambia solo sugli schermi più bassi di 650 px: da lì in su la galleria resta
     com'era. Se sull'SE la si preferisce più grande a costo del secondo bottone, è questo numero.
   · SENZA LO SCRIPT, o prima che arrivi, la figure è già alta così e l'immagine dell'hero sta esattamente dove starà la
     prima della galleria: quando la galleria è pronta (classe fg-scorre) le prende il posto e niente si sposta (misurato
     sulle otto pagine: titolo, galleria, bottoni e testo allo stesso pixel prima e dopo). Se lo script non arriva resta
     l'immagine sola, mai un riquadro vuoto.
   ⚠️ 599 px e non i 900 della sezione (sections/fup-generatore.liquid), né 767: l'iPad mini in verticale è largo 744,
   l'iPad 768, i tablet Android da 7-8 pollici da 600 in su, e devono restare com'erano. Ogni telefono tenuto dritto sta
   fra 320 e 480, quindi c'è tutto; il telefono girato in orizzontale (640-932) tiene l'ordine di prima, come gli iPhone
   grandi già facevano con 767, e lì una foto larga quanto lo schermo sarebbe più alta dello schermo stesso.
   ⚠️ Le pagine si riconoscono da .fg .fg-hero, l'hero della sezione fup-generatore, che il tema usa solo per le pagine dei
   generatori (provato sul negozio vivo il 25 settembre 2026: nessun .fg-hero su home, About, Contact, servizi, collezioni,
   prodotti, carrello). Non più dal link del bottone come la sera prima: a chi è entrato nel negozio fup-site.js lo
   riscrive al tocco in /api/sso/shopify?…&next=… e una regola legata all'indirizzo smetteva di valere sotto il dito.
   ⚠️ --fg-galleria:1 è il segnale per fup-site.js: lo script costruisce la galleria solo dove questa regola vale, così
   la soglia e le pagine restano scritte in un posto solo (come i pannelli del menu con il loro display). ══ */
/* Fuori dal telefono la fila non si vede: esiste solo se lo script l'ha costruita su un telefono poi girato in orizzontale,
   e lì torna l'immagine sola di prima. */
.fg-foto > .fg-scorri{display:none}
@media (max-width:599px){
.fg .fg-hero > .fg-in{gap:0}
.fg .fg-hero > .fg-in > div{display:contents}
.fg .fg-hero h1{order:1;margin-top:0;font-size:min(44px,calc((100vw - 32px) * .092))}
.fg .fg-hero .fg-sotto{order:2}
.fg .fg-hero .fg-foto{order:3;--fg-galleria:1;--fg-vista:calc(100vh - 490px);--fg-alto:min(calc((100vw - 32px) * .86 / var(--fg-ar,1.5)),clamp(120px,var(--fg-vista),300px));justify-self:stretch;box-sizing:border-box;width:auto;max-width:none;height:var(--fg-alto);margin:24px -16px 0;background:transparent;border-radius:0}
.fg .fg-hero .fg-foto > a,.fg .fg-hero .fg-foto > img{display:block;box-sizing:border-box;width:calc(var(--fg-alto) * var(--fg-ar,1.5));max-width:calc(100% - 32px);height:100%;margin-left:16px;border-radius:16px;overflow:hidden;background:#FFFFFF}
.fg .fg-hero .fg-foto img{height:100%;aspect-ratio:auto}
.fg .fg-hero .fg-foto.fg-scorre > a,.fg .fg-hero .fg-foto.fg-scorre > img{display:none}
/* La fila sta sopra l'immagine sola, nello stesso riquadro della figure (che il tema fa già position:relative), invisibile
   finché non è pronta: così lo script misura quali voci si vedranno al primo sguardo (sui telefoni più bassi, o con i
   formati in verticale di Catalog e Avatar, anche la terza) e le fa arrivare tutte prima di mostrarla. Con display:none
   non si poteva misurare, e la terza compariva vuota. */
.fg .fg-hero .fg-foto > .fg-scorri{display:flex;position:absolute;inset:0}
.fg .fg-hero .fg-foto:not(.fg-scorre) > .fg-scorri{visibility:hidden;pointer-events:none}
/* Nessun touch-action: un trascinamento verticale che parte sulla galleria fa scorrere la pagina come ovunque.
   overscroll-behavior-x: arrivati in fondo alla fila, il dito non passa la spinta al browser (che la leggerebbe come «indietro»). */
.fg .fg-hero .fg-scorri{box-sizing:border-box;gap:10px;height:100%;margin:0;padding:0 0 0 16px;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fg .fg-hero .fg-scorri::-webkit-scrollbar{display:none}
/* In fondo alla fila i 16 px del bordo li fa uno spaziatore (6 px + il gap di 10), non il padding di destra: quello, in
   una fila che scorre, non tutti i browser lo tengono, e con tutti e due Chrome ne avrebbe fatti 32. */
.fg .fg-hero .fg-scorri::after{content:"";flex:0 0 6px}
.fg .fg-hero .fg-scorri > li{position:relative;container-type:inline-size;flex:0 0 auto;width:calc(var(--fg-alto) * var(--fg-r,1));max-width:calc((100vw - 32px) * .86);height:100%;margin:0;padding:0;scroll-snap-align:start;border-radius:16px;overflow:hidden;background:#FFFFFF}
.fg .fg-hero .fg-scorri > li > a,.fg .fg-hero .fg-scorri > li > div{display:block;height:100%}
.fg .fg-hero .fg-scorri img{width:100%;object-fit:contain}
/* Un'immagine che aspetta il suo turno (data-src, fup-site.js) non ha src: Chrome ci disegnerebbe l'icona dell'immagine
   rotta. Resta la carta bianca; opacity e non visibility, così lo screen reader ne legge l'alt. */
.fg .fg-hero .fg-scorri img[data-src]{opacity:0}
/* La pillola col nome sta nella galleria, e solo sulle immagini larghe almeno 220 px. Su quelle più strette (i formati
   in verticale di Catalog e Avatar, i quadrati di Fabric e Graphic con lo schermo di Safari) usciva troncata a metà
   («Lilac doubl…») e copriva il capo: meglio l'immagine pulita, i nomi restano negli esempi più giù. La pillola della
   foto sola, prima che arrivi la galleria, non si mostra: così non compare troncata per poi sparire. Anche sopra i 220
   un nome lungo può non starci (il tech pack sugli iPhone veri): lo misura fup-site.js e gli dà fg-lunga. visibility e
   non display, così resta misurabile e torna se lo schermo si allarga. */
.fg .fg-hero .fg-foto > .fg-nome{display:none}
@container (max-width:219px){.fg .fg-hero .fg-scorri .fg-nome{display:none}}
.fg .fg-hero .fg-scorri .fg-nome.fg-lunga{visibility:hidden}
/* Il fuoco della tastiera: la voce ha overflow:hidden (per gli angoli a 16) e taglierebbe il contorno di fuori, quindi
   un anello dentro, bianco e nero, che si vede su ogni immagine. La fila che si raggiunge da sola (tech pack) ha il suo. */
.fg .fg-hero .fg-scorri a:focus-visible{outline:none}
.fg .fg-hero .fg-scorri a:focus-visible::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 3px #FFFFFF,inset 0 0 0 5px #000000;pointer-events:none}
.fg .fg-hero .fg-scorri:focus-visible{outline:2px solid #FFFFFF;outline-offset:-2px}
.fg .fg-hero .fg-bottoni{order:4;margin-top:24px}
.fg .fg-hero .fg-intro{order:5;margin:24px 0 0}
.fg .fg-hero .fg-nota{order:6}
}
@supports (height:100svh){@media (max-width:599px){.fg .fg-hero .fg-foto{--fg-vista:calc(100svh - 490px)}}}