/* https://www.krasnodar.lespromdom.ru/catalog/view/theme/LESPROM/assets/css/normalize.css */
/*
Thin/Hair	        100
Extra Light	      200
Light	            300
Regular	          400
Medium	          500
Semi Bold	        600
Bold	            700
Extra Bold	      800
Black/Heavy/Ultra	900
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;

  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration: inherit;

  /* outline: none убран — глушил клавиатурный фокус на всём сайте (WCAG 2.4.7).
     Индикатор фокуса теперь через :focus-visible в common.css (аудит 2026-07-23, п.2.6) */
  list-style: none;
  /* user-select: none; */
  box-sizing: border-box;
  vertical-align: baseline;

  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color, black) transparent;
  scroll-behavior: smooth;
  /* overscroll-behavior: contain; */

  &::-webkit-scrollbar {
    height: 0 !important;
    width: var(--scrollbar-size, 4px) !important;
    -webkit-appearance: none !important;
  }
  &::-webkit-scrollbar:vertical {
    width: var(--scrollbar-size, 4px) !important;
  }
  &::-webkit-scrollbar:horizontal {
    height: var(--scrollbar-size, 4px) !important;
  }
  &::-webkit-scrollbar-track {
    background: transparent !important;
    -webkit-border-radius: 5px !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color, black) !important;
    border-radius: 5px !important;
    border: 0px solid transparent !important;
    -webkit-border-radius: 5px !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: var(--scrollbar-color, black) !important; 
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  line-height: var(--leading-none);
  font-family: Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, header, main, footer {
  width: 100vw;
  max-width: 100%;
}

header, main, footer {
  min-height: 1px;
}

main {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}

section {
  width: 100%;
}

h1 {
  font-size: var(--h1-size);
  /* LPD-17 Э4: дисплейный лидинг вместо унаследованного прозаического 1.3 */
  line-height: var(--leading-display-1);
  margin: 16px 0;
  font-weight: var(--fw-bold);
}
h1:first-child {
  margin-top: 0;
}
h1:last-child {
  margin-bottom: 0;
}

h2 {
  font-size: var(--h2-size);
  /* LPD-17 Э4 */
  line-height: var(--leading-display-2);
  margin: 16px 0;
  font-weight: var(--fw-medium);

  .text & {
    font-size: var(--h2-text-size);
    /* в прозе H2 не дисплейный — лидинг плотный, но не экранный */
    line-height: var(--leading-tight);
    margin: 20px 0 16px;
  }
}
h2:first-child {
  margin-top: 0;
}
h2:last-child {
  margin-bottom: 0;
}

h3 {
  font-size: var(--h3-size);
  /* LPD-17 Э4 */
  line-height: var(--leading-tight);
  margin: 24px 0 8px;
  font-weight: var(--fw-semibold);
}
h3:first-child {
  margin-top: 0;
}
h3:last-child {
  margin-bottom: 0;
}

h4 {
  margin: 8px 0 8px;
  font-weight: var(--fw-semibold);
  font-size: var(--h4-size);
  /* LPD-17 Э4 */
  line-height: var(--leading-snug);
  color: var(--title-color);
}
h4:first-child {
  margin-top: 0;
}
h4:last-child {
  margin-bottom: 0;
}

h5 {
  font-size: var(--h5-size);
  /* LPD-17 Э4 */
  line-height: var(--leading-snug);
  margin: 16px 0;
  font-weight: var(--fw-medium);
}
h5:first-child {
  margin-top: 0;
}
h5:last-child {
  margin-bottom: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  color: #000;
  font-family: monospace, monospace;
  font-size: inherit;
}

a {
  display: inline;
  cursor: pointer;
  width: max-content;
  background-color: transparent;
  transition: color .3s;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b, strong {
  font-weight: var(--fw-semibold);
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

p {
  margin: 18px 0;
  font-weight: inherit;
  line-height: inherit;
}
p:first-child {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

svg, img, picture, video, iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  border-style: none;
  border: 0;
  margin: 0;
}
video {
  object-fit: cover;
}
img, picture {
  display: inline-block;
  object-fit: contain;
  max-width: 100%;
}
img:is(.no-image, .no_image), picture:is(.no-image, .no_image) {
  object-fit: contain !important;
}
img {
  &[data-fancybox] {
    cursor: pointer;
  }
}

svg, svg path svg rect, svg circle {
  transition: 0.3s;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0;
  border: 0;
  display: block;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: block;
  max-width: 100%;
  padding: 0; /* 3 */
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  resize: none;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

s {
  text-decoration: line-through;
}

ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;
}
li {
  margin: 0;
  bottom: 0;
  padding: 0;
  display: block;
  list-style: none;
}
.text ul {
  display: flex;
  row-gap: 8px;
  flex-direction: column;
  list-style: disc;
  padding-left: 20px;
}
.text li {
  display: list-item;
  list-style: disc;
}

ol {
  margin-left: 18px;
  list-style-type: none;
  counter-reset: item;
  
  display: flex;
  row-gap: 8px;
  flex-direction: column;
}
ol:first-child {
  margin-top: 0;
}
ol:last-child {
  margin-bottom: 0;
}
ol > li {
  counter-increment: item;
  position: relative;
  list-style: none !important;
}
ol > li::before {
  font-weight: inherit;
  display: inline-block;
  color: var(--color-blue-primary);
  content: counters(item, ".") ". ";
  position: absolute;
  right: 100%;
  top: 0;
  margin-right: 6px;
}
li > ol {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
li > ol > li::before {
  color: var(--color-primary);
  content: counters(item, ".") ". ";
}

@media screen and (max-width: 1410px) {
  ol > li::before {
    font-weight: var(--fw-regular);
  }
}

/* Удалён мобильный сброс `:root{ outline:0!important; user-select:none!important }`
   (аудит 2026-07-23, п.2.6): outline:0 глушил клавиатурный фокус, а user-select:none
   блокировал выделение/копирование цены, адреса склада и реквизитов на телефоне. */

.hide {
  display: none !important;
}

blockquote {
  z-index: 0;
  position: relative;
  padding: calc(26px + 10 * var(--window-resize)) 0;
  margin-top: calc(24px + 16 * var(--window-resize));
  margin-bottom: calc(24px + 16 * var(--window-resize));
}
blockquote::before, blockquote::after {
  content: '';
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  display: block;
  background-image: linear-gradient(90.01deg, rgba(220, 30, 28, 0) 0%, #DC1E1C 51.09%, rgba(220, 30, 28, 0) 99.98%);
}
blockquote::before {
  top: 0;
}
blockquote::after {
  bottom: 0;
}

table {
  border-collapse: collapse;
  border-width: 0px;
  width: max-content;
  max-width: 100%;
}
td {
  border-width: 0px;
  padding: var(--table-td-vertical-padding, 5px) var(--table-td-horizontal-padding, 25px);
  width: max-content;
  vertical-align: middle;
}
td:first-child {
  padding-left: 0;
}
td:last-child {
  padding-right: 0;
}

@container small (min-width: 0) {
  .text {
    font-size: 16px;
  }
  .text * {
    text-align: left !important;
  }
}

.disabled {
  opacity: .4 !important;
  pointer-events: none !important;
}

.text-center {
  text-align: center;
}
.text-small {
  font-size: calc(12px + 2 * var(--window-resize));
}
.text-xsmall {
  font-size: calc(12px + 0 * var(--window-resize));
}
/* https://www.krasnodar.lespromdom.ru/catalog/view/theme/LESPROM/assets/css/common.css */
/* LPD-17 Э1: дескриптор @font-face НЕ понимает var() — с var(--fw-*) все четыре
   начертания регистрировались как normal, побеждало последнее объявление (Black),
   и ВСЁ на RF Dewi рендерилось Black независимо от font-weight. Веса — только литералами. */
@font-face {
	font-family: 'RF Dewi Expanded';
  font-style: normal;
  font-weight: 300; /* Light */
	src: url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Light.eot');
	src: local('RF Dewi Expanded Light'), local('RFDewiExpanded-Light'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Light.eot?#iefix') format('embedded-opentype'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Light.woff2') format('woff2'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Light.woff') format('woff'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Light.ttf') format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'RF Dewi Expanded';
  font-style: normal;
  font-weight: 600; /* Semibold */
	src: url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Semibold.eot');
	src: local('RF Dewi Expanded Semibold'), local('RFDewiExpanded-Semibold'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Semibold.eot?#iefix') format('embedded-opentype'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Semibold.woff2') format('woff2'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Semibold.woff') format('woff'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Semibold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'RF Dewi Expanded';
  font-style: normal;
  font-weight: 700; /* Bold */
	src: url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Bold.eot');
	src: local('RF Dewi Expanded Bold'), local('RFDewiExpanded-Bold'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Bold.eot?#iefix') format('embedded-opentype'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Bold.woff2') format('woff2'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Bold.woff') format('woff'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Bold.ttf') format('truetype');
  font-display: swap;
}
/* LPD-17 Э1: Regular добавлен, чтобы веса 400–500 (заголовки контактов, карта)
   не проваливались в Light — до починки они фактически рендерились Black. */
@font-face {
	font-family: 'RF Dewi Expanded';
  font-style: normal;
  font-weight: 400; /* Regular */
	src: url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Regular.eot');
	src: local('RF Dewi Expanded'), local('RFDewiExpanded-Regular'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Regular.eot?#iefix') format('embedded-opentype'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Regular.woff2') format('woff2'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Regular.woff') format('woff'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
	font-family: 'RF Dewi Expanded';
  font-style: normal;
  font-weight: 800; /* Black */
	src: url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Black.eot');
	src: local('RF Dewi Expanded Black'), local('RFDewiExpanded-Black'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Black.eot?#iefix') format('embedded-opentype'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Black.woff2') format('woff2'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Black.woff') format('woff'),
      url('/catalog/view/theme/LESPROM/assets/fonts/RFDewiExpanded/RFDewiExpanded-Black.ttf') format('truetype');
  font-display: swap;
}

/* Юрправка 06.08.2026 (задача 1 плана lpd-19-legal-remediation): Manrope переведён с
   Google Fonts на локальный файл. Запрос к fonts.googleapis.com отдавал IP и User-Agent
   каждого посетителя в США — трансграничная передача ПДн без основания и без уведомления
   по ст. 12 152-ФЗ, при том что п. 9 политики обещает её отсутствие.
   Один variable-файл на все веса: ось wght 200–800 покрывает --fw-light…--fw-extrabold,
   поэтому пяти отдельных объявлений, как у RF Dewi, здесь не нужно. Диапазон в дескрипторе
   font-weight — это не то же самое, что var() из комментария выше: литералы там обязательны,
   а range для variable-шрифта разрешён и работает.
   Подмножество — латиница + кириллица (32 КБ против 165 КБ исходного ttf). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  src: url('/catalog/view/theme/LESPROM/assets/fonts/Manrope/Manrope-Variable.woff2') format('woff2-variations'),
       url('/catalog/view/theme/LESPROM/assets/fonts/Manrope/Manrope-VariableFont_wght.ttf') format('truetype-variations');
  font-display: swap;
}

:root {
  --container-padding: 20px;
  --container: clamp(320px, calc(100vw - var(--container-padding) * 2), 1416px);
  --column-size: 340px;

  --primary-color: #1E1E1E;
  --primary-color-opacity: rgba(30, 30, 30, .33);
  --primary-color-opacity2: rgba(25, 31, 45, .08);
  --primary-color-opacity3: rgba(30, 30, 30, .46);
  --primary-color-opacity4: rgba(25, 31, 45, .54);
  --primary-white: #fff;
  --primary-white-opacity: rgba(255,255,255,.13);
  --primary-white-opacity2: rgba(255,255,255,.30);
  --primary-white-opacity3: rgba(222,222,222,.58);
  --primary-grey: #191F2D;
  --primary-grey2: #5D6E70;
  --primary-grey3: #B3C3C5;
  --primary-grey4: #525252;
  --primary-grey5: #69727B; /* LPD-16 1.4: затемнён с #757E88 (4.12:1) → 4.7:1+ WCAG AA для вторичного текста (37 применений) */
  --primary-grey6: #373C48;
  --primary-grey7: #43474E;
  --primary-grey-opacity: rgba(76, 85, 97, 0.28);
  --primary-grey-opacity2: rgba(93, 102, 112, 0.26);
  --primary-grey-opacity3: rgba(86, 116, 119, 0.16);
  --primary-grey-opacity4: rgba(135, 146, 159, 0.17);
  --primary-grey-opacity5: rgba(117, 126, 136, 0.1);
  --primary-grey-opacity6: rgba(136, 163, 189, 0.2);
  --primary-grey-opacity7: rgba(136, 163, 189, 0.3);
  --primary-grey-opacity8: rgba(117, 126, 136, 0.2);
  --primary-grey-opacity9: rgba(136, 163, 189, 0.06);
  --primary-grey-opacity10: rgba(76, 85, 97, 0.13);
  --primary-grey-opacity11: rgba(148, 166, 194, 0.13);
  --primary-grey-opacity12: rgba(117, 126, 136, 0.13);
  --primary-grey-opacity13: rgba(117, 126, 136, 0.32);
  --primary-grey-opacity14: rgba(158, 166, 179, 0.04);
  --primary-grey-opacity15: rgba(158, 166, 179, 0.16);
  --primary-grey-opacity16: rgba(158, 166, 179, 0.47);
  --primary-light-grey: #88A3BD;
  --primary-light-grey2: #87929F;
  --primary-light-grey3: #DEE9F4;
  --primary-light-grey4: #F4F8FB;
  --primary-white-grey: #F9FBFC;
  --primary-white-grey2: #F2F3F4;
  --primary-white-grey3: #6B879D;
  --primary-white-grey4: #ECF0F2;
  --primary-white-grey5: #D9D9D9;
  --primary-white-grey-opacity: rgba(249, 251, 252, 0.44);
  --primary-white-grey-opacity2: rgba(249, 251, 252, 0.12);
  --primary-blue: #1877B8; /* WCAG AA: затемнён с #259EDC (3.0:1) до 4.5:1+ на CTA/ссылках/чипах (аудит 2026-07-23, п.2.6) */
  --primary-blue-opacity: rgba(25, 131, 186, 0.35);
  --primary-blue-opacity2: rgba(25, 131, 186, 0.08);
  --primary-light-blue: #30B4F8;
  --primary-grey-blue: #1C7BAC;
  --primary-white-blue: #B2CBCE;
  --primary-white-blue2: #C0DBDE;
  --primary-white-blue3: #FBFEFF;
  --primary-orange: #F27E3E;
  --primary-orange-opacity: rgba(251, 176, 30, 0.24);
  --primary-orange-opacity2: rgba(251, 176, 30, 0.5);
  --primary-green: #21D49F;
  --primary-green2: #34B467;
  --primary-green3: #7ac142;
  --primary-green4: #59D0C0;
  --primary-green5: #2ED6BF;
  --primary-gey-green: #567477;
  --primary-green-opacity: rgba(33, 212, 159, 0.24);
  --primary-green-opacity2: rgba(33, 212, 159, 0.5);
  --primary-green-opacity3: rgba(70, 137, 128, 0.38);
  --primary-red: #D82751; /* LPD-16 5/5: затемнён с #DB385F (4.43:1) → 4.86:1 WCAG AA. Токен используется ТОЛЬКО как цвет текста ошибок и границ поля (проверено: как фон — ни разу), поэтому затемнение улучшает все 8 применений и не может ухудшить обратный контраст */
  --primary-red-opacity: rgba(219, 56, 95, 0.24);
  --primary-red-opacity2: rgba(219, 56, 95, 0.5);
  --primary-red-opacity3: rgba(237, 102, 102, 0.28);
  --primary-red-opacity4: rgba(219, 56, 95, 0.04);
  --primary-yellow: #EFF239;
  --primary-yellow-opacity: rgba(239, 242, 57, 0.24);
  --primary-yellow-opacity2: rgba(239, 242, 57, 0.5);

  --icon-star-fill: #CCCCCC;
  --icon-star-active: #F27E3E;

  --font: 'Manrope', Arial, Helvetica, sans-serif;
  --font-2: 'RF Dewi Expanded', Arial, Helvetica, sans-serif;

  /* ═══ ДИЗАЙН-СИСТЕМА ТОКЕНОВ (LPD-16, пункт 1/5) ═══
     Семантический слой поверх плоской палитры --primary-*. Значения шкал равны
     существующим сырым значениям → визуальный ритм не меняется; компоненты
     переводятся на токены по мере касания. */

  /* — Семантические роли цвета (1.1): алиасы на существующую палитру.
     LPD-17 Э3 (ТЗ §3, plans/lpd-17-visual-redesign-spec-2026-07-25.md): слой ролей
     расширен и сведён к финальной палитре. Значения surface/text/border уточнены —
     на момент правки эти роли имели 0 применений (проверено grep), риска нет.
     Компоненты переезжают на роли по мере касания (Э5–Э11). — */
  --color-bg: var(--primary-white);                /* поле страницы */
  --color-field: var(--primary-light-grey4);       /* #F4F8FB: единственная светлая подложка-альтернатива; только под плотной сеткой, никогда две подряд */
  --color-surface: var(--primary-white);           /* карточка/плитка/попап/поле — всегда белые (было #F9FBFC, 0 применений) */
  --color-surface-sunken: var(--primary-white-grey4); /* #ECF0F2: бокс фото, скелетон, трек ползунка. ТЕКСТ НА НЕЙ ЗАПРЕЩЁН */
  --color-ink: var(--primary-grey);                /* #191F2D: единственная тёмная подложка (рама: шапка/футер/тёмные секции) */
  --color-ink-raised: #232A38;                     /* приподнятая поверхность внутри тёмного: поиск в шапке, hover пункта (+4.1 п.п. светлоты от ink) */
  --color-text: var(--primary-grey);               /* #191F2D (было #1E1E1E, 0 применений): текст = ink, единая пара с тёмной подложкой */
  --color-text-secondary: #4A5763;                 /* 7.41:1 на белом, 6.94:1 на field */
  --color-text-muted: #636C76;                     /* из grey5 #69727B −2.2 п.п.: AA на ВСЕХ светлых подложках (5.33 / 5.00 / 4.65:1), grey5 держал AA только на белом */
  --color-placeholder: #647585;                    /* AA-плейсхолдер: с #88A3BD (2.6:1) → 4.75:1, голубоватый тон сохранён */
  /* Три ступени границ (ТЗ §3.2). Прежний --color-border был rgba(136,163,189,.2) ≈ 1.2:1 — контур карточки не читался. */
  --color-hairline: #E4EBF2;                       /* разделители ВНУТРИ поверхности: строки таблиц, списки (1.20:1) */
  --color-border: #C9D6E1;                         /* контур карточки/плитки/поля/попапа (1.48:1; 0 применений на момент смены) */
  --color-border-strong: #A9B6C4;                  /* hover карточки, активная вкладка (2.06:1) */
  --color-border-control: #7A8695;                 /* граница чекбокса/радио/свитча — носителей состояния: 3.70:1, WCAG 1.4.11 */
  --color-accent: var(--primary-blue);             /* ТОЛЬКО заливка действия и графика; синий текст — --color-accent-strong */
  /* LPD-16 (5/5): контекстные варианты акцента под WCAG AA — базовый #1877B8 рассчитан
     на белый фон и проваливается на тёмных подложках (3.4:1) и на светлых плашках,
     где он же используется мелким текстом (3.9:1). Найдено автотестом check-lpd16-contrast-cdp. */
  --color-accent-on-dark: #1D91E1;                 /* акцент на тёмных секциях (#191F2D): 4.86:1 */
  --color-accent-strong: #1568A1;                  /* акцент мелким текстом на светлых плашках (#DDEAF3): 4.83:1 */
  --color-text-on-dark-muted: #CBDCDE;             /* вторичный текст на тёмных карточках: 4.76–4.93:1 */
  --color-success: var(--primary-green);           /* яркий — фон/иконки статуса */
  --color-warning: var(--primary-orange);
  --color-danger: var(--primary-red);
  /* LPD-17 Э3: статусы наличия для текста и точек-индикаторов. --primary-green2 #34B467
     на белом = 2.67:1 — провал и для текста (AA 4.5), и для индикатора (1.4.11: 3:1).
     Затемнение в той же семье: */
  --color-stock-in: #1E7A4E;                       /* «в наличии»: 5.32:1 на белом */
  --color-stock-order: #9E5525;                    /* «под заказ»: --primary-orange, затемнённый для текста */

  /* — Радиусы (1.3): было 0 токенов, 116 сырых border-radius — */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* — Тени / elevation (1.3): было 0 токенов — */
  --shadow-1: 0 2px 2px 0 var(--primary-light-grey3);
  --shadow-2: 0 8px 18px rgba(24, 119, 184, .18);
  --shadow-3: 0 15px 19px 0 var(--primary-grey-opacity9);

  /* — Спейсинг (1.3): переводить компоненты по мере касания — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* — LPD-17 Э5: ритм секции (ТЗ §5.2, plans/lpd-17-visual-redesign-spec-2026-07-25.md).
     Три числа на весь сайт: поля секции, отступ заголовочной группы от контента,
     шаг сетки внутри секции. Мобильные значения — в медиазапросе :root ниже.
     --section-y-slim обслуживает модификатор .section--slim (полоса партнёров). — */
  --section-y: 96px;
  --section-y-slim: 40px;
  --section-gap: 40px;
  --grid-gap: 24px;

  /* — Интерлиньяж (1.2): было 0 токенов, 31 сырой line-height — */
  --leading-none: 1;
  /* LPD-17 Э4: дисплейные ступени для H1/H2 (ТЗ §4.3). До этого дисплейные
     заголовки наследовали прозаический 1.3 от body: H1 55px давал строку 71.7px. */
  --leading-display-1: 1.04;
  --leading-display-2: 1.1;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.35;
  --leading-comfortable: 1.45;
  --leading-relaxed: 1.5;
  --leading-loose: 1.6;

  /* — Насыщенность шрифта (1.2): в общий слой — */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* — LPD-17 Э2: шкала размеров (ТЗ §4.3, plans/lpd-17-visual-redesign-spec-2026-07-25.md).
     Только px — заканчивается разнобой 0.875/0.88/0.8125/0.813rem. Миграция сырых
     значений на шкалу — по мере касания компонентов, как со --space-*. — */
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;                                   /* LPD-19 (A-02): пропуск в рампе между 32 и 40 — из-за него у страницы доставки была своя шкала */
  --fs-40: 40px;
  --fs-h2: clamp(28px, 1.4vw + 20px, 40px);
  --fs-h1: clamp(34px, 2.3vw + 22px, 56px);

  /* — LPD-17 Э2: размеры заголовков. normalize.css:106-160 читает --h1-size…--h5-size
     и --h2-text-size с самого начала темы, но НИ ОДНА из них не была объявлена:
     font-size заголовков был invalid at computed-value time и падал в наследование —
     отсюда H1 «Каталог» 20px при H2 «Все разделы» 24px на /katalog/.
     По построению clamp: H1 ≥ H2 + 6px на любой ширине (1440: 55/40; 375: 34/28).
     --h2-text-size — H2 внутри прозы .text (SEO-тексты): не дисплейный, уровень H3. — */
  --h1-size: var(--fs-h1);
  --h2-size: var(--fs-h2);
  --h3-size: var(--fs-24);
  --h4-size: var(--fs-20);
  --h5-size: var(--fs-18);
  --h2-text-size: var(--fs-24);

  /* — Флюид-типографика (1.2): CSS-фолбэк, чтобы размер не зависел от готовности JS.
     Флюид-calc по теме (font-size/padding/margin) читают var(--window-resize);
     раньше переменная нигде не задавалась → calc был невалиден и молча падал в inherited.
     Значение 2px воспроизводит текущий базовый рендер body (calc(12px + 2*2px) = 16px)
     и A/B-проверено в рантайме как 0-сдвиг на 4 типах страниц. JS (если появится) переопределит
     это значение inline-стилем на <html> — то есть 2px работает именно как фолбэк, а не как жёсткая фиксация. */
  --window-resize: 2px;

  -webkit-tap-highlight-color: transparent;

  @media screen and (max-width: 768px) {
    --container-padding: 12px;

    /* LPD-17 Э5: мобильная ступень ритма (ТЗ §5.2) */
    --section-y: 56px;
    --section-y-slim: 28px;
    --section-gap: 28px;
    --grid-gap: 16px;
  }
}

::-webkit-input-placeholder {
  color: var(--field-placeholder, var(--primary-color));
}
:-moz-placeholder {
 color: var(--field-placeholder, var(--primary-color));
 opacity:  1;
}
::-moz-placeholder {
 color: var(--field-placeholder, var(--primary-color));
 opacity:  1;
}
:-ms-input-placeholder {
 color: var(--field-placeholder, var(--primary-color));
}
::-ms-input-placeholder {
 color: var(--field-placeholder, var(--primary-color));
}
::placeholder {
 color: var(--field-placeholder, var(--primary-color));
}

body {
  min-height: 100vh;
  line-height: var(--leading-snug);
  font-weight: var(--fw-regular);              /* 1.2: база прозы 300→400 (читаемость); дисплейные 300 — явным --fw-light */
  font-size: calc(12px + 2 * var(--window-resize));
  font-family: var(--font) !important;
  background-color: var(--body-background-color, var(--primary-white));
  
  display: flex;
  row-gap: 0;
  flex-direction: column;
}
body.no-scroll {
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip;
    }
  }
}

* {
  --scrollbar-color: var(--primary-blue);

  /* outline: none убран — гасил клавиатурный фокус на всём сайте.
     Фокус теперь через :focus-visible ниже (аудит 2026-07-23, п.2.6) */
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  /* LPD-17 Э4: line-height: inherit снят. line-height наследуется естественно;
     принудительный inherit на * лишь мешал ролям (заголовкам, полям) объявлять
     свой лидинг предсказуемо. Замер до/после: поля живут на явном правиле
     button,input… { line-height:1.15 } (normalize) и снятием не затронуты. */
  box-sizing: border-box;

  @media screen and (max-width: 1440px) {
    --column-size: 280px;
  }
}

a {
  color: var(--link-color, inherit);
}
a:hover {
  color: var(--link-hover-color, var(--primary-blue));
}

strong {
  font-weight: var(--fw-extrabold);
}

.container {
  width: var(--container);
  margin: 0 auto;
}
.container .container {
  width: 100%;
}
#page {
  --page-containers-offset: 60px;

  margin-bottom: var(--page-containers-offset);

  @media screen and (max-width: 768px) {
    --page-containers-offset: 34px;
  }
}
#page-breadcrumbs {
  margin-top: 14px;
  margin-bottom: 20px;

  @media screen and (max-width: 768px) {
    margin-top: 10px;
  }
}
#page-headline {
  margin-bottom: 20px;
}
#page-container {
  display: flex;
  row-gap: var(--page-containers-offset);
  flex-direction: column;
}
#page-body {
  display: flex;
  column-gap: 24px;
  align-items: stretch;
}
#page-content {
  width: 100%;
  display: flex;
  row-gap: var(--page-containers-offset);
  flex-direction: column;
}
#page-content-top {
  display: flex;
  row-gap: var(--page-containers-offset);
  flex-direction: column;
}
#page-content-bottom {
  display: flex;
  row-gap: var(--page-containers-offset);
  flex-direction: column;
}

