/*
 * Vitalis Pets — componentes próprios (independentes do tema pai)
 * Selos de confiança, FAQ, blocos da PDP, barra fixa de compra e rodapé legal.
 * v1.0
 */

/* ── Selos de confiança (PDP e categorias) ───────────────────────── */
.vp-trust {
    display: grid;
    gap: 8px;
    margin: 14px 0 18px;
    padding: 12px 14px;
    list-style: none;
    background-color: var(--theme-trust-surface, #DCE8E0);
    border: 1px solid var(--theme-border, #E7E2D7);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.vp-trust__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--theme-ink-2, #4B544E);
}

.vp-trust__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--theme-trust, #2F5D49);
}

.vp-trust__titulo {
    font-family: var(--theme-font-heading, sans-serif);
    font-weight: 700;
    color: var(--theme-trust, #2F5D49);
}

.vp-trust__texto {
    color: var(--theme-ink-2, #4B544E);
}

/* Em telas largas o bloco vira 3 colunas — mas só no arquivo, onde há espaço.
   Na coluna estreita do resumo da PDP ele fica empilhado por padrão. */
@media (min-width: 1024px) {
    .vp-trust--archive {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

.vp-trust--archive {
    margin: 0 0 22px;
}

/* ── Blocos "por qué comprar" e "envío" na PDP ───────────────────── */
.vp-pdp-extra {
    display: grid;
    gap: 22px;
    margin: 34px 0 8px;
}

@media (min-width: 782px) {
    .vp-pdp-extra {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }
}

.vp-pdp-extra__titulo,
.vp-faq__titulo {
    margin: 0 0 12px;
    font-family: var(--theme-font-heading, sans-serif);
    font-size: 19px;
    font-weight: 800;
    color: var(--theme-ink, #202522);
}

.vp-porque {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.vp-porque__item {
    position: relative;
    padding-left: 26px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--theme-ink-2, #4B544E);
}

.vp-porque__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--theme-trust, #2F5D49);
    box-shadow: inset 0 0 0 4px var(--theme-surface, #FFFFFF);
    border: 1px solid var(--theme-trust, #2F5D49);
}

.vp-envio__texto {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--theme-ink-2, #4B544E);
}

/* ── FAQ nativa (details/summary) — zero JavaScript ──────────────── */
.vp-faq {
    margin: 30px 0 10px;
}

.vp-faq__item,
.wp-block-details {
    border-bottom: 1px solid var(--theme-border, #E7E2D7);
}

.vp-faq__item:first-of-type {
    border-top: 1px solid var(--theme-border, #E7E2D7);
}

.vp-faq__pergunta,
.wp-block-details summary {
    position: relative;
    display: block;
    padding: 16px 42px 16px 0;
    cursor: pointer;
    font-family: var(--theme-font-heading, sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-ink, #202522);
}

.vp-faq__pergunta::-webkit-details-marker,
.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.vp-faq__pergunta::after,
.wp-block-details summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    line-height: 1;
    color: var(--theme-brand-dark, #2F5D49);
}

.vp-faq__item[open] .vp-faq__pergunta::after,
.wp-block-details[open] summary::after {
    content: "–";
}

.vp-faq__resposta {
    padding: 0 8px 16px 0;
}

.vp-faq__resposta p,
.wp-block-details p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--theme-ink-2, #4B544E);
}

.wp-block-details p {
    margin-bottom: 16px;
}

/*
 * A barra fixa de compra (sticky add-to-cart) NÃO é estilizada aqui: o Woodmart
 * tem o recurso nativo (Theme Settings → Product page → Sticky add to cart) e
 * traz o CSS dele. Mantemos a implementação própria fora para não duplicar.
 */

/*
 * PDP no celular — a 1ª dobra era 100% imagem: título a 733px, preço a 999px e botão a 1049px
 * num viewport de 844px (medido com Playwright em 2026-09-27).
 *
 * A galeria do Woodmart é quadrada: no celular isso empurra preço e botão para fora da dobra.
 * Aqui o quadro principal vira 16:9 com `object-fit: cover` — o produto continua inteiro e
 * centralizado (a sobra da foto é o que é cortada), o quadro ocupa a largura toda, sem faixa
 * vazia nas laterais. Resultado medido: título 733 → 575px, preço 999 → 891px, botão 1049 → 941px.
 * O desktop não é afetado (a regra vive dentro do media query).
 */
@media (max-width: 767px) {
    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
    .single-product .woocommerce-product-gallery .wd-carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Cross-sell da PDP (includes/cross-sell.php) — respiro do bloco antes do FAQ e do rodapé. */
.single-product .related.products {
    margin-top: 40px;
}

/*
 * Tipografia es-ES nos botões (2026-09-27).
 *
 * O Woodmart aplica `text-transform: capitalize` aos botões, e em espanhol isso capitaliza
 * preposições e artigos no meio da frase: "Añadir Al Carrito", "Volver A La Tienda",
 * "Finalizar Compra". A convenção do espanhol é caixa de frase — só a primeira palavra
 * (e nomes próprios) em maiúscula. Desligar o `capitalize` devolve o texto correto sem
 * tocar em nenhum rótulo: o problema era só a renderização, a string já estava certa.
 *
 * `!important` é necessário: a regra do tema chega por seletor mais específico
 * (`html .wd-empty-block-btn`, `html .single_add_to_cart_button`, …). Verificado em produção:
 * sem ele o botão continuava "Volver A La Tienda".
 */
button,
.button,
input[type="submit"],
input[type="button"],
.btn {
    text-transform: none !important;
}


/* ---------------------------------------------------------------------------------------------
 * Página "Sobre Nosotros" (post 2498) — 2026-09-27.
 *
 * A página saiu do layout do demo (Elementor, 25 KB de conteúdo em inglês) e passou a ser texto
 * institucional em es-ES renderizado pelo editor clássico. Sem limite de largura, a linha corria
 * os 1400px do container e a leitura ficava cansativa; as seções também não tinham respiro entre
 * si. Medida de linha confortável fica entre 60 e 75 caracteres.
 */
.page-id-2498 .entry-content {
    max-width: 780px;
}

.page-id-2498 .entry-content h2 {
    margin-top: 2.2em;
    margin-bottom: 0.6em;
}

.page-id-2498 .entry-content h2:first-of-type {
    margin-top: 1.4em;
}

.page-id-2498 .entry-content p {
    margin-bottom: 1.1em;
    line-height: 1.7;
}

.page-id-2498 .entry-content ul {
    margin-bottom: 1.4em;
}

.page-id-2498 .entry-content li {
    margin-bottom: 0.35em;
}

/* ===========================================================================
 * Cards de categoria da home — contraste do título
 *
 * MEDIDO com ops/marca/medir-contraste-cards.mjs (luminância real da foto atrás
 * do texto, razão WCAG): o título herdava #333 direto sobre a imagem, SEM scrim
 * nenhum. Resultado: 2.44:1 em "Comederos & Bebederos" e 1.66:1 em um dos cards
 * — reprova (o mínimo para texto normal é 4.5:1), e é isso que fazia os nomes
 * parecerem "apagados".
 *
 * O design `mask-subcat` do tema até tem um degradê, mas ele só entra quando o
 * elemento está em `color-scheme-light` — e aqui não está, então nada era aplicado.
 *
 * Solução: degradê de ivory (a cor de fundo da marca) atrás do texto, mantendo o
 * texto escuro. A opacidade alta na faixa do título garante contraste em QUALQUER
 * foto, clara ou escura, e combina com a paleta do site.
 * ======================================================================== */

.wd-cats-element .cat-design-mask-subcat .wd-cat-content {
    background: linear-gradient(
        180deg,
        rgba(250, 248, 243, 0.95) 0%,
        rgba(250, 248, 243, 0.9) 30%,
        rgba(250, 248, 243, 0.55) 46%,
        rgba(250, 248, 243, 0) 66%
    );
}

.wd-cats-element .cat-design-mask-subcat .wd-entities-title,
.wd-cats-element .cat-design-mask-subcat .wd-entities-title a {
    color: var(--theme-ink, #202522);
}

/* Balanceia a quebra: sem isto "Comederos & Bebederos" quebra o "&" sozinho
   numa linha (3 linhas em vez de 2). */
.wd-cats-element .cat-design-mask-subcat .wd-entities-title {
    text-wrap: balance;
}

/* A pílula da contagem é branca: sem um contorno ela some no ivory do scrim. */
.wd-cats-element .cat-design-mask-subcat .wd-cat-count {
    box-shadow: 0 0 0 1px rgba(32, 37, 34, 0.1), 0 0 3px rgba(0, 0, 0, 0.12);
}