/* Página do produto — celular (390px). Sem media query nesta fase; o desktop entra depois. */

.prod-main{padding-bottom:140px}

/* Trilha "Coleção · categoria" */
.crumb{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);padding:8px 0 16px}
.crumb-link{min-height:44px;display:inline-flex;align-items:center;font-size:14px;color:var(--ink-2)}

/* Topo: galeria + coluna de compra */
.prod-topo{display:flex;flex-wrap:wrap;gap:16px}

.prod-galeria{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:12px}
.galeria-fig{background:var(--surface);border-radius:var(--r-card);position:relative;aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.galeria-pontos{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:0}
.galeria-ponto{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.galeria-bolinha{width:10px;height:10px;border-radius:999px;background:var(--dash)}
.galeria-ponto.is-on .galeria-bolinha{background:var(--ink)}
.galeria-thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.thumb{flex:none;width:88px;height:88px;border-radius:var(--r-tile);background:var(--surface);border:1px solid var(--line);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:10px}
.thumb.is-on{border-color:var(--ink)}

.prod-compra{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.prod-cab{display:flex;flex-direction:column;gap:12px}
.prod-estoque{font-size:14px;color:var(--ink-2)}
.prod-nome{font-size:clamp(32px,7vw,56px)}
.prod-desc{margin:0;max-width:30em;font-size:clamp(15px,3.6vw,17px);line-height:1.55;color:var(--ink-2)}
.cores{display:flex;gap:14px;align-items:center}

/* Cartão de compra */
.compra{background:var(--surface);border-radius:var(--r-card);padding:clamp(20px,4vw,28px);display:flex;flex-direction:column;gap:20px}
.compra-topo{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.compra-preco{font-size:clamp(28px,6vw,40px);font-weight:500;letter-spacing:-0.02em}
.conf{display:flex;flex-direction:column;gap:12px}
.conf-linha{display:flex;gap:12px;align-items:center;border-bottom:1px dotted var(--dot);padding-bottom:12px}
.conf-linha:last-child{border-bottom:0;padding-bottom:0}
.conf-ico{flex:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.conf-txt{font-size:15px;line-height:1.4}

/* Descrição e especificações */
.prod-textos{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.prod-bloco{flex:1 1 320px;min-width:0;background:var(--surface);border-radius:var(--r-card);padding:clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:16px}
.prod-p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.specs--prod .spec{flex-wrap:wrap;gap:4px 16px}

/* Combina com */
.relacionados{margin-top:24px}

/* Barra fixa do celular */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bar-bg);border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.barra-info{display:flex;flex-direction:column;min-width:0}
.barra-preco{font-size:20px;font-weight:500;letter-spacing:-0.02em}
.barra-meta{font-size:13px;color:var(--ink-2)}
.barra-cta{flex:1;border:0;cursor:pointer;background:var(--ink);color:var(--bg);border-radius:999px;height:52px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:16px;font-weight:500}
.barra-cta:hover{color:var(--bg)}

/* Slug que não existe */
.prod-erro{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 0 0}

/* ── Desktop ───────────────────────────────────────────── */
/* Só a barra fixa muda: o protótipo a esconde a partir de 900 (isNarrow).
   O resto (galeria | compra, descrição | especificações, "Combina com")
   já cai sozinho pelo flex-wrap e pelo auto-fill do grid. */
@media (min-width:900px){
  .barra{display:none}
}

/* ── Catálogo: fotos reais, promoção e esgotado (trilha A) ─ */
/* Sem foto cadastrada, nada aqui aparece: continua valendo o placeholder do desenho. */
.galeria-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb--foto{padding:0;overflow:hidden}
.thumb-foto{width:100%;height:100%;object-fit:cover}
.pcard-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-tile)}

/* Preço promocional: o cheio riscado ao lado e o percentual calculado. */
.compra-precos{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.preco-antes{font-size:15px;color:var(--ink-2);text-decoration:line-through}
.preco-off{font-size:13px;font-weight:500;height:28px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--bg);display:inline-flex;align-items:center}
.pcard-preco .preco-antes{margin-left:8px;font-size:13px}

.cta:disabled,.barra-cta:disabled{opacity:.45;cursor:not-allowed}