:root {
  --red: #e63423;
  --dark: #222;
  --gray-100: #f5f5f5;
  --gray-200: #e9e9e9;
  --gray-500: #666;
  --header-gray: #8c8c8c;
  --header-dark: #505050;
  /* Main .container как на cromax.com (1230px); узкий вариант для подвала */
  --container: 1230px;
  --container-narrow: 1200px;
  /* Слайдеры: те же значения, что в библиотечном компоненте / полях БД (должны совпадать с SLIDER_CONFIG в script.js) */
  --slider-dot-size: 9px;
  --slider-dot-gap: 8px;
  --slider-mobile-max: 920px;
  /* Разделители между блоками контента: короткая линия по центру колонки (как на cromax.com) */
  --cromax-content-block-divider-width: min(140px, 38vw);
}

/*
 * Daylight Lamp Q-Lite page:
 * axbase-inspired no-sidebar layout with scoped typography/table overrides.
 */
.daylight-lamp-page {
  --daylight-accent: #e63c28;
  --daylight-text: #555;
  --daylight-text-strong: #333;
  --daylight-rule: #cfcfcf;
  --daylight-table-bg: #efefef;
}

.daylight-lamp-content {
  max-width: 1110px;
  margin: 0 auto;
  padding-bottom: 56px;
}

.daylight-lamp-page .section-block {
  margin-bottom: 0;
}

.daylight-lamp-header {
  padding: 28px 0 18px;
  text-align: center;
}

.daylight-lamp-page .daylight-lamp-header h1.daylight-lamp-hero-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--daylight-accent);
}

.daylight-lamp-page .section-block h2.daylight-lamp-hero-subtitle {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--daylight-accent);
}

.daylight-lamp-title-rule {
  width: 227px;
  max-width: min(227px, 46vw);
  margin: 10px auto 0;
  border: 0;
  border-top: 2px solid var(--daylight-rule);
}

.daylight-lamp-page .daylight-lamp-copy {
  padding: 15px 0;
}

.daylight-lamp-copy p,
.daylight-lamp-copy li {
  margin: 0;
  font-size: 15px;
  line-height: 1.48;
  color: var(--daylight-text);
}

.daylight-lamp-copy p + p {
  margin-top: 10px;
}

.daylight-lamp-lead strong {
  color: var(--daylight-text-strong);
  font-weight: 700;
}

.daylight-lamp-copy-body {
  min-width: 0;
}

/* Как .digital-colour-management-list / .acquire-color-compact-split-list: Linearicons .icon-check — \e934 */
.daylight-lamp-feature-list {
  margin: 16px 0 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
}

.daylight-lamp-feature-list li {
  position: relative;
  margin: 0 0 10px;
}

.daylight-lamp-feature-list li:last-child {
  margin-bottom: 0;
}

.daylight-lamp-feature-list li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: var(--daylight-accent);
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.daylight-lamp-feature-list li a::before {
  display: none;
}

@media (min-width: 1024px) {
  .daylight-lamp-copy-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 40px;
    align-items: start;
  }

  .daylight-lamp-copy-text {
    grid-column: 1;
    grid-row: 1;
  }

  .daylight-lamp-copy-body .daylight-lamp-feature-list {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
}

.daylight-lamp-video {
  padding: 18px 0 34px;
}

.daylight-lamp-tech {
  padding: 10px 0 0;
}

.daylight-lamp-tech-header {
  margin-bottom: 20px;
  text-align: center;
}

.daylight-lamp-page .section-block h2.daylight-lamp-tech-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--daylight-accent);
}

.daylight-lamp-tech-rule {
  width: 227px;
  max-width: min(227px, 46vw);
  margin: 10px auto 35px;
  border: 0;
  border-top: 2px solid var(--daylight-rule);
}

.daylight-lamp-spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
  gap: 28px 34px;
  align-items: center;
}

.daylight-lamp-spec-copy,
.daylight-lamp-spec-media {
  min-width: 0;
}

.daylight-lamp-page .section-block h3.daylight-lamp-section-subtitle {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--daylight-accent);
}

.daylight-lamp-table-wrap {
  overflow-x: auto;
}

.daylight-lamp-spec-table {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
  border-spacing: 0;
}

.daylight-lamp-spec-table th,
.daylight-lamp-spec-table td {
  padding: 10px 12px;
  background: var(--daylight-table-bg);
  font-size: 12px;
  line-height: 1.5;
  color: var(--daylight-text-strong);
  vertical-align: middle;
}

.daylight-lamp-spec-table tbody tr:nth-child(even) th,
.daylight-lamp-spec-table tbody tr:nth-child(even) td {
  background: #fff;
}

.daylight-lamp-spec-table th {
  width: 45%;
  font-weight: 700;
  text-align: left;
}

.daylight-lamp-spec-table td {
  font-weight: 400;
}

.daylight-lamp-spec-media {
  margin: 0;
}

.daylight-lamp-spec-media img {
  display: block;
  width: 100%;
  height: auto;
}

.daylight-lamp-divider {
  width: 227px;
  max-width: min(227px, 46vw);
  height: 0;
  margin: 34px auto 28px;
  border-top: 1px solid var(--daylight-rule);
}

.daylight-lamp-leaflet-sheet {
  margin-top: 0;
  padding-top: 30px;
  width: 100%;
  max-width: none;
}

.daylight-lamp-leaflet-sheet .catalog-product-sheet-icon {
  margin-top: 30px;
}

.daylight-lamp-leaflet-sheet .catalog-product-sheet-body {
  margin-top: 30px;
  justify-content: space-between;
  gap: 16px;
}

.daylight-lamp-leaflet-sheet .catalog-product-sheet-file-size {
  flex-shrink: 0;
  margin-left: auto;
  font-family: Lato, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #555;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .daylight-lamp-spec-row {
    grid-template-columns: 1fr;
  }

  .daylight-lamp-spec-table {
    max-width: 100%;
  }

  .daylight-lamp-spec-media {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .daylight-lamp-header {
    padding-top: 18px;
  }

  .daylight-lamp-page .daylight-lamp-header h1.daylight-lamp-hero-title,
  .daylight-lamp-page .section-block h2.daylight-lamp-tech-title {
    font-size: 26px;
  }

  .daylight-lamp-page .section-block h2.daylight-lamp-hero-subtitle {
    font-size: 22px;
  }

  .daylight-lamp-title-rule,
  .daylight-lamp-tech-rule {
    margin-bottom: 28px;
  }

  .daylight-lamp-copy p,
  .daylight-lamp-copy li {
    font-size: 14px;
    line-height: 1.45;
  }

  .daylight-lamp-video {
    padding-top: 10px;
    padding-bottom: 26px;
  }

  .daylight-lamp-page .section-block h3.daylight-lamp-section-subtitle {
    font-size: 18px;
  }

  .daylight-lamp-spec-table th,
  .daylight-lamp-spec-table td {
    font-size: 11px;
    padding: 9px 10px;
    line-height: 1.5;
  }

  .daylight-lamp-divider {
    margin: 28px auto 22px;
  }

  .daylight-lamp-leaflet-sheet {
    margin-top: 0;
    padding-top: 30px;
    width: 100%;
    max-width: none;
  }

  .daylight-lamp-leaflet-sheet .catalog-product-sheet-file-size {
    font-size: 12px;
  }
}
@font-face {
  font-family: "Linearicons-Free";
  src: url("./assets/fonts/Linearicons-Free.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Linearicons";
  src: url("./assets/fonts/Axalta-Linearicons.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Иконка PDF/Acrobat в блоках TDS/SDS — тот же глиф, что на cromax.com (.acrobat:before) */
@font-face {
  font-family: "Axalta";
  src: url("./assets/fonts/Axalta.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: "Lato", Arial, sans-serif;
  color: var(--dark);
  background: #fff;
  line-height: 1.5;
}

main {
  background: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

.container.footer-inner {
  width: min(var(--container-narrow), calc(100% - 48px));
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 12px 24px;
  min-height: 44px;
  transition: .2s ease;
}

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-primary:hover {
  background: #c9291b;
  border-color: #c9291b;
}

.btn-ghost {
  background: #fff;
  border-color: #d2d2d2;
  color: #333;
}

.btn-ghost.dark {
  background: transparent;
  border-color: #999;
}

.btn-outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-outline-light:hover {
  background: #fff;
  color: var(--red);
}

.btn-default {
  background: #fff;
  border-color: var(--red);
  color: var(--red);
}

.btn-default:hover {
  background: var(--red);
  color: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  padding: 0 30px 0;
  transition: box-shadow .24s ease, border-color .24s ease;
}

.axalta-ribbon {
  --axalta-ribbon-ease: cubic-bezier(0.32, 0.72, 0, 1);
  margin: 0 -30px;
  background: #000;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  opacity: 1;
  transition:
    grid-template-rows 0.55s var(--axalta-ribbon-ease),
    opacity 0.42s ease-out;
}

.site-header.is-ribbon-hidden .axalta-ribbon {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.axalta-ribbon-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 30px;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    transform 0.52s var(--axalta-ribbon-ease),
    opacity 0.38s ease-out;
}

.site-header.is-ribbon-hidden .axalta-ribbon-inner {
  transform: translateY(-10px);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .axalta-ribbon,
  .axalta-ribbon-inner {
    transition-duration: 0.01ms;
  }

  .site-header.is-ribbon-hidden .axalta-ribbon-inner {
    transform: none;
  }
}

.axalta-ribbon-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 28px;
  min-height: 48px;
  padding: 9px 0 11px;
  line-height: 0;
}

.axalta-ribbon-logo-link,
.axalta-ribbon-domain-link {
  color: #fff;
  text-decoration: none;
  cursor: default;
  flex-shrink: 0;
}

.axalta-ribbon-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.axalta-ribbon-logo-link:focus-visible,
.axalta-ribbon-domain-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.axalta-ribbon-domain-link {
  font-family: Lato, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: .025em;
  line-height: 1.2;
  transition: color 0.15s ease;
}

.axalta-ribbon-domain-link:hover,
.axalta-ribbon-domain-link:focus-visible,
.axalta-ribbon-domain-link:active {
  color: var(--red);
  text-decoration: none;
}

.axalta-ribbon-logo {
  display: block;
  height: 38px;
  width: auto;
}

.site-header.is-compact {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
  border-color: #ddd;
}

.site-header .header_wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-top: 23px;
}

.top-meta {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  min-height: 25px;
  padding: 0;
  font-size: 11px;
  color: #9b9b9b;
  font-weight: 200;
  letter-spacing: .37px;
  transition: min-height .24s ease, padding .24s ease, opacity .2s ease;
}

.brand-wrap {
  margin: 0;
  width: auto;
}

.ajaxLoader {
  width: calc(100% - 120px);
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.site-header.is-compact .top-meta {
  opacity: 1;
}

.top-meta.search-open .meta-link,
.top-meta.search-open .meta-icon {
  opacity: .2;
  pointer-events: none;
}

.top-meta.search-open .meta-link-user,
.top-meta.search-open .meta-link-worldwide {
  opacity: 1;
  pointer-events: auto;
}

.top-meta a:hover,
.search-toggle:hover {
  color: var(--red);
}

.search-toggle {
  border: 0;
  background: transparent;
  color: #9b9b9b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 0;
  margin: 0;
  font-weight: 200;
  line-height: 1;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.search-cluster:not(.open) .search-toggle {
  padding-left: 16px;
}

.search-cluster.open .search-toggle::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.search-cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  column-gap: 0;
  transition: transform .3s ease;
}

.search-cluster.open {
  transform: none;
  gap: 5px;
  column-gap: 5px;
}

.meta-label {
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .2s ease, visibility .2s ease;
}

.search-cluster.open .meta-label {
  display: none;
}

.search-cluster.open .search-toggle {
  padding-left: 0;
  gap: 0;
  margin: 0;
}

.meta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9b9b9b;
  line-height: 1;
  font-weight: 200;
  margin-left: 16px;
}

.meta-link-user {
  gap: 9px;
  font-weight: 600;
}

.meta-link-worldwide {
  font-weight: 600;
  margin-right: 12px;
}

.meta-worldwide-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  line-height: 1;
  color: #9b9b9b;
  font-family: "Linearicons-Free";
}

.meta-worldwide-icon::before {
  content: "\e853";
}

.meta-user-icon {
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: #a7a7a7;
}

.meta-round {
  width: 23px;
  height: 23px;
  border: 1.6px solid #9b9b9b;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9b9b9b;
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

.meta-round .icon-close {
  display: none;
  font-size: 14px;
}

.search-cluster.open .meta-round .icon-search {
  display: none;
}

.search-cluster.open .meta-round .icon-close {
  display: inline-block;
}

.meta-icon {
  width: 23px;
  height: 23px;
  border: 1.6px solid #9b9b9b;
  color: #9b9b9b;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-left: 9px;
  line-height: 1;
}

.search-toggle:hover .meta-round,
.meta-link:hover .meta-round,
.meta-icon:hover {
  border-color: var(--red);
  color: var(--red);
}

.search-box {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: width .3s ease, opacity .2s ease;
  z-index: 3;
}

.search-box.open {
  width: 332px;
  opacity: 1;
  pointer-events: auto;
}

.search-area-icon {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 23px;
  border: 1.6px solid var(--red);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.search-box.open .search-area-icon {
  opacity: 1;
}

.search-box input[type="search"]::-webkit-search-decoration,
.search-box input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  height: 0;
  width: 0;
}

.search-submit-round {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
  min-inline-size: unset;
}

.search-submit-round::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.search-cluster:not(.open) .search-submit-round {
  display: none;
}

.search-cluster.open .search-submit-round {
  display: inline-flex;
  align-items: center;
}

.search-submit-round .meta-round {
  cursor: pointer;
}

.search-submit-round:hover .meta-round,
.search-submit-round:focus-visible .meta-round {
  border-color: var(--red);
  color: var(--red);
}

.search-submit-round:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.search-submit-round .meta-round .fa-arrow-right {
  font-size: 11px;
}

.search-box input {
  width: 100%;
  border: 0;
  border-bottom: 0;
  background: transparent;
  border-radius: 0;
  padding: 5px 4px 3px 36px;
  font-size: 16px;
  font-weight: 200;
  color: #000;
  outline: none;
}

.search-box input::placeholder {
  color: #d2d2d2;
}

.main-nav-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  min-height: 60px;
  padding: 0;
  transition: min-height .24s ease, padding .24s ease;
  width: 100%;
  position: static;
}

.site-header.is-compact .main-nav-wrap {
  min-height: 60px;
  padding: 0;
}

.brand {
  width: 100px;
  flex-shrink: 0;
  transition: width .24s ease;
  margin-top: 10px;
  margin-bottom: -1px;
}

.brand img {
  margin-top: -10px;
}

.site-header.is-compact .brand {
  width: 94px;
}

.main-nav {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 19px;
  font-family: "Titillium Web", Arial, sans-serif;
  letter-spacing: .01em;
  color: #626266;
  margin-bottom: 0;
  position: relative;
}

.nav-item {
  position: static;
}

.nav-trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Titillium Web", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  position: relative;
  color: #626266;
  padding-bottom: 10px;
  height: 50px;
  display: inline-flex;
  align-items: flex-end;
  margin-left: 1.8055vw;
  font-weight: 700;
  letter-spacing: .01em;
}

.nav-item:first-child .nav-trigger {
  margin-left: 6px;
}

.nav-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--red);
  transition: width .2s ease;
}

.nav-trigger:hover,
.nav-item.is-open .nav-trigger {
  color: #626266;
}

.nav-trigger:hover::after,
.nav-item.is-open .nav-trigger::after {
  width: 100%;
}

.submenu-panel {
  position: fixed;
  top: var(--submenu-top, 95px);
  left: 0;
  right: 0;
  width: 100vw;
  transform: none;
  background: #fff;
  border-top: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  box-shadow: none;
  display: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 34px;
  padding: var(--submenu-pad-top, 0) 30px 0;
  z-index: var(--submenu-z, 8);
  overflow: visible;
}

.nav-item.is-open .submenu-panel {
  display: flex;
}

.submenu-panel a {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, sans-serif;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .01em;
  flex: 0 0 auto;
  white-space: nowrap;
}

.submenu-panel a:hover {
  color: #bf2a1c;
}

.submenu-panel > a {
  position: relative;
}

.submenu-panel > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--red);
  transition: width .2s ease;
}

.submenu-panel > a:hover::after,
.submenu-panel > a:active::after,
.submenu-panel > a:focus-visible::after {
  width: 100%;
}

.submenu-entry {
  position: relative;
  flex: 0 0 auto;
}

.submenu-entry-trigger {
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-size: 15px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, sans-serif;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.submenu-entry-trigger::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background: var(--red);
  transition: width .2s ease;
}

.submenu-entry-trigger::after {
  content: "\f078";
  font: var(--fa-font-solid);
  font-size: 10px;
  line-height: 1;
  flex-shrink: 0;
}

.submenu-entry.is-open .submenu-entry-trigger::after {
  content: "\f077";
}

.submenu-entry-trigger:hover::before,
.submenu-entry.is-open .submenu-entry-trigger::before {
  width: 100%;
}

.third-menu-panel {
  position: fixed;
  top: var(--thirdmenu-top, 146px);
  left: 0;
  right: 0;
  width: 100vw;
  min-width: 0;
  max-width: none;
  display: none;
  grid-template-columns: repeat(2, max-content);
  column-gap: 42px;
  row-gap: 0;
  align-content: start;
  justify-content: end;
  padding: 10px 34px 12px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #dcdcdc;
  z-index: 34;
  overflow: hidden;
}

.submenu-entry.is-open .third-menu-panel {
  display: grid;
}

.third-menu-panel a {
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, sans-serif;
  color: #5a5a5a;
  text-transform: none;
  letter-spacing: .01em;
  white-space: nowrap;
  flex: 0 0 auto;
}

.catalog-third-menu {
  /* Uses the shared third-level style. */
}

.single-column-third-menu {
  grid-template-columns: max-content;
  justify-content: end;
}

.submenu-entry.is-open .catalog-third-menu {
  display: grid;
}

.catalog-third-menu a {
  padding: 4px 0;
}

.third-menu-panel a:hover {
  color: #bf2a1c;
}

.mobile-menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #9b9b9b;
  padding: 0;
}

.mobile-menu-toggle .burger {
  position: relative;
  width: 28px;
  height: 20px;
  display: block;
}

.mobile-menu-toggle .burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: center;
  transition: transform .24s ease, opacity .2s ease;
}

.mobile-menu-toggle .line1 { top: 0; }
.mobile-menu-toggle .line2 { top: 9px; }
.mobile-menu-toggle .line3 { top: 18px; }

.mobile-menu-toggle .lineX1,
.mobile-menu-toggle .lineX2 {
  top: 9px;
  opacity: 0;
}

.mobile-menu-toggle .lineX1 { transform: rotate(45deg) scale(.85); }
.mobile-menu-toggle .lineX2 { transform: rotate(-45deg) scale(.85); }

.mobile-menu-toggle.is-open .line1,
.mobile-menu-toggle.is-open .line2,
.mobile-menu-toggle.is-open .line3 {
  opacity: 0;
}

.mobile-menu-toggle.is-open .lineX1,
.mobile-menu-toggle.is-open .lineX2 {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.mobile-menu-toggle.is-open .lineX1 {
  transform: rotate(45deg) scale(1);
}

.mobile-menu-toggle.is-open .lineX2 {
  transform: rotate(-45deg) scale(1);
}

.hero-slider {
  position: relative;
  overflow: hidden;
}

/* Match the spacer block used above the first stage on cromax.com. */
.stageWrapper.component {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  background-color: #fff;
}

.stageWrapper.component .component.textComponent p {
  font-size: 15px;
  line-height: 22px;
  margin: 0 0 10px;
}

.stageWrapper.component .text.parbase.section .component.textComponent p:last-child {
  margin-bottom: 5px;
}

.hero-slide {
  display: none;
  min-height: 560px;
  grid-template-columns: 36% 64%;
}

.hero-slide.is-active {
  display: grid;
}

.hero-text-panel {
  background: var(--red);
  color: #fff;
  padding: 64px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-text-panel h2 {
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(31px, 3vw, 46px);
  line-height: 1.12;
  margin: 0 0 28px;
}

.hero-text-panel .btn-primary {
  border-radius: 3px;
  border-width: 2px;
}

@media (min-width: 1101px) {
  .hero-text-panel {
    align-items: center;
    text-align: center;
  }

  .hero-text-panel h2 {
    font-size: clamp(20px, 1.37vw, 24px);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: .01em;
  }

  .hero-text-panel .btn-primary {
    background: transparent;
    border-color: #fff;
    color: #fff;
    min-width: 140px;
  }

  .hero-text-panel .btn-primary:hover {
    background: #fff;
    color: var(--red);
    border-color: #fff;
  }
}

/* Как на cromax.com: светлая панель + диагональный разрез снимка (1000–1200px). */
@media (min-width: 1000px) and (max-width: 1200px) {
  .hero-slide.is-active {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(520px, 580px);
    min-height: 520px;
  }

  .hero-slide {
    min-height: 520px;
  }

  .hero-text-panel,
  .hero-media {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }

  .hero-media {
    order: 0;
    margin: 0;
    line-height: 0;
    z-index: 1;
  }

  .hero-media img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    object-position: center;
    clip-path: polygon(45% 0, 100% 0, 100% 100%, 62% 100%);
  }

  .hero-text-panel {
    order: 0;
    z-index: 2;
    background: #fff;
    color: var(--red);
    text-align: left;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(40px, 6.5vh, 68px) clamp(24px, 3.5vw, 48px) clamp(40px, 6.5vh, 68px) clamp(28px, 4vw, 56px);
    margin: 0;
    min-height: 0;
    clip-path: polygon(0 0, 45% 0, 62% 100%, 0 100%);
  }

  .hero-text-panel h2 {
    color: var(--red);
    font-family: "Titillium Web", Arial, sans-serif;
    font-size: clamp(22px, 2.35vw, 28px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 clamp(18px, 2.8vh, 26px);
    max-width: min(380px, 34vw);
    text-align: left;
  }

  .hero-text-panel .btn-primary {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    min-width: 148px;
    border-radius: 3px;
  }

  .hero-text-panel .btn-primary:hover {
    background: #c9291b;
    border-color: #c9291b;
    color: #fff;
  }

  .slider-dots button {
    background: rgba(255, 255, 255, 0.6);
  }

  .slider-dots button.active {
    background: #fff;
  }

  /* Высокие «полосы» с стрелками по краям, по высоте слайда (под оригинал Cromax). */
  .hero-slider .slider-control {
    top: 59px;
    bottom: 0;
    height: auto;
    transform: none;
    width: clamp(42px, 4.2vw, 56px);
    border-radius: 0;
    z-index: 4;
  }

  .hero-slider .slider-control.prev {
    left: 0;
  }

  .hero-slider .slider-control.next {
    right: 0;
  }

  .hero-slider .slider-control i {
    font-size: clamp(15px, 1.55vw, 20px);
  }
}

.hero-media img {
  height: 100%;
  object-fit: cover;
}

.slider-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .5);
  color: var(--red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.slider-control:hover,
.slider-control:active {
  background: rgba(230, 52, 35, .5);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}

.slider-control:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.slider-control i {
  font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .hero-slider .slider-control {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  .hero-slider:hover .slider-control,
  .hero-slider .slider-control:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Диапазон героя: стрелки всегда видны (как на cromax.com), не только по hover. */
@media (min-width: 1000px) and (max-width: 1200px) {
  .hero-slider .slider-control {
    opacity: 1;
    pointer-events: auto;
    display: inline-flex;
  }
}

/* Только чистый тач без hover (телефоны); иначе на ПК с «coarse» из‑за тачпада/экрана стрелки пропадали. */
@media (hover: none) and (pointer: coarse) {
  .hero-slider .slider-control {
    display: none;
  }
}

.slider-control.prev { left: 16px; }
.slider-control.next { right: 16px; }

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--slider-dot-gap);
}

.slider-dots button {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  cursor: pointer;
}

.slider-dots button.active {
  background: #fff;
}

.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--gray-200);
}

.quick-link {
  min-height: 112px;
  padding: 46px 20px 14px;
  border-right: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--red);
  text-transform: uppercase;
}

.quick-link:last-child {
  border-right: 0;
}

.quick-link-icon {
  width: 64px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 50px;
  line-height: 1;
  font-family: "Linearicons";
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sync::before {
  content: "\e8da";
}

.icon-files::before {
  content: "\e904";
}

.icon-papers::before {
  content: "\e905";
}

.quick-link > span:not(.quick-link-icon) {
  font-size: 17px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, sans-serif;
  letter-spacing: .02em;
  line-height: 1.15;
  white-space: nowrap;
}

.quick-link:hover {
  color: #c9291b;
}

.feature-ctas {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.feature-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: stretch;
  border: 0;
  background: transparent;
  color: inherit;
}

.feature-cta-card.is-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
}

.feature-cta-card.is-reverse .feature-cta-copy {
  order: 1;
}

.feature-cta-card.is-reverse .feature-cta-media {
  order: 2;
}

.feature-cta-media {
  min-height: 100%;
}

.feature-cta-media img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.feature-cta-copy {
  padding: clamp(24px, 3vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--red);
  color: #fff;
}

.feature-cta-copy h3 {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 700;
  text-transform: uppercase;
}

.feature-cta-copy p {
  margin: 14px 0 30px;
  font-size: clamp(16px, 1.2vw, 21px);
  line-height: 1.3;
  color: #fff;
}

.feature-cta-copy .btn {
  min-width: 140px;
  min-height: 44px;
  padding: 12px 24px;
  border-width: 2px;
  border-radius: 3px;
  border-color: #fff;
  background: transparent;
  color: #fff;
  font-size: 14px;
  letter-spacing: .02em;
  pointer-events: auto;
}

.feature-cta-copy .btn:hover,
.feature-cta-copy .btn:active {
  background: #fff;
  color: var(--red);
  border-color: #fff;
}

.dual-teasers,
.grid-3,
.grid-2 {
  display: grid;
  gap: 22px;
}

.dual-teasers {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 28px;
}

/* Секция на белом фоне main; сами плитки — светло-серые */
.media-teaser {
  background: #f0f0f0;
  padding: 29px 30px 30px;
}

