/* Best Discounts Now — portal público (EN). CSS artesanal, sem build.
   Mudou algo? Suba o ?v= no layout (CF cacheia estático por extensão). */

:root {
    --ink: #101828;
    --ink-2: #475467;
    --muted: #667085;
    --line: #e4e7ec;
    --bg: #ffffff;
    --bg-soft: #f8fafc;
    --brand: #0e9f6e;
    --brand-dark: #057a55;
    --brand-darker: #046c4e;
    --star: #f59e0b;
    --danger: #b42318;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .14);
    --maxw: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: .4em 0; }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* ===== Header ===== */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; }
.brand span { color: var(--brand); }
.main-nav { display: flex; gap: 22px; }
.main-nav a { color: var(--ink-2); font-weight: 600; }
.main-nav a:hover { color: var(--brand-dark); text-decoration: none; }
/* Seção corrente: no mobile a nav vira barra de abas e a aba ativa precisa
   dizer onde o leitor está; no desktop basta a cor. */
.main-nav a[aria-current] { color: var(--brand-dark); }

/* ===== FTC disclosure ===== */
/* Nota curta ao lado do link (exigência de proximidade da FTC); a declaração
   completa fica no rodapé, em .footer-disclosure. */
.affiliate-note { font-size: .82rem; color: var(--muted); margin: 10px 0 0; }
.cta-box .affiliate-note, .verdict-text .affiliate-note { margin-bottom: 0; }

/* ===== Acessibilidade ===== */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--brand-dark); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; }
.skip-link:focus { left: 0; text-decoration: none; }
/* Texto só para leitor de tela. Serve para diferenciar links que repetem o
   mesmo rótulo visível ("Read Review" em cada card) sem inchar o botão: o
   nome acessível CONTÉM o texto visível, então não quebra o Label in Name. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ===== Breadcrumbs ===== */
.breadcrumbs { font-size: .85rem; color: var(--muted); padding: 14px 20px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumbs .current { color: var(--ink-2); font-weight: 600; }

/* ===== Botões ===== */
/* inline-flex (e não inline-block) porque o rótulo do CTA vem do cadastro e
   varia de "Buy Now" a "Get The Last Wish Today": quando um botão quebra em
   duas linhas e o vizinho não, o inline-block deixa o texto curto colado no
   topo. Centrado nos dois eixos + min-height, os dois lêem alinhados. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; line-height: 1.25; border-radius: 10px; padding: 11px 20px; font-weight: 700; border: 2px solid transparent; cursor: pointer; text-align: center; transition: transform .06s ease, background .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Verde ESCURO no botão cheio: branco sobre --brand (#0e9f6e) dá 3.4:1 e
   reprova no AA (4.5:1). Sobre --brand-dark são 5.4:1. O tom claro segue
   valendo para acento, borda e ícone — onde o texto não fica por cima. */
.btn-primary { background: var(--brand-dark); color: #fff; }
.btn-primary:hover { background: var(--brand-darker); color: #fff; }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* ===== Hero / seções ===== */
/* Duas colunas: promessa à esquerda, produto real à direita. Texto alinhado à
   esquerda porque é mais fácil de ler que bloco centrado com 3 linhas. */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; padding: 48px 0 36px; }
.hero-copy h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing: -.02em; margin: .2em 0 .45em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.hero-sub { color: var(--ink-2); font-size: 1.1rem; max-width: 620px; margin: 0; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-trust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; }
.hero-trust li { position: relative; padding-left: 28px; color: var(--ink-2); }
.hero-trust li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--brand); font-weight: 800; }

