/* Shopping Católico — sistema visual, IRMÃO do Marketplace Católico.

   REUSO DELIBERADO (Regra Global 2 + Regra Global 4 + memória "Design sempre do ecossistema
   certo"): tokens de cor/tipografia/sombra/raio copiados 1:1 de
   ~/projetos/marketplace-catolico/web/assets/css/marketplace.css (mercado.hubcatolico.com),
   que por sua vez vieram do Hub ID (warm ink/paper + Inter). Shopping Católico é "produto
   irmão" do Mercado (BRIEFING compartilhado, mesmo Supabase, mesmo login) — não é brand novo,
   não inventamos paleta nova. --accent (#ff293a) é o vermelho real da marca do Mercado, único
   ativo de identidade que já existe; usamos o mesmo até a identidade própria do Shopping vir
   do Thiago.

   NOMENCLATURA: classes prefixadas `shop-` (não `mkt-`) para não confundir o código dos dois
   produtos-irmãos, mesmo compartilhando 1:1 o valor de cada token. Onde o componente é
   estrutural e idêntico ao Mercado (topo, filtros fixos com rolagem própria, grid de cards,
   pills, hero-slider), a definição foi replicada por classe própria — decisão deliberada
   (dois arquivos CSS por dois domínios/deploys separados; nunca fazer um site depender do
   docroot do outro).

   NOVO EM RELAÇÃO AO MERCADO (produto × serviço, ver relatório do marketplace-catalog):
   - chip de condição (novo/usado) — verde para novo, terroso para usado, nunca vermelho/laranja
     de alerta (não é um estado de erro).
   - badge "Aceita troca".
   - indicador "+N fotos" no card (múltiplas fotos são o padrão, não exceção).
   - grade de fotos com miniaturas navegáveis na página do anúncio (além do hero-slider).

   Referências aplicadas (Design Taste Stack, Regra Global 4):
     - impeccable/spatial-design: mesma escala 4/8px, mesma hierarquia de peso do Mercado.
     - taste-skill: pills sóbrios, sem gradiente decorativo além do já validado no Mercado.
     - emil-design-eng: mesma microinteração de hover/active (translateY + shadow) nos cards/botões.
*/

:root{
  --ink:#1c1a17; --ink-2:#4a443c; --mut:#9a8f80;
  --paper:#fbf7f0; --card:#fffdfa; --line:#e9e0d2; --line-2:#f0e9dc; --field:#f6f1e7;
  --accent:#ff293a; --accent-rgb:255,41,58; --accent-deep:#b3172a; --accent-deep-hover:#8f1220; --accent-ink:#fff;
  --danger:#9b2222; --ok:#256440; --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;
  --header-h: 64px;
  color-scheme: light;
  font-synthesis-weight:none;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* overflow-x:hidden aqui é rede de segurança contra vazamento horizontal — não é o fix em si.
   Achado V&V (/revisar-visual): o widget compartilhado Hub ID (id.hubcatolico.com/widget/hubid.js,
   .hid-morph) tem lógica própria de auto-flip (classe .hid-r) pra ficar right-anchored quando
   não cabe, mas em telas ~375px essa detecção falha tanto aqui quanto em mercado.hubcatolico.com
   (mesmo bug pré-existente do widget, fora do escopo deste projeto — sinalizado ao dono do Hub
   ID). O fix de verdade é o override de `.hid-morph` no breakpoint mobile abaixo, que reposiciona
   o botão pra caber sem cortar nenhum pixel; isto aqui só impede a página de rolar horizontalmente
   caso outro elemento futuro vaze do mesmo jeito. */
html{overflow-x:hidden}
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 ---------- */
.shop-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);}
.shop-top-in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:13px 22px}
.shop-brand{display:flex; align-items:center; gap:9px}
/* Wordmark tipográfico (Regra Global 3 — logo do Shopping Católico ainda NÃO existe; nunca
   desenhar símbolo em CSS/SVG. Quando o .svg original chegar do Thiago, troca-se este <span>
   por <img src="assets/logo/shopping-logo.svg"> igual ao padrão do Mercado — caminho já
   reservado, arquivo pendente.) Tipografia apenas: peso + tracking, zero ícone inventado. */
