/*
 * Shared components (WP-6) on the tokens of css/base.css: first screen and task tiles, breadcrumbs, price block and
 * cards, the [kompresorii_prices] cards and /prajs-list/ table, catalogue, rental terms, reviews, FAQ, the requisites
 * table and the text styles of stored content (.page-text). Boards: Main, A-desktop-2, A-mobile, A-mobile-2, Usluga*,
 * Prajs*, Produvka, BK3* (canvas version 60).
 *
 * One markup for every width; grid areas reorder it. Breakpoints as in base.css:
 *   ≥1200 as drawn · 1024–1199 the wide layout, fluid · 768–1023 phone order, two-column grids · <768 phone boards.
 */

/* ---------- Shared pieces ---------- */

.k-eyebrow {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-blue);
}

.k-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  height: 52px;
  padding: 0 24px;
  border-radius: var(--k-radius-control);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.k-button .k-ui-icon {
  flex: none;
}

.k-button--primary {
  background: var(--k-blue);
  color: var(--k-white);
}

.k-button--primary:hover {
  background: var(--k-blue-hover);
  color: var(--k-white);
}

.k-button--outline {
  padding: 0 22px;
  border: 1.5px solid var(--k-ink);
  background: var(--k-white);
  color: var(--k-ink);
}

.k-button--outline:hover {
  color: var(--k-ink);
  background: var(--k-band);
}

.k-button--small {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
}

.k-button--ghost {
  gap: 6px;
  height: auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--k-blue);
  color: var(--k-blue);
  font-size: 15px;
}

.k-button--ghost:hover {
  color: var(--k-blue-hover);
  border-color: var(--k-blue-hover);
  background: var(--k-white);
}

.k-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--k-ink);
  text-decoration: none;
  white-space: nowrap;
}

.k-phone-link:hover {
  color: var(--k-blue-hover);
}

.k-phone-link .k-ui-icon {
  flex: none;
  color: var(--k-blue);
}

/* ---------- Stored content (.page-text): text rows, page content, answers ---------- */

/* Element rules skip the theme's own components printed inside stored content (shortcodes: classes k-…, lists
   with role="list"), so a price table or the help row keeps its own look inside .page-text. A class counts only when
   one of its names starts with «k-»: the block classes wp-block-heading, wp-block-paragraph and wp-block-list also
   contain «k-». The selector list inside :not() keeps the specificity of a single attribute selector. */

.page-text {
  font-size: var(--k-body-size);
  line-height: var(--k-body-line);
  color: var(--k-ink);
  overflow-wrap: break-word;
}

.page-text > :first-child {
  margin-top: 0;
}

.page-text > :last-child {
  margin-bottom: 0;
}

.page-text h2:not([class^="k-"], [class*=" k-"]) {
  margin: 40px 0 16px;
}

.page-text h3:not([class^="k-"], [class*=" k-"]) {
  margin: 32px 0 12px;
  font-size: 24px;
  line-height: 30px;
}

.page-text h4:not([class^="k-"], [class*=" k-"]) {
  margin: 28px 0 10px;
  font-size: 20px;
  line-height: 26px;
}

.page-text :is(h5, h6):not([class^="k-"], [class*=" k-"]) {
  margin: 24px 0 8px;
  font-size: 17px;
  line-height: 1.4;
}

.page-text > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.page-text p:not([class^="k-"], [class*=" k-"]),
.page-text :is(ul, ol):not([class^="k-"], [class*=" k-"]):not([role]) {
  margin: 0 0 16px;
}

.page-text > p:last-child,
.page-text > :is(ul, ol):last-child {
  margin-bottom: 0;
}

.page-text :is(ul, ol):not([class^="k-"], [class*=" k-"]):not([role]) {
  padding-left: 24px;
}

.page-text :is(ul, ol):not([class^="k-"], [class*=" k-"]):not([role]) > li {
  margin: 0 0 8px;
}

.page-text :is(ul, ol):not([class^="k-"], [class*=" k-"]):not([role]) > li:last-child {
  margin-bottom: 0;
}

.page-text :is(ul, ol):not([class^="k-"], [class*=" k-"]):not([role]) > li::marker {
  color: var(--k-blue);
}

.page-text a:not([class^="k-"], [class*=" k-"]) {
  color: var(--k-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-text a:not([class^="k-"], [class*=" k-"]):hover {
  color: var(--k-blue-hover);
}

/* Old editor markup: inline font weights (6 pages) follow the element again, centred headings line up left. */
.page-text [style*="font-weight"] {
  font-weight: inherit !important;
}

.page-text strong[style*="font-weight"],
.page-text b[style*="font-weight"] {
  font-weight: 700 !important;
}

.page-text :is(h2, h3, h4)[style*="text-align"] {
  text-align: left !important;
}

/* Intro quotes of /betonolomy/, /opressovka/ and /peskostrujnoe-oborudovanie/: a lead paragraph, not a citation. */
.page-text blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--k-blue);
  font-size: 19px;
  line-height: 1.55;
  font-style: normal;
}

.page-text blockquote p:last-child {
  margin-bottom: 0;
}

/* The numbered lines of /opressovka/'s «комплектация» are one paragraph with <br>: a little more air between lines. */
.page-text p:not([class^="k-"], [class*=" k-"]):has(> br) {
  line-height: 1.75;
}

/* Lists with icons (wp:list class page-ul, the blowing page). */
.page-text ul.page-ul {
  padding: 0;
  list-style: none;
}

.page-text ul.page-ul > li {
  position: relative;
  padding-left: 36px;
}

