/* r34 - product detail parity layer.
   Presentation only: no checkout behaviour, no protocol code. Values are the
   geometry/typography measured from the reference product page at 1440x900 and
   390x844 (Tailwind v4 palette, 1fr + 420px order column, 32px radius cards).
   Loaded after every other storefront stylesheet so it wins on equal specificity. */

:root {
  --pd-slate-50: #f8fafc;
  --pd-slate-100: #f1f5f9;
  --pd-slate-200: #e2e8f0;
  --pd-slate-400: #90a1b9;
  --pd-slate-500: #62748e;
  --pd-slate-600: #45556c;
  --pd-slate-700: #314158;
  --pd-slate-800: #1d293d;
  --pd-slate-950: #020617;
  --pd-blue-50: #eff6ff;
  --pd-blue-100: #dbeafe;
  --pd-blue-200: #bedbff;
  --pd-blue-600: #155dfc;
  --pd-blue-700: #1447e6;
  --pd-emerald-50: #ecfdf5;
  --pd-emerald-700: #007a55;
  --pd-green-50: #f0fdf4;
  --pd-green-600: #00a63e;
  --pd-violet-50: #f5f3ff;
  --pd-violet-600: #7f22fe;
  --pd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* ---------- two-column shell ---------- */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  width: 100%;
  max-width: 1134px;
  margin-inline: auto;
  gap: 24px;
  align-items: start;
}

#main:has(.product-layout) { background: var(--pd-slate-50); padding-bottom: 56px; }

#main > .container:has(> .product-layout) {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-right: 24px;
  padding-left: 24px;
}

.product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* r87：参考站头卡底边 494、下一个面板顶边 518，模块间距 24px。 */
  gap: 24px;
  align-content: start;
}
#main .product-layout.custom-module-order,#main .product-layout.without-checkout{grid-template-columns:minmax(0,1fr)}
.product-main>.pd-guarantees{padding:24px;border:1px solid var(--pd-slate-200);border-radius:20px;background:#fff;margin:0}
.product-layout.custom-module-order .checkout{position:static;max-width:none}

.product-layout > .checkout {
  align-self: start;
  height: fit-content;
}

/* ---------- overview card ---------- */
/* store-product.css sets 30px padding/radius through `.product-main>.panel`,
   so the reference 32px card needs the same selector weight. */
.product-main > .product-overview {
  background: #fff;
  border: 1px solid var(--pd-slate-200);
  /* r82：参考站最新版的左栏卡片是 16px 圆角 + 28px 内边距。 */
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--pd-shadow-sm);
  color: var(--pd-slate-950);
}

.product-overview .pd-hero {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.product-overview .product-icon {
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px solid var(--pd-slate-100);
  border-radius: 16px;
  background: var(--pd-slate-50);
  box-shadow: none;
  overflow: visible;
}

/* store-product.css pins the tile at 150px with an #main-prefixed rule, so the
   reference 128px tile needs the same specificity to win. */
#main .product-overview .product-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

#main .product-overview .product-icon img,
#main .product-overview img.product-vendor-logo {
  width: 36px;
  height: 36px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

#main .product-overview .product-icon svg {
  width: 36px;
  height: 36px;
}

.product-overview .pd-hero-body {
  min-width: 0;
}

.product-overview h1 {
  margin: 0;
  /* r82：参考站最新版的商品标题是 38px/700，字距 -0.035em。 */
  font-size: 38px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -1.33px;
  color: var(--pd-slate-950);
}

.product-detail-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--pd-slate-600);
}

.product-detail-tags .stock,
.product-detail-tags .meta-chip {
  display: inline-block;
  border-radius: 999px;
  /* 1px tighter than the reference pill so the longer Chinese labels still sit
     on the single row the reference uses (measured 538px vs 532px available). */
  padding: 6px 11px;
  background: var(--pd-slate-100);
  color: var(--pd-slate-600);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  border: 0;
}

.product-detail-tags .stock {
  background: var(--pd-emerald-50);
  color: var(--pd-emerald-700);
}

.product-detail-tags .stock.empty {
  background: #fff7ed;
  color: #b45309;
}

.product-overview .product-price {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  color: inherit;
}

.product-overview .product-price strong {
  font-size: 36px;
  line-height: 40px;
  font-weight: 900;
  letter-spacing: -0.9px;
  color: var(--pd-blue-600);
}

.product-overview .product-price small {
  padding-bottom: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pd-slate-400);
}

.product-overview .pd-meta-row {
  margin-top: 24px;
  min-height: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.product-overview .product-subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--pd-slate-600);
}

.product-overview .description {
  margin: 0;
  max-width: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--pd-slate-600);
}

/* The assurance strip is its own module (the admin module list owns it) but it
   renders as the tail of the overview card, exactly like the reference. The
   selector shape mirrors store-product.css so this later file wins. */
.product-layout:not(.custom-module-order) > .product-main > .product-overview:has(+ [data-design-module="product_detail.trust"]) {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-layout:not(.custom-module-order) > .product-main > .product-overview + [data-design-module="product_detail.trust"] {
  margin-top: -20px;
  background: #fff;
  border: 1px solid var(--pd-slate-200);
  border-top: 0;
  border-radius: 0 0 32px 32px;
  padding: 0 32px 32px;
  box-shadow: none;
}

.pd-assurances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--pd-slate-100);
  padding-top: 20px;
  margin-top: 24px;
}

.pd-assurance {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 16px;
  background: var(--pd-slate-50);
  padding: 16px;
}

