/* ==========================================================================
   Laskero · base.css
   Tokens e componentes reutilizáveis em todas as telas da loja:
   cabeçalho, rodapé, botões, selos, acordeões, estrelas, faixas.
   Celular primeiro; prefixo lk- em todas as classes.
   ========================================================================== */

/* --- Fonte local (OFL): Outfit, variável 300–800, subconjunto latino ----- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/outfit-variable.woff2") format("woff2");
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* marca */
  --lk-roxo: #38036D;         /* cabeçalho, títulos, fundos fortes */
  --lk-roxo-escuro: #26024A;  /* hover do roxo, rodapé */
  --lk-roxo-tinta: #F4EFFA;   /* fundo claro com toque de roxo */
  --lk-roxo-linha: #DCCFEE;   /* bordas sobre fundos claros roxos */
  --lk-menta: #36D9AA;        /* destaque e botão de compra (texto roxo: 8,3:1) */
  --lk-menta-escura: #2BC497; /* hover do botão */
  --lk-branco: #FFFFFF;

  /* apoio */
  --lk-tinta: #1C1430;        /* texto principal (16,6:1 sobre branco) */
  --lk-tinta-2: #5B5470;      /* texto secundário (7,1:1) */
  --lk-tinta-3: #7E7891;      /* legendas (4,6:1) */
  --lk-cinza-1: #F6F5F9;      /* fundo de seção clara */
  --lk-cinza-2: #E8E6EF;      /* bordas e divisores */
  --lk-cinza-3: #CFCBDA;      /* bordas de campos */
  --lk-verde: #0B7A5B;        /* confirmação, poupança, stock (5,3:1) */
  --lk-verde-fundo: #E6F6F0;
  --lk-estrela: #E39600;      /* estrelas (ícones) */
  --lk-aviso-fundo: #FFF4D6;  /* faixa de protótipo */
  --lk-aviso-texto: #6B4A00;
  --lk-erro: #B3261E;

  /* tipografia */
  --lk-fonte: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lk-texto: 1rem;
  --lk-linha: 1.55;

  /* ritmo */
  --lk-raio: 12px;
  --lk-raio-p: 8px;
  --lk-gutter: 16px;
  --lk-largura: 1280px;       /* contentor no desktop (com o gutter); no celular ocupa a largura toda */
  --lk-sombra: 0 1px 2px rgba(28, 20, 48, .06), 0 8px 24px rgba(28, 20, 48, .08);
  --lk-sombra-alta: 0 -2px 16px rgba(28, 20, 48, .12);
  --lk-alvo: 44px;            /* alvo mínimo de toque */
  --lk-cabecalho: 52px;
}

/* --- Reset curto -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--lk-fonte);
  font-size: var(--lk-texto);
  line-height: var(--lk-linha);
  color: var(--lk-tinta);
  background: var(--lk-branco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--lk-roxo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
button, [role="button"] { cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lk-menta); outline-offset: 2px; }
.lk-roxo-fundo :focus-visible { outline-color: var(--lk-menta); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Utilidades --------------------------------------------------------- */
.lk-container { width: 100%; max-width: var(--lk-largura); margin-inline: auto; padding-inline: var(--lk-gutter); }
.lk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lk-icone { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lk-icone--cheio { fill: currentColor; stroke: none; }
.lk-secao { padding-block: 40px; }
.lk-secao--clara { background: var(--lk-cinza-1); }
.lk-secao--roxa { background: var(--lk-roxo); color: var(--lk-branco); }
.lk-titulo-secao { font-size: 1.5rem; margin-bottom: 20px; color: var(--lk-roxo); }
.lk-secao--roxa .lk-titulo-secao { color: var(--lk-branco); }
.lk-sobretitulo { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lk-tinta-3); margin-bottom: 6px; }
.lk-secao--roxa .lk-sobretitulo { color: var(--lk-menta); }
.lk-texto-2 { color: var(--lk-tinta-2); }
.lk-pequeno { font-size: .875rem; }
.lk-miudo { font-size: .8125rem; }
@media (min-width: 768px) {
  :root { --lk-gutter: 24px; --lk-texto: 1.0625rem; }
  .lk-secao { padding-block: 64px; }
  .lk-titulo-secao { font-size: 2rem; margin-bottom: 28px; }
}

