/* ms-food.css — blocco informazioni alimentari obbligatorie (Reg. UE 1169/2011)
   Vive dentro l'accordion .acc della scheda prodotto: eredita bordi e tipografia
   da woocommerce.css, qui c'e' solo cio' che serve a questo blocco.
   I token (--ink, --red, ...) arrivano da woocommerce.css; i fallback servono
   se per qualsiasi motivo quel foglio non e' in pagina. */

/* Il blocco nasce APERTO: l'informazione obbligatoria non si va a cercare.
   L'inline max-height lo mette ms-food.js per rendere animabile la chiusura;
   senza JS resta comunque leggibile grazie a questa regola. */
.acc__item.ms-food-item.open > .acc__c { max-height: none; }

.ms-food {
  padding: 0 0 24px;
  max-width: 60ch;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
}

.ms-food__h {
  margin: 1.1em 0 .45em;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #6B6459);
}
.ms-food__h:first-child { margin-top: 0; }

.ms-food__ing,
.ms-food__none,
.ms-food__cons {
  margin: 0;
  padding: 0;
  color: var(--muted, #6B6459);
  font-size: .92rem;
  line-height: 1.7;
}

/* Art. 21 §1 lett. b): l'allergene deve distinguersi dal resto dell'elenco.
   Peso + colore inchiostro + sottolineatura discreta: leggibile anche in
   stampa e per chi non distingue i colori. */
.ms-food__hl {
  font-weight: 700;
  color: var(--ink, #23211D);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.ms-food__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-food__chip {
  padding: .3em .7em;
  border: 1px solid var(--border, #E5DFD4);
  border-radius: 2px;
  background: var(--cream-card, #FBF8F2);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink, #23211D);
  cursor: help;
}

.ms-food__dl {
  margin: 0;
  display: grid;
  gap: 6px;
}
.ms-food__row {
  display: grid;
  grid-template-columns: minmax(9em, 34%) 1fr;
  gap: .8em;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #E5DFD4);
}
.ms-food__row:last-child { border-bottom: none; }
.ms-food__row dt {
  margin: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted, #6B6459);
}
.ms-food__row dd {
  margin: 0;
  font-size: .9rem;
  color: var(--ink, #23211D);
}

.ms-food__op {
  margin: 1.2em 0 0;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--muted, #6B6459);
  opacity: .85;
}

@media (max-width: 520px) {
  .ms-food__row { grid-template-columns: 1fr; gap: 0; }
}