.product-detail-wrapper {
  background-color: #fff;
}

/* 仅在产品详情页渲染时将 body 和 html 背景色改为白色 */
.theme-product-detail {
  background-color: #fff;
}

/* 当页面类型是产品详情页时，修改 body 和 html 背景色 */
body.page-type-product,
body.page-type-product html {
  background-color: #ffffff !important;
}

/* 额外的保险措施，直接为产品详情页设置白色背景 */
body[data-page-type="product"] {
  background-color: #ffffff !important;
}

.product-detail {
  background-color: #fff;
  column-gap: 32px;
}

/* Our Offerings 和 Product Advantages 包装容器 - 始终位于 info 列最底部 */
.product-detail__offerings-advantages-wrapper {
  margin-block: 20px;
  padding: 20px;
  background-color: #fdf9f5;
  border-radius: 12px;
}

/* 如果 wrapper 内没有可见内容，隐藏空盒子 */
/* 排除被 style="display: none" 隐藏的子元素（如 product-advantages 未检测到图片时） */
.product-detail__offerings-advantages-wrapper:not(
  :has(
    .product-detail__our-offerings:not([style*="display: none"]),
    .product-detail__product-advantages:not([style*="display: none"])
  )
) {
  display: none;
}

@media (max-width: 959px) {
  .product-detail__offerings-advantages-wrapper {
    margin-block: 16px;
    padding: 16px;
    /* padding-left: 0;
    padding-right: 0; */
    /* 突破父元素的左右 padding，实现 100% 宽度 */
    margin-left: calc(-1 * var(--page-padding, 20px)) !important;
    margin-right: calc(-1 * var(--page-padding, 20px)) !important;
    width: calc(100% + 2 * var(--page-padding, 20px)) !important;
  }
}

/* 移除内部模块的外边距 */
.product-detail__offerings-advantages-wrapper .product-detail__our-offerings,
.product-detail__offerings-advantages-wrapper
  .product-detail__product-advantages {
  margin-block: 0;
}

/* 模块之间的间距 */
.product-detail__offerings-advantages-wrapper
  .product-detail__our-offerings
  + .product-detail__product-advantages {
  margin-top: 20px;
}

@media (max-width: 959px) {
  .product-detail__offerings-advantages-wrapper
    .product-detail__our-offerings
    + .product-detail__product-advantages {
    margin-top: 16px;
  }
}

.product-detail__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 使用 load-feature-modal 属性定位购物车 Change 弹窗（桌面端居中） */
@media (min-width: 960px) {
  details[load-feature-modal][open] > summary + div + div {
    width: 1080px !important;
    max-width: 100% !important;
    height: 85vh !important;
    inset: auto !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: auto !important;
    overflow: hidden !important;
  }
}

/* 使用 load-feature-modal 属性定位购物车 Change 弹窗（移动端贴底） */
@media (max-width: 959px) {
  details[load-feature-modal][open] > summary + div + div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 85vh !important;
    inset: auto 0 0 0 !important;
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
  }

  #fl-quick-add-modal-content,
  #lf-quick-add-modal-content {
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

details[load-feature-modal][open] > summary + div + div > div:first-child {
  display: none !important;
}

#fl-quick-add-modal-content,
#lf-quick-add-modal-content {
  max-height: 85vh !important;
  overflow-y: auto !important;
}

/* 购物车 Change 弹窗隐藏 Buy Now 按钮 和 Our Offerings 等区域 */
details[load-feature-modal] .button--buy-now-wrapper,
details[load-feature-modal] .form__installment-info,
details[load-feature-modal] .product-detail__offerings-advantages-wrapper {
  display: none !important;
}

#fl-quick-add-modal-content,
#lf-quick-add-modal-content {
  padding-inline: var(--page-padding);
}

/* 购物车 Change 弹窗关闭按钮：覆盖平台默认圆形底色 */
#fl-quick-add-modal-content > button[name="close"],
#lf-quick-add-modal-content > button[name="close"] {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#fl-quick-add-modal-content > button[name="close"]:hover,
#lf-quick-add-modal-content > button[name="close"]:hover {
  background-color: transparent !important;
}

