/*
Theme Name: Baratão da Internet
Version: 0.3
*/

:root{
  /* Paleta Promos-like */
  --bg: #f6f7fb;
  --card: #ffffff;
  --surface:#f2f4f7;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --line:#e6eaf0;
  --primary:#0ea5e9;         /* SKY 400 */
  --primary-dark:#0284c7;    /* SKY 600 */
  --badge:#ef4444;           /* vermelho desconto */

  --radius:14px;
  --radius-pill:999px;
  --shadow:0 10px 24px rgba(2,132,199,.12);
  --shadow-card:0 10px 24px rgba(15,23,42,.10);
}

html,body{
  background:var(--bg);
  color:var(--ink);
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== layout base ===== */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px;
}

/* ===== título da seção ===== */
h1.bt-title{
  margin: 0 0 16px;
  font: 800 clamp(20px,3vw,28px)/1.15 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
}

/* ===== chips de filtro ===== */
.bt-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px }
.bt-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:var(--radius-pill);
  background:#fff; border:1px solid var(--line);
  color:var(--ink-2); font:700 .9rem/1 Inter; text-decoration:none;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  transition:.15s;
}
.bt-chip:hover{ transform:translateY(-1px) }
.bt-chip img{ height:18px; width:auto; display:block }
.bt-chip.is-active{ background:var(--primary); color:#fff; border-color:var(--primary) }

/* ===== grid ===== */
.bt-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
@media(max-width: 992px){ .bt-grid{ grid-template-columns: repeat(2, 1fr);} }
@media(max-width: 640px){ .bt-grid{ grid-template-columns: 1fr;} }

/* ===== card ===== */
.bt-card{
  display:flex; flex-direction:column;
  background:var(--card); border-radius:var(--radius);
  overflow:hidden; box-shadow: var(--shadow-card);
  min-height:100%;
}
.bt-media{
  position:relative; background:var(--surface);
  /* faz a imagem ficar sempre 1:1 */
  aspect-ratio: 1 / 1;
}
.bt-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
.bt-badge{
  position:absolute; top:10px; right:10px;
  background:var(--badge); color:#fff; border-radius:var(--radius-pill);
  padding:6px 10px; font:800 .78rem/1 Inter;
}

/* chip de loja sobre o card (opcional) */
.bt-brand{
  display:inline-flex; align-items:center; gap:8px;
  margin:12px 12px 0;
  background:#fff; border:1px solid var(--line);
  padding:6px 10px; border-radius:var(--radius-pill);
  font:700 .8rem/1 Inter; color:var(--muted);
}
.bt-brand img{ height:16px; width:auto }

/* corpo do card */
.bt-body{
  display:flex; flex-direction:column; gap:10px;
  padding:12px 14px 16px;
  min-height: 180px; /* força os botões a alinharem no final */
}
.bt-name{
  margin:0; color:var(--ink);
  font:800 clamp(16px,1.4vw,18px)/1.25 Inter;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media(max-width:640px){ .bt-name{-webkit-line-clamp:3;} }

.bt-prices{ display:flex; gap:10px; align-items:center }
.bt-new{ color:var(--ink); font:800 1rem/1 Inter }
.bt-old{ color:#94a3b8; text-decoration:line-through; font:600 .9rem/1 Inter }

/* CTA */
.bt-cta{ margin-top:auto }
.bt-btn{
  display:block; width:100%; text-align:center;
  background:var(--primary); color:#fff; text-decoration:none;
  font:800 .95rem/1 Inter; padding:12px 14px; border-radius:12px;
  border:0; box-shadow: var(--shadow); transition:.18s
}
.bt-btn:hover{ background:var(--primary-dark); transform:translateY(-2px) }

/* paginação (se usar) */
.bt-pagi{ display:flex; gap:10px; justify-content:center; margin:28px 0 8px }
.bt-pagi a,.bt-pagi span{
  padding:10px 14px; border-radius:10px; background:#fff; border:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-weight:700
}
.bt-pagi .current{ background:var(--primary); color:#fff; border-color:var(--primary) }

/* footer limpo, sem barrinhas */
footer{ border:0 !important; box-shadow:none !important }
footer hr{ display:none !important }

/* =========================
   Ajustes finos Promos-style
========================= */

/* Centraliza a seção */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Melhora o grid e espaçamento */
.bt-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  justify-content: center;
}

/* Cards */
.bt-card {
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

/* Imagem mais equilibrada */
.bt-media {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* Margem mais leve no footer */
footer.wrap {
  margin-top: 40px;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}
footer.wrap small {
  display: block;
  margin-top: 10px;
}

/* Corrige botão CTA para todos ficarem alinhados */
.bt-btn {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
}
.bt-cta {
  display: flex;
  justify-content: center;
}

/* ===============================
   Alinhamento vertical perfeito
   dos botões dentro dos cards
=============================== */

/* Deixa o corpo do card como flex container */
.bt-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  padding: 14px 16px 18px;
  min-height: 200px; /* força altura mínima igual */
}

/* Empurra o botão para a base */
.bt-cta {
  margin-top: auto; /* garante que o botão fique colado no final */
  display: flex;
  justify-content: center;
}

/* Botão centralizado, largura total e altura padronizada */
.bt-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  font: 800 .9rem/1 Inter, system-ui, sans-serif;
  color: #fff;
  background: var(--primary);
  border-radius: 10px;
  padding: 12px 14px;
  border: none;
  box-shadow: var(--shadow);
  transition: 0.2s ease;
}
.bt-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}

/* Para manter uniformidade visual mesmo com títulos longos */
.bt-name {
  min-height: 48px; /* garante duas linhas fixas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* === Cards 100% alinhados na grade === */

/* A grade deve esticar os itens */
.bt-grid{
  align-items: stretch;              /* todos os cards com a mesma altura */
}

/* Card ocupa 100% da célula e organiza conteúdo em coluna */
.bt-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Vitrine com altura uniforme em TODOS os cards */
.bt-media{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  /* define uma “caixa” fixa de vitrine */
  aspect-ratio: 4 / 3;               /* ajuste p/ 1/1, 4/3 ou 16/9 conforme preferir */
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
}

/* A imagem preenche a vitrine sem distorcer */
.bt-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;               /* mostra tudo, sem cortar */
}

/* Corpo do card com mesma “linha de partida” após a vitrine */
.bt-body{
  flex: 1;                           /* ocupa o restante do card */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 18px;
}

/* Título com altura mínima (2 linhas) para uniformizar */
.bt-name{
  min-height: 48px;                  /* ~ 2 linhas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Botão sempre na base (seu alinhamento) */
.bt-cta{ margin-top: auto; }
.bt-btn{
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--primary);
  color:#fff;
  font: 800 .95rem/1 Inter, system-ui, sans-serif;
  box-shadow: var(--shadow);
  transition: .2s;
}
.bt-btn:hover{ background: var(--primary-dark); transform: translateY(-2px); }

/* Reserva altura fixa para a “faixinha” de loja e mantém o espaço mesmo quando vazia */
.bt-brand{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-pill);
  font: 700 .8rem/1 Inter, system-ui, sans-serif;
  color: var(--muted);

  /* <- altura mínima garante alinhamento entre cards */
  min-height: 28px;
}

/* Quando não há loja, a faixa fica invisível mas reserva o espaço */
.bt-brand.is-empty{
  visibility: hidden;   /* ocupa espaço sem aparecer */
  border: 0;            /* evita “sombra” */
  padding: 0;
  margin: 12px 12px 0;
}

/* ==== HOTFIX: imagens dos cards sem distorção ==== */

/* Caixa da vitrine: define o formato e centraliza o conteúdo */
.bt-media{
  aspect-ratio: 4 / 3;                  /* se preferir quadrado, use 1 / 1 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
}

/* Normaliza qualquer markup (picture/figure) gerado pelo WP */
.bt-media picture,
.bt-media figure{
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A imagem se adapta SEM distorcer */
.bt-media img{
  width: auto !important;               /* não force largura/altura fixas */
  height: auto !important;
  max-width: 100% !important;           /* preenche a caixa */
  max-height: 100% !important;          /* respeita o aspect-ratio do container */
  object-fit: contain;                   /* não corta a arte */
  display: block;
}

/* ====== Vitrine de imagem padronizada (quadrada, com folga) ====== */
.bt-media{
  /* todas as vitrines com o MESMO formato */
  aspect-ratio: 1 / 1;                 /* troque para 4 / 3 se preferir retangular */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;                       /* folga igual em todas as bordas */
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
}

/* normaliza qualquer wrapper que o WP gerar */
.bt-media picture,
.bt-media figure{
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* imagem NUNCA distorce e sempre respeita a folga */
.bt-media img{
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;                  /* “encaixa” sem cortar */
  display: block;
}

/* Se alguma imagem ainda “colar” na borda, dá um limite extra */
.bt-media img{
  max-width: 92% !important;
  max-height: 92% !important;          /* deixa ~8% de respiro */
}

/* ===== Correção final: imagem sem cobrir o selo ===== */

.bt-media {
  aspect-ratio: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* folga visual */
  background: #fff;
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

/* Imagem preenche sem esconder a badge */
.bt-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1; /* imagem abaixo do selo */
}

/* Selo de desconto sempre por cima */
.bt-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--badge);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  font: 800 .78rem/1 Inter;
  z-index: 10; /* garante sobreposição */
}

/* ===============================
   Preço riscado apenas quando houver desconto
=============================== */

/* Estilo geral de preços */
.bt-prices {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

/* Preço atual (novo) */
.bt-new {
  color: var(--ink);
  font: 800 1rem/1 Inter, system-ui, sans-serif;
}

/* Preço antigo riscado */
.bt-old {
  color: #94a3b8;
  text-decoration: line-through;
  font: 600 .9rem/1 Inter, system-ui, sans-serif;
}

/* Se o preço antigo não existir (ou estiver vazio), o preço atual fica normal */
.bt-prices:has(.bt-old:empty) .bt-new,
.bt-prices:not(:has(.bt-old)) .bt-new {
  color: var(--ink);
  font-weight: 800;
}

/* Esconde o campo antigo vazio */
.bt-old:empty {
  display: none;
}

/* ===========================
   TOPO - BARATÃO DA INTERNET
=========================== */

.bt-header {
  background: #0f172a;                /* fundo escuro */
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 999;
}

.bt-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* LOGO */
.bt-logo img {
  height: 46px;
  width: auto;
  display: block;
}

/* MENU */
.bt-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-nav a {
  color: #f8fafc;
  font: 700 .95rem/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  transition: .2s;
}

.bt-nav a:hover {
  color: var(--primary);
}

/* Responsividade */
@media(max-width: 768px) {
  .bt-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .bt-nav ul {
    flex-direction: column;
    gap: 10px;
  }
  .bt-logo img {
    height: 42px;
  }
}

/* ===========================
   TOPO – BARATÃO DA INTERNET
=========================== */
.bt-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #0f172a;           /* escuro */
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.admin-bar .bt-header{ top: 32px; }         /* evita conflito com admin bar */

.bt-header-inner{
  max-width: 1180px;              /* usa a mesma largura do site */
  margin: 0 auto;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo / marca */
.bt-brand-area{
  display:flex;
  align-items:center;
  gap:14px;
}
.bt-logo img{
  height: 46px;
  width: auto;
  display:block;
}
.bt-logo-text{
  font: 800 1.1rem/1 Inter, system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
}

/* Hamburger (mobile) */
.bt-burger{
  display:none;
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background: transparent;
  align-items:center; justify-content:center;
  cursor:pointer;
}
.bt-burger span{
  display:block; height:2px; width:18px; background:#fff; margin:3px 0;
}

/* Navegação */
.bt-nav{ display:block; }
.bt-menu{
  margin:0; padding:0; list-style:none;
  display:flex; gap:28px; align-items:center;
}
.bt-menu > li > a{
  color:#eaf2ff;
  text-decoration:none;
  font:700 .95rem/1 Inter, system-ui, sans-serif;
  padding:10px 0;
  display:inline-block;
  transition:.18s;
}
.bt-menu > li > a:hover,
.bt-menu > li.current-menu-item > a{ color: var(--primary); }

/* Responsivo */
@media (max-width: 900px){
  .bt-header-inner{ flex-wrap:wrap; gap:14px; }
  .bt-burger{ display:flex; }
  .bt-nav{
    width:100%;
    display:none;                    /* escondido até abrir */
  }
  .bt-nav.is-open{ display:block; }
  .bt-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:8px 0 4px;
  }
  .bt-menu > li > a{ padding:8px 2px; }
}

/* === Afasta o conteúdo do topo para não ficar embaixo do header === */
/* quando a seção principal vem logo depois do header */
.bt-header + .wrap { 
  padding-top: clamp(16px, 2vw, 28px);
}

/* se seu conteúdo estiver dentro de <main> ou <div> após o header */
.bt-header + main .wrap,
.bt-header + div .wrap {
  padding-top: clamp(16px, 2vw, 28px);
}

/* garante que o header fique por cima sem “comer” o conteúdo */
.bt-header { 
  position: sticky;   /* importante: não use fixed aqui */
  top: 0;
  z-index: 1000;
}

/* quando a admin bar do WP está visível */
.admin-bar .bt-header { top: 32px; }

/* alternativa simples e global */
.wrap:first-of-type { padding-top: clamp(16px, 2vw, 28px); }