/* ============================================================= */
/* ==========  SEZIONE PRODOTTI (home)  ========================= */
/* ============================================================= */

/* wrapper della sezione */
.products{
  /* più respiro sopra e sotto */
  padding: 9rem 1rem 12rem;     /* top 9 rem  |  bottom 12 rem */  text-align:center;
}

/* se il markup ha class="products container" e .container impone margini */
.products.inner{
  width:100%;
  max-width:none;
  margin-inline:0;                /* elimina bordi laterali */
  padding-inline:10rem;
  padding-top:19rem;             /* stesso top della sezione */
  padding-bottom:12rem;         /* stesso bottom            */
}

/* -------- titolo “I NOSTRI PRODOTTI” -------------------------- */
.products h2{
  margin-bottom:2rem;
  font-size:2rem;
  text-transform:uppercase;
  color:#395934;
}

/* ===== GRIGLIA CARD PRODOTTI ================================= */
.products-grid{
  display:grid;
  gap:1.2rem;
  /* desktop/tablet: 4 colonne */
  grid-template-columns:repeat(4,1fr);
  justify-items:center;
}

/* card link cliccabile */
.product-card{
  display:block;
  text-align:center;
  text-decoration:none;
  color:#395934;
  transition:transform .18s, background-color .2s;
}
.product-card:hover{
  transform:translateY(-4px);
}

/* immagine icona h=120 px */
.product-icon{
  height:120px;
  width:auto;
  object-fit:contain;
  display:block;
  margin-inline:auto;
}

/* nome categoria */
.product-card h3{
  margin-top:.6rem;
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
}

/* =============================================
   Titolo badge (home)  +  Nome prodotto (categoria)
   – font “Gloria Hallelujah”
   ============================================= */
.product-card h3,          /* sezione Prodotti – homepage */
.cat-card span {           /* griglia Categoria           */
  font-family: 'Gloria Hallelujah', 'Caveat', cursive, var(--font-body);
  letter-spacing: .3px;     /* opzionale – leggero tracking */
}

/* ---------- Breakpoint ≤ 600 px: 2 colonne per riga ------------ */
@media(max-width:600px){
  .products-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:0.2rem;
  }
}


/* ============================================================= */
/* ==========  SEZIONE CATEGORIA (pagine elenco)  =============== */
/* ============================================================= */

.category{
  /* molto più spazio sopra e sotto per distacco visivo */
  padding: 6rem 1rem 8rem;        /* top 6 rem | bottom 8 rem */
  text-align:center;
  font-family:var(--font-body);
}

/* titolo h1 della categoria */
.category h1{
  padding:3rem 0;
  margin:0 0 2.5rem;
  font-size:2rem;
  text-transform:uppercase;
  color:#395934;
}

/* ===== GRIGLIA MINIATURE ===================================== */
.cat-grid{
  display:flex;                  /* default desktop: flex wrap */
  flex-wrap:wrap;
  gap:1.5rem;
  justify-content:center;
}

/* card prodotto singolo */
.cat-card{
  width:200px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:#395934;
  transition:transform .18s;

}
.cat-card:hover{transform:translateY(-4px);}

/* immagine 4:3 arrotondata */
.cat-card img{
  width:110%;
  aspect-ratio:4 / 3;
  object-fit:contain;
  border-radius:.75rem;

}

/* didascalia */
.cat-card span{
  margin-top:.6rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1.35;
  text-align:center;
}

/* ---------- Breakpoint ≤ 600 px : griglia 3 × n --------------- */
@media(max-width:600px){

  .cat-grid{
    display:grid;                         /* passa da flex a grid */
    grid-template-columns:repeat(2,1fr);  /* 3 colonne uguali    */
    gap:1rem;
    justify-items:center;
  }

  .cat-card{
    width:100%;                           /* card piena larghezza */
  }

  /* foto quadrata */
  .cat-card img{
    aspect-ratio:1 / 1;
  }
}


/* ---- mini-card categoria più bassa --------------------------- */
.cat-card{
  width:190px;                 /* stessa larghezza compatta        */
  padding:.3rem .2rem .6rem;   /* ↓ padding top & side ancora minore*/
}

/* immagine: altezza fissa più bassa (invece del rapporto 4:3) */
.cat-card img{
  width:100%;
  height:150px;                /* << regola qui se vuoi 100-120 px */
  object-fit:contain;          /* mantiene proporzioni senza tagli */
  margin-bottom:.35rem;        /* piccola distanza dal titolo      */
}

/* titolo: margine e font leggermente ridotti */
.cat-card span{
  margin-top:.2rem;
  font-size:.8rem;             /* facoltativo: testo un filo più piccolo */
}

@media(max-width:600px){
  .category,
  .products {
    width: 100vw;
    overflow-x: hidden;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    margin-right: calc(-1 * (100vw - 100%) / 2);
    box-sizing: border-box;
  }
}