/* ==========================================================================
   GutEase — componentes
   design.md §7, §8, §9. Depende de tokens.css e base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BOTOES  (design.md §8)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--r-md);
  min-height: 44px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out,
              border-color var(--dur-fast) ease-out,
              transform var(--dur-fast) ease-out;
}

.btn--primary {
  background: var(--forest-900);
  color: var(--on-forest);
  border: none;
  min-height: 52px;
  padding: 18px 32px;
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--forest-950); transform: translateY(-1px); }
/* No celular não existe hover, então o `translateY(0)` que estava aqui não
   mudava nada: o botão não dava nenhum sinal de que o toque chegou, e a
   página só reagia quando o checkout abria. Um afundamento de 2% responde
   dentro do quadro seguinte ao dedo (D132). */
.btn--primary:active { transform: scale(.98); box-shadow: var(--shadow-sm); }

/* Trava de destino (D49): sem URL o botao nao navega e diz por que. */
.btn[aria-disabled="true"] {
  background: var(--mute);
  /* Era --text-low. Com a paleta de D162 esse par dava 4.04:1 e reprovava —
     e este botao carrega "Checkout opening soon", que a pessoa PRECISA ler.
     --text-hi sobre o mesmo fundo da 6.04:1. O ar de desativado continua
     vindo do fundo palido contra o verde cheio do botao ativo, nao de um
     texto apagado. Ajusta design.md 8.1, que fixava --text-low. */
  color: var(--text-hi);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[data-loading="true"] { opacity: .72; cursor: progress; }

.btn--ghost {
  background: transparent;
  color: var(--text-hi);
  /* ESTE traco fica (D191), so mais macio. Botao fantasma nao tem fundo: o
     contorno E o botao, e sem ele nao ha nada que diga onde se toca. WCAG 2.2
     SC 1.4.11 pede 3:1 na fronteira de um controle; --text-low da 6.18:1
     sobre o ground. */
  border: 1px solid var(--text-low);
}
.btn--ghost:hover { border-color: var(--olive-600); background: var(--olive-100); }

/* Dentro de bloco escuro o CTA troca de fill (design.md §8.2) */
.on-dark .btn--primary {
  background: var(--lime-300);
  color: var(--text-hi);
  box-shadow: none;
}
.on-dark .btn--primary:hover { background: #D4F5D4; }   /* lime mais claro — D197 */
.on-dark .btn--ghost {
  border-color: rgba(0, 0, 0, .38);
  color: var(--text-hi-inv);
}
.on-dark .btn--ghost:hover {
  border-color: var(--lime-300);
  background: rgba(192, 240, 192, .12);   /* tinta do --lime-300 — D197 */
}

.btn--block { width: 100%; }
@media (min-width: 900px) { .btn--auto\@lg { width: auto; } }

/* Botao icone (menu, setas da galeria) */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  color: var(--text-hi);
  transition: background var(--dur-fast) ease-out;
}
.icon-btn:hover { background: var(--olive-100); }
.icon-btn svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   CARDS, CHIPS, PILLS  (design.md §7, §9)
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  /* SEM contorno (D191): a separacao vem da sombra, como ja era no card de
     beneficio desde D149 e em todos os cards de conteudo desde D175. */
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-md);
}
/* Card sobre --paper: sem borda, fundo creme. Card e fundo nunca no mesmo tom. */
.bg-paper .card { background: var(--cream-50); border-color: transparent; }
.on-dark .card {
  background: var(--forest-800);
  border-color: rgba(255, 255, 255, .20);
  box-shadow: none;
}

.chip {
  display: inline-block;
  background: var(--olive-100);
  color: var(--olive-700);
  border-radius: var(--r-sm);
  padding: 5px 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
}

/* Pill de sabor. NAO usa --olive-500 (D196): aquele token e o mesmo verde de acao, e a regra vale para qualquer verde:
   se algum dia ele voltar a ser um tom claro, branco em cima reprova. D41
   nao salva — ela vale a partir de 18.66px em negrito, e este pill esta em
   18px. Como ele nao esta na pagina hoje, o erro ficaria adormecido ate
   alguem reinseri-lo; por isso aponta para --forest-900, que e o mesmo matiz
   na luminosidade em que o branco passa (5.31).
   O --olive-500 continua existindo para superficie SEM texto em cima. */
