/* =========================================================================
   KICKSTART — direção de arte "MERCADO"
   Etiqueta de preço, tipografia de sinalização, e o prazo como design.
   A oferta é perecível: o shelf-life bar é a assinatura visual.

   Notas de auditoria (medidas no navegador, 2026-09-12):
   • --hot  #C9300F  → 4.69 sobre papel e 5.39 com texto branco (WCAG AA)
   • --on-hot  inverte no dark mode, onde --hot fica mais claro
   • tags de loja usam TEXTO ESCURO sobre a cor da loja (branco dava 2.82)
   • todo espaçamento em base 4px
   ========================================================================= */

:root {
  /* A vitrine é "papel" — sempre clara, nos dois esquemas do aparelho.
     Sem isto, um celular em modo escuro pintava a página inteira de preto,
     o que não é a identidade dela. `color-scheme` também impede o navegador
     de inverter campos de formulário e barras de rolagem por conta própria. */
  color-scheme: light;

  --paper:      #F2EFE6;
  --paper-2:    #E9E4D6;
  --card:       #FBFAF6;
  --ink:        #14120E;
  --ink-2:      #45413A;
  --soft:       #6B6658;
  --rule:       #D6CFBD;
  --rule-2:     #C4BCA6;

  --hot:        #C9300F;   /* 4.69 sobre papel · 5.39 com branco */
  --on-hot:     #FFFFFF;
  --hot-2:      #FF6B35;   /* acento sobre fundo escuro */
  --acid:       #D6F24B;

  --ok:   #2E7D32;
  --warn: #B26A00;
  --crit: #C62828;

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --body:    'Archivo', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, Menlo, monospace;

  --r:  4px;
  --r2: 10px;
  --wrap: 1180px;

  --shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(20,18,14,.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  background-image: radial-gradient(circle at 1px 1px, rgba(20,18,14,.045) 1px, transparent 0);
  background-size: 22px 22px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
s { text-decoration-thickness: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.mut { color: var(--soft); }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: -.02em; }
.fine { font-size: .78rem; color: var(--soft); line-height: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================== TICKER ==============================
   Sempre escuro, nos dois esquemas — é a faixa de sinalização.        */

.ticker {
  background: #14120E;
  color: #F2EFE6;
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
}
.ticker-run {
  display: flex; align-items: center; white-space: nowrap;
  animation: run 60s linear infinite; will-change: transform;
}
.ticker:hover .ticker-run { animation-play-state: paused; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cada item do letreiro é um LINK. O sublinhado no hover é o que avisa que
   dá para clicar — sem ele, pausar não serve de nada. */
.tk {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  text-transform: uppercase; padding: 2px 4px; color: inherit;
  text-decoration: none; white-space: nowrap;
  transition: color .14s;
}
.tk:hover { color: var(--acid); text-decoration: underline; text-underline-offset: 3px; }
.tk b { color: #FF6B35; }
.tk em { font-style: normal; color: #D6F24B; font-weight: 700; }
.tk-sep { color: #FF6B35; padding: 0 12px; font-size: .6rem; }

/* ============================ MASTHEAD ============================== */

.masthead {
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.masthead.slim { position: static; }
.mh-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 20px; }

/* A lupa só existe no mobile (lá o campo de busca não cabe sempre). */
.busca-btn { display: none; }

.mh-title { margin: 0; font-size: inherit; font-weight: inherit; line-height: 1; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  font-family: var(--display); font-size: 30px; line-height: 1;
  background: var(--hot); color: var(--on-hot);
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r); transform: rotate(-3deg);
}
.brand-txt {
  font-family: var(--display); font-size: 30px; line-height: .92;
  letter-spacing: -.01em; text-transform: uppercase;
  display: flex; flex-direction: column;
}
.brand-txt em {
  font-family: var(--mono); font-style: normal; font-size: .6rem;
  letter-spacing: .18em; color: var(--soft); text-transform: uppercase; margin-top: 4px;
}
.brand.small .brand-txt { font-size: 20px; }
.brand.small .brand-mark { width: 32px; height: 32px; font-size: 20px; }

.search { display: flex; flex: 0 1 380px; }
.search input {
  flex: 1; min-width: 0; font-family: var(--body); font-size: .95rem;
  padding: 12px 16px; background: var(--card);
  border: 2px solid var(--ink); border-right: none;
  border-radius: var(--r) 0 0 var(--r); color: var(--ink);
}
.search input:focus { outline: none; background: var(--paper); }
.search button {
  font-family: var(--display); font-size: 20px; padding: 0 20px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 0 var(--r) var(--r) 0;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.search button:hover { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }

/* ========================== GROUP BAND ==============================
   Também sempre escuro — bloco de sinalização.                        */

.group-band {
  margin: 32px 0 8px;
  background: #14120E; color: #F2EFE6;
  border-radius: var(--r2);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.group-band::after {
  content: '%'; position: absolute; right: -8px; bottom: -60px;
  font-family: var(--display); font-size: 220px; line-height: 1;
  color: rgba(255,255,255,.045); pointer-events: none;
}
.gb-kicker { font-family: var(--mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: #FF6B35; }
.group-band h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(28px, 4vw, 44px); line-height: .95;
  margin: 8px 0; text-transform: uppercase; letter-spacing: -.01em; color: #F2EFE6;
}
.group-band p { margin: 0; color: #B9B2A2; max-width: 46ch; font-size: .94rem; }
.gb-txt { position: relative; z-index: 1; }

/* ============================= BUTTONS ============================== */

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-size: 19px; letter-spacing: .01em;
  text-transform: uppercase; padding: 12px 24px;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--r);
  cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn.hot { background: var(--hot); border-color: var(--hot); color: var(--on-hot); }
.btn.hot:hover { background: var(--hot-2); border-color: var(--hot-2); color: #14120E; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.xl { font-size: 24px; padding: 10px 32px; width: 100%; justify-content: center; }
.btn.xl span { transition: transform .15s; }
.btn.xl:hover span { transform: translateX(5px); }
.btn.wfull { width: 100%; justify-content: center; font-size: 15px; padding: 12px; }

/* ============================== MENU ==============================
   O cabeçalho não comporta tudo em nenhuma largura — o menu é onde vivem
   Cupons, Promoções do dia, Categorias, Blog, App e as redes.         */

/* ------------------- navegação do DESKTOP (aberta) ------------------- */

.mh-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;               /* empurra para a direita, junto da busca */
  flex-wrap: nowrap;
}
.mh-nav a {
  font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-2); white-space: nowrap;
  padding: 8px 10px; border-radius: var(--r);
  transition: background .14s, color .14s;
}
.mh-nav a:hover { background: var(--paper-2); color: var(--ink); }
.mh-nav a.on { background: var(--ink); color: var(--paper); }

/* O botão do grupo no cabeçalho: só o ícone, em círculo quente. */
.zap-btn {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px;
  border: 2px solid var(--hot); border-radius: var(--r);
  background: var(--hot); color: var(--on-hot);
  transition: transform .14s, background .14s;
}
.zap-btn:hover { transform: translateY(-2px); background: var(--hot-2); border-color: var(--hot-2); color: #14120E; }

/* O sanduíche e o painel do menu só existem no MOBILE. */
.menu-btn { display: none; }
.menu { display: none; }

@media (max-width: 1080px) {
  /* Não cabe mais a navegação aberta: ela volta para o sanduíche. */
  .mh-nav { display: none; }
  .zap-btn { display: none; }
  .menu-btn { display: grid; }
  .menu { display: grid; }
  .menu[hidden] { display: none; }

  /* ---------- UMA LINHA: menu · logo · lupa ----------
     Antes o cabeçalho ocupava três linhas no celular (logo, busca, menu).
     Agora é uma só, e a busca vive atrás da lupa. */
  .mh-in { gap: 8px; padding: 12px 14px; }

  .menu-btn { order: 1; flex: none; }
  .busca-btn { order: 3; flex: none; }
  .mh-title { order: 2; flex: 1; min-width: 0; display: flex; justify-content: center; }
  .brand { justify-content: center; min-width: 0; }
  .brand-txt { font-size: 21px; }
  .brand-txt em { font-size: .55rem; letter-spacing: .14em; }
  .brand-mark { width: 38px; height: 38px; font-size: 26px; }

  /* O campo de busca não aparece por padrão… */
  .search { display: none; order: 2; flex: 1 1 100%; }

  /* Botão da lupa, com a mesma linguagem do sanduíche */
  .busca-btn {
    display: grid; place-items: center;
    width: 46px; height: 46px; padding: 0;
    border: 2px solid var(--ink); border-radius: var(--r);
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background .15s, color .15s;
  }
  .busca-btn:hover, .busca-btn:focus-visible { background: var(--ink); color: var(--paper); }

  /* …e TOMA o lugar do menu e do logo quando ela clica na lupa. */
  body.buscando .search { display: flex; }
  body.buscando .menu-btn,
  body.buscando .mh-title,
  body.buscando .busca-btn { display: none; }
  body.buscando .search input { font-size: 1rem; padding: 12px 14px; }
}

/* --------------------- o sanduíche, no mobile ------------------------ */

.menu-btn {
  gap: 5px; align-content: center;
  width: 46px; height: 46px; padding: 12px;
  border: 2px solid var(--ink); border-radius: var(--r);
  background: transparent; cursor: pointer; flex: none;
}
.menu-btn span {
  display: block; height: 2.5px; background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.menu-btn:hover { background: var(--ink); }
.menu-btn:hover span { background: var(--paper); }
.menu-btn[aria-expanded="true"] { background: var(--ink); }
.menu-btn[aria-expanded="true"] span { background: var(--paper); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu {
  border-top: 2px solid var(--rule);
  background: var(--card);
  padding: 8px 20px 16px;
  display: grid; gap: 2px;
  max-width: var(--wrap); margin: 0 auto;
}
.menu[hidden] { display: none; }
.menu > a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 8px; border-bottom: 1px solid var(--rule);
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
}
.menu > a:hover { color: var(--hot); padding-left: 14px; }
.menu-ico { flex: none; color: var(--ink-2); }
.menu > a:hover .menu-ico { color: var(--hot); }
.menu-sub { padding: 16px 8px 4px; }
.menu-sub > span {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--soft);
}
.menu-sociais { display: flex; gap: 10px; margin-top: 12px; }
.menu-sociais a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 2px solid var(--rule-2); border-radius: 50%;
  color: var(--ink-2); transition: all .15s;
}
.menu-sociais a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Botão de WhatsApp: o ícone ajuda a reconhecer antes de ler */
.btn.zap { gap: 12px; }
.btn.zap svg { flex: none; }

/* ============================ SELO DA CASA =========================
   "Criado com Entelecy" — o mesmo selo das outras páginas da casa.    */

.ent-selo {
  position: fixed; right: 12px; bottom: 12px; z-index: 900;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(20,16,13,.42); color: #fff;
  font-family: var(--body); font-size: 12px; font-weight: 500;
  letter-spacing: .02em; text-decoration: none;
  opacity: .78; text-shadow: 0 1px 2px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.ent-selo:hover { opacity: 1; transform: translateY(-1px); }
.ent-selo img { display: block; height: 18px; width: auto; }

/* Em tela estreita o selo é menor e mais discreto — ele flutua sobre o
   conteúdo, e no celular o espaço é curto. */
@media (max-width: 640px) {
  .ent-selo { padding: 3px 8px; font-size: 10px; }
  .ent-selo img { height: 15px; }
}

/* ============================ BRAND SEAL ===========================
   Monograma na cor da marca. Não é o logo de ninguém — é a inicial em
   tipografia de sinalização, o que dá a leitura visual sem usar ativo
   de terceiro. brand_logo, se houver, tem precedência.               */

.brand-seal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0;
  /* Sem contorno: o logo da marca já é o selo. A cápsula em volta era
     moldura dentro de moldura — ruído. */
  border: none;
  background: transparent;
  max-width: 100%;
}
/* O badge empilha monograma e logo: o monograma é a base, o logo vai por cima.
   Se o logo não carregar (offline, bloqueador, serviço fora), o onerror marca
   .falhou e ele some — o monograma reaparece. Nunca fica buraco. */
.brand-badge {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--brand, #333);
  border-radius: 999px;
  overflow: hidden;
}
.brand-mono {
  display: grid; place-items: center;
  color: var(--on, #fff);
  font-family: var(--display); font-weight: 400;
  letter-spacing: -.02em; line-height: 1;
}
.brand-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* SEM fundo e SEM arredondamento. O favicon da marca já vem com o próprio
     quadrado branco embutido — e somado a um fundo branco nosso, virava uma
     moldura visível sobre o papel. O `multiply` faz o branco do arquivo
     desaparecer no fundo claro, deixando só a marca. */
  mix-blend-mode: multiply;
}
.brand-img.falhou { display: none; }

.brand-seal .brand-badge { width: 24px; height: 24px; }
.brand-seal em {
  font-family: var(--mono); font-style: normal;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.brand-seal .brand-img { height: 22px; width: auto; border-radius: 3px; }

.brand-seal.sm { padding: 2px 8px 2px 2px; gap: 6px; }
.brand-seal.sm .brand-badge { width: 20px; height: 20px; }
.brand-seal.sm .brand-mono { font-size: 11px; }
.brand-seal.sm em { font-size: .6rem; }

.brand-seal.md .brand-badge { width: 26px; height: 26px; }
.brand-seal.md .brand-mono { font-size: 13px; }
.brand-seal.md em { font-size: .68rem; }

.brand-seal.lg { padding: 0; margin-bottom: 10px; gap: 12px; }
.brand-seal.lg .brand-badge { width: 46px; height: 46px; }
/* O nome da marca é uma ASSINATURA, não um rótulo: fonte de peso alto e
   espaçamento aberto. Em mono miúdo ele parecia legenda de rodapé. */
.brand-seal.lg em {
  font-family: var(--body); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .16em;
  color: var(--ink);
}

/* ------------------------- faixa giratória -------------------------
   UMA linha só. O conteúdo é paginado por JS (public/faixa.js) e troca de
   bloco a cada 1,5 s — virada de página, não deslize contínuo.          */

.faixa {
  margin: 28px 0 0;
  display: flex; gap: 8px;
  align-items: center;

  /* A faixa ROLA. Fica parada até alguém puxar — não troca sozinha. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;      /* o encaixe ajuda sem prender */

  /* O próximo item aparece cortado na borda DE PROPÓSITO: é o convite visual
     para puxar. Por isso não há máscara de desvanecimento aqui. */
  padding-bottom: 6px;                /* espaço para o fio da barra */
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.faixa::-webkit-scrollbar { height: 6px; }
.faixa::-webkit-scrollbar-track { background: transparent; }
.faixa::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 3px; }
.faixa:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }

.faixa [data-item] { scroll-snap-align: start; }

/* A segunda faixa (marcas) é separada da primeira (lojas) por um fio */
.faixa + .faixa { margin-top: 4px; }
.faixa:has(+ .faixa) { padding-bottom: 20px; border-bottom: 2px solid var(--rule); }
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 14px 4px 4px;
  border: 2px solid var(--rule-2); border-radius: 999px;
  background: var(--card);
  white-space: nowrap; flex: none;
  user-select: none;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.brand-chip:hover { transform: translateY(-2px); border-color: var(--ink); }
.brand-chip .brand-badge { width: 32px; height: 32px; }
.brand-chip .brand-mono { font-size: 15px; }
.brand-chip .brand-img { padding: 2px; }
.brand-chip em {
  font-family: var(--mono); font-style: normal; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2);
}
.brand-chip i {
  font-family: var(--mono); font-style: normal; font-size: .58rem;
  color: var(--soft); padding-left: 2px;
}
.brand-chip.on {
  background: var(--ink); border-color: var(--ink);
}
.brand-chip.on em, .brand-chip.on i { color: var(--paper); }
.brand-chip.on .brand-badge { box-shadow: 0 0 0 2px var(--paper); }

/* ============================= FILTERS ============================= */

.filters { margin: 32px 0 20px; display: flex; flex-direction: column; gap: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 16px; border: 2px solid var(--rule-2);
  border-radius: var(--r); color: var(--ink-2); transition: all .13s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.ghost { border-style: dashed; }

/* ============================== GRID =============================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 20px; padding-bottom: 64px;
}

/* ============================== CARD =============================== */

.card {
  display: flex; flex-direction: column;
  background: var(--card); border: 2px solid var(--rule);
  border-radius: var(--r2); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.card:hover {
  transform: translateY(-4px); border-color: var(--ink);
  box-shadow: 0 2px 0 var(--rule), 0 18px 40px -24px rgba(20,18,14,.5);
}

.card-img {
  position: relative; aspect-ratio: 1 / 1; background: #fff;
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 2px solid var(--rule);
}

/* A imagem é POSICIONADA na caixa, não dimensionada por porcentagem.
   Motivo (medido): `height: 100%` não resolve contra uma caixa cuja altura vem
   de `aspect-ratio` — a imagem então assume a altura natural (quadrada) e o
   `overflow: hidden` corta. Era invisível com caixa 1:1 (quadrado em quadrado
   coincidem) e apareceu no card em destaque, 2:1. Com `inset: 0` a altura é
   definida e qualquer proporção de caixa funciona. */
.card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .35s;
}
.card:hover .card-img img { transform: scale(1.045); }
.noimg { font-family: var(--mono); font-size: .7rem; color: var(--soft); }

/* Tag da loja: texto ESCURO sobre a cor — branco dava 2.82:1 */
.tag {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; background: var(--store, #333); color: #14120E;
}
.tag.solid { position: static; display: inline-block; border-radius: var(--r); }
.tag.sm { font-size: .62rem; padding: 4px 8px; border-radius: 3px; position: static; display: inline-block; }

.sticker {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--display); font-size: 22px; line-height: 1;
  padding: 8px 12px; background: var(--hot); color: var(--on-hot);
  border-radius: var(--r); transform: rotate(4deg);
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.sticker.big { font-size: 38px; padding: 12px 20px; top: 20px; right: 20px; }
.sticker::before { content: ''; position: absolute; inset: 3px; border: 1.5px dashed rgba(255,255,255,.45); border-radius: 2px; }

.cupom-tag {
  position: absolute; left: 12px; top: 12px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 12px; background: var(--acid); color: #1A1A0A;
  border-radius: 3px; transform: rotate(-2deg);
}

.card-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.card-body h3 {
  font-size: .95rem; font-weight: 600; line-height: 1.32;
  margin: 0; letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- preço: tipografia de etiqueta ---- */
.price { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.price s { font-size: .8rem; color: var(--soft); }
.price s.ghost { opacity: 0; }
.price strong {
  font-family: var(--display); font-weight: 400;
  font-size: 40px; line-height: .9; letter-spacing: -.015em;
  color: var(--hot); display: flex; align-items: flex-start; gap: 4px;
}
.price strong i { font-style: normal; font-size: .42em; margin-top: .28em; color: var(--ink-2); font-family: var(--body); font-weight: 800; }
.price strong u { text-decoration: none; font-size: .5em; margin-top: .3em; }
.par { font-family: var(--mono); font-size: .72rem; color: var(--soft); }

/* ---- SHELF-LIFE: a assinatura ---- */
.shelf {
  position: relative; height: 28px;
  border: 1.5px solid var(--rule-2); border-radius: 3px;
  overflow: hidden; background: var(--paper-2); margin-top: 4px;
}
.shelf-fill { height: 100%; transition: width .6s cubic-bezier(.2,.8,.2,1); }
/* A validade é informação de APOIO — e o listrado era ruído: textura de alta
   frequência que puxava o olho sem dizer nada e competia com o botão vermelho.
   Agora é barra lisa: discreta enquanto há tempo, quente quando aperta. */
.shelf.ok   .shelf-fill { background: var(--rule-2); }
.shelf.warn .shelf-fill { background: var(--warn); }
.shelf.crit .shelf-fill { background: var(--crit); }
.shelf-lbl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #14120E;
  text-shadow: 0 0 4px rgba(255,255,255,.85), 0 0 8px rgba(255,255,255,.85);
}

/* ------------------------- featured (ritmo) ------------------------- */
/* O card em destaque ocupa 2 colunas. A caixa da foto é 4:3 — numa foto de
   produto (quadrada) isso mostra o produto inteiro, centrado, com faixas
   laterais discretas.

   NOTA (medido): não dá para usar `flex-direction: row` com `aspect-ratio` na
   caixa da foto — num flex em linha o item ESTICA na vertical por padrão, o que
   anula o `aspect-ratio` e deixa a caixa alta e estreita. */
.grid .card.featured { grid-column: span 2; }
.grid .card.featured .card-img { aspect-ratio: 4 / 3; }
.grid .card.featured .card-body h3 { font-size: 1.15rem; -webkit-line-clamp: 3; }
.grid .card.featured .price strong { font-size: 54px; }
@media (max-width: 720px) {
  .grid .card.featured { grid-column: span 1; }
  .grid .card.featured .card-img { aspect-ratio: 1 / 1; }
}

/* ============================ PRODUCT ============================== */

.crumbs {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soft); padding: 0;
}
.crumbs span { padding: 0 8px; }
/* padding generoso: o alvo de clique precisa passar de 24px em ambas as direções */
.crumbs a { display: inline-block; padding: 8px 6px; margin: 0 -6px; }
.crumbs a:hover { color: var(--hot); }
.crumbs span { padding: 0 4px; }

/* A IMAGEM acompanha a altura dos DOIS blocos da direita (preço + grupo).
   Com `align-items: start`, cada coluna ficava do seu tamanho e a imagem
   terminava muito antes — a imagem era um selo, não um painel.
   Com `stretch`, ela ocupa a mesma faixa vertical que a coluna de informação. */
/* Medido na referência (896px): imagem 558px · coluna 311px → 1,8:1, com vão
   de 11px. Antes era 1,05:1 com 40px de vão — vão largo demais e imagem
   pequena demais. A imagem precisa DOMINAR a página; a coluna da direita é
   um trilho estreito de decisão (preço → CTA → grupo). */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-bottom: 40px;
}
.p-media {
  position: relative; background: #fff; border: 2px solid var(--rule);
  border-radius: var(--r2); display: grid; place-items: center; overflow: hidden;
  /* Sem `aspect-ratio`: no desktop ela ESTICA até a altura da coluna de
     informação. O quadrado fica só no celular (colunas empilhadas). */
  height: 100%; min-height: 380px;
  /* Respiro interno: sem ele o produto encostava na borda da moldura. */
  padding: 28px;
}
/* UMA regra só. Havia duas se anulando — a segunda forçava 100%×100% e
   deformava o produto. */
.p-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* O selo da loja vai para o CANTO da imagem — antes ficava solto no rodapé,
   centralizado e sem relação com nada. */
.p-media .tag.solid {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  /* `bottom: auto` é OBRIGATÓRIO: a regra base do .tag define `bottom: 0`, e
     com `top` E `bottom` o selo estica de cima a baixo — virava uma tarja
     laranja cobrindo a lateral da imagem. */
  bottom: auto; right: auto;
}

.p-info h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 30px); line-height: .96;
  letter-spacing: -.015em; margin: 10px 0 10px;
}
.hook { font-family: var(--mono); font-size: .875rem; letter-spacing: .04em; color: var(--hot); text-transform: uppercase; margin: 0 0 20px; }

.price-rail {
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding: 10px 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 10px;
}
.pr-from span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--soft); display: block; }
.pr-from s { font-size: 1.2rem; color: var(--soft); }
.pr-now { display: flex; align-items: flex-start; gap: 8px; }
.pr-now > span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--soft); margin-top: 16px; }
.pr-now strong {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); line-height: .9;
  letter-spacing: -.02em; color: var(--hot);
  display: flex; align-items: flex-start; gap: 4px;
}
.pr-now strong i { font-style: normal; font-family: var(--body); font-weight: 800; font-size: .3em; margin-top: .34em; color: var(--ink-2); }
.pr-now strong u { text-decoration: none; font-size: .48em; margin-top: .3em; }
.pr-par { font-family: var(--mono); font-size: .70rem; color: var(--ink-2); }

/* O cupom é um BOTÃO: copiar é o que a pessoa quer fazer com ele. */
.coupon {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 420px;
  background: var(--acid); color: #1A1A0A;
  padding: 5px 18px; border-radius: var(--r);
  font-family: var(--mono); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 8px;
  border: 2px dashed #1A1A0A; cursor: pointer;
  transition: transform .12s, background .15s;
}
.coupon:hover { transform: translateY(-1px); }
.coupon b { font-size: 1.05rem; letter-spacing: .04em; }
.coupon-acao {
  font-size: .68rem; letter-spacing: .14em;
  border: 1.5px solid #1A1A0A; border-radius: 4px; padding: 4px 9px;
  white-space: nowrap;
}
.coupon.copiado { background: var(--ok); color: #fff; border-color: var(--ok); }
.coupon.copiado .coupon-acao { border-color: #fff; }
.coupon-dica { margin: 0 0 16px; }

/* Card do grupo, DENTRO da coluna de informação — abaixo do preço e do CTA.
   Ele divide a largura com a imagem do produto, então tudo aqui é medido para
   caber nessa coluna: fontes menores, QR menor, respiro curto.            */
/* DOIS ANDARES: em cima o convite ocupando a LARGURA TOTAL, embaixo a
   divisão em duas colunas (instruções à esquerda, QR à direita).
   Antes o cabeçalho ficava preso na coluna da esquerda e o desenho não era
   esse. */
.grupo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  grid-template-areas: 'topo topo' 'corpo qr';
  gap: 12px 16px;
  border: 2px solid var(--ink); border-radius: var(--r2);
  background: var(--card); padding: 14px 16px; margin-top: 24px;
  align-items: start;
}
.gc-topo {
  grid-area: topo;
  border-bottom: 1.5px solid var(--rule);
  padding-bottom: 9px;
}
.gc-topo h2 {
  font-family: var(--display); font-weight: 400; font-size: 22px;
  text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 3px;
}
.gc-topo > p { color: var(--soft); font-size: .8rem; line-height: 1.35; margin: 0; }
.gc-corpo { grid-area: corpo; min-width: 0; }

/* Os passos ficam enxutos: nesta largura, cada linha conta. */
.gc-passos { list-style: none; counter-reset: passo; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
/* Número na coluna 1; o título na linha de cima e o apoio na de baixo,
   ambos alinhados com o TÍTULO — como na referência. Antes tudo ficava na
   mesma linha com `nowrap`, e o apoio saía cortado ("ou toque ...").
   Texto cortado é pior que uma linha a mais. */
.gc-passos li {
  counter-increment: passo; display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 1px 8px; align-items: baseline; line-height: 1.25;
}
.gc-passos li::before {
  content: counter(passo); display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--acid); color: #1A1A0A;
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  grid-row: span 2;
}
/* Os passos são DUAS COLUNAS compactas: título e apoio na mesma faixa
   horizontal, em vez de empilhados. É o que derruba a altura do bloco
   (comparar as duas imagens de referência: mesmo texto, altura menor). */
.gc-passos { gap: 4px; margin-bottom: 10px; }

.gc-passos b { grid-column: 2; font-size: .76rem; font-weight: 600; }
.gc-passos span { grid-column: 2; font-size: .68rem; color: var(--soft); }

.gc-qr {
  grid-area: qr;
  display: grid; gap: 6px; justify-items: center; align-content: start;
  border: 2px dashed var(--rule-2); border-radius: var(--r);
  padding: 10px; background: #fff;
}
.gc-qr img { display: block; width: 100%; height: auto; max-width: 104px; }
.gc-qr span {
  font-family: var(--mono); font-size: .52rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soft); text-align: center; line-height: 1.3;
}
.grupo-card .btn.zap { font-size: 14px; padding: 10px 14px; }

/* Na coluna única (celular) o card volta a respirar. */
@media (max-width: 900px) {
  .grupo-card { grid-template-columns: 1fr 150px; gap: 20px; padding: 20px; margin-top: 28px; }
  .gc-txt h2 { font-size: 25px; }
  .gc-txt > p { font-size: .9rem; }
  .gc-passos b { font-size: .88rem; }
  .gc-passos span { font-size: .78rem; }
  .gc-qr img { max-width: 132px; }
}
@media (max-width: 560px) {
  .grupo-card { grid-template-columns: 140px 1fr; gap: 14px; padding: 16px; }
  .gc-qr { order: -1; }
  .gc-txt h2 { font-size: 19px; }
  .gc-passos { display: none; }        /* no aperto, o botão basta */
}
.ship { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); margin: 0 0 16px; }

