/* Icones laterais direitos redes sociais */
#delux > div.fixed.top-1\/2.-translate-y-1\/2.right-0.rounded-l-md.bg-white\/\[0\.03\].z-10 {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove textão no footer */
#delux > footer > div > div.grid.gap-8.md\:grid-cols-\[2fr_3fr\] > div > div.space-y-3 > div > p,
#delux > main > div > div.space-y-0\.5,
#delux > footer > div > div.grid.gap-8.md\:grid-cols-\[2fr_3fr\] > div > div.space-y-3 > img {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove Section das categorias */

#delux > div.space-y-12.py-12 > section:nth-child(3) {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Cursor personalizado para todo o site */
body, body * {
  cursor: url('https://i.imgur.com/7SvJNAb.png'), auto !important;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 0;
}

/* Fundo com opacidade, sem interferir no conteúdo */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://i.imgur.com/JIimxvA.png') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.2; /* Opacidade ajustável */
  z-index: -1;
  pointer-events: none; /* Permite clique no conteúdo acima */
}

/* canvas não deve sobrepor o fundo */
canvas {
  display: block;
  position: relative;
  z-index: 0;
}





/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Estilo base das partículas */
.particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background-color: rgb(var(--primary)); /* roxo estilo 'blueviolet' */
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: fadeOut 0.5s linear forwards;
}

/* Partículas maiores no clique */
.particle.click {
  width: 8px;
  height: 8px;
  animation: explode 0.6s ease-out forwards;
}

/* Animações */
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.5);
  }
}

@keyframes explode {
  to {
    opacity: 0;
    transform: translateY(-20px) scale(1.5);
  }
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Estilo padrão (desktop) */
#delux > div.space-y-12.py-12 > section:nth-child(1) > .container {
  display: flex;
  flex-direction: column;
  align-items: flex-center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* Centraliza botões no desktop */
#delux > div.space-y-12.py-12 > section:nth-child(1) > .container .flex {
  display: flex;
  justify-content: flex-center;
  gap: 15px;
  flex-wrap: wrap;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

@media (min-width: 1024px) {
  .promo-carousel {
    position: relative;
    max-width: 600px;
    max-height: 300px;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1;
  }

  .promo-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;
  }

  .promo-slider a {
    min-width: 100%;
    flex-shrink: 0;
  }

  .promo-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
  }

  .promo-carousel .progress-bar,
  .promo-carousel .carousel-arrow,
  .promo-carousel .carousel-indicators {
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }

  .promo-carousel:hover .progress-bar,
  .promo-carousel:hover .carousel-arrow,
  .promo-carousel:hover .carousel-indicators {
    opacity: 1;
    pointer-events: auto;
  }

  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background-color: rgb(var(--primary));
    z-index: 2;
    transition: width 0.05s linear;
  }

  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #0000005b;
    border-radius: 10px;
    color: white;
    font-size: 32px;
    font-weight: bold;
    padding: 0 10px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
  }

  .carousel-arrow.left {
    left: 10px;
  }

  .carousel-arrow.right {
    right: 10px;
  }

  .carousel-indicators {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 2;
  }

  .carousel-indicators .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: background-color 0.3s;
  }

  .carousel-indicators .dot.active {
    background-color: rgba(255, 255, 255, 1);
  }

  .container.max-w-screen-2xl.py-24 {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 24px 60px !important;
  }

  .container.max-w-screen-2xl.py-24 > div:first-child {
    flex: 1;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .container.max-w-screen-2xl.py-24 > div:first-child .flex {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  .promo-carousel {
    display: none;
  }
}


/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Estilo para dispositivos móveis */
@media (max-width: 768px) {
  #delux > div.space-y-12.py-12 > section:nth-child(1) > .container {
    align-items: center;       /* Centraliza */
    text-align: center;        /* Texto centralizado */
    padding: 16px;
  }

  #delux > div.space-y-12.py-12 > section:nth-child(1) > .container h1 {
    font-size: 3rem;
  }

  #delux > div.space-y-12.py-12 > section:nth-child(1) > .container p {
    font-size: 1rem;
  }

  #delux > div.space-y-12.py-12 > section:nth-child(1) > .container .flex {
    justify-content: center;  /* Centraliza botões no mobile */
    gap: 10px;
  }

  #delux > div.space-y-12.py-12 > section:nth-child(1) > .container .flex button {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Oculta a seção extra */
#delux > div.space-y-12.py-12 > section > div > div.flex.items-center.justify-between.gap-3.mt-4 {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Centraliza textos na apresentação do produto */

#delux > div.space-y-12.py-12 > section > div > div > a > div.p-3.border-t-2.flex.flex-col.h-full > h4 {
  text-align: center;
}

#delux > div.space-y-12.py-12 > section > div > div > a > div.p-3.border-t-2.flex.flex-col.h-full > div {
  align-items: center;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove tudo relacionado a "Entrega automática" */

#delux > div.space-y-12.py-12 > section > div > div > a > div.relative > div > span,
#delux > div.space-y-12.py-12 > section > div > div > a > div.relative > div,
#delux > div:nth-child(7) > div > div.grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.\32 xl\:grid-cols-5.gap-4 > a > div.relative > div > span,
#delux > div:nth-child(7) > div > div.grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.\32 xl\:grid-cols-5.gap-4 > a > div.relative > div {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove os efeitos de fundo nativo */

#delux > div.absolute.inset-0.-z-10 > div.size-\[45rem\].rounded-full.bg-gradient-to-bl.from-primary\/30.blur-3xl.absolute.-top-1\/3.-right-1\/2.sm\:right-20,
#delux > div.absolute.inset-0.-z-10 > div.opacity-15.h-full.w-full.bg-\[linear-gradient\(to_right\,rgb\(var\(--primary\)\)_1px\,transparent_1px\)\,linear-gradient\(to_bottom\,rgb\(var\(--primary\)\)_1px\,transparent_1px\)\].bg-\[size\:4rem_4rem\].\[mask-image\:radial-gradient\(ellipse_40\%_55\%_at_50\%_0\%\,\#000_30\%\,transparent_110\%\)\] {
  display: none;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Troca a cor forte dos termos de preto para branco */

#delux > section > div > div.space-y-2 > span > ol > li > p > strong,
#delux > section > div > div.space-y-2 > span > ul > li > p > strong {
  color: rgb(var(--primary)) !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove zoom das imagens */

#delux > div.space-y-12.py-12 > section > div > div > a > div.relative > img {
  object-fit: contain !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
}

/* Remove o zoom das imagens do carrossel */
img.object-cover.aspect-\[16\/10\] {
  object-fit: contain !important;
  aspect-ratio: unset !important;
  height: auto !important;
  width: 100% !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Remove texto abaixo do QR code */

#delux > section > div > p {
  display: none !important;
}

/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

/* Deixar todos produtos do mesmo tamanho */

#delux > div.space-y-12.py-12 > section > div > div > div > a > div.p-3.border-t-2.flex.flex-col.h-full,
#delux > div:nth-child(7) > div > div.grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-4.\32 xl\:grid-cols-5.gap-4 > div > a > div.p-3.border-t-2.flex.flex-col.h-full {
  height: 165.19px !important;
}