.skeleton-note {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  font-size: 13px;
}

.demo-notes {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 44px;
  max-height: 70vh;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.demo-notes summary {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: var(--bg);
  border-radius: 50%;
  background: var(--brand);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  opacity: .82;
  transition: opacity .16s ease;
}

.demo-notes summary::-webkit-details-marker {
  display: none;
}

.demo-notes summary:hover,
.demo-notes summary:focus-visible {
  opacity: 1;
}

.demo-notes[open] {
  width: min(360px, calc(100vw - 40px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 10px 30px rgba(22,32,46,.14);
}

.demo-notes[open] summary {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  place-items: center start;
  border-radius: var(--radius) var(--radius) 0 0;
  opacity: 1;
}

.demo-notes__expanded,
.demo-notes[open] .demo-notes__collapsed {
  display: none;
}

.demo-notes[open] .demo-notes__expanded {
  display: inline;
}

.demo-notes__body {
  max-height: calc(70vh - 44px);
  padding: 12px 16px 14px;
  overflow-y: auto;
  color: var(--ink-2);
  font-size: 13px;
}

.demo-notes__body p:last-child {
  margin-bottom: 0;
}

.cart-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 2px;
  color: var(--ink);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cart-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  color: var(--bg);
  border-radius: 10px;
  background: var(--cta-900);
  font-size: 11px;
  font-weight: 700;
}

.cart-preview {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  visibility: hidden;
  width: 340px;
  padding: 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 12px 34px rgba(22,32,46,.16);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.cart-lines {
  margin-top: 10px;
}

.cart-lines p {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  margin-bottom: var(--space-2);
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.35;
}

.cart-lines p span {
  color: var(--ink);
  font-weight: 600;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.rating {
  color: var(--cta-900);
  font-weight: 600;
}

/* 价格是购买面板里最大的字，和产品头的 36px 标题拉开层级。
   颜色用 cta-900 而不是 cta：cta 在白底上只有 3.086:1，只能靠
   「≥24px 粗体算大文本」勉强过 3.0 门槛，字号一改就挂；
   cta-900 是 4.513:1，任何字号都稳，而且和主按钮同色。 */
.price {
  margin: 0 0 var(--space-4);
  color: var(--cta-900);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
}

.purchase-panel--config .purchase-section:first-child,
.purchase-panel--assurance .purchase-detail:first-child,
.purchase-panel--assurance .included-trigger:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 券与倒计时是同一件事（这次促销），合成一条带，不再各画一个框 */
.coupon {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--brand-050);
}

/* 券文案和券码放两行：一行排会在 400px 以下的购买栏里把文案挤成五行 */
.coupon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.coupon__row strong {
  flex: 1 1 100%;
}

.coupon code {
  padding: 4px 10px;
  color: var(--ink);
  border: 1px dashed var(--brand-700);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: .04em;
}

.coupon p {
  margin: var(--space-1) 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.25;
}

.text-button {
  padding: var(--space-1) var(--space-2);
  color: var(--brand-900);
  border: 0;
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  min-height: 48px;
  margin-top: 0;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--brand-050);
}

.countdown--ended {
  justify-content: flex-start;
  color: var(--ink-2);
  background: var(--bg-soft);
}

.countdown__units {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.countdown__units > span {
  display: grid;
  min-width: 40px;
  text-align: center;
}

.countdown__units b {
  font-size: var(--fs-h3);
  line-height: 1.1;
}

.countdown__units small {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  line-height: 1.2;
  text-transform: uppercase;
}

.countdown__units i {
  color: var(--ink-3);
  font-style: normal;
  font-weight: 600;
}

.purchase-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.purchase-section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
}

/* 左栏够宽，六格规格排三列；窄了自动回落到两列 */
.key-specs-panel h2 {
  margin-bottom: var(--space-4);
  font-size: var(--fs-h3);
}

.key-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-2);
}

