/* Empyre - Sistema de design GLOBAL (casca nova).
   Carregado so quando $H_UI (index.php raiz): previa do administrador ou, depois de promovido, todos.
   ESCOPO: tudo sob .h-ui (classe do <body>) com prefixo h-. Nenhum reset fora de .h-ui.
   O legado (style.min.css) e carregado ANTES e tem regras de elemento globais (* {margin/padding:0}, input/select/textarea {padding:10px; width:100%},
   select com seta em PNG, body {padding-top:56px}, ul {list-style:none}, .btn/.container/.content/.paginator/.htmlchars) e o presets.php injeta
   * { font-family }. Aqui:
     - componentes novos usam classes h-* (sem colidir com .btn/.container do legado);
     - o que precisa vencer o legado usa .h-ui + classe (especificidade 0,2,0) ou :where(.h-ui) (0) quando so quer "ficar por baixo".
   Este arquivo nao define regra de elemento solta (.h-ui p {...}): a home (home.css) depende de :where(.h-home) p { margin: 0 } e quebraria.
   Tipografia de texto corrido fica em .h-prose. Ordem de carga: style.min.css, toast.css, ds.css, shell.css, (home.css). */

/* ===== Tokens (mesmos valores da home; .h-ui herda para todo o body) ===== */
.h-ui {
  --h-n-900: #0b0b0b; --h-n-700: #2a2a2a; --h-n-500: #6b6b6b; --h-n-300: #c9c5bd;
  --h-n-200: #e6e2db; --h-n-100: #f4f2ee; --h-n-0: #ffffff;
  --h-accent: #c9a45c;          /* preenchimento; texto preto em cima 8,4:1 */
  --h-accent-ink: #6f5424;      /* texto/icone de acento sobre claro (7,7:1 no branco) */
  --h-accent-soft: #f3ead8;
  --h-ok: #1f6b43; --h-ok-bg: #e7f3ec;
  --h-err: #a62b2b; --h-err-bg: #fbeaea;
  --h-info-bg: #f4f2ee;
  --h-font-body: "Lato", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --h-font-display: "Domine", Georgia, "Times New Roman", serif;
  --h-fs-xs: .75rem; --h-fs-sm: .875rem; --h-fs-base: 1rem; --h-fs-lg: 1.125rem;
  --h-fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --h-fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --h-fs-h1: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --h-lh-tight: 1.15;
  --h-s-1: 4px; --h-s-2: 8px; --h-s-3: 12px; --h-s-4: 16px; --h-s-5: 24px; --h-s-6: 32px; --h-s-7: 48px; --h-s-8: 64px;
  --h-gutter: 16px; --h-container: 1280px; --h-measure: 68ch;
  --h-r-sm: 4px; --h-r-lg: 12px;
  --h-sh-1: 0 1px 2px rgba(11,11,11,.06), 0 2px 8px rgba(11,11,11,.06);
  --h-sh-2: 0 8px 28px rgba(11,11,11,.16);
  --h-t: 160ms cubic-bezier(.2,.7,.2,1);
  --h-focus: 0 0 0 2px #fff, 0 0 0 4px #0b0b0b;
}
@media (min-width: 768px) { .h-ui { --h-gutter: 24px; } }

/* ===== Base ===== */
/* O legado poe body {padding-top:56px} (menu mobile fixo antigo): o cabecalho novo nao e fixo no mobile */
body.h-ui { padding: 0; margin: 0; font: 400 var(--h-fs-base)/1.5 var(--h-font-body); color: var(--h-n-900); background: var(--h-n-0); -webkit-text-size-adjust: 100%; }
/* presets.php injeta * { font-family: Lato }: aqui so garante a fonte da marca sem pisar nos icones (.fa/.icon-*, que tem especificidade maior) */
:where(.h-ui) * { font-family: var(--h-font-body); }
:where(.h-ui) img { max-width: 100%; height: auto; }

