/* ============================================================================
   Hero · Guida alla scelta (Finder\HeroGuida, finder.js mountGuida)

   Portato da docs/finder/design/hero-guida/hero-guida.css:
   - SENZA il blocco :root del design (ridefiniva --fd-green-* in blu solo
     per la tavola) e senza le classi della tavola e del sito finto
     (.nw-gs*, .nw-site, .nw-top, .nw-hero*, .nw-next);
   - colori dai token del finder (--pf-*, definiti su .pf e .pf-dr in
     finder.css e agganciati alla palette del sito da ThemeColors). Tinte e
     hover derivati con color-mix, mai hex fissi;
   - niente font-family: la tipografia e' quella del tema;
   - regole dei bottoni con prefisso .nw-guida: il tema stila `button` e
     `button:hover` (0,1,1), le classi da sole perderebbero.
   La card vive dentro .pf (hero) oppure dentro il pannello .pf-dr (mobile).
   ============================================================================ */

.nw-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.pf--guida {
	width: 100%;
	max-width: 500px;
	margin-left: auto;
}

@media (max-width: 900px) {
	.pf--guida {
		max-width: none;
		margin-left: 0;
	}
}

/* ---------------- card ---------------- */
.nw-guida {
	--nw-guida-h: 520px;
	--nw-accent-dark: color-mix(in srgb, var(--pf-accent) 88%, black);
	--nw-accent-light: color-mix(in srgb, var(--pf-accent) 80%, white);
	--nw-ink-700: color-mix(in srgb, var(--pf-ink) 82%, white);
	--nw-ink-600: color-mix(in srgb, var(--pf-ink) 70%, var(--pf-ink-soft));
	position: relative;
	display: flex;
	flex-direction: column;
	height: var(--nw-guida-h);
	background: var(--pf-paper);
	border-radius: 16px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
	overflow: hidden;
	color: var(--pf-ink);
	text-align: left;
}

.nw-guida,
.nw-guida * {
	box-sizing: border-box;
}

/* Reset dei bottoni del tema (bordo, ombra, trasformazioni del testo). Gli
   stati hover/focus li definisce ogni classe, con prefisso .nw-guida. */
.nw-guida button {
	margin: 0;
	font: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.nw-guida__hd {
	flex: 0 0 auto;
	padding: 26px 28px 18px;
}

.nw-guida__k {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--pf-accent);
}

.nw-guida .nw-guida__t {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--pf-ink);
}

.nw-guida__sub {
	margin: 6px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--pf-ink-soft);
}

.nw-guida__bd {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 28px 20px;
}

.nw-guida__ft {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 14px 28px 18px;
	border-top: 1px solid var(--pf-line-soft);
}

.nw-guida__meta {
	white-space: nowrap; /* v2 */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--pf-ink-soft);
}

.nw-guida__meta svg {
	color: var(--pf-ink-muted);
}

.nw-guida .nw-guida__lnk,
.nw-guida .nw-guida__lnk:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-accent-dark);
	text-decoration: none;
}

.nw-guida .nw-guida__lnk:hover,
.nw-guida .nw-guida__lnk:focus {
	color: var(--nw-accent-light);
}

.nw-guida__lnk--end {
	margin-left: auto;
}

/* "Leggi la recensione" nella riga del voto: piu' piccolo, va a capo
   sotto stelle e punteggio se non ci sta (la riga e' flex-wrap). */
.nw-guida .nw-guida__lnk--sm {
	gap: 4px;
	font-size: 13px;
}

/* ---------------- stato A · categorie ---------------- */
.nw-guida .nw-guida__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0, 1fr): con 1fr la colonna non scende sotto la larghezza
	   minima del contenuto e a 390px la griglia usciva dalla card. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.nw-guida .nw-guida__cats > li {
	margin: 0;
	padding: 0;
}

.nw-guida .nw-guida__cat {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 52px;
	padding: 8px 10px;
	border: 1px solid var(--pf-line);
	border-radius: 10px;
	background: var(--pf-paper);
	color: var(--pf-ink);
	text-align: left;
	transition: border-color var(--pf-dur-fast), background var(--pf-dur-fast);
}