/* LPD-17 Э0: схлопывание пустых контейнеров-слотов.
   Раньше эти контейнеры приходили из разметки с class="hide" (display:none !important),
   и класс снимался только скриптом startup() по setTimeout(..., 300): до срабатывания
   таймера посетитель видел шапку и пустоту, а при неотработавшем JS — пустую страницу.
   Теперь контейнеры приходят видимыми, а пустые схлопываются здесь, без задержки и без
   скачка вёрстки (#page-container даёт row-gap 34px, #page-body — column-gap 24px,
   поэтому пустой, но видимый контейнер сдвинул бы соседей).
   startup() продолжает добавлять/снимать hide и остаётся фолбэком там, где :has()
   не поддерживается — поведение деградирует до прежнего, а не ломается. */
#page-content-top:not(:has(*)),
#page-content-bottom:not(:has(*)),
#page-column-left:not(:has(*)),
#page-column-right:not(:has(*)),
#page-content:not(:has(*)),
#page-body:not(:has(#page-content > *, #page-column-left > *, #page-column-right > *)) {
  display: none;
}
#page-column-left {
  width: var(--page-column-left-size, var(--column-size));

  @media screen and (max-width: 768px) {
    display: none;
  }
}
#page-column-right {
  order: 2;
  width: var(--page-column-right-size, var(--column-size));
  min-width: var(--page-column-right-size, var(--column-size));

  @media screen and (max-width: 768px) {
    display: none;
  }
}

/* ═══ ПАТТЕРН СЕКЦИИ (LPD-17 Э5, ТЗ §5.1-5.4) ══════════════════════════════
   Пять слотов, порядок неизменен: EYEBROW → HEADLINE → SUBLINE → CONTENT → ACTION.
   Вертикальный ритм секция несёт САМА (padding-block), а не отступом соседа:
   иначе секция с подложкой красит поле не до конца, и между двумя цветными
   полосами появляется белая щель. Поэтому на странице, переведённой на паттерн,
   row-gap контейнера обнуляется — см. body.page-home ниже и ⚠️ ТЗ §5.3.
   Блок-контент вкладывается КАК ЕСТЬ: у блоков темы свой .container, а правило
   .container .container { width: 100% } делает вложение безопасным. */
.section {
  display: flex;
  flex-direction: column;
  row-gap: var(--section-gap);
  padding-block: var(--section-y);
  background-color: var(--section-background, transparent);
}
/* Подложки (§5.4). Больше никаких фонов у секций: белое по умолчанию,
   --color-field только под плотной сеткой, --color-ink — рама, не плашка. */
.section--field {
  --section-background: var(--color-field);

  /* Подложка --c-field (#F4F8FB) темнее прежней #F9FBFC, и светлый акцент ссылок
     --primary-grey-blue (#1C7BAC) проваливается на ней до 4.39:1 (замер
     check-lpd16-contrast-cdp: «10 отзывов», «1 отзыв», «Читать полностью»).
     --color-accent-strong введён Э3 ровно для мелкого текста на светлых плашках. */
  --link-active-color: var(--color-accent-strong);
  --link-hover-color: var(--color-accent-strong);
}
.section--ink {
  --section-background: var(--color-ink);
  --title-color: var(--primary-white);
  --link-color: var(--primary-white);

  color: var(--primary-white);
}
.section--slim {
  --section-y: var(--section-y-slim);
}

.section__head {
  display: flex;
  column-gap: var(--grid-gap);
  align-items: baseline;
  justify-content: space-between;
}
/* Внутри строки заголовка контейнер уже задан самой .section__head —
   вложенные .container не должны повторно тянуть ширину. margin-inline
   обязателен: `margin: 0 auto` из .container в flex-строке съедает свободное
   место и растаскивает заголовок с действием к середине вместо краёв. */
.section__head > .container {
  width: auto;
  margin-inline: 0;
}
.section__head-text {
  min-width: 0;
}
.section__eyebrow {
  margin: 0 0 10px;
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.section--ink .section__eyebrow {
  color: var(--color-text-on-dark-muted);
}
.section__headline {
  margin: 0;
  font-size: var(--h2-size);
  line-height: var(--leading-display-2);
  font-weight: var(--fw-extrabold);
  font-family: var(--font-2);
  color: inherit;
}
.section__subline {
  max-width: 56ch;
  margin: 12px 0 0;
  font-size: var(--fs-18);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
}
.section--ink .section__subline {
  color: var(--color-text-on-dark-muted);
}
/* Ровно одна текстовая ссылка со стрелкой на секцию (§5.1, слот ACTION) */
.section__action {
  display: inline-flex;
  column-gap: 8px;
  align-items: center;
  min-height: 28px;
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--color-accent-strong);
  text-decoration: none;
  white-space: nowrap;
}
.section--ink .section__action {
  color: var(--color-accent-on-dark);
}
.section__action:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
}
.section--ink .section__action:hover {
  color: var(--color-accent-on-dark);
}
.section__action .icon {
  /* Без этого стрелка приезжает белой (дефолт спрайта) и пропадает на светлой
     подложке — цвет иконки должен идти за цветом самой ссылки. */
  --icon-fill: currentColor;
}
.section__action .icon svg {
  width: 16px;
  height: 16px;
}
/* Разделитель внутри секции, объединяющей две полосы (§5.5, партнёры + SEO-текст) */
.section__rule {
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--color-hairline);
}