.page-text ul.page-ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  top: calc((1lh - 24px) / 2);
  width: 24px;
  height: 24px;
  background: var(--k-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Old TablePress tables in stored content (until bundle 2 swaps them, and after its rollback): scroll, never widen. */
.page-text table:not([class^="k-"], [class*=" k-"]) {
  width: 100%;
  margin: 0 0 16px;
}

.page-text .dt-container,
.page-text .tablepress-scroll-wrapper,
.k-prices__fallback {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 767px) {
  .page-text h2:not([class^="k-"], [class*=" k-"]) {
    margin: 32px 0 12px;
  }

  .page-text h3:not([class^="k-"], [class*=" k-"]) {
    margin: 24px 0 10px;
    font-size: 20px;
    line-height: 26px;
  }

  .page-text h4:not([class^="k-"], [class*=" k-"]) {
    font-size: 18px;
    line-height: 24px;
  }

  .page-text blockquote {
    padding-left: 16px;
    font-size: 17px;
    line-height: 26px;
  }

  .page-text ul.page-ul > li {
    padding-left: 32px;
  }
}

/* ---------- First screen «A» ---------- */

.k-hero {
  background: var(--k-white);
  padding: 40px 0 38px;
}

.k-hero__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}

.k-hero__region {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--k-muted);
}

.k-hero__region .k-ui-icon {
  flex: none;
  color: var(--k-blue);
}

