/*
 * OnOrder App Shell
 *
 * This bundle owns only body.oow-app-shell and .oow-app-* components. Legacy
 * aliases consume the canonical design-token layer. The Design palette Primary
 * token is the single App Shell brand-color authority.
 */
body.oow-app-shell {
    --oow-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --oow-color-brand: var(--oow-brand-primary);
    --oow-color-brand-hover: var(--oow-brand-primary-hover);
    --oow-color-brand-pressed: var(--oow-brand-primary-pressed);
    --oow-color-brand-soft: var(--oow-brand-soft);
    --oow-color-text: var(--oow-text-primary);
    --oow-color-text-strong: var(--oow-text-strong);
    --oow-color-muted: var(--oow-text-muted);
    --oow-color-surface: var(--oow-bg-surface);
    --oow-color-surface-muted: var(--oow-bg-soft);
    --oow-color-surface-hover: var(--oow-bg-hover);
    --oow-color-surface-selected: var(--oow-bg-selected);
    --oow-color-canvas: var(--oow-bg-page);
    --oow-color-border: var(--oow-border);
    --oow-color-focus: var(--oow-focus);
    --oow-color-focus-ring: var(--oow-focus-ring);
    --oow-color-disabled-bg: var(--oow-disabled-bg);
    --oow-color-disabled-text: var(--oow-disabled-text);
    --oow-color-success: var(--oow-semantic-success);
    --oow-color-success-soft: var(--oow-semantic-success-soft);
    --oow-color-warning: var(--oow-semantic-warning);
    --oow-color-warning-soft: var(--oow-semantic-warning-soft);
    --oow-color-error: var(--oow-semantic-error);
    --oow-color-error-soft: var(--oow-semantic-error-soft);
    --oow-color-info: var(--oow-semantic-info);
    --oow-color-info-soft: var(--oow-semantic-info-soft);
    --oow-color-info-selected: var(--oow-semantic-info-selected);
    --oow-radius-sm: 8px;
    --oow-radius-md: 12px;
    --oow-radius-lg: 18px;
    --oow-radius-pill: 999px;
    --oow-accent-color: var(--oow-brand-primary);
    --oow-space-1: 4px;
    --oow-space-2: 8px;
    --oow-space-3: 12px;
    --oow-space-4: 16px;
    --oow-space-5: 24px;
    --oow-space-6: 32px;
    --oow-app-accent: var(--oow-accent-color);
    --oow-app-accent-hover: var(--oow-brand-primary-hover);
    --oow-app-accent-pressed: var(--oow-brand-primary-pressed);
    --oow-app-accent-foreground: var(--oow-brand-primary-foreground);
    --oow-app-accent-hover-foreground: var(--oow-brand-primary-hover-foreground);
    --oow-app-accent-pressed-foreground: var(--oow-brand-primary-pressed-foreground);
    --oow-app-accent-soft: var(--oow-color-brand-soft);
    --oow-app-accent-soft: color-mix(in srgb, var(--oow-accent-color) 12%, white);
    --oow-app-active-indicator: var(--oow-brand-accent);
    --oow-app-active-indicator-hover: var(--oow-brand-accent-hover);
    --oow-color-focus: var(--oow-focus);
    --oow-color-focus-ring: var(--oow-focus-ring);
    --oow-app-bg: var(--oow-color-surface);
    --oow-app-border: var(--oow-color-border);
    --oow-app-header-bar-height: 64px;
    --oow-app-header-height: 64px;
    --oow-app-admin-bar-height: 0px;
    --oow-app-bottom-nav-height: 72px;
    --oow-app-control-height: 42px;
    --oow-app-icon-control-size: 44px;
    --oow-app-item-gap: 4px;
    --oow-app-logo-size-desktop: 38px;
    --oow-app-logo-size-tablet: 36px;
    --oow-app-logo-size-mobile: 32px;
    --oow-app-ink: var(--oow-color-text-strong);
    --oow-app-muted: var(--oow-color-muted);
}

body.admin-bar.oow-app-shell {
    --oow-app-admin-bar-height: 32px;
}

.oow-app-shell-ui,
.oow-app-bottom-navigation,
.oow-app-drawer {
    box-sizing: border-box;
    color: var(--oow-app-ink);
    font-family: var(--oow-font-family);
    line-height: 1.5;
}

