/*
 * Lotto G: la grafica nuova del sito, sopra rivendimi.css.
 *
 * Il foglio entra in pagina solo con la grafica nuova (niente file
 * var/grafica-classica: shop/layout/stylesheets.html.twig), dopo rivendimi.css
 * e dopo il foglio di Sylius, e ne ridefinisce le variabili. rivendimi.css non
 * si tocca e resta caricato anche qui.
 *
 * Ogni passo del piano aggiunge una sezione "=== passo N: ... ===". Le
 * ultime due sono quelle del passo M (il movimento sempre attivo e le
 * animazioni del mockup che mancavano).
 *
 * Indirizzi (Cloudflare tiene gli asset per ore): gli unici url() ammessi
 * sono i caratteri ../fonts/<nome>-v<N>.woff2, con la versione nel nome, e le
 * immagini data:image/svg+xml. Un carattere cambiato prende un nome nuovo
 * (-v2), mai lo stesso. I preload di metatags.html.twig puntano allo stesso
 * percorso senza asset(): con ?v= il browser scaricherebbe il carattere due
 * volte. Lo controlla FontFilesTest.
 */

/* === passo 1a-ii: caratteri =========================================== */

/*
 * Saira 400-700 per tutto il testo: il sottoinsieme latino di Google Fonts
 * (larghezza 100), servito da noi. Orbitron 800 per i titoli e JetBrains
 * Mono 500 per i codici li useranno le classi rv- dei passi dopo. Solo
 * Saira ha il preload su ogni pagina. Orbitron va solo sui titoli di home,
 * categorie e pagine informative (D6): il preload lo mette chi lo usa in
 * prima schermata (passi 3.1 e 5.2), altrove si scarica solo se serve, come
 * JetBrains Mono. Mai dai server di Google Fonts: trasmetterebbero a Google
 * l'indirizzo di chi visita (LG Muenchen I, 20/01/2022).
 * Licenze: OFL-*.txt accanto ai file. Orbitron ha il Reserved Font Name
 * "Orbitron", quindi e' il file intero di google/fonts, solo ricompresso in
 * WOFF2, senza togliere glifi.
 */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(../fonts/saira-v1.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/orbitron-v1.woff2) format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/jetbrains-mono-v1.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Ripiego di Orbitron mentre arriva: Arial Bold allargato e riallineato,
 * cosi' il titolo non salta quando Orbitron, molto piu' largo, prende il suo
 * posto. Valori misurati su Orbitron 800 contro Liberation Sans Bold (stesse
 * larghezze di Arial Bold), sui titoli del mockup: larghezza 1,178;
 * ascendente 1011 e discendente 243 su 1000, divisi per 1,178. Copre solo i
 * caratteri che Orbitron ha: per quelli che gli mancano (le virgolette
 * basse, il punto in alto, gli esponenti) si passa a Saira, come quando
 * Orbitron e' arrivato. Dove Arial non c'e' (Android) il ripiego e' Saira.
 */
@font-face {
    font-family: 'Orbitron ripiego';
    font-style: normal;
    font-weight: 400 900;
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold');
    size-adjust: 117.8%;
    ascent-override: 85.8%;
    descent-override: 20.6%;
    line-gap-override: 0%;
    unicode-range: U+0020-005D, U+005F-007E, U+00A0-00A3, U+00A8, U+00AF-00B0, U+00B4, U+00B6, U+00B8, U+00BF-00CF, U+00D1-00D7, U+00D9-00DD, U+00DF-00EF, U+00F1-00F7, U+00F9-00FD, U+00FF, U+0131, U+0152-0153, U+0160-0161, U+0178, U+017D-017E, U+02C6-02C7, U+02D8-02DC, U+0300-0303, U+0307-0308, U+030A, U+030C, U+0327, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2212;
}

/*
 * Ripiego di JetBrains Mono mentre arriva (passo 5.1b): un carattere a
 * larghezza fissa del sistema, ridimensionato perche' ogni carattere sia
 * largo 0,6 em come in JetBrains Mono, e con la sua ascendente e la sua
 * discendente (1,02 e 0,30 em). Cosi' un nome di pezzo con un codice dentro
 * non va a capo in un altro punto, e la sua riga non si sposta, quando
 * JetBrains Mono prende il suo posto: a 400 px l'H1 della scheda andava a
 * capo altrove (CLS 0,025 con DejaVu Sans Mono, largo 0,602 em), e a 1280
 * px le righe con un codice si alzavano di 3 px. Larghezze per em: DejaVu
 * Sans Mono e Menlo 1233/2048, Consolas 1126/2048. Liberation Mono e
 * Courier New sono gia' 1229/2048: restano al generico monospace.
 */
@font-face {
    font-family: 'JetBrains Mono ripiego';
    font-style: normal;
    font-weight: 400 700;
    src: local('DejaVu Sans Mono'), local('DejaVuSansMono'), local('Menlo'), local('Menlo-Regular');
    size-adjust: 99.66%;
    ascent-override: 102%;
    descent-override: 30%;
    line-gap-override: 0%;
}

@font-face {
    font-family: 'JetBrains Mono ripiego Consolas';
    font-style: normal;
    font-weight: 400 700;
    src: local('Consolas');
    size-adjust: 109.13%;
    ascent-override: 102%;
    descent-override: 30%;
    line-gap-override: 0%;
}

/*
 * Il foglio di Sylius mette Inter in --bs-font-sans-serif e, dentro
 * @supports, in :root; piu' le varianti cv03, cv04 e cv11, che esistono solo
 * in Inter. Tutto ridefinito qui: nessun elemento usa piu' InterVariable, e
 * il browser non lo scarica (i due preload li toglie metatags.html.twig).
 * Corpo a 17 px con --bs-body-font-size e non su html, cosi' i rem di Sylius
 * e di rivendimi.css restano quelli di prima.
 */
:root {
    --rv-font-testo: 'Saira', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
    --rv-font-titoli: 'Orbitron', 'Orbitron ripiego', 'Saira', sans-serif;
    --rv-font-codice: 'JetBrains Mono', 'JetBrains Mono ripiego', 'JetBrains Mono ripiego Consolas', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --bs-font-sans-serif: var(--rv-font-testo);
    --bs-body-font-family: var(--rv-font-testo);
    --bs-body-font-size: 1.0625rem;

    /* Questo foglio viene dopo quello di Sylius: vince anche sulla regola
       dentro @supports. */
    font-family: var(--rv-font-testo);
    font-feature-settings: normal;
}

/* === passo 1b: gettoni ================================================ */

/*
 * Colori, pulsanti, angoli, campi e fuoco della grafica nuova, su tutta la
 * vetrina: checkout, area personale e area venditore comprese. I colori sono
 * quelli del mockup (fasce B, accento del logo), con le correzioni di
 * contrasto decise (S3): il verde e il bordo dei campi. I rapporti WCAG li
 * calcola TokenContrastTest da questo file.
 *
 * Un solo rosso (S2, R5): il foglio di Sylius ha il verde acqua compilato in
 * decine di regole, e rivendimi.css il rosso del prototipo nelle sue
 * variabili e in due ombre scritte a mano. Qui si ridefiniscono le variabili
 * e si riscrivono le regole che non ne passano. Nessuno dei due vecchi colori
 * compare in questo file: lo controlla la prova.
 */
:root {
    --rv-ink: #0F0F0F;
    --rv-ink2: #4A505C;
    --rv-meta: #5F6672;
    --rv-surf: #F2F4F7;
    --rv-surf2: #E6E9EE;
    /* Solo per i fili decorativi: 1,42:1 sul bianco, non basta a un campo. */
    --rv-line: #D5D9E0;
    /* Bordi dei campi: 3,39:1 sul bianco, 3,08 su surf (WCAG 1.4.11). */
    --rv-campo: #858C97;
    --rv-night: #0B0D10;
    /* Il rosso del logo, l'accento. */
    --rv-red: #DB0000;
    /* Il rosso dei testi e dei bordi. */
    --rv-red-dk: #A8000C;
    /* Fondo chiaro del rosso: la stessa tinta di --rv-red-dk (355,7 gradi). */
    --rv-rosa: #FFF1F2;
    /* Verde dei segni positivi: 4,78:1 sul suo fondo (il verde del mockup
       si fermava a 4,48). */
    --rv-green: #187A48;
    --rv-green-fondo: #E8F5EE;
    /* Il pulsante nero al passaggio del mouse. */
    --rv-ink-passaggio: #343434;

    /* Le condizioni del pezzo: fondo e testo, tutte sopra 10:1. */
    --rv-cond-nuovo: #BDF3D6;
    --rv-cond-nuovo-testo: #053B22;
    --rv-cond-ottimo: #CFE0FF;
    --rv-cond-ottimo-testo: #0B2A66;
    --rv-cond-usato: #FFE08A;
    --rv-cond-usato-testo: #3D2B00;
    --rv-cond-revisione: #E3E5E9;
    --rv-cond-revisione-testo: #1F232A;

    /* Colore del contorno di fuoco: ink, bianco solo dentro le sezioni che
       restano scure (sotto). */
    --rv-fuoco: var(--rv-ink);

    /* Le variabili di rivendimi.css, che resta caricato prima di questo. */
    --rivendimi-rosso: var(--rv-red);
    --rivendimi-rosso-scuro: var(--rv-red-dk);
    --rivendimi-rosso-tenue: var(--rv-rosa);
    --rivendimi-inchiostro: var(--rv-ink);

    /* Bootstrap: il primario e i collegamenti sono neri; i collegamenti
       restano sottolineati. */
    --bs-primary: var(--rv-ink);
    --bs-primary-rgb: 15, 15, 15;
    --bs-primary-text-emphasis: var(--rv-ink);
    --bs-primary-bg-subtle: var(--rv-surf);
    --bs-primary-border-subtle: var(--rv-line);
    --bs-link-color: var(--rv-ink);
    --bs-link-color-rgb: 15, 15, 15;
    --bs-link-hover-color: var(--rv-ink);
    --bs-link-hover-color-rgb: 15, 15, 15;
    --bs-link-decoration: underline;
    --bs-body-color-rgb: 15, 15, 15;
    --bs-focus-ring-color: var(--rv-ink);

    /* Angoli vivi. Le pillole (--bs-border-radius-pill, rounded-pill) e i
       cerchi restano tondi. */
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
}

/* --- Sezioni scure: il fuoco diventa bianco ----------------------------- */

/*
 * Solo dove il fondo resta scuro: la barra nera di Sylius, il riquadro "Hai
 * rimanenze di magazzino?", le schede e le etichette con il primario o il
 * nero pieno (i messaggi propri delle conversazioni). Mai una regola su
 * tutte le sezioni scure insieme (difetto del mockup: 1,02:1).
 */
.bg-black,
.bg-dark,
.text-bg-dark,
.text-bg-primary,
.rivendimi-venditori {
    --rv-fuoco: #fff;
}

/* --- Pulsanti ----------------------------------------------------------- */

/* Pulsanti principali neri, anche al passaggio, alla pressione e spenti:
   in rivendimi.css diventavano rossi al passaggio, e il testo di Sylius al
   passaggio era nero. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rv-ink);
    --bs-btn-border-color: var(--rv-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rv-ink-passaggio);
    --bs-btn-hover-border-color: var(--rv-ink-passaggio);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rv-ink-passaggio);
    --bs-btn-active-border-color: var(--rv-ink-passaggio);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--rv-ink);
    --bs-btn-disabled-border-color: var(--rv-ink);
    --bs-btn-focus-shadow-rgb: 15, 15, 15;
}

.btn-outline-primary {
    --bs-btn-color: var(--rv-ink);
    --bs-btn-border-color: var(--rv-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rv-ink);
    --bs-btn-hover-border-color: var(--rv-ink);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rv-ink);
    --bs-btn-active-border-color: var(--rv-ink);
    --bs-btn-disabled-color: var(--rv-ink);
    --bs-btn-disabled-border-color: var(--rv-ink);
    --bs-btn-focus-shadow-rgb: 15, 15, 15;
}

/* Sul riquadro scuro il pulsante nero sparirebbe: diventa bianco. Il colore
   va scritto perche' Sylius fissa .btn-primary{color:#fff}. */
.rivendimi-venditori .btn-primary {
    --bs-btn-color: var(--rv-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--rv-ink);
    --bs-btn-hover-bg: var(--rv-surf2);
    --bs-btn-hover-border-color: var(--rv-surf2);
    --bs-btn-active-color: var(--rv-ink);
    --bs-btn-active-bg: var(--rv-surf2);
    --bs-btn-active-border-color: var(--rv-surf2);
    color: var(--bs-btn-color);
}

/* Le utilita' "primary" seguono il primario, come rivendimi.css le aveva
   legate al primario di allora. text-bg-primary: Sylius ci mette il testo
   nero (era calcolato sul verde acqua), che sul nero non si leggerebbe. */
.text-primary { color: var(--rv-ink) !important; }
.bg-primary { background-color: var(--rv-ink) !important; }
.border-primary { border-color: var(--rv-ink) !important; }

.text-bg-primary {
    color: #fff !important;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
}

/* --- Angoli vivi ------------------------------------------------------- */

/* Quelli che Sylius ha scritto in chiaro e non con le variabili. */
.btn,
.btn-lg,
.btn-sm,
.btn-group-lg > .btn,
.btn-group-sm > .btn {
    --bs-btn-border-radius: 0;
}

.btn-group,
.btn-close,
.form-control,
.form-control-sm,
.form-control-lg,
.form-select,
.form-select-sm,
.form-select-lg,
.form-check-input[type=checkbox],
.input-group-text,
.input-group-lg > .btn,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
kbd {
    border-radius: 0;
}

.navbar { --bs-navbar-toggler-border-radius: 0; }

/* L'interruttore resta una pillola, come il suo pallino (la regola sopra
   squadrerebbe anche lui, che e' un checkbox). */
.form-switch .form-check-input { border-radius: 2em; }

