/* ==========================================================================
   ListingHive Child — CSS de customização
   --------------------------------------------------------------------------
   Coloque aqui todas as suas alterações visuais.
   Dica: cor primária e secundária, além das fontes, podem ser trocadas
   sem código em  Aparência → Personalizar (Customizer) do WordPress.
   Use este arquivo para o que o Customizer não cobre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIÁVEIS DA MARCA — paleta do mockup So Custom (tema dark)
   IMPORTANTE: no Customizer (Aparência → Personalizar) defina também:
     - Cor primária: #F5811F   - Cor secundária: #22C55E
   -------------------------------------------------------------------------- */
:root {
	--brand-primary:   #F5811F; /* laranja (botões, destaques, preços) */
	--brand-secondary: #22C55E; /* verde (CTA "Falar com o vendedor") */
	--bg-body:         #0F1420; /* fundo geral (quase preto azulado) */
	--bg-surface:      #161C2A; /* cards e blocos */
	--bg-surface-2:    #1E2636; /* blocos internos / hover */
	--border:          #2A3345; /* bordas sutis */
	--text:            #E8ECF2; /* texto principal */
	--text-muted:      #9AA5B5; /* texto secundário */
	--brand-radius:    10px;
}

/* --------------------------------------------------------------------------
   0. BASE DARK — fundo e cores gerais
   -------------------------------------------------------------------------- */
body {
	background-color: var(--bg-body);
	color: var(--text);
}

a { color: var(--text); }
a:hover { color: var(--brand-primary); }

h1, h2, h3, h4, h5, h6 { color: #fff; }

.site-content,
.hp-page,
.widget { color: var(--text); }

/* preços em laranja (ajuste os seletores conforme seus atributos) */
.hp-listing__attribute--price,
.hp-listing__price,
.price,
ins .amount { color: var(--brand-primary) !important; font-weight: 600; }

/* --------------------------------------------------------------------------
   0b. BARRA LATERAL / WIDGETS — corrige links invisíveis no fundo escuro
   (Arquivos, Categorias, filtro de categorias, etc.)
   -------------------------------------------------------------------------- */
.widget,
.widget a,
.widget li,
.widget-area,
.widget-area a,
.sidebar,
.sidebar a,
.hp-widget,
.hp-widget a,
.hp-menu a,
aside a {
	color: var(--text) !important;
}

.widget a:hover,
.widget-area a:hover,
.sidebar a:hover,
.hp-menu a:hover,
aside a:hover {
	color: var(--brand-primary) !important;
}

.widget__title,
.widget-title,
.widget h3 { color: #fff !important; }

/* RÁDIOS / CHECKBOXES: não estilizamos.
   O ListingHive esconde o controle nativo e desenha o próprio círculo.
   Qualquer regra nossa aqui (opacity, appearance, accent-color) fazia o
   controle nativo reaparecer ao lado do desenho do tema = duas bolinhas. */

/* itens do filtro de categorias do HivePress */
.hp-menu--filter a,
.hp-menu--taxonomy a,
.hp-form--listing-filter a { color: var(--text) !important; }

/* --------------------------------------------------------------------------
   0c. PÁGINA DO ANÚNCIO — rótulos invisíveis e blocos brancos destoando
   -------------------------------------------------------------------------- */

/* rótulos de atributo (ex: "Condição :") que ficavam escuros no fundo escuro */
.hp-listing__attribute,
.hp-listing__attribute-label,
.hp-field__label,
.hp-field,
.hp-listing__attributes,
.hp-listing__attributes * { color: var(--text) !important; }

/* blocos/cards brancos (preço, vendedor, ações) → surface escuro do tema */
.hp-widget,
.hp-vendor,
.hp-listing__block,
.hp-page__sidebar > *,
.widget_hivepress_listing_summary,
.wp-block-group.has-white-background-color,
.hp-card {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	color: var(--text) !important;
}

/* textos dentro desses cards */
.hp-vendor *,
.hp-widget *,
.hp-listing__block * { color: var(--text) !important; }

/* nome do vendedor e valores em destaque */
.hp-vendor__name,
.hp-vendor__name a { color: #fff !important; }

/* avatar placeholder circular escuro em vez de cinza claro */
.hp-vendor__image,
.hp-user__image {
	background-color: var(--bg-surface-2) !important;
}

/* preço mantém laranja mesmo dentro de card escuro */
.hp-listing__price,
.hp-widget .amount { color: var(--brand-primary) !important; }

/* --------------------------------------------------------------------------
   2. BOTÕES
   -------------------------------------------------------------------------- */
.button,
button,
input[type=submit],
.wp-block-button__link {
	background-color: var(--brand-primary);
	border-radius: var(--brand-radius);
	/* text-transform: none;  descomente para tirar o CAIXA ALTA */
}

.button:hover,
button:hover,
input[type=submit]:hover {
	filter: brightness(0.95);
}

/* botão verde secundário — CTA "Falar com o vendedor" */
.button--secondary,
.hp-button--secondary,
.button.is-green {
	background-color: var(--brand-secondary);
	color: #fff;
	border-radius: var(--brand-radius);
}

/* --------------------------------------------------------------------------
   3. CABEÇALHO (header)
   -------------------------------------------------------------------------- */
.site-header,
.header-navbar {
	background-color: var(--bg-body);
	border-bottom: 1px solid var(--border);
}

.header-navbar__menu > li > a { color: var(--text); }
.header-navbar__menu > li > a:hover { color: var(--brand-primary); }

.header-navbar__logo img { max-height: 40px; }

/* --------------------------------------------------------------------------
   4. CARDS DE LISTAGEM (hp-listing) — visual dark do mockup
   -------------------------------------------------------------------------- */
.hp-listing--view-block {
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--brand-radius);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

.hp-listing--view-block:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.hp-listing__title a { color: #fff; }
.hp-listing__title a:hover { color: var(--brand-primary); }

.hp-listing__attribute { color: var(--text-muted); }

/* ícone de favorito (coração) no canto */
.hp-listing__favorite,
.hp-favorite { color: #fff; }

/* --------------------------------------------------------------------------
   5. TÍTULOS / TIPOGRAFIA
   -------------------------------------------------------------------------- */
/*
h1, h2, h3 {
	letter-spacing: -0.01em;
}
*/

/* --------------------------------------------------------------------------
   5b. HERO / BANNER de busca
   -------------------------------------------------------------------------- */
.header-image,
.hp-hero {
	color: #fff;
}
.header-image::after {
	/* escurece a imagem de fundo para o texto ganhar contraste */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15,20,32,.85) 0%, rgba(15,20,32,.35) 60%, rgba(15,20,32,0) 100%);
	z-index: 0;
	pointer-events: none;
}
.header-image > * { position: relative; z-index: 1; }

/* campo de busca do hero */
.hp-form input[type=text],
.hp-form input[type=search],
input[type=text],
input[type=search],
select,
textarea {
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: var(--brand-radius);
}
::placeholder { color: var(--text-muted); }

/* blocos / seções / widgets em surface escuro */
.hp-section,
.widget,
.hp-form--listing-search,
.comment-respond {
	background-color: transparent;
}

/* selos "Verificado" (badge) — aplique a classe no template do card */
.badge-verificado {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(34,197,94,.15);
	color: var(--brand-secondary);
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* --------------------------------------------------------------------------
   6. RODAPÉ (footer)
   -------------------------------------------------------------------------- */
.site-footer,
.footer-widgets {
	background-color: #0B0F18;
	color: var(--text-muted);
	border-top: 1px solid var(--border);
}
.footer-widgets .widget__title { color: #fff; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--brand-primary); }

/* --------------------------------------------------------------------------
   7. RESPONSIVO (ajustes só no mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* seus ajustes de mobile aqui */
}

/* ==========================================================================
   8. PÁGINA DO ANÚNCIO (single listing) — v1.1.0
   Ajustes para aproximar do mockup So Custom.
   ========================================================================== */

/* 8.1 Breadcrumb / caminho acima do título (estava invisível no dark) */
.hp-breadcrumb,
.hp-breadcrumb a,
.hp-page__breadcrumb,
.hp-page__breadcrumb a,
nav[aria-label="Breadcrumb"],
nav[aria-label="Breadcrumb"] a,
.breadcrumbs,
.breadcrumbs a,
#breadcrumbs,
#breadcrumbs a {
	color: var(--text-muted) !important;
	font-size: 13px;
}
.hp-breadcrumb a:hover,
.breadcrumbs a:hover,
#breadcrumbs a:hover { color: var(--brand-primary) !important; }

/* 8.2 Título + linha de atributos (marca, ano, km, cidade) */
.hp-listing--view-page .hp-listing__title {
	color: #fff !important;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}

.hp-listing--view-page .hp-listing__details,
.hp-listing--view-page .hp-listing__details a,
.hp-listing--view-page .hp-listing__attributes--secondary,
.hp-listing--view-page .hp-listing__attributes--secondary * {
	color: var(--text-muted) !important;
	font-size: 14px;
}
.hp-listing--view-page .hp-listing__details a:hover { color: var(--brand-primary) !important; }

/* 8.3 Categoria / rótulo acima do título */
.hp-listing__categories,
.hp-listing__categories a,
.hp-listing__category {
	color: var(--brand-primary) !important;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* 8.4 Bloco de preço na coluna da direita */
.hp-page__sidebar .hp-listing__price,
.hp-widget .hp-listing__price,
.hp-listing--view-page .hp-listing__price {
	color: var(--brand-primary) !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.15;
	display: block;
}

/* 8.5 Ações do anúncio (favoritar, reivindicar, denunciar) */
.hp-listing__actions,
.hp-listing__action,
.hp-listing__action a,
.hp-listing__action button {
	color: var(--text) !important;
	font-size: 14px;
}
.hp-listing__action a:hover { color: var(--brand-primary) !important; }

/* 8.6 CTA principal — "Falar com o vendedor" (WhatsApp, verde) */
.hp-listing__action--message .button,
.hp-listing__action--message a,
.hp-widget .button--primary,
.button--whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background-color: var(--brand-secondary) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--brand-radius);
	font-weight: 700;
	padding: 12px 16px;
}
.hp-listing__action--message .button:hover,
.button--whatsapp:hover { filter: brightness(1.07); }

/* CTA secundário — "Ver telefone" (contorno) */
.button--outline,
.hp-listing__action--phone .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: transparent !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	font-weight: 600;
	padding: 12px 16px;
	margin-top: 8px;
}
.button--outline:hover { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }

/* 8.7 Card do vendedor */
.hp-vendor--view-block {
	text-align: center;
	padding: 20px;
}
.hp-vendor__image img,
.hp-user__image img {
	border-radius: 50%;
	border: 2px solid var(--border);
}
.hp-vendor__name,
.hp-vendor__name a {
	font-size: 16px;
	font-weight: 700;
	color: #fff !important;
}
.hp-vendor__registered-date,
.hp-vendor__attribute {
	color: var(--text-muted) !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* 8.8 Abas (Detalhes / Informações / Acessórios / Histórico) */
.hp-tabs,
.hp-listing__tabs {
	border-bottom: 1px solid var(--border);
	margin-bottom: 20px;
}
.hp-tabs__item,
.hp-tabs a,
.hp-listing__tabs a {
	color: var(--text-muted) !important;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 12px 0;
	margin-right: 28px;
	border-bottom: 2px solid transparent;
}
.hp-tabs__item--active,
.hp-tabs__item.is-active,
.hp-tabs a[aria-selected="true"] {
	color: #fff !important;
	border-bottom-color: var(--brand-primary) !important;
}

/* 8.9 Galeria: imagem principal + miniaturas */
.hp-listing__images,
.hp-listing__images img {
	border-radius: var(--brand-radius);
}
.hp-listing__images .slick-dots li,
.hp-gallery__thumbnail {
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	opacity: .65;
	transition: opacity .15s ease, border-color .15s ease;
}
.hp-listing__images .slick-dots li:hover,
.hp-gallery__thumbnail:hover { opacity: 1; }
.hp-listing__images .slick-dots li.slick-active,
.hp-gallery__thumbnail.is-active {
	opacity: 1;
	border-color: var(--brand-primary);
}

/* 8.10 Tabela de atributos em duas colunas, com linhas divisórias */
.hp-listing__attributes--primary,
.hp-listing__attributes--secondary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hp-listing__attributes--primary > li,
.hp-listing__attributes--secondary > li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}
.hp-listing__attributes--primary > li > strong,
.hp-listing__attribute-label { color: var(--text-muted) !important; font-weight: 400; }

@media (max-width: 768px) {
	.hp-listing__attributes--primary,
	.hp-listing__attributes--secondary { grid-template-columns: 1fr; }
	.hp-page__sidebar .hp-listing__price { font-size: 26px !important; }
}

/* 8.11 Descrição / conteúdo do anúncio */
.hp-listing__description,
.hp-listing__description p,
.hp-listing__description li,
.hp-page__content p,
.hp-page__content li { color: var(--text) !important; line-height: 1.7; }

.hp-listing__description strong { color: #fff !important; }

/* separador laranja no fim das seções (como no mockup) */
.hp-listing__description hr,
.hp-page__content hr {
	border: none;
	border-top: 3px solid var(--brand-primary);
	width: 40px;
	margin: 28px 0;
}

/* 8.12 Botão WhatsApp inserido pelo functions.php */
.button--whatsapp {
	margin: 12px 0 4px;
	text-transform: none;
	font-size: 15px;
}
.button--whatsapp .fa-whatsapp { font-size: 18px; }

/* ==========================================================================
   9. BLOCO "INFORMAÇÕES" — grade de atributos (v1.3.0)
   Gerada pelo functions.php (ou pelo shortcode [socustom_specs]).
   ========================================================================== */
.socustom-specs {
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--brand-radius);
	padding: 28px 32px 32px;
	margin: 28px 0;
}

.socustom-specs__title {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 14px;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* barrinha laranja sob o título */
.socustom-specs__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: var(--brand-primary);
	border-radius: 2px;
}

.socustom-specs__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 28px;
}

.socustom-specs__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	padding-left: 14px;
	border-left: 2px solid var(--border);
	transition: border-color .15s ease;
}