.oow-app-shell-ui *,
.oow-app-shell-ui *::before,
.oow-app-shell-ui *::after,
.oow-app-bottom-navigation *,
.oow-app-bottom-navigation *::before,
.oow-app-bottom-navigation *::after,
.oow-app-drawer *,
.oow-app-drawer *::before,
.oow-app-drawer *::after {
    box-sizing: border-box;
}

.oow-app-shell :is(.oow-app-shell-ui, .oow-app-bottom-navigation, .oow-app-drawer) .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    overflow-wrap: normal;
}

.oow-app-shell :is(.oow-app-shell-ui, .oow-app-bottom-navigation, .oow-app-drawer) :where(button, input, select) {
    font-family: inherit;
}

.oow-app-shell :is(
    .oow-app-nav-link,
    .oow-app-menu-group__toggle,
    .oow-app-drawer-group__toggle,
    .oow-app-menu-toggle,
    .oow-app-drawer__close,
    .oow-app-language-option
) {
    box-shadow: none;
    letter-spacing: normal;
    margin: 0;
    max-inline-size: none;
    text-transform: none;
    vertical-align: middle;
}

.oow-app-shell :is(.oow-app-shell-ui, .oow-app-bottom-navigation, .oow-app-drawer) :where(img, svg) {
    max-inline-size: 100%;
}

.oow-app-topbar {
    --oow-app-header-action-gap: 4px;
    --oow-app-header-control-height: var(--oow-app-control-height);
    --oow-app-header-icon-control-size: var(--oow-app-icon-control-size);
    background: var(--oow-app-bg);
    border-block-end: 1px solid var(--oow-app-border);
    box-shadow: var(--oow-shadow-sm);
    inset-block-start: 0;
    inset-inline: 0;
    min-block-size: var(--oow-app-header-bar-height);
    position: static;
    z-index: 9990;
}

body.oow-app-shell.oow-app-header-fixed .oow-app-topbar {
    position: fixed;
}

body.oow-app-shell.oow-app-header-sticky .oow-app-topbar {
    position: sticky;
}

body.admin-bar.oow-app-shell.oow-app-header-fixed .oow-app-topbar,
body.admin-bar.oow-app-shell.oow-app-header-sticky .oow-app-topbar {
    inset-block-start: var(--oow-app-admin-bar-height);
}

body.admin-bar.oow-app-shell .oow-app-drawer {
    inset-block-start: var(--oow-app-admin-bar-height);
}

.oow-app-header-spacer {
    block-size: var(--oow-app-header-height);
    pointer-events: none;
    visibility: hidden;
}

.oow-app-header-spacer[hidden] {
    display: none;
}

.oow-app-topbar__inner {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-inline: auto;
    inline-size: 100%;
    max-inline-size: 1440px;
    min-block-size: var(--oow-app-header-bar-height);
    padding-block: 8px;
    padding-inline: 20px;
}

.oow-app-shell .oow-app-brand {
    align-items: center;
    color: var(--oow-app-ink);
    display: inline-flex;
    flex: 0 1 240px;
    gap: 10px;
    max-inline-size: 240px;
    min-inline-size: 0;
    text-decoration: none;
}

.oow-app-brand__logo {
    block-size: var(--oow-app-logo-size-desktop);
    border-radius: 9px;
    flex: 0 0 auto;
    inline-size: var(--oow-app-logo-size-desktop);
    object-fit: contain;
}

