/* ============================================================
   addiplatform — base del sito pubblico: SOLO LA STRUTTURA
   ============================================================
   Dove sta un elemento, quanto è grande, come si dispone: vale per qualsiasi
   tema. Colori, caratteri, bordi, ombre e spaziatura del testo non stanno qui:
   stanno nel tema (assets/css/tema-bento.css), che viene caricato dopo.

   Restano qui, per scelta:
   - le variabili (`--...`): sono i valori di partenza, il tema li ridefinisce;
   - `transform`: serve anche a centrare, non solo a decorare.

   Nasce da style.css tenendo solo le regole che agganciavano davvero qualcosa
   (vedi ops/collaudo/estrai-base.mjs), poi divisa fra struttura e aspetto.
   ============================================================ */

*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }
:root { --container-max: 1480px; --container-pad: 20px; --red: #C0392B; --red-dark: #962d22; --dark: #1B1B2E; --mid: #2d2d44; --brass: #A9772F; --brass-soft: #E7CFA0; --paper-2: #F3F2EE; --petrol: #0E4B44; --line: #E3E0D8; --line-strong: #D2CCBE; --text: #1f2937; --muted: #1f2937; --border: #e5e7eb; --bg: #f8f9fa; --page-bg: #ffffff; --white: #ffffff; --radius: 12px; --shadow: 0 4px 24px rgba(0,0,0,.08); --shadow-sm: 0 2px 8px rgba(0,0,0,.1); --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --font-display: 'Saira Condensed Disp', 'Saira', sans-serif; --font-body-home: 'Plex Sans', 'Saira', sans-serif; }
.container { max-width: var(--container-max); margin: 0px auto; padding: 0 var(--container-pad); }
/* ⚠️ PULSANTI E CAMPI COL CARATTERE DEL TEMA (5/10/26). Un <button>, come un campo, non eredita il carattere della
   pagina: prende quello di serie del browser (Arial). Online su Euromarmi «Richiedi informazioni» usciva in Arial in
   catalogo e nella scheda (collaudo-pagine / il controllo online, «solo i caratteri del tema»). Solo il carattere, non
   le misure: ogni regola di un tema vince comunque. */
button, input, select, textarea { font-family: inherit; }
/* ⚠️ LA RETE SOTTO I PEZZI DEL CORE (11/10/26). Marco, con la foto della cassa di Cultura: «quando clicchi su VEDI IL
   DETTAGLIO esce questo», un riquadro grigio enorme con «Nascondi dettaglio» e una freccia larga quanto la colonna. Il
   pulsante (.recap-toggle, modules/vendita/checkout-page.js) lo vestivano Bento e Codici colore, Cultura no: restava il
   pulsante grigio del browser, e la sua icona, un <svg> senza misure, prendeva tutto il posto che trovava. Qui la
   partenza per ogni tema, a peso zero (:where), così vince qualunque regola di un tema e un pezzo dimenticato non esplode:
   - un pulsante non ricade sul grigio e sul rilievo del browser: niente fondo, niente bordo, il colore del testo intorno;
   - un'icona disegnata su un quadrato (quelle del core stanno tutte su 24×24) dentro un pulsante o un link è grande
     quanto la scritta. Quelle con le misure scritte nel disegno (width, height) restano come sono, e un logo, che non è
     quadrato, non si tocca. Provato sul laboratorio con Cultura senza il suo vestito del pulsante: con la rete la freccia
     è alta quanto la scritta, senza torna gigante. Misurati prima e dopo tutti i pulsanti e le icone di dodici pagine
     sui quattro temi: cambiano solo quelli che erano nudi (il rilievo del browser su «Contattaci» nel catalogo di Bento,
     le taglie e il meno e il più nella scheda di Euromarmi, che poi il tema veste). */
:where(button) { background-color: transparent; border: 0; color: inherit; cursor: pointer; }
:where(button, a, [role="button"]) :where(svg:is([viewBox="0 0 24 24"], [viewBox="0 0 20 20"], [viewBox="0 0 16 16"], [viewBox="0 0 32 32"]):not([width]):not([height])) { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
/* L'OCCHIO PER VEDERE LA PASSWORD (5/10/26, assets/js/occhio-password.js, caricato dal piè di pagina di ogni tema): la
   forma qui, il colore è quello del testo. Lo spazio a destra del campo è «!important» perché le regole dei temi sui
   campi sono più forti di questa, e senza la scritta finirebbe sotto l'occhio. */
.campo-password { position: relative; display: block; }
.campo-password > input { width: 100%; box-sizing: border-box; padding-right: 48px !important; }
.vedi-password { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; opacity: .7; cursor: pointer; }
.vedi-password:hover { opacity: 1; background: none; }
.vedi-password:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; opacity: 1; }
.vedi-password svg { width: 20px; height: 20px; display: block; }
/* IL RIEMPIMENTO AUTOMATICO DEL BROWSER (5/10/26). Quando Chrome scrive da sé email e password colora il campo di
   azzurro chiaro col testo nero: su un tema scuro l'occhio, che ha il colore del testo del tema, spariva (Marco, foto
   dall'accesso di Cultura). Qui il campo tiene i suoi colori per qualunque tema: il cambio di colore del browser parte
   ma dura giorni, quindi non si vede. Un tema può dire di più (Cultura lo fa, coi suoi colori). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:autofill {
  transition: background-color 600000s 0s, color 600000s 0s; }
.skip-link { position: absolute; left: -9999px; top: 0px; z-index: 9999; padding: 12px 20px; }
.header { padding: 18px 0px; position: sticky; top: 0px; z-index: 100; }
.header .container { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { order: 1; }
.header-nav { order: 2; }
.header-right { order: 3; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; cursor: pointer; text-decoration: none; }
.logo-dot { width: 38px; height: 38px; flex-shrink: 0; }
.logo-text { white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 26px; margin: 0px auto; padding: 0px; overflow-x: auto; }
.header-nav-link { position: relative; flex-shrink: 0; white-space: nowrap; padding-block: 6px; }
.header-nav-toggle { display: none; align-items: center; justify-content: center; border-image: none; cursor: pointer; padding: 9px; flex-shrink: 0; }
.header-account { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.account-register-btn { display: none; }
.account-login-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; cursor: pointer; }
.account-login-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; }
.account-menu { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0px 14px; cursor: pointer; }
.account-dot { width: 8px; height: 8px; flex-shrink: 0; }
.account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dropdown { position: absolute; top: calc(100% + 8px); right: 0px; min-width: 170px; overflow: hidden; z-index: 110; }
.account-dropdown button { display: block; width: 100%; padding: 11px 16px; border-image: none; cursor: pointer; }
.access-balloon { position: absolute; z-index: 20; pointer-events: none; display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 14px; }
.access-balloon .ab-tick { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.access-balloon--below { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.access-balloon--above { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
#searchPanelTipoBar { margin-top: 14px; }

@media (max-width: 480px) {
}
.steps-nav { padding: 14px 0px; }
.steps-nav .container { display: flex; align-items: center; gap: 0px; flex-wrap: wrap; }
.step-item { display: inline-flex; align-items: center; gap: 9px; padding-inline: 14px; }
.step-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.step-num .chk { display: none; }
.step-sep { width: 26px; height: 1.5px; flex: 0 0 auto; }
.main { padding: 40px 0px 60px; }
.step-section { display: none; }
.step-section.active { display: block; }
.step-title { margin-bottom: 6px; }
.step-sub { margin-bottom: 28px; }
#step2 .step-title { margin-top: 8px; margin-bottom: 6px; }
#step2 .step-sub { margin-bottom: 28px; max-width: 52ch; }
#step2 .step-panel { padding: 32px clamp(20px, 4vw, 40px); }

@media (max-width: 640px) {
#step2 .step-panel { padding: 22px 18px; }
}
#step2 .cfg-main > .step-panel { margin-bottom: 12px; }
#step2 .cfg-main > .step-panel:last-of-type { margin-bottom: 0px; }
#substepO > .back-btn, #substepB > .back-btn, #substepC > .back-btn, #substepD > .back-btn { display: none; }
#stepsNav { display: none; }
.featured-products { margin: 90px 0px 8px; }
.featured-arrow { width: 42px; height: 42px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.featured-arrow:disabled { cursor: not-allowed; }
.featured-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 8px; }
.featured-card { flex: 0 0 auto; width: 200px; scroll-snap-align: start; position: relative; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.featured-card-link { display: contents; }
.featured-card-title { min-height: 2.4em; margin-top: 2px; }
.featured-card-price { margin-top: auto; padding-top: 6px; font-variant-numeric: tabular-nums; }
.tipo-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; border-image: none; cursor: pointer; padding: 0px; margin-bottom: 18px; }
.back-btn svg { width: 15px; height: 15px; }
.selected-color-card { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 28px; }
.sc-badge { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sc-info { flex: 1 1 0%; min-width: 0px; }
.sc-brand { display: flex; align-items: center; gap: 6px; }
.sc-name { margin-top: 2px; }
.sc-code { margin-top: 2px; }
.sc-change { margin-left: auto; white-space: nowrap; cursor: pointer; border-image: none; flex: 0 0 auto; }
.sizes-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 24px; }

@media (max-width: 640px) {
.sizes-wrap { grid-template-columns: repeat(3, 1fr); }
}
.qty-wrap { margin-bottom: 28px; }
.qty-label { display: block; margin-bottom: 10px; }
#step2 .qty-control { display: flex; align-items: stretch; overflow: hidden; width: fit-content; gap: 0px; }
#step2 .qty-btn { width: 50px; height: 50px; border-image: none; cursor: pointer; }
#step2 .qty-input { width: 64px; height: 50px; border-image: none; }
.price-summary { padding: 18px 20px; margin-bottom: 24px; }
.price-row { display: flex; justify-content: space-between; padding: 7px 0px; }
.total-row { padding-top: 12px; }
#step2 .btn-primary { width: auto; display: inline-flex; align-items: center; gap: 0.5em; padding: 1.05em 1.9em; margin-left: auto; }
#step2 .step-actions-row { display: flex; justify-content: flex-end; margin-top: 6px; }
.btn-primary { display: block; width: 100%; padding: 16px; border-image: none; cursor: pointer; }
.btn-primary:disabled { cursor: not-allowed; }
.btn-secondary { padding: 12px 28px; cursor: pointer; }
.order-recap { padding: 16px 20px; margin-bottom: 28px; }
.cart-page-main { max-width: var(--container-max); margin: 0px auto; padding: 32px var(--container-pad) 72px; }
.cart-page-grid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }

@media (max-width: 960px) {
.cart-page-grid { grid-template-columns: 1fr; }
}
.cart-page-grid > .cart-page-content, .cart-page-grid > .cart-page-summary { min-width: 0px; }
.cart-page-panel { padding: 26px clamp(18px, 3vw, 30px); margin-bottom: 22px; }
.delivery-method-section.cart-page-panel .step-title { margin-bottom: 16px; }
.cart-page-panel .order-recap, .cart-page-summary .order-recap { border-image: none; padding: 0px; margin-bottom: 0px; }
/* Un prezzo cambiato mentre la riga era nel carrello (12/10/26, voce 265 compito 4: modules/vendita/site.js,
   riprezzaCarrello). Sta sopra le righe finché non si lascia la pagina: il bordo spesso dice «guarda», la scritta è
   quella del tema. Solo i nomi di Bento, così lo veste ogni tema. */
.bt-cassa-avviso { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--bt-accent); border-radius: var(--bt-r-sm, 8px);
  background: var(--bt-accent-wash); color: var(--bt-ink); font-size: 15px; line-height: 1.45; }
.bt-cassa-avviso p { margin: 0; text-wrap: balance; }
.bt-cassa-avviso p + p { margin-top: 4px; }
.payment-opt { display: flex; align-items: center; gap: 12px; }
.payment-opt input[type="radio"] { display: block; margin: 0px; width: 20px; height: 20px; flex: 0 0 auto; }
.payment-card { flex: 1 1 0%; padding: 17px 18px; gap: 14px; }
.cart-page-summary { position: sticky; top: 104px; padding: 24px 24px 22px; }

