/* ═══════════════════════════════════════════════════════════════════════════
   STYLEE 2.0 — camada editorial
   28/08/2026

   POR QUE UM ARQUIVO NOVO, E NÃO UMA EDIÇÃO NO style.css

   O style.css tem 9.137 linhas e 800 `!important`. O título do produto é
   redefinido em QUATRO lugares (402, 949, 2623, 3626), cada um contradizendo o
   anterior — inclusive uma tentativa de Playfair na 949, revertida depois sem
   apagar a regra. O arquivo guarda quatro opiniões e entrega a última. Editar
   ali é escolher qual das quatro mexer e descobrir o efeito na tela.

   Esta camada carrega DEPOIS e diz a intenção UMA vez. Removê-la é apagar um
   arquivo — não desfazer um patch espalhado por nove mil linhas.

   `!important` aqui não é vício. As regras que estou substituindo usam
   `!important`; sem ele esta camada perderia em silêncio. Uma trava só serve se
   ganhar.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. A ESCALA ────────────────────────────────────────────────────────────
   As cores da marca ficam: --preto, --tinta, --rosa, --areia, --cinza são a
   identidade. O que faltava era escala de TAMANHO e de ESPAÇO — hoje cada regra
   escolhe seu número, e é por isso que a página não tem cadência. */
:root {
  --t-micro: .655rem;
  --t-mini:  .8rem;
  --t-base:  1rem;
  --t-med:   1.15rem;
  --t-g:     clamp(1.5rem, 2.6vw, 2.1rem);
  --t-gg:    clamp(2.1rem, 5vw, 4rem);
  --t-ggg:   clamp(3rem, 9vw, 8.5rem);   /* a voz de capa */

  --e1: 6px;  --e2: 10px; --e3: 18px; --e4: 30px;
  --e5: 48px; --e6: 80px; --e7: 128px;

  /* Nenhum neutro é cinza puro: todos puxam para o quente da --areia, que é o
     que faz papel parecer papel e não tela desligada. */
  --papel: #fdfcfa;
  --fumo:  #57514c;
  --fio:   rgba(10, 10, 10, .09);
  --rosa-luz: #f4e7eb;
}


/* ── 2. A CAPA DA LOJA ──────────────────────────────────────────────────────
   `<h1 class="page-title">Loja</h1>` sai em 48px de Playfair: o maior tipo da
   página diz o nome do sistema, não o da peça. Numa vitrine, a palavra «Loja»
   não é informação — a cliente sabe onde clicou.

   Ele não some (leitor de tela e SEO continuam achando). Vira sobrescrito, e o
   lugar de manchete passa a ser ocupado pela peça. */
