/* Marketplace Católico — sistema visual compartilhado das telas públicas de busca/perfil e do
   painel de vendedor.

   REUSO DELIBERADO (Regra Global 2 + memória "Design sempre do ecossistema certo"): tokens de
   cor/tipografia/sombra copiados 1:1 de ~/projetos/hub-id/web/styles.css (id.hubcatolico.com) —
   mesmo warm ink/paper + Inter já em produção no Hub ID e no widget hubid.js. O marketplace é
   "sob Hub Católico" (BRIEFING.md §2), não um brand novo — não inventar paleta.
   Referências aplicadas (Design Taste Stack, Regra Global 4):
     - impeccable/spatial-design: ritmo de espaçamento em escala 4/8px, hierarquia de peso.
     - taste-skill: badges/pills sóbrios (inspirado em figma.com — ver site-corporate-refs.md
       #5 "cards-pill" — mas paleta contida em vez de multi-cor, porque o tom aqui é
       institucional/confiança, mais perto de carta.com #6 "sobriedade financial").
     - emil-design-eng: microinteração de hover/active nos botões e cards (translateY + shadow),
       mesmo princípio já usado em hid-btn (hubid.js).

   ATUALIZAÇÃO 2026-09-16 (BRIEFING.md §5.2): busca livre + filtros novos, hero-slider de
   anuncio.html e gerenciador de fotos do painel — mesmos tokens, sem paleta nova. Motion do
   slider deliberadamente contido (crossfade .5s, sem parallax/zoom) — mesma leitura de
   impeccable/motion-design usada no resto do produto: confiança institucional, não vitrine.

   ATUALIZAÇÃO 2026-09-16 (identidade oficial aplicada, BRIEFING.md §5.4): a pendência de logo
   ACABOU — os 6 arquivos de assets/logo/ são exports mecânicos reais do .ai do Thiago (nunca
   redesenhados em código, Regra Global 3). --accent trocou do vinho herdado do Hub ID pro
   vermelho real da marca (#ff293a, amostrado do vetor). Contraste (Regra Global 4 + WCAG AA):
   o vermelho vivo sozinho só dá 3.73:1 com texto branco em cima (reprova AA pra texto normal,
   que exige 4.5:1) — por isso existe --accent-deep (#b3172a), usado em toda combinação
   texto-sobre-fundo ou fundo-sobre-texto-branco (botão CTA, pill de desconto). --accent puro
   fica pra usos não-textuais (acento decorativo, acompanhado de texto escuro). Números reais
   no relatório de entrega do marketplace-catalog.
   Pills (categoria/destaque/verificado/desconto/status) usam --r-pill:999px — mesma lógica de
   forma que hubid.js já usa pro chip de app conectado (.app-st, .chip, linha ~113/156 de
   ~/projetos/hub-id/web/styles.css) e pro botão de login (.hid-trigger, border-radius:999px,
   linha ~48) — reuso deliberado (Regra Global 2), não peça nova.
*/

