/* PERROS — Imagem principal da Home */
.perros-hero-imagem {
    width: 100%;
    margin: 0;
}

.perros-hero-imagem img {
    display: block;
    width: 100%;
    height: 600px;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center bottom;
}

/* Celular */
@media (max-width: 767px) {
    .perros-hero-imagem img {
        height: 420px;
    }
}



/* PERROS — Arrasto elétrico intenso */
.perros-modelo-carrossel img {
    transition:
        opacity 0.6s ease,
        filter 0.6s ease,
        transform 0.6s ease !important;

    will-change: opacity, filter, transform;
}

/* Saída do atleta com rastro azul */
.perros-modelo-carrossel img[style*="opacity: 0"] {
    opacity: 0 !important;

    transform: translateX(55px) scale(1.04) !important;

    filter:
        drop-shadow(-15px 0 2px #ffffff)
        drop-shadow(-35px 0 5px #00bfff)
        drop-shadow(-65px 0 12px #007bff)
        drop-shadow(-100px 0 25px rgba(0, 123, 255, 0.9))
        brightness(1.7)
        !important;
}


/* 
   PERROS — HOME | MAIS VENDIDOS/* PERROS — MAIS VENDIDOS   Organiza o espaçamento das vitrines WooCommerce na Home  
   e define fotos verticais (420px), recorte superior 
   e cantos arredondados (12px).   Atualmente também afeta outras vitrines da Home.
*/


.home .woocommerce ul.products {
    column-gap: 32px;
    row-gap: 40px;
}

.home .woocommerce ul.products li.product a img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
}


/* ========================================
   PERROS — HOME | CARROSSEL DE PRODUTOS
   Vitrine com fotos verticais, cantos arredondados,
   4 cartões no desktop, 2 no tablet e 1 no celular.
   Largura ampliada, setas e rolagem horizontal.
======================================== */

/* CARROSSEL — remove o limite interno de largura */
.home .perros-carrossel-produtos > .woocommerce {
    width: 100%;
    max-width: none;
}

/* Área do carrossel — largura e centralização */
.home .perros-carrossel-produtos {
    position: relative;
    width: 94vw;
    max-width: none;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
}


/* Faixa horizontal de produtos */
.home .perros-carrossel-produtos ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 24px !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 0 20px !important;
    margin: 0 !important;
}

.home .perros-carrossel-produtos ul.products::-webkit-scrollbar {
    display: none;
}

/* Quatro cartões visíveis */
.home .perros-carrossel-produtos ul.products li.product {
    float: none !important;
    clear: none !important;
    flex: 0 0 calc((100% - 72px) / 4) !important;
    width: calc((100% - 72px) / 4) !important;
    max-width: none !important;
    margin: 0 !important;
    scroll-snap-align: start;
}

/* Fotos verticais */
.home .perros-carrossel-produtos ul.products li.product a img {
    width: 100% !important;
    height: 540px !important;
    object-fit: cover;
    object-position: center top;
    border-radius: 14px;
}

/* Setas de navegação */
.perros-carrossel-seta {
    position: absolute;
    top: 42%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #102b60;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 15px #0003;
}

.perros-carrossel-seta:hover {
    background: #007bff;
}

.perros-carrossel-anterior {
    left: -20px;
}

.perros-carrossel-proxima {
    right: -20px;
}

/* Tablet — dois cartões */
@media (max-width: 921px) {
    .home .perros-carrossel-produtos {
        width: 100%;
        margin-left: 0;
    }

    .home .perros-carrossel-produtos ul.products {
        gap: 24px !important;
    }

    .home .perros-carrossel-produtos ul.products li.product {
        flex-basis: calc((100% - 24px) / 2) !important;
        width: calc((100% - 24px) / 2) !important;
    }

    .home .perros-carrossel-produtos ul.products li.product a img {
        height: 400px !important;
    }
}

/* Celular — um cartão */
@media (max-width: 544px) {
    .home .perros-carrossel-produtos ul.products li.product {
        flex-basis: 100% !important;
        width: 100% !important;
    }

    .home .perros-carrossel-produtos ul.products li.product a img {
        height: 440px !important;
    }

    .perros-carrossel-anterior {
        left: 0;
    }

    .perros-carrossel-proxima {
        right: 0;
    }
}