.shopItem {
  --Surface-bgTertiary10: var(--opacity-10w);
  --Text-primaryNoneBg: var(--opacity-70w);
  --Text-link : var(--information-200);
  --button-borderSecondary: var(--opacity-50w);
  --shadow-opacity25: var(--opacity-25w);
}

@media (prefers-color-scheme: dark) {
  .shopItem {
    --Surface-bgTertiary10: var(--opacity-10b);
    --Text-primaryNoneBg: var(--base-white);
    --Text-link : var(--information-200);
    --button-borderSecondary: var(--opacity-50b);
    --shadow-opacity25: var(--opacity-25b);

  }
}

li.shopItem {
  display: inline-flex;
  padding: 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0.25rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--Surface-bgTertiary10);
  box-shadow: 0 0 4px 0 var(--shadow-opacity25);

  cursor: pointer;
}

li.shopItem > span {
  color: var(--Text-primaryNoneBg);
  text-align: center;
}

li.shopItem .coin{
    border: none;
}

li.shopItem .avatar{
    overflow: visible;
}

li.shopItem .avatar img{
    border-radius: 0.5rem;
}

li.shopItem .avatar.redDot::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-color: #f00;

  position: absolute;
  right: -0.221rem;
  top: calc(0.1rem - 0.221rem);
  border-radius: 50%;
}

li.shopItem .quantitySelect{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid var(--button-borderSecondary);
    padding: 0.1rem;
    gap: 1rem;
}

li.shopItem .qs-btn{
    background-color: #F29D38;
    color: var(--Surface-bgTertiary10);
    height: 1.125rem;
    width: 1.125rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

li.shopItem .qs-btn.minus{
    padding-bottom: 0.2rem;
}

li.shopItem .value{
    min-width: 1rem;
    text-align: center;
    color: var( --Text-primaryNoneBg);
    font-size: 1rem;
}

li.shopItem .stockInfo{
  color: var(--Text-link);
  margin-top: 0.25rem;
}

li.shopItem .stockInfo:before{
  content: "×";
  color: var(--Text-link);
}