/**
 * Cards de produto — compatibilidade responsiva do template Kingler.
 *
 * O tema pago usa colunas flutuantes (`column-1_3`/`column-1_4`) e margem
 * negativa no `<ul>`, enquanto o Bootstrap 5 redefine `.row > *`. Quando as
 * duas grades são combinadas, o catálogo ultrapassa a largura do celular.
 * Esta camada mantém tipografia, cores, badge, estrelas e hover originais do
 * tema, substituindo somente a geometria das vitrines identificadas pela
 * classe `.product-card-grid`.
 */

ul.products.product-card-grid {
    direction: ltr;
    display: grid !important;
    gap: 30px;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

/*
 * O clearfix do WooCommerce cria pseudo-elementos `table` que passam a ocupar
 * células reais quando a lista vira CSS Grid. Eles não são necessários nesta
 * implementação e, se mantidos, deslocam o primeiro produto para a direita.
 */
ul.products.product-card-grid::before,
ul.products.product-card-grid::after {
    content: none;
    display: none;
}

ul.products.product-card-grid--recent,
.related ul.products.product-card-grid--related {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.woocommerce ul.products.product-card-grid > li.store-product-card,
.woocommerce-page ul.products.product-card-grid > li.store-product-card,
body:not(.woocommerce) .woocommerce ul.products.product-card-grid > li.store-product-card {
    display: flex;
    float: none;
    margin: 0;
    max-width: none;
    min-width: 0;
    overflow: visible;
    padding: 0;
    width: 100%;
}

/*
 * Produtos relacionados (página do produto): o tema define
 * `.woocommerce .related.products ul.products li.product.column-1_4 { width: 25% }`
 * (especificidade 0,6,2, também repetida no responsive.css), que vence a regra
 * acima (0,4,2). Dentro da célula da grade isso deixava cada card com 25% da
 * coluna (~75 px no desktop): imagem sumida, texto espremido e botão cortado.
 * Este seletor (0,7,2) devolve 100% da célula em qualquer largura de tela.
 */
.woocommerce .related.products ul.products.product-card-grid > li.product.store-product-card,
.woocommerce-page .related.products ul.products.product-card-grid > li.product.store-product-card {
    float: none;
    margin: 0;
    max-width: none;
    padding: 0;
    width: 100%;
}

/**
 * Altura uniforme: imagem, nome e preço ocupam sempre as mesmas regiões. Isso
 * evita o efeito de cards "dançando" quando nomes e promoções têm tamanhos
 * diferentes, tanto na grade quanto dentro do Swiper da Home.
 */
.store-product-card .post_item_wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.store-product-card .post_featured,
.store-product-card .post_thumb,
.store-product-card .post_thumb > a {
    display: block;
    max-width: 100%;
    width: 100%;
}

.woocommerce ul.products .store-product-card .post_thumb img,
.woocommerce-page ul.products .store-product-card .post_thumb img,
body:not(.woocommerce) .woocommerce ul.products .store-product-card .post_thumb img {
    aspect-ratio: 1 / 1;
    display: block;
    height: auto;
    object-fit: contain;
    width: 100%;
}

.store-product-card .post_content {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    text-align: center;
    width: 100%;
}

.store-product-card .woocommerce-loop-product__title,
.store-product-card .woocommerce-loop-product__title a {
    overflow-wrap: anywhere;
    width: 100%;
}

.store-product-card .price {
    margin-top: auto;
    white-space: normal;
}

.product-card__brand {
    color: #888;
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
}

.product-card__rating-row {
    align-items: center;
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 4px;
    min-height: 18px;
    width: 100%;
}

.woocommerce ul.products li.product .product-card__rating,
.woocommerce-page ul.products li.product .product-card__rating {
    flex: 0 0 auto;
    margin: 0;
}

.product-card__rating-count {
    font-size: 11px;
    white-space: nowrap;
}

.product-card-grid__empty {
    color: #888;
    grid-column: 1 / -1;
    width: 100%;
}

/* Controles de catálogo alinhados antes da grade, sem corte do select. */
@media (max-width: 767px) {
    .woocommerce .woocommerce-result-count,
    .woocommerce-page .woocommerce-result-count,
    .woocommerce .woocommerce-ordering,
    .woocommerce-page .woocommerce-ordering {
        box-sizing: border-box;
        float: none;
        margin: 0 0 14px;
        text-align: left;
        width: 100%;
    }

    .woocommerce .woocommerce-ordering select,
    .woocommerce-page .woocommerce-ordering select {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    ul.products.product-card-grid {
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pagination_wrap.pagination_pages {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
}

/**
 * No celular estreito, um único card com largura limitada melhora leitura e
 * área de toque. A centralização impede que imagens menores fiquem presas à
 * lateral quando o conteúdo útil do template tem 280 px.
 */
@media (max-width: 575px) {
    ul.products.product-card-grid,
    ul.products.product-card-grid--recent,
    .related ul.products.product-card-grid--related {
        grid-template-columns: minmax(0, 340px);
        justify-content: center;
    }

    /*
     * O catálogo usa duas colunas para reduzir a altura da página de listagem.
     * As vitrines editoriais da Home e os relacionados continuam com um item,
     * pois vivem dentro do `content_wrap` estreito do template.
     */
    ul.products.product-card-grid--catalog {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-product-card .post_item_wrap {
        margin-left: auto;
        margin-right: auto;
        max-width: 340px;
    }

    .store-product-card .post_content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .store-product-card .woocommerce-loop-product__title {
        font-size: 0.82rem;
        line-height: 1.35;
        min-height: 2.7em;
    }

    .product-card__rating-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 359px) {
    ul.products.product-card-grid--catalog {
        grid-template-columns: minmax(0, 300px);
    }
}

/*
 * Botão "Ver produto" (o core.init.js do tema o move para dentro de
 * .post_featured). No toque ele ganha `min-height: 44px` (área de toque); sem
 * `align-items: center` o texto ficava preso ao topo e todo o espaço extra ia
 * para baixo (medido: 9,7 px acima × 22,3 px abaixo), parecendo um padding
 * inferior maior. O flex centraliza o texto em qualquer altura do botão.
 */
.woocommerce ul.products li.product.store-product-card .post_featured .add_to_cart_button,
.woocommerce-page ul.products li.product.store-product-card .post_featured .add_to_cart_button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
}

/**
 * O botão original aparece no hover da foto. Dispositivos touch não possuem
 * hover persistente; por isso o mesmo componente do tema passa a integrar o
 * fluxo do card e permanece acessível, com alvo mínimo confortável.
 */
@media (hover: none), (pointer: coarse) {
    .woocommerce ul.products li.store-product-card .post_featured .post_thumb::before,
    .woocommerce-page ul.products li.store-product-card .post_featured .post_thumb::before {
        display: none;
    }

    .woocommerce ul.products li.store-product-card .post_featured .sc_button,
    .woocommerce-page ul.products li.store-product-card .post_featured .sc_button,
    body:not(.woocommerce) .woocommerce ul.products li.store-product-card .post_featured .sc_button {
        display: inline-flex;
        justify-content: center;
        left: auto;
        margin: 12px auto 4px;
        min-height: 44px;
        opacity: 1;
        position: relative;
        top: auto;
        transform: none;
    }

    /*
     * No toque, o navegador aplica `:hover` ao elemento tocado. O tema tem
     * `.post_featured:hover .sc_button { top: 50% !important }` — pensado para
     * o botão absoluto sobre a foto no desktop. Com o botão em fluxo
     * (`position: relative`), esse `top: 50%` o empurrava ~200 px para baixo,
     * para trás do título: o botão "sumia" e o toque não abria o produto
     * (no iOS o primeiro toque ainda é consumido pela mudança de hover).
     * Especificidade 0,7,2 + !important vence a regra do tema (0,6,2).
     */
    .woocommerce ul.products li.product.store-product-card .post_featured:hover .sc_button,
    .woocommerce-page ul.products li.product.store-product-card .post_featured:hover .sc_button {
        opacity: 1;
        top: auto !important;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    ul.products.product-card-grid,
    ul.products.product-card-grid--recent,
    .related ul.products.product-card-grid--related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    ul.products.product-card-grid--recent,
    .related ul.products.product-card-grid--related {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}