.teaser-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.teaser-img {
  margin-bottom: 10px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.teaser-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser-text h3 {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 18pt;
  line-height: 1.28;
  font-weight: 700;
  color: #c82127;
}

.teaser-text p {
  margin: 10px 0 0;
  color: #1e1e1e;
  font-size: 15px;
  line-height: 1.5;
}

.teaser-text .linktext {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding-left: 25px;
  font-size: 14px;
  font-weight: 400;
  color: #959595;
  transition: color .2s ease;
}

.teaser-card:hover .linktext,
.teaser-card:focus-visible .linktext {
  color: #c82127;
}

.icon-arrow-right {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  font-size: 14px;
  line-height: 1.45;
  font-family: "Linearicons";
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right::before {
  content: "\e944";
}

.color-year {
  margin-top: 40px;
  background: #f0f0f0;
  color: #3d3d3d;
}

.color-year-inner {
  padding: 68px 52px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 54px;
}

.color-year-video {
  margin: 0;
}

.color-year-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.color-year-copy {
  --copy-side-pad: 40px;
  text-align: center;
}

.color-year-copy h2 {
  margin: 0 auto 14px;
  font-family: "Titillium Web", Arial, sans-serif;
  color: var(--red);
  font-size: 20px;
  line-height: 1.12;
  font-weight: 700;
  max-width: calc(100% - (var(--copy-side-pad) * 2));
  text-transform: none;
  letter-spacing: normal;
}

.color-year-description {
  margin: 0 0 20px;
  padding: 13px var(--copy-side-pad);
  background: transparent;
  border: 0;
}

.color-year-description p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4b4b;
  text-align: justify;
  text-justify: inter-word;
}

.section-block {
  padding: 58px 0;
}

.products-showcase {
  background: #555557;
}

.products-showcase .section-block {
  padding: 70px 0 74px;
}

.products-showcase + .products-showcase .section-block {
  padding-top: 0;
}

.products-showcase h2 {
  margin: 0 0 54px;
  text-align: center;
  color: #fff;
  font-size: clamp(34px, 2.5vw, 46px);
  line-height: 1.05;
}

.products-grid {
  gap: 46px 58px;
}

.product-tile {
  display: block;
  color: #fff;
}

.product-tile img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.products-showcase--systems .product-systems-slider-track .product-tile img {
  box-sizing: border-box;
  padding-left: 35px;
  padding-right: 35px;
}

.product-tile h3 {
  margin: 9px 0 0;
  padding: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.06;
  text-transform: uppercase;
  color: #fff;
}

.products-showcase--systems .product-systems-slider-track .product-tile h3 {
  margin-left: 50px;
}

.section-block h2 {
  margin: 0 0 22px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(34px, 2.2vw, 38px);
  line-height: 1.2;
  text-transform: uppercase;
}

.audurra h2 {
  margin: 0 0 18px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(26px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--red);
  letter-spacing: .02em;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.product-systems-slider-outer {
  position: relative;
}

.product-systems-slider-viewport {
  position: relative;
}

@media (min-width: 768px) {
  .products-showcase--systems .product-systems-slider-viewport .slider-control {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .products-showcase--systems .product-systems-slider-viewport .slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .products-showcase--systems .product-systems-slider-viewport .slider-control.prev {
    left: calc(50px + env(safe-area-inset-left, 0px));
  }

  .products-showcase--systems .product-systems-slider-viewport .slider-control.next {
    right: calc(50px + env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
  .products-showcase--systems .product-systems-slider-outer .slider-control {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .products-showcase--systems .product-systems-slider-outer:hover .slider-control,
  .products-showcase--systems .product-systems-slider-outer .slider-control:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
  .products-showcase--systems .product-systems-slider-outer .slider-control {
    display: none;
  }
}

.product-systems-slider-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap);
  margin-top: 22px;
}

.product-systems-slider-dots[hidden] {
  display: none !important;
}

.product-systems-slider-dots button {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.product-systems-slider-dots button.active {
  background: #fff;
}

.product-systems-slider-dots button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.image-card {
  border: 1px solid var(--gray-200);
  background: #fff;
}

.image-card h3 {
  margin: 0;
  padding: 16px 18px 20px;
  font-size: 23px;
  line-height: 1.3;
  font-family: "Titillium Web", Arial, sans-serif;
  text-transform: uppercase;
}

/* Блок обучения: как на cromax.com — насыщенный красный фон, крупная белая типографика */
.trainings {
  background: #e63e26;
  color: #fff;
}

.trainings-inner {
  padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 96px);
}

.trainings-hero-title {
  margin: 0 0 clamp(36px, 5vw, 52px);
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.training-panels {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5.5vw, 72px);
}

/* Текст ~55%, изображение ~45% (видео или коллаж) */
.training-row {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.training-row--mirror {
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
}

.training-copy {
  min-width: 0;
}

.training-row .training-lead,
.training-row--mirror .training-lead {
  max-width: none;
}

.training-heading {
  margin: 0 0 clamp(14px, 2vw, 20px);
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(22px, 2.35vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

/* Две строки: «Приступаем к работе» / «Учебный канал» */
.training-heading--channel {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}

.training-heading--channel .training-heading-line {
  display: block;
}

/* Заголовок блока «кузовной сервис / новый уровень» — крупнее, как на оригинале (~32–36px) */
.training-row--mirror .training-heading {
  font-size: clamp(24px, 2.65vw, 36px);
  line-height: 1.08;
}

.training-lead {
  margin: 0;
  max-width: 38em;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.96);
}

.training-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: clamp(18px, 2.5vw, 26px);
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.training-cta-arrow {
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  transform: translateY(-2px);
}

.training-cta-text {
  line-height: inherit;
}

.training-cta:hover,
.training-cta:focus-visible {
  color: #3d3d3d;
  text-decoration: none;
}

.training-video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
}

.training-video-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: top;
}

.training-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 12vw, 88px);
  height: clamp(64px, 12vw, 88px);
  border-radius: 50%;
  background: #e63e26;
  color: #fff;
  font-size: clamp(22px, 4vw, 30px);
  padding-left: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Один коллаж 2×2 с белыми разделителями (как на cromax.com), без сборки из четырёх отдельных кропов */
.training-mosaic {
  width: 100%;
  line-height: 0;
}

.training-mosaic img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.split-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}

.feature-copy {
  border: 1px solid var(--gray-200);
  padding: 24px;
}

.feature-copy h3 {
  margin-top: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  text-transform: uppercase;
}

.feature-copy .btn {
  margin-right: 10px;
  margin-bottom: 10px;
}

.digital-color-tools h2 {
  margin-bottom: 60px;
  font-size: 26px;
  color: var(--red);
  text-align: center;
}

.digital-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: stretch;
  margin-bottom: 24px;
}

.digital-lead-media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
}

.digital-lead-copy {
  background: var(--red);
  color: #fff;
  padding: clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.digital-lead-copy h3 {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.3;
}

.digital-lead-copy p {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 22px;
}

.digital-lead-copy .btn {
  border-width: 2px;
  border-radius: 3px;
  align-self: center;
}

.digital-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.digital-tool-card {
  display: block;
}

.digital-tool-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.digital-tool-card h3 {
  margin: 10px 0 0;
  font-family: "Titillium Web", Arial, sans-serif;
  text-transform: uppercase;
  color: #c82127;
  font-size: 22px;
  line-height: 1.06;
}

.digital-tools-btn {
  display: flex;
  width: fit-content;
  margin-top: 28px;
  margin-left: auto;
  margin-right: auto;
  min-width: 160px;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 11px 20px;
  border-radius: 3px;
}

.drivus {
  background: #fff;
  padding: 56px 0 64px;
}

.drivus-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drivus-title {
  margin: 0 0 16px;
  padding: 0 12px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--red);
}

.drivus-inner {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 32px;
}

.drivus-copy {
  color: var(--dark);
}

.drivus-copy p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 36em;
}

.drivus-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.drivus-benefits li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 1.35em;
  font-size: 15px;
  line-height: 1.45;
}

.drivus-benefits li:last-child {
  margin-bottom: 0;
}

.drivus-benefits li::before {
  content: "вњ“";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--red);
  font-weight: 700;
  line-height: 1;
}

.drivus-media img {
  width: 100%;
  height: auto;
  display: block;
}

.drivus-cta-wrap {
  margin: 8px 0 0;
  text-align: center;
}

.btn-drivus {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 28px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.audurra {
  background: #fff;
  color: var(--dark);
}

.audurra-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 56px 0 64px;
}

.audurra-visual {
  width: 100%;
  min-width: 0;
}

.audurra-hero-img {
  width: 100%;
  height: auto;
}

.audurra-copy {
  width: 100%;
  max-width: 420px;
  text-align: center;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .audurra-inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    column-gap: 48px;
    row-gap: 0;
  }

  .audurra-visual {
    max-width: none;
    width: 100%;
  }

  .audurra-copy {
    max-width: none;
    width: auto;
    margin-inline: 0;
    justify-self: stretch;
  }

  .audurra-copy p {
    max-width: none;
  }
}

.audurra-copy p {
  margin: 0 0 22px;
  color: var(--gray-500);
  font-size: 16px;
  line-height: 1.55;
  max-width: 360px;
  margin-inline: auto;
}

.audurra-cta {
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 13px;
  padding: 13px 26px 14px;
  border-radius: 0;
}

/* Подвал в стиле cromax.com: серый фон, белый текст, колонки меню */
.site-footer {
  background: #b0b3b8;
  color: #fff;
  padding: 40px 0 48px;
  margin-top: 0;
  border-top: none;
  font-family: Arial, Helvetica, "Lato", sans-serif;
}

/* Пункты меню и заголовки колонок: без подчёркивания, при наведении/нажатии — красный */
.footer-col-list a:hover,
.footer-col-list a:focus-visible,
.footer-col-list a:active,
.footer-secondary-list a:hover,
.footer-secondary-list a:focus-visible,
.footer-secondary-list a:active,
.footer-col-title a:hover,
.footer-col-title a:focus-visible,
.footer-col-title a:active {
  color: var(--red);
  text-decoration: none;
}

.footer-col-list a:focus-visible,
.footer-secondary-list a:focus-visible,
.footer-col-title a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Остальные ссылки подвала (политика, логотип Axalta) */
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible,
.footer-logo-axalta:hover,
.footer-logo-axalta:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-links a,
.footer-logo-axalta {
  text-decoration: none;
}

.site-footer img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.footer-inner {
  color: #fff;
  font-size: 14px;
}

.footer-rule {
  height: 0;
  border: 0;
  border-top: 1px solid #6d6f73;
  margin: 0 0 28px;
}

.footer-columns-grid + .footer-rule {
  margin: 32px 0 24px;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}

.footer-col-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.footer-col-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #fff;
}

.footer-col-title a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.footer-col-list,
.footer-secondary-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Одинаковый шаг между пунктами всех меню подвала (в 1,5× плотнее прежних 10px) */
.footer-col-list li + li,
.footer-secondary-list li + li {
  margin-top: calc(10px / 1.5);
}

.footer-col-list a {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
}

.footer-secondary-list a {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: #fff;
  text-decoration: none;
}

.footer-contact-link {
  display: block;
  color: #4e5158;
  text-decoration: none;
}

.footer-contact-link .footer-col-title {
  color: inherit;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible,
.footer-contact-link:active {
  color: var(--red);
  text-decoration: none;
}

.footer-contact-link:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.footer-col--contact .footer-contact-name {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: inherit;
}

.footer-address {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}

.footer-contact-link .footer-address {
  color: inherit;
}

.footer-legal {
  padding-bottom: 8px;
}

.footer-trademark {
  margin: 0 0 16px;
  max-width: 920px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 28px;
  font-size: 12px;
  font-weight: 400;
}

.footer-legal-links a {
  color: #fff;
  text-transform: none;
  letter-spacing: 0.01em;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
}

.footer-logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px 32px;
}

.footer-logo-axalta {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer-logo-axalta img {
  height: 46px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .footer-columns-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-col--contact {
    grid-column: 1 / -1;
  }
}

/* Мобильная вёрстка: в подвале только блок «Контакты» (с той же точкой, что и выездное меню) */
@media (max-width: 767px) {
  .footer-columns-grid > .footer-col-stack,
  .footer-columns-grid > nav.footer-col {
    display: none;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col--contact {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .site-footer {
    padding: 32px 0 40px;
  }

  .footer-columns-grid {
    gap: 24px;
  }

  .footer-logos-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Cookie consent (локальная замена OneTrust; id как на axalta.com для сходства разметки) --- */
#onetrust-consent-sdk {
  position: fixed;
  z-index: 38;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  pointer-events: none;
  font-family: Lato, system-ui, sans-serif;
}

@media (min-width: 768px) {
  #onetrust-consent-sdk {
    top: 96px;
    bottom: auto;
  }
}

#onetrust-banner-sdk {
  pointer-events: auto;
  max-width: 680px;
  margin: 0 auto 20px;
  padding: 0 16px;
}

#onetrust-banner-sdk .ot-sdk-container {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
  padding: 22px 44px 18px 24px;
  position: relative;
}

#onetrust-banner-sdk .ot-sdk-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#onetrust-group-container {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  color: #333;
  margin: 0;
  padding: 0;
}

#onetrust-group-container a {
  color: #a63d2d;
  text-decoration: underline;
  font-weight: 700;
}

#onetrust-group-container a:hover {
  color: var(--red);
}

#onetrust-button-group-parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#onetrust-button-group-parent .cookie-banner-btn-pref {
  order: -1;
}

@media (min-width: 640px) {
  #onetrust-button-group-parent {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  #onetrust-button-group-parent .cookie-banner-btn-pref {
    order: 0;
  }
}

.cookie-banner-btn-pref.btn {
  background: #fff;
  border: 1px solid #222;
  color: #222;
  font-weight: 700;
  white-space: normal;
  text-align: center;
}

.cookie-banner-btn-pref.btn:hover {
  background: #f7f7f7;
}

.cookie-banner-btn-reject.btn {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  white-space: normal;
  text-align: center;
}

.cookie-banner-btn-reject.btn:hover {
  background: #c9291b;
  border-color: #c9291b;
}

.cookie-banner-btn-accept.btn {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  white-space: normal;
  text-align: center;
}

.cookie-banner-btn-accept.btn:hover {
  background: #c9291b;
  border-color: #c9291b;
}

.cookie-banner-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #505050;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.cookie-banner-close:hover {
  color: #222;
}

.cookie-banner-close:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.cookie-preferences-panel {
  margin-top: 4px;
  padding: 14px 16px;
  background: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.cookie-preferences-panel[hidden] {
  display: none !important;
}

.cookie-pref-field {
  margin-bottom: 12px;
}

.cookie-pref-field:last-child {
  margin-bottom: 0;
}

.cookie-pref-field label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 600;
}

.cookie-pref-field input:disabled + span {
  opacity: .65;
  cursor: default;
}

.cookie-pref-hint {
  display: block;
  margin-top: 4px;
  margin-left: 28px;
  font-weight: 400;
  font-size: 13px;
  color: #666;
  line-height: 1.35;
}

.cookie-pref-actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 520px) {
  #onetrust-banner-sdk .ot-sdk-container {
    padding-right: 40px;
  }

  #onetrust-button-group-parent {
    flex-direction: column;
    align-items: stretch;
  }

  #onetrust-button-group-parent .btn {
    width: 100%;
  }
}

.external-link-disclaimer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .52);
  display: none;
  place-items: center;
  z-index: 40;
}

.external-link-disclaimer.show {
  display: grid;
}

/* Как кнопка «ПОДРОБНЕЕ» в .hero-text-panel: .btn-primary + скругление и обводка слайдера. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 3px;
  border-width: 2px;
  border-color: #fff;
  /* Прозрачность только заливки; opacity элемента зарезервировано под появление по скроллу (.is-visible). */
  background: rgba(230, 52, 35, .5);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  z-index: 36;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: #fff;
  /* ~10% прозрачности (alpha 0.9), контрастнее при наведении */
  background: rgba(201, 41, 27, .9);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.disclaimer-card {
  width: min(500px, calc(100% - 28px));
  background: #fff;
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}

.disclaimer-card img {
  width: 120px;
  margin: 0 auto 12px;
}

.disclaimer-card .disclaimer-card-title {
  font-family: var(--font-alt, 'Titillium Web', Arial, Helvetica, sans-serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  color: inherit;
}

.disclaimer-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .site-header {
    padding: 0 16px;
  }

  .axalta-ribbon {
    margin: 0 -16px;
  }

  .axalta-ribbon-inner {
    padding: 0 16px;
  }

  .site-header .header_wrapper {
    padding-top: 14px;
  }

  .ajaxLoader {
    width: calc(100% - 100px);
  }

  .main-nav {
    font-size: 17px;
  }

  .nav-trigger {
    font-size: 17px;
    margin-left: 1.2vw;
  }
}

@media (max-width: 767px) {
  .hero-slide {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .hero-media {
    order: 1;
    margin: 0;
    line-height: 0;
  }

  .hero-text-panel {
    order: 2;
    background: #fff;
    color: var(--red);
    text-align: center;
    align-items: center;
    justify-content: space-between;
    padding: 44px 24px 54px;
    margin: 0;
    min-height: 250px;
  }

  .hero-text-panel h2 {
    color: var(--red);
    font-size: clamp(24px, 4.5vw, 36px);
    line-height: 1.18;
    font-weight: 700;
    margin: 0;
    max-width: 800px;
  }

  .hero-text-panel .btn {
    min-height: 40px;
    padding: 10px 28px;
    font-size: 12px;
    letter-spacing: .05em;
    margin-top: auto;
  }

  .slider-dots button {
    background: rgba(230, 52, 35, 0.35);
  }

  .slider-dots button.active {
    background: var(--red);
  }

  .color-year-inner {
    padding: 44px 22px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .color-year-copy h2 {
    font-size: 20px;
  }

  .color-year-description p {
    font-size: 14px;
    line-height: 1.58;
  }

  .color-year-description {
    padding: 9px var(--copy-side-pad);
    margin-bottom: 17px;
  }

  .color-year-copy {
    --copy-side-pad: 36px;
  }
}

/* max-width должен совпадать с --slider-mobile-max и SLIDER_CONFIG.mobileMaxWidthPx в script.js */
@media (max-width: 767px) {
  .site-header {
    padding: 0 16px;
    min-height: 60px;
  }

  .axalta-ribbon-brand {
    min-height: 29px;
    padding: 5px 0 6px;
    gap: 13px;
  }

  .axalta-ribbon-domain-link {
    font-size: 10px;
    letter-spacing: 0.03em;
  }

  .axalta-ribbon-logo {
    height: 21px;
  }

  .site-header .header_wrapper {
    align-items: center;
    min-height: 60px;
    padding-top: 0;
  }

  .ajaxLoader {
    width: calc(100% - 90px);
  }

  .brand {
    width: 78px;
    display: inline-flex;
    align-items: center;
    height: 60px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .brand img {
    width: auto;
    height: 61px;
    margin-top: 0;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .top-meta {
    min-height: 60px;
  }

  .main-nav-wrap {
    width: auto;
    min-height: 60px;
    padding: 0;
    gap: 0;
    align-items: center;
    position: relative;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    color: #8c8c8c;
    line-height: 1;
    padding: 0;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(17, 17, 17, 0.38);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-backdrop[hidden] {
    display: none !important;
  }

  html.nav-mobile-open,
  body.nav-mobile-open {
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
  }

  .main-nav {
    position: fixed;
    top: var(--mobile-nav-top, 60px);
    left: 0;
    right: 0;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 0;
    display: none;
    padding: 0;
    box-shadow: none;
    border-top: 0;
    z-index: 28;
    isolation: isolate;
  }

  .main-nav.open {
    display: block;
    height: calc(100dvh - var(--mobile-nav-top, 60px));
    max-height: calc(100dvh - var(--mobile-nav-top, 60px));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 80, 80, 0.45) rgba(0, 0, 0, 0.06);
  }

  .main-nav.open::-webkit-scrollbar {
    width: 10px;
  }

  .main-nav.open::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
  }

  .main-nav.open::-webkit-scrollbar-thumb {
    background-color: rgba(80, 80, 80, 0.45);
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, 0.06);
  }

  .main-nav,
  .nav-trigger,
  .submenu-panel a {
    font-size: 18px;
  }

  .nav-item:first-child .nav-trigger {
    margin-left: 0;
  }

  .nav-trigger {
    width: 100%;
    justify-content: space-between;
    height: auto;
    margin-left: 0;
    padding: 14px 14px 14px 18px;
    border-bottom: 1px solid rgba(230, 52, 35, .32);
    color: var(--red);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .015em;
    display: flex;
    align-items: center;
  }

  .nav-trigger::after {
    content: "+";
    display: inline-block;
    position: static;
    width: auto;
    height: auto;
    background: none;
    font-family: "Lato", Arial, sans-serif;
    font-size: clamp(20px, 4.4vw, 32px);
    font-weight: 300;
    color: #505050;
    line-height: 1;
    margin-left: auto;
    margin-right: 2px;
    flex: 0 0 auto;
  }

  .nav-trigger::before {
    content: none;
  }

  .nav-item.is-open .nav-trigger::after {
    content: "в€’";
  }

  /* Prevent desktop underline hover rule from shifting mobile +/- icon. */
  .nav-trigger:hover::after,
  .nav-item.is-open .nav-trigger::after {
    width: auto;
    min-width: 1ch;
    text-align: right;
  }

  .submenu-panel {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    transform: none;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid rgba(230, 52, 35, .28);
    background: #fff;
    padding: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .nav-item.is-open .submenu-panel {
    display: block;
  }

  .submenu-panel a,
  .submenu-entry-trigger {
    display: block;
    width: 100%;
    padding: 8px 14px 8px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: "Titillium Web", Arial, sans-serif;
    color: #4f4f5b;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
  }

  .submenu-entry {
    width: 100%;
  }

  .submenu-entry-trigger {
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding-right: 34px;
  }

  .submenu-entry-trigger::before {
    content: none;
  }

  .submenu-panel > a::after {
    content: none;
  }

  .submenu-entry-trigger::after {
    content: "+";
    font-family: "Lato", Arial, sans-serif;
    font-size: clamp(14px, 3.5vw, 22px);
    font-weight: 300;
    color: #505050;
    line-height: 1;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }

  .submenu-entry.is-open .submenu-entry-trigger::after {
    content: "в€’";
  }

  .third-menu-panel {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    display: none;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    box-shadow: none;
    border: 0;
    border-top: 1px solid rgba(230, 52, 35, .28);
    background: #fff;
    padding: 0 0 0 10px;
    justify-content: stretch;
    align-content: stretch;
    transform: none;
    z-index: auto;
  }

  .catalog-third-menu {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    display: none;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    justify-content: stretch;
    padding: 0 0 0 10px;
    background: #fff;
    border: 0;
    z-index: auto;
  }

  .submenu-entry.is-open .third-menu-panel {
    display: grid;
  }

  .catalog-third-menu a {
    display: block;
    width: 100%;
    padding: 8px 14px 8px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: "Titillium Web", Arial, sans-serif;
    color: #4f4f5b;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
  }

  .third-menu-panel a {
    display: block;
    width: 100%;
    padding: 8px 14px 8px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: "Titillium Web", Arial, sans-serif;
    color: #4f4f5b;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.2;
  }

  .quick-links,
  .feature-cta-card,
  .dual-teasers,
  .products-grid,
  .grid-3,
  .grid-2,
  .digital-lead,
  .digital-tools-grid,
  .split-feature,
  .drivus-inner {
    grid-template-columns: 1fr;
  }

  .media-teaser {
    padding: 22px 18px 24px;
  }

  .feature-cta-card.is-reverse {
    grid-template-columns: 1fr;
  }

  .quick-link {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--gray-200);
    justify-content: flex-start;
    padding: 17px 18px 7px;
  }

  .quick-link-icon {
    min-height: 0;
  }

  .quick-link:last-child {
    border-bottom: 0;
  }

  .feature-cta-media img {
    min-height: 0;
  }

  .feature-cta-card.is-reverse .feature-cta-media {
    order: 1;
  }

  .feature-cta-card.is-reverse .feature-cta-copy {
    order: 2;
  }

  .digital-lead-copy {
    align-items: center;
    text-align: center;
  }

  .digital-lead-copy h3 {
    font-size: 20px;
  }

  .digital-lead-copy p {
    font-size: 15px;
  }

  .drivus {
    padding: 44px 0 52px;
  }

  .drivus-layout {
    gap: 0;
  }

  .drivus-title {
    margin-bottom: 12px;
  }

  .drivus-inner {
    gap: 22px;
    margin-bottom: 24px;
  }

  .drivus-copy p {
    max-width: none;
  }

  .products-showcase .section-block {
    padding: 48px 0 52px;
  }

  .trainings-inner {
    padding: 44px 0 52px;
  }

  .trainings-hero-title {
    margin-bottom: 28px;
    font-size: clamp(30px, 8vw, 42px);
  }

  .training-panels {
    gap: 40px;
  }

  .training-row,
  .training-row--mirror {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .training-heading {
    font-size: clamp(19px, 5.2vw, 26px);
  }

  .training-lead {
    font-size: 15px;
  }

  .products-showcase h2 {
    margin-bottom: 30px;
    font-size: clamp(26px, 7.6vw, 34px);
    line-height: 1.1;
  }

  .product-tile h3 {
    font-size: clamp(24px, 6.2vw, 32px);
  }

  .products-showcase--systems .product-systems-slider-outer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .products-showcase--systems .product-systems-slider-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    box-sizing: border-box;
  }

  .products-showcase--systems .product-systems-slider-track::-webkit-scrollbar {
    display: none;
  }

  .products-showcase--systems .product-systems-slider-track .product-tile {
    flex: 0 0 100%;
    min-width: 0;
    max-width: none;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
  }

  .products-showcase--systems .product-systems-slider-track .product-tile img {
    width: 100%;
  }

  /* Подпись под слайдом: ~40% меньше мобильного .product-tile h3 */
  .products-showcase--systems .product-systems-slider-track .product-tile h3 {
    padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    margin-top: 30px;
    font-size: clamp(14px, 3.72vw, 19px);
    line-height: 1.12;
  }

  .top-meta {
    gap: 10px;
    min-height: 60px;
  }

  .top-meta .meta-icon {
    display: none;
  }

  .top-meta .meta-link {
    margin-left: 0;
  }

  .top-meta .meta-link-user,
  .top-meta .meta-link-worldwide {
    font-size: 0;
    line-height: 0;
  }

  .top-meta .meta-link-user .meta-user-icon,
  .top-meta .meta-link-worldwide .meta-worldwide-icon {
    font-size: 20px;
    line-height: 1;
  }

  .top-meta.search-open .search-box.open {
    width: 28vw;
    max-width: 170px;
  }

  .search-toggle .meta-label {
    display: none;
  }

  .search-box {
    right: 100%;
  }

  .search-box.open {
    width: min(50vw, 220px);
  }
}

/* Планшеты: держим desktop-header и обычные размеры шрифтов, не мобильное меню. */
@media (min-width: 768px) and (max-width: 1199px) {
  .site-header {
    padding: 0 16px;
    min-height: 0;
  }

  .site-header .header_wrapper {
    align-items: flex-start;
    justify-content: space-between;
    min-height: 0;
    padding-top: 14px;
  }

  .ajaxLoader {
    width: calc(100% - 100px);
  }

  .brand {
    width: 82px;
    height: auto;
    margin-top: 10px;
    margin-bottom: -1px;
  }

  .brand img {
    width: 100%;
    height: auto;
    margin-top: -10px;
  }

  .nav {
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .top-meta {
    min-height: 25px;
    gap: 0;
    font-size: 10px;
    line-height: 1;
  }

  .top-meta .meta-icon {
    display: inline-flex;
  }

  .top-meta .meta-link {
    margin-left: 10px;
    font-size: inherit;
    line-height: 1;
  }

  .top-meta .meta-link-user,
  .top-meta .meta-link-worldwide {
    font-size: inherit;
    line-height: 1;
  }

  .top-meta .meta-link-worldwide {
    margin-right: 8px;
  }

  .search-toggle {
    font-size: 10px;
  }

  .meta-round,
  .meta-icon,
  .meta-user-icon,
  .meta-worldwide-icon {
    width: 20px;
    height: 20px;
  }

  .meta-worldwide-icon {
    font-size: 18px;
  }

  .meta-user-icon {
    font-size: 17px;
  }

  .meta-icon {
    font-size: 10px;
    margin-left: 6px;
  }

  .main-nav-wrap {
    width: 100%;
    min-height: 52px;
    align-items: flex-end;
    justify-content: flex-end;
    position: static;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .main-nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    max-height: none;
    display: flex;
    overflow: visible;
    background: transparent;
    font-size: 15px;
    box-shadow: none;
    border: 0;
  }

  .main-nav,
  .nav-trigger,
  .submenu-panel a {
    font-size: 15px;
  }

  .nav-trigger {
    width: auto;
    height: 44px;
    margin-left: 1.05vw;
    padding: 0 0 8px;
    border-bottom: 0;
    color: #626266;
    line-height: 1;
    letter-spacing: .01em;
    align-items: flex-end;
  }

  .nav-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--red);
    margin: 0;
  }

  .nav-trigger:hover::after,
  .nav-item.is-open .nav-trigger::after {
    width: 100%;
  }

  .submenu-panel {
    position: fixed;
    top: var(--submenu-top, 95px);
    left: 0;
    right: 0;
    width: 100vw;
    display: none;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 24px;
    padding: var(--submenu-pad-top, 0) 16px 0;
    border-top: 1px solid var(--red);
    border-bottom: 1px solid var(--red);
  }

  .nav-item.is-open .submenu-panel {
    display: flex;
  }

  .submenu-panel a,
  .submenu-entry-trigger {
    width: auto;
    padding: 12px 0;
    font-size: 13px;
    line-height: 1.2;
    color: var(--red);
  }

  .submenu-entry {
    width: auto;
    flex: 0 0 auto;
  }

  .submenu-entry-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    padding-right: 0;
  }

  .submenu-entry-trigger::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: var(--red);
  }

  .submenu-entry-trigger::after {
    content: "\f078";
    font: var(--fa-font-solid);
    font-size: 9px;
    position: static;
    transform: none;
    color: var(--red);
  }

  .submenu-entry.is-open .submenu-entry-trigger::after {
    content: "\f077";
  }

  .third-menu-panel,
  .catalog-third-menu {
    position: fixed;
    top: var(--thirdmenu-top, 146px);
    left: 0;
    right: 0;
    width: 100vw;
    max-width: none;
    display: none;
    grid-template-columns: repeat(2, max-content);
    column-gap: 34px;
    row-gap: 0;
    justify-content: end;
    padding: 10px 18px 12px;
    border-bottom: 1px solid #dcdcdc;
    background: #fff;
    z-index: 34;
  }

  .single-column-third-menu {
    grid-template-columns: max-content;
  }

  .submenu-entry.is-open .third-menu-panel,
  .submenu-entry.is-open .catalog-third-menu {
    display: grid;
  }

  .third-menu-panel a,
  .catalog-third-menu a {
    width: auto;
    padding: 4px 0;
    font-size: 13px;
    color: #5a5a5a;
    text-transform: none;
    white-space: nowrap;
  }
}

/* ——— Каталог продукции (обзор) ——— */
.catalog-page {
  background: #fff;
  padding-bottom: 48px;
}

.catalog-page-inner {
  max-width: 1200px;
}

.breadcrumb {
  padding: 20px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #666;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
  font-weight: 700;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--red, #c00);
  text-decoration: none;
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--red, #c00);
  outline-offset: 2px;
}

/* Разделитель как на cromax.com: стрелка вправо, не слэш */
.breadcrumb-sep {
  display: inline-block;
  margin: 0 0.4em;
  color: #888;
  font-weight: 700;
  speak: never;
}

