@charset "utf-8";
/* ==========================================================================
   KRYPTON — FOLHA DA LOJA E DA CONTA
   Mobile-first. Base = telefone; media queries somente em min-width.
   Breakpoint principal: 64rem (1024px). Auxiliares: 30rem, 48rem, 80rem.
   Sem !important. Sem classe utilitaria. Sem altura fixa em container de
   conteudo. position:absolute nunca estrutura layout (ver .stack).
   Todo valor vem de var(--...) definido em tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   00 · FONTES
   Arquivos .woff2 em /assets/fonts/. Enquanto nao estiverem la, o navegador
   cai no fallback declarado em --font-body / --font-mono.
   -------------------------------------------------------------------------- */
@font-face {
  /* Jost é fonte variável: um arquivo só cobre 100–900, o navegador escolhe
     a instância certa pelo font-weight pedido. */
  font-family: "Jost";
  src: url("fonts/Jost-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   01 · RESET E BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  overflow-x: hidden;
}

/* [hidden] precisa vencer as regras de classe que declaram display (todas com
   especificidade 0,1,0). Repetir o atributo sobe para 0,2,0 sem !important.
   Isto e o que faz a convencao de data-when funcionar: o estado alternativo
   fica no arquivo, marcado com hidden, e realmente nao aparece. */
[hidden][hidden] { display: none; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, video { display: block; max-width: 100%; height: auto; }

a { color: var(--c-ink); text-decoration: none; }
a:hover { color: var(--c-purple); }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; }

input, select, textarea, button { font-family: inherit; letter-spacing: inherit; }

table { border-collapse: collapse; width: 100%; }

/* sem isso, todo <fieldset> sem classe própria (ex. "COMO ENTREGAR" no
   checkout) sai com a caixa cinza e a legend cortando a borda do
   navegador — quem quer moldura própria (.facet) já declara border/
   padding e continua igual, porque seletor de classe pesa mais. */
fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; width: 100%; }

::selection { background: var(--c-lime); color: var(--c-ink); }

:focus-visible {
  outline: var(--line-2) solid var(--c-focus);
  outline-offset: 2px;
}
.is-night :focus-visible,
.is-night a:focus-visible,
.is-night button:focus-visible { outline-color: var(--c-lime); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-5);
  inset-block-start: -4rem;
  z-index: var(--z-drawer);
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label);
  transition: inset-block-start var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { inset-block-start: var(--s-5); color: var(--c-paper); }

/* Sobreposicao sem position:absolute — todos os filhos na mesma celula. */
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }

/* celula vazia que existe so para abrir a coluna do desktop */
.spacer-col { display: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block-start: var(--s-11); }
.section--flush { padding-block-start: 0; }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-block-end: var(--s-7);
}
.section__title {
  font-size: var(--fs-4xl);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title);
  text-wrap: pretty;
}
.section__lead {
  font-size: var(--fs-base);
  color: var(--c-ink-mid);
  max-width: 42ch;
  text-wrap: pretty;
}
.is-night .section__lead { color: var(--c-paper-soft); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label-wide);
  color: var(--c-ink-soft);
}
.eyebrow__num { color: var(--c-ink); font-weight: var(--w-bold); }
.eyebrow__rule { width: var(--s-6); height: var(--hair); background: var(--c-border-dash); }
.is-night .eyebrow { color: var(--c-paper-faint); }
.is-night .eyebrow__num { color: var(--c-lime); }

.mark {
  background-image: var(--g-mark);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--c-ink);
  padding-inline: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.is-night .label { color: var(--c-paper-faint); }

.mono { font-family: var(--font-mono); letter-spacing: var(--tr-label); }

.is-night { background: var(--c-night); color: var(--c-paper); }
.is-night a { color: var(--c-paper); }
.is-night a:hover { color: var(--c-lime); }
/* ...MENOS os botões (15/09). O card é um <a>, e `.is-night a` (0-1-1) vencia
   `.btn--lime` (0-1-0): o "FALAR NO WHATSAPP" do card roxo e o "VER O CATÁLOGO"
   da chamada escura saíam em BRANCO sobre lima — medido rgb(247,247,245) sobre
   rgb(191,255,0), que é ilegível. Cada variante de botão já declara a cor dela;
   dentro do escuro isso tem que continuar valendo. */
.is-night .btn--lime { color: var(--c-ink); }
.is-night .btn--lime:hover { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   PARES "TITULO + META"
   Varias classes formam par (titulo em cima, meta embaixo) dentro de um <span>
   involucro. Como <span> e inline por natureza, o par precisa declarar o
   proprio contexto de bloco — senao os dois textos saem na mesma linha.
   Uma declaracao para todas: e a raiz, nao o sintoma.
   -------------------------------------------------------------------------- */
.swatch__name,
.swatch__meta,
.color-bar__name,
.weight-bar__title,
.panel__title,
.panel__text,
.shortcut__title,
.shortcut__tag,
.kpi__k,
.kpi__v,
.kpi__note,
.order-row__id,
.order-row__date,
.order-row__items,
.order-row__lots,
.order-row__value,
.order-panel__id,
.order-panel__eta,
.review-card__name,
.review-card__meta,
.author__name,
.author__role,
.mini-line__name,
.mini-line__meta,
.line-item__brand,
.line-item__name,
.line-item__spec,
.palette-card__brand,
.palette-card__name,
.pay-option__tag,
.pay-option__name,
.pay-option__text,
.pay-option__brands,
.spool-card__brand,
.spool-card__name,
.stat-row__v,
.timeline__title,
.timeline__when,
.include-card__title,
.include-card__text,
.inline-cta__title,
.team-card__name,
.team-card__role,
.team-card__note,
.bench__tag,
.bench__name,
.bench__note,
.bench__text,
.tier__label,
.tier__name,
.tier__text,
.tier__price,
.tier__big,
.trial-thumb__dur,
.trial-thumb__name,
.trial-step__title,
.trial-step__text,
.player__meta,
.player__title,
.promise__title,
.promise__text,
.product-card__brand,
.product-card__badge,
.product-card__spec,
.price__now,
.price__kg,
.price__until,
.price__was-row,
.stat-strip__k,
.stat-strip__v,
.stat-pair__k,
.stat-pair__v,
.stat-card__v,
.stat-card__k,
.stat-card__note,
.rule-card__tag,
.rule-card__term,
.rule-card__title,
.rule-card__text,
.step-row__title,
.step-row__text,
.step-card__title,
.privacy-row__title,
.privacy-row__text,
.privacy-row__term,
.report-card__stage,
.report-card__value,
.report-card__text,
.report-card__avg-k,
.report-card__avg-v,
.gallery__id-brand,
.gallery__id-sku,
.side-cta__label,
.side-cta__title,
.side-cta__text,
.summary__total-value,
.summary__meta,
.action-bar__value,
.feature-post__title,
.feature-post__text,
.post-card__title,
.post-card__text,
.post-card__date,
.era-card__title,
.era-card__text,
.faq__answer,
.auth__proof-tag,
.auth__proof-text,
.sub-panel__save-v,
.address__lines,
.buy__block-num,
.buy__block-note,
.profile-cell__k,
.profile-cell__v,
.quick-report__k,
.quick-report__v,
.compare__brand,
.compare__sku,
.alt-card__brand,
.alt-card__sku,
.alt-card__value,
.alt-card__read,
.error-page__code,
.error-page__title,
.error-page__text,
.empty__title,
.empty__text,
.label,
.eyebrow__num { display: block; }

/* Os que sao par mas precisam continuar em linha (icone + texto, chip). */
.eyebrow .eyebrow__num,
.chip .label,
.status-pill .label,
.promo-banner__tag .label,
.hint .label,
.trials__note .label,
.count-row .label,
.gallery__meta .label,
.payments .label,
.action-bar__price .label,
.summary__total .label,
.price__was-row .price__was,
.price__was-row .price__off { display: inline; }

/* Involucros de par: quando existirem, viram grid e o gap resolve o respiro. */
.color-bar__id > span,
.shortcut > span,
.stat-row > span,
.review-card__author > span,
.author > span,
.mini-line__body,
.account-nav__card > span,
.ship-row > span,
.palette-card__head > span,
.spool-card__top,
.timeline__head { display: grid; gap: var(--s-1); }
.spool-card__top,
.timeline__head { grid-auto-flow: column; align-items: start; justify-content: space-between; }
.ship-row > span { gap: var(--s-2); }

/* Valor monetario nunca quebra linha no meio. */
.price__now,
.price-box__value,
.action-bar__value,
.line-item__total,
.summary__total-value,
.spool-card__price,
.alt-card__value,
.band-card__off,
.rule-card__term,
.stat-card__v,
.stat-strip__v,
.stat-pair__v,
.report-card__value,
.cart-total__value { white-space: nowrap; }

/* --------------------------------------------------------------------------
   02 · BOTOES E CHIPS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: var(--touch);
  padding: var(--s-5) var(--s-8);
  border-radius: var(--r-pill);
  border: var(--hair) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn svg { flex: none; }

.btn--dark { background: var(--c-ink); color: var(--c-canvas); }
.btn--dark:hover { background: var(--c-purple); color: var(--c-canvas); }

.btn--lime { background: var(--c-lime); color: var(--c-ink); }
.btn--lime:hover { background: var(--c-lime-hi); color: var(--c-ink); }

.btn--outline { border-color: var(--c-ink); color: var(--c-ink); }
.btn--outline:hover { background: var(--c-ink); color: var(--c-canvas); }

.btn--quiet {
  border-color: var(--c-border-strong);
  color: var(--c-ink-mid);
  font-weight: var(--w-regular);
}
.btn--quiet:hover { border-color: var(--c-ink); color: var(--c-ink); }

.btn--onnight { border-color: var(--c-night-line-hi); color: var(--c-paper); }
.btn--onnight:hover { border-color: var(--c-lime); color: var(--c-lime); }

.btn--block { width: 100%; }
.btn--grow { flex: 1 1 12rem; }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--c-disabled-bg);
  border-color: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.btn[disabled]:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
}

.link-underline {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label);
  border-block-end: var(--hair) solid var(--c-border-dash);
  padding-block-end: 3px;
}
.link-underline:hover { border-color: var(--c-purple); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-lg);
  border: var(--hair) solid var(--c-border-strong);
  color: var(--c-ink);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--c-ink); color: var(--c-purple); }
.icon-btn--solid { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-canvas); }
.icon-btn--solid:hover { background: var(--c-purple); border-color: var(--c-purple); color: var(--c-canvas); }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--c-border-strong);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--c-ink); }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-canvas); }
/* faixa de volume atingida é boa notícia, e boa notícia é lime (10/09). O preto
   continua nos demais chips, que são só filtro. */
.chip[data-qty-set][aria-pressed="true"] { background: var(--c-lime); border-color: var(--c-lime);
  color: var(--c-ink); font-weight: var(--w-bold); }

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label-wide);
  color: var(--c-ink-soft);
  margin-inline-end: var(--s-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-3);
  background: var(--c-surface-alt);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}
.tag--lime { background: var(--c-lime); color: var(--c-ink); font-weight: var(--w-bold); }
.tag--dark { background: var(--c-night); color: var(--c-lime); font-weight: var(--w-bold); }
.tag--purple { background: var(--c-purple); color: var(--c-canvas); }
.tag--warn { background: var(--c-warn-bg); color: var(--c-ink); }
.tag--ok { background: var(--c-ok-bg); color: var(--c-ok); }
.tag--night { background: var(--c-night); color: var(--c-paper); }

.dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-circle);
  background: var(--c-lime);
  flex: none;
}

/* --------------------------------------------------------------------------
   03 · CAMPOS DE FORMULARIO
   Mobile e desktop: campo em largura total, label acima, erro sob o campo.
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-7); }
.form__row { display: grid; gap: var(--s-7); }

.field { display: grid; gap: var(--s-3); }
.field__label {
  font-family: var(--font-mono);
  /* 28/09 (pedido do Matheus): o rótulo diz o que preencher e estava cinza
     claro em 9 px, difícil de ler. Agora é preto e maior. */
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  color: var(--c-ink);
}
.field__control {
  width: 100%;
  min-height: var(--field-h);
  padding: var(--s-5) var(--s-6);
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-canvas);
  color: var(--c-ink);
  font-size: var(--fs-md);
}
textarea.field__control { min-height: 7rem; line-height: var(--lh-snug); resize: vertical; }
.field__control::placeholder { color: var(--c-ink-faint); }
.field__control:hover { border-color: var(--c-ink-faint); }
.field__control:focus-visible { border-color: var(--c-focus); }
.field__control[disabled] {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.field__hint { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-danger);
}
.field.is-invalid .field__control { border-color: var(--c-danger); background: var(--c-danger-bg); }

/* OLHO NA SENHA (28/09): o app.js envolve o campo e põe o botão ao lado,
   dentro da mesma borda. Sem JS o campo fica como sempre foi. */
.campo-senha { display: flex; align-items: stretch; }
.campo-senha > .field__control {
  flex: 1 1 auto;
  min-width: 0;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.campo-senha__olho {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 var(--s-5);
  border: var(--hair) solid var(--c-border-strong);
  border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: var(--c-canvas);
  color: var(--c-ink-soft);
  cursor: pointer;
}
.campo-senha__olho:hover { color: var(--c-ink); }
/* o contorno de foco envolve campo e olho juntos: no campo sozinho ele
   parava no meio da caixa */
.campo-senha > .field__control:focus-visible { outline: 0; border-color: var(--c-border-strong); }
.campo-senha:focus-within {
  outline: var(--line-2) solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--r-lg);
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--c-ink-mid);
}
.check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--c-purple); }
/* CARTÃO SÓ COM CONTA (27/09): para quem não entrou, o rádio do cartão vem
   desabilitado e apagado, e embaixo o link para entrar (volta para cá). */
.check input:disabled + label { color: var(--c-ink-soft); }
.pay-option__entrar {
  grid-column: 2;
  justify-self: start;
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-6) var(--s-7);
  border-radius: var(--r-xl);
  border: var(--hair) solid var(--c-border);
  background: var(--c-canvas-alt);
  font-size: var(--fs-sm);
  color: var(--c-ink-mid);
  line-height: var(--lh-snug);
}
.notice > span:not(.dot) { display: grid; gap: var(--s-3); justify-items: start; }
.notice--error { border-color: var(--c-danger); background: var(--c-danger-bg); color: var(--c-danger); }
.notice--ok { border-color: var(--c-ok); background: var(--c-ok-bg); color: var(--c-ok); }
.notice--purple { border-color: var(--c-purple-line); background: var(--c-purple-soft); color: var(--c-purple-ink); }

/* --------------------------------------------------------------------------
   04 · HEADER (componente, igual em todas as paginas)
   Mobile: [menu] [logo] [carrinho] + campo de busca na segunda linha.
   Desktop (>=64rem): logo, nav horizontal, busca, entrar, carrinho.
   -------------------------------------------------------------------------- */
/* AVISO DO LAYOUT (base.njk): "produto adicionado", "estoque insuficiente",
   "página aberta há tempo demais". O estilo sumiu no redesenho de 13/09 e o
   aviso saía como texto cru acima do cabeçalho (26/09). Faixa amarela no
   topo, no fluxo da página: fica até a próxima página, não some sozinha,
   porque aviso de erro que some antes de ser lido é aviso perdido. */
.aviso-flutuante {
  margin: 0;
  padding: var(--s-5) var(--gutter);
  background: var(--c-warn-bg);
  color: var(--c-ink);
  font-size: var(--fs-md);
  line-height: 1.4;
  text-align: center;
  border-block-end: var(--hair) solid var(--c-warn);
}

/* AVISO DE COOKIES (28/09): estava sem CSS nenhum e aparecia como texto
   solto no fim da página. Vira um cartão escuro preso ao pé da tela, por
   cima do conteúdo, até a pessoa escolher. No celular ocupa a largura; do
   tablet para cima fica num canto, sem cobrir a vitrine. */
.cookie-aviso {
  position: fixed;
  inset-inline: var(--s-5);
  inset-block-end: var(--s-5);
  z-index: var(--z-scrim);
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  border: var(--hair) solid var(--c-night-line-hi);
  border-radius: var(--r-2xl);
  background: var(--c-night);
  color: var(--c-paper);
  box-shadow: 0 0.75rem 2rem var(--o-night-mid);
}
.cookie-aviso__titulo {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--c-lime);
}
.cookie-aviso__texto { margin: 0; font-size: var(--fs-md); line-height: 1.5; }
.cookie-aviso__texto a { color: var(--c-paper); text-decoration: underline; text-underline-offset: 0.2em; }
.cookie-aviso__acoes { display: flex; gap: var(--s-4); margin-block-start: var(--s-2); }
.cookie-aviso__acoes form { flex: 1 1 0; display: flex; }
.cookie-aviso__acoes .btn { flex: 1 1 auto; }
@media (min-width: 48rem) {
  .cookie-aviso { inset-inline: auto var(--s-8); inset-block-end: var(--s-8); max-width: 26rem; }
}

/* FAIXA DO CADASTRO (26/09): "Faça seu cadastro e ganhe 10% de desconto",
   acima do cabeçalho, só para quem não entrou (parciais/faixa-cadastro.njk).
   Não é sticky: rola junto e devolve o espaço, o cabeçalho continua preso.
   No celular sai "na primeira compra" e o CRIAR CONTA vira só a seta, para
   caber numa linha; a faixa inteira é o link. */
.faixa-cadastro {
  display: block;
  background: var(--c-night);
  color: var(--c-paper);
  text-decoration: none;
  font-size: var(--fs-base);
  line-height: 1.3;
}
.faixa-cadastro__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-block: var(--s-4);
  text-align: center;
}
.faixa-cadastro__texto strong { color: var(--c-lime); font-weight: 600; }
.faixa-cadastro__extra,
.faixa-cadastro__cta { display: none; }
.faixa-cadastro__seta { flex-shrink: 0; color: var(--c-lime); transition: transform 0.2s ease; }
.faixa-cadastro:hover .faixa-cadastro__seta { transform: translateX(3px); }
.faixa-cadastro:focus-visible { outline: 2px solid var(--c-lime); outline-offset: -2px; }
@media (min-width: 48rem) {
  .faixa-cadastro__in { gap: var(--s-5); }
  .faixa-cadastro__extra { display: inline; }
  .faixa-cadastro__cta {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-lime);
    border-block-end: 1px solid currentColor;
  }
  .faixa-cadastro__seta { margin-inline-start: calc(-1 * var(--s-3)); }
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--o-header);
  backdrop-filter: blur(12px);
  border-block-end: var(--hair) solid var(--c-border);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-5);
}
.site-header__nav { display: none; }
.search.site-header__search { display: none; }

