@charset "UTF-8";
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, pre, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
  -webkit-appearance: button;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */
:where(textarea) {
  margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where(input[type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */
:where(summary) {
  display: list-item;
}

:root {
  --font-primary: system-ui, Arial, sans-serif;
}

body {
  font-family: var(--font-primary);
}

:root {
  --color-white: #ffffff;
  /* Error */
  --color-red: #e7134f;
  --color-red-12: #FCE3E3;
  /* Teal / Primary scale — redRoof brand */
  --color-teal-60: #168383;
  --color-teal-70: #116666;
  --color-teal-80: #0D4D4D;
  --color-teal-subtle: #B7F8F8;
  /* Orange / Accent CTA scale — redRoof brand */
  --color-orange-60: #FF850A;
  --color-orange-70: #ED6100;
  --color-blue-80: #00478E;
  --color-blue-10: #EBF5FF;
  /* Grey scale */
  --color-grey-10: #fafcfe;
  --color-grey-20: #e2e6ea;
  --color-grey-30: #cbd0d5;
  --color-grey-40: #b4bbc1;
  --color-grey-60: #8a9199;
  --color-grey-80: #61686f;
  --color-grey-90: #4e545b;
  --color-grey-100: #3b4147;
  /* Tooltip / info background — Grey/70, contrast ≥ 4.5:1 on white text */
  --color-tertiary-grey-stone: #757c84;
  --color-text: var(--color-grey-100);
  --color-text-inverted: var(--color-white);
}

/* Layer 2 — Brand tokens.
   Override these vars in your root project to fully rebrand the library.
   All other --lib-* vars cascade from these. */
:root {
  /* Primary / interactive brand colour — redRoof teal */
  --lib-color-primary: var(--color-teal-60);
  --lib-color-primary-hover: var(--color-teal-70);
  --lib-color-primary-dark: var(--color-teal-80);
  --lib-color-primary-subtle: var(--color-teal-subtle);
  /* Accent / CTA — orange gradient for CTA buttons */
  --lib-color-accent: var(--color-orange-60);
  --lib-color-accent-dark: var(--color-orange-70);
  /* Active / checked state colour.
     Defaults to primary (teal) for redRoof.
     Root projects override this to --lib-color-accent for orange active states. */
  --lib-color-action: var(--lib-color-primary);
  --lib-color-action-dark: var(--lib-color-primary-hover);
  /* Feedback */
  --lib-color-error: var(--color-red);
  --lib-color-error-bg: var(--color-red-12);
  --lib-color-info: var(--color-blue-80);
  --lib-color-info-bg: var(--color-blue-10);
  /* Text */
  --lib-color-text: var(--color-text);
  --lib-color-text-inverted: var(--color-text-inverted);
  /* Special Elements */
  --lib-color-measurement: var(--color-red);
  /* Background */
  --lib-color-bg: var(--color-white);
  /* Tooltip background — exposed as a semantic surface decision */
  --lib-color-tooltip-bg: var(--color-white);
}

/* Layer 3 — Shared interactive-element tokens.
   All buttons, inputs, selects, checkboxes, toggles reference these vars.
   Override at this level for fine-grained control beyond the brand layer. */
:root {
  /* ── State colours ──────────────────────────────────────────────────────
     Shared by all interactive elements regardless of type.              */
  --lib-control-color-focus: var(--lib-color-primary); /* focus rings */
  --lib-control-color-action: var(--lib-color-action); /* toggle/checkbox/option active */
  --lib-control-color-action-dark: var(--lib-color-action-dark); /* gradient end */
  --lib-control-color-cta: var(--lib-color-accent); /* CTA/accent button gradient */
  --lib-control-color-cta-dark: var(--lib-color-accent-dark); /* CTA gradient end */
  --lib-control-color-primary: var(--lib-color-primary); /* primary button bg */
  --lib-control-color-primary-hover: var(--lib-color-primary-hover);
  --lib-control-color-primary-dark: var(--lib-color-primary-dark); /* minimal btn text */
  --lib-control-color-primary-subtle: var(--lib-color-primary-subtle); /* minimal btn hover bg */
  --lib-control-color-error: var(--lib-color-error);
  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --lib-control-bg: var(--lib-color-bg); /* default surface (inputs, hover lift) */
  --lib-control-bg-subtle: var(--color-grey-10); /* card, input default bg, controls */
  --lib-control-bg-muted: var(--color-grey-20); /* disabled bg, tertiary btn, subtle hover */
  --lib-control-bg-hover: var(--color-grey-30); /* tertiary btn hover */
  /* ── Borders ─────────────────────────────────────────────────────────── */
  --lib-control-border: var(--color-grey-40); /* default input / control border */
  --lib-control-border-subtle: var(--color-grey-20); /* select default, disabled input border */
  --lib-control-border-strong: var(--color-grey-60); /* outline btn hover border */
  --lib-control-border-stronger: var(--color-grey-100); /* high-contrast border */
  /* ── Text ────────────────────────────────────────────────────────────── */
  --lib-control-text: var(--lib-color-text);
  --lib-control-text-inverted: var(--lib-color-text-inverted);
  --lib-control-text-muted: var(--color-grey-60); /* placeholders, secondary text */
  --lib-control-text-disabled: var(--color-grey-40);
  /* ── Text on coloured surfaces ───────────────────────────────────────────
     One token per surface family, so a theme can pick a readable text colour
     per background (primary / CTA / action / secondary luminances move
     independently — a single inverted token cannot satisfy all of them).   */
  --lib-control-text-on-primary: var(--lib-color-text-inverted); /* on primary button bg */
  --lib-control-text-on-cta: var(--lib-color-text-inverted); /* on CTA/accent gradient */
  --lib-control-text-on-action: var(--lib-color-text-inverted); /* on active/checked surfaces */
  --lib-control-text-on-secondary: var(--lib-color-text-inverted); /* on neutral grey-80 surfaces */
  /* ── Secondary / neutral button scale ────────────────────────────────── */
  --lib-control-text-secondary: var(--color-grey-80);
  --lib-control-text-secondary-hover: var(--color-grey-90);
  /* ── Icons ───────────────────────────────────────────────────────────── */
  --lib-control-icon: var(--color-grey-80);
  --lib-control-icon-hover: var(--color-grey-100);
  --lib-control-icon-active: var(--lib-color-primary);
  --lib-control-icon-disabled: var(--color-grey-40);
  /* ── Shape ───────────────────────────────────────────────────────────── */
  --lib-control-border-radius-sm: 0.25rem; /* compact option controls: checkbox, toggle, option */
  --lib-control-border-radius-md: 0.375rem; /* text inputs, selects, textareas, buttons */
  --lib-control-border-radius-lg: 0.5rem; /* smaller floating elements: notifications */
  --lib-control-border-radius-xl: 0.75rem; /* floating elements: menus, sidebar, modals */
  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --lib-control-shadow-standard-size: 0 0.125rem 0.5rem 0;
  --lib-control-shadow-standard-color: rgba(0, 0, 0, 0.16);
  --lib-control-shadow-standard: var(--lib-control-shadow-standard-size) var(--lib-control-shadow-standard-color);
}

:root {
  --lib-motion-duration-fast: 0.2s;
  --lib-motion-duration-slow: 0.5s;
  --lib-motion-easing-default: ease;
  --lib-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lib-motion-duration-fast: 0ms;
    --lib-motion-duration-slow: 0ms;
  }
}
:root {
  --focus-ring-width: 1px;
  --focus-ring-color: var(--lib-control-color-focus);
  --focus-ring-style: solid;
  --focus-ring-offset: 0.175rem;
}

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-red: #e51919;
  --color-green: #9bc7b2;
  --color-yellow: #ffd612;
  --color-grey: #999;
  --color-blue: #0d3e8e;
  --color-orange: #f8db4b;
  /* redplant performance widget */
  --color-redplant-grey: "#dcddde";
  --color-redplant-dark-light: "#2d4462";
  --color-redplant-dark-light-rgb: "rgb(45, 68, 98)";
  --color-redplant-green: "#6bbc7a";
  --color-redplant-red: "#f01e23";
  --color-redplant-text-color: var(--color-white);
  --color-redplant-gradient-start: "#102a4d";
  --color-redplant-gradient-end: "#222830";
  --color-error: var(--color-red);
  --color-warning: var(--color-orange);
  --color-success: var(--color-green);
  --color-error-dark: #8E1A22;
  --color-warning-dark: #E28921;
  --color-info-dark: var(--color-primary-black-blue);
  --color-text: var(--color-black);
  --color-disabled: var(--color-grey);
  --color-active: var(--color-black);
  --color-inactive: var(--color-grey);
  --color-black: hsla(0, 0%, 0%, 1);
  --color-white: hsla(0, 0%, 100%, 1);
  --color-primary-10: hsla(210, 98%, 96%, 1);
  --color-primary-20: hsla(210, 99%, 87%, 1);
  --color-primary-30: hsla(210, 100%, 78%, 1);
  --color-primary-40: hsla(210, 100%, 69%, 1);
  --color-primary-50: hsla(210, 99%, 57%, 1);
  --color-primary-60: hsla(210, 100%, 44%, 1);
  --color-primary-70: hsla(210, 100%, 36%, 1);
  --color-primary-80: hsla(210, 100%, 28%, 1);
  --color-primary-90: hsla(210, 100%, 21%, 1);
  --color-primary-100: hsla(210, 100%, 14%, 1);
  --color-grey-10: hsla(210, 72%, 99%, 1);
  --color-grey-15: hsla(210, 20%, 94%, 1);
  --color-grey-20: hsla(210, 16%, 90%, 1);
  --color-grey-30: hsla(210, 11%, 82%, 1);
  --color-grey-40: hsla(210, 9%, 73%, 1);
  --color-grey-50: hsla(210, 8%, 65%, 1);
  --color-grey-60: hsla(210, 7%, 57%, 1);
  --color-grey-70: hsla(210, 6%, 49%, 1);
  --color-grey-74: hsla(212, 6%, 46%, 1);
  --color-grey-80: hsla(210, 7%, 41%, 1);
  --color-grey-90: hsla(210, 8%, 33%, 1);
  --color-grey-100: hsla(210, 9%, 25%, 1);
  --color-error-8: color-mix(in srgb, var(--color-error) 8%, white);
  --color-error-12: color-mix(in srgb, var(--color-error) 12%, white);
  --color-error-16: color-mix(in srgb, var(--color-error) 16%, white);
  --color-error-24: color-mix(in srgb, var(--color-error) 24%, white);
  --color-error-40: color-mix(in srgb, var(--color-error) 40%, white);
  --color-error-56: color-mix(in srgb, var(--color-error) 56%, white);
  --color-error-64: color-mix(in srgb, var(--color-error) 64%, white);
  --color-error-72: color-mix(in srgb, var(--color-error) 72%, white);
  --color-error-80: color-mix(in srgb, var(--color-error) 80%, white);
  --color-error-88: color-mix(in srgb, var(--color-error) 88%, white);
  --color-error-100: color-mix(in srgb, var(--color-error) 100%, white);
  --color-success-8: color-mix(in srgb, var(--color-success) 8%, white);
  --color-success-12: color-mix(in srgb, var(--color-success) 12%, white);
  --color-success-16: color-mix(in srgb, var(--color-success) 16%, white);
  --color-success-24: color-mix(in srgb, var(--color-success) 24%, white);
  --color-success-40: color-mix(in srgb, var(--color-success) 40%, white);
  --color-success-56: color-mix(in srgb, var(--color-success) 56%, white);
  --color-success-64: color-mix(in srgb, var(--color-success) 64%, white);
  --color-success-72: color-mix(in srgb, var(--color-success) 72%, white);
  --color-success-80: color-mix(in srgb, var(--color-success) 80%, white);
  --color-success-88: color-mix(in srgb, var(--color-success) 88%, white);
  --color-success-100: color-mix(in srgb, var(--color-success) 100%, white);
  --color-secondary-lightgreen: #b9e457;
  --color-secondary-coral: #ff6872;
  --color-secondary-lightblue: #00d7ff;
  --color-tertiary-black: var(--color-black);
  --color-tertiary-white: var(--color-white);
  --color-tertiary-grey-light: #f3f4f5;
  --color-tertiary-grey-medium: #abb3be;
  --color-tertiary-grey-stone: #546b86;
  --color-tertiary-green-dark-light: #a4cc47;
  --color-tertiary-blue-dark-light: #00accc;
  --color-tertiary-blue-light: rgba(from var(--color-secondary-lightblue) r g b / 0.5);
  --color-tertiary-coral-dark: #cc3f49;
  --color-accent-light: #ff850a;
  --color-accent-dark: #ed6100;
  --color-error-hover: var(--color-tertiary-coral-dark);
  --color-gradient-slider-end: #3d6ea5;
  --color-gradient-slider-start: #9eb7d2;
  --color-gradient-main-menu: linear-gradient(180deg, #d4e8ff 0%, #ffffff 90%);
  --color-gradient-main-menu-hover: linear-gradient(0deg, rgba(255, 255, 255, 0.48) 10%, rgba(243, 244, 245, 0.48) 84.62%);
  --color-gradient-slider: linear-gradient(270deg, var(--color-gradient-slider-end) 0%, var(--color-gradient-slider-start) 100%);
  --color-gradient-slider-hover: linear-gradient(270deg, #0D4A8F 0%, #9EB7D2 100%);
  --color-gradient-sub-categories: linear-gradient(
      360deg,
      rgba(212, 232, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.48) 90%
  );
  --color-gradient-sub-categories-hover: linear-gradient(
      0deg,
      rgba(243, 244, 245, 0.48) 0%,
      rgba(255, 255, 255, 0.48) 90%
  );
  --color-text: var(--color-grey-100);
  --color-text-inverted: var(--color-white);
}

:root {
  --fpc00: 0.56;
  --fpc01: 0.56;
  --fpc02: 0.56;
  --fpc03: 0.48;
  --fpc04: 0.48;
  --fpc05: 0.48;
  --fpc06: 0.48;
  --fpc07: 0.63;
  --fpc08: 0.63;
  --rem-font-size: 16;
  --min-font-size: 8;
  --max-font-size: 32;
  --max-font-size-rem: calc(var(--max-font-size) / var(--rem-font-size));
}

@media (max-width: 320px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 0;
    --max-vw: 320;
    --fpc-left: var(--fpc00);
    --fpc-right: var(--fpc01);
  }
}
@media (min-width: 321px) and (max-width: 640px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 321;
    --max-vw: 640;
    --fpc-left: var(--fpc01);
    --fpc-right: var(--fpc02);
  }
}
@media (min-width: 641px) and (max-width: 960px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 641;
    --max-vw: 960;
    --fpc-left: var(--fpc02);
    --fpc-right: var(--fpc03);
  }
}
@media (min-width: 961px) and (max-width: 1280px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 961;
    --max-vw: 1280;
    --fpc-left: var(--fpc03);
    --fpc-right: var(--fpc04);
  }
}
@media (min-width: 1281px) and (max-width: 1600px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 1281;
    --max-vw: 1600;
    --fpc-left: var(--fpc04);
    --fpc-right: var(--fpc05);
  }
}
@media (min-width: 1601px) and (max-width: 1920px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 1601;
    --max-vw: 1920;
    --fpc-left: var(--fpc05);
    --fpc-right: var(--fpc06);
  }
}
@media (min-width: 1921px) and (max-width: 2240px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 1921;
    --max-vw: 2240;
    --fpc-left: var(--fpc06);
    --fpc-right: var(--fpc07);
  }
}
@media (min-width: 2241px) {
  html[data-type=configurator],
  body[data-type=configurator] {
    --min-vw: 2241;
    --max-vw: 2560;
    --fpc-left: var(--fpc07);
    --fpc-right: var(--fpc08);
  }
}
html[data-type=configurator],
body[data-type=configurator] {
  --min-vw-rem: calc(var(--min-vw) / var(--rem-font-size));
  --max-vw-rem: calc(var(--max-vw) / var(--rem-font-size));
  --segement-left-font-size: calc(var(--fpc-left) * var(--max-font-size-rem));
  --segement-right-font-size: calc(var(--fpc-right) * var(--max-font-size-rem));
  /* m = (y2 - y1) / (x2 - x1)  */
  --rise: calc(var(--segement-right-font-size) - var(--segement-left-font-size));
  --run: calc(var(--max-vw-rem) - var(--min-vw-rem));
  --slope: calc(var(--rise) / var(--run));
  --yAxisIntersection: calc(var(--min-vw-rem) * -1 * var(--slope) + var(--segement-left-font-size));
  --slope-vw: calc(var(--slope) * 100vw);
  --preferred: calc(var(--yAxisIntersection) * 1rem + var(--slope-vw));
  /* maybe it is a rising or falling slope */
  --clamp-min: calc(min(var(--segement-left-font-size),var(--segement-right-font-size)) * 1rem);
  --clamp-max: calc(max(var(--segement-left-font-size),var(--segement-right-font-size)) * 1rem);
  font-size: clamp(var(--clamp-min), var(--preferred), var(--clamp-max));
}

