/* ============================================================
   Product-Detail KV（product-detail.html Section 1）
   Figma productkv#section-pc #645:5302（1920x970 白→var(--color-soft-blue) 渐变底）
   重构：无面包屑；左区 content x147 起（列 gap 30px，垂直居中）；
   右 product-area 800x970（白色叠层 + 产品图 275x547 @1329,212）
   等比缩放：min(vw, px) + 百分比定位
   ============================================================ */

.pd2-kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 970;
  background: linear-gradient(-49deg, var(--color-white) 0%, var(--color-soft-blue) 100%);
  overflow: hidden;
}

/* 1920 设计标准宽度下严格定死高度 970px：aspect-ratio 会因滚动条使实际可用宽
   略小于 1920（如 1905）而把高度算成 ~962px，与设计稿不符。
   此处锁定 970px，右侧蓝色装饰块由 overflow:hidden 干净裁于区块内不溢出 */
@media (min-width: 1920px) {
  .pd2-kv {
    height: 970px;
    aspect-ratio: auto;
  }
}

/* --- 面包屑（固定定位，同 markets-detail 惯例 left:54px） --- */
.pd2-kv__crumb {
  position: absolute;
  top: 150px;
  left: 54px;
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 3;
}

.pd2-kv__crumb img {
  height: clamp(16px, 1.042vw, 1.25rem);
  width: auto;
}

.pd2-kv__crumb .pd2-kv__crumb-arrow {
  height: clamp(12px, 0.729vw, 0.875rem);
}