.logo { display: flex; align-items: flex-end; }
.logo__word {
  display: flex;
  font-size: var(--fs-xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: var(--lh-flat);
}
.logo__dot {
  display: inline-block;
  width: 0.46em;
  height: 0.46em;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  margin: 0 0.04em 0.1em;
  align-self: flex-end;
}
.logo__tm {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-soft);
  margin-inline-start: var(--s-1);
  margin-block-end: var(--s-1);
}

.header-actions { display: flex; align-items: center; gap: var(--s-3); justify-self: end; }
.header-actions__login { display: none; }

.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--c-ink);
  color: var(--c-canvas);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label);
  cursor: pointer;
}
.cart-btn:hover { background: var(--c-purple); color: var(--c-canvas); }
.cart-btn__word { display: none; }
.cart-count {
  background: var(--c-lime);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  padding: 1px var(--s-2);
  font-weight: var(--w-bold);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-inline-start: calc(var(--s-3) * -1);
  border-radius: var(--r-lg);
  color: var(--c-ink);
  cursor: pointer;
}
.menu-toggle:hover { color: var(--c-purple); }

.search {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  padding: var(--s-3) var(--s-5);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
}
.search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: var(--fs-md);
  color: var(--c-ink);
}
.search__input::placeholder { color: var(--c-ink-soft); }
.search:focus-within { border-color: var(--c-focus); }

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--s-3) var(--s-9);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
}
.nav-primary a { color: var(--c-ink-mid); }
.nav-primary a:hover { color: var(--c-purple); }
.nav-primary a[aria-current="page"] { color: var(--c-ink); }

/* variante do header por cima de foto (hero da home): marca só o ícone,
   nav vira pílula flutuante, ações viram ícones soltos — mesmo componente,
   pele diferente. Ver header.njk (header_overlay). Continua um <header>
   sticky normal, irmão do hero (não dentro do .stack) — assim a navegação
   não some quando rola a página. O hero sobe por baixo dele com margem
   negativa do tamanho do header, então a foto aparece atrás do vidro. */
.site-header--overlay {
  background: none;
  backdrop-filter: none;
  border-block-end: none;
}
/* 15/09: em overlay o menu FLUTUA DENTRO da caixa do hero, então ele tem que
   seguir a linha do hero, não a do conteúdo da página. O .wrap trava em 85rem
   e centraliza: numa janela de 2000px o logo caía a 352px da borda enquanto o
   título do hero começava a 38px — o menu "descolava" da foto e ficava boiando
   no meio. Aqui a calha é a mesma do texto do hero (meia calha da página + o
   recuo interno da caixa), então logo e título nascem na mesma vertical em
   qualquer largura. Quando a página rola e o header sai da foto
   (--overlay-fora), ele volta pra linha do conteúdo. */
.site-header--overlay:not(.site-header--overlay-fora) .site-header__inner {
  max-width: none;
  padding-inline: calc(var(--gutter) / 2 + var(--s-8));
}
/* E O MESMO RECUO EM CIMA (15/09). Medido: a caixa do hero começa em
   gutter/2 (16px) e a faixa de conteúdo do topo ia de 12 a 56 — os botões da
   direita, que têm a altura de um alvo de toque (44px), começavam 4px ACIMA
   da foto e vazavam para o branco. O recuo de cima agora é o mesmo da
   lateral (--s-8), então o menu flutua dentro da caixa com a mesma margem
   nos dois eixos. Vale nos DOIS estados do overlay: se só valesse enquanto
   está sobre a foto, o cabeçalho encolheria 22px no meio da rolagem.
   Mexeu aqui? Mexa também no .hero--under-header — ele desconta esta altura. */
.site-header--overlay .site-header__inner {
  padding-block: calc(var(--gutter) / 2 + var(--s-8)) var(--s-5);
}
/* passou da foto (app.js, headerSobreFoto): volta a ter fundo, senão o
   texto da página comum aparece por baixo dos vãos entre os chips. */
.site-header--overlay-fora {
  background: var(--o-header);
  backdrop-filter: blur(12px);
  border-block-end: var(--hair) solid var(--c-border);
}
/* puxa a foto pra baixo do cabeçalho transparente, mas deixando o respiro da
   calha acima dela: no mockup a caixa do hero não encosta no topo da página,
   e o menu flutua DENTRO dela. */
.hero--under-header {
  /* = gutter/2 − altura do cabeçalho, para a foto nascer exatamente na
     calha. A altura é o recuo de cima (gutter/2 + s-8) + a faixa de conteúdo
     (touch) + o recuo de baixo (s-5); o gutter/2 se cancela e sobra isto. */
  margin-block-start: calc(-1 * (var(--s-8) + var(--touch) + var(--s-5)));
}

/* A MARCA POR EXTENSO NO CABEÇALHO (15/09). Era o símbolo "Kr" — um quadradinho
   de 36px que, em cima da foto do hero, lia como um favicon perdido e não
   dizia o nome da loja. Virou o logotipo inteiro, "krypton .3D".

   DUAS PELES, e cada uma com o motivo dela:

   - EM CIMA DA FOTO do hero: MONOCROMÁTICO BRANCO. A arte colorida tem ponto
     em degradê e selo lima; num logo de 16px de altura sobre uma foto, viram
     três cores brigando com o que está atrás.
   - NAS TELAS DE FUNDO CLARO (todas as outras, e a própria home depois que
     rola): a arte COLORIDA, que é a marca como ela é.

   As duas saem do mesmo recorte dos mestres (scripts/gerar-marca.mjs, que
   também explica como cada uma ganha transparência), então o logo não desloca
   nem muda de tamanho quando a pele troca no meio da rolagem.

   A caixa tem a proporção EXATA da arte (5.27): os arquivos anteriores tinham
   folga em volta e a arte aparecia bem menor que a caixa. */
.logo-mark {
  display: block;
  width: 5.27rem;
  height: 1rem;
  flex-shrink: 0;
  background: url("img/marca/marca-cor.png") left center / contain no-repeat;
}
.site-header--overlay:not(.site-header--overlay-fora) .logo-mark {
  background-image: url("img/marca/marca-mono-branca.png");
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-pill);
  padding: var(--s-1);
}
/* 15/09: mais respiro entre os itens do menu — a pílula estava apertada e os
   quatro links liam como um bloco só. O `gap` da .nav-pill sobe junto. */
.nav-pill__item {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-6);
  border-radius: var(--r-pill);
  color: var(--c-ink-mid);
  font-size: var(--fs-sm);
}
.nav-pill__item:hover { color: var(--c-ink); }
.nav-pill__item[aria-current="page"] {
  background: var(--c-canvas);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(14, 14, 16, 0.14);
}
/* header sólido (todas as páginas menos a hero da home): a pílula ativa
   fica escura, porque o fundo já é claro — branco sobre branco não
   apareceria. Ver Krypton_Produto_Novo.dc.html. */
.site-header:not(.site-header--overlay) .nav-pill__item[aria-current="page"] {
  background: var(--c-ink);
  color: var(--c-canvas);
  box-shadow: none;
}

/* A DIREITA DO CABEÇALHO, EM DOIS GRUPOS (15/09). Era CONTATO e os três
   ícones numa fila só, com o mesmo vão apertado entre tudo: lia como uma
   pilha de ícones sem hierarquia. Agora CONTATO é uma coisa e o trio
   busca/conta/carrinho é outra, separados por um vão maior e por um risco
   fino. A ordem também mudou para a convenção: busca, conta, carrinho —
   carrinho por último, que é onde a mão procura. */
.header-actions--overlay { gap: var(--s-6); }
.header-actions__icones {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-inline-start: var(--s-8);
  border-inline-start: var(--hair) solid var(--o-line-light);
}
/* contador do carrinho, que no cabeçalho sólido mora no botão CARRINHO e
   aqui não existia — o número do carrinho não pode sumir na home. */
.header-icon-btn--carrinho { position: relative; }
.header-icon-btn__conta {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-end: 0;
  min-width: 1.125rem;
  padding-inline: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--c-lime);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: 1.125rem;
  text-align: center;
}

/* BUSCA QUE ABRE NO PRÓPRIO CABEÇALHO (15/09). Antes a lupa era um link que
   trocava de página só para mostrar um campo vazio. Agora o campo abre aqui,
   e o link continua existindo por baixo: sem JS ele leva a /busca como
   sempre. O campo cresce PARA A ESQUERDA porque vem antes do botão no DOM —
   assim a lupa não sai do lugar quando abre. */
.header-busca { display: flex; align-items: center; min-width: 0; }
.header-busca__campo { display: none; }
.header-busca.is-aberta {
  flex: 1;
}
.header-busca.is-aberta .header-busca__campo {
  display: flex;
  flex: 1;
  min-width: 0;
  margin-inline-end: var(--s-2);
}
/* NO CELULAR O CAMPO TOMA A LINHA. Medido: com logo, risco e os três ícones
   no lugar sobravam ~100px para o campo numa tela de 390 — ele empurrava os
   outros dois ícones para fora e a PÁGINA INTEIRA ganhava rolagem lateral.
   Enquanto a busca está aberta o logo e os outros dois ícones sumem; fechou,
   voltam. O app.js acende `--buscando` no cabeçalho para isto (não uso `:has`
   porque ele não aparece em lugar nenhum deste CSS, e uma classe explícita
   também deixa o estado visível no inspetor). */
.site-header--buscando .logo,
.site-header--buscando .header-actions__contact,
.site-header--buscando .header-actions__icones > .header-icon-btn { display: none; }
.site-header--buscando .header-actions { justify-self: stretch; }
.site-header--buscando .header-actions__icones {
  flex: 1;
  min-width: 0;
  border-inline-start: none;
  padding-inline-start: 0;
}
.header-actions__contact {
  display: none;
  align-items: center;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label);
}
.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-circle);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  color: var(--c-ink);
  cursor: pointer;
}
.header-icon-btn:hover { color: var(--c-purple); }
/* o tamanho do traço vem daqui, não do atributo do <svg>: os três ícones
   precisam bater com o corpo do "Contato" ao lado, e 13px sumia. */
.header-icon-btn svg { width: 1.0625rem; height: 1.0625rem; }

/* --- cabeçalho EM CIMA DA FOTO (só a home, e só enquanto o hero está na
   tela) ------------------------------------------------------------------
   No mockup a foto do hero é escura, então tudo aqui vira branco: a pílula
   do menu fica translúcida (vidro sobre a foto, não um chip branco sólido),
   CONTATO é texto puro e os ícones perdem o disco de fundo. Assim que a
   página rola e o app.js liga o --overlay-fora, o cabeçalho volta a ser
   sólido e claro e nada disto se aplica. */
.site-header--overlay:not(.site-header--overlay-fora) .nav-pill {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  border-color: transparent;
}
.site-header--overlay:not(.site-header--overlay-fora) .nav-pill__item { color: var(--c-paper); }
.site-header--overlay:not(.site-header--overlay-fora) .nav-pill__item:hover { color: var(--c-canvas); }
.site-header--overlay:not(.site-header--overlay-fora) .nav-pill__item[aria-current="page"] {
  background: var(--c-canvas);
  color: var(--c-ink);
  box-shadow: none;
}
.site-header--overlay:not(.site-header--overlay-fora) .header-actions__contact {
  background: none;
  backdrop-filter: none;
  padding-inline: 0;
  color: var(--c-paper);
  font-family: inherit;
  font-size: var(--fs-md);
  letter-spacing: var(--tr-body);
}
.site-header--overlay:not(.site-header--overlay-fora) .header-icon-btn {
  width: auto;
  height: var(--touch);
  /* sem o disco, o botão encolhia até o tamanho do desenho: os ícones
     encostavam e o alvo de toque virava um quadradinho de 13px. */
  padding-inline: var(--s-3);
  background: none;
  backdrop-filter: none;
  color: var(--c-paper);
}
.site-header--overlay:not(.site-header--overlay-fora) .header-icon-btn:hover { color: var(--c-lime); }
.site-header--overlay:not(.site-header--overlay-fora) .menu-toggle { color: var(--c-paper); }

/* --------------------------------------------------------------------------
   05 · DRAWERS (menu, mini-cart, filtros — mesmo componente)
   overlay por natureza: position:fixed e legitimo aqui.
   -------------------------------------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--o-scrim);
  border: none;
  width: 100%;
  cursor: pointer;
}
.drawer-scrim[hidden] { display: none; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: min(var(--drawer-w), 88vw);
  display: flex;
  flex-direction: column;
  background: var(--c-canvas);
  box-shadow: var(--sh-drawer);
  overflow-y: auto;
}
.drawer--end { inset-inline-start: auto; inset-inline-end: 0; }
.drawer[hidden] { display: none; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6) var(--gutter);
  border-block-end: var(--hair) solid var(--c-border);
}
.drawer__title {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label-wide);
  color: var(--c-ink-soft);
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-inline-end: calc(var(--s-3) * -1);
  cursor: pointer;
}
.drawer__close:hover { color: var(--c-purple); }
.drawer__body { padding: var(--s-6) var(--gutter); display: grid; gap: var(--s-7); }
.drawer__foot {
  margin-block-start: auto;
  padding: var(--s-6) var(--gutter);
  border-block-start: var(--hair) solid var(--c-border);
  display: grid;
  gap: var(--s-5);
}

.drawer-nav { display: grid; }
.drawer-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch);
  padding-block: var(--s-5);
  border-block-end: var(--hair) solid var(--c-border-soft);
  font-size: var(--fs-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
}
.drawer-nav--sub a { font-size: var(--fs-md); font-weight: var(--w-regular); color: var(--c-ink-mid); }

.cart-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-6);
  border-block-end: var(--hair) solid var(--c-border-soft);
}
.cart-line__img { border-radius: var(--r-md); background: var(--c-surface-alt); }
.cart-line__title { font-size: var(--fs-sm); font-weight: var(--w-bold); line-height: var(--lh-snug); }
.cart-line__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: var(--s-1);
}
.cart-line__price { font-size: var(--fs-sm); font-weight: var(--w-bold); }

.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
}
.cart-total__value { font-size: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }

.empty {
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  padding-block: var(--s-9);
}
.empty__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.empty__text { font-size: var(--fs-sm); color: var(--c-ink-mid); max-width: 40ch; }

/* --------------------------------------------------------------------------
   06 · BARRA DE ACAO FIXA (mobile)
   Decisao global: a acao principal de paginas de decisao (produto, carrinho,
   checkout, formularios) fica FIXA no rodape abaixo de 64rem e volta ao fluxo
   no desktop. Nao ha pagina que misture os dois comportamentos.
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--gutter);
  background: var(--o-header);
  backdrop-filter: blur(12px);
  border-block-start: var(--hair) solid var(--c-border);
}
.action-bar__price { display: grid; gap: 2px; }
.action-bar__value { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }
.action-bar > .btn { flex: 1; }
.has-action-bar { padding-block-end: 5.5rem; }

/* --------------------------------------------------------------------------
   07 · HERO (home)
   -------------------------------------------------------------------------- */
/* A foto do topo é uma CAIXA ARREDONDADA com recuo, não um bloco full-bleed:
   é assim nos dois mockups (Krypton_Home_Desktop/Mobile.dc.html), onde o hero
   fica dentro de um respiro do tamanho de meia calha da página. A altura vem
   de aspect-ratio (16/10 no desktop, 3/4 no celular) — nunca de vh, senão a
   proporção da foto muda conforme a janela e o recorte perde o assunto. */
.hero { --hero-gutter: calc(var(--gutter) / 2); padding-inline: var(--hero-gutter); }
.hero__box {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--c-green);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* z-index explícito: a imagem do crossfade anima opacity, e isso basta pro
   Chromium promover ela pra uma camada composta própria que pinta ACIMA dos
   irmãos seguintes — mesmo eles vindo depois no DOM. Sem isso o scrim e o
   texto do hero ficam completamente escondidos atrás da foto. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--g-hero-scrim);
}
/* os dois tracinhos na lateral, só no desktop (o mockup do celular não tem) */
.hero__rule { display: none; }
.hero__body {
  position: absolute;
  inset-inline: var(--s-8);
  inset-block-end: var(--s-10);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.hero__copy { display: flex; flex-direction: column; gap: var(--s-6); }
.hero__title {
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: var(--w-medium);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--c-paper);
  text-wrap: balance;
}
.hero__accent { color: var(--c-lime); }
.hero__text {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.86);
  max-width: 42ch;
  text-wrap: pretty;
}
/* botão pílula branco com a seta num disco lime — o CTA do mockup não é um
   .btn comum: tem a seta em disco próprio e ocupa a largura toda no celular */
.hero__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  background: var(--c-canvas);
  border-radius: var(--r-pill);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-8);
  font-size: var(--fs-lg);
  font-weight: var(--w-medium);
  color: var(--c-ink);
}
.hero__cta-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  color: var(--c-ink);
}
/* o controle das fotos anda junto com o CTA: no mockup os dois estão
   ancorados no mesmo canto (bottom:26px / right:26px) e se sobrepõem — aqui
   eles empilham, dots ACIMA do botão no desktop e ABAIXO no celular, que é o
   que o mockup do celular mostra. */
.hero__side { display: flex; flex-direction: column; gap: var(--s-5); }
.hero__slides {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-5);
}
.hero__counter {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: rgba(255, 255, 255, 0.72);
}
.hero__dots { display: flex; align-items: center; gap: var(--s-2); }
.hero__dot {
  width: 0.875rem;
  height: 6px;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 400ms ease, background 400ms ease;
}
.hero__dot[aria-selected="true"] { width: 1.625rem; background: var(--c-lime); }

/* --------------------------------------------------------------------------
   08 · CORES (home)
   -------------------------------------------------------------------------- */
/* no celular as 12 famílias são um carrossel lateral (17/10, pedido do
   Matheus): em grade de 2 colunas elas ocupavam seis telas e empurravam o
   catálogo para longe. Rolagem nativa com encaixe, sem JavaScript; a faixa
   vai até a borda da tela e o cartão seguinte aparece cortado, que é o
   convite para arrastar. Do 30rem para cima volta a ser grade. */
.swatch-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9.5rem;
  gap: var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--s-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.swatch-grid::-webkit-scrollbar { display: none; }
.swatch-grid > li { scroll-snap-align: start; }
.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas);
  cursor: pointer;
  text-align: start;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.swatch:hover { border-color: var(--c-ink-faint); }
.swatch[aria-pressed="true"],
.swatch:has(.swatch__input:checked) { border-color: var(--c-ink); background: var(--c-canvas-alt); }
.swatch:has(.swatch__input:focus-visible) { outline: var(--line-2) solid var(--c-ink); outline-offset: 2px; }
/* o checkbox de verdade fica escondido, mas ACESSÍVEL (não display:none):
   o card inteiro é o <label>, então clicar nele marca a cor. Sem JS, o
   formulário GET já leva pra galeria filtrada. */