.socustom-specs__item:hover { border-left-color: var(--brand-primary); }

.socustom-specs__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1.3;
}

.socustom-specs__value {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	line-height: 1.35;
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.socustom-specs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.socustom-specs { padding: 22px 20px 26px; }
	.socustom-specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.socustom-specs__title { font-size: 17px; }
	.socustom-specs__value { font-size: 15px; }
}

/* Esconde a lista de atributos padrão do HivePress na página do anúncio
   (ex: "Condição: Usada"), já que a grade acima substitui ela.
   Comente este bloco se quiser as duas coisas aparecendo. */
.hp-listing--view-page .hp-listing__attributes--secondary { display: none !important; }

/* ==========================================================================
   10. CARD DO ANÚNCIO — linha "Ano • Km • Condição" (v1.4.0)
   ========================================================================== */
.socustom-cardmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 8px 0 10px;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.4;
}

.socustom-cardmeta__item {
	white-space: nowrap;      /* impede "Condiç ão" quebrando no meio */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/* separador em bolinha entre os itens */
.socustom-cardmeta__item + .socustom-cardmeta__item::before {
	content: "•";
	margin-right: 10px;
	color: var(--border);
}

/* condição vira um selo discreto */
.socustom-cardmeta__item--condition {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text);
}
.socustom-cardmeta__item--condition::before { content: none; margin: 0; }

/* Esconde SÓ a lista secundária do card (era ela que quebrava "Condiç ão").
   ATENÇÃO: não esconda .hp-listing__attributes--primary — o PREÇO mora lá. */
.hp-listing--view-block .hp-listing__attributes--secondary { display: none !important; }

/* Garante que o preço do card apareça, mesmo que algum bloco pai esteja oculto */
.hp-listing--view-block .hp-listing__attributes--primary,
.hp-listing--view-block .hp-listing__price {
	display: block !important;
	color: var(--brand-primary) !important;
	font-size: 20px;
	font-weight: 700;
}

/* Rótulos longos nunca mais quebram no meio da palavra */
.hp-listing__attribute,
.hp-listing__attribute-label,
.socustom-specs__label {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

/* ==========================================================================
   11. CARD — texto invisível e data (v1.4.2)
   ========================================================================== */

/* "ADICIONADO EM 13 DE AGOSTO DE 2026" ficava escuro sobre escuro.
   Escondemos: quem interessa é ano/km/condição.
   Para voltar a mostrar, troque display:none por color: var(--text-muted). */
.hp-listing--view-block .hp-listing__created-date,
.hp-listing--view-block .hp-listing__attribute--created-date,
.hp-listing--view-block .hp-listing__date,
.hp-listing--view-block time { display: none !important; }

/* Rede de segurança: nada dentro do card fica invisível por herdar cor escura */
.hp-listing--view-block,
.hp-listing--view-block p,
.hp-listing--view-block span,
.hp-listing--view-block div,
.hp-listing--view-block li,
.hp-listing--view-block small,
.hp-listing--view-block .hp-listing__details,
.hp-listing--view-block .hp-listing__details * {
	color: var(--text-muted);
}

.hp-listing--view-block .hp-listing__title,
.hp-listing--view-block .hp-listing__title a { color: #fff !important; }

.hp-listing--view-block .hp-listing__categories,
.hp-listing--view-block .hp-listing__categories a { color: var(--brand-primary) !important; }

.hp-listing--view-block .socustom-cardmeta,
.hp-listing--view-block .socustom-cardmeta * { color: var(--text-muted) !important; }
.hp-listing--view-block .socustom-cardmeta__item--condition { color: var(--text) !important; }

/* ==========================================================================
   12. BOTÃO WHATSAPP — garantir que o clique chegue no link (v1.5.0)
   O ListingHive usa links/overlays absolutos que cobrem blocos inteiros.
   Se um deles ficar por cima, o clique morre no overlay e o botão parece
   "não levar a lugar nenhum". Estas regras colocam o botão acima disso.
   ========================================================================== */
.socustom-wa {
	position: relative;
	z-index: 20;
	margin: 12px 0 4px;
}

.socustom-wa a.button--whatsapp {
	position: relative;
	z-index: 21;
	pointer-events: auto !important;
	cursor: pointer;
	text-decoration: none;
}

/* nenhum pseudo-elemento decorativo do tema pode cobrir o botão */
.socustom-wa a.button--whatsapp::before,
.socustom-wa a.button--whatsapp::after { content: none !important; }

/* o overlay de link do card/bloco não passa por cima do nosso botão */
.hp-widget .hp-listing__url,
.hp-listing__url { z-index: 1; }

/* ==========================================================================
   13. CORREÇÕES v1.5.1
   ========================================================================== */

/* 13.1 Botão WhatsApp: texto branco (estava herdando o laranja de link) */
.socustom-wa a.button--whatsapp,
.socustom-wa a.button--whatsapp span,
.socustom-wa a.button--whatsapp svg { color: #fff !important; fill: currentColor; }
.socustom-wa a.button--whatsapp:hover,
.socustom-wa a.button--whatsapp:hover span { color: #fff !important; }
.socustom-wa__icon { flex: 0 0 auto; }

/* 13.2 Nada dentro do bloco do botão pode bloquear o clique */
.socustom-wa,
.socustom-wa * { pointer-events: auto !important; }

/* 13.3 FILTROS: revertido — ver nota na seção 0b. O controle fica
   exatamente como o tema pai desenha, sem interferência nossa. */

/* apenas a cor do texto do rótulo, sem tocar no controle */
.hp-form label,
.widget label {
	color: var(--text) !important;
	cursor: pointer;
}

/* ==========================================================================
   14. "Reivindicar / Denunciar anúncio" removidos (v1.7.0)
   O functions.php já remove os blocos; estas regras cobrem sobras de
   caixa vazia caso alguma extensão insira por outro caminho.
   ========================================================================== */
.hp-listing__action--claim,
.hp-listing__action--report,
.hp-listing-claim,
.hp-listing-report { display: none !important; }

/* não deixa um card vazio com borda sobrando na coluna lateral */
.hp-page__sidebar .hp-widget:empty,
.hp-page__sidebar > div:empty { display: none !important; }

/* ==========================================================================
   15. FORMULÁRIOS (anunciar / editar anúncio) — v1.8.0
   Padroniza TODOS os campos: texto, número, e-mail, telefone, data,
   textarea, select nativo e select2 (o combo estilizado do HivePress).
   Antes, só input[type=text|search] estava estilizado — por isso alguns
   campos apareciam brancos e outros pareciam invisíveis.
   ========================================================================== */

.hp-form input[type=text],
.hp-form input[type=search],
.hp-form input[type=email],
.hp-form input[type=url],
.hp-form input[type=tel],
.hp-form input[type=number],
.hp-form input[type=password],
.hp-form input[type=date],
.hp-form input[type=time],
.hp-form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=file]),
.hp-form textarea,
.hp-form select,
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=password],
input[type=date] {
	width: 100%;
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	color: var(--text) !important;
	padding: 11px 14px;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* foco laranja, para saber onde você está digitando */
.hp-form input:focus,
.hp-form textarea:focus,
.hp-form select:focus,
input:focus,
textarea:focus {
	border-color: var(--brand-primary) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(245,129,31,.18);
}

.hp-form textarea { min-height: 120px; resize: vertical; }

/* setinhas do campo numérico visíveis no tema escuro */
.hp-form input[type=number] { color-scheme: dark; }

/* seta do select nativo */
.hp-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
		linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 38px;
}

/* --------------------------------------------------------------------------
   15b. SELECT2 — o combo branco de "Categoria"
   -------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius) !important;
	min-height: 46px;
	padding: 6px 10px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
.select2-container--default .select2-selection__placeholder {
	color: var(--text) !important;
	line-height: 32px;
	padding-left: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--text-muted) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--brand-primary) !important;
}

/* lista que abre */
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--bg-surface-2) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius);
}

.select2-container--default .select2-results__option {
	background-color: transparent !important;
	color: var(--text) !important;
	padding: 10px 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--brand-primary) !important;
	color: #fff !important;
}

/* itens escolhidos no modo múltiplo */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: var(--bg-surface-2) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: 999px;
	padding: 2px 10px;
}

/* --------------------------------------------------------------------------
   15c. Rótulos, descrições e espaçamento
   -------------------------------------------------------------------------- */
.hp-form__field,
.hp-field { margin-bottom: 20px; }

.hp-field__label,
.hp-form label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted) !important;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.hp-field__label sup,
.hp-field__label .required { color: var(--brand-primary) !important; }

.hp-field__description,
.hp-form small { color: var(--text-muted) !important; font-size: 12px; }

/* botão de enviar / selecionar imagens */
.hp-form input[type=submit],
.hp-form button[type=submit],
.hp-form .button--primary {
	background-color: var(--brand-primary) !important;
	color: #fff !important;
	border: none;
	border-radius: var(--brand-radius);
	padding: 13px 24px;
	font-weight: 700;
	width: auto;
}

/* área de upload de imagens */
.hp-field--attachment-upload,
.hp-field--file-upload { color: var(--text); }

/* ==========================================================================
   16. Campo de imagens obrigatório (v1.9.0)
   ========================================================================== */
/* asterisco de obrigatório removido junto com a validação (v1.10.1) */

/* mensagem de erro do formulário bem visível no tema escuro */
.hp-form__messages,
.hp-form__messages--error,
.hp-form__message--error {
	background-color: rgba(239,68,68,.12) !important;
	border: 1px solid rgba(239,68,68,.45) !important;
	border-radius: var(--brand-radius);
	color: #FCA5A5 !important;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}


/* ==========================================================================
   17. BANNER DO TOPO (header-hero) — v1.9.1
   Nada aqui pode sobrescrever o background-image que o HiveTheme injeta
   inline com a foto do cabeçalho. Só escurecemos por cima, com uma
   camada separada, para o texto branco continuar legível.
   ========================================================================== */
.header-hero {
	position: relative;
}

.header-hero__content {
	position: relative;
	z-index: 2;
}

.header-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(15,20,32,.55) 0%, rgba(15,20,32,.35) 50%, rgba(15,20,32,.75) 100%);
	pointer-events: none;
}

