.product-main__wrapper {
  --grid-gap: 0;
  --margin-top: 32px;

  color: var(--color-primary);
  background: var(--background-primary);
}

.product-main__container--padding-top {
  padding-top: var(--padding-top-mobile);
}

.product-main__container--padding-bottom {
  padding-bottom: var(--padding-bottom-mobile);
}

.product-main__grid {
  position: relative;
  font-size: var(--font-size-regular);
  line-height: var(--font-height-lg);
}

.product-main__info {
  padding-left: var(--grid-gap);
}

.product-main__title {
  font-size: 44px;
  line-height: var(--font-height-md);
  font-weight: var(--font-weight-h2);
  margin-top: var(--margin-top);
  margin-bottom: 8px;
}

.product-main__price {
  margin: 0 0 20px;
}

.product-main__price bq-product-price {
  font-size: 24px;
  font-family: var(--font-body);
  font-weight: var(--font-weight-headers);
}

.product-main__price-separator {
  margin: 0 5px;
}

.product-main__description {
  padding: 0 0 25px;
}

.product-main__description:last-child {
  padding: 40px 0 0;
}

.product-main__variant-label {
  margin-bottom: 6px;
}

.product-main__availability,
.product-main__variant {
  padding: 0 0 32px;
}

.product-main__variant bq-product-variations-select {
  display: block;
}

.product-main__availability bq-product-availability {
  font-family: var(--font-body);
  font-size: calc(var(--font-size-regular) - 2px);
}

.product-main__availability bq-product-availability[visible="true"] {
  margin-right: 30px;
}

.product-main__availability bq-product-availability-calendar {
  font-size: calc(var(--font-size-regular) - 2px);
  font-family: var(--font-body);
  line-height: var(--font-height-lg);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-main__availability bq-product-availability-calendar:hover {
  text-decoration: none !important;
}

.product-main__message {
  text-align: center;
  font-size: calc(var(--font-size-regular));
  padding: 23px 0 32px;
  color: var(--color-secondary);
}

@media (min-width: 768px) {
  .product-main__wrapper {
    --grid-gap: 24px;
    --grid-left: 54.5%;
    --grid-right: 45.5%;
    --margin-top: -10px;
  }

  .product-main__grid {
    display: grid;
    grid-template-columns: var(--grid-left) var(--grid-right);
  }
}

@media (min-width: 992px) {
  .product-main__wrapper {
    --grid-gap: 40px;
  }

  .product-main__container--padding-top {
    padding-top: var(--padding-top);
  }

  .product-main__container--padding-bottom {
    padding-bottom: var(--padding-bottom);
  }
}

@media (min-width: 1200px) {
  .product-main__wrapper {
    --grid-gap: 77px;
  }
}