@media screen and (max-width: 768px) {
  /* Мобайл: ACTION уходит под контент во всю ширину (§5.1). display:contents
     распускает строку заголовка — её дети становятся детьми .section и
     подчиняются flex-order, при этом DOM-порядок остаётся прежним.
     Контейнерность возвращается детям: их родителем по факту становится .section. */
  .section__head {
    display: contents;
  }
  .section__head > .container {
    width: var(--container);
    margin-inline: auto;
  }
  .section__action {
    order: 1;
    justify-content: space-between;
    min-height: 44px; /* WCAG 2.5.5 */
    padding-inline: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .section--ink .section__action {
    border-color: var(--primary-white-opacity2);
  }
}

.separator {
  width: 100%;
  height: 1px;
  background-color: var(--primary-grey-opacity10);
}
.sidebar-separator {
  width: 100%;
  height: 1px;
  margin-top: 20px;
  margin-bottom: 12px;
  background-color: var(--primary-grey5);
}
.sidebar-separator:first-child, .sidebar-separator:last-child {
  display: none;
}

.phone {
  white-space: nowrap;
}

/* ICON */
.icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--icon-width, var(--icon-size, 22px));
  min-width: var(--icon-width, var(--icon-size, 22px));
  height: var(--icon-height, var(--icon-size, 22px));
}
.icon path {
  transition: .3s;
}
/* Э8 (LPD-14): перекраску ДУБЛИРУЕМ на обёртку `.icon`, чтобы работал вынос иконок в
   SVG-спрайт через <use>. Селектор `.icon path` НЕ достаёт содержимое <use> (оно в
   shadow-поддереве) — там красит наследуемый `fill` обёртки (у symbol'ов обычной роли
   заливка <path> снята, они наследуют этот fill). Для инлайновых иконок правило `.icon path`
   работает как прежде — красит <path> напрямую тем же `--icon-fill` (важно: не `inherit`,
   иначе <path> наследовал бы `fill` промежуточного `<svg fill="none">`), а спец-правила
   блоков по `[fill="url(#…)"]` (404, quote) остаются специфичнее и продолжают работать.
   Перекрашивается только <path> — не-path геометрия (circle-бейдж energy и т.п.) хранит
   свой цвет, как и до Э8. */
.icon:not(.icon--fill-default) {
  fill: var(--icon-fill, var(--primary-white));
}
.icon:not(.icon--fill-default) path {
  fill: var(--icon-fill, var(--primary-white));
}

/* LOADER */
.loader {
  /* text-indent: -99999px; */
  position: relative;
  pointer-events: none;
}
.loader:not(.icon):not(.button) {
  transition: .1s;
  /* width: 100%; */
  /* height: 16px; */
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
.loader:is(.icon, .button) {
  opacity: 1 !important;
}
.loader.button .button__text {
  color: transparent !important;
}
.loader * {
  opacity: 0;
  transition: 0s;
}
.loader::after {
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: var(--radius-circle);
  border: 2px solid var(--loader-color, var(--primary-blue));
  border-color: var(--loader-color, var(--primary-blue)) transparent var(--loader-color, var(--primary-blue)) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transform-origin: left top;
}
@keyframes lds-dual-ring {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

.link {
  cursor: pointer;
  display: inline-block;
 
  font-size: var(--link-font-size, inherit);
  font-weight: var(--link-font-weight, inherit);
  font-family: var(--link-font-family, inherit);
  color: var(--link-color, var(--primary-blue));
}
.link--icon {
  display: flex;
  column-gap: 8px;
  align-items: center;
}
.link--icon .icon {
  --icon-size: var(--link-icon-size, 13px);
}
.link--icon .icon:not(.icon--fill-default) {
  --icon-fill: var(--link-icon-fill, var(--primary-blue));
}
.link:hover {
  --link-color: var(--link-hover-color, var(--primary-grey-blue)) !important;
  /* --link-font-weight: var(--link-hover-font-weight, inherit) !important; */
}
.link--active {
  --link-color: var(--link-active-color, var(--primary-grey-blue)) !important;
  --link-font-weight: var(--link-active-font-weight, inherit) !important;
}
.link:hover .icon:not(.icon--fill-default) {
  --icon-fill: var(--link-hover-icon-fill, var(--primary-blue));
}
.link--active .icon:not(.icon--fill-default) {
  --icon-fill: var(--link-active-icon-fill, var(--primary-blue));
}
.link--underline {
  border-bottom: 1px solid var(--link-color, var(--primary-blue));
}
.link.link--underline:hover {
  border-bottom-color: transparent;
}

/* LPD-16 (3/5 доступность): skip-link. Уводим за экран трансформом (не display:none —
   элемент остаётся в tab-порядке), возвращаем на :focus. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-accent, var(--primary-blue));
  color: var(--primary-white);
  font-weight: var(--fw-semibold, 600);
  font-size: 0.94rem;
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
  transition: transform .15s ease, opacity .15s ease;
}
.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  outline: 2px solid var(--primary-white);
  outline-offset: 2px;
}
#main-content:focus {
  outline: none;
}

/* Product type category pilot */
.page-product-type #page-body {
  display: block;
}

.page-product-type #page-content {
  row-gap: 18px;
  position: static;
  top: auto;
}

.page-product-type #page-column-left {
  display: none;
}

/* LPD-18 Э10: одна колонка вместо двух. Правая половина держала панель пород — навигацию,
   поданную крупнее самого раздела; теперь породы идут лентой чипов под заголовком, и
   заголовку вернулась полная ширина. */
.product-type-landing {
  margin-bottom: 18px;
  padding: 32px;
  color: var(--primary-white);
  background: linear-gradient(135deg, var(--primary-grey) 0%, #20384a 100%);
  border-radius: var(--radius-xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.product-type-landing__content {
  min-width: 0;
  grid-column: 1;
  align-self: center;
}

.product-type-landing > * {
  min-width: 0;
}

.product-type-landing--no-materials {
  grid-template-columns: minmax(0, 1fr);
}

.product-type-landing--no-materials .product-type-landing__title,
.product-type-landing--no-materials .product-type-landing__intro {
  max-width: 980px;
}

.product-type-landing__eyebrow {
  width: max-content;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 6px 12px;
  border: 1px solid var(--primary-white-opacity2);
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  color: var(--primary-white-blue2);
}

.product-type-landing__title {
  max-width: 820px;
  margin: 0 0 10px;
  font-family: var(--font-2);
  font-size: 1.875rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  color: var(--primary-white);
}

.product-type-landing__intro {
  max-width: 820px;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--primary-white-blue);
}

.product-type-landing__material-switch {
  min-width: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--primary-white-opacity2);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, .07);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-self: stretch;
}

.product-type-landing__materials-head {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.product-type-landing__materials-label {
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  color: var(--primary-white);
}

.product-type-landing__materials-note {
  font-size: .8125rem;
  line-height: var(--leading-comfortable);
  color: var(--primary-white-blue);
}

.product-type-landing__materials {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 8px;
}

.product-type-landing__material {
  --link-color: var(--primary-white);
  --link-hover-color: var(--primary-white);

  min-width: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 68px;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--primary-white-opacity2);
  border-radius: var(--radius-md);
  background-color: var(--primary-white-opacity);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  justify-self: stretch;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.product-type-landing__material:hover,
.product-type-landing__material:focus-visible,
.product-type-landing__material--active {
  border-color: var(--primary-blue);
  background-color: rgba(24, 119, 184, .2);
}

.product-type-landing__material:hover,
.product-type-landing__material:focus-visible {
  transform: translateY(-1px);
}

.product-type-landing__material--active::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(24, 119, 184, .18);
}

.product-type-landing__material-name {
  min-width: 0;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--primary-white);
  overflow-wrap: anywhere;
}

.product-type-landing__material-text {
  min-width: 0;
  font-size: .75rem;
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  /* LPD-16 (5/5): карточки породы лежат на тёмном градиенте секции — прежний
     --primary-white-blue (#B2CBCE) давал 4.06–4.42:1 вдоль градиента */
  color: var(--color-text-on-dark-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-type-landing--materials-many .product-type-landing__material-switch {
  max-height: 336px;
  overflow: hidden;
}

.product-type-landing--materials-many .product-type-landing__materials {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 230px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.product-type-landing--materials-many .product-type-landing__material {
  min-height: 62px;
}

.product-type-landing--materials-many .product-type-landing__material-text {
  -webkit-line-clamp: 1;
}

/* ═══ LPD-18 Э10. Лента пород и цифры в шапке среза ═══ */
.product-type-landing__woods {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.product-type-landing__woods-label {
  font-size: .8125rem;
  color: #94A7BC;
}

.product-type-landing__woods-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* В чипе вместо описания породы — число позиций и цена «от»: описание всё равно не помещалось
   и обрывалось на многоточии, а цена и количество решают выбор. */
.wood-chip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: auto;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--primary-white-opacity2);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink-raised);
  color: #DCE6F0;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.wood-chip:hover,
.wood-chip:focus-visible {
  border-color: var(--color-accent-on-dark);
  color: var(--primary-white);
}

.wood-chip__name {
  font-size: .875rem;
  font-weight: var(--fw-semibold);
}

.wood-chip em {
  font-style: normal;
  font-size: .75rem;
  color: #94A7BC;
  white-space: nowrap;
}

.wood-chip--on {
  border-color: var(--color-accent-on-dark);
  background-color: #2C3646;
  color: var(--primary-white);
  cursor: default;
}

.wood-chip--on em {
  color: var(--color-accent-on-dark);
}

.product-type-landing__figures {
  grid-column: 1;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--primary-white-opacity);
}

.pt-figure b {
  display: block;
  font-family: var(--font-2);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--primary-white);
}

.pt-figure b i {
  font-style: normal;
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  color: #94A7BC;
}

.pt-figure span {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: #94A7BC;
}

@media screen and (max-width: 768px) {
  .product-type-landing {
    padding: 20px;
    gap: 18px;
  }

  .product-type-landing__woods-label {
    width: 100%;
  }

  .product-type-landing__figures {
    gap: 18px 28px;
    padding-top: 16px;
  }

  .pt-figure b {
    font-size: 1.25rem;
  }
}

.product-type-landing__facts {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-type-landing__facts span {
  min-width: 0;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--primary-white-opacity2);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-weight: var(--fw-semibold);
  color: var(--primary-white);
  background-color: rgba(255, 255, 255, .08);
  overflow-wrap: anywhere;
}

.product-type-filter {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white);
}

.product-type-filter__head {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(230px, auto) minmax(0, 1fr);
  gap: 12px 18px;
  align-items: end;
}

.product-type-filter__title {
  margin: 0;
  font-family: var(--font-2);
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--primary-color);
}

.product-type-filter__text {
  margin: 0;
  font-size: .9375rem;
  line-height: var(--leading-relaxed);
  color: var(--primary-grey2);
}

.product-type-filter .sidebar-separator {
  display: none;
}

.product-type-filter .filter {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(440px, 1.55fr) minmax(210px, .95fr) minmax(150px, 170px);
  gap: 12px;
  align-items: stretch;
}

.product-type-filter .filter__group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white-grey);
  row-gap: 12px;
}

.product-type-filter [data-filter-group-id="special"] .filter__group-items {
  position: static;
  transform: none;
}

.product-type-filter .field__checkbox-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  flex-direction: row;
}

.product-type-filter .checkbox {
  min-height: 32px;
}

.product-type-filter .filter__group--sizes .field__checkbox-items {
  --size-filter-column-min: 150px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--size-filter-column-min), 1fr));
  gap: 12px 18px;
  align-items: start;
}

.product-type-filter .filter__group--sizes .checkbox {
  min-width: 0;
  min-height: 36px;
  display: grid;
  grid-template-columns: var(--checkbox-size, 20px) minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.product-type-filter .filter__group--sizes .checkbox[hidden],
.product-type-filter .filter__group--sizes .checkbox[data-filter-collapsed-hidden="true"] {
  display: none !important;
}

.product-type-filter .filter__group--sizes .checkbox__control {
  margin-top: 0;
}

.product-type-filter .filter__group--sizes .checkbox__label {
  min-width: 0;
  line-height: var(--leading-snug);
  overflow-wrap: normal;
}

.product-type-filter .filter__group--sizes .filter__group-items--show .field__checkbox-items {
  max-height: none;
  overflow: visible;
}

.product-type-filter .filter__buttons {
  grid-column: auto;
  min-width: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  margin-top: 0;
}

.product-type-filter .filter__buttons .button {
  --button-width: auto;
  --button-height: 40px;
  --button-font-size: .9375rem;
  --button-font-weight: var(--fw-bold);

  min-width: 0;
  min-height: 40px;
  border-radius: var(--radius-md);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.product-type-filter .filter__apply {
  box-shadow: var(--shadow-2);
}

.product-type-filter .filter__apply:hover,
.product-type-filter .filter__apply:focus-visible {
  box-shadow: 0 10px 22px rgba(24, 119, 184, .24);
}

.product-type-filter .filter__clear {
  --button-color: var(--primary-color);
  --button-background: var(--primary-white-grey);
  --button-border: var(--primary-grey-opacity6);
  --button-hover-color: var(--primary-color);
  --button-hover-background: var(--primary-white);
  --button-hover-shadow: rgba(24, 119, 184, .16);
  --button-active-color: var(--primary-blue);
  --button-active-background: var(--primary-white-grey);

  min-width: 132px;
  box-shadow: none;
}

.product-type-filter .filter__clear:hover,
.product-type-filter .filter__clear:focus-visible {
  color: var(--primary-color);
  border-color: var(--primary-grey-opacity6);
  background-color: var(--primary-white);
  box-shadow: 0 8px 18px rgba(24, 119, 184, .16);
}

.product-type-filter .filter__clear:hover:active {
  color: var(--primary-blue);
  border-color: var(--primary-grey-opacity6);
  background-color: var(--primary-white-grey);
  box-shadow: 0 6px 14px rgba(24, 119, 184, .12);
}

.product-type-material-list {
  margin: 0 0 28px;
  padding: 24px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white);
  box-shadow: 0 10px 28px rgba(24, 42, 60, .04);
}

.product-type-material-list,
.product-type-material-list * {
  box-sizing: border-box;
}

.product-type-material-list__head {
  margin-bottom: 16px;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.product-type-material-list__copy {
  min-width: 0;
  max-width: 800px;
}

.product-type-material-list__title {
  margin: 0 0 6px;
  font-family: var(--font-2);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.22;
  color: var(--primary-color);
}

.product-type-material-list__text {
  margin: 0;
  font-size: .9375rem;
  line-height: var(--leading-relaxed);
  color: var(--primary-grey2);
}

.product-type-material-list__count {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--primary-color);
  background-color: var(--primary-white-grey);
}

.product-type-material-list__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ═══ LPD-18 Э2. Плитка породы ═══
   Пришла на место строки списка: строка не могла назвать ни цену, ни наличие, а разница
   между породами двукратная. Сетка auto-fit, а не фиксированные колонки: пород бывает от
   двух (блок-хаус) до шести (вагонка), и обе раскладки должны быть ровными. */
.wood-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.wood-tile {
  --link-color: var(--color-text);

  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wood-tile:hover,
.wood-tile:focus-visible {
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 24px rgba(24, 42, 60, .08);
  transform: translateY(-2px);
}

/* Data-режим по ТЗ LPD-17 §6.2: кадра у пород нет, поэтому медиа-зону держит число позиций,
   а не серый прямоугольник-заглушка. Когда съёмка §9 появится, сюда встанет изображение
   тем же боксом. */
.wood-tile__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--space-5) var(--space-4);
  min-height: 118px;
  background-color: var(--color-field);
  border-bottom: 1px solid var(--color-hairline);
}

.wood-tile__count {
  font-family: var(--font-2);
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-none);
  color: var(--color-text);
}

.wood-tile__count-note {
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.wood-tile__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
  flex: 1;
}

.wood-tile__name {
  font-family: var(--font-2);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  /* «Термолиственница» и «Антисептированная» — одно слово в 16–17 знаков, по словам
     такое не переносится: на 375px имя вылезало за карточку и обрезалось её
     overflow (замер: 253px текста в зоне 199). anywhere ломает слово только когда
     иначе никак — на широких колонках перенос не появляется. */
  overflow-wrap: anywhere;
}

.wood-tile__desc {
  font-size: .875rem;
  line-height: var(--leading-comfortable);
  color: var(--color-text-secondary);
  flex: 1;
}

.wood-tile__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}

.wood-tile__price em {
  display: block;
  font-style: normal;
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.wood-tile__price b {
  font-family: var(--font-2);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-none);
  color: var(--color-text);
}

.wood-tile__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-stock-in);
  white-space: nowrap;
}

.wood-tile__stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.wood-tile--order .wood-tile__stock {
  color: var(--color-stock-order);
}

.wood-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  background-color: var(--color-field);
  border-top: 1px solid var(--color-hairline);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.wood-tile__arrow {
  display: flex;
  color: var(--color-accent);
  /* Спрайт отдаёт стрелку с зашитым #87929F; без currentColor она остаётся серой
     и на подвале плитки читается как царапина, а не как указатель (та же правка,
     что у .section__action). */
  --icon-fill: currentColor;
}

.wood-tile__arrow svg {
  width: 17px;
  height: 17px;
}

.wood-tile:hover .wood-tile__foot {
  color: var(--color-accent-strong);
}

