/* Self-hosted DM Sans variable font subsets used by the public frontend. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Facelift style-system tokens. Raw first-party typography and colors live only here. */
:root {
  --font-family-base: 'DM Sans', sans-serif;
  --type-h1-size: 55px; /* Hero+ H1 5.5rem (Popis komponent); production had 5.6rem */
  --type-h1-leading: 60px; /* client, 9 Sep 2026: a little tighter than the 1.2 of production (was 66 px) */
  --type-h1-weight: 600;
  --type-h1-other-size: 45px;
  --type-h1-other-leading: 50px; /* client, 9 Sep 2026: the same 1.1 (was 54 px) */
  --type-h2-size: 37px;
  --type-h2-leading: 44.4px;
  --type-h2-weight: 600;
  --type-h3-size: 27px;
  --type-h3-leading: 32.4px;
  --type-h3-weight: 500;
  --type-h4-size: 24px;
  --type-h4-leading: 28.8px;
  --type-h4-weight: 600;
  --type-h5-size: 20px;
  --type-h5-leading: 24px;
  --type-h5-weight: 600;
  --type-small-size: 14px;
  --type-small-leading: 20px;
  --type-compact-size: 16px;
  --type-compact-leading: 23.2px;
  --type-body-size: 17px;
  --type-body-leading: 25px;
  --type-large-size: 20px;
  --type-large-leading: 30px;
  --type-perex-size: 25px;
  --type-perex-leading: 35px;
  --type-button-size: 17px;
  --type-button-leading: 25px;
  --type-button-weight: 700;
  --space-button-y: 11px;
  --space-button-x: 32px;
  --space-button-lg-y: 19px;
  --space-button-lg-x: 44px;
  --type-header-cta-size: 18px;
  --type-header-cta-leading: 27px;
  --type-footer-size: 14px;
  --type-footer-leading: 25px;
  --type-mobile-menu-link-size: 19px;
  --type-perex-cta-size: 32px;
  --type-perex-cta-leading: 44.8px;
  --type-service-section-h2-leading: 44.4px;
  --type-legal-h2-size: 22px;
  --type-legal-h2-leading: 26.4px;
  --type-legal-h3-size: 22px;
  --type-legal-h3-leading: 26.4px;
  --type-legal-summary-size: 18px;
  --type-legal-summary-leading: 21.6px;
  --type-legal-h4-size: 15px;
  --type-legal-h4-leading: 18px;
  --type-legal-h5-size: 14px;
  --type-legal-h5-leading: 16.8px;
  --type-service-card-title-leading: 30.5px;
  --type-service-card-text-leading: 24.8px;
  --type-service-filter-leading: 16.8px;
  --type-service-twocolumn-heading-leading: 32.4px;
  --type-pricing-tab-leading: 21.6px;
  --type-imagex-copy-size: 20px;
  --type-pricing-heading-size: 36px;
  --type-pricing-heading-leading: 43.2px;
  --type-pricing-examples-size: 30px;
  --type-pricing-examples-leading: 37.5px;
  --type-pricing-card-title-size: 21px;
  --type-pricing-card-title-leading: 27.3px;
  --type-component-h2-size: 25px;
  --type-component-h2-leading: 32.5px;
  --type-component-h3-size: 20px;
  --type-component-h3-leading: 28px;
  --type-component-copy-size: 17px;
  --type-component-copy-leading: 25.5px;
  --type-statistics-value-size: 35px;
  --type-statistics-value-leading: 42px;
  --type-statistics-copy-size: 14px;
  --type-statistics-copy-leading: 18px;
  --type-statistics-rating-size: 14px;
  --type-statistics-rating-leading: 18px;
  --type-quotation-mark-size: 160px;
  --type-quotation-mark-leading: 1;
  --space-zigzag-copy-x: 70px;
  --space-zigzag-copy-y: 60px;
  --color-text: #000;
  --color-component-text: #101010;
  --color-text-inverse: #fff;
  --color-text-muted: #495057;
  --color-brand: #2daae1;
  --color-brand-link: #1f9ed6;
  --color-primary: #09306d;
  --color-primary-hover: #051b3e;
  --color-secondary: #4ca9d5;
  --color-secondary-hover: #3592c0;
  --color-compare: #c33f28;
  --color-service-text: #051b3d;
  --color-component-dark: #123d7a;
  --color-header-light: #4ca9d5;
  --color-header-dark: #1d417e;
  --color-header-band: #eef1f8;
  --color-header-band-border: #e1e5ee;
  --color-footer: #474e60;
  --color-surface: #fff;
  --color-mobile-rating: #f3f7fc;
  --color-service-filter: #c4e4f4;
  --color-pricing-tab: #b7d9e9;
  --color-pricing-factor: #edf2f8;
  --color-border: #e5e5e5;
  --color-grid-border: #e1e4e8;
  --color-pricing-border: #d7e5ed;
  --color-video-accent: #079bd7;
  --color-video-backdrop: rgb(11 11 11 / 96%);
  --color-video-shadow: rgb(0 0 0 / 42%);
  --color-rating-star: #fcbf02;
  --color-error: #b12727;
  --space-block: 150px; /* client, 9 Sep 2026: 150 px between blocks everywhere */
  --space-block-mobile: 80px;
  --color-button-disabled: #a5abb5;
  --color-button-outline: #c9ced6;
  --color-placeholder: #929292;
}

@media (max-width: 767px) {
  :root {
    --type-h1-size: 36px;
    --type-h1-leading: 40px;
    --type-h1-other-size: 32px;
    --type-h1-other-leading: 35px;
    --type-h2-size: 24px;
    --type-h2-leading: 28.8px;
    --type-h4-size: 19px;
    --type-h4-leading: 22.8px;
    --type-h5-size: 16px;
    --type-h5-leading: 20px;
    --type-perex-size: 20px;
    --type-perex-leading: 30px;
    --type-perex-cta-size: 22px;
    --type-perex-cta-leading: 30.8px;
    --type-service-section-h2-leading: 38.4px;
    --type-pricing-heading-size: 30px;
    --type-pricing-heading-leading: 36px;
    --type-quotation-mark-size: 96px;
  }
}

/*
 * Feedback 8 Sep 2026: one vertical gap between blocks across the theme (100 px, 60 px on
 * mobile). The production `.block` margins (16rem / 4rem, !important on the last block) and
 * the hero calibration give way; banded last blocks stay flush with the footer (below).
 */
main.site-content .block,
main.site-content .post-content .block:last-child { margin-bottom: var(--space-block) !important; margin-top: 0 !important; }
/* Cikcak (Moqups 25): consecutive rows sit on each other, the gap belongs only around the whole run. */
main.site-content .post-content [data-style-component='zigzag']:has(+ [data-style-component='zigzag']) { margin-bottom: 0 !important; }
main.site-content .post-content [data-style-component='zigzag'] + [data-style-component='zigzag'] { margin-top: 0 !important; }
/* Reference detail only: a testimonial immediately after the hero uses a 100 px gap. */
@media (min-width: 768px) {
  main.site-content .reference-page [data-style-component='reference-hero']:has(+ .container > [data-style-component='reference-quotation']:first-child) {
    margin-bottom: 100px !important;
  }
}
@media (max-width: 767px) {
  main.site-content .block,
  main.site-content .post-content .block:last-child { margin-bottom: var(--space-block-mobile) !important; }
  main.site-content .post-content [data-style-component='zigzag']:has(+ [data-style-component='zigzag']) { margin-bottom: 0 !important; }
}

/* "Nahoru" (production inline CSS): a grey arrow fixed above the contact pop-up on desktop, none on mobile. */
.link-up {
  align-items: center;
  bottom: 120px;
  display: flex;
  justify-content: center;
  position: fixed;
  right: 24px;
  z-index: 5;
}
.link-up svg { fill: #bec5d1; width: 20px; }
.link-up:hover svg,
.link-up:focus-visible svg { fill: #9ca4af; }
@media (max-width: 767px) {
  .link-up { display: none; }
}

/* The final layer normalizes only global roles. More specific sourced components keep their own tokens. */
body {
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}
body :where(h1, .h1) { color: inherit; font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); }
body :where(h2, .h2) { color: inherit; font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); }
body :where(h3, .h3) { color: inherit; font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); }
body :where(h4, .h4) { color: inherit; font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); }
body :where(h5, .h5) { color: inherit; font-size: var(--type-h5-size); font-weight: var(--type-h5-weight); line-height: var(--type-h5-leading); }
body :where(p) { font-size: var(--type-body-size); line-height: var(--type-body-leading); }
body :where(.lead, .lead *, .perex, .perex *, .type-perex, .type-perex *, [data-type-role$='perex'], [data-type-role$='perex'] *):not(.perex--cta):not(.perex--cta *):not(.es-embed-root):not(.es-embed-root *) {
  font-size: var(--type-perex-size) !important;
  line-height: var(--type-perex-leading) !important;
}
body :where(.type-small) { font-size: var(--type-small-size); line-height: var(--type-small-leading); }
body :where(.type-compact) { font-size: var(--type-compact-size); line-height: var(--type-compact-leading); }
body :where(.type-large) { font-size: var(--type-large-size); line-height: var(--type-large-leading); }
body .btn:not(.btn-lg):not(.btn-sm):not(input[type='submit']) { font-size: var(--type-button-size); font-weight: var(--type-button-weight); line-height: var(--type-button-leading); }

/*
 * Moqups: one button for the whole site (Hero+, Hero, Postup, CTA, Formulář, header):
 * a dark pill with a white bold label and no icon. Markup comes from
 * components/button.twig; this rule owns colour, radius, type and padding, and beats
 * the page-scoped production overrides (red service buttons, rounded p_btn-xl).
 * Layout utilities stay on the element. The header keeps its two-tone split pill below.
 */
body .btn.btn-primary,
body .btn.btn-secondary {
  align-items: center;
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-text-inverse);
  display: inline-flex;
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  gap: 8px;
  justify-content: center;
  line-height: var(--type-button-leading);
  padding: var(--space-button-y) var(--space-button-x);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
body .btn.btn-primary.btn-lg,
body .btn.btn-secondary.btn-lg { padding: var(--space-button-lg-y) var(--space-button-lg-x); }
/* Small pills: back to a list, previous/next term (Moqups 13/34/35). */
body .btn.btn-primary.btn-sm,
body .btn.btn-secondary.btn-sm {
  font-size: var(--type-small-size);
  gap: 7px;
  line-height: var(--type-small-leading);
  padding: 7px 14px;
}
.btn__icon { flex: 0 0 auto; }
/* Secondary: the same pill in the light blue of the header phone button (Moqups 39). */
body .btn.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
body .btn.btn-primary:hover,
body .btn.btn-primary:focus-visible {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  box-shadow: none !important;
  color: var(--color-text-inverse) !important;
}
body .btn.btn-secondary:hover,
body .btn.btn-secondary:focus-visible {
  background-color: var(--color-secondary-hover) !important;
  border-color: var(--color-secondary-hover) !important;
  box-shadow: none !important;
  color: var(--color-text-inverse) !important;
}
body .btn.btn-primary:focus-visible,
body .btn.btn-secondary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* Service pages: the production `.page-template-sluzba .btn.btn-lg { border-radius: 1.6rem !important }` must not reshape the pill. */
body.page-template-sluzba .btn.btn-primary.btn-lg,
body.page-template-sluzba .btn.btn-secondary.btn-lg {
  border-radius: 999px !important;
  padding: var(--space-button-lg-y) var(--space-button-lg-x) !important;
}
@media (max-width: 767px) {
  body .btn.btn-primary.btn-lg,
  body .btn.btn-secondary.btn-lg,
  body.page-template-sluzba .btn.btn-primary.btn-lg,
  body.page-template-sluzba .btn.btn-secondary.btn-lg { padding: var(--space-button-y) var(--space-button-x) !important; }
}
.perex--cta { font-size: var(--type-perex-cta-size); line-height: var(--type-perex-cta-leading); }
#cmplz-document h2 { font-size: var(--type-legal-h2-size); line-height: var(--type-legal-h2-leading); }
#cmplz-document h3 { font-size: var(--type-legal-h3-size); line-height: var(--type-legal-h3-leading); }
#cmplz-document details summary h3 { font-size: var(--type-legal-summary-size); line-height: var(--type-legal-summary-leading); }
#cmplz-document h4 { font-size: var(--type-legal-h4-size); line-height: var(--type-legal-h4-leading); }
#cmplz-document h5 { font-size: var(--type-legal-h5-size); line-height: var(--type-legal-h5-leading); }
.page-template-sluzba .block--paragraph h2,
.page-template-sluzba .block--accordion h2 { line-height: var(--type-service-section-h2-leading); }
.block--reviews h3 p { font-size: inherit; line-height: inherit; }
.block--imagex p { font-size: var(--type-imagex-copy-size); line-height: var(--type-body-leading); }

/* Only behavior that was previously supplied by Bootstrap/WordPress JavaScript. */
[hidden] { display: none !important; }
.navbar-collapse.show { display: block; }
.accordion-collapse:not(.show) { display: none; }
.accordion-button { cursor: pointer; }

/* Moqups D11: FAQ item treatment only. Headings, page copy, widths and outer spacing stay unchanged. */
.block--accordion .accordion-button,
.block--accordion .accordion-button:not(.collapsed) {
  color: var(--color-component-dark) !important;
}
.block--accordion .accordion-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.block--accordion .accordion-item { border: 0; }
.block--accordion .accordion-item:not(:first-of-type) .accordion-button { border-top: 0; }
.block--accordion .accordion-button:not(.collapsed) { border-bottom: 0; }
.block--accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 6 5 5 5-5' stroke='%232DAAE1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 16px 16px !important;
  transform: none;
}
.block--accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m3 6 5 5 5-5' stroke='%232DAAE1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.block--accordion .accordion-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 0;
  /* Moqups FAQ: the answer starts right under the question row and keeps 40 px below. */
  padding: 0 40px 40px 26px;
}
.block--accordion .accordion-button { padding: 20px 26px; }
/* The FAQ heading belongs to the list block: 42 px above the first question, as under other section headings. */
.block--accordion .accordion__heading { margin: 0 0 42px; }
.header .btn { font-size: var(--type-header-cta-size); }
body .header .btn.btn-primary,
body .header .btn.btn-secondary {
  align-items: center;
  display: inline-flex;
  font-size: var(--type-header-cta-size) !important;
  justify-content: center;
  line-height: var(--type-header-cta-leading) !important;
  padding: 6px 24px;
}
/*
 * Header desktop 2 (Moqups 40): one row on a light band. Logo with the claim on the
 * left, the navigation beside the right-hand block, and on the right the two ratings
 * above the two pills (phone secondary, inquiry primary). Scoped to the theme header so
 * the production baseline keeps its two-row header.
 */
.header.header--single-row {
  background: var(--color-header-band);
  border-bottom: 1px solid var(--color-header-band-border);
  padding: 14px 0 24px;
}
.header--single-row .header__inner {
  align-items: flex-end;
  display: flex;
  gap: 24px;
}
.header--single-row .header__brand { margin: 0; padding: 0; }
.header--single-row .header__nav {
  margin-left: auto;
  margin-right: clamp(24px, 5vw, 120px);
  padding: 0;
}
/* The menu row is as tall as the pills and centres its items, so the menu is always
   vertically centred on the buttons whatever the breakpoint sizes are. */
.header--single-row .navbar-nav {
  align-items: center;
  margin-top: 0;
  min-height: calc(var(--type-header-cta-leading) + 14px);
}
.header--single-row .top-text {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  font-size: var(--type-small-size);
  gap: 12px;
  position: static;
}
.header--single-row .header__ratings,
.header--single-row .header__actions { display: flex; gap: 24px; }
.header--single-row .header__actions { gap: 12px; }
.header--single-row .header__rating { color: var(--color-text); line-height: var(--type-small-leading); white-space: nowrap; }
.header--single-row .header__cta { margin: 0 !important; white-space: nowrap; }
.header--single-row .nav-item > .nav-link { white-space: nowrap; }
@media (max-width: 1199.98px) {
  .header.header--single-row { padding: 12px 0; }
  .header--single-row .header__inner { align-items: center; justify-content: space-between; }
  /* The logo yields to the hamburger on narrow screens instead of pushing it off-screen. */
  .header--single-row .header__brand { flex: 0 1 auto; max-width: calc(100% - 90px); min-width: 0; }
  .header--single-row .header__brand .logo { display: block; height: auto; max-width: 100%; width: 28.7rem; }
  .header--single-row .header__nav { flex: 0 0 auto; margin-right: 0; padding: 0; }
  .header--single-row .top-text { display: none; }
}
/* The menu keeps the 20 px of the artboard (Moqups 40) and the production sizes: 18 px below the
   1920 px artboard, 16 px below 1400 px, so the nine items, the logo and the pills fit one line. */
