/* Excel Mix redesign — page layouts and the interaction layer. Builds on xm-tokens.css + the system's components/bundle.css. */

.xm-page { --gutter: var(--space-8); font-family: var(--font-sans); font-size: 18px; line-height: 28px; color: var(--ink); background: var(--surface); min-width: 0; overflow-x: clip; } /* clip, not hidden: hidden turns the page into a scroll box and breaks every position: sticky inside it */
.xm-page *, .xm-page *::before, .xm-page *::after { box-sizing: border-box; }
.xm-page img { display: block; max-width: 100%; }
:where(.xm-page) a { color: inherit; }
.wrap { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); font-weight: 500; }
.display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; }
.section { padding: var(--space-24) 0; }

/* ---------- Buttons: wipe fill on hover (on top of bundle.css) ---------- */
.xm-btn { position: relative; overflow: hidden; isolation: isolate; }
.xm-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.xm-btn:hover::before { transform: scaleX(1); }
.xm-btn--primary:hover { background: var(--brand); color: var(--surface); }
.xm-btn--secondary:hover { background: var(--surface-raised); color: var(--surface); }
.xm-btn--link::before { display: none; }
.xm-btn--link { overflow: visible; padding-right: 8px; }
.xm-btn--link:hover { color: var(--ink); }
.xm-btn--link .xm-btn__arrow { transition: transform .25s var(--ease-out); }
.xm-btn--link:hover .xm-btn__arrow { transform: translateX(6px); }
.xm-btn--ink { background: var(--ink); color: var(--surface); }
.xm-btn--ink::before { background: var(--surface-raised); }
.xm-btn--ink:hover { color: var(--ink); }
.xm-btn--onbrand { background: transparent; color: var(--ink); border-color: var(--ink); }
.xm-btn--onbrand:hover { color: var(--surface); }
.xm-btn--white { background: var(--surface-raised); color: var(--ink); }
.xm-btn--white:hover { color: var(--surface); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); cursor: pointer; border-radius: var(--radius-sm); transition: background-color .2s, color .2s; padding: 0; }
.icon-btn:hover { background: var(--ink); color: var(--surface); }
.icon-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.icon-btn[disabled] { opacity: .35; cursor: default; background: var(--surface-raised); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn--onsteel { border-color: var(--ink-on-steel); background: transparent; color: var(--ink-on-steel); }
.icon-btn--onsteel:hover { background: var(--ink-on-steel); color: var(--ink); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--surface-steel); color: var(--ink-on-steel-muted); font-size: 15px; line-height: 20px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 40px; flex-wrap: wrap; }
.topbar__group { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.topbar a { color: var(--ink-on-steel); text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: .06em; }

.header { position: relative; z-index: 30; background: var(--surface-raised); }
.header__row { display: flex; align-items: center; gap: var(--space-8); min-height: 92px; }
.header__logo { flex: none; display: block; }
/* original roundel logo (262 x 50 PNG) at 236px leaves ~14px slack for the six nav items + search + Poptávka in one row (measured) */
.header__logo img { width: 236px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; flex-wrap: wrap; }
.nav__item { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 var(--space-3); background: none; border: 0; cursor: pointer; font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); text-decoration: none; position: relative; }
.nav__item::after { content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.nav__item:hover::after, .nav__item.is-active::after { transform: scaleX(1); }
.nav__item svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.nav__item.is-open svg { transform: rotate(180deg); }
.nav__item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.header__tools { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.search-slot { position: relative; width: 52px; height: 52px; flex: none; }
.search { position: absolute; right: 0; top: 0; z-index: 5; display: flex; align-items: center; height: 52px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); overflow: hidden; width: 52px; transition: width .4s var(--ease-out), box-shadow .3s; }
.search:hover, .search:focus-within { width: 340px; box-shadow: var(--shadow-pop); }
.search__icon { flex: none; width: 48px; display: inline-flex; justify-content: center; color: var(--ink); }
.search__icon svg { width: 22px; height: 22px; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; color: var(--ink); background: transparent; padding-right: var(--space-3); }
.search input::placeholder { color: var(--ink-muted); }

/* Colour stripe under the header (homepage): decoration only */
.stripe { display: flex; height: 8px; }
.stripe span { flex: 1; background: var(--xm-cat); }

/* Category tabs (category + product pages): all lines, the current one taller so it runs into the banner */
.cattabs { display: flex; align-items: flex-end; gap: 4px; height: 76px; padding-top: 12px; background: var(--surface-raised); }
.cattab { flex: 1; min-width: 0; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 var(--space-4); background: var(--xm-cat); color: var(--xm-on-cat); text-decoration: none; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cattab.is-current { height: 64px; font-size: 15px; }
.cattab:hover { text-decoration: underline; text-underline-offset: 4px; }
.cattab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.cattab:hover { color: var(--xm-on-cat); }
.cattab:visited { color: var(--xm-on-cat); }
.cattab span { overflow: hidden; text-overflow: ellipsis; }

/* Mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-raised); box-shadow: var(--shadow-pop); border-top: 3px solid var(--ink); max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-out); z-index: 40; }
.mega.is-open { max-height: 640px; }
.mega__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-8) 0 var(--space-8); }
.mega__col { display: flex; flex-direction: column; gap: var(--space-3); opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--ease-out); }
.mega.is-open .mega__col { opacity: 1; transform: none; }
.mega.is-open .mega__col:nth-child(2) { transition-delay: .04s; } .mega.is-open .mega__col:nth-child(3) { transition-delay: .08s; } .mega.is-open .mega__col:nth-child(4) { transition-delay: .12s; } .mega.is-open .mega__col:nth-child(5) { transition-delay: .16s; } .mega.is-open .mega__col:nth-child(6) { transition-delay: .2s; } .mega.is-open .mega__col:nth-child(7) { transition-delay: .24s; }
.mega__head { display: block; padding: var(--space-3); min-height: 104px; background: var(--xm-cat); color: var(--xm-on-cat); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 23px; text-transform: uppercase; }
.mega__head small { display: block; margin-top: var(--space-2); font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 18px; text-transform: none; }
.mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 22px; }
.mega__list a { text-decoration: none; }
.mega__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega__all { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }

/* ---------- Home hero: brand block + horizontal product slider ---------- */
.hero { display: grid; grid-template-columns: minmax(0, max(41.667%, calc((100% - var(--container-max)) / 2 + 540px))) minmax(0, 1fr); min-height: 640px; background: var(--surface); } /* brand column = left page margin + 540px of the content grid, so its text never runs under the slider on wide screens; identical to 5fr up to 1440px */
.hero__brand { background: var(--brand); color: var(--on-brand); padding: var(--space-16) var(--space-12) var(--space-12) max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter))); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-8); position: relative; overflow: hidden; }
.hero__brand::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; background-image: linear-gradient(var(--ink) 0 0), linear-gradient(var(--ink) 0 0); background-size: 40px 6px, 6px 40px; background-position: center; background-repeat: no-repeat; opacity: .12; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero__eyebrow::before { content: ""; width: 32px; height: 4px; background: var(--ink); }
.hero__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 112px; line-height: .9; letter-spacing: -.01em; }
.hero__lead { margin: var(--space-6) 0 0; font-size: 22px; line-height: 32px; max-width: 30ch; }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.slider { position: relative; overflow: hidden; display: flex; flex-direction: column; }
.slider__track { display: flex; flex: 1; transition: transform .6s var(--ease-out); }
.slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); padding: var(--space-12) max(var(--space-12), calc((100vw - var(--container-max)) / 2 - 12px)) var(--space-24) var(--space-12); background: var(--xm-cat-tint); position: relative; overflow: hidden; }
.slide::before { content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 62%; background: var(--xm-cat); }
.slide__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; opacity: 0; transition: opacity .5s .2s; }
.slide.is-active .slide__text { opacity: 1; }
.slide__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: .95; text-transform: uppercase; }
.slide__desc { margin: 0; font-size: 20px; line-height: 30px; color: var(--ink); max-width: 30ch; }
.slide__img { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; height: 470px; }
.slide__img img { max-height: 100%; width: auto; filter: drop-shadow(0 20px 20px rgba(29, 29, 27, .22)); transform: translateY(16px); opacity: 0; transition: transform .7s .15s var(--ease-out), opacity .5s .15s; }
.slide.is-active .slide__img img { transform: none; opacity: 1; }
.slider__ui { position: absolute; left: var(--space-12); right: max(var(--space-12), calc((100vw - var(--container-max)) / 2 - 12px)); bottom: var(--space-8); z-index: 3; display: flex; align-items: center; gap: var(--space-6); }
.slider__count { font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.slider__bars { display: flex; gap: var(--space-2); flex: 1; }
.slider__bar { flex: 1; height: 4px; background: rgba(29, 29, 27, .18); border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden; }
.slider__bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.slider__bar.is-done::after { transform: scaleX(1); }
.slider__bar.is-active::after { animation: xm-progress 7s linear forwards; }
@keyframes xm-progress { to { transform: scaleX(1); } }
.slider__bar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.slider__arrows { display: flex; gap: var(--space-2); }

/* ---------- Perks strip ---------- */
.perks { background: var(--surface-steel); color: var(--ink-on-steel); }
.perks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.perk { padding: var(--space-8) var(--space-6); border-left: 1px solid #3a3936; display: flex; flex-direction: column; gap: var(--space-2); transition: background-color .3s; }
/* every perk keeps its padding (hover fill never touches the text); the grid gives back the
   difference so the first text still lines up with the page gutter: 32 − 24 = 8px */
.perks__grid.wrap { padding-left: calc(var(--space-8) - var(--space-6)); padding-right: calc(var(--space-8) - var(--space-6)); }
.perk:first-child { border-left: 0; }
.perk:hover { background: #262624; }
.perk__k { font-family: var(--font-display); font-size: 30px; line-height: 32px; font-weight: 700; text-transform: uppercase; color: var(--ink-on-steel); }
.perk__k em { font-style: normal; color: var(--brand); }
.perk__v { font-size: 16px; line-height: 24px; color: var(--ink-on-steel-muted); }

/* ---------- Section heads ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; border-top: 3px solid var(--rule-strong); padding-top: var(--space-6); margin-bottom: var(--space-12); }
.head__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: .95; text-transform: uppercase; }
.head__lead { margin: var(--space-4) 0 0; max-width: 58ch; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.head__side { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.head--steel { border-top-color: var(--ink-on-steel); }
.head--steel .head__title { color: var(--ink-on-steel); }
.head--steel .head__lead { color: var(--ink-on-steel-muted); }
.eyebrow-steel { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.eyebrow-steel::before { content: ""; width: 32px; height: 4px; background: var(--brand); }

/* ---------- Product lines: horizontal accordion ---------- */
.lines { display: flex; gap: var(--space-2); height: 600px; }
.line { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--xm-cat); color: var(--xm-on-cat); text-decoration: none; cursor: pointer; transition: flex-grow .7s var(--ease-out); display: block; }
.line.is-active { flex-grow: 6; }
.line:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.line__index { position: absolute; left: var(--space-6); top: var(--space-6); font-family: var(--font-mono); font-size: 16px; font-weight: 500; }
.line__vtitle { position: absolute; left: 50%; bottom: var(--space-8); writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 32px; white-space: nowrap; transition: opacity .3s; }
.line.is-active .line__vtitle { opacity: 0; }
.line__open { position: absolute; inset: 0; padding: var(--space-12) var(--space-12) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-8); opacity: 0; pointer-events: none; transition: opacity .3s; min-width: 760px; }
.line.is-active .line__open { opacity: 1; pointer-events: auto; transition: opacity .4s .3s; }
.line__copy { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-8); }
.line__title { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 52px; line-height: .95; }
.line__desc { margin: var(--space-4) 0 0; font-size: 19px; line-height: 29px; max-width: 34ch; }
.line__names { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.line__names li { font-family: var(--font-mono); font-size: 14px; line-height: 20px; padding: 2px 8px; border: 1px solid currentColor; }
.line__foot { display: flex; align-items: center; gap: var(--space-4); }
.line__count { font-family: var(--font-mono); font-size: 16px; }
.line__go { display: inline-flex; align-items: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-6); background: var(--surface-raised); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; letter-spacing: .04em; }
/* Arrow: our own SVG (24 × 24, 2.25 stroke, mitred tip) – optically centred, unlike the text glyph */
.arr, .xm-btn__arrow { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: butt; stroke-linejoin: miter; transition: transform .25s var(--ease-out); }
.line__go:hover .arr { transform: translateX(6px); }
.line__packs { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.line__packs img { width: 34%; height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .25)); opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .5s var(--ease-out); margin: 0 -4%; }
.line__packs img:nth-child(2) { width: 40%; z-index: 2; }
.line.is-active .line__packs img { opacity: 1; transform: none; transition-delay: .35s; }

