/* =========================================================================
   grid.css — Layer di layout del tema (neutro, riusabile, BRAND-FREE).
   Reimplementa il sottoinsieme di Bootstrap 5 effettivamente usato nei
   template (container/row/col-*, gutter g-*, poche utility, collapse),
   così da rimuovere la dipendenza da bootstrap.min.css senza toccare il
   markup. Nessun token/colore/font di progetto qui: solo struttura.
   Breakpoint Bootstrap 5: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400.
   ========================================================================= */

/* ---- Container ---------------------------------------------------------- */
.container,
.container-fluid {
  width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px)  { .container { max-width: 540px;  } }
@media (min-width: 768px)  { .container { max-width: 720px;  } }
@media (min-width: 992px)  { .container { max-width: 960px;  } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---- Row + colonne (base) ---------------------------------------------- */
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

/* ---- Colonne usate dal markup ------------------------------------------ */
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
  .col-md-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}

/* ---- Gutter (g-*: impostano sia x sia y, come Bootstrap) --------------- */
.g-0 { --bs-gutter-x: 0;      --bs-gutter-y: 0;      }
.g-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem;   }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem;   }

@media (min-width: 992px) {
  .g-lg-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
}

/* ---- Utility (flex / testo / spacing) ---------------------------------- */
.justify-content-center { justify-content: center !important; }
.align-items-center     { align-items: center !important;     }
.align-items-stretch    { align-items: stretch !important;    }
.text-center            { text-align: center !important;      }
.mt-4                   { margin-top: 1.5rem !important;       }

/* ---- Accessibilità ------------------------------------------------------ */
.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Collapse (accordion scheda prodotto; toggle via JS in piscitello.js) */
.collapse { display: none; }
.collapse.show { display: block; }