main {
  background-color: #ccc;
  min-height: 100vh;
}

.catalog__wrapper {
  display: flex;
  flex-direction: row;
}

.filters {
  width: 30%;
  padding: 25px;

  h2 {
    color: #eeeeee7a;
    font-size: 2rem;
    
    font-weight: 700;
  }

  ul {
    display: flex;
    flex-direction: column;
    gap: 10px;

    li {
      background-color: #3d3d3dba;
      color: #bbb;
      cursor: pointer;
      transition: 300ms;
      font-size: 1rem;
      font-weight: 300;

      button {
        transition: 300ms;
        background-color: transparent !important;
        border-radius: none;
        border: none;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        width: 100% !important;
        height: 100% !important;
        padding: 10px;
      }
    }

    li:hover {
      transform: translate(25px, 0);
    }
    button:hover {
      font-weight: 500;
      color: inherit !important;
    }
  }
}

.catalog__container {
  .pagination {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 25px;

    button {
      background-color: #333333b4;
      color: #ddd;
      padding: 10px;
      border-radius: 0;
      border: none;
      font-weight: 500;
    }

    button:hover {
      background-color: #ddd;
      color: #333333b4;
    }
  }
}

.catalog {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100% !important;
  align-items: start;
  justify-content: end;
  gap: 50px;
  padding: 25px;

  .catalog__card {
    width: 250px;
    border: none !important;
    border-radius: 10px !important;
    padding: 0;
    height: 400px;
    background-color: #403f3fcf;
    display: flex;
    color: #eee;
    overflow: hidden;
    justify-content: end;
    flex-direction: column;
    transition: 300ms;

    .card__body {
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: end;
      height: min-content;

      .body__wrap {
        padding: 20px;
        backdrop-filter: blur(10px);
        background-color: #201f1f6b;
      }
    }
  }

  .img-text img {
    width: 300px;
    max-inline-size: none !important;
    transition: opacity 200ms ease;

    transition: all 1.7s ease;
  }
  /* By default */
  .img-text img {
    opacity: 0;
  }

  .img-text img:hover {
    transform: scale(1.2, 1.2);
    cursor: pointer;
  }
}

.product {
  align-items: center;
  justify-content: center;

  .product__wrap {
    align-items: center;
    justify-content: start;
    gap: 50px;
    width: 70%;
    backdrop-filter: blur(10px);
    background-color: #201f1f6b;

    .hidden-info {
      display: none !important;
    }

    .product__img {
      transition: width 1.5s, flex 1.5s;
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: row;

      #mainImage {
        height: 400px !important;
        transition: height 0.5s ease; /* Smooth transition over 0.5 seconds */      }

      #mainImage.fullscreen {
        height: 600px !important;
      }

      img {
        height: unset !important;
      }
      .img__selector {
        width: 30%;
        display: flex;
        flex-direction: column;
        padding: 0 20px 0 0;
        gap: 10px;

        img {
          border: 2.5px solid #ddd;
        }

        .thumbnail {
          max-width: 100px;
          max-height: 100px;
          opacity: 0.5;
          transition: opacity 0.3s ease; /* Smooth transition for opacity */
        }

        .thumbnail.selected {
          opacity: 1; /* Fully opaque when selected */
        }

        /* .selected {
          opacity: 1;
        } */
      }
    }

    .fullscreen {
      transition: width 1.5s, flex 1.5s;
      width: 100%;
    }

    .product__detail {
      padding: 0 50px 0 0;
      color: #ddddddd4;
      gap: 10px;
      flex: 1;
      display: flex;
      width: 0%;

      .detail__group {
        gap: 20px;
      }

      h1 {
        font-weight: 500;
        font-size: 2.5rem;
      }

      h3 {
        font-weight: 200;
      }

      p {
        font-size: 0.9rem;
        letter-spacing: 0px;
        font-weight: 400;
      }

      a {
        padding: 10px;
        text-decoration: none;
        color: #ddddddd4;
        font-weight: 500;
        border: 1px solid #ddddddd4;
        width: min-content;
        transition: 400ms;
      }

      a:hover {
        background-color: #ddddddd4;
        color: #333 !important;
      }
    }

    .hidden {
      display: none !important;
      color: transparent !important;

      /* Firefox */
      -moz-transition: all 1s ease-in;
      /* WebKit */
      -webkit-transition: all 1s ease-in;
      /* Opera */
      -o-transition: all 1s ease-in;
      /* Standard */
      transition: all 1s ease-in;
    }
  }
}

@media (max-width: 1160px) {
  .product__wrap {
    width: 90% !important;
  }
}

@media (max-width: 890px) {
  .product__wrap {
    gap: 0px !important;
    flex-direction: column !important;
    width: 90% !important;

    .product__img {
      flex-direction: column !important;

      .img__selector {
        width: 100% !important;
        flex-direction: row !important;
        padding: 0 0 10px 0 !important;
        gap: 10px;

        img {
          aspect-ratio: 1 / 1 !important;
        }
      }
    }
    .product__detail {
      width: 100% !important;
      padding: 50px !important;
    }
  }
}

@media (max-width: 700px) {
  .catalog__wrapper {
    flex-direction: column !important;
  }

  .filters {
    width: 100%;

    ul {
      overflow: scroll;
      flex-direction: row;
      li {
        button {
          padding: 10px 35px;
        }
      }
      li:hover {
        transform: translate(5px, 0);
      }
    }
  }

  .catalog {
    justify-content: center;
    padding: 0px;
    gap: 25px;
    .catalog__card {
      width: 40%;
      height: 360px;

      h2 {
        white-space: nowrap; /* Prevent wrapping */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Show ellipsis for overflow */
      }
    }
  }

  .product__wrap {
    .product__img img {
      aspect-ratio: 1.7 / 1 !important;
    }
  }
}

@media (max-width: 890px) {
  .product__wrap {
    .product__detail {
      padding: 25px !important;
    }
  }
}

@media (max-width: 450px) {
  .catalog__card {
    width: 40% !important;
    height: 242px !important;
  }
}