/* ══════════════════════════════════════════════════════════════
   AB BEAUTY — estilos compartilhados pelas três lojas

   Este arquivo é ligado às páginas pelo importador, então sobrevive
   a um "npm run importar" sem precisar ser recolocado à mão.
   Estrutura (busca, fragrâncias, vitrine dos kits, textos escondidos);
   as cores vêm de marca.css e a pele de tema.css.
   ══════════════════════════════════════════════════════════════ */

/* ───────── acabamento tipográfico ─────────
   A DM Sans já desenha os números alinhados na linha de base, então
   não há mais hack de "lining" — só kerning e ligaduras ligados. */
html{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Título que quebra em duas linhas fica com as linhas equilibradas. */
h1, h2, h3, .titulo-secao h2, .cabeca h2, .card h3, .card h2{text-wrap:balance}
/* Parágrafo evita terminar com uma palavra sozinha na última linha. */
p, .intro, .desc, .d, .beneficio{text-wrap:pretty}

/* ───────── cartões do mesmo tamanho ─────────
   Nome ou descrição longa esticava o cartão; aqui o texto ganha um teto
   de linhas e o quadro para de crescer. */
.card .texto > h2,
.card .texto > h3{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.card .texto > p.d,
.card .texto > p.beneficio,
.card .texto > p.descricao{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
}

/* A foto acompanha o canto do cartão e ganha um leve avanço no hover. */
.card .capa,
.card .foto{overflow:hidden}
.card .capa img,
.card .foto img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover .capa img,
.card:hover .foto img{transform:scale(1.045)}

/* ───────── selo de estoque em pastilha ───────── */
.card .estoque,
.escolha .estoque,
.painel .estoque{
  padding:4px 10px 4px 9px;
  border-radius:100px;
  background:color-mix(in srgb, currentColor 12%, transparent);
  line-height:1;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .card .estoque, .escolha .estoque, .painel .estoque{background:none;padding:0}
}

/* ───────── respiro entre as faixas ───────── */
.titulo-secao{margin-bottom:26px}
.secao .cabeca{position:relative}
.secao .cabeca::after{content:"";display:block}

/* ───────── barra de busca ─────────
   Pegajosa no topo, sobre o fundo rosado, com a caixa branca da agenda. */
.busca-loja{
  position:sticky;
  top:0;
  z-index:45;
  margin:0 0 26px;
  padding:12px 0;
  /* vidro fosco: sobre a faixa blush do topo vira um véu claro, e sobre os
     cartões, ao rolar, o desfoque garante a leitura do campo */
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.busca-caixa{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:520px;
  margin:0 auto;
  padding:0 14px;
  border:1px solid var(--ab-borda);
  border-radius:var(--ab-raio);
  background:var(--ab-branco);
  box-shadow:var(--ab-sombra);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.busca-caixa:focus-within{
  border-color:var(--ab-rosa);
  box-shadow:0 0 0 3px rgba(236,72,153,.18);
}
.busca-caixa .lupa{flex:none;width:18px;height:18px;fill:var(--ab-cinza)}
.busca-caixa input{
  flex:1;
  min-width:0;
  min-height:44px;
  border:none;
  outline:none;
  background:transparent;
  padding:10px 0;
  font:inherit;
  font-size:16px;
  color:var(--ab-grafite);
}
.busca-caixa input::placeholder{color:var(--ab-cinza);opacity:1}
/* O "x" do próprio navegador some: usamos o nosso, só quando há texto. */
.busca-caixa input::-webkit-search-cancel-button{display:none}
.busca-caixa .limpar{
  flex:none;
  /* 44px para o dedo; a bolinha blush de 28px é só desenho, no meio */
  width:44px;
  height:44px;
  margin-right:-8px;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,var(--ab-blush) 14px,transparent 14.5px);
  color:var(--ab-ameixa-media);
  font-size:18px;
  line-height:1;
}
.busca-caixa .limpar:hover{background:radial-gradient(circle,var(--ab-rosa-claro) 14px,transparent 14.5px)}
.busca-loja.tem-texto .limpar{display:flex}
.busca-conta{
  max-width:520px;
  margin:9px auto 0;
  padding:0 16px;
  font-size:13px;
  font-weight:600;
  text-align:center;
  color:var(--ab-cinza);
  display:none;
}
.busca-loja.tem-texto .busca-conta{display:block}

/* Nada encontrado */
.busca-vazio{display:none;text-align:center;padding:48px 20px;color:var(--ab-cinza)}
.busca-vazio.mostra{display:block}
.busca-vazio b{display:block;font-size:22px;font-weight:700;margin-bottom:6px;color:var(--ab-ameixa)}
.busca-vazio span{font-size:14px}

/* Escondido pela busca — separado de [hidden] para não brigar
   com o "hidden" que a própria página já usa em outros lugares. */
.busca-fora{display:none !important}

@media (max-width:640px){
  .busca-loja{padding:10px 0;margin-bottom:18px}
}
@media (prefers-reduced-motion: reduce){
  .busca-caixa{transition:none}
}

/* ───────── escolha de fragrância ─────────
   Botões, não caixa de seleção: nome nenhum é cortado no cartão
   estreito; quando não cabe, a lista desce mais uma linha. */
.fragrancia{margin:0 0 12px}
.frag-titulo{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ab-ameixa-media);
}
.frag-opcoes{display:flex;flex-wrap:wrap;gap:6px}
.frag-op{
  flex:0 1 auto;
  padding:7px 12px;
  border:1.5px solid var(--ab-borda);
  border-radius:999px;
  background:var(--ab-branco);
  font:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  color:var(--ab-grafite);
  cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.frag-op:hover:not(:disabled){border-color:var(--ab-rosa-claro);background:var(--ab-selecao)}
.frag-op:focus-visible{outline:3px solid rgba(236,72,153,.35);outline-offset:2px}
.frag-op.marcada{
  border-color:var(--ab-rosa-suave);
  background:var(--ab-selecao);
  color:var(--ab-ameixa);
  font-weight:600;
}
/* Escondida enquanto a lista está fechada. */
.frag-op.guardada{display:none}

/* A setinha que abre o resto das fragrâncias; fechada carrega um "+4". */
.frag-seta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border:1.5px solid var(--ab-borda);
  border-radius:999px;
  background:var(--ab-branco);
  color:var(--ab-ameixa-media);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.frag-seta.aberta{padding:0;width:30px}
.frag-mais{font-size:12px;font-weight:700;white-space:nowrap}
.frag-seta svg{width:11px;height:11px;fill:currentColor;transition:transform .22s ease}
.frag-seta.aberta svg{transform:rotate(180deg)}
.frag-seta:hover{border-color:var(--ab-rosa-claro);background:var(--ab-selecao)}
.frag-seta:focus-visible{outline:3px solid rgba(236,72,153,.35);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .frag-seta svg{transition:none}
}
.frag-op.esgotada{opacity:.45;cursor:not-allowed;text-decoration:line-through}
.frag-op.esgotada small{
  display:block;
  font-size:9.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}

/* A fragrância escolhida, ao lado do nome na gaveta do carrinho. */
.frag-tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 8px;
  border-radius:999px;
  background:var(--ab-blush);
  border:1px solid var(--ab-rosa-claro);
  color:var(--ab-ameixa-media);
  font-size:11px;
  font-weight:600;
  vertical-align:middle;
  white-space:nowrap;
}
@media (max-width:420px){
  .frag-op{padding:8px 12px}  /* alvo de toque um pouco maior no dedo */
}

/* ══════════════════════════════════════════════════════════════
   KITS EM DESTAQUE — cada kit ocupa a largura inteira, foto de um
   lado e ficha do outro. Quem faz o cartão é o painel.
   ══════════════════════════════════════════════════════════════ */
.escolha{
  position:relative;
  padding:26px 0;
  margin-bottom:14px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.escolha .painel{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
  overflow:hidden;
}
/* A foto encostada nas bordas, preenchendo a coluna inteira. */
.escolha .painel .foto{
  align-self:stretch;
  height:100%;
  margin:0;
  padding:0;
  border-radius:0;
  overflow:hidden;
  position:relative;
}
.escolha .painel .foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}
/* O clarão de vitrine atravessando a foto. */
.escolha .painel .foto::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width:50%;
  height:220%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.08) 60%,
    transparent 100%);
  transform:rotate(14deg);
  animation:kit-reflexo 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes kit-reflexo{
  0%, 68%{left:-80%}
  88%, 100%{left:150%}
}
/* A coluna do texto: como o painel perdeu o "gap", o respiro vem daqui. */
.escolha .painel > div:not(.foto){padding:34px 34px 32px;align-self:center}