@media screen and (max-width: 768px) {
  .wood-tiles {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .wood-tile__media {
    min-height: 96px;
    padding: var(--space-4);
  }

  .wood-tile__count {
    font-size: 1.625rem;
  }
}

/* ═══ Блок «Выберите материал»: кадр породы слева (макет, вариант C, 2026-08-10) ═══
   Было: вертикальная плитка ~500px высотой, где верхнюю треть занимало число позиций,
   а цена — главный критерий выбора — стояла мелким внизу. Материалов в блоке бывает
   от одного до одиннадцати («Пиломатериалы»), и на одиннадцати это уходило в три ряда.
   Стало: горизонтальная карточка. Слева фактура самой древесины — породу узнают глазом
   раньше, чем читают название; справа название, описание, цена и число позиций.
   Направления (.wood-tiles--rows) этой раскладки не касаются — у них свой модификатор. */
/* 2026-08-10, просьба владельца: не больше трёх в ряду. Было auto-fit от 300px, и на
   1400px вставало четыре колонки по ~340: за вычетом медиа-зоны 104px тексту
   оставалось около 215, и карточка ломалась — «Термолиственница» и
   «Антисептированная» обрезались посередине слова, «1 350 ₽» и «40 500 ₽»
   переносили рубль на вторую строку, «Смотреть размеры и сорта» шло в две.
   Три колонки дают тексту ~346px, и всё это встаёт на место.
   Ступени фиксированные, а не auto-fit: max-width 520px у карточки и так не даёт
   ей растянуться при одном-двух материалах, а предсказуемое число колонок важнее. */
.wood-tiles--material {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 1180px) {
  /* Две колонки: на 1180px три дают тексту 250px — начинается тот же перенос цены. */
  .wood-tiles--material {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 820px) {
  .wood-tiles--material {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Один-два материала не должны растягиваться во всю ширину секции: пустая карточка
   на 1400px читается как ошибка вёрстки, а не как выбор из одного варианта. */
.wood-tiles--material .wood-tile {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  max-width: 520px;
}

.wood-tiles--material .wood-tile__media {
  grid-row: 1 / -1;
  min-height: 0;
  padding: var(--space-4) 10px;
  border-bottom: 0;
  border-right: 1px solid var(--color-hairline);
  text-align: center;
}

/* Кадр занимает всю зону: у съёмки формат 4:3, а зона узкая и высокая, поэтому cover
   с центром — центр кадра по ТЗ съёмки всегда занят материалом. */
.wood-tiles--material .wood-tile__media--photo {
  padding: 0;
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.wood-tiles--material .wood-tile__media--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wood-tiles--material .wood-tile__count {
  font-size: 1.5rem;
}

.wood-tiles--material .wood-tile__body {
  padding: 14px 16px;
  gap: 6px;
}

.wood-tiles--material .wood-tile__meta {
  padding-top: 10px;
}

.wood-tiles--material .wood-tile__price b {
  font-size: 1.25rem;
}

.wood-tiles--material .wood-tile__foot {
  padding: 11px 16px;
}

@media screen and (max-width: 768px) {
  .wood-tiles--material .wood-tile {
    max-width: none;
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

.product-type-material-list__row {
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-blue);

  min-width: 0;
  width: 100%;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid var(--primary-grey-opacity4);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  gap: 16px;
  align-items: center;
  background-color: var(--primary-white);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.product-type-material-list__row:hover,
.product-type-material-list__row:focus-visible {
  border-color: var(--primary-blue);
  box-shadow: 0 8px 24px rgba(24, 42, 60, .08);
  transform: translateY(-1px);
}

.product-type-material-list__main {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.product-type-material-list__name {
  min-width: 0;
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--primary-color);
  overflow-wrap: anywhere;
}

.product-type-material-list__desc {
  min-width: 0;
  font-size: .9375rem;
  line-height: 1.42;
  color: var(--primary-grey2);
  overflow-wrap: anywhere;
}

.product-type-material-list__meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(94px, auto) minmax(132px, auto);
  gap: 10px;
  align-items: center;
  justify-content: end;
}

.product-type-material-list__amount {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  color: var(--primary-grey2);
  background-color: var(--primary-white-grey);
  white-space: nowrap;
}

.product-type-material-list__cta {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: var(--fw-extrabold);
  color: var(--primary-white);
  background-color: var(--primary-blue);
  white-space: nowrap;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.product-type-material-list__row:hover .product-type-material-list__cta,
.product-type-material-list__row:focus-visible .product-type-material-list__cta {
  background-color: #1983ba;
  box-shadow: 0 8px 18px rgba(24, 119, 184, .2);
}

@media screen and (max-width: 980px) {
  .product-type-landing {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-type-landing__content,
  .product-type-landing__material-switch,
  .product-type-landing__facts {
    grid-column: 1;
    grid-row: auto;
  }
}

@media screen and (max-width: 1180px) {
  .product-type-filter .filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-type-filter .filter__buttons {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }

  .product-type-filter .filter__buttons .button {
    min-width: 168px;
  }
}

@media screen and (max-width: 768px) {
  .product-type-landing {
    margin-bottom: 18px;
    padding: 18px;
    gap: 18px;
  }

  .product-type-landing__title {
    font-size: 1.375rem;
  }

  .product-type-landing__intro,
  .product-type-filter__text {
    font-size: .9375rem;
  }

  .product-type-landing__material-switch,
  .product-type-filter .filter {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-type-landing__material-switch {
    padding: 14px;
  }

  .product-type-landing__materials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-type-landing--materials-many .product-type-landing__material-switch {
    overflow: hidden;
  }

  .product-type-landing--materials-many .product-type-landing__materials {
    display: flex;
    gap: 8px;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .product-type-landing--materials-many .product-type-landing__material {
    flex: 0 0 min(210px, 72vw);
    width: min(210px, 72vw);
  }

  .product-type-filter__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-type-landing__material {
    min-height: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .product-type-landing__facts span {
    width: 100%;
  }

  .product-type-filter {
    margin-bottom: 18px;
    padding: 16px;
  }

  .product-type-filter .filter__group {
    padding: 14px;
  }

  .product-type-filter .filter__buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .product-type-filter .filter__buttons .button,
  .product-type-filter .filter__apply,
  .product-type-filter .filter__clear {
    --button-height: 44px;
    --button-width: 100%;
    min-width: 0;
    min-height: 44px;
  }

  .product-type-material-list {
    margin-bottom: 24px;
    padding: 14px;
  }

  .product-type-material-list__head {
    align-items: stretch;
    flex-direction: column;
  }

  .product-type-material-list__title {
    font-size: 1.25rem;
  }

  .product-type-material-list__count {
    width: 100%;
    justify-content: center;
  }

  .product-type-material-list__row {
    padding: 12px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .product-type-material-list__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .product-type-material-list__amount,
  .product-type-material-list__cta {
    min-width: 0;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
}

.product-type-offers {
  margin: 0 0 28px;
  padding: 20px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white);
}

.product-type-offers,
.product-type-offers * {
  box-sizing: border-box;
}

.product-type-offers__head {
  margin-bottom: 14px;
  display: flex;
  gap: 18px 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

/* LPD-15 (2.7): кнопка клиентской сортировки прайс-таблицы по цене */
.product-type-offers__sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--primary-blue);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--primary-blue);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.product-type-offers__sort:hover,
.product-type-offers__sort[aria-pressed="true"] {
  background: var(--primary-blue);
  color: #fff;
}

/* LPD-14 Э4: глоссарий сортов уровня L3 — между шапкой секции и таблицей */
.product-type-offers__glossary {
  margin: -4px 0 10px;
}

.product-type-offers__copy {
  min-width: 0;
  max-width: 760px;
}

.product-type-offers__eyebrow {
  width: max-content;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  color: var(--primary-white);
  background-color: var(--primary-blue);
}

.product-type-offers__title {
  margin: 0 0 6px;
  font-family: var(--font-2);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.22;
  color: var(--primary-color);
}

.product-type-offers__text {
  margin: 0;
  font-size: .9375rem;
  line-height: var(--leading-relaxed);
  color: var(--primary-grey2);
}

/* LPD-15 3.5a: ценовой якорь среза */
.product-type-offers__price-from {
  margin: 8px 0 0;
  font-size: .9375rem;
  line-height: var(--leading-relaxed);
  color: var(--primary-grey2);
}

.product-type-offers__price-from strong {
  color: var(--primary-black, #182433);
  font-weight: var(--fw-semibold);
}

.product-type-offers__count {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--primary-color);
  background-color: var(--primary-white-grey);
}

/* LPD-14 Э3. Прайс-таблица уровня L3.
   tbody обязан остаться table-row-group: класс .product-type-offers__rows читает
   _blocks/catalog/filter/script.js, а прежний display:flex разваливал колонки. */
.product-type-offers__rows {
  display: table-row-group;
}

.product-type-offers__empty {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  line-height: var(--leading-comfortable);
  color: var(--primary-grey2);
  background-color: var(--primary-white-grey);
}

.product-type-offers__empty[hidden] {
  display: none;
}

.product-type-offers--table {
  --pt-pad-x: 12px;
  --pt-pad-y: 10px;
  --pt-dim-min: 116px;
  --pt-border: var(--primary-grey-opacity4);
  --pt-tap: 44px;
}

.product-type-offers__group {
  margin-top: 16px;
}

.product-type-offers__family {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-2);
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  color: var(--primary-color);
}

.product-type-offers__family a {
  color: inherit;
  text-decoration: none;
}

.product-type-offers__family a:hover {
  color: var(--primary-blue);
}

.product-type-offers__family-count {
  font-family: var(--font-1);
  font-size: .8125rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey5);
}

.product-type-offers__facts,
.product-type-offers__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.product-type-offers__fact {
  padding: 5px 8px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white-grey);
  font-size: .8125rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey5);
}

.product-type-offers__fact strong {
  font-weight: var(--fw-bold);
  color: var(--primary-grey2);
}

.product-type-offers__jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--primary-grey-opacity6);
  border-radius: var(--radius-md);
  background-color: var(--primary-white-grey);
  font-size: .8125rem;
  color: var(--primary-grey2);
  text-decoration: none;
}

.product-type-offers__jump a:hover {
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.product-type-offers__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.product-type-offers__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.product-type-offers__th {
  padding: 12px var(--pt-pad-x);
  border-bottom: 1px solid var(--primary-grey-opacity6);
  background-color: var(--primary-white-grey);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--primary-grey2);
  text-align: left;
  white-space: nowrap;
}

/* LPD-18 Э5: колонка фото в витрине. Включается только там, где снимки различают позиции
   (краски и масла: 53 уникальных фото на 60 товаров). Ширина фиксированная, чтобы строки
   не дребезжали, когда у части позиций фото нет. */
.product-type-offers__th--thumb {
  width: 76px;
}

.product-type-offers__cell--thumb {
  padding: 8px var(--pt-pad-x);
  vertical-align: middle;
}

.product-type-offers__thumb {
  display: block;
  width: 60px;
  height: 60px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-sunken);
}

.product-type-offers__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-type-offers__th--name {
  min-width: 220px;
}

.product-type-offers__th--dim {
  min-width: var(--pt-dim-min);
}

.product-type-offers__th--price {
  width: 140px;
}

.product-type-offers__th--qty {
  width: 118px;
}

.product-type-offers__th--act {
  width: 190px;
}

.product-type-offers__th--num,
.product-type-offers__cell--num {
  text-align: right;
}

.product-type-offers__cell {
  padding: var(--pt-pad-y) var(--pt-pad-x);
  border-bottom: 1px solid var(--pt-border);
  font-size: .875rem;
  font-weight: var(--fw-light);
  line-height: var(--leading-normal);
  color: var(--primary-grey5);
  text-align: left;
  vertical-align: middle;
}

.product-type-offers__cell--name {
  font-weight: var(--fw-regular);
}

.product-type-offers__cell--dim {
  font-weight: var(--fw-regular);
  color: var(--primary-color);
  white-space: nowrap;
}

.product-type-offers__cell--void {
  color: var(--primary-grey3);
}

.product-type-offers__row:hover {
  background-color: var(--primary-light-grey4);
}

/* Фильтр прячет строки атрибутом hidden — против display:table-row он бессилен. */
.product-type-offers__row[hidden],
.product-type-offers__row.product-type-offers__row--filtered-hidden {
  display: none !important;
}

/* Группа, у которой фильтр спрятал все строки, скрывается целиком.
   LPD-18: у матричной группы строк .product-type-offers__row нет вовсе — без второго
   :not() это правило прятало бы её всегда, вместе со всей витриной.

   LPD-20 (2026-08-08), третий :not(). Правило писалось, когда группа состояла из одних
   строк таблицы. Потом внутрь неё переехала панель подбора — и при выборе несуществующего
   сочетания («толщина 20 мм» + «ширина 140 мм») группа пряталась вместе с фильтрами:
   выдача пустая, вернуться нечем, кнопка «Сбросить всё» исчезала вместе с панелью.
   Группа с панелью подбора не скрывается никогда — вместо этого показывается пустое
   состояние с кнопкой сброса (.offer-empty). */
.product-type-offers__group:not(:has(.product-type-offers__row:not([hidden]))):not(:has(.offer-matrix)):not(:has([data-offer-quick])) {
  display: none;
}


/* ═══ LPD-18 Э8. Сетка карточек — вид витрины ═══
   Пришла на место матрицы после разбора конкурентов: пятеро из шести показывают позиции
   карточками, и причина в том, что сетка прокручивается только вниз, а горизонтальная ось
   всегда упирается в ширину экрана. auto-fill с минимумом 264px: на 1416px это 5 колонок,
   на планшете 3, на телефоне 1 — без единого медиазапроса под ширину карточки. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--space-4);
}

/* ═══ LPD-23 T12. Подвал витрины-выборки ═══
   Стоит под сеткой на карточках-семействах свыше порога и объясняет, что показана часть
   ряда, а весь он — на срезе. Ссылке явно задана ширина: normalize.css:195 даёт всем a
   width:max-content, и без этого кнопка распирала бы контейнер по длине своего текста
   (DOMAIN_MAP §12, тот же механизм, что срезал строку «Другие размеры и сорта»). */
.offer-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-sunken);
}

.offer-preview__note {
  margin: 0;
  min-width: 0;
  font-size: .9375rem;
  line-height: var(--leading-comfortable);
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.offer-preview__link {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-decoration: none;
}

.offer-preview__link:hover,
.offer-preview__link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

@media screen and (max-width: 768px) {
  .offer-preview {
    flex-direction: column;
    align-items: stretch;
  }

  .offer-preview__link {
    justify-content: center;
  }
}

.offer-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.offer-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 8px 24px rgba(24, 42, 60, .08);
}

.offer-card__media {
  display: block;
  width: auto;
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-hairline);
  overflow: hidden;
}

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

.offer-card__body {
  padding: var(--space-4) var(--space-4) 0;
  flex: 1;
}

.offer-card__name {
  margin: 0 0 10px;
  font-family: var(--font-2);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
}

.offer-card__name a {
  width: auto;
  color: var(--color-text);
  text-decoration: none;
}

.offer-card__name a:hover {
  color: var(--color-accent-strong);
}

/* Характеристики: только то, чем позиции различаются. Общее для всей витрины (порода,
   профиль) вынесено чипами в шапку секции и здесь не повторяется — у конкурентов оно
   печатается в каждой карточке по шестнадцать раз. */
.offer-card__specs {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px var(--space-3);
  font-size: .8125rem;
}

.offer-card__specs dt {
  color: var(--color-text-muted);
}

.offer-card__specs dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: right;
}

.offer-card__art {
  margin-top: 10px;
  font-size: .75rem;
  color: var(--color-text-muted);
}

.offer-card__buy {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer-card__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-stock-in);
}

.offer-card__stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}

.offer-card__stock--order {
  color: var(--color-stock-order);
}

.offer-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* LPD-19 (L-03): «от» перед минимальной ценой семейства. Тише самой цены и без своего
   отступа — читается как приставка к числу, а не как отдельное слово. */
.offer-card__price-prefix {
  margin-right: -3px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.offer-card__price b {
  font-family: var(--font-2);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-none);
  color: var(--color-text);
}

.offer-card__price--request {
  font-size: .9375rem !important;
  color: var(--color-text-secondary);
}

.offer-card__price span {
  font-size: .75rem;
  color: var(--color-text-muted);
}

.offer-card__price s {
  font-size: .75rem;
  color: var(--color-text-muted);
}

.offer-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.offer-card__stepper {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex: 1;
}

/* Флекс-центрирование и обнуление padding обязательны: у <button> есть собственный
   браузерный padding (в Chrome 1px 6px), и в колонке шириной 34px он сдвигает знак от
   центра — «−» прижимается влево, «+» вправо. */