/* ---------- Product rail + cards with reveal ---------- */
.pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill { height: 44px; padding: 0 var(--space-4); border: 2px solid var(--ink); background: var(--surface-raised); color: var(--ink); border-radius: 999px; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: background-color .2s, color .2s; }
.pill:hover { background: var(--surface-sunken); }
.pill.is-on { background: var(--ink); color: var(--surface); }
.pill:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* count badge: digits measured to sit centred (±0.5px) in the 22px badge */
.pill small { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: .5px 7px 0; border-radius: 999px; background: rgba(29, 29, 27, .08); font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; }
.pill.is-on small { background: rgba(244, 243, 240, .2); }
.rail-view { overflow: hidden; margin-right: calc(-1 * max(var(--gutter), (100vw - var(--container-max)) / 2 + var(--gutter))); }
.rail-track { display: flex; gap: var(--space-6); transition: transform .7s var(--ease-out); }
.rail-track > * { flex: 0 0 312px; }

.card { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; border-top: 8px solid var(--xm-cat); overflow: hidden; }
.card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.card__media { position: relative; height: 340px; background: var(--xm-cat-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card__media img { height: 82%; width: auto; max-width: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s var(--ease-out); }
.card__chip { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 2; }
.card__cls { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 2; font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 20px; padding: 4px 8px; background: var(--surface-raised); color: var(--ink); }
.card__reveal { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--space-3) var(--space-6); background: rgba(255, 255, 255, .94); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--ease-out); }
.card:hover .card__reveal, .card:focus-visible .card__reveal { opacity: 1; transform: none; }
.card__reveal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 21px; }
.card__reveal li { display: flex; gap: var(--space-2); }
.card__reveal li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; background: var(--xm-cat); }
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); flex: 1; }
.card__name { margin: 0; font-size: 22px; line-height: 26px; font-weight: 700; }
.card__desc { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.card__price { font-family: var(--font-mono); font-size: 15px; line-height: 20px; }
.card__price b { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card:hover .card__more .arr { transform: translateX(6px); }

/* ---------- Systems (steel band, tabs + wide diagram) ---------- */
.systems { background: var(--surface-steel); color: var(--ink-on-steel); }
.tabs { display: flex; gap: 0; border-bottom: 2px solid #3a3936; margin-bottom: var(--space-8); flex-wrap: wrap; }
.tab { position: relative; height: 60px; padding: 0 var(--space-6); background: none; border: 0; color: var(--ink-on-steel-muted); font-family: var(--font-display); font-weight: 700; font-size: 24px; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 4px; background: var(--brand); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.tab:hover { color: var(--ink-on-steel); }
.tab.is-on { color: var(--ink-on-steel); }
.tab.is-on::after { transform: scaleX(1); }
.tab:focus-visible { outline: 2px solid var(--ink-on-steel); outline-offset: -2px; }
.tabs--light { border-bottom-color: var(--rule); }
.tabs--light .tab { color: var(--ink-muted); }
.tabs--light .tab:hover, .tabs--light .tab.is-on { color: var(--ink); }
.tabs--light .tab:focus-visible { outline-color: var(--focus-ring); }
.sys { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
.sys__copy { display: flex; flex-direction: column; gap: var(--space-4); }
.sys__title { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 42px; line-height: 46px; }
.sys__text { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-on-steel-muted); }
.sys__figure { margin: 0; background: var(--surface-raised); overflow: hidden; height: 420px; display: flex; align-items: center; justify-content: center; }
.sys__figure img { width: 100%; height: 100%; object-fit: cover; animation: xm-fade .7s var(--ease-out); }
@keyframes xm-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.sys__products { padding-top: var(--space-6); }
.mini { display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; border-top: 6px solid var(--xm-cat); animation: xm-rise .5s var(--ease-out) both; }
.mini:nth-child(2) { animation-delay: .05s; } .mini:nth-child(3) { animation-delay: .1s; } .mini:nth-child(4) { animation-delay: .15s; } .mini:nth-child(5) { animation-delay: .2s; } .mini:nth-child(6) { animation-delay: .25s; } .mini:nth-child(7) { animation-delay: .3s; } .mini:nth-child(8) { animation-delay: .35s; }
@keyframes xm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.mini__img { height: 150px; background: var(--xm-cat-tint); display: flex; align-items: center; justify-content: center; }
.mini__img img { height: 82%; width: auto; max-width: 80%; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s var(--ease-out); }
.mini:hover .mini__img img { transform: translateY(-8px); }

/* ---------- Rail controls (shared: scenarios, system products, system cards, steps) ---------- */
/* .rr--N sets cards per view; the track's transform is computed in logic with the same N and gap. */
.rr { --rr-per: 3; --rr-gap: 16px; }
.rr--4 { --rr-per: 4; }
.rr--5 { --rr-per: 5; --rr-gap: 12px; }
.rr--6 { --rr-per: 6; --rr-gap: 12px; }
.rr__view { overflow: hidden; }
.rr__track { display: flex; gap: var(--rr-gap); transition: transform .6s var(--ease-out); }
.rr__track > * { flex: 0 0 calc((100% - (var(--rr-per) - 1) * var(--rr-gap)) / var(--rr-per)); min-width: 0; }
.rr__ui { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.rr__bar { position: relative; flex: 1; height: 4px; margin: 0 var(--space-4); background: var(--rule); }
.rr__thumb { position: absolute; top: -2px; height: 8px; background: var(--ink); transition: left .6s var(--ease-out), width .3s var(--ease-out); }
.rr__count { min-width: 72px; font-family: var(--font-mono); font-size: 16px; line-height: 20px; text-align: right; }
.rr--steel .rr__bar { background: #4a4945; }
.rr--steel .rr__thumb { background: var(--ink-on-steel); }
.mini__name { padding: var(--space-3); font-size: 16px; line-height: 21px; font-weight: 700; }
.mini__line { display: block; margin-top: 4px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--xm-cat-text); }
.mini:focus-visible { outline: 3px solid var(--ink-on-steel); outline-offset: 3px; }

/* ---------- Info cards (news / advice / sales support) ---------- */
.info { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--space-6); }
.icard { display: flex; flex-direction: column; background: var(--surface-raised); text-decoration: none; color: var(--ink); overflow: hidden; }
.icard--wide { flex-direction: row; }
.icard__img { overflow: hidden; height: 240px; flex: none; }
.icard--wide .icard__img { width: 52%; height: auto; min-height: 420px; }
.icard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.icard:hover .icard__img img { transform: scale(1.06); }
.icard__img--pack { position: relative; display: flex; align-items: center; justify-content: center; background: var(--xm-cat-tint); }
.icard__img--pack::before { content: ""; position: absolute; left: -8%; bottom: -30%; width: 64%; aspect-ratio: 1; background: var(--xm-cat); }
.icard .icard__img--pack img { position: relative; width: auto; height: 80%; max-width: 80%; object-fit: contain; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .22)); }
.icard:hover .icard__img--pack img { transform: scale(1.04); }
.icard__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.icard__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; }
.icard__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.icard__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; border-bottom: 3px solid var(--brand); padding-bottom: 2px; }
.icard:hover .icard__more .arr { transform: translateX(6px); }
.icard:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- Enquiry band ---------- */
.enquiry { background: var(--brand); color: var(--on-brand); }
.enquiry__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
.enquiry__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 84px; line-height: .9; text-transform: uppercase; }
.enquiry__lead { margin: var(--space-6) 0 0; font-size: 22px; line-height: 32px; max-width: 30ch; }
.enquiry__contact { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-2); font-size: 20px; line-height: 28px; font-weight: 700; }
.enquiry__contact a { text-decoration: none; }
.enquiry__contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.form .full { grid-column: 1 / -1; }
.form .xm-input { border-color: var(--ink); }
.form textarea.xm-input { min-height: 120px; resize: vertical; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; line-height: 22px; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex: none; }
.form__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--surface-steel); color: var(--ink-on-steel-muted); font-size: 16px; line-height: 26px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--space-8); padding: var(--space-16) 0 var(--space-12); }
.footer h3 { margin: 0 0 var(--space-4); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-on-steel); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer a { color: var(--ink-on-steel); text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__claim { margin: var(--space-6) 0 0; font-family: var(--font-display); font-size: 30px; line-height: 32px; font-weight: 700; text-transform: uppercase; color: var(--ink-on-steel); }
.footer__line { display: flex; align-items: center; gap: var(--space-3); }
.footer__line i { width: 14px; height: 14px; flex: none; background: var(--xm-cat); }
.footer__bottom { border-top: 1px solid #3a3936; padding: var(--space-6) 0; display: flex; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; font-size: 15px; }
.footer__bars { display: flex; height: 6px; }
.footer__bars span { flex: 1; background: var(--xm-cat); }

/* ---------- Category page ---------- */
.crumbs { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.cat-hero { background: var(--xm-cat); color: var(--xm-on-cat); overflow: hidden; }
.cat-hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-8); align-items: end; min-height: 520px; padding-top: var(--space-12); }
.cat-hero__copy { padding-bottom: var(--space-16); }
.cat-hero__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 92px; line-height: .9; text-transform: uppercase; }
.cat-hero__lead { margin: var(--space-6) 0 0; font-size: 21px; line-height: 31px; max-width: 46ch; }
/* 66px numbers + 32px gap fit one row in the 8/12 copy column for all seven lines (widest 805 of 816px, measured) */
.cat-hero__meta { margin-top: 40px; display: flex; gap: var(--space-8); flex-wrap: wrap; }
.cat-hero__meta div { display: flex; flex-direction: column; gap: 6px; padding-left: var(--space-4); border-left: 3px solid currentColor; }
/* class selectors on purpose: the runtime wraps every {{hole}} in a <span>, so a bare `span` rule would
   also shrink the number inside <b> (that is what kept the numbers at body size) */
.cat-hero__meta .meta__k { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 36px; white-space: nowrap; }
.cat-hero__meta .meta__v { font-size: 16px; line-height: 22px; font-weight: 500; }
.fan { position: relative; height: 480px; }
.fan img { position: absolute; bottom: -30px; height: 330px; width: auto; filter: drop-shadow(0 24px 24px rgba(0, 0, 0, .3)); transition: transform .7s var(--ease-spring); }
.fan img:nth-child(1) { left: 0; transform: rotate(-9deg); }
.fan img:nth-child(2) { left: 17%; height: 380px; z-index: 2; }
.fan img:nth-child(3) { right: 0; transform: rotate(9deg); }
.fan:hover img:nth-child(1) { transform: translateX(-24px) rotate(-14deg); }
.fan:hover img:nth-child(2) { transform: translateY(-24px); }
.fan:hover img:nth-child(3) { transform: translateX(24px) rotate(14deg); }

.filterbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--rule); }
.filterbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 88px; flex-wrap: wrap; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.filterbar__label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.select { height: 44px; padding: 0 40px 0 var(--space-4); border: 2px solid var(--ink); border-radius: var(--radius-sm); font: inherit; font-size: 16px; background: var(--surface-raised); color: var(--ink); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.grid4 .card { animation: xm-rise .45s var(--ease-out) both; }

.classes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
.classes__text p { margin: 0 0 var(--space-4); font-size: 18px; line-height: 28px; }
.classes__view { overflow: hidden; }
.classes__track { display: flex; gap: var(--space-4); transition: transform .6s var(--ease-out); }
.cls { flex: 0 0 280px; min-height: 360px; padding: var(--space-6); background: var(--surface-raised); border-top: 8px solid var(--cat-adhesives); display: flex; flex-direction: column; gap: var(--space-3); transition: background-color .35s, color .35s; }
.cls:hover { background: var(--cat-adhesives); color: var(--on-cat-adhesives); }
.cls__code { font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: .85; color: var(--cat-adhesives-text); transition: color .35s, transform .5s var(--ease-spring); }
.cls:hover .cls__code { color: var(--on-cat-adhesives); transform: translateY(-8px); }
.cls__name { font-size: 20px; line-height: 26px; font-weight: 700; }
.cls__text { margin: 0; font-size: 16px; line-height: 24px; }
.classes__ui { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.classes__note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

.others { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.other { position: relative; height: 200px; padding: var(--space-4); background: var(--xm-cat); color: var(--xm-on-cat); text-decoration: none; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.other__name { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 26px; text-transform: uppercase; position: relative; z-index: 1; }
.other__count { font-family: var(--font-mono); font-size: 14px; position: relative; z-index: 1; }
.other img { position: absolute; right: -10px; bottom: -40px; height: 170px; width: auto; transform: translateY(40px) rotate(8deg); opacity: 0; transition: transform .6s var(--ease-spring), opacity .3s; }
.other:hover img { transform: rotate(8deg); opacity: 1; }
.other:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- Thickness guide (levelling) ---------- */
.guide { background: var(--surface-raised); }
.guide__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: end; margin-bottom: var(--space-8); }
.guide__pick { display: flex; flex-direction: column; gap: var(--space-4); }
.guide__value { font-family: var(--font-display); font-weight: 700; font-size: 120px; line-height: .85; }
.guide__value small { font-size: 40px; }
.guide__range { width: 100%; height: 32px; accent-color: var(--ink); cursor: pointer; }
.guide__scale-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.gchart { border-top: 3px solid var(--rule-strong); }
.grow { display: grid; grid-template-columns: 250px minmax(0, 1fr) 128px; gap: var(--space-4); align-items: center; min-height: 52px; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: opacity .3s, background-color .2s; }
.grow:hover { background: var(--surface); }
.grow.is-off { opacity: .38; }
.grow__name { font-weight: 700; font-size: 17px; line-height: 22px; padding-left: var(--space-2); }
.grow__name small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.grow__track { position: relative; height: 52px; background-image: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 10%); }
.grow__ext { position: absolute; top: 18px; height: 16px; background: var(--xm-cat-tint); box-shadow: inset 0 0 0 2px var(--xm-cat); }
.grow__bar { position: absolute; top: 14px; height: 24px; background: var(--xm-cat); }
.grow__mark { position: absolute; top: 0; bottom: -1px; width: 3px; margin-left: -1px; background: var(--ink); transition: left .15s linear; }
.grow__fit { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--status-success); display: flex; align-items: center; gap: 6px; }
.grow__fit::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.grow__fit.is-no { color: var(--ink-muted); }
.grow__fit.is-no::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.gchart__legend { display: flex; gap: var(--space-6); margin-top: var(--space-4); font-size: 15px; line-height: 20px; color: var(--ink-muted); flex-wrap: wrap; }
.gchart__legend i { display: inline-block; width: 28px; height: 14px; margin-right: 8px; vertical-align: -2px; background: var(--xm-cat); }
.gchart__legend i.ext { background: var(--xm-cat-tint); box-shadow: inset 0 0 0 2px var(--xm-cat); }

/* ---------- Unified category guide ---------- */
.gfactors { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.gfactors li { list-style: none; padding: 6px 12px; background: var(--surface); border-left: 4px solid var(--xm-cat); font-size: 16px; line-height: 22px; }
.gfactors { padding: 0; margin-bottom: 0; }
.gblock { margin-top: var(--space-16); }
.gblock__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.gblock__num { font-family: var(--font-mono); font-weight: 500; font-size: 16px; color: var(--xm-cat-text); }
.gblock__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 36px; text-transform: uppercase; }
.gblock__lead { margin: calc(-1 * var(--space-2)) 0 var(--space-6); max-width: 64ch; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.gtool { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
.gtool__side { display: flex; flex-direction: column; gap: var(--space-4); }
.gtool__readout { display: flex; align-items: center; gap: 20px; }
.gtool__value { font-family: var(--font-display); font-weight: 700; font-size: 104px; line-height: .85; }
/* +/− stepper: two stacked buttons, together a little shorter than the value */
/* bare + and − : no frame, no fill, just the glyph (48px hit area each).
   translateY centres the pair optically on the digits: Barlow's figures sit low in a .85 line box,
   so the + top and the − stroke end up equally far (≈8px) inside the digit height. Measured in Chromium. */
.stepper { display: flex; flex-direction: column; gap: 0; flex: none; transform: translateY(10px); }
.stepper__btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.stepper__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.stepper__btn[disabled] { opacity: .3; cursor: default; }
.stepper__btn svg { width: 40px; height: 40px; }
.gtool__value small { font-size: 36px; }
.gtool__range { width: 100%; height: 32px; accent-color: var(--ink); cursor: pointer; }

/* scenarios: horizontal row */
.scen__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface); border-top: 6px solid var(--xm-cat); min-height: 260px; }
.scen__title { margin: 0; font-size: 21px; line-height: 26px; font-weight: 700; }
.scen__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.scen__items { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.scen__item { display: flex; align-items: center; gap: var(--space-3); padding: 6px; background: var(--surface-raised); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 20px; }
.scen__item img { width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply; background: var(--xm-cat-tint); flex: none; }
.scen__item .arr { margin-left: auto; margin-right: 8px; }
.scen__item:hover .arr { transform: translateX(4px); }

/* mistakes: numbered row */
.mistakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.mistakes li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface); }
.mistakes b { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 40px; color: var(--status-danger); }
.mistakes li > span { font-size: 17px; line-height: 25px; }

/* matcher (ETICS) */
.match { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.match__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border-top: 6px solid var(--xm-cat); transition: opacity .3s; text-decoration: none; color: var(--ink); }
.match__card.is-off { opacity: .38; }
.match__card img { height: 150px; width: auto; align-self: center; object-fit: contain; mix-blend-mode: multiply; }
.match__name { font-weight: 700; font-size: 18px; line-height: 24px; }
.match__note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* FAQ (special) */
.faq { border-top: 3px solid var(--rule-strong); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-4) 0; background: none; border: 0; border-bottom: 1px solid var(--rule); font: inherit; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.faq__q svg { width: 22px; height: 22px; flex: none; transition: transform .3s var(--ease-out); }
.faq__q.is-open svg { transform: rotate(45deg); }
.faq__q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.faq__a { margin: 0; padding: var(--space-4) 0 var(--space-6); max-width: 72ch; font-size: 18px; line-height: 28px; color: var(--ink); border-bottom: 1px solid var(--rule); animation: xm-fade .4s var(--ease-out); }

/* steps (gypsum) */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6) var(--space-4) var(--space-4); background: var(--surface); }
.steps li::before { counter-increment: st; content: "0" counter(st); font-family: var(--font-mono); font-size: 15px; color: var(--xm-cat-text); }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--xm-cat); }
.steps img { height: 120px; width: auto; align-self: center; object-fit: contain; mix-blend-mode: multiply; }
.steps b { font-size: 18px; line-height: 24px; }
.steps li > span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* ---------- Dropdown ---------- */
.dd { position: relative; }
.dd__btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 var(--space-4); border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 700; cursor: pointer; }
/* label + value share one baseline (measured: separate flex items left the label 2.5px high) */
.dd__txt { display: inline-flex; align-items: baseline; gap: 8px; line-height: 1; position: relative; top: -1px; }
.dd__btn small { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.dd__btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.dd__btn.is-open svg { transform: rotate(180deg); }
.dd__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.dd__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 100%; width: max-content; margin: 0; padding: 6px 0; list-style: none; background: var(--surface-raised); border: 2px solid var(--ink); box-shadow: var(--shadow-pop); animation: xm-dd .2s var(--ease-out); }
@keyframes xm-dd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd__opt { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); padding: 12px var(--space-4); background: none; border: 0; font: inherit; font-size: 17px; line-height: 22px; color: var(--ink); text-align: left; cursor: pointer; }
.dd__opt:hover { background: var(--surface); }
.dd__opt.is-on { font-weight: 700; }
.dd__opt svg { width: 18px; height: 18px; }
.dd__opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.cat-hero__guide { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: 40px; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 3px solid currentColor; padding-bottom: 2px; }
.cat-hero__guide:hover .arr { transform: translateY(4px); }
.gchart__legend i.mark { width: 3px; background: var(--ink); }

/* ---------- Product page ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-12); padding: var(--space-8) 0 var(--space-16); }
.gallery { position: relative; background: var(--xm-cat-tint); height: 720px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery::before { content: ""; position: absolute; left: -10%; bottom: -30%; width: 80%; aspect-ratio: 1; background: var(--xm-cat); }
.gallery img { position: relative; height: 82%; width: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .25)); }
.gallery__cls { position: absolute; left: var(--space-6); top: var(--space-6); z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: .9; color: var(--xm-cat-text); }
.gallery__cls small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ink); margin-top: var(--space-2); }
.gallery__zoom { position: absolute; right: var(--space-4); bottom: var(--space-4); }
.thumb { width: 112px; height: 112px; padding: 0; border: 3px solid transparent; background: var(--xm-cat-tint); cursor: pointer; overflow: hidden; transition: border-color .2s, transform .3s var(--ease-out); }
.thumb:hover { transform: translateY(-3px); }
.thumb.is-on { border-color: var(--ink); }
.thumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pdp__media { position: sticky; top: var(--space-6); align-self: start; }
.pdp__info { display: flex; flex-direction: column; gap: var(--space-6); }
.pdp__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: .88; text-transform: uppercase; }
.pdp__title small { display: block; font-size: 32px; line-height: 36px; color: var(--ink-muted); }
.pdp__lead { margin: 0; font-size: 22px; line-height: 32px; }
.keyfacts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-2); }
.keyfact { background: var(--surface-raised); padding: var(--space-4); border-top: 4px solid var(--xm-cat); display: flex; flex-direction: column; gap: 2px; transition: background-color .25s, color .25s; }
.keyfact:hover { background: var(--xm-cat); color: var(--xm-on-cat); }
.keyfact b { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 700; }
.keyfact > span { font-size: 15px; line-height: 20px; }
.variant { width: 100%; border-collapse: collapse; background: var(--surface-raised); font-size: 15px; line-height: 20px; }
.variant th { text-align: left; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 1px solid var(--rule); }
.variant td { padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-weight: 500; }
.variant td.price { font-family: var(--font-display); font-size: 28px; font-weight: 700; }
.pdp__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.docs { display: flex; flex-direction: column; border-top: 3px solid var(--rule-strong); }
.doc { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 18px; transition: padding-left .3s var(--ease-out), color .2s; }
.doc:hover { padding-left: var(--space-3); }
.doc svg { width: 26px; height: 26px; flex: none; }
.doc > span:last-child { margin-left: auto; font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink-muted); }
.panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); animation: xm-fade .5s var(--ease-out); }
.panel p { margin: 0 0 var(--space-4); font-size: 19px; line-height: 30px; }
.uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.uses li { background: var(--surface-raised); padding: var(--space-4); font-size: 17px; line-height: 25px; border-left: 0; position: relative; padding-top: var(--space-6); }
.uses li::before { content: ""; position: absolute; left: var(--space-4); top: 0; width: 32px; height: 4px; background: var(--xm-cat); }
.adv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adv li { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 26px; }
.adv li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--xm-cat); transform: translateY(1px); }
.combo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }

/* product detail – variant blocks (pictograms, shades, textures, video, calculator) */
.thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.thumb--video { background: var(--ink); }
.thumb__play { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; color: #fff; font-family: var(--font-mono); font-size: 13px; }
.thumb__play svg { width: 34px; height: 34px; fill: var(--xm-cat); }
.gallery__badges { position: absolute; right: var(--space-6); top: var(--space-6); z-index: 2; display: flex; gap: var(--space-2); }
.gallery .gallery__badges img { height: 84px; width: 84px; filter: none; }
.gvideo { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; text-decoration: none; color: #fff; background: var(--ink); overflow: hidden; }
.gvideo::before { content: ""; position: absolute; right: -12%; top: -28%; width: 70%; aspect-ratio: 1; background: var(--xm-cat); opacity: .9; }
.gallery .gvideo__img { position: absolute; right: 8%; top: 10%; height: 62%; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .45)); transition: transform .5s var(--ease-out); }
.gvideo:hover .gvideo__img { transform: translateY(-6px); }
.gvideo__play { position: absolute; left: var(--space-8); top: 50%; width: 112px; height: 112px; margin-top: -96px; display: flex; align-items: center; justify-content: center; background: var(--xm-cat); transition: transform .4s var(--ease-out); }
.gvideo__play svg { width: 52px; height: 52px; fill: var(--xm-on-cat); }
.gvideo:hover .gvideo__play { transform: scale(1.06); }
.gvideo__t { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); max-width: 520px; font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 42px; text-transform: uppercase; }
.gvideo__t small { font-family: var(--font-mono); font-weight: 500; font-size: 14px; line-height: 20px; text-transform: none; color: var(--ink-on-steel-muted); }
.gvideo__go { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-family: var(--font-sans); font-size: 17px; line-height: 24px; text-transform: none; }
.gvideo__go .arr { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .3s var(--ease-out); }
.gvideo:hover .gvideo__go .arr { transform: translateX(4px); }