.pd2-kv__crumb-link,
.pd2-kv__crumb-current {
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.9375vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.36px;
  color: var(--color-primary);
  text-decoration: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

.pd2-kv__crumb-link::before,
.pd2-kv__crumb-current::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.pd2-kv__crumb-home {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  position: relative;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.pd2-kv__crumb-home::before {
  content: "";
  position: absolute;
  inset: -14px;
}

.pd2-kv__crumb-home:hover {
  opacity: 0.7;
}

.pd2-kv__crumb-link:hover {
  color: var(--color-primary-dark);
}

.pd2-kv__crumb-link:focus-visible,
.pd2-kv__crumb-home:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- 右：KV 主视觉（Figma productkv#section-pc #645:5302 重构版：
   product-area-bg 800x970 @ 1120,0 = 58.33% / 41.67%；
   产品图 275x547 @ 全局 1330,197 = 69.27% / 20.31%） --- */
.pd2-kv__img {
  position: absolute;
  left: 58.33%;                       /* 1120/1920 */
  top: 0;
  width: 41.67%;                      /* 800/1920 */
  height: 100%;
  object-fit: cover;
}

.pd2-kv__bottle {
  position: absolute;
  left: 69.27%;                       /* 1330/1920 */
  top: 20.31%;                        /* 197/970 */
  width: 14.32%;                      /* 275/1920 */
  aspect-ratio: 275 / 547;
  object-fit: cover;
  z-index: 2;
}

/* --- 左：文字区（content x127,187 → 左区 137,197 = 7.14% / 20.31%；
   列内 gap 30px：title→bar→desc→Key Features→3-items） --- */
.pd2-kv__body {
  position: absolute;
  left: 7.14%;                        /* 137/1920 */
  top: calc(20.31% + 30px);           /* 197/970 + 30px 下移 */
  width: 54.32%;                      /* 1043/1920 */
  z-index: 3;
}

.pd2-kv__title {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: min(3.958vw, 4.75rem);      /* 新设计稿 productkv#section-pc 76/1920 */
  line-height: min(4.6875vw, 5.625rem);   /* 90/1920 */
  letter-spacing: -0.02em;
  color: var(--color-primary);
  white-space: nowrap;                /* PC 强制单行（设计稿一行） */
}

.pd2-kv__bar {
  display: block;
  width: min(11.09vw, 213px);         /* 213/1920，Figma 绿条宽 213 */
  height: 5px;
  background: var(--color-secondary); /* var(--color-secondary) */
  margin-top: min(1.5625vw, 1.875rem);    /* 新稿列 gap 30px */
}

.pd2-kv__desc {
  margin: min(1.5625vw, 1.875rem) 0 0;    /* 新稿列 gap 30px */
  max-width: 1017px;                  /* 新稿 desc 固定宽 1017 */
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: min(1.667vw, 1.75rem);      /* 28/1920 */
  line-height: min(2.5vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

.pd2-kv__features-title {
  margin: min(1.5625vw, 1.875rem) 0 0;    /* 新稿列 gap 30px */
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: min(1.667vw, 2rem);      /* 32/1920 */
  line-height: min(2.5vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

.pd2-kv__features {
  margin: min(1.5625vw, 1.875rem) 0 0;    /* 新稿列 gap 30px */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;                             /* 行起点差 43px = 行高 48 - 5，见下行 */
}

.pd2-kv__feature + .pd2-kv__feature {
  margin-top: -5px;                   /* 新稿 3-item-words 行 y 0/43/86 → 行框重叠 5px */
}

.pd2-kv__feature {
  display: flex;
  align-items: center;
  gap: min(1.82vw, 35px);            /* 35/1920 */
}

.pd2-kv__feature-dot {
  --dot-size: min(1.042vw, 1.25rem);
  width: var(--dot-size);                 /* 20/1920 */
  height: calc(var(--dot-size) * 0.866);  /* 平顶正六边形外接矩形 宽:高 = 2:√3 */
  flex: 0 0 auto;
  align-self: center;
  background: var(--color-secondary); /* 标准正六边形（平顶：顶/底面为水平边） */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.pd2-kv__feature span {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: min(1.667vw, 1.75rem);     /* 28/1920 */
  line-height: min(2.5vw, 3rem);     /* 48/1920 */
  letter-spacing: -0.02em;
  color: var(--color-text-secondary);
}

/* ==================== 响应式（1200 以下移动端布局） ==================== */
@media (max-width: 1200px) {
  .pd2-kv {
    aspect-ratio: auto;
    padding: 120px 0 80px;
  }

  /* 移动端面包屑转流式：与 body 同容器对齐，占据标题上方空间，
     不再绝对定位于顶部（避免与标题重叠，同 news-detail 惯例） */
  .pd2-kv__crumb {
    position: static;
    max-width: var(--container-content);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    margin-bottom: 40px;
  }

  .pd2-kv__body {
    position: static;
    width: 100%;
    max-width: var(--container-content);
    margin: 0 auto;
    padding: 0 var(--container-padding);
  }

  /* title / desc 统一由 vw 缩放，不设固定 override；移动端标题允许换行 */
  .pd2-kv__title {
    white-space: normal;
  }

  /* 移动端：Key Features 上方间距略调大（30 → 40px） */
  .pd2-kv__features-title {
    margin-top: 40px;
  }

  .pd2-kv__img,
  .pd2-kv__bottle {
    position: static;
    display: none; /* 移动端隐藏右侧图 */
  }
}

@media (max-width: 992px) {
  .pd2-kv {
    padding: 100px 0 64px;
  }

  .pd2-kv__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }
  .pd2-kv__desc,
  .pd2-kv__feature span {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .pd2-kv {
    padding: 100px 0 56px;
  }

  .pd2-kv__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
  }

  .pd2-kv__desc,
  .pd2-kv__feature span {
    font-size: clamp(1rem, 0.04vw + 0.98rem, 1.125rem);
    line-height: 1.5;
  }

  .pd2-kv__bar {
    margin-top: calc(min(1.5625vw, 1.875rem) + 5px);
    margin-bottom: 5px;
  }

  .pd2-kv__features-title {
    font-size: clamp(1rem, 0.32vw + 0.92rem, 1.5rem);
  }

  .pd2-kv__features {
    gap: 0;
  }

  .pd2-kv__feature + .pd2-kv__feature {
    margin-top: 0;
  }

  .pd2-kv__feature span {
    line-height: 1.8;
  }
}

@media (max-width: 480px) {
  .pd2-kv {
    padding: 80px 0 40px;
  }
  .pd2-kv__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }
  .pd2-kv__desc,
  .pd2-kv__feature span {
    font-size: clamp(0.9375rem, 0.04vw + 0.92rem, 1rem);
    line-height: 1.5;
  }

  .pd2-kv__bar {
    margin-top: calc(min(1.5625vw, 1.875rem) + 5px);
    margin-bottom: 5px;
  }
}

/* ==================== 无障碍降级 ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}