.offer-card__stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.offer-card__stepper button:hover {
  background-color: var(--color-field);
  color: var(--color-text);
}

.offer-card__stepper input {
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  text-align: center;
  font-family: var(--font);
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  -moz-appearance: textfield;
}

.offer-card__stepper input::-webkit-outer-spin-button,
.offer-card__stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.offer-card__unit {
  font-size: .75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.offer-card__basket {
  width: 100%;
  min-height: 44px;
}

.offer-card__quick {
  width: auto;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-strong);
  text-decoration: none;
}

.offer-card__quick:hover {
  text-decoration: underline;
}

/* ═══ LPD-18 Э9. Панель подбора ═══
   Одна панель вместо пары «боковой фильтр + лента чипов»: тот же выбор стоял на странице
   дважды и вёл себя по-разному. Здесь параметры, цена, счётчик, сортировка и сброс вместе,
   прямо над карточками, с мгновенным применением. */
.offer-quick {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
}

.offer-quick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-3);
}

.offer-quick__title {
  font-family: var(--font-2);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.offer-quick__count {
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  background-color: var(--color-field);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  white-space: nowrap;
}

.offer-quick__price {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.offer-quick__price input {
  width: 108px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: .875rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  -moz-appearance: textfield;
}

.offer-quick__price input::-webkit-outer-spin-button,
.offer-quick__price input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.offer-quick__price span {
  color: var(--color-text-muted);
}

.offer-quick__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
}

.offer-quick__reset,
.offer-quick__sort {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Сброс появляется только когда есть что сбрасывать: пустая кнопка сбивает с толку. */
.offer-quick__reset {
  border: 0;
  background: none;
  padding-left: 0;
  color: var(--color-text-muted);
}

.offer-quick__reset:hover {
  color: var(--color-text);
}

.offer-quick__reset[hidden] {
  display: none;
}

.offer-quick__sort {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}

.offer-quick__sort:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

/* LPD-20 (2026-08-08). Сетка вместо flex-wrap.
   Раньше строка была flex с переносом, и подпись держалась слева, только пока чипы
   помещались в остаток ширины. У «Размеров» их 18 — блок чипов не влезал и переносился
   целиком, а подпись оставалась одна на строке выше. Получалось, что «Толщина», «Ширина»
   и «Сорт» подписаны слева, а «Размеры» — сверху, и колонка подписей разъезжалась.
   Две колонки фиксируют её на месте при любом числе чипов; перенос остаётся внутри
   .offer-quick__chips, где ему и место. */
.offer-quick__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.offer-quick__label {
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
  /* Высота чипа: подпись встаёт по центру ПЕРВОЙ строки чипов, а не по центру
     всего многострочного блока — иначе у «Размеров» она уползала бы к середине. */
  display: flex;
  align-items: center;
  min-height: 36px;
}

.offer-quick__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.offer-quick__chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-size: .8125rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: .15s;
}

.offer-quick__chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.offer-quick__chip--on {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--primary-white);
}

/* LPD-20 (2026-08-08). Значение, недоступное при текущем выборе: выбрана толщина 20 мм,
   а ширины 140 мм в ней не бывает. Гасим, а не прячем — исчезающие чипы дёргали бы
   вёрстку при каждом клике, а приглушённый показывает, что такой размер в каталоге
   есть, просто не в этом сочетании. */
.offer-quick__chip--off {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.offer-quick__chip--off:hover {
  border-color: var(--color-border);
  background-color: transparent;
  color: inherit;
}

/* Карточка, скрытая быстрым выбором или боковым фильтром. */
.offer-card[hidden],
.offer-card.product-type-offers__row--filtered-hidden {
  display: none !important;
}

@media screen and (max-width: 768px) {
  /* На телефоне колонка в 150px не вмещала содержимое карточки: имя позиции, «Материал /
     Капролон стеклоармированный ПА6» и «Профиль обшивки» задают min-content шире слота,
     а .offer-card с overflow:hidden просто срезал их по правому краю — на 390px витрина
     читалась как половина текста. Поэтому на телефоне карточка ложится горизонтально:
     кадр слева фиксированной колонкой, описание справа, блок покупки — строкой под ними.
     Минимум слота поднят до 300px, и min(300px, 100%) не даёт сетке вылезти за экран,
     когда контейнер узок. */
  .offer-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--space-3);
  }

  .offer-card {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas:
      "media body"
      "buy   buy";
  }

  /* Кадр — квадратная миниатюра в углу карточки, а не растянутая по высоте описания
     колонка: при stretch object-fit:cover срезал у крепежа бока, оставляя вертикальную
     полосу 104×259. align-self:start держит квадрат у верхнего края. */
  .offer-card__media {
    grid-area: media;
    align-self: start;
    width: 104px;
    aspect-ratio: 1 / 1;
    border-right: 1px solid var(--color-hairline);
  }

  .offer-card__body {
    grid-area: body;
    min-width: 0;
    padding: var(--space-3);
  }

  .offer-card__buy {
    grid-area: buy;
    min-width: 0;
    padding: var(--space-3);
    border-top: 1px solid var(--color-hairline);
  }

  /* Две колонки в описании шириной 230px не живут: подпись «Профиль обшивки» съедает 110px
     и значению остаётся 97px — «стеклоармированный» ломается посреди слова. Поэтому на
     телефоне пара печатается строкой «Подпись: значение» и переносится по словам на всю
     ширину описания. */
  .offer-card__specs {
    display: block;
  }

  .offer-card__specs dt {
    display: inline;
  }

  .offer-card__specs dt::after {
    content: ": ";
  }

  .offer-card__specs dd {
    display: inline;
    margin: 0;
    text-align: left;
    overflow-wrap: break-word;
  }

  .offer-card__specs dd::after {
    content: "";
    display: block;
    height: 4px;
  }

  .offer-card__name a {
    overflow-wrap: break-word;
  }

  /* Артикул — сплошная строка без пробелов («KAMIFIXLIGHT190/6BLACK»), переносить её можно
     только внутри слова, иначе она распирает описание карточки. */
  .offer-card__art {
    overflow-wrap: anywhere;
  }

  .offer-card__name {
    font-size: .875rem;
  }

  /* Панель быстрого выбора на телефоне занимала полэкрана. Сжата по горизонтали и в
     отступах; высота цели касания остаётся 44px (AGENTS.md, мобильный гейт) — её трогать
     нельзя, поэтому экономия идёт на padding, gap и кегле подписи. */
  .offer-quick {
    padding: var(--space-4);
    gap: 6px;
  }

  .offer-quick__price input {
    width: 96px;
  }

  /* На узком экране колонка подписей съела бы половину ширины, поэтому строка
     схлопывается в одну колонку: подпись сверху, чипы под ней — на всю ширину. */
  .offer-quick__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .offer-quick__label {
    min-width: 0;
    min-height: 0;
    font-size: .75rem;
    color: var(--color-text-muted);
  }

  .offer-quick__chips {
    gap: 5px;
  }

  .offer-quick__chip {
    min-height: 44px;
    padding: 4px 12px;
    font-size: .78rem;
  }
}

/* ═══ LPD-18. Матрица «размер × сорт» (Э1–Э7) — оставлена в стилях, но витрина её больше
   не рендерит: структура group.matrix используется контроллером для осей переключателя
   на странице позиции. ═══
   Размер по вертикали, сорт по горизонтали, цена на пересечении. Заменяет плоский
   список там, где обе оси однозначны (условия — ptBuildMatrix в контроллере категории).
   Border-spacing вместо collapse: ячейке нужны собственные границы, чтобы hover
   подсвечивал её рамкой, не сдвигая соседей. */
.offer-matrix__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.offer-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.offer-matrix__corner,
.offer-matrix__grade {
  padding: 12px 16px;
  background-color: var(--color-field);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: bottom;
  font-size: .875rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  white-space: nowrap;
}

.offer-matrix__corner {
  min-width: 190px;
  position: sticky;
  left: 0;
  z-index: 2;
}

.offer-matrix__corner-note,
.offer-matrix__grade-note {
  display: block;
  margin-top: 3px;
  font-family: var(--font);
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.offer-matrix__grade {
  min-width: 128px;
}

.offer-matrix__grade-name {
  font-family: var(--font-2);
  font-size: .9375rem;
}

.offer-matrix__size {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  background-color: var(--color-surface);
  text-align: left;
  vertical-align: middle;
  font-family: var(--font-2);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  /* Липкая колонка размера: при свайпе по сортам ось не должна уезжать из виду —
     иначе цена в четвёртой колонке перестаёт быть привязана к строке. */
  position: sticky;
  left: 0;
  z-index: 1;
}

.offer-matrix__row:last-child .offer-matrix__size,
.offer-matrix__row:last-child .offer-matrix__td {
  border-bottom: 0;
}

.offer-matrix__td {
  padding: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  vertical-align: top;
}

.offer-matrix__td:last-child {
  border-right: 0;
}

.offer-matrix__td--void {
  padding: 12px 16px;
  color: var(--color-text-muted);
  text-align: center;
}

.offer-matrix__cell {
  display: block;
  width: auto;
  padding: 12px 16px 4px;
  text-decoration: none;
  color: inherit;
}

.offer-matrix__price {
  display: block;
  font-family: var(--font-2);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
  white-space: nowrap;
}

.offer-matrix__price--request {
  font-size: .875rem;
  color: var(--color-text-secondary);
}

.offer-matrix__unit,
.offer-matrix__oldprice {
  display: block;
  font-size: .6875rem;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.offer-matrix__oldprice {
  text-decoration: line-through;
}

.offer-matrix__buy {
  display: inline-block;
  width: auto;
  margin: 0 16px 12px;
  padding: 4px 0;
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  color: var(--color-accent-strong);
  text-decoration: none;
  /* Видима всегда, а не по hover: hover-only действие недостижимо с клавиатуры и тача. */
}

.offer-matrix__buy:hover,
.offer-matrix__buy:focus-visible {
  text-decoration: underline;
}

.offer-matrix__buy--ask {
  color: var(--color-text-muted);
}

.offer-matrix__td:hover {
  background-color: var(--color-field);
}

.offer-matrix__td:hover .offer-matrix__price {
  color: var(--color-accent-strong);
}

/* Хвост клетки: остальные позиции той же пары осей. Мелким кеглем и без цены-крупно —
   главную цену держит первая строка, эти дополняют, а не спорят с ней. */
.offer-matrix__variants {
  list-style: none;
  margin: 0 16px 12px;
  padding: 8px 0 0;
  border-top: 1px dashed var(--color-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offer-matrix__variants a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  min-height: 32px;
  align-items: center;
  font-size: .75rem;
  line-height: var(--leading-tight);
  color: var(--color-text-secondary);
  text-decoration: none;
}

.offer-matrix__variants a:hover {
  color: var(--color-accent-strong);
}

.offer-matrix__variants span {
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;
}

.offer-matrix__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Фильтрация матрицы (LPD-18). Не подошедшая под фильтр ячейка не удаляется из потока:
   display:none на одной ячейке сдвинул бы всю колонку вверх. Содержимое гасится, на его
   месте — тот же прочерк, что и у несуществующей пары. Колонка сорта, пустая по всей
   высоте, скрывается целиком — вместе с заголовком, иначе останется пустой столбец. */
.offer-matrix__td--filtered-hidden {
  position: relative;
}

.offer-matrix__td--filtered-hidden > * {
  visibility: hidden;
}

.offer-matrix__td--filtered-hidden::after {
  content: "—";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}

.offer-matrix__col--empty {
  display: none;
}

.offer-matrix--filtered .offer-matrix__corner-note {
  display: none;
}

/* Подсказка о свайпе нужна только там, где колонки не помещаются: на десктопе
   матрица влезает целиком и фраза была бы враньём. Включается в @media ниже. */
.offer-matrix__swipe {
  display: none;
  margin: 10px 0 0;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

.product-type-offers__name {
  display: block;
  /* width:auto перебивает базовое правило темы `a { width: max-content }`, из-за которого
     длинное имя не переносилось и уезжало за карточку на мобильном. */
  width: auto;
  font-size: .9375rem;
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-snug);
  color: var(--primary-color);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.product-type-offers__name:hover,
.product-type-offers__name:focus-visible {
  color: var(--primary-blue);
}

.product-type-offers__model,
.product-type-offers__extra {
  display: block;
  margin-top: 2px;
  font-size: .75rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey2);
}

.product-type-offers__extra span + span::before {
  content: " \00b7 ";
}

.product-type-offers__price {
  display: block;
  font-size: 1.125rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  color: var(--primary-color);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.product-type-offers__price--request {
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  white-space: normal;
}

.product-type-offers__measure {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey2);
}

.product-type-offers__oldprice {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  color: var(--primary-grey3);
  text-decoration: line-through;
}

.product-type-offers__stepper {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  height: 38px;
  border: 1px solid var(--pt-border);
  border-radius: var(--radius-md);
}

/* См. комментарий у .offer-card__stepper button — та же причина смещения знаков. */
.product-type-offers__stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--primary-grey2);
  cursor: pointer;
}

.product-type-offers__stepper input {
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: .875rem;
  color: var(--primary-color);
  text-align: center;
}

.product-type-offers__stepper input::-webkit-outer-spin-button,
.product-type-offers__stepper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* LPD-15 (2.7): видимая единица под степпером количества */
.product-type-offers__unit {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey2);
  text-align: center;
}

.product-type-offers__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-type-offers__actions .button {
  width: auto;
  height: 38px;
  padding: 0 14px;
  font-size: .8125rem;
}

.product-type-offers__checkout {
  font-size: .75rem;
  color: var(--primary-blue);
  text-decoration: none;
  white-space: nowrap;
}

.product-type-offers__checkout:hover {
  text-decoration: underline;
}

.product-type-offers__band th {
  padding: 8px var(--pt-pad-x);
  border-bottom: 1px solid var(--pt-border);
  background-color: var(--primary-white-grey4);
  text-align: left;
  /* якорь ленты приземляется чуть выше полосы, а не впритык */
  scroll-margin-top: 16px;
}

.product-type-offers__band-title {
  font-family: var(--font-2);
  font-size: .9375rem;
  font-weight: var(--fw-extrabold);
  color: var(--primary-color);
}

.product-type-offers__band-count {
  margin-left: 8px;
  font-size: .8125rem;
  font-weight: var(--fw-light);
  color: var(--primary-grey5);
}

.product-type-offers__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Индикатор клавиатурного фокуса на весь сайт (WCAG 2.4.7 AA).
   Глобальный `* { outline: none }` темы убран (common.css:192, normalize.css:13);
   здесь фокус возвращается по паттерну :focus-visible — виден при навигации
   с клавиатуры, но не мешает клику мышью/тачу (аудит 2026-07-23, п.2.6). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* Скруглённая обводка для контролов прайс-таблицы L3 (косметика поверх глобального правила). */