.swatch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.swatch__chip {
  position: relative;
  width: 100%;
  aspect-ratio: 1.28;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--o-ring-hair);
}
.swatch__check {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-circle);
  background: var(--c-ink);
  color: var(--c-lime);
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.swatch__input:checked ~ .swatch__chip .swatch__check { opacity: 1; }
.swatch__name { font-size: var(--fs-base); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: -0.01em; }
.swatch__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: 3px;
}

/* barra de seleção das cores: some do caminho quando nada está marcado e
   vira o atalho pro catálogo filtrado quando alguma cor é escolhida */
.swatch-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-block-start: var(--s-5);
  padding: var(--s-6) var(--s-7);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  transition: border-color 160ms var(--ease);
}
.swatch-picker:has(.swatch__input:checked) .swatch-bar { border-color: var(--c-ink); background: var(--c-canvas-alt); }
.swatch-bar__info { display: grid; min-width: 0; }
.swatch-bar__title { font-size: var(--fs-lg); font-weight: var(--w-medium); letter-spacing: -0.015em; }
.swatch-bar__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: 3px;
}
.swatch-bar__actions { display: flex; align-items: center; gap: var(--s-4); }
.swatch-bar__actions .btn { flex: 1; justify-content: center; }
.swatch-bar__clear {
  flex: none;
  border: none;
  background: none;
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--ease);
}
.swatch-picker:has(.swatch__input:checked) .swatch-bar__clear { opacity: 1; pointer-events: auto; }
.swatch-bar__clear:hover { color: var(--c-ink); }
.swatch-picker:has(.swatch__input:checked) [data-swatch-cta] {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-canvas);
}

.color-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  margin-block-start: var(--s-6);
  padding: var(--s-6) var(--s-7);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
}
.color-bar__id { display: flex; align-items: center; gap: var(--s-6); }
.color-bar__chip {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--o-ring-hair);
  flex: none;
}
.color-bar__name { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }

/* --------------------------------------------------------------------------
   09 · FAIXA DE MARCAS (home)
   -------------------------------------------------------------------------- */
.brand-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
  overflow: hidden;
}
.brand-strip__label {
  padding: var(--s-6) var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}
.brand-strip__list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-9);
  padding: var(--s-6) var(--s-7);
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  color: var(--c-ink-mid);
}
.brand-strip__soon {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border: var(--hair) dashed var(--c-border-dash);
  border-radius: var(--r-lg);
}
.brand-strip__soon .logo__word { font-size: var(--fs-md); }

/* --------------------------------------------------------------------------
   10 · CATALOGO E CARD DE PRODUTO
   Colunas: 1 (base) → 2 (30rem) → 3 (48rem) → 4 (64rem).
   -------------------------------------------------------------------------- */
.catalog-head {
  display: grid;
  gap: var(--s-7);
  margin-block-end: var(--s-7);
}
/* os chips de LINHA também correm de lado no celular: em três fileiras
   eles empurravam a busca e os filamentos para baixo */
.catalog-head .chip-row {
  flex-wrap: nowrap;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.catalog-head .chip-row::-webkit-scrollbar { display: none; }
.catalog-head .chip-row > * { flex: none; }

.promo-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-block-end: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border: var(--hair) solid var(--c-purple-line);
  border-radius: var(--r-2xl);
  background: var(--c-purple-soft);
}
.promo-banner__tag {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-purple);
  color: var(--c-canvas);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
}
.promo-banner__text { flex: 1 1 14rem; font-size: var(--fs-base); color: var(--c-purple-ink); }
.promo-banner__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-purple);
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

.product-card {
  display: flex;
  flex-direction: column;
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-3xl);
  background: var(--c-canvas);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.product-card:hover {
  border-color: var(--c-border-dash);
  box-shadow: var(--sh-hover);
  transform: translateY(-3px);
}
/* A FOTO OCUPA O QUADRO INTEIRO, e marca/ESGOTADO ficam POR CIMA dela (15/09).
   Era uma moldura cinza com respiro em volta: a foto ficava pequena no meio de
   um card grande, e com foto deitada (16:9) sobrava cinza em cima e embaixo —
   cada card com um recorte diferente, vitrine desalinhada. Agora o quadro é
   quadrado e a foto o preenche (`cover`): foto quadrada, que é o caso do
   carretel de frente, entra inteira; foto deitada perde as beiradas, que é o
   preço de padronizar — e é o que se pediu.
   A pilha é por GRID, não por position:absolute: `.product-card__media` tem uma
   área só ("stack") e os dois filhos ocupam ela, um sobre o outro. Layout
   estruturado com absolute é proibido aqui (ver CLAUDE.md), e grid dá o mesmo
   empilhamento sem tirar os elementos do fluxo. */
.product-card__media {
  display: grid;
  grid-template-areas: "stack";
  background: var(--g-card);
}
.product-card__media > * { grid-area: stack; min-width: 0; }
.product-card__meta {
  z-index: 1;
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5);
  pointer-events: none;
}
/* selo sobre foto: o texto precisa de fundo próprio, senão a legibilidade
   depende do que a foto tem atrás — e a foto muda a cada produto. */
.product-card__brand,
.product-card__badge {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-label);
  border-radius: var(--r-xs);
  padding: 3px var(--s-2);
  background: var(--o-chip-light);
  backdrop-filter: blur(6px);
  color: var(--c-ink);
}
.product-card__brand { font-size: var(--fs-mini); }
.product-card__badge { font-size: var(--fs-micro); }
/* quadro QUADRADO (o formato em que as fotos de carretel chegam) e `cover`:
   ver o bloco de .product-card__media acima. Sem border-radius próprio — quem
   arredonda é o card, e a foto encosta na borda dele. */
.product-card__img {
  width: 100%;
  aspect-ratio: var(--ar-square);
  object-fit: cover;
  object-position: center;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
  padding: var(--s-6);
}
.product-card__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-lime);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
}
.product-card__flag .dot { background: var(--c-ink); }
.product-card__title {
  font-size: var(--fs-md);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: 1.25;
}
.product-card__spec {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.product-card__colors { display: flex; align-items: center; gap: var(--s-1); }
.product-card__colors .dot { width: 0.875rem; height: 0.875rem; box-shadow: var(--ring-hair); }
.product-card__more {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-ghost);
  margin-inline-start: var(--s-1);
}
.product-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-block-start: auto;
  padding-block-start: var(--s-4);
}
.product-card__actions { display: flex; align-items: center; gap: var(--s-2); }

.price__was-row { display: flex; align-items: center; gap: var(--s-3); }
.price__was {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  color: var(--c-ink-faint);
  text-decoration: line-through;
}
.price__off {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  border-radius: var(--r-xs);
  padding: 2px var(--s-2);
  background: var(--c-lime);
  color: var(--c-ink);
}
.price__now {
  font-size: var(--fs-xl);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-title);
}
.price__kg {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.price__until {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-faint);
  margin-block-start: var(--s-1);
}

/* estado: promocao do dia (card roxo) */
.product-card.is-promo { border-color: var(--c-purple); background: var(--c-purple); }
.product-card.is-promo .product-card__media { background: var(--g-card-promo); }
/* a marca NÃO entra aqui: desde 15/09 ela é um selo de fundo claro por cima da
   foto, e o roxo suave (que existe para texto sobre o card roxo) fica ilegível
   ali dentro. */
.product-card.is-promo .product-card__spec,
.product-card.is-promo .price__kg { color: var(--c-purple-ink-soft); }
.product-card.is-promo .product-card__title { color: var(--c-canvas); }
.product-card.is-promo .product-card__title:hover { color: var(--c-lime); }
.product-card.is-promo .price__now { color: var(--c-lime); }
.product-card.is-promo .price__was,
.product-card.is-promo .price__until { color: var(--c-purple-ink-soft); }
.product-card.is-promo .icon-btn { border-color: var(--o-line-light); color: var(--c-canvas); }
.product-card.is-promo .icon-btn--solid { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-ink); }

/* estado: melhor preco */
.product-card.is-cheapest .price__now { color: var(--c-ok); }

/* estado: estoque baixo */
.product-card.is-lowstock .icon-btn--solid { background: var(--c-ink-soft); border-color: var(--c-ink-soft); }

/* estado: esgotado */
.product-card.is-soldout { border-color: var(--c-border); }
.product-card.is-soldout:hover { transform: none; box-shadow: none; border-color: var(--c-border); }
.product-card.is-soldout .product-card__img { filter: grayscale(1); opacity: 0.55; }
.product-card.is-soldout .product-card__badge { background: var(--c-disabled-bg); color: var(--c-soldout-ink); }
/* o ESGOTADO some por cima da foto cinza se não tiver contraste próprio. Vem
   DEPOIS da linha acima de propósito: as duas têm a mesma especificidade, então
   quem ganha é a última. */
.product-card.is-soldout .product-card__badge--esgotado { background: var(--c-ink); color: var(--c-canvas); }
.product-card.is-soldout .price__now { color: var(--c-soldout-ink); }

.count-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  margin-block-start: var(--s-7);
}
.count-row__rule { width: 1px; height: var(--s-5); background: var(--c-border-strong); }

/* --------------------------------------------------------------------------
   11 · COMPARADOR — tabela de verdade
   Mobile: cada coluna de marca vira um bloco empilhado. Nunca scroll lateral.
   -------------------------------------------------------------------------- */
.compare { background: var(--c-night); color: var(--c-paper); padding-block: var(--s-11); margin-block-start: var(--s-12); }
.compare__box {
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-3xl);
  overflow: hidden;
}
.compare__table caption {
  padding: var(--s-6) var(--s-7);
  background: #16161A;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-paper-faint);
  text-align: start;
}
.compare__table th, .compare__table td { text-align: start; }
.compare__brand { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.compare__sku {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
  margin-block-start: var(--s-1);
}
.compare__win { color: var(--c-lime); }
.compare__read {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-7);
  border-block-start: var(--hair) solid var(--c-night-line);
  background: #131317;
}
.compare__read p { font-size: var(--fs-sm); color: var(--c-paper-mid); }

/* base mobile: thead escondido, cada linha e um cartao com rotulo no ::before */
.compare__table thead { display: none; }
.compare__table tbody tr { display: grid; gap: var(--s-1); padding: var(--s-6) var(--s-7); border-block-start: var(--hair) solid var(--c-night-line-soft); }
.compare__table tbody th {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
  padding-block-end: var(--s-2);
}
.compare__table tbody td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  padding-block: var(--s-1);
}
.compare__table tbody td::before {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
}

/* --------------------------------------------------------------------------
   12 · ENSAIOS (home)
   -------------------------------------------------------------------------- */
.trials { background: var(--c-night-2); color: var(--c-paper); padding-block: var(--s-11); margin-block-start: var(--s-12); }
.trials__grid { display: grid; gap: var(--s-10); }

.player { display: grid; gap: var(--s-4); }
.player__frame {
  border-radius: var(--r-4xl);
  overflow: hidden;
  background: var(--c-night);
  cursor: pointer;
  width: 100%;
  text-align: start;
  color: var(--c-paper);
}
.player__img { width: 100%; aspect-ratio: var(--ar-wide); object-fit: cover; }
.player__scrim { background: var(--g-media-foot); }
.player__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); padding: var(--s-6); }
.player__stage, .player__timer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--o-night-mid);
  backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  align-self: flex-start;
}
.player__timer .dot { background: #FF4D4D; }
.player__center { display: grid; place-items: center; }
.player__play {
  display: grid;
  place-items: center;
  width: 4.125rem;
  height: 4.125rem;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  color: var(--c-ink);
  box-shadow: var(--sh-pop);
}
.player__foot { display: grid; gap: var(--s-2); align-self: end; padding: var(--s-7); }
.player__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-lime);
}
.player__title { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); line-height: 1.2; }

.trial-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.trial-thumb {
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-night);
  cursor: pointer;
  text-align: start;
  color: var(--c-paper);
  transition: border-color var(--dur) var(--ease);
}
.trial-thumb:hover { border-color: var(--c-paper-faint); }
.trial-thumb[aria-pressed="true"] { border-color: var(--c-lime); }
.trial-thumb__img { width: 100%; aspect-ratio: var(--ar-wide); object-fit: cover; opacity: 0.62; transition: opacity var(--dur) var(--ease); }
.trial-thumb[aria-pressed="true"] .trial-thumb__img { opacity: 1; }
.trial-thumb__scrim { background: var(--g-thumb-foot); }
.trial-thumb__foot { align-self: end; display: grid; gap: 3px; padding: var(--s-4); }
.trial-thumb__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
}
.trial-thumb[aria-pressed="true"] .trial-thumb__dur { color: var(--c-lime); }
.trial-thumb__name { font-size: var(--fs-xxs); font-weight: var(--w-bold); line-height: 1.25; }

.trials__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block-start: var(--s-1);
}

.trial-steps {
  display: grid;
  gap: 1px;
  margin-block-start: var(--s-7);
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-2xl);
  background: var(--c-night-line);
  overflow: hidden;
}
.trial-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-7);
  background: var(--c-night-3);
  cursor: pointer;
  text-align: start;
  color: var(--c-paper);
  transition: background var(--dur) var(--ease);
}
.trial-step:hover { background: var(--c-night-4); }
.trial-step[aria-pressed="true"] { background: var(--c-night-4); }
.trial-step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-ghost);
  padding-block-start: 3px;
  min-width: 1.25rem;
}
.trial-step[aria-pressed="true"] .trial-step__num { color: var(--c-lime); }
.trial-step__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.trial-step__title { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: -0.02em; }
.trial-step__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-ghost);
}
.trial-step[aria-pressed="true"] .trial-step__tag { color: var(--c-lime); }
.trial-step__text { font-size: var(--fs-sm); color: var(--c-paper-soft); margin-block-start: var(--s-1); }

.hint {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
}
.hint--ink { color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   13 · ATACADO / FAIXAS DE VOLUME (home)
   -------------------------------------------------------------------------- */
/* CARTÃO, não faixa full-bleed: no mockup o atacado é um bloco arredondado
   dentro da calha da página, com a foto numa coluna e o painel preto na
   outra. A foto vive num contêiner próprio de altura definida — foi o
   height:100% dela dentro de um grid sem altura que fazia a seção virar
   uma torre de ~2000px (a foto é retrato, 928×1152). */
.wholesale {
  display: grid;
  border-radius: var(--r-4xl);
  overflow: hidden;
  background: var(--c-night);
  color: var(--c-paper);
}
.wholesale__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 14.375rem;
  padding: var(--s-7);
  background-color: var(--c-green);
}
.wholesale__badge {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-paper);
  background: rgba(10, 10, 10, 0.62);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-5);
}
.wholesale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 2% center; }
.wholesale__scrim { position: absolute; inset: 0; background: var(--g-wholesale-scrim); }
.wholesale__body { padding: var(--s-9) var(--s-8) var(--s-9); }
.wholesale__col { display: grid; gap: var(--s-6); }
.wholesale__title {
  font-size: var(--fs-subtitle);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-title);
  line-height: 1.12;
  max-width: 22ch;
  text-wrap: balance;
}
.wholesale__text { font-size: var(--fs-base); color: #E4F2D8; max-width: 44ch; }
.wholesale .eyebrow { color: #CDE8B8; }

.tier-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.tier {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-7) var(--s-7) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-night-alt);
}
.tier__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label-wide);
  color: var(--c-ink-soft);
}
.tier__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.tier__ribbon {
  flex: none;
  padding: var(--s-1) var(--s-4);
  background: var(--c-lime);
  color: var(--c-night-alt);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-label);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.tier__off { display: flex; align-items: flex-end; gap: var(--s-2); }
/* mono e comedido, como no mockup: antes era o display gigante (--fs-tier,
   até 40px) e o "10%" competia com o título da seção */
.tier__pct {
  font-family: var(--font-mono);
  font-size: var(--fs-4xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-paper);
}
.tier--featured .tier__pct { color: var(--c-ink); }
.tier__pct sup { font-size: 0.5em; vertical-align: baseline; }
.tier__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  padding-block-end: 3px;
}
.tier__name { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: -0.02em; }
.tier__text { font-size: var(--fs-xs); color: var(--c-paper-soft); }
.tier__price {
  margin-block-start: auto;
  padding-block-start: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-lime);
}
.tier--b2b { background: var(--g-b2b); color: var(--c-canvas); }
.tier--b2b .tier__label { color: #D6C4FF; }
.tier--featured { background: var(--c-lime); }
.tier--featured .tier__label,
.tier--featured .tier__pct,
.tier--featured .tier__unit,
.tier--featured .tier__name,
.tier--featured .tier__price { color: var(--c-night-alt); }
.tier--featured .tier__text { color: #3F5400; }
.tier--b2b .tier__big {
  font-size: var(--fs-4xl);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.tier--b2b .tier__text { color: #E2D8FA; }
/* pílula, como todo botão do site — o clip-path antigo cortava o canto e,
   depois que os botões viraram pill, virava um retângulo mordido */
.tier--b2b .btn {
  align-self: flex-start;
  margin-block-start: auto;
}

/* --------------------------------------------------------------------------
   14 · CTA EM MOLDURA
   -------------------------------------------------------------------------- */
.cta-frame {
  margin-block-start: var(--s-12);
  border-radius: var(--r-4xl);
  background: var(--g-frame);
  padding: var(--s-7);
}
.cta-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-9);
  border-radius: var(--r-2xl);
  background: var(--c-night);
  color: var(--c-paper);
  padding: var(--s-10) var(--s-9);
}
.cta-panel__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.18em;
  color: var(--c-lime);
}
.cta-panel__title {
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: 1.05;
  max-width: 22ch;
  margin-block-start: var(--s-5);
}
.cta-panel__text { font-size: var(--fs-base); color: var(--c-paper-soft); max-width: 44ch; margin-block-start: var(--s-4); }
.cta-panel__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }
/* "O QUE TESTAMOS" (22/09): mesma ideia de bolinha do .avise__list, num nome
   próprio porque o contexto é outro (o vídeo do ensaio, não o avise-me). */
.cta-panel__list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); color: var(--c-paper-mid); margin-block-start: var(--s-4); max-width: 34ch; }
.cta-panel__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: baseline; }
.cta-panel__list li::before { content: ""; width: 6px; height: 6px; align-self: center; border-radius: var(--r-pill); background: var(--c-lime); }

/* --------------------------------------------------------------------------
   15 · FOOTER (componente)
   -------------------------------------------------------------------------- */