.pill-flavor {
  display: inline-block;
  background: var(--forest-900);
  color: var(--on-forest);
  border-radius: var(--r-full);
  padding: 8px 22px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   PAINEL DE COMPRA  (specs/site.md §6.1)
   -------------------------------------------------------------------------- */

/* min-width:0 em toda a cadeia: item de grid nasce com min-width:auto, e a
   largura minima de conteudo dos cards empurraria o painel para fora da
   viewport em telas estreitas. */
/* 16px no mobile, 24px a partir de 600px: no celular cada folga entre toggle,
   cards, detalhes e CTA custa altura acima da dobra (D110). */
.panel { display: grid; gap: var(--sp-4); min-width: 0; }
@media (min-width: 600px) { .panel { gap: var(--sp-5); } }
.panel > * { min-width: 0; }

/* toggle de modalidade */
.toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--paper);
  border-radius: var(--r-full);
  padding: 4px;
  /* pan-y entrega o movimento horizontal para o gesto de troca (D131) e
     mantem a rolagem vertical nativa. Sem isso o navegador reivindica o
     arrasto como rolagem e dispara pointercancel: o gesto nunca completa.
     user-select impede o arrasto com mouse virar selecao de texto. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}

/* Pastilha que DESLIZA entre as duas metades (D132).

   Elemento de verdade, e nao `::before`: pseudo-elemento nao tem alca em JS,
   nao tem `getBoundingClientRect` e o `getComputedStyle` dele nao e confiavel
   para verificar posicao. Num projeto onde ja aconteceu de eu declarar
   "funciona" lendo o estado errado (P17, P19), o thumb precisa ser medivel.
   `position: absolute` mantem ele fora do grid de duas colunas, e o
   `aria-hidden` mantem o `role="tablist"` com apenas os dois `tab` dentro.
   Antes o verde era `background` do botão selecionado: trocar de modalidade
   apagava um retângulo e acendia o outro. Duas coisas piscando no lugar de
   uma coisa se movendo — é o que fazia o toggle parecer pesado, e é também o
   que tornava o arrasto de D131 ilegível, porque o gesto não tinha nada que
   acompanhasse o dedo. A pastilha é uma superfície só, e ela anda.
   Largura: o grid tem padding 4px de cada lado e gap 4px, logo cada coluna
   mede (100% - 12px) / 2. */
.toggle__thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: var(--r-full);
  background: var(--forest-900);
  /* `--toggle-pos` vai de 0 (compra unica) a 1 (assinatura). Como numero, ele
     deixa o arrasto de D131 escrever posicoes intermediarias: a pastilha
     acompanha o dedo em vez de esperar a soltura para pular de lado. */
  transform: translateX(calc((100% + 4px) * var(--toggle-pos, 0)));
  transition: transform var(--dur-card) var(--ease-out);
}
.toggle[data-mode="subscription"] { --toggle-pos: 1; }
/* Durante o arrasto quem manda e o dedo, entao a transicao sai do caminho —
   senao cada quadro do gesto ficaria 200ms atrasado em relacao ao toque. */
.toggle[data-arrastando="true"] .toggle__thumb { transition: none; }

.toggle__btn {
  position: relative;
  z-index: 1;
  min-height: 48px;
  /* Se ainda assim quebrar em duas linhas (telas muito estreitas), o grid
     centraliza os dois rotulos para que as duas metades do pill fiquem da
     mesma altura. */
  display: grid;
  place-items: center;
  line-height: 1.25;
  padding: 0 var(--sp-2);
  border-radius: var(--r-full);
  font-family: var(--font-text);
  font-weight: 600;
  /* clamp para "Subscribe & Save 20%" caber em uma linha a 375px: em duas
     linhas o toggle passa de 48 para 58px de altura (D110). */
  font-size: clamp(0.8125rem, 3.4vw, 0.875rem);
  color: var(--text-mid);
  text-align: center;
  transition: color var(--dur-fast) ease-out,
              transform var(--dur-press) ease-out;
}
.toggle__btn:active { transform: scale(.97); }
.toggle__btn:hover { color: var(--text-hi); }
/* Só a cor do texto muda aqui: o fundo agora é a pastilha que desliza. */
.toggle__btn[aria-selected="true"] { color: var(--text-hi-inv); }

