/*****************************************************/
/******************* PRODUCTS PAGE *******************/
/*****************************************************/

#products-header.spa {
  background-image: url(../img/header_spa_small.webp);
}

#products-header.salle-de-bains {
  background-image: url(../img/header_bathroom_small.webp);
}

#products-header.meuble {
  background-image: url(../img/header_furniture_small.webp);
}

#products-header.mitigeur {
  background-image: url(../img/header_tap_small.webp);
}

#products-header.douche {
  background-image: url(../img/header_shower_small.webp);
}

#products-header.bain {
  background-image: url(../img/header_bath_small.webp);
}

#products-header.toilette {
  background-image: url(../img/header_toilets_small.webp);
}

#products-header.vasque {
  background-image: url(../img/header_washbasin_small.webp);
}

#products-aside {
  width: calc(100% - 30px);
  margin: 30px auto;
}

#products-aside-btn {
  width: 100%;
  padding: 0 0 0 20px;
  text-align: left;
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  color: #1a9da2;
  background-color: transparent;
  border: unset;
  border-radius: unset;
  background-image: url(../img/filter.svg);
  background-repeat: no-repeat;
  cursor: pointer;
}

#products-aside-content ul {
  display: flex;
  flex-wrap: wrap;
}

#products-aside-content ul li {
  padding: 15px 15px 0 0;
}

#products-aside-content ul li a {
  font-size: 3rem;
  line-height: 3rem;
  font-weight: 700;
  color: #d9d9d9;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

#products-aside-content ul li.current a,
#products-aside-content ul li:hover a {
  color: #1a9da2;
}

#products-description {
  display: none;
}

.products-content {
  height: fit-content;
}

.product {
  width: calc(100% - 30px);
  margin: 15px auto 0 auto;
}

.product a {
  position: relative;
  display: block;
}

.product a h2 {
  position: absolute;
  left: 15px;
  bottom: 15px;
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
  color: #ffffff;
}

@media (min-width: 600px) {
  #products-header.spa {
    background-image: url(../img/header_spa_medium.webp);
  }

  #products-header.salle-de-bains {
    background-image: url(../img/header_bathroom_medium.webp);
  }

  #products-header.meuble {
    background-image: url(../img/header_furniture_medium.webp);
  }

  #products-header.mitigeur {
    background-image: url(../img/header_tap_medium.webp);
  }

  #products-header.douche {
    background-image: url(../img/header_shower_medium.webp);
  }

  #products-header.bain {
    background-image: url(../img/header_bath_medium.webp);
  }

  #products-header.toilette {
    background-image: url(../img/header_toilets_medium.webp);
  }

  #products-header.vasque {
    background-image: url(../img/header_washbasin_medium.webp);
  }

  .products-content {
    display: flex;
    flex-wrap: wrap;
  }

  #products-aside {
    margin: 30px auto 15px;
  }

  .product {
    width: calc(50% - 22.5px);
    margin: 15px 0 0 15px;
  }
}

@media (min-width: 900px) {
  #products-wrap {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 30px);
    margin: 60px auto 0;
  }

  #products-aside {
    width: calc(30% - 30px);
    margin: 0;
  }

  #products-aside-btn {
    display: none;
  }

  #products-aside-content {
    position: sticky;
    top: 60px;
  }

  #products-aside-content ul {
    display: block;
  }

  #products-aside-content ul li {
    text-align: right;
    padding: 0;
  }

  #products-aside-content ul li + li {
    padding: 15px 0 0 0;
  }

  #products-description {
    display: block;
    margin: 60px 0 0 0;
    text-align: right;
  }

  #products-description p {
    font-size: 1.35rem;
  }

  #products-description p + p {
    padding: 10px 0 0 0;
  }

  #products-description p b,
  #products-description p strong {
    font-weight: 700;
  }

  #content.products-content {
    width: calc(70% - 30px);
    margin: 0 0 0 60px;
  }

  .product {
    width: calc(50% - 7.5px);
    margin: 0 0 0 15px;
  }

  .product:nth-child(odd) {
    margin: 0;
  }

  .product:nth-child(n + 3) {
    margin-top: 15px;
  }
}

@media (min-width: 1200px) {
  #products-header.spa {
    background-image: url(../img/header_spa.webp);
  }

  #products-header.salle-de-bains {
    background-image: url(../img/header_bathroom.webp);
  }

  #products-header.meuble {
    background-image: url(../img/header_furniture.webp);
  }

  #products-header.mitigeur {
    background-image: url(../img/header_tap.webp);
  }

  #products-header.douche {
    background-image: url(../img/header_shower.webp);
  }

  #products-header.bain {
    background-image: url(../img/header_bath.webp);
  }

  #products-header.toilette {
    background-image: url(../img/header_toilets.webp);
  }

  #products-header.vasque {
    background-image: url(../img/header_washbasin.webp);
  }

  #products-wrap {
    width: calc(100% - 240px);
    margin: 120px auto 0;
  }

  #products-aside {
    width: 350px;
  }

  #content.products-content {
    width: calc(100% - 410px);
    margin: 0 0 0 60px;
  }

  .product {
    width: calc(33.333333% - 10px);
  }

  .product,
  .product:nth-child(odd),
  .product:nth-child(n + 3) {
    margin: 0 15px 0 0;
  }

  .product:nth-child(3n + 3) {
    margin: 0;
  }

  .product:nth-child(n + 4) {
    margin-top: 15px;
  }

  .product a h2 {
    width: 100%;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: 0 70px;
  }
}