.pd-assurance-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: var(--pd-shadow-sm);
}

.pd-assurance-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pd-assurance-icon.tone-blue { background: var(--pd-blue-50); color: var(--pd-blue-600); }
.pd-assurance-icon.tone-green { background: var(--pd-green-50); color: var(--pd-green-600); }
.pd-assurance-icon.tone-violet { background: var(--pd-violet-50); color: var(--pd-violet-600); }

.pd-assurance-text { min-width: 0; }

.pd-assurance-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 900;
  color: var(--pd-slate-950);
}

.pd-assurance-note {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.63;
  color: var(--pd-slate-500);
}

/* ---------- purchase notes ---------- */
.product-main > .purchase-notes {
  background: #fff;
  border: 1px solid var(--pd-slate-200);
  /* r82：参考站最新版的标签页容器是 16px 圆角 + 28px 内边距。 */
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--pd-shadow-sm);
}

.purchase-notes > h2 {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pd-slate-950);
}

.purchase-note-list { margin-top: 12px; }

.purchase-notes .purchase-note {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--pd-slate-100);
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.purchase-notes .purchase-note:first-child { border-top: 0; padding-top: 0; }
.purchase-notes .purchase-note:last-child { padding-bottom: 0; }

.purchase-notes .note-index {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--pd-blue-50);
  color: var(--pd-blue-600);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.purchase-notes .note-index-icon svg { width: 14px; height: 14px; display: block; }
.purchase-notes .purchase-note-body { min-width: 0; }

.purchase-notes .purchase-note h3 {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pd-slate-950);
}

.purchase-notes .purchase-note .prose {
  margin-top: 6px;
  font-size: 13px;
  line-height: 20px;
  color: var(--pd-slate-600);
}

.purchase-notes .purchase-note .prose :is(p, li, ul, ol, dd) {
  font-size: 13px;
  line-height: 20px;
  color: var(--pd-slate-600);
}

.purchase-notes .purchase-note .prose :is(h1, h2, h3, h4) {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--pd-slate-600);
  margin-top: 6px;
}

.purchase-notes .product-period {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--pd-slate-600);
}

.purchase-notes .product-period b { font-weight: 600; color: var(--pd-slate-700); }

.purchase-notes .product-specifications {
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
  font-size: 13px;
  line-height: 20px;
}

.purchase-notes .product-specifications dt { font-weight: 600; color: var(--pd-slate-700); }
.purchase-notes .product-specifications dd { margin: 0; color: var(--pd-slate-600); }

.purchase-notes .purchase-help {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  line-height: 20px;
}

.purchase-notes .purchase-help a { color: var(--pd-blue-600); font-weight: 600; }

.purchase-notes > .notice {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--pd-slate-100);
  font-size: 12px;
  line-height: 18px;
  color: var(--pd-slate-500);
  background: none;
  border-radius: 0;
}

/* ---------- order panel ---------- */
.product-layout > .checkout {
  background: #fff;
  border: 1px solid var(--pd-slate-200);
  border-radius: 32px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgb(226 232 240 / 0.7), 0 8px 10px -6px rgb(226 232 240 / 0.7);
}

.checkout .checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.checkout .checkout-head .eyebrow {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  letter-spacing: 2.16px;
  text-transform: uppercase;
  color: var(--pd-blue-600);
}

.checkout .checkout-head h2 {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 900;
  color: var(--pd-slate-950);
}

.checkout .checkout-head-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--pd-blue-50);
  color: var(--pd-blue-600);
}

.checkout .checkout-head-icon svg { width: 24px; height: 24px; display: block; }

.checkout .checkout-product-summary {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--pd-slate-100);
  background: var(--pd-slate-50);
  border-radius: 24px;
  padding: 16px;
}

.checkout .checkout-summary-body { min-width: 0; }

.checkout .checkout-product-summary .selected-product {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 900;
  color: var(--pd-slate-950);
}

.checkout .checkout-product-summary p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--pd-slate-500);
}

.checkout .checkout-summary-price {
  flex: 0 0 auto;
  text-align: right;
  font-size: 18px;
  line-height: 28px;
  font-weight: 900;
  color: var(--pd-slate-950);
  white-space: nowrap;
}

.checkout .checkout-summary-price span {
  margin-left: 2px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 900;
  color: var(--pd-slate-400);
}

.checkout .checkout-divider {
  height: 1px;
  background: var(--pd-slate-100);
  margin: 20px 0;
}

.checkout #checkout-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* r90：参考站表单是 `mt-5 space-y-3`（上边距 20、行间距 12），本站缺了这 20px，
     购买方式区与表单之间贴在一起（实测参考站表单顶边距 20、本站 0）。 */
  margin: 20px 0 0;
  background: none;
  border: 0;
  padding: 0;
}

.checkout .checkout-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
}

.checkout .checkout-total > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 900;
  color: var(--pd-slate-950);
}

.checkout .checkout-total-value { text-align: right; }

.checkout #checkout-total {
  font-size: 36px;
  line-height: 40px;
  font-weight: 900;
  letter-spacing: -0.9px;
  color: var(--pd-blue-600);
}

.checkout .checkout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--pd-slate-200);
  background: #fff;
  border-radius: 16px;
  padding: 12px;
}

.checkout .checkout-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 900;
  color: var(--pd-slate-700);
}

.checkout .checkout-row .checkout-label { margin: 0; flex: 0 0 auto; white-space: nowrap; }
.checkout .checkout-label-row .checkout-label { margin: 0; }