/* ==========================================================================
   18. JANELAS (modais) — entrar / cadastrar (v1.10.0)
   O HivePress abre esses formulários numa modal do Fancybox, que é branca
   por padrão. Com os campos já escuros, ficava caixa preta em fundo branco.
   ========================================================================== */
.hp-modal,
.hp-modal__content,
.fancybox__content,
.fancybox-content,
.fancybox-slide > div,
.hp-modal .hp-form {
	background-color: var(--bg-surface) !important;
	color: var(--text) !important;
	border-radius: 14px;
}

.fancybox__content { padding: 32px !important; }

/* título da janela */
.hp-modal__title,
.fancybox__content h2,
.fancybox__content h3 {
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 22px;
	text-align: left;
}

/* botão de fechar */
.fancybox__button--close,
.fancybox-button--close,
.hp-modal__close {
	color: var(--text-muted) !important;
	background: transparent !important;
	opacity: 1;
}
.fancybox__button--close:hover,
.hp-modal__close:hover { color: var(--brand-primary) !important; }
.fancybox__button--close svg { filter: none; }

/* fundo atrás da janela, mais escuro para destacar */
.fancybox__backdrop,
.fancybox-bg { background: rgba(5,8,14,.82) !important; }

/* campos dentro da modal seguem o padrão do site */
.fancybox__content input:not([type=submit]),
.hp-modal input:not([type=submit]) {
	width: 100%;
	background-color: var(--bg-surface-2) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius);
	padding: 12px 14px;
}

/* botão principal em laranja sólido, largura total */
.fancybox__content input[type=submit],
.fancybox__content button[type=submit],
.hp-modal input[type=submit],
.hp-modal button[type=submit] {
	width: 100%;
	background: var(--brand-primary) !important;
	background-image: none !important;
	color: #fff !important;
	border: none;
	border-radius: var(--brand-radius);
	padding: 14px 20px;
	font-weight: 700;
	font-size: 15px;
	margin-top: 8px;
}

/* link "Já tem uma conta? Entrar" */
.fancybox__content a,
.hp-modal a { color: var(--text-muted) !important; }
.fancybox__content a:hover,
.hp-modal a:hover { color: var(--brand-primary) !important; }

/* descrições e mensagens de erro dentro da janela */
.fancybox__content .hp-form__messages { margin-bottom: 14px; }

/* ==========================================================================
   19. MENU SUSPENSO DO USUÁRIO (v1.10.2)
   O submenu do cabeçalho continuava branco enquanto o texto já era claro.
   ========================================================================== */
.site-header .sub-menu,
.header-navbar .sub-menu,
.header-navbar__menu ul ul,
.menu-item-has-children > ul,
.hp-menu--user,
.header-user__menu,
.site-header ul ul {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	box-shadow: 0 12px 32px rgba(0,0,0,.45);
	padding: 8px 0 !important;
	overflow: hidden;
	min-width: 200px;
}

.site-header .sub-menu li,
.header-navbar .sub-menu li,
.site-header ul ul li { border: none !important; }

.site-header .sub-menu a,
.header-navbar .sub-menu a,
.header-navbar__menu ul ul a,
.hp-menu--user a,
.site-header ul ul a {
	display: block;
	color: var(--text) !important;
	padding: 11px 18px !important;
	font-size: 15px;
	line-height: 1.3;
	background: transparent !important;
}

.site-header .sub-menu a:hover,
.header-navbar .sub-menu a:hover,
.header-navbar__menu ul ul a:hover,
.hp-menu--user a:hover,
.site-header ul ul a:hover {
	background-color: var(--bg-surface-2) !important;
	color: var(--brand-primary) !important;
}

/* "Sair" separado do resto */
.site-header .sub-menu li:last-child a,
.header-navbar .sub-menu li:last-child a {
	border-top: 1px solid var(--border) !important;
	margin-top: 4px;
}

/* nome do usuário e ícone no cabeçalho */
.header-navbar__menu > li > a,
.header-user__name { color: var(--text) !important; }
.header-navbar__menu > li > a:hover { color: var(--brand-primary) !important; }

/* ==========================================================================
   20. ÍCONES DO CABEÇALHO (v1.10.3)
   Ícones ficavam azul-escuros sobre o fundo escuro.
   ========================================================================== */
.site-header i,
.site-header .hp-icon,
.header-navbar i,
.header-navbar .hp-icon,
.header-navbar__menu i,
.header-user i,
.site-header [class*="fa-"] {
	color: var(--text) !important;
}

/* ícones desenhados em SVG seguem a cor do texto */
.site-header svg,
.header-navbar svg {
	fill: currentColor !important;
	color: var(--text);
}

/* no hover acompanham o link */
.site-header a:hover i,
.site-header a:hover .hp-icon,
.site-header a:hover svg,
.header-navbar a:hover i,
.header-navbar a:hover svg {
	color: var(--brand-primary) !important;
	fill: currentColor !important;
}

/* setinha do menu suspenso */
.header-navbar__menu .fa-angle-down,
.header-navbar__menu .fa-chevron-down { color: var(--text-muted) !important; }

/* botão verde do cabeçalho mantém ícone branco */
.header-navbar .button i,
.header-navbar .button svg,
.site-header .button i,
.site-header .button svg { color: #fff !important; fill: currentColor !important; }

/* ==========================================================================
   20b. CORREÇÃO v1.10.4 — a barra do topo não é um card
   Os estilos de submenu estavam vazando para o menu principal, criando
   aquela caixa arredondada em volta de Home/Listings e o retângulo atrás
   do nome do usuário.
   ========================================================================== */
.header-navbar__menu,
.header-navbar > ul,
.site-header > ul,
.site-header nav > ul {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	overflow: visible !important;
}

/* itens do primeiro nível: sem fundo, sem caixa — só a cor muda */
.header-navbar__menu > li > a,
.site-header nav > ul > li > a {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.header-navbar__menu > li > a:hover,
.site-header nav > ul > li > a:hover {
	background: none !important;
	color: var(--brand-primary) !important;
}

/* o item ativo/aberto também fica sem retângulo atrás */
.header-navbar__menu > li.is-active > a,
.header-navbar__menu > li:focus-within > a,
.header-navbar__menu > li.menu-item-has-children:hover > a {
	background: none !important;
}

/* ==========================================================================
   21. CARDS DE PACOTE / PRODUTO (v1.11.0)
   Tela "Selecione o pacote" e cards de produto do WooCommerce.
   ========================================================================== */
.hp-package,
.hp-package--view-block,
.hp-product,
.hp-product--view-block,
li.product,
.woocommerce ul.products li.product,
.hp-listing-package,
.hp-form--package-select .hp-package {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	color: var(--text) !important;
	overflow: hidden;
}

/* linhas divisórias internas do card */
.hp-package > *,
.hp-product > * { border-color: var(--border) !important; }

/* preço do pacote em laranja, no lugar do verde */
.hp-package__price,
.hp-product__price,
.hp-package .price,
li.product .price,
li.product .price .amount,
.hp-package__price .amount {
	color: var(--brand-primary) !important;
	font-size: 22px;
	font-weight: 700;
}

/* descrição do pacote legível */
.hp-package__description,
.hp-package__description *,
.hp-product__description,
.hp-package p,
li.product p {
	color: var(--text) !important;
	font-size: 14px;
	line-height: 1.6;
}

.hp-package__name,
.hp-product__name,
li.product .woocommerce-loop-product__title {
	color: #fff !important;
	font-weight: 700;
}

/* botões dos cards: laranja sólido, sem degradê */
.hp-package .button,
.hp-product .button,
li.product .button,
.hp-package input[type=submit],
.hp-form--package-select .button {
	background: var(--brand-primary) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--brand-radius);
	font-weight: 700;
}

/* link "Change Details" / voltar */
.hp-form__action--back,
a.hp-link--back { color: var(--text-muted) !important; }
a.hp-link--back:hover { color: var(--brand-primary) !important; }

/* ==========================================================================
   22. MINHA CONTA (WooCommerce) — v1.12.0
   Menu lateral e tabelas do painel da conta.
   ========================================================================== */
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation ul,
.woocommerce-account .woocommerce-MyAccount-navigation {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	padding: 8px 0 !important;
	list-style: none;
}

.woocommerce-MyAccount-navigation li { border: none !important; }

.woocommerce-MyAccount-navigation li a {
	display: block;
	color: var(--text) !important;
	padding: 12px 20px !important;
	font-size: 15px;
}

.woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--bg-surface-2) !important;
	color: var(--brand-primary) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active > a {
	color: var(--brand-primary) !important;
	font-weight: 700;
}

/* setinhas ao lado dos itens */
.woocommerce-MyAccount-navigation li a::before,
.woocommerce-MyAccount-navigation i { color: var(--text-muted) !important; }

/* conteúdo do painel */
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce { color: var(--text) !important; }

.woocommerce-MyAccount-content strong,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: #fff !important; }

.woocommerce-MyAccount-content a { color: var(--brand-primary) !important; }

/* tabelas (pedidos, downloads, endereços) */
.woocommerce table.shop_table,
.woocommerce table.my_account_orders,
.woocommerce table {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	color: var(--text) !important;
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table th,
.woocommerce table td {
	border-color: var(--border) !important;
	color: var(--text) !important;
	padding: 12px 14px !important;
}

.woocommerce table th { color: var(--text-muted) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* avisos do WooCommerce (info, sucesso, erro) */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice {
	background-color: var(--bg-surface-2) !important;
	border-top-color: var(--brand-primary) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius);
}
.woocommerce-info a,
.woocommerce-message a { color: var(--brand-primary) !important; }

/* endereços e blocos internos */
.woocommerce-Address,
.woocommerce-Address-title,
.woocommerce-Address address,
.woocommerce-customer-details address {
	color: var(--text) !important;
	border-color: var(--border) !important;
}

/* botões do WooCommerce em laranja sólido */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt {
	background: var(--brand-primary) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--brand-radius);
	font-weight: 700;
}

/* ==========================================================================
   23. RODAPÉ — links ilegíveis (v1.12.1)
   O menu do rodapé tem cor própria e escapava da regra genérica.
   ========================================================================== */
.site-footer,
.site-footer *,
.footer-navbar,
.footer-navbar *,
.footer-widgets,
.footer-widgets * {
	color: var(--text-muted) !important;
}

.site-footer a,
.site-footer nav a,
.site-footer .menu a,
.site-footer ul li a,
.footer-navbar a,
.footer-navbar__menu a,
.footer-widgets a {
	color: var(--text) !important;
	text-decoration: none;
}

.site-footer a:hover,
.footer-navbar a:hover,
.footer-widgets a:hover {
	color: var(--brand-primary) !important;
}

/* item atual do menu do rodapé */
.site-footer .current-menu-item > a,
.footer-navbar .current-menu-item > a { color: var(--brand-primary) !important; }

