/*
Theme Name: Klimawell
Theme URI: https://klimawell.sk
Author: Klimawell
Description: Šablóna webu Klimawell – klimatizácie, tepelné čerpadlá, rekuperácia a servis.
Version: 3.0.4
Requires at least: 6.0
Text Domain: klimawell
*/
/* =========================================================
   KLIMAWELL – design tokens + components
   Every colour, font, size and spacing is defined once here
   in :root and referenced with var(). Layout: flexbox only.
   ========================================================= */

:root {
  /* Colours – brand */
  --color-orange: #F7941D;
  --color-orange-hover: #E5830A;
  --color-orange-ink: #A85600;
  --color-blue: #2BA8E0;
  --color-blue-ink: #0A6A98;
  --color-green: #6CC24A;
  --color-green-ink: #2F7A12;

  /* Colours – neutrals */
  --color-ink: #0D1E30;
  --color-ink-soft: #2C4258;
  --color-muted: #4D6377;
  --color-line: #D3E2EE;
  --color-bg: #FFFFFF;
  --color-surface: #EDF4FA;
  --color-surface-blue: #E1EEF8;
  --color-surface-warm: #FFF4E6;
  --color-dark: #0A1A2B;
  --color-dark-2: #112638;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #B5C2CC;
  --color-star: #F7B500;
  --color-hero-shade: rgba(6, 20, 36, 0.62);
  --color-hero-glow-blue: rgba(43, 168, 224, 0.40);
  --color-hero-glow-green: rgba(108, 194, 74, 0.12);
  --color-shadow: rgba(15, 27, 38, 0.10);
  --color-overlay-light: rgba(255, 255, 255, 0.10);
  --color-overlay-line: rgba(255, 255, 255, 0.22);

  /* Fonts */
  --font-display: "Archivo", "Helvetica Neue", sans-serif;
  --font-body: "Manrope", "Helvetica Neue", sans-serif;

  /* Font sizes */
  --fs-display: 4.25rem;
  --fs-h1: 3.5rem;
  --fs-h2: 2.75rem;
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-stat: 3.25rem;
  --fs-price: 2.5rem;

  /* Font weights / leading / tracking */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-tight: -0.025em;
  --ls-caps: 0.14em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: 88px;
  --top-pad: 56px;
  --post-media-ratio: 3 / 2;
  --check-col-w: calc((100% - 2 * var(--space-6)) / 3);
  --gutter: 40px;
  --gap-cards: 24px;

  /* Sizes */
  --container: 1240px;
  --container-narrow: 860px;
  --header-h: 84px;
  --logo-h: 44px;
  --icon-s: 18px;
  --icon-m: 24px;
  --icon-l: 32px;
  --touch: 48px;
  --hero-min-h: 720px;
  --page-hero-min-h: 520px;
  --card-media-h: 220px;
  --product-media-h: 260px;
  --gallery-h: 220px;
  --thumb-h: 96px;
  --detail-media-h: 560px;
  --step-num: 52px;
  --dot: 8px;
  --line-w: 1px;
  --line-w-strong: 2px;
  --text-max: 640px;
  --card-basis: 260px;
  --card-basis-wide: 340px;
  --split-basis: 440px;
  --product-basis: 270px;
  --subsidy-logo-w: 360px;
  --stat-basis: 200px;
  --gallery-basis: 220px;
  --form-basis: 520px;
  --scroll-card: 85%;
  --hero-position: center 34%;
  --dropdown-w: 260px;
  --social-size: 40px;
  --footer-logo-h: 64px;
  --article-max: 720px;
  --col-2: calc((100% - var(--gap-cards)) / 2);
  --col-3: calc((100% - 2 * var(--gap-cards)) / 3);
  --col-4: calc((100% - 3 * var(--gap-cards)) / 4);
  --col-full: 100%;
  --gallery-basis-mobile: 40%;

  /* Radius + shadow */
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 10px 30px var(--color-shadow);
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 3.25rem;
    --fs-h1: 2.75rem;
    --fs-h2: 2.25rem;
    --fs-stat: 2.75rem;
    --section-pad: 72px;
    --top-pad: 48px;
    --check-col-w: calc((100% - var(--space-6)) / 2);
    --gutter: 32px;
    --hero-min-h: 640px;
    --page-hero-min-h: 460px;
    --detail-media-h: 460px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.875rem;
    --fs-h3: 1.25rem;
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-stat: 2.25rem;
    --fs-price: 2rem;
    --section-pad: 56px;
    --top-pad: 40px;
    --check-col-w: 100%;
    --gutter: 20px;
    --gap-cards: 16px;
    --header-h: 68px;
    --logo-h: 36px;
    --hero-min-h: 600px;
    --page-hero-min-h: 420px;
    --card-media-h: 190px;
    --product-media-h: 120px;
    --gallery-h: 150px;
    --detail-media-h: 360px;
    --step-num: 44px;
  }
}

