/* As fontes carregam no index.html (Figtree + Fraunces). Havia um @import de
   Hanken Grotesk e Libre Caslon aqui: fontes da loja de origem, que ninguém mais
   usa. @import em CSS ainda bloqueia a renderização — carregava e atrasava. */

.editorial-layout { font-family: Figtree, system-ui, sans-serif !important; }
.editorial-layout-header { max-width: none !important; padding: 21px max(24px,5vw) !important; background: #fff !important; box-shadow: none !important; }
.editorial-layout-header h1 { position:absolute; left:50%; transform:translateX(-50%); font-family:Fraunces,serif !important; font-size:26px !important; letter-spacing:.2em !important; }
.editorial-layout-nav { padding:12px 0 !important; border-color:#e5e2dc !important; }
.editorial-layout-nav nav { display:flex; justify-content:center; }
.editorial-layout-nav a { font-size:10px !important; letter-spacing:.14em !important; }
.editorial-layout-main { max-width:none !important; padding:0 !important; }
.public-store-wrapper div.editorial-announcement-bar { width:100%; overflow:hidden; padding:9px 0 !important; background:#2A2718 !important; color:#D8DC77 !important; }
.public-store-wrapper .editorial-announcement-bar div { background:#2A2718 !important; color:#D8DC77 !important; }
.editorial-announcement-track { display:flex; width:max-content; will-change:transform; animation:editorial-announcement-scroll 160s linear infinite; }
.editorial-announcement-bar:hover .editorial-announcement-track { animation-play-state:paused; }
.editorial-announcement-group { display:flex; flex-shrink:0; align-items:center; gap:28px; padding-right:28px; white-space:nowrap; }
.public-store-wrapper div.editorial-announcement-bar span { color:#D8DC77 !important; font-size:9px; font-weight:600; letter-spacing:.18em; opacity:1 !important; }
.editorial-announcement-group i { color:#7B806A; font-size:10px; font-style:normal; }
@keyframes editorial-announcement-scroll { to { transform:translateX(-50%); } }
.public-store-wrapper footer.editorial-layout-footer { width:100%; max-width:none !important; margin:0 !important; padding:72px max(24px,5vw) 34px !important; border-top:0 !important; background:#2A2718 !important; background-color:#2A2718 !important; color:#fff !important; }
.public-store-wrapper footer.editorial-layout-footer div { background-color:#2A2718 !important; color:#fff !important; }
/* O `a` entra junto de h4/p/span porque o tema global (public/index.css) força
   `color:#000 !important` em tudo dentro de .public-store-wrapper. Sem estar nesta lista,
   os links de Política de Privacidade e Termos de Uso saíam pretos no rodapé preto. */
.public-store-wrapper footer.editorial-layout-footer h4,.public-store-wrapper footer.editorial-layout-footer p,.public-store-wrapper footer.editorial-layout-footer span,.public-store-wrapper footer.editorial-layout-footer a { color:#fff !important; }
.public-store-wrapper footer.editorial-layout-footer p,.public-store-wrapper footer.editorial-layout-footer span,.public-store-wrapper footer.editorial-layout-footer a { opacity:.68 !important; }
/* Realce no hover precisa vir do CSS: o `!important` acima ganha de qualquer estilo inline. */
.public-store-wrapper footer.editorial-layout-footer a:hover { opacity:1 !important; }
.editorial-layout-footer>div:last-child { border-color:rgba(255,255,255,.16) !important; }

.stitch-home { --ink:#2A2718; --bone:#F3F4EC; color:var(--ink); background:#fff; font-family:Figtree,sans-serif; }
.stitch-home button { border-radius:0; box-shadow:none; }
/* Banner do topo. A proporção é fixa (2:1 no desktop, 4:5 no celular) e igual à do
   preview no painel - é isso que faz a posição escolhida lá bater exatamente com a
   daqui. O texto da campanha faz parte da imagem, então não existe mais camada de
   texto nem escurecimento por cima da foto. */
.stitch-hero-carousel { position:relative; aspect-ratio:2/1; overflow:hidden; background:#DCDDD0; }
/* Sem `cursor:pointer` aqui: só o botão navega agora, o resto do banner (foto,
   título) não é mais clicável — o cursor de "isso leva a algo" some do banner
   inteiro e some só quando o mouse está de fato em cima do botão. */
.stitch-hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease,visibility .8s ease; }
.stitch-hero-slide.is-active { opacity:1; visibility:visible; z-index:1; }
.stitch-hero-slide picture { display:block; width:100%; height:100%; }
/* `--img-scale` é o único lugar que decide o zoom da foto — hover e a
   transição 'zoom' (mais abaixo) só mudam essa variável, nunca escrevem
   `transform` direto; assim as duas regras nunca competem por especificidade,
   uma sempre acaba de sobrescrever o valor da outra em vez de uma vencer e a
   outra sumir sem efeito. */
.stitch-hero-slide img { display:block; width:100%; height:100%; object-fit:cover; transform:scale(var(--img-scale,1)); transition:transform .6s ease; }
/* Leve zoom ao passar o mouse em cima do banner — a foto cresce, não o quadro:
   `overflow:hidden` no carrossel (regra acima) corta a sobra, então nada
   empurra o título/botão nem estoura o layout. Só a foto ATIVA — as outras
   ficam escondidas atrás dela, escalar todas seria trabalho à toa. */
.stitch-hero-carousel:hover .stitch-hero-slide.is-active img { --img-scale: 1.05; }
.stitch-season img,.stitch-editorial-pair img { width:100%; height:100%; object-fit:cover; }
.stitch-season picture,.stitch-editorial-pair picture { display:block; width:100%; height:100%; }
/* Posição do botão: vem do painel em % (--cta-x/--cta-y), medida pelo centro dele. */
/* O tamanho sai todo de --cta-scale: a fonte é medida em px direto (não sobra
   padding/box pra crescer em em), então mexer na escala só muda o tamanho do
   texto — é o que a alça de arrasto do painel controla. */
/* Decisão de 19/08/2026: o CTA de banner deixou de ser um botão preenchido
   (fundo broto + texto casca, "sem exceção", como o MARCA.md mandava até
   aqui) e virou texto solto — só a palavra, uma linha fina embaixo e um leve
   zoom no hover, mesmo tratamento do filtro de gênero da categoria (ver
   editorial-category.css). Pedido explícito da dona da loja, revoga a regra
   antiga; ela sabe que isso reduz o contraste do CTA sobre a foto. */
.stitch-hero-cta { position:absolute; z-index:2; left:var(--cta-x,50%); top:var(--cta-y,78%); transform:translate(-50%,-50%); padding:0 0 6px; border:none; border-bottom:1px solid currentColor; background:none; font-size:calc(12px * var(--cta-scale,1)); font-weight:700; letter-spacing:.2em; white-space:nowrap; }
/* O tema global (public/index.css) tem `button:not(:disabled):active { transform:
   scale(.98) }`. Esse transform SUBSTITUI o translate que centraliza o botão na
   posição escolhida no painel, então a cada clique ele saltava meia largura para a
   direita e meia altura para baixo - a tal diagonal. Aqui a resposta ao toque/hover
   é um leve zoom, sempre por cima do MESMO translate de centralização — nunca no
   lugar dele. Precisa do prefixo do wrapper para ganhar da regra global na
   especificidade. */
/* Alvo de toque de 44px SEM mexer no tamanho do texto. Sem o fundo/padding de
   antes, o texto sozinho é um alvo fino demais pro dedo — mais motivo ainda pra
   manter este pseudo-elemento invisível, que garante 44px de área clicável ao
   redor mesmo com a letra pequena. Vale lembrar que o banner inteiro também é
   clicável - isto aqui conserta o caso de quem mira no texto, que é o que a
   pessoa naturalmente faz. A regra em si mora no bloco de celular lá embaixo,
   mesmo motivo de antes: no desktop o mouse não precisa de alvo grande, e a
   área extra pausaria o carrossel antes do ponteiro chegar perto de verdade. */
.stitch-hero-cta { transition:transform .2s ease, filter .12s ease; }
.public-store-wrapper .stitch-hero-cta:hover { transform:translate(-50%,-50%) scale(1.08); }
.public-store-wrapper .stitch-hero-cta:active { transform:translate(-50%,-50%) scale(1.04); filter:brightness(.82); }
/* Sem fundo pra dar contraste, a cor do texto agora PRECISA mudar entre
   is-light/is-dark pra não sumir na foto — mesma lógica que o título
   (.stitch-hero-title) já usa logo abaixo. Os `!important` reforçam contra o
   tema global, que força texto preto em todo botão dentro de .public-store-wrapper. */
.stitch-hero-cta.is-light { color:#F3F4EC; text-shadow:0 2px 20px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); }
.stitch-hero-cta.is-dark { color:#2A2718; text-shadow:0 2px 20px rgba(255,255,255,.55),0 1px 3px rgba(255,255,255,.4); }
.public-store-wrapper .stitch-hero-cta.is-light { color:#F3F4EC !important; }
.public-store-wrapper .stitch-hero-cta.is-dark { color:#2A2718 !important; }

/* Título escrito no painel, por cima da foto do banner (ver HeroSlide.title em
   types.ts). Diferente do botão, aqui `is-light`/`is-dark` MUDAM de cor de
   verdade — a regra de ouro do botão (broto+casca sempre) é sobre o CTA da
   marca, não sobre legibilidade de texto solto em cima de foto. `pointer-events:
   none` porque só o botão navega — o texto nunca deve roubar o clique dele.
   Posição padrão a 38% da altura, acima da posição padrão do botão (78%),
   pra não brigar com ele quando os dois existem no mesmo banner — mas
   arrastável no painel, então pode não ser mais isso banner a banner. */
.stitch-hero-title {
  /* Posição vem do painel em % (--titulo-x/--titulo-y), mesma ideia do botão
     (--cta-x/--cta-y) — arrastável agora, era fixo em 50%/38%. */
  position:absolute; z-index:2; left:var(--titulo-x,50%); top:var(--titulo-y,38%); transform:translate(-50%,-50%);
  margin:0; padding:0 24px; text-align:center;
  /* Travado em 1325px (não só `90vw`) de propósito: o banner ocupa a tela
     inteira, sem limite, então "90% da tela" dava mais espaço pro texto num
     monitor largo do que a pré-visualização do painel simula (ela assume uma
     referência de 1440px, igual ao resto do editor de banner). Acima de
     ~1470px de tela o texto quebra sempre no mesmo lugar que a prévia mostrou;
     abaixo disso, `90vw` ainda governa, pra não estourar telas menores. */
  max-width:min(90vw, 1325px);
  font-family:Fraunces,Georgia,serif; font-weight:400; line-height:1.08;
  /* `--titulo-tamanho` vem do painel (HeroSlide.tituloTamanho) quando a dona da
     loja escolhe um tamanho fixo pela pré-visualização; sem ele, cai no automático. */
  font-size:var(--titulo-tamanho, clamp(26px,4vw,52px)); pointer-events:none;
  /* `pre-line`, não `balance`: quem decide onde a linha quebra é a Enter
     apertada na caixa de texto do painel, não um algoritmo tentando equilibrar
     a frase sozinho. Sem forçar largura em "ch", o texto só quebra por conta
     própria se realmente não couber na tela — nunca antes disso. */
  white-space: pre-line;
}
.stitch-hero-title.is-light { color:#F3F4EC; text-shadow:0 2px 24px rgba(0,0,0,.4),0 1px 4px rgba(0,0,0,.3); }
.stitch-hero-title.is-dark { color:#2A2718; text-shadow:0 2px 24px rgba(255,255,255,.55),0 1px 4px rgba(255,255,255,.4); }

/* Transição do carrossel — escolhida no painel (HomeConfig.heroTransicao).
   'fade' é a regra de cima (.stitch-hero-slide), sem precisar de nada aqui: é
   a que o carrossel sempre teve, então fica como o padrão sem classe extra.
   As outras duas ganham a classe `transicao-<nome>` no carrossel inteiro. */

/* 'zoom': mesmo dissolver do fade, mas a foto entra de um tico mais perto e
   relaxa pro tamanho normal enquanto aparece — usa a MESMA variável do zoom
   de hover (--img-scale), nunca escreve `transform` direto, então as duas
   nunca disputam por especificidade (ver comentário em .stitch-hero-slide img). */
.stitch-hero-carousel.transicao-zoom .stitch-hero-slide img { --img-scale: 1.08; transition:transform 1.4s ease; }
.stitch-hero-carousel.transicao-zoom .stitch-hero-slide.is-active img { --img-scale: 1; }
.stitch-hero-carousel.transicao-zoom:hover .stitch-hero-slide.is-active img { --img-scale: 1.05; }

/* 'slide': em vez de empilhar tudo em cima e trocar opacidade, cada banner
   fica ao lado do ativo (esquerda ou direita, um por vez) e desliza pra dentro
   quando é a vez dele. `--slide-offset` vem de EditorialHome.tsx, já calculado
   pelo caminho mais curto (ver deslocamentoDoSlide) — sem isso a última volta
   do laço deslizaria a tela inteira na direção errada. Sobrescreve o
   opacity/visibility do fade porque aqui todo banner precisa estar visível ao
   mesmo tempo, um do lado do outro, não escondido atrás do ativo. */
.stitch-hero-carousel.transicao-slide .stitch-hero-slide {
  opacity:1; visibility:visible; z-index:0;
  transform:translateX(calc(var(--slide-offset,0) * 100%));
  transition:transform .7s ease;
}
.stitch-hero-carousel.transicao-slide .stitch-hero-slide.is-active { z-index:1; }
.public-store-wrapper section.stitch-brand-marquee { width:100%; overflow:hidden; padding:12px 0 !important; background:#4F5D28 !important; color:#2A2718 !important; }
.public-store-wrapper .stitch-brand-marquee div { background:#4F5D28 !important; color:#2A2718 !important; }
.stitch-brand-marquee-track { display:flex; width:max-content; will-change:transform; animation:stitch-brand-scroll 200s linear infinite; }
.stitch-brand-marquee:hover .stitch-brand-marquee-track { animation-play-state:paused; }
.stitch-brand-marquee-group { display:flex; flex-shrink:0; align-items:center; gap:34px; padding-right:34px; white-space:nowrap; }
.public-store-wrapper section.stitch-brand-marquee span { color:#2A2718 !important; font-size:9px; font-weight:700; letter-spacing:.2em; opacity:1 !important; }
.stitch-brand-marquee-group i { color:#7B806A; font-size:10px; font-style:normal; }
@keyframes stitch-brand-scroll { to { transform:translateX(-50%); } }
/* `safe center`: com poucas categorias (não enchem a fileira) centraliza o
   grupo, em vez do `space-between` de antes, que com só 2 categorias jogava
   uma pra cada ponta da tela — parecia quebrado, não uma fileira curta. Com
   categorias demais pra caber (overflow, rola de lado), o `safe` desiste de
   centralizar e volta pro alinhamento à esquerda sozinho, senão o `center`
   cortaria as primeiras categorias, inacessíveis rolando o início pro 0. */
.stitch-category-rail { display:flex; justify-content:safe center; gap:32px; padding:48px max(24px,5vw); overflow-x:auto; scrollbar-width:none; }
.stitch-category-rail::-webkit-scrollbar { display:none; }
/* O botão fica mais largo que o círculo quando o nome da categoria precisa de
   mais espaço que 96px pra não quebrar feio ("Hidratação Capilar" etc.) — o
   `text-align:center` do botão centraliza esse texto certinho dentro da
   largura toda, mas não move o círculo: `<span>` é `display:block`, e
   `text-align` só centraliza conteúdo inline, não a caixa de um elemento em
   bloco. Sem o `margin:0 auto` abaixo, o círculo ficava colado na borda
   esquerda do botão enquanto o nome centralizava sozinho por baixo — o ícone
   parecia deslocado do próprio rótulo. */
.stitch-category-rail button { flex:0 0 auto; background:transparent; color:var(--ink); text-align:center; }
.stitch-category-rail button>span { display:block; width:96px; height:96px; margin:0 auto; overflow:hidden; border:1px solid transparent; border-radius:50%; }
.stitch-category-rail button:hover>span { border-color:#2A2718; }
.stitch-category-rail img { width:100%; height:100%; object-fit:cover; }
.stitch-category-rail b { display:block; margin-top:13px; font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.stitch-category-rail-wrap { position:relative; }
.stitch-category-nav { position:absolute; top:96px; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; background:#fff; border:1px solid #DCDDD0; color:#2A2718; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; font-size:18px; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.stitch-category-nav:hover { background:#F3F4EC; }
.stitch-category-nav.prev { left:10px; }
.stitch-category-nav.next { right:10px; }
@media(max-width:1024px){
  .stitch-category-nav { display:none; }
}
.public-store-wrapper section.stitch-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:20px max(24px,5vw) !important; background:#EDEFE0 !important; }
.public-store-wrapper .stitch-benefits div { display:flex; min-width:0; align-items:flex-start; gap:13px; padding:22px 18px; background:#F3F4EC !important; color:#2A2718 !important; }
.stitch-benefits svg { flex:0 0 21px; width:21px; margin-top:2px; color:#4F5D28; stroke-width:1.35; }
.stitch-benefits span { display:flex; min-width:0; flex-direction:column; gap:6px; }
.public-store-wrapper .stitch-benefits b { color:#2A2718 !important; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.public-store-wrapper .stitch-benefits small { color:#5F6552 !important; font-size:10px; line-height:1.45; }
.stitch-products { padding:88px max(24px,5vw); }
.stitch-products header { margin-bottom:46px; text-align:center; }
.stitch-products h2,.stitch-help h2 { margin:0 0 12px; font-family:Fraunces,serif; font-size:36px; font-weight:400; }
.stitch-products header p { margin:0 auto 15px; max-width:480px; color:#5F6552; }
.stitch-products header i { display:block; width:48px; height:1px; margin:auto; background:#2A2718; }
.stitch-products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.stitch-product-card { min-width:0; padding:0; background:transparent; color:var(--ink); text-align:left; }
.stitch-product-image { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; background:var(--bone); }
/* Duas cópias da mesma foto, uma sobre a outra — mesmo truque de
   editorial-product.css (`.editorial-product-image-bg`/`-fg`). A de baixo
   (`-bg`) cobre o quadro inteiro, borrada e ampliada; a de cima (`-fg`) mostra
   a foto inteira sem cortar, do jeito que `contain` já garantia. Antes, quando
   a foto não batia com o quadro 3:4, sobrava uma faixa lisa na cor da página —
   agora essa faixa é preenchida pela própria foto borrada, sem corte errado e
   sem tarja feia. */
.stitch-product-image img { position:absolute; inset:0; width:100%; height:100%; transition:transform .7s ease; }
.stitch-product-image-bg { object-fit:cover; filter:blur(24px) brightness(.92); transform:scale(1.15); }
.stitch-product-image-fg { object-fit:contain; }
.stitch-product-fallback { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#8f887f; font-family:Fraunces,serif; font-size:22px; letter-spacing:.22em; }
.stitch-product-card:hover img { transform:scale(1.035); }
.stitch-product-buy { position:absolute; right:0; bottom:0; left:0; padding:14px; transform:translateY(100%); background:#D8DC77; color:#2A2718; text-align:center; font-size:9px; font-weight:700; letter-spacing:.16em; transition:transform .25s ease; }
.stitch-product-card:hover .stitch-product-buy { transform:translateY(0); }
.public-store-wrapper .stitch-product-buy.stitch-product-buy { color:#2A2718 !important; }
.stitch-product-card strong { display:block; margin:15px 0 5px; overflow:hidden; font-size:13px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.stitch-product-card>span:last-child { font-size:13px; font-weight:600; }
/* O filete entre os dois lados é o fundo da grade aparecendo na fresta de 1px. Um
   truque só, e ele desenha as duas orientações: vertical no desktop (lado a lado) e
   horizontal no celular (empilhados), sem media query. Se um dos lados estiver
   desativado sobra um filho só, e sem fresta não sobra linha solta.
   Existe porque as artes do par são estúdio claro: empilhadas no celular, o chão de
   uma encostava na parede da outra e a emenda sumia - virava uma foto comprida com
   dois títulos. O tom é o #2A2718 da marca (barra de avisos, botões), não preto:
   preto não existe nesta paleta e leria como borda de tabela. */
.stitch-editorial-pair { display:grid; grid-template-columns:1fr 1fr; gap:1px; }
/* O prefixo do wrapper + `section` + !important não é capricho: index.css pinta
   `background:#fff !important` em toda section da loja, e sem isso a fresta saía
   branca - some contra foto clara, que é justamente o que ela veio resolver.
   Mesma receita da .stitch-benefits logo acima. */
.public-store-wrapper section.stitch-editorial-pair { background:#2A2718 !important; }
/* 6:5 dá os mesmos 600px de altura que a medida fixa anterior numa tela de 1440,
   mas agora acompanha a largura em vez de esticar ou achatar a foto. */
/* Cada lado é uma div clicável, não um <button>: o botão da campanha fica dentro
   dela, e botão dentro de botão é HTML inválido. Sem véu escuro por cima da foto -
   ele existia para o título branco em HTML, que agora vem dentro da arte. */
.stitch-editorial-pair>div { position:relative; aspect-ratio:6/5; overflow:hidden; cursor:pointer; }
/* O zoom do hover pega a foto E o botão juntos: o texto da campanha vive dentro da
   arte, então escalar só a imagem afastava a manchete do botão. */
/* Meio segundo, não 1,3s: o botão viaja junto com a foto, e num zoom lento ele
   ainda estava se deslocando na diagonal quando o dedo chegava pra clicar. */
.stitch-editorial-pair .stitch-pair-zoom { position:absolute; inset:0; transition:transform .5s ease; }
.stitch-editorial-pair>div:hover .stitch-pair-zoom { transform:scale(1.05); }
/* Mesmo 2:1 do carrossel: a imagem já traz o texto da campanha, então o quadro
   segue a proporção dela e o botão é posicionado por cima (--cta-*). */
.stitch-season { position:relative; aspect-ratio:2/1; overflow:hidden; cursor:pointer; }
/* Mesmo leve zoom no hover que o carrossel e o banner duplo já tinham — só
   este (banner simples, "Óleos e essenciais" etc.) ainda não tinha. */
.stitch-season img { transition:transform .5s ease; }
.stitch-season:hover img { transform:scale(1.05); }
.stitch-discovery { background:var(--bone); }
.stitch-help { display:flex; align-items:center; justify-content:space-between; gap:36px; padding:72px max(24px,5vw); background:var(--bone); border-top:1px solid #DCDDD0; }
.stitch-help p { margin:0; color:#5F6552; font-size:17px; }
.public-store-wrapper .stitch-help button,.public-store-wrapper .stitch-help a { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:16px 34px; border:1px solid #D8DC77 !important; background:#D8DC77 !important; color:#2A2718 !important; font-size:10px; font-weight:700; letter-spacing:.16em; text-decoration:none; }
.public-store-wrapper .stitch-help button:disabled { cursor:not-allowed; opacity:.58 !important; }
.public-store-wrapper .editorial-whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:90; display:flex; min-height:52px; align-items:center; justify-content:center; gap:9px; padding:0 18px; border:1px solid rgba(255,255,255,.22) !important; border-radius:999px !important; background:#2A2718 !important; color:#D8DC77 !important; box-shadow:0 12px 34px rgba(51,37,31,.28) !important; font-size:10px; font-weight:700; letter-spacing:.08em; text-decoration:none; }
.public-store-wrapper .editorial-whatsapp-float svg { width:21px; height:21px; color:#b7c3a9; stroke-width:1.7; }
.public-store-wrapper .editorial-whatsapp-float span { color:#D8DC77 !important; opacity:1 !important; }
.public-store-wrapper .editorial-whatsapp-float.is-pending { opacity:.72 !important; cursor:not-allowed; }

@media(max-width:800px){
  .editorial-layout-header { min-height:64px; padding:15px 18px !important; gap:12px; }
  .editorial-layout-header h1 { position:static; flex:1; transform:none; font-size:20px !important; letter-spacing:.16em !important; }
  .editorial-layout-header>div { flex:0 0 auto; gap:10px !important; }
  .editorial-layout-header>div>div { gap:13px !important; }
  .editorial-layout-header .nav-link { font-size:10px !important; letter-spacing:.08em !important; white-space:nowrap; }
  .editorial-layout-nav { display:none !important; }
  .editorial-layout-footer { padding:48px 20px 26px !important; }
  .editorial-layout-footer>div:first-child { grid-template-columns:1fr !important; gap:30px !important; }
  .editorial-layout-footer>div:last-child { align-items:flex-start !important; flex-direction:column !important; gap:10px !important; }
  /* No celular entra a imagem em pé (o <picture> troca a foto) e o quadro segue a
     proporção dela; a posição do botão também é a que foi marcada na aba Celular. */
  .stitch-hero-carousel { aspect-ratio:4/5; }
  .stitch-hero-cta { left:var(--cta-x-mobile,50%); top:var(--cta-y-mobile,78%); font-size:calc(12px * var(--cta-scale-mobile,1)); }
  /* Título: mesma ideia do botão logo acima, com UMA diferença que importa. A
     posição cai na do desktop quando não há uma marcada pro celular (a conta é
     em % do quadro, atravessa bem os dois formatos), mas o TAMANHO não: o
     fallback aqui é o `clamp` automático, não `var(--titulo-tamanho)`. Um
     título de 47px escolhido na prévia de 1440px vira cinco linhas numa tela
     de 390px — passa por cima do botão e é cortado pela borda do banner, que
     tem overflow:hidden. Quem quiser um número fixo no telefone marca na aba
     Celular do painel, e aí vem `--titulo-tamanho-mobile`. */
  .stitch-hero-title { left:var(--titulo-x-mobile,50%); top:var(--titulo-y-mobile,38%); font-size:var(--titulo-tamanho-mobile, clamp(26px,4vw,52px)); }
  /* Área de toque de 44px, invisível, centrada no botão. Ver a explicação longa
     junto da regra do .stitch-hero-cta lá em cima. */
  .stitch-hero-cta::after { content:''; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); }
  /* scroll-behavior:auto é requisito da faixa sem fim, não capricho: o laço volta
     uma cópia inteira mexendo no scrollLeft, e isso precisa ser instantâneo. Se a
     faixa herdasse rolagem suave, o pulo viraria um deslize visível e a ilusão
     acabava. Hoje o `scroll-behavior:smooth` do index.css está no html e essa
     propriedade não é herdada - mas fica declarado aqui para não depender disso. */
  .stitch-category-rail { justify-content:flex-start; padding:34px 20px; gap:20px; scroll-behavior:auto; }
  .stitch-category-rail button>span { width:76px; height:76px; }
  .stitch-category-rail b { margin-top:10px; font-size:9px; }
  .public-store-wrapper section.stitch-benefits { grid-template-columns:1fr 1fr; gap:8px; padding:10px !important; }
  .public-store-wrapper .stitch-benefits div { padding:17px 12px; }
  .stitch-benefits svg { flex-basis:18px; width:18px; }
  .public-store-wrapper .stitch-benefits b { font-size:8px; line-height:1.35; }
  .public-store-wrapper .stitch-benefits small { font-size:9px; }
  .stitch-products { padding:54px 16px; }
  .stitch-products header { margin-bottom:32px; }
  .stitch-products h2,.stitch-help h2 { font-size:30px; }
  .stitch-products header p { padding:0 12px; font-size:13px; }
  .stitch-products-grid { grid-template-columns:1fr 1fr; gap:30px 10px; }
  .stitch-product-buy { display:none; }
  .stitch-product-card strong { margin-top:11px; font-size:11px; }
  .stitch-product-card>span:last-child { font-size:12px; }
  /* Uma coluna só: cada quadro passa a ocupar a largura inteira, então a
     proporção muda junto (9:10 mantém a altura que a medida fixa dava). */
  .stitch-editorial-pair { grid-template-columns:1fr; }
  .stitch-editorial-pair>div { aspect-ratio:9/10; }
  .stitch-season { aspect-ratio:3/4; }
  .stitch-help { align-items:flex-start; flex-direction:column; gap:28px; padding:48px 20px; }
  .stitch-help p { font-size:15px; line-height:1.5; }
  .public-store-wrapper .editorial-whatsapp-float { right:14px; bottom:14px; width:52px; min-height:52px; padding:0; }
  /* Na página de produto a bolha sobe acima da barra fixa de compra.
     Sem isto ela cobria 46px do "COMPRAR AGORA" - 26% da largura do botão - e,
     por ter empilhamento maior (z-index 90 contra 20 da barra), ficava com o
     toque: quem mirava no lado direito do botão, que é o lado natural de quem
     segura o telefone na direita, abria o WhatsApp em vez de comprar. Silencioso
     e em toda PDP, trocando venda por conversa.
     80px é a altura da barra (12 de respiro + 56 do botão + 12), mais os mesmos
     14px de margem da bolha. env(safe-area-inset-bottom) cobre a faixa do gesto
     nos iPhones sem botão físico. */
  .public-store-wrapper .editorial-whatsapp-float.acima-da-barra { bottom:94px; }
  /* Linha separada de propósito, e não dentro do calc() acima: se env() não for
     entendido, a declaração inteira é descartada - e como ela era a única da
     regra, a regra some do CSSOM e a bolha volta para cima do botão. Assim a de
     94px fica valendo como reserva e esta só melhora onde funciona. */
  .public-store-wrapper .editorial-whatsapp-float.acima-da-barra { bottom:calc(94px + env(safe-area-inset-bottom, 0px)); }
  .public-store-wrapper .editorial-whatsapp-float span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

@media(max-width:480px){
  .editorial-layout-header { padding-right:14px !important; padding-left:14px !important; }
  .editorial-layout-header h1 { font-size:18px !important; }
  .editorial-layout-header .nav-link { font-size:9px !important; }
  .stitch-category-rail { padding-right:16px; padding-left:16px; }
  .stitch-category-rail button>span { width:72px; height:72px; }
  .stitch-products { padding-right:14px; padding-left:14px; }
}

@media(max-width:800px){
  .editorial-announcement-track { animation-duration:60s; }
  .stitch-brand-marquee-track { animation-duration:75s; }
}

@media(prefers-reduced-motion:reduce){
  .editorial-announcement-track { transform:none !important; animation:none !important; }
  .stitch-brand-marquee-track { transform:none !important; animation:none !important; }
  .stitch-hero-slide,.stitch-product-image img,.stitch-editorial-pair .stitch-pair-zoom,.stitch-season img { transition:none !important; animation:none !important; transform:none !important; }
  /* Sem isto, a transição 'slide' (que despila os banners lado a lado em vez
     de empilhar) ficaria com `transform:none` mas `opacity:1` em todos ao
     mesmo tempo — todos visíveis, um em cima do outro. Aqui ela volta a se
     comportar como o fade: só o ativo aparece, sem deslizar nem dissolver. */
  .stitch-hero-carousel.transicao-slide .stitch-hero-slide { opacity:0; visibility:hidden; }
  .stitch-hero-carousel.transicao-slide .stitch-hero-slide.is-active { opacity:1; visibility:visible; }
}

/* Banner sem imagem — o estado inicial da loja, antes de subirem os banners
   pelo painel. Fundo musgo com o texto do slide em broto: é o par de maior
   contraste da marca (10,2:1) e a primeira coisa que a cliente vê. Ver MARCA.md. */
.stitch-hero-vazio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px 24px; text-align: center;
  background: #4F5D28;
}
.public-store-wrapper .stitch-hero-vazio span {
  color: #9BA089 !important;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.public-store-wrapper .stitch-hero-vazio strong {
  color: #D8DC77 !important;
  font-family: Fraunces, Georgia, serif;
  font-weight: 400; font-size: clamp(28px, 4.4vw, 54px); line-height: 1.06;
  letter-spacing: -.01em; max-width: 16ch; text-wrap: balance;
}
.public-store-wrapper .stitch-hero-vazio em {
  color: #BFC3AE !important;
  font-style: normal; font-size: clamp(14px, 1.5vw, 18px); max-width: 42ch;
}

/* Bloco de banner sem imagem, mesma ideia do banner do topo. */
.stitch-bloco-vazio {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px 22px; text-align: center;
  background: #3B4620;
}
.public-store-wrapper .stitch-bloco-vazio strong {
  color: #D8DC77 !important;
  font-family: Fraunces, Georgia, serif;
  font-weight: 400; font-size: clamp(22px, 3vw, 38px); line-height: 1.1; max-width: 16ch;
}
.public-store-wrapper .stitch-bloco-vazio em {
  color: #BFC3AE !important; font-style: normal; font-size: 14px; max-width: 34ch;
}

/* Categoria sem foto: a inicial dela sobre o musgo. Lê-se como "falta subir a
   imagem" — que é a verdade — em vez de fingir arte com foto de outra marca. */
.public-store-wrapper .stitch-categoria-vazia {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: #4F5D28; color: #D8DC77 !important;
  font-family: Fraunces, Georgia, serif; font-style: normal;
  font-size: clamp(28px, 5vw, 44px); line-height: 1;
}