/**
 * ALETA — BANCADA (prévia)
 * ---------------------------------------------------------------------------
 * Camada ADITIVA do estilo novo. Não substitui nada: entra depois de
 * orides-blocksy.css e vence por ordem, ou por !important nos pontos onde o
 * arquivo antigo já usa !important.
 *
 * Só é enfileirada com ?bancada=1 na URL (ver Orides_Bancada). Enquanto for
 * prévia, o cliente nunca recebe este arquivo.
 *
 * Quando aprovado, o conteúdo daqui é dobrado para dentro de tokens.css e
 * blocksy.css nos passos do plano, e este arquivo morre. Ele é ponte, não obra.
 */

/* ═══════════════════════════════════════════════════════════════
   1. TOKENS — os mesmos nomes que o resto do plugin já consome.
   Trocar VALOR aqui repinta tudo que passa por var().
   O que continua cravado em hex no CSS antigo NÃO se move — é a
   varredura do passo 3 do plano, e não entra na prévia.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --marfim:#F7F5F0;
  --marfim2:#EFEAE1;
  --chumbo:#16211C;
  --chumbo-soft:#5C6560;
  --line:#C4BBAA;

  /* o ouro não é apagado: vira apelido do cinza-verde. Apagar deixaria
     29 usos sem valor e dois botões invisíveis (cupom e newsletter). */
  --ouro:#5C6560;
  --ouro-deep:#3B533E;

  /* o azulejo */
  --azulejo-topo:#F2EEE6;
  --azulejo-base:#DFD8C9;
  --azulejo-pad:5%;
}

/* ═══════════════════════════════════════════════════════════════
   1b. A PALETA DO TEMA — a segunda cópia dos mesmos tokens.
   Medido no site: todo dourado que sobrava depois de trocar os tokens
   do plugin vinha de --theme-palette-color-2 (#a9884f), que mora no
   Customizer e não neste repositório. É ela que pinta tudo que o kit
   nunca nomeou: menu, links, paginação, minha-conta, busca, 404, blog.
   Aqui a prévia sobrescreve. Na implantação de verdade isto vira
   theme_mod, senão fica CSS brigando com config pra sempre.
   ═══════════════════════════════════════════════════════════════ */
:root:root{
  /* :root:root de proposito: o tema declara a paleta em global.css sob
     :root, mesma especificidade. Empate se decide por ORDEM de carga, e
     eu nao controlo a ordem do arquivo gerado do tema. Dobrar o seletor
     ganha por especificidade e para de depender de sorte. */
  --theme-palette-color-1:#3B533E;   /* musgo, sem mudança */
  --theme-palette-color-2:#5C6560;   /* era #a9884f — O DOURADO */
  --theme-palette-color-3:#16211C;   /* era #4F4A47 */
  --theme-palette-color-4:#0F1714;   /* era #332F2D */
  --theme-palette-color-5:#C4BBAA;   /* era #e7ded0 (1,25:1, sumia da tela) */
  --theme-palette-color-6:#EFEAE1;   /* era #F2EBDD */
  --theme-palette-color-7:#F7F5F0;   /* era #FBF7F0 */
  --theme-palette-color-8:#ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   2. PAPEL E TINTA
   ═══════════════════════════════════════════════════════════════ */
body{ background:var(--marfim); color:var(--chumbo); }

/* ═══════════════════════════════════════════════════════════════
   2b. DUAS COLUNAS NO CELULAR
   Medido antes: grid-template-columns era uma coluna de 330px em 375,
   e o primeiro produto começava em y=850 numa tela de 812 — o cliente
   rolava uma tela inteira pra ver UM produto.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:759px){
  .woocommerce ul.products,
  [data-products]{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:14px; row-gap:26px;
  }
  .woocommerce ul.products li.product,
  [data-products] li.product{ width:auto !important; margin:0 !important; }
  /* nome com 17px em coluna de 165px ainda cabe em 2 linhas na maioria */
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  [data-products] li.product .woocommerce-loop-product__title{ font-size:0.9375rem; }
}

