/* PromoSmart — "Etiqueta de gôndola" (DESIGN.md, 15/10/2026). CSS próprio, sem framework.
   A lista é a prateleira (gôndola #F1F3F8), cada promoção é uma etiqueta branca e o preço é escrito como o cartazista escreve.
   Navy = tinta e faixas (header, abas, preço da oferta, convite, rodapé). Ciano = só fundo do botão de compra e selo de achado.
   Regra: nenhum hex fora do :root. Animação só transform/opacity, sempre dentro de prefers-reduced-motion. */

@font-face {
  font-family: Archivo; font-style: normal; font-display: swap;
  font-weight: 400 800; font-stretch: 62% 100%;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Archivo; font-style: normal; font-display: swap;
  font-weight: 400 800; font-stretch: 62% 100%;
  src: url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* cor */
  --ground: #F1F3F8;          /* gôndola */
  --surface: #FFFFFF;         /* etiqueta */
  --surface-2: #DDE2EC;       /* chip neutro, esqueleto, trilho */
  --ink: #0D1337;             /* navy: texto e faixas */
  --muted: #4B5375;           /* texto secundário (7,5:1 no branco) */
  --band-ink-soft: #C8D0E8;   /* texto secundário sobre navy */
  --line-control: #767F9F;    /* contorno de controle (WCAG 1.4.11) */
  --signal: #00C8FF;          /* ciano: botão de compra + achado. Nunca texto em fundo claro */
  --signal-tint: #D6F5FF;
  --signal-ink: #00618A;      /* link/ícone "ciano" em fundo claro */
  --hot: #FF8A3D;
  --warn-bg: #FFF1CC; --warn-ink: #7A4E00;
  --error: #B3261E;
  --white: #FFFFFF;
  --store-amazon: #232F3E; --store-amazon-ink: #FFFFFF;
  --store-ml: #FFE600;     --store-ml-ink: #2D3277;
  --store-magalu: #0086FF; --store-magalu-ink: #0D1337;
  --store-shopee: #C93A1E; --store-shopee-ink: #FFFFFF;
  --hover-layer: rgba(13, 19, 55, .10);       /* navy a 10% */
  --hover-layer-band: rgba(255, 255, 255, .14);
  --scrim: rgba(13, 19, 55, .5);
  --shadow-float: 0 -8px 24px rgba(13, 19, 55, .18);   /* só o que flutua: painel de baixo e toast */
  /* espaço */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 16px;
  --r-xs: 2px;
  /* tipo */
  --font: Archivo, "Arial Narrow", Arial, sans-serif;
  /* movimento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-press: 120ms; --t-hover: 160ms; --t-ui: 240ms; --t-sheet: 280ms; --t-reveal: 420ms;
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); scroll-padding-top: 64px; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 400; font-stretch: 100%;
}
main { flex: 1 0 auto; padding-bottom: var(--s7); }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--signal-ink); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
code { font-family: inherit; }
::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.em-navy :focus-visible, .toast :focus-visible { outline-color: var(--signal); }
.ico { flex: 0 0 auto; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }
.suave { color: var(--muted); }
.pular { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--signal); color: var(--ink); padding: 12px 16px; font-weight: 600; }
.pular:focus { left: 8px; top: 8px; }

/* ================= header (navy, não fixo) ================= */
.topo { background: var(--ink); color: var(--white); }
.topo-in { max-width: 1280px; min-height: 56px; margin: 0 auto; padding: 6px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.marca { color: var(--white); font-size: 22px; line-height: 1; font-weight: 800; font-stretch: 100%; letter-spacing: -0.01em; text-decoration: none;
  margin-right: auto; min-height: 44px; display: inline-flex; align-items: center; }
.marca span { color: var(--signal); }
.marca-ico { width: 28px; height: 28px; margin-right: var(--s2); flex: 0 0 auto; }
.icone { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--white); text-decoration: none; border-radius: var(--r-xs); flex: 0 0 auto; }
.topo-alertas-txt { display: none; }
/* busca: no celular é a 2ª linha do header, aberta pela lupa (JS) ou na página /busca */
.busca-topo { display: none; order: 3; flex: 0 0 100%; position: relative; margin: 2px 0 6px; }
.busca-topo input { width: 100%; height: 44px; border: 0; border-radius: var(--r-xs); background: var(--surface); color: var(--ink);
  padding: 0 48px 0 12px; font-size: 16px; -webkit-appearance: none; appearance: none; }
.busca-topo input::placeholder { color: var(--muted); opacity: 1; }
.busca-topo input:focus-visible { outline-color: var(--signal); }
.busca-btn { position: absolute; right: 0; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pag-busca .busca-topo, .busca-aberta .busca-topo { display: block; }
.pag-busca .js-busca, .busca-aberta .js-busca { display: none; }

/* ================= abas (só elas grudam) ================= */
.abas { position: sticky; top: 0; z-index: 30; background: var(--ink); }
.abas-in { max-width: 1280px; margin: 0 auto; }
.abas-lista { display: grid; grid-template-columns: repeat(4, 1fr); }
.aba { position: relative; min-height: 48px; display: flex; align-items: stretch; justify-content: center; padding: 0 4px;
  color: var(--band-ink-soft); text-decoration: none; font-size: 16px; font-weight: 600; white-space: nowrap; }
.aba-txt { position: relative; display: inline-flex; align-items: center; }
.aba.ativa { color: var(--white); }
.aba-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); view-transition-name: aba-ativa; }
.aba:focus-visible { outline-offset: -3px; }

/* ================= grade das páginas de lista ================= */
.grade { max-width: 1280px; margin: 0 auto; }
.col-lateral { display: none; }
.col-lista { min-width: 0; }
.h1-lista { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; margin: var(--s2) var(--gutter) var(--s3); }
.grade-texto .col-lista { padding: var(--s5) var(--gutter) 0; }
.grade-texto .h1-lista { margin: 0 0 var(--s3); }
.texto-1, .texto p { max-width: 62ch; }
.texto { display: flex; flex-direction: column; gap: var(--s3); }
.h2-sec { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s3); }

/* ================= barra de filtros (gôndola, 60px, rola na horizontal) ================= */
.barra-filtros { display: flex; gap: var(--s2); align-items: center; overflow-x: auto; padding: var(--s2) var(--gutter); scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.barra-filtros::-webkit-scrollbar { display: none; }
.barra-filtros > * { flex: 0 0 auto; }
/* segmentado [Ativas|Encerradas] (e os períodos do gráfico) */
.seg { display: inline-flex; flex: 0 0 auto; }
.seg-op { position: relative; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; border: 1.5px solid var(--line-control); }
.seg-op + .seg-op { margin-left: -1.5px; }
.seg-op:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.seg-op:last-child { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.seg-op.on { background: var(--ink); color: var(--white); border-color: var(--ink); z-index: 1; font-weight: 600; }
/* chip de categoria: 44px, branco, contorno de controle; selecionado = navy */
.chip-f { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line-control); border-radius: var(--r-xs); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.chip-f.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chips-wrap, .promo-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ================= botões ================= */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); border: 2px solid transparent; border-radius: var(--r-xs); background: none; color: var(--ink);
  font-size: 16px; line-height: 20px; font-weight: 600; font-stretch: 100%; text-decoration: none; text-align: center; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hover-layer); opacity: 0; pointer-events: none; }
