/* ============================================================
   PROD — Shop (Acquisti)
   ============================================================
   Namespace .ci-* isolato. Sostituisce i tre strati che vestivano
   il catalogo — le card e-commerce di style-workspaces.css, il
   blocco [data-acq-view="catalogo"] di style-overlays.css e la
   parte catalogo di css/acquisti-mobile.css — che spariscono
   nello stesso giro, non gli si affiancano.

   Un solo markup per tutte le larghezze: qui dentro non c'e' un
   ramo desktop e uno telefono, ci sono tre soglie sulla larghezza
   del workspace (non del viewport, perche' e' lo spazio vero che
   il contenuto ha a disposizione).

   I token vivono in :root (scuro) e :root[data-tema="chiaro"],
   come in css/distinta-base-module.css, e sono derivati dai
   canonici di style-core.css: qui non c'e' un solo colore cablato.
   ============================================================ */

:root {
    /* ── Tipografia ──
       Il mockup usa un monospaziato per codici articolo e conteggi.
       Stack di sistema: stessa texture, nessuna richiesta di rete. */
    --ci-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

    /* ── Raggi ── */
    --ci-r-lg: 14px;
    --ci-r-md: 11px;
    --ci-r-sm: 7px;

    /* ── Superfici ── */
    --ci-surface: var(--panel-bg);
    --ci-tint: var(--panel-soft);
    --ci-tint-2: color-mix(in srgb, var(--text-strong) 5%, var(--panel-bg));

    /* ── Testo ── */
    --ci-ink: var(--text-strong);
    --ci-muted: var(--text-secondary);
    /* Il livello piu' tenue porta comunque dei dati — i conteggi dei reparti,
       i pezzi in richiesta, il codice sotto una riga. Con --text-tertiary
       (0,42 di alpha) sta sotto 3:1 su tutte le superfici: qui vale meno del
       testo normale ma resta leggibile. */
    --ci-faint: color-mix(in srgb, var(--text-strong) 55%, transparent);

    /* ── Linee ── */
    --ci-line: color-mix(in srgb, var(--text-strong) 13%, transparent);
    --ci-line-soft: color-mix(in srgb, var(--text-strong) 7%, transparent);

    /* ── Accento ──
       --ci-accent-text e' l'arancio usato come testo: sul fondo scuro
       regge quello pieno, sulla carta serve la versione profonda. */
    --ci-accent: var(--accent);
    --ci-accent-hover: var(--accent-strong);
    --ci-accent-text: var(--accent);
    --ci-accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --ci-accent-border: color-mix(in srgb, var(--accent) 48%, transparent);
    --ci-on-accent: var(--accent-contrast);

    /* ── Stato ──
       Una richiesta e' aperta o chiusa: un colore solo, preso dal canonico
       di style-core.css come tutti gli altri qui dentro. */
    --ci-ok: var(--success);
    --ci-ok-soft: color-mix(in srgb, var(--success) 16%, transparent);

    /* ── La foto e il suo velo ──
       Sopra una foto il testo e' chiaro in tutti e due i temi, quindi
       questi non ruotano: prendono i token della sidebar, che sono fissi.
       Usare quelli generali qui darebbe inchiostro scuro su velo scuro. */
    --ci-shot: var(--sidebar-panel);
    --ci-shot-ink: var(--sidebar-ink);
    --ci-shot-muted: var(--sidebar-ink-soft);
    --ci-scrim: color-mix(in srgb, var(--sidebar-panel) 92%, transparent);
    --ci-shot-veil: color-mix(in srgb, var(--sidebar-panel) 58%, transparent);

    /* ── Colore di reparto ──
       Una sola tonalita' per sezione, passata inline come --ci-cat-h.
       Luminosita' e croma stanno qui perche' cambiano col tema: una
       tinta leggibile sul fondo scuro non lo e' sulla carta. */
    --ci-cat-l: 0.78;
    --ci-cat-c: 0.13;
    --ci-cat-h: 60;
    --ci-cat: oklch(var(--ci-cat-l) var(--ci-cat-c) var(--ci-cat-h));

    /* Altezza utile del workspace: serve al pannello richiesta, che e'
       appiccicato in alto e deve fermarsi al fondo dello schermo. */
    --ci-rda-max: calc(100vh
        - var(--desk-shell-edge, 12px) * 2
        - var(--desk-topbar-height, 64px)
        - var(--desk-shell-gap, 12px)
        - var(--desk-main-padding-y, 16px) * 2);
}

:root[data-tema="chiaro"] {
    --ci-accent-text: var(--accent-strong);
    --ci-cat-l: 0.55;
    --ci-cat-c: 0.15;
}

/* ============================================================
   GUSCIO — contenuto a sinistra, richiesta d'acquisto a destra
   ============================================================ */

.ci-catalogo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    align-items: start;
    gap: 18px;
    font-family: var(--font-ui);
    color: var(--ci-ink);
}

.ci-catalogo *,
.ci-catalogo *::before,
.ci-catalogo *::after {
    box-sizing: border-box;
}

.ci-main {
    min-width: 0;
}

/* ============================================================
   TESTATA — una riga sola di comandi
   ============================================================
   Ne' occhiello ne' titolone: la topbar dell'app scrive gia'
   "Acquisti / Shop" due centimetri piu' su. E i
   reparti stanno nel menu dei filtri, non in una fila di
   pastiglie: in un tenant con dodici reparti quella fila era
   una seconda riga di comandi larga quanto la pagina.
   ============================================================ */

.ci-hero {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ci-line-soft);
}

.ci-hero__azioni {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.ci-search {
    flex: 1 1 240px;
    max-width: 420px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    background: var(--ci-tint);
    border: 1px solid var(--ci-line);
    border-radius: 10px;
    transition: border-color 0.15s ease;
}

.ci-search:focus-within {
    border-color: var(--ci-accent-border);
}

.ci-search__icon {
    font-size: 13px;
    color: var(--ci-faint);
}

.ci-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--ci-ink);
}

.ci-search__input::placeholder {
    color: var(--ci-faint);
}

.ci-search__input::-webkit-search-cancel-button {
    display: none;
}

