@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;700&display=swap');

.editorial-layout { font-family: 'Hanken Grotesk', 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:'Libre Caslon Text',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:#33251f !important; color:#f8f1e8 !important; }
.public-store-wrapper .editorial-announcement-bar div { background:#33251f !important; color:#f8f1e8 !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:#f8f1e8 !important; font-size:9px; font-weight:600; letter-spacing:.18em; opacity:1 !important; }
.editorial-announcement-group i { color:#8d877f; 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:#111 !important; background-color:#111 !important; color:#fff !important; }
.public-store-wrapper footer.editorial-layout-footer div { background-color:#111 !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:#17130f; --bone:#f4f1eb; color:var(--ink); background:#fff; font-family:'Hanken Grotesk',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:#d9d2c9; }
.stitch-hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; cursor:pointer; 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%; }
.stitch-hero-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.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: o preenchimento e o espaçamento das letras
   são medidos em em, então mexer só na fonte redimensiona o botão inteiro sem
   deformar - é o que a alça de arrasto do painel controla. */
.stitch-hero-cta { position:absolute; z-index:2; left:var(--cta-x,50%); top:var(--cta-y,78%); transform:translate(-50%,-50%); padding:1.6em 3.8em; border:1px solid transparent; font-size:calc(10px * 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 o botão fica parado e a
   resposta ao toque vem do brilho. Precisa do prefixo do wrapper para ganhar da
   regra global na especificidade. */
/* Alvo de toque de 44px SEM mexer no tamanho do botão.
   O tamanho visual é escolhido no painel, banner a banner (hoje 43%, 65% e 62%),
   e é decisão de direção de arte - já existiu um piso de escala aqui e foi
   removido de propósito, porque ele inflava o botão e desmentia a prévia.
   Então quem cresce é só a área de clique: este pseudo-elemento é invisível,
   fica centrado no botão e nunca encolhe abaixo de 44px, que é o alvo que o dedo
   acerta sem mirar. O botão continua desenhado exatamente como a Ana configurou.
   Vale lembrar que o banner inteiro também é clicável - isto aqui conserta o
   caso de quem mira no botão, que é o que a pessoa naturalmente faz.
   A regra em si mora no bloco de celular lá embaixo: no desktop o botão já sai
   com 44px de altura na escala padrão, e ali a área extra teria efeito colateral -
   o carrossel pausa quando o ponteiro entra no botão, e passaria a pausar com o
   mouse ainda fora dele. */
.stitch-hero-cta { transition:filter .12s ease; }
.public-store-wrapper .stitch-hero-cta:active,
.public-store-wrapper .stitch-hero-cta:hover { transform:translate(-50%,-50%); }
.public-store-wrapper .stitch-hero-cta:active { filter:brightness(.82); }
.stitch-hero-cta.is-light { background:#fff; color:#17130f; }
.stitch-hero-cta.is-dark { background:#17130f; color:#fff; }
/* O tema global (public/index.css) força texto preto; o botão escuro é de propósito. */
.public-store-wrapper .stitch-hero-cta.is-dark { color:#fff !important; }
.public-store-wrapper section.stitch-brand-marquee { width:100%; overflow:hidden; padding:12px 0 !important; background:#c8aa86 !important; color:#33251f !important; }
.public-store-wrapper .stitch-brand-marquee div { background:#c8aa86 !important; color:#33251f !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:#33251f !important; font-size:9px; font-weight:700; letter-spacing:.2em; opacity:1 !important; }
.stitch-brand-marquee-group i { color:#765b49; font-size:10px; font-style:normal; }
@keyframes stitch-brand-scroll { to { transform:translateX(-50%); } }
.stitch-category-rail { display:flex; justify-content:space-between; gap:32px; padding:48px max(24px,5vw); overflow-x:auto; scrollbar-width:none; }
.stitch-category-rail::-webkit-scrollbar { display:none; }
.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; overflow:hidden; border:1px solid transparent; border-radius:50%; }
.stitch-category-rail button:hover>span { border-color:#17130f; }
.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 #e5ded4; color:#17130f; 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:#f4f1eb; }
.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:#eee5d9 !important; }
.public-store-wrapper .stitch-benefits div { display:flex; min-width:0; align-items:flex-start; gap:13px; padding:22px 18px; background:#f8f4ee !important; color:#33251f !important; }
.stitch-benefits svg { flex:0 0 21px; width:21px; margin-top:2px; color:#8d6c52; stroke-width:1.35; }
.stitch-benefits span { display:flex; min-width:0; flex-direction:column; gap:6px; }
.public-store-wrapper .stitch-benefits b { color:#33251f !important; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.public-store-wrapper .stitch-benefits small { color:#76685e !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:'Libre Caslon Text',serif; font-size:36px; font-weight:400; }
.stitch-products header p { margin:0 auto 15px; max-width:480px; color:#6d675f; }
.stitch-products header i { display:block; width:48px; height:1px; margin:auto; background:#17130f; }
.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); }
.stitch-product-image img { width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.stitch-product-fallback { display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#8f887f; font-family:'Libre Caslon Text',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:#17130f; color:#fff; 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:#ffffff !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 #33251f 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:#33251f !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; }
.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 #e2ddd5; }
.stitch-help p { margin:0; color:#6d675f; 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 #33251f !important; background:#33251f !important; color:#f8f1e8 !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:#33251f !important; color:#f8f1e8 !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:#f8f1e8 !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%); padding:1.5em 2.6em; font-size:calc(10px * var(--cta-scale-mobile,1)); }
  /* Á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 { transition:none !important; animation:none !important; transform:none !important; }
}