/* 1) Make the CTA bar visible on DESKTOP too */
.mobile-cta { display: block !important; }
/* 2) Desktop layout: align nicely to the right, single row */
@media (min-width: 992px) {
.mobile-cta .header-btn {
display: flex;
flex-wrap: nowrap;
gap: 10px;
justify-content: flex-end; /* push buttons to the right */
align-items: center;
}
/* Desktop dropdown should open on hover as well as click */
.mobile-cta .dropdown { position: relative; }
.mobile-cta .dropdown-menu {
display: none;
position: absolute;
top: 40px; /* adjust to taste */
right: 0;
z-index: 1000;
min-width: 200px;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.mobile-cta .dropdown.show .dropdown-menu,
.mobile-cta .dropdown.open .dropdown-menu,
.mobile-cta .dropdown:hover .dropdown-menu { display: block; }
}
/* 3) Mobile layout: keep wrapping so nothing gets cut off */
@media (max-width: 991.98px) {
.mobile-cta .header-btn {
display: flex;
flex-wrap: wrap; /* ensures "Specials" never disappears */
gap: 6px;
justify-content: center;
align-items: center;
}
/* Tap-to-open if no Bootstrap JS */
.mobile-cta .dropdown:focus-within .dropdown-menu { display: block; }
}
/* 4) (Optional) If you only want ONE bar, hide the LP variant everywhere */
.mobile-cta-lp { display: none !important; }