.shop-wordmark{font-weight:800; font-size:16.5px; letter-spacing:-.02em; color:var(--ink)}
.shop-wordmark b{color:var(--accent-deep); font-weight:800}
.shop-nav{display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.shop-nav a:hover{color:var(--ink)}
.shop-top-spacer{margin-left:auto}

/* ---------- topo: botões compartilhados do ecossistema (Regra Global 7) ---------- */
.shop-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 ---------- */
.shop-wrap{max-width:1120px; margin:0 auto; padding:30px 22px 90px}
.shop-page-h{margin:6px 0 26px}
.shop-page-h h1{font-size:27px; letter-spacing:-.02em; margin:0 0 5px; font-weight:650}
.shop-page-h p{margin:0; color:var(--mut); font-size:14.5px}

/* ---------- banner de demonstração / entre-produtos ---------- */
.shop-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}
.shop-demo-banner b{color:#4a3610}
.shop-sibling-banner{background:#eef2fa; border:1px solid #cdd9f0; color:#2c4a8c;
  border-radius:var(--r-sm); padding:10px 14px; font-size:13px; margin-bottom:20px; line-height:1.5}
.shop-sibling-banner a{font-weight:700; text-decoration:underline}

/* ---------- layout de duas colunas da busca (mesmo mecanismo do Mercado, replicado) ----------
   Coluna esquerda (.shop-filters-col) FIXA na tela com rolagem própria; coluna direita
   (.shop-board-col) é o board de anúncios, rola normalmente com a página. */
.shop-layout{display:flex; align-items:flex-start; gap:24px}
.shop-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;
}
.shop-filters-col .shop-filters{margin-bottom:0}
.shop-board-col{flex:1 1 auto; min-width:0}

/* ---------- filtros de busca ---------- */
.shop-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)}
.shop-search-row{display:flex; gap:8px}
.shop-search-in{font-size:15px!important; padding:13px 16px!important}
.shop-filters-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.shop-field{min-width:0; position:relative}
.shop-field label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mut); margin:0 0 5px 2px}
.shop-range-pair{display:flex; align-items:center; gap:6px}
.shop-range-pair .shop-in{min-width:0; flex:1 1 auto}
.shop-range-dash{color:var(--mut)}
.shop-in, .shop-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}
.shop-in::placeholder{color:#b5ab99}
.shop-in:focus, .shop-select:focus{outline:none; border-color:var(--ink); background:#fff; box-shadow:0 0 0 3px rgba(28,26,23,.07)}
.shop-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}
.shop-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)}
.shop-autocomplete button:last-child{border-bottom:0}
.shop-autocomplete button:hover{background:var(--field)}
.shop-autocomplete .shop-ac-sub{color:var(--mut); font-size:11.5px}
.shop-filters-actions{display:flex; align-items:flex-end; gap:8px}

