/*
    Página de ofertas. Herda tudo da Categoria (.dept-hero, .sort-bar, .products)
    e só acrescenta: cor do hero por tipo, espaço de logo e estado vazio.
*/

/* ---------- hero ---------- */
.oferta-hero-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.oferta-hero-texto{min-width:0}
.oferta-hero-sub{
  margin-top:6px;font-size:15px;color:rgba(255,255,255,.85);max-width:52ch;
}

/* Clube = roxo, atacarejo = laranja: mesmas cores dos selos nos cards */
.oferta-hero--clube{background:linear-gradient(120deg,#3d1b86 0%,#7a3df5 100%)}
.oferta-hero--atacarejo{background:linear-gradient(120deg,#8f4100 0%,#e8730c 100%)}

/* Imagem do hero: banner da campanha (url_img_banner) */
.oferta-hero-img{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.oferta-hero-img img{
  display:block;max-height:120px;max-width:320px;width:auto;height:auto;
  border-radius:12px;object-fit:contain;
}

/* Logo do clube (fallback): fundo branco porque logo vem em qualquer cor
   e não pode sumir no roxo */
.oferta-hero-img--logo{
  background:#fff;border-radius:14px;padding:12px 18px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.oferta-hero-img--logo img{max-height:64px;max-width:180px;border-radius:0}

/* ---------- vazio ---------- */
.oferta-vazio{
  max-width:460px;margin:56px auto;text-align:center;padding:0 20px;
}
.oferta-vazio-icone{font-size:40px;margin-bottom:12px}
.oferta-vazio h2{margin:0 0 8px;font-family:'Sora',sans-serif;font-size:20px}
.oferta-vazio p{margin:0 0 22px;color:#5d6b65;font-size:14.5px;line-height:1.55}
.oferta-vazio-acoes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

@media (max-width:640px){
  .oferta-hero-inner{flex-direction:column-reverse;align-items:flex-start;gap:14px}
  .oferta-hero-img img{max-height:80px;max-width:100%}
  .oferta-hero-img--logo{padding:8px 12px}
  .oferta-hero-img--logo img{max-height:44px}
}