body {
  background-color: var(--grey-color-100);
}

.woocommerce .woocommerce-breadcrumb {
  display: none;
}

.products-section {
  padding: 24px 16px 40px;
}

.products-section .shop-title {
  font-size: var(--h4-mobile2-fontsize);
  line-height: 120%;
  font-family: "Space Grotesk", "sans-serif";
  font-weight: 400;
  letter-spacing: -0.22px;
  color: var(--black-color-400);
}

.products-section .number-of-products {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.products-section .number-of-products span,
.products-section .number-of-products button {
  font-family: "Space Grotesk", "sans-serif";
  font-weight: 400;
  color: var(--black-color-400);
  font-size: var(--h5-mobile2-fontsize);
  line-height: 122%;
}

.products-section .filter-buttons-wrapper {
  margin-top: 30px;
  height: 282px;
  transition: height 0.8s cubic-bezier(0.66, 0.02, 0.34, 1);
  overflow: hidden;
}

.products-section .filter-buttons-wrapper.filters-hidden {
  height: 48px;
}

.products-section .filter-buttons-wrapper .main-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0 18px;
  border-top: 1px solid #d4d4d4;
}

.products-section .filter-buttons-wrapper .main-button img {
  transition: transform 0.8s cubic-bezier(0.66, 0.02, 0.34, 1);
}

.products-section .filter-buttons-wrapper.filters-hidden .main-button img {
  transform: rotate(135deg);
}

.products-section .filter-buttons-wrapper span,
.products-section .filter-buttons-wrapper button {
  display: flex;
  justify-content: space-between;
  font-family: "Poppins", "sans-serif";
  font-weight: 400;
  color: var(--black-color-400);
  font-size: var(--caption-mobile-fontsize);
  line-height: 150%;
}

.products-section .filter-buttons-wrapper span,
.products-section .filter-buttons-wrapper button.filter-button img {
  opacity: 0;
  transition: opacity 0.8 cubic-bezier(0.66, 0.02, 0.34, 1);
}

.products-section .filter-buttons-wrapper span,
.products-section .filter-buttons-wrapper button.filter-button.active img {
  opacity: 100;
}

.products-section .filter-buttons-wrapper .filter-buttons-list {
  display: flex;
  flex-direction: column;
}

.products-section
  .filter-buttons-wrapper
  .filter-buttons-list
  .filter-buttons-list-element
  button {
  width: 100%;
  text-align: start;
  padding: 10px 0 18px;
  border-top: 1px solid var(--black-color-400);
}

/* products of Woocommerce shortcode  */

.specific-category-list {
  display: none;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.66, 0.02, 0.34, 1);
}

.specific-category-list.display {
  display: block;
}

.specific-category-list.show {
  opacity: 100;
}

.woocommerce .products ul,
.woocommerce ul.products {
  margin: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.woocommerce ul.products::after,
.woocommerce ul.products::before {
  display: none !important;
}

.products-section
  .woocommerce
  ul.products[class*="columns-"]
  li.product:only-child,
.woocommerce-page ul.products[class*="columns-"] li.product:only-child {
  margin-right: auto;
}

.products-section .woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  margin-bottom: 24px;
  float: none;
  clear: none;
  flex-basis: 48%;
  width: auto;
}

.products-section
  a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
  display: none !important;
}

/* .button.product_type_simple {
  display: none !important;
} */

.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
  font-family: "Space Grotesk", sans-serif;
  color: var(--black-color-400);
  font-size: var(--bodysmall-mobile-fontsize) !important;
  letter-spacing: -0.29px;
  line-height: 120%;
  font-weight: 400;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .price {
  font-family: "Space Grotesk", sans-serif;
  color: var(--black-color-400) !important;
  font-size: var(--bodysmall-mobile-fontsize) !important;
  letter-spacing: -0.29px;
  line-height: 120%;
  margin-bottom: 0px !important;
}

.woocommerce ul.products li.product p,
.woocommerce ul.products li.product .product_type_variable {
  display: none !important;
}

.interlude {
  flex-basis: 100%;
  margin-bottom: 24px;
  position: relative;
}

.products-section .interlude .mtb-interlude-subtitles {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1s cubic-bezier(0.66, 0.02, 0.34, 1);
}

/* posts section  */

