@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);
    }
}

@layer base {
}

#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%;
    }
}

#category-section,
#category #products-list {
    scroll-margin-top: 100px;
    transition:
        opacity 0.5s ease-out,
        transform 0.5s ease-out;
    opacity: 0;
    transform: translateY(20px);
}

#category-section.visible,
#category #products-list.visible {
    opacity: 1;
    transform: translateY(0);
}

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

    to {
        left: 100%;
    }
}

/*—————————————————————————————————————————————————————————————————————————————————————— 
                      Código CSS feito por Mendes (mendesfofin)
                                Use no template Delux
——————————————————————————————————————————————————————————————————————————————————————*/

/* ——————————————————————————————————————————————————————————————————————————————————————
    Adiciona uma imagem de fundo no site.
   —————————————————————————————————————————————————————————————————————————————————————— */
/* ——————————————————————————————————————————————————————————————————————————————————————
    Muda a cor do footer.
   —————————————————————————————————————————————————————————————————————————————————————— */

footer.border-t.w-screen.py-10.mt-20 {
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
  background: rgb(0, 0, 0);
background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%);
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Cria a Scroll Bar mais bonita.
   —————————————————————————————————————————————————————————————————————————————————————— */

/* mexe apenas no scroll fixo*/
::-webkit-scrollbar-track {
    border-radius: 10px; /* arredondar a borda do scroll fixo (Não e necessario)*/
    background:  #000000;
/* Adiciona uma pequena sombra na lateral do scroll fixo*/
    -webkit-box-shadow: -8px 0px 18px 0px rgba(0,0,0,0.52);
    -moz-box-shadow: -8px 0px 18px 0px rgba(0,0,0,0.52);
    box-shadow: -8px 0px 18px 0px rgba(0,0,0,0.52);
}

/* mexe apenas no scroll que se move*/
::-webkit-scrollbar-thumb {

    border-radius: 999px;
/* para trocar a cor basta clicar no quadradinho e escolher sua cor*/
    background: rgb(0, 36, 26);
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgb(255, 1, 1) 75%);

}

