/* Keep the existing Vue category controls visible and reachable on mobile. */
@media (max-width: 1023px) {
  #app.storefront-sky-shell aside:has(> .sky-glass-sidebar) {
    display: block !important;
    width: 100%;
    position: sticky;
    top: 64px;
    z-index: 30;
    flex-shrink: 0;
  }
  #app.storefront-sky-shell aside > .sky-glass-sidebar {
    position: static;
    padding: 10px;
    background: color-mix(in srgb, var(--ui-bg-elevated) 55%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-height: 38svh;
    overflow-y: auto;
  }
  #app.storefront-sky-shell aside > .sky-glass-sidebar > h2 {
    font-size: 14px;
    margin-bottom: 8px;
  }
  #app.storefront-sky-shell aside > .sky-glass-sidebar > ul {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
  }
  #app.storefront-sky-shell aside > .sky-glass-sidebar > ul > li {
    margin: 0 !important;
    min-width: 0;
  }
  #app.storefront-sky-shell aside > .sky-glass-sidebar > ul > li > button,
  #app.storefront-sky-shell aside > .sky-glass-sidebar > ul > li > div > div > button:first-child {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 13px;
    text-align: center;
    justify-content: center;
  }
  #app.storefront-sky-shell div:has(> aside > .sky-glass-sidebar) > button.sky-glass-control {
    display: none;
  }
}

@media (max-width:1023px) {
 #app.storefront-sky-shell aside > .sky-glass-sidebar {
  background:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
 }
 .dark #app.storefront-sky-shell aside > .sky-glass-sidebar {
  background:rgba(28,28,30,.55) !important;
 }
}