.p-info .shelf { height: 32px; margin: 10px 0; }
.p-info .shelf-lbl { font-size: .68rem; }
.p-info .btn.xl { margin-bottom: 8px; }
.p-info .fine { margin: 0 0 12px; }

/* Textos descritivos da coluna de informação: 14px (o body herda 16px, e
   nesta coluna — que é um trilho estreito de decisão — 16 fica pesado). */
.p-info p,
.p-info .ship { font-size: .875rem; }

/* A nota do botão ("Você vai para a Mercado Livre…") é uma linha só de
   rodapé: fonte menor e sem quebra, para não virar duas linhas e empurrar
   o resto da coluna. */
.p-info .fine { font-size: .72rem; margin: 6px 0 12px; }
.p-info .fine.coupon-dica { font-size: .72rem; }

.sec {
  font-family: var(--display); font-weight: 400; font-size: 30px;
  text-transform: uppercase; letter-spacing: -.01em;
  border-top: 3px solid var(--ink); padding-top: 16px; margin: 20px 0;
}

/* ======================= PÁGINAS DE COLEÇÃO ======================== */

.colecao-topo { padding: 8px 0 24px; border-bottom: 3px solid var(--ink); margin-bottom: 26px; }
.colecao-topo h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 7vw, 68px); line-height: .92;
  text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 8px;
}
.colecao-topo p { color: var(--soft); margin: 0; max-width: 62ch; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px; padding-bottom: 64px;
}
.cat-card {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 2px solid var(--rule); border-radius: var(--r2);
  background: var(--card);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cat-card:hover {
  transform: translateY(-3px); border-color: var(--ink);
  box-shadow: 0 14px 30px -22px rgba(20,18,14,.5);
}
.cat-n {
  font-family: var(--display); font-size: 30px; line-height: 1;
  min-width: 46px; text-align: center;
  color: var(--hot);
}
.cat-card b { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; flex: 1; }
.cat-seta { color: var(--soft); font-size: 1.1rem; transition: transform .15s; }
.cat-card:hover .cat-seta { transform: translateX(4px); color: var(--hot); }

/* ============================== EMPTY ============================== */

.empty { text-align: center; padding: 80px 20px; border: 2px dashed var(--rule-2); border-radius: var(--r2); margin-bottom: 64px; }
.empty b { font-family: var(--display); font-size: 30px; font-weight: 400; text-transform: uppercase; display: block; margin-bottom: 8px; }
.empty p { color: var(--soft); margin: 0; }

.gone { text-align: center; padding: 80px 20px; }
.gone-mark { font-size: 64px; display: block; margin-bottom: 8px; }
.gone h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 86px); text-transform: uppercase; margin: 0 0 12px; letter-spacing: -.02em; }
.gone p { color: var(--soft); max-width: 52ch; margin: 0 auto 28px; }

