/* TP V4 — homepage sections */

/* ── Hero ────────────────────────────────────────────────────── */
.tp4-hero {
    position: relative;
    isolation: isolate;
    min-height: 32rem;
    display: flex;
    align-items: center;
    color: var(--tp4-c-white);
    padding-block: var(--tp4-s-20) var(--tp4-s-24);
    overflow: hidden;
}
/* Fundo fotográfico único (garagem/peças) — imagem própria do template, sob
   overlay escuro. Substitui o mosaico de miniaturas de stock (feio, queixa
   user 2026-08-02). Warm tones harmonizam com a cor de marca. */
.tp4-hero__bg {
    position: absolute; inset: 0; z-index: -3;
    background:
        linear-gradient(180deg, rgba(20,17,14,0.30), rgba(20,17,14,0.55)),
        url(../img/hero-bg.jpg) center 38% / cover no-repeat;
    background-color: var(--tp4-c-gray-900);
    transform: scale(1.02);
}
.tp4-hero__overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(15,14,12,0.58) 0%, rgba(15,14,12,0.80) 62%, rgba(15,14,12,0.94) 100%),
        radial-gradient(circle at 50% 26%, rgba(var(--tp4-c-brand-rgb), 0.22) 0%, transparent 58%);
}
.tp4-hero__content {
    text-align: center;
    max-width: 56rem;
}
.tp4-hero__eyebrow {
    display: inline-block;
    font-size: var(--tp4-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(255,255,255,0.12);
    padding: var(--tp4-s-2) var(--tp4-s-4);
    border-radius: var(--tp4-r-pill);
    margin-block-end: var(--tp4-s-5);
    font-weight: var(--tp4-fw-semi);
}
.tp4-hero__title {
    font-size: clamp(var(--tp4-fs-4xl), 5vw, var(--tp4-fs-6xl));
    line-height: 1.05;
    color: var(--tp4-c-white);
    margin-block-end: var(--tp4-s-5);
}
.tp4-hero__sub {
    font-size: var(--tp4-fs-lg);
    color: rgba(255,255,255,0.85);
    margin-block-end: var(--tp4-s-8);
}
.tp4-hero__search {
    display: flex;
    align-items: stretch;
    background: var(--tp4-c-white);
    border-radius: var(--tp4-r-pill);
    padding: var(--tp4-s-2);
    box-shadow: var(--tp4-shadow-lg);
    max-width: 40rem;
    margin: 0 auto var(--tp4-s-6);
    gap: var(--tp4-s-2);
}
.tp4-hero__search-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; color: var(--tp4-text-muted);
    flex-shrink: 0;
}
.tp4-hero__search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: var(--tp4-s-3) 0;
    font-size: var(--tp4-fs-base);
    color: var(--tp4-text);
}
.tp4-hero__search-input:focus { outline: none; box-shadow: none; }
.tp4-hero__search-btn { border-radius: var(--tp4-r-pill); flex-shrink: 0; }
.tp4-hero__quick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tp4-s-3);
    font-size: var(--tp4-fs-sm);
    color: rgba(255,255,255,0.75);
}
.tp4-hero__quick a {
    color: var(--tp4-c-white);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.3);
    text-underline-offset: 3px;
}
.tp4-hero__quick a:hover { color: var(--tp4-c-brand-soft); text-decoration-color: currentColor; }

/* ════════════════════════════════════════════════════════════════
 * 2026-08-01 — Redesign recife-aligned: tipografia + secções novas
 * (produtos em destaque, categorias com foto, marcas com logótipo).
 * ════════════════════════════════════════════════════════════════ */

/* ── Tipografia de secção — mais bold/industrial (estilo recife) ─── */
.tp4-section__title {
    font-family: var(--tp4-font-display);
    font-weight: var(--tp4-fw-black);
    letter-spacing: -0.02em;
    color: var(--tp4-text);
}
.tp4-section__eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--tp4-fs-xs); letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--tp4-c-brand);
    font-weight: var(--tp4-fw-bold); margin: 0 0 0.5rem;
}
.tp4-section__eyebrow svg { color: var(--tp4-c-brand); }

/* Header em linha: título à esquerda + botão/CTA à direita */
.tp4-section__head--row {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--tp4-s-6); max-width: none;
}
.tp4-section__head--row > div { max-width: 46rem; }
@media (max-width: 767px) {
    .tp4-section__head--row { flex-direction: column; align-items: flex-start; gap: var(--tp4-s-4); }
    .tp4-section__head--row .tp4-featured__all { align-self: stretch; justify-content: center; }
}

/* ── Faixa de confiança no hero ──────────────────────────────── */
.tp4-hero__trust {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.5rem 1.75rem; margin: var(--tp4-s-6) 0 0;
    padding: 0; list-style: none;
}
.tp4-hero__trust li {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-medium);
    color: rgba(255,255,255,0.9);
}
.tp4-hero__trust svg { color: var(--tp4-c-brand-soft); flex-shrink: 0; }

/* ── Hero: quadro de pesquisa avançada (substitui a caixa IA) ───── */
.tp4-herosearch {
    background: #fff;
    border-radius: var(--tp4-r-xl);
    box-shadow: var(--tp4-shadow-lg);
    padding: var(--tp4-s-6);
    max-width: 54rem;
    margin: 0 auto var(--tp4-s-6);
    text-align: left;
    color: var(--tp4-text);
}
.tp4-herosearch__head { margin-block-end: var(--tp4-s-5); }
.tp4-herosearch__title {
    display: flex; align-items: center; gap: 0.55rem;
    font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-black);
    font-size: var(--tp4-fs-xl); line-height: 1.15; color: var(--tp4-text);
    letter-spacing: -0.01em;
}
.tp4-herosearch__title svg { color: var(--tp4-c-brand); flex-shrink: 0; }
.tp4-herosearch__sub { display: block; font-size: var(--tp4-fs-sm); color: var(--tp4-text-muted); margin-block-start: 0.3rem; }

/* O form avançado dentro do card do hero — realce dos selects */
.tp4-herosearch { overflow: hidden; } /* clip defensivo: nada transborda o card */
/* Ano · Marca · Modelo em 3 colunas; o botão fica em linha própria (largura
   total) para os selects respirarem e os placeholders não cortarem. */
.tp4-herosearch .tp4-vehicle-form--adv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tp4-s-4);
    align-items: end;
}
.tp4-herosearch .tp4-vehicle-form--adv .tp4-vehicle-form__field { margin: 0; min-width: 0; }
.tp4-herosearch .tp4-vehicle-form--adv .tp4-vehicle-form__btn {
    grid-column: 1 / -1; justify-content: center; width: 100%;
}
@media (max-width: 640px) {
    .tp4-herosearch .tp4-vehicle-form--adv { grid-template-columns: 1fr; }
}
.tp4-herosearch .tp4-vehicle-form__field select,
.tp4-herosearch .tp4-vehicle-form__field input {
    height: 3rem; font-size: var(--tp4-fs-base);
    width: 100%; min-width: 0; text-overflow: ellipsis;
}
.tp4-herosearch .tp4-vehicle-form__btn { height: 3rem; font-weight: var(--tp4-fw-semi); }
/* GUARDA de overflow: selects com opções longas (nomes de modelo) forçavam a
   grelha a exceder o ecrã em mobile (grid-item precisa de min-width:0). */
.tp4-vehicle-form--adv .tp4-vehicle-form__field { min-width: 0; }
.tp4-vehicle-form__field select,
.tp4-vehicle-form__field input { width: 100%; min-width: 0; max-width: 100%; }