/* 规格瓷砖靠软底成组，不描边 */
.key-spec {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.key-spec svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: var(--ink-2);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.key-spec span,
.key-spec strong,
.key-spec small {
  display: block;
  min-width: 0;
}

.key-spec strong {
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.key-spec small {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
}

/* 标签列固定 48px 是有意的：两行的 chip 必须从同一条竖线起排，
   用 auto 会让 Size / Guard 两行错开 */
.sibling-chip-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
}

.sibling-chip-row > span {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.sibling-chip-row > div {
  display: flex;
  gap: var(--space-2);
}

/* 分段选择控件。三条不变量：
   1. 选中态不许改变尺寸 —— 第二圈用 inset box-shadow 画，不是把 1px 边框加成 2px
      （加边框会让选中的 chip 宽 2px 高 2px，点一下整行就跳）。
   2. min-width 兜住同长度标签 —— 47" / 59" / 71" 的字形宽度本来不同，
      不兜会排出 61 / 59 / 55 三种宽度。这里不能靠 tabular-nums：
      实测打包的 Inter 子集不带 tnum 特性，那条声明是空操作。
   3. 字重固定 500，选中态不加粗 —— 加粗同样会改宽度。 */
.sibling-chip {
  min-width: 64px;
  min-height: 40px;
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* hover 不上浮：一排 chip 里有一个跳起来，相邻的看着就在抖 */
.sibling-chip:not(:disabled):hover {
  border-color: var(--ink-3);
  background: var(--bg-soft);
}

.sibling-chip--current {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: var(--brand-050);
  cursor: default;
}

.sibling-help {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.sibling-help a {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-top: 2px;
  color: var(--brand-900);
  font-weight: 700;
}

.purchase-detail {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.purchase-detail h2 {
  margin-bottom: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.purchase-detail p,
.purchase-detail li,
.purchase-detail dt,
.purchase-detail dd {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
}

.purchase-detail ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.purchase-detail li {
  position: relative;
  padding-left: 17px;
  line-height: 1.35;
}

.purchase-detail li::before {
  position: absolute;
  left: 0;
  color: var(--brand-900);
  content: "✓";
  font-weight: 700;
}

.purchase-detail dl {
  margin: 0;
}

.purchase-detail dl > div {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  padding: 4px 0;
}

.purchase-detail dd {
  margin: 0;
  color: var(--ink);
  text-align: right;
}

.purchase-detail p {
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.purchase-detail p:last-child {
  margin-bottom: 0;
}

.model-benefits {
  min-width: 0;
}

.model-benefits h2 {
  margin-bottom: var(--space-3);
  font-size: var(--fs-h3);
  font-weight: 600;
}

.model-benefits ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-2) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-benefits li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.45;
}

.model-benefits li::before {
  position: absolute;
  left: 0;
  color: var(--brand-900);
  content: "✓";
  font-weight: 700;
}

/* 库存与配送是状态文本，不是卡片 */
.fulfillment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
  color: var(--ink-2);
  font-size: 13px;
}

.fulfillment strong {
  flex: 0 0 auto;
  color: var(--brand-900);
}

.stock-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* 三列会在 400px 的购买栏里把 Add To Cart 挤成两行；
   数量 + 主操作一行、次操作独占一行，两个按钮都拿到完整宽度 */
.buy-controls {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.buy-controls .button--secondary {
  grid-column: 1 / -1;
}

.included-trigger {
  display: grid;
  grid-template-columns: 24px 1fr auto 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.included-trigger:hover {
  border-color: var(--brand);
  background: var(--bg);
}

.included-trigger svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.included-trigger strong {
  font-size: var(--fs-body);
}

.included-trigger span {
  color: var(--brand-900);
  font-size: var(--fs-small);
}

.included-trigger i {
  color: var(--ink-3);
  font-style: normal;
}

.quantity-stepper {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.quantity-stepper button,
.quantity-stepper output {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
}

/* 显式写 padding —— 不写会吃到浏览器对 <button> 的默认 1px 6px */
.quantity-stepper button {
  padding: 0;
  color: var(--ink-2);
  cursor: pointer;
}

.quantity-stepper output {
  font-weight: 600;
}

.button {
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
}

.button--primary,
.button--compact {
  color: var(--bg);
  border: 1px solid var(--cta-900);
  background: var(--cta-900);
}

.button--primary:hover,
.button--compact:hover {
  border-color: var(--cta-900);
  background: var(--cta-900);
  box-shadow: var(--shadow-1);
}

.button--secondary {
  color: var(--cta-900);
  border: 1px solid var(--cta);
  background: var(--bg);
}

/* 卡片轨面板比内容面板矮一档 —— 它是辅助内容，不需要同样的呼吸量 */
.hero-rail {
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-4);
}

.rail-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.rail-heading h2 {
  margin-bottom: 0;
  font-size: var(--fs-h3);
}

.rail-heading p {
  margin: 0 0 0 auto;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* 两条轨都在首屏左栏里，靠横滑保证卡片不被压小、并露出下一张。
   268 是配件卡的下限：图 92 + 间距 + 文案列 ≥150，标题才不会被截成
   「Replacement Glass Snee…」。四张卡放不下就横滑，露出的半张正好是滑动提示。 */
.accessory-rail-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: var(--space-3);
  padding-bottom: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.rail-addon-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: auto auto 32px;
  align-items: start;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.rail-addon-card:not(.rail-addon-card--out-of-stock):hover {
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

.rail-addon-card img {
  width: 92px;
  height: 92px;
  grid-row: 1 / 4;
  padding: 6px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.rail-addon-card h3 {
  display: -webkit-box;
  height: 36px;
  margin: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.rail-addon-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  font-size: var(--fs-small);
}

.rail-addon-card p strong {
  color: var(--cta-900);
}

.rail-addon-card p span {
  color: var(--brand-900);
}

/* 通栏之后卡片变宽，按钮不跟着拉满，保持自身尺度 */
.rail-addon-add {
  justify-self: start;
  min-width: 104px;
  min-height: 32px;
  margin-top: auto;
  padding: 0 16px;
  color: var(--cta-900);
  border: 1px solid var(--cta);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
}

.rail-addon-add:hover:not(:disabled) {
  box-shadow: var(--shadow-1);
}

.rail-addon-card--out-of-stock {
  opacity: .55;
}

.rail-addon-card--out-of-stock .rail-addon-add {
  color: var(--ink-3);
  border-color: var(--line);
  background: var(--bg-soft);
  cursor: not-allowed;
}

.related-rail-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(182px, 1fr);
  gap: var(--space-3);
  padding-bottom: 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.rail-addon-card,
.related-rail-card {
  scroll-snap-align: start;
}

/* 推荐位是瓷砖不是卡片：默认无描边，hover 才浮起 */
.related-rail-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-auto-rows: auto;
  padding: var(--space-2);
  color: var(--ink);
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.related-rail-card:hover {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-1);
}

/* 4:3 让方图里的产品还认得出来；2:1 时产品只剩 30 多像素高 */
.related-rail-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.related-rail-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.related-rail-card__image > span {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: var(--space-1) var(--space-2);
  color: var(--bg);
  border-radius: var(--radius-sm);
  background: var(--sale);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.related-rail-card h3 {
  display: -webkit-box;
  height: 34px;
  margin: var(--space-2) 0 var(--space-1);
  overflow: hidden;
  font-size: var(--fs-small);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.related-rail-card__rating {
  margin: 0;
  font-size: var(--fs-micro);
  line-height: 1.35;
}

/* 现价比划线价大一档，否则两个价钱同样大小会互相抢 */
.related-rail-card__price {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.35;
}

.related-rail-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.related-rail-card__price strong {
  color: var(--cta-900);
}

.related-rail-card__price del {
  color: var(--ink-3);
  font-size: var(--fs-micro);
}

.related-rail-card__rating {
  color: var(--cta-900);
}

.related-rail-card__rating--empty {
  visibility: hidden;
}

/* 推荐位加购是次要动作：中性描边，hover 才升级成 CTA 色。
   padding 必须显式写 —— 不写会吃到浏览器默认的 1px 6px */
.related-rail-add {
  width: 100%;
  min-height: 32px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  color: var(--cta-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.related-rail-add:hover {
  border-color: var(--cta);
  background: var(--bg-soft);
}

.button--compact {
  min-height: 38px;
  padding: 0 13px;
  font-size: var(--fs-small);
}

.assurance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 18px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--brand-050);
}

.assurance span {
  display: flex;
  gap: 6px;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.35;
}

.assurance i {
  color: var(--brand-700);
  font-style: normal;
  font-weight: 700;
}

/* 支付图标是信任标记，不需要再被框一次 */
.payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-soft);
}

.payments img {
  width: 30px;
  height: 20px;
}

.modal[hidden],
.toast[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22,32,46,.52);
}

.modal__panel {
  position: relative;
  z-index: 1;
  width: 460px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 20px 60px rgba(22,32,46,.22);
  text-align: center;
}

.modal__panel img {
  width: 180px;
  height: 130px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.modal__panel h2 {
  margin-bottom: 8px;
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}

.modal__url {
  margin-bottom: 0;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.toast {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 70;
  max-width: 420px;
  padding: 13px 16px;
  color: var(--bg);
  border-radius: var(--radius);
  background: var(--ink);
  box-shadow: 0 12px 34px rgba(22,32,46,.2);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.media-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.media-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  color: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.media-tabs button:hover[aria-selected="false"] {
  color: var(--ink);
  border-color: var(--line);
  background: var(--bg);
}

.media-tabs button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  color: var(--ink-3);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: var(--fs-micro);
  font-weight: 700;
}

.media-tabs button[aria-selected="true"] {
  color: var(--bg);
  border-color: var(--brand);
  background: var(--brand);
}

.media-tabs button[aria-selected="true"] span {
  color: var(--brand-900);
  background: var(--brand-050);
}

/* 媒体区现在是一块白面板，坐在浅灰的页面底上 */
.product-media {
  min-width: 0;
  padding: var(--space-4);
}

.media-viewer {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

/* 第一列就是主舞台的宽度，不留 40px 死区；缩略图拿剩下的 */
.media-viewer--image {
  grid-template-columns: clamp(360px, calc(100% - 300px), 440px) minmax(200px, 1fr);
  grid-template-rows: auto;
}

.media-viewer--image .media-stage,
.media-viewer--image .media-tools {
  min-height: 0;
  height: auto;
}

.media-tools {
  display: flex;
  min-width: 0;
  height: auto;
  max-height: 500px;
  overflow: hidden;
  flex-direction: column;
}

/* 140 而不是 148：3 行缩略图正好等于 440 的主舞台高度，
   媒体面板由主舞台定高，不会被缩略图列顶高 24px */
.media-thumbnails {
  --thumb-size: min(140px, calc((100% - 10px) / 2));
  display: grid;
  min-height: 0;
  height: auto;
  max-height: 500px;
  grid-auto-rows: auto;
  align-content: start;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.media-thumbnails--product,
.media-thumbnails--features {
  grid-template-columns: repeat(2, var(--thumb-size));
}

.media-thumbnails--dimensions {
  grid-template-columns: var(--thumb-size);
}

.media-thumbnails--video {
  height: auto;
  grid-template-columns: 90px;
  grid-auto-rows: auto;
}

/* 缩略图是控件：用软底而不是描边，选中态才上品牌色环 */
.media-thumbnails button {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.media-thumbnails button:hover {
  background: var(--line-2);
}

.media-thumbnails button[aria-current="true"] {
  border-color: var(--brand);
  background: var(--bg);
}

.media-thumbnails img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-more {
  display: grid;
  place-content: center;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
}

.media-more small {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
}

.thumbnail-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bg);
  background: rgba(22,32,46,.28);
  font-size: var(--fs-h3);
}

/* 媒体面板本身就是边界，主舞台不再画第二层框。
   阶段 21 从 500 收到 440：客户要求两条卡片轨在第一屏露出来，
   首屏上方每省 1px 卡片轨就多露 1px，主图是这里唯一还能让的地方。
   产品在源图画幅里只占约 32%，440 渲染出来约 141px 高（500 时约 160px）。 */
.media-stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: var(--ratio, 1 / 1);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg);
}

.media-expand {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 0 12px;
  color: var(--ink-2);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: zoom-in;
  transition: color .16s ease, border-color .16s ease;
}

.media-expand:hover {
  color: var(--brand-900);
  background: var(--line-2);
}

.media-video-note {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-content: center;
  padding: 10px;
  color: var(--ink-2);
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.media-video-note strong,
.media-video-note small {
  display: block;
}

.media-video-note strong {
  color: var(--ink);
  font-size: 11px;
}

.media-video-note small {
  margin-top: 3px;
  font-size: var(--fs-micro);
  line-height: 1.3;
}

.media-stage__asset {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--bg);
}

img.media-stage__asset {
  cursor: zoom-in;
}

.media-stage__asset--fade {
  animation: media-fade .2s ease;
}

@keyframes media-fade {
  from { opacity: .35; }
  to { opacity: 1; }
}

.video-fallback {
  width: 100%;
  height: 100%;
  text-align: center;
}

.video-fallback img {
  width: 100%;
  height: calc(100% - 54px);
  object-fit: contain;
}

.video-fallback p {
  margin: 10px;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.section-heading {
  margin-bottom: var(--space-6);
}

.section-heading h2 {
  margin-bottom: 6px;
}

.section-heading p:last-child {
  margin-bottom: 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.section-heading--split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
}

.section-heading--split h2 {
  margin-bottom: 0;
}

.section-heading--split a {
  color: var(--brand-900);
  font-weight: 600;
}

.spec-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.spec-columns dl {
  margin: 0;
}

.spec-columns dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-small);
}

.spec-columns dl > div:first-child {
  padding-top: 0;
}

.spec-columns dt {
  color: var(--ink-2);
}

.spec-columns dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

/* 卖点是清单不是卡片：去掉五个小框，靠对勾和列宽成行 */
.feature-bullets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5) var(--space-8);
  margin: var(--space-8) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
}

.feature-bullets li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.feature-bullets li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--brand-700);
  content: "✓";
  font-weight: 700;
}

.spec-support {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius);
  background: var(--bg);
}

.spec-support h3 {
  margin-bottom: 4px;
  font-size: var(--fs-body);
}

.spec-support p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.spec-support > p {
  color: var(--ink);
  text-align: right;
  font-weight: 600;
}

.included-group + .included-group {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
}

.scroll-locked {
  overflow: hidden;
}

.included-drawer[hidden] {
  display: none;
}

.included-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
}

.included-drawer__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(22,32,46,.4);
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.included-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw);
  height: 100%;
  background: var(--bg);
  box-shadow: -10px 0 30px rgba(22,32,46,.16);
  transform: translateX(100%);
  transition: transform 220ms ease-out;
}

