@charset "utf-8";
/**{
  border: 1px dotted red;
}*/

/*Productes*/
section.producte {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin-top: 2rem;
  position: relative; /* Per a poder posicionar el tagProducte */
}
/*Images*/
div.imageContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 20rem; /* Altura mínima er a móvil */
  border: 1px solid var(--color-verde-oscuro);
  box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.7);
}

/*Estils per a cada imatge*/
section.cerezas>div.imageContainer{
  background-image: url('../img/frutas_hierbas/cerezas.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section.albaricoques>div.imageContainer{
  background-image: url('../img/frutas_hierbas/albaricoques.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
section.nueces>div.imageContainer{
  background-image: url('../img/frutas_hierbas/nueces.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/*Etiqueta*/
div.tagProducte {
  font-family: 'Noto Serif', serif;
  font-size: 2rem;
  color: var(--color-verde-oscuro);
  position: absolute;
  align-self: center;
  top: -1rem; /* Per a que puje un poc per damunt */
  background: linear-gradient(0deg, #d5bc95, #F5ebd5);
  border: 1px solid var(--color-verde-oscuro);
  padding: 0.3rem 0.6rem;
  border-radius: 0.2rem;
  font-weight: bold;
}
/* Contenidor */
div.contingutProducte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.3rem;
}
/* Controls */
div.controls {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 1rem;
}

div.controls i.fa-square-minus {
  padding: 0 0.17rem;
  color: gray;
  background-color: var(--color-verde-oscuro);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
div.controls i.fa-square-minus:hover {
  transform: scale(1.05);
}
div.controls i.fa-square-plus {
  padding: 0 0.17rem;
  background-color: var(--color-verde-oscuro);
  border-radius: 0.5rem;
  color: #b6e0a0;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
div.controls i.fa-square-plus:hover {
  transform: scale(1.05);
  box-shadow: 0 0 2px 2px rgba(182, 230, 157, 0.5);
}
/*Texte de producte*/
div.texteProducte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 1rem;
  position: relative; 
  border: 1px solid var(--color-verde-oscuro);
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.7);
}

div.texteProducte a {
  margin-top: 1rem;
}
input.quantitat {
  width: 2rem;
  text-align: center;
  margin: 0 0.3rem;
}
/*Botó*/
button.afegir {
  margin-left: 2rem;
  border-radius: 0.2rem;
  padding: 0.2rem 1rem;
  color: white;
  background: linear-gradient(90deg, var(--color-rojo-oscuro) 0%, var(--color-rojo-claro) 100%)!important;/*Altra cosa del w3,,,*/
  border: 1px solid var(--color-verde-oscuro);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
button.afegir:hover {
  transform: scale(1.05);
  box-shadow: 0 0 2px 1px rgba(203, 34, 50, 0.5);
}
div.w3-container>h4{
  margin-top: 1rem;
  margin-left: 1rem;
}
img[src="./img/5estrellas.png"]{
  max-width: 4rem;
  cursor: pointer;
}
/*******************/
/*****VERSIÓ PC******/
@media (width >= 992px) {
  a[href="productos.html"]{
    background: linear-gradient(90deg, var(--color-rojo-oscuro) 0%, var(--color-rojo-claro) 50%);
    border-radius: 4px;
    color: var(--color-beige-claro) !important;/*Machaque els estils anteriors, si no no es mostra el colro de la lletra*/
    filter: drop-shadow(1px 1px 1px rgba(36, 4, 7, 0.9));
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    transition: all 0.3s ease-in-out;
  }
  a[href="productos.html"]:hover {
      color: whitesmoke!important; /* 🔹 Blanco roto */
  }
  section.producte {
    font-size: 1rem;
    width: 90%;
    flex-direction: row;
    margin: 5rem auto;
    justify-content: center;
    align-items: stretch;
    height: 20rem;
    
  }
  div.imageContainer {
    height: 100%;
    min-width: 20rem;
  }
  section.producte>*{
    width: 50%;
  }
  button.afegir {
    margin-left: 1rem;
    padding: 0.2rem 0.4rem;
  }
  div.w3-container{
    font-size: 1rem;
    margin: 0.5rem auto;
    width: 90%;
  }
  div.texteProducte{
    margin: 0.5rem auto;
    height: 95%;
  }
  div.texteProducte a {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }
  section.nueces{
    margin-bottom: 2rem;
  }
  img[src="./img/5estrellas.png"]{
    max-width: 5rem;
  }
}