:root{
  --v-primary:#ffcc00;.brand-logo{height:28px}
  --v-dark:#111;
  --v-muted:#6b7280;
  --v-soft:#f6f7f8;
  --v-border:#e5e7eb;
  --radius:18px;
}

/* ===================== NAVBAR (final) ===================== */
.navbar{
  background: var(--v-dark) !important;
  height: 60px;     /* faixa preta fixa (não cresce) */
  padding: 0;       /* evita aumentar a faixa por padding */
}
@media (min-width: 992px){
  .navbar{ height: 64px; } /* um pouco mais alta no desktop */
}

/* container sem recuo e com mesma altura da barra */
.navbar > .container,
.navbar > .container-fluid{
  padding-left: 0;
  padding-right: 0;
  height: 100%;
}

/* marca encostada e centralizada verticalmente */
.navbar-brand{
  height: 100%;
  margin-left: 0;          /* sem margem */
  padding-left: 8px;       /* 0 se quiser colar de vez */
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* tamanho da logo – o máximo possível sem aumentar a barra */
.navbar-brand .brand-logo{
  height: 46px;   /* mobile/tablet */
  width: auto;
  display: block;
}
@media (min-width: 992px){
  .navbar-brand .brand-logo{ height: 58px; } /* desktop */
}

/* badge da área */
.badge-v{ background: var(--v-primary); color:#111; }
/* ========================================================= */

/* Links utilitários */
.link-more{ font-weight:600; text-decoration:none; }
.link-more:hover{ text-decoration:underline; }

/* HERO */
.hero{ position:relative; border-radius: var(--radius); overflow:hidden; padding: 36px 24px; color:#fff; }
.hero-bg{
  position:absolute; inset:0;
  background: radial-gradient(80% 100% at 0% 0%, rgba(255,204,0,.25), transparent 60%),
              radial-gradient(100% 80% at 100% 0%, rgba(255,204,0,.18), transparent 65%),
              linear-gradient(180deg,#202020,#151515);
  background-size:cover; background-position:center;
}
.hero-content{ position:relative; max-width:1100px; margin:0 auto; }
.hero h1{ font-weight:800; letter-spacing:.2px; }
.hero .lead{ color:#e5e7eb; }

/* Busca principal */
.searchbar{
  display:grid; grid-template-columns: 1fr 260px 180px 160px; gap:10px;
  margin-top:18px;
}
@media (max-width: 992px){
  .searchbar{ grid-template-columns: 1fr; }
}

/* Chips / rolagem horizontal */
.hscroll{ display:flex; gap:10px; overflow:auto; padding-bottom:6px; scrollbar-width:thin; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--v-border); border-radius:999px;
  background:#fff; color:#111; text-decoration:none; white-space:nowrap; font-weight:600;
}
.chip:hover{ border-color:#d1d5db; background:#fafafa; }
.chip-lg{ padding:10px 14px; }
.chip-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:22px; padding:0 8px;
  border-radius:999px; background:var(--v-soft); color:#374151; font-size:.85rem;
}

/* KPIs */
.kpi-card{
  background:#fff; border:1px solid var(--v-border); border-radius:var(--radius);
  padding:18px; text-align:center; box-shadow:0 1px 0 rgba(17,17,17,.03);
}
.kpi-num{ font-size:42px; font-weight:800; line-height:1; }
.kpi-label{ color:var(--v-muted); text-transform:lowercase; }

/* Cards de oferta */
.offer-card{
  display:block; border:1px solid var(--v-border); border-radius:var(--radius);
  overflow:hidden; background:#fff; text-decoration:none; color:#111;
  transition: transform .22s ease, box-shadow .22s ease;
}
.offer-card:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.06); }
.offer-thumb{ aspect-ratio: 16 / 10; background:#f2f2f2; position: relative; }
.offer-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.offer-body{ padding:14px; }
.offer-title{ font-size:1.05rem; margin:0 0 6px; font-weight:700; min-height: 2.3em; }
.offer-specs{ display:flex; gap:8px; flex-wrap:wrap; color:#4b5563; font-size:.92rem; margin-bottom:8px; }
.offer-specs span{ background:var(--v-soft); border:1px solid var(--v-border); padding:4px 8px; border-radius:999px; }
.offer-price{ font-size:1.25rem; font-weight:800; }
.offer-meta{ color:#6b7280; font-size:.92rem; }

/* Badge da marca/empresa no card */
.brand-badge{
  position:absolute; top:8px; left:8px;
  background:rgba(255,255,255,.95); border:1px solid var(--v-border);
  border-radius:12px; padding:6px 8px; box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.brand-badge img{ height:22px; width:auto; display:block; }

/* Logo ao lado do título da oferta */
.brand-head{ height:34px; width:auto; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:6px; }

/* Filtros (buscar) */
.filter-box{ box-shadow:0 1px 0 rgba(0,0,0,.02); background:#fff; border-radius:var(--radius); }

/* CTA anunciante */
.cta-seller{
  background:#fff; border:1px solid var(--v-border); border-radius:var(--radius);
  padding:22px 18px;
}

/* Empty state */
.empty{
  border:1px dashed var(--v-border); border-radius:var(--radius);
  padding:24px; color:#6b7280; background:#fff;
}

/* Botão primário */
.btn-primary{ background:var(--v-primary); border-color:var(--v-primary); color:#111; font-weight:700; }
.btn-primary:hover{ filter:brightness(.98); }

/* Pequenos refinamentos */
.section-header{ padding:2px 4px; }
.card, .table{ border-radius: var(--radius); }
/* Logo grande encostada (força o tamanho e ignora qualquer height="22" inline) */
.navbar{
  background: var(--v-dark) !important;
  height: 60px;
  padding: 0;
}
@media (min-width: 992px){ .navbar{ height: 64px; } }

.navbar > .container,
.navbar > .container-fluid{ padding-left:0; padding-right:0; height:100%; }

.navbar-brand{
  height:100%;
  margin-left:0;
  padding-left:8px;       /* use 0 se quiser colar de vez */
  display:flex; align-items:center; gap:.5rem;
}

.navbar-brand .brand-logo{
  height: 668px !important;   /* mobile/tablet */
  width: auto !important;
  display:block;
}
@media (min-width: 992px){
  .navbar-brand .brand-logo{ height: 76px !important; } /* desktop */
}
/* ==== Hotfix navbar: logo controlada e sem overflow horizontal ==== */
html, body { max-width: 100%; overflow-x: hidden; } /* segurança */

.navbar{
  background: var(--v-dark) !important;
  height: 60px;             /* faixa fixa */
  padding: 0;
  overflow: hidden;         /* evita “vazar” conteúdo da barra */
}
@media (min-width: 992px){
  .navbar{ height: 64px; }
}

/* não deixar o container causar rolagem lateral */
.navbar > .container,
.navbar > .container-fluid{
  padding-left: 0;
  padding-right: 0;
  height: 100%;
  max-width: 100vw;
}

/* a área da marca não pode exceder a largura */
.navbar-brand{
  height: 100%;
  margin-left: 0;
  padding-left: 8px;        /* 0 se quiser colar na borda */
  display: flex; align-items: center; gap: .5rem;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* força tamanho da logo (válido para SVG/PNG) */
.navbar-brand picture,
.navbar-brand img.brand-logo{
  display: block;
  height: 44px !important;   /* mobile/tablet */
  width: auto !important;
  max-width: 100%;
}
@media (min-width: 992px){
  .navbar-brand picture,
  .navbar-brand img.brand-logo{ height: 56px !important; } /* desktop */
}

/* menus não podem estourar a tela */
.navbar .dropdown-menu{
  max-width: calc(100vw - 24px);
  overflow-wrap: anywhere;
}
/* ==== Hotfix: dropdowns do menu visíveis e sem rolagem lateral ==== */

/* 1) Deixa os dropdowns poderem “sair” da barra */
.navbar { 
  overflow: visible !important;   /* antes estava hidden */
  z-index: 1040;                  /* garante ficar acima do conteúdo */
}

/* 2) A área colapsada do menu também não pode cortar conteúdos */
.navbar .collapse { overflow: visible !important; }

/* 3) Segurança contra barra horizontal (mantém a tela limpa) */
html, body { max-width: 100%; overflow-x: hidden; }

/* 4) Container da navbar não deve forçar largura maior que a viewport */
.navbar > .container,
.navbar > .container-fluid {
  padding-left: 0;
  padding-right: 0;
  height: 100%;
  max-width: 100vw;
}

/* 5) Ajustes de dropdown (espacinho e largura segura) */
.navbar .dropdown-menu{
  margin-top: .4rem;                        /* afasta da barra */
  max-width: calc(100vw - 24px);            /* evita estourar na horizontal */
  overflow-wrap: anywhere;
}
/* ===== navbar sticky + logo controlada ===== */
.navbar{
  background: var(--v-dark)!important;
  height: 60px; padding: 0; overflow: visible !important; z-index: 1040;
}
@media (min-width: 992px){ .navbar{ height: 64px; } }
.navbar > .container, .navbar > .container-fluid{
  padding-left:0; padding-right:0; height:100%; max-width:100vw;
}
.navbar-brand{ height:100%; padding-left:8px; display:flex; align-items:center; gap:.5rem; }
.navbar-brand picture, .navbar-brand img.brand-logo{
  display:block; height:44px!important; width:auto!important; max-width:100%;
}
@media (min-width: 992px){
  .navbar-brand picture, .navbar-brand img.brand-logo{ height:56px!important; }
}

/* ===== mega menu ===== */
.dropdown-mega .dropdown-menu.mega{
  width: min(920px, 96vw);
}
.mega-item{
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border-radius:8px; text-decoration:none; color:#111;
}
.mega-item:hover{ background:#f6f7f8; }

/* evita barra horizontal */
html, body { max-width:100%; overflow-x:hidden; }

/* ===== autocomplete mínimo ===== */
.ac-box{
  position:absolute; top:100%; left:0; right:0; z-index:1060;
  background:#fff; border:1px solid var(--v-border); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:none; max-height:320px; overflow:auto;
}
.ac-item{
  padding:.5rem .75rem; cursor:pointer; display:flex; justify-content:space-between; gap:.75rem;
}
.ac-item small{ color:#6b7280; }
.ac-item:hover{ background:#f6f7f8; }
/* ===== Navbar refinada ===== */
.navbar{ background:#111 !important; padding-top:.45rem; padding-bottom:.45rem; }
.brand-logo{ height:38px; width:auto; display:block; }
@media (min-width: 992px){ .brand-logo{ height:44px; } }

.search-input{ width:320px; max-width:38vw; }
@media (max-width: 991.98px){ .search-input{ width:100%; max-width:none; } }

/* Botão “fantasma” claro dentro da navbar */
.btn-ghost{
  background:transparent; 
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.35); color:#fff; }

/* Favoritos – badge discreto */
.nav-fav{ position:relative; }
.badge-counter{
  position:absolute; top:-6px; right:-6px;
  font-size:.65rem; padding:.25em .45em;
  box-shadow:0 0 0 2px #111;   /* anel pra destacar no fundo escuro */
}

/* Mega menu mais largo e organizado */
.dropdown-mega .dropdown-menu.mega{ width:min(920px, 96vw); }
.mega-item{ padding:.35rem .5rem; border-radius:.5rem; text-decoration:none; color:#111; }
.mega-item:hover{ background:#f6f7f8; }