/* Foco visivel unico (contorno: nao e cortado por overflow); a home mantem o anel por sombra (home.css) */
.h-ui :focus-visible { outline: 2px solid var(--h-n-900); outline-offset: 2px; }
.h-ui :focus:not(:focus-visible) { outline: none; }

.h-ui .h-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* Link "Pular para o conteudo" */
.h-ui .h-skip { position: absolute; left: var(--h-s-2); top: -80px; z-index: 3000; padding: var(--h-s-3) var(--h-s-4); background: var(--h-n-0); color: var(--h-n-900); font-weight: 700; border-radius: var(--h-r-sm); box-shadow: var(--h-sh-2); text-decoration: none; }
.h-ui .h-skip:focus { top: var(--h-s-2); }
.h-ui main:focus { outline: none; }

/* Icone: unico estilo (24x24, traco 1,5, currentColor) */
.h-ui .i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.h-ui .i--sm { width: 18px; height: 18px; } .h-ui .i--lg { width: 32px; height: 32px; }

.h-ui .h-wrap { width: 100%; max-width: var(--h-container); margin-inline: auto; padding-inline: var(--h-gutter); }

/* ===== Texto: titulos e links ===== */
.h-ui .h-title { margin: 0; font: 600 var(--h-fs-h1)/var(--h-lh-tight) var(--h-font-display); color: var(--h-n-900); }
.h-ui .h-h2 { margin: 0; font: 600 var(--h-fs-h2)/var(--h-lh-tight) var(--h-font-display); }
.h-ui .h-h3 { margin: 0; font: 600 var(--h-fs-h3)/1.25 var(--h-font-display); }
.h-ui .h-lead { margin: var(--h-s-3) 0 0; max-width: var(--h-measure); font-size: var(--h-fs-lg); line-height: 1.5; color: var(--h-n-700); }
.h-ui .h-muted { color: var(--h-n-500); }
.h-ui .h-link { color: var(--h-n-900); font-weight: 700; text-decoration: underline; text-decoration-color: var(--h-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.h-ui .h-link:hover { color: var(--h-accent-ink); }

/* ===== Layout de pagina ===== */
.h-ui .h-page { padding-block: var(--h-s-5) var(--h-s-7); }
.h-ui .h-page__head { margin-bottom: var(--h-s-5); }
@media (min-width: 992px) { .h-ui .h-page { padding-block: var(--h-s-6) var(--h-s-8); } }

/* Cobertura de categoria: altura reservada (sem layout shift) */
.h-ui .h-cover { aspect-ratio: 16 / 5; margin-bottom: var(--h-s-5); overflow: hidden; border-radius: var(--h-r-lg); background: var(--h-n-100); }
.h-ui .h-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Breadcrumbs */
.h-ui .h-crumbs { margin-bottom: var(--h-s-4); font-size: var(--h-fs-sm); color: var(--h-n-500); }
.h-ui .h-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--h-s-1) 0; margin: 0; padding: 0; list-style: none; }
.h-ui .h-crumbs li { display: inline-flex; align-items: center; }
.h-ui .h-crumbs li + li::before { content: "/"; margin-inline: var(--h-s-2); color: var(--h-n-300); }
.h-ui .h-crumbs a { color: var(--h-n-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--h-n-300); }
.h-ui .h-crumbs a:hover { color: var(--h-n-900); text-decoration-color: var(--h-accent); }
.h-ui .h-crumbs [aria-current="page"] { color: var(--h-n-900); font-weight: 700; }

/* ===== Botoes: primario preto solido / contorno ===== */
.h-ui .h-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--h-s-2); min-height: 44px; margin: 0; padding: 0 var(--h-s-5);
  font: 700 var(--h-fs-sm)/1 var(--h-font-body); letter-spacing: .02em; text-transform: none; text-decoration: none; text-shadow: none; cursor: pointer;
  border: 1.5px solid var(--h-n-900); border-radius: var(--h-r-sm); background: var(--h-n-900); color: var(--h-n-0); box-shadow: none; transition: background var(--h-t), color var(--h-t), border-color var(--h-t); }