:root{
  --ink:#1c1a17; --ink-2:#4a443c; --mut:#9a8f80;
  --paper:#fbf7f0; --card:#fffdfa; --line:#e9e0d2; --line-2:#f0e9dc; --field:#f6f1e7;
  --accent:#ff293a; --accent-deep:#b3172a; --accent-deep-hover:#8f1220; --accent-ink:#fff;
  --danger:#9b2222; --ok:#2f7a4f; --warn:#a06a1c;
  --shadow:0 24px 60px rgba(40,30,18,.14); --shadow-sm:0 2px 10px rgba(40,30,18,.06);
  --r:16px; --r-sm:10px; --r-pill:999px;
  color-scheme: light;
  font-synthesis-weight:none;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* O ecossistema Hub Católico não tem modo escuro definido ainda em nenhum produto
       (Hub ID/Romaria+ também não têm) — mantemos o mesmo warm-paper claro em vez de inventar
       um dark mode não pedido nem validado pelo Thiago. */
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.muted{color:var(--mut)}
.tiny{font-size:12px}

/* ---------- topo ---------- */
.mkt-top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  background:rgba(251,247,240,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.mkt-top-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:13px 22px}
.mkt-brand{display:flex; align-items:center; gap:9px; font-weight:650; font-size:15px}
.mkt-logo{height:24px; width:auto; display:block}
.mkt-brand .mkt-logo-fallback{display:none; font-weight:700; letter-spacing:-.01em}
.mkt-nav{display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.mkt-nav a:hover{color:var(--ink)}
.mkt-top-spacer{margin-left:auto}

/* ---------- topo: botões compartilhados do ecossistema (Regra Global 7) ----------
   Mesmo padrão topnav__map/topnav__live replicado nos ~24 sites do Hub (ver
   reference_hubmenu_unificado + documenta.hubcatolico.com, que também adapta cor por
   site em vez de usar branco-sobre-escuro). Aqui adaptado pro tema claro do marketplace
   (tokens --ink/--field em vez de branco/rgba(255,255,255,...) do padrão hero-escuro). */
.mkt-eco-actions{display:flex; align-items:center; gap:8px}
.topnav__map{display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  border:0; cursor:pointer; background:var(--field); color:var(--ink-2); transition:background .2s,color .2s}
.topnav__map:hover{background:var(--line-2); color:var(--ink)}
.topnav__map svg{width:13px; height:13px}
.topnav__live{display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto;
  height:30px; min-width:30px; padding:0; border-radius:15px; background:var(--field);
  text-decoration:none; pointer-events:none; cursor:default; opacity:.5;
  transition:background .2s,opacity .2s,padding .2s}
.topnav__live-dot{width:8px; height:8px; border-radius:50%; background:var(--ink-2); flex:0 0 auto}
.topnav__live-label{display:none; font:600 12px/1 inherit; color:#fff; white-space:nowrap}
.topnav__live.on-air{opacity:1; background:#c42020; pointer-events:auto; cursor:pointer; padding:0 14px}
.topnav__live.on-air:hover{background:#9e1818}
.topnav__live.on-air .topnav__live-dot{background:#fff; animation:topnav-live-pulse 1.4s ease-in-out infinite}
.topnav__live.on-air .topnav__live-label{display:inline}
@keyframes topnav-live-pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  50%{opacity:.55; box-shadow:0 0 0 5px rgba(255,255,255,0)}}

/* ---------- layout ---------- */
.mkt-wrap{max-width:1120px; margin:0 auto; padding:30px 22px 90px}
.mkt-wrap-narrow{max-width:640px; margin:0 auto; padding:30px 22px 90px}
.mkt-page-h{margin:6px 0 26px}
.mkt-page-h h1{font-size:27px; letter-spacing:-.02em; margin:0 0 5px; font-weight:650}
.mkt-page-h p{margin:0; color:var(--mut); font-size:14.5px}

/* ---------- banner de demonstração (?demo=1) ---------- */
.mkt-demo-banner{background:#fff4de; border:1px solid #e8cf9c; color:#6b4c17;
  border-radius:var(--r-sm); padding:10px 14px; font-size:13px; margin-bottom:20px; line-height:1.5}
.mkt-demo-banner b{color:#4a3610}

/* ---------- layout de duas colunas da busca (BRIEFING.md §5.3, 2026-09-16) ----------
   Coluna esquerda (.mkt-filters-col) FIXA na tela com rolagem própria e independente;
   coluna direita (.mkt-board-col) é o board de anúncios, rola normalmente com a página.
   Mecanismo: position:sticky (não fixed) ancorado logo abaixo do header sticky real —
   --header-h é medido em JS (index.html, syncHeaderOffset) porque a altura do header muda
   com font-loading/viewport e travar um valor fixo no CSS quebraria em telas reais; o CSS
   já traz um fallback de 64px pro primeiro paint antes do JS rodar. overflow-y:auto só
   aparece quando o conteúdo dos filtros é mais alto que o espaço sobrando (max-height),
   então a página em si nunca rola por causa dos filtros — só o miolo deles.
   Acessibilidade: nenhum tabindex artificial na coluna — o scroll nativo do navegador já
   traz o campo focado pra dentro da área visível ao tabular (comportamento padrão de
   scroll containers), sem trap de foco (não há captura de keydown aqui). Testado via
   webapp-testing/Playwright (ver relatório do marketplace-catalog).
   Referência aplicada (Design Taste Stack): impeccable/spatial-design — duas colunas com
   ritmo de espaçamento consistente com o resto do produto (mesmo --r/--shadow-sm dos cards),
   e o padrão "filtro lateral fixo + grid de resultados rolável" já é o layout de busca padrão
   de diretórios/marketplaces (site-corporate-refs.md) — não é peça nova de gosto, é reuso. */
:root{ --header-h: 64px; }
.mkt-layout{display:flex; align-items:flex-start; gap:24px}
.mkt-filters-col{
  flex:0 0 300px; min-width:0;
  position:sticky;
  top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 20px);
  max-height:calc(100vh - env(safe-area-inset-top,0px) - var(--header-h) - 40px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:2px 2px 2px 0; /* não corta o box-shadow/focus ring do card de filtros */
}
.mkt-filters-col .mkt-filters{margin-bottom:0}
.mkt-board-col{flex:1 1 auto; min-width:0}

/* ---------- filtros de busca ---------- */
.mkt-filters{display:flex; flex-direction:column; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow-sm)}
/* busca livre (BRIEFING.md §5.2) — texto solto, não dropdown; visualmente o campo dominante */
.mkt-search-row{display:flex; gap:8px}
.mkt-search-in{font-size:15px!important; padding:13px 16px!important}
.mkt-filters-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.mkt-field{min-width:0; position:relative}
.mkt-field label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut); margin:0 0 5px 2px}
.mkt-range-pair{display:flex; align-items:center; gap:6px}
.mkt-range-pair .mkt-in{min-width:0; flex:1 1 auto}
.mkt-range-dash{color:var(--mut)}
#fDistancia{flex:0 0 56px}
#btnUsarLocal{flex:1 1 auto}
.mkt-field-check{display:flex; flex-direction:column; justify-content:center}
.mkt-checkbox-line{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer}
.mkt-checkbox-line input{accent-color:var(--ink)}
.mkt-pill-pagamento{background:#eef2fa; color:#2c4a8c}
.mkt-in, .mkt-select{width:100%; box-sizing:border-box; font:inherit; font-size:13.5px; background:var(--field);
  border:1px solid transparent; border-radius:var(--r-sm); padding:10px 12px; transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
.mkt-in::placeholder{color:#b5ab99}
.mkt-in:focus, .mkt-select:focus{outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(28,26,23,.07)}
.mkt-autocomplete{position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-sm); box-shadow:var(--shadow); max-height:240px; overflow:auto; z-index:30}
.mkt-autocomplete button{display:block; width:100%; text-align:left; background:none; border:0; padding:9px 12px;
  font:inherit; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line-2)}
.mkt-autocomplete button:last-child{border-bottom:0}
.mkt-autocomplete button:hover{background:var(--field)}
.mkt-autocomplete .mkt-ac-sub{color:var(--mut); font-size:11.5px}
.mkt-filters-actions{display:flex; align-items:flex-end; gap:8px}

/* ---------- botões ---------- */
.mkt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:13.5px;
  font-weight:650; border-radius:var(--r-sm); padding:10px 16px; border:1px solid transparent; cursor:pointer;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease; white-space:nowrap}
.mkt-btn:active{transform:scale(.97)}
.mkt-btn:disabled{opacity:.55; cursor:default; pointer-events:none}
.mkt-btn-ink{background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(20,15,10,.18)}
.mkt-btn-ink:hover{background:#000; box-shadow:0 5px 16px rgba(0,0,0,.24); transform:translateY(-1px)}
.mkt-btn-accent{background:var(--accent-deep); color:var(--accent-ink)}
.mkt-btn-accent:hover{background:var(--accent-deep-hover); box-shadow:0 5px 16px rgba(179,23,42,.32); transform:translateY(-1px)}
.mkt-btn-ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.mkt-btn-ghost:hover{border-color:#cabfae; box-shadow:0 3px 10px rgba(40,30,18,.09); transform:translateY(-1px)}
.mkt-btn-danger{background:#fff; border-color:#e8c9c9; color:var(--danger)}
.mkt-btn-danger:hover{background:#fff6f6; border-color:var(--danger)}
.mkt-btn-sm{padding:7px 12px; font-size:12.5px}

/* ---------- grid de cards ---------- */
.mkt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.mkt-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:18px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px; transition:box-shadow .16s ease,transform .16s ease}
a.mkt-card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
/* card em destaque (entitlement kind=marketplace_destaque, já consumido pela lógica de busca)
   ganha um traço superior no vermelho real da marca — uso não-textual do --accent puro (só
   contraste importa em texto; aqui é decoração), então dispensa a variante --accent-deep. */
.mkt-card-destaque{box-shadow:var(--shadow-sm), inset 0 3px 0 0 var(--accent)}
a.mkt-card-destaque:hover{box-shadow:var(--shadow), inset 0 3px 0 0 var(--accent)}
.mkt-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.mkt-card h3{margin:0; font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.3}
.mkt-card .mkt-desc{color:var(--ink-2); font-size:13px; line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mkt-card-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto; padding-top:4px}
.mkt-price{font-size:15px; font-weight:700; color:var(--ink)}
.mkt-price.mkt-consult{font-size:13px; font-weight:600; color:var(--mut)}
/* align-items:flex-start (não center) — com atende_remoto=true o texto pode quebrar em várias
   linhas (nome + cidade + "atende todo o Brasil (remoto)"); center fazia o badge "Verificado"
   flutuar no meio do bloco em vez de alinhar com a 1ª linha (achado vv-design, 2026-09-16). */
.mkt-seller-line{font-size:12.5px; color:var(--ink-2); display:flex; align-items:flex-start; gap:6px}
.mkt-seller-line .mkt-pill{flex:0 0 auto; margin-top:1px}

/* ---------- badges/pills (figma.com cards-pill, paleta contida — ver nota no topo) ---------- */
.mkt-pill{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; letter-spacing:.01em;
  padding:4px 10px; border-radius:var(--r-pill); line-height:1.4; white-space:nowrap}
.mkt-pill-cat{background:var(--field); color:var(--ink-2)}
.mkt-pill-destaque{background:#fdeecb; color:#7a4a08}
.mkt-pill-verificado{background:#e4f3ea; color:var(--ok)}
.mkt-pill-desconto{background:#fbe7e4; color:var(--accent-deep)}
.mkt-pill-remoto{background:#e6f0f7; color:#245f7d}
.mkt-pill-status-ativo{background:#e4f3ea; color:var(--ok)}
.mkt-pill-status-pendente{background:#fdeecb; color:#7a4a08}
.mkt-pill-status-em_analise{background:#e6ecf7; color:#2c4a8c}
.mkt-pill-status-aprovado{background:#e4f3ea; color:var(--ok)}
.mkt-pill-status-reprovado{background:#fbe4e4; color:var(--danger)}
.mkt-pill-status-suspenso{background:#f0e9dc; color:var(--ink-2)}

.mkt-empty{background:var(--card); border:1px dashed var(--line); border-radius:var(--r); padding:40px 20px;
  text-align:center; color:var(--mut); font-size:14px;
  display:flex; flex-direction:column; align-items:center; gap:12px}
/* símbolo real do toldo (marketplace-simbolo.svg) como elemento gráfico dos estados vazios —
   não é decoração inventada, é o mesmo arquivo do header em opacidade reduzida (impeccable/
   anti-patterns: nunca ícone genérico fingindo ser marca; aqui É a marca, só discreta). */
.mkt-empty-icon{width:44px; height:auto; opacity:.5}

/* ---------- perfil de vendedor ---------- */
.mkt-profile-head{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  box-shadow:var(--shadow-sm); margin-bottom:26px}
.mkt-profile-head h1{margin:0 0 6px; font-size:23px; font-weight:650; letter-spacing:-.01em}
.mkt-profile-meta{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; color:var(--ink-2); font-size:13.5px; margin:10px 0}
.mkt-contact-box{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2)}
.mkt-contact-gap{background:#fff8ec; border:1px solid #ecdcb3; border-radius:var(--r-sm); padding:12px 14px;
  font-size:13px; color:#6b4c17; line-height:1.55}

/* ---------- formulários (cadastro/painel/verificação) ---------- */
.mkt-form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  box-shadow:var(--shadow-sm)}
.mkt-form-row{margin-bottom:16px}
.mkt-form-row label{display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin:0 0 6px}
.mkt-form-row .mkt-hint{display:block; font-size:11.5px; color:var(--mut); margin-top:4px}
textarea.mkt-in{resize:vertical; min-height:90px}
.mkt-radio-group, .mkt-check-group{display:flex; flex-wrap:wrap; gap:8px}
.mkt-radio-pill{display:flex; align-items:center; gap:6px; font-size:13px; background:var(--field); border:1px solid transparent;
  border-radius:var(--r-pill); padding:8px 13px; cursor:pointer}
.mkt-radio-pill:has(input:checked){background:var(--ink); color:#fff}
.mkt-radio-pill input{accent-color:var(--ink)}
.mkt-msg{font-size:12.5px; margin:8px 0 0; line-height:1.5}
.mkt-msg.err{color:var(--danger)} .mkt-msg.ok{color:var(--ok)}

/* ---------- status banners (painel do vendedor) ---------- */
.mkt-status-banner{border-radius:var(--r); padding:18px 20px; margin-bottom:22px; font-size:14px; line-height:1.6}
.mkt-status-banner.pendente{background:#fff8ec; border:1px solid #ecdcb3; color:#6b4c17}
.mkt-status-banner.em_analise{background:#eef2fa; border:1px solid #cdd9f0; color:#2c4a8c}
.mkt-status-banner.aprovado{background:#eef8f1; border:1px solid #c7e6d2; color:#1f5c3a}
.mkt-status-banner.reprovado{background:#fbeeee; border:1px solid #eec6c6; color:#7a1414}
.mkt-status-banner.suspenso{background:var(--field); border:1px solid var(--line); color:var(--ink-2)}
.mkt-status-banner h2{margin:0 0 6px; font-size:15.5px}

.mkt-listing-row{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:10px}
.mkt-listing-row .mkt-l-info{min-width:0}
.mkt-listing-row h4{margin:0 0 3px; font-size:14.5px; font-weight:650}
.mkt-listing-row .mkt-l-actions{display:flex; gap:6px; flex:0 0 auto}

/* ---------- geolocalização (cadastro + painel) ---------- */
.mkt-geo-box{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.mkt-geo-box .mkt-hint{margin-top:0}

/* ---------- hero slider do anúncio (anuncio.html) ----------
   Auto-rotate + setas/dots + pausa em hover/foco (impeccable/motion-design: transição
   discreta, sem easing chamativo — crossfade simples, o produto é institucional/confiança). */
.mkt-hero{position:relative; aspect-ratio:16/10; max-height:460px; border-radius:var(--r); overflow:hidden;
  background:var(--field); margin-bottom:22px; box-shadow:var(--shadow-sm)}
.mkt-hero:focus{outline:2px solid var(--ink); outline-offset:2px}
.mkt-hero-track{position:relative; width:100%; height:100%}
.mkt-hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none}
.mkt-hero-slide.is-active{opacity:1; pointer-events:auto}
.mkt-hero-slide img{width:100%; height:100%; object-fit:cover}
.mkt-hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  background:rgba(28,26,23,.55); color:#fff; border:0; font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .14s ease}
.mkt-hero-arrow:hover{background:rgba(28,26,23,.8)}
.mkt-hero-prev{left:12px} .mkt-hero-next{right:12px}
.mkt-hero-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:7px}
.mkt-hero-dot{width:7px; height:7px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0}
.mkt-hero-dot.is-active{background:#fff; width:18px; border-radius:4px; transition:width .2s ease}
.mkt-hero-empty{aspect-ratio:16/10; max-height:460px; border-radius:var(--r); background:var(--field);
  border:1px dashed var(--line); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; color:var(--mut);
  font-size:13.5px; margin-bottom:22px; text-align:center; padding:20px}

/* ---------- corpo do anúncio ---------- */
.mkt-anuncio-body{max-width:720px}
.mkt-anuncio-title{font-size:24px; font-weight:650; letter-spacing:-.01em; margin:0}
.mkt-anuncio-desc{color:var(--ink-2); font-size:14.5px; line-height:1.65; white-space:pre-wrap}
.mkt-seller-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-top:8px}
.mkt-seller-card-name{font-weight:650; font-size:15.5px}
.mkt-seller-card-name:hover{text-decoration:underline}

/* ---------- gerenciador de fotos (painel.html) ---------- */
.mkt-fotos-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.mkt-foto-item{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--card)}
.mkt-foto-item img{width:100%; aspect-ratio:4/3; object-fit:cover}
.mkt-foto-info{padding:8px 10px}
.mkt-foto-actions{display:flex; gap:5px; margin-top:6px}
.mkt-foto-actions .mkt-btn{padding:5px 9px; font-size:12px}

/* Abaixo de 880px as duas colunas não cabem lado a lado com conforto (300px de filtro +
   ao menos ~260px de card + gap). Decisão de mobile (BRIEFING.md §5.3): em vez de
   accordion/drawer, os filtros voltam a empilhar em FLUXO NORMAL acima do board, sem
   position:sticky nem rolagem própria — a página inteira rola normalmente, como era antes
   desta mudança. Mais simples e sem risco de "gaveta" cortando/escondendo campo em telas
   estreitas (390px testado — ver screenshots do relatório). */
@media (max-width: 880px){
  .mkt-layout{display:block}
  .mkt-filters-col{
    position:static; flex:none; width:100%;
    max-height:none; overflow:visible; padding:0; margin-bottom:24px;
  }
  .mkt-filters-col .mkt-filters{margin-bottom:0}
  .mkt-board-col{width:100%}
}

@media (max-width: 640px){
  .mkt-top-in{padding:11px 16px}
  .mkt-wrap, .mkt-wrap-narrow{padding:22px 16px 70px}
  .mkt-filters-grid{grid-template-columns:1fr}
  .mkt-search-row{flex-direction:column}
  .mkt-nav{display:none}
  .mkt-listing-row{flex-direction:column; align-items:flex-start}
  .mkt-hero, .mkt-hero-empty{max-height:280px}
}