/* 1) Keep the whole calculator from stretching too wide */
#kalkulaatorid .content-wrapper{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Robust two-column layout; collapses to one column on smaller screens */
#kalkulaatorid #box{
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(320px, 35vw, 520px);
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}
@media (max-width: 900px){
  #kalkulaatorid #box{ grid-template-columns: 1fr; }
}

/* 3) Neutralize legacy column floats/widths so the grid above wins */
#kalkulaatorid .col-7,
#kalkulaatorid .col-5{
  width: auto !important;
  float: none !important;
  display: block !important;
}

/* 4) Keep the total-sum block in normal flow (no absolute positioning) */
#kalkulaatorid #graf .prices,
#kalkulaatorid #graf .price_box,
#kalkulaatorid #graf .price{
  position: static !important;
  display: block;
}
/* If your legacy CSS positioned the number, hard-reset it too */
#kalkulaatorid #graf .price_price,
#kalkulaatorid #graf .price_sub{
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* 5) Make the big number scale nicely on ultra-wide screens */
#kalkulaatorid #graf .price_price{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  white-space: nowrap;
}

/* 6) Keep the right column visible when scrolling on desktops (optional) */
@media (min-width: 1024px){
  #kalkulaatorid #graf{ position: sticky; top: 16px; }
}

/* 7) Minor wide-screen polish for outputs & wellness chips */
#kalkulaatorid output{
  display: inline-block;
  min-width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#kalkulaatorid .chkrow2{ display: flex; flex-wrap: wrap; gap: 10px; }
#kalkulaatorid .chkrow2 label{ white-space: nowrap; }