.product {
  padding: var(--spacing-1) 0 0;

  @media screen and (min-width: 1000px) {
    column-gap: 64px;
    padding-top: var(--spacing-0-5);
  }
}

.product-info-mobile {
  @media screen and (min-width: 1000px) {
    display: none;
  }
}

.product-info:not(.product-info-mobile) {
  .product-info__block-item:where([data-block-type=vendor]),
  .product-info__block-item:where([data-block-type=title]),
  .product-info__block-item:where([data-block-type=badges]),
  .product-info__block-item:where([data-block-type=sku]),
  .product-info__block-item:where([data-block-type=price]),
  .product-info__block-item:where([data-block-type=rating]),
  .product-info__block-item:where([data-block-type=payment_terms]),
  .product-info__block-item:where([data-block-type=text]) {
    display: none;

    @media screen and (min-width: 1000px) {
      display: block;
    }
  }

  .product-info__block-item:where([data-block-type=text]) + .product-info__block-item:where([data-block-type=collapsible-text]) {
    @media screen and (max-width: 999px) {
      margin-block-start: 0;
    }
  }

  .product-info__block-item:where([data-block-type=text]) + .product-info__block-item:where([data-block-type=description]) .accordion__toggle {
    @media screen and (max-width: 999px) {
      padding-block-start: 0;
    }
  }
}

.product-info__block-item:where([data-block-type=vendor],[data-block-type=title],[data-block-type=sku],[data-block-type=price],[data-block-type=rating],[data-block-type=payment-terms]) {
  @media screen and (min-width: 1000px) {
    --product-info-block-spacing: 14px;
  }
}

.product-info__text,
.product-info__vendor a {
  font-family: var(--global-font-family-button);
  font-size: var(--font-size-button-text-small);
  font-weight: var(--global-font-weight-button);
  line-height: var(--global-line-height-button);
  letter-spacing: var(--global-letter-spacing-button);
  text-transform: var(--font-button-text-transform);
}

.product-info__vendor a {
  @media screen and (min-width: 1000px) {
    font-size: var(--font-size-button-text-medium);
  }
}

.product-info__block-item:where([data-block-type=title]) {
  padding-bottom: var(--product-info-block-spacing);

  @media screen and (min-width: 1000px) {
    padding-bottom: var(--spacing-2-5);
  }
}

.product-info__block-item:where([data-block-type=quantity-selector]) {
  margin-block-start: var(--spacing-5);

  @media screen and (min-width: 1000px) {
    margin-block-start: var(--spacing-7);
  }
}

.product-info__block-item:where([data-block-type=buy-buttons]) {
  @media screen and (min-width: 1000px) {
    margin-block-end: var(--spacing-6);
  }
}

.product-info__block-item:where([data-block-type=price]) {
  --product-info-block-spacing: var(--spacing-1);
}

.product-info__block-item:where([data-block-type=text]) {
  --product-info-block-spacing: var(--spacing-1);

  @media screen and (min-width: 1000px) {
    --product-info-block-spacing: var(--spacing-3);
    margin-block-end: 0;
  }
}

.product-info__block-item:where([data-block-type=text]) + .product-info__block-item:where([data-block-type=collapsible-text]) {
  margin-block-start: 10px;
}

.product-info__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-5-base);
  line-height: var(--line-height-heading);
  text-transform: var(--font-heading-text-transform);

  @media screen and (min-width: 1000px) {
    font-size: var(--font-size-heading-2-base);
  }
}

.product-gallery {
  @media screen and (min-width: 1000px) {
    gap: 14px;
  }
}

.product-gallery__prev,
.product-gallery__next {
  &[disabled] {
    opacity: 0.5;

    @media screen and (min-width: 1000px) {
      opacity: 0;
    }
  }

  @media screen and (min-width: 1000px) {
    width: var(--spacing-7);
    height: 100%;
    background-color: rgb(var(--background));
  }
}

