/* Join the existing priority layer: layered !important resets otherwise win. */
@layer comemso-design {
/*
 * Shared component spacing, V170 final.
 * Load after the rendered page styles in EN and DE.
 * The existing design bundles use !important resets; these scoped component
 * rules deliberately take precedence without changing form or finder logic.
 */
:root {
  --cmo-feedback-inset-block: 16px;
  --cmo-feedback-inset-inline: clamp(16px, 2vw, 24px);
  --cmo-result-inset: clamp(16px, 2vw, 24px);
}

/* Shared by contact, demo, finder, downloads, newsletter and RMA forms. */
html body.cmo-design-system #main-content
:is(.v111-status, [data-provider-status], [data-request-status], [data-contact-status], [data-demo-status]) {
  box-sizing: border-box;
  padding-block: var(--cmo-feedback-inset-block) !important;
  padding-inline: var(--cmo-feedback-inset-inline) !important;
  overflow-wrap: anywhere;
}

/* Empty messages must not create a padded, blank panel. */
html body.cmo-design-system #main-content
:is(.v111-status, [data-provider-status], [data-request-status], [data-contact-status], [data-demo-status]):empty {
  display: none !important;
}

/* The details already have an outer gutter; the dark box needs its own inset. */
html body.cmo-design-system #main-content #page-content
.config-full-details > .config-result__recommendation {
  box-sizing: border-box;
  padding: var(--cmo-result-inset) !important;
}

/* Align the first service card with the adjacent image, including desktop. */
html body.cmo-design-system #main-content #page-content .uc47-service-layout {
  align-items: start !important;
}

html body.cmo-design-system #main-content #page-content
.uc47-service-layout > :is(.uc47-service-copy, .uc47-service-media) {
  align-self: start !important;
  margin-block-start: 0 !important;
}

html body.cmo-design-system #main-content #page-content
.uc47-service-copy > .uc47-service-steps:first-child {
  margin-block-start: 0 !important;
}

}