.k-hero__title {
  margin: 16px 0 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.k-hero__title--long {
  font-size: 44px;
  line-height: 1.1;
}

.k-hero__subtitle {
  margin: 14px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.k-hero__description {
  margin: 16px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
}

.k-hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.k-hero__phone {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  color: var(--k-ink);
  text-decoration: none;
  white-space: nowrap;
}

.k-hero__phone:hover {
  color: var(--k-blue-hover);
}

.k-hero__phone .k-ui-icon,
.k-hero__delivery .k-ui-icon {
  flex: none;
  color: var(--k-blue);
}

.k-hero__figure {
  margin: 0 0 0 auto;
  width: 100%;
  max-width: 544px;
}

.k-hero__van {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.k-hero__delivery {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.k-hero__delivery .k-ui-icon {
  margin-top: 1px;
}

.k-hero__delivery > span {
  display: flex;
  flex-direction: column;
}

.k-hero__delivery strong {
  font-size: 16px;
  line-height: 22px;
}

.k-hero__delivery strong + span {
  font-size: 15px;
  line-height: 22px;
  color: var(--k-muted);
}

@media (max-width: 1199px) {
  .k-hero__title {
    font-size: 48px;
  }

  .k-hero__title--long {
    font-size: 40px;
  }
}

@media (max-width: 1023px) {
  .k-hero__title {
    font-size: 42px;
  }

  .k-hero__title--long {
    font-size: 34px;
  }

  .k-hero__subtitle {
    font-size: 20px;
    line-height: 26px;
  }
}

@media (max-width: 767px) {
  .k-hero {
    padding: 20px 0 17px;
  }

  .k-hero__inner {
    display: block;
  }

  .k-hero__region {
    gap: 6px;
  }

  .k-hero__region .k-ui-icon {
    width: 16px;
    height: 16px;
  }

  .k-hero__title {
    margin-top: 10px;
    max-width: 300px;
    font-size: 36px;
    line-height: 38px;
    letter-spacing: -0.01em;
  }

  .k-hero__title--long {
    max-width: none;
    font-size: 30px;
    line-height: 34px;
  }

  .k-hero__subtitle {
    margin-top: 8px;
    font-size: 20px;
    line-height: 26px;
  }

  .k-hero__description {
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
  }

  .k-hero__actions {
    margin-top: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* The phone boards write the arrows as text («… наличие →», «… цены ↓»): a 16 px icon 2 px after the label puts
     the label and the arrow where the glyph and its space sit. */
  .k-hero__actions .k-button {
    width: 100%;
    gap: 2px;
    white-space: normal;
    text-align: center;
  }

  .k-hero__actions .k-ui-icon {
    width: 16px;
    height: 16px;
  }

  .k-hero__prices {
    height: 48px;
    font-size: 16px;
  }

  .k-hero__phone {
    margin-top: 4px;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .k-hero__figure {
    margin: 10px 0 0;
    max-width: none;
  }

  .k-hero__van {
    height: 220px;
    aspect-ratio: auto;
  }

  .k-hero__delivery {
    margin-top: 10px;
  }

  .k-hero__delivery strong {
    line-height: 21px;
  }

  .k-hero__delivery strong + span {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ---------- Task tiles ---------- */

.k-tiles {
  background: var(--k-band);
  padding: 24px 0;
}

.k-tiles__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.k-tiles__tile {
  min-height: 126px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  background: var(--k-white);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  color: var(--k-ink);
  text-decoration: none;
}

.k-tiles__tile:hover {
  color: var(--k-ink);
  border-color: var(--k-blue);
}

.k-tiles__top {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.k-tiles__icon {
  display: flex;
  color: var(--k-blue);
}

.k-tiles__chevron {
  display: flex;
  color: var(--k-muted);
}

.k-tiles__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--k-band);
  color: var(--k-header);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.k-tiles__title {
  margin-top: 8px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
}

/* The tile of the page you are on: filled with the site's blue, white title and icons (owner's option B, 2026-10-06). */
.k-tiles__tile[aria-current="page"],
.k-tiles__tile[aria-current="page"]:hover {
  border-color: var(--k-blue);
  background: var(--k-blue);
  color: var(--k-white);
}

.k-tiles__tile[aria-current="page"] .k-tiles__icon,
.k-tiles__tile[aria-current="page"] .k-tiles__chevron {
  color: var(--k-white);
}

/* 4.7:1 on the blue */
.k-tiles__tile[aria-current="page"] .k-tiles__note {
  color: #dbe6ff;
}

.k-tiles__note {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--k-muted);
}

@media (max-width: 1023px) {
  .k-tiles__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .k-tiles__tile {
    min-height: 110px;
    padding: 10px 12px;
  }

  .k-tiles__tile--wide {
    grid-column: span 2;
  }
}

@media (max-width: 767px) {
  .k-tiles {
    padding: 10px 0;
  }

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

  .k-tiles__tile {
    min-height: 128px;
    border-radius: var(--k-radius-control);
  }

  .k-tiles__tile--wide {
    grid-column: 1 / -1;
    min-height: 92px;
  }

  .k-tiles__chevron .k-ui-icon {
    width: 20px;
    height: 20px;
  }

  .k-tiles__badge {
    height: 24px;
    padding: 0 8px;
  }

  .k-tiles__title {
    margin-top: 4px;
    line-height: 20px;
  }

  .k-tiles__note {
    margin-top: 0;
    line-height: 17px;
  }

  /* With a current tile (Produvka-mobile) the notes sit 2 px lower, as that board draws them; A-mobile and
     Usluga-mobile, with no current tile, keep the notes at 0. */
  .k-tiles__grid:has(> [aria-current="page"]) .k-tiles__note {
    margin-top: 2px;
  }
}

/* ---------- Breadcrumbs ---------- */

.k-crumbs {
  background: var(--k-white);
  padding: 28px 0 0;
}

.k-crumbs__nav p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--k-muted);
}

.k-crumbs__nav a {
  /* Inline padding: a 44 px tall tap target without moving the line (the boards draw 40 px). */
  padding: 14px 0;
  margin: -14px 0;
  color: var(--k-blue);
  text-decoration: none;
}

.k-crumbs__nav a:hover {
  color: var(--k-blue-hover);
  text-decoration: underline;
}

.k-crumbs__sep {
  margin: 0 4px;
}

@media (max-width: 767px) {
  .k-crumbs {
    padding-top: 20px;
  }
}

/* ---------- Price intro and theses ---------- */

.k-price-intro__title {
  margin: 12px 0 0;
  line-height: 1.18;
}

.k-price-intro > .k-price-intro__title:first-child {
  margin-top: 0;
}

.k-price-intro__text {
  margin-top: 16px;
  max-width: 640px;
}

.k-theses {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.k-price-intro > .k-theses:first-child {
  margin-top: 0;
}

.k-theses__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.k-theses__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--k-band);
  color: var(--k-blue);
}

.k-theses__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.k-theses__title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.k-theses__note {
  margin-top: 1px;
  font-size: 15px;
  line-height: 21px;
  color: var(--k-muted);
}

.k-price-intro--row .k-theses {
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
}

@media (max-width: 1023px) {
  .k-price-intro--row .k-theses {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 767px) {
  .k-eyebrow {
    line-height: 21px;
  }

  .k-price-intro__title {
    margin-top: 8px;
    line-height: 31px;
  }

  .k-price-intro__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 22px;
  }

  .k-theses {
    margin-top: 16px;
    gap: 14px;
  }

  .k-theses__item {
    gap: 12px;
  }

  .k-theses__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--k-radius-control);
  }

  .k-theses__note {
    margin-top: 0;
  }
}

/* ---------- Price block (builder pages) ---------- */

.k-prices {
  background: var(--k-white);
  padding: 56px 0;
}

.k-prices__grid {
  display: grid;
  align-items: start;
}

.k-prices__grid > .k-price-intro {
  grid-area: intro;
}

.k-prices__grid > .k-prices__panel {
  grid-area: panel;
}

.k-prices__grid > .k-prices__figure {
  grid-area: figure;
}

.k-prices__grid > .k-prices__actions {
  grid-area: actions;
}

/* Homepage: intro, button, phone and picture in the left column, the panel on the right (Main). */
.k-prices--home .k-prices__grid {
  grid-template-columns: minmax(0, 368fr) minmax(0, 792fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "intro panel"
    "actions panel"
    "figure panel"
    ". panel";
  column-gap: 40px;
}

.k-prices--home .k-prices__actions {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.k-prices--home .k-prices__figure {
  margin: 16px 0 0;
}

.k-prices--home .k-prices__img {
  height: 202px;
}

/* Service pages: intro and actions left, picture right, the panel across (Usluga). */
.k-prices--kits .k-prices__grid,
.k-prices--works .k-prices__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "intro figure"
    "actions figure"
    "panel panel";
  column-gap: 40px;
}

.k-prices--kits .k-prices__figure,
.k-prices--works .k-prices__figure {
  margin: 0;
  align-self: center;
}

.k-prices--kits .k-prices__img,
.k-prices--works .k-prices__img {
  height: 316px;
}

.k-prices--kits .k-prices__actions,
.k-prices--works .k-prices__actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.k-prices--kits .k-prices__panel,
.k-prices--works .k-prices__panel {
  margin-top: 32px;
}

.k-prices__figure {
  margin: 0;
}

.k-prices__img {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  object-fit: contain;
  border-radius: var(--k-radius-card);
  background: var(--k-band);
}

/* The panel: #f4f7fc, the cards in one grid (the lists take part through display: contents). */
.k-prices__panel {
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--k-radius-panel);
  background: var(--k-panel);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.k-prices--kits .k-prices__panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-prices--works .k-prices__panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.k-prices__panel--fallback {
  display: block;
  overflow-x: auto;
}

.k-prices__panel-title {
  grid-column: 1 / -1;
  margin: 0 0 -2px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--k-ink);
}

.k-prices__list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-prices__item {
  display: flex;
  min-width: 0;
}

.k-prices__group {
  display: none;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

/* A price card: one link; name and picture above a hairline, the prices and the arrow below. */
.k-card {
  position: relative;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "name plate plate"
    "prices prices arrow";
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  background: var(--k-white);
  box-shadow: var(--k-shadow);
  color: var(--k-ink);
  text-decoration: none;
}

.k-card:hover {
  color: var(--k-ink);
  border-color: var(--k-blue);
}

.k-card__name {
  grid-area: name;
  min-height: 63px;
  display: flex;
  align-items: center;
  padding: 10px 0 10px 10px;
  font-size: 17px;
  line-height: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.k-card__plate {
  grid-area: plate;
  align-self: center;
  width: 76px;
  height: 64px;
  margin: 10px 8px 10px 6px;
  box-sizing: border-box;
  padding: 3px 3px 4px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 10px;
  background: var(--k-band);
}

.k-card--work .k-card__plate {
  padding: 4px;
  align-items: center;
}

.k-card__img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  object-position: center bottom;
}

.k-card--work .k-card__img {
  object-position: center;
}

.k-card__prices {
  grid-area: prices;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0 8px 12px;
  border-top: 1px solid var(--k-hairline);
}

.k-card__price {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.k-card__vat {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.k-card__arrow {
  grid-area: arrow;
  display: flex;
  align-items: center;
  padding: 8px 10px 8px 10px;
  border-top: 1px solid var(--k-hairline);
}

.k-card__arrow .k-ui-icon {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  padding: 7px;
  border-radius: 50%;
  background: var(--k-band);
  color: var(--k-blue);
}

/* «Не знаете, какой комплект нужен?» */
.k-help {
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 16px 16px;
  border-radius: var(--k-radius-card);
  background: var(--k-help);
}

.k-help__title {
  margin: 0;
  font-size: 17px;
  line-height: 21px;
  font-weight: 700;
}

.k-help__note {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--k-secondary);
}

.k-help__button {
  margin-top: auto;
}

.k-help--fill {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.k-help--fill .k-help__button {
  margin-top: 0;
  flex: none;
}

.k-help--rest {
  grid-column: span var(--k-help-span, 1);
}

.k-help--row {
  margin-top: 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
}

.k-help--row .k-help__button {
  margin-top: 0;
  flex: none;
}

/* 1024–1199: the homepage block takes the service pages' arrangement, so the twelve cards keep their width. */
@media (max-width: 1199px) {
  .k-prices--home .k-prices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "intro figure"
      "actions figure"
      "panel panel";
  }

  .k-prices--home .k-prices__figure {
    margin: 0;
    align-self: center;
  }

  .k-prices--home .k-prices__img {
    height: 316px;
  }

  .k-prices--home .k-prices__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
  }

  .k-prices--home .k-prices__panel {
    margin-top: 32px;
  }

  .k-prices--kits .k-prices__panel,
  .k-prices--works .k-prices__panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .k-help--rest {
    grid-column: 1 / -1;
  }
}

/* 768–1023 and phones: the phone order — intro, cards, help, picture, button, phone (CR-12). */
@media (max-width: 1023px) {
  .k-prices__grid,
  .k-prices--home .k-prices__grid,
  .k-prices--kits .k-prices__grid,
  .k-prices--works .k-prices__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "intro"
      "panel"
      "figure"
      "actions";
  }

  .k-prices .k-prices__panel {
    margin: 20px calc(-1 * var(--k-gutter)) 0;
    padding: 24px var(--k-gutter);
    border-radius: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .k-prices--home .k-prices__panel .k-prices__list--works,
  .k-prices--works .k-prices__panel .k-prices__list--works {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .k-prices__group {
    display: block;
    grid-column: 1 / -1;
    margin-top: 18px;
  }

  .k-prices .k-prices__figure,
  .k-prices--home .k-prices__figure {
    margin: 20px 0 0;
  }

  .k-prices .k-prices__img,
  .k-prices--home .k-prices__img {
    height: 248px;
    padding: 12px;
  }

  .k-prices .k-prices__actions {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .k-prices .k-prices__actions .k-phone-link {
    justify-content: center;
  }

  .k-help--wide-only {
    display: none;
  }

  .k-help__button {
    margin-top: 12px;
  }

  .k-help--fill,
  .k-help--rest {
    grid-column: 1 / -1;
  }

  .k-price-cards.k-prices__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .k-prices {
    padding: 28px 0 32px;
  }

  /* Under the breadcrumbs the block starts 24 px lower (Usluga-mobile; A-mobile has no crumbs: 28 px). */
  .k-crumbs + .k-prices {
    padding-top: 24px;
  }

  /* A-mobile ends the homepage block with the button; the service boards keep the phone under it (Usluga-mobile). */
  .k-prices--home .k-prices__actions .k-phone-link {
    display: none;
  }

  .k-prices .k-prices__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .k-prices .k-prices__list--kits {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .k-prices__panel-title {
    margin: 0 0 2px;
  }

  .k-prices--home .k-prices__panel .k-prices__list--works,
  .k-prices--works .k-prices__panel .k-prices__list--works,
  .k-price-cards .k-prices__list--works {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .k-prices__group {
    margin: 18px 0 2px;
  }

  .k-prices .k-prices__actions .k-button {
    width: 100%;
  }

  /* Phone kit card: name and a 128×72 picture above the line, the two prices in one line below. */
  .k-card--kit .k-card__name {
    min-height: 0;
    padding: 10px 0 10px 14px;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .k-card--kit .k-card__plate {
    width: 128px;
    height: 72px;
    margin: 10px 10px 10px 12px;
    padding: 3px 6px;
  }

  .k-card--kit .k-card__prices {
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    padding-left: 14px;
  }

  .k-card--kit .k-card__price {
    line-height: 30px;
  }

  .k-card--kit .k-card__vat {
    line-height: 20px;
  }

  .k-help--fill,
  .k-help--row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .k-help--row {
    padding: 16px;
  }
}

/* Below 1024 px a work card is a tile: small picture and arrow on top, the name, the prices (A-mobile). */
@media (max-width: 1023px) {
  .k-card--work {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "plate . arrow"
      "name name name"
      "prices prices prices";
    padding: 14px;
  }

  .k-card--work .k-card__plate {
    justify-self: start;
    align-self: start;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 4px;
  }

  .k-card--work .k-card__arrow {
    align-self: start;
    padding: 0;
    border: 0;
  }

  .k-card--work .k-card__name {
    min-height: 0;
    margin-top: 12px;
    padding: 0;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .k-card--work .k-card__prices {
    align-self: end;
    justify-content: flex-end;
    gap: 2px;
    padding: 8px 0 0;
    border: 0;
  }

  .k-card--work .k-card__price {
    font-size: 20px;
    line-height: 26px;
  }

  .k-card--work .k-card__vat {
    line-height: 20px;
  }
}

/* ---------- [kompresorii_prices] cards (blowing page) ---------- */

.k-price-cards.k-prices__panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .k-price-cards.k-prices__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .k-price-cards.k-prices__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .k-price-cards .k-prices__list--kits {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* ---------- /prajs-list/ two-price table ---------- */

.k-ptable {
  margin: 20px 0 0;
}

.k-ptable .k-price-intro {
  margin-bottom: 28px;
}

.k-ptable__frame {
  box-sizing: border-box;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  overflow: hidden;
  background: var(--k-white);
  box-shadow: var(--k-shadow);
}

.k-ptable__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.k-ptable__table thead tr {
  background: var(--k-band);
}

.k-ptable__table thead th {
  box-sizing: border-box;
  padding: 14px 24px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-secondary);
  white-space: nowrap;
}

.k-ptable__table th.k-ptable__name {
  text-align: left;
}

.k-ptable__table thead .k-ptable__price,
.k-ptable__table thead .k-ptable__vat {
  width: 176px;
  text-align: right;
}

.k-ptable__table thead .k-ptable__action {
  width: 170px;
}

.k-ptable__table tbody {
  border-top: 1px solid var(--k-hairline);
}

.k-ptable__table tbody th {
  padding: 14px 24px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--k-ink);
}

.k-ptable__table tbody td {
  padding: 14px 24px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--k-ink);
}

.k-ptable__table tbody .k-ptable__price {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}

.k-ptable__table tbody .k-ptable__vat {
  font-size: 17px;
  line-height: 24px;
}

.k-ptable__table tbody .k-ptable__action {
  padding: 12px 24px;
}

@media (max-width: 1023px) {
  .k-ptable__table thead th,
  .k-ptable__table tbody th,
  .k-ptable__table tbody td {
    padding-left: 16px;
    padding-right: 16px;
  }

  .k-ptable__table thead .k-ptable__price,
  .k-ptable__table thead .k-ptable__vat {
    width: 136px;
  }

  .k-ptable__table thead .k-ptable__action {
    width: 150px;
  }

  /* 150 − 12 − 16 = 122 px: the button's width, with the 16 px right side of the other cells. */
  .k-ptable__table tbody .k-ptable__action {
    padding-left: 12px;
    padding-right: 16px;
  }
}

/* Phones: each row's <tbody> stacks — the name across, then the two prices and the button (Prajs-mobile). */
@media (max-width: 767px) {
  .k-ptable .k-price-intro {
    margin-bottom: 20px;
  }

  .k-ptable__table,
  .k-ptable__table thead,
  .k-ptable__table tbody {
    display: block;
  }

  .k-ptable__table tr {
    display: grid;
    grid-template-columns: 116px 104px minmax(0, 1fr);
    align-items: center;
  }

  .k-ptable__table thead th,
  .k-ptable__table thead .k-ptable__price,
  .k-ptable__table thead .k-ptable__vat {
    width: auto;
    padding: 2px 0 10px 12px;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
  }

  .k-ptable__table thead th.k-ptable__name {
    grid-column: 1 / -1;
    padding: 10px 12px 0;
  }

  .k-ptable__table thead .k-ptable__action {
    display: none;
  }

  .k-ptable__table tbody th {
    grid-column: 1 / -1;
    padding: 12px 12px 0;
    font-size: 16px;
    line-height: 21px;
  }

  .k-ptable__table tbody td {
    padding: 4px 0 12px 12px;
    text-align: left;
  }

  .k-ptable__table tbody .k-ptable__price {
    font-size: 20px;
    line-height: 26px;
  }

  .k-ptable__table tbody .k-ptable__vat {
    font-size: 16px;
    line-height: 26px;
  }

  .k-ptable__table tbody .k-ptable__action {
    padding: 4px 12px 12px 0;
    text-align: right;
  }

  .k-ptable__table .k-button--small {
    height: 44px;
    padding: 0 14px;
  }
}

@media (max-width: 359px) {
  .k-ptable__table tr {
    grid-template-columns: 104px 92px minmax(0, 1fr);
  }

  .k-ptable__table .k-button--small {
    padding: 0 10px;
  }
}

/* ---------- Catalogue ---------- */

.k-catalogue {
  background: var(--k-white);
  padding: 72px 0;
}

.k-catalogue__title {
  margin: 0;
  max-width: 900px;
}

.k-catalogue__text {
  margin-top: 16px;
  max-width: 640px;
}

.k-catalogue__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.k-catalogue__note {
  margin: 32px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--k-muted);
}

.k-ccard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--k-white);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  overflow: hidden;
  box-shadow: var(--k-shadow);
}

.k-ccard__img {
  display: block;
  flex: none;
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  padding: 14px;
  object-fit: contain;
  background: var(--k-band);
}

.k-ccard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.k-ccard__title {
  margin: 0;
  min-height: 52px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--k-ink);
}

.k-ccard__title a {
  color: var(--k-ink);
  text-decoration: none;
}

.k-ccard__title a:hover {
  color: var(--k-blue-hover);
  text-decoration: underline;
}

.k-ccard__purpose {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 21px;
  color: var(--k-muted);
}

.k-ccard__specs {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
}

.k-ccard__spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 12px;
}

.k-ccard__spec dt {
  color: var(--k-muted);
}

.k-ccard__spec dt:empty {
  display: none;
}

/* Proportional figures, as the wide boards draw the values (the phone boards use tabular ones, below). */
.k-ccard__spec dd {
  margin: 0 0 0 auto;
  text-align: right;
}

/* A parenthesis of a value stays on one line («15,5 уд/с / (≈ 930 уд/мин)» on narrow phones). */
.k-ccard__keep {
  white-space: nowrap;
}

/* A value without a label stays at the start, as with space-between alone. */
.k-ccard__spec dt:empty + dd {
  margin-left: 0;
}

.k-ccard__foot {
  margin-top: auto;
  padding-top: 16px;
}

.k-ccard__price {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.k-ccard__amount {
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.k-ccard__vat {
  margin-top: 2px;
  font-size: 15px;
  line-height: 21px;
  font-variant-numeric: tabular-nums;
  color: var(--k-muted);
}

.k-ccard__cta {
  margin-top: 16px;
}

@media (max-width: 1023px) {
  .k-catalogue {
    padding: 56px 0;
  }

  .k-catalogue__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Phones: compact rows with a 104 px picture (A-mobile, BK3-mobile). */
@media (max-width: 767px) {
  .k-catalogue {
    padding: 24px 0 28px;
  }

  .k-catalogue__text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 22px;
  }

  .k-catalogue__grid {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .k-catalogue__note {
    margin-top: 12px;
    line-height: 22px;
  }

  /* The phone card clips nothing (its picture has its own corners), so the title link's focus ring, which reaches the
     card's top edge through the link's 44 px tap area, is not cut off. */
  .k-ccard {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    overflow: visible;
    box-shadow: none;
  }

  .k-ccard__img {
    width: 104px;
    height: 104px;
    padding: 4px;
    border-radius: 10px;
  }

  .k-ccard__body {
    min-width: 0;
    align-self: stretch;
    padding: 0;
  }

  .k-ccard__title {
    min-height: 0;
    font-size: 16px;
    line-height: 20px;
  }

  .k-ccard__title a {
    display: block;
    padding: 12px 0;
    margin: -12px 0;
  }

  .k-ccard__purpose {
    margin-top: 4px;
    font-size: 14px;
    line-height: 19px;
  }

  /* The builder pages' boards keep a model code with the word before it («Бетонолом / пневматический БК-3», A-mobile,
     Usluga-mobile); a no-break space would not fit the 146 px column at 320 px, so the title is balanced instead.
     BK3-mobile breaks the BK-1 and BK-2 titles of the product pages plainly. */
  .k-type-builder .k-ccard:not(.k-ccard--inline-specs) .k-ccard__title {
    text-wrap: balance;
  }

  .k-ccard__specs {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
  }

  .k-ccard__spec {
    flex-direction: column;
    gap: 0;
  }

  .k-ccard__spec dd {
    margin-left: 0;
    text-align: left;
  }

  /* Service cards: the values in one line, labels for screen readers only. */
  .k-ccard--inline-specs .k-ccard__specs {
    display: block;
  }

  .k-ccard--inline-specs .k-ccard__spec {
    display: inline;
  }

  /* The dot stays at the end of a line, never at the start of the next. */
  .k-ccard--inline-specs .k-ccard__spec + .k-ccard__spec::before {
    content: "\00a0· ";
  }

  .k-ccard--inline-specs .k-ccard__spec dt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .k-ccard--inline-specs .k-ccard__spec dd {
    display: inline;
  }

  /* The phone boards' short word before a value («шланги до 150 м», «бак 100 л»; card-catalogue.php). Screen readers
     have the label already, so the word gets an empty alternative where browsers support one. */
  .k-ccard--inline-specs .k-ccard__spec dd[data-short]::before {
    content: attr(data-short) "\00a0";
    content: attr(data-short) "\00a0" / "";
  }

  .k-ccard__foot {
    padding-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 4px;
  }

  .k-ccard__price {
    white-space: nowrap;
  }

  .k-ccard__amount {
    font-size: 18px;
    line-height: 22px;
  }

  .k-ccard__vat {
    margin-top: 0;
    font-size: 14px;
    line-height: 18px;
  }

  .k-ccard__cta.k-button {
    position: relative;
    flex: none;
    margin: 0 0 0 auto;
    height: 44px;
    padding: 0;
    background: none;
    color: var(--k-blue);
  }

  .k-ccard__cta.k-button:hover {
    background: none;
    color: var(--k-blue-hover);
  }
}

/* ---------- Rental terms ---------- */

.k-rental {
  background: var(--k-white);
  padding: 0 0 72px;
}

.k-rental__inner {
  padding-top: 72px;
}

.k-rental--divider .k-rental__inner {
  padding-top: 71px;
  border-top: 1px solid var(--k-hairline);
}

.k-rental__title {
  margin: 8px 0 0;
}

.k-rental__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.k-rental__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon . index"
    "title title title"
    "text text text";
  align-items: center;
  align-content: start;
  background: var(--k-white);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  padding: 28px;
}

.k-rental__icon {
  grid-area: icon;
  display: flex;
  color: var(--k-blue);
}

.k-rental__index {
  grid-area: index;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--k-muted);
}

.k-rental__card-title {
  grid-area: title;
  margin: 20px 0 0;
  font-size: 20px;
  line-height: 26px;
}

.k-rental__text {
  grid-area: text;
  align-self: start;
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.55;
}

.k-rental__note {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--k-band);
  border-radius: var(--k-radius-card);
}

.k-rental__note .k-ui-icon {
  flex: none;
  color: var(--k-blue);
}

.k-rental__note p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .k-rental {
    padding-bottom: 56px;
  }

  .k-rental__inner,
  .k-rental--divider .k-rental__inner {
    padding-top: 56px;
  }

  .k-rental__grid {
    gap: 16px;
  }

  .k-rental__card {
    padding: 20px;
  }
}

/* Phones: icon left, title and number in one line, the text under the title (A-mobile-2). */
@media (max-width: 767px) {
  .k-rental {
    padding-bottom: 28px;
  }

  .k-rental__inner,
  .k-rental--divider .k-rental__inner {
    padding-top: 24px;
  }

  /* The phone boards (A-mobile-2, Produvka-mobile) draw the hairline across the whole width, above the 24 px padding;
     wider screens keep it inside the container. */
  .k-rental--divider {
    border-top: 1px solid var(--k-hairline);
  }

  .k-rental--divider .k-rental__inner {
    border-top: 0;
  }

  .k-rental__title {
    margin-top: 4px;
  }

  .k-rental__grid {
    margin-top: 16px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .k-rental__card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title index"
      "icon text text";
    align-items: baseline;
    column-gap: 14px;
    padding: 14px 16px;
  }

  .k-rental__icon {
    align-self: start;
  }

  .k-rental__index {
    font-size: 14px;
    line-height: 20px;
  }

  .k-rental__card-title {
    margin: 0;
    line-height: 25px;
  }

  .k-rental__text {
    margin-top: 4px;
    font-size: 15px;
    line-height: 22px;
  }

  .k-rental__note {
    margin-top: 12px;
    gap: 12px;
    padding: 16px;
  }

  .k-rental__note .k-ui-icon {
    width: 24px;
    height: 24px;
  }

  .k-rental__note p {
    font-size: 15px;
    line-height: 22px;
  }
}

/* ---------- Reviews: Yandex's reviews widget and «С объектов» (WP-18, I47–I49) ---------- */

.k-reviews {
  background: var(--k-white);
  padding: 72px 0;
  color: var(--k-ya-ink);
}

/* From 1024 px: the widget and its link on the left (460 px at 1024, 541 px from 1200; never wider than Yandex's 760),
   «С объектов» on the right. The markup order is the reading order at every width. */
.k-reviews__grid {
  display: grid;
  grid-template-columns: minmax(460px, 14fr) minmax(0, 16fr);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "title title"
    "text text"
    "widget head"
    "widget photos";
  column-gap: 40px;
}

.k-reviews__title {
  grid-area: title;
  margin: 0;
  color: var(--k-ya-ink);
}

.k-reviews__text {
  grid-area: text;
  margin-top: 16px;
}

.k-reviews__widget {
  grid-area: widget;
  min-width: 0;
  max-width: 760px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The frame keeps its full 500 px inside a 1 px hairline: no wrapper is shorter, nothing lies over it and no rounded
   corner clips it (Yandex Maps API terms 5.1.2). */
.k-reviews__frame {
  display: block;
  width: 100%;
  height: 502px;
  box-sizing: border-box;
  border: 1px solid var(--k-hairline);
  background: var(--k-white);
}

.k-reviews__open,
.k-reviews__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  color: var(--k-ya-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.k-reviews__open:hover,
.k-reviews__all:hover {
  color: var(--k-ya-ink);
  text-decoration-thickness: 2.5px;
}

.k-reviews__open .k-ui-icon,
.k-reviews__all .k-ui-icon {
  flex: none;
}

.k-reviews__open {
  margin-top: 8px;
}

.k-reviews__head {
  grid-area: head;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.k-reviews__label {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
}

.k-reviews__all {
  margin: -11px 0;
  font-size: 15px;
  line-height: 22px;
}

.k-reviews__photos {
  grid-area: photos;
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 24px;
}

.k-reviews__photo {
  margin: 0;
  min-width: 0;
}

.k-reviews__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 282 / 211;
  object-fit: cover;
  border-radius: var(--k-radius-card);
}

.k-reviews__photo figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--k-ya-muted);
}

/* A blocked frame (the inline script of template-parts/reviews.php): no error page; the link and the pictures in one
   column, as below 1024 px. */
.k-reviews--blocked .k-reviews__frame {
  display: none;
}

.k-reviews--blocked .k-reviews__open {
  margin-top: 0;
}

.k-reviews--blocked .k-reviews__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas:
    "title"
    "text"
    "widget"
    "head"
    "photos";
}