/* ============================== FOOT =============================== */

.foot { border-top: 3px solid var(--ink); margin-top: 40px; background: var(--paper-2); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 32px 20px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot b { font-family: var(--display); font-weight: 400; font-size: 20px; text-transform: uppercase; display: block; margin-bottom: 8px; }
.foot p { font-size: .76rem; color: var(--soft); margin: 0; line-height: 1.6; }
.foot-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.foot-meta span { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }

.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: flex-start; }
.foot-nav a {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soft); padding: 4px 0;
}
.foot-nav a:hover { color: var(--hot); }

/* ============================================================== */
/*                            PAINEL                              */
/* ============================================================== */

body.panel { background: var(--paper); background-image: none; }

.ptop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 3px solid var(--ink);
  background: var(--paper); position: sticky; top: 0; z-index: 40;
}
.ptop nav { display: flex; gap: 24px; }
.ptop nav a {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soft); display: inline-block; padding: 8px 0;
}
.ptop nav a:hover { color: var(--hot); }

.pwrap { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }

/* Barra de navegação entre ofertas. Gruda no topo: ao percorrer itens, os
   controles de voltar/avançar continuam à mão sem rolar de volta. */
.pnav {
  position: sticky; top: 79px; z-index: 30;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 10px 24px;
  border-bottom: 2px solid var(--rule);
  background: var(--paper);
}
.pn-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-2);
  padding: 8px 12px; border: 1.5px solid var(--rule-2); border-radius: var(--r);
  transition: all .14s;
}
.pn-item:hover { border-color: var(--ink); color: var(--ink); background: var(--card); }
.pn-item.off { color: var(--rule-2); border-color: var(--rule); cursor: default; }
.pn-item.off:hover { border-color: var(--rule); color: var(--rule-2); background: transparent; }
.pn-pos {
  margin-left: auto; font-family: var(--mono); font-size: .68rem;
  color: var(--soft); letter-spacing: .08em;
}
@media (max-width: 640px) {
  .pnav { top: 0; padding: 8px 16px; gap: 4px; }
  .pn-item span { display: none; }        /* só as setas, no celular */
  .pn-item { padding: 9px 13px; font-size: .8rem; }
  .pn-pos { font-size: .62rem; }
}