/* ---------- Base ---------- */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
}
a { color: var(--color-blue-ink); }
a:hover { color: var(--color-ink); }
img { display: block; max-width: 100%; }
:where(img[height]) { height: auto; }

.site { display: flex; flex-direction: column; min-width: 0; }
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.container-narrow { max-width: var(--container-narrow); }

/* ---------- Sections ---------- */
.section { padding: var(--section-pad) 0; display: flex; flex-direction: column; }
.section-alt { background: var(--color-surface); }
.section-blue { background: var(--color-surface-blue); }
.section-warm { background: var(--color-surface-warm); }
.section-dark { background: var(--color-dark); color: var(--color-on-dark); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--text-max); }
.section-head-center { align-items: center; text-align: center; align-self: center; }
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); }

/* ---------- Type ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--color-orange-ink);
}
.eyebrow-on-dark { color: var(--color-orange); }
.eyebrow-dot { width: var(--dot); height: var(--dot); border-radius: var(--radius-pill); background: var(--color-orange); flex: 0 0 auto; }
.heading-display, .heading-1, .heading-2, .heading-3, .heading-4 {
  font-family: var(--font-display); margin: 0; color: inherit;
}
.heading-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-black); }
.heading-1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-black); }
.heading-2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-black); }
.heading-3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-bold); }
.heading-4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-bold); }
.heading-accent { color: var(--color-orange); }
.heading-accent-blue { color: var(--color-blue); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); margin: 0; color: var(--color-ink-soft); max-width: var(--text-max); }
.lead-on-dark { color: var(--color-on-dark-muted); }
.text { margin: 0; color: var(--color-ink-soft); }
.text-small { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.text-on-dark { color: var(--color-on-dark-muted); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-l { display: flex; flex-direction: column; gap: var(--space-6); }
.row { display: flex; flex-wrap: wrap; gap: var(--gap-cards); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* ---------- Buttons ---------- */
.button-primary, .button-secondary, .button-light, .button-ghost-light {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch); padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-bold);
  text-decoration: none; box-sizing: border-box; border: var(--line-w-strong) solid transparent;
  cursor: pointer; white-space: nowrap;
}
.button-primary { background: var(--color-orange); color: var(--color-ink); }
.button-primary:hover { background: var(--color-orange-hover); color: var(--color-ink); }
.button-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.button-secondary:hover { background: var(--color-ink); color: var(--color-on-dark); }
.button-light { background: var(--color-on-dark); color: var(--color-ink); }
.button-light:hover { background: var(--color-surface); color: var(--color-ink); }
.button-ghost-light { background: transparent; color: var(--color-on-dark); border-color: var(--color-overlay-line); }
.button-ghost-light:hover { background: var(--color-overlay-light); color: var(--color-on-dark); }
.button-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-bold); color: var(--color-blue-ink); text-decoration: none;
  min-height: var(--touch);
}
.button-link:hover { color: var(--color-ink); }
.icon { width: var(--icon-s); height: var(--icon-s); flex: 0 0 auto; }
.icon-m { width: var(--icon-m); height: var(--icon-m); flex: 0 0 auto; }
.icon-l { width: var(--icon-l); height: var(--icon-l); flex: 0 0 auto; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg); border-bottom: var(--line-w) solid var(--color-line);
  display: flex; flex-direction: column;
}
.header-bar {
  width: 100%; max-width: var(--container); margin: 0 auto; box-sizing: border-box;
  min-height: var(--header-h); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
}
.header-logo { display: flex; align-items: center; }
.header-logo-img { height: var(--logo-h); width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--touch); padding: 0 var(--space-3);
  font-weight: var(--fw-semibold); font-size: var(--fs-small);
  color: var(--color-ink); text-decoration: none; border-radius: var(--radius-s);
  background: transparent; border: 0; font-family: var(--font-body); cursor: pointer;
}
.nav-link:hover { background: var(--color-surface); color: var(--color-ink); }
.nav-link-active { color: var(--color-orange-ink); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.header-phone { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); color: var(--color-ink); text-decoration: none; font-size: var(--fs-small); }
/* Dropdown: part of the sticky navigation bar, so it is the one place
   that uses positioning (opens directly under its menu item). */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: var(--dropdown-w); flex-direction: column; gap: var(--space-1);
  padding: var(--space-2); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line); border-radius: var(--radius-m); box-shadow: var(--shadow-card);
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display: flex; }
.nav-dropdown-link {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-4);
  border-radius: var(--radius-s); color: var(--color-ink); text-decoration: none;
  font-weight: var(--fw-semibold); font-size: var(--fs-small);
}
.nav-dropdown-link:hover { background: var(--color-surface); color: var(--color-orange-ink); }
.social-row { display: flex; align-items: center; gap: var(--space-2); }
.social-link {
  width: var(--social-size); height: var(--social-size); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border: var(--line-w) solid var(--color-line); color: var(--color-ink); text-decoration: none;
}
.social-link:hover { background: var(--color-surface); color: var(--color-ink); }
.social-link-dark { border-color: var(--color-overlay-line); color: var(--color-on-dark); }
.social-link-dark:hover { background: var(--color-overlay-light); color: var(--color-on-dark); }
.menu-toggle { display: none; }
.nav-mobile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--gutter) var(--space-6); border-top: var(--line-w) solid var(--color-line); }
.nav-mobile-link { display: flex; align-items: center; min-height: var(--touch); font-weight: var(--fw-bold); font-size: var(--fs-lead); color: var(--color-ink); text-decoration: none; border-bottom: var(--line-w) solid var(--color-line); }
.nav-mobile-sublink { display: flex; align-items: center; min-height: var(--touch); padding-left: var(--space-5); color: var(--color-ink-soft); text-decoration: none; }