.checkout .checkout-label-hint {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--pd-slate-500);
}

.checkout .checkout-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.checkout .checkout-block { min-width: 0; }

.checkout .quantity-control {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
}

.checkout .quantity-control button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pd-slate-200);
  border-radius: 12px;
  background: #fff;
  color: var(--pd-slate-600);
  cursor: pointer;
}

.checkout .quantity-control button svg { width: 16px; height: 16px; display: block; }
.checkout .quantity-control button:disabled { opacity: 0.45; cursor: not-allowed; }

.checkout .quantity-control input {
  width: 64px;
  height: 36px;
  border: 1px solid var(--pd-slate-200);
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 900;
  color: #0f172a;
  background: #fff;
  padding: 0;
}

.checkout .checkout-input-wrap { position: relative; }

.checkout .checkout-input-wrap > input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--pd-slate-200);
  border-radius: 16px;
  background: #fff;
  padding: 0 16px 0 48px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #0f172a;
}

.checkout .checkout-input-wrap > input:focus {
  outline: none;
  border-color: #2b7fff;
  box-shadow: 0 0 0 4px rgb(43 127 255 / 0.14);
}

.checkout .checkout-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: block;
  color: var(--pd-slate-400);
  pointer-events: none;
}

.checkout .checkout-input-icon svg { width: 20px; height: 20px; display: block; }

.checkout .password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--pd-slate-500);
  cursor: pointer;
}

.checkout .password-help {
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--pd-slate-500);
  cursor: pointer;
}

.checkout .password-help:hover { color: var(--pd-blue-700); }

.checkout .password-help-text {
  margin: 0;
  border: 1px solid var(--pd-blue-100);
  background: var(--pd-blue-50);
  border-radius: 14px;
  padding: 12px;
  font-size: 12px;
  line-height: 20px;
  color: #1d4ed8;
}

.checkout .password-help-text[hidden] { display: none; }

.checkout .password-help-text a {
  color: var(--pd-blue-700);
  font-weight: 700;
  text-decoration: underline;
}

.checkout .checkout-password-note {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--pd-blue-100);
  background: var(--pd-blue-50);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  color: var(--pd-blue-700);
  /* r90：参考站这条提示是 `flex min-h-12 ... sm:whitespace-nowrap`——640 以上单行、
     盒子 48px 高；本站少了 nowrap，同样的文案在 1440 下被折成两行、盒子变 58px。 */
  white-space: nowrap;
}

@media (max-width: 639px) {
  /* 与参考站的 sm 断点一致：手机端允许换行。 */
  .checkout .checkout-password-note { white-space: normal; }
}

.checkout .checkout-password-note a {
  color: var(--pd-blue-700);
  font-weight: 700;
  text-decoration: underline;
}

.checkout .check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  color: var(--pd-slate-500);
}

.checkout .check-label input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.checkout .check-label a {
  margin: 0 4px;
  font-weight: 700;
  color: var(--pd-blue-600);
  text-decoration: underline;
}

.checkout .button.pd-submit {
  width: 100%;
  /* r90：storefront.css 的通用 `.full{width:100%;margin-top:5px}` 会给这枚按钮加 5px，
     参考站标签到按钮的间距就是表单的 12px gap，实测本站 17px。这里清零。 */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 16px;
  background: var(--pd-blue-600);
  color: #fff;
  padding: 14px 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 900;
  box-shadow: 0 20px 25px -5px rgb(21 93 252 / 0.25);
  cursor: pointer;
}

.checkout .button.pd-submit svg { width: 20px; height: 20px; display: block; }
.checkout .button.pd-submit:hover:not(:disabled) { background: var(--pd-blue-700); }
.checkout .button.pd-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.checkout .checkout-result { margin: 0; }
.checkout .checkout-result:empty { display: none; }

/* ---------- stacked / phone layout ---------- */
@media (max-width: 1023px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .product-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .product-main { gap: 16px; }

  .product-main > .product-overview {
    padding: 16px;
    border-radius: 24px;
  }

  .product-overview .pd-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }

  #main .product-overview .product-icon {
    width: 64px;
    height: 64px;
    padding: 10px;
    border-radius: 16px;
    flex: 0 0 64px;
  }

  #main .product-overview .product-icon img,
  #main .product-overview img.product-vendor-logo {
    width: 44px;
    height: 44px;
  }

  .product-overview h1 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.6px;
  }

  .product-detail-tags {
    margin-top: 12px;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
  }

  .product-detail-tags .stock,
  .product-detail-tags .meta-chip {
    font-size: 12px;
    line-height: 16px;
    padding: 4px 10px;
  }

  .product-overview .product-price { margin-top: 16px; gap: 8px; }

  .product-overview .product-price strong {
    font-size: 30px;
    line-height: 36px;
  }

  .product-overview .product-price small {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 6px;
  }

  .product-overview .pd-meta-row { margin-top: 16px; gap: 8px; }

  .product-layout:not(.custom-module-order) > .product-main > .product-overview:has(+ [data-design-module="product_detail.trust"]) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .product-layout:not(.custom-module-order) > .product-main > .product-overview + [data-design-module="product_detail.trust"] {
    margin-top: -16px;
    border-radius: 0 0 24px 24px;
    padding: 0 16px 16px;
  }

  .pd-assurances {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
  }

  .pd-assurance { padding: 12px; }

  .pd-assurance-note {
    font-size: 12px;
    line-height: 1.63;
  }

  .product-main > .purchase-notes { padding: 16px; border-radius: 24px; }

  .purchase-notes .product-specifications { grid-template-columns: minmax(0, 1fr); }

  .product-layout > .checkout {
    padding: 20px;
    border-radius: 32px;
  }

  .checkout #checkout-total { font-size: 30px; line-height: 36px; }
}

