@font-face {
            font-family: "Readex Pro";
            src: url("/static/fonts/ReadexPro-variable.woff2") format("woff2");
            font-style: normal;
            font-weight: 160 700;
            font-display: swap;
        }
        :root {
            --silkway-brown: #231C07;
            --silkway-deep: #122223;
            --silkway-slate: #354349;
            --silkway-green: #518C25;

            --silkway-bg: #F5F7F3;
            --silkway-surface: #FFFFFF;
            --silkway-border: #D9DFDA;
            --silkway-muted: #68736E;

            font-family:
                "Readex Pro",
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: var(--silkway-brown);
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            min-height: 100%;
        }

        body {
            margin: 0;
            background: var(--silkway-bg);
            color: var(--silkway-brown);
            font-family:
                "Readex Pro",
                system-ui,
                sans-serif;
            font-optical-sizing: auto;
        }

        /* Every first-party form control inherits the locally hosted font. */
        button, input, select, textarea, option {
            font-family: "Readex Pro", system-ui, sans-serif;
        }

        a {
            color: var(--silkway-green);
        }

        /*
         * V0.8 A15 shared keyboard-accessibility primitives.
         */
        .skip-link {
            position: fixed;
            inset-block-start: 8px;
            inset-inline-start: 8px;
            z-index: 1000;
            padding: 9px 14px;
            border-radius: 8px;
            background: var(--silkway-surface);
            color: var(--silkway-deep);
            font-weight: 650;
            text-decoration: none;
            box-shadow: 0 5px 18px rgb(18 34 35 / 24%);
            transform: translateY(-180%);
            transition: transform 120ms ease;
        }

        .skip-link:focus,
        .skip-link:focus-visible {
            transform: translateY(0);
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        [tabindex]:focus-visible {
            outline: 3px solid var(--silkway-green);
            outline-offset: 2px;
        }

        header.app-header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--silkway-deep);
            border-bottom: 3px solid var(--silkway-green);
            box-shadow: 0 4px 18px rgb(18 34 35 / 14%);
        }

        .container {
            width: min(
                1440px,
                calc(100% - 32px)
            );
            margin-inline: auto;
        }

        .nav {
            min-height: 70px;
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .brand {
            color: #FFFFFF;
            text-decoration: none;
            font-size: 1.05rem;
            font-weight: 650;
            letter-spacing: 0.01em;
            white-space: nowrap;
            margin-inline-end: 8px;
        }

        .brand-mark {
            color: var(--silkway-green);
            font-weight: 700;
        }

        .nav-links,
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .nav-links {
            flex: 1;
            min-width: 0;
        }

        .nav-actions {
            margin-inline-start: auto;
            white-space: nowrap;
        }

        .nav-link,
        .account-link,
        .dropdown-summary {
            min-height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 12px;
            border-radius: 8px;
            color: #FFFFFF;
            text-decoration: none;
            border: 1px solid transparent;
            background: transparent;
            font: inherit;
            cursor: pointer;
        }

        .nav-link:hover,
        .account-link:hover,
        .dropdown-summary:hover {
            background: var(--silkway-slate);
            color: #FFFFFF;
        }

        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown summary {
            list-style: none;
        }

        .nav-dropdown summary::-webkit-details-marker {
            display: none;
        }

        .dropdown-summary::after {
            content: "▾";
            font-size: 0.75rem;
            margin-inline-start: 7px;
            opacity: 0.8;
        }

        .nav-dropdown[open] .dropdown-summary {
            background: var(--silkway-slate);
        }

        .dropdown-panel {
            position: absolute;
            inset-block-start: calc(100% + 8px);
            inset-inline-end: 0;
            min-width: 210px;
            padding: 8px;
            background: var(--silkway-surface);
            border: 1px solid var(--silkway-border);
            border-radius: 10px;
            box-shadow: 0 16px 36px rgb(18 34 35 / 20%);
            z-index: 200;
        }

        .dropdown-panel a {
            display: block;
            padding: 10px 12px;
            color: var(--silkway-brown);
            text-decoration: none;
            border-radius: 7px;
        }

        .dropdown-panel a:hover {
            color: #FFFFFF;
            background: var(--silkway-green);
        }

        .language-form,
        .inline-form {
            margin: 0;
        }

        .language-select {
            min-height: 38px;
            border: 1px solid var(--silkway-slate);
            border-radius: 8px;
            padding: 6px 30px 6px 10px;
            background: #FFFFFF;
            color: var(--silkway-deep);
            font: inherit;
            cursor: pointer;
        }

        [dir="rtl"] .language-select {
            padding:
                6px
                10px
                6px
                30px;
        }

        button,
        .button {
            appearance: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 9px 15px;
            border: 1px solid var(--silkway-green);
            border-radius: 8px;
            background: var(--silkway-green);
            color: #FFFFFF;
            font: inherit;
            font-weight: 550;
            text-decoration: none;
            cursor: pointer;
        }

        button:hover,
        .button:hover {
            filter: brightness(0.94);
            color: #FFFFFF;
        }

        .button-secondary {
            background: var(--silkway-slate);
            border-color: var(--silkway-slate);
            color: #FFFFFF;
        }

        .signout-button {
            background: transparent;
            border-color: #FFFFFF55;
            color: #FFFFFF;
        }

        .signout-button:hover {
            background: var(--silkway-slate);
            border-color: var(--silkway-slate);
        }

        main {
            padding-block: 28px 48px;
        }

        h1,
        h2,
        h3,
        h4 {
            color: var(--silkway-deep);
            font-weight: 650;
        }

        .muted {
            color: var(--silkway-muted);
        }

        input,
        select,
        textarea {
            font-family:
                "Readex Pro",
                system-ui,
                sans-serif;
        }

        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea {
            border: 1px solid #BFC8C1;
            border-radius: 8px;
        }

        input:focus,
        select:focus,
        textarea:focus {
            outline: 2px solid rgb(81 140 37 / 22%);
            border-color: var(--silkway-green);
        }

        .messages {
            margin-block: 0 20px;
            display: grid;
            gap: 8px;
        }

        .message {
            padding: 12px 14px;
            background: #FFFFFF;
            border: 1px solid var(--silkway-border);
            border-inline-start: 4px solid var(--silkway-green);
            border-radius: 8px;
        }

        table {
            color: var(--silkway-brown);
        }

        th {
            color: var(--silkway-deep);
        }

        @media (max-width: 1050px) {
            .nav {
                flex-wrap: wrap;
                padding-block: 12px;
            }

            .brand {
                width: 100%;
            }

            .nav-links {
                order: 2;
                width: 100%;
                overflow-x: auto;
                padding-bottom: 4px;
            }

            .nav-actions {
                margin-inline-start: 0;
            }
        }

        @media (max-width: 720px) {
            .container {
                width: min(
                    100% - 20px,
                    1440px
                );
            }

            .nav-actions {
                width: 100%;
                overflow-x: auto;
            }

            .nav-link,
            .account-link,
            .dropdown-summary {
                padding-inline: 10px;
            }
        }

        /* ==============================================================
           V0.5 RESPONSIVE APPLICATION SHELL
           ============================================================== */

        .desktop-shell {
            min-height: 70px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 0;
        }

        .desktop-nav .nav-group > .dropdown-panel {
            inset-inline-start: 0;
            inset-inline-end: auto;
        }

        .desktop-shell .nav-actions {
            flex: 0 0 auto;
        }

        .quick-order-action {
            min-height: 40px;
            padding-inline: 14px;
            white-space: nowrap;
            font-weight: 650;
            box-shadow: 0 3px 10px rgb(81 140 37 / 20%);
        }

        .notification-bell {
            position: relative;
            width: 42px;
            height: 42px;
            min-width: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #FFFFFF55;
            border-radius: 50%;
            color: #FFFFFF;
            text-decoration: none;
            background: transparent;
        }

        .notification-bell:hover,
        .notification-bell:focus-visible {
            background: var(--silkway-slate);
            border-color: var(--silkway-slate);
            color: #FFFFFF;
        }

        .notification-bell svg {
            width: 21px;
            height: 21px;
        }

        .notification-badge {
            position: absolute;
            inset-block-start: -4px;
            inset-inline-end: -5px;
            min-width: 19px;
            height: 19px;
            padding: 0 5px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #518c25;
            color: #FFFFFF;
            font-size: .68rem;
            font-weight: 800;
            line-height: 1;
            box-shadow: 0 0 0 2px var(--silkway-deep);
        }

        .required-marker {
            margin-inline-start: 4px;
            color: #b42318;
            font-weight: 800;
            text-decoration: none;
        }

        .profile-dropdown {
            position: relative;
        }

        .profile-toggle {
            width: 42px;
            height: 42px;
            min-width: 42px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #FFFFFF55;
            border-radius: 50%;
            background: transparent;
            color: #FFFFFF;
            cursor: pointer;
        }

        .profile-toggle:hover,
        .profile-dropdown[open] .profile-toggle {
            background: var(--silkway-slate);
            border-color: var(--silkway-slate);
        }

        .profile-toggle::after {
            display: none;
        }

        .profile-toggle svg {
            width: 22px;
            height: 22px;
            display: block;
        }

        .profile-panel {
            width: min(260px, calc(100vw - 24px));
            min-width: min(260px, calc(100vw - 24px));
            max-width: calc(100vw - 24px);
            right: auto;
            left: auto;
            inset-inline-start: auto;
            inset-inline-end: 0;
            padding: 10px;
        }

        .profile-identity {
            padding: 8px 10px 11px;
            margin-bottom: 8px;
            border-bottom: 1px solid var(--silkway-border);
        }

        .profile-identity strong {
            display: block;
            color: var(--silkway-deep);
            overflow-wrap: anywhere;
        }

        .profile-identity span {
            display: block;
            margin-top: 2px;
            color: var(--silkway-muted);
            font-size: 0.82rem;
        }

        .profile-language-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin: 0 0 8px;
        }

        .profile-language-row .language-choice {
            min-height: 38px;
            width: 100%;
            padding: 7px 8px;
            border: 1px solid var(--silkway-border);
            border-radius: 7px;
            background: #FFFFFF;
            color: var(--silkway-deep);
            font-weight: 550;
        }

        .profile-language-row .language-choice:hover {
            background: #EEF4EA;
            border-color: var(--silkway-green);
            color: var(--silkway-deep);
            filter: none;
        }

        .profile-language-row .language-choice.active {
            background: var(--silkway-green);
            border-color: var(--silkway-green);
            color: #FFFFFF;
        }

        .profile-action {
            display: flex !important;
            align-items: center;
            gap: 9px;
            width: 100%;
            min-height: 42px;
            padding: 9px 10px !important;
        }

        .profile-action svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
        }

        .profile-logout-form {
            margin: 5px 0 0;
            padding-top: 8px;
            border-top: 1px solid var(--silkway-border);
        }

        .profile-logout {
            width: 100%;
            min-height: 42px;
            justify-content: flex-start;
            gap: 9px;
            padding: 9px 10px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: var(--silkway-brown);
            font-weight: 550;
        }

        .profile-logout:hover {
            background: var(--silkway-deep);
            color: #FFFFFF;
            filter: none;
        }

        .profile-logout svg {
            width: 18px;
            height: 18px;
            flex: 0 0 auto;
        }

        .mobile-shell {
            display: none;
        }

        .mobile-menu {
            position: static;
        }

        .mobile-menu-toggle {
            width: 42px;
            height: 42px;
            min-width: 42px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #FFFFFF55;
            border-radius: 8px;
            background: transparent;
            color: #FFFFFF;
            cursor: pointer;
            list-style: none;
        }

        .mobile-menu-toggle::-webkit-details-marker {
            display: none;
        }

        .mobile-menu-toggle svg {
            width: 23px;
            height: 23px;
        }

        .mobile-menu[open] .mobile-menu-toggle {
            background: var(--silkway-slate);
            border-color: var(--silkway-slate);
        }

        .mobile-menu-panel {
            position: fixed;
            top: 70px;
            bottom: 0;
            left: 0;
            right: auto;
            width: min(88vw, 340px);
            padding: 18px;
            overflow-y: auto;
            background: var(--silkway-deep);
            border-top: 1px solid #FFFFFF22;
            box-shadow: 14px 12px 34px rgb(18 34 35 / 26%);
            z-index: 190;
        }

        .mobile-nav-section {
            padding: 0 0 15px;
            margin: 0 0 15px;
            border-bottom: 1px solid #FFFFFF22;
        }

        .mobile-nav-section:last-child {
            border-bottom: 0;
            margin-bottom: 0;
        }

        .mobile-nav-title {
            margin-bottom: 6px;
            padding: 0 9px;
            color: #AFC5A7;
            font-size: 0.78rem;
            font-weight: 650;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .mobile-nav-link {
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 44px;
            padding: 9px;
            border-radius: 8px;
            color: #FFFFFF;
            text-decoration: none;
            font-weight: 520;
        }

        .mobile-nav-link:hover {
            background: var(--silkway-slate);
            color: #FFFFFF;
        }

        .mobile-brand {
            min-width: 0;
            flex: 1;
            padding-inline: 10px;
            color: #FFFFFF;
            text-decoration: none;
            font-weight: 650;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mobile-brand:hover {
            color: #FFFFFF;
        }

        .mobile-actions {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-left: auto;
            flex: 0 0 auto;
        }

        .mobile-new-order {
            min-height: 40px;
            padding: 8px 11px;
            white-space: nowrap;
        }

        .public-shell {
            min-height: 70px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .public-shell .nav-actions {
            margin-inline-start: auto;
        }

        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        @media (max-width: 1180px) {
            header.app-header {
                min-height: 70px;
            }

            .desktop-shell {
                display: none;
            }

            .mobile-shell {
                min-height: 70px;
                display: flex;
                align-items: center;
                gap: 7px;

                /*
                 * Physical layout is intentionally LTR so the hamburger
                 * remains on the physical LEFT and quick/profile actions
                 * remain on the physical RIGHT in both UI languages.
                 */
                direction: ltr;
            }

            .mobile-menu {
                order: 0;
                flex: 0 0 auto;
            }

            .mobile-brand {
                order: 1;
            }

            .mobile-actions {
                order: 2;
            }

            .mobile-menu-panel {
                left: 0;
                right: auto;
            }

            .mobile-shell .profile-panel {
                inset-inline-start: auto;
                inset-inline-end: auto;
                right: 0;
                left: auto;
                max-width: calc(100vw - 16px);
            }

            [dir="rtl"] .mobile-menu-panel,
            [dir="rtl"] .mobile-shell .profile-panel {
                direction: rtl;
                text-align: right;
            }

            [dir="ltr"] .mobile-menu-panel,
            [dir="ltr"] .mobile-shell .profile-panel {
                direction: ltr;
                text-align: left;
            }

            main {
                padding-block-start: 20px;
            }
        }

        @media (max-width: 520px) {
            .container {
                width: calc(100% - 16px);
            }

            .mobile-shell {
                gap: 5px;
            }

            .mobile-brand {
                padding-inline: 7px;
                font-size: 0.93rem;
            }

            .mobile-new-order {
                padding-inline: 9px;
                font-size: 0.86rem;
            }

            .profile-toggle,
            .mobile-menu-toggle {
                width: 40px;
                height: 40px;
                min-width: 40px;
            }

            .profile-panel {
                position: fixed;
                top: 66px;
                right: 8px;
                left: auto;
                width: min(290px, calc(100vw - 16px));
                min-width: 0;
            }
        }


        /* ==============================================================
           SW-P8-R13 NAVIGATION REFINEMENTS
           ============================================================== */

        .desktop-shell .brand {
            width: auto;
            flex: 0 0 auto;
        }

        .settings-dropdown-panel {
            max-height: min(72vh, 560px);
            overflow-y: auto;
        }

        @media (max-width: 1320px) and (min-width: 1181px) {
            .desktop-shell {
                gap: 8px;
            }

            .desktop-nav {
                gap: 2px;
            }

            .desktop-nav .dropdown-summary {
                padding-inline: 8px;
                font-size: 0.91rem;
            }

            .quick-order-action {
                padding-inline: 10px;
                font-size: 0.9rem;
            }
        }




        /* V0.9.1 Settings: match the plain dropdown language of Reports/Orders. */
        .desktop-nav .settings-menu > .settings-dropdown-panel {
            inset-inline-start: auto;
            inset-inline-end: 0;
            width: min(290px, calc(100vw - 28px));
            min-width: min(270px, calc(100vw - 28px));
            max-height: min(75vh, 570px);
            overflow-y: auto;
            overscroll-behavior: contain;
            padding: 7px;
        }

        .settings-nav-tree {
            display: grid;
            gap: 0;
            min-width: 0;
        }

        .settings-nav-group,
        .settings-nav-subgroup {
            min-width: 0;
        }

        .settings-nav-group > summary,
        .settings-nav-subgroup > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 9px;
            cursor: pointer;
            list-style: none;
            min-height: 41px;
            padding: 10px 12px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            font-size: .875rem;
            font-weight: 560;
            line-height: 1.45;
        }

        .settings-nav-group > summary::-webkit-details-marker,
        .settings-nav-subgroup > summary::-webkit-details-marker,
        .mobile-settings-menu > summary::-webkit-details-marker {
            display: none;
        }

        .settings-nav-group > summary::after,
        .settings-nav-subgroup > summary::after,
        .mobile-settings-menu > summary::after {
            content: "›";
            flex: none;
            opacity: .65;
            font-size: 1.1rem;
            font-weight: 400;
            line-height: 1;
            transition: transform .16s ease;
        }

        .settings-nav-group[open] > summary::after,
        .settings-nav-subgroup[open] > summary::after,
        .mobile-settings-menu[open] > summary::after {
            transform: rotate(90deg);
        }

        /* Unboxed menu rows + hairline dividers instead of colored category cards. */
        .settings-dropdown-panel .settings-nav-group + .settings-nav-group {
            border-top: 1px solid #e9eeeb;
            padding-top: 4px;
            margin-top: 4px;
        }

        .settings-dropdown-panel .settings-nav-group > summary {
            color: var(--silkway-brown);
        }

        .settings-dropdown-panel .settings-nav-group > summary:hover,
        .settings-dropdown-panel .settings-nav-group > summary:focus-visible,
        .settings-dropdown-panel .settings-nav-group[open] > summary {
            color: var(--silkway-deep);
            background: #f5f7f5;
        }

        .settings-nav-group-links,
        .settings-nav-subgroup-links {
            display: grid;
            gap: 1px;
            padding: 2px 0 7px;
        }

        .settings-dropdown-panel .settings-nav-group-links {
            padding-inline-start: 14px;
        }

        .settings-dropdown-panel .settings-nav-group-links > a,
        .settings-dropdown-panel .settings-nav-subgroup-links > a {
            display: flex;
            align-items: center;
            min-height: 37px;
            padding: 8px 12px;
            font-size: .85rem;
            font-weight: 450;
            line-height: 1.45;
            border-radius: 7px;
            color: var(--silkway-brown);
        }

        .settings-dropdown-panel .settings-nav-group-links > a:hover,
        .settings-dropdown-panel .settings-nav-subgroup-links > a:hover,
        .settings-dropdown-panel .settings-nav-group-links > a:focus-visible,
        .settings-dropdown-panel .settings-nav-subgroup-links > a:focus-visible {
            color: #fff;
            background: var(--silkway-green);
        }

        .settings-dropdown-panel .settings-nav-subgroup > summary {
            min-height: 38px;
            padding: 8px 11px;
            font-size: .85rem;
            color: var(--silkway-brown);
            font-weight: 510;
        }

        .settings-dropdown-panel .settings-nav-subgroup > summary:hover,
        .settings-dropdown-panel .settings-nav-subgroup[open] > summary {
            background: #f5f7f5;
        }

        .settings-dropdown-panel .settings-nav-subgroup-links {
            padding-inline-start: 13px;
        }

        [dir="rtl"] .settings-dropdown-panel {
            text-align: right;
        }

        /* On mobile, Settings matches the existing small section headings.
           Only its sections expand; none look like separate button cards. */
        .mobile-settings-menu > .mobile-settings-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 9px;
            width: 100%;
            min-height: 32px;
            margin: 0 0 6px;
            padding: 6px 9px;
            border: 0;
            border-radius: 6px;
            color: #afc5a7;
            background: transparent;
            font-size: .78rem;
            font-weight: 650;
            letter-spacing: .06em;
            text-transform: uppercase;
            line-height: 1.5;
            cursor: pointer;
        }

        .mobile-settings-menu > .mobile-settings-title::after {
            font-size: 1rem;
            color: #afc5a7;
        }

        .mobile-settings-menu > .mobile-settings-title:hover,
        .mobile-settings-menu > .mobile-settings-title:focus-visible {
            color: #fff;
            background: var(--silkway-slate);
        }

        .mobile-settings-menu > .settings-nav-tree {
            padding: 2px 0 0;
        }

        .mobile-settings-menu .settings-nav-group + .settings-nav-group {
            border-top: 1px solid #ffffff1d;
            margin-top: 3px;
            padding-top: 3px;
        }

        .mobile-settings-menu .settings-nav-group > summary {
            min-height: 42px;
            padding: 10px 9px;
            color: #fff;
            background: transparent;
            border: 0;
            border-radius: 8px;
            font-weight: 520;
        }

        .mobile-settings-menu .settings-nav-group[open] > summary,
        .mobile-settings-menu .settings-nav-group > summary:hover,
        .mobile-settings-menu .settings-nav-group > summary:focus-visible {
            background: var(--silkway-slate);
            color: #fff;
        }

        .mobile-settings-menu .settings-nav-group-links {
            padding-inline-start: 15px;
        }

        .mobile-settings-menu .settings-nav-group-links > a,
        .mobile-settings-menu .settings-nav-subgroup-links > a {
            display: flex;
            align-items: center;
            min-height: 42px;
            padding: 9px 10px;
            border-radius: 8px;
            color: #fff;
            text-decoration: none;
            font-weight: 480;
            font-size: .85rem;
            line-height: 1.45;
        }

        .mobile-settings-menu .settings-nav-group-links a:hover,
        .mobile-settings-menu .settings-nav-group-links a:focus-visible {
            color: #fff;
            background: var(--silkway-slate);
        }

        .mobile-settings-menu .settings-nav-subgroup > summary {
            min-height: 41px;
            padding: 9px 10px;
            color: #fff;
            background: transparent;
            border: 0;
            border-radius: 8px;
            font-size: .85rem;
            font-weight: 480;
        }

        .mobile-settings-menu .settings-nav-subgroup[open] > summary,
        .mobile-settings-menu .settings-nav-subgroup > summary:hover,
        .mobile-settings-menu .settings-nav-subgroup > summary:focus-visible {
            background: var(--silkway-slate);
        }

        .mobile-settings-menu .settings-nav-subgroup-links {
            padding-inline-start: 14px;
        }

        @media (prefers-reduced-motion: reduce) {
            .settings-nav-group > summary::after,
            .settings-nav-subgroup > summary::after,
            .mobile-settings-menu > summary::after {
                transition: none;
            }
        }

        /* V0.9.1: the notification bell is visible in both responsive shells. */
        @media (max-width: 520px) {
            .mobile-shell .notification-bell {
                width: 40px;
                height: 40px;
                min-width: 40px;
                flex: 0 0 40px;
            }
        }

        @media (max-width: 420px) {
            .mobile-shell .mobile-new-order {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                min-width: 40px;
                padding: 0;
                font-size: 1.1rem;
            }

            .mobile-shell .mobile-new-order-label {
                display: none;
            }

            .mobile-shell .mobile-brand {
                padding-inline: 3px;
            }

            .mobile-shell .mobile-actions {
                gap: 5px;
            }
        }