html {
    font-size: 14px; /* Define o tamanho base da fonte para o documento */
}

@media (min-width: 768px) {
    html {
        font-size: 16px; /* Aumenta o tamanho da fonte em telas maiores (responsivo) */
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; /* Destaca elementos focados com sombra azul */
}

html {
    position: relative; /* Necessário para elementos filhos com posição absoluta */
    min-height: 100%; /* Garante que o HTML ocupe pelo menos toda a altura da tela */
}

body {
    margin-bottom: 60px; /* Espaço inferior para evitar sobreposição com elementos fixos (ex: footer) */
}


/* Container para a imagem principal */
.zoom-container {
    position: relative; /* Necessário para posicionar elementos filhos (ex: zoom) */
    display: inline-block; /* Permite que o container só ocupe o espaço necessário */
}

.container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
}


.main-image {
    width: 100%; /* Imagem ocupa 100% da largura do container */
    height: auto; /* Altura ajustada automaticamente para manter a proporção */
    object-fit: cover; /* Cobre o espaço do container cortando, se necessário */
}

/* Estilo para as miniaturas de imagem */
.image-thumbnails img {
    cursor: pointer; /* Muda o cursor para "mãozinha" */
    margin: 5px; /* Espaço ao redor das miniaturas */
    border: 2px solid #ddd; /* Borda padrão cinza-claro */
    border-radius: 5px; /* Bordas arredondadas */
    transition: border-color 0.3s; /* Animação suave ao mudar a cor da borda */
}

    /* Efeito de hover nas miniaturas */
    .image-thumbnails img:hover {
        border-color: #258cfb; /* Muda a borda para azul ao passar o mouse */
    }

/* Zoom Effect */
.zoom-img {
    position: absolute; /* Posição absoluta para cobrir a imagem principal */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Preenche toda a área do container */
    background: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    display: none; /* Escondido por padrão */
}

/* Container de estrelas (rating) */
.stars {
    display: flex; /* Usa flexbox para alinhar estrelas */
    direction: row; /* Direção horizontal */
    justify-content: flex-start; /* Alinha à esquerda */
}

input[type="radio"] {
    display: none; /* Esconde os inputs de rádio (usados para seleção de estrela) */
}

label.star {
    font-size: 30px; /* Tamanho das estrelas */
    color: grey; /* Cor padrão das estrelas */
    cursor: pointer; /* Cursor de mãozinha ao passar o mouse */
}

input[type="radio"]:checked ~ label.star {
    color: gold; /* Altera a cor da estrela selecionada */
}

input[type="radio"]:hover ~ label.star,
input[type="radio"]:focus ~ label.star {
    color: gold; /* Altera a cor ao passar o mouse ou focar */
}

.star {
    color: grey; /* Cor padrão das estrelas (modo JS) */
    font-size: 30px; /* Tamanho */
    cursor: pointer; /* Cursor de seleção */
    transition: color 0.2s ease-in-out; /* Transição suave na mudança de cor */
}

    .star.filled {
        color: gold; /* Cor para estrelas preenchidas */
    }

    .star:hover {
        color: gold; /* Cor ao passar o mouse sobre a estrela */
    }

/* Container para a imagem principal */
#zoom-container {
    position: relative; /* Necessário para posicionar o zoom */
    display: inline-block; /* Evita ocupar 100% da largura se não for necessário */
    width: 100%; /* Ocupa toda a largura disponível */
    max-width: 100%; /* Garante que não ultrapasse o tamanho do container pai */
}

/* Imagem principal */
#main-image {
    display: block; /* Remove espaçamento embaixo da imagem (causado por inline) */
    width: 100%; /* Ocupa toda a largura */
    height: auto; /* Mantém proporção */
    max-width: 100%; /* Garante que não ultrapasse o limite do container */
    object-fit: contain; /* A imagem se ajusta ao container sem cortar */
}

.zoom-pane {
    z-index: 9999 !important; /* Garante que o zoom fique acima de tudo */
}

/* Estilo para submenu dropdown */
.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.5rem;
        display: none;
        position: absolute;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }



.hero-img {
    max-height: 250px; /* ou 250px */
    object-fit: contain;
    margin: auto;
}




/*promoção*/

.fire-icon {
    display: inline-block;
    animation: flicker 1.2s infinite;
}

@keyframes flicker {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}



/* cupom animado */
.promo-alert {
    animation: pulseAlert 3s ease-in-out infinite;
    transition: box-shadow 0.3s ease;
}

@keyframes pulseAlert {
    0% {
        box-shadow: 0 0 0 rgba(255, 221, 87, 0.4); /* amarelo suave */
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 221, 87, 0.8); /* amarelo mais forte */
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 221, 87, 0.4);
    }
}

.alert-warning.promo-alert {
    background-color: #fff3cd;
    border: 1px solid #ffdd57;
    color: #856404;
}


.carousel-control-prev,
.carousel-control-next {
    margin-top: 90px; /*Ajuste dos botões laterais*/
    background-color: rgba(255, 255, 255, 0.7); /* Branco com 70% de opacidade */
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1); /* Inverte as cores dos ícones para garantir contraste */
}

.carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.7); /* Branco com 70% de opacidade */
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.carousel-indicators .active {
    background-color: rgba(255, 255, 255, 1); /* Branco sólido para o indicador ativo */
}



.card-produto {
    border-radius: 15px; /* Define quão arredondado você quer */
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

    .card-produto:hover {
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

.card-hover {
    transition: all 0.3s ease-in-out; /* Animação suave */
}

.card-hover:hover {
    border: 2px solid #120a8f; /* Borda azul do btn-info do Bootstrap */
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.3); /* Sombra suave azul */
    color: #0d6efd; /* Cor do texto alterada para azul do btn-info */
}


/* Paginador inativo */
.page-item .page-link {
    background-color: #ffffff;
    color: #0d6efd;
    border: 1px solid #dee2e6;
}

/* Paginador ativo */
.page-item.active .page-link {
    background-color: #0d6efd;
    color: #ffffff;
    border-color: #0d6efd;
}

/* Hover opcional */
.page-item .page-link:hover {
    background-color: #e9ecef;
    color: #0d6efd;
}



:root {
    /* Botão Detalhes */
    --btn-details-bg: #0d6efd; /* Azul vibrante semelhante ao "Dodger Blue" (RGB?13,110,253) :contentReference[oaicite:1]{index=1} */
    --btn-details-text: #ffffff; /* Branco puro para contraste */
    --btn-details-hover: #007bff; /* Azul mais escuro ao passar o mouse, também clássico do Bootstrap */
    --btn-details-border: #007bff; /* Mesma cor que o hover, para borda consistente */
    /* Botão Login */
    --btn-login-bg: #0d6efd; /* Mesmo azul vibrante do botão Detalhes */
    --btn-login-text: #ffffff; /* Branco puro */
    --btn-login-hover: #007bff; /* Azul escuro no hover */
    --btn-login-border: #007bff; /* Borda azul escura */
    /* Botão Busca */
    --btn-search-bg: #198754; /* Verde Escuro (semelhante ao "Bootstrap Success") */
    --btn-search-text: #ffffff; /* Branco puro para contraste */
    --btn-search-hover: #198754; /* Verde Escuro (semelhante ao "Bootstrap Success") */
    --btn-search-border: #007bff; /* Borda azul para combinar com demais botões */
    /* Carrinho */
    --btn-cart-bg: #ffc107;
    --btn-cart-text: #ffffff;
    --btn-cart-border: #e0a800;
    /* Paginação */
    --pagination-active-bg: #0d6efd; /* Azul vibrante para página ativa */
    --pagination-active-text: #ffffff; /* Texto branco na página ativa */
    --pagination-inactive-bg: #ffffff; /* Fundo branco para páginas inativas */
    --pagination-inactive-text: #0d6efd; /* Texto azul para páginas inativas */
}


/* Estilos aplicáveis às classes */
.btn-details {
    background-color: var(--btn-details-bg);
    color: var(--btn-details-text);
    border: 1px solid var(--btn-details-border);
}

    .btn-details:hover {
        background-color: var(--btn-details-hover);
    }

.btn-login {
    background-color: var(--btn-login-bg);
    color: var(--btn-login-text);
    border: 1px solid var(--btn-login-border);
}

    .btn-login:hover {
        background-color: var(--btn-login-hover);
    }

.btn-search {
    background-color: var(--btn-search-bg);
    color: var(--btn-search-text);
    border: 1px solid var(--btn-search-border);
}


.btn-cart {
    background-color: var(--btn-cart-bg);
    color: var(--btn-cart-text);
    border: none;
}

    .btn-cart:hover {
        opacity: 0.9;
    }

.badge-cart { /* supondo que você use uma badge no carrinho */
    background-color: var(--badge-bg);
    color: var(--badge-text);
}

.pagination .page-item.active .page-link {
    background-color: var(--pagination-active-bg);
    color: var(--pagination-active-text);
}

.pagination .page-item .page-link {
    background-color: var(--pagination-inactive-bg);
    color: var(--pagination-inactive-text);
}


:root {
    --card-summary-bg: #08618d;
    --card-summary-text: #ffffff;
    --card-summary-border: transparent;
}

.card-summary {
    background-color: var(--card-summary-bg);
    color: var(--card-summary-text);
    border: 1px solid var(--card-summary-border);
    border-radius: 0.25rem;
    padding: 1rem;
}


.text-black {
    color: #000000;
}


.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 10px;
    padding: 0.45rem 1.1rem;
    letter-spacing: 0.01em;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.2s;
}

    .btn:hover {
        transform: translateY(-1px);
    }

    .btn:active {
        transform: translateY(0);
    }