.oow-app-brand__name {
    font-size: 17px;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oow-app-nav--desktop {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-inline-size: 0;
}

.oow-app-nav--tablet,
.oow-app-nav--mobile {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: var(--oow-app-item-gap);
    justify-content: center;
    min-inline-size: 0;
}

.oow-app-nav--tablet {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.oow-app-header-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: var(--oow-app-header-action-gap);
}

.oow-app-header-actions > :is(.oow-app-nav-link, .oow-app-menu-group, .oow-app-language-switcher, .oow-app-account-menu) {
    flex: 0 0 auto;
    margin: 0;
}

.oow-app-header-actions--desktop {
    border-inline-start: 1px solid var(--oow-app-border);
    margin-inline-start: 2px;
    padding-inline-start: 12px;
}

.oow-app-mobile-action-group {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    gap: var(--oow-app-header-action-gap);
    margin-inline-start: auto;
    max-inline-size: 100%;
    min-inline-size: 0;
}

.oow-app-mobile-action-group > :is(.oow-app-nav--mobile, .oow-app-header-actions) {
    align-items: center;
    flex: 0 1 auto;
    gap: var(--oow-app-header-action-gap);
    margin: 0;
    min-inline-size: 0;
}

.oow-app-topbar :is(.oow-app-language-switcher, .oow-app-account-menu) {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 1;
    margin: 0;
}

.oow-app-mobile-action-group .oow-app-nav-link--header {
    flex: 0 0 auto;
    margin: 0;
}

.oow-app-topbar .oow-app-account-toggle.oow-app-nav-link--icon-only .oow-app-account-chevron {
    display: none;
}

.oow-app-shell .oow-app-nav-link {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--oow-app-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 650;
    gap: 7px;
    justify-content: center;
    line-height: 1.2;
    min-block-size: var(--oow-app-control-height);
    padding-block: 9px;
    padding-inline: 12px;
    position: relative;
    text-align: start;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header,
    .oow-app-menu-group__toggle:not(.oow-app-nav-link)
) {
    block-size: var(--oow-app-header-control-height);
    min-block-size: var(--oow-app-header-control-height);
    white-space: nowrap;
}

.oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).oow-app-nav-link--icon-only {
    block-size: var(--oow-app-header-icon-control-size);
    inline-size: var(--oow-app-header-icon-control-size);
    min-block-size: var(--oow-app-header-icon-control-size);
    min-inline-size: var(--oow-app-header-icon-control-size);
    padding-inline: 8px;
}

.oow-app-nav-label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.oow-app-nav-link--desktop .oow-app-nav-label {
    white-space: nowrap;
}

.oow-app-shell .oow-app-nav-link:hover {
    background: var(--oow-app-accent-soft);
    color: var(--oow-app-accent);
    text-decoration: none;
}

.oow-app-shell .oow-app-nav-link.is-active {
    background: var(--oow-app-accent-soft);
    color: var(--oow-app-accent);
}

.oow-app-shell .oow-app-nav-link:active {
    background: var(--oow-app-accent-soft);
}

.oow-app-shell .oow-app-nav-link--secondary {
    border-color: var(--oow-app-border);
    color: var(--oow-app-ink);
}

.oow-app-nav-link--icon-only {
    inline-size: var(--oow-app-icon-control-size);
    min-inline-size: var(--oow-app-icon-control-size);
    padding-inline: 10px;
}

.oow-app-nav-badge {
    align-items: center;
    background: var(--oow-app-accent);
    border: 2px solid var(--oow-app-bg);
    border-radius: var(--oow-radius-pill);
    color: var(--oow-app-accent-foreground);
    display: inline-flex;
    font-size: 10px;
    font-weight: 750;
    inset-block-start: 1px;
    inset-inline-end: 1px;
    justify-content: center;
    line-height: 1;
    min-block-size: 18px;
    min-inline-size: 18px;
    padding-inline: 4px;
    position: absolute;
}

.oow-app-nav-badge[hidden] {
    display: none;
}

.oow-app-menu-group {
    flex: 0 0 auto;
    min-inline-size: 0;
    position: relative;
}

.oow-app-menu-group__trigger {
    align-items: stretch;
    display: flex;
    min-inline-size: 0;
}

.oow-app-menu-group__trigger > .oow-app-nav-link:not(.oow-app-menu-group__toggle) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    flex: 1 1 auto;
}

