.sw-mobile-navigation,
.sw-mobile-menu-toggle,
.sw-mobile-drawer:not([open]),
.header .menu-logged-in > .sw-mobile-account {
    display: none;
}

.single-product.sw-has-mobile-navigation .section-addtocart .col-product-name {
    flex: 0 0 50%;
    width: 50%;
    min-width: 0;
}
.single-product.sw-has-mobile-navigation .section-addtocart .col-product-name .product-title {
    max-width: 100%;
}
.single-product.sw-has-mobile-navigation .section-addtocart .col-addtocart-actions {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

@media (max-width: 767px) {
    #masthead.header.sw-mobile-header-scroll {
        position: fixed;
        top: 0;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        transition: background-color 200ms linear;
    }
    #masthead.header.sw-mobile-header-hidden {
        pointer-events: none;
    }
    /* Keep revealed controls readable over page content, preserving the hero at the top. */
    #masthead.header.sw-mobile-header-away {
        background: #fff;
    }
    #masthead.header.sw-mobile-header-away:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) {
        background: rgb(15 24 34 / 95%);
    }
    @media (prefers-reduced-motion: reduce) {
        #masthead.header.sw-mobile-header-scroll { transition: none; }
    }

    .sw-has-mobile-navigation {
        --sw-mobile-navigation-height: calc(76px + env(safe-area-inset-bottom, 0px));
        padding-bottom: var(--sw-mobile-navigation-height);
    }

    .sw-mobile-navigation {
        position: fixed;
        z-index: 990;
        inset: auto 0 0;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(min-content, 1fr);
        box-sizing: border-box;
        height: var(--sw-mobile-navigation-height);
        padding: 3px max(3px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(3px, env(safe-area-inset-left, 0px));
        background: #eaf2fc;
        border-top: 1px solid #d8dfe8;
        box-shadow: 0 -4px 20px rgb(20 44 70 / 6%);
    }

    .sw-mobile-navigation a {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 3px;
        padding: 0;
        border-radius: 5px;
        color: #42546b;
        font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, sans-serif;
        font-size: clamp(10px, 3.2vw, 13px);
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .sw-mobile-navigation a span { max-width: 100%; }
    .sw-mobile-navigation a svg {
        flex-shrink: 0;
        width: 33.125px;
        height: 33.125px;
        /* Enlarge the artwork 25% while preserving its rendered stroke weight. */
        stroke-width: 1.28;
        overflow: visible;
        filter: drop-shadow(0 2px 0 rgb(164 186 211 / 50%));
    }
    .sw-mobile-navigation .sw-mobile-icon-surface { fill: #fff; fill-opacity: 1; }
    .sw-mobile-navigation svg text {
        fill: #fff;
        stroke: currentColor;
        stroke-width: .8;
        paint-order: stroke fill;
    }
    .sw-mobile-navigation a { --sw-icon-accent: #3885e0; --sw-icon-outline: #205391; }
    .sw-mobile-navigation a[data-nav-icon="reading"] { --sw-icon-accent: #16a085; --sw-icon-outline: #116451; }
    .sw-mobile-navigation a[data-nav-icon="spelling"] { --sw-icon-accent: #9764d6; --sw-icon-outline: #623598; }
    .sw-mobile-navigation a[data-nav-icon="cards"] { --sw-icon-accent: #3885e0; --sw-icon-outline: #205391; }
    .sw-mobile-navigation a[data-nav-icon="assessment"] { --sw-icon-accent: #e34f79; --sw-icon-outline: #9c284a; }
    .sw-mobile-navigation a[data-nav-icon="how-it-works"] { --sw-icon-accent: #f4bd32; --sw-icon-outline: #8a6209; }
    .sw-mobile-navigation a:hover { color: #1766b0; background: #d5e5f8; }
    .sw-mobile-navigation a:is([aria-current], .is-active-section) {
        color: #263c54;
        background: #fff;
        box-shadow: 0 2px 4px rgb(36 60 86 / 15%);
    }
    .sw-mobile-navigation a:is([aria-current], .is-active-section) svg { color: var(--sw-icon-outline); }
    .sw-mobile-navigation a:is([aria-current], .is-active-section) .sw-mobile-icon-surface,
    .sw-mobile-navigation a:is([aria-current], .is-active-section) svg rect,
    .sw-mobile-navigation a:is([aria-current], .is-active-section) svg text {
        fill: var(--sw-icon-accent);
        fill-opacity: 1;
    }
    .sw-mobile-navigation a:is([aria-current], .is-active-section):is([data-nav-icon="reading"], [data-nav-icon="assessment"]) svg > path:not(.sw-mobile-icon-surface, .sw-mobile-icon-spine) {
        stroke: #fff;
    }
    .sw-mobile-navigation a:is([aria-current], .is-active-section)[data-nav-icon="cards"] svg rect {
        fill: #fff;
    }
    .sw-mobile-navigation a:is([aria-current], .is-active-section)[data-nav-icon="cards"] .sw-mobile-card-band {
        fill: var(--sw-icon-accent);
        fill-opacity: 1;
    }
    .sw-mobile-navigation a:is([aria-current], .is-active-section)[data-nav-icon="cards"] .sw-mobile-card-number {
        stroke: #fff;
    }
    .sw-mobile-navigation a[data-nav-icon="spelling"] svg text {
        fill: #42546b;
        stroke: none;
    }
    .sw-mobile-navigation a[data-nav-icon="spelling"]:is([aria-current], .is-active-section) svg text {
        fill: #5547cd;
    }
    .sw-mobile-navigation--overflow { overflow-x: auto; }
    .sw-mobile-navigation--overflow a { min-width: 58px; }
    .sw-mobile-navigation--overflow { grid-auto-columns: minmax(58px, 1fr); }
    .sw-mobile-navigation a:focus-visible,
    .header .sw-mobile-account a:focus-visible,
    .header .nav-cart:focus-visible { outline: 2px solid #1766b0; outline-offset: -2px; }

    .header .nav-menubtn,
    .header .sw--nav-wrap > [class*="-container"],
    .header .menu-logged-in > li:not(.sw-mobile-account):not(.nav-cart-item) { display: none; }
    .header .nav-main { flex: 0 0 auto; flex-wrap: nowrap; gap: 2px; margin-left: auto; }
    .header .sw--nav-wrap,
    .header .nav-main .menu-logged-in { display: flex; align-items: center; width: auto; margin: 0; padding: 0; }
    .header .menu-logged-in > .sw-mobile-account,
    .header .menu-logged-in > .nav-cart-item { display: block; margin: 0; }
    .header .sw-mobile-account svg {
        color: #afaaa7;
        stroke-width: 3;
        stroke-linecap: square;
        stroke-linejoin: round;
    }
    .header .sw-mobile-account svg circle { fill: currentColor; stroke: none; }
    /* The white-logo header rule fills every SVG path; keep control outlines open. */
    .header .sw-mobile-account svg path,
    .header .sw-mobile-menu-toggle svg path { fill: none !important; }
    .header .menu-logged-in > .sw-mobile-account > a,
    .header .menu-logged-in > .nav-cart-item > a {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 44px;
        height: 48px;
        padding: 6px;
    }
    .header .site-branding { flex: 0 1 198px; min-width: 0; }
    .header .site-branding svg { max-width: 100%; height: auto; }
    .header .header-content { padding-left: 0; padding-right: 0; }

    .sw-mobile-menu-toggle {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        box-sizing: border-box;
        flex-shrink: 0;
        width: 80px;
        height: 42px;
        padding: 3px 7px;
        margin: 3px 5px 0 0;
        border: 1px solid #dce2e8;
        border-radius: 6px;
        background: #f0f3f6;
        box-shadow: inset 0 1px 0 #fff;
        color: #536279;
        cursor: pointer;
        transition: transform 100ms ease;
    }
    .sw-mobile-menu-toggle svg { flex-shrink: 0; color: #758395; stroke-width: 1.6; }
    .sw-mobile-menu-toggle span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 14px;
        font: 700 9px/1 'proxima-nova', sans-serif;
        letter-spacing: .18em;
        white-space: nowrap;
    }
    .sw-mobile-menu-toggle:active,
    .sw-mobile-menu-toggle[aria-expanded="true"] {
        background: #edf1f5;
        transform: translateY(.5px);
    }
    .sw-mobile-menu-toggle:focus,
    .sw-mobile-menu-toggle:focus-visible {
        outline: none;
        box-shadow: inset 0 1px 2px rgb(36 60 86 / 8%);
    }
    .sw-mobile-drawer button:focus-visible,
    .sw-mobile-drawer a:focus-visible { outline: 2px solid #1766b0; outline-offset: -2px; }

    /* Match controls to white-logo and dark-scrim headers, including fixed headers. */
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-account svg,
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-menu-toggle,
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-menu-toggle svg {
        color: #fff;
    }
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .nav-cart svg circle { fill: #fff; }
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .nav-cart svg polyline { stroke: #fff; }
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-menu-toggle {
        background: rgb(255 255 255 / 10%);
        border-color: rgb(255 255 255 / 45%);
        box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
    }
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-menu-toggle:is(:active, [aria-expanded="true"]) {
        background: rgb(255 255 255 / 18%);
    }
    .header:is(.sw--header--text--white, .sw--header--white, .sw--header--bg--scrim_black) .sw-mobile-menu-toggle:focus {
        box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%);
    }

    html.sw-mobile-menu-open { overflow: hidden; }
    .sw-mobile-drawer {
        position: fixed;
        inset: 0 0 0 auto;
        box-sizing: border-box;
        width: min(360px, calc(100% - 32px));
        height: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px));
        border: 0;
        border-radius: 18px 0 0 18px;
        background: #fff;
        color: #243c56;
        box-shadow: -12px 0 40px rgb(15 30 50 / 15%);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform 220ms ease;
        font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, sans-serif;
    }
    .sw-mobile-drawer.is-open { transform: translateX(0); }
    .sw-mobile-drawer::backdrop { background: rgb(15 24 34 / 40%); }
    .sw-mobile-drawer__heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding-right: 48px; margin-bottom: 20px; }
    .sw-mobile-drawer__heading h2 { margin: 0; color: inherit; font: 700 24px/1.2 'proxima-nova', sans-serif; }
    .sw-mobile-drawer__close {
        --close-top: max(12px, env(safe-area-inset-top, 0px));
        --close-right: max(12px, env(safe-area-inset-right, 0px));
        position: absolute;
        top: 0;
        right: 0;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: calc(56px + var(--close-right));
        height: calc(56px + var(--close-top));
        padding: var(--close-top) var(--close-right) 12px 12px;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        box-shadow: none;
        cursor: pointer;
    }
    .sw-mobile-drawer__close::before {
        content: '';
        position: absolute;
        top: var(--close-top);
        right: var(--close-right);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #f0f4f8;
        pointer-events: none;
    }
    .sw-mobile-drawer__close svg { position: relative; pointer-events: none; }
    .sw-mobile-drawer__list { padding: 0; margin: 0; list-style: none; }
    .sw-mobile-drawer__list li { padding: 0; margin: 0; list-style: none; }
    .sw-mobile-drawer__list a { display: flex; align-items: center; gap: 14px; padding: 15px 10px; border-radius: 8px; color: inherit; font-size: 18px; font-weight: 600; line-height: 1.3; text-decoration: none; }
    .sw-mobile-drawer__list a svg { flex: 0 0 26.5px; width: 26.5px; height: 26.5px; }
    .sw-mobile-drawer__list a:hover,
    .sw-mobile-drawer__list a[aria-current] { background: #eaf2fc; color: #1766b0; }
    .sw-mobile-drawer__list .sw-mobile-drawer__list { padding-left: 22px; border-left: 1px solid #e4eaf0; margin-left: 22px; }
    .sw-mobile-drawer__list .sw-mobile-drawer__list a { font-size: 16px; }

    /* The iframe-based Tidio widget also needs a page-level offset. Override
       the older homepage's 42px rule even before chat JavaScript initializes. */
    body.sw-has-mobile-navigation #tidio-chat-iframe {
        bottom: calc(var(--sw-mobile-navigation-height) + 12px) !important;
        max-height: calc(100% - var(--sw-mobile-navigation-height) - 12px) !important;
    }

    /* Keep existing floating controls above the navigation. Modals stay above it. */
    .sw-has-mobile-navigation .mobile-cta.scroll { bottom: var(--sw-mobile-navigation-height); }

    .single-product.sw-has-mobile-navigation .section-addtocart.sw--addtocartblock--bar-hidden,
    .single-product.sw-has-mobile-navigation .section-addtocart {
        top: var(--sw-mobile-header-space, 0px);
        bottom: auto;
        position: sticky;
        border-top: none;
        border-bottom: 1px solid #efefef;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sw-mobile-drawer,
    .sw-mobile-menu-toggle { transition: none; }
}

@media (max-width: 359px) {
    .sw-mobile-navigation a { letter-spacing: -.15px; }
}
