/*
 * V144 · 筛选弹层可见性修复
 *
 * 商品很少时，商品库面板会跟着表格变矮。全局 .panel 的 overflow:hidden
 * 会把仍然打开的价格/分类弹层底部裁掉。商品表格本身已有独立滚动容器，
 * 因此这里只放开商品库面板，不改变表格滚动和其他页面的圆角裁切规则。
 */
.view-root[data-view="productCatalog"] > .panel,
.view-root[data-view="catalog"] > .panel {
  position: relative;
  overflow: visible !important;
}

.view-root[data-view="productCatalog"] .catalog-commandbar,
.view-root[data-view="productCatalog"] .catalog-filter-row,
.view-root[data-view="catalog"] .store-catalog-filter-deck,
.view-root[data-view="catalog"] .store-catalog-filter-row {
  overflow: visible !important;
}

.view-root[data-view="productCatalog"] .catalog-category-filter[open],
.view-root[data-view="productCatalog"] .catalog-price-filter[open],
.view-root[data-view="catalog"] .catalog-category-filter[open],
.view-root[data-view="catalog"] .catalog-price-filter[open] {
  z-index: 1200 !important;
}

.view-root[data-view="productCatalog"] .catalog-category-popover,
.view-root[data-view="productCatalog"] .catalog-price-filter-popover,
.view-root[data-view="catalog"] .catalog-category-popover,
.view-root[data-view="catalog"] .catalog-price-filter-popover {
  max-height: min(420px, calc(100dvh - 24px));
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/*
 * 价格弹层改用视口定位。
 * 商品列表不足一页时，表格和面板都会收缩；继续使用 absolute 会被后续表头
 * 的绘制层盖住。JS 只负责把浮层贴到按钮下方/上方，这里负责让它脱离所有
 * 表格裁切上下文，并给底部操作区留出稳定空间。
 */
.catalog-price-filter-popover.catalog-floating-price-popover {
  position: fixed !important;
  top: var(--catalog-popover-top) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--catalog-popover-left) !important;
  z-index: 6000 !important;
  box-sizing: border-box;
  width: var(--catalog-popover-width, 320px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: #fff !important;
  box-shadow: 0 20px 48px rgba(25, 43, 72, .22) !important;
}

.catalog-price-filter-popover.catalog-floating-price-popover .catalog-price-filter-actions {
  margin-bottom: 0;
  padding-bottom: 2px;
}

/* 操作区固定在弹层底部；内容需要滚动时按钮仍然保持可见。 */
.view-root[data-view="productCatalog"] .catalog-category-actions,
.view-root[data-view="productCatalog"] .catalog-price-filter-actions,
.view-root[data-view="catalog"] .catalog-category-actions,
.view-root[data-view="catalog"] .catalog-price-filter-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff;
}

@media (max-width: 680px) {
  .catalog-price-filter-popover.catalog-floating-price-popover {
    width: calc(100vw - 24px) !important;
    transform: none !important;
  }
}