/* --- Campi: bordi che si vedono ---------------------------------------- */

/* Il bordo di Bootstrap e' 1,30:1 sul bianco. I campi validati (verde o
   rosso) tengono il loro colore: quelle regole sono piu' specifiche. */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-color: var(--rv-campo);
}

/* Campi spenti (la tendina del modello prima della marca): fondo surf come
   nel mockup, su cui il bordo tiene 3,08:1; sul grigio di Bootstrap era
   2,86. */
.form-control:disabled,
.form-select:disabled {
    background-color: var(--rv-surf);
    color: var(--rv-meta);
}

/* Checkbox e radio spuntati: erano verde acqua. */
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--rv-ink);
    border-color: var(--rv-ink);
}

/* Due regole: un selettore che un browser non conosce annulla tutta la
   regola in cui sta. */
.form-range::-webkit-slider-thumb { background-color: var(--rv-ink); }
.form-range::-moz-range-thumb { background-color: var(--rv-ink); }
.form-range::-webkit-slider-thumb:active { background-color: var(--rv-ink2); }
.form-range::-moz-range-thumb:active { background-color: var(--rv-ink2); }

/* --- Gli altri resti del verde acqua di Sylius ------------------------- */

.dropdown-menu,
.dropdown-menu-dark {
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--rv-ink);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--rv-ink); }

/* Il menu delle categorie: al passaggio il rosso dei testi, come la voce
   aperta del menu nel mockup. */
.navbar {
    --bs-navbar-hover-color: var(--rv-red-dk);
    --bs-navbar-active-color: var(--rv-red-dk);
    --bs-navbar-brand-color: var(--rv-ink);
    --bs-navbar-brand-hover-color: var(--rv-ink);
}

.pagination {
    --bs-pagination-color: var(--rv-ink);
    --bs-pagination-hover-color: var(--rv-ink);
    --bs-pagination-hover-bg: var(--rv-surf);
    --bs-pagination-focus-color: var(--rv-ink);
    --bs-pagination-focus-bg: var(--rv-surf);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--rv-ink);
    --bs-pagination-active-border-color: var(--rv-ink);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--rv-ink);
}

.list-group {
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--rv-ink);
    --bs-list-group-active-border-color: var(--rv-ink);
}

.table-primary {
    --bs-table-color: var(--rv-ink);
    --bs-table-bg: var(--rv-surf);
    --bs-table-border-color: var(--rv-line);
}

.btn-close { --bs-btn-close-focus-shadow: none; }

/* La freccia della fisarmonica aperta ("Dettagli" della scheda) era un
   verde scuro: ora e' ink. Gli apici dentro l'SVG sono %27, cosi' l'url()
   si legge intero (FontFilesTest). */
.accordion {
    --bs-accordion-active-color: var(--rv-ink);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 stroke=%27%230F0F0F%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m2 5 6 6 6-6%27/%3E%3C/svg%3E");
    --bs-accordion-btn-focus-box-shadow: none;
}

/* .link-primary ("Vedi come funziona nel dettaglio"): al passaggio e al
   fuoco Bootstrap ci ha compilato una tinta chiara del verde acqua. */
.link-primary:focus,
.link-primary:hover {
    color: var(--rv-ink) !important;
    text-decoration-color: var(--rv-ink) !important;
}

/* Link senza sottolineatura dell'intestazione e dei menu: al passaggio
   erano verde acqua, ora si sottolineano. */
.list-nav li a:hover,
a.link-reset:hover {
    color: var(--rv-ink);
    text-decoration: underline;
}

/* I puntini del caricamento dei componenti live hanno il verde acqua nello
   stile in linea (macro loader di Sylius): serve !important. */
.sylius-shop-loader .spinner-dots > div {
    background-color: var(--rv-ink) !important;
}

/* Il metodo di pagamento scelto, se un giorno ci fosse Mollie. */
.online-payment__label { border-radius: 0; }
.online-payment__input:checked ~ .online-payment__label {
    border-color: var(--rv-ink);
    box-shadow: inset 0 0 0 2px var(--rv-ink);
}

/* --- Le regole di rivendimi.css con il rosso scritto a mano ------------- */

.rivendimi-categoria:hover {
    border-color: var(--rv-ink);
    box-shadow: 0 10px 24px rgba(11, 13, 16, .1);
}

.rivendimi-scheda:hover {
    border-color: var(--rv-ink);
    box-shadow: 0 10px 24px rgba(11, 13, 16, .1);
}

/* La scheda nascondeva quel che sborda per ritagliare la foto negli angoli
   tondi. Con gli angoli vivi non serve, e tagliava il contorno di fuoco del
   collegamento della foto, che tocca i bordi della scheda. */
.rivendimi-scheda { overflow: visible; }

/*
 * Senza il ritaglio niente deve uscire dalla scheda. A 400 px un nome con
 * due codici uniti dalla barra ("Kit frizione LUK 623308200/623308209")
 * allargava la pagina, che scorreva di lato, o copriva la colonna accanto;
 * prima il ritaglio lo tagliava a meta'. Ora il nome va a capo anche dentro
 * una parola, come la riga della compatibilita'. Con i nomi di oggi la
 * pagina non cambia.
 */
.rivendimi-scheda__titolo-testo { overflow-wrap: anywhere; }

/* Le pillole del codice OE e della condizione restano su una riga. Come
   oggi possono entrare nel margine interno della scheda (1rem a destra, in
   rivendimi.css), ma non oltre il bordo: quel che non ci sta si chiude con i
   puntini. Senza flex-shrink a 0 la riga le stringerebbe al margine, e a 360
   px "Usato, ottimo stato" perderebbe la fine. Il codice lo scrive il
   venditore e puo' essere lungo quanto vuole; il title del template lo porta
   intero. */
.rivendimi-scheda__identificazione .badge {
    flex-shrink: 0;
    max-width: calc(100% + 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prezzo e "Disponibile" vanno uno sotto l'altro quando affiancati non ci
   stanno: a 320 px "Disponibile" usciva gia' con i prezzi di oggi. */
.rivendimi-scheda__piede { flex-wrap: wrap; }

/* E il verde, che sul suo fondo chiaro non arrivava a 4,5:1. */
.rivendimi-scheda__stato { color: var(--rv-green); }
.rivendimi-disponibilita__si { color: var(--rv-green); }
.rivendimi-distintivo {
    background: var(--rv-green-fondo);
    color: var(--rv-green);
}

/* --- Fuoco: un contorno di 2 px a 2 px di distanza, su ogni fondo ------ */

/*
 * Al posto delle ombre di Bootstrap (verde acqua al 25%, 1,25:1) e
 * dell'ombra da 0,05 rem dei campi di Sylius. Il colore e' --rv-fuoco: ink,
 * bianco nelle sezioni scure. I campi di testo lo mostrano a ogni fuoco,
 * anche col mouse (si vede dove si sta scrivendo); il resto solo da
 * tastiera.
 */
:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible + .btn,
.btn-check:checked + .btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check) + .btn:active:focus-visible,
.form-check-input:focus-visible,
.form-range:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.btn-close:focus-visible,
.accordion-button:focus-visible,
.navbar-toggler:focus-visible,
.dropdown-item:focus-visible,
.list-group-item-action:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.focus-ring:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rv-ink);
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
    box-shadow: none;
}

/*
 * Chromium non disegna il contorno "solid" di un collegamento in linea che
 * contiene blocchi: lo faceva solo il suo anello di serie. Sono le schede
 * prodotto di Sylius ("Prodotti recenti", "Potresti anche essere
 * interessato": foto e nome dentro un a.link-reset) e il logo del checkout.
 * Da blocchi si disegna; l'impaginazione non cambia, perche' i figli erano
 * gia' blocchi a tutta larghezza.
 */
a.link-reset:has(> div) { display: block; }

/* Al clic l'ombra di Bootstrap non serve piu'. */
.form-check-input:focus,
.page-link:focus,
.btn-close:focus,
.navbar-toggler:focus {
    box-shadow: none;
}

/* === passo 2a: intestazione =========================================== */

/*
 * La barra degli avvisi, l'intestazione (logo, ricerca, azioni, categorie)
 * e il menu del telefono della grafica nuova (shop/g/intestazione/). Le
 * classi sono quelle del mockup con il prefisso rv-. Le regole globali del
 * mockup (a{color:inherit}, body{margin:0}, scroll-padding-top) non si
 * portano: tutto sta sotto le classi rv-.
 *
 * Il menu grande, l'intestazione che resta in alto e si compatta e le
 * voci delle categorie come pulsanti sono del passo 2b (sezione dopo).
 * Le transizioni valgono sempre, anche con "Riduci movimento" acceso sul
 * dispositivo (decisione del committente del 21/10, piano §6, passo M):
 * fino al passo M stavano dentro
 * @media (prefers-reduced-motion: no-preference).
 */
:root {
    /* Margine laterale e curva del mockup. */
    --rv-gut: clamp(20px, 4.45vw, 64px);
    --rv-e-expo: cubic-bezier(.19, 1, .22, 1);
}

.rv-wrap {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--rv-gut);
}

.rv-ic {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rv-ic-s {
    width: 16px;
    height: 16px;
}

/* --- Il collegamento per saltare --------------------------------------- */

.rv-salta {
    position: absolute;
    top: -80px;
    left: 16px;
    z-index: 1080;
    padding: 12px 18px;
    background: var(--rv-ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.rv-salta:focus {
    top: 8px;
    color: #fff;
}

/* Il collegamento compare sopra la barra scura e, da 768 px in su, anche
   sopra l'intestazione bianca: la barra e' alta 36 px, il collegamento 50.
   Un contorno di un colore solo sparisce su uno dei due fondi (ink sulla
   barra faceva 1,02:1, rilievo R2a-1). Qui il contorno e' bianco e sta
   sopra un anello ink largo 6 px che e' del collegamento: il bianco ha
   l'ink da tutti e due i lati, qualunque fondo ci sia dietro, e
   sull'intestazione bianca l'anello ink si stacca da solo. */
.rv-salta {
    --rv-fuoco: #fff;
}

.rv-salta:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--rv-ink);
}

/* --- La barra degli avvisi ---------------------------------------------- */

/* La barra resta scura: il contorno di fuoco e' bianco, come nelle altre
   sezioni scure del passo 1b (TokenContrastTest, DARK_SECTIONS). */
.rv-avvisi {
    --rv-fuoco: #fff;
}

.rv-avvisi {
    position: relative;
    background: var(--rv-night);
    color: #fff;
    font-size: .875rem;
    line-height: 1.45;
}

.rv-avvisi-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
}

/* Tutti i messaggi nella stessa cella: la barra e' alta quanto il piu' lungo
   e il giro non sposta la pagina (R7). */
.rv-avvisi-msgs {
    position: relative;
    display: grid;
    flex: 1;
    min-width: 0;
    max-width: 1080px;
}

.rv-avvisi-msg {
    grid-area: 1 / 1;
    align-self: center;
    margin: 0;
    padding-block: 8px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
}

.rv-avvisi-msg.rv-on {
    visibility: visible;
    opacity: 1;
}

.rv-avvisi-msg a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.rv-avvisi-msg a:hover {
    color: #fff;
    text-decoration-thickness: 2px;
}

.rv-avvisi-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, .28);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* I pulsanti quadrati della barra sono 44x36, e 40x36 sotto i 768 px: non
   44x44 come dice il piano (§6). A 1280 px la barra e' alta 36 px come nel
   mockup, e un pulsante alto 44 la porterebbe a 44; al telefono (un
   pulsante solo dal passo 5.2) la larghezza di 40 lascia 4 px in piu' alle
   righe del messaggio.
   Il minimo di WCAG 2.5.8 (24x24) e' rispettato; la scelta fra la barra
   piu' alta e i 44x44 e' del committente (rilievo R2a-3). */
.rv-sq {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

.rv-avvisi-cmd {
    display: flex;
    flex: none;
}

.rv-avvisi .rv-sq {
    color: #fff;
    opacity: .8;
}

.rv-avvisi .rv-sq:hover {
    opacity: 1;
}

/* I pulsanti sono alti quanto la barra e stanno al suo bordo alto: un
   contorno fuori dal pulsante avrebbe il lato alto fuori dalla pagina e
   quello basso bianco sull'intestazione bianca (rilievo R2a-2). Dentro il
   pulsante sta tutto sul fondo scuro, lontano dall'icona di 16 px. Al fuoco
   il pulsante e' pieno, non all'80%: il contorno resta bianco. */
.rv-avvisi .rv-sq:focus-visible {
    outline-offset: -4px;
    opacity: 1;
}

/* Senza script i pulsanti non servono: restano invisibili ma al loro posto,
   cosi' quando lo script arriva il testo non si sposta. */
.rv-avvisi:not(.rv-pronta) .rv-sq {
    visibility: hidden;
}

/* La pausa: i messaggi girano da soli sempre, anche con "Riduci
   movimento" acceso (passo M), e il pulsante c'e' sempre (WCAG 2.2.2). */
.rv-avvisi-pausa {
    display: grid;
}

.rv-avvisi-pausa .rv-se-fermo,
.rv-avvisi-pausa.rv-fermata .rv-se-gira {
    display: none;
}

.rv-avvisi-pausa.rv-fermata .rv-se-fermo {
    display: block;
}

/* --- L'intestazione ----------------------------------------------------- */

.rv-hd {
    position: relative;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid var(--rv-line);
    color: var(--rv-ink);
}

.rv-hd-r1 {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo srch act";
    align-items: center;
    column-gap: 32px;
    min-height: 76px;
}

.rv-hd-logo {
    grid-area: logo;
    display: block;
    min-width: 0;
    line-height: 0;
}

.rv-hd-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 30px;
    object-fit: contain;
    object-position: left center;
}

/* La ricerca: tendina delle categorie, campo, pulsante nero. */
.rv-srch {
    grid-area: srch;
    display: flex;
    justify-self: center;
    width: 100%;
    max-width: 660px;
    height: 44px;
    margin: 0;
    border: 1px solid var(--rv-ink);
    background: #fff;
}

