/* ============ Konfigurator page ============ */
:root { --accent-text: #8c6a2f; --error: #b3261e; }

.breadcrumb { display: flex; gap: 10px; font-size: 14px; padding-block: 16px; color: var(--muted); }
.breadcrumb a { text-decoration: none; color: var(--ink-soft); }
.breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

.media--hero-sm { height: clamp(220px, 34vw, 420px); }

.usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-block: 24px 48px; }
.usp__item { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.usp__item svg { flex: none; width: 32px; height: 32px; color: var(--gold-dark); }
.usp__item h3 { font-size: 17px; margin-bottom: 4px; }
.usp__item p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Configurator frame ============ */
.cfg-wrap { margin-bottom: 40px; }
.cfg, .step__body, .step__body > *, .opt__text { min-width: 0; }
.cfg-progress { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; font-size: 14px; color: var(--ink-soft); }
.cfg-progress__bar { flex: 1; height: 4px; background: var(--line); position: relative; }
.cfg-progress__bar span { position: absolute; inset: 0 auto 0 0; background: var(--gold); transition: width .3s; }
.cfg-reset, .link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 14px var(--font); color: var(--ink-soft);
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px;
}
.cfg-reset:hover, .link-btn:hover { color: var(--ink); }

.step { background: var(--cream); margin-bottom: 12px; border-radius: var(--radius-lg); overflow: hidden; scroll-margin-top: 72px; }
.step__head { display: flex; align-items: center; gap: 18px; padding: 30px 44px; }
.step__num {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--cream); font-weight: 600; font-size: 18px;
}
.step__num svg { width: 22px; height: 22px; stroke-width: 2.4; }
.step__title { margin: 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; }
.step.is-pending .step__num { background: #b9b2a6; color: var(--white); }
.step.is-pending .step__title { color: #a29b90; }
.step.is-done .step__num { background: var(--gold); color: var(--ink); }
.step__edit {
  margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--gold); border: 0; color: var(--ink); cursor: pointer;
}
.step__edit:hover { background: var(--gold-dark); }
.step__edit svg { width: 18px; height: 18px; }

.step__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 44px 28px; }
.chip { background: var(--white); padding: 6px 12px; font-size: 13px; font-weight: 600; }
.chip span { font-weight: 400; color: var(--muted); }
.chip--more { color: var(--muted); font-weight: 500; }

.step__body { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 4px 44px 56px; }
.step__media { position: sticky; top: 72px; align-self: start; }
.step__media .media { aspect-ratio: 4 / 3; transition: opacity .15s; }
.step__media .media.is-swapping { opacity: .3; }
.help { display: flex; gap: 12px; margin-top: 12px; padding: 16px 18px; background: var(--white); font-size: 14px; }
.help svg { flex: none; color: var(--gold-dark); }
.help p { margin: 0; color: var(--ink-soft); }
.help a { color: var(--ink); font-weight: 600; text-decoration: none; }

.step__nav { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding-top: 16px; }
.step__nav .btn { cursor: pointer; font-family: var(--font); }
.btn--next { padding: 12px 22px; font-size: 15px; }
.step__nav .btn:disabled { opacity: .6; cursor: wait; }
.step__nav .q__error { flex-basis: 100%; }
.privacy-note { font-size: 13px; color: var(--muted); margin-top: 14px; }
.privacy-note a { color: var(--ink); }

/* ============ Sections & questions ============ */
.sec { scroll-margin-top: 80px; }
.sec + .sec { padding-top: 48px; animation: sec-in .35s ease-out; }
@keyframes sec-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sec__head { margin-bottom: 44px; }
.sec__title { font-size: clamp(24px, 2.4vw, 30px); font-weight: 600; margin-bottom: 10px; }
.sec__intro { font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0; }