/* Linha secundária — pesquisa por referência */
.tp4-herosearch__ref {
    display: flex; align-items: center; gap: var(--tp4-s-3);
    margin-block-start: var(--tp4-s-4); padding-block-start: var(--tp4-s-4);
    border-top: 1px dashed var(--tp4-border);
    flex-wrap: wrap;
}
.tp4-herosearch__ref-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-semi);
    color: var(--tp4-text-soft); white-space: nowrap;
}
.tp4-herosearch__ref-label svg { color: var(--tp4-c-brand); }
.tp4-herosearch__ref-form { display: flex; flex: 1 1 auto; gap: var(--tp4-s-2); min-width: 16rem; }
.tp4-herosearch__ref-form input {
    flex: 1 1 auto; height: 2.6rem;
    border: 1px solid var(--tp4-border); border-radius: var(--tp4-r-md);
    padding: 0 var(--tp4-s-3); font-size: var(--tp4-fs-sm); color: var(--tp4-text);
    background: var(--tp4-c-gray-50);
}
.tp4-herosearch__ref-form input:focus { outline: 2px solid var(--tp4-c-brand-soft); border-color: var(--tp4-c-brand); background: #fff; }
.tp4-herosearch__ref-form .tp4-btn { height: 2.6rem; flex-shrink: 0; }
@media (max-width: 560px) {
    .tp4-herosearch__ref { flex-direction: column; align-items: stretch; }
    .tp4-herosearch__ref-form { min-width: 0; }
}

/* ── Hero: identificação por matrícula/VIN + garagem (2026-09-11) ─
   Sub-bloco em destaque ACIMA da cascata Ano→Marca→Modelo, dentro do
   mesmo card branco. País + matrícula + VIN + Pesquisar + "A minha garagem". */
.tp4-herosearch__id {
    background: linear-gradient(135deg, #fff7f2, var(--tp4-c-gray-50));
    border: 1px solid var(--tp4-c-brand-soft);
    border-radius: var(--tp4-r-lg);
    padding: var(--tp4-s-4) var(--tp4-s-5);
    margin-block-end: var(--tp4-s-5);
}
.tp4-herosearch__id-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-block-end: var(--tp4-s-3); }
.tp4-herosearch__id-title { font-weight: var(--tp4-fw-bold); font-size: var(--tp4-fs-base); color: var(--tp4-text); }
.tp4-herosearch__id-sub { font-size: var(--tp4-fs-sm); color: var(--tp4-text-muted); }
.tp4-herosearch__id-form {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--tp4-s-3);
    align-items: end;
}
.tp4-herosearch__id-form .tp4-vehicle-form__field { margin: 0; min-width: 0; }
.tp4-herosearch__id-form input { text-transform: uppercase; font-weight: var(--tp4-fw-semi); letter-spacing: 0.06em; }
.tp4-herosearch__id-form input::placeholder { text-transform: none; font-weight: 400; letter-spacing: 0; }
.tp4-herosearch__id-or {
    align-self: end; height: 3rem; display: inline-flex; align-items: center;
    font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-bold); text-transform: uppercase; color: var(--tp4-text-muted);
}
.tp4-herosearch__id-actions { grid-column: 1 / -1; display: flex; gap: var(--tp4-s-3); flex-wrap: wrap; }
.tp4-herosearch__id-actions .tp4-btn { height: 3rem; flex: 1 1 12rem; justify-content: center; }
.tp4-herosearch__id-actions .tp4-btn.is-busy { opacity: 0.7; pointer-events: none; }
.tp4-herosearch__id-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.35rem; padding: 0 0.4rem; margin-inline-start: 0.35rem;
    border-radius: var(--tp4-r-pill); background: var(--tp4-c-brand); color: #fff;
    font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-bold);
}
.tp4-herosearch__id-msg { margin: var(--tp4-s-2) 0 0; font-size: var(--tp4-fs-sm); color: var(--tp4-c-danger); }
.tp4-herosearch__id-msg:empty { display: none; }
/* 2026-09-11 — CHAPA DE MATRÍCULA (EU) + CHAPA DE VIN (metal) no hero.
   Prefixo .tp4-herosearch__id (0,3,0) ganha ao `.tp4-herosearch .tp4-vehicle-form__field input` (0,2,1). */