.rv-srch-sel {
    position: relative;
    flex: none;
    width: 172px;
    border-right: 1px solid var(--rv-line);
}

.rv-srch-sel select {
    appearance: none;
    width: 100%;
    height: 100%;
    padding: 0 30px 0 12px;
    border: 0;
    border-radius: 0;
    background: var(--rv-surf);
    color: var(--rv-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rv-srch-sel .rv-ic {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -8px;
    pointer-events: none;
}

.rv-srch input {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
    text-overflow: ellipsis;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--rv-ink);
    font: inherit;
    font-size: 16px;
}

.rv-srch input::placeholder {
    color: var(--rv-meta);
    opacity: 1;
}

/* Il campo e' type="search": Chromium gli tiene il posto per la crocetta che
   lo svuota anche quando e' vuoto, e il segnaposto si chiudeva con i puntini
   20 px prima del bordo. Senza crocetta il segnaposto sta intero. */
.rv-srch input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.rv-srch input::-webkit-search-cancel-button,
.rv-srch input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Il contorno di fuoco dei due campi sta dentro il riquadro della ricerca. */
.rv-srch-sel select:focus-visible,
.rv-srch input:focus-visible {
    outline: 2px solid var(--rv-fuoco);
    outline-offset: -4px;
}

.rv-srch-vai {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--rv-ink);
    color: #fff;
    cursor: pointer;
}

.rv-srch-vai:hover {
    background: var(--rv-ink-passaggio);
}

/* Le azioni. */
.rv-hd-act {
    grid-area: act;
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 15px;
    font-weight: 600;
}

.rv-hd-act a,
.rv-hd-carrello {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rv-ink);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.rv-hd-act a:hover,
.rv-hd-carrello:hover {
    color: var(--rv-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rv-hd-act .rv-sell,
.rv-hd-act .rv-sell:hover {
    color: var(--rv-red-dk);
}

/* Un nome lungo si chiude con i puntini; intero nel title. */
.rv-nome {
    display: inline-block;
    max-width: 11em;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.rv-carrello-n {
    position: absolute;
    top: 3px;
    left: 11px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--rv-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* La riga delle categorie. */
.rv-hd-r2-in {
    display: flex;
    align-items: stretch;
    min-height: 44px;
}

.rv-nav {
    flex: 1;
    min-width: 0;
}

.rv-nav > ul {
    display: flex;
    gap: 30px;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rv-nav > ul > li {
    display: flex;
}

.rv-nav-btn,
.rv-nav-side a {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--rv-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.rv-nav-btn:hover,
.rv-nav-side a:hover {
    color: var(--rv-ink);
}

.rv-nav-btn::after,
.rv-nav-side a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--rv-red);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.rv-nav-side a::after {
    background: var(--rv-ink);
}

.rv-nav-btn:hover::after,
.rv-nav-btn.rv-corrente::after,
.rv-nav-side a:hover::after {
    transform: scaleX(1);
}

.rv-nav-side {
    display: flex;
    flex: none;
    align-items: stretch;
    gap: 26px;
}

/* --- Il menu del telefono ----------------------------------------------- */

.rv-mnav {
    display: none;
    grid-area: burger;
}

.rv-hd-burger {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    color: var(--rv-ink);
    list-style: none;
    cursor: pointer;
}

.rv-hd-burger::-webkit-details-marker,
.rv-mnav-cat > summary::-webkit-details-marker {
    display: none;
}

.rv-burger i {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.rv-burger i:nth-child(1) {
    top: 15px;
}

.rv-burger i:nth-child(2) {
    top: 21px;
}

.rv-burger i:nth-child(3) {
    top: 27px;
}

.rv-mnav[open] .rv-burger i:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.rv-mnav[open] .rv-burger i:nth-child(2) {
    opacity: 0;
}

.rv-mnav[open] .rv-burger i:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}

/* Il pannello si apre sotto l'intestazione, a tutta larghezza. */
.rv-mnav-pannello {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    max-height: calc(100vh - 150px);
    overflow: auto;
    border-top: 1px solid var(--rv-line);
    background: #fff;
    box-shadow: 0 30px 50px rgba(11, 13, 16, .14);
}

/* Il pannello scorre (overflow: auto) e taglia quel che sborda: il
   contorno di fuoco della prima categoria, 4 px sopra la voce, restava
   fuori (rilievo R2a-2). Il margine in alto gli fa posto; quello in basso
   c'e' gia' (.rv-mnav-links). Quando il pannello scorre, la voce col fuoco
   si ferma a 8 px dal bordo, contorno compreso. */
.rv-mnav-pannello {
    scroll-padding-block: 8px;
}

.rv-mnav-pannello > .rv-wrap {
    padding-top: 4px;
}

.rv-mnav-cat {
    border-bottom: 1px solid var(--rv-line);
}

.rv-mnav-cat > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.rv-mnav-cat[open] > summary .rv-ic {
    transform: rotate(180deg);
}

.rv-mnav-cat ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.rv-mnav-cat li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--rv-ink2);
    text-decoration: none;
}

.rv-mnav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 12px 20px;
}

.rv-mnav-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--rv-ink);
    font-weight: 700;
    text-decoration: none;
}

.rv-mnav-links .rv-sell {
    color: var(--rv-red-dk);
}

.rv-mnav-cat li a:hover,
.rv-mnav-links a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Larghezze ---------------------------------------------------------- */

/* Sotto i 1280 px la riga 1 e' stretta: l'accesso e il carrello restano
   icone (il testo resta il loro nome), e il campo tiene intero il suo
   segnaposto. "Come funziona" lascia la riga 2. */
@media (max-width: 1279px) {
    .rv-nav > ul {
        gap: 22px;
    }

    .rv-nav-side .rv-opt {
        display: none;
    }

    .rv-hd-logo img {
        height: 26px;
    }

    .rv-hd-r1 {
        column-gap: 24px;
    }

    .rv-hd-act {
        gap: 14px;
    }

    .rv-hd-utente .rv-txt,
    .rv-hd-carrello .rv-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rv-srch-sel {
        width: 168px;
    }
}

@media (max-width: 1180px) {
    .rv-nav > ul {
        gap: 16px;
    }

    .rv-nav-btn {
        font-size: 14px;
        letter-spacing: .03em;
    }
}

/* Fino a 1100 px il logo e gli spazi un po' piu' piccoli: al campo serve
   tutto il posto per il segnaposto. */
@media (max-width: 1100px) {
    .rv-hd-r1 {
        column-gap: 20px;
    }

    .rv-hd-logo img {
        height: 24px;
    }
}

/* Sotto i 1024 px: pulsante del menu, logo e icone in alto, la ricerca a
   tutta larghezza sotto; la riga delle categorie passa nel menu. */
@media (max-width: 1023px) {
    .rv-hd-r1 {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "burger logo act"
            "srch srch srch";
        min-height: 0;
        column-gap: 8px;
        row-gap: 8px;
        padding-block: 6px 10px;
    }

    .rv-mnav {
        display: block;
    }

    .rv-hd-logo img {
        height: 22px;
    }

    .rv-srch {
        max-width: none;
        height: 48px;
    }

    .rv-srch-sel {
        width: 32%;
        max-width: 190px;
    }

    .rv-srch input {
        padding: 0 8px;
    }

    .rv-srch-vai {
        width: 44px;
    }

    .rv-hd-act {
        gap: 4px;
    }

    .rv-hd-act .rv-sell,
    .rv-hd-act .rv-reg {
        display: none;
    }

    .rv-hd-act a,
    .rv-hd-carrello {
        justify-content: center;
        min-width: 44px;
    }

    /* Al telefono restano le icone: il testo non si vede ma resta il nome
       del collegamento. */
    .rv-hd-act .rv-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rv-hd-r2 {
        display: none;
    }
}

@media (max-width: 767px) {
    .rv-avvisi {
        font-size: .8125rem;
    }

    .rv-avvisi-prec {
        display: none;
    }

    .rv-avvisi .rv-sq {
        width: 40px;
    }
}

/* Al telefono un pulsante solo, a destra, a meta' altezza (passo 5.2):
   prima la freccia e la pausa stavano una sopra l'altra, e affiancate
   toglievano 40 px al testo (barra da 73 a 91 px a 400, da 91 a 110 a 360).
   E' la pausa (WCAG 2.2.2), come nel mockup: i messaggi girano sempre
   (passo M; prima, con "Riduci movimento", restava la freccia). */
@media (max-width: 767px) {
    .rv-avvisi-succ {
        display: none;
    }
}

/* Sotto i 400 px il segnaposto "Cerca per nome o codice" sta intero solo un
   po' piu' piccolo; il testo scritto resta a 16 px (il telefono non
   ingrandisce la pagina sul campo). */
@media (max-width: 399px) {
    .rv-srch input::placeholder {
        font-size: 14px;
    }
}

/* La tendina delle categorie al telefono (passo 5.2). "Tutte le categorie"
   (123 px) e il segnaposto del campo non ci stavano insieme: a 400 px la
   tendina diceva "Tutte le ...". Sotto i 600 px la prima voce si chiama
   "Tutte" (lo script le mette l'attributo label, rivendimi-g.js) e la
   tendina si stringe; una categoria scelta lunga si chiude con i puntini.
   Sotto i 360 px tendina e segnaposto stringono ancora, perche' il
   segnaposto resti intero anche a 320 px. */
@media (max-width: 599.98px) {
    .rv-srch-sel {
        width: 30%;
        max-width: 140px;
    }

    .rv-srch-sel select {
        padding: 0 26px 0 10px;
    }

    .rv-srch-sel .rv-ic {
        right: 7px;
    }
}

@media (max-width: 359.98px) {
    .rv-srch-sel {
        width: 72px;
    }

    .rv-srch-sel select {
        padding: 0 22px 0 8px;
    }

    .rv-srch-sel .rv-ic {
        right: 5px;
    }

    .rv-srch input {
        padding: 0 6px;
    }

    .rv-srch input::placeholder {
        font-size: 13px;
    }
}

/* Il movimento (piano §6: dal passo M sempre). */
.rv-avvisi-msg {
    transform: translateY(6px);
    transition: opacity .4s var(--rv-e-expo), transform .4s var(--rv-e-expo), visibility 0s linear .4s;
}

.rv-avvisi-msg.rv-on {
    transform: none;
    transition: opacity .4s var(--rv-e-expo), transform .4s var(--rv-e-expo), visibility 0s;
}

.rv-avvisi-timer.rv-on {
    animation: rv-avanzamento 5s linear forwards;
}

.rv-salta {
    transition: top .2s;
}

.rv-nav-btn::after,
.rv-nav-side a::after {
    transition: transform .35s var(--rv-e-expo);
}

.rv-burger i {
    transition: top .35s var(--rv-e-expo), transform .35s var(--rv-e-expo), opacity .2s ease;
}

.rv-mnav-cat > summary .rv-ic {
    transition: transform .35s var(--rv-e-expo);
}

@keyframes rv-avanzamento {
    to {
        transform: scaleX(1);
    }
}

/* === passo 2b: menu grande e intestazione che si compatta ============= */

/*
 * Il menu grande delle categorie e l'intestazione che resta in alto e si
 * compatta scendendo (shop/g/intestazione/menu.html.twig e le sezioni
 * "passo 2b" di rivendimi-g.js).
 *
 * NIENTE SPOSTAMENTI E NIENTE CLIC RUBATI (R12). L'intestazione e' sticky e
 * nella pagina occupa sempre il posto dell'intestazione intera: e' lei il
 * segnaposto in flusso. Quando si compatta non cambia nessuna misura, solo
 * quel che si vede, e il contenuto sotto non si muove mai (CLS 0):
 * - al computer l'intestazione sale (transform) quanto basta perche' resti
 *   una fascia di 64 px con le categorie; la riga 1, "Come funziona" e
 *   "Per chi vende" spariscono (opacity e visibility); il logo piccolo e
 *   le tre icone compaiono dove erano gia', invisibili; le voci si
 *   spostano con translate;
 * - al telefono clip-path taglia la riga della ricerca, che sparisce anche
 *   per Tab, e resta quella del menu, del logo e delle icone.
 * transform e clip-path valgono anche per i clic: sotto la fascia che si
 * vede l'intestazione non c'e', e il clic arriva alla pagina.
 * Le misure (quanto sale, dove si taglia, quanto si spostano le voci) le
 * prende lo script dalla pagina resa e le scrive nelle variabili
 * --rv-hd-*; i valori di riserva qui sono quelli di 1280 e 400 px.
 *
 * Lo spazio sotto l'intestazione (WCAG 2.4.11): quando la pagina scorre
 * per mostrare l'elemento con il fuoco, o un'ancora, lo ferma sotto
 * l'intestazione. E' l'altezza dell'intestazione intera piu' 8 px per il
 * contorno, anche da compatta: lo scorrimento stesso puo' riaprirla
 * (risalendo, o in cima alla pagina). Lo script la misura in
 * --rv-hd-visibile; senza script valgono i valori scritti qui. Due
 * differenze dal piano, provate nella copia:
 * - scroll-margin-top su tutto tranne l'intestazione, non scroll-padding-top
 *   sulla pagina: con scroll-padding-top Chrome faceva scorrere la pagina di
 *   centinaia di px a ogni Tab fra le voci dell'intestazione, che sta in
 *   alto e cadeva nello spazio riservato a lei stessa;
 * - la stessa altezza nei due stati, non quella della fascia compatta: con
 *   73 px la prima voce delle briciole finiva sotto l'intestazione che,
 *   arrivati in cima, si riapre fino a 122 px.
 *
 * Il menu grande chiuso e' display: none, non visibility: hidden: un
 * pannello nascosto ma impaginato farebbe scaricare Orbitron e JetBrains
 * Mono a ogni pagina, anche a chi il menu non lo apre (R1a-4).
 */