.posts-section {
  padding: 40px 16px 35px;
  background-color: var(--beige-color-300);
}

.posts-section .posts-section-title {
  font-family: "Poppins", sans-serif;
  font-size: var(--h3-mobile-fontsize);
  color: var(--black-color-400);
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.29px;
}

.posts-section .all-products-link {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  font-size: var(--body-small-desktop-fontsize);
  line-height: 150%;
  font-weight: 400;
  letter-spacing: 0px;
  font-family: "Poppins", sans-serif;
  color: var(--black-color-400) !important;
}

.posts-section .posts-list {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
}

@media (max-width: 380px) {
  .posts-section .posts-list {
    gap: 10px;
  }
}

.posts-section .posts-list .posts-list-element img.wp-post-image {
  height: 432px;
  width: auto;
  max-width: none;
}

.posts-section .posts-list .posts-list-element .post-categories a {
  display: block;
  margin-top: 20px;
  font-size: var(--caption-mobile-fontsize);
  line-height: 150%;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: var(--black-color-400);
  text-transform: uppercase;
}

.posts-section .posts-list .posts-list-element .post-title {
  margin-top: 4px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: var(--black-color-400);
  font-size: var(--body-mobile-fontsize);
  line-height: 150%;
}

.posts-section .posts-list .posts-list-element .post-link {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--body-small-desktop-fontsize);
  line-height: 150%;
  font-weight: 400;
  letter-spacing: 0px;
  font-family: "Poppins", sans-serif;
  color: var(--black-color-400) !important;
}

/* contact section */

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 47px 70px;
  background-color: var(--pink-color-300);
}

.contact-section .contact-title {
  font-size: var(--h2-mobile2-fontsize);
  font-weight: 400;
  font-family: "Space Grotesk", sans-serif;
  line-height: 120%; /* 40.8px */
  letter-spacing: -0.68px;
  text-align: center;
}

.contact-section a {
  display: block;
}

.contact-section .email-link {
  font-size: var(--h4-mobile-fontsize);
  color: var(--pink-color-300);
  line-height: 120%;
  letter-spacing: -0.22px;
  font-family: "Poppins", sans-serif;
  text-align: center;

  margin-top: 24px;
  background-color: var(--orange-color-400);
  padding: 10px 16px;
  border-radius: 120px;
}

.contact-section .phone-link {
  margin-top: 20px;
  font-size: var(--h3-mobile2-fontsize);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  line-height: 120%; /* 34.8px */
  letter-spacing: -0.29px;
  color: var(--orange-color-400);
  text-align: center;
}

@media (min-width: 760px) {
  .products-section {
    padding: 32px 32px 40px;
  }

  .posts-section {
    padding: 60px 32px;
  }

  .posts-section .posts-list .posts-list-element img.wp-post-image {
    width: 100%;
  }

  .products-section .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    flex-basis: 49%;
  }
}

@media (min-width: 800px) {
  .products-section .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    margin: 0;
  }

  .woocommerce .products ul,
  .woocommerce ul.products {
    row-gap: 32px;
  }
}

