@charset "UTF-8";
:root {
  --c-yellow: #f5be15;
  --c-outline: #8e270b1c;
  --c-red: #f04e22;
}

/**
 * ALGORITHM BY: walbo
 * https://github.com/walbo/font-size-clamp/blob/main/utils/clamp-builder.ts
 * -------------------------------------------------------------------------------

 * Generates the clamp for font-size.
 *
 * @param {Number} $minFont - Minimum font size (px)
 * @param {Number} $maxFont - Maximum font size (px)
 * @param {Number} $preferredVwHard - Hard setting the preferred VW part
 * @param {Number} $minWidth - Minimum viewport width for the minimum font size - defaulted to 360px
 * @param {Number} $maxWidth - Maximum viewport width for the maximum font size - defaulted to 1920px
 * @return {Number} - The clamp for font-size
 */
html:has(main#configurator),
body:has(main#configurator) {
  overflow-x: clip;
}

body:has(main#configurator) .content-wrapper {
  overflow: clip visible;
}

main#configurator {
  accent-color: var(--c-red);
}
main#configurator img {
  max-width: 100%;
  height: auto;
}
main#configurator .header {
  position: unset;
  height: unset;
  padding-inline: 0;
}
@media (max-width: 540px) {
  main#configurator .header {
    background: unset;
  }
}
main#configurator h2,
main#configurator h1,
main#configurator p {
  margin-block: unset;
}
main#configurator > .header {
  background: var(--c-yellow);
  border-bottom: 4px solid var(--c-red);
}
main#configurator > .header .inside {
  max-width: 86.25rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.875rem;
}
main#configurator > .header h1 {
  font-size: clamp(1.313rem, 1.154rem + 0.705vw, 2rem);
}
main#configurator .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
main#configurator .content {
  padding: clamp(1.25rem, 0.962rem + 1.282vw, 2.5rem);
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 1.25rem;
}
main#configurator .content label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
  cursor: pointer;
  transition: background 150ms;
}
main#configurator .content label:has(input[type=checkbox], input[type=radio]):hover {
  background: rgba(190, 120, 101, 0.0509803922);
}
main#configurator .content input {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}
main#configurator .content input[type=radio] {
  width: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
  height: clamp(1rem, 0.942rem + 0.256vw, 1.25rem);
}
main#configurator .content input[type=checkbox] {
  width: clamp(0.875rem, 0.817rem + 0.256vw, 1.125rem);
  height: clamp(0.875rem, 0.817rem + 0.256vw, 1.125rem);
}
@media (max-width: 900px) {
  main#configurator .content {
    grid-template-columns: 1fr;
  }
}
main#configurator .content aside {
  height: -moz-fit-content;
  height: fit-content;
  align-self: start;
  position: sticky;
  top: 8.125rem;
}
main#configurator .content aside .panel {
  background: #f8f6f6;
  border: 1px solid var(--c-outline);
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
  gap: 0.625rem;
}
@media (min-width: 901px) {
  main#configurator .content aside .panel {
    max-height: calc(100dvh - 8.125rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
main#configurator .content aside .door-images {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.875rem;
  margin-block-end: 0.375rem;
}
main#configurator .content aside .door-images figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 0 1 9.375rem;
}
main#configurator .content aside .door-images figcaption {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}
main#configurator .content aside .door-images img {
  width: 100%;
  max-width: 9.375rem;
}
@media (max-height: 799px) {
  main#configurator .content aside .door-images img {
    max-width: 6.875rem;
  }
}
main#configurator .content aside .door-images figure:only-child img {
  max-width: 11.25rem;
}
main#configurator .content aside h2 {
  font-size: clamp(1.125rem, 1.038rem + 0.385vw, 1.5rem);
}
@media (max-width: 768px) {
  main#configurator .content aside h2 {
    font-size: clamp(1.125rem, 1.038rem + 0.385vw, 1.5rem) !important;
  }
}
main#configurator .content aside .panel-product {
  font-size: 0.875rem;
  opacity: 0.85;
  margin-block-start: -0.375rem;
}
main#configurator .content .summary {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}
main#configurator .content .summary .summary-line {
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  padding-block: 0.4375rem;
  border-bottom: 1px solid var(--c-outline);
}
main#configurator .content .summary .summary-line span {
  opacity: 0.75;
}
main#configurator .content .summary .summary-line strong {
  font-weight: 500;
  text-align: right;
}
main#configurator .content .summary .summary-line.empty {
  display: block;
  font-style: italic;
  opacity: 0.75;
  border-bottom: 0;
}
main#configurator .content .price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  margin-block-start: 0.375rem;
  padding-block-start: 0.625rem;
  border-top: 2px solid rgba(142, 39, 11, 0.2509803922);
}
main#configurator .content .price-row .price-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  opacity: 0.7;
}
main#configurator .content .price-row .price-value {
  font-size: clamp(1.5rem, 1.356rem + 0.641vw, 2.125rem);
  font-weight: 700;
  color: var(--c-red);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
