/* Mofflits — protótipo (Chico do Design, 01/10/2026)
   Cores: amostradas da prancha da logo aprovada — APROXIMADAS, NÃO OFICIAIS.
   Fontes: Young Serif + Figtree + Caveat (Google Fonts, OFL) — PROVISÓRIAS. */

@font-face { font-family: "Young Serif"; src: url(../fonts/youngserif-400-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-var-latin.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(../fonts/caveat-500-latin.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --verde: #2B3B2A;        /* amostrado do PNG */
  --verde-escuro: #1F2B1F;
  --terracota: #AB521C;    /* amostrado do PNG */
  --creme: #F6F1E9;        /* entre o fundo da prancha e o creme da paleta */
  --creme-fundo: #EFE7DA;
  --papel: #FCFAF6;
  --cartao: #F8EEE2;       /* mesmo fundo das fotos da coleção */
  --tinta: #1E271D;
  --suave: #4F5848;
  --linha: #D9CFBF;
  --erro: #9E2A14;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mao: "Caveat", "Bradley Hand", cursive;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;
  --largura: 76rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --raio: 14px;
  --raio-pequeno: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--creme); color: var(--tinta); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; margin: 0; color: var(--verde-escuro); text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 4px; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: var(--s4); top: -4rem; background: var(--verde); color: var(--papel); padding: var(--s3) var(--s4); border-radius: var(--raio-pequeno); z-index: 50; }
.pular:focus { top: var(--s4); }
.contem { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.mao { font-family: var(--mao); font-weight: 500; color: var(--verde); font-size: 1.9rem; line-height: 1.05; display: inline-block; transform: rotate(-5deg); }
.mao svg { width: .8em; height: .8em; vertical-align: -.05em; color: var(--terracota); }

/* ---------- cabeçalho ---------- */
.topo { position: relative; z-index: 20; }
.topo .contem { display: flex; align-items: center; gap: var(--s5); min-height: 76px; }
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca img { width: 150px; height: auto; }
.menu { margin-left: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); text-decoration: none; font-weight: 500; font-size: 1rem; border-radius: 999px; }
.menu a:hover { background: rgba(43,59,42,.07); }
.menu a[aria-current="page"] { background: var(--verde); color: var(--papel); }
.abre-menu { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; color: var(--verde); border-radius: 50%; cursor: pointer; }
.abre-menu svg { width: 26px; height: 26px; }
@media (max-width: 820px) {
  .abre-menu { display: inline-grid; place-items: center; }
  .menu { position: absolute; inset: 100% 0 auto 0; margin: 0; background: var(--papel); border-bottom: 1px solid var(--linha); display: none; box-shadow: 0 18px 30px -24px rgba(31,43,31,.5); }
  .menu.aberto { display: block; }
  .menu ul { flex-direction: column; padding: var(--s3) var(--gutter) var(--s5); gap: 0; }
  .menu a { width: 100%; font-size: 1.125rem; border-radius: var(--raio-pequeno); }
}

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s5) 0 var(--s6); border-radius: 999px; background: var(--verde); color: var(--papel); font: 600 1.0625rem/1 var(--sans); text-decoration: none; border: 2px solid var(--verde); cursor: pointer; transition: background-color .18s ease; }
.botao:hover { background: var(--verde-escuro); }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao.claro { background: transparent; color: var(--verde); }
.botao.claro:hover { background: rgba(43,59,42,.07); }
.botao.pequeno { min-height: 46px; padding: 0 var(--s5); font-size: 1rem; }

/* ---------- herói ---------- */
.heroi { position: relative; overflow: hidden; margin-top: -76px; padding-top: 76px; background: var(--creme); }
.heroi .contem { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(min(62vw, 1040px) / 1.777 - 20px); align-content: center; padding-block: var(--s6) var(--s7); }
.heroi-texto { max-width: min(34rem, 38vw); }
@media (max-width: 820px) { .heroi-texto { max-width: 34rem; } }
.heroi h1 { font-size: clamp(2.9rem, 5.1vw, 4.3rem); line-height: .98; }
.heroi .risco { margin-block: var(--s4); }
.risco { display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--terracota); margin: var(--s5) 0; }
.heroi .lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--suave); max-width: 27rem; margin-bottom: var(--s6); }
.heroi-foto { position: absolute; z-index: 1; inset: 0 0 0 auto; width: min(60%, 1040px); }
.heroi-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 55%; }
.heroi-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--creme) 0%, rgba(246,241,233,0) 16%); }
@media (max-width: 820px) {
  .heroi { padding-top: 76px; display: flex; flex-direction: column; }
  .heroi .contem { order: 1; }
  .heroi-foto { order: 2; }
  .heroi .contem { min-height: 0; padding-block: var(--s5) var(--s6); }
  .heroi-foto { position: relative; width: 100%; aspect-ratio: 4 / 3; }
  .heroi-foto img { object-position: 48% 55%; }
  .heroi-foto::before { background: linear-gradient(180deg, var(--creme) 0%, rgba(246,241,233,0) 22%); }
}

/* ---------- seções ---------- */
.secao { padding-block: clamp(3rem, 7vw, 5.5rem); }
.titulo-centro { text-align: center; }
.titulo-centro h2, .h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.sub { color: var(--suave); margin-top: var(--s3); font-size: 1.0625rem; }
.titulo-centro .sub { letter-spacing: .01em; }