.breadcrumb-sep::before {
  content: "\2192";
}

.breadcrumb-current {
  color: #666;
  font-weight: 700;
}

/* Заголовок страницы каталога — как на cromax.com: по центру колонки, красный, короткая линия снизу */
.catalog-page-header.section-block {
  padding: 28px 0 20px;
}

.catalog-content .catalog-page-header.section-block {
  padding: 4px 0 20px;
  text-align: center;
}

.catalog-page-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(28px, 2.4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: #222;
}

.catalog-content .catalog-page-title {
  margin: 0 auto;
  padding-bottom: 0;
  color: var(--red);
  letter-spacing: 0.02em;
  text-align: center;
}

.catalog-content .catalog-page-title::after {
  content: "";
  display: block;
  width: min(140px, 38vw);
  height: 1px;
  margin: 18px auto 0;
  background: #c8c8c8;
}

.catalog-page-lead {
  margin: 0;
  max-width: 52em;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4b4b;
}

.catalog-page-lead a {
  color: var(--red, #c00);
}

.legal-document-page .legal-document-meta {
  margin: 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

.legal-document-body {
  max-width: 52em;
  margin: 0 auto;
  padding: 8px 0 48px;
  font-size: 15px;
  line-height: 1.65;
  color: #333;
}

.legal-document-body h2 {
  margin: 2em 0 0.75em;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
}

.legal-document-body h2:first-child {
  margin-top: 0;
}

.legal-document-body h3 {
  margin: 1.25em 0 0.5em;
  font-size: 1.05rem;
  font-weight: 700;
  color: #333;
}

.legal-document-body p {
  margin: 0 0 0.85em;
}

.legal-document-body ul {
  margin: 0 0 1em;
  padding-left: 1.35em;
}

.legal-document-body li {
  margin-bottom: 0.35em;
}

.legal-document-body a {
  color: var(--red, #c00);
  text-decoration: underline;
}

.legal-document-body a:hover {
  color: #c9291b;
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 36px 48px;
  align-items: start;
}

.catalog-sidebar {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 12px 24px 0;
  position: static;
  align-self: start;
}

.catalog-page--product .catalog-sidebar {
  margin-top: 50px;
}

.catalog-sidebar-footer {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
}

.catalog-clear-filters {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.catalog-clear-filters:hover,
.catalog-clear-filters:focus-visible {
  text-decoration: underline;
  color: #c72a1a;
}

.catalog-clear-filters:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.catalog-clear-icon {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

/* Четыре группы фильтров первого уровня: «+» слева, раскрытие по клику */
.catalog-filter-accordion {
  border-bottom: 1px solid #d4d4d4;
}

.catalog-filter-accordion:first-of-type {
  border-top: 1px solid #d4d4d4;
}

.catalog-filter-accordion-trigger {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 14px 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--red);
}

.catalog-filter-accordion-trigger:hover,
.catalog-filter-accordion-trigger:focus-visible {
  color: #c72a1a;
  outline: none;
}

.catalog-filter-accordion-trigger:focus-visible {
  box-shadow: 0 0 0 2px rgba(230, 52, 35, 0.35);
  border-radius: 2px;
}

.catalog-filter-accordion-trigger-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.catalog-filter-accordion-icon {
  flex-shrink: 0;
  width: 1.35em;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  margin-top: 0.05em;
}

.catalog-filter-accordion.is-open .catalog-filter-accordion-icon {
  color: var(--red);
}

.catalog-filter-accordion-title {
  width: 100%;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}

.catalog-filter-accordion-summary {
  width: 100%;
  font-family: Lato, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  color: #5b6770;
  text-align: left;
  line-height: 1.35;
  word-break: break-word;
}

.catalog-filter-accordion-trigger:hover .catalog-filter-accordion-summary,
.catalog-filter-accordion-trigger:focus-visible .catalog-filter-accordion-summary {
  color: #4a5666;
}

.catalog-filter-accordion-panel {
  padding: 0 0 6px calc(1.35em + 10px);
}

.catalog-filter-accordion-panel[hidden] {
  display: none !important;
}

.catalog-filter-accordion-panel .catalog-checkbox-list {
  padding-top: 0;
}

.catalog-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.catalog-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  cursor: pointer;
}

.catalog-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

.catalog-filter-radio {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #e8e8e8;
}

.catalog-filter-accordion-panel .catalog-checkbox-list .catalog-filter-radio:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.catalog-filter-radio:has(input:checked) {
  font-weight: 700;
  color: var(--red);
}

.catalog-filter-radio:has(input:checked) .catalog-filter-count {
  color: var(--red);
  font-weight: 700;
}

.catalog-filter-radio input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--red);
}

/* Категории: только название, без кружка и без (N) — как список на cromax.com */
.catalog-filter-radio--text-only {
  gap: 0;
  align-items: center;
}

.catalog-filter-radio--text-only input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}

.catalog-filter-radio--text-only .catalog-filter-radio-label {
  flex: 1;
}

.catalog-filter-radio--text-only:has(input:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

.catalog-filter-count {
  font-weight: 400;
  font-size: 0.92em;
  color: #777;
  white-space: nowrap;
}

.catalog-select {
  width: 100%;
  padding: 8px 10px;
  font-family: Lato, Arial, sans-serif;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
}

.catalog-content {
  min-width: 0;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Строка товара — как в EU Product Catalogue: текст слева, фото справа, разделитель снизу. */
.catalog-product-row {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid #ddd;
  background: transparent;
}

.catalog-product-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.catalog-product-text {
  flex: 1;
  min-width: 0;
}

.catalog-product-title {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--red, #e63423);
}

.catalog-product-title-link {
  color: inherit;
  text-decoration: none;
}

.catalog-product-title-link:hover,
.catalog-product-title-link:focus-visible {
  text-decoration: none;
}

.catalog-product-title-link:focus-visible {
  outline: 2px solid var(--red, #e63423);
  outline-offset: 2px;
}

/* Две строки: блок по ширине контента, не на всю карточку; фиксированная колонка значений — одна вертикаль «зелёной линии» у всех позиций */
.catalog-product-meta {
  --catalog-meta-value-col: 14ch;
  display: grid;
  grid-template-columns: max-content var(--catalog-meta-value-col);
  column-gap: clamp(16px, 3vw, 28px);
  row-gap: calc(8px * 1.7);
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #5b6770;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
}

.catalog-product-meta .catalog-product-value {
  text-align: right;
}

.catalog-product-line {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: clamp(20px, 4vw, 36px);
  align-items: baseline;
  margin: 0 0 8px;
  font-family: Lato, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #5b6770;
}

.catalog-product-line:last-of-type {
  margin-bottom: 0;
}

.catalog-product-label {
  color: inherit;
  font-weight: 400;
}

.catalog-product-value,
.catalog-product-line > span:not(.catalog-product-label) {
  min-width: 0;
  word-break: break-word;
}

.catalog-product-link {
  display: inline-block;
  margin-top: 14px;
  font-family: Lato, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
}

.catalog-product-link:hover,
.catalog-product-link:focus-visible {
  text-decoration: underline;
}

.catalog-product-media {
  flex-shrink: 0;
  width: 140px;
  text-align: center;
}

.catalog-product-media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.catalog-product-media-link:hover .catalog-product-img,
.catalog-product-media-link:focus-visible .catalog-product-img {
  opacity: 0.92;
}

.catalog-product-media-link:focus-visible {
  outline: 2px solid var(--red, #e63423);
  outline-offset: 3px;
  border-radius: 2px;
}

.catalog-product-img {
  display: block;
  max-width: 140px;
  max-height: 200px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.catalog-product-thumb-placeholder {
  display: block;
  width: 110px;
  height: 148px;
  margin: 0 auto;
  border: 1px dashed #ccc;
  background: #fff;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .catalog-product-inner {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .catalog-product-media {
    width: 100%;
    margin-bottom: 8px;
  }

  .catalog-product-img {
    max-width: 160px;
  }
}

.catalog-empty {
  margin: 0;
  padding: 28px 20px;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  color: #555;
}

.catalog-pagination {
  margin-top: 32px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}

.catalog-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/*
 * Пагинация каталога: одна «капсула», без отдельных рамок у каждого пункта; стрелки — одиночные.
 */
.catalog-pagination ul.paging {
  list-style: none;
  margin: 0;
  padding: 6px 10px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid #e3e3e3;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.catalog-pagination ul.paging > li {
  display: inline-flex;
  margin: 0;
  align-items: center;
  vertical-align: middle;
}

.catalog-pagination ul.paging > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 12px 16px;
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: #333;
  text-decoration: none;
  background-color: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.catalog-pagination ul.paging > li > a.paging-nav {
  min-width: 3rem;
  padding: 12px 14px;
  font-size: 20px;
  color: #e63c28;
}

.catalog-pagination ul.paging > li > a:not(.paging-nav) {
  font-variant-numeric: tabular-nums;
}

.catalog-pagination ul.paging > li > a:hover,
.catalog-pagination ul.paging > li > a:focus-visible {
  color: #e63c28;
  background: rgba(230, 60, 40, 0.08);
  outline: none;
}

.catalog-pagination ul.paging > li > a.paging-nav:hover:not(:disabled),
.catalog-pagination ul.paging > li > a.paging-nav:focus-visible {
  color: #c72f1f;
  background: rgba(230, 60, 40, 0.1);
}

.catalog-pagination ul.paging > li.active > a,
.catalog-pagination ul.paging > li.active > span.paging-current {
  color: #e63c28;
  text-decoration: none;
  background: #eaeaea;
  border: none;
  transform: none;
  cursor: default;
}

.catalog-pagination ul.paging > li.active > span.paging-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 12px 16px;
  margin: 0;
  font-family: Lato, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.catalog-pagination ul.paging > li.disabled > a {
  color: #b0b0b0;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.45;
  background: transparent;
  transform: none;
}

.catalog-pagination ul.paging > li.disabled > a.paging-nav {
  color: #ccc;
}

.catalog-pagination ul.paging > li.paging-gap > span.paging-ell {
  display: inline-flex;
  align-items: center;
  padding: 12px 8px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #888;
  user-select: none;
  cursor: default;
}

@media screen and (max-width: 767px) {
  .catalog-pagination ul.paging {
    padding: 5px 8px;
  }

  .catalog-pagination ul.paging > li > a {
    padding: 10px 14px;
    font-size: 16px;
  }

  .catalog-pagination ul.paging > li > a.paging-nav {
    min-width: 2.75rem;
    padding: 10px 12px;
    font-size: 18px;
  }

  .catalog-pagination ul.paging > li.active > span.paging-current {
    padding: 10px 14px;
    font-size: 16px;
  }

  .catalog-pagination ul.paging > li.paging-gap > span.paging-ell {
    padding: 10px 6px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .catalog-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .catalog-sidebar {
    padding: 0 0 16px;
    max-height: none;
    position: static;
    border-bottom: 1px solid #eaeaea;
  }

  .catalog-content .catalog-page-header.section-block {
    padding-top: 8px;
  }
}

/* Карточка товара (product.html), в духе EU Article Page */
.catalog-product-detail {
  max-width: 960px;
  margin: 0 auto;
}

.catalog-product-detail-error {
  padding: 24px;
  background: #fff8f8;
  border: 1px solid #ecc;
  border-radius: 4px;
  color: #333;
}

.catalog-product-detail-layout {
  
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

/* В колонке текста (как EU download_container): под вариантами, ширина колонки описания */
.catalog-product-detail-eu--primary .catalog-product-detail-sheets {
  margin-top: 20px;
}

.catalog-product-detail-sheets {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
}

.catalog-product-sheet {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.catalog-product-sheet + .catalog-product-sheet {
  margin-top: 10px;
}

/* EU: красный квадрат + серая зона; вся полоса — одна ссылка на скачивание */
a.catalog-product-sheet-row {
  display: flex;
  align-items: stretch;
  min-height: 60px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #d5d5d5;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.catalog-product-sheet-row:hover .catalog-product-sheet-body {
  background: #dedede;
}

.catalog-product-sheet-row:focus-visible {
  outline: 2px solid var(--red, #c41230);
  outline-offset: 2px;
}

.catalog-product-sheet-row:hover .catalog-product-sheet-download {
  text-decoration: underline;
}

.catalog-product-sheet-icon {
  flex-shrink: 0;
  width: 70px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c82127;
  text-align: center;
}

/* Как EU: div.acrobat + :before content \e600, шрифт Axalta */
.catalog-product-sheet-acrobat {
  display: block;
  width: 100%;
}

.catalog-product-sheet-acrobat::before {
  content: "\e600";
  display: block;
  color: #fff;
  font-family: "Axalta", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: normal;
  line-height: 38px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.catalog-product-sheet-body {
  flex: 1;
  min-width: 0;
  background: #e8e8e8;
  padding: 10px 18px;
  display: flex;
  align-items: center;
}

.catalog-product-sheet-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.catalog-product-sheet-title {
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}

.catalog-product-sheet-download {
  font-size: 14px;
  font-weight: 600;
  color: var(--red, #c41230);
  align-self: flex-start;
}

.catalog-tds-soon {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

.catalog-tds-soon-text {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.55;
  color: #333;
}

.catalog-tds-soon-actions {
  margin: 0;
}

.catalog-product-detail-media {
  flex-shrink: 0;
}

.catalog-product-detail-img {
  display: block;
  max-width: 280px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.catalog-product-detail-layout--media-only {
  justify-content: center;
}

.catalog-product-detail-layout--media-only .catalog-product-detail-media {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .catalog-product-detail-layout {
    flex-direction: column-reverse;
  }

  .catalog-product-detail-img {
    max-width: 200px;
  }
}

/* Текст EU-страницы: маркетинг + список особенностей (как .product_details на cromax.com) */
.catalog-product-detail-eu {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  max-width: 100%;
}

/* В колонке слева от изображения: без отступа/линии как у отдельного блока под карточкой */
.catalog-product-detail-eu--primary {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.catalog-product-detail-eu-marketing {
  margin-bottom: 20px;
}

.catalog-product-detail-eu-marketing-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #333;
}

.catalog-product-detail-eu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 16px;
  padding: 14px 0;
  border-top: 1px solid #e8e8e8;
}

.catalog-product-detail-eu-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.catalog-product-detail-eu-key {
  flex: 0 0 160px;
  max-width: 100%;
}

.catalog-product-detail-eu-key h4 {
  margin: 0;
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Как на EU article: подписи характеристик — акцентный цвет бренда */
.catalog-product-detail-eu-row--spec {
  min-height: 44px;
}

.catalog-product-detail-eu-value {
  flex: 1;
  min-width: 0;
}

.catalog-product-detail-eu-value p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.catalog-product-detail-eu-features {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}

.catalog-product-detail-eu-features > li {
  margin: 0 0 0.55em;
  padding-left: 0.15em;
}

.catalog-product-detail-eu-features > li:last-child {
  margin-bottom: 0;
}

.catalog-product-detail-eu-features p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

.catalog-product-detail-eu-variants {
  margin-top: 0;
}

/* Каждый вариант — та же карточка, что и у «текущего» SKU */
.catalog-product-detail-variant-group {
  margin-left: -8px;
  margin-right: -8px;
  padding: 0 8px 12px;
  background: #faf8f6;
  border: 1px solid #e8dfd6;
  border-radius: 4px;
}

.catalog-product-detail-variant-group .catalog-product-detail-eu-row {
  align-items: center;
  position: relative;
  border-top: none;
}

/* Строки спецификации варианта: текст по вертикали по центру строки (в т.ч. первая строка) */
.catalog-product-detail-variant-group .catalog-product-detail-eu-row.catalog-product-detail-eu-row--spec {
  padding-block: 0;
  align-items: center;
}

.catalog-product-detail-variant-group .catalog-product-detail-eu-row--spec .catalog-product-detail-eu-key,
.catalog-product-detail-variant-group .catalog-product-detail-eu-row--spec .catalog-product-detail-eu-value {
  display: flex;
  align-items: center;
}

.catalog-product-detail-variant-group + .catalog-product-detail-variant-group {
  margin-top: 12px;
}

@media (max-width: 640px) {
  /* «Особенности продукта» и прочие обычные строки — подпись над содержимым */
  .catalog-product-detail-eu-key {
    flex: 1 1 100%;
  }

  /*
   * Блок варианта (Вариант / Артикул / Код материала): как на десктопе —
   * подпись слева, значение справа; сами строки по-прежнему идут друг под другом.
   */
  .catalog-product-detail-variant-group .catalog-product-detail-eu-key {
    flex: 0 0 160px;
    max-width: 45%;
  }

  .catalog-product-detail-variant-group .catalog-product-detail-eu-row.catalog-product-detail-eu-row--spec {
    flex-wrap: nowrap;
    align-items: center;
    padding-block: 0;
    gap: 0 12px;
  }

  .catalog-product-detail-variant-group .catalog-product-detail-eu-row--spec .catalog-product-detail-eu-key,
  .catalog-product-detail-variant-group .catalog-product-detail-eu-row--spec .catalog-product-detail-eu-value {
    align-items: center;
  }
}

/* Страница «Легковые автомобили» — сетка категорий как на cromax.com/products/passenger-cars */
.passenger-products-page .catalog-page-inner {
  padding-bottom: 48px;
}

.passenger-page-header.section-block {
  padding: 28px 0 8px;
  text-align: center;
}

.passenger-page-title {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(26px, 2.2vw, 38px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--red);
}

.passenger-page-title::after {
  content: "";
  display: block;
  width: min(140px, 38vw);
  height: 1px;
  margin: 18px auto 0;
  background: #c8c8c8;
}

.passenger-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}

.passenger-category-tile {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 96px;
  padding: 20px 22px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  transition: filter 0.2s ease, transform 0.15s ease;
}

.passenger-category-tile:hover {
  filter: brightness(1.06);
}

.passenger-category-tile:focus-visible {
  outline: 3px solid #222;
  outline-offset: 2px;
}

.passenger-category-tile-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: none;
}

.passenger-category-tile-svg {
  width: 56px;
  height: 56px;
  display: block;
}

.passenger-category-tile-label {
  text-transform: uppercase;
}

/* Коммерческий транспорт: светло-серый; промышленность: серый. */
.passenger-products-page--commercial .passenger-category-tile {
  background: #e6e7ea;
  color: var(--red, #c00);
}

.passenger-products-page--industrial .passenger-category-tile {
  background: #6d7074;
  color: #fff;
}

@media (max-width: 767px) {
  .passenger-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .passenger-category-grid {
    grid-template-columns: 1fr;
  }

  .passenger-category-tile {
    min-height: 72px;
    padding: 16px 18px;
    font-size: 15px;
    gap: 14px;
  }

  .passenger-category-tile-icon {
    width: 52px;
    height: 52px;
  }

  .passenger-category-tile-svg {
    width: 46px;
    height: 46px;
  }
}

/* ——— TDS / SDS (хаб и списки PDF) ——— */
.tds-sds-page .tds-sds-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
  margin-top: 8px;
  padding-bottom: 40px;
}

.tds-sds-hub-col {
  text-align: center;
}

.tds-sds-hub-heading {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red, #c00);
}

.tds-sds-hub-icon {
  margin: 0 auto 36px;
  width: 100%;
  max-width: 420px;
  line-height: 0;
}

.tds-sds-hub-icon .tds-sds-hub-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.tds-sds-hub-links {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  max-width: min(420px, 100%);
  margin-inline: auto;
}

.tds-sds-hub-links li + li {
  margin-top: 16px;
}

.tds-sds-hub-link {
  display: flex;
  align-items: center;
  gap: 22px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--red, #c00);
}

.tds-sds-hub-link::before {
  content: ">";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  margin-top: 1px;
  border: 1px solid var(--red, #c00);
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: var(--red, #c00);
  background: transparent;
}

.tds-sds-hub-link:hover,
.tds-sds-hub-link:focus-visible {
  color: var(--red, #c00);
}

.tds-sds-hub-link:hover::before,
.tds-sds-hub-link:focus-visible::before {
  background: rgba(230, 52, 35, 0.07);
}

.tds-sds-hub-link:focus-visible {
  outline: 2px solid var(--red, #c00);
  outline-offset: 2px;
}

.tds-sds-sheets-page .catalog-content .tds-sds-sheets-segment {
  margin: 14px 0 0;
  padding: 0 16px;
  max-width: 36em;
  margin-left: auto;
  margin-right: auto;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
  color: #5a5a5a;
}

.tds-sds-sheets-page .catalog-content .tds-sds-sheets-header .tds-sds-sheets-meta {
  margin-top: 16px;
}

.tds-sds-sheets-meta {
  margin: 0;
  font-size: 15px;
  color: #555;
}

.tds-sds-sheets-error {
  color: #a00;
  font-weight: 700;
}

.tds-sds-sheets-empty {
  margin: 12px 0 20px;
  color: #555;
}

.tds-sds-sheets-back {
  margin-top: 32px;
}

.tds-sds-sheets-back-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--red, #c00);
  text-decoration: none;
}

.tds-sds-sheets-back-link:hover,
.tds-sds-sheets-back-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tds-sds-sheets-back-link:focus-visible {
  outline: 2px solid var(--red, #c00);
  outline-offset: 2px;
}

.tds-sds-doc-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tds-sds-doc-list li {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
}

.tds-sds-doc-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--red, #c00);
  text-decoration: none;
}

.tds-sds-doc-link:hover,
.tds-sds-doc-link:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .tds-sds-page .tds-sds-hub-grid {
    grid-template-columns: 1fr;
  }

  .tds-sds-page .tds-sds-hub-heading {
    font-size: calc(17px * 1.5);
    margin-bottom: 18px;
  }

  /* Линия под блоком «легковые» и под «коммерческий», как визуальные секции */
  .tds-sds-page .tds-sds-hub-col:not(:last-child) {
    border-bottom: 1px solid #c8c8c8;
    padding-bottom: 28px;
  }
}

/* ——— «Мой Cromax»: вход и редактирование карточки товара ——— */
body.cromax-modal-open {
  overflow: hidden;
}

.cromax-modal-backdrop,
.cromax-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

/* Иначе author `display:flex` перебивает поведение атрибута hidden — окно видно сразу */
.cromax-modal-backdrop[hidden],
.cromax-editor-backdrop[hidden] {
  display: none !important;
}

.cromax-modal {
  width: 100%;
  max-width: 420px;
  max-height: min(90vh, 640px);
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.cromax-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}

.cromax-modal-title {
  margin: 0;
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #222;
}

.cromax-modal-close {
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.cromax-modal-close:hover,
.cromax-modal-close:focus-visible {
  color: var(--red, #c00);
  background: #f5f5f5;
}

/* Редактируемые текстовые блоки страниц (data-cromax-text-key) */
.cromax-page-text-bar {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 10040;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  font-size: 14px;
}

.cromax-page-text-bar[hidden] {
  display: none !important;
}

.cromax-page-text-bar-label {
  font-weight: 600;
}

.cromax-page-text-bar-hint {
  font-size: 12px;
  font-weight: 400;
  color: #555;
  line-height: 1.35;
  max-width: min(280px, 55vw);
}

body.cromax-page-text-edit-mode [data-cromax-text-key] {
  outline: 2px dashed rgba(0, 120, 180, 0.65);
  outline-offset: 4px;
  cursor: pointer;
}

.cromax-page-text-modal.cromax-modal {
  max-width: 560px;
}

.cromax-page-text-keyline {
  margin: 0 16px 10px;
  font-size: 13px;
  color: #444;
}

.cromax-page-text-area {
  display: block;
  width: calc(100% - 40px);
  margin: 0 20px 12px;
  min-height: 160px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
}

.cromax-page-text-modal .cromax-form-actions {
  padding: 0 20px 20px;
}

.cromax-page-text-modal .cromax-form-error {
  margin: 0 20px 12px;
}

.cromax-form {
  padding: 16px 20px 20px;
}

.cromax-field {
  margin-bottom: 14px;
}

.cromax-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.cromax-field input,
.cromax-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 14px;
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

.cromax-field textarea {
  resize: vertical;
  min-height: 80px;
}

.cromax-field input:focus-visible,
.cromax-field textarea:focus-visible {
  outline: 2px solid var(--red, #c00);
  outline-offset: 1px;
}

.cromax-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cromax-form-error {
  margin: 12px 0 0;
  font-size: 13px;
  color: #b00020;
}

.cromax-product-toolbar {
  margin-top: 12px;
}

.cromax-product-edit-btn {
  font-size: 14px;
}

.catalog-page--product .catalog-page-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cromax-editor-sheet {
  width: 100%;
  max-width: 520px;
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.cromax-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid #e8e8e8;
  flex-shrink: 0;
}

.cromax-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cromax-editor-title {
  margin: 0;
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #222;
}

.cromax-editor-body {
  overflow: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

.cromax-editor-form {
  padding: 16px 20px 24px;
}

.cromax-editor-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eee;
}

.cromax-editor-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.cromax-editor-section-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red, #c00);
}

.cromax-editor-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.cromax-editor-logout {
  font-size: 13px;
}

.cromax-auth-session-panel {
  padding-top: 4px;
}

.cromax-auth-session-lead {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
}

.cromax-editor-field-hint {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

.cromax-editor-field-hint code {
  font-size: 11px;
  background: #f0f0f0;
  padding: 1px 5px;
  border-radius: 3px;
}

.cromax-editor-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

/* Устаревшие данные characteristicGroups в product-overrides (только отображение) */
.catalog-product-detail-char-group .catalog-product-detail-char-group-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.catalog-product-detail-char-groups {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cromax-variants-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 12px;
}

.cromax-variant-card {
  padding: 12px 14px;
  background: #f8f9fb;
  border: 1px solid #dde1e8;
  border-radius: 6px;
}

.cromax-variant-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
}

@media (max-width: 600px) {
  .cromax-variant-fields {
    grid-template-columns: 1fr;
  }
}

.cromax-field--compact {
  margin-bottom: 0;
}

.cromax-variant-remove {
  margin-top: 10px;
  font-size: 14px;
}

.cromax-variant-add-btn {
  font-size: 14px;
}

/* ——— Раздел «Цвета» (контент со cromax.com, RU) ——— */
.color-content-page .color-hero {
  margin: 0 0 28px;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.color-content-page .color-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Герой-изображение раздела «Цвета» перед main (вне .color-content-page) */
img.color-mood-hero {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 28px;
  line-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.color-lead {
  max-width: 52rem;
}

/* Лендинг раздела «Цвета» (как colours.html на cromax.com) */
.color-colours-landing-header {
  margin-bottom: 0;
  text-align: center;
}

.color-colours-landing-header .catalog-page-title {
  margin-bottom: 0;
}

.color-colours-landing-title {
  font-family: "Titillium Web", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}

.color-headline-rule {
  border: 0;
  border-top: 1px solid #c8c8c8;
  width: min(140px, 38vw);
  margin: 18px auto 0;
}

.color-intro-panel {
  width: 100%;
  margin: 24px 0 0;
  padding: 28px 32px;
  background: #f2f2f2;
  box-sizing: border-box;
}

.color-intro-centered {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
}

/* Шапка и серый интро-блок на внутренних страницах (как на cromax.com) */
.cromax-section-header {
  text-align: center;
}

.cromax-section-title {
  color: var(--red);
}

.cromax-section-rule {
  border: 0;
  border-top: 1px solid #c8c8c8;
  width: min(140px, 38vw);
  margin: 18px auto 0;
}

/*
 * Внутренние разделители между блоками (не на всю ширину колонки/страницы).
 * Общее правило для сайта; не трогаем .digital-colour-management-divider (своя ширина и фон)
 * и .daylight-lamp-divider (шире, под линию заголовка страницы).
 */
.chromaweb-divider,
.chromavision-pro-mini-divider,
.five-star-divider,
.valueshade-page .valueshade-divider,
.colour-technologies-page .colour-technologies-divider,
.chromalusion-page .chromalusion-divider,
.color-section-rule {
  width: var(--cromax-content-block-divider-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.cromax-intro-panel {
  width: 100%;
  margin: 20px 0 0;
  padding: 24px 28px;
  background: #f2f2f2;
  box-sizing: border-box;
}

.cromax-intro-text {
  text-align: center;
  max-width: 52rem;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
}

.colour-technologies-page {
  --colour-technologies-accent: #e63c28;
  --colour-technologies-text: #626266;
  --colour-technologies-link: #959595;
  --colour-technologies-divider: #bcbcc0;
}

.colour-technologies-page .colour-technologies-content {
  padding-bottom: 44px;
}

.colour-technologies-page .catalog-page-header.section-block.colour-technologies-header {
  text-align: center;
  padding: 6px 0 14px;
}

.colour-technologies-page .colour-technologies-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-technologies-accent);
}

.colour-technologies-page .colour-technologies-title-rule {
  border: 0;
  border-top: 2px solid #c8c8c8;
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 35px;
}

.colour-technologies-page .section-block.colour-technologies-item {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  align-items: center;
}

.colour-technologies-page .colour-technologies-media {
  line-height: 0;
}

.colour-technologies-page .colour-technologies-media img {
  display: block;
  width: 100%;
  height: auto;
}

.colour-technologies-page .colour-technologies-copy {
  color: var(--colour-technologies-text);
}

.colour-technologies-page .colour-technologies-item-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--colour-technologies-accent);
}

.colour-technologies-page .colour-technologies-item-text {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--colour-technologies-text);
}

.colour-technologies-page .colour-technologies-item-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--colour-technologies-link);
  text-decoration: none;
}

.colour-technologies-page .colour-technologies-item-link:hover,
.colour-technologies-page .colour-technologies-item-link:focus-visible {
  color: var(--colour-technologies-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.colour-technologies-page .colour-technologies-item-link-arrow {
  color: var(--colour-technologies-accent);
  font-size: 16px;
  line-height: 1;
}

.colour-technologies-page .colour-technologies-divider {
  border: 0;
  border-top: 1px solid var(--colour-technologies-divider);
  margin-block: 22px;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .colour-technologies-page .section-block.colour-technologies-item {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .colour-technologies-page .colour-technologies-title-rule {
    margin-bottom: 28px;
  }
}

.valueshade-page {
  --valueshade-accent: #e63c28;
  --valueshade-text: #626266;
  --valueshade-muted: #959595;
  --valueshade-divider: #bcbcc0;
}

.valueshade-page .catalog-page-header.section-block.valueshade-header {
  text-align: center;
  padding: 0;
  margin: 6px 0 0;
}

.valueshade-page .valueshade-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--valueshade-accent);
}

.valueshade-page .valueshade-title-rule {
  border: 0;
  border-top: 2px solid var(--valueshade-divider);
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 35px;
}

.valueshade-page .cromax-intro-panel.section-block.valueshade-intro {
  margin-top: 0;
}

.valueshade-page .valueshade-intro-text {
  max-width: none;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--valueshade-text);
}

.valueshade-page .section-block.valueshade-row {
  margin: 35px 0 0;
  padding: 0;
  gap: 30px;
  align-items: start;
}

.valueshade-page .valueshade-row .color-inline-figure {
  margin: 0;
}

.valueshade-page .valueshade-row .color-inline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.valueshade-page .valueshade-copy {
  color: var(--valueshade-text);
}

.valueshade-page .valueshade-copy p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--valueshade-text);
}

.valueshade-page .section-block h2.valueshade-subhead {
  margin: 0 0 25px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--valueshade-accent);
}

.valueshade-page .valueshade-divider {
  margin-block: 35px;
  margin-inline: auto;
  border: 0;
  border-top: 1px solid var(--valueshade-divider);
}

.valueshade-page .section-block.valueshade-row + .section-block.valueshade-row {
  margin-top: 0;
}

.valueshade-page .valueshade-products {
  display: flex;
  align-items: center;
}

.valueshade-page .valueshade-products-link {
  display: inline-block;
  text-decoration: none;
}

.valueshade-page .section-block h3.valueshade-cta-title {
  margin: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--valueshade-accent);
}

.valueshade-page .valueshade-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  color: var(--valueshade-muted);
}

.valueshade-page .valueshade-products-link:hover .valueshade-cta-link,
.valueshade-page .valueshade-products-link:focus-visible .valueshade-cta-link {
  color: var(--valueshade-accent);
}

.chromahybrid-page {
  --chromahybrid-accent: #e63c28;
  --chromahybrid-text: #626266;
  --chromahybrid-muted: #959595;
}

.chromahybrid-page .catalog-page-header.section-block.chromahybrid-header {
  text-align: center;
  padding: 0;
  margin: 6px 0 0;
}

.chromahybrid-page .chromahybrid-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chromahybrid-accent);
}

.chromahybrid-page .chromahybrid-title-rule {
  border: 0;
  border-top: 2px solid #c8c8c8;
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 35px;
}

.chromahybrid-page .section-block.chromahybrid-lead {
  margin: 0;
  padding: 0;
}

.chromahybrid-page .chromahybrid-lead p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--chromahybrid-text);
  text-align: left;
}

.chromahybrid-page .cromax-intro-panel.section-block.chromahybrid-intro {
  margin: 26px 0 0;
  text-align: center;
}

.chromahybrid-page .section-block h2.chromahybrid-subhead {
  margin: 0 0 25px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chromahybrid-accent);
}

.chromahybrid-page .chromahybrid-intro p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--chromahybrid-text);
  text-align: center;
}

