/* ==========================================================================
   Ele & Ela Modas — Design System
   Porangatu-GO · mobile-first · alvo de projeto 390 × 844

   Fonte única da verdade visual. Nenhuma tela escreve cor, sombra ou raio na
   mão: se está aqui, muda em todo lugar de uma vez.

   Paleta derivada por amostragem de histograma sobre design/assets/instagram/
   e conferida contra a fachada da loja (letreiro dourado sobre preto).
   Razões de contraste MEDIDAS em WCAG 2.1, não estimadas.
   ========================================================================== */

:root {
  /* ---------- Marca ---------- */
  --onyx:        #0E0E0E;   /* fundo do logo. Header, footer, tab bar, hero  */
  --carvao:      #1C1A17;   /* superfície escura elevada                     */
  --couro:       #6B4A2E;   /* couro das fotos. Secundária, bordas, ícones   */
  --terra:       #8C5A3C;   /* couro claro, hover em fundo escuro            */
  --areia:       #F5EFE6;   /* neutro quente. Card, faixas                   */
  --creme:       #FBF8F3;   /* fundo base do app                             */

  /* ---------- Dourado — LEIA A REGRA ----------
     --ouro sobre creme dá 2,51:1. Reprova até como elemento gráfico (3:1).

       ✔  --ouro        como PREENCHIMENTO, com --tinta por cima   → 7,02:1
       ✔  --ouro        como TEXTO sobre --onyx                    → 7,25:1
       ✔  --ouro-claro  como TEXTO sobre --onyx                    → 12,51:1
       ✔  --ouro-texto  como TEXTO sobre --creme / --areia         →  5,07:1
       ✘  --ouro        como TEXTO ou BORDA sobre fundo claro      →  2,51:1 ✗
  */
  --ouro:        #C9962F;
  --ouro-claro:  #E7CE8C;
  --ouro-texto:  #8C6316;
  --ouro-fraco:  #F0E2C2;

  /* ---------- Tinta ---------- */
  --tinta:       #141210;   /* corpo sobre creme          17,64:1  AAA       */
  --tinta-suave: #5C544C;   /* secundário sobre creme      7,01:1  AAA       */
  --tinta-clara: #FBF8F3;   /* sobre onyx                 18,22:1  AAA       */
  --tinta-fraca: #8A8175;   /* só decorativo, nunca texto essencial          */

  /* ---------- Semântico ---------- */
  --pix:         #146B3F;   --pix-fundo:   #E3F1E8;
  --erro:        #B3261E;   --erro-fundo:  #FBE9E7;
  --aviso:       #8A5A10;   --aviso-fundo: #FBF0DC;

  /* ---------- Bordas ---------- */
  --borda:        #E4DACB;
  --borda-forte:  #C9BBA6;
  --borda-escura: #2E2A25;

  /* ---------- Tipografia ----------
     Wordmark = SVG inline: nenhuma fonte extra entra na rede.
     Bitter e Inter são self-hosted quando os woff2 estiverem em /fonts
     (ver README). Sem eles, a pilha cai em Georgia / system-ui, que é um
     fallback honesto e custa zero KB.                                       */
  --fonte-titulo: "Bitter", Georgia, "Times New Roman", serif;
  --fonte-texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-12: 0.75rem;  --t-14: 0.875rem;  --t-16: 1rem;
  --t-20: 1.25rem;  --t-26: 1.625rem;  --t-34: 2.125rem;

  --peso-normal: 400;  --peso-forte: 600;  --peso-titulo: 700;
  --altura-texto: 1.55;  --altura-titulo: 1.15;

  /* ---------- Espaço (escala 4px) ---------- */
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px; --e-6: 32px;  --e-7: 48px;  --e-8: 64px;

  /* ---------- Forma ---------- */
  --raio-p: 6px;  --raio-m: 10px;  --raio-g: 16px;  --pill: 999px;
  --sombra-1: 0 1px 2px rgb(20 18 16 / 0.06);
  --sombra-2: 0 4px 16px rgb(20 18 16 / 0.10);
  --sombra-barra: 0 -2px 12px rgb(20 18 16 / 0.12);

  /* ---------- Toque (WCAG 2.5.5) ---------- */
  --alvo-min: 44px;
  --alvo-respiro: 8px;

  /* ---------- Movimento ---------- */
  --rapido: 120ms;  --normal: 200ms;  --lento: 320ms;
  --curva: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --largura-app: 520px;
  --largura-max: 1200px;
  --barra-inferior: 56px;
  --faixa-instalar: 64px;
  --proporcao-produto: 3 / 4;   /* TODA foto de produto. CLS = 0.            */
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-size: var(--t-16);            /* corpo nunca abaixo de 16px          */
  line-height: var(--altura-texto);
  -webkit-font-smoothing: antialiased;
  /* A barra inferior é fixa: sem esta reserva ela cobre o último produto.  */
  padding-bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--fonte-titulo); line-height: var(--altura-titulo); margin: 0; }

