:root {
  --cyan: #6CFEFF;
  --cyan-light: #A8EEFF;
  --cyan-dark: #00A8C4;
  --yellow: #FFD700;
  --orange: #FF5500;
  --purple: #B400FF;
  --purple-light: #E600FF;
  --purple-dark: #8200FF;
  --purple-text-muted: #A0A9D4;
  --blue: #4337FF;
  --blue-light: #0094FF;
  --blue-dark: #005A94;
  --blue-text-muted: #5E99CF;
  --green-status: #00C853;
  --navy: #0B1929;
  --text-dark: #1a1a1a;
  --text-med: #555;
  --text-light: #999;
  --text-muted: #8C929B;
  --border: #ebebeb;
  --bg-page: #f2f7fb;
  --bg-card: #fff;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.container {
  width: 1280px!important;
  margin: 0 auto;
  padding: 0;
}

/* ===== GRADIENT BORDER ===== */
.gradient-border {
  position: relative;
  border-radius: 20px;
  padding: 20px;
  /* 容器本身透明，背景交给伪元素 */
  background: transparent;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px; /* 边框宽度 */
  background: linear-gradient(
    0deg,
    rgba(232, 232, 255, 0.15),
    rgba(223, 223, 255, 0.15),
    rgba(255, 255, 255, 0.15)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== PAGE LAYOUT ===== */
.page-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.col-left {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
}

.main-container {
  /* width: 1280px; */
  margin: 0 auto;
  position: relative;
}

/* ===== HERO SECTION ===== */
.hero-section {
  /* background: linear-gradient(140deg, #AAEEFF 0%, #C5F4FF 28%, #DFFAFF 62%, #F2FDFF 100%); */
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url("../images/detail/hero-bg.png") no-repeat center center;
    background-size: cover;
    height: 801px;
    z-index: -1;
  }
  width: 100%;
  /* padding: 20px 0 0; */
}

.hero-section .hero-content {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  align-items: stretch;
}

.hero-section .title-card {
  position: relative;
  padding: 30px 31px;
  padding-bottom: calc(34px + 40px + 20px);
  border-radius: 20px;
  background: transparent;
}

.hero-section .title-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(
    0deg,
    rgba(232, 232, 255, 0.15),
    rgba(223, 223, 255, 0.15),
    rgba(255, 255, 255, 0.15)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero-section .title-card h1 {
  font-weight: 600;
  font-size: 28px;
  color: #060606;
  line-height: 38px;
  min-height: 76px;
}

/* ===== BREADCRUMB ===== */
.breadcrumb-bar {
  padding: 22px 0;
}
.bc-inner {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(94, 153, 207, 1);
}
.bc-loc {
  display: inline-block;
  /* background: url('../images/detail/position-icon.png') no-repeat center center;  */
  width: 13px;
  height: 15px;
  /* margin-right: 9px; */
  background: center / 100% 100% url("../images/detail/position-icon.png") no-repeat;
}
.bc-inner a {
  color: var(--blue-text-muted);
}
.bc-inner a:hover {
  color: var(--blue-dark);
}
.bc-sep {
  display: inline-block;
  /* background: url('../images/detail/breadcrumb-arrow-right.png') no-repeat center center;  */
  background: center / 100% 100% url("../images/detail/breadcrumb-arrow-right.png")
    no-repeat;
  width: 7px;
  height: 10px;
  opacity: 0.5;
  /* margin-right: 2px; */
}

/* First Tabs */
.first-tabs-section {
  /* background: rgba(255,255,255,0.72); */
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.first-tabs-row {
  display: flex;
  align-items: center;
  /* gap: 8px;  */
  /* padding: 10px 16px; */
  /* border-bottom: 1px solid rgba(0,0,0,0.05); */
  padding-right: 15px;
  border-top-right-radius: 20px;
}

.hero-tab-wrapper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 20px;
}

.hero-tab-wrapper .hero-tab-item {
  /* height: 40px; */
  position: relative;
  text-align: center;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hero-tab-wrapper .hero-tab-item .ftab-inner {
  background: rgba(255,255,255,0.3);
  border-radius: 14px;
  padding: 0 10px 0 16px;
  color: #000000;
  line-height: 1;
  font-size: 13px;
}
.hero-tab-wrapper .hero-tab-item.ftab-store {
  min-width: 150px;
}
.hero-tab-wrapper .hero-tab-item .ftab-icon {
  flex-shrink: 0;
}
.hero-tab-wrapper .hero-tab-item.ftab-store .ftab-icon {
  width: 30px;
  height: 30px;
  margin-right: 4px;
  background: center / 100% 100% url("../images/detail/store-icon.png") no-repeat;
  margin-top: 6px;
}
.hero-tab-wrapper .hero-tab-item.ftab-store.active::after{
  content: "";
  position: absolute;
  right: -17px;
  bottom: 0;
  width: 17px;
  height: 15px;
  background: center / 100% 100% url("../images/detail/arrow-right.png") no-repeat;
}
.hero-tab-wrapper .hero-tab-item.ftab-store:not(.active):hover::after {
  content: "";
  position: absolute;
  right: -17px;
  bottom: 0;
  width: 17px;
  height: 15px;
  background: none
}

.hero-tab-wrapper .hero-tab-item.ftab-brand {
  min-width: 167px;
}
.hero-tab-wrapper .hero-tab-item.ftab-brand .ftab-icon {
  width: 30px;
  height: 30px;
  background: center / 100% 100% url("../images/detail/brand-icon.png") no-repeat;
  margin-top: 6px;
}
.hero-tab-wrapper .hero-tab-item.ftab-brand.active::before{
  content: "";
  position: absolute;
  left: -17px;
  bottom: 0;
  width: 17px;
  height: 15px;
  background: center / 100% 100% url("../images/detail/arrow-left.png") no-repeat;
}
.hero-tab-wrapper .hero-tab-item.ftab-brand:not(.active):hover::before {
  content: "";
  position: absolute;
  left: -17px;
  bottom: 0;
  width: 17px;
  height: 15px;
  background: none;
}
.hero-tab-wrapper .hero-tab-item.ftab-brand.active::after{
    content: "";
    position: absolute;
    right: -17px;
    bottom: 0;
    width: 17px;
    height: 15px;
    background: center / 100% 100% url("../images/detail/arrow-right.png") no-repeat;
}
.hero-tab-wrapper .hero-tab-item.ftab-brand:not(.active):hover::after {
  content: "";
  position: absolute;
  right: -17px;
  bottom: 0;
  width: 17px;
  height: 15px;
  background: none
}

.hero-tab-wrapper .hero-tab-item .ftab-inner {
  width: 100%;
  height: 40px;
  display: flex;
  line-height: 40px;
}
.hero-tab-wrapper .hero-tab-item.active{
  background-color: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.hero-tab-wrapper .hero-tab-item:not(.active):hover {
  background-color: transparent;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.hero-tab-wrapper .hero-tab-item.active .ftab-inner{
  background: #000;
  font-weight: 400;
  font-size: 13px;
  color: #FFFFFF;
  border-radius: 14px;
}
.hero-tab-wrapper .hero-tab-item:not(.active):hover .ftab-inner {
  background: #FFFFFF;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  border-radius: 14px;
}

.store-num {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--purple-text-muted);
}

.btn-copy {
  padding: 3px 10px;
  color: var(--purple-text-muted);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 13px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in;
}
.btn-copy:hover {
  color: #fff;
  background-color: #000000;
}

/* Info Grid */
.info-grid-wrap {
  padding: 18px 30px 31px;
  background: #ffffff;
  border-radius: 20px;
  border-top-left-radius: 0;
  min-height: 293px;
}
.ig1 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px 8px;
  margin-bottom: 12px;
}
.ig2 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px 8px;
  margin-bottom: 12px;
}
.ig3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 3fr;
  gap: 14px 8px;
}
.ic .il {
  font-size: 13px;
  color: #8c929b;
  margin-bottom: 7px;
  font-weight: 400;
}
.ic .iv {
  font-family: 'COMFORTAA-BOLD';
  font-size: 16px;
  color: #000000;
}
.ic .iv span img{
  margin-top: 10px;
}
.ic .iv-link {
  font-size: 16px;
  color: var(--cyan-dark);
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.ic .iv-num {
  font-size: 16px;
  color: #d9dfe8;
  font-weight: 400;
}
.ic .iv-none {
  font-size: 16px;
  color: #d9dfe8;
  font-weight: 400;
}
.stars {
  color: var(--yellow);
  letter-spacing: -1px;
  font-size: 13px;
}
.dotted-line {
  width: 100%;
  height: 1px;
  background: left / 100% 1px url("../images/detail/dotted-line.png") repeat-x;
  margin: 19px 0;
}
.dotted-line1{
  background: left / 100% 1px url("../images/detail/dotted-line1.png") repeat-x;
}
/* Pricing Box */
.pricing-box {
  position: relative;
  padding: 16px 15px 15px;
  width: 100%;
  height: 181px;
  user-select: none;
  background: center / 100% 100% url("../images/detail/price-bg.png") no-repeat;
}
.pb-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 10px 15px;
}
.pb-ml {
  position: relative;
  color: rgba(140, 146, 155, 1);
  font-size: 13px;
}
.pb-ml span {
  position: relative;
  display: inline-block;
}
.pb-ml span a{
  font-family: 'COMFORTAA-BOLD';
  font-weight: 400;
font-size: 16px;
vertical-align: -1px;
margin-right: 2px;
}
.pb-ml span + span {
  margin-left: 20px;
  padding-left: 20px;
}
.pb-ml span:not(:last-child)::after {
  content: "";
  position: absolute;
  /* right: 0; */
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, 0.1);
}
.pb-mr {
  color: rgba(140, 146, 155, 1);
  font-size: 13px;
  margin-top: -1px;
}
.pb-price-row {
  display: flex;
  justify-content: flex-end;
  padding-right: 14px;
}
.price-num {
  font-family: NumberOnly;
  font-weight: bold;
  font-size: 46px;
  color: #ff4200;
  line-height: 1;
}
.price-num span{
  font-size: 16px;
  vertical-align: 2px;
  margin-left: 2px;
}
.pb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  left: 0;
  padding: 0 15px 15px 30px;
}

