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

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

.product-gallery {
  position: relative;
  border: solid 1px var(--border-color);
  border-radius: 8px;
  @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: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 8px;
    transform: none;
    background: #21aa89
      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='M9.99635 9.91635C9.97807 9.71106 9.89346 9.51674 9.7547 9.36135L1.77237 0.359533C1.68794 0.258178 1.58346 0.174434 1.46515 0.113285C1.34684 0.0521365 1.21712 0.0148398 1.08372 0.00360753C0.95032 -0.00762474 0.815968 0.00743547 0.688663 0.0479033C0.561359 0.088371 0.443706 0.153407 0.342713 0.239149C0.241719 0.32489 0.159451 0.429577 0.100806 0.546976C0.0421617 0.664376 0.00834072 0.792089 0.00135797 0.922503C-0.00562477 1.05292 0.0143731 1.18337 0.060161 1.30609C0.105949 1.42881 0.17659 1.54128 0.267878 1.63682L7.68117 9.99999L0.267878 18.3632C0.17659 18.4587 0.105949 18.5712 0.060161 18.6939C0.0143731 18.8166 -0.00562477 18.9471 0.00135797 19.0775C0.00834072 19.2079 0.0421617 19.3356 0.100806 19.453C0.159451 19.5704 0.241719 19.6751 0.342713 19.7608C0.443706 19.8466 0.561359 19.9116 0.688663 19.9521C0.815968 19.9926 0.95032 20.0076 1.08372 19.9964C1.21712 19.9852 1.34684 19.9479 1.46515 19.8867C1.58346 19.8256 1.68794 19.7418 1.77237 19.6405L9.7547 10.6386C9.84258 10.5402 9.90926 10.4255 9.95077 10.3015C9.99229 10.1774 10.0078 10.0464 9.99635 9.91635Z' fill='white'/%3E%3C/svg%3E%0A")
      center center / 10px 20px no-repeat;
    transition: background-color 0.3s;
    z-index: 6;
    &:hover {
      background-color: #1d9578;
    }
    &:active {
      background-color: #1b8c71;
    }
    &:before {
      display: none;
    }
  }
  .slick-prev {
    left: 26px;
    transform: rotateY(180deg);
    @media (width < 768px) {
      left: 16px;
    }
  }
  .slick-next {
    right: 26px;
    @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;
  gap: 5px;
}

.product-form-section {
  padding: 24px;
  border: solid 1px var(--border-color);
  border-radius: 8px;
  @media (width < 1024px) {
    padding: 24px 16px;
  }
}

.product-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 14px;
  border-bottom: solid 1px var(--border-color);
  margin-bottom: 24px;
  @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: 26px;
  font-weight: 500;
  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: 320px;
  @media (width < 1200px) {
    max-width: unset;
    width: 100%;
  }
  @media (width < 1024px) {
    gap: 16px;
  }
  .add-wishlist {
    flex: none;
  }
  .add-to-cart {
    flex: auto;
  }
}

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

.product-info-title {
  font-size: 22px;
  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: 16px;
  font-weight: 500;
  align-self: flex-start;
  width: 100%;
  @media (width >= 1200px) {
    table-layout: fixed;
  }
  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: #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 {
  padding: 0 5px;
}

.product-desc-title {
  font-size: 22px;
  font-weight: 700;
  padding: 0 24px 8px;
  margin-bottom: 24px;
  border-bottom: solid 1px var(--border-color);
  @media (width < 1024px) {
    padding: 0 16px 8px;
  }
}

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

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

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

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