/* Approved glass navigation on the existing portal shell, opt-in by stylesheet.
 * Load AFTER silverTheme.css, member-theme.css and page/cart presentation CSS.
 * No replacement DOM, route, dimensions token, drawer positioning or JS changes.
 * Every rule is bounded to a native portal root; popovers outside it stay native.
 */
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) {
  --catalog-glass-surface: rgba(255,255,255,.66);
  --catalog-glass-edge: rgba(255,255,255,.86);
  --catalog-glass-active: rgba(224,237,255,.74);
  --catalog-glass-account: rgba(241,246,253,.72);
  background: #f2f6fc;
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container,
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-container { background: transparent; }
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-container > .el-header,
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-container > div > .el-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Native viewport widths, collapsed state, logo asset and scroll/account flex
 * remain in silverTheme.css. Insets add 16px to the rail's occupied width. */
@media (min-width:901px) {
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-aside.portal-reference-aside {
    top: 16px;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    margin: 16px 0 16px 16px;
    border: 1px solid var(--catalog-glass-edge);
    border-radius: 20px;
    background: var(--catalog-glass-surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 28px rgba(41,76,124,.025);
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    backdrop-filter: blur(22px) saturate(115%);
  }
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) {
  --portal-nav-text: #64748b;
  --portal-nav-heading: #64748b;
  --portal-nav-selection-text: var(--ui-brand, #2563eb);
  --portal-nav-active: var(--catalog-glass-active);
  --portal-nav-hover: rgba(255,255,255,.64);
  --portal-nav-child-active: rgba(224,237,255,.5);
  --portal-nav-control-radius: 8px;
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) .portal-grouped-nav :is(.home-portal-nav-item,.el-menu-item,.el-submenu__title):hover {
  background-color: var(--portal-nav-hover);
}
/* Element supplies an inline transparent background; only native selection
 * surfaces need !important. All selection/expanded state still comes from Vue. */
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) .portal-grouped-nav :is(.home-portal-nav-item.is-active,.el-menu-item.is-active) {
  background-color: var(--catalog-glass-active) !important;
  color: var(--ui-brand, #2563eb);
  box-shadow: none;
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) .portal-grouped-nav .el-menu--inline .el-menu-item.is-active {
  background-color: var(--portal-nav-child-active) !important;
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) .portal-nav-account-main {
  background: var(--catalog-glass-account);
  border-color: rgba(215,226,242,.75);
  border-radius: 12px;
  box-shadow: none;
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) .portal-nav-account-main:hover {
  background: rgba(234,242,255,.9);
  border-color: var(--ui-brand, #2563eb);
}
html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) :is(.portal-reference-aside,.portal-reference-drawer) :is(a,button,[role="menuitem"]):focus-visible {
  outline: 2px solid var(--ui-brand, #2563eb);
  outline-offset: -2px;
}
/* Keep Element's fixed drawer, wrapper, mask, focus and native widths. No
 * transform, display, overflow or z-index override on any mobile layer. */
@media (max-width:900px) {
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) .el-drawer.portal-reference-drawer {
    background: rgba(255,255,255,.88);
    border-right: 1px solid var(--catalog-glass-edge);
    border-radius: 0 20px 20px 0;
    -webkit-backdrop-filter: blur(22px) saturate(115%);
    backdrop-filter: blur(22px) saturate(115%);
  }
}
/* Solid translucent fallback remains legible where blur is unavailable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-aside.portal-reference-aside,
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) .el-drawer.portal-reference-drawer { background: rgba(255,255,255,.96); }
}
@media (prefers-reduced-transparency:reduce) {
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) > .el-container > .el-aside.portal-reference-aside,
  html.mist-silver body > :is(.template,.product,.product_detail,.file_download):has(> .el-container > .el-aside.portal-reference-aside) .el-drawer.portal-reference-drawer { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}