.pb-actions--has-wx {
  overflow: visible;
}
.pb-actions .pb-status {
  display: flex;
  align-items: center;
  color: #ddd;
  font-size: 14px;
  min-width: 105px;
}
/* 状态 */
.pb-actions .pb-status .status-icon {
  width: 41px;
  height: 45px;
  background: center / 100% 100% url("../images/detail/sale-status.png") no-repeat;
  flex-shrink: 0;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-actions .pb-status .status-text {
  font-weight: 400;
  font-size: 16px;
  color: #00ffa2;
}
.pb-actions .pb-status .status-text span{
  margin-left: 4px;
}
.pb-actions.btn-groups {
  display: flex;
  gap: 14px;
}
/* 在线咨询按钮 */
.pb-actions .btn-consult {
  position: relative;
  width: 274px;
  height: 55px;
  background: var(--purple);
  border: 2px solid transparent;
  border-radius: 18px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  /* display: flex; align-items: center; justify-content: center; */
}
.pb-actions .btn-consult .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 9px;
  background: center / 100% 100% url("../images/detail/consult-arrow-r-hover.png") no-repeat;
}
.pb-actions .btn-consult:hover {
  border-color: var(--purple);
  background: rgba(247, 255, 117, 0);
}

/* 联系微信按钮 */
.pb-actions .btn-wechat {
  position: relative;
  width: 271px;
  height: 55px;
  background: var(--blue);
  border: 2px solid transparent;
  border-radius: 18px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin-left: 6px;
  z-index: 9;
}

