.hidden {
  display: none !important;
}

#search_product {
  font-size: 1.6rem;
}

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

.hidden-menu-item {
  display: none !important;
}

/* PRODUCT ARCHIVE */
.product-archive_wrap {
  position: relative;
  display: flex;
  gap: 5rem;
  padding: 4rem 0;
  background-color: #f4f4f4;
}

/* OVERLAY */
#overlay {
  display: none;
  position: absolute;
  align-content: center;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 3;
  cursor: pointer;
}

#overlay .box {
  display: flex;
  justify-content: center;
  padding: 5rem;
}

/* FILTER */
.filter-button {
  background-color: #de2823;
  position: sticky;
  top: unset;
  right: unset;
  left: 0;
  bottom: 2.5rem;
  z-index: 2;
  padding: 1rem;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;

  .svgbox {
    width: 3.5rem;
    height: 3.5rem;

    svg {
      width: 100%;
      height: 100%;

      * {
        fill: #ffffff;
      }
    }
  }

  span {
    margin-left: 1rem;
  }

  .close {
    display: none;
  }
}

.filter-button:hover {
  /* darken(#de2823, 15%) does not work in CSS so i use #a31e1b, which is the same, but in HEX */
  background-color: #a31e1b;
}

.html-filter--active {
  height: 100dvh;
  overflow-y: hidden;
}

.filter-button--active {
  z-index: 11;
  position: fixed;
  bottom: unset !important;
  left: unset;
  right: 2.5rem;
  top: 2.5rem;
  transform: translateX(-7.5%);
  padding: 0;

  .open {
    display: none;
  }

  .svgbox.close {
    display: block;
  }
}

.apply-filter-button {
  display: block;
  margin: 2.5rem auto 0;
  padding: 0.5rem 1rem;
  border: none;
  position: sticky;
  bottom: 0;
}

.apply-filter-button:hover {
  /* darken(#de2823, 15%) does not work in CSS so i use #a31e1b, which is the same, but in HEX */
  background-color: #a31e1b;
}

.filters {
  padding: 2.5rem;
  width: 100%;
  height: 100dvh;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 4;
  transform: translateX(100%);
  transition-duration: 0.25s;
}

.filters--active {
  transform: translateX(0);
}

.reset_filter {
  margin-bottom: 2.5rem;
}

.cat_filters_wrap {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #353637;

  > label {
    transition-duration: 0.15s;

    > input {
      display: none;
    }
  }

  label:hover {
    color: red;
  }
}

.cat_filters_wrap:first-of-type {
  margin-top: 0 !important;
  padding-top: 0;
  border-top: none;
}