/* cards de quantidade */
.qty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: stretch;
}
.qty__card {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  text-align: center;
  background: var(--paper);
  /* SEM contorno (D191). A separacao do fundo vem da sombra, igual aos cards
     de beneficio desde D149 e a todos os cards de conteudo desde D175.
     O que NAO pode sair daqui e o indicador de radio: ele e o sinal que
     identifica o controle, e continua com traco proprio. */
  box-shadow: var(--shadow-md);
  border-radius: var(--r-md);
  /* topo de 22px: deixa o indicador de radio (y 6..20, absoluto no canto)
     acima do nome sem sobrepor, em qualquer largura de card. */
  padding: 22px var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: box-shadow var(--dur-card) ease-out,
              background var(--dur-card) ease-out,
              transform var(--dur-press) ease-out;
}
@media (min-width: 420px) {
  .qty__card { padding-inline: var(--sp-2); }
}
/* Hover ganha um anel FINO de 1px, para nao virar sosia do selecionado, que
   usa 2px. A sombra e repetida na frente porque box-shadow nao acumula entre
   regras: quem declara por ultimo substitui a lista inteira. */
.qty__card:hover { box-shadow: var(--shadow-md), inset 0 0 0 1px var(--forest-900); }
/* Retorno tátil (D132): o card afunda enquanto o dedo está nele. Sem isto o
   toque ficava 200ms sem resposta — o tempo da troca de borda e fundo — e é
   nessa janela que a interface parece pesada. */
.qty__card:active { transform: scale(.97); }

/* Selecionado por TRES sinais, nunca so cor (design.md §9.1):
   borda 2px + fundo + indicador de radio. */
/* Borda de 2px sem mudar o tamanho da caixa: inset em vez de border,
   assim o card selecionado nao empurra os vizinhos. */
.qty__card[aria-checked="true"] {
  background: var(--olive-100);
  box-shadow: var(--shadow-md), inset 0 0 0 2px var(--forest-900);
}
/* Indicador no canto, fora do fluxo: em coluna ele custava 18px de altura em
   cada card, e tres cards altos empurram o CTA para longe da dobra. Continua
   sendo o terceiro sinal exigido por design.md 9.1, ao lado do anel e do fundo. */
.qty__radio {
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  /* ESTE traco fica (D191). Sai do quase-preto para --text-low, que e mais
     macio, mas nao pode sumir: com o contorno do card removido, o indicador
     passa a ser o que identifica o controle, e WCAG 2.2 SC 1.4.11 pede 3:1
     nisso. --text-low sobre branco da 6.90:1. */
  border: 2px solid var(--text-low);
  border-radius: var(--r-full);
}
.qty__card[aria-checked="true"] .qty__radio {
  border-color: var(--forest-900);
  background: radial-gradient(var(--forest-900) 0 45%, transparent 46%);
}
.qty__name  { font-weight: 600; font-size: var(--fs-body); }
.qty__supply{ font-size: var(--fs-caption); color: var(--text-low); }
/* Preco em Inter, nao na serifada de display: a Playfair nao traz o recurso
   OpenType "tnum" (medido: "111111" 227px vs "000000" 378px), entao o preco
   pularia de largura a cada troca de plano - o que design.md 3.3 proibe no
   bloco de compra. O mockup do cliente tambem usa sans no preco (D106).
   Fluido: "$134.97" em 1.5rem nao cabe em card de ~88px a 320px de viewport.
   O clamp desce ate 1.125rem, onde cabe, e sobe de volta no desktop. */
/* Preco e sufixo na mesma linha quando cabem, empilhados quando nao cabem.
   Em card largo sai "$49.99 total" numa linha so, como no mockup; em card
   estreito "$39.99 per 30 days" quebra sozinho, sem regra extra. */