.chromahybrid-page .chromahybrid-intro p + p {
  margin-top: 16px;
}

.chromahybrid-page .section-block.chromahybrid-products {
  margin: 34px 0 0;
  padding: 0;
  gap: 30px;
  align-items: center;
}

.chromahybrid-page .chromahybrid-products .color-inline-figure {
  margin: 0;
}

.chromahybrid-page .chromahybrid-products .color-inline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.chromahybrid-page .chromahybrid-products-copy {
  display: flex;
  align-items: center;
}

.chromahybrid-page .chromahybrid-products-link {
  display: inline-block;
  text-decoration: none;
}

.chromahybrid-page .section-block h3.chromahybrid-cta-title {
  margin: 0 0 12px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chromahybrid-accent);
}

.chromahybrid-page .chromahybrid-products-desc {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--chromahybrid-text);
}

/* Как .teaser-text .linktext + icon-arrow-right (our-expertise, оригинал cromax) */
.chromahybrid-page .chromahybrid-products-link .linktext {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  padding-left: 25px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--chromahybrid-muted);
  transition: color 0.2s ease;
}

.chromahybrid-page .chromahybrid-products-link:hover .linktext,
.chromahybrid-page .chromahybrid-products-link:focus-visible .linktext {
  color: var(--chromahybrid-accent);
}

@media (max-width: 767px) {
  .valueshade-page .section-block.valueshade-row {
    gap: 18px;
  }

  .chromahybrid-page .section-block.chromahybrid-products {
    gap: 18px;
  }
}

.color-content-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  align-items: start;
  margin: 28px 0;
}

.color-content-grid-2 .color-prose-block h2,
.color-content-grid-2 .color-prose-block h3 {
  margin-top: 0;
}

@media (max-width: 720px) {
  .color-content-grid-2 {
    grid-template-columns: 1fr;
  }

  .valueshade-page .section-block.valueshade-row {
    margin-top: 26px;
  }

  .valueshade-page .valueshade-title-rule {
    margin-bottom: 28px;
  }

  .chromahybrid-page .cromax-intro-panel.section-block.chromahybrid-intro {
    margin-top: 22px;
  }

  .chromahybrid-page .section-block.chromahybrid-products {
    margin-top: 26px;
  }

  .chromahybrid-page .chromahybrid-title-rule {
    margin-bottom: 28px;
  }
}

.services-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 28px;
}

@media (max-width: 767px) {
  .services-hub-grid {
    grid-template-columns: 1fr;
  }
}

.where-to-buy-page {
  --where-buy-accent: #e63c28;
  --where-buy-text: #626266;
  --where-buy-muted: #959595;
  --where-buy-rule: #cbd5e1;
  --where-buy-map-border: #aaa;
}

.where-to-buy-page .catalog-page-inner {
  max-width: 1200px;
}

.where-to-buy-content {
  padding-bottom: 42px;
}

.where-to-buy-page .catalog-page-header.section-block.where-to-buy-header {
  padding: 30px 0 36px;
  text-align: center;
}

.where-to-buy-page .where-to-buy-header h1.where-to-buy-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--where-buy-accent);
}

.where-to-buy-title-rule {
  width: 227px;
  max-width: min(227px, 46vw);
  margin: 10px auto 0;
  border: 0;
  border-top: 2px solid var(--where-buy-rule);
}

.where-to-buy-page .section-block.where-to-buy-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 30px;
  align-items: start;
  margin: 0 0 35px;
  padding: 0;
}

.where-to-buy-copy {
  min-width: 0;
}

.where-to-buy-copy p,
.where-to-buy-media-text p {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.42;
  color: var(--where-buy-text);
}

.where-to-buy-page .section-block .where-to-buy-copy h3 {
  margin: 14px 0 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--where-buy-accent);
}

.where-to-buy-media-teaser {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.where-to-buy-media-teaser:hover,
.where-to-buy-media-teaser:focus,
.where-to-buy-media-teaser:focus-visible,
.where-to-buy-media-teaser:focus-within {
  text-decoration: none;
}

.where-to-buy-media-teaser:focus,
.where-to-buy-media-teaser:focus-visible,
.where-to-buy-media-teaser:focus-within {
  outline: none;
}

.where-to-buy-linktext {
  position: relative;
  display: inline-block;
  margin-top: 6px;
  padding-left: 25px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: #8a8a8a;
  text-shadow: none;
}

.where-to-buy-linktext .icon-arrow-right {
  color: #8a8a8a;
  line-height: 1.45;
}

.where-to-buy-media-teaser:hover .where-to-buy-linktext {
  color: #d00;
  text-shadow: none;
}

.where-to-buy-media-teaser:focus-visible .where-to-buy-linktext {
  color: #d00;
  text-shadow: none;
}

.where-to-buy-media-teaser:focus .where-to-buy-linktext,
.where-to-buy-media-teaser:focus-within .where-to-buy-linktext {
  color: #d00;
  text-shadow: none;
}

.where-to-buy-media-teaser:hover .where-to-buy-linktext .icon-arrow-right {
  color: #d00;
}

.where-to-buy-media-teaser:focus-visible .where-to-buy-linktext .icon-arrow-right {
  color: #d00;
}

.where-to-buy-media-teaser:focus .where-to-buy-linktext .icon-arrow-right,
.where-to-buy-media-teaser:focus-within .where-to-buy-linktext .icon-arrow-right {
  color: #d00;
}

.where-to-buy-page .section-block.where-to-buy-map-section {
  margin: 0;
  padding: 0;
}

.where-to-buy-map {
  display: block;
  width: 100%;
  min-height: 550px;
  border: 1px solid var(--where-buy-map-border);
  background: transparent;
  box-sizing: border-box;
}

.where-to-buy-map-section-heading {
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.where-to-buy-map-caption {
  margin: 0 0 28px;
  max-width: 52em;
  font-size: 15px;
  line-height: 1.55;
  color: #64748b;
}

.where-to-buy-map-caption a {
  color: var(--where-buy-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.where-to-buy-map-caption a:hover,
.where-to-buy-map-caption a:focus-visible {
  color: #c93422;
}

.where-to-buy-map-shell {
  width: 100%;
  --wb-map-fill: #dbe4f0;
  --wb-map-stroke: rgba(255, 255, 255, 0.98);
  --wb-map-hover-fill: #b8d9ff;
  --wb-map-hover-stroke: #b8d9ff;
  --wb-map-transition: fill 0.22s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.where-to-buy-map-inner {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: 1fr;
  align-items: stretch;
}

.where-to-buy-map-viz-col {
  min-width: 0;
  text-align: left;
}

.where-to-buy-region-field {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.where-to-buy-region-field-hint {
  margin: -2px 0 10px;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  color: #64748b;
  line-height: 1.4;
  max-width: 40em;
}

.where-to-buy-region-combo {
  position: relative;
  margin-bottom: 16px;
}

.where-to-buy-region-search {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.where-to-buy-region-search::placeholder {
  color: #94a3b8;
}

.where-to-buy-region-search:hover {
  border-color: #cbd5e1;
}

.where-to-buy-region-search:focus {
  outline: none;
}

.where-to-buy-region-search:focus-visible {
  border-color: var(--where-buy-accent);
  box-shadow:
    0 0 0 3px rgba(230, 60, 40, 0.15),
    0 2px 8px rgba(15, 23, 42, 0.08);
}

.where-to-buy-region-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  margin: 0;
  padding: 4px 0;
  max-height: min(280px, 40vh);
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 10px;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.12),
    0 1px 3px rgba(15, 23, 42, 0.08);
}

.where-to-buy-region-option {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: #1e293b;
  cursor: pointer;
}

.where-to-buy-region-option:hover,
.where-to-buy-region-option--active {
  background: rgba(230, 60, 40, 0.08);
  color: #0f172a;
}

.where-to-buy-region-list-empty {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  color: #64748b;
}

.where-to-buy-region-select.visually-hidden {
  margin-bottom: 0;
}

.where-to-buy-region-select {
  width: 100%;
  max-width: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  font-size: 15px;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.where-to-buy-region-select:hover {
  border-color: #cbd5e1;
}

.where-to-buy-region-select:focus-visible {
  outline: none;
  border-color: var(--where-buy-accent);
  box-shadow:
    0 0 0 3px rgba(230, 60, 40, 0.15),
    0 2px 8px rgba(15, 23, 42, 0.08);
}

.where-to-buy-map-svg-wrap {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  /* Высота по пропорции viewBox карты: SVG через absolute-fill + preserveAspectRatio meet (полная Россия включая эксклав Калининграда без обрезки по краям блока при отличном aspect host) */
  aspect-ratio: 1000 / 520;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 18px 40px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.where-to-buy-map-zoom-shell {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  width: 100%;
}

.where-to-buy-map-viewport {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.where-to-buy-map-viewport:focus-visible {
  outline: 2px solid rgba(230, 60, 40, 0.35);
  outline-offset: -2px;
}

.where-to-buy-region-hover-hint {
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 24px));
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, 0.12),
    0 1px 2px rgba(15, 23, 42, 0.06);
  pointer-events: none;
  text-align: left;
}

.where-to-buy-zoom-pan-layer {
  position: absolute;
  left: clamp(11px, 2.75%, 22px);
  right: clamp(11px, 2.75%, 22px);
  top: 0;
  height: 100%;
  width: auto;
  box-sizing: border-box;
  will-change: transform;
}

.where-to-buy-zoom-rail {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  width: 56px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-left: 1px solid rgba(148, 163, 184, 0.35);
}

.where-to-buy-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #1e293b;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.where-to-buy-zoom-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: rgba(230, 60, 40, 0.45);
  color: var(--where-buy-accent, #e63c28);
}

.where-to-buy-zoom-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.where-to-buy-zoom-range-wrap {
  width: 36px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.where-to-buy-zoom-range {
  width: 120px;
  height: 32px;
  margin: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  cursor: pointer;
  accent-color: var(--where-buy-accent, #e63c28);
}

.where-to-buy-svg-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  display: block;
}

.where-to-buy-svg-loading-msg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.76);
}

.where-to-buy-map-svg-wrap:not(.where-to-buy-svg-loading) .where-to-buy-svg-loading-msg {
  display: none;
}

.where-to-buy-svg-host .where-to-buy-svg-root {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  vertical-align: top;
  box-sizing: border-box;
}

.where-to-buy-svg-regions path {
  fill: var(--wb-map-fill, #dbe4f0);
  stroke: var(--wb-map-stroke, rgba(255, 255, 255, 0.98));
  stroke-width: 0.35px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  transition: var(--wb-map-transition, fill 0.22s ease, stroke 0.22s ease);
  outline: none;
}

.where-to-buy-svg-regions path:focus-visible,
.where-to-buy-svg-regions path:focus {
  outline: none;
}

.where-to-buy-svg-regions path.is-hover:not(.is-selected) {
  fill: var(--wb-map-hover-fill, #b8d9ff);
  stroke: var(--wb-map-hover-stroke, #b8d9ff);
}

.where-to-buy-svg-regions path.is-selected {
  fill: var(--where-buy-accent);
  stroke: var(--where-buy-accent);
}

.where-to-buy-svg-regions path.is-selected.is-hover {
  fill: #b91c14;
  stroke: #b91c14;
}

.where-to-buy-panel {
  padding: clamp(18px, 4vw, 28px);
  border-radius: 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow:
    0 1px 3px rgba(15, 23, 42, 0.05),
    0 12px 32px rgba(15, 23, 42, 0.07);
}

.where-to-buy-edit-toolbar {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.where-to-buy-edit-open-btn {
  font-weight: 600;
}

.where-to-buy-panel-title {
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.3;
}

.where-to-buy-panel-live {
  min-height: 80px;
}

.where-to-buy-dealers-empty {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #64748b;
}

.where-to-buy-dealers-unset {
  margin: 0;
}

.where-to-buy-dealers-unset-lead {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #334155;
}

.where-to-buy-dealers-unset-hint {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

.where-to-buy-dealers-contact-btn {
  display: inline-flex;
  align-self: flex-start;
  text-decoration: none;
}

.where-to-buy-dealer-card {
  border: 1px solid rgba(148, 163, 184, 0.38);
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.where-to-buy-dealer-card:hover {
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.where-to-buy-dealer-card:last-child {
  margin-bottom: 0;
}

.where-to-buy-dealer-card-head {
  display: block;
  margin-bottom: 10px;
}

.where-to-buy-dealer-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}

.where-to-buy-dealer-type {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  color: #334155;
}

.where-to-buy-dealer-type--retail {
  color: #166534;
}

.where-to-buy-dealer-type--wholesale {
  color: #1e40af;
}

.where-to-buy-dealer-type--wholesale_retail {
  color: #5b21b6;
}

.where-to-buy-dealer-line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #475569;
}

.where-to-buy-dealer-line:last-child {
  margin-bottom: 0;
}

.where-to-buy-dealer-muted {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--where-buy-muted);
}

.where-to-buy-dealer-link,
.where-to-buy-dealer-link-ext {
  color: var(--where-buy-accent);
  text-decoration: underline;
  word-break: break-word;
}

.where-to-buy-dealer-link:hover,
.where-to-buy-dealer-link-ext:focus-visible {
  color: #b72d20;
}

.where-to-buy-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10002;
  padding: clamp(16px, 4vw, 40px);
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.52);
  box-sizing: border-box;
}

.where-to-buy-editor-backdrop[hidden] {
  display: none !important;
}

.where-to-buy-editor-backdrop:not([hidden]) {
  display: flex;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.where-to-buy-editor-sheet {
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.2),
    0 8px 16px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

.where-to-buy-editor-title {
  margin: 0;
  font-size: 20px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-weight: 700;
}

.where-to-buy-editor-sheet-head {
  flex-shrink: 0;
}

.where-to-buy-editor-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.where-to-buy-editor-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.where-to-buy-editor-region-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 600;
  font-size: 14px;
}

.where-to-buy-editor-region-hint {
  display: block;
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
  text-transform: none;
  letter-spacing: 0;
}

.where-to-buy-editor-region-combo {
  position: relative;
  z-index: 1;
  margin-top: 4px;
}

.where-to-buy-editor-region-search {
  margin: 0;
}

.where-to-buy-editor-region-listbox {
  z-index: 4;
}

.where-to-buy-edit-error {
  color: var(--color-red-strong, var(--where-buy-accent));
  font-size: 14px;
  margin: 0 0 10px;
}

.where-to-buy-edit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.where-to-buy-edit-list .wb-row {
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding: 12px;
  margin: 0;
}

.where-to-buy-edit-list .wb-row legend {
  padding: 0 6px;
  font-weight: 700;
  font-size: 14px;
}

.where-to-buy-edit-list .wb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 13px;
}

.where-to-buy-edit-list .wb-field span {
  color: var(--where-buy-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.where-to-buy-edit-list .wb-co,
.where-to-buy-edit-list .wb-em,
.where-to-buy-edit-list .wb-ws {
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.where-to-buy-edit-list .wb-adr,
.where-to-buy-edit-list .wb-ph {
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.where-to-buy-edit-list .wb-sale {
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  max-width: 100%;
}

.where-to-buy-edit-list .wb-del {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}

.where-to-buy-editor-sheet-foot {
  flex-shrink: 0;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #e5e5e5;
}

.where-to-buy-editor-foot-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.where-to-buy-editor-foot-actions .btn {
  width: 100%;
  justify-content: center;
}

.where-to-buy-editor-add-btn {
  width: 100%;
  margin-top: 12px;
  justify-content: center;
}

@media (max-width: 767px) {
  .where-to-buy-page .catalog-page-header.section-block.where-to-buy-header {
    padding: 24px 0 30px;
  }

  .where-to-buy-page .where-to-buy-header h1.where-to-buy-title {
    font-size: 26px;
  }

  .where-to-buy-page .section-block.where-to-buy-contact-row {
    grid-template-columns: 1fr;
    gap: 72px;
    margin-bottom: 35px;
    padding-bottom: 0;
  }

  .where-to-buy-copy p,
  .where-to-buy-media-text p {
    font-size: 16px;
    line-height: 1.42;
  }

  .where-to-buy-page .section-block .where-to-buy-copy h3 {
    margin-top: 16px;
    font-size: 22px;
    line-height: 1.2;
  }

  .where-to-buy-media-teaser {
    padding-left: 14px;
  }

  .where-to-buy-map {
    min-height: 420px;
    height: 420px;
  }
}

/* Must use h2.marketing-country-note: beats .section-block h2 (class+tag beats class-only). */
h2.marketing-country-note {
  text-align: center;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red);
  margin: 0;
  line-height: 1.2;
}

.marketing-intro-copy {
  width: 100%;
  max-width: none;
}

.marketing-intro-copy.section-block {
  padding: 0 0 26px;
}

.marketing-intro-copy p {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
}

.marketing-country-heading {
  width: 100%;
  max-width: none;
}

.marketing-country-heading.section-block {
  padding: 2px 0 14px;
}

.marketing-program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 28px;
}

.marketing-program-card {
  display: flex;
  flex-direction: column;
}

.marketing-program-card--single {
  grid-column: 1 / span 1;
}

.marketing-program-media {
  display: block;
  line-height: 0;
}

.marketing-program-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.marketing-program-body {
  padding-top: 14px;
}

.marketing-program-body h3 {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.marketing-program-body p {
  margin: 10px 0 0;
  color: #555;
  font-size: 15px;
  line-height: 1.5;
}

.marketing-program-link {
  display: inline-block;
  margin-top: 10px;
  color: #2f2f2f;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.marketing-program-link:hover,
.marketing-program-link:focus-visible {
  color: var(--red);
}

.marketing-program-link:active {
  color: var(--red);
}

.marketing-program-link::before {
  content: "\2192";
  color: var(--red);
  margin-right: 8px;
}

@media (max-width: 767px) {
  .marketing-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .marketing-program-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.color-cta-teaser {
  display: grid;
  grid-template-columns: 37% 63%;
  align-items: stretch;
  gap: 0;
  margin-top: 32px;
  margin-bottom: 8px;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.color-cta-body {
  padding: 40px 36px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  text-align: center;
  background: var(--red);
  color: #fff;
  box-sizing: border-box;
  min-height: 240px;
}

.color-cta-body .btn-outline-light {
  flex-shrink: 0;
}

.color-cta-body .btn-outline-light:hover,
.color-cta-body .btn-outline-light:focus-visible {
  background: #fff;
  color: var(--red);
  border-color: #fff;
}

.color-cta-heading {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: clamp(1.1rem, 1.85vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

#colour-digital-heading {
  font-size: 22px;
}

.color-cta-media {
  line-height: 0;
  background: #e0e0e0;
  min-height: 240px;
}

.color-cta-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.color-section-rule {
  border: 0;
  border-top: 1px solid #ccc;
  margin-block: 32px 28px;
  margin-inline: auto;
}

.colour-split-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.colour-split-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  padding-bottom: 8px;
}

.colour-split-teaser {
  align-self: start;
}

.colour-split-teaser .teaser-text h3 {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c82127;
  line-height: 1.3;
}

.colour-split-teaser .teaser-text p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #666;
}

.colour-split-photo {
  line-height: 0;
  background: #f4f5f8;
}

.colour-split-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 767px) {
  .color-intro-panel {
    padding: 22px 20px;
  }

  .color-cta-teaser {
    grid-template-columns: 1fr;
  }

  /* DOM: body → media; на мобильной колонке показываем сначала картинку, затем CTA */
  .color-cta-media {
    order: 1;
    min-height: 0;
  }

  .color-cta-body {
    order: 2;
    min-height: 0;
    padding: 32px 24px 36px;
  }

  .color-cta-media img {
    min-height: 200px;
    max-height: 360px;
  }

  .colour-split-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .colour-split-photo {
    order: 1;
  }

  .colour-split-teaser {
    order: 0;
  }
}

.color-prose {
  max-width: 52rem;
}

.color-prose h2 {
  margin: 2rem 0 0.75rem;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red, #c00);
}

.color-prose h2:first-child {
  margin-top: 0;
}

.color-prose h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
}

.color-prose p,
.color-prose li {
  font-size: 16px;
  line-height: 1.55;
  color: #333;
}

.color-prose ul {
  margin: 0.5rem 0 1rem;
  padding-left: 1.25rem;
}

.color-prose li + li {
  margin-top: 0.35rem;
}

.color-steps {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  counter-reset: step;
}

.color-steps li {
  margin: 0.5rem 0;
}

.color-inline-figure {
  margin: 1.5rem 0;
  line-height: 0;
  border-radius: 4px;
  overflow: hidden;
}

.color-inline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.color-source-note {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e8ee;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

.color-source-note a {
  color: var(--red, #c00);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.color-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px 24px;
  margin-top: 8px;
}

/*
 * colour-tools overview (cromax.com /eu/en_GB/colours/colour-tools.html):
 * ряд 50/50 — медиа слева, текст справа; hr между блоками; без карточных рамок.
 */
.colour-tools-page .colour-tools-stack {
  margin-top: 4px;
}

.colour-tools-page .colour-tools-teaser-block {
  margin: 0;
  padding: 0;
}

.colour-tools-page .colour-tools-teaser-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px;
  align-items: center;
}

.colour-tools-page .colour-tools-teaser-media {
  line-height: 0;
  background: #f4f5f8;
}

.colour-tools-page .colour-tools-teaser-media a {
  display: block;
  text-decoration: none;
}

.colour-tools-page .colour-tools-teaser-media a:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 3px;
}

.colour-tools-page .colour-tools-teaser-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.colour-tools-page .colour-tools-teaser-text {
  min-width: 0;
}

.colour-tools-page .colour-tools-teaser-text-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.colour-tools-page .colour-tools-teaser-text-inner:hover .colour-tools-teaser-cta {
  color: #e63c28;
}

.colour-tools-page .colour-tools-teaser-text-inner:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 3px;
  border-radius: 2px;
}

.colour-tools-page .section-block h3.colour-tools-teaser-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #e63c28;
}

.colour-tools-page .colour-tools-teaser-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #555;
}

.colour-tools-page .colour-tools-teaser-desc + .colour-tools-teaser-desc {
  margin-top: 6px;
}

.colour-tools-page .colour-tools-teaser-cta {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  padding-left: 25px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #626266;
}

/* Как .teaser-text .linktext + icon-arrow-right на cromax: стрелка Linearicons, не шеврон */
.colour-tools-page .colour-tools-teaser-cta .icon-arrow-right {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  line-height: 1.45;
}

/* Как у .cromax-section-rule / оригинала: короткая линия по центру, не на всю ширину колонки */
.colour-tools-page .colour-tools-teaser-rule {
  border: 0;
  border-top: 1px solid #c8c8c8;
  width: min(140px, 38vw);
  margin: 28px auto 0;
}

@media (max-width: 767px) {
  .colour-tools-page .colour-tools-teaser-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

.color-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e2e6ed;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.color-card:hover {
  border-color: #cfd6e0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

.color-card-media {
  line-height: 0;
  background: #f4f5f8;
}

.color-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.color-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-card-title {
  font-family: "Titillium Web", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red, #c00);
}

.five-star-country-wrap {
  margin-top: 6px;
}

/* Не тянуть глобальные 58px .section-block — ближе к оригинальным отступам блока стран */
.five-star-country-wrap.section-block {
  padding: 8px 0 36px;
}

.five-star-divider {
  border: 0;
  border-top: 1px solid #c8c8c8;
  margin-block: 6px 18px;
  margin-inline: auto;
}

/* Как на cromax.com: два столбца 50/50, без серой панели .cromax-intro-panel */
.five-star-intro-panel {
  margin: 12px 0 0;
  padding: 0 0 4px;
  background: transparent;
  box-sizing: border-box;
}

.five-star-intro-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
  align-items: center;
}

.five-star-intro-text {
  margin: 0;
  max-width: none;
  text-align: left;
  font-size: 15px;
  line-height: 1.45;
  color: #5a5a5a;
}

/* Правая колонка: кнопка по центру, как .component.button.center на оригинале */
.five-star-intro-cta {
  margin: 0;
  justify-self: center;
  text-align: center;
}

/*
 * На cromax.com у «CONTACT US» класс btn-default, но визуально это залитая красная кнопка
 * (фон #e73c28, белый текст, border 2px), а не локальный контурный .btn-default.
 * Сохраняем классы как на оригинале, переопределяем только в этом блоке.
 */
.five-star-intro-cta .btn.btn-default {
  background: #e73c28;
  border: 2px solid #e63c28;
  color: #fff;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
}

.five-star-intro-cta .btn.btn-default:hover {
  background: #fff;
  border-color: #626266;
  color: #e63c28;
}

.five-star-intro-cta .btn.btn-default:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

.five-star-country-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 30px;
}

.five-star-country-row + .five-star-country-row {
  margin-top: 24px;
}

.five-star-country-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.five-star-country-item img {
  display: inline-block;
  width: 54px;
  min-width: 54px;
  height: 40px;
  object-fit: cover;
}

.five-star-country-item h4 {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--red);
}

.five-star-country-empty {
  min-height: 1px;
}

@media (max-width: 767px) {
  .five-star-intro-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .five-star-intro-text {
    text-align: center;
    max-width: 100%;
  }

  .five-star-intro-cta {
    justify-self: center;
  }

  .five-star-country-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .five-star-country-empty {
    display: none;
  }
}

@media (max-width: 640px) {
  .five-star-country-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .five-star-country-item img {
    width: 46px;
    min-width: 46px;
    height: 34px;
  }
}

.color-card-text {
  font-size: 14px;
  line-height: 1.4;
  color: #444;
}

.color-table-wrap {
  margin: 12px 0 20px;
  overflow-x: auto;
}

.color-spec-table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}

.color-spec-table th,
.color-spec-table td {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid #dde1e8;
}

.color-spec-table th {
  width: 42%;
  background: #f8f9fb;
  font-weight: 600;
}

@media (max-width: 600px) {
  .color-card-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Digital Colour Management page:
 * axbase-like content typography/surfaces under a scoped root so
 * .section-block h2 / catalog defaults do not override the replica.
 */
.digital-colour-management-page {
  --dcm-accent: #e63c28;
  --dcm-text: #555;
  --dcm-text-strong: #333;
  --dcm-panel: #eaeaea;
  --dcm-rule: #cfcfcf;
  --dcm-iframe-bg: #fff;
}

.digital-colour-management-page .section-block {
  padding: 22px 0;
}

.digital-colour-management-content {
  padding-bottom: 52px;
}

.digital-colour-management-page .catalog-page-header.section-block.digital-colour-management-header {
  padding: 26px 0 14px;
  text-align: center;
}

.digital-colour-management-page .digital-colour-management-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dcm-accent);
}

.digital-colour-management-page .digital-colour-management-title-rule {
  width: 227px;
  max-width: min(227px, 38vw);
  margin: 10px auto 0;
  border: 0;
  border-top: 2px solid #c8c8c8;
}

.digital-colour-management-page .digital-colour-management-intro.section-block {
  padding-top: 8px;
  padding-bottom: 16px;
}

.digital-colour-management-intro-panel {
  background: var(--dcm-panel);
  padding: 24px 30px;
}

.digital-colour-management-intro-video-wrap {
  position: relative;
  margin-top: 22px;
  background: #000;
  line-height: 0;
}

.digital-colour-management-intro-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: top;
}

.digital-colour-management-intro-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 14vw, 104px);
  height: clamp(72px, 14vw, 104px);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.digital-colour-management-intro-play:focus {
  outline: none;
}