.oow-app-menu-group__toggle {
    align-items: center;
    appearance: none;
    background: var(--oow-app-bg);
    border: 1px solid transparent;
    block-size: var(--oow-app-control-height);
    border-end-end-radius: 9px;
    border-start-end-radius: 9px;
    color: var(--oow-app-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-inline-size: 32px;
    padding-inline: 7px;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.oow-app-menu-group__toggle.oow-app-nav-link {
    border-radius: 9px;
    gap: 7px;
    inline-size: auto;
    justify-content: flex-start;
    padding-inline: 12px 8px;
}

.oow-app-menu-group__toggle.oow-app-nav-link--icon-only {
    inline-size: auto;
    min-inline-size: var(--oow-app-header-icon-control-size, var(--oow-app-icon-control-size));
}

.oow-app-menu-group__chevron,
.oow-app-drawer-group__chevron {
    align-self: center;
    block-size: 16px;
    flex: 0 0 16px;
    font-size: 16px;
    inline-size: 16px;
    line-height: 1;
    transition: transform 150ms ease;
}

.oow-app-menu-group.is-open .oow-app-menu-group__chevron,
.oow-app-drawer-group.is-open .oow-app-drawer-group__chevron {
    transform: rotate(180deg);
}

.oow-app-menu-dropdown {
    background: var(--oow-app-bg);
    border: 1px solid var(--oow-app-border);
    border-radius: 12px;
    box-shadow: var(--oow-shadow-popover);
    display: grid;
    gap: 3px;
    inset-block-start: calc(100% + 7px);
    inset-inline-start: 0;
    max-block-size: min(70vh, 420px);
    max-inline-size: min(320px, calc(100vw - 24px));
    min-inline-size: min(220px, calc(100vw - 24px));
    overflow: auto;
    padding: 7px;
    position: absolute;
    z-index: 120;
}

.oow-app-header-actions .oow-app-menu-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.oow-app-menu-group.is-align-end .oow-app-menu-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.oow-app-menu-dropdown[hidden] {
    display: none;
}

.oow-app-menu-dropdown .oow-app-nav-link--dropdown {
    justify-content: flex-start;
    min-block-size: 42px;
    text-align: start;
    inline-size: 100%;
}

.oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) {
    color: var(--oow-app-accent);
}

.oow-app-menu-group__toggle:hover,
.oow-app-drawer-group__toggle:hover {
    background: var(--oow-app-accent-soft);
    color: var(--oow-app-accent);
}

.oow-app-account-menu {
    position: relative;
}

.oow-app-account-toggle {
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.oow-app-account-chevron {
    block-size: 16px;
    font-size: 16px;
    inline-size: 16px;
    transition: transform 160ms ease;
}

.oow-app-account-menu.is-open .oow-app-account-chevron {
    transform: rotate(180deg);
}

.oow-app-account-dropdown {
    background: var(--oow-app-bg);
    border: 1px solid var(--oow-app-border);
    border-radius: 10px;
    box-shadow: var(--oow-shadow-popover);
    display: grid;
    gap: 3px;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    max-inline-size: min(300px, calc(100vw - 24px));
    min-inline-size: min(190px, calc(100vw - 24px));
    padding: 6px;
    position: absolute;
    z-index: 10020;
}

.oow-app-account-dropdown[hidden] {
    display: none;
}

.oow-app-account-menu--drawer,
.oow-app-account-menu--drawer .oow-app-account-toggle {
    inline-size: 100%;
}

.oow-app-account-menu--drawer .oow-app-account-toggle {
    justify-content: flex-start;
    padding-inline: 11px;
    text-align: start;
}

.oow-app-account-menu--drawer .oow-app-account-chevron {
    margin-inline-start: auto;
}

.oow-app-account-menu--drawer .oow-app-account-dropdown {
    box-shadow: none;
    inline-size: 100%;
    margin-block: 4px 8px;
    position: static;
}

.oow-app-account-menu--bottom {
    flex: 1 1 0;
    min-inline-size: 0;
}

.oow-app-account-menu--bottom .oow-app-account-toggle {
    inline-size: 100%;
}

.oow-app-account-menu--bottom .oow-app-account-dropdown {
    inset-block-end: calc(100% + 8px);
    inset-block-start: auto;
}

.oow-app-nav-link--account {
    justify-content: flex-start;
    min-block-size: 42px;
    padding-block: 8px;
    padding-inline: 10px;
    inline-size: 100%;
}

.oow-app-language-switcher {
    position: relative;
}

.oow-app-language-toggle {
    cursor: pointer;
    font-family: inherit;
}

.oow-app-language-menu {
    background: var(--oow-app-bg);
    border: 1px solid var(--oow-app-border);
    border-radius: 10px;
    box-shadow: var(--oow-shadow-popover);
    display: grid;
    gap: 3px;
    inline-size: max-content;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    max-inline-size: min(300px, 88vw);
    min-inline-size: 190px;
    padding: 6px;
    position: absolute;
    z-index: 10020;
}

.oow-app-language-menu[hidden] {
    display: none;
}

.oow-app-shell .oow-app-language-option {
    align-items: center;
    border-radius: 7px;
    color: var(--oow-app-ink);
    display: flex;
    font-size: 14px;
    gap: 12px;
    justify-content: space-between;
    min-block-size: 42px;
    padding-block: 8px;
    padding-inline: 10px;
    text-align: start;
    text-decoration: none;
}

.oow-app-shell .oow-app-language-option:hover,
.oow-app-shell .oow-app-language-option.is-current {
    background: var(--oow-app-accent-soft);
    color: var(--oow-app-accent);
}

.oow-app-language-option:active {
    background: var(--oow-app-accent-soft);
}

.oow-app-language-option:focus-visible,
.oow-app-language-toggle:focus-visible {
    background: var(--oow-color-surface-hover);
    outline: 3px solid var(--oow-color-focus-ring);
    outline-offset: 2px;
}

.oow-app-language-switcher--drawer {
    inline-size: 100%;
}

.oow-app-language-switcher--drawer .oow-app-language-toggle {
    justify-content: flex-start;
    inline-size: 100%;
    text-align: start;
}

.oow-app-language-switcher--drawer .oow-app-language-menu {
    box-shadow: none;
    inline-size: 100%;
    margin-block: 4px 8px;
    position: static;
}

.oow-app-language-switcher--bottom {
    flex: 1 1 0;
    min-inline-size: 0;
}

.oow-app-language-switcher--bottom .oow-app-language-toggle {
    inline-size: 100%;
}

.oow-app-language-switcher--bottom .oow-app-language-menu {
    inset-block-end: calc(100% + 8px);
    inset-block-start: auto;
}

.oow-app-language-menu--noscript {
    margin-block-start: 8px;
    position: static;
}

.oow-app-nav-icon {
    block-size: 20px;
    color: var(--oow-app-muted);
    display: inline-flex;
    flex: 0 0 20px;
    font-size: 20px;
    inline-size: 20px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 140ms ease;
}

.oow-app-topbar .oow-app-nav-link:is(:hover, :focus-visible, .is-active, [aria-current="page"]) > .oow-app-nav-icon,
.oow-app-topbar .oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) > .oow-app-nav-icon,
.oow-app-bottom-navigation .oow-app-nav-link:is(.is-active, [aria-current="page"]) > .oow-app-nav-icon {
    color: var(--oow-app-active-indicator-hover);
}

[dir="rtl"] .oow-app-nav-icon--directional {
    transform: scaleX(-1);
}

.oow-app-topbar--tablet,
.oow-app-topbar--mobile,
.oow-app-bottom-navigation {
    display: none;
}

.oow-app-menu-toggle,
.oow-app-drawer__close {
    align-items: center;
    background: var(--oow-app-bg);
    border: 1px solid var(--oow-app-border);
    border-radius: 10px;
    color: var(--oow-app-ink);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--oow-app-icon-control-size);
    min-inline-size: var(--oow-app-icon-control-size);
    padding: 8px;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.oow-app-menu-toggle:hover,
.oow-app-drawer__close:hover {
    background: var(--oow-app-accent-soft);
    border-color: var(--oow-app-accent);
    color: var(--oow-app-accent);
}

.oow-app-menu-toggle:active,
.oow-app-drawer__close:active {
    background: var(--oow-app-accent-pressed);
    border-color: var(--oow-app-accent-pressed);
    color: var(--oow-app-accent-pressed-foreground);
}

.oow-app-brand:focus-visible,
.oow-app-nav-link:focus-visible,
.oow-app-menu-group__toggle:focus-visible,
.oow-app-drawer-group__toggle:focus-visible,
.oow-app-menu-toggle:focus-visible,
.oow-app-drawer__close:focus-visible {
    outline: 3px solid var(--oow-color-focus-ring);
    outline-offset: 3px;
}

.oow-app-drawer[hidden] {
    display: none;
}

.oow-app-drawer {
    inset: 0;
    position: fixed;
    z-index: 10000;
}

.oow-app-drawer__overlay {
    background: rgba(23, 36, 58, 0.44);
    border: 0;
    inset: 0;
    padding: 0;
    position: absolute;
    inline-size: 100%;
}

.oow-app-drawer__panel {
    background: var(--oow-app-bg);
    block-size: 100%;
    box-shadow: -16px 0 40px rgba(23, 36, 58, 0.18);
    inset-block: 0;
    inset-inline-end: 0;
    max-inline-size: min(88vw, 360px);
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    padding-block: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-bottom));
    padding-inline: 18px;
    position: absolute;
    text-align: start;
    inline-size: 100%;
}