/* caixinha-transportadora (home) — fotos reais do fundador, 06/10/2026 */
.casinha { background: var(--creme-fundo); }
.casinha-topo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.casinha h2 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); max-width: 13ch; }
.casinha .intro { color: var(--suave); margin-top: var(--s4); max-width: 27rem; font-size: 1.1875rem; }
.casinha figure { margin: 0; }
.casinha-heroi img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); background: var(--linha); }
.passos { list-style: none; padding: 0; margin: var(--s8) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.passos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--raio); background: var(--linha); }
.passos figcaption { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); color: var(--verde-escuro); line-height: 1.1; margin-top: var(--s3); }
.cores { margin-top: var(--s8); padding-top: var(--s7); border-top: 1px solid var(--linha); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.cores h3 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); }
.cores-grade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.cores-grade img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio); background: var(--linha); }
.cores-grade figcaption { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-weight: 600; font-size: 1.125rem; }
.amostra { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(30,39,29,.25); flex: none; }
.amostra.sage { background: #696F45; }   /* amostrado da foto real */
.amostra.blush { background: #EDC3C4; }  /* amostrado da foto real */
@media (max-width: 820px) {
  .casinha-topo { grid-template-columns: minmax(0, 1fr); }
  .passos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--s7) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) var(--s3); scroll-padding-inline: var(--gutter); }
  .passos > li { scroll-snap-align: start; }
  .cores { margin-top: var(--s7); padding-top: var(--s6); grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* vai junto (home): 4 cenas, grade 2×2 com a 2ª coluna descida no desktop */
.junto h2 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); max-width: 17ch; }
.junto-grade { list-style: none; padding: 0; margin: var(--s7) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) clamp(1.5rem, 3.5vw, 3rem); }
.junto-card:nth-child(even) { transform: translateY(var(--s8)); }
.junto-grade { padding-bottom: var(--s8); }
.junto-card img { width: 100%; aspect-ratio: 1400 / 781; object-fit: cover; border-radius: var(--raio); background: var(--creme-fundo); }
.junto-card h3 { font-size: clamp(1.6rem, 2.3vw, 2rem); margin-top: var(--s5); }
.junto-card p { color: var(--suave); margin-top: var(--s2); font-size: 1.125rem; max-width: 30rem; }
@media (max-width: 760px) {
  .junto-grade { grid-template-columns: minmax(0, 1fr); gap: var(--s6); margin-top: var(--s5); padding-bottom: 0; }
  .junto-card:nth-child(even) { transform: none; }
  .junto-card h3 { margin-top: var(--s4); }
}

/* presente (antes do rodapé) */
.presente { background: var(--verde); color: var(--papel); padding-block: clamp(3.5rem, 8vw, 6rem); }
.presente .contem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s6); }
.presente h2 { color: var(--papel); font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 22ch; }
.presente .botao { background: var(--papel); color: var(--verde-escuro); border-color: var(--papel); }
.presente .botao:hover { background: var(--creme-fundo); }
.presente .botao:focus-visible { outline-color: var(--papel); }

.acess { background: var(--papel); border-radius: var(--raio); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.acess img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* ---------- compra (06/10/2026): preço, botão e aviso do checkout (Shopify desde 07/10/2026) ---------- */
.preco { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--verde-escuro); }
.compra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.botao.comprar { padding-inline: var(--s5); text-align: left; line-height: 1.2; }
.checkout-aviso { font-size: .9375rem; color: var(--suave); max-width: 24rem; }
.checkout-aviso:empty { display: none; }
.checkout-aviso::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--terracota); margin-right: var(--s2); vertical-align: .1em; }
.sem-caixinha { font-weight: 600; color: var(--verde); font-size: .9375rem; }

/* kit: escolha do bichinho */
.kit-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s6); flex-wrap: wrap; }
.kit h2 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); }
.kit .sub { max-width: 34rem; font-size: 1.125rem; }
.preco-kit { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.preco-kit span { font-weight: 600; color: var(--suave); font-size: .9375rem; }
.preco-kit strong { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--verde-escuro); }
.escolha { border: 0; margin: var(--s6) 0 0; padding: 0; min-width: 0; }
.escolha-grade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.opcao { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--cartao); border-radius: var(--raio); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s ease; }
.opcao img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.opcao .nome { font-family: var(--serif); font-size: 1.5rem; color: var(--verde-escuro); line-height: 1.1; padding: var(--s3) var(--s3) 0; text-align: center; }
.opcao .jeito { font-size: .9375rem; color: var(--suave); padding: var(--s1) var(--s3) var(--s4); text-align: center; }
.opcao:hover { box-shadow: inset 0 0 0 2px var(--linha); }
.opcao .marcado { position: absolute; top: var(--s3); left: var(--s3); display: none; align-items: center; gap: var(--s1); min-height: 30px; padding: 0 var(--s3) 0 var(--s2); border-radius: 999px; background: var(--verde); color: var(--papel); font-size: .875rem; font-weight: 600; }
.opcao .marcado::before { content: ""; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -2px); }
.opcao:has(input:checked) { box-shadow: inset 0 0 0 3px var(--verde); background: var(--papel); }
.opcao:has(input:checked) .marcado { display: inline-flex; }
.opcao:has(input:focus-visible) { outline: 3px solid var(--terracota); outline-offset: 3px; }
@media (max-width: 900px) {
  .escolha-grade { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 30%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--s3); scroll-padding-inline: var(--gutter); }
  .escolha-grade > li { scroll-snap-align: start; }
  .preco-kit { align-items: flex-start; }
}
@media (max-width: 520px) { .escolha-grade { grid-auto-columns: 42%; } .opcao .nome { font-size: 1.3rem; } }

