/* Stile "lucido" delle app di Pietro con i colori del volantino (crema, bordeaux, oro): riflesso nei riquadri, barra smerigliata, pulsanti sfumati.
   Usa le variabili della pagina, quindi vale anche col tema scuro. */
body { background-image: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 45%); background-attachment: fixed; }
@media (prefers-color-scheme: dark) { body { background-image: linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 45%); } }
.piatti, .contatto-box, .cerca, .legale .nota {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--ombra), inset 0 1px 0 rgba(255, 255, 255, .75);
}
@media (prefers-color-scheme: dark) {
  .piatti, .contatto-box, .cerca, .legale .nota { background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%); box-shadow: var(--ombra), inset 0 1px 0 rgba(255, 255, 255, .08); }
}
.barra { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.chip.attiva, .cookie button:last-child, .btn-principale { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .14)); box-shadow: 0 6px 14px rgba(142, 27, 43, .28), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* Desktop: pagina larga come un sito, categorie su due colonne */
@media (min-width: 900px) {
  .pagina { max-width: 1160px; padding-left: 28px; padding-right: 28px; }
  .barra { margin-left: -28px; margin-right: -28px; }
  .categorie { flex-wrap: wrap; justify-content: center; overflow: visible; padding: 12px 28px; }
  .chip:hover { border-color: var(--accento); }
  #menu { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 36px; column-gap: 36px; }
  .categoria { -webkit-column-break-inside: avoid; break-inside: avoid; page-break-inside: avoid; }
  .legale { max-width: 780px; margin-left: auto; margin-right: auto; }
  .intestazione { padding-top: 32px; }
}