/* =====================================================================
   MENU — modernização do header/nav mantendo a MARCA (laranja/coral/vermelho)
   Camada adicional sobre main.css. Site-wide (carregado no header).
   ===================================================================== */

/* ---------- BARRA DE NAVEGAÇÃO ---------- */
.header-nav{border-top:1px solid #f1e9e3 !important;box-shadow:0 3px 14px rgba(0,0,0,.055) !important}
.nav-list{gap:2px !important}
.nav-item{display:flex;align-items:center}
.nav-link{
  padding:17px 22px !important;font-size:13px !important;font-weight:700 !important;letter-spacing:.06em !important;
  color:var(--text-primary) !important;border-bottom:0 !important;position:relative;transition:color .2s ease !important
}
/* underline animado (cresce da esquerda) na cor da marca */
.nav-link::after{content:"";position:absolute;left:22px;right:22px;bottom:11px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--primary-color),var(--tertiary-color));transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-link:hover{background:transparent !important;color:var(--primary-dark) !important}
.nav-link:hover::after,.nav-item.active>.nav-link::after{transform:scaleX(1)}
.nav-item.active>.nav-link{background:transparent !important;color:var(--primary-dark) !important}
.nav-item-categories .nav-link .fa-chevron-down{transition:transform .2s ease}
.nav-item-categories:hover .nav-link .fa-chevron-down{transform:rotate(180deg)}

/* PROMOÇÕES em destaque (pílula com gradiente da marca) */
.nav-link-promo{color:#fff !important;background:linear-gradient(135deg,var(--tertiary-color),var(--secondary-color)) !important;
  border-radius:999px !important;margin:8px 4px !important;padding:9px 18px !important;box-shadow:0 4px 12px rgba(242,102,102,.30) !important}
.nav-link-promo::after{display:none !important}
.nav-link-promo:hover{filter:brightness(.96);color:#fff !important}

/* ---------- MEGA DROPDOWN DE CATEGORIAS (2 colunas) ---------- */
.cat-dropdown{width:560px !important;max-width:90vw !important;border-radius:0 0 18px 18px !important;
  border-top:3px solid var(--primary-color) !important;box-shadow:0 22px 54px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.04) !important;
  transform:translateY(10px) !important;transition:opacity .2s ease,visibility .2s ease,transform .2s ease !important}
.nav-item-categories:hover>.cat-dropdown{transform:translateY(0) !important}
.cat-drop-list{display:grid !important;grid-template-columns:1fr 1fr !important;gap:2px 8px !important;padding:14px !important;max-height:none !important;overflow:visible !important}
.cat-drop-item{border-left:0 !important;border-radius:11px !important;padding:11px 14px !important;font-size:.9rem !important;font-weight:600 !important;color:var(--text-secondary) !important}
.cat-drop-item:hover{background:var(--primary-lighter) !important;color:var(--primary-dark) !important;padding-left:14px !important;transform:translateX(2px)}
.cat-drop-arrow{color:var(--primary-color) !important;opacity:.55;font-size:.7rem !important}
.cat-drop-item:hover .cat-drop-arrow{opacity:1}
.cat-drop-footer{border-top:1px solid #f1e9e3 !important;padding:14px !important;display:flex;justify-content:flex-end}
.cat-drop-link{display:inline-flex !important;align-items:center;gap:8px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)) !important;
  color:#fff !important;padding:10px 18px !important;border-radius:10px !important;font-weight:800 !important;font-size:.85rem !important;text-decoration:none;
  box-shadow:0 6px 16px rgba(242,131,107,.3)}
.cat-drop-link:hover{filter:brightness(.96);gap:11px}

/* ---------- MENU MOBILE (polimento leve) ---------- */
.mobile-accordion>summary{font-weight:800;letter-spacing:.04em}
.mobile-category-link{border-radius:10px;transition:background .15s ease,color .15s ease,padding-left .15s ease}
.mobile-category-link:hover,.mobile-category-link:active{background:var(--primary-lighter) !important;color:var(--primary-dark) !important;padding-left:18px}
.mobile-category-link i{color:var(--primary-color)}
.mobile-nav-link:hover,.mobile-nav-link:active{color:var(--primary-color) !important}
.mobile-quick-link{border-radius:12px !important}

/* dropdown responsivo: em telas médias, 1 coluna e largura menor */
@media (max-width:1024px){ .cat-dropdown{width:340px !important} .cat-drop-list{grid-template-columns:1fr !important} }