/* o que vem no kit + Adoption Card */
.inclui { background: var(--creme-fundo); }
.inclui .contem { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.inclui h2 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); max-width: 14ch; }
.inclui-lista { list-style: none; padding: 0; margin: var(--s5) 0 var(--s5); }
.inclui-lista li { padding-block: var(--s3); border-top: 1px solid var(--linha); }
.inclui-lista li:last-child { border-bottom: 1px solid var(--linha); }
.inclui-lista h3 { font-size: 1.4rem; }
.inclui-lista p { color: var(--suave); margin-top: var(--s1); }
.inclui-cartao { margin: 0; }
.inclui-cartao .cartao-adocao { width: 100%; height: auto; border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(31,43,31,.18), 0 18px 36px -14px rgba(31,43,31,.45); }
.inclui-cartao figcaption { font-family: var(--mao); font-size: 1.75rem; color: var(--terracota); margin-top: var(--s5); text-align: center; line-height: 1.1; }
@media (max-width: 900px) { .inclui .contem { grid-template-columns: minmax(0, 1fr); } }

/* caixinha: preço */
.preco-linha { margin-top: var(--s5); font-size: 1.0625rem; }
.preco-linha strong { font-family: var(--serif); font-weight: 400; font-size: 2rem; color: var(--verde-escuro); margin-right: var(--s2); }
.casinha .detalhe { color: var(--suave); margin-top: var(--s1); }
.cores-grade .compra { margin-top: var(--s3); }

/* cards de produto (Accessories: avulso e pacotes) */
.produto { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.produto > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.produto .corpo, .grade-acess .produto .corpo { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.produto h3 { font-size: 1.6rem; }
.produto p:not(.preco):not(.checkout-aviso) { color: var(--suave); }
.produto .compra, .produto > .corpo > .botao { margin-top: auto; padding-top: var(--s2); }
.pacote-arte { aspect-ratio: 4 / 5; background: var(--creme-fundo); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: var(--s2); padding: var(--s5); }
.pacote-arte img { width: 44%; aspect-ratio: 1; object-fit: contain; background: var(--papel); border-radius: 22px; padding: 6%; }
.pacote-arte.n1 img { width: 70%; }
.pacote-arte.n5 img { width: 30%; }
@media (max-width: 520px) { .produto > img, .pacote-arte { aspect-ratio: 4 / 3; } .pacote-arte img { width: 28%; } .pacote-arte.n1 img { width: 40%; } .pacote-arte.n5 img { width: 22%; } }

/* FAQ */
.faq h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.faq-lista { margin-top: var(--s5); max-width: 46rem; border-top: 1px solid var(--linha); }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 56px; padding-block: var(--s3); font-family: var(--serif); font-size: 1.35rem; color: var(--verde-escuro); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; color: var(--terracota); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--suave); padding-bottom: var(--s5); max-width: 40rem; }

/* coleção: botão do kit em cada ficha */
.ficha .compra { margin-top: var(--s2); }
.ficha .sem-caixinha { margin-top: var(--s3); }

