/* Tema "Editorial" da loja padrão (proposta, 12/10/2026): a loja como uma revista de moda.
   Fundo branco de verdade, texto quase preto, títulos grandes numa serifa de alto contraste (Instrument Serif, com o
   itálico dela como "voz" da marca), texto e preços numa grotesca neutra (Hanken Grotesk, algarismos de mesma largura),
   rótulos pequenos em caixa-alta, fotos grandes, cartões sem caixa nem sombra (a foto é o cartão) e botão de comprar preto.
   A única cor é a da roupa; o atacado tem um tom discreto próprio (azul-acinzentado), para ser achado de relance.
   Todas as regras ficam debaixo de .estilo-editorial (a ferramenta de prévia põe a classe no <html>).
   Letras: OFL (licenças em fontes/). Somadas: 76 KB. */

@font-face { font-family: 'Instrument Serif'; src: url(/fontes/instrument-serif.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fontes/instrument-serif-italico.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
/* O itálico também com nome próprio: é a "letra cursiva" da ficha (--f-cursiva). Declarado como normal e como itálico,
   para o navegador nunca inclinar de novo um <em> que já é itálico. */
@font-face { font-family: 'Instrument Serif Italico'; src: url(/fontes/instrument-serif-italico.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif Italico'; src: url(/fontes/instrument-serif-italico.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(/fontes/hanken-grotesk.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- Base: cores de apoio, linhas e números ---------- */
.estilo-editorial {
  --ed-tinta: #141414;                 /* texto e preços (18,4:1 no branco) */
  --ed-preto: #111111;                 /* o botão de comprar (texto branco 18,9:1) */
  --ed-suave: #5E5E5E;                 /* apoio (6,5:1 no branco; 5,8:1 no cinza da foto) */
  --ed-borda-campo: #8A8A8A;           /* borda de campo de digitar: 3,4:1 (o único sinal do campo) */
  --ed-borda-botao: rgba(17, 17, 17, .3);
  --ed-atac: #E8EEF3;                  /* tom discreto do atacado */
  --ed-atac-texto: #2F4357;            /* 8,7:1 sobre o tom do atacado */
  --linha: rgba(17, 17, 17, .12); --linha-forte: rgba(17, 17, 17, .24);
  --apagado: #6B6B6B;                  /* era #858A84 (3,3:1); agora 5,3:1 */
  --sombra: 0 10px 28px rgba(0, 0, 0, .12);
  --raio: 0px;
  --zap: var(--ed-preto);
  font-synthesis-weight: none;         /* a serifa tem um peso só: nunca "negrito falso" */
}
.estilo-editorial body { font: 400 15px/1.55 var(--sans); letter-spacing: .003em; font-variant-numeric: lining-nums tabular-nums; }
.estilo-editorial :focus-visible { outline: 2px solid var(--ed-preto); outline-offset: 3px; border-radius: 0; }
/* Botões só de ícone (fechar, setas, coração, redes) são redondos, também com o foco (a regra de foco da loja mudava o raio). */
.estilo-editorial .fechar, .estilo-editorial .seta, .estilo-editorial .fav, .estilo-editorial .zoom-x, .estilo-editorial .zoom-seta,
.estilo-editorial .dq-seta, .estilo-editorial .ro-redes a, .estilo-editorial .som-btn, .estilo-editorial .btn-redondo { border-radius: 50%; }
.estilo-editorial .ro-base :focus-visible, .estilo-editorial .faixa-topo :focus-visible { outline-color: #fff; }
.estilo-editorial .cursiva { font-style: normal; }
.estilo-editorial ::selection { background: var(--ed-preto); color: #fff; }

/* ---------- Faixa do alto, topo e faixa do atacado ---------- */
.estilo-editorial .faixa-topo { background: var(--ed-preto); color: #fff; font-size: 11px; letter-spacing: .03em; padding: 9px 16px; }
.estilo-editorial .faixa-topo i { color: #fff; font-size: 15px; }
.estilo-editorial .faixa-topo b { font-weight: 600; letter-spacing: .1em; }
.estilo-editorial .topo { padding: calc(6px + env(safe-area-inset-top)) 8px 6px; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--linha); }
.estilo-editorial .btn-menu { width: 44px; height: 44px; margin-left: 0; color: var(--ed-preto); font-size: 24px; }
.estilo-editorial .marca { min-height: 44px; }
.estilo-editorial .nome-marca b { font: 400 26px/1 var(--serif); letter-spacing: .12em; padding-left: .12em; }
.estilo-editorial .nome-marca small { font: 600 8.5px/1 var(--sans); letter-spacing: .12em; padding-left: .12em; margin-top: 5px; color: var(--ed-suave); }
.estilo-editorial .btn-redondo { width: 44px; height: 44px; border: 0; background: transparent; color: var(--ed-preto); font-size: 23px; }
.estilo-editorial .btn-redondo svg { stroke-width: 1.4; }
.estilo-editorial .conta { top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ed-preto); color: #fff; font: 600 10.5px/18px var(--sans); }
@media (max-width: 959px) {
  .estilo-editorial .marca { margin-inline: auto; }   /* nome da loja no meio, como o título de uma revista */
  .estilo-editorial .topo-acoes { margin-left: 0; }
}
@media (min-width: 960px) {
  .estilo-editorial .topo { padding: 14px max(24px, calc((100vw - 1180px) / 2)); }
  .estilo-editorial .nome-marca b { font-size: 34px; }
  .estilo-editorial .nome-marca small { font-size: 9.5px; margin-top: 6px; }
  .estilo-editorial .menu { gap: 2px; }
  .estilo-editorial .menu button { min-height: 44px; padding: 0 13px; font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ed-tinta); }
  .estilo-editorial .menu button.atual { color: var(--ed-tinta); }
  .estilo-editorial .menu button.atual::after { left: 13px; right: 13px; bottom: 9px; height: 1px; background: var(--ed-tinta); }
  .estilo-editorial .menu button:hover { color: var(--ed-suave); }
}
.estilo-editorial .faixa-atacado { padding: 10px 16px; font-size: 12.5px; line-height: 1.45; color: var(--ed-atac-texto); background: var(--ed-atac); border-bottom: 0; }
.estilo-editorial .faixa-atacado b { font-weight: 600; color: var(--ed-atac-texto); }

/* ---------- Abertura: a capa ---------- */
.estilo-editorial .abertura { background: var(--l-fundo); }
/* Celular: a foto inteira, na proporção dela (a da demo é 4:5), até 4:5 no máximo; o texto vem embaixo e nada cobre a modelo. */
.estilo-editorial .ab-foto img { height: auto; max-height: 125vw; object-position: 50% 20%; background: var(--l-areia); }
.estilo-editorial .ab-texto { padding: 26px 20px 36px; }
.estilo-editorial .ab-sobre { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .abertura h1 { margin: 12px 0 18px; font: 400 clamp(40px, 11.4vw, 58px)/1 var(--serif); letter-spacing: -.012em; text-transform: none; color: var(--ed-tinta); }
.estilo-editorial .abertura h1::first-letter { text-transform: uppercase; }
.estilo-editorial .abertura h1 .cursiva { display: block; margin-top: 2px; font-size: 1em; line-height: 1; color: var(--ed-tinta); }
.estilo-editorial .ab-desc { margin: 0 0 26px; max-width: 36ch; font-size: 16px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--ed-suave); }
@media (min-width: 760px) {
  /* Computador: página de revista. Texto à esquerda no branco, foto da capa à direita, na proporção dela (sem degradê por cima). */
  .estilo-editorial .abertura { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; border-bottom: 1px solid var(--linha); }
  .estilo-editorial .ab-foto img { width: auto; max-width: 58vw; height: clamp(460px, 46vw, 660px); min-height: 0; max-height: none; object-fit: cover; object-position: 50% 20%; }
  .estilo-editorial .ab-foto::after { display: none; }
  .estilo-editorial .ab-texto { padding: 48px 56px 48px max(32px, calc((100vw - 1180px) / 2 + 24px)); }
  .estilo-editorial .abertura h1 { font-size: clamp(54px, 5.7vw, 86px); margin: 16px 0 22px; }
  .estilo-editorial .ab-desc { font-size: 16.5px; max-width: 38ch; margin-bottom: 30px; }
}

/* ---------- Botões: preto chapado para comprar, contorno para o resto ---------- */
.estilo-editorial .btn-escuro, .estilo-editorial .btn-claro, .estilo-editorial .btn-contorno {
  min-height: 52px; padding: 0 26px; gap: 14px; border-radius: 0; font: 600 12px var(--sans); letter-spacing: .12em; }
.estilo-editorial .btn-escuro { background: var(--ed-preto); color: #fff; box-shadow: none; }
.estilo-editorial .ab-botoes .btn-escuro:only-child { min-height: 54px; padding: 0 30px; font-size: 12.5px; }
.estilo-editorial .btn-claro { background: #fff; border-color: var(--ed-preto); color: var(--ed-preto); }
.estilo-editorial .btn-contorno { border-color: #fff; color: #fff; }
.estilo-editorial .btn-ouro { min-height: 54px; padding: 0 28px; border-radius: 0; background: var(--ed-preto); color: #fff; box-shadow: none; font: 600 12.5px var(--sans); letter-spacing: .12em; }
.estilo-editorial .btn-ouro.mini-ouro { min-height: 44px; font-size: 11.5px; }
.estilo-editorial .btn-linha { min-height: 52px; border-radius: 0; border: 1px solid var(--ed-preto); background: #fff; color: var(--ed-preto); font: 500 14px var(--sans); }
.estilo-editorial .btn-zap { min-height: 54px; border-radius: 0; background: var(--ed-preto); color: #fff; font: 600 12.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.estilo-editorial .btn-zap svg { width: 20px; height: 20px; }
.estilo-editorial .btn-comprar { min-height: 44px; margin-top: 10px; gap: 8px; border-radius: 0; background: var(--ed-preto); color: #fff; font: 600 11.5px var(--sans); letter-spacing: .12em; }
.estilo-editorial .btn-comprar svg { font-size: 15px; }
.estilo-editorial .btn-pincel { min-height: 52px; padding: 10px 24px; border-radius: 0; background: var(--ed-preto); color: #fff; box-shadow: none; font: 600 12px/1.2 var(--sans); letter-spacing: .12em; }
.estilo-editorial .btn-instalar { border: 1px solid var(--ed-preto); border-radius: 0; background: #fff; box-shadow: none; color: var(--ed-preto); font: 600 12px/1.25 var(--sans); }
.estilo-editorial .btn-instalar i { border-radius: 0; background: var(--ed-preto); }
.estilo-editorial .btn-instalar small { color: var(--ed-suave); }
@media (hover: hover) {
  .estilo-editorial .btn-escuro:hover, .estilo-editorial .btn-ouro:hover, .estilo-editorial .btn-zap:hover,
  .estilo-editorial .btn-comprar:hover, .estilo-editorial .btn-pincel:hover { background: var(--l-escuro2); }
  .estilo-editorial .btn-linha:hover, .estilo-editorial .btn-claro:hover { background: var(--l-areia); }
}

/* ---------- Categorias em destaque: foto grande, legenda embaixo (sem texto por cima da foto) ---------- */
.estilo-editorial .destaques { padding: 8px 0 30px; }
.estilo-editorial .dq-trilho { grid-auto-columns: 76%; gap: 12px; scroll-padding-inline: 16px; }
.estilo-editorial .dq { display: grid; gap: 12px; align-content: start; aspect-ratio: auto; border-radius: 0; overflow: visible; background: none; }
.estilo-editorial .dq img { height: auto; aspect-ratio: 5 / 4; background: var(--l-areia); }
.estilo-editorial .dq::after { display: none; }
.estilo-editorial .dq-txt { position: static; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ed-tinta); }
.estilo-editorial .dq-txt b { font: 400 27px/1.05 var(--serif); letter-spacing: 0; text-transform: none; }
.estilo-editorial .dq-txt small { font: 600 10.5px/1.2 var(--sans); letter-spacing: .12em; color: var(--ed-suave); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--linha-forte); }
.estilo-editorial .dq-txt em { font-size: 22px; color: var(--ed-suave); }
@media (min-width: 760px) {
  .estilo-editorial .destaques { padding: 44px 0 40px; }
  .estilo-editorial .dq-trilho { gap: 20px; grid-auto-columns: calc((min(100vw, 1180px) - 32px - 20px * (var(--n, 4) - 1)) / var(--n, 4)); }
  .estilo-editorial .dq-seta { background: #fff; color: var(--ed-preto); box-shadow: 0 0 0 1px var(--linha-forte); width: 44px; height: 44px; }
  .estilo-editorial .dq-txt b { font-size: 30px; }
}

/* ---------- Faixa do atacado: cinza da foto, texto preto, assinatura da marca em linha ---------- */
.estilo-editorial .banner-atacado { margin: 0; background: var(--l-areia); color: var(--ed-tinta); }
.estilo-editorial .ba-texto { padding: 30px 20px 6px; text-align: left; }
.estilo-editorial .ba-sobre { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .banner-atacado h2.cursiva { margin: 10px 0 14px; font-family: var(--f-cursiva); font-weight: 400; font-size: clamp(42px, 11.4vw, 56px); line-height: 1; color: var(--ed-tinta); }
.estilo-editorial .ba-desc { margin: 0 0 8px; max-width: 40ch; font-size: 16px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: var(--ed-tinta); }
.estilo-editorial .ba-min { margin: 8px 0 14px; max-width: 40ch; color: var(--ed-suave); }
.estilo-editorial .ba-min b { color: var(--ed-tinta); }
.estilo-editorial .ba-selos { margin: 20px 20px 0; gap: 14px 12px; }
.estilo-editorial .ba-selos li { font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; color: var(--ed-tinta); }
.estilo-editorial .ba-selos i { width: 40px; height: 40px; border: 1px solid var(--ed-preto); color: var(--ed-preto); background: #fff; font-size: 18px; }
.estilo-editorial .ba-selo { width: auto; aspect-ratio: auto; margin: 26px 20px 0; padding: 18px 0 32px; border: 0; border-top: 1px solid var(--linha-forte); border-radius: 0;
  place-content: start; justify-items: start; text-align: left; color: var(--ed-tinta); }
.estilo-editorial .ba-selo .nome-marca { align-items: flex-start; }
.estilo-editorial .ba-selo .nome-marca b { font-size: 24px; color: var(--ed-tinta); padding-left: 0; }
.estilo-editorial .ba-selo .nome-marca small { font-size: 8.5px; color: var(--ed-suave); padding-left: 0; }
.estilo-editorial .ba-selo em { color: var(--ed-tinta); max-width: none; }
@media (min-width: 900px) {
  .estilo-editorial .banner-atacado { grid-template-columns: 300px minmax(0, 1fr) 250px 230px; }
  .estilo-editorial .ba-texto { padding: 36px 40px; }
  .estilo-editorial .ba-selos { margin: 0; gap: 16px; }
  .estilo-editorial .ba-selo { margin: 36px 0 36px 28px; padding: 6px 0 6px 28px; border-top: 0; border-left: 1px solid var(--linha-forte); align-self: stretch; place-content: center start; }
}

/* ---------- Coleção: título de seção, abas de texto, ordenar ---------- */
.estilo-editorial .colecao { padding: 46px 16px 44px; }
.estilo-editorial .colecao .cabeca { gap: 20px; text-align: left; padding-top: 0; }
.estilo-editorial .colecao h2 { font: 400 clamp(42px, 11.6vw, 64px)/1 var(--serif); letter-spacing: -.01em; text-transform: none; }
.estilo-editorial .colecao .sobre { margin: 10px 0 0; font: 600 11px/1.5 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .abas { gap: 24px; padding: 0 16px; border-bottom: 1px solid var(--linha); }
.estilo-editorial .aba { position: relative; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ed-suave); }
.estilo-editorial .aba[aria-pressed="true"] { background: none; color: var(--ed-tinta); }
.estilo-editorial .aba[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ed-tinta); }
.estilo-editorial .linha-resultado { margin: 10px 0 18px; }
.estilo-editorial .resultado { font-size: 12.5px; color: var(--ed-suave); }
.estilo-editorial .ordenar select { min-height: 44px; padding: 0 22px 0 0; border: 0; border-radius: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px;
  font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ed-tinta); }
@media (min-width: 900px) {
  .estilo-editorial .colecao { padding-top: 64px; }
  .estilo-editorial .abas { margin: 0; padding: 0; }
}

/* ---------- Cartões: a foto é o cartão ---------- */
.estilo-editorial .grade { gap: 34px 10px; }
@media (min-width: 720px) { .estilo-editorial .grade { gap: 44px 16px; } }
@media (min-width: 1040px) { .estilo-editorial .grade { gap: 48px 18px; } }
.estilo-editorial .item { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.estilo-editorial .item .foto { aspect-ratio: 4 / 5; background: var(--l-areia); } /* 4:5 = a proporção das fotos: nada é cortado (13/10) */
.estilo-editorial .item .info { gap: 6px; padding: 12px 0 0; }
.estilo-editorial .item .nm { position: relative; font: 500 14px/1.3 var(--sans); letter-spacing: .003em; color: var(--ed-tinta); }
.estilo-editorial .item .nm::after { content: ""; position: absolute; inset: -13px 0; }   /* nome da peça: área de toque de 44 px */
.estilo-editorial .item .dt { margin-top: -3px; font-size: 12px; color: var(--ed-suave); }
.estilo-editorial .item .cores { gap: 6px; margin-top: 1px; }
.estilo-editorial .item .cores .bolinha { width: 13px; height: 13px; border-color: rgba(0, 0, 0, .2); }
.estilo-editorial .item .tams { gap: 9px; font-size: 11.5px; letter-spacing: .05em; color: var(--ed-suave); }
.estilo-editorial .fav { top: 6px; right: 6px; width: 36px; height: 36px; background: rgba(255, 255, 255, .92); color: var(--ed-preto); font-size: 18px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.estilo-editorial .fav::after { content: ""; position: absolute; inset: -4px; }   /* área de toque de 44 px */
.estilo-editorial .fav.on { background: #fff; color: var(--ed-preto); }
.estilo-editorial .selo-novo, .estilo-editorial .selo-esgotado { left: 0; top: 0; bottom: auto; padding: 6px 9px 5px; border-radius: 0; font: 600 10px/1.2 var(--sans); letter-spacing: .12em; }
.estilo-editorial .selo-novo { background: #fff; color: var(--ed-tinta); }
.estilo-editorial .selo-esgotado { background: var(--ed-preto); color: #fff; }
/* Preços: sem caixa. Atacado primeiro, com a etiqueta no tom do atacado; os dois valores no mesmo preto e no mesmo tamanho,
   sempre um embaixo do outro (nada é cortado em celular estreito: a frase "a partir de" pode quebrar a linha). */
.estilo-editorial .precos { gap: 9px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--linha); }
.estilo-editorial .precos.dois { display: grid; grid-template-columns: minmax(0, 1fr); }
.estilo-editorial .precos > span, .estilo-editorial .precos.dois > span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: 6px; row-gap: 2px;
  min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
.estilo-editorial .precos small { grid-column: 1; grid-row: 1; font: 600 10.5px/1.45 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .precos .p-atac small { padding: 1px 6px 0; background: var(--ed-atac); color: var(--ed-atac-texto); }
.estilo-editorial .precos em { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--ed-suave); }
.estilo-editorial .precos b, .estilo-editorial .precos s { grid-column: 1 / -1; }
.estilo-editorial .precos b { font: 600 15.5px/1.25 var(--sans); color: var(--ed-tinta); }
.estilo-editorial .precos .p-atac b { color: var(--ed-tinta); }
.estilo-editorial .precos s { font-size: 12px; color: var(--apagado); }
.estilo-editorial .precos .promo b { color: var(--perigo); }
.estilo-editorial .item .pc.consulta { font-size: 13px; color: var(--ed-suave); }
.estilo-editorial .vazio { border-radius: 0; border-color: var(--linha-forte); color: var(--ed-suave); }

/* ---------- Como comprar ---------- */
.estilo-editorial .como { margin: 0 auto; padding: 40px 16px 48px; border-top: 1px solid var(--linha); }
.estilo-editorial .como h2 { font: 400 clamp(36px, 9.6vw, 52px)/1.02 var(--serif); letter-spacing: -.005em; text-transform: none; }
.estilo-editorial .como ol { gap: 24px; margin-top: 24px; }
.estilo-editorial .como li { grid-template-columns: 52px 1fr; column-gap: 12px; row-gap: 2px; font-size: 14.5px; line-height: 1.5; color: var(--ed-suave); }
.estilo-editorial .como li::before { content: counter(passo, decimal-leading-zero); width: auto; height: auto; place-items: start; border-radius: 0; background: none; color: var(--ed-tinta); font: 400 38px/.9 var(--serif); }
.estilo-editorial .como li b { font-weight: 600; font-size: 14.5px; color: var(--ed-tinta); }

/* ---------- Rodapé: assinatura no branco, base preta ---------- */
.estilo-editorial .rodape { color: #fff; }
.estilo-editorial .ro-faixa { padding: 44px 20px 40px; gap: 24px; background: var(--l-fundo); border-top: 1px solid var(--linha); color: var(--ed-tinta); }
.estilo-editorial .ro-cursiva { max-width: 15ch; font-size: clamp(36px, 10vw, 50px); line-height: 1.02; color: var(--ed-tinta); }
.estilo-editorial .ro-selos { gap: 14px 28px; }
.estilo-editorial .ro-selos li { font: 600 10.5px/1.4 var(--sans); letter-spacing: .1em; color: var(--ed-tinta); }
.estilo-editorial .ro-selos i { color: var(--ed-preto); font-size: 23px; }
.estilo-editorial .ro-assinatura { font-size: 21px; color: var(--ed-suave); }
.estilo-editorial .ro-base { background: var(--ed-preto); }
.estilo-editorial .ro-marca .nome-marca b { color: #fff; }
.estilo-editorial .ro-marca .nome-marca small { color: rgba(255, 255, 255, .72); }
.estilo-editorial .ro-redes a { width: 44px; height: 44px; border-color: rgba(255, 255, 255, .45); }
.estilo-editorial .ro-lema { font: 600 10.5px/1.6 var(--sans); letter-spacing: .12em; color: rgba(255, 255, 255, .72); }
.estilo-editorial .ro-links a, .estilo-editorial .ro-links button { min-height: 44px; padding: 0 2px; display: inline-flex; align-items: center; color: #fff; font-size: 13px; }
.estilo-editorial .ro-endereco { color: rgba(255, 255, 255, .85); }
.estilo-editorial .ro-trayvia, .estilo-editorial .ro-exemplo { color: rgba(255, 255, 255, .72); }
/* Links na base preta (ex.: "Quero uma loja assim →" da demonstração): a cor geral dos links é o preto do botão e sumia no fundo preto. */
.estilo-editorial .ro-base a:not(.btn-contorno) { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); }
.estilo-editorial .ro-base .ro-redes a, .estilo-editorial .ro-base .ro-links a { text-decoration: none; }
@media (min-width: 900px) { .estilo-editorial .ro-faixa { padding: 48px max(24px, calc((100vw - 1180px) / 2)); gap: 32px; } .estilo-editorial .ro-cursiva { max-width: 18ch; } }

/* ---------- Folhas (peça, sacola, menu, textos, assistente) ---------- */
.estilo-editorial .folha .veu { background: rgba(0, 0, 0, .42); }
.estilo-editorial .folha .painel { border: 0; border-radius: 0; background: var(--l-fundo); }
@media (min-width: 760px) { .estilo-editorial .folha .painel { border: 0; border-radius: 0; } }
.estilo-editorial .fechar { top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: rgba(255, 255, 255, .94); color: var(--ed-preto); box-shadow: 0 1px 6px rgba(0, 0, 0, .1); }
.estilo-editorial .fotos, .estilo-editorial .painel.produto .fotos { border-radius: 0; background: var(--l-areia); }
.estilo-editorial .fotos .slide img, .estilo-editorial .fotos .slide video { background: var(--l-areia); }
.estilo-editorial .pontos i { background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .16); }
.estilo-editorial .pontos i.on { background: var(--ed-preto); box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); }
.estilo-editorial .contador { top: 22px; right: 66px; padding: 5px 8px; border-radius: 0; background: rgba(255, 255, 255, .94); color: var(--ed-tinta); font: 600 11px/1 var(--sans); letter-spacing: .08em; }
.estilo-editorial .seta { width: 44px; height: 44px; border: 0; background: rgba(255, 255, 255, .94); color: var(--ed-preto); }
.estilo-editorial .lupa { min-height: 36px; padding: 0 12px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .94); color: var(--ed-tinta); font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.estilo-editorial .lupa::after { content: ""; position: absolute; inset: -4px; }
.estilo-editorial .lupa svg { color: var(--ed-preto); }
.estilo-editorial .tag-real { border: 0; border-radius: 0; background: #fff; color: var(--ed-tinta); }
.estilo-editorial .selo-midia { border: 0; border-radius: 0; background: rgba(255, 255, 255, .94); }
.estilo-editorial .selo-midia svg { color: var(--ed-preto); }
.estilo-editorial .miniaturas { gap: 6px; }
.estilo-editorial .mini { border-radius: 0; border: 2px solid transparent; background: var(--l-areia); opacity: .62; }
.estilo-editorial .mini.on { border-color: var(--ed-preto); opacity: 1; }
.estilo-editorial .mini.video { box-shadow: none; }
.estilo-editorial .mais-midia { font-size: 12px; color: var(--ed-suave); }

/* Página da peça */
.estilo-editorial .corpo { padding: 24px 20px 8px; }
.estilo-editorial .corpo .mc { font: 600 11px/1.3 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
/* O nome da peça volta para a serifa: a Instrument Serif desenha certo os acentos (Maiô, Açaí), que a Bodoni entortava. */
.estilo-editorial .painel.produto h3 { margin: 8px 0 6px; font: 400 38px/1 var(--serif); letter-spacing: -.008em; }
.estilo-editorial .corpo .dt { margin: 0 0 20px; font-size: 14px; color: var(--ed-suave); }
.estilo-editorial .preco-grande { gap: 0; margin-bottom: 24px; padding: 0 0 14px; border: 0; border-top: 1px solid var(--ed-preto); border-bottom: 1px solid var(--linha); border-radius: 0; background: none; }
.estilo-editorial .preco-grande.dois { gap: 0; }
.estilo-editorial .preco-col { gap: 4px; padding: 14px 14px 12px 0; }
.estilo-editorial .preco-col.atac { padding: 14px 12px 12px 14px; border-left: 0; background: var(--ed-atac); }
.estilo-editorial .preco-grande b, .estilo-editorial .preco-col.atac b { font: 600 27px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ed-tinta); font-variant-numeric: lining-nums tabular-nums; }
.estilo-editorial .preco-grande b small { display: block; margin-bottom: 2px; font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; color: var(--ed-suave); }
.estilo-editorial .preco-col.atac b small { color: var(--ed-atac-texto); }
.estilo-editorial .preco-grande s { font-size: .6em; font-weight: 500; color: var(--apagado); }
.estilo-editorial .preco-col .rot { font: 600 10.5px/1.45 var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .preco-col.atac .rot { color: var(--ed-atac-texto); }
.estilo-editorial .preco-grande > .nota { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ed-suave); }
.estilo-editorial .preco-grande .promo-ate { color: var(--perigo); }
.estilo-editorial .rotulo { margin: 0 0 10px; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; color: var(--ed-tinta); }
.estilo-editorial .rotulo .tam-escolhido { color: var(--ed-suave); }
.estilo-editorial .variacoes { gap: 0; margin-bottom: 24px; border-top: 1px solid var(--linha); }
.estilo-editorial .variacao { min-height: 52px; padding: 8px 4px; gap: 14px; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: none; font-size: 15px; }
.estilo-editorial .variacao .bolinha { width: 24px; height: 24px; }
.estilo-editorial .variacao[aria-pressed="true"] { border-color: var(--linha); box-shadow: none; font-weight: 600; }
.estilo-editorial .variacao[aria-pressed="true"] .bolinha { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ed-preto); }
.estilo-editorial .variacao[aria-pressed="true"]::after { content: ""; flex: none; margin: 0 6px 4px auto; width: 13px; height: 7px; border-left: 2px solid var(--ed-preto); border-bottom: 2px solid var(--ed-preto); transform: rotate(-45deg); }
.estilo-editorial .variacao:disabled { opacity: .5; }
.estilo-editorial .tamanhos { gap: 8px; }
.estilo-editorial .tam { min-width: 54px; min-height: 48px; border-radius: 0; border: 1px solid var(--ed-borda-botao); background: #fff; font: 500 14px var(--sans); letter-spacing: .04em; }
.estilo-editorial .tam[aria-pressed="true"] { background: var(--ed-preto); color: #fff; border-color: var(--ed-preto); }
.estilo-editorial .tam:disabled { opacity: .42; }
.estilo-editorial .nota { font-size: 12.5px; color: var(--ed-suave); }
.estilo-editorial .garantias { border-radius: 0; background: var(--linha); border-color: var(--linha); }
.estilo-editorial .garantias li { padding: 14px 12px; background: #fff; }
.estilo-editorial .garantias svg { color: var(--ed-preto); }
.estilo-editorial .garantias b { font-size: 12.5px; font-weight: 600; }
.estilo-editorial .garantias span { color: var(--ed-suave); }
.estilo-editorial .descricao { font: 400 16px/1.6 var(--sans); color: var(--ed-tinta); }
.estilo-editorial .lista-carac li { color: var(--ed-suave); }
.estilo-editorial .lista-carac svg, .estilo-editorial .garantia svg { color: var(--ed-preto); }
.estilo-editorial .garantia { border-radius: 0; }
.estilo-editorial .sanfona summary { min-height: 54px; padding: 0 2px; font: 600 11.5px var(--sans); letter-spacing: .12em; }
.estilo-editorial .sanfona summary::after { color: var(--ed-preto); font-weight: 300; }
.estilo-editorial .sanfona-corpo { font-size: 14.5px; color: var(--ed-suave); }
.estilo-editorial .ficha dl { border: 0; border-top: 1px solid var(--linha); border-radius: 0; }
.estilo-editorial .ficha dl > div { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.estilo-editorial .ficha dl > div:nth-child(odd) { background: none; }
.estilo-editorial .ficha dt { color: var(--ed-suave); }
.estilo-editorial .rel { width: 140px; border: 0; border-radius: 0; background: none; }
.estilo-editorial .rel img { aspect-ratio: 4 / 5; background: var(--l-areia); }
.estilo-editorial .rel small { padding: 9px 0 0; font: 600 9.5px var(--sans); letter-spacing: .12em; color: var(--ed-suave); }
.estilo-editorial .rel b { padding: 3px 0 0; font: 500 13.5px/1.3 var(--sans); color: var(--ed-tinta); }
.estilo-editorial .rel span { padding: 3px 0 6px; font: 600 13px var(--sans); color: var(--ed-tinta); }
.estilo-editorial .acoes { gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linha); box-shadow: none; }
/* A folha tinha um respiro embaixo da barra fixa e o conteúdo aparecia por baixo dela (ex.: "Pix/Cartão" sob o botão do WhatsApp).
   Agora a barra é o fim da folha e leva o respiro dentro dela. */
.estilo-editorial #folha-produto .painel, .estilo-editorial #folha-sacola .painel, .estilo-editorial #folha-texto .painel { padding-bottom: 0; }
.estilo-editorial .compartilhar { min-height: 44px; color: var(--ed-suave); }
.estilo-editorial .endereco-peca a, .estilo-editorial .nota-endereco a { color: var(--ed-tinta); }
@media (min-width: 900px) {
  .estilo-editorial .painel.produto .corpo { padding: 40px 40px 12px; }
  .estilo-editorial .painel.produto h3 { font-size: 46px; }
  .estilo-editorial .painel.produto .acoes { padding: 14px 40px 20px; box-shadow: none; }
}

/* Sacola */
.estilo-editorial .sacola-topo { padding: 24px 20px 10px; }
.estilo-editorial .sacola-topo h3 { font: 400 40px/1 var(--serif); letter-spacing: -.01em; }
.estilo-editorial .nota-atacado { margin: 10px 20px 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 0; background: #fff; color: var(--ed-suave); }
.estilo-editorial .nota-atacado b { font-size: 14.5px; color: var(--ed-tinta); }
.estilo-editorial .nota-atacado.ok { border-color: transparent; background: var(--ed-atac); color: var(--ed-atac-texto); }
.estilo-editorial .nota-atacado.ok b { color: var(--ed-atac-texto); }
.estilo-editorial .itens { gap: 0; padding: 4px 20px; }
.estilo-editorial .linha-item { grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: start;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--linha); border-radius: 0; background: none; }
.estilo-editorial .linha-item img { grid-row: 1 / span 2; width: 78px; height: 104px; border-radius: 0; background: var(--l-areia); }
.estilo-editorial .linha-item b { font: 500 15px/1.3 var(--sans); color: var(--ed-tinta); }
.estilo-editorial .linha-item small { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--ed-suave); }
.estilo-editorial .linha-item .v { margin-top: 6px; font: 600 15px var(--sans); color: var(--ed-tinta); }
/* Quantidade: − 1 + em linha, embaixo do nome (sobra largura para o texto); cada botão com 44 px */
.estilo-editorial .qtd { grid-column: 2; flex-direction: row-reverse; justify-content: flex-end; align-items: stretch; gap: 0; }
.estilo-editorial .qtd button { width: 44px; height: 44px; border: 1px solid var(--ed-borda-botao); border-radius: 0; background: #fff; font: 400 19px/1 var(--sans); }
.estilo-editorial .qtd span { min-width: 42px; display: grid; place-items: center; border-block: 1px solid var(--ed-borda-botao); font-weight: 600; font-size: 14.5px; }
.estilo-editorial .resumo { margin: 8px 20px 20px; padding: 16px 0 4px; gap: 8px; border: 0; border-top: 1px solid var(--ed-preto); border-radius: 0; background: none; font-size: 13.5px; color: var(--ed-suave); }
.estilo-editorial .resumo .total { align-items: baseline; gap: 12px; font-size: 15.5px; font-weight: 600; color: var(--ed-tinta); }
.estilo-editorial .resumo .total span:last-child, .estilo-editorial .resumo .total.desconto span:last-child { color: var(--ed-tinta); font-size: 19px; white-space: nowrap; }
.estilo-editorial .form { gap: 16px; padding: 4px 20px 0; }
.estilo-editorial .form label { gap: 8px; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ed-tinta); }
.estilo-editorial .form input, .estilo-editorial .form textarea, .estilo-editorial .form select {
  min-height: 50px; border: 1px solid var(--ed-borda-campo); border-radius: 0; background: #fff; font: 400 16px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ed-tinta); }
.estilo-editorial .form input::placeholder, .estilo-editorial .form textarea::placeholder { color: #767676; }
.estilo-editorial .form input:focus, .estilo-editorial .form textarea:focus, .estilo-editorial .form select:focus { border-color: var(--ed-preto); box-shadow: inset 0 0 0 1px var(--ed-preto); }
.estilo-editorial .form label.check-ofertas { padding: 12px 14px; border: 1px solid var(--linha); border-radius: 0; background: none; font: 400 14px/1.45 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ed-suave); }
.estilo-editorial .form .check-ofertas input { min-height: 0; accent-color: var(--ed-preto); }
.estilo-editorial .escolha button { min-height: 48px; border: 1px solid var(--ed-borda-botao); border-radius: 0; background: #fff; color: var(--ed-tinta); font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; }
.estilo-editorial .escolha button[aria-pressed="true"] { background: var(--ed-preto); color: #fff; border-color: var(--ed-preto); box-shadow: none; }
.estilo-editorial .nota-pagamento, .estilo-editorial .nota-recebe { border-radius: 0; border-left-color: var(--ed-preto); background: #fff; color: var(--ed-tinta); }
.estilo-editorial .nota-endereco { border-radius: 0; background: var(--l-areia); }
.estilo-editorial .nota-parceira { border-radius: 0; border-left-color: var(--ed-preto); color: var(--ed-tinta); }
.estilo-editorial .cupom { border-radius: 0; }
.estilo-editorial .cupom summary { color: var(--ed-tinta); }
.estilo-editorial .sacola-vazia svg { color: var(--ed-preto); }
.estilo-editorial .pedido-ok { border-radius: 0; border: 1px solid var(--linha); border-left: 3px solid var(--ed-preto); background: #fff; }
.estilo-editorial .pedido-ok b { font: 400 28px/1.05 var(--serif); color: var(--ed-tinta); }

/* Menu do celular e textos */
.estilo-editorial .menu-lateral nav button { min-height: 56px; padding: 12px 2px; font: 400 30px/1.1 var(--serif); color: var(--ed-tinta); }
.estilo-editorial .ml-marca .nome-marca { align-items: flex-start; }
.estilo-editorial .painel.texto h3, .estilo-editorial .dica h3 { font: 400 38px/1.02 var(--serif); }
.estilo-editorial .texto-corpo { font-size: 15px; color: #3D3D3D; }

/* Assistente: o botão flutuante fica em contorno (o preto chapado é só para comprar) */
.estilo-editorial .chat-flutuante { height: 48px; padding: 0 16px; gap: 8px; border: 1px solid var(--ed-preto); border-radius: 0; background: #fff !important; color: var(--ed-preto) !important;
  font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 22px rgba(0, 0, 0, .14); backdrop-filter: none; -webkit-backdrop-filter: none; }
.estilo-editorial .chat-flutuante svg { color: var(--ed-preto); font-size: 19px; }
.estilo-editorial .chat-topo h3 { font: 400 28px/1.05 var(--serif); }
.estilo-editorial .chat-topo small { color: var(--ed-suave); }
.estilo-editorial .msg { border-radius: 0; }
.estilo-editorial .msg.loja { border: 0; background: var(--l-areia); }
.estilo-editorial .msg.eu { background: var(--ed-preto); color: #fff; }
.estilo-editorial .msg b { color: var(--ed-tinta); }
.estilo-editorial .msg.eu b { color: #fff; }
.estilo-editorial .chip { min-height: 40px; border-radius: 0; border-color: var(--ed-borda-botao); background: #fff; }
.estilo-editorial .chat-relogio { border-radius: 0; background: #fff; }
.estilo-editorial .chat-relogio img { border-radius: 0; }
.estilo-editorial .chat-relogio b { font: 500 14px/1.25 var(--sans); }
.estilo-editorial .chat-relogio em { color: var(--ed-tinta); }
.estilo-editorial .chat-campo input { border-radius: 0; border-color: var(--ed-borda-campo); }
.estilo-editorial .chat-campo input:focus { border-color: var(--ed-preto); }
.estilo-editorial .enviar { border-radius: 0; background: var(--ed-preto); color: #fff; }

/* Zoom e aviso */
.estilo-editorial .zoom { background: #fff; }
.estilo-editorial .zoom-x, .estilo-editorial .zoom-seta { border-color: var(--linha-forte); background: rgba(255, 255, 255, .94); color: var(--ed-preto); }
.estilo-editorial .zoom-ctrl button { border-radius: 0; border-color: var(--ed-borda-botao); background: #fff; }
.estilo-editorial .aviso { border: 0; border-radius: 0; background: var(--ed-preto); color: #fff; }
.estilo-editorial .som-btn { border-color: var(--linha-forte); background: #fff; color: var(--ed-suave); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.estilo-editorial .som-btn.on { color: var(--ed-preto); border-color: var(--ed-preto); }

/* ---------- Escolha final (12/10): o Editorial (mais chique, para o diretor de arte) com os acertos práticos que a dona e a
   cliente apontaram, vindos da proposta "Marca forte" ---------- */
/* Atacado de relance: valor na cor do atacado, num quadrinho próprio; preços maiores */
.estilo-editorial .precos > span.p-atac, .estilo-editorial .precos.dois > span.p-atac { background: var(--ed-atac); padding: 7px 8px 6px; }
.estilo-editorial .precos .p-atac small { padding: 0; background: none; }
.estilo-editorial .precos .p-atac b, .estilo-editorial .preco-col.atac b { color: var(--ed-atac-texto); }
.estilo-editorial .precos b { font-size: 17px; }
/* Letras pequenas legíveis: no mínimo 12 px (13 px nas abas) */
.estilo-editorial .aba { font-size: 13px; letter-spacing: .08em; }
.estilo-editorial .abas { gap: 16px; }
.estilo-editorial .precos small, .estilo-editorial .preco-col .rot, .estilo-editorial .rotulo, .estilo-editorial .ab-sobre { font-size: 12px; letter-spacing: .08em; }
.estilo-editorial .precos em { font-size: 12px; }
.estilo-editorial .selo-novo, .estilo-editorial .selo-esgotado { font-size: 11px; }
/* Títulos sem palavra sozinha na última linha */
.estilo-editorial h1, .estilo-editorial h2, .estilo-editorial .cursiva { text-wrap: balance; }
/* O botão final da sacola volta ao verde do WhatsApp, que toda cliente reconhece (texto 7,9:1) */
.estilo-editorial .btn-zap { background: #25D366; color: #062B14; }
.estilo-editorial .btn-zap:hover { background: #1FBE5B; color: #062B14; }
/* (13/10) No celular a foto da abertura fica inteira (foto de modelo nunca é cortada: dono) e, para o botão "Ver as peças"
   continuar na primeira tela, o texto e o botão vêm antes da foto (a abertura é uma grade: só a ordem muda). */
@media (max-width: 759px) {
  .estilo-editorial .ab-foto img { max-height: none; object-fit: contain; }
  .estilo-editorial .ab-texto { order: -1; padding-bottom: 28px; }
}
/* (13/10) A foto do atacado tem a altura dela, não 260 px fixos: com altura fixa, o quadro muda de proporção conforme a largura do
   celular (360 px cortava 8%, 412 px 5%). Abaixo de 900 px a foto fica inteira em qualquer aparelho. */
@media (max-width: 899px) { .estilo-editorial .ba-foto img { height: auto; } }
@media (max-width: 599px) {
  /* "Tire suas dúvidas" só com o ícone, num quadrado de 48 px, para não cobrir o Comprar; respiro embaixo da coleção */
  .estilo-editorial .chat-flutuante { width: 48px; padding: 0; justify-content: center; font-size: 0; letter-spacing: 0; }
  .estilo-editorial .chat-flutuante svg { font-size: 20px; }
  .estilo-editorial .colecao { padding-bottom: 76px; }
  /* Abertura: foto um pouco menor, para o "Ver as peças" caber na primeira tela do celular */
}