/* aumenta a largura e altura do scrollbar em geral*/
::-webkit-scrollbar {
    width: 10px; 
    height: 10px; 
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Arruma o bug da Scroll Bar para mobiles.
   —————————————————————————————————————————————————————————————————————————————————————— */

div.bg-primary\/35.w-\[30rem\].aspect-square.absolute.top-12.rounded-full.blur-\[120px\].-right-52 {
  display: none;
}

div.bg-primary\/35.w-96.aspect-square.absolute.top-72.rounded-full.blur-\[120px\].-left-52 {
    display: none;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Remove categorias populares e apresentação.
   —————————————————————————————————————————————————————————————————————————————————————— */

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

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

/* ——————————————————————————————————————————————————————————————————————————————————————
    Edita a cor da barra de promoções, tanto container como texto.
   —————————————————————————————————————————————————————————————————————————————————————— */

div > a.bg-primary {
  background-color: #ed0000 !important;
}

a.w-screen.bg-primary {
  color: #000000; /* Muda a cor do texto de todos os elementos filhos */
}

/* Opcionalmente, se quiser mudar apenas partes específicas: */
a.w-screen.bg-primary p {
  color: #000000; /* Muda a cor do texto apenas do <p> */
}

a.w-screen.bg-primary span {
  color: #000000; /* Muda a cor do texto apenas do <span> */
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Muda a cor dos botões brancos para preto.
   —————————————————————————————————————————————————————————————————————————————————————— */

button.text-primary-foreground {
  color: black !important;
}

.group-hover\:inline-block {
  color: black !important;
}

/* Oculta o elemento com a classe específica */
div.rounded-md.flex.items-center.justify-center.gap-2.bg-primary\/20 {
  display: none !important;
}

.inline-flex.items-center.border.px-2\.5.py-0\.5.text-xs.font-medium.bg-primary.text-primary-foreground.rounded-\[4px\] {
  display: none !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Aumenta o tamanho da logo.
   —————————————————————————————————————————————————————————————————————————————————————— */

#delux header nav a img {
    width:  90px !important;
    height: auto !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Remove espaçamento invisivel acima dos produtos onde seria a apresentação.
   —————————————————————————————————————————————————————————————————————————————————————— */

/* Sobrescrever o espaçamento vertical entre seções */
.space-y-12 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduzir ou remover o padding do contêiner principal */
.py-12 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduzir o padding nos contêineres das seções */
.container.max-w-screen-2xl.py-24 {
  padding-top: 1rem !important; /* Ajuste para um valor menor ou 0 */
  padding-bottom: 1rem !important;
}

/* Garantir que as seções não tenham margens ou paddings extras */
section {
  margin: 0 !important;
  padding: 0 !important;
}

/* Opcional: Ajustar o espaçamento interno de elementos filhos, se necessário */
section > div {
  margin-top: 0 !important;
  margin-bottom: 0 !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 {
  height: 165.19px !important;
}


/* ——————————————————————————————————————————————————————————————————————————————————————
    Cursor do mouse.
   —————————————————————————————————————————————————————————————————————————————————————— */

body {
  cursor: url('https://i.imgur.com/7SvJNAb.png'), auto !important;
}

body * {
  cursor: url('https://i.imgur.com/7SvJNAb.png'), auto !important;
}

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

/* ——————————————————————————————————————————————————————————————————————————————————————
    Redes Sociais escondidas para mobile na lateral direita.
   —————————————————————————————————————————————————————————————————————————————————————— */

/* Estilos padrão (visível no desktop) */
a.p-3.flex.items-center.justify-center {
    display: flex;
}

/* Esconder em telas móveis (geralmente 768px ou menos) */
@media (max-width: 768px) {
    a.p-3.flex.items-center.justify-center {
        display: none;
    }
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Botão de ver Avaliações.
   —————————————————————————————————————————————————————————————————————————————————————— */

.desktop-only {
  display: none; /* Oculta por padrão */
}

@media (min-width: 768px) {
  .desktop-only {
    display: inline-flex; /* Exibe apenas em telas ≥ 768px */
  }
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Efeitos nos botões.
   —————————————————————————————————————————————————————————————————————————————————————— */

/* Botão de compra estilizado, agora com equilíbrio visual */
button.bg-primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 44px !important;
  font-size: 0.95rem !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background-color: #ed0000 !important; /* Vermelho forte */
  color: white !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100% !important;
}

/* Ícone proporcional */
button.bg-primary svg {
  width: 18px !important;
  height: 18px !important;
}

/* Efeito de brilho */
button.bg-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -30%;
  width: 80px;
  height: 200%;
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(25deg);
  animation: shine 2.5s infinite;
  filter: blur(6px);
  z-index: 2;
}

@keyframes shine {
  0% { left: -60%; }
  50% { left: 110%; }
  100% { left: 110%; }
}

/* Hover suave */
button.bg-primary:hover {
  transform: scale(1.015);
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
}



/* ——————————————————————————————————————————————————————————————————————————————————————
    Reoganizações das categorias, criando o botão, borda e removendo a categoria de baixo.
   —————————————————————————————————————————————————————————————————————————————————————— */

h4.mb-3.text-2xl.font-semibold:where(:not(:has(*)))::before {
  content: attr(data-content);
  display: none;
}

h4.mb-3.text-2xl.font-semibold {
  display: none;
}

h4.mb-8 span.bg-primary\/20.border-2.border-primary.px-4.py-3.rounded-md.text-\[1\.1rem\].font-semibold {
    display: none;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Compacta os botões de comprar na tela inicial.
   —————————————————————————————————————————————————————————————————————————————————————— */

button:has(svg.lucide-shopping-basket) {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  gap: 4px !important;
  width: auto !important;
}

button:has(svg.lucide-shopping-basket) svg {
  width: 16px !important;
  height: 16px !important;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Remove a opção categorias dos links footer.
   —————————————————————————————————————————————————————————————————————————————————————— */

a.text-muted-foreground[href="/categories"] {
  display: none;
}

/* ——————————————————————————————————————————————————————————————————————————————————————
    Concerta a proporção das imagens 1920x1080 no site.
   —————————————————————————————————————————————————————————————————————————————————————— */

/* Contêiner principal do carrossel */
div[role="region"][aria-roledescription="carousel"] {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important; /* Ajustado para 1920x1080 (16:9) */
  overflow: hidden !important;
  position: relative !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* Contêiner interno do carrossel */
div[role="region"][aria-roledescription="carousel"] > div.overflow-hidden {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Contêiner dos slides (flex) */
div[role="region"][aria-roledescription="carousel"] div.flex {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  margin: 0 !important;
  border-radius: 8px !important;
}

/* Contêiner do slide */
div[role="group"][aria-roledescription="slide"] {
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 100% !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: transform 0.3s ease-in-out !important;
  border-radius: 8px !important;
  background-color: transparent !important; /* Para depuração */
}

/* Ajuste da imagem */
div[role="group"][aria-roledescription="slide"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Preenche sem barras, corta se necessário */
  object-position: center !important;
  display: block !important;
  border-radius: 8px !important; /* Cantos arredondados */
  aspect-ratio: 16 / 9 !important; /* Ajustado para 1920x1080 */
  box-sizing: border-box !important;
}

#mginex-dialog {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    z-index: 1000;
    transition: all 0.4s ease-in-out;
}

#mginex-dialog > div {
    padding: 24px;
    background: linear-gradient(135deg, #ff0066, #ff6b00);
    border-radius: var(--radius, 12px);
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: pulse 2.5s infinite ease-in-out;
}

#mginex-dialog > div header {
    margin-bottom: 20px;
}

#mginex-dialog > div header h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#mginex-dialog > div header p {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
}

#mginex-dialog #timer {
    font-family: 'Roboto Mono', monospace;
    font-size: 2.2rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px 20px;
    border-radius: var(--radius, 10px);
    display: inline-block;
    margin: 15px 0 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#mginex-dialog #timer-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    margin: 8px 0 20px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#mginex-dialog .promo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(90deg, #ffe600, #ff9500);
    color: #1a1a1a;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: var(--radius, 30px);
    transition: all 0.3s ease;
    margin-top: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

#mginex-dialog .promo-button:hover {
    background: linear-gradient(90deg, #ff9500, #ffe600);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

#mginex-dialog .promo-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

#mginex-dialog .promo-button:hover::after {
    width: 300px;
    height: 300px;
}

#mginex-dialog.minimized {
    width: auto;
    height: auto;
    top: 15px;
    right: 15px;
    left: auto;
    background: transparent;
    backdrop-filter: none;
    align-items: flex-start;
    justify-content: flex-end;
    transition: all 0.4s ease-in-out;
}

#mginex-dialog.minimized > div {
    max-width: 160px;
    padding: 14px;
    animation: none;
    border-radius: var(--radius, 10px);
    background: linear-gradient(135deg, #ff0066, #ff6b00);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

#mginex-dialog.minimized > div header {
    display: none;
}

#mginex-dialog.minimized #timer {
    font-size: 1.2rem;
    padding: 8px 12px;
    margin: 0 0 6px;
    border-radius: var(--radius, 8px);
    background: rgba(0, 0, 0, 0.5);
}

#mginex-dialog.minimized #timer-text {
    font-size: 0.8rem;
    margin: 6px 0 0;
    line-height: 1.2;
    text-shadow: none;
}

#mginex-dialog.minimized .promo-button {
    display: none;
}

#mginex-dialog.minimized .close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px; /* Tamanho reduzido */
    height: 18px; /* Tamanho reduzido */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, background 0.3s ease;
}

#mginex-dialog.minimized .close-button:hover {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.1);
}

