/* =====================================================================
   Estilo "infantil" — camada por cima do style.css (carregada depois dele,
   só quando tema.estilo = "infantil"). Tudo aqui fica sob
   [data-estilo="infantil"], então o estilo clássico não é tocado.

   Clima: fundo creme, quatro cores de apoio em blocos e selos, cantos bem
   redondos, botão em pílula, títulos em Fredoka e texto em Nunito.
   Contraste: o texto é sempre o escuro (#2E3A4B) sobre as cores de apoio
   (5,7 a 8,0). Sobre a cor da marca, o build escolhe branco ou escuro
   (--cor-sobre-marca; coral #FF7A6B → escuro, 4,5) e escurece a marca
   quando ela vira texto (--cor-marca-texto, ≥ 4,5 sobre o creme).
   ===================================================================== */

@font-face {
  font-family: 'Fredoka';
  src: url('/assets/fredoka.0476b1cb.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/nunito.13343b13.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */
[data-estilo="infantil"] {
  --fundo: #FFFBF5; --texto: #2E3A4B; --texto-2: #5B6678;
  --marca: var(--cor-marca, #FF7A6B);        /* coral: botões e destaques */
  --apoio-1: #FFD166;                        /* amarelo */
  --apoio-2: #7DD3B8;                        /* menta */
  --apoio-3: #7EC8F0;                        /* azul-céu */
  --apoio-4: #C9A7F5;                        /* lilás */
  --menta-clara: #EAF8F3;
  --pix: #17744F;                            /* 5,6 sobre branco */
  --raio-card: 20px; --raio-botao: 999px;
  --fonte-titulo: "Fredoka", "Nunito", system-ui, sans-serif;
  --fonte-texto: "Nunito", system-ui, sans-serif;
  --sombra: 0 2px 10px rgba(46, 58, 75, .08);

  /* os tokens do style.css apontam pros do estilo */
  --bg: var(--fundo);
  --ink: var(--texto);
  --muted: var(--texto-2);
  --line: #F0E4D6;
  --accent: var(--cor-marca-texto, #C8412F);
  --areia: var(--cor-fundo-foto, #FFF4E8);
  --serif: var(--fonte-titulo);
  --sans: var(--fonte-texto);
  --sobre-marca: var(--cor-sobre-marca, #2E3A4B);
  --sobre-marca-fraco: var(--cor-sobre-marca, #2E3A4B);
  --marca-escura: var(--marca);
  --caixa-alta: .02em;
}
[data-estilo="infantil"] body { font-size: 15px; background: var(--fundo); }
[data-estilo="infantil"] h1,
[data-estilo="infantil"] h2,
[data-estilo="infantil"] h3 { font-weight: 600; letter-spacing: 0; }
[data-estilo="infantil"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* etiquetas sem caixa alta: fica mais leve e mais fácil de ler */
[data-estilo="infantil"] .etiqueta,
[data-estilo="infantil"] .rot { text-transform: none; letter-spacing: .01em; font-weight: 700; font-size: 13px; }

/* decoração: SVG do sprite, cor por currentColor */
[data-estilo="infantil"] .deco { display: block; pointer-events: none; }

/* --------------------------------------------------------- faixa + topo */
[data-estilo="infantil"] .faixa {
  background: var(--apoio-1); color: var(--texto);
  text-transform: none; letter-spacing: .01em; font-size: 13px; font-weight: 700; padding: 8px var(--sp-3);
}
[data-estilo="infantil"] .topo { background: var(--fundo); border-bottom: 0; }
[data-estilo="infantil"] .topo[data-rolou] { box-shadow: 0 2px 14px rgba(46, 58, 75, .08); }
[data-estilo="infantil"] .marca { font-family: var(--fonte-titulo); font-weight: 600; font-size: 24px; color: var(--accent); }
[data-estilo="infantil"] .marca span { font-family: var(--fonte-texto); letter-spacing: .08em; font-weight: 700; }
[data-estilo="infantil"] .menu a {
  font: 700 15px/1 var(--fonte-texto); text-transform: none; letter-spacing: 0;
}
[data-estilo="infantil"] .carrinho-qtd { color: var(--sobre-marca); font-weight: 700; }

/* ------------------------------------------------------------------ hero */
[data-estilo="infantil"] .hero { margin: 12px 12px 0; border-radius: 28px; background: var(--areia); }
[data-estilo="infantil"] .hero-slide { height: 62vh; height: 62svh; max-height: 560px; }
[data-estilo="infantil"] .hero-txt { background: linear-gradient(to top, rgba(46, 58, 75, .6), rgba(46, 58, 75, 0)); }
[data-estilo="infantil"] .hero-tit { font: 600 32px/1.05 var(--fonte-titulo); }
[data-estilo="infantil"] .hero-sub { font-size: 16px; font-weight: 600; }
[data-estilo="infantil"] .hero-cta {
  background: var(--marca); color: var(--sobre-marca); border-radius: var(--raio-botao);
  text-transform: none; letter-spacing: 0; font: 700 16px/1 var(--fonte-texto); padding: 14px 26px;
}
[data-estilo="infantil"] .hero-slide:hover .hero-cta { background: var(--apoio-1); color: var(--texto); }
[data-estilo="infantil"] .hero-seta { border-radius: 999px; width: 44px; height: 44px; margin: 0 8px; }
[data-estilo="infantil"] .hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
[data-estilo="infantil"] .hero-deco .deco { position: absolute; }
[data-estilo="infantil"] .deco-e1 { width: 34px; height: 34px; top: 16px; left: 16px; color: var(--apoio-1); }
[data-estilo="infantil"] .deco-e2 { width: 20px; height: 20px; top: 56px; left: 52px; color: #fff; }
[data-estilo="infantil"] .deco-nuvem { width: 84px; height: 52px; top: 14px; right: 14px; color: #fff; opacity: .9; }
[data-estilo="infantil"] .deco-bolinhas { width: 44px; height: 44px; bottom: 18px; right: 20px; color: var(--apoio-2); }

/* ------------------------------------------------- títulos de seção */
[data-estilo="infantil"] .secao-tit {
  font: 600 26px/1.15 var(--fonte-titulo); color: var(--texto);
  margin: var(--sp-5) 0 var(--sp-3); scroll-margin-top: 72px;
}
[data-estilo="infantil"] .secao-tit::before,
[data-estilo="infantil"] .secao-tit::after { content: none; }
[data-estilo="infantil"] .titulo-deco { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 var(--sp-3); }
[data-estilo="infantil"] .deco-tit { width: 20px; height: 20px; color: var(--apoio-1); flex: none; }
[data-estilo="infantil"] .deco-tit-2 { color: var(--apoio-3); width: 14px; height: 14px; }

/* ------------------------------------------------- categorias em círculo */
[data-estilo="infantil"] .cats {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: 20px 16px 8px; scroll-padding-inline: 16px;
}
[data-estilo="infantil"] .cats::-webkit-scrollbar { display: none; }
[data-estilo="infantil"] .cat {
  flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--texto); width: 88px;
}
[data-estilo="infantil"] .cat-bola {
  /* altura fixa, não aspect-ratio: com a foto 3:4 dentro, o aspect-ratio deixava a bola oval */
  width: 88px; height: 88px; border-radius: 50%; background: var(--cor); padding: 6px; display: block; overflow: hidden;
  transition: transform .15s ease;
}
[data-estilo="infantil"] .cat-bola picture { display: block; width: 100%; height: 100%; }
[data-estilo="infantil"] .cat-bola img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 50%; border: 3px solid #fff;
}
[data-estilo="infantil"] .cat:hover .cat-bola { transform: translateY(-2px); }
[data-estilo="infantil"] .cat-nome { font: 600 15px/1.1 var(--fonte-titulo); text-align: center; }

/* ------------------------------------------------------------ vantagens */
[data-estilo="infantil"] .vantagens {
  list-style: none; margin: 12px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
[data-estilo="infantil"] .vantagens li {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 12px;
  font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--texto); box-shadow: var(--sombra);
}
[data-estilo="infantil"] .vant-ico {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cor);
  display: flex; align-items: center; justify-content: center; color: var(--texto);
}
[data-estilo="infantil"] .vant-ico svg { width: 20px; height: 20px; }

/* ------------------------------------------------------ compre por idade */
[data-estilo="infantil"] .idades { margin-top: var(--sp-2); }
[data-estilo="infantil"] .idades-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
[data-estilo="infantil"] .chip-idade {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 84px; padding: 12px; border-radius: var(--raio-card); background: var(--cor);
  color: var(--texto); text-decoration: none; text-align: center;
  box-shadow: inset 0 -4px rgba(46, 58, 75, .08); transition: transform .15s ease;
}
[data-estilo="infantil"] .chip-idade b { font: 600 24px/1 var(--fonte-titulo); }
[data-estilo="infantil"] .chip-idade small { font-size: 13px; font-weight: 700; }
[data-estilo="infantil"] .chip-idade:hover { transform: translateY(-2px); }
[data-estilo="infantil"] .chip-idade[aria-current='true'] { outline: 3px solid var(--texto); outline-offset: 2px; }

/* ----------------------------------------------- ondas + bloco da vitrine */
[data-estilo="infantil"] .onda { display: block; width: 100%; height: 32px; color: var(--menta-clara); }
[data-estilo="infantil"] .onda-entra { margin-top: var(--sp-5); }
[data-estilo="infantil"] .onda-sai { transform: rotate(180deg); }
[data-estilo="infantil"] .bloco-vitrine { background: var(--menta-clara); padding: 1px 0 var(--sp-3); }
[data-estilo="infantil"] .bloco-vitrine .secao-tit { margin-top: var(--sp-4); }
[data-estilo="infantil"] .trilho-cards { padding-top: 4px; padding-bottom: var(--sp-3); }
[data-estilo="infantil"] .trilho-cards .card { width: 46vw; max-width: 240px; }

/* --------------------------------------------------- filtros da grade */
[data-estilo="infantil"] .barra-filtros { border: 0; }
[data-estilo="infantil"] .barra-filtros-in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
}
[data-estilo="infantil"] .chips { gap: 6px; padding: 2px 0; }
[data-estilo="infantil"] .chip {
  padding: 9px 14px; border-radius: var(--raio-botao); background: #fff; border: 2px solid var(--line);
  text-transform: none; letter-spacing: 0; font: 700 14px/1 var(--fonte-texto); color: var(--texto);
  box-shadow: none; align-items: center;
}
[data-estilo="infantil"] .chip .n { font-size: 12px; color: var(--texto-2); }
[data-estilo="infantil"] .chip[aria-current='true'] { background: var(--texto); border-color: var(--texto); color: #fff; box-shadow: none; }
[data-estilo="infantil"] .chip[aria-current='true'] .n { color: #fff; }
[data-estilo="infantil"] .ordem { border: 0; padding: 0; }
[data-estilo="infantil"] .ordem select {
  text-transform: none; letter-spacing: 0; font: 700 14px/1 var(--fonte-texto); color: var(--texto);
  background: #fff; border: 2px solid var(--line); border-radius: var(--raio-botao); padding: 9px 12px;
}
[data-estilo="infantil"] .tams {
  grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0;
}
[data-estilo="infantil"] .tams::-webkit-scrollbar { display: none; }
[data-estilo="infantil"] .tams-rot { flex: none; font-size: 13px; font-weight: 700; color: var(--texto-2); margin-right: 2px; }
[data-estilo="infantil"] .chip-tam {
  flex: none; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--raio-botao);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--line); color: var(--texto); text-decoration: none;
  font: 600 15px/1 var(--fonte-titulo);
}
[data-estilo="infantil"] .chip-tam-todos { font: 700 14px/1 var(--fonte-texto); }
[data-estilo="infantil"] .chip-tam[aria-current='true'] { background: var(--apoio-3); border-color: var(--apoio-3); }

/* ----------------------------------------------------------- grade + card */
[data-estilo="infantil"] .grade { gap: 12px 10px; }
[data-estilo="infantil"] .grade .card { contain-intrinsic-size: auto 420px; }
[data-estilo="infantil"] .card {
  background: #fff; border-radius: var(--raio-card); padding: 6px 6px 10px; box-shadow: var(--sombra);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  [data-estilo="infantil"] .card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(46, 58, 75, .12); }
}
[data-estilo="infantil"] .card-foto { border-radius: 16px; }
[data-estilo="infantil"] .card-selo {
  top: 8px; left: 8px; padding: 4px 10px; border-radius: var(--raio-botao);
  background: var(--apoio-1); color: var(--texto); text-shadow: none;
  font: 700 12px/1.2 var(--fonte-texto); letter-spacing: .02em; text-transform: none;
}
[data-estilo="infantil"] .card-selo[data-selo='esgotado'] { background: #fff; color: var(--texto-2); }
[data-estilo="infantil"] .card-info { flex: 1; gap: 3px; padding: 8px 4px 0; }
[data-estilo="infantil"] .card-tit { margin: 0; font: inherit; }
[data-estilo="infantil"] .card-nome { font: 700 14px/1.3 var(--fonte-texto); color: var(--texto); }
[data-estilo="infantil"] .card-preco { font: 600 20px/1.1 var(--fonte-titulo); color: var(--texto); margin-top: 2px; }
[data-estilo="infantil"] .card-parcela { font-size: 12px; color: var(--texto-2); }
[data-estilo="infantil"] .card-pix { font-size: 13px; font-weight: 700; color: var(--pix); }
[data-estilo="infantil"] .card-tamanhos { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; }
[data-estilo="infantil"] .card-tamanhos li {
  min-width: 26px; padding: 2px 7px; border: 1.5px solid var(--line); border-radius: var(--raio-botao);
  font-size: 12px; font-weight: 700; color: var(--texto-2); text-align: center; line-height: 1.4;
}
[data-estilo="infantil"] .card-escolher,
[data-estilo="infantil"] .btn-pilula {
  align-self: stretch; margin-top: auto; padding: 11px 8px; border: 0; border-radius: var(--raio-botao); white-space: nowrap;
  background: var(--marca); color: var(--sobre-marca); opacity: 1;
  font: 700 13px/1 var(--fonte-texto); letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background .15s ease;
}
/* o botão desce pro pé do card (margin-top: auto acima), com respiro
   depois dos tamanhos — peça sem tamanho com estoque é esgotada e não tem botão */
[data-estilo="infantil"] .card-tamanhos { margin-bottom: 10px; }
[data-estilo="infantil"] .card-escolher:hover { background: var(--apoio-1); color: var(--texto); border: 0; }
[data-estilo="infantil"] .vazio { font-weight: 700; }

/* ------------------------------------------------------- página de produto */
[data-estilo="infantil"] .palco { border-radius: 0 0 24px 24px; }
[data-estilo="infantil"] .mini { border-radius: 12px; overflow: hidden; border-width: 2px; }
[data-estilo="infantil"] .produto h1 { font: 600 28px/1.1 var(--fonte-titulo); }
[data-estilo="infantil"] .produto .etiqueta { color: var(--accent); }
[data-estilo="infantil"] .preco-grande { font: 600 30px/1.1 var(--fonte-titulo); display: flex; flex-direction: column; gap: 4px; }
[data-estilo="infantil"] .preco-grande span { margin: 0; font: 600 14px/1.3 var(--fonte-texto); color: var(--texto-2); text-transform: none; letter-spacing: 0; }
[data-estilo="infantil"] .preco-grande .pix { color: var(--pix); font-weight: 700; }
[data-estilo="infantil"] .tam-btn { font: 600 16px/1 var(--fonte-titulo); letter-spacing: 0; border-width: 2px; background: #fff; }
[data-estilo="infantil"] .tam-btn[aria-pressed='true'] { background: var(--apoio-3); border-color: var(--apoio-3); color: var(--texto); }
[data-estilo="infantil"] .btn-add,
[data-estilo="infantil"] .btn-primario,
[data-estilo="infantil"] .bp-btn {
  border-radius: var(--raio-botao); text-transform: none; letter-spacing: 0; font: 700 16px/1 var(--fonte-texto);
  background: var(--marca); color: var(--sobre-marca);
}
[data-estilo="infantil"] .bp-btn { padding: 16px 20px; }
[data-estilo="infantil"] .btn-add:hover:not(:disabled),
[data-estilo="infantil"] .btn-primario:hover:not(:disabled) { background: var(--apoio-1); color: var(--texto); }
[data-estilo="infantil"] .det summary { text-transform: none; letter-spacing: 0; font: 700 15px/1.2 var(--fonte-texto); }

/* ----------------------------------------------------------------- drawer */
[data-estilo="infantil"] .drawer-painel { border-radius: 24px 24px 0 0; }
[data-estilo="infantil"] .rapido-foto, [data-estilo="infantil"] .item-foto { border-radius: 12px; overflow: hidden; }
[data-estilo="infantil"] .btn-enviar { border-radius: var(--raio-botao); }
[data-estilo="infantil"] .form input { border-radius: 14px; border-width: 2px; }
[data-estilo="infantil"] .form label,
[data-estilo="infantil"] .dica,
[data-estilo="infantil"] .totais span,
[data-estilo="infantil"] .rapido-cat { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ------------------------------------------------------ /como-comprar */
[data-estilo="infantil"] .cartao,
[data-estilo="infantil"] .tabela-tam { border-radius: var(--raio-card); border: 0; background: #fff; box-shadow: var(--sombra); }
[data-estilo="infantil"] .btn-linha {
  border-radius: var(--raio-botao); border-width: 2px; text-transform: none; letter-spacing: 0; font: 700 15px/1 var(--fonte-texto);
}

/* ---------------------------------------------------------------- rodapé */
[data-estilo="infantil"] .rodape { background: var(--menta-clara); color: var(--texto); border-radius: 28px 28px 0 0; }
[data-estilo="infantil"] .rodape a { color: var(--texto); }
[data-estilo="infantil"] .rodape .rot,
[data-estilo="infantil"] .rodape .rot-fina,
[data-estilo="infantil"] .rodape .entrega,
[data-estilo="infantil"] .rodape .creditos { color: var(--texto-2); opacity: 1; }
[data-estilo="infantil"] .rodape .entrega { border-top-color: rgba(46, 58, 75, .12); letter-spacing: 0; }
[data-estilo="infantil"] .rodape .marca-pe { font: 600 26px/1.1 var(--fonte-titulo); color: var(--accent); }

/* ---------------------------------------------------------- telas maiores */
@media (min-width: 640px) {
  [data-estilo="infantil"] .hero { margin: 16px 24px 0; }
  [data-estilo="infantil"] .vantagens { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-estilo="infantil"] .idades-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-estilo="infantil"] .cats { justify-content: center; gap: 24px; }
  [data-estilo="infantil"] .trilho-cards .card { width: calc((100% - 2 * var(--sp-3)) / 3); max-width: none; }
  [data-estilo="infantil"] .grade { gap: 20px 16px; }
  [data-estilo="infantil"] .onda { height: 48px; }
}
@media (min-width: 960px) {
  [data-estilo="infantil"] .hero-slide { height: auto; max-height: none; }
  [data-estilo="infantil"] .hero-tit { font-size: 48px; }
  [data-estilo="infantil"] .cat, [data-estilo="infantil"] .cat-bola { width: 112px; }
  [data-estilo="infantil"] .cat-bola { height: 112px; }
  [data-estilo="infantil"] .cat-nome { font-size: 17px; }
  [data-estilo="infantil"] .deco-e1 { width: 48px; height: 48px; top: 28px; left: 32px; }
  [data-estilo="infantil"] .deco-nuvem { width: 120px; height: 75px; top: 24px; right: 40px; }
  [data-estilo="infantil"] .trilho-cards .card { width: calc((100% - 3 * var(--sp-3)) / 4); }
  [data-estilo="infantil"] .secao-tit { font-size: 32px; }
  [data-estilo="infantil"] .produto .dados .preco-grande { font-size: 34px; }
  [data-estilo="infantil"] .palco { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-estilo="infantil"] .card,
  [data-estilo="infantil"] .cat-bola,
  [data-estilo="infantil"] .chip-idade,
  [data-estilo="infantil"] .card-escolher { transition: none; }
  [data-estilo="infantil"] .card:hover,
  [data-estilo="infantil"] .cat:hover .cat-bola,
  [data-estilo="infantil"] .chip-idade:hover { transform: none; }
}