.btn-primario, .btn-primario:visited { background: var(--signal); color: var(--ink); }
.btn-secundario, .btn-contorno { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-banda { background: none; color: var(--white); border-color: var(--white); }
.btn-banda::before { background: var(--hover-layer-band); }
.btn-texto { padding: 0 var(--s2); color: var(--ink); }
.btn-texto:hover { text-decoration: underline; }
.btn-largo { width: 100%; }
.btn-principal { width: 100%; min-height: 52px; }
.btn-52 { min-height: 52px; }
.btn-48 { min-height: 48px; }
.btn[disabled], .btn[disabled]:hover { background: var(--surface-2); color: var(--muted); border-color: transparent; cursor: not-allowed; }
.btn[disabled]::before { display: none; }
.btn-voltar { margin-left: calc(-1 * var(--s2)); }
.link-banda { color: var(--white); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
.link-forte { color: var(--ink); text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before, .seg-op:not(.on):hover, .chip-f:not(.on):hover { opacity: 1; }
  .seg-op:not(.on):hover, .chip-f:not(.on):hover { background: var(--ground); }
  .link-banda:hover, .link-forte:hover { text-decoration-thickness: 2px; }
  .linha:hover .linha-titulo a { text-decoration-color: currentColor; }
}

/* ================= selos, chips de estado ================= */
.selo { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--r-xs); font-size: 12px; line-height: 1; font-weight: 700; white-space: nowrap; }
.selo-amazon { background: var(--store-amazon); color: var(--store-amazon-ink); }
.selo-ml { background: var(--store-ml); color: var(--store-ml-ink); }
.selo-magalu { background: var(--store-magalu); color: var(--store-magalu-ink); }
.selo-shopee { background: var(--store-shopee); color: var(--store-shopee-ink); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--r-xs); font-size: 13px; line-height: 1; font-weight: 600;
  background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.chip-alta { background: var(--hot); color: var(--ink); }
.chip-nova, .chip-voltou { background: var(--signal-tint); color: var(--ink); }
.chip-baixa, .chip-encerrada, .chip-juros { background: var(--surface-2); color: var(--ink); }
.chip-app { background: var(--warn-bg); color: var(--warn-ink); }
/* selo do histórico (um só) */
.selo-h { display: inline-flex; align-items: center; min-height: 28px; padding: 0 8px; border-radius: var(--r-xs); font-size: 13px; line-height: 16px; font-weight: 600;
  background: var(--surface-2); color: var(--ink); }
.selo-h-menor90, .selo-h-menor30 { background: var(--signal); color: var(--ink); }
.selo-h-bom { background: var(--signal-tint); color: var(--ink); }
.selo-h-normal { background: var(--surface-2); color: var(--ink); }
.selo-h-acima { background: var(--warn-bg); color: var(--warn-ink); }
.selo-h-curto { background: var(--surface-2); color: var(--muted); }

/* ================= preço de etiqueta (assinatura) ================= */
.preco { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.preco-rs { display: inline-block; font-size: .38em; font-weight: 700; font-stretch: 87.5%; vertical-align: 1.15em; line-height: 1; }
.preco-num { display: inline-block; white-space: nowrap; }
.preco-int { display: inline-block; font-weight: 800; font-stretch: 62%; letter-spacing: -0.01em; }
.preco-cent { display: inline-block; font-size: .42em; font-weight: 800; font-stretch: 62%; vertical-align: 1.05em; line-height: 1; }
.preco-forma { display: inline-block; font-size: 13px; line-height: 18px; font-weight: 400; font-stretch: 100%; color: var(--muted); vertical-align: baseline; white-space: normal; }
.preco-linha { font-size: 34px; line-height: 1; }
.preco-hero { font-size: 64px; line-height: .9; }
.preco.riscado .preco-int, .preco.riscado .preco-cent { color: var(--muted); text-decoration: line-through 2px; }
.preco.riscado .preco-rs { color: var(--muted); }

/* ================= linha da lista (etiqueta) ================= */
.lista { display: flex; flex-direction: column; gap: var(--s2); }
.linha { position: relative; background: var(--surface); padding: var(--s4); display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s3); row-gap: var(--s3); }
.linha-foto { grid-column: 1; grid-row: 1; width: 96px; height: 96px; background: var(--surface); }
.linha-foto img { display: block; width: 96px; height: 96px; object-fit: contain; }
.linha-encerrada .linha-foto img { filter: grayscale(1); opacity: .55; }
.linha-corpo { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; }
.linha-meta { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px 8px; white-space: nowrap; min-height: 22px; margin-bottom: 6px; }
.linha-meta .chip { margin-left: auto; flex: 0 0 auto; }
.linha-meta .selo, .linha-meta .mais-loja { flex: 0 0 auto; }
.linha-meta .tempo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.linha-encerrada .linha-meta { flex-wrap: wrap; }
.linha-encerrada .linha-meta .chip { margin-left: 0; flex-shrink: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mais-loja { font-size: 13px; font-weight: 600; margin-left: -4px; }
.tempo { color: var(--muted); font-size: 13px; line-height: 18px; }
.linha-n { font-size: 13px; line-height: 18px; color: var(--muted); }
.linha-ou { font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.linha .preco { margin-bottom: 4px; }
.linha-titulo { font-size: 16px; line-height: 21px; font-weight: 500; font-stretch: 92%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.linha-titulo a { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; }
.esticado::after { content: ""; position: absolute; inset: 0; }
.linha-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 500; }
.extra { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.linha-extras .selo-h { min-height: 22px; padding: 0 6px; font-size: 12px; }
.aviso-rep { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--warn-ink); }
.aviso-rep.neutro { color: var(--muted); }
.linha-acoes { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.linha-acoes > *, .cupom-acoes > *, .bloco-votos, .ancora-rep { position: relative; z-index: 1; }
.ver-loja { margin-left: auto; flex: 0 0 auto; padding: 0 12px; }

/* voto */
.votos { display: flex; align-items: center; gap: 4px; margin: 0; min-width: 0; flex: 1 1 auto; }
.voto { position: relative; isolation: isolate; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1.5px solid var(--line-control); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.voto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); opacity: 0; }
.voto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hover-layer); opacity: 0; pointer-events: none; }
.voto-neg::before { background: var(--ink); }
.voto[aria-pressed="true"] { border-color: transparent; }
.voto[aria-pressed="true"]::before { opacity: 1; }
.voto-neg[aria-pressed="true"] { color: var(--white); }
.voto-in { display: inline-flex; align-items: center; gap: 4px; }
.voto-pct { display: inline-block; overflow: hidden; position: relative; font-variant-numeric: tabular-nums; }
.voto-pct:empty { display: none; }
.votos-txt { font-size: 13px; line-height: 18px; color: var(--muted); margin-left: 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.votos-off .votos-txt { margin: 0; }
.voto[disabled] { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .voto:hover::after { opacity: 1; } }
.votos-grande { display: block; }
.votos-grande .votos-txt { display: block; margin: 0 0 var(--s2); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); white-space: normal; }
.votos-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.votos-grande .voto { min-height: 48px; font-size: 16px; }
.votos-grande .voto-in { gap: 8px; }

/* convite do Telegram dentro da lista: quebra de ritmo da prateleira */
.convite { background: var(--ink); color: var(--white); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.convite-t { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; max-width: 24ch; }
.convite-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }

/* mais, esqueleto, âncora */
.mais { margin: var(--s4) var(--gutter) 0; }
.ancora { display: block; height: 0; }
.esqueleto { background: var(--surface); padding: var(--s4); display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--s3); }
.esqueleto i { display: block; background: var(--surface-2); border-radius: var(--r-xs); opacity: .75; }
.esq-foto { width: 96px; height: 96px; grid-row: 1 / span 4; }
.esq-corpo { display: flex; flex-direction: column; gap: 8px; }
.esq-corpo i:nth-child(1) { height: 13px; width: 40%; }
.esq-corpo i:nth-child(2) { height: 34px; width: 55%; }
.esq-corpo i:nth-child(3) { height: 16px; width: 95%; }
.esq-corpo i:nth-child(4) { height: 16px; width: 70%; }

/* vazio / erro / 404: etiqueta branca alinhada à esquerda */
.vazio { background: var(--surface); padding: var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.vazio-t { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; max-width: 32ch; }
.vazio-acoes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bloco-branco { background: var(--surface); padding: var(--s4); margin-top: var(--s4); }

/* ================= filtros: painel de baixo (celular) / coluna (desktop) ================= */
.filtros { display: none; position: fixed; inset: 0; z-index: 60; }
.filtros:target { display: block; }
.sheet-fundo { position: absolute; inset: 0; background: var(--scrim); }
.sheet { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.sheet-alca { display: block; width: 32px; height: 4px; margin: 8px auto 4px; background: var(--surface-2); border-radius: var(--r-xs); }
.filtros-form { position: absolute; left: 0; right: 0; bottom: 0; max-width: 600px; margin: 0 auto; max-height: 88vh; max-height: 88dvh; overflow-y: auto; padding: 0 var(--s4); }
.filtros-topo { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px var(--s2) 0; }
.filtros-topo h2 { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; }
.sheet-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
legend { font-size: 16px; line-height: 24px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.opcao { display: flex; align-items: center; gap: var(--s3); min-height: 44px; cursor: pointer; font-size: 16px; line-height: 20px; }
.opcao input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--ink); }
.opcao small { font-size: 13px; color: var(--muted); }
.opcao-off { color: var(--muted); cursor: default; padding-left: 32px; }
.filtros-acoes { position: sticky; bottom: 0; background: var(--surface); padding: var(--s3) 0 var(--s4); display: flex; gap: var(--s2); }
.filtros-acoes .btn-primario { flex: 1; }

/* rádios do reporte: linha 48px, círculo 20px */
.opcao-radio { min-height: 48px; }
.opcao-radio input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: 0 0 auto; border: 1.5px solid var(--line-control);
  border-radius: 50%; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.opcao-radio input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); }
.opcao-radio input:checked { border-color: var(--ink); border-width: 2px; }
.opcao-radio input:checked::before { transform: scale(1); }

/* reportar (dialog) */
.sheet-dialog { width: 100%; max-width: 600px; margin: auto auto 0; padding: 0 var(--s4) var(--s4); border: 0; }
.sheet-dialog::backdrop { background: var(--scrim); }
.form-reportar legend { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; margin-bottom: var(--s2); }
.acoes-form { display: flex; gap: var(--s2); margin-top: var(--s2); }
.acoes-form .btn { flex: 1; }
.btn-reportar { margin-left: calc(-1 * var(--s2)); }
.inline-form { display: inline-flex; align-items: center; gap: 4px; margin: 0; flex-wrap: wrap; }
.voce-reportou { color: var(--muted); font-size: 13px; }
.aviso-ok { background: var(--surface); padding: var(--s2) var(--s3); font-size: 16px; }

/* ================= toast ================= */
.toast { position: fixed; left: var(--s4); right: var(--s4); bottom: var(--s4); z-index: 90; display: flex; justify-content: center; pointer-events: none; }
.toast:empty { display: none; }
.toast span { display: flex; align-items: center; min-height: 48px; max-width: 480px; padding: 12px var(--s4); background: var(--ink); color: var(--white);
  font-size: 16px; line-height: 22px; border-radius: var(--r-xs); box-shadow: var(--shadow-float); }
.toast.saindo span { opacity: 0; }

