/* SP-VISUAL-COHORT-TEN: exact request paths gated in enqueue.php */
/* SP-MOBILE-353-BEGIN: one-page mobile repair; desktop unchanged. */
@media (max-width: 768px) {
  body.sp-product-context .breadcrumb-inner,
  body.sp-product-context .hero-inner,
  body.sp-product-context .spr-quote-form {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100%;
    min-width: 0;
  }
  body.sp-product-context .page-hero { padding: 32px 0 !important; }
  body.sp-product-context .hero-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body.sp-product-context .hero-inner > * { min-width: 0; }
  body.sp-product-context .hero-content h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
  }
  body.sp-product-context .spr-content-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 1.65;
  }
  body.sp-product-context .spr-content-container :is(div, figure, picture) {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  body.sp-product-context .spr-content-container img {
    max-width: 100% !important;
    height: auto !important;
  }
  body.sp-product-context .spr-content-container table {
    display: block;
    width: 100% !important;
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body.sp-product-context .spr-content-container :is(th, td) {
    padding: 8px;
    font-size: 14px;
    line-height: 1.5;
  }
  body.sp-product-context .spr-content-container :is(h2, h3) {
    margin: 24px 0 12px !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
  }
  body.sp-product-context .spr-content-container p { margin: 0 0 14px !important; }
  body.sp-product-context .spr-content-container :is(ul, ol) {
    padding-left: 22px !important;
    margin: 12px 0 18px !important;
  }
}
/* SP-MOBILE-353-END */

/* SP-BODY-353-BEGIN: scoped legacy content visual layer, desktop and mobile. */
body.sp-product-context .sp-pdp-tabs__panel {
  min-width: 0;
  color: #334155;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
body.sp-product-context .spr-content-container .J_module {
  font-size: 16px !important;
  line-height: 1.75 !important;
  margin: 0 0 24px !important;
}
body.sp-product-context .spr-content-container :is(.detail-decorate-json-renderer-container, .magic-6) {
  font-family: inherit !important;
  white-space: normal !important;
}
body.sp-product-context .spr-content-container .magic-0 {
  font-family: inherit !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  padding: 0 0 16px !important;
  border-bottom-color: #e2e8f0 !important;
}
body.sp-product-context .sp-pdp-tabs__panel :is(h2, h3) {
  color: #172638;
  font-weight: 700;
  font-size: 24px !important;
  line-height: 1.35 !important;
  margin: 32px 0 16px !important;
}
body.sp-product-context .sp-pdp-tabs__panel > h3:first-child { margin-top: 0 !important; }
body.sp-product-context .sp-pdp-tabs__panel p { margin: 0 0 18px !important; }
body.sp-product-context .sp-pdp-tabs__panel :is(ul, ol) {
  padding-left: 24px !important;
  margin: 16px 0 28px !important;
}
body.sp-product-context .sp-pdp-tabs__panel li { margin: 0 0 10px; }
/* Only truly empty imported text nodes; never hide media or business controls. */
body.sp-product-context .spr-content-container :is(h2, h3, p):empty { display: none; }
body.sp-product-context .spr-content-container [data-sp-empty-text="true"] { display: none !important; }
body.sp-product-context .spr-content-container :is(div, figure, picture) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
body.sp-product-context .spr-content-container .icbu-pc-images {
  margin: 28px auto !important;
}
body.sp-product-context .spr-content-container .icbu-pc-images div {
  height: auto !important;
}
body.sp-product-context .spr-content-container img {
  max-width: 100% !important;
  height: auto !important;
}
body.sp-product-context .sp-pdp-tabs__panel table {
  display: table;
  max-width: 100%;
}
/* Scrolling belongs to the wrapper, not a display:block table with a narrow anonymous grid. */
body.sp-product-context .sp-table-scroll, body.sp-blog-context .sp-table-scroll {
  width: 100%; min-width: 0; max-width: 100%; overflow-x: auto;
  margin: 24px 0 32px; -webkit-overflow-scrolling: touch;
}
body.sp-product-context .sp-table-scroll > table, body.sp-blog-context .sp-table-scroll > table {
  display: table !important; width: 100% !important; margin: 0 !important;
}
body.sp-product-context .spr-content-container table.magic-11 :is(td, th) {
  border: 1px solid #e2e8f0 !important;
  height: auto !important; overflow-wrap: normal; word-break: normal;
}
body.sp-product-context .spr-content-container table.magic-11 td > div {
  width: auto !important; height: auto !important; padding: 0 !important;
}
body.sp-product-context .spr-content-container table.magic-11 tr:not(:first-child) td[colspan="1"]:nth-child(-n+2) > div {
  white-space: nowrap;
}
body.sp-product-context .sp-pdp-tabs__panel :is(th, td) { vertical-align: top; }
/* Existing calculator markup: visual layout only, no handler/data changes. */
body.sp-product-context .sp-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}
body.sp-product-context :is(.sp-calc-inputs-panel, .sp-calc-results-panel) {
  min-width: 0;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
body.sp-product-context .sp-calc-group { margin-bottom: 20px; }
body.sp-product-context .sp-calc-group label { display: block; font-weight: 600; margin-bottom: 8px; }
body.sp-product-context .sp-calc-group :is(input, select) {
  width: 100%; min-width: 0; padding: 12px; border: 1px solid #94a3b8;
  border-radius: 6px; background: white; color: #172638; font: inherit;
}
body.sp-product-context .sp-calc-group small { display: block; margin-top: 6px; color: #475569; }
body.sp-product-context :is(.sp-calc-btn, .sp-calc-apply-btn) {
  padding: 12px 20px; border: 0; border-radius: 6px; background: #1c4f7c;
  color: white; font: inherit; font-weight: 600; cursor: pointer;
}
body.sp-product-context .sp-calc-group :is(input, select):focus-visible,
body.sp-product-context :is(.sp-calc-btn, .sp-calc-apply-btn):focus-visible {
  outline: 2px solid #1c4f7c; outline-offset: 3px;
}
body.sp-product-context .sp-calc-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
body.sp-product-context .sp-calc-metric-card :is(.label, .value) { display: block; }
body.sp-product-context .sp-calc-drawing-container svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  body.sp-product-context .sp-table-scroll > table.sp-wide-table, body.sp-blog-context .sp-table-scroll > table.sp-wide-table { min-width: 780px; }
  body.sp-product-context .sp-pdp-tabs__panel :is(h2, h3),
  body.sp-product-context .spr-content-container .magic-0 { font-size: 21px !important; }
  body.sp-product-context .sp-calc-layout { grid-template-columns: minmax(0, 1fr); }
  body.sp-product-context :is(.sp-calc-inputs-panel, .sp-calc-results-panel) { padding: 16px; }
  body.sp-product-context .sp-pdp-tabs__panel :is(th, td) {
    min-width: 110px; overflow-wrap: normal; word-break: normal;
    font-size: 14px; padding: 10px !important;
  }
}
/* Tablet: retain the existing 768px JS/CSS menu boundary; fit the desktop row. */
@media (min-width: 769px) and (max-width: 1024px) {
  body.sp-product-context .sp-header__inner { gap: 12px; }
  body.sp-product-context .sp-nav__list { gap: 4px; }
  body.sp-product-context .sp-nav__list > .sp-nav__item > a { padding: 8px; }
  body.sp-product-context .sp-header .trp-language-switcher { width: 160px; }
  body.sp-product-context .sp-header .trp-language-switcher > div {
    width: 100% !important; box-sizing: border-box;
  }
}
@media (max-width: 576px) {
  body.sp-product-context .hero-stats { gap: 16px !important; }
}
body.sp-product-context #sp-lead-gate-modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* SP-BODY-353-END */

/* Scope token is substituted only by the bounded cohort deployer. */
body.sp-product-context .spr-content-container :is(.sp-pdp-slot-content,.overview-grid,.overview-content) { min-width: 0; }
body.sp-product-context .overview-gallery { width: 100%; }
body.sp-product-context .spr-content-container :is(img,video,iframe) { max-width: 100% !important; }
body.sp-product-context .spr-content-container video { height: auto !important; }
body.sp-product-context .comparison-grid, body.sp-blog-context .comparison-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
body.sp-product-context .comparison-card, body.sp-blog-context .comparison-card { padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px; }
/* Reverted: let blog.css .post-content-container { padding:0 24px } supply the gutter.
   Previous padding-left/right:0 here pinned all blog content (incl. CFS premium
   imported bodies) flush against the viewport on phones. */
body.sp-blog-context .post-body .single-post-wrap { padding: 0; }
body.sp-blog-context .post-body .post-content-container { width: 100%; }
body.sp-blog-context .post-body :is(div,figure) { min-width: 0; max-width: 100%; }
body.sp-blog-context .post-body .post-cta-box p { color: inherit; }
@media (max-width:768px) {
  body.sp-product-context .spr-content-container > .sp-pdp-slot-content { width: 100%; }
  body.sp-product-context .spr-content-container .container { padding-left: 0 !important; padding-right: 0 !important; }
  body.sp-product-context .comparison-grid, body.sp-blog-context .comparison-grid { grid-template-columns: minmax(0,1fr); }
  body.sp-blog-context .post-title { overflow-wrap: break-word; }
  body.sp-blog-context .post-body h2 { font-size: 24px; }
  body.sp-blog-context .post-cta-btn { max-width: 100%; white-space: normal; }
  /* CFS premium blog template (imported from CFS sheetstorage/aplarack): no styles
     exist in the steel-pallet theme, so guard mobile overflow only — do not invent
     a layout. See whitepaper §5.4.5 (例外单独收尾, 只防溢出). */
  body.sp-blog-context :is(.cfs-blog-premium, .cfs-premium-hero, .cfs-premium-specs,
    .cfs-premium-features, .cfs-premium-feature, .cfs-premium-hero__image,
    .cfs-premium-image, .cfs-premium-feature__copy, .cfs-premium-specs__table) {
    min-width: 0; max-width: 100%; box-sizing: border-box;
  }
  body.sp-blog-context :is(.cfs-premium-hero__image img, .cfs-premium-image img) {
    max-width: 100% !important; height: auto !important; display: block;
  }
  body.sp-blog-context .cfs-premium-specs__table {
    display: block; width: 100% !important; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* CFS premium hero & feature: cascade-strong fallback. CFS inline CSS sets
     .cfs-premium-hero grid-template-columns to `minmax(0, 1.05fr) minmax(320px, 0.95fr)`
     — second column's 320px floor breaks on <=390px viewports and squeezes the
     title column to per-character wrap. Force-collapse here in the steel-pallet
     stylesheet (loaded AFTER the inline cfs block in the <head> cascade), so we
     win on equal specificity. Per whitepaper §5.4.5 (例外单独收尾). */
  body.sp-blog-context .cfs-premium-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px 0 !important;
    padding: 24px 18px !important;
  }
  body.sp-blog-context .cfs-premium-hero__image {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-top: 8px !important;
  }
  body.sp-blog-context .cfs-premium-hero__image img {
    min-height: 0 !important;
    max-height: 320px !important;
  }
  body.sp-blog-context .cfs-premium-feature__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  body.sp-blog-context .cfs-premium-feature__copy,
  body.sp-blog-context .cfs-premium-image {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* SP-PDP-HERO-77-BEGIN: mobile collapse for the .page-hero / .hero-inner block.
   Seen on /motorcycle-pallet/ (page 77) + 28 more pages (24 PDP and 5 company
   pages: about-us, contact-us, client, honor, staff). Inline styles bake in the
   desktop grid (1.2fr 1fr) and padding (72px 0 60px). product.css holds the
   type-level override but is inlined via wp_add_inline_style and fell behind
   LiteSpeed cache, so re-declare it here in the link-loaded stylesheet where
   version busting works. Scope = the hero component itself (NOT a body token),
   so the 5 non-PDP company pages are covered too.
   Mobile-only (<=768px); desktop layout untouched. Whitepaper 5.4.5. */
@media (max-width: 768px) {
  .page-hero { padding: 32px 0 !important; }
  .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hero-content,
  .hero-media {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-content h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin: 0 0 12px !important;
  }
  .hero-content > .badge { margin-bottom: 12px !important; }
  .hero-content > p {
    margin: 0 0 16px !important;
    overflow-wrap: break-word !important;
  }
  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-bottom: 24px !important;
  }
  .hero-actions .spr-cta-btn,
  .hero-actions .btn,
  .hero-actions button {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-top: 16px !important;
  }
  .hero-stats .stat-item { min-width: 0 !important; }
  .hero-stats .stat-num { font-size: 1.4rem !important; line-height: 1.1 !important; }
  .hero-stats .stat-label { font-size: 0.7rem !important; line-height: 1.25 !important; }
  .hero-img-wrap { max-width: 100% !important; }
  .hero-img-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}
/* SP-PDP-HERO-77-END */