/* Phase 2 layouts. Approved vi.css owns colors, typography and components. */
:root { color-scheme: light; }
html { scroll-padding-top: 7rem; }
body { margin: 0; }
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; }
a { text-underline-offset: .2em; }
p { margin: 0 0 var(--vi-space-4); }
h1, h2, h3, p, strong, td, th, a { overflow-wrap: anywhere; }
strong, b { font-weight: var(--vi-weight-semibold); }
main [class*="grid"] > *, .section-head > *, .page-banner-grid > *, .rfq-fields > * { min-width: 0; }
.vi-system h1, .vi-system h2 { letter-spacing: normal; }
.muted, .hero-copy, .detail-lede, .section-head p, .page-banner-grid > p { color: var(--vi-text-muted); }
.eyebrow { margin-bottom: var(--vi-space-4); letter-spacing: .04em; }
.site-head { position: sticky; top: 0; z-index: 30; }
.nav { flex-wrap: nowrap; gap: var(--vi-space-5); padding-block: var(--vi-space-4); position: relative; }
.home-link { text-decoration: none; padding: var(--vi-space-2); margin-left: calc(-1 * var(--vi-space-2)); }
.nav-links { margin-left: auto; gap: var(--vi-space-4); flex-wrap: nowrap; }
.nav-links a:not(.nav-cta) { display: inline-flex; align-items: center; min-height: var(--vi-control-height); font-size: var(--vi-text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--vi-text); border-bottom: 2px solid transparent; }
.nav-links a:not(.nav-cta):hover, .nav-links a[aria-current] { color: var(--vi-primary); border-bottom-color: var(--vi-primary); }
.nav-cta { font-size: var(--vi-text-sm); padding-inline: var(--vi-space-4); white-space: nowrap; }
.menu { display: none; min-height: var(--vi-control-height); border: 1px solid var(--vi-control-border); border-radius: var(--vi-radius); padding: var(--vi-space-2) var(--vi-space-4); background: var(--vi-surface); color: var(--vi-primary); font-weight: 600; cursor: pointer; }
.hero, .page-banner, .product-detail-header, .detail-hero { padding-block: var(--vi-space-8); }
.hero-grid, .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vi-space-7); align-items: center; }
.hero-copy, .detail-lede { font-size: var(--vi-text-lg); margin-block: var(--vi-space-5); }
.actions, .modal-actions, .product-detail-actions { display: flex; flex-wrap: wrap; gap: var(--vi-space-3); }
.hero-media { margin: 0; border: 1px solid var(--vi-border); border-radius: var(--vi-radius); overflow: hidden; }
.hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--vi-surface); }
.hero-label { padding: var(--vi-space-4) var(--vi-space-5); background: var(--vi-surface-subtle); border-top: 1px solid var(--vi-border); }
.hero-label strong { display: block; color: var(--vi-heading); }
.hero-label span { font-size: var(--vi-text-sm); color: var(--vi-text-muted); }
.buyer-bar { background: var(--vi-section-tint); border-block: 1px solid var(--vi-border); }
.buyer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.buyer-point { padding: var(--vi-space-5) var(--vi-space-4); border-right: 1px solid var(--vi-border); }
.buyer-point:first-child { padding-left: 0; }
.buyer-point:last-child { border-right: 0; }
.buyer-point strong { display: block; color: var(--vi-heading); font-size: var(--vi-text-lg); }
.buyer-point span { display: block; margin-top: var(--vi-space-2); color: var(--vi-text-muted); font-size: var(--vi-text-sm); line-height: var(--vi-leading-compact); }
.section-head, .page-banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vi-space-7); align-items: start; }
.section-head { margin-bottom: var(--vi-space-6); }
.section-head p, .page-banner-grid > p { margin: 0; }
.page-banner { border-bottom: 1px solid var(--vi-border); }
.page-banner-grid > p { font-size: var(--vi-text-lg); }
.decision-grid, .subtypes, .detail-note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vi-space-5); }
.decision { padding-block: var(--vi-space-5); border-top: 1px solid var(--vi-border); }
.num { color: var(--vi-primary); font-size: var(--vi-text-sm); font-weight: 600; }
.decision h3 { margin-block: var(--vi-space-3); }
.decision p, .subtype p, .detail-note p { color: var(--vi-text-muted); margin: 0; }
.decision a { display: inline-flex; align-items: center; min-height: var(--vi-control-height); margin-top: var(--vi-space-3); font-size: var(--vi-text-sm); font-weight: 600; }
.fit-guide, .rfq, .ordering, .trust { background: var(--vi-surface-subtle); }
.fit-grid, .qc-grid, .spec-layout, .faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--vi-space-7); }
.fit-intro > p:not(.eyebrow), .spec-aside p { color: var(--vi-text-muted); margin-top: var(--vi-space-4); }
.fit-list, .qc-list, .faq-list, .rfq-list { border-top: 1px solid var(--vi-border); }
.fit-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--vi-space-5); padding-block: var(--vi-space-5); border-bottom: 1px solid var(--vi-border); }
.fit-row strong { font-size: var(--vi-text-lg); color: var(--vi-heading); }
.fit-row span { color: var(--vi-text-muted); }
.inquiry-panel, .product-chat-panel { background: var(--vi-section-tint); border: 1px solid var(--vi-border); border-radius: var(--vi-radius); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vi-space-6); align-items: center; padding: var(--vi-space-6); }
.inquiry-panel p, .product-chat-panel p { color: var(--vi-text-muted); margin: var(--vi-space-4) 0 0; max-width: 70ch; }
.product-chat-panel { grid-template-columns: 1.5fr 1fr; }
.page-inquiry { padding-top: 0; }
.content-guide { padding: 0; }
.applications { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vi-space-6); }
.application { padding-top: var(--vi-space-5); border-top: 1px solid var(--vi-border); }
.application p { margin-top: var(--vi-space-4); color: var(--vi-text-muted); }
.application dl { margin: var(--vi-space-5) 0 0; display: grid; grid-template-columns: 1fr 1fr; font-size: var(--vi-text-sm); }
.application dt, .application dd { margin: 0; padding-block: var(--vi-space-3); border-bottom: 1px solid var(--vi-border); }
.application dt { font-weight: 600; }
.application dd { color: var(--vi-text-muted); }
.sticky-inquiry { width: min(var(--vi-container), calc(100% - 2 * var(--vi-gutter))); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--vi-space-4); margin: 0 auto var(--vi-space-6); }
.footer-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--vi-space-7); }
.footer-brand { padding: var(--vi-space-3); margin: calc(-1 * var(--vi-space-3)); }
.footer-company { font-size: var(--vi-text-sm); margin-top: var(--vi-space-5); }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vi-space-2) var(--vi-space-5); align-content: start; }
.footer-links a { font-size: var(--vi-text-sm); }
.catalog-toolbar { display: grid; grid-template-columns: 1fr 2fr; gap: var(--vi-space-6); margin-bottom: var(--vi-space-6); padding-bottom: var(--vi-space-6); border-bottom: 1px solid var(--vi-border); }
.catalog-search label { display: block; margin-bottom: var(--vi-space-2); font-size: var(--vi-text-sm); font-weight: 600; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: var(--vi-space-2); align-items: end; }
.filter-chip { font-size: var(--vi-text-sm); padding-inline: var(--vi-space-3); border-color: var(--vi-control-border); color: var(--vi-text); }
.filter-chip.active { color: var(--vi-white); background: var(--vi-primary); border-color: var(--vi-primary); }
.filter-chip.active:hover { background: var(--vi-primary-hover); }
.catalog-meta, .product-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vi-space-5); margin-bottom: var(--vi-space-5); }
.catalog-meta strong { font-size: var(--vi-text-lg); color: var(--vi-heading); }
.catalog-meta span, .product-group-head span { font-size: var(--vi-text-sm); color: var(--vi-text-muted); }
.product-group { padding: 0; margin-bottom: var(--vi-space-7); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vi-space-5); }
.product-card { padding: var(--vi-space-5); }
.product-card-top { display: flex; justify-content: space-between; gap: var(--vi-space-3); align-items: start; margin-bottom: var(--vi-space-4); }
.product-index { color: var(--vi-primary); font-size: var(--vi-text-sm); font-weight: 600; }
.product-group-tag { max-width: 75%; }
.product-photo-placeholder { text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: var(--vi-space-2); padding: var(--vi-space-4); text-align: center; border: 1px solid var(--vi-border); color: var(--vi-text-muted); cursor: not-allowed; }
.product-photo-placeholder > span { font-size: var(--vi-text-xs); }
.product-photo-placeholder strong { font-size: var(--vi-text-base); font-weight: 500; }
.product-card h3 { font-size: var(--vi-text-lg); line-height: var(--vi-leading-compact); margin-block: var(--vi-space-5); }
.product-card-spec { display: grid; grid-template-columns: 1fr 1fr; margin-top: auto; border-block: 1px solid var(--vi-border); }
.product-card-spec > div { padding-block: var(--vi-space-4); }
.product-card-spec > div + div { padding-left: var(--vi-space-4); border-left: 1px solid var(--vi-border); }
.product-card-spec strong { display: block; font-size: var(--vi-text-lg); font-variant-numeric: tabular-nums; }
.product-card-spec span { font-size: var(--vi-text-xs); color: var(--vi-text-muted); }
.product-card-actions { display: flex; gap: var(--vi-space-2); margin-top: var(--vi-space-4); }
.product-card-actions a { flex: 1; font-size: var(--vi-text-sm); padding-inline: var(--vi-space-3); }
.empty-group, .catalog-empty { padding: var(--vi-space-5); border: 1px solid var(--vi-border); color: var(--vi-text-muted); }
.crumbs { font-size: var(--vi-text-sm); color: var(--vi-text-muted); margin-bottom: var(--vi-space-6); }
.product-detail-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--vi-space-7); align-items: start; }
.product-identity { display: flex; flex-direction: column; }
.serial { order: -1; color: var(--vi-primary); font-size: var(--vi-text-sm); font-weight: 600; margin-bottom: var(--vi-space-4); }
.product-identity > div { margin-top: var(--vi-space-5); }
.product-identity > div > strong { display: block; font-size: var(--vi-text-h3); color: var(--vi-heading); }
.product-identity > div > span { display: block; font-size: var(--vi-text-sm); color: var(--vi-text-muted); margin-top: var(--vi-space-2); }
.product-detail-copy h1 { font-size: var(--vi-text-h2); }
.product-offer { display: grid; grid-template-columns: 1fr 1fr; margin-block: var(--vi-space-5); background: var(--vi-section-tint); border: 1px solid var(--vi-border); }
.offer-cell { padding: var(--vi-space-5); }
.offer-cell + .offer-cell { border-left: 1px solid var(--vi-border); }
.offer-cell strong { display: block; font-size: var(--vi-text-h3); color: var(--vi-heading); }
.offer-cell span { display: block; font-size: var(--vi-text-xs); margin-top: var(--vi-space-2); color: var(--vi-text-muted); }
.product-source-line, .spec-note, .route-source, .source-note, .marketing-caption { font-size: var(--vi-text-sm); color: var(--vi-text-muted); margin-top: var(--vi-space-4); }
.detail-note { border-top: 1px solid var(--vi-border); padding-top: var(--vi-space-5); }
.detail-note h3 { font-size: var(--vi-text-lg); margin-bottom: var(--vi-space-4); }
.spec-table { table-layout: fixed; background: var(--vi-surface); }
.spec-table th { width: 30%; color: var(--vi-heading); background: var(--vi-section-tint); font-weight: 600; }
.product-attributes td strong { display: block; font-size: var(--vi-text-lg); }
.product-attributes td p { margin: var(--vi-space-2) 0 0; color: var(--vi-text-muted); }
.detail-image { margin: 0; }
.detail-image img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border: 1px solid var(--vi-border); }
.marketing-caption { padding: var(--vi-space-3) var(--vi-space-4); background: var(--vi-surface-subtle); margin: 0; }
.quick-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--vi-border); margin-block: var(--vi-space-5); }
.quick { padding: var(--vi-space-4); border-bottom: 1px solid var(--vi-border); }
.quick:nth-child(odd) { border-right: 1px solid var(--vi-border); }
.quick:nth-last-child(-n+2) { border-bottom: 0; }
.quick strong, .quick span { display: block; }
.quick span { font-size: var(--vi-text-sm); color: var(--vi-text-muted); }
.guide-nav { display: flex; gap: var(--vi-space-5); flex-wrap: wrap; padding-block: var(--vi-space-5); }
.guide-nav a { display: inline-flex; align-items: center; min-height: var(--vi-control-height); font-weight: 600; }
.subtype { border-top: 1px solid var(--vi-border); padding-top: var(--vi-space-5); }
.subtype p { margin-top: var(--vi-space-4); }
.type-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vi-space-3); }
.rfq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vi-space-7); }
.rfq-list, .brief { list-style: none; padding: 0; margin: 0; }
.rfq-list li, .brief li { padding-block: var(--vi-space-4); border-bottom: 1px solid var(--vi-border); }
.rfq-list li::before, .brief li::before { content: "✓"; color: var(--vi-primary); margin-right: var(--vi-space-3); font-weight: 600; }
.brief { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--vi-space-5); margin-bottom: var(--vi-space-5); }
.factory-feature { display: grid; grid-template-columns: 2fr 1fr; gap: var(--vi-space-5); }
.factory-feature figure { margin: 0; }
.factory-feature img { width: 100%; height: 100%; object-fit: contain; background: var(--vi-surface); }
.factory-facts { display: grid; grid-template-columns: 1fr 1fr; background: var(--vi-surface); border: 1px solid var(--vi-border); }
.fact { padding: var(--vi-space-5); }
.fact:nth-child(odd) { border-right: 1px solid var(--vi-border); }
.fact:nth-child(-n+2) { border-bottom: 1px solid var(--vi-border); }
.fact strong { display: block; font-size: var(--vi-text-h2); color: var(--vi-primary); }
.fact span { display: block; font-size: var(--vi-text-sm); color: var(--vi-text-muted); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vi-space-5); margin-top: var(--vi-space-5); }
.shot { margin: 0; background: var(--vi-surface); border: 1px solid var(--vi-border); }
.shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.shot figcaption { padding: var(--vi-space-5); }
.shot strong, .shot span { display: block; }
.shot strong { color: var(--vi-heading); }
.shot span { font-size: var(--vi-text-sm); margin-top: var(--vi-space-2); color: var(--vi-text-muted); }
.qc-list { counter-reset: qc; }
.qc-item { counter-increment: qc; display: grid; grid-template-columns: var(--vi-space-7) 1fr; gap: var(--vi-space-4); padding-block: var(--vi-space-5); border-bottom: 1px solid var(--vi-border); }
.qc-item::before { content: "0" counter(qc); color: var(--vi-primary); font-weight: 600; }
.qc-item h3 { font-size: var(--vi-text-lg); margin-bottom: var(--vi-space-2); }
.qc-item p { color: var(--vi-text-muted); margin: 0; }
.caution { padding: var(--vi-space-4); border: 1px solid var(--vi-border); background: var(--vi-surface-subtle); color: var(--vi-text-muted); font-size: var(--vi-text-sm); margin-top: var(--vi-space-5); }
.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--vi-space-7); }
.about-kicker { color: var(--vi-heading); font-size: var(--vi-text-h3); font-weight: 600; }
.about-copy { font-size: var(--vi-text-lg); }
.about-copy em { font-style: normal; }
.process-link p { margin-block: var(--vi-space-4); }
.order-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vi-space-5); }
.order-step { border-top: 1px solid var(--vi-border); padding-top: var(--vi-space-5); }
.order-step b { color: var(--vi-primary); font-size: var(--vi-text-sm); }
.order-step h3 { font-size: var(--vi-text-lg); margin-block: var(--vi-space-4); }
.order-step p { color: var(--vi-text-muted); font-size: var(--vi-text-sm); }
.faq-list details { border-bottom: 1px solid var(--vi-border); }
.faq-list summary { cursor: pointer; position: relative; padding: var(--vi-space-5) var(--vi-space-7) var(--vi-space-5) 0; font-size: var(--vi-text-lg); font-weight: 600; color: var(--vi-heading); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: var(--vi-space-3); top: var(--vi-space-5); color: var(--vi-primary); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-bottom: var(--vi-space-5); color: var(--vi-text-muted); margin: 0; }
.contact-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--vi-space-7); }
.contact-brief > p, .contact-aside p { color: var(--vi-text-muted); }
.contact-aside { border-top: 1px solid var(--vi-border); padding-top: var(--vi-space-5); }
.contact-aside h2 { font-size: var(--vi-text-h3); }
.contact-aside p { margin-top: var(--vi-space-4); }
.rfq-composer { padding-top: 0; }
.rfq-fields { margin-bottom: var(--vi-space-5); }
.rfq-fields input, .vi-textarea { display: block; margin-top: var(--vi-space-2); }
.rfq-fields input:user-invalid { border: 2px solid var(--vi-error); }
#rfq-result, #modal-rfq-result { margin-top: var(--vi-space-6); }
#rfq-message, #modal-rfq-message { margin-bottom: var(--vi-space-4); }
#copy-status, #modal-copy-status { margin-top: var(--vi-space-4); font-size: var(--vi-text-sm); color: var(--vi-text-muted); }
#product-context { padding: 0 0 var(--vi-space-5); }
.quote-product { margin-top: var(--vi-space-4); }
#quote-dialog { width: min(48rem, calc(100% - 2 * var(--vi-space-4))); max-height: calc(100dvh - 2 * var(--vi-space-4)); padding: 0; border: 1px solid var(--vi-border); border-radius: var(--vi-radius); background: var(--vi-surface); color: var(--vi-text); overscroll-behavior: contain; }
#quote-dialog::backdrop { background: rgb(18 52 73 / .6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vi-space-5); padding: var(--vi-space-5); border-bottom: 1px solid var(--vi-border); background: var(--vi-surface); position: sticky; top: 0; z-index: 1; }
.modal-head h2 { font: 600 var(--vi-text-h3)/var(--vi-leading-heading) var(--vi-font-heading); color: var(--vi-heading); margin: 0; }
.modal-close { flex-shrink: 0; width: var(--vi-control-height); height: var(--vi-control-height); border: 1px solid var(--vi-control-border); border-radius: var(--vi-radius); font-size: var(--vi-text-h3); color: var(--vi-text); background: var(--vi-surface); cursor: pointer; }
.modal-close:hover { background: var(--vi-surface-subtle); }
.modal-body { padding: var(--vi-space-5); }
#quote-dialog .section-head { display: block; }
#quote-dialog .section-head h2 { font-size: var(--vi-text-h3); margin-bottom: var(--vi-space-4); }
#quote-dialog .rfq-composer { padding: 0; }
#modal-product-context { padding-bottom: var(--vi-space-5); }
#modal-context-title { font-size: var(--vi-text-lg); }
@media (max-width: 75rem) {
  .nav-links { gap: var(--vi-space-3); }
  .nav-cta { padding-inline: var(--vi-space-3); }
}
@media (max-width: 64rem) {
  .nav { flex-wrap: wrap; justify-content: space-between; }
  .nav-links { width: 100%; flex-direction: column; align-items: stretch; margin: 0; gap: var(--vi-space-2); }
  .has-js .menu { display: block; margin-left: auto; }
  .has-js .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100dvh - 7rem); overflow-y: auto; padding: var(--vi-space-4); background: var(--vi-surface); border: 1px solid var(--vi-border); border-radius: var(--vi-radius); }
  .has-js .nav-links.open { display: flex; }
  .section-head, .page-banner-grid { gap: var(--vi-space-6); }
  .factory-feature, .contact-layout { grid-template-columns: 1fr; }
  .order-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .product-chat-panel, .inquiry-panel { grid-template-columns: 1fr; }
  .product-detail-grid { gap: var(--vi-space-6); }
  .product-detail-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 40rem) {
  html { scroll-padding-top: 5rem; }
  .nav { padding-block: var(--vi-space-3); }
  .has-js .nav-links { max-height: calc(100dvh - 5rem); }
  .hero, .page-banner, .product-detail-header, .detail-hero { padding-block: var(--vi-space-7); }
  .hero-grid, .detail-grid, .section-head, .page-banner-grid, .fit-grid, .qc-grid, .spec-layout, .faq-grid, .about-grid, .rfq-grid, .product-detail-grid, .footer-grid { grid-template-columns: 1fr; gap: var(--vi-space-6); }
  .decision-grid, .subtypes, .detail-note-grid, .applications, .product-grid, .gallery, .order-steps { grid-template-columns: 1fr; }
  .buyer-grid { grid-template-columns: 1fr 1fr; }
  .buyer-point, .buyer-point:first-child { padding: var(--vi-space-4); border: 0; border-bottom: 1px solid var(--vi-border); }
  .buyer-point:nth-child(odd) { border-right: 1px solid var(--vi-border); }
  .buyer-point:last-child { grid-column: 1/-1; border: 0; }
  .fit-row { grid-template-columns: 1fr; gap: var(--vi-space-3); }
  .inquiry-panel, .product-chat-panel { padding: var(--vi-space-5); }
  .product-group-head, .catalog-meta { flex-direction: column; gap: var(--vi-space-2); }
  .product-detail-copy h1 { font-size: var(--vi-text-h3); }
  .offer-cell { padding: var(--vi-space-4); }
  .offer-cell strong { font-size: var(--vi-text-lg); }
  .spec-table th, .spec-table td { padding: var(--vi-space-3); }
  .spec-table th { width: 32%; }
  .product-attributes td strong { font-size: var(--vi-text-base); }
  .brief, .footer-links { grid-template-columns: 1fr; }
  .fact { padding: var(--vi-space-4); }
  .fact strong { font-size: var(--vi-text-h3); }
  .sticky-inquiry { justify-content: stretch; }
  .sticky-inquiry > a { width: 100%; }
  .modal-head, .modal-body { padding: var(--vi-space-4); }
  .modal-head h2 { font-size: var(--vi-text-lg); }
}
@media print {
  .site-head, .sticky-inquiry, .catalog-toolbar, .rfq-composer { display: none !important; }
  .vi-container { width: 100%; }
  .product-card, .detail-note, .qc-item { break-inside: avoid; }
}