/* Destaque: maior nota editorial, com a peça composta do produto */
.hero-spotlight { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); padding: 18px; }
.spotlight-label { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-dark); }
.spotlight-media { display: block; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.spotlight-media img { width: 100%; height: auto; }
.hero-spotlight h2 { font-size: 1.3rem; margin: 10px 0 6px; }
.hero-spotlight h2 a { color: var(--ink); }
.hero-spotlight .btn { display: block; margin-top: 14px; }

/* Números reais do portal (nada de métrica inventada) */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); padding: 20px; margin-top: 8px; }
.stat-strip div { text-align: center; }
.stat-strip strong { display: block; font-size: 1.45rem; color: var(--brand-dark); line-height: 1.2; }
.stat-strip span { font-size: .88rem; color: var(--muted); }

/* Como revisamos + FAQ (E-E-A-T e citação por IA) */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.method-grid .method-title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.method-grid p { margin: 0; color: var(--ink-2); }
.faq-list { display: grid; gap: 20px; }
.faq-item { border-left: 3px solid var(--line); padding-left: 16px; }
.faq-item h3 { margin: 0 0 5px; font-size: 1.05rem; }
.faq-item p { margin: 0; color: var(--ink-2); }
.section-title { margin: 48px 0 18px; }
.page-intro { color: var(--ink-2); max-width: 720px; }
.empty-state { text-align: center; padding: 60px 0; color: var(--muted); }

/* ===== Cards de produto ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin: 20px 0; }
.product-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card-media { background: var(--bg-soft); aspect-ratio: 8/5; display: grid; place-items: center; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-placeholder { font-size: 3rem; font-weight: 800; color: var(--line); }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.15rem; }
.card-body h3 a { color: var(--ink); }
.card-category { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--brand-dark); margin: 0; }
.card-tagline { color: var(--ink-2); font-size: .95rem; margin: 0; flex: 1; }
/* Os dois botões só ficam lado a lado quando cabem inteiros: a base de 165px
   é a largura do CTA mais longo do catálogo em uma linha. Abaixo disso eles
   empilham em largura cheia — melhor que dois botões espremidos com o rótulo
   quebrado em três linhas. Sem media query: quem decide é o card, não a tela
   (o mesmo card aparece na home, em /reviews e na categoria). */
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.card-actions .btn { flex: 1 1 165px; min-height: 44px; padding: 10px 14px; font-size: .92rem; overflow-wrap: break-word; }

/* ===== Estrelas ===== */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.star { color: var(--line); font-size: 1.05rem; }
.star.on { color: var(--star); }
.star.half { color: var(--star); opacity: .55; }
.rating-num { margin-left: 6px; color: var(--ink); }

/* ===== Chips de categoria ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; font-weight: 600; color: var(--ink-2); background: #fff; }
.chip span { color: var(--muted); font-weight: 400; }
.chip:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }

/* ===== Review hub ===== */
.review-header { padding-top: 18px; }
/* Assinatura + data: lastro visível para o ano que o title promete. */
.review-byline { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; margin: 10px 0 0; color: var(--ink-2); font-size: .86rem; }
.review-byline a { color: inherit; text-underline-offset: 2px; }
.review-byline .byline-dot { opacity: .5; }
.verdict-card { display: grid; grid-template-columns: 180px 1fr; gap: 24px; border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: 24px; margin: 22px 0; background: var(--bg-soft); align-items: center; }
.verdict-score { text-align: center; }
.score-big { font-size: 3rem; font-weight: 800; display: block; color: var(--brand-dark); line-height: 1; }
.verdict-text .btn { margin-top: 12px; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; margin-top: 10px; }
.review-main { min-width: 0; }
.product-photo { border-radius: var(--radius); margin: 8px 0 20px; }
.review-side { display: flex; flex-direction: column; gap: 20px; }
.facts-card, .family-nav { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: var(--shadow); }
.facts-card h2, .family-nav h2 { margin: 0 0 10px; font-size: 1.1rem; }
.facts-card dl { margin: 0; }
.facts-card dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 10px; }
.facts-card dd { margin: 2px 0 0; font-weight: 600; }
.facts-card .btn { width: 100%; margin-top: 14px; }
.family-nav ul { list-style: none; margin: 0; padding: 0; }
.family-nav li { border-bottom: 1px solid var(--line); }
.family-nav li:last-child { border-bottom: 0; }
.family-nav a, .family-nav .current { display: block; padding: 9px 2px; font-weight: 600; }
.family-nav .current { color: var(--muted); }