.digital-colour-management-intro-play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.digital-colour-management-intro-play-shape {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: rgba(230, 60, 40, 0.82);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, transform 0.12s ease;
}

.digital-colour-management-intro-play:hover .digital-colour-management-intro-play-shape,
.digital-colour-management-intro-play:focus-visible .digital-colour-management-intro-play-shape {
  background: rgba(230, 60, 40, 0.92);
  transform: scale(1.04);
}

.digital-colour-management-intro-play-icon {
  display: block;
  width: 0;
  height: 0;
  margin-left: clamp(3px, 0.9vw, 6px);
  border-style: solid;
  border-width: clamp(11px, 2.5vw, 17px) 0 clamp(11px, 2.5vw, 17px) clamp(17px, 3.8vw, 26px);
  border-color: transparent transparent transparent #fff;
}

.digital-colour-management-intro-play.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.digital-colour-management-intro-text,
.digital-colour-management-package-text,
.digital-colour-management-technology-text,
.digital-colour-management-tools-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dcm-text);
}

.digital-colour-management-features.section-block {
  padding-top: 48px;
  padding-bottom: 12px;
}

.digital-colour-management-feature-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
  gap: 24px 34px;
  align-items: center;
}

.digital-colour-management-feature-row + .digital-colour-management-feature-row {
  margin-top: 26px;
}

.digital-colour-management-feature-media,
.digital-colour-management-hero-card,
.digital-colour-management-tools-media {
  margin: 0;
  line-height: 0;
}

.digital-colour-management-feature-media img,
.digital-colour-management-hero-card img,
.digital-colour-management-tools-media img {
  display: block;
  width: 100%;
  height: auto;
}

.digital-colour-management-page .section-block h2.digital-colour-management-section-title {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dcm-accent);
}

/*
 * Маркеры как на cromax (axbase): Linearicons, тот же глиф что .icon-check — content "\e934"
 * (см. tmp/axbase-clientlibs.min.css). Шрифт "Axalta" (Axalta.woff) — другой набор; \e900 там не галочка.
 */
.digital-colour-management-list {
  margin: 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
}

.digital-colour-management-list li {
  position: relative;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dcm-text);
}

.digital-colour-management-list li:last-child {
  margin-bottom: 0;
}

.digital-colour-management-list li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: var(--dcm-accent);
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.digital-colour-management-list li a::before {
  display: none;
}

.digital-colour-management-list--strong li {
  color: var(--dcm-text-strong);
  font-weight: 700;
}

/* Как на cromax: не на всю ширину контейнера, а короткий сегмент (~20–25%). */
.digital-colour-management-divider {
  width: 23%;
  min-width: 56px;
  height: 1px;
  flex-shrink: 0;
  margin: 0 auto 22px;
  background: var(--dcm-rule);
}

.digital-colour-management-packages.section-block {
  padding-top: 18px;
}

.digital-colour-management-packages-header {
  margin-bottom: 8px;
}

.digital-colour-management-page .section-block h2.digital-colour-management-packages-title {
  margin-bottom: 8px;
  font-size: 30px;
  text-align: left;
}

.digital-colour-management-package-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 24px 34px;
  align-items: start;
}

/* Между рядами — разделитель; отступ задаём у него (ряд + div не дают соседних article). */
.digital-colour-management-package-row + .digital-colour-management-divider--between-packages {
  margin-top: 24px;
  margin-bottom: 24px;
}

.digital-colour-management-package-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.digital-colour-management-page .section-block h3.digital-colour-management-package-name {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dcm-accent);
}

.digital-colour-management-package-subtitle {
  margin: -2px 0 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dcm-accent);
}

.digital-colour-management-package-lead {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--dcm-text-strong);
  font-weight: 700;
}

/* HTML5 Animate внутри iframe — фикс 1200×675; без масштаба появляются скроллы. Масштаб = ширина контейнера / 1200. */
.digital-colour-management-package-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dcm-iframe-bg);
  container-type: inline-size;
  container-name: dcm-package-media;
}

.digital-colour-management-package-media iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 1200px;
  height: 675px;
  max-width: none;
  border: 0;
  background: var(--dcm-iframe-bg);
  transform-origin: 0 0;
  transform: scale(calc(100cqw / 1200px));
}

.digital-colour-management-technology.section-block {
  padding-top: 18px;
}

.digital-colour-management-technology-text {
  max-width: 980px;
}

.digital-colour-management-hero-card {
  margin-top: 20px;
}

.digital-colour-management-story.section-block {
  padding-top: 18px;
}

.digital-colour-management-story-card {
  display: block;
  padding: 22px 26px 24px;
  background: var(--dcm-panel);
  color: inherit;
  transition: background-color 0.2s ease;
}

.digital-colour-management-story-card:hover,
.digital-colour-management-story-card:focus-visible {
  background: #e8e8e8;
}

.digital-colour-management-story-card:focus-visible {
  outline: 2px solid var(--dcm-accent);
  outline-offset: 2px;
}

.digital-colour-management-story-title {
  display: block;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dcm-accent);
}

.digital-colour-management-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dcm-text-strong);
}

.digital-colour-management-story-link::before {
  content: "\2192";
  color: var(--dcm-accent);
}

.digital-colour-management-tools.section-block {
  padding-top: 18px;
}

/* Как axbase: .component.grey.bgCromax — фон #e63c28, текст и заголовки #fff, кнопка outline white + hover invert */
.digital-colour-management-tools-card {
  display: grid;
  grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  gap: 0;
  background: var(--dcm-accent);
  overflow: hidden;
}

.digital-colour-management-tools-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  text-align: center;
  color: #fff;
}

.digital-colour-management-page .section-block .digital-colour-management-tools-copy h2.digital-colour-management-section-title {
  margin-bottom: 18px;
  font-size: 30px;
  color: #fff;
  text-align: center;
}

.digital-colour-management-tools-copy p {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
  text-align: center;
}

.digital-colour-management-tools-button.btn.btn-default {
  margin-top: 30px;
  margin-bottom: 5px;
  padding: 10px 31px 11px;
  background: transparent;
  border-width: 2px;
  border-color: #fff;
  color: #fff;
  border-radius: 3px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}

.digital-colour-management-tools-button.btn.btn-default:hover,
.digital-colour-management-tools-button.btn.btn-default:focus-visible {
  background: #fff;
  color: var(--dcm-accent);
  border-color: #fff;
}

.digital-colour-management-tools-button.btn.btn-default:active {
  background: #fff;
  color: var(--dcm-accent);
  border-color: #fff;
}

@media (max-width: 767px) {
  .digital-colour-management-feature-row,
  .digital-colour-management-package-row,
  .digital-colour-management-tools-card {
    grid-template-columns: 1fr;
  }

  /* Мобильная колонка: как на cromax — сначала изображение, под ним текст и CTA */
  .digital-colour-management-tools-media {
    order: -1;
  }

  .digital-colour-management-package-media {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  .digital-colour-management-page .section-block {
    padding: 18px 0;
  }

  .digital-colour-management-page .catalog-page-header.section-block.digital-colour-management-header {
    padding: 22px 0 10px;
  }

  .digital-colour-management-page .digital-colour-management-title {
    font-size: 26px;
  }

  .digital-colour-management-page .digital-colour-management-title-rule {
    width: min(160px, 44vw);
  }

  .digital-colour-management-intro-panel,
  .digital-colour-management-story-card,
  .digital-colour-management-tools-copy {
    padding-left: 20px;
    padding-right: 20px;
  }

  .digital-colour-management-page .section-block h2.digital-colour-management-section-title {
    font-size: 20px;
  }

  .digital-colour-management-page .section-block h2.digital-colour-management-packages-title,
  .digital-colour-management-page .section-block .digital-colour-management-tools-copy h2.digital-colour-management-section-title {
    font-size: 26px;
  }

  .digital-colour-management-page .section-block h3.digital-colour-management-package-name {
    font-size: 20px;
  }

  .digital-colour-management-feature-row + .digital-colour-management-feature-row,
  .digital-colour-management-package-row + .digital-colour-management-package-row {
    margin-top: 22px;
  }
}

/* Полноширинный mood-баннер между шапкой и main (как moodImage на оригинале Irus Scan) */
.irus-scan-mood-wrap {
  display: block;
  width: 100%;
  line-height: 0;
}

/* ——— Axalta Irus Scan (реплика refinish.axalta.eu, theme_color9 / axbase headline) ——— */
.irus-scan-page {
  --irus-text: #484848;
  --irus-heading: #000000;
  --irus-accent: #e31837;
  --irus-panel: #eaeaea;
  --irus-rule: #d9d9d9;
}

.irus-scan-page .irus-scan-content {
  color: var(--irus-text);
  padding-bottom: 32px;
}

.irus-scan-page .section-block {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 28px;
}

.irus-scan-page .irus-scan-head {
  text-align: center;
  padding-top: 8px;
  margin-bottom: 22px;
}

.irus-scan-page .irus-scan-head .irus-scan-h1 {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--red);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-head .irus-scan-h2-sub {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--irus-accent);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-head-rule {
  display: block;
  width: 227px;
  max-width: 56vw;
  height: 2px;
  margin: 14px auto 0;
  border: none;
  background: var(--irus-accent);
}

.irus-scan-page .irus-scan-lead {
  text-align: center;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 32px;
}

.irus-scan-page .irus-scan-lead .irus-scan-lead-title {
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--irus-heading);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-lead .irus-scan-lead-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
}

.irus-scan-page .irus-scan-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 40px;
  margin-bottom: 36px;
}

.irus-scan-page .irus-scan-split-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.irus-scan-page .irus-scan-split-media {
  flex: 0 1 360px;
  margin: 0;
  max-width: 100%;
}

.irus-scan-page .irus-scan-split-media img {
  display: block;
  width: 100%;
  height: auto;
}

.irus-scan-page .irus-scan-pillar-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--irus-heading);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-pillar-body {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.45;
}

.irus-scan-page .irus-scan-spec-intro {
  text-align: center;
  margin-bottom: 28px;
}

.irus-scan-page .irus-scan-spec-intro .irus-scan-spec-intro-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--irus-heading);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-horizontal {
  display: block;
  width: 100%;
  max-width: none;
  height: 2px;
  margin: 0;
  border: none;
  background: var(--irus-rule);
}

.irus-scan-page .irus-scan-horizontal--mobile {
  display: none;
  margin: 8px 0 20px;
}

.irus-scan-page .irus-scan-triple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  margin-bottom: 28px;
}

.irus-scan-page .irus-scan-triple-media {
  flex: 1 1 200px;
  margin: 0;
  max-width: 280px;
  min-width: 0;
}

.irus-scan-page .irus-scan-triple-media img {
  display: block;
  width: 100%;
  height: auto;
}

.irus-scan-page .irus-scan-triple-copy {
  flex: 2 1 280px;
  min-width: 0;
}

.irus-scan-page .irus-scan-triple-copy .irus-scan-row-heading {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--irus-accent);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-triple-copy p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

.irus-scan-page .irus-scan-process-intro {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 24px;
}

.irus-scan-page .irus-scan-process-brand {
  margin: 0 0 8px;
  font-size: clamp(24px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--irus-heading);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-process-tagline {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
}

.irus-scan-page .irus-scan-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
  margin-bottom: 36px;
}

.irus-scan-page .irus-scan-overview-media {
  flex: 0 1 360px;
  margin: 0;
  max-width: 100%;
}

.irus-scan-page .irus-scan-overview-media img {
  display: block;
  width: 100%;
  height: auto;
}

.irus-scan-page .irus-scan-overview-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.irus-scan-page .irus-scan-overview-lead,
.irus-scan-page .irus-scan-overview-steps {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.45;
}

.irus-scan-page .irus-scan-overview-cta-wrap {
  margin: 18px 0 0;
  text-align: center;
}

.irus-scan-page .irus-scan-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.irus-scan-page .irus-scan-step-card {
  background: var(--irus-panel);
  padding: 16px 14px 20px;
  box-sizing: border-box;
}

.irus-scan-page .irus-scan-step-title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--irus-heading);
  text-transform: none;
  letter-spacing: 0;
}

.irus-scan-page .irus-scan-step-body p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.45;
}

.irus-scan-page .irus-scan-step-img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 8px;
}

.irus-scan-page .irus-scan-step-link {
  display: block;
}

.irus-scan-page .irus-scan-cta-learn.btn.btn-default {
  display: inline-block;
  padding: 10px 28px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--irus-accent);
  border: 1px solid var(--irus-accent);
}

.irus-scan-page .irus-scan-cta-learn.btn.btn-default:hover,
.irus-scan-page .irus-scan-cta-learn.btn.btn-default:focus-visible {
  color: var(--irus-accent);
  background: #fff;
  border-color: #c8c8c8;
  outline: none;
}

.irus-scan-page .irus-scan-cta-learn.btn.btn-default:active {
  color: #fff;
  background: #c41230;
  border-color: #c41230;
}

.irus-scan-page .irus-scan-footer-banner {
  text-align: center;
}

.irus-scan-page .irus-scan-banner-link {
  display: block;
  line-height: 0;
}

.irus-scan-page .irus-scan-banner-link img {
  width: 100%;
  height: auto;
}

.irus-scan-page .irus-scan-banner-cta-wrap {
  margin: 18px 0 0;
}

@media (max-width: 767px) {
  .irus-scan-page .irus-scan-horizontal--mobile {
    display: block;
  }

  .irus-scan-page .irus-scan-steps {
    grid-template-columns: 1fr;
  }

  .irus-scan-page .irus-scan-triple {
    flex-direction: column;
    align-items: stretch;
  }

  .irus-scan-page .irus-scan-triple-media {
    flex-basis: auto;
    max-width: none;
  }

  .irus-scan-page .irus-scan-triple-copy {
    order: 2;
  }

  .irus-scan-page .irus-scan-triple-media:first-of-type {
    order: 1;
  }

  .irus-scan-page .irus-scan-triple-media:last-of-type {
    order: 3;
  }
}

@media (max-width: 767px) {
  .irus-scan-page .irus-scan-head .irus-scan-h1 {
    font-size: 26px;
  }

  .irus-scan-page .irus-scan-head .irus-scan-h2-sub {
    font-size: 20px;
  }

  .irus-scan-page .irus-scan-split {
    flex-direction: column;
  }

  .irus-scan-page .irus-scan-split-media {
    flex-basis: auto;
    width: 100%;
  }
}

/* Реплики страниц раздела "Цвета": у оригиналов основной контент идет без левого facet-меню. */
.color-replica-page .facet-page-row {
  display: block;
  margin-top: 8px;
}

.color-replica-page .facetSection[data-cromax-facet-sidebar] {
  display: none;
}

.color-replica-page .facetMain {
  display: block;
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* ——— Левое меню facetSection (как на cromax.com: плюсы, уровни, #555 / #e31b23) ——— */
.color-content-page .facet-page-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 32px;
  margin-top: 8px;
}

.color-content-page .facetSection.gridBorder {
  flex: 0 1 308px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: #fff;
  box-sizing: border-box;
}

.color-content-page .facetMain {
  flex: 1 1 0;
  min-width: 0;
}

/* Как на cromax.com (Bootstrap col-lg-*): левое subNavigation только от 1200px; на планшетах/мобиле колонка пустая — не показываем facet-меню. Header/footer не трогаем. */
@media (max-width: 1199px) {
  .color-content-page .facet-page-row > .facetSection[data-cromax-facet-sidebar] {
    display: none;
  }

  .color-content-page .facet-page-row .facetMain {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.color-content-page .facet-nav-inner {
  /* Как body.theme_color13 .subNavigation на cromax.com (Neo Sans → Arial в стеке) */
  --facet-rule: #868686;
  --facet-muted: #626266;
  --facet-active: #e63c28;
  /* Чуть больше «воздуха» по вертикали — проще визуально центрировать ± с текстом */
  --facet-row-pad-y: 6px;
  --facet-line-height: 22px;
  /* L2/L3: база как на cromax (65/95), сдвиг всего блока 2-го уровня на 20px влево */
  --facet-indent-l2: 45px;
  --facet-indent-l3: 75px;
  /* Колонка под ± (чуть крупнее глиф + запас для центрирования) */
  --facet-toggle-size: 34px;
  --facet-toggle-col: 40px;
  --facet-toggle-gap: 6px;
  /* Текст пункта без «+» на L2 — по линии с подписью соседей с иконкой */
  --facet-l2-text-offset: calc(
    var(--facet-indent-l2) + var(--facet-toggle-col) + var(--facet-toggle-gap)
  );
  /* 3-й уровень: мельче L1/L2, но жирнее для читаемости */
  --facet-font-l3: 14px;
  --facet-weight-l3: 700;
  --facet-lh-l3: 20px;
  font-family: "Neo Sans W01", Arial, Helvetica, sans-serif;
  border-top: 1px solid var(--facet-rule);
  border-bottom: 1px solid var(--facet-rule);
}

.color-content-page .facet-block {
  border-bottom: 1px solid var(--facet-rule);
}

.color-content-page .facet-block:last-child {
  border-bottom: none;
}

.color-content-page .facet-block-toggle {
  display: flex;
  align-items: stretch;
  gap: var(--facet-toggle-gap);
  width: 100%;
  margin: 0;
  padding: var(--facet-row-pad-y) 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--facet-muted);
  line-height: var(--facet-line-height);
}

.color-content-page .facet-block-toggle:hover,
.color-content-page .facet-block-toggle:focus-visible {
  color: var(--facet-active);
  outline: none;
}

.color-content-page .facet-block-toggle:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(230, 60, 40, 0.28);
}

.color-content-page .facet-toggle-icon {
  box-sizing: border-box;
  flex: 0 0 var(--facet-toggle-col);
  width: var(--facet-toggle-col);
  min-width: var(--facet-toggle-col);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Lato", "Neo Sans W01", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: var(--facet-toggle-size);
  line-height: 1;
  color: #777777;
  /* Lato/± часто сидит чуть ниже оптического центра */
  transform: translateY(-0.05em);
}

.color-content-page .facet-block-label {
  align-self: center;
}

/* Красный заголовок/± только у раскрытого блока своего уровня (не у вложенных внутри чужой панели) */
.color-content-page .facet-nav-inner > .facet-block.facet-block--expanded > .facet-block-toggle .facet-block-label,
.color-content-page .facet-nav-inner > .facet-block.facet-block--expanded > .facet-block-toggle .facet-toggle-icon {
  color: var(--facet-active);
}

.color-content-page .facet-block--nested.facet-block--expanded > .facet-block-toggle .facet-block-label,
.color-content-page .facet-block--nested.facet-block--expanded > .facet-block-toggle .facet-toggle-icon {
  color: var(--facet-active);
}

/* «Цвета» и др.: ± в первой строке только когда открыт сам раздел */
.color-content-page .facet-nav-inner > .facet-block.facet-block--expanded.facet-block--firstlevel-split .facet-block-firstlevel .facet-toggle-icon {
  color: var(--facet-active);
}

/* Первый уровень (не «Продукты»): + отдельно, подпись — ссылка на первый подпункт */
.color-content-page .facet-block-firstlevel {
  display: flex;
  align-items: stretch;
  gap: var(--facet-toggle-gap);
  width: 100%;
  padding: var(--facet-row-pad-y) 16px;
  box-sizing: border-box;
}

.color-content-page .facet-block-expander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex: 0 0 var(--facet-toggle-col);
  min-width: var(--facet-toggle-col);
  width: var(--facet-toggle-col);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: 0;
}

.color-content-page .facet-block-expander:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(230, 60, 40, 0.28);
  border-radius: 2px;
}

.color-content-page .facet-block-expander:hover .facet-toggle-icon,
.color-content-page .facet-block-expander:focus-visible .facet-toggle-icon {
  color: var(--facet-active);
}

/* Выравнивание строки без подменю (напр. «Контакты») с блоками, где есть колонка ± */
.color-content-page .facet-block-expander-spacer {
  flex: 0 0 var(--facet-toggle-col);
  min-width: var(--facet-toggle-col);
  width: var(--facet-toggle-col);
  align-self: stretch;
}

.color-content-page .facet-block-heading-link {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--facet-muted);
  line-height: var(--facet-line-height);
  text-decoration: none;
}

.color-content-page .facet-block-heading-link:hover,
.color-content-page .facet-block-heading-link:focus-visible {
  color: var(--facet-active);
  outline: none;
}

.color-content-page .facet-block-heading-link:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(230, 60, 40, 0.28);
}

.color-content-page .facet-block--firstlevel-split.facet-block--expanded .facet-block-heading-link {
  color: var(--facet-active);
}

.color-content-page .facet-block-heading-link[aria-current="page"] {
  color: var(--facet-active);
}

.color-content-page .facet-block-panel {
  padding: 0 0 1px;
}

.color-content-page .facet-colours-stack {
  display: flex;
  flex-direction: column;
}

.color-content-page .facet-leaf-link {
  display: block;
  padding: var(--facet-row-pad-y) 16px var(--facet-row-pad-y) var(--facet-l2-text-offset);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--facet-muted);
  line-height: var(--facet-line-height);
  text-decoration: none;
  border-top: 1px solid var(--facet-rule);
}

.color-content-page .facet-leaf-link:hover,
.color-content-page .facet-leaf-link:focus-visible {
  color: var(--facet-active);
  outline: none;
}

/* Текущая страница на L2 — красная только пока открыт родительский раздел 1-го уровня */
.color-content-page .facet-nav-inner > .facet-block.facet-block--expanded .facet-leaf-link--current {
  color: var(--facet-active);
}

.color-content-page .facet-block--nested {
  border-top: 1px solid var(--facet-rule);
  border-bottom: none;
}

.color-content-page .facet-block-toggle--nested {
  padding: var(--facet-row-pad-y) 16px var(--facet-row-pad-y) var(--facet-indent-l2);
  font-size: 16px;
  letter-spacing: 0;
}

.color-content-page .facet-block-panel--nested {
  padding: 0 0 1px;
}

.color-content-page .facet-sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 1px 0;
}

.color-content-page .facet-sublist li {
  margin: 0;
}

/* L2 ссылки в «Обучение», «Услуги» и т.д. — линия сверху и полная ширина, как у leaf / L3 */
.color-content-page .facet-sublink:not(.facet-sublink--deep) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--facet-row-pad-y) 16px var(--facet-row-pad-y) var(--facet-indent-l2);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--facet-muted);
  line-height: var(--facet-line-height);
  text-decoration: none;
  border-top: 1px solid var(--facet-rule);
}

/* На всю ширину колонки, как у остальных строк (линия на всю ширину блока) */
.color-content-page .facet-sublist--deep {
  padding: 0 0 1px 0;
  margin: 0;
}

.color-content-page .facet-sublink--deep {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: var(--facet-row-pad-y) 16px var(--facet-row-pad-y) var(--facet-indent-l3);
  font-size: var(--facet-font-l3);
  font-weight: var(--facet-weight-l3);
  line-height: var(--facet-lh-l3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--facet-muted);
  text-decoration: none;
  border-top: 1px solid var(--facet-rule);
}

.color-content-page .facet-sublink--deep:hover,
.color-content-page .facet-sublink--deep:focus-visible {
  color: var(--facet-active);
  outline: none;
}

.color-content-page .facet-sublink:hover,
.color-content-page .facet-sublink:focus-visible {
  color: var(--facet-active);
  outline: none;
}

/* L2 в панелях «Обучение» и т.п. (без deep) — только при открытом разделе 1-го уровня */
.color-content-page .facet-nav-inner > .facet-block.facet-block--expanded .facet-sublink--current:not(.facet-sublink--deep) {
  color: var(--facet-active);
}

/* L3: красный текущий только когда открыт свой вложенный блок (каталог, инструменты…) */
.color-content-page .facet-block--nested.facet-block--expanded .facet-sublink--deep.facet-sublink--current {
  color: var(--facet-active);
}

.color-content-page .facet-block--contact {
  border-top: 1px solid var(--facet-rule);
  border-bottom: none;
}

.color-content-page .facet-contact-link {
  display: block;
  padding: var(--facet-row-pad-y) 16px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--facet-muted);
  line-height: var(--facet-line-height);
  text-decoration: none;
}

.color-content-page .facet-contact-link:hover,
.color-content-page .facet-contact-link:focus-visible {
  color: var(--facet-active);
  outline: none;
}

@media (max-width: 767px) {
  .color-content-page .facetSection.gridBorder {
    flex: 1 1 100%;
  }
}

/*
 * Axalta Academy — типографика H1–H4 как на cromax (axbase + body.theme_color13):
 * - headlineContent: h1 30px lh1.3; h2 22px !important lh1.3 (#e63c28)
 * - .component.headline h1/h2: 30px, lh 1.3, text-transform none (РЅРµ uppercase РёР· .section-block h2)
 * - .component.headline h3: 20px, mb 18px
 * - body h2 (прочие): 20px base; theme13 generic h2 22px — у нас секции через .component.headline → 30px
 * - body h3–h6: 17px; theme13 h3: 20px !important
 * - h4: 17px (группа body h3–h6)
 * @media (max-width:767px): headlineContent h1 26px; .component.headline h2 остаётся 30px (!important theme)
 */
.axalta-academy-page .section-block {
  margin-bottom: 0;
}

.axalta-academy-page {
  color: #1e1e1e;
  font-size: 15px;
  line-height: 22px;
}

/* Полоса mood: responsive picture, без цветного оверлея (как moodImage на cromax.com) */
.axalta-academy-mood {
  position: relative;
  width: 100%;
  margin: 0 0 28px;
  line-height: 0;
  overflow: hidden;
}

.axalta-academy-mood picture,
.axalta-academy-mood .axalta-academy-mood-img {
  display: block;
  width: 100%;
  height: auto;
}

.axalta-academy-headline {
  margin: 0 0 30px;
  padding-top: 25px;
  padding-bottom: 25px;
  text-align: center;
}