body.post-type-archive-product .page-title {
  font-family: var(--ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 500 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: var(--cinza) !important;
  margin: 0 0 var(--e3) !important;
  line-height: 1 !important;
}

/* ── NA CATEGORIA, O TÍTULO É O ASSUNTO — NÃO UM RÓTULO ────────────────────
   Corrigido em 28/08. Eu tinha listado `body.tax-product_cat` junto com a loja e
   reduzido «Bolsas» ao mesmo sussurro de «Loja»: 10,48px, cinza, maiúsculas, 1px
   de altura. Invisível.

   Na loja o rótulo é palavra de sistema e sumir é ganho — a cliente sabe onde
   clicou. Na categoria é o contrário: ela veio de um botão do mosaico ou do mega
   menu, e o nome é a ÚNICA confirmação de que chegou no lugar certo. Apagar isso
   é tirar a orientação junto com o enfeite.

   E aqui a Playfair grande é segura, ao contrário da página da peça: nomes de
   categoria têm uma palavra («Bolsas», «Mochilas», «Pochetes»), nunca as 48
   letras de um nome de cadastro fiscal. */
body.tax-product_cat .page-title {
  font-family: var(--display) !important;
  font-size: clamp(1.9rem, 4vw, 3.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  color: var(--preto) !important;
  margin: 0 0 var(--e4) !important;
  display: block !important;
  height: auto !important;
}


/* ── 3. A GRADE ─────────────────────────────────────────────────────────────
   O GRID VOLTA A SER O DO TEMA (André, 28/08). Só a goteira fica.

   Eu tinha feito duas coisas aqui: baixar para 3 colunas e dar a uma peça a cada
   sete o dobro de área, para criar um passo de revista. As duas saem. Não é que
   estivessem erradas em tese — é que ele viu a página inteira e eu vi o card, e
   quem vê a página inteira decide layout.

   Fica só o espaço entre os cards, que ele pediu para manter — e depois pediu
   mais sutil duas vezes (28/08): 24,6px, depois ~16px, agora ~11px na largura de
   trabalho — e 5px no celular. Sutil aqui é funcional, não tímido: a goteira só
   precisa dizer «são peças separadas», e a partir do momento em que diz, cada
   pixel a mais é peso morto entre as fileiras. Abaixo de uns 4px ela para de
   dizer isso e volta a parecer a vitrine colada com uma falha no meio — é esse o
   piso, e ainda não chegamos nele.
   Por isso esta regra declara APENAS `gap`: se ela também declarasse as colunas, continuaria
   sobrescrevendo o tema — e «voltar o grid» viraria «voltar o grid, menos o
   pedaço que o Claude achou melhor». */
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
.stylee-vitrine ul.products,
body.single-product div.product .related ul.products,
body.single-product div.product .up-sells ul.products,
body.woocommerce-cart .cross-sells ul.products {
  gap: clamp(5px, 1.4vw, 8px) !important;
}
@media (min-width: 900px) {
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  .stylee-vitrine ul.products,
  body.single-product div.product .related ul.products,
  body.single-product div.product .up-sells ul.products,
  body.woocommerce-cart .cross-sells ul.products {
    gap: clamp(8px, .85vw, 14px) !important;
  }
}


/* ── 4. O CARD ──────────────────────────────────────────────────────────────
   A peça que mais se repete: 12 por página de loja, 8 na home, mais os
   relacionados. Um milímetro aqui vale mais que uma seção inteira em qualquer
   outro lugar.

   O defeito medido: o nome tem 13px e o preço tem 13px. Mesmo corpo, mesmo
   peso, mesma cor — não há hierarquia e o olho não sabe onde pousar. A correção
   é inverter: o NOME cresce e alivia o peso; o PREÇO encolhe e vira dado.
   Zara, COS e Arket fazem assim, e o motivo é comercial: quem navega escolhe
   pela peça e confirma pelo preço, nessa ordem. */

.woocommerce ul.products li.product {
  position: relative;
  background: var(--papel);
  /* QUINA VIVA, e a escolha é minha (o André deixou a critério).
     Com espaço em volta, o canto reto lê como chapa de revista; arredondado
     adoça, e este projeto já registrou que a marca não é doce — o selo de
     escassez segue a mesma regra. Coerência importa mais que o raio. */
  border: 1px solid var(--fio);
  border-radius: 0;
  transition: border-color .55s var(--ease);
}
.woocommerce ul.products li.product:hover { border-color: rgba(10, 10, 10, .2); }

.woocommerce ul.products li.product > a.woocommerce-loop-product__link {
  display: block;
  /* A BASE DO CARD, medida pixel a pixel.

     Ela ocupava 169px, e o maior pedaço não era nenhum dos textos: eram 44,9px
     de VAZIO depois das bolinhas — 26px de `padding-bottom` que o tema põe no
     `li.product` mais 18px que eu tinha somado aqui, sem saber dos outros 26.
     Conferi que aquele espaço não guarda nada: o card não tem botão «Comprar», e
     a navegação de fotos que vem depois é `position: absolute` e não ocupa fluxo.

     Fica 14px, igual à folga acima do nome. Simetria em cima e embaixo é o que
     faz o bloco parecer assentado; encostar nas bolinhas o faria parecer
     cortado, e sobrar 45px o faz parecer esquecido. */
  padding-bottom: 14px;
}

/* Os 26px do tema saem só nos contextos de vitrine — em outros lugares aquele
   respiro pode estar segurando algo que eu não vi. */
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
.stylee-vitrine ul.products li.product,
body.single-product div.product .related ul.products li.product,
body.single-product div.product .up-sells ul.products li.product {
  padding-bottom: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
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-family: var(--ui) !important;
  font-size: var(--t-base) !important;    /* de 13px para 16px */
  font-weight: 400 !important;            /* de 500 — o nome cabe, não grita */
  line-height: 1.3 !important;
  letter-spacing: .002em !important;
  color: var(--tinta) !important;
  margin: 14px var(--e4) 3px !important;

  /* Os nomes vêm do cadastro fiscal do Bling e são longos («Bolsa Box Feminina
     Acrílico Estampa Rosto Moderna»). Duas linhas fixas: reticências escondem o
     excesso sem cortar palavra no meio, e a altura travada impede os cards de
     dançarem — numa grade colada, desalinhamento aparece muito. */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.woocommerce ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price {
  font-family: var(--ui) !important;
  font-size: var(--t-mini) !important;    /* MENOR que o nome — a inversão */
  font-weight: 500 !important;
  letter-spacing: .055em !important;
  color: var(--fumo) !important;
  font-variant-numeric: tabular-nums;     /* os preços alinham na coluna */
  margin: 0 var(--e4) !important;
  display: block;
}
.woocommerce ul.products li.product .price ins {
  color: var(--rosa) !important;
  font-weight: 600;
}


/* ── 5. AS AMOSTRAS DE COR ─────────────────────────────────────────────────
   Eu tinha transformado as bolinhas numa barra contínua sob a foto. O André
   reprovou — «gostava mais da abordagem das bolinhas, que era mais sutil» — e
   ele está certo: a barra é informação virando ornamento, e numa marca que se
   sustenta em sutileza o ornamento é o que a derruba.

   Então esta seção NÃO redesenha nada. O tema já desenha bem (13px, anel
   interno, e um brilho rosa no hover, linha 8215); o que estava faltando era só
   o alinhamento ao novo recuo do card. Tirar código meu foi a correção. */
.woocommerce ul.products li.product .stylee-cores {
  margin: 8px var(--e4) 0 !important;
}


/* ── 6. O SELO DE ESCASSEZ ──────────────────────────────────────────────────
   `.stylee-ultima` já existia como texto solto embaixo do preço. É a única
   informação do card que legitimamente tem pressa — vira etiqueta, sobre a
   foto, e é o único rosa da vitrine. Canto vivo: arredondado adoça, e a marca
   não é doce.

   ONDE ESTE SELO FICA É DECIDIDO SETE VEZES NO style.css: linhas 961, 3695,
   3838, 3961, 5907 e 6044, oscilando entre 10px e 12px. Ninguém apagou; todos
   acrescentaram. A que vence é a 6044, que traz `body.post-type-archive-product`
   na frente e por isso tem mais especificidade que uma regra minha começando em
   `.woocommerce` — mesmo carregando depois.

   Então repito o prefixo de `body`. Não por gosto: é o preço de entrar num
   arquivo onde a especificidade virou a moeda. */
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,
.woocommerce ul.products li.product .stylee-ultima {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2;
  background: var(--rosa);
  color: #fff;
  font-family: var(--ui);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 11px;
  margin: 0;
  line-height: 1;
  border-radius: 0;
}


/* ── 6b. O PARCELAMENTO ────────────────────────────────────────────────────
   «4x de R$ 67,48 sem juros» e «R$ 269,90» são o mesmo dinheiro e não são a
   mesma decisão. Mas a linha só ajuda enquanto for discreta: em corpo grande
   ela vira anúncio de financeira e derruba tudo o que a página construiu.

   Fica menor que o preço e em cinza — quem já decidiu não a lê, e quem estava
   hesitando encontra. O número vem da configuração do PagBank, nunca escrito à
   mão: ver o comentário no mu-plugin. */
.woocommerce ul.products li.product .stylee-v2-parcela {
  display: block;
  font-family: var(--ui);
  font-size: .69rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--cinza);
  font-variant-numeric: tabular-nums;
  margin: 2px var(--e4) 0;
  line-height: 1.3;

  /* O MESMO RECUO INTERNO DAS IRMÃS (André, 28/08: «alinhar com o nome, preço e
     bolinhas»).

     As quatro caixas já começavam no mesmo x — o desalinhamento era do TEXTO: o
     tema dá `padding: 0 clamp(12px,1.1vw,18px)` ao nome, ao preço e às bolinhas,
     e a minha linha nascia com padding zero. Catorze pixels à esquerda de tudo,
     invisíveis no código e óbvios na tela.
     A expressão é copiada do tema de propósito: um `14px` fixo aqui alinharia
     nesta largura e desalinharia em qualquer outra. */
  padding: 0 clamp(12px, 1.1vw, 18px);
}


/* ── 7. A FOTO ──────────────────────────────────────────────────────────────
   A segunda imagem no hover já existia; faltava TEMPO. Troca seca parece falha
   de carregamento; com 900ms e o --ease que o tema já define, parece intenção.
   O zoom fica em 1.04 — o bastante para o olho registrar, pouco o bastante para
   ninguém apontar. */
.woocommerce ul.products li.product .stylee-pista {
  display: block;
  overflow: hidden;
  background: var(--areia);
}
.woocommerce ul.products li.product .stylee-pista img {
  transition: transform 1.1s var(--ease), opacity .8s var(--ease) !important;
}
.woocommerce ul.products li.product:hover .stylee-pista img { transform: scale(1.04); }


/* ── 8. AS SEÇÕES ───────────────────────────────────────────────────────────
   A Playfair já é a voz da marca; ela só está falando baixo. Em corpo grande,
   serifa de alto contraste pede entrelinha curta e letra apertada — sem isso
   ela lê como texto, não como manchete.

   E o ritmo é assimétrico de propósito: mais ar ANTES de uma seção do que
   depois. O olho lê a folga de cima como «começou algo novo»; espaçamento
   uniforme não diz nada. */
.stylee-titulo {
  font-size: var(--t-gg) !important;
  line-height: 1.03 !important;
  letter-spacing: -.02em !important;
  text-wrap: balance;
  margin: 0 0 var(--e3) !important;
}
.stylee-lead {
  font-size: var(--t-med);
  line-height: 1.6;
  color: var(--fumo);
  max-width: 50ch;
  text-wrap: pretty;
}
.stylee-eyebrow {
  font-size: var(--t-micro) !important;
  letter-spacing: .26em !important;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cinza);
  margin-bottom: var(--e2) !important;
}
/* O RESPIRO MAIOR É SÓ DA HOME (corrigido em 28/08, André: «tem um excesso no
   topo da página, mais que na v1»).

   Eu tinha subido o `padding-top` de TODA seção para até 148px. Na home isso é
   ritmo: as seções contam uma história e a folga de cima diz «começou algo
   novo». Numa página interna o conteúdo começa de imediato, e a mesma folga —
   somada ao cabeçalho fixo de 104px — punha o produto a 247px do topo. Vira
   distância, não respiro. */
/* SIMÉTRICO, E MENOR (André, 28/08: «centralizar os títulos dos blocos entre os
   blocos… espaçamento grande entre os blocos»).

   Eu tinha posto 142,67px acima do conteúdo e 90,79 abaixo. A ideia era ritmo
   assimétrico — mais ar antes de uma seção do que depois, para o olho ler a folga
   de cima como «começou algo novo». Numa página de leitura contínua isso
   funciona; numa home em que os blocos são fotos de tela cheia, não: cada seção
   fica pendurada no topo da própria faixa, e o título nunca está no meio do
   espaço que ocupa.

   Simétrico resolve as duas queixas de uma vez — o conteúdo passa a ficar
   centrado na sua faixa, e 84px valem menos que 142. Entre duas seções separadas
   por banner o vão cai de 233px (90+142) para 168.

   Os vãos ENTRE blocos já eram zero: as seções encostam nos banners. Todo o
   espaçamento que se vê é interno, e é por isso que mexer aqui resolve. */
body.home .stylee-secao,
body.front-page .stylee-secao {
  padding-top: clamp(48px, 5.5vw, 84px) !important;
  padding-bottom: clamp(48px, 5.5vw, 84px) !important;
}

/* E A SEÇÃO ANTES DELE TAMBÉM (André, 28/08: «espaçamento desnecessário»).

   O filme abre em tela cheia e sticky. Uma faixa de 71px acima dele não separa
   dois blocos — separa um bloco de uma tela inteira que está prestes a tomar
   conta, e o olho lê como buraco. É o mesmo raciocínio da folga DEPOIS dele, só
   que do outro lado.

   O seletor usa :has(+ .stylee-rolo) e não a classe da seção de categorias: assim
   a regra segue o FILME, e continua valendo se um dia ele mudar de lugar na home.
   Amarrar na classe seria descrever o layout de hoje.

   Se um dia entrar um título anunciando o filme — o André levantou a hipótese —,
   este número volta a subir: aí passa a haver o que separar.

   ZERADO EM 03/09/2026, a pedido dele. A folga de 26px que sobrou da rodada
   anterior ainda aparecia como uma faixa clara entre o último cartão e o filme:
   os cartões terminam em foto escura, o filme começa em tela cheia, e no meio
   sobrava o fundo da página. Faixa de fundo entre dois blocos escuros não separa
   — ela interrompe. Sem nada, o filme sobe direto do último cartão, que é o
   corte que o olho espera. */
body.home .stylee-secao:has(+ .stylee-rolo) {
  padding-bottom: 0 !important;
}

/* A SEÇÃO DEPOIS DO FILME CHEGA COLADA.
   Não é escolha estética: a memória do projeto registra que o filme solta a
   página no último quadro e «a seção seguinte chega sem animação de entrada,
   colada». Uma faixa de 84px ali reabre o buraco que essa regra existe para
   fechar. */
body.home .stylee-rolo + .stylee-secao {
  padding-top: clamp(28px, 3vw, 44px) !important;
}
/* Na página da peça o conteúdo encosta perto da barra de propósito: a foto é a
   primeira coisa que a cliente veio ver. */
body.single-product .stylee-secao {
  padding-top: clamp(22px, 2.8vw, 42px) !important;
}


/* ── 9. QUEM NÃO QUER MOVIMENTO, NÃO RECEBE ────────────────────────────────
   Não é acessibilidade de formulário: quem liga essa opção costuma ligar por
   enjoo ou vertigem, e um zoom lento numa grade de 12 fotos é exatamente o que
   provoca. */
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product .stylee-pista img,
  .woocommerce ul.products li.product .stylee-cores {
    transition: none !important;
  }
  .woocommerce ul.products li.product:hover .stylee-pista img { transform: none !important; }
  .woocommerce ul.products li.product:hover .stylee-cores { height: 3px; }
}