main#configurator .content .price-row .price-value.locked {
  font-size: 0.875rem;
  font-weight: 400;
  color: inherit;
  opacity: 0.7;
}
main#configurator .content .calc-btn,
main#configurator .content .cta,
main#configurator .content .gate-submit {
  font: inherit;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0.8125rem 1rem;
  font-weight: 700;
  line-height: 1.25;
  transition: background 150ms, color 150ms, opacity 150ms;
}
main#configurator .content .calc-btn {
  margin-block-start: 0.375rem;
  background: var(--c-red);
  color: #fff;
}
main#configurator .content .calc-btn:hover:not(:disabled) {
  background: #d8431b;
}
main#configurator .content .calc-btn:disabled {
  background: rgba(142, 39, 11, 0.1215686275);
  color: rgba(0, 0, 0, 0.3803921569);
  cursor: not-allowed;
}
main#configurator .content .hint {
  font-size: 0.75rem;
  opacity: 0.8;
  text-align: center;
}
main#configurator .content .result {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-start: 0.375rem;
  padding-block-start: 0.875rem;
  border-top: 1px solid var(--c-outline);
}
main#configurator .content .result[hidden] {
  display: none;
}
main#configurator .content .result .result-note {
  margin-block-start: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  opacity: 0.7;
}
main#configurator .content .result .cta {
  background: var(--c-red);
  color: #fff;
}
main#configurator .content .result .cta:hover:not(:disabled) {
  background: #d8431b;
}
main#configurator .content .result .cta:disabled {
  opacity: 0.6;
  cursor: progress;
}
main#configurator .content dialog.gate,
main#configurator .content dialog.region {
  width: min(28.75rem, 100vw - 2rem);
  border: 0;
  padding: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
  background: #fff;
  color: inherit;
  position: fixed;
  inset: 0;
  margin: auto;
}
main#configurator .content dialog.gate::backdrop,
main#configurator .content dialog.region::backdrop {
  background: rgba(18, 27, 48, 0.7215686275);
}
main#configurator .content dialog.gate:not([open]),
main#configurator .content dialog.region:not([open]) {
  display: none;
}
main#configurator .content dialog.gate h2,
main#configurator .content dialog.region h2 {
  font-size: clamp(1.25rem, 1.163rem + 0.385vw, 1.625rem) !important;
  padding-inline-end: 1.5rem;
}
main#configurator .content dialog.gate > p,
main#configurator .content dialog.region > p {
  margin-block: 0.375rem 1.125rem;
  opacity: 0.8;
  font-size: 0.9375rem;
}
main#configurator .content dialog.region {
  width: min(26.25rem, 100vw - 2rem);
}
main#configurator .content dialog.region .region-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
main#configurator .content dialog.region .region-actions > * {
  flex: 1 1 8.75rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.8125rem 1rem;
  border: 2px solid var(--c-red);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms, color 150ms;
}
main#configurator .content dialog.region .region-ok {
  background: var(--c-red);
  color: #fff;
}
main#configurator .content dialog.region .region-ok:hover {
  background: #d8431b;
  border-color: #d8431b;
}
main#configurator .content dialog.region .region-back {
  background: transparent;
  color: var(--c-red);
  align-items: center;
  justify-content: center;
  display: flex;
}
main#configurator .content dialog.region .region-back:hover {
  background: rgba(240, 78, 34, 0.0784313725);
}
main#configurator .content dialog.gate .gate-close {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.625rem;
  background: none;
  border: 0;
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
}
main#configurator .content dialog.gate .gate-close:hover {
  opacity: 1;
}
main#configurator .content dialog.gate .gate-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 1.25rem;
}
@media (max-width: 540px) {
  main#configurator .content dialog.gate .gate-fields {
    grid-template-columns: 1fr;
  }
}
main#configurator .content dialog.gate .gate-fields .full {
  grid-column: 1/-1;
}
main#configurator .content dialog.gate .gate-fields label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
}
main#configurator .content dialog.gate .gate-fields label span {
  text-transform: uppercase;
  opacity: 0.7;
  font-size: 0.875rem;
}
main#configurator .content dialog.gate .gate-fields label span::after {
  content: "*";
}
main#configurator .content dialog.gate .gate-fields input {
  width: 100%;
  padding: 0.5625rem;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  border: 2px solid var(--c-outline);
  font: inherit;
}
main#configurator .content dialog.gate .consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.5rem;
  margin-block: 1rem 0.25rem;
  font-size: 0.875rem;
}
main#configurator .content dialog.gate .consent input {
  margin-block-start: 0.1875rem;
}
main#configurator .content dialog.gate .consent a {
  color: var(--c-red);
  text-decoration: underline;
}
main#configurator .content dialog.gate .gate-err {
  color: var(--c-red);
  font-size: 0.8125rem;
  margin-block: 0.875rem 0;
}
main#configurator .content dialog.gate .gate-err[hidden] {
  display: none;
}
main#configurator .content dialog.gate .gate-submit {
  width: 100%;
  margin-block-start: 1rem;
  background: var(--c-red);
  color: #fff;
}
main#configurator .content dialog.gate .gate-submit:hover:not(:disabled) {
  background: #d8431b;
}
main#configurator .content dialog.gate .gate-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
main#configurator .content dialog.gate .gate-submit[aria-busy=true] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  opacity: 1;
}
main#configurator .content dialog.gate .gate-submit[aria-busy=true]::after {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255, 255, 255, 0.3490196078);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gate-spin 700ms linear infinite;
}
main#configurator .content dialog.gate .gate-link {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}
main#configurator .content .options > ol {
  list-style: none;
  padding-inline-start: 0;
  margin-block: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 0.615rem + 1.154vw, 2rem);
}
main#configurator .content .option {
  --column-1-width: clamp(1.375rem, 1.202rem + 0.769vw, 2.125rem);
  container-type: inline-size;
}
main#configurator .content .option .header {
  display: grid;
  grid-template-columns: var(--column-1-width) 1fr;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