/* ---------- faixa de acessórios (home) — só CSS: translate em loop, -50% = 1 conjunto (05/10/2026) ---------- */
.faixa { --t: 88px; --vao: var(--s3); background: var(--creme-fundo); padding-block: var(--s5) var(--s4); overflow: hidden; }
.faixa-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4) var(--s5); flex-wrap: wrap; }
.faixa h2 { font-size: clamp(1.75rem, 2.6vw, 2.2rem); }
.faixa .sub { max-width: 46rem; }
.faixa-acoes { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.faixa-pausa { min-height: 46px; padding: 0 var(--s4); border: 0; background: transparent; color: var(--verde); font: 600 .9375rem/1 var(--sans); border-radius: 999px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.faixa-pausa:hover { background: rgba(43,59,42,.07); }
.faixa-janela { margin-top: var(--s4); display: grid; gap: var(--vao); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.trilho { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: faixa-anda var(--dur, 100s) linear infinite; will-change: transform; }
.trilho.volta { animation-direction: reverse; }
.trilho li { flex: none; width: var(--t); height: var(--t); margin-right: var(--vao); background: var(--papel); border-radius: 22px; display: grid; place-items: center; }
.trilho img { width: 80%; height: 80%; object-fit: contain; }
.faixa-janela:hover .trilho, .faixa.parada .trilho { animation-play-state: paused; }
@keyframes faixa-anda { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 820px) { .faixa { --t: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .trilho { animation: none; will-change: auto; }
  .trilho .dup, .faixa-pausa { display: none; }
  .faixa-janela { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-bottom: var(--s2); }
}

/* acessórios: grade com todos os modelados */
.h2-acess { font-size: clamp(1.9rem, 3vw, 2.6rem); }
#h-impressos { margin-top: var(--s5); }
.grade-acess h4 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.04; margin: 0; color: var(--verde-escuro); }
.grupo-reais { margin-top: var(--s6); scroll-margin-top: var(--s5); }
.grupo-reais h3 { font-size: 1.5rem; display: flex; align-items: baseline; gap: var(--s2); }
.grupo-reais .conta { font-family: var(--sans); font-size: .9375rem; color: var(--suave); }
.grupo-reais .nota { max-width: 40rem; }
.grade-casinhas .acess img { aspect-ratio: 4 / 5; }
.todos-acess { border-top: 1px solid var(--linha); margin-top: var(--s7); padding-block: var(--s7) var(--s8); scroll-margin-top: var(--s5); }
.grupo-acess { margin-top: var(--s6); }
.grupo-acess h3 { font-size: 1.5rem; display: flex; align-items: baseline; gap: var(--s2); }
.grupo-acess .conta { font-family: var(--sans); font-size: .9375rem; color: var(--suave); }
.grade-pecas { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: var(--s3); }
.peca { margin: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: var(--s3) var(--s2) var(--s3); text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; }
.peca img { width: 78%; aspect-ratio: 1; object-fit: contain; }
.peca figcaption { font-size: .9rem; line-height: 1.3; margin-top: var(--s2); color: var(--tinta); }
@media (max-width: 520px) { .grade-pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); } .peca figcaption { font-size: .8125rem; } }

/* rodapé */
.rodape { position: relative; overflow: hidden; background: var(--creme); border-top: 1px solid var(--linha); padding-block: var(--s7) var(--s6); margin-top: var(--s5); }
.rodape .contem { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s6); align-items: center; }
.rodape .marca img { width: 128px; }
.rodape .lema { color: var(--suave); font-size: .95rem; max-width: 20rem; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }
.rodape ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); text-decoration: none; font-size: .95rem; }
.rodape ul a:hover { text-decoration: underline; }
.rodape .aviso { grid-column: 1 / -1; font-size: .875rem; color: var(--suave); border-top: 1px solid var(--linha); padding-top: var(--s4); }
.bolha { position: absolute; border-radius: 52% 48% 46% 54% / 60% 58% 42% 40%; pointer-events: none; }
.bolha.v { width: 90px; height: 120px; background: var(--verde); left: -40px; bottom: -30px; }
.bolha.t { width: 70px; height: 76px; background: var(--terracota); left: 30px; bottom: -40px; border: 4px solid var(--creme); }
.bolha.t2 { width: 80px; height: 90px; background: var(--terracota); right: -26px; top: -30px; }
@media (max-width: 820px) {
  .rodape .contem { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .bolha.v, .bolha.t { display: none; }
}

/* ---------- páginas internas ---------- */
.pagina-topo { padding-block: var(--s6) var(--s5); }
.pagina-topo h1 { font-size: clamp(2.5rem, 5.2vw, 4.4rem); max-width: 18ch; }
.pagina-topo p { color: var(--suave); font-size: 1.1875rem; max-width: 38rem; margin-top: var(--s4); }

/* coleção detalhada */
.ficha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: var(--s7); border-top: 1px solid var(--linha); scroll-margin-top: var(--s5); }
.ficha:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ficha:nth-of-type(even) .ficha-foto { order: 2; }
.ficha-foto { max-width: 440px; width: 100%; justify-self: center; }
.ficha-foto { background: var(--cartao); border-radius: var(--raio); overflow: hidden; }
.ficha-foto img { width: 100%; aspect-ratio: 800 / 993; object-fit: cover; }
.ficha h2 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.ficha .jeito { font-family: var(--mao); font-size: 1.75rem; color: var(--terracota); margin-top: var(--s2); }
.ficha .desc { margin-top: var(--s4); max-width: 30rem; font-size: 1.125rem; }
.dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s2) var(--s5); margin: var(--s5) 0; font-size: .975rem; }
.dados dt { color: var(--suave); }
.dados dd { margin: 0; font-weight: 600; }
.dados .pol { font-weight: 400; color: var(--suave); font-size: .9em; }
@media (max-width: 820px) {
  .ficha { grid-template-columns: minmax(0, 1fr); padding-block: var(--s6); }
  .ficha:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .ficha:nth-of-type(even) .ficha-foto { order: 0; }
  .ficha-foto { justify-self: start; }
  .ficha-foto { max-width: 420px; }
}
.fatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); list-style: none; padding: 0; margin: var(--s6) 0 0; }
.fatos li { background: var(--papel); border-radius: var(--raio); padding: var(--s5); border: 1px solid var(--linha); }
.fatos h3 { font-size: 1.375rem; }
.fatos p { color: var(--suave); margin-top: var(--s2); font-size: 1rem; }
@media (max-width: 820px) { .fatos { grid-template-columns: minmax(0, 1fr); } }

/* acessórios página */
.grade-acess { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s5); list-style: none; padding: 0; margin: var(--s5) 0 0; }
.grade-acess .acess { background: var(--papel); border: 1px solid var(--linha); }
.grade-acess .corpo { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.grade-acess p { color: var(--suave); }

/* nota */
.nota { font-size: .9375rem; color: var(--suave); background: var(--creme-fundo); border-radius: var(--raio-pequeno); padding: var(--s3) var(--s4); margin-top: var(--s4); }
body[data-pagina="inicio"] .rodape { margin-top: 0; }
.grade-acess .preco { font-size: 1.35rem; }
.grade-acess .compra { margin-top: auto; padding-top: var(--s2); }
.grade-pacotes .pacote-arte { aspect-ratio: 4 / 3; }

/* preço em Figtree com algarismos alinhados: na Young Serif o zero é de estilo antigo e "$9.90" parece "$9.9o" (06/10/2026) */
.preco, .preco-kit strong, .preco-linha strong { font-family: var(--sans); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.produto .compra, .grade-acess .compra { align-items: stretch; width: 100%; }
.produto .botao.comprar, .grade-acess .botao.comprar, .produto > .corpo > .botao { width: 100%; justify-content: center; white-space: nowrap; padding-inline: var(--s3); font-size: 1rem; }
/* botão estreito (2 colunas no celular): nome numa linha, preço na outra, sem palavra partida */
.bt-nome, .bt-preco { white-space: nowrap; }
@media (max-width: 600px) {
  .cores-grade .botao.comprar { width: 100%; flex-direction: column; justify-content: center; gap: 0 !important; padding: var(--s2) var(--s3); line-height: 1.25; font-size: 1rem; }
}
.botao.comprar { gap: .3em; }

/* =====================================================================
   CARRINHO + ESCOLHEDOR DE PACOTE (06/10/2026, ordem do fundador)
   ===================================================================== */
/* sacola no cabeçalho */
.sacola { position: relative; display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--verde); cursor: pointer; flex: none; }
.sacola:hover { background: rgba(43,59,42,.07); }
.sacola svg { width: 26px; height: 26px; }
.sacola-n { position: absolute; top: 2px; right: 0; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--terracota); color: var(--papel); font: 700 .8125rem/22px var(--sans); text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.sacola-n.zero { background: var(--papel); color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); }
@media (max-width: 820px) { .sacola { margin-left: auto; } .abre-menu { margin-left: 0; } }

