/* 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: 1200 / 630; 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: 1200 / 630; 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: 112px 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: 112px; height: auto; aspect-ratio: 1200 / 630; 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); }

/* ===== Ajustes de UX/acessibilidade/mobile (auditoria de 2026-10-21) ===== */

/* Banner de categoria: desligado ate haver arte nova. Todas as categorias ficam com o mesmo layout (titulo + descricao em HTML) */
.h-ui .h-cover { display: none; }

/* Listagem: toolbar (contagem, Filtrar no mobile, Ordenar por) */
.h-ui .h-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--h-s-3); margin: 0 0 var(--h-s-4); }
.h-ui .h-toolbar__count { flex: 1 1 auto; margin: 0; font-size: var(--h-fs-sm); font-weight: 700; color: var(--h-n-700); }
.h-ui .h-sort { display: flex; align-items: center; gap: var(--h-s-2); margin: 0; }
.h-ui .h-sort__label { font-size: var(--h-fs-sm); font-weight: 700; white-space: nowrap; }
.h-ui .h-sort .h-select { width: auto; min-width: 190px; }
.h-ui .h-sort__go { display: none; }
html:not(.h-js) .h-ui .h-sort__go { display: inline-flex; }
.h-ui .h-filter-toggle { display: none; }
.h-ui .h-filter-head, .h-ui .h-filter-foot, .h-ui .h-filter-overlay { display: none; }
.h-ui .h-filter-toggle .i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Filtros: alvos de 44px e foco visivel (as caixas ficam invisiveis mas focaveis: o legado usava display:none) */
.h-ui .workcontrol_filter_form_item .workcontrol_filter_form_item_options label input[type="checkbox"] { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.h-ui .workcontrol_filter_form_item label { position: relative; }
.h-ui .workcontrol_filter_form_item label:focus-within { outline: 2px solid var(--h-n-900); outline-offset: 2px; }
.h-ui .workcontrol_filter_form_item.price input#amount { width: 100%; min-height: 44px; margin: 0 0 var(--h-s-2); }
.h-ui #slider_price .ui-slider-handle { height: 28px; }
.h-ui #slider_price .ui-slider-handle:focus-visible { outline: 2px solid var(--h-n-900); outline-offset: 2px; background: #fff; }
/* "Fragrancia": nome completo em lista (antes: codigos truncados em 3 colunas) */
.h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options { display: block; padding: var(--h-s-2) var(--h-s-3); }
.h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check { display: flex; align-items: center; justify-content: flex-start; flex-basis: auto; width: 100%; height: auto; min-height: 36px; margin: 0 0 var(--h-s-1); padding: 4px var(--h-s-3); font-size: var(--h-fs-sm); font-weight: 700; line-height: 1.3; text-transform: none; color: var(--h-n-700); border-radius: var(--h-r-sm); background: var(--h-n-100); }
.h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check:nth-child(odd), .h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check:nth-child(even) { background: var(--h-n-100); }
.h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check.active:nth-child(odd), .h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check.active:nth-child(even) { color: var(--h-n-0); background: var(--h-n-900); }

@media (max-width: 991px) {
  .h-ui .h-toolbar__count { flex-basis: 100%; }
  .h-ui .h-filter-toggle { display: inline-flex; flex: 0 0 auto; }
  .h-ui .h-sort { flex: 1 1 200px; }
  .h-ui .h-sort .h-select { flex: 1 1 auto; min-width: 0; }
  .h-ui .h-sort__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Gaveta */
  .h-ui .h-filter-overlay { display: block; position: fixed; inset: 0; z-index: 2290; background: rgba(11, 11, 11, .55); opacity: 0; transition: opacity 200ms ease; }
  .h-ui .h-filter-overlay[hidden] { display: none; }
  .h-ui .h-filter-overlay.is-open { opacity: 1; }
  .h-ui .h-page--filter > .workcontrol_filter { position: fixed; top: 0; bottom: 0; left: 0; z-index: 2300; display: flex; flex-direction: column; width: min(90vw, 380px); max-width: none; background: var(--h-n-0); box-shadow: var(--h-sh-2);
    transform: translateX(-100%); visibility: hidden; transition: transform 240ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 240ms; }
  .h-ui .h-page--filter > .workcontrol_filter.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .h-ui .h-filter-head { display: flex; flex: none; align-items: center; justify-content: space-between; padding: var(--h-s-2) var(--h-s-2) var(--h-s-2) var(--h-s-4); border-bottom: 1px solid var(--h-n-200); }
  .h-ui .h-filter-head__title { margin: 0; font: 600 var(--h-fs-h3)/1.2 var(--h-font-display); }
  .h-ui .h-filter-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: var(--h-n-900); background: none; border: 0; border-radius: var(--h-r-sm); cursor: pointer; }
  .h-ui .h-filter-close .i { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
  .h-ui .h-page--filter > .workcontrol_filter .workcontrol_filter_form { position: static; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--h-s-4); }
  .h-ui .h-filter-foot { display: flex; flex: none; gap: var(--h-s-3); padding: var(--h-s-3) var(--h-s-4); background: var(--h-n-0); border-top: 1px solid var(--h-n-200); }
  .h-ui .h-filter-foot .h-btn { flex: 1 1 0; }
  /* itens de lista com 44px de altura */
  .h-ui .workcontrol_filter_form_item.brand label, .h-ui .workcontrol_filter_form_item.department label, .h-ui .workcontrol_filter_form_item.discount label { min-height: 44px; margin-bottom: 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 { display: flex; align-items: center; width: 100%; min-height: 44px; }
  .h-ui .workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check { min-height: 44px; }
  .h-ui .workcontrol_filter_form_item.color .workcontrol_filter_form_item_options .label_check, .h-ui .workcontrol_filter_form_item.print .workcontrol_filter_form_item_options .label_check { height: 44px; }
  .h-ui #slider_price { margin-block: var(--h-s-3); }
  .h-ui #slider_price .ui-slider-handle { height: 44px; width: 28px; top: -12px; }
  .h-ui .workcontrol_filter_form_item { overflow: visible; }
}

/* Cards: titulo ate 3 linhas (a fragrancia vem no fim do nome e nao pode ser cortada) */
.h-ui .h-card__title { -webkit-line-clamp: 3; line-clamp: 3; }

/* Barra de beneficios do mobile: sem palavra orfa */
.h-ui .h-hd__perks-compact, .h-ui .h-bar__compact { text-wrap: balance; }

/* Breadcrumb: o separador acompanha o item anterior (nunca abre uma linha com "/"); alvos de 44px no mobile */
.h-ui .h-crumbs li + li::before { content: none; }
.h-ui .h-crumbs li:not(:last-child)::after { content: "/"; margin-inline: var(--h-s-2); color: var(--h-n-300); }
@media (max-width: 991px) {
  .h-ui .h-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .h-ui .h-crumbs li { min-height: 44px; }
  .h-ui .h-crumbs [aria-current="page"] { overflow-wrap: anywhere; }
  .h-ui .h-ft__links a, .h-ui .h-ft__contact a { min-height: 44px; }
  .h-ui .h-post__meta a, .h-ui .h-meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Texto vindo do painel (paginas institucionais, "Sobre o produto"): leitura confortavel em 68ch.
   O conteudo do banco traz estilos inline (font-size:11px, justify, font-family): aqui prevalece a tipografia da loja */
.h-ui .h-prose :where(p, li, span, div, font, strong, b, em, i, u, a, td, th, blockquote) { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; text-align: left !important; }
.h-ui .h-prose :where(p, li, span, div, font, em, i, a) { color: inherit !important; background: transparent !important; }
.h-ui .h-prose :where(strong, b) { font-weight: 700; }
.h-ui .h-prose .h-prose__sub { margin: var(--h-s-6) 0 var(--h-s-2); font: 600 var(--h-fs-h3)/1.25 var(--h-font-display) !important; color: var(--h-n-900); text-transform: none; letter-spacing: 0; }
.h-ui .h-prose > .h-prose__sub:first-child { margin-top: 0; }
.h-ui .h-pdp__desc .h-prose .h-prose__sub { font-size: var(--h-fs-lg) !important; }

/* Capa de artigo recortada (sem tarjas) */
.h-ui .h-article__cover.is-cropped img { object-fit: contain; }
.h-ui .blog-comments .comment .comments_author { display: block; font-size: var(--h-fs-base); font-weight: 700; line-height: 1.4; }
.h-ui .nw { white-space: nowrap; }