.qty__pricerow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 4px;
  margin-top: var(--sp-2);
}
.qty__price {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: clamp(1.125rem, 5.2vw, 1.5rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-price) ease-out;
}
@media (min-width: 900px) { .qty__price { font-size: 1.5rem; } }
.qty__renewal { font-size: var(--fs-caption); color: var(--text-low); }
.qty__per     { font-size: var(--fs-caption); color: var(--text-low); }

.qty__badge {
  position: absolute;
  /* -18px: o badge tem 22px de altura, entao a base dele fica 2px acima do
     indicador de radio no canto (y 6..20). A -11px os dois se sobrepunham. */
  top: -18px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--forest-900);
  color: var(--on-forest);
  border-radius: var(--r-full);
  /* 8px de padding e .04em de tracking: com 12px e .08em o rotulo mais longo
     ("MOST POPULAR") media 113px dentro de um card de 101px e transbordava
     6px de cada lado. */
  padding: 3px 8px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* bloco Subscription Details — altura travada nas tres variacoes (D75) */
.details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  background: var(--olive-100);
  border-radius: var(--r-md);
  /* padding e gap enxutos: cada linha a menos aqui e uma linha a menos entre
     os cards de preco e o botao de compra no celular. */
  padding: var(--sp-3) var(--sp-4);
  /* Altura travada so na assinatura, onde as tres variacoes precisam nao
     mover o botao (D75). Na compra unica o bloco encolhe (D125). */
}
.details[data-mode="subscription"] {
  min-height: 132px;
}
.details__icon { color: var(--olive-600); flex: none; }
.details__icon svg { width: 28px; height: 28px; }
/* Hierarquia do bloco (D136). Antes o rotulo e a linha de cobranca tinham o
   MESMO tratamento — 16px peso 600 nos dois — e o resultado era um bloco com
   duas linhas de titulo. So que a linha de cobranca e, por D109, o unico
   lugar acima do botao onde o valor recorrente e a frequencia aparecem: e ela
   que cumpre o FTC/ROSCA. Ela tem de ser a coisa mais forte daqui, e o rotulo
   tem de calar. A redacao de site.md 6.1.1 nao muda: muda corpo e peso. */
.details__title {
  font-size: var(--fs-caption);      /* 12px */
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mid);
  line-height: 1.3;
}
.details__billing {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-hi);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
/* O valor. Inter 600 tabular pelo mesmo motivo do card de quantidade (P14):
   a serifada nao tem `tnum` e o numero pularia de largura a cada troca. */
.details__amount {
  font-size: 1.3125rem;              /* 21px */
  font-weight: 600;
  letter-spacing: -0.01em;
}
.details__body    { font-size: var(--fs-small); color: var(--text-mid); margin-top: var(--sp-1); }


/* D109: a linha de total acima do CTA foi removida a pedido do cliente. O valor
   cobrado continua no card selecionado (--fs-price, tabular) e, no modo
   assinatura, na linha "$X billed every N days" do bloco acima. Substitui D47. */

.panel__micro {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--text-mid);
}
.panel__micro svg { width: 16px; height: 16px; color: var(--olive-600); }
.panel__renewal { margin-top: var(--sp-3); text-align: center;
                  font-size: var(--fs-caption); color: var(--text-low); }
.panel__renewal a { display: inline-flex; align-items: center;
                    min-height: 44px; padding-inline: var(--sp-2); }

/* --------------------------------------------------------------------------
   GALERIA  (D90 — dots, nunca thumbs)
   -------------------------------------------------------------------------- */

/* min-width:0 e obrigatorio: item de grid nasce com min-width:auto e o track
   interno tem 6 slides de 100% cada, entao a largura minima de conteudo
   empurraria a coluna para fora da viewport. */
.gallery { position: relative; min-width: 0; }
.gallery__viewport {
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--cream-100);
}
/* `--ease-out` e nao a palavra-chave `ease-out` do CSS: o token do projeto e
   cubic-bezier(0.22, 1, 0.36, 1), que chega rapido e assenta, enquanto a
   palavra-chave (0, 0, 0.58, 1) arrasta o fim do percurso. Mesma duracao de
   240ms de design.md 12.1; o que muda e a curva, que e a do proprio token do
   design system (D132). */