/* ================= cupons ================= */
.cupom { position: relative; background: var(--surface); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.cupom-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.cupom-topo .chip { margin-left: auto; }
.cupom-valor { font-size: 34px; line-height: 1; font-weight: 800; font-stretch: 62%; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.cupom-regras, .cupom-validade { font-size: 13px; line-height: 18px; color: var(--muted); }
.cupom-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.cupom-codigo { display: flex; flex-direction: column; gap: 4px; }
.cupom-rot { font-size: 13px; line-height: 18px; color: var(--muted); }
.cupom-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.codigo { position: relative; isolation: isolate; font-size: 24px; line-height: 32px; font-weight: 700; font-stretch: 100%; letter-spacing: .06em; color: var(--ink);
  -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; padding: 0 2px; }
.codigo::before { content: ""; position: absolute; inset: 2px -2px; z-index: -1; background: var(--signal); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.btn-copiar { display: inline-grid; grid-template-areas: "a"; justify-items: center; overflow: hidden; }
.btn-copiar[hidden] { display: none; }
.copiar-rot, .copiar-ok { grid-area: a; display: inline-flex; align-items: center; gap: var(--s2); }
.copiar-ok { opacity: 0; }
.copiado .copiar-rot { opacity: 0; }
.copiado .copiar-ok { opacity: 1; }
.copiado .codigo::before { opacity: 0; }
.caixa-cupom { background: var(--surface); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); }

/* ================= página da oferta (/p/) ================= */
.pagina { max-width: 1280px; margin: 0 auto; padding: var(--s2) var(--gutter) 0; }
.voltar { margin-bottom: var(--s2); }
.promo-grade { display: block; }
.promo-foto { background: var(--surface); margin: 0 calc(-1 * var(--gutter)); display: flex; align-items: center; justify-content: center; height: 240px; padding: var(--s4); }
.promo-foto img { display: block; width: auto; height: 100%; max-height: 208px; object-fit: contain; }
.foto-enc img { filter: grayscale(1); opacity: .55; }
.h1-promo { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; margin: var(--s4) 0; }
.faixa-preco { background: var(--ink); color: var(--white); margin: 0 calc(-1 * var(--gutter)); padding: 20px var(--s4); }
.faixa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--band-ink-soft); margin-bottom: var(--s3); }
.faixa-meta .selo-h { margin-left: auto; }
.faixa-preco .preco { color: var(--white); }
.faixa-preco .preco-forma { color: var(--band-ink-soft); font-size: 16px; line-height: 22px; }
.faixa-preco .preco.riscado .preco-int, .faixa-preco .preco.riscado .preco-cent, .faixa-preco .preco.riscado .preco-rs { color: var(--band-ink-soft); }
.faixa-forma { margin-top: var(--s2); font-size: 16px; line-height: 22px; color: var(--band-ink-soft); }
.promo-extras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); font-size: 16px; font-weight: 500; }
.promo-extras .extra { gap: 6px; }
.promo-cta { margin-top: var(--s4); }
.nota-conf { font-size: 13px; line-height: 18px; color: var(--muted); margin: var(--s2) 0 0; }
.aviso-preco { font-size: 13px; line-height: 18px; color: var(--muted); margin: var(--s2) 0 0; max-width: 62ch; }
.bloco-votos { margin-top: var(--s5); }
.ancora-rep { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; margin-top: var(--s2); }
.promo-tags { margin-top: var(--s3); }
.pagina-baixo { max-width: 720px; }
.faixa-enc { display: flex; gap: var(--s3); background: var(--warn-bg); color: var(--warn-ink); padding: var(--s4); margin: 0 calc(-1 * var(--gutter)) var(--s4); font-size: 16px; line-height: 22px; }
.faixa-enc-ico { margin-top: 1px; }
.faixa-enc-txt { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.faixa-enc .link-forte { color: var(--ink); }
.parecidas .lista { margin: 0 calc(-1 * var(--gutter)); }
.avisar { background: var(--ink); color: var(--white); padding: var(--s5) var(--s4); margin: var(--s6) calc(-1 * var(--gutter)) 0; display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.avisar-t { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; max-width: 30ch; }

/* ================= várias ofertas (/produto/) ================= */
.prod-topo { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s2) 0 var(--s4); }
.prod-foto { flex: 0 0 96px; width: 96px; height: 96px; object-fit: contain; background: var(--surface); }
.prod-tit { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.prod-tit .h1-promo { margin: 0; }
.selo-base { font-size: 13px; line-height: 18px; color: var(--muted); }
.h2-prod { margin-top: var(--s5); margin-bottom: 0; }
.p-menor { font-size: 13px; line-height: 18px; color: var(--muted); margin: 4px 0 var(--s3); }
.dest-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin-bottom: var(--s4); }
.dest { padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dest-1 { background: var(--ink); color: var(--white); }
.dest-2 { background: var(--surface); color: var(--ink); }
.dest-rotulo { font-size: 16px; line-height: 22px; font-weight: 600; }
.dest-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; line-height: 18px; color: var(--muted); margin-bottom: 4px; }
.dest-1 .dest-meta, .dest-1 .dest-parc, .dest-1 .dest-dif, .dest-1 .nota-conf, .dest-1 .preco-forma { color: var(--band-ink-soft); }
.dest-1 .preco { color: var(--white); }
.dest-parc { font-size: 16px; line-height: 22px; color: var(--muted); }
.dest-dif { font-size: 13px; line-height: 18px; color: var(--muted); }
.dest-cupom, .dest-frete { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 500; }
.dest-btn { margin-top: var(--s2); }
.of-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.of-linha { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 6px var(--s3); background: var(--surface); }
.of-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.of-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 16px; line-height: 22px; }
.of-l1 b { font-weight: 700; font-variant-numeric: tabular-nums; }
.of-cond { font-size: 13px; color: var(--muted); }
.of-l2 { font-size: 13px; line-height: 18px; color: var(--muted); }
.of-btn { flex: 0 0 auto; padding: 0 12px; }
.of-enc .of-l1 b { color: var(--muted); }
.outras, .mais-ofertas, .hist { margin-top: var(--s5); }
.mais-ofertas-link { margin-top: var(--s3); }
.det summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; list-style: none; }
.det summary::-webkit-details-marker { display: none; }
.det-seta { transform: rotate(-90deg); }
.det[open] > summary .det-seta { transform: rotate(0deg); }
.enc-rec { margin-top: var(--s4); }

/* ================= histórico ================= */
.hist-frase { font-size: 16px; line-height: 24px; }
.hist-leitura { min-height: 44px; display: flex; align-items: center; margin: var(--s2) 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.hist-graf { position: relative; background: var(--surface); padding: var(--s3) var(--s2) var(--s2); overflow: hidden; }
.hist-svg { display: block; width: 100%; height: auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; overflow: visible; }
.hist-svg.g-d { display: none; }
.hist-svg:focus-visible { outline-offset: -3px; }
.hg-area { fill: var(--signal-tint); }
.hg-linha { fill: none; stroke: var(--ink); }
.hg-pt { fill: var(--ink); }
.hg-media { stroke: var(--muted); }
.hg-lacuna { stroke: var(--muted); }
.hg-eixo { fill: var(--muted); font-family: var(--font); }
.hg-menor { fill: var(--signal); stroke: var(--ink); }
.hg-menor-rot { fill: var(--ink); stroke: var(--surface); font-family: var(--font); }
.hg-hoje { fill: var(--ink); stroke: var(--surface); }
.hg-cursor { stroke: var(--ink); }
.hist-legenda { display: flex; flex-wrap: wrap; gap: 4px var(--s4); font-size: 13px; line-height: 18px; color: var(--muted); margin-top: var(--s2); }
.leg { display: inline-flex; align-items: center; gap: 6px; }
.leg-l { width: 16px; height: 2px; background: var(--ink); }
.leg-t { width: 16px; height: 0; border-top: 1.5px dashed var(--muted); }
.hist-per { margin: var(--s3) 0; flex-wrap: wrap; }
.hist-nota { font-size: 13px; line-height: 18px; color: var(--muted); margin: var(--s2) 0; max-width: 62ch; }
.hist-nota-forte { color: var(--ink); font-weight: 600; }
.hist-curto { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 4px var(--s4); font-size: 16px; }
.hist-tab { margin-top: var(--s2); }
.hist-tab table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 22px; background: var(--surface); }
.hist-tab th, .hist-tab td { text-align: left; padding: var(--s2) var(--s3); vertical-align: top; }
.hist-tab tr + tr th, .hist-tab tr + tr td { border-top: 2px solid var(--ground); }
.hist-tab th { color: var(--muted); font-weight: 500; width: 45%; }
.hist-t2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: var(--s3) 0 4px; }
.hist-mud { margin: 0; padding-left: 20px; font-size: 16px; line-height: 24px; }
.hist-graf.espera::after { content: ""; position: absolute; inset: 0; background: var(--surface); transform-origin: right center; }
.hist-graf.espera .hg-ponto { opacity: 0; }

/* ================= coluna lateral (≥ 1280) ================= */
.lateral { display: flex; flex-direction: column; gap: var(--s4); }
.lateral h2 { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; letter-spacing: -0.01em; }
.lateral-alerta { background: var(--ink); color: var(--white); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.lateral-alerta p { color: var(--band-ink-soft); }
.lateral-cupons { background: var(--surface); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.mini-cupom { display: flex; align-items: center; gap: var(--s2); }
.mini-cupom a { color: var(--ink); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ================= alertas ================= */
.passos { padding-left: 24px; display: flex; flex-direction: column; gap: var(--s2); margin: var(--s4) 0 var(--s5); max-width: 62ch; }
.passos li::marker { font-weight: 700; }
.alertas-cta { max-width: 400px; }

/* ================= rodapé (navy até o fim da janela) ================= */
.rodape { margin-top: auto; background: var(--ink); color: var(--white); }
.rodape-in { max-width: 1280px; margin: 0 auto; padding: var(--s6) var(--gutter); display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.rodape-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.rodape-links a { color: var(--white); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; font-size: 16px; }
.rodape-aviso { font-size: 13px; line-height: 18px; color: var(--band-ink-soft); max-width: 62ch; }

/* ================= admin (estilo básico) ================= */
.adm { max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--gutter); }
.admin-linha { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); background: var(--surface); margin-bottom: 2px; }
.admin-acoes, .adm-abas, .adm-filtro, .sug-acoes, .adm-generico { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.adm-abas, .adm-filtro { margin: var(--s2) 0 var(--s4); }
.sug { background: var(--surface); padding: var(--s4); margin-bottom: var(--s4); }
.sug-motivo { margin-bottom: var(--s3); }
.sug-par { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.adm-prod { display: flex; gap: var(--s3); align-items: flex-start; }
.adm-prod img, .adm-foto-vazia { flex: 0 0 80px; width: 80px; height: 80px; object-fit: contain; background: var(--ground); display: block; }
.adm-prod a { display: inline-flex; align-items: center; min-height: 44px; }
.adm-nome { font-weight: 600; }
mark.dif { background: var(--warn-bg); color: var(--warn-ink); padding: 0 2px; }
.sug-form { margin-top: var(--s3); }
.sug-form fieldset { display: flex; flex-wrap: wrap; gap: 4px var(--s5); align-items: center; }
.sug-form legend { width: 100%; }
.adm-busca { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.adm-busca input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid var(--line-control); border-radius: var(--r-xs); background: var(--surface); padding: 0 12px; font-size: 16px; }
.adm-lista { list-style: none; padding: 0; margin: 0 0 var(--s3); display: flex; flex-direction: column; gap: 2px; }
.adm-lista li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); background: var(--surface); padding: 0 var(--s3); }
.adm-tab { overflow-x: auto; }
.adm-tab table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.adm-tab th, .adm-tab td { text-align: left; padding: var(--s2); border-bottom: 2px solid var(--ground); white-space: nowrap; }
.container { max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--gutter); }
.h1-lista + .suave { margin-bottom: var(--s3); }
@media (min-width: 900px) { .sug-par { grid-template-columns: 1fr 1fr; } }

/* ================= ≥ 600: coluna de 600 centrada, etiquetas com raio ================= */
@media (min-width: 600px) {
  .grade, .abas-in { max-width: calc(600px + 2 * var(--gutter)); padding: 0 var(--gutter); }
  .h1-lista { margin-left: 0; margin-right: 0; }
  .barra-filtros { padding-left: 0; padding-right: 0; margin: 0; scroll-padding-inline: 0; }
  .grade-texto .col-lista { padding-left: 0; padding-right: 0; }
  .mais { margin-left: 0; margin-right: 0; }
  .linha, .convite, .vazio, .cupom, .esqueleto { border-radius: var(--r-xs); }
  .linha { grid-template-columns: 128px minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s3); }
  .linha-foto { grid-row: 1 / span 2; width: 128px; height: 128px; }
  .linha-foto img { width: 128px; height: 128px; }
  .linha-acoes { grid-column: 2; }
  .preco-linha { font-size: 40px; }
  .convite { padding: var(--s5); }
  .pagina { max-width: calc(600px + 2 * var(--gutter)); }
  .promo-foto, .faixa-preco, .faixa-enc, .avisar { margin-left: 0; margin-right: 0; border-radius: var(--r-xs); }
  .promo-foto { height: 320px; }
  .promo-foto img { max-height: 288px; }
  .parecidas .lista { margin: 0; }
  .dest-grade { grid-template-columns: 1fr 1fr; }
  .dest-grade.dest-so1 { grid-template-columns: minmax(0, 1fr); }
  .dest { border-radius: var(--r-xs); }
  .sheet-dialog, .filtros-form { border-radius: var(--r-xs) var(--r-xs) 0 0; }
}
@media (min-width: 700px) { .hist-svg.g-m { display: none; } .hist-svg.g-d { display: block; } }