/* condição (novo/usado) — pills de escolha única, mesmo padrão visual do resto do produto */
.shop-radio-group{display:flex; flex-wrap:wrap; gap:8px}
.shop-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}
.shop-radio-pill:has(input:checked){background:var(--ink); color:#fff}
.shop-radio-pill input{accent-color:var(--ink)}
.shop-check-line{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; cursor:pointer}
.shop-check-line input{accent-color:var(--ink)}

/* ---------- botões ---------- */
.shop-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}
.shop-btn:active{transform:scale(.97)}
.shop-btn:disabled{opacity:.55; cursor:default; pointer-events:none}
.shop-btn-ink{background:var(--ink); color:#fff; box-shadow:0 1px 2px rgba(20,15,10,.18)}
.shop-btn-ink:hover{background:#000; box-shadow:0 5px 16px rgba(0,0,0,.24); transform:translateY(-1px)}
.shop-btn-accent{background:var(--accent-deep); color:var(--accent-ink)}
.shop-btn-accent:hover{background:var(--accent-deep-hover); box-shadow:0 5px 16px rgba(179,23,42,.32); transform:translateY(-1px)}
.shop-btn-ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.shop-btn-ghost:hover{border-color:#cabfae; box-shadow:0 3px 10px rgba(40,30,18,.09); transform:translateY(-1px)}
.shop-btn-danger{background:#fff; border-color:#e8c9c9; color:var(--danger)}
.shop-btn-danger:hover{background:#fff6f6; border-color:var(--danger)}
.shop-btn-sm{padding:7px 12px; font-size:12.5px}

/* ---------- grid de cards (auto-fit — sem trilha vazia na última linha) ---------- */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.shop-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:0; overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:box-shadow .16s ease,transform .16s ease}
a.shop-card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
.shop-card:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.shop-card-destaque{box-shadow:var(--shadow-sm), inset 0 3px 0 0 var(--accent)}
a.shop-card-destaque:hover{box-shadow:var(--shadow), inset 0 3px 0 0 var(--accent)}

.shop-card-media{position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--field), rgba(var(--accent-rgb),.07)); border-bottom:1px solid var(--line-2)}
.shop-card-destaque .shop-card-media{background:linear-gradient(135deg, #fdeecb, rgba(var(--accent-rgb),.1))}
.shop-card-media-icon{width:38px; height:38px; color:var(--ink-2); opacity:.42}
.shop-card-media-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.shop-card-media-badge{position:absolute; top:10px; left:10px; z-index:1}
/* "+N fotos" — múltiplas fotos são o padrão do produto, não exceção (ver relatório) */
.shop-card-media-count{position:absolute; bottom:10px; right:10px; z-index:1; display:inline-flex; align-items:center; gap:4px;
  background:rgba(28,26,23,.62); color:#fff; font-size:11px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill)}
.shop-card-media-count svg{width:11px; height:11px}

.shop-card-body{padding:15px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto}
.shop-card h3{margin:0; font-size:15px; font-weight:650; letter-spacing:-.01em; line-height:1.32}
.shop-card-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto; padding-top:2px}
.shop-price{font-size:16px; font-weight:750; color:var(--ink)}
.shop-seller-line{font-size:12px; color:var(--mut); display:flex; align-items:flex-start; gap:5px}
.shop-icon{width:13px; height:13px; flex:0 0 auto}
.shop-chip-location{display:inline-flex; align-items:center; gap:4px; background:var(--field); color:var(--ink-2);
  font-size:11px; font-weight:650; padding:4px 10px 4px 8px; border-radius:var(--r-pill); white-space:nowrap}
.shop-chip-location .shop-icon{opacity:.7}
.shop-card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;
  padding-top:11px; border-top:1px solid var(--line-2)}
.shop-card-cta{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--accent-deep)}
.shop-card-cta .shop-icon{transition:transform .18s cubic-bezier(.16,1,.3,1)}
a.shop-card:hover .shop-card-cta .shop-icon{transform:translateX(3px)}

/* ---------- pills/badges ---------- */
.shop-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}
.shop-pill-cat{background:var(--field); color:var(--ink-2)}
.shop-pill-destaque{background:#fdeecb; color:#7a4a08}
.shop-pill-verificado{background:#e4f3ea; color:var(--ok)}
/* condição — verde-vivo para "novo" (positivo, não é status de erro), terroso neutro para
   "usado" (informação factual, sem viés negativo — comprar usado é normal no produto). */
.shop-pill-novo{background:#e4f3ea; color:var(--ok)}
.shop-pill-usado{background:var(--field); color:var(--ink-2)}
.shop-pill-troca{background:#eef2fa; color:#2c4a8c}
.shop-pill-status-ativo{background:#e4f3ea; color:var(--ok)}
.shop-pill-status-pausado{background:#fdeecb; color:#7a4a08}
.shop-pill-status-vendido{background:#f0e9dc; color:var(--ink-2)}

.shop-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}
.shop-empty .shop-btn{margin-top:2px}

/* ---------- estado de carregamento (skeleton) ---------- */
.shop-skel-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.shop-skel-media{aspect-ratio:4/3; background:var(--field)}
.shop-skel-body{padding:15px 16px; display:flex; flex-direction:column; gap:10px}
.shop-skel-line{height:10px; border-radius:5px;
  background:linear-gradient(90deg, var(--line-2) 25%, var(--line) 37%, var(--line-2) 63%);
  background-size:400% 100%; animation:shop-shimmer 1.6s ease infinite}
.shop-skel-line.w90{width:90%} .shop-skel-line.w60{width:60%}
.shop-skel-line.w40{width:40%; height:16px; margin-top:4px}
@keyframes shop-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion: reduce){ .shop-skel-line{animation:none} }

/* ---------- página de anúncio: galeria + sidebar sticky de contato ---------- */
.shop-hero{position:relative; aspect-ratio:4/3; max-height:520px; border-radius:var(--r); overflow:hidden;
  background:var(--field); margin-bottom:12px; box-shadow:var(--shadow-sm)}
.shop-hero:focus{outline:2px solid var(--ink); outline-offset:2px}
.shop-hero-track{position:relative; width:100%; height:100%}
.shop-hero-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none}
.shop-hero-slide.is-active{opacity:1; pointer-events:auto}
.shop-hero-slide img{width:100%; height:100%; object-fit:cover}
.shop-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}
.shop-hero-arrow:hover{background:rgba(28,26,23,.8)}
.shop-hero-prev{left:12px} .shop-hero-next{right:12px}
.shop-hero-dots{position:absolute; bottom:14px; left:0; right:0; display:flex; justify-content:center; gap:7px}
.shop-hero-dot{width:7px; height:7px; border-radius:50%; border:0; background:rgba(255,255,255,.55); cursor:pointer; padding:0}
.shop-hero-dot.is-active{background:#fff; width:18px; border-radius:4px; transition:width .2s ease}
.shop-hero-empty{aspect-ratio:4/3; max-height:520px; 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:12px; text-align:center; padding:20px}
/* faixa de miniaturas abaixo do hero — navegação direta além do slider automático,
   reforça que múltiplas fotos são o padrão (task explícita: "grade de fotos com miniaturas") */
.shop-thumbs{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:22px}
.shop-thumb{flex:0 0 64px; width:64px; height:64px; border-radius:var(--r-sm); overflow:hidden; border:2px solid transparent;
  cursor:pointer; background:var(--field); padding:0}
.shop-thumb img{width:100%; height:100%; object-fit:cover}
.shop-thumb.is-active{border-color:var(--ink)}

.shop-anuncio-title{font-size:26px; font-weight:650; letter-spacing:-.01em; margin:0}
.shop-anuncio-desc{color:var(--ink-2); font-size:14.5px; line-height:1.65; white-space:pre-wrap; max-width:70ch}
.shop-anuncio-layout{display:grid; grid-template-columns:1fr 360px; gap:32px; align-items:start; margin-top:6px}
.shop-anuncio-main{min-width:0}
.shop-anuncio-sidebar{position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--header-h) + 20px)}
.shop-seller-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.shop-seller-card-name{font-weight:650; font-size:15.5px}
.shop-seller-card-name:hover{text-decoration:underline}
.shop-seller-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.shop-contact-box{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2)}
.shop-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}
.shop-entrega-box{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2)}
.shop-entrega-box h3{margin:0 0 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--mut)}
.shop-entrega-item{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); margin-bottom:6px}
.shop-entrega-item svg{width:15px; height:15px; color:var(--ok); flex:0 0 auto}
.shop-profile-meta{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; color:var(--ink-2); font-size:13.5px; margin:0 0 10px}
.shop-profile-meta-item{display:inline-flex; align-items:center; gap:5px}

