/* BELMIBeauty 3.6.2: only expanded navigation and seven carousel controls. */
.nav-links{white-space:nowrap}
/* Keep the original visual design; use the existing compact menu on tablets. */
@media(min-width:1000px) and (max-width:1119px){
 .nav-links{display:none}
 .menu-btn{display:flex!important}
 .mobile-menu:not([hidden]){display:block!important}
}
.mobile-menu .belmi-mobile-treatments>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;min-height:44px;padding:12px 4px;border-bottom:1px solid var(--line);font-size:.9rem;font-weight:600;cursor:pointer}
.mobile-menu .belmi-mobile-treatments>summary::-webkit-details-marker{display:none}
.mobile-menu .belmi-mobile-treatments>summary::marker{content:""}
.mobile-menu .belmi-mobile-treatments[open]>summary .belmi-facials-chevron{transform:rotate(180deg)}
.mobile-menu .belmi-mobile-treatment-links{padding:4px 0 8px 12px}
.mobile-menu .belmi-mobile-treatments>summary:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
/* Seven dots fit with Pause and the counter, retaining their 44 px height. */
@media(max-width:599px){
 #hero .hero-ui{left:18px;right:18px;gap:6px}
 #hero #heroDots{flex:1 1 auto;min-width:0}
 #hero #heroDots .dot,#hero #heroDots .dot.active{flex:1 1 0;min-width:24px;width:auto!important;height:44px}
 #hero #heroDots .dot:after{left:50%;transform:translateX(-50%);width:14px}
 #hero #heroDots .dot.active:after{left:50%;width:20px}
 #hero .hero-pause{flex:0 0 44px;margin-left:0}
 #hero .hero-counter{flex:0 0 auto;margin-left:0}
}