/* pictograms – the icons carry the "where / what for" info; meaning on hover (tooltip) or tap (caption) */
.pikto { display: flex; flex-direction: column; gap: var(--space-2); }
.pikto__h { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pikto__row { display: flex; flex-wrap: wrap; gap: 5px; }
.pik { position: relative; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: help; flex: none; }
.pik img { display: block; width: 100%; height: 100%; transition: transform .25s var(--ease-out); }
.pik:hover img { transform: translateY(-2px); }
.pik:focus-visible, .sw:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pikto__cap { display: none; margin: 0; min-height: 22px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.tip { position: absolute; z-index: 6; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 230px; padding: 8px 12px; background: var(--ink); color: #fff; font-family: var(--font-sans); font-size: 14px; line-height: 19px; font-weight: 500; text-align: left; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s; }
.tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
/* edge alignment is measured on hover/focus (data-al = l | c | r) so the bubble never leaves the screen */
[data-al="l"] > .tip { left: 0; transform: translate(0, 4px); }
[data-al="l"] > .tip::after { left: 18px; }
[data-al="r"] > .tip { left: auto; right: 0; transform: translate(0, 4px); }
[data-al="r"] > .tip::after { left: auto; right: 12px; }
.pik:hover > .tip, .pik:focus-visible > .tip, .sw:hover > .tip, .sw:focus-visible > .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
[data-al="l"]:hover > .tip, [data-al="l"]:focus-visible > .tip, [data-al="r"]:hover > .tip, [data-al="r"]:focus-visible > .tip { transform: translate(0, 0); }

/* shade picker (grouped, priced per group) */
.shades { background: var(--surface-raised); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.shades__now { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.shades__big { flex: none; width: 64px; height: 64px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.shades__now div { display: flex; flex-direction: column; gap: 2px; }
.shades__now b { font-family: var(--font-display); font-size: 30px; line-height: 32px; text-transform: uppercase; }
.shades__now .mono { font-size: 14px; color: var(--ink-muted); }
.shades__lbl { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.shgroup { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.shgroup__h { display: flex; flex-direction: column; font-weight: 700; font-size: 16px; line-height: 20px; }
.shgroup__h .mono { font-weight: 500; font-size: 14px; color: var(--ink-muted); }
.shgroup__sw { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { position: relative; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: transform .25s var(--ease-out); }
.sw:hover { transform: translateY(-2px); }
.sw.is-on { outline: 3px solid var(--ink); outline-offset: 3px; }
.vnotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.vnotes li { position: relative; padding-left: 18px; }
.vnotes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--xm-cat); }

/* texture swatches = price table (one row per shade) */
.tex { background: var(--surface-raised); }
.tex__row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }
.tex__img { display: block; height: 40px; overflow: hidden; }
.tex__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tex__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tex__name b { font-size: 18px; line-height: 22px; }
.tex__name .mono { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.tex__price { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 30px; white-space: nowrap; }
.tex__pack { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* consumption calculator link */
.pcalc { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--xm-cat-tint); color: var(--ink); text-decoration: none; border-left: 6px solid var(--xm-cat); transition: padding-left .3s var(--ease-out); }
.pcalc:hover { padding-left: var(--space-6); }
.pcalc__ic svg { display: block; width: 32px; height: 32px; }
.pcalc__t { display: flex; flex-direction: column; min-width: 0; }
.pcalc__t b { font-size: 18px; line-height: 24px; }
.pcalc__t span { font-size: 15px; line-height: 21px; color: var(--ink-muted); }
.pcalc__x { margin-left: auto; font-size: 14px; color: var(--ink-muted); }
.pdp__usage { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.techpack { display: flex; flex-direction: column; gap: var(--space-3); }
.techpack__h { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 28px; text-transform: uppercase; }
.variant--tech td.price { font-size: 22px; }
.panel--tech { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.variant--tech th, .variant--tech td.price { white-space: nowrap; }

/* =====================================================================
   Content pages – Produkty, Systémová řešení, Kontakt, O nás
   ===================================================================== */

/* ---------- Page hero (light / steel / brand) ---------- */
.phero { background: var(--surface-raised); overflow: hidden; }
.phero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; min-height: 460px; padding-top: var(--space-12); }
.phero__copy { padding-bottom: var(--space-16); }
.phero__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 92px; line-height: .9; text-transform: uppercase; }
.phero__title--m { font-size: 68px; line-height: .95; }
.phero__lead { margin: var(--space-6) 0 0; max-width: 50ch; font-size: 21px; line-height: 31px; }
.phero__media { align-self: stretch; margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--container-max)) / 2 + var(--gutter))) 0 0; overflow: hidden; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; animation: xm-fade .6s var(--ease-out); }
.phero__side { align-self: end; padding-bottom: var(--space-16); }
.phero--compact .phero__grid { min-height: 360px; }
.psearch .xm-input { flex: 1; min-width: 0; height: 64px; font-size: 20px; border-color: var(--ink); }
.psearch .xm-btn { min-height: 64px; }
.psearch .xm-field__hint a { font-weight: 700; color: var(--ink); }
.phero--steel { background: var(--surface-steel); color: var(--ink-on-steel); }
.phero--steel .phero__lead { color: var(--ink-on-steel-muted); }
.phero--steel .crumbs a { color: var(--ink-on-steel); }

/* ---------- Product-line tiles (Produkty) ---------- */
.ptiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.ptile { display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.ptile__top { display: flex; flex-direction: column; gap: var(--space-3); min-height: 260px; padding: var(--space-6); background: var(--xm-cat); color: var(--xm-on-cat); }
.ptile__idx { font-family: var(--font-mono); font-size: 15px; line-height: 20px; }
.ptile__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 34px; text-transform: uppercase; }
.ptile__desc { margin: 0; font-size: 16px; line-height: 23px; }
.ptile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: 16px; line-height: 20px; }
/* packshots sit fully inside the tinted well; hover zooms them slightly */
.ptile__well { height: 200px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: var(--space-4); background: var(--xm-cat-tint); overflow: hidden; }
.ptile__well img { flex: 0 1 auto; min-width: 0; max-width: 33%; max-height: 100%; height: 150px; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .45s var(--ease-out); }
.ptile__well--photo { padding: 0; }
.ptile__well--photo img { width: 100%; max-width: none; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.ptile:hover .ptile__well img { transform: scale(1.06); }
.ptile:hover .arr { transform: translateX(6px); }
.ptile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- Use-case cards (Produkty) ---------- */
.use { display: flex; flex-direction: column; gap: var(--space-3); min-height: 380px; padding: var(--space-6); background: var(--surface-raised); }
.use__lines { display: flex; gap: 4px; height: 8px; margin-bottom: var(--space-2); }
.use__lines span { flex: 1; background: var(--xm-cat); }
.use__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; }
.use__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.use .scen__item { background: var(--surface); }
.use__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.use__go:hover .arr { transform: translateX(6px); }

/* ---------- System switcher (Systémová řešení) ---------- */
.systabs-band { background: var(--surface-steel); }
.systabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); align-items: end; }
.systab { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 112px; padding: var(--space-4) var(--space-6); border: 0; background: #2a2927; color: var(--ink-on-steel); font: inherit; text-align: left; cursor: pointer; transition: height .35s var(--ease-out), background-color .2s; }
.systab:hover { background: #33322f; }
.systab__num { font-family: var(--font-mono); font-size: 15px; line-height: 20px; color: var(--ink-on-steel-muted); }
.systab__title { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 30px; text-transform: uppercase; }
.systab.is-on { height: 136px; background: var(--surface); color: var(--ink); }
.systab.is-on .systab__num { color: var(--brand-text); }
.systab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.sysintro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; animation: xm-fade .5s var(--ease-out); }
.sysintro__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: .95; text-transform: uppercase; }
.sysintro__text { margin: var(--space-6) 0 0; max-width: 62ch; font-size: 19px; line-height: 30px; }
.benefits { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule-strong); }
.benefits li { display: flex; align-items: baseline; gap: var(--space-4); padding: 20px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 30px; text-transform: uppercase; }
.benefits b { flex: none; font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--brand-text); }

/* Certified system card (ETICS) */
.tcard { display: flex; flex-direction: column; background: var(--surface-raised); border-top: 6px solid var(--xm-cat); }
.tcard__img { height: 260px; display: flex; align-items: center; justify-content: center; background: var(--xm-cat-tint); overflow: hidden; }
.tcard__img img { height: 88%; width: auto; mix-blend-mode: multiply; transition: transform .5s var(--ease-out); }
.tcard:hover .tcard__img img { transform: translateY(-10px); }
.tcard__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }
.tcard__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 30px; text-transform: uppercase; }
.tcard__docs { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-strong); }
.tcard__docs a { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 16px; line-height: 22px; font-weight: 600; }
.tcard__docs svg { width: 20px; height: 20px; flex: none; }
.tcard__docs .arr { margin-left: auto; }
.tcard__docs a:hover .arr { transform: translateY(3px); }

/* Product chip inside layer lists – the product's own line colour */
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.pchip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border-left: 4px solid var(--xm-cat); background: var(--xm-cat-tint); color: var(--xm-cat-text); font-size: 14px; line-height: 18px; font-weight: 700; text-decoration: none; }
.pchip:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Layer list (skladba) */
.stack { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; }
.layers { list-style: none; margin: 0; padding: 0; counter-reset: ly; border-top: 3px solid var(--rule-strong); }
.layers li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.layers li::before { counter-increment: ly; content: counter(ly, decimal-leading-zero); font-family: var(--font-mono); font-size: 16px; line-height: 26px; color: var(--brand-text); }
.layers b { display: block; font-size: 18px; line-height: 26px; }
.layers small { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.cert { margin: 0; padding: var(--space-8); background: var(--surface-raised); border-top: 6px solid var(--brand); }
.cert img { width: 70%; margin: 0 auto; }
.cert figcaption { margin-top: var(--space-6); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.cert b { display: block; margin-bottom: 4px; font-family: var(--font-display); font-size: 26px; line-height: 28px; text-transform: uppercase; color: var(--ink); }

/* Step viewer (11 kroků) */
.sv { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; }
.sv__stage { margin: 0; background: #e2e2e0; }
.sv__stage img { width: 100%; height: auto; animation: xm-fade .5s var(--ease-out); }
.sv__now { display: flex; align-items: baseline; gap: var(--space-4); margin-top: var(--space-4); min-height: 56px; }
.sv__now b { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 44px; color: var(--brand-text); }
.sv__now > div > span:not(.pchips) { font-size: 19px; line-height: 27px; font-weight: 600; }
.sv__list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule-strong); }
.sv__btn { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; text-align: left; cursor: pointer; transition: padding-left .25s var(--ease-out), box-shadow .25s; }
.sv__btn b { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink-muted); }
.sv__btn:hover { padding-left: 8px; }
.sv__btn.is-on { padding-left: 14px; box-shadow: inset 4px 0 0 var(--brand); font-weight: 700; }
.sv__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Detail drawings + legend */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.figs figure { margin: 0; background: var(--surface-raised); }
.figs figcaption { padding: var(--space-4) var(--space-6); font-size: 16px; line-height: 24px; border-top: 1px solid var(--rule); }
.figs figcaption b { font-family: var(--font-mono); font-weight: 500; margin-right: 8px; color: var(--brand-text); }
.legend { columns: 2; column-gap: var(--space-12); margin: var(--space-8) 0 0; padding: 0; list-style: none; counter-reset: lg; }
.legend li { break-inside: avoid; display: grid; grid-template-columns: 40px minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 23px; }
.legend li::before { counter-increment: lg; content: counter(lg); font-family: var(--font-mono); font-size: 14px; color: var(--ink-muted); }