.ci-search__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-strong) 12%, transparent);
    color: var(--ci-muted);
    font-size: 11px;
    cursor: pointer;
}

.ci-search--piena .ci-search__clear {
    display: inline-flex;
}

.ci-search__clear:hover {
    background: color-mix(in srgb, var(--text-strong) 20%, transparent);
    color: var(--ci-ink);
}

/* ── Bottoni ──
   La forma e' quella dei moduli gia' rifatti (.bom-btn in
   css/distinta-base-module.css): rettangolo con angoli da 10px, alto 40,
   testo in grassetto. Prima erano pastiglie completamente tonde, e in mezzo
   al resto di PROD stonavano. */

.ci-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--ci-line);
    border-radius: 10px;
    background: var(--ci-surface);
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ci-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.ci-btn-ghost:hover {
    background: var(--ci-tint);
    border-color: var(--ci-line);
    color: var(--ci-ink);
}

.ci-btn-ghost.is-attivo {
    border-color: var(--ci-accent-border);
    color: var(--ci-accent-text);
}

.ci-btn-ghost i {
    font-size: 0.95rem;
}

/* Il carrello: sul computer la richiesta e' gia' il pannello fisso a destra,
   quindi qui non serve un tasto per aprirla. */
.ci-btn-carrello {
    display: none;
}

.ci-btn-nuovo {
    border-color: transparent;
    background: var(--ci-accent);
    color: var(--ci-on-accent);
}

.ci-btn-nuovo:hover {
    background: var(--ci-accent-hover);
    border-color: transparent;
    color: var(--ci-on-accent);
}

.ci-btn-elimina {
    display: none;
    border-color: color-mix(in srgb, var(--error) 45%, transparent);
    color: var(--error);
}

.ci-btn-elimina:hover {
    background: color-mix(in srgb, var(--error) 12%, transparent);
    border-color: color-mix(in srgb, var(--error) 60%, transparent);
    color: var(--error);
}

.ci-catalogo.is-selezione .ci-btn-elimina {
    display: inline-flex;
}

/* Compare solo mentre si cerca dal telefono: sul computer la ricerca
   non e' una schermata da cui uscire, filtra la griglia sul posto. */
.ci-hero__annulla {
    display: none;
    border: 0;
    background: transparent;
    padding: 0 4px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ci-accent-text);
    cursor: pointer;
}

/* ── Filtri: reparti e fornitori, in un menu solo ── */

.ci-filtri {
    position: relative;
    display: inline-flex;
}

.ci-filtri__pannello {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    display: none;
    width: 268px;
    /* Su uno schermo corto 420px sarebbero mezza pagina: il tetto piu' basso
       dei due vince, e in ogni caso l'elenco scorre invece di tagliarsi. */
    max-height: min(420px, 60dvh);
    overflow-y: auto;
    padding: 6px;
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-md);
    box-shadow: var(--elev-3);
}

.ci-filtri.is-aperto .ci-filtri__pannello {
    display: block;
}

.ci-filtri__gruppo + .ci-filtri__gruppo {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ci-line-soft);
}

.ci-filtri__titolo {
    padding: 4px 8px 8px;
    font-family: var(--ci-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-faint);
}

/* Stessa storia della casella sulla card: e' un <label> con dentro una casella,
   quindi workspace-responsive.css gli imporrebbe `display: inline-flex` e le voci
   smetterebbero di essere righe a tutta larghezza. Il pannello davanti pareggia la
   specificita'. */
.ci-filtri__pannello .ci-filtri__voce {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--ci-r-sm);
    font-size: 13px;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-filtri__voce:hover {
    background: var(--ci-tint);
    color: var(--ci-ink);
}

/* Un glifo solo per riga. Prima ce n'erano due — la casella disegnata dal
   sistema piu' il quadratino del colore reparto — e sul telefono in tema chiaro
   la casella usciva nera, perche' come la disegna iOS non lo decidiamo noi.
   Ora la casella e' il quadratino: vuota col bordo nel colore del reparto
   quando il filtro e' spento, piena con la spunta quando e' acceso. Per i
   fornitori --ci-cat non e' impostata e ricade sull'accento. */
.ci-filtri__voce input {
    appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--ci-cat);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease;
}

.ci-filtri__voce input:checked {
    background: var(--ci-cat);
}

/* La spunta prende il fondo del pannello, non un colore fisso: --ci-cat e'
   chiara col tema scuro e scura col tema chiaro, quindi un segno fisso
   sparirebbe in uno dei due. --ci-surface va nella direzione opposta da solo. */
.ci-filtri__voce input:checked::after {
    content: '';
    width: 9px;
    height: 5px;
    border: 2px solid var(--ci-surface);
    border-top: 0;
    border-right: 0;
    transform: translateY(-1px) rotate(-45deg);
}

.ci-filtri__voce:has(input:checked) {
    color: var(--ci-ink);
    font-weight: 600;
}

.ci-filtri__nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-filtri__n {
    font-family: var(--ci-mono);
    font-size: 10px;
    color: var(--ci-faint);
}

.ci-filtri__vuoto {
    padding: 4px 8px 8px;
    font-size: 12.5px;
    color: var(--ci-faint);
}

/* Compare solo quando c'e' qualcosa da togliere: un tasto che non fa niente
   occupa una riga per dirlo. */
.ci-filtri__azzera {
    display: none;
    width: 100%;
    margin-top: 8px;
    padding: 9px;
    border: 0;
    border-top: 1px solid var(--ci-line-soft);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-accent-text);
    cursor: pointer;
}

.ci-filtri__pannello:has(input:checked) .ci-filtri__azzera {
    display: block;
}

/* Tre numeri che dicono cosa sta facendo la pagina — filtri accesi, articoli
   selezionati, articoli in richiesta — quindi una pastiglia sola, `.ci-conta`.
   Le classi specifiche restano accanto perche' le legge la logica, ma il
   vestito e la regola che li salva sul telefono passano da qui: senza una
   classe comune ogni numero nuovo avrebbe aggiunto un :not() alla regola che
   spegne le scritte, e ogni :not() pesa come una classe — la corsa alla
   specificita' aveva gia' spento due volte la scritta di "Nuovo".
   A vuoto la pastiglia non c'e': la sua comparsa e' gia' la conferma che
   l'articolo e' entrato nel carrello. */
