/* ============ TOKENS (mesmos do index.html) ============ */
:root{
  --green-bright:#5fae2e; --green-bright-2:#4c9226;
  --green-deep:#1e5b33; --green-deep-2:#164726;
  --ink:#16201b; --slate:#5b6660; --paper:#f5f7f4; --paper-raise:#ffffff;
  --line:#dde4de; --tint:#eaf5ec;
  --display:"Big Shoulders", sans-serif; --body:"Public Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --shadow:0 1px 2px rgba(22,32,27,.06), 0 12px 32px -12px rgba(22,32,27,.18);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#eceff0; --slate:#9fb0a5; --paper:#10140f; --paper-raise:#171d16; --line:#293029; --tint:#182219;
    --green-bright:#77c743; --green-bright-2:#8fd75d; --green-deep:#3d8a5b; --green-deep-2:#4fa06e; }
}
:root[data-theme="dark"]{ --ink:#eceff0; --slate:#9fb0a5; --paper:#10140f; --paper-raise:#171d16; --line:#293029; --tint:#182219;
  --green-bright:#77c743; --green-bright-2:#8fd75d; --green-deep:#3d8a5b; --green-deep-2:#4fa06e; }
:root[data-theme="light"]{ --ink:#16201b; --slate:#5b6660; --paper:#f5f7f4; --paper-raise:#ffffff; --line:#dde4de; --tint:#eaf5ec;
  --green-bright:#5fae2e; --green-bright-2:#4c9226; --green-deep:#1e5b33; --green-deep-2:#164726; }

*{ box-sizing:border-box; }
html{ background:var(--paper); }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:800; text-wrap:balance; margin:0; }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep-2); font-weight:600; }
@media (prefers-color-scheme:dark){ .eyebrow{ color:var(--green-bright-2); } }
.wrap{ max-width:1180px; margin-inline:auto; padding-inline:28px; }
.btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; padding:12px 20px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; text-decoration:none; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--green-deep); }
.btn-bright{ background:var(--green-bright); color:#0e1a10; }
.btn-bright:hover{ background:var(--green-bright-2); }

/* ===== topo ===== */
header.cat-topo{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.cat-topo .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:20px; }
.cat-voltar{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; font-size:14px; color:var(--slate); }
.cat-voltar:hover{ color:var(--ink); }
.cat-marca-logo{ height:30px; width:auto; }
.cat-marca-logo-quadrado{ height:34px; width:34px; border-radius:8px; object-fit:contain; background:#0a0a0a; padding:4px; }

/* ===== hero da marca ===== */
.cat-hero{ padding-block:48px 32px; border-bottom:1px solid var(--line); }
.cat-hero h1{ font-size:clamp(30px,4vw,46px); text-transform:uppercase; }
.cat-hero p{ color:var(--slate); max-width:56ch; margin-top:10px; font-size:15px; }

/* ===== filtros ===== */
.cat-filtros{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; padding-block:22px; }
.cat-filtro{ display:flex; flex-direction:column; gap:4px; }
.cat-filtro label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.cat-filtro select{
  font-family:var(--body); font-size:13.5px; font-weight:600; padding:9px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--paper-raise); color:var(--ink); min-width:150px;
}
.cat-resultados{ margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--slate); }
.cat-resultados b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ===== grade de produtos ===== */
.cat-grade{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding-block:8px 60px; }
.cat-card{ background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.cat-card-fig{ aspect-ratio:1/1; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, var(--tint), var(--paper-raise) 72%); padding:20px; position:relative; overflow:hidden; }
.cat-card-fig svg{ width:78%; height:78%; }
.cat-selo-pendente{ position:absolute; top:10px; left:10px; z-index:3; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; background:var(--tint); border:1px dashed var(--line); color:var(--slate); padding:3px 7px; border-radius:6px; }