/* --- Faixa do topo (texto do painel) e ligação "saltar para o conteúdo" -- */
.lk-faixa-topo {
  margin: 0;
  background: var(--lk-roxo-escuro);
  color: var(--lk-branco);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: .02em;
  padding: 6px var(--lk-gutter);
  line-height: 1.4;
}
.lk-saltar {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--lk-raio-p);
  background: var(--lk-menta);
  color: var(--lk-roxo);
  font-weight: 700;
  text-decoration: none;
}
.lk-saltar:focus { top: 8px; }

/* --- Cabeçalho ---------------------------------------------------------- */
.lk-cabecalho {
  background: var(--lk-roxo);
  color: var(--lk-branco);
  position: sticky;
  top: 0;
  z-index: 40;
}
.lk-cabecalho__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--lk-cabecalho);
}
.lk-cabecalho__logo { display: flex; align-items: center; min-height: var(--lk-alvo); padding: 6px 0; }
.lk-cabecalho__logo img { height: 32px; width: auto; }
.lk-cabecalho__acoes { display: flex; align-items: center; gap: 2px; }
.lk-cabecalho__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--lk-alvo);
  min-height: var(--lk-alvo);
  padding: 0 8px;
  border: 0;
  border-radius: var(--lk-raio-p);
  background: transparent;
  color: var(--lk-branco);
  font-weight: 500;
  font-size: .9375rem;
  position: relative;
}
.lk-cabecalho__botao:hover { background: rgba(255, 255, 255, .08); }
.lk-cabecalho__botao .lk-icone { width: 24px; height: 24px; }
.lk-cabecalho__contagem {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--lk-menta);
  color: var(--lk-roxo);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.lk-cabecalho__menu { display: none; }
.lk-cabecalho__menu a { color: var(--lk-branco); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: var(--lk-raio-p); }
.lk-cabecalho__menu a:hover { background: rgba(255, 255, 255, .08); }
@media (min-width: 960px) {
  .lk-cabecalho__logo img { height: 36px; }
  /* as categorias saem sozinhas: se forem muitas, partem em duas linhas em vez de alargar a página */
  .lk-cabecalho__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; min-width: 0; }
  .lk-cabecalho__botao--menu { display: none; }
}

/* --- Faixa de selos (3 no topo) ----------------------------------------- */
.lk-selos {
  background: var(--lk-roxo-tinta);
  border-bottom: 1px solid var(--lk-roxo-linha);
}
.lk-selos__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-height: 32px;
  align-items: center;
}
.lk-selos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--lk-roxo);
  text-align: center;
  line-height: 1.15;
  padding: 4px 0;
}
.lk-selos__item .lk-icone { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .lk-selos__item { font-size: .9375rem; gap: 8px; padding: 10px 0; }
  .lk-selos__item .lk-icone { width: 20px; height: 20px; }
}

/* --- Botões ------------------------------------------------------------- */
.lk-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid transparent;
  border-radius: var(--lk-raio);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lk-botao:active { transform: translateY(1px); }