.product-type-offers__name:focus-visible,
.product-type-offers__checkout:focus-visible,
.product-type-offers__jump a:focus-visible,
.product-type-offers__stepper button:focus-visible,
.product-type-offers__stepper input:focus-visible,
.product-type-offers__actions .button:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .product-type-offers {
    margin-bottom: 24px;
    padding: 14px;
  }

  .product-type-offers__head {
    align-items: stretch;
    flex-direction: column;
  }

  .product-type-offers__title {
    font-size: 1.25rem;
  }

  .product-type-offers__count {
    width: 100%;
    justify-content: center;
  }

  /* ═══ LPD-18 Э7. Матрица на узком экране: карточки вместо свайпа ═══
     Прежде сетка уезжала вбок под свайп: на 375px таблица занимала 860–1170px при экране в
     319. Горизонтальная прокрутка внутри страницы — та же прокрутка вправо, поэтому сетка
     здесь распускается по строкам: строка оси становится заголовком карточки, а её клетки —
     подписанными строчками внутри. Ни одного пикселя вбок.
     Компонент и оформление те же, что на десктопе: единый стиль сохраняется. */
  .offer-matrix__scroll {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }

  .offer-matrix,
  .offer-matrix tbody,
  .offer-matrix__row,
  .offer-matrix__size,
  .offer-matrix__td {
    display: block;
    width: auto;
  }

  /* Шапка не нужна: имя колонки переезжает в подпись каждой клетки (data-col). */
  .offer-matrix thead {
    display: none;
  }

  .offer-matrix__row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-3);
    background-color: var(--color-surface);
  }

  .offer-matrix__size {
    position: static;
    border: 0;
    border-bottom: 1px solid var(--color-hairline);
    background-color: var(--color-field);
    padding: 12px var(--space-4);
    font-size: 1rem;
  }

  /* Одна строка на позицию: подпись, цена, действие. Три ряда вместо одного растягивали
     карточку из четырёх позиций почти на экран. */
  .offer-matrix__td {
    border: 0;
    border-bottom: 1px solid var(--color-hairline);
    display: grid;
    /* Колонка цены фиксирована: при auto её правый край гулял от длины подписи слева,
       и цены в соседних строках переставали читаться столбиком. */
    grid-template-columns: minmax(0, 1fr) 96px auto;
    align-items: center;
    column-gap: var(--space-2);
    padding: 0 var(--space-4);
  }

  .offer-matrix__row .offer-matrix__td:last-child {
    border-bottom: 0;
  }

  /* Клетка без позиции на мобильном не нужна: прочерк занимал бы строку впустую. */
  .offer-matrix__td--void {
    display: none;
  }

  /* Подпись колонки — из data-col: на десктопе её несёт шапка таблицы. */
  .offer-matrix__td::before {
    content: attr(data-col);
    grid-column: 1;
    grid-row: 1;
    font-size: .8125rem;
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }

  .offer-matrix__cell {
    grid-column: 2;
    grid-row: 1;
    padding: 10px 0;
    text-align: right;
  }

  .offer-matrix__price {
    font-size: 1rem;
  }

  .offer-matrix__unit {
    display: inline;
    margin-left: 4px;
  }

  /* 44px цели касания набираются высотой самой ссылки, ширина — по тексту. */
  .offer-matrix__buy {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    white-space: nowrap;
  }

  .offer-matrix__variants {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 10px;
    padding-top: 6px;
  }

  /* Свайпать больше нечего. */
  .offer-matrix__swipe {
    display: none;
  }

  /* Таблица переворачивается в карточки: на 360px горизонтальный скролл
     невозможен — html,body выше по файлу стоят overflow-x: clip. */
  .product-type-offers--table {
    --pt-pad-x: 0px;
  }

  .product-type-offers__scroll {
    overflow-x: visible;
  }

  .product-type-offers__table,
  .product-type-offers__rows {
    display: block;
    width: 100%;
  }

  .product-type-offers__thead {
    display: none;
  }

  .product-type-offers__band {
    display: block;
  }

  .product-type-offers__band th {
    display: block;
    width: 100%;
    margin: 12px 0 8px;
    border-radius: var(--radius-md);
  }

  /* :not(.offer-card) обязателен. Карточка витрины несёт оба класса — .offer-card и
     .product-type-offers__row, — а этот блок писался для строк прежней таблицы. Без
     исключения он перебивал карточке display (специфичность 0,0,2,0 против 0,0,1,0) и
     навязывал ей свои padding/margin: на телефоне карточка снова становилась flex-строкой
     и резала содержимое. */
  .product-type-offers--table .product-type-offers__row:not(.offer-card) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--pt-border);
    border-radius: var(--radius-md);
    background-color: var(--primary-white);
  }

  .product-type-offers__row:not(.offer-card):hover {
    background-color: var(--primary-white);
  }

  .product-type-offers__cell {
    display: block;
    padding: 0;
    border: 0;
  }

  .product-type-offers__cell--name {
    flex: 1 1 100%;
    /* min-width:0 обязателен: иначе flex-item не сжимается ниже min-content, и длинное
       имя распирает строку-карточку, выталкивая цену и кнопку за экран (обрезаются). */
    min-width: 0;
  }

  /* Блок обязателен, чтобы длинное название переносилось; min-height даёт тап-цель 44px.
     inline-flex здесь ломал перенос — имя «Защитное масло для фасадов…» уезжало за экран. */
  .product-type-offers__name {
    display: block;
    min-height: var(--pt-tap);
    padding: 4px 0;
    font-size: 1rem;
  }

  .product-type-offers__jump a {
    min-height: var(--pt-tap);
  }

  .product-type-offers__cell--dim {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--primary-grey-opacity6);
    border-radius: var(--radius-md);
    background-color: var(--primary-white-grey);
    font-size: .8125rem;
    font-weight: var(--fw-light);
    color: var(--primary-grey5);
    text-align: left;
    white-space: normal;
  }

  .product-type-offers__cell--dim::before {
    content: attr(data-label) ": ";
    font-weight: var(--fw-bold);
    color: var(--primary-grey2);
  }

  .product-type-offers__cell--void {
    display: none;
  }

  .product-type-offers__cell--price {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--primary-grey-opacity6);
  }

  .product-type-offers__price {
    display: inline;
    font-size: 1.25rem;
  }

  .product-type-offers__measure,
  .product-type-offers__oldprice {
    display: inline;
    margin-left: 6px;
  }

  .product-type-offers__checkout {
    display: inline-flex;
    align-items: center;
    min-height: var(--pt-tap);
    margin-top: 6px;
    padding-top: 8px;
    font-size: .875rem;
  }

  .product-type-offers__cell--qty {
    flex: 0 0 140px;
    margin-top: 4px;
  }

  .product-type-offers__stepper {
    grid-template-columns: var(--pt-tap) minmax(0, 1fr) var(--pt-tap);
    height: 48px;
  }

  .product-type-offers__stepper button {
    min-width: var(--pt-tap);
    min-height: var(--pt-tap);
  }

  .product-type-offers__stepper input {
    font-size: 1rem;
  }

  .product-type-offers__cell--act {
    flex: 1 1 136px;
    min-width: 136px;
    margin-top: 4px;
  }

  .product-type-offers__actions {
    flex-wrap: nowrap;
  }

  .product-type-offers__actions .button {
    width: 100%;
    height: 48px;
    min-height: 48px;
    font-size: .875rem;
    white-space: normal;
  }

  .product-type-offers__model {
    display: none;
  }
}

/* BUTTON */
.button {
  --loader-color: var(--button-icon-fill, var(--button-color, var(--primary-white)));

  display: flex;
  column-gap: var(--button-column-gap, 8px);
  align-items: center;
  justify-content: center;

  padding: var(--button-padding, 0 16px);
  border-radius: var(--radius-sm);
  font-size: var(--button-font-size, 0.88rem);
  font-weight: var(--button-font-weight, 400);
  font-family: var(--button-font-family, var(--font));
  color: var(--button-color, var(--primary-white));
  background-color: var(--button-background, var(--primary-blue));
  border: 1px solid var(--button-border, var(--primary-white-opacity2));
  box-shadow: 0px 6px 8.2px 0px transparent;

  width: var(--button-width, 100%);
  height: var(--button-height, 46px);
  transition: .3s;
  z-index: 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.button:hover {
  color: var(--button-hover-color, var(--primary-white));
  background-color: var(--button-hover-background, var(--primary-light-blue));
  box-shadow: 0px 6px 8.2px 0px var(--button-hover-shadow, var(--primary-blue-opacity));
  /* border-image-source: none; */
  /* border-color: var(--button-hover-border-color, rgba(24, 119, 184, 1)); */
}
.button:hover:active {
  color: var(--button-active-color, var(--primary-white));
  background-color: var(--button-active-background, var(--primary-grey-blue));
  box-shadow: 0px 6px 8.2px 0px transparent;
  /* border-image-source: none; */
  /* border-color: var(--button-active-border-color, transparent); */
}
.button .icon {
  --icon-size: var(--button-icon-size, 20px);
}
.button .icon:not(.icon--fill-default) {
  --icon-fill: var(--button-icon-fill, var(--primary-white));
}
.button:hover .icon:not(.icon--fill-default) {
  --icon-fill: var(--button-hover-icon-fill, var(--primary-white));
}
.button:hover:active .icon:not(.icon--fill-default) {
  --icon-fill: var(--button-active-icon-fill, var(--primary-light-grey));
}

/* BUTTON TYPE 2 */
.button--type2 {
  --button-background: var(--primary-grey);
  --button-border: var(--primary-grey);
}
.button--type2:hover {
  --button-hover-color: var(--primary-grey);
  --button-hover-background: var(--primary-white);
  --button-border: var(--primary-grey);
  --button-hover-icon-fill: var(--primary-grey);
  --button-hover-shadow: var(--primary-grey-opacity);
  --button-active-icon-fill: var(--primary-white);
}

/* BUTTON TYPE 3 */
.button--type3 {
  --button-color: var(--primary-color);
  --button-background: var(--primary-white);
  --button-border: var(--primary-grey);
  --button-icon-fill: var(--primary-grey);
}
.button--type3:hover {
  --button-hover-background: var(--primary-grey);
  --button-border: var(--primary-grey);
  --button-hover-icon-fill: var(--primary-white);
  --button-hover-shadow: var(--primary-grey-opacity);
  --button-active-icon-fill: var(--primary-white);
}

/* BUTTON TYPE 4 */
.button--type4 {
  --button-color: var(--primary-blue);
  --button-background: var(--primary-white-grey);
  --button-border: var(--primary-blue);
  --button-icon-fill: var(--primary-blue);
}
.button--type4:hover {
  --button-hover-background: var(--primary-blue);
  --button-hover-shadow: var(--primary-blue-opacity2);
}

/* BUTTON TYPE 5 */
.button--type5 {
  --button-color: var(--primary-grey5);
  --button-background: transparent;
  --button-border: var(--primary-grey-opacity2);
  --button-icon-fill: var(--primary-blue);
}

/* BUTTON TYPE 5 */
.button--type6 {
  --button-color: var(--primary-color);
  --button-background: var(--primary-white-grey);
  --button-border: var(--primary-white-grey2);
  --button-icon-fill: var(--primary-light-grey2);
}
.button--type6:hover {
  --button-hover-color: var(--primary-color);
  --button-hover-background: var(--primary-white-grey);
  --button-hover-border: var(--primary-blue);
  --button-hover-icon-fill: var(--primary-light-blue);
}
.button--type6:hover:active {
  --button-active-color: var(--primary-color);
  --button-active-background: var(--primary-white-grey);
  --button-active-border: var(--primary-blue);
  --button-active-icon-fill: var(--primary-light-blue);
}

/* SOCIALS */
.socials {
  display: flex;
  column-gap: 12px;
  align-items: center;
}
.socials .icon {
  --icon-size: 24px;
  --icon-fill: var(--primary-blue);
}
.socials a:hover .icon {
  --icon-fill: var(--primary-grey-blue);
}

.list {
  display: flex;
  row-gap: 20px;
  flex-direction: column;
}
.list__title {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  color: var(--primary-white-blue);
}
.list__items {
  display: flex;
  row-gap: 15px;
  flex-direction: column;
}
.list__item {
  padding-left: 14px;
  position: relative;
  font-size: 1rem;
}
.list__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  display: block;
  width: 4px;
  height: 4px;
  background-color: var(--primary-blue);
}
.list__item[data-marker="circle"]::before {
  border-radius: var(--radius-circle);
}

.text {
  font-size: var(--text-font-size, 1rem);
  font-weight: var(--text-font-weight, 400);
  font-family: var(--text-font-family, var(--font));
  line-height: var(--text-line-height, var(--leading-relaxed));   /* 1.2: проза 1.3→1.5 (читаемость длинных абзацев) */
  color: var(--text-color, var(--primary-color));

  @media screen and (max-width: 768px) {
    --text-font-size: 0.875rem;
  }
}
/* заголовки внутри прозы держим плотными — не наследуют просторный --leading-relaxed */
.text :is(h2, h3, h4) {
  line-height: var(--leading-tight);
}
.text ul {
  row-gap: 12px;
  padding-left: 28px;
}
.text ul li {
  list-style: disc;
}
.text li > ol {
  margin-top: 24px !important;
}
.text h2 {
  font-weight: var(--fw-semibold);
  font-size: 2rem;
  font-family: var(--font);
  color: var(--primary-color);
}
.text h3 {
  font-weight: var(--fw-semibold);
  font-size: 1.5rem;
  font-family: var(--font);
  color: var(--primary-color);
}
.text h4 {
  font-weight: var(--fw-semibold);
  font-size: 1.25rem;
  font-family: var(--font);
  color: var(--primary-color);
}
@media screen and (max-width: 768px) {
  :is(.text, .block-title) h2 {
    font-size: 1.25rem !important;
    text-align: left !important;
  }
  :is(.text, .block-title) h3 {
    font-size: 1rem !important;
    text-align: left !important;
  }
  :is(.text, .block-title) h4 {
    font-size: 1rem !important;
    text-align: left !important;
  }
}
.text blockquote {
  margin-top: 22px;
  margin-bottom: 32px;
  font-size: 0.875rem;
  font-weight: var(--fw-regular);

  padding: 24px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--primary-blue);
}
.text blockquote::before, .text blockquote::after {
  display: none;
}
.text blockquote p {
  margin: 12px 0;
}
.text blockquote p:first-child {
  margin-top: 0;
}
.text blockquote p:last-child {
  margin-bottom: 0;
}


.tooltip {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  /* margin-top: -12px; */
  margin-top: -24px;
  transform: translateX(-50%) translateY(100%);
  background-color: var(--tooltip-background, var(--primary-grey));
  border-radius: var(--radius-sm);
  padding: 12px 25px 16px 20px;
  color: var(--tooltip-color, var(--primary-white));
  font-weight: var(--fw-regular);
  font-size: 0.75rem;
  font-family: var(--font);
  line-height: 1.125rem;
  max-width: 320px;
}
.tooltip--right {

}
.tooltip__marker {
  width: 20px;
  height: 20px;
  rotate: 45deg;
  position: absolute;
  top: 2px;
  right: var(--tooltip-arrow-right, 12px);
  transform: translateY(-50%);
  background-color: var(--tooltip-background, var(--primary-grey));
}
.tooltip__marker--center {
  right: var(--tooltip-arrow-right, 50%);
}
.tooltip__marker--right {
  right: 12px;
  left: auto !important;
}


.video {
  z-index: 0;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
}
.video::before {
  content: '';
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
  pointer-events: none;
  background: radial-gradient(#3C4249, #182433);
}
.video img {
  display: block;
}
.video__control {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);

  display: flex;
  row-gap: 10px;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.video__play {
  width: 132px;
  height: 132px;
  z-index: 0;
  position: relative;
  border-radius: var(--radius-circle);
  overflow: hidden;
  border: 1px solid var(--primary-white);
  scale: 1;
  transition: scale .3s;
}
.video:hover .video__play {
  scale: 1.05;
}
.video__play::before {
  content: '';
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  opacity: 0.1;
  background-color: var(--primary-white);
}
.video__play::after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  backdrop-filter: blur(4px);
  border-radius: var(--radius-circle);
}
.video__play-icon {
  --icon-size: 24px;
  --icon-fill: var(--primary-blue);

  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -43px;
  margin-left: -43px;

  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  overflow: hidden;
  border: 1px solid var(--primary-blue);
  scale: 1;
  transition: scale .3s;
}
.video__play-icon::before {
  content: '';
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .53;
  background-color: var(--primary-white);
}
.video:hover .video__play-icon {
  scale: 1.1;
}
.video__play-icon .icon {
  scale: 1;
  transition: scale .3s;
}
.video:hover .video__play-icon .icon {
  scale: 1.5;
}
.video__caption {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-2);
  color: var(--primary-white);
}

/* ── Первый экран главной ───────────────────────────────────
   LPD-17 Э10: здесь жили правила видео-слайдера (.block-slider--home, .vb-wrap,
   .vb-desktop/.vb-mobile) и наложенного на него хиро (.home-hero*). Слайдера
   больше нет, разметка первого экрана переехала в собственный компонент —
   template/_blocks/hero/{index.twig,style.css}. Вместе с правилами ушли:
   четыре скрима на двух тёмных базах (#182433/#101620), чипы-плашки с
   backdrop-filter, собственные кнопки .home-hero__button со своей высотой и
   ховером мимо общего .button, и .block-slider--home .block-slider__scrollbar,
   гасивший скроллбар одного слайда через !important. */

/* ── LPD-17 Э5: ритм главной, скоуп body.page-home (⚠️ ТЗ §5.3) ──────────────
   #page-content-top — общая обёртка ВСЕХ страниц, а не только главной: снятие
   row-gap без скоупа обнулило бы вертикальный ритм каталога, карточки товара и
   всех инфостраниц. Отступы на главной несут сами секции (padding-block), иначе
   между двумя цветными полосами появлялась бы белая щель в 60px.
   Снятие скоупа — отдельным заходом по каждому шаблону, после того как блочные
   стили с собственным padding получат --section-y. */
body.page-home #page-content-top {
  row-gap: 0;
}
/* Нижнее поле страницы тоже приходит от последней секции — иначе 96px + 60px */
body.page-home #page {
  margin-bottom: 0;
}
/* Заголовки блоков внутри секций живут по --section-gap, а не по собственным 44px */
body.page-home .block-title:not(:last-child) {
  margin-bottom: var(--section-gap);
}
/* Подложку и поля блока отзывов на главной задаёт секция (.section--field).
   Скоуп обязателен: этот же блок стоит на карточке товара, L3 и /sobstvennoye-proizvodstvo/,
   где секции-обёртки пока нет и собственная подложка блока остаётся его отступами. */
