.prod-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:28px;
  align-items:start;
}

/* GALERIA — imagem principal sem cortar */
.gallery{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gallery #js-main-img{
  width:100%;
  height:auto;              /* mantém proporção original */
  max-height:640px;         /* limite opcional pra não ficar gigante */
  object-fit:contain;       /* mostra a foto inteira */
  border-radius:16px;
  border:1px solid #eee;
  background:#f7f7fb;       /* fundo neutro nas faixas laterais */
}

/* thumbs continuam cortando em 4:3/cover */
.thumbs{
  display:flex;
  gap:10px;
  margin-top:10px;
  overflow-x:auto;
}
.thumbs img{
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #eee;
  cursor:pointer;
  transition:transform .2s;
}
.thumbs img:hover{transform:scale(1.05)}

.card{border:1px solid #eee;border-radius:16px;background:#fff}
.p16{padding:16px}
.muted{color:#666}

.buy-card h1{margin:0 0 8px;line-height:1.05}
.price-box{margin:6px 0 2px}
.pix-line{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.pix-value{font-size:28px;font-weight:800;color:#5b21b6}
.pix-badge{font-size:14px;color:#16a34a;font-weight:700}
.cred-line{color:#374151;margin-bottom:8px}
.cred-link{color:#b91c1c;font-weight:700;text-decoration:none}
.cred-link:hover{text-decoration:underline}

/* swatches */
.attr-label{margin:12px 0 8px;font-weight:700}
.swatches{display:flex;flex-wrap:wrap;gap:12px;--swatch-w:88px}
.swatch{
  position:relative;appearance:none;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  min-width:var(--swatch-w);height:56px;padding:10px 16px;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;white-space:nowrap;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s
}
.swatch.on{border-color:#5b21b6;box-shadow:0 0 0 3px #ede9fe}
.swatch[disabled],.swatch.disabled{opacity:.55;cursor:not-allowed}
.swatch[disabled]::after,.swatch.disabled::after{
  content:"";position:absolute;inset:6% 6%;
  background:linear-gradient(135deg,transparent 45%,rgba(0,0,0,.28) 45%,rgba(0,0,0,.28) 55%,transparent 55%);
  border-radius:10px;pointer-events:none
}

.qty{width:90px;padding:10px;border:1px solid #e5e7eb;border-radius:12px}
.btn.primary{background:#2b103f;color:#fff;border:0;font-weight:800;padding:16px;border-radius:14px;cursor:pointer;width:100%}
.btn.primary:disabled{opacity:.6;cursor:not-allowed}

.notice{margin-top:14px;background:#f3e8ff;border:1px solid #e9d5ff;color:#3b0764;padding:14px;border-radius:14px;text-align:center}

@media (max-width:900px){
  .prod-grid{grid-template-columns:1fr;gap:20px}
  .buy-card{box-shadow:0 8px 30px rgba(0,0,0,.05)}
  .qty{width:80px}
}

/* descrição */
.desc-icons{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.desc-icons img{height:20px}
.hint{font-size:12px;color:#6b7280;margin-top:4px}

/* modal parcelas */
dialog.parcelas{border:0;border-radius:16px;padding:0;width:min(520px,92vw)}
dialog.parcelas::backdrop{background:rgba(15,23,42,.45)}
.parc-wrap{padding:18px 18px 12px}
.parc-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.parc-head h3{margin:0;font-size:18px}
.parc-close{border:0;background:#f1f5f9;border-radius:10px;padding:8px 10px;cursor:pointer}
.parc-table{width:100%;border-collapse:collapse;margin-top:12px}
.parc-table th,.parc-table td{padding:10px 8px;border-bottom:1px solid #eee;text-align:left}
.parc-note{font-size:12px;color:#6b7280;margin:10px 2px 6px}

/* ====== DENSE / COMPACT VARIANTS UI ====== */
.buy-card{
  --chip-h: 38px;          /* 34–40px: ajuste de altura */
  --chip-r: 12px;          /* raio dos chips */
  --chip-pad-x: 12px;      /* padding horizontal dos chips */
  --chip-gap: 8px;         /* espaçamento entre chips */
  --group-gap: 6px;        /* espaço entre label e chips */
}

.buy-card h1{ margin: 0 0 6px; line-height: 1.05; }
.buy-card .price-box{ margin: 4px 0 10px; }

.buy-card .attr-label{
  margin: 10px 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

/* grade mais compacta e auto-ajustável */
.buy-card .swatches{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--chip-gap);
  margin: var(--group-gap) 0 8px;
}

/* chips mais baixinhos, com foco suave */
.buy-card .swatch{
  height: var(--chip-h);
  min-width: 0;
  padding: 0 var(--chip-pad-x);
  border: 1px solid #e5e7eb;
  border-radius: var(--chip-r);
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: box-shadow .15s, border-color .15s, background .15s, transform .02s;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.buy-card .swatch:active{ transform: translateY(1px); }

.buy-card .swatch.on{
  border-color: #6d28d9;               /* roxo brand */
  background: #faf5ff;
  box-shadow: 0 0 0 2px #ede9fe;
}

.buy-card .swatch.disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* mensagem e estoques mais discretos */
.buy-card .hint{ margin: 4px 0 8px; font-size: 12px; color: #667085; }
.buy-card .muted{ font-size: 12px; }

/* quantidade mais enxuta */
.buy-card .qty{
  height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
}

/* reduz respiros gerais do card */
.buy-card .p16, .buy-card{ padding: 14px !important; }

/* em telas médias/grandes: duas colunas de grupos para ocupar menos altura */
@media (min-width: 900px){
  /* usa CSS relational selectors para agrupar pares label+chips */
  .buy-card .attr-label{ margin-top: 6px; }
  .buy-card .attr-label + .swatches{
    margin-bottom: 6px;
  }
  /* quando houver muitos grupos, aproxima verticalmente */
  .buy-card .attr-label + .swatches + .attr-label{
    margin-top: 2px;
  }
}

/* swatch já existe; aqui só alinhamos ícone + texto */
.swatches .swatch { display:flex; align-items:center; gap:8px; }

/* coração CSS (preenchido por --swatch-color) */
.heart {
  position: relative;
  width: 16px; height: 14px;
  display:inline-block;
}
.heart::before, .heart::after {
  content:"";
  position:absolute;
  width: 10px; height: 14px;
  background: var(--swatch-color, #222);
  border-radius: 10px 10px 0 0;
  top: 0;
}
.heart::before { left: 6px; transform: rotate(45deg);  transform-origin: left bottom; }
.heart::after  { left: 0;  transform: rotate(-45deg); transform-origin: right bottom; }

/* coração branco precisa de contorno pra aparecer */
.heart--white::before, .heart--white::after {
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}