[dir="rtl"] .oow-app-drawer__panel {
    box-shadow: 16px 0 40px rgba(23, 36, 58, 0.18);
}

.oow-app-drawer__header {
    align-items: center;
    border-block-end: 1px solid var(--oow-app-border);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-block-end: 12px;
    padding-block-end: 14px;
}

.oow-app-drawer__header .oow-app-drawer__close {
    align-self: center;
    flex: 0 0 auto;
}

.oow-app-drawer__header h2 {
    color: var(--oow-app-ink);
    font-size: 19px;
    margin: 0;
}

.oow-app-drawer__links {
    display: grid;
    gap: 4px;
}

.oow-app-drawer-group {
    display: grid;
    gap: 3px;
    min-inline-size: 0;
}

.oow-app-drawer-group__trigger {
    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    min-inline-size: 0;
    inline-size: 100%;
}

.oow-app-drawer-group__trigger > .oow-app-nav-link {
    flex: 1 1 auto;
    inline-size: auto;
    justify-content: flex-start;
    min-inline-size: 0;
}

.oow-app-drawer-group__toggle {
    align-items: center;
    appearance: none;
    background: var(--oow-app-bg);
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--oow-app-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    min-inline-size: 42px;
    padding-inline: 9px;
}

.oow-app-drawer-group__toggle.oow-app-nav-link {
    border-radius: 9px;
    gap: 8px;
    justify-content: flex-start;
    text-align: start;
    inline-size: 100%;
}

