/* Стили первой версии, часть 1 (до 09.11.2026 - первый встроенный <style> в <head> index.html).
   Подключены <link> на прежнем месте: после шрифтов Google и до внешних css первой версии (solutions.css,
   catalog.css, mobile.css…), порядок каскада тот же - docs/ARCHITECTURE.md, «Порядок CSS».
   Адреса в url() - от этого файла (assets/), а не от страницы. При правке поднять ?v= в index.html
   (tests/asset-versions.test.mjs). Отступ в 4 пробела остался от разметки: его ждут проверки в tests/ */
    /* ===== Стили первой версии (v1) =====
       Вид второй версии задают assets/v2/*.css (docs/DESIGN-V2.md), токены - в foundation.css.
       Здесь только правила v1, которые на что-то влияют: мёртвые убраны при чистке 19.10.2026. */

    * {
      box-sizing: border-box;
    }

    html {
      max-width: 100%;
      overflow-x: clip;
    }

    body {
      margin: 0;
      max-width: 100%;
      overflow-x: clip;
      background:
        linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,247,245,.95) 360px),
        radial-gradient(circle at 20% 0%, rgba(44,96,51,.09), transparent 360px),
        var(--bg);
      color: var(--ink);
      font-family: var(--font);
      line-height: 1.45;
      letter-spacing: 0;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(31,37,34,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,37,34,.035) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.65), transparent 780px);
    }

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(200, 138, 45, .55);
      outline-offset: 3px;
    }

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand img {
      width: 142px;
      height: auto;
      display: block;
    }

    .search {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      overflow: visible;
      transition: border-color var(--speed), box-shadow var(--speed);
    }

    .search-suggest {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      z-index: 40;
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(198, 210, 202, .92);
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: var(--shadow-strong);
    }

    .search-suggest[hidden] {
      display: none;
    }

    .search-suggest__note,
    .search-correction {
      padding: 10px 12px;
      border-radius: var(--r-md);
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.35;
    }

    .search-suggest__note button,
    .search-correction button {
      border: 0;
      padding: 0;
      color: inherit;
      background: transparent;
      font-weight: var(--fw-medium);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .search-suggest__group {
      display: grid;
      gap: 6px;
    }

    .search-suggest__item {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 4px 12px;
      align-items: center;
      padding: 10px 11px;
      border: 1px solid transparent;
      border-radius: var(--r-md);
      color: var(--ink);
      background: var(--surface);
      text-align: left;
      transition: background var(--speed), border-color var(--speed);
    }

    .search-suggest__item:hover,
    .search-suggest__item:focus-visible {
      border-color: rgba(44, 96, 51, .24);
      background: #f7faf8;
      outline: 0;
    }

    .search-suggest__item strong {
      min-width: 0;
      font-size: var(--fs-meta);
      line-height: 1.25;
    }

    .search-suggest__item span {
      grid-column: 1 / -1;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--fw-medium);
      line-height: 1.3;
    }

    .search-suggest__item small {
      color: var(--brand-deep);
      font-size: 11px;
      font-weight: var(--fw-regular);
      white-space: nowrap;
    }

    .icon-btn {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      color: var(--ink);
      background: var(--surface);
      transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
      position: relative;
    }

    .icon-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(44, 96, 51, .36);
      box-shadow: 0 12px 26px rgba(17, 24, 20, .08);
    }

    .badge {
      position: absolute;
      top: -7px;
      right: -7px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: var(--r-sm);
      display: grid;
      place-items: center;
      background: var(--amber);
      color: var(--on-dark);
      font-size: var(--fs-micro);
      font-weight: var(--fw-medium);
      border: 2px solid var(--surface);
    }

    .view {
      display: none;
      padding: 30px 0 72px;
    }

    .view.is-active {
      display: block;
    }

    .hero {
      position: relative;
      min-height: 520px;
      display: grid;
      align-items: end;
      overflow: hidden;
      color: var(--on-dark);
      background:
        linear-gradient(90deg, rgba(17,24,20,.92), rgba(23,59,36,.72) 48%, rgba(17,24,20,.14)),
        linear-gradient(135deg, #122019, #2c6033);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .36;
      background-image:
        linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.18) 58% 59%, transparent 59%),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 100% 100%, 54px 54px, 54px 54px;
    }

    .hero-slider {
      position: relative;
    }

    .hero .eyebrow {
      color: #cce5d1;
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      background: currentColor;
      border-radius: var(--r-full);
    }

    /* Вес задаётся ролью (docs/DESIGN-V2.md, раздел 3): 400 текст, 500 интерфейс, 600 заголовки и цены.
       Это правило убирает браузерный bold (700) и bolder (900) у strong внутри заголовков. */

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    .hero .lead {
      color: rgba(255,255,255,.76);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    .btn {
      min-height: 46px;
      border: 1px solid transparent;
      border-radius: var(--r-md);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 0 18px;
      color: var(--ink);
      background: var(--surface);
      font-weight: var(--fw-medium);
      font-size: var(--fs-sm);
      transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed), background-color var(--speed), color var(--speed);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(17, 24, 20, .1);
    }

    /* Кнопки без градиентов — плоский фирменный цвет */

    .btn--primary:hover { background: var(--brand-deep); box-shadow: none; }

    .btn svg,
    .icon-btn svg,
    .search svg {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .panel {
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(198, 210, 202, .78);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow);
    }

    .swatch {
      min-height: 112px;
      padding: 14px;
      border-radius: var(--r-md);
      border: 1px solid rgba(31,37,34,.08);
      color: var(--ink);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      position: relative;
    }

    .swatch strong {
      font-size: var(--fs-meta);
      margin-bottom: 3px;
    }

    .swatch span {
      color: currentColor;
      opacity: .68;
      font-size: var(--fs-micro);
      font-weight: var(--fw-regular);
    }

    .filter-overlay {
      display: none;
    }

    .filter__close {
      display: none;
    }

    .filter-apply {
      position: sticky;
      bottom: 16px;
      z-index: 3;
      width: 100%;
      box-shadow: 0 16px 32px rgba(44, 96, 51, .22);
    }

    .filter__title,
    .cart-summary__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .category-select {
      position: relative;
      display: block;
    }

    .category-select::after {
      content: "";
      position: absolute;
      right: 15px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--brand);
      border-bottom: 2px solid var(--brand);
      pointer-events: none;
      transform: translateY(-65%) rotate(45deg);
    }

    .category-select select {
      width: 100%;
      min-height: 44px;
      padding: 0 42px 0 13px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      appearance: none;
      background: var(--surface);
      color: var(--ink);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      cursor: pointer;
      transition: border-color var(--speed), box-shadow var(--speed);
    }

    .category-select select:focus {
      outline: 0;
      border-color: rgba(44, 96, 51, .45);
      box-shadow: 0 0 0 4px rgba(44, 96, 51, .08);
    }

    .range-scale {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 8px;
      color: var(--muted);
      font-size: var(--fs-micro);
      font-weight: var(--fw-regular);
    }

    .check input {
      width: 17px;
      height: 17px;
      accent-color: var(--brand);
    }

    /* Строка фильтра, которая не сочетается с уже отмеченным: видна, но выбрать нельзя */

    .category-hero__copy {
      position: relative;
      z-index: 1;
    }

    .category-metrics {
      grid-column: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .chip--reset:hover {
      color: var(--brand-deep);
      border-color: rgba(44, 96, 51, .34);
      background: var(--surface);
    }

    .sort select {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--ink);
      padding: 0 34px 0 12px;
    }

    .mobile-catalog-nav {
      display: none;
    }

    .product-card:hover {
      transform: translateY(-6px);
      border-color: rgba(44, 96, 51, .42);
      box-shadow: var(--shadow-strong);
    }

    .product-card__media::before {
      content: "";
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 21px;
      height: 22px;
      border-radius: 50%;
      background: rgba(17,24,20,.08);
      filter: blur(11px);
      transform: scaleX(.84);
    }

    .product-card__media::after,
    .related-card__media::after,
    .home-product-card__media::after,
    .result-item__media::after,
    .main-photo::after {
      content: "";
      position: absolute;
      z-index: 3;
      width: 26px;
      aspect-ratio: 330 / 140;
      right: 16px;
      bottom: 14px;
      background: url("kz-badge.png") center / contain no-repeat;
      pointer-events: none;
      filter: drop-shadow(0 6px 10px rgba(17, 24, 20, .12));
    }

    .product-media-image {
      position: relative;
      z-index: 1;
      max-width: 86%;
      max-height: 86%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 22px 18px rgba(17,24,20,.14));
    }

    .home-product-card__media .product-media-image,
    .related-card__media .product-media-image,
    .result-item__media .product-media-image {
      max-width: 84%;
      max-height: 118px;
    }

    .config-box {
      display: grid;
      gap: 8px;
      padding: 12px;
      margin-bottom: 14px;
      border: 1px solid rgba(198, 210, 202, .78);
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, #fff, #fbfcfb);
    }

    .config-box__title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--fw-semibold);
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .config-box__title span:last-child {
      color: var(--brand);
      letter-spacing: 0;
      text-transform: none;
    }

    .config-base {
      color: var(--ink);
      font-size: var(--fs-meta);
      font-weight: var(--fw-medium);
      line-height: 1.35;
    }

    .vat-note {
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--fw-regular);
      line-height: 1.35;
    }

    .product-visual {
      width: 82%;
      height: 178px;
      position: relative;
      transform: translateY(-2px);
      transition: transform 320ms ease;
    }

    .product-card:hover .product-visual {
      transform: translateY(-8px) scale(1.02);
    }

    .product-visual span {
      position: absolute;
      display: block;
    }

    .visual-bin .body {
      left: 29%;
      bottom: 26px;
      width: 42%;
      height: 118px;
      border-radius: 9px 9px 16px 16px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.28), transparent 28% 72%, rgba(0,0,0,.16)),
        linear-gradient(180deg, #47784e, #2e5e36);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 20px 30px rgba(31,37,34,.16);
    }

    .visual-bin .lid {
      left: 24%;
      bottom: 137px;
      width: 52%;
      height: 18px;
      border-radius: 6px;
      background: linear-gradient(180deg, #5f8a65, #285530);
      transform: skewX(-10deg);
    }

    .visual-bin .handle {
      left: 26%;
      bottom: 148px;
      width: 16%;
      height: 7px;
      border-radius: 99px;
      border: 2px solid rgba(23,59,36,.72);
    }

    .visual-bin .wheel,
    .visual-metal .wheel,
    .visual-euro .wheel {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      bottom: 10px;
      background: radial-gradient(circle at 35% 35%, #7d8781 0 12%, #222d26 13% 60%, #111814 61%);
      border: 4px solid #202922;
    }

    .visual-bin .wheel-a { left: 32%; }
    .visual-bin .wheel-b { right: 32%; }

    .visual-metal .body {
      left: 9%;
      right: 9%;
      bottom: 31px;
      height: 104px;
      border-radius: 5px 5px 12px 12px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 48px),
        linear-gradient(180deg, #6f7c75, #39443e 68%, #2b3530);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 20px 32px rgba(31,37,34,.18);
      transform: perspective(420px) rotateY(-7deg);
    }

    .visual-metal .lid {
      left: 12%;
      right: 12%;
      bottom: 134px;
      height: 20px;
      border-radius: 5px;
      background: linear-gradient(180deg, #8c9791, #4e5a54);
      transform: skewX(-8deg);
    }

    .visual-metal .hook {
      top: 28px;
      right: 14%;
      width: 28px;
      height: 42px;
      border: 6px solid #65726b;
      border-left: 0;
      border-radius: 0 18px 18px 0;
    }

    .visual-metal .wheel-a { left: 18%; }
    .visual-metal .wheel-b { right: 18%; }

    .visual-no-wheels .wheel {
      display: none;
    }

    .visual-euro .body {
      left: 16%;
      right: 16%;
      bottom: 26px;
      height: 116px;
      border-radius: 8px 8px 15px 15px;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 34px),
        linear-gradient(180deg, #4f675c, #2d4438);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 32px rgba(31,37,34,.16);
    }

    .visual-euro .lid {
      left: 12%;
      right: 12%;
      bottom: 141px;
      height: 18px;
      border-radius: 6px;
      background: linear-gradient(180deg, #718279, #334a3d);
    }

    .visual-euro .stripe {
      left: 22%;
      bottom: 80px;
      width: 56%;
      height: 12px;
      border-radius: 99px;
      background: rgba(255,255,255,.18);
    }

    .visual-euro .wheel-a { left: 22%; }
    .visual-euro .wheel-b { right: 22%; }

    .visual-urn .body {
      left: 30%;
      bottom: 20px;
      width: 40%;
      height: 124px;
      border-radius: 20px 20px 14px 14px / 34px 34px 14px 14px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.24), transparent 38% 70%, rgba(0,0,0,.16)),
        linear-gradient(180deg, #5d6964, #303b35);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 32px rgba(31,37,34,.16);
    }

    .visual-urn .cap {
      left: 25%;
      bottom: 139px;
      width: 50%;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(180deg, #829089, #424e48);
    }

    .visual-urn .slot {
      left: 36%;
      bottom: 116px;
      width: 28%;
      height: 9px;
      border-radius: 99px;
      background: rgba(17,24,20,.44);
    }

    .visual-accessory .lid {
      left: 18%;
      bottom: 50px;
      width: 66%;
      height: 62px;
      border-radius: 10px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.32), transparent 52%, rgba(0,0,0,.12)),
        linear-gradient(180deg, #70837a, #3e5047);
      transform: perspective(420px) rotateX(58deg) rotateZ(-2deg);
      box-shadow: 0 22px 34px rgba(31,37,34,.14);
    }

    .visual-accessory .wheel {
      left: 34%;
      bottom: 100px;
      width: 62px;
      height: 62px;
      border-radius: 50%;
      border: 14px solid #2c3932;
      box-shadow: inset 0 0 0 8px #6e7c75;
      background: #151d18;
    }

    .visual-accessory .wheel + .wheel {
      left: auto;
      right: 26%;
      width: 44px;
      height: 44px;
      bottom: 80px;
      border-width: 10px;
    }

    .feature {
      padding: 22px;
      min-height: 168px;
      border-radius: var(--r-lg);
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(198, 210, 202, .8);
    }

    .feature p {
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-sm);
    }

    .gallery--single .thumbs {
      display: none;
    }

    .gallery--few {
      grid-template-columns: 78px minmax(0, 1fr);
      align-items: start;
    }

    .gallery--few .thumbs {
      grid-template-rows: repeat(auto-fit, minmax(74px, 88px));
      align-content: start;
      height: auto;
    }

    .thumb {
      min-height: 74px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: var(--fs-micro);
      font-weight: var(--fw-medium);
      transition: border-color var(--speed), box-shadow var(--speed);
    }

    .thumb--image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      border-radius: var(--r-md);
    }

    .main-photo--image {
      cursor: zoom-in;
    }

    .main-photo::before {
      content: "";
      position: absolute;
      width: 62%;
      height: 26px;
      left: 19%;
      bottom: 86px;
      border-radius: 50%;
      background: rgba(17,24,20,.08);
      filter: blur(16px);
    }

    .main-photo .product-visual {
      width: 78%;
      height: 420px;
      transform: translateY(10px) scale(1.42);
    }

    .product-addon {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: #fbfcfb;
      color: var(--ink);
      font-size: var(--fs-meta);
      font-weight: var(--fw-medium);
      cursor: pointer;
      transition: border-color var(--speed), background var(--speed), box-shadow var(--speed);
    }

    .product-addon:hover,
    .product-addon.is-selected {
      border-color: rgba(44,96,51,.36);
      background: var(--brand-soft);
    }

    .product-addon.is-selected {
      box-shadow: inset 0 0 0 1px rgba(44,96,51,.12);
    }

    .product-addon input {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      accent-color: var(--brand);
    }

    .product-addon strong {
      color: var(--amber);
      white-space: nowrap;
    }

    .price-block__control {
      display: grid;
      justify-items: end;
      gap: 8px;
    }

    .price-block .stock--pill {
      justify-self: start;
      margin-top: 0;
    }

    .qty {
      display: inline-grid;
      grid-template-columns: 42px 54px 42px;
      align-items: stretch;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--surface);
    }

    .qty button,
    .qty input {
      border: 0;
      background: var(--surface);
      color: var(--ink);
      text-align: center;
      font-weight: var(--fw-medium);
    }

    .qty button:hover {
      background: var(--steel);
    }

    .product-cta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 24px;
    }

    .config-rows {
      display: grid;
      gap: 8px;
    }

    .config-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      min-height: 42px;
      padding: 10px 12px;
      border-radius: var(--r-md);
      background: var(--steel);
      color: var(--ink);
      font-size: var(--fs-sm);
      font-weight: var(--fw-regular);
    }

    .config-row span {
      color: var(--muted);
      font-weight: var(--fw-medium);
    }

    .config-row strong {
      color: var(--amber);
      white-space: nowrap;
    }

    .product-section__head h2 {
      margin-bottom: 0;
    }

    .doc {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface);
      transition: border-color var(--speed), transform var(--speed);
    }

    .doc:hover {
      transform: translateY(-2px);
      border-color: rgba(44,96,51,.38);
    }

    .doc svg {
      width: 24px;
      height: 24px;
      color: var(--brand);
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .doc strong {
      display: block;
      font-size: var(--fs-sm);
    }

    .doc span {
      color: var(--muted);
      font-size: var(--fs-micro);
    }

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

    .category-card {
      min-height: 230px;
      padding: 22px;
      border-radius: var(--r-lg);
      border: 1px solid rgba(198, 210, 202, .84);
      background: rgba(255,255,255,.9);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
      transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
    }

    .category-card:hover {
      transform: translateY(-4px);
      border-color: rgba(44,96,51,.36);
      box-shadow: var(--shadow);
    }

    .category-card .product-visual {
      position: absolute;
      right: -12%;
      bottom: -10px;
      width: 70%;
      opacity: .86;
      transform: scale(.78);
    }

    .category-card strong {
      position: relative;
      z-index: 1;
      display: block;
      font-size: var(--fs-h3);
      line-height: 1.22;
    }

    .category-card span {
      position: relative;
      z-index: 1;
      color: var(--muted);
      font-size: var(--fs-meta);
      font-weight: var(--fw-medium);
    }

    .home-product-card {
      min-height: 330px;
      display: flex;
      flex-direction: column;
      padding: 14px;
      border: 1px solid rgba(198, 210, 202, .84);
      border-radius: var(--r-lg);
      background: var(--surface);
      transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
    }

    .home-product-card:hover {
      transform: translateY(-4px);
      border-color: rgba(44,96,51,.36);
      box-shadow: var(--shadow);
    }

    .home-product-card__media {
      position: relative;
      min-height: 140px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      border-radius: 0;
      background: linear-gradient(180deg, #fff, #f7faf8);
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .home-product-card__media .product-visual {
      width: 138px;
      height: 112px;
      transform: scale(.72);
    }

    .home-product-card__media::after {
      width: 21px;
      right: 12px;
      bottom: 10px;
    }

    .home-product-card__tag {
      align-self: flex-start;
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      margin-bottom: 10px;
      border-radius: var(--r-sm);
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: 11px;
      font-weight: var(--fw-medium);
    }

    .home-product-card h3 {
      min-height: 54px;
      margin-bottom: 10px;
      font-size: var(--fs-ui);
      line-height: 1.22;
    }

    .home-product-card p {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: var(--fs-micro);
      line-height: 1.45;
    }

    .home-product-card__foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .home-product-card__foot strong {
      font-size: var(--fs-body);
      white-space: nowrap;
    }

    .home-product-card__foot button {
      width: 19px;
      height: 38px;
    }

    .calculator-controls__group:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .calculator-field input[type="number"],
    .calculator-field select {
      min-height: 46px;
      width: 100%;
      padding: 0 13px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      color: var(--ink);
      background: var(--surface);
      outline: 0;
    }

    .calculator-field small {
      color: var(--muted);
      line-height: 1.45;
    }

    /* Норматив накопления — справочная строка, клиент его не вводит */

    .calculator-visual::after {
      content: "";
      position: absolute;
      right: 18px;
      bottom: 16px;
      width: 34px;
      aspect-ratio: 330 / 140;
      background: url("kz-badge.png") center / contain no-repeat;
      pointer-events: none;
      filter: drop-shadow(0 6px 10px rgba(17,24,20,.12));
    }

    .calculator-visual .product-visual {
      width: 78%;
      height: 240px;
      transform: scale(1.05);
    }

    .calculator-main-number {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .calculator-progress span {
      width: var(--calc-progress, 50%);
      height: 100%;
      display: block;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand-deep), var(--amber));
    }

    .category-feature {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 16px;
      align-items: stretch;
    }

    .category-feature__banner {
      min-height: 680px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 28px;
      border-radius: var(--r-lg);
      color: var(--on-dark);
      background:
        linear-gradient(150deg, rgba(17,24,20,.97), rgba(49,83,106,.72)),
        var(--graphite);
      overflow: hidden;
      position: relative;
    }

    .category-feature__banner::after {
      content: "";
      position: absolute;
      right: -110px;
      bottom: -110px;
      width: 320px;
      height: 320px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;
    }

    .category-feature__banner > * {
      position: relative;
      z-index: 1;
    }

    .category-feature__banner .eyebrow {
      color: #cce5d1;
    }

    .category-feature__banner p {
      color: rgba(255,255,255,.72);
    }

    .category-feature__banner .product-visual {
      width: 100%;
      height: 260px;
      transform: scale(.92);
    }

    .step {
      min-height: 190px;
      padding: 24px;
      background: var(--surface);
    }

    .about-page {
      display: grid;
      gap: 34px;
      align-items: start;
    }

    .about-main {
      display: grid;
      gap: 34px;
    }

    .about-hero {
      min-height: 520px;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
      gap: 36px;
      align-items: center;
      padding: clamp(28px, 4vw, 52px);
      color: var(--on-dark);
      background:
        linear-gradient(115deg, rgba(17,24,20,.96), rgba(31,71,43,.86)),
        linear-gradient(135deg, #1f2924, #61746b);
      overflow: hidden;
      position: relative;
    }

    .about-hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgba(255,255,255,.22);
    }

    .about-hero > * {
      position: relative;
      z-index: 1;
    }

    .about-hero__meta strong {
      display: block;
      margin-bottom: 8px;
      font-size: 24px;
      line-height: 1;
    }

    .about-hero__meta span {
      color: rgba(255,255,255,.72);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.35;
    }

    .about-visual {
      min-height: 390px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
    }

    .about-visual::before {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 58px;
      height: 70px;
      border-radius: 50%;
      background: rgba(0,0,0,.24);
      filter: blur(20px);
    }

    .about-visual .product-visual {
      width: 320px;
      height: 260px;
      transform: scale(1.18);
      z-index: 1;
    }

    /* Реальное фото продукта вместо CSS-рисунка контейнера в hero «О компании» */

    .about-visual--photo::before { display: none; }

    .about-visual--photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 50% 58%;
    }

    /* Фотоблок производства: вертикальные фото в сетке с фиксированной высотой,
       object-fit: cover - без растяжения и полей */

    .about-gallery__item {
      position: relative;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: #dfe5e1;
    }

    .about-gallery__item img,
    .about-gallery__item video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 50% 50%;
      transition: transform .45s ease;
    }

    .about-gallery__item:hover img { transform: scale(1.025); }

    .about-gallery__item figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 40px 14px 12px;
      color: var(--on-dark);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.3;
      background: linear-gradient(to top, rgba(17, 24, 20, .82), rgba(17, 24, 20, 0));
      pointer-events: none;
    }

    .about-gallery__item--video { cursor: pointer; }

    .about-gallery__play {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .5);
      border-radius: 50%;
      background: rgba(17, 24, 20, .55);
      color: var(--on-dark);
      transform: translate(-50%, -50%);
      cursor: pointer;
      transition: background var(--speed), transform var(--speed);
    }

    .about-gallery__item--video:hover .about-gallery__play { background: rgba(44, 96, 51, .85); }
    .about-gallery__item--video.is-playing .about-gallery__play { opacity: 0; pointer-events: none; }

    .about-section {
      display: grid;
      gap: 18px;
    }

    .about-section__head {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      align-items: end;
    }

    .about-kpi strong {
      display: block;
      margin-bottom: 10px;
      color: var(--brand-deep);
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1;
    }

    .about-kpi span {
      color: var(--muted);
      font-size: var(--fs-sm);
      font-weight: var(--fw-regular);
      line-height: 1.35;
    }

    .about-capability__icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .about-steps {
      counter-reset: about-step;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .about-step::before {
      counter-increment: about-step;
      content: counter(about-step, decimal-leading-zero);
      display: inline-flex;
      margin-bottom: 18px;
      color: var(--brand);
      font-size: var(--fs-micro);
      font-weight: var(--fw-semibold);
      letter-spacing: .08em;
    }

    .client-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .client-logo-card {
      min-height: 132px;
      display: grid;
      grid-template-rows: 78px auto;
      gap: 10px;
      align-items: center;
      padding: 14px;
      margin: 0;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface);
      transition: transform var(--speed), border-color var(--speed), box-shadow var(--speed);
    }

    .client-logo-card:hover {
      transform: translateY(-2px);
      border-color: rgba(44,96,51,.34);
      box-shadow: 0 14px 28px rgba(20, 33, 26, .08);
    }

    .client-logo-card figcaption {
      margin: 0;
      color: var(--ink);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.25;
      text-align: center;
    }

    .legal-page {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 26px;
      align-items: start;
    }

    .legal-main {
      display: grid;
      gap: 18px;
    }

    .legal-hero code {
      font: inherit;
      font-weight: var(--fw-medium);
      word-break: break-all;
    }

    .legal-document ul {
      display: grid;
      gap: 8px;
      padding-left: 20px;
      margin: 0;
    }

    .legal-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .legal-note {
      padding: 16px;
      border-radius: var(--r-lg);
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: var(--fs-sm);
      font-weight: var(--fw-regular);
      line-height: 1.55;
    }

    .legal-nav button,
    .legal-nav a {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      color: var(--ink);
      background: var(--surface);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      text-align: left;
      transition: border-color var(--speed), background var(--speed);
    }

    .legal-nav button:hover,
    .legal-nav a:hover {
      border-color: rgba(44, 96, 51, .34);
      background: #f7faf8;
    }

    .news-page {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 26px;
      align-items: start;
    }

    .news-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .54fr);
      gap: 28px;
      align-items: end;
      padding: 34px;
      color: var(--on-dark);
      background:
        linear-gradient(120deg, rgba(17,24,20,.9), rgba(34,82,45,.76)),
        linear-gradient(135deg, #29332e, #6e7c75);
      overflow: hidden;
    }

    .news-list {
      display: grid;
      gap: 18px;
    }

    .news-article {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 20px;
      padding: 18px;
    }

    .news-article__media {
      aspect-ratio: 1 / 1;
      min-height: 0;
      position: relative;
      border-radius: var(--r-lg);
      overflow: hidden;
      background: #f7faf8;
      border: 1px solid var(--line);
    }

    .news-article__media img {
      width: 100%;
      height: 100%;
      aspect-ratio: 1 / 1;
      display: block;
      object-fit: cover;
    }

    .news-article__body {
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .news-article ul {
      display: grid;
      gap: 8px;
      padding-left: 20px;
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-sm);
      line-height: 1.55;
    }

    .news-side-card p,
    .news-side-card a,
    .news-side-card li {
      color: var(--muted);
      font-size: var(--fs-sm);
      line-height: 1.55;
    }

    .news-side-card a {
      display: block;
      color: var(--brand-deep);
      font-weight: var(--fw-medium);
    }

    .article-page {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 26px;
      align-items: start;
    }

    .article-main {
      display: grid;
      gap: 18px;
    }

    .article-hero__media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .article-block ul {
      display: grid;
      gap: 10px;
      padding-left: 20px;
      margin: 0;
    }

    @media (max-width: 900px) {
      .news-page,
      .news-hero,
      .news-article,
      .article-page {
        grid-template-columns: 1fr;
      }
    }

    .search-page {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 26px;
      align-items: start;
    }

    .result-section {
      display: grid;
      gap: 12px;
    }

    .result-section__head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    .result-category:hover,
    .result-category:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(44,96,51,.34);
      box-shadow: var(--shadow);
      outline: 0;
    }

    .result-category__media {
      height: 78px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: linear-gradient(180deg, #fff, #f8faf9);
      overflow: hidden;
    }

    .result-category__media .product-visual {
      width: 82px;
      height: 70px;
      transform: scale(.62);
    }

    .result-item:hover {
      transform: translateY(-3px);
      border-color: rgba(44,96,51,.34);
      box-shadow: var(--shadow);
    }

    .result-item__media .product-visual {
      width: 110px;
      height: 92px;
      transform: scale(.76);
    }

    .search-empty {
      padding: 24px;
      color: var(--muted);
      font-size: var(--fs-ui);
      line-height: 1.5;
    }

    .quote-table {
      width: 100%;
      border-collapse: collapse;
    }

    .quote-table th,
    .quote-table td {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
      font-size: var(--fs-sm);
    }

    /* Цена и сумма — одной строкой: иначе «₸» отрывается и падает под число */

    .quote-product {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 320px;
    }

    .mini-photo {
      width: 72px;
      height: 62px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--surface);
      overflow: hidden;
    }

    .mini-photo .product-visual {
      width: 54px;
      height: 46px;
      transform: scale(.48);
    }

    .mini-photo img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    /* ----- Оформление: добавление позиций прямо в заявке ----- */

    .quote-add {
      position: relative;
      /* выше плавающих кнопок связи (z-index: 68), иначе они накрывают подсказки */
      z-index: 70;
      margin-bottom: 18px;
    }

    .quote-add__field {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      align-items: center;
      min-height: 52px;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .quote-add.is-open .quote-add__field,
    .quote-add__field:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(44, 96, 51, .12);
    }

    .quote-add__icon {
      display: grid;
      place-items: center;
      color: var(--brand);
    }

    .quote-add__icon svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
    }

    .quote-add__field input {
      width: 100%;
      min-width: 0;
      height: 50px;
      padding: 0 6px 0 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: var(--fs-ui);
      font-weight: var(--fw-regular);
    }

    .quote-add__field input::-webkit-search-cancel-button { display: none; }
    .quote-add__field input::placeholder { color: var(--muted); font-weight: var(--fw-regular); }

    .quote-add__clear {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-right: 6px;
      border: 0;
      border-radius: var(--r-md);
      color: var(--muted);
      background: var(--steel);
    }

    .quote-add__clear[hidden] { display: none; }
    .quote-add__clear:hover { color: var(--ink); }
    .quote-add__clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .quote-add__suggest {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 1;
      max-height: 366px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--panel);
      box-shadow: 0 22px 48px rgba(5, 18, 11, .16);
    }

    .quote-add__suggest[hidden] { display: none; }

    .quote-add__item {
      width: 100%;
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 8px;
      border: 0;
      border-radius: var(--r-md);
      text-align: left;
      background: transparent;
      color: var(--ink);
    }

    .quote-add__item + .quote-add__item { margin-top: 2px; }
    .quote-add__item:hover,
    .quote-add__item.is-active { background: var(--brand-soft); }

    .quote-add__media {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--surface);
    }

    .quote-add__media img { width: 100%; height: 100%; display: block; object-fit: contain; }
    .quote-add__media .product-visual { width: 46px; height: 40px; transform: scale(.44); }

    .quote-add__copy { min-width: 0; display: grid; gap: 3px; }
    .quote-add__title {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 13.5px;
      font-weight: var(--fw-semibold);
      line-height: 1.35;
    }

    .quote-add__meta { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-regular); }
    .quote-add__meta b { color: var(--brand); font-weight: var(--fw-semibold); }

    .quote-add__plus {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: var(--r-md);
      color: var(--brand);
      background: var(--brand-soft);
    }

    .quote-add__item.is-active .quote-add__plus,
    .quote-add__item:hover .quote-add__plus { color: var(--on-dark); background: var(--brand); }
    .quote-add__plus svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    .quote-add__empty {
      padding: 16px 10px;
      color: var(--muted);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.5;
      text-align: center;
    }

    .quote-table-wrap[hidden] { display: none; }

    .qty input[data-cart-quantity-input] { cursor: text; }

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

    .payer-card input {
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--brand);
    }

    .payer-card strong {
      display: block;
      font-size: var(--fs-h3);
      line-height: 1.2;
    }

    .payer-card span {
      color: var(--muted);
      font-size: var(--fs-meta);
      line-height: 1.5;
    }

    .payment-panel,
    .payer-fields {
      display: none;
    }

    .payment-panel.is-active,
    .payer-fields.is-active {
      display: grid;
      gap: 14px;
    }

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

    .field--full {
      grid-column: 1 / -1;
    }

    /* Доставка по городу: адрес, карта и сумма одним серым блоком под выбором доставки.
       Узкая форма - в колонку (адрес, карта, сумма); широкая - адрес и сумма слева, карта
       справа. Колонки - долями сетки, без процентов. Межгород - только адрес (без .is-city). */
    .quote-dlv {
      container-type: inline-size;
      margin-top: 12px;
      padding: 16px 18px 18px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--steel);
    }

    .quote-dlv[hidden],
    .quote-dlv [hidden] { display: none; }

    /* Узкая форма - по порядку разметки: адрес, карта, сумма */
    .quote-dlv__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    .quote-dlv__addr { min-width: 0; }

    .delivery-address {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    /* Широкая форма: адрес во всю ширину, под ним сумма и карта рядом, одной высоты */
    @container (min-width: 700px) {
      .quote-dlv.is-city .quote-dlv__addr { grid-area: addr; }

      .quote-dlv.is-city .delivery-km {
        align-content: start;
        grid-template-rows: auto auto 1fr;
      }
    }

    /* Узкая форма (адрес над картой): строка статуса держит место под две строки - «Нашли: …»,
       «Считаем…» и «Точка на карте: …» сменяют друг друга, а карта под пальцем не сдвигается */
    @container (max-width: 699px) {
      .quote-dlv.is-city .delivery-address[data-dlv-inline] .dlv-status { min-height: 3em; }
    }

    /* Итог доставки: сумма, откуда километры и поле километров (если адрес не находится) */
    .delivery-km {
      display: grid;
      gap: 8px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface);
    }

    .delivery-km__head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 2px 14px;
    }

    .delivery-km__price {
      color: var(--brand-deep);
      font-size: 22px;
      font-weight: var(--fw-semibold);
      line-height: 1.2;
      white-space: nowrap;
      transition: opacity var(--speed);
    }

    /* Адрес или точка ещё считаются - прежняя сумма бледнеет до нового расчёта */
    .quote-dlv:has(.delivery-address.is-dlv-busy:not([hidden])) .delivery-km__price { opacity: .4; }

    .delivery-km__source {
      color: var(--ink);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      line-height: 1.5;
    }

    .delivery-km__source.is-manual { color: #8a5a12; }

    /* Запасное поле км - только пока адрес не посчитан (не нашёлся, нет сети): при расчёте по адресу
       его нет, а вписанные километры суммы не дают - её посчитает менеджер */

    .delivery-address .dlv-status { margin-top: 2px; }
    /* Ничего не посчитано: подсказка про точку на карте (assets/delivery-map.js) */
    .dlv-status__line--idle { color: var(--muted); }
    /* Несколько найденных адресов под полем заявки и калькулятора ЖК (assets/delivery-map.js) */
    .dlv-variants--compact { margin-top: 2px; }
    .dlv-variants--compact .dlv-variant { padding: 8px 11px; }
    .delivery-address.is-calc-off [data-dlv-calc],
    .delivery-address.is-calc-off [data-dlv-status],
    .delivery-address.is-calc-off [data-dlv-variants] { display: none; }
    /* «Оформить заявку» со страницы «Доставка» прокручивает к выбору доставки - под липкой шапкой
       (--hd-h - её настоящая высота); на телефоне отступ под шапку задаёт mobile.css */
    [data-quote-delivery-field] { scroll-margin-top: calc(var(--hd-h, 142px) + 16px); }
    @media (max-width: 760px) {
      [data-quote-delivery-field] { scroll-margin-top: 0; }
    }

    .delivery-options {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .delivery-option {
      position: relative;
      min-height: 116px;
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) 22px;
      align-items: center;
      gap: 16px;
      padding: 18px;
      border: 1px solid rgba(198, 210, 202, .9);
      border-radius: var(--r-lg);
      background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,249,.96)),
        #fff;
      color: var(--ink);
      cursor: pointer;
      transition: border-color var(--speed), box-shadow var(--speed), background-color var(--speed), transform var(--speed);
    }

    .delivery-option input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .delivery-option__icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(44, 96, 51, .2);
      border-radius: 50%;
      background: var(--brand-soft);
      color: var(--brand-deep);
    }

    .delivery-option__icon svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .delivery-option__body strong {
      display: block;
      margin-bottom: 5px;
      font-size: 17px;
      line-height: 1.2;
    }

    .delivery-option__body > span {
      display: block;
      color: var(--muted);
      font-size: var(--fs-meta);
      line-height: 1.45;
    }

    .delivery-option__mark {
      width: 22px;
      height: 22px;
      border: 2px solid rgba(31,37,34,.28);
      border-radius: 50%;
      background: var(--surface);
      position: relative;
      transition: border-color var(--speed), background-color var(--speed);
    }

    .delivery-option:has(input:checked) .delivery-option__mark::after {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 50%;
      background: var(--surface);
    }

    .delivery-option:has(input:focus-visible) {
      outline: 3px solid rgba(200, 138, 45, .55);
      outline-offset: 3px;
    }

    .delivery-option input {
      accent-color: var(--brand);
    }

    .summary-line {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-size: var(--fs-sm);
    }

    .form-grid {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    .field {
      display: grid;
      gap: 7px;
    }

    .field label {
      color: var(--muted);
      font-size: var(--fs-meta);
      font-weight: var(--fw-medium);
    }

    .field input,
    .field textarea,
    .field select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--ink);
      padding: 10px 12px;
      outline: 0;
      transition: border-color var(--speed), box-shadow var(--speed);
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: rgba(44,96,51,.48);
      box-shadow: 0 0 0 4px rgba(44,96,51,.08);
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 22px 0 0;
    }

    /* Светлый футер: та же палитра, что у контента, отделён линией сверху */

    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr .9fr 1.1fr;
      gap: 30px 28px;
      align-items: start;
    }

    .footer-grid a:hover { color: var(--brand); }

    .toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      /* выше попапа заявки и нижней панели подборки, иначе тост тонет под их фоном */
      z-index: 1400;
      width: min(360px, calc(100vw - 48px));
      padding: 16px 18px;
      border-radius: var(--r-lg);
      color: var(--on-dark);
      background: var(--graphite);
      box-shadow: var(--shadow-strong);
      transform: translateY(24px);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--speed), transform var(--speed);
    }

    .toast.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .floating-contacts {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 68;
      display: grid;
      gap: 10px;
      align-items: end;
      justify-items: end;
    }

    .floating-contact {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 18px 0 14px;
      border: 1px solid rgba(255,255,255,.46);
      border-radius: var(--r-full);
      color: var(--on-dark);
      background: var(--brand-deep);
      box-shadow: 0 18px 42px rgba(17,24,20,.18);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      line-height: 1;
      transition: transform var(--speed), box-shadow var(--speed), background-color var(--speed);
    }

    .floating-contact:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 50px rgba(17,24,20,.24);
    }

    .floating-contact__icon {
      width: 21px;
      height: 21px;
      display: block;
      flex: 0 0 auto;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }

    .image-lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 34px;
      background: rgba(8, 14, 10, .84);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--speed);
    }

    .image-lightbox.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .image-lightbox__panel {
      position: relative;
      width: min(100%, 1080px);
      height: min(82vh, 760px);
      display: grid;
      place-items: center;
    }

    .image-lightbox img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 32px 36px rgba(0, 0, 0, .35));
    }

    .image-lightbox__close {
      position: absolute;
      top: -10px;
      right: -10px;
      z-index: 2;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      color: var(--on-dark);
      background: rgba(17, 24, 20, .72);
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }

    @media (max-width: 1180px) {
      .hero__inner,
	      .product-page,
	      .about-page,
	      .about-hero,
	      .about-story,
	      .about-contact-band,
	      .news-page,
	      .news-hero,
	      .legal-page,
	      .search-page,
	      .quote-page {
	        grid-template-columns: 1fr;
	      }

      .product-grid,
      .result-category-grid,
      .category-cards,
      .home-products,
      .category-feature,
      .product-seo,
      .about-kpis,
      .about-capabilities,
      .about-steps,
      .client-grid,
      .steps {
	        grid-template-columns: repeat(2, minmax(0, 1fr));
	      }
	    }

    @media (max-width: 760px) {
      .section-head,
      .result-section__head,
      .toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      #view-category {
        animation: none;
        padding-bottom: 104px;
      }

      .filter-apply {
        bottom: 10px;
      }

      .category-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      body.has-filter-drawer .mobile-catalog-nav {
        display: none;
      }

      .floating-contacts {
        right: 14px;
        bottom: 14px;
        grid-template-columns: repeat(2, 46px);
        gap: 8px;
      }

      .floating-contact {
        width: 46px;
        min-height: 46px;
        padding: 0;
        gap: 0;
      }

      .floating-contact__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      .floating-contact__icon {
        width: 20px;
        height: 20px;
      }

      body.is-category-view .floating-contacts {
        bottom: 92px;
      }

      .hero {
        min-height: auto;
      }

      .gallery--few .thumbs {
        grid-template-columns: 1fr;
        grid-template-rows: none;
      }

      .main-photo .product-visual {
        width: 78%;
        height: 280px;
        transform: translateY(0) scale(1.2);
      }

      .price-block__control {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        justify-items: stretch;
        padding-top: 12px;
        border-top: 1px dashed rgba(198, 210, 202, .9);
      }

      .qty {
        width: min(170px, 100%);
        grid-template-columns: 44px minmax(54px, 1fr) 44px;
      }

      .config-row {
        grid-template-columns: 1fr;
      }

      .related-card__media::after,
      .product-card__media::after,
      .home-product-card__media::after {
        width: 20px;
        right: 10px;
        bottom: 9px;
      }

      .image-lightbox {
        padding: 18px;
      }

      .image-lightbox__panel {
        height: 78vh;
      }

      .image-lightbox__close {
        top: 6px;
        right: 6px;
      }

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

	      .about-section__head {
	        flex-direction: column;
	      }

	      .about-visual {
	        min-height: 220px;
	      }

	      .about-visual .product-visual {
	        width: 190px;
	        height: 150px;
	        transform: scale(1.02);
	      }

      #view-category .product-card__media::before {
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 14px;
      }

      #view-category .product-card__media::after {
        width: 16px;
        right: 8px;
        bottom: 8px;
      }

      #view-category .product-visual {
        width: 94%;
        height: 124px;
        transform: scale(.78);
      }

      #view-category .product-media-image {
        max-width: 90%;
        max-height: 112px;
      }

      #view-category .product-card__category {
        margin-bottom: 5px;
        font-size: 9px;
        line-height: 1.2;
      }

      #view-category .product-card h3 {
        min-height: 0;
        margin-bottom: 8px;
        font-size: var(--fs-meta);
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      #view-category .price {
        font-size: 17px;
      }

      #view-category .price span,
      #view-category .stock {
        font-size: 11px;
      }
    }

    /* ===== Единый хедер сайта и hero главной ===== */
    .hd-header {
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 26px var(--hd-edge) 0;
      position: relative;
      z-index: 2;
    }
    .hd-logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; flex: 0 0 auto; }
    .hd-logo img { height: 34px; width: auto; display: block; filter: brightness(0) invert(1); }
    .hd-catalog-mega { position: static; }
    .hd-catalog-mega > summary,
    .hd-solutions-menu > summary { list-style: none; }
    .hd-catalog-mega > summary::-webkit-details-marker,
    .hd-solutions-menu > summary::-webkit-details-marker { display: none; }
    .hd-catalog-mega__panel {
      position: absolute;
      top: calc(100% - 8px);
      /* Панель начинается по левому краю логотипа: тот же отступ, что у шапки.
         Точное значение приходит из --hd-inline в assets/site-v1-overrides.css. */
      left: 24px;
      z-index: 30;
      width: min(1120px, calc(100% - 48px));
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 18px;
      border: 1px solid rgba(198, 210, 202, .9);
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: 0 28px 72px rgba(5, 18, 11, .28);
      color: var(--ink);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .hd-catalog-mega:hover .hd-catalog-mega__panel,
    .hd-catalog-mega:focus-within .hd-catalog-mega__panel,
    .hd-catalog-mega[open] .hd-catalog-mega__panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }
    .hd-catalog-mega__item {
      min-width: 0;
      min-height: 104px;
      display: grid;
      grid-template-columns: 104px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--ink);
      transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
    }
    .hd-catalog-mega__item:hover {
      border-color: rgba(44, 96, 51, .42);
      background: #f7faf8;
      transform: translateY(-2px);
    }
    .hd-catalog-mega__media {
      width: 104px;
      height: 86px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: var(--r-sm);
      background: var(--surface);
    }
    .hd-catalog-mega__media img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }
    .hd-catalog-mega__copy { min-width: 0; display: grid; gap: 5px; }
    .hd-catalog-mega__copy span {
      color: var(--muted);
      font-size: 11.5px;
      font-weight: var(--fw-regular);
    }
    .hd-solutions-menu {
      position: relative;
    }
    .hd-solutions-menu__panel {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      z-index: 31;
      width: 390px;
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid rgba(198, 210, 202, .9);
      border-radius: var(--r-lg);
      background: var(--surface);
      box-shadow: 0 24px 58px rgba(5, 18, 11, .24);
      color: var(--ink);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, 8px);
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }
    .hd-solutions-menu__panel::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 14px;
    }
    .hd-solutions-menu:hover .hd-solutions-menu__panel,
    .hd-solutions-menu:focus-within .hd-solutions-menu__panel,
    .hd-solutions-menu[open] .hd-solutions-menu__panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    .hd-solutions-menu__item {
      min-width: 0;
      display: grid;
      gap: 4px;
      padding: 13px 14px;
      border-radius: var(--r-md);
      color: var(--ink);
      background: #f7faf8;
      transition: color .2s ease, background-color .2s ease;
    }
    .hd-solutions-menu__item:hover {
      color: var(--on-dark);
      background: var(--brand);
    }
    .hd-solutions-menu__item span {
      color: var(--muted);
      font-size: 11.5px;
      font-weight: var(--fw-regular);
      line-height: 1.45;
    }
    .hd-solutions-menu__item:hover span {
      color: rgba(255, 255, 255, .76);
    }
    .hd-phone svg { width: 22px; height: 22px; stroke: var(--on-dark); fill: none; stroke-width: 1.7; }
    .hd-phone span { display: block; font-size: 12.5px; font-weight: var(--fw-regular); color: rgba(255, 255, 255, .64); }
    .hd-call {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-height: 52px;
      padding: 0 26px;
      border: 0;
      border-radius: var(--r-md);
      background: #1f9d5b;
      color: var(--on-dark);
      font-family: inherit;
      font-size: var(--fs-ui);
      font-weight: var(--fw-medium);
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }
    .hd-call:hover { background: #24b166; transform: translateY(-1px); }
    .hd-cart-button {
      position: relative;
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex: 0 0 auto;
      padding: 0 15px;
      border: 1px solid rgba(255, 255, 255, .34);
      border-radius: var(--r-md);
      color: var(--on-dark);
      background: rgba(255, 255, 255, .08);
      font-family: inherit;
      text-align: left;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .hd-cart-button:hover {
      border-color: rgba(255, 255, 255, .62);
      background: rgba(255, 255, 255, .16);
      transform: translateY(-1px);
    }
    .hd-cart-button > svg {
      width: 21px;
      height: 21px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .hd-cart-button__copy { display: grid; gap: 1px; }
    .hd-cart-button__copy strong { font-size: 12.5px; font-weight: var(--fw-medium); white-space: nowrap; }
    /* Число уже написано словами («4 шт.»), кружок дублировал бы его.
       Он возвращается ниже, в медиа, где кнопка сжата до одной иконки. */
    .hd-cart-button__count { display: none; }

    [data-cart-count][hidden] { display: none; }

    .mobile-cart-fab { display: none; }
    .hd-hero {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(13, 26, 18, 1) 0%, rgba(13, 26, 18, .96) 30%, rgba(13, 26, 18, .55) 48%, rgba(13, 26, 18, .08) 66%, rgba(13, 26, 18, 0) 80%),
        var(--cms-background, none) right bottom / auto 100% no-repeat;
      background-color: #0d1a12;
      min-height: max(80vh, 740px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--on-dark);
    }
    /* выравнивание контента hero по сетке контейнера (1600px) */
    .hd-hero { --hd-edge: max(56px, calc((100vw - 1600px) / 2 + 24px)); }
    .hd-slide {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      max-width: calc(var(--hd-edge) + 720px);
      padding: 40px 24px 40px var(--hd-edge);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
    }
    .hd-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
    .hd-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
    .hd-fact { display: flex; flex-direction: column; gap: 4px; }
    /* Меню уходит второй строкой: уплотнённой шапке в одну строку нужно около
       1440px ширины страницы (уплотнение — в блоке поиска ниже). Медиазапрос
       считает ширину вместе с полосой прокрутки (в Windows 17px), отсюда запас. */
    @media (max-width: 1180px) {
      .hd-cart-button__copy { display: none; }
    }
    @media (max-width: 760px) {
      .hd-phone { display: none; }
      .hd-cart-button { display: none; }
      .hd-call { min-height: 44px; padding: 0 16px; font-size: 13.5px; margin-left: auto; }
      .hd-nav {
        display: grid;
        grid-template-columns: repeat(3, max-content);
        justify-content: start;
        gap: 4px 18px;
        overflow: visible;
        padding-bottom: 4px;
      }
      .hd-nav > a,
      .hd-catalog-mega > summary,
      .hd-solutions-menu > summary { font-size: 13.5px; white-space: nowrap; }
      .hd-catalog-mega__panel {
        top: calc(100% + 4px);
        left: var(--hd-inline, 20px);
        width: calc(100% - var(--hd-inline, 20px) * 2);
        max-height: 66vh;
        grid-template-columns: 1fr;
        padding: 12px;
        overflow-y: auto;
      }
      .hd-catalog-mega__top { position: sticky; top: -12px; z-index: 1; padding: 12px 2px 10px; background: var(--surface); }
      .hd-catalog-mega__item { min-height: 84px; grid-template-columns: 78px minmax(0, 1fr); }
      .hd-catalog-mega__media { width: 78px; height: 68px; }
      .hd-solutions-menu__panel {
        position: fixed;
        top: 118px;
        left: 16px;
        right: 16px;
        width: auto;
        max-height: calc(100vh - 134px);
        overflow-y: auto;
        transform: translateY(8px);
      }
      .hd-solutions-menu:hover .hd-solutions-menu__panel,
      .hd-solutions-menu:focus-within .hd-solutions-menu__panel,
      .hd-solutions-menu[open] .hd-solutions-menu__panel {
        transform: translateY(0);
      }
      body.has-cart-items:not(.is-category-view):not(.is-quote-view):not(.is-kp-view) .mobile-cart-fab {
        position: fixed;
        left: 14px;
        bottom: 14px;
        z-index: 68;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 0 15px;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: var(--r-full);
        color: var(--on-dark);
        background: var(--brand-deep);
        box-shadow: 0 16px 38px rgba(5, 18, 11, .24);
        font-size: var(--fs-meta);
        font-weight: var(--fw-medium);
      }
      .mobile-cart-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    }

    /* ===== Вариант D - сравнение компактных блоков категорий ===== */
    .hd-cat-compare:hover { border-color: rgba(44, 96, 51, .46); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(17, 24, 20, .08); }
    .hd-cat-compare__media { min-width: 0; aspect-ratio: 3 / 2; display: grid; place-items: center; margin: 6px 6px 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface); }
    .hd-cat-compare__body strong { display: block; color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; font-weight: var(--fw-semibold); }
    .hd-cat-compare__body small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.3; font-weight: var(--fw-regular); }

    @media (max-width: 600px) {
      .hd-cats-head h2 br { display: none; }
      .hd-cat-shelf {
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 76vw); grid-template-columns: none;
        gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; padding-bottom: 10px;
      }
      .hd-cat-shelf::-webkit-scrollbar { display: none; }
      .hd-cat-compare--shelf { scroll-snap-align: start; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hd-cat-compare { transition: none; }
    }

    /* ===== Вариант D - переходы по сценарию закупки ===== */
    .hd-routes {
      display: grid; grid-template-columns: 1.12fr repeat(3, minmax(0, 1fr));
      align-items: stretch;
    }
    .hd-route {
      min-width: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px;
      gap: 15px; align-items: center; text-align: left; padding: 22px 26px;
      border: 0; border-left: 1px solid rgba(255, 255, 255, .13);
      background: transparent; color: inherit; font: inherit; cursor: pointer;
      transition: background .2s ease;
    }
    .hd-route:hover { background: rgba(255, 255, 255, .055); }
    .hd-route__icon img { width: 24px; height: 24px; display: block; filter: brightness(0) invert(1); opacity: .88; }
    .hd-route > svg {
      width: 18px; height: 18px; stroke: #8fd0a0; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease;
    }
    .hd-route:hover > svg { transform: translateX(4px); }
    @media (max-width: 1100px) {
      .hd-routes { grid-template-columns: 1fr 1fr 1fr; }
      .hd-routes__intro { grid-column: 1 / -1; padding: 8px 0 24px; }
      .hd-routes__intro h2 { max-width: none; }
    }
    @media (max-width: 720px) {
      .hd-routes { grid-template-columns: 1fr; }
    }

    /* ===== Вариант D - доверие для юрлиц (тёмный блок) ===== */
    .hd-trust::after {
      content: ""; position: absolute; right: -140px; top: -120px; width: 460px; height: 460px;
      border-radius: 50%; background: radial-gradient(circle, rgba(44, 96, 51, .5), transparent 70%); pointer-events: none;
    }
    .hd-trust__watermark img {
      width: auto; max-width: none; height: 100%; display: block;
      filter: brightness(0) invert(1);
    }
    .hd-trust__eyebrow {
      display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); font-weight: var(--fw-medium);
      letter-spacing: .14em; text-transform: uppercase; color: #8fd0a0;
      background: rgba(143, 208, 160, .1); border: 1px solid rgba(143, 208, 160, .22);
      border-radius: var(--r-sm); padding: 8px 15px; margin-bottom: 16px;
    }
    .hd-trust__item:hover { background: rgba(255, 255, 255, .07); border-color: rgba(143, 208, 160, .35); transform: translateY(-4px); }
    .hd-trust__ic svg { width: 26px; height: 26px; stroke: #a7dcb4; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    @media (max-width: 620px) {
      .hd-trust__watermark { display: none; }
    }

    /* ===== Вариант D - лёгкая покупка для физлиц (светлый блок) ===== */
    .hd-easy-head {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .72fr);
      align-items: end; gap: 64px; margin: 0 0 38px; text-align: left;
    }
    .hd-easy__ic {
      width: 92px; height: 92px; border-radius: var(--r-md); display: grid; place-items: center;
      margin-bottom: 28px; background: var(--brand); color: var(--on-dark);
      box-shadow: 0 14px 34px rgba(44, 96, 51, .16);
      transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
    }
    .hd-easy__item:hover .hd-easy__ic { transform: translateY(-4px); }
    .hd-easy__ic img { width: 46px; height: 46px; display: block; }
    @media (max-width: 840px) {
      .hd-easy__item,
      .hd-easy__item:first-child,
      .hd-easy__item:last-child {
        display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: start; gap: 24px;
        padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line-strong);
      }
      .hd-easy__ic img { width: 38px; height: 38px; }
    }
    @media (max-width: 620px) {
      .hd-easy__item,
      .hd-easy__item:first-child,
      .hd-easy__item:last-child { grid-template-columns: 68px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
      .hd-easy__ic img { width: 32px; height: 32px; }
    }

    /* Коллаж макро-фото узлов */
    .hd-deep__shot--weld img { object-position: 52% 48%; }
    .hd-deep__shot--edge img { object-position: 50% 54%; }
    .hd-deep__shot--mechanism img { object-position: 50% 66%; }
    .hd-deep__shot:hover img { transform: scale(1.025); }
    @media (max-width: 620px) {
      .hd-deep__shot:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 8 / 9; }
    }

    /* ===== Вариант D - лид-магнит (контрастная форма) ===== */
    .hd-lead__txt { position: relative; z-index: 1; }
    .hd-lead__eyebrow {
      display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: var(--fw-medium);
      letter-spacing: .12em; text-transform: uppercase; color: #f0cf9b; margin-bottom: 14px;
    }
    .hd-lead__txt p { margin: 0; font-size: 15.5px; line-height: 1.62; font-weight: var(--fw-regular); color: rgba(255, 255, 255, .78); }
    .hd-lead__form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
    .hd-lead__form input::placeholder { color: rgba(255, 255, 255, .5); }
    .hd-lead__form input:focus { outline: none; border-color: #8fd0a0; background: rgba(255, 255, 255, .12); }
    .hd-lead__note { font-size: var(--fs-micro); font-weight: var(--fw-regular); color: rgba(255, 255, 255, .5); line-height: 1.45; }

    /* SEO-текст главной - общий блок .v2-seo (assets/v2/foundation.css, раздел 24) */

    /* ===== Вариант D - анимации появления при скролле ===== */
    .hd-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
      will-change: opacity, transform;
    }
    @media (prefers-reduced-motion: reduce) {
      .hd-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }

    /* ===== Тендеры: расширенный технический фильтр (вместо калькулятора) ===== */
    .tf__panel {
      background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: 22px; display: flex; flex-direction: column; gap: 20px;
    }
    .tf__check input { width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; cursor: pointer; }
    .tf__dims input {
      width: 100%; padding: 8px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
      font: inherit; font-size: var(--fs-sm); color: var(--ink); background: var(--panel);
    }
    .tf__dims input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

    .tf__empty {
      padding: 34px 22px; text-align: center; border: 1px dashed var(--line-strong);
      border-radius: var(--r-lg); color: var(--muted); font-size: 14.5px; line-height: 1.55; background: var(--panel);
    }
    .tf__media img, .tf__media svg { width: 100%; height: 100%; display: block; object-fit: cover; }
    .tf__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
    .tf__item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand); cursor: pointer; }
    .tf__specs { display: flex; flex-wrap: wrap; gap: 6px; }

    @media (max-width: 620px) {
      .tf__price { grid-column: 2 / -1; text-align: left; margin-top: 4px; }
    }

    /* ===== Каталог: на входе категории без общего фильтра, фильтр — внутри категории ===== */
    #view-category.is-all-categories .filter,
    #view-category.is-all-categories .filter-overlay { display: none; }
    #view-category:not(.is-all-categories) [data-category-tiles-block] { display: none; }
    #view-category.is-all-categories [data-catalog-back] { display: none; }

    /* В общем каталоге фильтров нет, поэтому чип категории и «Сбросить»
       нечего показывать — остаётся счётчик и сортировка */
    #view-category.is-all-categories [data-category-chip],
    #view-category.is-all-categories .chip--reset { display: none; }

    /* ===== Каталог: витрина категорий (режим «все категории») =====
       3 флагманские линейки крупными карточками + 6 компактных под разделителем.
       Фото — обложка категории из админки, без неё заглушка (20.10.2026), текст всегда на белом. */

    .cat-tiles-head::before {
      content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px;
      border-radius: var(--r-sm); background: var(--brand);
    }
    .cat-tiles-head p { margin: 0; font-size: var(--fs-ui); font-weight: var(--fw-regular); line-height: 1.55; color: var(--muted); }

    /* Flex, а не grid: неполный ряд не оставляет «дырок», ширины считаются точно по gap */
    .cat-tiles { --cat-gap: 16px; display: flex; flex-wrap: wrap; gap: var(--cat-gap); }

    .cat-tile {
      position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
      margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
      background: var(--panel); border: 1px solid rgba(198, 210, 202, .84); border-radius: var(--r-lg);
      -webkit-appearance: none; appearance: none;
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }
    /* Вес плитки = только её ширина: 3 в ряд против 6 в ряд.
       flex-grow: 0 намеренно — новая категория не растянется на всю строку. */
    .cat-tile--lead { flex: 0 1 calc((100% - 2 * var(--cat-gap)) / 3); }
    .cat-tile--compact { flex: 0 1 calc((100% - 5 * var(--cat-gap)) / 6); }

    .cat-tile:hover { transform: translateY(-4px); border-color: rgba(44, 96, 51, .45); box-shadow: var(--shadow-strong); }
    .cat-tile:focus-visible { border-color: var(--brand); }
    .cat-tile:active { transform: translateY(-1px); }

    .cat-tile__img {
      position: absolute; inset: 0; display: block; width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 52%;
      transform: scale(1.01); /* убирает светлую кромку при hover-зуме */
      transition: transform 520ms cubic-bezier(.22, .61, .36, 1);
    }
    .cat-tile:hover .cat-tile__img { transform: scale(1.06); }

    /* Счётчик позиций — белая пилюля на фото: читается на любом кадре сета */
    .cat-tile__count {
      position: absolute; z-index: 1; top: 11px; left: 11px;
      display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px;
      border-radius: var(--r-sm); background: rgba(255, 255, 255, .94); color: var(--brand-deep);
      font-size: 11.5px; font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
      box-shadow: 0 4px 12px rgba(17, 24, 20, .22);
    }
    .cat-tile__count::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

    .cat-tile__body { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-width: 0; padding: 13px 14px 14px; }
    .cat-tile__name { font-size: 14.5px; font-weight: var(--fw-semibold); line-height: 1.28; color: var(--ink); overflow-wrap: anywhere; }
    .cat-tile__desc {
      font-size: var(--fs-meta); font-weight: var(--fw-regular); line-height: 1.5; color: var(--muted);
      display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cat-tile:hover .cat-tile__go { color: var(--brand-deep); }
    .cat-tile:hover .cat-tile__go svg { transform: translateX(4px); }

    /* Общий список товаров становится подчинённым блоком, а не вторым главным экраном */
    .cat-allgoods-head {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
      margin: 0 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
    }
    .cat-allgoods-head p { margin: 0; font-size: 13.5px; font-weight: var(--fw-regular); line-height: 1.5; color: var(--muted); }
    #view-category:not(.is-all-categories) [data-all-goods-head] { display: none; }

    /* Ноутбук и планшет: флагманы становятся широкими баннерами (фото слева, текст справа),
       компактные — по 3 в ряд, два полных ряда. Разница в весе остаётся очевидной. */
    @media (max-width: 1200px) {
      .cat-tiles { --cat-gap: 12px; }
      .cat-tile--compact { flex-basis: calc((100% - 2 * var(--cat-gap)) / 3); }
      .cat-tile--lead { flex-basis: 100%; flex-direction: row; align-items: stretch; }
    }

    /* Мобильный: флагманы снова вертикальные, компактные — по 2 в ряд (три полных ряда) */
    @media (max-width: 620px) {
      .cat-tiles { --cat-gap: 10px; }
      .cat-tiles-head p { font-size: 13.5px; }
      .cat-tile--compact { flex-basis: calc((100% - var(--cat-gap)) / 2); }
      .cat-tile__count { top: 8px; left: 8px; padding: 4px 8px 4px 6px; font-size: 10.5px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cat-tile, .cat-tile__img, .cat-tile__go svg { transition: none; }
      .cat-tile:hover { transform: none; }
      .cat-tile:hover .cat-tile__img { transform: scale(1.01); }
      .cat-tile:hover .cat-tile__go svg { transform: none; }
    }

    .cat-back {
      align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      background: none; border: 0; padding: 0 0 12px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand);
    }
    .cat-back:hover { color: var(--brand-deep); text-decoration: underline; }

    /* ==========================================================================
       Страница «Доставка и оплата» (#view-delivery) — деловой справочник.

       Ритм страницы: тёмный hero → тонкая титульная справка (цифры + оглавление)
       → белая панель с защищённой схемой зон → один длинный справочный лист
       с нумерованными разделами → тёмный финальный блок.
       Вместо семи одинаковых белых панелей — три массы разного веса.

       Раскладка раздела справочника: слева номер и заголовок (липкие на десктопе),
       в центре содержание, справа поле для коротких примечаний (от 1441px).

       Блок «Доставка по Алматы» (.dlv-zones / .dlv-order / .dlv-zone*): как узнать сумму
       (в заявке, по адресу) и как считаем - без тарифа и формулы, см. раздел 9 ниже.
       ========================================================================== */

    /* компенсируем липкую шапку сайта при переходе по якорю */
    #view-delivery [id^="dlv-s"] { scroll-margin-top: 148px; }

    /* --- 1. Титульная справка: ключевые цифры и оглавление ------------------ */

    /* Четыре факта — отдельными белыми карточками, как остальные блоки сайта */

    .dlv-brief__facts {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .dlv-brief__fact {
      min-width: 0;
      padding: 20px 22px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .dlv-brief__fact:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

    .dlv-brief__label {
      display: block;
      color: var(--brand);
      font-size: 11.5px;
      font-weight: var(--fw-medium);
      letter-spacing: .14em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .dlv-brief__value {
      display: block;
      margin-top: 9px;
      color: var(--ink);
      font-size: clamp(19px, 1.55vw, 26px);
      font-weight: var(--fw-semibold);
      letter-spacing: -.01em;
      line-height: 1.08;
    }

    .dlv-brief__note {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: var(--fw-regular);
      line-height: 1.5;
    }

    /* --- 2. Общие элементы справочника -------------------------------------- */

    .dlv-ic {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      color: var(--brand);
    }

    .dlv-ic svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Примечание на полях: тонкая линия вместо зелёной плашки */

    .dlv-note__label {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--brand-deep);
      font-size: 11.5px;
      font-weight: var(--fw-medium);
      letter-spacing: .14em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .dlv-note__label svg {
      flex: 0 0 auto;
      width: 15px;
      height: 15px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dlv-note a {
      color: var(--brand-deep);
      font-weight: var(--fw-medium);
      border-bottom: 1px solid var(--line-strong);
    }

    .dlv-note a:hover { border-bottom-color: var(--brand); }

    /* Обычная секция: заголовок сверху, контент на всю ширину.
       Раньше была трёхколоночная раскладка с номерами и боковыми врезками —
       заказчик попросил убрать и колонки, и нумерацию, и липкие блоки. */

    .dlv-ch__side { min-width: 0; margin-bottom: clamp(16px, 1.8vw, 24px); }
    .dlv-ch__side .dlv-note { margin-top: clamp(20px, 2vw, 26px); }
    .dlv-ch__body { min-width: 0; }

    /* Подзаголовок внутри раздела: подпись и добор линией до края */
    .dlv-doc .dlv-sub {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: clamp(24px, 2.6vw, 36px) 0 0;
      color: var(--brand-deep);
      font-size: var(--fs-micro);
      font-weight: var(--fw-semibold);
      letter-spacing: .16em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .dlv-doc .dlv-sub::after {
      content: "";
      flex: 1 1 auto;
      height: 1px;
      background: var(--line);
    }

    /* --- 4. Двухколоночный список «термин — пояснение» ----------------------- */

    .dlv-dl { margin: 0; }

    .dlv-dl__row {
      display: grid;
      grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
      gap: 8px clamp(20px, 2.2vw, 40px);
      padding: 18px 0;
      border-top: 1px solid var(--line);
    }

    .dlv-doc .dlv-dl__t {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin: 0;
      color: var(--ink);
      font-size: var(--fs-ui);
      font-weight: var(--fw-semibold);
      line-height: 1.35;
    }

    .dlv-doc .dlv-dl__d {
      min-width: 0;
      /* держим комфортную длину строки на широких экранах */
      margin: 0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.7;
    }

    /* Тот же список в тексте из админки: редактор отдаёт <ul> без класса,
       поэтому оформление держится на пункте dd. Две колонки - модификатор dd. */
    .dlv-doc .dlv-dl__d > ul:not([class]) {
      display: grid;
      gap: 7px clamp(20px, 2.2vw, 32px);
      margin: 11px 0 0;
      padding: 0;
      list-style: none;
    }

    .dlv-doc .dlv-dl__d--list2 > ul:not([class]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dlv-doc .dlv-dl__d > ul:not([class]) > li {
      position: relative;
      padding-left: 18px;
      color: var(--muted);
      font-size: var(--fs-sm);
      line-height: 1.55;
    }

    .dlv-doc .dlv-dl__d > ul:not([class]) > li::before {
      content: "—";
      position: absolute;
      top: 0;
      left: 0;
      color: var(--line-strong);
      font-weight: var(--fw-medium);
    }

    /* --- 5. Цепочка шагов ---------------------------------------------------- */

    .dlv-flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(16px, 1.8vw, 28px);
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    /* Полноценные карточки: оформление «одной полоской сверху» на сайте не используем */
    .dlv-flow__step {
      min-width: 0;
      padding: 18px 20px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .dlv-flow__step:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

    .dlv-flow__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      margin-bottom: 12px;
      border-radius: var(--r-md);
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: 12.5px;
      font-weight: var(--fw-medium);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .dlv-doc .dlv-flow__t {
      display: block;
      color: var(--ink);
      font-size: 14.5px;
      font-weight: var(--fw-semibold);
      line-height: 1.3;
    }

    .dlv-doc .dlv-flow__d {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: var(--fs-meta);
      line-height: 1.55;
      overflow-wrap: break-word;
    }

    /* --- 9. ЗАЩИЩЁННЫЙ БЛОК: схема и карточки зон ------------------------------
       Перенесено из прежнего кода без изменений — заказчику этот блок нравится.
       -------------------------------------------------------------------------- */

    .dlv-zones {
      display: grid;
      gap: 18px;
    }

    /* Сумма для своего адреса - в заявке: подсказка и кнопка «Оформить заявку» */
    .dlv-order {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
      padding: 20px 22px;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-lg);
      background: linear-gradient(180deg, #fbfcfb, var(--steel));
    }

    .dlv-order__icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(44, 96, 51, .2);
      border-radius: 50%;
      background: var(--brand-soft);
      color: var(--brand-deep);
    }

    .dlv-order__icon svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dlv-order__text { min-width: 0; }

    .legal-section .dlv-order__title {
      margin: 0;
      color: var(--ink);
      font-size: 17px;
      font-weight: var(--fw-semibold);
      line-height: 1.3;
    }

    .legal-section .dlv-order__desc {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: var(--fs-sm);
      line-height: 1.55;
    }

    /* Поле адреса с кнопкой: заявка, окно с картой, калькулятор ЖК */
    .dlv-addr {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
    }

    .dlv-addr__input::placeholder { color: #98a29c; font-weight: var(--fw-regular); }

    .dlv-addr__input:focus {
      border-color: rgba(44,96,51,.48);
      box-shadow: 0 0 0 4px rgba(44,96,51,.08);
    }

    .dlv-addr .dlv-addr__btn:hover { transform: none; }
    .dlv-addr .btn--outline:hover { border-color: var(--brand); background: var(--brand-soft); box-shadow: none; }
    .dlv-addr__btn[aria-busy="true"] { cursor: progress; opacity: .72; }

    /* Строка состояния: найденный адрес, ошибка, «считаем…» */
    .dlv-status {
      display: grid;
      gap: 5px;
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-meta);
      line-height: 1.5;
    }

    .dlv-status[hidden] { display: none; }

    .dlv-status__line {
      display: flex;
      align-items: flex-start;
      gap: 7px;
    }

    .dlv-status__line svg {
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      margin-top: 2px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dlv-status__line strong { color: var(--ink); font-weight: var(--fw-semibold); }
    .dlv-status__line--ok { color: var(--ink); }
    .dlv-status__line--ok svg { stroke: var(--brand); }
    .dlv-status__line--error { color: #a3392b; font-weight: var(--fw-medium); }
    .dlv-status__line--warn { color: #8a5a12; }
    .dlv-status__line--source { font-size: 11px; color: var(--muted, #6f7973); }
    .dlv-status__line--ok ~ .dlv-status__line--source { padding-left: 23px; }
    .dlv-status__line--source a { color: inherit; }
    .dlv-status__line--ok ~ .dlv-status__line--warn { padding-left: 23px; }

    /* Как значки других строк (16 px, отступ 2 px): строка «Считаем…» не выше строки с адресом,
       и блок под ней не сдвигается на время расчёта */
    .dlv-status__line--loading::before {
      content: "";
      box-sizing: border-box;
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      margin-top: 2px;
      border: 2px solid rgba(44,96,51,.22);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: dlv-spin .8s linear infinite;
    }

    @keyframes dlv-spin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
      .dlv-status__line--loading::before { animation-duration: 2.4s; }
    }

    .dlv-link {
      padding: 0;
      border: 0;
      background: none;
      color: var(--brand);
      font: inherit;
      font-weight: var(--fw-medium);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .dlv-link:hover { color: var(--brand-deep); }

    /* Несколько найденных адресов: выбрать нужный */
    .dlv-variants {
      display: grid;
      gap: 6px;
    }

    .dlv-variants[hidden] { display: none; }

    .dlv-variants__title {
      margin: 0;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: var(--fw-semibold);
    }

    .dlv-variant {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      width: 100%;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color var(--speed), background-color var(--speed);
    }

    .dlv-variant:hover { border-color: var(--line-strong); }
    .dlv-variant.is-active { border-color: rgba(44,96,51,.5); background: var(--brand-soft); }

    .dlv-variant__mark {
      display: grid;
      place-items: center;
      width: 20px;
      height: 20px;
      margin-top: 1px;
      border: 1.5px solid var(--line-strong);
      border-radius: 50%;
      background: var(--surface);
    }

    .dlv-variant__mark svg {
      width: 12px;
      height: 12px;
      fill: none;
      stroke: var(--on-dark);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
    }

    .dlv-variant.is-active .dlv-variant__mark { border-color: var(--brand); background: var(--brand); }
    .dlv-variant.is-active .dlv-variant__mark svg { opacity: 1; }

    .dlv-variant__text strong {
      display: block;
      font-size: 13.5px;
      font-weight: var(--fw-semibold);
      line-height: 1.35;
    }

    .dlv-variant__text small {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: var(--muted);
      font-size: var(--fs-micro);
      line-height: 1.4;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Карта: пока Leaflet не загрузился - спокойная заглушка того же размера */
    .dlv-map {
      position: relative;
      min-height: 320px;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: #e9efeb;
      isolation: isolate;
    }

    .dlv-map__canvas {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .dlv-map .leaflet-container {
      background: #e9efeb;
      font-family: inherit;
    }

    /* Leaflet складывает плитки через plus-lighter: на экранах с плотностью 2 и дробном сдвиге
       карты стыки плиток светлеют белыми полосами - обычное наложение их не даёт */
    .dlv-map .leaflet-container img.leaflet-tile { mix-blend-mode: normal; }

    .dlv-map .leaflet-control-attribution { font-size: 10.5px; }

    .dlv-map__placeholder {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-content: center;
      justify-items: center;
      gap: 10px;
      padding: 20px;
      background:
        linear-gradient(rgba(44,96,51,.06) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(90deg, rgba(44,96,51,.06) 1px, transparent 1px) 0 0 / 28px 28px,
        #eef3ef;
      color: var(--muted);
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
      text-align: center;
    }

    .dlv-map__placeholder svg {
      width: 34px;
      height: 34px;
      fill: none;
      stroke: var(--brand);
      stroke-width: 1.6;
      stroke-linejoin: round;
      opacity: .7;
    }

    .dlv-map__failed { display: none; }
    .dlv-map.is-failed .dlv-map__loading { display: none; }
    .dlv-map.is-failed .dlv-map__failed { display: block; }
    .dlv-map.is-ready .dlv-map__placeholder { display: none; }

    .dlv-map__expand {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 500;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface);
      box-shadow: 0 6px 16px rgba(17,24,20,.12);
      color: var(--ink);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: var(--fw-medium);
      cursor: pointer;
    }

    .dlv-map__expand:hover { border-color: var(--brand); color: var(--brand-deep); }

    .dlv-map__expand svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dlv-map:not(.is-ready) .dlv-map__expand { display: none; }

    /* Карта в заявке: «+/-» в один ряд с «На весь экран» и в том же виде. Над рядом кнопок маршрут
       не подгоняется (assets/delivery-map.js, AddressMap.fitPadding) - ряд должен быть низким */
    .quote-dlv .quote-dlv__map .leaflet-control-zoom.leaflet-bar {
      display: flex;
      overflow: hidden;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      background: var(--surface);
      background-clip: padding-box;
      box-shadow: 0 6px 16px rgba(17,24,20,.12);
    }

    .quote-dlv .quote-dlv__map .leaflet-control-zoom.leaflet-bar a {
      width: 34px;
      height: 32px;
      border: 0;
      border-radius: 0;
      color: var(--ink);
      font-size: var(--fs-h3);
      line-height: 32px;
    }

    .quote-dlv .quote-dlv__map .leaflet-control-zoom.leaflet-bar a + a { border-left: 1px solid var(--line); }
    .quote-dlv .quote-dlv__map .leaflet-control-zoom.leaflet-bar a:hover { background: var(--brand-soft); color: var(--brand-deep); }
    .quote-dlv .quote-dlv__map .leaflet-control-zoom.leaflet-bar a.leaflet-disabled { background: var(--surface); color: #b9c1bc; }

    /* Метки на карте: склад и точка доставки (перетаскивается) */
    .dlv-pin { background: none; border: 0; }

    .dlv-pin--warehouse {
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .dlv-pin__tag {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px;
      padding: 6px 11px 6px 8px;
      border-radius: var(--r-full);
      background: var(--brand-deep);
      box-shadow: 0 6px 14px rgba(8,20,12,.28);
      color: #fff;
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: var(--fw-semibold);
      line-height: 1;
      white-space: nowrap;
    }

    .dlv-pin__tag::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--brand-deep);
      border-bottom: 0;
    }

    .dlv-pin__tag svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: #fff;
      stroke-width: 1.8;
      stroke-linejoin: round;
    }

    /* Окно «уточнить на карте»: на телефоне - на весь экран */
    html.has-dlv-dialog { overflow: hidden; }

    .dlv-dialog {
      width: min(980px, calc(100vw - 48px));
      height: min(760px, calc(100vh - 48px));
      max-width: none;
      max-height: none;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: var(--r-lg);
      background: var(--panel);
      box-shadow: 0 28px 68px rgba(5,18,11,.38);
      color: var(--ink);
      font-family: var(--font);
    }

    .dlv-dialog__panel {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      height: 100%;
    }

    .dlv-dialog__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 12px 18px;
      padding: 18px 22px 12px;
    }

    .dlv-dialog__close {
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
    }

    .dlv-dialog__close:hover { border-color: var(--brand); background: var(--brand-soft); }

    .dlv-dialog__close svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
    }

    .dlv-dialog__search {
      display: grid;
      gap: 10px;
      max-height: 38vh;
      overflow: auto;
      padding: 0 22px 14px;
    }

    .dlv-dialog__foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 18px;
      padding: 14px 22px;
      border-top: 1px solid var(--line);
    }

    .dlv-dialog__summary strong {
      color: var(--brand-deep);
      font-size: 20px;
      font-weight: var(--fw-semibold);
      line-height: 1.2;
    }

    @media (max-width: 640px) {
      .dlv-dialog {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
      }
    }

    /* Карточки тарифа под калькулятором - в ряд */
    .dlv-zone-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-content: start;
    }

    .dlv-zone {
      display: block;
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: var(--panel);
      transition: border-color .18s ease, box-shadow .18s ease;
    }

    .dlv-zone:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

    /* Цветные полоски и кружки убраны — на сайте карточки везде с ровной рамкой */

    .dlv-zone__body { min-width: 0; }

    .dlv-zone__row {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px 12px;
    }

    .legal-section .dlv-zone__title {
      margin: 0;
      font-size: 15.5px;
      font-weight: var(--fw-semibold);
      color: var(--ink);
      line-height: 1.3;
    }

    .legal-section .dlv-zone__price {
      font-size: var(--fs-ui);
      font-weight: var(--fw-semibold);
      color: var(--brand);
      white-space: nowrap;
    }

    .legal-section .dlv-zone__desc {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13.5px;
      line-height: 1.55;
    }

    .legal-section .dlv-zone__hint {
      display: block;
      margin-top: 7px;
      color: #9aa39d;
      font-size: var(--fs-micro);
      font-weight: var(--fw-regular);
      line-height: 1.4;
    }

    /* --- 10. Адаптив ---------------------------------------------------------- */

    /* 1441+ : третья колонка справочного листа — примечания на полях */
    @media (min-width: 1441px) {
      .dlv-ch {
        grid-template-columns: minmax(200px, 264px) minmax(0, 1fr) minmax(220px, 300px);
      }
    }

    /* 1181+ : вопрос и ответ стоят в две колонки */

    @media (max-width: 1180px) {
      .dlv-ch {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      .dlv-ch__side,
      .dlv-ch__body,
      .dlv-ch__aside { grid-column: 1; }

      .dlv-ch__body { margin-top: clamp(18px, 2.4vw, 24px); }
    }

    @media (max-width: 860px) {
      .dlv-doc .dlv-dl__d--list2 > ul:not([class]) { grid-template-columns: minmax(0, 1fr); }
    }

    @media (max-width: 560px) {
      /* На телефоне текст подсказки - во всю ширину, значок не нужен */
      .dlv-order__icon { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .dlv-qa__bar,
      .dlv-brief__toc a,
      .dlv-doc .dlv-qa__q { transition: none; }
    }

    /* Короткая форма КП: источник заявки, БИН, спецификация и вложения */

    .qf-file:hover {
      border-color: var(--brand);
      background: var(--brand-soft);
    }

    .qf-file:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(44, 96, 51, .16);
    }

    .qf-file input[type="file"] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .qf-file__ic {
      flex: 0 0 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: var(--r-md);
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--brand);
    }

    .qf-file__ic svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .qf-file__text {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .qf-file__text span {
      color: var(--muted);
      font-size: 12.5px;
      line-height: 1.45;
    }

    .qf-file__list {
      list-style: none;
      display: grid;
      gap: 8px;
      min-width: 0;
      margin: 10px 0 0;
      padding: 0;
    }

    .qf-file__item {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--panel);
    }

    .qf-file__item::before {
      content: '';
      flex: 0 0 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--brand);
    }

    .qf-file__name {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--ink);
      font-size: var(--fs-meta);
      font-weight: var(--fw-semibold);
    }

    .qf-file__size {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: var(--fs-micro);
      font-weight: var(--fw-regular);
    }

    .qf-sent {
      margin-top: 14px;
      padding: 14px;
      border-radius: var(--r-lg);
      border: 1px solid rgba(44, 96, 51, .22);
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: var(--fs-meta);
      line-height: 1.55;
    }

    .qf-sent[hidden] {
      display: none;
    }

    .qf-sent strong {
      display: block;
      margin-bottom: 4px;
      font-size: var(--fs-sm);
    }

    .qf-sent ul {
      list-style: none;
      display: grid;
      gap: 3px;
      min-width: 0;
      margin: 8px 0 0;
      padding: 0;
      overflow-wrap: anywhere;
    }

    @media (max-width: 760px) {
      .qf-file__item {
        padding: 8px 11px;
      }

      .qf-file__name {
        font-size: 12.5px;
      }
    }

    /* Умный поиск: подсказки, подсветка совпадений, пустое состояние, поле в шапке */

    .search-suggest {
      max-height: min(70vh, 470px);
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }

    .search-suggest mark.ss-hl,
    .result-sub mark.ss-hl {
      padding: 0 1px;
      border-radius: var(--r-sm);
      color: var(--brand-deep);
      background: var(--brand-soft);
      font-weight: inherit;
    }

    .search-suggest__item.is-active {
      border-color: rgba(44, 96, 51, .24);
      background: #f0f6f1;
      outline: 0;
    }

    .search-suggest__item {
      text-decoration: none;
      cursor: pointer;
    }

    .search-suggest__foot {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      padding: 9px 11px 2px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11.5px;
      font-weight: var(--fw-medium);
    }

    .search-suggest__foot button {
      border: 0;
      padding: 0;
      color: var(--brand);
      background: transparent;
      font-size: 11.5px;
      font-weight: var(--fw-medium);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .search-correction {
      display: grid;
      gap: 6px;
      margin-top: 12px;
    }

    .search-correction[hidden] {
      display: none;
    }

    .search-correction__row + .search-correction__row {
      padding-top: 6px;
      border-top: 1px solid rgba(23, 59, 36, .12);
    }

    .search-correction button {
      cursor: pointer;
    }

    /* Подкатегории в результатах поиска */
    .result-sub-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 10px;
    }

    .result-sub {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 5px;
      min-height: 62px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: var(--panel);
      color: var(--ink);
      text-decoration: none;
      transition: border-color var(--speed), background var(--speed), transform var(--speed);
    }

    .result-sub:hover,
    .result-sub:focus-visible {
      border-color: var(--line-strong);
      background: #f7faf8;
      transform: translateY(-1px);
      outline: 0;
    }

    .result-sub__count {
      flex: 0 0 auto;
      color: var(--brand-deep);
      font-size: 11.5px;
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }

    /* Пустое состояние поиска */
    .search-empty h3 {
      margin: 0 0 8px;
      color: var(--ink);
      font-size: 19px;
      line-height: 1.3;
    }

    .search-empty p {
      margin: 0;
    }

    .search-empty__chips {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
      font-size: var(--fs-meta);
      font-weight: var(--fw-regular);
    }

    .search-empty__chips button:hover {
      border-color: var(--brand);
      background: var(--brand-soft);
    }

    /* Поиск в видимой шапке.
       Слоган уступает место поисковой строке только там, где они не помещаются вместе:
       на широких экранах слоган остаётся (на ≤1360px он скрыт правилами выше). */
    /* Слоган убран — освободившееся место отдано поиску и корзине */

    .hd-cart-button__copy strong { font-size: 13.5px; }

    /* Шапка выровнена по той же линии, что и контент страницы.
       Специфичность повышена: у .global-hd-header-shell .hd-header
       свой padding через --hd-edge, он шире контейнера на 24px. */

    .hd-search input::placeholder {
      color: rgba(255, 255, 255, .62);
      font-weight: var(--fw-regular);
    }

    .hd-search .search-suggest {
      z-index: 60;
      width: min(420px, calc(100vw - 40px));
      left: auto;
      right: 0;
    }

    .hd-search-mobile .search-suggest {
      max-height: min(58vh, 380px);
    }

    /* 1181-1629px: полной шапке в одну строку нужно около 1610px ширины страницы
       (плюс запас на полосу прокрутки), поэтому уплотняем второстепенные элементы,
       чтобы кнопка «Заказать звонок» не обрезалась. До 1459px меню к тому же
       уходит второй строкой. */
    @media (min-width: 1181px) and (max-width: 1629px) {
      .hd-cart-button__copy { display: none; }
      .hd-phone span span { display: none; }
    }

    /* 761-1180px: поиск - третья строка шапки, а на главной шапка закреплена поверх
       первого экрана. Опускаем первый экран под неё, иначе поле поиска ложилось
       на заголовок. На телефоне поиска в шапке нет, отступ задаёт mobile.css. */

    @media (max-width: 760px) {
      .hd-search { display: none; }
      .result-sub-grid { grid-template-columns: 1fr; }
      /* Описание в подсказке режем до двух строк, иначе список не помещается на экран. */
      .search-suggest__item span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    /* ================================================================
       Подборки по типу объекта (bp-): плитки на главной, кликабельные
       карточки-хабы, экран подборки с готовым пакетом и своей формой.
       Префикс новый - стили .bs-* живут во внешнем файле и не трогаются.
       ================================================================ */

    /* --- Плитки сценариев на главной --- */

    .bp-tiles-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
      gap: 18px 40px;
      align-items: end;
      margin-bottom: 22px;
    }

    .bp-tile:hover,
    .bp-tile:focus-visible {
      border-color: var(--brand);
      box-shadow: 0 10px 26px rgba(23, 59, 36, .12);
      transform: translateY(-2px);
    }

    .bp-tile__ic svg {
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bp-tile__text {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .bp-tile__go svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: var(--brand);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .18s ease;
    }

    .bp-tile:hover .bp-tile__go svg { transform: translateX(3px); }

    /* --- Футер кликабельной карточки-хаба --- */

    .bs-use-case.bp-card:hover { border-color: var(--brand); }

    /* Главное действие блока — делаем полноценной кнопкой, а не текстовой ссылкой */

    .bp-card-link:hover {
      background: var(--brand-deep);
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(44, 96, 51, .24);
    }

    .bp-card-link svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform .18s ease;
    }

    .bs-use-case.bp-card:hover .bp-card-link svg { transform: translateX(3px); }

    /* --- Режим подборки: хаб прячем, показываем панель сценария --- */
    #view-business-selection.is-bp-scenario .bs-section__head,
    #view-business-selection.is-bp-scenario [data-business-selection-products] {
      display: none;
    }

    .bp-back svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bp-back:hover { text-decoration: underline; }

    /* Раньше это была строка пунктов в один ряд и выглядела чужеродно.
       Теперь три равные карточки: иконка сверху, текст под ней. */
    .bp-facts li {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
      padding: 16px 16px 18px;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      background: #fbfcfb;
      color: var(--ink);
      font-size: 13.5px;
      line-height: 1.55;
      font-weight: var(--fw-regular);
    }

    .bp-facts svg {
      width: 19px;
      height: 19px;
      fill: none;
      stroke: var(--brand-deep);
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Разделители между плитками рисуем зазором грида - работает при любом числе колонок */
    /* Карточки стоят на расстоянии, без общей подложки и обводки */
    .bp-pack {
      display: grid;
      /* Свободную высоту забирает список позиций: иначе, когда пакет короче
         блока заявки, снизу оставалась пустая полоса */
      grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto;
      padding: 22px 22px 20px;
      background: var(--graphite);
      border: 1px solid var(--graphite);
      border-radius: var(--r-lg);
      color: #eef3ef;
    }

    .bp-pack__note {
      margin: 0 0 16px;
      color: rgba(238, 243, 239, .72);
      font-size: var(--fs-meta);
      line-height: 1.6;
      font-weight: var(--fw-regular);
    }

    .bp-pack__list {
      margin: 0 0 14px;
      padding: 0;
      display: grid;
      grid-auto-rows: minmax(58px, 1fr);
      list-style: none;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .bp-pack__row {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) auto;
      gap: 2px 12px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .bp-pack__media {
      grid-row: span 2;
      width: 44px;
      height: 44px;
      display: block;
      border-radius: var(--r-md);
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
    }

    .bp-pack__media img,
    .bp-pack__media svg {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .bp-pack__name {
      min-width: 0;
      color: var(--on-dark);
      font-size: 13.5px;
      line-height: 1.4;
      font-weight: var(--fw-semibold);
    }

    .bp-pack__qty {
      color: var(--amber);
      font-size: var(--fs-micro);
      font-weight: var(--fw-medium);
      text-align: right;
      white-space: nowrap;
    }

    .bp-pack__sum {
      grid-column: 2 / -1;
      color: rgba(238, 243, 239, .72);
      font-size: 12.5px;
      font-weight: var(--fw-semibold);
    }

    .bp-pack__total {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 16px;
    }

    .bp-pack__total span {
      color: rgba(238, 243, 239, .72);
      font-size: 12.5px;
      font-weight: var(--fw-regular);
    }

    .bp-pack__total strong {
      color: var(--on-dark);
      font-size: 22px;
      font-weight: var(--fw-semibold);
      white-space: nowrap;
    }

    .bp-btn--primary:hover { background: #35743e; border-color: #35743e; }

    .bp-btn--ghost:hover { border-color: var(--surface); background: rgba(255, 255, 255, .08); }

    /* --- Своя форма заявки внутри подборки --- */
    .bp-form {
      padding: 24px 26px 22px;
      background: var(--panel);
      border: 1px solid var(--line-strong);
    }

    .bp-form .bp-btn--ghost {
      border-color: var(--line-strong);
      color: var(--brand);
    }

    .bp-form .bp-btn--ghost:hover {
      background: var(--brand-soft);
      border-color: var(--brand);
    }

    .bp-form__grid {
      display: grid;
      /* Сетка 2 на 2: три поля в ряд оставляли «Город» одиноким на второй строке */
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .bp-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .bp-field--full { grid-column: 1 / -1; }

    .bp-field > span {
      color: var(--ink);
      font-size: var(--fs-micro);
      font-weight: var(--fw-medium);
      letter-spacing: .02em;
    }

    .bp-field input,
    .bp-field textarea {
      width: 100%;
      padding: 11px 13px;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      font: inherit;
      font-size: var(--fs-sm);
      color: var(--ink);
      resize: vertical;
    }

    .bp-field input:focus,
    .bp-field textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(44, 96, 51, .12);
    }

    .bp-form__foot {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 16px;
      align-items: center;
      margin-top: 18px;
    }

    .bp-form__legal {
      /* Целая строка под кнопками, а не третья колонка рядом с ними */
      flex: 1 1 100%;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11.5px;
      line-height: 1.5;
      font-weight: var(--fw-regular);
    }

    .bp-status:empty { display: none; }

    .bp-status {
      margin: 14px 0 0;
      padding: 11px 14px;
      background: var(--brand-soft);
      border-left: 3px solid var(--brand);
      color: var(--brand-deep);
      font-size: var(--fs-meta);
      line-height: 1.55;
      font-weight: var(--fw-medium);
    }

    @media (max-width: 860px) {
      .bp-tiles-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
      .bp-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 640px) {
      .bp-form { padding: 18px 16px; }
      .bp-form__grid { grid-template-columns: minmax(0, 1fr); }
      .bp-form__foot .bp-btn { width: 100%; }
    }