/* ── 10. NO CELULAR, O CARD É OUTRO PROJETO ────────────────────────────────
   Duas colunas: 30px de recuo interno comeriam metade da largura útil do texto
   num card de 183px. Tudo encolhe junto — e a escada nome > preço > parcela
   continua de pé, que é o ponto: no aparelho onde a maioria compra, achatar os
   três no mesmo corpo desfaria a única coisa que esta camada existe para fazer. */
@media (max-width: 899px) {
  /* OS MESMOS PREFIXOS DE `body` DA REGRA DE DESKTOP.
     Sem eles esta regra perde para a minha própria: as duas usam `!important`, e
     entre duas declarações `!important` quem decide é a especificidade, não a
     media query nem a ordem. A de cima tem `body.post-type-archive-product` e
     ganha — no celular o nome ficava com 16px e 30px de recuo, sobrando 128px de
     linha útil num card de 188px.
     Errei aqui exatamente o que diagnostiquei no arquivo deles. */
  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,
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--t-mini) !important;
    margin: 10px var(--e3) 3px !important;
    min-height: 2.6em;
  }
  /* O PRECO PRECISA ENCOLHER JUNTO, SENAO A INVERSAO SOME.
     Com o nome em --t-mini, deixar o preco tambem em --t-mini devolve os dois ao
     mesmo corpo — que e exatamente o defeito que esta camada existe para
     consertar, e no aparelho onde a maioria compra. */
  body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  .woocommerce ul.products li.product .price {
    font-size: .715rem !important;
    margin: 0 var(--e3) !important;
  }
  .woocommerce ul.products li.product .stylee-cores { margin: 7px var(--e3) 0 !important; }
  .woocommerce ul.products li.product .stylee-v2-parcela {
    font-size: .64rem;
    margin: 2px var(--e3) 0;
  }
  /* 10px em cima e 10 embaixo: a mesma simetria do desktop, na escala de um
     card de 183px. */
  .woocommerce ul.products li.product > a.woocommerce-loop-product__link { padding-bottom: 10px; }
  /* Hover não existe no toque; o zoom só atrapalharia a rolagem. */
  .woocommerce ul.products li.product:hover .stylee-pista img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. A PÁGINA DA PEÇA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A FOTO GANHA A LARGURA QUE MERECE ─────────────────────────────────────
   O tema divide 1.05fr / 1fr — praticamente meio a meio. Numa loja de moda a
   decisão acontece na foto: no detalhe do fecho, da alça, da textura do PU. A
   coluna de compra tem seis elementos e sobra espaço; a foto tem um e falta.
   1.35fr / 1fr dá ~57% para a imagem sem apertar o formulário. */
