/* Стилі калькуляторів. Згенеровано to_site_css.py — правити css.html, не цей файл. */
.calc{
  --c-chart-bar:#7f8f1c; --c-chart-grid:#e2e1d7;
  --c-ground:#f5f4ef; --c-card:#ffffff; --c-ink:#15150f; --c-ink-soft:#5d5d52;
  --c-line:#e2e1d7; --c-line-strong:#c9c8ba;
  --c-lime:#d4e534; --c-lime-ink:#1d1f06;
  --c-good:#2f7d4f; --c-warn:#a96a13; --c-bad:#a93a2c;
  --c-shadow:0 1px 2px rgba(20,20,12,.06), 0 8px 24px rgba(20,20,12,.05);
  --c-r:14px;
  --c-display:'Unbounded','Inter',sans-serif;
  --c-body:'Inter',-apple-system,'Segoe UI',sans-serif;
}
.calc *{box-sizing:border-box}
.calc{ color:var(--c-ink); font:16px/1.6 var(--c-body); }
.calc .wrap{max-width:900px; margin:0 auto}
.calc .eyebrow{font:600 11px/1.2 var(--c-body); letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-soft)}
.calc h1{font:800 clamp(26px,5vw,38px)/1.1 var(--c-display); margin:6px 0 10px; letter-spacing:-.01em}
.calc .lead{color:var(--c-ink-soft); max-width:62ch; margin:0 0 22px}
.calc .card{background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-r); box-shadow:var(--c-shadow)}
.calc .form{padding:18px}
.calc .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.calc .field{display:flex; flex-direction:column; gap:7px}
.calc .field label{font:600 13px/1.2 var(--c-body)}
.calc .field .hint{font-size:12px; color:var(--c-ink-soft)}
.calc input[type=number], .calc select{
  font:inherit; font-size:16px; padding:11px 12px; border-radius:10px;
  border:1px solid var(--c-line-strong); background:var(--c-ground); color:var(--c-ink); width:100%;
}
.calc input[type=number]:focus-visible, .calc select:focus-visible, .calc button:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px}
.calc .seg{display:flex; gap:6px; flex-wrap:wrap}
.calc .seg button{
  font:600 13.5px/1 var(--c-body); cursor:pointer; padding:10px 12px; border-radius:999px;
  border:1px solid var(--c-line-strong); background:transparent; color:var(--c-ink);
}
.calc .seg button.on{background:var(--c-ink); color:var(--c-ground); border-color:var(--c-ink)}
.calc .result{margin-top:18px; padding:20px 18px; background:linear-gradient(0deg,rgba(212,229,52,.14),transparent);
        border-top:1px solid var(--c-line)}
