/*
 * grzejniki-lux.pl — „Pracownia”: Instrument Sans (szerokość zmienna), papier i butelkowa zieleń, mosiądz jako akcent,
 * duże ciasne nagłówki, przyciski z promieniem 10 px i strzałką, etykieta-pigułka z kropką jak w hero. Rysunek grzejnika
 * kreską. Tokeny z motywu grzejniki-lux (assets/css/main.css, styl.css).
 */
.klxnl--g { --g-acc: var(--cu, #1F4D3C); --g-acc-d: var(--cu-dark, #163A2D); --g-acc-l: var(--cu-light, #A7CDB7); --g-tint: var(--acc-tint, #E3ECE6); --g-ink: var(--ink, #1D1A17); --g-mute: var(--mute, #6A6158); --g-line: var(--line, #E4DCCF); --g-field: var(--line-3, #968B7C); --g-paper: var(--paper, #F6F2EB); --g-studio: var(--studio, #F1EBE1); --g-forest: var(--forest, #173A2E); --g-brass: var(--brass, #A97B3E); --g-brass-ink: var(--brass-ink, #7A5522); font-family: var(--font, "Instrument Sans", Arial, sans-serif); color: var(--g-ink); }

/* ---------- formularz */
.klxnl--g .klxnl-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.klxnl--g .klxnl-input { height: 52px; padding: 0 16px; border: 1px solid var(--g-field); border-radius: 10px; background: #fff; color: var(--g-ink); font-size: 16px; }
.klxnl--g .klxnl-input::placeholder { color: #8E8478; }
.klxnl--g .klxnl-input:focus { outline: 0; border-color: var(--g-acc); box-shadow: var(--ring, 0 0 0 3px rgba(31, 77, 60, .2)); }
.klxnl--g .klxnl-btn { height: 52px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--g-acc); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.01em; transition: background .2s; }
.klxnl--g .klxnl-btn:hover { background: var(--g-acc-d); }
.klxnl--g .klxnl-btn:focus-visible, .klxnl--g .klxnl-pop__x:focus-visible, .klxnl--g .klxnl-cta:focus-visible { outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--g-acc); }
.klxnl--g .klxnl-consent { font-size: 13px; line-height: 1.5; color: var(--g-mute); }
.klxnl--g .klxnl-consent input { accent-color: var(--g-acc); }
.klxnl--g .klxnl-info, .klxnl--g .klxnl-fine { font-size: 12.5px; line-height: 1.5; color: var(--g-mute); }
.klxnl--g .klxnl-info a, .klxnl--g .klxnl-consent a { color: var(--g-acc); text-decoration: underline; text-underline-offset: 3px; }
.klxnl--g .klxnl-msg { padding: 12px 14px; border-radius: 10px; background: var(--ok-bg, #E2EEE5); color: var(--ok, #22593A); font-size: 15px; font-weight: 600; }
.klxnl--g .klxnl-msg.is-err { background: var(--wait-bg, #F4E8D2); color: #8A3A1E; }

/* ---------- okno */
.klxnl--g .klxnl-pop__scrim { background: rgba(29, 26, 23, .5); }
.klxnl--g .klxnl-pop__box { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); border-radius: 20px; background: var(--g-paper); box-shadow: 0 2px 6px rgba(29, 26, 23, .06), 0 22px 44px -20px rgba(29, 26, 23, .38); }
.klxnl--g .klxnl-pop__x { border-radius: 10px; color: var(--g-ink); }
.klxnl--g .klxnl-pop__x:hover { background: var(--g-line); }
.klxnl--g .klxnl-pop__art { margin: 10px 0 10px 10px; min-height: calc(100% - 20px); padding: 30px 26px; border-radius: 14px; background: var(--g-studio); color: var(--g-acc); }
.klxnl--g .klxnl-pop__main { padding: 40px 40px 32px 36px; }
.klxnl--g .klxnl-pop__eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 8px; background: var(--g-tint); color: var(--g-acc); font-size: 13px; font-weight: 600; }
.klxnl--g .klxnl-pop__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-acc); }
.klxnl--g .klxnl-pop__t { font-size: 32px; line-height: 1.05; font-weight: 600; letter-spacing: -.035em; padding-right: 24px; }
.klxnl--g .klxnl-pop__t em { font-style: normal; color: var(--g-acc); }
.klxnl--g .klxnl-pop__d, .klxnl--g .klxnl-pop__short { font-size: 16px; line-height: 1.6; color: var(--g-mute); }
.klxnl--g .klxnl-pop__grab { background: var(--g-line); }
.klxnl--g .klxnl-later { padding: 0 8px; border: 0; background: none; color: var(--g-mute); font: inherit; font-size: 15px; cursor: pointer; }

.klxnl--g .klxnl-radiator { width: 100%; max-width: 220px; height: auto; margin: 0 0 18px; color: var(--g-acc); }
.klxnl--g .klxnl-amt__v { margin: 0; font-size: 72px; line-height: .95; font-weight: 600; letter-spacing: -.05em; color: var(--g-acc); white-space: nowrap; }
.klxnl--g .klxnl-amt__v small { font-size: 28px; letter-spacing: -.02em; }
.klxnl--g .klxnl-amt__s { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--g-mute); }
.klxnl--g .klxnl-amt__s strong { color: var(--g-ink); font-weight: 600; }

/* wariant B — Black Friday: las + mosiądz, wąska szerokość kroju */
.klxnl--g.klxnl-pop--b .klxnl-pop__art { background: var(--g-forest); color: #fff; }
.klxnl--g.klxnl-pop--b .klxnl-radiator { color: var(--g-acc-l); opacity: .55; }
.klxnl--g .klxnl-bf { margin: 0; font-size: 58px; line-height: .9; font-weight: 800; font-stretch: 70%; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.klxnl--g .klxnl-bf span { display: block; color: #D9B47C; }
.klxnl--g .klxnl-bf-note { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--g-acc-l); }

.klxnl--g .klxnl-cta { height: 52px; padding: 0 22px; border-radius: 10px; background: var(--g-acc); color: #fff; font-size: 16px; font-weight: 600; justify-self: start; }
.klxnl--g .klxnl-cta:hover { background: var(--g-acc-d); color: #fff; }

@media (max-width: 699px) {
	.klxnl--g .klxnl-pop__box { border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(29, 26, 23, .22); }
	.klxnl--g .klxnl-pop__main { padding: 20px 16px 16px; }
	.klxnl--g .klxnl-pop__t { font-size: 22px; line-height: 1.12; padding-right: 32px; }
	.klxnl--g .klxnl-pop__short, .klxnl--g .klxnl-pop__d { font-size: 14px; line-height: 1.5; }
	.klxnl--g .klxnl-pop__eyebrow { font-size: 12px; padding: 5px 10px; }
	.klxnl--g .klxnl-pop__peek .klxnl-btn { height: 46px; width: auto; }
	.klxnl--g .klxnl-input, .klxnl--g .klxnl-btn { height: 48px; }
}

/* ---------- stopka (las motywu) */
.klxnl--g.klxnl-foot { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 56px; align-items: end; margin: 0 0 48px; padding: 0 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.klxnl--g.klxnl-foot .klxnl-foot__k { margin: 0 0 10px; color: var(--g-acc-l); font-size: 14px; font-weight: 600; }
.klxnl--g.klxnl-foot .klxnl-foot__t { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.02; font-weight: 600; letter-spacing: -.035em; color: #fff; }
.klxnl--g.klxnl-foot .klxnl-foot__t em { font-style: normal; color: #D9B47C; }
.klxnl--g.klxnl-foot .klxnl-foot__d { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
.klxnl--g.klxnl-foot .klxnl-input { border-color: transparent; background: var(--g-paper); }
.klxnl--g.klxnl-foot .klxnl-btn { background: #D9B47C; color: var(--g-forest); }
.klxnl--g.klxnl-foot .klxnl-btn:hover { background: #E6C796; }
.klxnl--g.klxnl-foot .klxnl-consent, .klxnl--g.klxnl-foot .klxnl-info { color: rgba(255, 255, 255, .72); }
.klxnl--g.klxnl-foot .klxnl-consent a, .klxnl--g.klxnl-foot .klxnl-info a { color: #fff; }
@media (max-width: 899px) { .klxnl--g.klxnl-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .klxnl--g.klxnl-foot .klxnl-row { flex-direction: column; } .klxnl--g.klxnl-foot .klxnl-btn { width: 100%; } }

/* ---------- strona główna: panel pracowni z rysunkiem grzejnika */
.klxnl--g.klxnl-home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px 64px; align-items: center; padding: 48px; border-radius: 20px; background: var(--g-studio); }
.klxnl--g.klxnl-home .klxnl-home__art { display: grid; gap: 4px; }
.klxnl--g.klxnl-home .klxnl-home__k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 12px; border-radius: 8px; background: var(--g-tint); color: var(--g-acc); font-size: 13px; font-weight: 600; }
.klxnl--g.klxnl-home .klxnl-home__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-acc); }
.klxnl--g.klxnl-home .klxnl-home__t { margin: 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; }
.klxnl--g.klxnl-home .klxnl-home__t em { font-style: normal; color: var(--g-acc); }
.klxnl--g.klxnl-home .klxnl-home__d { margin: 14px 0 22px; font-size: 17px; line-height: 1.6; color: var(--g-mute); }
@media (max-width: 899px) { .klxnl--g.klxnl-home { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; } .klxnl--g.klxnl-home .klxnl-radiator { max-width: 160px; } }
@media (max-width: 599px) { .klxnl--g.klxnl-home .klxnl-row { flex-direction: column; } .klxnl--g.klxnl-home .klxnl-btn { width: 100%; } }

/* ---------- v2: grafika w oknie (nakładki), strony wtyczki */
.klxnl--g.klxnl-pop--c .klxnl-ov__v { color: #fff; }
.klxnl--g.klxnl-pop--c .klxnl-ov__s { color: #F0E6D4; }
.klxnl--g.klxnl-page { font-family: var(--font, "Instrument Sans", Arial, sans-serif); }
.klxnl--g .klxnl-page__in { padding: 48px 44px; border-radius: 20px; background: var(--g-studio); }
.klxnl--g .klxnl-page__k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 8px; background: var(--g-tint); color: var(--g-acc); font-size: 13px; font-weight: 600; }
.klxnl--g .klxnl-page__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-acc); }
.klxnl--g .klxnl-page__t { font-size: clamp(30px, 4vw, 42px); line-height: 1.05; font-weight: 600; letter-spacing: -.04em; color: var(--g-ink); }
.klxnl--g .klxnl-page__d { margin-top: 14px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--g-mute); }
.klxnl--g .klxnl-page__lbl { margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--g-mute); }
.klxnl--g .klxnl-page__code { display: inline-block; margin-top: 8px; padding: 14px 22px; border: 2px dashed var(--g-acc); border-radius: 14px; background: #fff; color: var(--g-forest); font: 600 28px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; }
.klxnl--g .klxnl-page__a { margin-top: 28px; }
.klxnl--g.klxnl-page .tnp-submit, .klxnl--g.klxnl-page .klxnl-cta { height: 52px; padding: 0 28px; border: 0; border-radius: 10px; background: var(--g-acc); color: #fff; font-size: 15px; font-weight: 600; }
.klxnl--g.klxnl-page .tnp-submit:hover, .klxnl--g.klxnl-page .klxnl-cta:hover { background: var(--g-acc-d); color: #fff; }
@media (max-width: 599px) { .klxnl--g .klxnl-page__in { padding: 30px 20px; } .klxnl--g .klxnl-page__code { font-size: 22px; } }