/* Valori nutrizionali: pulsante e overlay.
   I colori arrivano da variabili con ricaduta, così lo stesso componente si
   veste da solo nelle pagine pop, premium e visciola senza duplicati. */
/* Comando: stessa resa del master Visciola — riquadro bianco, bordo e testo
   nel colore del mondo, che si riempie al passaggio del mouse. */
.uncle-nutrition-button {
  --nut-ink: var(--nutrition-ink, #2b1d12);
  --nut-paper: var(--nutrition-paper, #fbf3df);
  --nut-accent: var(--nutrition-accent, #2e5b3f);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  color: var(--nut-accent);
  background: #fff;
  border: 2px solid var(--nut-accent);
  border-radius: 0;
  font-family: var(--ui-sans, sans-serif);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.uncle-nutrition-button svg { width: 17px; height: 17px; flex: none; }
.uncle-nutrition-button:hover,
.uncle-nutrition-button:focus-visible { color: #fff; background: var(--nut-accent); }

.uncle-nutrition {
  /* I master premium azzerano i margini con `*{margin:0}`, e con quello sparisce
     anche il `margin:auto` con cui il browser centra le finestre modali: la
     scheda finiva incollata in alto a sinistra. Qui il centraggio e' scritto a
     mano e non dipende piu' dal foglio predefinito del browser. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100% - 2rem));
  max-height: min(86svh, 760px);
  padding: 0;
  color: var(--nutrition-ink, #2b1d12);
  background: var(--nutrition-paper, #fbf3df);
  border: 2px solid var(--nutrition-ink, #2b1d12);
  border-radius: 0;
  box-shadow: 10px 10px 0 rgb(0 0 0 / .3);
  overflow: hidden;
}
.uncle-nutrition::backdrop { background: rgb(12 8 4 / .72); }
.uncle-nutrition__box { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.2rem, 3vw, 1.9rem); }
.uncle-nutrition__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.uncle-nutrition__eyebrow { margin: 0 0 .35rem; color: var(--nutrition-accent, #2e5b3f); font-size: .64rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.uncle-nutrition__head h2 { margin: 0; font-family: var(--ui-serif, Georgia, serif); font-size: clamp(1.3rem, 3.4vw, 1.7rem); font-weight: 600; line-height: 1.1; }
.uncle-nutrition__close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.uncle-nutrition__close:hover { color: var(--nutrition-paper, #fbf3df); background: var(--nutrition-ink, #2b1d12); }

/* "fixed" tiene le due colonne dentro la finestra: senza, una riga lunga come
   la conservazione allargava la tabella e comparivano le barre orizzontali. */
.uncle-nutrition__table { width: 100%; table-layout: fixed; margin: 0 0 1.2rem; border-collapse: collapse; }
.uncle-nutrition__table caption { margin-bottom: .7rem; color: rgb(43 29 18 / .72); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-align: left; text-transform: uppercase; }
.uncle-nutrition__table th,
.uncle-nutrition__table td { padding: .62rem .2rem; border-bottom: 1px solid rgb(43 29 18 / .2); font-size: .95rem; text-align: left; vertical-align: top; }
.uncle-nutrition__table th { width: 56%; font-weight: 500; }
/* Niente "nowrap": i numeri ci stanno comunque su una riga, e un testo lungo
   deve poter andare a capo invece di spingere la tabella fuori dalla finestra. */
.uncle-nutrition__table td { font-weight: 800; text-align: right; white-space: normal; overflow-wrap: break-word; }
.uncle-nutrition__table tr:last-child th,
.uncle-nutrition__table tr:last-child td { border-bottom: 0; }

.uncle-nutrition__block { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid rgb(43 29 18 / .22); }
.uncle-nutrition__block h3 { margin: 0 0 .4rem; color: var(--nutrition-accent, #2e5b3f); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.uncle-nutrition__block p { margin: 0; font-size: .95rem; line-height: 1.6; }

@media (max-width: 520px) {
  .uncle-nutrition { width: calc(100% - 1.4rem); }
  .uncle-nutrition-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .uncle-nutrition-button { transition: none; }
}

/* I master premium disegnano la pagina per conto proprio e non caricano
   product.css: qui ognuno dei tre mondi dichiara i colori del componente. */
.uncle-product-nutrition { margin-top: 1.1rem; }
.uncle-premium-page { --nutrition-ink: #0c0e2a; --nutrition-paper: #fbf3df; --nutrition-accent: #1b1f4b; }
.uncle-diabolico-page { --nutrition-ink: #1a0708; --nutrition-paper: #fbf3df; --nutrition-accent: #b32423; }
.uncle-deriva-page { --nutrition-ink: #0b2129; --nutrition-paper: #f2e8cf; --nutrition-accent: #1f4a55; }