@media (max-width:880px){
  .shop-anuncio-layout{display:block}
  .shop-anuncio-sidebar{position:static; margin-top:24px}
}

/* ---------- formulários (painel do vendedor) ---------- */
.shop-form-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  box-shadow:var(--shadow-sm)}
.shop-form-row{margin-bottom:16px}
.shop-form-row label{display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin:0 0 6px}
.shop-form-row .shop-hint{display:block; font-size:11.5px; color:var(--mut); margin-top:4px}
textarea.shop-in{resize:vertical; min-height:90px}
.shop-msg{font-size:12.5px; margin:8px 0 0; line-height:1.5}
.shop-msg.err{color:var(--danger)} .shop-msg.ok{color:var(--ok)}

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

.shop-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}
.shop-listing-row .shop-l-info{min-width:0}
.shop-listing-row h4{margin:0 0 3px; font-size:14.5px; font-weight:650}
.shop-listing-row .shop-l-actions{display:flex; gap:6px; flex:0 0 auto}

.shop-cat-checks{display:flex; flex-wrap:wrap; gap:8px}
.shop-cat-check{display:flex; align-items:center; gap:6px; font-size:12.5px; background:var(--field); border:1px solid transparent;
  border-radius:var(--r-pill); padding:7px 12px; cursor:pointer}
.shop-cat-check:has(input:checked){background:var(--ink); color:#fff}
.shop-cat-check input{accent-color:var(--ink)}

/* gerenciador de fotos (painel — ordem definida pelo vendedor, mínimo 1 antes de publicar) */
.shop-fotos-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px}
.shop-foto-item{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--card)}
.shop-foto-item img{width:100%; aspect-ratio:4/3; object-fit:cover}
.shop-foto-info{padding:7px 9px}
.shop-foto-actions{display:flex; gap:5px; margin-top:6px}
.shop-foto-actions .shop-btn{padding:5px 9px; font-size:12px}

@media (max-width: 880px){
  .shop-layout{display:block}
  .shop-filters-col{
    position:static; flex:none; width:100%;
    max-height:none; overflow:visible; padding:0; margin-bottom:24px;
  }
  .shop-filters-col .shop-filters{margin-bottom:0}
  .shop-board-col{width:100%}
}

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

  /* Fix V&V (/revisar-visual, ALTA): o widget Hub ID (.hid-morph, id.hubcatolico.com/widget/hubid.js)
     já tem uma classe própria de auto-flip pra ficar "right-anchored" quando não cabe à esquerda
     (.hid-morph.hid-r{left:auto;right:0}), mas a detecção dele não dispara em ~375px — reproduzido
     IGUAL em mercado.hubcatolico.com/index.html (26-28px de overflow nos dois), então é bug do
     script compartilhado, não deste CSS; correção do script é fora de escopo (marketplace-catalog
     não mexe em id.hubcatolico.com). Mitigação local: aplicamos manualmente o MESMO resultado que
     `.hid-r` daria, sem tocar no hubid.js — ancora o botão pela direita do próprio .hid-wrap em vez
     de deixá-lo vazar. Botão continua 100% visível e clicável, só reposicionado (nenhum pixel
     cortado, ao contrário de um overflow:hidden puro que cortaria ~28px do rótulo). */
  .hid-morph{left:auto!important; right:0!important}
}