.header--single-row .nav-item > .nav-link { font-size: 2rem; }
/* The open page carries the same underline as the hover (production current-menu-item). */
.header--single-row .nav-item.current-menu-item > .nav-link { border-bottom-color: #2daae1; }
@media (min-width: 1200px) and (max-width: 1919.98px) {
  .header--single-row { --type-header-cta-size: 16px; --type-header-cta-leading: 22px; }
  .header--single-row .header__brand .logo { width: 200px; }
  .header--single-row .header__nav { margin-right: 32px; }
  .header--single-row .nav-item:not(:last-child) { margin-right: 1.2rem; }
  .header--single-row .nav-item > .nav-link { font-size: 1.8rem; }
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
  .header--single-row .header__rating .text-muted { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header--single-row { --type-header-cta-size: 15px; --type-header-cta-leading: 20px; }
  .header--single-row .header__brand .logo { width: 180px; }
  .header--single-row .header__nav { margin-right: 24px; }
  .header--single-row .nav-item:not(:last-child) { margin-right: 1rem; }
  .header--single-row .nav-item > .nav-link { font-size: 1.6rem; }
  body .header--single-row .header__actions .btn.btn-primary,
  body .header--single-row .header__actions .btn.btn-secondary { padding: 6px 18px; }
}
/* The narrowest desktop row: 15 px items with tighter gaps still fit at 1200 px. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .header--single-row .header__inner { gap: 12px; }
  .header--single-row .header__nav { margin-right: 12px; }
  .header--single-row .nav-item:not(:last-child) { margin-right: 0.8rem; }
  .header--single-row .nav-item > .nav-link { font-size: 1.5rem; }
}

/* Moqups D41/M2: footer layout only. Existing production links and contact data stay intact. */
.footer {
  background: var(--color-footer);
  color: var(--color-text-inverse);
  padding: 68px 0 34px;
}
.footer > .container { max-width: 1040px !important; width: 100%; }
.footer > .container > .row:first-child > .col-12.col-lg-10.mx-auto {
  flex: 0 0 100%;
  max-width: 100%;
  position: relative;
}
.footer > .container > .row:first-child > .col-12.col-lg-10.mx-auto > svg {
  display: block;
  height: 64px;
  margin: 0 0 24px;
  width: 64px;
}
/* Approved white logotype: keep the supplied artwork and its natural proportions. */
.footer .footer__logo {
  display: block;
  max-width: 100%;
  width: 360px;
}
.footer .footer__logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.footer .footer__mark {
  display: block;
  height: auto;
  margin: 0;
  object-fit: contain;
  width: 100%;
}
.footer .footer-inner {
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  row-gap: 40px;
}
.footer .footer-inner > [class*='col-'] {
  margin: 0 !important;
  max-width: none;
  padding: 0;
  width: auto;
}
.footer .footer-title { color: var(--color-text-inverse); margin: 0 0 16px; }
.footer .footer-title > .item-link {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
.footer .list { margin: 0; padding: 0; }
.footer .list__item { margin: 0 0 5px; }
.footer .item-link,
.footer .kontakt-info a,
.footer .copyright a { color: var(--color-text-inverse); }
/* "Spravovat souhlas s cookies" is a button that opens the Complianz banner (client, 9 Sep 2026); it reads as the other links. */
.footer button.item-link { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-align: left; }
.footer button.item-link:hover { text-decoration: underline; }
.footer .kontakt-info p { margin: 0; }
.footer p { font-size: var(--type-footer-size); line-height: var(--type-footer-leading); }
.footer .social-links {
  gap: 12px;
  position: absolute;
  right: 0;
  top: 10px;
}
.footer .social-link { margin: 0 !important; }
.footer .social-link__icon { display: block; height: 30px; width: 30px; }
.footer .copyright { background: transparent; border: 0; color: var(--color-text-inverse); margin-top: 10px; }
.footer .copyright-pane { background: transparent; }
.footer .copyright .container { max-width: 1120px; }
.footer .copyright p { text-align: center; }
.facelift-mobile-menu {
  background: var(--color-surface);
  inset: 0;
  overflow-y: auto;
  position: fixed;
  text-align: center;
  z-index: 100001;
}
.facelift-mobile-menu__content { margin: 0 auto; max-width: 390px; min-height: 100%; padding: 28px 30px 36px; }
.facelift-mobile-menu__close { appearance: none; background: transparent; border: 0; color: var(--color-text); cursor: pointer; font-size: var(--type-h1-size); line-height: var(--type-h1-leading); padding: 12px; position: absolute; right: 16px; top: 16px; }
.facelift-mobile-menu .navbar-brand { display: inline-flex; flex-direction: column; margin: 0 auto 26px; }
.facelift-mobile-menu .navbar-brand .logo { height: auto; max-width: 190px; }
.facelift-mobile-menu__ratings { display: grid; gap: 8px; justify-content: center; margin-bottom: 38px; }
.facelift-mobile-menu__ratings a { align-items: center; background: var(--color-mobile-rating); border-radius: 999px; display: flex !important; font-size: var(--type-small-size); gap: 6px; line-height: var(--type-small-leading); padding: 7px 12px; text-decoration: none; }
.facelift-mobile-menu__links { display: grid; gap: 18px; margin: 0 auto 42px; }
.facelift-mobile-menu__links a { color: var(--color-text); font-size: var(--type-mobile-menu-link-size); font-weight: 700; line-height: var(--type-body-leading); text-decoration: none; }
.facelift-mobile-menu__actions { display: grid; gap: 12px; justify-items: center; }
body .facelift-mobile-menu__actions .btn { border-radius: 999px; display: inline-flex; font-size: var(--type-button-size); line-height: var(--type-button-leading); margin: 0 !important; padding: 10px 24px; }
.cmplz-blocked-content-notice { min-height: 70px; }
.cf-turnstile { min-height: 72px; }
.cmplz-cookiebanner.cmplz-dismissed,
#cmplz-manage-consent { display: none !important; }
.static-video-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 100000;
}
.static-video-modal[aria-hidden="true"] { display: none; }
.static-video-modal__backdrop {
  background: var(--color-video-backdrop);
  inset: 0;
  position: absolute;
}
.static-video-modal__stage {
  position: relative;
  width: min(73.125vw, 936px);
  z-index: 1;
}
.static-video-modal__player {
  aspect-ratio: 16 / 9;
  background: var(--color-text);
  box-shadow: 0 16px 48px var(--color-video-shadow);
  width: 100%;
}
.static-video-modal__player iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}
.static-video-modal__close,
.static-video-modal__arrow,
.static-video-modal__thumbnail {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--color-text-inverse);
  cursor: pointer;
  padding: 0;
}
.static-video-modal__close,
.static-video-modal__arrow {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  position: fixed;
  width: 48px;
  z-index: 2;
}
.static-video-modal__close { right: 12px; top: 10px; }
.static-video-modal__arrow { top: calc(50% - 24px); }
.static-video-modal__arrow--previous { left: 18px; }
.static-video-modal__arrow--next { right: 18px; }
.static-video-modal__close svg,
.static-video-modal__arrow svg {
  fill: none;
  height: 30px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  width: 30px;
}
.static-video-modal__close:hover,
.static-video-modal__arrow:hover { color: var(--color-video-accent); }
.static-video-modal__close:focus-visible,
.static-video-modal__arrow:focus-visible,
.static-video-modal__thumbnail:focus-visible {
  outline: 2px solid var(--color-video-accent);
  outline-offset: 3px;
}
.static-video-modal__thumbnails {
  bottom: 18px;
  display: flex;
  gap: 8px;
  left: 50%;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  position: fixed;
  transform: translateX(-50%);
  z-index: 2;
}
.static-video-modal__thumbnail {
  flex: 0 0 auto;
  opacity: 0.56;
  position: relative;
  transition: opacity 160ms ease-out;
}
.static-video-modal__thumbnail::after {
  border: 2px solid transparent;
  content: '';
  inset: 0;
  position: absolute;
}
.static-video-modal__thumbnail img {
  display: block;
  height: 58px;
  object-fit: cover;
  width: 103px;
}
.static-video-modal__thumbnail:hover,
.static-video-modal__thumbnail.is-active { opacity: 1; }
.static-video-modal__thumbnail.is-active::after { border-color: var(--color-text-inverse); }

/* Moqups D2, plus the linked card states D4/D5: homepage service directory.
   The editor canvas is not a component color; retain the production page background. */
.service-directory .pages__container { max-width: 1140px; }
.service-directory__intro {
  margin: 0 auto 42px;
  max-width: 66.666667%;
  text-align: center;
}
.service-directory__intro .h2 { margin-bottom: 20px; }
.service-directory__intro .lead { font-size: var(--type-perex-size); line-height: var(--type-perex-leading); margin: 0; }
.service-directory__filters {
  margin: 0 auto 24px;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
/* Filter chips take the button colours: inactive = secondary, active = primary, same hovers. */
.filter-pills__item {
  background: var(--color-secondary);
  border: 0;
  border-radius: 999px;
  color: var(--color-text-inverse);
  font-size: var(--type-small-size);
  font-weight: 400;
  line-height: var(--type-service-filter-leading);
  padding: 9px 18px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
/* The reference list renders the chips as links; the production link colours (`a:not(.btn)`,
   Customizer `.filter a.active { color: #000 }`) must not leak in, in any state. */
.filter a.filter-pills__item,
.filter a.filter-pills__item:visited,
.filter a.filter-pills__item:hover,
.filter a.filter-pills__item:focus,
.filter a.filter-pills__item.active,
.filter a.filter-pills__item.active:hover { color: var(--color-text-inverse); }
/* Moqups service filter: override the legacy .filter a bold rule for inactive chips. */
.filter a.filter-pills__item:not(.active) { font-weight: 400; }
.filter-pills__item:hover { background: var(--color-secondary-hover); color: var(--color-text-inverse); cursor: pointer; }
.filter-pills__item.active:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.filter-pills__item.active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
/* Empty filter result (feedback 8 Sep 2026): one sentence in place of the tiles. */
.filter-pills__empty {
  font-size: var(--type-large-size);
  line-height: var(--type-large-leading);
  margin: 0;
  padding: 24px 0;
  text-align: center;
  width: 100%;
}
.filter-pills__item:focus-visible,
.service-directory__card:focus-visible {
  outline: 2px solid var(--color-component-dark);
  outline-offset: 3px;
}
.service-directory__grid {
  border-left: 1px solid var(--color-grid-border);
  border-top: 1px solid var(--color-grid-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-directory__card {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-grid-border);
  border-right: 1px solid var(--color-grid-border);
  color: inherit;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px;
  text-decoration: none;
  transition: opacity 160ms ease-out;
}
.service-directory__card[hidden] { display: none; }
/* An emptied grid (every tile filtered out) draws no frame above the empty-state sentence. */
.service-directory__grid:not(:has(.service-directory__card:not([hidden]))) { border: 0; }
.service-directory__card-link {
  color: inherit;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  transition: opacity 160ms ease-out;
}
.service-directory__card-link:hover { color: inherit; opacity: .78; }
/* Sub-services (DEMO Rozcestník služeb 3): rows with an icon and the short name, one line each. */
.service-directory__sub-services { list-style: none; margin: 20px 0 0; padding: 0; }
.service-directory__sub-services > li { border-top: 1px solid var(--color-grid-border); }
.service-directory__sub-services > li:last-child { border-bottom: 1px solid var(--color-grid-border); }
.service-directory__sub-service {
  align-items: center;
  color: var(--color-brand-link);
  display: flex;
  font-size: var(--type-component-copy-size);
  font-weight: 600;
  gap: 10px;
  line-height: var(--type-component-copy-leading);
  padding: 9px 0;
  text-decoration: none;
}
.service-directory__sub-service:hover { color: var(--color-brand-link); text-decoration: underline; }
.service-directory__sub-services--nested {
  margin: 0;
  padding-left: 24px;
}
.service-directory__sub-services--nested > li:last-child { border-bottom: 0; }
.service-directory__card .service-directory__sub-service-icon { aspect-ratio: 1; flex: none; height: 18px; object-fit: contain; width: 18px; }
.service-directory__card > .service-directory__card-link > img {
  aspect-ratio: 1.6;
  display: block;
  object-fit: cover;
  width: 100%;
}
.service-directory__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding-top: 20px;
}
.service-directory__card-title {
  color: var(--color-component-dark);
  font-size: var(--type-perex-size);
  font-weight: 700;
  line-height: var(--type-service-card-title-leading);
  margin-bottom: 14px;
}
/* Feedback 8 Sep 2026: linked titles in lists and directories carry no default underline; the custom underline appears on hover. */
.service-directory__card-title-link,
body .card .card-title a,
.service-card h3 a,
.reference-card h2 a {
  text-decoration: none;
  border-bottom: 0.1rem solid transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: 100ms linear all;
}
.service-directory__card-title-link:hover,
.service-directory__card:hover .service-directory__card-title-link,
body .card .card-title a:hover,
.service-card h3 a:hover,
.reference-card h2 a:hover {
  border-bottom-color: currentColor;
}
.sourced-card__title-link {
  border-bottom: 0.1rem solid transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: 100ms linear all;
}
.sourced-card:hover .sourced-card__title-link { border-bottom-color: currentColor; }
.service-directory__card-text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: var(--color-text);
  display: -webkit-box;
  font-size: var(--type-compact-size);
  line-height: var(--type-service-card-text-leading);
  overflow: hidden;
}

/* Subservice descriptions use the same type scale as surrounding body copy. */
[data-style-component='subservice-directory'] .service-directory__card-text,
[data-style-component='subservice-directory'] .service-directory__card-text :is(p, ul, ol, li) {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* Moqups D43/D44: Ceník. Editor canvas is intentionally not used as a page color. */
.pricing-facelift__hero,
.pricing-facelift { margin-left: calc(50% - 50vw); max-width: none; width: 100vw; }
.pricing-facelift__hero { padding: 86px 0 70px; }
.pricing-facelift__hero .container,
.pricing-facelift > .container { max-width: 1320px !important; }
.pricing-facelift__intro { max-width: 660px; }
.pricing-facelift__intro .h1 { margin: 0 0 24px; }
.pricing-facelift__perex { font-size: var(--type-perex-size); line-height: var(--type-perex-leading); }
.pricing-facelift__perex p { margin: 0 0 14px; }
.pricing-facelift__tabs { max-width: 1320px; }
.pricing-facelift__tablist {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: visible;
  width: 1100px;
}
/* Shared tab bar: one component for the facelift pricing tabs and the production Bootstrap tabs (Materiály). */
.nav-tabs { border: 0; gap: 0; }
.nav-tabs .nav-item { display: flex; flex: 1 1 0; }
.nav-tabs .nav-item .nav-link {
  background: var(--color-pricing-tab);
  border: 1px solid var(--color-pricing-border);
  border-radius: 0;
  color: var(--color-component-text);
  font-size: var(--type-compact-size);
  font-weight: 400;
  height: 100%;
  line-height: var(--type-pricing-tab-leading);
  margin-bottom: 0;
  min-height: 88px;
  padding: 18px 22px;
  text-align: left;
  width: 100%;
}
.nav-tabs .nav-item .nav-link.active {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-surface);
  font-weight: 700 !important;
  height: calc(100% + 1px);
  position: relative;
  z-index: 1;
}
.nav-tabs .nav-item .nav-link:focus-visible { outline: 2px solid var(--color-component-dark); outline-offset: -2px; }
.block--tabs .tab-content { border: 1px solid var(--color-pricing-border); }
.pricing-facelift__panel {
  background: var(--color-surface);
  border: 1px solid var(--color-pricing-border);
  min-height: 520px;
  padding: 64px 80px;
}
.pricing-facelift__panel > .block { background: transparent; margin: 0; padding: 0; }
.pricing-facelift__panel > .block + .block { margin-top: 56px; }
.pricing-facelift__panel .paragraph__container,
.pricing-facelift__panel .button__container { max-width: none; padding: 0; }
.pricing-facelift__panel .paragraph__row,
.pricing-facelift__panel .button__row { margin: 0; }
.pricing-facelift__panel .paragraph__col,
.pricing-facelift__panel .button__col { padding: 0; }
.pricing-facelift__panel .paragraph__col .inner { max-width: none; }
.pricing-service__header h2,
.pricing-factors__header h2 {
  font-size: var(--type-pricing-heading-size);
  line-height: var(--type-pricing-heading-leading);
  margin: 0 0 34px;
}
.pricing-service__overview {
  font-size: var(--type-header-cta-size);
  line-height: var(--type-header-cta-leading);
  max-width: 570px;
}
.pricing-service__overview > ul { margin-bottom: 24px; }
.pricing-service__overview .block--button,
.pricing-factors .block--button { margin-top: 34px; }
.pricing-service__overview .buttons-wrap,
.pricing-factors .buttons-wrap { justify-content: flex-start !important; }
.pricing-service__overview .btn-primary,
.pricing-factors .btn-primary { background: var(--color-component-dark); border-color: var(--color-component-dark); }
.pricing-service__examples { margin-top: 78px; }
.pricing-service__examples-title {
  font-size: var(--type-pricing-examples-size);
  line-height: var(--type-pricing-examples-leading);
  margin: 0 0 28px;
  text-align: center;
}
.pricing-service__example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-example-card {
  border: 1px solid var(--color-pricing-border);
  font-size: var(--type-compact-size);
  line-height: var(--type-compact-leading);
  min-width: 0;
  padding: 20px;
}
.pricing-example-card + .pricing-example-card { border-left: 0; }
.pricing-example-card h3 {
  font-size: var(--type-pricing-card-title-size);
  line-height: var(--type-pricing-card-title-leading);
  margin: 20px 0 16px;
}
.pricing-example-card > h3:first-child { margin-top: 0; }
.pricing-example-card p { margin-bottom: 16px; }
.pricing-example-card__media { margin: 0 0 20px; }
.pricing-example-card__media img {
  aspect-ratio: 1.38 / 1;
  display: block;
  float: none !important;
  height: auto;
  margin: 0;
  object-fit: cover;
  width: 100%;
}
.pricing-example-card ul { padding-left: 22px; }
.pricing-example-card a { color: var(--color-brand); }
.pricing-factors__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  margin-bottom: 44px;
}
.pricing-factors__header h2,
.pricing-factors__intro { grid-column: 1; }
.pricing-factors__intro { font-size: var(--type-header-cta-size); line-height: var(--type-header-cta-leading); }
.pricing-factors__media {
  align-self: start;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}
.pricing-factors__media img { height: 170px; object-fit: contain; width: 170px; }
.pricing-factors__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-factor-card {
  background: var(--color-pricing-factor);
  border-bottom: 1px solid var(--color-surface);
  border-right: 1px solid var(--color-surface);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  min-height: 142px;
  padding: 24px;
}
.pricing-factors__conclusion {
  font-size: var(--type-header-cta-size);
  line-height: var(--type-header-cta-leading);
  margin-top: 38px;
  max-width: 940px;
}

/* Moqups D7/D9/D10/D12/D13/D17/D18/D19/D27/D31/D32.
   These rules only target DOM structures positively identified by the build. */
.sourced-card {
  background: var(--color-surface);
  color: inherit;
  min-width: 0;
  text-decoration: none;
}
.sourced-card:hover { color: inherit; }
.sourced-card:focus-visible {
  outline: 2px solid var(--color-component-dark);
  outline-offset: -2px;
}
.sourced-card .card-title {
  color: var(--color-component-dark);
  font-size: var(--type-h5-size);
  line-height: var(--type-h5-leading);
}
.sourced-card__date {
  color: var(--color-component-text);
  display: block;
  font-size: var(--type-small-size);
  line-height: var(--type-small-leading);
  margin-top: auto;
}

[data-style-component='reference-list'] .pages__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-style-component='article-list'] .pages__row {
  display: grid;
  grid-template-columns: 1fr;
}
body.wp-theme-domerino .blog-archive-page {
  margin-bottom: 2rem;
}
[data-style-component='article-list'] .article-card__image {
  aspect-ratio: 8 / 5;
  height: auto;
  object-fit: cover;
  width: 100%;
}
[data-style-component='reference-list'] .post-wrap,
[data-style-component='article-list'] .post-wrap,
[data-style-component='related-services'] .post-wrap,
[data-style-component='related-references'] .post-wrap {
  padding: 0;
  width: auto;
}

