/* VESTE G — «Grande magazzino»
 *
 * L'impostazione dei grandi negozi online: barra scura, ricerca su tutta la
 * riga, reparti che scorrono, riquadri con quattro prodotti, fasce che
 * scorrono di lato. E' il modo in cui si guarda un catalogo da 14.500
 * articoli senza sentirsi persi.
 *
 * ⛔ I COLORI SONO DI DI CANIO, NON PRESI IN PRESTITO. L'impostazione di una
 * pagina si può riprendere; i colori con cui un marchio si fa riconoscere no.
 * Qui il verde è quello dell'azione — lo stesso di tutte le altre vesti — il
 * rosso è quello del marchio Di Canio, e i fondi sono caldi come si addice a
 * chi vende casalinghi. Nessun blu-nero e nessun arancione altrui.
 *
 * ⚠️ Si sovrappone a `app.css`: qui c'è solo ciò che CAMBIA. Le 79 regole che
 * tingono col rosso di marchio le copre `_comune.css`.
 */

:root {
  /* ⛔ IL VERDE DELL'AZIONE E' UGUALE IN TUTTE LE VESTI: il pulsante che
   * compra deve essere sempre lo stesso colore, qualunque sia la tinta. */
  --tema-azione: #0f6b4f;
  --tema-azione-scura: #0a4e39;
  --tema-primario: #0f6b4f;
  --tema-primario-scuro: #0a4e39;
  --tema-inchiostro: #1f2a24;
  --tema-inchiostro-tenue: #5e6b63;
  --tema-fondo: #f2ece2;
  --tema-bordo: #e2dbd0;
  --tema-raggio: 8px;

  /* La scala di scuri della barra: verde-nero, non blu-nero. */
  --g-barra: #1f2a24;
  --g-reparti: #33443b;
  --g-consegna: #46594e;
  /* Il rosso del bollo sconto è quello del marchio Di Canio. */
  --g-sconto: #ef0000;
}

body { background: var(--tema-fondo); color: var(--tema-inchiostro); }

/* ⛔ Lo spazio riservato alla barra fissa: qui la barra scorre con la pagina,
 * e quel margine lascerebbe una fascia vuota alta come la barra. */
main.has-navbar-fixed { margin-top: 0 !important; }

