/* Serena Bloom: página de produto (usa os tokens de loja.css) */

:root {
  /* Cor de cada pote, para a lista do kit */
  --pote-diurno: #c4561f;
  --pote-olhos: #e3b533;
  --pote-noturno: #e89a2c;
  --pote-esfoliante: #8a7a6c;

  /* Faixa da rotina */
  --manha: #6b3a12;
  --tarde: #3a2214;
  --noite: #1f1612;
  --faixa-texto: #efe4d6;
  --faixa-titulo: var(--branco);
  --mel-claro: #e7a865;    /* 4,55:1 ou mais em toda a faixa */

}

/* ---------- Topo: galeria + compra ---------- */

.topo {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}

.galeria-palco {
  position: relative;
  margin: 0;
}

.galeria-palco img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--pedra);
  border-radius: var(--raio) var(--raio-grande) var(--raio) var(--raio);
  transition: opacity .2s;
}
/* Foto horizontal: mostra inteira em vez de cortar as laterais */
.galeria-palco img[data-ajuste="inteira"] { object-fit: contain; }
.galeria-palco[aria-busy="true"] img { opacity: .55; }

.bilhete {
  position: absolute;
  left: var(--margem);
  bottom: clamp(20px, 4vw, 44px);
  max-width: 15ch;
  padding: 14px 18px;
  background: var(--salvia);
  color: var(--fundo);
  font-size: .9375rem;
  line-height: 1.4;
  transform: rotate(-3deg);
  box-shadow: 0 8px 18px var(--sombra);
}

.miniaturas {
  display: flex;
  gap: 10px;
  /* Respiro de 8px em volta para o anel de foco não ser cortado pela rolagem */
  padding: 8px var(--margem);
  margin-top: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.miniaturas button {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--pedra);
  overflow: hidden;
}
.miniaturas img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.miniaturas button:hover img { opacity: 1; }
/* Selecionada: borda + sombra interna, sem mudar o tamanho */
.miniaturas [aria-selected="true"] { border-color: var(--texto); box-shadow: inset 0 0 0 1px var(--texto); }
.miniaturas [aria-selected="true"] img { opacity: 1; }

.compra {
  padding: clamp(32px, 5vw, 64px) var(--margem) 40px clamp(32px, 4vw, 64px);
}

.compra h1 {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 28px;
}

.frase {
  max-width: 34ch;
  font-size: 1.1875rem;
}


.aviso-rotulo {
  max-width: 44ch;
  margin-top: 24px;
  font-size: .875rem;
  color: var(--texto-suave);
}

/* ---------- Pacotes de kits e "leve junto" ---------- */

.pacotes, .junto { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
.pacotes-titulo, .junto-titulo { margin-bottom: 12px; padding: 0; font-weight: 600; }
.junto-titulo small { color: var(--texto-suave); font-weight: 400; }
.pacote, .junto-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 20px;
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio);
  background: var(--branco);
  cursor: pointer;
}
.pacote + .pacote { margin-top: 14px; }
.pacote:has(input:checked) { border: 2px solid var(--texto); padding: 17px 19px; }
.pacote input, .junto-item input { width: 22px; height: 22px; margin: 0; accent-color: var(--botao); }
.pacote-info, .junto-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pacote-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pacote-nome { font: 700 1.375rem/1.1 var(--fonte); }
.pacote-chip { padding: 3px 10px; border-radius: var(--raio); background: var(--pedra); font-size: .875rem; }
.pacote-sub, .junto-sub { color: var(--texto-suave); font-size: .9375rem; }
.pacote-precos { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.pacote-precos strong { font-size: 1.375rem; white-space: nowrap; }
.pacote-precos s { color: var(--texto-suave); font-size: .9375rem; white-space: nowrap; }
.pacote-destaque { margin-top: 22px !important; }
.pacote-selo {
  position: absolute;
  top: -13px;
  right: 16px;
  padding: 3px 12px;
  border-radius: var(--raio);
  background: var(--texto);
  color: var(--branco);
  font-size: .8125rem;
  font-weight: 700;
}

.junto { padding-top: 24px; border-top: 1px solid var(--linha); }
/* Legenda solta (float) para a linha ficar acima dela, e não cortando o texto */
.junto-titulo { float: left; width: 100%; }
.junto-titulo + * { clear: both; }
.junto-item { grid-template-columns: auto 56px minmax(0, 1fr) auto; border-style: dashed; }
.junto-item + .junto-item { margin-top: 12px; }
.junto-item:has(input:checked) { border: 2px solid var(--texto); padding: 17px 19px; }
.junto-item img { width: 56px; height: 56px; border-radius: var(--raio); object-fit: cover; background: var(--pedra); }
.junto-info strong { font-size: 1.0625rem; }
.junto-qtd { color: var(--texto-suave); }

.compra-total { margin-top: 18px; font-size: 1.125rem; }
.compra-total strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.botao-comprar { width: 100%; max-width: 480px; margin-top: 14px; }

@media (max-width: 420px) {
  .pacote, .junto-item { gap: 4px 12px; padding: 16px 14px; }
  .pacote:has(input:checked), .junto-item:has(input:checked) { padding: 15px 13px; }
  .junto-item { grid-template-columns: auto 48px minmax(0, 1fr); }
  .junto-item img { width: 48px; height: 48px; }
  .junto-item .pacote-precos { grid-column: 3; flex-direction: row; align-items: baseline; gap: 8px; }
  .pacote-nome { font-size: 1.25rem; }
  .pacote-precos strong { font-size: 1.25rem; }
}

@media (min-width: 960px) {
  /* No desktop há espaço: as miniaturas quebram linha em vez de rolar */
  .miniaturas { padding: 8px; flex-wrap: wrap; overflow: visible; }
}

/* ---------- O que vem na caixa ---------- */

.kit {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 64px;
}

.kit h2, .duvidas h2 { font-size: var(--titulo-secao); }
.kit h2 { margin-bottom: 14px; }
.kit-intro p { max-width: 32ch; color: var(--texto-suave); }

.kit-lista { list-style: none; margin: 0; padding: 0; }
.kit-lista li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}
.kit-lista li:first-child { border-top: 1px solid var(--linha); }
.cor {
  width: 14px; height: 14px;
  border-radius: 50%;
  transform: translateY(1px);
}
.cor-diurno { background: var(--pote-diurno); }
.cor-olhos { background: var(--pote-olhos); }
.cor-noturno { background: var(--pote-noturno); }
.cor-esfoliante { background: var(--pote-esfoliante); }
.kit-item { font: 600 1.5rem/1.2 var(--fonte-titulo); }
.kit-quando { color: var(--texto-suave); text-align: right; }

