/* ==========================================================================
   IL NEGOZIO: VETRINA E SCHEDA PRODOTTO.

   Perche' un file statico e non classi di Tailwind: il foglio compilato del
   sito NON si rigenera (npm run build riscriverebbe il manifest di tutte le
   pagine), quindi una classe che non e' gia' dentro app-*.css non esiste. Qui
   ci sono solo le cose che in quel foglio non ci sono: la barra dei filtri, il
   pulsante di acquisto, gli stati della disponibilita', la galleria e il
   contenimento delle descrizioni che arrivano da WordPress.

   I colori vengono dalle variabili del sito (--color-primary...), con il
   valore di ripiego accanto: lo stesso modo del pezzo delle domande frequenti.

   LA REGOLA DEI 390 PIXEL: niente scorrimento orizzontale su un telefono.
   Le griglie sono minmax(min(100%, ...)) - il min(100%) e' quello che evita la
   colonna piu' larga dello schermo - e tutto quello che arriva dal contenuto
   (immagini, video, tabelle del vecchio tema) e' contenuto qui sotto.
   ========================================================================== */

.neg-barra {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    padding: 1rem;
    margin: 0 0 1.5rem;
}

.neg-barra > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
    line-height: 44px;
}

.neg-barra > summary::-webkit-details-marker { display: none; }

