/**
 * SiteForge Compatibility — 微信 X5 / 旧浏览器兼容
 *
 * 解决: CSS Grid / object-fit / position: sticky / backdrop-filter
 * 加载: header.php 中其他 CSS 之后
 * 策略: 覆盖 + @supports not 回退
 */

/* ─── object-fit 回退（img 用 background 兜底） ─── */
.co-item-img,
.pd-main-img,
.pd-thumbs img,
.cart-row-img,
.cart-row-img img,
.co-item-img img,
.pd-main-img img,
.pd-thumbs img,
.cart-row-img img {
  font-family: 'object-fit: cover;';
}
/* 图片加载失败或 object-fit 不支持时保持比例 */
.pd-main-img {
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pd-main-img img {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ─── CSS Grid → Flex 兜底 ─── */
/* 结算页双栏 */
@supports not (display: grid) {
  .co-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .co-sidebar { order: -1; }
  @media (min-width: 769px) {
    .co-grid {
      flex-direction: row;
      align-items: flex-start;
    }
    .co-main { flex: 1; min-width: 0; }
    .co-sidebar { width: 360px; min-width: 360px; order: 1; }
  }

  /* 产品详情两栏 */
  @media (min-width: 769px) {
    .pd-layout {
      display: flex;
      gap: 40px;
      align-items: flex-start;
    }
    .pd-gallery { width: 50%; }
    .pd-info { width: 50%; }
  }

  /* 表单行 */
  .co-field-row.two-col,
  .co-field-row.three-col {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .co-field-row.two-col > .co-field { width: calc(50% - 6px); }
  .co-field-row.three-col > .co-field { width: calc(33.33% - 8px); }
  @media (max-width: 768px) {
    .co-field-row.two-col > .co-field,
    .co-field-row.three-col > .co-field { width: 100%; }
  }
}

/* ─── position: sticky 回退 ─── */
@supports not (position: sticky) {
  .co-summary-card { position: static; }
}

/* ─── backdrop-filter 回退 ─── */
@supports not (backdrop-filter: blur(8px)) {
  header { background: rgba(255,255,255,0.95); }
}

/* ─── 微信 X5 特有：flex 换行 ─── */
/* 旧 X5 中 flex-wrap 需要显式 */
.co-coupon-row {
  flex-wrap: nowrap;
}

/* ─── SVG 图标兜底 ─── */
/* 老 X5 部分版本 SVG 不渲染 */
.co-btn svg {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 4px;
}