.ci-conta:empty {
    display: none;
}

.ci-conta {
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--ci-accent);
    font-family: var(--ci-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--ci-on-accent);
}

/* ── Ricerche recenti: pastiglie, solo nello stato di ricerca del telefono ── */

.ci-recente {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--radius-pill);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-recente:hover {
    border-color: var(--ci-line);
    color: var(--ci-ink);
}

/* ============================================================
   REPARTI
   ============================================================ */

.ci-body {
    padding-top: 20px;
}

.ci-group {
    margin-bottom: 26px;
}

.ci-group:last-child {
    margin-bottom: 0;
}

.ci-group[hidden] {
    display: none;
}

.ci-group__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.ci-group__rule-start {
    width: 24px;
    height: 3px;
    flex: none;
    border-radius: 2px;
    background: var(--ci-cat);
}

.ci-group__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ci-ink);
}

.ci-group__n {
    font-family: var(--ci-mono);
    font-size: 10px;
    color: var(--ci-faint);
    white-space: nowrap;
}

.ci-group__rule {
    flex: 1;
    height: 1px;
    background: var(--ci-line-soft);
}

/* La misura e' quella della griglia precedente — minmax(195px) con 14 di gap:
   le tre colonne del mockup, su un workspace da 1050px, davano card da 340px,
   e un catalogo da trecento articoli diventava un rullo da scorrere. Con
   auto-fill le colonne le decide la larghezza, non un numero scritto qui. */
.ci-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

/* ============================================================
   MENU A TENDINA — uno solo, per la card e per il reparto
   ============================================================ */

.ci-menu {
    position: relative;
}

.ci-menu > summary {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    list-style: none;
    font-size: 12px;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-menu > summary::-webkit-details-marker {
    display: none;
}

.ci-menu > summary:hover {
    background: color-mix(in srgb, var(--text-strong) 10%, transparent);
    color: var(--ci-ink);
}

.ci-menu__body {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 178px;
    padding: 5px;
    background: var(--ci-surface);
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-md);
    box-shadow: var(--elev-3);
}

.ci-menu__voce {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: var(--ci-r-sm);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ci-ink);
    text-align: left;
    cursor: pointer;
}

.ci-menu__voce:hover {
    background: var(--ci-tint);
}

/* Sul computer questa voce sarebbe un doppione del "+" accanto al titolo, che
   li' c'e' e ci sta. Compare solo dove il "+" e' stato tolto. */
.ci-menu__voce--telefono {
    display: none;
}

.ci-menu__voce i {
    width: 14px;
    font-size: 12px;
    color: var(--ci-faint);
}

.ci-menu__voce.is-pericolo,
.ci-menu__voce.is-pericolo i {
    color: var(--error);
}

/* ============================================================
   CARD — foto a tutta card, dati sopra il velo
   ============================================================ */

.ci-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--ci-surface);
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-r-lg);
    overflow: hidden;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.ci-card:hover {
    border-color: var(--ci-line);
    transform: translateY(-2px);
}

.ci-card.is-nascosta {
    display: none;
}

.ci-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    /* Senza foto: righe diagonali, tenui in tutti e due i temi. */
    background: repeating-linear-gradient(
        135deg,
        var(--ci-tint-2) 0 7px,
        var(--ci-tint) 7px 14px
    );
    cursor: pointer;
}

.ci-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "Scatta foto" e' un invito, non una didascalia: sta al livello del testo
   normale, non a quello dei conteggi. */
.ci-card__vuoto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ci-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.ci-card__vuoto i {
    font-size: 20px;
}

/* Il velo sotto nome e fornitore: sopra una foto vera il testo chiaro
   deve reggere comunque, quindi il velo non ruota col tema. */
.ci-card__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, transparent 0%, var(--ci-scrim) 72%);
    pointer-events: none;
}

.ci-card__code {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 3px 7px;
    border-radius: 4px;
    font-family: var(--ci-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ci-cat);
    background: color-mix(in oklch, var(--ci-cat) 18%, var(--ci-shot));
}

.ci-card__caption {
    position: absolute;
    bottom: 11px;
    left: 12px;
    right: 12px;
}

.ci-card__name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.22;
    color: var(--ci-shot-ink);
    text-wrap: pretty;
}

.ci-card__supplier {
    margin-top: 3px;
    font-size: 11px;
    color: var(--ci-shot-muted);
}

/* Il prezzo sta sopra la foto come il nome, quindi prende l'inchiostro chiaro
   che non ruota col tema. Monospaziato perche' incolonna: scorrendo la griglia
   si confrontano numeri, e con la proporzionale ballerebbero. */
.ci-card__prezzo {
    margin-top: 4px;
    font-family: var(--ci-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-shot-ink);
}

/* Il menu della card sta dove il mockup mette la stella dei preferiti:
   quel dato non esiste, e queste sono le azioni che invece esistono. */
.ci-card__menu {
    position: absolute;
    top: 7px;
    right: 7px;
}

.ci-card__menu > summary {
    background: var(--ci-shot-veil);
    color: var(--ci-shot-muted);
}

.ci-card__menu > summary:hover {
    background: var(--ci-scrim);
    color: var(--ci-shot-ink);
}

/* La casella di selezione compare solo in modalita' selezione, e prende
   il posto del codice: in alto a sinistra, dove si guarda gia'.
   ──
   Il selettore e' volutamente sceso di un livello (.ci-catalogo davanti) per
   pareggiare quello dello stato acceso qui sotto. Sembra ridondante e non lo e':
   .ci-card__sel e' un <label> con dentro una casella, e css/workspace-responsive.css
   porta a 48px l'area di tocco di quella forma dichiarando anche
   `display: inline-flex`. Quella regola pesa (0,1,0) — :where() non conta — e il suo
   foglio si carica dopo questo: a specificita' pari vinceva lei, e la spunta restava
   visibile su ogni card anche fuori dalla selezione. Il difetto non stava nell'altro
   foglio, stava qui: le due facce della stessa decisione erano spaiate, (0,1,0)
   contro (0,2,0), e in quel dislivello si infilava una regola di passaggio.
   Se qualcuno "semplifica" togliendo .ci-catalogo, il difetto torna. */
