/* ══════════════════════════════════════════════════════════════
   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.
   ══════════════════════════════════════════════════════════════ */

/* ───────── numeração padrão ─────────
   O Cormorant Garamond desenha números "old-style" por padrão: o 3, 5,
   7 e 9 descem abaixo da linha e o 6 e o 8 sobem acima das outras.
   Fica desalinhado em preço e quantidade.

   A correção é pedir números "lining": todos da mesma altura, apoiados
   na linha de base — o padrão que se espera num preço.

   E a largura fica PROPORCIONAL, isto é, cada dígito ocupa o espaço que
   o desenhista deu a ele: o 1 é estreito, o 8 é largo. É assim que se
   compõe texto corrido. Forçar todos à mesma largura ("tabular") só faz
   sentido em coluna de planilha, e no meio de uma frase abre um vão
   esquisito em volta do 1 — justamente o que dá aparência de máquina.

   Observação honesta: nem a Cormorant nem a Karla trazem o recurso
   "tnum" desenhado, então pedir largura tabular a elas não teria efeito
   nenhum. Por isso não pedimos. */
*, *::before, *::after {
  font-variant-numeric: lining-nums proportional-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* ───────── acabamento tipográfico ─────────
   Ajustes pequenos que, somados, tiram a aparência de página montada
   por gerador e devolvem a de página composta por alguém. */

html {
  /* Liga o kerning e as ligaduras que a fonte já traz desenhados.
     É o par de letras se encaixando como o tipógrafo previu. */
  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, em
   vez de deixar uma palavra órfã pendurada sozinha embaixo. É o que um
   diagramador faria à mão. */
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;
}

/* Caixa alta precisa de mais respiro entre letras — sem isso as
   maiúsculas se amontoam. Os tamanhos pequenos pedem ainda mais. */
.rotulo, .selo, .medida, .sobrancelha, .conta {
  font-feature-settings: "lnum" 1, "case" 1;
}

/* Seleção de texto na cor da marca, não no azul do navegador. */
::selection { background: rgba(201, 169, 97, .28); }

/* Foco visível e bonito para quem navega pelo teclado. */
:focus-visible {
  outline: 2px solid var(--ouro, #c9a961);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ───────── cartões do mesmo tamanho ─────────
   Um nome comprido ou uma descrição longa esticavam o cartão e ele
   destoava dos vizinhos. Aqui o texto ganha um teto de linhas: o que
   passa disso é cortado com reticências, e o quadro para de crescer.

   Vale para todos os produtos, antigos e novos — é o que mantém a
   vitrine alinhada. */
.card .texto > h2,
.card .texto > h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.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;
}

/* Nome muito longo sem espaços não deve furar a lateral do cartão. */
.card .texto > h2,
.card .texto > h3 { overflow-wrap: anywhere; }

/* ══════════════════════════════════════════════════════════════
   ACABAMENTO VISUAL

   Os seletores abaixo são propositalmente mais específicos que os das
   páginas (.grade .card vence .card), para refinar sem precisar de
   !important e sem apagar a identidade de cada loja — cada uma mantém
   a própria cor, muda só o acabamento.
   ══════════════════════════════════════════════════════════════ */

/* ───────── cartão de produto ─────────
   Canto duro de 4px é herança de interface de sistema. Um raio maior
   e uma sombra em três camadas — contato, difusa e ambiente — fazem o
   cartão parecer pousado sobre a página, e não colado nela. */
.grade .card,
.secao .card {
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 2px 4px -2px rgba(60, 30, 40, .10),
    0 14px 32px -20px rgba(60, 30, 40, .32);
  transition:
    transform .38s cubic-bezier(.2, .8, .2, 1),
    box-shadow .38s ease,
    border-color .38s ease;
}
.grade .card:hover,
.secao .card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 5px 10px -5px rgba(60, 30, 40, .16),
    0 30px 54px -26px rgba(60, 30, 40, .44);
}

/* No sexshop o fundo é escuro: a sombra some e quem dá o relevo é o
   brilho da borda. Sombra preta sobre preto não aparece. */
[data-loja="sexshop"] .secao .card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 16px 34px -22px rgba(0, 0, 0, .8);
}
[data-loja="sexshop"] .secao .card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .1) inset,
    0 0 0 1px rgba(255, 45, 126, .28),
    0 26px 50px -24px rgba(255, 45, 126, .3);
}

/* A foto acompanha o canto do cartão e ganha um leve avanço no hover. */
.card .capa,
.card .foto {
  border-radius: 12px 12px 0 0;
  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 ─────────
   Antes era só texto colorido solto. Ganhando uma forma de pastilha,
   vira informação — o olho encontra na hora. */
.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;
}
/* Navegador antigo ignora color-mix e fica só com o texto — sem quebrar. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .card .estoque, .escolha .estoque, .painel .estoque { background: none; padding: 0; }
}

/* ───────── botão de comprar ─────────
   Cantos vivos de 2px endurecem a peça mais clicada da página. */