.pb-actions .btn-wechat .icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 8px;
  background: center / 100% 100% url("../images/detail/wechat-arrow-r-hover.png") no-repeat;
}

.pb-actions .btn-wechat:hover {
  border-color: var(--blue);
  background: rgba(0, 235, 255, 0);
}


.salesman-card {
  padding: 33px 2px 0;
  position: relative;
  width: 290px;
  flex-shrink: 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
}
.agent-card {
  /* background: #00EBFF;
border-radius: 50%;
border: 5px solid rgba(255,255,255,0.35); */
  /* background: linear-gradient(150deg, #00D4F5 0%, #30E8FF 22%, #90F2FF 60%, #E0FAFF 100%); */
  /* background: linear-gradient(71deg, rgba(255,255,255,0.4), rgba(226,244,245,0.4), rgba(226,244,245,0.4), rgba(255,255,255,0.4));
  padding: 2px;
  border-radius: 20px; */
  /* border: 2px solid */
  /* border-radius: var(--radius-lg); padding: 14px; position: relative; overflow: visible; */
}

.agent-avatar-wrap {
  width: 128px;
  height: 128px;
  background:  rgba(255,255,255,0.3);
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
}
.agent-avatar-wrap .agent-avatar {
  width: 118px;
  height: 118px;
}
.agent-avatar-wrap .agent-avatar img {
  border-radius: 50%;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.agent-card .agent-name {
  text-align: center;
  font-weight: 600;
  font-size: 22px;
  color: #000000;
  margin-top: 26px;
}
.agent-card .agent-line {
  width: 10px;
  height: 1px;
  background:#BEC4E4;
  margin: 12px auto 12px;
}
.agent-card .agent-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  color: rgba(11, 25, 41, 0.72);
  margin-bottom: 26px;
}
.agent-card .agent-phone img {
  width: 15px;
  height: 15px;
  margin-right: 7px;
}
.agent-card .agent-phone .phone-num {
  font-family: NumberOnly;
  font-size: 18px;
  color: var(--purple-text-muted);
}

