.is-style-product-theme {
  background-color: var(  --wp--custom--color--base1);
  color: var(--wp--custom--color--primary-content);

}

.header-sc.is-style-product-theme {
  background-color: var(  --wp--custom--color--base1-opaque);
  color: var(--wp--custom--color--primary-content);

}

/* 
* Questo pseudo-elemento (::before) viene utilizzato per creare uno sfondo dello stesso 
* colore del Product header sotto il site header sticky (che ha una leggera trasparenza)
* quando è in posizione iniziale. 
* In questo modo, lo sfondo della pagina anche se diverso dal colore di sfondo dell'header
* non sarà visibile. Lo pseudo-elemento eredita il colore di sfondo del product header
* stesso (`background-color: inherit`) per garantire una corrispondenza perfetta.
* Altre classi di intestazioni di pagina potrebbero richiedere un trattamento simile.
*/
.product-header::before {
  content: "";
  position: absolute;
  top: -3.5rem;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background-color: inherit;
}

/* Medium screens and up */
@media (min-width: 768px) {
  .product-header::before {
    top: -5rem;
    height: 5rem;
  }
}

.is-style-pesto,
.is-style-sughi-pronti,
.is-style-creme,
.is-style-pate,
.is-style-condimenti {
  background-color: var(  --wp--custom--color--primary);
  color: var(--wp--custom--color--primary-content);
}