.k-reviews--blocked .k-reviews__photos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1023px) {
  .k-reviews {
    padding: 56px 0;
  }

  .k-reviews__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "title"
      "text"
      "widget"
      "head"
      "photos";
  }

  .k-reviews__widget {
    width: 100%;
  }

  .k-reviews__head {
    margin-top: 32px;
  }

  .k-reviews__photos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .k-reviews {
    padding: 24px 0 28px;
  }

  .k-reviews__widget {
    margin-top: 16px;
  }

  /* A 1 px gap before the arrows on phones: with the icon's own side bearing it makes the space before the board's
     «→» (A-mobile-2). */
  .k-reviews__open {
    gap: 1px;
    font-size: 15px;
    line-height: 20px;
  }

  .k-reviews__head {
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .k-reviews__all {
    margin: 0;
    gap: 1px;
  }

  .k-reviews__photos,
  .k-reviews--blocked .k-reviews__photos {
    margin-top: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 8px;
  }

  .k-reviews__img {
    aspect-ratio: auto;
    height: 131px;
  }

  .k-reviews__photo figcaption {
    margin-top: 6px;
    letter-spacing: -0.01em;
  }
}

/* ---------- FAQ ---------- */

.k-faq {
  background: var(--k-band);
  padding: 72px 0;
}