/* ═══════════════════════════════════════════════════════════════
   2c. FILTRO RECOLHIDO NO CELULAR
   As duas linhas de chip ocupavam 6 fileiras antes do primeiro produto.
   No desktop elas cabem e servem de navegação — o recolhimento é só no
   celular, e o botão nasce aberto quando já há filtro na URL, senão o
   estado escolhido pela pessoa some da tela.
   ═══════════════════════════════════════════════════════════════ */
.orides-filtros-abre{ display:none; }
@media (max-width:759px){
  .orides-filtros-abre{
    display:inline-flex; align-items:center; gap:6px;
    min-height:40px; padding:0 16px; margin:0 0 14px;
    background:transparent; color:var(--chumbo);
    border:1px solid var(--chumbo); border-radius:0;
    font-family:var(--sans); font-size:0.875rem; font-weight:500; cursor:pointer;
  }
  .orides-filtros-abre[aria-expanded="true"]{
    background:var(--chumbo); color:var(--marfim);
  }
  .orides-filtros{ display:none; }
  .orides-filtros.is-aberto{ display:block; margin-bottom:18px; }
}

/* ═══════════════════════════════════════════════════════════════
   3. A VITRINE
   O ciclorama mora no <a class="ct-media-container"> porque o bundle do
   tema aplica isolation:isolate nele:
     [class*=ct-media-container]{...isolation:isolate...}
   Isso cria contexto de mesclagem. Pintar o fundo em qualquer ancestral
   faria o mix-blend-mode da <img> mesclar com o ancestral errado — ou
   com nada. Pintando NO elemento que isola, o isolamento joga a favor:
   confina a mescla exatamente onde ela deve acontecer.
   ═══════════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product,
[data-products] li.product{
  display:flex; flex-direction:column; height:100%;
  align-items:flex-start; text-align:left;
  background:none; border:0; box-shadow:none;
  border-radius:0 !important;
  overflow:visible;          /* o painel do quick-add é absolute aqui dentro */
}
.woocommerce ul.products li.product:hover,
[data-products] li.product:hover{ transform:none; box-shadow:none; }

.woocommerce ul.products li.product figure,
[data-products] li.product figure{
  margin:0 0 12px; padding:0; width:100%;
  background:none; border-radius:0 !important;
}

.woocommerce ul.products li.product figure a.ct-media-container,
[data-products] li.product figure a.ct-media-container{
  position:relative; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1/1; padding:var(--azulejo-pad);
  overflow:hidden; border-radius:0 !important;
  background:radial-gradient(120% 96% at 50% 6%,
             var(--azulejo-topo) 0%, var(--azulejo-base) 100%);
}

/* RECORTE — 100 dos 159. multiply de branco puro devolve o fundo exato,
   então o retângulo branco da foto sabe some e a peça pousa no concreto. */
.woocommerce li.product figure a.ct-media-container img,
[data-products] li.product figure a.ct-media-container img{
  width:auto !important; height:auto !important;
  max-width:100%; max-height:100%;
  object-fit:contain !important;
  mix-blend-mode:multiply;
  border-radius:0 !important;
  transform:none !important;
}
@media (min-width:760px){
  /* teto de exibição no desktop: o menor arquivo do acervo tem 390px, e
     200 CSS px em tela DPR2 pede 400px. Passar disso amplia e borra. */
  .woocommerce li.product figure a.ct-media-container img,
  [data-products] li.product figure a.ct-media-container img{
    max-width:200px; max-height:200px;
  }
}

/* AMBIENTE — 59 dos 159, sendo 34 arranjos. Aqui não há branco pra fundir:
   a foto é fotografia. Vira um cartão quadrado pousado na mesma bancada.
   A classe vem do classificador (meta do anexo); enquanto ele não roda,
   nenhum card recebe .foto-ambiente e o recorte é o padrão. */