.site-footer { padding-block: var(--s-11) var(--s-11); }
.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-9);
  padding-block-end: var(--s-9);
  border-block-end: var(--hair) solid var(--c-border-hair);
}
.footer-brand__text { font-size: var(--fs-sm); color: var(--c-ink-mid); max-width: 34ch; margin-block-start: var(--s-5); }
.footer-col { display: grid; gap: var(--s-4); align-content: start; }
.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.footer-col a { font-size: var(--fs-sm); color: var(--c-ink-mid); }
.footer-col a:hover { color: var(--c-purple); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block-start: var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
}

/* --------------------------------------------------------------------------
   16 · PRODUTO
   -------------------------------------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-faint);
  padding-block-start: var(--s-7);
}
.breadcrumb a { color: var(--c-ink-faint); }
.breadcrumb a:hover { color: var(--c-purple); }
.breadcrumb__here { color: var(--c-ink-mid); }

.product-layout { display: grid; gap: var(--s-10); margin-block-start: var(--s-7); align-items: start; }

.gallery { display: grid; gap: var(--s-4); }
.gallery__frame { border-radius: var(--r-4xl); background: var(--g-gallery); overflow: hidden; }
/* QUADRO QUADRADO E `cover`: A FOTO OCUPA TUDO (15/09).
   O quadro é quadrado porque foto de filamento é um carretel de frente, que
   chega quadrado; com 4:3 o recorte decepava topo e base.
   O ajuste era `contain` e virou `cover` a pedido do Matheus: com `contain` a
   foto que não é quadrada deixava tarja cinza dos lados (foto em pé) ou em cima
   e embaixo (foto deitada), e o que ele quer é a foto ocupando o quadro inteiro,
   como nos cards da vitrine. Foto quadrada não muda nada; foto fora do quadrado
   perde as beiradas, que é o preço de padronizar.
   O VÍDEO É A EXCEÇÃO, abaixo: cortar vídeo não é como cortar foto. */
.gallery__img { width: 100%; aspect-ratio: var(--ar-square); object-fit: cover; }
/* o ensaio é 16:9 e precisa aparecer inteiro: o que se perde num corte é o que
   a pessoa veio conferir. Tarja escura em vídeo lê como player, não como falha. */
.gallery__video { object-fit: contain; background: var(--c-night); }
/* TRILHO — trocar de foto ARRASTANDO, no celular e no trackpad. Rolagem nativa
   com encaixe: funciona sem JavaScript, porque quem rola é o navegador, e é o
   gesto que a pessoa já espera numa foto de produto.
   `overscroll-behavior-x: contain` impede que arrastar além da última foto
   dispare o "voltar" do navegador no iOS.
   Existia desde 10/09 e se perdeu quando o export novo do Claude Design
   substituiu o styles.css inteiro (07ff32d) — voltou em 15/09. */
.gallery__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.gallery__slide .gallery__img { display: block; }
@media (prefers-reduced-motion: reduce) { .gallery__track { scroll-behavior: auto; } }
.gallery__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6);
  align-self: start;
}
.gallery__id {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-5);
  background: var(--c-canvas);
  box-shadow: var(--sh-card);
}
.gallery__id-brand { font-size: var(--fs-xs); font-weight: var(--w-bold); letter-spacing: -0.02em; }
.gallery__id-sku {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.gallery__approved {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-5);
  background: var(--c-night);
  color: var(--c-paper);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}
.gallery__thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.gallery-thumb {
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-alt);
  cursor: pointer;
  padding: 0;
}
.gallery-thumb[aria-pressed="true"] { border-color: var(--c-ink); }
.gallery-thumb img { width: 100%; aspect-ratio: var(--ar-square); object-fit: cover; opacity: 0.72; transition: opacity var(--dur-fast) var(--ease); }
.gallery-thumb[aria-pressed="true"] img { opacity: 1; }
.gallery__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-faint);
}

.buy { display: grid; gap: 0; }
.buy__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-mid);
}
.buy__tag { background: var(--c-surface-alt); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); }
.buy__stock { background: var(--c-ok-bg); color: var(--c-ok); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); }
.buy__stock--out { background: var(--c-danger-bg); color: var(--c-danger); }
.product-title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  max-width: 22ch;
  margin-block-start: var(--s-6);
}
.product-title strong { font-weight: var(--w-bold); }

.rating { display: flex; align-items: center; gap: var(--s-4); margin-block-start: var(--s-5); }
.stars { display: flex; gap: 2px; color: var(--c-star); font-size: var(--fs-base); letter-spacing: 1px; }
.stars--lg { font-size: var(--fs-md); letter-spacing: 2px; }
.rating__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}

.buy__lead { font-size: var(--fs-base); color: var(--c-ink-mid); max-width: var(--measure); margin-block-start: var(--s-6); text-wrap: pretty; }

.quick-report {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: var(--s-8);
  border: var(--hair) solid var(--c-border-hair);
  border-radius: var(--r-xl);
  background: var(--c-border-hair);
  overflow: hidden;
}
.quick-report__cell { background: var(--c-canvas-alt); padding: var(--s-5) var(--s-4); }
.quick-report__k {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.quick-report__v { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); margin-block-start: var(--s-1); }

.buy__block { margin-block-start: var(--s-8); padding-block-start: var(--s-7); border-block-start: var(--hair) solid var(--c-border-hair); }
.buy__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); }
.buy__block-num {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}
.buy__block-note {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-mid);
}

.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
.swatch-dot {
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-circle);
  border: none;
  cursor: pointer;
  box-shadow: var(--ring-hair);
  transition: box-shadow var(--dur-fast) var(--ease);
  padding: 0;
}
.swatch-dot[aria-pressed="true"] { box-shadow: var(--ring-sel); }
/* COR EM FOTO (28/09, pedido do Matheus): cada cor da linha é a foto de capa
   dela, num quadrado, como no Mercado Livre. A escolhida ganha o anel; a
   esgotada fica apagada, mas abre (a página dela tem o AVISE-ME). */
.swatch-foto {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g-card);
  box-shadow: var(--ring-hair);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.swatch-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swatch-foto:hover { box-shadow: 0 0 0 1px var(--c-ink); }
.swatch-foto[aria-pressed="true"] { box-shadow: var(--ring-sel); }
.swatch-foto.is-esgotada img,
.swatch-dot.is-esgotada { opacity: 0.4; }

.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-block-start: var(--s-5); }
.qty {
  display: flex;
  align-items: center;
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.qty__btn {
  width: var(--touch);
  height: var(--touch);
  display: grid;
  place-items: center;
  color: var(--c-ink-mid);
  cursor: pointer;
  user-select: none;
}
.qty__btn:hover { background: var(--c-surface-alt); color: var(--c-ink); }
.qty__btn[disabled] { color: var(--c-disabled-ink); cursor: not-allowed; }
.qty__btn[disabled]:hover { background: none; }
.qty__val {
  width: 3rem;
  border: none;
  background: none;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--w-bold);
  -moz-appearance: textfield;
}
.qty__val::-webkit-outer-spin-button,
.qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.price-box { margin-block-start: var(--s-8); padding: var(--s-7); background: var(--c-surface); border-radius: var(--r-2xl); }
/* selo de promoção (12/09), na frente do rótulo TOTAL — o design não trouxe
   posição própria pra ele, então reaproveita o espaçamento do card antigo */
.price-box .tag--purple { margin-block-end: var(--s-3); }
.price-box .price__was-row { margin-block-end: var(--s-1); }
.price-box__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
}
.price-box__total { display: flex; align-items: baseline; gap: var(--s-4); margin-block-start: var(--s-2); }
.price-box__value { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.045em; line-height: 1; }
.price-box__was { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--c-ink-faint); text-decoration: line-through; }
.price-box__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-mid);
  margin-block-start: var(--s-3);
}
.price-box__pix { display: grid; gap: var(--s-1); }
.price-box__pix-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ok);
}
.price-box__pix-value { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }
.price-box__inst {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-faint);
}
.buy-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }
/* O <form> do ADICIONAR/COMPRAR AGORA embrulha os dois botões, então o gap
   do .buy-actions não chegava neles: no celular, quando quebram em duas
   linhas, o preto encostava no verde (26/09, visto pelo Matheus). O form vira
   a linha flexível; os botões mantêm a largura de hoje. */
.buy-actions__form { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.buy-actions__form > .btn { flex: 0 0 auto; }
/* CHAMADA DO CADASTRO na página do produto (26/09): a versão LEVE da faixa
   do topo. Clara, borda fina, abaixo dos botões de compra; o único toque de
   cor é o selo lima. O cartão inteiro é o link. */
.convite-cadastro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-5);
  padding: var(--s-5) var(--s-6);
  /* branco sobre a caixa de preço, que é --c-surface: da mesma cor sumia */
  background: var(--c-canvas);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-xl);
  color: var(--c-ink-mid);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.convite-cadastro:hover { border-color: var(--c-ink-faint); }
.convite-cadastro__selo {
  flex-shrink: 0;
  background: var(--c-lime);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--w-bold);
}
.convite-cadastro__texto { flex: 1 1 12rem; }
.convite-cadastro__texto strong { color: var(--c-ink); font-weight: var(--w-bold); }
.convite-cadastro__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  border-block-end: 1px solid currentColor;
}
/* AVISE-ME QUANDO CHEGAR (19/09, redesenhado 21/09): aparece no lugar do botão
   de comprar quando o produto está esgotado. Nasceu como um campo solto dentro
   da caixa de preço e sumia ali dentro, porque a caixa inteira é clara e o
   campo também. Virou CARTÃO ESCURO com o verde da marca: é o único bloco
   escuro da coluna de compra, então o olho vai nele. O mesmo cartão serve aos
   dois estados, o formulário e o recibo, para a resposta aparecer no lugar
   exato onde a pessoa acabou de digitar. */
.avise {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: var(--c-night);
  color: var(--c-paper);
}
.avise__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-lime);
}
.avise__dot { flex: none; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--c-lime); }
.avise__title {
  font-size: var(--fs-2xl);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  margin-block-start: calc(var(--s-2) * -1);
}
.avise__text { font-size: var(--fs-md); color: var(--c-paper-mid); margin-block-start: calc(var(--s-3) * -1); }
.avise .field__label { color: var(--c-paper-soft); }
.avise .field__control {
  background: var(--c-night-3);
  border-color: var(--c-night-line-hi);
  color: var(--c-paper);
}
.avise .field__control::placeholder { color: var(--c-paper-ghost); }
.avise .field__control:hover { border-color: var(--c-paper-faint); }
.avise .field__control:focus-visible { border-color: var(--c-lime); }
.avise .field__hint {
  font-size: var(--fs-xs);
  color: var(--c-paper-faint);
  margin-block-start: calc(var(--s-2) * -1);
}
.avise__list { display: grid; gap: var(--s-4); font-size: var(--fs-md); color: var(--c-paper-mid); }
.avise__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); line-height: var(--lh-snug); }
.avise__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-block-start: 0.45em;
  border-radius: var(--r-pill);
  background: var(--c-lime);
}
.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.payments__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  background: var(--c-canvas);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
}
.payments__chip img { display: block; width: auto; height: 0.875rem; }
/* o cadeado (28/09): verde de "tudo certo", não o lima da marca, que some no
   fundo claro da caixa de preço */
.payments__seguro {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: var(--s-2);
  color: var(--c-ok);
}

.promises { display: grid; gap: var(--s-5); margin-block-start: var(--s-7); }
.promise { padding-block-start: var(--s-4); border-block-start: var(--line-2) solid var(--c-lime); }
.promise__title { font-size: var(--fs-sm); font-weight: var(--w-bold); }
.promise__text { font-size: var(--fs-xs); color: var(--c-ink-soft); margin-block-start: 3px; }

.report { background: var(--c-night-2); color: var(--c-paper); padding-block: var(--s-11); margin-block-start: var(--s-11); }
.report__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: var(--tr-title);
  line-height: var(--lh-title);
  max-width: 22ch;
  margin-block-start: var(--s-6);
}
.meter { height: 5px; border-radius: var(--r-pill); background: var(--c-night-line); margin-block-start: var(--s-7); overflow: hidden; }
.meter__fill { height: 100%; background: var(--c-lime); }
.meter--ink { background: #E7E6E0; }
.meter--ink .meter__fill { background: var(--c-ink); }

.spec-groups { display: grid; gap: var(--s-9); margin-block-start: var(--s-8); }
.spec-group__title {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
  padding-block-end: var(--s-4);
  border-block-end: var(--hair) solid var(--c-border);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-block-end: var(--hair) solid var(--c-border-soft);
}
.spec-row__k { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.spec-row__v { font-size: var(--fs-sm); font-weight: var(--w-bold); text-align: end; }

.cert-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-8); }
.cert {
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-canvas-alt);
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-mid);
}

.alt-grid { display: grid; gap: var(--s-5); margin-block-start: var(--s-7); }
.alt-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-3xl);
  background: var(--c-canvas);
  padding: var(--s-7);
}
.alt-card.is-current { border-color: var(--c-ink); background: var(--c-canvas-alt); }
.alt-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.alt-card__brand { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.alt-card__sku {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: var(--s-1);
}
.alt-card__price { display: flex; align-items: baseline; gap: var(--s-3); }
.alt-card__value { font-size: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }
.alt-card__rows { display: grid; gap: 1px; border-radius: var(--r-lg); background: var(--c-border-hair); overflow: hidden; }
.alt-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  background: var(--c-canvas);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-xs);
}
.alt-card__row dt { color: var(--c-ink-soft); }
.alt-card__row dd { margin: 0; font-weight: var(--w-bold); }
.alt-card__read { font-size: var(--fs-xs); color: var(--c-ink-mid); }
.alt-card .btn { margin-block-start: auto; }

.reviews__grid { display: grid; gap: var(--s-9); margin-block-start: var(--s-8); align-items: start; }
.reviews__summary { background: var(--c-surface); border-radius: var(--r-3xl); padding: var(--s-8); }
.rating-big { font-size: var(--fs-7xl); font-weight: var(--w-bold); letter-spacing: -0.05em; line-height: 0.9; }
.histogram { display: grid; gap: var(--s-3); margin-block-start: var(--s-7); }
.histogram__row { display: grid; grid-template-columns: 1.25rem 1fr 1.75rem; align-items: center; gap: var(--s-3); }
.histogram__k, .histogram__n {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  color: var(--c-ink-soft);
}
.histogram__n { color: var(--c-ink-faint); text-align: end; }
.reviews__foot {
  font-size: var(--fs-xs);
  color: var(--c-ink-soft);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: var(--hair) solid var(--c-border-strong);
}
.review-grid { display: grid; gap: var(--s-5); }
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas);
  padding: var(--s-7);
}
.review-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.review-card__verified {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ok);
}
.review-card__title { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: -0.02em; line-height: var(--lh-snug); }
.review-card__text { font-size: var(--fs-sm); color: var(--c-ink-mid); }
.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: auto;
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--c-border-soft);
}
.avatar {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--r-circle);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: var(--w-bold);
  color: var(--c-ink);
  flex: none;
}
.review-card__name { font-size: var(--fs-xs); font-weight: var(--w-bold); }
.review-card__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-faint);
}

.review-form {
  margin-block-start: var(--s-7);
  padding: var(--s-7);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
}
.review-form__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-7);
}
.review-form__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.review-form__text { font-size: var(--fs-sm); color: var(--c-ink-mid); max-width: 52ch; margin-block-start: var(--s-3); }
.star-input { display: flex; gap: 3px; }
.star-input button {
  width: var(--touch);
  height: var(--touch);
  display: grid;
  place-items: center;
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--c-star-off);
  cursor: pointer;
}
.star-input button[aria-pressed="true"] { color: var(--c-star); }
.review-form__status {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: var(--s-6);
}

/* --- drawer de filtros que vira coluna lateral -------------------------
   O MESMO elemento e o drawer no telefone e a coluna no desktop.
   O app.js poe/tira [hidden]; em 64rem a regra de classe vence o [hidden]
   do agente de usuario sem precisar de !important.
   -------------------------------------------------------------------- */
.filters-panel:not([hidden]) { display: grid; }
.filters-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: min(var(--drawer-w), 88vw);
  align-content: start;
  gap: var(--s-6);
  padding: 0 0 var(--s-6);
  background: var(--c-canvas);
  box-shadow: var(--sh-drawer);
  overflow-y: auto;
}
.filters-panel .facet { margin-inline: var(--gutter); }
.filters-panel__foot { margin-inline: 0; }

/* --------------------------------------------------------------------------
   18 · CONTA DO CLIENTE
   Autenticacao: split de tela cheia (painel escuro + formulario).
   Area logada: .account-nav e uma fileira de chips no telefone e a coluna
   escura no desktop — o MESMO elemento, so CSS.
   -------------------------------------------------------------------------- */
.auth { display: grid; min-height: 100vh; }
.auth__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  background: var(--c-night);
  color: var(--c-paper);
  padding: var(--s-9) var(--gutter);
}
.auth__brand .logo__word { color: var(--c-paper); }
.auth__brand .eyebrow,
.order-panel .eyebrow,
.studio-panel .eyebrow { color: var(--c-paper-faint); }
.auth__brand .eyebrow__num,
.order-panel .eyebrow__num,
.studio-panel .eyebrow__num { color: var(--c-lime); }
.auth__brand a:hover,
.order-panel a:hover,
.studio-panel a:hover { color: var(--c-lime); }
.auth__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: -0.045em;
  line-height: 1.06;
  max-width: 22ch;
}
.auth__text { font-size: var(--fs-base); color: var(--c-paper-soft); line-height: 1.7; max-width: 46ch; }
.auth__proof {
  display: grid;
  gap: 1px;
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-2xl);
  background: var(--c-night-line);
  overflow: hidden;
}
.auth__proof-row { display: grid; gap: var(--s-3); background: var(--c-night-2); padding: var(--s-6) var(--s-7); }
.auth__proof-tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-lime); }
.auth__proof-text { font-size: var(--fs-sm); color: #C8C8CE; }
.auth__brands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-tight);
  color: #5E5E68;
}
.auth__panel { display: grid; align-content: center; padding: var(--s-9) var(--gutter) var(--s-11); }
.auth__form { width: 100%; max-width: 26.875rem; margin-inline: auto; }
.auth__tabs { display: flex; gap: var(--s-9); border-block-end: var(--hair) solid var(--c-border-hair); }
.auth__tab {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
  padding: 0 2px var(--s-5);
  min-height: var(--touch);
  color: var(--c-ink-ghost);
  border-block-end: var(--line-2) solid transparent;
  margin-block-end: -1px;
}
.auth__tab[aria-current="page"] { color: var(--c-ink); border-color: var(--c-lime); }
.auth__heading { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.05em; }
.auth__lead { font-size: var(--fs-base); color: var(--c-ink-mid); line-height: 1.7; margin-block-start: var(--s-4); max-width: 44ch; }
.auth__body { display: grid; gap: var(--s-7); padding-block-start: var(--s-9); }
.auth__status {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  text-align: center;
  min-height: 0.75rem;
}
.auth__or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-5); }
.auth__or span:first-child, .auth__or span:last-child { height: 1px; background: var(--c-border-hair); }
.auth__or-word { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-ink-ghost); }
.auth__switch { font-size: var(--fs-base); color: var(--c-ink-mid); text-align: center; }
.auth__switch a { color: var(--c-purple); font-weight: var(--w-bold); }
.auth__legal { font-size: var(--fs-xs); color: var(--c-ink-ghost); line-height: 1.7; text-align: center; }
.auth__legal a { color: var(--c-ink-soft); }