.compra .add,
.final .btn,
.btn-final {
  border-radius: 8px;
  letter-spacing: .1em;
  box-shadow: 0 6px 16px -8px rgba(122, 92, 34, .7);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.compra .add:hover:not(:disabled),
.final .btn:hover,
.btn-final:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(122, 92, 34, .85);
  filter: saturate(1.06);
}
.compra .add:active:not(:disabled) { transform: translateY(0); }

/* Os controles de quantidade acompanham o botão. */
.compra .qtd { border-radius: 8px; overflow: hidden; }

/* ───────── respiro entre as faixas ─────────
   Espaço generoso entre blocos é o que separa uma página composta de
   uma página empilhada. */
.secao { margin-bottom: 68px; }
.titulo-secao { margin-bottom: 26px; }

/* Um filete curto sob o título da faixa, como assinatura da seção. */
.secao .cabeca { position: relative; }
.secao .cabeca::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--ouro, #c9a961),
    color-mix(in srgb, var(--ouro, #c9a961) 10%, transparent));
}

/* ───────── barra de busca ─────────
   Cores herdadas de cada loja: o que muda entre elas é só o fundo,
   porque o sexshop é escuro e as outras duas são claras. */
.busca-loja {
  position: sticky;
  top: 0;
  z-index: 45;
  margin: 0 0 26px;
  padding: 12px 0;
  background: var(--busca-fundo, rgba(253, 243, 244, .92));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 169, 97, .3);
}

.busca-caixa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 14px;
  border: 1px solid rgba(201, 169, 97, .55);
  border-radius: 100px;
  background: var(--busca-campo, rgba(255, 255, 255, .9));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.busca-caixa:focus-within {
  border-color: var(--ouro, #c9a961);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, .22);
}

.busca-caixa .lupa {
  flex: none;
  width: 17px;
  height: 17px;
  fill: var(--ouro-escuro, #7a5c22);
  opacity: .85;
}

.busca-caixa input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta, var(--texto, #3a2229));
}
.busca-caixa input::placeholder {
  color: var(--tinta, var(--texto, #3a2229));
  opacity: .5;
}
/* O "x" que o próprio navegador coloca em input[type=search] some:
   usamos o nosso, que aparece só quando há texto. */
.busca-caixa input::-webkit-search-cancel-button { display: none; }

.busca-caixa .limpar {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(201, 169, 97, .22);
  color: var(--ouro-escuro, #7a5c22);
  font-size: 17px;
  line-height: 1;
}
.busca-caixa .limpar:hover { background: rgba(201, 169, 97, .4); }
.busca-loja.tem-texto .limpar { display: flex; }

.busca-conta {
  max-width: 520px;
  margin: 9px auto 0;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  color: var(--tinta, var(--texto, #3a2229));
  opacity: .75;
  display: none;
}
.busca-loja.tem-texto .busca-conta { display: block; }

/* Nada encontrado */
.busca-vazio {
  display: none;
  text-align: center;
  padding: 48px 20px;
  color: var(--tinta, var(--texto, #3a2229));
}
.busca-vazio.mostra { display: block; }
.busca-vazio b {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ouro-escuro, #7a5c22);
}
.busca-vazio span { font-size: 14.5px; opacity: .8; }

/* 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; }

/* ───────── ajustes por loja ───────── */
[data-loja="bioilha"] .busca-loja {
  --busca-fundo: rgba(247, 244, 233, .93);
  --busca-campo: rgba(255, 255, 255, .9);
}
[data-loja="sexshop"] .busca-loja {
  --busca-fundo: rgba(13, 4, 16, .93);
  --busca-campo: rgba(255, 255, 255, .07);
  border-bottom-color: rgba(201, 169, 97, .35);
}
[data-loja="sexshop"] .busca-caixa input { color: var(--texto, #e8d9dd); }
[data-loja="sexshop"] .busca-caixa input::placeholder { color: var(--texto-2, #bfa3ad); opacity: .8; }
[data-loja="sexshop"] .busca-caixa .lupa { fill: var(--ouro-claro, #f0d99a); }
[data-loja="sexshop"] .busca-caixa .limpar { background: rgba(255, 255, 255, .12); color: var(--ouro-claro, #f0d99a); }
[data-loja="sexshop"] .busca-vazio b { color: var(--ouro-claro, #f0d99a); }

@media (max-width: 640px) {
  .busca-loja { padding: 10px 0; margin-bottom: 18px; }
  .busca-caixa input { padding: 12px 0; font-size: 16px; } /* 16px evita o zoom do iPhone */
}
@media (prefers-reduced-motion: reduce) {
  .busca-caixa { transition: none; }
}