@media (max-width: 1240px) {
  .header-social { display: none; }
  .header-phone { display: none; }
  .header-bar { gap: var(--space-3); }
  .nav-link { padding: 0 var(--space-2); }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--touch); height: var(--touch); border-radius: var(--radius-pill);
    border: var(--line-w) solid var(--color-line); background: var(--color-bg); color: var(--color-ink); cursor: pointer;
  }
}
@media (max-width: 640px) {
  .header-cta { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  min-height: auto; display: flex; align-items: flex-start;
  background-size: cover; background-position: var(--hero-position); color: var(--color-on-dark);
}
.page-hero {
  min-height: auto; display: flex; align-items: flex-start;
  background-size: cover; background-position: center; color: var(--color-on-dark);
}
.hero-inner { padding-bottom: var(--top-pad); padding-top: var(--top-pad); }
main > .section:first-child { padding-top: var(--top-pad); padding-bottom: var(--top-pad); }
.hero-content { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--container-narrow); }
.hero-points { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.hero-rating { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-on-dark); text-decoration: none; }
.hero-rating-stars { display: flex; color: var(--color-star); }
.hero-point { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-on-dark); }
.page-hero-light { min-height: auto; background: var(--color-surface-blue); color: var(--color-ink); }

/* ---------- Cards ---------- */
.card-service {
  flex: 1 1 var(--card-basis); display: flex; flex-direction: column;
  background: var(--color-bg); border-radius: var(--radius-l); overflow: hidden;
  border: var(--line-w) solid var(--color-line); text-decoration: none; color: var(--color-ink);
}
.card-service:hover { box-shadow: var(--shadow-card); color: var(--color-ink); }
.card-media { width: 100%; height: var(--card-media-h); object-fit: cover; object-position: center; }
.card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1 1 auto; }
.card-body-end { margin-top: auto; }
.detail-media-contain { object-fit: contain; background: var(--color-bg); }
.card-media-contain { object-fit: contain; background: var(--color-bg); padding: var(--space-4); box-sizing: border-box; }
.card-feature {
  flex: 1 1 var(--card-basis); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line);
}
.card-feature-dark { background: var(--color-dark-2); border-color: var(--color-dark-2); color: var(--color-on-dark); }
.feature-icon {
  width: var(--touch); height: var(--touch); border-radius: var(--radius-m);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-warm); color: var(--color-orange-ink);
}
.feature-icon-blue { background: var(--color-surface-blue); color: var(--color-blue-ink); }
.card-stat {
  flex: 1 1 var(--stat-basis); display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-6); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line);
}
.stat-value { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.stat-value-accent { color: var(--color-orange); }
.stat-label { font-size: var(--fs-small); color: var(--color-muted); font-weight: var(--fw-semibold); }
.stars { display: flex; gap: var(--space-1); color: var(--color-star); }

.card-review {
  flex: 1 1 var(--card-basis-wide); display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-6); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line);
}
.review-author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.review-avatar {
  width: var(--touch); height: var(--touch); border-radius: var(--radius-pill);
  background: var(--color-surface-blue); color: var(--color-blue-ink);
  display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold);
}
.review-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-6); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line);
}
.note-placeholder {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-m);
  background: var(--color-surface-warm); color: var(--color-orange-ink);
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
}

