* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}
/* cores */
:root{
    --cinza:#f7f5f4;
}
/* menu */
.bg-cinza{
    background-color: var(--cinza);
}
.sacola-count {
    top: -5px;
    right: -5px;
}

/* menu mobile */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.active {
    transform: translateX(0);
}
/* estilo tela produto.html */
.btn-cor span:hover,
.btn-tamanho button:hover {
    background-color: #e0e0e0; /* Realce ao passar o mouse */
    cursor: pointer;
}

.btn-cor span.selected, 
.btn-tamanho button.selected {
    border: 2px solid #0066cc; /* Cor de seleção */
}
/* marketing */
span.icone-olho{
    color: black !important;
}
/* carregamento */
#loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#loading-screen .spinner {
    width: 64px;
    height: 64px;
    border: 4px solid #ec4899; /* Rosa */
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* @keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
} */
/* Estilo Padrão para TODOS os dispositivos (Mobile First) */
.banner-principal {
    width: 100%;
    /* Define uma altura relativa para telas pequenas */
    height: 30vh; 
    /* Garante que a imagem preencha o contêiner, cortando o mínimo */
    object-fit: cover; 
    /* Alinha o centro da imagem no topo, o que geralmente funciona bem para banners */
    object-position: top center; 
}

/* Ajuste para telas médias (Tablets e Laptops) */
@media (min-width: 768px) {
    .banner-principal {
        /* Aumenta a altura do banner */
        height: 60vh; 
        /* Se o corte estiver ruim, você pode ajustar a posição: */
        object-position: center center;
    }
}

/* Ajuste para telas grandes (Desktops) */
@media (min-width: 1024px) {
    .banner-principal {
        /* Altura ideal para desktop */
        height: 75vh; 
    }
}