/*
Theme Name: STYLEE
Theme URI: https://stylee.com.br
Description: Tema da STYLEE. Independente — sem tema pai. A loja usa os templates do proprio WooCommerce, envolvidos por woocommerce.php.
Author: STYLEE
Version: 2.0.0
Text Domain: stylee
*/


/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --preto:#0a0a0a;
  --tinta:#161616;
  --rosa:#bf2a59;
  --areia:#f7f5f2;
  --cinza:#8a8580;
  --linha:rgba(0,0,0,.08);
  --header-h:104px;
  --display:'Playfair Display',Georgia,serif;
  --ui:'Jost',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

html{
  /* A COR FICA AQUI, não só no body (10/08/2026).
     Com `overflow-x:hidden` no body, o Chrome no Windows deixa de usar a cor dele para
     pintar a "tela" do navegador. Quem rola rápido chega a uma faixa ainda não pintada e
     vê o preenchimento padrão do compositor — PRETO. É a piscada preta de página inteira
     que o André via só no computador, só na rolagem rápida, e que sumia depois que tudo
     estava em cache. Declarar o fundo no elemento raiz tira o preto do caminho. */
  background:#fff;
  scroll-behavior:smooth;
  /* Reserva o espaço da barra de rolagem SEMPRE. Sem isto, páginas curtas (sem barra)
     ficam ~15px mais largas que as longas, e todo o conteúdo centralizado — logo e
     menu inclusive — se desloca ao navegar. (05/08/2026) */
  scrollbar-gutter:stable;
}
body{
  font-family:var(--ui);
  font-weight:400;
  color:var(--tinta);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.stylee-menu-aberto{overflow:hidden}

h1,h2,h3,.wp-block-heading{font-family:var(--display);font-weight:500;letter-spacing:-.01em;color:var(--preto)}
p{line-height:1.75}
a{text-decoration:none}
/* O Android pinta um retângulo azul atrás de qualquer elemento tocável. Some com ele
   em tudo — o realce de foco por teclado continua, definido caso a caso. */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */
/* SEM backdrop-filter aqui, e o motivo é concreto (09/08/2026, André).
   O cabeçalho é `fixed` e cobre a largura toda. Com `backdrop-filter`, TODA repintura
   da página obriga o navegador a recompor o que está atrás dele — e no Windows/Chrome
   isso pisca PRETO em tela cheia. Bastava passar o mouse entre duas miniaturas de cor
   ou sobre o botão de comprar. O mesmo efeito estragava os prints: a página saía escura
   e lavada, o que parecia "proteção de conteúdo" e não era — era a camada de GPU não
   sendo capturada.
   E o desfoque nem aparecia: o fundo abaixo é `rgba(10,10,10,.94)`, 94% opaco. Custo
   alto, benefício zero. Transicionar `backdrop-filter` então é o pior dos mundos. */
/* z-index 10001 e não 900 (10/08/2026): o chat da LIA se planta em 9999, e o menu do
   celular precisa passar por cima dele (pedido do André — menu aberto é tela exclusiva).
   Só que o cabeçalho tem de continuar ACIMA do menu: é lá que mora o "X" que fecha. */
.stylee-header{
  position:fixed;inset:0 0 auto;z-index:10001;
  transition:background .5s var(--ease),box-shadow .5s var(--ease);
}
.stylee-header__inner{
  max-width:1320px;margin:0 auto;
  height:var(--header-h);
  padding:0 clamp(16px,4vw,44px);
  display:flex;align-items:center;gap:32px;
}
.stylee-header__logo{flex:0 0 auto;display:block}
.stylee-header__logo img{
  height:46px;width:auto;display:block;
  transition:height .4s var(--ease),filter .4s var(--ease);
}

/* Transparente sobre o vídeo; sólido ao rolar ou nas páginas internas. */
.stylee-header.is-solid,
.stylee-header.is-scrolled{
  background:rgba(10,10,10,.94);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
/* A logo NÃO muda de cor nem de tamanho entre páginas. Antes o header sólido era
   branco e a logo era invertida para preto — o resultado é que cada página parecia
   ter um cabeçalho diferente. Fundo escuro em todo lugar resolve: uma logo só. */

/* ── Navegação ── */
.stylee-nav{margin-left:auto}
.stylee-nav__list{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);list-style:none;margin:0;padding:0}
.stylee-nav__list a{
  position:relative;display:block;padding:6px 0;
  font-size:13px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;transition:color .3s var(--ease),opacity .3s var(--ease);
}


/* Sublinhado que cresce do centro — o detalhe que faz o menu parecer vivo. */
.stylee-nav__list a::after{
  content:"";position:absolute;left:50%;bottom:0;height:1px;width:0;
  background:var(--rosa);transition:width .45s var(--ease),left .45s var(--ease);
}
.stylee-nav__list a:hover::after,
.stylee-nav__list .current-menu-item>a::after{width:100%;left:0}
.stylee-nav__list .current-menu-item>a{color:var(--rosa)!important}

/* ── Ícones ── */
.stylee-header__acoes{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.stylee-icone{
  position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.stylee-icone svg{width:21px;height:21px;fill:#fff;transition:fill .3s var(--ease)}

.stylee-icone:hover{background:rgba(191,42,89,.14);transform:translateY(-2px)}
.stylee-icone:hover svg{fill:var(--rosa)!important}
.stylee-carrinho__n{
  position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--rosa);color:#fff;font-size:10px;font-weight:600;line-height:1;
}

/* ── Hambúrguer que vira X ── */
.stylee-burger{
  display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
  position:relative;padding:0;
  -webkit-tap-highlight-color:transparent;   /* o quadrado azul do Android ao tocar */
  outline:none;appearance:none;
}
.stylee-burger:focus{outline:none}
.stylee-burger:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
.stylee-burger span{
  position:absolute;left:9px;width:24px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .45s var(--ease),opacity .3s var(--ease),background .3s var(--ease);
}
.stylee-burger span:nth-child(1){top:14px}
.stylee-burger span:nth-child(2){top:20px}
.stylee-burger span:nth-child(3){top:26px}

body.stylee-menu-aberto .stylee-burger span{background:#fff!important}
body.stylee-menu-aberto .stylee-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.stylee-menu-aberto .stylee-burger span:nth-child(2){opacity:0;transform:scaleX(0)}
body.stylee-menu-aberto .stylee-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ══════════════════════════════════════════════════════════════════════════
   MENU MOBILE — sobreposição inteira, itens entrando escalonados
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-drawer{
  position:fixed;inset:0;z-index:10000;
  visibility:hidden;pointer-events:none;
  /* visibility NÃO transiciona — vira hidden no mesmo instante. Sem este atraso,
     fechar o menu apagava tudo antes de o círculo encolher: a animação existia mas
     ninguém via. O atraso segura o menu visível pelos 0,8s da retração. Abrir usa
     0s (regra abaixo), senão o menu demoraria a aparecer. (05/08/2026) */
}
/* A TRANSIÇÃO SÓ DEPOIS QUE A PÁGINA ASSENTA (15/08/2026).
   Terceira ocorrência do mesmo padrão — depois do chat e do mega-menu. Aqui o atraso de
   0,8s no `visibility` é NECESSÁRIO: é ele que segura a cortina visível enquanto o
   círculo se retrai, a animação de saída que o André pediu. Só que, no primeiro cálculo
   de estilo do elemento, a transição roda sozinha e mantém um retângulo preto de tela
   cheia VISÍVEL por 0,8s — a piscada do "menu".
   Com a classe `stylee-pronto` (posta pelo JS depois do load), a transição não existe no
   primeiro cálculo e passa a existir do segundo em diante: nada pisca, e fechar continua
   animado. */
html.stylee-pronto .stylee-drawer{transition:visibility 0s linear .8s}
/* ESTE ERA O PISCA-PRETO (09/08/2026, André).
   É um retângulo PRETO SÓLIDO do tamanho da tela inteira, escondido só por
   `visibility` — e animado com `clip-path`. Animar clip-path promove o elemento a uma
   camada de GPU PERMANENTE, e `visibility:hidden` não tira essa camada do compositor:
   ela continua sendo rasterizada. Ao rolar a página, o navegador recompõe a camada e o
   preto aparece por um quadro em cima de tudo. Era a cortina do menu do CELULAR
   piscando numa tela onde o menu nem existe.
   Conserto em duas frentes: `opacity:0` enquanto fechado (camada que não pinta nada) e
   a cortina inteira fora do DOM visual no computador, onde o hambúrguer nem aparece. */
.stylee-drawer__fundo{
  position:absolute;inset:0;background:var(--preto);
  /* A barra de endereço do celular ENCOLHE quando se rola, e a tela visível cresce
     junto — mas um elemento presilhado em `inset:0` não cresce com ela. Sobrava uma
     faixa embaixo com o site aparecendo por trás do menu (André, 10/08/2026).
     `100lvh` é a altura da tela COM a barra recolhida, ou seja, a maior que ela pode
     ter: o preto passa a cobrir os dois estados. Com `top:0` e altura definida, o
     `bottom:0` do `inset` é ignorado — e é isso que queremos.
     Navegador que não conhece `lvh` simplesmente ignora a linha e fica como estava. */
  height:100lvh;min-height:100%;
  clip-path:circle(0% at calc(100% - 42px) 44px);
  opacity:0;
  transition:clip-path .8s var(--ease),opacity .25s linear .55s;
}
body.stylee-menu-aberto .stylee-drawer__fundo{opacity:1;transition:clip-path .8s var(--ease),opacity 0s}
body.stylee-menu-aberto .stylee-drawer{visibility:visible;pointer-events:auto;transition:visibility 0s linear 0s}
body.stylee-menu-aberto .stylee-drawer__fundo{clip-path:circle(150% at calc(100% - 42px) 44px)}

.stylee-drawer__nav{
  position:relative;height:100%;
  display:flex;flex-direction:column;
  /* `safe center`, e não `center` puro: quando o conteúdo passa da altura da tela, o
     `center` empurra o topo para FORA do começo da rolagem — o primeiro item some e
     não tem como chegar nele. O `safe` desiste de centralizar nesse caso e alinha no
     início, que é o comportamento que ninguém percebe porque é o certo. */
  justify-content:safe center;
  padding:calc(var(--header-h) + 24px) clamp(28px,8vw,64px) 48px;
  overflow-y:auto;                    /* se não couber, rola — nunca some */
  -webkit-overflow-scrolling:touch;
}
.stylee-drawer__list{list-style:none;margin:0;padding:0}
.stylee-drawer__list li{overflow:hidden}
.stylee-drawer__list a{
  display:block;padding:.28em 0;
  transition-delay:0s;   /* fechando é imediato; abrindo, escalonado (regras abaixo) */
  font-family:var(--display);font-size:clamp(2.1rem,9vw,3.4rem);font-weight:400;
  color:#fff;line-height:1.15;
  transform:translateY(110%);opacity:0;
  transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s ease;
}
body.stylee-menu-aberto .stylee-drawer__list a{transform:translateY(0);opacity:1}
/* Escalonamento: cada item entra um pouco depois do anterior. */
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(1) a{transition-delay:.18s}
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(2) a{transition-delay:.25s}
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(3) a{transition-delay:.32s}
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(4) a{transition-delay:.39s}
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(5) a{transition-delay:.46s}
body.stylee-menu-aberto .stylee-drawer__list li:nth-child(6) a{transition-delay:.53s}
.stylee-drawer__list a:hover{color:var(--rosa)}

.stylee-drawer__rodape{
  margin-top:auto;padding-top:34px;display:flex;flex-direction:column;gap:10px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease) .55s,transform .6s var(--ease) .55s;
}
body.stylee-menu-aberto .stylee-drawer__rodape{opacity:1;transform:none}
.stylee-drawer__rodape a{
  color:var(--cinza);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s ease;
}
.stylee-drawer__rodape a:hover{color:#fff}

@media (max-width:900px){
  .stylee-nav{display:none}
  .stylee-burger{display:block}
  :root{--header-h:78px}
  /* Quem empurrava os ícones para a direita era o menu (margin-left:auto). Sem ele,
     tudo se amontoava junto à logo. */
  .stylee-header__acoes{margin-left:auto;gap:6px}
  .stylee-header__inner{gap:12px;padding:0 16px}
  .stylee-header__logo img{height:34px}
  
  .stylee-icone{width:38px;height:38px}
  .stylee-icone svg{width:19px;height:19px}
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO com vídeo
   ══════════════════════════════════════════════════════════════════════════ */
/* O container recebe a PROPORÇÃO do vídeo (o JS lê e aplica; 16/9 até carregar).
   Assim a altura acompanha a largura — girar o celular reajusta sozinho — e o vídeo
   continua absoluto, que é como o bloco Capa espera. Tirá-lo do fluxo fazia o bloco
   colapsar e o vídeo sumia. Vale para qualquer vídeo futuro, inclusive vertical. */
.stylee-hero{
  position:relative;display:block;
  aspect-ratio:var(--hero-ar, 16/9);min-height:0;height:auto;
  overflow:hidden;background:var(--preto);
  padding:0!important;
}
.stylee-hero video,.stylee-hero__midia{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  z-index:0;
  /* O vídeo é cenário, não conteúdo para assistir: o toque atravessa em vez de
     "segurar" nele, e o navegador do celular para de tratá-lo como player (a barra
     de tela cheia / janela flutuante do Samsung Internet). */
  pointer-events:none;
}
/* Segundo banner (com áudio): mesma moldura do primeiro, empilhado por cima. A troca é
   só de opacidade e SEM transition — dois banners com tipografia própria em fusão
   viram borrão ilegível. Fica invisível até o JS entregar a vez a ele. */
.stylee-hero__b2{opacity:0;z-index:0}
.stylee-hero--b2 .stylee-hero__b2{opacity:1;z-index:2}
.stylee-hero--b2 .wp-block-cover__video-background{opacity:0}

/* Alto-falante do banner: liga e desliga o som.
   À ESQUERDA de propósito — o canto inferior direito é do avatar da LIA, e os dois
   ficavam empilhados um sobre o outro.
   Discreto por padrão (opacidade baixa, vidro escuro) e firme ao passar o mouse: é um
   controle, não uma chamada para ação. O banner tem tipografia própria e não pode
   competir com um botão gritando no canto. */
.stylee-hero__som{
  position:absolute;left:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:3;
  width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  color:#fff;background:rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  opacity:.6;transition:opacity .25s ease,background .25s ease,transform .25s ease;
}
.stylee-hero__som:hover{opacity:1;background:rgba(0,0,0,.52);transform:translateY(-1px)}
/* Mudo chama um pouco mais de atenção que ligado: aí há algo a ganhar clicando. */
.stylee-hero__som.is-mudo{opacity:.8}
.stylee-hero__som svg{width:18px;height:18px;display:block;fill:currentColor}
.stylee-hero__som:focus-visible{outline:2px solid #fff;outline-offset:3px;opacity:1}
.stylee-hero__som[hidden]{display:none}

/* O MINI PLAYER (15/10/2026, André: «discreto e sutil, linhas finas no contorno e botões para troca de
   faixas»). Uma moldura de 1 px em volta do botão de som de sempre, com faixa anterior e próxima dos lados, o
   nome da faixa (só em tela larga, no rótulo da casa) e um fio de progresso no pé. Mais apagado em repouso;
   acende quando o mouse ou o foco chegam. Canto reto, como o resto do site. */
.stylee-hero__player{
  position:absolute;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:5;
  display:flex;align-items:center;height:40px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(16,16,16,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;opacity:.8;transition:opacity .3s ease,border-color .3s ease;
}
/* A moldura NÃO acende (15/10, André: «prefiro o contorno do player como estava antes, bem sutil»): com o mouse
   em cima o player fica opaco, e a borda desce na mesma conta para continuar no tom de repouso (.42 × .8). */
.stylee-hero__player:hover,.stylee-hero__player:focus-within{opacity:1;border-color:rgba(255,255,255,.34)}
.stylee-hero__player .stylee-hero__som,
.stylee-hero__faixa{
  position:static!important;width:38px!important;height:38px!important;margin:0!important;padding:0;
  border:0!important;background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transform:none!important;opacity:.82!important;
  display:grid;place-items:center;color:#fff;cursor:pointer;transition:opacity .2s ease;
}
.stylee-hero__player .stylee-hero__som:hover,.stylee-hero__faixa:hover{opacity:1!important}
.stylee-hero__player .stylee-hero__som svg{width:17px;height:17px}
.stylee-hero__faixa svg{width:14px;height:14px;display:block;fill:currentColor}
/* Foco: a Início pinta um contorno rosa de 3 px em todo botão focado (design.css + paleta) — no player ele
   ficava preso no botão depois do clique (André, 15/10). Aqui o foco é um fio branco fino por dentro, só para
   quem navega pelo teclado; o clique com mouse solta o foco (stylee.js). */
body .sx-home .stylee-hero__player button:focus,
.stylee-hero__player button:focus{outline:none!important}
body .sx-home .stylee-hero__player button:focus-visible,
.stylee-hero__player button:focus-visible{outline:1px solid #fff!important;outline-offset:-6px!important}
/* O toque: um quadrado de fio que nasce dentro do botão, cresce até a borda e some (≈0,45 s); o ícone
   afunda de leve e volta. O elemento é criado e apagado pelo stylee.js a cada clique. */
.stylee-hero__toque{position:absolute;top:0;height:100%;box-sizing:border-box;pointer-events:none;
  border:1px solid rgba(255,255,255,.85);animation:styleeToque .45s cubic-bezier(.16,1,.3,1) forwards}
@keyframes styleeToque{from{transform:scale(.45);opacity:.9}to{transform:scale(1);opacity:0}}
.stylee-hero__player button.is-tocado svg{animation:styleeAfunda .3s ease-out}
@keyframes styleeAfunda{0%{transform:scale(1)}35%{transform:scale(.82)}100%{transform:scale(1)}}
/* O NOME VEM PRIMEIRO, À ESQUERDA (15/10, André: «botões fixos e auto ajuste da área do nome»): o player é preso
   pela direita, então os botões ficam no canto e é a área do nome que cresce ou encolhe para caber o título
   inteiro — sem corte. A troca de largura é animada pelo script (a moldura não salta quando a faixa muda). */
.stylee-hero__titulo{
  box-sizing:border-box;height:20px;margin-right:4px;padding:0 14px 0 16px;border-right:1px solid rgba(255,255,255,.3);
  font:500 12px/20px var(--ui);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;color:rgba(255,255,255,.9);transition:width .45s var(--ease,cubic-bezier(.16,1,.3,1));
}
.stylee-hero__titulo:empty{display:none}
.stylee-hero__progresso{
  position:absolute;left:-1px;right:-1px;bottom:-1px;height:1px;background:#fff;
  transform-origin:left center;transform:scaleX(0);transition:transform .25s linear;
}
/* NA LINHA DO «CONTINUE DESCOBRINDO» (15/10, André: «posicionar mais abaixo, alinhado com Continue
   descobrindo»): o centro do player no centro daquela linha (design.css: 44 px de altura, a 28 px do pé no
   computador e a 14 px no celular) — medido no ensaio. A borda direita espelha a esquerda da linha. */
body.stylee-design.home .sx-opening .stylee-hero__player{right:max(5.3%,calc((100vw - 1780px)/2));bottom:calc(28px + (44px - 40px) / 2)}
@media (max-width:767px){
  body.stylee-design.home .sx-opening .stylee-hero__player{right:22px;bottom:calc(14px + (44px - 40px) / 2)}
  .stylee-hero__titulo{display:none}
}
@media (orientation:landscape) and (max-height:550px) and (max-width:1200px){
  body.stylee-design.home .sx-opening .stylee-hero__player{right:22px;bottom:20px}
}
@media (prefers-reduced-motion:reduce){.stylee-hero__progresso{transition:none}}

/* Sem degradê nem escurecimento: existiam para o texto ler por cima, e o texto saiu
   daqui (o vídeo já traz tipografia própria — as duas competiam). */
.stylee-hero .wp-block-cover__background,
.stylee-hero .wp-block-cover__gradient-background{display:none!important}
/* Véu curto no topo, atrás do cabeçalho. O menu é branco e o vídeo tem quadros
   claros — sem isto ele some. Só a faixa do header, não o vídeo inteiro. */
.stylee-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:190px;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.18) 55%,transparent 100%);
  pointer-events:none;
}
.stylee-hero .wp-block-cover__inner-container{display:none}

.stylee-hero__conteudo{  /* sem uso na home atual: o vídeo já traz o texto */
  position:relative;z-index:2;text-align:center;color:#fff;
  padding:calc(var(--header-h) + 40px) clamp(20px,5vw,40px) 90px;
  max-width:860px;
}
.stylee-hero__selo{
  display:inline-block;margin-bottom:26px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.stylee-hero h1{
  font-family:var(--display);color:#fff;
  font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:1.08;font-weight:400;margin:0 0 22px;
}
.stylee-hero h1 em{font-style:italic;color:#fff}
.stylee-hero__sub{
  font-size:clamp(1rem,2.1vw,1.2rem);line-height:1.7;color:rgba(255,255,255,.86);
  max-width:620px;margin:0 auto 38px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTÕES
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-btn,
.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #respond input#submit{
  display:inline-block;position:relative;overflow:hidden;
  padding:1rem 2.6rem;border:0;border-radius:2px;
  font-family:var(--ui);font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  background:var(--preto);color:#fff;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),transform .3s var(--ease);
}
.stylee-btn:hover,.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--rosa);color:#fff;transform:translateY(-2px)
}
.stylee-btn--claro{background:#fff;color:var(--preto)}
.stylee-btn--claro:hover{background:var(--rosa);color:#fff}
.stylee-btn--vazado{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.stylee-btn--vazado:hover{background:#fff;color:var(--preto);box-shadow:inset 0 0 0 1px #fff}

/* ══════════════════════════════════════════════════════════════════════════
   SEÇÕES
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-secao{padding:clamp(66px,9vw,124px) clamp(20px,5vw,44px)}
.stylee-secao--areia{background:var(--areia)}
.stylee-secao--preta{background:var(--preto);color:#fff}
.stylee-secao--preta h2,.stylee-secao--preta h3{color:#fff}
.stylee-wrap{max-width:1220px;margin:0 auto}
.stylee-wrap--estreito{max-width:760px}

.stylee-eyebrow{
  display:block;margin-bottom:16px;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--rosa);
}
.stylee-titulo{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.2;margin:0 0 18px}
.stylee-lead{font-size:1.06rem;line-height:1.8;color:#4a4642}
.stylee-secao--preta .stylee-lead{color:rgba(255,255,255,.76)}
.stylee-centro{text-align:center}
.stylee-centro .stylee-lead{margin-inline:auto;max-width:680px}

/* Duas colunas com respiro */
.stylee-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(28px,4vw,64px)}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUTOS (WooCommerce)
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(18px,2.6vw,36px);margin:0!important;padding:0!important}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left}
.woocommerce ul.products li.product a img{
  margin:0 0 14px;border-radius:2px;aspect-ratio:1/1;object-fit:cover;
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ui)!important;font-size:14px!important;font-weight:400;line-height:1.5;
  color:var(--tinta);padding:0!important;margin:0 0 6px!important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--ui);font-size:15px!important;font-weight:600;color:var(--preto)!important;
}
.woocommerce ul.products li.product .price del{opacity:.4;font-weight:400;margin-right:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--rosa)!important}
.woocommerce ul.products li.product .button{margin-top:12px;padding:.8rem 1.5rem;font-size:11px}
.woocommerce .star-rating{display:none}

/* "Apenas 1 restante" é argumento de venda — precisa ser visto. */
.woocommerce p.stock.in-stock{font-weight:600;color:var(--rosa);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════════════════
   REVELAÇÃO AO ROLAR
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stylee-reveal.is-visivel{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .stylee-reveal{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   O CABEÇALHO QUE ENTRA (22/08/2026, André: «título dinâmico, com animação de entrada»)
   ══════════════════════════════════════════════════════════════════════════

   A entrada é UMA VEZ, não um laço. Palavra que fica girando para sempre compete com a
   foto — e nesta seção a foto é o que vende. Uma chegada bem cronometrada diz "isto é
   caro" e depois sai da frente.

   A ordem imita como se lê: o filete risca, o olho para; a promessa sobe palavra por
   palavra; a linha das categorias chega por último, como quem confirma.

   O INVÓLUCRO NÃO ANIMA. Ele carrega `.stylee-reveal` só para receber `.is-visivel` do
   observador — mas o fade dele é cancelado aqui. Sem isso, o bloco inteiro subiria junto
   com as palavras subindo dentro dele: dois movimentos somados viram borrão.

   Quem garante que nada fica invisível é a rede de segurança que já existe no stylee.js:
   se o observador não disparar em 3s, ele revela tudo. Esta animação pega carona nela em
   vez de inventar um segundo mecanismo — e um mecanismo a menos é um a menos para falhar. */
.stylee-cabeca.stylee-reveal{opacity:1;transform:none}

/* TIPO GRANDE É COMPOSIÇÃO (22/08/2026). O título vinha em clamp(1.8rem,3.6vw,2.7rem) —
   tamanho de subtítulo. Numa página cuja fonte de marca é uma Playfair, deixar a manchete
   modesta desperdiça o único elemento que já é bonito por si. Escala não acrescenta
   elemento nenhum: muda o caráter do bloco sem sujar a tela, que era o pedido.
   Escopado em `.stylee-cabeca` para os outros títulos de seção seguirem como estão. */
.stylee-cabeca .stylee-titulo{
  font-size:clamp(2.3rem,6.2vw,4.2rem);
  line-height:1.04;letter-spacing:-.022em;
  margin:0 0 12px;
}

/* AGRUPAR É COMPOR. Antes eram quatro elementos centrados com espaçamentos parecidos —
   o olho lia uma LISTA, não um bloco. Agora o filete cola na sobrelinha (um par), o ar
   entra ANTES do título, e título e apoio ficam juntos (outro par). Dois objetos em vez
   de quatro itens: a hierarquia aparece sem nada de novo na tela. */
.stylee-cabeca__filete{margin-bottom:13px}
.stylee-cabeca .stylee-eyebrow{margin-bottom:clamp(22px,3vw,34px)}

/* O itálico da Playfair é mais estreito que o romano; sem um respiro à direita, a última
   palavra parece encostar na seguinte. Só nas inclinadas, e só à direita. */
.stylee-cabeca__p--it{font-style:italic;padding-right:.04em}

.stylee-cabeca__filete{
  display:block;width:58px;height:1px;margin:0 auto 22px;background:var(--rosa);
  transform:scaleX(0);transform-origin:center;
  transition:transform .85s var(--ease);
}
.stylee-cabeca.is-visivel .stylee-cabeca__filete{transform:scaleX(1)}

.stylee-cabeca .stylee-eyebrow{opacity:0;transition:opacity .7s var(--ease) .12s}
.stylee-cabeca.is-visivel .stylee-eyebrow{opacity:1}

/* `inline-block` é o que permite mover a palavra; o espaço entre elas vem do HTML. */
.stylee-cabeca__p{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.stylee-cabeca.is-visivel .stylee-cabeca__p{opacity:1;transform:none}
.stylee-cabeca.is-visivel .stylee-cabeca__p:nth-child(1){transition-delay:.20s}
.stylee-cabeca.is-visivel .stylee-cabeca__p:nth-child(2){transition-delay:.31s}
.stylee-cabeca.is-visivel .stylee-cabeca__p:nth-child(3){transition-delay:.42s}
.stylee-cabeca.is-visivel .stylee-cabeca__p:nth-child(n+4){transition-delay:.53s}

.stylee-cabeca__lead{
  opacity:0;transform:translateY(10px);
  transition:opacity .7s var(--ease) .62s,transform .7s var(--ease) .62s;
  margin-bottom:0;
}
.stylee-cabeca.is-visivel .stylee-cabeca__lead{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* Sem isto, quem pediu menos movimento ficaria com o cabeçalho INVISÍVEL: o estado
     "antes" destes elementos é regra ativa, não ausência de regra. Foi exatamente esse
     descuido que deixou os cartões da home desfocados para sempre em 16/08. */
  .stylee-cabeca__filete{transform:none}
  .stylee-cabeca__p,.stylee-cabeca .stylee-eyebrow,.stylee-cabeca__lead{opacity:1;transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer,.ast-small-footer{background:var(--preto)!important;color:rgba(255,255,255,.62)!important;border:0!important}
.site-footer a{color:rgba(255,255,255,.62)!important;transition:color .3s ease}
.site-footer a:hover{color:#fff!important}

/* Espaço para o header fixo nas páginas internas (na home o vídeo passa por baixo). */
body.stylee-interna .stylee-main{padding-top:var(--header-h)}


/* ══════════════════════════════════════════════════════════════════════════
   ESTRUTURA (tema independente — não há mais invólucro de tema pai)
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-main{display:block}
body.stylee-interna .stylee-main{padding-top:var(--header-h)}
.stylee-pagina__topo{margin-bottom:2.4rem}
.stylee-loja .stylee-wrap{max-width:1320px}

/* Atalho de teclado: invisível até receber foco. */
.stylee-pular{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--preto);color:#fff;padding:12px 20px;font-size:13px;
}
.stylee-pular:focus{left:12px;top:12px}

/* Selo de escassez no card — verdadeiro, vem do estoque real. */
.stylee-ultima{
  display:inline-block;margin:0 0 6px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);font-weight:600;
}

/* ══════════════════════════════════════════════════════════════════════════
   RODAPÉ
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-footer{
  position:relative;
  background:var(--preto);color:rgba(255,255,255,.66);
  padding:0 clamp(20px,5vw,44px) clamp(14px,2vw,26px);
}
/* Fio rosa atravessando o topo: o site inteiro assina com este fio (embaixo do título
   de cada página, embaixo do mega menu). Aqui ele é a costura entre a página branca e
   o bloco preto — sem ele, o preto simplesmente começa. */
.stylee-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(191,42,89,.55),transparent);
}

/* ── O convite ─────────────────────────────────────────────────────────────
   O rodapé é onde cai quem leu tudo e não comprou. A dúvida entre duas peças é o que
   mais trava a venda de bolsa, e aqui ela encontra as duas portas abertas. */
.stylee-footer__convite{
  padding:clamp(38px,5vw,62px) 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.stylee-footer__convite-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);
}
.stylee-footer__convite .stylee-eyebrow{margin-bottom:10px}
.stylee-footer__chamada{
  margin:0;max-width:16em;
  font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(1.45rem,3vw,2.3rem);line-height:1.2;letter-spacing:-.01em;
}
.stylee-footer__acoes{display:flex;flex-wrap:wrap;gap:12px}
.stylee-footer__acoes .stylee-btn{padding:.95rem 1.9rem}

/* ── As colunas ────────────────────────────────────────────────────────────
   Quatro, e não três: as categorias entraram. Elas vêm do catálogo, então o rodapé
   cresce sozinho quando o André cria uma categoria nova. */
.stylee-footer__grade{
  display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,64px);
  padding:clamp(44px,6vw,76px) 0 clamp(34px,4vw,54px);
}
.stylee-footer__logo{height:46px;width:auto;display:block;margin-bottom:20px}
.stylee-footer__nota{max-width:340px;margin:0;font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.6)}
.stylee-footer__local{
  margin:16px 0 0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.stylee-footer h4{
  font-family:var(--ui);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:#fff;margin:0 0 18px;font-weight:500;
}
.stylee-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
/* O link ANDA um passo para a direita ao receber o ponteiro. É pouco de propósito:
   num rodapé com quinze links, movimento grande vira agitação. */
.stylee-footer__menu a{
  display:inline-block;color:rgba(255,255,255,.66);font-size:.95rem;
  transition:color .3s ease,transform .3s var(--ease);
}
.stylee-footer__menu a:hover{color:var(--rosa);transform:translateX(4px)}
.stylee-footer__tudo{color:rgba(255,255,255,.4)!important;font-size:.86rem!important;letter-spacing:.06em}

/* ── A base ────────────────────────────────────────────────────────────────── */
.stylee-footer__base{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 24px;padding:20px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.4);
}
.stylee-footer__pagamento{letter-spacing:.14em;text-transform:uppercase;font-size:11px}

/* ── Bandeiras ─────────────────────────────────────────────────────────────
   Cada marca ganha uma plaqueta BRANCA. Não é enfeite: os arquivos oficiais vêm nas
   cores das bandeiras, e o azul da Visa (#1434CB) sobre o preto do rodapé fica
   praticamente invisível. A plaqueta é também como a cliente está acostumada a ver
   isso em qualquer checkout — reconhecimento imediato, que é justamente o serviço que
   uma bandeira presta. */
.stylee-bandeiras{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.stylee-bandeiras li{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:27px;
  background:#fff;border-radius:4px;
}
.stylee-bandeiras img{display:block;width:26px;height:25px;max-width:none}

/* Políticas: uma linha só, separada por pontos. Mais claras que a linha do CNPJ porque
   são LINKS — se parecerem texto morto, ninguém clica, e aí é como se não existissem. */
.stylee-footer__politicas{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  padding:16px 0 10px;
  font-size:12px;letter-spacing:.04em;
}
.stylee-footer__politicas a{
  color:rgba(255,255,255,.6);transition:color .3s ease;
}
.stylee-footer__politicas a:hover{color:var(--rosa)}
/* O ponto separador é desenhado, não digitado: assim ele nunca sobra no fim da linha
   nem some quando a lista mudar de tamanho. */
.stylee-footer__politicas a + a{position:relative;padding-left:19px}
.stylee-footer__politicas a + a::before{
  content:"";position:absolute;left:0;top:50%;
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.28);
}
@media (max-width:520px){
  .stylee-footer__politicas a + a{padding-left:0}
  .stylee-footer__politicas a + a::before{display:none}
}

/* Razão social e CNPJ. Discreto, mas LEGÍVEL — a lei pede "fácil visualização", e um
   cinza de 20% seria cumprir a letra fingindo que não está lá. */
.stylee-footer__empresa{
  padding-bottom:6px;
  font-size:11.5px;line-height:1.7;letter-spacing:.04em;
  color:rgba(255,255,255,.42);
}

@media (max-width:1000px){
  .stylee-footer__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
  .stylee-footer__marca{grid-column:1/-1}
}
@media (max-width:760px){
  .stylee-footer__convite-inner{flex-direction:column;align-items:flex-start}
  .stylee-footer__acoes{width:100%}
  .stylee-footer__acoes .stylee-btn{flex:1 1 auto;text-align:center}
}
@media (max-width:420px){
  .stylee-footer__grade{grid-template-columns:1fr}
  .stylee-footer__base{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .stylee-footer__menu a:hover{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   MENU EM TELA BAIXA (celular deitado)
   ══════════════════════════════════════════════════════════════════════════
   O corpo do menu escala por LARGURA (9vw). Deitado, a largura dobra e a altura
   despenca: os itens viravam gigantes numa tela de ~360px e não cabiam — sem
   rolagem, o menu ficava inutilizável. Aqui a régua passa a ser a ALTURA.        */
@media (max-height:560px) and (orientation:landscape){
  .stylee-drawer__nav{
    justify-content:flex-start;
    padding:calc(var(--header-h) + 8px) clamp(24px,5vw,56px) 20px;
  }
  .stylee-drawer__list a{font-size:clamp(1.25rem,7.5vh,1.9rem);padding:.1em 0}
  .stylee-drawer__rodape{
    margin-top:18px;padding-top:14px;
    flex-direction:row;flex-wrap:wrap;gap:18px;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .stylee-drawer__rodape a{font-size:11px}
  :root{--header-h:58px}
}

/* Telas muito baixas (deitado em aparelho pequeno): duas colunas para caber. */
@media (max-height:420px) and (orientation:landscape){
  .stylee-drawer__list{
    display:grid;grid-template-columns:1fr 1fr;column-gap:32px;
  }
  .stylee-drawer__list a{font-size:1.2rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   HERO NO CELULAR EM PÉ — tela cheia
   ══════════════════════════════════════════════════════════════════════════
   Na vertical o vídeo ocupa a tela inteira (recortado pelo centro): dá presença e
   deixa o menu branco muito mais legível. Deitado e no desktop, volta a valer a
   proporção real do arquivo, para não cortar a tipografia do vídeo.
   svh em vez de vh: evita o pulo quando a barra do navegador some ao rolar.        */
@media (max-width:900px) and (orientation:portrait){
  .stylee-hero{aspect-ratio:auto;min-height:100svh}
  .stylee-hero video{height:100%;object-fit:cover}
  .stylee-hero::before{height:34vh}
}


/* ══════════════════════════════════════════════════════════════════════════
   TRANSIÇÃO ENTRE PÁGINAS — cortina própria
   ══════════════════════════════════════════════════════════════════════════
   NÃO usamos a View Transitions API de propósito: ela existe no Chrome e no Safari
   novo, mas não no Firefox nem em iPhone/iPad mais antigos. Como a clientela usa de
   tudo — Samsung, iPhone, Motorola, iPad — a mesma animação precisa rodar em todos.
   clip-path circular com transição é suportado em todo lugar há anos.

   A cortina tem DUAS fases e atravessa o carregamento da página:
     saída   → círculo cresce do ponto de origem até cobrir a tela, então navega
     chegada → a página nova nasce coberta e o círculo encolhe, revelando o conteúdo

   A origem (--cx/--cy) é o hambúrguer no celular e o ponto do clique no PC, para o
   movimento parecer continuação do gesto, não um efeito solto.                    */
/* Transição entre páginas: fade curto e controlado.
   A cortina circular ficou SÓ para o menu (abrir/fechar), onde ela nasce do gesto e
   faz sentido. Para navegar, ela obrigava a segurar a página até carregar tudo — e
   qualquer atraso virava travada. Opacidade é composta pela GPU: não engasga, não
   depende de esperar recurso nenhum, e funciona igual em todo aparelho. */
.stylee-main{animation:styleeEntrada .5s var(--ease) both}
@keyframes styleeEntrada{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .stylee-main{animation:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   CHAT DA LIA (widget em todas as páginas)
   ══════════════════════════════════════════════════════════════════════════ */
.show-chat-launcher{position:fixed;bottom:24px;right:24px;background:#000;color:#fff;border:none;padding:12px 20px;border-radius:30px;cursor:pointer;font-size:14px;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.2)}
/* A TRANSIÇÃO SÓ EXISTE QUANDO O PAINEL ESTÁ ABERTO (15/08/2026).
   Medido na Finalização de compra: o chat e o mega-menu apareciam em opacidade 1 e
   caíam para 0, cada um na SUA duração declarada (.5s aqui, .38s no mega). Transição só
   roda quando o valor muda — então a opacidade deles ERA 1 um instante antes, apesar do
   CSS dizer 0. É o que acontece quando o navegador resolve o estilo do elemento pela
   primeira vez já com a transição declarada: ele anima do valor inicial (1) até o nosso.

   O log descartou tudo o mais: folha do tema presente (893 regras), nenhuma classe
   mudou nos painéis nem no <body>, e a largura da janela não mexeu. Não havia o que
   "consertar" no gatilho — havia o que impedir de PINTAR.

   Declarando a transição só no estado ABERTO, o estado fechado não tem de onde animar:
   ele é 0, seco. Custa o desaparecimento suave ao fechar — troca barata por não piscar
   na cara de quem está com o cartão na mão.

   `visibility` entra junto porque faltava: o chat era escondido SÓ por opacidade, ou
   seja, um elemento invisível e ainda presente para o navegador. */
.chat-button,.chatbox{opacity:0;visibility:hidden;pointer-events:none}
.chat-button.active,.chatbox.active{transition:opacity .5s ease,transform .5s ease}
.chat-button.active,.chatbox.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* padding:0 é obrigatório: todo <button> nasce com `padding:1px 6px` do navegador, e
   como este é border-box o vídeo ficava 12px mais estreito que a moldura — a "borda"
   cinza em volta do avatar. line-height:0 tira o espaço de linha do inline. */
.lia-dock{
  --lia-avatar-bottom:24px;
  --lia-avatar-right:24px;
  --lia-avatar-width:96px;
  --lia-avatar-height:144px;
  --lia-panel-gap:12px;
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
}
.chat-button{position:absolute;bottom:var(--lia-avatar-bottom);right:var(--lia-avatar-right);background:none;border:none;padding:0;line-height:0;width:var(--lia-avatar-width);height:var(--lia-avatar-height);cursor:pointer;z-index:1000;display:block;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.2);transform:scale(.95)}
/* Os dois clipes ocupam a mesma moldura; só a opacidade decide quem aparece.
   SEM transition de propósito: o André pediu corte seco, e qualquer fade aqui faria a
   boca da LIA "derreter" entre o clipe parado e o falando. */
.chat-button .lia-av{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:16px}
.chat-button .lia-av--falando{opacity:0}
.chat-button.lia-falando .lia-av--parada{opacity:0}
.chat-button.lia-falando .lia-av--falando{opacity:1}
/* O rosto falante (04/11/2026, lia-rosto.js): o vídeo parado de sempre fica no ar; o rosto entra por cima só
   enquanto ela fala (classe lia-rosto-falando), com transição curta. O clipe «falando» antigo sai de cena. */
.chat-button .lia-rosto{display:none;background:transparent;opacity:0;transition:opacity .3s ease}
.chat-button.lia-rosto-ok .lia-rosto{display:block}
.chat-button.lia-rosto-ok.lia-rosto-falando .lia-rosto{opacity:1}
.chat-button.lia-rosto-ok .lia-av--falando{display:none}
.chatbox{position:absolute;bottom:calc(var(--lia-avatar-bottom) + var(--lia-avatar-height) + var(--lia-panel-gap));right:24px;width:320px;max-height:450px;background:#fff;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.2);display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;z-index:999;transform:translateY(10px)}
.chatbox-header{position:relative;background:#000;color:#fff;padding:16px;font-weight:700}
/* A logo é branca com alpha: assenta direto no header preto, sem caixa nem borda. */
.lia-marca{display:flex;align-items:center;gap:10px}
/* BLINDAGEM. O widget mora no rodapé de TODAS as páginas, inclusive as da loja — e o
   woocommerce-layout.css, que só carrega lá, traz `.woocommerce img{height:auto}`. Isso
   é mais específico que `.lia-logo` e fazia a logo do chat inflar de 18px para 165px,
   arrebentando o cabeçalho só nas páginas internas. Prefixar com `.chatbox` devolve a
   decisão para cá. Regra geral: elemento global precisa de seletor à prova de CSS
   com escopo de página. */
.chatbox .lia-logo{height:18px;width:auto;max-width:none;display:block}
.chatbox img,.chat-button video{max-width:100%}
.lia-nome{font-weight:700;letter-spacing:.5px;font-size:14px;opacity:.92}
/* `overscroll-behavior:contain` mata o "scroll chaining": ao bater no fim da lista, o
   navegador repassa o resto do gesto para a página atrás, e a loja começa a rolar sob o
   chat no meio da leitura. Com `contain`, a rolagem morre aqui dentro — e o `overflow`
   da própria lista continua funcionando normalmente.
   `-webkit-overflow-scrolling` devolve a inércia do dedo no iOS. */
.chatbox-messages{flex:1;padding:12px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;font-size:14px;display:flex;flex-direction:column;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.chatbox-input{display:flex;border-top:1px solid #ddd;align-items:center}
.chatbox-input input{flex:1;border:none;padding:12px;font-size:14px;outline:none}
.chatbox-input button{background:#000;color:#fff;border:none;padding:12px;font-size:14px;cursor:pointer}
.chatbox-input button#micButton{background:#fff;color:#000;padding:0 16px;font-size:16px;border-left:1px solid #ddd}
/* Gravando: o botão inteiro muda, não só o ícone. A cliente precisa enxergar de longe
   que o microfone está ligado — e que o próximo clique ENVIA. */
#micButton.listening{background:#fdecec}
/* `svg` no lugar de `i` (15/08/2026): os icones do chat deixaram de ser Font Awesome e
   viraram SVG embutido — a biblioteca inteira vinha de um CDN por dois icones, e era ela
   que fazia a pagina piscar ao trocar de fonte. Esta regra apontava para a tag antiga e
   ficaria muda; e o `currentColor` do SVG faz o vermelho do "gravando" chegar sozinho. */
#micButton.listening .lia-ico{animation:pulseGlow 1.2s infinite;color:red}
/* SEGURAR PARA FALAR (04/11/2026): a área que abre em volta do dedo e a barra com o tempo. */
#micButton{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lia-hold{position:fixed;inset:0;pointer-events:none;z-index:2147483000;opacity:0;transition:opacity .15s ease;--nivel:0;--dx:0px}
.lia-hold.ativo{opacity:1}
.lia-hold-roda{position:absolute;left:var(--cx);top:var(--cy);width:0;height:0;transform:translateX(var(--dx))}
.lia-hold-roda::before{content:"";position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;background:#101010;box-shadow:0 8px 28px rgba(0,0,0,.35);transform:scale(calc(.55 + .45 * var(--nivel) + .45));transition:transform .08s linear}
.lia-hold.ativo .lia-hold-roda::before{animation:liaHoldAbre .22s ease-out}
.lia-hold-onda{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid rgba(229,57,53,.55);background:rgba(229,57,53,.08);animation:liaHoldOnda 2.6s ease-out infinite}
.lia-hold-onda.o2{animation-delay:1.3s}
.lia-hold-mic{position:absolute;left:-16px;top:-16px;width:32px;height:32px;color:#fff}
.lia-hold-mic svg{width:32px;height:32px;display:block}
.lia-hold.cancelando .lia-hold-roda::before{background:#b3261e}
.lia-hold.quase .lia-hold-roda::before{background:#7a1f1a}
.lia-hold-barra{position:absolute;left:var(--bx);top:calc(var(--cy) - 128px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;color:#101010;border-radius:999px;padding:10px 16px;box-shadow:0 6px 22px rgba(0,0,0,.18);font:600 14px/1 system-ui,sans-serif;white-space:nowrap}
.lia-hold-ponto{width:10px;height:10px;border-radius:50%;background:#e53935;animation:pulseGlow 1s infinite}
.lia-hold-tempo{font-variant-numeric:tabular-nums;min-width:34px}
.lia-hold-dica{font-weight:400;opacity:.65}
.lia-hold.cancelando .lia-hold-dica{color:#b3261e;opacity:1;font-weight:600}
.lia-hold-aviso{position:fixed;width:220px;text-align:center;background:#101010;color:#fff;border-radius:12px;padding:10px 12px;font:500 13px/1.3 system-ui,sans-serif;z-index:2147483001;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .4s ease,transform .4s ease}
.lia-hold-aviso.sai{opacity:0;transform:translateY(-6px)}
@keyframes liaHoldAbre{from{transform:scale(.3)}}
@keyframes liaHoldOnda{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.lia-hold-onda{animation:none;opacity:0}}
/* Tamanho proprio, porque sem a fonte de icone nao ha `font-size` para herdar. */
.lia-ico{width:17px;height:17px;display:block}
.lia-mic-tag .lia-ico{width:12px;height:12px;display:inline-block;vertical-align:middle}
/* Áudio da resposta falada. Fica visível para reouvir quando o autoplay for recusado
   (iOS recusa quase sempre até a primeira interação). */
.lia-audio{display:block;width:100%;margin-top:8px;height:34px}
/* Marca de "isto veio por voz", na bolha da cliente. */
.lia-mic-tag{opacity:.55;font-size:11px;margin-right:6px;vertical-align:middle}

/* Vitrine dentro da bolha: a peça que a LIA recomendou, com foto, preço e o caminho
   para comprar. `.chatbox` na frente pelo mesmo motivo da logo (ver BLINDAGEM). */
.lia-produto{display:flex;gap:10px;align-items:center;margin-top:10px;padding:8px;
  background:#fff;border:1px solid #e9e5e0;border-radius:12px;text-decoration:none;color:inherit;
  transition:border-color .2s ease,box-shadow .2s ease}
.lia-produto:hover{border-color:var(--rosa);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.chatbox .lia-produto__foto{width:64px;height:64px;flex:0 0 64px;object-fit:cover;border-radius:8px;
  background:var(--areia);display:block;border:0;margin:0}
.lia-produto__txt{min-width:0;font-family:var(--ui)}
.lia-produto__nome{display:block;font-size:12.5px;line-height:1.35;color:var(--preto);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lia-produto__preco{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--rosa)}
.lia-produto__cta{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cinza)}
#sendButton:disabled{background:#666;cursor:not-allowed;opacity:.7}
@keyframes pulseGlow{0%{text-shadow:0 0 0 rgba(255,0,0,.6);transform:scale(1)}50%{text-shadow:0 0 6px rgba(255,0,0,1);transform:scale(1.1)}100%{text-shadow:0 0 0 rgba(255,0,0,.6);transform:scale(1)}}
.message{position:relative;max-width:95%;margin:6px 0;padding:10px 16px;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.1);font-family:Georgia,serif;font-size:15px;line-height:1.4;clear:both;display:inline-block}
.message.user{background:linear-gradient(135deg,#f5e1ee 0%,#f9ecf2 100%);color:#333;align-self:flex-end;margin-left:auto;border-bottom-right-radius:4px}
.message.bot{background:linear-gradient(135deg,#f0f0f0 0%,#fafafa 100%);color:#333;align-self:flex-start;margin-right:auto;border-bottom-left-radius:4px}
.message-content{display:block}
.message-content p{margin:4px 0}
.message-content img{max-width:100%;border-radius:12px;margin:6px 0;display:block;border:1px solid #ddd}
.message.typing{background:linear-gradient(135deg,#f0f0f0 0%,#fafafa 100%);color:#333;align-self:flex-start;margin-right:auto;border-bottom-left-radius:4px;font-size:14px;padding:10px 16px;border-radius:16px;line-height:1.4;max-width:95%;display:flex;align-items:center;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.status-indicator{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:8px}
.status-indicator.online{background:#28a745}
.status-indicator.offline{background:#dc3545}
/* Ações do cabeçalho. O espaçamento é do `gap` do flex — o `float` e as margens que
   moravam aqui vinham de antes do flex e empurravam os dois botões para longe um do
   outro. Quadrados de 28px: alvo de toque confortável sem virar bloco visível. */
.chatbox-acoes{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:6px}
.clear-chat-btn,.close-chat-btn{
  background:none;border:none;padding:0;margin:0;color:#fff;cursor:pointer;
  width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  line-height:1;transition:background .2s ease,opacity .2s ease;opacity:.8;
}
.clear-chat-btn{font-size:13px}
.close-chat-btn{font-size:15px}
.clear-chat-btn:hover,.close-chat-btn:hover{background:rgba(255,255,255,.14);opacity:1}
/* WhatsApp no cabeçalho do chat: a saída para gente de verdade, sempre a um clique e
   sem depender de a LIA lembrar de oferecer. Mesma caixa dos outros dois botões — só o
   verde, no hover, diz que este leva para FORA do site. */
.lia-whats{
  background:none;border:none;padding:0;margin:0;color:#fff;cursor:pointer;
  width:28px;height:28px;display:grid;place-items:center;border-radius:8px;
  line-height:1;transition:background .2s ease,opacity .2s ease,color .2s ease;opacity:.8;
  text-decoration:none;
}
.lia-whats svg{width:17px;height:17px;display:block}
.lia-whats:hover{background:rgba(37,211,102,.22);color:#25d366;opacity:1}
.lia-whats:focus-visible{outline:2px solid var(--rosa);outline-offset:2px}
/* Foco visível e NOSSO. Sem isto o navegador (ou qualquer CSS de terceiro) decide
   sozinho como pintar o botão clicado — foi assim que o azul do Astra apareceu. */
.chatbox-acoes button:focus-visible,.chat-button:focus-visible,.chatbox-input button:focus-visible{
  outline:2px solid var(--rosa);outline-offset:2px;
}
.chatbox-acoes button:focus:not(:focus-visible){outline:none;background:none}
@media screen and (max-height:420px) and (orientation:landscape){.chatbox{height:420px;max-height:80vh;min-height:320px;bottom:16px;right:140px}}
.chat-button.active{animation:zoomFlip3D .6s ease-out;transform-origin:center}
.chatbox.active{animation:perspectiveSlideIn .8s ease-out;transform-origin:bottom center}
@keyframes zoomFlip3D{0%{transform:rotateY(90deg) scale(.4);opacity:0}60%{transform:rotateY(-20deg) scale(1.1);opacity:1}100%{transform:rotateY(0) scale(1)}}
@keyframes perspectiveSlideIn{0%{transform:perspective(800px) rotateX(80deg) translateY(100px);opacity:0;filter:blur(6px)}60%{transform:perspective(800px) rotateX(-10deg) translateY(-6px);filter:blur(2px);opacity:1}100%{transform:perspective(800px) rotateX(0) translateY(0);filter:blur(0)}}
@keyframes fadeDot{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.message-animated{animation:fadeInUp .5s ease-out}
.cta-button,.cta-button:visited,.cta-button:active{display:inline-block;background:#000;color:#fff !important;border:2px solid #000;padding:8px 18px;font-weight:600;text-decoration:none !important;border-radius:4px;transition:all .3s ease;margin-top:8px}
.cta-button:hover{background:#fff;color:#000 !important}


/* ══════════════════════════════════════════════════════════════════════════
   RODAPÉ SEMPRE NA BASE
   ══════════════════════════════════════════════════════════════════════════
   Páginas curtas (Onde estamos, Contato, carrinho vazio) terminavam no meio da
   tela e o rodapé subia junto. O corpo vira uma coluna com altura mínima igual
   à da tela e o <main> come a sobra — o rodapé é empurrado para o fim, sem
   position:fixed (que o faria flutuar por cima do conteúdo em páginas longas).
   100dvh e não 100vh: no celular o vh ignora a barra do navegador e sobra um
   pedaço cortado embaixo. */
body{min-height:100dvh;display:flex;flex-direction:column}
.stylee-main{flex:1 0 auto}
.stylee-footer{margin-top:auto}

/* ══════════════════════════════════════════════════════════════════════════
   LOJA — vitrine
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-loja{padding-top:calc(var(--header-h) + clamp(30px,5vw,64px))}

.woocommerce .page-title,.stylee-loja h1.page-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.15;
  text-align:center;margin:0 0 8px;
}
.stylee-loja__intro{
  text-align:center;max-width:560px;margin:0 auto clamp(38px,5vw,66px);
  font-size:1rem;line-height:1.8;color:var(--cinza);
}
.stylee-loja__intro::after{
  content:"";display:block;width:46px;height:1px;margin:26px auto 0;background:var(--rosa);
}

/* Cartão da peça. A moldura tem proporção FIXA (4:5): sem isso, fotos de alturas
   diferentes desalinham a grade inteira e o preço de cada peça para numa altura
   diferente. O recorte também esconde o zoom, que sem overflow vazaria sobre a
   peça vizinha. */
.woocommerce ul.products li.product{position:relative;overflow:hidden;border-radius:3px}
.woocommerce ul.products li.product .woocommerce-loop-product__link{display:block;text-decoration:none}
.woocommerce ul.products li.product a img{
  aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;
  background:var(--areia);border-radius:3px;
  margin:0 0 16px!important;
  transition:transform 1.1s var(--ease);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.06)}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display)!important;font-weight:500;
  font-size:1.02rem!important;line-height:1.4;color:var(--preto);
  margin:0 0 6px!important;padding:0!important;
}
.woocommerce ul.products li.product .price{
  font-family:var(--ui)!important;font-size:.95rem!important;font-weight:500;
  color:var(--preto)!important;margin:0!important;
}

/* "Última peça" vira selo sobre a foto, não linha de texto solta. A escassez é o
   argumento mais forte da casa e precisa ser vista antes do preço. */
.woocommerce ul.products li.product .stylee-ultima{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 11px;border-radius:999px;
  /* Sem desfoque: este selo mora DENTRO do cartão do produto, que repinta a cada
     passagem de mouse na vitrine. Sobre foto e a 82% de opacidade o desfoque não
     aparecia — e era mais uma camada de GPU sendo recomposta à toa. */
  background:rgba(10,10,10,.86);color:#fff;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
}

/* Comprar: aparece ao passar o mouse no computador. No toque fica SEMPRE visível,
   porque em celular não existe "passar o mouse" — esconder ali seria esconder de
   vez. */
.woocommerce ul.products li.product .button{
  display:block;width:100%;text-align:center;
  margin:14px 0 0!important;padding:.9rem 1rem!important;font-size:10.5px!important;
}
@media (hover:hover) and (min-width:901px){
  .woocommerce ul.products li.product .button{
    opacity:0;transform:translateY(8px);
    transition:opacity .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
  }
  .woocommerce ul.products li.product:hover .button,
  .woocommerce ul.products li.product .button:focus-visible{opacity:1;transform:none}
}
.woocommerce ul.products li.product .added_to_cart{
  display:block;margin-top:8px;text-align:center;
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosa);
}

/* Entrada em cascata: as peças surgem uma depois da outra, não todas de uma vez. */
.woocommerce ul.products li.product.stylee-reveal:nth-child(4n+2){transition-delay:.08s}
.woocommerce ul.products li.product.stylee-reveal:nth-child(4n+3){transition-delay:.16s}
.woocommerce ul.products li.product.stylee-reveal:nth-child(4n+4){transition-delay:.24s}

/* ══════════════════════════════════════════════════════════════════════════
   LOJA — página da peça
   ══════════════════════════════════════════════════════════════════════════ */

/* Lightbox da foto do produto.
   O PhotoSwipe do WooCommerce já fornece fechar por clique externo e Escape, mas o
   ícone do tema padrão ficava preto sobre o fundo preto. Além disso, nosso cabeçalho
   usa z-index 10001 e atravessava o lightbox padrão. A galeria precisa ser a camada
   superior e oferecer uma saída óbvia, grande o bastante para toque. */
body.single-product .pswp{z-index:11000}
body.single-product .pswp__top-bar{
  height:0;
  opacity:1!important;
  pointer-events:none;
  background:none;
}
/* A própria foto já amplia por clique/pinça. Estes controles nativos repetiam a
   função e disputavam o mesmo canto com o fechamento. */
body.single-product .pswp__button--share,
body.single-product .pswp__button--fs,
body.single-product .pswp__button--zoom{display:none!important}
body.single-product .pswp__button--close{
  position:fixed;
  top:var(--stylee-lightbox-fechar-top,10px);
  left:var(--stylee-lightbox-fechar-left,calc(100vw - 58px));
  right:auto;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.65);
  border-radius:50%;
  opacity:1;
  background:rgba(0,0,0,.68)!important;
  box-shadow:0 4px 18px rgba(0,0,0,.3);
  cursor:pointer;
  pointer-events:auto;
}
body.single-product .pswp__button--close::before,
body.single-product .pswp__button--close::after{
  content:"";
  position:absolute;
  left:11px;
  top:19px;
  width:16px;
  height:2px;
  border-radius:2px;
  background:#fff;
  pointer-events:none;
}
body.single-product .pswp__button--close::before{transform:rotate(45deg)}
body.single-product .pswp__button--close::after{transform:rotate(-45deg)}
body.single-product .pswp__button--close:hover{background:rgba(0,0,0,.9)!important;border-color:#fff}
body.single-product .pswp__button--close:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* A lupa da página fica INTEIRA dentro da fotografia. O padrão do WooCommerce a
   deixava apoiada na borda e o overflow do carrossel cortava metade no celular. */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  position:absolute!important;
  inset:auto!important;
  top:8px!important;
  right:8px!important;
  width:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box;
  border:0!important;
  border-radius:50%;
  background-color:#fff!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%23111' stroke-width='1.8'/%3E%3Cpath d='M16 16l4.5 4.5' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:18px 18px!important;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  display:grid!important;
  place-items:center;
  text-indent:0!important;
  font-size:0!important;
  line-height:1!important;
  overflow:hidden;
  transform:none!important;
  translate:none!important;
  z-index:5;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::after{
  content:none!important;
  display:none!important;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger > span{display:none!important}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger .stylee-lupa-produto__icone{
  display:none!important;
}
@media (max-width:600px){
  body.single-product .pswp__button--close{width:42px;height:42px}
  body.single-product .pswp__button--close::before,
  body.single-product .pswp__button--close::after{left:12px;top:20px;width:16px}
  body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger{width:34px!important;height:34px!important}
}

.woocommerce div.product{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:start}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary{width:auto!important;float:none!important;margin:0!important}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells{grid-column:1/-1;margin-top:clamp(36px,5vw,72px)}
.woocommerce div.product .product_title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2;margin:0 0 14px;
}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font-family:var(--ui);font-size:1.5rem!important;font-weight:500;color:var(--preto)!important;
  margin:0 0 20px!important;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:#4a4642;line-height:1.8;margin-bottom:22px;
}
.woocommerce div.product form.cart{margin-bottom:26px}
.woocommerce div.product .product_meta{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--linha);
  font-family:var(--ui);font-size:12px;letter-spacing:.04em;color:var(--cinza);
}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0!important;margin:0 0 22px!important;border-bottom:1px solid var(--linha)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none!important;border:0!important;border-radius:0!important;margin:0 26px 0 0!important;padding:0 0 12px!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--ui)!important;font-size:11.5px!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza)!important;font-weight:500!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--preto)!important}
@media (max-width:900px){
  .woocommerce div.product{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   CAMPOS E AVISOS (carrinho, checkout e conta)
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce .input-text,.woocommerce input[type="text"],.woocommerce input[type="email"],
.woocommerce input[type="tel"],.woocommerce input[type="password"],.woocommerce input[type="number"],
.woocommerce textarea,.woocommerce select,.woocommerce-page .input-text,.woocommerce-page select{
  width:100%;padding:13px 14px!important;height:auto!important;
  border:1px solid var(--linha)!important;border-radius:3px!important;
  background:#fff;font-family:var(--ui);font-size:14px;color:var(--preto);
  transition:border-color .3s ease,box-shadow .3s ease;
}
.woocommerce .input-text:focus,.woocommerce select:focus,.woocommerce textarea:focus{
  outline:none;border-color:var(--rosa)!important;box-shadow:0 0 0 3px rgba(191,42,89,.09);
}
.woocommerce form .form-row label{
  display:block;margin-bottom:7px;
  font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza);
}
.woocommerce form .form-row{margin-bottom:18px;padding:0}
.woocommerce .required{color:var(--rosa);text-decoration:none}
.woocommerce .quantity .qty{
  width:70px!important;padding:11px 6px!important;text-align:center;
  border:1px solid var(--linha)!important;border-radius:3px;
}

/* Avisos sem a caixa cinza com barra azul do padrão do WooCommerce. */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
  border:0!important;border-left:2px solid var(--rosa)!important;border-radius:0!important;
  background:var(--areia)!important;color:var(--preto)!important;
  padding:16px 20px!important;margin:0 0 26px!important;
  font-family:var(--ui);font-size:14px;line-height:1.6;
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box!important;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none!important}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:16px}
.woocommerce-message .stylee-notice-text{
  display:block;
  min-width:0;
  padding-right:0;
}
.woocommerce-message .stylee-notice-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  max-width:100%;
  min-width:0;
  margin-top:12px;
  box-sizing:border-box!important;
}
.woocommerce-message .stylee-notice-actions .button{
  float:none!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:190px;
  min-height:44px;
  margin:0!important;
  padding:12px 20px!important;
  border-radius:2px!important;
  font-family:var(--ui)!important;
  font-size:11px!important;
  line-height:1.1!important;
  letter-spacing:.2em;
  text-align:center;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:100%!important;
  box-sizing:border-box!important;
  transform:none!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.woocommerce-message .stylee-notice-actions .wc-forward{
  background:var(--preto)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px var(--preto);
}
.woocommerce-message .stylee-notice-actions .wc-forward:hover{
  background:var(--preto)!important;
  color:#fff!important;
}
.woocommerce-message .stylee-continuar-comprando{
  background:#fff!important;
  color:var(--preto)!important;
  box-shadow:inset 0 0 0 1px var(--linha);
}
.woocommerce-message .stylee-continuar-comprando:hover{
  background:#fff!important;
  color:var(--rosa)!important;
  transform:none!important;
}
body.woocommerce-cart .woocommerce-message .stylee-notice-actions .wc-forward{
  display:none!important;
}

@media (max-width:600px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{
    margin:0 0 22px!important;
    padding:18px 18px!important;
    border-left:0!important;
    box-shadow:inset 0 0 0 1px var(--linha);
    text-align:center;
  }
  body.single-product.woocommerce .woocommerce-notices-wrapper{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box!important;
  }
  .woocommerce-message .stylee-notice-text{
    margin-bottom:14px;
    font-size:14px;
    line-height:1.55;
  }
  .woocommerce-message .stylee-notice-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:0;
  }
  .woocommerce-message .stylee-notice-actions .button{
    width:100%;
    min-width:0;
    min-height:52px;
    padding:15px 16px!important;
    font-size:11.5px!important;
    letter-spacing:.18em;
  }
  body.single-product.woocommerce .woocommerce-error{
    text-align:left;
  }
  body.single-product.woocommerce .woocommerce-error li{
    min-width:0;
    overflow-wrap:anywhere;
  }
  body.single-product.woocommerce .woocommerce-error li + li{
    margin-top:12px;
  }
  body.single-product.woocommerce .woocommerce-error .button.wc-forward{
    float:none!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    min-height:48px;
    margin:14px 0 0!important;
    padding:14px 18px!important;
    box-sizing:border-box!important;
    white-space:normal;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO — peças à esquerda, total à direita e grudado na tela
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart .woocommerce{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(26px,3.6vw,56px);align-items:start}
.woocommerce-cart .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce-cart-form{grid-column:1}
.woocommerce-cart .cart-collaterals{grid-column:2;width:auto!important;float:none!important}

.woocommerce table.shop_table{border:0!important;border-radius:0!important;border-collapse:collapse!important;width:100%}
.woocommerce table.shop_table th{
  border:0!important;border-bottom:1px solid var(--linha)!important;padding:0 10px 14px!important;
  font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);
}
.woocommerce table.shop_table td{
  border:0!important;border-bottom:1px solid var(--linha)!important;padding:20px 10px!important;vertical-align:middle;
}
.woocommerce table.cart img{width:78px!important;height:98px;object-fit:cover;border-radius:3px;background:var(--areia)}
.woocommerce table.cart td.product-name a{font-family:var(--display);font-size:1.02rem;color:var(--preto)}
.woocommerce table.cart td.product-name a:hover{color:var(--rosa)}
.woocommerce table.cart td.product-price,.woocommerce table.cart td.product-subtotal{font-family:var(--ui);font-size:14px}
.woocommerce table.cart td.product-subtotal{font-weight:600}
.woocommerce a.remove{
  width:24px;height:24px;line-height:22px;font-size:17px;
  color:var(--cinza)!important;border:1px solid var(--linha);border-radius:50%;
}
.woocommerce a.remove:hover{background:var(--rosa)!important;color:#fff!important;border-color:var(--rosa)}
.woocommerce table.cart td.actions{padding:22px 0!important;border-bottom:0!important}
.woocommerce table.cart td.actions .coupon{display:flex;gap:10px;align-items:center;float:none!important}
.woocommerce table.cart td.actions .coupon .input-text{width:auto!important;flex:1;max-width:220px}

.woocommerce .cart_totals{
  background:var(--areia);padding:clamp(22px,2.6vw,32px);border-radius:4px;
  position:sticky;top:calc(var(--header-h) + 18px);
}
.woocommerce .cart_totals h2{
  font-family:var(--ui)!important;font-size:11px!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cinza);margin:0 0 18px!important;
}
.woocommerce .cart_totals table.shop_table th,.woocommerce .cart_totals table.shop_table td{
  padding:13px 0!important;border-bottom:1px solid rgba(0,0,0,.07)!important;background:none!important;
}
.woocommerce .cart_totals .order-total th,.woocommerce .cart_totals .order-total td{
  border-bottom:0!important;padding-top:16px!important;font-size:1.05rem;
}
.woocommerce .cart_totals .order-total .amount{color:var(--preto);font-weight:600}
.woocommerce .wc-proceed-to-checkout{padding:18px 0 0!important}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;text-align:center;margin:0!important}
.stylee-cart-continuar-topo{display:none}
.woocommerce .wc-proceed-to-checkout .stylee-cart-continuar--resumo{
  float:none!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  margin:10px 0 0!important;
  padding:13px 18px!important;
  border-radius:2px!important;
  background:#fff!important;
  color:var(--preto)!important;
  box-shadow:inset 0 0 0 1px var(--linha);
  font-family:var(--ui)!important;
  font-size:11px!important;
  line-height:1.25!important;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
  box-sizing:border-box!important;
  transform:none!important;
  transition:color .18s ease,box-shadow .18s ease!important;
}
.woocommerce .wc-proceed-to-checkout .stylee-cart-continuar--resumo:hover{
  background:#fff!important;
  color:var(--rosa)!important;
  box-shadow:inset 0 0 0 1px rgba(191,42,89,.45);
  transform:none!important;
}

.woocommerce .cart-empty,.woocommerce .return-to-shop{text-align:center}
.woocommerce .cart-empty{
  font-family:var(--display);font-size:1.3rem;color:var(--preto);
  margin:clamp(30px,5vw,60px) 0 22px!important;
}
.woocommerce-cart .woocommerce > .cart-empty,
.woocommerce-cart .woocommerce > .return-to-shop{
  grid-column:1/-1;
  justify-self:center;
}
.woocommerce-cart .woocommerce:has(.cart-empty){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  min-height:clamp(240px,28vw,360px);
  padding-top:clamp(18px,3vw,36px);
  text-align:center;
}
.woocommerce-cart .woocommerce > .cart-empty.woocommerce-info{
  width:min(100%,560px);
  max-width:560px;
  margin:0!important;
  padding:0!important;
  border-left:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:clamp(1.12rem,2vw,1.36rem);
  line-height:1.65;
  color:var(--preto)!important;
}
.woocommerce-cart .woocommerce > .return-to-shop{
  margin:0!important;
}
.woocommerce-cart .woocommerce > .return-to-shop .button{
  float:none!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:230px;
  min-height:46px;
  margin:0!important;
  padding:13px 22px!important;
  border-radius:2px!important;
  background:var(--preto)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px var(--preto);
  font-family:var(--ui)!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  letter-spacing:.2em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
  transform:none!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease!important;
}
.woocommerce-cart .woocommerce > .return-to-shop .button:hover{
  background:#fff!important;
  color:var(--preto)!important;
}

@media (max-width:900px){
  .woocommerce-cart .woocommerce{grid-template-columns:1fr}
  .woocommerce-cart .cart-collaterals{grid-column:1}
  .woocommerce .cart_totals{position:static}
  .woocommerce table.cart thead{display:none}
  .woocommerce table.cart td{display:block;text-align:right;padding:10px 0!important;border:0!important}
  .woocommerce table.cart tr.cart_item{display:block;padding:18px 0;border-bottom:1px solid var(--linha)}
  .woocommerce table.cart td.product-thumbnail{text-align:left}
  .woocommerce table.cart td::before{
    content:attr(data-title);float:left;
    font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza);
  }
  .woocommerce table.cart td.product-thumbnail::before,
  .woocommerce table.cart td.product-remove::before{display:none}
  .woocommerce table.cart td.actions .coupon{flex-wrap:wrap}
  .woocommerce-cart .stylee-cart-continuar-topo{
    display:block;
    width:100%;
    margin:0 0 22px;
    box-sizing:border-box!important;
  }
  .woocommerce-cart .stylee-cart-continuar-topo .stylee-cart-continuar--topo{
    float:none!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:52px;
    margin:0!important;
    padding:15px 16px!important;
    border-radius:2px!important;
    background:#fff!important;
    color:var(--preto)!important;
    box-shadow:inset 0 0 0 1px var(--linha);
    font-family:var(--ui)!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.18em;
    text-align:center;
    text-transform:uppercase;
    white-space:normal;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .woocommerce-cart .stylee-cart-continuar-topo .stylee-cart-continuar--topo:hover{
    background:#fff!important;
    color:var(--rosa)!important;
    transform:none!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FINALIZAÇÃO DE COMPRA
   ══════════════════════════════════════════════════════════════════════════
   Dados à esquerda, resumo do pedido à direita e grudado na tela. O resumo é o
   que sustenta a decisão de comprar: ele não pode sumir enquanto ela preenche o
   endereço. */
.woocommerce-checkout form.checkout{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,3.6vw,58px);align-items:start;
}
.woocommerce-checkout form.checkout .col2-set{grid-column:1;grid-row:1/span 2;width:auto!important;display:block}
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2{width:auto!important;float:none!important;margin-bottom:34px}
.woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 14px!important}
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order{
  grid-column:2;grid-row:2;
  background:var(--areia);padding:clamp(22px,2.6vw,30px);border-radius:4px;
  position:sticky;top:calc(var(--header-h) + 18px);
}
.woocommerce-checkout h3,.woocommerce-checkout #order_review_heading{
  font-family:var(--ui)!important;font-size:11px!important;font-weight:500!important;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cinza);
  padding-bottom:12px;border-bottom:1px solid var(--linha);margin:0 0 22px;
}
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td{
  padding:12px 0!important;border-bottom:1px solid rgba(0,0,0,.07)!important;background:none!important;font-size:14px;
}
.woocommerce-checkout .woocommerce-checkout-review-order tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order tfoot .order-total td{
  border-bottom:0!important;padding-top:16px!important;font-size:1.05rem;font-weight:600;
}

.woocommerce-checkout ul.payment_methods{
  list-style:none!important;margin:20px 0 0!important;padding:0!important;border:0!important;
  display:grid;gap:10px;
}
.woocommerce-checkout ul.payment_methods li{
  margin:0!important;padding:14px 16px!important;
  border:1px solid var(--linha);border-radius:4px;background:#fff;
  transition:border-color .3s ease;
}
.woocommerce-checkout ul.payment_methods li:hover{border-color:var(--rosa)}
.woocommerce-checkout ul.payment_methods li label{
  display:inline;font-family:var(--ui);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--preto);cursor:pointer;
}
.woocommerce-checkout ul.payment_methods li input[type="radio"]{margin-right:8px;accent-color:var(--rosa)}
.woocommerce-checkout .payment_box{
  background:var(--areia)!important;border-radius:3px;margin:12px 0 0!important;padding:14px 16px!important;
  font-size:13.5px;line-height:1.65;color:#4a4642;
}
.woocommerce-checkout .payment_box::before{display:none!important}
.woocommerce-checkout #place_order{width:100%;margin-top:18px!important}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:16px;font-size:13px}

.woocommerce-form-coupon-toggle .woocommerce-info{background:none!important;border-left:0!important;padding:0 0 18px!important}
.woocommerce form.checkout_coupon{
  border:1px solid var(--linha)!important;border-radius:4px;padding:20px!important;margin:0 0 26px!important;
}

@media (max-width:900px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr}
  .woocommerce-checkout form.checkout .col2-set,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order{grid-column:1;grid-row:auto}
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order{position:static}
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE CONTEÚDO (Sobre, Onde estamos, Contato)
   ══════════════════════════════════════════════════════════════════════════ */
.stylee-pagina .entry-content{max-width:820px;margin:0 auto}
.stylee-pagina .entry-content p{margin:0 0 20px;font-size:1.04rem;line-height:1.85;color:#4a4642}
.stylee-pagina .entry-content h2{
  font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.4vw,1.7rem);
  margin:44px 0 16px;color:var(--preto);
}
.stylee-pagina .entry-content h3{
  font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);margin:36px 0 12px;font-weight:500;
}
.stylee-pagina .entry-content a{color:var(--rosa);border-bottom:1px solid rgba(191,42,89,.3)}
.stylee-pagina .entry-content a:hover{border-bottom-color:var(--rosa)}
.stylee-pagina .entry-content ul{margin:0 0 22px;padding-left:20px}
.stylee-pagina .entry-content li{margin-bottom:9px;line-height:1.8;color:#4a4642}
.stylee-pagina .entry-content hr{border:0;border-top:1px solid var(--linha);margin:44px 0}

/* Blocos de destaque montados com o editor do WordPress. */
.stylee-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:0 0 28px}
.stylee-cartao{
  padding:26px 24px;background:var(--areia);border-radius:4px;
  border-top:2px solid var(--rosa);
}
.stylee-cartao strong{
  display:block;font-family:var(--ui);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rosa);margin-bottom:10px;font-weight:500;
}
.stylee-cartao span{display:block;font-size:.98rem;line-height:1.7;color:#4a4642}


/* ══════════════════════════════════════════════════════════════════════════
   CORREÇÕES DE CAIXA (WooCommerce)
   ══════════════════════════════════════════════════════════════════════════
   Este tema não usa `box-sizing:border-box` global — mudar isso agora deslocaria o
   site inteiro. Então aplicamos onde de fato importa: em tudo que recebeu
   `width:100%` junto com preenchimento. Sem isto, `100%` vira "100% MAIS o padding":
   o botão de finalizar media 212px dentro de um painel de 129px e vazava para fora,
   e o mesmo aconteceria com todos os campos do checkout. */
.woocommerce .input-text,.woocommerce input[type="text"],.woocommerce input[type="email"],
.woocommerce input[type="tel"],.woocommerce input[type="password"],.woocommerce input[type="number"],
.woocommerce textarea,.woocommerce select,.woocommerce-page .input-text,.woocommerce-page select,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout .stylee-cart-continuar,
.woocommerce-cart .stylee-cart-continuar-topo .stylee-cart-continuar,
.woocommerce-checkout #place_order,
.woocommerce ul.products li.product .button,
.woocommerce .cart_totals,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order,
.woocommerce-checkout ul.payment_methods li,
.woocommerce form.checkout_coupon,
.stylee-cartao{
  box-sizing:border-box;
}

/* A foto do item no carrinho estava sendo espremida pela largura da coluna: o
   `max-width:100%` do WooCommerce vence a largura que pedimos. Aqui a moldura manda. */
.woocommerce table.cart td.product-thumbnail{width:96px}
.woocommerce table.cart img{max-width:none!important;min-width:78px}


/* ══════════════════════════════════════════════════════════════════════════
   BLINDAGEM CONTRA O CSS DA LOJA (2ª vez — agora o rodapé)
   ══════════════════════════════════════════════════════════════════════════
   Nas páginas de loja o <body> ganha `woocommerce-page`, e o woocommerce-layout.css
   traz `.woocommerce-page img{height:auto;max-width:100%}`. Como o seletor tem uma
   classe MAIS um elemento (0,1,1), ele vence qualquer regra nossa de classe só
   (0,1,0) — e a logo do rodapé voltava ao tamanho natural do arquivo: 467x268 no
   lugar de 70x40, arrebentando o rodapé só na loja, no carrinho e no checkout.

   Foi exatamente o que aconteceu antes com a logo do chat. A regra vale para o tema
   inteiro: TODA imagem que o tema dimensiona por conta própria precisa de seletor
   com dois níveis, senão o CSS de escopo de página passa por cima.

   O cabeçalho já escapava por acaso (`.stylee-header__logo img` também é 0,1,1 e a
   nossa folha carrega depois) — mas ficar dependendo de ordem de carregamento é
   sorte, não projeto. Por isso ele entra aqui junto. */
.stylee-footer .stylee-footer__logo{height:40px;width:auto;max-width:none}
.stylee-header .stylee-header__logo img{height:46px;width:auto;max-width:none}
.stylee-drawer img{max-width:none}

/* O rodapé é o mesmo em todas as páginas: nada de escopo de loja deve alterá-lo. */
.woocommerce-page .stylee-footer,.woocommerce .stylee-footer{
  background:var(--preto);color:rgba(255,255,255,.66);
}


/* ══════════════════════════════════════════════════════════════════════════
   BLOCOS DA PÁGINA PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════ */

/* Vitrine na home: usa o MESMO cartão da loja (shortcode [products] → ul.products),
   e não o bloco `woocommerce/product-new`, que gera outra estrutura (wc-block-grid)
   e ficaria sem nenhum dos nossos estilos — duas vitrines diferentes no mesmo site. */
.stylee-vitrine .woocommerce{margin:0}
.stylee-vitrine ul.products{margin:0!important}

/* Cartão sobre fundo areia precisa ser branco: areia sobre areia some. */
.stylee-secao--areia .stylee-cartao{background:#fff}
.stylee-cartoes{margin-bottom:0}

/* Convite da LIA: faixa clara entre os banners. O eyebrow rosa ja assina a secao;
   um fio em top:0 parecia fazer parte da imagem anterior. */
.stylee-convite{position:relative;background:#fff}
.stylee-convite .stylee-lead{color:#4a4642}

/* Dois botões lado a lado, que viram um embaixo do outro no celular. */
.stylee-acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2rem}

/* O <button> não herda tipografia do documento em vários navegadores, e nasce com
   a caixa de conteúdo do sistema — sem isto ele fica menor que os links irmãos. */
button.stylee-btn{box-sizing:border-box;font-family:var(--ui);line-height:1.2}


/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENU DE CATEGORIAS
   ══════════════════════════════════════════════════════════════════════════
   Vive dentro do <header>, que é fixed e ocupa a largura toda: o painel desce
   colado nele sem cálculo nenhum de posição no JS. */
.stylee-mega{
  position:absolute;top:100%;left:0;right:0;z-index:899;
  /* Mesmo caso do cabeçalho: 97% opaco não deixa ver desfoque nenhum, e o painel é
     grande e fixo — recompor o que está atrás dele a cada quadro é o que fazia a tela
     piscar. Ver o comentário em .stylee-header. */
  background:rgba(10,10,10,.97);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.4);
  /* Fecha para cima, como uma persiana. `visibility` entra junto porque só opacidade
     deixaria o painel invisível MAS clicável, roubando cliques do conteúdo. */
  opacity:0;visibility:hidden;transform:translateY(-10px);
  /* Mesma correcao do chat (15/08/2026): a transicao vive no estado ABERTO. Fechado, o
     painel e 0 seco e nao tem de onde animar — nem quando o navegador resolve o estilo
     dele pela primeira vez. O  daqui era justamente o que
     mantinha o painel VISIVEL durante os 380ms da queda de opacidade. */
  /* ESTE ERA O BUG DO PAINEL FANTASMA (André, 10/08/2026).
     Ele reaparecia sozinho quando o mouse subia de volta na direção do "Loja", antes
     de chegar lá. O `visibility:hidden` acima faz o painel sumir — mas com 0,38s de
     ATRASO, porque é esse o tempo do esmaecimento. Some a isso os 0,24s de folga que
     o JS espera antes de fechar: existia uma janela de mais de meio segundo em que o
     painel estava invisível para os olhos e VIVO para o mouse. Entrar naquela faixa
     disparava o `mouseenter` dele, que reabria o menu — e a pessoa jurava não ter
     encostado em nada, porque de fato não tinha.
     `pointer-events` não é animável: ele vira no instante em que a classe sai. Isso
     fecha a janela inteira, sem depender de nenhum tempo. */
  pointer-events:none;
}
.stylee-mega.is-aberto{pointer-events:auto}
/* [hidden] é a rede para quem chega sem JS: o painel simplesmente não existe. */
.stylee-mega[hidden]{display:none}
.stylee-mega.is-aberto{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility 0s linear 0s;
}
.stylee-mega__inner{
  max-width:1320px;margin:0 auto;
  padding:clamp(26px,3vw,42px) clamp(16px,4vw,44px);
  display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,3vw,52px);align-items:start;
}
.stylee-mega__col{display:block}
/* `auto-fit`, e não `auto-fill` (10/08/2026): com duas categorias, o `auto-fill`
   reservava cinco colunas de 180px e punha as duas na primeira ponta — Bolsas e
   Mochilas espremidas à esquerda e um deserto até a coluna da direita. O `auto-fit`
   descarta as colunas vazias e as categorias ocupam a largura toda, viram fileiras
   de menu de verdade. Quando o catálogo tiver seis, ele volta a formar grade sozinho. */
.stylee-mega__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.stylee-mega__lado{
  padding-left:clamp(20px,2.4vw,36px);
  border-left:1px solid rgba(255,255,255,.1);
}
.stylee-mega__nota{
  margin:0 0 22px;font-size:.94rem;line-height:1.75;color:rgba(255,255,255,.72);
}
.stylee-mega__lado .stylee-btn{display:block;width:100%;text-align:center;padding-left:1rem;padding-right:1rem}

/* Cartão de categoria — o mesmo objeto no menu e na home, em dois tamanhos. */
.stylee-cat{display:flex;align-items:center;gap:12px;padding:8px;border-radius:4px;transition:background .3s var(--ease)}
.stylee-cat:hover{background:rgba(255,255,255,.06)}
.stylee-cat__moldura{
  flex:0 0 54px;width:54px;height:54px;overflow:hidden;border-radius:3px;
  background:linear-gradient(135deg,#1e1c1b,#2b2724);display:block;
}
.stylee-mega .stylee-cat__foto,.stylee-cats .stylee-cat__foto{
  width:100%;height:100%;object-fit:cover;display:block;max-width:none;
  transition:transform 1s var(--ease);
}
.stylee-cat:hover .stylee-cat__foto{transform:scale(1.07)}
.stylee-cat__txt{min-width:0;display:block}
.stylee-cat__nome{
  display:block;font-family:var(--display);font-size:1.02rem;color:#fff;line-height:1.3;
  transition:color .3s ease;
}
.stylee-cat:hover .stylee-cat__nome{color:var(--rosa)}
.stylee-cat__n{
  display:block;margin-top:3px;
  font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ── O painel por dentro (10/08/2026) ──────────────────────────────────────
   A foto de 54px era um selo, não uma imagem: no menu de uma loja de bolsas
   ninguém reconhecia a peça ali dentro. Aqui ela cresce para 84px, a fileira
   ganha ar e uma seta que só aparece quando o ponteiro chega — o painel deixa de
   ser uma lista de links e passa a ser uma vitrine curta. */
.stylee-mega .stylee-cat{
  gap:16px;padding:10px 14px 10px 10px;
  border:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.stylee-mega .stylee-cat:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.stylee-mega .stylee-cat__moldura{flex:0 0 84px;width:84px;height:84px;border-radius:2px}
.stylee-mega .stylee-cat__nome{font-size:1.16rem}
.stylee-mega .stylee-cat__n{margin-top:5px}

/* Seta desenhada com duas bordas — sem fonte de ícone, sem SVG, sem requisição. */
.stylee-mega .stylee-cat::after{
  content:"";flex:none;margin-left:auto;width:7px;height:7px;
  border-right:1px solid rgba(255,255,255,.4);
  border-top:1px solid rgba(255,255,255,.4);
  opacity:0;transform:translateX(-6px) rotate(45deg);
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease);
}
.stylee-mega .stylee-cat:hover::after{
  opacity:1;transform:translateX(0) rotate(45deg);
  border-color:var(--rosa);
}

/* Fio rosa fechando o painel: é o mesmo fio que assina as páginas, e dá um fim ao
   bloco preto em vez de deixá-lo derreter na página. */
.stylee-mega{border-bottom:1px solid rgba(191,42,89,.4)}

/* ── A ABERTURA DO PAINEL (10/08/2026) ─────────────────────────────────────
   O conteúdo sobe DEPOIS do painel, em cascata — abrir tudo de uma vez fazia o bloco
   inteiro aparecer como um cartaz. Fecha instantâneo de propósito: ninguém quer
   esperar uma animação para o menu sair da frente.

   Aqui a entrada ganhou três camadas que trabalham juntas, e nenhuma delas é enfeite
   solto — as três já existem na linguagem do site:

   1. AS DUAS COLUNAS VÊM DE LADOS DIFERENTES. A das categorias sobe; a do recado
      entra pela direita. Duas colunas subindo iguais lêem como um bloco só; vindo de
      direções distintas, a pessoa entende na hora que são duas coisas.
   2. AS FOTOS SE ACOMODAM. Cada miniatura entra 6% maior e assenta no tamanho certo.
      É o mesmo gesto que a vitrine da home faz ao revelar as categorias.
   3. AS MAIÚSCULAS SE FECHAM. Os rótulos ("CATEGORIAS", "SEM PRESSA") entram com o
      espaçamento aberto e se recolhem ao normal. É um gesto de casa de moda, custa
      um `letter-spacing` e é o detalhe que faz o painel parecer caro.

   Nada disso toca `clip-path` no painel preto — foi animar clip-path num retângulo
   preto de tela cheia que criou a camada de GPU do "pisca preto" em 09/08. O painel
   continua entrando por opacidade e deslocamento, que não promovem camada permanente,
   e continua em `opacity:0` enquanto fechado. */
.stylee-mega .stylee-eyebrow,
.stylee-mega .stylee-cat,
.stylee-mega__nota,
.stylee-mega__lado .stylee-btn{
  /* 6px, e não 10: o deslocamento do cartão virou detalhe, porque quem carrega a
     entrada agora é a foto entrando em foco. Movimento grande e revelação ao mesmo
     tempo competem, e o resultado lê como pressa. */
  opacity:0;transform:translateY(6px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}

/* 1. A coluna da direita entra pela direita, e não de baixo. */
.stylee-mega__lado .stylee-eyebrow,
.stylee-mega__nota,
.stylee-mega__lado .stylee-btn{transform:translateX(16px)}
.stylee-mega.is-aberto .stylee-mega__lado .stylee-eyebrow,
.stylee-mega.is-aberto .stylee-mega__nota,
.stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{transform:none}

/* 2. A FOTO ENTRA FORA DE FOCO E ASSENTA. Era um `scale(1.06)` seco; agora entra 11%
      maior e desfocada, e encontra o foco — o mesmo gesto do mosaico da home, para o
      site inteiro revelar imagem do mesmo jeito. O tempo é maior que o do texto de
      propósito: a imagem continua se acomodando depois de a palavra já ter chegado. */
.stylee-mega .stylee-cat__foto{transform:scale(1.11);filter:blur(7px)}
.stylee-mega.is-aberto .stylee-cat__foto{
  transform:none;filter:none;
  transition:transform 1.2s var(--ease),filter .8s var(--ease);
}
/* Passado o mouse, quem manda no zoom volta a ser o hover (regra de `.stylee-cat`). */
.stylee-mega.is-aberto .stylee-cat:hover .stylee-cat__foto{transform:scale(1.07)}

/* E o texto do cartão sobe DEPOIS da foto: primeiro a pessoa vê a peça, depois lê o
   nome dela. Invertido, o nome chega sobre um borrão. */
.stylee-mega .stylee-cat__txt{
  opacity:0;transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.stylee-mega.is-aberto .stylee-cat__txt{opacity:1;transform:none;transition-delay:.22s}

/* 3. As maiúsculas se fecham ao entrar. */
.stylee-mega .stylee-eyebrow{letter-spacing:.52em}
.stylee-mega.is-aberto .stylee-eyebrow{
  letter-spacing:.32em;
  transition:opacity .4s var(--ease),transform .4s var(--ease),letter-spacing .8s var(--ease);
}

/* 4. E o fio rosa do rodapé do painel varre de uma ponta à outra, fechando a abertura.
      É a assinatura que já aparece embaixo do título de cada página — aqui ela entra
      em movimento, e é a última coisa a acontecer. */
.stylee-mega{border-bottom-color:transparent}
.stylee-mega::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--rosa);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.stylee-mega.is-aberto::after{transform:scaleX(1);transition:transform .7s var(--ease) .18s}
.stylee-mega.is-aberto .stylee-eyebrow,
.stylee-mega.is-aberto .stylee-cat,
.stylee-mega.is-aberto .stylee-mega__nota,
.stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{opacity:1;transform:none}
/* Cascata mais aberta (0,08s entre peças, era 0,05): com a revelação mais longa, o
   passo curto fazia as seis entrarem praticamente juntas e a cascata sumia. */
.stylee-mega.is-aberto .stylee-cat:nth-child(1){transition-delay:.08s}
.stylee-mega.is-aberto .stylee-cat:nth-child(2){transition-delay:.16s}
.stylee-mega.is-aberto .stylee-cat:nth-child(3){transition-delay:.24s}
.stylee-mega.is-aberto .stylee-cat:nth-child(4){transition-delay:.32s}
.stylee-mega.is-aberto .stylee-cat:nth-child(5){transition-delay:.40s}
.stylee-mega.is-aberto .stylee-cat:nth-child(6){transition-delay:.48s}
/* A foto de cada cartão acompanha o atraso do próprio cartão — sem isto todas as
   fotos saem do borrão ao mesmo tempo e a cascata só existe no texto. */
.stylee-mega.is-aberto .stylee-cat:nth-child(1) .stylee-cat__foto{transition-delay:.08s}
.stylee-mega.is-aberto .stylee-cat:nth-child(2) .stylee-cat__foto{transition-delay:.16s}
.stylee-mega.is-aberto .stylee-cat:nth-child(3) .stylee-cat__foto{transition-delay:.24s}
.stylee-mega.is-aberto .stylee-cat:nth-child(4) .stylee-cat__foto{transition-delay:.32s}
.stylee-mega.is-aberto .stylee-cat:nth-child(5) .stylee-cat__foto{transition-delay:.40s}
.stylee-mega.is-aberto .stylee-cat:nth-child(6) .stylee-cat__foto{transition-delay:.48s}
.stylee-mega.is-aberto .stylee-mega__lado .stylee-eyebrow{transition-delay:.14s}
.stylee-mega.is-aberto .stylee-mega__nota{transition-delay:.22s}
.stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{transition-delay:.3s}
/* O botão perdia o pulinho do hover porque a regra da cascata acima é mais
   específica que `.stylee-btn:hover`. Devolvido aqui. */
.stylee-mega.is-aberto .stylee-mega__lado .stylee-btn:hover{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .stylee-mega .stylee-eyebrow,
  .stylee-mega .stylee-cat,
  .stylee-mega__nota,
  .stylee-mega__lado .stylee-btn{opacity:1;transform:none;transition-delay:0s!important}
  .stylee-mega .stylee-cat::after{transition:none}
  /* As três camadas da abertura também respeitam quem pediu menos movimento: a foto
     nasce no tamanho certo, o rótulo no espaçamento certo e o fio já inteiro. */
  .stylee-mega .stylee-cat__foto{transform:none;filter:none}
  .stylee-mega .stylee-cat__txt{opacity:1;transform:none}
  .stylee-mega .stylee-eyebrow{letter-spacing:.32em}
  .stylee-mega::after{transform:scaleX(1);transition:none}
}

/* O item "Loja" ganha uma seta que gira quando o painel abre. */
.stylee-nav__list .stylee-tem-mega > a::before{
  content:"";position:absolute;right:-13px;top:50%;
  width:5px;height:5px;margin-top:-4px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);transform-origin:center;
  transition:transform .38s var(--ease);
}
.stylee-nav__list .stylee-tem-mega{position:relative;margin-right:13px}
body.stylee-mega-aberto .stylee-nav__list .stylee-tem-mega > a::before{transform:rotate(-135deg)}

/* ── Categorias no menu do celular: TRILHO DE FOTOS ────────────────────────
   A lista de texto empurrava a sexta categoria para fora da tela. Aqui as seis cabem
   na altura de UMA, porque quem rola é o trilho, para o lado, com o polegar.

   O trilho VAZA para fora da margem do menu (margem negativa de um lado, recuo do
   outro): assim o último cartão visível fica cortado pela borda da tela, que é o
   sinal universal de "tem mais para cá" — sem seta, sem texto, sem ensinar nada. */
/* O TRILHO SAI JUNTO COM O MENU (10/08/2026).
   Ele não tinha transição nenhuma: enquanto a cortina preta encolhia em 0,8s, as fotos
   das categorias ficavam paradas e inteiras por cima, e só sumiam de uma vez no último
   quadro, quando o `visibility` vira `hidden`. O menu saía; as categorias eram
   apagadas. Agora obedecem à mesma regra dos itens do menu e do rodapé do menu:
   escalonado ao ABRIR, imediato ao FECHAR — ninguém quer esperar animação para o menu
   sair da frente. */
.stylee-drawer__cats{
  margin-top:clamp(20px,4vw,34px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
  opacity:0;
  transition:opacity .4s var(--ease);
  transition-delay:0s;
}
body.stylee-menu-aberto .stylee-drawer__cats{opacity:1;transition-delay:.45s}

.stylee-catm{
  transform:translateY(18px);
  transition:transform .55s var(--ease);
  transition-delay:0s;
}
body.stylee-menu-aberto .stylee-catm{transform:none}
body.stylee-menu-aberto .stylee-trilho > :nth-child(1){transition-delay:.5s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(2){transition-delay:.56s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(3){transition-delay:.62s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(4){transition-delay:.68s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(5){transition-delay:.74s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(6){transition-delay:.8s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(7){transition-delay:.86s}
body.stylee-menu-aberto .stylee-trilho > :nth-child(8){transition-delay:.92s}

@media (prefers-reduced-motion:reduce){
  .stylee-drawer__cats,
  .stylee-catm{transition:none}
  .stylee-catm{transform:none}
  body.stylee-menu-aberto .stylee-trilho > *{transition-delay:0s!important}
}
.stylee-trilho{
  display:flex;gap:10px;
  margin:14px calc(-1 * clamp(28px,8vw,64px)) 0 0;
  padding:0 clamp(28px,8vw,64px) 4px 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Barra de rolagem escondida: num trilho de 6 cartões ela é ruído, e o corte na
     borda já conta a história melhor do que ela contaria. */
  scrollbar-width:none;
}
.stylee-trilho::-webkit-scrollbar{display:none}

.stylee-catm{
  flex:0 0 116px;scroll-snap-align:start;
  display:block;
}
.stylee-catm__moldura{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/5;border-radius:3px;margin-bottom:9px;
  background:linear-gradient(135deg,#1e1c1b,#2b2724);
}
.stylee-catm .stylee-cat__foto{
  width:100%;height:100%;object-fit:cover;display:block;max-width:none;
  transition:transform .6s var(--ease);
}
.stylee-catm:active .stylee-cat__foto{transform:scale(1.05)}
.stylee-catm__nome{
  display:block;font-family:var(--display);font-size:.98rem;color:#fff;line-height:1.25;
}
.stylee-catm__n{
  display:block;margin-top:3px;
  font-family:var(--ui);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.stylee-catm.is-vazia .stylee-catm__n{color:var(--rosa)}

/* O último cartão não é categoria: é a porta para a vitrine inteira. Moldura vazada
   com uma seta, para se ler como ação e não como uma peça sem foto. */
.stylee-catm--tudo .stylee-catm__moldura{
  background:none;border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
.stylee-catm__seta{
  width:11px;height:11px;
  border-right:1px solid rgba(255,255,255,.7);
  border-top:1px solid rgba(255,255,255,.7);
  transform:rotate(45deg);margin-left:-4px;
}

/* ── Bloco de categorias na home ──
   FLEX, e não grade. Com `grid-template-columns:repeat(auto-fill,minmax(200px,1fr))`
   o navegador cria a fileira inteira de colunas e encaixa as categorias existentes
   nas PRIMEIRAS — duas categorias nasciam encostadas à esquerda, com o resto da
   fileira vazio. Em flex com `justify-content:center`, a quantidade que houver se
   acomoda sozinha no meio, e a última fileira incompleta também fica centrada
   quando o catálogo crescer. Nada a mexer aqui a cada categoria nova. */
.stylee-cats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,24px);
}
/* A largura é uma FAIXA, não um número: o cartão cresce até 330px em tela grande e
   encolhe até 150px no celular, onde duas categorias ainda cabem lado a lado.
   Subiu de 258 para 330 em 10/08/2026: com seis categorias, o cartão antigo formava
   uma fileira de quatro e deixava duas órfãs embaixo. A 330 cabem TRÊS por fileira —
   duas fileiras cheias, e cada peça com o dobro de presença. */
.stylee-cats .stylee-cat{flex:0 1 clamp(150px,26vw,330px);max-width:100%}

/* Entrada em cascata: as categorias sobem juntas, mas com um respiro entre elas —
   a fileira se monta da esquerda para a direita em vez de piscar inteira de uma vez.
   O `:not(.is-visivel)` na foto faz o zoom valer SÓ na entrada; depois de revelada a
   regra deixa de casar e o zoom de passar o mouse volta a mandar sozinho. */
.stylee-cats .stylee-reveal{transform:translateY(28px) scale(.96)}
.stylee-cats .stylee-reveal.is-visivel{transform:none}
.stylee-cats .stylee-reveal:not(.is-visivel) .stylee-cat__foto{transform:scale(1.12)}
.stylee-cats .stylee-reveal:nth-child(2){transition-delay:.09s}
.stylee-cats .stylee-reveal:nth-child(3){transition-delay:.18s}
.stylee-cats .stylee-reveal:nth-child(4){transition-delay:.27s}
.stylee-cats .stylee-reveal:nth-child(5){transition-delay:.36s}
.stylee-cats .stylee-reveal:nth-child(6){transition-delay:.45s}
.stylee-cats .stylee-reveal:nth-child(7){transition-delay:.54s}
.stylee-cats .stylee-reveal:nth-child(8){transition-delay:.63s}

/* Estas regras são mais específicas que a isenção geral de movimento lá em cima e
   vêm depois dela — sem repetir aqui, quem pediu menos animação no sistema veria
   as categorias animando assim mesmo. */
@media (prefers-reduced-motion:reduce){
  .stylee-cats .stylee-reveal{opacity:1;transform:none;transition-delay:0s!important}
  .stylee-cats .stylee-reveal:not(.is-visivel) .stylee-cat__foto{transform:none}
}
/* ── O CARTÃO DA HOME: O NOME MORA DENTRO DA FOTO (10/08/2026) ─────────────
   Antes era foto, e embaixo dela o nome em preto e a contagem em cinza. Funcionava e
   não dizia nada: a mesma anatomia de uma tabela de produtos. Numa página de moda o
   que vende é a IMAGEM, e o rótulo tem de pertencer a ela.

   Agora o nome entra sobre a foto, apoiado num degradê que escurece só o rodapé do
   cartão. O degradê não é enfeite: as fotos são de rua, com luz e fundo diferentes em
   cada uma, e texto branco direto sobre foto clara some. O véu garante a leitura em
   qualquer foto que o André subir depois, sem ele precisar pensar nisso.

   Ao passar o mouse: a foto aproxima, o véu fecha um pouco mais e um fio rosa cresce
   da esquerda sob o nome — o mesmo fio que assina o resto do site. */
.stylee-cat--grande{
  position:relative;display:block;padding:0;gap:0;
  overflow:hidden;border-radius:3px;background:none!important;
}
.stylee-cat--grande .stylee-cat__moldura{
  flex:none;width:100%;height:auto;aspect-ratio:4/5;border-radius:0;
  background:var(--areia);
}
.stylee-cat--grande::after{
  content:"";position:absolute;inset:auto 0 0;height:62%;pointer-events:none;
  background:linear-gradient(to top,rgba(12,10,9,.86) 0%,rgba(12,10,9,.5) 42%,rgba(12,10,9,0) 100%);
  transition:opacity .45s var(--ease);
}
.stylee-cat--grande:hover::after{opacity:.92}
.stylee-cat--grande .stylee-cat__txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(14px,1.6vw,22px);
  text-align:left;
}
.stylee-cat--grande .stylee-cat__nome{
  color:#fff!important;font-size:clamp(1.05rem,1.5vw,1.35rem);
  text-shadow:0 1px 14px rgba(0,0,0,.35);
}
.stylee-cat--grande .stylee-cat__n{
  color:rgba(255,255,255,.72);margin-top:5px;
}
.stylee-cat--grande.is-vazia .stylee-cat__n{color:#fff;opacity:.85}
/* O fio cresce de 0 à largura do nome. `transform` e não `width`: quem anima largura
   obriga o navegador a refazer o layout a cada quadro. */
.stylee-cat--grande .stylee-cat__nome::after{
  content:"";display:block;height:1px;margin-top:9px;background:var(--rosa);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.stylee-cat--grande:hover .stylee-cat__nome::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .stylee-cat--grande .stylee-cat__nome::after{transition:none}
}
.stylee-secao--preta .stylee-cat--grande .stylee-cat__nome{color:#fff}
.stylee-secao--preta .stylee-cat--grande .stylee-cat__n{color:rgba(255,255,255,.45)}

/* ── Categoria anunciada antes de ter peça (10/08/2026) ────────────────────
   O André cria a categoria no Bling e ela já aparece no menu e na home, dizendo
   "Em breve" no lugar da contagem. A linha vai para o ROSA: assim ela se lê como
   anúncio, e não como um número de estoque que por acaso deu zero.

   A foto NÃO é apagada: eu tinha deixado a moldura da categoria vazia em opacidade
   .8, e o André viu na hora — a imagem ficava lavada parada e só acordava com o mouse
   em cima. Quem manda no destaque é a linha rosa, não a foto. O único efeito de mouse
   nas fotos continua sendo o zoom. */
.stylee-cat.is-vazia .stylee-cat__n,
.stylee-secao--preta .stylee-cat--grande.is-vazia .stylee-cat__n{color:var(--rosa)}

/* E o fim da linha dela: a categoria vazia abre uma página que diz o que vem, com a
   porta de volta à vitrine. Sem isto, promover uma categoria sem peça era mandar a
   cliente para o "Nenhum produto encontrado" do WooCommerce. */
.stylee-vazio{
  text-align:center;
  max-width:520px;margin:0 auto;
  padding:clamp(40px,6vw,80px) clamp(20px,4vw,40px);
  border:1px solid var(--linha);border-radius:3px;
}
.stylee-vazio p{
  margin:0 0 26px;font-size:1.06rem;line-height:1.8;color:var(--cinza);
}

@media (max-width:1100px){
  .stylee-mega__inner{grid-template-columns:1fr}
  .stylee-mega__lado{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
}
/* No celular quem manda é a cortina do hambúrguer: o painel de hover não existe. */
@media (max-width:900px){
  .stylee-mega{display:none!important}
}


/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO E CHECKOUT — largura
   ══════════════════════════════════════════════════════════════════════════
   `.stylee-pagina .entry-content` limita a 820px, que é ótimo para texto corrido
   (linha longa demais cansa a leitura) e PÉSSIMO aqui: carrinho e checkout são
   tabela + painel lateral, e em 820px o nome do produto empilha uma palavra por
   linha. Estas páginas usam a largura inteira do invólucro. */
.woocommerce-cart .stylee-pagina .entry-content,
.woocommerce-checkout .stylee-pagina .entry-content,
.woocommerce-account .stylee-pagina .entry-content,
.woocommerce-order-received .stylee-pagina .entry-content{
  max-width:none;
}

/* O painel do total tem largura MÍNIMA: abaixo disso o rótulo "Total no carrinho"
   quebra em três linhas e o botão de finalizar vaza. */
.woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr)}
.woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}

/* Coluna do produto: é ela que precisa do espaço, não o preço. */
.woocommerce table.cart td.product-name{width:auto;min-width:220px;padding-right:20px!important}
.woocommerce table.cart td.product-name a{display:block;line-height:1.4}
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal{white-space:nowrap;text-align:right}
.woocommerce table.cart th.product-price,
.woocommerce table.cart th.product-subtotal{text-align:right}
.woocommerce table.cart td.product-quantity{width:100px}

/* Linha do cupom: o campo, o botão de aplicar e o de atualizar numa linha só.
   Sem isto o "Atualizar carrinho" flutua por cima do cupom (era a caixa cinza
   solta que aparecia embaixo). */
.woocommerce table.cart td.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.woocommerce table.cart td.actions .coupon{flex:1 1 auto;max-width:460px}
.woocommerce table.cart td.actions > .button{float:none!important;margin:0!important}
.woocommerce table.cart td.actions .button[disabled]{opacity:.35;cursor:not-allowed}

/* Rótulos do painel: em uma linha, não empilhados. */
.woocommerce .cart_totals th{white-space:nowrap;padding-right:14px!important;width:1%}
.woocommerce .cart_totals td{text-align:right}
.woocommerce .cart_totals .woocommerce-shipping-methods{margin:0;padding:0;list-style:none;text-align:left}
.woocommerce .cart_totals .woocommerce-shipping-methods li{margin-bottom:8px;line-height:1.45}
.woocommerce .cart_totals .woocommerce-shipping-destination{margin-top:10px;font-size:13px;line-height:1.6;color:var(--cinza)}
.woocommerce .wc-proceed-to-checkout a.checkout-button{
  white-space:normal;line-height:1.3;padding-left:1.2rem!important;padding-right:1.2rem!important;
}

/* Resumo do pedido no checkout: mesma disciplina. */
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th{white-space:nowrap;text-align:left}
.woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td{text-align:right}
.woocommerce-checkout .woocommerce-checkout-review-order .product-name{text-align:left;line-height:1.4}

@media (max-width:900px){
  .woocommerce-cart .woocommerce,
  .woocommerce-checkout form.checkout{grid-template-columns:1fr}
  .woocommerce table.cart td.actions{display:block}
  .woocommerce table.cart td.actions .coupon{max-width:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO — correções medidas na página real
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) `display:flex` numa <td> com COLSPAN destrói o cálculo de largura das colunas:
      a célula sai do fluxo da tabela e o navegador jogou 329px na coluna do "remover",
      empurrando a tabela inteira para a direita. A célula volta a ser célula; quem
      recebe o flex é o bloco do cupom, por dentro. */
.woocommerce table.cart td.actions{
  display:table-cell;text-align:left;
  padding:22px 0!important;border-bottom:0!important;
}
.woocommerce table.cart td.actions .coupon{
  display:inline-flex;gap:10px;align-items:center;
  float:none!important;vertical-align:middle;
}
.woocommerce table.cart td.actions .coupon .input-text{flex:0 1 240px;width:240px!important}
.woocommerce table.cart td.actions > button.button,
.woocommerce table.cart td.actions > input.button{float:right!important;margin:0!important}

/* 2) O WooCommerce impõe `.cart_totals{float:right;width:48%}` — dentro da nossa
      coluna de 407px isso virava um painel de 196px, e daí o texto do frete quebrando
      palavra por palavra. A coluna já é a largura certa; o painel ocupa ela inteira. */
.woocommerce .cart-collaterals{width:100%!important;float:none!important}
.woocommerce .cart-collaterals .cart_totals{float:none!important;width:100%!important}
.woocommerce .cart-collaterals .cross-sells{width:100%!important;float:none!important}

/* 3) Colunas com largura proporcional ao que carregam. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove{width:44px;padding-left:0!important}
.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail{width:96px}

/* 4) Linha do frete.
      Tentei empilhar (rótulo em cima, opções embaixo) com `display:block` nas células
      — não funciona: a linha da tabela recria uma célula anônima em volta e o conteúdo
      encolhe para caber, dando 120px em vez dos 343 disponíveis.
      O que funciona é manter célula de tabela e espremer o RÓTULO: com "Envio" em
      `width:1%` e sem quebra, o valor fica com todo o resto (~280px), que é espaço de
      sobra para "Correios Sedex (1 a 3 dias úteis): R$ 16,21". */
.woocommerce .cart_totals tr.woocommerce-shipping-totals th{
  vertical-align:top;padding-top:15px!important;
}
.woocommerce .cart_totals tr.woocommerce-shipping-totals td{
  text-align:left;padding-left:14px!important;
}
.woocommerce .cart_totals .woocommerce-shipping-methods li label{
  display:inline;font-size:13.5px;line-height:1.5;color:var(--tinta);
}
.woocommerce .cart_totals .woocommerce-shipping-methods li input[type="radio"]{
  margin-right:7px;accent-color:var(--rosa);
}
.woocommerce .cart_totals .woocommerce-shipping-destination{text-align:left}
.woocommerce .cart_totals .shipping-calculator-button{color:var(--rosa)}

/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO NO CELULAR
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* O WooCommerce ESCONDE a foto no celular (`shop_table_responsive td.product-thumbnail
     {display:none}`). Numa loja de bolsa isso é justamente o que a cliente quer ver
     antes de decidir — a foto volta, e grande. */
  .woocommerce table.shop_table_responsive tr td.product-thumbnail,
  .woocommerce-page table.shop_table_responsive tr td.product-thumbnail{
    display:block!important;text-align:left!important;padding-bottom:14px!important;
  }
  .woocommerce table.cart td.product-thumbnail img{width:120px!important;height:150px}
  .woocommerce table.cart td.product-thumbnail::before{display:none!important}
  .woocommerce table.cart td.product-name{min-width:0}
  .woocommerce table.cart td.actions{display:block;text-align:left}
  .woocommerce table.cart td.actions .coupon{display:flex;flex-wrap:wrap;width:100%}
  .woocommerce table.cart td.actions .coupon .input-text{flex:1 1 160px;width:auto!important}
  .woocommerce table.cart td.actions > button.button,
  .woocommerce table.cart td.actions > input.button{float:none!important;width:100%;margin-top:12px!important}
}


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT NO CELULAR
   ══════════════════════════════════════════════════════════════════════════
   O checkout é a página onde a desistência custa caro. Cada atrito aqui é uma
   venda que não acontece. */
@media (max-width:900px){

  /* 16px NÃO é escolha de estética: abaixo disso o iPhone dá zoom sozinho ao focar
     o campo. Num formulário de 15 campos, a tela pula quinze vezes e a pessoa
     precisa recuar o zoom a cada uma. É o pior atrito do checkout no celular. */
  .woocommerce-checkout .input-text,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout input[type="password"],
  .woocommerce-checkout input[type="number"],
  .woocommerce-checkout textarea,
  .woocommerce-checkout select,
  .woocommerce-cart .input-text,
  .woocommerce-cart select{
    font-size:16px!important;
    padding:14px!important;
  }

  /* Rótulo legível e com respiro entre campos. */
  .woocommerce-checkout form .form-row label{font-size:12px;letter-spacing:.1em;margin-bottom:8px}
  .woocommerce-checkout form .form-row{margin-bottom:20px}

  /* Nome e sobrenome deixam de dividir a linha: em 335px, dois campos lado a lado
     dão 160px cada, e "sobrenome" não cabe. */
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last{width:100%;float:none;margin-right:0}

  /* Botão de finalizar: largura toda e alvo de toque generoso. É o último clique
     da compra — não pode ser o menor botão da tela. */
  .woocommerce-checkout #place_order{
    width:100%!important;display:block;padding:18px 16px!important;font-size:12.5px!important;
  }

  /* Painel do resumo: menos preenchimento lateral devolve ~14px de conteúdo,
     que fazem diferença numa tela de 375. */
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order{padding:18px}

  /* Forma de pagamento: a LINHA inteira vira alvo de toque, não só o círculo de
     13px do rádio. Dedo não acerta 13px com confiança. */
  .woocommerce-checkout ul.payment_methods li{padding:0!important}
  .woocommerce-checkout ul.payment_methods li label{
    display:block;padding:16px 16px 16px 14px;cursor:pointer;line-height:1.4;
  }
  .woocommerce-checkout ul.payment_methods li input[type="radio"]{
    width:20px;height:20px;margin-right:10px;vertical-align:-4px;
  }
  .woocommerce-checkout ul.payment_methods li .payment_box{margin:0 14px 14px!important}
  .woocommerce-checkout ul.payment_methods li img{max-height:26px;width:auto;display:inline-block;vertical-align:middle}

  /* Resumo do pedido: rótulo e valor sem apertar um ao outro. */
  .woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th{width:auto;white-space:normal;padding-right:10px!important}
  .woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td{white-space:nowrap}

  /* Caixa de aceite e cupom acompanham a largura. */
  .woocommerce form.checkout_coupon{padding:16px!important}
  .woocommerce form.checkout_coupon .form-row{width:100%;float:none;margin-right:0}
  .woocommerce form.checkout_coupon .button{width:100%}
}

/* Nome e sobrenome lado a lado só enquanto couberem.
   Duas correções aqui:
   1) ESPECIFICIDADE. O WooCommerce usa `.woocommerce form .form-row-first` (0,2,1) e
      vencia o meu `.woocommerce-checkout .form-row-first` (0,2,0) — os campos
      continuavam lado a lado por mais que eu mandasse empilhar.
   2) PONTO DE QUEBRA. Empilhar já em 900px é cedo: numa tela de 800 os dois campos
      ficam com 349px cada, o que é confortável. O aperto começa mesmo abaixo de 600,
      onde cada um cairia para ~157px e "Sobrenome" não cabe. */
@media (max-width:600px){
  .woocommerce-checkout form.checkout .form-row-first,
  .woocommerce-checkout form.checkout .form-row-last,
  .woocommerce form.checkout_coupon .form-row-first,
  .woocommerce form.checkout_coupon .form-row-last{
    width:100%;float:none;margin-right:0;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MERCADO PAGO NO CELULAR — conter o formulário dentro da tela
   ══════════════════════════════════════════════════════════════════════════
   Sintoma relatado: no celular o checkout "vira desktop" e tudo fica em miniatura.
   Causa: o formulário do gateway é MAIS LARGO que a tela. Para enxergá-lo a pessoa
   afasta o zoom, e aí o site inteiro encolhe junto.

   Achados no CSS do plugin (assets/css/checkouts/mp-plugins-components.min.css):
     · `.mp-input-with-tooltip-tooltip-*` — dicas de ajuda com `position:absolute`,
       `left:100%` e `min-width:220px`. Numa tela estreita elas nascem FORA do
       container e esticam a página.
     · `#mp-3ds-modal-content{width:800px}`, `#mp-3ds-frame{min-width:600px}`,
       `#mp-loading-container-3ds{width:704px}` — a janela do 3-D Secure, que aparece
       na autenticação do cartão. Larguras de desktop, fixas.

   Aqui vale `!important` — não por preguiça, mas porque o plugin já usa `!important`
   nas próprias regras e é a única forma de vencê-las sem editar arquivo de terceiro
   (que a próxima atualização apagaria). */
@media (max-width:768px){

  /* Trava geral: nada dentro da área de pagamento passa da largura disponível.
     É a rede que pega o que eu não previ — o plugin muda a cada versão. */
  .woocommerce-checkout .payment_box,
  .woocommerce-checkout .payment_box *,
  .woocommerce-checkout ul.payment_methods,
  .woocommerce-checkout ul.payment_methods *,
  #mp-checkout-custom-root,
  #mp-checkout-custom-root *,
  #mp-checkout-pix-root,
  #mp-checkout-pix-root *,
  .mp-checkout-container,
  .mp-checkout-container *{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* As dicas saem do posicionamento absoluto e viram texto no fluxo. Continuam
     legíveis, param de esticar a página. */
  .mp-checkout-container [class*="mp-input-with-tooltip-tooltip"]{
    position:static!important;
    transform:none!important;
    min-width:0!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    margin-top:8px!important;
  }

  /* Campos e selects do cartão acompanham a coluna. */
  .mp-checkout-container input,
  .mp-checkout-container select,
  #mp-checkout-custom-root input,
  #mp-checkout-custom-root select{
    width:100%!important;min-width:0!important;font-size:16px!important;
  }

  /* Janela do 3-D Secure: larguras de desktop viram largura de tela. */
  #mp-3ds-modal-content{width:100%!important;max-width:100%!important;padding:24px!important}
  #mp-3ds-frame{min-width:0!important;width:100%!important}
  #mp-loading-container-3ds,
  #content-load-3ds{width:100%!important;max-width:100%!important}

  /* Última barreira: se ainda sobrar algo largo, ele rola DENTRO da caixa de
     pagamento em vez de esticar a página inteira. */
  .woocommerce-checkout .payment_box{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* E a página nunca rola de lado. */
  html{overflow-x:hidden;max-width:100%}
}

/* ══════════════════════════════════════════════════════════════════════════
   UMA COLUNA NO CELULAR — e por que esta regra está no FIM do arquivo
   ══════════════════════════════════════════════════════════════════════════
   Este CSS foi crescendo em blocos. Um bloco posterior redefiniu a grade do
   checkout (`minmax(0,1.15fr) minmax(320px,.85fr)`) SEM media query — e, por vir
   depois com a mesma especificidade, passou por cima da regra móvel escrita antes.
   No celular o formulário voltou a montar duas colunas: `#customer_details` media
   743px numa tela de 375, e os campos de cobrança sangravam junto. O `minmax(320px)`
   da segunda coluna sozinho já não cabe.

   Ficando no fim do arquivo, nada mais sobrescreve — e o `!important` protege de um
   próximo bloco cometer o mesmo erro. É a última palavra sobre a largura no celular. */
@media (max-width:900px){
  .woocommerce-checkout form.checkout{grid-template-columns:1fr!important}
  .woocommerce-cart .woocommerce{grid-template-columns:1fr!important}

  .woocommerce-checkout form.checkout .col2-set,
  .woocommerce-checkout form.checkout #order_review_heading,
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order,
  .woocommerce-cart .cart-collaterals,
  .woocommerce-cart .woocommerce-cart-form{
    grid-column:1!important;grid-row:auto!important;
    min-width:0!important;max-width:100%!important;
  }

  /* `min-width:auto` é o padrão de item de grade e impede encolher abaixo do
     conteúdo — é o que faz uma coluna "empurrar" a página mesmo com a grade certa. */
  .woocommerce-checkout form.checkout > *,
  .woocommerce-cart .woocommerce > *{min-width:0!important}

  .woocommerce-checkout .woocommerce-checkout-review-order{position:static!important}
  .woocommerce .cart_totals{position:static!important}
}

/* Select2 e a tabela do resumo — os dois últimos a transbordar no celular.
   O Select2 (usado pelo WooCommerce nos campos "Tipo de Pessoa" e "Estado") grava a
   largura INLINE no momento em que é construído. Se ele nasce enquanto o layout ainda
   está largo, fica com essa largura para sempre — media query não alcança estilo
   inline, por isso o `!important`.
   A tabela do resumo precisa de `table-layout:fixed`: sem isso o nome longo do produto
   define a largura da coluna e estica a tabela inteira. */
@media (max-width:900px){
  .woocommerce-checkout .select2-container,
  .woocommerce-checkout .select2-container .selection,
  .woocommerce-checkout .select2-selection,
  .woocommerce-checkout .select2-selection__rendered,
  .woocommerce-checkout .woocommerce-input-wrapper,
  .woocommerce .select2-container{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  .woocommerce-checkout .select2-selection__rendered{
    overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap;
  }
  .woocommerce-checkout .woocommerce-input-wrapper{display:block!important}

  .woocommerce-checkout .woocommerce-checkout-review-order table.shop_table,
  .woocommerce-cart table.shop_table{
    table-layout:fixed!important;width:100%!important;max-width:100%!important;
  }
  .woocommerce-checkout .woocommerce-checkout-review-order table.shop_table td,
  .woocommerce-checkout .woocommerce-checkout-review-order table.shop_table th{
    word-break:break-word;overflow-wrap:anywhere;white-space:normal!important;
  }
}

/* Forma de pagamento: círculo e texto na MESMA linha.
   Ao transformar o <label> em bloco (para o toque pegar a linha inteira), o <input
   type=radio>, que é irmão anterior, passou a ocupar uma linha sozinho acima do texto.
   A linha vira flex: círculo e texto lado a lado, e a caixa de detalhes quebra para
   baixo ocupando a largura toda. */
@media (max-width:900px){
  .woocommerce-checkout ul.payment_methods li{
    display:flex!important;flex-wrap:wrap;align-items:center;
  }
  .woocommerce-checkout ul.payment_methods li input[type="radio"]{
    flex:0 0 auto;margin:0 0 0 14px!important;
  }
  .woocommerce-checkout ul.payment_methods li label{
    flex:1 1 0;padding:16px 14px 16px 10px!important;margin:0!important;
  }
  .woocommerce-checkout ul.payment_methods li label img{margin-left:8px}
  .woocommerce-checkout ul.payment_methods li .payment_box{flex:1 1 100%;order:9}

  /* O botão de finalizar ocupava 267px de 335: a linha que o envolve tinha
     preenchimento próprio. */
  .woocommerce-checkout .form-row.place-order{padding:0!important;margin-bottom:0!important}
  .woocommerce-checkout .form-row.place-order #place_order{width:100%!important;max-width:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   CELULAR: o pagamento na MESMA faixa dos campos de cobrança
   ══════════════════════════════════════════════════════════════════════════
   Medido em 375px: campo de cobrança 335px, mas o formulário do Mercado Pago só
   237px. Cada nível acrescentava recuo — painel 18, caixa de detalhes 14 de margem
   mais 16 de preenchimento, raiz do gateway mais 16. Somados, 98px de largura útil
   perdidos justamente onde a cliente digita o cartão.

   A régua passa a ser a borda EXTERNA: a linha do método de pagamento começa e
   termina exatamente onde os campos de cobrança começam e terminam. O respiro fica
   por conta do preenchimento interno do próprio gateway, uma vez só. */
@media (max-width:900px){
  /* O painel perde o recuo lateral (mantém o vertical) — no celular ele é a coluna
     inteira, não um cartão dentro dela. */
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order{
    padding-left:0!important;padding-right:0!important;
    padding-top:18px!important;padding-bottom:18px!important;
    background:transparent!important;
  }
  /* O título e a tabela do resumo continuam com o respiro do painel. */
  .woocommerce-checkout #order_review_heading{padding-left:0;padding-right:0}

  .woocommerce-checkout ul.payment_methods{margin-left:0!important;margin-right:0!important}
  .woocommerce-checkout ul.payment_methods li{background:#fff}

  /* Some a margem e o preenchimento que espremiam o gateway. */
  .woocommerce-checkout ul.payment_methods li .payment_box{
    margin:0!important;padding:14px 12px!important;
  }
  #mp-checkout-custom-root,
  #mp-checkout-pix-root,
  #mp-checkout-pro-root,
  #mp-checkout-ticket-root,
  .mp-checkout-container{
    padding-left:0!important;padding-right:0!important;width:100%!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FUNDO DO BLOCO DE PAGAMENTO
   ══════════════════════════════════════════════════════════════════════════
   O `#payment` vem do WooCommerce com `background:rgba(129,110,153,.14)` — um lilás
   que não é de lugar nenhum da nossa identidade — e SEM preenchimento. No computador
   isso passava batido porque o painel areia dava o respiro por fora; no celular, onde
   tirei esse recuo para o gateway ganhar largura, o texto da política de privacidade
   ficou colado na borda.
   Agora o respiro é do próprio bloco, e a cor é a areia da casa. */
.woocommerce-checkout #payment{
  background:var(--areia)!important;
  border-radius:4px;
  padding:16px!important;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{
  margin:16px 0 0;font-size:12.5px;line-height:1.65;color:#4a4642;
}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text p{margin:0}
.woocommerce-checkout #payment .form-row.place-order{margin-top:16px!important}

@media (max-width:900px){
  /* Preenchimento um pouco menor no celular: cada pixel devolvido vai para o
     formulário do cartão, que é o mais apertado da tela. */
  .woocommerce-checkout #payment{padding:14px!important}
  .woocommerce-checkout ul.payment_methods li .payment_box{padding:12px 10px!important}
  .woocommerce-checkout #payment .woocommerce-privacy-policy-text{margin-top:14px}
  .woocommerce-checkout #payment .form-row.place-order{margin-top:14px!important;padding:0!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO E CHECKOUT — legibilidade e densidade
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) "Atualizar carrinho" desabilitado estava ILEGÍVEL: fundo preto (10,10,10) com
      texto quase preto (22,22,22) — o estado desabilitado não herdava o branco — e
      tudo a 35% de opacidade. Virava cinza sobre cinza.
      Desabilitado passa a ser um botão VAZADO: fundo claro, contorno e texto cinza.
      Continua evidente que está inativo, mas dá para ler o que ele faz. */
.woocommerce table.cart td.actions .button[disabled],
.woocommerce table.cart td.actions .button:disabled,
.woocommerce table.cart td.actions button[disabled]{
  opacity:1!important;
  background:#fff!important;
  color:var(--cinza)!important;
  box-shadow:inset 0 0 0 1px var(--linha);
  cursor:not-allowed;
}

/* 2) NOME DE PRODUTO: Jost, não Playfair — em TODA página onde ele aparece.
      Motivo concreto: o "&" da Playfair Display é decorativo e desenha um símbolo
      antigo — em "Mochila V&V Finder" fica parecendo erro de digitação.
      Eu tinha limitado isto ao carrinho e ao checkout, argumentando que "na loja e na
      página da peça o nome é título". Errado: o nome do produto não é manchete do
      site, é o NOME DE UMA COISA que a cliente vai comprar — e o "&" quebrado
      atrapalha igual na vitrine, na página da peça e no carrinho. (09/08/2026, André)
      O que continua em Playfair é o que de fato é título: "Loja", "Carrinho",
      "Categorias", as chamadas da home. Nenhum deles tem "&". */
.woocommerce table.cart td.product-name,
.woocommerce table.cart td.product-name a,
.woocommerce-checkout .woocommerce-checkout-review-order .product-name,
.woocommerce-checkout .woocommerce-checkout-review-order td.product-name a{
  font-family:var(--ui)!important;
  font-size:.95rem!important;
  line-height:1.5;
  letter-spacing:.005em;
}
/* A vitrine e a página da peça. Ficam DEPOIS da regra da linha ~657, que reaplicava
   Playfair com !important — em CSS acrescentado em camadas, quem vem por último manda,
   e é por isso que a correção anterior não alcançou estas duas telas. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title,
.woocommerce div.product .entry-title{
  font-family:var(--ui)!important;
  font-weight:500;
  letter-spacing:.005em;
}
/* O tamanho do título na página da peça vinha junto da regra em Playfair; a Jost
   desenha maior no mesmo corpo, então baixa um pouco para não virar manchete. */
.woocommerce div.product .product_title{
  font-size:clamp(1.35rem,2.6vw,1.9rem)!important;
  line-height:1.3;
}

/* 3) RÓTULOS dos campos: estavam em 11px, cinza claro e peso 400 — pouco contraste
      justamente enquanto a pessoa preenche. Sobem para 12px, cor de texto e peso 500,
      com menos espaçamento entre letras (1,32px era muito para rótulo curto). */
.woocommerce form .form-row label,
.woocommerce-checkout form .form-row label{
  font-size:12px;
  color:var(--tinta);
  font-weight:500;
  letter-spacing:.06em;
  margin-bottom:5px;
}
.woocommerce .required{color:var(--rosa)}

/* 4) DENSIDADE. Cada campo ocupava 97px de altura (rótulo 22 + 7 + campo 48 + 20 de
      intervalo). Em 17 campos isso é meia tela de rolagem só de ar. Campo um pouco
      mais baixo (44px, ainda confortável para o dedo) e intervalo menor. */
.woocommerce form .form-row,
.woocommerce-checkout form .form-row{margin-bottom:12px}
.woocommerce .input-text,.woocommerce input[type="text"],.woocommerce input[type="email"],
.woocommerce input[type="tel"],.woocommerce input[type="password"],.woocommerce input[type="number"],
.woocommerce textarea,.woocommerce select,
.woocommerce-page .input-text,.woocommerce-page select{
  padding:11px 14px!important;
}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{margin-top:26px!important;margin-bottom:16px!important}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{margin-bottom:22px}

/* 5) O respiro da PÁGINA. Carrinho e checkout não são página de leitura: o topo
      generoso das páginas de texto aqui só empurra o conteúdo para baixo. */
.woocommerce-cart .stylee-secao,
.woocommerce-checkout .stylee-secao,
.woocommerce-account .stylee-secao{
  padding-top:calc(var(--header-h) + 30px);
  padding-bottom:clamp(40px,5vw,64px);
}
.woocommerce-cart .stylee-pagina__topo,
.woocommerce-checkout .stylee-pagina__topo{margin-bottom:26px}

/* 6) Linhas da tabela do carrinho um pouco mais justas. */
.woocommerce table.cart td{padding:16px 10px 16px 0!important}

@media (max-width:900px){
  /* No celular o campo volta a 16px de fonte (zoom do iPhone) — a altura vem do
     preenchimento, não da fonte. */
  .woocommerce-checkout .input-text,
  .woocommerce-checkout select,
  .woocommerce-checkout textarea{padding:12px 14px!important}
  .woocommerce-checkout form .form-row{margin-bottom:12px}
  .woocommerce form .form-row label{font-size:12px;margin-bottom:5px}
}

/* ══════════════════════════════════════════════════════════════════════════
   TÍTULO E MARGENS DE CARRINHO / CHECKOUT
   ══════════════════════════════════════════════════════════════════════════ */
.woocommerce-cart .stylee-secao,
.woocommerce-checkout .stylee-secao,
.woocommerce-account .stylee-secao{
  padding-top:calc(var(--header-h) + 16px);
  padding-bottom:clamp(32px,4vw,52px);
}
.woocommerce-cart .stylee-pagina__topo,
.woocommerce-checkout .stylee-pagina__topo{margin-bottom:16px}
.woocommerce-cart .stylee-pagina__topo .stylee-titulo,
.woocommerce-checkout .stylee-pagina__topo .stylee-titulo{margin-bottom:0}
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin-bottom:6px}

@media (max-width:600px){
  /* Margem lateral menor: cada pixel devolvido vai para o formulário, e 14px já
     separam o conteúdo da borda o suficiente para não parecer cortado. */
  .woocommerce-cart .stylee-secao,
  .woocommerce-checkout .stylee-secao{padding-left:14px!important;padding-right:14px!important}
  .woocommerce-cart .stylee-pagina__topo,
  .woocommerce-checkout .stylee-pagina__topo{margin-bottom:12px}
  .woocommerce-cart .stylee-secao{padding-top:calc(var(--header-h) + 10px)}
  .woocommerce-checkout .stylee-secao{padding-top:calc(var(--header-h) + 10px)}
}

/* A lista de erros que sobrar (cartão recusado, cupom inválido) com a cara do site. */
.woocommerce-NoticeGroup-checkout ul.woocommerce-error{
  margin:0 0 18px!important;padding:14px 18px!important;
  background:rgba(191,42,89,.06)!important;border-left:2px solid var(--rosa)!important;
  list-style:none;
}
.woocommerce-NoticeGroup-checkout ul.woocommerce-error li{margin:0 0 6px;font-size:13.5px;line-height:1.5}
.woocommerce-NoticeGroup-checkout ul.woocommerce-error li:last-child{margin-bottom:0}

/* Mensagem embaixo do campo: discreta, mas legível. É ela que passa a ser a única. */
.woocommerce form .form-row .woocommerce-error,
.woocommerce form .form-row .error{
  display:block;margin-top:5px;font-size:12px;line-height:1.4;color:var(--rosa);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--rosa)!important}

/* ══════════════════════════════════════════════════════════════════════════
   UNIDADE DO TOPO — uma régua só para todas as páginas internas
   ══════════════════════════════════════════════════════════════════════════
   Medido antes (a 1264px): Sobre com o título em Y=216, Carrinho em 224 e Loja em
   270. Três valores, nenhum deles decidido — foram se acumulando conforme cada
   página ganhou ajuste próprio, inclusive de mim.

   Agora existe UMA regra. Fica no fim do arquivo e lista explicitamente as páginas
   de loja, porque os seletores que escrevi antes (`.woocommerce-cart .stylee-secao`)
   têm especificidade maior que `.stylee-pagina` e venceriam.

   O `<main>` já reserva a altura do cabeçalho fixo; o valor abaixo é o respiro que
   vem DEPOIS dele. */
.stylee-pagina,
.stylee-loja,
.woocommerce-cart .stylee-secao,
.woocommerce-checkout .stylee-secao,
.woocommerce-account .stylee-secao,
.woocommerce-order-received .stylee-secao{
  padding-top:clamp(30px,4.5vw,64px)!important;
  padding-bottom:clamp(40px,5vw,72px)!important;
}

/* Mesma distância entre o título e o conteúdo em toda página. */
.stylee-pagina__topo,
.woocommerce-cart .stylee-pagina__topo,
.woocommerce-checkout .stylee-pagina__topo{
  margin-bottom:clamp(20px,2.6vw,32px)!important;
}
.stylee-pagina__topo .stylee-titulo{margin-bottom:0}

/* A Loja não usa `.stylee-pagina__topo` (o título vem do WooCommerce), então o mesmo
   respiro é montado com o título mais a frase de abertura. */
/* O FIO VEM COLADO NO TÍTULO, COMO NAS OUTRAS PÁGINAS (10/08/2026).
   Era esta a diferença que sobrava: nas outras três é título → fio → texto, e na Loja
   estava título → texto → fio. O fio ficava longe do título e o cabeçalho inteiro mais
   alto, então "Loja" parecia estar mais embaixo que "Sobre" ou "Contato". Agora o fio
   pertence ao título nas quatro páginas, e a frase de abertura entra depois dele. */
.stylee-loja h1.page-title{margin-bottom:clamp(20px,2.6vw,32px)}
.stylee-loja h1.page-title::after{
  content:"";display:block;width:46px;height:1px;margin:26px auto 0;background:var(--rosa);
}
.stylee-loja__intro{margin-bottom:clamp(20px,2.6vw,32px)}
.stylee-loja__intro::after{display:none}

/* E a Loja passa a usar a MESMA coluna (10/08/2026). Faltava isto para fechar: as
   páginas internas ganharam um topo de 820px centrado, e o da Loja continuava solto na
   largura toda da tela — o título caía no mesmo lugar, mas o bloco em volta dele tinha
   outra medida, e a frase de abertura quebrava numa largura que não era a de ninguém.
   Vale para a Loja e para as páginas de categoria: as duas usam este cabeçalho. */
.stylee-loja .woocommerce-products-header{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.stylee-loja__intro{max-width:none}
/* ── A FRASE NA FAIXA, E O TEXTO DE BUSCA NO PÉ (20/08/2026, André) ────────

   A descrição saiu de cima da grade e foi para depois dela (ver `functions.php`), então
   a regra `.term-description` que estava aqui virou código morto — o WooCommerce não
   imprime mais aquele bloco. Apagada em vez de deixada «por via das dúvidas»: CSS morto
   é o que engorda um arquivo até ele bloquear a primeira pintura, e este já tem 439 KB.

   A MEDIDA DE LINHA CONTINUA VALENDO, agora no `.stylee-cat-texto`: 62 caracteres, porque
   acima de 75 o olho erra a linha na volta e a pessoa desiste do texto sem saber por quê.

   No pé ele fica MENOR e mais discreto do que era em cima. Não é economia de espaço: lá
   em cima ele interrompia quem ia comprar; aqui ele atende quem já rolou tudo e quer
   saber mais — e quem chega até o fim de uma página lê com outra disposição. */
.stylee-cat-texto{
  max-width:62ch;
  padding:clamp(28px,4vw,56px) clamp(16px,3vw,40px) clamp(36px,5vw,72px);
  font-size:.94rem;line-height:1.75;color:var(--cinza);
}
.stylee-cat-texto p{margin:0}
.stylee-cat-texto p + p{margin-top:.9em}

/* ── A FRASE DA FAIXA ──────────────────────────────────────────────────────
   Irmã da frase da capa da Loja, um degrau abaixo: a capa é o destino, a categoria é
   parada no caminho. O `max-width` em ch — e não em px — porque quem manda na quebra é a
   quantidade de letra, não a largura da tela. */
.stylee-fundo__frase{
  font-size:clamp(.95rem,1.5vw,1.5rem);
  line-height:1.55;
  /* #57514c, e NÃO `var(--cinza)` (20/08/2026, André: «não deu leitura»).

     Eu usei o cinza de interface, #8a8580, que existe para legenda em fundo BRANCO. Sobre
     o bege claro da arte ele quase some — e some justamente na frase, que é o texto que
     precisa ser lido depois do título.

     #57514c é o mesmo tom da frase da capa da Loja. Não escolhi por gosto: ele já estava
     resolvido lá, na mesma situação (texto de apoio sobre arte clara), e usar o mesmo
     valor é o que faz a categoria parecer irmã da capa em vez de prima distante. */
  color:#57514c;
  margin:clamp(10px,1.4vw,20px) 0 0;
  max-width:30ch;
}
.stylee-fundo--titulo.is-escura .stylee-fundo__frase{color:rgba(255,255,255,.9)}

/* ── O VÉU DO VÃO DE CONTRASTE ─────────────────────────────────────────────

   Só entra em arte que o PHP mediu entre 119 e 196 de luminância na metade esquerda — o
   vão onde nem texto escuro nem texto branco passam em AA (a conta está no functions.php).
   Hoje isso pega a Porta-celular (118→limite) e a Pochetes (168). As outras quatro não
   ganham nada e continuam exatamente como o André aprovou.

   Ele perguntou se não seria melhor refazer a arte da Porta-celular. Seria mais rápido e
   consertaria menos: a Pochetes também está reprovada e passou despercebida. Arte nova
   resolve a peça de hoje; a régua resolve todas as de amanhã.

   O TOM É O DA PRÓPRIA MARCA (#fffcf8, o mesmo areia da capa da Loja), e não branco puro:
   branco sobre foto quente cria uma névoa azulada que o olho lê como sujeira. E ele morre
   em 78% para não encostar na modelo — o degradê existe para dar chão ao texto, não para
   lavar a fotografia que o André compôs. */
.stylee-fundo--titulo.precisa-veu::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* ONDE O VÉU MORRE (20/08/2026, André: «reduziria a máscara para o degradê sair de cima
     do assunto»).

     Medi até onde o texto vai, para o véu terminar logo depois dele e não um dedo além:
     o título mais longo («Porta-celular», 5,99 em a 7vw) acaba em 46% da largura; a frase,
     com 30ch, acaba por volta de 22%. A modelo, nas duas artes que levam véu, começa perto
     de 47%.

     Por isso ele agora zera em 53% em vez de 78%: cobre a última letra e some antes do
     assunto. Véu é chão para o texto, não filtro sobre a fotografia. */
  background:linear-gradient(90deg,
    rgba(255,252,248,.94) 0%,
    rgba(255,252,248,.84) 20%,
    rgba(255,252,248,.48) 34%,
    rgba(255,252,248,.14) 45%,
    rgba(255,252,248,0) 53%);
}

/* No telefone a frase tem medida própria de 14em, que a 12,8px dá ~46% da largura — mais
   longe que no computador, em proporção. O véu acompanha, e só ele. */
@media (max-width:699px){
  .stylee-fundo--titulo.precisa-veu::before{
    background:linear-gradient(90deg,
      rgba(255,252,248,.94) 0%,
      rgba(255,252,248,.86) 26%,
      rgba(255,252,248,.52) 42%,
      rgba(255,252,248,.16) 54%,
      rgba(255,252,248,0) 63%);
  }
}
/* Arte escura de verdade (≤118) usa texto branco e NÃO leva véu — mas se um dia levar,
   o véu tem de escurecer, não clarear, senão apagaria a própria letra. */
.stylee-fundo--titulo.is-escura.precisa-veu::before{
  background:linear-gradient(90deg,
    rgba(20,18,17,.62) 0%,
    rgba(20,18,17,.34) 45%,
    rgba(20,18,17,0) 78%);
}

/* O MESMO TÍTULO EM TODAS ELAS (10/08/2026).
   A Loja centraliza o título, põe a frase de abertura embaixo e fecha com um fio
   rosa. Sobre, Onde Estamos e Contato faziam outra coisa: título encostado na
   esquerda da faixa de 1220px enquanto o texto delas é uma coluna de 820px
   centrada — o título começava num lugar e o texto começava 200px adiante.
   Agora o topo dessas páginas usa a MESMA coluna do texto que vem abaixo, a mesma
   escala tipográfica da Loja e o mesmo fio. Quatro páginas, uma régua só. */
.stylee-pagina__topo{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.stylee-pagina__topo .stylee-titulo{
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.15;
}
.stylee-pagina__topo::after{
  content:"";display:block;width:46px;height:1px;margin:26px auto 0;background:var(--rosa);
}

/* Carrinho, checkout, conta e pedido recebido também usam a mesma assinatura.
   O conteúdo operacional pode ocupar largura própria logo abaixo; o cabeçalho da
   página continua sendo marca, e marca precisa de uma régua só. */
.woocommerce-cart .stylee-pagina__topo,
.woocommerce-checkout .stylee-pagina__topo,
.woocommerce-account .stylee-pagina__topo,
.woocommerce-order-received .stylee-pagina__topo{
  max-width:820px;
  text-align:center;
}
.woocommerce-cart .stylee-pagina__topo .stylee-titulo,
.woocommerce-checkout .stylee-pagina__topo .stylee-titulo,
.woocommerce-account .stylee-pagina__topo .stylee-titulo,
.woocommerce-order-received .stylee-pagina__topo .stylee-titulo{
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.15;
}
.woocommerce-cart .stylee-pagina__topo::after,
.woocommerce-checkout .stylee-pagina__topo::after,
.woocommerce-account .stylee-pagina__topo::after,
.woocommerce-order-received .stylee-pagina__topo::after{
  display:block;
  content:"";
  width:46px;
  height:1px;
  margin:26px auto 0;
  background:var(--rosa);
}

@media (max-width:600px){
  .stylee-pagina,
  .stylee-loja,
  .woocommerce-cart .stylee-secao,
  .woocommerce-checkout .stylee-secao{
    padding-left:14px!important;padding-right:14px!important;
    padding-top:26px!important;
  }
}

/* Mensagem inline do WooCommerce 8+ embaixo do campo — a que passa a ser a única. */
.woocommerce form .form-row .checkout-inline-error-message{
  display:block;margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--rosa);
}

/* ══════════════════════════════════════════════════════════════════════════
   CARRINHO — remover explícito, alinhamento do envio e vão do título
   ══════════════════════════════════════════════════════════════════════════ */

/* 1) O "×" sozinho só é entendido por quem já usou loja online. Vira botão com a
      PALAVRA. O × continua como ícone porque a forma ajuda a achar; o que faltava
      era o rótulo. `font-size:0` no link apaga o caractere original (que é o texto
      do <a>), e ícone e palavra vêm dos pseudo-elementos. */
.woocommerce a.remove{
  display:inline-flex!important;align-items:center;gap:7px;
  width:auto!important;height:auto!important;line-height:1!important;
  padding:7px 13px 7px 11px;border-radius:999px;
  border:1px solid var(--linha);background:#fff!important;
  font-size:0!important;text-decoration:none;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.woocommerce a.remove::before{
  content:"✕";font-size:11px;line-height:1;color:var(--cinza);transition:color .25s ease;
}
.woocommerce a.remove::after{
  content:"Remover";
  font-family:var(--ui);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cinza);transition:color .25s ease;
}
.woocommerce a.remove:hover{background:var(--rosa)!important;border-color:var(--rosa)}
.woocommerce a.remove:hover::before,
.woocommerce a.remove:hover::after{color:#fff}

/* A coluna precisa caber o botão. Sai dos 54px de antes; o nome do produto ainda
   fica com espaço de sobra. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove{width:104px}

/* 2) Alinhamento do ENVIO. No celular o WooCommerce transforma as linhas do painel em
      blocos e injeta o rótulo com `content:attr(data-title)` — mas EM LINHA. O
      "Envio: " ficava colado no primeiro rádio, e o segundo começava na margem: dois
      alinhamentos diferentes na mesma lista. O rótulo passa a ser bloco. */
.woocommerce-cart .cart_totals td::before{
  display:block!important;float:none!important;
  margin:0 0 8px!important;text-align:left!important;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{text-align:left!important}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li{
  display:flex;align-items:flex-start;gap:8px;margin-bottom:10px;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li input[type="radio"]{
  flex:0 0 auto;margin:3px 0 0!important;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods li label{flex:1 1 auto;margin:0}
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .shipping-calculator-form{
  margin-top:14px!important;
  text-align:left!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .form-row{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0 0 13px!important;
  padding:0!important;
  text-align:left!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form label{
  display:block!important;
  margin:0 0 6px!important;
  text-align:left!important;
  color:var(--preto)!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form input.input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select,
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container{
  width:100%!important;
  max-width:100%!important;
  text-align:left!important;
  box-sizing:border-box!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form input.input-text,
.woocommerce-cart .cart_totals .shipping-calculator-form select{
  color:var(--preto)!important;
  background:#fff!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single{
  height:46px!important;
  border:1px solid var(--linha)!important;
  border-radius:3px!important;
  background:#fff!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  height:44px!important;
  padding:0 38px 0 14px!important;
  line-height:44px!important;
  text-align:left!important;
  color:var(--preto)!important;
  font-family:var(--ui)!important;
  font-size:14px!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:44px!important;
  right:8px!important;
}
.woocommerce-cart .cart_totals .shipping-calculator-form .button{
  width:100%;
  margin-top:2px!important;
}

@media (max-width:900px){
  /* 3) O vão até o primeiro produto: eram 46px de margem MAIS uma célula de 58px só
        para o "×". O botão sobe para o canto direito do item, que é onde a pessoa
        procura, e deixa de ocupar uma faixa inteira. */
  .woocommerce table.cart td.product-remove{
    text-align:right!important;padding:0 0 6px!important;
  }
  .woocommerce table.cart tr.cart_item{padding-top:14px}
  .woocommerce-cart .stylee-pagina__topo{margin-bottom:12px!important}
  .woocommerce table.cart td.product-thumbnail{padding-top:0!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   ITEM DO CARRINHO NO CELULAR — cartão compacto
   ══════════════════════════════════════════════════════════════════════════
   O modo responsivo do WooCommerce empilha CADA célula numa faixa própria: foto,
   nome, preço, quantidade e subtotal viram cinco blocos com rótulo. Um item media
   547px — mais de meia tela por bolsa — e o segundo produto ficava longe demais do
   primeiro para a pessoa comparar.

   Vira grade de duas colunas: a foto ocupa a esquerda inteira e os dados empilham à
   direita, cada um numa linha com rótulo à esquerda e valor à direita. É o formato
   que todo mundo já conhece de carrinho no celular. */
@media (max-width:900px){
  .woocommerce table.cart tr.cart_item{
    display:grid!important;
    grid-template-columns:96px minmax(0,1fr);
    column-gap:14px;
    align-items:start;
    padding:16px 0!important;
  }

  /* A foto ocupa a coluna da esquerda por toda a altura do item. */
  .woocommerce table.cart td.product-thumbnail{
    grid-column:1;grid-row:1 / span 5;
    padding:0!important;text-align:left!important;
  }
  .woocommerce table.cart td.product-thumbnail img{width:96px!important;height:120px}

  .woocommerce table.cart td.product-remove{grid-column:2;grid-row:1;padding:0 0 8px!important;text-align:right!important}
  .woocommerce table.cart td.product-name{grid-column:2;grid-row:2}
  .woocommerce table.cart td.product-price{grid-column:2;grid-row:3}
  .woocommerce table.cart td.product-quantity{grid-column:2;grid-row:4}
  .woocommerce table.cart td.product-subtotal{grid-column:2;grid-row:5}

  /* Rótulo à esquerda, valor à direita, na mesma linha. O `float` de antes empurrava
     o valor para baixo quando o texto era longo. */
  .woocommerce table.cart td.product-price,
  .woocommerce table.cart td.product-quantity,
  .woocommerce table.cart td.product-subtotal{
    display:flex!important;align-items:center;justify-content:space-between;gap:12px;
    padding:4px 0!important;text-align:right!important;
  }
  .woocommerce table.cart td::before{
    float:none!important;flex:0 0 auto;
    font-size:10px;letter-spacing:.12em;color:var(--cinza);
  }

  /* O nome não precisa do rótulo "Produto:" — é a linha mais evidente do item. */
  .woocommerce table.cart td.product-name{
    display:block!important;padding:0 0 6px!important;text-align:left!important;
  }
  .woocommerce table.cart td.product-name::before{display:none!important}
  .woocommerce table.cart td.product-name a{font-size:.92rem;line-height:1.4}

  .woocommerce table.cart td.product-quantity .quantity .qty{width:62px!important;padding:8px 4px!important}
  .woocommerce table.cart td.product-subtotal{font-weight:600}

  /* Uma linha fina separa um item do outro, no lugar do vão grande. */
  .woocommerce table.cart tr.cart_item + tr.cart_item{border-top:1px solid var(--linha)}
}

/* Cupom no celular em pé: campo e botão empilhados, ambos na largura toda.
   Antes o bloco era flex com quebra de linha — em 347px o par não cabia lado a lado,
   quebrava, e o campo ia para 100% enquanto o botão ficava com a largura do texto.
   Dava a impressão de desalinhamento, e ainda fazia "APLICAR CUPOM" quebrar em duas
   linhas. Deitado havia espaço para os dois, e por isso ficava certo. */
@media (max-width:600px){
  .woocommerce table.cart td.actions .coupon{
    display:flex!important;flex-direction:column;align-items:stretch;gap:10px;
  }
  .woocommerce table.cart td.actions .coupon .input-text{
    width:100%!important;flex:0 0 auto;
  }
  .woocommerce table.cart td.actions .coupon .button{
    width:100%;white-space:nowrap;
  }
  .woocommerce table.cart td.actions > button.button,
  .woocommerce table.cart td.actions > input.button{margin-top:10px!important;white-space:nowrap}
}

/* O campo do cupom estava preso em 220px por um `max-width` de um bloco anterior
   (do primeiro ajuste do carrinho, quando ele dividia a linha com o botão). No
   celular em pé os dois ocupam a largura toda, então o teto sai. */
@media (max-width:600px){
  .woocommerce table.cart td.actions .coupon .input-text{max-width:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT — pente fino de alinhamento
   ══════════════════════════════════════════════════════════════════════════
   Medido a 375px. A régua da página é 14 → 361; tudo que fugia disso está aqui. */

/* 1) O Select2 (Estado) tinha 43px de altura contra 47 dos demais campos: a caixa
      ficava visivelmente mais baixa que a de cima e a de baixo. O Select2 monta a
      própria estrutura, então a altura precisa ser dita nas três partes dele. */
.woocommerce-checkout .select2-container--default .select2-selection--single{
  height:47px!important;padding:0!important;
  border:1px solid var(--linha)!important;border-radius:3px!important;background:#fff!important;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:45px!important;padding-left:14px!important;padding-right:30px!important;
  color:var(--preto)!important;font-family:var(--ui);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:45px!important;right:8px!important;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--rosa)!important;
}
.woocommerce-checkout .select2-dropdown{border-color:var(--linha)!important;border-radius:3px}
.woocommerce-checkout .select2-results__option--highlighted{background:var(--rosa)!important}

/* 2) O cupom recuava 17px enquanto o bloco de pagamento recua 14 — duas réguas na
      mesma página. Passa a usar a mesma, e campo e botão ocupam a linha inteira,
      igual ao carrinho. */
.woocommerce form.checkout_coupon{padding:14px!important;margin-bottom:20px!important}
.woocommerce form.checkout_coupon .form-row{width:100%!important;float:none!important;margin:0 0 10px!important}
.woocommerce form.checkout_coupon .form-row:last-of-type{margin-bottom:0!important}
.woocommerce form.checkout_coupon .input-text,
.woocommerce form.checkout_coupon .button{width:100%!important;max-width:none!important}
.woocommerce form.checkout_coupon .clear{display:none}

/* 3) "Entregar em um endereço diferente?" parava em 336 e o quadradinho tinha 13px —
      pequeno demais para o dedo, e só ele era clicável. Agora a linha inteira é o
      alvo e o quadrado tem 20px. */
.woocommerce-checkout #ship-to-different-address{
  width:100%!important;display:block;
  margin:6px 0 14px!important;padding:0!important;border-bottom:0!important;
}
.woocommerce-checkout #ship-to-different-address label{
  display:flex!important;align-items:center;gap:10px;cursor:pointer;
  width:100%;padding:10px 0;margin:0;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta);font-weight:500;
}
.woocommerce-checkout #ship-to-different-address-checkbox{
  width:20px!important;height:20px!important;margin:0!important;flex:0 0 auto;accent-color:var(--rosa);
}

/* 4) Observações do pedido: mesmo respiro dos demais campos. */
.woocommerce-checkout .woocommerce-additional-fields{margin-top:6px}
.woocommerce-checkout .woocommerce-additional-fields h3{margin-top:18px!important}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT NO COMPUTADOR — mesma disciplina do celular
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  /* O Select2 ficou em 47px enquanto os campos, com o preenchimento menor do
     computador, ficaram em 44. Numa coluna de formulário essa diferença de 3px
     aparece como um degrau. */
  .woocommerce-checkout .select2-container--default .select2-selection--single{height:44px!important}
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px!important}
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px!important}

  /* O pagamento tinha QUATRO recuos aninhados (740 → 770 → 786 → 802), contra dois
     no celular. Cada camada tinha o próprio preenchimento e nenhuma delas foi
     decidida junto. Como o painel areia já dá o respiro, o bloco de pagamento
     deixa de repetir o fundo e o recuo — passa a ser dois níveis, igual ao celular. */
  .woocommerce-checkout form.checkout .woocommerce-checkout-review-order #payment{
    background:transparent!important;
    padding-left:0!important;padding-right:0!important;
  }
  .woocommerce-checkout ul.payment_methods li .payment_box{margin-left:0!important;margin-right:0!important}
  .woocommerce-checkout .form-row.place-order{padding:0!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   PARES DE CAMPOS NO CHECKOUT (computador)
   ══════════════════════════════════════════════════════════════════════════
   O plugin marca alguns campos como "metade da linha", mas sem formar par: Número
   ficava sozinho à esquerda com o Complemento ocupando a linha inteira embaixo;
   Bairro idem; e o Celular ficava sozinho à DIREITA, parecendo recuado sem motivo.
   Três campos órfãos numa coluna só.

   Trocamos a flutuação do WooCommerce por grade de duas colunas: por padrão tudo
   ocupa a linha inteira, e só os quatro pares que fazem sentido juntos dividem —
   Nome/Sobrenome, Número/Complemento, Bairro/Cidade, Telefone/Celular.
   Grade em vez de float porque float não sabe formar par: ele só empurra o próximo
   elemento para o lado que sobrar, e é exatamente daí que vêm os órfãos. */
@media (min-width:901px){
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper{
    display:grid;grid-template-columns:1fr 1fr;column-gap:26px;
  }
  .woocommerce-billing-fields__field-wrapper > .form-row,
  .woocommerce-shipping-fields__field-wrapper > .form-row{
    width:auto!important;float:none!important;margin-right:0!important;
    grid-column:span 2;
  }
  #billing_first_name_field,   #billing_last_name_field,
  #billing_number_field,       #billing_address_2_field,
  #billing_neighborhood_field, #billing_city_field,
  #billing_phone_field,        #billing_cellphone_field,
  #shipping_first_name_field,  #shipping_last_name_field,
  #shipping_number_field,      #shipping_address_2_field,
  #shipping_neighborhood_field,#shipping_city_field{
    grid-column:span 1;
  }

  /* O Complemento não tem rótulo próprio (o texto vem no placeholder). Sem um
     espaço reservado, ele subia e desalinhava com o Número ao lado. */
  #billing_address_2_field::before,
  #shipping_address_2_field::before{
    content:"Complemento";display:block;margin-bottom:5px;
    font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:.06em;
    text-transform:uppercase;color:var(--tinta);
  }
}

/* O País é um <select> com UMA opção (a loja só entrega no Brasil). Com a borda e o
   preenchimento de campo, ele virava uma caixinha de 72px no meio de campos de 651 —
   parecia um campo quebrado. Não é escolha, é informação: vira texto.
   O <select> continua no formulário e continua sendo enviado; só perde a aparência
   de coisa clicável, porque não há o que escolher. */
.woocommerce-checkout select.country_to_state--single,
.woocommerce-checkout .woocommerce-input-wrapper > strong{
  border:0!important;background:transparent!important;
  padding:0!important;height:auto!important;width:auto!important;
  font-family:var(--ui);font-size:15px;font-weight:500;color:var(--tinta);
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  pointer-events:none;
}
.woocommerce-checkout #billing_country_field .woocommerce-input-wrapper,
.woocommerce-checkout #shipping_country_field .woocommerce-input-wrapper{
  display:block;padding:4px 0 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   CENTRALIZAÇÃO VERTICAL DOS SELETORES
   ══════════════════════════════════════════════════════════════════════════
   Medido: no campo "Estado" o texto interno do Select2 media 59px DENTRO de uma
   caixa de 44px — ele somava um preenchimento de 8,32px em cima e embaixo a uma
   altura de linha de 42px. O texto transbordava para baixo e ficava visivelmente
   mais baixo que o do campo de CEP ao lado.

   A regra: a altura da LINHA é que centraliza, não o preenchimento. Definimos a
   altura da linha igual à altura útil da caixa (altura menos as duas bordas) e
   zeramos o preenchimento vertical. Vale para o Select2 e para os seletores
   nativos, que com `appearance:none` perdem a centralização automática do
   navegador. */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0 34px 0 14px!important;
  margin:0!important;
  height:42px!important;
  line-height:42px!important;
  font-size:14px!important;
  font-family:var(--ui)!important;
  display:block;
}
.woocommerce-checkout select:not(.country_to_state--single){
  height:44px!important;
  line-height:42px!important;
  padding-top:0!important;padding-bottom:0!important;
  padding-left:14px!important;padding-right:34px!important;
}

@media (max-width:900px){
  /* No celular os campos têm 47px (fonte 16px para o iPhone não dar zoom). */
  .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{
    height:45px!important;line-height:45px!important;font-size:16px!important;
  }
  .woocommerce-checkout select:not(.country_to_state--single){
    height:47px!important;line-height:45px!important;font-size:16px!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MERCADO PAGO — o que dá para alcançar
   ══════════════════════════════════════════════════════════════════════════
   Os CAMPOS do cartão (número, vencimento, código) são iframes do Mercado Pago e
   nenhum CSS nosso entra lá — isso é proposital: quem consegue estilizar dentro do
   iframe também conseguiria ler o que a cliente digita.

   Mas os RÓTULOS, a ordem dos blocos, os espaços e os avisos são DOM da nossa
   página. É onde dá para trabalhar.

   Se o plugin mudar os nomes das classes numa atualização, estas regras
   simplesmente param de valer e o visual volta ao padrão dele — nada quebra. */

/* 1) ORDEM. O bloco "Pague com um toque" (para quem já tem conta no Mercado Pago)
      vinha ANTES do formulário, empurrando para baixo o que a maioria vai usar.
      Quem tem conta reconhece o botão amarelo em qualquer posição; quem vai digitar
      o cartão não deveria precisar rolar para achar o primeiro campo. */
.mp-checkout-custom-container{display:flex!important;flex-direction:column}
.mp-checkout-custom-card-flags{order:1}
.mp-checkout-custom-container > test-mode{order:2}
.mp-checkout-custom-container > div:not(.mp-checkout-custom-card-flags):not(.mp-wallet-button-container-wrapper){order:3}
.mp-wallet-button-container-wrapper{order:4}

/* 2) RÓTULOS na tipografia da casa. O Mercado Pago usa Inter 14px; nossos campos
      usam Jost 12px em caixa alta. Com os dois no mesmo formulário, a área do cartão
      parecia colada de outro site. */
.mp-checkout-container label,
.mp-checkout-custom-card-row label,
.mp-checkout-custom-input-document label,
.mp-checkout-custom-installments-container label{
  font-family:var(--ui)!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  color:var(--tinta)!important;
  margin-bottom:5px!important;
}
.mp-checkout-container,
.mp-checkout-container p,
.mp-checkout-container span,
.mp-checkout-container div{font-family:var(--ui)!important}

/* 3) AVISO DE MODO TESTE com a nossa linguagem de aviso — a mesma barra rosa das
      outras mensagens do checkout. Continua evidente: ele avisa que o pagamento não
      conclui, e some sozinho quando as credenciais virarem de produção. */
.mp-test-mode-card{
  background:rgba(191,42,89,.06)!important;
  border-left:2px solid var(--rosa)!important;
  border-radius:0!important;
  padding:14px 16px!important;
  margin:0 0 18px!important;
  font-size:13px!important;line-height:1.55!important;color:#4a4642!important;
}
.mp-test-mode-card svg,.mp-test-mode-card img{display:none!important}

/* 4) BANDEIRAS alinhadas à esquerda e com respiro, em vez de coladas. */
.mp-checkout-custom-card-flags{
  display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 18px!important;
}
.mp-checkout-custom-card-flags img{width:auto!important;height:22px!important;opacity:.85}

/* 5) O bloco da carteira deixa de competir com o formulário: fica discreto, como a
      alternativa que é. */
.mp-wallet-button-container{
  border:1px solid var(--linha)!important;border-radius:4px!important;
  padding:18px 16px!important;margin:22px 0 0!important;
  background:var(--areia)!important;
}
.mp-wallet-button-title{
  font-family:var(--ui)!important;font-size:13px!important;line-height:1.5!important;
  color:#4a4642!important;margin-bottom:12px!important;
}
.mp-privacy-policy-footer{font-size:11.5px!important;color:var(--cinza)!important;margin-top:10px!important}

/* 6) Espaço entre as linhas do formulário: era 72px por linha, com o rótulo colado
      no campo de cima. */
.mp-checkout-custom-card-row{margin-bottom:14px!important}
.mp-checkout-custom-card-row:last-child{margin-bottom:0!important}
.mp-checkout-custom-input-document,
.mp-checkout-custom-installments-container{margin-top:14px!important}

/* ══════════════════════════════════════════════════════════════════════════
   MERCADO PAGO — correção de alcance
   ══════════════════════════════════════════════════════════════════════════
   Duas coisas que a primeira tentativa errou:

   1. O rótulo NÃO é um <label>. É `div.mp-input-label` dentro de um elemento
      próprio `<input-label>`. O seletor por `label` não pegava nada.
   2. A folha do plugin carrega DEPOIS da nossa e também usa `!important` — com a
      mesma especificidade, quem vem por último vence. Por isso o aviso laranja
      continuava laranja. Prefixar com `#payment` (um id) resolve de vez. */

/* Rótulos dos campos do cartão, na tipografia da casa. */
#payment .mp-input-label,
#payment .mp-checkout-custom-input-document .mp-input-label,
#payment .mp-checkout-custom-installments-container .mp-input-label{
  font-family:var(--ui)!important;
  font-size:12px!important;font-weight:500!important;
  letter-spacing:.06em!important;text-transform:uppercase!important;
  color:var(--tinta)!important;margin-bottom:6px!important;
}
#payment .mp-input-label b{color:var(--rosa)!important}

/* Aviso de modo teste com a nossa linguagem de aviso. */
#payment .mp-test-mode-card{
  background:rgba(191,42,89,.06)!important;
  border:0!important;border-left:2px solid var(--rosa)!important;
  border-radius:0!important;padding:14px 16px!important;margin:0 0 18px!important;
}
#payment .mp-test-mode-badge{
  background:var(--rosa)!important;color:#fff!important;
  width:18px!important;height:18px!important;min-width:18px!important;
  font-size:11px!important;line-height:18px!important;
}
#payment .mp-test-mode-title{
  font-family:var(--ui)!important;font-size:12.5px!important;font-weight:600!important;
  color:var(--preto)!important;letter-spacing:.02em!important;
}
#payment .mp-test-mode-description,
#payment .mp-test-mode-card p{
  font-family:var(--ui)!important;font-size:12.5px!important;line-height:1.55!important;
  color:#4a4642!important;
}
#payment .mp-test-mode-link{color:var(--rosa)!important;text-decoration:underline}

/* Mensagem de erro do Mercado Pago no mesmo tom das nossas. */
#payment .mp-helper-message{
  font-family:var(--ui)!important;font-size:12px!important;color:var(--rosa)!important;
}
#payment .mp-helper-icon svg{fill:var(--rosa)!important}

/* Carteira e bandeiras (a primeira leva pegou a ordem, faltou a aparência). */
#payment .mp-wallet-button-container{
  border:1px solid var(--linha)!important;border-radius:4px!important;
  background:var(--areia)!important;padding:18px 16px!important;margin:22px 0 0!important;
}
#payment .mp-wallet-button-title{
  font-family:var(--ui)!important;font-size:13px!important;line-height:1.5!important;
  color:#4a4642!important;
}
#payment .mp-privacy-policy-footer,
#payment .mp-privacy-policy-footer *{
  font-family:var(--ui)!important;font-size:11.5px!important;color:var(--cinza)!important;
}

/* Contador zerado fica no DOM (o WooCommerce precisa dele para substituir), mas
   invisível — carrinho vazio não mostra "0". */
.stylee-carrinho__n.is-vazio{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   VITRINE EM ROLAGEM CONTÍNUA
   ══════════════════════════════════════════════════════════════════════════
   A paginação continua no HTML de propósito: se o JavaScript falhar, ela volta a
   aparecer (o loja.js tira a classe do body) e a loja funciona como sempre. */
body.stylee-rolagem-infinita .woocommerce-pagination{display:none}

.stylee-mais{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(26px,4vw,44px) 0 clamp(10px,2vw,20px);
  font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza);min-height:44px;
}
.stylee-mais__girando{
  width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--linha);border-top-color:var(--rosa);
  animation:styleeGira .8s linear infinite;flex:0 0 auto;
}
@keyframes styleeGira{to{transform:rotate(360deg)}}
.stylee-mais__fim{color:var(--cinza);letter-spacing:.12em;text-transform:none;font-size:12.5px}

@media (prefers-reduced-motion:reduce){
  .stylee-mais__girando{animation:none;border-top-color:var(--linha)}
}

/* ══════════════════════════════════════════════════════════════════════════
   ESCOLHA DA COR POR FOTO
   ══════════════════════════════════════════════════════════════════════════
   A lista suspensa continua no HTML: se o JS falhar, ela volta a aparecer (o
   variacoes.js é quem adiciona .stylee-com-cores) e a loja funciona como sempre. */
/* Prefixo longo NÃO é enfeite: o woocommerce.css traz
   `.woocommerce div.product form.cart .variations select{display:inline-block}` — (0,4,3).
   Um `.variations.stylee-com-cores select` (0,2,1) perde e a lista continua na tela ao
   lado das miniaturas. É a mesma armadilha que já derrubou a logo do chat e a do rodapé
   neste tema: CSS de plugin com escopo profundo vence seletor curto, e ordem de arquivo
   não salva. Regra da casa: para vencer o WooCommerce, casar o caminho dele e somar a
   nossa classe. (09/08/2026) */
.woocommerce div.product form.cart .variations.stylee-com-cores select{display:none}
.woocommerce div.product form.cart .variations.stylee-com-cores .reset_variations,
body.single-product.woocommerce div.product form.cart .reset_variations{
  display:none!important;
}

.stylee-cores{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 4px}

.stylee-cor{
  position:relative;display:block;width:60px;padding:0;cursor:pointer;
  background:none;border:0;border-radius:4px;
  outline:1.5px solid transparent;outline-offset:2px;
  transition:outline-color .2s var(--ease),transform .2s var(--ease);
}
.stylee-cor img{
  display:block;width:60px;height:75px;object-fit:cover;border-radius:3px;
  background:var(--areia);
}
.stylee-cor__nome{
  display:block;margin-top:5px;font-family:var(--ui);font-size:10px;
  letter-spacing:.06em;color:var(--cinza);text-align:center;line-height:1.3;
}
.stylee-cor:hover{transform:translateY(-2px)}
.stylee-cor:hover .stylee-cor__nome{color:var(--preto)}
.stylee-cor.is-ativa{outline-color:var(--preto)}
.stylee-cor.is-ativa .stylee-cor__nome{color:var(--preto);font-weight:500}
.stylee-cor:focus-visible{outline-color:var(--rosa)}

/* Sem foto o botão vira uma pastilha com o nome — nunca um quadrado vazio. */
.stylee-cor.is-sem-foto{
  width:auto;min-width:64px;padding:9px 14px;
  border:1px solid var(--linha);border-radius:999px;background:#fff;
}
.stylee-cor.is-sem-foto .stylee-cor__nome{margin:0;font-size:11px}
.stylee-cor.is-sem-foto.is-ativa{border-color:var(--preto)}

/* Esgotada continua VISÍVEL e clicável: some com ela e a cliente acha que nunca
   existiu; riscada, ela entende que existe e acabou — e o WooCommerce avisa. */
.stylee-cor.is-esgotada img{opacity:.4}
.stylee-cor.is-esgotada .stylee-cor__nome{text-decoration:line-through;opacity:.6}

@media (max-width:560px){
  .stylee-cor,.stylee-cor img{width:54px}
  .stylee-cor img{height:68px}
}
@media (prefers-reduced-motion:reduce){
  .stylee-cor{transition:none}
  .stylee-cor:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   VITRINE GRANDE — a pegada das casas de bolsa
   ══════════════════════════════════════════════════════════════════════════
   Referência trazida pelo André (09/08/2026): Louis Vuitton, Gucci, Dolce & Gabbana.
   O que as três fazem igual, e nós não fazíamos:
     • a foto ocupa quase toda a largura da tela, com pouquíssimo respiro entre elas;
     • são POUCAS colunas — a peça tem presença, não vira miniatura de catálogo;
     • o texto é pequeno e discreto EMBAIXO, nunca competindo com a imagem.
   Estávamos com `minmax(230px,1fr)` dentro de 1320px, o que virava CINCO colunas
   pequenas num monitor largo. Aqui a contagem passa a ser intencional por faixa de
   tela, em vez de sair do cálculo automático.

   Só na LISTAGEM (loja e categoria). Carrinho, checkout e página da peça continuam
   com a largura de leitura — lá largura demais atrapalha em vez de ajudar.

   ARMADILHA que me pegou aqui: escrevi `body.post-type-archive-product .woocommerce
   ul.products` e a regra não casou com nada. A classe `.woocommerce` está NO PRÓPRIO
   body — e um elemento não é ancestral de si mesmo, então o seletor pedia um
   `.woocommerce` intermediário que não existe. Sem espaço (ou sem a classe) resolve. */
body.post-type-archive-product .stylee-loja .stylee-wrap,
body.tax-product_cat .stylee-loja .stylee-wrap{
  max-width:1720px;
  padding-left:clamp(14px,2.2vw,34px);
  padding-right:clamp(14px,2.2vw,34px);
}
/* O texto de abertura não acompanha a largura da grade: linha de 1700px é ilegível. */
body.post-type-archive-product .stylee-loja__intro{max-width:640px;margin-left:auto;margin-right:auto}

body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(22px,2.4vw,34px) clamp(8px,1vw,14px);
}
@media (min-width:900px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1340px){
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Retrato, não quadrado: bolsa é mais alta que larga, e o quadrado cortava alça e base.
   4/5 é o mesmo enquadramento dos cartões de categoria — a home e a loja passam a
   respirar igual. */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  aspect-ratio:4/5;
  margin-bottom:12px;
}

/* Texto discreto: a peça é a protagonista. */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  font-size:13px!important;line-height:1.45;color:var(--tinta);
}
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price{font-size:13px}

/* ── VITRINE DE BORDA A BORDA ──────────────────────────────────────────────
   Segunda leitura da referência (André, 09/08/2026): não é só "foto maior" — na LV a
   grade NÃO TEM MARGEM. A imagem encosta na borda da tela e na vizinha, e o único
   respiro é um fio de branco. Num monitor largo, a nossa caixa de 1720px ainda deixava
   um vazio enorme dos dois lados, e era isso que fazia parecer catálogo em vez de
   vitrine.

   O invólucro perde a largura máxima e o recuo; quem PRECISA de recuo (título, frase de
   abertura, aviso do fim da rolagem) recebe de volta, individualmente. A grade fica com
   a tela inteira. */
body.post-type-archive-product .stylee-loja .stylee-wrap,
body.tax-product_cat .stylee-loja .stylee-wrap{
  max-width:none;
  padding-left:0;
  padding-right:0;
}
body.post-type-archive-product .woocommerce-products-header,
body.post-type-archive-product .stylee-loja h1.page-title,
body.post-type-archive-product .stylee-loja__intro,
body.post-type-archive-product .stylee-mais,
body.tax-product_cat .stylee-loja h1.page-title,
body.tax-product_cat .term-description,
body.tax-product_cat .stylee-mais{
  padding-left:clamp(16px,3vw,40px);
  padding-right:clamp(16px,3vw,40px);
}

/* Fio de branco, não corredor: 2px separa sem afastar. A linha de baixo ganha um
   respiro maior porque ali o que separa é o TEXTO da peça de cima, não a foto. */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  gap:clamp(26px,2.2vw,40px) 2px;
}

/* A foto preenche a célula inteira — sem cantos arredondados, que numa grade colada
   viram falhas brancas entre as peças. */
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img{
  width:100%;
  border-radius:0;
  margin-bottom:14px;
}

/* Texto encostado na borda ficaria colado no vidro: recuo próprio, alinhado à foto.
   `.stylee-fotonav` fica de fora (16/08/2026): esta regra vale para TEXTO, e a camada de
   controles é uma sobreposição que precisa cobrir a foto de ponta a ponta. Ao entrar ela
   herdou 12,65px de recuo dos dois lados e, com `content-box`, a proporção 4/5 passou a
   ser calculada sobre a largura MENOS o recuo — a camada nasceu 32px mais curta que a
   foto e as setas ficaram acima do centro. Medido na loja: 442px de camada para 474px de
   foto. Sintoma pequeno, causa boba, e ia se repetir em toda sobreposição futura. */
body.post-type-archive-product ul.products li.product > *:not(a):not(.stylee-ultima):not(.stylee-fotonav),
body.post-type-archive-product ul.products li.product a.woocommerce-loop-product__link ~ *:not(.stylee-fotonav),
body.tax-product_cat ul.products li.product > *:not(a):not(.stylee-ultima):not(.stylee-fotonav){
  padding-left:clamp(10px,1vw,16px);
  padding-right:clamp(10px,1vw,16px);
}
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  padding-left:clamp(10px,1vw,16px);
  padding-right:clamp(10px,1vw,16px);
}
/* O selo acompanha a foto, que agora começa na borda da célula. */
body.post-type-archive-product ul.products li.product .stylee-ultima,
body.tax-product_cat ul.products li.product .stylee-ultima{left:10px;top:10px}

/* O recuo lateral de 44px não era do invólucro: vinha da SEÇÃO (.stylee-secao), que dá
   respiro a todo bloco do site. Na listagem ele precisa ir a zero — senão a grade nunca
   encosta na borda, por mais que o invólucro perca a largura máxima. O respiro VERTICAL
   continua, porque é ele que separa a vitrine do cabeçalho. */
body.post-type-archive-product .stylee-loja,
body.tax-product_cat .stylee-loja{
  padding-left:0;
  padding-right:0;
}

/* `!important` aqui não é preguiça: a regra do cartão (linha ~657) traz
   `padding:0!important` no título, e sem igualar a força o nome do produto fica colado
   na borda da tela agora que a grade é de borda a borda. Mesma história do preço. */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  padding:0 clamp(12px,1.1vw,18px)!important;
}
body.post-type-archive-product ul.products li.product .price,
body.post-type-archive-product ul.products li.product .stylee-ultima ~ .price,
body.tax-product_cat ul.products li.product .price{
  padding-left:clamp(12px,1.1vw,18px)!important;
  padding-right:clamp(12px,1.1vw,18px)!important;
}
/* O botão "Ver opções" também nasce colado; acompanha o mesmo recuo. */
body.post-type-archive-product ul.products li.product a.button,
body.tax-product_cat ul.products li.product a.button{
  margin-left:clamp(12px,1.1vw,18px);
  margin-right:clamp(12px,1.1vw,18px);
}

/* No celular existe uma regra geral com `padding-left:14px!important` para todo bloco
   interno (linha ~1818). A vitrine precisa escapar dela também — senão fica de borda a
   borda no computador e recuada no telefone, que é justamente onde a foto grande mais
   importa. O recuo VERTICAL daquela regra continua valendo. */
@media (max-width:600px){
  body.post-type-archive-product .stylee-loja,
  body.tax-product_cat .stylee-loja{
    padding-left:0!important;
    padding-right:0!important;
  }
}

/* ── RITMO DA VITRINE ──────────────────────────────────────────────────────
   O nome do produto passa a ocupar SEMPRE duas linhas de altura, mesmo quando cabe em
   uma. Não é capricho: com nomes de tamanhos diferentes, cada cartão terminava numa
   altura, e a linha da grade virava um serrote. Reservando a altura, o preço de todos
   cai na mesma linha e a grade ganha o ritmo que faz a vitrine parecer cuidada.

   Nome longo demais é cortado com reticências. A solução de verdade é nome mais curto
   no cadastro — o André já apontou isso e vamos fazer com a TINA depois; até lá, o
   corte impede que um nome de quatro linhas desmonte a fileira inteira. */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.45em);   /* casa com o line-height de 1.45 acima */
  margin-bottom:4px!important;
}

/* Sem o botão, o preço é o fecho do cartão: um pouco mais de presença. */
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price{
  font-size:14px;
  color:var(--preto);
  margin:0!important;
}

/* ── MOLDURA DA FOTO ───────────────────────────────────────────────────────
   Quem recorta o zoom é esta moldura, não o link do WooCommerce (que envolve foto E
   título — recortar nele deixaria o transbordo cair sobre o nome do mesmo jeito). */
.woocommerce ul.products li.product .stylee-foto{
  display:block;
  overflow:hidden;
  border-radius:2px;
  background:var(--areia);
  margin-bottom:14px;
  /* A PROPORÇÃO MORA AQUI, na moldura — e não só na imagem. Foi isto que causava o
     "pisca preto" na rolagem infinita (09/08/2026, diagnosticado pelo André):
     as peças novas chegam com a foto em `loading=lazy`, sem tamanho conhecido. Com a
     proporção só na <img>, a moldura nascia com altura ZERO por alguns quadros, a
     grade encolhia, e como o rodapé usa `margin-top:auto` num body `flex` de
     `min-height:100dvh`, ele SUBIA para dentro da tela — um retângulo preto de página
     inteira — e descia de novo quando a imagem carregava.
     Reservando a altura desde o primeiro quadro, não há encolhimento e o rodapé não
     se mexe. Vale para qualquer peça que chegue depois, hoje e no futuro. */
  aspect-ratio:4/5;
}
.woocommerce ul.products li.product .stylee-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  margin:0!important;border-radius:0;
}

/* ══════════════════════════════════════════════════════════════════════════
   VITRINE: DE VOLTA À LARGURA CONTROLADA
   ══════════════════════════════════════════════════════════════════════════
   Decisão de projeto, tomada com o André em 09/08/2026 depois de experimentarmos a
   borda a borda das grifes.

   Por que voltar: numa LV ou D&G a foto é EDITORIAL — mesmo fundo, mesma luz, mesmo
   enquadramento em todas. Borda a borda ali amplifica uma imagem forte. Nas nossas, o
   fundo muda de peça para peça (algumas com adereços, outras com a etiqueta à mostra),
   e a tela cheia amplifica justamente essa variação: a grade vira retalho.
   Some a isso que o resto do site — home, Sobre, carrinho, checkout — respira numa
   caixa. Uma página furando esse ritmo lê como outro site, que foi exatamente o que o
   André sentiu.

   O meio-termo: a vitrine é a página MAIS LARGA do site, mas continua sendo uma caixa.
   A peça ganha presença sem quebrar a unidade.
   Quando a fotografia estiver padronizada (fundo branco, mesmo enquadramento — que é o
   trabalho que o André e a Alexandra já começaram), vale reabrir a borda a borda. */
body.post-type-archive-product .stylee-loja,
body.tax-product_cat .stylee-loja{
  padding-left:clamp(16px,4vw,44px);
  padding-right:clamp(16px,4vw,44px);
}
@media (max-width:600px){
  body.post-type-archive-product .stylee-loja,
  body.tax-product_cat .stylee-loja{padding-left:14px!important;padding-right:14px!important}
}
body.post-type-archive-product .stylee-loja .stylee-wrap,
body.tax-product_cat .stylee-loja .stylee-wrap{
  max-width:1500px;
  margin-left:auto;margin-right:auto;
}
/* Respiro de verdade entre as peças: o fio de 2px só fazia sentido coladas na borda. */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products{
  gap:clamp(28px,2.6vw,44px) clamp(14px,1.6vw,26px);
}
/* Com a grade de volta na caixa, o texto acompanha a foto — sem recuo próprio. */
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title{
  padding:0!important;
}
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price{
  padding-left:0!important;padding-right:0!important;
}
body.post-type-archive-product ul.products li.product .stylee-ultima,
body.tax-product_cat ul.products li.product .stylee-ultima{left:12px;top:12px}

/* A cortina do menu é do CELULAR: acima de 900px o hambúrguer nem aparece (regra do
   mega menu). Deixá-la no ar em tela grande só mantinha uma camada preta de tela cheia
   viva no compositor, sem nenhuma chance de ser usada. Fora do desenho, fora do
   problema. (09/08/2026) */
@media (min-width:901px){
  .stylee-drawer{display:none}
}

/* Rede de segurança da rolagem infinita. Enquanto existe próxima página, o JS carrega
   por proximidade e o rodapé fica fora do fluxo; assim não há flash preto nem um espaço
   gigante no fim da grade. */
body.stylee-rolagem-pendente .stylee-footer{display:none}

.stylee-mais{
  min-height:0;
  padding:0;
  opacity:0;
  pointer-events:none;
}
.stylee-mais.is-carregando{
  min-height:clamp(72px,12vh,128px);
  align-items:center;
  padding:clamp(22px,3vw,36px) 0;
  opacity:1;
}
.stylee-mais.is-fim{
  min-height:0;
  align-items:center;
  padding-top:clamp(26px,4vw,44px);
  opacity:1;
  pointer-events:auto;
}
.stylee-mais:has(.stylee-mais__fim){
  min-height:0;
  align-items:center;
  padding-top:clamp(26px,4vw,44px);
  opacity:1;
  pointer-events:auto;
}
.stylee-mais:empty,
.stylee-mais.is-fim:empty{min-height:0;padding:0}

/* ══════════════════════════════════════════════════════════════════════════
   "NA VITRINE" DA HOME USA OS CARTÕES DA LOJA
   ══════════════════════════════════════════════════════════════════════════
   Pedido do André (10/08/2026). Eram duas vitrines com duas linguagens: na Loja a peça
   tem presença — poucas colunas, foto 4:5 preenchendo a célula, nome pequeno em duas
   linhas reservadas, preço fechando o cartão. Na home a mesma peça saía de um cálculo
   automático (`minmax(230px,1fr)`), que num monitor largo virava cinco colunas
   pequenas: a home mostrava miniatura de catálogo e a Loja mostrava vitrine.

   Aqui a home recebe o MESMO cartão. As regras estão repetidas de propósito, e não
   penduradas no seletor da Loja: aquele grupo é longo e cheio de exceção de página de
   listagem (rolagem infinita, aviso de fim, descrição da categoria) que a home não tem.
   Somar `.stylee-vitrine` lá dentro obrigaria a reler tudo aquilo a cada mexida numa
   das duas. Aqui é um bloco só, que cabe na tela e se lê de uma vez.

   OS NÚMEROS SÃO OS DA LOJA, CONFERIDOS UM A UM (correção de 10/08/2026). Na primeira
   tentativa eu copiei uma geração ANTERIOR das regras da vitrine: aquele arquivo tem
   três blocos sobre a mesma grade, escritos em dias diferentes, e o que vale é o
   ÚLTIMO — caixa de 1500px com recuo de 44px, e não os 1720px do meio do caminho. O
   André viu na hora: o cartão da home saía maior que o da Loja e a peça mudava de
   tamanho ao trocar de página. Sair da home e entrar na Loja tem de ser um corte
   invisível. Se um dia a Loja mudar, estes quatro valores mudam junto:
   recuo lateral, largura da caixa, contagem de colunas e vãos. */
.stylee-vitrine{
  padding-left:clamp(16px,4vw,44px);
  padding-right:clamp(16px,4vw,44px);
}
@media (max-width:600px){
  .stylee-vitrine{padding-left:14px!important;padding-right:14px!important}
}
.stylee-vitrine .stylee-wrap{
  max-width:1500px;
  margin-left:auto;margin-right:auto;
}

/* Contagem de colunas INTENCIONAL por faixa de tela — a mesma da Loja. */
.stylee-vitrine ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(28px,2.6vw,44px) clamp(14px,1.6vw,26px);
}
@media (min-width:900px){
  .stylee-vitrine ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1340px){
  .stylee-vitrine ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* A foto preenche a célula, na proporção da bolsa, sem canto arredondado. */
.stylee-vitrine ul.products li.product a img{
  width:100%;
  aspect-ratio:4/5;
  border-radius:0;
  margin-bottom:14px;
}

/* Nome em duas linhas SEMPRE, mesmo quando cabe em uma: com nomes de tamanhos
   diferentes cada cartão terminava numa altura e a fileira virava um serrote. Com a
   altura reservada, o preço de todos cai na mesma linha. */
.stylee-vitrine ul.products li.product .woocommerce-loop-product__title{
  font-size:13px!important;line-height:1.45;color:var(--tinta);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(2 * 1.45em);
  margin-bottom:4px!important;
  padding:0!important;
}

/* Sem botão no cartão, o preço é o fecho: um pouco mais de presença. */
.stylee-vitrine ul.products li.product .price{
  font-size:14px;
  color:var(--preto);
  margin:0!important;
  padding-left:0!important;padding-right:0!important;
}

/* O selo de última peça acompanha a foto, que começa na borda da célula. */
.stylee-vitrine ul.products li.product .stylee-ultima{left:12px;top:12px}

/* ══════════════════════════════════════════════════════════════════════════
   BANNERS DE CAMPANHA NA HOME
   ══════════════════════════════════════════════════════════════════════════
   Seis peças 16:9 com a manchete cravada na metade esquerda da arte. Por isso NÃO há
   `object-fit:cover` aqui, que é o jeito habitual de fazer banner de borda a borda:
   recortar a lateral apagaria o texto — a queixa que o André fez sobre os vídeos no
   celular. A imagem aparece inteira e a altura acompanha a largura da tela.

   Sem largura máxima: num monitor de 1920 o banner tem 1920 de largura e 1080 de
   altura, que é o tamanho real de uma peça de campanha. É o que "toda a largura da
   página" quer dizer, e é assim que as casas de moda fazem.

   O fundo AREIA embaixo da imagem não é decoração: enquanto o arquivo não chegou, o
   espaço já está reservado (o WordPress escreve width/height na tag) e precisa ter
   alguma cor. Sem ele, sobra o preenchimento padrão do compositor — o mesmo preto que
   caçamos por quatro tentativas em 09 e 10/08/2026. */
.stylee-banner{
  display:block;width:100%;margin:0;
  background:var(--areia);
  line-height:0;               /* mata o vão que a linha de texto deixaria embaixo */
}
.stylee-banner__link{display:block}
.stylee-banner__img{
  display:block;width:100%;height:auto;max-width:none;
}
/* A entrada é só uma abertura de opacidade. O `.stylee-reveal` padrão do site também
   empurra o bloco 28px para cima — numa peça que ocupa a tela inteira isso vira um
   solavanco, não um detalhe. */
.stylee-banner.stylee-reveal{transform:none}
.stylee-banner.stylee-reveal.is-visivel{transform:none}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORIAS DE BORDA A BORDA  (teste — André, 10/08/2026)
   ══════════════════════════════════════════════════════════════════════════
   O mesmo gesto dos banners: a imagem encosta na borda da tela, e uma na outra. Aqui
   isso funciona melhor do que funcionou na vitrine de produtos, e a razão é concreta:
   as fotos das CATEGORIAS foram feitas em sessão, com a mesma luz e o mesmo
   enquadramento. Colar peças fotografadas em lugares diferentes vira retalho — foi o
   que nos fez recuar na Loja em 09/08. Colar seis fotos da mesma sessão vira mosaico.

   Para sair inteiro, três recuos precisam ir a zero ao mesmo tempo: o da SEÇÃO, o do
   INVÓLUCRO e o vão da grade. Faltando um, sobra uma faixa branca e o efeito morre.

   Reverter é apagar este bloco e a classe `--cheia` no shortcode. Nada mais depende
   dele. */
.stylee-secao--cats-cheia{
  padding-left:0;
  padding-right:0;
}
.stylee-secao--cats-cheia .stylee-wrap{
  max-width:none;
  padding-left:0;
  padding-right:0;
}
/* O título continua numa caixa: manchete encostada na borda da tela não se lê. */
.stylee-secao--cats-cheia .stylee-centro{
  padding-left:clamp(20px,5vw,44px);
  padding-right:clamp(20px,5vw,44px);
}

/* GRADE, e não flex. Aqui a contagem de colunas precisa ser exata: em flex, a última
   fileira incompleta centraliza e abre um vão no meio do mosaico — justamente o que
   este layout não pode ter. Duas colunas no celular, três a partir de 900px: com seis
   categorias dá duas fileiras cheias nos dois casos. */
.stylee-cats--cheia{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}
@media (min-width:900px){
  .stylee-cats--cheia{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.stylee-cats--cheia .stylee-cat{
  flex:none;max-width:none;width:100%;
  /* Canto arredondado numa grade colada vira falha branca entre as peças — mesma
     lição da vitrine de borda a borda. */
  border-radius:0;
}
.stylee-cats--cheia .stylee-cat__moldura{border-radius:0}

/* Com a peça maior, o nome pode crescer e o véu pode subir um pouco: numa foto que
   ocupa um terço da tela, o rodapé escuro de antes ficava fino demais para segurar
   o texto. */
.stylee-cats--cheia .stylee-cat--grande::after{height:52%}
.stylee-cats--cheia .stylee-cat--grande .stylee-cat__nome{
  font-size:clamp(1.15rem,2vw,1.7rem);
}
.stylee-cats--cheia .stylee-cat--grande .stylee-cat__txt{
  padding:clamp(16px,2vw,30px);
}

/* ── A ENTRADA: REVELAR, NÃO EMPURRAR ──────────────────────────────────────
   A cascata de antes empurrava o cartão inteiro 24px para cima. Num mosaico colado
   isso tem um defeito que não dá para disfarçar: enquanto o cartão viaja, aparece o
   branco da página no lugar de onde ele saiu — a parede fica com buracos durante a
   animação toda.

   Então O CARTÃO NÃO SE MEXE. Quem se mexe é o que está DENTRO dele:

   • a foto entra 14% maior e levemente desfocada, e assenta em foco — é o gesto de
     uma lente encontrando o assunto, e é lento de propósito: continua acomodando
     depois de a peça já estar inteira na tela;
   • o nome sobe um palmo depois, quando a foto já está legível;
   • a cascata anda na DIAGONAL, e não em fila: a onda entra pelo canto superior
     esquerdo e sai pelo inferior direito, que é como o olho varre uma parede de
     fotos. Em fila indiana, seis peças lêem como uma lista; na diagonal, como uma
     composição. */
.stylee-cats--cheia .stylee-reveal{
  transform:none;
  transition:opacity 1.1s var(--ease);
}
.stylee-cats--cheia .stylee-reveal.is-visivel{transform:none}

.stylee-cats--cheia .stylee-cat__foto{
  transform:scale(1.14);
  filter:blur(6px);
  transition:transform 1.6s var(--ease),filter 1.1s var(--ease);
}
.stylee-cats--cheia .is-visivel .stylee-cat__foto{transform:none;filter:none}
/* Revelada, quem manda no zoom volta a ser o ponteiro. */
.stylee-cats--cheia .is-visivel:hover .stylee-cat__foto{transform:scale(1.07)}

.stylee-cats--cheia .stylee-cat__txt{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.stylee-cats--cheia .is-visivel .stylee-cat__txt{
  opacity:1;transform:none;
  transition-delay:.28s;
}

/* A onda diagonal: o atraso é (fileira + coluna). Muda com a quantidade de colunas,
   por isso está escrita duas vezes — com três colunas a peça 4 volta para o começo
   da fileira de baixo e precisa entrar JUNTO com a 2, não depois da 3. */
.stylee-cats--cheia .stylee-reveal:nth-child(1){transition-delay:0s}
.stylee-cats--cheia .stylee-reveal:nth-child(2){transition-delay:.12s}
.stylee-cats--cheia .stylee-reveal:nth-child(3){transition-delay:.12s}
.stylee-cats--cheia .stylee-reveal:nth-child(4){transition-delay:.24s}
.stylee-cats--cheia .stylee-reveal:nth-child(5){transition-delay:.24s}
.stylee-cats--cheia .stylee-reveal:nth-child(6){transition-delay:.36s}
@media (min-width:900px){
  .stylee-cats--cheia .stylee-reveal:nth-child(1){transition-delay:0s}
  .stylee-cats--cheia .stylee-reveal:nth-child(2){transition-delay:.12s}
  .stylee-cats--cheia .stylee-reveal:nth-child(3){transition-delay:.24s}
  .stylee-cats--cheia .stylee-reveal:nth-child(4){transition-delay:.12s}
  .stylee-cats--cheia .stylee-reveal:nth-child(5){transition-delay:.24s}
  .stylee-cats--cheia .stylee-reveal:nth-child(6){transition-delay:.36s}
}

@media (prefers-reduced-motion:reduce){
  .stylee-cats--cheia .stylee-cat__foto{transform:none;filter:none}
  .stylee-cats--cheia .stylee-cat__txt{opacity:1;transform:none}
  .stylee-cats--cheia .stylee-reveal{transition-delay:0s!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   AS OUTRAS CORES NO CARTÃO  (10/08/2026)
   ══════════════════════════════════════════════════════════════════════════
   A troca de foto ao passar o mouse é o gesto padrão da vitrine de moda, mas aqui
   ela mostra a MESMA bolsa em OUTRA COR — e não outro ângulo — porque é esse o dado
   que o catálogo tem. Nenhuma das 35 peças possui foto de galeria; todas têm cores
   com foto própria.

   A segunda foto fica empilhada dentro da moldura que já existia para recortar o
   zoom. Ela não desloca nada: `position:absolute` sobre a primeira, e a moldura já
   reserva a proporção 4:5 desde o primeiro quadro. */
.woocommerce ul.products li.product .stylee-foto{position:relative}
.woocommerce ul.products li.product .stylee-foto__cor2{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;
  /* O mesmo zoom da foto de baixo: sem isto, ao passar o mouse a de cima apareceria
     no tamanho parado e a troca lia como um salto. */
  transform:scale(1.06);
  transition:opacity .5s var(--ease),transform .9s var(--ease);
}
.woocommerce ul.products li.product:hover .stylee-foto__cor2{opacity:1}
/* A foto de baixo sai de cena junto: as duas trocando ao mesmo tempo dão a impressão
   de dissolução, que é mais suave do que uma aparecendo por cima da outra parada. */
.woocommerce ul.products li.product:hover .stylee-foto > img:first-of-type{opacity:.25}
.woocommerce ul.products li.product .stylee-foto > img:first-of-type{
  transition:opacity .5s var(--ease),transform .9s var(--ease);
}

/* No toque não existe "passar o mouse": o dedo que encosta já está indo clicar, e a
   troca aconteceria pela metade, atrapalhando em vez de mostrar. Lá quem conta a
   história das cores é a linha escrita embaixo do preço. */
@media (hover:none),(pointer:coarse){
  .woocommerce ul.products li.product .stylee-foto__cor2{display:none}
  .woocommerce ul.products li.product:hover .stylee-foto > img:first-of-type{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .woocommerce ul.products li.product .stylee-foto__cor2{transform:none;transition:opacity .01ms}
}

/* "3 cores" — discreto, e à direita do preço no mesmo respiro. Rosa porque é
   informação de oferta, não etiqueta de sistema. */
.stylee-cores-n{
  display:block;margin-top:5px;
  font-family:var(--ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rosa);
}

/* Vitrine basica da Loja e dos blocos de produto.
   Este bloco e propositalmente sem glamour pesado: imagem estatica, titulo, preco e
   textos simples. Sem reveal, zoom, transform, filtro ou animacao dentro do card. A
   ideia e dar ao Chrome o caminho de pintura mais previsivel possivel em toda area que
   renderiza `ul.products`: Loja, categorias, "Na vitrine", relacionados, up-sells e
   cross-sells do carrinho. */
body.post-type-archive-product .woocommerce ul.products li.product,
body.tax-product_cat .woocommerce ul.products li.product,
.stylee-vitrine .woocommerce ul.products li.product,
body.single-product.woocommerce div.product .related ul.products li.product,
body.single-product.woocommerce div.product .up-sells ul.products li.product,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
  animation:none!important;
  transition:none!important;
  transition-delay:0s!important;
  overflow:visible!important;
}
body.post-type-archive-product .woocommerce ul.products li.product *,
body.post-type-archive-product .woocommerce ul.products li.product *::before,
body.post-type-archive-product .woocommerce ul.products li.product *::after,
body.tax-product_cat .woocommerce ul.products li.product *,
body.tax-product_cat .woocommerce ul.products li.product *::before,
body.tax-product_cat .woocommerce ul.products li.product *::after,
.stylee-vitrine .woocommerce ul.products li.product *,
.stylee-vitrine .woocommerce ul.products li.product *::before,
.stylee-vitrine .woocommerce ul.products li.product *::after,
body.single-product.woocommerce div.product .related ul.products li.product *,
body.single-product.woocommerce div.product .related ul.products li.product *::before,
body.single-product.woocommerce div.product .related ul.products li.product *::after,
body.single-product.woocommerce div.product .up-sells ul.products li.product *,
body.single-product.woocommerce div.product .up-sells ul.products li.product *::before,
body.single-product.woocommerce div.product .up-sells ul.products li.product *::after,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product *,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product *::before,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product *::after{
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
  animation:none!important;
  transition:none!important;
}
body.post-type-archive-product .woocommerce ul.products li.product .woocommerce-loop-product__link,
body.tax-product_cat .woocommerce ul.products li.product .woocommerce-loop-product__link,
.stylee-vitrine .woocommerce ul.products li.product .woocommerce-loop-product__link,
body.single-product.woocommerce div.product .related ul.products li.product .woocommerce-loop-product__link,
body.single-product.woocommerce div.product .up-sells ul.products li.product .woocommerce-loop-product__link,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .woocommerce-loop-product__link{
  display:block!important;
  text-decoration:none;
}
body.post-type-archive-product .woocommerce ul.products li.product a img,
body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto img,
body.tax-product_cat .woocommerce ul.products li.product a img,
body.tax-product_cat .woocommerce ul.products li.product .stylee-foto img,
.stylee-vitrine .woocommerce ul.products li.product a img,
.stylee-vitrine .woocommerce ul.products li.product .stylee-foto img,
body.single-product.woocommerce div.product .related ul.products li.product a img,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto img,
body.single-product.woocommerce div.product .up-sells ul.products li.product a img,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product a img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/5;
  object-fit:cover;
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:none!important;
  margin:0 0 16px!important;
  background:var(--areia);
  border-radius:3px;
}
body.post-type-archive-product .woocommerce ul.products li.product:hover a img,
body.tax-product_cat .woocommerce ul.products li.product:hover a img,
.stylee-vitrine .woocommerce ul.products li.product:hover a img,
body.single-product.woocommerce div.product .related ul.products li.product:hover a img,
body.single-product.woocommerce div.product .up-sells ul.products li.product:hover a img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:hover a img{
  opacity:1!important;
  transform:none!important;
}
body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto,
body.tax-product_cat .woocommerce ul.products li.product .stylee-foto,
.stylee-vitrine .woocommerce ul.products li.product .stylee-foto,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto{
  display:block!important;
  position:static!important;
  overflow:visible!important;
}
body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto__cor2,
body.tax-product_cat .woocommerce ul.products li.product .stylee-foto__cor2,
.stylee-vitrine .woocommerce ul.products li.product .stylee-foto__cor2,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto__cor2,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto__cor2,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto__cor2{
  display:none!important;
}
body.post-type-archive-product .woocommerce ul.products li.product:hover .stylee-foto > img:first-of-type,
body.tax-product_cat .woocommerce ul.products li.product:hover .stylee-foto > img:first-of-type,
.stylee-vitrine .woocommerce ul.products li.product:hover .stylee-foto > img:first-of-type,
body.single-product.woocommerce div.product .related ul.products li.product:hover .stylee-foto > img:first-of-type,
body.single-product.woocommerce div.product .up-sells ul.products li.product:hover .stylee-foto > img:first-of-type,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:hover .stylee-foto > img:first-of-type{
  opacity:1!important;
}
body.post-type-archive-product .woocommerce ul.products li.product .button,
body.tax-product_cat .woocommerce ul.products li.product .button,
.stylee-vitrine .woocommerce ul.products li.product .button,
body.single-product.woocommerce div.product .related ul.products li.product .button,
body.single-product.woocommerce div.product .up-sells ul.products li.product .button,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .button{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* Teste Louis Vuitton: crossfade simples entre fotos do mesmo card.
   Continua sem reveal no card, sem zoom e sem transform; so a opacidade das duas imagens
   muda no hover. */
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto,
  body.tax-product_cat .woocommerce ul.products li.product .stylee-foto,
  .stylee-vitrine .woocommerce ul.products li.product .stylee-foto,
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto,
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto{
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    aspect-ratio:4/5;
    margin:0 0 16px!important;
    background:var(--areia);
    border-radius:3px;
  }
  body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto > img,
  body.tax-product_cat .woocommerce ul.products li.product .stylee-foto > img,
  .stylee-vitrine .woocommerce ul.products li.product .stylee-foto > img,
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto > img,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto > img,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto > img,
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto > img{
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    margin:0!important;
    border-radius:0;
    transform:none!important;
    filter:none!important;
    transition:opacity .32s ease!important;
  }
  body.post-type-archive-product .woocommerce ul.products li.product .stylee-foto__cor2,
  body.tax-product_cat .woocommerce ul.products li.product .stylee-foto__cor2,
  .stylee-vitrine .woocommerce ul.products li.product .stylee-foto__cor2,
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto__cor2,
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-foto__cor2{
    display:block!important;
    position:absolute!important;
    inset:0;
    opacity:0!important;
    pointer-events:none;
    transform:none!important;
    filter:none!important;
    transition:opacity .32s ease!important;
  }
  body.post-type-archive-product .woocommerce ul.products li.product:hover .stylee-foto__cor2,
  body.tax-product_cat .woocommerce ul.products li.product:hover .stylee-foto__cor2,
  .stylee-vitrine .woocommerce ul.products li.product:hover .stylee-foto__cor2,
  body.stylee-home .stylee-vitrine ul.products li.product:hover .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product:hover .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product:hover .stylee-foto__cor2,
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:hover .stylee-foto__cor2{
    opacity:1!important;
  }
  body.post-type-archive-product .woocommerce ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  body.tax-product_cat .woocommerce ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  .stylee-vitrine .woocommerce ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  body.stylee-home .stylee-vitrine ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  body.single-product.woocommerce div.product .related ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  body.single-product.woocommerce div.product .up-sells ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type,
  body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product:has(.stylee-foto__cor2):hover .stylee-foto > img:first-of-type{
    opacity:0!important;
  }
}

/* Mobile nao tem hover. Na Vitrine e nos relacionados, a troca vira uma respiracao
   automatica entre produto pai e primeira variacao: leve, sem mover o card e sem
   envolver a Loja em rolagem infinita. A propriedade registrada permite animar a
   opacidade sem reabrir as regras de transform que evitam piscadas no Chrome. */
@property --stylee-card-cor2-opacity{
  syntax:"<number>";
  inherits:false;
  initial-value:0;
}
@media (max-width:900px),(hover:none),(pointer:coarse){
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto{
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    aspect-ratio:4/5;
    margin:0 0 16px!important;
    background:var(--areia);
    border-radius:3px;
  }
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto > img,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto > img,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto > img{
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    margin:0!important;
    border-radius:0;
    transform:none!important;
    filter:none!important;
  }
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto__cor2{
    display:block!important;
    position:absolute!important;
    inset:0;
    opacity:var(--stylee-card-cor2-opacity)!important;
    pointer-events:none;
    transform:none!important;
    filter:none!important;
    animation:stylee-card-fade-mobile 6.2s ease-in-out infinite!important;
  }
  body.stylee-home .stylee-vitrine ul.products li.product:nth-child(2n) .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product:nth-child(2n) .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product:nth-child(2n) .stylee-foto__cor2{
    animation-delay:1.15s!important;
  }
  body.stylee-home .stylee-vitrine ul.products li.product:nth-child(3n) .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product:nth-child(3n) .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product:nth-child(3n) .stylee-foto__cor2{
    animation-delay:2.3s!important;
  }
}
@keyframes stylee-card-fade-mobile{
  0%,34%,100%{--stylee-card-cor2-opacity:0}
  48%,74%{--stylee-card-cor2-opacity:1}
}
@media (prefers-reduced-motion:reduce){
  body.stylee-home .stylee-vitrine ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .related ul.products li.product .stylee-foto__cor2,
  body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-foto__cor2{
    animation:none!important;
  }
}

/* Mega-menu elegante no desktop.
   O painel inteiro so respira em opacidade; a entrada "cara" fica nos itens,
   com cascata curta e curva suave. Assim o Chrome nao precisa mover uma camada
   preta grande enquanto a loja ainda esta montando os produtos. */
@media (min-width:901px){
  /* AQUI ESTAVA A PISCADA QUE SOBROU (15/08/2026). O chat parou de piscar com a correção
     lá em cima; o mega continuou, porque ESTE bloco — escrito depois, na rodada de
     "mega-menu elegante" — re-declara a transição no estado FECHADO, e ainda com
     `!important`, ganhando de tudo. O `visibility 0s linear .3s` era o que mantinha o
     painel VISÍVEL durante os 300ms em que a opacidade caía de 1 para 0.

     Mesma regra da correção anterior: fechado não anima. Duas declarações do mesmo
     componente em pontos distantes da folha é o que faz uma correção parecer não pegar —
     vale procurar a segunda antes de duvidar da primeira. */
  .stylee-mega{
    transform:none!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    border-bottom-color:transparent;
    will-change:opacity;
  }
  .stylee-mega.is-aberto{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none!important;
    transition:opacity .32s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s!important;
  }

  .stylee-mega .stylee-eyebrow,
  .stylee-mega .stylee-cat,
  .stylee-mega__nota,
  .stylee-mega__lado .stylee-btn{
    opacity:0;
    transform:translate3d(0,10px,0);
    transition:
      opacity .34s ease-out,
      transform .44s cubic-bezier(.16,1,.3,1),
      color .2s ease,
      background .2s ease,
      border-color .2s ease!important;
    transition-delay:0s!important;
  }
  .stylee-mega.is-aberto .stylee-eyebrow,
  .stylee-mega.is-aberto .stylee-cat,
  .stylee-mega.is-aberto .stylee-mega__nota,
  .stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  .stylee-mega.is-aberto .stylee-cat:nth-child(1){transition-delay:.05s!important}
  .stylee-mega.is-aberto .stylee-cat:nth-child(2){transition-delay:.1s!important}
  .stylee-mega.is-aberto .stylee-cat:nth-child(3){transition-delay:.15s!important}
  .stylee-mega.is-aberto .stylee-cat:nth-child(4){transition-delay:.2s!important}
  .stylee-mega.is-aberto .stylee-cat:nth-child(5){transition-delay:.25s!important}
  .stylee-mega.is-aberto .stylee-cat:nth-child(6){transition-delay:.3s!important}
  .stylee-mega.is-aberto .stylee-mega__lado .stylee-eyebrow{transition-delay:.12s!important}
  .stylee-mega.is-aberto .stylee-mega__nota{transition-delay:.18s!important}
  .stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{transition-delay:.24s!important}

  .stylee-mega .stylee-cat__foto,
  .stylee-mega.is-aberto .stylee-cat__foto,
  .stylee-mega.is-aberto .stylee-cat:hover .stylee-cat__foto{
    transform:none!important;
    filter:none!important;
    transition:opacity .24s ease!important;
    transition-delay:0s!important;
  }
  .stylee-mega .stylee-cat__txt,
  .stylee-mega.is-aberto .stylee-cat__txt{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    transition-delay:0s!important;
  }
  .stylee-mega .stylee-eyebrow,
  .stylee-mega.is-aberto .stylee-eyebrow{
    letter-spacing:.32em!important;
  }

  .stylee-mega::after{
    opacity:0;
    transform:none!important;
    transition:opacity .34s ease .16s!important;
  }
  .stylee-mega.is-aberto::after{opacity:1}
  .stylee-mega .stylee-cat::after{
    transform:rotate(45deg)!important;
    transition:opacity .2s ease,border-color .2s ease!important;
  }
  .stylee-mega .stylee-cat:hover::after{
    opacity:1;
    transform:rotate(45deg)!important;
  }
  .stylee-mega.is-aberto .stylee-mega__lado .stylee-btn:hover{
    transform:translate3d(0,0,0);
  }
}

/* Produto variavel no celular: a escolha da cor precisa aparecer antes da descricao.
   No desktop a pagina continua igual; no mobile a decisao de compra sobe logo para
   baixo do preco, e a descricao vira apoio depois da escolha. */
body.single-product.woocommerce div.product .stylee-estoque-inline{display:none}

body.single-product.woocommerce div.product .quantity.stylee-qtd{
  display:inline-grid!important;
  grid-template-columns:42px 54px 42px;
  width:max-content;
  overflow:hidden;
  border:1px solid var(--linha);
  border-radius:3px;
  background:#fff;
  vertical-align:middle;
}
body.single-product.woocommerce div.product .quantity.stylee-qtd .stylee-qtd__btn{
  display:grid;
  place-items:center;
  width:42px;
  height:44px;
  border:0;
  border-radius:0;
  background:#fff;
  color:var(--preto);
  font-family:var(--ui);
  font-size:19px;
  line-height:1;
  padding:0;
}
body.single-product.woocommerce div.product .quantity.stylee-qtd .stylee-qtd__btn:disabled{
  color:var(--cinza);
  background:#f7f7f7;
  cursor:not-allowed;
}
body.single-product.woocommerce div.product .quantity.stylee-qtd .qty{
  width:54px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid var(--linha)!important;
  border-right:1px solid var(--linha)!important;
  border-radius:0!important;
  display:block!important;
  text-align:center!important;
  line-height:44px!important;
  font-size:16px;
  font-family:var(--ui);
  background:#fff;
  box-shadow:none!important;
  appearance:textfield;
  -moz-appearance:textfield;
  margin:0!important;
}
body.single-product.woocommerce div.product .quantity.stylee-qtd .qty::-webkit-outer-spin-button,
body.single-product.woocommerce div.product .quantity.stylee-qtd .qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
body.single-product.woocommerce div.product .quantity.stylee-qtd.is-bloqueado{
  opacity:.55;
}

.woocommerce-cart .quantity.stylee-qtd{
  display:inline-flex!important;
  align-items:stretch;
  justify-content:flex-start;
  width:auto;
  min-width:114px;
  overflow:hidden;
  border:1px solid var(--linha);
  border-radius:3px;
  background:#fff;
  vertical-align:middle;
}
.woocommerce-cart .quantity.stylee-qtd .stylee-qtd__btn{
  display:grid;
  place-items:center;
  width:34px;
  height:38px;
  border:0;
  border-radius:0;
  background:#fff;
  color:var(--preto);
  font-family:var(--ui);
  font-size:17px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.woocommerce-cart .quantity.stylee-qtd .stylee-qtd__btn:disabled{
  color:var(--cinza);
  background:#f7f7f7;
  cursor:not-allowed;
}
.woocommerce-cart .quantity.stylee-qtd .qty{
  width:46px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid var(--linha)!important;
  border-right:1px solid var(--linha)!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center;
  text-align:center!important;
  line-height:38px!important;
  font-size:14px;
  font-family:var(--ui);
  color:var(--preto);
  background:#fff;
  box-shadow:none!important;
  appearance:textfield;
  -moz-appearance:textfield;
  margin:0!important;
}
.woocommerce-cart .quantity.stylee-qtd .qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity.stylee-qtd .qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.woocommerce-cart .quantity.stylee-qtd.is-bloqueado{
  opacity:.55;
}
.woocommerce-cart table.cart td.product-quantity{
  width:126px;
}

@media (max-width:900px){
  .woocommerce table.cart td.product-quantity .quantity.stylee-qtd{
    margin-left:auto;
  }
}

body.single-product.woocommerce div.product .stylee-cor,
body.single-product.woocommerce div.product .stylee-cor:hover{
  transform:none!important;
  transition:none!important;
}
body.single-product.woocommerce div.product .stylee-cor:hover .stylee-cor__nome{
  color:var(--preto);
}
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:hover,
body.single-product.woocommerce div.product form.cart .single_add_to_cart_button:focus{
  background:var(--preto)!important;
  color:#fff!important;
  transform:none!important;
  transition:none!important;
}
body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto.stylee-frete-pos-carrinho{
  margin:16px 0 20px!important;
}

@media (max-width:600px){
  body.single-product.woocommerce div.product{
    gap:16px;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery{
    margin-bottom:2px!important;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery__wrapper{
    margin-bottom:0!important;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery .flex-viewport{
    height:auto!important;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery__image img{
    width:100%!important;
    height:min(48vh,430px)!important;
    object-fit:contain;
    object-position:center;
  }

  body.single-product.woocommerce div.product.product-type-variable .summary{
    display:flex;
    flex-direction:column;
  }
  body.single-product.woocommerce div.product.product-type-variable .product_title{
    order:1;
    font-size:clamp(1.12rem,5.55vw,1.42rem)!important;
    line-height:1.16;
    margin:0 0 8px!important;
  }
  body.single-product.woocommerce div.product.product-type-variable p.price,
  body.single-product.woocommerce div.product.product-type-variable span.price{
    order:2;
    font-size:1.36rem!important;
    margin:0 0 5px!important;
  }
  body.single-product.woocommerce div.product.product-type-variable .stylee-estoque-inline{
    order:3;
    display:none;
    width:max-content;
    max-width:100%;
    margin:0 0 12px;
    padding:4px 9px;
    border-radius:999px;
    background:rgba(191,42,89,.08);
    font-family:var(--ui);
    font-size:.82rem;
    line-height:1.2;
    font-weight:600;
    color:var(--rosa);
  }
  body.single-product.woocommerce div.product.product-type-variable .stylee-estoque-inline.is-visivel{
    display:inline-flex;
  }
  body.single-product.woocommerce div.product.product-type-variable form.variations_form.cart{
    order:4;
    margin:0 0 14px!important;
  }
  body.single-product.woocommerce div.product.product-type-variable #woocommerce-correios-calculo-de-frete-na-pagina-do-produto.stylee-frete-pos-carrinho{
    order:4;
  }
  body.single-product.woocommerce div.product.product-type-variable .woocommerce-product-details__short-description{
    order:5;
    margin:2px 0 18px!important;
    font-size:.96rem;
    line-height:1.62;
  }
  body.single-product.woocommerce div.product.product-type-variable .product_meta{
    order:6;
  }

  body.single-product.woocommerce div.product form.cart table.variations{
    margin:0 0 8px!important;
    border:0!important;
  }
  body.single-product.woocommerce div.product form.cart table.variations tbody,
  body.single-product.woocommerce div.product form.cart table.variations tr,
  body.single-product.woocommerce div.product form.cart table.variations th,
  body.single-product.woocommerce div.product form.cart table.variations td{
    display:block;
    border:0!important;
    padding:0!important;
  }
  body.single-product.woocommerce div.product form.cart table.variations tr{
    display:grid;
    grid-template-columns:46px minmax(0,1fr);
    gap:8px;
    align-items:start;
    min-width:0;
  }
  body.single-product.woocommerce div.product form.cart table.variations td.value{
    min-width:0;
    overflow:hidden;
  }
  body.single-product.woocommerce div.product form.cart table.variations th.label{
    padding-top:9px!important;
  }
  body.single-product.woocommerce div.product form.cart table.variations th.label label{
    margin:0!important;
    font-size:.96rem;
    line-height:1.2;
    letter-spacing:.02em;
    text-transform:none;
  }

  body.single-product.woocommerce div.product .stylee-cores{
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    margin:0;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 8px;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.single-product.woocommerce div.product .stylee-cores::-webkit-scrollbar{display:none}
  body.single-product.woocommerce div.product .stylee-cor{
    flex:0 0 54px;
    width:54px;
    outline:0!important;
    border-radius:5px;
    box-shadow:none!important;
    overflow:visible;
    transition:transform .2s var(--ease);
  }
  body.single-product.woocommerce div.product .stylee-cor::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    border:2px solid transparent;
    border-radius:5px;
    box-sizing:border-box;
  }
  body.single-product.woocommerce div.product .stylee-cor.is-ativa::before{
    border-color:var(--preto);
  }
  body.single-product.woocommerce div.product .stylee-cor:focus-visible::before{
    border-color:var(--rosa);
  }
  body.single-product.woocommerce div.product .stylee-cor img{
    width:48px;
    height:60px;
    margin:2px auto 0;
  }
  body.single-product.woocommerce div.product .stylee-cor__nome{
    margin-top:3px;
    font-size:9px;
    line-height:1.2;
  }
  body.single-product.woocommerce div.product form.cart .variations.stylee-com-cores .reset_variations{
    display:none!important;
  }
  body.single-product.woocommerce div.product .single_variation_wrap{
    margin-top:6px;
  }
  body.single-product.woocommerce div.product .woocommerce-variation-availability .stock{
    display:none!important;
  }
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto.containerCalculator{
    width:100%!important;
    max-width:calc(100vw - 40px)!important;
    margin:12px auto 18px!important;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:3px;
  }
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto .calculatorRow,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto .row,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box;
  }
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="text"],
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="tel"],
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="number"],
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto input[type="search"]{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box;
  }
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto table{
    width:100%!important;
    max-width:100%!important;
    table-layout:fixed;
  }
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto td,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto th,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto label,
  body.single-product.woocommerce div.product #woocommerce-correios-calculo-de-frete-na-pagina-do-produto small{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACABAMENTO: RITMO DA HOME E VITRINES INTERNAS
   ══════════════════════════════════════════════════════════════════════════
   Os banners ja dao impacto visual; as secoes entre eles precisam respirar sem virar
   corredores longos. Estes ajustes reduzem o ar vertical excedente e deixam titulo,
   texto e grade em uma proporcao mais confortavel. */
body.stylee-home .stylee-secao{
  padding-top:clamp(50px,7vw,92px);
  padding-bottom:clamp(50px,7vw,92px);
}
/* O mosaico de categorias termina na ultima imagem. O espaco abaixo dele era branco
   e se somava ao respiro da secao areia seguinte, criando uma faixa sem funcao.
   O titulo usa o mesmo respiro acima e abaixo para ficar centrado na faixa. */
body.stylee-home .stylee-secao--cats-cheia{
  padding-top:clamp(34px,4.5vw,64px);
  padding-bottom:0;
}
body.stylee-home .stylee-secao > .stylee-wrap > .stylee-centro:first-child:not(:last-child){
  margin-bottom:clamp(1.55rem,2.5vw,2.25rem)!important;
}
body.stylee-home .stylee-secao--cats-cheia > .stylee-wrap > .stylee-centro:first-child:not(:last-child){
  margin-bottom:clamp(34px,4.5vw,64px)!important;
}
body.stylee-home .stylee-secao .stylee-eyebrow{margin-bottom:clamp(10px,1.2vw,14px)}
body.stylee-home .stylee-secao .stylee-titulo{margin-bottom:clamp(10px,1.3vw,16px)}
body.stylee-home .stylee-secao .stylee-lead{
  margin-top:clamp(8px,1vw,12px)!important;
  line-height:1.72;
}
body.stylee-home .stylee-vitrine{
  padding-top:clamp(52px,7vw,90px);
  padding-bottom:clamp(54px,7vw,94px);
}
body.stylee-home .stylee-vitrine .stylee-wrap > .stylee-centro:first-child{
  margin-bottom:clamp(1.8rem,2.8vw,2.4rem)!important;
}
body.stylee-home .stylee-vitrine .stylee-wrap > .stylee-centro:last-child{
  margin-top:clamp(1.9rem,3vw,2.6rem)!important;
}

body.single-product.woocommerce div.product .related,
body.single-product.woocommerce div.product .up-sells{
  margin-top:clamp(34px,4.4vw,58px);
}
body.single-product.woocommerce div.product .related > h2,
body.single-product.woocommerce div.product .up-sells > h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.75rem,3vw,2.35rem);
  line-height:1.2;
  text-align:center;
  margin:0 0 clamp(24px,3.2vw,38px);
}
body.single-product.woocommerce div.product .related > h2::after,
body.single-product.woocommerce div.product .up-sells > h2::after{
  content:"";
  display:block;
  width:46px;
  height:1px;
  margin:18px auto 0;
  background:var(--rosa);
}

@media (max-width:700px){
  body.stylee-home .stylee-secao{
    padding-top:44px;
    padding-bottom:44px;
  }
  body.stylee-home .stylee-secao--cats-cheia{
    padding-top:34px;
    padding-bottom:0;
  }
  body.stylee-home .stylee-vitrine{
    padding-top:46px;
    padding-bottom:48px;
  }
  body.stylee-home .stylee-secao > .stylee-wrap > .stylee-centro:first-child:not(:last-child){
    margin-bottom:1.45rem!important;
  }
  body.stylee-home .stylee-secao--cats-cheia > .stylee-wrap > .stylee-centro:first-child:not(:last-child){
    margin-bottom:34px!important;
  }
  body.single-product.woocommerce div.product .related,
  body.single-product.woocommerce div.product .up-sells{
    margin-top:34px;
  }
}

/* Categoria da Home em video.
   O video ocupa exatamente o lugar da foto: sem controles, sem clique proprio e com
   a imagem antiga como poster enquanto o MP4 carrega. */
.stylee-cats .stylee-cat__video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-width:none;
  pointer-events:none;
  background:var(--areia);
}
.stylee-cats .stylee-cat__video::-webkit-media-controls,
.stylee-cats .stylee-cat__video::-webkit-media-controls-panel,
.stylee-cats .stylee-cat__video::-webkit-media-controls-start-playback-button{
  display:none!important;
  -webkit-appearance:none;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUSCA E JANELA DE FILTROS (sobreposta, pela esquerda)
   ══════════════════════════════════════════════════════════════════════════
   Quarta forma, e a última: a lista com amostras de cor ficou — é dela que o André
   gostou — mas volta para dentro de uma janela sobreposta que entra pela esquerda, e
   não mais como coluna fixa, que empurrava o título "Loja" para o canto e quebrava a
   unidade com as outras páginas.

   O BUG DO CELULAR, que insistiu por duas versões, era de CSS e não de JavaScript: a
   caixa era `display:flex; flex-direction:column` com `max-height` mas SEM altura
   definida, e o corpo usava `flex:1` — que é `flex-basis:0`. Num contêiner de altura
   automática, crescer a partir de zero depende de um espaço livre que só existe se a
   altura for conhecida: a conta fecha em ZERO. Dava exatamente o que ele descreveu — a
   tela escurecia (o véu aparecia) e "nenhum filtro", porque o corpo tinha altura zero.
   Agora a caixa tem `height:100%`, e aí o `flex:1` tem de onde crescer. */
.stylee-busca{
  display:flex;align-items:center;gap:9px;
  max-width:560px;margin:0 auto clamp(14px,2vw,20px);
  border-bottom:1px solid var(--linha);
  transition:border-color .3s var(--ease);
}
.stylee-busca:focus-within{border-bottom-color:var(--rosa)}
.stylee-busca svg{width:18px;height:18px;flex:0 0 auto;color:var(--cinza)}
.stylee-busca input{
  flex:1;min-width:0;border:0;background:none;outline:none;padding:11px 0;
  font-family:var(--ui);font-size:1rem;color:var(--tinta);
}
.stylee-busca input::placeholder{color:var(--cinza)}
.stylee-busca__x{
  flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;
  color:var(--cinza);font-size:19px;line-height:1;transition:color .3s ease;
}
.stylee-busca__x:hover{color:var(--rosa)}

/* ── O QUE ESTÁ LIGADO, FORA DA JANELA ─────────────────────────────────────
   Cada marca tira o próprio filtro; a última tira todos. Preto sólido de propósito: é
   o mesmo peso do "última peça" no cartão — informação que a cliente precisa ver sem
   procurar, porque ela explica por que a loja está mostrando menos peças. */
.stylee-marcas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin:0 auto clamp(16px,2.4vw,24px);max-width:820px;
}
.stylee-marca{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:2px;
  background:var(--preto);color:#fff;
  font-family:var(--ui);font-size:12.5px;line-height:1;
  transition:background .25s var(--ease);
}
.stylee-marca span{
  font-size:15px;line-height:1;opacity:.6;transition:opacity .25s ease;
}
.stylee-marca:hover{background:var(--rosa)}
.stylee-marca:hover span{opacity:1}
/* A amostra ganha um anel branco para não encostar no preto da marca. */
.stylee-marca .stylee-caixinha{
  width:12px;height:12px;border-color:rgba(255,255,255,.45);
}
.stylee-marcas__tudo{
  font-family:var(--ui);font-size:12px;color:var(--cinza);
  border-bottom:1px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.stylee-marcas__tudo:hover{color:var(--rosa);border-bottom-color:var(--rosa)}

/* O botão que chama a janela: centrado, discreto, do tamanho do texto. */
.woocommerce .stylee-filtros__abrir,
.stylee-filtros__abrir{
  display:flex;width:max-content;align-items:center;justify-content:center;gap:9px;
  margin:0 auto clamp(26px,4vw,42px);padding:11px 22px;
  border:1px solid var(--linha);border-radius:2px;background:#fff;
  font-family:var(--ui);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tinta);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.stylee-filtros__abrir:hover{border-color:var(--rosa);color:var(--rosa)}
.stylee-filtros__abrir svg{width:16px;height:16px}

/* ── A janela ─────────────────────────────────────────────────────────────
   `visibility` entra junto de `pointer-events`: só opacidade deixaria a janela
   invisível MAS clicável — foi o painel fantasma que já nos custou uma rodada. */
.stylee-lateral{
  position:fixed;inset:0;z-index:10002;
  display:flex;justify-content:flex-start;
  pointer-events:none;visibility:hidden;
  /* A SAIDA PRECISA SER VISTA (13/08/2026, Andre).
     `visibility` nao transiciona: ela vira `hidden` no mesmo quadro em que a classe sai,
     e a caixa desaparece ANTES de comecar a deslizar — a animacao existia e ninguem via.
     O atraso de 0,42s segura a janela visivel pelo tempo exato do deslize. Abrir usa 0s
     (regra abaixo), senao ela demoraria a aparecer.
     E o mesmo mecanismo da cortina do menu do celular; aqui eu tinha esquecido. */
  transition:visibility 0s linear .42s;
}
.stylee-lateral.is-aberta{
  pointer-events:auto;visibility:visible;
  transition:visibility 0s linear 0s;
}
/* A barra do WordPress (só quem está logado vê) fica por cima de tudo, com z-index
   99999. Sem este recuo ela come o topo da janela — justamente onde estão o título e o
   X de fechar. Alturas oficiais da barra: 46px no celular, 32px no computador. */
body.admin-bar .stylee-lateral{top:46px}
@media screen and (min-width:783px){
  body.admin-bar .stylee-lateral{top:32px}
}
.stylee-lateral__fundo{
  display:block;position:absolute;inset:0;background:rgba(10,10,10,.5);
  opacity:0;transition:opacity .34s var(--ease);
}
.stylee-lateral.is-aberta .stylee-lateral__fundo{opacity:1}

.stylee-lateral__caixa{
  position:relative;z-index:1;
  width:min(360px,88vw);
  /* ALTURA DEFINIDA, não `max-height`: é o que faz o `flex:1` do corpo ter de onde
     crescer. Ver o comentário no topo deste bloco. */
  height:100%;
  display:flex;flex-direction:column;
  background:#fff;box-shadow:26px 0 60px rgba(0,0,0,.25);
  /* Entra em 0,42s e sai em 0,34s: entrada boa e convite, saida boa e sumir do caminho.
     Se mexer aqui, o atraso do `visibility` la em cima tem de acompanhar o MAIOR dos
     dois — senao a janela some no meio da propria despedida. */
  transform:translateX(-100%);transition:transform .34s var(--ease);
}
.stylee-lateral.is-aberta .stylee-lateral__caixa{transform:none;transition:transform .42s var(--ease)}
/* Fio rosa na borda de dentro — a assinatura do site, aqui na vertical. */
.stylee-lateral__caixa::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--rosa);
  transform:scaleY(0);transform-origin:top;
  /* Saindo, o fio recolhe JUNTO e sem espera; entrando, ele vem depois da caixa. */
  transition:transform .3s var(--ease);
}
.stylee-lateral.is-aberta .stylee-lateral__caixa::after{transform:scaleY(1);transition:transform .6s var(--ease) .15s}

/* O topo NÃO rola junto (`flex:0 0 auto` + o corpo com rolagem própria): o X precisa
   estar sempre à mão, e não só quando a pessoa volta ao começo da lista. */
.stylee-lateral__topo{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  padding:18px 24px 14px;
  border-bottom:1px solid var(--linha);
}
.stylee-lateral__topo .stylee-eyebrow{margin:0}
.stylee-lateral__x{
  width:38px;height:38px;padding:0;border:0;border-radius:2px;background:none;
  color:var(--cinza);cursor:pointer;display:grid;place-items:center;
  transition:color .3s ease,background .3s ease;
}
.stylee-lateral__x:hover{color:var(--preto);background:rgba(0,0,0,.05)}
.stylee-lateral__x svg{width:20px;height:20px}

.stylee-lateral__corpo{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 24px;
  display:grid;gap:26px;align-content:start;
}

.stylee-grupo h3{
  margin:0 0 10px;padding:0 0 9px;
  border-bottom:1px solid var(--linha);
  font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta);font-weight:500;
}
.stylee-opcoes{list-style:none;margin:0;padding:0;display:grid;gap:1px}
/* AS CORES EM DUAS COLUNAS (13/08/2026, André): dezessete numa lista única obrigava a
   rolar a janela inteira só para ver a paleta, e as últimas cores ficavam escondidas
   embaixo de Categoria e Ordenar. Em duas colunas a paleta cabe quase toda de uma vez.
   `minmax(0,1fr)` e não `1fr`: sem o mínimo zero, um nome comprido ("Light Pink") empurra
   a coluna e as duas deixam de ter a mesma largura — foi o que causaria sobreposição. */
.stylee-opcoes--cores{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
.stylee-opcoes--cores .stylee-opcao{gap:8px;padding:7px 0}
.stylee-opcoes--cores .stylee-opcao span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stylee-opcao{
  display:flex;align-items:center;gap:11px;padding:8px 0;
  font-family:var(--ui);font-size:.94rem;color:var(--tinta);
  transition:color .25s var(--ease);
}
.stylee-opcao em{margin-left:auto;font-style:normal;font-size:11px;color:var(--cinza)}
.stylee-opcao:hover{color:var(--rosa)}
.stylee-opcao.is-marcada{color:var(--preto);font-weight:500}

.stylee-caixinha{
  flex:0 0 auto;width:16px;height:16px;border-radius:1px;
  border:1px solid var(--linha);background:var(--tom,#fff);
  position:relative;transition:border-color .25s var(--ease);
}
.stylee-caixinha--redonda{border-radius:50%}
.stylee-opcao:hover .stylee-caixinha{border-color:var(--rosa)}
.stylee-opcao.is-marcada .stylee-caixinha{border-color:var(--preto)}
/* O "v" é desenhado com duas bordas: sem fonte de ícone e sem requisição. */
.stylee-opcao.is-marcada .stylee-caixinha::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border-right:2px solid var(--preto);border-bottom:2px solid var(--preto);
  transform:rotate(42deg);
}
/* Sobre a própria cor da peça o traço precisa ser claro, senão some dentro dela. */
.stylee-opcao.is-marcada .stylee-caixinha[style]::after{
  border-color:#fff;filter:drop-shadow(0 0 1px rgba(0,0,0,.55));
}

.stylee-lateral__base{
  flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--linha);background:#fff;
}
.stylee-lateral__base .stylee-btn{padding:.9rem 1rem;text-align:center;font-size:11.5px}
.stylee-lateral__limpar{background:none;color:var(--tinta);border:1px solid var(--linha)}
.stylee-lateral__limpar:hover{background:var(--preto);color:#fff;border-color:var(--preto);transform:none}
/* Sem filtro nenhum não há "Limpar", e o "Ver" ocupa a linha inteira. */
.stylee-lateral__base:has(.stylee-lateral__ver:only-child){grid-template-columns:1fr}

@media (prefers-reduced-motion:reduce){
  .stylee-lateral__caixa,.stylee-lateral__fundo,.stylee-lateral__caixa::after{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ENTRAR / CRIAR CONTA
   ══════════════════════════════════════════════════════════════════════════
   Duas colunas com um fio rosa entre elas — a mesma assinatura que separa as seções do
   site. No celular o fio vira horizontal e as colunas empilham, com "Entrar" primeiro:
   quem já tem conta volta muito mais vezes do que quem cria uma.

   Campos com linha embaixo, não caixa fechada: é o mesmo tratamento da barra de busca da
   Loja, e mantém a página leve. Cantos retos em tudo, como no resto do site. */
.stylee-conta{
  max-width:980px;margin:0 auto;
  display:grid;gap:clamp(34px,5vw,64px);
}
@media (min-width:860px){
  .stylee-conta--duas{
    grid-template-columns:1fr 1px 1fr;
    gap:clamp(38px,4.5vw,60px);
    align-items:start;
  }
  /* O fio é um elemento de grade, não uma borda: assim ele acompanha a altura da coluna
     mais alta sem depender de qual das duas é.

     A LINHA É EXPLÍCITA nos três, e isso não é preciosismo. O `::before` é o primeiro
     filho: colocado na coluna 2, o cursor da auto-colocação fica ali e NÃO anda para trás
     — a coluna 1 do "Entrar" só cabe na linha seguinte. O resultado era um fio sozinho
     numa faixa vazia (altura 0, invisível) e as duas colunas empurradas para baixo. */
  .stylee-conta--duas::before{
    content:"";grid-column:2;grid-row:1;align-self:stretch;
    background:linear-gradient(var(--linha),var(--linha));
  }
  .stylee-conta__lado--entrar{grid-column:1;grid-row:1}
  .stylee-conta__lado--criar{grid-column:3;grid-row:1}
}
@media (max-width:859px){
  .stylee-conta__lado--criar{
    border-top:1px solid var(--linha);
    padding-top:clamp(30px,6vw,42px);
  }
}

.stylee-conta__titulo{
  margin:.35rem 0 .5rem;
  font-family:var(--serifa,var(--ui));
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;color:var(--preto);
}
.stylee-conta__linha{
  margin:0 0 clamp(20px,3vw,28px);
  font-family:var(--ui);font-size:.95rem;line-height:1.6;color:var(--cinza);
}

/* ── Campos ── */
.stylee-campo{display:block;margin:0 0 20px}
.stylee-campo label{
  display:block;margin:0 0 6px;
  font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta);
}
.stylee-campo .required{color:var(--rosa);text-decoration:none}
.woocommerce-account .stylee-campo input[type="text"],
.woocommerce-account .stylee-campo input[type="email"],
.woocommerce-account .stylee-campo input[type="password"]{
  width:100%;box-sizing:border-box;
  padding:11px 2px;
  border:0;border-bottom:1px solid var(--linha);border-radius:0;
  background:none;outline:none;
  font-family:var(--ui);font-size:1rem;color:var(--tinta);
  transition:border-color .3s var(--ease);
}
.woocommerce-account .stylee-campo input:focus{border-bottom-color:var(--rosa)}
.stylee-campo__dica{
  display:block;margin-top:7px;
  font-family:var(--ui);font-size:11.5px;color:var(--cinza);
}
/* Nome + sobrenome dividem a linha; no celular, uma embaixo da outra. */
.stylee-campo__dupla{display:grid;gap:0 18px}
@media (min-width:520px){.stylee-campo__dupla{grid-template-columns:1fr 1fr}}

/* ── Linha do "continuar conectada" + "esqueci a senha" ── */
.stylee-conta__abaixo{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:4px 0 24px;
}
.stylee-lembrar{
  display:flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  font-family:var(--ui);font-size:.9rem;color:var(--tinta);
}
.stylee-lembrar input{accent-color:var(--rosa);width:15px;height:15px;border-radius:0}
.stylee-conta__esqueci{
  font-family:var(--ui);font-size:.88rem;color:var(--cinza);
  border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.stylee-conta__esqueci:hover{color:var(--rosa);border-bottom-color:var(--rosa)}

/* ── DESFAZENDO O QUE O WOOCOMMERCE IMPÕE AQUI ────────────────────────────────
   O CSS do próprio WooCommerce traz, para estes dois formulários:

     form.login, .woocommerce form.register { border:1px solid #cfc8d8; padding:20px;
                                              margin:2em 0; border-radius:5px }
     .woocommerce-form-login__submit { float:left; margin-right:1em }

   Duas coisas quebravam por causa disso, e a segunda é a que o André viu:

   1. A CAIXA COM BORDA não é do nosso desenho. Ela engolia só os campos — o rótulo, o
      título e a frase de apoio ficavam fora dela —, e ainda vinha com canto arredondado,
      que não existe em lugar nenhum do site.
   2. O `float:left` no botão de entrar. Elemento flutuante NÃO conta na altura do pai:
      a borda da caixa fechava ACIMA dele e o botão ficava pendurado para fora. Não era o
      botão "mal posicionado" — era a caixa terminando cedo demais.

   `box-sizing` explícito porque este tema não declara `border-box` global: com
   `width:100%` e `padding:1rem 2.6rem`, a conta do content-box passa 5,2rem do lugar. */
.woocommerce-account .stylee-conta form.login,
.woocommerce-account .stylee-conta form.register{
  border:0;padding:0;margin:0;border-radius:0;
}
.woocommerce-account .stylee-conta .woocommerce-form-login__submit{float:none;margin-right:0}
.woocommerce-account .stylee-conta .stylee-btn{
  box-sizing:border-box;width:100%;text-align:center;
}

.woocommerce-account .woocommerce-privacy-policy-text{
  margin:0 0 22px;
  font-family:var(--ui);font-size:12px;line-height:1.65;color:var(--cinza);
}
.woocommerce-account .woocommerce-privacy-policy-text a{color:var(--tinta);border-bottom:1px solid var(--linha)}
.woocommerce-account .woocommerce-privacy-policy-text a:hover{color:var(--rosa);border-bottom-color:var(--rosa)}
.woocommerce-account .woocommerce-privacy-policy-text p{margin:0}

/* ── Conta: ícone no cabeçalho e atalho no menu do celular ────────────────────
   O ícone herda tudo de `.stylee-icone`; só o estado "logada" ganha o fio rosa embaixo —
   a pista silenciosa de que a sessão continua de pé. Sem essa pista, a cliente que já
   tem conta acaba criando uma segunda com o mesmo e-mail. */
.stylee-icone--conta.is-logada{position:relative}
.stylee-icone--conta.is-logada::after{
  content:"";position:absolute;left:50%;bottom:5px;transform:translateX(-50%);
  width:12px;height:1px;background:var(--rosa);
}
/* No menu do celular, escrito — segue a mesma entrada em cascata do rodapé do painel. */
.stylee-drawer__conta{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  padding:16px 0 0;color:#fff;
  font-family:var(--ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease) .5s,transform .6s var(--ease) .5s,color .3s ease;
}
body.stylee-menu-aberto .stylee-drawer__conta{opacity:1;transform:none}
.stylee-drawer__conta svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}
.stylee-drawer__conta:hover{color:var(--rosa)}
/* O rodapé perde o `margin-top:auto` quando a conta assume esse papel — dois elementos
   empurrando para baixo brigam, e o resultado é um vão no meio do menu. */
.stylee-drawer__conta + .stylee-drawer__rodape{margin-top:0;padding-top:22px}

/* ══════════════════════════════════════════════════════════════════════════
   NADA TRANSICIONA ANTES DE A PÁGINA ASSENTAR
   ══════════════════════════════════════════════════════════════════════════
   Corrigi este defeito TRÊS vezes, uma regra por vez — chat, mega-menu e cortina do
   menu — e ele voltou nas três. Não é azar: é uma CLASSE de problema, e tratá-la caso a
   caso é garantir que a próxima apareça.

   O mecanismo: um elemento escondido por `opacity`/`visibility` que também declara
   `transition` pode, no PRIMEIRO cálculo de estilo, animar do valor inicial da
   propriedade (visível) até o nosso (escondido). Durante essa animação ele é pintado.
   Não importa qual elemento seja — importa a combinação.

   Aqui a combinação deixa de existir até o `<html>` receber `stylee-pronto`, que o JS
   põe SÓ depois de: load + fontes carregadas + um quadro. Isso cobre a janela inteira em
   que a piscada acontecia (medida em ~3s, junto da troca de fonte).

   `transition` só, nunca `animation`: a entrada do conteúdo é animação e deve continuar.
   O custo é nenhum na prática — ninguém passa o mouse num botão nos primeiros segundos, e
   se passar, o efeito apenas não suaviza. */
/* `.stylee-reveal` FICA DE FORA (corrigido 15/08/2026). A revelação dos cards usa
   TRANSIÇÃO, e esta trava a desligava: na home os cards de "Chegaram agora" aparecem
   antes dos ~3,5s em que a trava vale, então entravam secos, sem subir. O André viu a
   animação sumir e me avisou.

   Excluí-los é seguro, e a razão é a que justifica a trava existir: ela protege contra
   painel ESCONDIDO que pinta sozinho no primeiro cálculo de estilo. Um card de produto
   não é painel — ele só fica visível quando o JS marca `is-visivel`, ao entrar na tela.
   Não há o que piscar. */
html:not(.stylee-pronto) *:not(.stylee-reveal),
html:not(.stylee-pronto) *::before,
html:not(.stylee-pronto) *::after{
  transition:none!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SAÍDA DO CHAT DA LIA — o avatar e o balão recolhem, não somem
   ══════════════════════════════════════════════════════════════════════════
   O André notou: entrada animada, saída em corte seco. É consequência de uma correção
   minha do mesmo dia — para acabar com os painéis piscando no carregamento, tirei a
   transição do estado FECHADO, e o fechamento perdeu o movimento junto.

   Agora dá para ter as duas coisas, porque existe a trava `stylee-pronto`: o JS só a põe
   no <html> depois de load + fontes + meio segundo. Antes disso NÃO há transição nenhuma
   (nada pode piscar no primeiro cálculo de estilo); depois, o fechamento anima
   normalmente. É exatamente para isso que aquela trava foi criada.

   `visibility 0s linear .42s` segura o elemento visível durante a saída — sem esse
   atraso ele sumiria no primeiro quadro e a animação existiria sem ninguém ver. É o mesmo
   truque da cortina do menu, e aqui ele é seguro pelo mesmo motivo: está atrás da trava.

   O balão desce e encolhe na direção do botão "Chat", que é de onde ele saiu; o avatar
   acompanha. Recolher para a origem é o que faz o movimento parecer intencional em vez
   de um desaparecimento. */
html.stylee-pronto .chat-button,
html.stylee-pronto .chatbox{
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s linear .42s;
}
html.stylee-pronto .chat-button.active,
html.stylee-pronto .chatbox.active{
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility 0s linear 0s;
}
/* Fechado: encolhido e deslocado para baixo — a origem é o botão, no canto inferior. */
html.stylee-pronto .chatbox{transform:translateY(16px) scale(.96);transform-origin:bottom right}
html.stylee-pronto .chat-button{transform:translateY(10px) scale(.92);transform-origin:bottom center}
html.stylee-pronto .chatbox.active{transform:translateY(0) scale(1)}
html.stylee-pronto .chat-button.active{transform:translateY(0) scale(1)}

@media (prefers-reduced-motion:reduce){
  html.stylee-pronto .chat-button,
  html.stylee-pronto .chatbox,
  html.stylee-pronto .chat-button.active,
  html.stylee-pronto .chatbox.active{transition:none;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   TÍTULO DE PÁGINA — entrada em cascata
   ══════════════════════════════════════════════════════════════════════════
   Cada palavra sobe por trás de uma máscara; o fio rosa desenha do centro para fora
   depois que elas assentam. A curva é a mesma dos painéis do site — desacelera no fim,
   que é o que dá a sensação de peso e não de pressa.

   `overflow:hidden` no invólucro é o que faz a palavra NASCER de baixo em vez de só
   aparecer. `padding-bottom` evita que a máscara corte a perna do "g" e do "ç". */
.stylee-tit--anima .stylee-tit__m{
  display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;
}
.stylee-tit--anima .stylee-tit__m > span{
  display:inline-block;
  transform:translateY(110%);
  animation:styleeTitSobe .85s cubic-bezier(.16,1,.3,1) forwards;
  /* 90ms entre palavras: junto o bastante para ler como uma frase, espaçado o bastante
     para o olho perceber a cascata. */
  animation-delay:calc(var(--i) * .09s);
}
@keyframes styleeTitSobe{to{transform:translateY(0)}}

/* O fio rosa entra por último, desenhando do centro — e só existe onde o tema já o
   desenhava (carrinho, conta, checkout, pedido recebido). */
.woocommerce-cart .stylee-pagina__topo::after,
.woocommerce-checkout .stylee-pagina__topo::after,
.woocommerce-account .stylee-pagina__topo::after,
.woocommerce-order-received .stylee-pagina__topo::after{
  transform:scaleX(0);transform-origin:center;
  animation:styleeTitFio .7s cubic-bezier(.16,1,.3,1) .45s forwards;
}
@keyframes styleeTitFio{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .stylee-tit--anima .stylee-tit__m > span{animation:none;transform:none}
  .stylee-pagina__topo::after{animation:none;transform:none}
}

/* ── MEGA-MENU: animação de volta, sem trazer a piscada junto ─────────────────
   Ao matar a piscada eu removi a transição do estado FECHADO do painel — e com ela foram
   embora a entrada e a saída. Na hora não havia alternativa; hoje há.

   `stylee-pronto` só entra no <html> depois de load + fontes + meio segundo. Antes disso
   não existe transição nenhuma, então o painel não tem como pintar no primeiro cálculo de
   estilo (que era a origem da piscada). Depois disso ele abre e fecha como antes.

   `visibility 0s linear .38s` é o que segura o painel visível durante a saída: sem esse
   atraso ele sumiria no primeiro quadro e a animação existiria sem ninguém ver. Era
   exatamente esta linha que causava a piscada — e aqui é segura pelo mesmo motivo pelo
   qual lá não era: está atrás da trava. */
html.stylee-pronto .stylee-mega{
  transition:opacity .38s var(--ease),transform .38s var(--ease),visibility 0s linear .38s;
}
@media (min-width:901px){
  html.stylee-pronto .stylee-mega{
    transition:opacity .3s cubic-bezier(.33,0,.2,1),visibility 0s linear .3s;
  }
}
@media (prefers-reduced-motion:reduce){
  html.stylee-pronto .stylee-mega{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTRO DA LOJA — as três correções que a tela pedia
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. AS CORES CLARAS EXISTIAM SÓ NO NOME. Bege, Branco, Light Pink e Off White eram um
      quadrado branco sobre fundo branco: a cliente lia a palavra e não via a cor. O anel
      interno resolve sem depender de saber QUAL cor é clara — vale para todas, e some
      visualmente nas escuras. Sombra externa suave dá o assentamento que a borda sozinha
      não dava. */
.stylee-caixinha{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.06);
  border-color:transparent;
}
.stylee-opcao:hover .stylee-caixinha{box-shadow:inset 0 0 0 1px var(--rosa),0 1px 3px rgba(0,0,0,.10)}
.stylee-opcao.is-marcada .stylee-caixinha{box-shadow:inset 0 0 0 1.5px var(--preto),0 1px 3px rgba(0,0,0,.12)}

/* 2. O TÍTULO DA JANELA SUMIA. Rosa claro, minúsculo e colado no botão de fechar — e é a
      primeira coisa que orienta quem abriu o painel. Ganha corpo, cor de texto e ar. */
.stylee-lateral__topo .stylee-eyebrow{
  color:var(--tinta);font-size:12px;letter-spacing:.24em;
}
.stylee-lateral__topo{padding:24px 24px 4px}

/* 3. A CONTAGEM VIRAVA SUJEIRA. Aparecia como um tracinho quase invisível na borda
      direita. Ou informa, ou sai — e informar é melhor: saber que "Preto" tem 12 peças
      ajuda a escolher antes de clicar. */
.stylee-opcao em{
  font-size:11px;letter-spacing:.06em;color:var(--cinza);
  font-variant-numeric:tabular-nums;opacity:.85;
}
.stylee-opcao.is-marcada em{color:var(--preto);opacity:1}

/* 4. O × pesado. Um quadrado com borda não fala a língua do site — o resto é fio fino e
      canto reto sem moldura. */
.stylee-lateral__x{border:0;background:none}
.stylee-lateral__x:hover{background:rgba(0,0,0,.04)}

/* 5. O VÃO MORTO antes do rodapé fazia o painel parecer inacabado. Mais ar ENTRE os
      grupos, menos sobra no fim. */
.stylee-lateral__corpo{gap:30px;padding-bottom:26px}
.stylee-grupo h3{letter-spacing:.22em}

/* ══════════════════════════════════════════════════════════════════════════
   FILTRO DE COR — a cor vira o elemento, não o enfeite ao lado do nome
   ══════════════════════════════════════════════════════════════════════════
   Quem filtra por cor está procurando A COR, não a palavra. A lista antiga invertia essa
   hierarquia: um quadrado de 15px à esquerda e o nome ocupando a linha inteira. Aqui a
   amostra cresce, ganha o centro, e o nome vira legenda embaixo — que é como toda loja de
   moda apresenta cor, e como o olho realmente procura.

   Três colunas em vez de duas: cabem mais cores sem rolagem, e a grade fica com ritmo de
   cartela em vez de lista de formulário.

   Só CSS, de propósito. A marcação continua a mesma (link > amostra > nome > contagem),
   então isto é reversível com um comando e não mexe em nada que já funciona: o clique, o
   endereço compartilhável e o funcionamento sem JavaScript seguem intactos. */
.stylee-opcoes--cores{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px 10px;
}
.stylee-opcoes--cores .stylee-opcao{
  flex-direction:column;align-items:center;gap:7px;padding:4px 0;text-align:center;
}
/* A amostra: redonda e generosa. Cor é forma orgânica; quadrado dá cara de código de cor. */
.stylee-opcoes--cores .stylee-caixinha{
  width:38px;height:38px;border-radius:50%;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.stylee-opcoes--cores .stylee-opcao:hover .stylee-caixinha{transform:translateY(-2px) scale(1.06)}
/* Marcada: o anel se afasta da cor em vez de cobri-la — assim a cliente continua vendo
   exatamente o tom que escolheu, que é a informação que importa. */
.stylee-opcoes--cores .stylee-opcao.is-marcada .stylee-caixinha{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 2px #fff,0 0 0 3.5px var(--preto);
  transform:translateY(-2px);
}
/* O "v" desenhado com bordas não cabe num círculo pequeno sem sujar a cor. Fora dele: o
   anel já diz que está marcada, e sem tapar o tom. */
.stylee-opcoes--cores .stylee-opcao.is-marcada .stylee-caixinha::after{display:none}

.stylee-opcoes--cores .stylee-opcao > span{
  min-width:0;font-size:11.5px;line-height:1.25;letter-spacing:.02em;
  overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;
}
.stylee-opcoes--cores .stylee-opcao em{
  margin:0;font-size:10px;letter-spacing:.08em;opacity:.7;
}
.stylee-opcoes--cores .stylee-opcao.is-marcada > span{font-weight:500;color:var(--preto)}

/* Categoria e Ordenar continuam em lista — ali o texto É a informação, e transformar em
   grade seria decorar sem ajudar. Só ganham o mesmo respiro. */
.stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao{padding:9px 0}

/* ══════════════════════════════════════════════════════════════════════════
   FILTRO EM PRETO — a mesma cor do cabeçalho
   ══════════════════════════════════════════════════════════════════════════
   O André perguntou como ficaria em preto, já que o menu é preto. Há um argumento
   funcional além do estético: COR SE LÊ MELHOR SOBRE FUNDO ESCURO. Bege, off-white e
   branco — que sobre fundo branco precisavam de anel para existir — aparecem sozinhos
   aqui. O escuro resolve por desenho o que eu tinha resolvido por remendo.

   E dá unidade: o painel entra pela esquerda com a mesma cor da barra que fica em cima,
   como se fosse a mesma peça se desdobrando. Fundo claro fazia dele um elemento
   estranho ao cabeçalho.

   O rosa continua sendo a assinatura, e sobre preto ele ganha força — é o mesmo par que
   o site usa no rodapé e no mega-menu. */
.stylee-lateral__caixa{
  background:#0d0d0d;
  box-shadow:26px 0 60px rgba(0,0,0,.45);
}
.stylee-lateral__topo .stylee-eyebrow{color:rgba(255,255,255,.72)}
.stylee-lateral__x{color:rgba(255,255,255,.55)}
.stylee-lateral__x:hover{color:#fff;background:rgba(255,255,255,.08)}

.stylee-lateral .stylee-grupo h3{
  color:rgba(255,255,255,.9);
  border-bottom-color:rgba(255,255,255,.14);
}
.stylee-lateral .stylee-opcao{color:rgba(255,255,255,.82)}
.stylee-lateral .stylee-opcao:hover{color:var(--rosa)}
.stylee-lateral .stylee-opcao.is-marcada{color:#fff}
.stylee-lateral .stylee-opcao em{color:rgba(255,255,255,.45)}
.stylee-lateral .stylee-opcao.is-marcada em{color:rgba(255,255,255,.85)}
.stylee-lateral .stylee-opcoes--cores .stylee-opcao.is-marcada > span{color:var(--rosa)}

/* A amostra sobre preto: o anel vira claro, senão some no fundo. E o realce de marcada
   troca o preto por branco — o contorno tem que contrastar com o PAINEL, não com a cor. */
.stylee-lateral .stylee-caixinha{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 1px 3px rgba(0,0,0,.5);
}
.stylee-lateral .stylee-opcao:hover .stylee-caixinha{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 2px 6px rgba(0,0,0,.55);
}
.stylee-opcoes--cores .stylee-opcao.is-marcada .stylee-caixinha{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 0 2px #0d0d0d,0 0 0 3.5px #fff;
}
/* Marca de escolha das listas (categoria, ordenar): o "v" precisa ser claro aqui. */
.stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao.is-marcada .stylee-caixinha::after{
  border-color:#fff;
}

/* Rodapé: o botão principal inverte (claro sobre escuro) e o "limpar" vira contorno. */
.stylee-lateral__base{
  background:#0d0d0d;border-top-color:rgba(255,255,255,.14);
}
.stylee-lateral__base .stylee-lateral__ver{background:#fff;color:var(--preto)}
.stylee-lateral__base .stylee-lateral__ver:hover{background:var(--rosa);color:#fff}
.stylee-lateral__limpar{
  background:none;color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.28);
}
.stylee-lateral__limpar:hover{background:#fff;color:var(--preto);border-color:#fff}

/* O fio rosa da borda interna, que já existia, ganha presença sobre o preto. */
.stylee-lateral__caixa::after{background:var(--rosa);width:2px}

/* ── CAIXA VAZIA TEM DE PARECER VAZIA ────────────────────────────────────────
   Categoria e Ordenar usam a mesma peça das cores, e ela pinta o fundo com `--tom`. Sem
   cor definida o padrão é BRANCO — que no painel claro era invisível, e no preto virou um
   quadrado branco sólido: a cliente abre o filtro e parece que tudo já está marcado.
   Aqui, sem `--tom`, a caixa é transparente; o branco só aparece quando ELA escolhe. */
.stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-caixinha{
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
}
.stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao:hover .stylee-caixinha{
  box-shadow:inset 0 0 0 1px var(--rosa);
}
.stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao.is-marcada .stylee-caixinha{
  background:#fff;box-shadow:inset 0 0 0 1px #fff;
}
.stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao.is-marcada .stylee-caixinha::after{
  border-color:var(--preto);
}
/* Preto sobre painel preto precisa do próprio contorno para existir. */
.stylee-opcoes--cores .stylee-caixinha{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 1px 3px rgba(0,0,0,.5)}

/* ── O PAINEL CABE NA TELA DO COMPUTADOR ─────────────────────────────────────
   Barra de rolagem dentro de um painel de filtro é sinal de que ele não coube — e o que
   fica abaixo da dobra ("Ordenar", no nosso caso) some da vista de quem não rola. Aqui o
   ganho vem de apertar o ESPAÇO, nunca a legibilidade: a amostra continua grande o
   bastante para julgar a cor, e o nome no mesmo corpo.

   Só no computador. No celular a rolagem é natural e a folha de tela cheia depende dela. */
@media (min-width:900px){
  .stylee-lateral__corpo{gap:20px;padding:14px 24px 18px}
  .stylee-opcoes--cores{gap:12px 8px}
  .stylee-opcoes--cores .stylee-caixinha{width:32px;height:32px}
  .stylee-opcoes--cores .stylee-opcao{gap:5px;padding:0}
  .stylee-opcoes--cores .stylee-opcao > span{font-size:11px}
  .stylee-opcoes--cores .stylee-opcao em{font-size:9.5px}
  .stylee-grupo h3{margin-bottom:8px;padding-bottom:7px}
  .stylee-lateral .stylee-opcoes:not(.stylee-opcoes--cores) .stylee-opcao{padding:6px 0}
  .stylee-lateral__topo{padding:20px 24px 2px}
  .stylee-lateral__base{padding:12px 24px calc(12px + env(safe-area-inset-bottom, 0px))}
}


/* ══════════════════════════════════════════════════════════════════════════
   FOLHEAR AS FOTOS DENTRO DO CARTÃO  (16/08/2026, André — ref. Gucci / LV)
   ══════════════════════════════════════════════════════════════════════════
   A moldura da foto deixa de ser uma caixa com duas camadas sobrepostas e vira uma
   PISTA horizontal com encaixe. Três consequências que valem o bloco inteiro:

   • no dedo, a foto passa arrastando — sem nada de JavaScript;
   • a seta só chama `scrollTo`, então inércia e suavidade são do navegador;
   • sem script, a pista continua funcionando (por isso os controles nascem `hidden`).

   O crossfade que existia aqui (`.stylee-foto__cor2`, 10/08) fazia o mesmo trabalho de
   um jeito passivo: a segunda cor aparecia sozinha ao passar o mouse, e no celular
   ninguém via. Ele sai porque a pista faz mais e faz para todo mundo — mas as regras
   dele ficaram no arquivo e PRECISAM ser neutralizadas aqui embaixo, senão a primeira
   foto continua desbotando para 25% ao passar o mouse. */
.woocommerce ul.products li.product .stylee-pista{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;              /* a suavidade é decidida no JS, por gesto */
  overscroll-behavior-x:contain;     /* folhear a última foto não puxa a página para trás */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.woocommerce ul.products li.product .stylee-pista::-webkit-scrollbar{display:none}

.woocommerce ul.products li.product .stylee-pista > img{
  flex:0 0 100%;
  width:100%;height:100%;
  object-fit:cover;
  scroll-snap-align:center;
}

/* Herança do desenho antigo, agora desligada. A segunda camada não existe mais no HTML;
   o que sobrou e atrapalha é o desbotamento da primeira foto ao passar o mouse. */
.woocommerce ul.products li.product:hover .stylee-pista > img:first-of-type{opacity:1}
/* O zoom no hover também sai — só DENTRO da pista. Numa caixa que rola, `scale` faz a
   foto vazar por cima da vizinha, e o pedaço de outra cor aparecendo na beirada durante
   o arrasto lê como falha de carregamento. O que convida a folhear agora são os
   controles, que é um convite mais claro do que um zoom de 6%. */
.woocommerce ul.products li.product:hover .stylee-pista > img{transform:none}

/* ── A CAMADA DE CONTROLES ────────────────────────────────────────────────────
   Fora do link (ver o gancho `woocommerce_after_shop_loop_item` no functions.php) e
   posicionada por cima da foto. Repete a proporção 4/5 da moldura em vez de uma altura
   fixa: assim acompanha o cartão em qualquer largura, e no dia em que a proporção mudar,
   muda nos dois lugares por um motivo só. */
.woocommerce ul.products li.product{position:relative}
.stylee-fotonav{
  position:absolute;
  top:0;left:0;right:0;
  /* `border-box` explícito: este tema não tem reset global de caixa, e com `content-box`
     a proporção abaixo passa a ser calculada sobre a largura SEM o recuo — a camada fica
     mais curta que a foto e as setas sobem. */
  box-sizing:border-box;
  aspect-ratio:4/5;
  pointer-events:none;               /* o clique atravessa e continua abrindo a peça */
  display:flex;align-items:center;justify-content:space-between;
  padding:0 6px;
}
.stylee-fotonav__seta{
  pointer-events:auto;
  /* Alvo de 44px (o mínimo confortável para o dedo) com desenho de 15: a área que
     responde é maior do que a que se vê, sem a seta virar um bloco pesado sobre a foto. */
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--preto,#1a1a1a);
  cursor:pointer;
  opacity:0;
  transform:translateY(2px) scale(.94);
  transition:opacity .28s var(--ease),transform .28s var(--ease),background .2s var(--ease);
  -webkit-backdrop-filter:none;backdrop-filter:none;  /* ver armadilha 11: pisca e não se vê */
}
.stylee-fotonav__seta svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.stylee-fotonav__seta:hover{background:#fff}
.stylee-fotonav__seta:focus-visible{
  opacity:1;transform:none;
  outline:2px solid var(--preto,#1a1a1a);outline-offset:2px;
}

/* Só onde existe ponteiro. No telefone o gesto é arrastar, e duas bolas brancas em cima
   da foto roubariam espaço da peça — que é o que a cliente veio ver. */
@media (hover:hover) and (pointer:fine){
  .woocommerce ul.products li.product:hover .stylee-fotonav__seta,
  .woocommerce ul.products li.product:focus-within .stylee-fotonav__seta{
    opacity:1;transform:none;
  }
}
/* ── NO CELULAR AS SETAS FICAM, E FICAM VISÍVEIS (16/08/2026, André) ─────────
   Eu as tinha escondido no toque, apostando que arrastar bastava. O André testou e
   mostrou o furo: **no arrasto a pista para na última foto** — o laço contínuo não
   existe no gesto nativo, ele é nosso, e mora nas setas. Sem elas, o celular tem uma
   experiência menor do que o computador justamente onde está a maior parte das vendas.

   Aqui não há `:hover` para revelar nada, então elas são permanentes — e por isso
   precisam ser mais discretas do que no computador: menores, fundo mais leve e coladas
   na borda, para devolver à peça o espaço que ocupam. */
@media (hover:none){
  .stylee-fotonav{padding:0 4px}
  .stylee-fotonav__seta{
    opacity:1;
    transform:none;
    width:34px;height:34px;
    background:rgba(255,255,255,.72);
  }
  .stylee-fotonav__seta svg{width:13px;height:13px}
  /* O selo "Última peça" mora no canto superior esquerdo; as setas ficam no meio da
     foto, então não se atropelam. O nome da cor é que sobe um pouco, para não dividir
     a linha de baixo com a régua de traços num cartão estreito. */
  .stylee-fotonav__cor{left:8px;bottom:20px;font-size:9px;padding:3px 7px}
}

/* ── O INDICADOR: TRAÇOS, NÃO BOLINHAS ───────────────────────────────────────
   Bolinha é a convenção de banner de propaganda, e é o que as duas referências usam.
   Um traço fino conversa melhor com o resto desta loja (as réguas do menu, o fio do
   rodapé) e diz outra coisa: não são "slides", é uma peça em várias cores — a barra
   preenchida mostra ONDE ela está na régua de cores. */
.stylee-fotonav__tracos{
  position:absolute;
  left:0;right:0;bottom:10px;
  display:flex;gap:4px;justify-content:center;
  pointer-events:none;
}
.stylee-fotonav__traco{
  width:16px;height:2px;
  background:rgba(26,26,26,.22);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.stylee-fotonav__traco.is-atual{width:24px;background:var(--preto,#1a1a1a)}

/* ── O NOME DA COR ───────────────────────────────────────────────────────────
   Aparece ao folhear e some sozinho. Sem ele, a cliente vê a bolsa mudar de cor e não
   sabe como aquela cor se chama — e é pelo nome que ela pede à LIA, procura no filtro e
   fala com a equipe. Fica no rodapé da foto porque ali não cobre a peça. */
.stylee-fotonav__cor{
  position:absolute;
  left:12px;bottom:22px;
  font-family:var(--ui);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--preto,#1a1a1a);
  background:rgba(255,255,255,.86);
  padding:4px 9px;
  opacity:0;transform:translateY(4px);
  pointer-events:none;
}
.stylee-fotonav__cor.is-visivel,
.stylee-fotonav__cor.is-visivel2{
  animation:stylee-cor-aparece 2.4s var(--ease) forwards;
}
@keyframes stylee-cor-aparece{
  0%{opacity:0;transform:translateY(4px)}
  12%{opacity:1;transform:none}
  72%{opacity:1;transform:none}
  100%{opacity:0;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .stylee-fotonav__seta{transition:none}
  .stylee-fotonav__traco{transition:none}
  /* O nome da cor continua aparecendo — ele é INFORMAÇÃO, não enfeite. O que sai é o
     movimento: entra e sai sem deslizar. */
  .stylee-fotonav__cor.is-visivel,
  .stylee-fotonav__cor.is-visivel2{animation:none;opacity:1;transform:none}
}

/* ── A VITRINE DA HOME ACOMPANHA A DA LOJA ───────────────────────────────────
   A loja já era de borda a borda (09/08); a home continuava numa caixa centrada com
   recuo — duas vitrines com a mesma peça e dois enquadramentos diferentes no mesmo site.
   O André pediu "loja e vitrine" no mesmo gesto, e é o certo: a home é onde a maior
   parte das visitas começa.

   Aqui a seção mantém o respiro VERTICAL (é ele que separa a vitrine do bloco de cima) e
   perde só o lateral. O título e a chamada recebem o recuo de volta, individualmente —
   texto encostado na borda do vidro não se lê. */
.stylee-vitrine{padding-left:0;padding-right:0}
.stylee-vitrine > .stylee-wrap{max-width:none;padding-left:0;padding-right:0}
.stylee-vitrine .stylee-eyebrow,
.stylee-vitrine h2,
.stylee-vitrine .stylee-lead,
.stylee-vitrine .stylee-acoes{
  padding-left:clamp(16px,3vw,40px);
  padding-right:clamp(16px,3vw,40px);
}
.stylee-vitrine ul.products{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:clamp(26px,2.2vw,40px) 2px!important;
}
@media (min-width:900px){
  .stylee-vitrine ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1340px){
  .stylee-vitrine ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* Mesmo recuo do texto da loja: o nome e o preço acompanham a foto, não a borda da tela. */
.stylee-vitrine ul.products li.product .woocommerce-loop-product__title{
  padding:0 clamp(12px,1.1vw,18px)!important;
}
.stylee-vitrine ul.products li.product .price,
.stylee-vitrine ul.products li.product .stylee-cores-n{
  padding-left:clamp(12px,1.1vw,18px);
  padding-right:clamp(12px,1.1vw,18px);
}
.stylee-vitrine ul.products li.product .stylee-ultima{left:10px;top:10px}
.stylee-vitrine ul.products li.product .stylee-pista{border-radius:0}


/* ══════════════════════════════════════════════════════════════════════════
   GRADE COLADA, DE BORDA A BORDA  (16/08/2026, André — 2ª leitura da referência)
   ══════════════════════════════════════════════════════════════════════════
   «No computador e celular, gostaria que não houvesse nenhum espaçamento entre os cards.
   No celular ainda ficaram bordas laterais.»

   Duas correções, e a primeira é uma reincidência que vale anotar: um bloco posterior
   ("Respiro de verdade entre as peças") havia devolvido gaps de 14 a 44px, desfazendo o
   fio de 2px sem que a regra antiga fosse tocada. É a armadilha nº 9 deste arquivo de
   novo — bloco novo, sem media query, vencendo em silêncio o que foi escrito antes.
   Por isso a decisão agora fica escrita no FIM e nas TRÊS superfícies de vitrine (loja,
   categoria e home), com `!important`: aqui `!important` não é preguiça, é o único jeito
   de vencer `.stylee-vitrine{padding:14px!important}` do bloco móvel.

   O espaçamento vertical não some junto com o horizontal: ele deixa de ser GAP e passa a
   ser um recuo DENTRO do cartão, abaixo do preço. Visualmente é o que as duas referências
   fazem — as fotos se tocam nos quatro lados e o texto respira dentro da própria célula.
   Se o gap vertical fosse a zero sem isso, o nome da peça de cima encostaria na foto de
   baixo e as duas linhas virariam uma só mancha. */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
.stylee-vitrine ul.products{
  gap:0!important;
}
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
.stylee-vitrine ul.products li.product{
  padding-bottom:clamp(20px,2vw,32px);
}

/* A foto encosta na vizinha: nenhum arredondamento, que numa grade colada vira falha
   branca nos cantos. */
body.post-type-archive-product ul.products li.product .stylee-pista,
body.tax-product_cat ul.products li.product .stylee-pista,
.stylee-vitrine ul.products li.product .stylee-pista{
  border-radius:0;
}

/* ── CELULAR: A GRADE TAMBÉM ENCOSTA NA BORDA ────────────────────────────────
   O recuo de 14px não vinha da grade nem do invólucro: vinha da SEÇÃO, pela regra móvel
   geral que dá respiro a todo bloco interno do site — e ela usa `!important`. A vitrine
   precisa escapar dela nos dois lados; o respiro VERTICAL continua, porque é ele que
   separa a vitrine do cabeçalho e do rodapé. */
@media (max-width:600px){
  body.post-type-archive-product .stylee-loja,
  body.tax-product_cat .stylee-loja,
  .stylee-vitrine{
    padding-left:0!important;
    padding-right:0!important;
  }
  body.post-type-archive-product .stylee-loja .stylee-wrap,
  body.tax-product_cat .stylee-loja .stylee-wrap,
  .stylee-vitrine .stylee-wrap{
    padding-left:0!important;
    padding-right:0!important;
    max-width:none;
  }
  /* O TEXTO não vai junto até a borda: ele ganha o recuo de volta, agora por conta
     própria. Foto colada no vidro é vitrine; letra colada no vidro é descuido. */
  body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  .stylee-vitrine ul.products li.product .woocommerce-loop-product__title{
    padding:0 10px!important;
  }
  body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  .stylee-vitrine ul.products li.product .price,
  body.post-type-archive-product ul.products li.product .stylee-cores-n,
  .stylee-vitrine ul.products li.product .stylee-cores-n{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  /* O título e a chamada da vitrine da home continuam com respiro: só a GRADE encosta. */
  .stylee-vitrine .stylee-eyebrow,
  .stylee-vitrine h2,
  .stylee-vitrine .stylee-lead,
  .stylee-vitrine .stylee-acoes{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}


/* ── E A GRADE ENCOSTA NA BORDA NO COMPUTADOR TAMBÉM ─────────────────────────
   Medido depois de colar os cartões: a grade ia de 44px a 1221px numa tela de 1280 — ou
   seja, continuava numa caixa. Não era resíduo: um bloco POSTERIOR ao "borda a borda" de
   09/08 havia devolvido `clamp(16px,4vw,44px)` à seção e zerado o recuo do título com
   `!important`. As duas decisões conviviam no arquivo, e a última escrita ganhava.

   Aqui elas ficam resolvidas de uma vez e para as três superfícies. A seção perde o
   recuo LATERAL (o vertical continua: é ele que separa a vitrine do cabeçalho), e o
   texto recebe o dele de volta — foto encostada no vidro é vitrine, letra encostada no
   vidro é descuido. */
body.post-type-archive-product .stylee-loja,
body.tax-product_cat .stylee-loja,
.stylee-vitrine{
  padding-left:0!important;
  padding-right:0!important;
}
body.post-type-archive-product .stylee-loja > .stylee-wrap,
body.tax-product_cat .stylee-loja > .stylee-wrap,
.stylee-vitrine > .stylee-wrap{
  max-width:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* O que é TEXTO recebe o recuo de volta, individualmente. */
body.post-type-archive-product .woocommerce-products-header,
body.post-type-archive-product .stylee-loja h1.page-title,
body.post-type-archive-product .stylee-loja__intro,
body.post-type-archive-product .stylee-mais,
body.tax-product_cat .stylee-loja h1.page-title,
body.tax-product_cat .term-description,
body.tax-product_cat .stylee-mais{
  padding-left:clamp(16px,3vw,40px);
  padding-right:clamp(16px,3vw,40px);
}
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
.stylee-vitrine ul.products li.product .woocommerce-loop-product__title{
  padding:0 clamp(12px,1.1vw,18px)!important;
}
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price,
.stylee-vitrine ul.products li.product .price,
body.post-type-archive-product ul.products li.product .stylee-cores-n,
body.tax-product_cat ul.products li.product .stylee-cores-n,
.stylee-vitrine ul.products li.product .stylee-cores-n{
  padding-left:clamp(12px,1.1vw,18px)!important;
  padding-right:clamp(12px,1.1vw,18px)!important;
}
/* O selo acompanha a foto, que agora começa na borda da célula. */
body.post-type-archive-product ul.products li.product .stylee-ultima,
body.tax-product_cat ul.products li.product .stylee-ultima,
.stylee-vitrine ul.products li.product .stylee-ultima{left:10px;top:10px}


/* ── A PISTA VALE EM TODA SUPERFÍCIE DE VITRINE ──────────────────────────────
   Sintoma (André): na LOJA a foto passava; na HOME as setas apareciam e nada acontecia.
   A pista estava `display:block` e `overflow:hidden` só ali.

   Causa — a armadilha nº 12 deste arquivo, agora do avesso. Existe um bloco anterior com
   `.stylee-vitrine .woocommerce ul.products li.product .stylee-pista{display:block!important;
   overflow:visible!important}`, escrito para desligar o crossfade. Ele exige um
   `.woocommerce` INTERMEDIÁRIO: na loja não existe (a classe está no próprio body, e um
   elemento não é ancestral de si mesmo), então a regra nunca casou e a pista funcionou;
   na home o shortcode `[products]` gera essa div, a regra casa, e com `!important` ela
   vence qualquer coisa minha escrita com menos níveis.

   Lição que vale além deste bug: quando duas páginas montam o MESMO componente com
   marcação diferente, a regra tem de ser escrita para as duas formas — testar só uma
   delas é testar metade. Por isso aqui estão as seis superfícies onde este cartão
   aparece: loja, categoria, home, relacionados, up-sells e o carrinho. */
.woocommerce ul.products li.product .stylee-pista,
body.post-type-archive-product .woocommerce ul.products li.product .stylee-pista,
body.tax-product_cat .woocommerce ul.products li.product .stylee-pista,
.stylee-vitrine .woocommerce ul.products li.product .stylee-pista,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-pista,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista{
  display:flex!important;
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.woocommerce ul.products li.product .stylee-pista > img,
.stylee-vitrine .woocommerce ul.products li.product .stylee-pista > img,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista > img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista > img{
  flex:0 0 100%!important;
  width:100%!important;height:100%!important;
  object-fit:cover;
  scroll-snap-align:center;
  opacity:1!important;          /* o desbotamento do crossfade antigo não vale mais aqui */
  transform:none!important;     /* nem o zoom, que numa pista vaza sobre a foto vizinha */
}


/* ══════════════════════════════════════════════════════════════════════════
   A PISTA TEM NOME PRÓPRIO  (16/08/2026)
   ══════════════════════════════════════════════════════════════════════════
   Sintoma: na LOJA a foto passava; na HOME as setas apareciam e nada acontecia. A pista
   estava `display:block` e `overflow:hidden` só ali.

   A causa não era uma regra: eram QUATRO, de um sistema anterior de cartão "básico"
   (constantes `STYLEE_PRODUTOS_BASICO_ATIVO` / `FADE_CORES_ATIVO`), todas com
   `!important`, duas dentro de media queries, forçando na moldura `display:block`,
   `position:static`, `overflow:visible` — e nas imagens `height:auto` e `margin-bottom`,
   que sozinhos já desmontariam os slides. Elas casavam na home e não na loja porque
   exigem um `.woocommerce` INTERMEDIÁRIO: o shortcode `[products]` da home gera essa
   div, e a página de arquivo não (lá a classe está no próprio body). É a armadilha nº 12
   deste arquivo pelo avesso.

   Empilhar um quinto bloco com especificidade maior seria a terceira camada de tinta no
   mesmo lugar — e a próxima pessoa a mexer aqui herdaria cinco regras brigando pela
   mesma propriedade. Em vez disso o componente novo ganhou NOME PRÓPRIO: nada do sistema
   antigo casa com `.stylee-pista`, então ele nem precisa ser desligado (continua inteiro,
   caso alguém religue as constantes). O preço é reconstruir aqui o que a moldura antiga
   dava de bom — proporção, fundo e respiro —, que é o bloco abaixo. */
.woocommerce ul.products li.product .stylee-pista{
  display:flex;
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* A PROPORÇÃO MORA NA MOLDURA, e não só na imagem. Sem isto a pista nasce com altura
     zero enquanto a foto (lazy) não chega, a grade encolhe e o rodapé sobe para dentro
     da tela — o "pisca preto" diagnosticado em 09/08. Reservar a altura desde o primeiro
     quadro é o que impede isso, e vale para todo cartão que chegue pela rolagem. */
  aspect-ratio:4/5;
  background:var(--areia);
  border-radius:0;
  margin:0 0 14px;
}
.woocommerce ul.products li.product .stylee-pista::-webkit-scrollbar{display:none}

.woocommerce ul.products li.product .stylee-pista > img{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0!important;
  border-radius:0;
  scroll-snap-align:center;
}


/* ── SÓ A GRADE ENCOSTA NA BORDA. O TEXTO, NUNCA. ────────────────────────────
   (16/08/2026 — «a barra de pesquisa está descentralizada»)

   Ao zerar o recuo da seção para os cartões se colarem no vidro, levei junto tudo o que
   é TEXTO: no celular o título, a frase de abertura e a BUSCA passaram a começar em 0.
   Na busca ficou evidente porque ela não é simétrica por dentro — o campo tem a lupa à
   esquerda (27px) e nada à direita, então encostada na borda ela lê como torta, que foi
   exatamente a palavra do André.

   Regra que fica valendo para esta vitrine: recuo lateral é do CONTEÚDO, não do
   contêiner. Quem encosta é a foto; letra e campo de formulário recebem o seu de volta,
   um a um. Com `!important` porque o bloco que zera a seção também usa — é a mesma
   disputa, e o desempate precisa ser explícito. */
@media (max-width:600px){
  /* MARGEM, e não recuo interno: a caixa visível da busca é a LINHA de baixo do próprio
     form. Com `padding` o conteúdo entrava 14px e a linha continuava atravessando a tela
     de ponta a ponta — a lupa parecia deslocada dentro de um traço que não tinha fim.
     Com margem, a linha recua junto e o conjunto fica simétrico. */
  body.post-type-archive-product .stylee-busca,
  body.tax-product_cat .stylee-busca{
    box-sizing:border-box;
    width:auto!important;
    margin-left:14px!important;
    margin-right:14px!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  body.post-type-archive-product .woocommerce-products-header,
  body.post-type-archive-product .stylee-loja h1.page-title,
  body.post-type-archive-product .stylee-loja__intro,
  body.post-type-archive-product .stylee-mais,
  body.tax-product_cat .stylee-loja h1.page-title,
  body.tax-product_cat .term-description,
  body.tax-product_cat .stylee-mais{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}


/* ── A BUSCA PARECE CENTRADA PORQUE O CONTEÚDO DELA ESTÁ CENTRADO ────────────
   (16/08/2026 — «talvez o texto interno da barra esteja tirando a percepção de
   centralizado». Era isso mesmo.)

   A barra JÁ estava centrada na página: medida em 375px, ia de 14 a 361, simétrica. O
   que não estava centrado era o que se vê DENTRO dela — a lupa encostada na borda
   esquerda, o texto logo depois, e 320px de vazio à direita. Ninguém enxerga a caixa;
   enxerga a lupa e a frase. Se elas moram à esquerda, a barra parece à esquerda.

   Em repouso, o par lupa + frase fica no meio. Ao clicar para digitar, o campo volta a
   ocupar a linha inteira e o texto alinha à esquerda — que é o certo para quem está
   escrevendo, e é o que evita o texto pular de lugar enquanto se digita. A transição
   suaviza a troca. */
.stylee-busca{
  justify-content:center;
}
.stylee-busca input[type="search"]{
  flex:0 1 auto;
  /* Largura do texto do placeholder, com teto na linha: em tela estreita ele usa tudo o
     que existe, sem nunca estourar. */
  width:min(100%,30ch);
  text-align:center;
  transition:width .22s var(--ease);
}
/* Digitando, o campo é um campo: linha inteira e texto à esquerda. */
.stylee-busca:focus-within{
  justify-content:flex-start;
}
.stylee-busca:focus-within input[type="search"]{
  flex:1 1 auto;
  width:auto;
  text-align:left;
}


/* ══════════════════════════════════════════════════════════════════════════
   A PISTA VIRA JANELA, E QUEM SE MOVE É A FITA  (16/08/2026 — 2ª arquitetura)
   ══════════════════════════════════════════════════════════════════════════
   A primeira versão usava a rolagem nativa (`overflow-x:auto` + `scroll-snap`) e animava
   `scrollLeft`. Quatro bugs seguidos saíram da mesma raiz — duas mãos no mesmo volante:
   o encaixe reancorando a pista, o encaixe religado no meio da animação, a animação
   reescrevendo o dedo no celular e, por fim, passo duplo no computador.

   O André mandou olhar Gucci e LV. As duas usam Swiper.js: `overflow:hidden` e uma FITA
   movida por `transform`, com o gesto de arrastar feito à mão. É o que está aqui.

   `overflow-x:auto` CONTINUA sendo o padrão: sem JavaScript a pista ainda desliza. A
   classe `is-fita` — posta pelo próprio script — é que troca para o modo `transform`.
   Falhar para o lado que funciona é regra da casa. */
.woocommerce ul.products li.product .stylee-pista.is-fita{
  overflow:hidden;
  display:block;
  /* `pan-y` entrega a rolagem VERTICAL ao navegador e guarda a horizontal para nós: com
     `none`, descer a vitrine com o dedo sobre um cartão deixaria de funcionar. */
  touch-action:pan-y;
}
.stylee-pista__fita{
  display:flex;
  height:100%;
}
.stylee-pista__fita > img{
  flex:0 0 100%;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0!important;
  border-radius:0;
  /* Arrastar imagem é o gesto padrão do navegador e atrapalha o nosso no computador. */
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}


/* ══════════════════════════════════════════════════════════════════════════
   O MODO FITA PRECISA VENCER — os dois modos juntos é o pior dos mundos
   ══════════════════════════════════════════════════════════════════════════
   André: «está muito bugado, no PC e no celular». Medido: a pista continuava
   `display:flex` e `overflow-x:auto`, porque as regras da arquitetura ANTERIOR foram
   escritas com `!important` (elas precisavam vencer um sistema legado, e venceram bem
   demais). Com isso a pista rolava E a fita se movia: dois deslocamentos somados no mesmo
   gesto. Não era um bug — era o componente rodando duas vezes.

   Lição, e é a mesma que já me pegou aqui: `!important` resolve HOJE e cobra na próxima
   arquitetura. Como o `.is-fita` é ligado pelo próprio script, ele é o lugar certo para
   declarar o modo — mas só com força igual à que já existe no arquivo. */
.woocommerce ul.products li.product .stylee-pista.is-fita,
body.post-type-archive-product .woocommerce ul.products li.product .stylee-pista.is-fita,
body.tax-product_cat .woocommerce ul.products li.product .stylee-pista.is-fita,
.stylee-vitrine .woocommerce ul.products li.product .stylee-pista.is-fita,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista.is-fita,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-pista.is-fita,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista.is-fita{
  display:block!important;
  overflow:hidden!important;
  overflow-x:hidden!important;
  overflow-y:hidden!important;
  scroll-snap-type:none!important;
  touch-action:pan-y;
}

.stylee-pista.is-fita .stylee-pista__fita{
  display:flex!important;
  width:100%;
  height:100%;
  /* `left` só desloca com posicionamento relativo — e é `left`, e não `transform`, que
     move esta fita: ver a explicação em `posicaoAtual()` no assets/vitrine.js. */
  position:relative;
  left:0;
  /* SEM `will-change` e SEM `backface-visibility` (16/08/2026). As duas existem para
     promover a fita a uma camada de GPU — e é justamente a camada que não repinta na
     máquina do André. Precedente na armadilha nº 11 deste arquivo: `backdrop-filter` no
     cabeçalho piscava a tela inteira de preto no Windows/Chrome, e a camada nem aparecia
     nos prints. Aqui o sintoma é o gêmeo silencioso: o DOM anda, a tela não. Uma fita de
     cinco fotos não precisa de camada dedicada. */
}

/* AS IMAGENS DENTRO DA FITA. Elas continuam sendo `li.product a img`, então o sistema
   legado do cartão "básico" ainda as alcança com `height:auto!important` e
   `margin:0 0 16px!important` — o que sozinho já desmontaria a fita (altura errada e um
   respiro entre as fotos). Aqui elas são redeclaradas com a mesma força. */
/* ARMADILHA Nº 12 OUTRA VEZ, e eu mesmo caí nela: `body.post-type-archive-product
   .woocommerce ...` exige um `.woocommerce` INTERMEDIÁRIO, que na loja não existe (a
   classe mora no próprio body, e um elemento não é ancestral de si mesmo). Só o seletor
   curto casava, com (0,3,1), e perdia para a regra legada `.woocommerce ul.products
   li.product a img` (0,3,4) — que traz `margin:0 0 16px!important` e mete um respiro
   entre as fotos da fita. `.woocommerce` SEM intermediário casa (o body é ancestral do
   ul) e leva a especificidade para (0,6,3), que vence. */
.woocommerce ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img,
.stylee-vitrine ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img,
ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img{
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  border-radius:0!important;
  object-fit:cover!important;
  opacity:1!important;
  transform:none!important;
  aspect-ratio:auto!important;
  /* Arrastar a imagem é gesto padrão do navegador e atrapalha o nosso no computador.
     `pointer-events:none` SAIU daqui (16/08/2026): a declaração estava perdendo para
     regras mais específicas em algumas superfícies e valendo em outras — e um componente
     que recebe eventos num cartão e não em outro é pior do que um que nunca recebe. O
     alvo do gesto passa a ser sempre a imagem, e o código sobe até a pista com `closest`,
     que funciona nos dois casos. */
  -webkit-user-drag:none;
  user-select:none;
}


/* ── O TRILHO ACOMPANHA A ESCALA DO CARTÃO (16/08/2026, André) ────────────────
   «No celular o trilho ficou colado na base da bolsa; no computador, não.»

   Medido nos dois: a IMAGEM está igual — arquivo 0,799 e moldura 0,800 nas duas telas, a
   bolsa ocupa a mesma fração da foto. O que não escalava era o trilho, preso em 10px do
   fundo. Sobre uma foto de 527px isso é um respiro discreto; sobre 234px é
   proporcionalmente o DOBRO, e encosta na peça.

   Respiro em porcentagem resolve na raiz: passa a ser a mesma fração da foto em qualquer
   largura. Os limites do `clamp` existem para os extremos — num cartão muito pequeno a
   porcentagem viraria um fio, e num monitor largo, um exagero.

   Os traços também encolhem no toque: numa foto de 188px de largura, a régua de 4 cores
   ocupava um terço da base. */
/* COLADO NA BASE (16/08/2026, 2ª leitura do André): «parece que as bolsas estão
   sublinhadas por uma linha pontilhada». Era isso mesmo — a 3,4% do fundo, o trilho caía
   na altura da BASE DA PEÇA e o olho lia os dois juntos, como um sublinhado. Encostado no
   rodapé da foto ele sai da zona da bolsa e vira o que é: uma régua de posição, na borda.

   E ele nasce INVISÍVEL: quem mostra é a interação (ver `aparecerESumir` no
   assets/vitrine.js), no mesmo tempo do nome da cor. Sem isso, a régua ficaria
   permanentemente sobre a foto de toda peça com mais de uma cor. */
.stylee-fotonav__tracos{
  bottom:clamp(3px,1%,7px);
  opacity:0;
}
@media (hover:none){
  .stylee-fotonav__tracos{gap:3px}
  .stylee-fotonav__traco{width:11px}
  .stylee-fotonav__traco.is-atual{width:17px}
}
/* Quem pediu menos movimento vê a régua o tempo todo: para essa pessoa ela é a única
   forma de saber que a peça tem mais fotos. */
@media (prefers-reduced-motion:reduce){
  .stylee-fotonav__tracos{opacity:1}
}


/* ── AS CORES COMEÇAM SEMPRE NO MESMO LUGAR (16/08/2026, André) ───────────────
   «Quando o produto é simples, a miniatura ficou na segunda posição.»

   Medido na peça de uma cor só: o rótulo "Cor" começava em 749px e a miniatura em 849,
   enquanto na peça de quatro cores o conjunto inteiro ficava bem mais à esquerda. Não era
   margem: as variações do WooCommerce vêm numa `<table>`, e tabela distribui a largura
   entre as colunas conforme o CONTEÚDO. Com uma cor, a célula das miniaturas é estreita,
   sobra espaço, e a coluna do rótulo incha — empurrando tudo para o meio da linha. Com
   quatro, ela encolhe. Ou seja: a posição do bloco dependia de quantas cores a peça tem.

   Trocada a tabela por linhas flex. Rótulo e miniaturas passam a começar no mesmo ponto
   em toda peça — alinhados com o preço e a descrição, como o resto da coluna. */
body.single-product .variations,
body.single-product .variations tbody{
  display:block;
  width:100%;
}
body.single-product .variations tr{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.2vw,18px);
  margin:0 0 10px;
}
body.single-product .variations th,
body.single-product .variations td{
  display:block;
  width:auto;
  padding:0;
  text-align:left;
  vertical-align:middle;
}
/* O rótulo não encolhe nem quebra: ele é a âncora da linha. */
body.single-product .variations th.label,
body.single-product .variations th{
  flex:0 0 auto;
  white-space:nowrap;
}
body.single-product .variations td.value{flex:1 1 auto;min-width:0}


/* ── A COLUNA DA PEÇA RESPIRA MENOS, PARA MOSTRAR MAIS (16/08/2026, André) ────
   «Diminuir o espaçamento entre os campos, principalmente no mobile, para vermos as
   miniaturas com o texto das cores e sem cortes.»

   Medido antes no celular: título→preço 8px, preço→estoque 5px, estoque→cores 12px,
   cores→frete 26px, frete→descrição 20px, descrição→SKU 43px. Os três primeiros já eram
   apertados; a folga estava nos três últimos, e é de lá que vem o ganho — apertar o que
   já está justo só embola o texto.

   ESPECIFICIDADE: a primeira versão deste bloco não pegou. O tema (e o WooCommerce)
   escrevem estas margens com âncoras longas — `body.single-product.woocommerce div.product
   …`, uma delas com `!important` —, e `body.single-product h1.product_title` perdia por
   um nível. Repetir a âncora do tema é o que faz a regra valer; é a mesma lição da
   armadilha nº 12, agora em outra página. */
@media (max-width:600px){
  body.single-product.woocommerce div.product .woocommerce-product-gallery{margin-bottom:6px!important}
  body.single-product.woocommerce div.product h1.product_title{margin-bottom:5px!important}
  body.single-product.woocommerce div.product p.price{margin-bottom:3px!important}
  body.single-product.woocommerce div.product .stylee-estoque-inline{margin-bottom:8px!important}
  body.single-product.woocommerce div.product form.variations_form{margin-bottom:8px!important}
  body.single-product.woocommerce div.product form.cart table.variations tr{margin-bottom:6px!important}
  body.single-product.woocommerce div.product .containerCalculator{margin-top:8px!important;margin-bottom:12px!important}
  body.single-product.woocommerce div.product .woocommerce-product-details__short-description{margin-top:0!important;margin-bottom:12px!important}
  body.single-product.woocommerce div.product .product_meta{margin-top:16px!important}

  /* O NOME DA COR NÃO PODE SER CORTADO: é por ele que a cliente pede à LIA e fala com a
     equipe. A célula das variações vinha com `overflow:hidden`, e a legenda embaixo da
     miniatura era a primeira coisa a sumir. */
  body.single-product.woocommerce div.product form.cart table.variations td{overflow:visible!important}
  body.single-product.woocommerce div.product form.cart table.variations td label,
  body.single-product.woocommerce div.product form.cart table.variations td span{white-space:normal}
}

/* No computador a folga é menor, mas a mesma lógica vale: apertar o que sobra, e manter
   o respiro do preço (é ele que faz o preço ser lido como preço) e o do botão de comprar
   — dois campos colados viram um só, e ali um é ação e o outro é consulta. */
@media (min-width:601px){
  body.single-product.woocommerce div.product h1.product_title{margin-bottom:6px!important}
  body.single-product.woocommerce div.product .containerCalculator{margin-top:10px!important;margin-bottom:14px!important}
  body.single-product.woocommerce div.product .woocommerce-product-details__short-description{margin-bottom:14px!important}
  body.single-product.woocommerce div.product .product_meta{margin-top:18px!important}
}


/* ── O NOME DA COR CABE, E AS CORES SOBEM PARA DENTRO DA TELA (16/08/2026) ────
   Duas coisas cortavam a legenda no celular, e eu só tinha achado a primeira.

   1. O RECORTE. Não era a célula da tabela (aquela eu já tinha liberado): é o
      `.stylee-cores`, o contêiner que rola as cores na horizontal. Quem declara
      `overflow-x:auto` ganha `overflow-y:hidden` de brinde — o CSS não permite um eixo
      recortando e o outro livre. Como a legenda fica ABAIXO da miniatura, era ela a
      primeira coisa a encostar na borda e sumir. Sem altura fixa e com um respiro embaixo,
      ela passa a ter para onde ir.

   2. A DOBRA. Mesmo sem recorte, as cores terminavam por volta de 740px — abaixo da área
      visível de um celular com barra de navegador. A foto ocupava quase metade da tela.
      Aqui ela passa a ter teto em altura de tela (`vh`), o que sobe todo o resto: na
      página da PEÇA a cliente já escolheu o produto — ela quer ver cor, preço e comprar.
      Na vitrine a foto continua grande, que é onde ela decide. */
@media (max-width:600px){
  body.single-product.woocommerce div.product .stylee-cores{
    overflow-y:visible;
    height:auto!important;
    max-height:none!important;
    padding-bottom:4px;
  }
  body.single-product.woocommerce div.product .stylee-cores button{height:auto!important}

  body.single-product.woocommerce div.product .woocommerce-product-gallery,
  body.single-product.woocommerce div.product .woocommerce-product-gallery__wrapper,
  body.single-product.woocommerce div.product .woocommerce-product-gallery__image{
    max-height:40vh;
  }
  body.single-product.woocommerce div.product .woocommerce-product-gallery__image img{
    max-height:40vh;
    width:auto!important;
    margin:0 auto;
    object-fit:contain;   /* teto de altura não pode cortar a peça: ela encolhe inteira */
  }
}


/* ── O ESTOQUE NA LINHA DO PREÇO, À DIREITA (16/08/2026, André) ───────────────
   «Tem como posicionar a informação de estoque do lado direito da linha do preço? E sem
   impactar e ser impactado pelo número de casas decimais. A informação demora a carregar
   e, quando aparece, desloca o que está abaixo.»

   O aviso de estoque depende da variação escolhida, então ele só existe depois que o
   JavaScript roda — chega sempre atrasado. Como elemento próprio, ocupava uma linha nova e
   empurrava cores, quantidade e botão para baixo no meio da leitura.

   Duas decisões resolvem as três coisas de uma vez:
   • ele passa a viver DENTRO do parágrafo do preço (ver assets/stylee.js), numa linha que
     já existe — aparecer não move mais nada;
   • e é empurrado para a direita por `margin-left:auto`, não por uma margem calculada a
     partir do preço. Assim R$ 9,90 e R$ 1.299,00 deixam o aviso no mesmo lugar: o preço
     cresce para a direita, o aviso continua ancorado na borda. */
body.single-product.woocommerce div.product p.price{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body.single-product.woocommerce div.product p.price .stylee-estoque-inline{
  margin-left:auto;   /* a âncora é a BORDA, nunca o fim do preço */
}
/* A margem de baixo do aviso não existe mais: quem define o espaço agora é o preço. */
@media (max-width:600px){
  body.single-product.woocommerce div.product .stylee-estoque-inline{margin-bottom:0!important}
}


/* ── QUANTIDADE E "ADICIONAR AO CARRINHO" NA MESMA LINHA (16/08/2026, André) ──
   No celular os dois vinham empilhados, e o botão — que é a ação principal da página —
   caía abaixo da dobra. Lado a lado, ele sobe junto com a quantidade e ainda devolve uma
   linha inteira de altura.

   A quantidade tem largura própria (é um seletor pequeno, não precisa crescer); o botão
   fica com todo o resto, o que também aumenta a área de toque dele. `nowrap` porque
   quebrar aqui desfaz justamente o que a regra existe para fazer. */
@media (max-width:600px){
  /* SÓ o bloco de compra vira flex. Aplicar no `form.cart` inteiro foi um erro medido:
     no produto VARIÁVEL esse form contém também a tabela de cores, que virou item flex ao
     lado do bloco de compra e empurrou tudo para a direita (a quantidade começava em
     135px de uma tela de 375). No produto simples não há tabela, e aí o form é o próprio
     bloco de compra — por isso ele entra pela classe do tipo de produto. */
  body.single-product.woocommerce div.product.product-type-simple form.cart,
  body.single-product.woocommerce div.product .woocommerce-variation-add-to-cart{
    display:flex!important;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
  }
  body.single-product.woocommerce div.product form.cart .quantity,
  body.single-product.woocommerce div.product .woocommerce-variation-add-to-cart .quantity{
    flex:0 0 auto;
    margin:0!important;
  }
  /* `flex:1 1 0` com `min-width:0` é o que permite ao botão ENCOLHER: com `auto`, o
     texto longo ("ADICIONAR AO CARRINHO") vira largura mínima e estoura a tela — medido,
     ele terminava em 468px numa tela de 375. A fonte cede um pouco no celular e o texto
     pode quebrar em duas linhas se precisar; o que não pode é sair da tela. */
  body.single-product.woocommerce div.product button.single_add_to_cart_button{
    flex:1 1 0;
    min-width:0;
    width:auto!important;
    margin:0!important;
    white-space:normal;
    font-size:11px;
    letter-spacing:.06em;
    line-height:1.25;
    padding:14px 10px;
  }
  /* O seletor de quantidade é pequeno por natureza: não precisa de 140px. */
  /* O "+" ESTAVA SENDO CORTADO. Eu tinha apertado a CAIXA (120px) sem apertar o que
     está dentro dela: os dois botões e o campo somavam 139px, e o `overflow:hidden` da
     caixa comia o "+" que sobrava. Agora quem manda são as peças — a caixa acompanha. */
  body.single-product.woocommerce div.product .quantity{max-width:none;overflow:visible}
  body.single-product.woocommerce div.product .quantity .stylee-qtd__bt{width:34px!important;min-width:34px!important}
  body.single-product.woocommerce div.product .quantity input.qty{width:34px!important;min-width:34px!important;padding-left:2px!important;padding-right:2px!important}
}

/* ── A LIA SAI DA FRENTE DO BOTÃO DE COMPRAR ─────────────────────────────────
   O balão do chat é fixo no canto inferior direito, e na página da peça ele cobria
   justamente o "ADICIONAR AO CARRINHO" (visível no print do André). Desligar a LIA aqui
   resolveria a colisão e custaria caro: esta é a página onde mais aparece dúvida de cor,
   medida e prazo — é onde ela ajuda a fechar.

   Então ela não some: ela se recolhe enquanto o botão de comprar está na tela, e volta
   quando ele sai. Ninguém perde nada, e a ação principal nunca disputa espaço. A classe é
   posta pelo assets/stylee.js. */
/* ELE SAI DESLIZANDO PELA DIREITA, não desaparece (16/08/2026, pedido do André). Sumir
   por opacidade é um susto: o balão pisca fora de existência. Deslizando para fora da
   tela, o movimento explica a si mesmo — ele "sai da frente" e volta pelo mesmo caminho.
   Quem se move é o `.show-chat-launcher` (o estado FECHADO). O avatar e a janela do chat
   aberto ficam onde estão, sempre: quem abriu o chat está conversando, e conversa não
   pode fugir da tela porque a página rolou atrás. */
/* A transição só passa a existir DEPOIS da primeira decisão (classe posta pelo
   assets/stylee.js). Quem abre a peça com o botão de comprar à vista encontra o balão já
   fora — sem vê-lo entrar e sair, que era a piscada da chegada. */
body.single-product.stylee-chat-pronto .show-chat-launcher{
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s cubic-bezier(.22,.61,.36,1);
}
/* NADA DE `will-change` PERMANENTE: ele mantém uma camada de composição viva o tempo
   todo, e camada fixa sobre uma página que rola é candidata a engasgo. Aqui não há ganho
   que justifique — a transição é de 0,32s, uma vez. */

/* O GESTO VERTICAL ATRAVESSA O BALÃO (16/08/2026, André: «ocorre um impedimento de
   rolagem, tipo um limitador»). No celular o dedo desce por cima do canto direito, que é
   justamente onde o balão mora. Sem esta linha, o navegador entende que o toque começou
   NELE e a rolagem da página trava até o dedo sair. `pan-y` diz o contrário: rolar para
   baixo é da página, sempre; tocar continua abrindo o chat. */
body.single-product .show-chat-launcher{touch-action:pan-y}
body.single-product.stylee-comprar-a-vista .show-chat-launcher{
  transform:translateX(calc(100% + 32px))!important;
  opacity:0!important;
  /* SEM `pointer-events:none`: mudar essa propriedade embaixo de um dedo que já está
     tocando faz o navegador CANCELAR o gesto — outra fonte da rolagem travada. E ela era
     desnecessária: o balão sai inteiro da tela, ninguém alcança o que não está lá. */
}
@media (prefers-reduced-motion:reduce){
  body.single-product .show-chat-launcher{transition:none}
}


/* ── NENHUM TRILHO HORIZONTAL PODE SEQUESTRAR A ROLAGEM DA PÁGINA ────────────
   (16/08/2026, caçando o travamento que o André sentia no celular.)

   Diagnóstico: varri a página atrás de tudo que pudesse capturar o gesto e achei dois
   trilhos horizontais — o de CORES do produto e o de CATEGORIAS do menu lateral — ambos
   com `overflow` nos DOIS eixos. Basta o conteúdo passar um fio da altura para eles
   virarem contêiner de rolagem vertical: o dedo que desce por cima rola o trilho, não a
   página, e a página só volta a andar quando o trilho acaba. É exatamente "trava aqui e
   depois de mexer libera".

   A ARMADILHA QUE ME PEGOU: pedi `overflow-y:visible` junto de `overflow-x:auto` e o
   navegador transformou meu `visible` em `auto` — o CSS não permite um eixo recortando e
   o outro livre. Ou seja, a regra que eu tinha escrito para LIBERAR a legenda foi a que
   criou o contêiner vertical. `hidden` é explícito e não vira outra coisa.

   Não corta nada: os dois já têm altura para o conteúdo (medido, sobra vertical = 0). O
   que se perde é a capacidade de rolar verticalmente algo que nunca precisou disso. */
/* ESCOPADO AO CELULAR (17/08/2026, André: «ao deitar o celular e no computador, percebi
   que ocorreu algum corte por aproximação dos campos que impactou na moldura das
   miniaturas das variações»).

   O comentário acima diz "não corta nada: os dois já têm altura para o conteúdo (medido,
   sobra vertical = 0)". Eu medi NO CELULAR. Medido agora no computador: a caixa tem 93px
   e o conteúdo, 94 — um pixel, e é justamente a borda de baixo da moldura que some.

   E a regra nem precisava valer ali. Ela existe para desarmar a armadilha do
   `overflow-x:auto`, que só é declarado abaixo de 600px; acima disso as cores usam
   `flex-wrap:wrap`, não rolam em eixo nenhum, e não há armadilha para desarmar — só o
   recorte, de graça.

   A lição, que é a mesma de outras três hoje: medida feita num tamanho de tela não
   autoriza uma regra sem `@media`. */
@media (max-width:600px){
  body.single-product.woocommerce div.product .stylee-cores,
  .stylee-cores{
    overflow-y:hidden!important;
  }
  .stylee-trilho{
    overflow-y:hidden!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AÇÕES RÁPIDAS DA LIA — os atalhos que a cliente clica em vez de digitar
   ══════════════════════════════════════════════════════════════════════════
   Ideia do André, olhando o Kodee da Hostinger. O valor não é estético: cada clique
   é um FATO que não precisa ser interpretado, e interpretar foi a origem de quase todo
   bug de atendimento deste mês.

   Desenho deliberadamente DISCRETO — contorno, não bloco de cor. Estes botões dividem a
   tela com os cards de produto, que são a coisa que deve chamar a atenção ali dentro.
   Atalho gritando mais alto que a peça inverte a prioridade da loja. */
.chatbox .lia-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.chatbox .lia-acao{
  appearance:none;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#111;
  font:inherit;
  font-size:.82rem;
  line-height:1.2;
  /* 32px de altura útil: alvo de toque confortável no celular sem virar botão de banco. */
  padding:8px 13px;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  /* O rótulo não quebra no meio: "Troca ou defeito" em duas linhas vira duas ideias. */
  white-space:nowrap;
}

.chatbox .lia-acao:hover{
  border-color:var(--rosa,#d4869a);
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}

.chatbox .lia-acao:active{ transform:translateY(1px) }

/* Foco visível de verdade: quem navega por teclado precisa saber onde está, e o anel
   padrão do navegador some contra o fundo branco do balão. */
.chatbox .lia-acao:focus-visible{
  outline:2px solid var(--rosa,#d4869a);
  outline-offset:2px;
}

/* ROLAGEM HORIZONTAL AQUI FOI ERRO MEU, E ERRO REINCIDENTE (16/08/2026).
   Eu tinha escrito, para o celular, `flex-wrap:nowrap` + `overflow-x:auto` — economizava
   altura fazendo os atalhos deslizarem para o lado. O André pegou no print: «no celular
   ocorreu uma pequena rolagem horizontal dentro do balão».

   Duas razões para não voltar a fazer isso:
   1. O que sai da tela não existe. Ele viu "Bolsas | Mochilas | Meu pedido" e o quarto
      atalho escondido — atalho invisível é pior que atalho ausente, porque a cliente nem
      sabe que perdeu uma opção.
   2. `overflow-x:auto` força o `overflow-y` a computar como `auto`, criando um contêiner
      de rolagem VERTICAL onde não havia. É a mesma armadilha que já travou a rolagem da
      página de produto neste projeto, agora dentro de um balão de chat.

   Duas linhas de atalho custam ~40px de altura. Barato perto disso. */
.chatbox .lia-acoes{ flex-wrap:wrap }

/* ── O BOTÃO "ENVIAR" NÃO PODE ENCOLHER ABAIXO DA PRÓPRIA PALAVRA ────────────
   André: «o botão Enviar está pequeno ao ponto de quase não comportar toda a palavra».
   Medido: `flex: 0 1 auto` — o 1 do meio autoriza encolher. O texto pede 40px e o padding
   24px; com 64px ele cabe raspando na tela dele e CORTA em qualquer tela mais estreita.
   Quem tem que ceder espaço é o campo de digitar, que aceita qualquer largura. */
#sendButton{
  flex:0 0 auto!important;
  white-space:nowrap;
  /* E FOLGA DE VERDADE (16/08/2026, segunda rodada de print do André).
     Medido: nada estava cortado — o botão media 64px e terminava exatamente na borda do
     balão. Era APERTO: 40px de palavra com 12px de cada lado, e a folga da direita
     desaparece dentro do canto arredondado do chat, que tem `overflow:hidden`. Do lado de
     fora a leitura é de texto espremido contra a parede, e a leitura dele é a que vale.
     18px na horizontal levam a área preta a 76px. Quem cede é o campo de digitar, que
     tem `flex:1 1 0` e aceita qualquer largura. */
  padding-left:18px!important;
  padding-right:18px!important;
}

/* O campo precisa PODER encolher para o botão nunca ser espremido de volta. Sem
   `min-width:0`, um campo em flex usa o conteúdo como largura mínima e empurra o vizinho —
   foi o que estourou o botão de comprar na página de produto, no começo do dia. */
#chatInput{ min-width:0 }

/* ══════════════════════════════════════════════════════════════════════════
   O CHAT NO IPHONE — três defeitos, e o primeiro explica os outros dois
   ══════════════════════════════════════════════════════════════════════════
   André, no iPhone X da mãe (16/08/2026): «carregou bugado ao abrir, piscando o vídeo do
   avatar e dividido ao meio... não ficou responsivo... não consigo nem acessar os ícones
   no topo do Chat, impossibilitando a utilização da LIA nesse dispositivo».

   1. O ZOOM AUTOMÁTICO DO SAFARI. O campo de digitar tinha `font-size:14px`, e o iOS dá
      ZOOM NA PÁGINA INTEIRA quando o campo focado tem menos de 16px. O chat é
      `position:fixed`: com a página ampliada, ele cresce junto e sai da tela pelos dois
      lados — foi assim que os ícones de fechar e limpar ficaram inalcançáveis. Não era
      responsividade: era zoom disfarçado de layout quebrado.
      16px não é escolha estética, é o limiar que o iOS usa. Abaixo disso, zoom.

   2. LARGURA FIXA. 320px + 24px de margem cabem num iPhone de 375px — mas não sobra nada,
      e qualquer ampliação estoura. Agora a largura CEDE à tela.

   3. ALTURA. `bottom:180px` + `max-height:450px` pedem 630px de altura útil. O iPhone X
      tem ~635px de viewport, e as barras do Safari comem mais que isso — o cabeçalho
      saía por cima. `dvh` acompanha a barra retrátil; o `vh` de fallback vem antes para
      quem não conhece a unidade nova. */

.chatbox-input input,
.chatbox-input button,
.chatbox-input button#micButton{
  /* O LIMIAR DO iOS. Não baixar daqui. */
  font-size:16px;
}

.chatbox{
  /* Cede à tela em vez de estourar: 320 no desktop, o que couber no celular. */
  width:min(320px, calc(100vw - 32px));
  max-height:450px;                      /* fallback p/ navegador sem dvh */
  max-height:min(450px, calc(100dvh - 210px));
}

/* ── TELA PEQUENA: o chat encosta nas bordas e ganha a altura de volta ──────
   SÓ EM TELA ESTREITA DE VERDADE (<=360px). A primeira versão pegava tudo até 430px e
   encolheu o avatar no iPhone X — o André: «nos celulares modernos, manter o layout que
   já estava bonito». Ele tem razão: 375px comporta o desenho original, e mexer nele foi
   eu tratando um aparelho moderno como se fosse antigo. */
@media (max-width:430px){
  .lia-dock{ --lia-panel-gap:8px }
  .chatbox{
    right:12px;
    left:12px;
    width:auto;
    max-height:calc(100dvh - 200px);
  }
}

/* O avatar só encolhe onde a tela é REALMENTE estreita (iPhone SE e similares, 320-360px).
   No iPhone X (375) e acima, fica como estava. */
@media (max-width:360px){
  .lia-dock{
    --lia-avatar-bottom:16px;
    --lia-avatar-right:16px;
    --lia-avatar-width:78px;
    --lia-avatar-height:117px;
    --lia-panel-gap:17px;
  }
  /* O botão «Chat» (estado fechado) acompanha o avatar (01/10/2026, André: «desalinhado com o
     balão do Avatar, apenas no celular»). O avatar vinha para 16px da borda aqui e o botão
     ficava nos 24px de sempre: abrir e fechar o chat fazia o canto pular 8px. */
  .show-chat-launcher{ right:16px; bottom:16px }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUATRO CONSERTOS DO CHAT NO iPHONE (16/08/2026, segunda rodada)
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. O CHAT PASSAVA POR BAIXO DO CABEÇALHO DO SITE — e a culpa é do meu conserto
      anterior. O cabeçalho está em `z-index:10001` (linha 74) e o chat, em 999. No
      computador isso nunca apareceu porque o balão fica baixo na tela e não alcança o
      topo; no celular, a altura que EU dei fez ele subir até lá e sumir por trás. Foi
      assim que os ícones de limpar e fechar ficaram inalcançáveis — não estavam fora da
      tela, estavam ATRÁS.
      O comentário da linha 70 já dizia "o chat da LIA se planta em 9999". Ele deixou de
      se plantar em algum momento e ninguém notou, porque no desktop não dava para ver.
      Chat aberto é diálogo: fica acima do cabeçalho, sempre. */
.chatbox{ z-index:10005 }
.chat-button{ z-index:10004 }
.show-chat-launcher{ z-index:10004 }

/* 2. A ROLAGEM DAS MENSAGENS ROLAVA A PÁGINA — e é a MESMA armadilha do flexbox que já me
      pegou duas vezes hoje (o botão de comprar e o campo do chat).
      `.chatbox-messages{flex:1}` num contêiner em coluna: sem `min-height:0`, o item flex
      NÃO encolhe abaixo do próprio conteúdo. Então ele cresce, o `overflow-y:auto` nunca
      tem o que rolar, o `.chatbox` (que é `overflow:hidden`) simplesmente corta — e o dedo,
      não encontrando rolagem ali, rola a página atrás.
      Regra que eu devia ter aprendido na primeira vez: item flex que precisa rolar ou
      encolher SEMPRE leva `min-height:0` (ou `min-width:0`, no eixo horizontal). */
.chatbox-messages{
  min-height:0;
  /* O gesto é DAQUI. Sem isto o iOS ainda pode repassar o toque para a página. */
  touch-action:pan-y;
}

/* 3. O AVATAR CARREGAVA PARTIDO. `overflow:hidden` + `border-radius` + filho com
      `transform` é um caso que o Safari clipa mal: o vídeo vaza do canto arredondado e a
      moldura aparece deslocada. A máscara força o Safari a recortar de verdade — é o
      remédio conhecido para esse bug, e não muda nada em quem já funcionava. */
.chat-button{
  -webkit-mask-image:-webkit-radial-gradient(#fff, #000);
  mask-image:radial-gradient(#fff, #000);
  isolation:isolate;
}

/* 4. A TRANSIÇÃO DE ABERTURA NÃO ACONTECIA no iPhone. Eu tinha declarado o `@keyframes`
      DENTRO do `@media` — é CSS válido, mas frágil, e aqui não pegou. Fora do bloco ele
      existe para todo mundo e o `@media` só escolhe QUEM o usa. Lição pequena e cara:
      não aninhar `@keyframes` quando dá para não aninhar. */
@keyframes liaSobe{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:translateY(0) }
}

/* A ANIMAÇÃO 3D DE ABERTURA SAI NO CELULAR.
   «piscando o vídeo do avatar e dividido ao meio» (André, iPhone X): o
   `perspectiveSlideIn` gira o balão 80° no eixo X com `filter:blur()` junto, e navegador
   de celular rasteriza mal essa combinação — a caixa aparece partida no meio do
   movimento. No toque, a abertura vira um deslize simples: mesma sensação de entrada,
   sem o defeito. No computador o efeito bonito continua.

   O `@keyframes liaSobe` mora FORA de qualquer `@media` de propósito: eu já o tinha
   declarado aninhado uma vez e ele não pegou. */
@media (hover:none) and (pointer:coarse){
  .chatbox.active{
    animation:liaSobe .28s ease-out;
    /* Sem perspectiva: é ela que cria o plano em que a caixa se parte. */
    transform:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   O CHAT PARA ANTES DO CABEÇALHO — em vez de passar por cima dele
   ══════════════════════════════════════════════════════════════════════════
   André: «precisamos limitar a altura do Chat LIA até a base (quase encostado) do
   cabeçalho. Assim ele nunca passará dessa altura e não vai sobrepor os atalhos».

   É melhor que a minha solução anterior, e por dois motivos.

   O PRIMEIRO é o dele: cobrir o cabeçalho tira da cliente o carrinho, a busca e o menu
   enquanto o chat está aberto. Uma janela de conversa não devia sequestrar a loja.

   O SEGUNDO eu só vi ao mexer aqui: subir o chat para `z-index:10005` QUEBROU outra
   coisa. O comentário da linha 70 é explícito — o menu do celular passa por cima do chat
   de propósito («menu aberto é tela exclusiva», pedido do próprio André em 10/08), e o
   menu mora em 10000. Com o chat em 10005, abrir o menu com o chat aberto deixaria o
   balão por cima do menu. Consertei o sintoma criando um bug em outro lugar; limitar a
   altura devolve a ordem original das camadas.

   `--header-h` já existe e já muda por breakpoint (104px no desktop, 78px no celular):
   usar a variável é o que faz isto continuar certo quando o cabeçalho mudar de tamanho. */
.chatbox{
  /* De volta para baixo do menu (10000) e do cabeçalho (10001). */
  z-index:9998;
  /* +10px de respiro: "quase encostado" é melhor que colado — colado parece corte. */
  max-height:calc(100dvh - var(--header-h) - 200px);
}
.chat-button{ z-index:9997 }
.lia-dock{ z-index:9997 }
.show-chat-launcher{ z-index:9999 }

@media (max-width:430px){
  .chatbox{
    /* 176px de base (avatar de 144 + 24 de rodapé + 8 de folga) e o topo parando abaixo
       do cabeçalho. O que sobra é a altura de leitura — e é ela que encolhe primeiro
       quando o aparelho é pequeno, o que está certo: a conversa rola, o cabeçalho não. */
    max-height:calc(100dvh - var(--header-h) - 186px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   O CHAT PRESO PELO TOPO — parar de calcular altura e passar a FIXAR o limite
   ══════════════════════════════════════════════════════════════════════════
   André, no iPhone: «a altura do Chat LIA foi além do cabeçalho». De novo.

   Minha tentativa anterior calculava a altura a partir de `100dvh`, e no Safari do iPhone
   isso não segura. Motivo provável: em iOS um elemento `position:fixed` é posicionado
   contra o viewport GRANDE (barras escondidas), enquanto `dvh` acompanha o viewport
   corrente — as duas referências divergem exatamente pela altura da barra do Safari, e a
   caixa sobe essa diferença. Eu não consigo reproduzir isso no navegador que tenho aqui,
   e insistir em calcular seria chutar com a tela dele.

   Então o limite deixa de ser CALCULADO e passa a ser DECLARADO: `top` fixo, logo abaixo
   do cabeçalho. Com `top` e `bottom` definidos, a altura é o que sobra entre os dois —
   não existe conta que possa dar errado, e não existe unidade de viewport envolvida.
   O chat não tem COMO passar do cabeçalho, em nenhum aparelho.

   O preço: com pouca mensagem a caixa fica alta e vazia. É o formato de painel de
   conversa que todo mundo já conhece no celular, e é barato perto de um chat que invade
   o cabeçalho e some com o carrinho. */
@media (max-width:430px){
  .chatbox{
    top:calc(var(--header-h) + 10px);
    /* Ambos declarados: a altura é a sobra. `max-height` sairia na frente e traria de
       volta o problema que este bloco existe para eliminar. */
    max-height:none;
    height:auto;
  }
}

/* E O AVATAR PARA DE ANIMAR NA ENTRADA, no toque.
   «Avatar e animações de entrada carregam bugadas» — o `.chat-button` entra com
   `transform:scale(.95)` + transição, e por dentro tem DOIS vídeos empilhados, um deles
   com `preload="none"` que nem chegou a carregar. Animar uma caixa com vídeo não
   carregado dentro é onde o Safari mostra a moldura partida e o clarão.
   No toque ele simplesmente APARECE. Nada de transform, nada de transição: a entrada
   bonita fica para o computador, onde ela funciona. O `background` preto cobre o vazio
   enquanto o clipe não chega — é ele que evita o pisca branco. */
@media (hover:none) and (pointer:coarse){
  .chat-button{
    transform:none!important;
    transition:none!important;
    animation:none!important;
    background:#000;
  }
  .chat-button .lia-av{
    /* Camada própria: sem isto o Safari repinta o vídeo junto com a página e é aí que
       ele aparece cortado ao meio. */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
}

/* O "X" agora é SVG (ver template-parts-lia.php) e precisa do mesmo tamanho dos vizinhos. */
.close-chat-btn .lia-ico{width:17px;height:17px;display:block}

/* ── A ENTRADA E A SAÍDA DE VOLTA, no celular ──────────────────────────────
   André: «roda agora sem animações de entrada e saída, como corte seco». Eu tirei a
   animação 3D porque ela quebrava no Safari, e junto foi embora a sensação de o chat
   NASCER de algum lugar — sem isso ele pisca na tela, e piscar parece defeito.

   A saída nunca existiu, aliás: a transição estava declarada só em `.chatbox.active`, e
   ao remover a classe a regra some junto com ela. Transição de saída mora na regra BASE.

   Movimento curto e barato: opacidade + 10px de deslocamento. Nada de perspectiva, nada
   de blur — foram esses dois que partiram a caixa ao meio no iPhone. */
@media (hover:none) and (pointer:coarse){
  .chatbox{
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    transform:translateY(10px);
  }
  .chatbox.active{
    /* Sem `animation`: a transição sozinha faz o movimento, e transição não tem o
       problema de rasterização que a animação com transform 3D tinha. */
    animation:none;
    transition:opacity .26s ease, transform .26s ease, visibility 0s;
    transform:translateY(0);
  }
}

/* ── A LOJA CONGELA ENQUANTO O CHAT ESTÁ ABERTO (17/08/2026) ────────────────
   André: «a rolagem de página do site está ativa, mesmo com o Chat LIA aberto» e, logo
   depois, «percebo o balão de mensagem sendo deslocado separado do Avatar».

   As duas queixas são o mesmo fenômeno. Balão e avatar são elementos `position:fixed`
   DIFERENTES, e durante a rolagem o navegador do celular repinta um antes do outro — daí
   eles se descolarem no meio do movimento. Com a página parada, não há repintura para
   ficar fora de sincronia: o descolamento deixa de ter como acontecer.

   `overflow:hidden` no body não segura o iOS; `position:fixed` segura os dois. O
   deslocamento é salvo e DEVOLVIDO ao fechar (ver lia.js) — sem isso a cliente volta ao
   topo do site e perde o ponto onde estava lendo. A classe é posta pelo JS só no celular. */
html.lia-travado{
  overflow:hidden!important;
  overscroll-behavior:none;
}
body.lia-travado{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  overflow:hidden!important;
  overscroll-behavior:none;
  /* `top` é escrito pelo JS com o scroll salvo (negativo): é ele que mantém a página
     visualmente no mesmo lugar enquanto o body vira fixo. */
}

/* ══════════════════════════════════════════════════════════════════════════
   RELACIONADOS: a coluna fantasma
   ══════════════════════════════════════════════════════════════════════════
   André, num monitor grande: «em produtos relacionados, percebe que só promovem 4 cards
   que não ficam centralizados... aparentemente cabem 5 ou centralizamos os 4».

   Medido: não era desalinhamento. A grade da loja usa
   `repeat(auto-fill, minmax(230px, 1fr))`, e `auto-fill` cria TODAS as colunas que
   couberem — inclusive as que ficam vazias. A 1920px cabem cinco; o WooCommerce entrega
   quatro relacionados; a quinta coluna existe, vazia, e são exatamente os 271px de sobra
   à direita que ele viu.

   `auto-fit` é a irmã que COLAPSA a coluna vazia. Uma palavra.

   Só nos RELACIONADOS, e isso é deliberado: na vitrine e na loja o `auto-fill` está
   certo. Lá a última fileira quase sempre vem incompleta, e com `auto-fit` uma peça
   sozinha esticaria para a largura inteira da página — o que é bem pior que uma coluna
   vazia no fim. Aqui a lista tem tamanho fixo (4) e a fileira é a seção inteira.

   O `minmax(...,300px)` segura o crescimento: sem teto, quatro peças em tela larga
   viravam quatro cartazes. E o `justify-content:center` resolve a outra metade do pedido
   dele — sobrando espaço, o conjunto fica no meio em vez de encostado à esquerda. */
body.single-product.woocommerce div.product .related ul.products,
body.single-product.woocommerce div.product .up-sells ul.products,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products{
  /* `1fr` e não um máximo fixo — a diferença é sutil e me custou uma rodada. Quando o
     `minmax` tem máximo FIXO, o navegador conta quantas colunas cabem usando esse MÁXIMO.
     Com 300px ele concluiu que só cabiam TRÊS a 1280px e jogou o quarto card sozinho para
     uma segunda linha: pior que o problema original. Com `1fr` a contagem usa o mínimo
     (230px), então cabem quatro, e o `auto-fit` colapsa a coluna vazia para que os quatro
     dividam a largura inteira.
     Assim some a sobra à direita e não nasce órfão — os dois pedidos do André — sem
     precisar centralizar nada, porque não sobra espaço para centralizar. */
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* ── A GRADE DOS RELACIONADOS PASSA A SER A DA LOJA (21/08/2026, André) ────

   «Em produtos relacionados, por favor copiar a mesma abordagem dos produtos da loja, pois
   ainda ocorre o problema nos cards.»

   Ele está certo, e a diferença era de ABORDAGEM, não de detalhe:

     Loja e Vitrine   repeat(2 → 3 → 4, minmax(0,1fr))   contagem INTENCIONAL por faixa
     Relacionados     repeat(auto-fit, minmax(230px,1fr))  contagem AUTOMÁTICA

   Com `auto-fit` as colunas vazias colapsam e as restantes ESTICAM para o que sobrar. A
   largura de cada card deixa de ser uma divisão exata da linha e passa a ser um resto — e
   resto é fracionário, e muda de valor entre uma passada de layout e a seguinte (quando a
   foto carrega, quando a barra de rolagem aparece). O carrossel do cartão posiciona a fita
   em PIXELS a partir dessa largura; largura instável, fita entre duas fotos. Era o que ele
   via, e só nos relacionados — porque só ali a largura era um resto.

   Perde-se o conserto da «coluna fantasma» que o `auto-fit` resolvia: numa tela muito larga
   pode sobrar espaço à direita dos quatro cards. É troca consciente — sobra de margem é
   coisa que se olha; card com a foto cortada é coisa que se sente.

   E some a minha grade móvel de hoje, que era uma SEGUNDA definição de grade brigando com
   esta. Duas grades para a mesma lista é como nasce largura que ninguém sabe explicar. */
@media (min-width:900px){
  
body.single-product.woocommerce div.product .related ul.products,  body.single-product.woocommerce div.product .up-sells ul.products,  body.woocommerce-cart .cart-collaterals .cross-sells ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (min-width:1340px){
  
body.single-product.woocommerce div.product .related ul.products,  body.single-product.woocommerce div.product .up-sells ul.products,  body.woocommerce-cart .cart-collaterals .cross-sells ul.products{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Mega-menu: o painel só dissolve; o movimento elegante fica nos itens internos.
   Assim a camada escura nunca se desloca sobre a página no Chrome. */
@media (min-width:901px){
  html.stylee-pronto .stylee-mega{
    transform:none!important;
    transition:opacity .26s cubic-bezier(.4,0,1,1),visibility 0s linear .26s!important;
  }
  html.stylee-pronto .stylee-mega.is-aberto{
    transition:opacity .32s cubic-bezier(.16,1,.3,1),visibility 0s!important;
  }
  html.stylee-pronto .stylee-mega .stylee-eyebrow,
  html.stylee-pronto .stylee-mega .stylee-cat,
  html.stylee-pronto .stylee-mega .stylee-mega__nota,
  html.stylee-pronto .stylee-mega .stylee-mega__lado .stylee-btn{
    transition-duration:.2s,.24s,.2s,.2s,.2s!important;
    transition-timing-function:ease-out,cubic-bezier(.4,0,1,1),ease,ease,ease!important;
    transition-delay:0s!important;
  }
  html.stylee-pronto .stylee-mega.is-aberto .stylee-eyebrow,
  html.stylee-pronto .stylee-mega.is-aberto .stylee-cat,
  html.stylee-pronto .stylee-mega.is-aberto .stylee-mega__nota,
  html.stylee-pronto .stylee-mega.is-aberto .stylee-mega__lado .stylee-btn{
    transition-duration:.3s,.38s,.2s,.2s,.2s!important;
    transition-timing-function:ease-out,cubic-bezier(.16,1,.3,1),ease,ease,ease!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A CAPA DA LOJA E A BARRA (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   Ele mandou uma referência: capa em cima, busca e Filtrar lado a lado logo abaixo, e
   a grade em seguida. O pedido veio com uma cerca — «NÃO devemos alterar o layout do
   cabeçalho, cards de produtos» —, então nada aqui toca em cartão nem em cabeçalho: o
   bloco inteiro vive entre a capa e o primeiro cartão.

   A pílula (raio total) é da referência, e destoa do resto do site, que é quadrado de
   propósito (raio 2px). Fica de pé porque destoa por função: busca e filtro são os dois
   únicos CONTROLES de uma página que, no mais, é toda vitrine. A forma redonda separa
   "o que eu opero" de "o que eu olho". */
body.stylee-loja-capa .stylee-loja{padding-top:0!important}
.stylee-loja__capa{margin:0 0 clamp(20px,3vw,34px)}
.stylee-loja__capa .stylee-banner{background:transparent}

/* O nome da página vira redundância quando a arte já anuncia a loja — mas o <h1>
   continua no HTML, porque buscador e leitor de tela dependem dele. Só sai da vista. */
body.stylee-loja-capa .stylee-loja h1.page-title{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
body.stylee-loja-capa .stylee-loja h1.page-title::after{display:none}
body.stylee-loja-capa .stylee-loja__intro{margin-bottom:clamp(14px,2vw,24px)}

.stylee-barra{
  display:flex;align-items:stretch;gap:clamp(8px,1.1vw,14px);
  max-width:1040px;margin:0 auto clamp(22px,3.2vw,38px);
  padding-left:clamp(16px,3vw,40px);padding-right:clamp(16px,3vw,40px);
  --barra-h:52px;
}
@media (max-width:600px){.stylee-barra{--barra-h:46px}}

/* A busca troca o fio de baixo por contorno inteiro — dentro da barra ela é uma caixa,
   e não mais uma linha de escrita solta no meio da página. */
.stylee-barra .stylee-busca{
  flex:1 1 auto;min-width:0;max-width:none;margin:0;
  height:var(--barra-h);padding:0 20px;gap:11px;
  border:1px solid var(--linha);border-radius:999px;background:#fff;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.stylee-barra .stylee-busca:focus-within{
  border-color:rgba(0,0,0,.2);box-shadow:0 2px 18px rgba(0,0,0,.06);
}
.stylee-barra .stylee-busca input{padding:0;height:100%}
.stylee-barra .stylee-busca__x{margin-right:-6px}

/* UMA pílula com duas metades: FILTRAR abre, LIMPAR desfaz. O contorno é do par, e não
   de cada parte — é isso que faz as duas lerem como um controle só. */
.stylee-filtros__par{
  flex:0 0 auto;display:flex;align-items:stretch;height:var(--barra-h);
  border:1px solid var(--linha);border-radius:999px;background:#fff;overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.stylee-filtros__par:hover{border-color:rgba(0,0,0,.2);box-shadow:0 2px 18px rgba(0,0,0,.06)}
.woocommerce .stylee-barra .stylee-filtros__abrir,
.stylee-barra .stylee-filtros__abrir{
  margin:0;height:100%;padding:0 clamp(15px,1.6vw,24px);gap:10px;
  border:0;border-radius:0;background:none;
}
.stylee-barra .stylee-filtros__abrir:hover{color:var(--rosa)}

/* O número faz o trabalho que o rótulo faria se ele mudasse: diz QUANTOS filtros estão
   ligados sem tirar a palavra FILTRAR do lugar. */
.stylee-filtros__n{
  display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--rosa);color:#fff;
  font-style:normal;font-size:11px;line-height:1;letter-spacing:0;
}
.stylee-filtros__limpar{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:0 clamp(14px,1.4vw,20px);
  border-left:1px solid var(--linha);
  font-family:var(--ui);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.stylee-filtros__x{font-size:17px;line-height:1;letter-spacing:0}
.stylee-filtros__limpar:hover{color:var(--rosa);background:rgba(191,42,89,.06)}

/* No telefone a barra inteira precisa caber numa linha: o × sozinho continua dizendo
   "desfaz", e é o alvo que o polegar acha. */
@media (max-width:600px){
  .stylee-filtros__limpar-txt{display:none}
  .stylee-filtros__limpar{padding:0 14px}
  .stylee-barra .stylee-busca{padding:0 16px}
}

/* ── A ALTURA DA CAPA ──────────────────────────────────────────────────────
   A arte é 16:9, e 16:9 de ponta a ponta vira uma capa de 712px num monitor comum: a
   vitrine inteira nasce fora da tela, e uma loja em que não se vê peça nenhuma não é
   loja. A referência que o André mandou tem a capa em torno de 2,4:1 — capa, busca e a
   primeira fileira de cartões juntas na primeira tela.

   O corte é VERTICAL, e é por isso que ele pode existir: a regra antiga proíbe cortar a
   LATERAL, porque a manchete mora na metade esquerda da arte. No sentido de cima para
   baixo há folga — nas seis peças o texto ocupa a faixa central, entre 23% e 79% da
   altura. A 2,6:1 sobra de 16% a 84%: a manchete passa inteira, com margem.

   No telefone não há corte nenhum. A tela é estreita, a arte inteira já fica baixa, e
   qualquer corte ali comeria a modelo — que é metade do anúncio. */
.stylee-loja__capa .stylee-banner__img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;
}
@media (min-width:700px){
  .stylee-loja__capa .stylee-banner__img{
    aspect-ratio:2.6/1;
    /* Teto para o monitor largo: sem ele, 2,6:1 em 2560px devolveria quase 1000px de
       capa. Quando o teto pega, o corte vertical aperta — 620px é o ponto em que ele
       ainda para antes da manchete. */
    max-height:620px;
  }
}
/* O teto olha também para a ALTURA da tela, e não só para a largura: num notebook de
   720px a capa de 487px comia dois terços da janela e a busca nascia na dobra. Com
   60vh a capa acompanha a tela — e 60% ainda para antes da manchete, que ocupa a faixa
   de 23% a 79% da arte. */
@media (min-width:700px){
  .stylee-loja__capa .stylee-banner__img{max-height:min(620px,60vh)}
}
/* QUEM MANDA NA SOBRA É A BUSCA (19/08/2026).
   Com `flex:1 1 auto` as duas caixas repartiam o espaço na proporção do CONTEÚDO — e o
   conteúdo do par (FILTRAR + contador + ×, tudo em caixa alta e espaçado) é bem mais
   largo que a palavra do placeholder. No telefone a busca caía para 118px e o botão
   ficava com 189px: o controle secundário maior que o principal. Com base ZERO o par
   fica do tamanho que precisa e TODA a sobra vai para a busca. */
.stylee-barra .stylee-busca{flex:1 1 0}
@media (max-width:600px){
  .stylee-barra .stylee-filtros__abrir{padding:0 12px;gap:7px}
  .stylee-filtros__limpar{padding:0 12px}
}
/* A REGRA DE 14px ERA DE OUTRA BUSCA (19/08/2026).
   Lá em cima existe, desde a queixa do André sobre a busca "torta" no celular, um
   `margin-left/right:14px!important` na `.stylee-busca` da vitrine. Fazia todo o
   sentido quando ela era um TRAÇO solto atravessando a tela de ponta a ponta.

   Dentro da barra ela deixou de ser traço e virou caixa, e quem dá o recuo lateral
   agora é a própria barra. A regra antiga passou a cobrar duas vezes: comia 28px de
   largura (a busca caía para 122px contra 185px do botão, o controle principal menor
   que o secundário) e o `padding:0!important` colava a lupa na borda da pílula.

   Neutralizada SÓ aqui — a mesma força, o mesmo recorte. Fora da barra, se um dia
   houver uma busca solta de novo, ela continua valendo. */
@media (max-width:600px){
  body.post-type-archive-product .stylee-barra .stylee-busca,
  body.tax-product_cat .stylee-barra .stylee-busca{
    margin-left:0!important;margin-right:0!important;
    padding-left:16px!important;padding-right:16px!important;
  }
}

/* As duas metades têm de fechar na MESMA altura: com `content-box` a borda de 1px
   entrava por fora e o par ficava 2px mais alto que a busca — desalinho pequeno, mas
   numa pílula ao lado de outra o olho pega na hora. */
.stylee-barra .stylee-busca,
.stylee-filtros__par{box-sizing:border-box}
/* NO TELEFONE, COM FILTRO LIGADO, A PALAVRA SAI (19/08/2026).
   Sem filtro o par mede ~110px e a busca fica com 230 — bem repartido. Ligado um
   filtro, entram o contador e a metade LIMPAR, o par salta para 185 e a busca cai para
   150: de novo o controle secundário maior que o principal, e o placeholder cortado no
   meio.

   Some a PALAVRA, não a função: ficam o ícone (que é o desenho universal de filtro) e o
   contador rosa, que sozinho já grita "tem filtro ligado". O rótulo continua no HTML
   para quem usa leitor de tela. Vale só até 600px — no computador cabe tudo. */
@media (max-width:600px){
  .stylee-filtros__par.is-ativo .stylee-filtros__abrir > span{
    position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A CAPA COM TEXTO POR CIMA (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «A imagem justificada à direita, para a modelo ficar em plano no celular, e os textos
   sempre do lado esquerdo.»

   É essa frase que define as duas regras abaixo, e as duas valem em QUALQUER tela:

   1. `object-position:right` — o corte come sempre pela ESQUERDA, que nas três artes é
      parede vazia. Assim a modelo nunca perde um braço nem sai de quadro, por mais
      estreita que fique a janela. É o inverso do que se faz com foto comum (centralizar
      e cortar dos dois lados), e é o certo aqui porque a composição não é simétrica: o
      assunto mora na direita.

   2. O texto ocupa a coluna da esquerda, sobre o véu claro. O véu não é enfeite — é o
      que garante que a manchete continue legível quando a arte muda, e ele existe
      justamente porque o texto NÃO está cravado no arquivo.

   A proporção muda com a tela porque o enquadramento precisa mudar: deitada, a capa é
   uma faixa (2,5:1) e cabe capa + busca + a primeira fileira de peças na mesma tela; em
   pé, ela precisa de altura, senão a modelo vira uma tira de 90px. */
.stylee-capa{
  position:relative;width:100%;overflow:hidden;
  background:var(--areia);
  aspect-ratio:4/3;
}
@media (min-width:700px){
  .stylee-capa{
    aspect-ratio:2.5/1;
    /* Teto duplo: o monitor largo não vira outdoor, e o notebook baixo não perde a
       vitrine para a capa. */
    max-height:min(620px,62vh);
  }
}

.stylee-capa__peca{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity 1.1s var(--ease);
}
.stylee-capa__peca.is-ativa{opacity:1;pointer-events:auto}

.stylee-capa__img,
.stylee-capa picture{display:block;width:100%;height:100%}
.stylee-capa__img{
  object-fit:cover;object-position:right center;max-width:none;
}

/* O VÉU. Claro, e não escuro: as artes são de tom areia e o texto do site é escuro —
   escurecer o fundo obrigaria a inverter a tipografia só aqui, e a capa deixaria de
   parecer parte da mesma loja. Ele termina antes da metade para não tocar na modelo. */
.stylee-capa__peca::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,252,248,.88) 0%,
    rgba(255,252,248,.62) 30%,
    rgba(255,252,248,0) 62%);
}

.stylee-capa__texto{
  position:absolute;z-index:2;left:0;top:0;bottom:0;
  width:min(54%,640px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(18px,3vw,40px) clamp(20px,5vw,80px);
  text-align:left;
}
.stylee-capa__marca{
  font-family:var(--ui);font-size:clamp(9.5px,1vw,11px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--cinza);
  margin-bottom:clamp(8px,1.2vw,14px);
}
.stylee-capa__titulo{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.55rem,4.4vw,3.4rem);line-height:1.08;
  color:var(--tinta);margin:0;
  /* Manchete de duas ou três linhas: uma linha longa demais atravessa a arte e encosta
     na modelo, e aí o véu já não segura. */
  max-width:16ch;
}
.stylee-capa__frase{
  font-size:clamp(.86rem,1.5vw,1.05rem);line-height:1.65;color:var(--cinza);
  margin:clamp(10px,1.4vw,18px) 0 0;max-width:30ch;
}

/* Os fios do rodízio: mesmo traço do fio rosa que fecha os títulos do site. Alinhados
   com o texto, e não centrados, porque a coluna da esquerda é o eixo da capa. */
.stylee-capa__fios{
  position:absolute;z-index:3;
  left:clamp(20px,5vw,80px);bottom:clamp(14px,2.2vw,28px);
  display:flex;gap:8px;
}
/* ── OS FIOS VIRAM BARRA DE CARREGAMENTO (20/08/2026, André) ───────────────

   «Consegue trocar por um animado que parece que está promovendo um carregamento e pula
   para o próximo banner?»

   Antes o fio ativo era só mais largo e rosa: dizia ONDE a cliente está, e nada sobre
   quanto falta. A barra que enche diz as duas coisas ao mesmo tempo — e transforma a
   troca, que antes chegava de surpresa, em algo que ela viu vir.

   TODOS OS FIOS PASSAM A TER A MESMA LARGURA. Antes o ativo crescia de 24 para 36px; com
   o preenchimento, a barra estaria enchendo DENTRO de uma caixa que também está crescendo,
   e aí nem o tamanho nem a carga se leem. Trilho parado, carga andando: é o que faz a
   coisa parecer um medidor e não um enfeite.

   A DURAÇÃO MORA AQUI, e o JavaScript vem buscá-la. Se cada lado tivesse o seu número, o
   dia em que alguém mudasse um deles a barra terminaria antes ou depois da virada — e um
   medidor que mente é pior que nenhum. Um número, um dono. */
.stylee-capa{--capa-pausa:6500ms}
.stylee-capa__fio{
  position:relative;overflow:hidden;
  width:36px;height:2px;padding:0;border:0;border-radius:2px;
  background:rgba(0,0,0,.2);cursor:pointer;
  transition:background .35s var(--ease);
}
.stylee-capa__fio::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--rosa);border-radius:inherit;
}
.stylee-capa__fio:hover{background:rgba(0,0,0,.38)}
/* `both` e não `forwards`: o quadro inicial também vale, senão o primeiro instante da
   barra herdaria a largura antiga por um piscar. */
.stylee-capa__fio.is-ativa::after{ animation:capaCarga var(--capa-pausa,6500ms) linear both }
@keyframes capaCarga{ from{width:0} to{width:100%} }

/* Quem pediu menos movimento não liga o relógio (o JS não roda o rodízio), então a barra
   não pode fingir que está contando: ela aparece CHEIA, dizendo só qual arte está no ar. */
@media (prefers-reduced-motion:reduce){
  .stylee-capa__fio.is-ativa::after{ animation:none;width:100% }
}

/* NO CELULAR o véu aperta e a coluna alarga. Em pé sobra pouca parede à esquerda da
   modelo, então o que garante a leitura é o véu — não o vazio da arte. */
@media (max-width:699px){
  .stylee-capa__peca::before{
    background:linear-gradient(90deg,
      rgba(255,252,248,.94) 0%,
      rgba(255,252,248,.78) 44%,
      rgba(255,252,248,0) 86%);
  }
  .stylee-capa__texto{width:74%;padding:18px 20px}
  .stylee-capa__titulo{max-width:12ch}
  .stylee-capa__frase{max-width:24ch}
}

/* A capa nova entra no mesmo lugar da antiga: colada no cabeçalho e com o mesmo respiro
   até a busca. */
.stylee-capa{margin:0 0 clamp(20px,3vw,34px)}

/* ══════════════════════════════════════════════════════════════════════════
   OS DOIS ENQUADRAMENTOS DA CAPA (19/08/2026, André, depois de ver no ar)
   ══════════════════════════════════════════════════════════════════════════
   «Que a imagem seja promovida por completo no PC, sem cortes na base e na largura. No
   celular, o corte será sempre do lado esquerdo em função do justificado à direita,
   para aparecer a modelo em foco, e a foto exibirá toda a sua altura e sem corte.»

   São dois pedidos opostos, e é isso que os torna interessantes: no computador o que
   importa é a CENA inteira (a arquitetura, a luz, o vazio à esquerda onde o texto mora);
   no telefone, com um terço da largura, a cena inteira encolheria a modelo a nada — ali
   o que importa é ELA.

   COMPUTADOR: o quadro herda a proporção do arquivo (`--capa-prop`, escrita pelo PHP a
   partir das medidas reais). Quadro e foto passam a ter a mesma forma, e aí não existe
   corte — nem de base, nem de largura. O teto de altura saiu junto: teto é corte com
   outro nome.

   CELULAR: o quadro fica em pé (4:5) e a foto é encaixada pela ALTURA. Como o quadro é
   mais estreito que a arte, a sobra sai pela largura — e sai toda pela ESQUERDA, porque
   a foto está ancorada à direita. A modelo aparece inteira, do topo à base, e o que se
   perde é a parede vazia. É exatamente o inverso do reflexo comum (centralizar e cortar
   dos dois lados), que aqui decepava a modelo pelo ombro. */
.stylee-capa{aspect-ratio:4/5}
@media (min-width:700px){
  .stylee-capa{
    aspect-ratio:var(--capa-prop,16/9);
    max-height:none;
  }
}

/* No telefone a coluna do texto cai sobre a modelo — não há mais parede vazia sobrando.
   Então o véu precisa segurar sozinho a leitura, e o bloco de texto encolhe para caber
   no pedaço mais calmo da foto. */
@media (max-width:699px){
  .stylee-capa__peca::before{
    background:linear-gradient(90deg,
      rgba(255,252,248,.96) 0%,
      rgba(255,252,248,.88) 38%,
      rgba(255,252,248,.35) 68%,
      rgba(255,252,248,0) 92%);
  }
  .stylee-capa__texto{width:66%;padding:18px 18px}
  .stylee-capa__titulo{max-width:11ch}
  .stylee-capa__frase{max-width:20ch}
}

/* CONTRASTE (mesma rodada): a frase e a palavra STYLEE saíam em cinza claro sobre parede
   clara e sumiam na tela do André. Cinza sobre branco é legível; cinza sobre FOTO clara,
   com véu no meio, não é — o fundo varia de arte para arte e o texto tem de aguentar a
   pior delas. Mesma família de tom, só que fechada o suficiente para não depender da
   sorte da imagem. */
.stylee-capa__marca{color:#7a736c}
.stylee-capa__frase{color:#57514c}

/* A LOGO NO LUGAR DA PALAVRA (19/08/2026, André).
   Só existe o arquivo BRANCO da marca — o mesmo do cabeçalho, onde o fundo é preto. Sobre
   a capa clara ele desapareceria. `brightness(0)` zera as três cores e deixa o canal de
   transparência intacto: a mesma arte sai preta, com o mesmo recorte, sem depender de
   alguém exportar um PNG escuro. E no dia em que a marca mudar, muda nos dois lugares de
   uma vez, porque o arquivo é um só.

   A opacidade de 82% é o que separa assinatura de manchete: a logo abre a capa, mas quem
   tem de puxar o olho é a chamada logo abaixo dela. */
.stylee-capa__logo{
  display:block;width:auto;height:clamp(26px,3.4vw,42px);
  margin:0 0 clamp(10px,1.4vw,16px);
  filter:brightness(0);opacity:.82;
}
@media (max-width:699px){
  .stylee-capa__logo{height:24px;margin-bottom:10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   A ALTURA VINHA DO WOOCOMMERCE, NÃO DAQUI (19/08/2026)
   ══════════════════════════════════════════════════════════════════════════
   Sintoma: no computador a capa parecia certa e no celular ela virava uma tira fina com
   areia embaixo — e a logo saía gigante, com 142px de altura. Duas coisas diferentes
   quebrando do mesmo jeito, o que já era a pista.

   A folha do WooCommerce traz `.woocommerce img{height:auto;max-width:100%}`. Isso é
   UMA CLASSE MAIS UM ELEMENTO (0,1,1) e a minha era uma classe só (0,1,0): a dele vence
   sempre, não importa quem foi escrito depois — especificidade não se resolve por ordem.
   E o `body` desta página tem a classe `woocommerce`, então a regra alcança tudo que há
   dentro da loja, inclusive uma capa que nada tem a ver com produto.

   No computador o defeito ficou INVISÍVEL por coincidência: o quadro herda a proporção
   da arte, então largura 100% com altura automática devolve exatamente a altura do
   quadro. No celular, com o quadro em pé, a mesma conta devolvia 210px num quadro de
   468 — e como a altura não era mais a do quadro, o `object-fit:cover` não tinha o que
   recortar. A modelo nunca foi cortada pela esquerda porque nunca houve corte nenhum.

   A correção é subir a especificidade, e não empilhar `!important`: dois nomes de classe
   (0,2,0) passam à frente sem tirar de ninguém a chance de sobrescrever depois. */
.stylee-capa .stylee-capa__img{
  width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:right center;
}
.stylee-capa .stylee-capa__logo{
  width:auto;height:clamp(26px,3.4vw,42px);max-width:none;
}
@media (max-width:699px){
  .stylee-capa .stylee-capa__logo{height:24px}
}

/* ══════════════════════════════════════════════════════════════════════════
   9:16 NO CELULAR, COMO O VÍDEO — E A HIERARQUIA DO TEXTO (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Gostaria exatamente do mesmo comportamento do vídeo da STYLEE, que fica 16:9 no PC e
   no celular fica 9:16 — mas, como a modelo está do lado direito, justificado à direita.»
   E: «a logomarca ficou grande em relação aos textos, e os textos podem ficar bem
   maiores em função da área da capa.»

   ORDEM IMPORTA NESTE BLOCO: as regras gerais vêm ANTES da consulta de mídia do celular.
   Media query não soma especificidade — uma regra solta escrita depois vence a regra de
   dentro do `@media`, e foi assim que eu quase mandei uma capa que ignorava o telefone.

   ── A HIERARQUIA (computador) ──
   A capa cresceu — o quadro passou a ter a altura inteira da arte — e o texto não cresceu
   junto: numa área de 1790×1010 a manchete de 56px virava legenda. A logo foi no caminho
   oposto e pesava mais que a chamada; assinatura que grita mais alto que a manchete
   inverte a ordem de leitura, porque a cliente já SABE de quem é a loja — o que ela ainda
   não sabe é o que a loja está dizendo. */
.stylee-capa .stylee-capa__logo{height:clamp(20px,2.1vw,32px);margin-bottom:clamp(10px,1.4vw,18px)}
.stylee-capa__titulo{
  font-size:clamp(2rem,4.6vw,4.6rem);
  line-height:1.04;
  letter-spacing:-.01em;   /* display grande respira demais sem isto */
  max-width:14ch;
}
.stylee-capa__frase{
  font-size:clamp(.95rem,1.25vw,1.28rem);
  line-height:1.6;
  max-width:32ch;
  margin-top:clamp(12px,1.6vw,22px);
}
.stylee-capa__texto{width:min(52%,720px)}

/* ── 9:16 NO CELULAR ───────────────────────────────────────────────────────
   O 4:5 anterior era um meio-termo meu, e meio-termo aqui é o pior dos dois: alto demais
   para ser faixa, baixo demais para a modelo dominar. Em pé de verdade (9:16) o quadro
   mostra a TERÇA parte direita da arte — exatamente onde ela está — em altura inteira.
   Some a arquitetura, sobra a pessoa. É a mesma decisão do vídeo, e por isso capa e vídeo
   passam a se comportar igual no telefone.

   O TEXTO DESCE PARA A BASE, e isso é consequência, não capricho: num quadro tomado pela
   modelo não existe mais parede vazia à esquerda para a manchete morar. No pé, com o véu
   subindo do chão, ela fica sobre a região mais calma da foto e não cobre o rosto — que é
   o que vende. O alinhamento continua à esquerda, como no computador. */
@media (max-width:699px){
  .stylee-capa{aspect-ratio:9/16}

  /* O véu vira vertical junto com o texto: do pé para cima, e não mais da esquerda. */
  .stylee-capa__peca::before{
    background:linear-gradient(to top,
      rgba(255,252,248,.97) 0%,
      rgba(255,252,248,.9) 32%,
      rgba(255,252,248,.5) 50%,
      rgba(255,252,248,0) 72%);
  }
  .stylee-capa__texto{
    width:100%;justify-content:flex-end;
    /* O recuo de baixo abre espaço para os fios do rodízio, que moram no mesmo canto. */
    padding:0 20px clamp(44px,9vw,60px);
  }
  .stylee-capa__titulo{max-width:14ch}
  .stylee-capa__frase{max-width:26ch}
  .stylee-capa__fios{left:20px;bottom:18px}
  .stylee-capa .stylee-capa__logo{height:26px;margin-bottom:12px}
}

/* O VÉU SAI (19/08/2026, André): «todas as imagens foram pensadas com a área para o
   texto».

   Ele tem razão e a razão é de quem fez a arte: o degradê existia como seguro para uma
   capa qualquer, vinda de qualquer lugar, com o texto caindo sobre sabe-se lá o quê. Com
   arte desenhada PARA o texto, o seguro vira o defeito — ele lava a parede, apaga a
   sombra da folhagem e a luz que cai na pedra, que é justamente o que dá clima à peça.

   Fica registrado o que ele custa: no celular, onde o quadro 9:16 corta a arte na terça
   parte direita, não existe mais a área limpa que a arte reservou — o texto passa a
   dividir espaço com a modelo, sem nada por baixo. Se numa das quatro a leitura sofrer, a
   saída certa não é devolver o degradê: é subir a versão vertical daquela arte como
   `capa-loja-N-celular`, que o código já usa sozinho quando encontra. */
.stylee-capa__peca::before{display:none}

/* A coluna do texto tem de CONTER o próprio recuo: sem isto, `width:100%` mais 20px de
   cada lado devolvia 415px num quadro de 375 — o bloco vazava 40px por fora da capa. Não
   aparecia como barra de rolagem porque a capa recorta o que passa, o que é pior: some
   em silêncio e só reclama no dia em que uma frase for comprida o bastante. */
.stylee-capa__texto{box-sizing:border-box}

/* A LOGO ESTAVA ESTICADA, E NÃO GRANDE (19/08/2026).
   O André disse «a logomarca ficou grande em relação aos textos». Diminuir a altura ia
   tratar o sintoma: a marca media 577x29 numa arte de 800x459 — quase vinte por um. Não
   era tamanho, era DEFORMAÇÃO.

   A coluna do texto é `flex-direction:column`, e num contêiner assim o padrão é
   `align-items:stretch`: todo filho é esticado no eixo transversal, que ali é a LARGURA.
   Com `width:auto` a imagem não resistiu — virou a largura inteira da coluna — e, como a
   altura estava fixa em 29px, a proporção foi junto. Parágrafo esticado ninguém percebe,
   porque texto ocupa a largura mesmo; imagem, sim.

   `align-self:flex-start` devolve à logo o direito de ter o tamanho dela. */
.stylee-capa .stylee-capa__logo{align-self:flex-start;flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════════════
   AS ARTES DE CELULAR, INTEIRAS (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «As imagens não precisam ser cortadas e nem justificadas agora. Só precisam ser
   exibidas por completo.»

   As verticais que ele gerou são QUADRADAS (540×542), e não 9:16. Com o quadro fixo em
   pé, voltaríamos a cortar justamente a arte que foi desenhada para não ser cortada — o
   contrário do pedido. Agora o telefone herda a medida do arquivo dele, como o
   computador já herdava a do arquivo grande: quadro e foto com a mesma forma, corte zero
   dos dois lados.

   E o `object-position` volta ao centro: ancorar à direita só existia para escolher POR
   ONDE cortar. Sem corte, ancorar não decide mais nada — e deixar a regra ali seria
   deixar uma armadilha para o dia em que uma arte vier com meio pixel de diferença. */
@media (max-width:699px){
  .stylee-capa{aspect-ratio:var(--capa-prop-movel,9/16)}
  .stylee-capa .stylee-capa__img{object-position:center}

  /* O quadro do telefone encolheu de 667px para ~376px: o texto tem de caber na parte
     baixa sem cobrir a modelo inteira. Fonte menor, entrelinha curta, bloco justo. */
  .stylee-capa__texto{padding:0 18px 40px}
  .stylee-capa__titulo{font-size:1.55rem;line-height:1.06;max-width:12ch}
  .stylee-capa__frase{font-size:.82rem;line-height:1.45;margin-top:8px;max-width:24ch}
  .stylee-capa .stylee-capa__logo{height:20px;margin-bottom:8px}
  .stylee-capa__fios{bottom:14px}
}

/* ── ARTE ESCURA, TEXTO CLARO ──────────────────────────────────────────────
   A quarta arte é a de jeans: luminosidade 18 numa escala de 255, contra 160–223 das
   outras. O texto escuro do site simplesmente não existiria ali. A troca é automática —
   o PHP mede o arquivo e põe a classe — porque a decisão volta a cada campanha nova, e
   quem sobe a imagem pensa na foto, não em contraste.

   A logo é o detalhe que fecha: o arquivo original JÁ é branco, e o preto dele vem de um
   filtro. Sobre arte escura basta não aplicar o filtro — a marca volta a ser exatamente o
   que o arquivo é, sem segunda versão para manter. */
.stylee-capa__peca.is-escura .stylee-capa__titulo{color:#fff}
.stylee-capa__peca.is-escura .stylee-capa__frase{color:rgba(255,255,255,.82)}
.stylee-capa__peca.is-escura .stylee-capa__logo{filter:none;opacity:.95}
/* Os fios seguem a arte QUE ESTÁ NO AR, e não "existe alguma escura no rodízio": sem o
   `.is-ativa` no seletor, os fios ficariam claros nas quatro só porque uma delas é
   escura — e nas três claras eles sumiriam. */
.stylee-capa__peca.is-escura.is-ativa ~ .stylee-capa__fios .stylee-capa__fio{background:rgba(255,255,255,.38)}

/* ══════════════════════════════════════════════════════════════════════════
   A BARRA BRANCA ERA A BARRA DO WORDPRESS (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Barra branca no topo da página, acima do banner.»

   Ela só existe para quem está LOGADO, e é por isso que quase escapou: visitante nenhum
   vê, e eu só a reproduzi aqui depois de simular o admin-bar na mão.

   A barra do WordPress empurra o documento inteiro para baixo com
   `html{margin-top:32px!important}`. Só que o cabeçalho do site é `position:fixed`, e
   elemento fixo mede a partir da JANELA — margem no `html` não o alcança. Resultado: o
   documento desceu 32px, o cabeçalho ficou onde estava, e no meio sobrou uma faixa da cor
   do fundo com a altura exata da barra do admin.

   Consertar do lado do `main` (tirar 32px do recuo) resolveria o vão e criaria outro
   defeito: o cabeçalho passaria a cobrir a barra do WordPress. O certo é descer o
   cabeçalho junto com o documento — que é o que a barra pediu desde o começo. As alturas
   são as oficiais: 32px no computador, 46px no telefone. */
body.admin-bar .stylee-header{top:46px}
@media screen and (min-width:783px){
  body.admin-bar .stylee-header{top:32px}
}
/* Abaixo de 600px o WordPress solta a barra (ela vira `absolute` e rola junto com a
   página). Aí o cabeçalho volta a encostar no topo, senão ficaria um vão flutuante
   depois da primeira rolagem. */
@media screen and (max-width:600px){
  body.admin-bar .stylee-header{top:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   A BUSCA E O FILTRAR PRECISAM PARECER CONTROLES (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Acho que ficaram apagados.»

   Estavam mesmo: o contorno usava `--linha`, que é preto a 8% — pensado para separar
   blocos de texto dentro de uma página branca, não para desenhar um botão sobre areia.
   A 8% o contorno some contra o fundo, e busca sem moldura visível não parece campo:
   parece uma frase cinza jogada no meio da página.

   Três mudanças pequenas que somam: contorno ao dobro do peso, uma sombra rasa que
   levanta as duas peças do fundo, e o texto de exemplo mais fechado. A sombra é o que faz
   o trabalho de verdade — ela diz "isto está por cima", e é o que separa controle de
   conteúdo sem precisar de cor nenhuma. */
.stylee-barra .stylee-busca,
.stylee-filtros__par{
  border-color:rgba(0,0,0,.18);
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 22px rgba(0,0,0,.055);
}
.stylee-barra .stylee-busca:focus-within{
  border-color:rgba(0,0,0,.34);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.09);
}
.stylee-filtros__par:hover{
  border-color:rgba(0,0,0,.34);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.09);
}
.stylee-barra .stylee-busca input::placeholder{color:#6d6862}
.stylee-barra .stylee-busca svg{color:#4a453f}
.stylee-barra .stylee-filtros__abrir{color:var(--tinta)}
.stylee-barra .stylee-filtros__abrir svg{color:#4a453f}

/* ══════════════════════════════════════════════════════════════════════════
   A MARCA E A CHAMADA CRESCEM (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «A logomarca ficou pequena no PC e no celular, e no PC os textos podem ficar maiores em
   função da área disponível.»

   A área disponível é o argumento certo: a capa passou a ocupar a arte inteira — 1425×801
   num monitor comum — e o texto continuava dimensionado para a faixa estreita que ela era
   antes. Numa área dessas, manchete pequena não fica discreta: fica perdida.

   As regras vão dentro de `min-width:700px` de propósito. O bloco do celular já foi
   escrito lá atrás no arquivo, e regra solta escrita DEPOIS vence regra dentro de
   `@media` — media query não soma especificidade. Sem a cerca, este ajuste de computador
   passaria por cima do telefone sem avisar. */
@media (min-width:700px){
  .stylee-capa .stylee-capa__logo{
    height:clamp(30px,3.2vw,54px);
    margin-bottom:clamp(14px,1.8vw,24px);
  }
  .stylee-capa__titulo{font-size:clamp(2.4rem,5.4vw,6rem);max-width:13ch}
  .stylee-capa__frase{
    font-size:clamp(1rem,1.45vw,1.55rem);
    margin-top:clamp(14px,1.8vw,26px);
    max-width:30ch;
  }
}

/* No telefone só a marca cresce: a chamada já estava no tamanho certo para o quadro
   quadrado, e aumentá-la comeria a modelo. */
@media (max-width:699px){
  .stylee-capa .stylee-capa__logo{height:30px;margin-bottom:10px}
}


/* ══════════════════════════════════════════════════════════════════════════
   A LOGO PARA DE DANÇAR (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «A cada banner a logo muda de posição em função da quantidade de linhas do texto
   abaixo.»

   É o preço de centralizar o bloco inteiro: com a manchete de duas linhas o conjunto sobe,
   com três desce, e a marca vai junto. Passa despercebido numa página parada — mas aqui as
   artes trocam a cada seis segundos e meio, e o olho lê como TREMOR: a única coisa que
   deveria ser constante é justamente a que se mexe.

   A saída é tirar a logo do fluxo: presa por coordenada, ela ocupa sempre o mesmo ponto da
   capa, arte após arte. E o resto ganha de brinde — sem a logo dentro dele, o bloco de
   texto centraliza o que realmente varia (manchete e frase), em vez de centralizar um
   conjunto que tem uma parte fixa e outra elástica.

   O `left` repete o recuo do texto em vez de herdá-lo porque elemento posicionado se mede
   pela caixa de PADDING do pai — o recuo do bloco não o alcança. Os dois valores têm de
   andar juntos: se um mudar, o outro muda igual, senão a marca sai do prumo da manchete. */
.stylee-capa__logo{
  position:absolute;
  left:clamp(20px,5vw,80px);
  top:clamp(24px,4vw,64px);
  margin:0;
}

/* ── E TUDO CRESCE MAIS UMA VEZ ────────────────────────────────────────────
   «Aumentarmos ainda mais os textos e principalmente a logomarca.»

   A capa ocupa 1425×801 num monitor comum. Nessa medida, marca e manchete não competem
   com nada — competem com o VAZIO, que é muito maior do que os dois. Cercado em
   `min-width:700px`: o bloco do celular já foi escrito antes no arquivo e regra solta
   escrita depois venceria a de dentro do `@media`. */
@media (min-width:700px){
  /* A MARCA CRESCE DE NOVO (20/08/2026, André: «consegue aumentar a logomarca fixa?»).

     Era `clamp(42px,4.6vw,84px)` e o teto mandava: no monitor dele 4,6vw davam 91px e o
     `max` cortava em 84. Como as artes são 16:9 (1672×941), a capa tem 1120px de altura
     numa tela de 1990 — a marca ocupava 7,5% dela. Depois de crescermos os títulos das
     quinze faixas para ~20% da altura, a assinatura da casa ficou sendo o menor elemento
     da primeira tela do site, que é o lugar onde ela menos pode ser.

     6,5vw a põem em ~11,5% da altura em QUALQUER largura (a capa é 0,5627 da largura, e
     6,5/56,27 = 11,5%). O teto de 150px é só para monitor ultralargo. */
  .stylee-capa .stylee-capa__logo{height:clamp(48px,6.5vw,150px)}
  .stylee-capa__titulo{font-size:clamp(2.8rem,6.4vw,7.5rem);max-width:12ch}
  .stylee-capa__frase{
    font-size:clamp(1.05rem,1.7vw,1.85rem);
    margin-top:clamp(16px,2vw,30px);
    max-width:28ch;
  }
  /* A manchete agora nasce grande o bastante para encostar na marca quando tem quatro
     linhas. O respiro no topo do bloco reserva o lugar dela. */
  /* O RESERVADO PARA A MARCA DEIXA DE SER UM NÚMERO E PASSA A SER A CONTA DELA.

     Antes era `clamp(80px,9.5vw,160px)`: um valor escolhido à mão para a marca de 84px.
     Com ela em 129px, 160px de reserva já não bastavam e a manchete subiria por cima da
     assinatura — e o pior é que só apareceria em algumas larguras, que é o tipo de
     defeito que passa despercebido no teste e aparece na tela de alguém.

     Agora a reserva É a soma do que está acima dela: recuo do topo + altura da marca +
     respiro. Mudou a marca, a reserva muda junto, sem eu lembrar de vir aqui. */
  .stylee-capa__texto{padding-top:calc(clamp(24px,4vw,64px) + clamp(48px,6.5vw,150px) + 28px)}
}

/* ── NO CELULAR QUEM ESTAVA PEQUENO ERA O TEXTO, NÃO A MARCA (20/08/2026) ──

   O André mandou os dois prints para eu avaliar a logomarca. Medi cada elemento como
   FRAÇÃO DA ALTURA DA CAPA, que é a única comparação justa — a capa é 16:9 no computador
   e quase quadrada (540×542) no telefone, então pixel com pixel não se compara:

                    computador (1990px)      celular (393px)
     altura da capa       1120px                  395px
     logomarca         129px = 11,5%           40px = 10,1%
     manchete          120px = 10,7%           28px =  7,0%

   A marca acompanhou; a manchete ficou para trás. No computador as duas empatam, e é por
   isso que aquela tela fecha. No telefone a manchete valia dois terços do que devia.

   O TETO DE 2,2rem SAIU DE TESTE, não de gosto: medi «Elegância em cada detalhe» com a
   quebra GULOSA — a que o navegador faz de verdade — numa coluna de 66% menos 36px:

     1,72rem (28px) → 2 linhas, maior 163px
     2,20rem (35px) → 2 linhas, maior 208px   ← último que ainda cabe em duas
     2,40rem (38px) → 3 linhas

   Três linhas numa capa quase quadrada, dividindo altura com a frase e os fios do
   rodízio, aperta. O `clamp` segura os extremos: num SE de 320px cai para 27,5px e segue
   em duas linhas; num Pro Max de 430px bate o teto com folga. Conferido de 320 a 699px:
   duas linhas em todas.

   A FRASE sobe menos de propósito (+9% contra +21%). Se as duas crescessem igual, a
   hierarquia entre manchete e apoio ficaria onde estava — e é a diferença entre elas que
   faz uma ser lida antes da outra.

   A LOGO FICA COMO ESTÁ: 10,1% contra 11,5% do computador é diferença que a medição não
   sustenta como defeito, e este bloco do telefone custou duas rodadas de ajuste no iPhone
   do André. Mexer no que está aprovado para ganhar um ponto percentual é trocar certeza
   por gosto. */
@media (max-width:699px){
  .stylee-capa .stylee-capa__logo{height:40px;left:18px;top:18px}
  .stylee-capa__titulo{font-size:clamp(1.72rem,8.6vw,2.2rem)}
  .stylee-capa__frase{font-size:.95rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   O TEXTO DA BUSCA PULAVA AO RECEBER O CLIQUE (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Quando clicamos para digitar, o texto "Buscar por nome, cor ou modelo…" é deslocado
   para a esquerda.»

   O campo NÃO estava ocupando a barra. Medido: a moldura tinha 899px e o campo dentro
   dela, 288 — com `justify-content:center` herdado do desenho antigo, quando a busca era
   uma linha estreita centrada no meio da página, e não um controle de ponta a ponta.
   Resultado: lupa e texto flutuavam no MEIO de uma moldura larga, sem nada indicando que
   ali dentro havia 600px de campo.

   Ao clicar, o campo passava a ocupar tudo e o conteúdo encostava à esquerda — daí o
   pulo. Ou seja: o estado com foco é que estava CERTO; o de repouso é que mentia sobre o
   tamanho do campo. Por isso a correção não é travar o movimento, é fazer o repouso ser
   igual ao foco — lupa colada à esquerda e campo ocupando o resto, sempre.

   Nada de `!important`: dois nomes de classe já passam à frente das regras antigas, e sem
   fechar a porta para quem precisar ajustar isto depois. */
.stylee-barra .stylee-busca{justify-content:flex-start}
.stylee-barra .stylee-busca input{flex:1 1 auto;width:100%;min-width:0}

/* ══════════════════════════════════════════════════════════════════════════
   O TEXTO DA BUSCA SAI POR OPACIDADE, NÃO POR DESLIZE (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Vale a pena centralizar esse texto, no PC e no celular, e quando clicado ele some no
   fade, sem se deslocar para a esquerda.»

   A rodada anterior consertou a MOLDURA — o campo já não muda de tamanho ao receber o
   clique. Sobrou o texto: havia `text-align:center` em repouso e `left` no foco, e como
   alinhamento não é animável, ele saltava de um lado para o outro num único quadro. Um
   defeito escondido atrás do outro, e o segundo só ficou visível depois que o primeiro
   saiu da frente.

   A solução dele é melhor do que a minha primeira ideia (encostar tudo à esquerda, como
   fazem quase todos os sites): o texto centrado é o que dá à barra o ar da vitrine, e a
   loja inteira é centrada. Então o alinhamento fica CENTRADO SEMPRE — inclusive com o
   foco — e a dica desaparece por opacidade, que é o único jeito de sair sem se mexer.

   Manter o centro também no foco não é detalhe: se o alinhamento mudasse durante os 0,2s
   da opacidade, a frase deslizaria enquanto some — exatamente o que ele não quer, só que
   mais discreto e mais estranho. O preço, assumido: o que ela digitar também nasce no
   centro do campo. Numa busca de duas ou três palavras isso lê como escolha; se um dia
   incomodar, é uma palavra para trocar. */
.stylee-barra .stylee-busca input,
.stylee-barra .stylee-busca input:focus{text-align:center}

.stylee-barra .stylee-busca input::placeholder{
  opacity:1;
  transition:opacity .2s var(--ease);
}
.stylee-barra .stylee-busca input:focus::placeholder{opacity:0}

/* O bloco acima não pegou, e o motivo é digno de nota: o desenho antigo mira
   `input[type="search"]` — o seletor de ATRIBUTO pesa igual a uma classe, e por isso
   `.stylee-busca:focus-within input[type="search"]` empatava com o meu e vencia por
   detalhe de cascata. Não é caso de `!important`: é caso de falar a mesma língua. Aqui os
   seletores repetem a forma do original e acrescentam `.stylee-barra`, que só existe na
   barra nova — o desenho antigo continua valendo em qualquer outro lugar onde a busca
   apareça sozinha. */
.stylee-barra .stylee-busca input[type="search"],
.stylee-barra .stylee-busca:focus-within input[type="search"]{
  text-align:center;
}
.stylee-barra .stylee-busca input[type="search"]::placeholder{
  opacity:1;
  transition:opacity .2s var(--ease);
}
.stylee-barra .stylee-busca:focus-within input[type="search"]::placeholder{
  opacity:0;
}

/* ══════════════════════════════════════════════════════════════════════════
   A DICA CENTRA NA PÍLULA; O CURSOR FICA NA LUPA (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «No celular o texto não ficou centralizado na célula do campo, parece centralizado
   entre os ícones internos» — e ele tem razão até no diagnóstico: era isso mesmo. O
   `placeholder` mora dentro do CAMPO, e o campo começa depois da lupa; o centro dele
   nunca foi o centro da pílula. Num campo largo a diferença passa; no telefone, onde a
   lupa come um sexto da largura, ela salta.

   Agora a dica é um <span> desenhado sobre a pílula inteira — centra de verdade, nos dois
   tamanhos de tela — e o campo volta a ser alinhado à ESQUERDA o tempo todo, que é o
   segundo pedido: «prefiro o cursor piscando do lado esquerdo, perto da lupa».

   Os dois deixam de brigar porque deixaram de ser a mesma coisa. E nada se desloca: a
   dica some por opacidade, parada onde está. */
.stylee-barra .stylee-busca{position:relative}

/* Alinhado à esquerda SEMPRE — inclusive no foco, desfazendo o centro da rodada
   anterior. O `[type="search"]` repete a forma do desenho antigo para não perder no
   empate de especificidade. */
.stylee-barra .stylee-busca input[type="search"],
.stylee-barra .stylee-busca:focus-within input[type="search"]{
  text-align:left;
}

.stylee-busca__dica{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;
  /* Recuo dos dois lados igual à lupa: a frase centra na pílula sem nunca encostar nela. */
  padding:0 34px;
  font-family:var(--ui);font-size:1rem;color:#6d6862;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  /* Não intercepta o clique: quem recebe é o campo, inteiro, inclusive debaixo da dica. */
  pointer-events:none;
  transition:opacity .2s var(--ease);
}
/* Só depois que o script escreve a dica é que o placeholder de verdade sai de cena. Sem
   JavaScript a classe nunca entra e a busca segue com o placeholder de sempre. */
.stylee-busca.dica-pronta input[type="search"]::placeholder{color:transparent}
.stylee-busca:focus-within .stylee-busca__dica,
.stylee-busca.tem-texto .stylee-busca__dica{opacity:0}

@media (max-width:699px){
  .stylee-busca__dica{font-size:.95rem;padding:0 30px}
}

/* ══════════════════════════════════════════════════════════════════════════
   OS FUNDOS DAS PÁGINAS INTERNAS (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   Faixa de ponta a ponta, colada no cabeçalho, com o título cravado na arte. O quadro
   herda a proporção do arquivo — mesma regra da capa da Loja, mesmo motivo: quadro e foto
   com a mesma forma não deixam sobra para cortar.

   NO CELULAR o corte vai pela DIREITA, ao contrário da Loja. Lá o assunto era a modelo,
   à direita; aqui é o TÍTULO, à esquerda. A proporção do quadro estreito não é escolhida
   no olho: o PHP mede onde a manchete termina em cada arte e escreve a medida em
   `--fundo-prop-movel`. Arte de título curto ganha quadro mais largo, arte de título
   comprido ganha quadro mais alto — cada uma no que ela precisa. */
.stylee-fundo{
  width:100%;overflow:hidden;
  background:var(--areia);
  aspect-ratio:var(--fundo-prop,3/1);
}
.stylee-fundo .stylee-fundo__img{
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:left center;
}
/* NO CELULAR TAMBÉM VAI INTEIRO (19/08/2026, André).

   «No celular não dá para ver os banners completos — por isso pedi para promover por toda
   a largura do banner.»

   Eu tinha entendido o pedido anterior como valendo só para o Carrinho e a Minha conta.
   Não era: ele quer as oito artes inteiras, nas duas telas. E o argumento dele é o de quem
   fez as peças — cada uma foi composta como uma cena, com o título respirando dentro dela;
   cortar 46% da largura entrega outra composição, não a que ele desenhou.

   O que eu protegia com o corte era o TAMANHO do título, que inteiro cai para uns 16px no
   telefone. É pequeno, mas é maior do que eu supunha, e a decisão de trocar composição por
   dois ou três pixels de manchete não é minha — é dele, e ele já disse que, se ficar ruim,
   prefere gerar versões verticais das artes. Essa é a saída certa: arte pensada para a tela
   em pé, e não arte deitada mutilada.

   A MÁQUINA DO CORTE FICA DE PÉ, e não é código morto: o PHP continua medindo onde a
   manchete termina e escrevendo `--fundo-prop-movel` em cada faixa. Se um dia UMA página
   precisar do corte de volta, é uma linha — `body.page-id-X .stylee-fundo{aspect-ratio:
   var(--fundo-prop-movel)}` — sem refazer medição nenhuma. */

/* O NOME DA PÁGINA JÁ ESTÁ NA ARTE. Deixar o <h1> à vista repetiria o mesmo nome duas
   vezes na mesma tela, uma vez em serifa desenhada e outra na tipografia do site — que é
   pior do que qualquer uma das duas sozinha. Ele continua no HTML, fora da vista:
   buscador e leitor de tela dependem dele para saber onde a cliente está. */
body.stylee-tem-fundo .stylee-pagina__topo{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* A TARJA FOI DESFEITA (19/08/2026, André, vendo no ar).

   Eu tinha limitado a altura da faixa no Carrinho e na Minha conta — 300px no computador,
   190px no telefone — com um argumento que continua valendo em tese: são páginas de
   TAREFA, e faixa alta empurra a tabela do carrinho para longe.

   Ele viu o resultado e perguntou por que só essas duas estavam cortadas. A pergunta é a
   resposta: seis páginas mostravam a arte inteira e duas apareciam decapitadas, e o corte
   não lia como decisão — lia como defeito. Consistência é o que faz o conjunto parecer
   cuidado, e o que eu economizava em pixels eu gastava em confiança.

   Além disso, o custo real era menor do que eu supus: com a faixa inteira o conteúdo do
   carrinho começa por volta dos 700px num monitor comum, ainda dentro da primeira tela.

   Fica o registro para não voltar atrás sem motivo novo: se um dia a tabela do carrinho
   crescer a ponto de a faixa atrapalhar de verdade, o lugar de mexer é aqui — e aí a
   mudança vale para as oito, não para duas. */

/* (O bloco que dava tratamento especial ao Carrinho e a Minha conta saiu junto: com as
   oito inteiras nas duas telas, ele nao distinguia mais nada.) */

/* ══════════════════════════════════════════════════════════════════════════
   A CAPA RESPIRA (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Será que vale a pena um zoom bem lentamente nesses banners, para criar um movimento,
   mas bem sutil?»

   Vale — e o que decide se fica elegante ou barato é uma escolha só: QUEM se move. Aqui
   só a FOTO cresce; a logo, a manchete e a frase ficam paradas por cima. Se tudo se
   movesse junto, seria uma apresentação de slides; com o texto ancorado, a leitura não é
   perturbada e a imagem parece ter profundidade. É por isso que o texto ser HTML, e não
   estar cravado na arte, valeu a pena duas vezes.

   NUNCA REINICIA, e essa é a parte que exigiu pensar. A ideia óbvia — animar só a arte
   que está no ar — tem um defeito escondido: quando ela sai, a regra deixa de valer e a
   escala volta a 1 de uma vez, um salto de 3% bem no meio da fusão, quando ela ainda está
   visível. A saída é a animação viver em TODAS as artes e apenas PAUSAR nas que estão
   fora: a que sai congela onde estava, a que entra continua de onde parou. Nada salta, e
   nenhuma arte invisível gasta GPU.

   `alternate` em vez de repetir: chegando ao fim, a animação volta em vez de recomeçar —
   de novo, sem salto.

   O NÚMERO: 14s para 10%. A primeira versão tinha 26s para 6% e o André achou «quase
   imperceptível» — com razão, e o erro foi meu na conta. Eu raciocinei sobre o ciclo
   inteiro esquecendo que cada arte fica no ar só 6,5 segundos: nesse tempo ela andava
   1,5% da escala, uns 21px numa tela comum. Movimento de 3px por segundo não é sutil, é
   invisível.

   Agora são 4,6% por turno, uns 66px — cerca de 10px por segundo. Dá para perceber sem
   olhar de propósito, que é onde mora o limite entre respirar e balançar. E o teto de 10%
   corta 5% de cada lado no extremo: a manchete não sofre, porque ela é HTML e não está
   dentro da foto. */
@keyframes styleeCapaRespira{
  from{transform:scale(1)}
  to{transform:scale(1.1)}
}
.stylee-capa .stylee-capa__img{
  animation:styleeCapaRespira 14s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.stylee-capa__peca.is-ativa .stylee-capa__img{animation-play-state:running}

/* Quem pediu menos movimento no sistema recebe a capa parada — e continua com as quatro
   artes, porque o rodízio é informação, não enfeite. */
@media (prefers-reduced-motion:reduce){
  .stylee-capa .stylee-capa__img{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   O TEXTO DA CAPA ENTRA E SAI (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Consegue criar animação de entrada e saída dos textos dos banners? A logomarca poderá
   ficar fixa.»

   Até aqui o texto só herdava a fusão da arte: aparecia e sumia junto com a foto, no mesmo
   tempo e do mesmo jeito. Funciona, mas não CONTA nada — a manchete chegava como parte do
   papel de parede.

   Agora ela tem tempo próprio. Sobe 22px enquanto aparece, e a frase vem atrás com um
   terço de segundo de atraso: é o atraso que cria a leitura em ordem, primeiro o que
   chama, depois o que explica. Na saída ela sobe mais um pouco e some — mais rápido do que
   entrou, porque despedida longa cansa e a próxima arte já está chegando.

   O ATRASO DE 0,3s NA ENTRADA não é enfeite: sem ele, o texto que chega cruzaria com o que
   está indo embora, e por um instante haveria duas manchetes sobrepostas na mesma metade
   da tela. Com ele, uma sai e a outra entra — e a capa nunca fica confusa.

   A LOGO NÃO ESTÁ AQUI, de propósito. Ela saiu de dentro das artes e virou uma só, fixa,
   irmã das quatro. É o único elemento que não se move: enquanto tudo entra e sai, a marca
   fica cravada. */
@keyframes styleeCapaTextoEntra{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
@keyframes styleeCapaTextoSai{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(-16px)}
}

.stylee-capa__peca.is-ativa .stylee-capa__titulo{
  animation:styleeCapaTextoEntra .85s var(--ease) .3s both;
}
.stylee-capa__peca.is-ativa .stylee-capa__frase{
  animation:styleeCapaTextoEntra .85s var(--ease) .42s both;
}
.stylee-capa__peca.is-saindo .stylee-capa__titulo{
  animation:styleeCapaTextoSai .5s var(--ease) both;
}
.stylee-capa__peca.is-saindo .stylee-capa__frase{
  animation:styleeCapaTextoSai .42s var(--ease) both;
}

/* ── A MARCA FIXA, E A COR QUE SEGUE A ARTE ────────────────────────────────
   Com uma logo só para as quatro artes, a troca de cor da peça escura precisa vir de
   fora: o CSS pergunta "a arte no ar é escura?" olhando para trás, e por isso a marca é
   impressa DEPOIS das peças no HTML. A transição existe porque a troca de preto para
   branco no meio de uma fusão, se fosse instantânea, seria a única coisa brusca na tela. */
.stylee-capa__logo{
  /* Irmã das peças agora, e não filha: sem uma camada declarada ela dependeria da ordem
     do HTML para ficar por cima das fotos. Depender de ordem é depender de ninguém mexer. */
  z-index:2;
  transition:filter .7s var(--ease),opacity .7s var(--ease);
}
.stylee-capa__peca.is-escura.is-ativa ~ .stylee-capa__logo{
  filter:none;opacity:.95;
}

@media (prefers-reduced-motion:reduce){
  .stylee-capa__peca.is-ativa .stylee-capa__titulo,
  .stylee-capa__peca.is-ativa .stylee-capa__frase,
  .stylee-capa__peca.is-saindo .stylee-capa__titulo,
  .stylee-capa__peca.is-saindo .stylee-capa__frase{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   AS CORES DA PEÇA, EM COR (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   Entram no lugar exato onde estava o "3 CORES" escrito: embaixo do preço, fora da
   moldura da foto. Fora é a palavra importante — os traços do folheador nascem
   invisíveis desde que ele viu «as bolsas sublinhadas por uma linha pontilhada», e uma
   régua permanente sobre a foto devolveria aquele problema com outra roupa.

   O tamanho é 13px e o espaçamento é apertado de propósito: quatro bolinhas têm de ler
   como UMA informação — "esta peça tem quatro cores" —, e não como quatro controles
   pedindo decisão. O anel interno em vez de borda existe para a cor branca não sumir no
   fundo branco do cartão, e é o mesmo recurso das amostras do filtro. */
.stylee-cores{
  display:flex;align-items:center;gap:5px;
  margin-top:7px;
}
.stylee-cor-amostra{
  flex:0 0 auto;width:13px;height:13px;border-radius:50%;
  background:var(--tom,#fff);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* Cresce um pouco sob o dedo ou o ponteiro — o suficiente para dizer "isto responde",
   sem deslocar as vizinhas. */
.stylee-cor-amostra:hover{
  transform:scale(1.25);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 2px rgba(191,42,89,.25);
}

/* No toque a área do dedo precisa ser maior do que o desenho: a bolinha continua com
   13px de tamanho visível e ganha uma folga invisível em volta. Sem isso, escolher uma
   cor viraria mira. */
@media (hover:none){
  .stylee-cores{gap:9px;margin-top:8px}
  .stylee-cor-amostra{position:relative}
  .stylee-cor-amostra::after{
    content:"";position:absolute;inset:-7px;border-radius:50%;
  }
  .stylee-cor-amostra:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
}

/* ══════════════════════════════════════════════════════════════════════════
   AS BOLINHAS ENTRAM NA COLUNA DO TEXTO (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Alinhar as bolinhas com o nome do produto, com o preço, no mesmo alinhamento.»

   Ele viu 16px de diferença. Medi: título e preço começam a 372, as amostras a 356 — o
   recuo é exatamente o `clamp(12px,1.1vw,18px)` que o tema dá ao nome e ao preço, e que a
   minha fileira não tinha.

   E aqui está o motivo de a regra não ser uma linha só: o recuo NÃO vale em todo lugar.
   Medido nos três contextos onde o cartão aparece — Loja 15,7px, vitrine da Início 15,7px,
   relacionados na página da peça ZERO. Nos relacionados a grade não é de borda a borda, e
   lá as bolinhas já estavam alinhadas. Um `padding` geral consertaria dois lugares e
   quebraria o terceiro.

   Então os seletores são os MESMOS que o tema já usa para o título (linhas ~3512 e ~5699),
   copiados e não reinventados: no dia em que o recuo da vitrine mudar, muda num lugar e
   as bolinhas acompanham porque estão na mesma companhia.

   Nota para quem vier depois: `.stylee-cores-n` aparece nessas listas do tema e hoje não
   casa com nada — era o rótulo "3 CORES" que estas amostras substituíram. */
body.post-type-archive-product ul.products li.product .stylee-cores,
body.tax-product_cat ul.products li.product .stylee-cores,
.stylee-vitrine ul.products li.product .stylee-cores{
  padding-left:clamp(12px,1.1vw,18px);
  padding-right:clamp(12px,1.1vw,18px);
}

/* ══════════════════════════════════════════════════════════════════════════
   A FAIXA NAS PÁGINAS DE CATEGORIA (19/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   Mesma peça das páginas escritas, outro caminho: categoria não passa pelo `page.php`, e
   o título dela não é um `<h1>` de página — é o `h1.page-title` da vitrine, o mesmo que a
   Loja usa. Por isso as duas regras abaixo repetem, para a categoria, o que a capa da Loja
   já fazia: encostar a arte no cabeçalho e tirar da vista o nome que a arte já traz.

   O `!important` no recuo não é preguiça: a regra que ele desfaz também tem `!important`
   (é a que dá respiro a toda página interna) e sem igualar a força a faixa nasceria
   flutuando a 64px do cabeçalho. */
body.stylee-tem-fundo .stylee-loja{padding-top:0!important}
body.stylee-tem-fundo .stylee-loja h1.page-title{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
body.stylee-tem-fundo .stylee-loja h1.page-title::after{display:none}

/* O respiro que o recuo da seção deixou de dar passa a ser da própria faixa — assim ele
   acompanha a arte, e não a página. */
.stylee-loja .stylee-fundo{margin-bottom:clamp(20px,3vw,34px)}

/* ══════════════════════════════════════════════════════════════════════════
   O MENU DO CELULAR E AS BORDAS DO IPHONE (20/08/2026, André, no iPhone X)
   ══════════════════════════════════════════════════════════════════════════
   Duas queixas, um mesmo assunto: «o menu fica colado no cabeçalho» e «a barra de
   navegação de baixo atrapalha muito».

   EM CIMA — o recuo existia (`padding-top: header-h + 24px`) e não bastava, porque recuo
   não resiste a ROLAGEM. Com cinco itens, o fio, CATEGORIAS e as fotos, a lista passa da
   altura da tela; ao rolar, os itens sobem POR BAIXO do cabeçalho, que é fixo e
   transparente. "Início" foi parar em cima da logomarca — os dois em branco sobre preto,
   um lendo o outro.

   Recuo empurra o começo; RECORTE impede a passagem. Então a área que rola passa a
   começar embaixo do cabeçalho, e o que sai por cima é cortado pela borda dela em vez de
   aparecer sobre a marca.

   EMBAIXO — elemento com `position:fixed` no Safari do iPhone se mede pela tela SEM as
   barras, então o fim da lista nasce debaixo da barra de navegação. `100dvh` mede a tela
   que existe AGORA, com as barras que estiverem no ar. É declaração nova: onde não houver
   suporte ela é ignorada e o `inset:0` de sempre continua valendo — não quebra nada.

   E a área segura entra nos dois lados: no topo ela vale quando a página roda em tela
   cheia ou deitada; embaixo, é o espaço da faixa do gesto de voltar para a tela inicial. */
.stylee-drawer{height:100dvh}

.stylee-drawer__nav{
  position:absolute;
  top:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  right:0;
  bottom:0;
  left:0;
  height:auto;
  padding:24px clamp(28px,8vw,64px) calc(48px + env(safe-area-inset-bottom, 0px));
}

/* O modo paisagem tinha o seu próprio recuo, calculado sobre o cabeçalho — agora esse
   espaço vem do recorte, e aqui sobra só o respiro interno. */
@media (max-height:560px) and (orientation:landscape){
  .stylee-drawer__nav{
    padding:8px clamp(24px,5vw,56px) calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* O `safe center` NÃO É RESPEITADO POR ESTE SAFARI (20/08/2026, André, iPhone X).

   O comentário lá em cima explica por que o `safe` foi escrito: com a lista maior que a
   tela, `center` puro empurra o começo para FORA do alcance da rolagem e os primeiros
   itens somem. O `safe` deveria desistir de centralizar exatamente nesse caso.

   Só que este Safari centraliza assim mesmo — a palavra-chave passa batida. No Android
   funcionava, e por isso o defeito só apareceu agora. Meu recorte anterior encurtou a área
   e piorou o sintoma: em vez de "Início" encostando na marca, ele sumiu junto com "Loja".

   A saída é a mesma ideia sem depender da palavra: alinhamento no INÍCIO e margens
   automáticas nas pontas. Quando sobra espaço, as margens crescem e centralizam; quando
   não sobra, elas viram zero e nada é empurrado para fora — que é o comportamento que o
   `safe` prometia. Funciona em qualquer navegador que tenha flexbox, sem palavra nova.

   Lição para o resto do tema: palavra-chave recente de alinhamento é promessa, não
   garantia. Onde o custo de falhar é "o usuário não alcança o conteúdo", vale a construção
   que não depende dela. */
.stylee-drawer__nav{justify-content:flex-start}
.stylee-drawer__nav > :first-child{margin-top:auto}
.stylee-drawer__nav > :last-child{margin-bottom:auto}

/* Deitado a lista já começa no topo de propósito (a tela é baixa demais para centralizar),
   então as margens automáticas sairiam sobrando — e empurrariam o menu para o meio de novo. */
@media (max-height:560px) and (orientation:landscape){
  .stylee-drawer__nav > :first-child{margin-top:0}
  .stylee-drawer__nav > :last-child{margin-bottom:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   A ALTURA DO BALÃO DA LIA, SEM MEDIÇÃO (20/08/2026, André, iPhone X)
   ══════════════════════════════════════════════════════════════════════════
   O JS media a tela e congelava `min-height` e `max-height` iguais. Isso quebrava de duas
   maneiras, e as duas apareceram no iPhone:

   A medição vale para o INSTANTE em que roda — e no Safari do iPhone as barras entram e
   saem, o chão se mexe, e o número guardado continua mandando depois de deixar de valer.
   E, como o cálculo só rodava quando chegava resposta, o balão tinha um tamanho antes e
   outro depois da primeira mensagem: a conversa vazia era obrigada a ocupar 450px de
   branco por causa do `min-height`.

   Aqui a mesma intenção vira regra, sem medir nada:

   • no máximo 450px, como sempre foi;
   • e nunca mais alto do que o espaço REAL entre o topo da tela visível e a base do balão.
     A conta usa as mesmas variáveis que posicionam o balão, então as duas nunca divergem —
     se o avatar mudar de tamanho, o teto acompanha.

   `100dvh` é a peça central: ele mede a tela que existe AGORA, com as barras do navegador
   que estiverem no ar. É o que faltava para o iPhone.

   SEM `min-height`: com pouca conversa o balão encolhe até o conteúdo, que é o
   comportamento que ele sempre teve no Android e o que o André estranhou no iPhone. */
/* ── CERCADO EM min-width:431px (21/08/2026) — E O AVISO ESTAVA ESCRITO ────

   O André: «voltou o bug que distancia a base do balão do avatar». Voltou por minha causa,
   e o mais duro é que a regra que eu quebrei traz o alerta no próprio comentário:

     «Ambos declarados: a altura é a sobra. `max-height` sairia na frente e traria de
      volta o problema que este bloco existe para eliminar.»

   No telefone (≤430px) o balão é ancorado por `top` E `bottom`, e a altura é a SOBRA entre
   os dois — solução que nasceu depois de o chat invadir o cabeçalho do iPhone duas vezes.
   Declarar `max-height` dá altura própria à caixa; com altura própria e `top` fixo, o
   `bottom` deixa de mandar e a base descola do avatar. Exatamente o que ele viu.

   Minha regra entrou SEM cerca, no fim do arquivo — e regra sem cerca escrita depois vence
   regra dentro de `@media`, porque media query não soma especificidade. O conserto de ontem
   nem precisava dela no telefone: quem resolveu lá foi tirar o congelamento do JavaScript.
   Aqui ela vale só onde não há `top` para brigar, que é da largura de tablet para cima.

   Lição: comentário que diz «não faça X» não é decoração do passado. Antes de acrescentar
   regra no fim de um CSS de 460 KB, ler o que já existe sobre o mesmo seletor. */
@media (min-width:431px){
  .chatbox{
    max-height:min(
      450px,
      calc(100dvh - var(--lia-avatar-bottom) - var(--lia-avatar-height) - var(--lia-panel-gap) - 16px)
    );
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   A MENSAGEM CHEGA DO LADO DE QUEM FALOU (20/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════
   «Que as mensagens entrem com uma animação bacana, não no corte seco ou fade.»

   O que havia era `fadeInUp`: 20px para cima e opacidade, em meio segundo. Funciona e não
   diz nada — é a animação que qualquer coisa usa para aparecer.

   O que dá caráter aqui não é mais movimento, é DIREÇÃO. A mensagem da LIA nasce um pouco
   à esquerda e cresce a partir do canto inferior esquerdo; a da cliente nasce à direita e
   cresce do canto direito. Cada balão vem do lado de quem falou, e o olho entende quem
   está falando antes de ler — que é o que uma conversa de verdade faz.

   A escala saindo de 0,94 é o que separa "surgiu" de "chegou": o balão assenta em vez de
   simplesmente existir. Curta (0,42s) e com a curva do site, que desacelera no fim — em
   conversa, animação longa vira espera.

   `both` mantém o estado inicial durante o atraso e o final depois: sem isso o balão
   piscaria no lugar certo antes de começar a vir. */
@keyframes liaMensagemLia{
  from{opacity:0;transform:translate3d(-10px,14px,0) scale(.94)}
  to{opacity:1;transform:none}
}
@keyframes liaMensagemCliente{
  from{opacity:0;transform:translate3d(10px,14px,0) scale(.94)}
  to{opacity:1;transform:none}
}

.chatbox .message.message-animated{
  animation:liaMensagemLia .42s var(--ease) both;
  transform-origin:0 100%;
}
.chatbox .message.user.message-animated{
  animation-name:liaMensagemCliente;
  transform-origin:100% 100%;
}

/* Quem pede menos movimento no sistema recebe a mensagem sem viagem — mas ainda com a
   opacidade, senão ela apareceria no corte seco, que é justamente o que ele não quer. */
@media (prefers-reduced-motion:reduce){
  .chatbox .message.message-animated,
  .chatbox .message.user.message-animated{
    animation:liaMensagemSuave .3s ease both;
  }
  @keyframes liaMensagemSuave{from{opacity:0}to{opacity:1}}
}

/* ══════════════════════════════════════════════════════════════════════════
   O TÍTULO DA CATEGORIA SAI DA ARTE E VIRA TEXTO (20/08/2026, André)
   ══════════════════════════════════════════════════════════════════════════

   «Vamos remover os textos de todos os banners das categorias, assim o título seremos nós
   quem vamos aplicar por cima na área do lado esquerdo.»

   Três coisas melhoram de uma vez, e nenhuma delas é estética:

   1. O nome parava de ser dito DUAS vezes. Hoje a arte diz "Pochetes" e a vitrine repete
      "Pochetes" logo abaixo, em outra tipografia — o pior dos dois mundos.
   2. Quem sabe o nome da categoria passa a ser o WordPress. Renomeou a categoria, a faixa
      acompanha; antes era preciso reabrir o editor de imagem e reexportar a peça.
   3. A régua que media "onde termina a manchete" deixa de importar nestas artes — não há
      manchete para medir. Era ela que travava Bolsas, Cintos e Pochetes no piso de 34%.

   A cor da letra é decidida pela luminância da METADE ESQUERDA da arte, e não da arte
   inteira: uma peça escura à direita puxaria a média para baixo e escreveria branco em
   cima de bege. Quem manda na cor da letra é o pedaço de baixo dela.

   Só CATEGORIA. As páginas escritas seguem com o nome desenhado dentro da arte. */
.stylee-fundo{ position:relative }

.stylee-fundo__texto{
  position:absolute;z-index:2;left:0;top:0;bottom:0;
  /* 52% e não 54%, e o respiro da direita bem menor que o da esquerda: o título cresceu e
     precisa de pista. A margem generosa é a de FORA (a que separa da borda da tela); a de
     dentro só existe para o texto não encostar na cena. */
  width:min(52%,1040px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,3vw,40px) clamp(12px,1.6vw,32px) clamp(14px,3vw,40px) clamp(18px,5vw,80px);
  box-sizing:border-box;
  text-align:left;
  /* A faixa é decoração; deixar o bloco transparente ao ponteiro evita que ele roube um
     clique de qualquer coisa que venha a morar por baixo. */
  pointer-events:none;
}
.stylee-fundo__titulo{
  font-family:var(--display);font-weight:500;
  /* O TAMANHO SAI DE UMA MEDIÇÃO, NÃO DE UM PALPITE (20/08/2026, André: «no PC pode ser
     bem maior» + «o porta-celular sem quebra de linha»).

     Medi os seis nomes em Playfair Display 500 no próprio navegador (canvas.measureText).
     Em em, com o corpo valendo 1:

       Bolsas 2,84 · Cintos 2,93 · Mochilas 4,00 · Pochetes 4,01 · Carteiras 4,17
       PORTA-CELULAR 5,99  ← o dobro do menor, e é ele quem manda no tamanho de todos

     A coluna útil (52% da tela menos os respiros) vale ~0,454 da largura da tela. Para o
     nome mais longo caber numa linha: corpo ≤ 0,454/5,99 = 7,58vw. Fixei em 7vw, que
     deixa ~13% de folga para arredondamento e para a barra de rolagem, que entra no vw e
     não entra na porcentagem da coluna.

     O `nowrap` é a GARANTIA: a conta acima diz que cabe, o nowrap diz que, se um dia não
     couber, o defeito aparece na hora — em vez de virar silenciosamente aquele
     'Porta-' / 'celular' partido no hífen que o André viu. Regra de sempre: falha que se
     vê é falha que se conserta.

     No monitor dele (1990px): de 100px para ~139px, um quinto da altura da faixa. */
  font-size:min(7vw,9rem);
  /* CATEGORIA não quebra; PÁGINA quebra em duas linhas (20/08/2026).

     Medi os nove títulos de página na mesma fonte. Em uma linha, «Política de privacidade»
     pede 10,15 em — não cabe em coluna nenhuma. Deixando quebrar, a linha mais larga de
     TODAS as nove é «Finalização de», com 5,90 em: MENOS que o «Porta-celular» das
     categorias (5,99). Por isso o corpo é o mesmo nos dois — o que muda é só a permissão
     de quebrar, e a permissão é o que faz frase virar manchete em vez de fila indiana.

     A coluna comporta 6,49 em (0,454 da tela dividido por 0,07). Conferido título a título
     com a quebra GULOSA, que é a que o navegador faz de verdade: nenhum passa de 5,90. */
  white-space:normal;
  text-wrap:balance;   /* duas linhas parelhas em vez de uma cheia e uma órfã */
  line-height:1.04;letter-spacing:-.01em;
  color:var(--tinta);margin:0;
}
.stylee-fundo--categoria .stylee-fundo__titulo{ white-space:nowrap }
.stylee-fundo--titulo.is-escura .stylee-fundo__titulo{ color:#fff }

/* No telefone a faixa tem uns 125px de altura (3:1 numa tela de 375). Cabe o título, mas
   só se a coluna respirar mais: 54% de 375 são 200px, e "Porta-celular" quebraria em três
   linhas dentro de um quadro que não tem três linhas de altura. */
@media (max-width:699px){
  .stylee-fundo__texto{ width:72%;padding:8px 12px 8px 16px }
  /* A CONTA DO TELEFONE (medida antes de escrever): a faixa 3:1 tem ~131px de altura num
     aparelho de 393px. Título (28px) + frase em duas linhas + respiro precisam caber ali.
     Por isso a frase encolhe, a entrelinha aperta e o bloco ganha largura — e por isso ela
     é cortada em DUAS LINHAS no talo: uma terceira transbordaria a faixa, e texto vazando
     de dentro de uma arte é o tipo de defeito que estraga tudo o que veio antes. */
  /* A FRASE GANHA MEDIDA PRÓPRIA, e a coluna continua larga (20/08/2026).

     No print do André a frase atravessava e caía em cima da modelo. O reflexo seria
     estreitar o bloco inteiro — e isso QUEBRARIA O TÍTULO: «Porta-celular» tem `nowrap` e
     pede 165px num corpo de 27,5px; numa coluna de 48% sobrariam 161px e ele vazaria.

     Então quem estreita é só a frase. Medi as seis em Jost: a mais larga («Organização e
     praticidade para acompanhar todos os momentos») tem 25,75 em. Numa medida de 14em ela
     cai em DUAS linhas e termina dentro da área calma da arte, sem encostar na modelo.

     O corte vai para TRÊS linhas, e não duas: três ainda cabem (86px de conteúdo numa
     faixa de 131px) e deixam folga para uma frase mais longa no futuro sem comer palavra.
     Cortar texto no talo é o último recurso, não o primeiro. */
  .stylee-fundo__frase{
    font-size:.8rem;line-height:1.35;margin-top:6px;max-width:14em;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* Mesma conta do PC com os números do telefone: coluna útil = 66% menos 30px. Num
     iPhone de 375, sobram 215px e o nome longo pede 5,99 corpos — logo o corpo máximo é
     36px. 8,5vw dão 32px ali, com folga, e a faixa tem 125px de altura: o título ocupa um
     quarto dela, que é o que se espera de uma capa de categoria. */
  .stylee-fundo__titulo{ font-size:clamp(1.5rem,8.5vw,2.2rem) }
}

/* O <h1> da vitrine sai da vista — a faixa passou a dizer o nome. Ele CONTINUA no HTML:
   é por ele que o buscador e o leitor de tela sabem onde a cliente está, e o <p> da faixa
   é desenho, não estrutura. Mesmo tratamento que as páginas escritas já recebiam. */
body.tax-product_cat.stylee-tem-fundo .stylee-loja h1.page-title,
body.tax-product_cat.stylee-tem-fundo .woocommerce-products-header__title{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ══════════════════════════════════════════════════════════════════════════
   O BLOCO DE CONFIANÇA (20/08/2026)
   ══════════════════════════════════════════════════════════════════════════

   Quatro colunas antes do rodapé. Elas não competem com a peça: ficam no fim, onde já
   está quem gostou de alguma coisa e parou na dúvida de confiar.

   FUNDO AREIA, e não branco: o bloco precisa se separar do conteúdo acima sem virar
   caixa. A mudança de tom faz o trabalho que uma borda faria, e faz mais quieto.

   O ÍCONE É TRAÇO, não peso. Ícone cheio disputaria atenção com a fotografia da peça,
   que é a única coisa nesta página que tem direito de gritar. */
/* ══════════════════════════════════════════════════════════════════════════
   O NÚMERO É O DESENHO (21/08/2026, André: «pode dar o tapa que pensou»)
   ══════════════════════════════════════════════════════════════════════════

   O argumento inteiro da STYLEE são números — 7, 90, 2 —, e até aqui eles vinham enterrados
   no meio de uma frase («7 dias para desistir»). Número dentro de texto não é lido: é
   atravessado. Agora ele vem primeiro, grande, em Playfair, com a unidade miúda ao lado.

   O ÍCONE SAIU. Ao lado de um numeral desse tamanho ele parava de ajudar e passava a
   competir. Quando um elemento novo entra, a pergunta certa é quem sai — empilhar os dois
   é o caminho mais curto para uma tela cheia que não diz nada.

   NUMERAL BRANCO, UNIDADE ROSA. Quatro numerais rosas de 4rem seriam rosa demais numa marca
   que usa o rosa como fio, não como campo. O branco carrega o peso; o rosa dá a fagulha e
   amarra o bloco ao resto do site.

   O FIO SOB A MEDIDA separa o dado da explicação — é a linha que, num anúncio impresso,
   separaria a manchete do corpo. Faz o olho parar meio segundo no número antes de descer. */
/* O RECUO LATERAL É O DO SITE, e não zero (21/08/2026, André: «olha o alinhamento da
   SEM LETRA MIÚDA e da FICOU NA DÚVIDA»).

   `.stylee-wrap` não tem recuo nenhum — ele só limita a largura e centraliza. Quem afasta o
   conteúdo da borda no site inteiro é `clamp(20px,5vw,44px)`, em `.stylee-secao` e no
   rodapé. Eu escrevi `0` aqui e o bloco ficou colado no vidro do telefone, enquanto o
   rodapé logo abaixo respirava. Duas medidas diferentes para a mesma margem é o tipo de
   coisa que ninguém sabe nomear mas todo mundo sente. */
.stylee-confianca{
  background:#101010;
  padding:clamp(40px,5vw,76px) clamp(20px,5vw,44px) clamp(44px,5.4vw,84px);
}
.stylee-confianca__rotulo{ color:var(--rosa);margin:0 0 clamp(20px,2.4vw,32px) }
.stylee-confianca__grade{
  display:grid;gap:clamp(12px,1.2vw,18px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.stylee-confianca__item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  padding:clamp(20px,2vw,30px);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.stylee-confianca__item:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}

.stylee-confianca__medida{
  display:flex;align-items:baseline;gap:.5em;
  margin:0 0 clamp(12px,1.2vw,16px);
  padding-bottom:clamp(12px,1.2vw,16px);
  border-bottom:1px solid rgba(255,255,255,.09);
}
.stylee-confianca__numero{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,3.4vw,4.2rem);
  line-height:.88;letter-spacing:-.02em;color:#fff;
  /* Numeral tabular: o 7, o 90 e os dois 2 caem no mesmo eixo em vez de dançarem conforme a
     largura de cada algarismo. Num conjunto de quatro cards lado a lado, isso é a diferença
     entre parecer alinhado e ser alinhado. */
  font-variant-numeric:tabular-nums;
}
.stylee-confianca__unidade{
  font-family:var(--ui);font-weight:500;
  font-size:clamp(.66rem,.78vw,.76rem);
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--rosa);white-space:nowrap;
}
.stylee-confianca__titulo{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.3;
  color:#fff;margin:0 0 8px;
}
.stylee-confianca__texto{
  font-size:.855rem;line-height:1.62;margin:0;max-width:42ch;
  color:rgba(255,255,255,.7);
}
.stylee-confianca__texto strong{font-weight:600;color:#fff}

@media (max-width:980px){ .stylee-confianca__grade{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── CELULAR: o número ocupa a coluna que era do ícone ─────────────────────
   Mesma anatomia do card deitado que já funcionava, com o numeral no lugar do símbolo —
   e a unidade embaixo dele, não ao lado, porque «DIAS ÚTEIS» não cabe em 62px. É também o
   que separa os dois «2» do conjunto: um mede dias, o outro mede gente. */
@media (max-width:640px){
  .stylee-confianca{padding:32px clamp(20px,5vw,44px) 36px}
  .stylee-confianca__grade{grid-template-columns:1fr;gap:10px}
  .stylee-confianca__item{
    display:grid;grid-template-columns:62px minmax(0,1fr);
    column-gap:16px;align-items:start;padding:16px 18px;
  }
  /* O NÚMERO CENTRADO NA CÉLULA (21/08/2026, o «modo TOC» do André — e ele tem razão).

     Com o fio de altura cheia ao lado, o numeral encostado no topo desequilibra: o olho lê
     a linha inteira e o peso fica todo em cima. Centrado, o número passa a ser o EIXO do
     card em vez de um enfeite pendurado.

     `justify-content:center` num flex em coluna, e NÃO `align-self:center` no elemento:
     se eu centrasse o elemento, ele encolheria para a altura do conteúdo e o fio encolheria
     junto — perderia justamente a linha inteira que separa as duas metades do card. Aqui a
     caixa continua esticada e quem se centra é o conteúdo dentro dela. */
  .stylee-confianca__medida{
    grid-row:1 / span 2;
    /* `align-self:stretch` ANTES de centrar, e é aqui que a primeira tentativa falhou: o
       card tem `align-items:start`, então esta coluna encolhia até a altura do próprio
       conteúdo — e centrar dentro de uma caixa do tamanho do conteúdo não move nada. O fio
       parecia inteiro porque ele acompanha as duas linhas do grid, mas a caixa não estava
       esticada. Primeiro dá-se altura à caixa; só então o centro tem onde acontecer. */
    align-self:stretch;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    margin:0;padding:0 14px 0 0;border:0;text-align:center;
    border-right:1px solid rgba(255,255,255,.09);
  }
  .stylee-confianca__numero{font-size:2.3rem;display:block}
  .stylee-confianca__unidade{font-size:.58rem;letter-spacing:.16em;display:block;margin-top:2px;white-space:normal}
  .stylee-confianca__titulo{font-size:1rem;margin:2px 0 4px}
  .stylee-confianca__texto{font-size:.83rem;line-height:1.5;max-width:none}
}


/* ── A CAIXA DO FRETE ENTRA NA PALETA (21/08/2026, André) ──────────────────

   «A caixa de Simulação de frete é a única cinza do site.» Ele viu certo: aquele cinza vem
   do Melhor Envio, não de nós, e num layout onde tudo é areia, tinta e rosa, um cinza
   neutro não lê como escolha — lê como plugin. E plugin aparecendo é a loja dizendo à
   cliente que ali dentro tem outra empresa.

   Mesma superfície e mesmo raio dos cards de confiança: quando o mesmo material se repete,
   a cliente para de ver peças e passa a ver UM site.

   Só a moldura e a tipografia mudam. Nada de mexer em estrutura de plugin: na próxima
   atualização dele, quem quebra é quem foi longe demais. */
.containerCalculator{
  background:var(--areia)!important;
  border:1px solid rgba(22,22,22,.08);
  border-radius:10px;
  padding:clamp(16px,2vw,22px)!important;
}
.containerCalculator h4,.containerCalculator h3,.containerCalculator p:first-child{
  font-family:var(--display);font-weight:500;
  font-size:1.02rem;color:var(--tinta);margin:0 0 12px;
}
.containerCalculator input[type="text"],.containerCalculator .iptCep,.containerCalculator .iptCepShortcode{
  border:1px solid rgba(22,22,22,.14)!important;
  border-radius:8px!important;
  background:#fff!important;
  padding:12px 14px!important;
  font-family:var(--ui);font-size:.92rem;
}
.containerCalculator input[type="text"]:focus{border-color:var(--tinta)!important;outline:none}
.containerCalculator .resultado-frete{font-size:.9rem;color:#57514c}

/* ══════════════════════════════════════════════════════════════════════════
   RELACIONADOS: O MESMO CARTÃO E A MESMA LARGURA DA LOJA (21/08/2026, 02h20)
   ══════════════════════════════════════════════════════════════════════════

   «Monta o grid como em Loja. Em toda a largura da página, como na página Loja.»

   1) A LARGURA. Na Loja o `.stylee-wrap` é ANULADO (`max-width:none; padding:0`) e a grade
      vai de borda a borda. Na página de produto o mesmo wrap continua valendo — e não dá
      para anulá-lo ali, porque ele também segura o resumo da peça, que precisa da caixa.
      Então a seção sai da caixa por margem negativa: `calc(50% - 50vw)` de cada lado leva a
      borda até a viewport sem tocar em mais nada da página.

   2) A FOTO. A faixa clara embaixo da imagem é a PISTA aparecendo por trás: a foto estava
      mais baixa que ela. As regras da fita que garantem `height:100%` têm um seletor curto
      que deveria alcançar todo mundo, mas neste contexto perdiam para o sistema legado do
      cartão «básico». Aqui elas são redeclaradas com o caminho INTEIRO do contexto.

      E foi essa faixa que empurrou os tracinhos para fora da foto — a camada de navegação
      nunca esteve errada: ela apontava para o rodapé de uma foto que não ocupava o próprio
      espaço. Passei a noite consertando quem estava certo. */
body.single-product.woocommerce div.product .related,
body.single-product.woocommerce div.product .up-sells,
body.woocommerce-cart .cart-collaterals .cross-sells{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  /* `clip` e não `hidden`: `hidden` cria contexto de rolagem e some com a barra retrátil do
     navegador no celular; `clip` só corta o que passa. */
  overflow-x:clip;
}

body.single-product.woocommerce div.product .related > h2,
body.single-product.woocommerce div.product .up-sells > h2,
body.woocommerce-cart .cart-collaterals .cross-sells > h2
,
body.single-product.woocommerce div.product .related ul.products,
body.single-product.woocommerce div.product .up-sells ul.products,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products{
  padding-left:clamp(14px,2.2vw,34px)!important;
  padding-right:clamp(14px,2.2vw,34px)!important;
}

body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista.is-fita .stylee-pista__fita > img
,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista > img,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-pista > img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista > img
,
body.single-product.woocommerce div.product .related ul.products li.product .stylee-pista a img,
body.single-product.woocommerce div.product .up-sells ul.products li.product .stylee-pista a img,
body.woocommerce-cart .cart-collaterals .cross-sells ul.products li.product .stylee-pista a img{
  height:100%!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  margin:0!important;
  border-radius:0!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   O TEXTO DA CAPA SOBE, NO CELULAR (22/08/2026, André: «a Patrícia ficou apertada no
   canto direito… o texto sobrepõe e atrapalha a leitura»)
   ══════════════════════════════════════════════════════════════════════════

   PRIMEIRO, O ERRO QUE EU COMETI. Fui ajustar a largura da coluna lá em cima e mexi em
   regras MORTAS: existem quatro blocos `@media (max-width:699px)` neste arquivo, e o que
   manda é o último. O próprio arquivo já avisava, com todas as letras — «media query não
   soma especificidade; uma regra solta escrita depois vence a de dentro do @media». Li o
   aviso, editei o bloco errado assim mesmo, e o André atualizou a página para ver nada
   mudar. Por isso este conserto vai no FIM: onde ninguém sobrescreve.

   AGORA A MEDIÇÃO. Varri a arte nova faixa a faixa, procurando até onde vai a parede calma
   (energia de borda baixa) em cada altura:

       10–40% da altura ....  58% a 63% da largura
       50–70% da altura ....  43% a 44%      ← a mão e a bolsa sobem até aqui
       80–90% da altura ....  53%

   O texto ficava embaixo (`justify-content:flex-end`), que é exatamente a faixa mais
   estreita da imagem. Estreitá-lo ali obrigaria a encolher o título até ele quebrar em
   quatro linhas — trocaríamos "texto sobre a modelo" por "manchete em pedaços".

   A arte foi composta com a modelo embaixo à direita e o topo aberto. Então o texto sobe:
   na faixa de 10% a 40% há 58% de parede, e o título cabe inteiro no corpo que já tem.

   O recuo de cima abre espaço para a logo, que mora no mesmo canto (40px de altura a 18px
   do topo). Os fios do rodízio continuam embaixo, onde já estavam — eles não competem com
   o texto porque agora não dividem mais a mesma faixa. */
@media (max-width:699px){
  .stylee-capa__texto{
    justify-content:flex-start;
    /* logo (40) + folga do topo (18) + respiro (16) */
    padding:74px 18px 40px;
    width:100%;
  }
  /* 58% menos o respiro põe o fim do texto em ~53% da tela — dentro dos 58% medidos, com
     folga para o arredondamento de cada aparelho. */
  .stylee-capa__titulo,
  .stylee-capa__frase{ max-width:none;width:58% }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROFUNDIDADE AO ROLAR — só o herói
   ═══════════════════════════════════════════════════════════════════════════
   Aqui já moraram duas tentativas, e as duas caíram por motivos que vale registrar,
   porque são motivos DIFERENTES e o segundo é fácil de repetir sem perceber:

   NOS BANNERS (22/08/2026). Não se via. Profundidade não nasce de movimento, nasce de
   camadas em velocidades diferentes — e uma foto chapada que desliza inteira não tem
   camada nenhuma. Precisaria da modelo recortada em alpha sobre o fundo, o que é
   produção de arte e não código.

   NOS CARTÕES DE CATEGORIA (22/08/2026). Travava no PC do André. A culpa é do
   DESFOQUE, e só dele: `transform` e `scale` a placa de vídeo resolve sem repintar
   nada, mas `filter:blur()` obriga o navegador a repintar a foto INTEIRA a cada valor
   novo, fora da placa — e eram seis peças, várias delas vídeo tocando. Foi por isso
   que o efeito parecia barato de fazer e não era: o custo não estava no movimento,
   estava no único parâmetro que não é movimento.

   Sobra o herói, e sobra por bons motivos: é vídeo em tela cheia, o percurso é quase o
   dobro, não há desfoque nenhum envolvido, e o `object-fit:cover` já recortava a peça —
   esticar mais não sacrifica composição. Uma camada só, de graça, no primeiro gesto da
   página.

   A solução dos cartões passou a ser um VÍDEO produzido pelo André. É a resposta certa:
   o que o navegador teria de calcular sessenta vezes por segundo, a placa decodifica
   sem pensar. */
html.stylee-paralaxe .stylee-hero .stylee-hero__midia{
  height:118%;top:-9%;bottom:auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   O ROLO — o filme preso na tela, movido pela rolagem
   ═══════════════════════════════════════════════════════════════════════════
   Duas peças e nenhuma mágica: um TRILHO alto, que existe só para haver rolagem
   disponível, e um PALCO grudado no topo dele. Enquanto a página percorre o trilho, o
   palco fica parado na tela e o JavaScript posiciona o filme; quando o trilho acaba, o
   palco descola e a página segue. O reverso funciona sozinho, porque a posição do
   filme é uma FUNÇÃO da rolagem, e não uma animação com começo e fim.

   NÃO SE SEQUESTRA A RODA DO MOUSE. É a forma mais comum de fazer isto e é a errada:
   quem intercepta o `wheel` quebra a rolagem por inércia do celular, o arrastar da
   barra, as teclas de página, o atalho de busca do navegador e o dedo de quem usa
   leitor de tela. Com `position:sticky` a rolagem continua sendo do visitante — nós
   apenas escutamos onde ela está.

   O TRILHO SÓ CRESCE QUANDO O FILME ESTÁ PRONTO. Antes disso a seção tem a altura de
   uma tela e mostra o pôster. Se o vídeo não carregar — 4G ruim, arquivo removido —
   ninguém atravessa três telas de rolagem olhando para uma imagem parada. É a mesma
   lei das outras seções: o estado de repouso é um estado íntegro.

   `svh` E NÃO `vh`. No celular a barra de endereço aparece e some, e `vh` muda de
   valor junto — o palco daria um pulo no meio do gesto. `svh` é a altura com a barra
   VISÍVEL, então não se mexe. O `vh` fica de reserva para quem não conhece a unidade.
   ═══════════════════════════════════════════════════════════════════════════ */

.stylee-rolo{
  /* O RECUO DA BARRA. O cabeçalho e fixo e fica POR CIMA de tudo: prender o palco em
     `top:0` punha o filme atras dele, e era a cabeca da Alexandra que sumia. O palco
     passa a comecar onde a barra termina — o teto do filme encosta na base do menu.
     O valor daqui e so a reserva; o JavaScript mede a barra DE VERDADE e reescreve,
     porque para quem esta logado no WordPress existe ainda a barra do admin empurrando
     tudo mais 46px. Sem medir, o autor do site veria um enquadramento diferente do
     que a cliente ve. */
  /* O FILME VAI ATÉ O TOPO DA TELA (ideia do André): a barra fica transparente sobre a
     peça, exatamente como já acontece sobre o vídeo principal da home. Os pixels que o
     cabeçalho ocupava voltam para o filme — e no celular deitado é essa devolução que
     faz o monograma caber, porque o quadro passa a ser mostrado até 82,0% e ele termina
     em 81,9%. Sim, é essa a folga: meio pixel. Mexer na altura da barra ou na sobra de
     tela recoloca o corte em cima do monograma. */
  --stylee-palco:100vh;
  --stylee-palco:100svh;
  --stylee-curso:200vh;      /* quanta rolagem o filme inteiro consome */
  display:block;
  /* Sem tarja nenhuma para disfarçar, o fundo volta a ser o da PÁGINA: em pé o filme é
     uma faixa apoiada no branco do site, como o herói, e não um bloco escuro no meio da
     leitura. O tom da peça deixou de importar porque não há mais campo ao lado dela. */
  background:var(--areia);
}
@media (max-width:699px){
  /* No telefone o mesmo filme custa mais gesto: 1,5 tela em vez de 2. */
  .stylee-rolo{--stylee-curso:150vh}
}

.stylee-rolo__trilho{
  position:relative;
  height:var(--stylee-alturaPalco, var(--stylee-palco));
}
.stylee-rolo.is-pronto .stylee-rolo__trilho{
  height:calc(var(--stylee-alturaPalco, var(--stylee-palco)) + var(--stylee-curso));
}

/* A MOLDURA OCUPA A TELA INTEIRA, e isso foi aprendido errando (23/08/2026).
   Ela chegou a ter a altura natural do filme, como o vídeo principal do site. Numa
   moldura que NÃO fica presa isso é perfeito; numa presa é um defeito, e o André o viu
   no iPad: com a janela em 1150x1290, o filme na largura cheia tem 647px de altura, e
   os 643px restantes da tela ficavam sendo o TRILHO DA ROLAGEM — vazio. O percurso do
   filme aparecia como um buraco branco embaixo dele.

   A conta explica o que ele descreveu: o buraco é exatamente o que falta percorrer.
   Começa do tamanho do curso inteiro e encolhe até zero no último quadro. Por isso
   variava conforme a janela e sumia no fim.

   Com a moldura do tamanho da tela, o buraco não existe: enquanto o filme está preso,
   a tela é toda ele, e a seção seguinte entra colada no instante em que ele solta. É o
   que todo site que faz isto bem tem em comum — o elemento preso é de tela cheia. */
.stylee-rolo__palco{
  position:sticky;top:0;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:block;
}


/* O FILME PREENCHE A MOLDURA, E O CORTE NUNCA CAI NO TOPO.
   Com a moldura do tamanho da tela, `cover` resolve as duas orientações com uma regra
   só — ele preenche a dimensão que falta e corta a que sobra, sempre na proporção
   original, sem esticar nada:

     TELA MAIS ESTREITA QUE O FILME (celular em pé, tablet em pé, janela estreita)
        preenche a ALTURA e o corte cai nas LATERAIS. Nada vertical se perde: a cabeça
        da Alexandra e o monograma ficam inteiros.

     TELA MAIS LARGA (desktop, celular deitado)
        preenche a LARGURA e o que sobra sai POR BAIXO, porque o alinhamento é `top`.
        Medido no filme: o assunto começa a 5,6% do topo e o monograma desce até 81,9%
        no primeiro quadro. Cortar em cima decapitaria; cortar embaixo só tira pedestal.

   `center top` é a regra dura desta seção, e ela nasceu de um defeito real: a primeira
   versão centralizava o corte e o André viu o rosto dela cortado no celular deitado.

   Para as telas bem estreitas existe ainda um corte VERTICAL do filme na biblioteca de
   mídia (ver `escolher()` em stylee.js): ali `cover` mostraria só 28% da largura, e um
   arquivo 9:16 entrega quase quatro vezes mais pixels de origem para a mesma tela. */
.stylee-rolo__video{
  position:absolute;inset:0;
  width:100%;height:100%;max-width:none;
  /* Moldura e peça têm a mesma forma, então `cover` não corta nada: ele só garante o
     preenchimento exato se o arredondamento de subpixel do navegador deixar uma fresta. */
  object-fit:cover;object-position:center top;
  display:block;
  pointer-events:none;       /* o filme é cenário: o toque atravessa */
}

/* A BARRA FICA TRANSPARENTE SOBRE O FILME — o mesmo que ela já faz sobre o vídeo
   principal da home, e o que devolve à peça os pixels que o cabeçalho ocupava.

   COM UMA DIFERENÇA QUE O HERÓI NÃO PRECISA TER, e que foi medida quadro a quadro: o
   herói é escuro, então o logotipo branco se lê sozinho. Esta peça é creme claro — na
   faixa do cabeçalho a luminância chega a 136 de 255, e branco sobre isso dá contraste
   de 1,8:1 quando o mínimo legível é 4,5:1. Barra transparente pura deixaria a marca e
   os ícones ilegíveis justamente no filme de assinatura.

   O véu resolve sem trazer a barra de volta: um degradê que morre antes do fim do
   cabeçalho, encostando na vinheta que o próprio filme já tem nos cantos de cima. Não
   se lê como faixa. Se um dia a vinheta sair do arquivo, este número precisa subir. */
html.stylee-filme .stylee-header.is-solid,
html.stylee-filme .stylee-header.is-scrolled{
  background:transparent;
  box-shadow:none;
}
html.stylee-filme .stylee-header::before{
  content:"";position:absolute;inset:0 0 auto;
  height:calc(var(--header-h) * 1.6);
  background:linear-gradient(to bottom,
    rgba(10,9,8,.58) 0%,
    rgba(10,9,8,.36) 45%,
    rgba(10,9,8,0) 100%);
  pointer-events:none;
}
.stylee-header{transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.stylee-rolo__video::-webkit-media-controls,
.stylee-rolo__video::-webkit-media-controls-panel,
.stylee-rolo__video::-webkit-media-controls-start-playback-button{
  display:none!important;
  -webkit-appearance:none;
}

/* Quem pediu menos movimento fica com um quadro parado e a seção com altura de uma
   tela — sem prender nada, e sem baixar os 2,8 MB do filme. */
@media (prefers-reduced-motion:reduce){
  .stylee-rolo .stylee-rolo__trilho{height:var(--stylee-palco)!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   O `overflow-x` DO BODY QUEBRAVA O STICKY NO CELULAR  (22/08/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Sintoma: o filme do mosaico respeitava a rolagem, mas SUBIA junto com a página em
   vez de ficar preso — e só no telefone. Medido na página de prova, a 375px: o palco
   ia de 0 a -1218px e a parte visível encolhia até nada.

   A causa é uma regra de propagação que quase ninguém tem na cabeça. O `overflow` de
   `html` OU de `body` é transferido para a JANELA, mas só o do PRIMEIRO deles: se o
   `html` tem overflow, é o dele que sobe, e o do `body` deixa de ser transferido e
   passa a valer no próprio elemento. Aí o navegador faz o resto sozinho — um eixo em
   `hidden` obriga o outro a virar `auto`, e o `body` vira uma CAIXA DE ROLAGEM de
   verdade. `position:sticky` gruda na caixa de rolagem mais próxima; a partir daí ele
   estava grudando no body, que rola junto e leva o filme embora.

   Isso explica por que só acontecia no celular: `html{overflow-x:hidden}` mora dentro
   do `@media (max-width:768px)` lá em cima. No desktop o `html` não tem overflow, então
   quem propaga é o `body` — e propagar significa justamente NÃO virar caixa de rolagem.

   A correção é tirar do body o papel que ele não precisa ter: no celular quem já
   impede a rolagem lateral é o `html`. `clip` corta igual a `hidden` mas, ao contrário
   dele, NÃO cria caixa de rolagem. O `visible` antes fica de reserva para navegadores
   sem `clip` (Safari anterior ao 16) — nesses, o corte do `html` continua valendo. */
@media (max-width:768px){
  body{
    overflow-x:visible;
    overflow-x:clip;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   O BOTÃO "REMOVER" PRECISA PARECER BOTÃO SEM O MOUSE  (23/08/2026)
   ═══════════════════════════════════════════════════════════════════════════
   Teste de uso real: a mãe do André, num iPad, não conseguiu tirar o produto do
   carrinho — com o botão na frente dela. E o botão estava "certo" no código: tinha
   hover, tinha transição, tinha tudo. Só que NADA DISSO EXISTE NO DEDO.

   O estado de repouso era pílula branca com borda de `rgba(0,0,0,.08)` — 8% de preto,
   praticamente invisível — e texto cinza. Num aparelho com ponteiro isso é um convite
   discreto, porque o mouse passa por cima e revela o botão. Num tablet o repouso é o
   ÚNICO estado que existe, e ali ele lia como legenda, não como coisa clicável.

   Três correções, e a terceira é a que ninguém lembra:

   1) O REPOUSO PASSA A SER LEGÍVEL. Borda de 22% e texto na cor do texto. Continua
      discreto — não vira botão vermelho gritando no meio do carrinho —, mas agora
      tem contorno e peso suficientes para o olho classificar como botão.

   2) NO TOQUE ELE CRESCE PARA 45px. Tinha 25px de altura; o mínimo recomendado para
      o dedo é 44 (Apple) / 48 (Google). Não adianta parecer botão se não dá para
      acertar. E maior também comunica melhor.

   3) O HOVER SÓ VALE ONDE EXISTE PONTEIRO. Sem isso o iOS aplica `:hover` no toque e
      ele GRUDA: o botão fica vermelho depois do clique até a cliente tocar em outro
      lugar. Quem toca e vê a cor mudar e ficar acha que já removeu. O realce do toque
      passa a ser `:active`, que acende e apaga junto com o dedo. */

.woocommerce a.remove{
  border-color:rgba(0,0,0,.22)!important;
}
.woocommerce a.remove::before,
.woocommerce a.remove::after{
  color:var(--tinta)!important;
}

/* O hover é do mouse, e só dele. */
@media (hover: hover) and (pointer: fine){
  .woocommerce a.remove:hover{background:var(--rosa)!important;border-color:var(--rosa)!important}
  .woocommerce a.remove:hover::before,
  .woocommerce a.remove:hover::after{color:#fff!important}
}

/* Toque: alvo maior, e o `:hover` herdado é DESFEITO para não grudar. */
@media (hover: none){
  .woocommerce a.remove{
    padding:16px 18px 16px 16px!important;
  }
  .woocommerce a.remove::after{font-size:11px}
  .woocommerce a.remove::before{font-size:12px}
  .woocommerce table.cart th.product-remove,
  .woocommerce table.cart td.product-remove{width:132px}
  .woocommerce a.remove:hover{background:#fff!important;border-color:rgba(0,0,0,.22)!important}
  .woocommerce a.remove:hover::before,
  .woocommerce a.remove:hover::after{color:var(--tinta)!important}
}

/* O aperto acende e apaga com o dedo — em qualquer aparelho. */
.woocommerce a.remove:active{
  background:var(--rosa)!important;border-color:var(--rosa)!important;
  transition:none;
}
.woocommerce a.remove:active::before,
.woocommerce a.remove:active::after{color:#fff!important;transition:none}

/* A SEÇÃO QUE VEM DEPOIS DO FILME CHEGA PRONTA (23/08/2026, pedido do André).
   Todas as outras seções abrem com uma revelação de opacidade quando entram na tela.
   Depois do filme isso atrapalha: a peça solta e a seção sobe já ocupando a tela, mas
   com o texto ainda invisível — e meio segundo de fundo claro sem nada escrito lê como
   continuação do buraco que acabamos de tirar. Aqui ela entra colada e legível. */
.stylee-rolo + * .stylee-reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

/* ══════════════════════════════════════════════════════════════════════════
   O CHAT DA LIA NA FRENTE DE TUDO (15/10/2026)
   ══════════════════════════════════════════════════════════════════════════
   André: «O Chat LIA precisa ficar na frente de tudo». Com o celular deitado, a barra do
   menu (z-index 10001) pintava por cima da conversa: o `.lia-dock` é um contêiner fixo em
   9997 e cria a própria camada, então nem o `.chatbox` em 9998 escapava dele.
   Agora o dock e o botão «Chat» ficam acima de qualquer camada do site (a mais alta era
   o aviso de sair da conta, em 100000). O dock ocupa a tela inteira com
   `pointer-events:none`, então subir a camada não rouba clique de ninguém.
   Isto revoga a ordem de 10/08 («menu aberto é tela exclusiva», menu acima do chat): a
   regra agora é a dele, de hoje. */
.lia-dock{ z-index:100010 }
.show-chat-launcher{ z-index:100010 }

/* MENU ABERTO ESCONDE O CHAT (15/10, André: «quando abrimos o menu no mobile… a página do menu oculte o Chat
   LIA»). Com o chat acima de tudo, o botão «Chat» e o balão ficavam sobre o menu. Só se escondem — a conversa
   não fecha nem perde nada: fechado o menu, o chat volta no mesmo estado. Some e volta em fusão (nada «salta»);
   `visibility` espera o fim da fusão para sair e entra junto com ela. */
.lia-dock,
.show-chat-launcher{ transition:opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s }
/* classe repetida = o peso da regra da página da peça (body.single-product.stylee-chat-pronto), que tem
   transição própria para o balão */
/* O BALÃO SAI DE CIMA DA RAZÃO SOCIAL E DO CNPJ, no fim do rodapé (15/10, André) — o mesmo deslize do
   botão de comprar (`stylee-comprar-a-vista`), em todas as páginas. A classe vem do assets/stylee.js, e a
   transição só existe depois da primeira decisão (`stylee-chat-pronto`), para a página não abrir com o
   balão entrando e saindo. Sem `pointer-events:none`, pelo mesmo motivo de lá: mudar isso sob um dedo que
   já toca cancela o gesto de rolar. */
body.stylee-chat-pronto .show-chat-launcher{
  transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .32s cubic-bezier(.22,.61,.36,1),visibility 0s linear 0s;
}
body.stylee-rodape-a-vista .show-chat-launcher{
  transform:translateX(calc(100% + 32px))!important;
  opacity:0!important;
}
@media (prefers-reduced-motion:reduce){
  body.stylee-chat-pronto .show-chat-launcher{transition:none}
}
body.stylee-menu-aberto.stylee-menu-aberto .lia-dock,
body.stylee-menu-aberto.stylee-menu-aberto .show-chat-launcher{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transition:opacity .3s cubic-bezier(.4,0,.2,1), visibility 0s linear .3s;
}

/* ══════════════════════════════════════════════════════════════════════════
   A FOTO DO CARRINHO EM QUADRADO, INTEIRA (15/10/2026)
   ══════════════════════════════════════════════════════════════════════════
   André: «em todas as imagens dos produtos aparecem em área retangular e não em área quadrada como em todas
   as outras páginas. Ocorrendo o corte do Cinto». O carrinho desenhava a foto num retângulo em pé (78×98 no
   computador, 120×150 e 96×120 no celular) com `object-fit:cover` — e cortava o que não coubesse: o cinto,
   comprido, perdia as pontas. As fotos são quadradas, de fundo branco: a área passa a ser QUADRADA (a largura
   de cada tela fica; a altura acompanha) e a foto entra INTEIRA. */
.woocommerce table.cart td.product-thumbnail img,
.woocommerce table.cart img{
  height:auto!important;aspect-ratio:1/1;object-fit:contain!important;background:#fff!important;
}
/* SEM LISTRAS NO CELULAR (15/10, André: «o segundo produto possui uma leve alteração de cor na base do produto e
   nas informações»). É do WooCommerce (woocommerce-smallscreen.css): em tela pequena ele pinta as linhas PARES
   da tabela com rgba(0,0,0,.025) — a 2ª, a 4ª peça… ganhavam um bege mais escuro. Todas as peças, o mesmo fundo. */
.woocommerce table.shop_table_responsive tr:nth-child(2n) td,
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td{background-color:transparent!important}

/* O RODAPÉ NO CELULAR EM DUAS COLUNAS (15/10/2026, revisão geral pedida pelo André). Abaixo de 420 px ele virava
   UMA coluna: marca, Navegar (5), Categorias (5), Falar com a gente — 1.167 px de preto, que somados ao «Sem letra
   miúda» davam ~1.800 px no fim de toda página. Navegar e Categorias lado a lado (como no tablet); «Falar com a
   gente» na largura toda, porque o número do WhatsApp é comprido. A linha da empresa sobe ao piso de 12 px. */
@media (max-width:420px){
  .stylee-footer__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .stylee-footer__grade > .stylee-footer__marca,
  .stylee-footer__grade > div:last-child{grid-column:1/-1}
}
.stylee-footer__empresa{font-size:12px}

/* ══════════════════════════════════════════════════════════════════════════
   A ABERTURA 3D VOLTA AO CELULAR E AO TABLET (05/11/2026, André: «no iPhone, no iPad e no Chrome do
   Samsung o chat entra só com fade; no navegador da Samsung e no PC entra como planejamos»)
   ══════════════════════════════════════════════════════════════════════════
   Em 20/08 a abertura 3D saiu do toque porque partia o balão ao meio no iPhone X. O navegador da Samsung não
   se declara «toque» nesta consulta e ficou com o 3D — por isso só ele animava. O que partia a caixa eram o
   `filter:blur()` junto com o giro de 80° e a perspectiva sem camada própria. Aqui volta o mesmo gesto (o balão
   tomba para trás e assenta, com um respiro no fim), sem blur, com giro menor e numa camada isolada
   (`backface-visibility` + `translateZ(0)`): é a receita que o Safari rasteriza inteira. */
@keyframes liaAbreToque{
  0%  { opacity:0; transform:perspective(900px) translate3d(0,70px,0) rotateX(38deg) scale(.96) }
  62% { opacity:1; transform:perspective(900px) translate3d(0,-5px,0) rotateX(-6deg) scale(1.005) }
  100%{ opacity:1; transform:perspective(900px) translate3d(0,0,0) rotateX(0) scale(1) }
}
/* A PISCADA NO 1º QUADRO (05/11/2026, André no iPhone: «no início da animação do balão dá uma piscada rápida»).
   O Safari criava a camada 3D do balão no instante em que a animação começava — e a criação aparece como um
   clarão. A camada passa a existir desde o balão FECHADO (invisível), e a animação só a move. */
@media (hover:none) and (pointer:coarse){
  .chatbox{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:transform,opacity;
    transform-origin:bottom center;
  }
}
@media (hover:none) and (pointer:coarse){
  .chatbox.active{
    animation:liaAbreToque .62s cubic-bezier(.22,.9,.3,1) both;
    transform-origin:bottom center;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:transform,opacity;
  }
}
@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  .chatbox.active{ animation:liaSobe .28s ease-out both }
}