img { max-width: 100%; display: block; }

a { color: var(--ouro-texto); }

button { font: inherit; }

/* Foco sempre visível. O contorno muda conforme o fundo. */
:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 2px; border-radius: var(--raio-p); }
.sobre-escuro :focus-visible, .topo :focus-visible, .tabs :focus-visible,
.faixa :focus-visible { outline-color: var(--ouro); }

/* No celular :hover não existe. Nada essencial pode depender dele. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: var(--sombra-2); }
  .btn:hover:not([disabled]) { filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.oculto, [hidden] { display: none !important; }

/* Texto só para leitor de tela. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.envelope { max-width: var(--largura-app); margin: 0 auto; }

/* ==========================================================================
   Elemento-assinatura: a costura de selaria

   O nome da loja É uma dualidade; ela virou o gesto central da interface.
   Em CSS puro: zero requisição, herda a cor do tema. Reaparece como divisor
   de seção e como borda superior da barra de compra.
   ========================================================================== */

.costura {
  height: 7px;
  opacity: 0.55;
  background-image: repeating-linear-gradient(64deg,
      var(--couro) 0 2.4px, transparent 2.4px 7.5px);
}
.costura--clara {
  opacity: 0.75;
  background-image: repeating-linear-gradient(64deg,
      var(--ouro-claro) 0 2.4px, transparent 2.4px 7.5px);
}

/* ==========================================================================
   §12.1 — Faixa de instalação

   Duas regras que protegem o SEO e o CLS:
   1. faixa FINA (64px), nunca tela cheia: interstitial que cobre o conteúdo
      em celular é penalizado pelo Google e briga com a §11;
   2. nasce no HTML do shell com a altura já reservada — injetar por JS depois
      do load empurra o conteúdo e estoura a meta de CLS ≤ 0,05.

   O estado "instalado" é resolvido por media query + um atributo posto por um
   script inline no <head>, antes do primeiro paint. Nenhum dos dois causa
   deslocamento.
   ========================================================================== */