.ci-catalogo .ci-card__sel {
    position: absolute;
    top: 7px;
    left: 7px;
    display: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ci-shot-veil);
    cursor: pointer;
}

.ci-catalogo.is-selezione .ci-card__sel {
    display: grid;
}

.ci-catalogo.is-selezione .ci-card__code,
.ci-catalogo.is-selezione .ci-card__menu {
    display: none;
}

.ci-card__sel input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--ci-accent);
    cursor: pointer;
}

/* ── Piede: quantita' e aggiunta ── */

.ci-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
}

.ci-qty {
    display: inline-flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--ci-line);
    border-radius: 9px;
    overflow: hidden;
}

.ci-qty__btn {
    width: 26px;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-qty__btn:hover {
    background: var(--ci-tint);
    color: var(--ci-ink);
}

.ci-qty__val {
    width: 30px;
    height: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--ci-mono);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    color: var(--ci-ink);
    -moz-appearance: textfield;
}

.ci-qty__val::-webkit-inner-spin-button,
.ci-qty__val::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.ci-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--ci-accent);
    border-radius: 9px;
    background: var(--ci-accent);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-on-accent);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.ci-btn:hover {
    background: var(--ci-accent-hover);
    border-color: var(--ci-accent-hover);
}

.ci-btn--in-lista {
    background: var(--ci-accent-soft);
    border-color: var(--ci-accent-border);
    color: var(--ci-accent-text);
}

.ci-btn--in-lista:hover {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--ci-accent-border);
    color: var(--ci-accent-text);
}

/* Etichetta sul computer, icona sul telefono, numero quando e' gia' in lista:
   tre pezzi nello stesso bottone, ne resta acceso uno per volta. */
.ci-btn__icona,
.ci-btn__n {
    display: none;
}

/* Il "+1" che sale quando si aggiunge: conferma senza spostare niente. */
.ci-add {
    position: relative;
}

.ci-piu-uno {
    position: absolute;
    top: -13px;
    right: 12px;
    font-family: var(--ci-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ci-accent-text);
    pointer-events: none;
    animation: ci-sale 0.9s ease-out forwards;
}

@keyframes ci-sale {
    0% { opacity: 0; transform: translateY(6px) scale(0.9); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-26px) scale(1); }
}

/* ============================================================
   STATI VUOTI
   ============================================================ */

.ci-vuoto {
    padding: 48px 24px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ci-muted);
}

.ci-vuoto i {
    display: block;
    margin-bottom: 12px;
    font-size: 30px;
    color: var(--ci-faint);
}

.ci-vuoto strong {
    color: var(--ci-ink);
}

/* ============================================================
   RICHIESTA D'ACQUISTO
   ============================================================
   Un elemento solo: colonna appiccicata a destra sul computer,
   foglio a tutta pagina sul telefono (le regole stanno in fondo).
   ============================================================ */

.ci-rda {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    max-height: var(--ci-rda-max);
    background: var(--ci-surface);
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-r-lg);
    overflow: hidden;
}

.ci-rda__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid var(--ci-line-soft);
}

.ci-rda__indietro {
    display: none;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: -6px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 15px;
    color: var(--ci-muted);
    cursor: pointer;
}

.ci-rda__titolo {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ci-ink);
}

.ci-rda__meta {
    margin-top: 3px;
    font-family: var(--ci-mono);
    font-size: 10px;
    color: var(--ci-faint);
}

.ci-rda__list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    overflow-y: auto;
}

.ci-line {
    display: flex;
    gap: 11px;
    padding: 11px;
    background: var(--ci-tint);
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-r-md);
}

.ci-line__thumb {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 8px;
    object-fit: cover;
    background: repeating-linear-gradient(
        135deg,
        var(--ci-tint-2) 0 5px,
        var(--ci-surface) 5px 10px
    );
}

.ci-line__body {
    flex: 1;
    min-width: 0;
}

.ci-line__top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ci-line__name {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ci-ink);
}

.ci-line__sub {
    margin-top: 2px;
    font-family: var(--ci-mono);
    font-size: 10px;
    color: var(--ci-faint);
}

.ci-line__via {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 11px;
    color: var(--ci-faint);
    cursor: pointer;
}

.ci-line__via:hover {
    background: color-mix(in srgb, var(--error) 14%, transparent);
    color: var(--error);
}

.ci-line__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

.ci-rda__vuoto {
    margin: auto;
    padding: 34px 18px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ci-faint);
}

/* L'importo della riga, accanto alla quantita': cambia mentre si tocca il
   +/- ed e' li' che si guarda. */
.ci-line__importo {
    font-family: var(--ci-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-ink);
    white-space: nowrap;
}

.ci-rda__foot {
    padding: 14px 16px;
    border-top: 1px solid var(--ci-line-soft);
    background: var(--ci-tint-2);
}

/* Il totale sopra "Invia richiesta": e' l'ultima cosa che si legge prima di
   premere, ed e' il motivo per cui i prezzi sono qui. */
.ci-rda__totale {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ci-rda__totale-voce {
    font-size: 13px;
    font-weight: 600;
    color: var(--ci-ink);
}

/* Se qualche riga non ha prezzo il totale lo dice, invece di far credere che
   sia la spesa completa. */
.ci-rda__totale-voce em {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 400;
    color: var(--ci-faint);
}

.ci-rda__totale-cifra {
    font-family: var(--ci-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--ci-ink);
    white-space: nowrap;
}

.ci-btn-primario {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--ci-accent);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ci-on-accent);
    cursor: pointer;
}

.ci-btn-primario:hover {
    background: var(--ci-accent-hover);
}

.ci-btn-primario:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ============================================================
   RISULTATI DI RICERCA — righe piene, solo sul telefono
   ============================================================ */

.ci-risultati {
    display: none;
    flex-direction: column;
    padding-top: 8px;
}