.k-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.k-faq--aside .k-faq__grid {
  grid-template-columns: minmax(0, 672fr) minmax(0, 480fr);
}

.k-faq__title {
  margin: 0;
}

.k-faq__list {
  margin-top: 24px;
  border-top: 1px solid var(--k-hairline);
}

.k-faq__title + .k-faq__list {
  margin-top: 24px;
}

.k-faq__main > .k-faq__list:first-child {
  margin-top: 0;
}

.k-faq__item {
  border-bottom: 1px solid var(--k-hairline);
}

.k-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--k-ink);
}

.k-faq__question .k-ui-icon {
  flex: none;
  color: var(--k-blue);
  transition: transform .15s ease;
}

/* The boards' answer is 620 px of text plus the 40 px right padding (content-box); border-box needs 660. */
.k-faq__answer {
  padding: 0 40px 22px 0;
  max-width: 660px;
}

.k-faq__answer > :last-child {
  margin-bottom: 0;
}

.k-faq__aside {
  padding: 32px;
  background: var(--k-white);
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  font-size: 15px;
  line-height: 1.5;
}

.k-faq__aside > :first-child {
  margin-top: 0;
}

.k-faq__aside > :last-child {
  margin-bottom: 0;
}

.k-faq .page-text.k-faq__aside h2 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0;
}