/* ===== carrossel de fotos por variação (cor/acabamento) ===== */
.cat-carrossel{ position:relative; width:100%; height:100%; }
.cat-carrossel-trilho{ display:flex; width:100%; height:100%; transition:transform .25s ease; }
.cat-carrossel-trilho img{ width:100%; height:100%; object-fit:contain; flex:0 0 100%; padding:8px; }
.cat-carrossel-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:26px; height:26px; border-radius:50%;
  background:var(--paper-raise); border:1px solid var(--line); color:var(--ink); cursor:pointer; font-size:13px;
  display:grid; place-items:center; box-shadow:var(--shadow); opacity:0; transition:opacity .15s ease;
}
.cat-carrossel:hover .cat-carrossel-seta{ opacity:1; }
.cat-carrossel-seta.esquerda{ left:6px; } .cat-carrossel-seta.direita{ right:6px; }
.cat-carrossel-pontos{ position:absolute; bottom:6px; left:0; right:0; display:flex; justify-content:center; gap:4px; z-index:2; }
.cat-carrossel-ponto{ width:5px; height:5px; border-radius:50%; background:var(--line); cursor:pointer; }
.cat-carrossel-ponto.ativo{ background:var(--green-bright); width:14px; border-radius:3px; }
.cat-carrossel-contagem{ position:absolute; top:10px; right:10px; z-index:3; font-family:var(--mono); font-size:9.5px; background:rgba(22,32,27,.65); color:#fff; padding:3px 7px; border-radius:6px; }
.cat-card-corpo{ padding:14px 16px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.cat-card-nome{ font-family:var(--display); font-weight:700; font-size:16.5px; }
.cat-specs{ display:flex; gap:5px; flex-wrap:wrap; }
.cat-chip{ font-family:var(--mono); font-size:10.5px; padding:3px 8px; border-radius:6px; background:var(--tint); color:var(--green-deep); border:1px solid var(--line); }
@media (prefers-color-scheme:dark){ .cat-chip{ color:var(--green-bright-2); } }
.cat-chip-pendente{ background:transparent; color:var(--slate); border-style:dashed; }
.cat-checkbox{ display:flex; align-items:center; gap:8px; margin-top:2px; padding-top:8px; border-top:1px dashed var(--line); font-size:13px; font-weight:600; cursor:pointer; }
.cat-checkbox input{ width:17px; height:17px; accent-color:var(--green-bright); cursor:pointer; }

/* ===== lista flutuante (carrinho sem preço) ===== */
#dkar-lista-flutuante{
  position:fixed; right:20px; bottom:20px; z-index:60; opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
}
#dkar-lista-flutuante.visivel{ opacity:1; pointer-events:auto; transform:translateY(0); }
.dkar-lista-botao{
  display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper); border:none; border-radius:999px;
  padding:13px 20px 13px 16px; font-family:var(--body); font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow);
}
.dkar-lista-botao .bolha{ background:var(--green-bright); color:#0e1a10; border-radius:50%; width:24px; height:24px; display:grid; place-items:center; font-size:12.5px; font-family:var(--mono); font-weight:700; }
.dkar-lista-painel{
  display:none; position:absolute; bottom:64px; right:0; width:320px; max-height:60vh; overflow-y:auto;
  background:var(--paper-raise); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
}
.dkar-lista-painel.aberta{ display:block; }
.dkar-lista-painel h3{ font-size:15px; margin-bottom:10px; }
.dkar-lista-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px; }
.dkar-lista-item button{ background:none; border:none; color:var(--slate); cursor:pointer; font-size:14px; padding:2px 6px; }
.dkar-lista-item button:hover{ color:#c0392b; }
.dkar-lista-vazia{ color:var(--slate); font-size:13px; }
.dkar-lista-acoes{ margin-top:12px; display:flex; }
.dkar-lista-acoes a{ width:100%; text-align:center; }

@media (max-width:900px){
  .cat-grade{ grid-template-columns:repeat(2, 1fr); }
  .cat-resultados{ margin-left:0; }
}
@media (max-width:560px){
  .cat-grade{ grid-template-columns:1fr 1fr; gap:12px; }
  .dkar-lista-painel{ width:calc(100vw - 40px); right:-10px; }
}