.tp4-herosearch__id .tp4-herosearch__id-cc select { height: 3.5rem; font-weight: var(--tp4-fw-semi); }
.tp4-herosearch__id-or { height: 3.5rem; }
.tp4-herosearch__id .tps-plate { position: relative; display: flex; align-items: stretch; height: 3.5rem; background: linear-gradient(180deg, #fdfdfd 0%, #f0f0f0 100%); border: 2px solid #1a1a1a; border-radius: 7px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.08); transition: box-shadow .18s ease, transform .18s ease; }
.tp4-herosearch__id .tps-plate:focus-within { box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 4px var(--tp4-c-brand-soft), 0 0 18px rgba(var(--tp4-c-brand-rgb), .25); transform: translateY(-1px); }
.tp4-herosearch__id .tps-plate-eu { flex: 0 0 34px; background: linear-gradient(180deg, #003399 0%, #002a7e 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0 3px; }
.tp4-herosearch__id .tps-plate-eu svg { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.tp4-herosearch__id .tps-plate-eu text { fill: #ffd700; font-family: Arial, sans-serif; font-weight: 700; font-size: 5.5px; }
.tp4-herosearch__id .tps-plate-cc { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: 0; color: #fff; }
.tp4-herosearch__id .tps-plate .tps-plate-in { flex: 1 1 auto; min-width: 0; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: linear-gradient(180deg, #fdfdfd 0%, #f4f4f4 100%); color: #0a0a0a; font-family: 'Courier New', 'Lucida Console', monospace; font-weight: 900; font-size: 24px; letter-spacing: .06em; text-align: center; text-transform: uppercase; padding: 0 12px; box-sizing: border-box; line-height: 1; }
.tp4-herosearch__id .tps-plate .tps-plate-in::placeholder { color: rgba(10,10,10,.28); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tp4-herosearch__id .tps-plate .tps-plate-in:focus { border: 0; outline: 0; box-shadow: none; background: linear-gradient(180deg, #fdfdfd 0%, #f4f4f4 100%); }
.tp4-herosearch__id .tps-plate-rivet { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a4a4a 0%, #1a1a1a 60%, #000 100%); box-shadow: 0 1px 1px rgba(255,255,255,.4); pointer-events: none; }
.tp4-herosearch__id .tps-plate-rivet.tl { top: 4px; left: 39px; } .tp4-herosearch__id .tps-plate-rivet.tr { top: 4px; right: 4px; }
.tp4-herosearch__id .tps-plate-rivet.bl { bottom: 4px; left: 39px; } .tp4-herosearch__id .tps-plate-rivet.br { bottom: 4px; right: 4px; }
.tp4-herosearch__id .tps-plate-shine { position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); pointer-events: none; }
.tp4-herosearch__id .tps-vinplate { position: relative; display: flex; flex-direction: column; justify-content: center; height: 3.5rem; background: linear-gradient(180deg, #d4d4d8 0%, #b0b3b8 30%, #c8cbd0 50%, #98a0a6 70%, #b8bbc1 100%); border: 1px solid #5a5e63; border-radius: 5px; padding: 5px 22px 4px; box-sizing: border-box; box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.25); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; }
.tp4-herosearch__id .tps-vinplate:focus-within { box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px var(--tp4-c-brand-soft), 0 0 18px rgba(var(--tp4-c-brand-rgb), .25); transform: translateY(-1px); }
.tp4-herosearch__id .tps-vinplate-lab { font-family: Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(20,20,20,.6); text-shadow: 0 1px 0 rgba(255,255,255,.5); line-height: 1; margin: 0 0 3px; text-align: center; }
.tp4-herosearch__id .tps-vinplate .tps-vinplate-in { width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: #1a1a1a; font-family: 'Courier New', 'Lucida Console', monospace; font-weight: 700; font-size: 17px; letter-spacing: .16em; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 -1px 0 rgba(0,0,0,.35); padding: 0; box-sizing: border-box; line-height: 1.1; }
.tp4-herosearch__id .tps-vinplate .tps-vinplate-in::placeholder { color: rgba(20,20,20,.32); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; text-shadow: none; }
.tp4-herosearch__id .tps-vinplate .tps-vinplate-in:focus { border: 0; outline: 0; box-shadow: none; background: transparent; }
.tp4-herosearch__id .tps-vinplate-n { position: absolute; bottom: 3px; right: 14px; font-family: Arial, Helvetica, sans-serif; font-size: 8px; color: rgba(20,20,20,.45); letter-spacing: .05em; text-shadow: 0 1px 0 rgba(255,255,255,.5); pointer-events: none; }
.tp4-herosearch__id .tps-vinplate-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0%, #c8c8c8 30%, #6a6a6a 70%, #2e2e2e 100%); box-shadow: inset 0 0 1px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.3); pointer-events: none; }
.tp4-herosearch__id .tps-vinplate-screw::after { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: linear-gradient(45deg, transparent 40%, rgba(0,0,0,.4) 45%, rgba(0,0,0,.4) 55%, transparent 60%); }
.tp4-herosearch__id .tps-vinplate-screw.tl { top: 4px; left: 5px; } .tp4-herosearch__id .tps-vinplate-screw.tr { top: 4px; right: 5px; }
.tp4-herosearch__id .tps-vinplate-screw.bl { bottom: 4px; left: 5px; } .tp4-herosearch__id .tps-vinplate-screw.br { bottom: 4px; right: 5px; }
.tp4-herosearch__id .tps-vinplate-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0) 0 2px, rgba(0,0,0,.025) 2px 3px); pointer-events: none; border-radius: inherit; }

/* ── 2026-09-11 — Estado «a identificar» (o decode demora 13-16 s) ─────────────
   O spinner, o pulso da chapa e o sub-texto vêm das classes GLOBAIS .tpg-* que o
   rail "A Minha Garagem" (tp-sync-client) injecta; aqui só o ajuste ao tema V4.
   As keyframes estão repetidas de propósito: se o rail não estiver presente (ex.
   plugin antigo) o spinner do hero continua a rodar. */
.tp4-herosearch__id .tpg-spin { display: inline-block; width: 1.05em; height: 1.05em; flex: 0 0 auto; vertical-align: -0.18em; transform-origin: 50% 50%; animation: tpg-spin .85s linear infinite; }
.tp4-herosearch__id-actions .tp4-btn.tpg-busy { cursor: progress; opacity: .92; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.tp4-herosearch__id-actions .tp4-btn.tpg-busy .tpg-busy-lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp4-herosearch__id-msg.tpg-busy-hint { color: var(--tp4-text-muted) !important; font-weight: var(--tp4-fw-semi); }
.tp4-herosearch__id .tps-plate.tpg-plate-busy,
.tp4-herosearch__id .tps-vinplate.tpg-plate-busy { outline: 2px solid var(--tp4-c-brand); outline-offset: 2px; }
.tp4-herosearch__id [data-tpg-lock] { cursor: progress; opacity: .9; }
/* 2026-09-11 — o display:inline-flex do badge anulava o [hidden] do JS (mostrava «0»). */
.tp4-herosearch__id-n[hidden] { display: none; }
@keyframes tpg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tp4-herosearch__id .tpg-spin { animation: none; }
}
@media (max-width: 640px) {
    .tp4-herosearch__id-form { grid-template-columns: 1fr; }
    .tp4-herosearch__id-or { display: none; }
}

/* ── Peças em destaque — cards à medida (estilo recife) ──────── */
.tp4-featured { background: var(--tp4-c-white); }
.tp4-featured__all { flex-shrink: 0; white-space: nowrap; }
.tp4-featured__cta {
    display: none; margin: var(--tp4-s-8) auto 0; width: fit-content;
}
@media (max-width: 767px) { .tp4-featured__cta { display: inline-flex; } }

.tp4-fgrid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--tp4-s-5); margin-block-start: var(--tp4-s-8);
}
/* 2026-09-21 — o front-page.php passou de 8 para 16 cartões (dono: «mais 2 ou
 * 3 linhas»). Colunas por largura e linhas que fecham inteiras:
 *   ≥1024 px  4 col → 16 cartões = 4 linhas (eram 2)
 *   768-1023  3 col → 16 não fecha (5,33): esconde-se o 16.º ⇒ 15 = 5 linhas
 *   421-767   2 col → 16 = 8 linhas
 *   ≤420 px   passa de 1 para 2 col (16 = 8 linhas). A 1 coluna, 16 cartões
 *             dariam ~7 000 px de scroll (8 já davam 3 563 px a 390 px); a 2
 *             colunas a secção fica MAIS CURTA do que era com 8 (~2 300 px).
 *             O cartão compacta-se (padding, nome, preço, seta) para caber em
 *             ~165 px. Abaixo de 340 px volta a 1 coluna e mostra só 8.
 * Se mudares o número no PHP ($tp4_fmax), revê os nth-child daqui. */
@media (max-width: 1023px) {
    .tp4-fgrid { grid-template-columns: repeat(3, 1fr); }
    .tp4-fgrid .tp4-fcard:nth-child(n+16) { display: none; }
}
@media (max-width: 767px)  {
    .tp4-fgrid { grid-template-columns: repeat(2, 1fr); gap: var(--tp4-s-4); }
    .tp4-fgrid .tp4-fcard:nth-child(n+16) { display: flex; }
}
@media (max-width: 420px)  {
    .tp4-fgrid { grid-template-columns: repeat(2, 1fr); gap: var(--tp4-s-3); }
    .tp4-fgrid .tp4-fcard { border-radius: var(--tp4-r-lg); }
    .tp4-fgrid .tp4-fcard__body { padding: var(--tp4-s-3); gap: 0.2rem; }
    .tp4-fgrid .tp4-fcard__name { font-size: var(--tp4-fs-sm); }
    .tp4-fgrid .tp4-fcard__ref { font-size: 0.66rem; }
    .tp4-fgrid .tp4-fcard__price { font-size: var(--tp4-fs-base); }
    .tp4-fgrid .tp4-fcard__cta { width: 1.8rem; height: 1.8rem; }
    .tp4-fgrid .tp4-fcard__badge { font-size: 0.6rem; top: var(--tp4-s-2); left: var(--tp4-s-2); }
}
@media (max-width: 339px)  {
    .tp4-fgrid { grid-template-columns: 1fr; }
    .tp4-fgrid .tp4-fcard:nth-child(n+9) { display: none; }
}

.tp4-fcard {
    display: flex; flex-direction: column;
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-xl);
    overflow: hidden; color: var(--tp4-text);
    transition: transform var(--tp4-dur) var(--tp4-ease-out),
                box-shadow var(--tp4-dur) var(--tp4-ease-out),
                border-color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-fcard:hover {
    transform: translateY(-4px);
    border-color: var(--tp4-c-brand);
    box-shadow: var(--tp4-shadow-md);
    color: var(--tp4-text);
}
.tp4-fcard__media {
    position: relative; aspect-ratio: 4 / 3; width: 100%;
    background: var(--tp4-c-gray-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tp4-fcard__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--tp4-dur-slow) var(--tp4-ease-out);
}
.tp4-fcard:hover .tp4-fcard__media img { transform: scale(1.06); }
.tp4-fcard__ph { display: none; color: var(--tp4-c-gray-400); }
.tp4-fcard__media.is-fallback { background: linear-gradient(135deg, var(--tp4-c-gray-100), var(--tp4-c-brand-soft)); }
.tp4-fcard__media.is-fallback .tp4-fcard__ph { display: inline-flex; }
.tp4-fcard__badge {
    position: absolute; top: var(--tp4-s-3); left: var(--tp4-s-3);
    background: rgba(15,14,12,0.82); color: #fff;
    font-size: 0.68rem; font-weight: var(--tp4-fw-semi);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.22rem 0.5rem; border-radius: var(--tp4-r-pill);
    backdrop-filter: blur(2px);
}
.tp4-fcard__body {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: var(--tp4-s-4);
    flex: 1 1 auto;
}
.tp4-fcard__vehicle {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: var(--tp4-fs-xs); color: var(--tp4-c-brand);
    font-weight: var(--tp4-fw-semi); text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp4-fcard__vehicle svg { flex-shrink: 0; }
.tp4-fcard__name {
    font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-bold);
    font-size: var(--tp4-fs-base); line-height: 1.25; color: var(--tp4-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.5em;
}
.tp4-fcard__ref {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.72rem; color: var(--tp4-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp4-fcard__foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-block-start: auto; padding-block-start: var(--tp4-s-3);
}
.tp4-fcard__price {
    font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-black);
    font-size: var(--tp4-fs-lg); color: var(--tp4-c-gray-900);
}
.tp4-fcard__price del { color: var(--tp4-text-muted); font-weight: var(--tp4-fw-normal); font-size: 0.8em; margin-right: 0.25rem; }
.tp4-fcard__price ins { text-decoration: none; }
.tp4-fcard__cta {
    width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0;
    background: var(--tp4-c-brand-soft); color: var(--tp4-c-brand);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--tp4-dur) var(--tp4-ease-out), color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-fcard:hover .tp4-fcard__cta { background: var(--tp4-c-brand); color: #fff; }

/* ── Ponto 7 · destaques: 2.ª foto em crossfade no hover ───────────────────
 * 2026-09-13 — combinado com o Lote 3: a 1.ª foto ganha .tp4-fcard__img--1 e
 * a 2.ª .tp4-fcard__img--2 com `data-tp4-hover` e SEM `src` (0 pedidos até ao
 * primeiro pointerenter; o site.js preenche o src). O selector de opacidade
 * exige [src] para o cartão não «piscar» vazio antes de a imagem existir.
 * Em touch não há :hover ⇒ a 2.ª foto nunca é pedida (por desenho).
 */
.tp4-fcard__media { position: relative; overflow: hidden; }
.tp4-fcard__img--2 {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    /* o transform vem do `.tp4-fcard__media img` (scale no hover) — repetido
       aqui porque esta regra é posterior e o shorthand substituiria o dele. */
    transition: opacity 0.35s var(--tp4-ease-out),
                transform var(--tp4-dur-slow) var(--tp4-ease-out);
}
.tp4-fcard:hover .tp4-fcard__img--2[src] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .tp4-fcard__img--2 { transition: none; }
}
/* Preço — o cartão mostrava só a seta: o plugin wcfad embrulha o
 * get_price_html() em <p class="wcfad-role-price-standard"> e o mu-plugin da
 * loja injecta `font-size:0 !important` nessa classe. O Lote 3 deixa de passar
 * pelo filtro do wcfad; estas regras são a rede de segurança para o caso de
 * algum embrulho sobreviver (fica legível em vez de invisível). */
.tp4-fcard__price { display: block; }
.tp4-fcard__price > p,
.tp4-fcard__price .wcfad-role-price,
.tp4-fcard__price .wcfad-role-price-standard {
    display: inline;
    margin: 0;
    font-size: var(--tp4-fs-lg) !important;
    font-weight: inherit;
    color: inherit;
}

/* Passos numerados no form de pesquisa avançada (Ano→Marca→Modelo) */
.tp4-vehicle-form__step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: var(--tp4-c-brand); color: #fff;
    font-size: 0.68rem; font-weight: var(--tp4-fw-bold);
    margin-right: 0.35rem; vertical-align: middle;
}
.tp4-vehicle-form--adv .tp4-vehicle-form__field label {
    display: flex; align-items: center; font-weight: var(--tp4-fw-semi);
}
/* Feedback quando a marca é obrigatória e o user carrega em Procurar */
@keyframes tp4Shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.tp4-shake { animation: tp4Shake 0.42s var(--tp4-ease); border-color: #ef4444 !important; }

/* ── Categorias com FOTO (estilo recife) ─────────────────────── */
.tp4-cats { background: linear-gradient(180deg, var(--tp4-c-gray-50), #fff); }
.tp4-cats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--tp4-s-5); margin-block-start: var(--tp4-s-8);
}
@media (max-width: 1023px) { .tp4-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .tp4-cats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--tp4-s-4); } }
@media (max-width: 420px)  { .tp4-cats__grid { grid-template-columns: 1fr; } }

.tp4-cat2 {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-xl);
    overflow: hidden;
    color: var(--tp4-text);
    transition: transform var(--tp4-dur) var(--tp4-ease-out),
                box-shadow var(--tp4-dur) var(--tp4-ease-out),
                border-color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-cat2:hover {
    transform: translateY(-4px);
    border-color: var(--tp4-c-brand);
    box-shadow: var(--tp4-shadow-md);
    color: var(--tp4-text);
}
.tp4-cat2__media {
    position: relative;
    aspect-ratio: 4 / 3; width: 100%;
    background: var(--tp4-c-gray-100);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tp4-cat2__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform var(--tp4-dur-slow) var(--tp4-ease-out);
}
.tp4-cat2:hover .tp4-cat2__media img { transform: scale(1.06); }
.tp4-cat2__ico {
    width: 3.5rem; height: 3.5rem; border-radius: var(--tp4-r-lg);
    background: var(--tp4-c-brand-soft); color: var(--tp4-c-brand);
    display: none; align-items: center; justify-content: center;
}
/* Fallback (sem foto ou erro): esconde img-slot, mostra ícone em gradiente suave */
.tp4-cat2__ico--fb { display: none; }
.tp4-cat2__media.is-fallback { background: linear-gradient(135deg, var(--tp4-c-gray-100), var(--tp4-c-brand-soft)); }
.tp4-cat2__media.is-fallback .tp4-cat2__ico--fb { display: inline-flex; }
.tp4-cat2--icon .tp4-cat2__media { aspect-ratio: 16 / 7; }

.tp4-cat2__body {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: var(--tp4-s-4) var(--tp4-s-4) var(--tp4-s-5);
    flex: 1 1 auto;
}
.tp4-cat2__name {
    font-family: var(--tp4-font-display);
    font-weight: var(--tp4-fw-bold);
    font-size: var(--tp4-fs-base); line-height: 1.2;
    color: var(--tp4-text);
}
.tp4-cat2__qty { font-size: var(--tp4-fs-sm); color: var(--tp4-text-muted); }
.tp4-cat2__go {
    position: absolute; top: var(--tp4-s-3); right: var(--tp4-s-3);
    width: 2rem; height: 2rem; border-radius: 50%;
    background: rgba(255,255,255,0.92); color: var(--tp4-c-brand);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--tp4-shadow-sm);
    transform: translateX(4px); opacity: 0;
    transition: transform var(--tp4-dur) var(--tp4-ease-out), opacity var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-cat2:hover .tp4-cat2__go { transform: translateX(0); opacity: 1; }

/* ── Ponto 3 · modos das imagens de categoria ──────────────────────────────
 * 2026-09-13 — `category_image_mode` (stock|generic|icon). Combinado com o
 * Lote 3: o cartão ganha `.tp4-cat2--img` no modo «genérico» (aceite também o
 * sinónimo `.tp4-cat2--generic`) e a <img> ganha `.tp4-cat2__img`; o modo
 * «ícone» reutiliza a classe `.tp4-cat2--icon` que já existia.
 * O conjunto genérico é 800×600 com fundo neutro #f4f4f2 — o mesmo fundo é
 * pintado na media para que o cartão não mostre cinzento enquanto a imagem
 * carrega (loading="lazy") nem barras se a proporção não for exacta.
 */
.tp4-cat2--img .tp4-cat2__media,
.tp4-cat2--generic .tp4-cat2__media {
    background: #f4f4f2;
    aspect-ratio: 4 / 3;          /* altura consistente entre os 8 cartões */
}
.tp4-cat2__img,
.tp4-cat2--img .tp4-cat2__media img,
.tp4-cat2--generic .tp4-cat2__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Véu inferior — só entra se o Lote 3 sobrepuser o rótulo à imagem; sem
   .tp4-cat2__name dentro da media o :has() não casa e não há véu. */
.tp4-cat2--img .tp4-cat2__media:has(.tp4-cat2__name)::after,
.tp4-cat2--generic .tp4-cat2__media:has(.tp4-cat2__name)::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
    background: linear-gradient(180deg, rgba(15, 14, 12, 0) 0%, rgba(15, 14, 12, 0.72) 100%);
    pointer-events: none;
}
.tp4-cat2--img .tp4-cat2__media .tp4-cat2__name,
.tp4-cat2--generic .tp4-cat2__media .tp4-cat2__name {
    position: absolute; left: var(--tp4-s-4); right: var(--tp4-s-4); bottom: var(--tp4-s-3);
    z-index: 1; color: #fff;                 /* 11,7:1 sobre o fim do véu */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Modo «só ícone»: ícone centrado sobre fundo soft da marca. O `:not(.is-fallback)`
   preserva EXACTAMENTE o aspecto actual dos cartões de fallback (gradiente). */
.tp4-cat2--icon .tp4-cat2__media:not(.is-fallback) { background: var(--tp4-c-brand-soft); }
.tp4-cat2--icon .tp4-cat2__media:not(.is-fallback) .tp4-cat2__ico {
    display: inline-flex;
    background: var(--tp4-c-white);          /* o chip tem de ler sobre o soft */
    box-shadow: var(--tp4-shadow-sm);
}

/* ── Marcas com logótipo (estilo recife "procure por marca") ──── */
.tp4-brands__grid {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: var(--tp4-s-4); margin-block-start: var(--tp4-s-8);
}
@media (max-width: 1199px) { .tp4-brands__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 767px)  { .tp4-brands__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .tp4-brands__grid { grid-template-columns: repeat(2, 1fr); } }

.tp4-brandcard {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: var(--tp4-s-5) var(--tp4-s-3);
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-lg);
    color: var(--tp4-text);
    text-align: center;
    transition: transform var(--tp4-dur) var(--tp4-ease-out),
                box-shadow var(--tp4-dur) var(--tp4-ease-out),
                border-color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-brandcard:hover {
    transform: translateY(-3px);
    border-color: var(--tp4-c-brand);
    box-shadow: var(--tp4-shadow-sm);
    color: var(--tp4-text);
}
.tp4-brandcard__logo {
    position: relative;
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tp4-brandcard__logo img { width: 68%; height: 68%; object-fit: contain; display: block; }
.tp4-brandcard__ini {
    display: none;
    font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-black);
    font-size: var(--tp4-fs-base); color: #fff; letter-spacing: 0.02em;
}
.tp4-brandcard__logo.is-fb {
    background: linear-gradient(135deg, var(--b1, #888), var(--b2, #555));
    border-color: transparent;
}
.tp4-brandcard__logo.is-fb img { display: none; }
.tp4-brandcard__logo.is-fb .tp4-brandcard__ini { display: inline-flex; }
.tp4-brandcard__name {
    font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-semi);
    line-height: 1.15; color: var(--tp4-text);
}

/* ── Peças disponíveis por viatura (chips animados + contador) ── */
.tp4-vparts {
    margin-block-start: var(--tp4-s-5);
    border-top: 1px dashed var(--tp4-border);
    padding-block-start: var(--tp4-s-5);
    animation: tp4FadeIn 320ms var(--tp4-ease-out);
}
.tp4-vparts__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-block-end: var(--tp4-s-3); }
.tp4-vparts__count { font-size: var(--tp4-fs-base); color: var(--tp4-text); }
.tp4-vparts__count strong {
    font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-black);
    color: var(--tp4-c-brand); font-size: var(--tp4-fs-xl); margin-right: 0.15rem;
}
.tp4-vparts__hint { font-size: var(--tp4-fs-sm); color: var(--tp4-text-muted); }
.tp4-vparts__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tp4-vparts__loading { color: var(--tp4-text-muted); font-size: var(--tp4-fs-sm); display: inline-flex; align-items: center; }
.tp4-vparts__loading::before {
    content: ""; width: 14px; height: 14px;
    border: 2px solid var(--tp4-c-gray-200); border-top-color: var(--tp4-c-brand);
    border-radius: 50%; animation: tp4Spin 0.9s linear infinite; margin-right: 0.5rem;
}
.tp4-vparts__chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.8rem; border-radius: var(--tp4-r-pill);
    background: var(--tp4-c-gray-50); border: 1px solid var(--tp4-border);
    color: var(--tp4-text); font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-medium);
    text-decoration: none;
    opacity: 0; transform: translateY(6px) scale(0.96);
    animation: tp4ChipIn 0.34s var(--tp4-ease-out) forwards;
    animation-delay: calc(var(--i, 0) * 32ms);
    transition: background var(--tp4-dur) var(--tp4-ease-out), border-color var(--tp4-dur) var(--tp4-ease-out), color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-vparts__chip:hover { background: var(--tp4-c-brand-soft); border-color: var(--tp4-c-brand); color: var(--tp4-c-brand-hover); }
.tp4-vparts__chip--more { background: var(--tp4-c-brand); color: #fff; border-color: var(--tp4-c-brand); font-weight: var(--tp4-fw-semi); }
.tp4-vparts__chip--more:hover { background: var(--tp4-c-brand-hover); color: #fff; }
@keyframes tp4ChipIn { to { opacity: 1; transform: none; } }

/* ── Vehicle cascade card ────────────────────────────────────── */
.tp4-vehicle-card {
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-xl);
    padding: var(--tp4-s-8);
    box-shadow: var(--tp4-shadow);
    margin-block-start: -5rem;       /* overlap hero */
    position: relative;
    z-index: 2;
}
.tp4-vehicle-card__head { margin-block-end: var(--tp4-s-6); }
.tp4-vehicle-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp4-s-4);
}
.tp4-vehicle-form__field { display: flex; flex-direction: column; gap: var(--tp4-s-2); }
.tp4-vehicle-form__field label {
    font-size: var(--tp4-fs-xs);
    font-weight: var(--tp4-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tp4-text-muted);
}
.tp4-vehicle-form__field select, .tp4-vehicle-form__field input {
    height: 2.75rem;
}
.tp4-vehicle-form__btn { height: 2.75rem; }

/* ── Vehicle form ADVANCED (3-field cascade Ano → Marca → Modelo) ── */
.tp4-vehicle-form--adv {
    grid-template-columns: 1fr 1fr 1fr auto;
    align-items: end;
    gap: var(--tp4-s-3);
}
.tp4-vehicle-form--adv .tp4-vehicle-form__btn {
    align-self: stretch;
    padding-inline: 1.5rem;
    gap: 0.4rem;
}
.tp4-vehicle-form--adv .tp4-vehicle-form__field { gap: 0.3rem; }
.tp4-vehicle-form--adv .tp4-vehicle-form__field label {
    display: flex; align-items: center; gap: 0.4rem;
}

/* 2026-07-31: dupla-classe p/ ganhar ao responsive.css (min-width:40rem → 4-col,
   mesma especificidade + carrega depois). Sem isto o form ficava 4-col em 640-768. */
@media (max-width: 768px) {
    .tp4-vehicle-form.tp4-vehicle-form--adv { grid-template-columns: 1fr 1fr; }
    .tp4-vehicle-form.tp4-vehicle-form--adv .tp4-vehicle-form__btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .tp4-vehicle-form.tp4-vehicle-form--adv { grid-template-columns: 1fr; }
}

/* ── Category grid ───────────────────────────────────────────── */
.tp4-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tp4-s-4);
}
.tp4-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-lg);
    padding: var(--tp4-s-6);
    transition: border-color var(--tp4-dur) var(--tp4-ease), transform var(--tp4-dur) var(--tp4-ease), box-shadow var(--tp4-dur) var(--tp4-ease);
    color: var(--tp4-text);
}
.tp4-cat-card:hover {
    border-color: var(--tp4-c-brand);
    transform: translateY(-2px);
    box-shadow: var(--tp4-shadow-md);
    color: var(--tp4-text);
}
.tp4-cat-card__icon {
    width: 3rem; height: 3rem;
    background: var(--tp4-c-brand-soft);
    color: var(--tp4-c-brand);
    border-radius: var(--tp4-r-md);
    margin-block-end: var(--tp4-s-4);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-cat-card:hover .tp4-cat-card__icon {
    transform: rotate(-6deg) scale(1.08);
}
.tp4-cat-card__icon svg { stroke-width: 1.5; }
.tp4-cat-card__title {
    font-size: var(--tp4-fs-lg);
    margin-block-end: var(--tp4-s-1);
}
.tp4-cat-card__desc {
    font-size: var(--tp4-fs-sm);
    color: var(--tp4-text-muted);
    margin-block-end: var(--tp4-s-3);
    flex-grow: 1;
}
.tp4-cat-card__more {
    font-size: var(--tp4-fs-sm);
    font-weight: var(--tp4-fw-semi);
    color: var(--tp4-c-brand);
    margin-block-start: auto;
}

/* ── Trust bar ───────────────────────────────────────────────── */
.tp4-trust {
    background: var(--tp4-c-gray-900);
    color: var(--tp4-c-white);
    padding-block: var(--tp4-s-10);
}
.tp4-trust__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--tp4-s-8);
}
.tp4-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tp4-s-1);
    text-align: center;
}
.tp4-trust__icon {
    width: 3.25rem; height: 3.25rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--tp4-c-brand-soft);
    border-radius: var(--tp4-r-pill);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.4rem;
}
.tp4-trust__icon svg { stroke-width: 1.6; }
.tp4-trust__value {
    font-family: var(--tp4-font-display);
    font-size: var(--tp4-fs-3xl);
    font-weight: var(--tp4-fw-black);
    background: linear-gradient(135deg, var(--tp4-c-brand) 0%, var(--tp4-c-brand-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tp4-trust__label {
    font-size: var(--tp4-fs-sm);
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--tp4-fw-medium);
}

/* ── Brand bar ───────────────────────────────────────────────── */
.tp4-brand-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp4-s-3);
    justify-content: center;
}
.tp4-brand-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--tp4-s-3) var(--tp4-s-5);
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-pill);
    font-size: var(--tp4-fs-sm);
    font-weight: var(--tp4-fw-semi);
    color: var(--tp4-text);
    transition: border-color var(--tp4-dur) var(--tp4-ease), background var(--tp4-dur) var(--tp4-ease), color var(--tp4-dur) var(--tp4-ease);
}
.tp4-brand-chip:hover {
    border-color: var(--tp4-c-brand);
    background: var(--tp4-c-brand-soft);
    color: var(--tp4-c-brand-hover);
}