.woocommerce li.product.foto-ambiente figure a.ct-media-container img,
[data-products] li.product.foto-ambiente figure a.ct-media-container img{
  width:100% !important; height:100% !important;
  max-width:none; max-height:none;
  object-fit:cover !important;
  mix-blend-mode:normal;
  box-shadow:0 1px 0 rgba(22,33,28,.16), 0 6px 14px -8px rgba(22,33,28,.34);
}

/* ---- texto do card ---------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
[data-products] li.product .woocommerce-loop-product__title{
  font-family:var(--serif); font-weight:300; font-size:1.0625rem; line-height:1.22;
  color:var(--chumbo); text-transform:none; letter-spacing:0; margin:0 0 3px;
}
.woocommerce ul.products li.product .price,
[data-products] li.product .price{
  font-family:var(--sans); font-size:0.9375rem; font-weight:600;
  color:var(--chumbo); margin:0 0 8px;
}

/* a categoria em versalete dourada some: é ruído repetido em 159 cards */
.woocommerce ul.products li.product .entry-meta,
[data-products] li.product .entry-meta{ display:none; }

/* a estrela igual em todo card não é prova, é enfeite. Volta quando a
   avaliação for real e POR PRODUTO. */
.woocommerce ul.products li.product .star-rating,
[data-products] li.product .star-rating{ display:none; }

/* ---- o botão: sempre visível e alinhado no rodapé --------------------
   margin-top:auto é o que impede a serrilha quando um nome tem 2 linhas
   e o vizinho tem 4. Medido na prova: 42px de desalinho sem esta linha. */