body.page-home .reviews-carousel {
  padding-block: 0;
  background-color: transparent;
}

/* ── LPD-05 R5: ритм страницы «О компании», скоуп .page-about (⚠️ ТЗ LPD-17 §5.3) ──
   Вторая страница после главной, переведённая на паттерн секции. Скоуп — класс на
   самом #page (его ставит work_area через page_id), а не на body: body получает
   page-home только на главной, и для остальных шаблонов такого крючка нет.
   Класс page-information при этом сохранён — общие правила инфостраниц остаются.

   Снимать скоуп можно только вместе с переводом ОСТАЛЬНЫХ четырёх информационных
   страниц: у них секций нет, и обнуление row-gap схлопнуло бы их вёрстку в сплошную
   ленту без отступов. */
.page-about #page-container,
.page-about #page-content-top,
.page-about #page-content-bottom {
  row-gap: 0;
}
/* Верхнее поле первой секции — её собственный padding, иначе 20px + 96px */
.page-about #page-headline {
  margin-bottom: 0;
}
/* Нижнее поле страницы приходит от последней секции — иначе 96px + 60px */
#page.page-about {
  margin-bottom: 0;
}
/* Заголовки блоков внутри секций живут по --section-gap, а не по собственным 44px */
.page-about .block-title:not(:last-child) {
  margin-bottom: var(--section-gap);
}
/* Та же причина, что на главной: подложку и поля отзывам задаёт секция-обёртка.
   Без этого #F9FBFC блока встал бы второй светлой полосой сразу за сертификатами
   на --c-field #F4F8FB — два почти неразличимых серых поля подряд (§5.4). */
.page-about .reviews-carousel {
  padding-block: 0;
  background-color: transparent;
}
/* Блоки landing_blocks несут собственный ВЕРХНИЙ отступ (margin-top 44px, у --nav 28px)
   для страниц, где секций-обёрток ещё нет. Здесь поля даёт .section, и свой margin
   надо снять — иначе секция и блок складывают отступы. */
.page-about .seo-landing-blocks--in-section {
  margin-top: 0;
}
/* На категории --nav стоит ВНУТРИ узкой контентной колонки, поэтому обнуляет свой
   .container: второй контейнер там сузил бы строку чипов ещё раз. В секции всё
   наоборот — контейнер единственный, и без него чипы растянулись бы во всю ширину
   экрана, мимо сетки страницы. Возвращаем контейнеру обычное поведение. */
.page-about .seo-landing-blocks--nav.seo-landing-blocks--in-section .container {
  width: var(--container);
}
/* На категории шапка блока «Разделы каталога» разводит надзаголовок и заголовок по
   краям узкой контентной колонки — там между ними ~300px, и пара читается как одна
   строка. В секции во всю ширину (1416px) те же два элемента разлетаются к разным
   краям экрана и перестают быть связаны. Ставим их в колонку — это и есть порядок
   слотов паттерна секции: EYEBROW → HEADLINE (§5.1). */
.page-about .seo-landing-blocks--in-section .seo-related__head {
  display: grid;
  gap: 8px;
  justify-items: start;
}
/* Линия сверху отбивала блок от предыдущего в общей ленте. В секции отбивку делает
   смена подложки, и линия читается как случайная черта поперёк пустого поля. */
.page-about .seo-landing-blocks--in-section .seo-faq {
  padding-top: 0;
  border-top: 0;
}
/* Текст страницы: заголовок слева, проза справа. Колонка текста и так ограничена
   мерой строки (664px у .block-text__description) — без заголовка рядом она висела
   в левом углу полуторатысячного поля, и секция читалась как недогруженная. */
.page-about .about-copy__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.page-about .about-copy__body {
  min-width: 0;
}
/* Блок text несёт собственный верхний отступ для страниц без секций. */
.page-about .about-copy__body .block-text {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .page-about .about-copy__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
/* Заголовок «Каталог пиломатериалов» переведён на слоты .section__* (ТЗ §5.1):
   правила .home-catalog-heading* сняты вместе с разметкой — размер заголовка
   пришёл из шкалы (--h2-size), собственный 3rem больше не спорит с ней. */

/* LPD-17 Э6: страничные переопределения плиток сняты.
   Здесь жил ::before-скрим — градиент из --primary-white-grey (#F9FBFC) на левые
   68% КАЖДОЙ плитки с pointer-events:none. Он был нужен старой раскладке, где фото
   лежало абсолютом справа и подпирало текст: скрим гасил фото под текстом.
   В новой анатомии (медиа-полоса сверху, текст под ней) он накрывал фотографию
   и делал плитку «пустой» — причём невидимо для elementFromPoint из-за
   pointer-events:none, что и увело диагностику в сторону «дефекта отрисовки».
   Вместе со скримом сняты его спутники: узкое тело width:min(58%,380px),
   max-width:62% у медиа и object-fit:contain/right bottom у картинки —
   все они обслуживали ту же раскладку «текст слева, фото справа».
   Мобильные варианты этих же правил сняты ниже, в медиазапросе 768px. */
body.page-home .block-top_categories__title {
  line-height: 1.08;
}

@media (max-width: 768px) {
  /* LPD-17 Э10: мобильные правила первого экрана и высота слайдера сняты вместе
     с десктопными — см. комментарий выше. Ступень H1 первого экрана больше не
     своя: hero взял --h1-size из шкалы Э2, где нижняя граница clamp (34px) и так
     рассчитана на 320-390px. */

  /* LPD-17 Э6: мобильные скрим и узкое тело сняты вместе с десктопными —
     см. комментарий у основного блока правил плиток выше. */
  body.page-home .block-top_categories__title,
  .page-catalog .block-top_categories__title,
  .page-not-found .block-top_categories__title {
    line-height: 1.12;
  }

}

/* LPD-17 Э10 (ТЗ §8.4): правила круглой кнопки Play (.vb-play-*) сняты. Она стояла
   в правом нижнем углу первого экрана и делила этот угол с плавающей панелью
   контактов; при фоновом кадре она не нужна вовсе, а ссылка на ролик переехала
   текстом в строку фактов. */

/* Промежуточные ширины 769-1047px.

   Здесь стояло `html { min-width: 1048px }` — принудительный горизонтальный скролл
   с обоснованием «десктоп-шапка требует 1048px (7 несжимаемых блоков), планшетного
   макета у темы нет». Замер 06.08.2026 показал, что диагноз был неточен:

   - нижняя строка (#header_center, те самые 7 блоков) на 846px укладывается в 692px
     из 806 доступных — она НЕ была причиной. Ломался только #header_search: на него
     после фиксированных ширин и margin-left оставалось 18px, и поле схлопывалось
     в иконку;
   - реально не помещалась ВЕРХНЯЯ служебная полоса #header_top: её min-content 880px
     против 806px контейнера, из них 646px занимает #header_menu_top в одну строку.

   Диапазон 769-1047 — это iPad в портрете (810-834), половина экрана ноутбука и
   небольшие окна. Постоянный горизонтальный скролл там дороже, чем двухстрочная
   служебная полоса, поэтому правило снято, а раскладка чинится в самой шапке:
   catalog/view/theme/LESPROM/template/_blocks/header/style.css, блок «ПЛАНШЕТ». */

/* ── LPD-05 R5: страница «Собственное производство», скоуп .page-production ──
   Проза и ролик идут одним блоком text, который сам раскладывает их в строку
   «текст слева, видео справа» (.block-text__description--video). Здесь только
   ширина колонки ролика: базовые 45% / min-width 685px рассчитаны на
   ГОРИЗОНТАЛЬНОЕ видео, а этот ролик снят вертикально (720×1280) — при 685px
   он вырастает столбом в 1200px и отжимает текст в узкую щель.
   340px против 720px исходника — уменьшение, а не растяжение: постер остаётся
   резким. */
.page-production .block-text__description--video {
  /* Ролик к правому краю контейнера: между колонками остаётся воздух, а не
     хвост пустоты справа от видео. */
  justify-content: space-between;
}
.page-production .block-text__video {
  width: 420px;
  min-width: 0;
  flex: 0 0 auto;
  /* Проза здесь на 2000px, ролик — на 600px: без липкости правая колонка почти
     вся пустая, а доказательство уезжает с первого же экрана. Липким он держится
     рядом с текстом, который объясняет ровно то, что в нём снято. */
  position: sticky;
  top: 24px;
}
/* Мера строки: без видео её держит .block-text__description (68ch), а в
   раскладке с видео ограничение снято — колонка прозы иначе растянулась бы на
   всю оставшуюся ширину, до сотни знаков в строке. */
.page-production .block-text__videoText {
  max-width: 68ch;
}
/* Навигация по каталогу вынесена из контентной колонки вместе с остальными
   секциями (см. production.twig, регион CONTENT_BOTTOM), а модификатор --nav
   обнуляет собственный контейнер блока — он рассчитан на положение ВНУТРИ
   колонки, где ширину уже задал внешний контейнер (комментарий в
   _blocks/seo/landing_blocks/style.css). Вне колонки обнуление растягивает
   чипы на всю ширину экрана и уводит заголовок за правый край, поэтому здесь
   контейнер возвращается к своей ширине. На категориях и на четырёх других
   информационных страницах блок по-прежнему стоит в колонке и правила не
   касается. */
.page-production .seo-landing-blocks--nav > .container {
  width: var(--container);
  max-width: none;
  margin-inline: auto;
}

/* Съёмка цеха идёт кадрами 4:3 (720×540). Без фиксированной пропорции слайды
   разной высоты дёргают ленту при перелистывании. */
.page-production .production-shots .block-slider__image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1100px) {
  /* Компонент переводит связку в колонку только на 768px, а колонка прозы
     (68ch ≈ 680px) плюс ролик 420px перестают помещаться уже около 1140px —
     между 768 и 1100 страница получала горизонтальный скролл. Переводим в
     колонку раньше; ролик встаёт под текст и перестаёт быть липким, иначе он
     ехал бы вдоль ЧУЖИХ секций, которые идут ниже. */
  .page-production .block-text__description--video {
    flex-direction: column;
  }
  .page-production .block-text__video {
    position: static;
    width: 100%;
    max-width: 420px;
  }
}

@media screen and (max-width: 768px) {
  /* Компонент сам переводит связку в колонку; ролику остаётся снять ширину.
     Липкость на мобильном отменяется: во всю ширину ролик занимает 693px из
     844px экрана, и прилипнув, закрыл бы почти весь текст, ради которого
     прокручивают. */
  .page-production .block-text__video {
    width: 100%;
    position: static;
  }
}

/* ═══ 2026-08-10. Направления раздела строками (макет, вариант B) ═══════════════
   Плитки направлений на /pilomaterialy/ шли по одной на экран телефона и скакали
   по высоте от длины описания (замер: 270 / 270 / 290 / 290 px). Выбор направления
   — навигация, а не витрина: нужен перечень. Раскладка та же, что у каталога, чтобы
   два соседних уровня выбора не выглядели разными интерфейсами.
   Модификатор — только для направлений: породы ниже по странице остаются плитками,
   там медиа-зона осознанно работает числом (кадров у пород нет). */
.wood-tiles--rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wood-tiles--rows .wood-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;

  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--color-hairline);
  border-radius: 0;
  background: none;
}
.wood-tiles--rows .wood-tile:last-child {
  border-bottom: 0;
}
.wood-tiles--rows .wood-tile:hover,
.wood-tiles--rows .wood-tile:focus-visible {
  background: none;
  transform: none;
}

/* Медиа-зона превращается в квадратную миниатюру. Если кадра нет, внутри остаётся
   прежняя пара «число + подпись», просто в меньшем масштабе. */
.wood-tiles--rows .wood-tile__media {
  width: 88px;
  height: 88px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-field);
}
.wood-tiles--rows .wood-tile__media :is(img, picture) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wood-tiles--rows .wood-tile__count {
  font-size: var(--fs-20);
  line-height: 1;
}
.wood-tiles--rows .wood-tile__count-note {
  font-size: var(--fs-12);
  text-align: center;
}

.wood-tiles--rows .wood-tile__body {
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 3px;
}
.wood-tiles--rows .wood-tile__name {
  font-size: var(--fs-18);
}
.wood-tiles--rows .wood-tile__desc {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}

/* Подвал плитки становится правой колонкой: счётчик и стрелка. Слова «Смотреть
   позиции» здесь нет — вся строка и так ссылка, а число уже говорит, что внутри. */
.wood-tiles--rows .wood-tile__foot {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
.wood-tiles--rows .wood-tile__total {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 768px) {
  .wood-tiles--rows .wood-tile {
    column-gap: 12px;
    padding: 12px 0;
  }
  .wood-tiles--rows .wood-tile__media {
    width: 64px;
    height: 64px;
  }
  .wood-tiles--rows .wood-tile__name {
    font-size: var(--fs-16);
  }
  /* Описание на телефоне в одну строку: полный текст направления («Профиль под
     бревно для фасада, интерьера и бань») занимает три строки и ломает ритм. */
  .wood-tiles--rows .wood-tile__desc {
    font-size: var(--fs-13);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Число позиций уходит под описание: справа на 375px для него места нет. */
  .wood-tiles--rows .wood-tile__total {
    display: none;
  }
}

/* ═══ Мобильная пригодность форм (2026-08-27) ═══
   Safari на iOS увеличивает страницу при фокусе на поле, у которого кегль меньше 16px, и
   обратно уже не отдаляет: посетитель проваливался в увеличенный макет на каждом клике по
   поиску, количеству или полю формы. Тема наследует полям 0,88rem = 14px, поэтому кегль
   поднят до 16px на всех вводах телефонного диапазона. Кнопки, чекбоксы и радио не
   трогаем — зум они не вызывают, а их кегль задаёт вид кнопки. */
@media screen and (max-width: 768px) {
  /* Поля темы берут кегль из --field-text-fsize (search, text, password, textarea) —
     поднимаем переменную, а не перебиваем каждое правило по отдельности. */
  :root {
    --field-text-fsize: 1rem;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
  }
}

/* ═══ Цели касания на телефоне (2026-08-27) ═══
   Ссылки-действия темы набирали 16–24px по высоте — в них трудно попасть пальцем.
   Область увеличена вертикальным padding и min-height, а не кеглем: внешний вид строки
   остаётся прежним, растёт только зона нажатия. Там, где padding сдвинул бы ритм, он
   компенсирован отрицательным margin контейнера. */
@media screen and (max-width: 768px) {
  .breadcrumbs {
    margin-block: -8px;
  }

  .breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-block: 8px;
  }

  .reviews-page__sort a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding-block: 7px;
  }

  /* Степпер и «Купить в 1 клик» — основные действия карточки: им полные 44px. */
  .offer-card__stepper {
    height: 44px;
  }

  .offer-card__quick {
    min-height: 44px;
  }

  .basket-empty__login,
  .product-back-level__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* ═══ Служебные страницы OpenCart (2026-08-27) ═══
   У темы LESPROM нет своих шаблонов для регистрации, восстановления пароля, адресов,
   заказов, возвратов, карты сайта и сравнения — они отдаются из темы `default` с
   bootstrap-разметкой, а bootstrap в проект не подключён. Итог: голый HTML — подписи
   строчками, поля без рамок, кнопки-ссылки высотой 18px; на телефоне такая страница
   выглядит сломанной. Слой ниже приводит эту разметку к виду темы и делает её пригодной
   для пальца. Классы (.form-control, .btn, .form-group, .col-sm-*) в шаблонах LESPROM не
   встречаются ни разу — слой не задевает остальной сайт.
   ⚠️ Это база, а не перенос страниц в дизайн темы: своих шаблонов у них по-прежнему нет. */
#content .form-horizontal fieldset,
#content form fieldset {
  margin-bottom: 28px;
}

#content legend {
  display: block;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-hairline, var(--color-border));
  font-family: var(--font-2);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

#content .form-group {
  margin-bottom: 16px;
}

#content .control-label {
  display: block;
  margin-bottom: 6px;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

#content .form-group.required > .control-label::after {
  content: " *";
  color: var(--color-accent-strong);
}

#content .form-control {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  /* 16px, а не .875rem: меньший кегль заставляет Safari на iOS увеличивать страницу при
     фокусе (см. блок «Мобильная пригодность форм»). */
  font-family: var(--font);
  font-size: 16px;
  color: var(--color-text);
}

#content select.form-control {
  padding-right: 10px;
}

#content textarea.form-control {
  min-height: 128px;
  resize: vertical;
}

