/* Detail pages only. Loaded after each page's inline desktop styles. */
@media (min-width: 1201px) and (max-width: 1919px) {
  .detail-page { width: 100%; min-width: 0; zoom: 1 !important; }
  .detail-page .dp-container {
    width: 100% !important;
    max-width: 1380px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }
  .detail-page .dp-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

@media (max-width: 1200px) {
  .detail-page {
    width: 100%;
    min-width: 0;
    padding-top: 28px !important;
    zoom: 1 !important;
  }

  .detail-page .dp-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    transform: none !important;
  }

  .detail-page > .dp-container { padding-bottom: 36px; }
  .detail-page > section { padding: 48px 0 !important; }
  .detail-page > section:first-child { padding-top: 8px !important; }
  .detail-page > section[style*="margin-top:60px"] { margin-top: 28px !important; }

  .detail-page .dp-container :where(div, article, aside, section, p, h1, h2, h3, a) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .detail-page .dp-body {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
  }

  .detail-page .dp-left { padding: 28px; }
  .detail-page .dp-right { position: static; top: auto; }
  .detail-page .dp-card { padding: 22px; }
  .detail-page .dp-meta { flex-wrap: wrap; gap: 8px 16px; }
  .detail-page .dp-breadcrumb { line-height: 1.8; }

  /* Grids with a gap are layout/card grids. Comparison rows have no gap. */
  .detail-page .dp-container [style*="grid-template-columns"][style*="gap:"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  .detail-page .dp-container [style*="display:flex"][style*="gap:"] {
    gap: 16px !important;
  }

  .detail-page .dp-container [style*="display:flex"][style*="justify-content:center"]:has(> a),
  .detail-page .dp-btn-row {
    flex-wrap: wrap;
  }

  .detail-page .dp-container a[style*="padding:"],
  .detail-page .dp-btn {
    min-height: 44px;
    max-width: 100%;
    padding: 12px 22px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }

  .detail-page .dp-container img {
    max-width: 100%;
    height: auto !important;
  }

  .detail-page .dp-container img[style*="width:100%"] {
    display: block;
    width: 100% !important;
    object-fit: contain !important;
  }

  /* Remove fixed photo/chart boxes so every original image stays visible. */
  .detail-page .dp-container div:has(> img[style*="width:100%"]),
  .detail-page .pain-card .pain-img {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .detail-page .dp-container [style*="width:50%"] { width: 100% !important; }
  .detail-page .dp-container div[style*="width:260px"],
  .detail-page .dp-container div[style*="width:240px"] {
    width: min(100%, 260px) !important;
    height: auto !important;
    aspect-ratio: 1;
  }
  .detail-page .pain-card { flex-direction: column; }
  .detail-page .pain-card .pain-img { width: 100%; }
  .detail-page .pain-card .pain-body { padding: 24px; }
  .detail-page .pain-title { flex-wrap: wrap; gap: 4px; }
  .detail-page .qa-col-inner { gap: 24px; }

  /* Existing native-table and grid-table wrappers scroll locally, not the page. */
  .detail-page .detail-table-scroll,
  .detail-page .dp-container div:has(> table),
  .detail-page .dp-container div:has(> div[style*="grid-template-columns"][style*="background:"]:not([style*="gap:"])) {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .detail-page .dp-container table {
    width: 100% !important;
    min-width: 760px;
  }

  .detail-page .dp-container div:has(> div[style*="grid-template-columns"][style*="background:"]:not([style*="gap:"])) > div[style*="grid-template-columns"] {
    min-width: 640px;
  }

  .detail-page .dp-container [style*="grid-template-columns:1.4fr 1fr 1fr 1fr"],
  .detail-page .dp-container [style*="grid-template-columns:100px 1fr 1fr 1fr"] {
    min-width: 760px !important;
  }

  .detail-page .dp-container :is(th, td) { overflow-wrap: anywhere; }
}

@media (max-width: 960px) {
  .detail-page .dp-body { grid-template-columns: minmax(0, 1fr); }
  .detail-page .dp-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .detail-page .dp-right > .dp-card:last-child { grid-column: 1 / -1; }

  /* Two-column articles and fixed-width product sidebars become stacked. */
  .detail-page .dp-container [style*="grid-template-columns:1fr 1fr;"][style*="gap:"],
  .detail-page .dp-container [style*="grid-template-columns:1.3fr 1fr;"][style*="gap:"],
  .detail-page .dp-container [style*="grid-template-columns:1fr 1.1fr;"][style*="gap:"],
  .detail-page .dp-container [style*="grid-template-columns:1.4fr 1fr;"][style*="gap:"],
  .detail-page .dp-container [style*="grid-template-columns:1.15fr 1fr;"][style*="gap:"],
  .detail-page .dp-container [style*="grid-template-columns:380px 1fr"],
  .detail-page .dp-container [style*="grid-template-columns:340px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The 2x2 product gallery still uses two columns on tablets. */
  .detail-page .dp-container [style*="grid-template-rows:1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .detail-page { padding-top: 22px !important; }
  .detail-page .dp-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .detail-page > .dp-container { padding-bottom: 28px; }
  .detail-page > section { padding: 34px 0 !important; }
  .detail-page > section:first-child { padding-top: 4px !important; }
  .detail-page > section[style*="margin-top:60px"] { margin-top: 20px !important; }

  .detail-page .dp-container h1 {
    font-size: clamp(24px, 6.4vw, 29px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin-bottom: 24px !important;
  }
  .detail-page .dp-container h2 {
    font-size: clamp(21px, 5.5vw, 25px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    margin-bottom: 24px !important;
  }
  .detail-page .dp-container h3 { font-size: 18px !important; line-height: 1.6; }
  .detail-page .dp-article-title { font-size: 21px !important; }
  .detail-page .dp-title { margin-bottom: 24px; }
  .detail-page .dp-breadcrumb { font-size: 12px; margin-bottom: 14px; }
  .detail-page .dp-meta { font-size: 12px; gap: 7px 12px; }
  .detail-page .dp-left, .detail-page .dp-card { padding: 20px 18px; }
  .detail-page .dp-content p { font-size: 15px; line-height: 1.95; text-align: start; }
  .detail-page .dp-content .dp-highlight,
  .detail-page .dp-highlight,
  .detail-page .qa-callout { padding: 16px; font-size: 14px; line-height: 1.9; }
  .detail-page .qa-q { font-size: 16px; line-height: 1.65; }
  .detail-page .qa-a { font-size: 14px; line-height: 1.95; }

  .detail-page .dp-body,
  .detail-page .dp-right,
  .detail-page .dp-container [style*="grid-template-columns"][style*="gap:"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  .detail-page .dp-right > .dp-card:last-child { grid-column: auto; }
  .detail-page .dp-container [style*="grid-template-rows:"] { grid-template-rows: auto !important; }
  .detail-page .dp-container [style*="grid-row:"] { grid-row: auto !important; }

  .detail-page .dp-container [style*="display:flex"][style*="gap:"] > div { min-width: 0; }
  .detail-page .dp-container [style*="display:flex"][style*="justify-content:center"]:has(> a),
  .detail-page .dp-btn-row { flex-direction: column; gap: 12px !important; align-items: stretch; }
  .detail-page .dp-container [style*="justify-content:center"] > a[style*="padding:"],
  .detail-page .dp-btn { width: 100%; flex: initial; font-size: 14px !important; }
  .detail-page .dp-container [style*="justify-content:center"] > span[style*="width:1px"] { display: none; }

  .detail-page .pain-card .pain-body { padding: 20px 18px; }
  .detail-page .pain-card .pain-title { font-size: 18px; line-height: 1.6; }
  .detail-page .pain-card .pain-num { font-size: 28px; }

  /* Generous desktop cards should not consume most of a phone's text width. */
  .detail-page .dp-container div[style*="border-radius"][style*="padding:"]:not([style*="width:"]):not([style*="grid-template-columns"]) {
    padding: 20px 18px !important;
  }
  .detail-page .dp-container div[style*="display:flex"][style*="padding:"][style*="gap:"] {
    flex-wrap: wrap;
    gap: 12px !important;
  }
  .detail-page .dp-container [style*="flex:1"] { flex-basis: 160px; }

  .detail-page .detail-table-scroll::before,
  .detail-page .dp-container div:has(> table)::before,
  .detail-page .dp-container div:has(> div[style*="grid-template-columns"][style*="background:"]:not([style*="gap:"]))::before {
    content: "左右滑动查看完整表格 →";
    display: block;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: inherit;
    border-bottom: 1px solid currentColor;
    opacity: 0.75;
  }
}