:root{
  --bg:#f7f8fb;
  --text:#355735;
  --muted:#778099;
  --card:#ffffff;
  --ring:#e4e8f1;
  --shadow:0 10px 30px rgba(25,35,52,.06);
  --accent:#2e6bff;
  --accent-weak:#355735;
  --good:#0abf53;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

.container{max-width:1120px;margin:36px auto;padding:0 20px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:22px;
}

.card__title{
  text-align:center;
  font-weight:700;
  letter-spacing:.3px;
  margin:0 0 10px;
}

.card__image{
  height:120px;
  border-radius:14px;
  background:linear-gradient(180deg,#eef2f8,#e8edf6);
  display:grid;place-items:center;
  color:var(--muted);
  font-size:12px;
}

.qty{
  display:flex;align-items:center;justify-content:center;gap:28px;
  margin:12px 0 6px;
}
.qty__btn{
  width:42px;height:42px;border-radius:12px;border:1px solid var(--ring);
  background:#fff;display:grid;place-items:center;font-size:22px;font-weight:700;
  cursor:pointer;user-select:none;
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.qty__btn:hover{background:var(--accent-weak)}
.qty__btn:active{transform:translateY(1px)}
.qty__value{min-width:24px;text-align:center;font-size:18px;font-weight:700}

.label{color:var(--muted);text-align:center;margin:10px 0 8px}

.price-pill{
  margin:0 auto 10px;
  width:180px;height:42px;border-radius:12px;
  background:#fff;border:1px solid var(--ring);
  display:grid;place-items:center;font-weight:800;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}

.range{ -webkit-appearance:none; appearance:none; height:40px; width:100%; background:transparent; }
.range:focus{ outline:none }
.range::-webkit-slider-runnable-track{ height:6px; background:#e6eaf2; border-radius:999px }
.range::-moz-range-track{ height:6px; background:#e6eaf2; border-radius:999px }
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%; margin-top:-6px;
  background:#fff; border:2px solid var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:#fff; border:2px solid var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 6px rgba(46,107,255,.2); border-color:var(--accent) }

.note{
  font-size:13px;color:var(--muted);
  margin:24px 0 28px;
}

.kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:820px){.kpis{grid-template-columns:1fr}}
.kpi{
  background:#eef3ff;border:1px solid #dae4ff;color:var(--text);
  border-radius:22px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.kpi__label{color:var(--muted)}
.kpi__value{font-size:26px;font-weight:900;letter-spacing:.3px}


/* ===================== */
/* Разметка с картинкой справа */
.profitability-layout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.profitability-left {
  flex: 1;
  min-width: 0;
}

.profitability-right {
  flex: 0 0 38%;
}

.profitability-image {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  border-radius: 28px;
  display: block;
}

@media (max-width: 1057px) {
  .profitability-layout {
    flex-direction: column;
  }
  .profitability-right {
    flex: unset;
  }
  .profitability-image {
    max-height: none;
    height: 340px;
  }
}