@media (max-width: 959px) {
  /* 移动端：打平 media-group，使其子元素成为 product-detail 的直接 flex 子项 */
  .product-detail__media-group {
    display: contents;
  }

  .product-detail__info {
    width: 100%;
    /* 移动端：商品信息排在媒体画廊下方，排在 offerings/advantages 上方 */
    order: 1;
    margin-top: -50px;
  }

  /* 移动端：offerings 和 advantages 排在商品信息下方 */
  .product-detail__offerings-advantages-wrapper {
    order: 2;
    width: 100%;
  }
}

@media (min-width: 960px) {
  .product-detail__info {
    width: 100%;
  }

  .product-detail[data-desktop-direction="row"] {
    z-index: var(--z-index-focus);
  }
  .product-detail[data-desktop-direction="row"] .product-detail__info,
  .product-detail[data-desktop-direction="row"] .product-detail__media {
    position: sticky;
    inset-block-start: var(--detail-padding-block-start, 0);
    z-index: var(--z-index-hover);
  }
  .product-detail[data-desktop-direction="row"] .product-detail__col--small {
    width: 34%;
  }

  .product-detail[data-desktop-direction="row"]
    .product-detail__col--small
    + .product-detail__col {
    width: 66%;
  }

  .product-detail[data-desktop-direction="row"] .product-detail__col--medium {
    width: 50%;
  }

  .product-detail[data-desktop-direction="row"]
    .product-detail__col--medium
    + .product-detail__col {
    width: 50%;
  }

  .product-detail[data-desktop-direction="row"] .product-detail__col--large {
    width: 66%;
  }

  .product-detail[data-desktop-direction="row"]
    .product-detail__col--large
    + .product-detail__col {
    width: 34%;
  }
}

/* ====================================
 * 悬浮加购栏 - 滚动超出一屏后固定在底部
 * ==================================== */
.product-detail__sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 72px;
  z-index: 99;
  background-color: #ffffff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* PC 端隐藏悬浮加购栏，仅移动端显示 */
@media (max-width: 959px) {
  .product-detail__sticky-bar {
    display: block;
  }
}

/* 悬浮栏显示状态 */
.product-detail__sticky-bar.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* 悬浮栏内部容器 */
.sticky-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 8px 16px;
}

/* 商品缩略图 */
.sticky-bar__product-image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
}

.sticky-bar__product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品信息 */
.sticky-bar__product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 商品标题 - 单行截断 */
.sticky-bar__product-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 价格区域 */
.sticky-bar__product-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* 当前价格 */
.sticky-bar__price-current {
  font-size: 18px;
  font-weight: 600;
  color: var(--buy-button-primary-color, #c68635);
}

/* 原价（删除线） */
.sticky-bar__price-compare {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

/* 加购按钮 */
.sticky-bar__add-to-bag {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  min-height: 32px;
  background-color: var(--buy-button-primary-color, #c68635);
  border: none;
  border-radius: var(--buy-button-border-radius, 8px);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.sticky-bar__add-to-bag:hover:not(:disabled) {
  background-color: var(--buy-button-primary-hover, #b5782e);
}

.sticky-bar__add-to-bag:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 按钮图标 */
.sticky-bar__btn-icon,
.sticky-bar__add-to-bag svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- 响应式：移动端悬浮栏 ---- */
@media (max-width: 959px) {
  .sticky-bar__inner {
    padding: 8px 12px;
    gap: 10px;
  }

  .sticky-bar__product-image {
    width: 48px;
    height: 48px;
  }

  .sticky-bar__product-title {
    font-size: 12px;
  }

  .sticky-bar__price-current {
    font-size: 16px;
  }

  .sticky-bar__price-compare {
    font-size: 12px;
  }

  .sticky-bar__add-to-bag {
    padding: 10px 16px;
    font-size: 14px;
    min-height: 40px;
  }

  .sticky-bar__btn-icon,
  .sticky-bar__add-to-bag svg {
    width: 20px;
    height: 20px;
  }
}