@media (min-width: 1024px) {
  body.single-product.woocommerce div.product {
    grid-template-columns: 1.35fr 1fr !important;
  }
}

/* ── O NOME DA PEÇA VOLTA PARA A PLAYFAIR ──────────────────────────────────
   Isto não é gosto meu: é a intenção do próprio tema, na linha 1103, que define
   `.product_title` com `var(--display)` até 2.4rem.

   O que aconteceu foi um acidente de escopo. A regra da linha 2623 foi escrita
   para o título dos CARDS e listou `.product_title` junto, forçando `var(--ui)`
   com `!important`. A 2632 então reduziu o corpo para compensar, com o
   comentário «a Jost desenha maior no mesmo corpo, então baixa um pouco». Viram
   o sintoma do tamanho; não viram que a FONTE tinha mudado sem ninguém pedir.

   Na vitrine a Jost continua certa — nome pequeno, repetido doze vezes, tem de
   ser neutro. Aqui é uma peça só, ocupando a página: é o lugar da voz da marca. */
body.single-product.woocommerce div.product .product_title {
  font-family: var(--display) !important;
  /* O teto desce de 2.9 para 2.5rem: com o nome de cadastro do Bling («Bolsa Box
     Feminina Acrílico Estampa Rosto Moderna», 48 caracteres) a manchete ocupava
     três linhas e 150px, e empurrava o botão de comprar para y=784 — visível num
     monitor de 900, abaixo da dobra num notebook de 768.
     O conserto de verdade não é tipográfico: é o nome comercial curto na meta
     `_stylee_*`, que já está decidido e não implementado. Enquanto ele não vem,
     a manchete cede quatro pixels de corpo. */
  font-size: clamp(1.65rem, 3vw, 2.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.015em !important;
  color: var(--preto) !important;
  text-wrap: balance;
  margin: 0 0 var(--e3) !important;
}

/* ── O PREÇO DEIXA DE ESTAR COLADO NO NOME ─────────────────────────────────
   Havia 6px entre os dois. O preço é a segunda informação da página e estava
   grudado na primeira; nessa distância o olho lê os dois como um bloco só. */
/* `.summary` NO SELETOR, e não `div.product` (corrigido em 28/08).

   Os produtos relacionados moram DENTRO de `div.product`, então esta regra os
   pegava junto: o preço dos cards relacionados saía com 25,6px em preto, quando
   na loja ele tem 12,8px em cinza. Duas páginas mostrando o mesmo card de dois
   jeitos é exatamente a falta de unidade que o André apontou.
   O `.summary` cobre também o preço da variação, que é filho dele. */
body.single-product.woocommerce div.product .summary p.price,
body.single-product.woocommerce div.product .summary span.price {
  font-family: var(--ui) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: var(--preto) !important;
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px !important;
  line-height: 1.15 !important;
}

/* ── A PARCELA, AQUI, TEM OUTRO PESO ───────────────────────────────────────
   No card ela é sussurro: a cliente está varrendo e não decidindo. Aqui ela é
   argumento, e um argumento em 11px não é lido. Sobe para 0.9rem e ganha o
   «ou X à vista» ao lado — porque quem paga à vista precisa ver que a opção
   existe, e quem parcela precisa ver que não paga a mais por isso. */
body.single-product.woocommerce div.product .stylee-v2-parcela--peca {
  display: block;
  font-family: var(--ui);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .015em;
  color: var(--fumo);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--e4);
  padding: 0;
  line-height: 1.5;
}
body.single-product.woocommerce div.product .stylee-v2-parcela--peca .stylee-v2-parcela__txt {
  color: var(--tinta);
  font-weight: 500;
}
body.single-product.woocommerce div.product .stylee-v2-parcela--peca .stylee-v2-parcela__ou {
  color: var(--cinza);
}
/* o preço no Pix (22/10) é o melhor preço da peça: em destaque, na tinta de acento da casa */
body.single-product.woocommerce div.product .stylee-v2-parcela--peca .stylee-v2-parcela__ou strong {
  color: var(--rosa, #bf2a59);
  font-weight: 600;
}
body.single-product.woocommerce div.product .stylee-v2-parcela--peca[hidden] { display: none; }

/* ── O BOTÃO DE COMPRAR ────────────────────────────────────────────────────
   44,5px de altura é a medida de um botão de formulário. Este não é: é a única
   ação da página, e o único momento em que a loja pede alguma coisa. 54px é a
   altura em que ele para de pedir licença — e continua acima dos 44px mínimos
   de área de toque com folga. */
body.single-product.woocommerce div.product .single_add_to_cart_button {
  min-height: 54px !important;
  font-size: .8rem !important;
  letter-spacing: .2em !important;
  border-radius: 0 !important;   /* a mesma quina viva do card */
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
body.single-product.woocommerce div.product .single_add_to_cart_button:active {
  transform: translateY(1px);
}

/* ── O SELETOR DE QUANTIDADE SOBE JUNTO ────────────────────────────────────
   André, 28/08: «gostava mais quando era a mesma altura do botão de quantidade,
   pois no celular fica alinhado e evita o TOC».

   O motivo dele é alinhamento, não tamanho — então resolvo pelo motivo: em vez
   de descer o botão para os 44px do seletor, subo o seletor para os 54 do botão.
   Alinha igual, e a única ação da página continua tendo o corpo de uma ação.

   Os três filhos precisam da altura explícita: o `.quantity` é um grid, e num
   grid a altura do container não desce para os filhos sozinha — ficariam 44px
   centrados num trilho de 54, que é desalinhamento com outro nome. */
body.single-product.woocommerce div.product .quantity {
  /* `box-sizing` NÃO É DETALHE AQUI: sem ele a borda de 1px soma FORA da altura
     e o seletor mede 56 contra os 54 do botão. Dois pixels que ninguém
     consegue nomear olhando, e que é exatamente o desalinhamento que o André
     enxerga. */
  box-sizing: border-box !important;
  height: 54px !important;
  min-height: 54px !important;
}
body.single-product.woocommerce div.product .quantity input.input-text,
body.single-product.woocommerce div.product .quantity .stylee-qtd__btn {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
}
body.single-product.woocommerce div.product .single_add_to_cart_button {
  box-sizing: border-box !important;
  height: 54px !important;
  /* Sem quebra de linha: no celular o rótulo passava para duas linhas e o botão
     ia a 60px, desalinhando de novo pelo outro lado. */
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ── O RITMO DA COLUNA DE COMPRA ───────────────────────────────────────────
   As folgas estavam em 6, 20, 16, 26 e 20px — cinco valores diferentes, nenhum
   deles escolhido em relação aos outros. Uma escala só faz a coluna descer com
   cadência em vez de aos trancos. */
body.single-product.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--t-base);
  line-height: 1.68;
  color: var(--fumo);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0 0 var(--e4);
}
body.single-product.woocommerce div.product form.variations_form { margin-bottom: var(--e5) !important; }
body.single-product.woocommerce div.product .containerCalculator { margin-bottom: var(--e4) !important; }
body.single-product.woocommerce div.product .product_meta {
  border-top: 1px solid var(--fio);
  padding-top: var(--e3);
  font-size: var(--t-mini);
  color: var(--cinza);
}

@media (max-width: 1023px) {
  /* Numa coluna só, a foto vem primeiro e o nome logo abaixo: encolher a
     manchete evita que ela empurre o preço para fora da primeira tela. */
  body.single-product.woocommerce div.product .product_title { font-size: 1.6rem !important; }
  body.single-product.woocommerce div.product p.price { font-size: 1.35rem !important; }
  body.single-product.woocommerce div.product .stylee-v2-parcela--peca {
    font-size: .82rem;
    margin-bottom: var(--e3);
  }
  /* ── A PARCELA PRECISA DE `order` (André, 28/08: «principalmente a ordem dos
     campos»).

     No celular a `.summary` da peça variável é um FLEX com ordem explícita:
     1 nome, 2 preço, 3 aviso de estoque, 4 formulário e frete, 5 descrição,
     6 meta. Quem não declara `order` cai no zero — que vem ANTES do 1. Minha
     linha de parcelamento estava aparecendo acima do nome do produto: a cliente
     via «4x de R$ 48,75» antes de saber de qual peça se tratava.

     Ordem 3 a coloca colada no preço, que é o único lugar onde ela faz sentido.
     Só isto: a ordem do tema já está certa — cor primeiro, botão logo depois,
     frete e descrição embaixo — e não mexo nela. */
  body.single-product.woocommerce div.product.product-type-variable .stylee-v2-parcela--peca {
    order: 3 !important;
  }
  /* E O AVISO DE ESTOQUE DESCE PARA DEPOIS DELA (André, 28/08, olhando o
     aparelho: «o parcelamento deveria ficar embaixo do preço no mobile também,
     seguido do "Apenas 1 em estoque"»).

     A pílula é INJETADA POR JAVASCRIPT — não está no HTML que o servidor manda —
     e o tema a declara em `order: 3`, o mesmo da parcela. Empate em `order` é
     resolvido pela ordem do DOM, e o JS a insere antes. Por isso a medição do
     HTML estático mostrava a ordem certa e o celular mostrava a errada: eram
     dois documentos diferentes.

     Empurrar para 4 a coloca no mesmo grupo do formulário, e ali o desempate por
     DOM trabalha a favor — ela nasce colada ao preço, muito antes do formulário.
     A sequência final é a que ele pediu: preço, parcela, estoque, cor, botão.

     Ordem certa também no argumento: «4x sem juros» remove a objeção de preço, e
     só então «apenas 1 em estoque» dá o motivo de decidir agora. Ao contrário, a
     urgência chega antes de a peça ficar acessível. */
  body.single-product.woocommerce div.product.product-type-variable .stylee-estoque-inline {
    order: 4 !important;
  }
  /* «ADICIONAR AO CARRINHO» com 2,56px de entreletra não cabe em 197px. O texto
     aperta, o botão continua com a mesma altura do seletor. */
  body.single-product.woocommerce div.product .single_add_to_cart_button {
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. OS BANNERS NO CELULAR — REVERTIDO
   ═══════════════════════════════════════════════════════════════════════════

   Eu tinha recortado os banners de 16:9 para 4:3 no celular, para eles deixarem
   de ser tarja de 211px numa tela de 812. A intencao estava certa e a execucao
   estava errada, do jeito que so aparece no aparelho:

     «Bolsas que transformam seu look»  virou  «olsas que ansformam seu look»
     «Jeans, estilo e leveza…»          virou  «ans, estilo e veza…»

   OS BANNERS TEM TIPOGRAFIA EMBUTIDA NA IMAGEM. Recorte lateral em foto come
   fundo; em arte com texto, come PALAVRA. E eu sabia que estava recortando as
   cegas — escrevi isso no comentario anterior e mesmo assim escolhi o valor.
   «Conservador» nao salva quem esta apostando: 4:3 tira 25% da largura, e 25%
   da largura de uma frase e a frase quebrada.

   A regra que fica: enquanto a arte carregar texto, a moldura acompanha a arte.
   Ganhar presenca no celular exige uma VERSAO VERTICAL da peca, feita no
   Photoshop com o texto recomposto — nao um recorte por CSS.

   Volta a ser o comportamento da V1: a imagem inteira, na proporcao dela. */
/* ═══════════════════════════════════════════════════════════════════════════
   13. A CATEGORIA VAZIA
   ═══════════════════════════════════════════════════════════════════════════

   Seis categorias existem e três estão sem peça: carteiras, cintos e porta-
   celular. Não é descuido — são prateleiras que a loja vai ter e ainda não tem.

   O TEXTO JÁ ESTÁ CERTO e não encosto nele: «Em breve — as peças de Carteiras
   estão a caminho da vitrine». É a mesma doutrina que a LIA segue no atendimento,
   e ela custou caro para ser aprendida: «não temos AGORA» é temporário e a
   cliente volta; «não trabalhamos com isso» é definitivo e ela não volta nunca.
   Quem escreveu esta tela acertou.

   O que está errado é a HIERARQUIA: a frase principal saiu no mesmo cinza do
   rótulo que a anuncia. O recado e a etiqueta do recado com o mesmo peso — o
   olho não sabe qual dos dois é a informação. */
.stylee-vazio p {
  color: var(--tinta) !important;
  font-size: var(--t-med) !important;
  line-height: 1.5 !important;
  max-width: 34ch;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: pretty;
}

/* O botão daqui é a única saída da página: leva para a vitrine cheia. Ganha a
   mesma quina viva e a mesma presença do «adicionar ao carrinho» — coerência
   entre telas vale mais que variedade. */
.stylee-vazio .stylee-btn {
  /* SEM `min-height` AQUI. Eu tinha posto 48px e o botão foi para 80: o tema já
     dá padding vertical generoso, e o mínimo somou em cima em vez de substituir.
     Resultado: a saída secundária desta página ficou mais alta que o «adicionar
     ao carrinho» da página da peça, que tem 54 — a mesma inversão de hierarquia
     que esta camada existe para consertar, cometida por mim duas telas depois.
     A altura natural do tema já estava boa; o que faltava era a quina. */
  border-radius: 0 !important;
  letter-spacing: .18em;
}

/* ── O TEXTO DA CATEGORIA ──────────────────────────────────────────────────
   Numa prateleira vazia ele é o ÚNICO conteúdo da página, e estava em cinza
   claro, alinhado à esquerda, com corpo de nota de rodapé. É texto de venda —
   escrito para explicar o que a linha vai ser — e merece ser lido. */
.stylee-cat-texto p {
  color: var(--fumo) !important;
  font-size: var(--t-base) !important;
  line-height: 1.7 !important;
  text-wrap: pretty;
}
body.tax-product_cat .stylee-cat-texto {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. O NOME DA CATEGORIA PRECISA SER LEGÍVEL SOBRE QUALQUER FOTO
   ═══════════════════════════════════════════════════════════════════════════

   Medido na estrutura: o `.stylee-cat__txt` é absoluto, colado nos 116px de baixo
   do card, e o nome sai em BRANCO com z-index 2 — direto sobre a foto. A moldura
   não tem gradiente nem `::after`. Nada protege o texto.

   Isso funciona enquanto o pé da foto for escuro. As artes da marca são claras —
   rosa, azul, bege —, e nessas o nome vai da fronteira do legível ao invisível.
   Texto branco sobre foto arbitrária é aposta, não decisão.

   A MOLDURA FICA SEM BORDA, de propósito (André perguntou; esta é a recomendação).
   Os cards de PRODUTO ganharam moldura hoje. Se a categoria ganhasse a mesma, as
   duas coisas passariam a parecer o mesmo tipo de objeto — e não são: categoria é
   porta, produto é coisa. Quem rola a home precisa saber, sem ler, o que leva
   para outro lugar e o que leva para uma peça. Distinguir pela forma ajuda mais
   que unificar.

   O véu resolve o que a moldura não resolveria: custa nada quando a foto já é
   escura (não se vê) e salva quando é clara. É a mesma solução que o filme já usa
   — a memória do `stylee_rolo` registra um véu no topo justamente porque aquela
   peça é clara sob a barra do menu.

   OS NÚMEROS, medidos nos seis pôsteres (luminância da faixa 79%-92% da altura,
   contraste contra o branco do texto):

     Bolsas ......... 2,1:1   ILEGÍVEL
     Carteiras ...... 2,2:1   ILEGÍVEL
     Porta-celular .. 2,1:1   ILEGÍVEL
     Cintos ......... 3,3:1   no limite
     Mochilas ....... 4,6:1   ok
     Pochetes ....... 9,9:1   ok

   Três das seis abaixo do piso da WCAG para texto grande (3:1). Não era gosto.

   A rampa foi calibrada para o PIOR caso chegar a ~4,5:1 — e a primeira versão
   que escrevi (.60 na base) levava «Bolsas» a 3,2:1, passando raspando. Refiz a
   conta pela rampa real em vez de um valor médio chutado: na altura em que o nome
   cai, o véu vale ~62%, não os 47% que eu tinha suposto.

   E ELES SÃO VÍDEOS, não fotos: a luminância muda ao longo da peça. Escolher cor
   de texto para imagem em movimento não é possível — por isso véu, e não uma cor
   diferente por categoria. */
.stylee-cats--cheia .stylee-cat__moldura {
  position: relative;
}
.stylee-cats--cheia .stylee-cat__moldura::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  /* A rampa é longa e começa fraca: um véu curto e forte desenha uma FAIXA sobre a
     foto, e aí a cliente vê a tarja em vez de ler o nome. Longo e suave, ninguém
     percebe que existe. */
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, .70) 0%,
    rgba(10, 10, 10, .50) 35%,
    rgba(10, 10, 10, .18) 70%,
    rgba(10, 10, 10, 0) 100%
  );
  pointer-events: none;   /* o card inteiro é um link; o véu não pode roubar o clique */
  z-index: 1;             /* abaixo do texto, que já está em 2 */
}

/* ── E A SOMBRA FAZ O RESTO (André, 28/08: «diminuiria bem mais, pois está
   cobrindo os produtos que referenciam as categorias») ─────────────────────

   Ele está certo, e a queixa expõe o limite do véu: ele protege o texto
   escurecendo uma FAIXA — e nessa faixa mora a bolsa que representa a categoria.
   Quanto mais legível o nome, menos visível o produto. Os dois puxam o mesmo
   cobertor.

   A sombra sai desse impasse porque age em outra escala: ela escurece só os
   pixels ao redor das LETRAS, não a área. O produto não perde nada.

   Então o véu encolhe de 65% para 40% da altura — liberando os três quintos de
   cima, onde a peça aparece — e a sombra cobre a diferença. Sozinha ela não
   bastaria (halo sobre foto clara vira mancha); sozinho o véu custava a foto.
   Juntos, cada um faz a parte em que é bom.

   Dois raios de propósito: o largo e fraco levanta o fundo geral, o curto e forte
   desenha o contorno. Um só, forte o bastante para as duas coisas, apareceria. */
.stylee-cats--cheia .stylee-cat__nome {
  text-shadow: 0 1px 14px rgba(10, 10, 10, .55), 0 1px 3px rgba(10, 10, 10, .45);
}
.stylee-cats--cheia .stylee-cat__n {
  text-shadow: 0 1px 10px rgba(10, 10, 10, .5);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. O MEGA MENU: A ANIMACAO NAO FALTAVA — ESTAVA DESLIGADA
   ═══════════════════════════════════════════════════════════════════════════

   O Andre pediu para levar ao mega menu a entrada escalonada do menu do celular.
   Fui olhar antes de escrever, e cada passo desmentiu o anterior:

   1. A animacao do celular e do TEMA, nao minha (.stylee-catm, 60ms por card).

   2. O mega menu JA CASCATEIA — e em dois lugares: linhas 1872-1877 com 80ms, e
      4482-4487 (dentro de @media min-width:901px, com !important) com 50ms. A
      mesma decisao tomada duas vezes.

   3. Eu ia acrescentar uma TERCEIRA opiniao, de 45ms. Subi, medi, e ela nao
      aplicou — perdeu a especificidade. Bom.

   4. E entao o achado que inverte tudo: as linhas 4492-4506 DESLIGAM a entrada da
      foto e do texto no desktop, com !important. A foto que entra desfocada e
      assenta, o texto que sobe depois — existe tudo, e nada disso roda acima de
      901px. So o escalonamento do CARD sobrevive, e ele sozinho quase nao se ve.

   O motivo esta escrito no proprio bloco, e e legitimo: performance. «Assim o
   Chrome nao precisa mover uma camada preta grande enquanto a loja ainda esta
   montando os produtos.» Foi uma troca consciente, feita numa epoca em que a home
   estava pesada.

   ENTAO O QUE ESTA AQUI E UM TESTE, e nao uma correcao. Religo a entrada da foto
   e do texto no desktop, com o passo que ja vence (50ms), para o Andre ver e
   decidir. Se pesar, apaga-se esta secao e volta ao estado anterior — foi por
   isso que ele disse «vamos testar».

   NAO MEXO no que o bloco de performance faz com o PAINEL (opacidade, transform,
   a camada preta grande). Aquilo e o que custava caro. Aqui volta so o que
   acontece DENTRO de seis cartoes de 84px. */
@media (min-width: 901px) {
  .stylee-mega .stylee-cat__foto {
    transform: scale(1.11) !important;
    filter: blur(7px) !important;
  }
  .stylee-mega.is-aberto .stylee-cat__foto {
    transform: none !important;
    filter: none !important;
    transition: transform 1.2s var(--ease), filter .8s var(--ease) !important;
  }
  /* Passado o mouse, quem manda no zoom volta a ser o hover — regra do tema. */
  .stylee-mega.is-aberto .stylee-cat:hover .stylee-cat__foto {
    transform: scale(1.07) !important;
  }

  .stylee-mega .stylee-cat__txt {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .5s var(--ease), transform .5s var(--ease) !important;
  }
  .stylee-mega.is-aberto .stylee-cat__txt {
    opacity: 1 !important;
    transform: none !important;
  }

  /* O passo, igual ao do card (50ms). Nao invento um numero novo: copio o que
     vence. O texto soma o .22s do tema — «primeiro a pessoa ve a peca, depois le
     o nome dela». */
  .stylee-mega.is-aberto .stylee-cat:nth-child(1) .stylee-cat__foto { transition-delay: .05s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(2) .stylee-cat__foto { transition-delay: .10s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(3) .stylee-cat__foto { transition-delay: .15s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(4) .stylee-cat__foto { transition-delay: .20s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(5) .stylee-cat__foto { transition-delay: .25s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(6) .stylee-cat__foto { transition-delay: .30s !important; }

  .stylee-mega.is-aberto .stylee-cat:nth-child(1) .stylee-cat__txt { transition-delay: .27s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(2) .stylee-cat__txt { transition-delay: .32s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(3) .stylee-cat__txt { transition-delay: .37s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(4) .stylee-cat__txt { transition-delay: .42s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(5) .stylee-cat__txt { transition-delay: .47s !important; }
  .stylee-mega.is-aberto .stylee-cat:nth-child(6) .stylee-cat__txt { transition-delay: .52s !important; }

  /* Fechar continua instantaneo: o tema decidiu isso e esta certo — ninguem quer
     esperar animacao para o menu sair da frente. */
  .stylee-mega:not(.is-aberto) .stylee-cat__foto,
  .stylee-mega:not(.is-aberto) .stylee-cat__txt { transition-delay: 0s !important; }
}

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


/* ── 15b. E OS BOTOES ENTRAM DESLIZANDO (Andre, 29/08) ─────────────────────
   «Gostaria que a animacao promovesse um deslocamento de uma posicao inicial
    ate a posicao final. E que nao seja discreta.»

   O motivo de ele nao estar vendo movimento nenhum: O CARD NAO SE MOVIA. As
   regras de escalonamento do tema (1872-1877 e 4482-4487) poem `transition-delay`
   num card cuja transicao declara apenas `background` e `border-color` — que sao
   as propriedades do HOVER. Havia atraso, e nao havia o que atrasar. A cascata
   existia no papel e nao na tela.

   Agora ele entra de translateX(-40px). Horizontal e nao vertical de proposito:
   a lista e uma COLUNA, e itens que chegam pela lateral leem como fila entrando;
   se subissem, competiriam com a foto, que ja faz um gesto proprio (desfoque que
   assenta). Dois movimentos na mesma direcao viram um borrao.

   ── O DETALHE QUE QUASE ESTRAGOU TUDO ──
   O atraso NAO pode ir no `transition-delay` geral. Se fosse, o hover herdaria:
   passar o mouse no sexto card esperaria 0,35s para o fundo acender. Por isso a
   demora vai DENTRO do atalho, propriedade por propriedade — transform e opacity
   atrasam, background e border-color respondem na hora.

   E por isso tambem a especificidade sobe (`.stylee-mega__lista >` no meio): as
   regras do tema usam !important e 4 classes; sem uma quinta, o `transition-delay`
   delas venceria e devolveria o problema do hover lento. */
@media (min-width: 901px) {
  .stylee-mega .stylee-cat {
    transform: translateX(-40px) !important;
    opacity: 0 !important;
  }
  .stylee-mega.is-aberto .stylee-cat {
    transform: none !important;
    opacity: 1 !important;
  }

  /* 60ms entre um e outro — o mesmo passo do menu do celular, para o site inteiro
     ter uma cadencia so. Seis cards levam 0,3s para comecar todos, e o ultimo
     assenta por volta de 1s. Da para VER, que era o pedido. */
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(1),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(1) {
    transition: transform .62s var(--ease) 0s, opacity .42s var(--ease) 0s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(2),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(2) {
    transition: transform .62s var(--ease) .06s, opacity .42s var(--ease) .06s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(3),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(3) {
    transition: transform .62s var(--ease) .12s, opacity .42s var(--ease) .12s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(4),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(4) {
    transition: transform .62s var(--ease) .18s, opacity .42s var(--ease) .18s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(5),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(5) {
    transition: transform .62s var(--ease) .24s, opacity .42s var(--ease) .24s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat:nth-child(n + 6),
  .stylee-mega .stylee-mega__lista > .stylee-cat:nth-child(n + 6) {
    transition: transform .62s var(--ease) .30s, opacity .42s var(--ease) .30s,
                background .3s var(--ease) 0s, border-color .3s var(--ease) 0s !important;
  }

  /* E o `transition-delay` solto do tema sai de cena: ele valia para TODAS as
     propriedades e e exatamente o que atrasaria o hover. */
  .stylee-mega.is-aberto .stylee-mega__lista > .stylee-cat {
    transition-delay: unset !important;
  }

  /* Fechado nao anima — a regra da casa. Sai da frente na hora. */
  .stylee-mega:not(.is-aberto) .stylee-mega__lista > .stylee-cat {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stylee-mega .stylee-cat,
  .stylee-mega.is-aberto .stylee-cat {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ── 16. O CURSOR: REMOVIDO (Andre, 29/08) ──────────────────────────────────
   Chegou a existir aqui um cursor personalizado — anel claro com a seta do card —
   e depois quatro vertentes trocaveis por `?cursor=a..d`. O Andre olhou e pediu
   para tirar por enquanto.

   Fica o registro do que se aprendeu, para quem voltar ao assunto:

   · O painel e ESCURO. Qualquer desenho aqui precisa ser claro, ou some.
   · O `pointer` tem de ficar como reserva no fim da declaracao. Cursor que nao
     carrega e interface sem cursor.
   · O ponto quente vai no CENTRO de uma forma circular; no canto, o clique parece
     acontecer fora do desenho.
   · O SVG precisa ir com `#` e `<` codificados. Passando cru, o Chrome ignora a
     regra EM SILENCIO — nada quebra, nada avisa, e o cursor simplesmente nao troca.
   · E a duvida de fundo continua valida: o ganho estetico e real, e a perda de
     afordancia tambem. A mao do sistema e feia e todo mundo entende. */


/* ── 17. ALEXANDRA 16:9 NO CELULAR DEITADO (Andre, 02/09) ───────────────────
   A largura cheia precisa conservar o quadro inteiro. Em paisagem curta, 100svh e
   mais baixo que um quadro 16:9 e o overflow do palco eliminava a base. O palco passa
   a ter a proporcao real da sequencia: o excedente continua abaixo da dobra, sem faixa
   lateral e sem destruir pixels do monograma. O controlador mede esta altura e ajusta
   o trilho automaticamente. */
@media (orientation: landscape) and (max-height: 550px) and (max-width: 1200px) {
  body.home .stylee-rolo {
    --stylee-palco: 56.25vw;
  }

  body.home .stylee-rolo__palco {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  body.home .stylee-rolo__video {
    object-fit: contain;
    object-position: center top;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   A BARRA TROCA DE ESTADO EM FADE, E NAO EM CORTE (03/09/2026, pedido do Andre)
   ═════════════════════════════════════════════════════════════════════════════

   O cabecalho fica transparente sobre o clipe e sobre o rolo, e escuro fora
   deles. A troca era abrupta nos dois sentidos, por DUAS razoes — e a transicao
   ja declarada no tema escondia as duas.

   1. O VEU NAO TINHA COMO SUAVIZAR. O degrade que mantem a marca legivel sobre o
      filme e um `::before` que so EXISTIA sob `html.stylee-filme`. Nao se faz
      fade de algo que entra e sai da existencia: ele pipocava, enquanto o fundo
      da barra fazia seu fade por baixo. Agora o veu existe SEMPRE, invisivel
      fora do filme, e o que muda e a opacidade — que transiciona.

   2. A CURVA ENTREGAVA QUASE TUDO NO COMECO. O `--ease` do tema e
      cubic-bezier(.16,1,.3,1), uma expo-out: aos 20% do tempo ela ja andou ~80%
      do caminho. Com 0,45s, a troca acontecia em ~90ms percebidos — o mesmo
      defeito que o Andre ouviu no audio do rolo e descreveu como «quase um corte
      seco». Para um cross-fade a curva precisa ser SIMETRICA, gastando tempo no
      meio: e o que faz o olho ler como transicao em vez de troca.

   Os dois lados usam a mesma duracao e a mesma curva de proposito — entrar e
   sair com pesos diferentes e o que faz uma transicao parecer «torta». */

:root {
  /* CURTA, MAS EXISTINDO. O incomodo nunca foi a duracao — era a curva, que
     entregava ~80% do caminho nos primeiros 20% do tempo e fazia a troca parecer
     corte. Com a curva simetrica, 0,3s ja se le como transicao. Mais que isso
     atrasa a barra em relacao ao dedo de quem rola rapido. */
  --stylee-barra-fade: .3s;
  --stylee-barra-ease: cubic-bezier(.4, 0, .2, 1);
}

.stylee-header {
  transition:
    background var(--stylee-barra-fade) var(--stylee-barra-ease),
    box-shadow var(--stylee-barra-fade) var(--stylee-barra-ease);
}

/* O veu, agora permanente e apagado. Os valores do degrade sao os mesmos do
   tema — repetidos aqui porque fora do filme a regra original nem existe, e sem
   `content` o pseudo-elemento nao e criado para poder aparecer depois. */
.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;
  opacity: 0;
  transition: opacity var(--stylee-barra-fade) var(--stylee-barra-ease);
}

html.stylee-filme .stylee-header::before {
  opacity: 1;
}