.oow-app-drawer-group__toggle.oow-app-nav-link .oow-app-drawer-group__chevron {
    margin-inline-start: auto;
}

.oow-app-drawer-group__children {
    border-inline-start: 2px solid var(--oow-app-accent-soft);
    display: grid;
    gap: 3px;
    margin-inline-start: 15px;
    padding-inline-start: 8px;
}

.oow-app-drawer-group__children[hidden] {
    display: none;
}

.oow-app-nav-link--drawer-child {
    justify-content: flex-start;
    min-block-size: 44px;
    text-align: start;
    inline-size: 100%;
}

.oow-app-drawer--align-center .oow-app-drawer-group__trigger,
.oow-app-drawer--align-end .oow-app-drawer-group__trigger {
    justify-content: center;
}

.oow-app-drawer--align-end .oow-app-drawer-group__trigger {
    justify-content: flex-end;
}

.oow-app-drawer--align-center .oow-app-drawer-group__trigger > .oow-app-nav-link,
.oow-app-drawer--align-end .oow-app-drawer-group__trigger > .oow-app-nav-link {
    flex: 0 1 auto;
}

.oow-app-drawer--align-center :is(
    .oow-app-nav-link--drawer,
    .oow-app-nav-link--drawer-child,
    .oow-app-nav-link--account,
    .oow-app-account-menu--drawer .oow-app-account-toggle,
    .oow-app-language-switcher--drawer .oow-app-language-toggle,
    .oow-app-drawer-group__toggle.oow-app-nav-link
) {
    justify-content: center;
    text-align: center;
}

.oow-app-drawer--align-end :is(
    .oow-app-nav-link--drawer,
    .oow-app-nav-link--drawer-child,
    .oow-app-nav-link--account,
    .oow-app-account-menu--drawer .oow-app-account-toggle,
    .oow-app-language-switcher--drawer .oow-app-language-toggle,
    .oow-app-drawer-group__toggle.oow-app-nav-link
) {
    justify-content: flex-end;
    text-align: end;
}

.oow-app-drawer--align-center :is(
    .oow-app-account-menu--drawer .oow-app-account-chevron,
    .oow-app-drawer-group__toggle.oow-app-nav-link .oow-app-drawer-group__chevron
),
.oow-app-drawer--align-end :is(
    .oow-app-account-menu--drawer .oow-app-account-chevron,
    .oow-app-drawer-group__toggle.oow-app-nav-link .oow-app-drawer-group__chevron
) {
    margin-inline-start: 0;
}

.oow-app-drawer-group.is-active > .oow-app-drawer-group__trigger > :is(.oow-app-nav-link, .oow-app-drawer-group__toggle) {
    color: var(--oow-app-accent);
}

.oow-app-shell .oow-app-nav-link--drawer-child.is-active {
    background: var(--oow-app-accent-soft);
    color: var(--oow-app-accent);
    font-weight: 700;
}

.oow-app-nav-link--drawer {
    justify-content: flex-start;
    min-block-size: 48px;
    text-align: start;
    inline-size: 100%;
}

