.qd-price-compare {
  --qpc-bg: #f5f1ea;
  --qpc-accent: #7e5000;
  --qpc-ink: #2e2b28;
  --qpc-line: #222222;
  width: 100%;
  background: var(--qpc-bg);
}

.qd-price-compare__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.qd-price-compare__heading {
  margin: 0;
  font-family: var(--sort-title-font, serif);
  font-size: var(--qpc-heading-pc-size, 32px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--qpc-heading-pc-color, var(--qpc-ink));
}

.qd-price-compare__subheading {
  margin: 14px 0 0;
  font-size: var(--qpc-sub-pc-size, 14px);
  line-height: 1.6;
  text-align: center;
  color: var(--qpc-sub-pc-color, #585349);
}

.qd-price-compare__body {
  margin-top: 56px;
}

.qd-price-compare__media-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
}

.qd-price-compare__media-item {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 64px;
  align-items: center;
}

.qd-price-compare__media-item.is-active {
  display: grid;
}

.qd-price-compare-item {
  display: contents;
}

/* 仅用于向前端传递 SKU 价格数据，不参与布局 */
.qd-price-compare-item__sku-data {
  display: none !important;
}

.qd-price-compare-item__media {
  position: relative;
  min-width: 0;
}

.qd-price-compare-item__media-link {
  display: block;
}

.qd-price-compare-item__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.qd-price-compare-item__detail {
  min-width: 0;
}

.qd-price-compare-item__name {
  margin: 0;
  font-size: var(--qpc-name-pc-size, 17px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--qpc-name-pc-color, var(--qpc-ink));
}

.qd-price-compare-item__name a {
  color: inherit;
  text-decoration: none;
}

.qd-price-compare-item__desc {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--qpc-ink);
  opacity: 0.66;
}

.qd-price-compare-item__cards {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 550px;
}

.qd-price-compare-item__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 200px;
  padding: 24px 12px;
  border: 1.5px solid var(--qpc-line);
  background: transparent;
  text-align: center;
  box-sizing: border-box;
}

.qd-price-compare-item__card--featured {
  border-color: var(--qpc-accent);
  background: var(--qpc-accent);
  color: #fff;
}

.qd-price-compare-item__card--save {
  border-color: var(--qpc-accent);
}

.qd-price-compare-item__card-label {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

.qd-price-compare-item__card-divider {
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.qd-price-compare-item__card-value {
  font-family: var(--sort-body-light-font, serif);
  font-size: 27px;
  line-height: 1.2;
  font-weight: 400;
  color: inherit;
  min-height: 29px;
}

/* 轮播指示器：一条浅色轨道 + 黑色滑块，点击轨道切换并平滑滑动 */
.qd-price-compare__nav {
  position: absolute;
  left: calc(25% - 16px);
  transform: translateX(-50%);
  bottom: -28px;
  width: 100px;
  height: 2px;
}

.qd-price-compare__nav-track {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  background: #c9c4bb;
}

/* 覆盖在浅色轨道上的深色滑块，宽度由模板按商品数内联输出 */
.qd-price-compare__nav-thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--qpc-ink);
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* 点击热区：透明覆盖在轨道上并上下加宽，位置与宽度由模板内联输出 */
.qd-price-compare__nav-hit {
  position: absolute;
  top: -8px;
  bottom: -8px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}


/* Pad - 769px ~ 991px：沿用移动端样式，故与移动端合并为同一断点区间 */
@media (max-width: 991px) {
  .qd-price-compare__heading {
    font-size: var(--qpc-heading-mb-size, 24px);
    color: var(--qpc-heading-mb-color, var(--qpc-heading-pc-color, var(--qpc-ink)));
  }

  .qd-price-compare__subheading {
    font-size: var(--qpc-sub-mb-size, 13px);
    color: var(--qpc-sub-mb-color, var(--qpc-sub-pc-color, #585349));
  }

  .qd-price-compare-item__name {
    font-size: var(--qpc-name-mb-size, 16px);
    color: var(--qpc-name-mb-color, var(--qpc-name-pc-color, var(--qpc-ink)));
  }

  .qd-price-compare__body {
    margin-top: 36px;
  }

  .qd-price-compare__media-wrap,
  .qd-price-compare__media-item {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
  }

  .qd-price-compare__nav {
    /* 必须保持定位状态：热区 nav-hit 是 absolute，依赖 nav 作为定位父级；
       若为 static，热区会相对整个 media-wrap 撑满轮播高度，导致点不中切换条 */
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100px;
    margin: 16px auto 0;
  }

  /* 热区回到切换条上，并上下加宽提升移动端可点面积 */
  .qd-price-compare__nav-hit {
    top: -12px;
    bottom: -12px;
  }

  .qd-price-compare-item__cards {
    max-width: none;
    gap: 10px;
  }

  .qd-price-compare-item__card {
    min-height: 120px;
    padding: 18px 8px;
  }

  .qd-price-compare-item__card-value {
    font-size: 18px;
  }
}