/* Moqups D16: the production review block becomes the shared statistics component. */
[data-style-component='statistics'] {
  background: transparent !important;
  /* Only the horizontal inset of the panel: the vertical rhythm is the uniform block spacing
     (a vertical padding here doubled the gap under the video on the homepage). */
  padding: 0 24px !important;
}
[data-style-component='statistics'] .statistics__panel {
  background: var(--color-component-dark);
  border-radius: 10px;
  color: var(--color-text-inverse);
  margin: 0 auto;
  max-width: 1440px;
  padding: 72px 90px 54px;
}
[data-style-component='statistics'] .statistics__heading {
  color: var(--color-text-inverse);
  margin: 0 auto 52px;
  text-align: center;
}
[data-style-component='statistics'] .statistics__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 820px;
}
[data-style-component='statistics'] .statistics__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 86px;
  padding: 0 24px;
  text-align: center;
}
[data-style-component='statistics'] .statistics__item + .statistics__item {
  border-left: 1px solid var(--color-header-light);
}
[data-style-component='statistics'] .statistics__item strong {
  color: var(--color-header-light);
  font-size: var(--type-statistics-value-size);
  line-height: var(--type-statistics-value-leading);
}
[data-style-component='statistics'] .statistics__item span {
  color: var(--color-text-inverse);
  font-size: var(--type-statistics-copy-size);
  line-height: var(--type-statistics-copy-leading);
}
[data-style-component='statistics'] .statistics__ratings {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 42px;
}
[data-style-component='statistics'] .statistics__mascot {
  height: 80px;
  object-fit: contain;
  width: 80px;
}
[data-style-component='statistics'] .statistics__rating {
  align-items: center;
  background: var(--color-surface);
  border-radius: 999px;
  color: var(--color-component-text);
  display: inline-flex;
  font-size: var(--type-statistics-rating-size);
  gap: 6px;
  line-height: var(--type-statistics-rating-leading);
  min-height: 34px;
  padding: 7px 12px;
  text-decoration: none;
}
[data-style-component='statistics'] .statistics__rating img {
  height: 20px;
  object-fit: contain;
  width: 20px;
}
[data-style-component='statistics'] .statistics__stars { color: var(--color-rating-star); }
[data-style-component='reference-list'] .sourced-card--reference,
[data-style-component='related-references'] .sourced-card--reference {
  border-bottom: 1px solid var(--color-grid-border);
  border-right: 1px solid var(--color-grid-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  padding: 0;
  text-decoration: none;
}
[data-style-component='reference-list'] .sourced-card--reference > img,
[data-style-component='related-references'] .sourced-card--reference > img {
  align-self: stretch;
  grid-column: 1;
  grid-row: 2;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
[data-style-component='reference-list'] .sourced-card--reference > .card-title,
[data-style-component='related-references'] .sourced-card--reference > .card-title {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  padding: 20px;
}
[data-style-component='reference-list'] .sourced-card--reference > .sourced-card__meta,
[data-style-component='related-references'] .sourced-card--reference > .sourced-card__meta {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 20px;
}
[data-style-component='reference-list'] .sourced-card__meta > *,
[data-style-component='related-references'] .sourced-card__meta > * { margin: 0; }

/*
 * Seznam referencí (Moqups 6) in the theme list: the title (20/28 semi-bold, dark
 * blue; the grid row gives every tile the height of its tallest neighbour), a 4:3
 * cover photo in the
 * left half, and four meta rows 17/25.5 with 16 px icons on the right (the service in
 * the link blue). Scoped to the theme card so the static baseline keeps its markup.
 */
[data-style-component='reference-list'] .reference-list-card,
[data-style-component='related-references'] .reference-list-card { grid-template-rows: auto 1fr; }
[data-style-component='reference-list'] .reference-list-card > .card-title,
[data-style-component='related-references'] .reference-list-card > .card-title {
  color: var(--color-primary);
  font-size: var(--type-large-size);
  font-weight: 600;
  line-height: 28px;
  padding: 30px 30px 26px;
}
/* The photo sits on the bottom edge of the tile; the meta list starts at the top of the row. */
[data-style-component='reference-list'] .reference-list-card > .reference-list-card__image,
[data-style-component='related-references'] .reference-list-card > .reference-list-card__image {
  align-self: end;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  /* Fallback slider photos retain the bottom-right crop so the Domerino watermark stays in view. */
  object-position: right bottom;
  width: 100%;
}
[data-style-component='reference-list'] .reference-list-card > .reference-list-card__image--featured,
[data-style-component='related-references'] .reference-list-card > .reference-list-card__image--featured {
  object-position: center;
}
/* The meta box mirrors the 4:3 photo beside it, so its rows start at the photo's top edge
   whenever they fit; a longer list grows the box and the photo stays on the bottom edge. */
[data-style-component='reference-list'] .reference-list-card > .sourced-card__meta,
[data-style-component='related-references'] .reference-list-card > .sourced-card__meta {
  align-self: end;
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  gap: 0;
  padding: 0 20px 12px 30px;
}
[data-style-component='reference-list'] .reference-list-card__meta-item,
[data-style-component='related-references'] .reference-list-card__meta-item {
  align-items: flex-start;
  color: var(--color-text);
  display: flex;
  font-size: var(--type-component-copy-size);
  gap: 10px;
  line-height: var(--type-component-copy-leading);
}
/* Feedback 9 Sep 2026: the month is a meta row like the others (the production date was 14 px). */
[data-style-component='reference-list'] .reference-list-card__meta-item .sourced-card__date,
[data-style-component='related-references'] .reference-list-card__meta-item .sourced-card__date {
  color: inherit;
  display: inline;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
[data-style-component='reference-list'] .reference-list-card__meta-item--service,
[data-style-component='related-references'] .reference-list-card__meta-item--service { color: var(--color-brand-link); }
/* The 18 px icon centres on the first line (25.5 px) even when the service name wraps. */
[data-style-component='reference-list'] .reference-list-card__icon,
[data-style-component='related-references'] .reference-list-card__icon { color: var(--color-brand); flex: none; height: 18px; margin-top: 4px; width: 18px; }
/* Feedback 9 Sep 2026: the tile is an <article> with two targets. The title link stretches over the whole
   tile (the reference), the service row sits above it and opens the service page. */
[data-style-component='reference-list'] .reference-list-card,
[data-style-component='related-references'] .reference-list-card { position: relative; }
[data-style-component='reference-list'] .reference-list-card__link,
[data-style-component='related-references'] .reference-list-card__link { color: inherit; text-decoration: none; }
[data-style-component='reference-list'] .reference-list-card__link::after,
[data-style-component='related-references'] .reference-list-card__link::after { content: ''; inset: 0; position: absolute; z-index: 1; }
[data-style-component='reference-list'] .reference-list-card__service-link,
[data-style-component='related-references'] .reference-list-card__service-link { position: relative; text-decoration: none; z-index: 2; }
[data-style-component='reference-list'] .reference-list-card__service-link:hover span,
[data-style-component='related-references'] .reference-list-card__service-link:hover span,
[data-style-component='reference-list'] .reference-list-card__service-link:focus-visible span,
[data-style-component='related-references'] .reference-list-card__service-link:focus-visible span { text-decoration: underline; }
[data-style-component='reference-list'] .reference-list-card:has(.reference-list-card__service-link:hover) .sourced-card__title-link,
[data-style-component='related-references'] .reference-list-card:has(.reference-list-card__service-link:hover) .sourced-card__title-link { border-bottom-color: transparent; }
/* Native pagination of the reference list (feedback 9 Sep 2026): pills like the filter chips,
   the current page in the primary blue, the ellipsis plain. */
.reference-pagination { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }
.reference-pagination .page-numbers {
  background: var(--color-secondary);
  border-radius: 999px;
  color: var(--color-text-inverse);
  font-size: var(--type-small-size);
  line-height: var(--type-service-filter-leading);
  min-width: 42px;
  padding: 9px 18px;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease;
}
.reference-pagination a.page-numbers:hover,
.reference-pagination a.page-numbers:focus-visible { background: var(--color-secondary-hover); color: var(--color-text-inverse); }
.reference-pagination .page-numbers.current { background: var(--color-primary); }
.reference-pagination .page-numbers.dots { background: transparent; color: var(--color-text); min-width: 0; padding-left: 4px; padding-right: 4px; }

[data-style-component='article-list'] .sourced-card--article {
  border-bottom: 1px solid var(--color-grid-border);
  border-right: 1px solid var(--color-grid-border);
  display: flex;
  flex-direction: column;
  padding: 20px;
}
[data-style-component='article-list'] .sourced-card--article-archive {
  background: var(--color-surface);
}
.block--pages[data-style-component='article-list'] .sourced-card--article-archive > .card {
  background: transparent;
  border: 0;
  padding: 0;
}
[data-related-articles] .sourced-card--article { padding: 0; }
[data-style-component='article-list'] .sourced-card--article > img {
  aspect-ratio: 1.6;
  object-fit: cover;
  width: 100%;
}
[data-style-component='article-list'] .sourced-card--article .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 0 0;
}
[data-style-component='article-list'] .sourced-card--article-archive .sourced-card__date {
  align-items: center;
  display: flex;
  font-size: var(--type-body-size);
  gap: 8px;
  line-height: var(--type-body-leading);
  margin-top: auto; /* client, 9 Sep 2026: the date sits on the bottom edge of every tile */
  padding-top: 14px;
}
/* Client, 9 Sep 2026: the tile title keeps 20 px on mobile too (it is an H3, not the shrinking H5) with a looser leading. */
[data-style-component='article-list'] .sourced-card--article .card-title { font-size: 20px; line-height: 26px; }
[data-style-component='article-list'] .sourced-card--article-archive > .card { flex: 1 1 auto; }
[data-style-component='article-list'] .sourced-card--article-archive .sourced-card__date img {
  flex: 0 0 24px;
  height: 24px;
  width: 24px;
}
[data-related-articles] .sourced-card--article .card-body { padding: 1.5rem 2.4rem 0; }

[data-style-component='glossary-list'] {
  border-left: 1px solid var(--color-grid-border);
  border-top: 1px solid var(--color-grid-border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.glossary-archive-page [data-style-component='glossary-list'] {
  padding-left: 0;
  padding-right: 0;
}
[data-style-component='glossary-list'] .slovnik-link {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-grid-border);
  border-right: 1px solid var(--color-grid-border);
  color: var(--color-component-dark);
  font-weight: 700;
  margin: 0;
  padding: 20px;
  text-decoration: none;
}
[data-style-component='glossary-list'] .slovnik-link:hover,
[data-style-component='glossary-list'] .slovnik-link:focus-visible { background: var(--color-mobile-rating); }

.glossary-detail__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 30px;
  padding-left: 0;
  padding-right: 0;
}
.glossary-detail-page .single-post-article-wrap {
  padding: 3rem 3rem 5rem;
}
.glossary-detail-page .post-content h2 {
  font-size: 2.5rem;
  line-height: 1.3;
}
.glossary-detail-page .single-post-article-wrap > .glossary-detail__nav:first-child { margin: 0 0 3rem; }
.glossary-detail-page .single-post-article-wrap > .glossary-detail__nav:last-child { margin: 3rem 0 0; }
/* The three term links are small secondary pills of components/button.twig (Moqups 13). */

/* Moqups „Související služby“: the section heading sits on the page background and the tiles
   reuse the service directory card (grid, photo crop, type, hover); a row of one to three. */
/* Client, 9 Sep 2026 (Popis komponent "1/2/3 řadit od středu"): one or two tiles sit in the middle and the grey lines
   frame only the tiles, so no top border runs across the empty columns. */
[data-style-component='related-services'] .service-directory__grid {
  border: 0;
  grid-template-columns: repeat(auto-fit, minmax(0, calc(100% / 3)));
  justify-content: center;
}
[data-style-component='related-services'] .service-directory__card { border: 1px solid var(--color-grid-border); }
[data-style-component='related-services'] .service-directory__card + .service-directory__card { margin-left: -1px; }
/* Ukázky realizací on the service page: the same centring for one or two references. */
[data-style-component='related-references'] .pages__row { justify-content: center; }
/* Galerie 2 (Popis komponent "Zarovnávat 1/2/3 od středu"): one or two photos sit in the middle of the row. */
[data-style-component='gallery-2'] { grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 40px) / 3))); justify-content: center; }
.block--gallery [data-style-component='gallery-2'] { grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 80px) / 3))); }
/* Galerie 2 on the reference detail (client, 9 Sep 2026): the captioned rows keep 40 px apart as on O nás. */
.reference-page [data-style-component='gallery-2'] { gap: 40px; grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 80px) / 3))); }
/* A reference photo without a Media library caption fills its cell as a square (the production 250 × 180 px inline-flex figure gives way). */
body .reference-page div.gallery[data-style-component='gallery-2'] > figure.gallery-item:not(.gallery-item--captioned) { display: block !important; height: auto !important; margin: 0 !important; max-width: none !important; width: 100% !important; }
body .reference-page div.gallery[data-style-component='gallery-2'] > figure.gallery-item:not(.gallery-item--captioned) .gallery-icon { margin: 0; width: 100%; }
body .reference-page div.gallery[data-style-component='gallery-2'] > figure.gallery-item:not(.gallery-item--captioned) .gallery-icon a { display: block; }
body .reference-page div.gallery[data-style-component='gallery-2'] > figure.gallery-item:not(.gallery-item--captioned) img { aspect-ratio: 1 / 1; height: auto !important; max-width: none; object-fit: cover; width: 100% !important; }
[data-style-component='related-services'] .service-directory__card img { height: auto; }

/* Ukázky realizací (Moqups „Související reference“): the heading on the page background, three
   reference-list cards a row with a 25 px title, and the secondary „Ukázat další“ pill below. */