.k-faq .page-text.k-faq__aside h3 {
  margin: 24px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--k-hairline);
  font-size: 20px;
  line-height: 26px;
}

.k-faq .page-text.k-faq__aside p,
.k-faq .page-text.k-faq__aside li {
  font-size: 15px;
  line-height: 1.5;
}

/* The closing text's lists: check marks for every first list, ordered or not (the stored «выгоды» lists of the
   service pages are <ol>; Usluga-2 draws them with check marks), chevrons for a second one (A-desktop-2). */
.k-faq .page-text.k-faq__aside :is(ul, ol) {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.k-faq .page-text.k-faq__aside :is(ul, ol) > li {
  position: relative;
  margin: 0;
  padding-left: 32px;
}

.k-faq .page-text.k-faq__aside :is(ul, ol) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: var(--k-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.k-faq .page-text.k-faq__aside li strong {
  font-weight: inherit;
}

/* The bold closing sentence right after a list sits under a hairline (Usluga-2, Usluga-mobile-2). */
.k-faq .page-text.k-faq__aside :is(ul, ol) + p:has(> strong) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--k-hairline);
}

.k-faq .page-text.k-faq__aside ul ~ ul > li::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
  .k-faq {
    padding: 56px 0;
  }

  .k-faq--aside .k-faq__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* Phones: the questions in one white card, the closing text in a second card (A-mobile-2). */
