/* ============================================================
   CABRU — stili pagine interne (categorie, brand, hub, guide)
   Estende style.css (stesse variabili/brand).
   ============================================================ */

.lang-switch { display:inline-flex; gap:2px; margin-left:6px; border-left:1px solid var(--line); padding-left:16px; }
.lang-switch .lang { font-size:.82rem; font-weight:700; color:var(--muted); letter-spacing:.03em;
  width:32px; height:32px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; }
.lang-switch .lang.on { color:#fff; background:var(--accent); }
.lang-switch .lang:hover { color:var(--ink); }
.lang-switch .lang.on:hover { color:#fff; }

.page { padding: 40px 0 84px; }
.crumb { font-size:.85rem; color:var(--muted); margin-bottom:26px; }
.crumb a { color:var(--muted); }
.crumb a:hover { color:var(--accent); }
.crumb span { color:var(--ink-soft); }

.doc { max-width: 820px; }
.doc h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 22px; letter-spacing:-.01em; }
.doc h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.doc h3 { font-size: 1.12rem; margin: 26px 0 8px; color:var(--ink); }
.doc p { color: var(--ink-soft); font-size: 1.03rem; margin: 0 0 14px; }
.doc a { color: var(--accent); text-decoration: underline; }
.doc a:hover { text-decoration: underline; }
/* i pulsanti dentro .doc non devono ereditare il colore-link (testo invisibile) */
.doc a.btn { color:#fff; text-decoration:none; }
.doc a.btn:hover { color:#fff; text-decoration:none; }
.doc a.btn-ghost, .doc a.btn-ghost:hover { color: var(--ink); }
.doc ul.mrk { margin: 4px 0 18px; padding-left: 0; list-style: none; }
.doc ul.mrk li { position:relative; padding: 8px 0 8px 26px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:1rem; }
.doc ul.mrk li:first-child { border-top:0; }
.doc ul.mrk li::before { content:""; position:absolute; left:2px; top:16px; width:8px; height:8px; border-radius:2px; background:var(--accent); }

/* logo brand in cima alla pagina-brand */
.brand-hero { display:flex; align-items:center; justify-content:center; height:120px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; margin-bottom:30px; padding:24px; }
.brand-hero img { max-height:70px; width:auto; object-fit:contain; }
.brand-hero__link { display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-decoration:none; transition:.18s; }
.brand-hero__link:hover { transform:scale(1.03); }

/* FAQ */
.faq { margin-top: 46px; border-top:1px solid var(--line); padding-top: 30px; }
.faq > h2 { margin-top:0; }
.faq-item { padding: 16px 0; border-bottom:1px solid var(--line); }
.faq-q { font-size:1.04rem; margin:0 0 6px; color:var(--ink); }
.faq-a { color:var(--muted); font-size:.98rem; }
.faq-a a { color:var(--accent); text-decoration:underline; }

.cta-block { margin-top: 40px; }

/* hub aziende: griglia brand */
.brand-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px; }
.brand-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; transition:.18s; text-decoration:none; }
.brand-card:hover { box-shadow:var(--shadow); border-color:#d7dade; transform:translateY(-2px); }
.brand-card__logo { height:84px; display:grid; place-items:center; padding:16px; border-bottom:1px solid var(--line); }
.brand-card__logo img { max-height:46px; width:auto; object-fit:contain; }
.brand-card__name { padding:12px 14px; font-size:.92rem; font-weight:600; color:var(--ink); text-align:center; }

/* hub prodotti: griglia categorie */
.cat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.cat-card { display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px; background:#fff; transition:.18s; text-decoration:none; }
.cat-card:hover { box-shadow:var(--shadow); border-color:#d7dade; transform:translateY(-2px); }
.cat-card__ico { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft,#e4f0f5); color:var(--accent); margin-bottom:10px; }
.cat-card__ico svg { width:24px; height:24px; }
.cat-card:hover .cat-card__ico { background:var(--accent); color:#fff; }
.cat-card__name { font-size:1.1rem; font-weight:700; color:var(--ink); }
.cat-card__meta { font-size:.9rem; color:var(--muted); }

.doc .page-wide { max-width:none; }

@media (max-width: 900px){
  .brand-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 640px){
  .brand-grid { grid-template-columns:repeat(2,1fr); }
  .cat-grid { grid-template-columns:1fr; }
  .lang-switch { margin-left:0; padding-left:0; border-left:0; }
}

/* ============================================================
   CATALOGO prodotti — navigazione a blocchi + tabella virtualizzata
   ============================================================ */
.cat-wrap { max-width: 1180px; }
.cat-intro { color: var(--muted); font-size: 1.03rem; margin: 0 0 22px; max-width: 760px; }
.cat-intro a { text-decoration: underline; }
.cat-controls { position: sticky; top: 76px; z-index: 20; background: var(--bg); padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.cat-label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cat-allrow { margin-bottom: 8px; }
.cat-pill.all { font-weight: 700; }
.cat-companies { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-pill.hl:not(.on) { background: #d6ecf5; border-color: #a9d5e8; color: var(--accent-dark); }
.cat-pill { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: .15s; white-space: nowrap; }
.cat-pill:hover { border-color: var(--accent); color: var(--accent); }
.cat-pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-pill .c { opacity: .6; font-weight: 500; margin-left: 5px; }
.cat-pill.on .c { opacity: .85; }
.cat-appline { margin-top: 16px; max-width: 560px; }
.cat-appline select { width: 100%; }
.cat-clear { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 14px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.cat-clear:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cat-clear:disabled { opacity: .45; cursor: default; }
.cat-row2 { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 14px; }
.cat-field { display: flex; flex-direction: column; gap: 6px; }
.cat-field.grow { flex: 1; min-width: 220px; }
.cat-field select, .cat-field input { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: .92rem; background: #fff; color: var(--ink); }
.cat-field input:focus, .cat-field select:focus { outline: none; border-color: var(--accent); }
.cat-count { font-size: .86rem; color: var(--muted); padding-bottom: 10px; white-space: nowrap; }
.cat-count strong { color: var(--ink); }

/* colonne guidate da variabili (ridimensionabili via JS): add, codice, prodotto, q.tà, descrizione, applicazione */
.cat-table { margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
  --cat-cols: 44px 150px 240px 78px 420px 170px; --cat-total: 1102px; }
.cat-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cat-inner { width: var(--cat-total); min-width: 100%; }
.cat-thead, .cat-vrow { display: grid; grid-template-columns: var(--cat-cols); }
.cat-thead { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.cat-thead > div { position: relative; padding: 10px 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cat-viewport { height: 62vh; min-height: 360px; overflow-y: auto; overflow-x: hidden; position: relative; background: #fff; }
.cat-spacer { position: relative; width: 100%; }
.cat-vrow { position: absolute; left: 0; width: 100%; height: 40px; align-items: center; border-bottom: 1px solid var(--line); }
.cat-vrow { cursor: pointer; }
.cat-vrow:hover { background: var(--accent-soft); }
.cat-vrow > div { padding: 0 12px; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-vrow .code { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.cat-vrow .name { color: var(--ink); font-weight: 600; }
.cat-vrow .desc { color: var(--muted); }
.cat-empty { padding: 40px 16px; text-align: center; color: var(--muted); }
/* maniglia per ridimensionare le colonne (trascina il bordo destro dell'intestazione) */
.cat-resizer { position: absolute; top: 0; right: -1px; width: 12px; height: 100%; cursor: col-resize; touch-action: none; z-index: 3; }
.cat-resizer::after { content: ""; position: absolute; top: 7px; bottom: 7px; right: 5px; width: 2px; border-radius: 2px; background: transparent; transition: background .12s; }
.cat-thead > div:hover .cat-resizer::after, .cat-resizer.drag::after { background: var(--accent); }
.cat-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: catspin .7s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes catspin { to { transform: rotate(360deg); } }
/* --- iPhone / mobile: record su tre righe (riga1: codice + q.tà, riga2: prodotto, riga3: descrizione) --- */
@media (max-width: 640px) {
  .cat-controls { position: static; z-index: auto; }
  .cat-allrow { display: none; } /* su mobile "Tutte le aziende" scarica ~40MB: disattivato */
  .cat-inner { width: 100% !important; min-width: 0; }
  .cat-thead { display: none; }
  .cat-vrow {
    grid-template-columns: 40px 1fr auto !important;
    grid-template-rows: auto auto 1fr; align-items: center; column-gap: 4px; row-gap: 3px;
    height: 112px; padding: 8px 0; border-bottom: 1px solid var(--line);
    grid-template-areas: "add code qty" "add name name" "add desc desc"; }
  .cat-vrow .add  { grid-area: add; align-self: center; }
  .cat-vrow .code { grid-area: code; font-weight: 600; }
  .cat-vrow .name { grid-area: name; }
  .cat-vrow .qty  { grid-area: qty;  color: var(--muted); text-align: right; white-space: nowrap; }
  .cat-vrow .app  { display: none; }
  .cat-vrow .desc { grid-area: desc; align-self: start; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-size: .8rem; color: var(--muted); }
  .cat-vrow > div { padding: 0 10px; }
}

/* --- pulsante aggiungi (+) nella riga --- */
.cat-vrow .add, .cat-thead .h-add { padding: 0; display: flex; align-items: center; justify-content: center; }
.add-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--accent); font-size: 17px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: .15s; }
.add-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- modale generica --- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal__bg { position: absolute; inset: 0; background: rgba(20,25,30,.5); backdrop-filter: blur(2px); }
.modal__box { position: relative; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 28px 30px; }
.modal__box.wide { max-width: 720px; }
.modal__close { position: absolute; top: 14px; right: 16px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.modal__close:hover { color: var(--ink); }
.modal h2 { font-size: 1.4rem; margin: 0 0 4px; }
.modal .sub { color: var(--muted); font-size: .9rem; margin: 0 0 20px; }

/* --- scheda prodotto nella modale add ---
   Il box e' largo e la descrizione sta a piena larghezza, senza riquadri
   interni e senza troncature: il 99% delle descrizioni del catalogo sta
   sotto i 1.900 caratteri e si legge tutta senza scorrere. Oltre, scorre
   il box intero, non una finestrella dentro la scheda. */
.modal__box.product { max-width: 860px; max-height: 92vh; }
.pdetail { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; margin: 4px 0 20px; font-size: .92rem; }
.pdetail dt { color: var(--muted); font-weight: 600; }
.pdetail dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.qty-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 8px; }
.qty-row .cat-field { flex: 0 0 130px; }
.qty-row .lbl-short { display: none; }
.pdesc { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.pdesc h3 { margin: 0 0 9px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pdesc p { margin: 0; font-size: .92rem; line-height: 1.62; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .modal { padding: 12px; }
  .modal__box { padding: 24px 18px; max-height: 92vh; }
  /* Su telefono la descrizione viene prima e il pulsante di aggiunta resta
     agganciato in fondo alla scheda: la scheda si apre soprattutto per
     leggere, e l'azione non deve costringere a scorrere per essere trovata.
     L'ordine si cambia con "order", il DOM resta quello del desktop. */
  .modal__box.product { display: flex; flex-direction: column; padding-bottom: 0; }
  .modal__box.product h2 { order: 1; }
  .modal__box.product .sub { order: 2; margin-bottom: 16px; }
  .modal__box.product .pdetail { order: 3; margin-bottom: 4px; }
  .modal__box.product .pdesc { order: 4; margin-top: 18px; margin-bottom: 4px; }
  .modal__box.product .qty-row {
    order: 5; position: sticky; bottom: 0; z-index: 2;
    margin: 0 -18px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--line); align-items: flex-end; }
  /* Etichetta breve: "Quantita' richiesta" su 84px andrebbe a capo e alzerebbe
     la barra. "Q.tà" e' la stessa parola dell'intestazione della colonna. */
  .qty-row .cat-field { flex: 0 0 84px; min-width: 0; }
  .qty-row .lbl-full { display: none; }
  .qty-row .lbl-short { display: inline; }
  .qty-row .btn { flex: 1 1 auto; padding: 12px 14px; font-size: .9rem; line-height: 1.25; }
}

/* --- pulsante basket flottante --- */
.basket-fab { position: fixed; right: 22px; bottom: 22px; z-index: 150; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 700; font-size: .95rem; box-shadow: var(--shadow-lg); cursor: pointer; display: none; align-items: center; gap: 9px; }
.basket-fab.show { display: inline-flex; }
.basket-fab .b-count { background: #fff; color: var(--accent); border-radius: 999px; min-width: 22px; height: 22px; display: grid; place-items: center; font-size: .82rem; padding: 0 6px; }

/* --- pannello quotazione --- */
.qitem { display: grid; grid-template-columns: 1fr 88px 30px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.qitem:first-child { border-top: 0; }
.qitem .qi-name { font-size: .9rem; }
.qitem .qi-name b { display: block; color: var(--ink); }
.qitem .qi-name span { color: var(--muted); font-size: .82rem; }
.qitem input { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; font: inherit; font-size: .85rem; }
.qitem .qi-del { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 18px; }
.qitem .qi-del:hover { color: var(--accent); }
.qform { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.qform .full { grid-column: 1 / -1; }
.qform label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.qform label .req { color: var(--accent); }
.qform input, .qform textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font: inherit; font-size: .92rem; box-sizing: border-box; }
.qform input:focus, .qform textarea:focus { outline: none; border-color: var(--accent); }
.q-empty { color: var(--muted); padding: 20px 0; text-align: center; }
@media (max-width: 560px){ .qform { grid-template-columns: 1fr; } }

/* Invio riuscito: il modale smette di essere un modulo e diventa una conferma.
   I campi spariscono, resta il messaggio centrato. Lo stato si azzera alla
   riapertura (qReset), altrimenti il form resterebbe nascosto per sempre. */
.modal-sent { display: none; margin: 0; padding: 26px 8px 10px; text-align: center; font-size: 1.05rem; line-height: 1.55; color: #0a6485; }
.modal__box.is-sent { text-align: center; }
.modal__box.is-sent .sub,
.modal__box.is-sent #qItems,
.modal__box.is-sent .qform { display: none; }
.modal__box.is-sent .modal-sent { display: block; }


/* ============================================================
   QUALITÀ / ISO 9001 — badge, banda home, pagina certificazioni
   Il badge "ISO 9001" è un marchio tipografico disegnato in stile
   CABRU: NON è il logo ufficiale ISO (marchio registrato, non usabile
   da terzi) e non è un marchio di ente accreditato.
   ============================================================ */

/* --- banda ISO in fondo alla home (compatta) --- */
.iso-band { border-top: 1px solid var(--line); background: #fff; }
.iso-band .wrap { display: flex; align-items: center; gap: 30px; padding: 44px 24px; }
.iso-band__seal { flex: none; width: 88px; }
.iso-band__seal svg { width: 88px; height: 88px; display: block; }
.iso-band__text { flex: 1; min-width: 0; }
.iso-band__text h2 { font-size: 1.32rem; margin-bottom: 8px; letter-spacing: -.01em; }
.iso-band__text p { color: var(--muted); font-size: 1rem; margin: 0; max-width: 74ch; }
.iso-band__text p a { text-decoration: underline; }
.iso-band__cta { flex: none; }
@media (max-width: 640px) {
  .iso-band .wrap { flex-direction: column; align-items: flex-start; gap: 20px; }
  .iso-band__cta { align-self: stretch; }
  .iso-band__cta .btn { width: 100%; justify-content: center; }
}

/* --- riquadro certificato CABRU (pagina qualità) --- */
.cert-card { display: flex; gap: 28px; align-items: flex-start; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-soft); padding: 28px 30px; margin: 18px 0 10px; }
.cert-card__seal { flex: none; width: 112px; }
.cert-card__seal svg { width: 112px; height: 112px; display: block; }
.cert-card__body { flex: 1; min-width: 0; }
.cert-meta { display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; margin: 0 0 18px; font-size: 1rem; }
.cert-meta dt { color: var(--muted); font-weight: 600; }
.cert-meta dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .cert-card { flex-direction: column; gap: 20px; }
  .cert-card__seal, .cert-card__seal svg { width: 96px; }
  .cert-card__seal svg { height: 96px; }
  .cert-meta { grid-template-columns: 1fr; gap: 2px; }
  .cert-meta dd { margin-bottom: 10px; }
}

/* segnaposto in attesa di dati reali (equivalente web dell'ARANCIONE) */
.tbd { background: #fff4e6; color: #b45309; padding: 1px 8px; border-radius: 5px; font-weight: 600; font-size: .95em; }
.btn.is-tbd { background: #fff; color: #b45309; border: 1px dashed #f0b366; cursor: default; }
.btn.is-tbd:hover { background: #fff; color: #b45309; transform: none; }

/* --- elenco produttori + standard --- */
.qm-list { list-style: none; padding: 0; margin: 14px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qm-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.qm-row:first-child { border-top: 0; }
.qm-co { flex: 0 0 210px; font-weight: 700; color: var(--ink); text-decoration: none; }
.qm-co:hover { color: var(--accent); text-decoration: underline; }
.qm-std { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.chip { font-size: .74rem; font-weight: 600; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #fff; white-space: nowrap; }
.chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 560px) { .qm-co { flex-basis: 100%; } }

/* --- Prodotti in evidenza (home) --- */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-decoration: none; transition: .18s; }
.feat-card:hover { box-shadow: var(--shadow); border-color: #d7dade; transform: translateY(-2px); }
.feat-co { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.feat-code { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.feat-name { font-size: 1rem; font-weight: 700; color: var(--ink); }
.feat-desc { font-size: .85rem; color: var(--muted); }
@media (max-width: 900px){ .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .feat-grid { grid-template-columns: 1fr; } }

/* --- Tabelle di contenuto (guide, applicazioni, schede marchio) ---
   Il dato in tabella e' il formato piu' citabile che esista per un motore
   generativo, ed e' anche quello che un ricercatore legge per primo: queste
   tabelle vanno lette, non solo indicizzate. Su schermo stretto la tabella
   scorre da sola invece di far scorrere la pagina in orizzontale. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0; }
.tbl-wrap > .tbl { margin: 0; }
.tbl { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9rem; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { background: var(--bg-soft); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom-color: #d7dade; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #fafbfc; }
.tbl td em { font-style: italic; }               /* nomi di specie */
.tbl td code, .tbl td .code { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .85rem; }
  .tbl th, .tbl td { padding: 8px 10px; }
}

/* --- Catalogo su schermo stretto: la nota non ruba spazio ai prodotti ---
   La lista ha altezza fissa con scorrimento interno, quindi la nota che sta
   sotto restava visibile per sempre: su iPhone si mangiava un quinto dello
   schermo mentre si scorrevano i prodotti. Ora compare solo quando si e'
   arrivati in fondo alla lista, che e' il momento in cui serve davvero. */
@media (max-width: 720px) {
  .cat-viewport { height: 74vh; }
  .cat-nota {
    max-height: 0; opacity: 0; margin-top: 0 !important; overflow: hidden;
    transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
  }
  .cat-nota.mostra { max-height: 12em; opacity: 1; margin-top: 14px !important; }
}