/* ---------- r82 · 商品详情按参考站最新版重排 ----------
   参考站实测（1440x900）：左栏 858 / 右栏 390；头卡内 图标 80 圆角 16、
   标题 38/700、副标题 16/400、价格块 122x91 圆角 12 底色 #f3f7ff、
   服务说明三格 259x67 圆角 12、底部保证行 13/500 带 1px 上边框；
   内容标签行 800x53、面板正文 16/200%；订单面板逐行 340 宽。 */
/* r82：参考站最新版把「图标+标题+副标题」和「当前价格」放在同一行，
   价格框固定宽度贴右。true flex basis 让长中文标题自行换行而不是把价格挤到下一行。 */
/* r87：参考站头卡的纵向节奏（1440x900 实测）——返回按钮 133、标题 181(h57)、
   副标题 242、头卡结束 297、服务说明 317、三格 347-414、保证条 430-465、
   卡片底边 494。本地此前标题行高 48、头卡没有下内边距，这几块整体上移 29-39px。 */
/* r90：参考站这一行是 `mt-3 flex flex-col gap-4 border-b border-slate-100 pb-6
   sm:flex-row sm:items-start sm:justify-between sm:gap-6`——下内边距 24 + 1px 分隔线。
   本站此前用 31px 下内边距（无分隔线）来补价格盒偏矮的 6px；价格盒改回参考站
   的块级版式后高度回到 91，这里同步改回 24 + 分隔线。 */
.product-overview .pd-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: nowrap; padding-bottom: 12px; border-bottom: 1px solid var(--pd-slate-100); }
.product-overview .pd-identity { display: flex; align-items: center; gap: 16px; flex: 0 1 auto; min-width: 0; }
.product-overview .pd-identity-body { min-width: 0; }
.product-overview .product-icon { width: 80px; height: 80px; border-radius: 16px; background: var(--pd-slate-50); border: 1px solid var(--pd-slate-100); }
/* r90：参考站头卡副标题是 `mt-1 text-[15px] leading-6 text-slate-500`（15/400/24），
   本站此前 16px 且继承了 700 字重。 */
.product-overview .product-subtitle { margin: 4px 0 0; color: var(--pd-slate-500); font-size: 15px; font-weight: 400; line-height: 24px; }
.product-overview .product-detail-tags { margin-top: 10px; }
/* r87：可售商品不贴状态胶囊，卖点行也搬到「商品说明」页；标签行没有可见内容时
   连 10px 上边距一起收掉，头卡高度才能回到参考站实测值。 */
.product-overview .product-detail-tags:not(:has(.stock.empty)) { display: none; margin: 0; }
/* r87：参考站详情页的「返回套餐」是卡片内部第一行（x=113 y=133 82x32，
   13/600、圆角 12、px-1）。卡片顶边 y=104，返回按钮距离卡片上沿 29px。 */
.product-layout .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px;
  margin: 0 0 20px;
  border-radius: 6px;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
}
.product-layout .breadcrumb svg { display: block; width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 2; }
.product-main > .breadcrumb { margin:0;justify-self:start;max-width:100%; }
/* r90：参考站返回按钮是 `hover:text-[#155eef]`（只变字色、不加底色），
   本站此前 hover 加了一层 slate-100 底。 */
