/* Card padrão da Evidelo (28/10/2026, identidade aprovada pelo dono).
 *
 * Uma anatomia para todos os cards de produto — busca (.search-card),
 * catálogo/home (.product-card), achadinhos (.product-card--deal), vitrines
 * (.vit-card, com o estilo no próprio achadinhos.html) e catálogo novo (.cg-card):
 *   foto com selo (canto sup. esq.) e nota (canto inf. dir.)
 *   eyebrow em uma linha · título em 2 linhas · marca · prova social
 *   preço: rótulo, valor grande e UMA linha de contexto
 *   lojas (só na busca) com a melhor marcada · botão de largura total
 *
 * Carregado DEPOIS do evidelo-tailwind.css: os seletores repetem a
 * especificidade dos de lá para vencer pela ordem. */
:root {
  --card-bg: #fffdf9;
  --card-border: #e6e1d7;
  --card-radius: 18px;
  --card-shadow: 0 6px 20px rgb(40 32 16 / 0.05);
  --card-shadow-hover: 0 12px 30px rgb(40 32 16 / 0.1);
  --card-media-bg: linear-gradient(145deg, #fbfaf7, #f1eee7);
  --card-ink: #0b0f17;
  --card-muted: #5f6573;
  --card-good: #067647;
  --card-good-bg: #ecfdf3;
  --card-good-border: #abefc6;
  --card-warn: #b45309;
  --card-indigo: #5348e0;
}

/* ---------- selos e nota (compartilhados) ---------- */
.card-badge,
.evk-best-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .01em;
  line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgb(15 23 42 / 0.12);
}
.card-badge--best, .evk-best-badge { background: #15803d; color: #fff; }
.card-badge--pick { background: var(--card-indigo); color: #fff; }

/* ======================= BUSCA ======================= */
.search-page .search-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.search-page .search-card:hover { box-shadow: var(--card-shadow-hover); }
.search-page .search-card.evk-best { outline: 0; border: 2px solid #16a34a; box-shadow: 0 8px 24px rgb(22 163 74 / 0.14); }
.search-page .search-card__media { background: var(--card-media-bg); border-color: #efebe3; }
.search-page .search-card__badges {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none;
}
.search-page .search-card__badges:empty { display: none; }
.search-page .search-card__badges .deal-badge { font-size: 11px; padding: 4px 9px; border-radius: 999px; }
/* Nota da Evidelo (ou estado da análise) no canto inferior da foto. */
.search-page .search-card__signals {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; height: auto; margin: 0;
  display: flex; gap: 6px; overflow: visible;
}
.search-page .search-card__signals .signal {
  background: #fff; border: 1px solid #c7ead6; border-radius: 999px; padding: 4px 9px;
  font-size: 11px; font-weight: 600; color: var(--card-good); box-shadow: 0 2px 8px rgb(15 23 42 / 0.08);
}
.search-page .search-card__signals .signal strong { font-size: 13.5px; }
.search-page .search-card__signals .analysis-processing,
.search-page .search-card__signals .insufficient { color: #475467; border-color: #e4e7ec; }

.search-page .search-card__body { padding: 14px 15px 16px; gap: 0; }
.search-page .search-card__eyebrow {
  display: block; height: auto; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--card-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-page .search-card__eyebrow:empty { display: none; }
.search-page .search-card h3 {
  margin: 6px 0 4px; font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em;
  min-height: 2.6em; color: var(--card-ink);
}
.search-page .search-card__meta { font-size: 12px; color: var(--card-muted); }
.search-page .search-card__proof { height: auto; margin-top: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.search-page .search-card__proof .social-proof { flex-wrap: nowrap; white-space: nowrap; font-size: 12px; }
.search-page .search-card__summary { margin: 8px 0 0; min-height: 0; }

/* Preço: rótulo · valor · uma linha de contexto */
.search-page .search-card__price {
  display: flex; flex-direction: column; gap: 1px; height: auto; margin: 10px 0 0;
  font-family: inherit; font-weight: 500; overflow: visible;
}
.search-card__price .card-price__label { font-size: 11.5px; font-weight: 500; color: var(--card-muted); }
.search-card__price .card-price__value { color: var(--card-ink); }
.search-page .search-card__price .price-ml { font-size: 28px; font-weight: 550; margin: 0; letter-spacing: -.02em; }
.search-card__price .card-price__ctx {
  font-size: 11.5px; font-weight: 400; color: var(--card-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-card__price .card-ctx--ok { color: var(--card-good); font-weight: 600; }

/* Lojas: nome inteiro, a melhor com fundo verde e ✓ (sem pílula) */
.search-page .search-card__offers { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid #efebe3; min-height: 0; max-height: none; }
.search-page .search-card__offers:empty { display: none; }
.search-page .search-card__offers .offers-head {
  margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7a8699;
}
.search-page .search-card .offer-row {
  align-items: center; gap: 8px; margin: 0 -8px; padding: 6px 8px; border: 0; border-radius: 9px;
  font-size: 13px; color: var(--card-muted);
}
.search-page .search-card .offer-row strong { color: var(--card-ink); white-space: nowrap; font-weight: 650; }
/* O tailwind cortava TODO span da linha em 1 linha (line-clamp): o nome da
   loja sumia ("Shope…") e o aviso de preço fora do padrão nem aparecia. */
.search-page .search-card__offers .offer-row span { display: block; -webkit-line-clamp: unset; overflow: visible; }
.search-page .search-card .offer-row .offer-store { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 7px; }
.search-page .search-card .offer-row .offer-store__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-page .search-card .offer-store__name small { display: inline; margin-left: 3px; font-size: 10.5px; }
.search-page .search-card .offer-store__name small.offer-terms,
.search-page .search-card .offer-store__name small.offer-warn { display: block; margin-left: 0; }
.search-page .search-card .offer-row--best { background: var(--card-good-bg); color: var(--card-good); font-weight: 650; }
.search-page .search-card .offer-row--best strong { color: var(--card-good); }
.search-page .search-card .offer-row--best strong::before { content: "✓ "; font-weight: 750; }
.search-page .search-card .offer-row--warn { color: #7a8699; }
.search-page .search-card .offer-row--warn strong { color: #7a8699; font-weight: 500; }
.search-page .search-card .offer-warn { color: var(--card-warn); font-weight: 650; }
.search-page .search-card .offer-more { margin-top: 3px; font-size: 11px; color: var(--card-muted); }

/* Ações: botão de largura total; comparar como link discreto */
.search-page .search-card__actions { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 12px; min-height: 0; padding-top: 0; }
.search-page .search-card__cta {
  min-height: 40px; border: 0; border-radius: 11px; background: var(--card-indigo); color: #fff;
  font-size: 13.5px; font-weight: 650; box-shadow: 0 6px 14px rgb(83 72 224 / 0.2);
}
.search-page .search-card__cta:hover { background: #4338ca; color: #fff; border: 0; }
.search-page .search-card .compare-add {
  min-height: 30px; border: 0; background: transparent; box-shadow: none; color: var(--card-indigo);
  font-size: 12.5px; font-weight: 600;
}
.search-page .search-card .compare-add[aria-pressed="true"] { color: var(--card-good); }
@media (max-width: 640px) {
  .search-page .search-card__actions { align-items: stretch; }
  .search-page .search-card__price .price-ml { font-size: 24px; }
}
/* Card de destaque (1º resultado, horizontal no desktop): a foto ocupa a
   altura toda do card — com 190px fixos sobrava um bloco vazio embaixo. */
@media (min-width: 981px) {
  .search-page .search-grid > .search-card:first-of-type .search-card__media {
    height: auto; min-height: 190px; max-height: none; align-self: stretch;
  }
}
/* Até 980px o card da busca vira horizontal (foto em coluna de ~130px):
   selo e nota encolhem para caber na foto sem invadir o texto. */
@media (max-width: 980px) {
  .search-page .search-card__badges { top: 6px; left: 6px; right: 6px; gap: 4px; }
  .search-page .search-card__badges .card-badge,
  .search-page .search-card__badges .evk-best-badge,
  .search-page .search-card__badges .deal-badge { font-size: 10px; padding: 3px 7px; gap: 3px; }
  .search-page .search-card__signals { left: 6px; right: 6px; bottom: 6px; justify-content: center; }
  .search-page .search-card__signals .signal { font-size: 9px; padding: 3px 5px; white-space: nowrap; }
  .search-page .search-card__signals .signal strong { font-size: 12px; }
}

/* ============ CATÁLOGO · HOME · ACHADINHOS · BLACK FRIDAY ============
   .product-card (e a variante --deal) já seguia a anatomia; aqui só os
   mesmos tokens da busca: fundo, foto quente, título, preço e botões. */
.product-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
}
.product-card:hover { box-shadow: var(--card-shadow-hover); }
.product-card__media { background: var(--card-media-bg); border-bottom-color: #efebe3; }
.product-card__media::after { display: none; }
.product-card__badge { top: 10px; left: 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; padding: 5px 10px; }
.product-card__category { font-size: 10.5px; letter-spacing: .09em; font-weight: 600; color: var(--card-muted); }
.product-card__title {
  font-family: var(--font-ui); font-size: 15.5px; font-weight: 650; line-height: 1.3;
  letter-spacing: -.01em; color: var(--card-ink); min-height: 2.6em;
}
/* Sem nowrap aqui: na grade de 2 colunas do celular (cards de ~170px) a
   linha "★ 4,8 (1,2 mil) · 5,2 mil vendidos" não cabe e alargava o card. */
.product-card__meta .social-proof { font-size: 12px; }
.product-card__body { min-width: 0; }
.product-card__price { font-family: var(--font-ui); font-size: 28px; font-weight: 550; letter-spacing: -.02em; color: var(--card-ink); }
.product-card__price .product-card__reference { font-size: 12.5px; }
.product-card__deal-reason, .product-card__fresh { font-size: 11.5px; color: var(--card-muted); }
.product-card__buy {
  min-height: 40px; border-radius: 11px; background: var(--card-indigo);
  font-size: 13.5px; font-weight: 650; box-shadow: 0 6px 14px rgb(83 72 224 / 0.2);
}
.product-card__buy:hover { background: #4338ca; filter: none; }
.product-card__cta {
  display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 11px;
  border: 1.5px solid rgb(83 72 224 / 0.33); background: #fff; color: var(--card-indigo);
  font-size: 13.5px; font-weight: 650; text-decoration: none;
}
.product-card__cta:hover { background: rgb(83 72 224 / 0.05); border-color: rgb(83 72 224 / 0.5); }
/* No achadinho o "ver análise" é secundário ao botão da loja: link discreto. */
.product-card__cta--link { min-height: 32px; border: 0; background: transparent; font-size: 12.5px; }
.product-card__cta--link:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .product-card__title { font-size: 14px; }
  .product-card__price { font-size: 23px; }
}

/* ======================= CATÁLOGO NOVO (/shop) ======================= */
.cg-card__link { background: var(--card-bg); border-color: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.cg-card__media { background: var(--card-media-bg); }
.cg-card__cat { font-size: 10.5px; letter-spacing: .09em; color: var(--card-muted); }
.cg-card__title { font-family: var(--font-ui, Geist, system-ui, sans-serif); font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--card-ink); }
.cg-card__price { font-family: var(--font-ui, Geist, system-ui, sans-serif); font-size: 26px; font-weight: 550; letter-spacing: -.02em; }
.cg-card__price:not(.cg-card__price--none) { display: inline-flex; align-items: flex-start; line-height: 1; }
.cg-card__cur { padding-top: .2em; font-size: .52em; font-weight: 500; color: var(--card-ink); }
.cg-card__cents { margin-left: .06em; padding-top: .14em; font-size: .5em; font-weight: 500; }
@media (max-width: 640px) { .cg-card__title { font-size: 13.5px; } .cg-card__price { font-size: 21px; } }