/* ---------- Split / media ---------- */
.split { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.split-top { align-items: flex-start; }
.split-media { flex: 1 1 var(--split-basis); min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.split-body { flex: 1 1 var(--split-basis); min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.media-photo { width: 100%; height: var(--detail-media-h); object-fit: cover; border-radius: var(--radius-l); }
.photo-placeholder {
  width: 100%; height: var(--card-media-h); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--color-surface); color: var(--color-muted);
  border: var(--line-w-strong) dashed var(--color-line);
  font-size: var(--fs-small); font-weight: var(--fw-semibold); text-align: center; padding: var(--space-4);
}
.photo-placeholder-tall { height: var(--detail-media-h); border-radius: var(--radius-l); }

/* ---------- Lists ---------- */
.check-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.check-list-row { flex-direction: row; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.check-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.check-mark {
  width: var(--icon-m); height: var(--icon-m); border-radius: var(--radius-pill);
  background: var(--color-green); color: var(--color-on-dark);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.check-mark-minus { background: var(--color-muted); }
.check-item-wide { flex: 0 0 var(--check-col-w); box-sizing: border-box; }

/* ---------- Steps ---------- */
.steps { display: flex; flex-wrap: nowrap; gap: var(--gap-cards); }
.step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.step-top { display: flex; align-items: center; gap: var(--space-3); }
.step-num {
  width: var(--step-num); height: var(--step-num); border-radius: var(--radius-pill);
  background: var(--color-orange); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h4); flex: 0 0 auto;
}
.step-num-accent { background: var(--color-orange); color: var(--color-ink); }
.step-line { flex: 1 1 auto; height: var(--line-w-strong); background: var(--color-line); }
@media (max-width: 1024px) {
  .steps { flex-direction: column; gap: var(--space-5); }
  .step { flex-direction: row; align-items: flex-start; gap: var(--space-4); }
  .step-top { flex: 0 0 auto; }
  .step-line { display: none; }
}

/* ---------- CTA band ---------- */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-8); border-radius: var(--radius-l); background: var(--color-dark); color: var(--color-on-dark);
}
.cta-band-warm { background: var(--color-orange); color: var(--color-ink); }
.cta-band-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 var(--split-basis); }
@media (max-width: 640px) { .cta-band { padding: var(--space-6); } }