@media (max-width: 960px) {
.cart-page-summary { position: static; margin-top: 4px; }
}
.cart-summary-heading { margin-bottom: 4px; }
.cart-page-summary .discount-code-wrap { margin-top: 4px; }
.cart-page-summary .privacy-check { margin-top: 16px; }
.form-row { margin-bottom: 16px; }
.form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.two-col > .form-group { min-width: 0px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group input, .form-group textarea, .form-group select { padding: 11px 14px; }
.form-group textarea { resize: vertical; min-height: 64px; }
/* LA FRECCIA DELLE TENDINE (3/10/26, Marco: «la freccetta verso il basso dell'apertura tendina è
   disallineata, anche in altre parti del sito sia front che backend»). Quella del browser si mette
   quasi contro il bordo destro, dove vuole lui e diversa da browser a browser, mentre il testo sta più
   dentro. La disegniamo noi: a destra alla STESSA distanza dal bordo a cui sta il testo a sinistra
   (--tendina-dentro: il rientro del campo più i 1-2px che il carattere lascia prima della lettera —
   misurati sulle foto, non stimati), del colore del tema
   (--tendina-freccia). ⚠️ !important perché i temi vestono le tendine con `background:` in forma
   breve (anche al :focus), che cancellerebbe il disegno. La barra del testo del costruttore di pagine
   ha le sue tendine piccole: lì resta quella del browser. */
:root {
  --tendina-dentro: 17px;
  --tendina-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111827' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]):not(.pg-if-rte-toolbar select) {
  -webkit-appearance: none !important; appearance: none !important;
  background-image: var(--tendina-freccia) !important; background-repeat: no-repeat !important;
  background-position: right var(--tendina-dentro) center !important; background-size: 12px 8px !important;
  /* la freccia (12) più 8 di respiro dal testo: sul telefono una tendina stretta non deve tagliare la scritta */
  padding-right: calc(var(--tendina-dentro) + 20px) !important;
}
/* «Altro» scelto nella tendina apre il campo per scrivere (3/10/26): sotto la tendina, in colonna e largo
   come gli altri campi. Col suo display va ridetto anche [hidden], sennò resterebbe sempre aperto. */
.form-group .campo-altro { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.form-group .campo-altro[hidden] { display: none; }
.payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.payment-opt { cursor: pointer; }
.payment-opt input[type="radio"] { display: none; }
.payment-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.payment-logo { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.payment-info { display: flex; flex-direction: column; }
.payment-area { margin-bottom: 20px; }
.confirm-icon { margin-bottom: 14px; }
.confirm-title { margin-bottom: 8px; }
.confirm-sub { margin-bottom: 24px; }
/* LA PAGINA NON TROVATA del core (4/10/26, partials/non-trovata-corpo.php): la struttura; il vestito nel tema */
.non-trovata { max-width: 560px; margin: 0 auto; padding: 64px 0 88px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.non-trovata h1, .non-trovata p { margin: 0; }
.non-trovata-azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 10px; }
/* LA CONFERMA D'ORDINE (4/10/26, modules/vendita/partials/conferma-corpo.php): la struttura; il vestito nel tema */
.conf { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; align-items: start; text-align: left; }
.conf > * { min-width: 0; }
.conf-main, .conf-testa, .conf-lato, .conf-account { display: grid; align-content: start; }
.conf-main { gap: 26px; }
.conf-testa { gap: 10px; }
.conf-testa .confirm-icon, .conf-testa .confirm-title, .conf-testa .confirm-sub, .conf-numero { margin: 0; }
.conf-bonifico > p { margin: 0 0 10px; }
.conf-dato { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.conf-dato b { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; text-wrap: balance; }
.conf-copia { white-space: nowrap; }
.conf-poi ol { margin: 0; padding: 0; list-style: none; counter-reset: conf; display: grid; }
.conf-poi li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; counter-increment: conf; }
.conf-poi li::before { content: counter(conf); width: 28px; height: 28px; display: grid; place-items: center; }
.conf-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.conf-lato { gap: 16px; position: sticky; top: 104px; }
.conf-righe .cart-item-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.conf-righe .cart-item-thumb { width: 56px; height: 56px; object-fit: cover; }
.conf-account { gap: 10px; }
.conf-account[hidden] { display: none; }
/* LA RIGA IN REGALO (11/10/26, modules/vendita/site.js, rigaRegaloHtml). Marco, col cappellino preso coi CultXP finito
   nel carrello a 15 €: «deve venire identificato come PREMIO». Sotto il nome del prodotto un pacco e il nome del regalo
   («Premio CultXP»), uguale nel carrello laterale, nella pagina del carrello, nel riepilogo della cassa, nella conferma e
   in «I miei ordini». Scritta normale, si fa notare col peso e col colore dell'accento sul pacco (niente maiuscolo, niente
   pillola). Il prezzo pieno barrato sta sopra lo 0,00 €, piccolo. Colori coi nomi di Bento: ogni tema si veste da solo, e
   l'addon che regala può ridire il colore del suo (data-regalo-di). */
.cart-item-premio { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .86rem; font-weight: 700; line-height: 1.3; color: var(--bt-ink, inherit); text-transform: none; letter-spacing: normal; }
.cart-item-premio svg { width: 16px; height: 16px; flex: none; color: var(--bt-accent, currentColor); }
.cart-item-row--premio .cart-item-price-full, .conf-righe .cart-item-price-full, .acct-order-item-row--premio .cart-item-price-full { display: block; font-size: .78rem; font-weight: 400; line-height: 1.3; color: var(--bt-muted, inherit); }
/* i prezzi su una riga sola (nel riepilogo stretto «0,00 €» andava a capo prima dell'euro), e il nome del prodotto a
   righe pareggiate: «Cappellino Cultura Digitale blu / navy» lasciava «navy» da solo (il controllo: parola sola) */
.cart-item-row--premio .cart-item-price, .cart-item-row--premio .cart-item-price-full, .conf-righe .cart-item-price,
.acct-order-item-row--premio .acct-order-item-price, .acct-order-item-row--premio .cart-item-price-full { white-space: nowrap; }
.cart-item-row .cart-item-color { text-wrap: balance; }
/* Il «+» di una riga all'ultimo pezzo (12/10/26, voce 265 compito 7: modules/vendita/site.js, giacenzaRiga): spento come
   gli altri comandi spenti del sito; il perché lo dice il suo title («Ne restano 3»). */
.qty-control.mini button:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 980px) { .conf { grid-template-columns: minmax(0, 1fr); } .conf-lato { position: static; } }
@media (max-width: 600px) { .conf-dato { grid-template-columns: minmax(0, 1fr) auto; } .conf-dato span { grid-column: 1 / -1; } .conf-azioni > * { flex: 1 1 100%; } }
.discount-code-wrap { display: flex; gap: 10px; margin-bottom: 6px; }
.discount-code-wrap input { flex: 1 1 0%; padding: 11px 14px; }
.discount-msg { margin-bottom: 22px; min-height: 1.2em; }
.delivery-method-section { margin-bottom: 28px; }
.pickup-info-box { padding: 16px 20px; margin: 16px 0px; }
.footer { padding: 56px 0px 30px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px; }
.footer-brand { flex: 1 1 260px; max-width: 360px; }
.footer-col { flex: 1 1 150px; }
.footer-col h4 { margin-bottom: 14px; }
.footer-col a { display: block; padding-block: 5px; }
.footer-bottom { margin-top: 48px; padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-bottom .payment-badges { margin-bottom: 0px; }

@media (max-width: 820px) {
.footer-col { flex-basis: calc(50% - 20px); }
}

@media (max-width: 520px) {
.footer-brand, .footer-col { flex-basis: 100%; max-width: none; }
}
.payment-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.pay-badge { height: 28px; padding: 0px 10px; display: flex; align-items: center; justify-content: center; }
.pay-badge svg { display: block; }
/* Quello che prima stava scritto negli elementi (23/9/26, «voglio tutto perfetto»). */
.pay-badge.pay-badge--klarna { background: #FFB3C7; }
.pay-sovrapponi { mix-blend-mode: multiply; }
.pay-nome { font-size: 13px; }
.pay-nome--nero { font-weight: 800; color: #000; }
.pay-nome--gpay { font-weight: 600; margin-left: 3px; color: #3c4043; }
.pay-nome--apple { font-weight: 700; font-style: italic; margin-left: 3px; color: #000; }
.page-banner--scuro { background-color: #1a1a2e; }
.pagina-aggiornata { color: var(--text); font-size: .85rem; margin-bottom: 20px; }
.bt-badge[style*="--colore"] { background: var(--colore); }
.rivista-semplice { padding: 32px 0; }
.rivista-semplice img { max-width: 100%; height: auto; }
.hidden { display: none !important; }
/* ⚠️ NASCOSTO VUOL DIRE NASCOSTO (11/10/26). L'attributo hidden lo batte qualunque display di un tema: nella cassa con
   niente da pagare (un premio in regalo, un codice del 100%) checkout-page.js nasconde i metodi di pagamento con hidden,
   e «Bonifico bancario» restava lì sotto la frase «Non c'è niente da pagare», su Cultura, Bento ed Euromarmi (la lista è
   vestita a griglia o a colonna). Come nel pannello (admin/index.php) e come la classe .hidden qui sopra. Misurato su
   sei pagine per tema: era l'unico pezzo con hidden che si vedeva. */
[hidden] { display: none !important; }
/* Testo che serve a chi usa un lettore di schermo e non si vede (l'etichetta
   di un campo che ha già il suo segnaposto). Al posto dello stile scritto a
   mano nella pagina. */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html, body { overflow-x: clip; }
html { scrollbar-gutter: stable; }
button, a, .brand-card, .result-card, .product-type-card, .base-card, .speed-card, .size-opt, .format-tab { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#step2 .cfg-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
#step2 .cfg-layout > .cfg-main, #step2 .cfg-layout > .cfg-summary { min-width: 0px; }

@media (max-width: 960px) {
#step2 .cfg-layout { grid-template-columns: 1fr; }
}
.cfg-summary { position: sticky; top: 104px; padding: 24px 24px 22px; }

@media (max-width: 960px) {
.cfg-summary { position: static; margin-top: 28px; }
}
.product-type-grid, .base-grid, .speed-grid { display: grid; gap: 14px; margin-top: 4px; margin-bottom: 28px; }
.product-type-grid { grid-template-columns: repeat(3, 1fr); }
.base-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 700px) {
.product-type-grid, .base-grid, .speed-grid { grid-template-columns: 1fr; }
}
.product-type-card, .base-card, .speed-card { position: relative; padding: 20px 20px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.product-type-card .check, .base-card .check, .speed-card .check { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transform: scale(0.6); }
.product-type-card .check svg, .base-card .check svg, .speed-card .check svg { width: 12px; height: 12px; }
.pt-icon, .base-icon, .speed-icon { width: 34px; height: 34px; }
.pt-icon svg, .base-icon svg, .speed-icon svg { width: 100%; height: 100%; }
.unit-qty-info { padding: 14px 18px; margin-bottom: 20px; }
.kit-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.withdrawal-link { cursor: default; }
.privacy-check { margin: 16px 0px; padding: 14px 18px; }
.privacy-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.privacy-label input { margin-top: 3px; flex-shrink: 0; width: 20px; height: 20px; }
.checkout-auth-banner { padding: 10px 14px; margin-bottom: 16px; }
.checkout-register-toggle { margin-top: 20px; margin-bottom: 16px; padding: 14px 18px; }
.checkout-register-toggle #checkoutRegisterFields { margin-top: 14px; }
.modal-overlay { position: fixed; inset: 0px; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 200; }
.modal { padding: 30px 28px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; position: relative; }
/* LA FINESTRA PICCOLA DI UN ESITO (18/10/26, «Il tuo account è attivo»). Piccola anche al telefono, e centrata nello
   spazio libero SOPRA il banner dei cookie (z-index 250, più alto delle finestre) e le fasce in basso del tema: al
   telefono, per chi arriva dall'email con un browser nuovo, il banner copriva il pulsante. Il margine automatico la
   centra quando c'è posto e la tiene in cima quando non c'è (un telefono girato): mai tagliata in alto. */
.esito-overlay { align-items: flex-start; overflow-y: auto; padding-bottom: calc(20px + var(--addi-fondo, 0px) + var(--addi-banner-h, 0px)); }
.esito-overlay .esito-modal { margin: auto 0; max-width: 380px; max-height: none; text-align: center; display: flex; flex-direction: column; gap: 16px; }
/* una distanza sola fra i pezzi in pila (la regola delle spaziature uniformi): i margini dei pezzi condivisi a zero */
.esito-overlay .esito-modal > * { margin: 0; }
.esito-overlay .confirm-title, .esito-overlay .confirm-sub, .register-success .confirm-sub { text-wrap: balance; }
.esito-overlay .confirm-icon { font-size: 44px; line-height: 1; }
.esito-overlay .btn-primary { width: 100%; }
/* la × col dito: 40 per 40 (quella condivisa è 32) */
.esito-overlay .modal-close { width: 40px; height: 40px; top: 8px; right: 8px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-image: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal-title { margin-bottom: 20px; }
.auth-form .form-group { margin-bottom: 14px; }
.auth-err { margin-bottom: 10px; min-height: 1em; }
.auth-modal-links { margin-top: 18px; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.google-auth-section { margin-bottom: 18px; }
.google-btn-wrap { width: 100%; display: flex; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0px; }
.account-type-toggle { margin-bottom: 22px; }
.account-type-title { display: block; margin-bottom: 10px; }
.account-type-cards { display: flex; gap: 12px; }
.account-type-card { position: relative; flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; cursor: pointer; }
.account-type-card input { position: absolute; pointer-events: none; }
.edit-mode-banner { padding: 14px 16px; margin: 16px 0px; }
.account-company-fields { padding: 14px; margin-bottom: 14px; }
.account-hint { margin-top: -4px; }
.account-shipping-toggle { margin: 4px 0px 12px; }
.account-shipping-fields { padding: 12px; margin-bottom: 4px; }
.account-view { padding-top: 8px; }
.account-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0px 18px; }
.account-title-row .account-title { margin: 0px; }
.account-logout-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; cursor: pointer; padding: 8px 14px; }
.account-title { margin: 12px 0px 18px; }
.account-subtitle { margin: -12px 0px 22px; }
.account-shell { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; padding-bottom: 60px; }
.account-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; }
.account-nav-item { display: flex; align-items: center; gap: 11px; border-image: none; padding: 11px 14px; cursor: pointer; }
.account-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.account-nav-sep { height: 1px; margin: 10px 4px; }
.account-pane .form-group { margin-bottom: 14px; }
/* Nei moduli d'accesso e dell'area lo spazio fra un campo e l'etichetta sotto lo dà il margine di ogni campo (14px): la
   riga non ne aggiunge. Prima la riga sommava il suo (16px) e al telefono le due metà sommavano anche lo spazio della
   griglia: nello stesso modulo 16, 30 e 14px (visto nelle foto del 5/10/26). */
.auth-form .form-row, .account-pane .form-row { margin-bottom: 0; row-gap: 0; }
.account-pane-subtitle { margin: 0px 0px 16px; }
/* IL MENU DELL'AREA SUL TELEFONO (30/9/26). Sotto i 980px la colonna delle
   schermate diventa una barra che entra da sinistra, aperta da un pulsante che
   dice in che schermata sei (partials/area-corpo.php, areaMenu() in
   assets/js/account.js). Prima: la colonna prendeva mezzo schermo prima del
   contenuto, e sotto i 600 diventava una fila di linguette da scorrere di lato.
   Qui solo la struttura: colori, bordi e il velo li mette il tema.
   ⚠️ #viewAccount davanti: le regole dei temi sulla colonna (sticky, la fila
   di linguette di Bento sotto i 900) non devono vincere. */
.area-menu-bt, .area-menu-testa, .area-menu-velo { display: none; }
@media (max-width: 980px) {
#viewAccount .account-shell { display: block; }
#viewAccount .area-menu-bt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 16px; margin: 0 0 22px; text-align: left; cursor: pointer; font: inherit; }
#viewAccount .area-menu-bt svg { width: 20px; height: 20px; flex: none; }
#viewAccount .area-menu-bt span { flex: 1; min-width: 0; }
#viewAccount .account-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200; width: min(320px, 86vw); margin: 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-102%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s; }
#viewAccount .account-shell.aperto .account-nav { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
#viewAccount .account-nav > * { flex: 0 0 auto; }
#viewAccount .account-nav-item { white-space: normal; }
#viewAccount .account-nav-sep { display: block; }
#viewAccount .area-menu-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0 14px; margin-bottom: 8px; }
#viewAccount .area-menu-chiudi { display: grid; place-items: center; width: 40px; height: 40px; flex: none; cursor: pointer; }
#viewAccount .area-menu-chiudi svg { width: 20px; height: 20px; }
#viewAccount .area-menu-velo { display: block; position: fixed; inset: 0; z-index: 1190; opacity: 0; pointer-events: none; transition: opacity .2s; }
#viewAccount .account-shell.aperto .area-menu-velo { opacity: 1; pointer-events: auto; }
html.area-menu-aperto, html.area-menu-aperto body { overflow: hidden; }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) { #viewAccount .account-nav, #viewAccount .area-menu-velo { transition: none; } }
.save-confirm { margin-left: 12px; }
.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 30px; }
.account-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; }
.account-stat-num-sm { display: flex; align-items: center; gap: 8px; }
.account-stat-icon { display: inline-flex; flex-shrink: 0; }
.account-stat-icon svg { width: 18px; height: 18px; }
.danger-zone { padding: 20px 22px; }
.danger-zone-title { margin-bottom: 8px; }
.danger-zone-text { margin-bottom: 16px; }
.delete-reason-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
#deleteReasonOtherWrap textarea { width: 100%; padding: 10px 12px; resize: vertical; }
.account-orders-empty { padding: 20px 0px; }
.account-orders-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
#acctRecentOrder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* LE MINIATURE DI «I MIEI ORDINI» (11/10/26, modules/vendita/area-ordini.js, accountThumbHtml). La foto sta dentro uno
   <span class="acct-thumb">: un tema che dava le misure allo span (Bento: 44×44) non le vedeva applicate, perché uno span
   resta in riga, e la foto usciva grande quanto il file. Su Bento una maglietta larga mille pixel in mezzo all'ordine,
   nel giro da cliente. Qui la forma per tutti i temi: lo span è un quadretto, la foto lo riempie; il tema dice quanto
   grande e con che angoli. */
.acct-order-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-thumb { display: inline-block; flex: none; width: 44px; height: 44px; overflow: hidden; vertical-align: middle; }
.acct-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acct-thumb-more { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; }
/* «MOSTRA DETTAGLI» di un ordine: anche la regola che chiude il dettaglio e lo apre stava solo nel foglio di Codici colore.
   Sugli altri temi ogni ordine era sempre aperto (righe, strada fino a casa) e il pulsante cambiava solo la scritta. */
.acct-order-detail { display: none; }
.acct-order-detail.open { display: block; }
.acct-order-toggle svg { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.acct-order-toggle.open svg { transform: rotate(180deg); }
.global-notice { padding: 12px 20px; }
.register-success { padding: 40px 20px; }
.header-cart { position: relative; flex-shrink: 0; }
.cart-icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; cursor: pointer; }
.cart-badge { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0px 5px; display: flex; align-items: center; justify-content: center; }
.cart-sidebar-overlay { position: fixed; inset: 0px; z-index: 290; }
.cart-sidebar { position: fixed; top: 0px; right: 0px; bottom: 0px; width: 530px; max-width: 90vw; z-index: 300; display: flex; flex-direction: column; }
.cart-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; flex-shrink: 0; }
.cart-scrollzone { flex: 1 1 0%; min-height: 0px; overflow-y: auto; }
.cart-items-list:empty { display: none; }
.cart-empty { padding: 24px 18px; flex: 1 1 0%; display: flex; align-items: center; justify-content: center; }
.shipping-progress { padding: 12px 20px 20px; }
.cart-dropdown-footer { padding: 18px 22px; flex-shrink: 0; }
.cart-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cart-dropdown-footer .btn-secondary { width: 100%; margin-bottom: 10px; }
.cart-cross-sell { padding: 14px 20px 0px; }
.cart-cross-sell-title { margin-bottom: 10px; }
.cart-cross-sell-items { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 14px; }
/* IL KIT E I CORRELATI DEL CARRELLO (11/10/26, modules/vendita/site.js: «Vedi kit», la sua finestra, «Potrebbe
   interessarti anche»). La loro forma stava solo nel foglio di Codici colore, rimasta là quando l'addon è uscito dal core:
   sugli altri temi la finestra del kit si apriva SOTTO il velo del carrello laterale (200 contro 290 e 300, e la × non si
   premeva) e mostrava solo la foto, grande quanto il file; il correlato era una foto che riempiva il carrello, col nome e
   il prezzo finiti sotto (il collaudo da cliente, su Cultura e su Bento, a 1440 e a 390). Qui la forma per tutti i temi,
   con le misure di Codici colore; i colori e il disegno li dà il tema. */
#kitContentsModal { z-index: 310; }
/* due classi davanti: le finestre di un tema sono più strette («body.bt-theme .modal», 440) e la colonna del testo restava
   di 160px, col nome del kit su tre righe. Come «Richiedi informazioni» più giù. */
.modal-overlay .modal.kit-contents-modal { max-width: 620px; }
.kit-contents-modal-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.kit-contents-modal-grid.kit-contents-modal-grid--no-image { grid-template-columns: minmax(0, 1fr); }
.kit-contents-modal-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kit-contents-modal-header { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 4px; }
.kit-contents-modal-rows { display: flex; flex-direction: column; }
.kit-contents-modal-row { display: flex; align-items: center; gap: 12px; padding-block: 12px; }
.kit-contents-modal-row img, .kit-contents-modal-row-noimg { width: 44px; height: 44px; object-fit: cover; flex-shrink: 0; }
@media (max-width: 600px) {
  .kit-contents-modal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kit-contents-modal-image { max-width: 160px; }
}
.cart-item-kit-tag { display: inline-block; margin-left: 6px; vertical-align: middle; }
/* «Non c'è niente da pagare…» (checkout-page.js, cassaZeroMostra) va a capo pari, senza una parola sola in fondo */
.cassa-zero { text-wrap: balance; }
.cart-item-kit-view { display: block; margin-top: 2px; padding: 0; font: inherit; cursor: pointer; }
.cart-cross-sell-item { flex: 0 0 96px; min-width: 0; }
.cart-cross-sell-item-media, .cart-cross-sell-item-link { display: block; color: inherit; text-decoration: none; }
.cart-cross-sell-item img, .cart-cross-sell-noimg { display: block; width: 96px; height: 96px; object-fit: cover; }
.cart-cross-sell-item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 6px; line-height: 1.3; }
.cart-cross-sell-item-price { display: block; margin-top: 2px; font-weight: 700; }
.cart-cross-sell-add { display: block; width: 100%; margin-top: 6px; padding: 5px 0; text-align: center; font: inherit; cursor: pointer; }
.cart-clear-link { margin-bottom: 20px; }
.cart-added-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cart-added-actions .btn-secondary, .cart-added-actions .btn-primary { flex: 1 1 0%; min-width: 200px; }
#confirmModal { z-index: 310; }
.confirm-modal-msg { margin-bottom: 22px; }
.confirm-modal-actions { display: flex; gap: 12px; }
.confirm-modal-actions .btn-secondary, .confirm-modal-actions .btn-primary { flex: 1 1 0%; }
.cross-sell-modal { max-width: 560px; }
.cross-sell-peek-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.cross-sell-peek-hint svg { width: 14px; height: 14px; flex: 0 0 auto; }
.cross-sell-carousel-wrap { position: relative; }
.cross-sell-offers { display: flex; gap: 14px; margin: 4px 0px 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; cursor: grab; }
.cs-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cs-nav-btn.hidden { display: none; }
.cs-nav-btn svg { width: 16px; height: 16px; }
.cs-nav-prev { left: -14px; }
.cs-nav-next { right: -14px; }
.cross-sell-progress { display: flex; justify-content: center; gap: 6px; margin: 4px 0px 14px; }
.cross-sell-actions { display: flex; gap: 12px; }
.cross-sell-actions .btn-secondary, .cross-sell-actions .btn-primary { flex: 1 1 0%; min-width: 0px; }
.btn-sm { width: auto; padding: 9px 18px; align-self: flex-start; }
.product-page { padding-top: 36px; padding-bottom: 60px; }
.page-banner { width: 100%; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.page-banner-inner { max-width: 720px; }
.page-banner-title { margin-bottom: 10px; }
/* Su fondo scuro il testo è chiaro, su fondo chiaro è scuro — deciso in
   pagina.php misurando il colore, non a occhio. Due classi perché queste
   regole devono vincere su quelle del tema, che disegna la fascia col proprio
   fondo e non sa che qui è stato cambiato. */
.page-banner.page-banner--scuro .page-banner-title { color: #fff; }
.page-banner.page-banner--scuro .page-banner-subtitle { color: rgba(255,255,255,.9); }
.page-banner.page-banner--scuro .page-banner-breadcrumb,
.page-banner.page-banner--scuro .page-banner-breadcrumb a { color: rgba(255,255,255,.75); }
.page-banner.page-banner--scuro .page-banner-breadcrumb span { color: #fff; }
.page-banner-breadcrumb { margin-bottom: 14px; }
.product-gallery { position: relative; }
.product-title { margin-bottom: 10px; }
.product-short-desc { margin-bottom: 18px; }
.product-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.product-price-final { font-variant-numeric: tabular-nums; }
.product-info .product-title { margin-bottom: 6px; }
.product-buy-row .qty-control { display: flex; align-items: stretch; overflow: hidden; width: fit-content; }
.product-buy-row .qty-btn { height: 48px; width: 50px; border-image: none; cursor: pointer; }
.product-buy-row .qty-input { height: 48px; width: 64px; border-image: none; }
.product-buy-row .product-addcart-btn { height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.product-description-body h2, .product-description-body h3 { margin: 20px 0px 10px; }
.product-description-body ul, .product-description-body ol { margin: 10px 0px 10px 22px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-card { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.product-buy-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.product-buy-row .qty-control { flex-shrink: 0; }
.product-addcart-btn { width: auto; padding: 12px 28px; flex-shrink: 0; }
.product-contact-link { display: inline-block; margin-top: 16px; }
.lightbox-overlay { position: fixed; inset: 0px; z-index: 400; display: flex; align-items: center; justify-content: center; }
.lightbox-overlay.hidden { display: none; }
.lightbox-img { max-width: 90vw; max-height: 88vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 18px; right: 24px; border-image: none; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); border-image: none; width: 48px; height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.shop-filters-toggle { display: none; }
.shop-filters-overlay { display: none; }
.shop-filters { padding: 20px; }
.filter-group { margin-bottom: 0px; padding-block: 16px; }
.filter-group:first-child { padding-top: 0px; }
.filter-group-label { display: block; margin-bottom: 10px; }
.filter-group input[type="text"], .filter-group input[type="number"], .filter-select { width: 100%; padding: 0.7em 0.75em; }
.filter-apply-btn { width: 100%; margin-top: 16px; padding: 0.95em; }
/* I COLORI NEI FILTRI DEL CATALOGO (11/10/26, modules/catalogo/pages/prodotti.php, render_filter_swatch_group). La forma
   stava solo nel foglio di Codici colore, rimasta là quando l'addon è uscito dal core: nell'elenco del catalogo restava la
   casella del browser e il colore non si vedeva (su Bento tre quadratini vuoti sotto «Colore»). Qui la forma, per tutti i
   temi: il quadrato del colore, la casella vera sopra e invisibile (è un filtro del modulo), alto 40 per il dito. I colori
   coi nomi di Bento, che ogni tema traduce; Codici colore ridice i suoi. */
.filter-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-swatch { display: inline-block; position: relative; width: 40px; height: 40px; cursor: pointer; }
.filter-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter-swatch-circle { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid var(--bt-line-btn, #d5d8dd); border-radius: var(--bt-r-sm, 6px); pointer-events: none; }
.filter-swatch input:checked + .filter-swatch-circle { border: 2px solid var(--bt-ink, #111); }
.filter-swatch input:focus-visible + .filter-swatch-circle { outline: 2px solid var(--bt-ink, #111); outline-offset: 2px; }
.shop-view-toggle { display: flex; gap: 4px; flex-shrink: 0; padding: 3px; }
.view-toggle-btn[data-cols="1"] { display: none; }
.view-toggle-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-image: none; cursor: pointer; }
.whatsapp-float { position: fixed; bottom: calc(24px + var(--addi-fondo, 0px) + var(--addi-banner-h, 0px)); right: 24px; z-index: 180; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.mobile-tabbar { display: none; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 190; }
.tabbar-btn { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 11px 4px 10px; border-image: none; cursor: pointer; position: relative; }
.tabbar-icon { position: relative; display: flex; }
/* una voce che è un link (WhatsApp) alta come quelle che sono pulsanti (11/10/26): i pulsanti hanno l'interlinea
   «normal» del browser, il link prendeva quella del testo (1,6) e la barra cresceva di 3-6px, finendo sotto il banner dei
   cookie, che si posa a 64px (misurato su Bento ed Euromarmi: 62 senza WhatsApp, 65,5 e 67 con) */
.mobile-tabbar a.tabbar-btn { line-height: normal; }
/* Il contatore della barra in basso, un po' più grande (7/9/26): a 16px il
   numero era più piccolo di ogni altro segno della pagina. */
.tabbar-badge { position: absolute; top: -8px; right: -12px; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0px 5px; }
.tabbar-account-dot { position: absolute; top: -1px; right: -3px; width: 9px; height: 9px; }
/* ⚠️ I GALLEGGIANTI SI POSANO SOPRA LA FASCIA IN BASSO DEL TEMA. Un tema che
   tiene qualcosa fisso in fondo allo schermo (un lettore, una barra a schede)
   dichiara quanto è alto in --addi-fondo, sul <body>: banner cookie e pulsanti
   si alzano di tanto. Senza, qui si scriveva 0 sul computer e 64px sul
   telefono (la barra di Bento), e su Cultura Digitale il pulsante
   dell'accessibilità finiva sotto il lettore (Marco, 23/9/26).
   Il banner cookie, finché è aperto, si somma: dice la sua altezza in
   --addi-banner-h (modules/privacy/site.js). */
.tc-consent-banner { position: fixed; left: 0px; right: 0px; bottom: var(--addi-fondo, 0px); z-index: 250; padding: 18px 56px 18px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; transform: translateY(100%); }
.tc-consent-banner.open { transform: translateY(0px); }
.tc-consent-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border-image: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-consent-text { flex: 1 1 0%; min-width: 240px; }
/* i link alle policy nel testo del banner: il colore del testo, sottolineati (un blu del browser sul fondo scuro non si legge) */
.tc-consent-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tc-consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.tc-consent-btn { padding: 11px 26px; cursor: pointer; min-width: 130px; }
.tc-consent-btn-customize { min-width: 0px; padding: 11px 4px; }
/* LE LINGUETTE (26/9/26, modules/privacy/site.js): «Accessibilità» e «Privacy»
   scritte in verticale sul bordo sinistro, ognuna apre la sua finestra. Stessa
   altezza dei vecchi pulsanti: sopra la fascia fissa del tema e sopra il banner
   aperto. Colori coi nomi di Bento (--bt-*): ogni tema li traduce nei suoi. */
.tc-linguette { position: fixed; left: 0; bottom: calc(20px + var(--addi-fondo, 0px) + var(--addi-banner-h, 0px)); z-index: 180; display: flex; flex-direction: column; gap: 6px; }
.tc-linguetta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 34px; padding: 12px 0 14px; margin: 0; cursor: pointer; font: inherit; background: var(--bt-card, #fff); color: var(--bt-ink, #111); border: 1px solid var(--bt-line, #d5d8dd); border-left: 0; border-radius: 0 var(--bt-r-sm, 12px) var(--bt-r-sm, 12px) 0; box-shadow: var(--bt-shadow, 0 4px 14px rgba(0, 0, 0, .14)); }
.tc-linguetta svg { width: 18px; height: 18px; flex: none; }
/* il nome si legge dal basso verso l'alto, come sul dorso di un libro */
.tc-linguetta-scritta { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.tc-linguetta:focus-visible { outline: 2px solid var(--bt-accent, #16a34a); outline-offset: 2px; }
@media (hover: hover) { .tc-linguetta:hover { background: var(--bt-ink, #111); color: var(--bt-card, #fff); } }
/* un pallino: almeno una preferenza di accessibilità è accesa */
.tc-linguetta.active::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--bt-accent, #16a34a); }
/* L'INVITO A INSTALLARE LA WEBAPP (29/9/26, assets/js/webapp-installa.js). Il
   pulsante sta accanto alle linguette (14px dopo i loro 34), alla loro stessa
   base; senza linguette, a 16px dal bordo. Galleggia con tre moti piccoli, ognuno
   col suo tempo, che non tornano mai in fase (Marco: «più armonioso, ora lo vedo
   troppo meccanico», poi «un po' troppo lento»): su e giù, di lato, inclinato.
   Fermo col mouse sopra, coi passi aperti e con «riduci animazioni». Colori coi
   nomi di Bento (--bt-*): ogni tema li traduce nei suoi. */
.addi-installa-fl, .addi-installa-fatto { position: fixed; left: calc(34px + 14px); bottom: calc(20px + var(--addi-fondo, 0px) + var(--addi-banner-h, 0px)); z-index: 180; }
body:not(:has(.tc-linguette)) :is(.addi-installa-fl, .addi-installa-fatto) { left: 16px; }
.addi-installa-fl { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; animation: addiInstallaEntra .45s cubic-bezier(.2, .8, .2, 1) .6s both; }
@keyframes addiInstallaEntra { from { transform: translateY(16px); opacity: 0; } }
.addi-installa-bt { display: flex; border-radius: var(--bt-r-sm, 12px); overflow: hidden; box-shadow: var(--bt-shadow, 0 6px 18px rgba(0, 0, 0, .22)); transform-origin: 50% 60%;
  animation: addiInstallaSu 2.8s cubic-bezier(.37, 0, .63, 1) -1s infinite alternate, addiInstallaLato 3.6s cubic-bezier(.37, 0, .63, 1) -1.9s infinite alternate, addiInstallaPiega 4.3s cubic-bezier(.37, 0, .63, 1) -2.7s infinite alternate; }
@keyframes addiInstallaSu { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes addiInstallaLato { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes addiInstallaPiega { from { rotate: -.6deg; } to { rotate: .6deg; } }
.addi-installa-bt:hover, .addi-installa-bt:focus-within, .addi-installa-fl:has([aria-expanded="true"]) .addi-installa-bt { animation-play-state: paused; }
.addi-installa-apri { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; margin: 0; border: 0; cursor: pointer; background: var(--bt-accent, #16a34a); color: var(--bt-accent-ink, #fff); font: inherit; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.addi-installa-apri img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.addi-installa-x { display: grid; place-items: center; width: 30px; height: 36px; margin: 0; padding: 0; cursor: pointer; background: var(--bt-card, #fff); color: var(--bt-ink, #111); border: 1px solid var(--bt-line, #d5d8dd); border-left: 0; }
.addi-installa-x svg { width: 13px; height: 13px; }
.addi-installa-apri:focus-visible, .addi-installa-x:focus-visible { outline: 2px solid var(--bt-ink, #111); outline-offset: 2px; }
.addi-installa-come { width: min(320px, calc(100vw - 64px)); padding: 18px 18px 20px; background: var(--bt-card, #fff); color: var(--bt-ink, #111); border: 1px solid var(--bt-line, #d5d8dd); border-radius: var(--bt-r-sm, 12px); box-shadow: var(--bt-shadow, 0 12px 32px rgba(0, 0, 0, .18)); }
.addi-installa-come-t { margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.addi-installa-passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.addi-installa-passi li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.addi-installa-passi p { margin: 0; font-size: .9rem; line-height: 1.6; }
.addi-installa-n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 6px; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.addi-installa-i { display: inline-grid; place-items: center; width: 21px; height: 21px; margin: 0 1px; vertical-align: -5px; border: 1px solid var(--bt-line, #d5d8dd); border-radius: 5px; font-style: normal; }
.addi-installa-i svg { width: 14px; height: 14px; }
.addi-installa-fatto { display: flex; align-items: center; gap: 12px; max-width: min(340px, calc(100vw - 64px)); padding: 12px 16px 12px 12px; background: var(--bt-card, #fff); color: var(--bt-ink, #111); border: 1px solid var(--bt-line, #d5d8dd); border-radius: var(--bt-r-sm, 12px); box-shadow: var(--bt-shadow, 0 6px 20px rgba(0, 0, 0, .2)); }
.addi-installa-fatto p { margin: 0; font-size: .86rem; line-height: 1.45; }
.addi-installa-ok { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--bt-accent, #16a34a); color: var(--bt-accent-ink, #fff); }
.addi-installa-ok svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .addi-installa-fl, .addi-installa-bt { animation: none; } }
html.tc-a11y-reduce-motion :is(.addi-installa-fl, .addi-installa-bt) { animation: none; }
/* I posti del tema ([data-addi-installa]): il copione dice il tipo (prompt: il
   browser installa da sé; ios: i passi) e lo stato (invito | fatto); qui si
   mostra solo quello che vale. */
[data-addi-installa][data-tipo="ios"] [data-addi-installa-solo="prompt"],
[data-addi-installa][data-tipo="prompt"] [data-addi-installa-solo="ios"],
[data-addi-installa][data-stato="invito"] [data-addi-installa-stato="fatto"],
[data-addi-installa][data-stato="fatto"] [data-addi-installa-stato="invito"],
[data-addi-installa][data-stato="fatto"] [data-addi-installa-passi] { display: none !important; }
.back-to-top { position: fixed; bottom: calc(132px + var(--addi-fondo, 0px) + var(--addi-banner-h, 0px)); left: 24px; z-index: 180; width: 44px; height: 44px; border-image: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tc-a11y-modal { max-width: 440px; }
.tc-a11y-feature-list { display: flex; flex-direction: column; margin: 16px 0px; overflow: hidden; }
.tc-a11y-feature-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; }
.tc-a11y-feature-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.tc-a11y-feature-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; min-width: 0px; }
.tc-a11y-actions { margin-bottom: 14px; }

/* ============================================================
   GLI EFFETTI DEL PANNELLO DI ACCESSIBILITÀ (26/9/26)
   Le classi le mette site.js dell'addon Privacy su <html>. Queste regole
   stavano SOLO nel foglio di Codici colore (modules/codici-colore/pagine.css):
   quando quell'addon è uscito dal core se le è portate via, e sugli altri siti
   (Cultura) il pulsante accendeva le classi e non succedeva niente.
   Valgono per ogni tema: niente colori scritti qui, si toccano i nomi dei
   colori dei temi. Un tema scuro dichiara i suoi (Cultura: sito.html).
   ============================================================ */
/* Testo più grande: lo zoom, non la base del carattere. Misurato: Bento ed
   Euromarmi scrivono le misure in px e con «font-size:125%» su <html> non
   cambiava niente; lo zoom ingrandisce ogni tema del 20% senza sforare di lato
   (provato a 390 e 1440). */
html.tc-a11y-font-size body { zoom: 1.2; }
/* Spaziatura (WCAG 1.4.12): lettere, parole e righe più larghe nel testo che si
   legge. Non su titoli ed etichette: le scritte maiuscole hanno già una spaziatura
   larga, e la regola la restringeva («BENVENUTO SU», visto il 26/9/26). */
html.tc-a11y-spacing body :is(p, li, dd, dt, blockquote, figcaption, td, th, label) {
  letter-spacing: .12em !important; word-spacing: .16em !important;
}
html.tc-a11y-spacing body :is(p, li, dd, blockquote, figcaption, td) { line-height: 1.85 !important; }
html.tc-a11y-spacing body :is(p, li) + :is(p, li) { margin-top: .9em; }
/* Link sottolineati, anche quelli che il tema disegna senza. */
html.tc-a11y-underline-links a { text-decoration: underline !important; text-underline-offset: 2px; }
/* Riduci animazioni: le animazioni e le transizioni del CSS finiscono subito.
   Quelle fatte a tempo dal JavaScript guardano la stessa classe (Cultura:
   menoMoto() in rivista.js). */
html.tc-a11y-reduce-motion *, html.tc-a11y-reduce-motion *::before, html.tc-a11y-reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Alto contrasto: il testo secondario diventa come quello principale, le linee
   si vedono, i link si sottolineano. Sui nomi dei colori di Bento (validi per i
   temi chiari); un tema scuro li rifà per sé. Prima si metteva lo sfondo bianco
   al <body>: su un tema scuro usciva mezzo bianco e mezzo scuro. */
html.tc-a11y-contrast {
  --bt-body-ink: var(--bt-ink); --bt-muted: var(--bt-ink); --bt-line: var(--bt-ink); --bt-line-soft: var(--bt-ink);
  --muted: var(--text); --border: var(--text);
  /* l'accento di un tema chiaro (l'arancio di Bento) con la scritta bianca sta a 3,1:1:
     in alto contrasto pulsanti e pastiglie prendono il colore del testo */
  --bt-accent: var(--bt-ink); --bt-accent-2: var(--bt-ink); --bt-accent-wash: transparent;
}
html.tc-a11y-contrast a { text-decoration: underline !important; text-underline-offset: 2px; }
html.tc-a11y-contrast :focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { scroll-behavior: auto !important; }
}
.tc-consent-modal-overlay { z-index: 260; }
/* La finestra del consenso è larga come il suo contenuto, non come una
   finestra qualsiasi: tre categorie che si aprono, i servizi dentro, e tre
   pulsanti in colonna. Le distanze qui sotto salgono con lei, tutte multipli
   di 4 come il resto del foglio. */
.tc-consent-modal { max-width: 580px; }
.tc-consent-modal-desc { margin: -4px 0px 24px; }
.tc-consent-cat-list { overflow: hidden; margin-bottom: 24px; }
.tc-consent-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.tc-consent-cat-row-main { display: flex; align-items: center; gap: 8px; }
.tc-consent-cat-chevron { border-image: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 2px; flex-shrink: 0; }
.tc-consent-cat-detail { padding: 0px 20px 16px 46px; }
.tc-consent-cat-detail-empty { margin: 0px; }
.tc-consent-service-item { padding: 10px 0px; }
.tc-consent-service-name { margin-bottom: 2px; }
.tc-consent-service-purpose { margin-bottom: 4px; }
.tc-consent-service-nota { margin-bottom: 4px; font-size: .8rem; line-height: 1.5; font-weight: 700; }
.tc-consent-service-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tc-consent-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; }
.tc-consent-switch input { position: absolute; width: 100%; height: 100%; margin: 0px; cursor: pointer; }
.tc-consent-switch-slider { position: absolute; inset: 0px; }
.tc-consent-modal-actions { display: flex; flex-direction: column; gap: 12px; }
.tc-consent-modal-actions .tc-consent-btn { width: 100%; min-width: 0px; }
.tc-consent-modal-footer { margin-top: 20px; padding-top: 16px; }

@media (max-width: 768px) {
.form-row.two-col { grid-template-columns: 1fr; }
.page-banner { min-height: 170px; padding: 28px 16px; }
.header-nav-toggle { display: inline-flex; }
.header-nav { display: none; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0px; right: 0px; padding: 8px 20px 16px; margin-top: 0px; overflow-x: visible; z-index: 150; }
.header-nav.header-nav-open { display: flex; }
.header-nav-link { padding: 10px 0px; }
.header-right { display: none; }
.mobile-tabbar { display: flex; padding-bottom: env(safe-area-inset-bottom); }
/* WhatsApp sul telefono (11/10/26): qui c'era «display: none», per tutti i temi, perché la scheda sta nella barra del
   core. Ma un tema con una barra sua senza la scheda restava senza WhatsApp. Adesso il pulsante lo nasconde
   modules/plus-features/site.js solo se una scheda WhatsApp si vede davvero; altrimenti resta, sopra la fascia in basso. */
.whatsapp-float { right: 16px; bottom: calc(24px + var(--addi-fondo, calc(64px + env(safe-area-inset-bottom))) + var(--addi-banner-h, 0px)); }
.main { padding-bottom: calc(60px + 64px + env(safe-area-inset-bottom)); }
.footer { padding-bottom: calc(60px + 64px + env(safe-area-inset-bottom)); }
.tc-consent-banner { bottom: var(--addi-fondo, calc(64px + env(safe-area-inset-bottom))); }
.tc-linguette { bottom: calc(20px + var(--addi-fondo, calc(64px + env(safe-area-inset-bottom))) + var(--addi-banner-h, 0px)); }
/* sul telefono solo le due icone, senza scritta (Marco, 26/9/26): il nome resta per chi usa un lettore di schermo (aria-label) */
.tc-linguetta { padding: 11px 0; gap: 0; }
.tc-linguetta-scritta { display: none; }
.back-to-top { bottom: calc(132px + var(--addi-fondo, calc(64px + env(safe-area-inset-bottom))) + var(--addi-banner-h, 0px)); left: auto; right: 16px; }
.shop-filters-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; height: 38px; flex-shrink: 0; padding: 0px 14px 0px 12px; cursor: pointer; }
.shop-filters-overlay.hidden { display: none; }
.shop-filters-overlay { display: block; position: fixed; inset: 0px; z-index: 290; }
.shop-filters { position: fixed; top: 0px; left: 0px; bottom: 0px; width: 300px; max-width: 85vw; z-index: 300; overflow-y: auto; transform: translateX(-100%); }
.shop-filters.shop-filters-open { transform: none; }   /* 5/10/26: mancava, e al telefono il pannello dei filtri non entrava mai */
.view-toggle-btn[data-cols="1"] { display: flex; }
.view-toggle-btn { width: 40px; height: 40px; }
.view-toggle-btn svg { width: 1.3em; height: 1.3em; }
}

@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
.header-nav-toggle { display: inline-flex; }
.header-nav { display: none; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0px; right: 0px; padding: 8px 20px 16px; margin-top: 0px; overflow-x: visible; z-index: 150; }
.header-nav.header-nav-open { display: flex; }
.header-nav-link { padding: 10px 0px; }
}

@media (min-width: 769px) and (max-width: 1366px) and (pointer: coarse) {
.shop-filters-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; height: 38px; flex-shrink: 0; padding: 0px 14px 0px 12px; cursor: pointer; }
.shop-filters-overlay.hidden { display: none; }
.shop-filters-overlay { display: block; position: fixed; inset: 0px; z-index: 290; }
.shop-filters { position: fixed; top: 0px; left: 0px; bottom: 0px; width: 320px; max-width: 85vw; z-index: 300; overflow-y: auto; transform: translateX(-100%); }
.shop-filters.shop-filters-open { transform: none; }
}

@media (max-width: 900px) {
.product-grid.cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
:root { --container-pad: 14px; }
.main { padding: 20px 0 calc(40px + 64px + env(safe-area-inset-bottom)); }
.tc-consent-banner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 46px 16px 16px; }
.tc-consent-actions { width: 100%; }
.tc-consent-btn { flex: 1 1 0%; min-width: 0px; padding: 12px 10px; }
.logo-dot { width: 30px; height: 30px; }
.account-login-btn { width: 42px; height: 42px; }
.account-register-btn { padding: 9px 3px; }
.account-name { max-width: 70px; }
.header .container { gap: 8px; }
.cart-icon-btn { width: 42px; height: 42px; }
.cart-sidebar { width: 100%; max-width: 100vw; }
.cart-added-actions { flex-direction: column; }
.cart-added-actions .btn-secondary, .cart-added-actions .btn-primary { min-width: 0px; }
.cross-sell-offers { gap: 10px; }
.lightbox-nav { width: 38px; height: 38px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.product-buy-row { flex-direction: column; align-items: stretch; }
.product-addcart-btn { width: 100%; }
.view-toggle-btn[data-cols="3"] { display: none; }
.product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.product-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
.account-logout-btn { padding: 7px 12px; }
.account-orders-list, #acctRecentOrder { grid-template-columns: 1fr; }
.account-shell { display: block; padding-bottom: 40px; }
.account-stat { padding: 12px 10px; }
.modal { padding: 22px 18px; }
.cross-sell-modal { position: fixed; inset: 0px; margin: 0px; max-width: none; width: 100%; height: 100%; max-height: none; display: flex; flex-direction: column; }
.cross-sell-modal .cross-sell-offers { margin: 14px 0px; }
.cross-sell-modal .cross-sell-actions { flex-shrink: 0; }
.auth-modal { position: fixed; inset: 0px; margin: 0px; max-width: none; width: 100%; height: 100%; max-height: none; }
/* ⚠️ L'AREA RISERVATA NON È PIÙ UNA FINESTRA A TUTTO SCHERMO (5/10/26). Era il livello che la vecchia pagina unica apriva
   sopra la vetrina: da quando l'area è una pagina sua (account.php) copriva testata e menu al telefono, su ogni tema
   che non lo annullava da sé (Cultura sì, Bento no: online su prova ed Euromarmi). Tolta. */
.steps-nav { padding: 10px 0px; }
.step-label { white-space: nowrap; }
.steps-nav .container { flex-wrap: nowrap; overflow-x: auto; justify-content: safe center; gap: 6px; padding-bottom: 2px; }
.step-item { gap: 4px; flex-shrink: 0; }
.step-sep { flex-shrink: 0; }
.step-num { width: 24px; height: 24px; }
.featured-products { margin: 90px 0px 8px; }
.featured-arrow { width: 38px; height: 38px; }
.featured-card { width: 150px; padding: 10px; }
#step2 .step-sub { margin-bottom: 18px; }
#step2 .step-panel { padding: 20px 16px; }
#step2 .cfg-main > .step-panel { margin-bottom: 10px; }
.selected-color-card { padding: 14px 16px; gap: 12px; margin-bottom: 20px; }
.sc-badge { width: 44px; height: 44px; }
.product-type-grid, .base-grid, .speed-grid { grid-template-columns: 1fr; gap: 12px; }
.product-type-card, .base-card, .speed-card { padding: 18px 18px 16px; }
.sizes-wrap { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.price-summary { padding: 14px 16px; }
.btn-primary { padding: 17px 16px; }
.btn-secondary { padding: 13px 22px; }
#step2 .btn-primary { width: 100%; padding: 1em 1.4em; }
#step2 .step-actions-row { justify-content: stretch; }
.back-btn { margin-bottom: 16px; }
.form-row.two-col { grid-template-columns: 1fr; }
.order-recap { padding: 12px 16px; }
.payment-card { padding: 12px 14px; gap: 12px; }
.cart-page-main { padding: 24px 14px 48px; }
.cart-page-panel { padding: 20px 16px; margin-bottom: 16px; }
.cart-page-summary { padding: 20px 18px 18px; margin-top: 4px; }
.confirm-icon { margin-bottom: 10px; }
.privacy-label input { width: 20px; height: 20px; }
}

@media (max-width: 375px) {
:root { --container-pad: 12px; }
.container { padding-left: 12px; padding-right: 12px; }
.cart-page-main { padding-left: 12px; padding-right: 12px; }
.back-btn { padding: 9px 12px; }
}

/* ============================================================
   Builder pagine — la selezione dei blocchi nell'anteprima.
   Queste regole servono all'IFRAME dell'anteprima (pagina.php), non al sito:
   sono i bordi, le barrette e il pannello che compaiono quando lo staff
   clicca un blocco nel Builder. Stavano nel vecchio style.css, che
   l'anteprima ha smesso di caricare quando è nato questo foglio: da allora
   la selezione era senza stile. Trovato e rimesso qui il 6/9/26, spostando
   quel vecchio foglio dentro l'addon che ancora lo usa.
   ============================================================ */
/* Segnaposto colonna vuota di una custom_section (Builder pagine) — stesso
   principio "riquadro cliccabile" sopra, ma più basso (colonne strette,
   affiancate) e con icona "+" sopra il testo invece di solo testo in
   corsivo (richiesta cliente sessione 179, screenshot di un altro page
   builder di riferimento: ogni colonna appena creata è una propria
   dropzone ben delimitata). Riquadro "+" sempre in fondo alla pagina per
   creare una NUOVA sezione: .pg-if-add-section in admin/index.html. */
/* ============================================================
   BUILDER PAGINE A BLOCCHI (ROADMAP_BUILDER.md) — rendering pubblico dei
   blocchi in pagina.php (render_page_block()/render_products_block() in
   api/config.php). Markup e stile nuovi per hero/testo+immagine/galleria/
   testo/cta (nessun componente equivalente già esistente sul sito da
   clonare); il blocco Prodotti riusa invece 1:1 .product-card/.product-grid
   (griglia) e .featured-card/.featured-track/.featured-arrow (slider) già
   esistenti — solo le 4 righe di override sotto sono nuove, stesso
   principio già seguito per .product-upsell-section .product-card* (duplicare
   l'override quando il DOM è diverso, mai riusare la classe della sezione).
   ============================================================ */
/* il fondo del blocco è quello delle schede del tema (5/10/26): era --paper-2, un grigio caldo della tavolozza
   d'origine che nessun tema dichiara — collaudo-pagine.py lo trovava fuori tavolozza su ogni tema */
.pb-hero { width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 14px; padding: 56px 32px; margin: 32px 0; text-align: center; background-color: var(--bt-card); }
.pb-hero-inner { max-width: 640px; margin: 0 auto; }
.pb-hero-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; color: var(--text); margin-bottom: 12px; }
.pb-hero--photo .pb-hero-title { color: #fff; }
.pb-hero-subtitle { font-size: 1.05rem; line-height: 1.5; color: var(--muted); margin-bottom: 22px; }
.pb-hero--photo .pb-hero-subtitle { color: rgba(255,255,255,.92); }
.pb-hero-cta { display: inline-block; width: auto; padding: 13px 28px; text-decoration: none; } /* .btn-primary è width:100% di default (bottoni di form) — qui serve una pillola compatta, non una barra piena */

/* titolo opzionale di sezione (Testo+Immagine/Galleria/Prodotti/Testo libero)
   — vedi page_block_title_html() in api/config.php, tag H2 assegnato in
   automatico, qui solo le 4 dimensioni scelte in editor. */
.pb-block-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--text); margin: 0 0 16px; }
.pb-block-title--s { font-size: 1.05rem; }
.pb-block-title--m { font-size: 1.35rem; }
.pb-block-title--l { font-size: 1.75rem; }
.pb-block-title--xl { font-size: 2.2rem; }

/* Editor live Builder (Fase 1, sessione 163) — segnaposto per un campo
   vuoto, visibile SOLO nell'anteprima bozza (pagina.php?pg_preview=…,
   render_page_block($editable=true)): un blocco pubblicato reale non ha mai
   un campo vuoto renderizzato (torna '' e la sezione sparisce del tutto),
   quindi questa classe è inerte su ogni pagina pubblica normale. */
.pb-empty-placeholder { opacity: .45; font-style: italic; }

/* Segnaposto immagine (Testo+Immagine, widget immagine, galleria vuota) —
   card cliccabile invece del solo testo sbiadito sopra (richiesta esplicita
   del cliente, sessione 166: voleva un riquadro ben visibile con l'invito a
   cliccare, non testo minuscolo in corsivo). Testo scuro pieno (var(--text)),
   MAI grigio chiaro — regola sitewide del cliente, vale anche qui dentro
   l'anteprima editor. */
.pb-text-image-media.pb-empty-placeholder,
.pb-ti-col-media.pb-empty-placeholder,
.pb-widget-image.pb-empty-placeholder,
.pb-widget-video.pb-empty-placeholder,
.pb-gallery--empty .pb-empty-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 220px; background: var(--paper-2); border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong); cursor: pointer;
  opacity: 1; font-style: normal; color: var(--text); font-size: .92rem; padding: 20px;
  transition: border-color .15s, background .15s;
}
.pb-text-image-media.pb-empty-placeholder:hover,
.pb-ti-col-media.pb-empty-placeholder:hover,
.pb-widget-image.pb-empty-placeholder:hover,
.pb-widget-video.pb-empty-placeholder:hover,
.pb-gallery--empty .pb-empty-placeholder:hover {
  border-color: var(--brass); background: var(--white);
}
.pb-col-placeholder.pb-empty-placeholder:hover { border-color: var(--brass); background: var(--white); }
.pb-col-placeholder-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--line-strong); display: flex; align-items: center;
  justify-content: center; color: var(--text); flex-shrink: 0;
}
/* .pb-gallery ha display:grid ed è definita PIÙ AVANTI in questo file: a
   parità di specificità vincerebbe lei per via dell'ordine — qui serve la
   combinazione di entrambe le classi (specificità più alta, non dipende
   dall'ordine) per forzare il layout a blocco del solo stato vuoto. */
.pb-gallery.pb-gallery--empty { display: block; }
.pb-gallery--empty .pb-empty-placeholder { width: 100%; }

.pb-text-image { display: flex; gap: 32px; align-items: center; margin: 32px 0; }
.pb-text-image--right { flex-direction: row-reverse; }
.pb-text-image-media { flex: 1 1 40%; }
.pb-text-image-media img { width: 100%; border-radius: 12px; display: block; }
.pb-text-image-body { flex: 1 1 60%; line-height: 1.7; font-size: .95rem; }
.pb-text-image-body h2, .pb-text-image-body h3 { margin: 0 0 10px; }

/* Testo + Immagine a più colonne (2/3/4, "AGGIUNGI/ELIMINA colonna" nel
   builder) — usato solo quando il blocco ha più di una colonna compilata,
   sotto il pair singolo resta il layout classico .pb-text-image sopra. */
.pb-text-image-cols { display: grid; gap: 32px; margin: 32px 0; }
.pb-text-image-cols--2 { grid-template-columns: repeat(2, 1fr); }
.pb-text-image-cols--3 { grid-template-columns: repeat(3, 1fr); }
.pb-text-image-cols--4 { grid-template-columns: repeat(4, 1fr); }
.pb-ti-col-media img { width: 100%; border-radius: 12px; display: block; margin-bottom: 16px; }
.pb-ti-col-body { line-height: 1.7; font-size: .95rem; }
.pb-ti-col-body h2, .pb-ti-col-body h3 { margin: 0 0 10px; }

.pb-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 32px 0; }
.pb-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

/* Sezione personalizzata (7° tipo di blocco, ROADMAP_BUILDER_WIDGETS.md) —
   griglia a 12 colonne standard, --col-span impostato inline per riga (stesso
   principio già in uso per page_block_width_decl()). Sotto i 900px ogni
   colonna torna a piena larghezza, impilata nell'ordine di inserimento (vedi
   style-mobile.css) — nessuna configurazione per-widget per breakpoint in v1
   (decisione presa: restare semplici). */
.pb-custom-section { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin: 32px 0; }
.pb-col { grid-column: span var(--col-span); min-width: 0; }

/* Widget atomici dentro una colonna — margine verticale tra widget
   consecutivi nella stessa colonna, nessun margine sull'ultimo per non
   sommarsi al gap della griglia sopra. */
.pb-col > * { margin-bottom: 20px; }
.pb-col > *:last-child { margin-bottom: 0; }
.pb-widget-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--text); }
.pb-widget-title--s { font-size: 1.05rem; }
.pb-widget-title--m { font-size: 1.35rem; }
.pb-widget-title--l { font-size: 1.75rem; }
.pb-widget-title--xl { font-size: 2.2rem; }
.pb-widget-text { line-height: 1.7; font-size: .95rem; }
.pb-widget-text ul, .pb-widget-text ol { margin: 10px 0 10px 22px; }
/* Paragrafi e link nei testi del Builder (26/9/26, pagina Contatti di Euromarmi):
   il reset globale *{margin:0} attaccava i paragrafi uno all'altro («Scafati (SA)»
   e subito «Telefono»), e i link restavano col blu del browser. Il link prende il
   colore del testo, sottolineato: così sta bene con qualunque tema. */
.pb-widget-text p + p, .pb-text-block p + p, .pb-text-image-body p + p, .pb-ti-col-body p + p { margin-top: .9em; }
.pb-widget-text a, .pb-text-block a, .pb-text-image-body a, .pb-ti-col-body a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pb-widget-image img { width: 100%; border-radius: 12px; display: block; }
/* aspect-ratio:16/9 evita CLS mentre l'iframe YouTube/Vimeo carica (decisione
   presa col cliente: solo embed, niente upload — vedi
   custom_section_video_embed_url() in api/config.php). */
.pb-widget-video { position: relative; aspect-ratio: 16 / 9; }
.pb-widget-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
/* IL RIQUADRO DEI CONTENUTI DI ALTRI SITI FERMI FINO AL CONSENSO (20/10/26, il Privacy compito 2; addi_riquadro_consenso() in
   api/core.php). Copre il posto del video: da dove arriva, la categoria che serve, «Accetta e guarda» e il link al video sul
   sito suo. Chi ha già il consenso non lo vede (html.addi-ok-…, scritta in testa prima che la pagina si disegni). Fondo scuro
   e testo bianco su qualunque tema: sta sopra la copertina del video, o al suo posto. Un tema lo riveste col suo foglio. */
.addi-esterno { position: relative; }
.addi-fermo { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 18px 20px; margin: 0; text-align: center; color: #fff; background: rgba(10, 12, 24, .82); border-radius: inherit; overflow: auto; }
.addi-ok-marketing [data-addi-fermo="marketing"], .addi-ok-analytics [data-addi-fermo="analytics"] { display: none !important; }
.addi-fermo p { margin: 0; }
.addi-fermo-tx { max-width: 34em; font-size: .92rem; line-height: 1.45; color: #fff; text-wrap: balance; }
.addi-fermo-az { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.addi-fermo-bt { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #fff; color: #10121c; font: inherit;
  font-size: .92rem; font-weight: 700; cursor: pointer; }
.addi-fermo-bt:hover { background: #e9ebf3; }
.addi-fermo-bt:focus-visible, .addi-fermo-fuori:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.addi-fermo-fuori { color: #fff; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.addi-fermo-fuori:hover { color: #fff; text-decoration-thickness: 2px; }
@media (max-width: 520px) { .addi-fermo { gap: 9px; padding: 12px 14px; } .addi-fermo-tx { font-size: .84rem; } .addi-fermo-bt { min-height: 40px; padding: 0 16px; font-size: .86rem; } }
.pb-widget-button--center { text-align: center; }
.pb-widget-button--right { text-align: right; }
.pb-widget-button-link { display: inline-block; width: auto; padding: 13px 28px; text-decoration: none; }
.pb-widget-divider { border: none; border-top: 1px solid var(--line); }
/* Builder — zona di click invisibile più ampia per il Divisore, SOLO in
   modalità editing (bug reale: la riga da 1px, incassata tra 20px di
   margine non cliccabile sopra e sotto — .pb-col > * { margin-bottom:20px }
.pb-widget-icon svg { width: 1em; height: 1em; display: block; }
.pb-widget-icon--s { font-size: 1.2rem; }
.pb-widget-icon--m { font-size: 2rem; }
.pb-widget-icon--l { font-size: 2.8rem; }
.pb-widget-icon--xl { font-size: 3.6rem; }

.pb-text-block { line-height: 1.7; font-size: .95rem; margin: 32px 0; }
.pb-text-block h2, .pb-text-block h3 { margin: 20px 0 10px; }
/* bug reale segnalato dal cliente (screenshot, pagina "Chi siamo"): il reset
   globale *{margin:0;padding:0} (riga 5) azzera anche il padding-left di
   default di ul/ol, quindi con list-style-position:outside il pallino/numero
   finiva fuori dal blocco, a filo del bordo della pagina invece che allineato
   al testo — stesso fix già in uso per .product-description-body. */
.pb-text-image-body ul, .pb-text-image-body ol,
.pb-text-block ul, .pb-text-block ol,
.pb-ti-col-body ul, .pb-ti-col-body ol { margin: 10px 0 10px 22px; }

/* come .pb-hero (5/10/26): il fondo delle schede del tema, non il grigio caldo d'origine (online su Euromarmi) */
.pb-cta { text-align: center; background: var(--bt-card); border-radius: 14px; padding: 44px 24px; margin: 32px 0; }
.pb-cta-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; margin-bottom: 18px; }
.pb-cta-btn { display: inline-block; width: auto; padding: 13px 28px; text-decoration: none; }

.pb-products { margin: 32px 0; }
/* .featured-products porta di suo "margin:90px 0 8px" (style.css:973): serve
   solo in home per scostarsi da un elemento posizionato sopra di lei — qui
   nel builder va sovrascritto con lo spacing normale dei blocchi (2 classi,
   vince sulla regola desktop E su quella mobile in style-mobile.css senza
   bisogno di ripeterla a un breakpoint specifico). */
.pb-products.featured-products { margin: 32px 0; }
/* Il blocco non ha un titolo (a differenza di "Prodotti in evidenza" in
   home): senza titolo .featured-products-head { justify-content:space-between }
   allineerebbe le frecce a sinistra invece che a destra come ci si aspetta
   da un controllo prev/next. */
.pb-products .featured-products-head { justify-content: flex-end; }
/* con titolo opzionale (sessione 159) il titolo torna a fare da "ancora" a
   sinistra come in home, le frecce restano a destra. */
.pb-products--titled .featured-products-head { justify-content: space-between; }
.pb-products--titled .featured-products-head .pb-block-title { margin: 0; }

.pb-col-placeholder.pb-empty-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; background: var(--paper-2); border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong); cursor: pointer;
  opacity: 1; font-style: normal; color: var(--text); font-size: .85rem; padding: 16px;
  transition: border-color .15s, background .15s;
}
/* Bottone nativo "+" fisso in fondo alla pagina, dentro l'iframe live —
   iniettato SOLO da JS admin (pgAttachIframeAddSectionTrigger(),
   admin/index.html), mai presente su una pagina pubblica reale, stesso
   principio di .pg-if-toolbar/.pb-empty-placeholder. Apre la scelta del
   numero di colonne e crea una custom_section con colonne vuote (ognuna
   diventa una .pb-col-placeholder sopra). */
.pg-if-add-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 140px; margin: 24px 0; background: var(--white); border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong); color: var(--text); font-size: .85rem;
}
.pg-if-add-section-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--white); color: var(--text); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.pg-if-add-section-btn:hover { border-color: var(--brass); color: var(--brass); }
.pg-if-add-section-btn svg { width: 18px; height: 18px; }
/* Editor live Builder — selezione NATIVA dentro il documento dell'iframe
   (sessione 172, sostituisce l'overlay calcolato dal genitore via
   getBoundingClientRect(), che durante uno scroll veloce poteva restare
   visibilmente indietro rispetto al vero paint). Classi aggiunte SOLO da JS
   admin (pgAttachIframeSelectionUI(), admin/index.html) — mai presenti su
   una pagina pubblica reale, quindi inerti al di fuori dell'editor, stesso
   principio di .pb-empty-placeholder sopra. */
/* Sessione 172b: NON più un outline sul nodo stesso — un blocco con un
   figlio scrollabile (es. .featured-track, overflow:auto, blocco Prodotti
   in modalità slider) può essere promosso dal browser a un proprio layer di
   compositing, che finisce per coprire l'outline dell'antenato anche se per
   specifica dovrebbe stare sopra (bug reale segnalato dal cliente con
   screenshot: "la selezione non fa intorno ma viene sovrapposta dalla
   card"). Un div dedicato con z-index esplicito (diverso da 'auto', quindi
   in un bucket di stacking successivo garantito dalla specifica) risolve in
   modo robusto — vince sempre, indipendentemente dai layer di compositing
   di eventuali figli scrollabili. pointer-events:none per lasciar passare i
   click al contenuto reale sotto (card prodotto, immagini, testo). */
.pg-if-block-border, .pg-if-sub-border {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
}
.pg-if-block-border { border: 2px solid var(--red); }
.pg-if-sub-border { border: 2px dashed var(--brass); }
.pg-if-toolbar, .pg-if-sub-toolbar {
  position: absolute; z-index: 41; display: flex; gap: 4px;
  background: rgba(27,27,46,.92); border-radius: 9px; padding: 4px;
}
.pg-if-toolbar { top: 8px; right: 8px; }
.pg-if-sub-toolbar { top: 4px; left: 4px; z-index: 43; }
.pg-if-toolbar button, .pg-if-sub-toolbar button {
  width: 26px; height: 26px; border: none; background: none; color: #fff;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: .85; padding: 0;
}
.pg-if-toolbar button:hover, .pg-if-sub-toolbar button:hover { background: rgba(255,255,255,.18); opacity: 1; }
.pg-if-toolbar button:disabled { opacity: .3; cursor: not-allowed; }
.pg-if-toolbar button svg, .pg-if-sub-toolbar button svg { width: 14px; height: 14px; }
/* D5 (sessione 176, riscritta nativa in sessione 177): barra di
   formattazione testo per i blocchi Testo libero/Testo+Immagine — nodo
   VERO dentro il documento dell'iframe (mai un overlay calcolato dal
   genitore, stesso motivo di .pg-if-toolbar/.pg-if-block-border sopra:
   zero lag strutturale durante uno scroll reale). Editor-only, mai
   presente su una pagina pubblica reale. */
.pg-if-rte-toolbar {
  position: absolute; z-index: 44; display: flex; align-items: center; gap: 2px;
  background: rgba(27,27,46,.94); border-radius: 9px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.pg-if-rte-toolbar button {
  width: 28px; height: 28px; border: none; background: none; color: #fff;
  border-radius: 6px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: .85; padding: 0; font-size: .85rem; font-weight: 700; flex: none;
}
.pg-if-rte-toolbar button:hover { background: rgba(255,255,255,.18); opacity: 1; }
.pg-if-rte-toolbar button.is-active { background: rgba(255,255,255,.22); opacity: 1; color: var(--brass); }
.pg-if-rte-toolbar button svg { width: 14px; height: 14px; }
.pg-if-rte-toolbar .pg-if-rte-sep { width: 1px; height: 18px; background: rgba(255,255,255,.2); margin: 0 3px; flex: none; }
.pg-if-rte-toolbar select { font-size: .7rem; border: none; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; padding: 4px 6px; cursor: pointer; flex: none; }
.pg-if-rte-toolbar select option { color: #111827; }
/* D2 (sessione 170, riscritto nativo in sessione 177 su richiesta esplicita
   del cliente, stesso motivo del bordo di selezione sessione 172: un
   overlay position:fixed calcolato dal genitore su un iframe che scorre
   non è mai davvero affidabile, e "chiudersi allo scroll" era solo il
   compromesso adottato finché non serviva di meglio). Nodo VERO dentro il
   documento dell'iframe, figlio del blocco Prodotti — resta aperto e
   scorre nativamente col contenuto. Il contenuto interno riusa
   pgRenderProductsConfig()/pgRenderManualPicker() di admin/index.html (le
   stesse funzioni del canvas classico, con ogni riferimento a funzione/
   variabile globale prefissato "parent." quando il ctx è 'iframe' — un
   handler inline onclick="..." su un nodo creato dentro contentDocument
   viene sempre valutato nello scope della finestra di QUEL documento, mai
   in quello del genitore che l'ha creato) — le classi sotto sono quindi il
   porting 1:1 di quelle admin-only (.pg-products-config/.pg-field-row/
   .odp-input/ecc., admin/index.html) necessario perché l'iframe carica
   questo foglio di stile pubblico, non quello dell'admin. Editor-only, mai
   presenti su una pagina pubblica reale. */
.pg-if-products-panel {
  position: absolute; z-index: 50; width: 340px; max-width: calc(100vw - 24px);
  max-height: min(70vh, 560px); overflow-y: auto; background: #fff; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28); border: 1px solid var(--line);
}
.pg-if-products-panel .pg-iframe-config-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600;
  font-size: .85rem; color: var(--text); position: sticky; top: 0; background: #fff;
  border-radius: 10px 10px 0 0;
}
.pg-if-products-panel .pg-iframe-config-panel-head button {
  width: 24px; height: 24px; border: none; background: none; color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; flex: none;
}
.pg-if-products-panel .pg-iframe-config-panel-head button:hover { background: #f3f4f6; }
.pg-if-products-panel .pg-iframe-config-panel-head button svg { width: 14px; height: 14px; }
.pg-if-products-panel .pg-products-config { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.pg-if-products-panel .pg-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-if-products-panel .pg-field-row .odp-input,
.pg-if-products-panel .pg-field-row .odp-sel { flex: 1; min-width: 160px; }
.pg-if-products-panel .pg-inline-label { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text); cursor: pointer; }
.pg-if-products-panel .odp-input,
.pg-if-products-panel .odp-sel {
  width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px;
  font-size: .83rem; outline: none; background: #fff; margin-top: 2px; font-family: inherit; cursor: pointer;
}
.pg-if-products-panel .odp-input:focus,
.pg-if-products-panel .odp-sel:focus { border-color: var(--red); }
.pg-if-products-panel .pg-manual-picker { position: relative; }
.pg-if-products-panel .pg-manual-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pg-if-products-panel .pg-manual-empty { font-size: .8rem; color: var(--text); margin: 4px 0 0; }
.pg-if-products-panel .product-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 10px 4px 6px; font-size: .78rem; margin: 0 6px 6px 0;
}
.pg-if-products-panel .product-chip button {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  padding: 0; margin: 0; border: none; background: none; color: #9ca3af; cursor: pointer; line-height: 0;
}
.pg-if-products-panel .product-chip button:hover { color: var(--red); }
.pg-if-products-panel .product-chip button svg { width: 11px; height: 11px; }
.pg-if-products-panel .pe-relation-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; max-height: 280px;
  overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.pg-if-products-panel .pe-relation-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.pg-if-products-panel .pe-relation-search-item:hover { background: #f9fafb; }
.pg-if-products-panel .pe-relation-search-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--paper-2); flex-shrink: 0; }
.pg-if-products-panel .pe-relation-search-empty { padding: 12px; font-size: .82rem; color: var(--text); }
/* Evidenzia la colonna sotto il cursore durante un drag reale di un widget
   dalla libreria (sessione 183) — iniettata SOLO da JS admin
   (pgHighlightColumnDropTarget(), admin/index.html), mai presente su una
   pagina pubblica reale, stesso principio di .pg-if-toolbar. Sostituisce la
   linea "tra sezioni" quando il rilascio finirà DENTRO questa colonna
   invece di creare un nuovo blocco — bug reale segnalato dal cliente. */
.pb-col.pg-if-col-drop-target { outline: 2px dashed var(--brass); outline-offset: 4px; background: rgba(0, 0, 0, .03); border-radius: var(--radius); }
/* Builder — widget Video non interattivo in modalità editing (sessione 189,
   richiesta esplicita del cliente, un unico meccanismo uguale su desktop e
   tablet): l'embed YouTube/Vimeo è un iframe di un altro dominio, un
   click/tocco al suo interno non raggiunge MAI il documento genitore (per
   il confine cross-frame), quindi non poteva mai selezionare il widget —
   "cliccarci sopra avvia il video" invece di selezionarlo per eliminarlo.
   pointer-events:none SOLO quando pgEditable=true (classe .pg-editing su
   <body>, impostata da pagina.php) fa "cadere" il click sul contenitore
   `.pb-widget-video` (che ha data-pg-widget), riusando la stessa identica
   selezione già cablata da pgWireIframeEditing() per ogni altro widget —
   nessuna logica nuova, il video si comporta come un widget qualunque
   durante l'editing. Mai sul sito pubblico reale (pgEditable è sempre
   false lì): i visitatori continuano a poter riprodurre il video. */
body.pg-editing .pb-widget-video iframe { pointer-events: none; }
/* Builder — la fascia del divisore si può riafferrare (il filo da solo
   era troppo difficile da colpire per riselezionarlo). position:absolute
   con offset negativi non tocca il layout, zero cambio visivo; mai sul sito
   pubblico reale (pgEditable è sempre false lì, body.pg-editing assente). */
body.pg-editing .pb-widget-divider { position: relative; }
body.pg-editing .pb-widget-divider::after { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* ============================================================
   Le regole che l'estrattore non poteva vedere (7/9/26)
   ============================================================
   `estrai-base.mjs` teneva una regola solo se `document.querySelector()` la
   agganciava in quel momento. Due famiglie di regole non possono MAI
   rispondere a quella domanda, e sono state buttate in silenzio:

   - gli **pseudo-elementi** (`::before`, `::after`, `::placeholder`,
     `::-webkit-scrollbar`): non sono nodi, `querySelector` non li trova;
   - i **secondi stati** (`input:checked + …`): al momento della misura
     nessuna casella era spuntata.

   Si vedeva così: l'interruttore del consenso era una pillola grigia senza
   pallino, che non cambiava quando lo si toccava. Qui torna la STRUTTURA
   (esistere, quanto è grande, dove si sposta); il colore sta nel tema.
   Il banco `collaudo-pseudo.mjs` fallisce se una di queste sparisce di nuovo.
   ============================================================ */

/* L'interruttore del consenso: il pallino esiste e si sposta. */
.tc-consent-switch-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: var(--white); border-radius: 50%; }
.tc-consent-switch input:checked + .tc-consent-switch-slider::before { transform: translateX(19px); }

/* Il «oppure» della finestra d'accesso: le due righe ai lati. */
.auth-divider::before, .auth-divider::after { content: ''; flex: 1 1 0%; height: 1px; }

/* La punta del fumetto «Accesso eseguito». */
.access-balloon--below::after, .access-balloon--above::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; }
.access-balloon--below::after { bottom: 100%; }
.access-balloon--above::after { top: 100%; }

/* Il segnale d'avviso in cima alla finestra di conferma. */
.confirm-modal::before { content: ''; display: block; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 26px 26px; }

/* Il trattino sotto la voce attiva della barra in basso del telefono. */
.tabbar-btn.is-active .tabbar-icon::after { content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 16px; height: 2.5px; border-radius: 2px; }

/* L'anello che gira sul pulsante di accessibilità quando è acceso. */

/* Le frecce su/giù dei campi numerici non si usano: il pezzo si cambia col
   selettore accanto. `scrollbar-width: none` sta nel tema e vale per Firefox;
   su WebKit serve questa, ed era sparita — la giostra dei prodotti in evidenza
   mostrava la barra di scorrimento. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.featured-track::-webkit-scrollbar { display: none; }

/* ============================================================
   La finestra con cui si chiede (Fase I, tappa 2).
   Solo struttura: colori, bordi e caratteri li mette il tema, come per tutto
   il resto di questo foglio.
   ============================================================ */
/* Lo stesso modulo, dentro una pagina invece che dentro la finestra: non è
   sospeso sopra il sito, sta nel flusso e prende la larghezza della sezione.
   Il vestito (colori, bordi, caratteri) resta quello del tema, come sopra.

   La scheda del modulo resta (sfondo, bordi e ombra li mette il tema con
   `.modal`): quello che si toglie è il vestito da FINESTRA — stare sospesa
   sopra il sito e non poter crescere in altezza. */
.pb-modulo { margin: 32px auto; }   /* lo stesso respiro degli altri blocchi */
.mod-req-in-pagina { display: block; }
.mod-req-in-pagina .modal.mod-req-scheda {
  position: static; transform: none; max-width: 640px; width: 100%; margin: 0 auto;
  max-height: none; overflow: visible; }

/* Una pagina fatta di blocchi non è un foglio di testo: ogni blocco porta il
   proprio sfondo e la propria larghezza. Qui solo la struttura (i margini ai
   lati, lo spazio in fondo); il tema decide come incorniciarla — e il tema
   Bento, che incarta le pagine di testo in una scheda bianca, le pagine a
   blocchi le lascia libere (theme.css, main.pg-blocchi). */
main.pg-blocchi { padding: 0 var(--container-pad) 60px; }

/* LA FINESTRA È PIÙ LARGA DI QUELLA DELL'ACCESSO. Il tema veste ogni
   `.modal` per il login (440px, una colonna): con due campi affiancati e
   un'azienda in tre pezzi era striminzita da desktop (Marco, 9/9/26, con lo
   screenshot). La stessa larghezza del modulo messo in pagina (640), così lo
   si vede uguale nei due posti. Tre classi nel selettore perché il tema ne
   usa due (`body.bt-theme .modal`) e qui deve vincere la struttura. */
.modal-overlay .modal.mod-req-finestra { max-width: 640px; }

/* La testa: titolo e riga sotto, staccati dal resto una volta sola. */
.mod-req-testa { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; padding-right: 44px; }
.modal .mod-req-testa .modal-title { margin: 0; }
.mod-req-descr { margin: 0; }

/* Di cosa si parla: foto e nome della voce in una pastiglia (colori dal tema). */
.mod-req-voce:not(.hidden) { display: flex; align-items: center; gap: 12px; }
.mod-req-voce { padding: 10px 12px; border-radius: 12px; margin: 0 0 18px; }
.mod-req-voce-foto { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.mod-req-voce-testo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mod-req-voce-eti { font-size: .78rem; }
.mod-req-voce-testo b { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mod-req-aiuto { font-size: .82em; }
.mod-req-attesa { margin: 0; }
.mod-req-grazie { padding: 8px 0 4px; font-weight: 600; }
.mod-req-spunta label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 400; }
.mod-req-spunta input { width: auto; flex-shrink: 0; margin-top: 2px; }

/* I CAMPI STANNO SU UNA GRIGLIA, NON IN FILA. Sei colonne: un campo dice la
   sua larghezza (33, 50, 66 o 100 per cento) e prende 2, 3, 4 o 6 colonne.
   Prima erano in fila con `flex-wrap`: ogni riga si allineava da sola, e un
   campo alto accanto a uno basso lasciava un buco storto. Su una griglia le
   righe sono righe. Sul telefono tornano tutti a tutta larghezza — non si
   compila un modulo a tre colonne su uno schermo da sei pollici, ed è il
   motivo per cui chi costruisce il modulo non deve pensarci. */
#modReqCampi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;align-items:start}
#modReqCampi > *{grid-column:1 / -1;min-width:0}
@media (min-width:560px){
  #modReqCampi > [style*="--larg:33"]{grid-column:span 2}
  #modReqCampi > [style*="--larg:50"]{grid-column:span 3}
  #modReqCampi > [style*="--larg:66"]{grid-column:span 4}
}
/* I CAMPI DI DATA E ORA SU IPHONE HANNO UNA LARGHEZZA TUTTA LORO, decisa dal
   sistema, che `width:100%` non stringe: il campo sporge a destra oltre tutti
   gli altri e il valore si vede centrato invece che a sinistra (segnalato da
   Marco col telefono, 10/9/26 — da computer il campo è largo come i vicini,
   quindi nessuna misura in WebKit lo vede). Si toglie il vestito di sistema e
   il pavimento della larghezza minima; l'icona del calendario, che su un
   computer sta in un pezzo suo, resta.
   `min-width:0` serve anche alle celle: dentro una griglia un campo non scende
   sotto la sua misura naturale finché non glielo si dice. */
.auth-form input[type="date"], .auth-form input[type="time"],
.auth-form input[type="datetime-local"], .auth-form input[type="month"],
.auth-form input[type="week"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; text-align: left;
}
/* Un campo che apre un selettore (data, ora) porta un'icona che dice cos'è e
   una freccia che dice che si sceglie — Marco, 10/9/26. I disegni li mette il
   TEMA, insieme al resto del vestito dei campi; qui sta solo quello che li fa
   funzionare: il disegnino che il computer aggiunge di suo si allarga
   invisibile su tutto il campo, così premere in qualunque punto apre il
   selettore invece di dover centrare l'icona. */
.auth-form input[type="date"], .auth-form input[type="time"], .auth-form input[type="datetime-local"] { position: relative; }
.auth-form input[type="date"]::-webkit-calendar-picker-indicator,
.auth-form input[type="time"]::-webkit-calendar-picker-indicator,
.auth-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}
/* L'icona della zona dei documenti: nessuna regola del tema la tocca. */
.mod-req-zona-icona {
  display: block; width: 26px; height: 26px; margin: 0 auto 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Dentro un campo data il valore sta in un pezzo suo, che di suo porta un
   margine e un'imbottitura: sono quelli a rendere il campo più alto dei
   vicini (57 contro 53 su WebKit) e a spingere il valore verso il centro.
   Azzerati, il campo è alto come tutti gli altri. */
.auth-form input[type="date"]::-webkit-date-and-time-value,
.auth-form input[type="time"]::-webkit-date-and-time-value,
.auth-form input[type="datetime-local"]::-webkit-date-and-time-value {
  margin: 0; padding: 0; text-align: left;
}
.auth-form input[type="date"]::-webkit-datetime-edit,
.auth-form input[type="time"]::-webkit-datetime-edit,
.auth-form input[type="datetime-local"]::-webkit-datetime-edit {
  margin: 0; padding: 0; line-height: 1.45;
  /* L'altezza NON si punta qui: un campo data vuoto si accorciava, e mettere
     il puntello su questo pezzo di sistema valeva solo dove il pezzo esiste.
     Adesso la dichiara il campo stesso (`min-height` nel tema), che vale
     ovunque. */
}
/* E i pezzetti dentro (giorno, mese, anno e le barrette): anche loro hanno
   un'imbottitura di sistema. */
.auth-form input::-webkit-datetime-edit-fields-wrapper,
.auth-form input::-webkit-datetime-edit-text,
.auth-form input::-webkit-datetime-edit-day-field,
.auth-form input::-webkit-datetime-edit-month-field,
.auth-form input::-webkit-datetime-edit-year-field,
.auth-form input::-webkit-datetime-edit-hour-field,
.auth-form input::-webkit-datetime-edit-minute-field {
  padding: 0; margin: 0;
}

.mod-req-eti{font-size:.8rem;font-weight:600}
.mod-req-sezione{margin:6px 0 0;font-size:1rem}
.mod-req-nota{font-size:.85rem}

/* le scelte a pulsanti e le caselle */
.mod-req-pulsanti{display:flex;gap:7px;flex-wrap:wrap}
.mod-req-pulsante{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:99px;padding:7px 13px;cursor:pointer;font-size:.87rem}
.mod-req-pulsante input{margin:0}
.mod-req-caselle{display:flex;flex-direction:column;gap:7px}
.mod-req-spunta-riga{display:flex;align-items:flex-start;gap:8px;cursor:pointer;font-weight:400;line-height:1.45}
.mod-req-spunta-riga input{width:auto;flex-shrink:0;margin-top:3px}
.mod-req-spunta-riga > span{flex:1;min-width:0}

/* I CAMPI FATTI DI PIÙ CASELLINE (un periodo, un indirizzo, un'azienda).
   La griglia la decide il TIPO, e cambia in base a quanto spazio ha IL CAMPO
   (non la finestra): per questo il contenitore è un «container» e la regola è
   una container query.

   Sotto i 400px si impila tutto, ogni pezzo a riga intera e tutti larghi
   uguali. Sopra, ognuno prende la sua forma. Prima era `auto-fit`, che
   decideva da solo: veniva fuori ragione sociale + partita IVA sulla prima
   riga e il codice fiscale da solo sulla seconda, **con mezzo vuoto a
   destra** — Marco, 10/9/26: «questa roba non la voglio vedere». Una riga
   che non arriva al bordo è il difetto, e con le colonne dichiarate non può
   più succedere. */
.mod-req-composto{container-type:inline-size}
.mod-req-pezzi{display:grid;grid-template-columns:1fr;gap:10px}
.mod-req-pezzo{display:flex;flex-direction:column;gap:5px;min-width:0}
@container (min-width: 400px){
  /* Ragione sociale sopra a tutta riga, P.IVA e codice fiscale sotto insieme.
     Dal… al… allo stesso modo. */
  .mod-req-pezzi--due{grid-template-columns:1fr 1fr}
  /* Via a tutta riga; sotto città, CAP e provincia — larghe come il dato che
     accolgono, non tutte uguali. */
  .mod-req-pezzi--indirizzo{grid-template-columns:2fr 1fr 1fr}
  .mod-req-pezzo.intero{grid-column:1 / -1}
}
.mod-req-pezzo > span{font-size:.78rem}

/* Sul telefono la finestra è una pagina, come Accedi e il carrello: a tutto
   schermo, senza angoli, con lo scorrimento dentro. Solo la finestra: il
   modulo messo in una pagina resta nel flusso della pagina.

   L'ALTEZZA È `svh`, NON `%` NÉ `vh`. Un overlay fissato alto il 100% segue lo
   schermo che cambia: appena la barra dell'indirizzo si nasconde la finestra
   cresce di 46px e tutto quello che c'è dentro si sposta (misurato: 844 → 890).
   `svh` è la misura più piccola, quella con tutte le barre fuori, e non cambia
   mai — la finestra sta ferma mentre il telefono si muove intorno. */
@media (max-width:640px){
  .modal-overlay#modReqOverlay:not(.mod-req-in-pagina){padding:0;height:100svh}
  .modal-overlay#modReqOverlay:not(.mod-req-in-pagina) > .modal.mod-req-finestra{
    width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;
    padding:24px 18px calc(24px + env(safe-area-inset-bottom))}
}
/* La finestra scorre SOLO in verticale, e non rimbalza: `overflow-x:hidden`
   toglie lo scorrimento di lato, `touch-action:pan-y` dice al telefono che il
   dito qui muove solo su e giù, `overscroll-behavior:none` toglie il rimbalzo
   in cima e in fondo — su un riquadro a tutto schermo il rimbalzo si legge
   come «si muove tutto». Vale anche da computer: non guasta. */
.modal-overlay .modal.mod-req-finestra{overflow-x:hidden;overflow-y:auto;touch-action:pan-y;overscroll-behavior:none}

/* i documenti */
.mod-req-zona{display:block;border:2px dashed var(--border);border-radius:10px;padding:16px;text-align:center;font-size:.85rem;cursor:pointer}
.mod-req-zona.sopra{border-style:solid}
.mod-req-limiti{display:block;font-size:.76rem;margin-top:4px}
.mod-req-caricati{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mod-req-file-riga{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:.83rem}
.mod-req-file-nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.mod-req-file-peso{font-size:.78rem;white-space:nowrap}
.mod-req-file-via{border:none;background:none;font-size:1.1rem;line-height:1;cursor:pointer;padding:0 2px}

/* Il campo trappola: non si vede e non si raggiunge col tasto di tabulazione,
   ma NON è `display:none` — un robot che salta gli elementi nascosti così non
   lo riempirebbe, ed è proprio riempiendolo che si tradisce.
   STA DENTRO IL RIQUADRO, non a -9999px: la finestra è un riquadro che scorre,
   e su Safari iPhone un pezzo posizionato fuori da un riquadro che scorre lo
   rende trascinabile anche di lato — il modulo si spostava in diagonale sotto
   il dito (video di Marco, 10/9/26). Un pixel ritagliato con clip-path non
   sporge da nessuna parte. */
.mod-req-trappola { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- i blocchi del Builder sul telefono (stavano in pagine-mobile.css dell'addon) ---- */
@media (max-width: 768px) {
  .pb-text-image         { flex-direction: column; gap: 18px; margin: 24px 0; }
  .pb-text-image--right  { flex-direction: column; }
  .pb-hero               { padding: 36px 20px; margin: 24px 0; }
  .pb-hero-title         { font-size: 1.5rem; }
  .pb-hero-subtitle      { font-size: .95rem; }
  .pb-cta                { padding: 32px 18px; margin: 24px 0; }
  .pb-cta-title           { font-size: 1.25rem; }
  .pb-gallery             { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 24px 0; }
  .pb-text-image-media.pb-empty-placeholder,
  .pb-ti-col-media.pb-empty-placeholder,
  .pb-widget-image.pb-empty-placeholder,
  .pb-gallery--empty .pb-empty-placeholder { min-height: 150px; }
  .pb-text-block          { margin: 24px 0; }
  /* Titolo opzionale di sezione + colonne (sessione 159) — colonne sempre
     impilate su tablet/mobile, mai fianco a fianco stretto (stesso principio
     di .pb-text-image sopra). */
  .pb-block-title         { margin-bottom: 12px; }
  .pb-block-title--l, .pb-block-title--xl { font-size: 1.5rem; }
  .pb-text-image-cols     { grid-template-columns: 1fr; gap: 22px; margin: 24px 0; }
}
@media (max-width: 900px) {
  .pb-custom-section { grid-template-columns: 1fr; gap: 20px; margin: 24px 0; }
  .pb-col { grid-column: span 1; }
}

/* ------------------------------------------------------------------
   Lo scambia-lingua nella testata (migrazione 0019/0020).
   Sta nel foglio del CORE perché è struttura: dove sta e quanto è grande.
   Di che colore è lo dice il tema, con le sue variabili — un tema che vuole
   rifarlo da capo mette il suo partials/header.php, come per il resto.
   Con una lingua sola non viene nemmeno stampato: qui non c'è niente da
   nascondere con un display:none.
   ------------------------------------------------------------------ */
.bt-lingue{display:flex;align-items:center;gap:2px;flex-shrink:0}
.bt-lingue a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:30px;padding:0 8px;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-decoration:none;color:inherit;opacity:.6;border-radius:6px;
}
.bt-lingue a:hover{opacity:1;background:rgba(0,0,0,.06)}
.bt-lingue a[aria-current]{opacity:1;background:rgba(0,0,0,.08)}

/* ---- La scheda tecnica di una voce di catalogo ----
   Righe «etichetta → valore» sotto il nome. Filetti e basta: è una tabella di
   dati, non un riquadro che deve farsi notare. */
.bt-pd-tec{ width:100%; border-collapse:collapse; margin:18px 0 4px; }
.bt-pd-tec th,
.bt-pd-tec td{ padding:10px 0; border-top:1px solid var(--bt-line,#E4DED5); font-size:14.5px; text-align:left; vertical-align:top; font-weight:400; }
.bt-pd-tec th{ color:var(--bt-muted,#6B655C); width:44%; padding-right:14px; }
.bt-pd-tec td{ color:var(--bt-ink,#121212); font-weight:500; }

/* I link in fondo al piè di pagina, a destra (Privacy Policy, Cookie Policy…):
   Aspetto → Footer → «Link in fondo, a destra» (24/9/26). */
.footer-legali{display:flex; flex-wrap:wrap; gap:6px 18px; margin-left:auto}
.footer-legali a{color:inherit; text-decoration:none; opacity:.85}
.footer-legali a:hover{opacity:1; text-decoration:underline}

/* SUL TELEFONO I CAMPI SONO A 16px (30/9/26): Safari su iPhone e iPad ingrandisce
   la pagina quando si tocca un campo più piccolo, e resta ingrandita. Misurato a
   390 su Cultura: l'email della newsletter (a lato e nel piede) e il motivo della
   cancellazione dell'account a 14,4px; su Euromarmi e sul sito di prova contatti,
   accesso e registrazione a 15px. Il campo della ricerca (16,8px) resta fuori:
   la regola lo avrebbe rimpicciolito. Solo sugli schermi a tocco; lo zoom con due
   dita resta libero. «:not(#_)» le dà il peso di un id, come nel pannello (in
   fondo a tema-admin.css), per battere i temi che fissano i campi con !important. */
@media (hover: none) and (pointer: coarse) {
  :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=hidden]), select, textarea):not(#_):not(#ricercaInput) { font-size: 16px !important; }
}

/* IL TESTO «CODICE» NEL CARATTERE DEL TEMA (5/10/26). Un nome tecnico dentro un testo (la voce «addi_consent» nella
   Cookie Policy) usciva nel carattere a spaziatura fissa del browser: l'unico carattere estraneo al tema in tutte
   le pagine (collaudo-pagine.py, «solo i caratteri del tema»). Si distingue con un fondino del colore del testo. */
code, kbd, samp { font-family: inherit; font-size: .94em; padding: .06em .34em; border-radius: 4px; background: color-mix(in srgb, currentColor 8%, transparent); }
/* La schermata «Newsletter» dell'area personale (5/10/26, modules/iscritti/area.js) */
.isc-area-testo { margin: 0 0 14px; }
.isc-area-consensi { margin: 0 0 18px; padding-left: 20px; }
.isc-area-consensi li { margin-bottom: 6px; }
.isc-area .auth-err { margin: 0 0 12px; }
/* le statistiche delle email, sotto l'iscrizione (12/10/26): staccate dal pulsante di sopra. Tre classi: il tema di
   Cultura scrive il margine del titolo con «.app .account-pane-subtitle», che arriva dopo e a parità vinceva */
.isc-area .account-pane-subtitle.isc-area-stat { margin-top: 32px; }
.isc-area .area-caselle { margin: 0 0 18px; }
/* la casella delle statistiche si legge come le righe dei consensi sopra, non piccola come nei moduli */
.isc-area .iscr-spunta { font-size: inherit; color: inherit; }
.isc-area .isc-area-breve { text-wrap: balance; }   /* una frase corta: non resta una parola sola in fondo */

/* Niente ingrandimento col doppio tocco (5/10/26, insieme a addi_viewport in api/core.php): al telefono la pagina
   ingrandita scivolava di lato. Lo scorrimento e i pulsanti restano come sono. */
html{ touch-action:manipulation }