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

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: #ffffff00;
}

::-webkit-scrollbar-thumb {
  background: #00EAF2;
  border-radius: 50px;
}

input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

body.cart-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

@keyframes fade-in {
  from {
    background-color: rgba(0, 0, 0, 0);
  }

  to {
    background-color: rgba(0, 0, 0, 0.8);
  }
}

@keyframes fade-out {
  from {
    background-color: rgba(0, 0, 0, 0.8);
  }

  to {
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes slide-in {
  from {
    transform: translateX(500px);
  }

  to {
    transform: translateX(0px);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(500px);
  }
}


#cart-drawer[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

#cart-drawer[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

#cart-drawer[data-state="open"]>div {
  animation: slide-in 0.4s forwards;
}

#cart-drawer[data-state="closed"]>div {
  animation: slide-out 0.4s forwards;
}

.dialog[data-state="open"] {
  animation: fade-in 0.4s forwards;
}

.dialog[data-state="closed"] {
  animation: fade-out 0.4s forwards;
}

.dialog[data-state="open"]>div {
  animation: dialog-in 0.2s forwards;
}

.dialog[data-state="closed"]>div {
  animation: dialog-out 0.2s forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    scale: 50%;
  }

  to {
    opacity: 1;
    scale: 100%;
  }
}

@keyframes dialog-out {
  from {
    opacity: 1;
    scale: 100%;
  }

  to {
    opacity: 0;
    scale: 50%;
  }
}

.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}

.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.centralcart-content iframe {
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.grid-background {
  background-image: linear-gradient(to right, hsla(0, 0%, 100%, .03) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 100%, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 85% at 40% 30%, #000 0%, #fff0 110%)
}

.custom-bg-mask {
  mask-image: linear-gradient(hsl(var(--background)), rgba(0, 0, 0, 0.3), rgb(0, 0, 0, 0));
}

@keyframes loading {
  0% {
    left: -50%;
  }

  to {
    left: 100%;
  }
}

.detail-dash {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, hsl(var(--foreground) / 0) 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

/* Sidebar categories */
.custom-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--primary));
  border-radius: 0.25rem;
}

.cat-dropdown {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.cat-dropdown:not(.hidden) {
  animation: slideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: scaleY(0);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

#mobile-categories-dropdown:not(.hidden) {
  animation: slideInMobile 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInMobile {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-subcategories:not(.hidden) {
  animation: slideInSub 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInSub {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.shimmer-container {
  position: relative;
  overflow: hidden;
}

.shimmer-effect {
  background: linear-gradient(-90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 25%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.1) 75%,
      transparent 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation: shimmerAuto 3s ease-in-out infinite;
}

.shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(-90deg,
      transparent 0%,
      #bdbdbd41 35%,
      #bdbdbd41 60%,
      #bdbdbd41 85%,
      transparent 100%);
}

@keyframes shimmerAuto {
  0% {
    transform: translateX(-100%);
  }

  20% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.mw-section {
  position: relative;
  isolation: isolate;
}

.mw-section::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(0, 234, 242, 0.35), rgba(0, 234, 242, 0.08) 60%, transparent 100%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

.mw-section::after {
  content: '';
  position: absolute;
  bottom: -160px;
  right: -160px;
  width: 520px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(0, 153, 255, 0.25), rgba(0, 153, 255, 0.06) 60%, transparent 100%);
  filter: blur(32px);
  pointer-events: none;
  z-index: -1;
}

.mw-section-overlay {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    radial-gradient(1200px 300px at 10% -10%, rgba(255, 255, 255, 0.06), transparent 40%),
    radial-gradient(900px 260px at 110% 120%, rgba(0, 234, 242, 0.08), transparent 45%);
  mask-image: linear-gradient(#000, transparent 120%);
}

.influ-section {
  position: relative;
}

.influencers-section-overlay {
  background-image: radial-gradient(900px 240px at 0% -10%, rgba(255, 77, 77, 0.12), transparent 45%),
    radial-gradient(700px 240px at 110% 120%, rgba(255, 77, 77, 0.08), transparent 45%);
  mask-image: linear-gradient(#000, transparent 120%);
}

.influ-card:hover .influ-card__avatar {
  transform: scale(1.03);
}

@media (max-width: 767px) {
  #most-wanted-list {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 6px;
  }

  #most-wanted-list>* {
    min-width: calc(50% - 6px);
  }

  #most-wanted-list::-webkit-scrollbar {
    height: 6px;
  }

  #most-wanted-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
  }

  #influencers-mobile-list {
    display: flex;
    gap: 12px;
    padding-bottom: 6px;
  }

  #influencers-mobile-list > .influ-card {
    min-width: calc(50% - 6px);
    flex-shrink: 0;
  }

  #influencers-mobile::-webkit-scrollbar,
  #influencers-mobile-list::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 767px) {
  /* Carrossel de categorias mobile */
  #mobileCarousel,
  #mobileCarousel .grid {
    touch-action: pan-y pan-x; /* permite ambos; o browser não vai travar o vertical */
  }

  /* Lista de influencers mobile */
  #influencers-mobile,
  #influencers-mobile-list {
    touch-action: pan-y pan-x; /* permite rolar para baixo mesmo começando sobre o carrossel */
  }

  /* Se houver elementos clicáveis grandes dentro dos carrosséis (cards/links), evite que “tap” consuma o gesto */
  #mobileCarousel a,
  #influencers-mobile-list a,
  #influencers-mobile-list .influ-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* taps ok, não bloqueia pan */
  }
}

