/* Griglia colori
   ----------------------------------------------------------------------------
   Settantatre caselle sulla stessa pagina: qualunque decorazione dentro la
   casella si moltiplica per settantatre e diventa rumore. Quindi caselle
   piatte, un solo colore di accento (il viola del marchio), e il contorno che
   si accende solo dove il cliente ha messo una quantita' - cosi' si vede a
   colpo d'occhio cosa sta per comprare anche scorrendo in fretta.

   La barra in fondo resta appiccicata al bordo dello schermo perche' con
   settantatre caselle il pulsante "aggiungi tutto" finirebbe fuori vista.
*/
.mcg { margin: 34px 0 10px; }
.mcg-testa h2 { font-size: 1.35rem; margin: 0 0 4px; }
.mcg-aiuto { font-size: .86rem; color: #666; margin: 0 0 16px; }

.mcg-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.mcg-casella {
  border: 1px solid #e2e2e6;
  border-radius: 6px;
  padding: 8px 8px 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.mcg-casella.mcg-scelto {
  border-color: #392B81;
  box-shadow: 0 0 0 2px rgba(57, 43, 129, .12);
}

.mcg-foto { display: block; text-align: center; }
.mcg-foto img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; }
.mcg-nofoto { display: block; aspect-ratio: 1/1; background: #f2f2f4; border-radius: 4px; }

.mcg-nome {
  font-weight: 700; font-size: .84rem; line-height: 1.2;
  margin: 7px 0 1px; color: #222;
  /* i nomi lunghi non devono far crescere una casella piu' delle altre */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.1em;
}
.mcg-codice { font-size: .7rem; color: #8a8a90; margin-bottom: 5px; }

.mcg-formato {
  width: 100%; font-size: .78rem; padding: 3px 4px;
  border: 1px solid #d8d8dd; border-radius: 4px; background: #fff;
}
.mcg-prezzo { font-weight: 700; font-size: .92rem; color: #392B81; margin: 5px 0 4px; }

.mcg-riga { display: flex; gap: 5px; margin-top: auto; }
.mcg-qta {
  flex: 1 1 auto; width: 100%; min-width: 0;
  padding: 4px 5px; font-size: .85rem; text-align: center;
  border: 1px solid #d8d8dd; border-radius: 4px;
}
.mcg-add {
  flex: 0 0 34px; border: 0; border-radius: 4px;
  background: #392B81; color: #fff; font-size: 1.05rem; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.mcg-add:hover { background: #2c2166; }
.mcg-add:disabled { background: #b9b9c2; cursor: default; }

.mcg-stato { font-size: .72rem; min-height: 1.05em; margin-top: 3px; }
.mcg-stato.ok { color: #2E6B34; }
.mcg-stato.ko { color: #C00000; }
.mcg-esaurito { color: #C00000; font-size: .72rem; }

.mcg-barra {
  position: sticky; bottom: 0; z-index: 20;
  margin-top: 14px; padding: 10px 14px;
  background: #fff; border: 1px solid #e2e2e6; border-radius: 6px;
  box-shadow: 0 -3px 14px rgba(0, 0, 0, .07);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.mcg-conteggio { font-size: .9rem; color: #333; }
.mcg-add-tutti {
  border: 0; border-radius: 5px; padding: 9px 18px;
  background: #392B81; color: #fff; font-weight: 700; cursor: pointer;
}
.mcg-add-tutti:hover { background: #2c2166; }
.mcg-add-tutti:disabled { background: #b9b9c2; cursor: default; }
.mcg-vaicarrello { margin-left: auto; font-weight: 700; color: #392B81; }

@media (max-width: 480px) {
  .mcg-griglia { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
  .mcg-nome { font-size: .8rem; }
}


/* La barra dei filtri
   ----------------------------------------------------------------------------
   Sta sopra la griglia e non dentro un pannello che si apre: con centocinquanta
   caselle sotto, un filtro nascosto dietro un clic non lo usa nessuno.
   I gruppi sono separati da un'etichetta piccola invece che da un riquadro,
   perche' quattro riquadri sopra una griglia di riquadri diventano rumore. */
.mcg-filtri {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 0 0 16px; padding: 12px 14px;
  background: #f7f8fa; border: 1px solid #e6e7ec; border-radius: 6px;
}
.mcg-gruppo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mcg-gruppo-nome {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: #8a8a92; margin-right: 2px;
}
.mcg-filtro {
  border: 1px solid #d5d6dd; background: #fff; border-radius: 999px;
  padding: 4px 11px; font-size: .8rem; cursor: pointer; color: #333;
  line-height: 1.35; transition: background .12s, border-color .12s, color .12s;
}
.mcg-filtro:hover { border-color: #392B81; }
.mcg-filtro.acceso { background: #392B81; border-color: #392B81; color: #fff; }
.mcg-quanti { opacity: .6; font-size: .72rem; margin-left: 3px; }
.mcg-filtro.acceso .mcg-quanti { opacity: .85; }
.mcg-azzera {
  border: 0; background: none; color: #392B81; font-size: .8rem;
  text-decoration: underline; cursor: pointer; padding: 4px 2px;
}
.mcg-quanti-visibili { font-size: .8rem; color: #666; margin-left: auto; }
.mcg-casella[hidden] { display: none; }
.mcg-nessuno {
  grid-column: 1 / -1; padding: 26px 10px; text-align: center;
  color: #777; font-size: .9rem;
}