/* ==========================================================================
   Partes de SEO/GEO do catálogo de brindes (30/09/2026). Carrega DEPOIS de tm-site.css e brindes.css e usa as
   mesmas variáveis (fontes, azul, linhas). Prefixo bs-. Arquivo separado do brindes.css para as mudanças de
   SEO não se misturarem com as da vitrine.
   ========================================================================== */

/* H1 do produto: "Garrafa térmica 700 ml" + "personalizada com logo" em azul, menor */
.bp-info h1 .bp-h1-logo{display:block;margin-top:8px;color:var(--blue);font-size:.5em;line-height:1.15;letter-spacing:-.02em;font-weight:800}

/* descrição própria do produto e a do fabricante recolhida */
.bs-desc{color:#344054;font-size:16px;line-height:1.7;max-width:640px}
.bs-desc p + p{margin-top:12px}
.bs-desc strong{color:var(--ink)}
.bs-origem{margin-top:18px;max-width:640px;border:1px solid var(--line);border-radius:16px;background:#fff}
.bs-origem summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font-size:14px;font-weight:800;color:var(--ink)}
.bs-origem summary::-webkit-details-marker{display:none}
.bs-origem summary::after{content:"+";font-size:20px;line-height:1;color:var(--blue);transition:transform .25s}
.bs-origem[open] summary::after{transform:rotate(45deg)}
.bs-origem p{padding:0 18px 16px;color:#475467;font-size:14.5px;line-height:1.65}
.bs-usos{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bs-usos a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--soft-blue);color:var(--blue);font-size:13px;font-weight:800;transition:background .2s,transform .2s}
.bs-usos a:hover{background:#DCEAFF;transform:translateY(-1px)}

/* links para os tipos de produto da categoria ("Por tipo: Garrafas térmicas · Squeezes") */
.bs-colecoes{padding:2px 0 8px}
.bs-colecoes .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bs-colecoes span{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bs-colecoes a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:800;color:var(--ink);box-shadow:0 6px 18px rgba(16,24,40,.04);transition:border-color .2s,transform .2s,box-shadow .2s}
.bs-colecoes a small{font-size:12px;font-weight:800;color:var(--blue);background:var(--soft-blue);border-radius:999px;padding:1px 8px}
.bs-colecoes a:hover{border-color:rgba(0,71,187,.35);transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,30,96,.09)}

/* topo das coleções e ocasiões: resposta rápida com os números do catálogo */
.bs-hero .hero-copy{max-width:760px}
.bs-rapida{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:22px 0 6px;max-width:980px}
.bs-rapida li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);box-shadow:0 14px 40px rgba(0,30,96,.06)}
.bs-rapida b{font-family:var(--f-title);font-size:clamp(20px,2.2vw,26px);letter-spacing:-.04em;color:var(--ink);line-height:1.1}
.bs-rapida span{font-size:13px;line-height:1.35;color:#475467;font-weight:600}
.bs-rapida-nota{font-size:12.5px;color:var(--muted);margin:4px 0 12px}

/* guia abaixo da grade */
.bs-guia .bs-guia-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:14px}
.bs-guia-bloco{padding:26px 28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 52px rgba(16,24,40,.05)}
.bs-guia-bloco h2{font-family:var(--f-title);font-size:clamp(21px,2.1vw,26px);line-height:1.15;letter-spacing:-.035em;margin-bottom:12px;text-wrap:balance}
.bs-guia-bloco p{color:#475467;font-size:15.5px;line-height:1.7}
.bs-guia-bloco p + p{margin-top:10px}
.bs-guia-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px}
.bs-kits .kits-grade{margin-top:8px}

@media (max-width:900px){
  .bs-rapida{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bs-guia .bs-guia-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bs-rapida li{padding:13px 14px;border-radius:16px}
  .bs-guia-bloco{padding:20px}
  .bs-colecoes a{font-size:13px;padding:7px 12px}
}

/* vitrine: tabela-resumo de preço por categoria (números do índice) */
.bs-resumo .section-head p{max-width:760px}
.bs-tabela-rolagem{margin-top:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 52px rgba(16,24,40,.05);overflow-x:auto;-webkit-overflow-scrolling:touch}
.bs-tabela{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.bs-tabela th,.bs-tabela td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.bs-tabela thead th{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
.bs-tabela tbody tr:last-child th,.bs-tabela tbody tr:last-child td{border-bottom:0}
.bs-tabela tbody th a{font-weight:800;color:var(--ink)}
.bs-tabela tbody th a:hover{color:var(--blue)}
.bs-tabela td{color:#475467}
.bs-tabela td b{font-family:var(--f-title);color:var(--ink);font-size:16px;letter-spacing:-.02em}
.bs-tabela tbody tr:hover{background:#FAFCFF}
.bs-ocasioes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.bs-ocasioes span{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.bs-ocasioes a{padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:800;color:var(--ink);transition:border-color .2s,color .2s}
.bs-ocasioes a:hover{border-color:rgba(0,71,187,.35);color:var(--blue)}
@media (max-width:520px){.bs-tabela{font-size:14px}.bs-tabela th,.bs-tabela td{padding:11px 14px}}

/* ==== Passada final de UI/UX (01/10/2026) ============================================================================
   Tabela "Quanto custa cada tipo de brinde" no celular: tinha 773 px dentro de uma tela de 358 px e rolava para o lado
   dentro da caixa (o molde pede tabela sem rolagem lateral). Agora cada categoria vira um cartão. */
@media (max-width:640px){
  .bs-tabela-rolagem{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none}
  .bs-tabela{display:block;min-width:0;font-size:14px}
  .bs-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bs-tabela tbody{display:grid;gap:8px}
  .bs-tabela tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff}
  .bs-tabela th,.bs-tabela td{display:block;padding:0;border:0;white-space:normal}
  .bs-tabela tbody th{grid-column:1;grid-row:1;font-size:15px}
  .bs-tabela tbody th a{display:inline-flex;align-items:center;min-height:30px}
  .bs-tabela td:nth-child(2){grid-column:1;grid-row:2;font-size:12.5px;color:var(--muted)}
  .bs-tabela td:nth-child(2)::after{content:" modelos com preço"}
  .bs-tabela td:nth-child(3){grid-column:2;grid-row:1 / span 2;text-align:right;font-size:12.5px;line-height:1.3}
  .bs-tabela td:nth-child(3) b{display:block;font-size:17px}
  .bs-tabela td:nth-child(4){grid-column:1 / -1;grid-row:3;font-size:12.5px;color:var(--muted)}
  .bs-tabela td:nth-child(4)::before{content:"Quantidade mínima: "}
  .bs-tabela tbody tr:hover{background:#fff}
  /* atalhos "Por ocasião" e "Por região": 44 px de altura para o dedo */
  .bs-ocasioes a{display:inline-flex;align-items:center;min-height:44px}
  .bs-ocasioes span{flex-basis:100%}
}