.nw-guida .nw-guida__cat:hover,
.nw-guida .nw-guida__cat:focus {
	border-color: var(--pf-accent-line);
	background: var(--pf-accent-soft);
	color: var(--pf-ink);
}

.nw-guida .nw-guida__cat:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: 2px;
}

.nw-guida__cat-ic {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 8px;
	background: var(--pf-accent-soft);
	color: var(--nw-accent-dark);
	display: grid;
	place-items: center;
}

.nw-guida .nw-guida__cat:hover .nw-guida__cat-ic,
.nw-guida .nw-guida__cat:focus .nw-guida__cat-ic {
	background: var(--pf-paper);
}

.nw-guida__cat-n {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	/* Va a capo, mai troncato: sillabazione italiana (html lang="it-IT"),
	   e spezzatura solo se una parola da sola non ci sta. */
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

.nw-guida__cat-go {
	flex: 0 0 auto;
	color: var(--pf-ink-faint);
	display: inline-flex;
}

.nw-guida .nw-guida__cat:hover .nw-guida__cat-go,
.nw-guida .nw-guida__cat:focus .nw-guida__cat-go {
	color: var(--pf-accent);
}

/* v2 · la griglia riempie il corpo: --rows (dal server) = righe reali, ogni
   riga cresce fino a --max (6 categorie ≈ 88px, 8 ≈ 70, 9 ≈ 56). */
.nw-guida__bd--cats {
	display: flex;
	flex-direction: column;
}

.nw-guida .nw-guida__bd--cats .nw-guida__cats {
	--gap: 10px;
	--max: 88px;
	flex: 0 0 auto;
	grid-template-rows: repeat(var(--rows), minmax(52px, 1fr));
	gap: var(--gap);
	height: min(100%, calc(var(--rows) * var(--max) + (var(--rows) - 1) * var(--gap)));
}

.nw-guida .nw-guida__bd--cats .nw-guida__cat {
	height: 100%;
}

/* Tessere (fino a 6): tetto piu' alto degli 88px del design. Con 3 righe e
   le metriche dei font del sito, a 88px restavano ~40px vuoti sotto la
   griglia; 104px la fanno arrivare al footer. */
.nw-guida .nw-guida__bd--cats .nw-guida__cats--tiles {
	--max: 104px;
}

/* v3 · fino a 6 categorie le righe sono alte: tessere con icona sopra e nome
   sotto, centrati, senza freccia. Da 7 a 9 righe orizzontali compatte. */
.nw-guida .nw-guida__cats--tiles .nw-guida__cat {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	text-align: center;
}

.nw-guida .nw-guida__cats--tiles .nw-guida__cat-n {
	flex: 0 0 auto;
	text-wrap: balance;
}

.nw-guida .nw-guida__cats--tiles .nw-guida__cat-go {
	display: none;
}

.nw-guida .nw-guida__cats--tiles .nw-guida__cat-ic {
	width: 36px;
	height: 36px;
	border-radius: 9px;
}

.nw-guida .nw-guida__cats:not(.nw-guida__cats--tiles) .nw-guida__cat {
	padding-top: 6px;
	padding-bottom: 6px;
}

/* ---------------- stati B/C/D · header compatto ---------------- */
.nw-guida__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 60px;
	padding: 0 12px 0 28px;
	border-bottom: 1px solid var(--pf-line-soft);
}

.nw-guida__ctx {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-ink-700);
}

.nw-guida__ctx-ic {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 7px;
	background: var(--pf-accent-soft);
	color: var(--nw-accent-dark);
	display: grid;
	place-items: center;
}

.nw-guida__step {
	margin-left: auto;
	font-size: 13px;
	font-weight: 500;
	color: var(--pf-ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nw-guida .nw-guida__x {
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--pf-ink-soft);
	display: grid;
	place-items: center;
}

.nw-guida .nw-guida__x:hover,
.nw-guida .nw-guida__x:focus {
	background: var(--pf-canvas);
	color: var(--pf-ink);
}

.nw-guida__prog {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--n), 1fr);
	gap: 4px;
	padding: 16px 28px 0;
}