.ptitle { font-family: var(--display); font-weight: 400; font-size: 38px; text-transform: uppercase; letter-spacing: -.01em; margin: 8px 0 4px; }

.flash {
  background: var(--acid); color: #1A1A0A; border: 2px solid var(--ink);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 20px;
  font-family: var(--mono); font-size: .78rem;
}

.metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px; background: var(--rule); border: 2px solid var(--rule);
  border-radius: var(--r2); overflow: hidden; margin-bottom: 28px;
}
.m { background: var(--card); padding: 16px; }
.m span { font-family: var(--display); font-size: 40px; line-height: 1; display: block; letter-spacing: -.02em; }
.m label { font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); display: block; margin-top: 8px; }
.m.alert span { color: var(--warn); }
.m.good span { color: var(--ok); }

.addbox { border: 2px solid var(--ink); border-radius: var(--r2); padding: 24px; margin-bottom: 24px; background: var(--card); }
.addbox h2 { font-family: var(--display); font-weight: 400; font-size: 24px; text-transform: uppercase; margin: 0 0 16px; }
.addbox form { display: flex; gap: 12px; flex-wrap: wrap; }
.addbox input[type=url] {
  flex: 1 1 340px; min-width: 0; font-family: var(--body); font-size: .95rem;
  padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.addbox input[type=url]:focus { outline: none; box-shadow: 0 0 0 3px var(--acid); }
.addbox .fine { margin: 12px 0 0; }

/* Importação em lote (trazer o catálogo antigo) */
.importar {
  border: 2px dashed var(--rule-2); border-radius: var(--r2);
  padding: 16px 20px; margin-bottom: 24px; background: var(--card);
}
.importar summary {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--soft); cursor: pointer; padding: 6px 0;
}
.importar summary:hover { color: var(--ink); }
.importar[open] summary { color: var(--ink); margin-bottom: 8px; }
.importar textarea {
  width: 100%; font-family: var(--mono); font-size: .78rem; line-height: 1.6;
  padding: 12px 14px; border: 2px solid var(--rule-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); resize: vertical;
}
.importar textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--acid); }
.importar .row { margin-top: 12px; }

