/* SKINBALANCE shared mobile navigation · HOME / inner pages / treatment detail */
.skinbalance-theme .menu,
.skinbalance-theme .mobile-menu-meta { display: none; }
.skinbalance-theme .nav-external-icon { display: none; }
.skinbalance-theme .menu .menu-line {
    display: block; width: 17px; height: 1px; background: currentColor;
    transform-origin: center; transition: transform .22s ease, opacity .22s ease;
}

@media (max-width: 1250px) {
    .skinbalance-theme {
        --sb-mobile-plum: var(--sb-plum, var(--plum, #3d2b3d));
        --sb-mobile-blush: var(--sb-blush, var(--blush, #f9f3f0));
        --sb-mobile-skin: var(--sb-skin, var(--skin, #d8aa98));
        --sb-mobile-gold: var(--sb-gold, var(--gold, #b78a52));
        --sb-mobile-muted: var(--sb-muted, var(--muted, #766a70));
        --sb-mobile-line: var(--sb-line, var(--line, rgba(61,43,61,.14)));
        --sb-mobile-header-height: 74px;
    }

    html.menu-open,
    body.skinbalance-theme.menu-open { overflow: hidden !important; overscroll-behavior: none; }

    /* Same mobile header geometry everywhere. */
    body.skinbalance-theme > nav.sb-special-nav,
    body.skinbalance-theme .header,
    body.skinbalance-theme .header .nav {
        height: var(--sb-mobile-header-height) !important;
        min-height: var(--sb-mobile-header-height) !important;
    }
    body.skinbalance-theme > nav.sb-special-nav {
        padding: .65rem 6vw !important;
        background: color-mix(in srgb, var(--sb-mobile-blush) 96%, transparent) !important;
        border-bottom: 1px solid var(--sb-mobile-line) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    body.skinbalance-theme .header .nav { padding: .65rem 0 !important; }

    body.skinbalance-theme > nav.sb-special-nav .logo,
    body.skinbalance-theme .header .logo {
        display: inline-flex !important; align-items: center !important;
        height: 52px !important; min-width: 0 !important; overflow: visible !important; z-index: 142;
    }
    body.skinbalance-theme > nav.sb-special-nav .logo img,
    body.skinbalance-theme .header .logo img {
        display: block !important;
        width: var(--cms-logo-width-mobile, 148px) !important;
        max-width: min(44vw, 180px) !important;
        height: auto !important; max-height: 46px !important;
        object-fit: contain !important; filter: none !important; opacity: 1 !important;
    }

    body.skinbalance-theme .menu,
    body.skinbalance-theme > nav.sb-special-nav .menu,
    body.skinbalance-theme .header .menu {
        position: relative; z-index: 142;
        display: inline-flex !important; flex: 0 0 42px;
        width: 42px !important; height: 42px !important; padding: 0 !important;
        border: 1px solid color-mix(in srgb, var(--sb-mobile-plum) 20%, transparent) !important;
        border-radius: 0 !important;
        background: color-mix(in srgb, var(--sb-mobile-blush) 86%, white 14%) !important;
        color: var(--sb-mobile-plum) !important;
        align-items: center; justify-content: center; flex-direction: column; gap: 5px;
        font-size: 0 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer;
    }
    body.skinbalance-theme .menu[aria-expanded="true"] .menu-line:first-child { transform: translateY(3px) rotate(45deg); }
    body.skinbalance-theme .menu[aria-expanded="true"] .menu-line:last-child { transform: translateY(-3px) rotate(-45deg); }

    /* Header itself becomes the cream top bar of the open drawer. */
    body.skinbalance-theme.menu-open .header,
    body.skinbalance-theme.menu-open.header-solid .header,
    body.skinbalance-theme.menu-open.header-home-transparent .header,
    body.skinbalance-theme.menu-open > nav.sb-special-nav {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 140 !important;
        background: var(--sb-mobile-blush) !important; color: var(--sb-mobile-plum) !important;
        border-bottom: 1px solid var(--sb-mobile-line) !important; box-shadow: none !important;
    }

    .skinbalance-theme .nav-overlay {
        position: fixed; inset: 0; z-index: 118; border: 0;
        background: rgba(61,43,61,.28) !important;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .skinbalance-theme .nav-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

    /* One premium cream drawer, intentionally later/more specific than legacy black off-canvas CSS. */
    body.skinbalance-theme .nav-links,
    body.skinbalance-theme.header-global-transparent .nav-links,
    body.skinbalance-theme.header-solid .nav-links,
    body.skinbalance-theme.header-home-transparent .nav-links,
    body.skinbalance-theme > nav.sb-special-nav .nav-links {
        position: fixed !important;
        inset: var(--sb-mobile-header-height) 0 0 auto !important;
        z-index: 130 !important;
        display: flex !important;
        width: min(420px, 100vw) !important; max-width: 100vw !important;
        height: calc(100dvh - var(--sb-mobile-header-height)) !important;
        margin: 0 !important; padding: 20px 28px 28px !important;
        flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
        list-style: none !important; border: 0 !important;
        background: var(--sb-mobile-blush) !important; color: var(--sb-mobile-plum) !important;
        box-shadow: -20px 16px 45px rgba(61,43,61,.12) !important;
        overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
        transform: translateX(104%) !important; opacity: 1 !important;
        visibility: hidden !important; pointer-events: none !important;
        transition: transform .36s cubic-bezier(.22,.8,.22,1), visibility .36s ease !important;
    }
    body.skinbalance-theme .nav-links.open,
    body.skinbalance-theme.header-global-transparent .nav-links.open,
    body.skinbalance-theme.header-solid .nav-links.open,
    body.skinbalance-theme.header-home-transparent .nav-links.open,
    body.skinbalance-theme > nav.sb-special-nav .nav-links.open {
        transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important;
    }

    body.skinbalance-theme .nav-links > a:not(.btn):not(.nav-cta),
    body.skinbalance-theme > nav.sb-special-nav .nav-links > a:not(.nav-cta) {
        position: relative; display: flex !important; align-items: center !important; justify-content: flex-start !important;
        flex: 0 0 auto !important; min-height: 54px !important;
        margin: 0 !important; padding: 0 2px !important;
        border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--sb-mobile-plum) 11%, transparent) !important;
        border-radius: 0 !important; background: transparent !important;
        color: color-mix(in srgb, var(--sb-mobile-plum) 72%, var(--sb-mobile-muted) 28%) !important;
        font-family: var(--sb-body-font, 'DM Sans', sans-serif) !important;
        font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: .08em !important;
        text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important;
    }

    /* No decorative arrows on ordinary links. */
    body.skinbalance-theme .nav-links > a:not(.btn):not(.nav-cta)::after,
    body.skinbalance-theme > nav.sb-special-nav .nav-links > a:not(.nav-cta)::after { content: none !important; }

    /* Real external links: hide the legacy text/emoji marker on mobile and use one clean SVG icon. */
    body.skinbalance-theme .nav-links > a[target="_blank"]:not(.btn):not(.nav-cta) .nav-external-text-marker,
    body.skinbalance-theme > nav.sb-special-nav .nav-links > a[target="_blank"]:not(.nav-cta) .nav-external-text-marker {
        display: none !important;
    }
    body.skinbalance-theme .nav-links > a[target="_blank"]:not(.btn):not(.nav-cta) .nav-external-icon,
    body.skinbalance-theme > nav.sb-special-nav .nav-links > a[target="_blank"]:not(.nav-cta) .nav-external-icon {
        display: block !important;
        flex: 0 0 14px; width: 14px; height: 14px;
        margin-left: auto; margin-right: 2px;
        color: var(--sb-mobile-gold); opacity: .88;
    }

    body.skinbalance-theme .nav-links > a.active:not(.btn):not(.nav-cta),
    body.skinbalance-theme > nav.sb-special-nav .nav-links > a.active:not(.nav-cta) {
        padding-left: 13px !important; color: var(--sb-mobile-plum) !important;
        border-bottom-color: color-mix(in srgb, var(--sb-mobile-gold) 45%, transparent) !important;
        box-shadow: inset 2px 0 0 var(--sb-mobile-gold) !important;
    }

    body.skinbalance-theme .nav-links > .btn,
    body.skinbalance-theme .nav-links > .nav-cta,
    body.skinbalance-theme > nav.sb-special-nav .nav-links > .nav-cta {
        display: inline-flex !important; align-items: center !important; justify-content: center !important;
        width: 100% !important; min-height: 48px !important;
        margin: 22px 0 18px !important; padding: .75rem 1.25rem !important;
        border: 1px solid var(--sb-mobile-plum) !important; border-radius: 999px !important;
        background: var(--sb-mobile-plum) !important; color: var(--sb-mobile-blush) !important;
        font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: .1em !important;
        text-align: center !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important;
    }
    body.skinbalance-theme .nav-links > .btn:hover,
    body.skinbalance-theme .nav-links > .nav-cta:hover,
    body.skinbalance-theme > nav.sb-special-nav .nav-links > .nav-cta:hover {
        background: var(--sb-mobile-gold) !important; border-color: var(--sb-mobile-gold) !important; color: var(--sb-mobile-blush) !important;
    }

    body.skinbalance-theme .mobile-menu-meta {
        display: block !important; margin-top: auto !important; padding: 24px 2px 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--sb-mobile-plum) 12%, transparent) !important;
        color: var(--sb-mobile-muted) !important;
    }
    body.skinbalance-theme .mobile-menu-contact { display: grid !important; gap: 8px !important; }
    body.skinbalance-theme .mobile-menu-contact a {
        color: var(--sb-mobile-muted) !important; font-size: 12px !important; line-height: 1.45 !important;
        letter-spacing: .01em !important; text-decoration: none !important; text-transform: none !important;
    }
    body.skinbalance-theme .mobile-menu-social { display: flex !important; align-items: center !important; gap: 9px !important; margin-top: 16px !important; }
    body.skinbalance-theme .mobile-menu-social a {
        display: inline-grid !important; place-items: center !important; width: 36px !important; height: 36px !important;
        border: 1px solid color-mix(in srgb, var(--sb-mobile-plum) 16%, transparent) !important;
        background: transparent !important; color: var(--sb-mobile-plum) !important; text-decoration: none !important;
    }
    body.skinbalance-theme .mobile-menu-social svg { width: 15px !important; height: 15px !important; fill: currentColor !important; }

    /* Inner fixed headers use the same 74px mobile compensation as HOME. */
    body.skinbalance-theme:not(.home-page) main { padding-top: var(--sb-mobile-header-height) !important; }
}

@media (max-width: 640px) {
    body.skinbalance-theme .nav-links,
    body.skinbalance-theme.header-global-transparent .nav-links,
    body.skinbalance-theme.header-solid .nav-links,
    body.skinbalance-theme.header-home-transparent .nav-links,
    body.skinbalance-theme > nav.sb-special-nav .nav-links {
        width: 100vw !important; padding: 18px 6vw 26px !important; box-shadow: none !important;
    }
    .skinbalance-theme .nav-overlay { display: none !important; }
}

@media (min-width: 1251px) {
    .skinbalance-theme .menu,
    .skinbalance-theme .nav-overlay { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .skinbalance-theme .nav-links,
    .skinbalance-theme .nav-overlay,
    .skinbalance-theme .menu-line { transition: none !important; }
}