.faixa {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 10px 6px 10px 10px;      /* 10 + 44 + 10 = 64px, alvo de toque OK */
  min-height: var(--faixa-instalar);
  background: var(--carvao);
  border-bottom: 1px solid var(--borda-escura);
}
.faixa .chapeu { width: 30px; height: 30px; flex: 0 0 30px; }
.faixa .txt { flex: 1; min-width: 0; line-height: 1.28; }
.faixa .txt b { display: block; color: var(--ouro-claro); font-size: 13px; }
.faixa .txt span {
  display: block; color: #9A9184; font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faixa .instalar {
  min-height: var(--alvo-min); padding: 0 15px; border: 0; border-radius: var(--pill);
  background: var(--ouro); color: var(--tinta); font-size: 13px; font-weight: var(--peso-titulo);
  cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.faixa .fechar {
  width: var(--alvo-min); height: var(--alvo-min); flex: 0 0 var(--alvo-min);
  background: none; border: 0; color: #7C7367; font-size: 15px; cursor: pointer;
}

/* Instalado, ou dispensado nesta sessão: a faixa não existe. */
html[data-instalado] .faixa,
html[data-faixa-fechada] .faixa { display: none; }
@media (display-mode: standalone) { .faixa { display: none; } }

/* ==========================================================================
   §12.2 — Card de pré-permissão de notificação

   NUNCA chamar Notification.requestPermission() no carregamento: a negação é
   permanente e o Chrome ainda passa o site para a interface silenciosa. Este
   card explica o valor e só chama o prompt real no toque do botão.
   ========================================================================== */

.card-notif {
  margin: var(--e-3); padding: var(--e-4); border-radius: var(--raio-g);
  background: var(--areia); border: 1.5px solid var(--borda-forte);
}
.card-notif b { display: block; font-size: 15px; margin-bottom: var(--e-1); }
.card-notif p { margin: 0 0 var(--e-3); font-size: 13px; color: var(--tinta-suave); line-height: 1.45; }
.card-notif .acoes { display: flex; align-items: center; gap: 14px; }
.card-notif .ativar {
  min-height: var(--alvo-min); padding: 0 18px; border: 0; border-radius: var(--pill);
  background: var(--onyx); color: var(--ouro-claro); font-size: 14px;
  font-weight: var(--peso-titulo); cursor: pointer;
}
.card-notif .depois {
  background: none; border: 0; color: var(--tinta-suave); font-size: 13px;
  cursor: pointer; text-decoration: underline; min-height: var(--alvo-min);
}

/* ==========================================================================
   Topo
   ========================================================================== */

.topo { background: var(--onyx); padding: var(--e-3) var(--e-4) 0; }
.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); min-height: var(--alvo-min);
  max-width: var(--largura-app); margin: 0 auto;
}
.topo svg.marca { height: 20px; width: auto; color: var(--ouro-claro); }
.topo a.marca-link { display: inline-flex; align-items: center; min-height: var(--alvo-min); }

.icone {
  width: var(--alvo-min); height: var(--alvo-min); display: grid; place-items: center;
  color: var(--ouro-claro); background: none; border: 0; cursor: pointer; text-decoration: none;
}
.icone svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* Alternador Ele | Ela — a assinatura. Alterna o catálogo inteiro. */
.alterna {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0 14px; max-width: var(--largura-app); margin: 0 auto;
}
.alterna button {
  flex: 1; min-height: var(--alvo-min); background: none; border: 0; cursor: pointer;
  font-family: var(--fonte-titulo); font-size: 15px; font-weight: var(--peso-titulo);
  letter-spacing: 0.26em; color: var(--tinta-fraca); text-transform: uppercase; padding: 0;
}
.alterna button[aria-pressed="true"] { color: var(--ouro-claro); }
.alterna .fio {
  width: 76px; height: 8px; flex: 0 0 76px; opacity: 0.8;
  background-image: repeating-linear-gradient(64deg,
      var(--ouro-claro) 0 2.4px, transparent 2.4px 7.5px);
}

/* ==========================================================================
   Chips de filtro
   ========================================================================== */

