/* ============================================================
   КЛИМАТ ПРО — стили продающих блоков карточки товара.
   PowerAdvice, EnergySavings, CompareSimilar, KitConfigurator, ProductQA.
   Токены из styles.css. Плотность «просторно».
   ============================================================ */

/* ===================== СОВЕТ ПО МОЩНОСТИ ===================== */
.pwadvice { display: flex; gap: 12px; margin: -8px 0 20px; padding: 14px 16px; border-radius: var(--r-md); background: var(--warm-soft); border: 1px solid color-mix(in oklab, var(--warm) 22%, transparent); }
.pwadvice-ok { background: var(--eco-soft); border-color: color-mix(in oklab, var(--eco) 20%, transparent); }
.pwadvice-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--warm); color: #fff; }
.pwadvice-ok .pwadvice-ic { background: var(--eco); }
.pwadvice-body { display: flex; flex-direction: column; gap: 3px; }
.pwadvice-up { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--warm); background: var(--surface); color: var(--warm); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: .14s; }
.pwadvice-up:hover { background: var(--warm); color: #fff; }

/* ===================== КАЛЬКУЛЯТОР ЭКОНОМИИ ===================== */
.es { padding: 28px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px 36px; align-items: start; }
.es-controls { display: flex; flex-direction: column; gap: 22px; }
.es-ctrl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.es-ctrl-head strong { font-size: 17px; color: var(--ink); }
.es-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--surface-3); outline: none; }
.es-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--eco); border: 3px solid var(--surface); box-shadow: var(--sh-sm); cursor: pointer; }
.es-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--eco); border: 3px solid var(--surface); cursor: pointer; }
.es-result { display: flex; flex-direction: column; gap: 20px; }
.es-bars { display: flex; flex-direction: column; gap: 14px; }
.es-bar-row { display: flex; flex-direction: column; gap: 6px; }
.es-bar { height: 38px; background: var(--surface-2); border-radius: var(--r-sm); overflow: hidden; }
.es-bar-fill { height: 100%; display: flex; align-items: center; padding: 0 14px; color: #fff; font-weight: 700; font-size: 14px; border-radius: var(--r-sm); white-space: nowrap; transition: width .4s ease; }
.es-bar-std { background: var(--muted-2); }
.es-bar-inv { background: var(--eco); min-width: 70px; }
.es-save { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: var(--r-md); background: var(--eco-soft); border: 1px solid color-mix(in oklab, var(--eco) 18%, transparent); }
.es-save-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--eco); }
.es-save-num { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.05; }
.es-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding-top: 4px; margin: 0; }

/* ===================== СРАВНЕНИЕ С ПОХОЖИМИ ===================== */
.cmpsim-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-sm); }
.cmpsim { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmpsim th, .cmpsim td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 15px; vertical-align: middle; }
.cmpsim thead th { vertical-align: top; border-bottom: 2px solid var(--line); }
.cmpsim-rowlab, .cmpsim-rowlab { color: var(--muted); font-size: 13.5px; width: 170px; }
.cmpsim-col { width: 28%; }
.cmpsim-tag { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.cmpsim-name { display: block; font: inherit; font-weight: 700; font-size: 15px; color: var(--accent); text-align: left; background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.25; }
.cmpsim-name:disabled { color: var(--ink); cursor: default; }
.cmpsim-name:not(:disabled):hover { text-decoration: underline; }
.cmpsim-brand { display: block; margin-top: 2px; }
.cmpsim-this { background: var(--accent-tint); }
td.cmpsim-win { color: var(--eco); font-weight: 700; }
td.cmpsim-win svg { vertical-align: -2px; }
.cmpsim-here { color: var(--muted); font-style: italic; }
.cmpsim tbody tr:last-child td { border-bottom: 0; }

/* ===================== КОНФИГУРАТОР КОМПЛЕКТА ===================== */
.kit { padding: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; overflow: hidden; }
.kit-build { padding: 28px; display: flex; flex-direction: column; gap: 26px; }
.kit-group { display: flex; flex-direction: column; gap: 12px; }
.kit-group-lbl { font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.kit-seg { display: flex; gap: 10px; flex-wrap: wrap; }
.kit-seg-btn { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; font-weight: 700; color: var(--ink); transition: .14s; text-align: left; }
.kit-seg-btn:hover { border-color: var(--accent); }
.kit-seg-btn.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.kit-seg-price { font-weight: 600; color: var(--muted); }
.kit-seg-btn.on .kit-seg-price { color: var(--accent); }
.kit-addons { display: flex; flex-direction: column; gap: 10px; }
.kit-addon { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: .14s; }
.kit-addon:hover { border-color: var(--accent); }
.kit-addon.on { border-color: var(--accent); background: var(--accent-tint); }
.kit-addon input { position: absolute; opacity: 0; width: 0; height: 0; }
.kit-addon-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line); background: var(--surface); display: grid; place-items: center; color: transparent; transition: .14s; }
.kit-addon.on .kit-addon-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.kit-addon-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--accent); }
.kit-addon-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kit-summary { background: var(--surface-2); border-left: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.kit-summary-lbl { font-weight: 600; }
.kit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kit-list li { display: flex; align-items: center; gap: 10px; }
.kit-list-ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--accent); }
.kit-list-name { flex: 1; min-width: 0; }
.kit-total { padding: 16px 0; border-top: 1px solid var(--line); margin-top: 2px; }
.kit-save { color: var(--eco); font-weight: 700; font-size: 14px; }