.h-ui .h-btn:hover { background: var(--h-n-700); color: var(--h-n-0); }
.h-ui .h-btn--outline { background: transparent; color: var(--h-n-900); }
.h-ui .h-btn--outline:hover { background: var(--h-n-900); color: var(--h-n-0); }
.h-ui .h-btn--on-dark { background: var(--h-n-0); color: var(--h-n-900); border-color: var(--h-n-0); }
.h-ui .h-btn--on-dark:hover { background: var(--h-accent); border-color: var(--h-accent); color: var(--h-n-900); }
.h-ui .h-btn--block { display: flex; width: 100%; }
.h-ui .h-btn[disabled], .h-ui .h-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Selo */
.h-ui .h-badge { display: inline-block; padding: 3px var(--h-s-2); font: 700 var(--h-fs-xs)/1.2 var(--h-font-body); letter-spacing: .06em; text-transform: none; border-radius: var(--h-r-sm); background: var(--h-n-900); color: var(--h-n-0); }
.h-ui .h-badge--sale { background: var(--h-accent); color: var(--h-n-900); }

/* ===== Formularios (classes novas; vencem input/select/textarea {padding:10px; width:100%} do legado) ===== */
.h-ui .h-field { display: block; margin: 0 0 var(--h-s-4); }
.h-ui .h-label { display: block; margin: 0 0 var(--h-s-1); font-size: var(--h-fs-sm); font-weight: 700; color: var(--h-n-900); }
.h-ui .h-hint { display: block; margin-top: var(--h-s-1); font-size: var(--h-fs-sm); color: var(--h-n-500); }
.h-ui .h-error { display: block; margin-top: var(--h-s-1); font-size: var(--h-fs-sm); font-weight: 700; color: var(--h-err); }
.h-ui .h-input, .h-ui .h-select, .h-ui .h-textarea { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 var(--h-s-4); font: 400 var(--h-fs-base)/1.5 var(--h-font-body); color: var(--h-n-900);
  background: var(--h-n-0); border: 1.5px solid var(--h-n-500); border-radius: var(--h-r-sm); box-shadow: none; -webkit-appearance: none; appearance: none; }
.h-ui .h-textarea { min-height: 120px; padding: var(--h-s-3) var(--h-s-4); resize: vertical; }
.h-ui .h-select { padding-right: 44px; cursor: pointer; background-color: var(--h-n-0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px; }
.h-ui .h-input::placeholder, .h-ui .h-textarea::placeholder { color: var(--h-n-500); opacity: 1; }
.h-ui .h-input:hover, .h-ui .h-select:hover, .h-ui .h-textarea:hover { border-color: var(--h-n-900); }
.h-ui .h-input:focus-visible, .h-ui .h-select:focus-visible, .h-ui .h-textarea:focus-visible { border-color: var(--h-n-900); outline: 2px solid var(--h-n-900); outline-offset: 1px; }
.h-ui .h-input[aria-invalid="true"], .h-ui .h-textarea[aria-invalid="true"], .h-ui .h-select[aria-invalid="true"] { border-color: var(--h-err); }
.h-ui .h-check { display: flex; align-items: flex-start; gap: var(--h-s-3); min-height: 44px; padding-block: var(--h-s-2); cursor: pointer; }
.h-ui .h-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; accent-color: var(--h-n-900); }

/* Avisos inline do tema novo (os .trigger do sistema continuam em toast.css) */
.h-ui .h-note { display: flex; gap: var(--h-s-3); align-items: flex-start; margin: 0 0 var(--h-s-4); padding: var(--h-s-4); font-size: var(--h-fs-base); border-radius: var(--h-r-sm); background: var(--h-info-bg); border-left: 4px solid var(--h-n-900); color: var(--h-n-900); }
.h-ui .h-note--ok { background: var(--h-ok-bg); border-left-color: var(--h-ok); }
.h-ui .h-note--err { background: var(--h-err-bg); border-left-color: var(--h-err); }
.h-ui .h-note--accent { background: var(--h-accent-soft); border-left-color: var(--h-accent); }
.h-ui .h-note p { margin: 0; }