.product-layout .breadcrumb:hover { background: none; color: #000; }
/* r87：商品卡上的三条卖点原本挤在详情页头卡里，把卡片顶到比参考站高 48px。
   参考站头卡没有这一行，卖点出现在卡片和正文里；这里把同一份数据放进
   「商品说明」标签页顶部，信息不丢，头卡高度回到参考站实测值。 */
.product-highlights { display: grid; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.product-highlights li { display: flex; align-items: flex-start; gap: 8px; color: var(--pd-slate-600); font-size: .875rem; line-height: 1.6; }
.product-highlights svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; color: var(--product-accent, var(--pd-blue-600)); }
/* 参考站价格盒没有外边距；本站 `.product-price` 带 margin-bottom:12px，会把头卡撑高 12px。 */
.product-overview .pd-price-box { display: block; flex: 0 0 auto; margin: 0; min-width: 122px; padding: 12px 20px; border-radius: 12px; background: #f3f7ff; text-align: right; }
/* store-product.css 用 #main 前缀把标题钉在 2.25rem，这里用同样权重覆盖。 */
#main .product-overview h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.65px; color: #10224b; }
.product-overview .pd-price-label { margin: 0; color: var(--pd-slate-500); font-size: .75rem; font-weight: 500; line-height: 18px; }
/* r90：参考站价格块是 `rounded-xl bg-[#f3f7ff] px-4 py-3 sm:shrink-0 sm:px-5 sm:text-right`
   的块级盒子：上面 12/500 的「当前价格」，下面 30/700 的金额 + 14/500 slate-400 的单位；
   金额固定用 #155eef（不是装修强调色）。本站此前是 flex 横排（当前价格在金额左边）、
   单位 13px slate-500，盒子因此宽 188 高 72（参考站 122×91）。 */
.product-overview .pd-price-value { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; margin: 4px 0 0; color: #155eef; font-size: 1.875rem; font-weight: 700; line-height: 45px; }
.product-overview .pd-price-value strong { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.product-overview .pd-price-value small { padding-bottom: 0; color: var(--pd-slate-400); font-size: .875rem; font-weight: 500; line-height: 21px; }
/* r84：参考站 2026-10-01 详情页实测（1440x900）——服务说明区是 pt-5（20px），
   眉标 12/600/18 带 .08em 字距，三格事实卡 sm:grid-cols-3 栏间距 12、内边距
   12/14、底色 slate-50/80、图标 20px 蓝色 #2469f2，底部保证条是一条
   emerald-700 的 13/500 勾选行（图标 16、字间距 6、行间距 8、列间距 20）。
   本站此前是 auto-fit 220 宽、16px 栏间距、14/16 内边距、白底，保证条用的是
   商品强调色且没有图标。 */
.pd-facts { margin-top: 0; padding-top: 20px; border-top: 1px solid var(--pd-slate-100); }
.pd-facts-title { margin: 0 0 12px; color: var(--pd-slate-600); font-size: .75rem; font-weight: 600; line-height: 18px; letter-spacing: .08em; }
.pd-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--pd-slate-100); border-radius: 12px; overflow: hidden; background: var(--pd-slate-100); }
.pd-fact-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.pd-fact-grid:has(> :nth-child(2):last-child),.pd-fact-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-fact-grid-compact { display: none; margin-top: 12px; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--pd-slate-100); border-radius: 12px; }
.pd-fact-compact { display: grid; grid-template-columns: 16px minmax(0, .8fr) minmax(0, 1.7fr); align-items: start; gap: 8px; min-width: 0; padding: 10px 12px; color: #2469f2; }
.pd-fact-compact + .pd-fact-compact { border-top: 1px solid var(--pd-slate-100); }
.pd-fact-compact p { min-width: 0; margin: 0; font-size: 13px; font-weight: 600; line-height: 19.5px; color: var(--pd-slate-700); white-space: normal; overflow-wrap: anywhere; }
.pd-fact-compact-label { min-width: 0; color: var(--pd-slate-500); font-size: 12px; line-height: 19.5px; overflow-wrap: anywhere; }
.pd-fact-compact .pd-fact-icon { width: 16px; height: 16px; }
.pd-fact-compact .pd-fact-icon svg { width: 16px; height: 16px; }
.pd-fact { display: flex; align-items: center; min-width: 0; gap: 12px; padding: 12px 14px; border: 0; border-radius: 0; background: #fff; }
.pd-fact > div { min-width: 0; overflow-wrap: anywhere; }
/* r90：参考站服务说明格的图标槽是 20×20（<span class="text-[#2469f2]"><svg class="h-5 w-5">），
   本站此前是 24×24 的 grid 槽，白占 4px，把右侧标签整体推右 4px（实测参考站 x=160、
   本站 x=164）。槽宽改成 20 与参考站一致，图标本身仍是 20px。 */
.pd-fact-icon { display: block; flex-shrink: 0; width: 20px; height: 20px; color: #2469f2; }
.pd-fact-icon svg { width: 20px; height: 20px; }
.pd-fact-label { margin: 0; color: var(--pd-slate-500); font-size: .75rem; line-height: 18px; }
.pd-fact-value { margin: 2px 0 0; color: var(--pd-slate-700); font-size: .875rem; font-weight: 600; line-height: 21px; }
.pd-guarantees { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pd-slate-100); color: #047857; font-size: .75rem; font-weight: 500; line-height: 18px; }
.pd-guarantees span { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; background: rgb(236 253 245 / .7); }
.pd-guarantees svg { width: 16px; height: 16px; flex: 0 0 16px; }
.product-tabs .product-tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--pd-slate-100); }
/* r90：参考站商品详情标签的行高是 20px（`leading-5`，实测标签高 52），本站 21px 会高 1px。 */
.product-tab { position: relative; padding: 16px 20px; border: 0; background: transparent; color: var(--pd-slate-500); font-size: .9375rem; line-height: 20px; font-weight: 500; cursor: pointer; }
.product-tab:hover { color: var(--pd-slate-700); }
.product-tab.is-active { background: transparent; color: #155eef; font-weight: 600; box-shadow: none; }
.product-tab.is-active::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: #155eef; }
.product-tabs .product-tab-panels { padding-top: 24px; }
.product-tab-panel[hidden] { display: none; }
.product-tab-panel .prose { white-space: pre-wrap; color: var(--pd-slate-600); font-size: 1rem; line-height: 2; }
.product-summary-copy { display: grid; gap: 22px; }
.product-summary-copy > .prose { margin: 0; }
.product-summary-section { display: grid; gap: 8px; }
.product-summary-section h2 { margin: 0; color: var(--pd-slate-800); font-size: 1.125rem; line-height: 1.6; font-weight: 700; letter-spacing: -.01em; }
.product-summary-section .prose { margin: 0; }
.product-summary-copy { gap: 20px; }
.product-summary-copy .product-summary-section h2 { font-size: 1rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -.025em; }
.product-summary-copy .prose { white-space: normal; color: var(--pd-slate-600); font-size: .875rem; line-height: 1.5rem; }
.product-summary-copy .prose p { margin: 0 0 10px; }
.product-summary-copy .prose p:last-child { margin-bottom: 0; }
.product-tab-facts { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pd-slate-100); }
.product-flow { display: grid; gap: 18px; margin: 0; padding-left: 22px; color: var(--pd-slate-600); font-size: .9375rem; line-height: 1.9; }
.product-flow b { display: block; color: var(--pd-slate-700); font-weight: 600; }
.product-flow-details { display: grid; gap: 20px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--pd-slate-100); }
.product-flow-detail { display: grid; gap: 6px; }
.product-flow-detail h3 { margin: 0; color: var(--pd-slate-800); font-size: 1.0625rem; line-height: 1.6; font-weight: 700; }
.product-flow-detail .prose { margin: 0; }
.product-faq { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--pd-slate-100); }
.product-faq:last-child { border-bottom: 0; }