.chips {
  display: flex; gap: var(--e-2); padding: var(--e-3) var(--e-4);
  overflow-x: auto; background: var(--creme); border-bottom: 1px solid var(--borda);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { height: 0; }
.chip {
  flex: 0 0 auto; min-height: var(--alvo-min); padding: 0 var(--e-4);
  border-radius: var(--pill); border: 1.5px solid var(--borda-forte);
  background: var(--areia); color: var(--couro); font-size: 13px;
  font-weight: var(--peso-forte); display: grid; place-items: center;
  white-space: nowrap; cursor: pointer; text-decoration: none;
}
.chip[aria-pressed="true"], .chip.ativo {
  background: var(--onyx); color: var(--ouro-claro); border-color: var(--onyx);
}

/* ==========================================================================
   Grade de produtos — 2 colunas, densa, estilo Shein
   ========================================================================== */

.grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--borda); padding: 2px 2px 0;
  /* A grade abaixo da dobra não é layoutada até chegar perto: ajuda o INP. */
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}
.card {
  background: var(--creme); padding-bottom: 10px; cursor: pointer;
  text-decoration: none; color: inherit; display: block;
}
.card .foto {
  aspect-ratio: var(--proporcao-produto);   /* CLS = 0, mesmo antes da foto  */
  overflow: hidden; background: var(--areia); position: relative;
}
.card .foto img { width: 100%; height: 100%; object-fit: cover; }
.selo {
  position: absolute; top: var(--e-2); left: var(--e-2);
  background: var(--onyx); color: var(--ouro-claro); font-size: 10px;
  font-weight: var(--peso-forte); letter-spacing: 0.1em; padding: 4px var(--e-2);
  border-radius: var(--raio-p); text-transform: uppercase;
}
.selo--esgotado { background: var(--erro); color: #fff; }
.card h3 {
  font-family: var(--fonte-texto); font-size: 13px; font-weight: var(--peso-normal);
  color: var(--tinta); margin: var(--e-2) 10px 2px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .preco { margin: 0 10px; }
.card .parc { margin: 2px 10px 0; font-size: 11px; color: var(--tinta-suave); }

.preco {
  font-variant-numeric: tabular-nums; font-weight: var(--peso-forte); font-size: 15px;
}
.preco .de {
  color: var(--tinta-suave); font-size: 12px; text-decoration: line-through;
  margin-left: 6px; font-weight: var(--peso-normal);
}

.secao { padding: var(--e-5) var(--e-4) 6px; background: var(--creme); }
.secao h2 { font-size: 19px; }
.secao p { margin: 2px 0 0; font-size: 13px; color: var(--tinta-suave); }

/* ==========================================================================
   Barra inferior fixa (thumb zone)
   A ação principal de cada tela vive na metade inferior. Nada de "Pagar"
   no topo.
   ========================================================================== */

.tabs {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  display: flex; background: var(--onyx);
  box-shadow: 0 -2px 12px rgb(20 18 16 / 0.25);
  /* Sem isto o botão fica embaixo da barra de gestos do iPhone. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs a {
  flex: 1; min-height: var(--barra-inferior); display: grid; place-items: center;
  gap: 2px; color: var(--tinta-fraca); text-decoration: none; font-size: 10px;
  padding: 6px 0 8px;
}
.tabs a[aria-current] { color: var(--ouro-claro); }
.tabs svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tabs .bolha { position: relative; display: grid; place-items: center; }
.tabs .bolha[data-qtd]:not([data-qtd="0"])::after {
  content: attr(data-qtd); position: absolute; top: -4px; right: -10px;
  background: var(--ouro); color: var(--tinta); font-size: 9px;
  font-weight: var(--peso-titulo); min-width: 15px; height: 15px;
  border-radius: var(--pill); display: grid; place-items: center; padding: 0 3px;
}

/* ==========================================================================
   Ficha do produto — a tela que decide a venda
   ========================================================================== */

.galeria {
  position: relative; background: var(--areia);
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  aspect-ratio: var(--proporcao-produto); scrollbar-width: none;
}
.galeria::-webkit-scrollbar { height: 0; }
.galeria img {
  width: 100%; height: 100%; flex: 0 0 100%; object-fit: cover; scroll-snap-align: center;
}
.voltar {
  position: absolute; top: 10px; left: 10px;
  width: var(--alvo-min); height: var(--alvo-min); border-radius: var(--pill);
  background: rgb(14 14 14 / 0.62); color: #fff; display: grid; place-items: center;
  border: 0; cursor: pointer;
}
.voltar svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.pontos {
  position: absolute; bottom: var(--e-3); left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center;
}
.pontos i { width: 6px; height: 6px; border-radius: var(--pill); background: rgb(255 255 255 / 0.5); }
.pontos i.on { background: #fff; width: 18px; }

.ficha { padding: var(--e-4); }
.ficha .rotulo {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ouro-texto); font-weight: var(--peso-forte);
}
.ficha h1 { font-size: 21px; margin: 6px 0 10px; }
.ficha .valor { font-size: 24px; font-weight: var(--peso-titulo); font-variant-numeric: tabular-nums; }
.ficha .valor small {
  font-size: 13px; font-weight: var(--peso-normal); color: var(--tinta-suave); margin-left: var(--e-2);
}
.ficha .descricao { margin-top: var(--e-5); font-size: 14px; color: var(--tinta-suave); }

.campo { margin-top: var(--e-5); }
.campo .cab {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px;
}
.campo .cab b { font-size: 14px; }
.campo .cab a, .campo .cab button.link {
  font-size: 13px; color: var(--ouro-texto); text-decoration: underline;
  display: inline-flex; align-items: center; min-height: var(--alvo-min);
  background: none; border: 0; cursor: pointer;
}

.tamanhos { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.tam {
  min-width: 52px; min-height: var(--alvo-min); border-radius: var(--raio-m);
  border: 1.5px solid var(--borda-forte); background: var(--creme);
  font-size: 14px; font-weight: var(--peso-forte); cursor: pointer; color: var(--tinta);
}
.tam[aria-pressed="true"] { background: var(--onyx); color: var(--ouro-claro); border-color: var(--onyx); }
/* Esgotado aparece RISCADO e desabilitado, nunca sumido: some a peça,
   some a confiança. */
.tam[disabled] {
  color: #B6ADA0; background: var(--areia); border-style: dashed;
  cursor: not-allowed; text-decoration: line-through;
}

.qtd { display: flex; align-items: center; gap: 14px; }
.qtd button {
  width: var(--alvo-min); height: var(--alvo-min); border-radius: var(--pill);
  border: 1.5px solid var(--borda-forte); background: var(--creme);
  font-size: 20px; line-height: 1; cursor: pointer; color: var(--tinta);
}
.qtd span { font-size: 17px; font-weight: var(--peso-forte); min-width: 22px; text-align: center; }
.estoque { margin: 10px 0 0; font-size: 13px; color: var(--pix); font-weight: var(--peso-forte); }
.estoque--baixo { color: var(--aviso); }
.estoque--zero { color: var(--erro); }

/* ==========================================================================
   Barra de compra — fixa, na zona do polegar
   ========================================================================== */

.barra-compra {
  position: fixed; inset-inline: 0;
  bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom, 0px));
  z-index: 30; background: var(--creme); box-shadow: var(--sombra-barra);
}
.barra-compra .linha {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4) var(--e-4);
  max-width: var(--largura-app); margin: 0 auto;
}
.barra-compra .total {
  font-size: 19px; font-weight: var(--peso-titulo);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Quando a barra de compra existe, o conteúdo precisa de mais respiro. */
body.com-barra-compra { padding-bottom: calc(var(--barra-inferior) + 78px + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   Botões

   O botão desabilitado DIZ O QUE FALTA ("Escolha o tamanho", "Aceite os
   termos para pagar") em vez de deixar a pessoa tocar e receber erro.
   ========================================================================== */

.btn {
  flex: 1; min-height: 50px; border: 0; border-radius: var(--pill);
  background: var(--ouro); color: var(--tinta); font-size: 15px;
  font-weight: var(--peso-titulo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e-2); text-decoration: none; padding: 0 var(--e-5);
  transition: filter var(--rapido) var(--curva);
}
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--areia); color: #8A8175; border: 1.5px solid var(--borda-forte);
  cursor: not-allowed; filter: none;
}
.btn--verde { background: var(--pix); color: #fff; }
.btn--escuro { background: var(--onyx); color: var(--ouro-claro); }
.btn--vazado {
  background: var(--creme); color: var(--tinta);
  border: 1.5px solid var(--onyx);
}
.btn--bloco { width: 100%; }
.btn--peq { min-height: var(--alvo-min); font-size: 14px; padding: 0 var(--e-4); }

/* ==========================================================================
   Formulários
   ========================================================================== */

.form { padding: var(--e-4); max-width: var(--largura-app); margin: 0 auto; }
.rotulo {
  display: block; font-size: 14px; font-weight: var(--peso-forte);
  margin: var(--e-4) 0 6px;
}
.rotulo .dica { font-weight: var(--peso-normal); color: var(--tinta-suave); font-size: 13px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 50px; padding: 0 var(--e-3);
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio-m);
  background: #fff; color: var(--tinta);
  font-family: inherit;
  font-size: var(--t-16);   /* 16px impede o iOS de dar zoom ao focar */
}
textarea.entrada { min-height: 88px; padding: var(--e-3); line-height: 1.45; }
.entrada:focus { border-color: var(--couro); }
.entrada[aria-invalid="true"] { border-color: var(--erro); background: var(--erro-fundo); }
.erro-campo { color: var(--erro); font-size: 13px; margin: 6px 0 0; }

.opcoes { display: grid; gap: var(--e-2); }
.opcao {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3); min-height: 56px;
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio-m);
  background: var(--creme); cursor: pointer;
}
.opcao[aria-checked="true"], .opcao:has(input:checked) {
  border-color: var(--onyx); background: var(--areia);
}
.opcao input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--pix); margin: 2px 0 0; }
.opcao b { display: block; font-size: 15px; }
.opcao span { font-size: 13px; color: var(--tinta-suave); }