/* Estado vazio */
.h-ui .h-empty { display: grid; justify-items: center; gap: var(--h-s-3); padding: var(--h-s-7) var(--h-s-4); text-align: center; background: var(--h-n-100); border-radius: var(--h-r-lg); }
.h-ui .h-empty .i { width: 40px; height: 40px; color: var(--h-accent-ink); }
.h-ui .h-empty p { margin: 0; max-width: 46ch; color: var(--h-n-700); }

/* ===== Tabelas ===== */
.h-ui .h-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.h-ui .h-table { width: 100%; border-collapse: collapse; font-size: var(--h-fs-base); }
.h-ui .h-table caption { padding: 0 0 var(--h-s-3); text-align: left; font-weight: 700; }
.h-ui .h-table th, .h-ui .h-table td { padding: var(--h-s-3) var(--h-s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--h-n-200); }
.h-ui .h-table thead th { font-size: var(--h-fs-sm); font-weight: 700; background: var(--h-n-100); border-bottom: 1.5px solid var(--h-n-900); }
.h-ui .h-table tbody tr:hover { background: var(--h-n-100); }

/* ===== Grade de produtos: cartoes com a MESMA altura (botao sempre na base) ===== */
.h-ui .h-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--h-s-3); margin: 0; padding: 0; list-style: none; align-items: stretch; }
.h-ui .h-grid > * { min-width: 0; }
@media (min-width: 768px) { .h-ui .h-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h-s-4); } }
@media (min-width: 1100px) { .h-ui .h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===== Card de produto (inc/product-card.php) fora da home =====
   Mesmas regras do home.css (la escopadas em .h-home). Resets locais porque o legado nao reseta a, button, h3 nem p. */
.h-ui .h-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--h-n-0); border: 1px solid var(--h-n-200); border-radius: var(--h-r-lg); overflow: hidden; transition: box-shadow var(--h-t); }
.h-ui .h-card:hover { box-shadow: var(--h-sh-1); }
.h-ui .h-card a:not(.h-btn) { color: inherit; text-decoration: none; }
.h-ui .h-card p, .h-ui .h-card h3 { margin: 0; padding: 0; }
.h-ui .h-card button:not(.h-btn) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.h-ui .h-card__media { position: relative; display: block; aspect-ratio: 1; background: #fff; }
.h-ui .h-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--h-s-3); }
.h-ui .h-card__badge { position: absolute; left: var(--h-s-3); top: var(--h-s-3); z-index: 1; }
.h-ui .h-card__fav { position: absolute; right: var(--h-s-2); top: var(--h-s-2); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; color: var(--h-n-900); }
.h-ui .h-card__fav:hover { color: var(--h-accent-ink); }
.h-ui .h-card__fav.active .i, .h-ui .h-card__fav[aria-pressed="true"] .i { fill: currentColor; }
.h-ui .h-card__body { display: flex; flex-direction: column; gap: var(--h-s-1); padding: var(--h-s-1) var(--h-s-4) var(--h-s-4); flex: 1; }
.h-ui .h-card__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; font: 400 var(--h-fs-base)/1.35 var(--h-font-body); }
.h-ui .h-card__title a:hover { text-decoration: underline; }
.h-ui .h-card__price { margin-top: var(--h-s-2); font: 700 var(--h-fs-lg)/1.2 var(--h-font-body); }
.h-ui .h-card__price del { display: block; margin: 0; font-weight: 400; font-size: var(--h-fs-sm); color: var(--h-n-500); }
.h-ui .h-card__sub { min-height: 2.8em; margin-bottom: var(--h-s-3); font-size: var(--h-fs-sm); line-height: 1.4; color: var(--h-n-500); }
.h-ui .h-card__sub span { display: block; }
.h-ui .h-card__cta { margin-top: auto; }
/* Dentro do carrossel legado da pagina de produto (owl): itens com a mesma altura */
.h-ui .owl-carousel .owl-stage { display: flex; }
.h-ui .owl-carousel .owl-item { display: flex; float: none; flex: none; }
.h-ui .owl-carousel .owl-item > .h-card { width: 100%; height: auto; margin: 0 4px; }

