/* ============================================================
   CATÁLOGO
   ============================================================ */

/* ── Topo da página ── */
.cat-topo {
  background:var(--grad-escuro); color:#fff;
  padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px);
  position:relative; overflow:hidden;
}
.cat-topo .dp-container { position:relative; z-index:1; } /* texto acima do círculo decorativo (fix "sombra" no mobile) */
.cat-topo::after {
  content:""; position:absolute; right:-10%; top:-40%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,123,234,.5),transparent 65%); pointer-events:none;
}
.cat-topo .breadcrumb { color:rgba(255,255,255,.6); }
.cat-topo .breadcrumb a:hover,
.cat-topo .breadcrumb strong { color:#fff; }
.cat-topo .eyebrow { color:var(--amarelo); }
.cat-topo .eyebrow::before { background:#fff; }
.cat-topo h1 { color:#fff; max-width:16ch; }
.cat-topo-sub { color:rgba(255,255,255,.72); font-size:var(--fs-lead); max-width:52ch; margin-top:14px; }

/* mobile: hero compacta — menos respiro, título enxuto e descrição curta/menor */
@media (max-width:640px){
  .cat-topo { padding-block:clamp(14px,4vw,22px) clamp(18px,5vw,26px); }
  .cat-topo h1 { font-size:clamp(1.7rem,1.35rem + 2.6vw,2.1rem); max-width:none; }
  .cat-topo-sub { font-size:var(--fs-base); margin-top:var(--sp-2); }
}

/* ── Layout: sidebar de filtros + grade ── */
.cat-corpo { padding-block:clamp(28px,4vw,48px); }
.cat-layout { display:grid; grid-template-columns:clamp(248px,22vw,300px) minmax(0,1fr); gap:clamp(20px,2.4vw,36px); align-items:start; }
.cat-conteudo { min-width:0; }
/* grade com a sidebar: 3 colunas em telas médias, 4 por fileira a partir de ~1200px */
@media (min-width:861px){  .cat-conteudo .grade-pisos { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px){ .cat-conteudo .grade-pisos { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── Sidebar (faceted) ── */
.cat-filtros {
  position:sticky; top:calc(var(--h-header) + var(--sp-4)); align-self:start;
  max-height:calc(100svh - var(--h-header) - var(--sp-6)); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--azul-200) transparent;
  background:#fff; border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--sombra);
}
/* scrollbar discreta (sem botões de seta) e thumb flutuante — sem borda do card pra não duplicar a linha */
.cat-filtros::-webkit-scrollbar { width:11px; }
.cat-filtros::-webkit-scrollbar-button { display:none; width:0; height:0; }
.cat-filtros::-webkit-scrollbar-track { background:transparent; }
.cat-filtros::-webkit-scrollbar-thumb { background:var(--azul-200); border-radius:999px; border:3px solid #fff; background-clip:padding-box; }
.cat-filtros::-webkit-scrollbar-thumb:hover { background:var(--azul-400); background-clip:padding-box; }
.cat-filtros-cab { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.cat-filtros-cab strong { font-family:var(--ff-display); font-size:var(--fs-md); color:var(--texto); }
.cat-limpar { margin-left:auto; font-size:var(--fs-xs); font-weight:700; color:var(--azul-700); }
.cat-limpar:hover { text-decoration:underline; }
.cat-filtros-fechar { display:none; color:var(--texto-suave); }
.cat-filtros-aplicar { display:none; }

/* grupo (accordion) */
.faceta-grupo { border-top:1px solid var(--borda); }
.faceta-grupo:first-child { border-top:none; }
.faceta-grupo summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; padding:var(--sp-4) 0; font-weight:700; font-size:var(--fs-sm); color:var(--texto); }
.faceta-grupo summary::-webkit-details-marker { display:none; }
.faceta-chevron { color:var(--azul-600); flex-shrink:0; transition:transform var(--t); }
.faceta-grupo[open] .faceta-chevron { transform:rotate(180deg); }
.faceta-ops { display:flex; flex-direction:column; gap:2px; padding-bottom:var(--sp-4); }

/* opção (checkbox branded) */
.faceta-op { display:flex; align-items:center; gap:var(--sp-3); width:100%; padding:var(--sp-2); border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--tinta-2); text-align:left; transition:background var(--t), color var(--t); }
.faceta-op:hover:not(:disabled) { background:var(--azul-50); }
.faceta-check { flex-shrink:0; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--borda); background:#fff; position:relative; transition:all var(--t); }
.faceta-op-ativa { color:var(--texto); font-weight:600; }
.faceta-op-ativa .faceta-check { background:var(--azul-800); border-color:var(--azul-800); }
.faceta-op-ativa .faceta-check::after { content:""; position:absolute; left:5px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.faceta-rotulo { flex:1; min-width:0; }
.faceta-contagem { flex-shrink:0; font-size:var(--fs-2xs); font-weight:700; color:var(--texto-suave); }
.faceta-op-zero { opacity:.4; cursor:not-allowed; }

/* ── Toolbar do topo da grade ── */
.cat-toolbar { display:flex; gap:var(--sp-3); align-items:stretch; margin-bottom:var(--sp-4); flex-wrap:wrap; }
.busca-campo {
  flex:1; min-width:220px; display:flex; align-items:center; gap:var(--sp-3);
  background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-sm); padding:0 var(--sp-4);
  transition:border-color var(--t), box-shadow var(--t);
}
.busca-campo:focus-within { border-color:var(--azul-500); box-shadow:0 0 0 4px var(--azul-100); }
.busca-icone { color:var(--texto-suave); flex-shrink:0; }
.busca-input { flex:1; min-width:0; border:none; outline:none; background:none; padding:var(--sp-3) 0; font-size:1rem; }
.busca-limpar { font-size:1.4rem; line-height:1; color:var(--texto-suave); width:28px; flex-shrink:0; }
.cat-toolbar-acoes { display:flex; gap:var(--sp-2); }
.ordenar-select {
  height:100%; padding:0 38px 0 var(--sp-4); border:1.5px solid var(--borda); border-radius:var(--r-sm);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7587' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size:var(--fs-sm); font-weight:600; color:var(--texto); appearance:none; cursor:pointer;
}
.btn-explorar {
  display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap;
  font-size:var(--fs-sm); font-weight:700; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm);
  background:var(--grad-marca); color:#fff; box-shadow:var(--sombra);
  transition:transform var(--t), box-shadow var(--t);
}
.btn-explorar:hover { transform:translateY(-1px); box-shadow:var(--sombra-md); }

/* resumo + chips de filtros ativos */
.cat-resumo { display:flex; align-items:center; gap:var(--sp-2) var(--sp-4); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.produtos-contagem { font-size:var(--fs-sm); color:var(--texto-suave); font-weight:600; }
.cat-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cat-chip { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-xs); font-weight:600; color:var(--azul-800); background:var(--azul-50); border:1px solid var(--azul-100); padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3); border-radius:var(--r-full); transition:background var(--t); }
.cat-chip:hover { background:var(--azul-100); }
.cat-chip svg { color:var(--azul-600); }

.sem-resultado { text-align:center; padding:60px 20px; color:var(--texto-suave); font-size:var(--fs-lead); }

/* botão/drawer de filtros (mobile) — base oculto */
.cat-filtros-toggle { display:none; }
.cat-filtros-backdrop { display:none; }

/* Coração de favoritar (.card-piso-salvar) movido para componentes.css
   para valer em todas as páginas (home, relacionados etc.) */

/* Favoritos — estado vazio */
.fav-vazio { text-align:center; max-width:460px; margin:40px auto; padding:40px 20px; }
.fav-vazio svg { color:var(--azul-200); margin:0 auto 18px; }
.fav-vazio h2 { margin-bottom:10px; }
.fav-vazio p { color:var(--texto-suave); margin-bottom:24px; }

/* ============================================================ EXPLORAR */
.explorar-overlay {
  position:fixed; inset:0; z-index:var(--z-lightbox);
  background:radial-gradient(140% 100% at 50% 0%, #0a3d91, #04122e 70%);
  display:flex; flex-direction:column; padding:16px;
}
.explorar-topo { display:flex; align-items:center; gap:14px; padding:6px 4px 14px; }
.explorar-fechar { width:42px; height:42px; border-radius:var(--r-full); background:rgba(255,255,255,.12); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.explorar-prog { flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; }
.explorar-prog-fill { height:100%; width:0; background:var(--grad-dourado); border-radius:999px; transition:width .3s ease; }
.explorar-counter { color:rgba(255,255,255,.85); font-size:.85rem; font-weight:700; flex-shrink:0; min-width:54px; text-align:right; }

.explorar-stage { flex:1; position:relative; display:flex; align-items:center; justify-content:center; perspective:1200px; }
.exp-card {
  position:absolute; width:min(90vw,420px); height:min(64vh,560px);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sombra-xl);
  background:#04122e; user-select:none;
}
.exp-card-prox { transform:scale(.93) translateY(16px); filter:brightness(.8); }
.exp-card-atual { cursor:grab; z-index:2; }
.exp-card-atual:active { cursor:grabbing; }
.exp-img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.exp-grad { position:absolute; inset:0; background:linear-gradient(to top, rgba(4,12,30,.92) 8%, transparent 55%); }
.exp-info { position:absolute; left:0; right:0; bottom:0; padding:26px; color:#fff; }
.exp-info h3 { color:#fff; font-size:1.7rem; margin:10px 0 6px; }
.exp-info p { color:rgba(255,255,255,.8); font-size:.95rem; }
.exp-preco-linha { display:flex; align-items:center; gap:12px; margin-top:14px; }
.exp-preco { font-family:var(--ff-display); font-size:2rem; font-weight:800; color:var(--amarelo); }
.exp-preco small { font-size:.85rem; color:rgba(255,255,255,.7); font-weight:600; }
.exp-stamp {
  position:absolute; top:30px; padding:8px 18px; border-radius:12px;
  font-weight:900; font-size:1.4rem; letter-spacing:.05em; opacity:0; z-index:3;
  border:4px solid; pointer-events:none;
}
.exp-stamp-sim { right:26px; color:var(--wa); border-color:var(--wa); transform:rotate(14deg); }
.exp-stamp-nao { left:26px; color:#ff5a5a; border-color:#ff5a5a; transform:rotate(-14deg); }
.exp-saindo-esq { transition:transform .34s ease, opacity .34s ease; transform:translateX(-140%) rotate(-18deg) !important; opacity:0; }
.exp-saindo-dir { transition:transform .34s ease, opacity .34s ease; transform:translateX(140%) rotate(18deg) !important; opacity:0; }

.explorar-rodape { display:flex; align-items:center; justify-content:center; gap:24px; padding:18px 0 calc(14px + env(safe-area-inset-bottom)); }
.explorar-acao { width:64px; height:64px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; box-shadow:var(--sombra-lg); transition:transform var(--t); }
.explorar-acao:hover { transform:scale(1.08); }
.explorar-pular { background:#fff; color:#ff5a5a; }
.explorar-salvar { background:var(--wa); color:#fff; width:72px; height:72px; }
.explorar-dica { color:rgba(255,255,255,.7); font-size:.82rem; font-weight:600; }

.exp-fim { text-align:center; color:#fff; max-width:380px; padding:24px; }
.exp-fim-icone { font-size:4rem; line-height:1; margin-bottom:12px; color:var(--amarelo); }
.exp-fim h3 { color:#fff; font-size:1.6rem; margin-bottom:8px; }
.exp-fim p { color:rgba(255,255,255,.8); margin-bottom:24px; }
.exp-fim-acoes { display:flex; flex-direction:column; gap:12px; }

/* ── Mobile: filtros viram drawer (off-canvas) ── */
@media (max-width:860px){
  .cat-layout { grid-template-columns:minmax(0,1fr); }   /* minmax(0,…) evita que a grade de cards estoure a largura e empurre o toolbar pra fora da tela */
  body.cat-filtros-abertos { overflow:hidden; }

  /* busca ocupa a linha inteira → as ações quebram pra linha de baixo (largura cheia) */
  .busca-campo { flex:1 1 100%; }

  /* Ordenar (cresce/encolhe) · Explorar · Filtros ícone (canto direito) — grid à prova de overflow */
  .cat-toolbar-acoes { flex:1 1 100%; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--sp-2); align-items:stretch; }
  .ordenar-wrap { order:1; min-width:0; display:flex; }
  .ordenar-select { width:100%; min-width:0; height:auto; padding:var(--sp-3) 30px var(--sp-3) var(--sp-4); background-position:right 10px center; }
  .btn-explorar { order:2; padding:var(--sp-3); gap:var(--sp-1); }

  /* Filtros = só ícone (ação principal), quadrado, no canto direito, contador no topo */
  .cat-filtros-toggle {
    flex:0 0 auto; order:3; position:relative; width:46px; align-self:stretch; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:var(--r-sm);
    background:var(--grad-marca); color:#fff; box-shadow:var(--sombra-sm);
    transition:filter var(--t), transform var(--t);
  }
  .cat-filtros-toggle:hover { filter:brightness(1.07); }
  .cat-filtros-toggle:active { transform:scale(.96); }
  .cat-filtros-toggle-txt { display:none; }                 /* mobile: só o ícone (aria-label garante o nome) */
  .cat-filtros-toggle-n {
    position:absolute; top:-5px; right:-5px;
    display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
    border-radius:var(--r-full); background:var(--amarelo); color:var(--azul-900);
    font-size:var(--fs-2xs); font-weight:800; box-shadow:0 0 0 2px var(--bg);
  }

  /* Explorar = outline secundário no mobile (no desktop mantém o gradiente) */
  .btn-explorar { background:#fff; color:var(--azul-800); border:1.5px solid var(--azul-200); box-shadow:none; }
  .btn-explorar:hover { background:var(--azul-50); transform:none; box-shadow:none; }

  /* bottom sheet: sobe de baixo, cantos arredondados, alça, cabeçalho + footer fixos */
  .cat-filtros {
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:88dvh; height:auto;
    z-index:1150; border:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:0; display:flex; flex-direction:column; overflow:hidden;
    transform:translateY(100%); transition:transform .34s cubic-bezier(.22,.61,.36,1);
  }
  /* sombra SÓ quando aberto — fechada, o drawer fica abaixo da tela e a sombra
     pra cima vazava ~56px sobre a barra branca da nav (o "véu escuro" do catálogo) */
  body.cat-filtros-abertos .cat-filtros { transform:none; box-shadow:0 -12px 44px rgba(4,12,30,.32); }
  .cat-filtros::before { content:""; flex-shrink:0; width:42px; height:4px; border-radius:999px; background:var(--azul-200); margin:var(--sp-3) auto var(--sp-1); }
  .cat-filtros-cab { flex-shrink:0; margin:0; padding:var(--sp-2) var(--sp-5) var(--sp-3); }
  .cat-filtros-cab strong { font-size:var(--fs-lead); }
  .cat-facetas { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding:0 var(--sp-5); border-top:1px solid var(--borda); }
  .cat-filtros-fechar { display:inline-flex; margin-left:auto; }
  .cat-filtros-aplicar { display:flex; flex-shrink:0; margin:0; border-radius:0; padding-top:var(--sp-4); padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom)); box-shadow:0 -6px 16px -14px rgba(6,32,90,.5); }

  /* backdrop SÓ aparece com os filtros abertos (não depender do [hidden],
     que a regra de autor display:block sobrescreve em alguns navegadores →
     era o "véu escuro por cima da nav") */
  .cat-filtros-backdrop { position:fixed; inset:0; z-index:1140; background:rgba(4,12,30,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
  body.cat-filtros-abertos .cat-filtros-backdrop { display:block; }
}
@media (max-width:560px){
  .cat-toolbar { gap:var(--sp-2); }
}

/* ── FAQ por categoria (accordion + FAQPage schema) ── */
.cat-faq-secao { padding-top:0; }
.cat-faq { max-width:760px; margin:0 auto; }
.cat-faq-item { border:1px solid var(--borda); border-radius:12px; padding:4px 18px; margin:10px 0; background:#fff; }
.cat-faq-item summary { cursor:pointer; font-weight:600; color:var(--texto); padding:14px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.cat-faq-item summary::-webkit-details-marker { display:none; }
.cat-faq-item summary::after { content:"+"; font-size:1.3rem; color:var(--azul-700); line-height:1; }
.cat-faq-item[open] summary::after { content:"–"; }
.cat-faq-item[open] summary { border-bottom:1px solid var(--borda); }
.cat-faq-resp { color:var(--texto-suave); line-height:1.7; padding:10px 0 14px; }
/* rodapé discreto da FAQ: links p/ os guias (sem virar outra faixa) */
.cat-faq-guias { max-width:760px; margin:18px auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.cat-faq-guias > span { color:var(--texto-suave); font-weight:600; }