.included-drawer--open .included-drawer__backdrop {
  opacity: 1;
}

.included-drawer--open .included-drawer__panel {
  transform: translateX(0);
}

.included-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.included-drawer__header .eyebrow,
.included-drawer__header h2 {
  margin: 0;
}

.included-drawer__header h2 {
  margin-top: 4px;
  font-size: 24px;
}

.included-drawer__close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 24px;
  cursor: pointer;
}

.included-drawer__body {
  min-height: 0;
  padding: 24px;
  overflow-y: auto;
}

.included-drawer__intro {
  margin: 0 0 24px;
  color: var(--ink-2);
  font-size: 13px;
}

.included-drawer .included-group + .included-group {
  margin-top: 24px;
  padding-top: 22px;
}

.included-drawer .included-group h3 {
  margin: 0 0 12px;
  font-size: var(--fs-h3);
}

.included-drawer .included-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.included-drawer .included-card {
  grid-template-columns: 72px 1fr;
  gap: 14px;
  min-height: 96px;
  padding: 10px;
  box-shadow: none;
}

.included-drawer .included-card img {
  width: 72px;
  height: 72px;
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.included-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 146px;
  padding: var(--space-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
}

.included-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.included-card h4 {
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.35;
}

.included-card p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.included-group--separate .included-card {
  background: var(--bg-soft);
  box-shadow: none;
  opacity: .72;
}

.separate-badge {
  display: inline-block;
  padding: 2px 7px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
}

.disclaimer {
  margin: 22px 0 0;
  color: var(--ink-3);
  font-size: var(--fs-small);
}

/* 四份资料是一份清单：一层边界 + 分隔线，不是四张卡 */
.document-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
}