.btn-info {
    background: #117a8b !important;
    color: #fff !important;
    border-color: #117a8b !important;
    box-shadow: 0 2px 8px rgba(17, 122, 139, 0.18);
}

    .btn-info:hover,
    .btn-info:focus {
        background: #0e6676 !important;
        border-color: #0e6676 !important;
        box-shadow: 0 4px 16px rgba(17, 122, 139, 0.28);
    }



button.btn-cart,
button.btn-cart:link,
button.btn-cart:visited {
    background: #117a8b !important;
    color: #fff !important;
    border: 1px solid #117a8b !important;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s, border-color 0.2s, transform 0.1s, box-shadow 0.15s;
}

    button.btn-cart:hover,
    button.btn-cart:focus,
    button.btn-cart:focus-visible {
        background: #0e6676 !important;
        border-color: #0e6676 !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(17, 122, 139, 0.25);
        outline: none;
    }

    button.btn-cart:active {
        background: #0a5460 !important;
        border-color: #0a5460 !important;
        transform: translateY(0);
        box-shadow: none;
    }



.page-item .page-link {
    background: #fff;
    color: #117a8b;
    border: 1px solid #ddd;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

 
    .page-item .page-link:hover {
        background: #117a8b;
        color: #fff;
        border-color: #117a8b;
    }


.page-item.active .page-link {
    background: #117a8b !important;
    color: #fff !important;
    border-color: #117a8b !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(17, 122, 139, 0.28);
}


.page-item.disabled .page-link {
    background: #f8f8f8;
    color: #bbb;
    border-color: #eee;
    cursor: not-allowed;
}


.page-item .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(17, 122, 139, 0.2);
}


.page-item:first-child .page-link {
    border-radius: 8px 0 0 8px;
}

.page-item:last-child .page-link {
    border-radius: 0 8px 8px 0;
}

.page-item:only-child .page-link {
    border-radius: 8px;
}



.form-check-input[type="checkbox"] {
    border-color: #117a8b;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

    .form-check-input[type="checkbox"]:checked {
        background-color: #117a8b !important;
        border-color: #117a8b !important;
    }


    .form-check-input[type="checkbox"]:focus {
        border-color: #117a8b;
        box-shadow: 0 0 0 3px rgba(17, 122, 139, 0.2);
        outline: none;
    }

    .form-check-input[type="checkbox"]:hover {
        border-color: #0e6676;
        box-shadow: 0 0 0 2px rgba(17, 122, 139, 0.15);
    }


.form-check-label {
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: #333;
}