.lk-botao--primario { background: var(--lk-menta); color: var(--lk-roxo); width: 100%; box-shadow: 0 6px 18px rgba(54, 217, 170, .35); }
.lk-botao--primario:hover { background: var(--lk-menta-escura); }
.lk-botao--roxo { background: var(--lk-roxo); color: var(--lk-branco); }
.lk-botao--roxo:hover { background: var(--lk-roxo-escuro); }
.lk-botao--contorno { background: transparent; color: var(--lk-roxo); border-color: var(--lk-roxo); }
.lk-botao--contorno:hover { background: var(--lk-roxo-tinta); }
.lk-botao--whatsapp { background: var(--lk-verde); color: var(--lk-branco); }
.lk-botao--whatsapp:hover { background: #086149; }
.lk-botao--pequeno { min-height: var(--lk-alvo); padding: 0 16px; font-size: .9375rem; border-radius: var(--lk-raio-p); }
.lk-botao[disabled] { opacity: .55; cursor: not-allowed; }

/* --- Etiquetas e selos pequenos ----------------------------------------- */
.lk-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
  white-space: nowrap;
}
.lk-etiqueta--roxa { background: var(--lk-roxo); color: var(--lk-branco); }
.lk-etiqueta--menta { background: var(--lk-menta); color: var(--lk-roxo); }
.lk-etiqueta--verde { background: var(--lk-verde-fundo); color: var(--lk-verde); }
.lk-etiqueta--clara { background: var(--lk-roxo-tinta); color: var(--lk-roxo); }
.lk-etiqueta--cinza { background: var(--lk-cinza-1); color: var(--lk-tinta-2); border: 1px solid var(--lk-cinza-2); }

/* selos de pagamento (texto, sem logótipos de terceiros) */
.lk-pagamentos { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-pagamento {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--lk-cinza-3);
  border-radius: 6px;
  background: var(--lk-branco);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--lk-tinta);
}
.lk-pagamento--mbway { color: #C8102E; border-color: #F0C4CC; }
.lk-pagamento--multibanco { color: #0B5DA5; border-color: #BFD7EE; }
.lk-pagamento--nota { color: var(--lk-tinta-3); border-style: dashed; font-weight: 600; }

/* --- Estrelas ----------------------------------------------------------- */
.lk-estrelas { display: inline-flex; align-items: center; gap: 1px; color: var(--lk-estrela); }
.lk-estrelas .lk-icone { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.lk-estrelas--p .lk-icone { width: 15px; height: 15px; }
.lk-estrelas--g .lk-icone { width: 24px; height: 24px; }
.lk-estrelas .lk-icone.e-vazia { fill: var(--lk-cinza-2); }

/* --- Acordeão com <details> --------------------------------------------- */
.lk-acordeao { border-top: 1px solid var(--lk-cinza-2); }
.lk-acordeao__item { border-bottom: 1px solid var(--lk-cinza-2); }
.lk-acordeao__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  min-height: 52px;
  padding: 12px 0;
  font-weight: 600;
  font-size: 1.0625rem;
  -webkit-tap-highlight-color: transparent;
}
.lk-acordeao__item > summary::-webkit-details-marker { display: none; }
.lk-acordeao__item > summary .lk-icone { width: 22px; height: 22px; color: var(--lk-roxo); transition: transform .2s ease; }
.lk-acordeao__item[open] > summary .lk-icone { transform: rotate(180deg); }
.lk-acordeao__item > summary .lk-acordeao__titulo { display: flex; align-items: center; gap: 10px; }
.lk-acordeao__corpo { padding: 0 0 18px; color: var(--lk-tinta-2); }
.lk-acordeao__corpo p + p { margin-top: 10px; }
.lk-acordeao__corpo ul { padding-left: 18px; list-style: disc; }
.lk-acordeao__corpo li + li { margin-top: 4px; }

/* --- Secções de acordeões (texto estreito): envio, perguntas frequentes ---
   Celular e tablet: título por cima dos acordeões (coluna de leitura até 760 px).
   Desktop (≥ 1024 px): duas colunas; à esquerda (1/3) o título, uma frase curta e o cartão
   "Ainda com dúvidas?", fixos ao rolar; à direita (2/3) os acordeões. */
.lk-duas-colunas__principal { max-width: 760px; }
.lk-duas-colunas__frase, .lk-apoio { display: none; }
@media (min-width: 1024px) {
  .lk-duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; align-items: start; }
  .lk-duas-colunas__lado { position: sticky; top: calc(var(--lk-cabecalho) + 24px); display: grid; gap: 14px; justify-items: start; }
  .lk-duas-colunas__lado .lk-titulo-secao { margin-bottom: 0; }
  .lk-duas-colunas__frase { display: block; color: var(--lk-tinta-2); }
  .lk-duas-colunas__movel { display: none; }
  .lk-duas-colunas__principal { max-width: none; }
  .lk-apoio { display: grid; gap: 8px; justify-self: stretch; margin-top: 10px; padding: 20px; border: 1px solid var(--lk-cinza-2); border-radius: 16px; background: var(--lk-branco); }
  .lk-apoio__titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.0625rem; color: var(--lk-roxo); }
  .lk-apoio__titulo .lk-icone { width: 22px; height: 22px; color: var(--lk-verde); }
  .lk-apoio__texto { color: var(--lk-tinta-2); }
  .lk-apoio .lk-botao { width: 100%; margin-top: 6px; }
  .lk-apoio__horario { display: flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--lk-tinta-3); }
  .lk-apoio__horario .lk-icone { width: 16px; height: 16px; }
}