/* CONFIRME SEU E-MAIL (09/10) — tela própria depois do CRIAR CONTA, fundo
   preto, igual no celular e no desktop: a confirmação é a primeira coisa que
   a pessoa vê. Antes era um bloco na tela de cadastro, abaixo da dobra. */
.confirmar {
  display: grid;
  align-content: center;
  min-height: 100vh;
  padding: var(--s-9) var(--gutter) var(--s-11);
  background: var(--c-night);
  color: var(--c-paper);
}
.confirmar__box { display: grid; gap: var(--s-6); max-width: 36rem; margin-inline: auto; }
.confirmar .logo { margin-block-end: var(--s-7); }
.confirmar .logo__word { color: var(--c-paper); }
.confirmar .eyebrow { color: var(--c-paper-faint); }
.confirmar .eyebrow__num { color: var(--c-lime); }
.confirmar__title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: -0.045em;
  line-height: 1.06;
}
.confirmar__text { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-paper-soft); }
.confirmar__text strong { color: var(--c-paper); font-weight: var(--w-bold); }
.confirmar__status {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  margin: 0;
  padding: var(--s-5) var(--s-6);
  border: var(--hair) solid var(--c-lime);
  border-radius: var(--r-xl);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-paper);
}
.confirmar__status .dot { background: var(--c-lime); flex: none; margin-block-start: 0.45em; }
.confirmar__acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-3); }
.confirmar__acoes form { display: contents; }
.confirmar__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: 0; font-size: var(--fs-base); color: var(--c-paper-faint); }
.confirmar__links a { color: var(--c-lime); font-weight: var(--w-bold); }
@media (min-width: 64rem) {
  .confirmar { padding-inline: var(--gutter-lg); }
}
.field__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.field__aside { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); color: var(--c-purple); }
.field__optional {
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  border: var(--hair) solid var(--c-border-hair);
  border-radius: var(--r-xs);
  padding: 2px var(--s-2);
}
.strength { display: flex; align-items: center; gap: var(--s-3); }
.strength__bars { display: flex; gap: 3px; flex: 1; }
.strength__bar { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--c-border); }
.strength__bar[data-on="true"] { background: var(--c-lime-deep); }
.strength__label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); color: var(--c-ink-soft); }

/* --- area logada ------------------------------------------------------- */
/* CLEAN (26/09, pedido do Matheus): sem a coluna preta. Barra de topo branca
   com o logo e VOLTAR PARA A LOJA (no celular a área não tinha caminho de
   volta), as seções em abas de texto, e o conteúdo centralizado e estreito. */
.account { display: block; min-height: 100vh; background: var(--c-canvas-alt); }
.conta-topo { background: var(--c-canvas); border-block-end: var(--hair) solid var(--c-border); }
.conta-topo__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--s-5) var(--gutter);
}
.conta-topo__loja { gap: var(--s-3); min-height: var(--touch); padding-inline: var(--s-7); }
.account-nav { background: var(--c-canvas); border-block-end: var(--hair) solid var(--c-border); }
.account-nav__list {
  display: flex;
  align-items: stretch;
  gap: var(--s-7);
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.account-nav__list::-webkit-scrollbar { display: none; }
.account-nav__fim { margin-inline-start: auto; }
.account-nav__link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--touch);
  padding: var(--s-4) 0;
  border: none;
  border-block-end: 2px solid transparent;
  background: none;
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
  color: var(--c-ink-mid);
  cursor: pointer;
}
.account-nav__link:hover { color: var(--c-ink); }
.account-nav__link[aria-current="page"] { color: var(--c-ink); border-block-end-color: var(--c-ink); }
.account-nav__badge {
  border-radius: var(--r-pill);
  padding: 1px var(--s-3);
  background: var(--c-lime);
  color: var(--c-ink);
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
}
.account-nav__out { color: var(--c-ink-soft); }
.account__main { max-width: 60rem; margin-inline: auto; padding: var(--s-9) var(--gutter) var(--s-12); }
.account__eyebrow-title { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.05em; margin-block-start: var(--s-5); }
.account__lead { font-size: var(--fs-base); color: var(--c-ink-mid); line-height: 1.7; margin-block-start: var(--s-4); max-width: 62ch; }

.kpi { display: grid; gap: var(--s-2); border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); padding: var(--s-7); }
.kpi__k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-ink-soft); }
.kpi__v { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.055em; white-space: nowrap; }
.kpi__v--ok { color: var(--c-ok); }
.kpi__note { font-size: var(--fs-sm); color: var(--c-ink-mid); }

.order-panel { display: grid; gap: var(--s-6); border-radius: var(--r-3xl); background: var(--c-night); color: var(--c-paper); padding: var(--s-8); }
/* área logada clean (26/09): o cartão do pedido é claro, como o resto */
.account .order-panel { background: var(--c-canvas); color: var(--c-ink); border: var(--hair) solid var(--c-border); }
.account .order-panel__id { color: var(--c-ink-soft); }
.order-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); }
.order-panel__id { font-family: var(--font-mono); font-size: var(--fs-mini); letter-spacing: 0.16em; color: var(--c-lime); }
.order-panel__eta { font-family: var(--font-mono); font-size: var(--fs-mini); letter-spacing: var(--tr-label); color: var(--c-paper-faint); }
.order-panel__title { font-size: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: -0.04em; line-height: 1.3; }
.order-panel .mini-line__thumb { background: #1B1B20; }
.order-panel .mini-line__meta { color: var(--c-paper-faint); }
.order-panel .mini-line__price { font-family: var(--font-mono); font-size: var(--fs-mini); color: var(--c-paper-soft); }

.order-row {
  display: grid;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--s-7);
}
.order-row__id { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.order-row__date { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); color: var(--c-ink-soft); margin-block-start: var(--s-1); }
.order-row__items { font-size: var(--fs-base); line-height: 1.5; }
.order-row__lots { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-label); color: var(--c-ink-soft); margin-block-start: var(--s-2); }
.order-row__value { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: -0.035em; margin-block-start: var(--s-3); white-space: nowrap; }
.order-row__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  border-radius: var(--r-pill);
  border: var(--hair) solid var(--c-border-strong);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}
.status-pill--transit { border-color: var(--c-purple-line); background: var(--c-purple-soft); color: #5B22C8; }
.status-pill--transit .dot { background: var(--c-purple); }
.status-pill--done { border-color: #D9EBCF; background: #F4FBEF; color: #3F8A2E; }
.status-pill--done .dot { background: #3F8A2E; }
.status-pill--issue { border-color: #F3D2D2; background: #FFF3F3; color: #B02B2B; }
.status-pill--issue .dot { background: #D93A3A; }

.palette-card { display: flex; flex-direction: column; border: var(--hair) solid var(--c-border); border-radius: var(--r-3xl); overflow: hidden; }
.palette-card__head { display: flex; align-items: center; gap: var(--s-6); background: var(--g-card); padding: var(--s-7); }
.palette-card__brand { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-ink-soft); }
.palette-card__name { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: -0.035em; line-height: 1.25; margin-block-start: var(--s-2); }
.palette-card__body { display: flex; flex-direction: column; gap: var(--s-5); flex: 1; padding: var(--s-7); }
.profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.profile-cell { background: var(--c-canvas-alt); border: var(--hair) solid var(--c-border-hair); border-radius: var(--r-md); padding: var(--s-4); }
.profile-cell__k { font-family: var(--font-mono); font-size: var(--fs-nano); letter-spacing: var(--tr-label); color: var(--c-ink-soft); }
.profile-cell__v { font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); margin-block-start: var(--s-1); }
.palette-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-block-start: auto; padding-block-start: var(--s-5); }
.palette-card__price { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.04em; white-space: nowrap; }

.studio-panel { display: grid; gap: var(--s-6); border-radius: var(--r-3xl); background: var(--c-night); color: var(--c-paper); padding: var(--s-9); }
.studio-panel__title { font-size: var(--fs-4xl); font-weight: var(--w-bold); letter-spacing: -0.045em; line-height: 1.2; max-width: 22ch; }
.studio-panel .btn { justify-self: start; }
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--s-7);
}
.stat-row__v { font-size: var(--fs-5xl); font-weight: var(--w-bold); letter-spacing: -0.055em; white-space: nowrap; }
.stat-row__v--ok { color: var(--c-ok); }

.sub-panel { display: grid; gap: var(--s-9); border: var(--hair) solid var(--c-border); border-radius: var(--r-3xl); padding: var(--s-8); align-items: center; }
.sub-panel__title { font-size: var(--fs-3xl); font-weight: var(--w-bold); letter-spacing: -0.045em; margin-block-start: var(--s-5); }
.sub-panel__text { font-size: var(--fs-base); color: var(--c-ink-mid); line-height: 1.75; margin-block-start: var(--s-4); max-width: 52ch; }
.sub-panel__save { border-radius: var(--r-2xl); background: var(--c-night); color: var(--c-paper); padding: var(--s-8); }
.sub-panel__save-v { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.055em; margin-block-start: var(--s-4); }
.sub-panel__save-v small { font-size: var(--fs-base); font-weight: var(--w-regular); color: var(--c-paper-soft); }

.address { display: grid; gap: var(--s-5); border: var(--hair) solid var(--c-border); border-radius: var(--r-3xl); padding: var(--s-8); }
.address__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.address__lines { font-size: var(--fs-md); line-height: 1.75; }
.address__note { font-size: var(--fs-sm); color: var(--c-ink-mid); line-height: 1.7; border-block-start: var(--hair) solid var(--c-border-soft); padding-block-start: var(--s-5); }
.address__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   17 · PAGINAS INTERNAS (carrinho, checkout, confirmacao, rastreio, busca,
   categoria, ajuda, trocas, blog, artigo, sobre, atacado, privacidade, 404)
   Base mobile; as media queries destas classes ficam no bloco 64rem no fim.
   -------------------------------------------------------------------------- */
.page-head { display: grid; gap: var(--s-5); padding-block-start: var(--s-9); }
.page-head--row { gap: var(--s-6); }
.page-title {
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  letter-spacing: -0.045em;
  line-height: var(--lh-title);
  max-width: 30ch;
  text-wrap: pretty;
}
.page-lead { font-size: var(--fs-base); color: var(--c-ink-mid); max-width: 62ch; text-wrap: pretty; }
.page-body { padding-block: var(--s-9) var(--s-12); }
.page-body--narrow { max-width: 51rem; margin-inline: auto; }
.page-body--prose { max-width: 41rem; margin-inline: auto; }

.split { display: grid; gap: var(--s-7); margin-block-start: var(--s-8); align-items: start; }
.stack-list { display: grid; gap: var(--s-4); }
/* primitivo de layout (como .wrap e .stack): abre o respiro entre blocos
   irmaos de uma pagina. Nao e classe utilitaria de valor arbitrario. */
.block-gap { margin-block-start: var(--s-9); }
.block-gap--tight { margin-block-start: var(--s-6); }
.cards-2 { display: grid; gap: var(--s-5); }
.cards-3 { display: grid; gap: var(--s-5); }
.cards-4 { display: grid; gap: var(--s-5); }

.panel {
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-3xl);
  background: var(--c-canvas);
  padding: var(--s-8);
}
.panel--quiet { background: var(--c-canvas-alt); }
.panel--flush { padding: 0; overflow: hidden; }
.panel__head {
  padding: var(--s-6) var(--s-7);
  background: var(--c-canvas-alt);
  border-block-end: var(--hair) solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}
.panel__title { font-size: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); }
.panel__text { font-size: var(--fs-sm); color: var(--c-ink-mid); }

/* --- carrinho ---------------------------------------------------------- */
.line-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-6);
  align-items: start;
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas);
  padding: var(--s-6);
}
.line-item.is-soldout { border-color: #F3D2D2; background: #FFFCFC; }
.line-item__thumb {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--r-xl);
  background: var(--g-card);
  overflow: hidden;
}
.spool {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-circle);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), inset 0 -6px 12px rgba(0,0,0,0.12);
}
.spool--sm { width: 1.25rem; height: 1.25rem; }
.spool--md { width: 5.25rem; height: 5.25rem; }
.line-item__body { display: grid; gap: var(--s-3); min-width: 0; }
.line-item__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}
.line-item__name { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.line-item__spec {
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.line-item__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  grid-column: 1 / -1;
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--c-border-soft);
}
.line-item__total { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; }
/* celular: quantidade, preço e lixeira numa linha só */
.line-item__form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); inline-size: 100%; }
.line-item__form .line-item__total { margin-inline-start: auto; }
/* REMOVER virou lixeira (25/09, pedido do Matheus): o texto em mono
   minúsculo não parecia botão. Área de toque inteira, ícone no meio. */
.line-item__remove {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-pill);
  color: var(--c-ink-soft);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.line-item__remove:hover,
.line-item__remove:focus-visible { color: var(--c-danger); background: var(--c-danger-bg); }

.weight-bar {
  display: grid;
  gap: var(--s-5);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
  padding: var(--s-6) var(--s-7);
}
.weight-bar__title { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.weight-bar__track { height: 6px; border-radius: var(--r-pill); background: var(--c-border); overflow: hidden; }
.weight-bar__fill { display: block; height: 100%; background: var(--c-lime); }

.summary { display: grid; gap: var(--s-6); }
.summary__rows { display: grid; gap: var(--s-4); font-size: var(--fs-base); }
.summary__row { display: flex; justify-content: space-between; gap: var(--s-5); }
.summary__row dt { color: var(--c-ink-mid); }
.summary__row dd { margin: 0; font-weight: var(--w-medium); }
.summary__row--off dd { font-weight: var(--w-bold); color: var(--c-ok); }
.summary__rule { height: 1px; background: var(--c-border-hair); }
.summary__total { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.summary__total-value { font-size: var(--fs-5xl); font-weight: var(--w-bold); letter-spacing: -0.05em; }
.summary__meta {
  text-align: end;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  line-height: 1.7;
}
.summary__note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  text-align: center;
  line-height: 1.7;
}
.coupon { display: flex; gap: var(--s-3); }
.coupon .field__control { flex: 1; }

/* --- checkout ---------------------------------------------------------- */
.step-card {
  display: grid;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--s-8);
}
.step-card__head { display: flex; align-items: center; gap: var(--s-4); }
.step-num {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--r-sm);
  background: var(--c-ink);
  color: var(--c-lime);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  font-weight: var(--w-bold);
  flex: none;
}
.step-card__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }

/* SEU PEDIDO NO TOPO DO CHECKOUT, SÓ NO CELULAR (28/09): a lateral descia
   para depois do pagamento. Do 64rem para cima volta a valer a lateral. */
.pedido-topo {
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-2xl);
  background: var(--c-surface);
}
.pedido-topo__resumo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-7);
  cursor: pointer;
  list-style: none;
}
.pedido-topo__resumo::-webkit-details-marker { display: none; }
.pedido-topo__titulo { flex: 1 1 auto; font-size: var(--fs-md); font-weight: var(--w-bold); }
.pedido-topo__qtd { font-weight: normal; color: var(--c-ink-mid); }
.pedido-topo__total { font-size: var(--fs-md); font-weight: var(--w-bold); }
.pedido-topo__seta { flex: 0 0 auto; transition: transform 0.2s; }
.pedido-topo[open] .pedido-topo__seta { transform: rotate(180deg); }
.pedido-topo__itens { padding: 0 var(--s-7) var(--s-6); border-block-start: var(--hair) solid var(--c-border); padding-block-start: var(--s-6); }
.pedido-topo__contas { padding: var(--s-5) var(--s-7) var(--s-7); border-block-start: var(--hair) solid var(--c-border); }
.pedido-topo__linha-total { font-weight: var(--w-bold); }
.pedido-lateral { display: none; }
@media (min-width: 64rem) {
  .pedido-topo { display: none; }
  .pedido-lateral { display: block; }
}

/* CHECKOUT EM PASSOS (28/09): o app.js [24] marca cada cartão como aberto,
   feito (fechado com resumo e ALTERAR) ou bloqueado (ainda não chegou). */
.step-card.is-aberto { border-color: var(--c-ink); }
.step-card.is-bloqueado { background: var(--c-surface); }
.step-card.is-bloqueado .step-card__title { color: var(--c-ink-faint); }
.step-card.is-bloqueado .step-num { background: var(--c-border-strong); color: var(--c-canvas); }
.step-card.is-feito .step-num { background: var(--c-lime); color: var(--c-ink); }
.step-card__alterar {
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.step-card__resumo {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-ink-mid);
  white-space: pre-line;
}
.pay-option__logos { display: flex; align-items: center; gap: var(--s-4); }
.pay-option__logos img { display: block; width: auto; height: 0.75rem; }
.payments__seguro--checkout {
  justify-content: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
}

.ship-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-canvas-alt);
  padding: var(--s-5) var(--s-6);
}
.ship-row__free { font-family: var(--font-mono); font-size: var(--fs-xxs); font-weight: var(--w-bold); letter-spacing: var(--tr-label); color: var(--c-ok); }

/* COMO ENTREGAR + ENTREGA ESTIMADA (13/10, pedido do Matheus). Cada forma de
   entrega é um cartão (rádio, serviço e prazo em data, preço); o marcado
   ganha a borda escura. Embaixo, o cartão escuro com a data por extenso da
   opção marcada, que acompanha a troca (app.js [26]). */
.frete-opcoes { gap: var(--s-4); }
.frete-opcao { position: relative; margin: 0; }
.frete-opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.frete-opcao label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "marca nome preco" "marca prazo preco";
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  align-items: center;
  padding: var(--s-5) var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-canvas);
  cursor: pointer;
}
.frete-opcao label::before {
  content: "";
  grid-area: marca;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.125rem solid var(--c-border-dash);
  border-radius: 50%;
  background: var(--c-canvas);
}
.frete-opcao input:checked + label {
  border-color: var(--c-night);
  box-shadow: 0 0 0 var(--hair) var(--c-night);
}
.frete-opcao input:checked + label::before {
  border-color: var(--c-night);
  background: radial-gradient(circle, var(--c-night) 0 0.3rem, var(--c-canvas) 0.35rem);
}
.frete-opcao input:focus-visible + label { outline: 0.125rem solid var(--c-purple); outline-offset: 0.125rem; }
.frete-opcao__nome { grid-area: nome; font-size: var(--fs-md); color: var(--c-ink); }
.frete-opcao__transp { color: var(--c-ink-soft); font-size: var(--fs-sm); }
.frete-opcao__prazo { grid-area: prazo; font-size: var(--fs-sm); color: var(--c-ink-mid); }
.frete-opcao__preco { grid-area: preco; font-weight: var(--w-bold); font-size: var(--fs-md); color: var(--c-ink); }