/* títulos de widget e ícones do rodapé */
.site-footer .widget__title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 { color: #fff !important; }

.site-footer i,
.site-footer .hp-icon { color: var(--text) !important; }
.site-footer svg { fill: currentColor !important; color: var(--text); }

/* ==========================================================================
   24. BUSCA E FILTROS (v1.13.0)
   ========================================================================== */

/* 24.1 Barra de busca: campo e botão alinhados na mesma linha central */
.hp-form--listing-search,
.hp-form--listing-search form,
form.hp-form--listing-search {
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	flex-wrap: nowrap;
}

.hp-form--listing-search .hp-form__fields,
.hp-form--listing-search .hp-form__field {
	flex: 1 1 auto;
	margin-bottom: 0 !important;
	display: flex;
	align-items: center;
}

.hp-form--listing-search input[type=text],
.hp-form--listing-search input[type=search] {
	height: 52px;
	margin: 0 !important;
}

.hp-form--listing-search button,
.hp-form--listing-search input[type=submit],
.hp-form--listing-search .hp-form__button {
	height: 52px;
	margin: 0 !important;
	padding: 0 28px;
	flex: 0 0 auto;
	align-self: center !important;
	white-space: nowrap;
}

/* 24.2 Caixa de filtros: respiro e hierarquia */
.hp-form--listing-filter,
.widget_hivepress_listing_categories,
.hp-widget--listing-filter {
	padding: 18px !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	background-color: var(--bg-surface) !important;
}

/* lista de categorias do filtro */
.hp-menu--listing-categories,
.hp-menu--listing-categories ul {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.hp-menu--listing-categories li { margin: 0; }

.hp-menu--listing-categories a {
	display: block;
	padding: 9px 4px !important;
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--text) !important;
	border-bottom: 1px solid rgba(255,255,255,.04);
}

.hp-menu--listing-categories a:hover { color: var(--brand-primary) !important; }

/* subcategorias recuadas, para a hierarquia ficar clara */
.hp-menu--listing-categories ul ul a,
.hp-menu--listing-categories .children a { padding-left: 18px !important; }

/* categoria atual em destaque */
.hp-menu--listing-categories .current-menu-item > a,
.hp-menu--listing-categories .is-active > a {
	color: var(--brand-primary) !important;
	font-weight: 700;
}

/* botão Filtro com respiro em relação à lista */
.hp-form--listing-filter button,
.hp-form--listing-filter input[type=submit] {
	width: 100%;
	margin-top: 16px !important;
	height: 46px;
}

/* 24.3 "Ordenar por" alinhado com o select */
.hp-form--listing-sort,
.hp-listings__sort {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}
.hp-form--listing-sort label { margin: 0 !important; white-space: nowrap; }
.hp-form--listing-sort select { height: 46px; min-width: 150px; }

@media (max-width: 640px) {
	.hp-form--listing-search,
	.hp-form--listing-search form { flex-wrap: wrap !important; }
	.hp-form--listing-search button,
	.hp-form--listing-search input[type=submit] { width: 100%; }
}

/* ==========================================================================
   25. LOGO — fundo preto do arquivo contra o fundo do site (v1.13.1)
   Solução paliativa: 'screen' faz os pixels pretos do arquivo se
   fundirem com o fundo. A solução definitiva é um PNG com fundo
   transparente — aí basta comentar este bloco.
   ========================================================================== */
/* DESATIVADO ao trocar por um logo PNG com fundo transparente.
   Reative (descomente) só se voltar a usar um arquivo de fundo preto.
.header-navbar__logo img,
.site-header .custom-logo,
.site-header__logo img {
	mix-blend-mode: screen;
}
*/

/* logo: sem fundo e com altura controlada */
.header-navbar__logo img,
.site-header .custom-logo,
.site-header__logo img {
	background: transparent !important;
	max-height: 64px;
	width: auto;
	object-fit: contain;
}

/* ==========================================================================
   26. PAINEL DO USUÁRIO — ícones e lista de anúncios (v1.14.0)
   Ícones de editar, favoritar e visualizar ficavam azul-escuros.
   ========================================================================== */
.hp-listings--view-table i,
.hp-listing--view-table i,
.hp-listing__action i,
.hp-listings i,
.hp-menu i,
.hp-page__content i,
.hp-listing--view-table .hp-icon,
.hp-listing__action .hp-icon {
	color: var(--text-muted) !important;
	font-size: 16px;
}

.hp-listings--view-table a:hover i,
.hp-listing--view-table a:hover i,
.hp-listing__action a:hover i,
.hp-listing__action:hover i {
	color: var(--brand-primary) !important;
}

.hp-listings svg,
.hp-listing--view-table svg,
.hp-listing__action svg {
	fill: currentColor !important;
	color: var(--text-muted);
}

/* linhas da tabela de anúncios com separador e respiro */
.hp-listing--view-table,
.hp-listings--view-table > * {
	border-bottom: 1px solid var(--border) !important;
	padding: 14px 0 !important;
}

.hp-listing--view-table .hp-listing__title,
.hp-listing--view-table .hp-listing__title a {
	color: var(--text) !important;
	font-weight: 500;
}
.hp-listing--view-table .hp-listing__title a:hover { color: var(--brand-primary) !important; }

/* selo de status (Pendente, Rascunho, Expirado) */
.hp-listing__status,
.hp-status,
.hp-listing--view-table .hp-listing__status {
	border: 1px solid var(--brand-primary) !important;
	color: var(--brand-primary) !important;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 11px;
	letter-spacing: .06em;
	white-space: nowrap;
}

/* menu lateral da conta: setinha do item ativo em laranja */
.hp-menu--user-account .is-active > a,
.hp-menu--user-account .current-menu-item > a { color: var(--brand-primary) !important; }
.hp-menu--user-account a { color: var(--text) !important; }
.hp-menu--user-account a:hover { color: var(--brand-primary) !important; }

/* ==========================================================================
   27. PAINEL — datas visíveis e selo só quando existe (v1.14.1)
   ========================================================================== */

/* 27.1 O selo de status só ganha moldura quando tem texto dentro.
   Antes, a célula vazia de cada linha também recebia a borda laranja,
   virando aquela grade. */
.hp-listing__status:empty,
.hp-status:empty {
	border: none !important;
	padding: 0 !important;
	display: none !important;
}

.hp-listing--view-table .hp-listing__status,
.hp-listings--view-table .hp-listing__status {
	display: inline-block;
	border: none !important;
	padding: 0 !important;
}

.hp-listing__status:not(:empty),
.hp-status:not(:empty) {
	border: 1px solid var(--brand-primary) !important;
	color: var(--brand-primary) !important;
	border-radius: 999px;
	padding: 4px 12px !important;
	font-size: 11px;
	letter-spacing: .06em;
	white-space: nowrap;
	display: inline-block !important;
}

/* 27.2 Data do anúncio visível na tabela do painel
   (continua oculta nos cards da vitrine, onde não interessa) */
.hp-listing--view-table time,
.hp-listing--view-table .hp-listing__created-date,
.hp-listing--view-table .hp-listing__date,
.hp-listings--view-table time,
.hp-listing--view-table .hp-listing__attribute--created-date {
	display: inline !important;
	color: var(--text-muted) !important;
	font-size: 14px;
	white-space: nowrap;
}

/* ==========================================================================
   28. PAINEL — v1.14.2
   Fora todas as bordas laranjas do status, e a data forçada a aparecer
   por regra ampla (o seletor específico não estava alcançando).
   ========================================================================== */

/* 28.1 Status: texto puro, sem moldura nenhuma, em nenhum estado */
.hp-listing__status,
.hp-status,
.hp-listing__status *,
.hp-listing--view-table .hp-listing__status,
.hp-listings--view-table .hp-listing__status,
.hp-listing__status:not(:empty),
.hp-status:not(:empty) {
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	padding: 0 !important;
	color: var(--text-muted) !important;
	font-size: 12px !important;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* 28.2 Tudo na linha do painel nasce legível.
   Depois devolvemos as cores especiais de título e categoria. */
.hp-listing--view-table,
.hp-listing--view-table *,
.hp-listings--view-table,
.hp-listings--view-table * {
	color: var(--text-muted) !important;
}

.hp-listing--view-table time,
.hp-listing--view-table .hp-listing__created-date,
.hp-listing--view-table .hp-listing__date {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	font-size: 14px;
}

.hp-listing--view-table .hp-listing__title,
.hp-listing--view-table .hp-listing__title a {
	color: var(--text) !important;
	font-size: 16px;
}
.hp-listing--view-table .hp-listing__title a:hover { color: var(--brand-primary) !important; }

.hp-listing--view-table .hp-listing__categories,
.hp-listing--view-table .hp-listing__categories a,
.hp-listing--view-table .hp-listing__category {
	color: var(--brand-primary) !important;
}

.hp-listing--view-table a:hover i,
.hp-listing--view-table a:hover svg { color: var(--brand-primary) !important; }

/* ==========================================================================
   29. PAINEL DE ANÚNCIOS — seletores corretos (v1.14.3)
   Confirmado no HTML: a linha é <tr class="hp-listing hp-listing--edit-block">
   e a data é <td class="hp-listing__created-date hp-listing__date"><time>.
   As seções 26–28 usavam "view-table", que não existe. Estas mandam.
   ========================================================================== */
.hp-listing--edit-block > td {
	padding: 14px 12px !important;
	border-bottom: 1px solid var(--border) !important;
	vertical-align: middle;
	color: var(--text-muted) !important;
}

/* título + ícone de editar */
.hp-listing--edit-block .hp-listing__title a,
.hp-listing--edit-block .hp-listing__title span {
	color: var(--text) !important;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.hp-listing--edit-block .hp-listing__title a:hover span,
.hp-listing--edit-block .hp-listing__title a:hover i { color: var(--brand-primary) !important; }

/* categoria */
.hp-listing--edit-block .hp-listing__categories {
	color: var(--brand-primary) !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* A DATA */
.hp-listing--edit-block .hp-listing__created-date,
.hp-listing--edit-block .hp-listing__date,
.hp-listing--edit-block .hp-listing__created-date time,
.hp-listing--edit-block time {
	display: table-cell;
	color: var(--text-muted) !important;
	font-size: 14px !important;
	visibility: visible !important;
	opacity: 1 !important;
	white-space: nowrap;
}
.hp-listing--edit-block time { display: inline !important; }

/* status: só texto, sem moldura; publicado não mostra nada */
.hp-listing--edit-block .hp-listing__status {
	color: var(--text-muted) !important;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: none !important;
	background: none !important;
}

/* ícones de ação (destacar / ver) */
.hp-listing--edit-block .hp-listing__actions { white-space: nowrap; text-align: right; }
.hp-listing--edit-block .hp-listing__action { margin-left: 14px; }
.hp-listing--edit-block .hp-listing__action i,
.hp-listing--edit-block .hp-listing__title i { color: var(--text-muted) !important; font-size: 16px; }
.hp-listing--edit-block .hp-listing__action:hover i { color: var(--brand-primary) !important; }

/* cabeçalho da tabela, se houver */
.hp-listings--edit-table th,
table th { color: var(--text-muted) !important; }

/* ==========================================================================
   30. PAINEL — status centralizado e em laranja (v1.14.4)
   As linhas separadoras ficam como estão.
   ========================================================================== */
.hp-listing--edit-block .hp-listing__status,
.hp-listing__status,
.hp-status {
	color: var(--brand-primary) !important;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: none !important;
	background: none !important;
	padding: 0 !important;
	text-align: center !important;
	vertical-align: middle !important;
}

/* 30b. v1.14.5 — o texto do status fica dentro de um elemento filho
   (span/mark), e a seção 28 pintava esse filho de cinza com !important.
   Aqui alcançamos o filho também. */
.hp-listing--edit-block .hp-listing__status,
.hp-listing--edit-block .hp-listing__status *,
.hp-listing--edit-block .hp-status,
.hp-listing--edit-block .hp-status *,
.hp-listing__status,
.hp-listing__status *,
.hp-status,
.hp-status * {
	color: var(--brand-primary) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	border: none !important;
	background: none !important;
}

td.hp-listing__status,
td.hp-status {
	text-align: center !important;
	vertical-align: middle !important;
}

/* 30c. v1.14.6 — alinhamento do status
   Confirmado no HTML: <td class="hp-listing__status ..."><span>Pendente</span></td>
   Eu tinha zerado o padding desta célula (as outras têm 14px), e o
   vertical-align vinha sem força suficiente. Seletor mais específico,
   padding devolvido e o span centralizado por conta própria. */
.hp-listing--edit-block td.hp-listing__status,
.hp-listing--edit-block td.hp-status {
	padding: 14px 12px !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.hp-listing--edit-block td.hp-listing__status span,
.hp-listing--edit-block td.hp-status span {
	display: block !important;
	text-align: center !important;
	line-height: 1.4 !important;
	margin: 0 auto !important;
	color: var(--brand-primary) !important;
}

/* ==========================================================================
   31. FINALIZAÇÃO DE COMPRA (blocos do WooCommerce) — v1.15.0
   O checkout novo usa os "WooCommerce Blocks" (.wc-block-components-*),
   com estilos próprios que nenhuma regra anterior alcançava.
   ========================================================================== */

/* campos de texto e select */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-select select,
.wc-block-components-form input,
.wc-block-components-address-form input,
.wc-block-components-combobox input,
.wc-blocks-components-select__container,
.wc-blocks-components-select__select {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius) !important;
	color: var(--text) !important;
	box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-blocks-components-select__select:focus {
	border-color: var(--brand-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(245,129,31,.18) !important;
}

/* rótulos flutuantes dentro dos campos */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-blocks-components-select__label,
.wc-block-components-combobox label,
.wc-block-components-text-input.is-active label {
	color: var(--text-muted) !important;
	background: transparent !important;
}

/* setinha do select */
.wc-blocks-components-select__expand,
.wc-block-components-select__expand { fill: var(--text-muted) !important; }

/* títulos das etapas */
.wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wc-block-components-checkout-step__title { color: #fff !important; }

.wc-block-components-checkout-step__description,
.wc-block-components-address-form__address_2-toggle,
.wc-block-components-text-input .screen-reader-text { color: var(--text-muted) !important; }

/* resumo do pedido */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar,
.wc-block-components-panel,
.wc-block-components-totals-wrapper {
	background-color: var(--bg-surface) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius);
}

.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name,
.wc-block-components-product-metadata { color: var(--text) !important; }

.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: #fff !important; }

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount { color: var(--brand-primary) !important; }

/* divisórias internas */
.wc-block-components-totals-wrapper::after,
.wc-block-components-panel__button { border-color: var(--border) !important; }
.wc-block-components-panel__button { color: var(--text) !important; }

/* opções de pagamento */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout-payment-block {
	background-color: var(--bg-surface) !important;
	border-color: var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius);
}
.wc-block-components-radio-control__label { color: var(--text) !important; }

/* botão finalizar */
.wc-block-components-checkout-place-order-button,
.wc-block-components-button:not(.is-link) {
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--brand-radius) !important;
	font-weight: 700;
}
.wc-block-components-button:not(.is-link):hover { filter: brightness(1.05); }

/* links auxiliares (cupom, editar) */
.wc-block-components-button.is-link,
.wc-block-components-checkout-step a { color: var(--brand-primary) !important; }

/* avisos e erros */
.wc-block-components-validation-error { color: #FCA5A5 !important; }

/* 31b. Campo de cupom (v1.15.0) */
.wc-block-components-totals-coupon__form,
.wc-block-components-totals-coupon {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wc-block-components-totals-coupon input,
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon .wc-block-components-text-input input {
	background-color: var(--bg-surface-2) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
	border-radius: var(--brand-radius) !important;
	height: 46px;
}

.wc-block-components-totals-coupon button,
.wc-block-components-totals-coupon__button {
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--brand-radius) !important;
	height: 46px;
	padding: 0 22px !important;
	font-weight: 700;
	opacity: 1 !important;
}

/* botão desabilitado enquanto o campo está vazio */
.wc-block-components-totals-coupon button:disabled,
.wc-block-components-totals-coupon__button:disabled {
	background: var(--bg-surface-2) !important;
	color: var(--text-muted) !important;
	cursor: not-allowed;
}

.wc-block-components-panel__button,
.wc-block-components-totals-coupon__button-label { color: var(--text) !important; }

/* ==========================================================================
   32. HERO DA HOME — "O universo custom em um só lugar" (v1.16.0)
   Aplica-se ao bloco Capa (Cover) que tiver a classe CSS: socustom-hero
   (Editor -> selecione o bloco -> Avançado -> Classe(s) CSS adicionais)
   ========================================================================== */
.socustom-hero {
	position: relative;
	min-height: 520px;
	border-radius: 16px;
	overflow: hidden;
	padding: 64px 56px !important;
}

/* escurece a foto para o texto ganhar contraste, da esquerda para a direita */
.socustom-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(11,15,24,.92) 0%, rgba(11,15,24,.72) 45%, rgba(11,15,24,.15) 100%);
	pointer-events: none;
}

.socustom-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	max-width: 620px;
	margin: 0;
}

/* título */
.socustom-hero h1,
.socustom-hero h2 {
	color: #fff !important;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 16px 0;
	text-transform: uppercase;
}

.socustom-hero h1 em,
.socustom-hero .destaque { color: var(--brand-primary) !important; font-style: normal; }

.socustom-hero p {
	color: var(--text) !important;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 28px 0;
	max-width: 460px;
}

/* ---- barra de busca dentro do hero ---- */
.socustom-hero .hp-form--listing-search {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	background: rgba(22,28,42,.92);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 14px;
	max-width: 900px;
}

.socustom-hero .hp-form--listing-search .hp-form__fields {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.socustom-hero .hp-form--listing-search .hp-form__field {
	flex: 1 1 150px;
	min-width: 140px;
	margin: 0 !important;
}

.socustom-hero .hp-form--listing-search .hp-field__label {
	font-size: 10px;
	margin-bottom: 5px;
	color: var(--text-muted) !important;
}

.socustom-hero .hp-form--listing-search select,
.socustom-hero .hp-form--listing-search input,
.socustom-hero .select2-container--default .select2-selection--single {
	height: 46px !important;
	min-height: 46px !important;
	background-color: var(--bg-surface-2) !important;
	border: 1px solid var(--border) !important;
	border-radius: 8px !important;
	font-size: 14px;
}

.socustom-hero .hp-form--listing-search button,
.socustom-hero .hp-form--listing-search input[type=submit] {
	height: 46px;
	padding: 0 30px;
	flex: 0 0 auto;
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ---- par de botões abaixo da busca (VER MOTOS / VER ACESSÓRIOS) ---- */
.socustom-hero .wp-block-buttons { margin-top: 20px; gap: 12px; }

.socustom-hero .wp-block-button__link {
	border-radius: 8px !important;
	padding: 13px 30px !important;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .05em;
}

.socustom-hero .wp-block-button:first-child .wp-block-button__link {
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
}

.socustom-hero .wp-block-button:nth-child(2) .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.45) !important;
}
.socustom-hero .wp-block-button:nth-child(2) .wp-block-button__link:hover {
	border-color: var(--brand-primary) !important;
	color: var(--brand-primary) !important;
}

@media (max-width: 900px) {
	.socustom-hero { padding: 44px 24px !important; min-height: 440px; }
	.socustom-hero::after { background: linear-gradient(180deg, rgba(11,15,24,.85) 0%, rgba(11,15,24,.75) 60%, rgba(11,15,24,.9) 100%); }
	.socustom-hero .hp-form--listing-search .hp-form__field { flex: 1 1 100%; }
	.socustom-hero .hp-form--listing-search button { width: 100%; }
	.socustom-hero .wp-block-button { width: 100%; }
	.socustom-hero .wp-block-button__link { display: block; text-align: center; }
}

/* ==========================================================================
   33. HERO — correções com base no HTML real (v1.17.0)
   Confirmado: o bloco é <div class="wp-block-cover socustom-hero">, os
   títulos são PARÁGRAFOS (.has-large-font-size), e o hero fica dentro de
   .header-hero__content > .container, cuja faixa tem fundo claro no pai.
   ========================================================================== */

/* 33.1 A faixa em volta do hero deixa de ser cinza-claro */
.header-hero,
.header-hero--cover,
.header-hero__content {
	background-color: var(--bg-body) !important;
}

/* 33.2 Título do hero — são <p>, não <h1> */
.socustom-hero p.has-large-font-size,
.socustom-hero .wp-block-group p {
	color: #fff !important;
	font-size: clamp(30px, 4vw, 50px) !important;
	line-height: 1.05 !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin: 0 !important;
}

/* as duas linhas do título coladas, como um bloco só */
.socustom-hero .wp-block-group.is-vertical { gap: 2px !important; margin-bottom: 18px; }

/* 33.3 CUSTOM em laranja, sem itálico */
.socustom-hero em,
.socustom-hero i {
	color: var(--brand-primary) !important;
	font-style: normal !important;
	font-weight: 800;
}

/* 33.4 Linha de apoio */
.socustom-hero > .wp-block-cover__inner-container > p:not(.has-large-font-size) {
	color: var(--text) !important;
	font-size: 17px !important;
	line-height: 1.6;
	margin: 0 0 26px 0 !important;
	max-width: 460px;
}

/* 33.5 Conteúdo alinhado à esquerda, não centralizado */
.socustom-hero > .wp-block-cover__inner-container {
	max-width: 640px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	padding: 0 !important;
}

/* 33.6 A camada marrom que o WordPress coloca por cima da foto */
.socustom-hero .wp-block-cover__background { background: none !important; }

/* ==========================================================================
   34. HERO EM LARGURA TOTAL (v1.18.0)
   O bloco fica dentro de .header-hero__content > .container, que limita a
   largura. Aqui ele estoura esse limite e ocupa a tela inteira, mantendo
   o conteúdo alinhado com o resto do site.
   ========================================================================== */
.socustom-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0 !important;
	min-height: 560px !important;
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
}

/* conteúdo volta a respeitar a largura do site, alinhado à esquerda */
.socustom-hero > .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 0 24px !important;
}

