/*
 * Padronizacao visual dos produtos.
 *
 * Motivo: as imagens vem de origens diferentes (S3, importacao do hub,
 * upload manual) e chegam sem dimensoes consistentes -- ha <img> com
 * width="430" e sem altura, e outras com height="0". Sem metadados o
 * WordPress nao gera thumbnails padronizadas, entao cada card renderiza
 * na proporcao natural do arquivo e a grade fica irregular.
 *
 * A correcao e feita no CSS, forcando uma caixa de proporcao fixa para
 * toda imagem de produto, independente do arquivo de origem.
 */

:root {
    /* Proporcao da caixa da imagem. 1/1 = quadrado. Use 4/3 ou 3/4 se preferir. */
    --isy-thumb-ratio: 1 / 1;

    /* contain = mostra a foto inteira, sem cortar (sobra fundo).
       cover   = preenche a caixa toda, mas corta as bordas da foto. */
    --isy-thumb-fit: contain;

    --isy-thumb-bg: #fff;
    --isy-thumb-pad: 10px;

    /* Tamanho da miniatura no layout "lista" (ex.: Produtos Visualizados),
       onde a imagem fica ao lado do texto e nao acima dele. */
    --isy-list-thumb: 90px;

    /* Linhas do titulo antes de cortar com reticencias. Mantem os cards alinhados. */
    --isy-title-lines: 2;
}

/* ---------------------------------------------------------------
   1. Caixa da imagem no card de produto
   Vale para grade da loja, categoria, relacionados, upsell,
   vistos recentemente e carrosseis do Elementor.
   --------------------------------------------------------------- */
.wd-product .product-element-top {
    position: relative;
    aspect-ratio: var(--isy-thumb-ratio);
    overflow: hidden;
    background: var(--isy-thumb-bg);
    /* mantem o raio de borda definido pelo proprio tema */
    border-radius: var(--wd-thumb-brd-radius, var(--wd-brd-radius, 8px));
}

/* Layout "lista": o tema poe a imagem ao lado do texto com max-width 50%.
   Ali um quadrado grande estoura o bloco, entao usamos miniatura fixa. */
.wd-products.elements-list .wd-product .product-element-top,
.wd-products-element.elements-list .wd-product .product-element-top {
    aspect-ratio: 1 / 1;
    width: var(--isy-list-thumb);
    max-width: var(--isy-list-thumb);
    flex: 0 0 var(--isy-list-thumb);
}

.wd-products.elements-list .wd-product .product-wrapper,
.wd-products-element.elements-list .wd-product .product-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.wd-product .product-element-top .product-image-link,
.wd-product .product-element-top .hover-img,
.wd-product .product-element-top .hover-img > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* A imagem preenche a caixa sem distorcer. O !important e necessario
   porque o Woodmart injeta width/height inline vindos do <img>. */
.wd-product .product-element-top img {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: var(--isy-thumb-fit);
    object-position: center center;
    padding: var(--isy-thumb-pad);
    box-sizing: border-box;
    background: var(--isy-thumb-bg);
}

/* Selos (Esgotado, promocao) precisam continuar por cima da imagem */
.wd-product .product-element-top .product-labels {
    z-index: 3;
}

/* ---------------------------------------------------------------
   2. Alinhamento vertical dos cards
   Sem isto, titulos de tamanhos diferentes desalinham os precos.
   --------------------------------------------------------------- */
.wd-products .wd-product,
.wd-carousel-item .wd-product {
    height: 100%;
}

.wd-product .product-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wd-product .product-element-bottom {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: 10px;
}

/* Titulo com altura fixa em N linhas */
.wd-product .product-element-bottom .wd-entities-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--isy-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(var(--isy-title-lines) * 1.4em);
    line-height: 1.4;
    margin-bottom: 4px;
}

/* Preco sempre no rodape do card */
.wd-product .product-element-bottom .isy-grid-price,
.wd-product .product-element-bottom .price {
    margin-top: auto;
}

/* Corrige o deslocamento negativo inline do bloco de preco */
.wd-product .product-element-bottom .isy-grid-price {
    margin-top: auto !important;
}

/* ---------------------------------------------------------------
   3. Miniaturas da navegacao entre produtos (seta anterior/proximo)
   --------------------------------------------------------------- */
.wd-product-nav-thumb {
    display: block;
    width: 60px;
    height: 60px;
    background: var(--isy-thumb-bg);
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 60px;
}

.wd-product-nav-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    padding: 3px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------
   4. Galeria principal da pagina de produto
   Mesma origem do problema: fotos de proporcoes diferentes fazem a
   pagina "pular" de altura conforme o produto.
   --------------------------------------------------------------- */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    background: var(--isy-thumb-bg);
}

.woocommerce-product-gallery .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery .wd-carousel-item > a {
    display: block;
    aspect-ratio: var(--isy-thumb-ratio);
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .wd-carousel-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    background: var(--isy-thumb-bg);
}

/* Miniaturas da galeria */
.wd-gallery-thumb .wd-carousel-item img,
.thumbnails .wd-carousel-item img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--isy-thumb-bg);
}

/* ---------------------------------------------------------------
   5. Ajustes de respiro em telas menores
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --isy-thumb-pad: 6px;
        --isy-title-lines: 2;
    }
}

/* ---------------------------------------------------------------
   6. Altura igual entre os cards
   Produtos com linha extra de parcelamento ficavam mais altos que
   os demais. No carrossel os itens nao esticam por padrao, entao e
   preciso mandar o container esticar e o card ocupar 100% dele.
   --------------------------------------------------------------- */
.wd-carousel-wrap {
    align-items: stretch;
}

.wd-carousel-item {
    display: flex;
    height: auto;
}

.wd-carousel-item > .wd-product,
.wd-products.wd-grid-g > .wd-product {
    width: 100%;
}

/* A area de texto cresce para preencher a diferenca, mantendo o
   preco alinhado na mesma linha em todos os cards. */
.wd-product .product-element-bottom {
    justify-content: flex-start;
}

.wd-product .product-element-bottom > :last-child {
    margin-top: auto;
}