.filters form { display: flex; gap: 8px; flex-wrap: wrap; }
.filters select, .filters input[type=search] {
  font-family: var(--mono); font-size: .76rem; padding: 8px 12px;
  border: 2px solid var(--rule-2); border-radius: var(--r);
  background: var(--card); color: var(--ink); text-transform: uppercase;
}
.filters button {
  font-family: var(--mono); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .08em; padding: 8px 16px; border: 2px solid var(--ink);
  border-radius: var(--r); background: transparent; color: var(--ink); cursor: pointer;
}
.filters button:hover { background: var(--ink); color: var(--paper); }

.tablewrap { border: 2px solid var(--rule); border-radius: var(--r2); overflow: hidden; background: var(--card); margin-bottom: 40px; }
table.offers { width: 100%; border-collapse: collapse; }
table.offers th {
  text-align: left; font-family: var(--mono); font-size: .64rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--soft);
  padding: 12px 16px; border-bottom: 2px solid var(--rule); background: var(--paper-2);
}
table.offers td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
table.offers tr:last-child td { border-bottom: none; }
table.offers tr:hover td { background: var(--paper-2); }
.num { text-align: right; }
table.offers .empty { border: none; padding: 40px; }

.ot { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.ot img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--rule); border-radius: 3px; background: #fff; flex: none; }
.ot img.ph { background: var(--paper-2); }
.ot-t { display: flex; flex-direction: column; gap: 4px; }
.ot-t b { font-size: .88rem; font-weight: 600; line-height: 1.3; }
.warn { font-family: var(--mono); font-size: .68rem; color: var(--warn); }