main#configurator .content .option .header + * {
  margin-block-start: clamp(0.5rem, 0.413rem + 0.385vw, 0.875rem);
}
main#configurator .content .option .header small {
  opacity: 0.75;
}
main#configurator .content .option .header span,
main#configurator .content .option .header h2 {
  font-size: clamp(1.125rem, 1.038rem + 0.385vw, 1.5rem);
}
@media (max-width: 768px) {
  main#configurator .content .option .header span,
  main#configurator .content .option .header h2 {
    font-size: clamp(1.125rem, 1.038rem + 0.385vw, 1.5rem) !important;
  }
}
main#configurator .content .option .header span {
  color: var(--c-red);
  font-weight: 700;
}
main#configurator .content .option .header p {
  grid-column: 2;
  grid-row: 2;
  opacity: 0.8;
}
@container (max-width: 360px) {
  main#configurator .content .option .header {
    grid-template-columns: 1fr;
  }
  main#configurator .content .option .header p {
    grid-column: unset;
    grid-row: unset;
  }
  main#configurator .content .option .header > span {
    font-size: clamp(1.5rem, 1.279rem + 0.98vw, 1.75rem) !important;
  }
}
main#configurator .content .option.is-required .header h2::after {
  content: "*";
  color: var(--c-red);
  margin-inline-start: 0.15em;
}
main#configurator .content .option fieldset {
  display: grid;
  grid-template-columns: var(--column-1-width) 1fr;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