:where(:not(.rv-hd, .rv-hd *)) {
    scroll-margin-top: var(--rv-hd-visibile, 129px);
}

/* Sopra gli elementi appiccicati delle pagine (.sticky-top di Bootstrap,
   1020: la colonna del prezzo nella scheda del pezzo, che con lo stesso
   livello e dopo nella pagina passava sopra l'intestazione) e sotto il
   carrello laterale (1045). */
.rv-hd {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* La barra degli avvisi resta sopra il velo del menu grande, come nel
   mockup. Con l'intestazione non si sovrappone: esce dallo schermo prima
   che l'intestazione si fermi in alto. */
.rv-avvisi {
    z-index: 1031;
}

/* Gli elementi appiccicati delle pagine si fermano sotto l'intestazione,
   non a 3rem dal bordo della finestra (lo stile in linea del template di
   Sylius della colonna del prezzo), dove l'intestazione li coprirebbe. */
.rv-hd ~ * .sticky-top {
    top: var(--rv-hd-visibile, 129px) !important;
}

/* --- La riga delle categorie -------------------------------------------- */

/* Due colonne sovrapposte: nella prima il logo piccolo sotto le voci, nella
   seconda le icone della riga compatta sotto "Come funziona" e "Per chi
   vende". Le parti della riga compatta stanno sempre al loro posto,
   invisibili: compattarsi non cambia nessuna misura. */
.rv-hd-r2-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.rv-mini-logo {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: start;
    margin-right: 24px;
    line-height: 0;
}

.rv-mini-logo img {
    display: block;
    width: auto;
    height: 22px;
}

.rv-nav {
    grid-area: 1 / 1;
}

.rv-nav-side {
    grid-area: 1 / 2;
    justify-self: end;
}

.rv-mini-act {
    grid-area: 1 / 2;
    display: flex;
    align-self: center;
    justify-self: end;
    margin-left: 16px;
}

.rv-mini-logo,
.rv-mini-act {
    visibility: hidden;
    opacity: 0;
}

/* La fila delle voci e' larga quanto la colonna e copre il logo piccolo:
   prendono il mouse solo i pulsanti e i pannelli, non la fila vuota ne' i
   <li> (che con le voci spostate resterebbero un passo indietro). */
.rv-nav,
.rv-nav > ul,
.rv-nav > ul > li {
    pointer-events: none;
}

.rv-nav-btn,
.rv-mega {
    pointer-events: auto;
}

/* Le voci sono pulsanti (nel 2a erano collegamenti): stesso aspetto, con
   la freccetta del mockup. */
.rv-nav-btn {
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.rv-nav-btn .rv-ic {
    width: 14px;
    height: 14px;
}

.rv-nav-btn[aria-expanded="true"],
.rv-nav-btn[aria-expanded="true"]:hover {
    color: var(--rv-red-dk);
}

.rv-nav-btn[aria-expanded="true"]::after {
    transform: scaleX(1);
}

.rv-nav-btn[aria-expanded="true"] .rv-ic {
    transform: rotate(180deg);
}

/* Il pulsante con il fuoco sta sopra il suo pannello. Il pannello comincia
   al bordo basso del pulsante, e' posizionato e viene dopo nella pagina: gli
   passava sopra e copriva il lato basso del contorno, che sborda di 4 px
   (rilievo R2b-3). Il contorno non prende il mouse: il pannello resta
   cliccabile fin dal primo pixel. */
.rv-nav-btn:focus-visible {
    z-index: 1;
}

/* Le tre icone della riga compatta: la lente, l'accesso, il carrello. */
.rv-mini-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rv-ink);
    cursor: pointer;
}

.rv-mini-ico:hover,
.rv-mini-act .rv-hd-carrello:hover {
    color: var(--rv-red-dk);
    text-decoration: none;
}

.rv-mini-act .rv-hd-carrello {
    justify-content: center;
    width: 44px;
    height: 44px;
}

/* Il totale si legge nell'etichetta del pulsante, che dice anche i pezzi. */
.rv-mini-act .rv-hd-carrello .rv-txt {
    display: none;
}

.rv-mini-act .rv-carrello-n {
    left: 23px;
}

/* --- Il menu grande ----------------------------------------------------- */

/* Un pannello per categoria, subito dopo il suo pulsante, largo quanto
   l'intestazione (il suo blocco contenitore: le voci e le righe in mezzo
   non sono posizionate) e appena sotto. Lo apre lo script (aria-expanded);
   prima che lo script arrivi, o senza, si apre al passaggio e quando il
   fuoco e' dentro la voce. */
.rv-mega {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    border-top: 1px solid var(--rv-line);
    background: #fff;
    box-shadow: 0 30px 50px rgba(11, 13, 16, .14);
    color: var(--rv-ink);
    text-align: left;
    cursor: auto;
}

.rv-nav-btn[aria-expanded="true"] + .rv-mega,
.rv-hd:not(.rv-mega-js) .rv-nav > ul > li:hover > .rv-mega,
.rv-hd:not(.rv-mega-js) .rv-nav > ul > li:focus-within > .rv-mega {
    display: block;
}

.rv-mega-in {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr);
    gap: 48px;
    padding-block: 36px 40px;
}