.q { margin-bottom: 48px; }
.q__head { margin-bottom: 12px; }
.q__title { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.q__hint { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 8px; }
.q__opt { font-size: 15px; color: var(--ink); margin: 0 0 4px; }
.q__error { color: var(--error); font-size: 14px; font-weight: 600; margin: 10px 0 0; }

.info-btn {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 15px/1.35 var(--font); color: var(--accent-text);
}
.info-btn svg { flex: none; width: 22px; height: 22px; stroke-width: 1.6; }
.info-btn:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ============ Option rows ============ */
.opts { display: grid; gap: 12px; }
.opt {
  position: relative; display: flex; align-items: center; gap: 18px;
  min-height: 84px; padding: 16px 24px; background: var(--white);
  border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s;
}
.opt:hover { border-color: #cdbfa8; }
.opt.is-checked { border-color: var(--ink); }
.opt input, .tile input, .consent input, .file input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt__text { font-weight: 600; font-size: 16px; line-height: 1.45; }

/* radio: filled cream circle; checkbox: square */
.opt__box {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream); position: relative;
}
.opt input:checked + .opt__box { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.opt input[type="radio"]:checked + .opt__box::after, .tile input:checked + .opt__box::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--gold);
}
.opt--square .opt__box, .consent .opt__box { border-radius: 0; }
.opt.opt--square input:checked + .opt__box, .consent input:checked + .opt__box { background: var(--gold); box-shadow: none; }
.opt.opt--square input:checked + .opt__box::after, .consent input:checked + .opt__box::after {
  content: ""; position: absolute; left: 11px; top: 5px; width: 9px; height: 17px;
  border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.opt input:focus-visible + .opt__box, .tile input:focus-visible + .opt__box, .consent input:focus-visible + .opt__box { outline: 2px solid var(--gold); outline-offset: 3px; }
.q.is-invalid .opt { border-color: #e2a39e; }

/* follow-up choices that open inside a checked option (e.g. opening sides per division) */
.opt-sub { margin-top: -12px; padding: 8px 24px 24px; background: var(--white); border: 1.5px solid var(--ink); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.opt-sub__title { margin: 0 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.opt-sub__title span { font-weight: 400; color: var(--muted); font-size: 13px; }
.opt-sub .info-btn { margin-bottom: 12px; }
.opt-sub .opts { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.opt-sub .opt { background: var(--cream); min-height: 72px; padding: 8px 12px 8px 16px; gap: 12px; }
.opt-sub .opt__text { font-size: 14px; }
.opt-sub .opt__box { width: 26px; height: 26px; background: var(--white); }
.opt-sub .opt.opt--square input:checked + .opt__box::after { left: 8px; top: 3px; width: 8px; height: 15px; }
.opt-sub .opt__pic { width: 84px; padding-left: 6px; }
.opt-sub .opt__pic .ill { width: 76px; height: 60px; }

/* picture on the right */
.opt__pic { margin-left: auto; flex: none; display: grid; place-items: center; width: 110px; padding-left: 12px; }
.opt__pic svg { display: block; }
.opt--pic { min-height: 100px; padding-block: 10px; }
.opt__pic .ill { width: 90px; height: 72px; }
.opt__pic .ill--tall, .opt__pic .ill--door { width: 72px; height: 88px; }
.opt__pic .ico--shield { width: 64px; height: 56px; }
.opt__pic .ico--wave { width: auto; height: 44px; max-width: 96px; }
.opt__pic .ico--thermo { width: auto; height: 44px; }
.opt--wide .opt__pic { width: 46%; padding: 0; align-self: stretch; margin: -10px -24px -10px auto; }
.opt--wide .opt__pic .scene { width: 100%; height: 100%; min-height: 120px; }
.opt__swatch { margin-left: auto; flex: none; width: 52px; height: 52px; border: 1px solid rgba(0, 0, 0, .08); }

/* colour cards: two columns, swatch flush with the right edge */
.opts--colors { grid-template-columns: 1fr 1fr; gap: 12px; }
.opts--colors .opt { min-height: 88px; padding: 12px 0 12px 22px; gap: 16px; }
.opts--colors .opt__text { font-size: 15px; line-height: 1.4; }
.opts--colors .opt__swatch { width: 64px; height: 64px; border: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.tabs-mini--center { justify-content: center; gap: 28px; margin-bottom: 28px; }
.tabs-mini__dot { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.opt--media { padding-block: 0; min-height: 110px; overflow: hidden; }
.opt__media { margin: 0 -24px 0 auto; align-self: stretch; width: 44%; flex: none; }
.opt__media .scene, .opt__media .media { width: 100%; height: 100%; display: block; aspect-ratio: auto; }

/* pills */
.opts--pills { display: flex; flex-wrap: wrap; gap: 12px; }
.opt--pill { min-height: 0; padding: 18px 26px 18px 22px; }

/* icons */
.ico { fill: none; }
.ico-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-line--bold { stroke-width: 2.4; }
.ico-fill { fill: var(--white); stroke: var(--ink); stroke-width: 1.6; }
.ico-dot { fill: var(--ink); }
/* illustrations draw their own strokes – don't inherit the site-wide icon stroke */
.scene, .tile-img { display: block; stroke: none; stroke-width: 0; }
.ill, .ico { stroke: none; }

/* product drawings */
.ill { stroke-width: .9; }
.ill-f { fill: #eceeef; stroke: #b4b8bc; }
.ill-s { fill: #fafbfb; stroke: #c3c7ca; }
.ill-s--inner { fill: none; stroke: #d5d8da; }
.ill-leaf { fill: #f2f3f4; stroke: #b4b8bc; }
.ill-panel { fill: #eceeef; stroke: #c3c7ca; }
.ill-g { fill: #e4eef3; stroke: #c3c7ca; }
.ill-shine { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; opacity: .9; }
.ill-h { fill: none; stroke: #8f9498; stroke-width: 1.4; stroke-linecap: round; }
.ill-bar { fill: none; stroke: #8f9498; stroke-width: 1.8; stroke-linecap: round; }
.ill-bar-fill { fill: #a6aaae; stroke: #8f9498; }
.ill-recess { fill: #d9dcdf; stroke: #a6aaae; }
.ill-a { fill: none; stroke: var(--gold-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* opening symbols (dashed, point to the hinges) and labels in small drawings */
.ill-o { fill: none; stroke: var(--gold-dark); stroke-width: .9; stroke-dasharray: 3 2; }
.ill-t { fill: var(--ink-soft); font: 600 11px var(--font); stroke: none; }

/* ============ Accordions (colours) ============ */
.acc-list { display: grid; gap: 12px; }
.acc { border-radius: var(--radius-sm); overflow: hidden; }
.acc { background: var(--white); }
.acc > summary {
  display: flex; align-items: center; gap: 14px; padding: 22px 24px;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 16px;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: ""; margin-left: auto; flex: none; width: 10px; height: 10px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}
.acc[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.acc__val { font-weight: 400; font-size: 14px; color: var(--muted); }
.acc__body { padding: 0 14px 14px; }
.acc__body .opts { gap: 8px; }
.acc__body .opt { background: var(--cream); min-height: 72px; }
.acc__body .opt__box { background: var(--white); }

/* ============ Tabs + tiles (handles) ============ */
.tabs-mini { display: flex; gap: 8px; border-bottom: 1px solid #cfc6b7; margin-bottom: 20px; }
.tabs-mini__btn {
  background: none; border: 0; padding: 12px 18px; margin-bottom: -1px; cursor: pointer;
  font: 600 16px var(--font); color: var(--ink-soft); border-bottom: 3px solid transparent;
}
.tabs-mini__btn.is-active { color: var(--ink); border-color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile > .media { width: 100%; height: 100%; aspect-ratio: auto; transition: transform .4s; }
.tile:hover > .media { transform: scale(1.04); }
.tile {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--white); border: 1.5px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
}
.tile:hover { border-color: #cdbfa8; }
.tile.is-checked { border-color: var(--ink); }
.tile .opt__box { position: absolute; top: 14px; left: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); z-index: 1; }
.tile input:checked + .opt__box { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.tile input:checked + .opt__box::after { inset: 7px; }
.tile .tile-img { width: 100%; height: 100%; display: block; }
.tile--text { display: grid; place-items: center; }
.tile__label { font-weight: 600; }

/* ============ Inputs ============ */
.input {
  width: 100%; height: 56px; padding: 0 18px;
  font: 16px var(--font); color: var(--ink);
  background: var(--white); border: 1.5px solid transparent; border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #8d877d; }
textarea.input { height: auto; padding: 14px 18px; resize: vertical; }
select.input { appearance: none; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23272727' stroke-width='2'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 44px; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(202, 156, 81, .35); }
.q.is-invalid .input, .field.is-invalid .input { border-color: var(--error); }
.input--count { max-width: 100%; -moz-appearance: textfield; }
.input--count::-webkit-outer-spin-button, .input--count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dims { display: flex; align-items: center; gap: 14px; }
.dims .field { flex: 1; }
.dims__x { font-size: 20px; color: var(--muted); }
.input-unit { position: relative; display: block; }
.input-unit .input { padding-right: 48px; }
.input-unit em { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; font-weight: 600; }
.field__error { color: var(--error); font-size: 13px; font-weight: 600; }

.file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; cursor: pointer; }
.file:hover .btn { background: var(--gold-dark); border-color: var(--gold-dark); }
.file input:focus-visible + .btn { outline: 2px solid var(--gold); outline-offset: 2px; }
.file__name { font-size: 14px; color: var(--ink-soft); }
.file__name em { color: var(--muted); }
.q--file .link-btn { margin-top: 10px; }

.consent { position: relative; display: flex; gap: 16px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.consent .opt__box { width: 28px; height: 28px; background: var(--white); }
.consent input:checked + .opt__box::after { left: 9.5px; top: 4px; width: 8px; height: 15px; }
.consent a { color: var(--ink); }
.q--consent.is-invalid .opt__box { box-shadow: inset 0 0 0 1.5px var(--error); }

/* ============ Info modal ============ */
.modal {
  width: min(1180px, calc(100% - 32px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; background: var(--white); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25); border-radius: var(--radius-lg);
}
.modal::backdrop { background: rgba(39, 39, 39, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[open] { animation: modal-in .25s ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.modal-open { overflow: hidden; }
.modal__inner { position: relative; padding: 72px 64px 64px; }
.modal__close {
  position: absolute; top: 22px; right: 22px; width: 44px; height: 44px;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--ink);
}
.modal__close:hover { color: var(--accent-text); }
.modal__close svg { width: 28px; height: 28px; stroke-width: 1.6; }
.modal__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.modal__head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; margin: 0; }
.modal__lead { font-size: 18px; line-height: 1.6; margin: 0; }
.modal__cards { display: grid; gap: 28px; }
.modal__cards--2 { grid-template-columns: 1fr 1fr; }
.modal__cards--3 { grid-template-columns: repeat(3, 1fr); }
.mcard__img { aspect-ratio: 16 / 9; background: var(--cream); overflow: hidden; margin-bottom: 24px; }
.mcard__img > .media, .mcard__img > svg { width: 100%; height: 100%; display: block; aspect-ratio: auto; }
.mcard__img--icon { display: grid; place-items: center; }
.mcard__img--icon > svg { width: auto; height: 58%; max-width: 70%; }
.mcard h3 { font-size: clamp(20px, 2vw, 26px); font-weight: 600; margin-bottom: 12px; }
.mcard p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 460px; }
/* two-column overlays */
.modal__split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.modal__split-left > .media { aspect-ratio: 4 / 3; }
.modal__split-right > .media { aspect-ratio: 4 / 5; }
.modal__split-left h4 { font-size: 16px; margin: 26px 0 8px; }
.modal__split-left h4:first-child { margin-top: 0; }
.modal__split-left ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.modal__split-left p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.modal__list-title { font-size: 17px; margin-bottom: 22px; }
.modal__list { margin: 0; }
.modal__list dt { font-weight: 700; font-size: 16px; margin-top: 22px; }
.modal__list dt:first-child { margin-top: 0; }
.modal__list dd { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.infographic { display: block; width: 100%; height: auto; stroke: none; }

.sound-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sound-table th { text-align: left; font-size: 12px; font-weight: 700; padding: 0 10px 10px 0; border-bottom: 2px solid var(--ink); }
.sound-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sound-table td:nth-child(2) { width: 56px; }
.sound-table td:last-child { white-space: nowrap; color: var(--ink-soft); }
.sound-table .cls { display: inline-grid; place-items: center; width: 28px; height: 28px; background: var(--cream); font-weight: 700; }
.lvl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 10px; vertical-align: -2px; }
.lvl-bars i { width: 3px; background: var(--line); }
.lvl-bars i:nth-child(1) { height: 4px; } .lvl-bars i:nth-child(2) { height: 6px; } .lvl-bars i:nth-child(3) { height: 8px; }
.lvl-bars i:nth-child(4) { height: 10px; } .lvl-bars i:nth-child(5) { height: 12px; } .lvl-bars i:nth-child(6) { height: 14px; }
.lvl-bars i.on { background: var(--gold); }

.modal__tip { margin-top: 40px; padding: 24px 28px; background: var(--cream); border-left: 4px solid var(--gold); }
.modal__tip h3 { font-size: 17px; margin-bottom: 6px; }
.modal__tip p { margin: 0; color: var(--ink-soft); }

/* ============ Thank-you ============ */
.thanks { background: var(--cream); padding: 56px 48px; border-radius: var(--radius-lg); }
.thanks__icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--gold); color: var(--ink); margin-bottom: 20px;
}
.thanks__icon svg { width: 32px; height: 32px; stroke-width: 2.4; }
.demo-note { background: var(--white); border-left: 3px solid var(--gold); padding: 12px 16px; font-size: 14px; color: var(--ink-soft); }
.summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-block: 32px; }
.summary__block { background: var(--white); padding: 24px 26px; border-radius: var(--radius-md); }
.summary__block h3 { font-size: 17px; padding-bottom: 10px; border-bottom: 2px solid var(--gold); }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.thanks__actions .btn { cursor: pointer; font-family: var(--font); }

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .modal__cards--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1180px) {
  .step__head { padding-inline: 32px; }
  .step__body { gap: 28px; padding-inline: 32px; }
  .step__chips { padding-inline: 32px; }
  .modal__split { gap: 40px; }
}
@media (max-width: 900px) {
  .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step__body { grid-template-columns: 1fr; gap: 28px; }
  .step__media { position: static; }
  .step__media .media { aspect-ratio: 16 / 9; }
  .step__media .help { display: none; }
  .modal__inner { padding: 64px 28px 36px; }
  .modal__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .modal__split { grid-template-columns: 1fr; gap: 32px; }
  .modal__split-right > .media { aspect-ratio: 16 / 10; }
}
@media (max-width: 700px) {
  .usp { grid-template-columns: 1fr; margin-block: 20px 36px; }
  .usp__item { padding: 20px; }
  .step__head { padding: 24px; }
  .step__body { padding: 0 24px 44px; }
  .step__chips { padding: 0 24px 24px; }
  .sec + .sec { padding-top: 36px; }
  .sec__head { margin-bottom: 32px; }
  .q { margin-bottom: 36px; }
  .tabs-mini { overflow-x: auto; scrollbar-width: thin; }
  .tabs-mini__btn { flex: none; white-space: nowrap; }
}
@media (max-width: 640px) {
  .step__head { padding: 22px 20px; gap: 12px; }
  .step__body { padding: 0 20px 36px; }
  .step__chips { padding: 0 20px 22px; }
  .opt { padding-inline: 16px; gap: 14px; min-height: 72px; }
  .opt__box { width: 28px; height: 28px; }
  .opt input[type="radio"]:checked + .opt__box::after { inset: 7px; }
  .opt.opt--square input:checked + .opt__box::after { left: 9.5px; top: 4px; width: 8px; height: 15px; }
  .opt__pic { width: 80px; }
  .opt__pic .ill { width: 70px; height: 56px; }
  .opt__pic .ill--tall, .opt__pic .ill--door { width: 56px; height: 70px; }
  .opt--wide .opt__pic, .opt__media { margin-right: -16px; }
  .fields { grid-template-columns: 1fr; }
  .opts--colors { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .modal__cards--2, .modal__cards--3 { grid-template-columns: 1fr; }
  .thanks { padding: 36px 20px; }
  .cfg-progress { flex-wrap: wrap; gap: 8px 16px; }
  .cfg-progress__bar { order: 3; flex-basis: 100%; }
  .cfg-reset { margin-left: auto; }
}

@media (max-width: 420px) {
  .breadcrumb { font-size: 13px; gap: 8px; }
  .step__head { padding: 20px 16px; }
  .step__body { padding: 0 16px 32px; }
  .step__chips { padding: 0 16px 20px; }
  .step__num { width: 36px; height: 36px; font-size: 16px; }
  .step__title { font-size: 21px; }
  .opt { padding-inline: 12px; gap: 10px; }
  .opt__pic { width: 68px; padding-left: 4px; }
  .opt__pic .ill { width: 60px; height: 48px; }
  .opt--wide .opt__pic, .opt__media { display: none; }
  .opt--wide, .opt--media { padding-block: 14px; }
  .opt--wide .opt__pic, .opt__media { margin: 0; }
  .opt__swatch { width: 48px; height: 48px; }
  .opts--colors .opt { padding-left: 14px; }
  .tiles { gap: 8px; }
  .tile .opt__box { top: 9px; left: 9px; }
  .modal { width: calc(100% - 16px); max-height: calc(100vh - 16px); }
  .modal__inner { padding: 58px 18px 24px; }
  .modal__close { top: 10px; right: 10px; }
  .modal__tip { margin-top: 28px; padding: 18px; }
  .sound-table { font-size: 12px; }
  .sound-table th, .sound-table td { padding-right: 6px; }
  .sound-table td:last-child { white-space: normal; }
}

/* ============ Print ============ */
@media print {
  .header, .footer, .no-print { display: none !important; }
  .thanks { padding: 0; background: none; }
  .summary__block { border: 1px solid #ccc; break-inside: avoid; }
}

@media (max-width: 640px) {
  .opt-sub { padding: 4px 12px 14px; }
  .opt-sub .opt { padding: 8px 10px; }
  .opt-sub .opt__pic { width: 70px; }
  .opt-sub .opt__pic .ill { width: 64px; height: 50px; }
}