/* ==========================================================================
   §14.1 — Aceite dos termos

   O resumo aparece NA PRÓPRIA TELA, não escondido atrás do link: o
   Decreto 7.962/2013 exige o sumário do contrato antes da contratação, e é
   isso que dá validade prática ao aceite.
   ========================================================================== */

.aceite {
  border: 2px solid var(--borda-forte); border-radius: var(--raio-g);
  padding: 13px; background: var(--areia); margin-bottom: 18px;
}
.aceite h3 {
  font-family: var(--fonte-texto); margin: 0 0 var(--e-2); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro-texto);
}
.aceite ul { margin: 0 0 11px; padding-left: 17px; font-size: 12.5px; line-height: 1.55; }
.aceite li { margin-bottom: 3px; }
.aceite label {
  display: flex; gap: 9px; align-items: center; font-size: 13px;
  cursor: pointer; min-height: var(--alvo-min); line-height: 1.35;
}
.aceite input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--pix); margin: 0; }

/* ==========================================================================
   Pagamento
   ========================================================================== */

.pgto { padding: 18px var(--e-4); max-width: var(--largura-app); margin: 0 auto; }
.pgto h1 { font-size: 20px; margin: 0 0 var(--e-1); }
.pgto .sub { font-size: 13px; color: var(--tinta-suave); margin: 0 0 18px; }

.metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--e-5); }
.metodo {
  border: 2px solid var(--borda-forte); border-radius: var(--raio-g);
  padding: 14px var(--e-3); background: var(--creme); text-align: left;
  cursor: pointer; min-height: 76px;
}
.metodo[aria-pressed="true"] { border-color: var(--onyx); background: var(--areia); }
.metodo b { display: block; font-size: 15px; }
.metodo span { font-size: 12px; color: var(--tinta-suave); }

.qr {
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio-g);
  padding: var(--e-4); text-align: center;
}
.qr .quadro {
  width: 220px; height: 220px; margin: 0 auto 14px;
  display: grid; place-items: center; background: #fff;
}
.qr .quadro img { width: 100%; height: 100%; object-fit: contain; }
.copiar {
  width: 100%; min-height: 48px; border-radius: var(--pill);
  border: 1.5px solid var(--onyx); background: var(--creme);
  font-size: 14px; font-weight: var(--peso-titulo); cursor: pointer; color: var(--tinta);
}
.relogio {
  margin: 14px 0 0; font-size: 14px; font-weight: var(--peso-forte);
  color: var(--erro); font-variant-numeric: tabular-nums;
}
.tranquilo { margin: var(--e-2) 0 0; font-size: 13px; color: var(--tinta-suave); line-height: 1.5; }

.resumo {
  margin-top: var(--e-5); border-top: 1px solid var(--borda);
  padding-top: 14px; font-size: 14px;
}
.resumo div { display: flex; justify-content: space-between; padding: 5px 0; gap: var(--e-3); }
.resumo .tot {
  font-weight: var(--peso-titulo); font-size: 17px;
  border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 10px;
}
.nota {
  margin-top: var(--e-4); background: var(--pix-fundo); border-radius: var(--raio-m);
  padding: 11px 13px; font-size: 12.5px; color: #0F5731; line-height: 1.5;
}
.nota--aviso { background: var(--aviso-fundo); color: var(--aviso); }
.nota--erro { background: var(--erro-fundo); color: var(--erro); }

/* ==========================================================================
   Sacola
   ========================================================================== */