@media (max-width: 767px) {
  .k-faq {
    padding: 24px 0 28px;
  }

  .k-faq--aside .k-faq__grid {
    gap: 12px;
  }

  .k-faq__list,
  .k-faq__title + .k-faq__list {
    margin-top: 16px;
    border: 1px solid var(--k-hairline);
    border-radius: var(--k-radius-card);
    background: var(--k-white);
  }

  /* «~», not «+»: the inline script after the first question (template-parts/faq.php) sits between items 1 and 2. */
  .k-faq__item ~ .k-faq__item {
    border-top: 1px solid var(--k-hairline);
  }

  .k-faq__item {
    border-bottom: 0;
  }

  .k-faq__question {
    align-items: flex-start;
    gap: 12px;
    padding: 11px 16px;
    font-size: 16px;
    line-height: 21px;
  }

  .k-faq__question .k-ui-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  .k-faq__answer {
    padding: 0 16px 14px;
    max-width: none;
  }

  .k-faq__aside {
    padding: 16px;
  }

  .k-faq .page-text.k-faq__aside h2 {
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 22px;
  }

  .k-faq .page-text.k-faq__aside h3 {
    margin: 14px 0 6px;
    padding-top: 0;
    border-top: 0;
    font-size: 16px;
    line-height: 22px;
  }

  .k-faq .page-text.k-faq__aside p,
  .k-faq .page-text.k-faq__aside li {
    line-height: 22px;
  }

  .k-faq .page-text.k-faq__aside :is(ul, ol) {
    gap: 8px;
    margin-bottom: 14px;
  }

  .k-faq .page-text.k-faq__aside :is(ul, ol) > li {
    padding-left: 30px;
  }

  .k-faq .page-text.k-faq__aside :is(ul, ol) + p:has(> strong) {
    margin-top: 16px;
    padding-top: 16px;
  }

  /* A lead-in line sits 10 px above its list (Usluga-mobile-2). */
  .k-faq .page-text.k-faq__aside p:has(+ :is(ul, ol)) {
    margin-bottom: 10px;
  }

  .k-faq .page-text.k-faq__aside ul ~ ul {
    gap: 6px;
  }

  .k-faq .page-text.k-faq__aside ul ~ ul > li {
    padding-left: 20px;
  }

  .k-faq .page-text.k-faq__aside ul ~ ul > li::before {
    top: 9px;
    left: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--k-ink);
    -webkit-mask: none;
    mask: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-faq__question .k-ui-icon {
    transition: none;
  }
}

