/* --- Estrutura Geral do Carrossel --- */
.carrossel-dinamico-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 16px;
    font-family: sans-serif;
    position: relative;
}

.carrossel-header {
    text-align: center;
    margin-bottom: 40px;
}

.carrossel-header a {
    text-decoration: none;
    color: inherit;
}

/* --- Wrapper do Swiper --- */
.cdcb-swiper-wrapper {
    position: relative; /* Contexto para os botões */
}

/* --- Card do Produto --- */
.carrossel-dinamico-container .product-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
 height: 100%; /* ATUALIZADO: Garante que todos os cards na mesma linha tenham a mesma altura */    
 position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.image-container { position: relative; width: 100%; overflow: hidden; }
.image-container a { display: block; }
.image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease-in-out; }
.image-container .secondary-image { opacity: 0; }
.product-card:hover .image-container .primary-image { opacity: 0; }
.product-card:hover .image-container .secondary-image { opacity: 1; }
.discount-badge { position: absolute; top: 10px; right: 10px; color: white; padding: 4px 8px; border-radius: 9999px; font-size: 0.8rem; font-weight: bold; z-index: 10; }
.card-content {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    }
.product-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
       display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 57px;
}

.carrossel-dinamico-container .product-card .product-name a { text-decoration: none; color: #6B7280 !important; }
.price-section { margin-bottom: 0.5rem; min-height: auto; }
.price-row { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.original-price { text-decoration: line-through; color: #9CA3AF; font-size: 0.9rem; }
.current-price { color: #1F2937; font-size: 1.1rem; }
.pix-price-container { margin-top: 0; }
.pix-price { font-size: 1.25rem; font-weight: 700; color: #111827; }
.pix-text { font-size: 0.8rem; color: #6B7280; margin-left: 0.25rem; }
.installment-text { font-size: 0.75rem; color: #6B7280; margin-top: 0.125rem; }
.buy-button {
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: none;
    width: 100%;
    margin-top: 0.75rem; /* ATUALIZADO: De 'auto' para um valor fixo */
    font-size: 0.75rem;
}

/* --- Navegação Swiper --- */
.swiper-container { width: 100%; padding: 10px 0 0 0; overflow: hidden; }
.swiper-slide { height: auto; }

.carrossel-dinamico-container .swiper-button-prev,
.carrossel-dinamico-container .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
        color: white;
    border-radius: 6px;
}

.carrossel-dinamico-container .swiper-button-prev {
    left: -40px; /* Sua configuração manual */
}

.carrossel-dinamico-container .swiper-button-next {
    right: -40px; /* Sua configuração manual */
}

.carrossel-dinamico-container .swiper-button-prev::after,
.carrossel-dinamico-container .swiper-button-next::after {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Paginação */
/* ATUALIZADO: Seletor mais específico para garantir prioridade */
.carrossel-dinamico-container .carrossel-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.2rem !important; /* ATUALIZADO: Força a distância reduzida */
    gap: 1rem;
}
.swiper-pagination { 
    position: static; 
    width: auto; 
}

/* Regra específica para bolinhas INATIVAS */
.carrossel-dinamico-container .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #ffffff;
    border: none;
    opacity: 1;
}

/* --- Mensagem de Feedback --- */
#cdcb-message-box { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #28a745; color: white; padding: 15px 25px; border-radius: 5px; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
#cdcb-message-box.show { opacity: 1; visibility: visible; }

/* --- Responsividade --- */
@media (max-width: 767px) {
    .pix-price { 
        font-size: 1.1rem; 
    }

    /* --- ATUALIZAÇÃO FINAL PARA NAVEGAÇÃO MÓVEL --- */

    /* 1. Garante que o container principal da navegação se comporte como uma linha flexível */
    .carrossel-dinamico-container .carrossel-navigation {
        display: flex !important;
        justify-content: space-between !important; /* Afasta os itens para as pontas */
        align-items: center !important; /* Alinha verticalmente no centro */
        width: 100%;
    }

    /* 2. Garante que os botões não quebrem a linha e tenham um tamanho fixo */
    .carrossel-dinamico-container .swiper-button-prev,
    .carrossel-dinamico-container .swiper-button-next {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        flex: 0 0 auto; /* Não cresce, não encolhe, baseia-se no tamanho do conteúdo */
    }

    /* 3. Garante que a paginação ocupe o espaço central e se comporte corretamente */
    .carrossel-dinamico-container .swiper-pagination {
        position: static !important;
        width: auto !important; /* Permite que ocupe apenas o espaço necessário */
        flex-grow: 1; /* Ocupa o espaço restante no centro */
    }
}