#content .form-control:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

#content .radio,
#content .checkbox,
#content .radio-inline,
#content .checkbox-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

#content .radio label,
#content .checkbox label,
#content .radio-inline,
#content .checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#content .radio input,
#content .checkbox input,
#content .radio-inline input,
#content .checkbox-inline input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--color-accent);
}

#content .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: auto;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
}

#content .btn-primary,
#content input[type="submit"].btn {
  background-color: var(--color-accent);
  color: var(--primary-white);
}

#content .btn-default {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Отклик на наведение и видимый фокус: без них кнопка выглядит нарисованной, а с клавиатуры
   по форме не пройти — куда встал курсор, не видно. */
#content .btn-primary:hover,
#content input[type="submit"].btn:hover {
  background-color: var(--color-accent-strong);
}

#content .btn-default:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-field);
}

#content .btn:focus-visible,
#content li > a:focus-visible,
#content ul.breadcrumb a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* .pull-left / .pull-right — bootstrap-овские float; без его сетки они склеивали кнопки
   в одну строку без просвета. Ряд кнопок раскладывается флексом и переносится. */
#content .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

#content .buttons .pull-left,
#content .buttons .pull-right {
  float: none;
}

#content .buttons .pull-right {
  margin-left: auto;
}

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

#content .table td,
#content .table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-hairline, var(--color-border));
  text-align: left;
  vertical-align: top;
  /* В таблицах заказов и возвратов колонки сумм и количеств: моноширинные цифры держат
     разряды друг под другом. */
  font-variant-numeric: tabular-nums;
}

#content .table-responsive {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

#content .panel {
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, var(--radius-md));
  background-color: var(--color-surface);
}

#content .panel-heading {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-hairline, var(--color-border));
  font-weight: var(--fw-semibold);
}

#content .panel-body {
  padding: 16px;
}

#content .well {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-field);
}

#content .text-danger {
  display: block;
  margin-top: 6px;
  font-size: .8125rem;
  color: #C0392B;
}

#content .help-block {
  margin-top: 6px;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* Карта сайта и списки ссылок OpenCart: без bootstrap они шли сплошным столбцом строк по
   22px — попасть пальцем в нужную нельзя. Вложенные списки получают отступ, ссылки —
   полноценную цель касания. */
/* :has() — чтобы маркеры пропадали только у списков-навигации (карта сайта, перечни
   ссылок), а обычный маркированный список в тексте служебной страницы остался списком. */
#content ul:has(> li > a) {
  list-style: none;
}

#content ul ul {
  padding-left: 16px;
}

#content li > a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  /* max-width обязателен: inline-flex сжимается по содержимому, и на 320px длинные пункты
     карты сайта («Доска пола (Европанель)») уезжали за правый край экрана. */
  max-width: 100%;
  color: var(--color-text);
  text-decoration: none;
}

#content li > a:hover {
  color: var(--color-accent-strong);
}

/* Первая крошка OpenCart — иконка FontAwesome, а шрифта иконок в проекте нет: пункт
   выходил пустым, и перед следующим висел «осиротевший» разделитель. */
ul.breadcrumb .fa-home::before {
  content: "Главная";
  font-style: normal;
}

@media screen and (min-width: 769px) {
  /* На десктопе подпись возвращается в левую колонку, как задумано bootstrap-сеткой. */
  #content .form-horizontal .form-group {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 20px;
    align-items: start;
  }

  #content .form-horizontal .control-label {
    padding-top: 14px;
    margin-bottom: 0;
  }
}

/* Крошки OpenCart (ul.breadcrumb) — на служебных страницах они шли столбиком без
   разделителей. Приводим к строке, как в .breadcrumbs темы. */
ul.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 12px;
  list-style: none;
  font-size: .75rem;
  color: var(--color-text-muted);
}

ul.breadcrumb > li + li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
  margin-right: 12px;
  vertical-align: middle;
  background-color: var(--color-border);
}

ul.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-muted);
  text-decoration: none;
}

ul.breadcrumb a:hover {
  color: var(--color-accent-strong);
}

/* ═══ Защита пользовательского контента (2026-08-27) ═══
   Описания товаров и информационных страниц приходят из админки, и в них попадает
   копипаста с чужой вёрсткой — например, кусок письма Яндекс.Почты с инлайновым
   `width: 435px`. На 390px такой фрагмент вылезал за контейнер. max-width (не width) не
   трогает нормальную вёрстку и обрезает только тех, кто задал себе ширину сам. */
.block-text__description *,
.seo-text__body * {
  max-width: 100%;
}

.block-text__description img,
.seo-text__body img {
  height: auto;
}

/* Слипшиеся слова из админки («…ПРОЧНОСТИ.ДЛЯ НАРУЖНЫХ…», пропущен пробел после точки)
   образуют «слово» шире колонки и прижимают строку к краю экрана. break-word ломает такое
   только когда оно само не помещается. */
.block-text__description,
.seo-text__body {
  overflow-wrap: break-word;
}

/* ═══ Отклик на касание (2026-08-27) ═══
   touch-action: manipulation отключает у интерактивных элементов ожидание двойного тапа
   (браузер держит паузу, проверяя, не будет ли второго касания для зума) — нажатие
   срабатывает сразу. Панорамирование и pinch-zoom страницы при этом сохраняются, то есть
   доступность не страдает: масштабирование по-прежнему разрешено.
   Карта исключена: у Яндекс-карты собственные жесты, и свой touch-action она ставит сама. */
a,
button,
[role="button"],
input:not([type="range"]),
select,
textarea,
summary,
label {
  touch-action: manipulation;
}

.map a,
.map button,
.map [class*="ymaps"] {
  touch-action: auto;
}

/* https://www.krasnodar.lespromdom.ru/catalog/view/theme/LESPROM/assets/css/theme.css */
/* Блок: Заголовок */
.block-title {
  --swiper-navigation-size: 0;

  font-size: var(--title-font-size, 2.5rem);
  font-weight: var(--title-font-weight, 700);
  font-family: var(--title-font-family, var(--font-2));
  color: var(--title-color, var(--primary-color));

  @media screen and (max-width: 768px) {
    --title-font-size: 1.25rem;
  }
}
.block-title:not(:last-child) {
  margin-bottom: 44px;
}
.block-title > .container {
  display: flex;
  column-gap: 30px;
  align-items: center;
}
.block-title__text {
  width: 100%;
  display: flex;
  column-gap: 22px;
  align-items: center;
}
.block-title__text > * {
  margin: 0;
}
/* Заголовок — flex-item, а у flex-item min-width по умолчанию auto: он не сжимается ниже
   самого длинного слова. На 390px «Политика конфиденциальности» распирала строку до 483px
   и слово уезжало за правый край экрана. min-width:0 разрешает сжатие, break-word и
   переносы (html lang="ru") делят слово, когда оно само шире колонки. */
.block-title__text > :is(h1, h2, h3, h4) {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.block-title__text span {
  font-weight: var(--fw-regular);
  font-size: 0.875rem;
  font-family: var(--font);
  color: var(--primary-grey5);
  margin-left: 16px;
  display: inline-block;
}
.block-title__icon {
  --icon-size: 100%;
  height: 100%;
}
.block-title__link {
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  font-family: var(--font);
  height: 100%;
  margin-left: 10px !important;
  /* margin-top: auto !important; */
  margin-bottom: 7px !important;
  align-self: end;
  align-self: flex-end;

  @media screen and (max-width: 768px) {
    display: none;
  }
}
.block-title__buttons {  
  margin-left: auto;
  display: flex;
  column-gap: 24px;
  align-items: center;

  @media screen and (max-width: 768px) {
    display: none;
  }
}
.block-title .swiper-button-prev {
  position: initial;
}
.block-title .swiper-button-prev::after {
  display: none;
}
.block-title .swiper-button-prev .icon {
  --icon-width: 24px;
}
.block-title .swiper-button-next {
  position: initial;
}
.block-title .swiper-button-next::after {
  display: none;
}
.block-title .swiper-button-next .icon {
  --icon-width: 49px;
}
.block-title__right {
  margin-left: auto;
  display: flex;
  column-gap: 20px;
  align-items: center;

  @media screen and (max-width: 768px) {
    display: none;
  }
}

/* Блок: Описание */
.block-text {
  display: flex;
  row-gap: 30px;
  flex-direction: column;
}
.block-text__title {
  margin-bottom: 40px;

  @media screen and (max-width: 768px) {
    margin-bottom: 14px;
  }
}
.block-text__description {
  height: auto;
}
/* 1.2: длина строки прозы 60–80 знаков (~68ch ≈ 72 рус-символа при Manrope 16px);
   video-раскладка исключена — там колонка с видео шире и своя сетка */
.block-text__description:not(.block-text__description--video) {
  max-width: 68ch;
}
.block-text__description--video {
  display: flex;
  row-gap: 20px;
  column-gap: 36px;
  align-items: start;

  @media screen and (max-width: 768px) {
    flex-direction: column;
  }
}
.block-text__videoText {
  width: 100%;
}
.block-text__video {
  width: 45%;
  min-width: 685px;

  @media screen and (max-width: 768px) {
    width: 100%;
    min-width: auto;
  }
}
/* LPD-17 Э7 (ТЗ §5.5, стр. 7): полоса партнёров.
   Логотипы приходят разной высоты и веса, поэтому каждый ставится в общий бокс
   140×48 и вписывается по contain; в покое обесцвечены, цвет возвращается на
   наведении — полоса перестаёт спорить с содержательными блоками страницы. */
.block-partners .block-slider__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-partners .block-slider__image {
  width: 140px;
  height: 48px;
}
.block-partners .block-slider__image :is(img, picture) {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .2s ease, opacity .2s ease;
}
.block-partners .block-slider__image:hover :is(img, picture) {
  filter: grayscale(0);
  opacity: 1;
}

/* LPD-17 Э7 (ТЗ §6.5): свёртка длинного текста — на CSS.
   Было: высота выставлялась скриптом pxl.MoreText через setTimeout(1000), до
   срабатывания которого текст стоял раскрытым и потом схлопывался скачком.
   Теперь состояние держит чекбокс, а видимую часть — max-height с маской.
   :has() читает состояние вверх по дереву, поэтому порядок разметки менять
   не пришлось (тот же приём уже работает в common.css на пустых контейнерах). */
.block-text--more .block-text__description {
  /* Клэмп по строкам, а не по пикселям: короткий текст тогда просто не обрезается,
     и маска не съедает его нижнюю строку (жёсткий max-height именно этим и плох —
     он затемняет низ даже там, где обрезать нечего). */
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.block-text--more:has(.block-text__toggle:checked) .block-text__description {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Маска-затухание — только там, где текст заведомо длинный (split-раскладка
   нижнего SEO-блока). В общем случае блок со свёрткой вызывается и на коротких
   описаниях (карточка товара, покупки, отзывы), а маска на невыросшем тексте
   гасила бы его последнюю строку без причины. */
.block-text--split.block-text--more:not(:has(.block-text__toggle:checked)) .block-text__description {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent 100%);
}
/* Сам переключатель невидим, но остаётся в tab-порядке: display:none выбросил бы
   его оттуда — ровно тот дефект, что описан в §2 п. 24 ТЗ про чекбоксы форм. */
.block-text__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.block-text__more {
  width: max-content;
  margin-left: auto;
  margin-top: 20px;
  display: flex;
  column-gap: 8px;
  align-items: center;
  min-height: 44px; /* WCAG 2.5.5 */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  color: var(--color-accent-strong);
  cursor: pointer;
}
.block-text__more .icon {
  --icon-size: 13px;
  --icon-fill: currentColor;

  order: 2;
}
.block-text__more-text::before {
  content: attr(data-open);
}
.block-text--more:has(.block-text__toggle:checked) .block-text__more-text::before {
  content: attr(data-close);
}
.block-text--more:has(.block-text__toggle:checked) .block-text__more .icon {
  transform: scale(1, -1);
}
.block-text__toggle:focus-visible + .block-text__more {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Две колонки: заголовок слева, проза справа (ТЗ §6.5). Заголовок липкий —
   при длинном тексте он остаётся ориентиром, а не уезжает вверх. */
.block-text--split > .container {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: 64px;
  align-items: start;
}
.block-text--split .block-text__title {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 24px;
  margin-bottom: 0;
}
/* Заголовок блока несёт собственный .container с шириной страницы — внутри
   колонки её нужно снять, иначе H2 вылезает на колонку прозы. Кегль в узкой
   колонке на ступень ниже дисплейного: 40px там переполняет строку одним словом. */
.block-text--split .block-text__title {
  --title-font-size: var(--fs-28);
}
.block-text--split .block-text__title .block-title > .container {
  width: 100%;
  padding: 0;
}
/* Сам заголовок — на ступень ниже: h2 несёт собственный --h2-size из normalize,
   и переменной блока его не перебить. */
.block-text--split .block-text__title :is(h1, h2, h3, h4) {
  font-size: var(--fs-28);
  overflow-wrap: break-word;
  line-height: var(--leading-tight);
}
.block-text--split .block-text__description {
  grid-column: 2;
  grid-row: 1;
}
/* Действие живёт под своей колонкой прозы, а не у правого края страницы */
.block-text--split .block-text__more {
  grid-column: 2;
  grid-row: 2;
  margin-left: 0;
}

@media screen and (max-width: 991px) {
  .block-text--split > .container {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .block-text--split .block-text__title {
    position: static;
    grid-column: 1;
  }
  .block-text--split .block-text__description,
  .block-text--split .block-text__more {
    grid-column: 1;
  }
  .block-text--split .block-text__description {
    grid-row: 2;
  }
  .block-text--split .block-text__more {
    grid-row: 3;
  }
}

/* Палитра цветов */
.product-palitra {
  --button-padding: 0 18px 0 30px;

  @media screen and (max-width: 768px) {
    /* display: none; */
  }
}
.product-palitra .icon--faq {
  order: 2;
}
.product-palitra .icon--palitra {
  order: 3;
  margin-left: auto;
}
.product-palitra--selected {
  background-image: none;
  background-repeat: no-repeat;
  background-size: cover;
}
.product-palitra--selected * {
  /* opacity: 0; */
  display: none;
}
.product-palitra--selected::before {
  content: attr(data-palitra-color-name);
  width: 100%;
  color: var(--primary-color);
  text-shadow: -0 -1px 1px var(--primary-white),
                0 -1px 1px var(--primary-white),
               -0 1px 1px var(--primary-white),
                0 1px 1px var(--primary-white),
               -1px -0 1px var(--primary-white),
                1px -0 1px var(--primary-white),
               -1px 0 1px var(--primary-white),
                1px 0 1px var(--primary-white),
               -1px -1px 1px var(--primary-white),
                1px -1px 1px var(--primary-white),
               -1px 1px 1px var(--primary-white),
                1px 1px 1px var(--primary-white),
               -1px -1px 1px var(--primary-white),
                1px -1px 1px var(--primary-white),
               -1px 1px 1px var(--primary-white),
                1px 1px 1px var(--primary-white);
  /* -webkit-text-stroke: 1px var(--primary-white); */
}

#palitra-list {
  display: grid;
  row-gap: 16px;
  column-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  padding: 8px 8px 16px;
}
#palitra-list .palitra-item {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  z-index: 0;
  position: relative;
  cursor: pointer;
}
#palitra-list .palitra-item * {
  opacity: 1;
  transition: opacity .3s;
}
#palitra-list .palitra-item:hover {
  box-shadow: 0 6px 8px 0 rgba(25, 131, 186, .35);
}
#palitra-list .palitra-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#palitra-list .palitra-item span {
  z-index: 1;
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  display: block;
  padding: 6px;
  background-color: #fff;
  font-size: 0.5rem;
  text-align: center;
}
#palitra-list .palitra-item__noimage {
  width: 100%;
  height: 100%;
  border: 1px solid var(--primary-blue);
}
#palitra-list .palitra-item--selected {
  /* pointer-events: none; */
}
#palitra-list .palitra-item--selected:before{
  content: '\2713';
  display: inline-block;
  color: var(--primary-blue);
  font-size: 2.5rem;
  
  left: 50%;
  top: 50%;
  z-index: 2;
  position: absolute;
  transform: translate(-50%, -50%);
}
#palitra-list .palitra-item--selected * {
  opacity: .5;
}

/* Акции */
.specials {
  display: grid;
  row-gap: 24px;
  column-gap: 24px;
  grid-template-columns: repeat(2, 1fr);

  @media screen and (max-width: 480px) {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Форма для редактирования данных пользователя */
.account-change-data .field {
  --field-text-fsize: 1rem;
  --field-placeholder: var(--color-placeholder);
  --field-text-background: var(--primary-white-grey4);
}