/* montserrat-cyrillic-ext-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-cyrillic-ext-wght-normal.CO5hGrJv.woff2) format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat-cyrillic-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-cyrillic-wght-normal.EAA9jha_.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat-vietnamese-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-vietnamese-wght-normal.k7S-YeeD.woff2) format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat-latin-ext-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-latin-ext-wght-normal.BsZE-iaG.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat-latin-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-latin-wght-normal.l_AIctKy.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("./material-symbols-sharp.Cr7tqs8K.woff2") format("woff2");
}
.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

:root {
  --font-primary: "Montserrat Variable", system-ui, Arial, sans-serif;
  --font-redplant: "Montserrat Variable", system-ui, Arial, sans-serif;
  --font-icon-material: "Material Symbols Sharp";
  --font-icon-material-variation-l: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  --font-icon-material-variation-xl: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}

body {
  font-family: var(--font-primary);
}

/* material font variable axes */
.material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}
.material-symbols-sharp.variation-l {
  font-variation-settings: var(--font-icon-material-variation-l);
}
.material-symbols-sharp.variation-xl {
  font-variation-settings: var(--font-icon-material-variation-xl);
}
.material-symbols-sharp {
  -webkit-user-select: none;
          user-select: none;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-4 {
  gap: 0.25rem;
}

.gap-6 {
  gap: 0.375rem;
}

.gap-8 {
  gap: 0.5rem;
}

.gap-12 {
  gap: 0.75rem;
}

.gap-16 {
  gap: 1rem;
}

.gap-20 {
  gap: 1.25rem;
}

.gap-24 {
  gap: 1.5rem;
}

.gap-28 {
  gap: 1.75rem;
}

.gap-32 {
  gap: 2rem;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.flex-0 {
  flex: 0;
}

.flex-1 {
  flex: 1;
}

.scroll {
  flex: 1 0 0;
  overflow: scroll;
}

:root {
  --button-corner: 6px;
  --z-index-modal: 5000;
  --focus-ring-width: 1px;
  --focus-ring-color: var(--color-primary-60);
  --focus-ring-style: solid;
  --focus-ring-offset: 2px;
}

html[data-type=configurator],
body[data-type=configurator] {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: var(--font-primary);
  color: var(--color-text);
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  text-rendering: geometricPrecision;
  --scrollbar-size: 0.375rem;
  --border-radius: 0.75rem;
}
html[data-type=configurator] ::-webkit-scrollbar,
body[data-type=configurator] ::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
html[data-type=configurator] ::-webkit-scrollbar-track,
body[data-type=configurator] ::-webkit-scrollbar-track {
  background: var(--color-tertiary-white);
  border-radius: var(--border-radius);
}
html[data-type=configurator] ::-webkit-scrollbar-thumb,
body[data-type=configurator] ::-webkit-scrollbar-thumb {
  background: var(--color-tertiary-grey-medium);
  border-radius: var(--border-radius);
  background-clip: padding-box;
}.debug-features.svelte-12qhfyh {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}