/* ══════════════════════════════════════════════════════════════════════
   /ofertas — o CSS que estava inline no `ofertas.html`.
   Extraído no item 6 do PLANO-VISUAL.md: sai do HTML, vira arquivo
   cacheável. Ligado na MESMA posição do documento, então a cascata é
   idêntica e o diff é zero. A unificação com o vocabulário da home é o
   passo 3.
   ══════════════════════════════════════════════════════════════════════ */

  :root{
  /* A paleta VENICE vem de `/tokens.css`, carregado antes desta
     folha. Aqui fica so o que o VENICE nao define. */
  --sombra-modal:0 24px 60px -8px rgba(28,40,31,.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
  body{background:var(--bg-principal);color:var(--texto-principal);font-family:var(--font-sans);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
  /* Superfícies do navegador que ninguém desenha e que pertencem ao design: seleção, caret, foco, scrollbar. */
  ::selection{background:var(--verde-muito-claro);color:var(--verde-escuro);}
  :focus-visible{outline:2px solid var(--borda-foco);outline-offset:2px;border-radius:4px;}
  input,select{caret-color:var(--verde-principal);}
  *{scrollbar-width:thin;scrollbar-color:rgba(100,130,103,.35) transparent;}
  *::-webkit-scrollbar{width:10px;height:10px;}
  *::-webkit-scrollbar-thumb{background:rgba(100,130,103,.3);border-radius:99px;border:3px solid transparent;background-clip:content-box;}
  *::-webkit-scrollbar-thumb:hover{background:rgba(100,130,103,.5);background-clip:content-box;}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
  .container{width:100%;max-width:1360px;margin:0 auto;padding:0 1.5rem;}

  /* ══ HEADER ══ */
  .dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--confirma);flex-shrink:0;box-shadow:0 0 0 3px rgba(46,91,60,.16);}

  /* ══ ABERTURA ══
     A tese no primeiro viewport: o número é preço por ml, e a página declara
     quanto confia nele. Sem kicker — o título carrega o próprio peso. */
  .abertura{background:var(--verde-escuro);border-bottom:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden;padding:1.5rem 0 1.4rem;}
  .abertura::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(143,166,125,.13) 1px,transparent 1px);background-size:28px 28px;pointer-events:none;}
  .abertura-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:end;}
  .abertura h1{font-family:var(--font-serif);font-size:clamp(1.6rem,2.7vw,2.15rem);font-weight:500;color:#fff;line-height:1.14;letter-spacing:-.025em;text-wrap:balance;}
  .abertura h1 em{font-style:italic;color:var(--ouro-claro);}
  .abertura-sub{margin-top:.6rem;font-size:.88rem;color:rgba(244,239,228,.72);max-width:56ch;text-wrap:pretty;}
  .abertura-sub b{color:var(--creme);font-weight:600;}
  /* O bloco de estado: o que o radar sabe hoje, dito como número — nunca como promessa. */
  .estado{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-lg);overflow:hidden;}
  .estado-cel{background:rgba(20,32,24,.55);padding:.7rem .9rem;display:flex;flex-direction:column;gap:.12rem;}
  .estado-num{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700;color:#fff;line-height:1.05;letter-spacing:-.02em;}
  .estado-rot{font-size:.7rem;font-weight:600;color:var(--ouro-claro);letter-spacing:.05em;text-transform:uppercase;line-height:1.35;}
  .estado-nota{grid-column:1/-1;background:rgba(20,32,24,.55);padding:.65rem .95rem;font-size:.76rem;color:rgba(244,239,228,.72);display:flex;align-items:center;gap:.6rem;border-top:1px solid rgba(255,255,255,.11);line-height:1.5;}

  /* ══ FILTROS ══ */
  main{flex:1 0 auto;padding:1.15rem 0 4rem;}
  .painel{background:var(--bg-card);border:1px solid var(--borda-suave);border-radius:var(--radius-xl);padding:1rem 1.3rem;display:flex;flex-direction:column;gap:.8rem;box-shadow:var(--sombra-card);margin-bottom:1.35rem;}
  /* A busca do cabeçalho sai nesta página: a listagem tem a dela, que filtra
     ao vivo. Duas caixas de busca na mesma tela deixam o visitante sem saber
     qual usar — e a do cabeçalho recarrega a página, o que aqui é pior. */
  .site-header .header-busca{display:none;}
  .busca-linha{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;}
  /* A busca do painel: filtro ao vivo, não navegação. O campo é o mesmo
     desenho do cabeçalho para o gesto ser o mesmo em qualquer página. */
  .busca{position:relative;display:flex;align-items:center;min-width:0;}
  .busca > svg{position:absolute;left:1.15rem;width:18px;height:18px;color:var(--texto-terciario);pointer-events:none;}
  .busca input{width:100%;height:46px;padding:0 2.9rem 0 3rem;background:#fff;
    border:1px solid var(--borda-suave);border-radius:var(--radius-pill);font-size:.9rem;
    color:var(--texto-principal);outline:none;font-family:inherit;transition:var(--t-fast);}
  .busca input::-webkit-search-cancel-button,
  .busca input::-webkit-search-decoration{display:none;-webkit-appearance:none;}
  .busca input::placeholder{color:var(--texto-terciario);}
  .busca input:focus{background:#fff;border-color:var(--borda-foco);
    box-shadow:0 0 0 3px rgba(63,96,72,.1);}
  /* `~` nunca casava: o <svg> vem ANTES do <input> no DOM, e o combinador só
     olha para frente. A lupa ficava cinza mesmo com o campo em foco — o
     detalhe que dá vida ao campo existia só no papel. `:focus-within` no
     invólucro não depende da ordem dos irmãos. */
  .busca:focus-within > svg{color:var(--verde-principal);}
  .btn-limpar-busca{position:absolute;right:.7rem;width:30px;height:30px;border-radius:50%;border:none;
    background:rgba(0,0,0,.06);color:var(--texto-secundario);display:none;align-items:center;
    justify-content:center;cursor:pointer;padding:0;font-size:.8rem;font-family:inherit;
    transition:var(--t-fast);}
  .btn-limpar-busca:hover{background:rgba(0,0,0,.14);color:var(--texto-principal);}
  .btn-limpar-busca.vis{display:inline-flex;}
  .busca-linha .busca-sugestoes{left:0;right:auto;width:min(100%,520px);}
  /* `.busca-linha.so-ordenar` saiu em 31/10: existia para o estado em que a
     busca do painel tinha sido removida e a linha ficava só com o seletor.
     A busca voltou (`.busca` + `.ordenar`, duas colunas), a classe nunca é
     escrita (medido: 0 ocorrências em HTML e JS), e a regra só confundia. */
  .ordenar select{height:44px;padding:0 2.6rem 0 1.35rem;background:#ffffff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234D574E' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1.1rem center;border:1px solid var(--borda-suave);border-radius:var(--radius-pill);font-size:.84rem;font-weight:600;color:var(--texto-principal);cursor:pointer;outline:none;font-family:inherit;appearance:none;-webkit-appearance:none;transition:var(--t-fast);}
  .ordenar select:focus{border-color:var(--borda-foco);box-shadow:0 0 0 3px rgba(63,96,72,.1);}
  .faixas{display:flex;flex-wrap:wrap;gap:.5rem 1.35rem;padding-top:.55rem;border-top:1px solid var(--borda-suave);}
  .faixa{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
  .faixa + .faixa{border-left:1px solid var(--borda-suave);padding-left:1.35rem;}
  .faixa-rot{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--texto-terciario);min-width:56px;flex-shrink:0;}
  .pilula{padding:.4rem .9rem;background:var(--verde-salvia-claro);border:1px solid var(--borda-suave);border-radius:var(--radius-pill);font-size:.79rem;font-weight:600;color:var(--verde-principal);cursor:pointer;font-family:inherit;transition:var(--t-fast);
    /* 32px de altura desenhada, 44 de alvo. As pílulas estão em linha e
       adjacentes, então um pseudo-elemento invadiria a vizinha — aqui o alvo
       cresce de verdade, com `inline-flex` para o texto ficar centrado. */
    min-height:44px;display:inline-flex;align-items:center;}
  .pilula:hover{background:var(--verde-muito-claro);color:var(--verde-escuro);}
  .pilula[aria-pressed="true"]{background:var(--verde-principal);color:#fff;border-color:var(--verde-principal);}
  .pilula:active{transform:scale(.97);}
  .pilula.clara{background:#fff;color:var(--texto-secundario);}
  .pilula.clara:hover{border-color:var(--ouro);color:var(--texto-principal);}
  .pilula.clara[aria-pressed="true"]{background:var(--verde-principal);border-color:var(--verde-principal);color:#fff;}
  .painel-rodape{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
  .contagem{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--texto-secundario);}
  .contagem b{color:var(--verde-principal);font-weight:700;}
  .btn-limpar{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;background:var(--bg-principal);border:1px solid var(--borda-suave);border-radius:var(--radius-pill);font-size:.76rem;font-weight:600;color:var(--texto-secundario);cursor:pointer;font-family:inherit;transition:var(--t-fast);min-height:44px;}
  .btn-limpar:hover{border-color:var(--alerta-borda);color:var(--alerta);background:var(--alerta-bg);}
  .btn-limpar:active{transform:scale(.97);}

  /* ══ FILTRO ATIVO: MARCA ══
     A etiqueta que o catálogo `/marcas` acende ao mandar `?marca=<slug>`.
     Âmbar, e não verde: as pílulas verdes são filtros que a pessoa escolhe
     aqui dentro; esta veio de fora, e a cor diz de onde ela veio. */
  .marca-ativa{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
    padding:.3rem .45rem .3rem .8rem;background:var(--leitura-bg);border:1px solid var(--leitura-borda);
    border-radius:var(--radius-pill);font-size:.79rem;font-weight:600;color:var(--leitura);}
  .marca-ativa[hidden]{display:none;}
  .marca-rot{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.82;}
  .marca-nome{font-weight:700;}
  .marca-remover{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    padding:0;border:none;border-radius:var(--radius-pill);background:rgba(138,90,22,.14);
    color:inherit;cursor:pointer;font-family:inherit;transition:var(--t-fast);}
  .marca-remover:hover{background:rgba(138,90,22,.28);}
  .marca-remover:active{transform:scale(.92);}
  /* O botão do estado vazio também aparece como link ("Ver todas as marcas"). */
  a.btn-acao{text-decoration:none;}

  /* ══ GRADE ══ */
  .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:1.25rem;align-items:stretch;}
  .card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--borda-suave);box-shadow:var(--sombra-card);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);}
  .card:hover{box-shadow:var(--sombra-card-hover);border-color:var(--ouro);transform:translateY(-3px);}
  @media (prefers-reduced-motion:reduce){.card:hover{transform:none;}}
  .card-palco{position:relative;height:232px;background:#ffffff;display:flex;align-items:center;justify-content:center;padding:1.1rem 1.5rem;border-bottom:1px solid var(--borda-suave);}
  /* Placeholder neutro, sem palco encenado: a sombra elíptica fixa e o
     mix-blend-mode imitavam um estúdio que a página não tem, e ignoravam a
     imagem real (que muitas vezes é ausente). Foto só, sobre o próprio fundo. */
  .card-foto{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;position:relative;z-index:2;border-radius:var(--radius-sm);}
  .card-selos{position:absolute;top:.7rem;left:.7rem;right:.7rem;display:flex;justify-content:flex-end;gap:.4rem;z-index:4;pointer-events:none;}
  .selo-desc{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.76rem;font-weight:700;background:var(--vinho);color:#fff;padding:.24rem .55rem;border-radius:var(--radius-pill);box-shadow:var(--sombra-pill);white-space:nowrap;position:absolute;top:.7rem;left:.7rem;z-index:4}
  .preco-de{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.74rem;color:var(--texto-terciario);text-decoration:line-through;margin-bottom:.15rem}
  .card-corpo{padding:.95rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1;gap:.5rem;}
  .card-marca{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--verde-principal);}
  .card-marca.sem-casa{color:var(--texto-terciario);font-weight:600;letter-spacing:.06em;}
  /* Altura de uma linha reservada: com três etiquetas o card quebrava em duas
     e a grade ficava com alturas diferentes na mesma linha. */
    .tag{font-size:.7rem;font-weight:600;padding:.17rem .5rem;border-radius:var(--radius-pill);background:var(--bg-secundario);color:var(--texto-secundario);}
  .tag.dado{font-variant-numeric:tabular-nums;color:var(--verde-principal);background:var(--verde-salvia-claro);font-weight:700;}
  .tag.incerto{background:var(--leitura-bg);color:var(--leitura);}
  /* O número que decide a compra, e a procedência dele logo abaixo. */
  .card-preco{margin-top:auto;padding-top:.75rem;border-top:1px solid var(--borda-suave);}
  /* O preço que se paga é o número GRANDE. O por-ml fica ao lado, como leitura
     comparativa — é o que permite decidir entre dois tamanhos, não o que se paga. */
  /* `flex-wrap` pelo mesmo motivo da home: a 390 o corpo do card pede 161px
     para preço + gap + medida e só tem 137, e o `overflow:hidden` do card
     cortava o valor em vez de empurrá-lo. Quando não cabe, a medida desce
     alinhada à direita em vez de desaparecer. */
  .preco-linha{display:flex;align-items:flex-end;justify-content:space-between;gap:.15rem .75rem;flex-wrap:wrap;}
  /* A voz de dado: o `DESIGN.md` declara `--font-data` para preco e R$/ml, e
   aqui o arquivo dizia `--font-sans` de forma explicita. O peso cai de 800
   para 700 porque a mono ja e larga. */
.preco-cheio{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:1.72rem;font-weight:700;color:var(--verde-escuro);letter-spacing:-.045em;line-height:1;}
  .preco-mais{font-size:.7rem;color:var(--texto-secundario);margin-top:.2rem;font-variant-numeric:tabular-nums;}
  .medida-linha{text-align:right;flex-shrink:0;margin-left:auto;}
  .medida-rot{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--texto-terciario);}
  .medida-ml{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.98rem;font-weight:700;color:var(--verde-principal);line-height:1.2;white-space:nowrap;letter-spacing:-.02em;}
  .medida-ml small{font-size:.72rem;font-weight:600;color:var(--texto-terciario);}
  .medida-ml.indisponivel{color:var(--texto-terciario);font-weight:600;font-size:.82rem;}
  /* Cobertura no lugar do selo: diz de quantos dias o histórico dispõe. */
  /* A linha de cobertura aparece UMA vez, acima da grade, e diz o resultado:
     quantas ofertas têm desconto observado agora. Antes ela repetia o progresso
     de maturação em cada card, o que gastava espaço para dizer que o dado estava
     incompleto sem dizer o que havia. */
  .linha-cobertura{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;padding:.6rem .85rem;border-radius:var(--radius-md);background:var(--leitura-bg);border:1px solid var(--leitura-borda);font-size:.8rem;font-weight:600;color:var(--leitura);line-height:1.45;}
  .linha-cobertura[hidden]{display:none;}
  .linha-cobertura b{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:700;}
  .linha-cobertura.tem-queda{background:var(--confirma-bg);border-color:var(--confirma-borda);color:var(--confirma);}
  .card-acoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.75rem;}
  .card-acoes .acao{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-height:46px;padding:.4rem .2rem;background:var(--bg-card-subtle);border:1px solid var(--borda-suave);
    border-radius:var(--radius-md);color:var(--texto-secundario);cursor:pointer;font-family:inherit;transition:var(--t-fast);}
  .card-acoes .acao svg{width:17px;height:17px;flex-shrink:0;}
  .card-acoes .acao span{font-size:.66rem;font-weight:700;line-height:1;white-space:nowrap;}
  .card-acoes .acao:hover{background:var(--verde-salvia-claro);border-color:var(--ouro);color:var(--verde-principal);}
  .card-acoes .acao:active{transform:scale(.97);}
  .card-acoes .acao[aria-pressed="true"]{background:var(--verde-principal);border-color:var(--verde-principal);color:#fff;}
  .card-acoes .acao[aria-pressed="true"] svg{fill:currentColor;}
  .card-acoes .acao.vazia{background:none;border:none;pointer-events:none;}
  .card-sub{font-size:.76rem;color:var(--texto-secundario);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card-pills{display:flex;flex-wrap:wrap;gap:.3rem;}
  .card-pills .pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;
    padding:.22rem .55rem .22rem .4rem;border-radius:var(--radius-pill);background:var(--verde-salvia-claro);
    color:var(--verde-principal);white-space:nowrap;}
  .card-pills .pill svg{width:13px;height:13px;flex-shrink:0;opacity:.85;}
  .card-pills .pill.incerta{background:var(--leitura-bg);color:var(--leitura);}
  /* Os acordes olfativos. GÊMEO da regra em `card.css`: o `/ofertas` não carrega
     aquele arquivo. `min-height` fixo para o card sem acorde ter exatamente a
     altura do card com acorde — a grade é `align-items:stretch` e a linha inteira
     herda a altura do mais alto. */
  .card-acordes{display:flex;align-items:center;gap:.34rem;min-height:1.05rem;
    font-size:.72rem;line-height:1.45;color:var(--texto-secundario);
    white-space:nowrap;overflow:hidden;}
  .card-acordes span{overflow:hidden;text-overflow:ellipsis;}
  .card-acordes i{font-style:normal;opacity:.45;flex-shrink:0;}
  /* "Comparar frascos" — o link interno do card, e o GÊMEO da regra em
     `card.css`. O `/ofertas` não carrega aquele arquivo, então a regra precisa
     existir aqui também. Sem ela o link caía no azul sublinhado do navegador,
     no meio do card — medido no print de 31/10/2026.

     Ocupa a linha inteira logo acima do CTA: a fileira de três botões, o link
     interno e o botão da loja leem como UM bloco de ações. Filete, não caixa —
     fundo transparente, para não disputar peso com o `.btn-oferta` preenchido
     logo abaixo. */
  .card-ficha{grid-column:1/-1;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--verde-principal);text-decoration:none;background:transparent;border:1px solid var(--borda-media);border-radius:var(--radius-sm);transition:var(--t-fast);}
  .card-ficha:hover{background:var(--verde-salvia-claro);border-color:var(--ouro);color:var(--verde-escuro);}
  .card-ficha:active{transform:scale(.98);}
  .card-ficha:focus-visible{outline:2px solid var(--borda-foco,var(--verde-principal));outline-offset:2px;}
  .btn-oferta{grid-column:1/-1;min-height:44px;height:44px;background:var(--verde-fundo);color:var(--creme);font-weight:700;padding:.65rem .95rem;border-radius:var(--radius-sm);font-size:.82rem;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.45rem;border:none;cursor:pointer;font-family:inherit;transition:var(--t-fast);white-space:nowrap;overflow:hidden;box-sizing:border-box;}
  .btn-oferta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .btn-oferta svg{transition:transform .2s var(--ease);flex-shrink:0;}
  .btn-oferta:hover{background:var(--tinta);}
  .btn-oferta:hover svg{transform:translateX(3px);}
  .btn-oferta:active{transform:scale(.96);}

  /* ══ ESTADOS VAZIO / ERRO / CARREGANDO ══ */
  .aviso{grid-column:1/-1;text-align:center;padding:4rem 1.5rem;background:var(--bg-card);border:1px solid var(--borda-suave);border-radius:var(--radius-xl);}
  .aviso-icone{width:52px;height:52px;border-radius:50%;background:var(--verde-salvia-claro);display:flex;align-items:center;justify-content:center;margin:0 auto 1.15rem;color:var(--verde-principal);}
  .aviso h2{font-family:var(--font-serif);font-size:1.35rem;font-weight:600;}
  .aviso p{font-size:.88rem;color:var(--texto-secundario);margin-top:.4rem;max-width:46ch;margin-left:auto;margin-right:auto;text-wrap:pretty;}
  .aviso.erro{border-color:var(--alerta-borda);background:var(--alerta-bg);}
  .aviso.erro .aviso-icone{background:#fff;color:var(--alerta);}
  .btn-acao{margin-top:1.15rem;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.4rem;background:var(--verde-principal);color:#fff;border:1px solid var(--verde-principal);border-radius:var(--radius-pill);font-size:.84rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--t-fast);}
  .btn-acao:hover{background:var(--verde-escuro);border-color:var(--verde-escuro);}
  .btn-acao:active{transform:scale(.97);}
  .esqueleto{height:520px;border-radius:var(--radius-lg);background:linear-gradient(100deg,var(--bg-card) 30%,var(--bg-secundario) 50%,var(--bg-card) 70%);background-size:220% 100%;}
  @media (prefers-reduced-motion:no-preference){.esqueleto{animation:brilho 1.4s linear infinite;}}
  @keyframes brilho{to{background-position:-220% 0;}}
  .mais{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:2.25rem 0 1rem;}
  .btn-mais{min-height:46px;padding:.8rem 2rem;border-radius:var(--radius-pill);background:#fff;border:1px solid var(--borda-media);color:var(--verde-principal);font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--t-fast);}
  .btn-mais:hover{border-color:var(--verde-principal);background:var(--verde-salvia-claro);}
  .btn-mais:active{transform:scale(.98);}
  .btn-mais[disabled]{opacity:.6;cursor:wait;}
  .mais-nota{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:.75rem;color:var(--texto-terciario);}
  .fim{grid-column:1/-1;text-align:center;padding:2rem 0 .5rem;font-size:.78rem;color:var(--texto-terciario);}

  /* ══ RODAPÉ ══ */

  .toast{position:fixed;bottom:1.75rem;left:50%;transform:translateX(-50%) translateY(8px);background:var(--verde-escuro);color:#fff;padding:.75rem 1.4rem;border-radius:var(--radius-pill);box-shadow:var(--sombra-modal);font-size:.83rem;font-weight:600;z-index:300;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:calc(100vw - 2rem);}
  .toast.vis{opacity:1;transform:translateX(-50%) translateY(0);}


/* ══ ÂNCORAS DO CARD ═════════════════════════════════════════════════════
   Só o botão verde era clicável, então quem clicava na foto do frasco — o
   gesto mais comum numa vitrine — não recebia resposta. Agora o palco da foto
   e o nome do perfume levam para a oferta, com o destino, o `target` e o
   `rel="noopener sponsored"` do botão (a declaração de afiliado é obrigação
   de programa).

   Acessibilidade: o palco tem `tabindex="-1"` e `aria-hidden="true"`, porque
   é o MESMO destino do nome e do botão — três paradas do teclado para o mesmo
   link atrapalham quem navega por Tab. O nome carrega o link acessível, e o
   foco visível dele é o da casa. */
.card-link-palco{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  text-decoration:none;outline-offset:-3px}
.card-link-nome{font-family:var(--font-serif);font-size:1.02rem;font-weight:500;
  line-height:1.3;color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;height:2.65em;min-height:44px}
.card-link-nome:hover{color:var(--verde-principal,#3F6048);text-decoration:underline;text-underline-offset:3px}
/* O :focus-visible do site já desenha o contorno; no nome ele ganha um raio
   para não colar no texto. */
.card-link-nome:focus-visible{outline:2px solid var(--borda-foco,var(--verde-principal,#3F6048));
  outline-offset:2px;border-radius:4px}

  /* ══ RESPONSIVO ══ */
  @media (max-width:1024px){
    .abertura-inner{grid-template-columns:1fr;gap:1.75rem;align-items:start;padding:2.25rem 0 2rem;}
  }
  @media (max-width:768px){
    .container{padding:0 1.1rem;}
    main{padding:1.4rem 0 3rem;}
    .abertura h1{font-size:1.62rem;}
    .abertura-sub{font-size:.88rem;}
    .estado{grid-template-columns:repeat(3,1fr);}
    .estado-cel{padding:.8rem .7rem;}
    .estado-num{font-size:1.25rem;}
    .estado-rot{font-size:.7rem;}
    .estado-nota{font-size:.78rem;padding:.7rem .8rem;}
    .painel{padding:1rem 1.05rem;border-radius:var(--radius-lg);gap:.9rem;}
    .busca-linha{grid-template-columns:1fr;gap:.65rem;}
    .ordenar select{width:100%;height:44px;}
    .faixa{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.9rem 2px .35rem;margin:0 -.25rem;scrollbar-width:none;}
    .faixa::-webkit-scrollbar{display:none;}
    .faixa-rot{position:sticky;left:0;background:var(--bg-card);padding-right:.5rem;z-index:2;}
    .pilula{flex-shrink:0;white-space:nowrap;padding:.45rem .85rem;font-size:.76rem;}
    .grade{grid-template-columns:1fr;gap:1.15rem;}
    .card-palco{height:168px;}
    .card-acoes{gap:.3rem;}
    .card-acoes .acao{min-height:44px;padding:.35rem .1rem;}
    .card-acoes .acao svg{width:15px;height:15px;}
    .card-acoes .acao span{font-size:.6rem;}
    .card-ficha{font-size:.72rem;}
    .card-pills .pill{font-size:.65rem;padding:.18rem .3rem .18rem .25rem;}
    .card-pills .pill svg{width:12px;height:12px;}
    .card-sub{font-size:.72rem;}
  }
  @media (max-width:400px){
    .estado{grid-template-columns:1fr;}
    .estado-cel{flex-direction:row;align-items:baseline;justify-content:space-between;padding:.6rem .8rem;}
  }

/* ══ CAMPOS DE TEXTO A 16px NO CELULAR ═════════════════════════════════════
   O Safari do iOS da zoom automatico ao focar campo com fonte abaixo de 16px.
   Medido em 01/11/2026 a 390px: o campo do cabecalho e o do painel estavam a
   14px, e o seletor de ordem a 13px — os tres disparavam o zoom e a pagina
   saltava debaixo do dedo. 16px so no celular; no desktop nada muda. */
@media (max-width:820px){
  .busca-wrap input,.busca input,.ordenar select{font-size:16px}
}