.document-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  transition: background .16s ease;
}

.document-card:last-child {
  border-bottom: 0;
}

.document-card:hover {
  background: var(--bg-soft);
}

.document-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--brand-700);
  border-radius: var(--radius-sm);
  background: var(--brand-050);
}

.document-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.document-card strong,
.document-card > div span {
  display: block;
}

.document-card > div span {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.document-card a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  color: var(--brand-900);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  font-weight: 600;
  white-space: nowrap;
}

.rich-list {
  display: grid;
  gap: var(--panel-gap);
}

/* 每个模块自己就是一块面板，不再靠奇偶交替底色制造节奏 */
.rich-module {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-1);
}

.rich-module--reverse .rich-module__media {
  order: 2;
}

/* 素材本身是白底图，框内也必须是白底，否则白图会在灰带里显出一个方块 */
.rich-module__media {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg);
}

.rich-module__media > img,
.rich-module__media > video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--bg);
}

.rich-module__copy > span {
  color: var(--brand-900);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.rich-module__copy h3 {
  margin: 8px 0 14px;
  font-size: var(--fs-h2);
  line-height: 1.25;
  letter-spacing: -.01em;
}

.rich-module__copy p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-body);
}

.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.reviews-summary > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reviews-summary > div > strong {
  font-size: var(--fs-stat);
  line-height: 1;
}