.entrega-estimada {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--c-night);
  color: var(--c-paper);
}
.entrega-estimada .label { color: var(--c-lime); }
.entrega-estimada p { margin: 0; }
.entrega-estimada__data { font-size: var(--fs-2xl); font-weight: var(--w-bold); line-height: 1.25; }
.entrega-estimada__data span { color: var(--c-lime); }
.entrega-estimada__servico { font-size: var(--fs-md); color: var(--c-paper); }
.entrega-estimada__nota { font-size: var(--fs-sm); color: var(--c-ink-faint); }

.pay-grid { display: grid; gap: var(--s-4); }
.pay-option {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-xl);
  background: var(--c-canvas);
  padding: var(--s-6);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pay-option:hover { border-color: var(--c-ink); }
.pay-option__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
}
.pay-option__name { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.pay-option__text { font-size: var(--fs-xs); color: var(--c-ink-mid); }
.pay-option__brands { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: auto; padding-block-start: var(--s-5); }
.pay-brand {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 1.625rem;
  border: var(--hair) solid var(--c-border-strong);
  border-radius: var(--r-xs);
  background: var(--c-canvas);
  font-family: var(--font-mono);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.pay-option[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.pay-option[aria-pressed="true"] .pay-option__tag { color: var(--c-lime); }
.pay-option[aria-pressed="true"] .pay-option__text { color: var(--c-paper-soft); }

.mini-line { display: flex; align-items: center; gap: var(--s-5); }
.mini-line__thumb {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-lg);
  background: var(--g-card);
  flex: none;
  overflow: hidden;
}
/* foto do filamento no lugar da bolinha da cor (28/09) */
.mini-line__thumb img,
.line-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mini-line__body { flex: 1; min-width: 0; }
.mini-line__name { font-size: var(--fs-sm); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.mini-line__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: 2px;
}
.mini-line__price { font-size: var(--fs-sm); font-weight: var(--w-medium); }
/* + / − / REMOVER no checkout (27/09): mexer no pedido sem voltar ao carrinho */
.mini-line__qtd { display: flex; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); }
.mini-line__btn {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: var(--hair) solid var(--c-border-strong); border-radius: var(--r-pill);
  background: var(--c-canvas); color: var(--c-ink);
  font-size: var(--fs-md); line-height: 1; cursor: pointer;
}
.mini-line__btn:hover { border-color: var(--c-ink); }
.mini-line__num { min-width: 1.5rem; text-align: center; font-size: var(--fs-sm); font-weight: var(--w-bold); }
.mini-line__tirar {
  margin-inline-start: var(--s-3); padding: 0; border: 0; background: none;
  font-size: var(--fs-xs); color: var(--c-ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.mini-line__tirar:hover { color: var(--c-danger); }

/* --- confirmacao ------------------------------------------------------- */
.confirm {
  display: grid;
  gap: var(--s-7);
  border-radius: var(--r-4xl);
  background: var(--c-night);
  color: var(--c-paper);
  padding: var(--s-10);
}
.confirm__check {
  display: grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  color: var(--c-ink);
}
.confirm__number {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label-wide);
  color: var(--c-lime);
  margin-block-start: var(--s-6);
}
.confirm__title {
  font-size: var(--fs-title);
  font-weight: var(--w-bold);
  letter-spacing: -0.05em;
  line-height: 1.08;
  max-width: 24ch;
  margin-block-start: var(--s-5);
}
.confirm__text { font-size: var(--fs-base); color: var(--c-paper-soft); max-width: 46ch; margin-block-start: var(--s-5); }
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-2xl);
  background: var(--c-night-line);
  overflow: hidden;
}
.stat-strip--light { border-color: var(--c-border); background: var(--c-border); }
.stat-strip__cell { background: var(--c-night-2); padding: var(--s-6); }
.stat-strip--light .stat-strip__cell { background: var(--c-canvas); }
.stat-strip__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-paper-faint);
}
.stat-strip--light .stat-strip__k { color: var(--c-ink-soft); }
.stat-strip__v { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.035em; margin-block-start: var(--s-3); }

/* --- rastreio ---------------------------------------------------------- */
.timeline { display: grid; }
.timeline__item { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-7); }
.timeline__rail { display: grid; justify-items: center; grid-template-rows: auto 1fr; }
.timeline__dot {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--r-circle);
  background: var(--c-canvas);
  box-shadow: 0 0 0 4px var(--c-border);
  margin-block-start: var(--s-1);
}
.timeline__line { width: 2px; background: var(--c-border); min-height: 1.875rem; }
.timeline__body { padding-block-end: var(--s-8); }
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.timeline__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.timeline__when {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
}
.timeline__text { font-size: var(--fs-sm); color: var(--c-ink-mid); max-width: 58ch; margin-block-start: var(--s-3); }
.timeline__item.is-done .timeline__dot { background: var(--c-ink); box-shadow: 0 0 0 4px var(--c-border-hair); }
.timeline__item.is-done .timeline__line { background: var(--c-ink); }
.timeline__item.is-current .timeline__dot { background: var(--c-lime); box-shadow: 0 0 0 4px rgba(191,255,0,0.22); }
.timeline__item.is-current .timeline__line { background: var(--c-ink); }
.timeline__item.is-todo .timeline__title { color: var(--c-ink-ghost); }
.timeline__item:last-child .timeline__line { background: transparent; min-height: 0; }

/* --- busca e categoria ------------------------------------------------- */
.search-hero {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  border: var(--hair) solid var(--c-ink);
  border-radius: var(--r-2xl);
  background: var(--c-canvas);
  padding: var(--s-6) var(--s-7);
  margin-block-start: var(--s-8);
}
.search-hero__term { flex: 1; min-width: 0; font-size: var(--fs-xl); font-weight: var(--w-medium); letter-spacing: -0.035em; border: none; background: none; outline: none; }
.search-hero__count {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}

.spool-card {
  display: flex;
  flex-direction: column;
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-3xl);
  background: var(--c-canvas);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.spool-card:hover { border-color: var(--c-ink); }
/* MESMA REGRA DO CARD DA HOME (15/09): a foto ocupa o quadro inteiro e a marca
   e o ESGOTADO ficam POR CIMA dela. Aqui era pior que lá — moldura cinza nos
   quatro lados, e como a altura vinha da foto, cada card do catálogo tinha uma
   altura de imagem diferente e a grade não alinhava. Agora o quadro é quadrado
   e manda na altura: foto entra com `cover`, e a grade fica regular.
   Empilhamento por grid (uma área só, "stack"), não por position:absolute.
   O carretel DESENHADO (quando o produto não tem foto) continua centrado no
   meio do quadro, que é o que ele sempre foi. */
.spool-card__media {
  display: grid;
  grid-template-areas: "stack";
  aspect-ratio: var(--ar-square);
  background: var(--g-card);
  /* 22/09: sem isto, uma foto em retrato (vertical) fazia o Grid medir a
     altura do quadro pelo CONTEÚDO — o `aspect-ratio` acima ficava só no
     papel, ignorado, e o card ficava mais alto que os vizinhos, desalinhando
     a grade. `overflow: hidden` tira a foto da conta de "de quanto o quadro
     precisa pra caber o filho" e deixa o quadrado mandar de verdade. Achado
     porque o card da home (`.product-card`) nunca teve esse defeito: lá o
     `aspect-ratio` está no `<img>`, não no contêiner — o padrão mais seguro. */
  overflow: hidden;
}
.spool-card__media > * { grid-area: stack; min-width: 0; }
.spool-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.spool-card__media .spool { place-self: center; }
.spool-card__top {
  z-index: 1;
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5);
  pointer-events: none;
}
/* selo por cima da foto. Escopo no __top de propósito: .spool-card__brand
   também veste a linha de especificação no CORPO do card, e ali não é selo. */
.spool-card__top .spool-card__brand {
  border-radius: var(--r-xs);
  padding: 3px var(--s-2);
  background: var(--o-chip-light);
  backdrop-filter: blur(6px);
  color: var(--c-ink);
}
.spool-card__top .spool-card__esgotado { background: var(--c-ink); color: var(--c-canvas); }
.spool-card__brand {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
}
.spool-card__body { display: flex; flex-direction: column; gap: var(--s-4); flex: 1; padding: var(--s-6); }
.spool-card__name { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; line-height: 1.25; }
.spool-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-block-start: auto; padding-block-start: var(--s-5); }
.spool-card__price { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.04em; }
.spool-card.is-soldout .spool { opacity: 0.4; }
/* mesma desbotada do card da home, agora que aqui também há foto */
.spool-card.is-soldout .spool-card__img { filter: grayscale(1); opacity: 0.55; }
.spool-card.is-soldout:hover { border-color: var(--c-border); }

.dark-hero { background: var(--c-night); color: var(--c-paper); padding-block: var(--s-11); }
.dark-hero__grid { display: grid; gap: var(--s-9); align-items: end; }
.dark-hero__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: -0.045em;
  line-height: 1.06;
  max-width: 22ch;
  margin-block-start: var(--s-6);
}
.dark-hero__text { font-size: var(--fs-base); color: var(--c-paper-soft); max-width: 52ch; margin-block-start: var(--s-6); }
/* BUSCA NO TOPO DO CATÁLOGO (17/10): uma pílula clara no bloco escuro, com
   a lupa, o campo e o BUSCAR verde dentro dela. 16px no campo para o iPhone
   não dar zoom ao tocar. */
.cat-busca {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 36rem;
  margin-block-start: var(--s-7);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-6);
  border-radius: var(--r-pill);
  background: var(--c-canvas);
  color: var(--c-ink-soft);
}
.cat-busca:focus-within { box-shadow: 0 0 0 0.1875rem var(--c-lime); }
/* a mesma busca no fundo claro da home, logo acima dos filamentos */
.cat-busca--claro {
  max-width: none;
  margin-block: 0 var(--s-6);
  border: var(--hair) solid var(--c-ink);
}
.cat-busca__lupa { flex: none; }
.cat-busca__input {
  flex: 1;
  min-width: 0;
  padding-block: var(--s-4);
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.cat-busca__input::placeholder { color: var(--c-ink-soft); }
.cat-busca__input:focus { outline: none; }
.cat-busca__botao { flex: none; }
.dark-hero__img { width: 100%; aspect-ratio: var(--ar-photo); object-fit: cover; border-radius: var(--r-3xl); }
.stat-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-2xl);
  background: var(--c-night-line);
  overflow: hidden;
}
.stat-pair__cell { background: var(--c-night-2); padding: var(--s-6); }
.stat-pair__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-paper-faint);
}
.stat-pair__v { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.04em; margin-block-start: var(--s-2); }

.facets { display: grid; gap: var(--s-6); }
.facet {
  display: grid;
  gap: var(--s-4);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
}
.facet__title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
}
.facet__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--touch);
  cursor: pointer;
}
.facet__option-label { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-sm); }
.facet__box {
  display: grid;
  place-items: center;
  width: 0.875rem;
  height: 0.875rem;
  border: var(--hair) solid var(--c-border-dash);
  border-radius: var(--r-xs);
  background: var(--c-canvas);
  flex: none;
}
.facet__box::after { content: ""; width: 6px; height: 6px; border-radius: 1px; background: transparent; }
.facet__option input { position: absolute; opacity: 0; pointer-events: none; }
.facet__option input:checked + .facet__option-label .facet__box { border-color: var(--c-ink); background: var(--c-ink); }
.facet__option input:checked + .facet__option-label .facet__box::after { background: var(--c-lime); }
.facet__option input:focus-visible + .facet__option-label .facet__box { outline: var(--line-2) solid var(--c-focus); outline-offset: 2px; }
.facet__count { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-ink-ghost); }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block-end: var(--s-6); }

/* --- ajuda ------------------------------------------------------------- */
.faq { display: grid; gap: 1px; border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); background: var(--c-border); overflow: hidden; }
.faq details { background: var(--c-canvas); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-7);
  cursor: pointer;
  font-size: var(--fs-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--c-ink-ghost);
  flex: none;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq__answer { padding: 0 var(--s-7) var(--s-7); font-size: var(--fs-base); color: var(--c-ink-mid); line-height: 1.7; max-width: 66ch; }

.side-cta {
  display: grid;
  gap: var(--s-5);
  border-radius: var(--r-2xl);
  background: var(--c-night);
  color: var(--c-paper);
  padding: var(--s-8);
}
.side-cta__label { font-family: var(--font-mono); font-size: var(--fs-mini); letter-spacing: 0.16em; color: var(--c-lime); }
.side-cta__title { font-size: var(--fs-2xl); font-weight: var(--w-bold); letter-spacing: var(--tr-title); line-height: 1.25; }
.side-cta__text { font-size: var(--fs-sm); color: var(--c-paper-soft); }
.side-cta .btn { justify-self: start; }

.shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
  padding: var(--s-6) var(--s-7);
}
.shortcut:hover { border-color: var(--c-ink); }
.shortcut__title { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.shortcut__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  margin-block-start: var(--s-1);
}

/* --- trocas ------------------------------------------------------------ */
.rule-card { display: grid; gap: var(--s-4); border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); padding: var(--s-8); }
.rule-card__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; color: var(--c-ink-soft); }
.rule-card__term { font-size: var(--fs-5xl); font-weight: var(--w-bold); letter-spacing: -0.05em; }
.rule-card__title { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.rule-card__text { font-size: var(--fs-sm); color: var(--c-ink-mid); }

.step-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-7);
  border-block-end: var(--hair) solid var(--c-border-hair);
}
.step-row:last-child { border-block-end: none; }
.step-row__title { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.step-row__text { font-size: var(--fs-sm); color: var(--c-ink-mid); max-width: 56ch; margin-block-start: var(--s-2); }
.step-row .step-num { width: 1.375rem; height: 1.375rem; border-radius: var(--r-sm); }

/* --- blog e artigo ---------------------------------------------------- */
.feature-post {
  display: grid;
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-4xl);
  overflow: hidden;
  margin-block-start: var(--s-8);
}
.feature-post:hover { border-color: var(--c-ink); }
.feature-post__img { width: 100%; aspect-ratio: var(--ar-wide); object-fit: cover; }
.feature-post__body { display: grid; gap: var(--s-6); align-content: center; padding: var(--s-9); }
.feature-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
}
.feature-post__title { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.045em; line-height: 1.15; }
.feature-post__text { font-size: var(--fs-base); color: var(--c-ink-mid); max-width: 52ch; }
.feature-post .btn { justify-self: start; }

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-3xl);
  background: var(--c-canvas);
  padding: var(--s-8);
}
.post-card:hover { border-color: var(--c-ink); }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
}
.post-card__tag { color: var(--c-ink); font-weight: var(--w-bold); }
.post-card__title { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.038em; line-height: 1.25; }
.post-card__text { font-size: var(--fs-sm); color: var(--c-ink-mid); }
.post-card__date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  margin-block-start: auto;
  padding-block-start: var(--s-5);
}

.article-hero { background: var(--c-night); color: var(--c-paper); padding-block: var(--s-11); }
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-paper-faint);
}
.article-hero__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: -0.045em;
  line-height: 1.08;
  max-width: 22ch;
  margin-block-start: var(--s-7);
}
.article-hero__lead { font-size: var(--fs-md); color: var(--c-paper-soft); line-height: 1.7; max-width: 56ch; margin-block-start: var(--s-6); }
.author { display: flex; align-items: center; gap: var(--s-5); margin-block-start: var(--s-8); }
.author .avatar { width: 2.125rem; height: 2.125rem; font-family: var(--font-body); font-size: var(--fs-sm); }
.author__name { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: var(--tr-tight); }
.author__role {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-paper-faint);
  margin-block-start: 3px;
}
.prose-figure { margin: 0; }
.prose-figure__img { width: 100%; aspect-ratio: var(--ar-wide); object-fit: cover; border-radius: var(--r-3xl); }
.figure__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  margin-block-start: var(--s-4);
}
.prose { display: grid; gap: var(--s-7); margin-block-start: var(--s-9); }
.prose p { font-size: var(--fs-md); line-height: 1.8; color: #2A2A32; }
.pull-quote {
  border-inline-start: 3px solid var(--c-lime);
  padding: var(--s-2) 0 var(--s-2) var(--s-7);
  margin: 0;
}
.pull-quote p { font-size: var(--fs-2xl); font-weight: var(--w-regular); letter-spacing: -0.035em; line-height: 1.45; color: var(--c-ink); }

.data-table caption {
  padding: var(--s-6) var(--s-7);
  background: var(--c-canvas-alt);
  border-block-end: var(--hair) solid var(--c-border);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.16em;
  color: var(--c-ink-soft);
  text-align: start;
}
.data-table th, .data-table td { text-align: start; }
.data-table thead { display: none; }
.data-table tbody tr { display: grid; gap: var(--s-2); padding: var(--s-6) var(--s-7); border-block-end: var(--hair) solid var(--c-border-soft); }
.data-table tbody th { font-size: var(--fs-base); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.data-table tbody td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink-mid);
}
.data-table tbody td::before {
  content: attr(data-label);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
}
.data-table .is-ok { color: var(--c-ok); font-weight: var(--w-bold); }
.data-table .is-fail { color: #C4342F; font-weight: var(--w-bold); }

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  background: var(--c-canvas-alt);
  padding: var(--s-7);
  margin-block-start: var(--s-9);
}
.inline-cta__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; }

/* --- sobre ------------------------------------------------------------- */
.stat-card { border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); padding: var(--s-8); }
.stat-card__v { font-size: var(--fs-6xl); font-weight: var(--w-bold); letter-spacing: -0.055em; }
.stat-card__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
  margin-block-start: var(--s-3);
}
.stat-card__note { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-2); }

.era-card { display: grid; gap: var(--s-4); border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); padding: var(--s-8); }
.era-card__year {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: var(--tr-label);
  background: var(--c-ink);
  color: var(--c-lime);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
}
.era-card__title { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.04em; line-height: 1.25; }
.era-card__text { font-size: var(--fs-base); color: var(--c-ink-mid); line-height: 1.7; }