#mginex-dialog.minimized .close-button::before,
#mginex-dialog.minimized .close-button::after {
    content: '';
    position: absolute;
    width: 10px; /* Ajustado para o tamanho menor */
    height: 1.5px; /* Ajustado para o tamanho menor */
    background: white;
    transform: translate(-50%, -50%) rotate(45deg);
    left: 50%;
    top: 50%;
}

#mginex-dialog.minimized .close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 768px) {
    #mginex-dialog > div {
        padding: 16px;
        max-width: 95vw;
    }
    #mginex-dialog > div header h4 {
        font-size: 1.3rem;
    }
    #mginex-dialog > div header p {
        font-size: 0.95rem;
    }
    #mginex-dialog #timer {
        font-size: 1.8rem;
        padding: 10px 16px;
    }
    #mginex-dialog #timer-text {
        font-size: 0.9rem;
    }
    #mginex-dialog .promo-button {
        padding: 12px 20px;
        font-size: 1rem;
    }
    #mginex-dialog.minimized > div {
        max-width: 130px;
        padding: 12px;
    }
    #mginex-dialog.minimized #timer {
        font-size: 1rem;
        padding: 6px 10px;
    }
    #mginex-dialog.minimized #timer-text {
        font-size: 0.7rem;
    }
    #mginex-dialog.minimized .close-button {
        top: 5px;
        right: 5px;
        width: 16px; /* Tamanho ainda menor para dispositivos móveis */
        height: 16px; /* Tamanho ainda menor para dispositivos móveis */
        background: rgba(0, 0, 0, 0.4);
    }
    #mginex-dialog.minimized .close-button::before,
    #mginex-dialog.minimized .close-button::after {
        width: 8px; /* Ajustado para dispositivos móveis */
        height: 1.2px; /* Ajustado para dispositivos móveis */
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }
}

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

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

/* Remove cards das categorias "Assinaturas Mensais" e "Assinaturas Anuais" */
a[href="/categories/assinaturas-mensais"],
a[href="/categories/assinaturas-anuais"] {
  display: none !important;
}

span.bg-primary\/20.border-2.border-primary.px-4.py-3.rounded-md.text-sm,
span.bg-primary\/20.border-2.border-primary.px-4.py-3.rounded-md.text-\[1\.1rem\] {
  display: none !important;
}

/* Remove o título "Assinaturas Mensais" */
#category-section > div.container > h4 {
  display: none !important;
}

/* Remove qualquer espaçamento vindo da section */
#category-section {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Remove padding/margin extra do container interno */
#category-section > div.container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Garante que o grid comece colado ao topo */
#products-list {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/*
  O seletor ".hero-compacta .container" é mais específico
  e irá sobrescrever a classe "py-24" do Tailwind.
*/
.hero-compacta .container {
  padding-top: 3rem;    /* Equivalente a py-12 no Tailwind */
  padding-bottom: 3rem; /* Equivalente a py-12 no Tailwind */
}

/*
  A classe py-24 do Tailwind aplica o seguinte estilo:
  padding-top: 6rem; (96px)
  padding-bottom: 6rem; (96px)

  Nosso CSS acima está mudando esse valor para 3rem (48px).
  Você pode ajustar "3rem" para qualquer valor que desejar.
*/