.gallery__track {
  display: flex;
  transition: transform var(--dur-img) var(--ease-out);
  touch-action: pan-y;
  /* o trilho segue o dedo (D132): sem isto o arrasto vira selecao de texto
     no mouse e arrasto nativo de imagem no toque. */
  user-select: none;
  -webkit-user-select: none;
}
.gallery__slide { flex: 0 0 100%; }
.gallery__slide img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  -webkit-user-drag: none;
  /* O gesto pertence ao trilho, nunca a imagem. Sem isto, um arrasto lento no
     celular faz o iOS abrir o menu de "Salvar imagem" no meio do movimento e
     o swipe morre ali; no desktop o mouse inicia o arrasto nativo de imagem,
     que dispara `pointercancel`. Nao ha link nem zoom dentro do slide, entao
     nada de util se perde. */
  pointer-events: none;
}

/* Page Control com janela deslizante (D113). Referencia: Apple HIG e o
   ScrollingPageControl do Instagram. Cinco pontos visiveis; a ponta encolhe
   quando ha slide fora da janela daquele lado, e o de fora encolhe mais
   ainda. Nenhum ponto e escondido: todos os seis continuam clicaveis.
   O ponto ativo nunca encolhe. */
.gallery__dots {
  display: flex; justify-content: center; gap: 0;
  /* 6px de folga: as bolinhas ficam FORA da imagem, nunca sobre a arte -
     tres dos seis slides tem conteudo no rodape (selo, icones, ingredientes). */
  width: 144px; margin: 6px auto 0;          /* 6 x 24px, todos visiveis */
}
/* 24x32: a regra do projeto e 44x44, e este e o unico ponto do site que abre
   excecao (D113). 24px em cada eixo e o minimo de WCAG 2.2 AA (SC 2.5.8), e
   com gap 0 os circulos de 24px ficam tangentes, sem se cruzar. Alvos de
   44px afastariam os pontos em 44px e matariam o desenho pedido. */
.gallery__dot {
  /* 24x24: minimo de WCAG 2.2 AA (SC 2.5.8) nos dois eixos. Era 32 de altura;
     os 8px que sobravam custavam altura acima da dobra (D130). */
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
}

.gallery__dot::before {
  content: ''; width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: var(--mute);
  transition: background var(--dur-fast) ease-out,
              transform var(--dur-fast) ease-out;
}
.gallery__dot[data-scale="sm"]::before { transform: scale(.66); }
.gallery__dot[data-scale="xs"]::before { transform: scale(.4); }
.gallery__dot[aria-selected="true"]::before { background: var(--forest-900); }

/* --------------------------------------------------------------------------
   ACORDEAO  (grid-template-rows 0fr -> 1fr)
   -------------------------------------------------------------------------- */

/* Divisor em --mute e nao --cream-200 (D177): sao DEZ perguntas, e dez fios
   a 13:1 leem como planilha. Divisor de lista e fio, nao traco — 1.12 sobre
   o ground basta para separar linha de linha. O contorno forte continua
   sendo o idioma de card, nao de lista. */
.acc__item { border-bottom: 1px solid var(--mute); }
.acc__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--text-hi);
  min-height: 44px;
}
.acc__trigger:hover { color: var(--olive-700); }
.acc__icon { flex: none; width: 20px; height: 20px; color: var(--olive-600);
             transition: transform var(--dur-base) var(--ease-panel); }
.acc__trigger[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-panel);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > * { padding-bottom: var(--sp-5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   GAVETA DE MENU
   -------------------------------------------------------------------------- */

/* pointer-events fecha a janela morta de 260ms: enquanto a transicao de
   fechamento roda, a gaveta ainda esta no fluxo e engolia todo clique da
   pagina. Agora ela so intercepta quando esta de fato aberta. */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); pointer-events: none; }