.bench {
  display: grid;
  gap: var(--s-9);
  border-radius: var(--r-4xl);
  background: var(--c-night-2);
  color: var(--c-paper);
  padding: var(--s-9);
  align-items: center;
}
.bench__title { font-size: var(--fs-5xl); font-weight: var(--w-regular); letter-spacing: var(--tr-title); line-height: 1.15; max-width: 20ch; margin-block-start: var(--s-6); }
.bench__text { font-size: var(--fs-base); color: var(--c-paper-soft); line-height: 1.7; max-width: 44ch; margin-block-start: var(--s-5); }
.bench__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: var(--hair) solid var(--c-night-line);
  border-radius: var(--r-2xl);
  background: var(--c-night-line);
  overflow: hidden;
}
.bench__cell { background: var(--c-night); padding: var(--s-7); }
.bench__tag { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-lime); }
.bench__name { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: -0.035em; line-height: 1.3; margin-block-start: var(--s-3); }
.bench__note { font-size: var(--fs-sm); color: var(--c-paper-soft); margin-block-start: var(--s-2); }

.team-card { border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); overflow: hidden; }
.photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ar-photo);
  background: var(--c-canvas-alt);
  border-block-end: var(--hair) dashed var(--c-border-dash);
  font-family: var(--font-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-faint);
  text-align: center;
  padding: var(--s-6);
}
.team-card__body { padding: var(--s-7); }
.team-card__name { font-size: var(--fs-xl); font-weight: var(--w-bold); letter-spacing: -0.04em; }
.team-card__role {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  color: var(--c-ink-soft);
  margin-block-start: var(--s-2);
}
.team-card__note { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-3); }

/* --- atacado ---------------------------------------------------------- */
.green-hero { position: relative; color: var(--c-paper); overflow: hidden; background-color: var(--c-green); }
.green-hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 2% center; }
.green-hero__scrim { background: var(--g-green-hero-scrim); }
.green-hero__body { display: grid; gap: var(--s-9); padding-block: var(--s-11); align-content: center; }
.green-hero__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  letter-spacing: -0.045em;
  line-height: 1.08;
  max-width: 20ch;
  margin-block-start: var(--s-6);
}
.green-hero__text { font-size: var(--fs-md); color: #E4F2D8; line-height: 1.75; max-width: 46ch; margin-block-start: var(--s-6); }
.green-hero .eyebrow { color: #CDE8B8; }

.band-card { display: grid; gap: var(--s-4); border: var(--hair) solid var(--c-border); border-radius: var(--r-3xl); padding: var(--s-9); }
.band-card__range { font-family: var(--font-mono); font-size: var(--fs-mini); letter-spacing: 0.16em; color: var(--c-ink-soft); }
.band-card__off { font-size: var(--fs-7xl); font-weight: var(--w-bold); letter-spacing: -0.055em; line-height: 1; }
.band-card__note { font-size: var(--fs-base); color: var(--c-ink-mid); }
/* 15/09: o mínimo que destrava a faixa. Era o dado que faltava no card — e o
   "Tabela fechada por 90 dias" saiu daqui, porque repetido nos tres cards era
   ruido: virou uma linha só embaixo da grade (.cards-3__note). */
.band-card__min { font-size: var(--fs-base); color: var(--c-ink-mid); }
.band-card.is-featured { border-color: var(--c-ink); background: var(--c-canvas-alt); }

/* PÁGINA EM DUAS METADES (15/09) — a foto ocupa a lateral esquerda inteira e o
   texto mora na direita. Nasceu no ATACADO ("a página é uma conversa, não uma
   vitrine": a hero verde e o bloco "o que entra junto" saíram, sobraram a
   promessa, a tabela de faixas e o campo pra pessoa falar com a gente) e virou
   layout compartilhado quando TROCAS pediu a mesma forma — daí o nome deixou
   de ser .b2b.
   No celular a foto vira a abertura e tudo empilha.
   A cor de fundo é a da própria foto, pra não piscar branco enquanto carrega:
   quem usa outra foto redefine --photo-split-bg no elemento da página. */
.photo-split { display: grid; }
.photo-split__photo {
  background: var(--photo-split-bg, #A9D42A);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
/* object-position é por PÁGINA: a coluna é mais alta do que larga, então o
   cover corta em cima e embaixo, e onde cortar depende do que a foto tem ali.
   No atacado o `center` comia o cabelo da modelo. */
.photo-split__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--photo-split-pos, center);
}
.photo-split__col {
  display: grid;
  align-content: start;
  gap: var(--s-10);
  padding: var(--s-10) var(--gutter) var(--s-12);
}
.photo-split__title {
  font-size: var(--fs-5xl);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-title);
  line-height: 1.04;
  margin-block-start: var(--s-5);
}
.photo-split__text { font-size: var(--fs-md); color: var(--c-ink-mid); line-height: 1.7; max-width: 46ch; margin-block-start: var(--s-6); }
.photo-split__form { display: block; }

.cards-3__note { margin-block-start: var(--s-5); font-size: var(--fs-sm); color: var(--c-ink-soft); }

.include-card { border: var(--hair) solid var(--c-border); border-radius: var(--r-2xl); padding: var(--s-7); }
.include-card__title { font-size: var(--fs-lg); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.include-card__text { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-2); }

/* --- privacidade ------------------------------------------------------ */
.privacy-row {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  border-block-end: var(--hair) solid var(--c-border-soft);
}
.privacy-row:last-child { border-block-end: none; }
.privacy-row__title { font-size: var(--fs-md); font-weight: var(--w-bold); letter-spacing: -0.035em; }
.privacy-row__text { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-2); }
.privacy-row__term {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-ghost);
  line-height: 1.6;
}

/* --- hero: troca de fotos ---------------------------------------------
   Quem manda é o app.js [20], porque os pontinhos do mockup precisam poder
   escolher a foto. O @keyframes abaixo é a RESERVA pra quando o JS não
   roda: sozinho ele nunca para na foto que o usuário clicou. Com o JS
   ligado (.hero--com-js) a animação sai de cena, senão ela ganharia do
   style inline — animação vence inline no cascade pra propriedade animada. */
.hero-fade__img { opacity: 0; }
.hero-fade__img:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-fade__img {
    animation: heroFade 20s infinite;
    animation-delay: calc(var(--hero-fade-i, 0) * -5s);
  }
  .hero-fade__img:nth-child(1) { --hero-fade-i: 0; }
  .hero-fade__img:nth-child(2) { --hero-fade-i: 1; }
  .hero-fade__img:nth-child(3) { --hero-fade-i: 2; }
  .hero-fade__img:nth-child(4) { --hero-fade-i: 3; }
  .hero--com-js .hero-fade__img { animation: none; }
}
/* fade-in explícito (0% começa em 0, não em 1): sem ele a foto pula pra opacity
   1 de um frame pro outro enquanto a anterior ainda está sumindo — sobra um
   instante com as duas quase transparentes, mostrando o fundo liso por
   baixo (parecia "um frame do site antigo" entre uma foto e outra) */
@keyframes heroFade {
  0% { opacity: 0; }
  2%, 23% { opacity: 1; }
  25%, 100% { opacity: 0; }
}

/* --- home: chamada "filamento de precisão" ----------------------------- */
.pitch { display: grid; gap: var(--s-7); margin-block-end: var(--s-9); }
.pitch__title {
  font-size: var(--fs-title);
  font-weight: var(--w-regular);
  line-height: 1.14;
  letter-spacing: var(--tr-tight);
  text-wrap: pretty;
}
.pitch__side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-7); }
.pitch__text { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--c-ink-mid); text-wrap: pretty; }

/* pílula escura com a seta num disco lime — o par claro do .hero__cta */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-5);
  background: var(--c-ink);
  border-radius: var(--r-pill);
  padding: var(--s-5) var(--s-5) var(--s-5) var(--s-7);
  color: var(--c-canvas);
  font-size: var(--fs-md);
  font-weight: var(--w-medium);
}
.pill-btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  color: var(--c-ink);
}

/* --- home: destaques (cards de promoção) ------------------------------- */
.promo-tiles { display: grid; gap: var(--s-5); }
.promo-tile { border-radius: var(--r-3xl); overflow: hidden; }
.promo-tile__link {
  /* 15/09: o card inteiro é um link, e a cor de link (tinta) vencia a cor que
     o modificador do card define — no card roxo o "Comprar no atacado" saía
     quase preto sobre o roxo. Herdando, cada modificador manda na sua cor.
     Nos cards claros não muda nada: a cor deles já é a mesma tinta. */
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-7);
  height: 100%;
  padding: var(--s-8) var(--s-9);
  box-sizing: border-box;
  min-height: 15.625rem;
}
.promo-tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.promo-tile__head .label { line-height: 1.7; }
.promo-tile__badges { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.promo-tile__until {
  font-family: var(--font-mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.1em;
  color: #3F5400;
}
/* a seta do card: disco preto no lime, traço solto nos outros */
.promo-tile__arrow { display: flex; align-items: center; flex: none; }
.promo-tile__arrow--dark {
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-circle);
  background: var(--c-ink);
  color: var(--c-lime);
}
.promo-tile__foot { display: grid; gap: var(--s-5); }
.promo-tile__title { font-size: var(--fs-5xl); font-weight: var(--w-medium); letter-spacing: -0.025em; line-height: 1.08; }
.promo-tile--lime { background: var(--c-lime); color: var(--c-ink); }
.promo-tile--muted { background: var(--c-surface-alt); color: var(--c-ink); }
.promo-tile--purple { background: var(--c-purple); color: var(--c-canvas); }
.promo-tile--purple .label { color: var(--o-line-light); }
/* a foto da promoção sangra pela direita do card, como no mockup */
.promo-tile--lime .promo-tile__link { padding-block-end: 0; }
/* CANTOS ARREDONDADOS NA FOTO (15/09). Ela entrava como um retângulo duro no
   meio de um card que é todo de cantos redondos — destoava do desenho inteiro.
   O raio é menor que o do card (--r-3xl): caixa de dentro acompanha a de fora
   com um raio um degrau abaixo, senão as duas curvas competem. */
.promo-tile__img {
  align-self: flex-end;
  width: 66%;
  object-fit: contain;
  margin-inline-end: calc(var(--s-9) * -0.6);
  border-radius: var(--r-2xl);
}
.promo-tile--lime .promo-tile__foot { padding-block-end: var(--s-9); }
.promo-tile__spools { display: flex; align-items: flex-end; justify-content: center; }
.promo-tile__spools img { width: 34%; object-fit: contain; margin-inline-start: -7%; }
.promo-tile__spools img:first-child { margin-inline-start: 0; }
.promo-tile__spools img:nth-child(2) { width: 42%; position: relative; z-index: 2; }
.promo-tile__price { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.promo-tile__was { font-family: var(--font-mono); font-size: var(--fs-sm); text-decoration: line-through; color: #5E7300; }
.promo-tile__now { font-family: var(--font-mono); font-weight: var(--w-bold); font-size: var(--fs-xs); letter-spacing: 0.06em; }
.promo-tile__off {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-label);
  color: var(--c-lime);
}

/* --- como testamos ------------------------------------------------------ */
.photo-slot--wide { aspect-ratio: var(--ar-wide); border-block-end: none; }
/* foto larga de abertura de página de conteúdo: nasceu em COMO TESTAMOS e
   virou primitivo quando SOBRE pediu a mesma coisa. */
.page-foto { width: 100%; aspect-ratio: var(--ar-wide); object-fit: cover; border-radius: var(--r-3xl); display: block; }

/* CAPA DE PÁGINA: a foto ocupa a largura toda e o texto mora DENTRO dela, como
   o hero da home. Empilhamento por GRID (uma área só), não por
   position:absolute — layout estruturado com absolute é proibido aqui, e o
   grid dá o mesmo sem tirar ninguém do fluxo.
   No celular o quadro é retrato (4/5): foto deitada num quadro largo deixaria
   a faixa de texto em cima do assunto. */
.capa {
  --hero-gutter: calc(var(--gutter) / 2);
  padding-inline: var(--hero-gutter);
  margin-block-start: var(--s-7);
}
/* as MESMAS medidas do hero da home (.hero__box): 3/4 no celular e, no
   desktop, a primeira rolagem inteira em vez de proporção. Antes era 16/10 e a
   faixa ficava larga e baixa, sem parecer abertura. */
.capa__box {
  display: grid;
  grid-template-areas: "stack";
  aspect-ratio: 3 / 4;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--c-purple);
  isolation: isolate;
}
.capa__box > * { grid-area: stack; min-width: 0; }
/* o recorte é POR LARGURA no celular: a foto é deitada e o quadro é retrato,
   então `center` deixava a pessoa metade fora do quadro na borda direita. No
   desktop o quadro já é largo, o corte é pequeno e `center` é o enquadramento
   certo — a parede de carretéis à esquerda, ela à direita. */
.capa__img { width: 100%; height: 100%; object-fit: cover; object-position: 64% center; }
.capa__scrim { background: var(--g-hero-scrim); }
.capa__body {
  z-index: 1;
  align-self: end;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-8);
  color: var(--c-paper);
}
.capa__titulo {
  font-size: var(--fs-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--tr-title);
  line-height: 1.06;
  max-width: 18ch;
}
.capa__texto { font-size: var(--fs-md); line-height: 1.7; max-width: 52ch; color: var(--c-paper-soft); }
.capa .eyebrow { color: var(--c-paper-soft); }

/* Bloco de foto + texto lado a lado, alternando o lado da foto.
   NO CELULAR O TEXTO VEM PRIMEIRO, sempre: com a foto antes, a primeira seção
   caía logo embaixo da capa e a página abria com duas fotos grandes coladas,
   sem nada para ler no meio. No HTML o texto é o primeiro filho; quem troca a
   ordem no desktop é o `order`. */
.foto-lado { display: grid; gap: var(--s-7); align-items: center; margin-block-start: var(--s-10); }
.foto-lado__img { width: 100%; object-fit: cover; border-radius: var(--r-3xl); display: block; }
.foto-lado__img--larga { aspect-ratio: var(--ar-photo); }
/* quadro para foto em pé. O 2/3 é mais alto que o 4/5 de antes porque a foto
   da seção A CASA é 9:16: num quadro mais largo o corte tirava a cabeça ou o
   carretel em que ele pisa. O `object-position` puxa o recorte para baixo pelo
   mesmo motivo — em cima a parede de carretéis se repete, embaixo está o pé
   dele, que é o fim da composição. */
.foto-lado__img--alta { aspect-ratio: 2 / 3; object-position: center 75%; }
/* No desktop o quadro fica bem mais baixo (teto de altura, abaixo), e aí só
   cabe metade da foto: com o recorte lá embaixo sumia a cabeça dele. Aqui o
   recorte sobe e a janela pega do topo da cabeça até o carretel na mão. Os pés
   ficam de fora, e é a troca certa: rosto vale mais que tênis. */

/* CARROSSEL DE PASSOS: a mesma mecânica da galeria do produto (rolagem
   horizontal com encaixe), reaproveitando os cartões de COMO TESTAMOS. Os
   cartões não cabem inteiros de propósito — o pedaço do próximo aparecendo na
   borda é o que diz que dá para arrastar, sem precisar de seta nenhuma. */
.passos-carrossel {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* sangra até a borda da tela: cartão cortado na calha parece defeito */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block-end: var(--s-3);
}
.passos-carrossel::-webkit-scrollbar { display: none; }
.passos-carrossel > * { flex: 0 0 min(19rem, 78%); scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .passos-carrossel { scroll-behavior: auto; } }
/* o texto e os botões da chamada em linha, que só existiam no título */
.inline-cta__text { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-3); max-width: 52ch; }
.inline-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* .is-night sozinho NÃO escurece esta caixa: as duas regras têm a mesma
   especificidade e a de .inline-cta vem depois no arquivo, então o fundo claro
   ganhava e só a COR do texto virava branca — título e botão sumiam. Aqui a
   classe dupla (0-2-0) resolve, e o texto secundário acompanha. */
.inline-cta.is-night {
  background: var(--c-night);
  border-color: transparent;
  color: var(--c-paper);
}
.inline-cta.is-night .inline-cta__text { color: var(--c-paper-soft); }
.stat-card--dark { background: var(--c-night); border-color: var(--c-night); color: var(--c-paper); }
.stat-card--dark .stat-card__v { color: var(--c-lime); }
.stat-card--dark .stat-card__k { color: var(--c-paper-faint); }

.testamos-steps { display: grid; gap: var(--s-5); }
.testamos-step {
  display: grid;
  gap: var(--s-3);
  border: var(--hair) solid var(--c-border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: var(--s-7) var(--s-7) 0;
}
.testamos-step__head { display: flex; align-items: baseline; gap: var(--s-4); }
.testamos-step__num {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  font-size: var(--fs-sm);
  color: var(--c-lime);
  background: var(--c-night);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-3);
}
.testamos-step__title { font-size: var(--fs-lg); font-weight: var(--w-medium); letter-spacing: -0.025em; line-height: 1.25; }
.testamos-step__text { font-size: var(--fs-sm); color: var(--c-ink-mid); }
.testamos-step__photo {
  margin-inline: calc(var(--s-7) * -1);
  margin-block-start: var(--s-6);
  width: calc(100% + var(--s-7) * 2);
  aspect-ratio: var(--ar-photo);
  object-fit: cover;
  display: block;
}
/* 11/10: a foto do carretel vem em fundo branco puro; fundo da moldura igual, senão aparece um quadrado branco dentro do bege */
.testamos-step__photo--contain { object-fit: contain; background: #fff; padding: var(--s-6); box-sizing: border-box; }

.include-card--lime { background: var(--c-lime); border-color: var(--c-lime); }
.include-card--lime .include-card__text { color: var(--c-night-alt); }

/* VÍDEO DO ENSAIO, EM PÉ (22/09): o primeiro vídeo de verdade veio gravado na
   vertical (celular, sem tripé de estúdio) — mais honesto com o "sem corte e
   sem narração bonita" do texto ao lado do que um estúdio horizontal teria
   sido. Por isso o quadro é 9:16, não o `--ar-wide` de sempre, e fica do
   tamanho de um celular (`max-width`), não esticado pro tamanho do
   `.cta-panel` inteiro. `overflow: hidden` no quadro é obrigatório aqui: sem
   ele, um vídeo mais alto que largo faz o Grid medir a altura pelo
   CONTEÚDO e ignorar o aspect-ratio — o mesmo defeito achado hoje no card do
   catálogo (ver `.spool-card__media`), só que pior aqui: a proporção
   "errada" (retrato dentro de um quadro pensado pra paisagem) é o caso
   normal desta seção, não a exceção.
   24/09: virou um `<video>` de verdade (era `<a><img></a>` linkando pra
   galeria, mas o clique de lá fazia a página pular pra cima em vez de tocar
   aqui). `.video-vertical__poster` funciona igual em `<img>` ou `<video>`
   (o `object-fit: cover` não distingue a tag). O botão [data-video-play]
   some depois do primeiro play (app.js), aí quem manda são os controles
   nativos do navegador. */
.video-vertical {
  width: 100%;
  max-width: 17.5rem;
  aspect-ratio: var(--ar-portrait);
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: var(--c-night);
  margin-inline: auto;
}
.video-vertical__poster { width: 100%; height: 100%; object-fit: cover; }
.video-vertical__play {
  place-self: center;
  display: grid;
  place-items: center;
  width: 4.125rem;
  height: 4.125rem;
  border-radius: var(--r-circle);
  background: var(--c-lime);
  color: var(--c-ink);
  box-shadow: var(--sh-pop);
  transition: transform var(--dur-fast) var(--ease);
  cursor: pointer;
  /* o <video> ganha camada própria no navegador e, sem isto, fica por cima
     do botão mesmo vindo antes no HTML: o clique caía no vídeo */
  position: relative;
  z-index: 1;
}
.video-vertical:hover .video-vertical__play { transform: scale(1.06); }

.testamos-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-7);
}
.testamos-closing__title { font-size: var(--fs-xl); font-weight: var(--w-medium); letter-spacing: -0.03em; max-width: 32ch; }
.testamos-closing__text { font-size: var(--fs-sm); color: var(--c-ink-mid); margin-block-start: var(--s-2); max-width: 44ch; }

