.door-calc,
    .door-calc * { box-sizing: border-box; }
    .door-calc button,
    .door-calc input,
    .door-calc select { font: inherit; }
    .door-calc button { cursor: pointer; }

    .door-calc {
      width: 100%;
      margin: 0;
      padding: 30px 0;
    }
    .door-calc__head {
      position: relative;
      margin-bottom: 28px;
      padding: 28px 32px;
      border: 1px solid rgba(79, 199, 181, .24);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 5px 5px rgba(0, 0, 0, .06), 0 5px 5px rgba(0, 0, 0, .03);
      overflow: hidden;
    }
    .door-calc__head::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 7px;
      background: linear-gradient(var(--color-one), var(--color-two), var(--color-red));
    }
    .door-calc__head::after {
      content: "Онлайн-расчёт";
      position: absolute;
      top: 24px;
      right: 24px;
      padding: 8px 12px;
      background: var(--color-red);
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .door-calc__title {
        max-width: calc(100% - 150px);
        margin: 0 0 16px;
        color: #000;
        font-size: 28px;
        font-weight: 700;
        line-height: 48px;
    }
    .door-calc__lead {
      max-width: 1050px;
      margin: 0;
      color: var(--color-three);
      font-size: 16px;
    }
    .door-calc__layout {
      display: grid;
      grid-template-columns: minmax(440px, 5fr) minmax(540px, 7fr);
      gap: 28px;
      align-items: start;
    }
    .door-calc__panel {
      min-width: 0;
      padding: 24px;
      border: 1px solid rgba(79, 199, 181, .20);
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 5px 5px rgba(0, 0, 0, .06), 0 5px 5px rgba(0, 0, 0, .03);
    }
    .door-calc__panel::before {
      content: "";
      display: block;
      height: 6px;
      margin: -24px -24px 22px;
      background: linear-gradient(90deg, var(--color-one), var(--color-two));
    }
    .door-calc__panel.door-calc__config::before {
      background: linear-gradient(90deg, var(--color-two), var(--color-one), var(--color-red));
    }
    .door-calc__section-title {
      margin: 0 0 14px;
      color: #000;
      font-size: 20px;
      line-height: 1.35;
    }
    .door-calc__door-types {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 22px;
    }
    .door-calc__type-card {
      position: relative;
      min-height: 106px;
      padding: 10px 7px 13px;
      border: 1px solid rgba(78, 78, 78, .14);
      background: #fff;
      color: #25292a;
      box-shadow: 0 7px 20px rgba(0, 0, 0, .04);
      transition: .18s ease;
      overflow: hidden;
    }
    .door-calc__type-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 4px;
      background: var(--color-one);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .door-calc__type-card:hover {
      transform: translateY(-2px);
      border-color: var(--color-one);
      box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    }
    .door-calc__type-card.door-calc__active {
      border-color: var(--color-one);
      background: linear-gradient(180deg, rgba(79, 199, 181, .15), #fff 72%);
      color: #000;
    }
    .door-calc__type-card.door-calc__active::after { transform: scaleX(1); }
    .door-calc__type-card img {
      display: block;
      width: 100%;
      height: 60px;
      margin: 0 auto 5px;
      object-fit: contain;
    }
    .door-calc__type-card span {
      display: block;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
    }

    .door-calc__preview {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 470px;
      padding: 45px 60px 70px 82px;
      border: 1px solid rgba(79, 199, 181, .24);
      background:
        linear-gradient(90deg, rgba(79, 199, 181, .07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(79, 199, 181, .07) 1px, transparent 1px),
        linear-gradient(145deg, #fff, #f4fffd);
      background-size: 28px 28px, 28px 28px, auto;
      box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .66);
      overflow: hidden;
    }
    .door-calc__door-preview {
      width: 100%;
      height: 335px;
      object-fit: contain;
      filter: drop-shadow(0 22px 30px rgba(41, 78, 72, .20));
    }
    .door-calc__range-base {
      position: absolute;
      z-index: 2;
      border-radius: 99px;
      background: #d9dedd;
    }
    .door-calc__range-base.door-calc__height { top: 48px; bottom: 86px; left: 38px; width: 6px; }
    .door-calc__range-base.door-calc__width { right: 62px; bottom: 37px; left: 86px; height: 6px; }
    .door-calc__range-control {
      position: absolute;
      z-index: 4;
      appearance: none;
      -webkit-appearance: none;
      height: 22px;
      background: transparent;
      accent-color: var(--color-one);
    }
    .door-calc__range-control::-webkit-slider-thumb {
      width: 21px;
      height: 21px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--color-one);
      box-shadow: 0 2px 9px rgba(0, 0, 0, .25);
      -webkit-appearance: none;
    }
    .door-calc__range-control::-moz-range-thumb {
      width: 17px;
      height: 17px;
      border: 3px solid #fff;
      border-radius: 50%;
      background: var(--color-one);
      box-shadow: 0 2px 9px rgba(0, 0, 0, .25);
    }
    .door-calc__range-width {
      right: 62px;
      bottom: 29px;
      left: 86px;
      width: calc(100% - 148px);
    }
    .door-calc__range-height {
      top: 214px;
      left: -106px;
      width: 300px;
      transform: rotate(-90deg);
    }
    .door-calc__range-tip {
      position: absolute;
      z-index: 5;
      padding: 5px 9px;
      background: var(--color-red);
      color: #fff;
      box-shadow: 0 8px 20px rgba(229, 0, 64, .2);
      font-size: 13px;
      font-weight: 700;
      pointer-events: none;
    }
    .door-calc__range-tip.door-calc__width { bottom: 56px; left: 50%; transform: translateX(-50%); }
    .door-calc__range-tip.door-calc__height {
      top: 50%;
      right: 17px;
      transform: translateY(-50%);
      writing-mode: vertical-rl;
    }
    .door-calc__preview-note {
      position: absolute;
      top: 16px;
      left: 18px;
      color: #65706d;
      font-size: 12px;
    }

    .door-calc__fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }
    .door-calc__field label {
      display: block;
      margin-bottom: 6px;
      color: #4d5654;
      font-size: 13px;
      font-weight: 700;
    }
    .door-calc__field input, .door-calc__field select {
      width: 100%;
      height: 46px;
      padding: 0 12px;
      border: 1px solid #d9dfdd;
      border-radius: 0;
      outline: none;
      background: #fff;
      color: #1e2324;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    .door-calc__field input:focus, .door-calc__field select:focus {
      border-color: var(--color-one);
      box-shadow: 0 0 0 3px rgba(79, 199, 181, .14);
    }
    .door-calc__field select:disabled {
      color: #8a9290;
      background: #f2f4f4;
    }

    .door-calc__stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin: -5px 0 22px;
      padding: 14px;
      background: #f6f9f8;
      border: 1px solid #e6ecea;
    }
    .door-calc__stat-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 5px;
      font-size: 11px;
      color: #58615f;
    }
    .door-calc__stat-head b { color: #222; }
    .door-calc__stat-bar { height: 5px; background: #dfe7e5; overflow: hidden; }
    .door-calc__stat-bar i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--color-one), var(--color-two));
      transition: width .2s ease;
    }
    .door-calc__choice-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 22px;
    }
    .door-calc__choice {
      position: relative;
      min-height: 62px;
      padding: 10px 10px 10px 36px;
      border: 1px solid #dfe4e3;
      background: #fff;
      text-align: left;
      line-height: 1.25;
      transition: .15s ease;
    }
    .door-calc__choice::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 12px;
      width: 13px;
      height: 13px;
      border: 2px solid #bbc4c2;
      border-radius: 50%;
      transform: translateY(-50%);
    }
    .door-calc__choice.door-calc__active {
      border-color: var(--color-one);
      background: rgba(79, 199, 181, .09);
    }
    .door-calc__choice.door-calc__active::before {
      border-color: var(--color-one);
      box-shadow: inset 0 0 0 3px #fff;
      background: var(--color-one);
    }
    .door-calc__choice strong { display: block; font-size: 13px; }
    .door-calc__choice small { color: #6c7472; font-size: 11px; }

    .door-calc__checks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 22px;
    }
    .door-calc__check {
      display: flex;
      min-height: 58px;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      border: 1px solid #e0e5e4;
      background: #fff;
      transition: .15s ease;
    }
    .door-calc__check:has(input:checked) {
      border-color: rgba(79, 199, 181, .85);
      background: rgba(79, 199, 181, .08);
    }
    .door-calc__check input {
      width: 21px;
      height: 21px;
      min-width: 21px;
      margin: 1px 0 0;
      accent-color: var(--color-red);
    }
    .door-calc__check-title {
      display: block;
      color: #222;
      font-size: 13px;
      font-weight: 700;
    }
    .door-calc__check-price {
      display: block;
      margin-top: 2px;
      color: #747c7a;
      font-size: 11px;
    }
    .door-calc__payment {
      padding: 18px;
      color: #fff;
      background: var(--color-dark-gray);
    }
    .door-calc__payment-list {
      display: grid;
      grid-template-columns: 1.25fr repeat(3, 1fr);
      gap: 8px;
    }
    .door-calc__payment-item {
      padding: 11px;
      background: rgba(255,255,255,.08);
    }
    .door-calc__payment-item:first-child {
      background: linear-gradient(135deg, var(--color-two), #24766a);
    }
    .door-calc__payment-label { color: rgba(255,255,255,.74); font-size: 12px; }
    .door-calc__payment-value {
      margin-top: 2px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }
    .door-calc__total-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 15px;
      margin-top: 15px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.17);
    }
    .door-calc__total-label { color: rgba(255,255,255,.72); font-size: 13px; }
    .door-calc__total-value {
      color: #fff;
      font-size: 30px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }
    .door-calc__payment-btns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    .door-calc__btn {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 18px;
      border: 1px solid var(--color-one);
      border-radius: 0;
      background: var(--color-one);
      color: #fff;
      box-shadow: 0 10px 22px rgba(48, 151, 135, .18);
      font-weight: 700;
      text-decoration: none;
      transition: .15s ease;
    }
    .door-calc__btn:hover {
      transform: translateY(-1px);
      background: var(--color-two);
      border-color: var(--color-two);
    }
    .door-calc__btn.door-calc__primary {
      border-color: var(--color-red);
      background: var(--color-red);
      box-shadow: 0 10px 22px rgba(229, 0, 64, .17);
    }
    .door-calc__btn.door-calc__primary:hover { border-color: #bd0035; background: #bd0035; }
    .door-calc__fineprint {
      margin: 12px 0 0;
      color: rgba(255,255,255,.62);
      font-size: 11px;
    }

    .door-calc__cart {
      display: none;
      margin-top: 28px;
      padding: 24px;
      border: 1px solid rgba(79, 199, 181, .22);
      background: #fff;
      box-shadow: 0 5px 5px rgba(0, 0, 0, .06), 0 5px 5px rgba(0, 0, 0, .03);
    }
    .door-calc__cart.door-calc__show { display: block; }
    .door-calc__cart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 15px;
    }
    .door-calc__cart-head h2 { margin: 0; font-size: 22px; }
    .door-calc__cart-list { display: grid; gap: 8px; }
    .door-calc__cart-item {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 14px;
      align-items: center;
      padding: 13px 14px;
      border: 1px solid #e3e8e7;
      background: #fbfcfc;
    }
    .door-calc__cart-item b { display: block; font-size: 14px; }
    .door-calc__cart-item small { color: #68706e; }
    .door-calc__cart-price { font-size: 17px; font-weight: 800; white-space: nowrap; }
    .door-calc__remove {
      width: 34px;
      height: 34px;
      border: 1px solid #e0e4e3;
      background: #fff;
      color: var(--color-red);
      font-weight: 800;
    }
    .door-calc__cart-total {
      margin-top: 15px;
      text-align: right;
      font-size: 19px;
      font-weight: 800;
    }
    .door-calc__toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 50;
      max-width: 330px;
      padding: 13px 18px;
      background: #1f2826;
      color: #fff;
      box-shadow: 0 14px 34px rgba(0,0,0,.25);
      opacity: 0;
      transform: translateY(20px);
      pointer-events: none;
      transition: .22s ease;
    }
    .door-calc__toast.door-calc__show { opacity: 1; transform: translateY(0); }

    @media (max-width: 1100px) {
      .door-calc__layout { grid-template-columns: 1fr; }
      .door-calc__panel.door-calc__preview-panel { order: 1; }
      .door-calc__panel.door-calc__config { order: 2; }
      .door-calc__door-preview { height: 380px; }
    }
    @media (max-width: 720px) {
      .door-calc { width: 100%; margin: 0; padding: 10px 0 24px; }
      .door-calc__head { padding: 22px 18px 20px; }
      .door-calc__head::after { position: static; display: inline-block; margin: 14px 0 0; }
      .door-calc__title { max-width: none; }
      .door-calc__panel { padding: 16px; }
      .door-calc__panel::before { margin: -16px -16px 16px; }
      .door-calc__door-types {
        grid-auto-flow: column;
        grid-auto-columns: 39%;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 7px;
      }
      .door-calc__type-card { scroll-snap-align: start; }
      .door-calc__preview { min-height: 360px; padding: 35px 20px 65px; }
      .door-calc__door-preview { height: 265px; }
      .door-calc__range-base.door-calc__height, .door-calc__range-height, .door-calc__range-tip.door-calc__height { display: none; }
      .door-calc__range-base.door-calc__width { left: 25px; right: 25px; }
      .door-calc__range-width { left: 25px; right: 25px; width: calc(100% - 50px); }
      .door-calc__fields, .door-calc__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .door-calc__stats { grid-template-columns: 1fr; }
      .door-calc__choice-row { grid-template-columns: 1fr; }
      .door-calc__payment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .door-calc__payment-btns { grid-template-columns: 1fr; }
      .door-calc__cart-item { grid-template-columns: 1fr auto; }
      .door-calc__cart-price { grid-row: 2; }
      .door-calc__remove { grid-column: 2; grid-row: 1 / span 2; }
    }
    @media (max-width: 460px) {
      .door-calc__fields, .door-calc__checks { grid-template-columns: 1fr; }
      .door-calc__door-types { grid-auto-columns: 48%; }
      .door-calc__payment-list { grid-template-columns: 1fr 1fr; }
      .door-calc__total-row { align-items: flex-start; flex-direction: column; }
      .door-calc__total-value { font-size: 27px; }
    }

    /* Visual system of the balcony configurator */
    .door-calc {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 30px 0;
      overflow-x: hidden;
    }
    .door-calc,
    .door-calc * { box-sizing: border-box; }
    .door-calc .door-calc__head {
      position: relative;
      margin-bottom: 34px;
      padding: 28px 32px;
      border: 1px solid rgba(79, 199, 181, .20);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 5px 5px rgba(0, 0, 0, .06), 0 5px 5px rgba(0, 0, 0, .03);
      backdrop-filter: blur(8px);
    }
    .door-calc .door-calc__head::before {
      content: none;
      display: none;
    }
    .door-calc .door-calc__head::after {
      content: "SALE 5%";
      position: absolute;
      top: 24px;
      right: 24px;
      padding: 8px 12px;
      background: var(--color-red);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .door-calc .door-calc__calculator-description {
      max-width: calc(100% - 20px);
      color: var(--color-three);
      font-size: 16px;
      line-height: 24px;
    }
    .door-calc .door-calc__calculator-description p { margin: 0 0 12px; }
    .door-calc .door-calc__calculator-description p:last-child { margin-bottom: 0; }
    .door-calc .door-calc__wrap {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 28px;
      align-items: start;
      padding: 0;
    }
    .door-calc .door-calc__left,
    .door-calc .door-calc__right {
      position: relative;
      min-width: 0;
      padding: 24px;
      border: 1px solid rgba(79, 199, 181, .18);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 5px 5px rgba(0, 0, 0, .06), 0 5px 5px rgba(0, 0, 0, .03);
    }
    .door-calc .door-calc__left::before,
    .door-calc .door-calc__right::before {
      content: "";
      display: block;
      height: 6px;
      margin: -24px -24px 22px;
      background: linear-gradient(90deg, var(--color-one), var(--color-two));
    }
    .door-calc .door-calc__right::before {
      background: linear-gradient(90deg, var(--color-two), var(--color-one), var(--color-red));
    }
    .door-calc .door-calc__section-title {
      margin: 0 0 16px;
      color: #000;
      font-size: 20px;
      font-weight: 700;
      line-height: 28px;
    }

    .door-calc .door-calc__door-type-slider {
      position: relative;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) 38px;
      gap: 8px;
      align-items: stretch;
      max-width: 100%;
      margin-bottom: 24px;
      overflow: hidden;
    }
    .door-calc .door-calc__door-types {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 16px) / 3);
      grid-template-columns: none;
      gap: 8px;
      margin: 0;
      padding: 3px 0 8px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-color: var(--color-one) rgba(78, 78, 78, .12);
      scrollbar-width: thin;
    }
    .door-calc .door-calc__door-types::-webkit-scrollbar { height: 6px; }
    .door-calc .door-calc__door-types::-webkit-scrollbar-track { background: rgba(78, 78, 78, .12); }
    .door-calc .door-calc__door-types::-webkit-scrollbar-thumb { background: var(--color-one); }
    .door-calc .door-calc__type-card {
      position: relative;
      display: flex;
      min-width: 0;
      min-height: 94px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px;
      border: 1px solid rgba(78, 78, 78, .12);
      border-radius: 0;
      background: #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
      color: inherit;
      text-align: center;
      scroll-snap-align: center;
      overflow: hidden;
      transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease, background .15s ease;
    }
    .door-calc .door-calc__type-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 4px;
      background: var(--color-one);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .door-calc .door-calc__type-card:hover {
      transform: translateY(-2px);
      border-color: var(--color-one);
      box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    }
    .door-calc .door-calc__type-card:hover::after,
    .door-calc .door-calc__type-card.door-calc__active::after { transform: scaleX(1); }
    .door-calc .door-calc__type-card.door-calc__active {
      border-color: var(--color-one);
      background: linear-gradient(180deg, rgba(79, 199, 181, .14), #fff 72%);
      box-shadow: 0 16px 36px rgba(48, 151, 135, .14);
    }
    .door-calc .door-calc__type-card img {
      display: block;
      width: 100%;
      height: 48px;
      margin: 0 auto;
      object-fit: contain;
    }
    .door-calc .door-calc__type-card span {
      display: block;
      font-size: 13px;
      font-weight: 700;
      line-height: 18px;
    }
    .door-calc .door-calc__door-type-nav {
      display: flex;
      width: 38px;
      min-width: 38px;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(79, 199, 181, .22);
      border-radius: 0;
      background: #fff;
      color: var(--color-two);
      box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
      transition: .15s ease;
    }
    .door-calc .door-calc__door-type-nav:hover {
      transform: translateY(-1px);
      border-color: var(--color-one);
      background: var(--color-one);
      color: #fff;
      box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    }
    .door-calc .door-calc__door-type-nav svg { width: 22px; height: 22px; }
    .door-calc .door-calc__door-type-nav path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .door-calc .door-calc__preview {
      position: relative;
      display: flex;
      min-height: 382px;
      align-items: center;
      justify-content: center;
      padding: 54px 70px 64px;
      border: 1px solid rgba(79, 199, 181, .22);
      background:
        linear-gradient(90deg, rgba(79, 199, 181, .07) 1px, transparent 1px),
        linear-gradient(0deg, rgba(79, 199, 181, .07) 1px, transparent 1px),
        linear-gradient(145deg, #fff 0%, #f5fffd 100%);
      background-size: 28px 28px, 28px 28px, auto;
      box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .68);
      overflow: hidden;
    }
    .door-calc .door-calc__preview-inner {
      display: flex;
      width: 100%;
      height: 270px;
      align-items: center;
      justify-content: center;
    }
    .door-calc .door-calc__door-preview {
      width: 100%;
      max-width: 100%;
      height: 300px;
      max-height: 300px;
      object-fit: contain;
      filter: drop-shadow(0 22px 34px rgba(48, 151, 135, .18));
    }
    .door-calc .door-calc__range-base {
      position: absolute;
      z-index: 3;
      border-radius: 999px;
      background: #d9d9d9;
    }
    .door-calc .door-calc__range-base.door-calc__height {
      top: 40px;
      bottom: 86px;
      left: 38px;
      width: 6px;
    }
    .door-calc .door-calc__range-base.door-calc__width {
      right: 70px;
      bottom: 22px;
      left: 88px;
      height: 6px;
    }
    .door-calc .door-calc__range-control {
      position: absolute;
      z-index: 5;
      height: 22px;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      accent-color: var(--color-one);
      cursor: pointer;
    }
    .door-calc .door-calc__range-width {
      right: 70px;
      bottom: 15px;
      left: 88px;
      width: calc(100% - 158px);
    }
    .door-calc .door-calc__range-height {
      top: 164px;
      left: -96px;
      width: 270px;
      transform: rotate(-90deg);
      transform-origin: center;
    }
    .door-calc .door-calc__range-tip {
      position: absolute;
      z-index: 5;
      padding: 6px 10px;
      background: var(--color-red);
      box-shadow: 0 10px 24px rgba(229, 0, 64, .20);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      pointer-events: none;
    }
    .door-calc .door-calc__range-tip.door-calc__width {
      bottom: 35px;
      left: 50%;
      transform: translateX(-50%);
    }
    .door-calc .door-calc__range-tip.door-calc__height {
      top: 50%;
      right: 18px;
      transform: translateY(-50%);
      writing-mode: vertical-rl;
    }

    .door-calc .door-calc__toggle-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 20px;
    }
    .door-calc .door-calc__choice {
      position: relative;
      display: flex;
      min-height: 74px;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(78, 78, 78, .12);
      border-radius: 0;
      background: #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
      color: inherit;
      text-align: left;
      overflow: hidden;
      transition: .18s ease;
    }
    .door-calc .door-calc__choice::before { content: none; display: none; }
    .door-calc .door-calc__choice::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 4px;
      background: var(--color-one);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .door-calc .door-calc__choice:hover {
      transform: translateY(-2px);
      border-color: var(--color-one);
      box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    }
    .door-calc .door-calc__choice:hover::after,
    .door-calc .door-calc__choice.door-calc__active::after { transform: scaleX(1); }
    .door-calc .door-calc__choice.door-calc__active {
      border-color: var(--color-one);
      background: linear-gradient(180deg, rgba(79, 199, 181, .14), #fff 72%);
      box-shadow: 0 16px 36px rgba(48, 151, 135, .14);
    }
    .door-calc .door-calc__choice-icon {
        display: flex;
        width: 40px;
        height: 40px;
        min-width: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(79, 199, 181, .26);
        background: linear-gradient(135deg, #fff, #f5fffd);
        color: var(--color-two);
    }
    .door-calc .door-calc__choice-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    }
    .door-calc .door-calc__choice.door-calc__active .door-calc__choice-icon {
      border-color: var(--color-one);
      background: var(--color-one);
      color: #fff;
    }
    .door-calc .door-calc__choice strong {
      display: block;
      font-size: 14px;
      line-height: 19px;
    }
    .door-calc .door-calc__choice small {
      display: block;
      margin-top: 3px;
      color: var(--color-three);
      font-size: 12px;
      line-height: 16px;
    }
    .door-calc .door-calc__fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 24px;
      margin-bottom: 0;
    }
    .door-calc .door-calc__field label {
      display: block;
      margin-bottom: 6px;
      color: #3d3d3d;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
    }
    .door-calc .door-calc__field input,
    .door-calc .door-calc__field select {
      display: block;
      width: 100%;
      height: 48px;
      padding: 12px 16px;
      border: 1px solid #d9d9d9;
      border-radius: 0;
      outline: none;
      background-color: #fff;
      color: #000;
      box-shadow: none;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
    }
    .door-calc .door-calc__field input:focus,
    .door-calc .door-calc__field select:focus {
      border-color: var(--color-one);
      box-shadow: 0 0 0 3px rgba(79, 199, 181, .15);
    }
    .door-calc .door-calc__field select {
      padding-right: 42px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      background-size: 14px;
      appearance: none;
      -webkit-appearance: none;
    }
    .door-calc .door-calc__stats {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
      margin: 18px 0 28px;
      padding: 18px;
      border: 1px solid rgba(79, 199, 181, .14);
      background: linear-gradient(135deg, #f5f6f6, #fff);
    }
    .door-calc .door-calc__stats__item {
      display: grid;
      grid-template-columns: 26px 1fr 42px;
      flex: 1;
      min-width: 0;
      align-items: center;
      gap: 10px;
      color: var(--color-three);
      font-size: 14px;
    }
    .door-calc .door-calc__stats__icon {
      width: 18px;
      height: 18px;
      color: var(--color-two);
    }
    .door-calc .door-calc__stats__bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(78, 78, 78, .12);
      overflow: hidden;
    }
    .door-calc .door-calc__stats__bar i {
      display: block;
      height: 100%;
      border-radius: inherit;
    }
    .door-calc .door-calc__stats__bar--red i { background: linear-gradient(90deg, #ff7b5c, #ff5b4d); }
    .door-calc .door-calc__stats__bar--yellow i { background: linear-gradient(90deg, #ffd54f, #f6bf26); }
    .door-calc .door-calc__stats__bar--green i { background: linear-gradient(90deg, #7ed957, #69c53f); }
    .door-calc .door-calc__stats__item b {
      font-size: 14px;
      line-height: 20px;
      text-align: right;
    }
    .door-calc .door-calc__checks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .door-calc .door-calc__check {
      position: relative;
      display: flex;
      min-height: 74px;
      align-items: flex-start;
      gap: 10px;
      padding: 12px;
      border: 1px solid rgba(78, 78, 78, .12);
      border-radius: 0;
      background: #fff;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .04);
      text-align: left;
      overflow: hidden;
      transition: .18s ease;
    }
    .door-calc .door-calc__check::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 4px;
      background: var(--color-one);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }
    .door-calc .door-calc__check:hover {
      transform: translateY(-2px);
      border-color: var(--color-one);
      box-shadow: 0 10px 10px rgba(0, 0, 0, .12);
    }
    .door-calc .door-calc__check:hover::after,
    .door-calc .door-calc__check:has(input:checked)::after { transform: scaleX(1); }
    .door-calc .door-calc__check:has(input:checked) {
      border-color: var(--color-one);
      background: linear-gradient(180deg, rgba(79, 199, 181, .14), #fff 72%);
      box-shadow: 0 16px 36px rgba(48, 151, 135, .14);
    }
    .door-calc .door-calc__check input {
      position: static;
      display: inline-block;
      width: 24px;
      height: 24px;
      min-width: 24px;
      margin: 1px 0 0;
      accent-color: var(--color-red);
      visibility: visible;
      opacity: 1;
      appearance: auto;
      -webkit-appearance: checkbox;
    }
    .door-calc .door-calc__check b {
      display: block;
      font-size: 15px;
      line-height: 20px;
    }
    .door-calc .door-calc__check small {
      display: block;
      margin-top: 4px;
      color: var(--color-three);
      font-size: 13px;
      line-height: 18px;
    }

    .door-calc .door-calc__payment {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid rgba(79, 199, 181, .18);
      border-radius: 0;
      background: #fff;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .06);
      color: #000;
    }
    .door-calc .door-calc__payment__list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .door-calc .door-calc__payment__list > div {
      position: relative;
      min-width: 0;
      padding: 2px 10px;
      border-left: 4px solid var(--color-one);
      background: #f5f6f6;
    }
    .door-calc .door-calc__payment__subtitle {
      color: var(--color-three);
      font-size: 14px;
      line-height: 20px;
    }
    .door-calc .door-calc__payment__value {
      margin: 0;
      color: #000;
      font-size: 15px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      line-height: 28px;
      white-space: nowrap;
    }
    .door-calc .door-calc__payment__btns {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }
    .door-calc .door-calc__btn {
      display: inline-flex;
      min-height: 48px;
      width: auto;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 12px 24px;
      border: 1px solid var(--color-one);
      border-radius: 0;
      background: var(--color-one);
      color: #fff;
      box-shadow: 0 10px 22px rgba(48, 151, 135, .18);
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      text-decoration: none;
    }
    .door-calc .door-calc__btn:hover {
      transform: translateY(-1px);
      border-color: var(--color-two);
      background: var(--color-two);
    }
    .door-calc .door-calc__addCartBtn {
      border-color: var(--color-red);
      background: var(--color-red);
    }
    .door-calc .door-calc__addCartBtn:hover {
      border-color: #bf0035;
      background: #bf0035;
    }
    .door-calc .door-calc__btn--dark {
      border-color: var(--color-three);
      background: var(--color-three);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
    }
    .door-calc .door-calc__btn--dark:hover {
      border-color: #000;
      background: #000;
    }
    .door-calc .door-calc__pay--mobile { display: none; }

    .door-calc .door-calc__cart-area {
      display: none;
      margin-top: 30px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .door-calc .door-calc__cart-area.door-calc__show { display: block; }
    .door-calc .door-calc__cart-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 16px;
    }
    .door-calc .door-calc__cart__title {
      position: relative;
      margin: 0;
      padding-left: 18px;
      font-size: 28px;
      font-weight: 700;
      line-height: 36px;
    }
    .door-calc .door-calc__cart__title::before {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 6px;
      left: 0;
      width: 6px;
      background: var(--color-one);
    }
    .door-calc .door-calc__cart-clear {
      height: 42px;
      padding: 0 14px;
      border: 0;
      background: var(--color-three);
      color: #fff;
      font-weight: 500;
    }
    .door-calc .door-calc__cart-list {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }
    .door-calc .door-calc__cart-item {
      display: grid;
      grid-template-columns: 126px 1fr auto;
      align-items: center;
      gap: 0;
      margin: 0;
      padding: 0;
      border: 1px solid rgba(79, 199, 181, .16);
      border-radius: 0;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
      overflow: hidden;
    }
    .door-calc .door-calc__cart-item__img {
      display: flex;
      min-height: 126px;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: #fff;
    }
    .door-calc .door-calc__cart-item__img img {
      max-width: 100%;
      max-height: 82px;
      object-fit: contain;
    }
    .door-calc .door-calc__cart-item__body { padding: 18px 12px; }
    .door-calc .door-calc__cart-item__data {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 24px;
      margin-bottom: 8px;
      font-size: 18px;
      line-height: 24px;
    }
    .door-calc .door-calc__cart-item__text {
      color: var(--color-three);
      font-size: 14px;
      line-height: 20px;
    }
    .door-calc .door-calc__cart-item__side {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 22px 28px 22px 10px;
    }
    .door-calc .door-calc__cart-price {
      font-size: 20px;
      font-weight: 700;
      white-space: nowrap;
    }
    .door-calc .door-calc__remove {
      position: relative;
      width: 23px;
      height: 23px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: transparent;
      font-size: 0;
    }
    .door-calc .door-calc__remove::before,
    .door-calc .door-calc__remove::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 10px;
      width: 2px;
      height: 20px;
      border-radius: 2px;
      background: #9aa5ad;
    }
    .door-calc .door-calc__remove::before { transform: rotate(45deg); }
    .door-calc .door-calc__remove::after { transform: rotate(-45deg); }
    .door-calc .door-calc__cart-total {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 20px;
      margin-top: 16px;
      padding: 20px;
      border-radius: 0;
      background: linear-gradient(135deg, var(--color-dark-gray), #222);
      box-shadow: 0 18px 44px rgba(0, 0, 0, .15);
      color: #fff;
      text-align: left;
    }
    .door-calc .door-calc__cart-total h3 {
      margin: 0;
      color: #fff;
      font-size: 28px;
      line-height: 36px;
    }
    .door-calc .door-calc__cart-total .door-calc__payment__list > div {
      border-left-color: var(--color-one);
      background: rgba(255, 255, 255, .10);
    }
    .door-calc .door-calc__cart-total .door-calc__payment__subtitle { color: rgba(255, 255, 255, .78); }
    .door-calc .door-calc__cart-total .door-calc__payment__value { color: #fff; }
    .door-calc .door-calc__cart-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .door-calc .door-calc__installment {
      padding: 12px 16px;
      background: var(--color-red);
      box-shadow: 0 10px 24px rgba(229, 0, 64, .22);
      color: #fff;
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
    }
    .door-calc .door-calc__installment__label {
      font-size: 11px;
      opacity: .7;
    }
    .door-calc .door-calc__cart-submit {
      height: 50px;
      padding: 0 14px;
      border: 0;
      background: var(--color-one);
      color: #fff;
      font-size: 16px;
      white-space: nowrap;
    }

    @media (max-width: 991px) {
      .door-calc {
        width: 100%;
        margin: 0;
        padding: 10px 0 24px;
      }
      .door-calc .door-calc__head { padding: 24px 20px 26px; }
      .door-calc .door-calc__head::after {
        position: static;
        display: inline-block;
        margin-top: 14px;
      }
      .door-calc .door-calc__calculator-description { max-width: 100%; }
      .door-calc .door-calc__wrap { grid-template-columns: 1fr; }
      .door-calc .door-calc__left::before,
      .door-calc .door-calc__right::before { margin: -24px -24px 18px; }
      .door-calc .door-calc__pay--desktop { display: none; }
      .door-calc .door-calc__pay--mobile { display: block; }
      .door-calc .door-calc__cart-item { grid-template-columns: 120px 1fr; }
      .door-calc .door-calc__cart-item__img { grid-row: 1 / span 2; }
      .door-calc .door-calc__cart-item__side {
        grid-column: 2;
        justify-content: flex-start;
        padding: 0 28px 22px;
      }
      .door-calc .door-calc__cart-total {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .door-calc .door-calc__cart-total h3 { grid-column: 1 / -1; }
      .door-calc .door-calc__cart-bottom { grid-column: 1 / -1; }
    }
    @media (max-width: 767px) {
      .door-calc .door-calc__head { padding: 20px 16px; }
      .door-calc .door-calc__left,
      .door-calc .door-calc__right { padding: 16px; }
      .door-calc .door-calc__left::before,
      .door-calc .door-calc__right::before { margin: -16px -16px 16px; }
      .door-calc .door-calc__toggle-tabs { grid-template-columns: 1fr; }
      .door-calc .door-calc__fields,
      .door-calc .door-calc__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .door-calc .door-calc__stats {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 20px;
        padding: 14px;
      }
      .door-calc .door-calc__payment {
        padding: 0px;
        border-radius: 14px;
        background: none;
        border: none;
        box-shadow: none;
      }
      .door-calc .door-calc__payment__list,
      .door-calc .door-calc__cart-total .door-calc__payment__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .door-calc .door-calc__payment__list > div {
        padding: 10px;
        border-radius: 10px;
      }
      .door-calc .door-calc__payment__subtitle {
        margin-bottom: 3px;
        font-size: 13px;
        line-height: 18px;
      }
      .door-calc .door-calc__payment__value {
        font-size: 20px;
        line-height: 26px;
      }
      .door-calc .door-calc__payment__btns {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
      }
      .door-calc .door-calc__payment__btns .door-calc__btn { width: 100%; }
      .door-calc .door-calc__cart-area.door-calc__show {
        display: flex;
        flex-direction: column;
      }
      .door-calc .door-calc__cart-total {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
        border-radius: 14px;
      }
      .door-calc .door-calc__cart-total h3 { grid-column: auto; }
      .door-calc .door-calc__cart-bottom {
        display: grid;
        grid-column: auto;
        grid-template-columns: 1fr;
      }
      .door-calc .door-calc__installment {
        border-radius: 10px;
        text-align: center;
      }
    }
    @media (max-width: 560px) {
      .door-calc .door-calc__door-type-nav { display: none; }
      .door-calc .door-calc__door-type-slider { grid-template-columns: 1fr; }
      .door-calc .door-calc__door-types { grid-auto-columns: 35%; }
      .door-calc .door-calc__type-card { min-height: 82px; }
      .door-calc .door-calc__type-card img { height: 42px; }
      .door-calc .door-calc__preview {
        min-height: 320px;
        padding: 22px 20px 58px;
      }
      .door-calc .door-calc__preview-inner { height: 220px; }
      .door-calc .door-calc__door-preview { height: 220px; max-height: 220px; }
      .door-calc .door-calc__range-base.door-calc__height,
      .door-calc .door-calc__range-height,
      .door-calc .door-calc__range-tip.door-calc__height { display: none; }
      .door-calc .door-calc__range-width {
        right: 20px;
        left: 20px;
        width: calc(100% - 40px);
      }
      .door-calc .door-calc__range-base.door-calc__width {
        right: 20px;
        left: 20px;
      }
      .door-calc .door-calc__cart-head {
        align-items: flex-start;
        flex-direction: column;
      }
      .door-calc .door-calc__cart-item { grid-template-columns: 1fr; }
      .door-calc .door-calc__cart-item__img { display: none; }
      .door-calc .door-calc__cart-item__body { padding: 12px 12px 4px; }
      .door-calc .door-calc__cart-item__side {
        grid-column: auto;
        justify-content: space-between;
        padding: 0 12px 12px;
      }
      .door-calc .door-calc__cart-item__data {
        gap: 4px 12px;
        font-size: 17px;
      }
      .door-calc .door-calc__check b {
        font-size: 13px;
      }
    }