.drawer[data-open="true"] { pointer-events: auto; }
.drawer__backdrop {
  position: absolute; inset: 0;
  /* Verde-floresta escurecido, nao preto (design.md 2.6 regra 7). Precisa
     ser mais escuro que --forest-900 para a announcement bar atras recuar:
     um veu na propria cor dela nao a escureceria. */
  background: rgba(8, 40, 8, .58);   /* mesmo matiz 120 do verde novo — D197 */
  opacity: 0;
  transition: opacity var(--dur-bar) var(--ease-out);
}
.drawer__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  /* Faixa estreita de proposito: a pagina precisa continuar clicavel ao lado
     da gaveta, porque tocar fora e o caminho de volta que a maioria usa por
     reflexo (D121). 32px em vez dos 48px de antes: alvo continua enorme --
     32px por toda a altura da tela -- e a barra verde atras vira um fio, nao
     uma "pontinha". A partir de 600px vira gaveta lateral de verdade. */
  width: calc(100% - 32px);
  background: var(--cream-50);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
  transform: translateX(-100%);
  transition: transform var(--dur-bar) var(--ease-out);
  overflow-y: auto;
  /* pan-y: rolagem vertical fica nativa, e o arrasto horizontal sobra para
     o gesto de fechar (D122). */
  touch-action: pan-y;
}
.drawer[data-open="true"] .drawer__backdrop { opacity: 1; }
.drawer[data-open="true"] .drawer__panel { transform: none; }

@media (min-width: 600px) {
  .drawer__panel { width: 380px; }
}

.drawer__nav { margin-top: var(--sp-6); display: grid; gap: var(--sp-1); }
.drawer__nav a {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--text-hi);
  text-decoration: none;
  border-radius: var(--r-sm);
  min-height: 44px;
}
.drawer__nav a:hover { background: var(--olive-100); color: var(--olive-700); }

/* --------------------------------------------------------------------------
   STICKY BUY BAR  (mobile)
   -------------------------------------------------------------------------- */