[data-style-component='related-references'] { text-align: center; }
[data-style-component='related-references'] .related-references__heading { margin: 0 0 42px; }
/* Související články (client, 9 Sep 2026): the same heading on the page background, 42 px above the tiles. */
[data-related-articles] .related-articles__heading { margin: 0 0 42px; text-align: center; }
[data-style-component='related-references'] .pages__row { border-left: 1px solid var(--color-grid-border); border-top: 1px solid var(--color-grid-border); }
[data-style-component='related-references'] .reference-list-card > .card-title { font-size: var(--type-perex-size); line-height: var(--type-perex-leading); }
/* Only the grid lines: no Bootstrap card frame or radius inside the bordered row. */
[data-style-component='related-references'] .reference-list-card { border-left: 0; border-radius: 0; border-top: 0; }
[data-style-component='related-references'] .pages__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.related-reference-card__image-link {
  display: block;
  overflow: hidden;
}
.related-reference-card__image {
  aspect-ratio: 8 / 5;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
.related-references__more { margin-top: 30px; }

[data-style-component='benefits'] .items__row {
  align-items: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
[data-style-component='benefits'] .items__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
  width: auto;
}
[data-style-component='benefits'] .feature-icon { margin-left: auto; margin-right: auto; }
/* Proč DOMERINO / Přehled vlastností s ikonami (Moqups Benefity): white tiles in the shared grid
   frame like Postup/Argumenty (four a row, 20/30 title, 17/25.5 text), the heading on the page. */
[data-feature-grid='reasons'] .items__row {
  border-left: 1px solid var(--color-grid-border);
  border-top: 1px solid var(--color-grid-border);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
/* The production title row carries its own bottom rule and 40 px paddings; the grid frame draws the line. */
[data-feature-grid='reasons'] .itemsvideo__title { border-bottom: 0; margin: 0 0 42px; padding: 0; }
/* `:nth-child(n)` outranks the production `.page-template-sluzba .block--items-new .feature:nth-child(n+5) { padding-top: 0 !important }`. */
body [data-feature-grid='reasons'] .items__row .feature:nth-child(n) {
  background: var(--color-surface);
  border: 0 !important;
  border-bottom: 1px solid var(--color-grid-border) !important;
  border-right: 1px solid var(--color-grid-border) !important;
  margin: 0;
  max-width: none;
  padding: 40px 30px !important;
  text-align: center;
  width: auto;
}
[data-feature-grid='reasons'] .items__row .feature .h3 { font-size: 20px; line-height: 30px; margin: 0 0 12px; }
[data-feature-grid='reasons'] .items__row .feature p { font-size: var(--type-component-copy-size); line-height: var(--type-component-copy-leading); margin: 0; }
[data-feature-grid='reasons'] .items__row .feature-icon { margin: 0 auto 24px; }
@media (max-width: 991.98px) {
  [data-feature-grid='reasons'] .items__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  [data-feature-grid='reasons'] .items__row { grid-template-columns: 1fr; }
}

[data-style-component='process-arguments'] .p_row {
  align-items: stretch;
  display: grid;
  gap: 0;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-style-component='process-arguments'] .p_feature,
[data-style-component='process-arguments'] .p_card {
  height: 100%;
  max-width: none !important;
  width: 100% !important;
}
[data-style-component='process-arguments'] .p_card {
  border-bottom: 1px solid var(--color-grid-border);
  border-right: 1px solid var(--color-grid-border);
}
/*
 * The production tile rules live only under the service page classes; the block is used
 * on the home page too (Moqups 19), so the tile anatomy is repeated under the component.
 */
[data-style-component='process-arguments'] .p_card {
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 30px 40px;
}
/* Feedback 8 Sep 2026 / Moqups 16: the first line of the title sits on the centre of the number, the text follows closely. */
[data-style-component='process-arguments'] .p_card__top { align-items: flex-start; display: flex; flex-direction: row; gap: 25px; }
[data-style-component='process-arguments'] .p_card__top .p_h3 { line-height: 28px; margin: 18px 0 0; }
[data-style-component='process-arguments'] .p_card { gap: 12px; }
/* The 64 px marker must not stretch the row: the text follows the title at the same 12 px gap in every tile. */
[data-style-component='process-arguments'] .p_card__top .p_card__number,
[data-style-component='process-arguments'] .p_card__top .p_card__icon { margin-bottom: -18px; }
[data-style-component='process-arguments'] .p_card__title { flex: 0 1 auto; text-align: left; }
[data-style-component='process-arguments'] .p_card__text { text-align: left; }
[data-style-component='process-arguments'] .p_h3 { font-size: 2.2rem; font-weight: 600; }
[data-style-component='process-arguments'] .p_card__number {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-service-filter);
  border-radius: 50%;
  color: var(--color-text-inverse);
  display: flex;
  flex: 0 0 64px;
  font-size: 44px;
  font-weight: 800;
  height: 64px;
  justify-content: center;
  line-height: 1;
  width: 64px;
}
[data-style-component='process-arguments'] .perex-width { margin: auto; max-width: 900px; text-align: center; width: 100%; }
/* Icon marker: the same light circle as the number, with the icon inside (Moqups 19). */
[data-style-component='process-arguments'] .p_card__icon {
  align-items: center;
  aspect-ratio: 1;
  background: var(--color-service-filter);
  border-radius: 50%;
  display: flex;
  flex: 0 0 64px;
  height: 64px;
  justify-content: center;
  width: 64px;
}
[data-style-component='process-arguments'] .p_card__icon img { display: block; height: 34px; object-fit: contain; width: 34px; }
/* The tile grid carries the outer border too, so the first tile is framed like the others. */
[data-style-component='process-arguments'] .p_row { border-left: 1px solid var(--color-grid-border); }
/* The heading row already draws the line above the grid; only a grid without a heading needs its own. */
[data-style-component='process-arguments'] .p_row:first-child { border-top: 1px solid var(--color-grid-border); }
/* Photo directly under the tiles, the button set apart from the content (Moqups 19). */
[data-style-component='process-arguments'] .p_process-photo { margin-top: 0; }
[data-style-component='process-arguments'] .p_process-button { margin-top: 40px; }
[data-style-component='process-arguments'] .p_card__text { padding-left: 89px; }

[data-style-component='zigzag'] .twocolumns__row {
  align-items: stretch !important;
  gap: 0;
  margin: 0;
}
[data-style-component='zigzag'] .twocolumns__col {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  padding: 0;
}
[data-style-component='zigzag'] .twocolumns__col > .inner { width: 100%; min-width: 0; }
[data-style-component='zigzag'] .twocolumns__col:has(img) > .inner { height: 100%; }
[data-style-component='zigzag'] .twocolumns__col:has(img) p:has(img) {
  height: 100%;
  margin: 0;
}
[data-style-component='zigzag'][data-zigzag-media='photo'] .twocolumns__col:has(img) > .inner,
[data-style-component='zigzag']:not([data-zigzag-media]):not(:has(img[src*='.svg' i])):not(:has(img[src*='coolingpaint-schema' i])) .twocolumns__col:has(img) > .inner {
  align-self: stretch;
  aspect-ratio: 710 / 450;
  height: auto;
}
[data-style-component='zigzag'][data-zigzag-media='diagram'][data-zigzag-crop='fixed-center-4x3'] .twocolumns__col:has(img) > .inner {
  align-self: flex-start;
  aspect-ratio: 4 / 3;
  height: auto;
}
[data-style-component='zigzag'][data-zigzag-media='diagram'][data-zigzag-fit='contain'] .twocolumns__col:has(img) > .inner {
  align-self: flex-start;
  height: auto;
}
[data-style-component='zigzag'] .twocolumns__col img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
[data-style-component='zigzag'][data-zigzag-media='photo'] .twocolumns__col img,
[data-style-component='zigzag']:not([data-zigzag-media]):not(:has(img[src*='.svg' i])):not(:has(img[src*='coolingpaint-schema' i])) .twocolumns__col img,
[data-style-component='zigzag'][data-zigzag-media='diagram'][data-zigzag-crop='fixed-center-4x3'] .twocolumns__col img {
  object-position: center;
}
[data-style-component='zigzag'][data-zigzag-media='diagram'][data-zigzag-fit='contain'] .twocolumns__col img {
  height: auto;
  object-fit: contain;
  object-position: center;
}
[data-style-component='zigzag'][data-zigzag-image-side='left'] .twocolumns__col:has(img) { order: 1; }
[data-style-component='zigzag'][data-zigzag-image-side='left'] .twocolumns__col:not(:has(img)) { order: 2; }
[data-style-component='zigzag'][data-zigzag-image-side='right'] .twocolumns__col:not(:has(img)) { order: 1; }
[data-style-component='zigzag'][data-zigzag-image-side='right'] .twocolumns__col:has(img) { order: 2; }

@media (min-width: 800px) {
  [data-style-component='zigzag'] {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  [data-style-component='zigzag'] .twocolumns__col:not(:has(img)) .inner {
    color: var(--color-component-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-zigzag-copy-y) var(--space-zigzag-copy-x);
  }
  [data-style-component='zigzag'] .twocolumns__col:not(:has(img)) h2 { max-width: 75% !important; }
}

[data-style-component='narrow-text'] h2 {
  font-size: var(--type-component-h2-size);
  line-height: var(--type-component-h2-leading);
}
[data-style-component='narrow-text'] h3 {
  font-size: var(--type-component-h3-size);
  line-height: var(--type-component-h3-leading);
}
[data-style-component='narrow-text'] p,
[data-style-component='narrow-text'] li {
  font-size: var(--type-component-copy-size);
  line-height: var(--type-component-copy-leading);
}

[data-style-component='reference-quotation'] {
  background: var(--color-surface);
  border-radius: 12px;
  margin: 0;
  max-width: none;
  padding: 72px 32px;
  text-align: left;
  width: 100%;
}
[data-style-component='reference-quotation']::before {
  content: none;
}
[data-style-component='reference-quotation'] > .col-12,
[data-style-component='reference-quotation'] > .reference-testimonial__content {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  max-width: 760px;
  width: 100% !important;
}
[data-style-component='reference-quotation'] .stars-wrap {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin: 0;
  order: 2;
}
[data-style-component='reference-quotation'] .stars-wrap img,
[data-style-component='reference-quotation'] .stars-wrap svg {
  flex: 0 0 20px;
  height: 20px;
  width: 20px;
}
[data-style-component='reference-quotation'] blockquote.perex {
  font-size: var(--type-perex-size) !important;
  line-height: var(--type-perex-leading) !important;
  margin: 0 0 20px;
  order: 1;
}
[data-style-component='reference-quotation'] figcaption,
[data-style-component='reference-quotation'] > .col-12 > p {
  margin-top: 8px;
  order: 3;
}
[data-style-component='reference-quotation'] .qtmark { display: none; }

/* Moqups D14/D15/D20-D26/D30/D34-D38/D42: only exact production hooks. */
[data-style-component='cta-before-form'] .container--references > div {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr);
  margin: 0 auto;
  max-width: 1180px;
  row-gap: 32px;
}
[data-style-component='cta-before-form'] .container--references > div > :first-child {
  grid-column: 2;
  grid-row: 2;
  max-width: none;
  width: 100%;
}
[data-style-component='cta-before-form'] .container--references > div > :nth-child(2) {
  display: contents;
  margin: 0 !important;
  max-width: none;
  width: 100%;
}
[data-style-component='cta-before-form'] .p_media-column {
  display: contents !important;
  margin: 0 !important;
}
[data-style-component='cta-before-form'] .cta-before-form__portrait {
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1;
  height: 150px;
  object-fit: cover;
  place-self: center;
  width: 150px;
}
[data-style-component='cta-before-form'] .p_media-column > div {
  align-self: end;
  grid-column: 2;
  grid-row: 1;
}
[data-style-component='cta-before-form'] .cta-before-form__quote {
  color: var(--color-component-dark);
  margin: 0;
}
[data-style-component='cta-before-form'] .btn-reference {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: center;
}
[data-style-component='ongoing-cta'] .inner { text-align: center; }

/*
 * CTA nad formulářem (Moqups 14): the portrait sits at the top, the name line starts at
 * half the portrait height, the text follows; no button. The block keeps the page
 * background; spacing comes from the production `.block` margins like every block.
 */
[data-style-component='cta-form'] .cta-form__inner {
  align-items: start;
  display: grid;
  column-gap: 50px;
  grid-template-columns: 120px minmax(0, 770px);
  justify-content: center;
}
[data-style-component='cta-form'] .cta-form__inner--no-portrait { grid-template-columns: minmax(0, 770px); }
[data-style-component='cta-form'] .cta-form__portrait {
  border-radius: 50%;
  height: 120px;
  object-fit: cover;
  width: 120px;
}
/* Moqups 14: the name line 17/25.5 semi-bold, the text in the perex size 25/35. */
[data-style-component='cta-form'] .cta-form__author {
  font-size: var(--type-component-copy-size);
  font-weight: 600;
  line-height: var(--type-component-copy-leading);
  margin: 0 0 14px;
  padding-top: 47px;
}
[data-style-component='cta-form'] .cta-form__inner--no-portrait .cta-form__author { padding-top: 0; }
[data-style-component='cta-form'] .cta-form__author strong { font-weight: 700; }
[data-style-component='cta-form'] .cta-form__body {
  font-size: var(--type-perex-size);
  line-height: var(--type-perex-leading);
}
[data-style-component='cta-form'] .cta-form__body > :last-child { margin-bottom: 0; }
/* The paragraph rule of the body copy would otherwise pull the quote back to 17 px. */
[data-style-component='cta-form'] .cta-form__body p { font-size: inherit; line-height: inherit; }

[data-style-component='video'] .twocolumns__row {
  align-items: center;
  gap: 0;
}
/*
 * Feedback 8 Sep 2026: the video keeps a 16:9 frame (no cropping) and sits 16 px inside the
 * white box on every side. The Complianz consent placeholder wraps the frame in a container
 * with `height: inherit`, so it gets the same 16:9 box; `cover` then hides the letterbox
 * bars of the YouTube thumbnail.
 */
[data-style-component='video'] .twocolumns__col > .inner { height: auto; }
[data-style-component='video'] .twocolumns__col > .inner > iframe,
[data-style-component='video'] .twocolumns__col > .inner > .cmplz-blocked-content-container,
[data-style-component='video'] .twocolumns__col > .inner > .cmplz-wp-video {
  aspect-ratio: 16 / 9;
  background-position: center;
  display: block;
  height: auto !important;
  max-height: none;
  width: 100%;
}
[data-style-component='video'] .twocolumns__col > .inner > .cmplz-blocked-content-container iframe { height: 100%; width: 100%; }
/* Complianz turns the column's own .inner into the placeholder (background = YouTube thumbnail,
   4:3 with letterbox bars); centred cover in the 16:9 frame crops exactly those bars. */
[data-style-component='video'] .twocolumns__col > .inner.cmplz-blocked-content-container {
  aspect-ratio: 16 / 9;
  background-position: center !important;
  background-size: cover !important;
  height: auto !important;
}
[data-style-component='video'] .twocolumns__container.bg-white { padding: 16px !important; } /* the same inset on every side (client, 9 Sep 2026) */

[data-style-component='people-gallery'] .tym__row {
  align-items: stretch;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-left: 0;
  margin-right: 0;
}
[data-style-component='people-gallery'] .person {
  align-items: start !important;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  display: grid !important;
  gap: 0 20px;
  grid-template-columns: 180px minmax(0, 1fr);
  /* Client, 9 Sep 2026: the two rows split the portrait at its centre line, so the name keeps its place however many lines the role takes. */
  grid-template-rows: 90px minmax(90px, auto);
  height: 100%;
  padding: 20px;
  width: 100%;
}
/* Moqups Galerie lidé: a 180 px portrait; the name sits on its centre line with the role right below. */
[data-style-component='people-gallery'] .person__photo {
  border-radius: 50%;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 180px;
  max-width: none;
  object-fit: cover;
  width: 180px;
}
[data-style-component='people-gallery'] .person > .text { display: contents; }
[data-style-component='people-gallery'] .person > .text > .perex {
  align-self: end;
  color: var(--color-text);
  font-weight: 600;
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 2px;
}
/* Outweighs the lead token rule (body :where(.perex …):not(…)×4, (0,4,1)) that makes .perex 25 px. */
body [data-style-component='people-gallery'] .person > .text > h3.perex { font-size: 20px !important; line-height: 30px !important; }
[data-style-component='people-gallery'] .person > .text > p:first-of-type {
  align-self: start;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}
[data-style-component='people-gallery'] .person > .text > p:first-of-type small {
  font-size: var(--type-component-copy-size);
  line-height: var(--type-component-copy-leading);
}
[data-style-component='people-gallery'] .person > .text > p:empty { display: none; }
[data-style-component='people-gallery'] .person > .text > p:nth-of-type(n + 2) {
  font-size: var(--type-component-copy-size);
  grid-column: 1 / -1;
  line-height: var(--type-component-copy-leading);
  margin-bottom: 0;
  margin-top: 22px;
}
[data-style-component='people-gallery'] .person > .text > p:nth-of-type(n + 3) { margin-top: 12px; }

[data-style-component='gallery-2'] {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-style-component='gallery-2'] img { display: block; height: auto; width: 100%; }
/* Galerie 2 with captions (Moqups, certificates on O nás): a square photo on the left, the caption
   on the right at most as tall as the photo (about nine lines); the gallery rows carry no borders. */
body div.gallery[data-style-component='gallery-2'] > figure.gallery-item--captioned {
  /* The production `body div.gallery figure.gallery-item` (inline-flex, 250 × 180 px) needs this weight. */
  align-items: center;
  display: grid !important;
  gap: 20px;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  height: auto !important; /* the fixed 180 px let the square photo overflow into the next row */
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
/* Moqups Galerie 2: the rows and columns of captioned items sit 40 px apart. */
.block--gallery [data-style-component='gallery-2'] { gap: 40px; }
body div.gallery[data-style-component='gallery-2'] > figure.gallery-item--captioned .gallery-icon { margin: 0; width: 100%; }
body div.gallery[data-style-component='gallery-2'] > figure.gallery-item--captioned .gallery-icon a { display: block; }
body div.gallery[data-style-component='gallery-2'] > figure.gallery-item--captioned img {
  aspect-ratio: 1 / 1;
  height: auto !important;
  max-width: none;
  object-fit: cover;
  object-position: top;
  width: 100% !important;
}
body div.gallery[data-style-component='gallery-2'] > figure.gallery-item--captioned .gallery-caption {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  color: var(--color-text);
  display: -webkit-box !important; /* production hides every .gallery-caption */
  font-size: var(--type-component-copy-size);
  line-height: var(--type-component-copy-leading);
  margin: 0;
  overflow: hidden;
  text-align: left;
}
.block--gallery .itemsvideo__title { margin-bottom: 42px; }

/* Moqups D22 + user decision: center every populated row without changing D23 gallery content. */
[data-gallery-centering='d22'] {
  align-items: flex-start;
  display: flex !important;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}
body div.gallery[data-gallery-centering='d22'] > figure.gallery-item {
  height: auto !important;
  margin: 0 !important;
}

[data-style-component='gallery-overlay'],
#pbOverlay {
  background: var(--color-video-backdrop) !important;
  inset: 0 !important;
  position: fixed !important;
}
[data-style-component='gallery-overlay'] .pbWrapper > img,
#pbOverlay .pbWrapper > img {
  max-height: calc(100vh - 120px);
  max-width: calc(100vw - 160px);
  object-fit: contain;
}

[data-style-component='map'] .map__container { max-width: 1320px; }

[data-style-component='text-media'] .image__row {
  align-items: stretch;
  gap: 0;
}
[data-style-component='text-media'] img { display: block; height: 100%; object-fit: cover; width: 100%; }

[data-style-component='article-hero'] .hero__container,
[data-style-component='reference-hero'] .container,
[data-style-component='hero'] .hero__container,
[data-style-component='contact-hero'] .hero__container,
[data-style-component='hero'] .title__container { max-width: 1320px; }

/*
 * Moqups 34–38: one hero component (components/hero.twig). Hero+ keeps the production
 * hero layout and type (H1 55 px); the plain Hero and Hero kontakt use the "ostatní" H1
 * of the spec (45 px / 120 %). The back link and the CTA row are shared by every variant.
 */
[data-style-component='hero'] h1,
[data-style-component='contact-hero'] h1 { font-size: var(--type-h1-other-size); line-height: var(--type-h1-other-leading); }
/* The link back to the list is the small secondary pill of components/button.twig. */
.hero__back { margin: 0 0 24px; }
.hero__meta {
  align-items: center;
  color: var(--color-text);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-body-size);
  gap: 8px 20px;
  line-height: var(--type-body-leading);
  margin: 0 0 16px;
}
.hero__meta-item { align-items: center; display: inline-flex; gap: 8px; }
.hero__meta-item svg,
.hero__services svg { color: var(--color-brand-link); flex: 0 0 auto; }
.hero__services {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--type-body-size);
  gap: 8px 12px;
  line-height: var(--type-body-leading);
  margin: 24px 0 0;
}
.hero__service-list { min-width: 0; flex: 1; }
.hero__service-list .hero__services-more { margin-left: .35em; }
.hero__service { color: var(--color-brand-link); font-weight: 500; text-decoration: none; }
.hero__service:hover,
.hero__service:focus-visible { color: #1f9ed6; text-decoration: underline; text-underline-offset: 3px; }
.hero__services-more { color: var(--color-text-muted); }
.hero__cta { gap: 12px; margin-top: 8px; }
/* Hero+ (client, 9 Sep 2026): text and media 50/50; the text keeps its former 5/12 width inside
   the half, and the button sits as close under the lead as the lead under the H1 (15 px). */
[data-style-component='hero-plus'] .hero__col:not(.hero__col--custom) > * { max-width: calc(100% * 5 / 6); }
[data-style-component='hero-plus'] .hero__col:not(.hero__col--custom) > .lead { margin-bottom: 15px !important; }
[data-style-component='hero-plus'] .hero__cta { margin-top: 0; }
.hero__image { display: block; height: auto; width: 100%; }
[data-style-component='article-hero'] .hero__services,
[data-style-component='reference-hero'] .hero__services { margin-top: 0; }
/* Client, 9 Sep 2026: the service tags sit as far under the lead as the lead under the H1 (30 px article, 15 px reference). */
[data-style-component='article-hero'] .lead + .hero__services { margin-top: 0; }
[data-style-component='reference-hero'] .perex + .hero__services { margin-top: 15px; margin-bottom: 24px; }
[data-style-component='reference-hero'] h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-leading); }
/* Client, 9 Sep 2026: the article photo sits on the top edge of the Seznam pill (the text column's 100 px inset);
   the reference hero shares the inset, so its text and before/after photo start on the same edge as on the article. */
@media (min-width: 992px) {
  .service-page [data-style-component='hero-plus'] .hero__row { align-items: flex-start !important; }
  /* Service media starts at the same edge as the list link in the text column. */
  .service-page [data-style-component='hero-plus'] .hero__col--custom,
  [data-style-component='article-hero'] .hero__col:first-child,
  [data-style-component='reference-hero'] .row > .col-md-5,
  [data-style-component='reference-hero'] .row > .col-md-6 { padding-top: 100px; }
}
[data-style-component='hero'] .lead:last-child { margin-bottom: 0 !important; }
/* Hero kontakt: the texts sit on the bottom edge of the photo (PDF: "Text zarovnat zdola"). */
[data-style-component='contact-hero'] .hero__col--custom { padding: 10rem 0 0; }
[data-style-component='contact-hero'] .hero__col--custom:empty { display: none; }
[data-style-component='contact-hero'] .contacts-content a { color: inherit; text-decoration: none; }
[data-style-component='contact-hero'] .contacts-content a[href^='mailto:'] { color: var(--color-secondary); }
[data-style-component='contact-hero'] .contacts-content a:is(:hover, :focus-visible) { text-decoration: underline; }
[data-style-component='contact-hero'] .contacts-content > :last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  [data-style-component='contact-hero'] .hero__col--custom { padding: 6rem 0 0; }
}

/*
 * Formulář (Moqups 42): a dark band with the heading, four tabs joined to a white card,
 * the step content, and the two "questions" with a contact permanently under the card.
 * Markup: views/components/contact-form.twig; behaviour: js/contact-form.js. The compact
 * variant is the same form inside the contact pop-up.
 */
.block--contactform[data-style-component='multistep-form'] {
  background: var(--color-component-dark);
  color: var(--color-text-inverse);
  margin: 0; /* the production `.block` bottom margin would open a gap before the footer */
  padding: 72px 0 64px;
}
.block--contactform .contactform__container { max-width: 1320px; }
/*
 * Blocks with their own full-width background (the dark form band, the white map)
 * end the page flush with the footer when they are the last block: the production
 * `.post-content .block:last-child { margin: 16rem !important }` would leave a strip
 * of page background between the band and the footer.
 */
main.site-content .post-content > .block--contactform:last-child,
main.site-content .post-content > .block--map:last-child,
/* Template-driven routes (contact, article, reference, glossary, FAQ, blog) render the band
   outside .post-content, followed only by the fixed pop-up (.blog-chatbox). */
