/* =============================================================================
   bange 高奢风 H5 全局样式覆盖
   仅 site/bange 分支使用，不影响东大门
   注入位置：dist/build/web/index.html 的 </head> 前
   ========================================================================== */

/* ---------- Web Font ---------- */
@import url('https://fonts.font.im/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bn-black: #000000;
  --bn-ink: #141414;
  --bn-graphite: #4a4a4a;
  --bn-mid: #8a8a8a;
  --bn-quiet: #b5b5b5;
  --bn-line: #ececec;
  --bn-soft: #f6f5f2;
  --bn-paper: #ffffff;
  --bn-accent: #000000;
  --bn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --bn-font-serif: 'Cormorant Garamond', 'Times New Roman', 'Songti SC', serif;
}

/* ---------- Global Reset ---------- */
html, body, uni-app, uni-page, uni-page-body, .page_count, .page-index {
  background: var(--bn-paper) !important;
  color: var(--bn-ink) !important;
  font-family: var(--bn-font-sans) !important;
  letter-spacing: 0.2px;
  font-weight: 400;
}

uni-view, uni-text, uni-button, uni-input, uni-textarea {
  font-family: var(--bn-font-sans) !important;
}

/* 标题、品牌名用衬线体 */
.bn-serif,
[class*="goods_name"],
[class*="goodsName"],
.product-title,
.title-info,
.title-name,
.copy-name,
.user_name,
.head_title {
  font-family: var(--bn-font-serif) !important;
  letter-spacing: 0.5px;
}

/* ---------- 主题色覆盖：所有 data-theme 主题统一为黑 ---------- */
[data-theme] .bg-color,
[data-theme] .bg_color,
[data-theme] .bg-color-red,
[data-theme] .bg_color-red,
[data-theme] .red,
[data-theme] .price,
[data-theme] [class*="price-color"],
[data-theme] .font-color,
[data-theme] .font_color,
[data-theme] .iconfont.color {
  color: var(--bn-ink) !important;
  background-color: transparent !important;
}

[data-theme] .bg-color,
[data-theme] .bg_color,
[data-theme] .bg-color-red {
  background: var(--bn-ink) !important;
  color: var(--bn-paper) !important;
}

/* 按钮 */
[data-theme] .btn,
[data-theme] [class*="btn-color"],
[data-theme] .pay,
[data-theme] .submit,
[data-theme] .confirm,
[data-theme] .buy,
[data-theme] .buy-btn,
[data-theme] .place-order {
  background: var(--bn-ink) !important;
  background-image: none !important;
  color: var(--bn-paper) !important;
  border-radius: 0 !important;
  border: 0 !important;
  letter-spacing: 1.2px;
  font-weight: 500;
  text-transform: uppercase;
}

/* 渐变全去 */
[data-theme] [style*="linear-gradient"],
[data-theme] [style*="radial-gradient"] {
  background-image: none !important;
}

/* tab 下划线 */
[data-theme] .nav .item.on::after,
[data-theme] .navbar .item.on::after,
[data-theme] [class*="tab"] .on,
[data-theme] [class*="tab"].active {
  border-bottom-color: var(--bn-ink) !important;
  color: var(--bn-ink) !important;
}

/* ---------- 圆角全归零 ---------- */
[data-theme] .borRadius6,
[data-theme] .borRadius14,
[data-theme] .borRadius20,
[data-theme] .borRadius30,
[data-theme] [class*="borRadius"],
[data-theme] [class*="border-radius"] {
  border-radius: 0 !important;
}

uni-image, image {
  border-radius: 0 !important;
}

/* 头像保留圆 */
[class*="avatar"] image,
[class*="head_pic"] image,
[class*="userPic"] image,
.avatar {
  border-radius: 50% !important;
}

/* ---------- 阴影全去 ---------- */
[data-theme] [style*="box-shadow"],
[data-theme] .page-footer,
[data-theme] .footer,
[data-theme] [class*="card"] {
  box-shadow: none !important;
}