.rv-occhiello {
    margin: 0;
    color: var(--rv-red-dk);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Il nome della categoria e' un paragrafo, non un titolo: l'H1 e' della
   pagina (MEN-08). In Orbitron, come i titoli delle categorie (D6). */
.rv-mega-t {
    margin: 6px 0 0;
    font-family: var(--rv-font-titoli);
    font-size: clamp(21px, calc(18.03px + .762vw), 29px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -.01em;
}

.rv-mega-testo {
    max-width: 30ch;
    margin: 10px 0 18px;
    color: var(--rv-ink2);
}

.rv-lnk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rv-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.rv-lnk:hover {
    color: var(--rv-ink);
    text-decoration-thickness: 2px;
}

.rv-mega-subs {
    align-self: start;
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 40px;
}

.rv-mega-subs li {
    break-inside: avoid;
}

.rv-mega-subs a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    border-bottom: 1px solid var(--rv-surf2);
    color: var(--rv-ink);
    font-weight: 500;
    text-decoration: none;
}

.rv-mega-subs a:hover,
.rv-mega-subs a[aria-current] {
    color: var(--rv-red-dk);
}

.rv-mega-subs a .rv-ic {
    opacity: 0;
}

.rv-mega-subs a:hover .rv-ic,
.rv-mega-subs a:focus-visible .rv-ic {
    opacity: 1;
}

/* La scheda scura "Hai il codice del pezzo?": il fuoco e' bianco, come
   nelle altre sezioni scure (TokenContrastTest, DARK_SECTIONS). */
.rv-mega-scheda {
    --rv-fuoco: #fff;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 10px;
    padding: 24px;
    background: var(--rv-night);
    color: #fff;
}

.rv-mega-scheda .rv-occhiello {
    color: #fff;
}

.rv-mega-scheda p {
    margin: 0;
    color: #C9CDD4;
}

.rv-mega-scheda .rv-lnk,
.rv-mega-scheda .rv-lnk:hover {
    color: #fff;
}

.rv-targa {
    align-self: flex-start;
    padding: 10px 12px;
    background: var(--rv-surf);
    color: var(--rv-ink);
    font-family: var(--rv-font-codice);
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

/* Il velo sulla pagina mentre il menu grande e' aperto: al clic lo chiude
   (lo script). Sotto l'intestazione e sopra la pagina, compresi i suoi
   elementi appiccicati. */
.rv-velo {
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: rgba(11, 13, 16, .4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    visibility: hidden;
    opacity: 0;
}

.rv-velo.rv-on {
    visibility: visible;
    opacity: 1;
}

/* Sotto i 1100 px la scheda del codice esce, come nel mockup. */
@media (max-width: 1100px) {
    .rv-mega-in {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .rv-mega-scheda {
        display: none;
    }
}

/* --- L'intestazione compatta, al computer -------------------------------- */

@media (min-width: 1024px) {
    .rv-hd.rv-compatta {
        transform: translateY(calc(-1 * var(--rv-hd-sposta, 56px)));
    }

    .rv-hd.rv-compatta .rv-hd-r1 > *,
    .rv-hd.rv-compatta .rv-nav-side {
        visibility: hidden;
        opacity: 0;
    }

    .rv-hd.rv-compatta .rv-mini-logo,
    .rv-hd.rv-compatta .rv-mini-act {
        visibility: visible;
        opacity: 1;
        translate: 0 var(--rv-hd-centra, -10px);
    }

    /* Dove le voci e le icone non lasciano posto al logo piccolo (fra 1024
       e 1180 px circa, con i nomi delle categorie di oggi) il logo resta
       fuori e le voci non si spostano: lo misura lo script. */
    .rv-hd.rv-compatta.rv-senza-mini-logo .rv-mini-logo {
        visibility: hidden;
        opacity: 0;
    }

    .rv-hd.rv-compatta .rv-nav-btn {
        translate: var(--rv-nav-dx, 0px) var(--rv-hd-centra, -10px);
    }

    /* La sottolineatura resta sul bordo basso della fascia. */
    .rv-hd.rv-compatta .rv-nav-btn::after {
        translate: 0 calc(-1 * var(--rv-hd-centra, -10px));
    }
}

/* --- Al telefono --------------------------------------------------------- */

@media (max-width: 1023px) {
    :where(:not(.rv-hd, .rv-hd *)) {
        scroll-margin-top: var(--rv-hd-visibile, 125px);
    }

    .rv-velo {
        display: none;
    }

    /* Con lo script la riga della ricerca si taglia con clip-path. Intera
       il taglio e' al bordo (niente da tagliare: cosi' il passaggio fra i
       due stati si anima); con il menu aperto non c'e', perche' il
       pannello del menu sta sotto l'intestazione. */
    .rv-hd.rv-hd-js {
        clip-path: inset(0);
    }

    .rv-hd.rv-hd-js.rv-compatta {
        clip-path: inset(0 0 calc(100% - var(--rv-hd-taglio, 58px)) 0);
    }

    .rv-hd.rv-hd-js.rv-mnav-aperto {
        clip-path: none;
    }

    .rv-hd.rv-compatta .rv-srch {
        visibility: hidden;
        opacity: 0;
    }

    /* Il filo sotto la fascia compatta: quello dell'intestazione e' tagliato. */
    .rv-hd::after {
        content: "";
        position: absolute;
        top: calc(var(--rv-hd-taglio, 58px) - 1px);
        right: 0;
        left: 0;
        height: 1px;
        background: var(--rv-line);
        opacity: 0;
        pointer-events: none;
    }

    .rv-hd.rv-compatta::after {
        opacity: 1;
    }
}

/* Il movimento (piano §6: dal passo M sempre, anche con "Riduci
   movimento"): il menu scende e l'intestazione cambia stato con le
   transizioni del mockup. */
.rv-hd {
    transition: transform .4s var(--rv-e-expo), clip-path .35s var(--rv-e-expo);
}

.rv-hd::after {
    transition: opacity .2s ease;
}

.rv-hd-r1 > *,
.rv-nav-side {
    transition: opacity .3s ease .05s, visibility 0s;
}

.rv-hd.rv-compatta .rv-hd-r1 > *,
.rv-hd.rv-compatta .rv-nav-side {
    transition: opacity .2s ease, visibility 0s linear .4s;
}

.rv-mini-logo,
.rv-mini-act {
    transition: opacity .2s ease, translate .4s var(--rv-e-expo), visibility 0s linear .4s;
}

.rv-hd.rv-compatta .rv-mini-logo,
.rv-hd.rv-compatta .rv-mini-act {
    transition: opacity .3s ease .12s, translate .4s var(--rv-e-expo), visibility 0s;
}

.rv-nav-btn {
    transition: color .2s ease, translate .4s var(--rv-e-expo);
}

.rv-nav-btn::after {
    transition: transform .35s var(--rv-e-expo), translate .4s var(--rv-e-expo);
}

.rv-nav-btn .rv-ic {
    transition: transform .35s var(--rv-e-expo);
}

/* Il pannello scende dall'alto (clip-path) e, chiuso, risale prima di
   sparire (display con allow-discrete). Passando da una categoria
   all'altra non scende di nuovo: cambia solo il contenuto. */
.rv-mega {
    clip-path: inset(0 0 100% 0);
    transition: clip-path .4s var(--rv-e-expo), display .4s allow-discrete;
}

.rv-nav-btn[aria-expanded="true"] + .rv-mega,
.rv-hd:not(.rv-mega-js) .rv-nav > ul > li:hover > .rv-mega,
.rv-hd:not(.rv-mega-js) .rv-nav > ul > li:focus-within > .rv-mega {
    clip-path: inset(0 0 -90px 0);
    transition: clip-path .55s var(--rv-e-expo), display .55s allow-discrete;
}

@starting-style {
    .rv-nav-btn[aria-expanded="true"] + .rv-mega,
    .rv-hd:not(.rv-mega-js) .rv-nav > ul > li:hover > .rv-mega,
    .rv-hd:not(.rv-mega-js) .rv-nav > ul > li:focus-within > .rv-mega {
        clip-path: inset(0 0 100% 0);
    }
}

.rv-hd.rv-mega-cambio .rv-mega {
    transition: none;
}

/* Le tre colonne entrano una dopo l'altra, le sottocategorie in fila. */
.rv-mega-in > * {
    transition: opacity .45s ease, translate .6s var(--rv-e-expo);
    transition-delay: calc(var(--rv-i, 0) * 70ms + 90ms);
}

.rv-mega-in > :nth-child(2) {
    --rv-i: 1;
}

.rv-mega-in > :nth-child(3) {
    --rv-i: 2;
}

.rv-mega-subs li {
    transition: opacity .4s ease, translate .5s var(--rv-e-expo);
    transition-delay: calc(var(--rv-j, 0) * 40ms + 160ms);
}

@starting-style {
    .rv-mega-in > * {
        opacity: 0;
        translate: 0 16px;
    }

    .rv-mega-subs li {
        opacity: 0;
        translate: -12px 0;
    }
}

/* Al passaggio la sottocategoria si sposta di 6 px e mostra la freccia:
   con translate, che non sposta niente intorno. */
.rv-mega-subs a span,
.rv-mega-subs a .rv-ic {
    transition: color .2s ease, opacity .2s ease, translate .35s var(--rv-e-expo);
}

.rv-mega-subs a .rv-ic {
    translate: -10px 0;
}

.rv-mega-subs a:hover span {
    translate: 6px 0;
}

.rv-mega-subs a:hover .rv-ic {
    translate: 0 0;
}

.rv-velo {
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.rv-velo.rv-on {
    transition: opacity .3s ease, visibility 0s;
}

/* === passo 4: piè di pagina =========================================== */

/*
 * Il piè di pagina della grafica nuova (shop/g/piede.html.twig), su tutte le
 * pagine tranne il checkout: notte, a tutta larghezza (R3), con le classi
 * del mockup (ft-*) e il prefisso rv-.
 *
 * - Sta sulla notte: il fuoco e' bianco (2 px a 2 px di distanza, la regola
 *   di tutto il sito) e il testo #C9CDD4 fa 12,2:1 (TokenContrastTest).
 * - margin-top: auto lo tiene in fondo alle pagine corte, come il mt-auto
 *   del contenitore di Sylius che con la grafica nuova non c'e' piu': il
 *   corpo della pagina e' una colonna flex alta almeno quanto la finestra.
 * - Al telefono Ricambi, Vendere e Account sono tendine (<details>);
 *   Assistenza no, mai: "Segnala un contenuto illecito" si vede senza aprire
 *   niente (R2). Da 768 px in su le tendine sono aperte: le apre lo script,
 *   e il foglio ne mostra il contenuto gia' prima (::details-content), cosi'
 *   quando lo script arriva il piè non cambia altezza.
 */
.rv-ft {
    --rv-fuoco: #fff;
    margin-top: auto;
    padding-top: 72px;
    background: var(--rv-night);
    color: #C9CDD4;
    font-size: 14px;
    line-height: 1.5;
}

.rv-ft-g {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
}

.rv-ft-brand img {
    display: block;
    width: auto;
    height: 26px;
}

.rv-ft-brand p {
    max-width: 34ch;
    margin: 20px 0 0;
    font-size: 15px;
    line-height: 1.55;
}

.rv-ft-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}

/* I titoli delle colonne: il <summary> delle tendine e il paragrafo di
   Assistenza, uguali. Non sono titoli (SIT-20). */
.rv-ft-tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin: 0 0 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
    list-style: none;
}

.rv-ft-tit::-webkit-details-marker {
    display: none;
}

/* La freccia della tendina c'e' solo al telefono. */
.rv-ft-tit .rv-ic {
    display: none;
}

.rv-ft-col ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Collegamenti senza sottolineatura, con una riga che cresce al passaggio
   (mockup). La riga sta sotto il testo: il fondo parte dal contenuto
   (content-box), e il margine interno, che allarga la parte da toccare,
   resta fuori. */
.rv-ft a {
    color: inherit;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat content-box;
}

.rv-ft a:hover {
    color: #fff;
    background-size: 100% 1px;
}

.rv-ft-col a {
    display: inline-block;
    padding-block: 6px;
}

/* Le righe della societa', dei pagamenti e dei crediti. */
.rv-ft-bot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 32px;
    margin-top: 56px;
    padding-block: 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.rv-ft-bot p {
    margin: 0;
}

/* Nella riga della societa' la partita IVA, il REA e il capitale restano
   interi: "REA MO-450222" a 320 px si spezzava al trattino. L'indirizzo e
   il nome no: con il carattere di ripiego (Arial) "Viale Muratori 183,
   41124 Modena (MO)" e' piu' largo dei 280 px della riga. */
.rv-ft-societa span {
    white-space: nowrap;
}

@media (min-width: 768px) {
    /* Le tendine sono colonne aperte: il titolo non chiude (lo script ferma
       il clic e lo toglie dal giro di Tab), e il contenuto si vede anche
       prima che lo script le apra. Un browser che non conosce
       ::details-content scarta solo questa regola: le apre lo script. */
    .rv-ft-col::details-content {
        content-visibility: visible;
    }
}

@media (max-width: 1023px) {
    .rv-ft-g {
        grid-template-columns: minmax(0, 1fr);
    }

    .rv-ft-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .rv-ft-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .rv-ft-col {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .rv-ft-tit {
        min-height: 52px;
        margin: 0;
    }

    summary.rv-ft-tit {
        cursor: pointer;
    }

    .rv-ft-tit .rv-ic {
        display: block;
    }

    .rv-ft-col[open] > .rv-ft-tit .rv-ic {
        transform: rotate(180deg);
    }

    .rv-ft-col ul {
        padding-bottom: 12px;
    }

    /* 21 px di riga piu' 24: 45 px da toccare con il dito. */
    .rv-ft-col a {
        padding-block: 12px;
    }
}

.rv-ft a {
    transition: background-size .3s ease-out, color .3s;
}

.rv-ft-tit .rv-ic {
    transition: transform .35s var(--rv-e-expo);
}

/* Al telefono la tendina si apre e si chiude con l'altezza animata,
   dove il browser sa animare fino ad "auto". Il contenuto e' ritagliato
   mentre cambia altezza, con 8 px di margine (overflow-clip-margin): il
   contorno di fuoco dei collegamenti, 4 px fuori da loro, non si
   taglia. Dal passo M non piu' con un margine negativo e un margine
   interno uguali: il riquadro del contenuto saliva di 8 px sopra il
   fondo del titolo, e i 10 px in basso del titolo, a 400 px, non
   aprivano la tendina (il tocco cadeva sul <details>). */
@media (max-width: 767px) {
    @supports (interpolate-size: allow-keywords) {
        .rv-ft-col {
            interpolate-size: allow-keywords;
        }

        .rv-ft-col::details-content {
            height: 0;
            overflow: clip;
            overflow-clip-margin: 8px;
            transition: height .35s cubic-bezier(.2, .6, .4, 1), content-visibility .35s allow-discrete;
        }

        .rv-ft-col[open]::details-content {
            height: auto;
        }
    }
}

/* === passo 5.1: schede negli elenchi e scheda del pezzo ================ */

/*
 * Le schede dei ricambi negli elenchi (shop/prodotti/scheda.html.twig:
 * categorie, ricerca per veicolo e per codice, vetrina del venditore, "Altri
 * ricambi di ..." sotto la scheda) e la scheda del pezzo. Il mockup disegna
 * solo la home: qui si portano le regole della sua scheda d'annuncio
 * (inventario §2.7) sulle classi di oggi, senza cambiare i dati ne' l'ordine.
 * - Il nome del pezzo in Saira 700, negli elenchi e nell'H1 della scheda:
 *   e' la decisione D6 del committente (15/10/2026). Orbitron resta ai
 *   titoli di home, categorie e pagine informative. Lo tiene
 *   ProductTitleFontTest. Dal 21/10 (D6 corretta) le parole del nome che
 *   contengono una cifra sono in JetBrains Mono: sezione "passo 5.1b".
 * - Chi vende in meta; il veicolo dichiarato in rosso scuro su rosa, come
 *   la riga di compatibilita' del mockup; la condizione con i suoi colori
 *   (--rv-cond-*, dal codice in data-rv-condizione); il codice OE in
 *   JetBrains Mono; il prezzo in Saira 700 con le cifre tabellari;
 *   "Disponibile" in verde con il pallino.
 * - La foto resta 4:3. Le regole del 1b restano: niente esce dalla scheda
 *   (R1b-1), il codice OE si chiude con i puntini e il title lo porta
 *   intero.
 * - Le classi di Bootstrap delle etichette (rounded-pill, border,
 *   text-bg-light, fw-normal, text-decoration-none) hanno !important: per
 *   cambiarle serve anche qui, e solo dentro queste etichette.
 */

/* La scheda: il filo dei bordi del mockup. Al passaggio (1b) il bordo
   diventa ink e sale di 2 px (sotto). */
.rivendimi-scheda {
    border-color: var(--rv-line);
}

.rivendimi-scheda:hover {
    transform: none;
}

/* La foto: e' un collegamento, ma non si sottolinea (dal 1b i collegamenti
   lo sono, e "Foto non disponibile" sembrava un link a se'). Il grigio di
   rivendimi.css, al 45%, faceva 2,7:1 su surf: meta fa 5,3:1. Vale anche
   per la foto mancante della scheda del pezzo e delle miniature. */
.rivendimi-scheda__immagine {
    text-decoration: none;
}

.rivendimi-scheda__vuota {
    color: var(--rv-meta);
}

/* Chi vende: in meta, come "Rivendimi · annuncio di esempio" nel mockup. In
   rivendimi.css era in maiuscolo al 50% del nero: 3,1:1. */
.rivendimi-scheda__venditore {
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--rv-meta);
}

/* Il nome del pezzo: Saira 700 (D6); i codici dentro il nome in JetBrains
   Mono (passo 5.1b). */
.rivendimi-scheda__titolo-testo {
    font-family: var(--rv-font-testo);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.rivendimi-scheda__titolo:hover {
    color: var(--rv-ink);
    text-decoration: underline;
}

/* Il veicolo dichiarato: rosso scuro su rosa (7,2:1; in rivendimi.css il
   grigio al 62% faceva 4,4:1, l'etichetta al 45% 2,7:1). Il fondo entra di
   mezzo rem nel margine interno della scheda da tutti e due i lati, cosi'
   il testo resta largo come prima: il taglio a tre righe
   (CompatibilityLineClampTest) e' stato misurato su quella larghezza. Solo
   l'etichetta "Compatibilita' dichiarata:" e' piu' marcata, a 500: a 600
   (il mockup) nella scheda stretta degli "Altri ricambi" a 360 px del
   veicolo si leggevano 6 caratteri in meno; a 500, da 320 a 1280 px, gli
   stessi di prima (lottoG/lavoro51/veicolo-*.txt). Il veicolo resta del
   peso di prima, per lo stesso motivo. */
.rivendimi-scheda__compatibilita-riga {
    margin-inline: -.5rem;
    padding: .375rem .5rem;
    background: var(--rv-rosa);
}

.rivendimi-scheda__compatibilita,
.rivendimi-scheda__compatibilita-altri,
.rivendimi-scheda__etichetta {
    color: var(--rv-red-dk);
}

.rivendimi-scheda__etichetta {
    font-weight: 500;
}

/* Il codice OE, negli elenchi e nella scheda del pezzo: una targhetta surf
   in JetBrains Mono, rettangolare come le etichette del mockup. Nella
   scheda del pezzo e' un collegamento alla ricerca per codice. Il carattere
   passa dalla variabile di Bootstrap: .font-monospace la legge con
   !important. */
.rivendimi-scheda__identificazione .badge.font-monospace,
[data-route="sylius_shop_product_show"] .badge.font-monospace {
    --bs-font-monospace: var(--rv-font-codice);
    border-color: transparent !important;
    border-radius: 0 !important;
    background-color: var(--rv-surf) !important;
    color: var(--rv-ink) !important;
    font-weight: 500 !important;
}

[data-route="sylius_shop_product_show"] a.badge.font-monospace:hover {
    text-decoration: underline !important;
}

/* La condizione: le quattro coppie del 1b, una per codice, in maiuscolo come
   nel mockup. Va a capo invece di chiudersi con i puntini: a 320 px "Usato,
   ottimo stato" non stava nella scheda (piano, passo 5.1, "Da sapere"). Una
   parola piu' larga dell'etichetta si spezza invece di chiudersi con i
   puntini: a 320 px, nella scheda stretta degli "Altri ricambi",
   "REVISIONARE" ci sta per 7 px di margine interno, non per 8. Un codice
   sconosciuto resta grigio. */
.badge[data-rv-condizione] {
    padding: .3125rem .4375rem;
    overflow-wrap: anywhere;
    text-overflow: clip;
    border-color: transparent !important;
    border-radius: 0 !important;
    background-color: var(--rv-surf) !important;
    color: var(--rv-ink) !important;
    font-size: .6875rem;
    font-weight: 700 !important;
    letter-spacing: .04em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
}

.badge[data-rv-condizione="nuovo"] {
    background-color: var(--rv-cond-nuovo) !important;
    color: var(--rv-cond-nuovo-testo) !important;
}

.badge[data-rv-condizione="usato_ottimo"] {
    background-color: var(--rv-cond-ottimo) !important;
    color: var(--rv-cond-ottimo-testo) !important;
}

.badge[data-rv-condizione="usato_buono"] {
    background-color: var(--rv-cond-usato) !important;
    color: var(--rv-cond-usato-testo) !important;
}

.badge[data-rv-condizione="da_revisionare"] {
    background-color: var(--rv-cond-revisione) !important;
    color: var(--rv-cond-revisione-testo) !important;
}

/* Nella scheda dell'elenco la condizione va a capo dentro il corpo: non
   entra nel margine interno come il codice (R1b-1). */
.rivendimi-scheda__identificazione .badge[data-rv-condizione] {
    max-width: 100%;
}

/* "Venditore privato" (shop/prodotti/scheda, sotto chi vende): rettangolare
   come le altre etichette, e va a capo dentro il corpo. Era una pillola che
   non andava a capo: a 320 px, nella scheda stretta degli "Altri ricambi",
   usciva di 9 px dal bordo. */
.rivendimi-scheda__venditore-natura .badge {
    max-width: 100%;
    border-radius: 0 !important;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
}

/* Il prezzo: Saira 700 a 21 px, cifre tabellari (mockup). Sotto i 360 px
   torna a 18 px, come prima: a 320 px, nella scheda stretta degli "Altri
   ricambi", un prezzo a sei cifre ("123.456,78 €", resa.js
   --schede-lunghe) a 21 px usciva di 5 px dal bordo. */
.rivendimi-scheda__prezzo {
    font-size: 1.3125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

@media (max-width: 359.98px) {
    .rivendimi-scheda__prezzo {
        font-size: 1.125rem;
    }
}

/* "Disponibile" con il pallino, negli elenchi e nella scheda del pezzo.
   "Esaurito" in meta: al 55% del nero faceva 3,6:1. */
.rivendimi-scheda__stato {
    font-size: .8125rem;
}

.rivendimi-scheda__stato::before,
.rivendimi-disponibilita__si::before,
.rivendimi-disponibilita__no::before {
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .4em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: .08em;
}

.rivendimi-disponibilita__no {
    color: var(--rv-meta);
}

/* La scheda del pezzo: il nome in Saira 700 (D6), non Orbitron; i codici
   dentro il nome in JetBrains Mono (passo 5.1b). */
[data-route="sylius_shop_product_show"] h1 {
    font-family: var(--rv-font-testo);
    font-weight: 700;
}

/* "Venduto da": in rivendimi.css al 50% del nero su surf, 3,0:1. */
.rivendimi-venditore-scheda__etichetta {
    color: var(--rv-meta);
}

/* "Compatibilita' dichiarata" della scheda del pezzo: le etichette dei
   veicoli in rosso scuro su rosa, come la riga delle schede; restano
   collegamenti alla ricerca per quel veicolo. */
.badge.rivendimi-badge-veicolo {
    border-color: transparent !important;
    border-radius: 0 !important;
    background-color: var(--rv-rosa) !important;
    color: var(--rv-red-dk) !important;
    font-weight: 600 !important;
}

a.badge.rivendimi-badge-veicolo:hover {
    text-decoration: underline !important;
}

/* Il movimento (§6: dal passo M sempre): la scheda sale di 2 px e la foto
   cresce del 3%, come l'icona delle schede del mockup. La foto non esce dal
   suo riquadro, che la ritaglia. */
.rivendimi-scheda:hover {
    transform: translateY(-2px);
}

.rivendimi-scheda__immagine img {
    transition: transform .4s cubic-bezier(.38, .41, .27, 1);
}

.rivendimi-scheda:hover .rivendimi-scheda__immagine img {
    transform: scale(1.03);
}

/* === passo 5.2: categorie, ricerca, titoli delle pagine informative ===== */

/*
 * Le pagine che il mockup non disegna e che la home manda a vedere: la
 * pagina di una categoria, la ricerca per veicolo e per codice (anche con
 * i risultati vuoti, la piu' vista), le pagine informative. Solo CSS, sul
 * markup di oggi; i ritocchi a 400 px della barra degli avvisi e della
 * tendina della ricerca in testa stanno nella sezione del passo 2a.
 */

/* --- I titoli delle pagine in Orbitron 800 (D6, R13) ------------------- */

/*
 * L'H1 delle categorie e delle pagine informative, al livello d2 del
 * mockup (come "Come si compra" in home): 26 px a 400, 39 a 1280. Le pagine
 * si scelgono con il data-route che base.html.twig mette sul <body>, e le
 * stesse rotte, una per una, hanno il preload di Orbitron nella
 * sovrascrittura di metatags: EditorialTitlesCssTest tiene uguali i due
 * elenchi. Il modulo della segnalazione ha due rotte, GET e POST: con un
 * errore torna dalla seconda. Nomi dei pezzi, ricerca, carrello, checkout e
 * area venditore restano in Saira (D6, ProductTitleFontTest).
 * Orbitron e' largo: il titolo va a capo bilanciato, e una parola che da
 * sola non sta nella riga va a capo dentro di se' (a 320 px nessuna di
 * oggi).
 */
[data-route="sylius_shop_product_index"] h1,
[data-route="rivendimi_shop_come_funziona"] h1,
[data-route="rivendimi_shop_faq"] h1,
[data-route="rivendimi_shop_contatti"] h1,
[data-route="rivendimi_shop_content_report"] h1,
[data-route="rivendimi_shop_content_report_submit"] h1,
[data-route="rivendimi_shop_content_report_receipt"] h1,
[data-route="rivendimi_shop_content_report_status"] h1 {
    font-family: var(--rv-font-titoli);
    font-size: clamp(26px, calc(20.43px + 1.429vw), 41px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* --- La pagina di una categoria ---------------------------------------- */

/*
 * Le due colonne sono quelle di Sylius (product/index/content/body*.html.twig,
 * impronte in CategoryPageLayoutTest): .row.mt-5 con la colonna di lato
 * (.col-lg-3: il riquadro "Cerca per veicolo" e le sottocategorie) e la
 * parte principale (.col-lg-9: titolo, descrizione, filtri, ricambi).
 *
 * Sotto i 992 px, dove le due colonne vanno una sotto l'altra, i ricambi
 * vengono prima: nell'ordine dell'HTML cominciavano dopo 1.400 px a 400.
 * reading-flow fa seguire lo stesso ordine a Tab e a chi legge lo schermo;
 * dove il browser non lo conosce seguono l'HTML, la colonna prima.
 *
 * Ma l'HTML arriva a pezzi, e il browser disegna quel che ha: se si ferma
 * dopo la colonna e prima della parte principale (lo script del riquadro
 * gli da' l'occasione), la colonna compare in cima e poi salta sotto i
 * ricambi, CLS 0,45-0,49 a 400 px (misurato nella copia, con l'HTML in due
 * pezzi: lavoro52/js/flusso.js; resa.js lo coglieva a caso). Finche' il piè
 * di pagina, che segue la parte principale, non e' arrivato, la colonna
 * resta al suo posto ma invisibile, e non conta come spostamento: nessun
 * salto. Dove :has non c'e' la regola cade, e resta l'ordine.
 *
 * Da 992 px la colonna con il riquadro e' larga almeno 320 px invece di un
 * quarto: con un quarto (216 px a 992, 261 a 1280) il campo del codice
 * teneva "es. 1K" e le tendine si chiudevano con i puntini. Con 320 la
 * tendina e' larga 248 px e tiene intero "Seleziona prima il modello" (192
 * px a 16 px), e la parte principale ha ancora tre ricambi per riga a 992
 * px. Solo con il riquadro: nelle categorie chiuse (Pneumatici, Cerchi,
 * Sensori TPMS) il riquadro non c'e' (decisione 24) e nella colonna resta
 * solo "Torna a Gommista". Li' la colonna resta un quarto, come prima del
 * passo: larga 320 toglieva alla parte principale 80 px a 992 e 35 a 1280
 * senza niente da metterci (rilievo R52-1). Dove :has non c'e', un quarto
 * dappertutto, come prima del passo.
 */
@media (max-width: 991.98px) {
    [data-route="sylius_shop_product_index"] .row.mt-5 {
        reading-flow: flex-visual;
    }

    [data-route="sylius_shop_product_index"] .row.mt-5 > .col-lg-3 {
        order: 1;
        margin-top: 40px;
    }

    [data-route="sylius_shop_product_index"]:not(:has(.rv-ft)) .row.mt-5 > .col-lg-3 {
        visibility: hidden;
    }
}

@media (min-width: 992px) {
    [data-route="sylius_shop_product_index"] .row.mt-5 > .col-lg-3:has(form[data-rivendimi-vehicle-search]) {
        width: max(320px, 25%);
    }

    [data-route="sylius_shop_product_index"] .row.mt-5 > .col-lg-9 {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* Le sottocategorie. Il titolo era al 50% del nero, 3,1:1 a 12 px: ora
   meta, 5,9:1. Al telefono e sul tablet le voci sono alte 44 px, come
   quelle del menu del telefono. */
.rivendimi-sfoglia__titolo {
    color: var(--rv-meta);
}

@media (max-width: 991.98px) {
    .rivendimi-sfoglia__voce {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-block: 0;
    }
}

/* La categoria vuota: il testo era al 68% del nero sul grigio, ora ink2
   (7,4:1 su surf). */
.rivendimi-vuoto__testo {
    color: var(--rv-ink2);
}

/* --- Il riquadro "Cerca per veicolo" ----------------------------------- */

/*
 * Il riquadro della colonna delle categorie e della pagina della ricerca
 * (shop/vehicle_search/widget.html.twig, markup di prima) prende lo stile
 * del pannello di ricerca della home (passo 3.1): il filo dei bordi, campi
 * alti 48 px con il bordo dei campi, etichette in grassetto, pulsanti neri
 * in maiuscoletto, il codice in JetBrains Mono con lo 0 puntato. Il titolo
 * del riquadro resta in Saira: Orbitron solo per i titoli delle pagine (D6).
 * Il riquadro si riconosce dal modulo che contiene (:has); il pannello della
 * home ha altre classi.
 */
.card:has(> .card-body > form[data-rivendimi-vehicle-search]) {
    --bs-card-border-color: var(--rv-line);
    --bs-card-spacer-y: 24px;
    --bs-card-spacer-x: 24px;
    /* Le utilita' text-secondary (introduzione, "oppure", aiuto) in ink2,
       come gli aiuti del pannello della home. */
    --bs-secondary-rgb: 74, 80, 92;
    --bs-secondary-color: var(--rv-ink2);
}

.card:has(> .card-body > form[data-rivendimi-vehicle-search]) .card-title {
    color: var(--rv-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.card:has(> .card-body > form[data-rivendimi-vehicle-search]) .card-title .icon {
    width: 22px;
    height: 22px;
}

.card:has(> .card-body > form[data-rivendimi-vehicle-search]) .form-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.card:has(> .card-body > form[data-rivendimi-vehicle-search]) .form-select {
    height: 48px;
    padding: 0 36px 0 12px;
    background-position: right 12px center;
    font-size: 16px;
}

/* Il campo del codice: JetBrains Mono come nel pannello della home. La
   classe font-monospace di Bootstrap ha !important e legge la variabile. */
form[data-rivendimi-oe-search] .form-control {
    --bs-font-monospace: var(--rv-font-codice);
    height: 48px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .02em;
}

form[data-rivendimi-oe-search] .form-control::placeholder {
    color: var(--rv-meta);
    opacity: 1;
}

/* I pulsanti come quelli del pannello della home: neri, alti 48 px, in
   maiuscoletto spaziato. Anche "Cerca" del codice, che era bordato. */
.card:has(> .card-body > form[data-rivendimi-vehicle-search]) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
}

form[data-rivendimi-oe-search] .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rv-ink);
    --bs-btn-border-color: var(--rv-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rv-ink-passaggio);
    --bs-btn-hover-border-color: var(--rv-ink-passaggio);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--rv-ink-passaggio);
    --bs-btn-active-border-color: var(--rv-ink-passaggio);
}

/* Il campo del codice e il suo pulsante a 8 px l'uno dall'altro, come nel
   pannello della home: attaccati, il contorno di fuoco del campo (2 px a 2
   px) cadeva sul pulsante nero, 1:1 (resa.js --fuoco). Il margine sinistro
   negativo che Bootstrap da' al pulsante di un input-group ha un selettore
   con cinque :not(): serve !important. */
form[data-rivendimi-oe-search] .input-group {
    gap: 8px;
}

form[data-rivendimi-oe-search] .input-group > .btn {
    margin-left: 0 !important;
}

/* Nella colonna stretta delle categorie: il pulsante del veicolo largo
   quanto il riquadro, e il campo del codice sopra il suo pulsante, largo
   quanto il riquadro (affiancati, a 1280 px il campo era largo 80 px).
   Lo stesso nella pagina della ricerca sotto i 576 px, come nel pannello
   della home al telefono: affiancati, accanto a "CERCA" (126 px), il
   segnaposto "es. 1K0 615 301 AA" (186 px) sta intero solo da 412 px.
   Costa 62 px: il riquadro della ricerca passa da 591 a 655 px a 400 e da
   613 a 678 a 320, e conteggio, avviso della ricerca vuota e ricambi
   scendono di altrettanto (il primo ricambio a 320 di 90 px: il titolo
   dei risultati, in grassetto, li' va a capo una volta in piu'). Lo dice
   il rilievo R52-2. Il committente ha scelto di stringere le spaziature
   del riquadro, senza cambiare l'ordine: sezione "passo 5.2b". */
[data-route="sylius_shop_product_index"] form[data-rivendimi-vehicle-search] .btn {
    width: 100%;
}

[data-route="sylius_shop_product_index"] form[data-rivendimi-oe-search] .input-group {
    flex-direction: column;
    align-items: stretch;
}

[data-route="sylius_shop_product_index"] form[data-rivendimi-oe-search] .input-group > .form-control,
[data-route="sylius_shop_product_index"] form[data-rivendimi-oe-search] .input-group > .btn {
    width: 100%;
}

@media (max-width: 575.98px) {
    [data-route="rivendimi_shop_vehicle_search"] form[data-rivendimi-oe-search] .input-group {
        flex-direction: column;
        align-items: stretch;
    }

    [data-route="rivendimi_shop_vehicle_search"] form[data-rivendimi-oe-search] .input-group > .form-control,
    [data-route="rivendimi_shop_vehicle_search"] form[data-rivendimi-oe-search] .input-group > .btn {
        width: 100%;
    }

    .card:has(> .card-body > form[data-rivendimi-vehicle-search]) {
        --bs-card-spacer-y: 20px;
        --bs-card-spacer-x: 20px;
    }
}

/* --- La pagina della ricerca per veicolo e per codice ------------------ */

/* Il riquadro in riga: marca, modello, versione e pulsante in quattro
   colonne solo da 1200 px. Fra 992 e 1199 px le colonne erano larghe 213
   px e "Seleziona prima il modello" si chiudeva con i puntini: due per
   riga, come da 768 px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    [data-route="rivendimi_shop_vehicle_search"] form[data-rivendimi-vehicle-search] .row > .col-lg-3 {
        width: 50%;
    }
}

/*
 * shop/vehicle_search/index.html.twig: titolo, riquadro, risultati. Il
 * titolo in Saira 700 (D6: la ricerca non e' fra le pagine con Orbitron);
 * il sottotitolo e il conteggio in ink2.
 */
[data-route="rivendimi_shop_vehicle_search"] h1 {
    font-weight: 700;
    letter-spacing: -.01em;
}

[data-route="rivendimi_shop_vehicle_search"] .container.my-4 {
    --bs-secondary-rgb: 74, 80, 92;
    --bs-secondary-color: var(--rv-ink2);
}

[data-route="rivendimi_shop_vehicle_search"] h2.h4 {
    font-weight: 700;
}

/*
 * Gli avvisi della ricerca vuota e della categoria vuota: erano il celeste
 * di Bootstrap. Ora surf con il filo ink a sinistra, come il riquadro "in
 * questa categoria non si vende" che li segue; il codice che non si puo'
 * cercare in rosa con il filo rosso scuro.
 */
[data-route="rivendimi_shop_vehicle_search"] .alert-info,
[data-route="sylius_shop_product_index"] .alert-info {
    --bs-alert-bg: var(--rv-surf);
    --bs-alert-color: var(--rv-ink);
    --bs-alert-border-color: var(--rv-surf);
    border-left: 4px solid var(--rv-ink);
}

[data-route="rivendimi_shop_vehicle_search"] .alert-warning {
    --bs-alert-bg: var(--rv-rosa);
    --bs-alert-color: var(--rv-ink);
    --bs-alert-border-color: var(--rv-rosa);
    border-left: 4px solid var(--rv-red-dk);
}

/* === passo 5.1b: codici nei nomi dei pezzi ============================ */

/*
 * D6 corretta dal committente (21/10/2026): i nomi dei pezzi restano in
 * Saira, ma le parole che contengono una cifra (i codici dentro il nome:
 * "0 986 494 O0O", "AX10", "F1AE0481", "2O1O-2016") sono in JetBrains Mono,
 * dove lo 0 ha il punto. In Saira 700 lo 0 e la O hanno la stessa forma, e
 * nessuna funzione di Saira li distingue (correzione R51-1 del passo 5.1).
 * Lo span lo mette shop/g/pezzo/nome.html.twig, ovunque la vetrina stampa il
 * nome di un pezzo: H1 e briciole di pane della scheda, briciole delle
 * recensioni, schede degli elenchi e schede di serie di Sylius, carrello e
 * carrello laterale, riepiloghi del checkout, ordine nell'area personale. Lo
 * tiene PartNameCodesTest. Dalla stessa riga d'ordine passa anche il
 * dettaglio di un ordine nell'area venditore, che MarketplacePlugin rende
 * con gli hook sylius_shop.shared.order.show; il resto dell'area venditore
 * (magazzino, elenco degli ordini, messaggi, restrizioni) resta senza, fino
 * al passo 5.3.
 * - JetBrains Mono 500, l'unico peso servito, come il codice OE e i codici
 *   del mockup (.cod), qualunque sia il peso del nome intorno: il codice e'
 *   piu' leggero del nome nell'H1 della scheda e nelle schede degli elenchi
 *   (Saira 700), uguale nelle righe d'ordine, nei riepiloghi del checkout e
 *   nelle schede di serie (500), piu' pesante nelle briciole di pane (400).
 *   Il peso e' da far vedere al committente (lottoG/passi/5.1b/pesi/ e
 *   lottoG/passi/5.1b-corr/pesi/); un grassetto, se lo sceglie, andrebbe
 *   solo dove il nome e' a 700, non su .rv-nome-codice dappertutto.
 * - A .94em, come i codici del mockup: le maiuscole e le cifre di JetBrains
 *   Mono (73-74 su 100) arrivano all'altezza di quelle di Saira (69-70), e
 *   il codice sta sulla riga del nome senza alzarla.
 * - Niente legature (JetBrains Mono ne ha per "->", "!=", "www"...): il
 *   codice si legge carattere per carattere.
 * Colore, interlinea e a capo sono quelli del nome che lo contiene.
 */
.rv-nome-codice {
    font-family: var(--rv-font-codice);
    font-size: .94em;
    font-weight: 500;
    font-variant-ligatures: none;
}

/* === passo 5.2b: il riquadro della pagina della ricerca al telefono === */

/*
 * Rilievo R52-2 e decisione del committente del 21/10: nella pagina della
 * ricerca, sotto i 576 px, il riquadro "Cerca per veicolo" del passo 5.2 e'
 * 64 px piu' alto di prima (il campo del codice sopra il suo pulsante, come
 * nel pannello della home), e conteggio, avviso della ricerca vuota e
 * ricambi scendono di altrettanto. Si stringono le spaziature del riquadro,
 * senza cambiare l'ordine: il margine interno sopra e sotto da 20 a 16 px,
 * sotto l'introduzione da 16 a 12, sopra e sotto "oppure" da 16 a 12.
 * Venti px in tutto: a 400 px il riquadro passa da 655 a 635 px, a 320 da
 * 678 a 658, e quel che segue sale di altrettanto. I lati restano a 20 px,
 * i campi a 48 e lo spazio fra campo e pulsante a 8 (il contorno di fuoco).
 * Solo nella pagina della ricerca: nella colonna delle categorie il
 * riquadro viene dopo i ricambi (passo 5.2) e resta com'e'. I margini
 * dell'introduzione e di "oppure" sono utilita' di Bootstrap (mb-3, my-3)
 * con !important: serve anche qui.
 */
@media (max-width: 575.98px) {
    [data-route="rivendimi_shop_vehicle_search"] .card:has(> .card-body > form[data-rivendimi-vehicle-search]) {
        --bs-card-spacer-y: 16px;
    }

    [data-route="rivendimi_shop_vehicle_search"] .card:has(> .card-body > form[data-rivendimi-vehicle-search]) > .card-body > p {
        margin-bottom: 12px !important;
    }

    [data-route="rivendimi_shop_vehicle_search"] .card:has(> .card-body > form[data-rivendimi-vehicle-search]) > .card-body > .my-3 {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
}

/* === passo M: il movimento sempre attivo ============================== */

/*
 * Decisione del committente del 21/10 ("Movimento"), contro la
 * raccomandazione (solo dissolvenze): con "Riduci movimento" acceso sul
 * dispositivo le animazioni restano, come "Sempre attivo" nel mockup. Da
 * questo passo nessun foglio -g guarda prefers-reduced-motion: le
 * transizioni e le animazioni dei passi prima, che stavano dentro
 * @media (prefers-reduced-motion: no-preference), valgono sempre, e la
 * sezione finale che le spegneva non c'e' piu'. Lo tiene MotionGuardTest.
 *
 * Restano (piano §6):
 * - i pulsanti di pausa di cio' che si muove da solo (WCAG 2.2.2): la barra
 *   degli avvisi, il nastro, la presentazione e i due video; la pausa si
 *   ricorda (localStorage) nelle pagine e nelle visite dopo;
 * - niente si muove da solo senza script (senza script non c'e' la pausa);
 * - senza video il risparmio dati e var/grafica-senza-video.
 *
 * Bootstrap spegne le sue transizioni con "Riduci movimento": qui tornano
 * quelle dei componenti che la vetrina usa (pulsanti, campi, fisarmoniche,
 * tendine che si aprono, schede, carrello laterale, finestre, paginazione),
 * con i valori del suo foglio. Senza la preferenza non cambia niente: sono
 * gli stessi. La sezione sta prima delle animazioni del mockup, che per i
 * pulsanti neri e col bordo aggiungono la corsa del fondo. Restano come
 * sono: lo scorrimento morbido di Bootstrap, solo senza la preferenza, come
 * nel mockup; le regole di Bootstrap che spengono le transizioni in altri
 * casi (.navbar-expand-* .offcanvas), piu' specifiche; e caroselli,
 * cursori, indicatori di caricamento e barre a strisce, che la vetrina non
 * usa.
 */
.btn {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control,
.form-select {
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::file-selector-button {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-switch .form-check-input {
    transition: background-position .15s ease-in-out;
}

.form-floating > label {
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.fade {
    transition: opacity .15s linear;
}

.collapsing {
    transition: height .35s ease;
}

.collapsing.collapse-horizontal {
    transition: width .35s ease;
}

.nav-link {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.navbar-toggler {
    transition: var(--bs-navbar-toggler-transition);
}

.accordion-button {
    transition: var(--bs-accordion-transition);
}

.accordion-button::after {
    transition: var(--bs-accordion-btn-icon-transition);
}

.page-link {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.progress-bar {
    transition: var(--bs-progress-bar-transition);
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
}

.offcanvas,
.offcanvas-sm,
.offcanvas-md,
.offcanvas-lg,
.offcanvas-xl,
.offcanvas-xxl {
    transition: var(--bs-offcanvas-transition);
}

/* === passo M: le animazioni del mockup che mancavano ================== */

/*
 * Decisione del committente del 21/10 ("Animazioni mancanti"): le
 * animazioni del mockup che i passi prima non avevano fatto. Sul vivo il
 * pannello del menu del telefono compariva di colpo e niente compariva
 * scorrendo. Curve e durate del mockup (inventario §7): comparse 0,8 s piu'
 * 70 ms per elemento, menu 0,4 e 0,55 s, pulsanti 0,4 s.
 * - Il menu del telefono: il pannello scende dall'alto (clip-path, 0,55 s)
 *   e le categorie e i collegamenti entrano uno dopo l'altro (45 ms, dopo
 *   120); chiuso, risale in 0,4 s prima di sparire. Le classi le mette lo
 *   script (rv-mnav-entra, rv-mnav-chiude): riaperto, un <details> non fa
 *   ripartire un'animazione legata solo a [open]. Il pulsante torna le tre
 *   righe appena il pannello comincia a risalire, e la riga di mezzo si
 *   stringe sparendo, come nel mockup.
 * - Le categorie del menu del telefono si aprono con l'altezza animata,
 *   come le tendine del piè di pagina, dove il browser sa animare fino ad
 *   "auto". Il ritaglio lascia 8 px intorno (overflow-clip-margin): il
 *   contorno di fuoco dei collegamenti, 4 px fuori, non si taglia, e il
 *   pulsante della categoria resta tutto da toccare.
 * - Le comparse allo scorrimento: le nasconde solo lo script (rv-attesa,
 *   sezione "passo M" di rivendimi-g.js), solo quel che sta sotto la
 *   finestra e solo con IntersectionObserver; quando arrivano in vista
 *   compaiono (rv-entra), solo con l'opacita': niente si sposta. Senza
 *   script, e in stampa, si vede tutto.
 * - Al passaggio del mouse: i pulsanti neri si riempiono da sinistra di
 *   grigio scuro e quelli col bordo di nero (0,4 s), come .rv-btn della
 *   home e i pulsanti del mockup; sulla foto delle schede dei ricambi
 *   compare il quadrato nero con la freccia (0,2 s, la freccia cresce in
 *   0,4 s), come sulle schede d'annuncio del mockup; la sottolineatura dei
 *   collegamenti .rv-lnk si ispessisce in 0,2 s; le icone della riga
 *   compatta cambiano colore in 0,2 s. Nel menu dell'account (anche nelle
 *   pagine di chi vende: magazzino, modulo dell'annuncio, ordini) l'icona
 *   cresce del 12%, come le icone delle regole, e la sottolineatura
 *   compare in 0,2 s.
 * Con il dito i pulsanti non si riempiono al passaggio (hover: hover),
 * ma alla pressione e al fuoco si'. Il movimento vale sempre, anche con
 * "Riduci movimento" (sezione prima).
 */
:root {
    --rv-e-aos: cubic-bezier(.39, .575, .565, 1);
}

/* Le comparse: nascoste solo dallo script, mai in stampa. */
.rv-attesa {
    opacity: 0;
}

@media print {
    .rv-attesa {
        opacity: 1;
    }
}

/* Il pulsante del menu del telefono: la riga di mezzo si stringe sparendo,
   e tutto torna le tre righe appena il pannello comincia a risalire. */
.rv-mnav[open] .rv-burger i:nth-child(2) {
    transform: scaleX(.2);
}

.rv-mnav.rv-mnav-chiude .rv-burger i:nth-child(1) {
    top: 15px;
    transform: none;
}

.rv-mnav.rv-mnav-chiude .rv-burger i:nth-child(2) {
    opacity: 1;
    transform: none;
}

.rv-mnav.rv-mnav-chiude .rv-burger i:nth-child(3) {
    top: 27px;
    transform: none;
}

/* I pulsanti neri e quelli col bordo si riempiono da sinistra: il fondo e'
   una sfumatura netta larga tre volte il pulsante, ferma sulla parte del
   colore di sempre; al passaggio, alla pressione e al fuoco scorre sulla
   parte del colore del passaggio. Fermi, i pulsanti sono quelli di prima. */
.btn-primary,
.btn-outline-primary {
    background-size: 300% 100%;
    background-position: 100% 0;
}

.btn-primary {
    background-image: linear-gradient(104deg, var(--rv-ink-passaggio) 0 45%, var(--rv-ink) 55% 100%);
}

.rivendimi-venditori .btn-primary {
    background-image: linear-gradient(104deg, var(--rv-surf2) 0 45%, #fff 55% 100%);
}

.btn-outline-primary {
    background-image: linear-gradient(104deg, var(--rv-ink) 0 45%, rgba(255, 255, 255, 0) 55% 100%);
}

/* "Cerca" della ricerca per codice (categorie e ricerca) e' un pulsante col
   bordo che il foglio fa nero pieno (passo 5.2): corre come i pulsanti neri,
   dal suo nero al suo grigio del passaggio. Con la sfumatura dei pulsanti col
   bordo correva dal nero al nero: finito il passaggio era nero come da fermo,
   con un lampo grigio a destra (rilievo RM-2). Ogni pulsante che il foglio
   ricolora corre dal colore di sempre a quello del passaggio
   (MockupMotionTest). */
form[data-rivendimi-oe-search] .btn-outline-primary {
    background-image: linear-gradient(104deg, var(--rv-ink-passaggio) 0 45%, var(--rv-ink) 55% 100%);
}

.btn-primary:active,
.btn-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary:focus-visible {
    background-position: 0 0;
}

/* Col mouse il bordo si riempie solo con la sfumatura: il fondo pieno di
   Bootstrap coprirebbe la corsa. Con il dito resta il fondo pieno. */
@media (hover: hover) and (pointer: fine) {
    .btn-outline-primary {
        --bs-btn-hover-bg: transparent;
    }

    .btn-primary:hover,
    .btn-outline-primary:hover {
        background-position: 0 0;
    }
}

/* La freccia sulla foto delle schede dei ricambi: un quadrato nero che
   compare al passaggio e al fuoco della foto, come sulle schede del
   mockup. E' del collegamento della foto (::after), non si legge e non si
   tocca da sola. */
.rivendimi-scheda__immagine {
    position: relative;
}

.rivendimi-scheda__immagine::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background: var(--rv-ink) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.9%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 12h14M13 6l6 6-6 6%27/%3E%3C/svg%3E") center / 20px no-repeat;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.rivendimi-scheda:hover .rivendimi-scheda__immagine::after,
.rivendimi-scheda__immagine:focus-visible::after {
    opacity: 1;
    transform: none;
}

.rivendimi-scheda:hover .rivendimi-scheda__immagine::after {
    background-size: 24px;
}

/* Il menu dell'account: la sottolineatura che compare al passaggio (1b) ha
   il suo colore fin da subito, trasparente, cosi' puo' comparire piano. */
a.link-reset:has(> .icon) {
    text-decoration: underline;
    text-decoration-color: transparent;
}

a.link-reset:has(> .icon):hover {
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    a.link-reset:hover > .icon {
        transform: scale(1.12);
    }
}

/* Il menu del telefono. */
.rv-mnav.rv-mnav-entra .rv-mnav-pannello {
    animation: rv-mnav-apri .55s var(--rv-e-expo);
}

.rv-mnav.rv-mnav-chiude .rv-mnav-pannello {
    animation: rv-mnav-chiudi .4s var(--rv-e-expo) forwards;
}

.rv-mnav.rv-mnav-entra .rv-mnav-cat,
.rv-mnav.rv-mnav-entra .rv-mnav-links a {
    animation: rv-mnav-voce .5s var(--rv-e-expo) backwards;
    animation-delay: calc(var(--rv-i, 0) * 45ms + 120ms);
}

@keyframes rv-mnav-apri {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 -90px 0);
    }
}

@keyframes rv-mnav-chiudi {
    from {
        clip-path: inset(0 0 -90px 0);
    }

    to {
        clip-path: inset(0 0 100% 0);
    }
}

@keyframes rv-mnav-voce {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@supports (interpolate-size: allow-keywords) {
    .rv-mnav-cat {
        interpolate-size: allow-keywords;
    }

    .rv-mnav-cat::details-content {
        height: 0;
        overflow: clip;
        overflow-clip-margin: 8px;
        transition: height .35s cubic-bezier(.2, .6, .4, 1), content-visibility .35s allow-discrete;
    }

    .rv-mnav-cat[open]::details-content {
        height: auto;
    }
}

/* Le comparse. */
.rv-entra {
    animation: rv-comparsa .8s var(--rv-e-aos) calc(var(--rv-comparsa, 0) * 70ms) backwards;
}

@keyframes rv-comparsa {
    from {
        opacity: 0;
    }
}

/* Al passaggio. */
.btn-primary,
.btn-outline-primary {
    transition: color .4s ease, background-color .15s ease-in-out, background-position .4s ease-out, border-color .4s ease, box-shadow .15s ease-in-out;
}

.rivendimi-scheda__immagine::after {
    transition: opacity .2s ease-out, transform .2s ease-out, background-size .4s cubic-bezier(.38, .41, .27, 1);
}

.rv-lnk {
    transition: text-decoration-thickness .2s ease-out;
}

.rv-mini-ico,
.rv-mini-act .rv-hd-carrello {
    transition: color .2s ease;
}

a.link-reset:has(> .icon) {
    transition: color .2s ease, text-decoration-color .2s ease;
}

a.link-reset > .icon {
    transition: transform .3s ease-out;
}

/* === lotto V, passo V0a: icona del magazzino ========================== */

/*
 * "Il tuo magazzino" nell'intestazione, per chiunque abbia fatto l'accesso
 * (shop/g/intestazione/azioni.html.twig): un collegamento .rv-sell con
 * l'icona dello scaffale delle tavole e il testo in .rv-txt.
 * - Da 1024 px in su e' testo rosso scuro, come era "Vendi su Rivendimi" (e
 *   prima "Area venditore"), senza icona.
 * - Sotto i 1024 px "Vendi su Rivendimi" passa nel menu del telefono, ma
 *   "Il tuo magazzino" resta: un'icona da 44 px accanto a quella
 *   dell'account, dello stesso colore; il testo non si vede e resta il nome
 *   del collegamento (la regola di .rv-txt del passo 2a). Con tre icone le
 *   caselle da 44 px si toccano, senza spazio fra loro, come le tre icone
 *   dell'intestazione del telefono nelle tavole (.hd-act con gap 0): fra un
 *   disegno e l'altro restano 24 px, e il logo ha 8 px in piu' (a 360 px
 *   largo 128 invece di 120). Chi non ha fatto l'accesso ha due icone e lo
 *   spazio di prima.
 * - Al passaggio del mouse e alla pressione l'icona cresce del 12% in 0,3 s,
 *   come le icone del menu dell'area personale (passo M); con il dito,
 *   dove il passaggio non c'e', alla pressione. Movimento sempre attivo:
 *   nessuna regola guarda prefers-reduced-motion (MotionGuardTest).
 */
.rv-hd-act .rv-hd-magazzino .rv-ic {
    display: none;
    transition: transform .3s ease-out;
}

.rv-hd-act .rv-hd-magazzino:active .rv-ic {
    transform: scale(1.12);
}

@media (hover: hover) and (pointer: fine) {
    .rv-hd-act .rv-hd-magazzino:hover .rv-ic {
        transform: scale(1.12);
    }
}

@media (max-width: 1023px) {
    .rv-hd-act:has(> .rv-hd-magazzino) {
        gap: 0;
    }

    .rv-hd-act .rv-sell.rv-hd-magazzino {
        display: inline-flex;
    }

    .rv-hd-act .rv-sell.rv-hd-magazzino,
    .rv-hd-act .rv-sell.rv-hd-magazzino:hover {
        color: var(--rv-ink);
    }

    .rv-hd-act .rv-hd-magazzino .rv-ic {
        display: block;
    }
}

/* === lotto V, passo V0a: le pagine dell'ingresso ====================== */

/*
 * "Il tuo magazzino" per chi non ci entra ancora: il cliente senza
 * venditore ("Diventa venditore") e il venditore in esame
 * (shop/magazzino/_pagina.html.twig). L'H1 in Orbitron 800 al livello d2
 * delle tavole (.d .d2 di Venditore-magazzino), P6: solo il titolo della
 * pagina; il testo come il sottotitolo delle tavole (.pg-hd p), in Saira,
 * 17 px e 16 px al telefono, largo al massimo 62 caratteri.
 */
.rv-v-titolo {
    margin: 0;
    font-family: var(--rv-font-titoli);
    font-size: clamp(26px, calc(20.43px + 1.429vw), 41px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.rv-v-testo {
    max-width: 62ch;
    margin: 10px 0 24px;
    color: var(--rv-ink2);
    font-size: 17px;
}

.rv-v-testo strong {
    color: var(--rv-ink);
}

@media (max-width: 767px) {
    .rv-v-testo {
        font-size: 16px;
    }
}

/* === lotto V, passo V0b: il riquadro del magazzino nell'area personale = */

/*
 * "Il tuo magazzino" in "Il tuo account" (shop/magazzino/
 * riquadro_account.html.twig), subito sotto il titolo della pagina. E' la
 * fascia B delle tavole (.fb e .fb-t di Venditore-magazzino): fondo
 * --rv-surf, 22 px sopra e 24 ai lati e sotto; il titolo (H2) in Saira 700,
 * 14 px, in maiuscolo con la spaziatura dell'8%, e il quadratino rosso da
 * 10 px davanti. Il testo come quello delle pagine dell'ingresso (V0a), a
 * 16 px. Il pulsante e' il .btn-primary della grafica nuova: al passaggio si
 * riempie da sinistra (passo M), anche con "Riduci movimento". Al telefono
 * il riquadro esce fino ai bordi della colonna, come la fascia B delle
 * tavole sotto i 768 px, e il pulsante prende tutta la larghezza.
 */
.rv-v-riquadro {
    margin-top: 20px;
    background: var(--rv-surf);
}

.rv-v-riquadro-corpo {
    padding: 22px 24px 24px;
}

.rv-v-riquadro-titolo {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 14px;
    color: var(--rv-ink);
    font-family: var(--rv-font-testo);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rv-v-riquadro-titolo::before {
    flex: none;
    width: 10px;
    height: 10px;
    background: var(--rv-red);
    content: "";
}

.rv-v-riquadro-testo {
    max-width: 62ch;
    margin: 0 0 18px;
    color: var(--rv-ink2);
    font-size: 16px;
}

.rv-v-riquadro-testo strong {
    color: var(--rv-ink);
}

@media (max-width: 767px) {
    .rv-v-riquadro {
        margin-inline: calc(var(--bs-gutter-x, 24px) * -.5);
    }

    .rv-v-riquadro-corpo {
        padding: 18px calc(var(--bs-gutter-x, 24px) * .5) 20px;
    }

    .rv-v-riquadro .btn {
        width: 100%;
    }
}

/* === lotto V, passo V1a: "IVA compresa, se dovuta" accanto ai prezzi ==== */

/*
 * La frase accanto al prezzo di un pezzo (shop/prezzo/iva.html.twig, P4),
 * disegnata come la .iva delle tavole Scheda, Categoria e Ricerca: 13 px,
 * peso 500, colore meta, senza andare a capo dentro la frase; 15 px accanto
 * al prezzo grande della scheda del pezzo (.sk-pr .iva). Nelle celle delle
 * tabelle e nelle schede di serie sta sotto il prezzo (d-block) e puo'
 * andare a capo, perche' le colonne del prezzo sono strette. Nella scheda
 * del pezzo la riga del prezzo si allinea sulla linea di base, come .sk-pr.
 * Le classi di Bootstrap del markup (fw-normal, text-body-secondary) hanno
 * !important, che serve anche qui.
 */
.rivendimi-iva {
    font-size: .8125rem;
    font-weight: 500 !important;
    color: var(--rv-meta) !important;
    font-variant-numeric: normal;
    letter-spacing: 0;
    white-space: nowrap;
}

.rivendimi-iva--scheda {
    font-size: .9375rem;
}

.rivendimi-iva--sotto {
    margin-top: 2px;
    line-height: 1.3;
    white-space: normal;
}

.d-flex:has(> .rivendimi-iva--scheda) {
    align-items: baseline !important;
}

/* === lotto V, passo V1b: i moduli al telefono, "Elimina" con la conferma = */

/*
 * "Annulla" in fondo al modulo del pezzo e del profilo
 * (shop/magazzino/pulsanti_modulo.html.twig): come .lnk della barra della
 * tavola Venditore-carica (.azbar .lnk), Saira 600, sottolineato a 5 px
 * dal testo, e al passaggio la sottolineatura si ispessisce in 0,2 s. Al
 * telefono sta sotto "Salva modifiche", al centro. La disposizione la fanno
 * le classi di Bootstrap del template, e l'altezza di 44 px per il dito
 * rivendimi.css: uguali con le due grafiche, e qui non si toccano.
 */
.rv-v-pulsanti .rv-v-annulla {
    color: var(--rv-ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color .15s ease-in-out, text-decoration-thickness .2s ease-out;
}

.rv-v-pulsanti .rv-v-annulla:hover {
    color: var(--rv-ink);
    text-decoration-thickness: 2px;
}

/*
 * "Eliminare «…» dal magazzino?" (shop/magazzino/elimina.html.twig): il
 * foglio "Elimina" della tavola Venditore-magazzino fatto pagina. La domanda
 * come il titolo del foglio (.sh h2): Saira 700, interlinea 1,3, 24 px e 20
 * px al telefono; non in Orbitron (P6), perche' dentro c'e' il nome del
 * pezzo, con i codici in JetBrains Mono. Un nome lungo senza spazi va a
 * capo dove serve.
 */
.rv-v-domanda {
    margin: 0;
    font-family: var(--rv-font-testo);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .rv-v-domanda {
        font-size: 20px;
    }
}

/*
 * "Elimina" e' il .btn-danger della tavola: rosso scuro, e al passaggio, alla
 * pressione e al fuoco si riempie da sinistra del rosso piu' scuro, come i
 * pulsanti neri (passo M). Fermo, e' il rosso di sempre. In Saira 600 come
 * "Salva modifiche" e gli altri pulsanti principali. "Annulla" accanto e' il
 * pulsante col bordo (.btn-outline-primary, .btn-line della tavola), che
 * corre gia' dal passo M.
 */
.rv-v-elimina .btn-danger {
    font-weight: 600;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--rv-red-dk);
    --bs-btn-border-color: var(--rv-red-dk);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6E0008;
    --bs-btn-hover-border-color: #6E0008;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6E0008;
    --bs-btn-active-border-color: #6E0008;
    --bs-btn-focus-shadow-rgb: 168, 0, 12;
    background-image: linear-gradient(104deg, #6E0008 0 45%, var(--rv-red-dk) 55% 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    transition: color .4s ease, background-color .15s ease-in-out, background-position .4s ease-out, border-color .4s ease, box-shadow .15s ease-in-out;
}

.rv-v-elimina .btn-danger:active,
.rv-v-elimina .btn-danger:focus-visible {
    background-position: 0 0;
}

@media (hover: hover) and (pointer: fine) {
    .rv-v-elimina .btn-danger:hover {
        background-position: 0 0;
    }
}