.product-advertising{
  width: 100%;
  height: max-content;
  position: relative;
  overflow: hidden;
  display: flex;
  margin-top: 12px;
}
.product-advertising img, .product-advertising svg {
  width: 44%;
  position: relative;
  z-index: 1;
  min-height: 80px;
  height: auto;
}
.product-advertising .product-advertising-text-wrap {
  width: 100%;
  /* height: max-content; */
  height: 80%;
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  bottom: 0;
  z-index: 0;
  border-radius: 12px;
  overflow: auto;
  padding: 14px;
}
.product-advertising-text-content{
  width: 56%;
  padding-left: 8px;
  color: var(--advertising-text-color);
  font-size: 16px;
  word-wrap: break-word;
  @media screen and (max-width: 959px) {
    font-size: 10px;
  }
}
.product-advertising-text-content * {
  white-space: normal;
  max-width: 100%;
}
.product-advertising .product-advertising-text-wrap .product-advertising-text-content{
  white-space: nowrap;
}

.product-advertising-text-title{
  font-size: var(--font-size, 16px);
  font-weight: var(--font-weight, 500);
  font-style: var(--font-style, normal);
  margin-bottom: 5px;
  white-space: nowrap;
}
.product-advertising-text-des{
  font-size: var(--font-size, 14px);
  font-weight: var(--font-weight, normal);
  font-style: var(--font-style, normal);
  margin-bottom: 5px;
  white-space: nowrap;
}
.product-advertising-text-tips{
  font-size: var(--font-size, 12px);
  font-weight: var(--font-weight, normal);
  font-style: var(--font-style, normal);
  text-align: right;
}
@media screen and (max-width: 959px) {
.product-advertising .product-advertising-text-wrap {
  border-radius: 8px;
  padding: 5px;
}
.product-advertising-text-title{
  font-size: var(--font-size, 12px);
  margin-bottom: 0;
}
.product-advertising-text-des{
  font-size: var(--font-size, 12px);
  margin-bottom: 0;
}
.product-advertising-text-tips{
  font-size: var(--font-size, 12px);
  position: absolute;
  bottom: 0px;
  right: 3px;
}
}
.product-advertising2{
  display: flex;
  width: 100%;
  position: relative;
  padding: 16px 20px;
  border-radius: 12px;
  margin-top: 16px;
  gap: 10px;
  align-items: center;
}
.product-advertising2::before{
  width: 1px;
  height: 82px;
  background-color: #acaaaa;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.product-advertising2>div{
  flex: 1;
  text-align: center;
}
.product-advertising2 div p{
  margin: 0;
  /* font-size: 16px; */
}
.product-advertising2 .advertising2-title{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1E1D5F;
}
.product-advertising2 .advertising2-des {
  font-weight: 300;
}
.product-advertising2 .advertising2-title img{
  margin-right: 10px;
}

/* 移动端样式适配 */
@media screen and (max-width: 768px) {
  .product-advertising svg {
    min-height: 0;
  }

  .product-advertising2 {
      padding: 20px;
      margin-top: 20px;
      gap: 20px;
  }

  .product-advertising2 > div {
      padding: 10px 0;
  }

  .product-advertising2 .advertising2-title {
      font-size: 12px;
  }

  .product-advertising2 .advertising2-des {
      margin-top: 4px;
  }

  .product-advertising2 .advertising2-title img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
  }
}
/* ================= 两栏优惠说明：尺寸 / 上色 / 左对齐 =================
   尺寸和颜色由 product-media-gallery.html 通过 --adv2-icon-size / --adv2-icon-color
   写在 .product-advertising2 的 style 上（后台可调）。 */

/* 图标重新上色：<img src="*.svg"> 是独立文档，CSS 的 fill/color 进不去，
   所以改用 mask —— 拿 SVG 当遮罩，用 background-color 上色。
   代价是只剩单色（多色 SVG 会变纯色剪影），所以后台给了开关。 */
.product-advertising2 .advertising2-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--adv2-icon-size, 24px);
  height: var(--adv2-icon-size, 24px);
  margin-right: 10px;
  background-color: var(--adv2-icon-color, #1e1d5f);
  -webkit-mask: var(--adv2-icon) no-repeat center / contain;
  mask: var(--adv2-icon) no-repeat center / contain;
}

/* 不上色时走原来的 <img>，尺寸同样受控 ——
   原来完全没写宽高，两个图标各自用 SVG 的固有尺寸（27×16 和 22×22），所以一大一小。 */
.product-advertising2 .advertising2-title img {
  width: var(--adv2-icon-size, 24px);
  height: var(--adv2-icon-size, 24px);
  object-fit: contain;
  flex-shrink: 0;
}

/* 文字左对齐 */
.product-advertising2 > div {
  text-align: left;
}

.product-advertising2 .advertising2-title {
  justify-content: flex-start;
}

/* 中间竖线跟图标等高（原来写死 82px） */
.product-advertising2::before {
  height: var(--adv2-icon-size, 24px);
}


/* 描述没填时那个 <p> 是空的 —— 空段落照样占一整行行高，
   灰框下半部分那块「不知道哪来的」留白就是它。 */
.product-advertising2 .advertising2-des:empty {
  display: none;
}

/* 标题原本靠 <p> 的默认 margin 撑开，padding 收窄后要自己控行高 */
.product-advertising2 .advertising2-title {
  line-height: 1.35;
}

/* ---- 上下留白对齐 ----
   上方 = .product-advertising2 的 margin-top(16px)。
   下方原本是 .product__info-wrapper 的 margin-top(22px) + 后面区块自己的间距，
   加起来明显比上方大。

   用 :has() 限定「页面上有这个模块时」才动 info-wrapper 的上边距 ——
   直接改那条全局规则会影响所有产品页（包括没开这个模块的），
   而它本来是「产品图区 ↔ 产品信息区」的通用间距，不该被这个模块的需求绑架。 */
@media screen and (max-width: 768px) {
  .product:has(.product-advertising2) .product__info-wrapper {
    margin-top: 0;
  }
  .product-advertising2 {
    margin-bottom: 16px;
  }
}

/* ================= 桌面端排布 =================
   原来两栏各 flex:1（各占一半）。文字改左对齐后：item1 贴最左、item2 贴中间，
   右侧空出一大片；而竖线是容器的 ::before + left:50%，正好落在 item2 的图标旁边，
   看起来像「item2 的前缀」而不是「两栏之间的分隔」。

   改成：两组内容居中成对，竖线挂到第二栏的左边缘 ——
   这样它永远在两者之间，跟两边内容多宽无关。 */

/* 容器上那条 50% 的竖线废掉，换成挂在第二栏上 */
.product-advertising2::before {
  display: none;
}

.product-advertising2 > div + div {
  position: relative;
}

.product-advertising2 > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: var(--adv2-icon-size, 24px);
  background-color: #acaaaa;
}

@media screen and (min-width: 769px) {
  .product-advertising2 {
    justify-content: center;
    gap: 0;
  }
  /* 不再各占一半，按内容宽度排 */
  .product-advertising2 > div {
    flex: 0 1 auto;
  }
  .product-advertising2 > div:first-child {
    padding-right: 36px;
  }
  .product-advertising2 > div + div {
    padding-left: 36px;
  }
}

@media screen and (max-width: 768px) {
  .product-advertising2 > div + div {
    padding-left: 12px;
  }
}