main#configurator .content .option fieldset label {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1/-1;
  align-items: center;
  gap: inherit;
  padding: 0.625rem 0.5rem;
}
main#configurator .content .option fieldset label:not(:last-child) {
  border-bottom: 1px solid var(--c-outline);
}
main#configurator .content .option fieldset label input {
  justify-self: start;
}
main#configurator .content .option fieldset label:has(.option-note) {
  align-items: start;
}
main#configurator .content .option fieldset label .option-note {
  grid-column: 2;
  margin-block-start: 0.1875rem;
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.7;
}
main#configurator .content .option .inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
main#configurator .content .option .inputs > label,
main#configurator .content .option .inputs > .input-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3125rem;
}
main#configurator .content .option .inputs > label > span,
main#configurator .content .option .inputs > label > label,
main#configurator .content .option .inputs > .input-block > span,
main#configurator .content .option .inputs > .input-block > label {
  display: block;
  text-transform: uppercase;
  opacity: 0.7;
  font-size: 0.875rem;
}
main#configurator .content .option .inputs > label > span:has(+ *:required)::after, main#configurator .content .option .inputs > label > span:has(+ .combobox [required])::after,
main#configurator .content .option .inputs > label > label:has(+ *:required)::after,
main#configurator .content .option .inputs > label > label:has(+ .combobox [required])::after,
main#configurator .content .option .inputs > .input-block > span:has(+ *:required)::after,
main#configurator .content .option .inputs > .input-block > span:has(+ .combobox [required])::after,
main#configurator .content .option .inputs > .input-block > label:has(+ *:required)::after,
main#configurator .content .option .inputs > .input-block > label:has(+ .combobox [required])::after {
  content: "*";
}
main#configurator .content .option .inputs select:not(.combobox-native),
main#configurator .content .option .inputs input[type=text]:not(.combobox-search) {
  width: 100%;
  padding: 0.5rem;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  border: 2px solid color-mix(in oklch, var(--c-outline), transparent 40%);
  font: inherit;
  font-size: max(1rem, clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem));
  line-height: 1.4;
  color: inherit;
  background: #fff;
}
main#configurator .content .option .region-note {
  margin-block-end: 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: rgba(240, 78, 34, 0.0509803922);
  border-left: 3px solid var(--c-red);
}
main#configurator .content .option:has(.combobox) {
  position: relative;
  z-index: 2;
}
main#configurator .content .combobox {
  position: relative;
  width: 100%;
}
main#configurator .content .combobox-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  border: 0;
}
main#configurator .content .combobox-control {
  position: relative;
}
main#configurator .content .combobox-value {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem;
  padding-inline-end: 4rem;
  text-align: start;
  font: inherit;
  font-size: max(1rem, clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem));
  line-height: 1.4;
  color: inherit;
  background: #fff;
  border: 2px solid var(--c-outline);
  cursor: pointer;
}
main#configurator .content .combobox-value.is-empty {
  opacity: 0.6;
}
main#configurator .content .combobox-value-text {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
main#configurator .content .combobox-actions {
  position: absolute;
  inset-inline-end: 0.375rem;
  inset-block: 0;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
main#configurator .content .combobox-clear, main#configurator .content .combobox-caret-btn {
  display: grid;
  place-content: center;
  padding: 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
main#configurator .content .combobox-clear[hidden] {
  display: none;
}
main#configurator .content .combobox-clear-icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: opacity 150ms;
}
main#configurator .content .combobox-clear:hover .combobox-clear-icon {
  opacity: 1;
}
main#configurator .content .combobox-caret {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-red);
  transition: rotate 200ms;
}
main#configurator .content .combobox.is-open .combobox-caret {
  rotate: 180deg;
}
main#configurator .content .combobox-panel {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 0.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: min(60dvh, 26.25rem);
  padding: 0.5rem;
  background: #fff;
  border: 2px solid rgba(142, 39, 11, 0.3019607843);
  box-shadow: 0 0.625rem 1.875rem rgba(142, 39, 11, 0.1490196078);
}
main#configurator .content .combobox-panel[hidden] {
  display: none;
}
main#configurator .content .combobox-search {
  flex: none;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font: inherit;
  font-size: 1rem;
  color: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f8f6f6;
  border: 2px solid var(--c-outline);
}
main#configurator .content .combobox-search::-moz-placeholder {
  opacity: 0.6;
}
main#configurator .content .combobox-search::placeholder {
  opacity: 0.6;
}
main#configurator .content .combobox-search:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: -2px;
}
main#configurator .content .combobox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
}
main#configurator .content .combobox-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem;
  font-size: clamp(0.938rem, 0.909rem + 0.128vw, 1.0625rem);
  cursor: pointer;
  transition: background 120ms;
}
main#configurator .content .combobox-option[hidden] {
  display: none;
}
main#configurator .content .combobox-option.is-active, main#configurator .content .combobox-option:hover {
  background: rgba(190, 120, 101, 0.0509803922);
}
main#configurator .content .combobox-option[aria-selected=true] {
  color: var(--c-red);
  font-weight: 700;
}
main#configurator .content .combobox-option[aria-selected=true]::after {
  content: "✓";
}
main#configurator .content .combobox-empty {
  padding: 0.5rem;
  text-align: center;
  opacity: 0.6;
  font-size: 0.875rem;
}
main#configurator .content .combobox-empty[hidden] {
  display: none;
}
main#configurator .content .option.preview .photo-input {
  display: none;
}
main#configurator .content .option.preview .photo-drop {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: clamp(1.375rem, 1.202rem + 0.769vw, 2.125rem);
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  background: #f8f6f6;
  border: 2px dashed rgba(142, 39, 11, 0.2509803922);
  transition: border-color 150ms, background 150ms;
}
main#configurator .content .option.preview .photo-drop:hover, main#configurator .content .option.preview .photo-drop:focus-visible, main#configurator .content .option.preview .photo-drop.is-over {
  border-color: var(--c-red);
  background: rgba(240, 78, 34, 0.0392156863);
}
main#configurator .content .option.preview .photo-drop strong {
  font-size: clamp(0.938rem, 0.894rem + 0.192vw, 1.125rem);
}
main#configurator .content .option.preview .photo-drop small {
  opacity: 0.7;
  font-size: 0.75rem;
}
main#configurator .content .option.preview .photo-drop[hidden] {
  display: none;
}
main#configurator .content .option.preview .photo-err {
  color: var(--c-red);
  font-size: 0.8125rem;
  margin-block-start: 0.5rem;
}
main#configurator .content .option.preview .photo-err[hidden] {
  display: none;
}
main#configurator .content .option.preview .stage-wrap[hidden] {
  display: none;
}
main#configurator .content .option.preview .stage {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  line-height: 0;
  background: #1a1a1a;
  border: 1px solid var(--c-outline);
  touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