/* ---------- 价格 ---------- */
[data-theme] [class*="price"],
[data-theme] .money,
[data-theme] .new-price,
[data-theme] .now-price,
[data-theme] .real-price {
  color: var(--bn-ink) !important;
  font-family: var(--bn-font-sans) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* 划线价 */
[data-theme] .y-money,
[data-theme] .old-price,
[data-theme] [class*="otPrice"],
[data-theme] [class*="oldPrice"] {
  color: var(--bn-quiet) !important;
  text-decoration: line-through;
}

/* ---------- 商品卡 ---------- */
[data-theme] .goods,
[data-theme] [class*="goods-item"],
[data-theme] [class*="goodsItem"],
[data-theme] [class*="product-item"] {
  background: var(--bn-paper) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 32rpx !important;
}

/* ---------- Header 顶栏 ---------- */
[data-theme] .nav-bar,
[data-theme] .navBar,
[data-theme] .header,
[data-theme] [class*="header-search"] {
  background: var(--bn-paper) !important;
  color: var(--bn-ink) !important;
  border-bottom: 1rpx solid var(--bn-line) !important;
  box-shadow: none !important;
}

[data-theme] .nav-bar uni-text,
[data-theme] .nav-bar .iconfont {
  color: var(--bn-ink) !important;
}

/* ---------- 搜索框 ---------- */
[data-theme] .search,
[data-theme] [class*="search-input"],
[data-theme] [class*="searchBox"] {
  background: var(--bn-soft) !important;
  border-radius: 0 !important;
  border: 0 !important;
}

/* ---------- 底部导航：图标转黑白线性 ---------- */
.page-footer {
  background: var(--bn-paper) !important;
  border-top: 1rpx solid var(--bn-line) !important;
  box-shadow: none !important;
}

.page-footer image,
.page-footer uni-image {
  filter: grayscale(100%) brightness(0.4) contrast(1.6);
  transition: filter 0.2s ease;
}

.page-footer .foot-item:active image,
.page-footer .foot-item.active image {
  filter: grayscale(100%) brightness(0) contrast(1);
}

.page-footer .txt,
.page-footer .unchecked {
  font-family: var(--bn-font-sans) !important;
  font-size: 20rpx !important;
  letter-spacing: 1px !important;
  color: var(--bn-ink) !important;
  text-transform: uppercase;
}

.page-footer .unchecked {
  color: var(--bn-mid) !important;
}

/* ---------- 优惠券（保留功能但改素雅） ---------- */
[data-theme] [class*="coupon"] {
  background: var(--bn-paper) !important;
  background-image: none !important;
  border: 1rpx solid var(--bn-line) !important;
  color: var(--bn-ink) !important;
  border-radius: 0 !important;
}

[data-theme] [class*="coupon"] .price,
[data-theme] [class*="coupon"] [class*="money"] {
  color: var(--bn-ink) !important;
}

/* ---------- 隐藏装饰性营销弹窗（不影响业务路由） ---------- */
[class*="redPacket"],
[class*="red-packet"],
[class*="popups"][class*="advert"],
[class*="newcomer"],
[class*="floatAdvert"],
[class*="float-advert"],
[class*="signWindow"],
[class*="couponDialog"],
[class*="rainPacket"] {
  display: none !important;
}

/* 悬浮客服按钮（如需要保留可再启用） */
[class*="kefuBtn"],
[class*="customerService"],
[class*="serviceBtn"] {
  filter: grayscale(100%) brightness(0.5);
  opacity: 0.7;
}

/* ---------- 标签徽章统一灰，不要红 ---------- */
[data-theme] .tag,
[data-theme] [class*="badge"],
[data-theme] [class*="label-pic"],
[data-theme] [class*="num-icon"] {
  background: var(--bn-ink) !important;
  background-image: none !important;
  color: var(--bn-paper) !important;
  border-radius: 0 !important;
  border: 0 !important;
  letter-spacing: 0.5px;
}

/* ---------- 输入框 ---------- */
input, textarea, .input {
  background: var(--bn-paper) !important;
  border: 1rpx solid var(--bn-line) !important;
  border-radius: 0 !important;
  font-family: var(--bn-font-sans) !important;
  color: var(--bn-ink) !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- 加大间距，呼吸感 ---------- */
.page_content {
  padding-left: 32rpx !important;
  padding-right: 32rpx !important;
}

.page-index .menus,
.page-index .home-title {
  padding: 32rpx 0 !important;
  background: var(--bn-paper) !important;
}

/* ---------- 字号缩放，标题更大、正文更细 ---------- */
.home-title .title,
.home-title uni-text:first-child {
  font-family: var(--bn-font-serif) !important;
  font-size: 44rpx !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
}

/* ---------- iconfont 颜色统一 ---------- */
[data-theme] .iconfont {
  color: var(--bn-ink) !important;
}

[data-theme] .iconfont.gray,
[data-theme] .iconfont.disable {
  color: var(--bn-quiet) !important;
}

/* ---------- 通用边框 ---------- */
[data-theme] .line,
[data-theme] [class*="line-"],
[data-theme] [class*="border"] {
  border-color: var(--bn-line) !important;
}

/* ---------- 评分星色 ---------- */
[data-theme] .star,
[data-theme] [class*="star"] {
  color: var(--bn-ink) !important;
}

body {
  background: #f7f6f3 !important;
}

uni-page-body {
  min-height: 100vh !important;
  background: #f7f6f3 !important;
}

.productSort {
  background: #f7f6f3 !important;
}

.productSort .header {
  height: 56px !important;
  padding: 8px 14px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: saturate(180%) blur(16px);
}

.productSort .header .input {
  width: 100% !important;
  height: 40px !important;
  background: #f4f2ee !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
}

.productSort .header .input input {
  width: calc(100% - 28px) !important;
  font-size: 14px !important;
}

.productSort .aside {
  top: 56px !important;
  width: 92px !important;
  margin-top: 0 !important;
  background: #f0eee9 !important;
  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.productSort .aside .item {
  height: 54px !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  color: #76736d !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
}

.productSort .aside .item.on {
  background: #ffffff !important;
  color: #141414 !important;
  font-weight: 600 !important;
}

.productSort .aside .item.on::before {
  width: 3px !important;
  height: 26px !important;
  top: 14px !important;
  background: #141414 !important;
}

.productSort .conter {
  margin: 56px 0 0 92px !important;
  padding: 0 12px 88px !important;
  background: #ffffff !important;
}

.productSort .conter scroll-view {
  margin-top: 0 !important;
}

.productSort .conter .listw {
  padding-top: 14px !important;
}

.productSort .conter .listw .title {
  height: 48px !important;
  justify-content: flex-start !important;
}

.productSort .conter .listw .title .line {
  display: none !important;
}

.productSort .conter .listw .title .name {
  margin: 0 !important;
  font-size: 17px !important;
  font-family: var(--bn-font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.6px !important;
}

.productSort .conter .list {
  gap: 14px 10px !important;
}

.productSort .conter .list .item {
  width: calc((100% - 10px) / 2) !important;
  margin-top: 0 !important;
  padding-bottom: 8px !important;
  background: #faf9f6 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.productSort .conter .list .item .picture {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 0 !important;
  background: #f1efe9 !important;
  overflow: hidden !important;
}

.productSort .conter .list .item .picture image,
.productSort .conter .list .item .picture uni-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

.productSort .conter .list .item .name {
  width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 8px 8px 0 !important;
  box-sizing: border-box !important;
  color: #242424 !important;
  font-size: 13px !important;
  line-height: 17px !important;
}

.productList {
  min-height: 100vh !important;
  background: #f7f6f3 !important;
}

.productList .search {
  height: 56px !important;
  padding: 8px 12px !important;
  background: rgba(20, 20, 20, 0.96) !important;
  box-sizing: border-box !important;
  backdrop-filter: saturate(180%) blur(16px);
}

.productList .search .input {
  height: 40px !important;
  flex: 1 !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
}

.productList .search .input input {
  width: calc(100% - 36px) !important;
  font-size: 14px !important;
}

.productList .nav {
  height: 48px !important;
  margin-top: 56px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: #706d67 !important;
  font-size: 14px !important;
  backdrop-filter: saturate(180%) blur(16px);
}

.productList .nav .item {
  height: 48px !important;
  line-height: 48px !important;
}

.productList .list {
  margin-top: 112px !important;
  padding: 14px 12px 92px !important;
  gap: 12px !important;
}

.productList .list.on {
  padding: 14px 12px 92px !important;
  background: #f7f6f3 !important;
}

.productList .list .item {
  width: calc((100% - 12px) / 2) !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.productList .list .item.on {
  width: 100% !important;
  min-height: 116px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
}

.productList .list .item .pictrue {
  background: #f1efe9 !important;
  border-radius: 0 !important;
}

.productList .list .item .pictrue:not(.on) {
  aspect-ratio: 1 / 1.18 !important;
}

.productList .list .item .pictrue image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.productList .list .item .pictrue.on {
  width: 92px !important;
  height: 112px !important;
}

.productList .list .item .text {
  padding: 12px 12px 14px !important;
}

.productList .list .item .text.on {
  width: calc(100% - 104px) !important;
  padding: 2px 0 0 12px !important;
}

.productList .list .item .text .name {
  color: #181818 !important;
  font-size: 14px !important;
  line-height: 19px !important;
  font-weight: 500 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  line-clamp: 2 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.productList .list .item .text .vip {
  color: #9b978f !important;
  font-size: 12px !important;
}

.productList .loadingicon {
  width: 100% !important;
  color: #a6a199 !important;
  font-size: 12px !important;
  padding: 18px 0 96px !important;
}

.listC,
.listA,
.listB {
  gap: 12px !important;
}

.listC .item,
.listA .item,
.listB .item,
.listBig .itemBig {
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.listC .item .pictrue,
.listA .item .pictrue,
.listB .item .pictrue,
.listBig .itemBig .img-box {
  background: #f1efe9 !important;
  overflow: hidden !important;
}

.listC .item .text-info,
.listA .item .text-info,
.listB .item .text-info {
  padding: 12px !important;
}

.listC .item .title,
.listA .item .title,
.listB .item .title,
.listBig .itemBig .name {
  color: #181818 !important;
  font-size: 14px !important;
  line-height: 19px !important;
  font-weight: 500 !important;
}

.page-footer {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: saturate(180%) blur(18px);
}

.login-wrapper {
  background: #f7f6f3 !important;
}

.login-wrapper .shading {
  position: relative !important;
  width: 180px !important;
  height: 180px !important;
  margin: 76px auto 42px !important;
}

.login-wrapper .shading::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: url("/static/images/bange-login-logo.svg") center / contain no-repeat !important;
}

.login-wrapper .shading image,
.login-wrapper .shading uni-image,
.login-wrapper .shading img {
  opacity: 0 !important;
}

.login-wrapper .whiteBg .list {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 0 !important;
}

.login-wrapper .whiteBg .logon {
  background: #141414 !important;
  border-radius: 0 !important;
  letter-spacing: 1.2px !important;
}

.login-wrapper .whiteBg .tips {
  color: #141414 !important;
}