.woocommerce ul.products li.product .ct-woo-card-actions,
[data-products] li.product .ct-woo-card-actions{
  margin-top:auto; width:100%; opacity:1 !important; transform:none !important;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
[data-products] li.product .button{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; min-height:40px; padding:0 14px;
  background:var(--musgo); color:var(--marfim) !important;
  border:1px solid var(--musgo); border-radius:0 !important;
  font-family:var(--sans); font-size:0.875rem; font-weight:500;
  text-transform:none !important; letter-spacing:0;
  box-shadow:none; transition:background .18s ease;
}
.woocommerce ul.products li.product .button:hover,
[data-products] li.product .button:hover{
  background:var(--musgo-deep); border-color:var(--musgo-deep);
}

/* ═══════════════════════════════════════════════════════════════
   4. BOTÃO, EM TODA PARTE
   ═══════════════════════════════════════════════════════════════ */
.orides .btn, .orides .btn-lg, .orides .btn-ouro,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.orides-cart-finalizar{
  border-radius:0 !important;
  text-transform:none !important;
  letter-spacing:0;
  box-shadow:none;
  font-family:var(--sans) !important;
}
.orides .btn-ouro, .news .btn{
  background:var(--musgo) !important; color:var(--marfim) !important;
  border:1px solid var(--musgo) !important;
}
.orides .btn-ouro:hover, .news .btn:hover{
  background:var(--musgo-deep) !important; border-color:var(--musgo-deep) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. TIPOGRAFIA — sete tamanhos, e o nome do produto deixa de ser
   menor que o preço.
   ═══════════════════════════════════════════════════════════════ */
h1,h2,h3,.orides h1,.orides h2,.orides h3{
  font-family:var(--serif) !important; font-weight:300 !important;
  letter-spacing:-.01em; text-transform:none !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. SEM EMOJI COMO ÍCONE no letreiro e nos selos
   ═══════════════════════════════════════════════════════════════ */
.orides-mq-item{ letter-spacing:.02em; }

/* fio: o #e7ded0 de hoje dá 1,25:1 sobre o papel e some da tela */
hr,.orides hr{ border-color:var(--line); }

/* ═══════════════════════════════════════════════════════════════
   7. LUMINÁRIAS — o interruptor
   Apagado, o abajur parece um vaso: foi o que a foto de catálogo
   mostrava e é por isso que a categoria não se vendia sozinha. A
   página nasce ACESA; "apagada" é consulta, não padrão.
   ═══════════════════════════════════════════════════════════════ */
.orides-luz{ display:inline-flex; margin:0 0 18px; border:1px solid var(--line); }
.orides-luz-btn{
  min-height:38px; padding:0 18px; border:0; background:transparent;
  color:var(--chumbo-soft); font-family:var(--sans); font-size:0.875rem;
  font-weight:500; cursor:pointer; transition:background .18s ease,color .18s ease;
}
.orides-luz-btn.is-on{ background:var(--chumbo); color:var(--marfim); }

/* o campo escurece só na vitrine, não na página inteira: escurecer o
   cabeçalho e o rodapé junto viraria "modo noturno", que é outra coisa. */
body.luz-acesa .woocommerce ul.products li.product figure a.ct-media-container,
body.luz-acesa [data-products] li.product figure a.ct-media-container{
  background:radial-gradient(120% 96% at 50% 40%, #2A2724 0%, #14120F 100%);
}
body.luz-acesa .woocommerce ul.products li.product figure a.ct-media-container img,
body.luz-acesa [data-products] li.product figure a.ct-media-container img{
  /* no escuro não existe branco pra fundir: multiply comeria a luz */
  mix-blend-mode:normal !important;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  object-fit:cover !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. UMA FAMÍLIA SÓ
   Medido em 10/set na home: 141 elementos estavam na fonte do SISTEMA,
   incluindo o menu inteiro. O tema declara font-family em seletores que
   o kit nunca nomeou, e ganha. A referência usa UMA família em 100% do
   texto — é isso que faz a página parecer desenhada, não a escolha da
   fonte em si.
   Exclui o que usa fonte como ÍCONE: trocar a família ali apaga o glifo.
   ═══════════════════════════════════════════════════════════════ */
body,
button, input, select, textarea, optgroup,
.ct-menu-link, .ct-header a, .ct-header span, .ct-footer a, .ct-footer span,
[class*="ct-"]:not([class*="icon"]):not([class*="dashicons"]),
.woocommerce, .woocommerce p, .woocommerce a, .woocommerce span,
.woocommerce li, .woocommerce td, .woocommerce label, .woocommerce div{
  font-family:var(--sans);
}
[class*="dashicons"], [class*="ct-icon"], .ct-icon-container{ font-family:dashicons, inherit; }

h1, h2, h3, h4,
.page-title, .woocommerce-loop-product__title, .product_title,
.orides h1, .orides h2, .orides h3, .orides .shead h2{
  font-family:var(--serif) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. BOTÃO DE FIO NO CARD
   O bloco verde cheio em 16 cards vira 16 manchas e a grade deixa de
   ser sobre a peça. De fio, o olho vê foto, nome e preço; o botão
   continua lá, do mesmo tamanho de toque, pra quem já decidiu.
   Some visualmente, não funcionalmente — que era a objeção certa do
   Douglas contra tirar o botão como a referência faz.
   ═══════════════════════════════════════════════════════════════ */
/* REGRA DO PAR: fundo e texto se declaram com o MESMO peso. Em 10/set eu
   pus !important so na cor e o fundo continuou vindo de
   ".orides .best-grid ul.products li.product .button" (patterns.css), que
   tem especificidade maior. Resultado: musgo sobre musgo, botao de comprar
   invisivel em todos os cards da home. Segunda vez no mesmo dia — a
   primeira foi o "Retornar para a loja" da sacola vazia. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.orides .best-grid ul.products li.product .button,
[data-products] li.product .button{
  background:transparent !important;
  color:var(--musgo) !important;
  border:1px solid var(--musgo) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover,
.orides .best-grid ul.products li.product .button:hover,
[data-products] li.product .button:hover{
  background:var(--musgo) !important;
  color:var(--marfim) !important;
  border-color:var(--musgo) !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. BALÃO DO WHATSAPP
   Era 60px com sombra preta a 25% — mancha pesada num canto claro.
   O anel branco é o que separa o verde do fundo sem precisar de
   sombra forte; é o acabamento do exemplo que o Douglas mandou.
   ═══════════════════════════════════════════════════════════════ */
.orides-wpp{
  width:56px !important; height:56px !important;
  bottom:20px !important; right:20px !important;
  font-size:0 !important;                      /* mata o resto do emoji, se voltar */
  border:3px solid var(--marfim) !important;
  box-shadow:0 2px 10px rgba(22,33,28,.14), 0 8px 24px -10px rgba(22,33,28,.22) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.orides-wpp:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 4px 14px rgba(22,33,28,.18), 0 12px 30px -12px rgba(22,33,28,.28) !important;
}
.orides-wpp .orides-wpp-icone{ width:28px; height:28px; display:block; }

/* na PDP o ícone acompanha o texto do botão, então é menor */
.orides-pdp-wpp .orides-wpp-icone{ width:18px; height:18px; vertical-align:-3px; margin-right:6px; }

/* nota do rodapé: #9aa698 sobre --musgo-deep dava 4,45:1 e reprovava AA em
   TODAS as páginas (é rodapé). Usa o token de texto sobre fundo escuro. */
.ct-footer .orides-fnote{ color:var(--sobre-escuro) !important; }

/* ═══════════════════════════════════════════════════════════════
   11. O EYEBROW EM FUNDO ESCURO
   Terceira vítima do mesmo defeito: --ouro fazia acento sobre claro E
   sobre escuro com um valor só. Apelidado, o eyebrow dentro de seção
   verde ficou musgo sobre musgo — 1,40:1, medido em
   /lembrancinhas-para-eventos/. Sobre fundo escuro ele usa o token de
   texto sobre escuro; sobre claro segue como está.
   ═══════════════════════════════════════════════════════════════ */
.orides .feat.dark .eyebrow,
.orides .news .eyebrow,
.orides section[class*="dark"] .eyebrow,
body.luz-acesa .orides .eyebrow{
  color:var(--sobre-escuro) !important;
}
.orides .feat.dark .eyebrow::before,
.orides .feat.dark .eyebrow::after,
.orides .news .eyebrow::before,
.orides .news .eyebrow::after{
  background:var(--sobre-escuro) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. PRIMEIRA DOBRA DA HOME — 11/set, aprovada por dobra
   Referência medida: faixa de foto cheia de ~379px com o texto por
   cima à esquerda, e a linha de ícones de categoria logo abaixo.
   O hero antigo tinha 620px porque .orides .hero img.bg forçava
   78vh/min 480/max 660, e o cartão creme flutuante só existia pra dar
   leitura sobre a foto. Aqui a foto vira faixa e o texto senta sobre
   um véu creme, não sobre um cartão.
   .orides .hero.hero--faixa = (0,3,1): vence as regras (0,2,1) do
   patterns.css, inclusive as dentro de @media, sem !important.
   ═══════════════════════════════════════════════════════════════ */
.orides .hero.hero--faixa{ position:relative; overflow:hidden; background:var(--marfim2); }
.orides .hero.hero--faixa img.bg{
  position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none;
  object-fit:cover; object-position:var(--pos,62% 45%); display:block;
}
/* véu: garante leitura do texto NÃO importa a foto que entrar.
   Do lado do texto, creme quase opaco; some antes do meio. */
.orides .hero.hero--faixa .veu{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(247,245,240,.94) 0%, rgba(247,245,240,.88) 34%, rgba(247,245,240,.35) 62%, rgba(247,245,240,0) 100%);
}
/* a foto preenche a seção; a ALTURA vem do .wrap (mínimo por viewport), então
   texto mais longo empurra a faixa em vez de ser cortado. */
.orides .hero.hero--faixa .wrap{ position:relative; min-height:440px; box-sizing:border-box; display:flex; align-items:center; }
.orides .hero.hero--faixa .tx{ max-width:520px; }
.orides .hero.hero--faixa .panel{ display:none; }           /* o cartão antigo, se sobrar */
.orides .hero.hero--faixa h1{ font-size:2rem; line-height:1.06; margin:10px 0 0; }
.orides .hero.hero--faixa h1 em{ font-style:italic; color:var(--musgo); }
.orides .hero.hero--faixa .sub{ color:var(--chumbo); font-size:0.9375rem; margin:12px 0 18px; max-width:46ch; }
.orides .hero.hero--faixa .cta-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.orides .hero.hero--faixa .btn-ghost{ background:rgba(247,245,240,.75); }
.orides .hero.hero--faixa .trust-line{ margin:14px 0 0; color:var(--chumbo-soft); font-size:0.875rem; }
@media(max-width:819px){
  /* celular: a foto FICA (loja de decoração sem foto na 1ª dobra é a
     troca errada); o texto vai pro pé da faixa, com véu de baixo pra cima. */
  .orides .hero.hero--faixa img.bg{ object-position:var(--pos-m,60% 30%); }
  .orides .hero.hero--faixa .veu{
    background:linear-gradient(180deg, rgba(247,245,240,0) 0%, rgba(247,245,240,.55) 28%, rgba(247,245,240,.94) 58%, rgba(247,245,240,.97) 100%);
  }
  .orides .hero.hero--faixa .wrap{ min-height:470px; align-items:flex-end; padding-top:110px; padding-bottom:40px; }
  .orides .hero.hero--faixa h1{ font-size:1.875rem; }
}
@media(min-width:820px){
  .orides .hero.hero--faixa .wrap{ min-height:380px; }
  .orides .hero.hero--faixa h1{ font-size:2.625rem; }
  .orides .hero.hero--faixa .sub{ font-size:1rem; }
}

/* ---- linha de categorias (dos agentes, sem alteração) ---- */
.orides .catline{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--marfim)}
.orides .catline .row{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.orides .catline .row::-webkit-scrollbar{display:none}
.orides .catline a{flex:0 0 92px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--chumbo);font-family:var(--sans);font-size:0.875rem;line-height:1.25;text-align:center;text-decoration:none}
.orides .catline .ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--marfim2);transition:background .2s,color .2s}
.orides .catline .ico svg{width:34px;height:34px;display:block}
.orides .catline a:hover .ico{background:var(--musgo);color:var(--sobre-escuro)}
.orides .catline a:focus-visible{outline:2px solid var(--musgo);outline-offset:3px}
@media(min-width:820px){
  .orides .catline .row{overflow:visible;gap:10px;justify-content:center}
  .orides .catline a{flex:1 1 0;min-width:0;max-width:150px}
}

/* ---- 13. hero em slider (3 destaques; JS só troca .is-on e monta as bolinhas) ---- */
.orides .hero-slider{ display:grid; position:relative; }
.orides .hero-slider > .hero--faixa{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s .9s; }
.orides .hero-slider > .hero--faixa.is-on{ opacity:1; visibility:visible; transition:opacity .9s ease, visibility 0s; z-index:1; }
.orides .hero-slider .dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; gap:8px; z-index:2; }
.orides .hero-slider .dots:empty{ display:none; }
.orides .hero-slider .dots button{ position:relative; overflow:hidden; width:8px; height:8px; padding:0; border:0; border-radius:4px; background:rgba(22,33,28,.28); cursor:pointer; transition:width .25s; }
.orides .hero-slider .dots button[aria-selected="true"]{ width:22px; background:rgba(22,33,28,.18); }
/* a ativa é uma pista; o verde enche no tempo da troca (6 s; o JS escuta o animationend) */
.orides .hero-slider .dots .enche{ position:absolute; inset:0; background:var(--musgo); transform:scaleX(0); transform-origin:left; }
.orides .hero-slider .dots button[aria-selected="true"] .enche{ animation:orides-enche 6s linear forwards; }
.orides .hero-slider.is-parado .dots .enche{ animation-play-state:paused; }
@keyframes orides-enche{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media(prefers-reduced-motion:reduce){ .orides .hero-slider .dots .enche{ animation:none !important; transform:none; } }
.orides .hero-slider .dots button:focus-visible{ outline:2px solid var(--musgo); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .orides .hero-slider > .hero--faixa{ transition:none; } }

/* ---- 14. botões de pausa (movimento é barreira pra quem lê devagar; WCAG 2.2.2) ---- */
.orides .hero-slider .hero-pausa{ position:absolute; right:14px; bottom:6px; z-index:3; width:32px; height:32px; padding:0; border:1px solid rgba(22,33,28,.25); border-radius:50%; background:rgba(247,245,240,.85); color:var(--chumbo); display:grid; place-items:center; cursor:pointer; }
.orides .hero-slider .hero-pausa:hover{ background:var(--marfim); }
.orides .hero-slider .hero-pausa:focus-visible{ outline:2px solid var(--musgo); outline-offset:2px; }
.orides-marquee{ position:relative; }
.orides-marquee .orides-mq-pausa{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.18); color:inherit; display:grid; place-items:center; cursor:pointer; }
.orides-marquee .orides-mq-pausa:hover{ background:rgba(0,0,0,.32); }
.orides-marquee .orides-mq-pausa:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
.orides-marquee.is-pausado .orides-mq-track{ animation-play-state:paused; }

/* ---- 15. selo de entrega no banner: texto de apoio, só pra quem está em SP (JS preenche) ---- */
.orides .hero.hero--faixa .badge-entrega{ display:inline; background:none !important; color:var(--musgo) !important; font-weight:600; text-transform:none; letter-spacing:0; padding:0; font-size:inherit; }
.orides .hero.hero--faixa .badge-entrega:empty{ display:none; }
.orides .hero.hero--faixa .badge-entrega::before{ content:"· "; color:var(--chumbo-soft); font-weight:400; }

/* ---- 16. mais vendidos: trilho no celular (2,4 cards à vista), grade no desktop ---- */
@media(max-width:819px){
  .orides .best-grid ul.products{ display:flex !important; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:10px; margin:0; padding:0 0 6px; }
  .orides .best-grid ul.products::-webkit-scrollbar{ display:none; }
  .orides .best-grid ul.products li.product{ flex:0 0 42%; width:auto !important; max-width:none !important; margin:0 !important; scroll-snap-align:start; }
}

/* ---- 17. botão do card nunca quebra linha ---- */
.woocommerce ul.products li.product .button, [data-products] li.product .button{ white-space:nowrap; }

/* ---- 18. dobra 3: "Pra quem você está comprando?" — 6 quadros (5 páginas de presente + atacado) ---- */
.orides .occ .grid{ gap:12px; }
.orides .ocard{ aspect-ratio:4/5; border-radius:6px; }
.orides .ocard .cap{ padding:26px 14px 14px; }
.orides .ocard .cap h3{ font-size:1.0625rem; line-height:1.2; }
.orides .ocard .cap p{ font-size:0.8125rem; }
@media(min-width:820px){ .orides .occ .grid{ grid-template-columns:repeat(6,1fr); gap:14px; } }
@media(max-width:819px){ .orides .occ .grid{ grid-template-columns:1fr 1fr; } }

/* ---- 19. dobra 4: depoimentos ganham título e entram na paleta ---- */
.orides .proof-inline{ padding:48px 0 44px; }
.orides .proof-inline .shead{ text-align:center; max-width:640px; margin:0 auto 26px; padding:0 20px; }
.orides .proof-inline .shead p{ color:var(--chumbo-soft); margin-top:8px; }
.orides .proof-inline .wrap{ padding-bottom:6px; }
.orides .proof-inline .pcard{ background:var(--marfim); border-radius:6px; min-width:280px; max-width:340px; }
.orides .proof-inline .pcard .stars{ color:var(--musgo); letter-spacing:2px; font-size:0.875rem; }
.orides .proof-inline .pcard p{ font-size:1rem; line-height:1.5; }
.orides .proof-inline .pcard .tag{ color:var(--musgo); background:var(--marfim2); }
/* o snap "mandatory" puxava o 1º card pra cima do padding do trilho (scrollLeft 24 ao carregar) */
.orides .proof-inline .wrap{ scroll-padding-left:24px; scroll-padding-right:24px; }

/* ---- 20. depoimento com foto do comprador no alto do card ---- */
.orides .proof-inline .pcard{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.orides .proof-inline .pcard > *{ margin-left:22px; margin-right:22px; }
.orides .proof-inline .pcard > .stars{ margin-top:18px; }
.orides .proof-inline .pcard > .who{ margin-bottom:20px; }
.orides .proof-inline .pcard > .orides-av-media{ margin:0; width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--marfim2); }
.orides .proof-inline .pcard .fichas{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.orides .proof-inline .pcard .ficha{ font-size:0.8125rem; color:var(--chumbo-soft); }
.orides .proof-inline .pcard .ficha b{ color:var(--chumbo); font-weight:600; }
.orides .proof-inline .pcard .who{ flex-wrap:wrap; row-gap:2px; }
.orides .proof-inline .pcard .verif{ white-space:nowrap; }

/* ---- 21. depoimento: capa clicável (álbum), texto alinhado, vídeo no lightbox ---- */
.orides .proof-inline .pcard > p{ margin:8px 22px; }                 /* o p do pattern zerava a margem lateral */
.orides .proof-inline .pcard .who{ flex-direction:column; align-items:flex-start; gap:4px; }
.orides .proof-inline .pcard .who > span:not(.verif)::before{ content:none; }
.orides .proof-inline .pcard > .orides-av-capa{ margin:0; display:block; position:relative; cursor:zoom-in; }
.orides .proof-inline .pcard .orides-av-media{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--marfim2); }
.orides .proof-inline .pcard .orides-av-n{ position:absolute; right:10px; bottom:10px; min-width:26px; height:26px; padding:0 8px; border-radius:13px; background:rgba(22,33,28,.72); color:var(--marfim); font-size:0.75rem; font-weight:600; display:grid; place-items:center; }
.orides .proof-inline .pcard .orides-av-n::before{ content:"+"; }
.orides-lightbox video.orides-lightbox-midia{ max-width:90vw; max-height:90vh; border-radius:6px; background:#000; }
.orides .proof-inline .pcard a[hidden]{ display:none !important; }

/* ---- 22. capa no padrão novo (fundo liso creme): a foto É o card. Sem degradê, sem multiply. ---- */
.woocommerce li.product.foto-lisa figure a.ct-media-container,
[data-products] li.product.foto-lisa figure a.ct-media-container{ background:#F2EEE6 !important; padding:0 !important; }
.woocommerce li.product.foto-lisa figure a.ct-media-container img,
[data-products] li.product.foto-lisa figure a.ct-media-container img{ mix-blend-mode:normal !important; object-fit:cover !important; padding:0 !important; }
.woocommerce li.product.foto-lisa figure a.ct-media-container img,
[data-products] li.product.foto-lisa figure a.ct-media-container img{ width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; }

/* ---- 23. PDP celular: o rastro de migalhas não repete o nome do produto (custava ~90px antes da foto) ---- */
@media(max-width:819px){ .single-product .ct-breadcrumbs > span:last-child:not(:first-child){ display:none; } .single-product .ct-breadcrumbs > .ct-separator:last-of-type{ display:none; } }