.proc-app > .proc-header, .proc-app > .proc-nav-shell { flex-shrink: 0; min-width: 0; }
.proc-app .proc-account { min-width: 0; max-width: 100%; }
.proc-app .proc-account .account-button { display: flex; align-items: center; gap: 7px; width: auto; max-width: 100%; padding: 8px 10px; }
.proc-account-organization { max-width: 240px; color: var(--proc-blue); font-weight: 650; }
.proc-account-name { max-width: 150px; font-weight: 400; }
.proc-account-organization, .proc-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-account .account-main { box-sizing: border-box; width: 350px; max-width: calc(100vw - 24px); min-width: 0; padding: 0; background: #fff; border: 1px solid var(--proc-border); border-radius: 14px; box-shadow: 0 12px 36px #10234a24; }
.proc-account .account-main-inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 12px; white-space: normal; max-height: calc(100dvh - 100px); overflow-y: auto; overflow-x: hidden}
.proc-account .account-main-inner > * { flex-shrink: 0; }
.proc-account .proc-account-identity { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 4px 18px; text-align: left; }
.proc-account .proc-account-avatar { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #e9edf4; color: #8592a8; }
.proc-account .proc-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.proc-account .proc-account-avatar-icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.proc-account .proc-account-header-icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.proc-account .proc-account-identity-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.proc-account .proc-account-identity-text strong { color: var(--proc-text); font-size: 1rem; font-weight: 650; line-height: 1.3; }
.proc-account .proc-account-identity-text > span { color: var(--proc-muted); font-size: .8125rem; line-height: 1.4; }
.proc-account .proc-account-language { margin-left: auto; align-self: flex-start; flex-shrink: 0; }
.proc-account .proc-account-identity { position: relative; }
.proc-account .proc-language-toggle { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--proc-border); border-radius: 7px; background: #fff; color: var(--proc-text); font: inherit; font-size: .8125rem; cursor: pointer; }
.proc-account .proc-language-toggle:focus-visible { outline: 2px solid var(--proc-blue); }
.proc-account .proc-language-options { position: absolute; right: 0; top: 40px; z-index: 2; display: flex; flex-direction: column; gap: 4px; width: min(280px, 100%); max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid var(--proc-border); border-radius: 9px; background: #fff; box-shadow: 0 6px 18px #10234a24; }
.proc-account .proc-account-context { display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; width: 100%}
.proc-account .proc-account-roles { display: flex; flex-direction: column; gap: 8px; max-height: min(320px, 45dvh); overflow-y: auto; padding: 2px; }
.proc-account .proc-account-role { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--proc-border); border-radius: 9px; background: #fff; color: var(--proc-text); font: inherit; font-size: .875rem; font-weight: 400; text-align: left; white-space: normal; cursor: pointer; }
.proc-account .proc-account-item-icon { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; color: var(--proc-muted); }
.proc-account .proc-account-item-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.proc-account .proc-account-check-icon { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.proc-account .proc-account-role:hover:not(:disabled) { background: #f3f7fc; border-color: #c8d8eb; }
.proc-account .proc-account-role.is-active { background: #eaf3ff; border-color: #a8ccfa; color: var(--proc-blue); font-weight: 650; }
.proc-account .proc-account-role.is-active .proc-account-item-icon { color: inherit; }
.proc-account .proc-account-role.is-active:hover:not(:disabled) { background: #e1eeff; }
.proc-account .proc-account-role:focus-visible, .proc-account .proc-account-action:focus-visible { outline: 2px solid var(--proc-blue); outline-offset: -2px; }
.proc-account .proc-account-role:disabled { cursor: wait; opacity: .65; }
.proc-account-development .proc-account-role:disabled { cursor: default; }
.proc-account-development .proc-account-role.is-active:disabled { opacity: 1; }
.proc-account .proc-account-single-organization { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--proc-text); font-size: .875rem; font-weight: 600; }
.proc-account .proc-account-action { display: flex; justify-content: flex-start; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 9px; color: var(--proc-text); font-size: .875rem; font-weight: 400; text-align: left; }
.proc-account .proc-account-action-content { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.proc-account .proc-account-chevron { width: 14px; height: 14px; flex: 0 0 14px; object-fit: contain; color: var(--proc-muted); }
.proc-account .proc-account-profile { background: #f6f8fb; }
.proc-account .proc-account-logout { background: transparent; }
.proc-account .proc-account-logout-icon { color: #ce6065; }
.proc-account .proc-account-action:hover:not(:disabled) { background: #edf2f8; }
.proc-account .account-separator { flex-shrink: 0; height: 0; margin: 12px 2px; border: 0; border-top: 1px solid var(--proc-border); }
.proc-account .proc-account-context p { margin: 0; padding: 0 4px; }
.proc-context-reloading { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: white; color: var(--proc-blue); }
@media (min-width: 801px) and (max-width: 1450px) {
    .proc-account-organization { max-width: 160px; }
    .proc-account-name { display: none; }
}
@media (max-width: 480px) {
    .proc-account-organization { max-width: 155px; }
    .proc-account-name { max-width: 85px; }
}
/* Keep search between the brand and carts while there is room for all three. */
@media (min-width: 1200px) {
    .proc-app .proc-header { grid-template-columns: auto minmax(0, 1fr) auto; }
    .proc-app .proc-header .proc-global-search { min-width: 0; }
    .proc-app .proc-header .proc-global-search { grid-column: 2; grid-row: 1; }
    .proc-app .proc-header .proc-header-right { grid-column: 3; grid-row: 1; }
}
.proc-app .proc-main-nav { display: block; position: relative; overflow: visible; }
.proc-app .proc-nav-items { display: flex; flex-wrap: nowrap; width: max-content; }
.proc-app .proc-nav-compact-bar { display: none; align-items: center; gap: 16px; min-height: 46px; }
.proc-app .proc-nav-toggle { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; border: 0; border-radius: 8px; padding: 0 12px; background: transparent; color: var(--proc-text); font: inherit; cursor: pointer; }
.proc-app .proc-nav-toggle:hover { background: #f0f6ff; }
.proc-app .proc-nav-current { min-width: 0; overflow-wrap: anywhere; color: var(--proc-blue); font-weight: 650; }
.proc-app .proc-main-nav :is(.proc-nav-toggle, .proc-main-nav-item):focus-visible { outline: 3px solid var(--proc-blue); outline-offset: -3px; }
.proc-app .proc-main-nav:not([data-ready]) .proc-nav-items { visibility: hidden; position: absolute; }
.proc-app .proc-main-nav[data-compact="true"] .proc-nav-compact-bar { display: flex; }
.proc-app .proc-main-nav[data-compact="true"] .proc-nav-items { display: none; position: absolute; top: 100%; left: 0; right: 0; width: auto; flex-direction: column; max-height: min(65dvh, 520px); overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--proc-border); border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px #22477720; }
.proc-app .proc-main-nav[data-compact="true"][data-open="true"] .proc-nav-items { display: flex; }
.proc-app .proc-main-nav[data-compact="true"] .proc-nav-items { max-height: min(520px, max(100px, calc(100dvh - var(--proc-nav-bottom, 320px) - 12px))); }
.proc-app .proc-main-nav[data-compact="true"] .proc-main-nav-item { width: 100%; min-width: 0; white-space: normal; text-align: left; border-radius: 6px; }
.proc-app .proc-main-nav[data-compact="true"] .proc-main-nav-item.active:after { top: 4px; bottom: 4px; left: 0; right: auto; width: 4px; height: auto; }
/* Temporary intrinsic measurement, removed before the browser paints. */
.proc-app .proc-main-nav .proc-nav-items.proc-nav-measuring { display: flex; position: fixed; visibility: hidden; flex-direction: row; width: max-content; max-height: none; padding: 0; border: 0; overflow: visible; }
.proc-app .proc-main-nav .proc-nav-items.proc-nav-measuring .proc-main-nav-item { width: auto; white-space: nowrap; }
@media (max-width: 800px) {
    .proc-app .proc-header .proc-header-right { min-width: 0; }
    .proc-app .proc-header .proc-cart-buttons { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
    .proc-app .proc-header .proc-brand { min-width: 0; }
    .proc-app .proc-header .proc-brand-symbol { flex-shrink: 0; }
    .proc-app .proc-header .proc-global-search { min-width: 0; }
}

/* Global search keeps the header input available while showing bounded result groups. */
.proc-app .proc-global-search { overflow: visible; }
.proc-app .proc-global-search > input { border-radius: 7px 0 0 7px; }
.proc-app .proc-global-search > button { border-radius: 0 7px 7px 0; }
.proc-app .global-search-popup { visibility: hidden; position: fixed; left: max(12px, calc((100vw - 1180px) / 2)); right: max(12px, calc((100vw - 1180px) / 2)); z-index: 1200; overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid var(--proc-border, #cbdcf5); border-radius: 12px; background: #fff; box-shadow: 0 12px 36px #173f7930; color: var(--proc-text, #24334a); }
.proc-app .global-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.proc-app .global-search-columns { display: flex; gap: 24px; align-items: flex-start; }
.proc-app .global-search-columns aside { flex: 0 0 220px; min-width: 0; }
.proc-app .global-search-main { flex: 1; min-width: 0; }
.proc-app .global-search-group { margin-bottom: 16px; }
.proc-app .global-search-group h2 { font-size: 16px; margin: 0 0 8px; }
.proc-app .global-search-popup button { height: auto; font: inherit; color: inherit; background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; text-align: left; }
.proc-app .global-search-popup button:hover { background: #edf4ff; }
.proc-app .global-search-popup button:focus-visible { outline: 3px solid var(--proc-blue, #005bea); outline-offset: 1px; }
.proc-app .global-search-popup .global-search-result { display: flex; width: 100%; gap: 12px; align-items: center; margin-bottom: 4px; border: 1px solid #e6edf6; }
.proc-app .global-search-result img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.proc-app .global-search-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.proc-app .global-search-copy strong, .proc-app .global-search-copy small, .proc-app .global-search-price small { display: block; }
.proc-app .global-search-copy small, .proc-app .global-search-price small { color: #536477; font-size: 12px; }
.proc-app .global-search-price { white-space: nowrap; text-align: right; }
.proc-app .global-search-status { font-size: 12px; max-width: 30%; overflow-wrap: anywhere; }
.proc-app .global-search-popup .global-search-all { color: var(--proc-blue, #005bea); text-decoration: underline; font-size: 13px; }
@media (max-width: 650px) {
    .proc-app .global-search-columns { flex-direction: column; gap: 8px; }
    .proc-app .global-search-columns aside { flex: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .proc-app .global-search-main { width: 100%; }
    .proc-app .global-search-popup { padding: 12px; }
    .proc-app .global-search-result { flex-wrap: wrap; }
}