/* KLÍMA-TECH / FEHÉR-ARANY MESTER
 * Alap: a felhasználó 1024 × 1536 px-es referenciája.
 * 1 egység a referencia 1 pixelének felel meg 1024 px szélességen.
 * Az egyetlen méretalap a külső .ktf, nem a belső tartalomszélesség.
 * Adatok és képek a HTML-ben cserélhetők. Nincs Enfold-függő szelektor.
 */

/* 1. Elkülönített alapok */
.ktf {
  --ktf-unit: .09765625cqi;
  --ktf-ink: #0c1725;
  --ktf-paper: #fcfbf7;
  --ktf-line: #d8d0c3;
  --ktf-gold: #be9045;
  --ktf-metal: linear-gradient(124deg,#fff4be 0%,#e9c681 10%,#cfa660 24%,#e4c17f 36%,#fde7ac 48%,#dbb46f 64%,#f9e4a9 84%,#c79a51 100%);
  container: ktf / inline-size;
  width: 100%; max-width: var(--ktf-max-width, 1024px); margin-inline: auto;
  box-sizing: border-box; color: var(--ktf-ink); background: var(--ktf-paper);
  font-family: 'KTF Roboto', Arial, sans-serif;
  font-weight: 400; font-size: 16px; line-height: 1.2;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.ktf *, .ktf *::before, .ktf *::after { box-sizing: border-box; }
.ktf :is(h2,p,ul,li,figure) { margin: 0; padding: 0; }
.ktf :is(ul,li) { list-style: none; }
.ktf :is(h2,strong) { color: inherit; text-transform: none; }
.ktf img { display: block; max-width: 100%; height: auto; border: 0; }
.ktf [data-field] { overflow-wrap: anywhere; }
.ktf .ktf-icon { display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }

/* 2. Kettős keret és a referencia halvány háttérdísze */
.ktf .ktf-frame {
  position: relative; isolation: isolate;
  margin: calc(17 * var(--ktf-unit)) calc(24 * var(--ktf-unit));
  padding: calc(24 * var(--ktf-unit)) calc(27 * var(--ktf-unit)) calc(18 * var(--ktf-unit));
  border: max(1px,calc(1.5 * var(--ktf-unit))) solid #493c2c;
  border-radius: calc(31 * var(--ktf-unit));
  background: var(--ktf-paper);
}
.ktf .ktf-frame::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(8 * var(--ktf-unit)); border: max(.6px,calc(1 * var(--ktf-unit))) solid #dbb77a;
  border-radius: calc(26 * var(--ktf-unit));
  background:
    linear-gradient(135deg,#dfbd83 0 17%,transparent 17.2%) top left / calc(75 * var(--ktf-unit)) calc(75 * var(--ktf-unit)) no-repeat,
    linear-gradient(225deg,#dfbd83 0 17%,transparent 17.2%) top right / calc(75 * var(--ktf-unit)) calc(75 * var(--ktf-unit)) no-repeat,
    linear-gradient(45deg,#dfbd83 0 17%,transparent 17.2%) bottom left / calc(75 * var(--ktf-unit)) calc(75 * var(--ktf-unit)) no-repeat,
    linear-gradient(315deg,#dfbd83 0 17%,transparent 17.2%) bottom right / calc(75 * var(--ktf-unit)) calc(75 * var(--ktf-unit)) no-repeat;
}
.ktf .ktf-art {
  position: absolute; z-index: -1; pointer-events: none;
  inset: calc(8 * var(--ktf-unit)) calc(8 * var(--ktf-unit)) auto;
  height: calc(706 * var(--ktf-unit)); overflow: hidden; border-radius: calc(26 * var(--ktf-unit));
  background: url('../assets/paper-pattern.svg') top center / 100% 100% no-repeat;
}

/* 3. Cím és külön cserélhető termékkép */
.ktf .ktf-heading { min-height: calc(139 * var(--ktf-unit)); text-align: center; }
.ktf .ktf-title { font: 800 calc(64 * var(--ktf-unit))/1.094 'KTF Inter',Arial,sans-serif; letter-spacing: calc(-1.5 * var(--ktf-unit)); color: #161f28; }
.ktf .ktf-capacity { font: 700 calc(62 * var(--ktf-unit))/1.113 'KTF Roboto',Arial,sans-serif; letter-spacing: calc(-1.6 * var(--ktf-unit)); color: #625d58; }
.ktf .ktf-visual { position: relative; height: calc(565 * var(--ktf-unit)); }
.ktf .ktf-product { position: absolute; inset: calc(-9 * var(--ktf-unit)) calc(21 * var(--ktf-unit)) calc(-15 * var(--ktf-unit)); }
.ktf .ktf-product img { width: 100%; height: 100%; object-fit: contain; }

/* 4. Jelvény: csak a díszítés SVG, minden felirat HTML */
.ktf .ktf-seal { position: absolute; z-index: 2; top: calc(-72 * var(--ktf-unit)); left: calc(-2 * var(--ktf-unit)); width: calc(200 * var(--ktf-unit)); aspect-ratio: 1; transform: rotate(-16deg); color: #291b05; text-align: center; filter: drop-shadow(1px 3px 2px #70582a33); }
.ktf .ktf-seal::before { content: ''; position: absolute; z-index: -1; inset: -7%; background: url('../assets/seal-base.svg') center / 100% 100% no-repeat; }
.ktf .ktf-seal-years { display: block; margin-top: 14%; font: 850 calc(43 * var(--ktf-unit))/1.04 'KTF Inter',Arial,sans-serif; letter-spacing: calc(-2 * var(--ktf-unit)); text-transform: uppercase; }
.ktf .ktf-seal-brand { display: flex; gap: calc(5 * var(--ktf-unit)); align-items: center; justify-content: center; margin: 2% 7% 0; min-height: calc(37 * var(--ktf-unit)); background: linear-gradient(90deg,#b48535,#855409 50%,#a87823); color: #fff9e7; font: italic 800 calc(30 * var(--ktf-unit))/1 'KTF Inter',Arial,sans-serif; }
.ktf .ktf-seal-mark { width: calc(29 * var(--ktf-unit)); height: calc(27 * var(--ktf-unit)); object-fit: contain; }
.ktf .ktf-seal-mark[hidden] { display: none; }
.ktf .ktf-seal-note { display: block; width: 76%; margin: 3% auto 0; font: 750 calc(19 * var(--ktf-unit))/1.08 'KTF Roboto',Arial,sans-serif; text-transform: uppercase; }

/* 5. Az adatmezők: a referencia sorai 127 / 97 / 94 px magasak */
.ktf .ktf-specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 calc(10 * var(--ktf-unit)); border-top: 1px solid var(--ktf-line); }
.ktf .ktf-spec { display: grid; grid-template-columns: calc(162 * var(--ktf-unit)) minmax(0,1fr); align-items: center; min-height: calc(97 * var(--ktf-unit)); border-bottom: 1px solid var(--ktf-line); }
.ktf .ktf-spec:nth-child(-n+2) { min-height: calc(127 * var(--ktf-unit)); }
.ktf .ktf-spec:nth-child(odd) { border-right: 1px solid var(--ktf-line); }
.ktf .ktf-spec:nth-child(even) { grid-template-columns: calc(170 * var(--ktf-unit)) minmax(0,1fr); }
.ktf .ktf-spec:nth-last-child(-n+2) { min-height: calc(94 * var(--ktf-unit)); border-bottom: 0; }
.ktf .ktf-spec > .ktf-icon { width: calc(64 * var(--ktf-unit)); height: calc(66 * var(--ktf-unit)); margin-left: calc(40 * var(--ktf-unit)); }
.ktf .ktf-spec:nth-child(even) > .ktf-icon { margin-left: calc(48 * var(--ktf-unit)); }
.ktf .ktf-spec:first-child > .ktf-icon { width: calc(70 * var(--ktf-unit)); height: calc(76 * var(--ktf-unit)); margin-left: calc(36 * var(--ktf-unit)); }
.ktf .ktf-spec:nth-child(3) > .ktf-icon { width: calc(58 * var(--ktf-unit)); height: calc(56 * var(--ktf-unit)); margin-left: calc(42 * var(--ktf-unit)); }
.ktf .ktf-warm { color: #da4d2a; }
.ktf .ktf-quiet { color: #68645e; }
.ktf .ktf-gold { color: #be9045; }
.ktf .ktf-label { display: block; font: 400 calc(25 * var(--ktf-unit))/1.07 'KTF Roboto Condensed',Arial,sans-serif; letter-spacing: 0; }
.ktf .ktf-value { display: block; font: 700 calc(34.5 * var(--ktf-unit))/1.17 'KTF Inter',Arial,sans-serif; letter-spacing: 0; }
.ktf .ktf-efficiency { display: flex; flex-wrap: nowrap; align-items: center; gap: calc(13 * var(--ktf-unit)); margin-top: calc(2 * var(--ktf-unit)); font: 750 calc(30 * var(--ktf-unit))/1 'KTF Inter',Arial,sans-serif; }
.ktf .ktf-energy { min-width: calc(94 * var(--ktf-unit)); padding: calc(1 * var(--ktf-unit)) calc(16 * var(--ktf-unit)) calc(2 * var(--ktf-unit)) calc(9 * var(--ktf-unit)); border-radius: calc(3 * var(--ktf-unit)); clip-path: polygon(0 0,83% 0,100% 50%,83% 100%,0 100%); background: linear-gradient(90deg,#00c748,#009238); color: #fff; font-size: calc(27 * var(--ktf-unit)); font-weight: 750; }
.ktf .ktf-spec:nth-child(n+3) .ktf-value { font-family: 'KTF Roboto Condensed',Arial,sans-serif; font-size: calc(35 * var(--ktf-unit)); }
.ktf .ktf-spec.ktf-warranty .ktf-value { font-family: 'KTF Roboto',Arial,sans-serif; font-size: calc(42 * var(--ktf-unit)); }
.ktf .ktf-warranty .ktf-label { font-family: 'KTF Roboto',Arial,sans-serif; font-size: calc(29 * var(--ktf-unit)); font-weight: 300; letter-spacing: calc(-.4 * var(--ktf-unit)); }
.ktf .ktf-sizing { display: flex; align-items: center; justify-content: center; min-height: calc(36 * var(--ktf-unit)); font: 300 calc(18 * var(--ktf-unit))/1.2 'KTF Roboto',Arial,sans-serif; text-align: center; }

/* 6. Árpanel és arany szalag – valódi szöveggel */
.ktf .ktf-offer { position: relative; display: grid; grid-template-rows: minmax(calc(89 * var(--ktf-unit)),auto) minmax(calc(48 * var(--ktf-unit)),auto); row-gap: calc(2 * var(--ktf-unit)); min-height: calc(156 * var(--ktf-unit)); padding: calc(9 * var(--ktf-unit)) calc(25 * var(--ktf-unit)) calc(8 * var(--ktf-unit)); border-radius: calc(18 * var(--ktf-unit)); background: radial-gradient(ellipse at 50% 0%,#30373d,#2a3036 65%,#252d33); color: #fff; text-align: center; }
.ktf .ktf-offer-label { position: absolute; top: calc(9 * var(--ktf-unit)); left: calc(28 * var(--ktf-unit)); display: block; font: 300 calc(24 * var(--ktf-unit))/1.1 'KTF Roboto',Arial,sans-serif; text-align: left; }
.ktf .ktf-price { position: relative; top: calc(7 * var(--ktf-unit)); display: flex; align-items: center; justify-content: center; gap: .22em; font: 900 calc(90 * var(--ktf-unit))/.98 'KTF Inter',Arial,sans-serif; letter-spacing: 0; white-space: nowrap; }
.ktf .ktf-ribbon { display: flex; align-items: center; justify-content: center; width: 83.33%; min-height: calc(48 * var(--ktf-unit)); margin: 0 auto; padding: calc(2 * var(--ktf-unit)) calc(5 * var(--ktf-unit)); border: 1px solid #c89a45; border-radius: calc(12 * var(--ktf-unit)); background: var(--ktf-metal); box-shadow: inset 0 2px 2px #fff8d4,inset 0 -2px 1px #a97a32; color: #080c09; font: 700 calc(39.4 * var(--ktf-unit))/1 'KTF Roboto',Arial,sans-serif; letter-spacing: calc(-.25 * var(--ktf-unit)); text-transform: uppercase; }

/* 7. Szerelési tartalom, garancia, nagy gomb és feltételek */
.ktf .ktf-installation { display: grid; grid-template-columns: 52.4% minmax(0,1fr); min-height: calc(129 * var(--ktf-unit)); margin: calc(8 * var(--ktf-unit)) calc(17 * var(--ktf-unit)) 0; align-items: center; }
.ktf .ktf-installation-title { font: 700 calc(27 * var(--ktf-unit))/1.1 'KTF Roboto',Arial,sans-serif; letter-spacing: calc(-.55 * var(--ktf-unit)); margin-bottom: calc(8 * var(--ktf-unit)); }
.ktf .ktf-installation-list { display: grid; gap: calc(2 * var(--ktf-unit)); padding-left: calc(12 * var(--ktf-unit)); font: 400 calc(25 * var(--ktf-unit))/1.12 'KTF Roboto Condensed',Arial,sans-serif; letter-spacing: 0; }
.ktf .ktf-installation-list li { display: flex; gap: calc(29 * var(--ktf-unit)); align-items: start; }
.ktf .ktf-check { display: grid; place-items: center; flex: 0 0 auto; width: calc(27 * var(--ktf-unit)); height: calc(27 * var(--ktf-unit)); border-radius: 50%; background: linear-gradient(135deg,#d6ae67,#b78939); color: #fff; }
.ktf .ktf-check .ktf-icon { width: 72%; height: 72%; stroke-width: 3.2; }
.ktf .ktf-labor { display: flex; gap: calc(22 * var(--ktf-unit)); align-items: center; min-height: calc(102 * var(--ktf-unit)); border-left: 1px solid var(--ktf-line); padding-left: calc(54 * var(--ktf-unit)); font: 650 calc(27 * var(--ktf-unit))/1.12 'KTF Roboto',Arial,sans-serif; letter-spacing: calc(-.4 * var(--ktf-unit)); }
.ktf .ktf-labor .ktf-icon { width: calc(85 * var(--ktf-unit)); height: calc(87 * var(--ktf-unit)); stroke-width: 1.7; }
.ktf .ktf-labor small { display: block; font: inherit; font-size: calc(25 * var(--ktf-unit)); }
.ktf .ktf-button { display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--ktf-unit)); min-height: calc(63 * var(--ktf-unit)); margin: calc(8 * var(--ktf-unit)) calc(1 * var(--ktf-unit)) 0; border: max(1px,calc(1.5 * var(--ktf-unit))) solid #b98634; border-radius: calc(13 * var(--ktf-unit)); padding: calc(4 * var(--ktf-unit)) calc(12 * var(--ktf-unit)); background: var(--ktf-metal); box-shadow: inset 0 2px 2px #fff8d4,inset 0 -2px 2px #b0833e; color: #070b08; font: 700 calc(40 * var(--ktf-unit))/1.12 'KTF Roboto',Arial,sans-serif; letter-spacing: 0; text-decoration: none; text-align: center; }
.ktf .ktf-button:hover { color: #070b08; filter: brightness(1.035); }
.ktf .ktf-button:focus-visible { outline: 3px solid #765322; outline-offset: 4px; }
.ktf .ktf-button .ktf-icon { width: calc(42 * var(--ktf-unit)); height: calc(42 * var(--ktf-unit)); stroke-width: 2.6; }
.ktf .ktf-footnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(34 * var(--ktf-unit)); padding: calc(10 * var(--ktf-unit)) calc(16 * var(--ktf-unit)) 0; font: 300 calc(16 * var(--ktf-unit))/1.2 'KTF Roboto Condensed',Arial,sans-serif; letter-spacing: 0; color: #545a60; }
.ktf .ktf-footnotes p + p { border-left: 1px solid var(--ktf-line); padding-left: calc(23 * var(--ktf-unit)); }

/* 8. Azonos elrendezés asztali, tablet- és mobilméretben
 * Az adatpárok minden méreten 2 oszlop × 3 sorban maradnak.
 * Az alapszerelés / munkagarancia és a lábjegyzetek is egymás mellett állnak.
 * Az ikonok, betűk és térközök a közös --ktf-unit mérettel alkalmazkodnak;
 * ezért nincs egyoszlopos töréspont vagy keskeny nézetre külön másolt CSS.
 * A rugalmas sorok hosszabb, átírt tartalom esetén együtt nőhetnek.
 */

/* 9. Szabadon megadható mobilméret, az asztali mérettől függetlenül.
 * Csak a kártya szélességét szabályozza, az adatpárokat nem rendezi át.
 * Példa a .ktf HTML-elemen:
 * style="--ktf-max-width: 1024px; --ktf-mobile-max-width: 360px;"
 * A width:100% miatt a kártya kisebb szülőnél automatikusan belefér.
 */
@media (max-width: 600px) {
  .ktf { max-width: var(--ktf-mobile-max-width, var(--ktf-max-width, 1024px)); }
}