/* ==========================================================================
   LISTA KASHER - prodotti approvati ARI/UCEI, con foto e codice a barre
   ==========================================================================

   Pensata per il telefono in mano davanti allo scaffale: la ricerca resta in
   cima mentre si scorre, le schede sono strette e si leggono in un colpo
   d'occhio (foto, marca, nome, bollino), e quello che obbliga a guardare la
   confezione - simbolo, lotto, stabilimento - e' scritto in chiaro con il suo
   colore, non nascosto in una nota.

   Le schede escono gia' dal server: senza JavaScript la barra e i filtri
   restano nascosti e si legge l'elenco intero.
   ========================================================================== */

.ceb-kasher {
    --ksh-parve: #2f6b3a;
    --ksh-parve-fondo: #e6f1e5;
    --ksh-latte: #1d4a75;
    --ksh-latte-fondo: #e3edf7;
    --ksh-pesce: #6b4a1d;
    --ksh-pesce-fondo: #f5ecdc;
    --ksh-avviso: #8a4b08;
    --ksh-avviso-fondo: #fdf1dc;
    --ksh-avviso-filo: #e8b35c;
    --ksh-foto: 96px;
    margin-block: 1.25rem 2rem;
}

/* --- la barra: ricerca e scanner, ferma in cima ------------------------- */

.ceb-kasher__barra {
    position: sticky;
    top: var(--ceb-header-h, 96px);    /* sotto la testata, che resta anche lei in cima */
    z-index: 20;
    display: flex;
    gap: .5rem;
    padding: .6rem 0;
    background: var(--ceb-white);
    box-shadow: 0 8px 12px -12px rgba(18, 51, 84, .35);
}

.ceb-kasher__barra[hidden],
.ceb-kasher__filtri[hidden] { display: none; }

.ceb-kasher__cerca {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ceb-kasher__cerca svg {
    position: absolute;
    left: .8rem;
    top: 50%;
    width: 1.2rem;
    height: 1.2rem;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--ceb-muted);
    stroke-width: 2;
    pointer-events: none;
}

.ceb-kasher__cerca input {
    width: 100%;
    height: 3rem;
    padding: 0 .9rem 0 2.6rem;
    border: 1.5px solid var(--ceb-line-strong);
    border-radius: 999px;
    background: var(--ceb-white);
    font: inherit;
    font-size: 1.0625rem;       /* sotto i 16px l'iPhone ingrandisce la pagina */
    color: var(--ceb-ink);
}

.ceb-kasher__cerca input:focus {
    outline: 3px solid var(--ceb-focus);
    outline-offset: 1px;
    border-color: transparent;
}