main#configurator .content .option.preview .stage .photo-bg {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(70dvh, 38.75rem);
}
main#configurator .content .option.preview .stage .door-layer {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: 0 0;
  max-width: none;
  height: auto;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 0.375rem 0.75rem rgba(0, 0, 0, 0.3490196078));
  transition: opacity 120ms;
}
main#configurator .content .option.preview .stage.is-adjusting .door-layer {
  opacity: 0.4;
}
main#configurator .content .option.preview .stage .corner,
main#configurator .content .option.preview .stage .quad {
  transition: opacity 300ms;
}
main#configurator .content .option.preview .stage.is-idle .corner,
main#configurator .content .option.preview .stage.is-idle .quad {
  opacity: 0;
}
main#configurator .content .option.preview .stage.is-idle .corner {
  pointer-events: none;
}
main#configurator .content .option.preview .stage.is-idle:focus-within .corner,
main#configurator .content .option.preview .stage.is-idle:focus-within .quad {
  opacity: 1;
}
main#configurator .content .option.preview .stage.is-idle:focus-within .corner {
  pointer-events: auto;
}
@media (hover: hover) {
  main#configurator .content .option.preview .stage.is-idle:hover .corner,
  main#configurator .content .option.preview .stage.is-idle:hover .quad {
    opacity: 1;
  }
  main#configurator .content .option.preview .stage.is-idle:hover .corner {
    pointer-events: auto;
  }
}
main#configurator .content .option.preview .stage .quad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
main#configurator .content .option.preview .stage .quad polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1.5;
  stroke-dasharray: 7 5;
}
main#configurator .content .option.preview .stage .corner {
  position: absolute;
  box-sizing: border-box;
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  margin: 0;
  translate: -50% -50%;
  border-radius: 50%;
  border: 0.125rem solid #fff;
  background: var(--c-red);
  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.6509803922);
  cursor: grab;
  touch-action: none;
}
main#configurator .content .option.preview .stage .corner::before {
  content: "";
  position: absolute;
  inset: -0.8125rem;
}
main#configurator .content .option.preview .stage .corner:hover, main#configurator .content .option.preview .stage .corner:focus-visible {
  scale: 1.25;
}
main#configurator .content .option.preview .stage .corner.is-dragging {
  cursor: grabbing;
  scale: 1.35;
}
main#configurator .content .option.preview .stage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-block-start: 0.875rem;
  font-size: 0.875rem;
}
main#configurator .content .option.preview .stage-tools .tool-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
main#configurator .content .option.preview .stage-tools .tool-group label {
  gap: 0.3125rem;
  padding: 0;
}
main#configurator .content .option.preview .stage-tools .tool-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  opacity: 0.7;
}
main#configurator .content .option.preview .stage-tools .tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}
main#configurator .content .option.preview .stage-tools .tool-actions button {
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.4375rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(142, 39, 11, 0.2509803922);
  color: inherit;
}
main#configurator .content .option.preview .stage-tools .tool-actions button:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
main#configurator .content .option.preview .photo-note {
  margin-block-start: 0.625rem;
  font-size: 0.75rem;
  opacity: 0.7;
}

@keyframes gate-spin {
  to {
    rotate: 360deg;
  }
}/*# sourceMappingURL=configurator-kalkulacka.css.map */