/* Final review: use the approved VI tokens for hierarchy and mobile reach. */
.review-jump-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vi-space-3) var(--vi-space-5);
  padding-block: var(--vi-space-4);
  margin-bottom: var(--vi-space-5);
  border-bottom: 1px solid var(--vi-border);
}
.review-jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--vi-control-height);
  font-size: var(--vi-text-sm);
  font-weight: var(--vi-weight-semibold);
}
.review-jump-nav span, .quote-next-step, .buyer-source {
  color: var(--vi-text-muted);
  font-size: var(--vi-text-sm);
  line-height: var(--vi-leading-body);
}
.buyer-source { padding-block: var(--vi-space-4); margin-block: 0; }
.quote-next-step { margin-block: var(--vi-space-3) var(--vi-space-5); }
.review-spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--vi-space-7);
}
.review-spec-grid > * { min-width: 0; }
.review-spec-grid .structure-figure { margin-block: 0; }
.product-detail-actions .whatsapp-chat { order: 3; }
.product-detail-actions { margin-top: var(--vi-space-5); }
.product-detail-actions #detail-alibaba { flex-grow: 0; }
.review-jump-nav a:focus-visible, .guide-nav a:focus-visible,
.filter-chip:focus-visible, .product-photo-thumbnail:focus-visible {
  outline: 3px solid var(--vi-primary);
  outline-offset: 3px;
}
main [id] { scroll-margin-top: 7rem; }
.vi-system .hero h1 { max-width: 18ch; }
@media (max-width: 40rem) {
  .review-spec-grid { grid-template-columns: 1fr; gap: var(--vi-space-5); }
  .review-jump-nav { gap: var(--vi-space-2) var(--vi-space-4); }
  .product-detail-header .review-jump-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .rfq-fields input, .catalog-search input, .vi-textarea { font-size: 16px; }
  main [id] { scroll-margin-top: 6rem; }
  /* Reuse the existing inquiry and its product context; no new JS behavior. */
  .has-js body { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
  .has-js .sticky-inquiry {
    position: fixed;
    inset: auto 0 0;
    z-index: 25;
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--vi-space-3);
    padding: var(--vi-space-3) var(--vi-gutter) calc(var(--vi-space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--vi-border);
    background: var(--vi-surface);
  }
  .has-js .sticky-inquiry > a { width: auto; min-height: var(--vi-control-height); font-size: var(--vi-text-sm); }
  .has-js .sticky-inquiry > .button { grid-column: 1; grid-row: 1; padding-inline: var(--vi-space-3); }
  .has-js .sticky-inquiry > .whatsapp-chat { grid-column: 2; grid-row: 1; padding: var(--vi-space-2); }
  .has-js :focus-visible { scroll-margin-bottom: 7rem; }
  .has-js #quote-dialog :focus-visible { scroll-margin-bottom: var(--vi-space-5); }
}