.ci-ris {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--ci-line-soft);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.ci-ris__thumb {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 10px;
    object-fit: cover;
    background: repeating-linear-gradient(
        135deg,
        var(--ci-tint-2) 0 6px,
        var(--ci-tint) 6px 12px
    );
}

.ci-ris__body {
    flex: 1;
    min-width: 0;
}

.ci-ris__name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ci-ink);
}

.ci-ris__sub {
    margin-top: 2px;
    font-family: var(--ci-mono);
    font-size: 10px;
    color: var(--ci-faint);
}

.ci-ris__cat {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
    background: var(--ci-cat);
}

.ci-recenti {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.ci-recenti__titolo {
    font-family: var(--ci-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ci-faint);
}

.ci-recenti__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   DETTAGLIO ARTICOLO — solo sul telefono
   ============================================================ */

.ci-dettaglio {
    display: none;
    flex-direction: column;
    min-height: 100%;
}

.ci-dett__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: repeating-linear-gradient(
        135deg,
        var(--ci-tint-2) 0 8px,
        var(--ci-tint) 8px 16px
    );
}

.ci-dett__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ci-dett__scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 48%;
    background: linear-gradient(180deg, transparent 0%, var(--ci-scrim) 88%);
    pointer-events: none;
}

.ci-dett__nav {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ci-dett__tondo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--ci-shot-veil);
    font-size: 15px;
    color: var(--ci-shot-ink);
    cursor: pointer;
}

.ci-dett__nav .ci-menu > summary {
    width: 42px;
    height: 42px;
    background: var(--ci-shot-veil);
    color: var(--ci-shot-ink);
    font-size: 15px;
}

.ci-dett__caption {
    position: absolute;
    bottom: 16px;
    left: 18px;
    right: 18px;
}

.ci-dett__cat {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 5px;
    font-family: var(--ci-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ci-cat);
    background: color-mix(in oklch, var(--ci-cat) 18%, var(--ci-shot));
}

.ci-dett__name {
    margin: 10px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--ci-shot-ink);
    text-wrap: pretty;
}

.ci-dett__dati {
    flex: 1;
    padding: 4px 18px 0;
}

.ci-dett__riga {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ci-line-soft);
}

.ci-dett__riga:last-child {
    border-bottom: 0;
}

.ci-dett__etichetta {
    font-size: 12.5px;
    color: var(--ci-muted);
}

.ci-dett__valore {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ci-ink);
    text-align: right;
}

.ci-dett__valore--mono {
    font-family: var(--ci-mono);
    font-weight: 500;
}

.ci-dett__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--ci-surface);
    border-top: 1px solid var(--ci-line-soft);
}

.ci-dett__foot .ci-btn {
    flex: 1;
    height: 48px;
    font-size: 14px;
}

/* ============================================================
   STATI DELLA PAGINA
   ============================================================
   Sul computer esiste solo la griglia: cercare filtra sul posto,
   la richiesta e' gia' a vista, e le azioni dell'articolo stanno
   tutte sulla card. Gli altri tre stati li accende il telefono.
   ============================================================ */

.ci-catalogo[data-ci-vista="ricerca"] .ci-body,
.ci-catalogo[data-ci-vista="richiesta"] .ci-body,
.ci-catalogo[data-ci-vista="dettaglio"] .ci-body {
    display: none;
}

.ci-catalogo[data-ci-vista="ricerca"] .ci-risultati {
    display: flex;
}

.ci-catalogo[data-ci-vista="ricerca"] .ci-hero__azioni {
    display: none;
}

.ci-catalogo[data-ci-vista="ricerca"] .ci-hero {
    border-bottom: 0;
}

.ci-catalogo[data-ci-vista="dettaglio"] .ci-hero {
    display: none;
}

.ci-catalogo[data-ci-vista="dettaglio"] .ci-dettaglio {
    display: flex;
}

/* ============================================================
   TABLET — pannello piu' stretto, tocco invece del mouse
   ============================================================
   Le colonne della griglia non si toccano: le conta auto-fill.
   Foto 4:3 invece di 1:1 (piu' colonne stanno nella stessa riga)
   e i comandi piccoli pensati per il mouse (32px) crescono per
   il dito, senza arrivare alla misura del telefono.
   ============================================================ */

/* ============================================================
   RICHIESTE INTERNE — la seconda faccia dello Shop
   ============================================================
   Stessa pagina, altro contenuto: quando sono aperte spariscono
   gli scaffali e la richiesta d'acquisto, e la colonna unica
   prende tutta la larghezza.

   Non e' uno stato del telefono — quelli stanno su data-ci-vista
   e sul computer sono forzati a "griglia". Questa vale a ogni
   larghezza, e per questo ha un attributo suo.
   ============================================================ */

.ci-ordini {
    display: none;
}

.ci-catalogo[data-ci-sezione="ordini"] {
    grid-template-columns: minmax(0, 1fr);
}

.ci-catalogo[data-ci-sezione="ordini"] .ci-hero,
.ci-catalogo[data-ci-sezione="ordini"] .ci-body,
.ci-catalogo[data-ci-sezione="ordini"] .ci-risultati,
.ci-catalogo[data-ci-sezione="ordini"] .ci-recenti,
.ci-catalogo[data-ci-sezione="ordini"] .ci-dettaglio,
.ci-catalogo[data-ci-sezione="ordini"] .ci-rda {
    display: none;
}

.ci-catalogo[data-ci-sezione="ordini"] .ci-ordini {
    display: block;
}

/* ── Testata ── */

.ci-ordini__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ci-line-soft);
}

.ci-ordini__indietro {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-md);
    background: var(--ci-tint);
    color: var(--ci-ink);
    font-size: 14px;
    cursor: pointer;
}

.ci-ordini__indietro:hover {
    background: var(--ci-tint-2);
}

.ci-ordini__id {
    flex: 1 1 auto;
    min-width: 0;
}

.ci-ordini__titolo {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--ci-ink);
}

.ci-ordini__meta {
    font-size: 12.5px;
    color: var(--ci-muted);
}

.ci-ordini__viste {
    display: flex;
    flex: none;
    gap: 4px;
    padding: 3px;
    border-radius: var(--ci-r-md);
    background: var(--ci-tint);
}

