/* Каталог вариантов и кейс 3,5 м */
.variant-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.variant-card {
  display: flex;
  flex-direction: column;
  min-height: 255px;
  padding: 22px;
  border: 1px solid rgba(23, 58, 50, .12);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(23, 58, 50, .055);
}

.variant-card--featured {
  grid-column: auto;
  padding: 0;
  overflow: hidden;
  border-color: rgba(183, 121, 47, .35);
}

.variant-card--featured > :not(.variant-card__photo) {
  margin-left: 22px;
  margin-right: 22px;
}

.variant-card--featured .button {
  align-self: stretch;
  width: auto !important;
  max-width: none;
  margin: auto 22px 22px;
  box-sizing: border-box;
}

.variant-card__photo {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  margin-bottom: 18px;
}

.variant-card__photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.variant-card__photo span {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(23, 58, 50, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.variant-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 13px;
}

.variant-card__top > span {
  color: #65706b;
  font-size: 13px;
  font-weight: 700;
}

.variant-card__top > strong {
  white-space: nowrap;
  color: #173a32;
  font-size: 19px;
}

.variant-card h3 {
  margin: 0 0 8px;
  font-size: 23px;
}

.variant-card p {
  margin: 0 0 20px;
  color: #65706b;
  line-height: 1.55;
}

.variant-card .button {
  margin-top: auto;
}

.variant-table td:last-child {
  white-space: nowrap;
  font-weight: 800;
}

.standard-equipment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(23,58,50,.12);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
}

.standard-equipment article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(23,58,50,.08);
}

.standard-equipment article:nth-child(odd) {
  border-right: 1px solid rgba(23,58,50,.08);
}

.standard-equipment article strong {
  color: #b7792f;
  font: 700 16px/1.4 Georgia, serif;
}

.standard-equipment article span {
  line-height: 1.5;
}

.standard-equipment__cta,
.case-35__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(23,58,50,.06);
}

.standard-equipment__cta p {
  margin: 0;
}

.case-35__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.case-35__facts span {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(23,58,50,.06);
  color: #65706b;
  font-size: 13px;
}

.case-35__facts strong {
  display: block;
  margin-bottom: 2px;
  color: #173a32;
  font-size: 18px;
}

.gallery-grid--case .gallery-item img {
  object-position: center;
}

.gallery-grid--case .gallery-item--plan {
  background: #fff;
}

.gallery-grid--case .gallery-item--plan img {
  object-fit: contain;
  background: #fff;
}

.case-35__cta {
  justify-content: center;
}

