.product-detail__sell-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: start;
  padding: 0;
  margin: 0;
  list-style: none;
}
.product-detail__sell-info .sell-info {
  display: flex;
  gap: 15px;
  align-items: center;
}
.product-detail__sell-info .sell-info__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.product-detail__sell-info .sell-info__text {
  flex: 1 0 0;
  margin: 0;
}
.product-detail__sell-info--horizontal {
  --sell-info-gap: 20px;

  flex-flow: row wrap;
  gap: var(--sell-info-gap);
}
.product-detail__sell-info--horizontal .sell-info {
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  width: calc(
    (100% - (var(--sell-info-column) - 1) * var(--sell-info-gap)) /
      var(--sell-info-column)
  );
  overflow: hidden;
  text-align: center;
}
@media (max-width: 959px) {
  .product-detail__sell-info--horizontal .sell-info {
    gap: 6px;
  }
}

@layer component {
  theme-dialog > dialog {
    inset: 0;
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: auto;
    background-color: rgba(
      var(--color-background, var(--color-page-background, 255, 255, 255))
    );
    animation-duration: 0.2s;
    animation-timing-function: ease;
  }

  @media (max-width: 959px) {
    theme-dialog > dialog {
      --modal-animation-name: animation-slide-in-bottom;

      inset-block: auto 0;
      width: 100vw;
    }
  }

  theme-dialog > dialog::backdrop {
    background-color: rgb(var(--color-mask), 0.4);
  }

  theme-dialog[data-placement="left"] > dialog {
    --modal-animation-name: animation-slide-in-left;

    inset-inline: 0 auto;
    width: auto;
    height: 100%;
  }

  theme-dialog[data-placement="right"] > dialog {
    inset-inline: auto 0;
    width: auto;
    height: 100%;

    --modal-animation-name: animation-slide-in-right;
  }

  theme-dialog[data-placement="top"] > dialog {
    --modal-animation-name: animation-slide-in-top;

    inset-block: 0 auto;
    width: 100vw;
  }

  theme-dialog[data-placement="bottom"] > dialog {
    --modal-animation-name: animation-slide-in-bottom;

    inset-block: auto 0;
    width: 100vw;
  }
}