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

/* navbar */

  .custom-navbar {
      background-color: #14141c;
    padding-top: 2.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
    padding-bottom: 2.5rem; /* Ajuste este valor para aumentar ou diminuir a espessura */
  }

   /* Estilos personalizados para a notificação */
        body {
            font-family: 'Inter', sans-serif;
        }

        #sales-notification {
            /* Posicionamento e transições */
            position: fixed;
            bottom: 2rem;
            left: 2rem;
            z-index: 1000;
            opacity: 0;
            transform: translateY(20px);
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
            /* Garante que a barra de tempo não saia das bordas arredondadas */
            overflow: hidden;
        }

        #sales-notification.show {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        /* Animação da barra de tempo */
        @keyframes countdown {
            from { width: 100%; }
            to { width: 0%; }
        }
        
        /* Aplica a animação na barra de tempo quando a notificação está visível */
        #sales-notification.show #timer-bar {
            animation: countdown 5s linear forwards;
        }

        /* Estilo para o texto (ainda menor) */
        #notification-text {
            font-size: 0.65rem; /* ~10.5px */
            line-height: 0.9rem; /* Ajuste de altura da linha */
        }
        
        /* Ícone de presente em SVG (micro) */
        .gift-icon {
            width: 1rem; /* 12px */
            height: 1rem; /* 12px */
            color: white;
        }

    

        /* --- Estilos do Botão WhatsApp --- */
        #whatsapp-button {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* --- Estilos do Modal WhatsApp --- */
        #whatsapp-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 1010;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s;
        }

        #whatsapp-modal-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        #whatsapp-modal-content {
            position: relative; /* Necessário para posicionar o botão de fechar */
            background-color: white;
            padding: 2rem;
            border-radius: 0.75rem;
            width: 90%;
            max-width: 400px;
            text-align: center;
            transform: scale(0.95);
            transition: transform 0.3s ease;
        }
        #whatsapp-modal-overlay.show #whatsapp-modal-content {
             transform: scale(1);
        }




  /* --- Animações --- */
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes progress {
            from { width: 0%; }
            to { width: 100%; }
        }

        /* --- Estilo Principal do Componente --- */
        .banner-container {
            font-family: 'Inter', sans-serif;
            background-size: auto, cover;
            padding: 2rem 0; /* Adiciona espaçamento vertical */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .banner-card {
            width: 100%;
            max-width: 92rem; /* 1440px - Aumentado para ocupar mais espaço lateral */
            position: relative;
            /* Efeito "Glassmorphism" com tom neutro */

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: 1.5rem; /* 24px */
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 2.5rem; /* 40px */
            overflow: hidden; /* Garante que a barra de progresso não saia das bordas */
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
        }

        /* --- Estrutura do Slider --- */
        .slider-wrapper {
            display: grid;
        }
        
        .banner-slide {
            grid-area: 1 / 1 / 2 / 2; /* Coloca todos os slides na mesma célula do grid */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
        }

        .banner-slide.active {
            opacity: 1;
            visibility: visible;
        }

        /* Animações de entrada para os elementos do slide ativo */
        .banner-slide.active .slide-text {
            animation: slideInLeft 0.8s ease-out forwards;
        }
        .banner-slide.active .slide-image-wrapper {
            animation: slideInRight 0.8s ease-out forwards;
        }

        .promo-image {
             border-radius: 1rem; /* 16px */
             box-shadow: 0 10px 30px rgba(0,0,0,0.4);
             transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1.05);
             transition: transform 0.4s ease;
        }
        .promo-image:hover {
            transform: perspective(1000px) rotateY(0) rotateX(0) scale(1);
        }

        .btn-catalog {
            background: linear-gradient(90deg, #3b82f6, #1d4ed8); /* Gradiente azul */
            transition: all 0.3s ease;
        }
        .btn-catalog:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); /* Sombra azul */
        }
        
        /* Barra de Progresso */
        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: rgba(255,255,255,0.2);
            width: 100%;
        }
        .progress-bar-inner {
            height: 100%;
            background: linear-gradient(90deg, #60a5fa, #2563eb); /* Gradiente azul */
            border-radius: 0 2px 2px 0;
            animation: progress 5s linear forwards;
        }


/* perguntas frequentes */


  /* Estilo para a transição suave do ícone do acordeão */
        .faq-question svg {
            transition: transform 0.3s ease-in-out;
        }
        .faq-question.open svg {
            transform: rotate(180deg);
        }
        /* Estilo para a transição suave da imagem */
        #faq-image {
            transition: opacity 0.3s ease-in-out;
        }