/* ===================== ВОПРОСЫ И ОТВЕТЫ ===================== */
.qa-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.qa-form-row { display: flex; gap: 12px; }
.qa-form-row .input { max-width: 280px; }
.qa-textarea { resize: vertical; font-family: inherit; line-height: 1.5; }
.qa-list { display: flex; flex-direction: column; gap: 16px; }
.qa-item { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.qa-q { display: flex; gap: 14px; align-items: flex-start; }
.qa-q-mark, .qa-a-mark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.qa-q-mark { background: var(--accent-soft); color: var(--accent-strong); }
.qa-q-text { margin: 0 0 3px; font-weight: 600; font-size: 16px; color: var(--ink); }
.qa-a { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--r-md); background: var(--surface-2); }
.qa-a-mark { background: var(--surface-3); color: var(--ink-2); }
.qa-a-mark.qa-a-shop { background: var(--eco-soft); color: var(--eco); }
.qa-a-text { margin: 0 0 4px; color: var(--ink-2); line-height: 1.55; }
.qa-a-author { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 600; }
.qa-pending { display: flex; align-items: center; gap: 7px; padding-left: 44px; }
.qa-foot { display: flex; gap: 10px; padding-top: 2px; }
.qa-helpful { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .14s; }
.qa-helpful:hover:not(:disabled) { border-color: var(--eco); color: var(--eco); }
.qa-helpful.on { background: var(--eco-soft); border-color: var(--eco-soft); color: var(--eco); cursor: default; }

/* ===================== КУПИТЬ СЕЙЧАС ===================== */
.buynow-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 13px 18px; border: 0; border-radius: var(--r-pill); cursor: pointer; background: var(--warm); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; transition: filter .14s; }
.buynow-btn:hover { filter: brightness(.94); }

/* ===================== ЭТАПЫ МОНТАЖА ===================== */
.msteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.mstep { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mstep-top { position: relative; width: 100%; height: 32px; display: flex; align-items: center; }
.mstep-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; font-size: 14px; z-index: 1; }
.mstep-line { position: absolute; left: 32px; right: -18px; top: 50%; height: 2px; background: var(--line); }
.mstep-ic { width: 46px; height: 46px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; margin-top: 4px; }
.mstep-title { font-size: 15.5px; color: var(--ink); }
.mstep-desc { margin: 0; line-height: 1.5; }
.mstep-when { margin-top: auto; padding: 5px 11px; border-radius: var(--r-pill); background: var(--eco-soft); color: var(--eco); font-size: 12px; font-weight: 700; }

/* ===================== ОТЗЫВЫ ПО СИТУАЦИИ ===================== */
.rev-situation { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rev-sit-chip { padding: 7px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: .14s; }
.rev-sit-chip:hover { border-color: var(--accent); color: var(--accent); }
.rev-sit-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ===================== СВОРАЧИВАЕМЫЕ СЕКЦИИ (мобильный) ===================== */
.pdpfold-head { display: none; }
@media (max-width: 640px) {
  .pdpfold { border: 1px solid var(--line); border-radius: var(--r-md); margin: 0 var(--gutter) 12px; overflow: hidden; background: var(--surface); }
  .pdpfold-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px; background: var(--surface); border: 0; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; }
  .pdpfold-title { display: inline-flex; align-items: center; gap: 10px; }
  .pdpfold-title > svg { color: var(--accent); flex-shrink: 0; }
  .pdpfold-chev { color: var(--muted); transition: transform .2s; flex-shrink: 0; }
  .pdpfold.open .pdpfold-chev { transform: rotate(180deg); }
  .pdpfold-body { display: none; }
  .pdpfold.open .pdpfold-body { display: block; }
  /* neutralize the inner section's heading/padding — the fold head replaces it */
  .pdpfold .section { padding: 0 0 16px; }
  .pdpfold .wrap { padding-inline: 12px; max-width: none; }
  .pdpfold .section-head { display: none; }
  .pdpfold .faq { margin-top: 0; }
}

@media (max-width: 560px) {
  .msteps-mobile-placeholder { display: none; }
  .mstep { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 14px; padding-bottom: 22px; position: relative; }
  .mstep-top { width: auto; height: auto; flex-shrink: 0; }
  .mstep-line { display: none; }
  .mstep-ic { display: none; }
  .mstep-title { flex: 1; min-width: 0; align-self: center; font-size: 16px; }
  .mstep-desc { flex-basis: 100%; margin-left: 46px; margin-top: 2px; }
  .mstep-when { margin-left: 46px; margin-top: 8px; }
  .mstep:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
}

/* ===================== АДАПТИВ ===================== */
@media (max-width: 1020px) {
  .msteps { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
  .mstep-line { display: none; }
}
@media (max-width: 860px) {
  .es { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .kit { grid-template-columns: 1fr; }
  .kit-summary { border-left: 0; border-top: 1px solid var(--line); }
}

/* single-column montage timeline on phones — placed LAST so it wins over the 1020px 2-col rule */
@media (max-width: 560px) {
  .msteps { grid-template-columns: 1fr; gap: 0; }
}