/* Match the phone order-summary type system across the public storefront.
   Keep these adjustments off desktop, printable sheets and the order flow itself. */
@media screen and (max-width: 600px) {
  body[data-mobile-ux]:not(.order-flow),
  body.partner-page:not(.order-flow) {
    --os-phone-body-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --os-phone-heading-font: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --mono: var(--os-phone-body-font);
    font-family: var(--os-phone-body-font);
  }

  /* A commercial project has its own local font token. */
  body[data-mobile-ux]:not(.order-flow) .commercial-projects {
    --mono: var(--os-phone-body-font);
    font-family: var(--os-phone-body-font);
  }

  /* The order summary keeps the main page title in the site's mono face. */
  body[data-mobile-ux]:not(.order-flow) h1,
  body.partner-page:not(.order-flow) h1,
  body[data-product-reference]:not([data-size-page]):not(.product-card-view) .compact-product-summary #product-title,
  body[data-size-page] #custom-size .compact-designer-heading h2 {
    font-family: var(--os-phone-heading-font);
    font-weight: 400;
  }

  /* Use the order-summary heading scale on standard pages while preserving
     the smaller product heading and compact catalogue/configurator layouts. */
  body[data-mobile-ux]:not(.order-flow):not([data-product-reference]):not(.catalogue-page) h1,
  body.partner-page:not(.order-flow) h1 {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.12;
    letter-spacing: -.035em;
  }

  /* Diagram labels are part of the technical drawing, not page copy. */
  body[data-size-page] .drawing-canvas {
    --mono: var(--os-phone-heading-font);
  }

  /* This image-examples dialog previously hard-coded Arial rather than the
     shared site token. Match it without changing dimensions or gallery layout. */
  body[data-mobile-ux]:not(.order-flow) .colour-examples-dialog,
  body[data-mobile-ux]:not(.order-flow) .colour-examples-header h2,
  body[data-mobile-ux]:not(.order-flow) .colour-examples-header button,
  body[data-mobile-ux]:not(.order-flow) .colour-examples-note,
  body[data-mobile-ux]:not(.order-flow) .colour-examples-grid figcaption,
  body[data-mobile-ux]:not(.order-flow) .finish-examples-button {
    font-family: var(--os-phone-body-font);
  }

  /* Keep form text at the same size as order checkout and prevent iPhone zoom. */
  body[data-mobile-ux]:not(.order-flow) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  body[data-mobile-ux]:not(.order-flow) select,
  body[data-mobile-ux]:not(.order-flow) textarea,
  body.partner-page:not(.order-flow) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
  body.partner-page:not(.order-flow) select,
  body.partner-page:not(.order-flow) textarea {
    font-size: max(16px, 1em);
  }
}

/* Match visible page and section headings to the homepage workshop title on
   phones. Card captions and configurator field labels stay compact so that
   product grids and the single-screen designer remain usable. */
@media screen and (max-width: 600px) {
  body main :is(h1, h2, h3):not(.catalogue-title):not(#custom-finish-heading):not(.visually-hidden),
  body main .commercial-projects :is(h1, h2, h3):not(.visually-hidden) {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif !important;
    font-size: clamp(27px, 6.8vw, 37px) !important;
    font-weight: 400 !important;
    line-height: 1.17 !important;
    letter-spacing: -.055em !important;
    text-transform: none;
  }
}

@media screen and (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
  /* The larger product heading can wrap on the shortest iPhones. Let the
     illustration yield space before the controls or swatch targets do. */
  body[data-size-page] #custom-size .drawing-section { min-height: 36px; }
  body[data-size-page] #custom-size .compact-designer-controls { gap: 4px; }
}