/* --- erro 404 --------------------------------------------------------- */
.error-page {
  display: grid;
  gap: var(--s-7);
  justify-items: start;
  padding-block: var(--s-12);
  max-width: 46rem;
  margin-inline: auto;
}
.error-page__code { font-family: var(--font-mono); font-size: var(--fs-7xl); font-weight: var(--w-bold); letter-spacing: -0.04em; color: var(--c-lime-deep); }
.error-page__title { font-size: var(--fs-title); font-weight: var(--w-bold); letter-spacing: -0.045em; line-height: var(--lh-title); }
.error-page__text { font-size: var(--fs-md); color: var(--c-ink-mid); max-width: 52ch; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ==========================================================================
   MEDIA QUERIES — somente min-width
   ========================================================================== */

/* --- 30rem / 480px: duas colunas de card ------------------------------- */
@media (min-width: 30rem) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatch-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
  }
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-report { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cart-btn__word { display: inline; }
}

/* --- 48rem / 768px: tablet -------------------------------------------- */
@media (min-width: 48rem) {
  /* par de campos (numero + complemento, bairro + cidade) lado a lado */
  .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .line-item { grid-template-columns: 4.5rem 1fr auto; }
  .line-item__side {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding-block-start: 0;
    border-block-start: none;
  }
  /* computador: quantidade em cima; preço e lixeira lado a lado embaixo */
  .line-item__form { display: grid; grid-template-columns: auto auto; justify-items: end; inline-size: auto; }
  .line-item__form .qty { grid-column: 1 / -1; }
  .line-item__form .line-item__total { margin-inline-start: 0; }
  .page-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .weight-bar { grid-template-columns: 1fr minmax(11rem, 1fr); align-items: center; }
  .feature-post__title { font-size: var(--fs-6xl); }
  .bench__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --gutter: 1.5rem; }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s-9); }
  .catalog-head { grid-template-columns: 1fr auto; align-items: end; }
  .catalog-head .chip-row { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow-x: visible; }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-10); }
  .trial-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ======================================================================
   --- 64rem / 1024px: BREAKPOINT PRINCIPAL — vira o desktop ---
   ====================================================================== */
@media (min-width: 64rem) {
  :root { --gutter: 2rem; }

  /* paginas internas */
  /* igual ao hero da home: a altura vem do viewport, não de proporção, e
     inline-size:100% é obrigatório junto de altura fixa (sem ele o
     aspect-ratio deriva a largura DA altura e a caixa estreita sozinha). */
  .capa__box {
    aspect-ratio: auto;
    inline-size: 100%;
    block-size: calc(100svh - var(--gutter));
  }
  .capa__img { object-position: center; }
  .capa__body { padding: var(--s-10) var(--s-11); }
  /* TETO DE ALTURA NA FOTO (15/09). Com só a proporção, quem mandava na altura
     da linha era a foto, e ao lado do texto sobrava um buraco: medido, 284px na
     primeira seção e 525px na segunda. O teto derruba a foto para perto da
     altura do texto, e o `cover` recorta em vez de deformar.
     Teto e não `height:100%`: a altura de um <img> com height:100% dentro de
     uma linha de altura automática volta para a altura intrínseca, e a linha
     cresce em vez de encolher. Medido também. */
  .foto-lado { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
  .foto-lado__img--larga { max-block-size: 22rem; }
  .foto-lado__img--alta { max-block-size: 32rem; object-position: center 25%; }
  /* no desktop a foto sobe para a esquerda; na seção invertida ela fica onde
     está, à direita */
  .passos-carrossel > * { flex: 0 0 min(21rem, 30%); }
  .foto-lado__img { order: -1; }
  .foto-lado--invertido .foto-lado__img { order: 0; }
  .split { grid-template-columns: 1.62fr 1fr; gap: var(--s-7); }
  .split--wide { grid-template-columns: 1.5fr 1fr; }
  .split--even { grid-template-columns: 1fr 1.05fr; }
  .split--facets { grid-template-columns: 14.75rem 1fr; gap: var(--s-9); }
  .filters-trigger { display: none; }
  .filters-panel,
  .filters-panel[hidden][hidden] {
    position: sticky;
    inset-block-start: 6rem;
    inset-inline: auto;
    z-index: var(--z-base);
    display: grid;
    width: auto;
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }
  .filters-panel .facet { margin-inline: 0; }
  .filters-panel__head,
  .filters-panel__foot { display: none; }
  .split__aside { position: sticky; inset-block-start: 6rem; }
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .testamos-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .promo-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo-tile__link { min-height: 18.75rem; }
  .pitch {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-11);
    align-items: start;
    margin-block-end: var(--s-11);
  }
  .pitch__side { padding-block-start: var(--s-3); }
  .pitch__text { font-size: var(--fs-lg); }
  .dark-hero__grid { grid-template-columns: 1.4fr 1fr; }
  .dark-hero__grid--about { grid-template-columns: 1.3fr 1fr; }
  .feature-post { grid-template-columns: 1.15fr 1fr; }
  .feature-post__img { height: 100%; aspect-ratio: auto; }
  .bench { grid-template-columns: 1fr 1.1fr; }
  .green-hero__body { grid-template-columns: 1fr 1fr; }

  /* ATACADO no desktop: metade foto, metade conversa. A foto gruda (o header
     do site é sticky e mede 69px, daí o desconto) e acompanha a rolagem do
     formulário em vez de esticar uma imagem de 928px até o rodapé. */
  .photo-split { grid-template-columns: 1fr 1fr; }
  .photo-split__photo {
    position: sticky;
    inset-block-start: var(--photo-split-header, 4.3125rem);
    align-self: start;
    aspect-ratio: auto;
    block-size: calc(100svh - var(--photo-split-header, 4.3125rem));
  }
  .photo-split__col {
    gap: var(--s-11);
    padding: var(--s-12) var(--s-11) var(--s-12) var(--s-11);
    max-width: 40rem;
  }
  .photo-split__title { font-size: var(--fs-6xl); }
  .photo-split__faixas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .photo-split__faixas .band-card { padding: var(--s-6); gap: var(--s-3); }
  .photo-split__faixas .band-card__off { font-size: var(--fs-5xl); }
  .photo-split__faixas .band-card__min { font-size: var(--fs-sm); }
  .spacer-col { display: block; }

  /* conta: autenticacao vira split de duas colunas */
  .auth { grid-template-columns: 1.04fr 1fr; }
  .auth__brand { justify-content: space-between; padding: var(--s-10) var(--s-11); }
  .auth__panel { padding: var(--s-10) var(--s-11); }

  /* conta: no desktop o menu é uma coluna CLARA à esquerda (26/09, o Matheus
     prefere o menu na lateral): logo, VOLTAR PARA A LOJA, as seções uma
     embaixo da outra e SAIR no pé */
  .account { display: grid; grid-template-columns: 16.5rem 1fr; align-items: start; }
  .conta-lado {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--c-canvas);
    border-inline-end: var(--hair) solid var(--c-border);
  }
  .conta-topo { border-block-end: none; }
  .conta-topo__in { flex-direction: column; align-items: stretch; gap: var(--s-8); padding: var(--s-9) var(--s-7) var(--s-7); }
  .conta-topo__loja { justify-content: center; }
  .account-nav { flex: 1; display: flex; flex-direction: column; border-block-end: none; }
  .account-nav__list {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    margin-inline: 0;
    padding: 0 var(--s-5) var(--s-8);
    overflow: visible;
  }
  .account-nav__fim { margin-inline-start: 0; margin-block-start: auto; }
  .account-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-block-end: none;
    border-radius: var(--r-lg);
  }
  .account-nav__link:hover { background: var(--c-surface); }
  .account-nav__link[aria-current="page"] { background: var(--c-surface-alt); color: var(--c-ink); font-weight: var(--w-bold); }
  .account-nav__out { justify-content: flex-start; }
  .account__main { margin-inline: 0; padding: var(--s-10) var(--s-10) var(--s-12); }
  .order-row { grid-template-columns: 8.25rem 1fr 8rem 8.25rem; align-items: center; }
  .sub-panel { grid-template-columns: 1fr 16.75rem; }
  .confirm { padding: var(--s-11); }

  /* tabela do artigo volta a grade */
  .data-table thead { display: table-header-group; }
  .data-table thead th {
    padding: var(--s-5) var(--s-7);
    background: var(--c-canvas-alt);
    border-block-end: var(--hair) solid var(--c-border);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: var(--w-regular);
    letter-spacing: var(--tr-label);
    color: var(--c-ink-soft);
  }
  .data-table thead th + th { text-align: end; }
  .data-table tbody tr { display: table-row; padding: 0; }
  .data-table tbody th { padding: var(--s-5) var(--s-7); }
  .data-table tbody td { display: table-cell; text-align: end; padding: var(--s-5) var(--s-7); }
  .data-table tbody td::before { content: none; }
  .privacy-row { grid-template-columns: minmax(0, 1fr) 11.875rem; align-items: start; }
  .privacy-row__term { text-align: end; }

  body { font-size: var(--fs-base); }

  /* header completo em uma linha */
  .site-header__inner {
    grid-template-columns: auto auto 1fr auto;
    gap: var(--s-6) var(--s-9);
    padding-block: var(--s-5);
  }
  /* quatro colunas para quatro filhos: logo, menu, busca e ações. No OVERLAY
     não existe o campo de busca fixo — são três filhos numa grade de quatro,
     e o vão da coluna que sobrava (28px) empurrava as ações para dentro: o
     logo ficava a 22px da borda da foto e os ícones a 50px. */
  .site-header--overlay .site-header__inner { grid-template-columns: auto auto 1fr; }
  .menu-toggle { display: none; }
  .site-header__nav { display: block; }
  .search.site-header__search { display: flex; max-width: 18.75rem; justify-self: end; }
  .header-actions__login { display: inline-flex; }
  .header-actions__contact { display: inline-flex; }
  /* no desktop o campo abre AO LADO, com largura própria: cabe tudo, então
     nada some enquanto se busca (ver o bloco de .header-busca). */
  .site-header--buscando .logo { display: flex; }
  .site-header--buscando .header-actions__contact,
  .site-header--buscando .header-actions__icones > .header-icon-btn { display: inline-flex; }
  .site-header--buscando .header-actions { justify-self: end; }
  .site-header--buscando .header-actions__icones {
    flex: none;
    border-inline-start: var(--hair) solid var(--o-line-light);
    padding-inline-start: var(--s-8);
  }
  .header-busca.is-aberta { flex: none; }
  .header-busca.is-aberta .header-busca__campo { flex: none; width: 18rem; }

  /* a acao principal volta ao fluxo */
  .action-bar { display: none; }
  .has-action-bar { padding-block-end: 0; }

  /* desktop: a foto vira paisagem, o texto encosta no rodapé da caixa e o CTA
     vai pro canto direito, na mesma linha de base.

     A ALTURA VEM DO VIEWPORT, NÃO DE PROPORÇÃO (15/09). Primeiro foi 16/10,
     que estourava a dobra em tela larga; depois 16/9 com teto por viewport,
     que cabia mas deixava a próxima seção aparecer pela metade embaixo — o
     título "Filamento de precisão..." entrava cortado na primeira tela e era
     isso que se via. Agora a caixa OCUPA a primeira rolagem inteira: nasce a
     meia calha do topo e termina a meia calha do rodapé, e a foto (que é
     object-fit:cover) só recorta. svh, não vh, por causa da barra do
     navegador. aspect-ratio volta a auto senão ele briga com a altura. */
  .hero__box {
    aspect-ratio: auto;
    /* inline-size:100% é OBRIGATÓRIO junto de altura fixa. Com largura
       automática, o aspect-ratio deriva a largura DA altura — quando a altura
       muda, o navegador estreita a caixa junto, e ela deixa de acompanhar a
       página: numa janela de 1512px a foto parava 27px antes dos ícones do
       topo, que ficavam boiando no fundo branco. */
    inline-size: 100%;
    block-size: calc(100svh - var(--gutter));
  }
  .hero__rule {
    display: block;
    position: absolute;
    inset-inline-start: var(--s-8);
    inset-block-start: 44%;
    z-index: 2;
    width: 2.75rem;
    height: 2px;
    background: var(--c-paper);
  }
  .hero__rule::before {
    content: "";
    position: absolute;
    inset-block-end: calc(100% + 5px);
    inset-inline-start: 0;
    width: 1.625rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
  }
  .hero__body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-10);
    inset-block-end: var(--s-8);
  }
  .hero__copy { max-width: 37.5rem; }
  .hero__text { font-size: var(--fs-lg); }
  .hero__side { flex-direction: column-reverse; align-items: flex-end; flex: none; }
  .hero__cta { flex: none; }

  .swatch-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .swatch-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-9); }
  .swatch-bar__actions .btn { flex: none; }
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* comparador: volta a ser grade de tabela */
  .compare__table thead { display: table-header-group; }
  .compare__table thead th {
    padding: var(--s-6) var(--s-7);
    background: #16161A;
    border-inline-start: var(--hair) solid var(--c-night-line);
    vertical-align: top;
    font-weight: var(--w-regular);
  }
  .compare__table thead th:first-child { border-inline-start: none; width: 30%; }
  .compare__table tbody tr { display: table-row; padding: 0; }
  .compare__table tbody th {
    display: table-cell;
    padding: var(--s-5) var(--s-7);
    border-block-start: var(--hair) solid var(--c-night-line-soft);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: var(--tr-body);
    color: var(--c-paper-soft);
  }
  .compare__table tbody td {
    display: table-cell;
    padding: var(--s-5) var(--s-7);
    border-block-start: var(--hair) solid var(--c-night-line-soft);
    border-inline-start: var(--hair) solid var(--c-night-line-soft);
  }
  .compare__table tbody td::before { content: none; }

  .trials__grid { grid-template-columns: 1.12fr 0.88fr; gap: var(--s-10); align-items: start; }
  .player__frame { min-height: 21rem; }

  /* desktop: foto numa coluna, painel preto na outra (1fr / 1.15fr no mockup) */
  .wholesale { grid-template-columns: 1fr 1.15fr; }
  .wholesale__photo { min-height: 27.5rem; }
  .wholesale__body { padding: var(--s-10) var(--s-10) var(--s-10); }
  .wholesale__col { gap: var(--s-9); }

  .product-layout { grid-template-columns: 1.04fr 0.96fr; gap: var(--s-11); }
  .gallery { position: sticky; inset-block-start: 5.5rem; }
  .reviews__grid { grid-template-columns: 15.625rem 1fr; }
}

/* --- 80rem / 1280px: folga -------------------------------------------- */
@media (min-width: 80rem) {
  .section { padding-block-start: var(--s-12); }
}

/* --- reducao de movimento -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 0.01ms; }
}

/* --------------------------------------------------------------------------
   OS ENSAIOS EM VÍDEO (10/10) — Como testamos. Dois vídeos verticais (9:16),
   os mesmos dos marketplaces, tocando na página. Sem autoplay: cada um tem
   um minuto e som; quem quer ver, aperta.
   -------------------------------------------------------------------------- */
.ensaios__intro { font-size: var(--fs-base); color: var(--c-ink-mid); max-width: 52ch; margin-block-start: var(--s-4); }
.ensaios { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-7); }
.ensaio { display: grid; gap: var(--s-2); }
.ensaio__video { width: 100%; aspect-ratio: 9 / 16; background: var(--c-night); border-radius: var(--r-2xl);
  object-fit: cover; display: block; }
.ensaio__nome { font-size: var(--fs-lg); font-weight: var(--w-medium); letter-spacing: -0.025em; margin-block-start: var(--s-2); }
.ensaio__meta { font-size: var(--fs-sm); color: var(--c-ink-mid); }
/* 12/10: cinco ensaios. Dois por linha no celular (um só ficava do tamanho da
   tela inteira), e no desktop quantos couberem com 13rem de largura mínima. */
.ensaios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (min-width: 48rem) {
  .ensaios { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   COMO TESTAMOS, ABERTURA (12/10) — pedido do Matheus: a foto da bancada
   encaixada na primeira dobra do desktop, com a história já contada ali.
   Texto e os quatro passos à esquerda, a foto à direita, os números logo
   abaixo. No celular tudo empilha.
   -------------------------------------------------------------------------- */
.testamos-hero { padding-block: var(--s-10); }
.testamos-hero__grid { align-items: center; }
.testamos-hero__passos { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; }
.testamos-hero__passos li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: baseline;
  font-size: var(--fs-sm); color: var(--c-paper-mid); padding-block: var(--s-3); border-top: var(--hair) solid var(--c-night-line); }
.testamos-hero__passos li:last-child { border-bottom: var(--hair) solid var(--c-night-line); }
.testamos-hero__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-lime); letter-spacing: var(--tr-label); }
.testamos-hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block-start: var(--s-7); }
.testamos-hero__foto { margin: 0; }
.testamos-hero__img { aspect-ratio: 4 / 3; }
.testamos-hero__legenda { margin-block-start: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-paper-faint); }
.testamos-numeros { padding-block: var(--s-7) var(--s-4); }
@media (min-width: 64rem) {
  .testamos-hero { padding-block: var(--s-11); }
  .testamos-hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-11); }
  .testamos-hero__img { aspect-ratio: 1 / 1; }
}