/* ================= ≥ 1024: filtros em coluna, header com busca ================= */
@media (min-width: 1024px) {
  .topo-in { min-height: 64px; flex-wrap: nowrap; gap: var(--s5); padding-top: 10px; padding-bottom: 10px; }
  .marca { margin-right: 0; }
  .busca-topo { display: block; order: 0; flex: 0 1 400px; margin: 0; }
  .js-busca { display: none; }
  .topo-alertas { width: auto; margin-left: auto; padding: 0 var(--s4); gap: var(--s2); border: 2px solid var(--white); font-size: 16px; font-weight: 600; }
  .topo-alertas:hover { background: var(--hover-layer-band); }
  .topo-alertas-txt { display: inline; }
  .abas-in { max-width: 1280px; padding: 0 var(--gutter); display: grid; grid-template-columns: 224px minmax(0, 720px); column-gap: var(--s6); }
  .abas-lista { grid-column: 2; display: flex; margin-left: -20px; }
  .aba { padding: 0 20px; }
  .grade { max-width: 1280px; padding: 0 var(--gutter); display: grid; grid-template-columns: 224px minmax(0, 720px); column-gap: var(--s6); align-items: start; }
  .col-filtros { display: block; }
  .filtros { display: block; position: static; }
  .sheet-fundo, .sheet-x, .filtros .sheet-alca { display: none; }
  .filtros-form { position: static; max-width: none; max-height: none; overflow: visible; padding: var(--s4) 0 0; background: none; box-shadow: none; border-radius: 0; }
  .filtros-topo { margin: 0 0 var(--s2); }
  .filtros-acoes { position: static; background: none; padding: var(--s2) 0 0; flex-direction: column; }
  .btn-filtros { display: none; }
  .pagina { max-width: 1120px; }
  .promo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .promo-foto { height: auto; aspect-ratio: 1 / 1; margin-top: var(--s4); }
  .promo-foto img { max-height: none; height: auto; width: 100%; }
  .faixa-preco { padding: var(--s5) var(--s6); }
  .preco-hero { font-size: 88px; }
  .pagina-produto { max-width: 880px; }
}
@media (min-width: 1280px) {
  .abas-in { grid-template-columns: 224px minmax(0, 1fr) 296px; }
  .grade { grid-template-columns: 224px minmax(0, 1fr) 296px; }
  .col-lateral { display: block; padding-top: var(--s4); }
}

/* espaçamentos finos */
.chips-wrap + .texto-1 { margin-top: var(--s4); }

/* ================= revisão do designer, rodada 1 ================= */
.btn-largo, .btn-principal { max-width: 100%; }
/* /p/ celular: botão de compra na 1ª tela */
.promo-foto { height: 200px; padding: 12px; }
.promo-foto img { width: auto; height: auto; max-width: 100%; max-height: 176px; }
.h1-promo { margin: 12px 0; }
/* "Copiar código" sempre ao lado do código */
.cupom-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); }
.codigo { justify-self: start; min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(19px, 5.6vw, 24px); }
/* meta da linha: o tempo nunca é cortado; quebra de linha se não couber */
.linha-meta { flex-wrap: wrap; row-gap: 4px; }
.linha-meta .tempo { overflow: visible; text-overflow: clip; }
/* /alertas: exemplo real do alerta + categorias em lista de 2 colunas */
.alerta-exemplo { margin: var(--s5) 0 0; width: 280px; max-width: 100%; }
.alerta-exemplo img { display: block; width: 280px; max-width: 100%; height: auto; }
.alerta-exemplo figcaption { margin-top: var(--s2); font-size: 13px; line-height: 18px; color: var(--muted); }
.cat-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); max-width: 600px; }
.cat-lista + p { margin-top: var(--s4); }
.cat-lista a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s3); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 20px; text-decoration: none; border-radius: var(--r-xs); }
@media (hover: hover) and (pointer: fine) { .cat-lista a:hover { text-decoration: underline; } }
/* convite final antes do rodapé: etiqueta branca (não cola no navy do rodapé) */
.avisar { background: var(--surface); color: var(--ink); }
.avisar-t { color: var(--ink); }
/* busca sem resultado: botão de 2 linhas com o ícone na 1ª */
.btn-2linhas { min-height: 52px; padding-block: 10px; align-items: flex-start; text-align: left; }
.btn-2linhas .ico { margin-top: 0; }
.vazio .btn-largo { width: 100%; }
.vazio-acoes:has(.btn-largo) { width: 100%; flex-direction: column; }
/* selo da Amazon sobre navy: contorno para separar do fundo */
.em-navy .selo-amazon { box-shadow: inset 0 0 0 1.5px var(--band-ink-soft); }
@media (min-width: 600px) {
  .promo-foto { height: 280px; }
  .promo-foto img { max-height: 256px; }
}
@media (min-width: 1024px) {
  .barra-filtros .chip-f { display: none; }
  .promo-foto { aspect-ratio: auto; height: 448px; padding: var(--s5); }
  .promo-foto img { width: auto; height: auto; max-width: 100%; max-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; opacity: .75; } }
/* rodada 1, ajuste fino: botão de compra mais alto na /p/ do celular; código cabe ao lado do botão a 360 */
.faixa-preco { padding-top: var(--s4); padding-bottom: var(--s4); }
.faixa-meta { margin-bottom: var(--s2); }
.faixa-forma { margin-top: 4px; }
.caixa-cupom { margin-top: var(--s3); padding: var(--s3) var(--s4); }
.codigo { font-size: clamp(18px, 5vw, 24px); letter-spacing: .04em; }
@media (min-width: 1024px) { .faixa-preco { padding: var(--s5) var(--s6); } }

/* ================= acabamento (DESIGN_acabamento.md): raios por papel, sombra navy, movimento ================= */
:root {
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --sh-1: 0 1px 2px rgba(13, 19, 55, .06), 0 2px 6px rgba(13, 19, 55, .05);
  --sh-2: 0 6px 18px rgba(13, 19, 55, .10), 0 2px 4px rgba(13, 19, 55, .06);
  --sh-3: 0 -8px 28px rgba(13, 19, 55, .16);
  --sh-dlg: 0 18px 48px rgba(13, 19, 55, .20);
  --ease-pop: cubic-bezier(.34, 1.45, .64, 1);
  --t-sheet: 300ms;
}
/* raios: selos 4 (token --r-xs) · chips/segmentado/foto no card 8 · botões/campos/toast 10 · cards 14 · painel 20 */
.chip-f, .cat-lista a, .prod-foto, .esq-foto { border-radius: var(--r-sm); }
.seg-op:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.seg-op:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.linha-foto { border-radius: var(--r-sm); overflow: hidden; }
.btn, .voto, .icone, .busca-topo input, .toast span, .aviso-ok, .adm-busca input { border-radius: var(--r-md); }
.linha, .convite, .vazio, .cupom, .esqueleto, .caixa-cupom, .faixa-preco, .dest, .lateral-alerta, .lateral-cupons, .hist-graf,
.avisar, .faixa-enc, .promo-foto, .bloco-branco, .of-lista, .admin-linha, .sug { border-radius: var(--r-lg); }
.of-lista { overflow: hidden; }
.sheet, .filtros-form, .sheet-dialog { border-radius: var(--r-xl) var(--r-xl) 0 0; }
/* profundidade: sombra navy leve em repouso; a de hover é camada com opacidade */
.linha, .cupom, .lateral-cupons, .dest-2 { box-shadow: var(--sh-1); }
.sheet { box-shadow: var(--sh-3); }
.linha::after, .btn-primario::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sh-2); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
.btn-primario::after { z-index: -1; }
@media (hover: hover) and (pointer: fine) { .linha:hover::after, .btn-primario:not([disabled]):hover::after { opacity: 1; } }
/* celular: a etiqueta sai da borda (8px de gôndola dos lados); foto 92 compensa */
@media (max-width: 599px) {
  .lista { padding: 0 var(--s2); }
  .linha, .esqueleto { grid-template-columns: 92px minmax(0, 1fr); padding-left: var(--s3); padding-right: var(--s3); }
  .linha-foto, .linha-foto img, .esq-foto { width: 92px; height: 92px; }
  .vazio { margin: 0 var(--s2); }
  .linha-meta { column-gap: 6px; }
  .faixa-preco, .promo-foto, .faixa-enc, .avisar { margin-left: -4px; margin-right: -4px; }
}
/* logo: etiqueta pendurada pelo furo (centro do furo ≈ 80,6% 15,2% da caixa da etiqueta) */
.logo-ico { overflow: visible; }
.logo-tag { transform-box: fill-box; transform-origin: 80.6% 15.2%; }
/* diálogo de reporte no desktop: centrado, todos os cantos 20 */
@media (min-width: 1024px) {
  .sheet-dialog { margin: auto; max-width: 480px; border-radius: var(--r-xl); box-shadow: var(--sh-dlg); padding-top: var(--s4); }
  .sheet-dialog .sheet-alca { display: none; }
}
.voto-pct { min-width: 3ch; text-align: right; }
.hg-anel { transform-box: fill-box; transform-origin: center; }