.product-flow-card {
  overflow: hidden;
  border: 1px solid #dbe5f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 44, 85, .03);
}
.product-flow-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #e5ebf3;
  background: #fbfdff;
}
.product-flow-header-icon {
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #2469f2;
  background: #edf4ff;
}
.product-flow-header-icon svg { width: 18px; height: 18px; }
.product-flow-header h3 {
  margin: 0;
  color: var(--pd-slate-800);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}
.product-flow-header p {
  margin: 2px 0 0;
  color: var(--pd-slate-500);
  font-size: 13px;
  line-height: 20px;
}
.product-flow-card > .product-flow {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 18px 20px 18px 58px;
  list-style: none;
  color: var(--pd-slate-600);
  font-size: 14px;
  line-height: 22px;
}
.product-flow-card > .product-flow::before {
  content: '';
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: 32px;
  width: 1px;
  background: #dbe8ff;
}
.product-flow-card > .product-flow li {
  position: relative;
  min-height: 42px;
  padding: 8px 0 8px;
}
.product-flow-card > .product-flow li::before {
  content: counter(list-item);
  position: absolute;
  left: -39px;
  top: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #cfe0ff;
  border-radius: 50%;
  color: #2469f2;
  background: #f5f9ff;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
}
.product-flow-card > .product-flow li > span { display: block; }
.product-flow-card > .prose { margin: 0; padding: 18px 20px; }
.product-flow-details {
  margin: 0 20px 18px;
  border-top: 1px solid #e5ebf3;
}
.product-flow-details summary {
  cursor: pointer;
  padding: 12px 0;
  color: #2469f2;
  font-size: 13px;
  font-weight: 600;
}
.product-flow-detail-list { display: grid; gap: 14px; padding: 0 0 14px; }
.product-flow-detail { display: grid; gap: 6px; }
.product-flow-detail h3 { margin: 0; color: var(--pd-slate-800); font-size: 14px; line-height: 21px; }
.product-flow-detail .prose { margin: 0; }

@media (max-width: 640px) {
  .product-flow-header { padding: 14px 14px 12px; }
  .product-flow-card > .product-flow { padding: 14px 14px 14px 48px; font-size: 13px; line-height: 21px; }
  .product-flow-card > .product-flow::before { left: 26px; top: 31px; bottom: 31px; }
  .product-flow-card > .product-flow li::before { left: -35px; width: 26px; height: 26px; }
  .product-flow-details { margin: 0 14px 14px; }
}
.product-faq h3 { margin: 0; color: var(--pd-slate-700); font-size: 1rem; font-weight: 600; }
/* r90：参考站订单面板「购买方式」区实测（/shop/chatgpt-plus，2026-10-01，1440×900）：
   外层是 `mt-4 border-t border-slate-100 pt-4` —— 只有一条顶部分隔线 + 16px 上边距，
   不是带四周描边的卡片；问题行 `flex items-center justify-between gap-3` 占满 340px；
   档位是灰色轨道里的胶囊：`mt-2 grid grid-cols-2 gap-2 rounded-xl bg-slate-50 p-1.5`
   （轨道 340×72、内边距 6、圆角 12、gap 8 → 每枚 160×60），
   选中那枚白底 + 蓝字 #155eef + ring-1 ring-blue-200 + shadow-sm，另一枚透明底、
   slate-500 字色、hover 半透明白；按钮内含 16px 图标（代充 wallet-cards、
   会员账号 user-round）+ 两行文字（13/600 主标题、11/400 slate-400 副标题）+ 右侧 14/700 价格。
   本站此前把整块包成 14px 内边距的描边盒子，内容被挤到 310px 宽（参考站 340），
   选中态也只剩一圈描边。 */