/* ============ BY XANDYNN */

.sc-6cca1807-22.gyzsUV::after {
    content: "";
    display: inline-block;
    margin-left: 4px;
    margin-top: -2px;
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48"><path fill="%234db6ac" d="M11.9,12h-0.68l8.04-8.04c2.62-2.61,6.86-2.61,9.48,0L36.78,12H36.1c-1.6,0-3.11,0.62-4.24,1.76    l-6.8,6.77c-0.59,0.59-1.53,0.59-2.12,0l-6.8-6.77C15.01,12.62,13.5,12,11.9,12z"></path><path fill="%234db6ac" d="M36.1,36h0.68l-8.04,8.04c-2.62,2.61-6.86,2.61-9.48,0L11.22,36h0.68c1.6,0,3.11-0.62,4.24-1.76    l6.8-6.77c-0.59-0.59-1.53-0.59,2.12,0l6.8,6.77C32.99,35.38,34.5,36,36.1,36z"></path><path fill="%234db6ac" d="M44.04,28.74L38.78,34H36.1c-1.07,0-2.07-0.42-2.83-1.17l-6.8-6.78c-1.36-1.36-3.58-1.36-4.94,0    l-6.8,6.78C13.97,33.58,12.97,34,11.9,34H9.22l-5.26-5.26c-2.61-2.62-2.61-6.86,0-9.48L9.22,14h2.68c1.07,0,2.07,0.42,2.83,1.17    l6.8,6.78c0.68,0.68,1.58,1.02,2.47,1.02s1.79-0.34,2.47-1.02l6.8-6.78C34.03,14.42,35.03,14,36.1,14h2.68l5.26,5.26    C46.65,21.88,46.65,26.12,44.04,28.74z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}


/* Estilos para o personagem de suporte */
#personagem-suporte {
    animation: float 3s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.25));
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important;
    position: fixed !important;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }
}

#personagem-suporte:hover {
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    transform: scale(1.05) translateY(-5px);
}

/* Para dispositivos mobile ajustar a posição do WhatsApp */
@media (max-width: 769px) {
    #whatsapp-popup {
        bottom: 30px;
        right: 20px;
        padding: 2px;
    }

    #personagem-suporte {
        animation: float 2s ease-in-out infinite;
        z-index: 999 !important;
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
        bottom: 0px !important;
        right: 30px !important;
        width: 120px !important;
        height: 105px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Efeito de desfoque para o fundo */
.blur-background>*:not(#confirmation-modal):not(script) {
    filter: blur(8px);
    transition: filter 0.3s ease;
}

.blur-background>#personagem-suporte {
    filter: none !important;
}

/* Estilos para o modal */
#confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: all 0.3s ease;
    padding: 15px;
    box-sizing: border-box;
}

.modal-hidden {
    opacity: 0;
    visibility: hidden;
}

.modal-visible {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: linear-gradient(145deg, #131c2e, #1f2b42);
    color: #fff;
    width: 100%;
    max-width: 550px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    padding: 35px 30px;
    position: relative;
    transform: translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    max-height: 90vh;
    overflow-y: auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-hidden .modal-content {
    transform: translateY(50px);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 24px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 10;
}

.close-modal:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

.modal-content h2 {
    margin-top: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 28px;
    color: #25b6d3;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-body {
    margin: 20px 0;
}

.warning {
    background-color: rgb(255, 255, 255);
    border-left: 4px solid #ff0000;
    padding: 15px;
    margin: 15px 0;
    font-weight: bold;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
}

.warning:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.1) 0%, transparent 70%);
    opacity: 0.5;
    z-index: -1;
}

.modal-content h3 {
    font-size: 20px;
    margin: 25px 0 15px;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    padding-bottom: 8px;
    text-align: center;
}

.modal-content h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #25b0d3, transparent);
}

.schedule {
    background-color: rgba(37, 211, 102, 0.08);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(37, 127, 211, 0.2);
}

.day {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.day:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transform: translateX(4px);
}

.day:last-child {
    border-bottom: none;
}