.ci-ordini__vista {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ci-r-sm);
    background: transparent;
    color: var(--ci-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.ci-ordini__vista.is-attiva {
    background: var(--ci-surface);
    color: var(--ci-ink);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text-strong) 10%, transparent);
}

.ci-ordini__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
}

/* ── Un invio: le righe partite insieme restano insieme ── */

.ci-gruppo {
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-lg);
    background: var(--ci-surface);
    overflow: hidden;
}

.ci-gruppo.is-completo {
    border-color: var(--ci-line-soft);
}

.ci-gruppo__testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ci-tint);
    cursor: pointer;
    list-style: none;
}

.ci-gruppo__testa::-webkit-details-marker {
    display: none;
}

.ci-gruppo__testa:hover {
    background: var(--ci-tint-2);
}

.ci-gruppo__chi {
    font-size: 13px;
    font-weight: 700;
    color: var(--ci-ink);
}

.ci-gruppo__quando {
    font-family: var(--ci-mono);
    font-size: 12px;
    color: var(--ci-faint);
}

.ci-gruppo__avanzamento {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ci-tint-2);
    color: var(--ci-muted);
    font-family: var(--ci-mono);
    font-size: 12px;
    font-weight: 700;
}

/* Il markup la scrive sempre, il foglio la mostra solo a gruppo chiuso: cosi'
   il disegno non deve conoscere lo stato per decidere cosa stampare. */
.ci-gruppo__fatto {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ci-ok-soft);
    color: var(--ci-ok);
    font-size: 11.5px;
    font-weight: 700;
}

.ci-gruppo.is-completo .ci-gruppo__fatto {
    display: inline-flex;
}

.ci-gruppo__freccia {
    margin-left: auto;
    font-size: 11px;
    color: var(--ci-faint);
    transition: transform 0.25s;
}

.ci-gruppo[open] .ci-gruppo__freccia {
    transform: rotate(180deg);
}

/* ── Una riga ── */

.ci-ordine {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid var(--ci-line-soft);
}

.ci-ordine.is-ordinato {
    background: var(--ci-ok-soft);
}

.ci-ordine__spunta {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: 2px solid var(--ci-line);
    border-radius: 50%;
    background: transparent;
    color: var(--ci-faint);
    font-size: 16px;
    cursor: pointer;
}

.ci-ordine__spunta:hover,
.ci-ordine.is-ordinato .ci-ordine__spunta {
    border-color: var(--ci-ok);
    color: var(--ci-ok);
}

/* Chi ha mandato la richiesta legge lo stato e non lo scrive: al posto del
   bottone un punto, che non invita a premere. */
.ci-ordine__punto {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--ci-line);
}

.ci-ordine.is-ordinato .ci-ordine__punto {
    background: var(--ci-ok);
}

.ci-ordine__foto {
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid var(--ci-line-soft);
    border-radius: var(--ci-r-sm);
    object-fit: cover;
}

.ci-ordine.is-ordinato .ci-ordine__foto {
    opacity: 0.5;
}

.ci-ordine__info {
    flex: 1 1 auto;
    min-width: 0;
}