.neg-barra > summary::after {
    content: '';
    margin-left: auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--color-primary, #c7081b);
    border-bottom: 2px solid var(--color-primary, #c7081b);
    transform: rotate(45deg);
    transition: transform .15s ease-out;
}

.neg-barra[open] > summary::after { transform: rotate(-135deg); }

.neg-barra > summary:focus-visible,
.neg-acquista:focus-visible,
.neg-whatsapp:focus-visible,
.neg-miniatura:focus-visible,
.neg-select:focus-visible,
.neg-invia:focus-visible {
    outline: 3px solid var(--color-primary, #c7081b);
    outline-offset: 2px;
}

/* La barra dei filtri: un modulo GET, quindi i filtri finiscono nell'indirizzo
   e una ricerca si manda a un collega incollando il link. */
.neg-filtri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.neg-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.neg-campo > label { font-size: .8125rem; font-weight: 600; color: #374151; }

.neg-select {
    font: inherit;
    font-size: .9375rem;
    width: 100%;
    min-height: 44px;
    padding: .5rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    background: #fff;
    color: var(--color-secondary, #1a1a2e);
}

.neg-azioni { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }

.neg-invia {
    font: inherit;
    font-weight: 700;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: .5rem;
    background: var(--color-primary, #c7081b);
    color: #fff;
    cursor: pointer;
}

.neg-invia:hover { background: var(--color-primary-dark, #a30615); }

.neg-azzera {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .9375rem;
    color: #4b5563;
    text-decoration: underline;
}

.neg-azzera:hover { color: var(--color-primary, #c7081b); }

.neg-conteggio { font-size: .9375rem; color: #4b5563; margin: 0 0 1rem; }
.neg-conteggio strong { color: var(--color-secondary, #1a1a2e); }

.neg-avviso {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin: 0 0 1rem;
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   LA GRIGLIA E LA SCHEDA CORTA.
   -------------------------------------------------------------------------- */

.neg-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
}

.neg-scheda {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease-out, border-color .2s ease-out;
}

.neg-scheda:hover { box-shadow: 0 12px 28px rgba(15, 23, 42, .12); border-color: #d1d5db; }

.neg-figura { display: block; aspect-ratio: 1 / 1; background: #f8fafc; overflow: hidden; }
.neg-figura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.neg-figura--vuota { display: flex; align-items: center; justify-content: center; color: #cbd5e1; }

.neg-corpo { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.1rem; flex: 1 1 auto; min-width: 0; }

.neg-marca { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary, #c7081b); }
.neg-marca a { color: inherit; }
.neg-marca a:hover { text-decoration: underline; }

.neg-titolo { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.neg-titolo a { color: var(--color-secondary, #1a1a2e); }
.neg-titolo a:hover { color: var(--color-primary, #c7081b); }

.neg-estratto { margin: 0; font-size: .875rem; color: #6b7280; line-height: 1.5; }

.neg-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: auto; }
.neg-prezzo-vero { font-size: 1.375rem; font-weight: 800; color: var(--color-primary, #c7081b); }
.neg-prezzo-listino { font-size: .9375rem; color: #9ca3af; text-decoration: line-through; }
.neg-prezzo-sconto { font-size: .75rem; font-weight: 700; color: #065f46; background: #d1fae5; border-radius: 999px; padding: .1rem .5rem; }
.neg-prezzo-iva { display: block; width: 100%; font-size: .75rem; color: #6b7280; }
.neg-prezzo-richiesta { font-size: 1rem; font-weight: 700; color: var(--color-secondary, #1a1a2e); }

/* Gli stati della disponibilita': tre, come li ha WooCommerce. */
.neg-stato { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; }
.neg-stato::before { content: ''; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; flex: 0 0 auto; }
.neg-stato--disponibile { color: #047857; }
.neg-stato--su-ordinazione { color: #b45309; }
.neg-stato--esaurito { color: #b91c1c; }

/* ==========================================================================
   IL PULSANTE CHE E' COSTATO ORDINI PER ANNI.

   Sul sito vecchio il pulsante di acquisto nella griglia compariva solo al
   passaggio del mouse: su un telefono non compariva mai, e dalla griglia non si
   poteva comprare niente. Qui sta SOTTO IL PREZZO, sempre visibile, alto 48
   pixel (piu' dei 44 minimi consigliati per il dito) e larga tutta la scheda.
   Niente :hover che lo faccia apparire, niente opacity: 0.
   ========================================================================== */

.neg-acquista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 48px;
    padding: .7rem 1rem;
    border: 0;
    border-radius: .5rem;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    background: var(--color-primary, #c7081b);
    color: #fff;
    transition: background-color .15s ease-out;
}

.neg-acquista:hover { background: var(--color-primary-dark, #a30615); color: #fff; }

.neg-acquista--secondario {
    background: #fff;
    color: var(--color-secondary, #1a1a2e);
    border: 1px solid #d1d5db;
}

.neg-acquista--secondario:hover { background: #f9fafb; color: var(--color-primary, #c7081b); }

.neg-acquista svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.neg-dettagli { display: inline-block; text-align: center; font-size: .875rem; font-weight: 600; color: #4b5563; min-height: 44px; line-height: 44px; }
.neg-dettagli:hover { color: var(--color-primary, #c7081b); }

/* --------------------------------------------------------------------------
   LA SCHEDA LUNGA.
   -------------------------------------------------------------------------- */

.neg-scheda-alta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2.5rem; align-items: start; }

/* LA FOTO DI UN PRODOTTO NON SI STIRA MAI (02/10/2026).
   Era `width: 100%; height: 100%`: il riquadro e' largo 660 px e le foto dei
   fornitori di antifurti sono 560x560, quindi il browser le allargava di 1,18
   volte — ed e' questo che si vedeva come «le foto dei prodotti sono
   sfocate», su sei prodotti su otto. Di piu' grande non esiste: 560 e' il
   massimo che ha dato il fornitore.
   Il riquadro quadrato resta (serve a non far saltare la pagina mentre la
   foto arriva); dentro, la foto sta grande quanto e' e si centra. */
.neg-galleria-grande {
    border-radius: 1rem; overflow: hidden; background: #f8fafc; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
}
.neg-galleria-grande img {
    width: auto; max-width: 100%;
    height: auto; max-height: 100%;
    object-fit: contain; display: block;
}

.neg-miniature { display: flex; gap: .6rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; }

.neg-miniatura {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.neg-miniatura img { width: 100%; height: 100%; object-fit: contain; display: block; }
.neg-miniatura[aria-current="true"] { border-color: var(--color-primary, #c7081b); }

.neg-dati { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.neg-dati h1 { margin: 0; font-size: clamp(1.5rem, 5vw, 2.125rem); line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.neg-sku { font-size: .875rem; color: #6b7280; margin: 0; }
.neg-prezzo-alto .neg-prezzo-vero { font-size: 2rem; }

.neg-acquisto { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.neg-quantita { display: inline-flex; align-items: stretch; border: 1px solid #d1d5db; border-radius: .5rem; overflow: hidden; background: #fff; }
.neg-quantita button { font: inherit; font-size: 1.125rem; width: 44px; min-height: 48px; border: 0; background: #fff; cursor: pointer; color: var(--color-secondary, #1a1a2e); }
.neg-quantita button:hover { background: #f3f4f6; }
.neg-quantita input { font: inherit; width: 3.25rem; min-height: 48px; text-align: center; border: 0; border-left: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; }
.neg-acquisto .neg-acquista { width: auto; flex: 1 1 12rem; }

.neg-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 48px;
    padding: .7rem 1.25rem;
    border-radius: .5rem;
    font-weight: 700;
    background: #16a34a;
    color: #fff;
    width: fit-content;
    max-width: 100%;
}

.neg-whatsapp:hover { background: #15803d; color: #fff; }
.neg-whatsapp svg { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }

.neg-meta { border-top: 1px solid #e5e7eb; padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: #6b7280; }
.neg-meta a { color: var(--color-primary, #c7081b); }
.neg-meta a:hover { text-decoration: underline; }
.neg-meta strong { color: #374151; }

/* IL TESTO CHE VALE: la descrizione lunga scritta negli anni (8.000 caratteri
   di media). Arriva da WordPress col vecchio tema dentro: immagini con
   width="600", tabelle di quattro colonne, un video. Tutto contenuto, altrimenti
   a 390 pixel la pagina scorre di lato. */
.neg-descrizione { overflow-wrap: break-word; }
.neg-descrizione img,
.neg-descrizione video,
.neg-descrizione iframe,
.neg-descrizione svg { max-width: 100%; height: auto; }
.neg-descrizione iframe { aspect-ratio: 16 / 9; width: 100%; }
.neg-descrizione table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.neg-descrizione td, .neg-descrizione th { padding: .4rem .6rem; border: 1px solid #e5e7eb; vertical-align: top; }
.neg-descrizione pre { overflow-x: auto; }
.neg-descrizione * { max-width: 100%; }

.neg-titolo-sezione { font-size: 1.5rem; font-weight: 800; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid #e5e7eb; }

.neg-colonna { display: flex; flex-direction: column; gap: 1.75rem; }
.neg-elenco-collegamenti { display: flex; flex-direction: column; gap: .15rem; }
.neg-voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 44px;
    padding: .35rem .6rem;
    border-radius: .5rem;
    font-size: .9375rem;
    color: #374151;
}
.neg-voce:hover { background: #f3f4f6; color: var(--color-primary, #c7081b); }
.neg-voce[aria-current="page"] { background: var(--color-primary, #c7081b); color: #fff; }
.neg-voce[aria-current="page"] .neg-voce-quanti { color: #fff; }
.neg-voce-quanti { font-size: .8125rem; color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
    .neg-scheda, .neg-acquista, .neg-barra > summary::after { transition: none; }
}

/* DA TELEFONO I PRODOTTI VENGONO PRIMA.
   La colonna dei collegamenti ha diciassette voci fra categorie e marchi: in
   cima a uno schermo da 390 pixel vuol dire due schermate di elenco prima di
   vedere un prodotto. Sotto i 1024 pixel la colonna scende sotto la griglia
   (l'ordine del codice resta quello giusto per chi legge con la tastiera o con
   un lettore di schermo: i collegamenti di navigazione stanno prima). */
@media (max-width: 1023px) {
    .neg-colonna { order: 2; }
    .neg-risultati { order: 1; }
}