/* ===== Paginacao (ul.paginator do Pager; o JS/PHP nao muda) ===== */
.h-ui .h-pager { margin-top: var(--h-s-6); }
.h-ui .paginator { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--h-s-2); width: auto; margin: var(--h-s-6) 0 0; padding: 0; list-style: none; }
.h-ui .paginator li { display: block; }
.h-ui .paginator li a, .h-ui .paginator li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0 var(--h-s-3); font-size: var(--h-fs-base); font-weight: 700; line-height: 1; text-shadow: none;
  color: var(--h-n-900); background: var(--h-n-0); border: 1.5px solid var(--h-n-300); border-radius: var(--h-r-sm); text-decoration: none; }
.h-ui .paginator li a:hover { background: var(--h-n-100); border-color: var(--h-n-900); }
.h-ui .paginator li span { color: var(--h-n-0); background: var(--h-n-900); border-color: var(--h-n-900); }

/* ===== Texto corrido: pagina institucional e artigo (medida de linha 68ch) ===== */
.h-ui .h-prose { max-width: var(--h-measure); font-size: var(--h-fs-lg); line-height: 1.7; color: var(--h-n-900); overflow-wrap: break-word; }
.h-ui .h-prose > :first-child { margin-top: 0; }
.h-ui .h-prose p, .h-ui .h-prose ul, .h-ui .h-prose ol, .h-ui .h-prose blockquote, .h-ui .h-prose figure, .h-ui .h-prose table, .h-ui .h-prose pre { margin: 0 0 var(--h-s-5); }
.h-ui .h-prose h2, .h-ui .h-prose h3, .h-ui .h-prose h4 { margin: var(--h-s-7) 0 var(--h-s-3); font-family: var(--h-font-display); font-weight: 600; line-height: 1.25; color: var(--h-n-900); }
.h-ui .h-prose h2 { font-size: var(--h-fs-h2); }
.h-ui .h-prose h3 { font-size: var(--h-fs-h3); }
.h-ui .h-prose h4 { font-size: var(--h-fs-lg); }
.h-ui .h-prose h2 *, .h-ui .h-prose h3 *, .h-ui .h-prose h4 * { font-family: inherit; }
.h-ui .h-prose ul { list-style: disc; padding-left: 1.4em; }
.h-ui .h-prose ol { list-style: decimal; padding-left: 1.6em; }
.h-ui .h-prose li { margin: 0 0 var(--h-s-2); padding-left: .2em; }
.h-ui .h-prose li::marker { color: var(--h-accent-ink); }
.h-ui .h-prose a { color: var(--h-n-900); text-decoration: underline; text-decoration-color: var(--h-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.h-ui .h-prose a:hover { color: var(--h-accent-ink); }
.h-ui .h-prose strong, .h-ui .h-prose b { font-weight: 700; }
.h-ui .h-prose img { display: block; max-width: 100%; height: auto; margin: var(--h-s-5) 0; border-radius: var(--h-r-sm); }
.h-ui .h-prose iframe, .h-ui .h-prose video { display: block; max-width: 100%; border: 0; }
.h-ui .h-prose blockquote { padding: var(--h-s-2) var(--h-s-5); border-left: 3px solid var(--h-accent); color: var(--h-n-700); font-family: var(--h-font-display); font-style: italic; }
.h-ui .h-prose hr { margin: var(--h-s-6) 0; border: 0; border-top: 1px solid var(--h-n-200); }
.h-ui .h-prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--h-fs-base); }
.h-ui .h-prose th, .h-ui .h-prose td { padding: var(--h-s-3) var(--h-s-4); text-align: left; border-bottom: 1px solid var(--h-n-200); }
.h-ui .h-prose th { background: var(--h-n-100); border-bottom: 1.5px solid var(--h-n-900); }
.h-ui .h-prose pre { overflow-x: auto; padding: var(--h-s-4); font-size: var(--h-fs-sm); background: var(--h-n-100); border-radius: var(--h-r-sm); }
/* formularios dentro de paginas institucionais (conteudo vem do painel) */
.h-ui .h-prose form { padding: var(--h-s-5); background: var(--h-n-100); border-radius: var(--h-r-lg); }
.h-ui .h-prose label { display: block; margin-bottom: var(--h-s-3); font-size: var(--h-fs-sm); font-weight: 700; }
.h-ui .h-prose input[type="text"], .h-ui .h-prose input[type="email"], .h-ui .h-prose input[type="tel"], .h-ui .h-prose select, .h-ui .h-prose textarea { width: 100%; min-height: 44px; padding: var(--h-s-2) var(--h-s-4); font: inherit; border: 1.5px solid var(--h-n-500); border-radius: var(--h-r-sm); background: var(--h-n-0); }
.h-ui .h-prose button, .h-ui .h-prose input[type="submit"] { min-height: 44px; padding: 0 var(--h-s-5); font: 700 var(--h-fs-sm)/1 var(--h-font-body); color: var(--h-n-0); background: var(--h-n-900); border: 1.5px solid var(--h-n-900); border-radius: var(--h-r-sm); cursor: pointer; text-shadow: none; }
.h-ui .h-prose--article { font-size: 1.1875rem; line-height: 1.75; }