.ci-ordine__nome {
    display: block;
    overflow: hidden;
    color: var(--ci-ink);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ci-ordine.is-ordinato .ci-ordine__nome {
    color: var(--ci-faint);
    text-decoration: line-through;
}

.ci-ordine__sub {
    font-size: 12px;
    color: var(--ci-faint);
}

.ci-ordine__badge {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--ci-tint-2);
    color: var(--ci-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ci-ordine.is-ordinato .ci-ordine__badge {
    background: var(--ci-ok-soft);
    color: var(--ci-ok);
}

@container app-workspace (max-width: 1180px) {
    .ci-catalogo {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 14px;
    }

    .ci-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }

    .ci-card__media {
        aspect-ratio: 4 / 3;
    }

    .ci-btn {
        height: 40px;
    }

    .ci-qty {
        height: 36px;
    }

    .ci-qty__btn {
        width: 32px;
    }
}

/* ============================================================
   TELEFONO — una colonna, richiesta a tutta pagina
   ============================================================ */

@container app-workspace (max-width: 768px) {
    .ci-catalogo {
        display: block;
    }

    /* css/workspace-responsive.css impone 48px di lato a ogni bottone e a ogni
       summary dentro .main-content, ed e' la soglia di tocco dell'app. Qui non
       la si contrasta: si dichiara la stessa misura anche sull'altro lato, cosi'
       i comandi restano quadrati invece di allungarsi solo in altezza. */
    .ci-menu > summary,
    .ci-search__clear,
    .ci-line__via,
    .ci-rda__indietro,
    .ci-dett__tondo {
        width: 48px;
        height: 48px;
    }

    /* Scritta col .ci-catalogo davanti come la regola base: quella dichiara 28px
       e ora pesa (0,2,0), quindi da qui a (0,1,0) la misura non arriverebbe e la
       spunta resterebbe larga 28 e alta 48 — stirata dal min-block-size di
       workspace-responsive.css. */
    .ci-catalogo .ci-card__sel {
        width: 48px;
        height: 48px;
    }

    /* Sulla card niente menu: e' un tondo da 48px su una foto larga 174, e le
       stesse voci stanno gia' nella scheda dell'articolo, a un tocco sulla foto.
       La casella resta nell'elenco qui sopra perche' in modalita' selezione 48px
       e' la misura giusta — fuori da quella modalita' non si vede affatto. */
    .ci-card__menu {
        display: none;
    }

    .ci-search__clear {
        background: transparent;
    }

    .ci-search {
        height: 52px;
    }

    .ci-qty {
        height: 48px;
    }

    .ci-qty__btn {
        width: 48px;
    }

    .ci-qty__val {
        width: 46px;
        font-size: 14px;
    }

    /* Stessa soglia di tocco degli altri tondi della pagina: la dichiara
       workspace-responsive.css su un lato solo, qui si pareggia l'altro. */
    .ci-ordini__indietro,
    .ci-ordine__spunta {
        width: 48px;
        height: 48px;
    }

    /* La testata va su due righe: i filtri sotto il titolo, larghi, invece di
       stringersi accanto a lui e finire a due parole per riga. */
    .ci-ordini__head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px 12px;
    }

    .ci-ordini__viste {
        grid-column: 1 / -1;
    }

    .ci-ordini__vista {
        flex: 1 1 0;
        justify-content: center;
        min-height: 48px;
    }

    /* La foto non serve a riconoscere una riga che porta gia' nome, quantita'
       e fornitore, e qui quei tre non ci stanno se il quadrato resta. */
    .ci-ordine__foto {
        display: none;
    }

    .ci-ordine {
        gap: 10px;
        padding: 10px 12px;
    }

    /* Sul telefono la ricerca prende la riga e le azioni scorrono sotto. */
    .ci-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding-bottom: 12px;
    }

    .ci-search {
        max-width: none;
    }

    /* I secondari tengono la sola icona, "Nuovo" la scritta. Con il comando
       delle richieste i tasti sono sei, e in 340px non ci stanno piu' su una
       riga sola: ne chiedono 383. Vanno a capo, non di lato — la riga che
       scorreva lasciava l'ultimo tasto tagliato a meta' parola sul bordo, e un
       comando fuori campo non lo cerca nessuno. A capo si vede.

       Allineati a destra e non sparsi: con `space-between` finivano contro i
       due bordi e sembravano scollegati fra loro. In fondo resta "Nuovo", che
       e' il primario. */
    .ci-hero__azioni {
        grid-column: 1 / -1;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 8px;
    }

    .ci-hero__azioni > * {
        flex: none;
    }

    /* Larghezza minima, non fissa: i comandi con la sola icona si assestano sui
       48px che workspace-responsive.css impone comunque, mentre quelli che
       portano anche un numero (Filtri, Sposta, il carrello) crescono quel tanto
       che basta invece di stringerlo fuori dal bordo. */
    .ci-btn-ghost {
        min-width: 48px;
        padding: 0 10px;
        gap: 5px;
    }

    /* Sul telefono la richiesta non e' a vista: il carrello e' il modo per
       aprirla, ed e' un comando come gli altri. Prima era una barra a se',
       appiccicata in fondo, che copriva gli articoli mentre si scorreva. */
    .ci-btn-carrello {
        display: inline-flex;
    }

    .ci-btn-ghost i {
        font-size: 15px;
    }

    /* Il testo dei secondari se ne va, i numeri restano: quanti filtri sono
       accesi (senza, non si sa che un filtro sta nascondendo roba), quanti
       articoli si stanno spostando, e quanti sono in richiesta — che qui e'
       l'unico segno che l'articolo aggiunto e' arrivato da qualche parte. */
    .ci-btn-ghost > span:not(.ci-conta) {
        display: none;
    }

    .ci-btn-ghost.ci-btn-nuovo {
        width: auto;
        padding: 0 16px;
    }

    /* Pareggia la regola qui sopra — (0,2,1) contro (0,2,1) — e vince perche'
       viene dopo. Con la classe comune .ci-conta quella regola ha smesso di
       crescere, e questa non deve piu' rincorrerla. */
    .ci-btn-ghost.ci-btn-nuovo > span {
        display: inline;
    }

    /* Mentre si scelgono articoli da spostare o eliminare, crearne di nuovi non
       c'entra: i due comandi di creazione si tolgono di mezzo e tornano appena si
       esce dalla selezione. Senza, i sei comandi non ci stanno in larghezza e la
       riga tornerebbe a scorrere proprio quando servono Sposta ed Elimina. */
    .ci-catalogo.is-selezione .ci-btn-nuovo,
    .ci-catalogo.is-selezione [data-ci-azione="nuovo-reparto"] {
        display: none;
    }

    .ci-filtri__pannello {
        left: 0;
        right: auto;
    }

    /* La testata di reparto sta su una riga sola: il filo decorativo non porta
       informazione e se ne va, il conteggio dice il numero e basta. Cosi' al
       titolo restano ~180px, che bastano per un nome come "Bombolette e Vernici".
       Prima il titolo andava a capo e il resto restava centrato contro due righe:
       era quello l'accavallamento. */
    .ci-group__rule {
        display: none;
    }

    .ci-group__n-parola {
        display: none;
    }

    .ci-group__title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Il "+" del reparto non si puo' rimpicciolire — workspace-responsive.css
       porta ogni bottone a 48px ed e' la soglia di tocco dell'app — quindi due
       comandi da 48 stavano in una riga larga 358. Se ne fondono in uno: il "+"
       sparisce e la sua voce entra nel menu, che qui e' l'unico comando. */
    /* Due classi: la dichiarazione base di .ci-group__piu sta piu' in basso in
       questo stesso foglio, e a specificita' pari vince chi viene dopo. Con una
       sola classe qui il "+" restava acceso — misurato, non dedotto. */
    .ci-group__head .ci-group__piu {
        display: none;
    }

    .ci-menu__voce--telefono {
        display: flex;
    }

    /* Un reparto senza articoli non si mostra: qui non ci si puo' trascinare
       niente — il trascinamento e' solo da computer — quindi costerebbe una
       testata e una riga "Reparto vuoto" per un contenuto che non c'e'. Resta
       nel pannello dei filtri e sul computer. */
    .ci-group:not(:has(.ci-card)) {
        display: none;
    }

    .ci-body {
        padding-top: 16px;
        padding-bottom: 12px;
    }

    .ci-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Il blocco tablet qui sopra passa a 4:3 per stare in due colonne
       fluide; sul telefono, che ne e' sempre due sole di larghezza fissa,
       la foto torna quadrata com'era prima che esistesse quel blocco. */
    .ci-card__media {
        aspect-ratio: 1 / 1;
    }

    .ci-card__name {
        font-size: 13px;
    }

    /* Il piede si appoggia sulla foto invece di essere una fascia sotto. Nel
       mockup quella fascia c'era perche' teneva il prezzo; PROD sul catalogo non
       ce l'ha (sta su materiali_fornitori, per coppia articolo-fornitore), quindi
       restava una riga bianca alta 68px per un solo tondo. Il markup non cambia:
       cambia dove si posa. */
    .ci-card__foot {
        position: absolute;
        right: 8px;
        bottom: 8px;
        padding: 0;
        gap: 0;
        background: transparent;
    }

    /* Il nome deve fermarsi prima del tondo, o ci finisce sotto. */
    .ci-card__caption {
        right: 62px;
    }

    /* La quantita' si regola nella richiesta, dove c'e' spazio per farlo:
       qui resta il tondo, che aggiunge un pezzo per tocco. */
    .ci-card__foot .ci-qty {
        display: none;
    }

    .ci-card__foot .ci-btn {
        width: 48px;
        padding: 0;
        border-radius: 50%;
    }

    .ci-card__foot .ci-btn__testo {
        display: none;
    }

    .ci-card__foot .ci-btn__icona {
        display: inline;
        font-size: 15px;
    }

    .ci-card__foot .ci-btn--in-lista .ci-btn__icona {
        display: none;
    }

    .ci-card__foot .ci-btn--in-lista .ci-btn__n {
        display: inline;
        font-family: var(--ci-mono);
        font-size: 14px;
    }

    .ci-catalogo[data-ci-vista="ricerca"] .ci-hero__annulla {
        display: inline-flex;
    }

    .ci-recenti {
        display: flex;
    }

    /* La richiesta prende tutta la pagina e resta chiusa finche' non
       la si apre: e' la schermata 2c del disegno mobile. */
    .ci-rda {
        display: none;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    .ci-catalogo[data-ci-vista="richiesta"] .ci-rda {
        display: flex;
        min-height: 100%;
    }

    .ci-rda__indietro {
        display: grid;
    }

    .ci-rda__titolo {
        font-size: 19px;
    }

    .ci-rda__head {
        padding: 6px 2px 14px;
    }

    .ci-rda__list {
        padding: 12px 0;
    }

    .ci-rda__foot {
        position: sticky;
        bottom: 0;
        margin: 0 -2px;
        padding: 14px 2px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: var(--ci-surface);
    }

    .ci-line__thumb {
        width: 54px;
        height: 54px;
    }

    .ci-dettaglio {
        margin: 0 -2px;
    }
}


