.product-main {
  display: grid;
  grid-template-columns: 3fr minmax(530px, 1fr);
  min-height: 630px;
  gap: 5px;
  @media (width < 1440px) {
    grid-template-columns: 2fr 1fr;
  }
  @media (width < 1024px) {
    display: flex;
    flex-direction: column;
  }
}

.product-gallery {
  position: relative;
  background-color: #222222;
  @media (width < 1024px) {
    aspect-ratio: 16/9;
    min-height: 320px;
    border: 0;
    min-width: 0;
    width: 100%;
  }
}

.product-gallery-slider {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  &:not(.slick-initialized) {
    visibility: hidden;
  }
  .slick-arrow {
    width: 13px;
    height: 26px;
    margin-top: -13px;
    border-radius: 8px;
    transform: none;
    --bg: url("data:image/svg+xml,%3Csvg width='13' height='26' viewBox='0 0 13 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9953 12.8913C12.9715 12.6244 12.8615 12.3718 12.6811 12.1698L2.30408 0.467392C2.19432 0.335632 2.05849 0.226764 1.90469 0.147271C1.75089 0.0677775 1.58225 0.0192917 1.40884 0.00468978C1.23542 -0.00991216 1.06076 0.00966611 0.895262 0.0622742C0.729766 0.114882 0.576818 0.199429 0.445526 0.310893C0.314235 0.422357 0.207286 0.55845 0.131048 0.711069C0.0548102 0.863688 0.0108429 1.02972 0.00176537 1.19925C-0.00731221 1.36879 0.018685 1.53839 0.0782093 1.69792C0.137734 1.85745 0.229567 2.00367 0.348241 2.12786L9.98551 13L0.348241 23.8721C0.229567 23.9963 0.137734 24.1425 0.0782093 24.3021C0.018685 24.4616 -0.00731221 24.6312 0.00176537 24.8007C0.0108429 24.9703 0.0548102 25.1363 0.131048 25.2889C0.207286 25.4415 0.314235 25.5776 0.445526 25.6891C0.576818 25.8005 0.729766 25.8851 0.895262 25.9377C1.06076 25.9903 1.23542 26.0099 1.40884 25.9953C1.58225 25.9807 1.75089 25.9322 1.90469 25.8527C2.05849 25.7732 2.19432 25.6644 2.30408 25.5326L12.6811 13.8302C12.7954 13.7023 12.882 13.5532 12.936 13.3919C12.99 13.2306 13.0101 13.0603 12.9953 12.8913Z' fill='%23F5852A'/%3E%3C/svg%3E%0A");
    -webkit-mask-image: var(--bg);
    mask-image: var(--bg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-color: #f5852a;
    transition: background-color 0.3s;
    z-index: 6;
    &:hover {
      background-color: #f47712;
    }
    &:before {
      display: none;
    }
  }
  .slick-prev {
    left: 40px;
    transform: rotateY(180deg);
    @media (width < 768px) {
      left: 16px;
    }
  }
  .slick-next {
    right: 40px;
    @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 {
  display: flex;
  flex-direction: column;
  padding: 32px 40px;
  background-color: #222;
  color: white;
  @media (width < 1024px) {
    padding: 24px 16px;
  }
}

.product-form-section {
  &:not(:last-child) {
    padding-bottom: 36px;
    margin-bottom: 36px;
    border-bottom: solid 1px rgba(255, 255, 255, 0.15);
  }
}

.product-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 20px;
  @media (width < 1024px) {
    font-size: 24px;
  }
}

.product-form-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  @media (width < 1200px) {
    flex-direction: column;
  }
}

.product-price {
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
  flex: none;
  @media (width < 1024px) {
    font-size: 20px;
  }
}

.product-cost {
  white-space: nowrap;
}

.product-form-btns {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: auto;
  min-width: 0;
  max-width: 274px;
  @media (width < 1200px) {
    max-width: unset;
    width: 100%;
  }
  @media (width < 1024px) {
    gap: 16px;
  }
  .add-wishlist {
    flex: none;
  }
  #order_button {
    flex: auto;
  }
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: auto;
}

.product-info-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  @media (width < 1024px) {
    font-size: 18px;
  }
}

table.product-info-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 18px;
  font-weight: 500;
  align-self: flex-start;
  width: 100%;
  @media (width >= 1200px) {
    table-layout: fixed;
  }
  @media (width < 1024px) {
    font-size: 16px;
  }
  td {
    padding: 0 24px 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 {
      color: #b4b4b4;
    }
    &:last-child {
      padding-right: 0;
      padding-top: 0;
      padding-bottom: 20px;
      text-align: left;
      a,
      span {
        color: #f5852a;
      }
      @media (width < 1024px) {
        padding-bottom: 8px;
      }
    }
  }
  tr {
    &:last-child {
      td {
        padding-bottom: 0 !important;
      }
    }
  }
}

.product-desc {
  color: white;
  margin-top: 40px;
}

.product-desc-title {
  font-size: 24px;
  font-weight: 700;
  padding-bottom: 20px;
  margin-bottom: 32px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.15);
  display: flex;
  @media (width < 1024px) {
    font-size: 20px;
  }
  span {
    padding-bottom: 20px;
    margin-bottom: -21px;
    border-bottom: solid 1px #f5852a;
  }
}

.product-desc-main {
  display: grid;
  grid-template-columns: 3fr minmax(530px, 1fr);
  gap: 32px;
  @media (width < 1440px) {
    grid-template-columns: 2fr 1fr;
  }
  @media (width < 1024px) {
    grid-template-columns: 1fr;
  }
}

.product-desc-content {
  font-size: 18px;
  line-height: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media (width < 1024px) {
    font-size: 16px;
  }
}

.product-system-requirements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;
  @media (width < 1024px) {
    font-size: 18px;
  }
}