main.site-content .block--contactform:last-child,
main.site-content .block--contactform:has(+ .blog-chatbox:last-child),
.post-content > .block--contactform:last-child,
.post-content > .block--map:last-child { margin-bottom: 0 !important; }
.multistep-form__honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}
.multistep-form__heading {
  color: inherit;
  font-size: var(--type-statistics-value-size);
  font-weight: var(--type-h2-weight);
  line-height: 45.5px;
  margin: 0 0 50px;
  max-width: 1000px;
}
.multistep-form__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 820px;
}
.multistep-form__tab {
  align-items: flex-start;
  background: var(--color-pricing-tab);
  border: 1px solid var(--color-primary);
  border-right-width: 0;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  justify-content: flex-start;
  min-height: 84px;
  padding: 14px 20px;
  text-align: left;
}
.multistep-form__tab:last-child { border-right-width: 1px; }
/* On the dark band the first tab's left rule showed as a 1 px notch beside the white card. */
.multistep-form:not(.multistep-form--compact) .multistep-form__tab:first-child { border-left-width: 0; }
.multistep-form__tab.active { background: var(--color-surface); border-bottom-color: var(--color-surface); }
.multistep-form__tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -3px; }
.multistep-form__tab strong { display: block; font-size: var(--type-component-copy-size); font-weight: 400; line-height: var(--type-component-copy-leading); }
.multistep-form__tab.active strong { font-weight: 600; }
.multistep-form__tab small { color: var(--color-primary); display: block; font-size: var(--type-small-size); line-height: 21px; margin-top: 2px; }
.multistep-form__required { color: var(--color-error); margin-left: 2px; }
.multistep-form__step {
  background: var(--color-surface);
  color: var(--color-text);
  padding: 32px 30px 30px;
}
.multistep-form__step-title {
  color: inherit;
  display: block;
  font-size: var(--type-perex-size);
  font-weight: 600;
  line-height: var(--type-perex-leading);
  margin: 0 0 24px;
}
.multistep-form__services {
  display: grid;
  gap: 18px 36px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 32px;
}
.multistep-form__choice { align-items: flex-start; cursor: pointer; display: flex; font-size: var(--type-large-size); gap: 12px; line-height: var(--type-large-leading); margin: 0; }
.multistep-form__choice input { accent-color: var(--color-primary); flex: 0 0 auto; height: 20px; margin: 5px 0 0; width: 20px; }
.multistep-form__choice input:checked + span { font-weight: 700; }
.multistep-form__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.multistep-form__footer { align-items: center; display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; margin-top: 24px; }
.multistep-form__footer .multistep-form__actions { margin-left: auto; }
.multistep-form__step textarea,
.multistep-form__field input {
  background: var(--color-surface);
  border: 1px solid var(--color-grid-border);
  border-radius: 0;
  color: var(--color-text);
  display: block;
  font: inherit;
  font-size: var(--type-large-size);
  line-height: var(--type-large-leading);
  margin: 0;
  padding: 14px 44px 14px 16px;
  width: 100%;
}
.multistep-form__step textarea { min-height: 190px; resize: vertical; }
.multistep-form__step textarea:focus,
.multistep-form__field input:focus { border-color: var(--color-primary); outline: 2px solid var(--color-brand); outline-offset: 0; }
/* The required-field indicator: red border and a red "!" mark inside the field. */
.multistep-form__step textarea[aria-invalid='true'],
.multistep-form__field input[aria-invalid='true'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23c33f28'/%3E%3Cpath d='M8 3.5v5.5M8 11.6v.9' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  border-color: var(--color-error);
}
.multistep-form__step textarea[aria-invalid='true'] { background-position: right 14px top 14px; }
.multistep-form__fields { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.multistep-form__field { display: block; grid-column: span 2; margin: 0; }
.multistep-form__field--street { grid-column: span 3; }
.multistep-form__field--zip { grid-column: span 1; }
.multistep-form__field--city { grid-column: span 2; }
.multistep-form__field input::placeholder,
.multistep-form__step textarea::placeholder { color: var(--color-placeholder); opacity: 1; }
.multistep-form__note { font-size: var(--type-component-copy-size); font-weight: 500; line-height: var(--type-component-copy-leading); max-width: 640px; }
.multistep-form__note p { margin: 0; }
.multistep-form__note a { color: var(--color-brand-link); text-decoration: underline; }
.multistep-form__error { color: var(--color-error); font-size: var(--type-small-size); font-weight: 700; margin: 0; }
.multistep-form__error:empty { display: none; }
/* Feedback 8 Sep 2026: the "Přidat obrázek" button sits under the formats sentence. */
.multistep-form__upload-head { margin-bottom: 24px; }
.multistep-form__upload-head .multistep-form__step-title { margin-bottom: 4px; }
.multistep-form__upload-head .btn { margin-top: 16px; }
.multistep-form__hint { font-size: var(--type-component-copy-size); line-height: 22px; margin: 0; }
.multistep-form__file-input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}
.multistep-form__files { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.multistep-form__files:empty { display: none; }
.multistep-form__file { border: 1px solid var(--color-grid-border); display: flex; flex-direction: column; margin: -1px 0 0 -1px; min-width: 0; }
.multistep-form__file-preview { align-items: center; aspect-ratio: 4 / 3; background: var(--color-pricing-factor); color: var(--color-button-disabled); display: flex; justify-content: center; overflow: hidden; }
.multistep-form__file-preview img { height: 100%; object-fit: cover; width: 100%; }
.multistep-form__file-meta { align-items: center; display: flex; font-size: var(--type-small-size); gap: 8px; justify-content: space-between; padding: 10px 12px; }
.multistep-form__file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multistep-form__file-remove { background: none; border: 0; color: var(--color-error); cursor: pointer; flex: 0 0 auto; line-height: 0; padding: 0; }
.multistep-form__file-remove:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* The outlined "Přidejte fotografie domu" and the grey inaccessible buttons of Moqups 42. */
body .multistep-form .btn.btn-secondary.multistep-form__btn--outline {
  background-color: var(--color-surface);
  border-color: var(--color-button-outline);
  color: var(--color-text);
}
body .multistep-form .btn.btn-secondary.multistep-form__btn--outline:hover,
body .multistep-form .btn.btn-secondary.multistep-form__btn--outline:focus-visible {
  background-color: var(--color-pricing-factor) !important;
  border-color: var(--color-button-outline) !important;
  color: var(--color-text) !important;
}
body .multistep-form .btn[aria-disabled='true'],
body .multistep-form .btn[aria-disabled='true']:hover,
body .multistep-form .btn[aria-disabled='true']:focus-visible {
  background-color: var(--color-button-disabled) !important;
  border-color: var(--color-button-disabled) !important;
  color: var(--color-text-inverse) !important;
  cursor: not-allowed;
}
.multistep-form__status { color: inherit; font-weight: 700; margin: 24px 0 0; }
.multistep-form__status:empty { display: none; }
.multistep-form__advisers {
  display: grid;
  gap: 40px 60px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 50px 0 0;
}
/* Moqups 42: a 180 px portrait, the texts start at its top edge 30 px to the right. */
.multistep-form__adviser { align-items: flex-start; display: flex; gap: 30px; }
.multistep-form__adviser-photo { border-radius: 50%; flex: 0 0 auto; height: 180px; object-fit: cover; width: 180px; }
/* Moqups 42: the question 25/37.5 in the light blue of the tabs, the name 17 semi-bold, the rest 17 regular. */
.multistep-form__adviser-body > * { color: inherit; display: block; font-size: var(--type-component-copy-size); line-height: var(--type-component-copy-leading); margin: 0; }
.multistep-form__adviser-question { color: var(--color-pricing-tab); font-size: var(--type-perex-size); font-weight: 600; line-height: 37.5px; margin: 0 0 10px; }
.multistep-form__adviser-name { font-weight: 600; }
/* The production link colour would vanish on the dark band. */
.block--contactform .multistep-form__adviser-link,
.block--contactform .multistep-form__adviser-link:visited { color: var(--color-text-inverse); text-decoration: underline; }
.block--contactform .multistep-form__adviser-link:hover,
.block--contactform .multistep-form__adviser-link:focus-visible { color: var(--color-pricing-tab); }
/* Moqups 30: dedicated contact-send failure state, shared by direct and in-session views. */
.contact-failure { background: #fff; color: var(--color-primary, #09306d); min-height: 60vh; padding: 96px 0 112px; }
.contact-failure__content { max-width: 850px; }
.contact-failure__heading { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.08; margin: 0 0 28px; }
.contact-failure__message { font-size: 1.25rem; line-height: 1.55; margin: 0 0 36px; max-width: 720px; }
.contact-failure__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 20px 28px; }
.contact-failure__phone { color: inherit; font-size: 1.125rem; font-weight: 700; text-decoration: underline; }
.contact-failure__heading:focus { outline: none; }
@media (max-width: 767px) {
  .contact-failure { min-height: 50vh; padding: 64px 0 80px; }
  .contact-failure__actions { align-items: flex-start; flex-direction: column; }
}

/* Compact: the same form inside the contact pop-up. */
.multistep-form--compact .multistep-form__heading { font-size: var(--type-large-size); line-height: var(--type-large-leading); margin-bottom: 16px; max-width: none; }
.multistep-form--compact .multistep-form__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.multistep-form--compact .multistep-form__tab { border-right-width: 1px; margin: 0 0 -1px; min-height: 0; padding: 10px 12px; }
.multistep-form--compact .multistep-form__tab.active { border-bottom-color: var(--color-primary); }
.multistep-form--compact .multistep-form__step { border: 1px solid var(--color-primary); padding: 20px 16px; }
.multistep-form--compact .multistep-form__step-title { font-size: var(--type-compact-size); margin-bottom: 14px; }
.multistep-form--compact .multistep-form__services,
.multistep-form--compact .multistep-form__fields { gap: 12px; grid-template-columns: 1fr; }
.multistep-form--compact .multistep-form__field { grid-column: auto; }
.multistep-form--compact .multistep-form__files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.multistep-form--compact .multistep-form__step textarea { min-height: 120px; }
.multistep-form--compact .multistep-form__footer { margin-top: 16px; }
.multistep-form--compact .multistep-form__actions .btn { flex: 1 1 auto; }

@media (max-width: 799px) {
  [data-style-component='statistics'] { padding: 0 16px !important; }
  [data-style-component='statistics'] .statistics__panel { padding: 48px 20px 38px; }
  [data-style-component='statistics'] .statistics__heading { margin-bottom: 36px; }
  [data-style-component='statistics'] .statistics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-style-component='statistics'] .statistics__item { min-height: 110px; padding: 16px 12px; }
  [data-style-component='statistics'] .statistics__item:nth-child(3) { border-left: 0; }
  [data-style-component='statistics'] .statistics__item:nth-child(n + 3) { border-top: 1px solid var(--color-header-light); }
  [data-style-component='statistics'] .statistics__ratings { flex-direction: column; }
  [data-style-component='reference-list'] .pages__row,
  [data-style-component='related-references'] .pages__row,
  [data-style-component='benefits'] .items__row,
  [data-style-component='process-arguments'] .p_row,
  [data-style-component='glossary-list'] {
    grid-template-columns: 1fr;
  }
  [data-style-component='process-arguments'] .p_card__text { padding-left: 0; }
  [data-style-component='reference-quotation'] { padding: 40px 24px; }
  [data-style-component='reference-list'] .sourced-card--reference,
  [data-style-component='related-references'] .sourced-card--reference {
    display: flex;
    flex-direction: column;
  }
  [data-style-component='reference-list'] .sourced-card--reference > img,
  [data-style-component='related-references'] .sourced-card--reference > img { height: auto; }
  [data-style-component='reference-list'] .reference-list-card > .card-title,
  [data-style-component='related-references'] .reference-list-card > .card-title { padding: 24px 20px 20px; }
  [data-style-component='reference-list'] .reference-list-card > .sourced-card__meta,
  [data-style-component='related-references'] .reference-list-card > .sourced-card__meta { aspect-ratio: auto; padding: 20px; }
  [data-style-component='zigzag'] .twocolumns__col { order: initial !important; }
  [data-style-component='cta-before-form'] .container--references > div { display: flex !important; }
  [data-style-component='cta-before-form'] .p_media-column { display: flex !important; }
  [data-style-component='cta-form'] .cta-form__inner { grid-template-columns: 1fr; justify-items: center; row-gap: 16px; text-align: center; }
  [data-style-component='cta-form'] .cta-form__author { padding-top: 0; }
  [data-style-component='cta-form'] .cta-form__body { font-size: var(--type-large-size); line-height: var(--type-large-leading); }
  [data-style-component='people-gallery'] .tym__row,
  [data-style-component='gallery-2'],
  .multistep-form__services,
  .multistep-form__fields,
  .multistep-form__advisers { grid-template-columns: 1fr; }
  [data-style-component='gallery-overlay'] .pbWrapper > img,
  #pbOverlay .pbWrapper > img { max-height: calc(100vh - 96px); max-width: calc(100vw - 32px); }
  .block--contactform[data-style-component='multistep-form'] { padding: 48px 0; }
  .multistep-form__heading { font-size: var(--type-component-h2-size); line-height: var(--type-component-h2-leading); }
  .multistep-form__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
  .multistep-form__tab { border-right-width: 1px; margin-bottom: -1px; min-height: 0; padding: 12px 14px; }
  .multistep-form__tab.active { border-bottom-color: var(--color-primary); }
  .multistep-form__step { border: 1px solid var(--color-primary); padding: 24px 18px; }
  .multistep-form__field { grid-column: auto; }
  .multistep-form__files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multistep-form__footer,
  .multistep-form__upload-head { flex-direction: column; align-items: stretch; }
  .multistep-form__footer .multistep-form__actions { margin-left: 0; }
  .multistep-form__actions .btn { flex: 1 1 auto; }
  .multistep-form__advisers { gap: 28px; }
  .multistep-form__adviser-photo { height: 120px; width: 120px; }
}