/* ── Banner (VFV CTA / promo «A peça que procura ao melhor preço») ──
 * 2026-09-21 — dono: «a parte verde não está proporcional». Medido a 1440 px
 * antes: 530 px de altura (padding 80/80 vs 96/96 das secções vizinhas),
 * título a 48 px em 2 linhas (as outras secções usam 36 px), subtítulo a
 * 16 px (vizinhas 18 px) e a coluna direita (487 px) só com um círculo de
 * 512 px cortado em cima e à direita. Agora:
 *   · padding vertical = --tp4-section-py (64 mobile / 96 desktop), como as
 *     secções à volta (Marcas e FAQ);
 *   · título na escala do template (3xl mobile → 4xl ≥640), subtítulo lg;
 *   · o visual é uma ilustração contida (anéis + ícone), centrada e sem
 *     bleed, que escala com a coluna.
 * GOTCHA: responsive.css carrega DEPOIS desta folha e ainda traz regras
 * antigas para o banner (padding s-20 ≥768, título clamp até 5xl ≥1024,
 * shape 32rem). Como só se toca neste ficheiro, as regras abaixo ganham por
 * especificidade (section.tp4-banner / .tp4-banner .tp4-banner__x), não por
 * ordem — não baixar a especificidade sem limpar o responsive.css. */
