/* Remove after removing Twind */

html {
  scroll-behavior: smooth;
}

body {
  padding-top: 137px;
  letter-spacing: 1px;
}


.hiddenScroll{
  html {
    position: static;
    overflow-y: hidden;
    height: 100%;
    max-height: 100%;
  }
  
  body {
    overflow: hidden;
    height: 100%;
    max-height: 100%;
  }
}
@media screen and (min-width: 1084px) {
  body {
    padding-top: 150px;
  }
}

.js-folded-header {
  padding-top: 110px;
}

/* .folded-header .rewards-bar */
/* .folded-header .nav-menu */

/* como é a maneira certa de fazer isso no react? Podemos add um ID no elemento mas seria melhor passar uma ref deles pra dentro do useScroll? */
/* fazer um signal de ref, passando de dentro de /sections/header pra global store e chamando elas dentro de /lib/useScroll, e invocando o hook dentro de algum island geral? */

/* usar data-attribute + seletor twind */

/* @supports */

/* remove markers by default */
details>summary {
  display: flex;
  list-style: none;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between;
}

details>summary::-webkit-details-marker {
  display: none;
}

details>summary::after {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  content: "+";
  line-height: 1;
  font-weight: 400;
  font-size: 1.2rem;
}

details[open]>summary::after {
  content: "−";
  font-size: 0.8rem;
}

details[open]>summary#summary-change-background {
  background-color: #f8f8f8;
}

#filter__container::-webkit-scrollbar {
  background-color: #fff;
  border-radius: 100px;
  height: 4px;
  width: 8px;
}

#filter__container::-webkit-scrollbar-thumb {
  background-color: #e2e2e2;
  border-radius: 100px;
  width: 1px;
  height: 7px;
  border: none;
}

#icon-filters-bottom:last-child #icon-filters-tooltip::before {
  right: 36px;
}

#icon-filters-svg:hover {
  fill: #000;
}

.mobile-slider {
  scroll-behavior: smooth;
  scroll-snap-type: x;
}

.mobile-slider::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mobile-slider::-webkit-scrollbar {
  display: none;
}


.invisible-scrollbar {
  ::-webkit-scrollbar {
    width: 12px;
    /* Largura da barra de rolagem (ajuste conforme necessário) */
  }

  /* Estilos para o polegar (thumb) da barra de rolagem */
  ::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* Cor do polegar transparente */
  }

  /* Estilos para a trilha (track) da barra de rolagem */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    /* Cor da trilha transparente */
  }
}

/* TODO Remove after tailwind migration */

.membership-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #208778;
  transition: width 0.3s ease;
  width: 0%;
  left: 50%;
  transform: translateX(-50%);
}

/* TODO Remove after tailwind migration */
.membership-item:hover::after,
.membership-item--active::after {
  width: 100%;
}

/* TODO Remove after tailwind migration */
.membership-free-gifts {
  @media (min-width: 1024px) and (max-width: 1385px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2.5rem 0;
    grid-template-rows: 1fr 1fr;
  }
}