/* ===== Blog ===== */
.h-ui .h-split { display: grid; gap: var(--h-s-7); }
@media (min-width: 992px) { .h-ui .h-split { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--h-s-8); align-items: start; } }
.h-ui .h-posts { display: grid; gap: var(--h-s-6); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .h-ui .h-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-ui .h-post { display: flex; flex-direction: column; height: 100%; background: var(--h-n-0); border: 1px solid var(--h-n-200); border-radius: var(--h-r-lg); overflow: hidden; }
.h-ui .h-post__media { display: block; aspect-ratio: 16 / 9; background: var(--h-n-100); }
.h-ui .h-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-ui .h-post__body { display: flex; flex-direction: column; gap: var(--h-s-2); flex: 1; padding: var(--h-s-4) var(--h-s-4) var(--h-s-5); }
.h-ui .h-post__title { margin: 0; font: 600 var(--h-fs-h3)/1.25 var(--h-font-display); }
.h-ui .h-post__title a { color: var(--h-n-900); text-decoration: none; }
.h-ui .h-post__title a:hover { text-decoration: underline; text-decoration-color: var(--h-accent); text-underline-offset: 3px; }
.h-ui .h-post__text { margin: 0; color: var(--h-n-700); }
.h-ui .h-post__cta { margin-top: auto; align-self: flex-start; }
.h-ui .h-meta { display: flex; flex-wrap: wrap; gap: var(--h-s-1) var(--h-s-4); margin: 0; padding: 0; list-style: none; font-size: var(--h-fs-sm); color: var(--h-n-500); }
.h-ui .h-meta li { display: inline-flex; align-items: center; gap: 6px; }
.h-ui .h-meta a { color: var(--h-n-700); }
.h-ui .h-article__cover { aspect-ratio: 16 / 9; margin: var(--h-s-5) 0; overflow: hidden; border-radius: var(--h-r-lg); background: var(--h-n-100); }
.h-ui .h-article__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h-ui .h-article__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-s-2); max-width: var(--h-measure); margin-top: var(--h-s-6); padding-top: var(--h-s-4); border-top: 1px solid var(--h-n-200); font-size: var(--h-fs-sm); }
.h-ui .h-aside { display: grid; gap: var(--h-s-6); }
.h-ui .h-aside__title { margin: 0 0 var(--h-s-3); font: 700 var(--h-fs-sm)/1.2 var(--h-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--h-accent-ink); }
.h-ui .h-aside ul { margin: 0; padding: 0; list-style: none; }
.h-ui .h-aside li a { display: flex; justify-content: space-between; gap: var(--h-s-3); align-items: center; min-height: 44px; color: var(--h-n-900); text-decoration: none; border-bottom: 1px solid var(--h-n-200); }
.h-ui .h-aside li a:hover { text-decoration: underline; text-decoration-color: var(--h-accent); }
.h-ui .h-aside__form { display: flex; gap: var(--h-s-2); }
.h-ui .h-aside__form .h-input { flex: 1 1 auto; min-width: 0; }
.h-ui .h-recent { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--h-s-3); align-items: center; margin-bottom: var(--h-s-3); }
.h-ui .h-recent img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--h-r-sm); }
.h-ui .h-recent a { color: var(--h-n-900); text-decoration: none; font-weight: 700; line-height: 1.3; }
.h-ui .h-recent a:hover { text-decoration: underline; }
.h-ui .h-recent time { display: block; font-size: var(--h-fs-sm); color: var(--h-n-500); }