/* Bathroom variants – wide figure + horizontal numbered layers */
.variant-fig { margin: var(--space-6) 0 0; background: var(--surface-raised); }
.variant-fig img { width: 100%; height: auto; animation: xm-fade .5s var(--ease-out); }
.hlayers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.hlayers li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface-raised); border-top: 4px solid var(--ink); }
.hlayers b { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 36px; }
.hlayers li > span:not(.pchips) { font-size: 16px; line-height: 23px; font-weight: 600; }
.hlayers .pchips { margin-top: auto; }

/* Process step card */
.pstep { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-4); background: var(--surface-raised); }
.pstep img { width: 100%; height: auto; }
.pstep b { padding: 0 var(--space-4); font-size: 19px; line-height: 26px; }
.pstep > span { padding: 0 var(--space-4); font-size: 16px; line-height: 24px; color: var(--ink-muted); }

/* ---------- Contact v2: info + map hero, directory, company facts ---------- */
.khero { background: var(--surface-raised); overflow: hidden; border-bottom: 1px solid var(--rule); }
.khero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: end; padding: var(--space-12) var(--space-8) var(--space-16); }
.khero__copy { padding: 0; }
.khero__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 92px; line-height: .9; text-transform: uppercase; }
.khero__lead { margin: var(--space-4) 0 0; max-width: 40ch; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.kmain { margin: var(--space-8) 0 0; padding: 0; list-style: none; border-top: 3px solid var(--rule-strong); }
.kmain__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); }
.kmain__row > svg, .kdir__link svg { width: 24px; height: 24px; margin-top: 4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.kmain__k { display: block; font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kmain__v { display: block; margin-top: 4px; font-size: 19px; line-height: 28px; }
.kmain--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); margin: 0; }
.kmain--grid .kmain__row { padding: var(--space-6) 0; }
.kmain__big { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 34px; text-decoration: none; overflow-wrap: anywhere; }
.kmain__big:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kmain__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.kmap { position: relative; height: 520px; margin: 0; overflow: hidden; background: var(--surface-sunken); border-bottom: 1px solid var(--rule); }
.kmap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kmap__pin { position: absolute; left: 50%; top: 50%; width: 44px; height: 56px; transform: translate(-50%, -100%); filter: drop-shadow(0 6px 6px rgba(29, 29, 27, .35)); }
.kmap__pin path { fill: var(--brand); stroke: var(--surface-steel); stroke-width: 2.5; }
.kmap__pin circle { fill: var(--surface-steel); }
.kmap__label { position: absolute; left: calc(50% + 30px); top: calc(50% - 92px); padding: 10px 14px; background: var(--surface-steel); color: var(--ink-on-steel); font-size: 15px; line-height: 20px; white-space: nowrap; }
.kmap__label b { display: block; font-family: var(--font-display); font-size: 21px; line-height: 24px; text-transform: uppercase; }
.kmap__open { position: absolute; left: max(var(--gutter), (100% - var(--container-max)) / 2 + var(--gutter)); bottom: var(--space-8); }
.kmap__attr { position: absolute; right: 0; bottom: 0; padding: 2px 8px; background: rgba(244, 243, 240, .9); font-size: 12px; line-height: 18px; color: var(--ink-muted); }

.kdir { border-top: 3px solid var(--rule-strong); }
.kdir__row { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 3fr) minmax(0, 2.6fr) minmax(0, 3.2fr); gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-4); border-bottom: 1px solid var(--rule); transition: background-color .2s; }
.kdir__row:hover { background: var(--surface-raised); }
.kdir__row--head { padding-top: var(--space-3); padding-bottom: var(--space-3); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kdir__row--head:hover { background: none; }
.kdir__topic { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 30px; text-transform: uppercase; }
.kdir__who b { display: block; font-size: 19px; line-height: 26px; }
.kdir__who > span { display: block; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.kdir__links { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kdir__link { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; font-size: 17px; line-height: 26px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kdir__link svg { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.kdir__link small { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.kdir__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 3px solid var(--rule-strong); }
.kfacts div { padding: var(--space-6) var(--space-6) 0; border-left: 1px solid var(--rule); }
.kfacts div:first-child { padding-left: 0; border-left: 0; }
.kfacts dt { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.kfacts dd { margin: var(--space-2) 0 0; font-family: var(--font-mono); font-size: 17px; line-height: 26px; }
.enquiry--light { background: var(--surface-raised); color: var(--ink); border-top: 1px solid var(--rule); }
.enquiry--light .enquiry__title { font-size: 72px; }
.enquiry--light .enquiry__lead { color: var(--ink-muted); }

/* ---------- O nás hero mosaic (own composition: one tile per line + logo + claim) ---------- */
.mosaic { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--container-max)) / 2 + var(--gutter))) 0 0; }
.mosaic__tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); min-height: 160px; padding: var(--space-4) var(--space-6); background: var(--xm-cat); color: var(--xm-on-cat); text-decoration: none; overflow: hidden; }
.mosaic__verb { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 34px; text-transform: uppercase; }
.mosaic__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 15px; line-height: 20px; font-weight: 600; }
.mosaic__tile:hover .arr { transform: translateX(6px); }
.mosaic__tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
.mosaic__tile--steel { background: var(--surface-steel); color: var(--ink-on-steel); justify-content: center; }
.mosaic__tile--steel img { width: 82%; max-width: 230px; height: auto; }
.mosaic__tile--brand { background: var(--brand); color: var(--on-brand); }
/* strip variant: one full-width row under the hero copy */
.phero__grid--text { min-height: 0; align-items: end; padding-bottom: var(--space-12); }
.phero__grid--text .phero__copy { padding-bottom: 0; }
.phero__grid--text .phero__lead { margin: 0; }
/* band variant: inside the content width, two rows – logo spans both rows, lines + claim fill a 4 × 2 grid */
.mosaic--band { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 136px; gap: 6px; margin: 0; }
.mosaic--band .mosaic__tile { min-height: 0; padding: var(--space-4) 20px; }
.mosaic--band .mosaic__verb { font-size: 28px; line-height: 28px; }
.mosaic--band .mosaic__foot { font-size: 14px; line-height: 18px; }
.mosaic--band .mosaic__tile--brand .mosaic__verb { font-size: 24px; line-height: 25px; }
.mosaic--band .mosaic__tile--logo { grid-row: span 2; align-items: center; }
.mosaic--band .mosaic__tile--logo img { width: 78%; max-width: 200px; }

/* ---------- Balcony extras: sub-nav, figure stacks, detail drawings ---------- */
.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-12); padding: var(--space-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.subnav__label { margin-right: var(--space-2); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.subnav a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 var(--space-4); border: 2px solid var(--ink); border-radius: 999px; background: var(--surface-raised); font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none; }
.subnav a:hover { background: var(--surface-sunken); }
.subnav a:hover .arr { transform: translateY(3px); }
.fstack { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: stretch; margin-bottom: var(--space-8); }
.sfig { margin: 0; background: var(--surface-raised); }
.sfig img { width: 100%; height: auto; }
.sfig figcaption { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--rule); font-size: 16px; line-height: 24px; }
.sfig figcaption b { margin-right: 8px; font-family: var(--font-mono); font-weight: 500; color: var(--brand-text); }
.fstack .cert { display: flex; flex-direction: column; justify-content: center; }
.layers--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: var(--space-12); }
.pstack { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
.pstack__figs { display: flex; flex-direction: column; gap: var(--space-4); }
/* Two detail drawings side by side: each column = title, drawing, close-up (fixed box), legend */
.dpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); align-items: start; margin-top: var(--space-12); }
.dcol { display: flex; flex-direction: column; gap: var(--space-4); }
.dfig__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 28px; text-transform: uppercase; }
.dfig__title b { margin-right: 10px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; text-transform: none; color: var(--brand-text); }
.sfig__box { height: 280px; padding: var(--space-4); }
.sfig__box img { width: 100%; height: 100%; object-fit: contain; }
.legend--one { columns: 1; margin-top: 0; }
.legend--compact li { padding: 6px 0; font-size: 15px; line-height: 22px; }
.srcnote { margin: var(--space-8) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.rr:not(.rr--steel) .mini:focus-visible { outline-color: var(--focus-ring); }

/* ---------- Content modules (O nás) ---------- */
/* Rich text – the only place long-form copy is styled */
.rt { font-size: 19px; line-height: 30px; }
.rt > * { margin: 0; }
.rt > * + * { margin-top: var(--space-4); }
.rt h2 { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: .95; text-transform: uppercase; }
.rt h3 { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; }
.rt * + h3 { margin-top: var(--space-8); }
.rt ul, .rt ol { padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rt li { position: relative; padding: 10px 0 10px 32px; border-bottom: 1px solid var(--rule); }
.rt ul li::before { content: ""; position: absolute; left: 0; top: 21px; width: 12px; height: 12px; background: var(--brand); }
.rt ol { counter-reset: rt; }
.rt ol li::before { counter-increment: rt; content: counter(rt, decimal-leading-zero); position: absolute; left: 0; font-family: var(--font-mono); font-size: 15px; color: var(--brand-text); }
.rt a:not(.xm-btn) { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rt blockquote { padding-left: var(--space-6); border-left: 6px solid var(--brand); font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 34px; text-transform: uppercase; }
.rt .lead { font-size: 22px; line-height: 33px; font-weight: 500; }
.rt--cols { columns: 2; column-gap: var(--space-12); }
.rt--cols > * { break-inside: avoid; }

/* Media + text – image on one side, rich text on the other; --rev flips sides */
.mt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.mt__media { margin: 0; position: relative; overflow: hidden; background: var(--surface-sunken); }
.mt__media img { width: 100%; height: 560px; object-fit: cover; }
.mt__media figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--surface-steel); color: var(--ink-on-steel); font-size: 14px; line-height: 20px; }
.mt--rev .mt__media { order: 2; }
.mt__copy { max-width: 60ch; }

/* Rich text split – heading column + rich text column */
.rtsplit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); border-top: 3px solid var(--rule-strong); padding-top: var(--space-8); }
.rtsplit__head h2 { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: .95; text-transform: uppercase; }
.rtsplit .rt { max-width: 68ch; }

/* Stats strip */
.mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--rule-strong); }
.mstats div { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8) var(--space-6) 0; border-left: 1px solid var(--rule); }
.mstats div:first-child { padding-left: 0; border-left: 0; }
.mstats b { font-family: var(--font-display); font-weight: 700; font-size: 84px; line-height: .9; }
.mstats span { font-size: 18px; line-height: 26px; color: var(--ink-muted); }

/* Feature grid – numbered statements, last cell can be a link */
.mgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: mg; }
.mgrid li { display: flex; flex-direction: column; gap: var(--space-4); min-height: 210px; padding: var(--space-6); background: var(--surface-raised); font-size: 19px; line-height: 27px; font-weight: 600; }
.mgrid li::before { counter-increment: mg; content: counter(mg, decimal-leading-zero); font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--brand-text); }
.mgrid li.mgrid__more { padding: 0; background: var(--brand); }
.mgrid li.mgrid__more::before { content: none; }
.mgrid__more a { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: var(--space-6); color: var(--on-brand); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 32px; text-transform: uppercase; }
.mgrid__more a:hover .arr { transform: translateX(6px); }

/* Quote band */
.mquote { background: var(--surface-steel); color: var(--ink-on-steel); }
.mquote__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-12); align-items: end; }
.mquote blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: .95; text-transform: uppercase; }
.mquote blockquote em { font-style: normal; color: var(--brand); }
.mquote p { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-on-steel-muted); }

/* =====================================================================
   Aktuality, článek, Ke stažení, Poradenství, Kariéra
   ===================================================================== */

