@charset "UTF-8";
/* 商品详情独立美化层。保留数据、购买状态和已有交互，全部规则限定到详情页。 */
#app > .detailContainer {
  --detail-page-bg: #f5f7fa;
  --detail-price-bg: #f6f8fb;
  --detail-label-w: 72px;
  background: var(--detail-page-bg);
}
#app > .detailContainer .w { width: 1200px; }
/* 分类标题按钮与首页保持同一宽度、高度和圆角。 */
#app > .detailContainer .nav-box > .nav-all { width: 215px; height: 42px; border-radius: 12px 12px 0 0; }
#app > .detailContainer .nav-box > .nav-all > .nav_classify { top: 42px; }
#app > .detailContainer > .content { background: var(--detail-page-bg); padding-top: 12px; padding-bottom: 32px; }
#app > .detailContainer .crumb { background: var(--detail-page-bg); }

/* 1200 - 2×20 内边距 - 2×1 描边 = 1158；408 + 562 + 140 + 2×24 = 1158。 */
#app > .detailContainer .content > .w > .goods {
  width: 1200px; box-sizing: border-box; padding: 20px; border: 1px solid var(--bz-line);
  border-radius: 12px; background: #fff; gap: 24px; align-items: flex-start; justify-content: flex-start;
}
#app > .detailContainer .goods-l { flex: 0 0 408px; width: 408px; min-width: 0; }
/* 边框覆盖在图片区域内，不改变主图尺寸和放大镜的坐标。 */
#app > .detailContainer .goods-l > .img::after {
  content: ""; position: absolute; inset: 0; border: 1px solid #333333;
  box-sizing: border-box; pointer-events: none; z-index: 2;
}
#app > .detailContainer .goods-l .img-list { margin-top: 12px; }
#app > .detailContainer .goods-l .img-item:hover { border-color: transparent; }
#app > .detailContainer .goods-l .img-item.detail-image-selected { border-color: var(--styleMainColor); }
#app > .detailContainer .goods-l .swiper-slide img { object-fit: contain; }
#app > .detailContainer .goods-l .goods-l-btn { margin-top: 12px; color: var(--bz-muted); }
#app > .detailContainer .goods-c {
  flex: 0 0 562px; min-width: 0; padding: 0; border: 0; border-radius: 0;
  height: auto; background: transparent; box-sizing: border-box;
}
#app > .detailContainer .goods-c > .name { margin: 0; font-size: 18px; line-height: 28px; color: var(--bz-text); font-weight: 600; overflow-wrap: anywhere; }
#app > .detailContainer .goods-c > .name-item { font-size: 13px; line-height: 20px; color: var(--bz-muted); margin-top: 8px; }
#app > .detailContainer .goods-c > .name-item:empty { display: none; }
#app > .detailContainer .goods-c > .pic {
  width: 100%; height: auto; min-height: 94px; margin-top: 16px; padding: 14px 16px;
  box-sizing: border-box; background: var(--detail-price-bg); border-radius: 8px;
}
#app > .detailContainer .goods-c .pic-top { margin-top: 0; font-size: 13px; line-height: 20px; color: var(--bz-muted); overflow-wrap: anywhere; }
#app > .detailContainer .goods-c .pic-bottom { margin-top: 8px; line-height: 40px; }
#app > .detailContainer .goods-c .pic-bottom span { font-size: 32px; line-height: 40px; font-weight: 600; }
#app > .detailContainer .goods-c .pic-bottom span:first-child { font-size: 16px; }
#app > .detailContainer .goods-c .size-name,
#app > .detailContainer .goods-c .num-name { width: var(--detail-label-w); flex: 0 0 var(--detail-label-w); color: var(--bz-muted); font-size: 14px; line-height: 24px; }
#app > .detailContainer .goods-c .size { margin-top: 12px; }
#app > .detailContainer .goods-c .size.d-flex { min-height: 24px; }
#app > .detailContainer .goods-c .size > .d-flex { align-items: flex-start; }
#app > .detailContainer .goods-c .size-list { min-width: 0; gap: 8px; }
#app > .detailContainer .goods-c .size-list > div { min-width: 0; max-width: 100%; }
#app > .detailContainer .goods-c .size-list .item,
#app > .detailContainer .goods-c .size-list .items {
  min-height: 36px; height: auto; box-sizing: border-box; margin: 0; padding: 7px 12px;
  border-radius: 4px; line-height: 20px; white-space: normal; overflow-wrap: anywhere;
}
#app > .detailContainer .goods-c .size-list .item.size_active { border-color: var(--styleMainColor); color: var(--styleMainColor); background: var(--bz-soft); }
#app > .detailContainer .goods-c > .shownum {
  width: 100%; height: auto; min-height: 24px; margin-top: 8px; padding: 0;
  border: 0; justify-content: flex-start; font-size: 13px; color: var(--bz-muted);
}
#app > .detailContainer .goods-c .shownum-item { display: grid; grid-template-columns: var(--detail-label-w) 1fr; width: 100%; align-items: center; color: var(--bz-muted); }
#app > .detailContainer .goods-c .num { margin-top: 16px; flex-wrap: wrap; row-gap: 8px; }
#app > .detailContainer .goods-c .num > .num-name:last-child { width: auto; flex: 0 0 auto; margin-left: 16px; white-space: nowrap; font-size: 13px; }
#app > .detailContainer .goods-c > .btn { margin: 20px 0 0 var(--detail-label-w); gap: 12px; flex-wrap: wrap; }
#app > .detailContainer .goods-c .btn-buy,
#app > .detailContainer .goods-c .btn-cat { width: 148px; height: 44px; min-height: 44px; margin: 0; border-radius: 8px; box-sizing: border-box; font-size: 16px; }
#app > .detailContainer .goods-c .btn-cat:not(.sold_out) { background: var(--styleMainColor); border: 1px solid var(--styleMainColor); color: #fff; }
#app > .detailContainer .goods-c .btn-buy:not(.sold_out) { background: var(--bz-soft); border: 1px solid var(--styleMainColor); color: var(--styleMainColor); }
#app > .detailContainer .goods-c .btn-buy.sold_out { background: #f3f4f6; border: 1px solid var(--bz-line); color: #8b95a5; }
#app > .detailContainer .goods-c > .btn > .btn-phone { display: none !important; }