/* caixinha: "só a caixinha" sempre colado no preço (fundador, 06/10/2026) */
.so-caixa, .produto p.so-caixa, .grade-acess p.so-caixa { display: inline-flex; align-self: flex-start; width: fit-content; align-items: center; min-height: 30px; padding: 5px 10px; border-radius: var(--raio-pequeno); background: var(--terracota); color: var(--papel); font: 700 .9375rem/1.25 var(--sans); letter-spacing: .005em; }
.casinha .so-caixa { margin-top: var(--s2); font-size: 1rem; }
.cores-grade .so-caixa { margin-top: var(--s2); }

/* gaveta do carrinho */
html.gaveta-aberta { overflow: hidden; }
.gaveta { margin: 0 0 0 auto; inset: 0 0 0 auto; width: min(100%, 27rem); max-width: 100%; height: 100%; max-height: 100%; padding: 0; border: 0; background: var(--papel); color: var(--tinta); box-shadow: -24px 0 48px -24px rgba(31,43,31,.45); }
.gaveta::backdrop { background: rgba(30,39,29,.45); }
.gaveta-caixa { display: flex; flex-direction: column; height: 100%; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--linha); }
.gaveta-topo h2 { font-size: 1.75rem; }
.gaveta-topo h2:focus { outline: none; }
.fecha-gaveta { width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; color: var(--verde); cursor: pointer; display: inline-grid; place-items: center; }
.fecha-gaveta:hover { background: rgba(43,59,42,.07); }
.fecha-gaveta svg { width: 24px; height: 24px; }
.carrinho-vazio { padding: var(--s6) var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.carrinho-vazio p { font-family: var(--serif); font-size: 1.4rem; color: var(--verde-escuro); margin-bottom: var(--s2); }
.gaveta-rolo { flex: 1; min-height: 0; overflow-y: auto; }
.carrinho-lista { list-style: none; margin: 0; padding: 0 var(--s5); }
.linha { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--linha); align-items: start; }
.linha-foto { width: 72px; height: 72px; object-fit: cover; border-radius: var(--raio-pequeno); background: var(--creme-fundo); }
.linha-nome { font-weight: 700; line-height: 1.3; }
.linha-detalhe { color: var(--suave); font-size: .9375rem; line-height: 1.4; margin-top: 2px; }
.linha-unit { color: var(--suave); font-size: .875rem; margin-top: 2px; font-variant-numeric: lining-nums tabular-nums; }
.linha-total { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.linha-acoes { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); flex-wrap: wrap; }
.tirar { min-height: 44px; padding: 0 var(--s2); border: 0; background: transparent; color: var(--verde); font: 600 .9375rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: var(--raio-pequeno); }
.carrinho-total { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--linha); background: var(--creme); }
.somas { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 1.125rem; }
.somas dt { font-weight: 600; }
.somas dd { margin: 0; font-weight: 700; font-size: 1.5rem; font-variant-numeric: lining-nums tabular-nums; }
.frete { color: var(--suave); font-size: .9375rem; margin-top: var(--s1); }
.carrinho-total .checkout { width: 100%; justify-content: center; margin-top: var(--s4); padding-inline: var(--s5); }
.carrinho-total .checkout-aviso { margin-top: var(--s3); max-width: none; }
.carrinho-total .seguro { margin-top: var(--s2); text-align: center; color: var(--suave); font-size: .875rem; }