.oow-app-drawer .oow-app-nav-link--account {
    justify-content: flex-start;
    text-align: start;
}

body.oow-app-drawer-open {
    overflow: hidden;
}

body.oow-app-menu-style-default .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active,
body.oow-app-menu-style-default .oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) {
    border-color: color-mix(in srgb, var(--oow-app-active-indicator) 55%, transparent);
}

body.oow-app-menu-style-default .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active:hover,
body.oow-app-menu-style-default .oow-app-menu-group.is-active:hover > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) {
    border-color: color-mix(in srgb, var(--oow-app-active-indicator-hover) 55%, transparent);
}

body.oow-app-menu-style-pills .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header,
    .oow-app-menu-group__toggle:not(.oow-app-nav-link)
) {
    border-radius: var(--oow-radius-pill);
    padding-block: 7px;
}

body.oow-app-menu-style-pills .oow-app-menu-group__trigger > .oow-app-nav-link:not(.oow-app-menu-group__toggle) {
    border-end-end-radius: 0;
    border-start-end-radius: 0;
}

body.oow-app-menu-style-pills .oow-app-menu-group__trigger > .oow-app-menu-group__toggle:not(.oow-app-nav-link) {
    border-end-start-radius: 0;
    border-start-start-radius: 0;
}

body.oow-app-menu-style-pills .oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle),
body.oow-app-menu-style-pills .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active {
    background: var(--oow-app-accent);
    color: var(--oow-app-accent-foreground);
}

body.oow-app-menu-style-pills .oow-app-menu-group__trigger:hover > :is(.oow-app-nav-link, .oow-app-menu-group__toggle),
body.oow-app-menu-style-pills .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
):hover {
    border-color: color-mix(in srgb, var(--oow-app-active-indicator-hover) 55%, transparent);
}

body.oow-app-menu-style-minimal .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header,
    .oow-app-menu-group__toggle:not(.oow-app-nav-link)
) {
    background: transparent;
    border-color: transparent;
    border-radius: 0;
}

body.oow-app-menu-style-minimal .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
):hover,
body.oow-app-menu-style-minimal .oow-app-menu-group__trigger:hover > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) {
    background: color-mix(in srgb, var(--oow-app-accent) 5%, transparent);
    color: var(--oow-app-accent);
}

body.oow-app-menu-style-minimal .oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle),
body.oow-app-menu-style-minimal .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active {
    background: transparent;
    color: var(--oow-app-accent);
}

body.oow-app-menu-style-minimal .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active {
    box-shadow: inset 0 -3px 0 -1px var(--oow-app-active-indicator);
}

body.oow-app-menu-style-minimal .oow-app-menu-group.is-active > .oow-app-menu-group__trigger {
    border-radius: 0;
    box-shadow: inset 0 -3px 0 -1px var(--oow-app-active-indicator);
}

body.oow-app-menu-style-minimal .oow-app-topbar :is(
    .oow-app-nav-link--desktop,
    .oow-app-nav-link--tablet,
    .oow-app-nav-link--header
).is-active:hover,
body.oow-app-menu-style-minimal .oow-app-menu-group.is-active:hover > .oow-app-menu-group__trigger {
    box-shadow: inset 0 -3px 0 -1px var(--oow-app-active-indicator-hover);
}

body.oow-app-menu-style-minimal .oow-app-menu-group.is-active > .oow-app-menu-group__trigger > :is(.oow-app-nav-link, .oow-app-menu-group__toggle) {
    box-shadow: none;
}

body.oow-app-shell.oow-app-header-fixed .oow-notifications-header,
body.oow-app-shell.oow-app-header-fixed .oow-history-header {
    inset-block-start: calc(var(--oow-app-header-height) + var(--oow-app-admin-bar-height));
}

@media (max-width: 1199px) {
    .oow-app-topbar--desktop {
        display: none;
    }

    .oow-app-topbar--tablet {
        display: block;
    }

    .oow-app-topbar--tablet .oow-app-topbar__inner {
        gap: 10px;
        padding-inline: 16px;
    }

    body.oow-app-shell .oow-app-topbar--tablet .oow-app-brand {
        max-inline-size: min(24vw, 200px);
    }

    .oow-app-topbar--tablet .oow-app-brand__logo {
        block-size: var(--oow-app-logo-size-tablet);
        inline-size: var(--oow-app-logo-size-tablet);
    }

    .oow-app-topbar--tablet .oow-app-nav--tablet {
        justify-content: flex-start;
    }

    .oow-app-topbar--tablet .oow-app-header-actions {
        margin-inline-start: auto;
    }
}