/* 保留现有竖向 Swiper 的 140px 卡片与步长，只将图片与价格分开排布。 */
#app > .detailContainer .goods-r { flex: 0 0 140px; width: 140px; padding: 0; height: auto; border: 0; border-radius: 0; background: transparent; box-sizing: border-box; }
#app > .detailContainer .goods-r > .title { width: 100%; min-height: 24px; margin-top: 0; font-size: 14px; color: var(--bz-muted); gap: 8px; }
#app > .detailContainer .goods-r > .title .txt { flex: 0 0 auto; white-space: nowrap; }
#app > .detailContainer .goods-r > .title > span { flex: 1; min-width: 0; width: auto; }
#app > .detailContainer .goods-r > .title .txt::before { display: none; }
#app > .detailContainer .goods-r .list { width: 140px; margin-top: 12px; }
#app > .detailContainer .goods-r .list .item { width: 140px; text-align: center; }
#app > .detailContainer .goods-r .list .item img { width: 112px; height: 112px; object-fit: contain; display: block; margin: 0 auto; }
#app > .detailContainer .goods-r .list .item > .pic { position: static; width: 100%; height: 24px; margin-top: 4px; background: transparent; font-size: 13px; line-height: 24px; }
#app > .detailContainer .goods-r > .btn { margin-top: 12px; }

/* 下方推荐栏按内容定高，避免被长详情图拉伸。 */
#app > .detailContainer .content > .w > .details { margin-top: 20px; gap: 20px; align-items: flex-start; justify-content: flex-start; }
#app > .detailContainer .details-l { flex: 0 0 190px; width: 190px; height: auto; background: #fff; border: 1px solid var(--bz-line); border-radius: 12px; box-sizing: border-box; }
#app > .detailContainer .details-r { flex: 0 0 990px; width: 990px; min-width: 0; }
#app > .detailContainer .details-r-box { background: #fff; border: 1px solid var(--bz-line); border-radius: 12px; box-sizing: border-box; }
#app > .detailContainer .details-r .tab { min-height: 52px; box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--bz-line); border-radius: 12px 12px 0 0; align-items: center; }
#app > .detailContainer .details-r .tab .tab-item { height: 52px; line-height: 52px; box-sizing: border-box; font-size: 14px; }
#app > .detailContainer .details-r .tab .details_active { color: var(--styleMainColor); font-weight: 600; border-top: 0; border-bottom: 2px solid var(--styleMainColor); }
/* 隐藏详情标签栏的重复入口；mobile 带有 d-flex 的 !important 显示规则。 */
#app > .detailContainer .details-r .tab > .mobile,
#app > .detailContainer .details-r .tab > .btn { display: none !important; }
#app > .detailContainer .details-r .conter { background: #fff; border-radius: 0 0 12px 12px; }
#app > .detailContainer .conter-img img { max-width: 100%; width: auto; height: auto; display: block; margin-left: auto; margin-right: auto; }
#app > .detailContainer .details-r table { border-collapse: collapse; width: 100%; }
#app > .detailContainer .details-r table tr:nth-child(even) { background: #f8fafc; }
#app > .detailContainer .details-r table td { border-color: var(--bz-line); padding: 12px 16px; }
#app > .detailContainer .addshopattrconed .clearfloat { display: flex; min-height: 40px; align-items: stretch; }
#app > .detailContainer .addshopattrconed .clearfloat::after { display: none; }
#app > .detailContainer .addshopattrconed .clearfloat:nth-child(even) { background: #f8fafc; }
#app > .detailContainer .addshopattrconed .clearfloat p { float: none; height: auto; min-width: 0; margin: 0; padding: 12px 16px; border-color: var(--bz-line); color: var(--bz-text); line-height: 20px; box-sizing: border-box; overflow-wrap: anywhere; }
#app > .detailContainer .addshopattrconed .clearfloat p:first-child { width: 200px; flex: 0 0 200px; color: var(--bz-muted); }
#app > .detailContainer .addshopattrconed .clearfloat p:last-child { width: auto; flex: 1; }

@media (min-width: 1400px) {
  #app > .detailContainer .floor { right: max(40px, calc((100vw - 1200px) / 2 - 97.5px)); }
}