.axalta-academy-page .headlineContent .component.headline {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* headlineContent: перебивает только локальные правила; специфичность с тегом h1/h2 */
.axalta-academy-page .headlineContent h1.axalta-academy-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

.axalta-academy-page .headlineContent h2.axalta-academy-lead {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

/* Как в исходном HTML: THE AXALTA ACADEMY / TRAINING THAT FITS… (uppercase) */
.axalta-academy-page .headlineContent h1.axalta-academy-h1,
.axalta-academy-page .headlineContent h2.axalta-academy-lead {
  text-transform: uppercase;
}

/* Серая черта под H1+H2 (как contact-page-eu-title-rule / our-history-headline-rule) */
.axalta-academy-page .headlineContent .axalta-academy-headline-rule {
  display: block;
  width: 227px;
  max-width: min(227px, 46vw);
  height: 0;
  margin: 10px auto 0;
  border: 0;
  border-bottom: 2px solid #c8c8c8;
}

.axalta-academy-block {
  padding-top: 5px;
  padding-bottom: 0;
}

.axalta-academy-block + .axalta-academy-block {
  margin-top: 30px;
}

.axalta-academy-intro-p {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
  max-width: none;
}

.axalta-academy-hero-cta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  margin-bottom: 0;
  border: none;
  overflow: hidden;
  background: #e63c28;
}

.axalta-academy-hero-media {
  line-height: 0;
  background: #e63c28;
  min-height: 220px;
}

.axalta-academy-video-thumb {
  position: relative;
  display: block;
  height: 100%;
  min-height: 220px;
}

button.axalta-academy-video-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.axalta-academy-video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.axalta-academy-play-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  line-height: 1;
  pointer-events: none;
}

.cromax-modal.axalta-academy-video-modal {
  max-width: min(960px, 96vw);
  max-height: min(92vh, 720px);
}

.axalta-academy-video-modal-body {
  padding: 0 20px 20px;
  box-sizing: border-box;
}

.axalta-academy-video-modal-body video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(72vh, 540px);
  background: #000;
}

.axalta-academy-hero-text {
  padding: 29px 30px 30px;
  background: #e63c28;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-sizing: border-box;
}

.axalta-academy-hero-text p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}

/* .component.headline h2 = 30px theme13 — ОБЯЗАТЕЛЬНО h2.… + .section-block, иначе бьёт .section-block h2 */
.axalta-academy-page .section-block h2.axalta-academy-hero-heading {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

/* На панели .grey.bgCromax: body .component.grey.bgCromax .btn.btn-default */
.axalta-academy-page .axalta-academy-btn-on-red.btn.btn-default {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
}

.axalta-academy-page .axalta-academy-btn-on-red.btn.btn-default:hover {
  background-color: #fff;
  border-color: #fff;
  color: #e63c28;
}

.axalta-academy-page .axalta-academy-btn-on-red.btn.btn-default:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Стандартный body .btn.btn-default на светлом фоне (#c82127 outline) */
.axalta-academy-page .axalta-academy-btn-outline.btn.btn-default {
  background-color: transparent;
  border: 2px solid #c82127;
  color: #c82127;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
}

.axalta-academy-page .axalta-academy-btn-outline.btn.btn-default:hover {
  background-color: #c82127;
  border-color: #c82127;
  color: #fff;
}

.axalta-academy-page .axalta-academy-btn-outline.btn.btn-default:focus-visible {
  outline: 2px solid #c82127;
  outline-offset: 2px;
}

.axalta-academy-underline {
  text-decoration: underline;
}

/* Как в axbase: desktop — только серая полоса с регистрацией (text-align: right); mobile — красный блок + кнопка, затем серая полоса (center). */
.axalta-academy-login-mobile.section-block {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.axalta-academy-login-mobile-hero {
  background: #e63c28;
  padding: 29px 22px 24px;
  text-align: center;
}

.axalta-academy-page .section-block h3.axalta-academy-login-mobile-title {
  margin: 0 0 18px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.axalta-academy-login-mobile-btnwrap {
  margin: 0;
}

.axalta-academy-login-mobile-note-wrap {
  background: #eaeaea;
  padding: 12px 30px;
  box-sizing: border-box;
}

.axalta-academy-page .section-block h3.axalta-academy-login-register-line {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #1e1e1e;
}

.axalta-academy-register-prefix {
  color: #e63c28;
  font-weight: 700;
}

.axalta-academy-login-register-line a {
  color: #868686;
  font-weight: 400;
  text-decoration: none;
}

.axalta-academy-login-register-line a:hover,
.axalta-academy-login-register-line a:focus-visible {
  color: #c82127;
  text-decoration: none;
}

.axalta-academy-login-register-line a:hover u,
.axalta-academy-login-register-line a:focus-visible u {
  text-decoration: none;
}

@media (min-width: 768px) {
  .axalta-academy-login-mobile-hero {
    display: none;
  }

  .axalta-academy-page .section-block h3.axalta-academy-login-register-line {
    text-align: right;
  }
}

@media (max-width: 767px) {
  .axalta-academy-login-mobile-note-wrap {
    padding: 14px 22px 16px;
  }
}

.axalta-academy-page .section-block h2.axalta-academy-section-h2 {
  margin: 0;
  padding-top: 25px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
  text-align: center;
}

.axalta-academy-section-h2--center {
  text-align: center;
}

/* body hr + body .component.headline hr: сверху 10px, снизу 35px, ширина 227px */
.axalta-academy-rule {
  border: 0;
  border-bottom: 2px solid #c8c8c8;
  width: 227px;
  max-width: 100%;
  height: 0;
  margin: 10px auto 35px;
}

.axalta-academy-block > p {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
}

.axalta-academy-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 28px;
  margin-top: 0;
}

/* Колонка: картинка и серый аккордеон одной ширины (как col-6 + accordion на cromax) */
.axalta-academy-role {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  width: 100%;
}

.axalta-academy-role-visual {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  line-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Как .ctaTeaser .ctaTeaserImageDiv picture на axbase: ширина колонки, высота по рендерингу AEM (без лишнего crop) */
.axalta-academy-role-visual .axalta-academy-role-picture {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.axalta-academy-role-visual .axalta-academy-role-picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Как .ctaTeaser .ctaTeaserTextDiv на axbase: подпись по умолчанию скрыта, при наведении на карточку — видна */
.axalta-academy-role-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 22px;
  box-sizing: border-box;
  background: rgba(200, 33, 39, 0.8);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.axalta-academy-role-visual:hover .axalta-academy-role-overlay {
  opacity: 1;
}

/* Устройства без hover (тач): текст всегда виден, иначе блок пустой */
@media (hover: none) {
  .axalta-academy-role-overlay {
    opacity: 1;
  }
}

.axalta-academy-page .section-block h2.axalta-academy-role-title {
  margin: 0 0 8px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.axalta-academy-role-overlay p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  max-width: 36em;
}

/* Аккордеон: на всю ширину колонки, как нижняя часть тизера на оригинале */
.axalta-academy-accordion-block {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  margin-inline: 0;
  background: #eaeaea;
  border-bottom: 1px solid #e1e1e1;
  box-sizing: border-box;
}

.axalta-academy-page .section-block h3.axalta-academy-accordion-heading {
  margin: 0;
  padding: 18px 16px 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #e63c28;
  line-height: 1.3;
  text-align: left;
}

.axalta-academy-details {
  border: none;
  background: transparent;
  border-radius: 0;
}

/* Плавная высота: max-height анимируется из axalta-academy.js (native <details> + grid часто без transition) */
.axalta-academy-details .axalta-academy-details-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}

.axalta-academy-details--motion-reduced .axalta-academy-details-panel {
  max-height: none;
  overflow: visible;
  transition: none;
}

.axalta-academy-summary {
  position: relative;
  display: block;
  margin-top: 20px;
  margin-bottom: 0;
  padding: 14px 5px 14px 51px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #e63c28;
  cursor: pointer;
  list-style: none;
  background: transparent;
}

.axalta-academy-summary::-webkit-details-marker {
  display: none;
}

/* Указатель слева: свёрнуто ▼, открыто ▲ (аналог .component.accordion>section>h3:before) */
.axalta-academy-summary::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #e63c28;
  border-bottom: 0;
  transform: translateY(-50%);
}

.axalta-academy-details[open] .axalta-academy-summary::before {
  border-top: 0;
  border-bottom: 6px solid #e63c28;
  margin-top: -4px;
}

.axalta-academy-list {
  margin: 0;
  padding: 0 16px 16px 36px;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
}

.axalta-academy-role .axalta-academy-accordion-block > .axalta-academy-details > .axalta-academy-details-panel > .axalta-academy-list {
  list-style: none;
  margin: 0;
  padding: 28px 16px 28px 51px;
  background-color: transparent;
  font-weight: 700;
  box-sizing: border-box;
}

.axalta-academy-role .axalta-academy-accordion-block > .axalta-academy-details > .axalta-academy-details-panel > .axalta-academy-list li {
  position: relative;
  padding-left: 6px;
}

.axalta-academy-role .axalta-academy-accordion-block > .axalta-academy-details > .axalta-academy-details-panel > .axalta-academy-list li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e63c28;
}

.axalta-academy-list li + li {
  margin-top: 6px;
}

.axalta-academy-list--tight li + li {
  margin-top: 4px;
}

.axalta-academy-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: 8px;
}

.axalta-academy-pillar-icon {
  width: 100%;
  max-width: 100%;
  margin-bottom: 12px;
  line-height: 0;
}

.axalta-academy-pillar-icon img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* theme_color13 h3: 20px !important — колонки «плюсы» */
.axalta-academy-page .section-block h3.axalta-academy-pillar-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

.axalta-academy-pillar .axalta-academy-list {
  padding-left: 22px;
}

.axalta-academy-pillar .axalta-academy-list li::marker {
  color: #e63c28;
}

/* 4 способа обучения — как .component.mediaTeaser.grey.bgCromax в колонках (ровная высота красных блоков) */
.axalta-academy-learn-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: 0;
  align-items: stretch;
}

.axalta-academy-learn-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  height: 100%;
}

/* Зазор до красного блока — половина прежнего (1× line-height вместо 2×) */
/* min-height: две строки — выравнивание карточек при длинном заголовке «4. …» */
.axalta-academy-page .section-block h3.axalta-academy-learn-title {
  margin: 0 0 1.3em;
  min-height: calc(1.3em * 2);
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #e63c28;
  line-height: 1.3;
  text-align: left;
}

.axalta-academy-learn-cromax {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 18px;
  background: #e63c28;
  color: #fff;
}

.axalta-academy-learn-media {
  flex: 0 0 auto;
  margin: 0 0 16px;
  line-height: 0;
  background: transparent;
}

.axalta-academy-learn-media .axalta-academy-learn-picture {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.axalta-academy-learn-media .axalta-academy-learn-picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.axalta-academy-learn-body {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #fff;
}

.axalta-academy-final-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: stretch;
  margin-top: 8px;
}

/* Как на cromax: красная панель (логин + ghost-кнопка) + светло-серая полоса (регистрация) */
.axalta-academy-final-login {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}

.axalta-academy-final-login-hero {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  background: #e63c28;
  padding: 32px 28px 36px;
  text-align: center;
  box-sizing: border-box;
}

.axalta-academy-final-login-note-wrap {
  flex: 0 0 auto;
  background: #f2f2f2;
  padding: 20px 24px 22px;
  text-align: center;
  box-sizing: border-box;
}

.axalta-academy-page .section-block h3.axalta-academy-final-login-title {
  margin: 0 0 20px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.axalta-academy-final-login-btn {
  margin: 0;
}

.axalta-academy-final-register {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: #555;
}

.axalta-academy-final-register a {
  color: #c82127;
  font-weight: 700;
  text-decoration: underline;
}

.axalta-academy-final-register a:hover,
.axalta-academy-final-register a:focus-visible {
  color: #a01b20;
  text-decoration: underline;
}

.axalta-academy-final-video {
  line-height: 0;
  background: #111;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.axalta-academy-final-video .axalta-academy-loop-video {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 200px;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

.axalta-academy-loop-video {
  display: block;
  width: 100%;
  height: auto;
}

.axalta-academy-map-section {
  margin-top: 40px;
}

.axalta-academy-map-frame {
  margin-top: 8px;
  line-height: 0;
}

.axalta-academy-map-frame iframe {
  display: block;
  max-width: 100%;
  min-height: 550px;
  width: 100%;
}

.axalta-academy-map-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: #1e1e1e;
}

.axalta-academy-map-note a {
  color: #868686;
  text-decoration: underline;
}

.axalta-academy-map-note a:hover,
.axalta-academy-map-note a:focus-visible {
  color: #c82127;
  text-decoration: none;
}

.axalta-academy-outro {
  margin-top: 36px;
  padding-bottom: 24px;
}

.axalta-academy-page .section-block h2.axalta-academy-outro-title {
  margin: 0 0 15px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

.axalta-academy-outro p {
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
  text-align: left;
}

/* Как axbase: body .component.grey + theme_color13 .component.textComponent h3 */
.axalta-academy-contact-box {
  margin: 24px 0 16px;
  padding: 29px 30px 30px;
  background-color: #eaeaea;
  box-sizing: border-box;
}

.axalta-academy-page .section-block h3.axalta-academy-contact-line {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #e63c28;
  line-height: 1.3;
}

.axalta-academy-contact-line a {
  color: #868686;
  text-decoration: underline;
}

.axalta-academy-contact-line a:hover,
.axalta-academy-contact-line a:focus-visible {
  color: #c82127;
  text-decoration: underline;
}

/* body h4: группа с h3–h6 в axbase — 17px */
.axalta-academy-page .section-block h4 {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  color: #1e1e1e;
}

@media (max-width: 767px) {
  .axalta-academy-hero-cta {
    grid-template-columns: 1fr;
  }

  .axalta-academy-hero-text {
    padding: 29px 22px 30px;
  }

  .axalta-academy-role-grid {
    gap: 28px 22px;
  }

  .axalta-academy-pillars {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .axalta-academy-learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .axalta-academy-final-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* axbase: body .headlineContent .component.headline h1 → 26px (выше специфичности чем theme h1) */
  .axalta-academy-page .headlineContent h1.axalta-academy-h1 {
    font-size: 26px;
    line-height: normal;
  }

  .axalta-academy-role .axalta-academy-accordion-block > .axalta-academy-details > .axalta-academy-details-panel > .axalta-academy-list {
    padding: 18px 15px 22px 46px;
  }

  .axalta-academy-summary {
    font-size: 16px;
    padding-left: 46px;
  }

  .axalta-academy-summary::before {
    left: 12px;
  }

  .axalta-academy-learn-cromax {
    padding: 16px 15px;
  }

  .axalta-academy-learn-media {
    margin-bottom: 14px;
  }
}

@media (max-width: 640px) {
  .axalta-academy-role-grid {
    grid-template-columns: 1fr;
  }

  .axalta-academy-learn-grid {
    grid-template-columns: 1fr;
  }

  .axalta-academy-page .section-block h3.axalta-academy-learn-title {
    min-height: 0;
  }
}

/* ——— EU Training hub (cromax.com/eu/en_GB/training.html) — локальная копия training.html ——— */
.training-eu-page {
  color: #1e1e1e;
  font-size: 15px;
  line-height: 22px;
}

.training-eu-page .section-block {
  margin-bottom: 0;
}

.training-eu-mood {
  position: relative;
  width: 100%;
  margin: 0 0 28px;
  line-height: 0;
  overflow: hidden;
}

.training-eu-mood picture {
  display: block;
  width: 100%;
}

.training-eu-mood img {
  display: block;
  width: 100%;
  height: auto;
}

.training-eu-page .training-eu-headline.headlineContent {
  margin: 0 0 5px;
  padding-top: 25px;
  padding-bottom: 12px;
  text-align: center;
}

.training-eu-page .headlineContent .component.headline {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.training-eu-page .headlineContent h1.training-eu-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

.training-eu-page .headlineContent .training-eu-title-rule {
  margin: 10px auto 35px;
  border-bottom: 2px solid #c8c8c8;
}

.training-eu-cta-wrap {
  margin-bottom: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

.training-eu-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  background: #e63c28;
}

.training-eu-cta-text {
  padding: 29px 30px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  box-sizing: border-box;
}

.training-eu-page .section-block h2.training-eu-cta-h2 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
  line-height: 1.3;
  text-align: center;
}

.training-eu-cta-text p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #fff;
}

.training-eu-cta-media {
  line-height: 0;
  background: #e63c28;
  min-height: 0;
}

.training-eu-cta-media img {
  display: block;
  width: 100%;
  height: auto;
}

.training-eu-page .training-eu-cta-btn.btn.btn-default {
  margin-top: 14px;
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
}

.training-eu-page .training-eu-cta-btn.btn.btn-default:hover,
.training-eu-page .training-eu-cta-btn.btn.btn-default:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: #e63c28;
}

.training-eu-page .training-eu-cta-btn.btn.btn-default:active {
  background-color: #fff;
  border-color: #fff;
  color: #e63c28;
}

.training-eu-page .training-eu-cta-btn.btn.btn-default:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.training-eu-grey-panel {
  margin-top: 30px;
  margin-bottom: 0;
  padding: 26px 28px 28px;
  background: #f2f2f2;
  box-sizing: border-box;
  text-align: center;
}

.training-eu-page .section-block h3.training-eu-grey-title {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
}

.training-eu-grey-panel p {
  margin: 0;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
}

.training-eu-pillars {
  margin-top: 28px;
  padding-top: 28px;
  padding-bottom: 8px;
}

.training-eu-page .section-block h3.training-eu-pillar-title {
  margin: 22px 0 10px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
}

.training-eu-page .section-block h3.training-eu-pillar-title:first-child {
  margin-top: 0;
}

.training-eu-pillars p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 22px;
  color: #1e1e1e;
}

.training-eu-loc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 32px;
  margin-top: 12px;
  margin-bottom: 8px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.training-eu-loc-gallery {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}

/* Карусель фото учебного центра — как acquire-color-compact (mediaTeaserSlider) */
.training-eu-loc-media-slider-outer {
  position: relative;
  width: 100%;
}

.training-eu-loc-media-viewport {
  position: relative;
  width: 100%;
}

.training-eu-loc-media-viewport .training-eu-loc-media-prev,
.training-eu-loc-media-viewport .training-eu-loc-media-next {
  z-index: 2;
}

.training-eu-loc-media-viewport .training-eu-loc-media-prev {
  left: max(4px, env(safe-area-inset-left, 0px));
}

.training-eu-loc-media-viewport .training-eu-loc-media-next {
  right: max(4px, env(safe-area-inset-right, 0px));
}

.training-eu-loc-media-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.training-eu-loc-media-track::-webkit-scrollbar {
  display: none;
}

.training-eu-loc-media-track .training-eu-loc-media-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  background: #f2f2f2;
}

.training-eu-loc-media-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.training-eu-loc-media-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap);
  margin-top: 14px;
}

.training-eu-loc-media-dots button {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #d0d0d0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.training-eu-loc-media-dots button.active {
  background: #e63c28;
}

.training-eu-loc-media-dots button:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

.training-eu-loc-address {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 100%;
}

.training-eu-page .section-block h2.training-eu-loc-h2 {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
}

.training-eu-page .training-eu-loc-address h4.training-eu-loc-lines {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #1e1e1e;
}

@media (max-width: 767px) {
  .training-eu-cta-grid {
    grid-template-columns: 1fr;
  }

  .training-eu-cta-media {
    order: -1;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .training-eu-page .facet-page-row > .facetSection[data-cromax-facet-sidebar] {
    display: none;
  }

  .training-eu-page .facet-page-row .facetMain {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .training-eu-cta-grid {
    grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
  }

  .training-eu-cta-media {
    order: 0;
  }
}

@media (max-width: 767px) {
  .training-eu-page .headlineContent h1.training-eu-h1 {
    font-size: 26px;
    line-height: normal;
  }

  .training-eu-page .section-block h2.training-eu-cta-h2 {
    font-size: 26px;
  }
}

/* Axalta Linearicons — те же глифы, что на cromax.com (mediaTeaser icon) */
@font-face {
  font-family: "Axalta Linearicons";
  src: url("../fonts/Axalta-Linearicons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Chromavision Pro Mini */
.chromavision-pro-mini-page {
  color: #555;
  font-size: 15px;
  line-height: 22px;
}

.chromavision-pro-mini-page .section-block {
  margin-bottom: 0;
}

.chromavision-pro-mini-content {
  margin-top: 8px;
}

.chromavision-pro-mini-header {
  margin-bottom: 35px;
  text-align: center;
}

.chromavision-pro-mini-page .chromavision-pro-mini-header h1.chromavision-pro-mini-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.chromavision-pro-mini-title-rule {
  width: 227px;
  max-width: 48vw;
  margin: 10px auto 35px;
  border: 0;
  border-top: 2px solid #c8c8c8;
}

.chromavision-pro-mini-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 32px;
  align-items: center;
}

.chromavision-pro-mini-intro-copy,
.chromavision-pro-mini-detail-copy,
.chromavision-pro-mini-feature-card,
.chromavision-pro-mini-step-copy {
  min-width: 0;
}

.chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-lead,
.chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-feature-title,
.chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-detail-title,
.chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-how-to-title {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-how-to-title {
  margin-bottom: 0;
  text-align: center;
}

.chromavision-pro-mini-intro-copy p,
.chromavision-pro-mini-feature-card p,
.chromavision-pro-mini-detail-copy p,
.chromavision-pro-mini-step-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #555;
}

.chromavision-pro-mini-intro-copy p + p,
.chromavision-pro-mini-feature-card p + p,
.chromavision-pro-mini-detail-copy p + p,
.chromavision-pro-mini-step-copy p + p {
  margin-top: 10px;
}

.chromavision-pro-mini-cta.btn.btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 24px;
  padding: 10px 24px;
  border: 2px solid #e63c28;
  background: #e63c28;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
}

.chromavision-pro-mini-cta.btn.btn-default:hover,
.chromavision-pro-mini-cta.btn.btn-default:focus-visible {
  border-color: #b6b6b6;
  background: #fff;
  color: #e63c28;
}

.chromavision-pro-mini-intro-media,
.chromavision-pro-mini-detail-media {
  margin: 0;
}

.chromavision-pro-mini-step-media {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.chromavision-pro-mini-intro-media img,
.chromavision-pro-mini-detail-media img,
.chromavision-pro-mini-step-media img,
.chromavision-pro-mini-video-preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ширина — var(--cromax-content-block-divider-width) в общем правиле выше */
.chromavision-pro-mini-divider {
  height: 0;
  margin: 35px auto;
  border: 0;
  border-top: 1px solid #c8c8c8;
}

.chromavision-pro-mini-video-shell {
  background: #f2f2f2;
  padding: 16px;
}

.chromavision-pro-mini-inline-video-wrap,
.chromaweb-inline-video-wrap,
.daylight-lamp-inline-video-wrap {
  position: relative;
  background: #000;
  line-height: 0;
}

.daylight-lamp-inline-video-wrap {
  max-width: 1020px;
  margin: 0 auto;
}

.chromavision-pro-mini-inline-video,
.chromaweb-inline-video,
.daylight-lamp-inline-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #000;
  vertical-align: top;
}

.chromavision-pro-mini-inline-play,
.chromaweb-inline-play,
.daylight-lamp-inline-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 20vw, 152px);
  height: clamp(64px, 12vw, 96px);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: #e63c28;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.chromavision-pro-mini-inline-play:focus,
.chromaweb-inline-play:focus,
.daylight-lamp-inline-play:focus {
  outline: none;
}

.chromavision-pro-mini-inline-play:focus-visible,
.chromaweb-inline-play:focus-visible,
.daylight-lamp-inline-play:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.chromavision-pro-mini-inline-play.is-hidden,
.chromaweb-inline-play.is-hidden,
.daylight-lamp-inline-play.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chromavision-pro-mini-inline-play-shape,
.chromaweb-inline-play-shape,
.daylight-lamp-inline-play-shape {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chromavision-pro-mini-inline-play-triangle,
.chromaweb-inline-play-triangle,
.daylight-lamp-inline-play-triangle {
  display: block;
  width: 0;
  height: 0;
  margin-left: clamp(4px, 1vw, 8px);
  border-style: solid;
  border-width: clamp(14px, 2.8vw, 22px) 0 clamp(14px, 2.8vw, 22px) clamp(22px, 4.2vw, 34px);
  border-color: transparent transparent transparent #fff;
}

.chromavision-pro-mini-inline-play:hover,
.chromaweb-inline-play:hover,
.daylight-lamp-inline-play:hover {
  background: #cf3622;
}

.chromavision-pro-mini-video-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.chromavision-pro-mini-video-preview {
  position: relative;
  display: block;
  overflow: hidden;
  background: #ddd;
}

.chromavision-pro-mini-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(230, 60, 40, 0.92);
  color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-size: 28px;
}

.chromavision-pro-mini-video-caption {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  line-height: 22px;
  color: #555;
}

.chromavision-pro-mini-video-card:hover .chromavision-pro-mini-video-caption,
.chromavision-pro-mini-video-card:focus-visible .chromavision-pro-mini-video-caption {
  color: #e63c28;
}

.chromavision-pro-mini-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.chromavision-pro-mini-feature-card {
  padding: 0;
}

.chromavision-pro-mini-feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  color: #e63c28;
  /* −30% к предыдущему кеглю */
  font-size: clamp(24.5px, 5.13vw, 47px);
  line-height: 1;
  text-align: center;
}

.chromavision-pro-mini-feature-icon > span {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
}

.chromavision-pro-mini-feature-icon span[class^="icon-"]::before,
.chromavision-pro-mini-feature-icon span[class*=" icon-"]::before {
  font-family: "Axalta Linearicons", "Linearicons", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.chromavision-pro-mini-feature-icon .icon-rocket::before {
  content: "\e837";
}

.chromavision-pro-mini-feature-icon .icon-check-square::before {
  content: "\e999";
}

.chromavision-pro-mini-feature-icon .icon-archery::before {
  content: "\e870";
}

.chromavision-pro-mini-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.8fr);
  gap: 28px;
  align-items: center;
}

.chromavision-pro-mini-detail-row + .chromavision-pro-mini-detail-row {
  margin-top: 30px;
}

.chromavision-pro-mini-how-to-header {
  margin-bottom: 28px;
  text-align: center;
}

.chromavision-pro-mini-video-shell--how-to {
  margin-bottom: 30px;
}

/* Карусель шагов «Как использовать» — как mediaTeaserSlider (bxSlider, ~3 слайда) на cromax.com */
.chromavision-pro-mini-steps-slider-outer {
  position: relative;
  width: 100%;
}

.chromavision-pro-mini-steps-viewport {
  position: relative;
  width: 100%;
}

.chromavision-pro-mini-steps-viewport .chromavision-pro-mini-steps-prev,
.chromavision-pro-mini-steps-viewport .chromavision-pro-mini-steps-next {
  z-index: 2;
}

.chromavision-pro-mini-steps-viewport .chromavision-pro-mini-steps-prev {
  left: max(4px, env(safe-area-inset-left, 0px));
}

.chromavision-pro-mini-steps-viewport .chromavision-pro-mini-steps-next {
  right: max(4px, env(safe-area-inset-right, 0px));
}

.chromavision-pro-mini-steps-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.chromavision-pro-mini-steps-track::-webkit-scrollbar {
  display: none;
}

.chromavision-pro-mini-steps-track .chromavision-pro-mini-step-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .chromavision-pro-mini-steps-track .chromavision-pro-mini-step-card {
    width: calc((100% - 44px) / 3);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .chromavision-pro-mini-steps-track .chromavision-pro-mini-step-card {
    width: calc((100% - 22px) / 2);
  }
}

@media (max-width: 767px) {
  .chromavision-pro-mini-steps-track .chromavision-pro-mini-step-card {
    width: 100%;
  }
}

.chromavision-pro-mini-steps-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap);
  margin-top: 18px;
}

.chromavision-pro-mini-steps-dots button {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #d0d0d0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chromavision-pro-mini-steps-dots button.active {
  background: #e63c28;
}

.chromavision-pro-mini-steps-dots button:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

.chromavision-pro-mini-step-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  background: #f2f2f2;
}

.chromavision-pro-mini-step-media img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: cover;
}