/* ============================================================
   SPOSTARE FRA REPARTI
   ============================================================
   Una card si prende e si lascia su un reparto. Il "+" nella
   testata del reparto crea l'articolo gia' dentro, invece di
   farlo nascere fuori da tutti e spostarlo subito dopo.
   ============================================================ */

.ci-group__piu {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border: 1px dashed var(--ci-line);
    border-radius: 50%;
    background: transparent;
    font-size: 10px;
    color: var(--ci-muted);
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.ci-group__piu:hover {
    border-style: solid;
    border-color: var(--ci-accent-border);
    background: var(--ci-accent-soft);
    color: var(--ci-accent-text);
}

.ci-card {
    /* Il trascinamento parte dalla card intera: senza questo, sul testo della
       didascalia il browser trascinerebbe la selezione di testo. */
    -webkit-user-select: none;
    user-select: none;
}

.ci-card__media {
    cursor: grab;
}

.ci-card.is-in-viaggio {
    opacity: 0.4;
}

/* Mentre si trascina, i reparti si alzano dal fondo: si vede dove si puo'
   lasciare senza doverci passare sopra per scoprirlo. */
.ci-catalogo.is-trascinando .ci-group {
    border-radius: var(--ci-r-lg);
    outline: 1px dashed var(--ci-line);
    outline-offset: 6px;
}

.ci-catalogo.is-trascinando .ci-group.is-bersaglio {
    outline: 2px solid var(--ci-cat);
    background: color-mix(in oklch, var(--ci-cat) 8%, transparent);
}

.ci-catalogo.is-trascinando .ci-card {
    pointer-events: none;
}

.ci-catalogo.is-trascinando .ci-group__head,
.ci-catalogo.is-trascinando .ci-grid {
    pointer-events: none;
}

/* I tasti che valgono solo mentre si sceglie: fuori dalla selezione non
   esistono, invece di stare li' spenti a dire che non si possono premere. */
.ci-btn-selezione {
    display: none;
}

.ci-catalogo.is-selezione .ci-btn-selezione {
    display: inline-flex;
}


/* ============================================================
   I MODALI DEL CATALOGO
   ============================================================
   Vivono in index.html e li veste il CSS generale; qui c'e' solo
   la spaziatura del contenitore, che prima era un margine
   scritto a mano su ogni elemento, e la scelta a due strade
   dell'eliminazione di un reparto.
   ============================================================ */

.ci-modale__etichetta {
    margin-top: 18px;
}

.ci-modale__scelta {
    width: 100%;
    margin-top: 8px;
    box-sizing: border-box;
    cursor: pointer;
}

.ci-modale__piede {
    margin-top: 24px;
}

.ci-modale__pericolo {
    background: var(--error);
}

.ci-scelta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.ci-scelta[hidden] {
    display: none;
}

.ci-scelta__voce {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--ci-line);
    border-radius: var(--ci-r-md);
    cursor: pointer;
}

.ci-scelta__voce:hover {
    border-color: var(--ci-accent-border);
}

.ci-scelta__voce:has(input:checked) {
    border-color: var(--ci-accent-border);
    background: var(--ci-accent-soft);
}

.ci-scelta__voce input {
    margin: 2px 0 0;
    accent-color: var(--ci-accent);
    cursor: pointer;
}

.ci-scelta__testo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    color: var(--ci-ink);
}

.ci-scelta__nota {
    font-size: 12px;
    color: var(--ci-muted);
}

/* Il reparto vuoto dice cosa farci, invece di essere una riga di niente. */
.ci-group__vuoto {
    padding: 22px 16px;
    border: 1px dashed var(--ci-line);
    border-radius: var(--ci-r-lg);
    text-align: center;
    font-size: 12.5px;
    color: var(--ci-muted);
}

/* ============================================================
   RIDUZIONE DEL MOVIMENTO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .ci-card,
    .ci-btn,
    .ci-btn-ghost {
        transition: none;
    }

    .ci-card:hover {
        transform: none;
    }

    .ci-piu-uno {
        animation: none;
        opacity: 0;
    }
}