html, body { margin: 0; padding: 0; background: #f5f8fd; }
  body { min-height: 100vh; font-family: Arial, Helvetica, sans-serif;}

  :root {
    --af-navy: #061947;
    --af-navy-2: #0a255f;
    --af-blue: #2196f3;
    --af-blue-dark: #1976d2;
    --af-orange: #f59321;
    --af-orange-dark: #da7f15;
    --af-card: #ffffff;
    --af-line: #dfe6f1;
    --af-soft: #f7f9fd;
    --af-text: #0d1b3e;
    --af-muted: #687590;
    --af-radius: 18px;
    --af-shadow-soft: 0 8px 24px rgba(6, 25, 71, .07);
  }

.container {
  width: 1440px;max-width: 100%;
  margin: 0 auto;
}


  .af-door-calc, .af-door-calc * { box-sizing: border-box; }
  .af-door-calc { width: 100%; margin: 0px auto; color: var(--af-text); max-width: 1440px; }
  .af-door-calc-copy, .af-door-calc-copy * { box-sizing: border-box; }
  .af-door-calc-copy { max-width: 1440px; margin: 10px auto; color: var(--af-text);  }
  .af-door-calc-copy__inner { background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); border: 1px solid var(--af-line); border-radius: 24px; padding: 34px 36px; box-shadow: 0 10px 28px rgba(6, 25, 71, .05); }
  .af-door-calc-copy h1 { margin: 0 0 18px; font-size: 34px; line-height: 1.12; color: #082154; }
  .af-door-calc-copy h2 { margin: 28px 0 14px; font-size: 24px; line-height: 1.2; color: #082154; }
  .af-door-calc-copy p, li {  font-size: 17px; line-height: 1.5; color: #41506f; }
  .af-door-calc-copy__callout { margin: 26px 0; padding: 24px 26px; border-radius: 20px; background: linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%); border: 1px solid #d8e6fb; }
  .af-door-calc-copy__callout ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .af-door-calc-copy__callout li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.6; color: #2b3a58; }
  .af-door-calc-copy__callout li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, #35a0f6 0%, #f59321 100%); }
  .af-door-calc__layout { display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: 28px; align-items: start; }
  .af-door-calc button, .af-door-calc input { font: inherit; }
  .af-door-calc__main { background: var(--af-card); border: 1px solid var(--af-line); border-radius: var(--af-radius); box-shadow: var(--af-shadow-soft); overflow: hidden; }
  .af-showroom { background: #fff; border: 1px solid var(--af-line); border-radius: 22px; box-shadow: var(--af-shadow-soft); padding: 24px 24px 28px; position: sticky; top: 20px; overflow: hidden; }

  .af-showroom > * { position: relative; z-index: 1; }
  .af-showroom__eyebrow { color: var(--af-orange); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
  .af-showroom h3 { font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
  .af-showroom p { margin: 0; color: var(--af-muted); }
  .af-showroom__slider { margin-top: 16px; }
  .af-showroom__frame { aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #edf3fd; box-shadow: inset 0 0 0 1px rgba(6,25,71,.06); }
  .af-showroom__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease; }
  .af-showroom__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 16px 8px 6px; }
  .af-showroom__dots button { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #d4dbe8; padding: 0; cursor: pointer; transition: .2s ease; }
  .af-showroom__dots button.is-active { background: var(--af-blue); transform: scale(1.05); }
  .af-showroom__info { margin-top: 18px; padding: 18px 16px 0; text-align: center; }
  .af-showroom__info strong { display: block; font-size: 15px; margin-bottom: 6px; color: var(--af-text); }
  .af-showroom__info p + strong { margin-top: 22px; }
  .af-showroom__info a { color: var(--af-text); text-decoration: none; }
  .af-showroom__links { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
  .af-showroom__links a { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eff5ff; color: var(--af-blue-dark); font-weight: 900; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(33,150,243,.08); transition: .2s ease; }
  .af-showroom__links a svg { width: 28px; height: 28px; fill: currentColor; }
  .af-showroom__links a:hover { background: var(--af-blue); color: #fff; transform: translateY(-1px); }
  .af-door-calc__head { display: flex; justify-content: flex-start; gap: 40px; padding: 24px 28px 16px; }
  .af-door-calc__eyebrow { display: inline-flex; margin-bottom: 8px; color: var(--af-orange); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
  .af-door-calc h1, .af-door-calc h2, .af-door-calc h3, .af-door-calc p { margin: 0; }
  .af-door-calc h1, .af-door-calc h2 { font-size: 27px; line-height: 1.18; margin: 26px 0 10px 0; }
  .af-door-calc__head p, .af-door-calc__panel-head p, .af-result-price p, .af-privacy { color: var(--af-muted); line-height: 1.45; }
  .af-door-calc__badge { flex: 0 0 auto; align-self: flex-start; padding: 9px 12px; border-radius: 999px; background: #fff5e8; color: var(--af-orange-dark); font-weight: 700; font-size: 13px; }

  .af-door-calc__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 20px 28px 60px ; border: 1px solid var(--af-line); border-radius: 14px; overflow: hidden; background: #fff; }
  .af-door-calc__steps { scrollbar-width: thin; scrollbar-color: var(--af-orange) #dfe8f6; }
  .af-door-calc__steps::-webkit-scrollbar { height: 6px; }
  .af-door-calc__steps::-webkit-scrollbar-track { background: #dfe8f6; border-radius: 999px; }
  .af-door-calc__steps::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--af-blue) 0%, var(--af-orange) 100%); border-radius: 999px; }
  .af-door-calc__steps::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, var(--af-blue-dark) 0%, var(--af-orange-dark) 100%); }
  .af-door-calc__step { border: 0; border-right: 1px solid var(--af-line); background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 7px; color: var(--af-muted); cursor: pointer; transition: .2s ease; }
  .af-door-calc__step:last-child { border-right: 0; }
  .af-door-calc__step span { width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #b7c1d2; color: #fff; font-weight: 800; font-size: 12px; flex: 0 0 auto; }
  .af-door-calc__step b { font-size: 12px; white-space: nowrap; }
  .af-door-calc__step.is-active { background: #f2f8ff; color: var(--af-blue); box-shadow: inset 0 0 0 1px rgba(33, 150, 243, .25); }
  .af-door-calc__step.is-active span, .af-door-calc__step.is-done span { background: var(--af-blue); }
  .af-door-calc__step.is-done { color: var(--af-text); }

  .af-door-calc__form { padding: 0 28px 24px; }
  .af-door-calc__panel { display: none; min-height: 390px; }
  .af-door-calc__panel.is-active { display: block; animation: afFade .22s ease; }
  @keyframes afFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
  .af-door-calc__panel-head { margin-bottom: 18px; }
  .af-door-calc__panel-head h3 { font-size: 20px; margin-bottom: 7px; }

  .af-door-calc__cards { display: grid; gap: 18px; }
  .af-door-calc__cards--construction, .af-door-calc__cards--ei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .af-door-option, .af-chip-card, .af-extra, .af-service { position: relative; cursor: pointer; user-select: none; }
  .af-door-option input, .af-chip-card input, .af-extra input, .af-service input { position: absolute; opacity: 0; pointer-events: none; }

  .af-door-option { min-height: 250px; border: 1px solid var(--af-line); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #aab3c2; transition: .2s ease; }
  .af-door-option:hover, .af-chip-card:hover, .af-extra:hover, .af-service:hover { border-color: rgba(33,150,243,.35); box-shadow: 0 10px 22px rgba(6,25,71,.08); transform: translateY(-1px); }
  .af-door-option.is-selected { color: var(--af-blue); border-color: var(--af-blue); background: linear-gradient(180deg,#f6fbff 0%,#fff 100%); box-shadow: 0 4px 4px rgba(33,150,243,.13); }
  .af-door-svg { width: 142px; height: 148px; display: flex; align-items: center; justify-content: center; }
  .af-door-svg svg { width: 100%; height: 100%; }
  .af-door-option strong { color: var(--af-text); font-size: 16px; }
  .af-door-option em { font-style: normal; border: 1px solid var(--af-line); border-radius: 999px; padding: 7px 16px; color: var(--af-text); font-weight: 700; font-size: 13px; }
  .af-door-option.is-selected em { border-color: var(--af-blue); background: var(--af-blue); color: #fff; }
  .af-door-option__check { position: absolute; right: 18px; bottom: 72px; width: 38px; height: 38px; border-radius: 50%; background: var(--af-orange); color: #fff; display: none; align-items: center; justify-content: center; font-weight: 900; box-shadow: 0 10px 18px rgba(245,147,33,.22); }
  .af-door-option.is-selected .af-door-option__check { display: flex; }

  .af-step1-bottom { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(320px, 1fr); gap: 28px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--af-line); align-items: start; }
  .af-door-calc__subblock { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--af-line); }
  .af-door-calc__subblock--step1 { margin-top: 0; padding-top: 0; border-top: 0; }
  .af-size-layout { display: grid; grid-template-columns: minmax(280px, 1fr) 72px minmax(280px, 1fr); gap: 22px; align-items: center; }
  .af-size-card { border: 1px solid var(--af-line); border-radius: 16px; background: #fff; padding: 18px; }
  .af-size-card.is-active { border-color: #d7e6fb; box-shadow: 0 10px 24px rgba(33,150,243,.06); }
  .af-size-card__title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; text-transform: uppercase; }
  .af-size-card__title span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b7c1d2; background: #fff; flex: 0 0 auto; }
  .af-size-card__title b { font-size: 18px; line-height: 1.1; }
  .af-size-card__title--active span { border-color: var(--af-orange); background: var(--af-orange); position: relative; }
  .af-size-card__title--active span::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 900; }
  .af-size-layout__divider { text-align: center; font-size: 18px; font-weight: 900; color: #111; letter-spacing: .04em; }
  .af-standard-sizes { display: grid; gap: 12px; }
  .af-standard-size { border: 1px solid var(--af-line); border-radius: 14px; background: #fff; padding: 14px 16px; text-align: left; color: var(--af-text); font-weight: 500; font-size: 18px; cursor: pointer; transition: .2s ease; }
  .af-standard-size small { display: block; margin-top: 4px; color: var(--af-muted); font-size: 12px; font-weight: 600; }
  .af-standard-size:hover { border-color: rgba(33,150,243,.35); box-shadow: 0 10px 22px rgba(6,25,71,.08); transform: translateY(-1px); }
  .af-standard-size.is-selected { border-color: var(--af-blue); background: #eef5ff; color: var(--af-blue-dark); box-shadow: none; }
  .af-standard-size.is-selected small { color: var(--af-blue); }
  .af-door-calc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .af-door-calc__grid--sizes { grid-template-columns: 1fr; }
  .af-field--qty { max-width: 240px; }
  .af-field--step1, .af-segment--step1 { max-width: none; }
  .af-label-title--step1, .af-field--step1 > span { font-size: 16px; font-weight: 900; text-transform: uppercase; margin-bottom: 14px; }
  .af-field span, .af-lead-form span, .af-label-title { display: block; color: var(--af-text); font-weight: 700; margin-bottom: 8px; font-size: 14px; }
  .af-field input, .af-lead-form input { width: 100%; height: 48px; border: 1px solid var(--af-line); border-radius: 10px; padding: 0 14px; color: var(--af-text); background: #fff; outline: none; transition: .2s ease; }
  .af-field input:focus, .af-lead-form input:focus { border-color: var(--af-blue); box-shadow: 0 0 0 4px rgba(33,150,243,.08); }
  .af-field input._error, .af-lead-form input._error { border-color: #ef3b2d; box-shadow: 0 0 0 1px #ef3b2d; }
  .af-field input._error:focus, .af-lead-form input._error:focus { border-color: #ef3b2d; box-shadow: 0 0 0 4px rgba(239,59,45,.12); }
  .af-field input.af-input-error { border-color: #ef3b2d; box-shadow: 0 0 0 1px #ef3b2d; }
  .af-field input.af-input-error:focus { border-color: #ef3b2d; box-shadow: 0 0 0 4px rgba(239,59,45,.12); }
  .af-door-calc__hint { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f4f8ff; color: var(--af-muted); border: 1px solid #dbe7f8; line-height: 1.45; }

  .af-segment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .af-segment--wide { max-width: 620px; }
  .af-segment label { position: relative; cursor: pointer; }
  .af-segment input { position: absolute; opacity: 0; }
  .af-segment span { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; border: 1px solid var(--af-line); background: #fff; color: var(--af-text); font-weight: 700; }
  .af-segment input:checked + span { background: #f2f8ff; border-color: var(--af-blue); color: var(--af-blue); box-shadow: 0 4px 4px rgba(33,150,243,.15); }

  .af-chip-card { border: 1px solid var(--af-line); border-radius: 14px; min-height: 130px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: .2s ease; }
  .af-chip-card span { font-size: 30px; font-weight: 900; color: var(--af-text); }
  .af-chip-card small { color: var(--af-muted); }
  .af-chip-card.is-selected { background: #f2f8ff; border-color: var(--af-blue); }
  .af-chip-card.is-selected span { color: var(--af-blue); }

  .af-color-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: end; margin-bottom: 18px; }
  .af-color-selected { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .af-color-selected > span { font-size: 16px; font-weight: 900; color: var(--af-text); text-transform: uppercase; }
  .af-color-selected strong { min-width: 80px; height: 40px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; }
  .af-color-select { display: grid; gap: 10px; }
  .af-color-select span { font-size: 14px; color: var(--af-text); text-align: right; }
  .af-color-select select { width: 100%; height: 44px; border: 1px solid var(--af-line); border-radius: 10px; padding: 0 14px; background: #fff; color: var(--af-text); font: inherit; outline: none; }
  .af-color-select select:focus { border-color: var(--af-blue); box-shadow: 0 0 0 4px rgba(33,150,243,.08); }
  .af-color-picker { display: grid; grid-template-columns: 240px 1fr; gap: 20px; border: 1px solid var(--af-line); border-radius: 14px; padding: 18px; background: #fff; align-items: start; }
  .af-color-picker__group-label { display: flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 10px; background: #eef5ff; color: var(--af-blue); font-size: 16px; font-weight: 900; }
  .af-color-picker__palette { display: grid; grid-template-columns: repeat(6, minmax(70px, 1fr)); gap: 10px; align-content: start; }
  .af-color-swatch { height: 40px; border: 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transition: .2s ease; }
  .af-color-swatch:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 2px var(--af-blue), 0 8px 18px rgba(6,25,71,.12); }
  .af-color-swatch.is-selected { box-shadow: inset 0 0 0 3px var(--af-blue), 0 8px 18px rgba(6,25,71,.12); }

  .af-extra-grid, .af-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .af-extra, .af-service { min-height: 76px; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; border: 1px solid var(--af-line); border-radius: 13px; padding: 12px 14px; background: #fff; transition: .2s ease; }
  .af-extra > span, .af-service > span { width: 24px; height: 24px; border: 1px solid #b9c3d3; border-radius: 7px; grid-row: span 2; }
  .af-extra b, .af-service b { font-size: 15px; }
  .af-extra small, .af-service small { color: var(--af-muted); line-height: 1.35; }
  .af-extra.is-selected, .af-service.is-selected { border-color: var(--af-blue); background: #f6fbff; }
  .af-extra.is-selected > span, .af-service.is-selected > span { background: var(--af-blue); border-color: var(--af-blue); position: relative; }
  .af-extra.is-selected > span::after, .af-service.is-selected > span::after { content: "✓"; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; }
  .af-service.is-included { background: #fffaf3; border-color: #ffe0b7; }
  .af-service.is-included > span { background: var(--af-orange); border-color: var(--af-orange); position: relative; }
  .af-service.is-included > span::after { content: "✓"; color: #fff; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; }

  .af-door-calc__actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 30px;    border-top: 1px solid #eee;    padding-top: 30px; }
  .af-btn { min-height: 48px; border-radius: 11px; border: 1px solid transparent; padding: 0 24px; font-weight: 800; cursor: pointer; transition: .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .af-btn--primary { background: linear-gradient(180deg,#35a0f6 0%,var(--af-blue) 100%); color: #fff; box-shadow: 0 10px 20px rgba(33,150,243,.22); }
  .af-btn--primary:hover { background: linear-gradient(180deg,#4bacf7 0%,var(--af-blue-dark) 100%); transform: translateY(-1px); }
  .af-btn--accent { background: linear-gradient(180deg,#f8a53e 0%,var(--af-orange) 100%); color: #fff; box-shadow: 0 10px 20px rgba(245,147,33,.22); }
  .af-btn--accent:hover { background: linear-gradient(180deg,#f9b35d 0%,var(--af-orange-dark) 100%); transform: translateY(-1px); }
  .af-btn:disabled { opacity: .7; cursor: wait; transform: none; }
  .af-btn--ghost { background: #fff; border-color: var(--af-line); color: var(--af-muted); }
  .af-btn--ghost:hover { border-color: var(--af-blue); color: var(--af-blue); }
  .af-btn--full { width: 100%; }

  .af-size-error { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #fff3f1; color: #c6422d; border: 1px solid #f3c1b8; font-weight: 700; line-height: 1.4; }
  .af-size-error.is-visible { display: block; }

  .af-result-layout { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 24px; max-width: 1080px; }
  .af-result-aside { display: grid; gap: 20px; align-content: start; }
  .af-result-card { background: #fff; border: 1px solid var(--af-line); border-radius: 20px; padding: 22px; box-shadow: 0 10px 26px rgba(6, 25, 71, .05); }
  .af-result-card--summary { padding-top: 18px; }
  .af-result-card--price { text-align: center; padding-top: 18px; padding-bottom: 28px; }
  .af-result-smtext {    font-size: 12px;    font-style: italic;}
  .af-result-vat { display: block; margin-top: -10px; margin-bottom: 16px; color: var(--af-muted); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .af-result-card--lead { padding-top: 18px; }
  .af-result-card h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0; }
  .af-result-card h3 span { color: var(--af-blue); }
  .af-result-list { margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
  .af-result-list div { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid #eef2f7; padding: 14px 0; }
  .af-result-list dt { color: var(--af-muted); }
  .af-result-list dd { margin: 0; color: var(--af-text); font-weight: 600; text-align: right; }
  .af-result-list dd[data-result-construction], .af-result-list dd[data-result-ei], .af-result-list dd[data-result-color] { color: var(--af-blue); }
  .af-result-price { padding: 22px 8px 0; }
  .af-result-price strong { display: block; color: var(--af-orange); font-size: 40px; line-height: 1; letter-spacing: -.05em; margin-bottom: 22px; }
  .af-result-price p { max-width: 300px; margin: 0 auto; }
  .af-lead-form { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; margin-top: 18px; }
  .af-lead-form label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .af-lead-form input { height: 56px; border-radius: 12px; padding: 0 18px; font-size: 16px; }
  .af-privacy { grid-column: 1 / -1; font-size: 12px; }
  .af-form-message { grid-column: 1 / -1; display: none; padding: 11px 12px; border-radius: 10px; background: #eef9f0; color: #1f7a35; font-weight: 700; font-size: 13px; }
  .af-form-message.is-visible { display: block; }
  .af-form-message.is-error { background: #fff3f1; color: #c6422d; }

  @media (max-width: 1100px) {
    .af-door-calc__layout { grid-template-columns: 1fr; }
    .af-showroom { position: static; }
    .af-door-calc__steps { display: flex; overflow-x: auto; }
    .af-door-calc__step { min-width: 150px; justify-content: flex-start; padding-left: 14px; }
  }
  @media (max-width: 860px) {
    .af-door-calc__head { flex-direction: column; }
    .af-door-calc__cards--construction, .af-door-calc__cards--ei, .af-door-calc__grid, .af-extra-grid, .af-service-grid, .af-door-calc__grid--sizes, .af-step1-bottom { grid-template-columns: 1fr; }
    .af-size-layout { grid-template-columns: 1fr; gap: 16px; }
    .af-result-layout { grid-template-columns: 1fr; }
    .af-color-toolbar, .af-color-picker { grid-template-columns: 1fr; }
    .af-color-select span { text-align: left; }
    .af-color-picker__palette { grid-template-columns: repeat(3, minmax(70px, 1fr)); }
    .af-size-layout__divider { display: none; }
  }
  @media (max-width: 560px) {
    .af-door-calc__head, .af-door-calc__form { padding-left: 16px; padding-right: 16px; }
    .af-door-calc__steps { margin-left: 16px; margin-right: 16px; }
     h1,  h2 { font-size: 22px; }
    .af-door-calc-copy { margin-bottom: 40px; }
    .af-door-calc-copy__inner { padding: 24px 20px; border-radius: 18px; }
    .af-door-calc-copy h1 { font-size: 28px; }
    .af-door-calc-copy h2 { font-size: 22px; }
    .af-door-calc-copy p { font-size: 16px; line-height: 1.2; }
    .af-door-option { min-height: 230px; }
    .af-door-calc__actions { flex-direction: column-reverse; }
    .af-btn { width: 100%; }
    .af-color-picker__palette { grid-template-columns: repeat(2, minmax(70px, 1fr)); }
  }
.bg-breadcrumb {
    background: #cdd5e7;
}

.bg-breadcrumb .breadcrumb-wrapper{
    padding: 6px 0 0 0;
}
ul.breadcrumb {    
    list-style: none;    
    position: relative;
}

ul.breadcrumb li {
    display: inline;
    font-size: 14px;
    color: #939cbd;
}

ul.breadcrumb li+li:before {
    padding: 8px;
    content: "»";
}

ul.breadcrumb li a {
    color: #939cbd;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: #0275d8;
    text-decoration: underline;
}

.breadcrumb-item .material-symbols {
    font-size: 16px;
}

ul.breadcrumb::before {
    content: url(../img/icons/g-icons/home.svg);
    position: absolute;
    
    left: 18px;
    display: block;
    width: 16px;
    height: 16px;
}

@media (max-width: 992px) {
    ul.breadcrumb::before {
        display: none;
    }

    ul.breadcrumb {
        padding: 10px 0px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    ul.breadcrumb>li.breadcrumb-item {
        display: none;
    }

    .breadcrumb-item.active {
        display: none;
    }

    ul.breadcrumb>li:nth-last-child(2) {
        display: block;
    }

    ul.breadcrumb>li:nth-last-child(2):before {
        padding: 8px 5px 8px 0;
        content: "<";
    }
	 li.sf_crumb.active {
        display: none;
    }
}