section.tp4-banner {
    background: linear-gradient(135deg, var(--tp4-c-accent) 0%, #6d8056 100%);
    color: var(--tp4-c-white);
    padding-block: var(--tp4-section-py);
    overflow: hidden;
}
.tp4-banner .tp4-banner__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp4-s-8);
    align-items: center;
}
.tp4-banner .tp4-banner__copy { max-width: 46rem; }
.tp4-banner__eyebrow {
    display: inline-block;
    font-size: var(--tp4-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(255,255,255,0.18);
    padding: var(--tp4-s-1) var(--tp4-s-3);
    border-radius: var(--tp4-r-pill);
    margin-block-end: var(--tp4-s-4);
    font-weight: var(--tp4-fw-semi);
}
.tp4-banner .tp4-banner__title {
    color: var(--tp4-c-white);
    font-size: var(--tp4-fs-3xl);          /* = .tp4-section__title (mobile) */
    line-height: var(--tp4-lh-tight);
    margin-block-end: var(--tp4-s-3);
}
.tp4-banner .tp4-banner__sub {
    font-size: var(--tp4-fs-lg);           /* = .tp4-section__sub */
    line-height: var(--tp4-lh-base);
    color: rgba(255,255,255,0.9);
    margin-block-end: var(--tp4-s-6);
    max-width: 36rem;
}
.tp4-banner__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--tp4-s-2);
    margin-block-end: var(--tp4-s-8);
}
.tp4-banner__bullets li {
    display: flex; align-items: flex-start; gap: var(--tp4-s-3);
    font-size: var(--tp4-fs-base);
    color: rgba(255,255,255,0.95);
}
.tp4-check {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    font-size: var(--tp4-fs-sm);
    font-weight: var(--tp4-fw-bold);
}
/* Visual: escondido em mobile (o texto ocupa a largura toda); a partir de
 * 640 px (responsive.css põe a grelha a 1.4fr 1fr) mostra a ilustração
 * centrada na coluna. */