.pill {
  font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .08em; padding: 4px 8px; border-radius: 3px;
  border: 1.5px solid currentColor; margin-right: 8px;
  display: inline-block;
}
.pill.active  { color: var(--ok); }
.pill.expired { color: var(--soft); }
.pill.soldout { color: var(--crit); }
.pill.draft   { color: var(--warn); }

.act { display: flex; gap: 12px; }
.act a {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--soft); display: inline-block; padding: 8px 4px;
}
.act a:hover { color: var(--hot); }

.conns h2, .creds h2 { font-family: var(--display); font-weight: 400; font-size: 24px; text-transform: uppercase; margin: 0 0 8px; }
.cred {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 2px solid var(--rule); border-left: 6px solid var(--store, #333);
  border-radius: var(--r); background: var(--card); margin-top: 8px;
}
.cred b { font-size: .9rem; }
.cred .mut { flex: 1; }
.cred a { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; color: var(--hot); display: inline-block; padding: 8px 0; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #666; }
.dot.on { background: #2E7D32; box-shadow: 0 0 0 3px rgba(46,125,50,.18); }
.dot.off { background: #999; }
.dot.browser { background: #B26A00; box-shadow: 0 0 0 3px rgba(178,106,0,.18); }

.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 20px; }
.credbox { border: 2px solid var(--rule); border-top: 6px solid var(--store, #333); border-radius: var(--r2); padding: 20px; background: var(--card); }
.credbox h3 { margin: 0 0 12px; }
/* Passo a passo dentro do cartão de conexão (lojas sem API) */
.cred-passos {
  list-style: none; counter-reset: cp; margin: 14px 0; padding: 0;
  display: grid; gap: 10px;
}
.cred-passos li {
  counter-increment: cp; display: grid; grid-template-columns: 24px 1fr;
  gap: 10px; align-items: baseline; font-size: .9rem;
}
.cred-passos li::before {
  content: counter(cp); display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--acid); color: #1A1A0A;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
}
.cred-passos a { color: var(--hot); text-decoration: underline; }

.credbox .st { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); margin-bottom: 16px; }
.credbox label { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.credbox input, .editform input, .editform select {
  display: block; width: 100%; margin-top: 4px; font-family: var(--body); font-size: .92rem;
  padding: 12px; border: 2px solid var(--rule-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink);
}
.credbox input:focus, .editform input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--acid); }
.credbox .row, .editform .row { display: flex; gap: 12px; margin-top: 8px; }

.editgrid { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; }
.edit-aside .preview { width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff; border: 2px solid var(--rule); border-radius: var(--r2); margin-bottom: 12px; }

/* Sem foto: diz o que falta em vez de mostrar imagem quebrada */
.preview.vazio {
  display: grid; place-content: center; justify-items: center; gap: 8px;
  background: var(--paper-2); border-style: dashed; text-align: center; padding: 20px;
}
.preview.vazio span {
  font-family: var(--display); font-size: 20px; text-transform: uppercase;
  letter-spacing: .01em; color: var(--soft);
}
.preview.vazio em { font-family: var(--mono); font-size: .68rem; font-style: normal; color: var(--soft); }

/* Upload da foto: o label embrulha um input escondido — clicar abre o seletor */
.upload { display: block; margin-bottom: 12px; }
.upload .btn { cursor: pointer; }
.edit-aside #recado { margin: 0 0 12px; }
.editform { border: 2px solid var(--rule); border-radius: var(--r2); padding: 24px; background: var(--card); }
.editform label { display: block; margin-bottom: 16px; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--soft); }
.editform label em { font-family: var(--body); font-style: normal; text-transform: none; letter-spacing: 0; color: var(--rule-2); font-size: .74rem; }
.editform .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Ação destrutiva: fica ao lado do salvar, mas visivelmente diferente —
   contorno em vez de massa, e a cor de alerta no texto. */
.btn.perigo { color: var(--crit); border-color: var(--crit); }
.btn.perigo:hover { background: var(--crit); border-color: var(--crit); color: #fff; }

/* Larguras médias: 1,8:1 deixa a coluna com ~300px, e aí o conteúdo dela fica
   ALTO demais — a imagem esticava até 1.100px. Aqui a proporção sossega e a
   altura da imagem ganha teto. O card do grupo empilha (QR embaixo) porque
   não cabe lado a lado numa coluna estreita. */
@media (max-width: 1080px) and (min-width: 761px) {
  .product { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
  .p-media { max-height: 640px; }
  /* O QR fica AO LADO do texto, pequeno. Empilhado em cima ele dominava o
     card — virava a primeira coisa que o olho encontrava, e não é. */
  .grupo-card { grid-template-columns: minmax(0, 1fr) 92px; gap: 14px; }
  .gc-qr { justify-self: end; align-self: start; }
  .gc-qr img { max-width: 84px; }
  .gc-qr span { font-size: .46rem; }
}

/* A referência mostra DUAS colunas a 896px — então o ponto de empilhar fica
   abaixo disso. Em 900 o layout se desfazia justo na largura de referência. */
@media (max-width: 760px) {
  /* Empilhado: a imagem volta a ser quadrada e com altura própria. */
  .product { grid-template-columns: 1fr; gap: 24px; }
  .p-media { height: auto; min-height: 0; aspect-ratio: 1/1; }
  .editgrid { grid-template-columns: 1fr; }
  .group-band { flex-direction: column; align-items: flex-start; }
}
/* --------- PAINEL NO CELULAR: a tabela vira CARTÃO ---------
   Uma tabela de 5 colunas não cabe em 390px: as colunas da direita ficam
   fora da tela e a linha aparece cortada. No celular, cada oferta vira um
   bloco empilhado, e o `data-rotulo` da célula diz o que cada número é. */
@media (max-width: 780px) {
  .tablewrap { border: none; background: transparent; }
  table.offers, table.offers tbody, table.offers tr, table.offers td { display: block; width: 100%; }
  table.offers thead { display: none; }              /* os rótulos vêm nas células */
  table.offers tr {
    border: 2px solid var(--rule); border-radius: var(--r2);
    background: var(--card); margin-bottom: 12px; padding: 4px 0;
  }
  table.offers tr:hover td { background: transparent; }
  table.offers td {
    border-bottom: none; padding: 8px 14px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  }
  table.offers td::before {
    content: attr(data-rotulo);
    font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--soft); flex: none;
  }
  /* o produto é a manchete do cartão: sem rótulo, ocupando a linha toda */
  table.offers td[data-rotulo="produto"] { padding: 12px 14px 8px; }
  table.offers td[data-rotulo="produto"]::before { display: none; }
  table.offers td[data-rotulo="produto"] .ot { min-width: 0; }
  table.offers td[data-rotulo="produto"] .ot-t b { font-size: .95rem; }
  table.offers td[data-rotulo="ações"] {
    border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 10px;
    justify-content: flex-start; gap: 20px;
  }
  table.offers td[data-rotulo="ações"]::before { display: none; }
  table.offers td.num { text-align: right; }
  table.offers .empty { border: 2px dashed var(--rule-2); border-radius: var(--r2); }
}

@media (max-width: 640px) {
  /* Chips compactos: cabem mais por página e a rotação fica mais ágil. */
  .brand-chip { padding: 3px 10px 3px 3px; gap: 6px; }
  .brand-chip .brand-badge { width: 26px; height: 26px; }
  .brand-chip .brand-mono { font-size: 12px; }
  .brand-chip em { font-size: .58rem; letter-spacing: .04em; }
  .brand-chip i { font-size: .52rem; }
  .faixa { margin-top: 22px; }

  .mh-in { flex-wrap: wrap; }
  .search { flex: 1 1 100%; }
  .brand-txt { font-size: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .price strong { font-size: 32px; }
  .pwrap { padding: 20px 16px 64px; }
  /* (a regra que escondia a coluna do PREÇO no celular morreu: ela existia
     quando a tabela ficava apertada. Agora cada oferta é um cartão, e o preço
     é justamente o que precisa aparecer.) */
  .foot-meta { align-items: flex-start; }
  .group-band { padding: 20px; }
}

/* ===================== SELO DE MARCA (reescrito) =====================
   Substitui as tentativas anteriores. É só LOGO + NOME, lado a lado, e
   nada em volta: sem cápsula, sem contorno, sem fundo, sem monograma.
   Cada camada que eu tinha posto antes virava moldura visível.

   O `mix-blend-mode: multiply` existe por um motivo específico: o favicon
   da marca vem com fundo branco embutido no arquivo. Sobre o papel creme,
   esse branco aparece como um quadrado claro. O multiply dissolve o branco
   no fundo e deixa só a marca.
   ===================================================================== */

.brand-seal,
.brand-seal.lg,
.brand-seal.sm,
.brand-seal.md {
  display: inline-flex; align-items: center;
  padding: 0; border: 0; background: none; border-radius: 0;
  max-width: 100%;
}
.brand-seal.lg { gap: 12px; margin: 0 0 14px; }
.brand-seal.sm { gap: 6px; }
.brand-seal.md { gap: 8px; }

/* O logo. Tamanho em cada variante; sem fundo, sem borda, sem sombra. */
.brand-seal .brand-logo {
  display: block; flex: none;
  object-fit: contain;
  /* SEM `multiply`: ele dissolvia no papel os logos BRANCOS (Downy, Oral-B),
     que então desapareciam. O favicon é exibido como é. */
  background: none;
}
/* 32px, não 42: favicon é imagem pequena. Ampliado, ele borra — e um logo
   borrado é pior que um logo discreto. */
.brand-seal.lg .brand-logo { width: 32px; height: 32px; }
.brand-seal.md .brand-logo { width: 26px; height: 26px; }
.brand-seal.sm .brand-logo { width: 18px; height: 18px; }
/* Não carregou? some. O nome fica sozinho — e ele já identifica a marca. */
.brand-seal .brand-logo.sumiu { display: none; }

/* O nome. Archivo em peso alto e espaçamento aberto — assinatura, não legenda. */
.brand-seal em {
  font-family: var(--body); font-style: normal;
  text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  color: var(--ink); line-height: 1;
}
.brand-seal.lg em { font-weight: 800; font-size: .95rem; letter-spacing: .16em; }
.brand-seal.md em { font-weight: 800; font-size: .72rem; letter-spacing: .12em; color: var(--ink-2); }
.brand-seal.sm em { font-weight: 700; font-size: .62rem; letter-spacing: .1em; color: var(--ink-2); }

@media (max-width: 560px) {
  .brand-seal.lg .brand-logo { width: 34px; height: 34px; }
  .brand-seal.lg em { font-size: .8rem; letter-spacing: .12em; }
}

/* ===================== SELO DA LOJA =====================
   A LOJA afiliada (Amazon, Mercado Livre…), não a marca do produto.
   Estrutura idêntica à do selo de marca: logo + nome, nada em volta.
   ======================================================== */

.loja-seal {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none;
  max-width: 100%; margin: 0 0 5px;
}
.loja-seal .brand-logo {
  display: block; flex: none; object-fit: contain;
  width: 20px; height: 20px;
  /* Mesma razão do selo de marca: sem fundo, sem borda, sem sombra. O logo
     entra como é — o que vier do arquivo é o que aparece. */
  background: none;
}
.loja-seal .brand-logo.sumiu { display: none; }
.loja-seal em {
  font-family: var(--body); font-style: normal; font-weight: 800;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); line-height: 1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.loja-seal.sm { gap: 6px; margin: 0; }
.loja-seal.sm .brand-logo { width: 18px; height: 18px; }
.loja-seal.sm em { font-size: .62rem; letter-spacing: .1em; color: var(--ink-2); }

@media (max-width: 560px) {
  .loja-seal .brand-logo { width: 20px; height: 20px; }
  .loja-seal em { font-size: .62rem; letter-spacing: .1em; }
}


/* ===================== PÁGINA DE CUPONS =====================
   Filtro por loja com contagem, abas Recentes/Destaques, e uma LISTA de
   linhas horizontais — o cupom tem layout próprio, não é grade de produto.
   ============================================================ */

.cp-wrap { padding-top: 8px; padding-bottom: 60px; }

/* --- filtro por loja --- */
.cp-filtro { margin-bottom: 22px; }
.cp-filtro h2 {
  font-family: var(--body); font-weight: 800; font-size: 1.15rem;
  margin: 0 0 12px; letter-spacing: -.01em;
}
.cp-lojas { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.cp-loja {
  display: flex; align-items: center; gap: 10px; flex: none;
  border: 2px solid var(--rule); border-radius: var(--r2);
  background: var(--card); padding: 10px 16px 10px 10px;
  text-decoration: none; color: var(--ink);
  transition: border-color .14s, background .14s, transform .14s;
}
.cp-loja:hover { border-color: var(--ink); transform: translateY(-1px); }
.cp-loja.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cp-loja.on .cp-loja-txt em { color: var(--rule-2); }
.cp-loja-ico {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 2px solid var(--rule);
}
/* A imagem do logo é limitada SEMPRE — sem estas duas linhas ela renderiza
   no tamanho natural do arquivo (foi o que quebrou a página). */
.cp-loja-ico img { width: 26px; height: 26px; object-fit: contain; display: block; }
.cp-loja-ico.todas {
  background: var(--acid); color: #1A1A0A; border-color: var(--ink);
  font-family: var(--display); font-size: 20px;
}
.cp-loja-txt { display: grid; line-height: 1.2; }
.cp-loja-txt b { font-size: .86rem; font-weight: 700; }
.cp-loja-txt em {
  font-style: normal; font-family: var(--mono); font-size: .62rem;
  color: var(--soft); letter-spacing: .04em;
}

/* --- abas --- */
.cp-abas { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.cp-aba {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: .9rem;
  padding: 10px 20px; border-radius: 999px;
  border: 2px solid transparent; background: var(--paper-2);
  color: var(--ink-2); text-decoration: none;
  transition: background .14s, color .14s, border-color .14s;
}
.cp-aba svg { width: 17px; height: 17px; fill: currentColor; }
.cp-aba:hover { background: var(--acid); color: #1A1A0A; }
.cp-aba.on { background: var(--acid); color: #1A1A0A; border-color: var(--ink); }

/* --- a linha do cupom --- */
.cp-lista { display: grid; gap: 12px; }
.cp-cupom {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto 218px;
  grid-template-areas: 'esq meio quando dir';
  align-items: center; gap: 18px;
  background: var(--card); border: 2px solid var(--rule);
  border-radius: var(--r2); padding: 16px 18px;
  position: relative;
}
.cp-esq { grid-area: esq; display: grid; justify-items: center; gap: 6px; text-align: center; }
.cp-logo {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--rule); overflow: hidden;
  font-family: var(--display); font-size: 22px; color: var(--ink);
}
.cp-logo img { width: 30px; height: 30px; object-fit: contain; display: block; }
.cp-rotulo {
  font-family: var(--mono); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--soft); line-height: 1.35;
}
.cp-meio { grid-area: meio; min-width: 0; }
.cp-meio h3 {
  font-family: var(--body); font-weight: 800; font-size: 1.12rem;
  margin: 0 0 5px; letter-spacing: -.01em;
}
.cp-desc { color: var(--soft); font-size: .86rem; margin: 0 0 8px; line-height: 1.35; }
.cp-off {
  font-family: var(--body); font-weight: 800; font-size: 1.45rem;
  color: var(--hot); margin: 0; letter-spacing: -.015em;
}
.cp-quando {
  grid-area: quando; align-self: start;
  font-family: var(--mono); font-size: .66rem; color: var(--soft);
  white-space: nowrap; letter-spacing: .04em;
}

/* O conjunto é uma PÍLULA única: o botão escrito e, à direita, a cauda do
   código separada por um traço tracejado. */
.cp-dir {
  grid-area: dir; display: flex; align-items: center;
  min-width: 0; border-radius: 999px;
  background: var(--hot); overflow: hidden;
  transition: background .14s;
}
.cp-dir:hover { background: var(--hot-2); }
.cp-pegar {
  flex: 1; min-width: 0;
  font-family: var(--body); font-weight: 700; font-size: .95rem;
  padding: 13px 20px; border-radius: 999px;
  background: none; color: var(--on-hot);
  border: 0; cursor: pointer; white-space: nowrap;
  transition: color .14s;
}
.cp-dir:hover .cp-pegar { color: #14120E; }
.cp-dir:has(.cp-pegar.on) { background: var(--ok); }
.cp-pegar.on { color: #fff; }
.cp-codigo {
  flex: none; align-self: stretch;
  display: grid; place-items: center;
  padding: 0 16px 0 14px;
  border-left: 2px dashed rgba(255,255,255,.55);
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .02em; color: #fff; line-height: 1;
  white-space: nowrap; pointer-events: none;
}
.cp-dir:hover .cp-codigo { color: #14120E; border-left-color: rgba(20,18,14,.45); }

.cp-vazio {
  border: 2px dashed var(--rule-2); border-radius: var(--r2);
  padding: 46px 24px; text-align: center; background: var(--card);
}
.cp-vazio b { font-family: var(--display); font-weight: 400; font-size: 24px;
  text-transform: uppercase; display: block; margin-bottom: 8px; }
.cp-vazio p { color: var(--soft); margin: 0; }

@media (max-width: 900px) {
  .cp-cupom {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: 'esq meio' 'dir dir';
    gap: 14px; padding: 14px;
  }
  .cp-quando { grid-area: auto; position: absolute; top: 14px; right: 14px; }
  .cp-off { font-size: 1.3rem; }
  .cp-dir { grid-column: 1 / -1; }
  .cp-codigo { padding: 0 14px 0 12px; }
}
@media (max-width: 560px) {
  .cp-lojas { gap: 8px; }
  .cp-loja { padding: 8px 12px 8px 8px; }
  .cp-loja-txt b { font-size: .8rem; }
  .cp-meio h3 { font-size: 1rem; }
  .cp-desc { font-size: .8rem; }
  .cp-aba { padding: 9px 16px; font-size: .84rem; }
}


/* =============== O CAMPO DE DESCONTO É O ENVELOPE ===============
   Copiado da referência (kickstartbr.com.br/cupons):

     FECHADO:  [  Pegar cupom  (…INHO) ]   ← cápsula + círculo tracejado
     ABERTO:   [  ACHADINHO     (  ✓  ) ]   ← a palavra no lugar da ação

   O código NÃO vai para um campo novo abaixo: ele aparece NO PRÓPRIO CAMPO,
   que é o que a referência faz. O círculo tracejado da ponta é o "lacre" —
   vira confirmação quando abre.
   ================================================================ */

.cupom-envelope { position: relative; }

/* O círculo tracejado da ponta — o lacre do envelope. */
.ce-selo,
.cp-codigo {
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.75);
  font-family: var(--mono); font-weight: 700; letter-spacing: 0;
  white-space: nowrap; user-select: none;
  transition: background .3s, border-color .3s, transform .3s;
}
.ce-selo svg { width: 18px; height: 18px; fill: currentColor; }
/* O código mascarado fica BORRADO — é o conteúdo guardado. */
.cupom-envelope .cp-codigo { filter: blur(3.5px); }
/* Ao abrir, o borrão sai: a palavra aparece nítida. */
.cupom-envelope.aberto .cp-codigo { filter: none; }

/* O rótulo do botão troca de "Pegar cupom" para a PALAVRA do cupom. */
.cupom-envelope.aberto [data-rotulo] {
  font-size: 1.05rem; letter-spacing: .12em;
  animation: ce-aparece .4s cubic-bezier(.2,.9,.3,1.15) both;
}
@keyframes ce-aparece {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* A aba do envelope: cobre o campo fechado e levanta ao abrir. */
.ce-aba {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  transform-origin: top center;
  transition: transform .55s cubic-bezier(.45,.05,.2,1), opacity .25s ease .3s;
  background: linear-gradient(180deg, rgba(20,18,14,.18), rgba(20,18,14,.03) 70%, transparent);
  clip-path: polygon(-1% -1%, 101% -1%, 50% 72%);
}
.cupom-envelope.aberto .ce-aba {
  transform: rotateX(-155deg);
  opacity: 0;
}

/* ---- LISTA DE CUPONS ---- */
.cp-dir.cupom-envelope { border-radius: 999px; overflow: hidden; }
.cp-dir .ce-aba { border-radius: 999px; }
.cp-dir .cp-codigo {
  width: 58px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff; font-size: .62rem;
  margin-right: 5px;
}
.cp-dir.aberto { background: var(--ok); }
.cp-dir.aberto .cp-pegar { color: #fff; }
/* Depois de abrir, o círculo não repete o código — ele confirma. */
.cp-dir.aberto .cp-codigo {
  border-style: solid; border-color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.28);
  width: 44px; height: 44px;
  color: transparent;              /* esconde o texto mascarado */
  position: relative;
  filter: none;
}
.cp-dir.aberto .cp-codigo::after {
  content: '✓';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 1.15rem; line-height: 1;
}

/* ---- PÁGINA DO PRODUTO ---- */
.cupom-envelope .coupon { border-radius: var(--r); overflow: hidden; }
.cupom-envelope .ce-aba { border-radius: var(--r); }
.cupom-envelope.aberto .coupon { background: var(--ok); color: #fff; border-color: var(--ok); }
.cupom-envelope.aberto .coupon-acao { border-color: #fff; }
.cupom-envelope .ce-codigo {
  font-family: var(--display); font-size: 1.15rem; letter-spacing: .04em;
  filter: blur(3.5px); transition: filter .4s ease .15s;
}
.cupom-envelope.aberto .ce-codigo { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .ce-aba, .ce-selo, .cp-codigo, .ce-codigo, [data-rotulo] { transition: none; animation: none; }
  .cupom-envelope.aberto .ce-aba { display: none; }
}