/* ---------- News ---------- */
.nmeta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.nmeta time { font-family: var(--font-mono); font-size: 15px; line-height: 20px; color: var(--ink-muted); }
.nfeat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-bottom: var(--space-8); background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.nfeat__img { margin: 0; min-height: 420px; overflow: hidden; background: var(--surface-sunken); }
.nfeat__img img { width: 100%; height: 100%; object-fit: cover; }
.nfeat__img--well { display: flex; align-items: center; justify-content: center; padding: var(--space-8); background: var(--xm-cat-tint); }
.nfeat__img--well img { width: auto; height: 340px; max-width: 70%; object-fit: contain; mix-blend-mode: multiply; }
.nfeat__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-8); }
.nfeat__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: .98; text-transform: uppercase; }
.nfeat__perex { margin: 0; font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.nmore { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nfeat:hover .arr, .ncard:hover .arr { transform: translateX(6px); }
.nfeat:focus-visible, .ncard:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ncard { display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; border-top: 6px solid var(--xm-cat); }
.ncard__well { height: 220px; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--xm-cat-tint); }
.ncard__well img { max-width: 62%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ncard__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.ncard__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.ncard__perex { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ngrid__empty { grid-column: 1 / -1; padding: var(--space-12); background: var(--surface-raised); font-size: 18px; color: var(--ink-muted); }
.pager { display: flex; align-items: center; gap: 6px; margin-top: var(--space-12); }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); font-family: var(--font-mono); font-size: 16px; text-decoration: none; }
.pager .is-on { background: var(--ink); color: var(--surface); }
.pager .pager__gap { border-color: transparent; background: none; }
.pager a:hover { background: var(--surface-sunken); }
.pager a:hover .arr { transform: translateX(4px); }

/* ---------- Article ---------- */
.art-head { max-width: 920px; padding: var(--space-12) 0 var(--space-12); }
.art-head__title { margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: .95; text-transform: uppercase; }
.art-head__perex { margin: var(--space-6) 0 0; max-width: 62ch; font-size: 21px; line-height: 32px; }
.art { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-16); align-items: start; }
.art__fig { margin: 0 0 var(--space-8); background: var(--surface-sunken); }
.art__fig img { width: 100%; height: 460px; object-fit: cover; }
.art__fig figcaption { padding: var(--space-3) var(--space-4); background: var(--surface-raised); font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.art .rt { max-width: 70ch; }
.art .rt h2 { font-size: 44px; }
.sticky-aside { position: sticky; top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-8); }
.abox { display: flex; flex-direction: column; background: var(--surface-raised); border-top: 6px solid var(--xm-cat); }
.abox__well { height: 220px; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--xm-cat-tint); }
.abox__well img { max-height: 100%; max-width: 60%; object-fit: contain; mix-blend-mode: multiply; }
.abox__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.abox__title { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }
.abox__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.aside-h { margin: 0 0 var(--space-3); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.alist { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule-strong); }
.alist a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.alist time { font-family: var(--font-mono); font-size: 14px; line-height: 18px; color: var(--ink-muted); }
.alist b { font-size: 17px; line-height: 24px; }
.alist a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Downloads: sticky legend + sections ---------- */
.dl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-12); align-items: start; }
.toc { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule-strong); }
.toc a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; transition: padding-left .25s var(--ease-out); }
.toc a:hover { padding-left: 8px; }
.toc small { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.keys { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.keys div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.keys dd { margin: 0; font-size: 15px; line-height: 21px; }
.ftype { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 24px; padding: .5px 6px 0; border: 1.5px solid currentColor; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .04em; white-space: nowrap; }
.ftype--fill { background: var(--ink); border-color: var(--ink); color: var(--surface-raised); }
.dsec { margin-bottom: var(--space-16); scroll-margin-top: var(--space-6); }
.dsec .gblock__head { margin-bottom: var(--space-6); }
.dsec__lead { margin: calc(-1 * var(--space-2)) 0 var(--space-6); max-width: 64ch; font-size: 17px; line-height: 26px; color: var(--ink-muted); }
.vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.vcard { display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.vcard__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-steel); }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcard__play { position: absolute; left: var(--space-4); bottom: var(--space-4); display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: var(--brand); color: var(--on-brand); transition: background-color .2s, color .2s; }
.vcard__play svg { width: 22px; height: 22px; margin-left: 3px; }
.vcard:hover .vcard__play { background: var(--ink); color: var(--surface-raised); }
.vcard__body { display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-4) var(--space-6); }
.vcard__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 700; }
.vcard__text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); border-top: 3px solid var(--rule-strong); }
.dlist a { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; }
.dlist a .ftype { margin-left: auto; flex: none; }
.dlist a:hover .arr { transform: translateY(3px); }
.cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ccard { display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.ccard__cover { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); height: 200px; padding: var(--space-6); background: var(--xm-cat, var(--surface-steel)); color: var(--xm-on-cat, var(--ink-on-steel)); }
.ccard__cover small { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ccard__cover b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 30px; text-transform: uppercase; }
.ccard--steel .ccard__cover { background: var(--surface-steel); color: var(--ink-on-steel); }
.ccard__body { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); font-size: 16px; line-height: 22px; font-weight: 600; }
.ccard__body .ftype { margin-left: auto; flex: none; }
.ccard:hover .arr { transform: translateY(3px); }
.calc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-8); background: var(--brand-tint); border-left: 6px solid var(--brand); }
.calc > svg { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: square; }
.calc__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 32px; text-transform: uppercase; }
.calc__text { margin: 4px 0 0; font-size: 17px; line-height: 26px; }
.dtools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.dsearch { display: flex; align-items: center; gap: var(--space-2); width: 320px; height: 48px; padding: 0 var(--space-3); border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); }
.dsearch svg { width: 20px; height: 20px; flex: none; }
.dsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.dsearch:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* div grid with table roles – a real <table> can't hold the runtime's <sc-for> (the HTML parser hoists it out) */
/* view switch (list / covers) */
.seg { margin-left: auto; align-self: center; display: inline-flex; border: 2px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; }
.seg__btn { display: inline-flex; align-items: center; height: 36px; padding: 1px 14px 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background-color .2s; }
.seg__btn + .seg__btn { border-left: 2px solid var(--ink); }
.seg__btn.is-on { background: var(--ink); color: var(--surface-raised); }
/* leaflets: list rows with a cover thumb; hover/focus pops a large preview beside the row */
.dfiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); border-top: 3px solid var(--rule-strong); }
.dfile { position: relative; border-bottom: 1px solid var(--rule); }
.dfile__link { display: flex; align-items: center; gap: var(--space-4); padding: 10px 4px 10px 0; color: var(--ink); text-decoration: none; }
.dfile__thumb { flex: none; width: 40px; height: 56px; border: 1px solid var(--rule); background: #fff; overflow: hidden; }
.xm-page .dfile__thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.dfile__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dfile__txt b { font-size: 16px; line-height: 22px; font-weight: 600; }
.dfile__txt small { font-family: var(--font-mono); font-size: 14px; line-height: 18px; color: var(--ink-muted); }
.dfile__link:hover .arr, .dfile__link:focus-visible .arr { transform: translateY(3px); }
.dfile__prev { position: absolute; z-index: 25; top: 50%; left: calc(100% + var(--space-4)); width: 232px; aspect-ratio: 560 / 792; background: #fff; border: 2px solid var(--ink); box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.97); transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); }
.dfile:nth-child(even) .dfile__prev { left: auto; right: calc(100% + var(--space-4)); }
.xm-page .dfile__prev img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.dfile:hover .dfile__prev, .dfile:focus-within .dfile__prev { opacity: 1; transform: translateY(-50%) scale(1); }
/* leaflets: all covers at once */
.dcovers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-4); }
.dcover { position: relative; display: block; aspect-ratio: 560 / 792; border: 1px solid var(--rule); background: #fff; overflow: hidden; color: var(--surface-raised); text-decoration: none; }
.xm-page .dcover img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s var(--ease-out); }
.dcover:hover img { transform: scale(1.04); }
.dcover__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; background: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 18px; transform: translateY(100%); transition: transform .25s var(--ease-out); }
.dcover:hover .dcover__bar, .dcover:focus-visible .dcover__bar { transform: none; }
/* catalogues: cover + text cards, 3 x 3 */
.dcats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.dcat { display: flex; gap: var(--space-4); height: 100%; box-sizing: border-box; padding: var(--space-4); background: var(--surface-raised); color: var(--ink); text-decoration: none; }
.dcat__img { flex: none; width: 96px; aspect-ratio: 560 / 792; align-self: flex-start; border: 1px solid var(--rule); background: #fff; overflow: hidden; }
.xm-page .dcat__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s var(--ease-out); }
.dcat:hover .dcat__img img { transform: scale(1.05); }
.dcat__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dcat__k { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.dcat__t { font-size: 18px; line-height: 24px; font-weight: 700; }
.dcat__m { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.dcat__dl { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 22px; font-weight: 600; }
.dcat:hover .dcat__dl .arr { transform: translateY(3px); }
.dtable abbr { text-decoration: none; cursor: help; }
.dtable__row--head abbr { text-transform: none; letter-spacing: .04em; }
.dtable { border-top: 3px solid var(--rule-strong); background: var(--surface-raised); }
.dtable__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 13%); align-items: center; border-bottom: 1px solid var(--rule); }
.dtable--wide .dtable__row { grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr)); }
.dtable__row > * { padding: 10px 16px; }
.dtable__row:not(.dtable__row--head):hover { background: var(--surface); }
.dtable__row--head { background: var(--xm-cat-tint, var(--surface-sunken)); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dtable__row--head > * { padding-top: 12px; padding-bottom: 12px; }
.dtable__name { font-size: 17px; line-height: 24px; font-weight: 700; }
.dtable__name small { display: block; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink-muted); }
.dchip { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.dchip:hover .arr { transform: translateY(3px); }
.dna { font-family: var(--font-mono); color: var(--ink-disabled); }
.dtable__empty { padding: var(--space-8) 16px; color: var(--ink-muted); }

/* ---------- Advice ---------- */
.askbox { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-steel); color: var(--ink-on-steel); }
.askbox small { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.askbox b { font-family: var(--font-display); font-size: 32px; line-height: 34px; text-transform: uppercase; }
.askbox a.askbox__link { display: flex; align-items: center; gap: 10px; font-size: 19px; line-height: 26px; font-weight: 600; text-decoration: none; }
.askbox a.askbox__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.askbox svg.askbox__ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
.golist { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--rule-strong); }
.golist a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 19px; line-height: 27px; text-decoration: none; }
.golist i { width: 14px; height: 14px; background: var(--xm-cat); }
.golist small { font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.golist small { display: inline-flex; align-items: center; gap: 8px; }
.golist a:hover .arr { transform: translateX(6px); }
.faq__a p { margin: 0 0 var(--space-3); }

/* ---------- Careers ---------- */
.jobs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: stretch; }
.jobs__status { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-8); background: var(--surface-raised); border-top: 6px solid var(--ink); }
.jobs__status b { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: .95; text-transform: uppercase; }
.jobs__status p { margin: 0; max-width: 52ch; font-size: 19px; line-height: 30px; color: var(--ink-muted); }

/* =====================================================================
   Responsive layer
   One stylesheet for every width. Display type scales fluidly with clamp()
   (full size at 1440px, a readable floor on phones); layouts step down at
   1320 / 1180 / 900 / 600 / 480. Body copy never drops below 16px.
   ===================================================================== */

/* ---------- fluid display type (max = the desktop size) ---------- */
.hero__title { font-size: clamp(52px, 7.8vw, 112px); }
.cat-hero__title, .phero__title, .khero__title { font-size: clamp(44px, 6.4vw, 92px); }
.phero__title--m { font-size: clamp(38px, 4.8vw, 68px); }
.pdp__title { font-size: clamp(44px, 6.7vw, 96px); }
.pdp__title small { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.125; }
.enquiry__title { font-size: clamp(44px, 5.9vw, 84px); }
.enquiry--light .enquiry__title { font-size: clamp(40px, 5vw, 72px); }
.head__title, .rt h2, .rtsplit__head h2, .jobs__status b { font-size: clamp(34px, 3.9vw, 56px); }
.art .rt h2 { font-size: clamp(30px, 3.1vw, 44px); }
.sysintro__title, .slide__name { font-size: clamp(36px, 4.45vw, 64px); }
.line__title { font-size: clamp(36px, 3.7vw, 52px); }
.art-head__title, .mquote blockquote { font-size: clamp(36px, 5vw, 72px); }
.nfeat__title { font-size: clamp(30px, 3.35vw, 48px); }
.mstats b { font-size: clamp(48px, 5.9vw, 84px); }
.gtool__value { font-size: clamp(72px, 7.3vw, 104px); }
.guide__value, .cls__code { font-size: clamp(80px, 8.4vw, 120px); }
.perk__k--lg { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.0455; }