.tp4-banner .tp4-banner__visual {
    position: relative;
    min-height: 0;
    display: none;
    align-items: center; justify-content: center;
}
.tp4-banner .tp4-banner__shape {
    position: relative; right: auto; bottom: auto;   /* já não bleed */
    width: min(100%, 18rem); height: auto; aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.10);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* anéis exteriores (o antigo «círculo dentro do círculo», mas contido) */
    box-shadow: 0 0 0 1.25rem rgba(255,255,255,0.05), 0 0 0 2.5rem rgba(255,255,255,0.03);
}
.tp4-banner .tp4-banner__shape::before {
    content: ''; position: absolute; inset: 16%;
    width: auto; height: auto; right: auto; top: auto;
    background: rgba(255,255,255,0.10);
    border-radius: 50%;
}
.tp4-banner .tp4-banner__shape svg {
    position: relative; width: 44%; height: 44%;
    color: rgba(255,255,255,0.95);
}
@media (min-width: 40rem) {
    .tp4-banner .tp4-banner__visual { display: flex; }
    .tp4-banner .tp4-banner__title { font-size: var(--tp4-fs-4xl); }   /* = .tp4-section__title ≥640 */
    .tp4-banner .tp4-banner__grid { grid-template-columns: 1.4fr 1fr; gap: var(--tp4-s-12); }
}
@media (min-width: 64rem) {
    /* a coluna do texto encosta ao container como as secções vizinhas; a
       ilustração fica a ~18rem (+anéis), proporcional aos ~300 px de texto */
    .tp4-banner .tp4-banner__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ── FAQ accordion ───────────────────────────────────────────── */
.tp4-faq { display: flex; flex-direction: column; gap: var(--tp4-s-3); }
.tp4-faq__item {
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-lg);
    overflow: hidden;
    transition: border-color var(--tp4-dur) var(--tp4-ease);
}
.tp4-faq__item[open] { border-color: var(--tp4-border-strong); }
.tp4-faq__q {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--tp4-s-4);
    padding: var(--tp4-s-5) var(--tp4-s-6);
    cursor: pointer;
    font-weight: var(--tp4-fw-semi);
    font-size: var(--tp4-fs-base);
    color: var(--tp4-text);
    list-style: none;
}
.tp4-faq__q::-webkit-details-marker { display: none; }
.tp4-faq__chev { transition: transform var(--tp4-dur) var(--tp4-ease); color: var(--tp4-text-muted); }
.tp4-faq__item[open] .tp4-faq__chev { transform: rotate(180deg); color: var(--tp4-c-brand); }
.tp4-faq__a {
    padding: 0 var(--tp4-s-6) var(--tp4-s-5);
    color: var(--tp4-text-soft);
    line-height: var(--tp4-lh-base);
}