/* ---------- Price ---------- */
.price-box {
  flex: 1 1 var(--card-basis); display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border-radius: var(--radius-l); background: var(--color-surface-warm); color: var(--color-ink);
}
.price-value { font-family: var(--font-display); font-size: var(--fs-price); font-weight: var(--fw-black); line-height: var(--lh-tight); }
.price-note { font-size: var(--fs-small); color: var(--color-muted); }

/* ---------- Products ---------- */
.products { display: flex; flex-wrap: wrap; gap: var(--gap-cards); }
.card-product {
  flex: 1 1 var(--product-basis); display: flex; flex-direction: column;
  border-radius: var(--radius-l); overflow: hidden; background: var(--color-bg);
  border: var(--line-w) solid var(--color-line); text-decoration: none; color: var(--color-ink);
}
.card-product:hover { box-shadow: var(--shadow-card); color: var(--color-ink); }
.product-media { width: 100%; height: var(--product-media-h); object-fit: contain; box-sizing: border-box; padding: var(--space-4); background: var(--color-bg); border-bottom: var(--line-w) solid var(--color-line); }
.detail-media { width: 100%; height: var(--detail-media-h); object-fit: contain; box-sizing: border-box; padding: var(--space-6); background: var(--color-bg); border: var(--line-w) solid var(--color-line); border-radius: var(--radius-l); }
.product-brand { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-muted); }
.tag {
  display: inline-flex; align-items: center; align-self: flex-start; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  background: var(--color-surface-blue); color: var(--color-blue-ink);
}
.tag-green { background: var(--color-green); color: var(--color-ink); }
.tag-warm { background: var(--color-surface-warm); color: var(--color-orange-ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-pill {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--space-5);
  border-radius: var(--radius-pill); border: var(--line-w) solid var(--color-line); background: var(--color-bg);
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink); cursor: pointer;
}
.filter-pill-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-dark); }
@media (max-width: 640px) {
  .card-product .card-body { padding: var(--space-3); gap: var(--space-2); }
  .card-product .heading-3 { font-size: var(--fs-body); }
  .card-product .product-media { padding: var(--space-2); }
  .card-product .text-small, .card-product .button-link { font-size: var(--fs-xs); }
}

/* ---------- Product detail ---------- */
.spec-table { display: flex; flex-direction: column; border-top: var(--line-w) solid var(--color-line); }
.spec-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--line-w) solid var(--color-line); font-size: var(--fs-small); }
.spec-key { color: var(--color-muted); }
.spec-value { font-weight: var(--fw-bold); text-align: right; }
.thumbs { display: flex; gap: var(--space-3); }
.product-gallery { display: flex; flex-direction: column; gap: var(--space-3); }
.product-detail-body { display: flex; flex-direction: column; gap: var(--space-5); }
.product-detail-body .price-box { flex: 0 0 auto; }
.thumb-button { flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; }
.thumb { flex: 1 1 0; min-width: 0; width: 100%; height: var(--thumb-h); object-fit: contain; box-sizing: border-box; padding: var(--space-1); background: var(--color-bg); border-radius: var(--radius-m); border: var(--line-w-strong) solid var(--color-line); }
.thumb-active { border-color: var(--color-orange); }
.power-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Gallery ---------- */
.gallery { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.gallery-photo { flex: 1 1 var(--gallery-basis); min-width: 0; height: var(--gallery-h); object-fit: cover; border-radius: var(--radius-m); }
.gallery-placeholder { flex: 1 1 var(--gallery-basis); height: var(--gallery-h); border-radius: var(--radius-m); }
@media (max-width: 640px) {
  .gallery-photo, .gallery-placeholder { flex: 1 1 var(--gallery-basis-mobile); }
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: var(--line-w) solid var(--color-line); }
.faq-item { border-bottom: var(--line-w) solid var(--color-line); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--touch); padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-icon {
  width: var(--icon-l); height: var(--icon-l); border-radius: var(--radius-pill); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--color-surface); color: var(--color-ink);
}
.faq-answer { margin: 0; padding: 0 0 var(--space-5); color: var(--color-ink-soft); max-width: var(--text-max); }