.cat_filters_wrap:has(.checked) {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.main_cat_filter {
  display: block;
  line-height: 1.25;
  cursor: pointer;
}

.main_cat_filter.checked {
  margin-bottom: 1rem;
}

.main_cat_filter.checked + .sub_cat_filters_wrap {
  grid-template-rows: 1fr;
}

.main_cat_filter.checked {
  font-weight: 700;
}

.sub_cat_filters_wrap {
  display: grid;
  grid-template-rows: 0fr;
  padding-left: 0.25rem;
}

.sub_cat_filters_wrap_inner {
  overflow: hidden;
}

.sub_cat_filter {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.sub_cat_filter input {
  accent-color: #de2823;
  margin-top: 2px;
}

/* PRODUCTS */
.product-archive_listwrap {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search_wrap {
  width: 100%;
  margin-bottom: 1rem;
  display: flex;
  justify-content: flex-start;

  input {
    width: 100%;
    padding: 0.5rem 1rem;
  }
}

.product-archive_list {
  width: 100%;
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.product-archive_list:has(.no-items) {
  line-height: 1.25;
  gap: 0;
}

.product-archive_item {
  /*display: block;*/
  width: 100%;
  min-width: 0;
}

.product-archive_item a {
  width: 100%;
  height: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .button {
    transform: translateX(-1.5rem);
    padding-left: 1.5rem;
  }
}

.product-archive_item-title {
  max-width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 1.6rem;
  padding-left: 1.5rem;
  hyphens: auto;
  transform: translateX(-1.5rem);
}

.product-archive_item-cat {
  font-size: 1.4rem;
  font-style: italic;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.product-archive_item-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-grow: 1;
}

.product-archive_item-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.product-archive_item-price {
  display: flex;
  flex-direction: column;
  margin: 1rem 0;

  .price {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .label {
    font-size: 1.4rem;
  }
}

/* PAGINATION */
.pagination_list {
  width: 100%;
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid #666;
  transition-duration: 0.25s;
}

.pagination_list:has(.pagination_item) {
  margin-top: 1rem;
}

.pagination_item {
  cursor: pointer;
  color: #c1c1c1;
  padding: 1rem;
  width: 5rem;
  text-align: center;
  border-top: 2px solid transparent;
  transform: translateY(-1px);
  transition-duration: 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination_item:hover {
  color: #de2823;
  border-top: 2px solid #de2823;
}

.pagination_item-active {
  color: #000000;
  border-top: 2px solid #353637;
}

.pagination-arrow {
  height: 4rem;

  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;

    * {
      transition-duration: 0.15s;
    }
  }
}

.pagination-arrow:hover {
  svg * {
    fill: #de2823;
  }
}

.filter-message {
  margin-top: 1.1rem;
  grid-column: span 3;
}
/* PRODUCT ARCHIVE END */

/* SINGLE PRODUCT */
.product-single {
  .product-single_article {
    padding: 5rem 3rem;
  }

  .back2archive-button {
    margin-bottom: 1rem;
  }

  .product-single_wrap {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .product-single_main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    .upper {
      padding-top: 1rem;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .title {
        max-width: 85%;
        padding-left: 1rem;
      }

      .imagebox {
        aspect-ratio: 4/3;
        overflow: hidden;
        background-color: #ffffff;
        padding: 1rem 2rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  /* SINGLE PROPERTIES - DESKTOP AND MOBILE */
  .lower {
    padding: 1rem 2.5rem;

    .single-properties_list {
      display: flex;
    }

    .single-properties_item {
      > .subtitle {
        padding: 1.5rem 0;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      > .subtitle:hover {
        color: #de2823;
      }

      .contentwrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.25s ease-in-out 0s;

        > ul,
        > div {
          overflow: hidden;
          transition: margin 0.15s ease-in-out 0s;
        }

        .documents_list {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        a:not(.button) {
          color: #de2823;
        }

        .property_item {
          margin: 0.5rem 0;
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding: 1rem 2rem;
        }

        .property_item:nth-child(2n) {
          background-color: #f4f4f4;
        }
      }
    }

    .single-properties_item--active {
      > .subtitle {
        color: #de2823;

        .dd-arrow {
          transform: rotate(180deg);
        }
      }

      .contentwrap {
        grid-template-rows: 1fr;

        > ul,
        > div {
          margin: 1rem 0;
        }

        .documents_list {
          margin-top: 2rem;
        }
      }
    }
  }

  /* SINGLE PROPERTIES - ONLY MOBILE */
  .lower-mobile {
    display: block;

    .single-properties_list {
      flex-direction: column;
    }

    .single-properties_item {
      border-top: 1px solid black;

      > .subtitle {
        font-size: 1.6rem;

        .dd-arrow {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 2rem;
          height: 2rem;
        }
      }
    }

    .single-properties_item:first-child {
      padding-top: 0;
      border-top: unset;
    }

    .single-properties_item--active {
      > .subtitle {
        .dd-arrow {
          transform: rotate(180deg);
        }
      }
    }
  }

  /* SINGLE PROPERTIES - ONLY DESKTOP */
  .lower-desktop {
    display: none;

    .single-properties_list {
      position: relative;
    }

    .single-properties_list.trigger_list {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: stretch;
      gap: 0rem;
      border-bottom: 1px solid black;
    }

    .single-properties_item.trigger {
      transform: translateY(1px);
      flex-grow: 1;

      > .subtitle {
        text-transform: unset;
        font-size: 1.8rem;
      }
    }

    .single-properties_item.trigger:hover {
      border-bottom: 2px solid #de2823;
    }

    .single-properties_item--active.trigger {
      border-bottom: 2px solid #de2823;

      > .subtitle {
        color: #de2823;
      }
    }

    .single-properties_item.box {
      display: none;
      flex-grow: 1;
      width: 100%;
      border-top: unset;
    }

    .single-properties_item--active.box {
      display: block;
    }
  }

  /* SIDEBAR */
  .product-single_sidebar {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    .sidebar-box {
      padding: 2rem;
      background-color: #ffffff;
    }

    .picto_wrap {
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .pictobox {
      display: flex;
      align-items: center;
      gap: 1rem;

      .svgbox {
        width: 4rem;
        height: 4rem;
        padding: 0.25rem;
        border-radius: 50%;
        background-color: #353637;
      }

      label {
        max-width: calc((100% - 5rem));
      }
    }

    /* PRICES */
    .price_wrap {
      .disclaimer {
        font-size: 1.4rem;
      }
    }

    .price_list {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .price_item {
      display: flex;
      flex-direction: column;

      .price {
        margin-bottom: 0.5rem;
      }
    }

    .price_item.caution {
      font-size: 2rem;
      margin-top: 1.5rem;
    }

    /* CONTACT */
    .contact {
      display: flex;
      flex-direction: column;

      > .subtitle {
        margin-bottom: 1rem;
      }

      .textbox {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
      }
    }

    .contact-name {
      width: max-content;
      padding-left: 3rem;
      padding-right: 3rem;
      transform: translateX(-3rem) translateY(-1rem);
    }

    /* REASONS */
    .reasons {
      .subtitle {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
      }
    }

    .reasons_list {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .reasons_item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;

      .svgbox {
        width: 2rem;
        height: 2rem;
        flex: 0 0 auto;

        svg {
          height: 100%;
          width: auto;
        }
      }
    }
  }
}
/* SINGLE PRODUCT END */

@media (min-width: 500px) {
  .product-single {
    .lower {
      .single-properties_item {
        .contentwrap {
          .property_item {
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(2, 2fr);
          }
        }
      }
    }
  }
}
@media (min-width: 600px) {
  /* PRODUCT ARCHIVE */
  .product-archive_wrap {
    padding: 4rem 3rem;
  }

  .product-archive_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-button--active {
    span.close {
      display: block;
      margin-right: 1rem;
    }
  }

  /* SINGLE */
  .product-single {
    .product-single_article {
      padding: 5rem 10vw;
    }
  }
}

@media (min-width: 650px) {
  .sub_cat_filter input {
    margin-top: 4px;
  }

  .product-single {
    .lower-mobile {
      .single-properties_item {
        > .subtitle {
          font-size: 2rem;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  /* PRODUCT ARCHIVE */
  .product-archive_list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* SINGLE */
  .product-single {
    .product-single_article {
      padding: 5rem 15vw;
    }
  }
}

@media (min-width: 1024px) {
  /* PRODUCT ARCHIVE */
  .product-archive_listwrap {
    width: calc((100% - 5rem) * 0.75);
  }

  .filter-button {
    display: none;
  }

  .apply-filter-button {
    display: none;
  }

  .filters {
    width: calc((100% - 5rem) * 0.25);
    position: static;
    transform: unset;
    padding: 0;
    background-color: unset;
    height: auto;
    overflow-y: unset;
    /*max-height: 100rem;*/
  }

  .search_wrap {
    justify-content: flex-end;
  }

  /* PRODUCT ARCHIVE END */
  /* SINGLE PRODUCT */
  .product-single {
    .product-single_article {
      padding: 5rem 3rem;
    }

    .product-single_wrap {
      flex-direction: row;
      gap: 3.5rem;
    }

    .product-single_main {
      width: calc((100% - 3.5rem) * 0.65);
    }

    .lower-mobile {
      display: none;
    }

    .lower-desktop {
      display: block;
    }

    .product-single_sidebar {
      width: calc((100% - 3.5rem) * 0.35);
    }
  }
  /* SINGLE PRODUCT END */
}