.stickybar {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: var(--z-sticky-bar);
  background: var(--paper);
  /* SEM contorno (D191): a sombra projetada para cima ja separa a barra da
     pagina, e e ela que faz a barra parecer flutuar em vez de colada. */
  box-shadow: var(--shadow-up);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--sp-3);
  transform: translateY(110%);
  transition: transform var(--dur-bar) var(--ease-out);
}
.stickybar[data-visible="true"] { transform: none; }
.stickybar__thumb { flex: none; width: 40px; height: 48px; object-fit: contain; }
.stickybar__info { flex: 1; min-width: 0; }
.stickybar__line { font-size: var(--fs-caption); color: var(--text-low);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar__total { font-family: var(--font-text); font-weight: 600;
                    font-size: 1.25rem; line-height: 1.1;
                    font-variant-numeric: tabular-nums; }
.stickybar .btn { flex: none; padding: 12px 20px; min-height: 48px; font-size: var(--fs-small); }

@media (min-width: 900px) { .stickybar { display: none; } }

/* --------------------------------------------------------------------------
   TABELAS
   -------------------------------------------------------------------------- */

/* Supplement Facts — densa de proposito, mas legivel */
.facts { background: var(--paper); box-shadow: var(--shadow-md);   /* sem contorno — D191 */
         border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }
.facts table { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.facts caption { text-align: left; font-family: var(--font-display);
                 font-weight: 600; font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
/* FIO, nao contorno (D189). O divisor de linha era --cream-200, que na paleta
   de D167 vale #2B2B2B — 13.16:1. Numa lista de 23 linhas isso lê como
   planilha, que e exatamente o defeito que D177b corrigiu nos dez divisores
   do FAQ. La ficou escrito, palavra por palavra: "a tabela de Supplement
   Facts, com 23 linhas, vai precisar da mesma decisao quando entrar". Entrou.
   --mute da 1.27 sobre o fundo da tabela: separa sem pesar. */
.facts th, .facts td { padding: 7px 0; border-bottom: 1px solid var(--mute); text-align: left; }
.facts td:last-child, .facts th:last-child { text-align: right; white-space: nowrap; }
/* As barras GROSSAS sao outra coisa e nao entram na remocao de contorno de
   D191: elas nao sao contorno de card, sao a ESTRUTURA do painel regulado —
   e num rotulo de verdade sao pretas. Sem elas a tabela deixa de parecer uma
   Supplement Facts e vira uma tabela qualquer.
   Ficavam em --forest-900, que depois de D170 e VERDE #1F801F, cor que nao
   existe em painel nenhum; passam a --text-low, que e o mesmo tom dos outros
   tracos que sobraram na pagina. */
.facts .facts__rule td { border-bottom: 3px solid var(--text-low); padding: 0; }
.facts .is-indent   td:first-child { padding-left: var(--sp-4); }
.facts .is-indent-2 td:first-child { padding-left: var(--sp-7); }
.facts__note { font-size: var(--fs-caption); color: var(--text-low); margin-top: var(--sp-3); }

/* Comparativo: tabela real no desktop, lista empilhada no mobile */
.compare__col { border-radius: var(--r-lg); padding: var(--sp-5); }
.compare__col--us    { background: var(--olive-100); }
.compare__col--other { background: var(--paper); box-shadow: var(--shadow-md); }   /* sem contorno — D191 */
.compare__head { font-family: var(--font-display); font-weight: 600;
                 font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.compare__list { display: grid; gap: var(--sp-3); }
.compare__item { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3);
                 align-items: start; font-size: var(--fs-small); }
.compare__item svg { width: 22px; height: 22px; margin-top: 1px; }
.compare__item--yes svg { color: var(--ok); }
.compare__item--no  svg { color: var(--text-low); }

/* Resumo de seis linhas (D192). Tres colunas, ao contrario da tabela completa,
   que tem duas. A largura foi repartida MEDINDO o pior caso a 393px, que e
   "Green Kiwifruit (Actinidia deliciosa) fruit powder" — o nome mais longo. */
/* As DUAS colunas de numero levam largura fixa em px e a coluna do nome fica
   com o resto. Em porcentagem o nome ficava com 54% (182px a 393px) e
   "Turmeric root extract 10:1" quebrava em tres linhas, enquanto sobrava
   folga do lado dos numeros. Fixando o que tem tamanho conhecido — "2,000 mg"
   e o maior — o resto vai todo para o texto. */
.facts--resumo table { table-layout: fixed; width: 100%; }
/* 68px e 48px, nao 76 e 52: medido a 393px, a coluna do nome ficava com 169px
   e "Turmeric root extract 10:1" pede ~175 — quebrava em duas linhas por SEIS
   pixels, enquanto sobrava folga do lado dos numeros ("2,000 mg" e o maior e
   mede ~58). Os 12px devolvidos poem as seis linhas em uma linha cada. */
.facts--resumo th:nth-child(2), .facts--resumo td:nth-child(2) { width: 68px; }
.facts--resumo th:last-child,   .facts--resumo td:last-child   { width: 48px; }
/* As duas colunas de numero alinham a direita. O `nowrap` vale SO PARA O
   NUMERO (td), nunca para o cabecalho (th) — ver D198.
   Numero partido em duas linhas deixa de ser numero, entao ele nao quebra.
   Cabecalho e frase e PRECISA quebrar: com `nowrap` o th "Amount Per
   Serving" pedia 117px numa coluna de 68 e pintava 49px POR CIMA da coluna
   vizinha, e "% Daily Value" passava 32px da borda da tabela. */
.facts--resumo td:nth-child(2), .facts--resumo th:nth-child(2),
.facts--resumo td:last-child,   .facts--resumo th:last-child {
  text-align: right;
}
.facts--resumo td:nth-child(2),
.facts--resumo td:last-child { white-space: nowrap; }
.facts--resumo thead th { white-space: normal; overflow-wrap: break-word; }
.facts--resumo thead th {
  font-size: var(--fs-caption); font-weight: 600; color: var(--text-mid);
  line-height: 1.25;
}
.facts__serving {
  font-size: var(--fs-small); color: var(--text-mid);
  margin-bottom: var(--sp-3); line-height: 1.5;
}
/* Fora da caixa, acima dos dois botoes (D194): centralizada, e sem a margem
   de baixo, porque quem da o respiro ate o primeiro botao e o margin-top
   dele. E o unico dado da secao que fica sempre na tela — "5 g" nao quer
   dizer nada sem saber que a dose e um scoop de 10 g. */
.facts__serving--solta {
  margin-top: var(--sp-6);
  margin-bottom: 0;
  text-align: center;
}