/* ===== Prós/contras ===== */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 24px 0; }
.pros, .cons { border-radius: var(--radius); padding: 18px 22px; border: 1px solid var(--line); }
.pros { background: #f0fdf6; border-color: #b7e4cd; }
.cons { background: #fef5f4; border-color: #f4c7c3; }
.pros .pc-title, .cons .pc-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.pros .pc-title { color: var(--brand-dark); }
.cons .pc-title { color: var(--danger); }
.pros ul, .cons ul { margin: 0; padding-left: 20px; }
.pros li, .cons li { margin: 5px 0; }

/* ===== Zona de vídeo ===== */
.video-zone { margin: 24px 0; }
.video-facade { position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; background: #000; }
.video-facade img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .92; }
.play-badge { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #fff; }
.play-badge::before { content: ""; position: absolute; width: 76px; height: 76px; border-radius: 50%; background: rgba(14, 159, 110, .92); box-shadow: 0 4px 24px rgba(0,0,0,.35); }
.play-badge { text-indent: 4px; }
.video-zone iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius) var(--radius) 0 0; display: block; }
.video-cta { display: block; text-align: center; background: var(--brand); color: #fff; font-weight: 700; padding: 13px; border-radius: 0 0 var(--radius) var(--radius); }
.video-cta:hover { background: var(--brand-dark); color: #fff; text-decoration: none; }

/* ===== Prose (conteúdo gerado) ===== */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 22px; }
.prose a { font-weight: 600; }
.static-page { padding: 20px 0 40px; }

/* ===== FAQ ===== */
.faq-section { margin: 36px 0; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; padding: 4px 18px; margin: 10px 0; background: #fff; }
.faq-item summary { font-weight: 700; cursor: pointer; padding: 10px 0; }
.faq-item p { margin-top: 0; color: var(--ink-2); }

/* ===== CTA box ===== */
.cta-box { text-align: center; border: 2px solid var(--brand); border-radius: var(--radius); padding: 30px 24px; margin: 36px 0; background: #f0fdf6; }
.cta-box h2 { margin-top: 0; }
.price-line { color: var(--ink-2); margin-bottom: 0; }

/* ===== Posts ===== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin: 20px 0; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: var(--shadow); }
.post-card h2, .post-card h3 { font-size: 1.15rem; margin: 8px 0; }
.post-card h2 a, .post-card h3 a { color: var(--ink); }
.post-card img { border-radius: 8px; }
.post-hero { border-radius: var(--radius); margin: 16px 0; }
.blog-post { padding-top: 14px; }
.pagination { display: flex; justify-content: space-between; margin: 30px 0; font-weight: 600; }

/* ===== Sticky CTA mobile ===== */
.sticky-cta { display: none; }

/* ===== Footer ===== */
.site-footer { background: var(--ink); color: #cdd5df; margin-top: 64px; padding: 44px 0 24px; }
.site-footer .brand { color: #fff; }
/* .muted vale 4.97:1 no branco, mas 1.9:1 sobre o rodape escuro — aqui o
   cinza tem de ser CLARO (6.9:1), senão a nota da FDA e a assinatura da
   marca ficam ilegiveis justamente para quem mais precisa lê-las. */
.site-footer .muted { color: #98a2b3; }
.site-footer .footer-heading { color: #fff; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.site-footer a { display: block; color: #cdd5df; padding: 4px 0; }
/* Cor SÓLIDA (e não rgba sobre o rodapé): fundo semitransparente impede o
   auditor de calcular contraste e o bloco entra como falha mesmo legível. */
.footer-disclosure { background: #1d2939; border: 1px solid #344054; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 32px; }
.footer-disclosure p { margin: 0; font-size: .92rem; color: #e4e7ec; }
.footer-disclosure strong { color: #fff; }
.footer-disclosure a { display: inline; color: #6ee7b7; text-decoration: underline; padding: 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
/* A coluna "Follow" só existe quando há perfil cadastrado; sem esta regra o
   quarto bloco cairia para uma segunda linha sozinho. */
.footer-grid:has(> nav:nth-of-type(3)) { grid-template-columns: 2fr 1fr 1fr 1fr; }
.footer-note { border-top: 1px solid #344054; margin-top: 32px; padding-top: 18px; font-size: .82rem; color: #98a2b3; }

/* ===== Responsivo ===== */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 32px; padding: 34px 0 28px; }
    .hero-spotlight { max-width: 460px; }
    .review-layout { grid-template-columns: 1fr; }
    .verdict-card { grid-template-columns: 1fr; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .stat-strip { grid-template-columns: 1fr; gap: 14px; }
    .hero-actions .btn { width: 100%; }
    .pros-cons { grid-template-columns: 1fr; }
    /* Menu no mobile: marca em cima, nav como barra de abas de largura cheia.
       Em uma linha só, "BestDiscountsNow" (1.25rem/800) mais os três links
       passavam de 400px e o nome da marca quebrava em duas linhas em qualquer
       tela de 375px. A aba também dá o alvo de toque de 44px que o link de
       20px de altura não dava. Sem JS: nada de hambúrguer para três links. */
    .nav-row { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding-top: 12px; }
    .brand { font-size: 1.15rem; }
    .main-nav { gap: 0; margin-top: 10px; border-top: 1px solid var(--line); }
    .main-nav a { flex: 1 1 0; text-align: center; padding: 12px 4px; font-size: .95rem; border-bottom: 2px solid transparent; }
    .main-nav a[aria-current] { border-bottom-color: var(--brand); }
    .card-grid { grid-template-columns: 1fr; }
    .sticky-cta { display: block; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); z-index: 50; }
    .sticky-cta .btn { width: 100%; }
    body:has(.sticky-cta) { padding-bottom: 76px; }
}

/* --- Páginas de país: os cinco fatos verificados vêm antes de qualquer prosa,
       porque quem chega digitou "{produto} chemist warehouse" e quer resposta. --- */
.country-facts { margin: 0 0 28px; }
.country-facts > h2 { margin-bottom: 4px; }
.fact-list { display: grid; gap: 0; margin: 14px 0 0; border-top: 1px solid var(--line); }
.fact-list .fact { display: grid; grid-template-columns: minmax(160px, 30%) 1fr; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fact-list dt { font-weight: 700; color: var(--ink); margin: 0; }
.fact-list dd { margin: 0; color: var(--ink-2); }
.fact-figure { display: block; font-weight: 400; color: var(--ink-2); font-size: .9em; }
@media (max-width: 620px) { .fact-list .fact { grid-template-columns: 1fr; } }

.wtb-list { list-style: none; padding: 0; margin: 14px 0 0; }
.wtb-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* --- Comparação lado a lado --- */
.cmp-scroll { overflow-x: auto; margin: 14px 0 28px; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 480px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { border-bottom: 2px solid var(--line); }
.cmp-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmp-table td { color: var(--ink-2); }
.cmp-side { margin: 0 0 28px; }

/* Índice do blog por assunto: substituiu a paginação de sete páginas. */
.topic-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin: 20px 0; }
.topic-block h3 { font-size: 1.05rem; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li { margin: 0 0 8px; line-height: 1.45; }
.topic-list a { color: var(--ink); }

/* ===== Scorecard e régua da nota ===== */
/* Tabela larga nunca pode empurrar o body na horizontal (regra do layout): ela
   rola dentro da própria caixa. */
.table-scroll { overflow-x: auto; margin: 18px 0; }
.scorecard-table, .rubric-table { width: 100%; border-collapse: collapse; font-size: .95rem; text-align: left; }
.scorecard-table th, .scorecard-table td,
.rubric-table th, .rubric-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.scorecard-table thead th, .rubric-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom-width: 2px; }
.scorecard-table tbody th, .rubric-table tbody th { font-weight: 600; white-space: nowrap; }

.scorecard { margin: 34px 0; }
/* A citação é prova, não ornamento: fica visualmente subordinada à resposta,
   mas legível — em 0.8rem cinza-claro ninguém lê, e ler é o ponto. */
.scorecard-quote { margin: 8px 0 0; padding: 8px 0 8px 12px; border-left: 3px solid var(--line); color: var(--muted); font-size: .88rem; font-style: italic; }
.scorecard-score { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Cor por faixa: verde só a partir de 4, âmbar no meio, vermelho no que é ruim.
   Sem isso a coluna vira um borrão de números e a tabela não comunica nada de
   relance. Os tons têm contraste >= 4.5:1 sobre o fundo branco. */
.scorecard-score[data-score="5"], .scorecard-score[data-score="4"] { color: #047857; }
.scorecard-score[data-score="3"] { color: #b45309; }
.scorecard-score[data-score="2"], .scorecard-score[data-score="1"], .scorecard-score[data-score="0"] { color: #b91c1c; }

.rubric-question { display: block; margin-top: 4px; font-weight: 400; font-size: .84rem; white-space: normal; max-width: 34ch; }
.rubric-weight { font-variant-numeric: tabular-nums; font-weight: 700; }
.rubric-options { margin: 0; padding: 0; list-style: none; }
.rubric-options li { margin: 0 0 4px; }
.rubric-score { display: inline-block; min-width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }

@media (max-width: 640px) {
    .scorecard-table tbody th, .rubric-table tbody th { white-space: normal; }
    .scorecard-table th, .scorecard-table td,
    .rubric-table th, .rubric-table td { padding: 10px 8px; }
}

/* Busca ------------------------------------------------------------------
   Duas instâncias da mesma caixa: a do cabeçalho (compacta, ícone só) e a da
   página de resultados (.search-form-big, com o rótulo do botão visível). */
.search-form { display: flex; align-items: stretch; gap: 0; min-width: 0; }
.search-input {
    min-width: 0; width: 190px; font: inherit; font-size: .95rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-right: 0;
    border-radius: 999px 0 0 999px; padding: 8px 16px; min-height: 42px;
    /* iOS zooma o campo abaixo de 16px ao focar; no mobile a caixa cresce. */
    -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus-visible, .search-submit:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; z-index: 1; }
.search-submit {
    display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700;
    color: #fff; background: var(--brand-dark); border: 1px solid var(--brand-dark);
    border-radius: 0 999px 999px 0; padding: 0 16px; min-height: 42px; cursor: pointer;
}
.search-submit:hover { background: var(--brand-darker); }
/* SVG é inline por padrão e ganharia o espaço da linha de base embaixo, o que
   desce o ícone dentro do botão. block + flex do pai centram de verdade. */
.search-icon { display: block; flex: none; }

.search-form-big { max-width: 560px; margin: 8px 0 28px; }
.search-form-big .search-input { width: 100%; font-size: 1.05rem; min-height: 52px; padding: 12px 22px; }
.search-form-big .search-submit { min-height: 52px; padding: 0 24px; }

.search-page section { margin: 36px 0; }
.chip-list { list-style: none; padding: 0; }
.chip-list-center { justify-content: center; }

@media (max-width: 640px) {
    /* nav-row vira coluna: a caixa entra entre a marca e as abas, e não depois
       delas — busca abaixo do dobro do menu é busca que ninguém acha. */
    .search-form { order: 2; margin-top: 10px; }
    .main-nav { order: 3; }
    .search-input { width: 100%; font-size: 16px; }
}