/* --- Campos de formulário ----------------------------------------------- */
.lk-campo { display: grid; gap: 6px; margin-bottom: 14px; }
.lk-campo label { font-weight: 600; font-size: .9375rem; }
.lk-campo input, .lk-campo textarea, .lk-campo select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--lk-cinza-3);
  border-radius: var(--lk-raio-p);
  background: var(--lk-branco);
}
.lk-campo textarea { min-height: 110px; resize: vertical; }
.lk-campo input:focus, .lk-campo textarea:focus { border-color: var(--lk-roxo); outline: 2px solid var(--lk-roxo-linha); outline-offset: 0; }
.lk-escolha { display: inline-flex; align-items: center; gap: 10px; min-height: var(--lk-alvo); cursor: pointer; }
.lk-escolha input { width: 20px; height: 20px; accent-color: var(--lk-roxo); margin: 0; }

/* --- Aviso/toast -------------------------------------------------------- */
.lk-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 16px);
  background: var(--lk-tinta);
  color: var(--lk-branco);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9375rem;
  box-shadow: var(--lk-sombra);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
  max-width: calc(100% - 32px);
  text-align: center;
}
.lk-toast.e-visivel { opacity: 1; transform: translate(-50%, 0); }

/* --- Rodapé ------------------------------------------------------------- */
.lk-rodape { background: var(--lk-roxo); color: rgba(255, 255, 255, .85); padding: 40px 0 28px; font-size: .9375rem; }
.lk-rodape a { color: var(--lk-branco); }
.lk-rodape__grelha { display: grid; gap: 28px; }
.lk-rodape__logo img { height: 34px; width: auto; }
.lk-rodape__marca p { margin-top: 12px; max-width: 34ch; }
.lk-rodape__titulo { color: var(--lk-branco); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.lk-rodape__links li + li { margin-top: 2px; }
.lk-rodape__links a { display: inline-flex; align-items: center; min-height: var(--lk-alvo); text-decoration: none; }
.lk-rodape__links a:hover { text-decoration: underline; }
.lk-rodape .lk-pagamento { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: var(--lk-branco); }
.lk-rodape__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 16px; font-size: .8125rem; color: rgba(255, 255, 255, .72); }
.lk-rodape__legal p + p { margin-top: 6px; }
.lk-rodape__contacto { margin-top: 14px; }
.lk-livro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--lk-alvo);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--lk-raio-p);
  text-decoration: none !important;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .06);
}
.lk-livro .lk-icone { width: 22px; height: 22px; }
@media (min-width: 768px) {
  .lk-rodape__grelha { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
  .lk-rodape__legal { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --- Avisos do WooCommerce (sucesso, informação e erro) ------------------ */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  display: block;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--lk-raio-p);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
}
.woocommerce-message { background: var(--lk-verde-fundo); color: var(--lk-verde); }
.woocommerce-info { background: var(--lk-roxo-tinta); color: var(--lk-roxo); }
.woocommerce-error { background: #FDECEA; color: var(--lk-erro); }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: inherit; font-weight: 700; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lk-avisos:has(.woocommerce-notices-wrapper:empty) { display: none; }
.lk-avisos { padding-top: 12px; }