.ceb-kasher__scanner {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .45rem;
    height: 3rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 999px;
    background: var(--ceb-navy);
    color: var(--ceb-white);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ceb-kasher__scanner:hover { background: var(--ceb-navy-soft); }
.ceb-kasher__scanner:focus-visible { outline: 3px solid var(--ceb-focus); outline-offset: 2px; }

.ceb-kasher__scanner svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Sul telefono stretto il bottone resta solo icona: la scritta ruberebbe
   metà della barra alla ricerca. */
@media (max-width: 520px) {
    .ceb-kasher__scanner { width: 3rem; padding: 0; justify-content: center; }
    .ceb-kasher__scanner span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --- i filtri ----------------------------------------------------------- */

.ceb-kasher__filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: .5rem 0 .75rem;
}

/* La fila delle categorie scorre di lato: col dito sul telefono, col mouse
   trascinando o con le frecce sul computer. Le frecce compaiono solo dal lato
   dove c'e' ancora qualcosa, su una sfumatura che fa capire che la fila
   continua. Senza JavaScript resta la fila che scorre, senza frecce. */
.ceb-kasher__scorri {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
}

.ceb-kasher__schede {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .1rem 0 .15rem;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.ceb-kasher__schede::-webkit-scrollbar { display: none; }

.ceb-kasher__schede.e-trascinata {
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.ceb-kasher__freccia {
    position: absolute;
    top: 0;
    bottom: .15rem;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 3.5rem;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.ceb-kasher__freccia[hidden] { display: none; }

.ceb-kasher__freccia--sx {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(90deg, var(--ceb-white) 45%, rgba(255, 255, 255, 0));
}

.ceb-kasher__freccia--dx {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(270deg, var(--ceb-white) 45%, rgba(255, 255, 255, 0));
}

.ceb-kasher__freccia span {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid var(--ceb-line-strong);
    border-radius: 50%;
    background: var(--ceb-white);
    color: var(--ceb-navy);
    box-shadow: var(--ceb-shadow-sm);
    transition: background-color .15s, border-color .15s;
}

.ceb-kasher__freccia:hover span {
    border-color: var(--ceb-navy);
    background: var(--ceb-paper);
}

.ceb-kasher__freccia svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    .ceb-kasher__schede { scroll-behavior: auto; }
}

.ceb-kasher__schede button {
    flex: 0 0 auto;
    padding: .45rem .85rem;
    border: 1.5px solid var(--ceb-line-strong);
    border-radius: 999px;
    background: var(--ceb-white);
    color: var(--ceb-ink);
    font: inherit;
    font-size: .95rem;
    white-space: nowrap;
    cursor: pointer;
}

.ceb-kasher__schede button small {
    margin-left: .15rem;
    color: var(--ceb-muted);
    font-size: .8em;
}

.ceb-kasher__schede button[aria-pressed="true"] {
    border-color: var(--ceb-navy);
    background: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-kasher__schede button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.ceb-kasher__schede button:focus-visible { outline: 3px solid var(--ceb-focus); outline-offset: 1px; }

.ceb-kasher .ceb-kasher__parve {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .95rem;
    cursor: pointer;
}

.ceb-kasher__parve input { width: 1.1rem; height: 1.1rem; accent-color: var(--ksh-parve); }

.ceb-kasher .ceb-kasher__conta {
    margin: 0 0 0 auto;
    color: var(--ceb-muted);
    font-size: .95rem;
}

/* --- come leggere le schede ---------------------------------------------- */

.ceb-kasher__legenda {
    margin: 0 0 1rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius);
    background: var(--ceb-paper);
    font-size: .95rem;
}

.ceb-kasher__legenda summary {
    padding: .6rem .9rem;
    font-weight: 600;
    color: var(--ceb-navy);
    cursor: pointer;
}

.ceb-kasher .ceb-kasher__legenda dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .55rem 1rem;
    margin: 0;
    padding: 0 .9rem .9rem;
}

.ceb-kasher__legenda dt { font-weight: 600; }
.ceb-kasher .ceb-kasher__legenda dd { margin: 0; }

@media (max-width: 520px) {
    .ceb-kasher__legenda dl { grid-template-columns: 1fr; gap: .2rem; }
    .ceb-kasher__legenda dd { margin-bottom: .5rem; }
}

/* --- le schede -----------------------------------------------------------

   Le regole stanno sotto .ceb-kasher perche' quelle generali del corpo
   dell'articolo (rientro degli elenchi, spazio sopra i titoli) sono piu'
   specifiche di una classe sola, e vincerebbero. */

.ceb-kasher .ceb-kasher__gruppo h2 {
    margin: 1.75rem 0 .75rem;
    font-size: 1.35rem;
}

.ceb-kasher__gruppo[hidden] { display: none; }

.ceb-kasher .ceb-kasher__elenco {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ceb-kasher .ceb-kasher__prodotto {
    display: flex;
    gap: .85rem;
    margin: 0;
    padding: .7rem;
    border: 1px solid var(--ceb-line);
    border-radius: var(--ceb-radius-lg);
    background: var(--ceb-white);
    box-shadow: var(--ceb-shadow-sm);
}

.ceb-kasher__prodotto[hidden] { display: none; }

.ceb-kasher__foto {
    flex: 0 0 var(--ksh-foto);
    width: var(--ksh-foto);
    height: var(--ksh-foto);
    margin: 0;
    border-radius: var(--ceb-radius);
    background: var(--ceb-white);
    overflow: hidden;
}

.ceb-kasher__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

button.ceb-kasher__foto {
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

button.ceb-kasher__foto:focus-visible { outline: 3px solid var(--ceb-focus); outline-offset: 2px; }

.ceb-kasher__foto--vuota {
    display: grid;
    place-items: center;
    background: var(--ceb-paper);
}

.ceb-kasher__foto--vuota svg {
    width: 44%;
    fill: none;
    stroke: var(--ceb-line-strong);
    stroke-width: 2;
}

.ceb-kasher__testo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.ceb-kasher .ceb-kasher__testo p { margin: 0; }

.ceb-kasher__marca {
    color: var(--ceb-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* la tipologia accanto alla marca: minuscola e piu' leggera, perche' la
   marca resti la prima cosa che si legge */
.ceb-kasher__tipo {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ceb-kasher__tipo::before { content: "· "; }

/* una sezione senza prodotti, con la sola raccomandazione (la Farina) */
.ceb-kasher .ceb-kasher__prodotto--nota {
    grid-column: 1 / -1;
    display: block;
    background: var(--ceb-paper);
    border-left: 4px solid var(--ceb-gold);
}

.ceb-kasher .ceb-kasher__prodotto--nota p { margin: 0; line-height: 1.5; }

.ceb-kasher .ceb-kasher__nome {
    margin: 0;
    font-family: var(--ceb-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ceb-ink);
}

.ceb-kasher__formato,
.ceb-kasher__nota {
    font-size: .9rem;
    color: var(--ceb-ink);
}

.ceb-kasher__bollini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
    margin-top: .1rem !important;
}

.ceb-kasher__stato {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.ceb-kasher__stato--p  { background: var(--ksh-parve-fondo); color: var(--ksh-parve); }
.ceb-kasher__stato--l  { background: var(--ksh-latte-fondo); color: var(--ksh-latte); }
.ceb-kasher__stato--pe { background: var(--ksh-pesce-fondo); color: var(--ksh-pesce); }

.ceb-kasher__ente {
    font-size: .85rem;
    color: var(--ceb-muted);
}

.ceb-kasher__avviso {
    display: flex;
    gap: .35rem;
    align-items: flex-start;
    padding: .3rem .5rem;
    border-left: 3px solid var(--ksh-avviso-filo);
    border-radius: 3px;
    background: var(--ksh-avviso-fondo);
    color: var(--ksh-avviso);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
}

.ceb-kasher__avviso--breve {
    display: inline-block;
    padding: .1rem .45rem;
}

.ceb-kasher__nessuno {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ceb-muted);
}

/* --- fonte e avvertenza --------------------------------------------------- */

.ceb-kasher__fonte {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ceb-line);
    font-size: .92rem;
    color: var(--ceb-muted);
}

.ceb-kasher__fonte p { margin: 0 0 .6rem; }

.ceb-kasher__avvertenza {
    color: var(--ceb-ink);
}

.ceb-kasher__pdf { font-weight: 600; }

/* chi l'ha fatto: separato dalle licenze, perche' si legga da solo */
.ceb-kasher .ceb-kasher__firma {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--ceb-line);
    color: var(--ceb-ink);
    font-style: italic;
}

/* ==========================================================================
   Lo scanner: una finestra a tutto schermo, scura, con la fotocamera
   ========================================================================== */

.ceb-kasher-lettore {
    width: 100%;
    max-width: 34rem;
    height: 100%;
    max-height: 100svh;
    margin: auto;
    padding: 0;
    border: 0;
    background: var(--ceb-navy-dark);
    color: var(--ceb-white);
}

.ceb-kasher-lettore::backdrop { background: rgba(13, 39, 64, .92); }

.ceb-kasher-lettore__corpo {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.ceb-kasher-lettore__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
}

.ceb-kasher-lettore__testa h2 {
    margin: 0;
    font-family: var(--ceb-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ceb-white);
}

.ceb-kasher-lettore__chiudi {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--ceb-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.ceb-kasher-lettore__chiudi:focus-visible { outline: 3px solid var(--ceb-gold-bright); outline-offset: 2px; }

.ceb-kasher-lettore__vista {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #000;
    overflow: hidden;
}

.ceb-kasher-lettore__vista[hidden] { display: none; }

.ceb-kasher-lettore__vista video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* la cornice dove mettere il codice, con la riga che scorre */
.ceb-kasher-lettore__mirino {
    position: absolute;
    inset: 28% 12%;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 10px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
    pointer-events: none;
}

.ceb-kasher-lettore__mirino::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 2px;
    background: var(--ceb-gold-bright);
    box-shadow: 0 0 8px var(--ceb-gold-bright);
    animation: ksh-riga 1.6s ease-in-out infinite alternate;
}

@keyframes ksh-riga {
    from { transform: translateY(-2.2rem); }
    to   { transform: translateY(2.2rem); }
}

.ceb-kasher-lettore__stato {
    margin: 0;
    padding: .9rem 1rem .4rem;
    text-align: center;
    font-size: 1rem;
}

.ceb-kasher-lettore__mano {
    display: flex;
    gap: .5rem;
    padding: .5rem 1rem 1rem;
}

.ceb-kasher-lettore__mano label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ceb-kasher-lettore__mano input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.9rem;
    padding: 0 .9rem;
    border: 0;
    border-radius: var(--ceb-radius);
    font: inherit;
    font-size: 1.0625rem;
    letter-spacing: .06em;
}

.ceb-kasher-lettore__mano input::placeholder { letter-spacing: 0; }

.ceb-kasher-lettore__mano button,
.ceb-kasher-lettore__azioni button {
    flex: 0 0 auto;
    height: 2.9rem;
    padding: 0 1rem;
    border: 0;
    border-radius: var(--ceb-radius);
    background: var(--ceb-gold-bright);
    color: var(--ceb-navy-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ha anche la classe ceb-kasher: le schede copiate qui dentro vogliono
   le stesse regole e gli stessi colori di quelle della pagina */
.ceb-kasher-lettore__esito.ceb-kasher {
    margin: 0;
    padding: 0 1rem 1rem;
}

.ceb-kasher-lettore__esito[hidden] { display: none; }

.ceb-kasher-lettore__verdetto {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem 0 .75rem;
    padding: .75rem .9rem;
    border-radius: var(--ceb-radius);
    font-size: 1.1rem;
    font-weight: 700;
}

.ceb-kasher-lettore__verdetto svg { flex: 0 0 1.6rem; width: 1.6rem; height: 1.6rem; }

.ceb-kasher-lettore__verdetto--si { background: #dff0dc; color: #1f5528; }
.ceb-kasher-lettore__verdetto--no { background: #fdf1dc; color: #7a4206; }

/* In lista, ma a condizione: mai il verde. Arancione pieno, e le condizioni
   subito sotto, grandi, prima della scheda. */
.ceb-kasher-lettore__verdetto--se { background: #e8b35c; color: #3d2100; }

.ceb-kasher-lettore__condizioni {
    margin: -.25rem 0 .9rem;
    padding: .75rem .9rem;
    border-left: 5px solid #e8b35c;
    border-radius: var(--ceb-radius);
    background: #fdf1dc;
    color: #3d2100;
}

.ceb-kasher-lettore__condizioni p {
    margin: 0 0 .35rem;
    font-weight: 700;
}

.ceb-kasher-lettore__condizioni ul {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
}

.ceb-kasher-lettore__codice {
    margin: 0 0 .6rem;
    font-size: .9rem;
    opacity: .8;
}

.ceb-kasher-lettore__spiega {
    margin: 0 0 1rem;
    line-height: 1.45;
}

.ceb-kasher-lettore__esito .ceb-kasher__elenco {
    grid-template-columns: 1fr;
    margin-bottom: 1rem;
    color: var(--ceb-ink);
}

.ceb-kasher-lettore__azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ceb-kasher-lettore__azioni .secondario {
    background: rgba(255, 255, 255, .14);
    color: var(--ceb-white);
}

/* in fondo alla finestra: dove finisce l'immagine della fotocamera */
.ceb-kasher-lettore__riservatezza {
    margin: auto 0 0;
    padding: .75rem 1rem 1rem;
    font-size: .82rem;
    line-height: 1.4;
    opacity: .75;
}

/* la foto ingrandita */
.ceb-kasher-lente {
    padding: 0;
    border: 0;
    border-radius: var(--ceb-radius-lg);
    background: var(--ceb-white);
    max-width: min(92vw, 520px);
}

.ceb-kasher-lente::backdrop { background: rgba(13, 39, 64, .85); }

.ceb-kasher-lente img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80svh;
    object-fit: contain;
}

/* la finestra prende il fuoco quando si apre: niente anello, non e' un comando */
.ceb-kasher-lente:focus { outline: none; }

.ceb-kasher-lente__testo {
    padding: .7rem .9rem .85rem;
}

.ceb-kasher-lente p {
    margin: 0;
    font-size: .8rem;
    color: var(--ceb-muted);
}

.ceb-kasher-lente .ceb-kasher-lente__nome {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ceb-ink);
}

.ceb-kasher-lente .ceb-kasher-lente__codici {
    margin: .3rem 0;
    font-size: .88rem;
    color: var(--ceb-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Il codice a barre: una "i" nell'angolo della scheda e un fumetto sotto.
   Col dito si apre toccando (il JavaScript mette .e-aperta), col mouse anche
   solo passandoci sopra. */
.ceb-kasher .ceb-kasher__prodotto { position: relative; }

.ceb-kasher .ceb-kasher__prodotto .ceb-kasher__testo { padding-right: 1.6rem; }

.ceb-kasher__info {
    position: absolute;
    top: .45rem;
    right: .45rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1.5px solid var(--ceb-line-strong);
    border-radius: 50%;
    background: var(--ceb-white);
    color: var(--ceb-navy);
    font: italic 700 .85rem/1 var(--ceb-font-head);
    cursor: pointer;
}

/* col dito serve un bersaglio piu' grande della "i" che si vede */
.ceb-kasher__info::after {
    content: "";
    position: absolute;
    inset: -.6rem;
}

.ceb-kasher__info:hover,
.ceb-kasher__info[aria-expanded="true"] {
    border-color: var(--ceb-navy);
    background: var(--ceb-navy);
    color: var(--ceb-white);
}

.ceb-kasher__info:focus-visible { outline: 3px solid var(--ceb-focus); outline-offset: 2px; }

.ceb-kasher__infotesto {
    position: absolute;
    top: 2.35rem;
    right: .45rem;
    z-index: 4;
    display: none;
    max-width: min(18rem, calc(100% - 1rem));
    max-height: 11rem;
    overflow-y: auto;
    padding: .5rem .7rem;
    border-radius: var(--ceb-radius);
    background: var(--ceb-navy-dark);
    color: var(--ceb-white);
    box-shadow: var(--ceb-shadow-md);
    font-size: .85rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.ceb-kasher__infotesto strong {
    display: block;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ceb-gold-bright);
}

.ceb-kasher__info.e-aperta + .ceb-kasher__infotesto { display: block; }

@media (hover: hover) {
    .ceb-kasher__info:hover + .ceb-kasher__infotesto { display: block; }
}

@media (prefers-reduced-motion: reduce) {
    .ceb-kasher-lettore__mirino::after { animation: none; }
}