/* hover-only extras stay readable on touch screens */
/* pictograms + swatches: no hover → tap shows the meaning in a caption under the row */
@media (hover: none), (max-width: 700px) {
  .pik > .tip, .sw > .tip { display: none; }
  .pikto__cap { display: block; }
  .pik.is-on { outline: 2px solid var(--ink); outline-offset: 2px; }
}
@media (hover: none) {
  .dcover__bar { transform: none; }
  .dfile__prev, .card__reveal { display: none; }
}

/* ---------- mobile menu (hidden on desktop) ---------- */
.mnav { display: none; }
.mnav > summary { list-style: none; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav__btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); cursor: pointer; font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.mnav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.mnav__btn .i-close { display: none; }
.mnav[open] .mnav__btn { background: var(--ink); color: var(--surface-raised); }
.mnav[open] .mnav__btn .i-open { display: none; }
.mnav[open] .mnav__btn .i-close { display: block; }
.mnav__btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mnav__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 45; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface-raised); border-top: 3px solid var(--ink); box-shadow: var(--shadow-pop); animation: xm-dd .2s var(--ease-out); }
.mnav__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6) var(--space-12); padding-top: var(--space-6); padding-bottom: var(--space-8); }
.mnav__search { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); height: 52px; padding: 0 var(--space-4); border: 2px solid var(--ink); border-radius: var(--radius-sm); }
.mnav__search svg { width: 22px; height: 22px; flex: none; }
.mnav__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 17px; color: var(--ink); }
.mnav__search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mnav__nav { display: flex; flex-direction: column; border-top: 3px solid var(--rule-strong); }
.mnav__link { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--rule); font-family: var(--font-display); font-size: 26px; line-height: 28px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.mnav__link.is-active { box-shadow: inset 4px 0 0 var(--brand); padding-left: 14px; }
.mnav__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 3px solid var(--rule-strong); }
.mnav__lines a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 22px; font-weight: 600; text-decoration: none; }
.mnav__lines i { width: 14px; height: 14px; flex: none; background: var(--xm-cat); }
.mnav__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-size: 16px; line-height: 22px; }
.mnav__foot a:not(.xm-btn) { font-weight: 600; text-decoration: none; }
.mnav__foot .xm-btn { margin-right: auto; }

/* ---------- ≤ 1320: compact header so the full menu still fits ---------- */
@media (max-width: 1320px) {
  .header__row { gap: var(--space-6); }
  .header__logo img { width: 200px; }
  .nav__item { font-size: 18px; padding: 0 10px; }
  .nav__item::after { left: 10px; right: 10px; }
  .keyfacts { grid-template-columns: repeat(var(--n2, 2), minmax(0, 1fr)); }
}

/* ---------- ≤ 1180: tablet landscape ---------- */
@media (max-width: 1180px) {
  .panel--tech { grid-template-columns: minmax(0, 1fr); }
  /* header → menu button */
  .nav, .mega { display: none; }
  .header__row { position: relative; justify-content: space-between; min-height: 80px; }
  .header__tools { margin-left: auto; }
  .mnav { display: block; }
  .xm-page .search:hover, .xm-page .search:focus-within { width: min(340px, 60vw); }
  /* grids */
  .grid4, .combo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perk:nth-child(3) { border-left: 0; }
  .perk:nth-child(n+3) { border-top: 1px solid #3a3936; }
  .info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icard--wide { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .match { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dcovers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kdir__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kdir__row--head { display: none; }
  .kdir__topic { grid-column: 1 / -1; }
  .dtable--wide { overflow-x: auto; }
  .dtable--wide .dtable__row { min-width: 820px; }
  /* O nás band: logo across the top, 8 tiles in 4 × 2 */
  .mosaic--band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic--band .mosaic__tile--logo { grid-row: auto; grid-column: 1 / -1; }
  .mosaic--band .mosaic__tile--logo img { width: auto; height: 64px; max-width: 100%; }
  /* homepage product lines: tiles instead of the hover accordion */
  .lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: auto; gap: var(--space-2); }
  .line { min-height: 128px; }
  .line.is-active { flex-grow: 1; }
  .line__open { display: none; }
  .line__vtitle, .line.is-active .line__vtitle { opacity: 1; writing-mode: horizontal-tb; transform: none; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); white-space: normal; }
  .line::after { content: ""; position: absolute; right: var(--space-6); top: var(--space-6); width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25'%3E%3Cpath d='M3 12h16.5M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25'%3E%3Cpath d='M3 12h16.5M13 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease-out); }
  .line:hover::after { transform: translateX(6px); }
  /* downloads */
  .dl { gap: var(--space-8); }
  /* category tabs keep their full names and scroll sideways */
  .cattabs { overflow-x: auto; scrollbar-width: none; }
  .cattabs::-webkit-scrollbar { display: none; }
  .cattab { flex: none; max-width: 70vw; overflow: visible; }
}