.reviews-summary > div > span,
.review-card__meta span {
  color: var(--cta-900);
}

.reviews-summary small {
  color: var(--ink-2);
  font-size: var(--fs-body);
}

.review-list {
  border-top: 1px solid var(--line-soft);
}

.review-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-10);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line-soft);
}

.review-card__meta {
  display: grid;
  align-content: start;
  gap: 4px;
}

.review-card__meta time {
  color: var(--ink-3);
  font-size: var(--fs-small);
}

.review-card h3 {
  margin-bottom: 8px;
}

.review-card p {
  margin: 0;
  color: var(--ink-2);
}

.demo-notes__body h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: 13px;
}

.demo-notes__body ul {
  margin: 0;
  padding-left: 18px;
}

.demo-notes__body li {
  margin-bottom: 5px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(22,32,46,.78);
}

.lightbox__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 820px) 56px;
  align-items: center;
  gap: 16px;
  width: min(1060px, calc(100vw - 120px));
}

.lightbox__panel > img {
  grid-column: 2;
  width: 820px;
  max-height: calc(100vh - 130px);
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--bg);
}

.lightbox__close,
.lightbox__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 22px;
  cursor: pointer;
}

.lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.lightbox__arrow--prev {
  grid-column: 1;
  grid-row: 1;
}