/* ================= movimento (só transform/opacity; reduzido escrito ao lado) ================= */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(aba-ativa) { animation-duration: var(--t-ui); animation-timing-function: var(--ease-in-out); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-hover); }
  /* 21. foto lista -> /p/ (o nome na lista é dado pelo JS só à foto clicada) */
  .promo-foto img { view-transition-name: foto-produto; }
  ::view-transition-group(foto-produto) { animation-duration: 340ms; animation-timing-function: var(--ease-in-out); }

  /* 1. entrada da lista: 8 primeiras, 35ms × i; keyframe só com "from" */
  .lista > .linha:nth-of-type(-n+8), .lista > .entra { animation: entra 280ms var(--ease-out) calc(var(--i, 0) * 35ms) backwards; }
  .lista > .linha:nth-of-type(2) { --i: 1; } .lista > .linha:nth-of-type(3) { --i: 2; } .lista > .linha:nth-of-type(4) { --i: 3; }
  .lista > .linha:nth-of-type(5) { --i: 4; } .lista > .linha:nth-of-type(6) { --i: 5; } .lista > .linha:nth-of-type(7) { --i: 6; }
  .lista > .linha:nth-of-type(8) { --i: 7; }
  @keyframes entra { from { opacity: 0; transform: translateY(8px); } }
  /* 2. selo Nova e 12. selo de menor preço chegam depois da linha */
  .lista > .linha:nth-of-type(-n+8) .chip-nova, .lista > .entra .chip-nova { animation: pop 260ms var(--ease-pop) calc(var(--i, 0) * 35ms + 180ms) backwards; }
  .lista > .linha:nth-of-type(-n+8) :is(.selo-h-menor30, .selo-h-menor90), .lista > .entra :is(.selo-h-menor30, .selo-h-menor90),
  .faixa-meta :is(.selo-h-menor30, .selo-h-menor90), .prod-tit :is(.selo-h-menor30, .selo-h-menor90) { animation: desce 360ms var(--ease-out) calc(var(--i, 0) * 35ms + 200ms) backwards; }
  @keyframes pop { from { opacity: 0; transform: scale(.6); } }
  @keyframes desce { from { opacity: 0; transform: translateY(-6px); } }

  /* 3-5. card: sobe 2px no hover, foto aproxima, aperta no toque */
  .linha { transition: transform 200ms var(--ease-out); }
  .linha-foto img { transition: transform 320ms var(--ease-out); }
  .linha:has(.linha-titulo a:active) { transform: scale(.985); transition-duration: 120ms; }

  /* 6-8. botões */
  .btn { transition: transform 160ms var(--ease-out); }
  .btn::before, .voto::after { transition: opacity var(--t-hover) ease; }
  .ico-sair-para-loja { transition: transform 160ms var(--ease-out); }
  .btn:active, .voto:active, .seg-op:active, .chip-f:active { transform: scale(.97); transition-duration: 100ms; }
  .voto, .seg-op, .chip-f { transition: transform 100ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .linha:hover { transform: translateY(-2px); }
    .linha:hover .linha-foto img { transform: scale(1.04); }
    .btn:not([disabled]):hover { transform: translateY(-1px); }
    .btn:not([disabled]):hover .ico-sair-para-loja { transform: translate(2px, -2px); }
    .btn:not([disabled]):active { transform: scale(.97); }
  }
  .linha-titulo a { transition: text-decoration-color var(--t-hover) ease; }

  /* 9-10. voto: polegar pula; o número conta no JS */
  .voto::before { transition: opacity var(--t-hover) var(--ease-out); }
  .voto.anima[aria-pressed="true"] .ico { animation: polegar 300ms var(--ease-pop); }
  .voto-neg.anima[aria-pressed="true"] .ico { animation-name: polegar-neg; }
  @keyframes polegar { 50% { transform: scale(1.28) rotate(-8deg); } }
  @keyframes polegar-neg { 50% { transform: scale(1.28) rotate(8deg); } }

  /* 11. copiar cupom */
  .copiar-rot, .copiar-ok { transition: opacity 140ms ease, transform 140ms ease; }
  .copiar-ok { transform: translateY(6px); }
  .copiado .copiar-rot { transform: translateY(-6px); }
  .copiado .copiar-ok { transform: none; transition-duration: 180ms; }
  .copiado .copiar-ok .ico { animation: pop-check 220ms var(--ease-pop); }
  .copiado .codigo::before { animation: marca 2000ms linear forwards; }
  @keyframes pop-check { from { opacity: 0; transform: scale(.5); } }
  @keyframes marca {
    0% { transform: scaleX(0); opacity: 1; animation-timing-function: var(--ease-out); }
    12%, 60% { transform: scaleX(1); opacity: 1; }
    80%, 100% { transform: scaleX(1); opacity: 0; }
  }

  /* 13. preço da oferta: número e centavos sobem de trás da máscara */
  .preco-hero .preco-num, .preco-anima .preco-num { clip-path: inset(-0.25em -0.1em 0 -0.1em); }
  .preco-hero .preco-int, .preco-anima .preco-int { animation: sobe var(--t-reveal) var(--ease-out) backwards; }
  .preco-hero .preco-cent, .preco-anima .preco-cent { animation: sobe-cent var(--t-reveal) var(--ease-out) 80ms backwards; }
  .preco-hero .preco-forma, .preco-anima .preco-forma, .faixa-forma { animation: aparece 200ms ease-out 160ms backwards; }
  @keyframes sobe { from { transform: translateY(105%); } }
  @keyframes sobe-cent { from { transform: translateY(2.6em); } }
  @keyframes aparece { from { opacity: 0; } }

  /* 14. gráfico: cortina (1 vez) e anel no menor preço (2 vezes) */
  .hist-graf.revela::after { content: ""; position: absolute; inset: 0; background: var(--surface); transform-origin: right center; animation: cortina 600ms var(--ease-out) forwards; }
  .hist-graf.revela .hg-ponto { animation: aparece 160ms ease-out 600ms backwards; }
  .hist-graf.revela .hg-anel { animation: anel 700ms var(--ease-out) 760ms 2; }
  .hist-graf.pronto .hg-anel { animation: anel 700ms var(--ease-out) 300ms 2; }
  @keyframes cortina { from { transform: scaleX(1); } to { transform: scaleX(0); } }
  @keyframes anel { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }

  /* 15. logo: balanço na 1ª página da sessão; raio acende no hover/foco */
  .logo-entra .topo .logo-tag { animation: balanco 720ms var(--ease-out); }
  .logo-entra .topo .logo-raio { animation: raio 240ms ease 180ms 2; }
  .topo .marca:is(:hover, :focus-visible) .logo-raio { animation: raio 240ms ease; }
  @keyframes balanco { 0% { transform: rotate(-12deg); } 40% { transform: rotate(5deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
  @keyframes raio { 50% { opacity: .35; } }

  /* 16-17. painel de baixo e diálogo do desktop */
  .filtros:target .filtros-form { animation: sheet-in var(--t-sheet) var(--ease-out); }
  .filtros:target .sheet-fundo { animation: aparece 200ms ease-out; }
  .filtros.fechando .filtros-form { animation: sheet-out 200ms var(--ease-in-out) forwards; }
  .filtros.fechando .sheet-fundo { animation: some 200ms ease-out forwards; }
  .sheet-dialog[open] { animation: sheet-in var(--t-sheet) var(--ease-out); }
  .sheet-dialog[open]::backdrop { animation: aparece 200ms ease-out; }
  .sheet-dialog.fechando { animation: sheet-out 200ms var(--ease-in-out) forwards; }
  .sheet-dialog.fechando::backdrop { animation: some 200ms ease-out forwards; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  @keyframes sheet-out { to { transform: translateY(100%); } }
  @keyframes some { to { opacity: 0; } }
  @media (min-width: 1024px) {
    .sheet-dialog[open] { animation: dlg-in 220ms var(--ease-out); }
    .sheet-dialog.fechando { animation: dlg-out 160ms var(--ease-out) forwards; }
    @keyframes dlg-in { from { opacity: 0; transform: scale(.96); } }
    @keyframes dlg-out { to { opacity: 0; transform: scale(.96); } }
  }

  /* 18. toast */
  .toast span { animation: toast-in 240ms var(--ease-out); transition: opacity 160ms ease-out, transform 160ms ease-out; }
  .toast.saindo span { transform: translateY(16px); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

  /* 19. check do segmentado marcado; 22. <details> */
  .seg-op.on .ico { animation: pop-check 180ms var(--ease-pop); }
  .det-seta { transition: transform 200ms var(--ease-out); }

  /* esqueleto */
  .esqueleto i { animation: pulsa 900ms ease infinite alternate; opacity: 1; }
  @keyframes pulsa { to { opacity: .55; } }
}
@media (prefers-reduced-motion: reduce) {
  .voto::before { transition: opacity var(--t-press) linear; }
  .btn::before, .voto::after { transition: opacity var(--t-hover) ease; }
  @media (hover: hover) and (pointer: fine) { .linha:hover::after { opacity: 1; } }
  .copiado .codigo::before { animation: marca-r 2000ms linear forwards; transform: scaleX(1); }
  @keyframes marca-r { 0%, 60% { opacity: 1; } 80%, 100% { opacity: 0; } }
  .filtros:target .filtros-form, .sheet-dialog[open] { animation: aparece-r 120ms linear; }
  .sheet-dialog.fechando { animation: some 120ms linear forwards; }
  .toast span { animation: aparece-r 120ms linear; transition: opacity 120ms linear; }
  .hist-graf.espera::after { display: none; }
  .hist-graf.espera .hg-ponto { opacity: 1; }
  .esqueleto i { animation: none; opacity: .75; }
  @keyframes aparece-r { from { opacity: 0; } }
  @keyframes some { to { opacity: 0; } }
}
/* acabamento, revisão 1 do designer */
.voto::before, .voto::after, .btn::before { border-radius: inherit; }
.btn-primario { isolation: isolate; }
@media (min-width: 1024px) { .filtros-form { background: transparent; border-radius: 0; box-shadow: none; } }

/* ================= busca viva e filtros vivos (DESIGN_busca) ================= */
.busca-topo input { padding-right: 92px; }
.busca-limpar { position: absolute; right: 44px; top: 0; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-md); }
.busca-limpar[hidden], .sug[hidden], .opcao[hidden], .cats-vazio[hidden] { display: none; }
.sug { position: absolute; z-index: 50; top: calc(100% + 8px); left: calc(8px - var(--gutter)); right: calc(8px - var(--gutter)); max-height: 60vh; overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.sug-op { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 6px 8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.sug-item { min-height: 64px; }
.sug-op.ativo { background: var(--ground); }
@media (hover: hover) and (pointer: fine) { .sug-op:hover { background: var(--ground); } }
.sug-foto { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; background: var(--surface); border-radius: var(--r-sm); }
.sug-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sug-t { font-size: 15px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-t b, .sug-cat-t b { font-weight: 700; }
.sug-p { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
.sug-preco { font-size: 16px; line-height: 20px; font-weight: 800; font-stretch: 62%; font-variant-numeric: tabular-nums lining-nums; }
.sug-de, .sug-forma, .sug-n { font-size: 13px; line-height: 18px; color: var(--muted); }
.sug-cat-t { font-size: 15px; }
.sug-todos { font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sug.carregando .sug-op { opacity: .6; }
.sug-buscando { padding: 8px; font-size: 13px; color: var(--muted); }
.sug-esq { display: flex; align-items: center; gap: var(--s3); height: 64px; padding: 0 8px; }
.sug-esq i { display: block; background: var(--surface-2); border-radius: var(--r-sm); opacity: .75; }
.sug-esq i:first-child { width: 48px; height: 48px; }
.sug-esq i:last-child { flex: 1; height: 16px; }
.sug-vazio { padding: 12px 8px; display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.sug-vazio-t { font-size: 15px; font-weight: 600; }
.sug-vazio-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
#lista-viva { transition: opacity 150ms ease-out; }
#lista-viva[aria-busy="true"] { opacity: .5; }
.lista.sem-entrada > .linha { animation: none !important; }
.busca-aviso { margin: 0 var(--gutter) var(--s3); color: var(--muted); max-width: 62ch; }
.opcao-zero { color: var(--muted); cursor: default; }
.filtro-cats { display: none; position: relative; align-items: center; margin: 4px 0 var(--s2); }
html.js .filtro-cats { display: flex; }
.filtro-cats .ico { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.filtro-cats input { width: 100%; height: 44px; padding: 0 12px 0 40px; border: 1.5px solid var(--line-control); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 16px; -webkit-appearance: none; appearance: none; }
.filtro-cats input::placeholder { color: var(--muted); opacity: 1; }
.cats-vazio { font-size: 13px; line-height: 18px; color: var(--muted); padding: 4px 0; }
@media (max-width: 1023px) { .filtros-form .filtro-cats { position: sticky; top: 0; z-index: 1; background: var(--surface); margin: 0; padding: 4px 0 8px; } }
@media (min-width: 600px) { .busca-aviso { margin-left: 0; margin-right: 0; } }
@media (min-width: 1024px) {
  .sug { left: 0; right: auto; width: 480px; }
  html.js .filtros-aplicar { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sug:not([hidden]) { animation: sug-in 140ms var(--ease-out); }
  @keyframes sug-in { from { opacity: 0; transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) {
  .sug:not([hidden]) { animation: aparece-r 80ms linear; }
}

/* ================= cupons por área, página do cupom e preço com cupom (DESIGN_cupons) ================= */
.linha[hidden], .busca-local-vazio[hidden], .js-cat-local[hidden] { display: none; }
.cupons-busca { position: relative; display: flex; align-items: center; margin: 0 var(--gutter) var(--s2); }
.cupons-busca .ico { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.cupons-busca input { width: 100%; height: 44px; padding: 0 12px 0 40px; border: 1.5px solid var(--line-control); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 16px; -webkit-appearance: none; appearance: none; }
.cupons-busca input::placeholder { color: var(--muted); opacity: 1; }
.cupons-n { font-size: 13px; line-height: 18px; color: var(--muted); margin: 0 var(--gutter) var(--s2); }
.cupons-grupo .h2-sec { margin: var(--s5) var(--gutter) var(--s3); }
.cupom-topo .tempo, .cupom-topo .chip { margin-left: auto; }
.cupom-area { font-size: 13px; line-height: 18px; color: var(--muted); }
.cupom .cupom-regras { font-size: 15px; line-height: 21px; color: var(--ink); }
.cupom-obs { font-size: 13px; line-height: 18px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cupom .cupom-validade { align-self: flex-start; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.cupom .cupom-validade.urgente { background: var(--warn-bg); color: var(--warn-ink); padding: 2px 6px; border-radius: var(--r-xs); }
.cupom-nprod { font-size: 15px; line-height: 21px; }
.cupom-melhor { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: 8px; border-radius: var(--r-sm); background: var(--ground); color: var(--ink); text-decoration: none; }
.cupom-melhor img { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; background: var(--surface); border-radius: var(--r-sm); }
.cupom-melhor-tx { min-width: 0; display: flex; flex-direction: column; }
.cupom-melhor-t { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cupom-melhor-p { font-size: 15px; font-weight: 800; }
.cupom-melhor small { font-size: 13px; color: var(--muted); }
.cupom-sem { font-size: 13px; line-height: 18px; color: var(--muted); }
.cupom-aceito { font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cupom-aceito b { font-weight: 700; }
.cupom-enc .cupom-valor { color: var(--muted); }
.codigo-morto { color: var(--muted); text-decoration: line-through 2px; -webkit-user-select: text; user-select: text; }
.chip-eco { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border-radius: var(--r-xs); background: var(--signal-tint); color: var(--ink); font-size: 13px; font-weight: 600; }
.falta-min { align-self: flex-start; margin-top: 6px; padding: 2px 6px; border-radius: var(--r-xs); background: var(--warn-bg); color: var(--warn-ink); font-size: 13px; line-height: 18px; }
.cupom-link { position: relative; z-index: 1; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cupom-link::before { content: ""; position: absolute; inset: -13px 0; }
.cupom-link b, .cupom-rot b { font-weight: 800; }
.dest-1 .cupom-link { color: var(--white); }
.caixa-cupom .cupom-rot:has(b) { color: var(--ink); font-weight: 600; }
.cupom-regras-link { margin-top: var(--s2); }
.cupom-regras-link a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
/* página do cupom */
.faixa-cupom .faixa-meta-dir { margin-left: auto; }
.cupom-hero { font-size: 64px; line-height: .9; font-weight: 800; font-stretch: 62%; letter-spacing: -0.01em; color: var(--white); margin: var(--s2) 0 var(--s3); }
.faixa-cupom .codigo { color: var(--white); }
.faixa-cupom .codigo::before { background: var(--signal); }
.faixa-cupom .copiado .codigo { color: var(--ink); }
.faixa-cupom .btn-copiar { background: transparent; color: var(--white); border-color: var(--white); }
.faixa-cupom .btn-copiar::before { background: var(--hover-layer-band); }
.faixa-cupom .cupom-codigo + .cupom-codigo { margin-top: var(--s2); }
.faixa-cupom.cupom-enc .cupom-hero { color: var(--band-ink-soft); text-decoration: line-through 3px; }
.faixa-cupom .codigo-morto { color: var(--band-ink-soft); }
.cupom-como .promo-cta { margin-top: var(--s4); }
.cupom-busca { margin: var(--s2) 0; }
.cupom-ordem { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: var(--s2) 0; }
.cupom-ordem .seg-op { flex: 0 0 auto; }
.cupom-cats { margin: var(--s2) 0; }
.js-cat-local.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.busca-local-vazio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 15px; margin: var(--s2) 0; }
.cupom-prods .lista { margin: 0 calc(-1 * var(--gutter)); }
.cupom-fora { margin-top: var(--s4); }
.cupom-compacto { gap: var(--s2); }
@media (min-width: 600px) {
  .cupons-busca, .cupons-n { margin-left: 0; margin-right: 0; }
  .cupons-grupo .h2-sec { margin-left: 0; margin-right: 0; }
  .cupom-prods .lista { margin: 0; }
}
@media (min-width: 1024px) {
  .cupons-grade.lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
  .cupom-topo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .cupom-como .h2-sec { margin-top: var(--s4); }
  .cupom-hero { font-size: 88px; }
  .cupom-prods { max-width: 720px; }
  .pagina-cupom .faixa-preco { padding: var(--s5) var(--s6); }
}
/* cupons: código inteiro ao lado do botão (sem quebrar no meio) e /cupons sem trilho no desktop */
.cupom .codigo { font-size: clamp(15px, 4.4vw, 22px); letter-spacing: .02em; }
@media (min-width: 1280px) { .grade.grade-cupons { grid-template-columns: 224px minmax(0, 1fr); } }
@media (max-width: 420px) { .cupom .copiar-cod { display: none; } }   /* card estreito: "Copiar" pra o código caber inteiro ao lado */
/* cupons, revisão 1 do designer: grupos por loja, card em 2 zonas (desktop), 20 produtos por vez */
.opcao.opcao-sem, .fs-vazio { display: none; }
.fs-areas:not(.fs-longa) .filtro-cats { display: none; }
.cupom-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); grid-template-areas: "topo" "info" "cods" "prods" "acoes"; }
.cz-topo { grid-area: topo; }
.cz-info, .cz-cods, .cz-prods { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.cz-info { grid-area: info; } .cz-cods { grid-area: cods; } .cz-prods { grid-area: prods; }
.cz-acoes { grid-area: acoes; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cupom-botoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.cupom-botoes .btn { min-height: 44px; padding: 4px 10px; }
.cupom-botoes .btn:only-child { grid-column: 1 / -1; }
.linha.fora-n { display: none; }
.cupom-prods.buscando .linha.fora-n:not([hidden]) { display: grid; }
.cupom-prods.buscando .mais-prods { display: none; }
.mais-prods { margin: var(--s3) 0 0; }
@media (min-width: 1024px) {
  .grade-cupons .col-lista { max-width: 720px; }
  .cupons-grade.lista { display: flex; flex-direction: column; gap: var(--s4); }
  .cupom-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); grid-template-areas: "topo topo" "info cods" "prods acoes"; align-items: start; }
  .cupom-card .codigo { font-size: 18px; }
}
.cupom-botoes .btn { gap: 6px; padding: 4px 8px; font-size: 15px; }
@media (min-width: 1024px) { .cupom-card .copiar-cod { display: none; } }   /* zona direita estreita: "Copiar" pro código caber inteiro */
/* código nunca quebra no meio: fonte encolhe pelo tamanho; se não couber com o botão, o Copiar desce */
.cupom-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.codigo { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.codigo.c-l, .cupom .codigo.c-l, .cupom-card .codigo.c-l { font-size: clamp(16px, 4.6vw, 20px); letter-spacing: .02em; }
.codigo.c-xl, .cupom .codigo.c-xl, .cupom-card .codigo.c-xl { font-size: clamp(15px, 4.2vw, 18px); letter-spacing: .01em; }
.cupom-botoes.cupom-botoes-lista { grid-template-columns: auto minmax(0, 1fr); }
.cupom-lista-ml { display: flex; flex-direction: column; gap: var(--s3); }
.cupom-todos-ml { margin-top: var(--s4); }
.cupom-botoes-lista .btn { white-space: nowrap; }
/* busca: só o nosso × de limpar (esconde o nativo do type=search) */
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* "Copiar e ativar na loja": um botão que copia o código e abre o nosso link de afiliado */
.cupom-ativar { margin: 0; }
.cupom-ativar .btn { width: 100%; min-height: 44px; }
.cupom-botoes.cupom-botoes-1 { grid-template-columns: minmax(0, 1fr); }
.faixa-cupom .cupom-ativar { margin-top: var(--s3); }
.faixa-cupom .cupom-ativar .btn-primario { min-height: 52px; background: var(--signal); color: var(--ink); border-color: transparent; }
.faixa-cupom .cupom-ativar .btn-primario::before { background: var(--hover-layer); }
.cupom-todos-ml { margin-top: var(--s4); }

/* páginas de texto (privacidade etc.) */
.texto h2 { font-size: 20px; line-height: 26px; margin-top: var(--s4); }
.texto ul { max-width: 62ch; padding-left: 20px; display: flex; flex-direction: column; gap: var(--s2); }
.texto small { color: var(--muted); }

/* ================= SEO: links internos (F3), landings (F8) e cookies (F9) — DESIGN_seo 17/10/2026 ================= */
/* chips de categoria = links, com a contagem */
.chip-n { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chip-f.on .chip-n { color: var(--band-ink-soft); }

/* trilha (substitui o "Voltar"): 44px, 1 linha; no celular a página atual é só pro leitor de tela */
.trilha { margin-bottom: var(--s1); }               /* /p/: 44 + 4 = a altura do antigo "Voltar"; botão de compra em 722 a 390×844 */
.trilha ol { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.trilha li { display: flex; align-items: center; min-width: 0; flex: 0 0 auto; }
.trilha li.trilha-encolhe, .trilha li.trilha-atual { flex: 0 1 auto; }
.trilha li:first-child { flex: 0 0 auto; }
.trilha a { display: block; min-width: 0; padding: 12px 0; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilha .trilha-inicio { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
.trilha-sep { flex: 0 0 14px; margin: 0 6px; color: var(--muted); }
.trilha-casa { display: none; }
.trilha.compacta .trilha-casa { display: block; }
.trilha.compacta .trilha-inicio-t { display: none; }
.trilha.compacta .trilha-inicio { min-width: 44px; justify-content: center; }
.trilha-atual { color: var(--muted); }
.trilha-atual span { display: block; max-width: 40ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599px) {
  .trilha-atual { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (hover: hover) and (pointer: fine) { .trilha a:hover { text-decoration: underline; } }

/* topo da landing: trilha + H1 + abertura, acima da barra de filtros */
.landing-topo { padding: 0 var(--gutter); }
.landing-topo .trilha { margin-bottom: 0; }
.landing-topo .h1-lista { margin: 0 0 var(--s1); }
.abertura { max-width: 62ch; margin: 0 0 var(--s3); font-size: 15px; line-height: 21px; color: var(--muted); }
.abertura b { font-weight: 600; color: var(--ink); }
.abertura a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) { .abertura { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }

/* linha da lista: "N ofertas a partir de" e "Histórico de preço" levam ao /produto/ (o título continua indo pra /p/) */
.linha-n-link, .hist-link { position: relative; z-index: 1; text-decoration: none; }
.linha-n-link { color: inherit; }
.hist-link { color: var(--signal-ink); font-weight: 500; }
.linha-n-link::before, .hist-link::before { content: ""; position: absolute; inset: -13px 0; }
@media (hover: hover) and (pointer: fine) { .linha-n-link:hover, .hist-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* bloco "Explore" (fim da lista) e lateral */
.explore, .landing-extras, .cupons-enc7, .cupons-loja-link { margin-left: var(--gutter); margin-right: var(--gutter); }
.explore { margin-top: var(--s6); }
.explore > .h2-sec:first-child { margin-top: 0; }
.exp-grade, .exp-lojas, .lat-lojas, .lat-cats, .cup-linhas, .acomp-linhas, .enc-linhas { list-style: none; margin: 0; padding: 0; }
.exp-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2); }
.exp-mais { margin-top: var(--s2); }
.exp-mais > .exp-grade { margin-top: var(--s2); }
.exp-cat, .lat-cat { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); color: var(--ink); text-decoration: none; }
.exp-cat { min-height: 48px; padding: 0 12px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--sh-1); font-size: 15px; font-weight: 600; }
.exp-cat-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-n { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--muted); }
.exp-lojas, .lat-lojas, .cup-linhas, .acomp-linhas, .enc-linhas { display: flex; flex-direction: column; gap: var(--s2); }
.exp-loja { position: relative; display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 0 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.exp-loja-nome { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.exp-loja .exp-n { margin-left: auto; }
.exp-loja-cup { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--signal-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .exp-cat:hover .exp-cat-nome, .lat-cat:hover .exp-cat-nome, .exp-loja:hover .exp-loja-nome { text-decoration: underline; text-underline-offset: 3px; }
}
.lateral-card { background: var(--surface); padding: var(--s5); border-radius: var(--r-lg); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--s2); }
.lat-lojas { gap: 0; }
.lat-loja { min-height: 48px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.lat-cat { min-height: 40px; font-size: 15px; font-weight: 500; }

/* depois da lista da landing: cupons e "Acompanhando o preço" (linhas de 56px) */
.cup-linha, .acomp-linha, .enc-linha { display: flex; align-items: center; gap: var(--s3); padding: 0 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); color: var(--ink); text-decoration: none; }
.cup-linha, .acomp-linha { min-height: 56px; }
.cup-linha-d { flex: 0 0 auto; font-size: 20px; line-height: 24px; font-weight: 800; font-stretch: 75%; }
.cup-linha-c, .enc-linha .codigo-morto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.cup-linha-n, .enc-q { flex: 0 0 auto; margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.acomp-linha { padding-top: 8px; padding-bottom: 8px; }
.acomp-linha img, .acomp-sem { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; border-radius: var(--r-sm); background: var(--surface); }
.acomp-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; }
.acomp-d { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.landing-extras .link-forte { margin-top: var(--s1); }
@media (hover: hover) and (pointer: fine) { .cup-linha:hover .cup-linha-c, .acomp-linha:hover .acomp-nome, .enc-linha:hover .enc-d { text-decoration: underline; text-underline-offset: 3px; } }

/* /cupons e /cupons/{loja}: lojas como navegação (barra < 1024, lista na coluna ≥ 1024), encerrados 7 dias */
.lojas-barra { display: flex; gap: var(--s2); overflow-x: auto; margin: 0; padding: 0 var(--gutter) var(--s2); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lojas-barra::-webkit-scrollbar { display: none; }
.lj-op { flex: 0 0 auto; }
.lojas-col { display: none; }
.lj-lin { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; font-size: 15px; }
.lj-lin.on { font-weight: 600; background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .lj-lin:not(.on):hover { text-decoration: underline; text-underline-offset: 3px; } }
.enc-linha { min-height: 48px; }
.enc-d { flex: 0 0 auto; font-size: 15px; font-weight: 600; }
.cupons-loja-link { margin-top: var(--s4); }
.cupons-grupo-link { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cupons-grupo-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
@media (min-width: 600px) {
  .landing-topo { padding-left: 0; padding-right: 0; }
  .explore, .landing-extras, .cupons-enc7, .cupons-loja-link { margin-left: 0; margin-right: 0; }
  .lojas-barra { padding-left: 0; padding-right: 0; scroll-padding-inline: 0; }
}
@media (min-width: 1024px) {
  .exp-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lojas-barra { display: none; }
  .lojas-col { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--s4); }
  .lojas-col h2 { font-size: 15px; line-height: 20px; font-weight: 600; margin: 0 0 var(--s1); }
}

/* cookies (F9): faixa não modal na base + diálogo com interruptores. Só existe com tag configurada */
.ck-faixa { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 80; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4);
  background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3); }
.ck-faixa[hidden] { display: none; }
.ck-faixa.ck-medindo { visibility: hidden; }
.ck-txt { font-size: 15px; line-height: 21px; }
.ck-txt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ck-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ck-botoes .btn, .ck-dlg-botoes .btn, .ck-priv-botoes .btn { min-height: 44px; padding: 0 8px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; }
.ck-dlg-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin: var(--s2) 0; }
.ck-dlg-topo h2 { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; }
.ck-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: none; border: 0; border-radius: var(--r-md); cursor: pointer; }
.ck-lista { list-style: none; margin: 0; padding: 0; }
.ck-linha { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) 0; border-bottom: 1px solid var(--surface-2); }
.ck-rot { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.ck-tit { font-size: 15px; line-height: 21px; font-weight: 600; }
.ck-desc { font-size: 13px; line-height: 18px; color: var(--muted); }
.ck-ctrl { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.ck-switch { -webkit-appearance: none; appearance: none; position: relative; width: 44px; height: 26px; margin: 9px 0 2px; border-radius: 13px;
  background: var(--surface-2); border: 1.5px solid var(--line-control); cursor: pointer; }
.ck-switch::after { content: ""; position: absolute; top: 1.5px; left: 1.5px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 2px rgba(13, 19, 55, .35); }
.ck-switch:checked { background: var(--ink); border-color: var(--ink); }
.ck-switch:checked::after { transform: translateX(18px); }
.ck-switch:disabled { cursor: default; opacity: .55; }
.ck-estado { font-size: 13px; line-height: 16px; color: var(--muted); }
.ck-dlg-botoes { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s4); }
.ck-priv { margin: var(--s2) 0 var(--s3); }
.ck-priv-botoes { margin-top: var(--s3); }
.ck-tab { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.ck-tab th, .ck-tab td { text-align: left; vertical-align: top; padding: 8px; border-bottom: 1px solid var(--surface-2); }
@media (min-width: 1024px) {
  .ck-faixa { left: 24px; right: auto; bottom: 24px; width: 440px; }
  .ck-dlg-botoes { flex-direction: row; }
  .ck-dlg-botoes .btn { flex: 1 1 0; }
}
@keyframes ck-entra { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ck-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .ck-faixa.ck-entra { animation: ck-entra 240ms var(--ease-out); }
  .ck-faixa.ck-sai { transform: translateY(16px); opacity: 0; transition: transform 200ms ease-in, opacity 200ms ease-in; }
  .ck-switch::after { transition: transform 160ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-faixa.ck-entra { animation: ck-fade 120ms linear; }
  .ck-faixa.ck-sai { opacity: 0; transition: opacity 120ms linear; }
}
/* caixa de cupom da /p/ (revisão 1): abaixo de 420px o botão vira "Copiar" e fica sempre AO LADO do código (o código desce até 15px) */
@media (max-width: 420px) {
  .caixa-cupom .copiar-cod { display: none; }
  .caixa-cupom .cupom-linha { flex-wrap: nowrap; }
  .caixa-cupom .cupom-linha .btn-copiar { flex: 0 0 auto; }
  .caixa-cupom .codigo, .caixa-cupom .codigo.c-l, .caixa-cupom .codigo.c-xl { min-width: 0; font-size: clamp(15px, 4.4vw, 22px); letter-spacing: .02em; }
}
/* /cupons/{loja}: respiro entre o H1 e a barra de lojas (revisão 2 do designer) */
.lojas-barra { margin-top: 12px; }

/* ================= conta (17/10/2026, promosmart_DESIGN_conta.md) ================= */
/* topo: celular = ícone pessoa / inicial; desktop = "Entrar" / [inicial + nome + seta] com menu */
.topo-entrar, .topo-conta { display: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--signal); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1; }
@media (min-width: 1024px) {
  .topo-entrar-ico, .topo-conta-ico { display: none; }
  .topo-entrar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s2); color: var(--white); font-size: 16px; font-weight: 600; text-decoration: none; }
  .topo-entrar:hover { text-decoration: underline; text-underline-offset: 3px; }
  .topo-conta { display: block; position: relative; }
  .topo-conta-btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s2); color: var(--white); text-decoration: none; font-size: 16px; font-weight: 600; }
  .topo-conta-nome { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-conta { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 220px; padding: 6px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
  .menu-conta[hidden] { display: none; }
  .menu-conta a, .menu-conta button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-md);
    background: none; color: var(--ink); font: inherit; font-size: 16px; text-align: left; text-decoration: none; cursor: pointer; }
  .menu-conta a:hover, .menu-conta button:hover { background: var(--ground); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .menu-conta:not([hidden]) { animation: menu-entra 140ms var(--ease-out); }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* entrar */
.pagina-entrar { max-width: calc(440px + 2 * var(--gutter)); }
.entrar-cartao { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) 0; }
.entrar-cartao .h1-lista { margin: 0; }
.entrar-txt { font-size: 16px; line-height: 23px; }
.entrar-nota { font-size: 13px; line-height: 18px; color: var(--muted); }
.entrar-nota a { color: var(--ink); text-decoration: underline; }
.entrar-tg { width: 100%; }
.entrar-num { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.entrar-num-rot { font-size: 15px; font-weight: 600; }
.entrar-num-v { margin-left: auto; font-size: 40px; line-height: 1; font-weight: 800; font-stretch: 75%; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.entrar-passos { padding-left: 22px; display: flex; flex-direction: column; gap: var(--s2); font-size: 16px; line-height: 23px; }
.entrar-espera { display: flex; align-items: center; gap: var(--s2); font-size: 15px; color: var(--muted); }
.anel { width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; border: 2.5px solid var(--surface-2); border-top-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .anel { animation: anel-gira 900ms linear infinite; } }
@keyframes anel-gira { to { transform: rotate(360deg); } }
.entrar-desk { display: none; }
@media (min-width: 1024px) { .entrar-desk { display: block; } }
html.js .entrar-ja { display: none; }
html.js .entrar-ja.mostra { display: inline-flex; }
.entrar-ajuda { padding: var(--s3) var(--s4); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-md); font-size: 15px; line-height: 21px; display: flex; flex-direction: column; gap: var(--s2); }
.entrar-ajuda[hidden] { display: none; }
.entrar-cmd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.entrar-cmd code { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; font-size: 13px; color: var(--ink); }
.entrar-cancelar { min-height: 44px; }
.aviso-erro { padding: var(--s3) var(--s4); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-md); }
@media (min-width: 1024px) {
  .pagina-entrar .entrar-cartao { max-width: 440px; margin: var(--s4) auto 0; padding: var(--s5); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
}

/* minha conta */
.pagina-conta { max-width: calc(720px + 2 * var(--gutter)); }
.pagina-conta .h1-lista { margin: 0 0 var(--s1); }
.conta-quem { font-size: 13px; line-height: 18px; color: var(--muted); margin-bottom: var(--s3); }
.conta-ligar { padding: var(--s4); background: var(--signal-tint); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.conta-abas { display: flex; margin-bottom: var(--s3); }
.conta-aba { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px;
  background: var(--surface); border: 1.5px solid var(--line-control); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.conta-aba + .conta-aba { margin-left: -1.5px; }
.conta-aba:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.conta-aba:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.conta-aba.on { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 600; }
.conta-aba.on .chip-n { color: var(--band-ink-soft); }
@media (min-width: 1024px) {
  .pagina-conta { max-width: 1000px; }
  .conta-grade { display: grid; grid-template-columns: 224px minmax(0, 720px); column-gap: var(--s6); align-items: start; }
  .conta-abas { flex-direction: column; gap: 2px; }
  .conta-aba { justify-content: space-between; border: 0; border-radius: var(--r-md) !important; margin: 0 !important; background: none; font-weight: 500; }
  .conta-aba.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
  .conta-aba.on .chip-n { color: var(--muted); }
}
.conta-conteudo { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.conta-cartao { background: var(--surface); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: var(--s3); }
.conta-cartao h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.conta-cartao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.conta-salvo { font-size: 13px; color: var(--muted); }
.conta-salvo.erro { color: var(--warn-ink); }
.conta-nota { font-size: 13px; line-height: 18px; color: var(--muted); }
.conta-aviso { padding: var(--s3) var(--s4); background: var(--signal-tint); border-radius: var(--r-lg); font-size: 15px; line-height: 21px; }
.conta-aviso a { color: var(--ink); text-decoration: underline; }
.conta-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 44px; font-size: 16px; }
.selo-ok { padding: 2px 8px; border-radius: var(--r-xs); background: var(--signal-tint); color: var(--ink); font-size: 13px; font-weight: 600; }
.selo-pausa { padding: 2px 8px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600; }
.conta-rot { font-size: 15px; font-weight: 600; margin-bottom: var(--s1); }
.conta-seg { display: flex; flex-wrap: wrap; }
.conta-seg .seg-op { font: inherit; font-size: 15px; cursor: pointer; }
.conta-cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s3); }
@media (min-width: 400px) { .conta-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.conta-cats .opcao[hidden] { display: none; }
.conta-cartao .filtro-cats { display: flex; }
.conta-palavras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.conta-palavras li { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 16px; border-bottom: 1px solid var(--surface-2); }
.conta-campo { display: flex; gap: var(--s2); align-items: center; }
.conta-campo input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1.5px solid var(--line-control); border-radius: var(--r-md); font: inherit; font-size: 16px; background: var(--surface); color: var(--ink); }
.conta-campo-rs { position: relative; }
.conta-rs { position: absolute; left: 12px; font-size: 16px; color: var(--muted); pointer-events: none; }
.conta-campo-rs input { padding-left: 40px; }
.conta-erro { font-size: 13px; line-height: 18px; color: var(--warn-ink); }
.conta-erro:empty { display: none; }
.conta-switch { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: 16px; cursor: pointer; }
.opcao-radio { min-height: 48px; }
html.js .conta-salvar-sem-js { display: none; }
.conta-vazio-t { font-size: 16px; }
.conta-salvas-topo { display: flex; flex-direction: column; gap: var(--s2); }
.conta-salvas-topo form { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.selo-var { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border-radius: var(--r-xs); font-size: 13px; font-weight: 600; }
.selo-baixou { background: var(--hot); color: var(--ink); }
.selo-subiu { background: var(--surface-2); color: var(--ink); }
.linha-salva .linha-acoes .btn-texto { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.saindo-item { opacity: 0; transform: translateY(-8px); }
@media (prefers-reduced-motion: no-preference) { .linha-salva { transition: opacity 200ms ease, transform 200ms ease; } }
.conta-botoes { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.conta-excluir h2 { color: var(--error); }
.btn-perigo { background: var(--surface); color: var(--error); border: 2px solid var(--error); }
.btn-perigo-cheio { background: var(--error); color: var(--white); border-color: var(--error); }
.btn-perigo-cheio:disabled { background: var(--surface-2); color: var(--muted); border-color: transparent; cursor: not-allowed; }
.conta-excluir-form { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s3); }

/* botão Salvar sobre a foto (custo zero de altura) */
.linha-foto, .promo-foto { position: relative; }
.salvar-form { position: absolute; top: 4px; right: 4px; z-index: 2; margin: 0; }
.salvar { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line-control); color: var(--ink); box-shadow: var(--sh-1); cursor: pointer; padding: 0; }
.salvar::before { content: ""; position: absolute; inset: -6px; }
.salvar .salvar-ico-c { display: none; }
.salvar[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.salvar[aria-pressed="true"] .salvar-ico-v { display: none; }
.salvar[aria-pressed="true"] .salvar-ico-c { display: block; }
.salvar-grande { top: 12px; right: 12px; }
.salvar-grande .salvar { width: 40px; height: 40px; }
.salvar-grande .salvar .ico { width: 22px; height: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .salvar { transition: background-color 160ms ease, border-color 160ms ease; }
  .salvar.pop .ico { animation: salvar-pop 260ms var(--ease-pop); }
}
@keyframes salvar-pop { from { transform: scale(.7); } to { transform: scale(1); } }
.dlg-s-t { font-size: 22px; line-height: 28px; font-weight: 600; font-stretch: 87.5%; margin: var(--s2) 0; }
#dlg-salvar .js-painel-espera { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
#dlg-salvar .js-painel-espera[hidden], #dlg-salvar form[hidden] { display: none; }
#dlg-salvar form { margin-bottom: var(--s3); }
@media (min-width: 1024px) { #dlg-salvar { max-width: 440px; } }
.toast .toast-acao { pointer-events: auto; margin-left: var(--s3); min-height: 44px; padding: 0 var(--s2); border: 0; background: none; color: var(--signal); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
/* marcador: círculo em todo navegador (o WebKit desenha botão nativo se a aparência não for zerada) — revisão do designer */
.salvar { -webkit-appearance: none; appearance: none; box-sizing: border-box; flex: none; min-width: 32px; min-height: 32px; border-radius: 50%; }
.salvar-grande .salvar { min-width: 40px; min-height: 40px; }

/* ================= conta com e-mail e senha (17/10/2026, promosmart_DESIGN_conta_email.md) ================= */
.entrar-alt { display: flex; }
.entrar-alt .seg-op { flex: 1 1 0; justify-content: center; text-decoration: none; color: var(--ink); }
.entrar-alt .seg-op.on { color: var(--white); }
.form-conta { display: flex; flex-direction: column; gap: var(--s3); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { font-size: 15px; line-height: 20px; font-weight: 600; }
.campo-in { position: relative; display: flex; align-items: center; }
.campo-in input { width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--line-control); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.campo-senha .campo-in input { padding-right: 88px; }
.campo-mostrar { position: absolute; right: 2px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.campo-mostrar[hidden] { display: none; }
.campo-erro .campo-in input, .campo-in input[aria-invalid="true"] { border: 2px solid var(--error); }
.campo-msg { display: flex; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--error); }
.campo-req { font-size: 13px; line-height: 18px; color: var(--muted); }
.campo-req.ok { color: var(--ink); }
.caixa-erro { padding: 12px; background: #FDECEA; color: var(--error); border-radius: var(--r-md); font-size: 15px; line-height: 21px; }
.caixa-erro[hidden] { display: none; }
.caixa-erro a { color: var(--error); font-weight: 600; text-decoration: underline; }
.link-esqueci { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.entrar-ou { margin: var(--s5) 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.aceito { min-height: 44px; }
.aceito a { color: var(--ink); text-decoration: underline; }
.js-painel-email[hidden] { display: none; }
.js-painel-email { margin-top: var(--s3); }
#dlg-salvar { max-height: 92vh; overflow-y: auto; }
.conta-forma { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--surface-2); }
.conta-forma:last-child { border-bottom: 0; }
.conta-desligar { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.conta-aviso form { margin-top: var(--s2); }
.conta-aviso .btn { display: inline-flex; gap: var(--s2); }

.form-externo { margin-top: var(--s2); }
.js-painel-externos[hidden] { display: none; }
.conta-aviso a.btn { text-decoration: none; }