/* ── CTA strip ───────────────────────────────────────────────── */
.tp4-cta-strip {
    background: var(--tp4-c-gray-900);
    color: var(--tp4-c-white);
    padding-block: var(--tp4-s-12);
}
.tp4-cta-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp4-s-6);
    align-items: center;
}
.tp4-cta-strip__title {
    color: var(--tp4-c-white);
    font-size: var(--tp4-fs-2xl);
    margin-block-end: var(--tp4-s-1);
}
.tp4-cta-strip__sub {
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.tp4-cta-strip__actions {
    display: flex;
    gap: var(--tp4-s-3);
    flex-wrap: wrap;
}
/* Ghost variant em CTA strip (fundo escuro) — texto branco sempre visível */
.tp4-cta-strip .tp4-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tp4-cta-strip .tp4-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.50);
}
.tp4-cta-strip .tp4-btn--ghost svg { color: #25D366; }

/* ── Footer ──────────────────────────────────────────────────── */
.tp4-footer {
    background: #16161a;
    color: var(--tp4-c-gray-200);
    padding-block: var(--tp4-s-16) var(--tp4-s-8);
}
.tp4-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tp4-s-10);
    margin-block-end: var(--tp4-s-12);
}
.tp4-footer__brand-name {
    font-family: var(--tp4-font-display);
    font-weight: var(--tp4-fw-bold);
    font-size: var(--tp4-fs-xl);
    color: var(--tp4-c-white);
    display: block;
    margin-block: var(--tp4-s-4) var(--tp4-s-2);
}
.tp4-footer__tag {
    color: var(--tp4-c-gray-300);
    font-size: var(--tp4-fs-sm);
    margin-block-end: var(--tp4-s-5);
}
.tp4-footer__socials {
    display: flex;
    gap: var(--tp4-s-2);
}
.tp4-socbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    color: var(--tp4-c-gray-200);
    font-weight: var(--tp4-fw-bold);
    font-size: var(--tp4-fs-sm);
    transition: background var(--tp4-dur) var(--tp4-ease), color var(--tp4-dur) var(--tp4-ease);
}
.tp4-socbtn:hover { background: var(--tp4-c-brand); color: var(--tp4-c-white); }
.tp4-footer__col-title {
    color: var(--tp4-c-white);
    font-size: var(--tp4-fs-sm);
    font-weight: var(--tp4-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: var(--tp4-s-4);
}
.tp4-footer__list { display: flex; flex-direction: column; gap: var(--tp4-s-2); }
.tp4-footer__list a {
    color: var(--tp4-c-gray-300);
    font-size: var(--tp4-fs-sm);
}
.tp4-footer__list a:hover { color: var(--tp4-c-white); }
.tp4-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-block-start: var(--tp4-s-6);
    display: flex;
    flex-direction: column;
    gap: var(--tp4-s-2);
    color: var(--tp4-c-gray-400);
    font-size: var(--tp4-fs-xs);
}
.tp4-footer__bottom p { margin: 0; }
.tp4-footer__legal code {
    background: rgba(255,255,255,0.08);
    color: var(--tp4-c-gray-200);
}