/* ---------- Form (visual mockup only) ---------- */
.form-card {
  flex: 1 1 var(--form-basis); display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-7); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line); box-shadow: var(--shadow-card); box-sizing: border-box; min-width: 0;
}
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.form-field { flex: 1 1 var(--stat-basis); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.form-label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.form-input, .form-select, .form-textarea {
  min-height: var(--touch); padding: 0 var(--space-4); box-sizing: border-box; width: 100%;
  border-radius: var(--radius-m); border: var(--line-w) solid var(--color-line); background: var(--color-surface);
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-ink);
}
.form-textarea { padding: var(--space-3) var(--space-4); min-height: var(--space-10); resize: vertical; }
.form-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-ink-soft); }
.form-checkbox { width: var(--icon-m); height: var(--icon-m); flex: 0 0 auto; margin: 0; accent-color: var(--color-orange); }
.mockup-badge {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-surface-warm); color: var(--color-orange-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
@media (max-width: 640px) { .form-card { padding: var(--space-5); } }

/* ---------- Contact ---------- */
.contact-line { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-bold); color: var(--color-ink); text-decoration: none; min-height: var(--touch); }
.contact-big { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-black); color: var(--color-ink); text-decoration: none; letter-spacing: var(--ls-tight); }
.card-feature-dark .contact-big { color: var(--color-orange); }

/* ---------- Subsidy ---------- */
.subsidy-logo {
  flex: 0 1 var(--card-basis-wide); max-width: var(--subsidy-logo-w); width: 100%; height: auto; align-self: center;
  border-radius: var(--radius-l); display: flex;
}

/* ---------- Footer ---------- */
.footer { background: var(--color-dark); color: var(--color-on-dark); display: flex; flex-direction: column; }
.footer-top { display: flex; flex-wrap: wrap; gap: var(--space-8); padding: var(--space-9) 0 var(--space-8); }
.footer-brand { flex: 1 1 var(--card-basis-wide); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.footer-logo { height: var(--footer-logo-h); width: auto; max-width: 100%; object-fit: contain; align-self: flex-start; }

/* ---------- Blog / article ---------- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-muted); font-weight: var(--fw-semibold); }
.article { width: 100%; max-width: var(--article-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.article-photo { width: 100%; height: auto; aspect-ratio: var(--post-media-ratio); object-fit: cover; border-radius: var(--radius-l); }
.post-media { width: 100%; height: auto; aspect-ratio: var(--post-media-ratio); object-fit: cover; }
.prose { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-ink-soft); }
.prose-p { margin: 0; }
.prose-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.callout {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6);
  border-radius: var(--radius-l); background: var(--color-surface-warm); color: var(--color-ink);
}

/* ---------- Contact cards ---------- */
.card-contact {
  flex: 1 1 var(--stat-basis); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-l); background: var(--color-bg);
  border: var(--line-w) solid var(--color-line); text-decoration: none; color: var(--color-ink);
}
.card-contact:hover { box-shadow: var(--shadow-card); color: var(--color-ink); }
/* ---------- Dark header ---------- */
.header { background: var(--color-dark); border-bottom-color: var(--color-overlay-line); }
.header .nav-link, .header .header-phone { color: var(--color-on-dark); }
.header .nav-link:hover { background: var(--color-overlay-light); color: var(--color-on-dark); }
.header .social-link { border-color: var(--color-overlay-line); color: var(--color-on-dark); }
.header .social-link:hover { background: var(--color-overlay-light); color: var(--color-on-dark); }
.header .menu-toggle { background: transparent; border-color: var(--color-overlay-line); color: var(--color-on-dark); }
.header .nav-dropdown { background: var(--color-dark-2); border-color: var(--color-overlay-line); }
.header .nav-dropdown-link { color: var(--color-on-dark); }
.header .nav-dropdown-link:hover { background: var(--color-overlay-light); color: var(--color-orange); }
.header .nav-mobile { border-top-color: var(--color-overlay-line); }
.header .nav-mobile-link { color: var(--color-on-dark); border-bottom-color: var(--color-overlay-line); }
.header .nav-mobile-sublink { color: var(--color-on-dark-muted); }

