/* Model pages. The dark band says the name and what it means for your home; below it, the sourced table, one fold per size. */
.model-top { padding: 12px 0 18px; }
/* One main action. With the visitor's inputs, the cost goes first, over it. */
.model-head { --glyph: clamp(48px, 15vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.model-head h1 { flex: 1 1 calc(100% - var(--glyph) - 20px); min-width: 0; text-wrap: balance; }
.model-head .title-glyph { order: 1; }
.model-head .ask { order: 3; }
.ask a { min-height: 56px; padding: 0 22px; border-radius: 6px; background: #f5f5f7; color: #1d1d1f; font-weight: 600; }
.model-head .home { order: 2; flex-basis: 100%; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.home-where, .home-cost, .home-more { display: block; }
.home-where { font-size: 15px; line-height: 20px; color: var(--muted); }
.home-cost { margin-top: 4px; font-size: 21px; font-weight: 600; line-height: 1.24; letter-spacing: -0.016em; }
.home-figure { color: var(--cold); }
.home-more { margin-top: 2px; font-size: 15px; line-height: 20px; }

.model { padding: 6px 0 48px; }
.about { padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.35; }
.series-note { margin-top: 8px; max-width: 640px; }

/* The folds: one hairline row each, the same as a row in the calculator's list. */
.size, .sources { border-top: 1px solid var(--line); }
.size:first-of-type { border-top: 0; }
.sources { border-bottom: 1px solid var(--line); }
.model summary { display: flex; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 56px; cursor: pointer; list-style: none; }
.model summary::-webkit-details-marker { display: none; }
.fold-chevron { font-size: 24px; line-height: 1; color: var(--muted); }
.model details[open] > summary .fold-chevron { transform: rotate(90deg); }
.model details[open] { padding-bottom: 28px; }

.codes { color: var(--muted); font-size: 15px; }
.cold { margin-top: 12px; font-weight: 600; }

.specs { width: 100%; margin-top: 14px; border-collapse: collapse; border-top: 1px solid var(--line); }
.specs thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* On a phone the label keeps its one line and the value takes what is left. Only a label too long to sit beside
   its value wraps, at a space, and never into the value: the value's column is never under its own width. */
.specs tbody tr {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(min-content, 1fr);
  column-gap: 16px;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
}
.specs th, .specs td { padding: 0; text-align: left; font-weight: 400; }
.specs tbody th { padding: 10px 0; }
.specs .value { text-align: right; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
/* 44px tap area from the link's own box. The rows above give back the padding, so the table stays as tight. */
.specs .value a {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  position: relative; /* Above the note's cell: a two-line value reaches under it, and its whole box still answers a tap. */
  text-decoration-color: #aeaeb2;
  text-decoration-thickness: 1px;
}
.specs .value .absent { display: block; padding: 10px 0; color: var(--muted); font-weight: 400; white-space: normal; }
.specs .note { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.35; }
.specs .note:not(:empty) { padding-bottom: 10px; }
/* The size's own price. Its Osta is in the size's buy block (card #161), out of the table. */
.price-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 16px; }

/* The label opens its note on a phone. On a wide screen the note has its own column, so the label is plain text. */
.note-toggle { display: flex; align-items: center; column-gap: 6px; min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; text-align: left; font-weight: 400; cursor: pointer; }
.note-chevron { color: var(--muted); font-size: 18px; line-height: 1; }
.note-open .note-chevron { transform: rotate(90deg); }
@media (max-width: 767px) {
  .note-fold:not(.note-open) .note { display: none; }
}

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 20px; }
/* Küsi pakkumist steps back to an outline: Osta, by the price, is the filled one. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid #86868b;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.more { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.choose { color: var(--muted); font-size: 14px; }

.sources ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sources li { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.sources li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.sources li p { color: var(--muted); font-size: 14px; }

@media (min-width: 768px) {
  .model-top { padding: 44px 0 44px; }
  .model-head { --glyph: 96px; row-gap: 28px; }
  .ask a, .button { min-height: 48px; }
  .note-chevron { display: none; }
  .specs { table-layout: fixed; }
  .home-cost { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
  .model { padding: 32px 0 72px; }
  .model summary h2 { font-size: 24px; }
  .specs thead {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    color: var(--muted);
    font-size: 14px;
  }
  .specs thead th { padding: 10px 24px 10px 0; border-bottom: 1px solid var(--line); }
  .specs tbody tr { display: table-row; padding: 0; }
  .specs tbody th, .specs tbody td { padding: 12px 24px 12px 0; vertical-align: top; }
  .specs tbody td.value { padding-top: 0; padding-bottom: 0; }
  .specs .value a { display: inline-flex; justify-content: flex-start; align-items: flex-start; padding-top: 12px; }
  .specs tbody th { width: 30%; white-space: normal; }
  .specs .value { width: 20%; text-align: left; }
  .specs .value .absent { padding: 12px 0; white-space: nowrap; }
  .price-buy { justify-content: flex-start; align-items: baseline; }
  /* No Märkus column: the value has the rest of the row. */
  .specs-plain thead th:first-child { width: 30%; }
  .specs .note:not(:empty) { padding-bottom: 12px; }
  .specs .note { padding-right: 0; }
}

/* The number and its comparison may take two lines on a narrow phone. Its side is the other values' side. */
@media (max-width: 767px) {
  .specs tr[data-field^="noise"] .value, .specs tr[data-field^="noise"] .value a { white-space: normal; text-align: right; }
}
.noise-cold { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* Other shops: rows on a hairline, the link at the end of its line. */
.offers { margin-top: 20px; }
.offers-title { font-size: 15px; font-weight: 600; }
.offers-list { margin: 8px 0 0; padding: 0; list-style: none; }
.offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); }
.offer-what { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 1.35; }
.offer-what > span, .offer-cheaper { display: block; }
.offer-shop { color: var(--muted); font-size: 14px; }
.offer-cheaper { font-size: 14px; font-weight: 600; }
.offer-buy { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.offer-note { flex-basis: 100%; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* A generic category's model page: shops first, then the figures, then what is folded. Hairlines, no boxes. */
.cat-model .shops h2, .cat-model .figures h2 { padding: 14px 0 10px; }
.specs .value .plain { display: block; padding: 10px 0; white-space: normal; overflow-wrap: anywhere; }
/* A long model code (Beko BM3WFSU39413WPBB1 7004240002) doesn't fit beside its label on a 320px phone: then it goes to
   its own line, still at the right, and breaks only at its space. A short one stays beside the label. */
@media (max-width: 767px) {
  .specs tr[data-field="codes"] { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .specs tr[data-field="codes"] .value { flex: 0 1 auto; min-width: 0; margin-left: auto; }
  .specs tr[data-field="codes"] .value .plain { overflow-wrap: normal; }
  .specs tr[data-field="codes"] .note { flex-basis: 100%; }
}
.cat-model .figures { margin-top: 28px; }
.cat-model .how { margin-top: 28px; border-top: 1px solid var(--line); }
.cat-model .sources { border-top: 1px solid var(--line); }
/* Scoped to .cat-model: the air-to-air model page (PR #94) has its own .offers/.offer/.offer-note rules above, with a different structure. */
.cat-model .offers { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cat-model .offer { display: block; padding: 2px 0; border-top: 0; border-bottom: 1px solid var(--line); }
.offer-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; min-height: 44px; font-variant-numeric: tabular-nums; }
.cat-model .offer-note, .shops-note, .figures-note, .how-line, .cat-model .group-text { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.35; max-width: 640px; }
.cat-model .offer-note { margin: 0 0 8px; }
.cat-model .figures-note:first-of-type { margin-top: 14px; }
.how-line:first-of-type { margin-top: 0; }
.how-line + .how-line { margin-top: 10px; }
.how-links { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; font-size: 14px; }
.how-links a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
  .cat-model .shops h2, .cat-model .figures h2 { font-size: 24px; }
  .cat-model .figures { margin-top: 44px; }
  .specs .value .plain { padding: 12px 0; }
}

/* Card #161: the visitor's own figures and one buy block. In the band they follow the name, under one hairline, as the
   result's lead does: the figures on one baseline, the line of answers, then the offer and its Osta. */
.model-head .own, .model-head > .buy-band, .model-head .own-assumes { order: 2; flex-basis: 100%; }
.model-head .own { padding-top: 14px; border-top: 1px solid var(--line); }
.own-figures { display: flex; flex-wrap: wrap; align-items: flex-end; align-items: last baseline; gap: 12px 24px; font-size: 15px; line-height: 20px; }
.own-figures .row-part { display: block; flex: 1 1 0; min-width: max-content; }
.own-figures .row-part[hidden] { display: none; }
.own-figures .row-words { display: block; color: var(--muted); white-space: nowrap; }
.own-figures .row-figure { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.own-figures .row-total { flex-basis: 100%; }
.own-figures .row-total .row-figure { font-size: 32px; line-height: 38px; letter-spacing: -0.028em; }
.own-figures .row-from { margin-right: 2px; font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.own-figures .row-gap, .own-figures .row-noprice .row-figure, .own-figures .row-hot-none .row-figure { font-weight: 400; }
.own-figures .row-gap { flex-basis: 100%; color: var(--muted); }
/* The pump's figures are its colour (DESIGN.md: --cold for pump figures only). */
.home .own-figures .row-cost .row-figure, .home .own-figures .row-total .row-figure { color: var(--cold); }
.own-answers { margin-top: 6px; }
/* Inline, so the dots and spaces between the answers stay; the padding makes the 44px to tap. */
.own-answers-link { display: inline-block; padding: 12px 0; margin: -6px 0; color: var(--muted); font-size: 15px; line-height: 20px; text-decoration: none; }
.own-answers-link .own-answer { white-space: nowrap; }
@media (hover: hover) { .own-answers-link:hover { color: var(--ink); } }

/* One buy block: the shop's price to the cent, the shop, the day; the installment line when there is one; Osta, filled,
   and the quieter second way. In the band the fill is the light one, on white the ink one. */
.buy-block { font-size: 15px; line-height: 20px; }
.model-head > .buy-band, .home > .buy-band { padding-top: 14px; border-top: 1px solid var(--line); }
.home > .buy-band { margin-top: 16px; }
.buy-offer { color: var(--muted); }
.buy-price { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.buy-installment { margin-top: 4px; color: var(--muted); }
/* Card #152: a cheaper shop below doesn't show this size's codes, so the price is this one. Quiet, like the note. */
.buy-unverified { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.35; max-width: 640px; }
.buy-installment-line { display: block; color: var(--ink); }
.buy-installment-source { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -12px; font-size: 14px; color: var(--muted); text-decoration-color: var(--line); }
.buy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 14px; }
.buy-actions-ask { margin-top: 0; }
.buy-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}
.band-dark .buy-go { color: #1d1d1f; }
@media (hover: hover) {
  .buy-go:hover { background: #2c2c2e; }
  .band-dark .buy-go:hover { background: #fff; }
}
.buy-go:active { transform: scale(0.985); }
.buy-ask { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; }
.buy-actions .choose { flex-basis: 100%; }
.buy-note { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; max-width: 640px; }
/* Another size's buy block, at the end of its fold. */
.buy-fold { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.size .actions:empty { display: none; }

/* The heat pump's saving stays in sight; the rest is behind one tap. */
.home > .home-where { margin-bottom: 12px; }
.home .home-saving { margin-top: 10px; font-size: 17px; line-height: 1.35; }
.home .home-saving + .home-saving { margin-top: 2px; }
.model-head .own-assumes { margin-top: -6px; }
.own-assumes > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; width: fit-content; color: var(--muted); font-size: 15px; cursor: pointer; list-style: none; }
.own-assumes > summary::-webkit-details-marker { display: none; }
.own-assumes > summary .fold-chevron { font-size: 20px; }
.own-assumes[open] > summary .fold-chevron { transform: rotate(90deg); }
.own-assumes-line { max-width: 640px; color: var(--muted); font-size: 15px; line-height: 20px; }
.own-assumes-line + .own-assumes-line { margin-top: 6px; }
/* With the visitor's figures the band is the answer: the name a step quieter than the page title it was. */
.model-head.has-own { row-gap: 14px; }

@media (min-width: 768px) {
  .own-figures { gap: 10px 40px; }
  .own-figures .row-part, .own-figures .row-total { flex: 0 1 auto; }
  .own-figures .row-figure { font-size: 28px; line-height: 34px; }
  .own-figures .row-total .row-figure { font-size: 48px; line-height: 46px; letter-spacing: -0.032em; }
  .own-answers-link { font-size: 17px; line-height: 24px; }
  .buy-go { min-height: 48px; }
  .buy-block, .buy-offer { font-size: 17px; line-height: 24px; }
  .home .home-saving { font-size: 19px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .buy-go:active { transform: none; }
}
.home > .buy-band + .home-saving { margin-top: 20px; }

/* Card #153's year by months, right under the figure row: quiet, whole euros that add up to the year shown. */
.own-months { margin-top: 10px; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 20px; text-wrap: pretty; }
/* The bill's part keeps `.home-cost` for its tests; in the figure row it reads as its siblings. */
.own-figures .row-part.home-cost { margin-top: 0; font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: normal; }
.home .own-figures .row-month .row-figure { color: var(--cold); }
@media (max-width: 767px) {
  .own-figures { row-gap: 8px; }
  .own-months { margin-top: 8px; font-size: 14px; line-height: 18px; }
}

/* On a phone the buy block comes before the month line (card #161 QA): Osta stays on the first screen for every model,
   the 12 months right after it. From 768px the line is right under the figure row. */
.model-head > .own-months { order: 2; flex-basis: 100%; margin-top: -8px; }
@media (max-width: 767px) {
  .model-head > .own-months { order: 3; margin-top: 0; }
  .home:not([hidden]) { display: flex; flex-direction: column; }
  .home > * { order: 0; }
  .home > .own-months { order: 1; margin-top: 12px; }
  .home > .home-saving, .home > .home-more:not(.home-where) { order: 2; }
}

/* A class letter's plain words beside it (Tarvo, 2026-11-08): quieter than the letter. */
.specs .num-plain { color: var(--muted); font-size: 15px; }
/* A letter stays one word; its words are a sentence and wrap. Left to nowrap they set the value column's least width,
   so the column ran past the phone's edge and over its label (visitor audit, 16b76c6). */
.specs .value:has(> .num-plain:not([hidden])) { white-space: normal; }
/* On a phone the letter stays beside its label and the words take their own line, the row's whole width. */
@media (max-width: 767px) {
  .specs .value:has(> .num-plain:not([hidden])) { display: contents; }
  .specs .value > .num-plain { grid-row: 2; grid-column: 1 / -1; padding-bottom: 10px; }
  .specs .value > .num-plain:has(+ .info) { padding-right: 28px; }
  .specs .value > .num-plain + .info { grid-row: 2; grid-column: 2; justify-self: end; align-self: end; padding-bottom: 10px; }
}