#categoriesCarousel {
  transition: transform 0.5s ease-in-out;
}

#categoriesPrevBtn,
#categoriesNextBtn {
  cursor: pointer;
}

#categoriesCarousel::-webkit-scrollbar {
  display: none;
}

#mobileCarousel::-webkit-scrollbar {
  display: none;
} 

button-animate {
  position: relative;
  padding: 12px 35px;
  background: #4c83fa;
  font-size: 17px;
  font-weight: 1000;
  color: #ffffff;
  border: 3px solid #4c83fa;
  border-radius: 8px;
  box-shadow: 0 0 0 #ffffff;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.star-1 {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 1scubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
  position: absolute;
  top: 25%;
  left: 45%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0 #4c83fa);
  z-index: -5;
  transition: all 0.8s ease;
}

button-animate:hover {
  background: transparent;
  color: #4c83fa;
  box-shadow: 0 0 0px #4c83fa;
}

button-animate:hover .star-1 {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 25px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

button-animate:hover .star-2 {
  position: absolute;
  top: -0%;
  left: 10%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

button-animate:hover .star-3 {
  position: absolute;
  top: 55%;
  left: 25%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

button-animate:hover .star-4 {
  position: absolute;
  top: 30%;
  left: 80%;
  width: 8px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

button-animate:hover .star-5 {
  position: absolute;
  top: 25%;
  left: 115%;
  width: 15px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

button-animate:hover .star-6 {
  position: absolute;
  top: 5%;
  left: 60%;
  width: 5px;
  height: auto;
  filter: drop-shadow(0 0 0px #4c83fa);
  z-index: 2;
}

.fil0 {
  fill: #4c83fa;
}

#influencers-list > * {
  min-width: 283px;
  height: auto;
}

#influencers-mobile {
  -webkit-overflow-scrolling: touch;
}

#influencers-mobile::-webkit-scrollbar {
  display: none;
}

#mobile-scrollbar-thumb {
  transition: width 0.3s ease, transform 0.2s ease;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
}

.overflow-hidden {
  position: relative;
}

.overflow-hidden::before,
.overflow-hidden::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overflow-hidden::before {
  left: 0;
  background: linear-gradient(to right, rgb(var(--background)), transparent);
}

.overflow-hidden::after {
  right: 0;
  background: linear-gradient(to left, rgb(var(--background)), transparent);
}

.overflow-hidden.show-fade-left::before,
.overflow-hidden.show-fade-right::after {
  opacity: 1;
}