.checkout .checkout-options { margin-top: 16px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--pd-slate-100); border-radius: 0; background: none; }
.checkout-options-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 0; }
.checkout-options-head p { margin: 0; color: var(--pd-slate-700); font-size: .875rem; font-weight: 600; line-height: 21px; }
.checkout-options-head span { color: var(--pd-slate-500); font-size: .75rem; white-space: nowrap; }
.checkout-options-head b { color: var(--pd-slate-700); font-weight: 700; }
.checkout-option-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; padding: 6px; border-radius: 12px; background: var(--pd-slate-50); }
.checkout-option { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; min-height: 60px; padding: 12px; border: 0; border-radius: 8px; background: transparent; color: var(--pd-slate-500); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.checkout-option:hover { background: rgb(255 255 255 / .7); }
.checkout-option-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.checkout-option-icon { display: flex; flex: none; width: 16px; height: 16px; }
.checkout-option-icon svg { display: block; }
.checkout-option-text { display: grid; min-width: 0; }
.checkout-option-text b { font-size: .8125rem; font-weight: 600; line-height: 19.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-option-text small { color: var(--pd-slate-400); font-size: .6875rem; font-weight: 400; line-height: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-option-price { flex: none; color: inherit; font-size: .875rem; font-weight: 700; line-height: 21px; }
.checkout-option.is-active { background: #fff; color: #155eef; box-shadow: 0 0 0 1px var(--pd-blue-200), 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); }
.checkout-served { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--pd-slate-100); border-radius: 12px; background: var(--pd-slate-50); }
.checkout-served p { margin: 0; color: var(--pd-slate-500); font-size: .8125rem; line-height: 20px; }
.checkout-served b { color: var(--pd-slate-700); font-weight: 600; }
.checkout-total-inline { margin-left: auto; color: var(--pd-blue-600); font-size: .875rem; line-height: 21px; font-weight: 700; white-space: nowrap; }
.checkout-total-inline strong { color: var(--pd-blue-600); font-size: .875rem; font-weight: 700; }
/* 参考站数量行是「购买数量 / 步进器 / 合计 ¥155」一行 62px 高。本站的行内合计复用了
   同一个 #checkout-total 节点，而 `.checkout #checkout-total{font-size:36px}` 带 ID
   选择器、优先级高于类名组合，会把行内合计放大、把「购买数量」标签挤成 23px 宽竖排，
   整行从 62px 撑到 106px。这里用更高优先级把行内合计锁回 14/21。 */
.checkout .checkout-total-inline #checkout-total { font-size: .875rem; line-height: 21px; letter-spacing: normal; font-weight: 700; color: var(--pd-blue-600); }
@media (max-width: 800px) {
  /* 手机端头卡必须换行：参考站的价格块在图标+标题下方独占一行，而 .pd-top 的
     nowrap 会把标题挤成 0 宽（r82e 移动端实测 h1 宽度 0，商品名整块不可见）。 */
  .product-overview .pd-top { gap: 16px; flex-wrap: wrap; }
  .product-overview .pd-identity { flex: 1 1 100%; }
  .product-overview .pd-identity-body { flex: 1 1 auto; }
  .product-overview .pd-price-box { width: 100%; }
  .product-tabs .product-tab-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px; border: 0; border-radius: 12px; background: var(--pd-slate-50); }
  .product-tab { border-radius: 8px; padding: 10px; }
  .product-tab.is-active { box-shadow: none; }
}
/* ---------------------------------------------------------------------------
   r82c · 商品详情头卡与参考站对齐

   参考站详情页头卡只有：返回按钮 / 图标 / 标题 / 副标题 / 价格块 /
   三格服务说明 / 底部保证条。可售商品不贴「可下单」这类状态胶囊，
   只有不可售时才需要如实标注，因此这里把可售状态胶囊隐藏起来
   （不可售的 .stock.empty 继续显示）。
   --------------------------------------------------------------------------- */
.product-overview .product-detail-tags .stock:not(.empty){display:none}
.product-overview .product-detail-tags:empty{display:none;margin:0}

/* ---------------------------------------------------------------------------
   r90 · 商品详情页手机端（<640，对齐参考站 sm 断点）

   参考站 /shop/chatgpt-plus 2026-10-01 在 390×844 实测：
   - 页面容器左右 0、顶部 80px（固定导航高度），头卡整宽 390；
   - 头卡只有上下 1px 描边、无圆角、内边距 20（桌面是圆角卡片 + 28 内边距）；
   - 图标 56×56（圆角 16、内含 36×36 logo）；标题 24/36、字距 -0.84（桌面 38/57）；
   - 价格块独占一行、内边距 12×16、金额 28/42（桌面 30/45）；
   - 服务说明换成「三格简版」：3 列等宽、gap 8、单元格 12×10 圆角 12 底色 slate-50，
     内含 16px 蓝色图标 + 13/600 slate-700 的值（桌面版三格在 640 以下隐藏）；
   - 保证条保留。
   本站此前手机端：容器左右各 16px、顶部 0（头卡被固定导航压住，返回链接和标题
   藏在导航下面）、图标 64（logo 44）、标题 24/32、价格块 12×20、服务说明只剩标题。
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .product-summary-copy .product-summary-section h2 { font-size: .875rem; line-height: 1.3125rem; }
  .product-summary-copy .prose { font-size: .8125rem; line-height: 1.5rem; }
  .product-tab.is-active { background: #eff6ff; }
  .product-tab.is-active::after { display: none; }
  #main > .container:has(> .product-layout) { width: 100%; max-width: none; padding: 80px 0 0; }
  .product-main > .product-overview { border-radius: 0; border: 0; border-top: 1px solid var(--pd-slate-200); border-bottom: 1px solid var(--pd-slate-200); box-shadow: none; padding: 16px; }
  .product-main > .purchase-notes { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; padding: 20px; }
  .product-tabs .product-tab-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 1px; border: 1px solid var(--pd-slate-200); border-radius: 12px; background: var(--pd-slate-200); }
  .product-tab { min-width: 0; padding: 10px 4px; border-radius: 0; font-size: 13px; line-height: 20px; }
  .product-tabs .product-tab-panels { min-height: 160px; padding: 20px 0; }
  .product-summary-copy .product-summary-section h2 { font-size: 14px; line-height: 21px; }
  .product-summary-copy .prose { font-size: 13px; line-height: 24px; }
  .product-layout > .checkout,
  .product-main > .checkout { padding: 16px; border-radius: 0; border-left: 0; border-right: 0; border-top: 1px solid var(--pd-slate-200); border-bottom: 1px solid var(--pd-slate-200); box-shadow: none; }
  #main .product-overview h1 { font-size: 21px; line-height: 28px; letter-spacing: -.525px; }
  #main .product-overview .product-icon { width: 48px; height: 48px; padding: 8px; border-radius: 12px; flex: 0 0 48px; }
  #main .product-overview .product-icon img,
  #main .product-overview img.product-vendor-logo { width: 32px; height: 32px; }
  .product-overview .product-icon svg { width: 32px; height: 32px; }
  .product-overview .pd-top { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 12px; }
  .product-overview > .breadcrumb { margin-bottom: 10px; }
  .product-overview .pd-identity { align-items: center; gap: 12px; }
  .product-overview .pd-price-box { display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;text-align:left; }
  .product-overview .pd-price-value { justify-content:flex-end;margin:0;font-size:22px;line-height:30px; }
  .pd-fact-grid-desktop { display: none; }
  .pd-fact-grid-compact { display: grid; }
}

/* ---------------------------------------------------------------------------
   r174 · 商品详情页逐值对齐（2026-10-08 参考站 1440×900 实测）

   参考站实测（computed style，桌面）：
   - 商品标题 26/32 600、字距 -0.65px、#10224b；
   - 副标题 14/20 400 slate-500、上外边距 2px（手机 13/20）；
   - 「当前价格」12/18 400 slate-500；金额 27/32 600、字距 -0.675px、#155eef，
     单位 12/32 400 slate-400、左外边距 4px；桌面价格块无底色无内边距（手机
     rounded-xl + bg-blue-50 + px-3.5 py-2，flex 两端对齐）；
   - 服务说明单元格：内边距 14px、图标 16px #2469f2、名称 11/16 400 slate-500、
     值 13/20 600 slate-800 且上外边距 2px；整块 border-top + padding-top 16px；
   - 信任标签条：padding-top 16px、色值 emerald-700、图标 14px。
   仅表现层调整，未改任何文案、价格、表单字段或下单逻辑。
   --------------------------------------------------------------------------- */

#main .product-overview h1 { font-weight: 600; }

#main .product-overview .product-icon {
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
}

#main .product-overview .product-icon img,
#main .product-overview img.product-vendor-logo { margin: 0 auto; }

.product-overview .product-subtitle {
  margin: 2px 0 0;
  color: var(--pd-slate-500);
  font-size: 14px;
  line-height: 20px;
}

.product-overview .pd-price-box {
  min-width: 0;
  padding: 0;
  background: transparent;
  text-align: right;
}

.product-overview .pd-price-label { font-weight: 400; }

.product-overview .pd-price-value {
  margin: 0;
  gap: 0;
  font-size: 27px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -.675px;
}

.product-overview .pd-price-value small {
  margin-left: 4px;
  padding-bottom: 0;
  color: var(--pd-slate-400);
  font-size: 12px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: normal;
}

.pd-guarantees {
  margin-top: 0;
  padding-top: 16px;
  color: var(--pd-emerald-700);
}

.product-overview .pd-guarantees {
  margin-bottom: 16px;
  border-top: 0;
}

.pd-guarantees svg { width: 14px; height: 14px; flex: 0 0 14px; }

.pd-guarantees:empty { display: none; }

.pd-social-proof { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--pd-slate-500); font-size: .8125rem; line-height: 20px; font-weight: 500; }

