.border-radius-ts {
  border-top-left-radius: 5vh;
}

.border-radius-be {
  border-bottom-right-radius: 5vh;
}

.border-radius-bs {
  border-bottom-left-radius: 5vh;
}

@media (max-width: 576px) {
  .border-radius-ts {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .border-radius-be {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .mob-font-btn {
    font-size: 1.5vh !important;
  }

  .mob-font-desp {
    font-size: 2vh !important;
  }

  .mob-font-badge {
    font-size: 1vh !important;
  }
}

.font-decorative {
  font-family: "PT Serif", serif;
  font-weight: 500 !important;
}

.bounce-btn {
  animation: bounce 2.5s infinite ease-in-out;
  /* slower bounce */
  transform-origin: center bottom;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button:focus,
input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 🎯 Click bounce animation */
@keyframes clickBounce {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.85);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.qty-btn.animate {
  animation: clickBounce 0.25s ease;
}

.qty-btn {
  transition: background-color 0.2s;
  user-select: none;
}

.qty-btn:hover {
  background-color: #0f3e6dff;
}

.any-btn {
  transition: transform 0.1s ease-in-out;
}

.any-btn:active {
  animation: clickBounce 0.15s ease-in-out;
}

/* star rating */
.star-rating {
  direction: ltr;
  display: inline-flex;
  justify-content: center;
}

.star-rating input {
  display: none;
}

.star-rating label {
  font-size: 2rem;
  color: rgb(162, 159, 159);
  /* Unselected stars */
  cursor: pointer;
  padding: 0 0.4vw;
  /* Gap between stars */
  transition: color 0.1s ease;
}

/* Selected stars and all previous become yellow */
.star-rating input:checked ~ label,
.star-rating input:checked ~ label ~ label {
  color: #ca005e;
  /* Yellow */
}

.text-new {
  color: #5d688a !important;
}

.text-new2 {
  color: #354259 !important;
}

.li-hover:hover {
  transition: color 0.3s ease;
  background-color: #fbfbfb !important;
  border-radius: 1vw;
}

.bg-aromyst {
  background-color: #fffdf6 !important;
}

.bg-aromyst-2 {
  /* background-color: #dcc5b2 !important; */

  background-color: #E6BA95 !important;
}

.bg-aromyst-3 {
  background-color: #354259 !important;
}

.bg-aromyst-4 {
  background-color: #efebe9 !important;
}

.body-bg{
  background-color: #F8F6F4;
}