/* ───────── celular ─────────
   Empilhado, a foto vira uma faixa 4:5 para o kit não ficar minúsculo. */
@media (max-width:860px){
  .escolha{padding:18px 0}
  .escolha .painel{grid-template-columns:1fr}
  .escolha .painel .foto{height:auto;aspect-ratio:4 / 5}
  .escolha .painel > div:not(.foto){padding:24px 22px 26px}
}
@media (prefers-reduced-motion: reduce){
  .escolha .painel .foto::after{animation:none}
}

/* ───────── a barra que abre "o kit contém" ───────── */
.abre-conteudo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:16px 0 10px;
  padding:12px 14px;
  border:1.5px solid var(--ab-borda);
  border-radius:var(--ab-raio);
  background:var(--ab-branco);
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ab-grafite);
  text-align:left;
  cursor:pointer;
  transition:background .18s, border-color .18s;
}
.abre-conteudo:hover{background:var(--ab-selecao);border-color:var(--ab-rosa-claro)}
.abre-conteudo:focus-visible{outline:3px solid rgba(236,72,153,.35);outline-offset:2px}
.abre-conteudo em{
  display:block;
  margin-top:2px;
  font-style:normal;
  font-size:13px;
  font-weight:400;
  color:var(--ab-cinza);
}
.abre-conteudo svg{
  flex:0 0 auto;
  width:12px;
  height:12px;
  fill:var(--ab-ameixa-media);
  transition:transform .24s ease;
}
.abre-conteudo.aberta svg{transform:rotate(180deg)}
.conteudo.conteudo-fechado{display:none}
@media (prefers-reduced-motion: reduce){
  .abre-conteudo svg{transition:none}
}

/* No painel do kit, a encomenda ganha uma chamada em vez de um aviso. */
.escolha .painel .estoque.encomenda::before{content:"✦ ";opacity:.8}

/* Os nomes das fragrâncias escritos pelo servidor, para quem lê a página
   sem rodar JavaScript. Com script, o loja.js apaga esta linha. */
.frag-nomes{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--ab-cinza);
  /* na faixa do preço (flex) desce para a própria linha */
  flex-basis:100%;
  width:100%;
}

/* Lista em texto dos produtos que não estão no HTML da página, para quem
   lê sem JavaScript. Com script, o loja.js apaga o bloco. */
.catalogo-texto{
  max-width:1100px;
  margin:40px auto;
  padding:0 20px;
  font-size:14px;
  line-height:1.7;
}
.catalogo-texto h2{font-size:17px;margin-bottom:8px}
.catalogo-texto ul{padding-left:20px}

/* Resumo das fragrâncias para leitores automáticos: fora da tela, mas
   no HTML (display:none costuma ser descartado pelos extratores). */
.resumo-catalogo{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}