do wcfad, para o prefixo «Standard:» continuar
* escondido); tamanhos absolutos, porque um `em` dentro de um pai a 0 px dá 0. */
.tp4-product2__price .wcfad-role-price-standard .woocommerce-Price-amount,
.tp4-product2__price .price .woocommerce-Price-amount {
font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
color: var(--tp4-c-brand) !important;
}
/* …mas o preço riscado da promoção continua pequeno e apagado (0,3,1 > 0,3,0). */
.tp4-product2__price .price del .woocommerce-Price-amount {
font-size: clamp(1.05rem, 1.8vw, 1.44rem) !important;
color: var(--tp4-text-muted) !important;
}
.tp4-product2__price .tp4-product2__price-ask {
font-family: var(--tp4-font-sans);
font-weight: var(--tp4-fw-semi);
font-size: var(--tp4-fs-lg);
color: var(--tp4-text-muted);
}
.tp4-product2__price del,
.tp4-product2__price del .amount {
color: var(--tp4-text-muted) !important;
font-size: 0.6em !important;
font-weight: 400 !important;
margin-right: 0.5rem;
}
.tp4-product2__price ins { text-decoration: none; background: transparent; }
.tp4-product2__price small.woocommerce-price-suffix {
display: block; font-family: var(--tp4-font-sans);
font-size: var(--tp4-fs-xs); color: var(--tp4-text-muted);
font-weight: 400; margin-top: 0.2rem;
}
/* Stock badge */
.tp4-product2__stock {
display: flex; align-items: center; gap: 0.55rem;
padding: 0.7rem 0.85rem;
border-radius: var(--tp4-r-md);
font-size: var(--tp4-fs-sm);
border: 1px solid;
}
.tp4-product2__stock.is-instock {
background: rgba(22, 163, 74, 0.06);
border-color: rgba(22, 163, 74, 0.25);
color: #15803d;
}
.tp4-product2__stock.is-instock strong { color: #14532d; }
.tp4-product2__stock.is-outstock {
background: rgba(220, 38, 38, 0.05);
border-color: rgba(220, 38, 38, 0.2);
color: #b91c1c;
}
.tp4-product2__stock.is-outstock strong { color: #7f1d1d; }
.tp4-product2__stock svg { flex-shrink: 0; }
/* Short description */
.tp4-product2__short {
color: var(--tp4-text); line-height: 1.65;
font-size: var(--tp4-fs-base);
}
.tp4-product2__short p { margin: 0 0 0.5rem; }
.tp4-product2__short p:last-child { margin-bottom: 0; }
.tp4-product2__short ul { padding-left: 1.25rem; margin: 0.5rem 0; }
/* Add-to-cart */
.tp4-product2__buy {
padding-top: 0.4rem;
}
.tp4-product2__buy form.cart {
display: flex !important; flex-wrap: wrap !important;
gap: 0.7rem !important; align-items: center !important;
margin: 0 !important;
}
.tp4-product2__buy .quantity {
display: inline-flex !important; align-items: center !important;
background: var(--tp4-c-gray-50);
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-md);
overflow: hidden;
}
.tp4-product2__buy .quantity .qty {
width: 70px !important; min-width: 70px !important;
height: 48px !important;
border: 0 !important; background: transparent !important;
text-align: center !important;
font-weight: var(--tp4-fw-semi); font-size: var(--tp4-fs-base);
color: var(--tp4-text);
-moz-appearance: textfield;
}
.tp4-product2__buy .quantity .qty::-webkit-inner-spin-button,
.tp4-product2__buy .quantity .qty::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
.tp4-product2__buy button.single_add_to_cart_button,
.tp4-product2__buy .single_add_to_cart_button {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 0.5rem !important;
flex: 1 1 200px !important; min-width: 200px !important;
height: 48px !important; padding: 0 1.4rem !important;
background: var(--tp4-c-brand) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--tp4-r-md) !important;
font-family: var(--tp4-font-display) !important;
font-size: var(--tp4-fs-base) !important;
font-weight: var(--tp4-fw-bold) !important;
text-transform: uppercase !important;
letter-spacing: var(--tp4-tracking-wide) !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(var(--tp4-c-brand-rgb), 0.28) !important;
transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease !important;
}
.tp4-product2__buy button.single_add_to_cart_button:hover,
.tp4-product2__buy .single_add_to_cart_button:hover {
background: var(--tp4-c-brand-hover) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(var(--tp4-c-brand-rgb), 0.38) !important;
}
.tp4-product2__buy button.single_add_to_cart_button:active {
transform: translateY(0) !important;
}
/* Variations table (variable product) */
.tp4-product2__buy table.variations {
width: 100% !important;
margin-bottom: 0.7rem !important;
border-collapse: separate !important;
}
.tp4-product2__buy table.variations td {
padding: 0.4rem 0.5rem 0.4rem 0 !important;
}
.tp4-product2__buy table.variations td.label label {
font-size: var(--tp4-fs-xs);
font-weight: var(--tp4-fw-bold);
text-transform: uppercase;
letter-spacing: var(--tp4-tracking-wide);
color: var(--tp4-text);
}
.tp4-product2__buy table.variations select {
width: 100% !important;
border: 1px solid var(--tp4-border) !important;
border-radius: var(--tp4-r-md) !important;
padding: 0.55rem 0.7rem !important;
background: #fff !important;
font: inherit !important; font-size: var(--tp4-fs-sm) !important;
}
/* Trust badges row */
.tp4-product2__trust {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.65rem;
padding-top: 0.85rem;
border-top: 1px solid var(--tp4-border);
}
.tp4-product2__trust-item {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.65rem 0.75rem;
background: var(--tp4-c-gray-50);
border-radius: var(--tp4-r-md);
border: 1px solid var(--tp4-border);
}
.tp4-product2__trust-item svg { flex-shrink: 0; color: var(--tp4-c-brand); }
.tp4-product2__trust-item span { display: flex; flex-direction: column; min-width: 0; }
.tp4-product2__trust-item strong { font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-semi); color: var(--tp4-text); }
.tp4-product2__trust-item small { font-size: 0.7rem; color: var(--tp4-text-muted); }
.tp4-product2__trust-line {
margin: 0; padding: 0.55rem 0.75rem;
background: var(--tp4-c-brand-soft);
border-radius: var(--tp4-r-md);
font-size: var(--tp4-fs-xs); color: var(--tp4-c-brand);
display: inline-flex; align-items: center; gap: 0.4rem; font-weight: var(--tp4-fw-semi);
}
/* Specs */
.tp4-product2__specs {
padding-top: 0.7rem;
border-top: 1px solid var(--tp4-border);
}
.tp4-product2__specs-title {
margin: 0 0 0.6rem; font-size: var(--tp4-fs-xs);
text-transform: uppercase; letter-spacing: var(--tp4-tracking-wide);
color: var(--tp4-text); font-weight: var(--tp4-fw-bold);
}
.tp4-product2__specs-list {
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.5rem 1rem;
}
.tp4-product2__spec {
display: flex; flex-direction: column; gap: 0.15rem;
padding: 0.5rem 0.65rem;
background: var(--tp4-c-gray-50);
border-radius: var(--tp4-r-sm);
}
.tp4-product2__spec dt {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: var(--tp4-tracking-wide);
color: var(--tp4-text-muted); font-weight: var(--tp4-fw-semi); margin: 0;
}
.tp4-product2__spec dd { margin: 0; font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-semi); color: var(--tp4-text); }
/* Tabs (woocommerce-tabs) */
.tp4-product2__tabs {
margin-top: 1.5rem;
background: #fff;
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-lg);
overflow: hidden;
}
.tp4-product2__tabs .woocommerce-tabs { padding: 0; }
.tp4-product2__tabs ul.tabs.wc-tabs {
display: flex !important;
margin: 0 !important; padding: 0 !important;
background: var(--tp4-c-gray-50);
border-bottom: 1px solid var(--tp4-border) !important;
list-style: none !important;
flex-wrap: wrap;
}
.tp4-product2__tabs ul.tabs.wc-tabs::before,
.tp4-product2__tabs ul.tabs.wc-tabs::after,
.tp4-product2__tabs ul.tabs.wc-tabs li::before,
.tp4-product2__tabs ul.tabs.wc-tabs li::after { display: none !important; }
.tp4-product2__tabs ul.tabs.wc-tabs li {
background: transparent !important;
border: 0 !important; margin: 0 !important; padding: 0 !important;
border-radius: 0 !important;
}
.tp4-product2__tabs ul.tabs.wc-tabs li a {
display: inline-flex; align-items: center;
padding: 0.95rem 1.4rem !important;
color: var(--tp4-text-muted) !important;
font-size: var(--tp4-fs-sm) !important;
font-weight: var(--tp4-fw-semi) !important;
text-decoration: none !important;
border-bottom: 2px solid transparent !important;
transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.tp4-product2__tabs ul.tabs.wc-tabs li a:hover {
color: var(--tp4-c-brand) !important;
background: rgba(255,255,255,0.5) !important;
}
.tp4-product2__tabs ul.tabs.wc-tabs li.active a {
color: var(--tp4-c-brand) !important;
border-bottom-color: var(--tp4-c-brand) !important;
background: #fff !important;
}
.tp4-product2__tabs .woocommerce-Tabs-panel {
padding: 1.5rem 1.75rem;
color: var(--tp4-text); line-height: 1.7;
font-size: var(--tp4-fs-base);
}
.tp4-product2__tabs .woocommerce-Tabs-panel h2:first-child {
margin-top: 0; font-family: var(--tp4-font-display);
font-size: var(--tp4-fs-xl); font-weight: var(--tp4-fw-bold);
}
/* Related products */
.tp4-product2 .related.products,
.tp4-product2 .upsells.products {
margin-top: 2.5rem;
}
.tp4-product2 .related.products h2,
.tp4-product2 .upsells.products h2 {
font-family: var(--tp4-font-display);
font-size: var(--tp4-fs-2xl);
font-weight: var(--tp4-fw-black);
margin: 0 0 1rem;
color: var(--tp4-text);
}
.tp4-product2 .related.products ul.products,
.tp4-product2 .upsells.products ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: 1rem !important;
list-style: none; padding: 0; margin: 0;
}
.tp4-product2 .related.products li.product,
.tp4-product2 .upsells.products li.product {
list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important;
}
.tp4-product2 .related.products .tp-pc,
.tp4-product2 .upsells.products .tp-pc {
background: #fff;
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-lg);
overflow: hidden;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
height: 100%;
}
.tp4-product2 .related.products .tp-pc:hover,
.tp4-product2 .upsells.products .tp-pc:hover {
transform: translateY(-3px);
border-color: var(--tp4-c-brand);
box-shadow: 0 8px 24px rgba(15, 17, 21, 0.08);
}
/* ═══════════════════════════════════════════════════════════════════
* Enriquecimento "loja de peças" (2026-07-31): galeria TP (tp_sync_images),
* condição/qualidade, viatura-origem (donor) e compatibilidade (fitment).
* ═══════════════════════════════════════════════════════════════════ */
/* Galeria TP */
.tp4-gallery { margin: 0; }
.tp4-gallery__stage {
position: relative;
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-xl);
overflow: hidden;
background: var(--tp4-c-white);
aspect-ratio: 4 / 3;
display: flex; align-items: center; justify-content: center;
}
.tp4-gallery__main { width: 100%; height: 100%; object-fit: contain; display: block; }
.tp4-gallery__flag {
position: absolute; top: var(--tp4-s-3); left: var(--tp4-s-3);
background: var(--tp4-c-brand); color: var(--tp4-c-brand-ink);
font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-semi);
padding: 4px 10px; border-radius: var(--tp4-r-pill);
letter-spacing: var(--tp4-tracking-wide); text-transform: uppercase;
}
.tp4-gallery__flag--sold { background: var(--tp4-c-gray-700); }
/* ============================================================
* 2026-08-20 — "Sob encomenda" (on_order). Faixa DIAGONAL no canto
* sup-direito da foto do produto (canto sup-esq tem os flags Vendido/
* Últimas). O .tp4-gallery__stage já é position:relative + overflow:hidden,
* por isso as pontas da faixa são cortadas → ribbon de canto limpo.
* ============================================================ */
.tp4-ribbon--onorder {
position: absolute;
top: 22px; right: -56px;
width: 200px;
transform: rotate(45deg);
background: linear-gradient(135deg, #b45309 0%, #ea8a1e 100%);
color: #fff;
-webkit-text-fill-color: #fff;
font-size: 12px; font-weight: 800;
letter-spacing: 0.05em; text-transform: uppercase;
text-align: center;
padding: 7px 0;
box-shadow: 0 3px 10px rgba(0,0,0,0.28);
z-index: 6;
pointer-events: none;
text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
/* Card da loja — chip âmbar destacado na fila de chips (top-left) */
.tp4-body .tp-pc-chip-onorder {
background: linear-gradient(135deg, #b45309 0%, #ea8a1e 100%) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-weight: 700 !important;
border: 0 !important;
}
.tp4-body .tp-pc-chip-onorder svg { color: #fff; }
/* leve realce do card inteiro quando sob encomenda */
.tp4-body .tp-pc.tp-pc-onorder .tp-pc-media { box-shadow: inset 0 0 0 2px rgba(180,83,9,0.35); }
.tp4-gallery__thumbs {
list-style: none; margin: var(--tp4-s-3) 0 0; padding: 0;
display: flex; gap: var(--tp4-s-2); flex-wrap: wrap;
}
.tp4-gallery__thumb {
width: 68px; height: 68px; padding: 0;
border: 2px solid var(--tp4-border); border-radius: var(--tp4-r-md);
background: var(--tp4-c-white); cursor: pointer; overflow: hidden;
transition: border-color var(--tp4-dur) var(--tp4-ease);
}
.tp4-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp4-gallery__thumb:hover { border-color: var(--tp4-border-strong); }
.tp4-gallery__thumb.is-active { border-color: var(--tp4-c-brand); }
/* Viatura-origem (subtítulo) + marca da peça */
.tp4-product2__donor-sub {
display: inline-flex; align-items: center; gap: 6px;
margin: 2px 0 var(--tp4-s-3);
color: var(--tp4-text-muted); font-size: var(--tp4-fs-sm); font-weight: var(--tp4-fw-medium);
}
.tp4-product2__donor-sub svg { color: var(--tp4-c-brand); flex: none; }
.tp4-product2__partbrand { display: inline-flex; align-items: center; gap: 5px; color: var(--tp4-text-soft); font-size: var(--tp4-fs-sm); }
/* Condição / qualidade */
.tp4-product2__condition { display: flex; gap: var(--tp4-s-2); flex-wrap: wrap; margin: 0 0 var(--tp4-s-4); }
.tp4-cond-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 12px; border-radius: var(--tp4-r-pill);
font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-semi);
}
.tp4-cond-badge--cond { background: var(--tp4-c-success-soft); color: var(--tp4-c-success); }
.tp4-cond-badge--qual { background: var(--tp4-c-accent-soft); color: var(--tp4-c-accent); }
/* Cartão viatura-origem (donor) */
.tp4-donor { margin: var(--tp4-s-5) 0; border: 1px solid var(--tp4-border); border-radius: var(--tp4-r-lg); background: var(--tp4-surface-alt); padding: var(--tp4-s-4); }
.tp4-donor__head { display: flex; align-items: center; gap: var(--tp4-s-3); }
.tp4-donor__head svg { color: var(--tp4-c-brand); flex: none; }
.tp4-donor__head strong { display: block; font-size: var(--tp4-fs-sm); color: var(--tp4-text); }
.tp4-donor__head span { display: block; font-size: var(--tp4-fs-sm); color: var(--tp4-text-muted); }
.tp4-donor__actions { display: flex; gap: var(--tp4-s-2); flex-wrap: wrap; margin-top: var(--tp4-s-3); }
/* Botão small (fallback caso não exista no components) */
.tp4-btn--sm { padding: 8px 14px; font-size: var(--tp4-fs-sm); }
/* Compatibilidade (fitment) */
.tp4-compat { margin: var(--tp4-s-10) 0 0; }
.tp4-compat__head { margin-bottom: var(--tp4-s-4); }
.tp4-compat__title { display: flex; align-items: center; gap: var(--tp4-s-2); font-family: var(--tp4-font-display); font-size: var(--tp4-fs-2xl); font-weight: var(--tp4-fw-bold); color: var(--tp4-text); margin: 0; }
.tp4-compat__title svg { color: var(--tp4-c-success); }
.tp4-compat__sub { color: var(--tp4-text-muted); font-size: var(--tp4-fs-sm); margin: 6px 0 0; }
.tp4-compat__tablewrap { overflow-x: auto; border: 1px solid var(--tp4-border); border-radius: var(--tp4-r-lg); }
.tp4-compat__table { width: 100%; border-collapse: collapse; font-size: var(--tp4-fs-sm); }
.tp4-compat__table thead th { text-align: left; padding: var(--tp4-s-3) var(--tp4-s-4); background: var(--tp4-surface-alt); color: var(--tp4-text-soft); font-weight: var(--tp4-fw-semi); border-bottom: 1px solid var(--tp4-border); white-space: nowrap; }
.tp4-compat__table tbody td { padding: var(--tp4-s-3) var(--tp4-s-4); border-bottom: 1px solid var(--tp4-c-gray-100); color: var(--tp4-text); }
.tp4-compat__table tbody tr:last-child td { border-bottom: 0; }
.tp4-compat__table tbody tr:hover td { background: var(--tp4-surface-alt); }
/* Compat responsivo — stack em cartão no telemóvel */
@media (max-width: 640px) {
.tp4-compat__table thead { display: none; }
.tp4-compat__table, .tp4-compat__table tbody, .tp4-compat__table tr, .tp4-compat__table td { display: block; width: 100%; }
.tp4-compat__table tr { border-bottom: 1px solid var(--tp4-border); padding: var(--tp4-s-2) 0; }
.tp4-compat__table tbody tr:last-child { border-bottom: 0; }
.tp4-compat__table td { border: 0; padding: 4px var(--tp4-s-4); display: flex; justify-content: space-between; gap: var(--tp4-s-4); }
.tp4-compat__table td::before { content: attr(data-th); color: var(--tp4-text-muted); font-weight: var(--tp4-fw-semi); }
}
/* 2026-08-02 — Referências muito longas (refs concatenadas) transbordavam o
card de produto em ecrãs estreitos. Truncar com reticências dentro do pill. */
.tp-pc .tp-pc-refpill { max-width: 100%; min-width: 0; }
.tp-pc .tp-pc-refpill-val {
display: inline-block; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: bottom;
}
/* ═══════════════════════════════════════════════════════════════════
* 2026-08-03 — Loja online ao estilo recife.com.pt/pt/stock
* (A) Cartões HORIZONTAIS em lista (imagem esq · detalhe · preço/cart dir)
* (B) Sidebar de FACETAS (cascata Ano→Marca→Modelo + categoria/estado/preço)
* Tudo scoped a `.tp4-shop2__grid` para NÃO afectar related-products nem
* outros grids de `.tp-pc`. A especificidade `.tp4-shop2 .tp4-shop2__grid
* .tp-pc` (0,3,0) vence as regras base `.tp-storefront-active .tp-pc*` (0,2,0).
* ═══════════════════════════════════════════════════════════════════ */
/* (A) LISTA — grid → coluna única de linhas horizontais.
* 2026-09-21: todas as regras deste bloco (A) ficaram scoped a
* `.tp4-shop2:not(.tp4-shop2--grid)` — a secção recebe `tp4-shop2--list` ou
* `tp4-shop2--grid` (wrap-shop.php, TP4_Store::shopDefaultView + localStorage).
* `:not()` em vez de `.tp4-shop2--list` para que HTML antigo em cache (sem
* classe) continue a desenhar linhas. Especificidade sobe de (0,3,0) para
* (0,4,0); as regras de legibilidade no fim do ficheiro não mexem em layout.
* A vista MOSAICO está no bloco (A2) a seguir.
* NOTA: o tema Ignavo renderiza o loop como `div.products.grid.grid-cols-N`
* (NÃO `ul.products`), por isso alvejamos `.tp4-shop2__grid .products`. O
* `> .shop-products-wrapper > .products` (0,3,0) garante que vencemos as
* utilities `.lg\:grid-cols-3` do tema. Uma coluna em TODOS os breakpoints
* (desktop = linhas horizontais; telemóvel = cartões empilhados). */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid > ul.products,
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid ul.products,
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .products,
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .shop-products-wrapper > .products {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.85rem !important;
float: none !important;
width: 100% !important;
}
.tp4-shop2__grid li.product { display: block !important; }
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc {
display: grid;
grid-template-columns: 208px minmax(0, 1fr) 210px;
align-items: stretch;
min-height: 172px;
height: auto;
overflow: hidden;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc:hover { transform: translateY(-2px); }
/* Coluna 1 — media: a imagem preenche a altura da linha */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-media {
aspect-ratio: auto;
height: 100%;
min-height: 172px;
border-right: 1px solid var(--tp-glass-border, var(--tp4-border));
}
/* Coluna 2 — detalhe centrado verticalmente */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-body {
padding: 0.9rem 1.15rem;
justify-content: center;
gap: 0.4rem;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-title {
font-size: var(--tp4-fs-base);
line-height: 1.35;
-webkit-line-clamp: 2;
min-height: 0;
}
/* Coluna 3 — preço em cima, add-to-cart em baixo (painel suave, separador) */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-foot {
flex-direction: column-reverse;
align-items: stretch;
justify-content: center;
gap: 0.6rem;
padding: 0.9rem 1.1rem;
margin-top: 0;
border-top: 0;
border-left: 1px solid var(--tp-glass-border, var(--tp4-border));
/* Tint neutro (funciona em tema claro E escuro; NÃO fixar cinza claro,
* senão o preço — que herda a cor de texto do tema — fica invisível em
* dark mode). */
background: rgba(120, 120, 120, 0.06);
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-price {
margin-left: 0;
text-align: right;
font-size: var(--tp4-fs-2xl);
line-height: 1.1;
}
/* Nota "IVA incluído" sob o preço (toque recife) — só quando HÁ preço */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-price:not(.tp-pc-price-na)::after {
content: "IVA incluído";
display: block;
margin-top: 2px;
font-size: 0.66rem;
font-weight: var(--tp4-fw-medium);
color: var(--tp-text-muted, var(--tp4-text-muted));
letter-spacing: 0;
text-transform: none;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-cart {
width: 100%;
justify-content: center;
}
/* Chips (ref + estado) e overlay (fav/quickview): o parser do browser HASTEIA-os
* para fora do (nesting inválido) → viram filhos absolutos
* de .tp-pc, posicionados relativamente ao CARD inteiro (912px) e portanto por
* cima do texto/preço. Reconfiná-los à coluna da imagem (esquerda). */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc > .tp-pc-chips {
right: auto;
max-width: 186px;
flex-wrap: wrap; /* BUG2 (2026-08-21) — chips quebram em vez de espremer a ref principal */
}
/* BUG2 (2026-08-21) — a REFERÊNCIA PRINCIPAL (.tp-pc-mainref) aparecia CORTADA no
* card horizontal shop2: a base storefront limita o chip a max-width:60% (desenhado
* p/ o card RETRATO, chips = largura da imagem ~276px). Aqui o container é 186px e o
* flex-shrink no space-between truncava a ref a poucos caracteres. Damos-lhe a largura
* total do container sem encolher. O overlay de acções já está em baixo-esquerda, por
* isso a fila de chips do topo está livre. Refs patológicas (>186px) truncam graciosamente. */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-mainref {
max-width: 100%;
flex: 0 0 auto;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc > .tp-pc-actions-overlay {
/* Canto inferior-direito da IMAGEM (evita colidir com o pill de referência
* + selo de estado que ficam no topo). !important porque a storefront pina
* top/right com !important. */
top: auto !important;
bottom: 10px !important;
left: 162px !important; /* 208px (coluna imagem) − 36px (overlay) − 10px margem */
right: auto !important;
}
/* (A-mobile) < 640px → volta a cartão empilhado (imagem topo, foot em linha) */
@media (max-width: 639px) {
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc {
grid-template-columns: 1fr;
min-height: 0;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-media {
aspect-ratio: 4 / 3;
height: auto;
min-height: 0;
border-right: 0;
border-bottom: 1px solid var(--tp-glass-border, var(--tp4-border));
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-foot {
flex-direction: row;
align-items: center;
justify-content: space-between;
border-left: 0;
border-top: 1px solid var(--tp-glass-border, var(--tp4-border));
background: transparent;
}
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-price { text-align: left; }
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc .tp-pc-cart { width: auto; }
/* imagem volta ao topo em largura total → chips/overlay ao topo-direito */
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc > .tp-pc-chips { max-width: none; }
.tp4-shop2:not(.tp4-shop2--grid) .tp4-shop2__grid .tp-pc > .tp-pc-actions-overlay { top: 10px !important; bottom: auto !important; left: auto !important; right: 10px !important; }
}
/* (A2) MOSAICO (2026-09-21, famain: «em vez de ficar por fila, em mosaico,
* todos seguidos») — a secção tem `tp4-shop2--grid`. O cartão volta ao
* retrato base do tp-storefront (`.tp-storefront-active .tp-pc`, flex column)
* + o polimento V4 de `.tp4-shop2__grid .tp-pc` (borda, raio, hover). Aqui só
* o que difere do retrato base: colunas, foto 4:3 e um cartão compacto. */
.tp4-shop2--grid .tp4-shop2__grid > ul.products,
.tp4-shop2--grid .tp4-shop2__grid ul.products,
.tp4-shop2--grid .tp4-shop2__grid .products,
.tp4-shop2--grid .tp4-shop2__grid .shop-products-wrapper > .products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
gap: 0.85rem !important;
float: none !important;
width: 100% !important;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-media {
aspect-ratio: 4 / 3;
height: auto;
min-height: 0;
border-bottom: 1px solid var(--tp-glass-border, var(--tp4-border));
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-body {
padding: 0.7rem 0.85rem 0.55rem;
gap: 0.3rem;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-veh { font-size: 10.5px; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-title {
font-size: var(--tp4-fs-sm);
line-height: 1.35;
-webkit-line-clamp: 2;
min-height: calc(2 * 1.35em);
}
/* pílulas de referência: 1 linha, sem empurrar a altura do cartão */
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-refs {
max-height: 1.6rem;
overflow: hidden;
}
/* preço à esquerda, botão à direita (no DOM o botão vem primeiro) */
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-foot {
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.55rem 0.85rem 0.7rem;
margin-top: auto;
border-top: 1px solid var(--tp-glass-border, var(--tp4-border));
background: transparent;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price {
text-align: left;
line-height: 1.1;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price,
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price bdi,
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price .woocommerce-Price-amount { font-size: 17px !important; }
/* botão com etiqueta («Adicionar»), compacto; abaixo de 400 px de ecrã só o ícone */
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-cart {
width: auto; height: auto;
padding: 7px 11px;
font-size: 12px;
flex: 0 0 auto;
}
/* chips + overlay (hasteados para fora do , ver nota do bloco A): com a
* foto em largura total voltam ao topo-direito, dentro da área da imagem. */
.tp4-shop2--grid .tp4-shop2__grid .tp-pc > .tp-pc-chips { right: 10px; left: 10px; top: 10px; max-width: none; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-mainref { max-width: 62%; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc > .tp-pc-actions-overlay {
top: 46px !important; right: 8px !important; bottom: auto !important; left: auto !important;
}
@media (max-width: 639px) {
.tp4-shop2--grid .tp4-shop2__grid .products,
.tp4-shop2--grid .tp4-shop2__grid .shop-products-wrapper > .products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0.6rem !important;
}
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-body { padding: 0.55rem 0.65rem 0.45rem; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-foot { padding: 0.45rem 0.65rem 0.6rem; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-refs { display: none; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-cart { padding: 8px 9px; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-cart span { display: none; }
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price,
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price bdi,
.tp4-shop2--grid .tp4-shop2__grid .tp-pc .tp-pc-price .woocommerce-Price-amount { font-size: 15px !important; }
}
@media (max-width: 359px) {
.tp4-shop2--grid .tp4-shop2__grid .products,
.tp4-shop2--grid .tp4-shop2__grid .shop-products-wrapper > .products { grid-template-columns: 1fr !important; }
}
/* Comutador mosaico | lista (ribbon, ao lado de «Ordenar») */
.tp4-shop2__hero-right { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tp4-shop2__view {
display: inline-flex; align-items: stretch;
padding: 0.25rem;
background: #fff; border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-pill);
box-shadow: 0 1px 2px rgba(15, 17, 21, 0.04);
}
.tp4-body .tp4-shop2__view-btn {
display: inline-flex; align-items: center; gap: 0.35rem;
padding: 0.35rem 0.75rem;
border: 0; border-radius: var(--tp4-r-pill);
background: transparent; color: var(--tp4-text-muted);
font: inherit; font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-bold);
text-transform: uppercase; letter-spacing: 0.05em; line-height: 1;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease;
}
.tp4-body .tp4-shop2__view-btn:hover { color: var(--tp4-text); }
.tp4-body .tp4-shop2__view-btn[aria-pressed="true"] {
background: var(--tp4-c-brand); color: #fff;
}
.tp4-body .tp4-shop2__view-btn:focus-visible { outline: 2px solid var(--tp4-c-brand); outline-offset: 2px; }
.tp4-shop2__view-btn svg { flex: 0 0 auto; }
@media (max-width: 480px) {
.tp4-shop2__view-btn span { display: none; }
.tp4-body .tp4-shop2__view-btn { padding: 0.45rem 0.65rem; }
}
/* (B) Facetas — selects nativos + inputs de preço + botão aplicar */
.tp4-shop2__facets { display: flex; flex-direction: column; }
.tp4-shop2__select {
width: 100%;
appearance: none; -webkit-appearance: none;
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-md);
background-color: var(--tp4-c-gray-50);
padding: 0.55rem 2rem 0.55rem 0.7rem;
font: inherit; font-size: var(--tp4-fs-sm);
color: var(--tp4-text);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 0.7rem center;
transition: border-color 160ms ease, background-color 160ms ease;
}
.tp4-shop2__select:focus { outline: none; border-color: var(--tp4-c-brand); background-color: #fff; }
.tp4-shop2__select:disabled { opacity: 0.55; cursor: not-allowed; }
.tp4-shop2__price-row { display: flex; align-items: center; gap: 0.45rem; }
.tp4-shop2__price-input {
flex: 1 1 0; min-width: 0;
border: 1px solid var(--tp4-border);
border-radius: var(--tp4-r-md);
background: var(--tp4-c-gray-50);
padding: 0.55rem 0.6rem;
font: inherit; font-size: var(--tp4-fs-sm);
color: var(--tp4-text);
outline: none;
transition: border-color 160ms ease, background 160ms ease;
-moz-appearance: textfield;
}
.tp4-shop2__price-input::-webkit-outer-spin-button,
.tp4-shop2__price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tp4-shop2__price-input:focus { border-color: var(--tp4-c-brand); background: #fff; }
.tp4-shop2__price-sep { color: var(--tp4-text-muted); flex: 0 0 auto; }
.tp4-shop2__filter-toggle + .tp4-shop2__filter-toggle { margin-top: 0.6rem; }
.tp4-shop2__facets-apply {
width: 100%;
margin-top: 1rem;
display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
}
/* ============================================================
* 2026-08-11 — LEGIBILIDADE + FUNDO CLARO (fix "letras brancas")
* ------------------------------------------------------------
* O tema Ignavo/KLB é enfileirado no (o V4 faz full-page
* takeover mas o wp_head continua a carregar as folhas do tema).
* Efeitos: (1) na LOJA o TÍTULO e o PREÇO dos cartões herdavam a cor
* clara do tema → invisíveis em fundo branco; (2) na PÁGINA DE PRODUTO
* o fundo escuro do tema sangrava e o texto das tabs/specs ficava
* cinza-claro ilegível. Esta loja é SEMPRE tema claro → forçamos
* fundo claro + texto escuro legível (o preço fica no laranja da marca,
* estilo recife.com.pt). Regras no fim do ficheiro = ganham nos empates.
* ============================================================ */
body.tp4-body { background: var(--tp4-bg-alt, #f7f7f5) !important; color: var(--tp4-text, #21211e); }
/* ── LOJA: cartões legíveis ─────────────────────────────────── */
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-title,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-title a,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-title a:visited {
color: var(--tp4-text, #21211e) !important;
text-decoration: none;
}
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-title a:hover { color: var(--tp4-c-brand) !important; }
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price *,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price .woocommerce-Price-amount,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price .amount,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price-new {
color: var(--tp4-c-brand) !important;
font-weight: 800;
}
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price-old { color: var(--tp4-text-muted, #66665f) !important; font-weight: 500; }
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-price.tp-pc-price-na { color: var(--tp4-text-soft, #494943) !important; }
/* Linha marca·modelo·ano + sub-texto do cartão */
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-sub,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-vehicle,
.tp4-shop2 .tp4-shop2__grid .tp-pc .tp-pc-meta { color: var(--tp4-text-muted, #66665f); }
/* ── PRODUTO: texto legível em todo o lado ──────────────────── */
.tp4-product2 { color: var(--tp4-text, #21211e); }
.tp4-product2__tabs,
.tp4-product2__tabs p, .tp4-product2__tabs li, .tp4-product2__tabs dd,
.tp4-product2__tabs td, .tp4-product2__tabs h1, .tp4-product2__tabs h2,
.tp4-product2__tabs h3, .tp4-product2__tabs h4, .tp4-product2__tabs strong {
color: var(--tp4-text, #21211e);
}
.tp4-product2__tabs th, .tp4-product2__tabs dt,
.tp4-product2__tabs .woocommerce-product-attributes-item__label {
color: var(--tp4-text-soft, #494943);
}
/* Tabela de Especificações (tp-storefront) — rótulo legível + valor escuro.
* Cadeia body.tp4-body .tp4-body… para vencer regras do plugin/tema com
* !important (specificity alta e garantida). */
body.tp4-body .tp-specs-table th,
body.tp4-body .tp-specs-table td:first-child { color: var(--tp4-text-soft, #494943) !important; font-weight: var(--tp4-fw-semi, 600); }
body.tp4-body .tp-specs-table td,
body.tp4-body .tp-specs-table td * { color: var(--tp4-text, #21211e) !important; }
body.tp4-body .tp-specs-table td em,
body.tp4-body .tp-specs-table td i { color: var(--tp4-text-muted, #66665f) !important; }
body.tp4-body .tp-specs-table tr { border-bottom: 1px solid var(--tp4-border, #ececea); }
/* Tabela de Referências — cabeçalho escuro + pílula de código legível */
body.tp4-body .tp-refs-table th { color: var(--tp4-text, #21211e) !important; font-weight: var(--tp4-fw-semi, 600); background: var(--tp4-bg-alt, #f7f7f5); }
body.tp4-body .tp-refs-table td,
body.tp4-body .tp-refs-table td strong { color: var(--tp4-text, #21211e) !important; }
body.tp4-body .tp-td-code,
body.tp4-body code.tp-td-code,
body.tp4-body .tp-refs-table .tp-td-code {
color: var(--tp4-c-brand) !important;
background: var(--tp4-c-brand-soft) !important;
border: 1px solid color-mix(in srgb, var(--tp4-c-brand) 30%, white);
padding: 2px 8px; border-radius: 6px; font-weight: 700;
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
/* 2026-08-20 — REFORÇO de contraste dos separadores (Dados Técnicos / Referências).
Queixa: "texto muito claro sobre fundo claro". Duas causas cobertas:
(a) especificidade — `html body.tp4-body .tp-td-section …` (0,4,x) vence o modo-escuro
do tp-storefront (que pinta contentores quase-brancos com !important);
(b) opacidade — o conteúdo do separador podia herdar um estado de reveal a meia
opacidade (a tabela parecia esbatida por inteiro). Forçamos opacity:1. */
html body.tp4-body .tp-td-section,
html body.tp4-body .tp-td-section > *,
html body.tp4-body .tp-td-section table,
html body.tp4-body .tp-td-section tr,
html body.tp4-body .tp-td-section th,
html body.tp4-body .tp-td-section td { opacity: 1 !important; }
html body.tp4-body .tp-td-section .tp-refs-table th,
html body.tp4-body .tp-td-section .tp-specs-table th { color: var(--tp4-text, #21211e) !important; background: var(--tp4-bg-alt, #f7f7f5) !important; }
html body.tp4-body .tp-td-section .tp-refs-table td,
html body.tp4-body .tp-td-section .tp-refs-table td strong,
html body.tp4-body .tp-td-section .tp-specs-table td,
html body.tp4-body .tp-td-section .tp-specs-table td * { color: var(--tp4-text, #21211e) !important; }
html body.tp4-body .tp-td-section .tp-td-na { color: var(--tp4-text-muted, #66665f) !important; }
html body.tp4-body .tp-td-section .tp-td-section-title { color: var(--tp4-text, #21211e) !important; }
/* "Fora de stock" e notas secundárias legíveis */
.tp4-product2 .tp4-product2__stock-note,
.tp4-product2 .stock.out-of-stock { color: var(--tp4-text-muted, #66665f) !important; }
/* ============================================================
* 2026-08-11 — Estados vazios (loja sem resultados) + 404
* Design mais forte: ícone em círculo, caixa de pesquisa, chips
* de categorias populares, CTAs. (queixa: "página sem resultados
* muito fraca" + página 404 fraca)
* ============================================================ */
.tp4-shop2__empty { padding: 3.25rem 1.5rem; }
.tp4-shop2__empty-icon {
width: 76px; height: 76px; margin: 0 auto 1rem;
display: grid; place-items: center;
border-radius: 50%; background: var(--tp4-c-brand-soft);
color: var(--tp4-c-brand);
}
.tp4-shop2__empty-icon svg { margin: 0; color: inherit; }
.tp4-shop2__empty-title { margin: 0 0 0.4rem; font-size: var(--tp4-fs-2xl, 1.5rem); color: var(--tp4-text, #21211e); font-weight: 800; }
.tp4-shop2__empty-sub { margin: 0 auto 1.5rem; max-width: 30rem; color: var(--tp4-text-muted, #66665f); }
/* Caixa de pesquisa partilhada (empty + 404) */
.tp4-shop2__empty-search, .tp4-404__search {
display: flex; align-items: center; gap: 0.5rem;
max-width: 32rem; margin: 0 auto 1.35rem;
background: #fff; border: 1px solid var(--tp4-border-strong, #b7b7b1);
border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 1rem;
box-shadow: var(--tp4-shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.tp4-shop2__empty-search svg, .tp4-404__search svg { color: var(--tp4-text-muted, #66665f); flex: 0 0 auto; margin: 0; }
.tp4-shop2__empty-search input, .tp4-404__search input {
flex: 1 1 auto; border: 0; outline: 0; background: transparent;
font-size: var(--tp4-fs-base, 1rem); color: var(--tp4-text, #21211e); min-width: 0;
}
.tp4-shop2__empty-search .tp4-btn, .tp4-404__search .tp4-btn { flex: 0 0 auto; border-radius: 999px; }
/* Chips de categorias populares */
.tp4-shop2__empty-chips, .tp4-404__chips {
display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
align-items: center; max-width: 40rem; margin: 0 auto 1.6rem;
}
.tp4-shop2__empty-chips-label, .tp4-404__chips-label {
width: 100%; font-size: var(--tp4-fs-xs, .8rem); text-transform: uppercase;
letter-spacing: .04em; color: var(--tp4-text-muted, #66665f); margin-bottom: .15rem;
}
.tp4-shop2__empty-chip, .tp4-404__chip {
display: inline-flex; align-items: center; padding: 0.4rem 0.85rem;
border-radius: 999px; background: var(--tp4-c-gray-50, #f7f7f5);
border: 1px solid var(--tp4-border, #d8d8d4);
color: var(--tp4-text-soft, #494943); text-decoration: none;
font-size: var(--tp4-fs-sm, .9rem); font-weight: 600; transition: all .15s ease;
}
.tp4-shop2__empty-chip:hover, .tp4-404__chip:hover {
background: var(--tp4-c-brand-soft); border-color: var(--tp4-c-brand);
color: var(--tp4-c-brand);
}
/* ── Página 404 ────────────────────────────────────────────── */
.tp4-404 { padding-block: var(--tp4-s-16, 4rem) var(--tp4-s-16, 4rem); text-align: center; }
.tp4-404__code {
font-size: clamp(5rem, 18vw, 11rem); line-height: 0.9; font-weight: 900;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--tp4-c-brand), var(--tp4-c-brand-hover));
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 0.5rem;
}
.tp4-404__title { margin: 0 0 0.5rem; font-size: var(--tp4-fs-3xl, 2rem); color: var(--tp4-text, #21211e); font-weight: 800; }
.tp4-404__sub { margin: 0 auto 1.75rem; max-width: 34rem; color: var(--tp4-text-muted, #66665f); font-size: var(--tp4-fs-lg, 1.1rem); }
.tp4-404__actions { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
/* ============================================================
* 2026-08-11 — tp-storefront corre em modo ESCURO (body.tp-storefront-active)
* e pinta os contentores das tabs/acordeão do produto a #f1f5f9 (quase
* branco) com !important → texto ilegível no nosso layout claro. Sobrepomos
* os contentores com specificity superior (html body.tp4-body.tp-storefront-active)
* para o texto herdar escuro. Elementos com cor própria (badges/botões) mantêm-na.
* ============================================================ */
html body.tp4-body.tp-storefront-active .tp-sp-tab-panel,
html body.tp4-body.tp-storefront-active .tp-sp-tabs-wrap,
html body.tp4-body.tp-storefront-active .tp-sp-acc-content,
html body.tp4-body.tp-storefront-active .tp-sp-acc-head,
html body.tp4-body.tp-storefront-active .tp-sp-acc-title,
html body.tp4-body.tp-storefront-active .tp-specs-table,
html body.tp4-body.tp-storefront-active .tp-specs-table td,
html body.tp4-body.tp-storefront-active .tp-refs-table,
html body.tp4-body.tp-storefront-active .tp-refs-table td,
html body.tp4-body.tp-storefront-active .tp-refs-table td strong {
color: var(--tp4-text, #21211e) !important;
}
html body.tp4-body.tp-storefront-active .tp-specs-table th,
html body.tp4-body.tp-storefront-active .tp-specs-table td:first-child,
html body.tp4-body.tp-storefront-active .tp-refs-table th {
color: var(--tp4-text-soft, #494943) !important;
}
/* Bordas das tabelas (storefront usava branco translúcido → invisível) */
html body.tp4-body.tp-storefront-active .tp-specs-table td,
html body.tp4-body.tp-storefront-active .tp-specs-table th,
html body.tp4-body.tp-storefront-active .tp-refs-table td,
html body.tp4-body.tp-storefront-active .tp-refs-table th {
border-color: var(--tp4-border, #ececea) !important;
}
/* Separador + aba activa das tabs */
html body.tp4-body.tp-storefront-active .tp-sp-tabs-wrap .wc-tabs { border-bottom-color: var(--tp4-border, #ececea) !important; }
html body.tp4-body.tp-storefront-active .tp-sp-tabs-wrap .wc-tabs li.active a { color: var(--tp4-c-brand) !important; }
/* Pílula de código de referência legível */
html body.tp4-body.tp-storefront-active .tp-td-code {
color: var(--tp4-c-brand) !important;
background: var(--tp4-c-brand-soft) !important;
}
/* Aba "Dados Técnicos" (tp-storefront) — contentor real = .tp-td-section.
* store.css usa color:var(--tp-text) que herda claro no modo escuro do
* storefront → texto cinza-claro. Forçamos escuro no contentor exacto,
* specificity (0,3,3) para vencer tudo. (2026-08-11) */
html body.tp4-body .tp-td-section,
html body.tp4-body .tp-td-section td,
html body.tp4-body .tp-td-section .tp-specs-table td,
html body.tp4-body .tp-td-section .tp-refs-table td,
html body.tp4-body .tp-td-section .tp-refs-table td strong,
html body.tp4-body .tp-td-section .tp-td-section-title { color: var(--tp4-text, #21211e) !important; }
html body.tp4-body .tp-td-section th,
html body.tp4-body .tp-td-section .tp-specs-table th,
html body.tp4-body .tp-td-section .tp-refs-table th { color: var(--tp4-text-soft, #494943) !important; }
html body.tp4-body .tp-td-section .tp-td-na { color: var(--tp4-text-muted, #66665f) !important; }
html body.tp4-body .tp-td-section .tp-td-code {
color: var(--tp4-c-brand) !important;
background: var(--tp4-c-brand-soft) !important;
border: 1px solid color-mix(in srgb, var(--tp4-c-brand) 30%, white) !important;
}
html body.tp4-body .tp-td-section .tp-specs-table tr,
html body.tp4-body .tp-td-section .tp-refs-table tr,
html body.tp4-body .tp-td-section .tp-specs-table td,
html body.tp4-body .tp-td-section .tp-refs-table td { border-color: var(--tp4-border, #ececea) !important; }
/* ============================================================
* 2026-08-20 — CORREÇÃO DEFINITIVA do contraste das tabelas técnicas.
* Causa-raiz: storefront.css (modo escuro) usa `-webkit-text-fill-color`
* com !important (th: rgba(148,163,184,.9); td: #e2e8f0). Em WebKit/Blink,
* `-webkit-text-fill-color` SOBREPÕE-SE a `color` no preenchimento real do
* glifo — por isso todos os overrides de `color` acima não tinham efeito
* visível (o texto continuava slate/quase-branco sobre fundo claro).
* Fix: re-afirmar `-webkit-text-fill-color` (par a par com o `color`),
* specificity (0,3,3)+ e !important, âmbito .tp-td-section (só famain/V4).
* ============================================================ */
html body.tp4-body .tp-td-section .tp-specs-table td,
html body.tp4-body .tp-td-section .tp-specs-table td *,
html body.tp4-body .tp-td-section .tp-refs-table td,
html body.tp4-body .tp-td-section .tp-refs-table td strong {
color: var(--tp4-text, #21211e) !important;
-webkit-text-fill-color: var(--tp4-text, #21211e) !important;
}
html body.tp4-body .tp-td-section .tp-specs-table th,
html body.tp4-body .tp-td-section .tp-refs-table th,
html body.tp4-body .tp-td-section .tp-refs-table thead th {
color: var(--tp4-text-soft, #494943) !important;
-webkit-text-fill-color: var(--tp4-text-soft, #494943) !important;
}
html body.tp4-body .tp-td-section .tp-td-section-title {
color: var(--tp4-text, #21211e) !important;
-webkit-text-fill-color: var(--tp4-text, #21211e) !important;
}
html body.tp4-body .tp-td-section .tp-td-na {
color: var(--tp4-text-muted, #66665f) !important;
-webkit-text-fill-color: var(--tp4-text-muted, #66665f) !important;
}
html body.tp4-body .tp-td-section .tp-td-code {
color: var(--tp4-c-brand) !important;
-webkit-text-fill-color: var(--tp4-c-brand) !important;
}
/* Também as tabelas standalone (fora de .tp-td-section, defesa extra) */
html body.tp4-body.tp-storefront-active .tp-specs-table td,
html body.tp4-body.tp-storefront-active .tp-specs-table td *,
html body.tp4-body.tp-storefront-active .tp-refs-table td,
html body.tp4-body.tp-storefront-active .tp-refs-table td strong {
-webkit-text-fill-color: var(--tp4-text, #21211e) !important;
}
html body.tp4-body.tp-storefront-active .tp-specs-table th,
html body.tp4-body.tp-storefront-active .tp-refs-table th {
-webkit-text-fill-color: var(--tp4-text-soft, #494943) !important;
}
/* ============================================================
* 2026-08-21 — BUG6: contraste da aba "Compatibilidades".
* Contentor real = .tp-tab-compatibilities (LISTA, NÃO tabela), renderizada por
* tp-sync-client/templates/frontend/tabs/compatibilities.php e estilizada por
* store.css com color: var(--tp-text|--tp-text-2|--tp-muted). Sob
* body.tp-storefront-active, --tp-text resolve para o modo ESCURO do storefront
* (quase-branco) → ilegível sobre o painel branco do V4. Nem o fix .tp-td-section/
* .tp-specs-table/.tp-refs-table, nem o bloco storefront (que trata .tp-compat-TABLE,
* inexistente aqui) apanham esta LISTA. Fix: mesmo padrão do fix técnico —
* re-afirmar color + -webkit-text-fill-color !important, âmbito .tp-tab-compatibilities.
* ============================================================ */
html body.tp4-body .tp-tab-compatibilities .tp-compat-main,
html body.tp4-body .tp-tab-compatibilities .tp-compat-line,
html body.tp4-body .tp-tab-compatibilities .tp-compat-item {
color: var(--tp4-text, #21211e) !important;
-webkit-text-fill-color: var(--tp4-text, #21211e) !important;
}
html body.tp4-body .tp-tab-compatibilities .tp-compat-intro,
html body.tp4-body .tp-tab-compatibilities .tp-compat-intro strong {
color: var(--tp4-text-soft, #494943) !important;
-webkit-text-fill-color: var(--tp4-text-soft, #494943) !important;
}
html body.tp4-body .tp-tab-compatibilities .tp-compat-notes,
html body.tp4-body .tp-tab-compatibilities .tp-compat-empty {
color: var(--tp4-text-muted, #66665f) !important;
-webkit-text-fill-color: var(--tp4-text-muted, #66665f) !important;
}
/* ============================================================
* 2026-08-20 — "Adicionar aos Favoritos" DUPLICADO (só Inteligente/V4).
* Causa: em página de produto o ignavo-core (Mode A) renderiza a âncora
*