/* o texto em si ocupa só a metade esquerda */
.socustom-hero .wp-block-group,
.socustom-hero > .wp-block-cover__inner-container > p,
.socustom-hero .hp-form--listing-search,
.socustom-hero .wp-block-buttons {
	max-width: 620px;
}

/* evita barra de rolagem horizontal por causa do 100vw */
html, body { overflow-x: hidden; }

/* a foto cobre toda a área do hero */
.socustom-hero .wp-block-cover__image-background {
	object-fit: cover !important;
	object-position: center right;
	width: 100% !important;
	height: 100% !important;
}

@media (max-width: 900px) {
	.socustom-hero { min-height: 480px !important; }
	.socustom-hero > .wp-block-cover__inner-container { padding: 0 18px !important; }
}

/* ==========================================================================
   35. BOTÕES DO HERO — ambos com contorno, laranja só no hover (v1.19.0)
   ========================================================================== */
.socustom-hero .wp-block-button .wp-block-button__link,
.socustom-hero .wp-block-button:first-child .wp-block-button__link,
.socustom-hero .wp-block-button:nth-child(2) .wp-block-button__link {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.5) !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.socustom-hero .wp-block-button .wp-block-button__link:hover,
.socustom-hero .wp-block-button .wp-block-button__link:focus,
.socustom-hero .wp-block-button .wp-block-button__link:active {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	color: #fff !important;
}

/* 35b. v1.19.1 — no hover o texto sumia: alguma regra do tema pintava o
   texto de laranja, igual ao fundo. Seletor mais específico + o conteúdo
   interno também forçado em branco. */
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:hover,
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:hover *,
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:focus,
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:focus *,
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:active,
.socustom-hero .wp-block-buttons .wp-block-button .wp-block-button__link:active * {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	opacity: 1 !important;
}

/* o texto interno não precisa repetir o fundo */
.socustom-hero .wp-block-button__link:hover *,
.socustom-hero .wp-block-button__link:focus * { background-color: transparent !important; }

/* ==========================================================================
   36. SEÇÕES DA HOME — cabeçalho "DESTAQUES + Ver todos" (v1.20.0)
   Classes a aplicar no editor:
     socustom-secao-topo  -> no bloco Grupo que tem o título e o link
     socustom-secao       -> no bloco de anúncios (ou no grupo da seção)
   ========================================================================== */
.socustom-secao-topo {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px;
	flex-wrap: wrap;
	margin: 56px 0 22px 0 !important;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}

.socustom-secao-topo h2,
.socustom-secao-topo h3,
.socustom-secao-topo p:first-child {
	margin: 0 !important;
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* link "Ver todos os anúncios" à direita */
.socustom-secao-topo a {
	color: var(--text-muted) !important;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
	text-decoration: none;
}
.socustom-secao-topo a:hover { color: var(--brand-primary) !important; }

/* espaçamento da seção de cards */
.socustom-secao { margin-bottom: 48px !important; }

/* ---- selo "Destaque" nos cards ---- */
.hp-listing--featured .hp-listing__featured-badge,
.hp-listing__featured-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--brand-primary) !important;
	color: #fff !important;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.hp-listing--view-block { position: relative; }

