/* Targeted responsive corrections for the existing NP5 catalogue and configurator shells. */
@media (max-width: 760px) {
  .ph-collection-grid,
  .xl-collection-grid,
  .xl-selected,
  .xl-story-grid,
  .xl-logistics .wrap,
  .ph-model-stage,
  .ph-plan-layout,
  .ph-system-grid,
  .ph-catalogue-grid,
  .config-grid,
  .materials-layout,
  .living-grid,
  .plan-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ph-collection-grid,
  .xl-collection-grid { gap: 22px; }

  .ph-house-card,
  .xl-collection-card,
  .ph-card-copy,
  .xl-collection-card > div { min-width: 0; }

  .ph-card-image { aspect-ratio: 1.6; }
  .npm-listing-card .ph-card-image { aspect-ratio: 1.58; }
  .npm-listing-card .ph-card-image img { object-fit: cover; object-position: center; }
  .ph-card-copy { padding: 20px; }
  .ph-card-title { align-items: flex-start; flex-wrap: wrap; gap: 7px 12px; }
  .ph-card-title h3 { min-width: 0; overflow-wrap: anywhere; }
  .ph-card-title > span { white-space: normal; line-height: 1.5; }
  .ph-card-copy > p { overflow-wrap: anywhere; }
  .ph-card-copy .ph-textlink,
  .ph-textlink,
  .v8-text-link { display: inline-flex; min-height: 44px; align-items: center; }

  .xl-hero { grid-template-columns: minmax(0, 1fr); }
  .xl-hero-copy { padding: 38px 22px 26px; }
  .xl-hero figure { padding: 10px 16px 20px; }
  .xl-hero figure > img { width: 100%; max-height: 390px; aspect-ratio: 1.5; object-fit: contain; }
  .xl-collection-card > img { aspect-ratio: 1.55; object-fit: contain; }
  .xl-collection-card > div { padding: 21px; }
  .xl-collection-card h2 { font-size: clamp(25px, 7vw, 33px); overflow-wrap: anywhere; }
  .xl-collection-card .btn,
  .xl-cta .btn { min-height: 44px; }
  .xl-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xl-selected { gap: 20px; }
  .xl-selected figure,
  .xl-selected figure > img,
  .xl-plan { min-width: 0; max-width: 100%; }
  .xl-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

  .ph-product-hero { padding-bottom: 270px; }
  .ph-product-hero > figure { height: 270px; }
  .ph-subnav { top: var(--np5-sticky-offset, 56px); scroll-margin-top: 112px; }
  .ph-subnav a { min-height: 48px; }
  .ph-section,
  .v8-section { scroll-margin-top: 112px; }
  .ph-section .wrap,
  .v8-section .wrap,
  .ph-final .wrap { min-width: 0; }
  .ph-gallery { grid-template-columns: minmax(0, 1fr); }
  .ph-gallery a,
  .ph-gallery img { min-width: 0; max-width: 100%; }
  .ph-gallery img { height: auto; aspect-ratio: 1.58; object-fit: contain; }
  .ph-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-swatch { min-width: 0; }
  .ph-swatch img { width: 100%; object-fit: contain; }
  .ph-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ph-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-catalogue-grid { justify-items: start; }

  .jewel-hero { grid-template-columns: minmax(0, 1fr); }
  .jewel-hero-image { min-width: 0; }
  .jewel-hero-image img,
  .model-product-image img,
  .plan-images img,
  .catalogue-cover img { max-width: 100%; height: auto; object-fit: contain; }
  .model-stage { grid-template-columns: minmax(0, 1fr); }
  .model-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-images { grid-template-columns: minmax(0, 1fr); }
  .jewel-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-grid { grid-template-columns: minmax(0, 1fr); }

  .npm-page { width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .npm-page .npm-hero { grid-template-columns: minmax(0, 1fr); }
  .npm-page .npm-hero-copy { width: 100%; min-width: 0; padding: 38px 22px 30px; }
  .npm-page .npm-hero h1 { white-space: normal; overflow-wrap: anywhere; font-size: clamp(40px, 13vw, 64px); }
  .npm-page .npm-hero-image { min-width: 0; min-height: 0; }
  .npm-page .npm-hero-image img { width: 100%; height: auto; min-height: 0; aspect-ratio: 1.45; object-fit: contain; }
  .npm-page .npm-subnav { top: var(--np5-sticky-offset, 56px); }
  .npm-page .npm-subnav > div { width: 100%; max-width: 100%; padding-inline: 16px; }
  .npm-page .npm-section { min-width: 0; padding: 42px 18px; }
  .npm-page .npm-final { padding: 40px 18px; }
  .npm-page .npm-heading { gap: 12px; }
  .npm-page .npm-heading h2 { overflow-wrap: anywhere; }
  .npm-page .npm-facts,
  .npm-page .npm-facts-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .npm-page .npm-facts article,
  .npm-page .npm-facts article + article { min-width: 0; padding: 16px 12px; }
  .npm-page .npm-facts article:nth-child(2n) { border-right: 0; }
  .npm-page .npm-facts article:nth-child(n+3) { border-top: 1px solid var(--npm-line); }
  .npm-page .npm-facts article:nth-child(2n+1) { padding-left: 0; }
  .npm-page .npm-plan,
  .npm-page .npm-config-grid { grid-template-columns: minmax(0, 1fr); }
  .npm-page .npm-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .npm-page .npm-gallery-thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .npm-page .npm-select-grid { grid-template-columns: minmax(0, 1fr); }
  .npm-page .npm-model-reference { grid-template-columns: minmax(0, 1fr); }
  .npm-page .npm-step-nav { max-width: 100%; }
  .npm-page .npm-step-button { min-height: 48px; }
  .npm-page .npm-quote,
  .npm-page .npm-options { min-width: 0; }
  .npm-page .npm-final { align-items: flex-start; flex-direction: column; }
  .npm-page :is(button, a.npm-button, select) { scroll-margin-top: 112px; }
  .npm-page .npm-step-back,
  .npm-page .npm-step-next,
  .npm-page .npm-contact-cta { min-height: 44px; }

  .workspace { min-width: 0; grid-template-columns: minmax(0, 1fr) !important; }
  .workspace > *,
  .viewer,
  .viewer-header,
  #controls,
  .choices,
  .config-top,
  .selection-strip,
  .quote,
  .bottom-actions { min-width: 0; max-width: 100%; }
  .config-top { flex-wrap: wrap; gap: 12px; }
  .config-top h1 { max-width: 100%; overflow-wrap: anywhere; }
  .top-actions,
  .action-row,
  .bottom-actions,
  .configuration-actions { flex-wrap: wrap; }
  .top-actions > *,
  .action-row > *,
  .bottom-actions > *,
  .configuration-actions > * { min-height: 44px; }
  .steps { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .steps button,
  .views button,
  .view-button,
  .text-btn { min-height: 44px; flex: 0 0 auto; }
  .viewer,
  .visual { overflow-wrap: anywhere; }
  .visual img,
  #main-image { width: 100%; max-width: 100%; height: auto; max-height: min(62vh, 520px); object-fit: contain; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choices .option { min-width: 0; min-height: 70px; }
  .area,
  .quote,
  .build-info,
  .assembly-copy { overflow-wrap: anywhere; }
}

@media (max-width: 390px) {
  .ph-card-copy { padding: 17px; }
  .ph-card-title { display: flex; }
  .xl-collection-card > div { padding: 17px; }
  .xl-model-grid,
  .xl-spec-grid { grid-template-columns: minmax(0, 1fr); }
  .xl-model-tab { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 10px; }
  .xl-model-tab img { grid-row: span 2; }
  .npm-page .npm-section { padding-inline: 16px; }
  .npm-page .npm-gallery { gap: 6px; }
  .npm-page .npm-review-choices { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .choices { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 761px) and (max-width: 900px) {
  .ph-collection-grid,
  .xl-collection-grid { gap: 20px; }
  .ph-card-copy { padding: 20px; }
  .npm-page .npm-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* Keep fragment destinations visible below the shared sticky navigation. */
html { scroll-padding-top: 112px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}