/* DBX ONE v0.6.7 — visual regression fixes: INSIGHTS card wrapping, legal hero centring,
   and desktop STOCKROOM detail presentation. */

/* INSIGHTS: old global overflow-wrap:anywhere was allowing large card headings to split
   inside words (e.g. Completen / ess). Keep wrapping at spaces and reduce the desktop
   card-heading scale enough for four equal cards to remain readable. */
body.insights-product-page .op-grid-4 .op-card h3 {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: clamp(25px, 2vw, 31px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}
body.insights-product-page .op-grid-4 .op-card {
  padding: clamp(24px, 2.2vw, 30px) !important;
}
@media (max-width: 1180px) {
  body.insights-product-page .op-grid-4 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 620px) {
  body.insights-product-page .op-grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Confidentiality: .op-hero h1 had a constrained block with zero horizontal margins,
   so the text block sat to the left inside an otherwise centred hero. Centre the actual
   heading/lead blocks, not just their text. */
body.confidentiality-page-v067 .page-hero .page-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.confidentiality-page-v067 .page-hero .page-center > h1 {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 14px auto 24px !important;
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.confidentiality-page-v067 .page-hero .page-center > p:not(.eyebrow) {
  width: min(100%, 1060px) !important;
  max-width: 1060px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
body.confidentiality-page-v067 .page-hero .eyebrow {
  justify-content: center !important;
  text-align: center !important;
}

/* STOCKROOM interactive demo: the original desktop room view was a 680px right drawer.
   On desktop it now behaves as a large centred app panel using the available viewport.
   Mobile remains full-screen and touch-first. */
@media (min-width: 901px) {
  .stock-demo-page .demo-drawer {
    justify-content: center !important;
    align-items: center !important;
    padding: 32px !important;
  }
  .stock-demo-page .demo-drawer-card {
    width: min(1180px, calc(100vw - 64px)) !important;
    height: min(900px, calc(100dvh - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
    border: 1px solid #26394d !important;
    border-radius: 28px !important;
    padding: 32px !important;
    box-shadow: 0 34px 110px rgba(0,0,0,.55) !important;
  }
  .stock-demo-page .demo-drawer-card .demo-chart-card,
  .stock-demo-page .demo-drawer-card .demo-consumables {
    padding: 24px !important;
  }
  .stock-demo-page .demo-deliveries-card {
    width: min(1040px, calc(100vw - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
    padding: 30px !important;
  }
  .stock-demo-page .demo-missing-card {
    width: min(760px, calc(100vw - 64px)) !important;
  }
}