/* ============ la barra scura ============ */
.dj-alta { background: var(--g-barra); color: #fff; }
.dj-alta__riga {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; max-width: 1500px; margin: 0 auto;
}
.dj-alta__menu { font-size: 22px; line-height: 1; color: #fff; text-decoration: none; }
.dj-alta__marchio img { height: 26px; filter: brightness(0) invert(1); }
.dj-alta__destra { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
/* ⛔ ANCHE QUESTE SI TOCCANO COL DITO, e non solo sotto i 768px. Un
 * pieghevole APERTO misura fra 673 e 884 pixel: è largo come un tablet ma
 * resta un telefono, e lì queste voci ricomparivano alte 20px. La soglia del
 * dito non è la larghezza dello schermo, è il modo in cui lo si usa. */
.dj-alta__voce {
  color: #e6ded2; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.dj-alta__voce:hover { color: #fff; }
.dj-alta__borsa {
  display: flex; align-items: center; gap: 6px; color: #fff; text-decoration: none;
  background: var(--tema-azione); padding: 7px 14px; border-radius: 999px; font-weight: 600;
}
.dj-alta__borsa:hover { background: var(--tema-azione-scura); color: #fff; }
/* ⚠️ Il numero degli articoli usciva a 10px: è il dato che si guarda per
 * capire se il carrello è pieno, e a quella misura non si legge. */
.dj-alta__borsa b { font-size: 15px; line-height: 1; }
.dj-alta__borsa span { font-size: 13.5px; }

/* ============ la ricerca, su una riga sua ============ */
.dj-cerca { background: var(--g-barra); padding: 0 16px 12px; }
.dj-cerca__dentro {
  max-width: 1500px; margin: 0 auto; display: flex; height: 44px;
  border-radius: var(--tema-raggio); overflow: hidden; text-decoration: none;
}
/* `.dj-cerca__campo` e `.dj-cerca__lente` sono un <input> e un <button> veri
 * (prima erano <span> dentro un <a> che apriva un riquadro sotto): servono
 * i reset qui sotto, altrimenti spunta il bordo che il browser ci mette di
 * suo e il verde del bottone sparisce sotto lo stile nativo. */
/* ⚠️ PORTATO A MANO DALLA G il 1 set 2026: questo foglio aveva ancora
 * le regole del campo FINTO (uno <span>), perche' la veste H e' una copia
 * della G e la correzione della ricerca non era arrivata fin qui. Vedi
 * l'avviso in cima a `vesti/h/b2c/_navbar.html`. */
.dj-cerca__campo {
  flex: 1; background: #fff; border: none; outline: none;
  padding: 0 16px; color: var(--tema-inchiostro);
  /* 16px e non 15: sotto quella soglia Safari su iPhone ingrandisce tutta la
   * pagina al tocco, perche' pensa che chi scrive non riesca a leggere. */
  font-size: 16px;
  font-family: inherit; min-width: 0;
}
.dj-cerca__campo::placeholder { color: #6b7280; }
/* Chi naviga da tastiera deve vedere dove si trova: prima era uno <span>,
 * non riceveva mai il focus. Ora e' un <input> vero e gli serve un segno. */
.dj-cerca__campo:focus-visible {
  outline: 2px solid var(--tema-azione); outline-offset: -2px;
}
.dj-cerca__lente {
  width: 52px; border: none; background: var(--tema-azione); color: #fff;
  display: grid; place-items: center; font-size: 19px; cursor: pointer;
}
.dj-cerca__lente:hover { background: var(--tema-azione-scura); }

/* ============ i reparti che scorrono ============ */
.dj-reparti { background: var(--g-reparti); color: #fff; }
.dj-reparti__riga {
  display: flex; gap: 2px; padding: 0 12px; max-width: 1500px; margin: 0 auto;
  overflow-x: auto;
}
.dj-reparti a {
  padding: 10px 11px; font-size: 13.5px; white-space: nowrap; color: #e6ded2;
  text-decoration: none; border: 1px solid transparent; border-radius: 3px;
}
.dj-reparti a:hover { border-color: rgba(255,255,255,.6); color: #fff; }

.dj-consegna { background: var(--g-consegna); color: #fff; font-size: 13.5px; }
.dj-consegna__riga { max-width: 1500px; margin: 0 auto; padding: 9px 16px; }

/* ============ i riquadri ============ */
.dj-magazzino { padding-bottom: 30px; }

/* ⛔ LA BARRA DI SCORRIMENTO NON SI VEDEVA, E IL CLIENTE PERDEVA IL 75%
 * DELLA HOME. Segnalato da Di Canio il 1 set 2026 dal suo PC fisso: «non
 * esce la barra che permette lo scorrimento a destra delle sezioni».
 * 📏 Misurato sul sito vero a 1920px: dodici riquadri per 5.702 pixel di
 * contenuto dentro 1.500 di spazio — ne restavano visibili TRE — e la
 * barra occupava ZERO pixel, cioe' era del tutto invisibile.
 *
 * `overflow-x: auto` da solo non basta: sia macOS sia Chrome su Windows
 * disegnano barre «a scomparsa», che appaiono solo mentre si trascina.
 * Chi non sa gia' che il contenuto scorre non ha modo di scoprirlo: un
 * invito che compare solo dopo aver fatto la cosa non e' un invito.
 *
 * Qui la barra e' SEMPRE visibile e disegnata da noi, coi colori della
 * veste. `scrollbar-color` copre Firefox, `::-webkit-scrollbar` copre
 * Chrome, Edge e Safari — insieme fanno tutti i browser che il negozio
 * incontra davvero. */
.dj-riquadri {
  display: flex; gap: 14px; overflow-x: auto; align-items: flex-start;
  padding: 18px 14px 14px; max-width: 1500px; margin: 0 auto;
  /* ⛔ NIENTE `scroll-behavior: smooth` QUI. Messo sul contenitore rende
   * ANIMATA anche l'assegnazione diretta di `scrollLeft`, e dove
   * l'animazione non parte lo scorrimento non avviene affatto.
   * 📏 Misurato il 1 set 2026 nel browser di prova: `scrollTo` istantaneo
   * portava a 600, quello fluido restava a 0 anche dopo un secondo e
   * mezzo — cioe' la freccia non faceva NIENTE. La fluidita' la chiede
   * lo script, caso per caso, e solo dopo essersi assicurato che
   * funzioni: meglio un salto brusco di un comando morto. */
}

/* ⛔ E LE FRECCE, che sono il segnale che si legge davvero. La barra dice
 * «c'e' altro» a chi la sa leggere; una freccia lo dice a tutti, ed e'
 * quello che fa il modello Amazon da cui parte questa veste.
 * ⚠️ NASCOSTE DA TASTIERA E DAI LETTORI DI SCHERMO (`aria-hidden`,
 * `tabindex=-1` nel markup): chi naviga da tastiera scorre gia' con le
 * frecce direzionali, e sentirsi annunciare due bottoni in piu' per ogni
 * fila sarebbe rumore, non aiuto. */
.dj-fila { position: relative; max-width: 1528px; margin: 0 auto; }
.dj-fila__freccia {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d9cfc2;
  background: #fff; color: #22201e; font-size: 20px; line-height: 1;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18);
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.dj-fila__freccia:hover { background: #f6f1ea; }
.dj-fila__freccia--sinistra { left: 2px; }
.dj-fila__freccia--destra { right: 2px; }
/* ⚠️ Quando non c'e' piu' niente da scorrere in quella direzione, la
 * freccia sparisce: una freccia che non fa niente e' peggio di nessuna
 * freccia — la classe la mette il pezzo di script in fondo al template. */
.dj-fila__freccia[hidden] { display: none; }
/* ⛔ SENZA `align-items: flex-start`, IL BOX STRETTO RESTAVA VUOTO SOTTO
 * COMUNQUE. Flexbox stira di default (`align-items: stretch`) ogni figlio
 * all'altezza del PIU' ALTO della riga: tolto il `min-height` fisso, il
 * box con 2 prodotti veniva comunque allungato fino all'altezza di quello
 * con 4, e lo spazio vuoto tornava — stessa faccia, causa diversa.
 * Segnalato da Francesco il 1 set 2026 guardando lo screenshot appena
 * mandato: «non so tu ma io lo vedo male». */
.dj-riquadri > * { flex: 0 0 460px; }
.dj-riquadri > .dj-riquadro--stretto { flex-basis: 260px; }
.dj-riquadro {
  background: #fff; border-radius: 10px;
  /* ⚠️ L'IMBOTTITURA STA IN TRE VARIABILI perché il riquadro-figura deve
   * poterla ANNULLARE con margini negativi senza ricopiarne i numeri. */
  --riquadro-su: 22px; --riquadro-lato: 22px; --riquadro-giu: 18px;
  padding: var(--riquadro-su) var(--riquadro-lato) var(--riquadro-giu);
  display: flex; flex-direction: column;
  /* ⚠️ Serve al link steso qui sotto: senza, si stenderebbe sulla pagina
   * invece che sul riquadro. */
  position: relative;
  /* ⛔ NIENTE PIU' `min-height` FISSO. Con tutti i box alla stessa altezza,
   * quelli con meno prodotti finivano con mezzo riquadro vuoto sotto la
   * merce — segnalato da Francesco il 1 set 2026 guardando la bozza da
   * desktop. Qui l'altezza la decide il contenuto vero. */
}
/* ⛔ VESTE «AMAZON 2», seconda stesura — Francesco, 1 set 2026: «i colori
 * sono troppo piatti, il modello aveva molto piu' colore». La prima
 * stesura usava sei tinte scure e vicine fra loro (verde bosco, terracotta
 * cupa, blu petrolio spento…): tutte simili in luminosita', l'insieme
 * sembrava monocromo. Qui le tinte sono piu' sature e distinte l'una
 * dall'altra — SEMPRE dentro la famiglia di colori di Di Canio (verde e
 * terracotta del marchio, ocra e blu petrolio gia' usati nei fondi caldi
 * della veste Amazon), mai i colori di un altro sito — con una leggera
 * sfumatura diagonale per dare profondita' invece di una tinta piatta. */
.dj-riquadro--1 { background: linear-gradient(135deg, #1a9463, #0d6b48); }
.dj-riquadro--2 { background: linear-gradient(135deg, #d9552a, #b03d1a); }
.dj-riquadro--3 { background: linear-gradient(135deg, #2b7f93, #1a5c6c); }
.dj-riquadro--4 { background: linear-gradient(135deg, #c98a2e, #a1691a); }
.dj-riquadro--5 { background: linear-gradient(135deg, #7654a0, #5a3d82); }
.dj-riquadro--6 { background: linear-gradient(135deg, #c4384f, #9c2438); }

.dj-riquadro__titolo {
  margin: 0 0 16px; font-size: 24px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.01em; color: #fff;
}
/* ⛔ IL LINK CHE COPRE TUTTO IL RIQUADRO — chiesto da Francesco il 1 set
 * 2026: «l'intero riquadro colorato e il titolo devono portare alla stessa
 * pagina di "Scopri tutto il reparto"».
 *
 * ⚠️ STA SOTTO LE CELLE, e l'ordine conta. `z-index: 1` qui e `z-index: 2`
 * sulle celle: cliccando sul colore o sul titolo si apre il REPARTO,
 * cliccando su una foto si apre QUEL PRODOTTO. Senza i due livelli, il link
 * grande mangerebbe anche i click sui prodotti.
 *
 * ⛔ E NON si e' avvolto il riquadro in un `<a>`: le celle sono gia' link, e
 * un link dentro un link e' HTML non valido — il browser lo ripara da solo
 * spezzando i tag, in modo diverso su ogni browser. Vedi il commento nel
 * template. */
.dj-riquadro__tutto {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; text-decoration: none;
}
/* ⚠️ Il contorno di messa a fuoco deve restare VISIBILE: e' un link vero, e
 * chi naviga da tastiera deve vedere dove si trova. Su fondo colorato pieno
 * il contorno di sistema si perde, quindi bianco. */
.dj-riquadro__tutto:focus-visible {
  outline: 3px solid #fff; outline-offset: -4px;
}
/* ⚠️ Un segnale che il riquadro e' cliccabile: al passaggio del mouse si
 * alza appena. Non tocca il telefono (dove `hover` non esiste). */
.dj-riquadro { transition: transform .12s ease, box-shadow .12s ease; }
.dj-riquadro:has(.dj-riquadro__tutto:hover) {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.dj-riquadro__quattro { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1;
  /* sopra il link grande: il click su una foto apre il prodotto, non il reparto */
  position: relative; z-index: 2; }
/* ⛔ REPARTI CON POCA MERCE: UNA COLONNA, NON UNA GRIGLIA A META'. Con la
 * griglia 2x2 fissa, un reparto con un solo prodotto scelto lasciava tre
 * caselle vuote. Qui, se il reparto mostra 1 o 2 prodotti, le celle si
 * impilano in colonna e il riquadro e' piu' stretto (`--stretto` sopra) —
 * lo stesso schema del box "I piu' amati" nel modello di Di Canio, dove i
 * box con poca merce sono stretti e alti, non larghi e mezzi vuoti. */
.dj-riquadro__quattro--colonna { grid-template-columns: 1fr; }
.dj-riquadro__quattro--colonna .dj-cella__scatto { aspect-ratio: 16 / 10; }
.dj-cella {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; text-decoration: none;
  background: #fff; border-radius: 8px; padding: 10px;
}
/* ⚠️ `contain` su fondo bianco: col ritaglio una ciotola e un coperchio
 * diventano due macchie uguali. Visto sulla bozza a 1400 e a 430 pixel. */
.dj-cella__scatto {
  aspect-ratio: 1; position: relative; overflow: hidden;
  border-radius: 4px; background: #fff; display: block;
}
.dj-cella__scatto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 3px;
}
.dj-cella__nome {
  font-size: 11.5px; line-height: 1.3; color: var(--tema-inchiostro);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* ⛔ SEMPRE DUE RIGHE, anche quando il nome ne riempie una sola.
   * Il taglio a due righe c'era gia', ma un nome corto ne occupava UNA: le
   * celle di quel riquadro venivano piu' basse, e siccome i riquadri non si
   * stirano (`align-items: flex-start`, voluto: le forme devono poter essere
   * diverse) l'intero riquadro finiva piu' in alto degli altri, con la
   * scritta «Scopri tutto il reparto» fuori linea.
   * 📏 Misurato sul sito vero il 2 set 2026: «Halloween» aveva 0 nomi lunghi
   * su 4, mentre «Cancelleria» e «Riscaldamento» ne avevano 3 e «Ho.Re.Ca» 4.
   * Il riquadro di Halloween finiva visibilmente prima.
   * ⚠️ `min-height` e non `height`: se un domani il taglio passasse a tre
   * righe, questa riga non lo strozzerebbe. */
  min-height: 2.6em;   /* 2 righe × line-height 1.3 */
}
/* ⛔ 44 PIXEL DI ALTEZZA, NON 20. È il link che porta dentro al reparto — il
 * più premuto della pagina — e con l'altezza del solo testo era un bersaglio
 * da 20px. Misurato su dodici schermi il 26 ago 2026: da 280px (pieghevole
 * chiuso) fino a 673 (pieghevole aperto) risultava sempre sotto la soglia.
 * 44px è la misura sotto la quale Apple e Google danno il bersaglio per
 * troppo piccolo, e su un catalogo sbagliare a premere vuol dire aprire il
 * reparto sbagliato. */
/* ⚠️ ORA E' UNO `<span>`, NON PIU' UN LINK: a portare al reparto ci pensa
 * il link steso su tutto il riquadro. Resta come SEGNALE VISIBILE che si
 * puo' entrare — un bersaglio invisibile non e' un bersaglio — e mantiene
 * i 44px di altezza perche' resta un'area che il dito centra. */
.dj-riquadro__oltre {
  margin-top: 14px; font-size: 13.5px; color: #fff;
  font-weight: 600; text-decoration: none;
  display: flex; align-items: center; min-height: 44px;
}
.dj-riquadro:has(.dj-riquadro__tutto:hover) .dj-riquadro__oltre { text-decoration: underline; }
/* ⚠️ ANCHE IL TITOLO SI SOTTOLINEA al passaggio del mouse. Il link steso e'
 * invisibile: senza un segnale, il titolo NON SEMBRA cliccabile anche se lo
 * e'. Osservato da Francesco il 1 set 2026 — «almeno il nome del titolo
 * renderlo un link non sarebbe male»: era gia' cliccabile, ma non si vedeva.
 * Un bersaglio che non si annuncia vale quanto un bersaglio che non c'e'. */
.dj-riquadro:has(.dj-riquadro__tutto:hover) .dj-riquadro__titolo { text-decoration: underline; }
.dj-riquadro__oltre:hover { text-decoration: underline; }

/* ============ le fasce che scorrono ============ */
.dj-fascia {
  background: #fff; border-radius: var(--tema-raggio);
  margin: 0 14px 16px; padding: 16px 0 18px; max-width: 1500px;
}
@media (min-width: 1528px) { .dj-fascia { margin-left: auto; margin-right: auto; } }
.dj-fascia__testa { padding: 0 18px 12px; }
.dj-fascia__testa h2 {
  margin: 0; font-size: 20px; letter-spacing: -.01em; color: var(--tema-inchiostro);
}
.dj-fascia__nastro {
  display: flex; gap: 12px; overflow-x: auto;
  /* ⚠️ 10 px sotto e non 4: dove la barra occupa spazio (Chrome su
   * Windows, cioe' lo schermo di Di Canio) con 4 px restava appiccicata
   * alla merce. Le file di riquadri ne hanno 14 per lo stesso motivo. */
  padding: 0 18px 10px;
}
.dj-pezzo { flex: 0 0 168px; min-width: 0; text-decoration: none; display: block; }
.dj-pezzo__scatto {
  aspect-ratio: 1; background: #fff; position: relative; overflow: hidden;
  margin-bottom: 8px; border-radius: 4px; display: block;
  box-shadow: inset 0 0 0 1px var(--tema-bordo);
}
.dj-pezzo__scatto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 9px;
}
.dj-pezzo__nome {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; line-height: 1.35; color: var(--tema-inchiostro);
}
.dj-pezzo__costo {
  display: block; margin-top: 5px; font-size: 17px;
  font-weight: 600; color: var(--tema-inchiostro);
}

/* ====================================================================== */
/*  LE ALTRE PAGINE                                                       */
/*  Risultati, scheda prodotto, pagine informative. Stessa logica della   */
/*  home dei grandi negozi online, stessi colori nostri.                  */
/* ====================================================================== */

/* --- la testa dei risultati: una riga, non una fascia alta 250px ------ */
/* 📏 Sui grandi negozi online sopra i risultati non c'è nessuna fascia: c'è
 * una riga sottile che dice cosa stai guardando, e subito sotto comincia la
 * merce. Sul pieghevole chiuso la fascia scura era un quarto di schermata
 * occupato da una parola sola. */
.dj-testa-risultati { background: #fff; border-bottom: 1px solid var(--tema-bordo); }
.dj-testa-risultati__dentro {
  max-width: 1500px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.dj-testa-risultati__briciole { font-size: 13px; color: var(--tema-inchiostro-tenue); }
/* ⚠️ `overflow-wrap: anywhere` NON È PIGNOLERIA. I nomi arrivano dal
 * gestionale e 277 prodotti online hanno una parola da 20 caratteri o piu';
 * il peggiore ne ha 57 di fila senza spazi ne' trattini
 * («BOX ASS.6X (PAD.AL24+PAD.26+CAS.20+…»). Senza questa riga il titolo
 * usciva di 245 pixel dallo schermo del pieghevole chiuso e il cliente
 * leggeva «Box ass.6x (pa…», cioe' non sapeva mai cosa c'e' nella confezione.
 * 📏 Misurato il 27 ago 2026 a 280px sul prodotto 34178. Succedeva anche
 * sulla veste di sempre: qui si chiude, li' resta. */
.dj-testa-risultati__titolo {
  margin: 0; font-size: 21px; font-weight: 700;
  letter-spacing: -.01em; color: var(--tema-inchiostro);
  overflow-wrap: anywhere;
}
.dj-testa-risultati__sku { font-size: 12.5px; color: var(--tema-inchiostro-tenue); }

/* --- filtri aperti a sinistra, merce a destra ------------------------- */
/* 📏 Misurato su amazon.it il 27 ago 2026: colonna dei filtri larga 242px. */
.dj-risultati { max-width: 1500px; margin: 0 auto; padding: 18px 16px 36px; display: block; }
@media (min-width: 992px) {
  .dj-risultati {
    display: grid;
    /* 254 e non 242: 12 pixel di respiro dentro la colonna, spiegati sotto. */
    grid-template-columns: 254px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .dj-risultati > * { min-width: 0; }
  .dj-risultati__filtri {
    position: sticky;
    top: 12px;
    /* ⛔ `overflow-y: auto` OBBLIGA IL BROWSER a calcolare anche `overflow-x`
     * come `auto`: non è una svista, è la regola CSS. Risultato: tutto quello
     * che deve sporgere dalla colonna viene tagliato. Il fumetto col prezzo
     * massimo del cursore arrivava 2 pixel oltre il bordo e l'etichetta
     * dell'asse 4 — misurato a 1280. Con 6 pixel di respiro per lato ci
     * stanno, e il contenuto resta largo 242 come prima. */
    padding: 0 6px;
    /* Non più alta dello schermo, e con lo scorrimento suo: una categoria con
     * trenta marche renderebbe la colonna più lunga della pagina, e l'ultimo
     * filtro si raggiungerebbe solo scorrendo tutto il catalogo. */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  /* ⛔ IL CASSETTO DIVENTA COLONNA, E RESTA UN ELEMENTO SOLO.
   * `_drawer_filters.html` è un `.offcanvas` di Bootstrap: fisso, fuori
   * schermo, invisibile finché non lo si apre. Da `lg` in su gli si toglie
   * tutto questo e diventa una colonna normale dentro la griglia.
   * Così il modulo dei filtri in pagina è UNO: con due, `filters.js` — che fa
   * `$('.js-filters-form').serializeArray()` — manderebbe ogni filtro spuntato
   * due volte, senza un errore che lo dica. */
  .dj-risultati__filtri .offcanvas {
    position: static;
    transform: none !important;
    visibility: visible;
    width: auto;
    max-width: none;
    height: auto;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    /* ⚠️ `!important` anche qui, e non per abitudine: `.bg-white`,
     * `.rounded-3` e `.w-100` stanno sul cassetto come utility, cioè già
     * `!important`. Senza pari forza queste tre righe non facevano NIENTE e
     * il blocco dichiarava una colonna trasparente e squadrata che a schermo
     * era una scheda bianca arrotondata. Una regola che non ottiene quello
     * che dichiara è peggio di una regola assente: chi legge si fida. */
    border-radius: 0 !important;
    background: transparent !important;
    width: auto !important;
  }
  /* ⚠️ `!important`, ma NON perché ci sia un `!important` da battere: nel
   * foglio del sito la regola è `.offcanvas-collapse .offcanvas-header
   * { display: flex }`, senza. È una questione di specificità — quel
   * selettore vale (0,3,0) e questo (0,2,0) — e senza forza in più
   * restavano in pagina il titolo «Filtri» e la crocetta di chiusura sopra
   * una colonna che non si chiude. Visto sulla resa a 1280px.
   * ⛔ Il commento precedente diceva che l'`!important` c'era: non c'è. Chi
   * lo avesse tolto fidandosi si sarebbe ripreso il titolo in pagina. */
  .dj-risultati__filtri .offcanvas-header { display: none !important; }
  .dj-risultati__filtri .offcanvas-body { padding: 0 !important; overflow: visible; }
  /* ⛔ IL PULSANTE «FILTRA» COPRIVA L'ULTIMO FILTRO, E CON UNA MARCA SOLA LO
   * COPRIVA TUTTO. Nel foglio del sito il piede del cassetto è
   * `position: absolute; bottom: 0`, e il cassetto gli riserva lo spazio con
   * `padding-bottom: 76.5px`. Qui sopra quel padding lo azzeriamo — giusto,
   * perché la colonna non è più alta quanto lo schermo — ma il piede restava
   * ancorato al fondo e si appoggiava sopra le caselle.
   *
   * 📏 MISURATO il 27 ago 2026 a 1440 su «Made in Italy» (94 marche): la
   * casella in fondo alla finestrella rispondeva al tocco col pulsante, non
   * con se stessa. Su «Giochini economici» — una marca sola — l'UNICA casella
   * stava interamente sotto il pulsante: la colonna dei filtri non serviva a
   * niente. Sono 190 le categorie con una marca sola.
   *
   * ⚠️ `sticky` e non `static`: così il piede sta in flusso (occupa il suo
   * spazio, non copre nulla) E resta visibile in fondo alla colonna anche
   * quando la lista dei filtri è più lunga dello schermo. Serve lo sfondo
   * pieno, altrimenti le caselle si vedono passare sotto. */
  /* ⚠️ `!important` sul padding: il piede porta `p-3`, che e' un'utility di
   * Bootstrap, cioe' gia' `padding: 1rem !important`. Senza pari forza la mia
   * riga non arrivava e il piede restava alto 77px invece di 45 — un'altra
   * dichiarazione che dichiarava e non otteneva, la stessa famiglia di
   * difetto chiusa poche righe piu' su. Misurato nel browser. */
  .dj-risultati__filtri .dj-drawer__footer {
    position: sticky;
    bottom: 0;
    padding: .75rem 0 .35rem !important;
    background: var(--tema-fondo);
  }
  /* I titoli dei gruppi di filtri, come nella colonna dei grandi negozi.
   * ⚠️ Solo `.widget-title`: i tre moduli di filtro che esistono davvero
   * (caselle, scelta singola, intervallo) usano tutti quello. `.accordion-button`
   * qui dentro non compare mai — regola morta, tolta — e l'`h6` corrispondeva
   * al solo titolo del cassetto, che la regola qui sopra nasconde. */
  .dj-risultati__filtri .widget-title { font-size: 14px; font-weight: 700; color: var(--tema-inchiostro); }
  .dj-risultati__filtri .form-check-label { font-size: 13.5px; }
}
/* --- la categoria senza un solo prodotto ------------------------------ */
/* Niente prodotti, niente filtri: la corsia della colonna sparisce e la merce
 * (cioè il messaggio «non ci sono elementi») riparte da sinistra. */
@media (min-width: 992px) {
  .dj-risultati--senza-filtri { grid-template-columns: minmax(0, 1fr); }
  .dj-risultati--senza-filtri .dj-risultati__filtri { display: none; }
}

@media (max-width: 991.98px) {
  /* ⚠️ Sotto `lg` la colonna NON deve occupare spazio: il cassetto è fisso e
   * l'involucro resterebbe un vuoto sopra la merce. `display: contents` lo
   * toglie dalla scatola lasciando dentro quello che contiene. */
  .dj-risultati__filtri { display: contents; }
}

/* --- i risultati a griglia -------------------------------------------- */
/* ⚠️ `auto-fill` invece di un numero fisso di colonne: la griglia si conta da
 * sola quante ne stanno, e va bene su OGNI schermo — dal pieghevole chiuso a
 * 280px al computer grande — senza una regola per ogni misura. */
.dj-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.dj-griglia > * { min-width: 0; }
/* ⛔ Cintura contro `width: 25%` delle classi del cambio griglia/lista, e
 * contro il `px-3 mb-4` che ogni scheda si porta dietro: dentro una griglia
 * quel margine è spazio doppio, la spaziatura la dà `gap`. */
.dj-griglia .dj-product {
  width: auto !important;
  flex: initial !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
/* Il banner «non ci sono elementi» è un `.container`: dentro la griglia
 * diventerebbe una colonna da 210px con dentro una frase. Prende tutta la riga. */
.dj-griglia > .container { grid-column: 1 / -1; }
.dj-griglia .dj-product > hr { display: none; }

/* ⚠️ COLONNA CON IL FONDO ANCORATO: i nomi dei prodotti vanno da una a tre
 * righe, e senza questo i prezzi e i pulsanti «Aggiungi» finivano a tre
 * altezze diverse nella stessa fila — una scacchiera. Il nome si prende lo
 * spazio che gli serve, prezzo e comando restano allineati in fondo. */
.dj-griglia .dj-product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tema-bordo);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  padding: 12px;
}
.dj-griglia .dj-product-card__content { display: flex; flex-direction: column; flex: 1; }
.dj-griglia .dj-product-card__content > .card-body:first-child { display: flex; flex-direction: column; flex: 1 1 auto; }
/* ⛔ IL SECONDO CORPO NON DEVE CRESCERE. Nel foglio del sito è `flex: 1 1
 * auto` come il primo: lo spazio avanzato nella scheda finiva a lui, e il
 * pulsante «Aggiungi» — che sta in cima al suo corpo — saliva. Sulle schede
 * col titolo di una riga sola il pulsante risultava 8,7 pixel più in alto che
 * sulle vicine, nella stessa fila. Lo spazio deve andare al primo corpo,
 * dove `margin-top: auto` spinge il prezzo in fondo. */
.dj-griglia .dj-product-card__content > .card-body-hidden { flex: 0 0 auto; }
/* ⚠️ IL MARGINE AUTOMATICO VA SULL'INVOLUCRO, NON SUL PREZZO. Nel file
 * condiviso il prezzo sta dentro un `<div class="d-flex">`: messo sul prezzo,
 * `margin-top: auto` non spinge niente, perché il suo genitore non è la
 * colonna. Misurato: su cinque schede alte uguali, una teneva prezzo e
 * pulsante 8,7 pixel più in alto delle altre — il titolo su una riga invece
 * che due. */
.dj-griglia .dj-product-card__content > .card-body:first-child > .d-flex { margin-top: auto; padding-top: 8px; }
.dj-griglia .dj-product-card__media {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background: #fff;
}
/* ⛔ `contain`, NON `cover`, e con `!important` perché `object-fit: cover` sta
 * SCRITTO NELL'ATTRIBUTO `style` dell'immagine: un foglio di stile senza
 * `!important` non lo batte. Con `cover` un utensile lungo veniva tagliato ai
 * bordi e le schede diventavano macchie indistinguibili — visto sulla resa. */
.dj-griglia .dj-product-card__media .card-img-top { position: absolute; inset: 0; }
.dj-griglia .dj-product-card__media img { width: 100%; height: 100%; object-fit: contain !important; }
/* ⚠️ IL LIMITE DI LARGHEZZA NON È COSMETICO. La pastiglia più lunga
 * («Sconto quantità», 105px) e il cuore dei preferiti stanno sulla stessa
 * riga, uno a sinistra e uno a destra: fra i 355 e i 390 pixel di schermo si
 * sovrapponevano di 4 pixel su TUTTE le schede. 📏 Misurato a 375 il 27 ago
 * 2026, da cliente, con la pastiglia messa su tutte e 24 le schede — nel
 * database locale non c'è un solo prodotto scontato, quindi nessun banco
 * poteva vederla. Il cuore resta premibile: a mangiarsi l'angolo era la
 * pastiglia. */
.dj-griglia .dj-product-card__media .badge {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  /* 56 = 6 di margine a sinistra + 44 di cuore + 6 di margine a destra.
   * ⚠️ Alla prima stesura c'erano 50 e restavano 6 pixel di sovrapposizione:
   * avevo tolto il cuore e i suoi margini, non il margine sinistro della
   * pastiglia stessa. Misurato di nuovo a 375, sovrapposizione 0. */
  /* ⛔ IL LIMITE DA SOLO NON BASTAVA: `.badge` e' `white-space: nowrap` e
   * `overflow: visible`, quindi `max-width` accorciava il fondo rosso e il
   * testo usciva lo stesso. Provato con una scritta piu' lunga di quelle di
   * oggi: entrava di 6 pixel nel cuore. Con questi due il testo si tronca
   * davvero e la guardia regge anche se domani la scritta si allunga.
   * ⚠️ 44 e non 56: misurato, il cuore e' largo 32 punti, non 44 —
   *   6 di margine + 32 di cuore + 6 = 44. Con 56 la pastiglia veniva
   *   compressa di 12 pixel per niente, e da anonimo — dove il cuore non
   *   c'e' affatto — anche di piu'. I due testi che esistono oggi
   *   («- 35,00 %» e «Sconto quantita'») ci stanno interi. */
  max-width: calc(100% - 44px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dj-griglia .dj-product-card__media .btn-wishlist { position: absolute; right: 6px; top: 6px; z-index: 2; }

.dj-griglia .dj-product-card__content { padding-top: 10px !important; }
.dj-griglia .card-body { padding: 0 !important; }
.dj-griglia .product-meta { font-size: 11px; }
.dj-griglia .product-title { font-size: 13.5px; font-weight: 400; line-height: 1.35; }
.dj-griglia .product-title a { color: var(--tema-inchiostro); }
/* ⚠️ Il prezzo in inchiostro, non nel colore d'accento: sui grandi negozi il
 * prezzo è la cosa più nera della scheda, e il colore resta al pulsante che
 * compra. Con l'accento addosso il prezzo diventava un collegamento a vedersi,
 * e il verde dell'azione perdeva l'esclusiva. */
.dj-griglia .product-price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.dj-griglia .product-price .text-accent { color: var(--tema-inchiostro) !important; }
.dj-scheda__acquisto .product-price .text-accent { color: var(--tema-inchiostro) !important; }
.dj-griglia .product-price del { font-weight: 400; }
.dj-griglia .card-body-hidden { padding-top: 10px !important; }

/* --- il pulsante che compra, largo abbastanza per un dito -------------- */
/* ⛔ MISURATO A 390 PIXEL: «Aggiungi» era alto 35,1px. È il comando che mette
 * la merce nel carrello, e su un telefono si preme col pollice: sotto i 44
 * punti — la misura minima nelle linee guida di Apple e di Google — si sbaglia
 * mira, e su un catalogo sbagliare mira vuol dire comprare la cosa sbagliata.
 *
 * ⛔ LA SOGLIA ERA A 1024 ED ERA SBAGLIATA. Fra 1025 e 1199 il pulsante
 * tornava a 35,1 — la stessa misura che qui sopra è dichiarata un difetto — e
 * lì dentro NON ci sono computer: ci sono gli iPad in orizzontale, che
 * misurano 1080, 1180 e 1194 e si usano col dito. 📏 Misurato a 1194 il 27 ago
 * 2026.
 *
 * ⚠️ La soglia resta una soglia, e sopra non copre: un iPad Pro da 12,9" in
 * orizzontale misura 1366 e sta fuori. È una scelta — allargare i bersagli
 * anche sul computer gonfierebbe ogni scheda della griglia — non una svista.
 * Il pulsante «Aggiungi» del riquadro dell'acquisto, quello sì, è a 44 punti
 * a qualunque larghezza: sta fuori da questo blocco, poche righe piu' sotto.
 *
 * ⚠️ E la larghezza, non solo l'altezza: i tasti «−» e «+» della quantità
 * erano 38 e 40 pixel di lato. Alto abbastanza e stretto troppo si sbaglia
 * uguale. */
@media (max-width: 1199.98px) {
  .dj-griglia .card-body-hidden .btn { min-height: 44px; }
  .dj-griglia .js-action-qty-add-button,
  .dj-griglia .js-action-qty-remove-button,
  .dj-scheda__acquisto .js-action-qty-add-button,
  .dj-scheda__acquisto .js-action-qty-remove-button { min-height: 44px; min-width: 44px; }
}

/* --- le pastiglie delle categorie sorelle ----------------------------- */
.dj-risultati .dj-category-related { margin-top: 0 !important; }

/* --- la scheda prodotto a tre colonne --------------------------------- */
/* 📏 Misurato su amazon.it il 27 ago 2026: foto 415px a sinistra, dati dal
 * pixel 447, riquadro dell'acquisto largo 244 a destra.
 *
 * ⚠️ SOTTO I 992 PIXEL È UNA COLONNA SOLA, E L'ORDINE NON È QUELLO DEL
 * MARKUP: prima la foto, poi il riquadro dell'acquisto, poi la descrizione.
 * Chi arriva da un annuncio su un telefono deve poter comprare senza prima
 * scorrere un testo lungo. Nel markup la descrizione viene prima perché su
 * schermo largo sta al centro, fra la foto e il riquadro. */
.dj-scheda { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }
.dj-scheda__foto { order: 0; }
.dj-scheda__acquisto { order: 1; }
.dj-scheda__testo { order: 2; }

.dj-scheda__foto {
  background: #fff;
  border: 1px solid var(--tema-bordo);
  border-radius: 8px;
  padding: 12px;
}
/* ⛔ LE MINIATURE VANNO SOTTO, NON DI LATO. Nel foglio del sito la galleria è
 * una riga: le miniature si prendono 100 pixel in orizzontale e la foto grande
 * resta con quello che avanza. In veste A la colonna è larga il mezzo schermo e
 * si nota poco; qui la colonna è 420 e la foto scendeva a 294 pixel — contro i
 * 551 della veste A, il 47% in meno. 📏 Misurato il 27 ago 2026 sul prodotto
 * 81929 (19 immagini). Riguarda 1.490 prodotti online, il 10,2%.
 * ⚠️ Gli `order` servono perché il markup condiviso mette la striscia PRIMA
 * della foto (`order-sm-1` / `order-sm-2`): in colonna verrebbe sopra. */
.dj-scheda__foto .product-gallery { flex-direction: column; }
/* ⚠️ `!important` sugli ordini, e non per abitudine: nel markup condiviso la
 * striscia porta `order-sm-1` e la foto `order-sm-2`, che sono utility di
 * Bootstrap, cioè gia' `!important`. Senza pari forza le miniature finivano
 * SOPRA la foto — visto sulla resa, non dedotto. */
.dj-scheda__foto .product-gallery-preview { order: 0 !important; }
.dj-scheda__foto .product-gallery-thumblist {
  order: 1 !important;
  display: flex;
  flex-wrap: wrap;
  /* ⚠️ `!important`: il markup condiviso mette `m-0` sulla striscia, cioe'
   * `margin: 0 !important`. Senza, le miniature restavano appiccicate alla
   * foto. `margin-left` invece era ridondante — la riga sotto lo copre. */
  margin: .35rem 0 0 !important;
}

/* --- su una colonna sola la foto non deve prendersi la schermata ------ */
/* ⛔ MISURATO SUL SITO VERO IL 27 AGO 2026 A 673 PIXEL — il pieghevole di Di
 * Canio, aperto. Sotto i 992 la scheda e' a colonna singola e la foto e'
 * quadrata: larga 643 vuol dire alta 653, cioe' PIU' DELLO SCHERMO una volta
 * tolta la testa del sito. Il prezzo cadeva a 936 su una finestra da 900 —
 * fuori di 86 pixel — e il pulsante pure. Si vedeva una fotografia grande e
 * nient'altro: per sapere quanto costa bisognava scorrere.
 *
 * ⚠️ `vh` e non un numero fisso: il limite deve seguire l'altezza dello
 * schermo, perche' il difetto nasce dal rapporto fra i due — su un telefono
 * corto una foto da 420 pixel sarebbe di nuovo tutta la schermata.
 * ⚠️ `contain`: la foto si rimpicciolisce, non si taglia. Su un catalogo
 * tagliare l'articolo e' peggio che mostrarlo piccolo. */
@media (max-width: 991.98px) {
  /* ⚠️ DUE VINCOLI, E VINCE IL PIÙ STRETTO. `42vh` da solo non basta: la testa
   * del sito — barra, ricerca, nastro dei reparti, riga della consegna, nome
   * del prodotto — è alta circa 250 pixel e NON si rimpicciolisce con lo
   * schermo. Su una finestra corta restava comunque troppo poco per il prezzo:
   * 📏 misurato a 320x568, fuori di 109 pixel, e a 360x640 di 70. Il secondo
   * vincolo toglie quello che serve alla testa e alla riga del prezzo. */
  .dj-scheda__foto .product-gallery-preview,
  .dj-scheda__foto .product-gallery-preview-item,
  .dj-scheda__foto .product-gallery-preview-item img {
    /* 📏 I 420 NON SONO A OCCHIO, SONO MISURATI: la testa del sito su schermo
     * stretto è alta 312-332 pixel (barra, ricerca, nastro dei reparti, riga
     * della consegna, nome del prodotto) e dal fondo della foto al fondo del
     * prezzo ne servono altri 77-88. La prima stesura ne toglieva 340 e non
     * bastava: restavano sei misure col prezzo sotto la piega. */
    /* ⛔ 480 E NON 420: il conto va fatto sull'altezza UTILE, non su quella
     * della finestra. In fondo allo schermo c'e' una barra FISSA coi comandi,
     * alta 56 pixel, e tutto quello che ci finisce sotto e' coperto. La prima
     * stesura la ignorava e il banco dava «22 su 22 dentro» mentre sul sito
     * vero «Aggiungi» stava 90 pixel sotto la barra. */
    max-height: min(40vh, calc(100vh - 480px));
    min-height: 140px;
  }
  .dj-scheda__foto .product-gallery-preview-item img {
    width: 100%;
    object-fit: contain !important;
  }
  /* ⛔ E LA STRISCIA DELLE MINIATURE VA CONTATA. Sui prodotti con più foto si
   * mandava a capo su più righe e si riprendeva tutto lo spazio guadagnato:
   * 📏 sul prodotto con 19 immagini il blocco restava alto 552 pixel e il
   * prezzo cadeva 307 pixel sotto la piega. Una riga sola che scorre di lato,
   * come il nastro dei reparti. */
  .dj-scheda__foto .product-gallery-thumblist {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: 74px;
  }
  .dj-scheda__foto .product-gallery-thumblist-item {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    margin: .3rem;
  }
  /* Sotto i 992 il riquadro della foto respira meno: ogni pixel qui e' un
   * pixel tolto al prezzo. */
  .dj-scheda__foto { padding: 8px; }

  /* ⛔ PREZZO E PULSANTE SULLA STESSA RIGA, SU TUTTA LA COLONNA SINGOLA. In fondo allo schermo c'è una
   * barra FISSA coi comandi, alta 56 pixel: l'altezza davvero utile su un
   * pieghevole chiuso non è 653 ma 598. 📏 Misurato sul sito vero: il prezzo
   * finiva a 599 — un pixel oltre — e «Aggiungi» a 687, cioè 90 pixel SOTTO
   * la barra, coperto. Il blocco in colonna costava 165 pixel fra prezzo e
   * pulsante; affiancati ne costano poco più di 50.
   *
   * ⚠️ È lo stesso difetto che il banco non vedeva, perché misurava contro
   * l'altezza della finestra invece che contro quella utile. */
  .dj-scheda__acquisto .dj-product-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
  }
  .dj-scheda__acquisto .dj-product-card > .card-body:first-child {
    flex: 0 0 auto;
    padding: 0 !important;
  }
  .dj-scheda__acquisto .dj-product-card > .card-body:last-child {
    flex: 1 1 auto;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .dj-scheda__acquisto .product-price { font-size: 19px; }
  /* ⚠️ La riga delle scorte va a capo sotto, non stretta accanto al pulsante. */
  .dj-scheda__acquisto .dj-product-card > .card-body:last-child > p { display: none; }
}

/* --- gli schermi davvero corti ---------------------------------------- */
/* ⚠️ Sotto i 576 pixel di larghezza gli schermi sono anche i piu' corti (568,
 * 640, 653), e li' la testa del sito da sola si prende meta' schermata. La
 * striscia delle miniature si stringe ancora: le altre fotografie restano
 * raggiungibili aprendo quella grande. */
@media (max-width: 575.98px) {
  .dj-scheda__foto .product-gallery-preview,
  .dj-scheda__foto .product-gallery-preview-item,
  .dj-scheda__foto .product-gallery-preview-item img {
    max-height: min(36vh, calc(100vh - 500px));
    min-height: 120px;
  }
  /* ⛔ E LA STRISCIA SPARISCE. 📏 Misurato: su uno schermo da 653 pixel di
   * altezza la testa del sito ne prende 332 e la riga del prezzo altri 77 —
   * restano 244 per la fotografia. La striscia se ne mangiava 52, e su un
   * prodotto con 19 immagini il prezzo restava fuori di 44 pixel.
   * ⚠️ Le altre fotografie NON si perdono: si aprono toccando quella grande,
   * che è un collegamento alla galleria a pieno schermo. Su uno schermo così
   * corto quella è comunque la strada migliore per guardarle. */
  .dj-scheda__foto .product-gallery-thumblist { display: none !important; }

}

/* --- da tablet in su: foto a sinistra, il resto a destra -------------- */
@media (min-width: 992px) {
  .dj-scheda {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .dj-scheda > * { min-width: 0; }
  .dj-scheda__foto { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 12px; }
  .dj-scheda__acquisto { grid-column: 2; grid-row: 1; }
  .dj-scheda__testo { grid-column: 2; grid-row: 2; }
}

/* --- da computer in su: le tre colonne vere --------------------------- */
@media (min-width: 1200px) {
  .dj-scheda {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr) 292px;
    gap: 30px;
  }
  .dj-scheda__foto { grid-column: 1; grid-row: 1; }
  .dj-scheda__testo { grid-column: 2; grid-row: 1; }
  .dj-scheda__acquisto { grid-column: 3; grid-row: 1; position: sticky; top: 12px; }
}

.dj-scheda__acquisto .dj-product-card {
  border: 1px solid var(--tema-bordo);
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  padding: 6px;
}
/* ⚠️ Il nome del prodotto dentro questo riquadro resta nascosto, e va bene
 * così: lo nasconde il foglio del sito perché `product-modal-heading` serve
 * alla finestra di anteprima, e il nome sta già in testa alla pagina, dove è
 * l'unico `<h1>`. Il riquadro porta prezzo, quantità e pulsante — quello che
 * serve per comprare, e niente altro. */
.dj-scheda__acquisto .product-price { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.dj-scheda__acquisto .product-price .text-accent { color: var(--tema-inchiostro) !important; }
.dj-scheda__acquisto .product-actions-trigger { width: 100%; }
.dj-scheda__acquisto .product-actions-trigger .btn { min-height: 44px; }

.dj-scheda__testo .dj-category-related { margin-top: 0 !important; }
.dj-scheda__titoletto { font-size: 17px; font-weight: 700; margin: 4px 0 10px; }
.dj-scheda__corpo p { font-size: 14.5px; line-height: 1.6; margin-bottom: .6rem; overflow-wrap: anywhere; }


/* --- le pagine informative -------------------------------------------- */
/* Contatti, Privacy, Cookie: la colonna dei titoli come indice a sinistra e
 * il testo a destra. Stessa aria delle pagine di servizio dei grandi negozi:
 * niente fascia, niente vetrina, solo testo leggibile.
 *
 * ⛔ `.dj-informativa` E NON `.dj-profile`. Il commento diceva «Contatti,
 * Privacy, Cookie», ma quella classe sta in CINQUE layout, e uno di quelli è
 * `b2c/__layout_sidebar.html`, cioè TUTTA l'area cliente — Ordini, Indirizzi,
 * Impostazioni. In veste G quelle pagine si prendevano il padding e la misura
 * di testo scritti per il testo di legge, che non erano per loro. 📏 Misurato
 * il 27 ago 2026 su `/account/ordini/`: padding 24px invece di 48, e le cinque
 * voci del menu conto forzate a 14,5px. La classe nuova la mettono solo le
 * copie del layout delle tre pagine informative. */
.dj-informativa { padding-top: 24px !important; }
.dj-informativa p, .dj-informativa li { font-size: 14.5px; line-height: 1.65; }

/* ============ TABLET ============ */
/* ============ il riquadro che è una figura sola ============ */
/* Chiesto da Di Canio il 2 set 2026 con davanti una schermata di Amazon: un
 * box della fila che è tutto una figura — niente nome del reparto, niente
 * quattro caselle — e che cliccato apre il reparto scelto in pannello.
 *
 * ⛔ LA PRIMA STESURA AVEVA CAPITO UN'ALTRA COSA: una fascia larga quanto la
 * pagina, in una riga tutta sua. Francesco l'ha vista e l'ha bocciata:
 * «tutto il box deve diventare immagine». Quella regola è stata tolta, non
 * lasciata accanto a questa.
 *
 * ⛔ L'IMBOTTITURA NON SI TOGLIE, SI ANNULLA — ed è il punto delicato.
 * `.dj-riquadri > *` dà la larghezza di base (460 px sulla «h», 312 sulla
 * «g», e altri valori nelle media query), ma il riquadro è a `content-box`:
 * la larghezza vera è quella base PIÙ l'imbottitura. 📏 Misurato: mettendo
 * `padding: 0` la figura veniva 460 px contro i 504 degli altri box —
 * quarantaquattro pixel in meno, cioè esattamente le due imbottiture.
 * Tenendo l'imbottitura e tirando fuori il link con margini negativi, la
 * figura resta larga come gli altri A OGNI MISURA DI SCHERMO, senza dover
 * ricopiare da nessuna parte i numeri delle media query.
 * ⚠️ I margini negativi leggono le stesse variabili dell'imbottitura: se un
 * domani cambia l'imbottitura, si muovono insieme. Ricopiare i numeri
 * sarebbe stato lo stesso difetto con un'altra faccia. */
.dj-riquadro--figura {
  overflow: hidden;      /* la figura segue gli angoli tondi del box */
  background: none;
  /* ⛔ QUI LO STIRAMENTO SI VUOLE, e non contraddice l'`align-items:
   * flex-start` della fila. Quello serve perché un box con pochi prodotti
   * non resti mezzo vuoto; una figura invece riempie tutto quello che le si
   * dà, quindi stirarla la mette alla stessa altezza degli altri box senza
   * lasciare un centimetro di bianco. */
  align-self: stretch;
}
.dj-riquadro__legame {
  display: block; flex: 1; text-decoration: none;
  margin: calc(-1 * var(--riquadro-su)) calc(-1 * var(--riquadro-lato))
          calc(-1 * var(--riquadro-giu));
  /* ⚠️ LA FORMA DI RIPIEGO, per quando la figura è SOLA nella fila e non c'è
   * nessun altro box a decidere l'altezza: senza, il box si accartoccerebbe
   * sull'imbottitura. 3:4 è la forma vera del riquadro (504 × 673 misurati),
   * ed è la stessa che il pannello chiede di caricare. */
  aspect-ratio: 3 / 4;
}
.dj-riquadro__scatto {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* ⚠️ IL SEGNO CHE SI PUÒ CLICCARE. Gli altri box hanno il titolo che si
 * sottolinea e la scritta «Scopri tutto il reparto»; la figura non ha né
 * l'uno né l'altra, quindi il segnale deve darlo lei. Appena percettibile, e
 * SOLO col mouse: `hover: hover` tiene fuori i telefoni, dove uno stato
 * «sopra» resta appiccicato dopo il tocco. */
@media (hover: hover) {
  .dj-riquadro__scatto { transition: filter .18s ease, transform .18s ease; }
  .dj-riquadro__legame:hover .dj-riquadro__scatto {
    filter: brightness(1.05); transform: scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dj-riquadro__scatto { transition: none; }
  .dj-riquadro__legame:hover .dj-riquadro__scatto { transform: none; }
}

@media (max-width: 1024px) {
  .dj-riquadri > * { flex: 0 0 282px; }
  .dj-riquadri > .dj-riquadro--stretto { flex-basis: 200px; }
  /* ⛔ NIENTE `min-height` FISSO qui: stessa correzione del desktop, per
   * non spegnere su tablet quello che si e' appena acceso su schermo grande. */

  /* --- le altre pagine --- */
  .dj-griglia { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .dj-testa-risultati__titolo { font-size: 19px; }
  .dj-risultati { padding: 14px 14px 30px; }
}

/* ============ TELEFONO ============ */
@media (max-width: 767px) {
  .dj-alta__riga { padding: 9px 12px; gap: 10px; }
  .dj-alta__destra { gap: 12px; font-size: 12.5px; }
  /* ⚠️ Su schermo stretto le parole dei comandi vanno via ma il carrello
   * resta: e' l'unico che deve restare leggibile a colpo d'occhio. */
  .dj-alta__voce { display: none; }
  .dj-alta__marchio img { height: 22px; }
  .dj-cerca { padding: 0 12px 12px; }
  .dj-riquadri { padding: 14px 12px 16px; gap: 10px; }
  /* ⚠️ I riquadri restano una fascia che SCORRE, non diventano una colonna:
   * si vede sempre il bordo del successivo, ed è quello che invita a
   * spingere di lato. */
  .dj-riquadri > * { flex: 0 0 84vw; }
  .dj-riquadri > .dj-riquadro--stretto { flex-basis: 62vw; }
  .dj-riquadro { min-height: auto; padding: 14px; }
  .dj-riquadro__titolo { font-size: 17px; }
  .dj-fascia { margin: 0 12px 14px; }
  .dj-fascia__testa h2 { font-size: 17px; }
  .dj-pezzo { flex: 0 0 140px; }

  /* --- le altre pagine --- */
  /* ⚠️ 150px di minimo: su un telefono da 375 restano due colonne (come sui
   * grandi negozi), e su un pieghevole CHIUSO da 280 ne resta una sola, larga
   * abbastanza per leggere nome e prezzo senza strizzare gli occhi. */
  .dj-griglia { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .dj-griglia .dj-product-card { padding: 8px; }
  .dj-griglia .product-title { font-size: 13px; }
  .dj-griglia .product-price { font-size: 15.5px; }
  .dj-risultati { padding: 12px 12px 26px; }
  .dj-testa-risultati__dentro { padding: 11px 12px; }
  .dj-testa-risultati__titolo { font-size: 17px; }
  .dj-scheda { padding-top: 12px; gap: 12px; }
  .dj-scheda__foto { padding: 8px; }
  .dj-scheda__acquisto .product-price { font-size: 21px; }

  /* ⛔ LE REGOLE DELLA FASCIA-IMMAGINE STANNO QUI DENTRO, non in un blocco
   * «(max-width: 767px)» tutto loro in fondo al foglio. I tre blocchi finali
   * hanno la stessa forza e vince l'ultimo scritto: un quarto blocco a 767
   * dopo quello del pieghevole (600-767.98) sposta l'ultima parola, e a 673
   * pixel — lo schermo che usa Di Canio — tornerebbe la regola del telefono.
   * 📏 Preso da `banco_veste_g_altre_pagine`, che sorveglia proprio quest'ordine.
   *
   * ⛔ E LA FORMA NON CAMBIA SU TELEFONO, dopo averlo provato davvero. La
   * prima stesura qui portava la fascia a 2:1 «perche' a 375 px il 4:1 da'
   * una striscia di 94 px». Ma con `object-fit: cover` una fascia 2:1 che
   * riceve un'immagine 4:1 tiene solo la STRISCIA CENTRALE: nei banner il
   * titolo e il pulsante stanno a sinistra, quindi su telefono sparivano
   * proprio quelli — restavano le decorazioni. 📏 Visto guardando
   * l'anteprima, non dedotto. Meglio una fascia piu' bassa che si vede
   * tutta: chi la fa la disegna una volta sola e deve ritrovarla intera. */

}

/* ============ IL PIEGHEVOLE APERTO ============ */
/* ⛔ FRA 600 E 767 PIXEL C'ERA UNA TERRA DI NESSUNO. Un Galaxy Fold aperto
 * misura 673px: cadeva nella regola del telefono e il riquadro si prendeva
 * l'84% dello schermo — 565 pixel su 673, cioè un riquadro e mezzo in vista
 * su uno schermo quasi quadrato. Su un telefono stretto quella misura è
 * giusta (si vede il bordo del successivo e invita a spingere); su uno
 * schermo largo il doppio è solo spreco.
 * Misurato il 26 ago 2026 su dodici schermi, pieghevole compreso — che è poi
 * il telefono che usa Di Canio. */
@media (min-width: 600px) and (max-width: 767.98px) {
  .dj-riquadri > * { flex: 0 0 300px; }
  .dj-riquadri > .dj-riquadro--stretto { flex-basis: 210px; }
  /* niente `min-height` fisso: vedi la nota sul desktop. */
  /* Le voci della barra tornano visibili: c'è lo spazio per leggerle. */
  .dj-alta__voce { display: inline-flex; }

  /* --- le altre pagine ---
   * ⚠️ Su uno schermo quasi quadrato da 673px la regola del telefono darebbe
   * quattro colonne da 155: schede troppo strette per il nome. Con 200 di
   * minimo ne restano tre, larghe come quelle del tablet. */
  .dj-griglia { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .dj-griglia .product-title { font-size: 13.5px; }
  .dj-griglia .product-price { font-size: 16.5px; }
  .dj-testa-risultati__titolo { font-size: 19px; }
}

/* ============ IL PIEGHEVOLE CHIUSO, E I TELEFONI PIÙ STRETTI ============ */
/* ⛔ IL DIFETTO, MISURATO SUL SITO VERO IL 27 AGO 2026 A 280 PIXEL. Sotto i
 * 360 la griglia sta su UNA colonna sola, e la scheda in piedi diventava alta
 * 503 pixel su uno schermo da 653: la foto se ne prendeva 238, e il PREZZO
 * (a 687) e il pulsante «Aggiungi» (a 739) finivano fuori dallo schermo.
 * Per sapere quanto costa il primo prodotto bisognava scorrere 130 pixel.
 * Un prodotto per schermata, e senza il prezzo.
 *
 * ⚠️ 360 NON È UNA MISURA SCELTA A OCCHIO: è il punto in cui la griglia passa
 * da una colonna a due (`minmax(150px, 1fr)` più il gap). Sopra, la scheda in
 * piedi funziona già e non si tocca. Sotto, lo spazio va usato in orizzontale.
 *
 * Il telefono di Di Canio è un pieghevole: chiuso misura 280. */
@media (max-width: 359.98px) {
  .dj-griglia .dj-product-card { flex-direction: row; gap: 10px; align-items: flex-start; }
  .dj-griglia .dj-product-card__media { flex: 0 0 88px; width: 88px; }
  .dj-griglia .dj-product-card__content { padding-top: 0 !important; min-width: 0; }
  /* ⚠️ Il fondo torna in cima: in riga non c'è spazio avanzato da spingere in
   * basso, e `margin-top: auto` allontanerebbe il prezzo dal nome. */
  .dj-griglia .dj-product-card__content > .card-body:first-child > .d-flex {
    margin-top: 0; padding-top: 4px;
  }
  .dj-griglia .product-title { font-size: 12.5px; }
  .dj-griglia .product-meta { font-size: 10.5px; }
  .dj-griglia .product-price { font-size: 15px; }
  .dj-griglia .card-body-hidden { padding-top: 6px !important; }
  /* La riga di «Preview» qui non serve: ruba altezza e la scheda si apre
   * comunque premendo il nome. */
  .dj-griglia .js-product-detail-modal-hook { display: none !important; }
}

/* ============ LA BARRA CHE SI VEDE, SU TUTTE LE SEZIONI ============ */
/* ⛔ CHIESTO DA DI CANIO il 2 set 2026 (video del suo schermo, riferito da
 * Francesco): «la barra di scorrimento orizzontale deve uscire per tutte le
 * sezioni». Il 1 set era stata messa SOLO sulle file di riquadri, e solo
 * nella veste h: le fasce che scorrono di lato — «I piu' venduti su Amazon»
 * e le altre — la NASCONDEVANO di proposito (`scrollbar-width: none` piu'
 * `::-webkit-scrollbar { display: none }`), e nella veste g non ce l'aveva
 * nemmeno la fila dei riquadri.
 * 📏 Il fatto misurato che aveva generato la correzione del 1 set, e che vale
 * identico per le fasce: a 1920 px dodici riquadri fanno 5.702 pixel dentro
 * 1.500 di spazio — se ne vedono TRE — e la barra occupava ZERO pixel.
 *
 * `overflow-x: auto` DA SOLO NON BASTA: macOS e Chrome su Windows disegnano
 * barre «a scomparsa», che appaiono solo mentre si trascina. Chi non sa gia'
 * che il contenuto scorre non ha modo di scoprirlo: un invito che compare
 * solo dopo aver fatto la cosa non e' un invito.
 *
 * ⛔ SCRITTA UNA VOLTA PER TUTTI GLI SCORRIMENTI, non ricopiata su ognuno.
 * La correzione del 1 set era finita su un selettore solo, e le fasce sono
 * rimaste indietro per un giorno senza che nessuno se ne accorgesse: e' lo
 * stesso difetto delle vesti-copia, un piano piu' giu'. Aggiungendo domani
 * un'altra fila che scorre, si aggiunge il suo nome QUI e basta.
 * ⚠️ `scrollbar-color` copre Firefox, `::-webkit-scrollbar` copre Chrome,
 * Edge e Safari: insieme fanno tutti i browser che il negozio incontra. */
.dj-riquadri,
.dj-fascia__nastro {
  scrollbar-width: thin;
  scrollbar-color: #9c1c22 #e6ddd2;
}
.dj-riquadri::-webkit-scrollbar,
.dj-fascia__nastro::-webkit-scrollbar { height: 12px; }
.dj-riquadri::-webkit-scrollbar-track,
.dj-fascia__nastro::-webkit-scrollbar-track {
  background: #e6ddd2; border-radius: 6px; margin: 0 14px;
}
.dj-riquadri::-webkit-scrollbar-thumb,
.dj-fascia__nastro::-webkit-scrollbar-thumb {
  background: #9c1c22; border-radius: 6px; border: 2px solid #e6ddd2;
}
.dj-riquadri::-webkit-scrollbar-thumb:hover,
.dj-fascia__nastro::-webkit-scrollbar-thumb:hover { background: #7d151a; }

/* ⛔ IL NASTRO DEI REPARTI HA LA SUA, PIU' SOTTILE E COI SUOI COLORI, e non
 * e' un capriccio: quella riga sta in cima a OGNI pagina del sito, dentro la
 * barra scura. Una barra rossa da 12 px la' sotto alzerebbe la navigazione di
 * dodici pixel su tutto il sito e stonerebbe col fondo. Qui e' da 8, nei toni
 * della barra stessa.
 * ⚠️ E si vede SOLO quando serve: `overflow-x: auto` non disegna niente se i
 * reparti ci stanno tutti. Su uno schermo largo non cambia nulla. */
.dj-reparti__riga {
  scrollbar-width: thin;
  scrollbar-color: #cbb9a4 var(--g-reparti, #33443b);
}
.dj-reparti__riga::-webkit-scrollbar { height: 8px; }
.dj-reparti__riga::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .18);
}
.dj-reparti__riga::-webkit-scrollbar-thumb {
  background: #cbb9a4; border-radius: 4px;
}
.dj-reparti__riga::-webkit-scrollbar-thumb:hover { background: #e6ded2; }

/* ⛔ LA PISTA DELLA FASCIA, il guscio su cui si appoggiano le frecce.
 * 📏 2 set 2026, misurato sul sito vivo: le file di riquadri avevano SEI
 * frecce e le fasce ZERO — ed era quello, non la barra del browser, il
 * segnale che Di Canio vedeva comparire su alcune sezioni e non su altre.
 * ⚠️ `position: relative` QUI e non su `.dj-fascia`: cosi' le frecce si
 * centrano sulla MERCE. Appoggiandole alla scatola intera, che comprende
 * anche il titolo, finirebbero 26 px piu' in alto del mezzo (misurato:
 * scatola 322 px, nastro 252 che comincia a 52 dall'alto). */
.dj-fascia__pista { position: relative; }

/* ⛔ SU TOUCH LE FRECCE SPARISCONO, e non e' una rinuncia: col dito si scorre
 * gia', quindi la freccia non aggiunge niente e in cambio TOGLIE qualcosa.
 * 📏 Misurato dai numeri del foglio: su telefono `.dj-pezzo` sta a 140 px di
 * base, la freccia resta 44 px con `z-index: 3` sopra il nastro — copre circa
 * un terzo dell'ultima scheda visibile e si mangia il tocco che avrebbe
 * aperto quel prodotto. Sui riquadri la stessa freccia copriva una scheda da
 * 84vw, quindi non si notava; sulle fasce, che in home sono quattro o piu',
 * si notava eccome.
 * ⚠️ `hover: none` e non una larghezza: un portatile con lo schermo tattile
 * dichiara comunque `hover: hover` e le frecce le tiene, giustamente. */
@media (hover: none) {
  .dj-fila__freccia { display: none; }
}

/* ⚠️ SULLA FASCIA LE FRECCE SALGONO DI 11 PIXEL. La pista e' alta quanto il
 * nastro, ma il nastro ha 10 px di imbottitura sotto piu' i 12 della barra di
 * scorrimento: il centro della MERCE sta (10+12)/2 = 11 px piu' in alto del
 * centro della scatola. Senza questa riga la freccia finisce mezza sulla
 * barra invece che sulla merce. Sui riquadri lo scarto e' di 4 px e non si
 * vede, per questo la correzione vale solo qui. */
.dj-fascia__pista .dj-fila__freccia {
  transform: translateY(calc(-50% - 11px));
}