.nw-guida__prog i {
	height: 4px;
	border-radius: 2px;
	background: var(--pf-line-soft);
}

.nw-guida__prog i.is-done {
	background: var(--pf-accent);
}

/* Domanda: semibold 19px, un gradino sotto il titolo dello stato A. */
.nw-guida .nw-guida__q {
	margin: 24px 0 8px; /* v2: piu' respiro */
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--pf-ink);
}

.nw-guida__help {
	margin: 0 0 22px; /* v2 */
	font-size: 14px;
	line-height: 1.5;
	color: var(--pf-ink-soft);
}

.nw-guida__intro {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pf-ink-soft);
}

.nw-guida__opts {
	display: flex;
	flex-direction: column;
	gap: 10px; /* v2 */
}

/* v2: senza testo di aiuto, stacco fra domanda e opzioni. */
.nw-guida .nw-guida__q + .nw-guida__opts,
.nw-guida .nw-guida__q + .nw-guida__num {
	margin-top: 20px;
}

.nw-guida .nw-guida__opt {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 50px;
	padding: 10px 14px;
	border: 1px solid var(--pf-line);
	border-radius: 10px;
	background: var(--pf-paper);
	color: var(--pf-ink);
	text-align: left;
	transition: border-color var(--pf-dur-fast), background var(--pf-dur-fast);
}

.nw-guida .nw-guida__opt:hover,
.nw-guida .nw-guida__opt:focus {
	border-color: var(--pf-ink-faint);
	background: var(--pf-paper);
	color: var(--pf-ink);
}

.nw-guida .nw-guida__opt:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: 2px;
}

.nw-guida__radio {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1.5px solid var(--pf-ink-faint);
	display: grid;
	place-items: center;
}

.nw-guida__opt-t {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--pf-ink);
	line-height: 1.3;
}

.nw-guida__opt-s {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--pf-ink-soft);
	line-height: 1.4;
}

.nw-guida .nw-guida__opt.is-on,
.nw-guida .nw-guida__opt.is-on:hover,
.nw-guida .nw-guida__opt.is-on:focus {
	border-color: var(--pf-accent);
	background: var(--pf-accent-soft);
}

.nw-guida__opt.is-on .nw-guida__radio {
	border-color: var(--pf-accent);
}

.nw-guida__opt.is-on .nw-guida__radio::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pf-accent);
}

/* Domanda numerica (POS, conti business): non e' nei frame del design,
   costruita con gli stessi elementi (bordo, raggio, tinta del selezionato). */
.nw-guida__num {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 14px;
	border: 1px solid var(--pf-line);
	border-radius: 10px;
	background: var(--pf-paper);
}

.nw-guida__num:focus-within {
	border-color: var(--pf-accent);
	box-shadow: var(--pf-ring);
}

.nw-guida .nw-guida__num input {
	flex: 1;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 17px;
	font-weight: 600;
	color: var(--pf-ink);
	outline: none;
}

.nw-guida__num-u {
	font-size: 15px;
	font-weight: 600;
	color: var(--pf-ink-soft);
}

.nw-guida__err {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--ft-danger, #b42318);
}

.nw-guida__err[hidden] {
	display: none;
}

.nw-guida__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.nw-guida .nw-guida__chip {
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--pf-line);
	border-radius: 9999px;
	background: var(--pf-paper);
	color: var(--nw-ink-700);
	font-size: 13.5px;
	font-weight: 600;
}

.nw-guida .nw-guida__chip:hover,
.nw-guida .nw-guida__chip:focus {
	border-color: var(--pf-ink-faint);
	background: var(--pf-paper);
	color: var(--pf-ink);
}

.nw-guida .nw-guida__chip.is-on {
	border-color: var(--pf-accent);
	background: var(--pf-accent-soft);
	color: var(--nw-accent-dark);
}

.nw-guida .nw-guida__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 6px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-ink-600);
}

.nw-guida .nw-guida__back:hover,
.nw-guida .nw-guida__back:focus {
	background: none;
	color: var(--pf-ink);
}

