.product-hero__wrap {
  position: relative;

  .product-hero__actions {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    column-gap: 10px;
  }
  .product-hero__main-img-container {
    width: 100%;
    height: 557px;
    overflow: hidden;

    @media (width < 960px) {
      height: 442px;
    }

    .product-hero__img-wrap {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }
  .product-hero__thumbs-wrap {
    position: absolute;
    top: 451px;
    left: 20px;
    width: 274px;

    @media (width < 960px) {
      top: 336px;
    }
    @media (width < 480px) {
      position: static;
      margin-top: 8px;
      width: 100%;
    }

    .owl-item {
      height: 86px;
      border-radius: 5px;
    }
    .product-hero__thumb {
      width: 86px;
      height: 86px;
      border: 1px solid #fff;
      background-image: var(--product-hero-thumb-image);
      background-position: center;

      @media (hover: hover) {
        transition: border-color var(--root-transition-duration) var(--root-transition-timing-function);

        &:hover {
          border-color: var(--c-red);
        }
      }
      @media (width < 480px) {
        width: 95px;
        border: none;
        background-image: var(--product-hero-thumb-image-lt-480);
      }
    }
  }
  .product-hero__info {
    position: absolute;
    inset: 20px 20px 20px auto;
    width: 359px;
    background-color: #fff;

    @media (width < 960px) {
      position: static;
      margin-top: 10px;
      width: 100%;
      background-color: var(--c-gray);
    }
  }
}

.fancybox-inner img[data-gallery="product-gallery"] {
  width: 100%;
  height: 100%;
  object-fit: fill;

  @media (width < 640px) {
    object-fit: cover;
  }
}

.info-card {
  padding: 20px;
  display: flex;
  flex-direction: column;

  p {
    margin-bottom: 0;
  }
  .info-card__title {
    --info-card-title-font-size: 21px;

    max-width: 289px;
    font: 600 var(--info-card-title-font-size) / 25px Roboto, Arial, sans-serif;
    letter-spacing: calc(-0.02 * var(--info-card-title-font-size));

    @media (width < 960px) {
      --info-card-title-font-size: 20px;

      max-width: 369px;
      line-height: 23px;
    }
    @media (width < 640px) {
      --info-card-title-font-size: 16px;

      max-width: 240px;
      line-height: 19px;
    }
  }
  .info-card__main {
    margin-block: 56px 40px;
    
    &:has(.characteristics-list > div:nth-child(4)) {
        margin-block: 42px 30px;
    }
    &:has(.characteristics-list > div:nth-child(5)) {
        margin-block: 28px 20px;
    }

    @media (width < 960px) {
      margin-block: 34px 24px;
    }
    @media (width < 640px) {
      margin-block: 30px;
    }
  }
  .info-card__footer {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    @media (width < 960px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "a b"
        "a c";
      gap: 13px 20px;
    }
    @media (width < 640px) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "b"
        "a"
        "c";
      row-gap: 15px;
    }

    .info-card__price {
      --info-card-price-font-size: 26px;

      font: 700 var(--info-card-price-font-size) / 30px Roboto, Arial, sans-serif;
      letter-spacing: calc(-0.02 * var(--info-card-price-font-size));

      @media (width < 960px) {
        grid-area: b;
      }
      @media (width < 640px) {
        --info-card-price-font-size: 16px;

        line-height: 19px;
      }

      & > span:last-child {
        color: var(--c-dark-gray-text);
        vertical-align: top;
      }
    }
    .info-card__price-caption {
      max-width: 198px;
      margin-top: 20px;
      color: var(--c-dark-gray-text);

      @media (width < 960px) {
        grid-area: c;
        margin-top: 0;
      }
    }
    .info-card__btn {
      margin-top: auto;

      @media (width < 960px) {
        grid-area: a;
        margin-bottom: 3px;
      }
      @media (width < 640px) {
        margin: 0;
      }
    }
  }
}

.product-content {
  margin-top: 10px;
  padding: 20px;
  background-color: var(--c-gray);

  @media (width < 960px) {
    margin-top: 20px;
    padding: 0;
    background-color: transparent;
  }

  p {
    margin-bottom: 0;

    &:not(:first-child) {
      margin-top: 10px;
    }
  }
  .product-content__tabs {
    display: flex;
    column-gap: 5px;

    @media (hover: hover) {
      .bta-tab-active {
        transition-property: background-color, color, border-color, opacity;
      }

      &:has(button:not(.bta-tab-active):hover) {
        .bta-tab-active {
          opacity: 0.5;
        }
      }
    }
    @media (width < 960px) {
      display: grid;
      grid-template-columns: 1fr 1fr;

      button {
        width: 100%;
      }
    }
  }
  .product-content__tabs-content-wrap {
    margin-top: 20px;
    color: var(--c-black-darker);

    .product-content__tab-content {
      max-width: 791px;
    }
  }
}