/* Imports Club — imagem do cartao de produto, tamanho padrao em todo o lado.
 *
 * Pedido do Daniel (22/08 12:15 e 29/08): "existem imagens de capa que estao
 * gigantes... aparecem com o tamanho parece que com zoom... Preciso que todas
 * fiquem padrao", e "as imagens que aparecem na seleçao de vestuario e nas
 * novidades aparecem cortadas".
 *
 * MEDIDO: a regra base do tema (main.css) e `.ic-product-img{object-fit:cover}`
 * dentro de uma caixa `aspect-ratio:3/4`. As artes dele sao mais largas do que
 * altas (moldes do Canva: FORMA-DE-Tenis ratio 1.26, Entrega-Imediata ratio 1.41),
 * por isso o `cover` escala pela altura e COME as laterais — e o texto
 * "ENTREGA IMEDIATA", que esta dentro da propria arte, aparece como
 * "NTREGA IMEDIAT". O `contain` so existia dentro de `.ic-shop__content`,
 * ou seja, so em algumas paginas.
 *
 * Aqui poe-se `contain` + fundo branco em TODOS os contextos de cartao, para
 * nenhuma arte ser cortada em pagina nenhuma. O fundo branco e o que o Daniel
 * pediu ("quero os fundos brancos nos produtos").
 */

.ic-product-img,
.ic-product-img-primary,
.ic-product-img-hover,
ul.products li.product img,
.ic-home-product-rail img,
.ic-sv-card .ic-sv-img img,
.ic-product-card img {
    object-fit: contain !important;
    object-position: center !important;
    background: #fff;
}

.ic-product-image-wrap,
.ic-sv-card .ic-sv-img {
    background: #fff;
}

/* Grelha das paginas de listagem, igual a do End Clothing.
 *
 * Pedido do Daniel (22/08 16:25): "preciso que a grid de produtos e tamanhos dos
 * cards e a quantidade de produtos que aparece nas dobras seja igual ao da
 * www.endclothing.com. E aplique isso como regra, sempre que for criada uma nova
 * pagina mantenha isso como regra padrao."
 *
 * MEDIDO no print que ele proprio enviou (endclothing.com/eu/footwear, desktop):
 * 4 colunas. O Imports estava a 3 em 1440px. No telemovel ficam 2, e o carrossel
 * da home ja media 2,53 produtos por ecra — a mesma proporcao do print dele
 * ("2 inteiros e uma parte do 3."), por isso o telemovel nao se toca.
 */
@media (min-width: 1025px) {
    .woocommerce ul.products,
    ul.products.columns-3,
    ul.products.columns-4,
    .ic-shop__content ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Paginacao: nada pode ficar fora do alcance.
 *
 * Reportado pelo Daniel 29/08 18:20: "comecei na pagina 1, quando cheguei a
 * pagina 7 o restante simplesmente nao aparece".
 *
 * MEDIDO a 390px: a navegacao tinha 16 links e SO 8 cabiam no ecra, com
 * flex-wrap:nowrap e overflow-x:visible — os numeros a partir do 8 ficavam
 * fora da area visivel e sem scroll, portanto inalcancaveis. O cliente ficava
 * preso na pagina 7. Agora quebra em linhas e nada fica de fora.
 */
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination .page-numbers,
nav.woocommerce-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    row-gap: 10px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
    list-style: none;
}

.woocommerce-pagination li {
    list-style: none;
    margin: 0;
}

/* Alvo de toque decente no telemovel — o foco e 100% mobile. */
@media (max-width: 860px) {
    .woocommerce-pagination a.page-numbers,
    .woocommerce-pagination span.page-numbers {
        min-width: 38px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }
}