/* ---------- [kompresorii_requisites] ---------- */

.k-requisites {
  margin: 24px 0 0;
  box-sizing: border-box;
  border: 1px solid var(--k-hairline);
  border-radius: var(--k-radius-card);
  overflow: hidden;
  background: var(--k-white);
  box-shadow: var(--k-shadow);
}

.k-requisites__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums;
}

.k-requisites__table tr + tr {
  border-top: 1px solid var(--k-hairline);
}

.k-requisites__table th {
  width: 400px;
  box-sizing: border-box;
  padding: 14px 24px;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--k-muted);
  background: var(--k-panel);
}

.k-requisites__table td {
  padding: 14px 24px;
  vertical-align: top;
  color: var(--k-ink);
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .k-requisites__table th {
    width: 36%;
  }
}

@media (max-width: 767px) {
  .k-requisites {
    margin-top: 16px;
  }

  .k-requisites__table {
    font-size: 15px;
    line-height: 22px;
  }

  .k-requisites__table th {
    width: 156px;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .k-requisites__table td {
    padding: 12px 10px;
  }
}

@media (max-width: 359px) {
  .k-requisites__table th {
    width: 128px;
  }
}

/* ---------- Narrow phones (320–359) ---------- */

@media (max-width: 359px) {
  .k-hero__actions .k-button {
    height: auto;
    min-height: 52px;
    padding: 8px 12px;
    font-size: 16px;
  }

  .k-prices .k-card--kit .k-card__plate {
    width: 96px;
    height: 64px;
  }
}