@media (max-width: 1199.98px) {
  .navbar-collapse.show {
    display: block;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .page-template-sluzba .block--twocolumns h2 { line-height: var(--type-service-twocolumn-heading-leading); }
}

@media (max-width: 767px) {
  .footer { padding: 40px 0 34px; }
  .footer .footer__logo { min-height: 44px; width: min(240px, calc(100% - 84px)); }
  .footer > .container { max-width: none !important; padding-left: 28px; padding-right: 28px; }
  .footer > .container > .row:first-child > .col-12.col-lg-10.mx-auto > svg { margin-bottom: 34px; }
  .footer .footer-inner { grid-template-columns: 1fr; row-gap: 38px; }
  .footer .social-links { right: 0; top: 10px; }
  .footer .social-link__icon { height: 34px; width: 34px; }
  .footer .copyright { margin-top: 24px; }
  .footer .copyright .container { padding-left: 28px; padding-right: 28px; }
  .footer .copyright p { text-align: left; }
  .service-directory__intro { max-width: none; }
  .service-directory__grid,
  [data-style-component='related-services'] .service-directory__grid { grid-template-columns: 1fr; }
  [data-style-component='related-services'] .service-directory__card + .service-directory__card { margin-left: 0; margin-top: -1px; }
  [data-style-component='gallery-2'],
  .block--gallery [data-style-component='gallery-2'],
  .reference-page [data-style-component='gallery-2'] { grid-template-columns: 1fr; }
  .service-directory__card { padding: 24px; }
  .pricing-facelift__hero { padding: 56px 0 44px; }
  .pricing-facelift__intro { max-width: none; }
  .pricing-facelift__perex { font-size: var(--type-perex-size); line-height: var(--type-perex-leading); }
  .pricing-facelift__tablist { display: flex; overflow-x: auto; width: auto; }
  .pricing-facelift__tablist .nav-item { flex: 0 0 180px; }
  .pricing-facelift__tablist .nav-item .nav-link { min-height: 70px; }
  .pricing-facelift__panel { min-height: 0; padding: 36px 24px; }
  .pricing-service__header h2,
  .pricing-factors__header h2 { font-size: var(--type-pricing-heading-size); line-height: var(--type-pricing-heading-leading); margin-bottom: 24px; }
  .pricing-service__example-grid,
  .pricing-factors__grid { grid-template-columns: 1fr; }
  .pricing-example-card + .pricing-example-card { border-left: 1px solid var(--color-pricing-border); border-top: 0; }
  .pricing-factors__header { display: block; }
  .pricing-factors__media { margin-top: 24px; }
  .pricing-factors__media img { height: 120px; width: 120px; }
  .home .block--hero .hero__col:last-child { padding-top: 68.234375px; }
  .static-video-modal__stage { width: calc(100vw - 24px); }
  .static-video-modal__arrow { top: calc(50% - 22px); }
  .static-video-modal__arrow--previous { left: 0; }
  .static-video-modal__arrow--next { right: 0; }
  .static-video-modal__close { right: 4px; top: 4px; }
  .static-video-modal__thumbnail img { height: 45px; width: 80px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --type-perex-cta-size: 26px;
    --type-perex-cta-leading: 36.4px;
  }
  .home .block--hero .hero__col:last-child { padding-top: 67px; }
}

.reference-page [data-before-after] {
  aspect-ratio: 16 / 8.2;
  background: #dce3ed;
  overflow: hidden;
  position: relative;
}

.reference-page [data-before-after] > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.reference-page [data-before-after] > [data-after-image] {
  clip-path: inset(0 0 0 50%);
}

.reference-page [data-before-after] label {
  inset: 0;
  position: absolute;
}

.reference-page [data-before-after] input {
  cursor: ew-resize;
  height: 100%;
  opacity: 0;
  width: 100%;
}

.reference-page [data-before-after] .before-label,
.reference-page [data-before-after] .after-label {
  background: #fff;
  bottom: 18px;
  font-weight: 800;
  padding: 8px 13px;
  position: absolute;
  z-index: 2;
}

.reference-page [data-before-after] .before-label { left: 18px; }
.reference-page [data-before-after] .after-label { right: 18px; }

/* Reference body content stays on the page canvas, matching the production detail. */
.reference-page .single-post-article-wrap {
  background: transparent;
  border: 0;
  margin-bottom: var(--space-block); /* client, 9 Sep 2026: 150 px between the gallery and Další služby (was 16 rem) */
}
@media (max-width: 767px) {
  .reference-page .single-post-article-wrap { margin-bottom: var(--space-block-mobile); }
}

/* Production Customizer CSS ships as production/css/custom.css; only page-id keyed rules are mirrored here on the page wrapper classes. */
body.wp-theme-domerino .reference-archive-page .block--title,
body.wp-theme-domerino .glossary-archive-page .block--title { margin-bottom: 2rem !important; }
body.wp-theme-domerino .reference-archive-page .block--paragraph,
body.wp-theme-domerino .glossary-archive-page .block--paragraph { margin-bottom: 8rem !important; }
/* Feedback 9 Sep 2026: the Google reviews widget on the reference list keeps 80 px above and below (not the block gap). */
body.wp-theme-domerino .reference-archive-page .block--hero { margin-bottom: 8rem !important; }
/* Client, 9 Sep 2026: 80 px under the hero lead on the glossary list, the glossary term and the legal pages; 150 px above the Formulář. */
body.wp-theme-domerino .glossary-archive-page .block--hero,
body.wp-theme-domerino .glossary-detail-page .block--hero,
body.wp-theme-domerino .legal-page .block--hero { margin-bottom: 8rem !important; }
.glossary-detail-page > .container > .row.mb-5 { margin-bottom: 10rem !important; } /* 50 px wrap padding + 100 px = 150 px above the form */
.glossary-detail-page .single-post-article-wrap { margin-bottom: 0; } /* the production 16 rem gave 260 px above the form */
.legal-page { margin-bottom: var(--space-block); } /* the Formulář band follows the text column */
.legal-page .post-content > :last-child,
.legal-page .post-content :where(p, ul, ol, h2, h3):last-child { margin-bottom: 0; } /* the last paragraph's 10 px would collapse onto the gap */
/* The Complianz document keeps its own 40 px padding; the 80 px under the hero and the block gap under the page are the theme's. */
body.wp-theme-domerino .legal-page .post-content > .cmplz-document { padding-bottom: 0 !important; padding-top: 0 !important; }
/* Client, 9 Sep 2026: the legal text sits in the centred column of the O nás text with the body type (17/25) and the
   in-text subheadings (25 px H2, 20 px H3) of the other templates; the Complianz document drops its own 16 px sizes. */
@media (min-width: 1200px) {
  .legal-page .legal-page__container { padding-left: 25rem; padding-right: 25rem; }
}
.legal-page .post-content,
.legal-page .post-content p,
.legal-page .post-content li,
.legal-page #cmplz-document,
.legal-page #cmplz-document p,
.legal-page #cmplz-document li,
.legal-page #cmplz-document td { font-size: var(--type-body-size); line-height: var(--type-body-leading); }
.legal-page .post-content h2,
.legal-page #cmplz-document h2 { font-size: var(--type-component-h2-size); line-height: var(--type-component-h2-leading); margin: 4rem 0 1.5rem; }
.legal-page .post-content h3,
.legal-page #cmplz-document h3,
.legal-page #cmplz-document details summary h3 { font-size: var(--type-component-h3-size); line-height: var(--type-component-h3-leading); margin: 3rem 0 1rem; }
.legal-page #cmplz-document h4,
.legal-page #cmplz-document h5 { font-size: var(--type-body-size); line-height: var(--type-body-leading); }
/* Complianz renders the 5.1–5.4 and "K tomuto účelu" subtitles as p.cmplz-subtitle; production drew them as H3, so they read as one. */
.legal-page #cmplz-document p.cmplz-subtitle { font-size: var(--type-component-h3-size); font-weight: 600; line-height: var(--type-component-h3-leading); margin: 3rem 0 1rem; }
/* Prose legal pages read like production: bulleted lists with 10 px between items and a paragraph gap after the list. */
.legal-page .post-content ul,
.legal-page .post-content ol { margin: 0 0 10px; padding-left: 20px; }
.legal-page .post-content li { margin-bottom: 10px; }
.legal-page .post-content li:last-child { margin-bottom: 0; }
.legal-page .post-content > :first-child > :first-child,
.legal-page .post-content > :first-child { margin-top: 0; }
/* A formatted hero lead (paragraphs, bold) reads as one perex: no gap after its last paragraph. */
.block--hero .lead > p { margin-bottom: 1em; }
.block--hero .lead > :last-child { margin-bottom: 0; }
body.wp-theme-domerino .glossary-archive-page .block--references .row { gap: 50px; }
body.wp-theme-domerino .glossary-archive-page .block--references .refimg {
  aspect-ratio: 1;
  border-radius: 50%;
  height: auto;
  object-fit: cover;
  width: 100%;
}
@media (min-width: 1200px) {
  .about-page .post-content .block--paragraph .container,
  .about-page .post-content .block--twocolumns .container,
  .about-page .post-content .block--image .container { padding-left: 25rem; padding-right: 25rem; }
}
.about-page .post-content .block--twocolumns .container { padding-left: 1.5rem; padding-right: 1.5rem; }
/* Client, 9 Sep 2026 (O nás): list items keep the 25 px body leading like the paragraphs (the wrapper's inline 1.3 gave 22 px). */
.block--paragraph .inner li { line-height: var(--type-body-leading); }
/* Images inside production paragraph sections keep the paragraph rhythm (production wraps them in <p>). */
.block--paragraph .wp-block-image { margin: 24px 0; }
/* Service page rhythm: production tuned these blocks with per-block inline margins the editor no longer has. */
.page-template-sluzba [data-feature-grid='warranties'] { margin-top: 30px; margin-bottom: 30px; }
.page-template-sluzba .block--reviews.statistics { margin-bottom: 100px; }
.page-template-sluzba [data-style-component='process-arguments']:has(+ [data-style-component='process-arguments']) { margin-bottom: 80px; }
/* The production homepage items block carries Bootstrap's mb-5 instead of the block margin. */
.home-page .block--items[data-feature-grid='items'] { margin-bottom: 3rem; }
/*
 * Moqups 35: the before/after comparison. A thin red line, a red rounded handle with two
 * chevrons in the middle, and the "Před" / "Po" badges centred on the left and right edges
 * (navy with rounded right corners, light blue with rounded left corners).
 */
body.wp-theme-domerino .image-wrapper .slider { background-color: var(--color-compare); width: 4px; }
body.wp-theme-domerino .image-wrapper .slider::after {
  background: var(--color-compare) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3 6 8l5 5M21 3l5 5-5 5'/%3E%3C/svg%3E") no-repeat center / 32px 16px;
  border: 0;
  border-radius: 8px;
  height: 39px;
  width: 60px;
}
body.wp-theme-domerino .before-status,
body.wp-theme-domerino .after-status {
  background: var(--color-primary);
  border-radius: 0 10px 10px 0;
  bottom: auto;
  font-size: var(--type-body-size);
  font-weight: 500;
  height: auto;
  left: 0;
  line-height: var(--type-small-leading);
  min-width: 64px;
  padding: 9px 16px;
  right: auto;
  text-transform: none;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
}
body.wp-theme-domerino .after-status {
  background: var(--color-secondary);
  border-radius: 10px 0 0 10px;
  left: auto;
  right: 0;
}

[data-chatbox] [hidden] { display: none !important; }
[data-chatbox] .chatbox-ousko,
[data-chatbox] .chatbox-wrapper { z-index: 10000; }
[data-chatbox] button.chatbox-close,
[data-chatbox] button.chatbox-wrapper__close { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: .25rem; }
[data-chatbox] button.drop-wrap { border: 0; cursor: pointer; flex: 0 0 auto; }
/* The whole bubble opens the panel (production), so it reads as one target. */
[data-chatbox] [data-chat-bubble] { cursor: pointer; }
[data-chatbox] .chatbox-part--form { font-weight: 400; padding: 1rem 0; }
[data-chatbox] .chatbox-part--form .btn { margin-top: 1rem; }

/* Native Blog content adapters. Core block styling stays inside Blog output. */
.article-page .single-post-article-wrap {
  background: transparent;
  border: 0;
  margin-bottom: var(--space-block); /* client, 9 Sep 2026: 150 px like every block gap (was 16 rem) */
}

body.wp-theme-domerino .article-page .block--hero {
  margin-bottom: 4rem;
}
body.wp-theme-domerino .article-page .block--hero .hero__col:last-child {
  padding-bottom: 0;
}

.article-page .article-content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.article-page .blog-intro-image {
  height: 55rem;
  object-fit: cover;
  width: 100%;
}
.article-page .article-content > p,
.article-page .article-content > ul,
.article-page .article-content > ol,
.article-page .article-content > figure,
.article-page .article-content > blockquote,
.article-page .article-content > .wp-block-buttons { margin-bottom: 1.5rem; }
.article-page .article-content > p {
  line-height: var(--type-body-leading); /* client, 9 Sep 2026: the body leading of the other templates (was 1.3) */
  margin-bottom: 1rem;
}
.article-page .article-content > ul {
  line-height: var(--type-body-leading);
  margin-bottom: 1rem;
  padding-left: 2rem;
}
.article-page .article-content > ul > li {
  line-height: var(--type-body-leading);
  margin-bottom: 1rem;
}

.article-page .article-content .wp-block-table table {
  line-height: 1.3;
}
.article-page .article-content > ol { line-height: 1.5; }
.article-page .article-content > h2,
.article-page .article-content > h3,
.article-page .article-content > h4,
.article-page .article-content > h5,
.article-page .article-content > h6 { margin: 2.5rem 0 1rem; }
/* Client, 9 Sep 2026: the in-text subheading is the 25 px component H2 of the glossary term and the reference detail. */
.article-page .article-content > h2,
.reference-page .article-content > h2 {
  font-size: var(--type-component-h2-size);
  line-height: var(--type-component-h2-leading);
  margin: 4rem 0 1.5rem;
}
/* Client, 9 Sep 2026: every second image with text keeps its caption on the left (the editor mirrors it). */
.article-page .article-content > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text),
.block--paragraph .inner > div > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) { grid-template-columns: minmax(0, 28fr) minmax(0, 53fr); }
.article-page .article-content > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) > figcaption,
.block--paragraph .inner > div > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) > figcaption { order: -1; }
/* Client, 9 Sep 2026: 50 px above and below a photo in the article body (floated production images keep their margins). */
.article-page .article-content > figure.wp-block-image:not(.alignleft):not(.alignright) { margin-bottom: 50px; margin-top: 50px; }
.article-page .article-content > h3 {
  font-size: var(--type-component-h3-size);
  line-height: var(--type-component-h3-leading);
  margin-bottom: 1.5rem;
}
.article-page .article-content > p + h3,
.article-page .article-content > ul + h3 { margin-top: 3rem; }
.article-page .article-content > ol { padding-left: 1.5rem; }
.domerino-inner-excerpt {
  max-width: 760px;
  margin-inline: auto;
  padding: 5rem;
  background: #f0f2f6;
  color: #000;
}
.domerino-inner-excerpt__heading { margin: 0 0 1.5rem; }
.domerino-inner-excerpt__body > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .domerino-inner-excerpt { padding: 2.5rem; }
}
.article-page .article-content p.is-style-domerino-accent {
  background: #f0f2f6;
  border: 0;
  color: #000;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  padding: 5rem;
}
.article-page .article-content img,
.article-page .article-content video { height: auto; max-width: 100%; }
.article-page .article-content .wp-block-image img,
.article-page .article-content .wp-block-video video { display: block; width: 100%; }
.article-page .article-content .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
.article-page .article-content .wp-block-image.alignleft { float: left; margin-right: 2rem; }
.article-page .article-content .wp-block-image.alignright { float: right; margin-left: 2rem; }
.article-page .article-content figcaption { color: #646464; font-size: var(--type-small-size); line-height: var(--type-small-leading); margin-top: .5rem; text-align: center; }
.article-page .article-content .wp-block-image.is-style-domerino-image-with-text,
.block--paragraph .wp-block-image.is-style-domerino-image-with-text {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 53fr) minmax(0, 28fr);
}
/* Fotky v textu on the pages (client, 9 Sep 2026): the caption beside the photo as in the article, 50 px around. */
.block--paragraph .wp-block-image.is-style-domerino-image-with-text { margin: 50px 0; }
.block--paragraph .wp-block-image.is-style-domerino-image-with-text img { display: block; height: auto; width: 100%; }
.article-page .article-content .wp-block-image.is-style-domerino-image-with-text figcaption,
.block--paragraph .wp-block-image.is-style-domerino-image-with-text figcaption {
  color: var(--color-text);
  font-size: var(--type-body-size);
  font-weight: 700;
  line-height: var(--type-body-leading);
  margin: 0;
  text-align: left;
}
.article-page .article-content .wp-block-gallery,
.article-page .article-content .wp-block-gallery.columns-default { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-page .article-content .wp-block-gallery.columns-1 { grid-template-columns: 1fr; }
.article-page .article-content .wp-block-gallery > .wp-block-image { margin: 0; width: auto; }
.article-page .article-content .wp-block-gallery > .wp-block-image img { height: 100%; object-fit: cover; }
.article-page .article-content .wp-block-table { display: block; max-width: 100%; overflow-x: auto; }
.article-page .article-content .wp-block-table table { border-collapse: collapse; width: 100%; }
.article-page .article-content .wp-block-table th,
.article-page .article-content .wp-block-table td { border: 0; padding: 1px; }
.article-page .article-content .wp-block-quote { border-left: 4px solid #9b2727; margin-left: 0; padding-left: 1.5rem; }
.article-page .article-content .wp-block-quote cite { display: block; font-size: .875rem; margin-top: .75rem; }
.article-page .article-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 1rem; }
/* The core button block inside article content takes the primary pill of the site. */
.article-page .article-content .wp-block-button__link { background: var(--color-primary); border-radius: 999px; color: var(--color-text-inverse); display: inline-block; font-size: var(--type-button-size); font-weight: var(--type-button-weight); line-height: var(--type-button-leading); padding: var(--space-button-y) var(--space-button-x); text-decoration: none; }
.article-page .article-content .wp-block-button__link:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.article-page .article-content .wp-block-embed__wrapper { aspect-ratio: 16 / 9; overflow: hidden; position: relative; width: 100%; }
.article-page .article-content .wp-block-embed__wrapper > iframe,
.article-page .article-content .wp-block-embed__wrapper > .cmplz-blocked-content-container { height: 100%; inset: 0; position: absolute; width: 100%; }
.article-page .article-content .wp-block-embed__wrapper > .cmplz-blocked-content-container { line-height: 1.5; margin: 0 0 1rem; position: relative; }
.article-page .article-content .wp-block-embed iframe { border: 0; height: 100%; width: 100%; }
.article-page .article-content .cmplz-blocked-content-notice,
.article-page .article-content .cmplz-accept-marketing { position: relative; z-index: 1; }

@media (max-width: 991px) {
  .article-page .article-content .wp-block-image.is-style-domerino-image-with-text,
  .block--paragraph .wp-block-image.is-style-domerino-image-with-text { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .article-page .single-post-article-wrap { margin-bottom: var(--space-block-mobile); }

  .article-page .article-content .wp-block-gallery.columns-default,
  .article-page .article-content .wp-block-gallery.columns-1,
  .article-page .article-content .wp-block-gallery.columns-2,
  .article-page .article-content .wp-block-gallery.columns-3,
  .article-page .article-content .wp-block-gallery.columns-4,
  .article-page .article-content .wp-block-gallery.columns-5,
  .article-page .article-content .wp-block-gallery.columns-6,
  .article-page .article-content .wp-block-gallery.columns-7,
  .article-page .article-content .wp-block-gallery.columns-8 { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .article-page .article-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (max-width: 479px) {
  .article-page .single-post-article-wrap { padding: 2.5rem; }
  .article-page .article-content p.is-style-domerino-accent { padding: 2.5rem; }
}

@media (min-width: 1200px) {
  .article-page .single-post-article-wrap {
    padding-left: 25rem;
    padding-right: 25rem;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .article-page .article-content .wp-block-gallery.columns-default,
  .article-page .article-content .wp-block-gallery.columns-2,
  .article-page .article-content .wp-block-gallery.columns-3,
  .article-page .article-content .wp-block-gallery.columns-4,
  .article-page .article-content .wp-block-gallery.columns-5,
  .article-page .article-content .wp-block-gallery.columns-6,
  .article-page .article-content .wp-block-gallery.columns-7,
  .article-page .article-content .wp-block-gallery.columns-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .article-page .article-content .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .article-page .article-content .wp-block-gallery.columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  [data-style-component='article-list'] .pages__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  [data-style-component='article-list'] .pages__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  [data-style-component='article-list'] .pages__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
[data-style-component='quotation'] .ref-quotation { background: #fff; margin: 0; }
[data-style-component='expert-opinion'] .expert-opinion__badge { background: #dbe7f6; border-radius: 4px; display: inline-block; font-weight: 600; padding: .35rem .75rem; }
[data-style-component='expert-opinion'] .expert-opinion__body { font-weight: 600; margin-top: 1.25rem; }
[data-style-component='expert-opinion'] .expert-opinion__author { margin-top: 1.25rem; }
[data-style-component='graphic-link'] .graphic-link__row { justify-content: center; }
[data-style-component='graphic-link'] .graphic-link__card { align-items: center; background: #fff; border: 1px solid #e4e7ec; border-radius: 6px; display: flex; gap: 1rem; height: 100%; padding: 1rem; text-decoration: none; }
[data-style-component='graphic-link'] .graphic-link__image { flex: 0 0 auto; height: 64px; object-fit: cover; width: 64px; }
[data-style-component='graphic-link'] .graphic-link__text { color: var(--color-primary, #09306d); font-weight: 600; }
/* Moqups 26: the map intro is left-aligned, component heading (35/130 %), perex (25/140 %), legend with 19 px dots. */
[data-style-component='map'] .map__intro { text-align: left; }
[data-style-component='map'] .map__heading { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); margin: 0 0 24px; text-align: left; }
[data-style-component='map'] .map__text,
[data-style-component='map'] .map__text p { font-size: var(--type-perex-size); line-height: var(--type-perex-leading); }
[data-style-component='map'] .map__text > :last-child { margin-bottom: 0; }
[data-style-component='map'] .map__legend { display: flex; flex-wrap: wrap; gap: 12px 36px; list-style: none; margin: 28px 0 0; padding: 0; }
[data-style-component='map'] .map__legend-item { align-items: center; display: flex; font-size: var(--type-body-size); font-weight: 500; gap: 12px; line-height: var(--type-body-leading); }
[data-style-component='map'] .map__legend-dot { border-radius: 50%; display: inline-block; flex: 0 0 auto; height: 19px; width: 19px; }
[data-style-component='map'] .map__legend-dot--primary { background: var(--color-primary, #09306d); }
[data-style-component='map'] .map__legend-dot--muted { background: #7d8ba3; }
[data-style-component='map'] .map__legend-dot--accent { background: #3d9be9; }
[data-style-component='cta-inline'] .cta-inline__button { margin-top: 1.5rem; }
[data-feature-grid='benefits'] .p_investice-items { padding-bottom: 8rem !important; padding-top: 8rem !important; }
[data-feature-grid='benefits'] .p_item-investice__image { height: 120px; margin: 0 auto 2rem; width: 100%; }
[data-feature-grid='benefits'] .p_item-investice__image img { display: block; height: 100% !important; max-width: 100% !important; object-fit: contain; width: 100% !important; }
[data-feature-grid='benefits'][data-benefits-footer-image='false'] .p_buttons { margin-top: 2rem; }
[data-feature-grid='benefits'] .p_investice-footer { gap: 1rem; margin-top: 2rem; }
[data-feature-grid='benefits'] .p_investice-footer__icon { flex: none; height: 80px; object-fit: contain; width: 80px; }
.p_process-photo { margin-top: 2rem; }
.p_process-button { margin-top: 1.5rem; }

@media (max-width: 1120px) {
  [data-feature-grid='benefits'][data-benefits-footer-image='false'] .p_buttons { margin-top: 0; }
}

@media screen and (min-width: 768px) {
  body.wp-theme-domerino .container { max-width: 1440px !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body.wp-theme-domerino.page-template-sluzba .block-compare { margin-bottom: 105px !important; }
  body.wp-theme-domerino.page-template-sluzba .block-compare .col-md-6 { transform: translateY(13px); }
}
@media (max-width: 767px) {
  body.wp-theme-domerino .reference-archive-page .block--title,
  body.wp-theme-domerino .glossary-archive-page .block--title { margin-bottom: 2rem !important; }
  body.wp-theme-domerino .reference-archive-page .block--paragraph,
  body.wp-theme-domerino .glossary-archive-page .block--paragraph { margin-bottom: 3rem !important; }
  body.wp-theme-domerino .reference-archive-page .block--hero,
  body.wp-theme-domerino .glossary-archive-page .block--hero,
  body.wp-theme-domerino .glossary-detail-page .block--hero,
  body.wp-theme-domerino .legal-page .block--hero { margin-bottom: 3rem !important; }
  .glossary-detail-page > .container > .row.mb-5 { margin-bottom: 5rem !important; }
  .legal-page { margin-bottom: var(--space-block-mobile); }
  body.wp-theme-domerino.page-template-sluzba .block-compare .col-md-6 { margin-top: 24px; }
}

/* Final client review, 10 Sep 2026: responsive process tiles own their widths,
   including the legacy service-page !important declarations. */
body [data-style-component='process-arguments'] .p_row > .p_feature {
  min-width: 0;
  max-width: none !important;
  width: 100% !important;
  margin: 0;
}
@media (max-width: 1279px) {
  [data-style-component='process-arguments'] .p_card { padding: 28px; }
  [data-style-component='process-arguments'] .p_card__top { flex-direction: column; gap: 16px; }
  [data-style-component='process-arguments'] .p_card__top .p_h3 { margin-top: 0; }
  [data-style-component='process-arguments'] .p_card__top .p_card__number,
  [data-style-component='process-arguments'] .p_card__top .p_card__icon { margin-bottom: 0; }
  [data-style-component='process-arguments'] .p_card__text { padding-left: 0; }
}
@media (min-width: 600px) and (max-width: 991px) {
  [data-style-component='process-arguments'] .p_row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-style-component='process-arguments'] .p_feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  [data-style-component='process-arguments'] .p_row { grid-template-columns: 1fr; grid-auto-rows: auto; }
  [data-style-component='process-arguments'] .p_card { padding: 24px; }
  [data-style-component='process-arguments'] .p_card__number,
  [data-style-component='process-arguments'] .p_card__icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 32px; }
  [data-style-component='process-arguments'] .p_card__icon img { width: 26px; height: 26px; }
}

/* The glossary list-to-contact transition uses the same global block rhythm. */
.glossary-archive-page .slovnik-items { margin-bottom: var(--space-block); }
@media (max-width: 767px) {
  .glossary-archive-page .slovnik-items { margin-bottom: var(--space-block-mobile); }
}
@media (max-width: 799px) {
  /* Even figures have a more specific desktop alternation selector. Reset that
     exact selector as well, keeping every caption after its photo on mobile. */
  .article-page .article-content > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text),
  .block--paragraph .inner > div > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) { grid-template-columns: 1fr; }
  .article-page .article-content .wp-block-image.is-style-domerino-image-with-text > figcaption,
  .article-page .article-content > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) > figcaption,
  .block--paragraph .wp-block-image.is-style-domerino-image-with-text > figcaption,
  .block--paragraph .inner > div > :nth-child(even of figure.wp-block-image.is-style-domerino-image-with-text) > figcaption { order: 0; }
}

/* Service photo directory: heading on the page, only individual tiles framed,
   consistent landscape crops and the article-card underline on hover/focus. */
.service-page .block--pages[data-photo-grid] .title__row,
.service-page .block--pages[data-photo-grid] .title__col,
.service-page .block--pages[data-photo-grid] .title__col .inner {
  background: transparent !important;
  border: 0;
  padding: 0;
  margin: 0;
}
.service-page .block--pages[data-photo-grid] .title__row { margin-bottom: 42px; }
.service-page .block--pages[data-photo-grid] .title__row p { margin-bottom: 0; }
.service-page .block--pages[data-photo-grid] .pages__row { border: 0; }
.service-page .block--pages[data-photo-grid] .post-wrap { border: 0 !important; padding: 0; }
.service-page .block--pages[data-photo-grid] .card {
  border: 1px solid var(--color-grid-border);
  border-radius: 0;
  padding: 30px;
}
.service-page .block--pages[data-photo-grid] .card-img-top {
  display: block;
  aspect-ratio: 16 / 10;
  width: 100%;
  height: auto !important;
  object-fit: cover;
  border-radius: 0;
}
.service-page .block--pages[data-photo-grid] .card-body { padding: 20px 0 0; }
/* Semantic card headings are H3; preserve their established visual role. */
.block--pages[data-photo-grid] .card-title {
  font-size: var(--type-h5-size);
  font-weight: var(--type-h5-weight);
  line-height: var(--type-h5-leading);
}
.service-page .block--pages[data-photo-grid] .card:hover .card-title a,
.service-page .block--pages[data-photo-grid] .card:focus-within .card-title a { border-bottom-color: currentColor; }
@media (max-width: 767px) {
  .service-page .block--pages[data-photo-grid] .card { padding: 24px; }
  /* Card titles must remain larger than their 17px copy, like the service directory. */
  .block--pages[data-photo-grid] .card-title {
    font-size: var(--type-perex-size);
    line-height: var(--type-service-card-title-leading);
  }
  /* Preserve Bootstrap tab switching; make the tab strip horizontally scrollable. */
  .block--tabs .nav-tabs,
  .pricing-facelift__tablist {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: 100%;
    max-width: 100%;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .block--tabs .nav-tabs .nav-item,
  .pricing-facelift__tablist .nav-item { flex: 0 0 auto; width: auto; }
  .block--tabs .nav-tabs .nav-item .nav-link,
  .pricing-facelift__tablist .nav-item .nav-link { min-height: 56px; padding: 16px 20px; white-space: nowrap; }
}

/* Mobile review, 10 Sep: a single grid frame, shared by references and articles. */
body [data-style-component='reference-list'] .pages__row,
body [data-style-component='related-references'] .pages__row,
body [data-related-articles] .pages__row {
  border: 0;
  border-top: 1px solid var(--color-grid-border);
  border-left: 1px solid var(--color-grid-border);
}
body [data-style-component='reference-list'] .post-wrap,
body [data-style-component='related-references'] .post-wrap,
body [data-related-articles] .post-wrap { border: 0 !important; }
body [data-style-component='reference-list'] .reference-list-card,
body [data-style-component='related-references'] .reference-list-card,
body [data-related-articles] .post-wrap > .card {
  border: 0 !important;
  border-right: 1px solid var(--color-grid-border) !important;
  border-bottom: 1px solid var(--color-grid-border) !important;
  border-radius: 0;
}
body [data-related-articles] .sourced-card--article .card-body { padding: 20px 0 0; }
/* Pointer gestures stay with the comparison, without native image dragging. */
.image-wrapper { touch-action: pan-y; user-select: none; }
.image-wrapper img { -webkit-user-drag: none; }
.before-status, .after-status { pointer-events: none; }

@media (max-width: 799px) {
  [data-style-component='reference-list'] .reference-list-card > .sourced-card__meta,
  [data-style-component='related-references'] .reference-list-card > .sourced-card__meta {
    align-self: stretch;
    width: 100%;
    text-align: left;
  }
  .block--accordion .accordion-button { white-space: normal; overflow-wrap: anywhere; text-align: left; gap: 16px; }
  .block--accordion .accordion-button::after { flex: 0 0 16px; margin-left: auto; }
  [data-style-component='people-gallery'] .person { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  [data-style-component='people-gallery'] .person__photo { grid-row: auto; width: 140px; height: 140px; margin-bottom: 20px; }
  [data-style-component='people-gallery'] .person > .text > .perex,
  [data-style-component='people-gallery'] .person > .text > p:first-of-type { grid-column: 1; grid-row: auto; }
}
@media (max-width: 767px) {
  [data-style-component='hero-plus'] .hero__col:not(.hero__col--custom) { padding-left: 15px; padding-right: 15px; }
  [data-style-component='hero-plus'] .hero__col:not(.hero__col--custom) > * { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero__meta, .hero__services, .hero__cta { justify-content: center; }
  body.wp-theme-domerino .hero__image,
  body.wp-theme-domerino .blog-intro-image { height: auto !important; max-height: none; object-fit: contain; }
  body.wp-theme-domerino .imgcontainer,
  body.wp-theme-domerino .image-wrapper { height: auto; min-height: 0; }
  body.wp-theme-domerino .image-wrapper .img1 { position: relative; display: block; width: 100%; height: auto; object-fit: contain; }
  body.wp-theme-domerino .image-wrapper .img2 { width: 100%; height: 100%; object-fit: contain; }
  .article-page .container.gx-0, .glossary-detail-page .container.gx-0 { padding-left: 0; padding-right: 0; }
  .article-page .single-post-article-wrap,
  .glossary-detail-page .single-post-article-wrap { padding-left: 0; padding-right: 0; max-width: none; width: 100%; }
  .article-page .article-content { padding-left: 15px; padding-right: 15px; }
  .glossary-detail-page .single-post-article-wrap { padding-left: 15px; padding-right: 15px; }
  .footer .copyright .container { padding-left: 0; padding-right: 0; }
  .footer .copyright .row { margin-left: 0; margin-right: 0; }
  .footer .copyright .row > * { padding-left: 0; padding-right: 0; }
  body:has(.header--single-row) { padding-top: 78px; }
  .header.header--single-row { position: fixed; left: 0; right: 0; top: 0; z-index: 1030; padding: 8px 0; }
  .header--single-row .header__inner { gap: 12px; }
  .header--single-row .header__brand .logo { width: 210px; }
  .header--single-row .navbar-toggler { padding: 7px 10px; }
  html { scroll-padding-top: 88px; }
  body.admin-bar .header.header--single-row { top: 46px; }
  body.admin-bar #wpadminbar { position: fixed; }
  .header--single-row .navbar-collapse.show { max-height: calc(100dvh - 88px); overflow-y: auto; }
}
.filter-pills__toggle {
  display: none;
}
/* Reserve the live carousel's measured minimum height without clipping longer
   reviews. Its final layout and the section's existing spacing stay unchanged. */
[data-reference-reviews] { min-height: 245px; }
@media (min-width: 768px) {
  [data-reference-reviews] { min-height: 268px; }
}
/* The server-rendered reference disclosure reserves its final first-paint
   structure. Without JavaScript all filter links remain available. */
html:not(.js) [data-filter-server-toggle] { display: none; }
@media (max-width: 767.98px) {
  html.js [data-filter-server-disclosure]:not([data-filter-disclosure-ready='true']) { display: none; }
}

@media (max-width: 767.98px) {
  .filter-pills__toggle {
    align-items: center;
    background: var(--color-secondary);
    border: 0;
    border-radius: 999px;
    color: var(--color-text-inverse);
    display: flex;
    font-size: var(--type-small-size);
    font-weight: 400;
    justify-content: space-between;
    line-height: var(--type-service-filter-leading);
    padding: 12px 18px;
    text-align: left;
    width: 100%;
  }

  .filter-pills__toggle::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: '';
    height: 8px;
    margin-left: 16px;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 160ms ease;
    width: 8px;
  }

  .filter-pills__toggle[aria-expanded='true']::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .filter-pills__toggle:hover {
    background: var(--color-secondary-hover);
    cursor: pointer;
  }

  .filter-pills__toggle[aria-expanded='false'] {
    margin-bottom: 3rem;
  }

  .filter-pills__toggle:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }

  .filter-pills[data-filter-disclosure-ready='true'] {
    align-items: stretch;
    flex-direction: column;
    margin-top: 8px;
  }

  .filter-pills[data-filter-disclosure-ready='true'] .filter-pills__item {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
}
/* The authored flex display must not override the disclosure's hidden state. */

[data-style-component='author-card'] .author-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
}

[data-style-component='author-card'] .author-card {
  min-width: 0;
  border: 1px solid #20aee5;
  border-radius: 10px;
  padding: 20px;
  gap: 30px;
}

[data-style-component='author-card'] .author-card > .text { min-width: 0; }
[data-style-component='author-card'] .author-card > .text > :last-child,
[data-style-component='author-card'] .author-card__bio > :last-child { margin-bottom: 0; }
[data-style-component='author-card'] .author-card__photo {
  flex: none;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

[data-style-component='author-card'] .article-vote {
  min-width: 132px;
  padding-top: 20px;
}

[data-style-component='author-card'] .article-vote__question {
  margin: 0 0 4px;
  font-weight: 700;
}

[data-style-component='author-card'] .article-vote__actions {
  display: flex;
  gap: 2px;
}

[data-style-component='author-card'] .article-vote__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

[data-style-component='author-card'] .article-vote__button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

[data-style-component='author-card'] .article-vote__button--up { color: #20aee5; }
[data-style-component='author-card'] .article-vote__button--down { color: #e31d24; }
[data-style-component='author-card'] .article-vote__button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-style-component='author-card'] .article-vote__button:disabled { cursor: default; opacity: .35; }
[data-style-component='author-card'] .article-vote__button.is-selected { opacity: 1; }

[data-style-component='author-card'] .article-vote__status {
  max-width: 190px;
  min-height: 1.4em;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 767px) {
  [data-style-component='author-card'] .author-feedback {
    grid-template-columns: 1fr;
  }

  [data-style-component='author-card'] .article-vote {
    min-width: 0;
    padding-top: 0;
  }
  [data-style-component='author-card'] .author-card { gap: 20px; }
}
.filter-pills[hidden] { display: none; }
@media (max-width: 767px) {
  .footer > .container > .row:has(> .copyright) { margin-left: 0; margin-right: 0; }
}

/* Section spacing belongs to the outer block, not its former framed heading
   or transparent article wrapper. Keep heading-to-content and card padding. */
main.site-content .block .itemsvideo__title,
main.site-content .block .p_investice__title { padding-top: 0; }
main.site-content .block .itemsvideo__title > :first-child,
main.site-content .block .p_investice__title > :first-child { margin-top: 0; }
main.site-content .block--pages .title__col > .inner {
  background: transparent !important;
  border: 0;
  padding-top: 0;
}
main.site-content .row-items-zaruky { padding-top: 0; padding-bottom: 0; }
main.site-content [data-feature-grid='warranties'] .itemsvideo__title { border-bottom: 0; }
main.site-content .row-items-zaruky .zaruky-wrapper > :last-child { margin-bottom: 0; }
main.site-content :is(.reference-page, .article-page, .glossary-detail-page) .single-post-article-wrap {
  padding-top: 0;
  padding-bottom: 0;
}
main.site-content .single-post-article-wrap .block { padding-top: 0; padding-bottom: 0; }
main.site-content .single-post-article-wrap > .post-content > :first-child { margin-top: 0; }
main.site-content .single-post-article-wrap > .post-content > :last-child { margin-bottom: 0 !important; }
main.site-content .single-post-article-wrap > .post-content > .block:first-child :is(h1, h2, h3):first-child { margin-top: 0; }
/* Replace the old 50px wrapper-padding + 100px margin compensation. */
.glossary-detail-page > .container > .row.mb-5 { margin-bottom: var(--space-block) !important; }
@media (max-width: 767px) {
  .glossary-detail-page > .container > .row.mb-5 { margin-bottom: var(--space-block-mobile) !important; }
}

/* Reference detail: 100px around the narrative, followed by wide Galerie 1. */
.reference-page .ref-quotation { margin-bottom: 0; }
main.site-content .reference-page .reference-narrative { margin-top: 100px; margin-bottom: 100px; }
body .reference-page .reference-gallery {
  --reference-gallery-columns: 6;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 0;
}
body .reference-page .reference-gallery > figure.gallery-item {
  flex: 0 0 calc((100% - (var(--reference-gallery-columns) - 1) * 24px) / var(--reference-gallery-columns));
  width: calc((100% - (var(--reference-gallery-columns) - 1) * 24px) / var(--reference-gallery-columns)) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .reference-page .reference-gallery .gallery-icon,
body .reference-page .reference-gallery a { display: block; margin: 0; padding: 0; width: 100%; }
body .reference-page .reference-gallery img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1; object-fit: cover; margin: 0; }
@media (max-width: 1199px) { body .reference-page .reference-gallery { --reference-gallery-columns: 4; } }
@media (max-width: 767px) { body .reference-page .reference-gallery { --reference-gallery-columns: 3; gap: 15px; } body .reference-page .reference-gallery > figure.gallery-item { flex-basis: calc((100% - 30px) / 3); width: calc((100% - 30px) / 3) !important; } }
@media (max-width: 479px) { body .reference-page .reference-gallery > figure.gallery-item { flex-basis: calc((100% - 15px) / 2); width: calc((100% - 15px) / 2) !important; } }

/* Moqups gallery overlay: all actions together in the upper right corner. */
#pbOverlay.show { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 72px 24px 24px; }
#pbOverlay .pbWrapper { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; }
#pbOverlay .pbWrapper::before, #pbOverlay .pbWrapper::after { display: none; }
#pbOverlay .pbWrapper > img { max-height: calc(100dvh - 190px); max-width: 100%; border-radius: 0; box-shadow: none; }
#pbOverlay #pbCaption { position: relative; inset: auto; width: min(720px, 100%); margin: 16px 0 0; padding: 0; background: transparent; opacity: 1; transform: none; line-height: 1.5; font-size: 14px; color: white; }
#pbOverlay #pbCaption .title { white-space: normal; }
#pbOverlay #pbCaption label, #pbOverlay .pbThumbs, #pbOverlay #pbAutoplayBtn { display: none; }
#pbOverlay :is(#pbPrevBtn, #pbNextBtn, #pbCloseBtn) { position: fixed; top: 16px; bottom: auto; left: auto; width: 44px; height: 44px; padding: 0; margin: 0; display: grid; place-items: center; opacity: 1; transform: none; transition: none; border-radius: 4px; color: white; background: transparent; z-index: 20; }
#pbOverlay #pbPrevBtn { right: 116px; }
#pbOverlay #pbNextBtn { right: 66px; }
#pbOverlay #pbCloseBtn { right: 16px; }
#pbOverlay :is(#pbPrevBtn, #pbNextBtn) b, #pbOverlay .prevNext::after { display: none; }
#pbOverlay :is(#pbPrevBtn, #pbNextBtn, #pbCloseBtn)::before { display: block; font: 28px/1 Arial, sans-serif; color: white; width: auto; height: auto; padding: 0; background: none; border: 0; border-radius: 0; opacity: 1; }
#pbOverlay #pbPrevBtn::before { --gallery-action-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E"); }
#pbOverlay #pbNextBtn::before { --gallery-action-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E"); }
#pbOverlay #pbCloseBtn::before { --gallery-action-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E"); }
#pbOverlay :is(#pbPrevBtn, #pbNextBtn, #pbCloseBtn):is(:hover, :focus-visible) { background: #ffffff26; outline: 2px solid white; outline-offset: 2px; }
#pbOverlay { background: #333 !important; }
#pbOverlay .pbWrapper { padding: 0 !important; margin: 0 !important; }
#pbOverlay #pbCaption .pbCaptionText { padding: 0; }
#pbOverlay #pbCaption .title { margin: 0; max-height: 72px; overflow-y: auto; font-weight: 400; }

/* Material Icons arrow_back, arrow_forward and close; no inherited Photobox glow. */
#pbOverlay :is(#pbPrevBtn, #pbNextBtn, #pbCloseBtn)::before {
  content: '';
  width: 28px;
  height: 28px;
  background: currentColor;
  mask: var(--gallery-action-path) center / contain no-repeat;
  -webkit-mask: var(--gallery-action-path) center / contain no-repeat;
  text-shadow: none;
  box-shadow: none;
  filter: none;
}
#pbOverlay :is(#pbPrevBtn, #pbNextBtn, #pbCloseBtn) { text-shadow: none; filter: none; box-shadow: none; }
@media (max-width: 767px) {
  main.site-content .reference-page .reference-narrative {
    padding-left: 0;
    padding-right: 0;
    margin-top: 60px;
    margin-bottom: 60px;
  }
  main.site-content .reference-narrative > .article-content { padding-left: 0; padding-right: 0; }
}

/* FAQ archive deliberately uses 80px between its hero/perex and filters. */
main.site-content .faq-archive-page .block--hero { margin-bottom: 80px !important; }

/* Text is one section. Paragraph spacing stays inside it, section spacing outside. */
main.site-content .domerino-text { padding-block: 0; }
main.site-content .domerino-text > .container { padding: 0 1.5rem; }
.domerino-text__content { max-width: 940px; margin-inline: auto; }
.domerino-text .paragraph__row { margin-inline: 0; }
.domerino-text .paragraph__col { padding-inline: 0; }
.domerino-text__content .inner { padding: 0; }
.domerino-text__content p,
.domerino-text__content li { font-size: var(--type-body-size); line-height: var(--type-body-leading); }
.domerino-text__content .inner > div > p,
.domerino-text__content .inner > div > ul,
.domerino-text__content .inner > div > ol { margin-block: 0 20px; }
.domerino-text__content .inner > div > h2,
.domerino-text__content .inner > div > h3 { margin-block: 40px 20px; }
.domerino-text__content .inner > div > :first-child { margin-top: 0; }
.domerino-text__content .inner > div > :last-child { margin-bottom: 0; }
/* Article/reference/legal wrappers already provide their reading width and gutters. */
main.site-content :is(.article-content, .legal-page) .domerino-text > .container { max-width: none; padding: 0; }
main.site-content :is(.article-content, .legal-page) .domerino-text__content { max-width: none; }
main.site-content :is(.article-content, .legal-page) .domerino-text:last-child { margin-bottom: 0 !important; }

/* A Text inside an article preserves the existing continuous article typography. */
.article-page .domerino-text__content .inner > div > p { margin-bottom: 1rem; }
.article-page .domerino-text__content .inner > div > ul { margin-bottom: 1rem; padding-left: 2rem; }
.article-page .domerino-text__content .inner > div > ul > li { margin-bottom: 1rem; }
.article-page .domerino-text__content .inner > div > ol { margin-bottom: 1.5rem; line-height: 1.5; padding-left: 1.5rem; }
.article-page .domerino-text__content .inner > div > h2 {
  font-size: var(--type-component-h2-size);
  line-height: var(--type-component-h2-leading);
  margin: 4rem 0 1.5rem;
}
.article-page .domerino-text__content .inner > div > h3 {
  font-size: var(--type-component-h3-size);
  line-height: var(--type-component-h3-leading);
  margin: 2.5rem 0 1.5rem;
}
.article-page .domerino-text__content .inner > div > :is(p, ul) + h3 { margin-top: 3rem; }
.article-page .domerino-text__content .inner > div > figure.wp-block-image:not(.alignleft):not(.alignright) { margin-top: 50px; margin-bottom: 50px; }
/* Preserve native article block spacing when those blocks live inside Text. */
.article-page .domerino-text__content .inner > div > p.is-style-domerino-accent { margin: 0; }
.article-page .domerino-text__content .inner > div > :is(.wp-block-gallery, .wp-block-table, .wp-block-buttons, .wp-block-quote, .wp-block-embed) { margin-bottom: 1.5rem; }
.article-page .article-content > .domerino-text:first-child .inner > div > :first-child { margin-top: 0; }
.article-page .article-content > .domerino-text:last-child .inner > div > :last-child { margin-bottom: 0; }

/* In a continuous article, Text groups edit together without adding layout boxes. */
.article-page .article-content .domerino-text,
.article-page .article-content .domerino-text > .container,
.article-page .article-content .domerino-text .paragraph__row,
.article-page .article-content .domerino-text .paragraph__col,
.article-page .article-content .domerino-text .inner,
.article-page .article-content .domerino-text .inner > div { display: contents; }
.article-page .article-content .domerino-text { margin: 0 !important; }
.article-page .domerino-text__content .inner > div > ol li { line-height: inherit; }

/* Moqups article headings: narrower measures on desktop, full width below 800px. */
.article-page .article-content > h2,
.article-page .domerino-text__content .inner > div > h2 {
  width: 75%;
}
.article-page .article-content > h3,
.article-page .domerino-text__content .inner > div > h3 {
  width: 60%;
  font-weight: 700;
  line-height: 1.5;
}
@media (width < 800px) {
  .article-page .article-content > :is(h2, h3),
  .article-page .domerino-text__content .inner > div > :is(h2, h3) {
    width: 100%;
  }
}

/* The error page follows the shared left-aligned Hero. */
body.wp-theme-domerino .not-found-page .block--hero { margin-bottom: 6rem !important; text-align: left; }
.not-found-page .hero__row { justify-content: flex-start; }
.not-found-page__content { text-align: left; }
.not-found-page .wp-block-buttons { justify-content: flex-start; margin-top: 3rem; }
.not-found-page .wp-block-button__link { background: #0c326f; color: #fff !important; font-weight: 700; text-decoration: none; padding: 1.6rem 3rem; }
.not-found-page .wp-block-button__link:hover { background: #4caccf; }
.not-found-page .wp-block-button__link:focus-visible { outline: 3px solid #4caccf; outline-offset: 4px; }

/* Mobile feedback, 11 Sep 2026: preserve desktop composition. */
@media (max-width: 767px) {
  :root {
    --type-h2-size: 32px;
    --type-h2-leading: 38.4px;
  }
  body.home main.site-content h2,
  .home-page h2 {
    font-size: 32px;
    line-height: 38.4px;
  }
  .multistep-form__adviser-question { line-height: 30px; }
  main.site-content [data-style-component='zigzag'] .inner > h2 { max-width: 100%; width: 100%; }
  body.wp-theme-domerino :is(.home-page, .service-page) [data-style-component='hero-plus'] h1,
  body.wp-theme-domerino.home [data-style-component='hero-plus'] h1 {
    font-size: 40px;
    line-height: 44px;
  }
  body.wp-theme-domerino [data-style-component='hero-plus'] .hero__col:not(.hero__col--custom) {
    padding-top: 24px;
    text-align: left;
  }
  [data-style-component='hero-plus'] .hero__cta { justify-content: flex-start; }
  [data-style-component='hero-plus'] .hero__cta .btn { margin-inline: 0; }
  .link-up { display: flex; right: 16px; bottom: 120px; width: 44px; height: 44px; z-index: 9999; }
  [data-style-component='map'] .map__row > :last-child { order: -1; margin-bottom: 32px; }
  [data-style-component='map'] .map__intro { margin-bottom: 0 !important; }
  [data-style-component='map'] .map__legend { flex-direction: column; align-items: flex-start; }
  [data-style-component='video'] .twocolumns__col--last { margin-top: 0 !important; margin-bottom: 32px; }
  [data-style-component='cta-form'] .cta-form__inner { justify-items: start; text-align: left; }
  [data-style-component='cta-inline'] { text-align: left; }
  [data-style-component='statistics'] .statistics__heading { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); }
  [data-feature-grid='warranties'] .zaruky-wrapper h3 { font-size: 18px; line-height: 24px; }
  [data-style-component='related-references'] .reference-list-card > .card-title { font-size: 27px; line-height: 32.4px; }
  main.site-content [data-style-component='zigzag'] + [data-style-component='zigzag'] { margin-top: 0 !important; }
  [data-style-component='zigzag'] .twocolumns__row { flex-direction: column !important; }
  main.site-content [data-style-component='zigzag'] .twocolumns__col { margin-bottom: 0; }
  main.site-content [data-style-component='zigzag'] .inner > p:last-child { margin-bottom: 0 !important; }
  [data-style-component='zigzag'] .twocolumns__col:has(img) { order: 0 !important; }
  [data-style-component='zigzag'] .twocolumns__col:not(:has(img)) { order: 1 !important; padding-top: 24px; }
  [data-style-component='zigzag'] .twocolumns__col:not(:has(img)) h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-leading); }
}

/* Shared mobile alignment for every Hero variant, including rich-text perex. */
@media (max-width: 767px) {
  body.wp-theme-domerino main.site-content .block--hero,
  body.wp-theme-domerino main.site-content .block--hero .hero__col,
  body.wp-theme-domerino main.site-content .block--hero h1,
  body.wp-theme-domerino main.site-content .block--hero .lead,
  body.wp-theme-domerino main.site-content .block--hero .lead :is(p, div),
  body.wp-theme-domerino main.site-content [data-style-component='reference-hero'] :is(h1, .lead, .perex) {
    text-align: left !important;
  }
  body.wp-theme-domerino main.site-content .block--hero .hero__cta { justify-content: flex-start; }
  body.wp-theme-domerino main.site-content .block--hero .hero__cta .btn { margin-inline: 0; }
  body.wp-theme-domerino main.site-content .block--hero .hero__col--custom + .hero__col { padding-top: 24px; }
}

/* Before/after photos can have slightly different source aspect ratios. */
body.wp-theme-domerino .image-wrapper > img.img {
  object-fit: cover;
  object-position: center;
}

/* The popup uses the production two-field quick question form. */
[data-chatbox] .chatbox-wrapper { height: auto; max-height: calc(100dvh - 24px); overflow-y: auto; }
.quick-contact { display: grid; gap: 10px; }
.quick-contact textarea, .quick-contact input[type='email'] { background: #fff; border: 0; border-radius: 0; color: #172b45; font: inherit; font-size: 16px; line-height: 24px; padding: 12px 20px; width: 100%; }
.quick-contact textarea { min-height: 220px; height: 262px; resize: vertical; }
.quick-contact__footer { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.quick-contact__footer p { flex: 1; margin: 0; font-size: 14px; line-height: 18px; }
.quick-contact__footer a { color: #fff; text-decoration: underline; }
.quick-contact button { border: 0; border-radius: 3px; background: #20a1cf; color: #fff; font: inherit; font-size: 20px; font-weight: 700; padding: 6px 8px; cursor: pointer; }
.quick-contact button:disabled { opacity: .6; cursor: not-allowed; }
.quick-contact__status { margin: 0; font-size: 15px; line-height: 22px; }
.quick-contact__status:empty { display: none; }
.quick-contact[data-send-state] .quick-contact__status { padding: 16px; border: 2px solid #fff; border-radius: 4px; background: #fff; color: #09306d; font-size: 17px; line-height: 24px; font-weight: 700; }
.quick-contact[data-send-state='success'] .quick-contact__status { border-color: #87d5ae; background: #e5f7ed; color: #145535; }
.quick-contact[data-send-state='error'] .quick-contact__status { border-color: #ffc2c2; background: #fff1f1; color: #8b2020; }
.quick-contact__status:focus-visible { outline: 3px solid #20a1cf; outline-offset: 3px; }

/* Match the production popup panel geometry and controls. */
[data-chatbox] .chatbox-wrapper { width: 420px; max-width: 100%; left: auto; right: 0; bottom: 0; padding: 10px 15px; background: #09306d; }
[data-chatbox] .chatbox-wrapper__branding { margin-bottom: 15px; font-size: 16px; line-height: 20px; min-height: 70px; }
[data-chatbox] .chatbox-wrapper__drop-wrap { width: 70px; flex: 0 0 70px; }
[data-chatbox] .chatbox-wrapper__drop { width: 70px; height: 70px; }
[data-chatbox] .chatbox-part--form { padding: 0; }
.quick-contact input[type='email'] { height: 46px; }
.quick-contact textarea, .quick-contact input[type='email'] { padding-block: 10px; }
.quick-contact button { background: #1f9ed6; line-height: 30px; padding: 3.75px 7.5px; border: 1px solid transparent; }
.quick-contact__footer { margin-top: 16px; padding: 10px 0 10px 15px; }

.quick-contact [data-quick-turnstile] { line-height: 0; min-width: 0; overflow: hidden; }

/* FINAL feedback: preserve service relationships in the footer. */
.footer .footer__sub-services { margin: 8px 0 12px; padding-left: 20px; }
.footer .footer__services a.item-link {
  border-bottom: 0;
  display: inline;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: .16em;
}

/* FINAL contact feedback: adjacent contact paragraphs and a 50px form gap. */
body.wp-theme-domerino main.site-content .contact-page [data-style-component='contact-hero'] { margin-bottom: 50px !important; }
@media (min-width: 992px) {
  [data-style-component='contact-hero'] .contacts-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  [data-style-component='contact-hero'] .contacts-content > p { margin: 0; }
}
/* Text blocks in references use the same reading typography as articles. */
.reference-page .domerino-text__content .inner > div > h2 {
  font-size: var(--type-component-h2-size);
  line-height: var(--type-component-h2-leading);
  margin: 4rem 0 1.5rem;
}

/* Keep directory actions secondary to the service title. */
[data-style-component='subservice-directory'] .service-directory__card-body .btn {
  font-size: var(--type-compact-size) !important;
  font-weight: 600;
  line-height: 1.4;
}

[data-feature-grid]:not([data-feature-grid='benefits']) .p_investice-footer { gap: 1rem; margin-top: 2rem; }
[data-feature-grid]:not([data-feature-grid='benefits']) .p_investice-footer__icon { flex: none; height: 80px; object-fit: contain; width: 80px; }

/* Native Benefity (Moqups 18): one layout for saved and newly inserted benefits.
   Dedicated classes keep legacy investment/reasons rules out of this component. */
body .domerino-benefits { background: var(--color-pricing-factor); padding: 70px 0; }
body .domerino-benefits__intro { margin-bottom: 50px; text-align: center; }
body .domerino-benefits__intro h2 { margin: 0 0 24px; }
body .domerino-benefits__intro .perex > :last-child { margin-bottom: 0; }
body .domerino-benefits__grid { display: grid; grid-auto-rows: 1fr; gap: 50px 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; }
body [data-benefits-columns='1'] .domerino-benefits__grid { grid-template-columns: minmax(0, 1fr); max-width: 330px; }
body [data-benefits-columns='2'] .domerino-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; }
body [data-benefits-columns='3'] .domerino-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body [data-benefits-count='3'] .domerino-benefits__grid { max-width: 1070px; }
body .domerino-benefits__item { min-width: 0; text-align: center; overflow-wrap: anywhere; }
body .domerino-benefits__icon { width: 80px; height: 80px; margin: 0 auto 24px; }
body .domerino-benefits__icon:has(img[src*='/zaruka-' i]) { margin-bottom: 38px; }
body [data-feature-grid='warranties'] .zaruky-wrapper .feature-icon { margin-bottom: 38px; }
body .domerino-benefits__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
body .domerino-benefits__item h3 { font-size: var(--type-component-h3-size); line-height: var(--type-component-h3-leading); font-weight: 600; margin: 0 0 12px; }
body .domerino-benefits__body, body .domerino-benefits__body p { font-size: var(--type-component-copy-size); line-height: var(--type-component-copy-leading); }
body .domerino-benefits__body > :last-child { margin-bottom: 0; }
body .domerino-benefits .p_investice-footer { flex-direction: column; margin: 50px auto 0; gap: 24px; max-width: 900px; padding-top: 48px; text-align: center; }
body [data-feature-grid]:is([data-feature-grid='benefits'], [data-feature-grid='reasons'], [data-feature-grid='warranties']) .p_investice-footer__icon { width: 160px; height: 160px; }
body .domerino-benefits .p_investice-footer__text > :last-child { margin-bottom: 0; }
body .domerino-benefits__button { margin-top: 30px; text-align: center; }
body .domerino-warranties__button { margin-top: 30px; text-align: center; }
@media (max-width: 991.98px) {
  body .domerino-benefits .domerino-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  body .domerino-benefits[data-benefits-count='1'] .domerino-benefits__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  body .domerino-benefits { padding: 40px 0; }
  body .domerino-benefits .domerino-benefits__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; max-width: 380px; }
  body .domerino-benefits__intro { margin-bottom: 36px; }
  body .domerino-benefits .p_investice-footer { padding-top: 32px; }
}

/* Native warranty shields use the same 144px artwork height as the legacy
   Warranties renderer. A square box also preserves padded square SVG assets. */
body [data-feature-grid='benefits'] .domerino-benefits__icon:has(img[src*='/zaruka-' i]) { width: 144px; height: 144px; margin-left: auto; margin-right: auto; }
body [data-feature-grid='benefits'] .domerino-benefits__icon img[src*='/zaruka-' i] { display: block; width: auto; height: 100%; max-width: 100%; margin-inline: auto; object-fit: contain; }
body [data-feature-grid='warranties'] .feature-icon img[src*='/zaruka-' i] { display: block; width: auto; height: 144px; max-width: 144px; margin-inline: auto; object-fit: contain; }

/* A standalone warranty uses the existing block rhythm, like legacy Warranties.
   Do not add the general benefits band padding to either side of the shield. */
body .domerino-benefits[data-feature-grid='benefits'][data-benefits-count='1']:not(:has(.domerino-benefits__intro, .p_investice-footer, .domerino-benefits__button)):has(.domerino-benefits__icon img[src*='/zaruka-' i]) { padding-block: 0; }
body .domerino-benefits[data-feature-grid='benefits'][data-benefits-count='1']:not(:has(.domerino-benefits__intro, .p_investice-footer, .domerino-benefits__button)):has(.domerino-benefits__icon img[src*='/zaruka-' i]) .domerino-benefits__item > :last-child { margin-bottom: 0; }
body .domerino-benefits[data-feature-grid='benefits'][data-benefits-count='1']:not(:has(.domerino-benefits__intro, .p_investice-footer, .domerino-benefits__button)):has(.domerino-benefits__icon img[src*='/zaruka-' i]) + .domerino-benefits { padding-top: 0; }