/* seletor de quantidade (carrinho e escolhedor) */
.qtd { display: inline-flex; align-items: center; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel); }
.qtd button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--verde-escuro); font: 600 1.375rem/1 var(--sans); cursor: pointer; display: inline-grid; place-items: center; }
.qtd button:hover { background: rgba(43,59,42,.08); }
.qtd button[aria-disabled="true"] { color: #A79F92; cursor: not-allowed; background: transparent; }
.qtd-n { min-width: 1.6em; text-align: center; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* aviso "Added to cart" */
.aviso-sacola { position: fixed; z-index: 60; top: 84px; right: var(--gutter); width: min(calc(100% - 2 * var(--gutter)), 24rem); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s4) var(--s5); background: var(--verde); color: var(--papel); border-radius: var(--raio); box-shadow: 0 18px 40px -18px rgba(31,43,31,.6); }
.aviso-sacola[hidden] { display: none; }
.aviso-sacola-txt { font-weight: 600; line-height: 1.4; }
.aviso-sacola .botao { background: var(--papel); color: var(--verde-escuro); border-color: var(--papel); }
.aviso-sacola .botao:focus-visible { outline-color: var(--papel); }

/* ---------- escolhedor: build-a-pack.html ---------- */
.passo-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: var(--s2); border-radius: 50%; background: var(--verde); color: var(--papel); font: 700 .75em/1 var(--sans); vertical-align: .15em; }
.tipos { border: 0; margin: 0; padding: 0; min-width: 0; }
.tipos legend { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--verde-escuro); padding: 0; }
.tipos-grade { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); max-width: 44rem; }
.tipo { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--s4); background: var(--cartao); border-radius: var(--raio); cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s ease; }
.tipo:hover { box-shadow: inset 0 0 0 2px var(--linha); }
.tipo:has(input:checked) { background: var(--papel); box-shadow: inset 0 0 0 3px var(--verde); }
.tipo:has(input:focus-visible) { outline: 3px solid var(--terracota); outline-offset: 3px; }
.tipo-nome { font-family: var(--serif); font-size: 1.5rem; color: var(--verde-escuro); line-height: 1.1; }
.tipo-preco { font-weight: 700; font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; }
.tipo-regra { color: var(--suave); font-size: .9375rem; }
.m-escolha { margin-top: var(--s7); padding-bottom: var(--s6); }
.m-escolha h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.filtro { min-height: 44px; padding: 0 var(--s4); border: 1.5px solid var(--verde); border-radius: 999px; background: transparent; color: var(--verde); font: 600 1rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.filtro .conta { font-weight: 400; margin-left: 2px; }
.filtro:hover { background: rgba(43,59,42,.07); }
.filtro[aria-pressed="true"] { background: var(--verde); color: var(--papel); }
.m-grupo { margin-top: var(--s6); }
.m-grupo h3 { font-size: 1.5rem; display: flex; align-items: baseline; gap: var(--s2); }
.m-grupo .conta { font-family: var(--sans); font-size: .9375rem; color: var(--suave); }
.m-grade { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.m-peca { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3) var(--s2); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); text-align: center; }
.m-peca.tem { box-shadow: inset 0 0 0 3px var(--verde); border-color: var(--verde); }
.m-peca img { width: 72%; aspect-ratio: 1; object-fit: contain; }
.m-nome { font-size: .9375rem; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; }
.m-marca { position: absolute; top: var(--s2); left: var(--s2); min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--verde); color: var(--papel); font: 700 .875rem/28px var(--sans); }
.m-barra { position: sticky; bottom: 0; z-index: 5; margin-top: var(--s6); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s5); padding: var(--s4) var(--s5); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; box-shadow: 0 -16px 32px -24px rgba(31,43,31,.55); }
.mb-conta { font-size: 1.125rem; white-space: nowrap; }
.mb-conta strong { font-size: 1.5rem; font-variant-numeric: lining-nums tabular-nums; }
.mb-dica { color: var(--suave); font-size: .9375rem; }
.mb-dica.falta { color: var(--erro); font-weight: 600; }
.mb-escolhidos { list-style: none; margin: 0; padding: 2px; display: flex; gap: var(--s2); overflow-x: auto; min-width: 0; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 2px; min-height: 48px; padding: 2px 8px 2px 4px; border: 1px solid var(--linha); border-radius: 999px; background: var(--creme); color: var(--tinta); cursor: pointer; font: 700 .875rem/1 var(--sans); }
.chip img { width: 40px; height: 40px; object-fit: contain; }
.chip-x { color: var(--suave); font-weight: 400; font-size: 1.1rem; margin-left: 2px; }
.chip:hover { border-color: var(--verde); }
.mb-add { justify-content: center; white-space: nowrap; }
.mb-add[aria-disabled="true"] { background: var(--creme-fundo); color: var(--suave); border-color: var(--linha); cursor: not-allowed; }
@media (max-width: 820px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) var(--s2); }
  .m-barra { grid-template-columns: minmax(0, 1fr); margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter) var(--s4); gap: var(--s2); border-radius: 0; border-inline: 0; }
  .mb-info { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
  .mb-add { width: 100%; }
}
@media (max-width: 520px) {
  .m-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
  .m-peca { padding: var(--s2) 2px; }
  .m-nome { font-size: .8125rem; }
  .m-peca .qtd { width: 100%; justify-content: space-between; }
  .m-peca .qtd-n { min-width: 0; }
  .tipo { padding: var(--s3); }
  .tipo-nome { font-size: 1.25rem; }
  .tipo-regra { font-size: .8125rem; }
}
/* acessórios: cabeçalho da grade dos 71 com o botão "Build a pack" */
.todos-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; }
/* a barra fixa do escolhedor não pode cobrir o card que recebe foco ou é rolado para a vista (WCAG 2.4.11) */
html:has(.m-barra) { scroll-padding-bottom: 260px; scroll-padding-top: var(--s5); }
.carrinho-vazio[hidden], .carrinho-total[hidden], .mb-escolhidos[hidden] { display: none; }

/* =====================================================================
   MONTADOR DO KIT na home (fundador e esposa, 06/10/2026): 1 bichinho · 2 três snacks · 3 extras · resumo preso
   ===================================================================== */
:root { --verde-claro: #E2E9D9; --verde-free: #2F6B34; }
.montador { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s5); align-items: start; margin-top: var(--s6); }
.mt-passos { display: grid; gap: var(--s5); min-width: 0; }
.passo { --pp: var(--s5); margin: 0; padding: var(--pp); min-width: 0; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); }
.passo.escolha { margin: 0; border: 1px solid var(--linha); }
.passo-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.1; color: var(--verde-escuro); }
legend.passo-titulo { float: left; width: 100%; margin-bottom: var(--s4); }
.passo.escolha .escolha-grade { clear: both; }
.passo-titulo .passo-n { margin-right: 0; vertical-align: 0; font-size: 1rem; width: 1.9rem; height: 1.9rem; }
.incluso { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--suave); }
.passo-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.passo-conta { font-size: 1.0625rem; color: var(--tinta); }
.passo-conta strong { font-size: 1.375rem; font-variant-numeric: lining-nums tabular-nums; }
.passo-conta.pronto { color: var(--verde); font-weight: 600; }
.passo-conta.falta { color: var(--erro); font-weight: 600; }
.sub.pequeno { font-size: .9375rem; margin-top: var(--s3); }
.montador .opcao .nome { font-size: 1.3rem; }
.montador .opcao .jeito { font-size: .875rem; line-height: 1.35; }