.item-sacola {
  display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda); align-items: flex-start;
}
.item-sacola .foto {
  width: 72px; flex: 0 0 72px; aspect-ratio: var(--proporcao-produto);
  border-radius: var(--raio-p); overflow: hidden; background: var(--areia);
}
.item-sacola .foto img { width: 100%; height: 100%; object-fit: cover; }
.item-sacola .corpo { flex: 1; min-width: 0; }
.item-sacola .nome { font-size: 14px; margin: 0 0 2px; }
.item-sacola .var { font-size: 12px; color: var(--tinta-suave); margin: 0 0 var(--e-2); }
.item-sacola .linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.item-sacola .remover {
  background: none; border: 0; color: var(--tinta-suave); font-size: 13px;
  text-decoration: underline; cursor: pointer; min-height: var(--alvo-min);
}

/* ==========================================================================
   Estados: vazio, carregando, erro
   ========================================================================== */

.vazio { padding: var(--e-8) var(--e-5); text-align: center; color: var(--tinta-suave); }
.vazio .icone-grande { font-size: 40px; margin-bottom: var(--e-3); }
.vazio h2 { font-size: 19px; color: var(--tinta); margin-bottom: var(--e-2); }
.vazio p { margin: 0 0 var(--e-5); font-size: 14px; }

/* Esqueleto com a MESMA proporção do card: carregar não pode empurrar nada. */
.esqueleto { background: var(--areia); border-radius: var(--raio-p); overflow: hidden; position: relative; }
.esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
  animation: brilho 1.2s infinite;
}
@keyframes brilho { to { transform: translateX(100%); } }
.esqueleto--foto { aspect-ratio: var(--proporcao-produto); border-radius: 0; }
.esqueleto--linha { height: 13px; margin: var(--e-2) 10px 0; }
.esqueleto--linha.curta { width: 45%; }

/* ==========================================================================
   Conteúdo de política (entrega, trocas, privacidade, termos)
   ========================================================================== */

.texto { padding: var(--e-5) var(--e-4) var(--e-7); max-width: var(--largura-app); margin: 0 auto; }
.texto h1 { font-size: var(--t-26); margin-bottom: var(--e-2); }
.texto h2 { font-size: 19px; margin: var(--e-6) 0 var(--e-2); }
.texto h3 { font-size: 16px; margin: var(--e-5) 0 var(--e-2); }
.texto p, .texto li { font-size: 15px; line-height: 1.62; }
.texto ul, .texto ol { padding-left: var(--e-5); }
.texto .destaque {
  background: var(--areia); border-left: 3px solid var(--couro);
  padding: var(--e-3) var(--e-4); border-radius: 0 var(--raio-m) var(--raio-m) 0;
  margin: var(--e-4) 0;
}
.tabela { width: 100%; border-collapse: collapse; margin: var(--e-4) 0; font-size: 14px; }
.tabela th, .tabela td { padding: 10px var(--e-3); text-align: left; border-bottom: 1px solid var(--borda); }
.tabela th { background: var(--areia); font-size: 13px; }
.rolagem-lateral { overflow-x: auto; }

/* ==========================================================================
   Rodapé — Decreto 7.962/2013 exige razão social, CNPJ e endereço físico
   em local de destaque. Este rodapé é esse local.
   ========================================================================== */