/* ---------- Rotina: o elemento ousado ---------- */

.rotina {
  background: linear-gradient(180deg, var(--manha) 0%, var(--tarde) 55%, var(--noite) 100%);
  color: var(--faixa-texto);
  padding: var(--secao-grande) var(--margem);
}

.rotina h2 {
  max-width: 14ch;
  margin: 0 auto;
  text-align: center;
  color: var(--faixa-titulo);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
}

.rotina-intro {
  max-width: 44ch;
  margin: 20px auto 0;
  text-align: center;
}

.passos {
  list-style: none;
  max-width: 960px;
  margin: clamp(48px, 7vw, 88px) auto 0;
  padding: 0;
  display: grid;
  gap: clamp(48px, 7vw, 80px);
}

.passo {
  display: grid;
  align-items: center;
  gap: 24px clamp(28px, 5vw, 64px);
}

/* Celular: uma coluna, fotos alternando de lado. Telas maiores: zigue-zague. */
.recorte { width: 72%; aspect-ratio: 1; object-fit: cover; }
.passo:nth-child(even) .recorte { margin-left: auto; }

@media (min-width: 641px) {
  .passo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .passo:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .recorte { width: 100%; }
  .passo:nth-child(even) .recorte { order: 2; }
}

.recorte-1 { clip-path: polygon(8% 4%, 92% 0, 100% 70%, 84% 100%, 6% 94%, 0 30%); }
.recorte-2 { clip-path: polygon(0 10%, 70% 0, 100% 18%, 96% 92%, 24% 100%, 4% 80%); }
.recorte-3 { clip-path: polygon(14% 0, 100% 6%, 94% 84%, 62% 100%, 0 92%, 4% 22%); }
.recorte-4 { clip-path: polygon(4% 4%, 80% 0, 100% 40%, 92% 100%, 10% 96%, 0 60%); }

.passo h3 {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  color: var(--faixa-titulo);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}
.passo-num {
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: .8;
  color: var(--mel-claro);
}

.passo dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  max-width: 46ch;
  margin: 22px 0 0;
}
.passo dt { font-weight: 600; color: var(--mel-claro); }
.passo dd { margin: 0; }

/* ---------- Bancada ---------- */

.bancada {
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--secao) var(--margem) 0;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: 32px 56px;
}
.bancada img { width: 100%; border-radius: var(--raio); }
.bancada h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.bancada-texto p + p { margin-top: 12px; }
.bancada-texto { max-width: 34ch; padding-bottom: 8px; }

/* Dúvidas: estilo em loja.css. A seção de dúvidas já termina com respiro grande */
.outros-produtos { padding-top: 0; }

@media (max-width: 959px) {
  .topo { grid-template-columns: minmax(0, 1fr); }
  .galeria-palco img { border-radius: 0 var(--raio-grande) 0 0; }
  /* No alto da foto o fundo é liso; embaixo o bilhete cobriria um rótulo */
  .bilhete { top: 16px; bottom: auto; padding: 10px 14px; font-size: .875rem; }
  .compra { padding: 28px var(--margem) 8px; }
  .compra h1 { margin-bottom: 18px; }

  .kit, .bancada { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .kit-lista li { grid-template-columns: 14px 1fr; }
  .kit-quando { grid-column: 2; text-align: left; }
}