/* ===== TOKENS (paleta leve) ===== */
:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --ink:#0b0d13;
  --muted:#667085;

  --primary:#3f2b5a;    /* roxo principal */
  --primary-600:#4b2f73;
  --accent:#d3121b;     /* vermelho CTA */
  --accent-600:#b70f18;

  --border:rgba(10,13,18,.08);
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --radius:16px;

  /* altura aproximada da announce-bar (ajuste se mudar a faixa) */
  --announce-h: 32px;
}

/* ===== FAIXA DE COMUNICADOS ACIMA DO TOPO ===== */
.announce-bar{
  position:sticky;
  top:0;
  z-index:120;
  background:#c0124f;
  color:#fff;
  font-size:13px;
}
.announce-bar__inner{
  max-width:1200px;
  margin:0 auto;
  padding:6px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:600;
}
.announce-bar__msg strong{ font-weight:800; }

/* ===== TOPO (header/topbar) ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:110;
  background:var(--primary);
  color:#ffffff;
  border-bottom:1px solid rgba(0,0,0,.28);
  box-shadow:0 10px 30px rgba(15,23,42,.28);
}

/* se a announce-bar estiver logo antes do header, empurra o topo */
.announce-bar + .topbar{
  top: var(--announce-h);
}

.topbar .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:68px;               /* um pouco menor que 72px */
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Marca */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
}
.brand b{ color:#ffffff }
.brand img{ height:42px; display:block }          /* desktop “normal” */

/* garante roxo no fallback de texto */
.brand .brand-text{ color:#ffffff; font-weight:800; letter-spacing:.2px; }
.brand .brand-text b{ color:#ffffff; }

/* ===== NAV / MENU (antigo - mantém caso você use em outra página) ===== */
.nav{ display:flex; align-items:center; gap:18px; position:relative }
.nav a{
  color:rgba(255,255,255,.82); text-decoration:none; font-weight:600;
  padding:8px 6px; border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
.nav a:hover{
  color:#ffffff;
  background:rgba(0,0,0,.18);
}

/* Dropdown simples */
.has-dropdown{ position:relative }
.has-dropdown > .trigger{
  display:inline-flex; align-items:center; gap:8px;
}
.has-dropdown > .trigger::after{
  content:"▾"; font-size:12px; opacity:.8;
}
.dropdown{
  position:absolute; top:100%; left:0; min-width:220px;
  background:var(--surface);
  border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow);
  padding:8px; display:none;
}
.has-dropdown:hover > .dropdown{ display:block }
.dropdown a{
  display:block; padding:10px 12px; border-radius:8px; color:var(--ink);
}
.dropdown a:hover{ background:#f5f6fa; color:var(--primary) }

/* ===== ações do topo (desktop) ===== */
.actions{ display:flex; align-items:center; gap:8px }
.actions a{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 10px; border-radius:10px;
  color:#ffffff; text-decoration:none; border:1px solid transparent;
}
.actions a:hover{
  background:rgba(0,0,0,.18);
  border-color:rgba(255,255,255,.25);
}
.actions .label{ font-weight:700; font-size:14px }
.actions .badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--accent); color:#fff; border-radius:999px;
  padding:0 6px; font-size:.72rem; line-height:18px;
}

/* ===== MEGA MENU NOVO (do header) =====
   (se você já colocou o mega menu no header.php, ele usa essas classes)
*/
.ls-meganav{
  position:relative;
  background: rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.06);
}
.ls-meganav-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
  max-width:1200px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
.ls-mega-all{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px;
  background: rgba(255,255,255,.06);
  color:#fff; text-decoration:none; font-weight:800;
}
.ls-mega-items{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.ls-mega-item{ position:relative; }
.ls-mega-link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700;
  padding:8px 10px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ls-mega-link:hover{ background: rgba(255,255,255,.06); }

.ls-mega-badge{
  font-size:11px; font-weight:900; letter-spacing:.2px;
  padding:3px 8px; border-radius:999px;
  background: rgba(255,80,120,.18);
  border:1px solid rgba(255,80,120,.28);
  color:#ffd3df;
}

/* painel */
.ls-mega-panel{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  padding-top:12px;
  z-index:9999;
}
.ls-mega-item:hover .ls-mega-panel,
.ls-mega-item:focus-within .ls-mega-panel{ display:block; }

.ls-mega-panel-inner{
  position:relative;
  width:min(920px, 92vw);
  background: rgba(10,14,30,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  padding:14px;
  overflow:hidden;
}

.ls-mega-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ls-mega-title{ color:#fff; font-weight:900; font-size:14px; }
.ls-mega-seeall{
  color: rgba(255,255,255,.75);
  text-decoration:none;
  font-size:12px;
}
.ls-mega-seeall:hover{ text-decoration:underline; }

.ls-mega-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap:10px;
  padding-right: 200px; /* espaço pro destaque (banner) */
}
.ls-mega-col{ display:flex; flex-direction:column; gap:8px; }
.ls-mega-sub{
  color: rgba(255,255,255,.86);
  text-decoration:none;
  font-size:13px;
}
.ls-mega-sub:hover{ color:#fff; text-decoration:underline; }

.ls-mega-feature{
  position:absolute;
  right:14px; top:14px; bottom:14px;
  width: 170px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  text-decoration:none;
  display:flex;
  flex-direction:column;
}
.ls-mega-feature img{ width:100%; height:100%; object-fit:cover; opacity:.95; }
.ls-mega-feature-txt{
  position:absolute;
  left:10px; bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,.18);
}

/* mega menu só desktop */
@media (max-width: 920px){
  .ls-meganav{ display:none; }
}

/* ===== HAMBURGUER & MOBILE MENU (se você ainda usar em alguma tela) ===== */
.hamburger{
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#ffffff;
  align-items:center; justify-content:center;
  font-size:20px; cursor:pointer;
}
.mobile-panel{
  display:none; position:fixed; inset:72px 0 auto 0; background:#ffffff; z-index:95;
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
}
.mobile-panel .list{ padding:10px 16px; display:flex; flex-direction:column; gap:10px }
.mobile-panel a{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:10px 8px; border-radius:8px
}
.mobile-panel a:hover{ background:#f5f6fa }

/* ===== BOTTOM NAV (só mobile) ===== */
.mobile-bottom{
  position:fixed; inset:auto 0 0 0; z-index:98;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  display:none;
}
.mobile-bottom .bar{
  max-width:1200px; margin:0 auto; padding:8px 12px;
  display:flex; justify-content:space-around; gap:8px;
}
.mobile-bottom a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:8px 6px; text-decoration:none;
  color:var(--muted); font-weight:700; font-size:12px; border-radius:10px;
}
.mobile-bottom a:active, .mobile-bottom a:hover{
  color:var(--primary); background:rgba(63,43,90,.06)
}

/* Mostrar comportamento mobile */
@media (max-width: 760px){
  .nav{ display:none }
  .hamburger{ display:flex }
  .mobile-bottom{ display:block }
}

/* ===== Mobile: só o logo centralizado no topo, bottom-nav ativo ===== */
@media (max-width:760px){
  .actions{ display:none !important; }
  .hamburger{ display:none !important; }

  .topbar .row{ justify-content:center; }
  .brand{ margin:0 auto; }

  /* logo maior só no mobile (sem estourar o header) */
  .brand img.logo{ height:60px; }

  .mobile-bottom{ display:block !important; }
}

/* ===== TOPO roxo no MOBILE (reforço) ===== */
@media (max-width:760px){
  .topbar{
    background:var(--primary) !important;
    color:#fff;
    border-bottom-color:rgba(0,0,0,.2);
    backdrop-filter:none;
  }
  .brand span,
  .brand b { color:#fff !important; }
}

/* ===== MOBILE: hero compacto ao rolar ===== */
@media (max-width:760px){
  .hero-top{ transition: padding .2s ease; }
  .hero-top .frete-grid,
  .hero-top .search input{ transition: all .2s ease; }

  .hero-top.compact .frete-grid{
    opacity:0;
    height:0;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  .hero-top .search input{ height:42px; }
  .hero-top.compact .search input{ height:34px; border-radius:10px; }
}

/* ===== MOBILE BOTTOM NAV (Visual Premium Limpo) ===== */
@media (max-width: 820px){
  body{ padding-bottom: calc(95px + env(safe-area-inset-bottom)); }

  .mobile-bottom{
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    height: 85px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: flex-end;
    padding-bottom: env(safe-area-inset-bottom);
    overflow: visible !important;
  }

  .mobile-bottom .bar{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    overflow: visible !important;
    padding-bottom: 10px;
  }

  .mobile-bottom .mitem{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    color: #667085;
    font-size: 11px;
    font-weight: 600;
    position: relative;
    padding-bottom: 2px;
  }
  .mobile-bottom .mi { font-size: 22px; margin-bottom: 4px; }
  .mobile-bottom .ml { line-height: 1; }

  .mobile-bottom .maccount.is-logged {
    overflow: visible;
    padding-bottom: 0;
  }

  .mobile-bottom .maccount.is-logged .account-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    width: 68px;
    height: 68px;

    background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.95), rgba(255,255,255,.60) 45%, rgba(124,58,237,.14) 100%);
    border: 1px solid rgba(124,58,237,.28);
    border-radius: 30%;
    box-shadow: 0 10px 14px rgba(17,24,39,.14), 0 2px 0 rgba(255,255,255,.8) inset;

    transform: translateY(3px);
    position: relative;
    z-index: 10000;
  }

  .mobile-bottom .maccount.is-logged .account-ic {
    width: 28px; height: 28px;
    background: rgba(124,58,237,.10);
    color: #7c3aed;
    border: 1px solid rgba(124,58,237,.22);
    border-radius: 38%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 4px;
  }

  .mobile-bottom .maccount.is-logged .account-ic svg { width: 16px; height: 16px; }

  .mobile-bottom .maccount.is-logged .account-txt {
    font-size: 10px;
    font-weight: 800;
    color: #4b5563;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-bottom .maccount.is-logged:active .account-chip {
    transform: translateY(3px) scale(0.95);
  }

  .mobile-bottom .mbadge{
    position: absolute; top: 0; right: 20%;
    background: #d3121b; color: #fff;
    font-size: 10px; font-weight: 800; padding: 2px 5px;
    border-radius: 10px; border: 2px solid #fff;
  }
}

@media (min-width: 821px){ .mobile-bottom{ display:none; } }

/* ===== FIX: mega menu visível no desktop ===== */
.ls-meganav{
  background: var(--primary) !important;          /* roxo */
  border-top: 0 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
}

.ls-meganav-row{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.ls-mega-link{
  color:#fff !important;
  opacity: 1 !important;
}

.ls-mega-link:hover{
  background: rgba(0,0,0,.18) !important;
}

.ls-mega-all{
  color:#fff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

.ls-mega-badge{
  color:#fff !important;
  background: rgba(211,18,27,.22) !important;
  border-color: rgba(211,18,27,.35) !important;
}

.ls-mega-link{ padding: 6px 8px !important; font-size: 13px !important; }
.ls-mega-items{ gap: 8px !important; }

/* ===========================================
   FALLBACK: menu mobile não pode aparecer aberto
   quando aria-hidden="true" (ex: login.php)
=========================================== */
.lsmm-backdrop[aria-hidden="true"],
.lsmm-panel[aria-hidden="true"]{
  display: none !important;
}