.product-overview .pd-social-proof { margin-top: 10px; }

.pd-facts { padding-top: 16px; }

.product-panel-heading {
  margin: 0 0 20px;
  color: var(--pd-slate-950);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -.7px;
}

.product-panel-heading:empty { display: none; }

.pd-facts-title {
  margin: 0 0 10px;
  color: var(--pd-slate-600);
  letter-spacing: normal;
}

.pd-fact {
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
}

.pd-fact-icon,
.pd-fact-icon svg { width: 16px; height: 16px; }

.pd-fact-label {
  color: var(--pd-slate-500);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: normal;
}

.pd-fact-value {
  margin-top: 2px;
  color: var(--pd-slate-800);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
}

@media (max-width: 639px) {
  .product-panel-heading {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -.55px;
  }

  #main .product-overview h1 {
    font-size: 21px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -.525px;
  }

  .product-overview .product-subtitle { font-size: 13px; line-height: 20px; }

  .product-overview .pd-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--pd-blue-50);
    text-align: left;
  }

  .product-overview .pd-price-value {
    justify-content: flex-end;
    margin: 0;
    font-size: 23px;
    line-height: 1;
    letter-spacing: -.575px;
  }

  .product-overview .pd-price-value small {
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
  }

  .pd-fact-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
  }

  .pd-fact-compact .pd-fact-icon,
  .pd-fact-compact .pd-fact-icon svg { width: 16px; height: 16px; flex: 0 0 16px; }

  .pd-fact-compact-label {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
  }

  .pd-fact-compact p {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .pd-guarantees {
    gap: 6px;
    padding-top: 10px;
    font-size: 11px;
    line-height: 16.5px;
  }

  .product-overview .pd-guarantees { margin-bottom: 12px; }

  .pd-guarantees span { padding: 6px; }

  .pd-facts { padding-top: 12px; }

  .pd-fact-grid-compact { margin-top: 8px; }
}
@media(max-width:1023px){.pd-hide-mobile{display:none!important}}
@media(min-width:1024px){.pd-hide-desktop{display:none!important}}