.chromavision-pro-mini-page .section-block h3.chromavision-pro-mini-step-title {
  margin: 0 0 10px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

@media (max-width: 767px) {
  .chromavision-pro-mini-intro-grid,
  .chromavision-pro-mini-detail-row {
    grid-template-columns: 1fr;
  }

  .chromavision-pro-mini-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .chromavision-pro-mini-page .chromavision-pro-mini-header h1.chromavision-pro-mini-title {
    font-size: 26px;
  }

  .chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-lead,
  .chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-feature-title,
  .chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-detail-title,
  .chromavision-pro-mini-page .section-block h2.chromavision-pro-mini-how-to-title {
    font-size: 20px;
  }

  .chromavision-pro-mini-video-shell {
    padding: 12px;
  }

  .chromavision-pro-mini-video-play {
    width: 68px;
    height: 68px;
    font-size: 22px;
  }

  /* Блоки с иконками под первым видео: крупнее иконки, заголовки по центру, без длинных текстов */
  .chromavision-pro-mini-page .chromavision-pro-mini-feature-icon {
    font-size: clamp(73.5px, 15.39vw, 141px);
    margin-bottom: 22px;
  }

  .chromavision-pro-mini-page .chromavision-pro-mini-feature-card {
    text-align: center;
  }

  .chromavision-pro-mini-page .chromavision-pro-mini-feature-card > p {
    display: none;
  }
}

.acquire-color-compact-content {
  max-width: 100%;
}

.acquire-color-compact-header {
  margin-bottom: 0;
}

.acquire-color-compact-page .acquire-color-compact-header h1.acquire-color-compact-title {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.acquire-color-compact-title-rule {
  width: 227px;
  max-width: 48vw;
  margin: 10px auto 35px;
  border: 0;
  border-top: 2px solid #d0d0d0;
}

.acquire-color-compact-lead-shell,
.acquire-color-compact-copy,
.acquire-color-compact-split {
  max-width: 92%;
  margin-right: auto;
  margin-left: auto;
}

.acquire-color-compact-lead-shell {
  margin-bottom: 4px;
  padding: 18px 24px 16px;
  background: #ececec;
}

.acquire-color-compact-page .section-block h4.acquire-color-compact-lead {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
}

.acquire-color-compact-copy {
  margin-bottom: 32px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.acquire-color-compact-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #555;
}

.acquire-color-compact-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-bottom: 12px;
  padding-top: 8px;
  padding-bottom: 28px;
}

/* Как .digital-colour-management-list: Axalta Linearicons, глиф .icon-check — \e934 */
.acquire-color-compact-split-list ul {
  margin: 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
  font-size: 15px;
  line-height: 1.55;
  color: #555;
}

.acquire-color-compact-split-list li {
  position: relative;
  margin: 0 0 8px;
}

.acquire-color-compact-split-list li:last-child {
  margin-bottom: 0;
}

.acquire-color-compact-split-list li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: #e63c28;
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.acquire-color-compact-split-list li a::before {
  display: none;
}

.acquire-color-compact-split-media {
  width: 100%;
  min-width: 0;
}

/* Карусель в правой колонке — аналог mediaTeaserSlider (bxSlider), одно фото на экран */
.acquire-color-compact-media-slider-outer {
  position: relative;
  width: 100%;
}

.acquire-color-compact-media-viewport {
  position: relative;
  width: 100%;
}

.acquire-color-compact-media-viewport .acquire-color-compact-media-prev,
.acquire-color-compact-media-viewport .acquire-color-compact-media-next {
  z-index: 2;
}

.acquire-color-compact-media-viewport .acquire-color-compact-media-prev {
  left: max(4px, env(safe-area-inset-left, 0px));
}

.acquire-color-compact-media-viewport .acquire-color-compact-media-next {
  right: max(4px, env(safe-area-inset-right, 0px));
}

.acquire-color-compact-media-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  box-sizing: border-box;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.acquire-color-compact-media-track::-webkit-scrollbar {
  display: none;
}

.acquire-color-compact-media-track .acquire-color-compact-media-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  box-sizing: border-box;
  background: #f2f2f2;
}

.acquire-color-compact-media-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.acquire-color-compact-media-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--slider-dot-gap);
  margin-top: 14px;
}

.acquire-color-compact-media-dots button {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #d0d0d0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.acquire-color-compact-media-dots button.active {
  background: #e63c28;
}

.acquire-color-compact-media-dots button:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .acquire-color-compact-page .acquire-color-compact-header h1.acquire-color-compact-title {
    font-size: 26px;
  }

  .acquire-color-compact-lead-shell,
  .acquire-color-compact-copy,
  .acquire-color-compact-split {
    max-width: 100%;
  }

  .acquire-color-compact-lead-shell {
    padding: 16px 18px 14px;
  }

  .acquire-color-compact-page .section-block h4.acquire-color-compact-lead {
    font-size: 18px;
  }

  .acquire-color-compact-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.chromaweb-content {
  max-width: 1070px;
  margin: 0 auto;
}

.chromaweb-header {
  margin-bottom: 5px;
  text-align: center;
}

.chromaweb-page .catalog-page-header.section-block.chromaweb-header {
  padding-bottom: 5px;
}

.chromaweb-page .chromaweb-header h1.chromaweb-title {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.chromaweb-title-rule {
  width: 227px;
  max-width: 48vw;
  margin: 10px auto 35px;
  border: 0;
  border-top: 2px solid #c8c8c8;
}

.chromaweb-page .section-block {
  max-width: 100%;
}

.chromaweb-page .chromaweb-lead-shell.section-block {
  padding-top: 25px;
  padding-bottom: 25px;
}

.chromaweb-page .section-block h2.chromaweb-lead-title,
.chromaweb-page .section-block h2.chromaweb-login-title {
  margin: 0 0 25px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.chromaweb-page .section-block h3.chromaweb-benefits-title,
.chromaweb-page .section-block h3.chromaweb-find-title,
.chromaweb-page .section-block h3.chromaweb-app-title {
  margin: 0 0 10px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: #e63c28;
}

.chromaweb-page .section-block h3.chromaweb-benefits-title,
.chromaweb-page .section-block h3.chromaweb-find-title {
  text-transform: uppercase;
}

.chromaweb-page .section-block.chromaweb-copy {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-page .section-block.chromaweb-benefits-grid {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-page .section-block.chromaweb-icons-grid {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-page .section-block.chromaweb-find-colour {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-page .section-block.chromaweb-app-grid {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-page .section-block.chromaweb-login-copy {
  padding-top: 15px;
  padding-bottom: 15px;
}

.chromaweb-copy,
.chromaweb-login-copy {
  margin-bottom: 30px;
}

.chromaweb-copy p,
.chromaweb-benefits-copy p,
.chromaweb-find-colour p,
.chromaweb-login-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #555;
}

.chromaweb-video-shell {
  margin-bottom: 35px;
  background: #f2f2f2;
  padding: 16px;
  overflow: hidden;
}

.chromaweb-divider {
  height: 0;
  margin-block: 35px;
  margin-inline: auto;
  border-top: 1px solid #c8c8c8;
}

.chromaweb-benefits-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
  row-gap: 28px;
  column-gap: 34px;
  align-items: start;
}

.chromaweb-benefits-copy,
.chromaweb-benefits-aside,
.chromaweb-app-copy {
  min-width: 0;
}

.chromaweb-benefits-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  padding-inline-start: 2em;
}

.chromaweb-benefits-list li {
  position: relative;
  margin: 0;
  padding-left: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: #222;
}

.chromaweb-benefits-list li + li {
  margin-top: 4px;
}

/* Как .digital-colour-management-list / .acquire-color-compact-split-list: Linearicons .icon-check — \e934 */
.chromaweb-benefits-list li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: #e63c28;
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.chromaweb-benefits-list li a::before {
  display: none;
}

.chromaweb-benefits-aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}

.chromaweb-aside-figure,
.chromaweb-app-media,
.chromaweb-icon-card {
  margin: 0;
}

.chromaweb-cta.btn.btn-default {
  min-height: 42px;
  padding: 10px 24px;
  border: 2px solid #e63c28;
  background: #e63c28;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: uppercase;
}

.chromaweb-cta.btn.btn-default:hover,
.chromaweb-cta.btn.btn-default:focus-visible {
  border-color: #b6b6b6;
  background: #fff;
  color: #e63c28;
}

.chromaweb-find-colour {
  margin-bottom: 35px;
}

.chromaweb-quicklink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #e63c28;
}

.chromaweb-quicklink:hover,
.chromaweb-quicklink:focus-visible {
  color: #b92f1f;
}

.chromaweb-quicklink-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  font-size: 18px;
  line-height: 1;
}

.chromaweb-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 34px;
  align-items: center;
  margin-bottom: 42px;
}

.chromaweb-app-title {
  max-width: 22rem;
}

.chromaweb-store-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-top: 22px;
}

.chromaweb-store-badges a {
  display: inline-block;
}

.chromaweb-store-badges img {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
}

.chromaweb-store-badge--apple {
  width: 135px;
  height: 40px;
  background: url("https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg") no-repeat center / contain;
}

.chromaweb-icons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.chromaweb-icon-card {
  display: flex;
  justify-content: center;
}

.chromaweb-icon-card img {
  width: 100%;
  max-width: 472px;
  height: auto;
}

@media (max-width: 767px) {
  .chromaweb-benefits-grid,
  .chromaweb-app-grid {
    grid-template-columns: 1fr;
  }

  .chromaweb-benefits-aside {
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .chromaweb-page .chromaweb-header h1.chromaweb-title {
    font-size: 26px;
  }

  .chromaweb-page .section-block h2.chromaweb-lead-title,
  .chromaweb-page .section-block h2.chromaweb-login-title {
    font-size: 20px;
  }

  .chromaweb-page .section-block h3.chromaweb-benefits-title,
  .chromaweb-page .section-block h3.chromaweb-find-title,
  .chromaweb-page .section-block h3.chromaweb-app-title {
    font-size: 20px;
  }

  .chromaweb-content {
    max-width: 100%;
  }

  .chromaweb-title-rule {
    margin-bottom: 28px;
  }

  .chromaweb-video-shell,
  .chromaweb-find-colour,
  .chromaweb-app-grid {
    margin-bottom: 28px;
  }

  .chromaweb-divider {
    margin-block: 28px;
  }

  .chromaweb-store-badges {
    gap: 14px;
    margin-top: 18px;
  }

  .chromaweb-video-play {
    width: 64px;
    height: 64px;
    font-size: 20px;
  }

  .chromaweb-icons-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .chromaweb-icon-card {
    justify-content: flex-start;
  }
}

/* ChromaLusion page replica */
.chromalusion-page {
  --chromalusion-accent: #e63c28;
  --chromalusion-text: #626266;
  --chromalusion-divider: #e1e1e1;
  --chromalusion-tab-inactive: #8a8a8e;
  --chromalusion-tab-panel-bg: #ebebeb;
}

.chromalusion-page .catalog-page-header.section-block.chromalusion-header {
  margin: 6px 0 0;
  padding: 0;
  text-align: center;
}

.chromalusion-page .chromalusion-title {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chromalusion-accent);
}

.chromalusion-page .chromalusion-rule {
  border: 0;
  border-top: 2px solid #e8e8e8;
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 35px;
}

.chromalusion-page .section-block.chromalusion-intro-row {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 24px 36px;
  align-items: start;
}

.chromalusion-page .chromalusion-intro-copy p,
.chromalusion-page .chromalusion-intro-cta p,
.chromalusion-page .chromalusion-tab-text p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--chromalusion-text);
}

.chromalusion-page .section-block h2.chromalusion-cta-title {
  margin: 0 0 14px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chromalusion-accent);
}

.chromalusion-page .chromalusion-intro-cta p + p {
  margin-top: 14px;
}

.chromalusion-page .chromalusion-cta-btn.btn.btn-default {
  min-width: 168px;
  padding: 12px 22px;
  border: 2px solid var(--chromalusion-accent);
  background: var(--chromalusion-accent);
  color: #fff;
  text-align: center;
}

.chromalusion-page .chromalusion-cta-btn.btn.btn-default:hover,
.chromalusion-page .chromalusion-cta-btn.btn.btn-default:focus-visible {
  border-color: #9a9a9a;
  background: #fff;
  color: var(--chromalusion-accent);
}

.chromalusion-page .chromalusion-divider {
  border: 0;
  border-top: 1px solid var(--chromalusion-divider);
  margin-block: 34px 28px;
  margin-inline: auto;
}

.chromalusion-page .section-block.chromalusion-feature-tabs {
  margin: 0;
  padding: 0;
}

.chromalusion-page .chromalusion-tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 0 0 0;
  padding: 0;
  list-style: none;
}

.chromalusion-page .chromalusion-tab {
  flex: 1 1 200px;
  max-width: 320px;
  margin: 0;
  padding: 8px 10px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Lato", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--chromalusion-tab-inactive);
  text-align: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.chromalusion-page .chromalusion-tab:hover,
.chromalusion-page .chromalusion-tab:focus-visible {
  outline: none;
}

.chromalusion-page .chromalusion-tab:not([aria-selected="true"]):hover,
.chromalusion-page .chromalusion-tab:not([aria-selected="true"]):focus-visible {
  color: #5c5c60;
}

.chromalusion-page .chromalusion-tab:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--chromalusion-accent);
  border-radius: 2px;
}

.chromalusion-page .chromalusion-tab[aria-selected="true"] {
  font-weight: 700;
  color: var(--chromalusion-accent);
  background-color: transparent;
  border-radius: 0;
  padding: 8px 10px 0;
}

.chromalusion-page .chromalusion-tab[aria-selected="true"]:hover,
.chromalusion-page .chromalusion-tab[aria-selected="true"]:focus-visible {
  color: var(--chromalusion-accent);
}

.chromalusion-page .chromalusion-tab-label {
  display: block;
}

.chromalusion-page .chromalusion-tab-caret {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 11px;
}

.chromalusion-page .chromalusion-tab[aria-selected="true"] .chromalusion-tab-caret::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--chromalusion-tab-panel-bg);
}

.chromalusion-page .chromalusion-tab-panels {
  margin: 0;
  padding: 24px 22px 28px;
  background: var(--chromalusion-tab-panel-bg);
  border-radius: 0;
}

.chromalusion-page .chromalusion-tab-panel-inner {
  margin: 0;
  padding: 0;
}

.chromalusion-page .chromalusion-tab-panel-inner--with-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 24px 32px;
  align-items: center;
}

.chromalusion-page .chromalusion-tab-panel-inner--text-only .chromalusion-tab-text {
  max-width: 48rem;
  margin: 0 auto;
}

.chromalusion-page .chromalusion-tab-figure {
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  line-height: 0;
  overflow: hidden;
}

.chromalusion-page .chromalusion-tab-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.chromalusion-page .chromalusion-tab-text a {
  color: var(--chromalusion-accent);
}

.chromalusion-page .chromalusion-tab-text a:hover,
.chromalusion-page .chromalusion-tab-text a:focus-visible {
  color: #b92f20;
}

@media (max-width: 767px) {
  .chromalusion-page .section-block.chromalusion-intro-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .chromalusion-page .chromalusion-tab {
    max-width: none;
  }

  .chromalusion-page .chromalusion-tab-panel-inner--with-media {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .chromalusion-page .chromalusion-title {
    font-size: 26px;
  }

  .chromalusion-page .chromalusion-rule {
    margin-bottom: 28px;
  }

  .chromalusion-page .section-block h2.chromalusion-cta-title {
    font-size: 20px;
  }

  .chromalusion-page .chromalusion-tab-panels {
    padding: 18px 16px 22px;
  }

  .chromalusion-page .chromalusion-tab {
    font-size: 15px;
  }
}

/* --- Cromax EU Contact page replica (scoped) --- */
/*
 * Style matrix (cromax.com EU contact, axbase theme_color13):
 * - Body / intro: #1e1e1e, 15px / 22px
 * - H1 (headline strip): #e63c28, Titillium 700, 30px (26px ≤767), lh 1.3, case as authored
 * - Title rule hr: ~227×2px #c8c8c8 (как training-eu-title-rule), margin-top ~10px
 * - Section H2 В«CONTACT INFORMATIONВ»: #1e1e1e, Titillium 700, ~22px, lh 1.3, uppercase
 * - Company H3: #1e1e1e, 20px, lh 1.3, bold
 * - Address: #1e1e1e, 15px / 22px
 * - Block divider hr: full-width 1px #ddd (horizontalLine)
 * - Form labels: #333-ish, fields border #ccc; error red #c82127 (reserved)
 * - Inline / privacy link: #e63c28, hover underline
 * - Submit: filled #e63c28, white text; hover / focus-visible: white bg, red text, neutral border (#9a9a9a)
 * - «Назад» / «Очистить»: red link #e63c28
 */
.contact-page-eu {
  color: #1e1e1e;
  font-size: 15px;
  line-height: 22px;
}

.contact-page-eu-mood.axalta-academy-mood {
  margin-bottom: 0;
}

.contact-page-eu .facetMain > .section-block {
  margin-bottom: 0;
}

.contact-page-eu-headline {
  margin: 0 0 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  text-align: center;
}

.contact-page-eu .headlineContent .component.headline {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.contact-page-eu .headlineContent h1.contact-page-eu-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
  line-height: 1.3;
}

.contact-page-eu .headlineContent .contact-page-eu-title-rule {
  display: block;
  width: 227px;
  max-width: min(227px, 46vw);
  height: 0;
  margin: 10px auto 0;
  border: 0;
  border-bottom: 2px solid #c8c8c8;
}

/* Секционный H2: та же серая линия, выравнивание по контенту (не по центру как у H1) */
.contact-page-eu .contact-page-eu-h2-rule {
  display: block;
  width: 227px;
  max-width: min(227px, 46vw);
  height: 0;
  margin: 10px 0 18px;
  border: 0;
  border-bottom: 2px solid #c8c8c8;
}

.contact-page-eu-intro p {
  margin: 0 0 12px;
}

.contact-page-eu-intro p:last-child {
  margin-bottom: 0;
}

section.section-block.contact-page-eu-intro {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* Beats .section-block h2 (rule 25) */
.contact-page-eu .section-block h2.contact-page-eu-h2-info {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #e63c28;
}

.contact-page-eu-info-head.section-block {
  padding-top: 6px;
}

.contact-page-eu-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  align-items: start;
  padding-top: 4px;
  padding-bottom: 8px;
}

.contact-page-eu-media-teaser {
  line-height: 0;
  text-align: center;
}

.contact-page-eu-media-teaser picture,
.contact-page-eu-media-teaser img {
  display: block;
  width: 100%;
  max-width: 195px;
  height: auto;
  margin: 0 auto;
}

.contact-page-eu .section-block h3.contact-page-eu-h3-company {
  margin: 0 0 10px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #e63c28;
}

.contact-page-eu-address {
  margin: 0;
}

.contact-page-eu-block-divider {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 22px 0 28px;
}

.contact-page-eu-form-wrap {
  padding-bottom: 40px;
}

.contact-page-eu-form {
  position: relative;
  margin: 0;
  padding: 0;
}

.contact-page-eu-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-bottom: 18px;
}

.contact-page-eu-field label {
  display: block;
  margin: 0 0 6px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #e63c28;
}

.contact-page-eu-req {
  color: #e63c28;
}

.contact-page-eu-field input,
.contact-page-eu-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 12px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  color: #1e1e1e;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
}

.contact-page-eu-field input:focus-visible,
.contact-page-eu-field textarea:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 1px;
}

.contact-page-eu-field--full textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-page-eu-chars-wrap {
  margin-top: 6px;
  font-size: 13px;
  color: #666;
}

/* Honeypot: вне зоны касания; не use display:none — часть ботов пропускает */
.contact-page-eu-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-page-eu-hp input {
  max-width: 1px;
}

.contact-page-eu-form-status {
  display: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  background: #f9f9f9;
  color: #1e1e1e;
}

.contact-page-eu-form-status.is-visible {
  display: block;
}

.contact-page-eu-form-status--ok {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #1b5e20;
}

.contact-page-eu-form-status--err {
  border-color: #c62828;
  background: #ffebee;
  color: #b71c1c;
}

.contact-page-eu-legal {
  margin: 22px 0 20px;
}

.contact-page-eu-legal p {
  margin: 0 0 10px;
}

.contact-page-eu-legal a {
  color: #e63c28;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-page-eu-legal a:hover,
.contact-page-eu-legal a:focus-visible {
  color: #c9291b;
  outline: none;
}

.contact-page-eu-captcha {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
}

.contact-page-eu-captcha-label {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

.contact-page-eu-captcha-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #555;
}

.contact-page-eu-captcha-widget {
  min-height: 120px;
}

.contact-page-eu-captcha-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

.contact-page-eu-captcha-hint code {
  font-size: 11px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  background: #eee;
  padding: 0 4px;
  border-radius: 2px;
}

.contact-page-eu-captcha-file-warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a2c00;
  background: #fff4e0;
  border: 1px solid #e8c36b;
  border-radius: 2px;
}

.contact-page-eu-captcha-file-warning code {
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
  border-radius: 2px;
}

.contact-page-eu-submit:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.contact-page-eu-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 8px;
}

.contact-page-eu-actions-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.contact-page-eu-back {
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #e63c28;
  text-decoration: none;
}

.contact-page-eu-back:hover,
.contact-page-eu-back:focus-visible {
  text-decoration: underline;
  outline: none;
}

.contact-page-eu-clear {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #e63c28;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.contact-page-eu-clear:hover,
.contact-page-eu-clear:focus-visible {
  color: #c9291b;
  outline: none;
}

.contact-page-eu-submit {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 12px 36px;
  min-height: 44px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: #e63c28;
  border: 2px solid #e63c28;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-page-eu-submit:hover,
.contact-page-eu-submit:focus-visible {
  background: #fff;
  color: #e63c28;
  border-color: #9a9a9a;
  outline: none;
}

.contact-page-eu-submit:active {
  background: #f5f5f5;
  color: #c9291b;
  border-color: #9a9a9a;
}

@media (max-width: 767px) {
  .contact-page-eu .headlineContent h1.contact-page-eu-h1 {
    font-size: 26px;
  }

  .contact-page-eu .section-block h2.contact-page-eu-h2-info {
    font-size: 20px;
  }

  .contact-page-eu-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-page-eu-form-row {
    grid-template-columns: 1fr;
  }

  .contact-page-eu-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-page-eu-actions-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-page-eu-submit {
    width: 100%;
  }
}

/* ——— О Cromax (реплика who-we-are, EU axbase / theme_color13) ——— */
.about-cromax-page {
  --about-cromax-accent: #e63c28;
  --about-cromax-body: #1e1e1e;
  --about-cromax-muted: #626266;
  --about-cromax-panel-bg: #f2f2f2;
  --about-cromax-divider: #c8c8c8;
}

.about-cromax-page .catalog-page-header.headlineContent {
  text-align: center;
}

.about-cromax-page .section-block h1.about-cromax-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--about-cromax-accent);
}

.about-cromax-page .cromax-section-rule.about-cromax-title-rule {
  border: 0;
  border-top: 2px solid var(--about-cromax-divider);
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 35px;
}

.about-cromax-page .section-block.about-cromax-lead {
  margin-top: 0;
  padding: 0 0 8px;
  background: transparent;
  border: none;
}

.about-cromax-page .section-block.about-cromax-lead > p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--about-cromax-body);
}

.about-cromax-page .section-block.about-cromax-block {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.about-cromax-page .section-block h2.about-cromax-h2-section {
  margin: 0 0 18px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: var(--about-cromax-accent);
}

.about-cromax-page .about-cromax-video-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}

/* Встроенный плеер: те же классы, что ChromaWeb / Digital colour management (chromaweb-inline-*). */
.about-cromax-page .about-cromax-video-wrap .chromaweb-inline-video-wrap {
  width: 100%;
}

.about-cromax-page .about-cromax-values-panel {
  margin-top: 28px;
  padding: 28px 24px 26px;
  background: var(--about-cromax-panel-bg);
  box-sizing: border-box;
  border: none;
}

.about-cromax-page .section-block h2.about-cromax-values-h2 {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  color: var(--about-cromax-accent);
}

.about-cromax-page .section-block h3.about-cromax-values-h3 {
  margin: 0 0 14px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--about-cromax-accent);
}

/* Как .chromaweb-benefits-list / .digital-colour-management-list: Linearicons .icon-check — \e934 */
.about-cromax-page .about-cromax-values-list {
  margin: 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
  font-size: 16px;
  line-height: 22px;
  color: var(--about-cromax-body);
}

.about-cromax-page .about-cromax-values-list li {
  position: relative;
  margin: 0;
  padding-left: 0;
}

.about-cromax-page .about-cromax-values-list li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: var(--about-cromax-accent);
  position: absolute;
  left: 0;
  /* Вертикальный центр относительно первой строки: line-height 22px / font 16px → половина в em */
  top: calc(0.5 * 22 / 16 * 1em);
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
  transform: translateY(-50%);
}

.about-cromax-page .about-cromax-values-list li a::before {
  display: none;
}

.about-cromax-page .about-cromax-values-list li + li {
  margin-top: 6px;
}

.about-cromax-page .about-cromax-section-divider {
  border: 0;
  border-top: 1px solid var(--about-cromax-divider);
  width: var(--cromax-content-block-divider-width);
  max-width: 100%;
  margin: 28px auto 26px;
  box-sizing: border-box;
}

/* Как cromax who-we-are / .color-cta-teaser: текст ~37 %, фото остальное (63 %). */
.about-cromax-page .about-cromax-cta-row {
  display: grid;
  grid-template-columns: 37% 63%;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  overflow: hidden;
}

.about-cromax-page .about-cromax-cta-text {
  min-width: 0;
  min-height: 240px;
  padding: 40px 32px 44px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: var(--about-cromax-accent);
  color: #fff;
}

.about-cromax-page .about-cromax-cta-head {
  width: 100%;
}

.about-cromax-page .section-block h2.about-cromax-cta-h2 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.about-cromax-page .about-cromax-cta-text > p {
  margin: 0;
  max-width: 36em;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

/* Кнопка LEARN MORE: прозрачный фон, белая обводка (как на оригинале и .training-eu-cta-btn). */
.about-cromax-page .about-cromax-cta-btn.btn.btn-default {
  flex-shrink: 0;
  margin: 0;
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 3px;
  padding: 10px 28px 11px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  line-height: 20px;
}

.about-cromax-page .about-cromax-cta-btn.btn.btn-default:hover,
.about-cromax-page .about-cromax-cta-btn.btn.btn-default:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: var(--about-cromax-accent);
  outline: none;
}

.about-cromax-page .about-cromax-cta-btn.btn.btn-default:active {
  background-color: #fff;
  border-color: #fff;
  color: var(--about-cromax-accent);
}

.about-cromax-page .about-cromax-cta-btn.btn.btn-default:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.about-cromax-page .about-cromax-cta-visual {
  min-width: 0;
  line-height: 0;
  background: #e0e0e0;
  min-height: 240px;
}

.about-cromax-page .about-cromax-cta-img-link {
  display: block;
  height: 100%;
  line-height: 0;
}

.about-cromax-page .about-cromax-cta-visual picture,
.about-cromax-page .about-cromax-cta-visual img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .about-cromax-page .facetMain > .catalog-page-header.section-block {
    padding: 18px 0 12px;
  }

  .about-cromax-page .facetMain > .section-block.about-cromax-lead,
  .about-cromax-page .facetMain > .section-block.about-cromax-block,
  .about-cromax-page .facetMain > .section-block.about-cromax-values-panel,
  .about-cromax-page .facetMain > .section-block.about-cromax-cta-row {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .about-cromax-page .facetMain > .section-block.about-cromax-lead {
    padding-top: 8px;
    padding-bottom: 6px;
  }

  .about-cromax-page .section-block.about-cromax-values-panel {
    margin-top: 16px;
    padding: 22px max(18px, env(safe-area-inset-left)) 20px max(18px, env(safe-area-inset-right));
  }

  .about-cromax-page .section-block h1.about-cromax-h1 {
    font-size: 26px;
  }

  .about-cromax-page .section-block h2.about-cromax-h2-section {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .about-cromax-page .section-block h2.about-cromax-values-h2 {
    font-size: 26px;
  }

  .about-cromax-page .section-block h2.about-cromax-cta-h2 {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  .about-cromax-page .about-cromax-cta-text {
    padding: 32px max(24px, env(safe-area-inset-left)) 36px max(24px, env(safe-area-inset-right));
    align-items: center;
    min-height: 0;
  }

  .about-cromax-page .about-cromax-cta-btn.btn.btn-default {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .about-cromax-page .about-cromax-section-divider {
    margin: 20px auto;
  }

  .about-cromax-page .about-cromax-cta-row {
    grid-template-columns: 1fr;
  }

  .about-cromax-page .about-cromax-cta-visual {
    order: 1;
  }

  .about-cromax-page .about-cromax-cta-text {
    order: 2;
  }

  .about-cromax-page .about-cromax-cta-visual img {
    min-height: 0;
    height: auto;
  }
}

/* ——— Наша история (реплика our-history, EU axbase / theme_color13) ——— */
.our-history-page {
  --our-history-accent: #e63c28;
  --our-history-heading-muted: #bcbcc0;
  --our-history-body: #1e1e1e;
  --our-history-divider: #bcbcc0;
  --our-history-neutral-border: #626266;
  /* Как contact-page-eu-title-rule / contact-page-eu-h2-rule: серая линия под заголовками */
  --our-history-headline-rule: #c8c8c8;
}

.our-history-page .catalog-page-inner {
  max-width: 1170px;
}

.our-history-page .section-block {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.our-history-page .headlineContent .component.headline {
  text-align: center;
}

.our-history-page .headlineContent h1.our-history-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--our-history-accent);
}

.our-history-page .headlineContent h2.our-history-lead {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--our-history-accent);
}

/* Серая черта под парой H1+H2 (как на contacts.html под блоком заголовка) */
.our-history-page .headlineContent .our-history-headline-rule {
  display: block;
  width: 227px;
  max-width: min(227px, 46vw);
  height: 0;
  margin: 10px auto 0;
  border: 0;
  border-bottom: 2px solid var(--our-history-headline-rule);
}

.our-history-page .our-history-headline {
  margin: 0 0 34px;
}

.our-history-page .our-history-year + .our-history-year {
  margin-top: 8px;
}

.our-history-page .our-history-year-head {
  margin: 0 0 22px;
  text-align: center;
}

.our-history-page .section-block h2.our-history-year-label {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--our-history-accent);
}