/* ── Footer iteration 6 — real data + 4-col grid + about + meta + badges ── */
.tp4-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; }
/* 2026-07-31: prefixo .tp4-footer p/ ganhar ao responsive.css (min-width:40rem → 4-col). */
@media (max-width: 1023px) { .tp4-footer .tp4-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .tp4-footer .tp4-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

.tp4-footer__brand { display: flex; flex-direction: column; gap: 0.7rem; }
.tp4-footer__logo {
    display: inline-flex; align-items: center; gap: 0.65rem;
    text-decoration: none;
}
/* 2026-08-20 fix (quadrado branco no footer): removido `filter: brightness(0) invert(1)`.
   Esse filtro servia para logos TRANSPARENTES (tornava a forma branca no footer escuro),
   mas com um logo JPEG de fundo branco (o caso da famain) tornava a imagem inteira num
   RETÂNGULO BRANCO SÓLIDO. Um chip branco arredondado funciona p/ qualquer logo
   (transparente ou JPEG) e lê-se como intencional sobre o footer escuro. */
.tp4-footer__logo img {
    /* 2026-09-12 (ponto 5) — proporcional à altura do header: 40 px @60. */
    max-height: calc(var(--tp4-logo-h, 60px) * 0.67); width: auto; display: block; object-fit: contain;
    background: #fff; padding: 8px 12px; border-radius: 10px;
}
.tp4-footer__about {
    margin: 0;
    color: var(--tp4-c-gray-300);
    font-size: var(--tp4-fs-sm); line-height: 1.55;
    max-width: 32ch;
}
.tp4-footer__meta {
    margin: 0;
    color: var(--tp4-c-gray-300);
    font-size: 0.78rem; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 0.4rem;
}
.tp4-footer__meta a { color: var(--tp4-c-gray-300); text-decoration: none; }
.tp4-footer__meta a:hover { color: #fff; }
.tp4-footer__meta svg { flex-shrink: 0; margin-top: 1px; opacity: 0.8; }

.tp4-footer__socials {
    list-style: none; padding: 0; margin: 0.6rem 0 0;
    display: flex; gap: 0.5rem;
}
.tp4-footer__socials li { list-style: none; }
.tp4-socbtn svg { width: 18px !important; height: 18px !important; }

.tp4-footer__badges {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-top: 1rem;
}
.tp4-footer__badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--tp4-r-pill);
    font-size: 0.72rem; font-weight: var(--tp4-fw-semi);
    letter-spacing: 0.04em;
    color: var(--tp4-c-gray-200);
    text-decoration: none;
    transition: background var(--tp4-dur) var(--tp4-ease-out), border-color var(--tp4-dur) var(--tp4-ease-out), transform var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-footer__badge:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
}
.tp4-footer__badge svg { color: var(--tp4-c-success); opacity: 0.9; width: 12px !important; height: 12px !important; }
.tp4-footer__badge--apa { color: #ade1c5; }
.tp4-footer__badge--ciab { color: #c7d2fe; }
.tp4-footer__badge--valorcar { color: #fde68a; }
.tp4-footer__badge--ancav { color: #f9a8d4; }

.tp4-footer__bottom {
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
}
.tp4-footer__bottom-left { display: flex; gap: 1rem; flex-wrap: wrap; }
.tp4-footer__vat { color: var(--tp4-c-gray-400); }
.tp4-footer__legal a { color: var(--tp4-c-gray-200); text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,0.18); }
.tp4-footer__legal a:hover { color: #fff; border-color: rgba(255,255,255,0.4); }

/* ── Content wrap (Páginas singulares envolvidas pelo wrap-content.php) ── */
.tp4-content { padding-block: var(--tp4-s-16); }
.tp4-content__head { margin-block-end: var(--tp4-s-8); text-align: left; }
.tp4-content__eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: var(--tp4-fs-xs); letter-spacing: var(--tp4-tracking-wide);
    text-transform: uppercase; color: var(--tp4-c-brand);
    font-weight: var(--tp4-fw-bold); margin: 0 0 0.4rem;
}
.tp4-content__title {
    margin: 0; font-family: var(--tp4-font-display);
    font-weight: var(--tp4-fw-black);
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.1; color: var(--tp4-text);
    letter-spacing: var(--tp4-tracking-tight);
}
.tp4-content__sub { margin: 0.55rem 0 0; color: var(--tp4-text-muted); font-size: var(--tp4-fs-lg); }
.tp4-content__body { color: var(--tp4-text); line-height: 1.7; font-size: var(--tp4-fs-base); }
.tp4-content__body p { margin: 0 0 var(--tp4-s-4); }
.tp4-content__body h2 { font-family: var(--tp4-font-display); margin: var(--tp4-s-8) 0 var(--tp4-s-3); font-size: var(--tp4-fs-2xl); }
.tp4-content__body h3 { margin: var(--tp4-s-6) 0 var(--tp4-s-2); font-size: var(--tp4-fs-xl); }
.tp4-content__body ul, .tp4-content__body ol { padding-left: 1.5rem; margin: 0 0 var(--tp4-s-4); }
.tp4-content__body a { color: var(--tp4-c-brand); text-decoration: underline; text-underline-offset: 3px; }
.tp4-content__body a:hover { color: var(--tp4-c-brand-hover); }

.tp4-content__search-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.tp4-content__search-link {
    display: block; padding: 1rem 1.25rem;
    background: var(--tp4-c-gray-50);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-lg);
    text-decoration: none; color: var(--tp4-text);
    transition: all var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-content__search-link:hover { border-color: var(--tp4-c-brand); background: #fff; }
.tp4-content__search-link strong { display: block; margin-bottom: 0.4rem; }

/* Builder page (Elementor / Gutenberg full-bleed) — sem container interno */
.tp4-content--builder { padding: 0; }
.tp4-content--builder > * { width: 100%; }
.tp4-content--builder .elementor-section,
.tp4-content--builder .elementor-container { max-width: none !important; }
/* Hide duplicate page titles + tp-storefront mu-plugin hero block (substitui
 * pelos elementos próprios do template V4 mais à frente) */
.tp4-content--builder .ignavo-page-header,
.tp4-content--builder .page-header,
.tp4-content--builder > .entry-header,
.tp4-content--builder .tp-vpp-hero { display: none !important; }
/* Make sure the inner viatura listing renders full-width via tp-storefront block */
.tp4-content--builder .tp-vpp,
.tp4-content--builder .tp-sa-page,
.tp4-content--builder .tp-sa-results { width: 100%; max-width: var(--tp4-container); margin-inline: auto; padding-inline: var(--tp4-container-px); }

/* 2026-06-07 — #5: respiro entre H1 da listing de viaturas e topo da sec
 * Aplica-se quando o conteúdo vem do tp-storefront e arranca com .tp-vpp ou .tp-sa-page;
 * a margem é interna ao bloco da listing, não ao container exterior. */
.tp4-content--builder .tp-vpp .tp-vpp__title,
.tp4-content--builder .tp-vpp h1,
.tp4-content--builder .tp-sa-page h1 { margin-top: var(--tp4-s-8); }

/* 2026-06-07 — #8: páginas legais (cookies, política, termos, devoluções) ficam
 * encostadas às laterais quando o WP carrega como builder/Gutenberg em alguns
 * stores. Forçamos um container narrow para qualquer slug legal. */
body.page-template-default.tp4-theme .tp4-content--builder .elementor,
body.tp4-theme[class*="page-id-"] .tp4-content--builder { padding-inline: 0; }
.tp4-content--builder.tp4-content--legal,
.tp4-content--builder.tp4-content--legal .elementor,
.tp4-content--builder.tp4-content--legal .elementor-section,
.tp4-content--builder.tp4-content--legal .elementor-container {
    max-width: 880px !important;
    margin-inline: auto !important;
    padding-inline: var(--tp4-container-px) !important;
}
.tp4-content--builder.tp4-content--legal { padding-block: var(--tp4-s-10); }

/* 2026-06-07 — #3: enquanto o cart drawer está aberto, esconde wp-whatsapp
 * floating popup que se sobrepõe ao painel. Z-index do plugin é 999999999
 * (max int), por isso o caminho fiável é display:none + visibility:hidden.
 * Restaurado automaticamente quando body.tp4-cart-open sai. */
body.tp4-cart-open .wa__btn_popup,
body.tp4-cart-open .wa__popup_chat_box {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scale(0.7) translateY(20px) !important;
    transition: opacity 180ms ease, transform 200ms ease !important;
    pointer-events: none !important;
}