@media (min-width: 1025px) {
  .products-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    padding: 0 0 40px 40px;
    position: relative;
  }

  .products-section nav.woocommerce-breadcrumb {
    display: block;
    position: absolute;
    top: 7vh;
    left: 38vw;
    z-index: 100;
    transform: rotate(-90deg);
    margin-left: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .products-section .shop-title,
  .products-section .filter-buttons-wrapper,
  .products-section .number-of-products {
    grid-column: 1 / 2;
    grid-row: 1;
    height: max-content;
  }

  .products-section .products-lists-wrapper {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .products-section .shop-title {
    display: block;
    font-size: var(--h2-desktop-fontsize);
    line-height: 110%; /* 49.5px */
    letter-spacing: -1.35px;
    margin-top: 16px;
    position: fixed;
  }

  .products-section .number-of-products {
    margin-top: 232px;
    justify-content: flex-start;
    gap: 8px;
    position: fixed;
  }

  .products-section .number-of-products button {
    line-height: 120%; /* 40.8px */
    letter-spacing: -0.68px;
    font-size: var(--h3-desktop-fontsize);
    cursor: pointer;
  }

  .products-section .filter-buttons-wrapper {
    margin-top: 316px;
    width: 35%;
    height: 380px;
    position: fixed;
  }

  .products-section .filter-buttons-wrapper button {
    cursor: pointer;
  }

  .products-section .filter-buttons-wrapper span,
  .products-section .filter-buttons-wrapper button {
    line-height: 120%; /* 22.8px */
    letter-spacing: -0.19px;
    font-size: var(--h5-desktop-fontsize);
  }

  .products-section
    .filter-buttons-wrapper
    .filter-buttons-list
    .filter-buttons-list-element
    button,
  .products-section .filter-buttons-wrapper .main-button {
    padding: 24px 0;
  }

  .specific-category-list {
    min-height: 720px;
  }

  .products-section .filter-buttons-wrapper .main-button {
    border-top: none;
  }

  .woocommerce ul.products li.product a img {
    margin: 0 !important;
  }

  .woocommerce ul.products li.product a div {
    position: relative;
  }

  .woocommerce ul.products li.product a div::after {
    display: block;
    content: url(../images/purple-cart-icon.svg);
    background-color: var(--grey-color-400);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.66, 0.02, 0.34, 1);
  }

  .woocommerce ul.products li.product a div:hover:after {
    opacity: 100%;
  }

  .products-section .woocommerce ul.products li.product,
  .products-section .woocommerce-page ul.products li.product {
    margin: 0 !important;
  }

  .products-section .woocommerce .products ul,
  .woocommerce ul.products {
    margin: 20px 0 !important;
    column-gap: 20px;
    row-gap: 40px;
    justify-content: flex-start;
  }

  .products-section .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce-page ul.products[class*="columns-"] li.product {
    flex-basis: 47%;
  }

  .products-section .interlude {
    margin-bottom: 0px;
  }

  .products-section .interlude img {
    width: 100%;
  }

  .posts-section {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 100px auto;
    padding: 140px 40px;
  }

  .shop-posts-section,
  .shop-contact-section {
    display: none;
  }

  .posts-section .posts-section-title {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: var(--h2-desktop-fontsize);
    line-height: 110%; /* 49.5px */
    letter-spacing: -1.35px;
    width: 320px;
  }

  .posts-section .all-products-link {
    grid-column: 1 / 2;
    grid-row: 2;
    height: fit-content;
    margin-top: 24px;
    font-size: var(--body-desktop-fontsize);
  }

  .posts-section .posts-list {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-left: 30%;
  }

  .posts-list-element {
    width: fit-content;
  }

  .posts-section .posts-list .posts-list-element .post-title {
    font-size: var(--body-desktop-fontsize);
    font-weight: 700;
    max-width: 80%;
  }

  .contact-section {
    gap: 40px;
    padding: 100px 47px;
  }

  .contact-section .contact-title {
    font-size: var(--h2-desktop-fontsize);
    line-height: 110%;
    letter-spacing: -1.35px;
    width: 80%;
    margin: 0 10vw;
    text-align: left;
  }

  .contact-section .email-link {
    font-size: var(--h2-desktop-fontsize);
    line-height: 110%;
    letter-spacing: -1.35px;
    padding: 18px 32px 19px;
    margin: 0 10vw;
    width: fit-content;
  }

  .contact-section .phone-link {
    font-size: var(--h2-desktop-fontsize);
    line-height: 110%;
    letter-spacing: -1.35px;
    margin: 0 10vw;
    text-align: left;
  }
}

@media (min-width: 1100px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 41vw;
  }
}

@media (min-width: 1200px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 42vw;
  }
}

@media (min-width: 1300px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 42.5vw;
  }
}

@media (min-width: 1360px) {
  .contact-section .contact-title {
    width: 82%;
  }
}

@media (min-width: 1400px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 43vw;
  }
}

@media (min-width: 1600px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 43.5vw;
  }

  .contact-section .phone-link,
  .contact-section .email-link,
  .contact-section .contact-title {
    margin: 0 14vw;
  }
}

@media (min-width: 1700px) {
  .contact-section .contact-title {
    width: 70%;
  }
}

@media (min-width: 1800px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 44.5vw;
  }

  .contact-section .phone-link,
  .contact-section .email-link,
  .contact-section .contact-title {
    margin: 0 20vw;
  }
}

@media (min-width: 1920px) {
  .products-section nav.woocommerce-breadcrumb {
    left: 850px;
  }
}