/* vagas dos escolhidos (passo 2 e resumo): as 3 primeiras com selo "Free"; no passo 2 crescem com os extras */
.vagas { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.vaga { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border: 2px dashed #B9AE9C; border-radius: 14px; background: var(--creme); }
.vaga.cheia { border: 2px solid var(--verde); background: var(--papel); }
.vaga img { width: 42px; height: 42px; object-fit: contain; }
.vaga-bt { position: relative; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.vaga-x { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: var(--papel); font: 700 .9375rem/22px var(--sans); text-align: center; }
.vagas { padding-bottom: 8px; }
.vaga.paga.cheia { border-color: var(--suave); }
.selo-free { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 6px; border-radius: 999px; background: var(--verde-free); color: #fff; font: 700 .75rem/18px var(--sans); white-space: nowrap; pointer-events: none; }
.vaga:not(.cheia) .selo-free { background: var(--verde-claro); color: var(--verde-escuro); }
.vaga.gratis + .vaga.paga { margin-left: var(--s3); }
.selo-gratis { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s3); border-radius: 999px; background: var(--verde-free); color: #fff; font: 700 .9375rem/1 var(--sans); }
.kit-quebra { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--verde-claro); border-radius: var(--raio-pequeno); }
.kit-quebra[hidden] { display: none; }
.kq-linha { font-weight: 700; color: var(--verde-escuro); font-variant-numeric: lining-nums tabular-nums; line-height: 1.4; }
.kq-dica { margin-top: 2px; font-size: .9375rem; color: var(--verde-escuro); font-variant-numeric: lining-nums tabular-nums; line-height: 1.4; }
.kq-dica[hidden] { display: none; }

/* escolhedor compacto dentro do montador */
.escolhe .filtros { margin-top: var(--s4); }
.escolhe .m-grupo { margin-top: var(--s3); }
.escolhe .m-grade { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--s2); }
.escolhe .m-peca { padding: var(--s2) var(--s1); gap: var(--s1); }
.escolhe .m-peca img { width: 64%; }
.escolhe .m-nome { font-size: .875rem; }
.escolhe .m-peca .qtd { width: 100%; justify-content: space-between; }
.escolhe .m-peca .qtd-n { min-width: 0; }
.escolhe .m-peca .qtd button { flex: none; }

/* passo 3: extras liga/desliga */
.extras-grade { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.extra { width: 100%; height: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: var(--s2) var(--s3); padding: var(--s3); text-align: left; background: var(--creme); border: 2px solid var(--linha); border-radius: var(--raio); color: var(--tinta); font: inherit; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.extra:hover { border-color: var(--verde); }
.extra-foto { grid-row: 1 / 3; width: 84px; height: 105px; border-radius: var(--raio-pequeno); overflow: hidden; background: var(--creme-fundo); }
.extra-foto img { width: 100%; height: 100%; object-fit: cover; }
.extra-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.extra-nome { font-weight: 700; line-height: 1.25; }
.extra-preco { font-weight: 700; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.extra-nota { color: var(--suave); font-size: .875rem; line-height: 1.35; }
.extra .so-caixa { min-height: 0; padding: 3px 8px; font-size: .8125rem; }
.extra-pilula { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--verde); color: var(--papel); font-weight: 700; font-size: 1.0625rem; }
.p-ok { display: none; }
.extra[aria-pressed="true"] { border-color: var(--verde); background: var(--papel); box-shadow: inset 0 0 0 1px var(--verde); }
.extra[aria-pressed="true"] .extra-pilula { background: var(--verde-claro); color: var(--verde-escuro); box-shadow: inset 0 0 0 2px var(--verde); }
.extra[aria-pressed="true"] .p-add { display: none; }
.extra[aria-pressed="true"] .p-ok { display: inline; }

/* resumo: coluna presa no computador, barra presa embaixo no celular */
.resumo { position: sticky; top: var(--s4); display: grid; gap: var(--s3); padding: var(--s5); background: var(--papel); border: 2px solid var(--verde); border-radius: var(--raio); }
.resumo h3 { font-size: 1.6rem; }
.rs-kit { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.rs-pet { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border-radius: var(--raio-pequeno); background: var(--creme-fundo); }
.rs-pet img { width: 60%; height: auto; opacity: .35; }
.rs-pet img.foto { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.rs-nome { font-weight: 700; }
.rs-pet-nome { color: var(--suave); font-size: .9375rem; }
.rs-preco, .rs-x-preco { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.resumo .vagas { margin: 0; }
.resumo .vaga { width: 48px; height: 48px; border-radius: 12px; }
.resumo .vaga img { width: 38px; height: 38px; }
.rs-extras { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; gap: var(--s1); border-top: 1px solid var(--linha); font-size: .9375rem; }
.rs-extras[hidden] { display: none; }
.rs-extras li { display: flex; justify-content: space-between; gap: var(--s3); }
.rs-x-quebra { display: block; color: var(--suave); font-size: .8125rem; }
.resumo .vaga { margin-bottom: 4px; }
.resumo .selo-free { font-size: .6875rem; line-height: 16px; bottom: -8px; }
.rs-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--linha); }
.rs-total dt { font-weight: 700; font-size: 1.125rem; }
.rs-total dd { margin: 0; font: 700 2rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--verde-escuro); }
.rs-dica { color: var(--suave); font-size: .9375rem; line-height: 1.4; }
.rs-dica.falta { color: var(--erro); font-weight: 600; }
.resumo.pronto .rs-dica { color: var(--verde); font-weight: 600; }
.rs-add { width: 100%; justify-content: center; min-height: 56px; padding-inline: var(--s4); font-size: 1.125rem; white-space: nowrap; }
.rs-add[aria-disabled="true"] { background: var(--creme-fundo); color: var(--suave); border-color: var(--linha); cursor: not-allowed; }
.rs-nota { color: var(--suave); font-size: .875rem; }
@media (max-width: 1100px) { .extras-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .montador { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .extras-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo .escolha-grade, .escolhe .filtros { margin-inline: calc(var(--pp) * -1); padding-inline: var(--pp); scroll-padding-inline: var(--pp); }
  .resumo { position: sticky; top: auto; bottom: 0; z-index: 6; margin-inline: calc(var(--gutter) * -1); padding: var(--s3) var(--gutter); border-width: 2px 0 0; border-radius: var(--raio) var(--raio) 0 0; box-shadow: 0 -16px 32px -24px rgba(31,43,31,.55);
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pet vagas total" "extras extras extras" "dica dica dica" "add add add"; gap: var(--s2) var(--s3); align-items: center; }
  .resumo h3, .rs-kit-txt, .rs-preco, .rs-nota { display: none; }
  .rs-kit { display: contents; }
  .rs-pet { grid-area: pet; width: 48px; height: 48px; }
  .resumo .vagas { grid-area: vagas; flex-wrap: nowrap; gap: 6px; }
  .resumo .vaga { width: 44px; height: 44px; border-radius: 10px; }
  .resumo .vaga img { width: 34px; height: 34px; }
  .rs-total { grid-area: total; flex-direction: column; align-items: flex-end; padding: 0; border: 0; }
  .rs-total dt { font-size: .8125rem; color: var(--suave); }
  .rs-total dd { font-size: 1.5rem; }
  /* no celular os extras cabem numa linha (o total já soma tudo) */
  .rs-extras { grid-area: extras; display: block; padding: 0; border: 0; font-size: .875rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rs-extras li { display: inline; }
  .rs-extras li + li::before { content: " · "; }
  .rs-extras li:first-child::before { content: "+ "; font-weight: 700; color: var(--verde); }
  .rs-x-preco, .rs-x-quebra { display: none; }
  .rs-dica { grid-area: dica; font-size: .875rem; }
  .rs-add { grid-area: add; min-height: 52px; }
}
@media (max-width: 900px) { html:has(.montador) { scroll-padding-bottom: 230px; } }
@media (max-width: 600px) {
  .passo { --pp: var(--s4); }
  .extras-grade { grid-template-columns: minmax(0, 1fr); }
  .extra { grid-template-columns: 76px minmax(0, 1fr); }
  .extra-foto { width: 76px; height: 95px; }
  /* escolha rápida no celular: duas fileiras que rolam de lado */
  .escolhe .m-grade { grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: 112px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(var(--pp) * -1); padding: 2px var(--pp) var(--s2); scroll-padding-inline: var(--pp); }
  .escolhe .m-peca { scroll-snap-align: start; }
}

/* carrinho: miniaturas dos desenhos e "Complete your kit" */
.linha-minis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--s1); }
.linha-minis img { width: 32px; height: 32px; object-fit: contain; padding: 2px; border-radius: 6px; background: var(--creme); }
.linha-minis .mini { position: relative; display: inline-grid; }
.linha-minis.gratis { gap: 6px; padding-bottom: 9px; }
.linha-minis.gratis img { box-shadow: inset 0 0 0 1.5px var(--verde-free); }
.linha-minis .selo-free { font-size: .625rem; line-height: 14px; bottom: -8px; padding: 0 4px; }
.linha-lista { color: var(--suave); font-size: .8125rem; line-height: 1.35; margin-top: 2px; }
.linha-extra { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--creme); border-radius: var(--raio-pequeno); }
.lx-cabeca { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 700; font-size: .9375rem; font-variant-numeric: lining-nums tabular-nums; }
.lx-nome { white-space: nowrap; }
.lx-quebra { font-size: .875rem; color: var(--verde-escuro); font-variant-numeric: lining-nums tabular-nums; }
.completa { margin: var(--s4) var(--s5) var(--s5); padding: var(--s4); background: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio); }
.completa[hidden], .oferta[hidden] { display: none; }
.completa h3 { font-size: 1.4rem; }
.completa-lista { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.oferta { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2); background: var(--papel); border-radius: var(--raio-pequeno); }
.oferta img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--creme-fundo); }
.oferta img[src*="/acc/"] { object-fit: contain; padding: 4px; }
.oferta-nome { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.oferta-nota { color: var(--suave); font-size: .8125rem; line-height: 1.3; }
.oferta-bt { min-height: 48px; min-width: 76px; justify-content: center; padding: 0 var(--s4); font-size: 1rem; }
.nw { white-space: nowrap; }

/* Adoption Card em destaque (v18) */
.adocao { background: var(--creme); }
.adocao .contem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.adocao-foto { margin: 0; position: relative; }
.adocao-foto img { width: 100%; height: auto; display: block; border-radius: var(--raio); box-shadow: 0 1px 2px rgba(31,43,31,.12), 0 24px 48px -22px rgba(31,43,31,.45); }
.adocao-foto .mao { position: absolute; right: 4%; bottom: -1.1rem; color: var(--terracota); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.adocao .sobre { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracota); margin-bottom: var(--s3); }
.adocao h2 { font-size: clamp(2.1rem, 3.9vw, 3.3rem); max-width: 12ch; }
.adocao .intro { color: var(--suave); margin-block: var(--s4) var(--s5); max-width: 30rem; }
.adocao-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); counter-reset: p; }
.adocao-passos li { counter-increment: p; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s3); align-items: start; }
.adocao-passos li::before { content: counter(p); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--verde); color: #fffdf8; font-weight: 700; }
.adocao-passos h3 { font-size: 1.1rem; margin: .3rem 0 .15rem; }
.adocao-passos p { margin: 0; color: var(--suave); }
@media (max-width: 900px) { .adocao .contem { grid-template-columns: minmax(0, 1fr); } .adocao-foto { margin-bottom: var(--s4); } }
.inclui .contem { grid-template-columns: minmax(0, 1fr); }
.inclui h2 { max-width: none; }
@media (min-width: 901px) { .inclui-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); } .inclui-lista li, .inclui-lista li:last-child { border-bottom: 1px solid var(--linha); } }