/* ==========================================================================
   Grelha de Produtos Editorial - Ajuste Fino & Hover Estático
   ========================================================================== */

/* 1. Remove título redundante e aplica separação simétrica de 20px do banner */
#main .wp-block-woocommerce-product-collection .wp-block-heading,
.wc-block-grid__title,
.entry-content h2:has(+ .wc-block-grid),
.entry-content h2:has(+ .wp-block-woocommerce-product-template) {
    display: none !important;
}

.wp-block-woocommerce-product-template,
.wc-block-grid__products,
.woocommerce ul.products {
    margin-top: 20px !important; /* Separação de ~20px idêntica ao topo */
    margin-bottom: 24px !important;
    padding: 0 !important;
    gap: 16px 14px !important;
}

/* 2. Cartão: Fundo #FAFAFA, Hover #EBEAE8 (Sem movimento) e Padding Lateral Reduzido */
.wp-block-woocommerce-product-template li,
.wc-block-grid__product,
.woocommerce ul.products li.product {
    background-color: #fafafa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 10px !important;
    padding: 14px 8px !important; /* Margem lateral reduzida em relação à imagem */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transform: none !important; /* Remove qualquer movimento da caixa */
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.wp-block-woocommerce-product-template li:hover,
.wc-block-grid__product:hover,
.woocommerce ul.products li.product:hover {
    background-color: #ebeae8 !important; /* Tom ligeiramente mais escuro solicitado */
    border-color: #dcdbd8 !important;
    transform: none !important; /* Garante que a caixa NÃO se move */
    box-shadow: none !important;
}

/* 3. Imagem da Capa (Referência de Largura) */
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.wp-block-woocommerce-product-template a,
.wc-block-grid__product-image a {
    width: calc(100% - 10px) !important;
    display: flex !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 0 !important;
}

.wp-block-woocommerce-product-template img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: contain !important;
    margin: 0 auto 8px auto !important;
    display: block !important;
    border-radius: 4px;
}

/* 4. Título Alinhado pelo Topo com Hover #FF8000 */
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a,
.wc-block-grid__product-title,
.woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25em !important;
    color: #0f172a !important;
    text-decoration: none !important;
    text-align: center !important;
    margin: 2px 0 4px 0 !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: flex-start !important; /* Alinha o texto rigorosamente pela parte de cima */
    justify-content: center !important;
    transition: color 0.2s ease !important;
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover,
.wp-block-woocommerce-product-template .wp-block-post-title:hover,
.wc-block-grid__product-title:hover,
.woocommerce-loop-product__title:hover {
    color: #ff8000 !important; /* Cor de destaque no texto solicitada */
}

/* 5. Preço em Linha Única */
.wp-block-woocommerce-product-template .wc-block-components-product-price,
.wp-block-woocommerce-product-template .price,
.wc-block-grid__product-price,
.woocommerce ul.products li.product .price {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 2px 0 8px 0 !important;
    line-height: 1.1em !important;
    font-feature-settings: "tnum" on, "lnum" on !important;
}

/* 6. Botão CTA com Largura da Imagem + 5px a cada lado (Total +10px) */
.wp-block-woocommerce-product-template .wp-block-button,
.wp-block-woocommerce-product-template .wc-block-components-product-button,
.wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product .button {
    margin-top: auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.wp-block-woocommerce-product-template .wp-block-button__link,
.wp-block-woocommerce-product-template .wc-block-components-product-button button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.woocommerce ul.products li.product .button {
    width: calc(100% - 0px) !important; /* Preenche a largura da imagem + 5px em cada lado */
    max-width: calc(100% - 0px) !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
}

.wp-block-woocommerce-product-template .wp-block-button__link:hover,
.woocommerce ul.products li.product .button:hover {
    background-color: #27272a !important;
}

/* 7. Alvo Tátil Mobile-First (WCAG 2.1) */
@media (max-width: 768px) {
    .wp-block-woocommerce-product-template .wp-block-button__link,
    .woocommerce ul.products li.product .button {
        min-height: 48px !important; /* Garante área de toque sem falhas no ecrã tátil */
    }
}