/* Comentarios do artigo. O comentario novo chega por AJAX com o HTML legado (.comment/.comment-img): mesmos seletores. */
.h-ui .blog-comments { max-width: var(--h-measure); margin-top: var(--h-s-7); }
.h-ui .blog-comments .comments-count { margin: 0 0 var(--h-s-4); font: 600 var(--h-fs-h3)/1.25 var(--h-font-display); }
.h-ui .blog-comments .comment { margin-bottom: var(--h-s-4); padding: var(--h-s-4); background: var(--h-n-100); border-radius: var(--h-r-lg); }
.h-ui .blog-comments .comment .d-flex { display: flex; gap: var(--h-s-3); }
.h-ui .blog-comments .comment-img img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.h-ui .blog-comments .comment h5 { margin: 0; font-size: var(--h-fs-base); font-weight: 700; }
.h-ui .blog-comments .comment time { display: block; margin-bottom: var(--h-s-2); font-size: var(--h-fs-sm); color: var(--h-n-500); }
.h-ui .blog-comments .comment p { margin: 0; }
.h-ui .blog-comments .reply-form { margin-top: var(--h-s-6); }
.h-ui .blog-comments .reply-form h2 { margin: 0 0 var(--h-s-2); }

/* ===== Ajustes do legado dentro da casca nova ===== */
/* Filtro de produtos (widget legado, painel lateral recolhido): sem cabecalho fixo, ocupa a altura toda por cima da pagina */
.h-ui .workcontrol_filter { top: 0; z-index: 2000; }
/* Aviso de login ao favoritar (markup e JS legados; so o visual e novo) */
.h-ui .force_login { top: 0; height: 100vh; height: 100dvh; background: rgba(11, 11, 11, .6); z-index: 2500; }
.h-ui .force_login_content { height: auto; max-height: 92vh; overflow-y: auto; padding-bottom: var(--h-s-6); border-radius: var(--h-r-lg); box-shadow: var(--h-sh-2); }
.h-ui .force_login_content_close { padding: var(--h-s-2) var(--h-s-3); margin-bottom: var(--h-s-3); background: var(--h-n-0); box-shadow: none; }
.h-ui .force_login_content_close button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; color: var(--h-n-900); background: none; border: 0; border-radius: 999px; cursor: pointer; }
.h-ui .force_login_content_close button:hover { background: var(--h-n-100); }
.h-ui .force_login_content img { width: 120px; height: 120px; margin-inline: auto; }
.h-ui .force_login_content_message { padding: var(--h-s-4) var(--h-s-5) var(--h-s-5); font-size: var(--h-fs-lg); font-weight: 400; line-height: 1.5; color: var(--h-n-900); }
.h-ui .force_login_content_button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--h-s-6); font-size: var(--h-fs-sm); font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--h-n-0); background: var(--h-n-900); border: 1.5px solid var(--h-n-900); border-radius: var(--h-r-sm); text-decoration: none; }
.h-ui .force_login_content_button:hover { background: var(--h-n-700); }
.h-ui .alert_newsletter { display: none; }

