/*
Theme Name: MagsilMoveis
Theme URI:
Description: Tema Oficial Magsil Móveis
Author: Magsil
Author URI:
Template: magsil-core
Version: 2.0.0
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Fix for grid buttons hover behavior */
.wp-block-woocommerce-product-button .add_to_cart_button:hover,
.wp-block-woocommerce-product-button .wp-element-button:hover {
    background-color: var(--wp--preset--color--accent-dark) !important;
    color: var(--wp--preset--color--base) !important;
}

/* --------------------------------------------------------------------------
 * Bloco de preço do card em 4 linhas.
 * Disposição da captura de referência, com as cores da paleta do tema:
 *   1. preço antigo riscado   — 12px, muted
 *   2. preço em destaque      — 20px/700, sale
 *   3. ou 12x de R$ X Sem juros — 12px, contrast + muted
 *   4. R$ X à vista com desconto — 13px, contrast + muted
 * Apenas tipografia e cor: a altura e o espaçamento do card seguem o padrão
 * do tema pai.
 * ----------------------------------------------------------------------- */

ul.products li.product .price {
    line-height: 1.35;
}

/* Linha 1 — preço antigo. */
ul.products li.product .price del {
    display: block;
    margin-right: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--wp--preset--color--muted, #6d6d6d);
    text-decoration: line-through;
}

/* Linha 2 — preço em promoção. */
ul.products li.product .price ins {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--wp--preset--color--sale, #d75852);
    text-decoration: none;
}

/* Linha 2 — produto sem promoção: o valor único ocupa a mesma posição. */
ul.products li.product .price > .woocommerce-Price-amount {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--wp--preset--color--contrast, #111111);
}

/* Linha 3 — parcelamento (módulo Preços do Painel Magsil). */
ul.products li.product .magsil-pricing__installments {
    font-size: 12px;
    color: var(--wp--preset--color--contrast, #111111);
}

ul.products li.product .magsil-pricing__installments strong {
    font-weight: 700;
    color: inherit;
}

ul.products li.product .magsil-pricing__nojuros {
    color: var(--wp--preset--color--muted, #6d6d6d);
}

/* Linha 4 — valor à vista. */
ul.products li.product .magsil-pricing__avista {
    margin-top: 1px;
    font-size: 13px;
}

ul.products li.product .magsil-pricing__avista-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--wp--preset--color--contrast, #111111);
}

ul.products li.product .magsil-pricing__avista-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--wp--preset--color--muted, #6d6d6d);
}

/* ==========================================================================
 * Altura fixa do card e respiro entre as linhas do grid.
 *
 * Problema medido no tema pai (>=993px):
 *   1. "body:not(.static-cta-buttons) ul.products li.product{align-self:flex-start}"
 *      faz cada card encolher para a própria altura — 445 / 447,3 / 463,4px na
 *      mesma linha, conforme o produto tenha ou não preço antigo riscado.
 *   2. "ul.products" é flex-wrap sem row-gap: a folga real entre linhas é 0px.
 *   3. O painel de hover é o pseudo-elemento
 *      "li.product:not(.product-category):before" com
 *      height:calc(100% + 30px) e margin-top:-15px, mais box-shadow de 10px.
 *      Ele sangra 15px abaixo do card e, sem folga, invade 25px da imagem do
 *      produto de baixo.
 *
 * Solução: altura fixa = imagem 1:1 + área de texto fixa + os 40px que o tema
 * já reserva para o botão absoluto; e row-gap maior que a sangria do hover.
 * O botão continua "position:absolute" como no tema pai — torná-lo estático
 * reserva 40px de espaço em branco mesmo com opacity:0.
 * ----------------------------------------------------------------------- */

:root {
    /* Altura fixa da área de texto do card (categoria + título + preços).
       6 (respiro da imagem) + 15,4 (categoria) + 39 (título, 2 linhas)
       + 43,2 (preços) + 2 (respiro) + 37,2 (parcelamento) = 142,8px. */
    --magsil-card-info-h: 144px;
    /* Respiro entre as linhas de informação e entre elas e a imagem. */
    --magsil-card-gap: 2px;
    --magsil-card-info-pt: 6px;
    /* Título: altura da linha medida no tema e nº de linhas reservadas. */
    --magsil-card-title-lh: 19.5px;
    --magsil-card-title-lines: 2;
    /* Folga entre linhas: > 15px de sangria do hover + 10px de sombra. */
    --magsil-grid-row-gap: 30px;
}

/* --- Caixa da imagem: quadrada, para a altura não depender do arquivo. --- */
ul.products li.product .woocommerce-image__wrapper {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

ul.products li.product .woocommerce-image__wrapper > a,
ul.products li.product .magsilcore-plp-carousel-container,
ul.products li.product .magsilcore-plp-image-wrapper {
    height: 100%;
}

ul.products li.product .woocommerce-image__wrapper img {
    height: 100%;
    object-fit: cover;
}

/* --- Título: sempre 2 linhas reservadas, com reticências no excesso. --- */
ul.products li.product .woocommerce-loop-product__title a {
    display: -webkit-box;
    -webkit-line-clamp: var(--magsil-card-title-lines);
    line-clamp: var(--magsil-card-title-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(var(--magsil-card-title-lh) * var(--magsil-card-title-lines));
    line-height: var(--magsil-card-title-lh);
}

/* --- Preço: reserva a linha do valor antigo mesmo sem promoção, para que
       o parcelamento comece na mesma altura em todos os cards. --- */
ul.products li.product .price {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 43px;
}

ul.products li.product .price > .screen-reader-text {
    position: absolute;
}

/* --- Espaçamento interno: informações coladas.
       Medido antes: 12px acima da categoria, 4+4px de padding no título,
       12px entre preço e parcelamento (margens de 12px e 4px colapsadas) e
       3,2px de sobra vazia no fim. Tudo colapsado para o mesmo ritmo. --- */

/* O respiro abaixo da imagem passa a ser o padding-top do bloco de texto,
   para ter uma única origem em vez de duas. */
ul.products li.product .woocommerce-image__wrapper {
    margin-bottom: 0;
}

ul.products li.product .woocommerce-card__header {
    padding-top: var(--magsil-card-info-pt);
}

/* Título sem padding e sem altura reservada: a caixa tem a altura do texto,
   então categoria, título e preço riscado ficam colados um no outro. A folga
   que sobra vai para o fim do bloco, abaixo da última linha de preço.
   O limite de 2 linhas continua no <a> (max-height + line-clamp), e a altura
   fixa do bloco (--magsil-card-info-h) é dimensionada para o caso de 2
   linhas, de modo que um nome longo não corta nem altera a altura do card. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Preço → parcelamento: de 12px para o ritmo do card. */
ul.products li.product .price {
    margin-bottom: var(--magsil-card-gap);
}

ul.products li.product .magsil-pricing {
    margin-top: 0;
}

/* --- Altura fixa do card e folga entre linhas (só no desktop: abaixo de
       993px o tema já usa grid com row-gap:30px, botão estático e não tem
       painel de hover). --- */
@media (min-width: 993px) {

    ul.products {
        row-gap: var(--magsil-grid-row-gap);
    }

    /* Anula o align-self:flex-start do tema pai (mesma especificidade, o CSS
       do tema filho é carregado depois). */
    body:not(.static-cta-buttons) ul.products li.product,
    .static-cta-buttons ul.products li.product.magsilkit-swatch-hover {
        align-self: stretch;
    }

    ul.products li.product .woocommerce-card__header {
        height: var(--magsil-card-info-h);
    }
}