.nw-guida .nw-guida__btn,
.nw-guida .nw-guida__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--pf-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.nw-guida .nw-guida__btn:hover,
.nw-guida .nw-guida__btn:focus {
	background: var(--nw-accent-dark);
	color: #fff;
}

.nw-guida .nw-guida__btn[disabled],
.nw-guida .nw-guida__btn[disabled]:hover {
	background: var(--pf-accent-line);
	cursor: not-allowed;
}

/* Prefisso .nw-guida: il reset `.nw-guida button { margin: 0 }` (0,1,1)
   azzererebbe il margin-left che spinge il bottone a destra. */
.nw-guida .nw-guida__btn--next {
	margin-left: auto;
	min-width: 150px;
}

.nw-guida .nw-guida__btn--block {
	width: 100%;
}

/* ---------------- stato C · risultato compatto ---------------- */
.nw-guida__lbl {
	margin: 18px 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pf-ink-soft);
}

.nw-guida__res {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nw-guida__logo {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--pf-line);
	background: var(--pf-paper);
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--nw-accent-dark);
}

/* Logo e nome linkano alla recensione: colore del testo, sottolineatura
   solo in hover. Prefisso .nw-guida: batte il reset `.pf a:hover` (0,2,1). */
.nw-guida a.nw-guida__logo,
.nw-guida a.nw-guida__logo:hover {
	text-decoration: none;
}

.nw-guida .nw-guida__name-l,
.nw-guida .nw-guida__name-l:visited {
	color: inherit;
	text-decoration: none;
}

.nw-guida .nw-guida__name-l:hover,
.nw-guida .nw-guida__name-l:focus {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nw-guida__logo img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
}

.nw-guida .nw-guida__name {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
	color: var(--pf-ink);
}

.nw-guida__rate {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: 12.5px;
	color: var(--pf-ink-soft);
	white-space: nowrap;
}

.nw-guida__score {
	font-size: 14px;
	font-weight: 700;
	color: var(--pf-ink);
	font-variant-numeric: tabular-nums;
}

.nw-guida__why-h {
	margin: 18px 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pf-ink-soft);
}

.nw-guida .nw-guida__why {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.nw-guida .nw-guida__why li {
	display: flex;
	gap: 9px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	color: var(--nw-ink-700);
}

.nw-guida__why svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--pf-accent);
}

/* Disclaimer di rischio (Compliance\Disclaimer, contesto 'card') sotto la CTA:
   a tutta larghezza della card, invece del cap a 220px del catalogo. */
.nw-guida .ft-cta-disclaimer {
	max-width: none;
	margin: 8px 0 0;
}

.nw-guida .ft-cta-disclaimer a,
.nw-guida .ft-cta-disclaimer a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nw-guida__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 14px;
}

.nw-guida__ft.nw-guida__ft--res {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 4px;
}

.nw-guida .nw-guida__restart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--nw-ink-700);
}

.nw-guida .nw-guida__restart:hover,
.nw-guida .nw-guida__restart:focus {
	background: none;
	color: var(--pf-ink);
}

.nw-guida .nw-guida__restart[disabled] {
	opacity: 0.5;
	cursor: default;
}

.nw-guida__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pf-ink-muted);
}

/* Nessun risultato / errore: stesso corpo, testo e un'azione. */
.nw-guida__state-t {
	margin: 18px 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pf-ink);
}

.nw-guida__state-p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pf-ink-soft);
}

/* ---------------- stato D · caricamento ---------------- */
.nw-guida__status {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pf-ink-soft);
}

.nw-guida__spin {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--pf-line);
	border-top-color: var(--pf-accent);
	animation: nwspin 0.8s linear infinite;
}

.nw-sk {
	display: block;
	border-radius: 6px;
	background: linear-gradient(90deg, var(--pf-canvas) 0, color-mix(in srgb, var(--pf-canvas) 50%, white) 45%, var(--pf-canvas) 90%);
	background-size: 220% 100%;
	animation: nwsk 1.3s linear infinite;
}

.nw-sk-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nw-sk-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@keyframes nwsk {
	to {
		background-position: -220% 0;
	}
}

