/* B2B - Layout de tela cheia com margem pequena (Story #65494).
   Escopado em .wide-layout-b2b para nao afetar a Busca (Listing/search.cshtml),
   que continua usando as regras originais de home.css. */

.wide-layout-b2b.container,
.wide-layout-b2b .container,
.wide-layout-b2b#dvProductHomePageContainer,
.wide-layout-b2b .container#dvProductHomePageContainer {
    min-width: 0 !important;
    max-width: 100% !important;
    width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media screen and (min-width: 700px) {
    .wide-layout-b2b.container,
    .wide-layout-b2b .container,
    .wide-layout-b2b#dvProductHomePageContainer,
    .wide-layout-b2b .container#dvProductHomePageContainer {
        width: calc(100% - 48px) !important;
        max-width: 100% !important;
    }
}

@media screen and (min-width: 1000px) {
    .wide-layout-b2b.container,
    .wide-layout-b2b .container,
    .wide-layout-b2b#dvProductHomePageContainer,
    .wide-layout-b2b .container#dvProductHomePageContainer {
        width: calc(100% - 32px) !important;
        max-width: 100% !important;
    }
}

@media screen and (min-width: 1300px) {
    .wide-layout-b2b.container,
    .wide-layout-b2b .container,
    .wide-layout-b2b#dvProductHomePageContainer,
    .wide-layout-b2b .container#dvProductHomePageContainer {
        width: calc(100% - 80px) !important;
        max-width: 1920px !important;
    }
}

/* Grid de produtos (_ProductList.cshtml, .product-box-wrapper .col-lg-3.col-sm-4).
   Nao editar o partial diretamente - ele e compartilhado com a Busca via AJAX.
   Flex (nao CSS grid) para que a ultima linha incompleta fique centralizada
   em vez de alinhada a esquerda. */
.wide-layout-b2b .product-box-wrapper.row {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

    /* Card com largura FIXA (~260px, igual ao tamanho normal do site) - a
       quantidade de colunas por linha e' quem varia (via flex-wrap), nunca o
       tamanho do card. Formula percentual anterior (100%/cols) fazia os
       cards ficarem finos demais logo apos abrir uma nova coluna (ex.: 1000px
       ao entrar em 4 colunas). */
    .wide-layout-b2b .product-box-wrapper.row > .col-lg-3.col-sm-4 {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 260px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-left: 0;
        padding-right: 0;
    }

        /* Causa raiz real (confirmada via DevTools): o wrapper acima ja e'
           display:flex por conta propria (regra pre-existente, nao nossa) e o
           .product-box dentro dele e' um item flex sem width/flex-grow -
           por padrao (flex-basis:auto) ele encolhe para o tamanho do
           CONTEUDO em vez de esticar pro wrapper. Cards com mais conteudo
           (preco, botao de carrinho) "precisam" de mais espaco e preenchem;
           o card esgotado (so selo + sino, menos conteudo) encolhe pra um
           tamanho menor que os outros. Forcar o .product-box a esticar
           resolve para qualquer quantidade de conteudo. */
        .wide-layout-b2b .product-box-wrapper.row > .col-lg-3.col-sm-4 > .product-box {
            width: 100% !important;
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

/* Tela de Categorias (Pages/Categories.cshtml) - ".all-category" tinha
   width:80%/margin:0 auto (design.css) reduzindo ainda mais a area util
   dentro do .container ja alargado acima. */
.wide-layout-b2b .all-category {
    width: 100% !important;
    margin: 0 !important;
}

.wide-layout-b2b .all-category .first-level-ul .first-level-li {
    width: 25% !important;
}

@media screen and (min-width: 1300px) {
    .wide-layout-b2b .all-category .first-level-ul .first-level-li {
        width: 20% !important;
    }
}

/* Blog (dvBlogHomeContainer / #carouselBlog) - --blog-cols ficava fixo em 3
   (blog-home.css), entao com o container mais largo os cards so cresciam de
   tamanho em vez de caber mais itens por linha. */
@media screen and (min-width: 1300px) {
    .wide-layout-b2b #carouselBlog {
        --blog-cols: 4;
    }
}

@media screen and (min-width: 1600px) {
    .wide-layout-b2b #carouselBlog {
        --blog-cols: 5;
    }
}

/* Carrosseis de produto que NAO sao a "Galeria" (Ofertas, Recomendado etc.) -
   card com largura FIXA (260px), igual ao "Mais Vendidos" - a quantidade de
   colunas por "pagina" do carrossel (--grp-cols, calculado pelo JS em
   home-carousel.js a partir dessa mesma largura de 260px) e' quem varia, nunca
   o tamanho do card. Formula anterior (container/colunas) fazia os cards
   ficarem mais largos que o "Mais Vendidos" nas larguras onde sobrava espaco.
   IMPORTANTE: escopado para >=1000px (mesmo MOBILE_BP do JS) - sem esse guard,
   a regra tambem se aplicava no mobile e quebrava o dimensionamento mobile
   existente (.product-carousel:not(.group-slide) .card-col com var(--mob-card-w),
   que so vale abaixo de 1000px). */
@media screen and (min-width: 1000px) {
    .wide-layout-b2b .product-carousel:not(.group-slide) .card-col {
        flex: 0 0 260px !important;
        max-width: 260px !important;
    }
}

/* Hero banner (#dvHeroBannerContainer) - NAO mexer no CSS interno do banner
   (.homepage-banner/.swiper/img em _herobanner.cshtml), que funciona do jeito
   original (largura 100% + altura proporcional pela imagem). Aqui so limitamos
   a largura do container que envolve o banner - a altura acompanha
   proporcionalmente, sem precisar tocar em swiper/drag/scroll. */
@media screen and (min-width: 1300px) {
    .wide-layout-b2b #dvHeroBannerContainer {
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
    }
}