/**
 * Brouns Paint Explorer — Base Styles
 * These rules only scope the .brx container to avoid
 * conflicting with the active WordPress theme.
 */

.brouns-paint-explorer-root {
  display: block;
  width: 100%;
  font-family: 'Raleway', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent the theme injecting unwanted list / paragraph margins
   inside the explorer wrapper */
.brouns-paint-explorer-root .brx *,
.brouns-paint-explorer-root .brx *::before,
.brouns-paint-explorer-root .brx *::after {
  box-sizing: border-box;
}

/* ── Theme isolation ──────────────────────────────────────────────────
   Establish a clean typographic baseline on the explorer root so the
   active theme's inherited styles cannot bleed into the explorer.
   These are NOT !important, so the explorer's own inline styles win. */
.brouns-paint-explorer-root,
.brouns-paint-explorer-root .brx {
  font-family: 'Raleway', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
  color: #071724;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Some themes add top margin to every img — override inside explorer */
.brouns-paint-explorer-root .brx img {
  margin: 0;
  vertical-align: middle;
}

/* Reserve the page's vertical scrollbar so the centred layout doesn't shift
   sideways the moment the explorer mounts and makes the page scrollable.
   Ignored gracefully by browsers without :has support. */
html:has(.brouns-paint-explorer-root) {
  scrollbar-gutter: stable;
}

/* Never let the explorer cause horizontal scrolling on narrow screens */
.brouns-paint-explorer-root,
.brouns-paint-explorer-root .brx {
  max-width: 100%;
  overflow-x: clip;
}