@charset "UTF-8";

.product-info {
  --margin-side: 10px;
  padding-block: 32px;
  padding-inline: var(--margin-side);
  display: block;
}

.product-info .shopify-section {
  padding-bottom: 0 !important;
}

.product-info__tabs-wrapper {
  overflow: auto;
  margin-inline: calc(var(--margin-side) * -1);
}

.product-info__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: var(--margin-side);
}

.product-info__tab {
  display: inline-block;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 0;
  background-color: transparent;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  white-space: nowrap;
}

.product-info__tab:focus,
.product-info__tab:hover {
  outline: none;
}

.product-info__tab[aria-selected="true"] {
  border-color: #000;
}

.product-info__panels-wrapper {
  display: grid;
}

.product-info__panel {
  margin-top: 20px;
  width: 100%;
  transition:
    opacity 0.3s ease,
    margin-top 0.3s ease;
  grid-area: 1/1;
}

.product-info__panel.is-hidden {
  display: none;
}

.product-info__panel p {
  margin: 0 0 20px;
}

.product-info__panel p:last-child {
  margin-bottom: 0;
}

.product-info__panel ul,
.product-info__panel ol {
  padding-left: 5px;
  list-style-position: inside;
}

.product-info__panel.product-info__panel a em {
  font-family: var(--typography-accent-font);
  font-size: var(--typography-accent-medium-size);
  font-weight: var(--typography-accent-weight);
  line-height: var(--typography-accent-medium-height);
  letter-spacing: calc(var(--typography-accent-medium-size) * var(--typography-accent-tracking) * 0.01);
  font-style: normal;
}

.product-info .display-large,
.product-info .display-large * {
  font-family: var(--typography-display-font);
  font-size: var(--typography-display-large-size);
  font-weight: var(--typography-display-weight);
  line-height: var(--typography-display-large-height);
  letter-spacing: calc(var(--typography-display-large-size) * var(--typography-display-tracking) * 0.01);
  text-transform: var(--typography-display-transform);
}

.product-info .display-medium,
.product-info .display-medium * {
  font-family: var(--typography-display-font);
  font-size: var(--typography-display-medium-size);
  font-weight: var(--typography-display-weight);
  line-height: var(--typography-display-medium-height);
  letter-spacing: calc(var(--typography-display-medium-size) * var(--typography-display-tracking) * 0.01);
  text-transform: var(--typography-display-transform);
}

.product-info .display-small,
.product-info .display-small * {
  font-family: var(--typography-display-font);
  font-size: var(--typography-display-small-size);
  font-weight: var(--typography-display-weight);
  line-height: var(--typography-display-small-height);
  letter-spacing: calc(var(--typography-display-small-size) * var(--typography-display-tracking) * 0.01);
  text-transform: var(--typography-display-transform);
}

.product-info .heading-medium,
.product-info .heading-medium * {
  font-family: var(--typography-heading-font);
  font-size: var(--typography-heading-medium-size);
  font-weight: var(--typography-heading-weight);
  line-height: var(--typography-heading-medium-height);
  letter-spacing: calc(var(--typography-heading-medium-size) * var(--typography-heading-tracking) * 0.01);
  text-transform: var(--typography-heading-transform);
}

.product-info .heading-small,
.product-info .heading-small * {
  font-family: var(--typography-heading-font);
  font-size: var(--typography-heading-small-size);
  font-weight: var(--typography-heading-weight);
  line-height: var(--typography-heading-small-height);
  letter-spacing: calc(var(--typography-heading-small-size) * var(--typography-heading-tracking) * 0.01);
  text-transform: var(--typography-heading-transform);
}

.product-info .body-small,
.product-info .body-small * {
  font-family: var(--typography-body-font);
  font-size: var(--typography-body-small-size);
  font-weight: var(--typography-body-weight-normal);
  line-height: var(--typography-body-small-height);
  letter-spacing: calc(var(--typography-body-small-size) * var(--typography-body-tracking) * 0.01);
}

.product-info .accent-medium,
.product-info .accent-medium * {
  font-family: var(--typography-accent-font);
  font-size: var(--typography-accent-medium-size);
  font-weight: var(--typography-accent-weight);
  line-height: var(--typography-accent-medium-height);
  letter-spacing: calc(var(--typography-accent-medium-size) * var(--typography-accent-tracking) * 0.01);
}

.product-info .accent-xsmall,
.product-info .accent-xsmall * {
  font-family: var(--typography-accent-font);
  font-size: var(--typography-accent-xsmall-size);
  font-weight: var(--typography-accent-weight);
  line-height: var(--typography-accent-xsmall-height);
  letter-spacing: calc(var(--typography-accent-xsmall-size) * var(--typography-accent-tracking) * 0.01);
}

@media (min-width: 768px) {
  .product-info {
    --margin-side: 20px;
  }

  .product-info__tab {
    padding: 5px;
  }

  .product-info__panel {
    width: var(--content-width, 100%);
  }
}