.agent-card .agent-btn-row {
  position: relative;
  z-index: 29;
  display: flex;
  gap: 6px;
  padding: 0 8px;
}

.agent-card .agent-btn {
  position: relative;
  z-index: 99;
  height: 45px;
  flex: 1;
  background: rgba(255,255,255,0.7);
  border-radius: 23px;
  padding: 6px 4px 6px 13px;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* .agent-card .btn-phone {
  height: 45px;
  flex: 1; border: 1.5px solid rgba(11,25,41,0.5); background: rgba(255,255,255,0.7);
  border-radius: 20px; padding: 6px 4px; font-size: 12px; color: var(--navy);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
} */
.agent-card .btn-phone .icon {
  width: 30px;
  height: 30px;
  background: center / 100% 100% url("../images/detail/icon-agent.png") no-repeat;
}
.agent-card .btn-phone:hover {
  background-color: #000000;
  color: #fff;
}
.agent-card .btn-phone:hover .icon {
  background-image: url("../images/detail/icon-agent-hover.png");
}

.agent-card .btn-wechat .icon {
  width: 30px;
  height: 30px;
  background: center / 100% 100% url("../images/detail/icon-wechat.png") no-repeat;
}
.agent-card .btn-wechat:hover {
  background-color: #000000;
  color: #fff;
}
.agent-card .btn-wechat:hover .icon {
  background-image: url("../images/detail/icon-wechat-hover.png");
}

.agent-card .agent-divider {
  text-align: center;
  color: var(--purple-text-muted);
  font-size: 15px;
  margin: 32px 0 12px;
}

.agent-card .c-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agent-card .c-item {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  height: 82px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 16px 8px 16px 16px;
}

.c-item-left {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-item-right {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.agent-card .c-item-left .c-av {
  width: 50px;
  height: 50px;
  background: #b8cad2;
  border-radius: 50%;
  flex-shrink: 0;
}
.agent-card .c-item-left .c-av img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
}
.agent-card .c-item-left .c-name {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  flex: 1;
}
.agent-card .c-item-left .c-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* QR code */
.agent-card .c-item-right .c-qrcode {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #f6f6fd;
  color: #f6f6fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: visible;
}
.agent-card .c-item-right .c-qrcode .qrcode-icon {
  /* width: 32px; height: 32px; */
  width: 10px;
  height: 10px;
  background: center / 100% 100% url("../images/detail/icon-qr-code.png") no-repeat;
}
.agent-card .c-item-right .c-qrcode:hover {
  background: #3000ff;
}
.agent-card .c-item-right .c-qrcode:hover .qrcode-icon {
  background-image: url("../images/detail/icon-qr-code-hover.png");
}

/* 微信弹层（复用列表页交互） */
.agent-card .c-item-right .c-qrcode:hover .wxalt_code_dom {
  display: block;
}

.agent-card .c-item-right .wxalt_code_dom {
  position: absolute;
  right: -136px;
  bottom: -4px;
  display: none;
  z-index: 30;
}

.wxlinkbtn--pb,
.wxlinkbtn--agent {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.wxlinkbtn--pb:hover .wxalt_code_dom--pb,
.wxlinkbtn--agent:hover .wxalt_code_dom--agent {
  display: block;
}

/* 价格区按钮：弹框从按钮下方偏左弹出（避免遮挡价格区内容） */
.wxlinkbtn--pb .wxalt_code_dom--pb {
  position: absolute;
  left: 45%;
  bottom: 16px;
  transform: translateX(-50%);
  display: none;
  z-index: 50;
}

/* 右侧顾问卡按钮：弹框从按钮下方居中弹出 */
.wxlinkbtn--agent .wxalt_code_dom--agent {
  position: absolute;
  left: -29%;
  top: -214px;
  transform: translateX(-50%);
  display: none;
  z-index: 50;
}

.wxlinkbtn--pb .wxalt_code_new,
.wxlinkbtn--agent .wxalt_code_new {
  position: relative;
  width: 433px;
  height: 254px;
  padding: 36px 42px;
  background: url(../images/list/list26.png) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_img,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_img {
  width: 113px;
  height: 113px;
  overflow: hidden;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_img img,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_txt,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_txt {
  position: absolute;
  left: 192px;
  top: 49px;
  padding-left: 26px;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_txt::before,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  height: 110px;
  background: url(../images/list/list24.png) no-repeat center center;
  background-size: 100% 100%;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_txt .p1,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_txt .p1 {
  font-weight: 400;
  font-size: 13px;
  color: #c1b6cd;
  line-height: 1;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_txt .p1 i,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_txt .p1 i {
  display: inline-block;
  width: 19px;
  height: 15px;
  background: url(../images/list/list52.png) no-repeat center center;
  background-size: 100% 100%;
  margin-right: 6px;
  vertical-align: -2px;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_txt .p2,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_txt .p2 {
  margin-top: 12px;
  font-family: 'COMFORTAA-BOLD';
  font-weight: bold;
  font-size: 18px;
  color: #000;
  line-height: 24px;
}

.wxlinkbtn--pb .wxcode_btn,
.wxlinkbtn--agent .wxcode_btn {
  display: block;
  margin-top: 14px;
  width: 119px;
  height: 40px;
  border-radius: 20px;
  font-weight: 400;
  font-size: 13px;
  background: rgba(6, 6, 6, 1);
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.wxlinkbtn--pb .wxcode_btn:hover,
.wxlinkbtn--agent .wxcode_btn:hover {
  background: #4337FF;
  color: #fff;
}

.wxlinkbtn--pb .haveQrCodeAndWx .wxcode_new_hont,
.wxlinkbtn--agent .haveQrCodeAndWx .wxcode_new_hont {
  margin-top: 16px;
  font-weight: 400;
  font-size: 13px;
  color: #c1b6cd;
  line-height: 1.5;
}

.wxlinkbtn--pb .haveQrCode .wxcode_new_img1,
.wxlinkbtn--agent .haveQrCode .wxcode_new_img1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wxlinkbtn--pb .haveQrCode .wxcode_new_img1 img,
.wxlinkbtn--agent .haveQrCode .wxcode_new_img1 img {
  margin-right: 117px;
  width: 75px;
  height: 88px;
  margin-top: -34px;
}

.wxlinkbtn--pb .wxcode_new_tips,
.wxlinkbtn--agent .wxcode_new_tips {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 42px;
}

.wxlinkbtn--pb .wxcode_new_tips span,
.wxlinkbtn--agent .wxcode_new_tips span {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  color: #c1b6cd;
  line-height: 24px;
}

.wxlinkbtn--pb .wxcode_new_tips a,
.wxlinkbtn--agent .wxcode_new_tips a {
  font-family: 'COMFORTAA-BOLD';
  font-weight: bold;
  font-size: 18px;
  color: #000;
  line-height: 24px;
  margin-top: 21px;
}

.agent-card .agent-btn-row .wxlinkbtn--agent {
  flex: 1;
}

.agent-card .agent-btn-row .wxlinkbtn--agent > .agent-btn {
  width: 100%;
}

.agent-card .c-item-right .wxalt_code_new {
  position: relative;
  width: 433px;
  height: 254px;
  padding: 36px 42px;
  background: url(../images/list/list26.png) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_img {
  width: 113px;
  height: 113px;
  overflow: hidden;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_txt {
  position: absolute;
  left: 192px;
  top: 49px;
  padding-left: 26px;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_txt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  height: 110px;
  background: url(../images/list/list24.png) no-repeat center center;
  background-size: 100% 100%;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_txt .p1 {
  font-weight: 400;
  font-size: 13px;
  color: #c1b6cd;
  line-height: 1;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_txt .p1 i {
  display: inline-block;
  width: 19px;
  height: 15px;
  background: url(../images/list/list52.png) no-repeat center center;
  background-size: 100% 100%;
  margin-right: 6px;
  vertical-align: -2px;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_txt .p2 {
  margin-top: 12px;
  font-family: 'COMFORTAA-BOLD';
  font-weight: bold;
  font-size: 18px;
  color: #000;
  line-height: 24px;
}

.agent-card .c-item-right .wxcode_btn {
  display: block;
  margin-top: 14px;
  width: 119px;
  height: 40px;
  border-radius: 20px;
  font-weight: 400;
  font-size: 13px;
  background: rgba(6, 6, 6, 1);
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.agent-card .c-item-right .wxcode_btn:hover {
  background: #4337FF;
  color: #fff;
}
.wxcode_btn1 {
  display: block;
  width: 119px;
  height: 40px;
  background: rgba(6, 6, 6, 1);
  color: #fff;
  margin: -16px 25px 0 0!important;
}

.agent-card .c-item-right .haveQrCodeAndWx .wxcode_new_hont {
  margin-top: 16px;
  font-weight: 400;
  font-size: 13px;
  color: #c1b6cd;
  line-height: 1.5;
}

.agent-card .c-item-right .haveQrCode .wxcode_new_img1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-card .c-item-right .haveQrCode .wxcode_new_img1 img {
  margin-right: 117px;
  width: 75px;
  height: 88px;
  margin-top: -34px;

}

.agent-card .c-item-right .wxcode_new_tips {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 42px;
}

.agent-card .c-item-right .wxcode_new_tips span {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  color: #c1b6cd;
  line-height: 24px;
}

.agent-card .c-item-right .wxcode_new_tips a {
  font-family: 'COMFORTAA-BOLD';
  font-weight: bold;
  font-size: 18px;
  color: #000;
  line-height: 24px;
  margin-top: 21px;
}

.agent-card .c-item-right .c-stat {
  background: rgba(255, 217, 167, 0.16);
  border-radius: 16px;
  font-weight: 400;
  font-size: 13px;
  color: #bb9251;
  padding: 0 18px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.agent-card .c-item-right .c-stat:hover {
  background: #bb9251;
  color: #ffffff;
}

/* ===== CONTENT SECTION ===== */
.content-section {
  margin-top: 20px;
}

.store-panel {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.store-panel .dtabs-bar {
  height: 80px;
  background: rgba(255,255,255,0.6);
  transition: background 0.2s ease-out;
  padding: 15px;
  border-radius: 16px;
  /* 吸顶：跟随页面滚动，停留在头部下方 */
  position: sticky;
  top: 0;
  z-index: 15;
}

.store-panel .dtabs-bar.is-sticky {
  background: #ffffff;
  border-radius: 0 0 10px 10px;
}

/* Detail Tabs */
.dtabs-bar {
  display: flex;
  align-items: stretch;
  /* margin-bottom: 16px; */
}

.store-panel-body {
  padding: 15px 29px;
  margin-bottom: 10px;
}

.dtab {
  display: flex;
  align-items: center;
  padding: 0 31px 0 25px;
  font-size: 16px;
  color: #8c929b;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease-out;
  border-radius: 25px;
  height: 50px;
  line-height: 50px;

}
.dtab:hover {
  color: #000000;
}
.dtab.active {
  background: #000000;
  color: #fff;
  border-radius: 25px;
}

.dtab .tab-icon {
  width: 30px;
  height: 30px;
  transition: all 0.2s ease-in-out;
}
.dtab[data-tab="store"] > i.tab-icon {
  background: center / 100% 100% url("../images/detail/icon-store.png") no-repeat;
}
.dtab[data-tab="store"]:hover > i.tab-icon,
.dtab[data-tab="store"].active > i.tab-icon {
  background-image: url("../images/detail/icon-store-on.png");
}

.dtab[data-tab="company"] > i.tab-icon {
  background: center / 100% 100% url("../images/detail/icon-company.png") no-repeat;
}
.dtab[data-tab="company"]:hover > i.tab-icon,
.dtab[data-tab="company"].active > i.tab-icon {
  background-image: url("../images/detail/icon-company-on.png");
}

.dtab[data-tab="heat"] > i.tab-icon {
  background: center / 100% 100% url("../images/detail/icon-heat.png") no-repeat;
}
.dtab[data-tab="heat"]:hover > i.tab-icon,
.dtab[data-tab="heat"].active > i.tab-icon {
  background-image: url("../images/detail/icon-heat-on.png");
}

.dtab[data-tab="rec"] > i.tab-icon {
  background: center / 100% 100% url("../images/detail/icon-rec.png") no-repeat;
}
.dtab[data-tab="rec"]:hover > i.tab-icon,
.dtab[data-tab="rec"].active > i.tab-icon {
  background-image: url("../images/detail/icon-rec-on.png");
}

.panel-title {
  margin-bottom: 18px;
  padding-bottom: 10px;

  font-weight: 600;
  font-size: 16px;
  color: #000000;
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px 0;
}
.p-row {
  display: flex;
  align-items: center;
  padding: 3px 0;
}
.p-lbl {
  font-size: 14px;
  color: #8c929b;
  min-width: 96px;
  flex-shrink: 0;
}
.p-val {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}
.p-val1{
  padding-right: 22px;
}
.stags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.stag-c {
  height: 35px;
  background: #e4fff5;
  border-radius: 18px;
  border: 1px solid #cbffec;
  font-size: 13px;
  color: #00db8b;
  padding: 0 18px;
  line-height: 35px;
}
.stag-g {
  height: 35px;
  background: #e3fdff;
  border-radius: 18px;
  border: 1px solid #d3fbff;
  font-size: 13px;
  color: #0cd2e3;
  padding: 0 18px;
  line-height: 35px;
}
.scores {
  display: flex;
  gap: 18px;
}
.sc-item .sc-lbl {
  color: var(--text-muted);
  font-size: 13px;
}
.sc-item {
  font-size: 13px;
  color: #333;
}

.company-panel,
.heat-panel {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding: 30px;
  margin-bottom: 10px;
}

.heat-panel {
  padding: 22px 26px;
  margin-bottom: 12px;
}
.heat-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.heat-title {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}
.heat-badge {
  background: #4337ff;
  border-radius: 12px;
  color: #fff;
  font-weight: 400;
  font-size: 12px;
  padding: 2px 10px 2px 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  /* background: linear-gradient(90deg,#FF6B35,#FFB800); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 10px;  */
}
.heat-badge img {
  width: 19px;
  height: 19px;
}
.heat-body {
  display: flex;
  align-items: center;
  gap: 85px;
}
.gauge-wrap {
  flex-shrink: 0;
  width: 284px;
  height: 284px;
  background: center / 100% 100% url("../images/detail/gauge-bg.png") no-repeat;
  background-position: center 17px;
  /* width: 300px;
  height: 300px; */
}
.stat-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex: 1;
  margin-top: -32px;
}
.stat-pill {
  width: 190px;
  height: 170px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 14px 8px;  */
}

.sp-visit {
  background: center / 100% 100% url("../images/detail/visit-bg.png") no-repeat;
}
.sp-consult {
  background: center / 100% 100% url("../images/detail/consult-bg.png") no-repeat;
}
.sp-collect {
  background: center / 100% 100% url("../images/detail/collect-bg.png") no-repeat;
}
.sp-sell {
  background: center / 100% 100% url("../images/detail/sell-bg.png") no-repeat;
}

.sp-lbl {
  font-size: 16px;
  color: #c8ced8;
  margin-bottom: 6px;
}
.sp-num {
  font-family: 'NUMBERONLY';
  font-weight: bold;
  font-size: 36px;
  color: #000000;
}
.sp-unit {
  font-size: 14px;
  color: #b3d3c6;
  margin-top: 3px;
}
/* ===== RECOMMENDED STORES ===== */
.rec-section {
  background: center / 100% 100% url("../images/detail/recommend-store-bg.png") no-repeat;
  /* border-radius: 20px; */
  /* border: 2px solid rgba(255,255,255,0.9); */
  margin-bottom: 80px;
}
.rec-hdr {
  padding: 22px 30px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.rec-more {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(0, 0, 0, 1);
  cursor: pointer;
  transition: color 0.2s ease-in;
  line-height: 1;
}

.rec-more-btn {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: #000000;
  transition: background 0.2s ease-in;
}

.rec-more-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 8px;
  background: center / 4px 8px url("../images/detail/icon-more.png") no-repeat;
}

.rec-more:hover {
  color: #fff;
}
.rec-more:hover .rec-more-btn {
  background: rgba(255, 255, 255, 1);
}

.rec-grid {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.rec-ttl {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
}
.rec-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 15px 12px;
  transition: all 0.3s ease;
}
.rec-card:hover .rec-card-top .rec-info .rec-name {
  color: rgba(0, 126, 255, 1);
}
.rec-card:hover {
  box-shadow: 10px 13px 100px 0 rgba(170, 246, 255, 0.15);
  transform: translateY(-5px);
}
.rec-card .rec-card-top {
  display: flex;
  gap: 10px;
  margin-bottom: 11px;
  padding-left: 5px;
}
.rec-card .rec-card-top .rec-img {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  margin-top: -12px;
}
.rec-card .rec-card-top .rec-img img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}
.rec-card .rec-card-top .rec-info {
  flex: 1;
  min-width: 0;
}
.rec-card .rec-card-top .rec-info .rec-name {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 12px;
  line-height: 1;
}
.rec-card .rec-card-top .rec-info .rec-desc {
  font-size: 13px;
  color: #9ba2aa;
  line-height: 22px;
  height: 44px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rec-card .rec-card-bot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 15px;
}
.rec-card .rec-card-bot .rec-tags-wapper {
  display: flex;
  gap: 5px;
  flex: 1;
  margin-top: -3px;
}
.rec-card .rec-card-bot .rec-icon-wrap{
  height: 29px;
}
.rec-card .rec-card-bot .rec-tags-wapper .rec-tag {
  height: 29px;
  background: #f8fbff;
  border-radius: 10px;
  padding: 0 10px;
  font-size: 13px;
  color: #9cabbc;
  line-height: 29px;
}

.rec-card .rec-card-bot .rec-icon {
  margin-left: auto;
  color: #ccc;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  width: 29px;
  height: 29px;
  background: center / 100% 100% url("../images/detail/icon-services.png") no-repeat;
  transition: all 0.3s ease-out;
}
.rec-card .rec-card-bot .rec-icon:hover {
  background: center / 100% 100% url("../images/detail/home34.png") no-repeat;
}