/* moldura sutil no anúncio destacado */
.hp-listing--featured.hp-listing--view-block {
	border-color: rgba(245,129,31,.55) !important;
}

@media (max-width: 640px) {
	.socustom-secao-topo { margin-top: 36px !important; }
	.socustom-secao-topo h2 { font-size: 18px !important; }
}

/* 36b. v1.20.1 — sem a borda laranja no anúncio destacado.
   O selo com a estrela já sinaliza o destaque; a moldura poluía. */
.hp-listing--featured.hp-listing--view-block,
.hp-listing--featured {
	border-color: var(--border) !important;
	box-shadow: none !important;
	outline: none !important;
}

/* ==========================================================================
   37. COMPRE POR MARCA — tira de logos (v1.21.0)
   Classe a aplicar no bloco Grupo (ou Galeria) que contém os logos:
     socustom-marcas
   ========================================================================== */
.socustom-marcas {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--brand-radius);
	padding: 26px 30px !important;
	margin-bottom: 48px !important;
}

/* cada logo */
.socustom-marcas figure,
.socustom-marcas .wp-block-image {
	margin: 0 !important;
	flex: 0 1 auto;
}

.socustom-marcas img {
	display: block;
	height: 34px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	/* os arquivos já vêm em branco com fundo transparente (v1.21.1),
	   então nenhum filtro é necessário */
	filter: none;
	opacity: .72;
	transition: opacity .15s ease, filter .15s ease, transform .15s ease;
}

.socustom-marcas a:hover img,
.socustom-marcas img:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* se você preferir os logos coloridos, comente o filter acima e use:
.socustom-marcas img { filter: none; opacity: 1; }
*/

@media (max-width: 900px) {
	.socustom-marcas {
		justify-content: center;
		gap: 20px 24px;
		padding: 22px 18px !important;
	}
	.socustom-marcas img { height: 26px; }
}

/* ==========================================================================
   38. MARCAS EM CARROSSEL INFINITO (v1.22.0)
   Estrutura no editor (dois Grupos aninhados):
     Grupo externo -> classe: socustom-marcas-wrap
       Grupo interno -> classe: socustom-marcas   (contém os logos DUAS vezes)
   A duplicação é o que permite o loop sem emenda: quando a fita anda
   metade do próprio comprimento, a segunda cópia está exatamente onde a
   primeira começou, e o reinício fica invisível.
   ========================================================================== */
.socustom-marcas-wrap {
	position: relative;
	overflow: hidden !important;
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--brand-radius);
	padding: 38px 0 !important;
	margin-bottom: 48px !important;
	/* desvanece as pontas, para os logos não "cortarem" na borda */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.socustom-marcas-wrap .socustom-marcas {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: flex-start !important;
	width: max-content !important;
	max-width: none !important;
	gap: 110px !important;
	background: none !important;
	border: none !important;
	padding: 0 0 0 110px !important;
	margin: 0 !important;
	animation: socustom-marquee 45s linear infinite;
}

@keyframes socustom-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* passa o mouse e a fita para, para dar tempo de clicar num logo */
.socustom-marcas-wrap:hover .socustom-marcas { animation-play-state: paused; }

.socustom-marcas-wrap .socustom-marcas figure,
.socustom-marcas-wrap .socustom-marcas .wp-block-image { flex: 0 0 auto; margin: 0 !important; }

.socustom-marcas-wrap .socustom-marcas img {
	height: 68px;
	max-width: none;
	width: auto;
	filter: none;
	opacity: .72;
	transition: opacity .15s ease, transform .15s ease;
}

.socustom-marcas-wrap .socustom-marcas a:hover img {
	opacity: 1;
	transform: scale(1.06);
}

/* quem prefere menos animação (ajuste do sistema) vê a tira parada */
@media (prefers-reduced-motion: reduce) {
	.socustom-marcas-wrap .socustom-marcas {
		animation: none;
		flex-wrap: wrap !important;
		width: auto !important;
		justify-content: center !important;
		gap: 40px !important;
		padding: 0 20px !important;
	}
}

@media (max-width: 640px) {
	.socustom-marcas-wrap { padding: 22px 0 !important; }
	.socustom-marcas-wrap .socustom-marcas { gap: 70px !important; padding-left: 70px !important; animation-duration: 32s; }
	.socustom-marcas-wrap .socustom-marcas img { height: 46px; }
}

/* ==========================================================================
   39. CABEÇALHO MAIOR E FAIXA VAZIA ACIMA DO HERO (v1.24.0)
   O tema pai aplica 96px de padding em cima e embaixo de .header-hero--large.
   Na home, onde o hero é uma imagem de largura total, isso vira uma faixa
   escura vazia entre o menu e a foto.
   ========================================================================== */
body.home .header-hero,
body.home .header-hero--large,
.header-hero:has(.socustom-hero) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* logo e barra do topo com mais presença */
.header-navbar {
	padding-top: 26px !important;
	padding-bottom: 26px !important;
}

.header-navbar__logo img,
.site-header .custom-logo,
.site-header__logo img {
	max-height: 118px !important;
	height: auto;
}

/* itens do menu acompanham o novo tamanho */
.header-navbar__menu > li > a {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .01em;
}

@media (max-width: 900px) {
	.header-navbar { padding-top: 14px !important; padding-bottom: 14px !important; }
	.header-navbar__logo img,
	.site-header .custom-logo { max-height: 68px !important; }
}

/* ==========================================================================
   40. CONSULTA DE PLACA no formulário de anúncio (v1.25.0)
   ========================================================================== */
.socustom-placa {
	background-color: var(--bg-surface-2);
	border: 1px solid var(--border);
	border-left: 3px solid var(--brand-primary);
	border-radius: var(--brand-radius);
	padding: 18px 20px;
	margin-bottom: 26px;
}

.socustom-placa__label {
	display: block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--brand-primary) !important;
	text-transform: uppercase;
	letter-spacing: .07em;
}

.socustom-placa__linha {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.socustom-placa__input {
	flex: 0 1 190px;
	height: 46px;
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	color: var(--text) !important;
	padding: 0 14px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
}

.socustom-placa__btn {
	height: 46px;
	padding: 0 26px;
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--brand-radius);
	font-weight: 700;
	cursor: pointer;
}
.socustom-placa__btn:disabled { opacity: .6; cursor: wait; }

