/* ========== SEZIONE PRODUCTS ===================================== */
.products {
  padding: 0em 1rem 0rem;   /* top 6 rem | bottom 10 rem */
  background:#ffffff;
  text-align:center;
  --header-h:0px;
  padding-top: 0;
}

/* contenitore interno (max-width come gli altri) */
.products-inner {
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:0;
  padding-top:3rem;           /* uguale a .products */
  padding-bottom:0rem;       /* uguale a .products */
}

/* titolo */
.products h2 {
  text-align: center;
  color: #395934;
  font-size: 2rem;
  margin-top: 3em;
  margin-bottom: 2em;

}

/* ===== GRIGLIA =================================================== */
/* smartphone portrait: 2 colonne (già di default) */
.products-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
}

/* tablet portrait: 3 colonne → 3-3-2 */
@media (min-width: 600px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* tablet landscape / desktop: 4 colonne → 4-4 */
@media (min-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- DESKTOP ≥ 900 px – card più larghe ------------------ */
@media (min-width: 900px){

  /* griglia già compatta (resta invariata) */
  .products-grid{
    grid-template-columns: repeat(4, auto);
    column-gap: 2rem;   /* un po’ di respiro laterale */
    row-gap:    3rem;
    justify-content:center;
  }

  /* card più larghe e con padding interno */
  .product-card{
    width: 220px;                 /* prima 180 px → ora 220 px */
    padding: 0.75rem 0.5rem;      /* spazio interno all’icona e al titolo */
    border-radius: .75rem;
  }

  /* l’icona resta 120 px: centrata nel nuovo box */
  .product-icon{
    height: 120px;
  }
}




/* ===== CARD ====================================================== */
/* card è ora un link blocco */
.product-card{
  display:block;
  text-align:center;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}


.product-icon {
  height: 120px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

/* titolo con nuovo font “handwritten” */
.products h2{
  font-family: 'Gloria Hallelujah', 'Caveat', cursive, var(--font-body);
  font-size: 2.4rem;        /* un po’ più grande */
  letter-spacing: .5px;

}


.product-card h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #395934;
  text-transform: uppercase;
}

/* bottone */
.product-card .btn {
  display: inline-block;
  padding: 0.45rem 1.2rem;
  background: #395934;
  color: #ffffff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.25s;
}

.product-card .btn:hover {
  background: #2d4528;
}


/* ===== HOVER / ACTIVE COLORATO PER TUTTI I DEVICE ================ */

/* stile base della card */
.product-card{
  border-radius: .75rem;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}

/* ===== FEEDBACK COLORATO SEMPRE – HOVER & ACTIVE ================== */

/* card base */
.product-card{
  display: block;
  text-align: center;
  border-radius: .75rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}

/* sollevamento + ombra su hover/active */
.product-card:hover,
.product-card:active{
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}

/* palette di 8 tinte pastello, opacità 15 % */
.product-card:nth-of-type(1):is(:hover,:active){background:rgba(203,221,110,.15);} /* lime */
.product-card:nth-of-type(2):is(:hover,:active){background:rgba(255,214,103,.15);} /* miele */
.product-card:nth-of-type(3):is(:hover,:active){background:rgba(255,165,133,.15);} /* arancio */
.product-card:nth-of-type(4):is(:hover,:active){background:rgba(255,137,137,.15);} /* corallo */
.product-card:nth-of-type(5):is(:hover,:active){background:rgba(173,157,255,.15);} /* lilla */
.product-card:nth-of-type(6):is(:hover,:active){background:rgba(130,214,255,.15);} /* azzurro */
.product-card:nth-of-type(7):is(:hover,:active){background:rgba(166,200,255,.15);} /* blu */
.product-card:nth-of-type(8):is(:hover,:active){background:rgba(180,223,180,.15);} /* menta */