.product-gallery__thumbnail-list-wrapper {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-2-5);

  &>button {
    @media screen and (min-width: 1000px) {
      position: absolute;
      top: 0;
      opacity: 1;
      margin-top: 0;
      transition: opacity .1s, transform .1s;
      transform: none;
    }
  }

  .product-gallery__next {
    @media screen and (min-width: 1000px) {
      right: 0 !important;
    }
  }

  .product-gallery__prev {
    @media screen and (min-width: 1000px) {
      left: 0 !important;
    }
  }

  .animated-arrow {
    @media screen and (min-width: 1000px) {
      transform: translateX(9px);
    }
  }

  .animated-arrow--reverse {
    @media screen and (min-width: 1000px) {
      transform: rotate(180deg) translateX(9px);
    }
  }
}

.product-gallery__thumbnail-list {
  grid-auto-columns: 90px;

  @media screen and (min-width: 1000px) {
    grid-auto-columns: 120px;
    gap: var(--spacing-2-5);
  }
}

.product-gallery__thumbnail {
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    border: 1px solid var(--c-web-black);
    background-color: transparent;
  }

  img {
    height: 112px;

    @media screen and (min-width: 1000px) {
      height: 149px;
    }
  }
}

.product-gallery__thumbnail-wrapper {
  width: calc(100% - 40px);
}

.page-dots {
  column-gap: var(--spacing-2);

  > * {
    width: var(--spacing-2);
    height: var(--spacing-2);
  }

  button {
    background-color: var(--c-coal);
    opacity: 0.5;

    &[aria-current="true"] {
      background-color: var(--c-web-black);
      opacity: 1;
    }
  }
}

.variant-picker {
  gap: var(--spacing-5);

  @media screen and (min-width: 1000px) {
    gap: var(--spacing-7);
  }
}

.variant-picker__option-size-chart,
.quantity-selector__input,
.product-info__quantity-selector label,
.variant-picker__option-name {
  font-family: var(--font-subtitle);
  font-size: var(--font-size-subtitle-small);
  line-height: var(--line-height-subtitle);
  text-transform: var(--font-subtitle-text-transform);
  letter-spacing: var(--font-subtitle-letter-spacing);
  font-weight: var(--font-subtitle-bold-weight);

  @media screen and (min-width: 1000px) {
    font-size: var(--font-size-subtitle-default);
  }
}

.product-info__quantity-selector label,
.variant-picker__option-info {
  margin-block-end: var(--spacing-2-5);

  @media screen and (min-width: 1000px) {
    margin-block-end: var(--spacing-3);
  }
}

.color-swatch {
  --swatch-offset: 5px;
  --swatch-margin: 5px;
  width: var(--spacing-6);
  height: var(--spacing-6);
  transition: all ease-in-out 0.3s;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--c-green);
    border-radius: 100%;
    transition: opacity 0.3s ease-in-out;
  }

  @media screen and (min-width: 1000px) {
    width: var(--spacing-8);
    height: var(--spacing-8);
  }

  &::before {
    box-shadow: 0 0 0 1px;
  }
}

:checked+.color-swatch {
  width: 22px;
  height: 22px;

  @media screen and (min-width: 1000px) {
    width: var(--spacing-8);
    height: var(--spacing-8);
  }

  &::after {
    opacity: 0;
  }
}

.block-swatch {
  min-width: 50px;
  height: 35px;
  padding-inline-start: var(--spacing-3);
  padding-inline-end: var(--spacing-3);
  border: none;
  border-radius: var(--spacing-0-5);
  background-color: var(--c-anejo-50);
  justify-content: center;

  @media screen and (min-width: 1000px) {
    min-width: 93px;
    height: 45px;
  }

  &::before {
    box-shadow: 0 0 0 1px var(--c-web-black);
  }
}

.quantity-selector {
  height: 55px;
  border: 1px solid var(--c-web-black);
  border-radius: var(--spacing-0-5);
}

.quantity-selector__input {
  width: 50px;
}

.quantity-selector__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 37px;
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.product-info__price {
  .rating-with-text {
    align-items: center;
  }

  .product-info__text {
    margin-top: 4px;

    @media screen and (min-width: 768px) {
      margin-top: 12px;
    }
  }
}