#show-product {
  --max-product-info-width: 410px;

  padding: 1.5rem 0;

  h1 {
    font-size: 1.3125rem;
  }

  .photo-view, .product-info {
    margin: 0 auto;
    max-width: var(--max-product-info-width);
  }

  .photo-view {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    margin-bottom: 1.5rem;
    height: fit-content;
  }

  .btn-group {
    display: grid;
    margin: 1rem 0;
  }

  .product-variants {
   .product-option-items {
      display: flex;
      gap: 0.75rem;
      font-size: 14px;
      margin-bottom: 1rem;
    }
    .option-item {
      padding: 0.15rem 0.75rem;
      border: 1px solid #bcbcbc;
      border-radius: 6px;
      background: none;
      color: inherit;
      cursor: pointer;
    }
    .option-item.selected {
      border: 3px solid royalblue;
    }
  }

  @media screen and (min-width: 650px) {
    .show-product-container {
      display: grid;
      grid-template-columns: 0.6fr 0.4fr;
      grid-column-gap: 2rem;
    }

    .product-info {
      max-width: none;
      width: 100%;
    }

    .photo-view {
      max-width: none;
    }
  }
}

.product-price {
  min-width: 60px;
  text-align: right;
  span {
    display: block;
  }

  .sale-price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sale-price-value {
    font-weight: 700;
    font-size: 19.5px;
  }

  .discount-percent {
    padding: 0px 8px;
    border-radius: 99px;
    background-color: var(--bulma-danger-95);
    color: deeppink;
    font-weight: 700;
    display: block;
    font-size: 13px;
  }

  .safe-price {
    display: flex;
    font-size: 15px;

    div {
      font-size: 0.92625em;
    }
    .base-price {
      color: gray;
      text-decoration-line: line-through;
    }
  }
} /* product-price */


#adjust-product-qty {
  display: flex;
  gap: 2rem;
  .btn-qty-adjust {
    background-color: var(--bulma-text-25-invert);
    font-size: 1.125em;
    border-radius: 3px;
  }

  .qty-label {
    flex-grow: 1;
    font-size: 0.90625rem;
  }

  @media screen and (min-width: 650px) {
    .qty-label {
      text-align: right;
    }
  }
}
.available-quantity {
  font-size: 0.90625rem;
}