.rodape {
  background: var(--onyx); color: #9A9184; padding: var(--e-6) var(--e-4) var(--e-7);
  font-size: 13px; line-height: 1.6;
}
.rodape .envelope { max-width: var(--largura-app); margin: 0 auto; }
.rodape b { color: var(--ouro-claro); font-weight: var(--peso-forte); }
.rodape a { color: var(--ouro-claro); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape .links {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin: var(--e-4) 0; padding-top: var(--e-4); border-top: 1px solid var(--borda-escura);
}
.rodape .links a { min-height: var(--alvo-min); display: inline-flex; align-items: center; }
.rodape .fino { font-size: 11px; color: #6E675C; margin-top: var(--e-4); }

/* ==========================================================================
   Aviso flutuante (toast)
   ========================================================================== */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--barra-inferior) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 60; background: var(--onyx); color: var(--tinta-clara);
  padding: var(--e-3) var(--e-5); border-radius: var(--pill);
  font-size: 14px; box-shadow: var(--sombra-2); max-width: calc(100vw - 32px);
  text-align: center;
}
.toast--erro { background: var(--erro); color: #fff; }
.toast--ok { background: var(--pix); color: #fff; }

/* Barra de progresso global das chamadas de API (net.js). */
#progresso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--ouro); z-index: 90;
  transition: width var(--normal) var(--curva), opacity var(--normal);
}

/* ==========================================================================
   Painel administrativo
   A dona usa isso no celular, de pé, na loja. Uma ação principal por tela.
   ========================================================================== */

.painel { padding: var(--e-4); max-width: var(--largura-app); margin: 0 auto; }
.painel-topo {
  background: var(--onyx); color: var(--tinta-clara);
  padding: var(--e-4); text-align: center;
}
.painel-topo .numero {
  font-family: var(--fonte-titulo); font-size: var(--t-26); color: var(--ouro-claro);
}
.painel-topo .aviso { color: var(--ouro-claro); font-size: 14px; margin-top: 6px; }

.nav-grade { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--e-2); margin-top: var(--e-4); }
.nav-tile {
  min-height: 76px; border-radius: var(--raio-m); border: 1.5px solid var(--borda-forte);
  background: var(--areia); display: grid; place-items: center; gap: 2px;
  text-decoration: none; color: var(--tinta); font-size: 13px;
  font-weight: var(--peso-forte); padding: var(--e-2);
}
.nav-tile .contagem { font-size: 11px; color: var(--tinta-suave); font-weight: var(--peso-normal); }

.cartao {
  border: 1.5px solid var(--borda-forte); border-radius: var(--raio-g);
  background: var(--creme); padding: var(--e-4); margin-bottom: var(--e-3);
}
.cartao .cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e-2); margin-bottom: var(--e-2);
}
.cartao .cab b { font-size: 16px; }
.cartao .acoes { display: flex; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }
.cartao .acoes .btn { flex: 1 1 auto; }

.etiqueta {
  display: inline-block; font-size: 11px; font-weight: var(--peso-forte);
  padding: 4px 10px; border-radius: var(--pill); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.etiqueta--pago { background: var(--pix-fundo); color: var(--pix); }
.etiqueta--aguardando { background: var(--aviso-fundo); color: var(--aviso); }
.etiqueta--erro { background: var(--erro-fundo); color: var(--erro); }
.etiqueta--neutra { background: var(--areia); color: var(--tinta-suave); }

/* ==========================================================================
   Tablet e desktop — o projeto nasce no 390×844 e sobe daqui
   ========================================================================== */

@media (min-width: 640px) {
  .grade { grid-template-columns: repeat(3, 1fr); }
  :root { --largura-app: 640px; }
}

@media (min-width: 900px) {
  :root { --largura-app: 900px; }
  .grade { grid-template-columns: repeat(4, 1fr); gap: var(--e-3); background: transparent; padding: var(--e-3); }
  .card { border-radius: var(--raio-m); overflow: hidden; border: 1px solid var(--borda); }
  .chips, .secao, .ficha, .texto, .form, .pgto { max-width: var(--largura-app); margin-inline: auto; }
}

@media (min-width: 1100px) {
  :root { --largura-app: 1100px; }
  .grade { grid-template-columns: repeat(5, 1fr); }
}

/* ==========================================================================
   Painel: o shell é o mesmo, mas a moldura da loja não serve aqui

   A dona não precisa do alternador Ele | Ela, nem da sacola, nem da faixa de
   instalar enquanto cadastra produto. Esconder por rota evita manter um
   segundo shell — e um segundo shell é onde as duas identidades começam a
   divergir.
   ========================================================================== */

html[data-rota^="admin-"] .faixa,
html[data-rota^="admin-"] .alterna,
html[data-rota^="admin-"] .tabs,
html[data-rota^="admin-"] .rodape .links,
html[data-rota^="admin-"] .rodape .fino { display: none; }

html[data-rota^="admin-"] body { padding-bottom: 32px; }

/* Barra de ação do painel: fica no lugar da barra inferior da loja. */
html[data-rota^="admin-"] .barra-compra { bottom: 0; }
html[data-rota^="admin-"] body.com-barra-compra { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

/* Voltar do painel: o caminho de volta precisa estar sempre visível. */
.painel-voltar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--alvo-min); color: var(--ouro-texto);
  font-size: 14px; text-decoration: none;
}