@keyframes nwspin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nw-sk,
	.nw-guida__spin {
		animation: none;
	}
}

/* ---------------- mobile (< 768px) · stato A nella hero ---------------- */
@media (max-width: 767px) {
	.nw-guida {
		border-radius: 14px;
	}

	.nw-guida__hd {
		padding: 20px 18px 14px;
	}

	.nw-guida .nw-guida__t {
		font-size: 21px;
	}

	.nw-guida__sub {
		font-size: 14px;
	}

	.nw-guida__bd {
		padding: 2px 18px 16px;
	}

	.nw-guida__ft {
		padding: 12px 18px 14px;
	}

	/* Come il frame mobile del design (.nw-guida--m): colonna di ~155px,
	   quindi niente freccia e icona 30px, altrimenti al nome restano ~60px
	   e le parole si spezzano. Il bottone resta alto almeno 52px. */
	.nw-guida .nw-guida__cat {
		gap: 9px;
		padding: 8px;
	}

	.nw-guida__cat-ic {
		width: 30px;
		height: 30px;
	}

	.nw-guida__cat-n {
		font-size: 13.5px;
	}

	.nw-guida__cat-go {
		display: none;
	}

	.nw-guida__meta {
		display: none;
	}

	.nw-guida__lnk--end {
		margin-left: 0;
	}
}

/* v2/v3 mobile (nel design: .nw-guida--m) */
@media (max-width: 767px) {
	.nw-guida .nw-guida__bd--cats .nw-guida__cats {
		--gap: 8px;
		--max: 100px;
		grid-template-rows: repeat(var(--rows), minmax(54px, 1fr));
	}

	.nw-guida .nw-guida__bd--cats .nw-guida__cats--tiles {
		--max: 108px; /* come sopra: 100px del design lasciavano ~16px vuoti */
	}

	.nw-guida .nw-guida__cats--tiles .nw-guida__cat {
		gap: 7px;
		padding: 8px;
	}

	/* Tessere: l'icona resta quella del design (36px) anche sul mobile. */
	.nw-guida .nw-guida__cats--tiles .nw-guida__cat-ic {
		width: 36px;
		height: 36px;
	}
}

/* Telefoni stretti (360-380px): colonna di ~140px; si recupera spazio da
   padding e icona perche' i nomi restino su due righe. */
@media (max-width: 380px) {
	.nw-guida__hd,
	.nw-guida__bd,
	.nw-guida__ft {
		padding-left: 14px;
		padding-right: 14px;
	}

	.nw-guida .nw-guida__cats {
		gap: 6px;
	}

	.nw-guida .nw-guida__cat {
		gap: 7px;
		padding: 7px 6px;
	}

	.nw-guida__cat-ic {
		width: 28px;
		height: 28px;
	}

	.nw-guida__cat-n {
		font-size: 13px;
	}
}

/* ---------------- pannello dal basso (mobile, stati B/C/D) ----------------
   Il <dialog> e' il drawer del finder (.pf-dr: posizione, overlay, blocco
   scroll); dentro, al posto del suo header, la card .nw-guida--sheet. */
.pf-dr--guida .nw-guida--sheet {
	height: calc(100dvh - 40px);
	border-radius: 16px 16px 0 0;
	box-shadow: none;
}

.nw-guida__handle {
	display: block;
	width: 40px;
	height: 5px;
	flex: 0 0 auto;
	margin: 8px auto 0;
	border-radius: 3px;
	background: var(--pf-line-strong);
}

.nw-guida--sheet .nw-guida__bar {
	min-height: 56px;
	padding: 0 8px 0 20px;
}

.nw-guida--sheet .nw-guida__prog {
	padding: 14px 20px 0;
}

.nw-guida--sheet .nw-guida__bd {
	padding: 2px 20px 18px;
}

.nw-guida--sheet .nw-guida__ft {
	padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
}

.nw-guida--sheet .nw-guida__q {
	margin-top: 22px; /* v2 */
	font-size: 18px;
}

.nw-guida--sheet .nw-guida__btn--next {
	flex: 1;
	min-width: 0;
}