.model-options {
  max-height: 480px;
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 1050px) {
  .variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .case-35__facts {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 680px) {
  .variant-grid {
    grid-template-columns: 1fr;
  }
  .variant-card--featured {
    grid-column: auto;
  }
  .standard-equipment {
    grid-template-columns: 1fr;
  }
  .standard-equipment article:nth-child(odd) {
    border-right: 0;
  }
  .standard-equipment__cta {
    align-items: stretch;
    flex-direction: column;
  }
  .standard-equipment__cta .button {
    width: 100%;
  }
  .case-35__facts {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 430px) {
  .case-35__facts {
    grid-template-columns: 1fr;
  }
}


/* Квиз 3 шага */
.quiz-shell { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.6fr); overflow:hidden; border:1px solid rgba(23,58,50,.12); border-radius:26px; background:#fff; box-shadow:0 20px 60px rgba(23,58,50,.08); }
.quiz-intro { padding:32px; background:linear-gradient(145deg,#f2f7f1,#fbfaf5); }
.quiz-intro h3 { margin:8px 0 22px; font-size:clamp(28px,3vw,42px); }
.quiz-intro ul { list-style:none; padding:0; margin:0; display:grid; gap:14px; color:#65706b; }
.quiz-intro li::before { content:'✓'; display:inline-grid; place-items:center; width:22px; height:22px; margin-right:9px; border:1px solid #2f765e; border-radius:50%; color:#2f765e; font-weight:800; }
.quiz-main { padding:30px; min-width:0; }
.quiz-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:28px; }
.quiz-progress span { height:5px; border-radius:99px; background:#e7ece9; }
.quiz-progress span.is-active { background:#2f765e; }
.quiz-step[hidden] { display:none; }
.quiz-step__meta { color:#7b8580; font-size:13px; margin-bottom:8px; }
.quiz-step h3 { margin:0 0 6px; font-size:25px; }
.quiz-step > p { margin:0 0 22px; color:#65706b; }
.quiz-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.quiz-option { position:relative; cursor:pointer; }
.quiz-option input { position:absolute; opacity:0; pointer-events:none; }
.quiz-option span { display:flex; min-height:62px; align-items:center; justify-content:center; padding:12px; border:1px solid rgba(23,58,50,.16); border-radius:14px; text-align:center; font-weight:800; background:#fff; transition:.18s ease; }
.quiz-option input:checked + span { border-color:#2f765e; background:#edf6ef; box-shadow:0 0 0 2px rgba(47,118,94,.12); }
.quiz-option input:disabled + span { opacity:.38; cursor:not-allowed; }
.quiz-actions { display:flex; justify-content:space-between; gap:12px; margin-top:26px; }
.quiz-actions .button { min-width:150px; }
.quiz-distance { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:16px; align-items:center; }
.quiz-distance input[type=number] { width:100%; padding:14px; border:1px solid rgba(23,58,50,.16); border-radius:12px; font:inherit; }
.quiz-note { margin-top:12px !important; font-size:14px; }
.quiz-result { margin-top:24px; padding:20px; border-radius:18px; background:#f3f7f3; }
.quiz-result strong { display:block; font-size:28px; color:#173a32; margin-top:4px; }
@media (max-width:900px){ .quiz-shell{grid-template-columns:1fr}.quiz-intro{padding:24px}.quiz-main{padding:24px} }
@media (max-width:560px){ .quiz-options{grid-template-columns:repeat(2,minmax(0,1fr))}.quiz-distance{grid-template-columns:1fr}.quiz-actions{align-items:stretch}.quiz-actions .button{min-width:0;flex:1}.variant-card{min-height:230px;padding:18px}.variant-card--featured>:not(.variant-card__photo){margin-left:18px;margin-right:18px}.variant-card--featured .button{margin:auto 18px 18px} }

.variant-card { min-width: 0; }
.variant-card .button--wide { box-sizing: border-box; max-width: 100%; }
.variant-card--featured .button--wide {
  width: auto !important;
  max-width: none;
  margin-left: 22px;
  margin-right: 22px;
}

.quiz-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid rgba(23,58,50,.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(237,246,239,.9), rgba(255,255,255,.96));
}
.quiz-current__label {
  display: block;
  margin-bottom: 4px;
  color: #6d7772;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quiz-current__model {
  display: block;
  color: #173a32;
  font-size: 18px;
  line-height: 1.25;
}
.quiz-current__layout {
  display: block;
  margin-top: 3px;
  color: #65706b;
  font-size: 13px;
}
.quiz-current__price { text-align: right; }
.quiz-current__price small {
  display: block;
  margin-bottom: 2px;
  color: #6d7772;
  font-size: 11px;
}
.quiz-current__price strong {
  display: block;
  white-space: nowrap;
  color: #173a32;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
}
.quiz-option__price {
  display: block;
  margin-top: 5px;
  color: #2f765e;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 560px) {
  .quiz-current { grid-template-columns: 1fr; }
  .quiz-current__price { text-align: left; }
}


/* FIX: кнопка карточки 3,5 м всегда остаётся внутри карточки */
.variant-card--featured .button.button--wide {
  display: flex !important;
  width: calc(100% - 44px) !important;
  max-width: calc(100% - 44px) !important;
  margin: auto 22px 22px !important;
  box-sizing: border-box !important;
  align-self: center !important;
}

/* Цена рядом с длиной — с нормальным пробелом */
.quiz-option__price {
  display: inline-block !important;
  margin-left: .42em !important;
}

/* Блок текущего выбора */
.quiz-current__price-label {
  display: block;
  margin-bottom: 2px;
  color: #6d7772;
  font-size: 11px;
}
.quiz-current__price strong.is-zero,
.quiz-option__price.is-zero {
  color: #69746f;
}

/* Дополнительные опции */
.quiz-options--addons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quiz-addon {
  position: relative;
  display: block;
  min-width: 0;
}
.quiz-addon > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-addon__card {
  display: flex;
  flex-direction: column;
  min-height: 132px;
  height: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(23,58,50,.15);
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.quiz-addon > input:checked + .quiz-addon__card {
  border-color: #2f765e;
  background: #eff7f2;
  box-shadow: inset 0 0 0 1px #2f765e;
}
.quiz-addon > input:disabled + .quiz-addon__card {
  opacity: .48;
  cursor: not-allowed;
}
.quiz-addon__title {
  display: block;
  color: #173a32;
  font-weight: 800;
  line-height: 1.28;
}
.quiz-addon__desc {
  display: block;
  margin-top: 6px;
  color: #6d7772;
  font-size: 12px;
  line-height: 1.4;
}
.quiz-addon__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}
.quiz-addon__price {
  color: #2f765e;
  font-weight: 900;
  white-space: nowrap;
}
.quiz-addon__qty {
  display: none;
  align-items: center;
  gap: 5px;
  color: #6d7772;
  font-size: 11px;
}
.quiz-addon > input:checked + .quiz-addon__card .quiz-addon__qty {
  display: flex;
}
.quiz-addon__qty input {
  width: 58px;
  min-height: 34px;
  padding: 5px 7px;
  border: 1px solid rgba(23,58,50,.18);
  border-radius: 8px;
  background: #fff;
  color: #173a32;
  font: inherit;
}
.quiz-addon__badge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 7px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f7ead6;
  color: #815118;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.quiz-addon__warning {
  margin-top: 7px;
  color: #9a5538;
  font-size: 11px;
  line-height: 1.35;
}
.quiz-options__section-title {
  grid-column: 1 / -1;
  margin: 5px 0 -2px;
  color: #6d7772;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.quiz-wash-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(47,118,94,.07);
  color: #587068;
  font-size: 12px;
  line-height: 1.45;
}
.quiz-options-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 13px;
  background: rgba(23,58,50,.06);
}
.quiz-options-total span {
  color: #65706b;
}
.quiz-options-total strong {
  color: #173a32;
  white-space: nowrap;
}

/* Итог последнего шага */
.quiz-result__breakdown {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}
.quiz-result__row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  color: #66716c;
  font-size: 13px;
}
.quiz-result__row strong {
  color: #173a32;
  white-space: nowrap;
}
.quiz-result__row--total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(23,58,50,.12);
  font-size: 15px;
}

@media (max-width: 720px) {
  .quiz-options--addons {
    grid-template-columns: 1fr;
  }
}


/* Реальная работа: 6 м, Казань */
.case-work {
  background: linear-gradient(180deg, rgba(23,58,50,.025), transparent 55%);
}

.case-work__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.case-work__facts span {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(23,58,50,.06);
  color: #65706b;
  font-size: 13px;
}

.case-work__facts strong {
  display: block;
  margin-bottom: 2px;
  color: #173a32;
  font-size: 18px;
}

.case-work__video-grid {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(320px,1.15fr);
  gap: 26px;
  align-items: center;
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid rgba(23,58,50,.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 46px rgba(23,58,50,.055);
}

.case-work__video-copy h3 {
  margin: 4px 0 12px;
  font-size: clamp(27px,4vw,42px);
  line-height: 1.02;
}

.case-work__video-copy > p:not(.eyebrow) {
  color: #65706b;
  line-height: 1.6;
}

.case-work__check {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.case-work__check li::before {
  content: "✓";
  margin-right: 8px;
  color: #2f765e;
  font-weight: 900;
}

.case-work__video {
  position: relative;
  width: min(100%, 420px);
  justify-self: center;
}

.case-work__video video {
  display: block;
  width: 100%;
  max-height: 640px;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 20px;
  background: #102b25;
  box-shadow: 0 18px 50px rgba(16,43,37,.18);
}

.case-work__video-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(16,43,37,.88);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
}

.case-work__gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: 240px;
  gap: 12px;
}

.case-work__photo {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #e8e5dc;
  cursor: zoom-in;
}

.case-work__photo--wide {
  grid-column: span 2;
  grid-row: span 2;
}

.case-work__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.case-work__photo:hover img {
  transform: scale(1.025);
}

.case-work__photo span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(16,43,37,.82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.case-work__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 20px;
  background: rgba(23,58,50,.06);
}

.case-work__cta strong,
.case-work__cta span {
  display: block;
}

.case-work__cta span {
  margin-top: 3px;
  color: #65706b;
  font-size: 13px;
}

@media (max-width: 980px) {
  .case-work__facts {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .case-work__video-grid {
    grid-template-columns: 1fr;
  }

  .case-work__gallery {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .case-work__facts {
    grid-template-columns: 1fr 1fr;
  }

  .case-work__video-grid {
    padding: 16px;
  }

  .case-work__gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 180px;
  }

  .case-work__photo--wide {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  .case-work__cta {
    align-items: stretch;
    flex-direction: column;
  }

  .case-work__cta .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .case-work__facts {
    grid-template-columns: 1fr;
  }

  .case-work__gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 230px;
  }

  .case-work__photo--wide {
    grid-column: auto;
    grid-row: auto;
  }
}