.calc .kw{font:800 clamp(34px,7vw,52px)/1 var(--c-display); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.calc .kw small{font:600 15px/1 var(--c-body); color:var(--c-ink-soft); margin-left:8px}
.calc .why{margin-top:12px; font-size:13.5px; color:var(--c-ink-soft)}
.calc .why b{color:var(--c-ink); font-weight:600}
.calc .chain{margin:8px 0 0; padding:0; list-style:none; font-size:13px; font-variant-numeric:tabular-nums}
.calc .chain li{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-top:1px solid var(--c-line)}
.calc .chain li:first-child{border-top:0}
.calc .chain li span:last-child{font-weight:600; color:var(--c-ink)}
.calc .picks{margin-top:26px}
.calc .pick{display:flex; gap:14px; align-items:center; padding:13px 16px; border-top:1px solid var(--c-line)}
.calc .pick:first-of-type{border-top:0}
.calc .badge{flex:0 0 74px; text-align:center; font:800 17px/1 var(--c-display); font-variant-numeric:tabular-nums;
       background:var(--c-ground); border:1px solid var(--c-line); border-radius:10px; padding:11px 6px}
.calc .badge small{display:block; font:600 10px/1.3 var(--c-body); color:var(--c-ink-soft); letter-spacing:.06em; margin-top:3px}
.calc .pick-main{flex:1; min-width:0}
.calc .pick-name{font:600 15px/1.3 var(--c-body)}
.calc .pick-sub{font-size:12.5px; color:var(--c-ink-soft); margin-top:2px}
.calc .pick-price{font:800 18px/1 var(--c-display); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc .tag{display:inline-block; font:600 10.5px/1 var(--c-body); letter-spacing:.08em; text-transform:uppercase;
     padding:4px 7px; border-radius:6px; background:var(--c-lime); color:var(--c-lime-ink); margin-left:8px; vertical-align:middle}
.calc .tag.soft{background:transparent; border:1px solid var(--c-line-strong); color:var(--c-ink-soft)}
.calc .more{display:block; width:100%; margin-top:2px; padding:13px; cursor:pointer; font:600 14px/1 var(--c-body);
      border:0; border-top:1px solid var(--c-line); background:transparent; color:var(--c-ink)}
.calc .empty{padding:18px; color:var(--c-ink-soft); font-size:14px}
.calc .note{margin-top:14px; font-size:12.5px; color:var(--c-ink-soft)}
.calc details.cfg{margin-top:26px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--c-r)}
.calc details.cfg>summary{padding:14px 18px; cursor:pointer; font:600 14px/1 var(--c-body); list-style:none}
.calc details.cfg>summary::-webkit-details-marker{display:none}
.calc details.cfg>summary::after{content:"▾"; float:right; color:var(--c-ink-soft)}
.calc details.cfg[open]>summary::after{content:"▴"}
.calc .cfg-body{padding:4px 18px 18px}
.calc table.k{width:100%; border-collapse:collapse; font-size:13.5px; font-variant-numeric:tabular-nums}
.calc table.k th{text-align:left; font:600 10.5px/1.2 var(--c-body); letter-spacing:.1em; text-transform:uppercase;
           color:var(--c-ink-soft); padding:0 8px 6px 0}
.calc table.k td{padding:6px 8px 6px 0; border-top:1px solid var(--c-line)}
.calc table.k input{width:78px; font:inherit; padding:5px 8px; border-radius:7px;
              border:1px solid var(--c-line-strong); background:var(--c-ground); color:var(--c-ink)}
.calc .h2{font:800 clamp(22px,4vw,28px)/1.15 var(--c-display); margin:40px 0 8px; letter-spacing:-.01em}
.calc .need{font:800 22px/1.2 var(--c-display); font-variant-numeric:tabular-nums}
.calc .fuels{border-top:1px solid var(--c-line)}
.calc .fuel{display:grid; grid-template-columns:132px 150px 1fr auto; gap:12px; align-items:center;
      padding:12px 16px; border-top:1px solid var(--c-line)}
.calc .fuel:first-child{border-top:0}
.calc .fuel.best{background:linear-gradient(0deg,rgba(212,229,52,.16),transparent)}
.calc .fuel-name{font:600 14.5px/1.25 var(--c-body)}
.calc .fuel-name small{display:block; font-weight:400; font-size:12px; color:var(--c-ink-soft)}
.calc .fuel-price{display:flex; gap:6px}
.calc .fuel-price input:nth-child(2){max-width:86px}
.calc .fuel input{width:100%; font:inherit; font-size:15px; padding:9px 10px; border-radius:9px;
            border:1px solid var(--c-line-strong); background:var(--c-ground); color:var(--c-ink)}
.calc .fuel-use{font-size:13px; color:var(--c-ink-soft); font-variant-numeric:tabular-nums}
.calc .fuel-cost{font:800 17px/1.15 var(--c-display); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.calc .fuel-cost small{display:block; font:400 12px/1.4 var(--c-body); color:var(--c-ink-soft)}
@media (max-width:620px){
  .calc .fuel{grid-template-columns:1fr 1fr; gap:8px}
  .calc .fuel-name{grid-column:1/-1}
  .calc .fuel-price{grid-column:1/-1}
  .calc .fuel-use{grid-column:1/-1}
  .calc .fuel-cost{text-align:left}
}
.calc .chart{margin:0; padding:16px 18px 18px; border-top:1px solid var(--c-line)}
.calc .chart figcaption{font:600 11px/1.2 var(--c-body); letter-spacing:.14em; text-transform:uppercase;
                  color:var(--c-ink-soft); margin-bottom:12px}
.calc .chart-area{position:relative}
.calc .chart-area svg{display:block; width:100%; height:auto; overflow:visible}
.calc .bar{fill:var(--c-chart-bar)}
.calc .bar.off{fill:var(--c-line)}
.calc .bar:hover{filter:brightness(1.08)}
.calc .gridline{stroke:var(--c-chart-grid); stroke-width:1}
.calc .axis-txt{fill:var(--c-ink-soft); font:11px var(--c-body)}
.calc .peak-txt{fill:var(--c-ink); font:600 11.5px var(--c-body)}
.calc .chart-read{margin-top:8px; min-height:20px; font-size:13px; color:var(--c-ink-soft); font-variant-numeric:tabular-nums}
.calc .chart-read b{color:var(--c-ink)}
.calc .tip{margin:12px 0 0; padding:10px 12px; border-left:2px solid var(--c-lime);
     font-size:13.5px; color:var(--c-ink-soft); background:var(--c-card); border-radius:0 8px 8px 0}
.calc .tip b{color:var(--c-ink)}
.calc .save{margin-top:16px}
.calc .btn{font:600 14px/1 var(--c-body); cursor:pointer; padding:12px 16px; border-radius:10px;
     border:1px solid var(--c-line-strong); background:var(--c-card); color:var(--c-ink)}
.calc .btn:hover{border-color:var(--c-ink)}
.calc .btn:focus-visible{outline:2px solid var(--c-ink); outline-offset:2px}
@media print{
  .calc .seg, .calc .btn, .calc details.cfg, .calc .more{display:none !important}
}
.calc .foot{margin-top:26px; font-size:13px; color:var(--c-ink-soft)}

/* --- палітра сайту (перекриває значення з артефакта) --- */
.calc{
  --c-ground:#f7f7f2; --c-card:#ffffff; --c-ink:#202020; --c-ink-soft:#7a7a7a;
  --c-line:#e4e4e1; --c-line-strong:#c9c9c9;
  --c-lime:#d9e021; --c-lime-ink:#1d1f06;
  --c-chart-bar:#b7bd0f; --c-chart-grid:#e4e4e1;
  --c-shadow:0 2px 10px rgba(20,20,20,.06);
  --c-r:18px;

  /* вирівнюємо колонку калькулятора по тій самій сітці, що й заголовок сторінки */
  max-width:1240px; margin:0 auto; padding:0 24px 70px;
}
.calc .wrap{ max-width:960px; margin:0 }
/* ширша колонка сайту — даємо полям більше місця, щоб кнопки не ламались */
.calc .grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
@media (max-width:640px){ .calc{ padding:0 16px 56px } }

/* вкладки калькуляторів */
.calc-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px }
.calc-tab{
  display:inline-flex; align-items:baseline; gap:7px; padding:10px 16px; border-radius:999px;
  font:600 14px/1 var(--c-body); border:1px solid var(--c-line-strong); color:var(--c-ink-soft);
  text-decoration:none;
}
.calc-tab.is-active{ background:var(--c-ink); border-color:var(--c-ink); color:#fff }
.calc-tab.is-soon{ opacity:.55; cursor:default }
.calc-tab small{ font:600 10px/1 var(--c-body); letter-spacing:.08em; text-transform:uppercase }

/* картка підбору — тепер посилання на товар */
.calc a.pick{ text-decoration:none; color:inherit; transition:background .18s }
.calc a.pick:hover{ background:rgba(20,20,20,.035) }
.calc a.pick:hover .pick-name{ text-decoration:underline }
.calc .pick-photo{
  flex:0 0 58px; height:58px; border-radius:10px; overflow:hidden; background:#fff;
  border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center;
}
.calc .pick-photo img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
.calc .badge{ flex:0 0 74px }
.calc .pick-name, .calc .pick-sub, .calc .pick-price{ display:block }
@media (max-width:520px){
  .calc .pick{ flex-wrap:wrap }
  .calc .pick-photo{ flex-basis:46px; height:46px }
  .calc .pick-price{ width:100%; text-align:right }
}