.our-history-page .our-history-year-head hr {
  border: 0;
  border-top: 2px solid var(--our-history-headline-rule);
  width: 227px;
  max-width: min(227px, 42vw);
  margin: 10px auto 0;
}

.our-history-page .our-history-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 16px;
  align-items: start;
  margin-bottom: 34px;
}

.our-history-page .our-history-copy > * + * {
  margin-top: 12px;
}

.our-history-page .section-block h2.our-history-entry-title {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--our-history-accent);
}

.our-history-page .our-history-copy p,
.our-history-page .our-history-legacy-events p {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--our-history-body);
}

.our-history-page .our-history-copy p a {
  color: var(--our-history-body);
  text-decoration: underline;
}

.our-history-page .our-history-copy p a:hover,
.our-history-page .our-history-copy p a:focus-visible {
  color: var(--our-history-accent);
}

.our-history-page .our-history-media {
  line-height: 0;
}

.our-history-page .our-history-media-picture,
.our-history-page .our-history-media-picture img {
  display: block;
  width: 100%;
  height: auto;
}

.our-history-page .our-history-cta-wrap {
  margin: 18px 0 0;
  text-align: center;
  line-height: normal;
}

.our-history-page .our-history-cta.btn.btn-default {
  background-color: #e73c28;
  border: 2px solid #e73c28;
  color: #fff;
  padding: 10px 31px 11px;
}

.our-history-page .our-history-cta.btn.btn-default:hover,
.our-history-page .our-history-cta.btn.btn-default:focus-visible {
  background-color: #fff;
  color: var(--our-history-accent);
  border-color: var(--our-history-neutral-border);
}

.our-history-page .our-history-cta.btn.btn-default:active {
  background-color: #fff;
  color: var(--our-history-accent);
  border-color: var(--our-history-neutral-border);
}

.our-history-page .our-history-divider {
  border: 0;
  border-top: 1px solid var(--our-history-divider);
  margin: 8px 0 28px;
}

.our-history-page .our-history-wide-media {
  margin-bottom: 24px;
}

.our-history-page .our-history-copy--wide {
  margin-bottom: 28px;
}

.our-history-page .our-history-legacy {
  margin-bottom: 8px;
}

.our-history-page .our-history-legacy-events {
  margin-top: 14px;
}

.our-history-page .our-history-legacy-event + .our-history-legacy-event {
  margin-top: 14px;
}

.our-history-page .section-block h3.our-history-legacy-year {
  margin: 0 0 4px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--our-history-accent);
}

.our-history-page .our-history-footnote {
  margin: 20px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--our-history-body);
}

@media (max-width: 767px) {
  .our-history-page .our-history-row {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 26px;
  }
}

@media (max-width: 767px) {
  .our-history-page .our-history-headline {
    margin-bottom: 26px;
  }

  .our-history-page .headlineContent h1.our-history-h1 {
    font-size: 26px;
  }

  .our-history-page .headlineContent h2.our-history-lead {
    font-size: 20px;
  }

  .our-history-page .section-block h2.our-history-year-label {
    font-size: 30px;
  }

  .our-history-page .section-block h2.our-history-entry-title {
    font-size: 22px;
  }
}

/* -------------------------------------------------------------------------- */
/* Imron Fleet Line Elite Performance Topcoat — EU product page (axbase-style) */
/* -------------------------------------------------------------------------- */
.imron-elite-page {
  --imron-body: #525252;
  --imron-heading: #323232;
}

.imron-elite-page .catalog-page-inner {
  max-width: 1200px;
}

.imron-elite-page header.imron-elite-headline {
  padding-bottom: 15px;
}

.imron-elite-page .headlineContent .component.headline {
  text-align: center;
}

.imron-elite-page .headlineContent h1.imron-elite-h1 {
  margin: 0 0 6px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #e63c28;
}

.imron-elite-page .headlineContent h2.imron-elite-lead {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #e63c28;
}

.imron-elite-page .headlineContent .imron-elite-headline-rule {
  border: 0;
  border-top: 1px solid #c8c8c8;
  width: min(227px, 72vw);
  max-width: 100%;
  margin: 10px auto 35px;
}

.imron-elite-intro-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  margin-bottom: 8px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.imron-elite-page .imron-elite-intro-copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--imron-body);
}

.imron-elite-page .imron-elite-intro-copy p {
  margin: 0 0 1rem;
}

.imron-elite-page .imron-elite-intro-copy p:last-child {
  margin-bottom: 0;
}

.imron-elite-page .imron-elite-h3-strong {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  color: var(--imron-heading);
}

.imron-elite-page h3.imron-elite-h3-strong strong,
.imron-elite-page .section-block h2.imron-elite-col-title strong,
.imron-elite-page .section-block h2.imron-elite-applications-h2 strong,
.imron-elite-page .section-block.imron-elite-outro-row h2.imron-elite-outro-title strong,
.imron-elite-page .section-block h2.imron-elite-cta-title strong {
  color: #e63c28;
}

.imron-elite-media-169,
.imron-elite-media-tall {
  margin: 0;
}

.imron-elite-media-169 img,
.imron-elite-media-tall img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.imron-elite-triple-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 28px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  align-items: start;
}

.imron-elite-page .section-block h2.imron-elite-col-title {
  margin: 0 0 16px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
  text-align: center;
}

.imron-elite-page .section-block h2.imron-elite-col-title.imron-elite-col-title--features {
  text-align: left;
}

.imron-elite-list-detail {
  margin: 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
  font-size: 15px;
  line-height: 1.45;
  color: #525252;
}

.imron-elite-list-detail li {
  position: relative;
  margin: 0 0 14px;
  padding-left: 0;
}

.imron-elite-list-detail li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: #e63c28;
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.imron-elite-list-detail li a::before {
  display: none;
}

.imron-elite-list-detail strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: #323232;
}

.imron-elite-list-detail-body {
  display: block;
  font-weight: 400;
  color: #525252;
}

.imron-elite-applications {
  margin-bottom: 40px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.imron-elite-page .section-block h2.imron-elite-applications-h2 {
  margin: 0 0 12px;
  text-align: center;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
}

.imron-elite-page .imron-elite-hr-full {
  border: 0;
  border-top: 1px solid #c8c8c8;
  margin: 8px 0 20px;
  width: 100%;
}

.imron-elite-page .section-block h3.imron-elite-applications-sub {
  margin: 0 auto 22px;
  max-width: 52rem;
  text-align: center;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 400;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
}

.imron-elite-applications-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
}

.imron-elite-applications-panel {
  background: #eeeeee;
  padding: 22px 28px 28px;
  box-sizing: border-box;
}

.imron-elite-list-plain {
  margin: 0;
  list-style: none;
  padding: 0;
  padding-inline-start: 2em;
  font-size: 15px;
  line-height: 1.55;
  color: #54565a;
}

.imron-elite-list-plain li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 0;
}

.imron-elite-list-plain li::before {
  content: "\e934";
  font-family: "Linearicons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.12em;
  color: #e63c28;
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 1.5em;
  margin-left: -1.65em;
  text-align: center;
}

.imron-elite-list-plain li a::before {
  display: none;
}

.imron-elite-outro-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
  margin-bottom: 15px;
}

.imron-elite-outro-copy {
  font-size: 16px;
  line-height: 1.55;
  color: var(--imron-body);
}

.imron-elite-page .section-block.imron-elite-outro-row h2.imron-elite-outro-title {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
}

.imron-elite-outro-copy p {
  margin: 0;
}

.imron-elite-cta-block {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  margin-bottom: 12px;
}

.imron-elite-page .section-block h2.imron-elite-cta-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
}

.imron-elite-cta-wrap {
  margin-top: 8px;
}

.imron-elite-page .imron-elite-cta-btn.btn.btn-default {
  background: #e73c28;
  border: 2px solid #e63c28;
  color: #fff;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
  display: inline-block;
}

.imron-elite-page .imron-elite-cta-btn.btn.btn-default:hover {
  background: #fff;
  border-color: #626266;
  color: #e63c28;
}

.imron-elite-page .imron-elite-cta-btn.btn.btn-default:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .imron-elite-intro-row,
  .imron-elite-triple-row,
  .imron-elite-outro-row {
    grid-template-columns: 1fr;
  }

  .imron-elite-triple-col--visual {
    max-width: 420px;
    margin: 0 auto;
  }

  .imron-elite-applications-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .imron-elite-page .headlineContent h1.imron-elite-h1 {
    font-size: 26px;
  }

  .imron-elite-page .headlineContent h2.imron-elite-lead {
    font-size: 20px;
  }
}

/* -------------------------------------------------------------------------- */
/* Ultra Performance Energy System — EU Cromax product (theme_color13-style) */
/* -------------------------------------------------------------------------- */
.upes-page {
  --upes-body: #525252;
  --upes-heading: #323232;
  --upes-red: #e63c28;
  --upes-grey-panel: #ebebeb;
}

.upes-inner {
  max-width: 1200px;
}

.upes-page .upes-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.upes-page .catalog-page-inner {
  padding-bottom: 32px;
}

.upes-headline {
  padding-bottom: 0;
  text-align: center;
}

.upes-page .headlineContent .component.headline {
  text-align: center;
}

.upes-page .headlineContent h1.upes-title-h1 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--upes-red);
}

.upes-page .section-block.upes-block {
  margin: 0;
  padding: 0;
}

.upes-page .section-block.upes-block.upes-surface-grey {
  padding: 15px;
  box-sizing: border-box;
}

/* Серые полосы на всю ширину окна; горизонтальный отступ как у .container */
.upes-page .section-block.upes-block.upes-surface-grey.upes-surface-fullbleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: max(24px, calc((100vw - 100%) / 2));
  padding-right: max(24px, calc((100vw - 100%) / 2));
}

/* Один сплошной серый блок: заголовок + фото/брошюра + текст (без щелей от gap у .upes-stack) */
.upes-page .section-block.upes-block.upes-surface-grey.upes-surface-fullbleed.upes-intro-grey-band {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(24px, calc((100vw - 100%) / 2));
  padding-right: max(24px, calc((100vw - 100%) / 2));
}

.upes-page .upes-intro-grey-band .upes-intro-banner {
  padding: 18px 0;
}

.upes-page .upes-intro-grey-band .upes-intro-copy {
  padding: 20px 0 24px;
}

/* Блок «Новые бизнес-возможности»: как mediaTeaserWide grey на cromax — один серый full-bleed, слева текст, справа фото */
.upes-page .section-block.upes-block.upes-surface-grey.upes-surface-fullbleed.upes-business-band {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(24px, calc((100vw - 100%) / 2));
  padding-right: max(24px, calc((100vw - 100%) / 2));
}

.upes-page .upes-business-band .upes-business-banner {
  padding: 18px 0;
  text-align: center;
}

.upes-page .section-block h2.upes-h2-centered {
  margin: 0 0 8px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
  color: var(--upes-red);
}

.upes-page .upes-text-centered {
  text-align: center;
}

.upes-page .upes-surface-grey {
  background: var(--upes-grey-panel);
  padding: 20px 22px;
  box-sizing: border-box;
}

.upes-page .upes-lead-strong {
  margin: 0 0 12px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  color: var(--upes-red);
}

.upes-page .upes-body {
  margin: 0 0 12px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--upes-body);
}

.upes-page .upes-body:last-child {
  margin-bottom: 0;
}

.upes-page .upes-note {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--upes-body);
}

.upes-page .section-block h2.upes-section-h2 {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--upes-red);
}

.upes-page .section-block h2.upes-section-h2 strong {
  color: var(--upes-red);
  font-weight: 700;
}

.upes-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}

.upes-figure-169,
.upes-figure-wide {
  margin: 0;
}

.upes-figure-169 img,
.upes-figure-wide img {
  display: block;
  width: 100%;
  height: auto;
}

.upes-energy-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  align-items: start;
}

.upes-accordion {
  margin-top: 14px;
  border: 0;
  padding: 0;
}

.upes-accordion-sum {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 12px 0 6px;
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  color: var(--upes-red);
}

.upes-accordion-sum::-webkit-details-marker {
  display: none;
}

.upes-accordion-sum::before {
  content: "\e93a";
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  font-family: "Linearicons", "Axalta Linearicons", sans-serif;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--upes-red);
}

/* Как на cromax: `.component.accordion>section.active>h3:before { content: '\e939' }` */
.upes-accordion[open] > .upes-accordion-sum::before {
  content: "\e939";
}
.upes-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.upes-accordion[open] .upes-accordion-panel {
  grid-template-rows: 1fr;
}

.upes-accordion-panel > .upes-accordion-inner {
  overflow: hidden;
  min-height: 0;
}

/* Cromax accordion article ×3 padding (было 38/16 и 18/15); фон как на оригинале #eaeaea */
.upes-accordion-inner {
  margin-top: 0;
  padding: 45px 48px 45px;
  background-color: #eaeaea;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .upes-accordion-inner {
    padding: 54px 45px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upes-accordion-panel {
    transition-duration: 0.01ms;
  }
}

.upes-page .upes-accordion-inner .upes-acc-h3 {
  margin: 18px 0 8px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  color: var(--upes-red);
}

.upes-page .upes-accordion-inner .upes-acc-h3:first-child {
  margin-top: 0;
}

.upes-page .upes-accordion-inner .upes-acc-h3 strong {
  color: inherit;
  font-weight: 700;
}

.upes-hr-accent {
  border: 0;
  border-top: 1px solid #c8c8c8;
  margin: 18px 0 4px;
}

.upes-banner-full {
  padding: 18px 20px !important;
}

.upes-page .section-block.upes-surface-grey h2.upes-banner-h2 {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  text-align: center;
  color: var(--upes-red);
}

.upes-brochure {
  background: var(--upes-grey-panel);
  align-self: start;
  display: flex;
  align-items: flex-start;
}

.upes-inv-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px 28px;
  align-items: start;
}

.upes-brochure-inner {
  padding: 0 0 12px;
  max-width: 370px;
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
}

.upes-bro-thumb {
  display: block;
}

.upes-bro-thumb img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 17px;
}

/* Брошюра: как axbase .component.flipBookReader (clientlibs) — Linearicons + цвета ссылок */
/* Как axbase .flipBookReader: 17px под обложкой перед ссылками */
.upes-bro-actions {
  margin: 0;
  text-align: left;
}

.upes-bro-link {
  display: block;
  position: relative;
  padding-left: 24px;
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #868686;
  text-decoration: none;
}

.upes-bro-link + .upes-bro-link {
  margin-top: 6px;
}

.upes-bro-link::before {
  font-family: "Linearicons", "Axalta Linearicons", sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 0;
  top: 4px;
}

.upes-bro-open::before {
  content: "\e944";
}

.upes-bro-dl::before {
  content: "\e8f5";
}

.upes-bro-link:hover {
  text-decoration: none;
  color: #02143a;
}

.upes-bro-link:focus-visible {
  outline: 2px solid #02143a;
  outline-offset: 2px;
}

.upes-bro-link-text {
  display: inline;
}

.upes-bro-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 10px;
  background: #b0b0b0;
  vertical-align: middle;
}

.upes-inv-text {
  padding: 20px 22px !important;
}

.upes-products2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: center;
}

.upes-suite-h3 {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--upes-red);
}

.upes-list-marker {
  margin: 0;
  padding: 0;
  list-style: none;
}

.upes-list-marker li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 22px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--upes-body);
}

.upes-list-marker li::before {
  content: "\e934";
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: "Linearicons", "Axalta Linearicons", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  color: var(--upes-red);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.upes-learn-wrap {
  margin: 18px 0 0;
}

.upes-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #868686;
  text-decoration: none;
}

.upes-learn-more:hover,
.upes-learn-more:focus-visible {
  text-decoration: none;
  color: var(--upes-red);
}

.upes-learn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: "Linearicons", "Axalta Linearicons", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.upes-learn-ico::before {
  content: "\e944";
}

.upes-full-intro {
  padding: 4px 4px 8px !important;
}

.upes-page .section-block h2.upes-ultra-fast-h2 {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  color: var(--upes-red);
}

.upes-page .section-block h2.upes-ultra-fast-h2 strong {
  color: var(--upes-red);
  font-weight: 700;
}

.upes-timing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 24px 28px;
  align-items: start;
}

.upes-time-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--upes-body);
}

/* Как .component.textComponent table на cromax.com (axbase): без рамок, полосы #eaeaea / #fff */
.upes-time-table td {
  border: 0;
  padding: 12px 14px;
  vertical-align: top;
  background-color: #eaeaea;
}

.upes-time-table tbody tr:nth-child(even) td {
  background-color: #fff;
}

.upes-time-table td:last-child {
  width: 108px;
  text-align: center;
  font-weight: 700;
  color: var(--upes-heading);
}

.upes-advantage-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
  align-items: center;
}

.upes-adv-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--upes-red);
}

.upes-page .upes-adv-title strong {
  color: var(--upes-red);
  font-weight: 700;
}

.upes-ul-two {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.upes-ul-two li {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--upes-body);
}

.upes-ul-two li::before {
  content: "\e934";
  position: absolute;
  left: 0;
  top: 0.2em;
  font-family: "Linearicons", "Axalta Linearicons", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  color: var(--upes-red);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.upes-business-wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 28px;
  align-items: stretch;
  background: transparent;
  padding: 0 0 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.upes-business-cover {
  align-self: stretch;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.upes-wide-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: center;
}

.upes-business-points {
  padding: 8px 0 24px;
}

.upes-b-point {
  margin: 0 0 14px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--upes-body);
}

.upes-b-point:last-child {
  margin-bottom: 0;
}

.upes-b-point strong {
  color: var(--upes-red);
}


@media (max-width: 767px) {
  .upes-advantage-chart {
    display: none;
  }

  .upes-advantage-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .upes-page .headlineContent h1.upes-title-h1 {
    font-size: 26px;
  }

  .upes-split,
  .upes-energy-split,
  .upes-products2,
  .upes-timing-grid,
  .upes-inv-grid,
  .upes-business-wide {
    grid-template-columns: 1fr;
  }

  .upes-business-cover {
    order: -1;
  }

  .upes-business-cover .upes-wide-img {
    height: auto;
    min-height: 0;
    max-height: 420px;
    object-fit: cover;
  }

  .upes-energy-copy {
    order: -1;
  }

  .upes-energy-photo {
    order: 1;
  }
}

/* -------------------------------------------------------------------------- */
/* Cromax PS1420 UV High Productive Primer-Surfacer (EU Cromax / theme style) */
/* -------------------------------------------------------------------------- */
.ps1420-page {
  --ps1420-body: #525252;
  --ps1420-heading: #323232;
  --ps1420-red: #e63c28;
  --ps1420-grey-panel: #ebebeb;
}

.ps1420-page .catalog-page-inner.ps1420-inner {
  max-width: 1200px;
  padding-bottom: 32px;
}

.ps1420-page .ps1420-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ps1420-page header.ps1420-headline {
  padding-bottom: 0;
}

.ps1420-page .headlineContent .component.headline {
  text-align: center;
}

.ps1420-page .headlineContent h1.ps1420-h1 {
  margin: 0 0 6px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ps1420-red);
}

.ps1420-page .headlineContent h2.ps1420-lead {
  margin: 0;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ps1420-red);
}

.ps1420-page .headlineContent .ps1420-headline-rule {
  border: 0;
  border-top: 1px solid #c8c8c8;
  width: min(227px, 72vw);
  max-width: 100%;
  margin: 10px auto 0;
}

.ps1420-page .section-block.ps1420-block {
  margin: 0;
  padding: 0;
}

.ps1420-mood.axalta-academy-mood .ps1420-mood-img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

.ps1420-page .section-block.ps1420-block.ps1420-docs,
.ps1420-page .section-block.ps1420-block.ps1420-cta-leaflet {
  margin: 0;
  padding: 0;
}

.ps1420-page .ps1420-body {
  margin: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ps1420-body);
}

.ps1420-page .ps1420-body + .ps1420-body {
  margin-top: 12px;
}

.ps1420-page .ps1420-body--tight {
  margin-top: 14px;
}

.ps1420-page .ps1420-triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: start;
}

.ps1420-page .ps1420-lamp-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ps1420-page .ps1420-figure {
  margin: 0;
}

.ps1420-page .ps1420-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.ps1420-page .ps1420-car-section .ps1420-figure--wide {
  margin: 0;
  width: 100%;
}

.ps1420-page .ps1420-split-products {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: start;
}

.ps1420-page .ps1420-copy-col .ps1420-body:first-of-type {
  margin-top: 0;
}

.ps1420-page .section-block h3.ps1420-promo-h3 {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ps1420-red);
}

.ps1420-page .section-block h3.ps1420-promo-h3 strong {
  color: var(--ps1420-red);
  font-weight: 700;
}

.ps1420-page .ps1420-promo-accent {
  color: var(--ps1420-red);
}

.ps1420-page .ps1420-inline-title {
  color: var(--ps1420-heading);
  font-weight: 700;
}

.ps1420-page .section-block h3.ps1420-h3-section {
  margin: 0 0 14px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ps1420-red);
}

.ps1420-page ul.ps1420-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps1420-page ul.ps1420-checklist li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 1.45em;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ps1420-body);
}

.ps1420-page ul.ps1420-checklist li:last-child {
  margin-bottom: 0;
}

.ps1420-page ul.ps1420-checklist li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.1em;
  font-size: 0.95em;
  color: var(--ps1420-red);
}

.ps1420-page .ps1420-hr-full {
  border: 0;
  border-top: 1px solid #c8c8c8;
  margin: 0 0 22px;
}

.ps1420-page .ps1420-quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 28px;
  align-items: stretch;
}

.ps1420-page .ps1420-quicklinks-panel {
  background: var(--ps1420-grey-panel);
  border: 1px solid #d4d4d4;
  box-sizing: border-box;
  padding: 18px 16px 8px;
}

.ps1420-page .ps1420-quicklink-item {
  margin: 0 0 20px;
}

.ps1420-page .ps1420-quicklink-item:last-child {
  margin-bottom: 0;
}

.ps1420-page a.ps1420-quicklink-a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  text-decoration: none;
  color: var(--ps1420-heading);
  min-height: 60px;
}

.ps1420-page a.ps1420-quicklink-a:hover,
.ps1420-page a.ps1420-quicklink-a:focus-visible {
  text-decoration: none;
}

.ps1420-page a.ps1420-quicklink-a:hover .ps1420-quicklink-label,
.ps1420-page a.ps1420-quicklink-a:focus-visible .ps1420-quicklink-label {
  color: var(--ps1420-red);
}

.ps1420-page .ps1420-quicklink-ico {
  flex: 0 0 64px;
  width: 64px;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.ps1420-page .ps1420-quicklink-ico i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ps1420-red);
  box-sizing: border-box;
  font-size: 18px;
  color: var(--ps1420-red);
}

.ps1420-page .ps1420-quicklink-label {
  flex: 1;
  min-width: 0;
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ps1420-heading);
  align-self: center;
  transition: color 0.15s ease;
}

.ps1420-page .ps1420-cta-leaflet {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px 36px;
  align-items: center;
}

.ps1420-page .ps1420-cta-col {
  text-align: center;
}

.ps1420-page .ps1420-leaflet-col {
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.ps1420-page .ps1420-leaflet-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ps1420-page .ps1420-figure--leaflet img {
  border-radius: 0;
}

.ps1420-page .ps1420-leaflet-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ps1420-red);
}

.ps1420-page .ps1420-leaflet-link:hover .ps1420-leaflet-dl {
  text-decoration: underline;
}

.ps1420-page .section-block h2.ps1420-cta-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #525252;
}

.ps1420-page .section-block h2.ps1420-cta-title strong {
  color: var(--ps1420-red);
  font-weight: 700;
}

.ps1420-page .ps1420-cta-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.ps1420-page .ps1420-cta-btn.btn.btn-default {
  background: #e73c28;
  border: 2px solid #e63c28;
  color: #fff;
  border-radius: 3px;
  padding: 10px 31px 11px;
  line-height: 20px;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-decoration: none;
  box-sizing: border-box;
  display: inline-block;
}

.ps1420-page .ps1420-cta-btn.btn.btn-default:hover {
  background: #fff;
  border-color: #626266;
  color: #e63c28;
}

.ps1420-page .ps1420-cta-btn.btn.btn-default:focus-visible {
  outline: 2px solid #e63c28;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .ps1420-page .headlineContent h1.ps1420-h1 {
    font-size: 26px;
  }

  .ps1420-page .headlineContent h2.ps1420-lead {
    font-size: 20px;
  }

  .ps1420-page .ps1420-triple,
  .ps1420-page .ps1420-quicklinks-grid,
  .ps1420-page .ps1420-split-products,
  .ps1420-page .ps1420-cta-leaflet {
    grid-template-columns: 1fr;
  }

  .ps1420-page .ps1420-lamp-col {
    max-width: 520px;
    margin: 0 auto;
  }

  .ps1420-page .ps1420-cta-col {
    order: 1;
  }

  .ps1420-page .ps1420-leaflet-col {
    order: 0;
    max-width: 360px;
  }
}

/* ----- Поиск по сайту (search.html) ----- */
.site-search-page .site-search-summary {
  margin: 0.5rem 0 0;
  color: #555;
  font-size: 1rem;
  line-height: 1.45;
}

.site-search-page .site-search-section {
  margin-top: 1.75rem;
}

.site-search-page .site-search-section-title {
  font-family: "Titillium Web", Arial, Helvetica, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: #333;
}

.site-search-page .site-search-row + .site-search-row {
  margin-top: 0.5rem;
}

.site-search-page .site-search-hit-desc {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.45;
}

.site-search-page .site-search-empty {
  margin: 0;
  color: #666;
  font-size: 0.98rem;
}

.site-search-page .site-search-page-inner {
  width: 100%;
}

.site-search-page .site-search-hit-actions {
  margin: 1rem 0 0;
  padding: 0;
}

.site-search-page .site-search-hit-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.45rem 1.25rem;
  font-weight: 700;
}

/* ----- Axalta Colour of the Year (Color/color2026.html) — структура по colour-of-the-year ----- */
/* Ширина контента как у axalta: .container { max-width: 1230px }; иначе .catalog-page-inner даёт 1200px. */
.axalta-coty-page .catalog-page-inner {
  max-width: var(--container);
}

.axalta-coty-page .axalta-coty-headlineContent {
  padding: 20px 0 6px;
  text-align: center;
}

.axalta-coty-page .axalta-coty-headlineContent h1.axalta-coty-hero-title {
  margin: 0 0 6px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--red);
  text-transform: none;
  letter-spacing: normal;
}

.axalta-coty-page .axalta-coty-headlineContent h2.axalta-coty-subtitle {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--red, #e63c28);
  text-transform: none;
  letter-spacing: normal;
}

.axalta-coty-page .axalta-coty-headline-hr {
  width: 227px;
  max-width: 100%;
  margin: 10px auto 0;
  border: 0;
  border-top: 2px solid #c4c4c4;
  height: 0;
}

.axalta-coty-page .axalta-coty-intro {
  padding: 8px 0 20px;
}

.axalta-coty-page .axalta-coty-intro p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4b4b;
  text-align: justify;
  text-justify: inter-word;
}

.axalta-coty-page .axalta-coty-video-block {
  padding: 0 0 20px;
}

.axalta-coty-page .axalta-coty-video-block .digital-colour-management-intro-video-wrap {
  margin-top: 0;
}

.axalta-coty-page .axalta-coty-lead {
  padding: 4px 0 28px;
}

.axalta-coty-page .axalta-coty-lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b4b4b;
  text-align: justify;
  text-justify: inter-word;
}

.axalta-coty-page .axalta-coty-history-head {
  padding: 28px 0 6px;
  text-align: center;
}

.axalta-coty-page .axalta-coty-history-head h2.axalta-coty-history-title {
  margin: 0 0 12px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--red);
  text-transform: none;
  letter-spacing: normal;
}

.axalta-coty-page .axalta-coty-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  padding: 20px 0 56px;
}

.axalta-coty-page .axalta-coty-card {
  text-align: center;
}

.axalta-coty-page .axalta-coty-card-media {
  margin: 0 0 12px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eaeaea;
}

.axalta-coty-page .axalta-coty-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axalta-coty-page .axalta-coty-card h2.axalta-coty-card-title {
  margin: 0 0 10px;
  font-family: "Titillium Web", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--red);
  text-transform: none;
  letter-spacing: normal;
}

.axalta-coty-page .axalta-coty-card-body {
  text-align: left;
}

.axalta-coty-page .axalta-coty-card-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4b4b4b;
}

.axalta-coty-page .axalta-coty-card-body em {
  font-style: italic;
  font-weight: 600;
  color: #333;
}

@media (max-width: 767px) {
  .axalta-coty-page .axalta-coty-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
}

@media (max-width: 600px) {
  .axalta-coty-page .axalta-coty-history-grid {
    grid-template-columns: 1fr;
  }

  .axalta-coty-page .axalta-coty-headlineContent h1.axalta-coty-hero-title {
    font-size: 26px;
  }

  .axalta-coty-page .axalta-coty-headlineContent h2.axalta-coty-subtitle {
    font-size: 18px;
  }
}