@media (prefers-reduced-motion: reduce) {
  .h-ui *, .h-ui *::before, .h-ui *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Complementos das paginas (404, busca sem resultado) ===== */
.h-ui .h-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--h-s-2); font: 700 var(--h-fs-sm)/1 var(--h-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--h-accent-ink); }
.h-ui .h-notfound { padding-block: var(--h-s-6) var(--h-s-7); }
.h-ui .h-notfound .h-btn { margin-top: var(--h-s-3); }
.h-ui .h-notfound__products { margin-top: var(--h-s-6); }
.h-ui .h-notfound__products .h-h2 { margin-bottom: var(--h-s-5); }
.h-ui .h-cat-links { display: flex; flex-wrap: wrap; gap: var(--h-s-2); justify-content: center; margin: var(--h-s-3) 0 0; padding: 0; list-style: none; }
.h-ui .h-prose h1 { margin: var(--h-s-7) 0 var(--h-s-3); font: 600 var(--h-fs-h2)/1.2 var(--h-font-display); }
.h-ui .blog-comments .comment h3 { margin: 0; font: 700 var(--h-fs-base)/1.4 var(--h-font-body); }

/* ===== Listagem com filtro (widget legado _cdn/widgets/filter/filter.php: painel fixo no mobile, coluna lateral >= 992px) ===== */
.h-ui .h-page__main { min-width: 0; }
@media (min-width: 992px) {
  .h-ui .h-page--filter { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 var(--h-s-6); align-items: start; }
  .h-ui .h-page--filter > .workcontrol_filter { position: sticky; top: 140px; float: none; left: auto; width: auto; max-height: calc(100vh - 160px); overflow-y: auto; background: transparent; z-index: 1; }
}
.h-ui .workcontrol_filter_form { padding: 0; }
.h-ui .workcontrol_filter_form_item { margin-bottom: var(--h-s-4); border: 1px solid var(--h-n-200); border-radius: var(--h-r-sm); background: var(--h-n-0); box-shadow: none; overflow: hidden; }
.h-ui .workcontrol_filter_form_item p { margin: 0; padding: var(--h-s-3); font-size: var(--h-fs-sm); font-weight: 700; color: var(--h-n-0); background: var(--h-n-900); border-radius: 0; }
.h-ui .workcontrol_filter_form_item.brand label span, .h-ui .workcontrol_filter_form_item.department label span, .h-ui .workcontrol_filter_form_item.discount label span { font-size: var(--h-fs-sm); color: var(--h-n-700); }
.h-ui .workcontrol_filter_form_item.brand label span:hover, .h-ui .workcontrol_filter_form_item.brand label span.active,
.h-ui .workcontrol_filter_form_item.department label span:hover, .h-ui .workcontrol_filter_form_item.department label span.active,
.h-ui .workcontrol_filter_form_item.discount label span:hover, .h-ui .workcontrol_filter_form_item.discount label span.active { color: var(--h-n-900); font-weight: 700; text-decoration: underline; text-decoration-color: var(--h-accent); text-underline-offset: 3px; }
.h-ui .workcontrol_filter_form_item.size .label_check.active:nth-child(odd), .h-ui .workcontrol_filter_form_item.size .label_check.active:nth-child(even) { color: var(--h-n-0); background: var(--h-n-900); }
.h-ui .workcontrol_filter_access { background: var(--h-n-900); color: var(--h-n-0); box-shadow: var(--h-sh-1); }