/* ---------- ≤ 900: tablet portrait — two-column splits stack ---------- */
@media (max-width: 900px) {
  .xm-page { --gutter: var(--space-6); }
  .section { padding: 72px 0; }
  .head { margin-bottom: var(--space-8); }
  .head__lead, .hero__lead, .enquiry__lead { font-size: 19px; line-height: 29px; }
  .phero__lead, .cat-hero__lead, .khero__lead, .art-head__perex, .pdp__lead { font-size: 19px; line-height: 29px; }
  /* every 2-column split becomes one column */
  .hero, .enquiry__grid, .cat-hero__grid, .guide__top, .gtool, .classes, .pdp, .panel, .phero__grid, .sys, .sysintro, .stack,
  .sv, .fstack, .pstack, .dpair, .khero__grid, .mt, .rtsplit, .mquote__grid, .nfeat, .art, .dl, .jobs { grid-template-columns: minmax(0, 1fr); }
  .sysintro, .rtsplit, .mt { gap: var(--space-8); }
  /* home hero */
  .hero { min-height: 0; }
  .hero__brand { padding: var(--space-12) var(--gutter) var(--space-8); gap: var(--space-6); }
  .slide { padding: var(--space-8) var(--gutter) 104px; }
  .slide__img { height: 360px; }
  .slider__ui { left: var(--gutter); right: var(--gutter); bottom: var(--space-6); }
  /* heroes */
  .cat-hero__grid, .phero__grid { min-height: 0; padding-top: var(--space-8); gap: var(--space-6); }
  .cat-hero__copy, .phero__copy { padding-bottom: var(--space-6); }
  .phero__side { padding-bottom: var(--space-12); }
  .phero__media { margin: 0 calc(-1 * var(--gutter)); height: 320px; }
  .fan { height: 300px; max-width: 520px; width: 100%; margin: 0 auto; }
  .fan img { height: 210px; bottom: -20px; }
  .fan img:nth-child(2) { height: 240px; left: 30%; }
  .khero__grid { padding: var(--space-8) var(--gutter) var(--space-12); gap: var(--space-8); }
  .kmap { height: 420px; }
  .art-head { padding: var(--space-8) 0; }
  /* product page */
  .pdp { padding-top: var(--space-6); gap: var(--space-8); }
  .pdp__media { position: static; }
  .sys__figure { height: auto; }
  .sys__figure img { height: auto; object-fit: contain; }
  .gallery { height: 520px; align-items: flex-end; padding-bottom: var(--space-6); }
  .gallery img { height: 68%; }
  .gallery__cls { font-size: 56px; }
  /* grids */
  .grid4, .combo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .mstats, .kfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mstats div, .kfacts div { padding-left: var(--space-6); }
  .mstats div:nth-child(odd), .kfacts div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .mstats div:nth-child(n+3), .kfacts div:nth-child(n+3) { margin-top: var(--space-6); }
  .footer__grid { padding: var(--space-12) 0 var(--space-8); }
  .dcovers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dfiles, .rt--cols { grid-template-columns: minmax(0, 1fr); columns: 1; }
  .layers--cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .hlayers { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt--rev .mt__media { order: 0; }
  .mt__media img { height: 380px; }
  .nfeat__img { min-height: 300px; }
  .nfeat__img--well img { height: 240px; }
  .nfeat__body { padding: var(--space-8) var(--space-6); }
  .art__fig img { height: 340px; }
  .sticky-aside { position: static; }
  /* downloads: contents + legend side by side above the sections */
  .dl > .sticky-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .dl > .sticky-aside > .xm-btn { grid-column: 1 / -1; }
  .keys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px var(--space-4); }
  .dfile__prev { display: none; }
  /* systems switcher */
  .systab { height: 88px; padding: var(--space-3) var(--space-4); }
  .systab.is-on { height: 104px; }
  .systab__title { font-size: 24px; line-height: 25px; }
  /* rails: native swipe (no scrollbar) instead of the arrow-stepped track */
  .rr__view, .rail-view, .classes__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rr__view::-webkit-scrollbar, .rail-view::-webkit-scrollbar, .classes__view::-webkit-scrollbar { display: none; }
  .rail-view { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .rr__track, .rail-track, .classes__track { transform: none !important; }
  .rr__track > * { flex-basis: 44%; scroll-snap-align: start; }
  .rail-track > *, .classes__track > * { scroll-snap-align: start; }
  .rr__ui, .classes__ui, .rail-ui { display: none; }
  .head__side .icon-btn { display: none; }
  /* contact directory */
  .kdir__row { padding: var(--space-6) 0; }
  .kdir__row:hover { background: none; }
}

/* ---------- ≤ 600: phones ---------- */
@media (max-width: 600px) {
  .xm-spec td { white-space: normal; }
  .xm-page { --gutter: var(--space-4); font-size: 17px; line-height: 27px; }
  .section { padding: 48px 0; }
  .head { padding-top: var(--space-4); margin-bottom: var(--space-6); gap: var(--space-4); }
  .head__lead, .hero__lead, .enquiry__lead, .phero__lead, .cat-hero__lead, .khero__lead, .art-head__perex, .pdp__lead,
  .sysintro__text, .panel p, .faq__a, .rt { font-size: 17px; line-height: 27px; }
  .rt .lead { font-size: 19px; line-height: 29px; }
  /* top bar: phone + e-mail only (the rest is in the menu) */
  .topbar { font-size: 14px; }
  .topbar .wrap { min-height: 36px; justify-content: center; }
  .topbar__group:first-child > span, .topbar__group + .topbar__group { display: none; }
  .topbar__group { gap: var(--space-4); }
  /* header */
  .header__row { min-height: 68px; gap: var(--space-3); }
  .header__logo img { width: 168px; }
  .header__tools .search-slot, .header__tools > .xm-btn { display: none; }
  .mnav__btn { height: 46px; padding: 0 12px; font-size: 18px; }
  .mnav__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .mnav__panel { max-height: calc(100vh - 104px); }
  /* home hero */
  .hero__brand { padding-top: var(--space-8); }
  .hero__brand::after { display: none; }
  .hero__ctas .xm-btn { flex: 1 1 auto; justify-content: center; }
  .slide { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-6); }
  .slide::before { top: 0; bottom: auto; width: 62%; height: 260px; }
  .slide__img { height: 240px; order: -1; }
  .slide__desc { font-size: 17px; line-height: 26px; }
  .slider__ui { gap: var(--space-3); }
  .slider__arrows .icon-btn { width: 44px; height: 44px; }
  /* one column for most grids */
  .perks__grid, .info, .footer__grid, .ngrid, .vgrid, .dcats, .ptiles, .mgrid, .match, .steps, .figs, .kmain--grid, .uses, .form,
  .kdir__row, .hlayers, .mnav__grid { grid-template-columns: minmax(0, 1fr); }
  .legend { columns: 1; }
  .perks__grid.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
  .perk { padding: var(--space-4) 0; border-left: 0; }
  .perk:nth-child(n+2) { border-top: 1px solid #3a3936; }
  .perk:hover { background: none; }
  .perk__k { font-size: 26px; line-height: 28px; }
  .perk__k--lg { font-size: 30px; }
  .icard--wide { flex-direction: column; }
  .icard--wide .icard__img { width: 100%; min-height: 0; height: 220px; }
  .icard__img { height: 200px; }
  .icard__title { font-size: 26px; line-height: 28px; }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .other { height: 150px; }
  .other__name { font-size: 20px; line-height: 22px; }
  .dcovers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .mosaic--band { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(112px, auto); }
  .mosaic--band .mosaic__verb { font-size: 24px; line-height: 24px; }
  .mosaic--band .mosaic__tile { padding: var(--space-3) var(--space-4); }
  .lines { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .line { min-height: 64px; }
  .line__index { top: 50%; transform: translateY(-50%); left: var(--space-4); }
  .line__vtitle, .line.is-active .line__vtitle { left: 64px; right: 56px; bottom: auto; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 26px; }
  .line::after { top: 50%; right: var(--space-4); margin-top: -11px; }
  /* product cards */
  .grid4, .combo { gap: var(--space-3); }
  .card__media { height: 220px; }
  .card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .card__name { font-size: 19px; line-height: 24px; }
  .card__reveal { display: none; }
  .rr__track > * { flex-basis: 82%; }
  .rail-track > * { flex-basis: 78%; }
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 2px 0; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { flex: none; }
  .head__side { width: 100%; min-width: 0; }
  .head__side .pills { flex: 1 1 100%; min-width: 0; }
  /* category pages */
  .cat-hero__meta { gap: var(--space-4) var(--space-6); margin-top: var(--space-6); }
  .cat-hero__meta .meta__k { font-size: 30px; line-height: 30px; }
  .cat-hero__meta .meta__v { font-size: 15px; }
  .cat-hero__copy { padding-bottom: var(--space-4); }
  .fan { height: 236px; }
  .fan img { height: 196px; bottom: -16px; }
  .fan img:nth-child(2) { height: 226px; }
  .filterbar .wrap { min-height: 0; gap: var(--space-3); }
  .filterbar .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .filterbar .pills::-webkit-scrollbar { display: none; }
  .filterbar .pill { flex: none; }
  .filterbar .wrap > div:first-child { flex: 1 1 100%; min-width: 0; }
  .grow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name fit" "track track"; gap: 4px var(--space-3); padding: var(--space-2) 0; }
  .grow__name { grid-area: name; padding-left: 0; }
  .grow__fit { grid-area: fit; }
  .grow__track { grid-area: track; height: 40px; }
  .grow__ext { top: 12px; }
  .grow__bar { top: 8px; }
  .gblock { margin-top: var(--space-12); }
  .gblock__title { font-size: 26px; line-height: 28px; }
  .cls { flex-basis: 78vw; min-height: 300px; }
  .scen__card { padding: var(--space-4); min-height: 0; }
  /* product page */
  .gallery { height: 380px; }
  .gallery__cls { font-size: 44px; left: var(--space-4); top: var(--space-4); }
  .gallery__badges { right: var(--space-4); top: var(--space-4); }
  .gallery .gallery__badges img { width: 60px; height: 60px; }
  .gvideo__play { left: var(--space-4); width: 76px; height: 76px; margin-top: -84px; }
  .gvideo__play svg { width: 36px; height: 36px; }
  .gvideo__t { padding: var(--space-4); font-size: 26px; line-height: 28px; }
  .shades { padding: var(--space-4); }
  .shgroup { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .shgroup__h { flex-direction: row; justify-content: space-between; }
  .tex__row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3); }
  .tex__price { font-size: 22px; }
  .pcalc__x { display: none; }
  .thumb { width: 72px; height: 72px; }
  .keyfact b { font-size: 34px; line-height: 36px; }
  /* variants: each row becomes a labelled 2-column block (labels from data-label) */
  .variant thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .variant, .variant tbody { display: block; }
  .variant tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--rule); }
  .variant td { display: flex; flex-direction: column; gap: 2px; padding: 0; }
  .variant td::before { content: attr(data-label); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
  .variant td.price { grid-column: 1 / -1; font-size: 32px; line-height: 34px; }
  .gallery__cls small { font-size: 13px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); }
  .tabs .tab::after { bottom: 0; height: 3px; }
  /* home – systems: the three system tabs always fit side by side; long names wrap to two lines */
  .systems .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-right: 0; -webkit-mask-image: none; mask-image: none; animation: none; }
  .systems .tab { height: auto; min-height: 56px; padding: var(--space-2) var(--space-1); font-size: 18px; line-height: 20px; white-space: normal; text-align: center; }
  .systems .tabs .tab::after { bottom: -2px; height: 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; height: 52px; padding: 0 var(--space-4); font-size: 20px; }
  .pdp__ctas .xm-btn { flex: 1 1 auto; justify-content: center; }
  .doc { font-size: 16px; flex-wrap: wrap; }
  /* content pages */
  .phero__media { height: 240px; }
  .ptile__top { min-height: 0; padding: var(--space-4) var(--space-4) var(--space-3); gap: var(--space-2); }
  .ptile__title { font-size: 28px; line-height: 28px; }
  .ptile__foot { margin-top: var(--space-3); }
  .ptile__well { height: 150px; }
  .ptile__well img { height: 116px; }
  .psearch .xm-input { height: 56px; font-size: 18px; }
  .psearch .xm-btn { min-height: 56px; }
  .systabs { gap: 4px; }
  .systab { height: 76px; padding: var(--space-2) var(--space-3); }
  .systab.is-on { height: 88px; }
  .systab__num { font-size: 13px; }
  .systab__title { font-size: 19px; line-height: 20px; }
  .benefits li { font-size: 22px; line-height: 25px; padding: var(--space-4) 0; }
  .sv__now b { font-size: 36px; line-height: 36px; }
  /* "Na stránce": an even 2-column grid of square-cornered buttons; an odd last one spans both */
  .subnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-8); }
  .subnav__label { grid-column: 1 / -1; margin: 0 0 2px; }
  .subnav a { justify-content: space-between; height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 15px; line-height: 18px; }
  .subnav a:last-child:nth-child(even) { grid-column: 1 / -1; }
  .kmap { height: 340px; }
  .kmap__label { left: 50%; top: calc(50% + 12px); transform: translateX(-50%); }
  .kmap__open { bottom: var(--space-4); }
  .kmain__big { font-size: 24px; line-height: 28px; }
  .kdir__row { gap: var(--space-3); }
  .kdir__topic { font-size: 24px; line-height: 26px; }
  .mstats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kfacts { grid-template-columns: minmax(0, 1fr); }
  .kfacts div, .kfacts div:nth-child(odd) { padding: var(--space-4) 0 0; border-left: 0; margin-top: 0; }
  .kfacts div + div { border-top: 1px solid var(--rule); margin-top: var(--space-4); }
  .mstats span { font-size: 15px; line-height: 22px; }
  .mt__media img { height: 260px; }
  .mgrid li { min-height: 0; }
  .mquote__grid { gap: var(--space-6); }
  /* news + article */
  .nfeat__img { min-height: 220px; }
  .nfeat__img--well img { height: 180px; }
  .nfeat__body { padding: var(--space-6) var(--space-4); }
  .ncard__well { height: 180px; }
  .art__fig img { height: 240px; }
  .pager { flex-wrap: wrap; }
  /* downloads */
  .dl > .sticky-aside { grid-template-columns: minmax(0, 1fr); }
  .dsec { margin-bottom: var(--space-12); }
  .dsec .gblock__head:has(.seg) { flex-wrap: wrap; }
  .calc { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-4); }
  .calc > svg { display: none; }
  .calc .xm-btn { justify-self: start; }
  .dsearch { width: 100%; }
  .dlist { grid-template-columns: minmax(0, 1fr); }
  /* product document table fits the screen: the column head names the document, each cell is just a download button */
  .dtable:not(.dtable--wide) .dtable__row { grid-template-columns: minmax(0, 1fr) repeat(4, 46px); }
  .dtable__row > * { padding: 10px 4px; }
  .dtable__row > :first-child { padding-left: 12px; }
  .dtable:not(.dtable--wide) .dtable__row > :not(:first-child) { display: flex; justify-content: center; text-align: center; }
  .dtable:not(.dtable--wide) .dchip { width: 36px; height: 36px; justify-content: center; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); }
  .dtable:not(.dtable--wide) .dchip .ftype { display: none; }
  .dtable__name { font-size: 16px; line-height: 22px; }
  .dtable--wide .dtable__row > * { padding: 10px 10px; }
  .dtools .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .dtools .pills::-webkit-scrollbar { display: none; }
  .dtools .pill { flex: none; }
  .dcat__img { width: 80px; }
  /* advice + careers */
  .askbox { padding: var(--space-6); }
  .askbox b { font-size: 28px; line-height: 30px; }
  .golist a { grid-template-columns: 14px minmax(0, 1fr); row-gap: 4px; font-size: 17px; line-height: 25px; }
  .golist small { grid-column: 2; }
  .jobs__status { padding: var(--space-8) var(--space-6); }
  /* enquiry */
  .enquiry__contact { font-size: 18px; }
  .form__row .xm-btn { width: 100%; justify-content: center; }
  .footer__claim { font-size: 26px; line-height: 28px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8) var(--space-4); }
  .footer__grid > :first-child, .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer__grid > :last-child ul { flex-direction: row; flex-wrap: wrap; gap: 6px var(--space-6); }
}

/* ---------- ≤ 480: narrow phones — product grids to one column ---------- */
@media (max-width: 480px) {
  .keyfacts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pik { width: 40px; height: 40px; }
  .keyfacts--3 .keyfact:last-child { grid-column: 1 / -1; }
  .grid4, .combo { grid-template-columns: minmax(0, 1fr); }
  /* compact horizontal product cards: packshot left, text right */
  .grid4 .card, .combo .card { flex-direction: row; border-top: 0; border-left: 6px solid var(--xm-cat); }
  .grid4 .card__media, .combo .card__media { flex: none; width: 38%; height: auto !important; min-height: 176px; }
  .grid4 .card__media img, .combo .card__media img { height: auto; max-height: 150px; max-width: 82%; }
  .grid4 .card__chip, .combo .card__chip { left: 6px; top: 6px; transform: scale(.88); transform-origin: left top; }
  .grid4 .card__cls, .combo .card__cls { top: auto; right: auto; left: 6px; bottom: 6px; font-size: 13px; padding: 2px 6px; }
  .grid4 .card__body, .combo .card__body { min-width: 0; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  .grid4 .card__name, .combo .card__name { font-size: 18px; line-height: 23px; }
  .grid4 .card__desc, .combo .card__desc { font-size: 15px; line-height: 21px; }
  .grid4 .card__foot, .combo .card__foot { flex-wrap: wrap; row-gap: 4px; }
  .fan { max-width: 340px; }
  .dcovers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header__logo img { width: 150px; }
  .mnav__btn .mnav__lbl { display: none; }
  .mnav__btn { width: 46px; justify-content: center; padding: 0; }
}

/* ---------- scroll hints for swipeable rows (small screens) ----------
   Card rails get a 2px progress bar drawn by the scroller itself (a background layer, so nothing scrolls with it);
   pill rows, tabs and category tabs get a soft fade on the right edge that clears at the end of the row.
   Both run on scroll-driven animations; browsers without them simply show no hint. */
@property --xm-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes xm-rail-progress { from { background-size: 16% 2px, 100% 2px; } to { background-size: 100% 2px, 100% 2px; } }
@keyframes xm-row-fade { from { --xm-fade: 48px; } 92% { --xm-fade: 48px; } to { --xm-fade: 0px; } }
@supports (animation-timeline: scroll()) {
  @media (max-width: 900px) {
    .rr__view, .rail-view, .classes__view { padding-bottom: 18px; background: linear-gradient(var(--ink), var(--ink)) left bottom / 16% 2px no-repeat, linear-gradient(var(--rule), var(--rule)) left bottom / 100% 2px no-repeat; animation: xm-rail-progress linear both; animation-timeline: scroll(self inline); }
    .rr--steel .rr__view, .systems .rr__view { background-image: linear-gradient(var(--ink-on-steel), var(--ink-on-steel)), linear-gradient(#4a4945, #4a4945); }
  }
  @media (max-width: 1180px) {
    .cattabs { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--xm-fade)); mask-image: linear-gradient(to left, transparent 0, #000 var(--xm-fade)); animation: xm-row-fade linear both; animation-timeline: scroll(self inline); }
  }
  @media (max-width: 600px) {
    .pills, .tabs { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--xm-fade)); mask-image: linear-gradient(to left, transparent 0, #000 var(--xm-fade)); animation: xm-row-fade linear both; animation-timeline: scroll(self inline); }
  }
}