.contact-value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); word-break: break-word; }

/* ---------- Columns ----------
   Cards in a row never stretch: every card has a fixed column width
   (4 / 3 / 2 per row) and an incomplete last row is centred. */
.row, .products, .gallery { justify-content: center; }
.row :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
.products .card-product,
.gallery :is(.gallery-photo, .gallery-placeholder) {
  flex: 0 0 var(--col-4); max-width: var(--col-4); min-width: 0; box-sizing: border-box;
}
.row-3 :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
.gallery-3 :is(.gallery-photo, .gallery-placeholder) { flex-basis: var(--col-3); max-width: var(--col-3); }
.row-2 :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
.row-pair :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact) { flex-basis: var(--col-2); max-width: var(--col-2); }

@media (max-width: 1024px) {
  .row :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
  .products .card-product,
  .gallery :is(.gallery-photo, .gallery-placeholder) { flex-basis: var(--col-2); max-width: var(--col-2); }
  .row-3 :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
  .gallery-3 :is(.gallery-photo, .gallery-placeholder) { flex-basis: var(--col-3); max-width: var(--col-3); }
}
@media (max-width: 640px) {
  .row :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
  .row-3 :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
  .row-2 :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact) { flex-basis: var(--col-full); max-width: var(--col-full); }
  .products .card-product { flex-basis: var(--col-2); max-width: var(--col-2); }
  .row-pair :is(.card-service, .card-feature, .card-stat, .card-review, .card-contact),
  .gallery :is(.gallery-photo, .gallery-placeholder),
  .gallery-3 :is(.gallery-photo, .gallery-placeholder) { flex-basis: var(--col-2); max-width: var(--col-2); }
}
.footer-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 1024px) { .footer-brand { flex: 0 0 var(--col-full); } }
@media (max-width: 640px) { .footer-col { flex: 0 0 var(--col-full); } }
.footer-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); margin: 0 0 var(--space-2); color: var(--color-on-dark); }
.footer-link { color: var(--color-on-dark-muted); text-decoration: none; min-height: var(--space-6); display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-link:hover { color: var(--color-on-dark); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0 var(--space-6); border-top: var(--line-w) solid var(--color-overlay-line);
  font-size: var(--fs-xs); color: var(--color-on-dark-muted);
}

/* ---------- Cookie consent ----------
   Sticks to the bottom of the viewport (sticky, same mechanism as the header). */
.consent-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--color-dark); color: var(--color-on-dark);
  border-top: var(--line-w) solid var(--color-overlay-line);
}
.consent-inner {
  width: 100%; max-width: var(--container); margin: 0 auto; box-sizing: border-box;
  padding: var(--space-4) var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.consent-text { flex: 1 1 var(--card-basis-wide); margin: 0; font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.consent-link { color: var(--color-orange); }
.reviews-widget { width: 100%; min-height: var(--card-media-h); }

/* ---------- Mobile call bar (sticky, mobile only; hidden while the consent bar is open) ---------- */
.call-bar { display: none; }
@media (max-width: 640px) {
  .call-bar {
    /* floating pill, not glued to the screen edge – iOS Safari would tint its toolbar orange */
    position: sticky; bottom: 12px; z-index: 29;
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--touch); padding: var(--space-3) var(--gutter);
    margin: 0 var(--gutter) 12px; border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    background: var(--color-orange); color: var(--color-ink);
    font-weight: var(--fw-bold); text-decoration: none;
  }
  .consent-bar:not([hidden]) ~ .call-bar { display: none; }
}

/* Two plain white sections in a row: no doubled gap */
section.section[class="section"] + section.section[class="section"] { padding-top: 0; }

/* Product highlight label (Odporúčame, Najlepšia cena) */
.tag-hot { background: var(--color-orange); color: var(--color-ink); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Landing: čistenie klimatizácie – price cards */
.card-price { display: flex; flex-direction: column; gap: var(--space-3); }
.card-price-hot { border-color: var(--color-orange); box-shadow: 0 0 0 var(--line-w-strong) var(--color-orange); }
.price-line { display: flex; align-items: baseline; gap: var(--space-3); }
.price-old { font-size: var(--fs-h4); color: var(--color-muted); text-decoration: line-through; }
.media-photo-full { height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.media-video { display: block; width: 100%; max-width: 360px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-l); margin-inline: auto; background: var(--color-dark); }
.promo-strip { display: block; padding: var(--space-3) var(--gutter); background: var(--color-orange); color: var(--color-ink); text-align: center; text-decoration: none; font-size: var(--fs-small); }
.promo-strip s { opacity: .65; }
.price-extra { margin-top: var(--gap-cards); }
.check-list-on-dark .check-item { color: var(--color-on-dark); }

/* Catalogue (Ponuka klimatizácií): type tabs, brand pills, brand groups */
.catalog { display: flex; flex-direction: column; gap: var(--space-6); }
.catalog-types { display: flex; gap: var(--space-2); padding: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface); overflow-x: auto; scrollbar-width: none; }
.catalog-types::-webkit-scrollbar { display: none; }
.catalog-type { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch); padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-soft); font: inherit; font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; }
.catalog-type-active { background: var(--color-ink); color: var(--color-on-dark); box-shadow: 0 4px 14px var(--color-shadow); }
.catalog-count { font-size: var(--fs-xs); opacity: .7; }
.catalog-group { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); border-top: var(--line-w) solid var(--color-line); }
.catalog-group:first-of-type { border-top: 0; padding-top: 0; }
.catalog-group-head { display: flex; flex-direction: column; gap: var(--space-1); }
.catalog-group-head .heading-3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.catalog-tag-naitec { background: var(--color-orange); color: var(--color-ink); }
.catalog-tag-samsung, .catalog-tag-toshiba { background: var(--color-surface-blue); color: var(--color-blue-ink); }
.catalog-tag-kaisai { background: var(--color-green); color: var(--color-ink); }
.catalog-tag-mitsubishi { background: var(--color-ink); color: var(--color-on-dark); }
@media (max-width: 640px) {
  .catalog-type { flex: 0 0 auto; padding: var(--space-2) var(--space-4); }
}
.catalog-type-short { display: none; }
@media (max-width: 640px) {
  .catalog-types { overflow: visible; }
  .catalog-type { flex: 1 1 0; padding: var(--space-2) var(--space-2); }
  .catalog-type-long { display: none; }
  .catalog-type-short { display: inline; }
  .catalog-brands { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .catalog-brands::-webkit-scrollbar { display: none; }
  .catalog-brands .filter-pill { flex: 0 0 auto; }
}

.hero-tagline { margin: 0; color: var(--color-orange); }
.price-vat { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: var(--fw-bold); }
/* steps-align: nadpisy krokov rovnako vysoké, texty začínajú v jednej línii */
@media (min-width: 1025px) { .steps .step .heading-4 { min-height: calc(2 * var(--lh-snug, 1.25) * 1em); } }
/* Tlačidlo na oranžovom CTA páse – tmavé, aby bolo vidieť */
.cta-band-warm .button-primary { background: var(--color-ink); color: var(--color-on-dark); }
.cta-band-warm .button-primary:hover { background: var(--color-ink-soft, #2a2f36); color: var(--color-on-dark); }

/* ---------- Hero backgrounds (WordPress) ---------- */
.hero-home { background: radial-gradient(ellipse at 85% 10%, var(--color-hero-glow-blue), transparent 60%), radial-gradient(ellipse at 5% 100%, var(--color-hero-glow-green), transparent 55%), linear-gradient(160deg, var(--color-dark-2), var(--color-dark)); }
.hero-klima { background-image: linear-gradient(var(--color-hero-shade), var(--color-hero-shade)), url("assets/img/toshiba-shorai-curve-v-obyvacke.webp"); }
[hidden] { display: none !important; }
body { margin: 0; }