.product-main {
  display: flex;
  gap: 5px;
  min-height: 560px;
  @media (width < 1024px) {
    flex-direction: column;
    min-height: unset;
  }
}

.product-gallery {
  flex: auto;
  min-width: 0;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(39px);
  border-radius: 12px;
  overflow: hidden;
  will-change: transform;
  position: relative;
  @media (width < 1024px) {
    aspect-ratio: 16/9;
    min-height: 320px;
  }
}

.product-gallery-slider {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  &:not(.slick-initialized) {
    visibility: hidden;
  }
  .slick-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-top: -22px;
    transform: none;
    background:
      url("data:image/svg+xml,%3Csvg width='10' height='20' viewBox='0 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.00355998 10.0837C0.0213899 10.2889 0.103915 10.4833 0.239249 10.6386L8.02461 19.6405C8.10696 19.7418 8.20887 19.8256 8.32426 19.8867C8.43965 19.9479 8.56616 19.9852 8.69627 19.9964C8.82638 20.0076 8.95742 19.9926 9.08158 19.9521C9.20574 19.9116 9.32049 19.8466 9.41899 19.7609C9.5175 19.6751 9.59773 19.5704 9.65493 19.453C9.71213 19.3356 9.74512 19.2079 9.75193 19.0775C9.75874 18.9471 9.73923 18.8166 9.69457 18.6939C9.64992 18.5712 9.58102 18.4587 9.49198 18.3632L2.26162 10L9.49198 1.63683C9.58102 1.54129 9.64992 1.42882 9.69458 1.3061C9.73923 1.18339 9.75874 1.05293 9.75193 0.922514C9.74512 0.792101 9.71213 0.664402 9.65493 0.547003C9.59774 0.429604 9.5175 0.324917 9.419 0.239176C9.32049 0.153435 9.20574 0.0883827 9.08158 0.0479144C8.95742 0.00744813 8.82638 -0.00762757 8.69627 0.0036048C8.56617 0.0148372 8.43965 0.0521334 8.32426 0.113283C8.20887 0.174431 8.10696 0.25819 8.02461 0.359545L0.239249 9.36136C0.153539 9.4598 0.0885038 9.57446 0.0480136 9.69855C0.00752347 9.82263 -0.00759418 9.95361 0.00355998 10.0837Z' fill='white'/%3E%3C/svg%3E%0A")
        center center / 10px 20px no-repeat,
      linear-gradient(90deg, #4776e6 0%, #8e54e9 100%);
    &:before {
      display: none;
    }
  }
  .slick-prev {
    left: 40px;
    @media (width < 768px) {
      left: 16px;
    }
  }
  .slick-next {
    right: 40px;
    transform: rotateY(180deg);
    @media (width < 768px) {
      right: 16px;
    }
  }
  .slick-list {
    margin: 0;
    flex: auto;
    display: flex;
    flex-direction: column;
  }
  .slick-track {
    display: flex;
    height: 100%;
  }
  .slick-slide {
    padding: 0;
  }
}

.product-gallery-slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  float: none;
  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  iframe {
    max-height: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
  }
}

.product-form {
  flex: none;
  width: max(472px, 33.3%);
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(39px);
  border-radius: 12px;
  overflow: hidden;
  will-change: transform;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  @media (width < 1440px) {
    padding: 24px;
    gap: 16px;
  }
  @media (width < 1024px) {
    width: auto;
    padding: 24px 16px;
  }
}

.product-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  @media (width < 1440px) {
    font-size: 32px;
  }
  @media (width < 1024px) {
    font-size: 24px;
  }
}

.product-form-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  @media (width < 768px) {
    flex-direction: column;
  }
}

.product-price {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.product-btns {
  display: flex;
  align-items: center;
  gap: 32px;
  @media (width < 1024px) {
    gap: 16px;
  }
  .btn {
    min-width: 192px;
  }
}

.product-info {
  padding-top: 28px;
  border-top: solid 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 28px;
  @media (width < 1024px) {
    margin-top: 8px;
    padding-top: 24px;
    gap: 16px;
  }
}

.product-info-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  @media (width < 1440px) {
    font-size: 20px;
  }
  @media (width < 1024px) {
    font-size: 18px;
  }
}

table.product-info-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 16px;
  align-self: flex-start;
  width: auto;
  td {
    padding: 0 80px 20px 0;
    border: 0;
    height: auto;
    font-size: inherit;
    @media (width < 1440px) {
      padding-right: 40px;
    }
    @media (width < 1024px) {
      padding: 0 24px 8px 0;
    }
    &:first-child {
      font-weight: 700;
    }
    &:last-child {
      padding-right: 0;
      padding-top: 0;
      padding-bottom: 20px;
      text-align: left;
      @media (width < 1024px) {
        padding-bottom: 8px;
      }
    }
  }
  tr {
    &:last-child {
      td {
        padding-bottom: 0 !important;
      }
    }
  }
}

.product-desc {
  display: flex;
  flex-direction: column;
  padding: 26px 40px 32px;
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(39px);
  border-radius: 12px;
  overflow: hidden;
  will-change: transform;
  margin-top: 40px;
  @media (width < 1024px) {
    padding: 24px 16px;
    margin-top: 24px;
  }
}

.product-desc-title {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  text-align: left;
}

.product-desc-body {
  display: grid;
  grid-template-columns: 2.05fr 1fr;
  gap: 24px;
  @media (width < 768px) {
    grid-template-columns: 1fr;
  }
}

.product-desc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-desc-section-title {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.product-desc-content {
  font-size: 16px;
  letter-spacing: -0.03em;
  line-height: 2.125;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-system-requirements-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: -0.03em;
  line-height: 1.75;
  font-size: 16px;
}

.product-system-requirements-title {
  font-weight: 700;
}