@keyframes slide-left-frame {
  0% {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slide-right-frame {
  0% {
    transform: translateX(-100%)
  }

  to {
    transform: translateX(0)
  }
}

@keyframes slide-bottom-frame {
  0% {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

.animate-slide-left {
  animation: slide-left-frame 0.4s ease normal;
}

.animate-slide-right {
  animation: slide-right-frame 0.4s ease normal;
}

.animate-slide-bottom {
  animation: slide-bottom-frame 0.4s ease normal;
}

/* TODO Remove after tailwind migration */

.header-menu-isnew-dk::before {
  content: "Novo";
  position: absolute;
  top: -1px;
  left: 100%;
  color: #FC4F63;
  font-size: 10px;
  letter-spacing: 0.32px;

}

.header-menu-isnew-mo::before {
  content: "Novo";
  position: absolute;
  top: -5px;
  left: 100%;
  color: #FC4F63;
  font-size: 10px;
  letter-spacing: 0.32px;

}

#lengthLength{
  offset-path: path(
    "m258.79 45.19-2.07 9.47-2-.45.88-4c-17.46-4.1-42.85-3.62-69.7-3.11-9 .17-18.39.35-27.59.35-13.88 0-32.21-9.17-35.65-11l-1.87 3.6-1.79-.95 4.48-8.6 1.76.94-1.68 3.24c3.32 1.7 21.49 10.73 34.73 10.73 9.18 0 18.52-.18 27.55-.35 27-.51 52.47-1 70.17 3.15l.76-3.47Z"
  );
  animation:  followpath  6s infinite linear ;
  animation-direction: normal;
}
#lengthChest{
  offset-path: path(
    "M127.61 167.07a2.11 2.11 0 0 1-.74-.14c-2-.82-2.63-5.06-2.77-6.33a1 1 0 0 1 2-.25c.26 2.43 1 4.55 1.53 4.69a.83.83 0 0 0 .3-.18c3.41-3.9 18.19-88.61 16.61-95.39-.33-1.41-.7-1.61-.7-1.61-.52 0-2.08 2-3.22 4.4a1 1 0 0 1-1.81-.84c.81-1.75 2.92-5.8 5.25-5.55 1.74.18 2.26 2.42 2.43 3.15 1 4.2-3.67 33.42-6.57 50-1.84 10.55-8.06 45.13-10.71 47.34a2.43 2.43 0 0 1-1.6.71Z"
  );
  animation:  followpath  6s infinite linear ;
  animation-direction: normal;
}

#lengthNeck{
  offset-path: path(
    "M55.58 95.94a1.18 1.18 0 0 1-.66-.16 2.15 2.15 0 0 1-1.19-1.7c-.26-2.41 3.54-5.82 4.71-6.81a1 1 0 0 1 1.41.14 1 1 0 0 1-.12 1.38c-2 1.71-4.11 4.16-4 5.08a.12.12 0 0 0 .05.1c5.36 0 58.22-33.31 59.54-37.56a.24.24 0 0 0 0-.12c-.4-.37-3 .27-5.46 1.56a1 1 0 0 1-.93-1.77c1.25-.65 5.47-2.68 7.41-1.5a2.11 2.11 0 0 1 1 1.92c0 4.5-35.85 26.13-37.34 27.05-18.15 10.88-22.92 12.39-24.42 12.39Z"
  );
  animation:  followpath  6s infinite linear ;
  animation-direction: normal;
}

@keyframes followpath {
  to {
    offset-distance: 100%;
  }
}

.wishlist-paginagion::after {
  content: '""';
  position: "absolute";
  top: "35%";
  transform: "rotate(-45deg)";
  transform-origin: "center center";
  height: "9px";
  width: "9px";
  right: "15px";
  border-radius: "2px";
  border-color: "#a6a8ab";
  border-style: "none none solid solid";
  border-width: "2px";
  pointer-events: "none";
}


/* Pré Black Friday styles */

/* Blackfriday - Single Banner With Gray Scale */

/* TODO Remove after tailwind migration */

.banner-section-grayScale>img,
.banner-section-grayScale>video {
  filter: grayscale(100%);
  transition: filter 0.3s;
  min-height: 255px;
}

.banner-section-grayScale:hover>img,
.banner-section-grayScale:hover>video {
  filter: grayscale(0%);
}

.image-container {
  transition: background-image;
}


@media (max-width:768px) {

  /* Mobile */
  .image-container {
    background-image: url('https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/230/12f5cdcc-989f-42a4-af69-43542969702b');
  }
}

@media (min-width:768px) {

  /* Desktop */
  .image-container:not(:hover) {
    background-image: url('https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/230/d1be8bc7-56e3-4846-8498-6656f897e376');
  }

  .image-container:hover {
    background-image: url('https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/230/56a091e7-9eb7-442a-b293-86910cb09f18');
  }


}


@keyframes outer-live {
  0% {
    transform: scale(1);
  }

  20%,
  40% {
    transform: scale(1.1);
  }

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

@keyframes inner-live {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  20%,
  40% {
    transform: translate(-50%, -50%) scale(1.4);
  }

  60%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

#bf-live-icon {
  height: 38px;
  position: relative;
  width: 38px;
}

#bf-live-icon::before {
  animation: outer-live ease 3s infinite;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  content: "";
  height: 100%;
  width: 100%;
  transform-origin: 50%;
}

#bf-live-icon::after {
  animation: inner-live ease 3s infinite;
  background-color: #F8F5F1;
  border-radius: 50%;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  height: 17px;
  position: absolute;
  width: 17px;
  z-index: 1;
  transform-origin: 50%;
}

.blur-container {
  filter: blur(10px);
}

/* Blackfriday - Single Banner With Gray Scale */
.grayScaleBF {
  filter: grayscale(1)
}

.grayScaleBF::hover {
  filter: grayscale(0)
}