/* Vitrine Catavo — formato "Catálogo direto" (ADR-028 §2; DESIGN-SYSTEM-2 §25).
   Casca enxuta: cabeçalho que rola, faixa de categorias fixa, grade com compra
   no card, painel de detalhes e botão flutuante da sacola. Só tokens de app.css. */

/* ---------- cabeçalho enxuto (não fica fixo) ---------- */
.dc-header{background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.dc-hdr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand act" "search search";align-items:center;gap:8px 12px;padding-block:10px 12px}
.dc-brand{grid-area:brand;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.dc-brand img{max-height:32px;width:auto}
.dc-brand .logo{font-size:1.0625rem;letter-spacing:.12em;max-width:100%}
.dc-name{max-width:100%;font-size:var(--fs-xs);color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-actions{grid-area:act;display:flex;align-items:center;gap:2px}
.dc-search{grid-area:search;display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--color-border-input);border-radius:var(--r-pill);color:var(--color-muted);min-width:0}
.dc-search:focus-within{box-shadow:var(--shadow-focus)}
.dc-search input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;color:var(--color-text)}
.dc-search input:focus{outline:none}
@media (min-width:1024px){
  .dc-hdr{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand search act";gap:32px;min-height:var(--header-h);padding-block:8px}
  .dc-brand{flex-direction:row;align-items:center;gap:12px}
  .dc-brand img{max-height:36px}
  .dc-brand .logo{font-size:1.375rem;letter-spacing:.18em}
  .dc-name{padding-left:12px;border-left:1px solid var(--color-border);font-size:var(--fs-sm)}
  .dc-search{max-width:420px;justify-self:end;width:100%;height:40px}
  .dc-search input{font-size:var(--fs-sm)}
}

/* ---------- faixa de categorias: fixa ao rolar ---------- */
.dc-cats{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-bg);box-shadow:0 1px 0 var(--color-border)}
.dc-cats .chips{padding-block:10px;scroll-padding-inline:var(--gutter)}
@media (max-width:767px){.dc-cats .container{padding-inline:0}.dc-cats .chips{padding-inline:var(--gutter)}}

/* ---------- lista ---------- */
.dc-body{padding-block:16px 48px}
.dc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px;min-height:24px}
.dc-title{font-size:var(--fs-h2)}
.dc-desc{max-width:65ch;font-size:var(--fs-sm)}
.is-direct .card-link{cursor:zoom-in}

/* ---------- painel de detalhes ---------- */
.dc-detail .sheet-body{padding:0}
.dc-pd{display:grid;gap:16px;padding-bottom:20px}
.dc-gal{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:16px 20px 0}
.dc-gal>.ph{margin:0;scroll-snap-align:start}
.dc-gal:focus-visible{outline:none;box-shadow:inset var(--shadow-focus)}
.dc-info{display:grid;gap:16px;padding-inline:20px;align-content:start}
.dc-buy{display:grid;gap:6px}
.dc-pd-name{font-family:var(--font-heading);font-size:var(--fs-h2);line-height:1.15}
.dc-sec{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--color-border);font-size:var(--fs-sm)}
.dc-sec-h{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.dc-sec .size-table{margin-top:0}
@media (min-width:1024px){
  .dc-detail.sheet-adaptive{width:min(880px,92vw)}
  .dc-pd{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding:20px}
  .dc-gal{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;padding:0;scroll-snap-type:none}
  .dc-info{padding:0;position:sticky;top:0}
}

/* ---------- botão flutuante da sacola ---------- */
.dc-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-sticky);display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border-radius:var(--r-pill);background:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-pop);font-size:var(--fs-sm);font-weight:500}
.dc-fab:hover{background:var(--color-accent-hover)}
.dc-fab b{font-weight:600}
.is-direct .toast-region{bottom:calc(var(--bar-h) + 84px)}
.is-direct .dc-body{padding-bottom:96px}

/* ---------- rodapé mínimo ---------- */
.dc-footer{padding-block:32px 24px;margin-top:0}
.dc-foot{display:grid;gap:16px}
.dc-foot-name{font-weight:600}
.dc-footer .dc-foot-links{display:flex;flex-wrap:wrap;gap:10px 24px}
.dc-policy{max-width:65ch}
.dc-foot .legal{margin-top:8px}