.socustom-placa__msg {
	margin: 10px 0 0 !important;
	font-size: 13px;
	color: var(--text-muted) !important;
}
.socustom-placa__msg.is-ok { color: var(--brand-secondary) !important; }
.socustom-placa__msg.is-erro { color: #FCA5A5 !important; }

@media (max-width: 640px) {
	.socustom-placa__input { flex: 1 1 100%; }
	.socustom-placa__btn { width: 100%; }
}

/* ==========================================================================
   41. O QUE VOCÊ QUER FAZER HOJE? — três caminhos (v1.26.0)
   Classe no bloco Colunas: socustom-acoes
   ========================================================================== */
.socustom-acoes { margin: 10px 0 48px !important; gap: 20px !important; }
.socustom-acoes .wp-block-column {
	background-color: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px 26px !important;
	transition: border-color .15s ease, transform .15s ease;
}
.socustom-acoes .wp-block-column:hover { border-color: var(--brand-primary); transform: translateY(-3px); }
.socustom-acoes h3, .socustom-acoes h2 {
	color: #fff !important;
	font-size: 21px !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 10px !important;
	line-height: 1.15;
}
.socustom-acoes p { color: var(--text-muted) !important; font-size: 15px; line-height: 1.6; margin: 0 0 20px !important; }
.socustom-acoes .wp-block-button__link {
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,.45) !important;
	border-radius: 8px !important;
	padding: 12px 26px !important;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.socustom-acoes .wp-block-button__link:hover {
	background: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	color: #fff !important;
}

/* aviso de que somos marketplace de revenda, não concessionária */
.socustom-aviso-marcas {
	margin: -34px 0 44px !important;
	font-size: 12px !important;
	line-height: 1.6;
	color: var(--text-muted) !important;
	text-align: center;
	max-width: 780px;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media (max-width: 780px) {
	.socustom-acoes .wp-block-column { padding: 22px 20px !important; }
	.socustom-acoes h3 { font-size: 18px !important; }
}

/* 41b. v1.26.1 — botões alinhados na mesma linha de base.
   Os textos têm tamanhos diferentes; sem isso cada botão para numa altura. */
.socustom-acoes { align-items: stretch !important; }
.socustom-acoes .wp-block-column {
	display: flex !important;
	flex-direction: column !important;
}
.socustom-acoes .wp-block-column > h3,
.socustom-acoes .wp-block-column > h2 { min-height: 2.3em; display: flex; align-items: flex-start; }
.socustom-acoes .wp-block-column > p { flex: 1 1 auto; }
.socustom-acoes .wp-block-buttons {
	margin-top: auto !important;
	margin-bottom: 0 !important;
}
.socustom-acoes .wp-block-button { width: 100%; }
.socustom-acoes .wp-block-button__link { display: block; width: 100%; text-align: center; }
@media (max-width: 780px) {
	.socustom-acoes .wp-block-column > h3 { min-height: 0; }
}

/* ==========================================================================
   42. PÁGINA DE ANÚNCIOS — dois por fileira (v1.32.0)
   ========================================================================== */
.hp-template--listings-view-page .hp-row > .hp-grid__item,
.hp-template--listings-view-page .hp-grid__item {
	flex: 0 0 50% !important;
	max-width: 50% !important;
	width: 50% !important;
}

@media (max-width: 700px) {
	.hp-template--listings-view-page .hp-row > .hp-grid__item,
	.hp-template--listings-view-page .hp-grid__item {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}

/* ==========================================================================
   43. FILTROS EM BARRA HORIZONTAL NO TOPO (v1.33.0)
   A lateral vira uma faixa de largura total acima dos anúncios, com os
   campos lado a lado. O botão Filtro some: a busca aplica sozinha.
   ========================================================================== */
.hp-template--listings-view-page .hp-row { flex-wrap: wrap !important; }

.hp-template--listings-view-page .hp-page__sidebar {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	order: -1 !important;
	margin-bottom: 24px;
}

.hp-template--listings-view-page .hp-page__content {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* caixa única, sem moldura dentro de moldura */
.hp-widget--listing-filter {
	background-color: var(--bg-surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--brand-radius);
	padding: 16px 20px !important;
}
.hp-widget--listing-filter .hp-form--listing-filter,
.hp-widget--listing-filter .hp-form__fields {
	background: none !important;
	border: none !important;
	padding: 0 !important;
}

form.hp-form--listing-filter .hp-form__fields {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 18px;
}

form.hp-form--listing-filter .hp-form__field {
	flex: 1 1 190px;
	min-width: 160px;
	margin: 0 !important;
}

form.hp-form--listing-filter .hp-form__field--radio { flex: 1 1 100%; }

form.hp-form--listing-filter .hp-field--radio label,
form.hp-form--listing-filter .hp-field--radio > div {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 18px 0 0;
}

form.hp-form--listing-filter .hp-field__label {
	font-size: 10px;
	margin-bottom: 4px;
}

/* o botão some: filtramos ao escolher */
form.hp-form--listing-filter .hp-form__button,
form.hp-form--listing-filter [type=submit] { display: none !important; }

.socustom-filtrando { margin: 10px 0 0 !important; font-size: 12px; color: var(--text-muted) !important; }

@media (max-width: 700px) {
	form.hp-form--listing-filter .hp-form__field { flex: 1 1 100%; }
}

/* ==========================================================================
   43b. FILTRO DE CATEGORIAS COMPACTO (v1.34.0)
   As marcas viraram atributo (o select Marca ao lado), então as dez
   subcategorias de moto só ocupavam espaço. As demais viram linha única.
   ========================================================================== */

/* esconde as marcas listadas embaixo de Motos */
form.hp-form--listing-filter .hp-field--radio li:has( > label input[value="51"] ) > ul { display: none !important; }

/* opções lado a lado, em vez de uma por linha */
form.hp-form--listing-filter .hp-field--radio ul {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

form.hp-form--listing-filter .hp-field--radio li { margin: 0 !important; }

form.hp-form--listing-filter .hp-field--radio label {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
	font-size: 13px;
	white-space: nowrap;
}

/* subníveis não recuam mais: viram parte da mesma linha */
form.hp-form--listing-filter .hp-field--radio ul ul {
	margin-left: 20px !important;
	padding-left: 20px !important;
	border-left: 1px solid var(--border);
}


/* ==========================================================================
   43c. BOTOES DE SELECAO VISIVEIS NO FILTRO (v2.19.1)
   ========================================================================== */

form.hp-form--listing-filter label::before,
form.hp-form--listing-filter label::after {
	content: none !important;
	display: none !important;
}

form.hp-form--listing-filter label,
form.hp-form--listing-filter .hp-field--radio label,
form.hp-form--listing-filter .hp-field--radio > div {
	display: inline-block !important;
	padding-left: 0 !important;
	cursor: pointer;
}

form.hp-form--listing-filter input[type="radio"],
form.hp-form--listing-filter input[type="checkbox"] {
	-webkit-appearance: auto !important;
	appearance: auto !important;
	display: inline-block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 15px !important;
	height: 15px !important;
	min-width: 15px !important;
	margin: 0 7px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	clip: auto !important;
	clip-path: none !important;
	pointer-events: auto !important;
	vertical-align: -2px;
	accent-color: #f5811f;
	cursor: pointer;
}


/* ==========================================================================
   43d. UM SELETOR SO (v2.19.2)
   O tema desenha a bolinha em span::before/::after (verde). Como agora
   mostramos o controle nativo do navegador em laranja, apagamos o desenho
   do tema dentro do filtro para nao aparecerem dois seletores.
   ========================================================================== */

form.hp-form--listing-filter label span::before,
form.hp-form--listing-filter label span::after {
	content: none !important;
	display: none !important;
}

form.hp-form--listing-filter label span {
	padding-left: 0 !important;
	position: static !important;
}


/* ==========================================================================
   43e. ALINHAMENTO DOS CAMPOS DO FILTRO (v2.21.0)
   Preco, Ano e Quilometragem sao faixas: alem dos dois numeros eles tem a
   barra deslizante embaixo, entao sao mais altos. Com os campos alinhados
   pela base, o seletor de Marca "afundava". Alinhamos pelo topo.
   ========================================================================== */

form.hp-form--listing-filter .hp-form__fields {
	align-items: flex-start !important;
}


/* ==========================================================================
   44. BANNER DAS CATEGORIAS SEM A FAIXA (v2.22.0)
   O titulo da categoria ficava numa tarja solida por cima da foto. Aqui a
   tarja vira um degrade transparente: a foto aparece inteira e o texto
   continua legivel porque o escuro so entra atras das letras.
   ========================================================================== */

.hp-listing-category--view-page .header-hero__content {
	background-color: transparent !important;
	background-image: linear-gradient(
		to bottom,
		rgba( 11, 15, 24, 0 ) 0%,
		rgba( 11, 15, 24, 0.45 ) 40%,
		rgba( 11, 15, 24, 0.8 ) 100%
	) !important;
}

.hp-listing-category--view-page .hp-listing-category__name,
.hp-listing-category--view-page .hp-listing-category__description,
.hp-listing-category--view-page .hp-listing-category__count {
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.65 );
}


/* ==========================================================================
   45. HOME: BANNER COLADO NO HEADER (v2.23.0)
   O respiro de 64px vem do .site-content, nao do banner. So na home ele e
   zerado, para a foto comecar onde o cabecalho termina.
   ========================================================================== */

body.home .site-content { padding-top: 0 !important; }


/* ==========================================================================
   46. REVISAO GERAL (v2.24.0)
   Achados percorrendo home, anuncios, anuncio, categorias, cadastro, conta,
   configuracoes e pagina de erro.
   ========================================================================== */

/* 46a. Textos secundarios estavam escuros sobre fundo escuro: a contagem de
   resultados e a data do anuncio ficavam praticamente invisiveis. */
.hp-result-count,
.hp-listing__created-date,
.hp-listing__date,
.hp-vendor__registered-date {
	color: var( --text-muted, #9aa5b5 ) !important;
	opacity: 1 !important;
}

/* 46b. O botao "Adicionar anuncio" do topo era verde, unico elemento verde
   do site fora do WhatsApp. Passa a usar o laranja da marca, como os demais. */
.header-navbar .hp-menu__item--listing-submit.button,
.site-header .hp-menu__item--listing-submit.button {
	background-color: var( --brand, #f5811f ) !important;
	border-color: var( --brand, #f5811f ) !important;
	color: #fff !important;
}

.header-navbar .hp-menu__item--listing-submit.button:hover,
.site-header .hp-menu__item--listing-submit.button:hover {
	background-color: #d96f16 !important;
	border-color: #d96f16 !important;
}

/* 46c. O botao "Filtro" do celular vinha com texto escuro sobre laranja,
   diferente de todos os outros botoes laranja. */
.hp-button--listing-filter {
	color: #fff !important;
}

/* 46d. No celular o filtro abre num modal. Ali o envio automatico recarrega
   a pagina a cada toque, entao devolvemos o botao "Filtro" para a pessoa
   escolher tudo e aplicar de uma vez. */
@media ( max-width: 700px ) {

	.hp-modal form.hp-form--listing-filter .hp-form__button,
	.hp-modal form.hp-form--listing-filter [type="submit"] {
		display: block !important;
		width: 100%;
		margin-top: 8px;
	}
}


/* ==========================================================================
   47. PAGINA DE ERRO (v2.25.0)
   ========================================================================== */

.socustom-404 {
	text-align: center;
	padding: 72px 16px 96px;
}

.socustom-404__codigo {
	font-size: 84px;
	line-height: 1;
	font-weight: 800;
	margin: 0 0 8px;
	color: var( --brand, #f5811f );
	letter-spacing: 2px;
}

.socustom-404__titulo {
	font-size: 30px;
	margin: 0 0 14px;
	color: var( --text, #e8ecf2 );
}

.socustom-404__texto {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 auto 28px;
	max-width: 460px;
	color: var( --text-muted, #9aa5b5 );
}

.socustom-404__acoes {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}


/* ==========================================================================
   48. AVISO DE FOTO OBRIGATORIA (v2.26.0)
   ========================================================================== */

.socustom-aviso-foto {
	background-color: rgba( 245, 129, 31, 0.12 );
	border: 1px solid var( --brand, #f5811f );
	border-radius: var( --brand-radius, 10px );
	color: var( --text, #e8ecf2 );
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.5;
}


/* ==========================================================================
   49. CAIXA ALTA NOS TITULOS E BOTOES (v2.27.0)
   O logo, os rotulos dos campos e as secoes da home ja eram em caixa alta;
   os titulos de pagina e os botoes nao, e isso destoava. Aplicamos so em
   titulo, menu e botao — texto corrido continua normal, porque paragrafo
   inteiro em maiuscula fica dificil de ler.
   ========================================================================== */

.site-content h1,
.site-content h2,
.site-content h3,
.hp-page__title,
.hp-listing__title,
.hp-listing-category__name,
.hp-vendor__name,
.hp-widget__title,
.widget-title,
.hp-modal__title,
.header-hero__content h1,
.header-hero__content h2 {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* botoes: os de acao principal ganham o mesmo peso do resto da marca */
.button,
.hp-button,
.hp-form__button,
button.button,
[type="submit"].button,
.header-navbar__menu > ul > li > a,
.socustom-placa__btn,
.socustom-404__acoes a,
.footer-navbar__menu a {
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

/* o "404" e a placa nao precisam: ja sao numero e sigla */
.socustom-404__codigo,
.socustom-placa__input {
	letter-spacing: normal;
}


/* 49b. menus de conta (o dropdown do topo e a coluna do painel) */
.header-navbar .hp-menu__item,
.hp-menu--user-account .hp-menu__item,
.site-sidebar .hp-menu__item,
.hp-menu--listing-categories .hp-menu__item {
	text-transform: uppercase;
	letter-spacing: 0.5px;
}


/* ==========================================================================
   50. BARRA DE PESQUISA BRANCA (v2.28.0)
   ========================================================================== */

form.hp-form--listing-search input[type="text"],
form.hp-form--listing-search input[type="search"],
form.hp-form--listing-search select,
form.hp-form--listing-search .select2-selection {
	background-color: #fff !important;
	color: #0f1420 !important;
	border-color: #fff !important;
}

form.hp-form--listing-search input::placeholder {
	color: #6b7280 !important;
	opacity: 1;
}

form.hp-form--listing-search .select2-selection__rendered,
form.hp-form--listing-search .select2-selection__placeholder {
	color: #0f1420 !important;
}

form.hp-form--listing-search .select2-selection__arrow b {
	border-top-color: #0f1420 !important;
}

form.hp-form--listing-search input:focus,
form.hp-form--listing-search select:focus {
	box-shadow: 0 0 0 3px rgba( 245, 129, 31, 0.35 );
}


/* 50b. o CSS geral dos campos usa varios :not() e vencia a regra acima;
   aqui repetimos a mesma forma para ganhar em especificidade. */
form.hp-form--listing-search input.hp-field:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="file"]),
form.hp-form--listing-search select.hp-field {
	background-color: #fff !important;
	color: #0f1420 !important;
	border-color: #fff !important;
}


/* ==========================================================================
   51. CARDS PADRONIZADOS (v2.29.0)
   O tema define a altura da foto por JavaScript. Quando o anuncio tem uma
   foto so, ou quando a imagem demora, essa conta falha e o card fica mais
   alto que os vizinhos. Aqui a proporcao e fixada no CSS (4:3), a foto
   preenche a area recortando o excesso, e o preco fica colado embaixo,
   entao todos os cards da fileira terminam na mesma linha.
   ========================================================================== */

.hp-listing__image {
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	overflow: hidden;
	background-color: #0f1420;
}

.hp-listing__image a,
.hp-listing__image .slick-list,
.hp-listing__image .slick-track,
.hp-listing__image .slick-slide,
.hp-listing__image .slick-slide > div {
	height: 100% !important;
}

.hp-listing__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* cards da mesma fileira com a mesma altura */
.hp-grid,
.hp-row > .hp-grid {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
}

.hp-grid__item {
	display: flex !important;
}

.hp-grid__item > .hp-listing {
	width: 100%;
	display: flex !important;
	flex-direction: column;
}

/* titulo de duas linhas nao empurra o resto do card */
.hp-listing--view-block .hp-listing__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

/* preco sempre no rodape do card */
.hp-listing--view-block .hp-listing__attributes--primary,
.hp-listing--view-block .hp-listing__footer {
	margin-top: auto !important;
}




/* 52b. A pedido do cliente (set/2026): foto em pe volta a ser RECORTADA
   para 4:3, como a deitada — a grade fica uniforme. O tratamento de
   fundo borrado foi removido; a regra de recorte e a da secao 51
   (object-fit: cover). A foto inteira continua na pagina do anuncio. */


/* ==========================================================================
   53. SELO DO PREMIUM (v2.33.0)
   ========================================================================== */

.socustom-premium {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background-color: var( --brand, #f5811f );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	line-height: 1;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.45 );
	pointer-events: none;
}

.socustom-premium::before {
	content: "★";
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0;
}

/* um selo so por card: onde entra o Premium, a estrela padrao sai */
.hp-listing__header:has( .socustom-premium ) .hp-listing__featured-badge {
	display: none !important;
}

.hp-listing__header {
	position: relative;
}

/* na pagina do anuncio o selo fica no fluxo, nao sobre a foto */
.hp-listing--view-page .socustom-premium {
	position: static;
	margin-bottom: 12px;
	box-shadow: none;
}


/* ==================================================================
   SECAO 54. CONTA DO ANUNCIANTE - titulo quebrando letra a letra
   ================================================================== */
.hp-page table,
.hp-listings--view-table table {
	table-layout: auto !important;
	width: 100%;
}

.hp-page table td,
.hp-page table th {
	word-break: normal !important;
	overflow-wrap: break-word;
	hyphens: none;
	white-space: normal !important;
}

.hp-page table td:first-child,
.hp-page table th:first-child {
	min-width: 11rem;
}

.hp-page table .hp-listing__title,
.hp-page table .hp-listing__title a {
	word-break: normal !important;
	white-space: normal !important;
	display: block;
}

/* ==================================================================
   SECAO 55. SELO PREMIUM - mais legivel
   ================================================================== */
.socustom-premium {
	background-color: #0f1623 !important;
	background-image: linear-gradient( 135deg, #1b2435 0%, #0b0f18 100% ) !important;
	color: #ffffff !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 1.4px !important;
	padding: 6px 13px !important;
	border: 1px solid rgba( 245, 129, 31, 0.9 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
	box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.6 ) !important;
}

.socustom-premium::before {
	color: #f5811f;
	font-size: 12px !important;
}

/* ==================================================================
   SECAO 56. FOTOS DO ANUNCIO EM FEED HORIZONTAL
   ================================================================== */
.hp-listing__images {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0.75rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scroll-padding: 0;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: rgba( 245, 129, 31, 0.7 ) transparent;
}

.hp-listing__images::-webkit-scrollbar {
	height: 6px;
}

.hp-listing__images::-webkit-scrollbar-thumb {
	background: rgba( 245, 129, 31, 0.7 );
	border-radius: 999px;
}

.hp-listing__images > * {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	scroll-snap-align: center;
	margin: 0 !important;
}

.hp-listing__images img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}


/* ==================================================================
   SECAO 57. SELO DESTAQUE no mesmo estilo do Premium
   ================================================================== */
.hp-listing--featured .hp-listing__featured-badge,
.hp-listing__featured-badge.hp-listing__featured {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	padding: 6px 13px !important;
	border-radius: 999px !important;
	background: linear-gradient( 135deg, #1b2435 0%, #0b0f18 100% ) !important;
	border: 1px solid rgba( 245, 129, 31, 0.9 );
	color: #ffffff !important;
	box-shadow: 0 3px 14px rgba( 0, 0, 0, 0.6 ) !important;
}

.hp-listing--featured .hp-listing__featured-badge i,
.hp-listing__featured-badge.hp-listing__featured i {
	color: #f5811f !important;
	font-size: 12px !important;
}

.hp-listing--featured .hp-listing__featured-badge::after,
.hp-listing__featured-badge.hp-listing__featured::after {
	content: "DESTAQUE";
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	color: #ffffff;
	line-height: 1;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
}

.hp-listing__header:has( .socustom-premium ) .hp-listing__featured-badge {
	display: none !important;
}

/* ==================================================================
   SECAO 58. GALERIA DO ANUNCIO - setas e miniaturas
   ================================================================== */
.socustom-galeria {
	position: relative;
}

.socustom-seta {
	position: absolute;
	top: 50%;
	margin-top: -50px;
	transform: translateY( -50% );
	z-index: 4;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: rgba( 11, 15, 24, 0.78 );
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	box-shadow: 0 2px 12px rgba( 0, 0, 0, 0.5 );
	transition: background 0.15s ease, opacity 0.15s ease;
}

.socustom-seta:hover {
	background: #f5811f;
}

.socustom-seta--ant { left: 10px; }
.socustom-seta--prox { right: 10px; }

.socustom-seta[disabled] {
	opacity: 0.25;
	cursor: default;
}

.socustom-miniaturas {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	margin-top: 10px;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.socustom-miniaturas img {
	flex: 0 0 auto;
	width: 84px;
	height: 63px;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.45;
	border: 2px solid transparent;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.socustom-miniaturas img:hover { opacity: 0.8; }

.socustom-miniaturas img.ativa {
	opacity: 1;
	border-color: #f5811f;
}

.socustom-galeria--unica .socustom-seta,
.socustom-galeria--unica .socustom-miniaturas {
	display: none;
}

@media ( max-width: 700px ) {
	.socustom-seta { width: 36px; height: 36px; font-size: 16px; }
	.socustom-miniaturas img { width: 64px; height: 48px; }
}

/* ==================================================================
   SECAO 59. TABELA DE ANUNCIOS DA CONTA - colunas e alinhamento
   ================================================================== */
.hp-page table td,
.hp-page table th {
	vertical-align: middle !important;
	word-break: normal !important;
	overflow-wrap: break-word !important;
	hyphens: none !important;
}

/* categoria e data nao quebram no meio da palavra */
.hp-page table td:nth-child( 2 ),
.hp-page table th:nth-child( 2 ),
.hp-page table td:nth-child( 3 ),
.hp-page table th:nth-child( 3 ) {
	white-space: nowrap !important;
	width: 1%;
}

/* coluna de acoes: icones sempre na mesma linha */
.hp-page table td:last-child,
.hp-page table th:last-child {
	white-space: nowrap !important;
	width: 1%;
	text-align: right;
}

.hp-page table td:last-child a,
.hp-page table td:last-child i {
	display: inline-block;
	margin-left: 0.75rem;
}

/* no celular a tabela rola de lado em vez de espremer as colunas */
@media ( max-width: 700px ) {
	.hp-page table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}


/* ==================================================================
   SECAO 60. TABELA DE ANUNCIOS no estilo da tabela de Pedidos
   ================================================================== */
.hp-page table {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: rgba( 255, 255, 255, 0.02 );
	border: 1px solid rgba( 255, 255, 255, 0.09 );
	border-radius: 12px;
	overflow: hidden;
}

.hp-page table td.hp-listing__title,
.hp-page table td.hp-listing__categories,
.hp-page table td.hp-listing__created-date,
.hp-page table td.hp-listing__status,
.hp-page table tr > td:last-child {
	padding: 18px 20px !important;
	border-top: 0 !important;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 ) !important;
	vertical-align: middle !important;
}

.hp-page table tr:last-child > td {
	border-bottom: 0 !important;
}

.hp-page table tr:hover > td {
	background: rgba( 255, 255, 255, 0.03 );
}

.hp-page table td.hp-listing__title {
	min-width: 12rem;
	font-weight: 600;
	letter-spacing: 0.3px;
}

.hp-page table td.hp-listing__title i {
	margin-right: 0.6rem;
	opacity: 0.65;
}

.hp-page table td.hp-listing__categories,
.hp-page table td.hp-listing__created-date {
	white-space: nowrap !important;
	width: 1%;
	color: rgba( 230, 233, 239, 0.62 );
}

.hp-page table td.hp-listing__status {
	white-space: nowrap !important;
	width: 1%;
	font-size: 12px;
	letter-spacing: 0.6px;
}

.hp-page table tr > td:last-child {
	white-space: nowrap !important;
	width: 1%;
	text-align: right;
}

.hp-page table tr > td:last-child a {
	margin-left: 0.9rem;
	opacity: 0.75;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.hp-page table tr > td:last-child a:hover {
	opacity: 1;
	color: #f5811f;
}


/* ==================================================================
   SECAO 61. CABECALHO E COLUNA DE ACOES DA TABELA DE ANUNCIOS
   ================================================================== */
.hp-page table thead th {
	padding: 16px 20px !important;
	background: rgba( 255, 255, 255, 0.035 );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.09 ) !important;
	color: rgba( 230, 233, 239, 0.55 );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}

.hp-page table thead th:last-child {
	text-align: right;
}

.hp-page table td.socustom-acoes {
	padding: 18px 20px !important;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 ) !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
	width: 1%;
	text-align: right;
}

.hp-page table td.socustom-acoes > * {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.9rem;
	opacity: 0.75;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.hp-page table td.socustom-acoes > *:hover {
	opacity: 1;
	color: #f5811f;
}

/* celulas vazias criadas para igualar as colunas */
.hp-page table td:empty {
	border-bottom: 1px solid rgba( 255, 255, 255, 0.07 ) !important;
}

.hp-page table tr:last-child > td {
	border-bottom: 0 !important;
}


/* ==================================================================
   SECAO 62. COLUNAS DA TABELA DE ANUNCIOS SEMPRE ALINHADAS
   ------------------------------------------------------------------
   O tema deixa a celula do titulo como "block" e esconde a de status
   quando ela esta vazia. Celula que nao e table-cell sai da grade da
   tabela, e por isso as colunas escorregavam de linha para linha.
   ================================================================== */
.hp-page table.hp-listings > tbody > tr > td,
.hp-page table.hp-listings > tr > td,
.hp-page table.hp-listings td.hp-listing__title,
.hp-page table.hp-listings td.hp-status {
	display: table-cell !important;
}

@media ( max-width: 700px ) {
	.hp-page table.hp-listings,
	.hp-page table.hp-listings > tbody {
		display: block;
	}

	.hp-page table.hp-listings > tbody > tr {
		display: block;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.07 );
	}

	.hp-page table.hp-listings > tbody > tr > td {
		display: block !important;
		padding: 6px 16px !important;
		border: 0 !important;
	}

	.hp-page table.hp-listings thead {
		display: none;
	}
}
/* 63. O X de excluir foto sumia da miniatura. Nao era bug do clique: o HivePress
   esconde esse botao com display:none sempre que o campo de imagens e obrigatorio,
   e quem marcou obrigatorio foi a 54.4 socustom_foto_obrigatoria. O envio sem foto
   ja e barrado no servidor pela 54.10, entao esconder o X aqui era redundante. */
.hp-field--attachment-upload[data-required="true"] .hp-field__button--delete {
	display: flex;
}

/* ==================================================================
   64. MENU DO CELULAR (burger) — 15/10/2026
   O botao do menu tinha area de toque de 14x16 px, colado no "+ Anunciar":
   o toque errava e caia no Anunciar. O painel aberto era branco, com
   itens de 25 px de altura, o "Entrar" em texto claro (invisivel) e o X de
   fechar quase transparente.
   ================================================================== */
.header-navbar__burger > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: 6px;
	font-size: 22px;
	color: var(--text) !important;
}

.header-navbar__burger > ul.menu {
	background: var(--bg-body) !important;
	padding: 64px 24px 32px !important;
	overflow-y: auto;
}

.header-navbar__burger > ul.menu::before {
	color: var(--text) !important;
	font-size: 24px !important;
	top: 18px !important;
	right: 20px !important;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.header-navbar__burger > ul.menu > li {
	border-bottom: 1px solid var(--border);
}

.header-navbar__burger > ul.menu > li > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 4px !important;
	font-size: 18px !important;
	font-weight: 600;
	color: var(--text) !important;
}

.header-navbar__burger > ul.menu > li > a i,
.header-navbar__burger > ul.menu > li > a .hp-icon {
	color: var(--brand-primary) !important;
}

.header-navbar__burger > ul.menu > li.current-menu-item > a,
.header-navbar__burger > ul.menu > li > a:active {
	color: var(--brand-primary) !important;
}

/* submenus da conta (quando logado) */
.header-navbar__burger > ul.menu ul {
	background: transparent !important;
	padding-left: 12px !important;
}
.header-navbar__burger > ul.menu ul a {
	color: var(--text-muted) !important;
	font-size: 16px !important;
	padding: 10px 4px !important;
	display: block;
}
/* 64b. Logado: o submenu da conta (Anuncios, Pedidos, Configuracoes, Sair)
   fica sempre aberto no painel do celular, em vez de esconder atras do nome. */
.header-navbar__burger > ul.menu > li > ul {
	display: block !important;
	position: static !important;
	box-shadow: none !important;
	margin: 0 0 8px !important;
	padding: 0 0 0 30px !important;
}
.header-navbar__burger > ul.menu > li > ul > li { border: 0 !important; }

/* 64c. O botao do menu so existe abaixo de 75em (1200 px), como no tema.
   A 64 forcou display:inline-flex e ele passou a aparecer no computador,
   ao lado do menu completo. */
@media only screen and (min-width: 75em) {
	.header-navbar__burger > a { display: none !important; }
}

/* 64d. Submenu "Sobre" no computador: largo o bastante para "Dicas de Seguranca" em uma linha */
.header-navbar__menu > ul > li > ul { min-width: 240px; }
.header-navbar__menu > ul > li > ul a { white-space: nowrap; }
/* no celular, "Sobre" e so um titulo: os itens ja aparecem abertos embaixo */
.header-navbar__burger > ul.menu > li > a[href="#"] { color: var(--text-muted) !important; pointer-events: none; }