@media (max-width: 767px) {
    body.oow-app-shell {
        --oow-app-header-bar-height: 60px;
        --oow-app-header-height: calc(var(--oow-app-header-bar-height) + env(safe-area-inset-top));
    }

    body.oow-app-shell.oow-app-has-bottom-nav {
        padding-block-end: calc(var(--oow-app-bottom-nav-height) + env(safe-area-inset-bottom));
    }

    .oow-app-topbar--tablet {
        display: none;
    }

    .oow-app-topbar--mobile {
        display: block;
        padding-block-start: env(safe-area-inset-top);
    }

    .oow-app-topbar--mobile .oow-app-topbar__inner {
        gap: 8px;
        min-block-size: var(--oow-app-header-bar-height);
        padding-block: 5px;
        padding-inline: 12px;
    }

    body.oow-app-shell .oow-app-topbar--mobile .oow-app-brand {
        flex: 1 1 auto;
        max-inline-size: min(42vw, 180px);
    }

    .oow-app-topbar--mobile .oow-app-brand__logo {
        block-size: var(--oow-app-logo-size-mobile);
        inline-size: var(--oow-app-logo-size-mobile);
    }

    .oow-app-nav--mobile {
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    .oow-app-mobile-action-group,
    .oow-app-mobile-action-group > :is(.oow-app-nav--mobile, .oow-app-header-actions) {
        gap: var(--oow-app-header-action-gap);
    }

    .oow-app-topbar--mobile .oow-app-mobile-action-group {
        max-inline-size: calc(100% - var(--oow-app-logo-size-mobile) - var(--oow-app-header-action-gap));
    }

    .oow-app-bottom-navigation {
        align-items: stretch;
        background: var(--oow-app-bg);
        border-block-start: 1px solid var(--oow-app-border);
        box-shadow: 0 -8px 24px rgb(23 36 58 / 9%);
        display: flex;
        gap: 2px;
        inset-block-end: 0;
        inset-inline: 0;
        justify-content: stretch;
        min-block-size: calc(var(--oow-app-bottom-nav-height) + env(safe-area-inset-bottom));
        padding-block: 5px max(5px, env(safe-area-inset-bottom));
        padding-inline: 6px;
        position: fixed;
        z-index: 9990;
    }

    .oow-app-nav-link--bottom {
        flex: 1 1 0;
        flex-direction: column;
        font-size: 11px;
        gap: 4px;
        inline-size: 0;
        min-block-size: 54px;
        min-inline-size: 0;
        padding-block: 5px;
        padding-inline: 3px;
        text-align: center;
    }

    .oow-app-nav-link--bottom .oow-app-nav-icon {
        block-size: 21px;
        flex-basis: 21px;
        font-size: 21px;
        inline-size: 21px;
    }

    .oow-app-nav-link--bottom .oow-app-nav-label {
        display: block;
        font-weight: 650;
        line-height: 1.15;
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .oow-app-shell .oow-app-nav-link--bottom.is-active {
        background: var(--oow-app-accent-soft);
        color: var(--oow-app-accent);
    }
}

@media (max-width: 430px) {
    .oow-app-topbar--mobile {
        --oow-app-header-icon-control-size: 40px;
    }

    .oow-app-topbar--mobile .oow-app-topbar__inner {
        gap: 6px;
        padding-inline: 10px;
    }

    body.oow-app-shell .oow-app-topbar--mobile .oow-app-brand {
        gap: 7px;
        max-inline-size: min(38vw, 144px);
    }

    .oow-app-topbar--mobile .oow-app-brand__name {
        font-size: 14px;
    }

}

@media (max-width: 782px) {
    body.admin-bar.oow-app-shell {
        --oow-app-admin-bar-height: 46px;
    }
}

.oow-app-shell-ui button:disabled,
.oow-app-bottom-navigation button:disabled,
.oow-app-drawer button:disabled,
.oow-app-shell-ui [aria-disabled="true"],
.oow-app-bottom-navigation [aria-disabled="true"],
.oow-app-drawer [aria-disabled="true"] {
    background: var(--oow-color-disabled-bg);
    border-color: var(--oow-color-border);
    cursor: not-allowed;
    opacity: .72;
}