.lightbox__arrow--next {
  grid-column: 3;
  grid-row: 1;
}

#lightbox-caption {
  grid-column: 2;
  margin: 10px 0 0;
  color: var(--bg);
  text-align: center;
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------
   目标尺寸基线（阶段 21）
   WCAG 2.2 SC 2.5.8 的 24×24 不只对触摸设备生效，鼠标同样适用。
   阶段 20 只在 ≤1279 做了这件事，1440 上还有 19 个 21px 的纯文字
   链接不达标——这里补成全断点基线，窄屏那档再抬到 34px。
   ------------------------------------------------------------ */
.account-nav > a,
.rating,
.breadcrumb a,
.breadcrumb > span,
.section-heading--split a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.footer-grid a {
  display: flex;
  align-items: center;
  min-height: 24px;
}

/* ------------------------------------------------------------
   等宽数字（阶段 22）
   实测：打包的 Inter 子集不含 tnum 特性，"1111" 与 "0000" 在开与不开
   font-variant-numeric 下都是 48 / 80px —— 下面这条声明目前是空操作，
   留着是为了将来换成完整字重时自动生效。
   所以凡是宽度真的要稳的地方，都另外用结构兜住（见 .countdown__units b span）。
   ------------------------------------------------------------ */
.price,
.countdown__units b,
.key-spec strong,
.rail-addon-card p,
.related-rail-card__price,
.related-rail-card__rating,
.reviews-summary > div > strong,
.buy-bar__price,
.cart-count,
.cart-lines p,
.spec-columns dd,
.document-card > div span,
.review-card__meta time {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   焦点环不许被裁（阶段 22）
   焦点样式是 3px outline + 3px offset，也就是元素外扩 6px。
   横滑容器一旦 overflow-x: auto，另一轴也会被强制成 auto，
   紧贴容器边的第一个格子焦点环就会被切掉。
   ------------------------------------------------------------ */
.media-thumbnails {
  padding-top: 4px;
  margin-top: -4px;
}

/* 下载清单原本用 overflow: hidden 做圆角，代价是里面的
   Download 焦点环也会被裁。改成首尾行各自圆角。 */
.document-list {
  overflow: visible;
}

.document-card:first-child {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.document-card:last-child {
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

/* 倒计时每秒重绘。Inter 的 "1" 比 "0" 窄 8px（32px 字号下），
   两位数里出现 1 时整组会缩窄并重新居中，肉眼能看到抽动。
   每个数字塞进一个 1ch 宽的格子里 —— 1ch 就是 "0" 的字形宽度，
   等于不依赖字体特性做出了等宽数字。 */
.countdown__units b span {
  display: inline-block;
  width: 1ch;
  text-align: center;
}