/* XFYQ CRMEB Pro UI overrides - 2026-07-02 v6 */
/* v6 fix: replace all rpx with vw/px (rpx invalid in standard browser CSS -> silently dropped) */
/* 750rpx = 100vw ; 1rpx = 0.13333vw ; at 375px viewport 1rpx = 0.5px */

/* ============================================================
   1. TOP CHIP ROW (horizontal scroll of category images + labels)
   ============================================================ */

/* The scroll container - top gap under search bar */
uni-scroll-view.w-678.pl-20.pt-24.pb-24 {
  padding-top: 4.8vw !important;
  padding-bottom: 4.27vw !important;
  min-height: 29.3vw !important;
}

/* Each chip container: guarantee width for 2-line labels */
uni-view.inline-block.mr-8 {
  min-width: 17.6vw !important;
  vertical-align: top !important;
  margin-right: 2.67vw !important;
}
uni-view.inline-block.mr-8 uni-view.flex-col.flex-center {
  min-height: 24vw !important;
  width: 100% !important;
  min-width: 17.6vw !important;
}

/* Chip label - allow 2-line wrap, cap max lines */
uni-view.w-120.h-40.flex-center.fs-24,
uni-view.w-120.h-40.flex-center.fs-24.text--w111-333,
uni-view.w-120.h-40.flex-center.fs-24.text--w111-333.active_cate_text {
  width: auto !important;
  min-width: 17.6vw !important;
  max-width: 26.67vw !important;
  height: auto !important;
  min-height: 7.47vw !important;
  padding: 0.8vw 1.07vw !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  border-radius: 1.07vw !important;
  font-size: 2.93vw !important;
}

/* Active chip label - keep green text color + subtle bg pill hugging text only */
uni-view.active_cate_text {
  color: #01696F !important;
  font-weight: 600 !important;
  background-color: rgba(1, 105, 111, 0.08) !important;
}

/* Active chip circle image ring */
.active_pic {
  border: 0.4vw solid #01696F !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   2. LEFT ASIDE (vertical category list) - add breathing room
   ============================================================ */

/* Each aside item cell */
uni-view.w-168.h-96.flex-center.fs-26 {
  width: 23.2vw !important;
  min-height: 14.4vw !important;
  padding: 1.07vw 0.8vw !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-align: center !important;
  font-size: 3.2vw !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Active aside item - subtle left border accent + bold */
uni-view.aside_active {
  color: #01696F !important;
  font-weight: 600 !important;
  background-color: #FFFFFF !important;
  border-left: 0.4vw solid #01696F !important;
}

/* ============================================================
   3. RIGHT CONTENT - padding-bottom so cart bar doesn't cover
   ============================================================ */

/* Wrapper of the right-side product scroll */
uni-view.pl-24.pr-20.mt-24 {
  padding-bottom: 32vw !important;
}

/* Product grid inside right scroll */
uni-view.pl-24.pr-20.mt-24 uni-view.flex.items-end.flex-wrap.mt-12.w-full {
  padding-bottom: 24vw !important;
}

/* The uni-scroll-view element that holds the products */
uni-view.pl-24.pr-20.mt-24 > uni-scroll-view {
  padding-bottom: 26.67vw !important;
  box-sizing: border-box !important;
}

/* ============================================================
   4. FLOATING CART BAR - subtle shadow & clear positioning
   ============================================================ */

.cart_box,
uni-view.cart_box,
.cartList,
uni-view.cartList {
  box-shadow: 0 -0.53vw 2.13vw rgba(0, 0, 0, 0.08) !important;
  background: #FFFFFF !important;
  z-index: 99 !important;
}

/* ============================================================
   5. BOTTOM TABBAR - ensure no overlap with cart bar
   ============================================================ */

.page-footer,
uni-view.page-footer {
  z-index: 100 !important;
  background: #FFFFFF !important;
  box-shadow: 0 -0.27vw 1.07vw rgba(0, 0, 0, 0.04) !important;
}

/* ============================================================
   6. SEARCH BAR TOP - avoid being covered by system statusbar/topbar
   ============================================================ */

uni-view[class*="search"]:not([class*="search_bg"]) {
  padding-top: env(safe-area-inset-top, 1.07vw) !important;
}