/* ============ Hero ============ */
.col-hero{background:var(--surface);border-radius:var(--r-card);padding:clamp(24px,5vw,48px);display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end}
.col-hero-txt{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}
.col-h1{font-size:clamp(32px,8vw,76px)}
.col-hero-lead{max-width:28em}
.col-hero-fig{flex:1 1 260px;min-width:0;height:clamp(180px,26vw,260px);display:flex;align-items:flex-end;justify-content:flex-end;gap:5%}
.col-peca-1{width:24%;height:62%}
.col-peca-2{width:28%;height:96%}
.col-peca-3{width:24%;height:74%}

/* ============ Barra de filtros — celular ============ */
.barra-narrow{margin-top:20px;display:flex;gap:10px;align-items:center}
.barra-filtrar{flex:1;justify-content:space-between;gap:8px}
.barra-ordem{flex:1;min-width:0}
.barra-cores{margin-top:12px;gap:10px}

/* ============ Barra de filtros — desktop (ligada no @media do fim) ============ */
.barra-wide{display:none;position:sticky;top:76px;z-index:20;margin-top:24px;background:var(--surface);border-radius:var(--r-pill);padding:12px 16px;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;box-shadow:var(--shadow)}
.barra-wide-esq{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.barra-wide-cats{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.barra-wide-cores{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.barra-sep{width:1px;height:28px;background:var(--line);margin:0 4px}
.barra-wide-dir{display:flex;gap:12px;align-items:center}
.barra-mais{gap:8px}

/* ============ Chips ativos ============ */
.col-chips{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.col-chips[hidden]{display:none}

/* ============ Contagem ============ */
.col-contagem{margin-top:20px;font-size:14px;color:var(--ink-2)}

/* ============ Estado vazio ============ */
.col-vazio{margin-top:24px;background:var(--surface);border-radius:var(--r-card);padding:40px 24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.col-vazio[hidden]{display:none}
.col-vazio-tit{font-size:22px;font-weight:500;letter-spacing:-0.02em}
.col-vazio-txt{font-size:16px;color:var(--ink-2);max-width:28em}
.col-vazio-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* ============ Grade ============ */
.col-grade{margin-top:16px}

/* ============ Paginação ============ */
.col-pag{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.col-pag-txt{font-size:15px;color:var(--ink-2)}
.col-pag-txt strong{color:var(--ink);font-weight:500}
.col-pag-setas{display:flex;gap:8px}
.col-pag-off{opacity:.4}

/* ============ Bottom sheet ============ */
.col-preco-topo{display:flex;justify-content:space-between;gap:12px}
.col-preco-v{font-size:15px;font-weight:500}
.col-sheet-acoes{display:flex;gap:12px}
.col-sheet-limpar{flex:1;font-weight:400}
.col-sheet-ver{flex:2}

/* ============ Desktop ============ */
@media (min-width:900px){
  .barra-wide{display:flex}
  .barra-wide-cats,.barra-wide-cores{display:contents}
  .barra-narrow,.barra-cores{display:none}
}

/* ── Catálogo: foto real da peça e preço promocional (trilha A) ─ */
/* Sem foto cadastrada, nada aqui aparece: continua valendo o placeholder do desenho. */
.pcard-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-tile)}
.pcard-preco .preco-antes{margin-left:8px;font-size:13px;color:var(--ink-2);text-decoration:line-through}