body {
  --border-color: #d9d9d9;
}

.product-main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  min-height: 560px;
  border-top: solid 1px var(--border-color);
  border-bottom: solid 1px var(--border-color);
  @media (width < 1440px) {
    grid-template-columns: 2fr 1fr;
  }
  @media (width < 1024px) {
    display: flex;
    flex-direction: column;
  }
}

.product-gallery {
  position: relative;
  border-right: solid 1px var(--border-color);
  @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: 20px;
    height: 40px;
    margin-top: -20px;
    transform: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='40' viewBox='0 0 20 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.14648 0.255859C2.38063 0.275575 2.60822 0.341185 2.81543 0.448242C3.02263 0.555333 3.20527 0.702165 3.35254 0.878906L3.35742 0.884766L19.3223 18.8887L19.3232 18.8896C19.5651 19.1606 19.7124 19.4984 19.7441 19.8545C19.764 20.0803 19.7362 20.3078 19.6641 20.5234C19.592 20.739 19.4764 20.9387 19.3232 21.1104L19.3223 21.1113L3.35742 39.1152L3.35254 39.1211C3.20526 39.2978 3.02261 39.4447 2.81543 39.5518C2.60822 39.6588 2.38064 39.7244 2.14648 39.7441C1.9123 39.7639 1.67643 39.737 1.45313 39.666C1.22992 39.5951 1.02414 39.4808 0.847656 39.3311C0.671146 39.1812 0.526865 38.9983 0.424805 38.7939C0.322888 38.5898 0.264068 38.3679 0.251953 38.1416C0.23984 37.9153 0.274985 37.6888 0.354492 37.4756C0.434098 37.2622 0.557456 37.0662 0.716797 36.8994L0.722656 36.8926L15.5498 20.166L15.6963 20L15.5498 19.834L0.722656 3.10742L0.716797 3.10059L0.603516 2.9707C0.498 2.83525 0.414188 2.68441 0.354492 2.52441C0.274982 2.31117 0.239843 2.0847 0.251953 1.8584C0.264068 1.63214 0.322904 1.41021 0.424805 1.20605C0.526865 1.00174 0.671146 0.818799 0.847656 0.668945C1.02413 0.519174 1.22989 0.404945 1.45312 0.333984C1.67641 0.263016 1.91228 0.236141 2.14648 0.255859Z' fill='%233B4579' stroke='%23DFDFDF' stroke-width='0.5'/%3E%3C/svg%3E%0A");
    z-index: 6;
    &:before {
      display: none;
    }
  }
  .slick-prev {
    left: 36px;
    transform: rotateY(180deg);
    @media (width < 768px) {
      left: 16px;
    }
  }
  .slick-next {
    right: 36px;
    @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-section {
  padding: 32px 35px;
  border-bottom: solid 1px var(--border-color);
  @media (width < 1024px) {
    padding: 24px;
  }
  &:last-child {
    border-bottom: 0;
  }
}

.product-form-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.product-title {
  text-align: center;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  @media (width < 1440px) {
    font-size: 32px;
  }
  @media (width < 1024px) {
    font-size: 24px;
  }
}

.product-price {
  font-size: 35px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  @media (width < 1440px) {
    font-size: 30px;
  }
  @media (width < 1024px) {
    font-size: 20px;
  }
}

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

.product-cost-alt {
  white-space: nowrap;
  img {
    width: 28px;
    vertical-align: middle;
  }
}

.product-form-main {
  display: flex;
  align-items: center;
  gap: 64px;
  @media (width < 1440px) {
    gap: 32px;
  }
  @media (width < 1024px) {
    gap: 16px;
  }
  .add-wishlist {
    flex: none;
  }
  .add-to-cart {
    flex: auto;
  }
}

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

.product-info-title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  @media (width < 1440px) {
    font-size: 20px;
  }
  @media (width < 1024px) {
    font-size: 18px;
  }
}

table.product-info-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 18px;
  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 {
      color: #818485;
    }
    &: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: grid;
  grid-template-columns: 3fr 1fr;
  @media (width < 1440px) {
    grid-template-columns: 2fr 1fr;
  }
  @media (width < 1024px) {
    grid-template-columns: 1fr;
  }
}

.product-desc-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: solid 1px var(--border-color);
  padding: 24px 35px 0;
  @media (width < 1024px) {
    padding: 24px;
    border-right: 0;
    border-bottom: solid 1px var(--border-color);
  }
}

.product-desc-title {
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
}

.product-desc-content {
  font-size: 18px;
  line-height: 1.55;
  font-family: "Roboto Condensed", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media (width < 1024px) {
    font-size: 16px;
  }
}

.product-system-requirements {
  padding: 24px 35px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 18px;
  line-height: 1.55;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  @media (width < 1024px) {
    padding: 24px;
    font-size: 16px;
  }
}

body.night {
  --border-color: #202830;
  .product-main,
  .product-desc {
    color: white;
  }
}