.day-name {
    font-weight: bold;
    color: #258ad3;
    letter-spacing: 0.5px;
}

/* Estilo para o dia atual destacado */
.today-only {
    background-color: rgba(37, 109, 211, 0.15);
    border-radius: 12px;
    padding: 22px;
    margin: 10px 0;
    border-left: 4px solid #256dd3;
    font-size: 1.1em;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.today-only:before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background-color: rgba(37, 118, 211, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.today-only .day-name {
    font-size: 1.4em;
    margin-bottom: 12px;
    display: block;
    color: #25aad3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.day-hours-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.hora-item {
    font-weight: 600;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid rgba(37, 109, 211, 0.5);
}

.hora-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}

.today-only .hora-item {
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, 0.15);
    border-left: 3px solid #258ad3;
}

.modal-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.modal-actions button {
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 15px;
    padding: 15px 0;
    text-align: center;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: linear-gradient(145deg, #1e2c42, #2a3c56);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    grid-column: span 2;
}

.btn-primary {
    background: linear-gradient(145deg, #0069d9, #0055b5);
    color: #fff;
    grid-column: span 1;
}

.btn-whatsapp {
    background: linear-gradient(145deg, #2590d3, #12638c);
    color: #fff;
    grid-column: span 2;
}

.modal-actions button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25);
}

.modal-actions button:active {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.btn-primary:before,
.btn-whatsapp:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.btn-primary:hover:before,
.btn-whatsapp:hover:before {
    left: 100%;
}

/* Ícones para os botões */
.btn-primary:after {
    content: '🔧';
    margin-left: 8px;
}

.btn-whatsapp:after {
    content: '→';
    font-size: 1.2em;
    margin-left: 8px;
}

.btn-secondary:after {
    content: '📅';
    margin-left: 8px;
}

/* Estilos responsivos */
@media (max-width: 600px) {
    .modal-content {
        width: 100%;
        padding: 25px 20px;
        border-radius: 20px;
        margin: 0;
    }

    .day {
        flex-direction: column;
        padding: 15px 0;
    }

    .day-hours {
        margin-top: 5px;
        font-size: 0.9em;
    }

    .modal-actions {
        grid-template-columns: 1fr;
    }

    .btn-secondary,
    .btn-primary,
    .btn-whatsapp {
        grid-column: span 1;
        padding: 16px 0;
        font-size: 16px;
    }

    .today-only {
        padding: 18px;
    }

    .today-only .day-name {
        font-size: 1.3em;
    }

    .today-only .day-hours {
        font-size: 1.1em;
    }

    .modal-content h2 {
        font-size: 24px;
        padding-bottom: 15px;
    }

    .warning {
        padding: 15px 12px;
        font-size: 0.95em;
    }

    .close-modal {
        top: 15px;
        right: 15px;
    }

    .day-hours-container {
        gap: 8px;
    }

    .hora-item {
        padding: 6px 10px;
        font-size: 0.95em;
    }

    .today-only .hora-item {
        font-size: 1em;
    }
}

/* ============ BY XANDYNN */


        /*
    Altera as cores principais do site para uma cor mais clara (branco)
*/

:root {
    --primary: 0, 122, 255;           /* hsl(206, 100%, 50%) */
    --secondary: 255 255 255;         /* hsl(207, 100%, 33%) */
    --background: 240, 247, 255;     /* hsl(213, 100%, 98%) */
    --foreground: 0, 0, 0;           /* hsl(0, 0%, 0%) */
    --border: 0 0 0 / 0.1;         /* hsl(0, 0%, 87%) */
    --muted: 242, 242, 242;          /* hsl(0, 0%, 95%) */
    --muted-foreground: 97, 97, 102; /* hsl(240, 5%, 40%) */
    --radius: 1rem;
}

body  * {
  color: rgb(var(--foreground));
}

body svg {
  color: white !important;
}

body > div.flex.flex-col.min-h-screen > div.max-w-xl.w-full.space-y-8.mx-auto.p-3 > div.relative.border.p-8.rounded-md.flex.flex-col.items-center.justify-center {
  background: rgb(var(--secondary));
}

.flex.items-center.gap-1.font-semibold.tracking-tighter.overflow-hidden {
  display: none;
}


section:has(.grid.lg\:grid-cols-7) .container.max-w-screen-2xl {
  display: none !important;
}