/* Шрифты с нашего сервера (раньше грузились с fonts.googleapis.com — это передача IP посетителя в Google до согласия).
   Oswald и Manrope — лицензия SIL OFL, самохостинг разрешён. Собрано из Google Fonts css2, наборы cyrillic(-ext), latin(-ext). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/manrope-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/manrope-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/manrope-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   КАТЕР НН — дизайн-система
   Палитра: белый фон / чёрный текст / жёлтые акценты + цвета вселенной BRP
   Шрифты: Intro → Bebas Neue Cyrillic → Oswald (заголовки), Manrope (текст)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ШРИФТЫ
   Oswald подключается из Google Fonts в <head> каждой страницы и работает сразу.
   Если у вас есть лицензионные файлы Intro или Bebas Neue Cyrillic — положите их
   в папку fonts/ с именами ниже, и они автоматически станут основными.
   -------------------------------------------------------------------------- */
/* Блоки @font-face отключены: файлов Intro и Bebas Neue Cyrillic пока нет,
   и браузер запрашивал их впустую на каждой загрузке каждой страницы —
   по четыре ошибки 404 в консоли. Сейчас работает Oswald (см. fonts/README.md).

   Положите файлы в папку fonts/ и раскомментируйте нужный блок —
   шрифт подхватится автоматически, остальной код менять не нужно.

@font-face{
  font-family: "Intro";
  src: url("../fonts/Intro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face{
  font-family: "Bebas Neue Cyrillic";
  src: url("../fonts/BebasNeueCyrillic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
*/

:root{
  /* База */
  --white: #ffffff;
  --black: #0a0a0a;
  --ink: #141414;
  --gray-900: #2b2b2b;
  --gray-600: #6e6e6e;
  --gray-300: #d6d6d6;
  --gray-100: #f2f2f0;
  --gray-50: #f8f8f6;

  /* Акцент */
  --yellow: #ffcb05;          /* основной жёлтый акцент */
  --yellow-deep: #f0b800;
  --yellow-soft: #fff4c2;
  --red: #e01f26;             /* акцент для NEW / скидок */

  /* Вселенная BRP */
  --skidoo: #ffcb05;          /* Ski-Doo — фирменный жёлтый */
  --canam: #ffb81c;           /* Can-Am — янтарно-жёлтый */
  --seadoo: #0097d7;          /* Sea-Doo — синий */
  --lynx: #d81f26;            /* Lynx — красный */
  --marine: #0b2e4f;          /* катера — глубокий морской */

  /* Типографика */
  --font-display: "Intro","Bebas Neue Cyrillic","Oswald","Arial Narrow",sans-serif;
  --font-body: "Manrope","Helvetica Neue",Arial,sans-serif;

  --radius: 4px;
  --radius-lg: 10px;
  --container: 1280px;
  --shadow: 0 4px 24px rgba(10,10,10,.07);
  --shadow-lg: 0 18px 50px rgba(10,10,10,.14);
}

/* --------------------------------------------------------------------------
   ИКОНКИ
   Строго SVG, без эмодзи: эмодзи выглядят по-разному в разных ОС, а флаги
   в Windows вообще не отрисовываются (показываются буквами «US», «CA»).
   Иконки лежат в SVG-спрайте в начале <body> каждой страницы.
   -------------------------------------------------------------------------- */
.ico{
  width:1em; height:1em;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}
.icon-sprite{ display:none; }

/* Флаги стран поставки */
.country-badges{ display:flex; gap:12px; flex-shrink:0; }
/* У флагов разные пропорции: США 1,9:1, Канада 2:1, Россия 3:2. Общая
   рамка 2:1 обрезала российский флаг сверху и снизу — красная полоса
   становилась вдвое тоньше синей. Поэтому задаём только высоту, а ширину
   каждый флаг берёт свою. */
/* width:fit-content, а не auto: у блочного элемента auto означает «занять всю
   доступную ширину», рамка получалась чуть шире картинки, и object-fit:contain
   дописывал сверху и снизу белые полоски. Теперь рамка обтягивает флаг. */
.country-flag{
  display:block; height:40px; width:fit-content; overflow:hidden;
  border:2px solid var(--black); border-radius:10px; background:var(--white);
}
.country-flag img{ height:100%; width:auto; display:block; }

*, *::before, *::after{ box-sizing: border-box; }
/* Атрибут hidden должен скрывать элемент всегда: у .btn, .cart-total и других
   компонентов есть свой display:flex, который иначе перебивает hidden. */
[hidden]{ display:none !important; }
html{ scroll-behavior: smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

/* --------------------------------------------------------------------------
   ТИПОГРАФИКА
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  margin:0;
  font-family: var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  /* .95 обрезал бы "хвосты" у Д/Ц/Щ этого шрифта текстом под заголовком —
     1.08 достаточно тесно для крупного дисплейного начертания и не клипует. */
  line-height:1.08;
  letter-spacing:.005em;
}
/* balance выравнивает строки заголовка, чтобы последнее слово не висело одно */
.display-1{ font-size: clamp(38px, 5.4vw, 74px); text-wrap: balance; }
.display-2{ font-size: clamp(32px, 4.6vw, 62px); text-wrap: balance; }
.display-3{ font-size: clamp(26px, 3vw, 40px); }
.display-4{ font-size: clamp(20px, 2vw, 26px); }

.eyebrow{
  display:inline-block;
  font-family: var(--font-body);
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--gray-600);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:22px; height:2px;
  background: var(--yellow);
  vertical-align:middle;
  margin-right:10px;
  margin-bottom:3px;
}
.lead{ font-size:18px; color: var(--gray-900); line-height:1.6; }

/* Юридические страницы (политика, согласие) — узкая колонка длинного текста */
.legal-page__text{ max-width:760px; }
.legal-page__text h2{
  font-size:24px; margin-top:44px; margin-bottom:16px;
  font-family: var(--font-display); letter-spacing:.01em;
}
.legal-page__text h2:first-child{ margin-top:0; }
.legal-page__text p{ font-size:15px; line-height:1.7; color: var(--gray-900); margin-bottom:14px; }
.legal-page__text a{ color: var(--black); text-decoration:underline; text-underline-offset:2px; }
.muted{ color: var(--gray-600); }

/* --------------------------------------------------------------------------
   СЕТКА
   -------------------------------------------------------------------------- */
.container{ max-width: var(--container); margin:0 auto; padding:0 28px; }
.section{ padding: 96px 0; }
.section--sm{ padding: 56px 0; }
.section--gray{ background: var(--gray-50); }
.section--black{ background: var(--black); color: var(--white); }
.section--yellow{ background: var(--yellow); }

.section-head{ max-width:760px; margin-bottom:52px; }
.section-head--split{
  max-width:none; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.section-head--split h2{ margin:0; }
.catalog-section + .catalog-section{ border-top:1px solid var(--gray-300); }
.section-head h2{ font-size: clamp(32px, 4.6vw, 62px); }   /* размер по умолчанию для заголовков секций */
.section-head .lead{ margin-top:16px; }
.section--black .section-head .lead{ color:#b9b9b5; }
.section--black .eyebrow{ color:#8f8f8a; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.text-center{ text-align:center; margin-left:auto; margin-right:auto; }
.mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; }

/* --------------------------------------------------------------------------
   КНОПКИ
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 32px;
  font-family: var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:2px solid transparent;
  border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ transform: translateY(-2px); }

/* Кнопки действия («Заказать», «Купить», «Отправить», «Оставить заявку») —
   на ховере набирают жёлтое свечение позади. «Подробнее» (btn-outline)
   свечения не получает: это второстепенное действие, не обязательство. */
.btn-primary, .btn-dark{ position: relative; isolation: isolate; }
.btn-primary::before, .btn-dark::before{
  content:""; position:absolute; inset:-9px; z-index:-1;
  border-radius: calc(var(--radius) + 9px);
  background: var(--yellow);
  filter: blur(16px);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.btn-primary:hover::before, .btn-dark:hover::before{ opacity:.6; }
@media (prefers-reduced-motion: reduce){
  .btn-primary::before, .btn-dark::before{ transition:none; }
}

.btn-primary{ background: var(--yellow); color: var(--black); }
.btn-primary:hover{ background: var(--black); color: var(--yellow); }
.btn-dark{ background: var(--black); color: var(--white); }
.btn-dark:hover{ background: var(--yellow); color: var(--black); }
.btn-outline{ background: transparent; color: var(--black); border-color: var(--black); }
.btn-outline:hover{ background: var(--black); color: var(--white); }
.btn-outline.on-dark{ color: var(--white); border-color:#4a4a4a; }
.btn-outline.on-dark:hover{ background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.btn-sm{ padding:12px 20px; font-size:14px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
/* Три кнопки страницы товара в одном блоке вместо двух с лишним отступом
   между ними: первые две делят строку, WhatsApp — во всю ширину под ними. */
.btn-row--3 > .btn:nth-child(1),
.btn-row--3 > .btn:nth-child(2){ flex:1 1 calc(50% - 8px); }
.btn-row--3 > .btn:nth-child(3){ flex:1 1 100%; }

/* --------------------------------------------------------------------------
   ШАПКА
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--gray-300);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 28px; }

.logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
/* Логотип-картинка. Файл: images/logo.svg (или .png).
   Пока файла нет, main.js подставляет текстовый вариант — сайт не ломается. */
.logo-img{ height:46px; width:auto; max-width:230px; object-fit:contain; }
.site-footer .logo-img{ height:52px; max-width:250px; }
.logo-fallback{ display:flex; align-items:center; gap:12px; }
.logo-fallback[hidden]{ display:none; }
.logo-mark{
  width:46px; height:46px;
  background: var(--black);
  color: var(--yellow);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:20px; letter-spacing:.02em;
  border-radius: var(--radius);
  flex-shrink:0;
}
.logo-text b{
  display:block;
  font-family: var(--font-display);
  font-size:23px; font-weight:700; line-height:1;
  letter-spacing:.03em;
}
.logo-text span{
  display:block; font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--gray-600); margin-top:3px;
}

/* min-width:0 — чтобы меню при нехватке места сжималось вместе с шапкой,
   а не выдавливало последний пункт за правый край. */
.main-nav{ display:flex; align-items:center; gap:2px; position:relative; min-width:0; }
.main-nav > a, .nav-drop > a{
  font-family: var(--font-body);
  font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 15px; position:relative; z-index:1; white-space:nowrap;
  border-radius:999px;
  transition: color .2s ease;
}
.main-nav > a:hover, .nav-drop > a:hover, .main-nav a.active{ color: var(--black); }

/* «Лампа»: подсветка, переезжающая за курсором между пунктами меню.
   Позицию считает js/main.js, здесь только внешний вид и плавность. */
.nav-lamp{
  position:absolute; top:0; left:0; z-index:0;
  height:100%; border-radius:999px;
  background: var(--yellow-soft);
  opacity:0;
  transition:
    transform .42s cubic-bezier(.34, 1.4, .5, 1),
    width     .42s cubic-bezier(.34, 1.4, .5, 1),
    opacity   .22s ease;
  pointer-events:none;
}
.nav-lamp.is-on{ opacity:1; }

/* Светящаяся полоска сверху — то, что делает эффект «лампой», а не просто пилюлей */
.nav-lamp::before{
  content:"";
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:38%; height:4px;
  background: var(--yellow);
  border-radius:0 0 4px 4px;
}
.nav-lamp::after{
  content:"";
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:62%; height:22px;
  background: var(--yellow);
  border-radius:50%;
  filter: blur(11px);
  opacity:.55;
}
.nav-drop{ position:relative; }
.nav-drop__chevron{
  width:10px; height:10px; margin-left:5px; vertical-align:1px;
  transform:rotate(90deg); transition: transform .2s ease;
}
.nav-drop:hover .nav-drop__chevron,
.nav-drop.open .nav-drop__chevron{ transform:rotate(-90deg); }
.nav-drop-panel{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%);
  background: var(--black); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:20px 12px; min-width:264px;
  text-align:center;
  opacity:0; visibility:hidden; translate:0 8px; transition:.18s ease;
}
.nav-drop:hover .nav-drop-panel,
.nav-drop.open .nav-drop-panel{ opacity:1; visibility:visible; translate:0 0; }
.nav-drop-panel a{
  display:block; padding:13px 20px; margin:2px 0; border-radius: var(--radius);
  font-family: var(--font-display); font-size:16px; letter-spacing:.03em;
  text-transform:uppercase; color: var(--white);
}
.nav-drop-panel a::after{ display:none; }
.nav-drop-panel a:hover{ color: var(--yellow); }

.header-actions{ display:flex; align-items:center; gap:12px; }
.phone-link{
  font-family: var(--font-display); font-size:20px; letter-spacing:.02em;
  white-space:nowrap; padding-bottom:2px;
  border-bottom:3px solid var(--yellow);
}
.icon-btn{
  width:40px; height:40px; border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:1px solid var(--gray-300); font-size:11px; font-weight:800;
  transition:.18s ease;
}
.icon-btn.wa{ background:#25d366; border-color:#25d366; color:#fff; }
.icon-btn.tg{ background:#2aabee; border-color:#2aabee; color:#fff; }
/* Кнопка-телефон нужна только там, где номер текстом не помещается */
.icon-btn.call{ display:none; background: var(--black); border-color: var(--black); color: var(--yellow); }

/* Корзина в шапке. Добавляется в JS (js/cart.js) на всех страницах,
   поэтому в разметке .header-actions её нет — верстать её вручную
   в каждом из 12 файлов было бы лишним источником рассинхрона. */
.cart-btn{ position:relative; background: var(--white); border-color: var(--gray-300); color: var(--black); }
.cart-btn:hover{ background: var(--yellow-soft); }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background: var(--red); color:#fff;
  font-size:10.5px; font-weight:800; line-height:18px; text-align:center;
}
.cart-badge[hidden]{ display:none; }
.icon-btn:hover{ transform:translateY(-2px); }
.icon-btn svg{ width:21px; height:21px; display:block; }


/* --------------------------------------------------------------------------
   ГЕРОЙ
   -------------------------------------------------------------------------- */
.hero{ padding: 72px 0 88px; }
.hero-grid{ display:grid; grid-template-columns: 1.12fr .88fr; gap:56px; align-items:center; }
/* Чуть больше интерлиньяжа: при line-height < 1 жёлтый маркер наезжает на соседнюю строку */
.hero h1{ margin-bottom:28px; line-height:1.08; }
.hero .lead{ max-width:560px; }

/* Полоса преимуществ под героем — раньше стояла внутри узкой колонки, теперь во всю ширину */
.hero-usp{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:0; }
.hero-usp-item{ display:flex; gap:14px; align-items:flex-start; }
.hero-usp-item .ic{
  width:44px; height:44px; flex-shrink:0;
  background: var(--yellow); color: var(--black);
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--radius); font-size:19px;
}
.hero-usp-item p{ font-size:14.5px; font-weight:700; line-height:1.35; }

.hero-cta-note{ font-weight:800; font-size:15px; margin-bottom:18px; }

/* Строка цифр под кнопками героя */
.hero-stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.hero-stat{
  flex:1 1 0; min-width:148px;
  display:flex; flex-direction:column; gap:5px;
  padding:16px 18px;
  border:2px solid var(--black); border-radius: var(--radius-lg);
  background: var(--white);
  transition: background-color .16s ease, transform .16s ease;
}
.hero-stat:hover{ background: var(--yellow-soft); transform: translateY(-2px); }
.hero-stat b{ font-family: var(--font-display); font-size:30px; line-height:1; letter-spacing:.02em; }
.hero-stat span{ font-size:13px; font-weight:700; color: var(--gray-600); }

/* --------------------------------------------------------------------------
   ГЕРОЙ: текст по центру, миниатюры техники хаотично вокруг него.
   Координата задаётся центром миниатюры (left/top + translate(-50%,-50%)),
   поэтому при увеличении она растёт «из себя» и не съезжает с места.
   -------------------------------------------------------------------------- */
.hero--scatter{ padding: 40px 0 64px; }
.scatter-hero{
  position:relative; min-height:720px;
  display:flex; align-items:center; justify-content:center;
}
.scatter-field{ position:absolute; inset:0; pointer-events:none; }
.scatter-item{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); margin:0;
  aspect-ratio:var(--ar, 4/3); overflow:hidden;
  border:5px solid var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform: translate(-50%,-50%) rotate(var(--r));
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease;
  pointer-events:auto; z-index:1; will-change:transform;
}
.scatter-item img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Фото, которые нельзя обрезать: вписываем целиком, поля сливаются с белой рамкой */
.scatter-item--full{ background:var(--white); }
.scatter-item--full img{ object-fit:contain; }
.scatter-item:hover,
.scatter-item.is-active{
  transform: translate(-50%,-50%) rotate(var(--r)) scale(1.5);
  box-shadow: var(--shadow-lg); z-index:6;
}
/* Увеличенная по таймеру миниатюра не должна перехватывать клики по кнопкам под ней */
.scatter-item.is-active{ pointer-events:none; }

.scatter-center{ position:relative; z-index:4; max-width:620px; text-align:center; }
.scatter-center .lead{ max-width:none; margin-left:auto; margin-right:auto; }
.scatter-center .btn-row,
.scatter-center .hero-stats{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .scatter-item{ transition:none; }
}

/* Плитка-заглушка под фото */
.ph{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  display:flex; align-items:flex-end; padding:16px;
  color:#fff; font-family:var(--font-display); font-size:15px; letter-spacing:.04em;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6)); }
.ph > span:not(.badge){ position:relative; z-index:1; }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.product-media.ph img{ object-fit:contain; background:var(--white); }
.ph.span-2{ grid-row: span 2; }


/* --------------------------------------------------------------------------
   БРЕНДЫ BRP
   -------------------------------------------------------------------------- */
.brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
/* главная: четыре бренда BRP в ряд (Ski-Doo, Lynx, Can-Am, Sea-Doo); до 1080px — 2×2, на телефоне столбиком */
.brand-grid--four{ grid-template-columns:repeat(4,1fr); }
.brand-tile{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg);
  min-height:360px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:26px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.brand-tile:hover{ transform:translateY(-4px); box-shadow: var(--shadow-lg); }
.brand-tile--skidoo{ background: var(--skidoo); color: var(--black); }
.brand-tile--canam{ background: var(--black); color: var(--canam); }
.brand-tile--seadoo{ background: var(--seadoo); color:#fff; }
.brand-tile--lynx{ background: var(--lynx); color:#fff; }
.brand-tile--marine{ background: var(--marine); color:#fff; }

.brand-wordmark{
  font-family: var(--font-display);
  font-size: clamp(30px,3.2vw,46px);
  line-height:.9;
  letter-spacing:.01em;
}
.brand-tile p{ font-size:14.5px; font-weight:600; opacity:.86; max-width:260px; }
.brand-tile .brand-kind{
  font-family: var(--font-body); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; opacity:.7;
}
.brand-logo-slot{ margin-bottom:auto; }

/* Плитка бренда BRP: фирменный логотип сверху, фото техники снизу */
.brand-tile__top{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.brand-logo{ height:30px; width:auto; display:block; }
.brand-tile__photo{
  margin:22px -26px -26px; height:180px; overflow:hidden; flex-shrink:0;
}
.brand-tile__photo img,
.brand-tile__photo video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .45s ease;
}
.brand-tile:hover .brand-tile__photo img,
.brand-tile:hover .brand-tile__photo video{ transform:scale(1.06); }
/* главная: пока не заиграли все ролики плиток брендов, видно фото (фон плитки), потом видео проявляются разом (js/main.js) */
.brand-grid--sync .brand-tile__photo{ background-size:cover; background-position:center; }
.brand-grid--sync .brand-tile__photo video{ opacity:0; transition:opacity .6s ease, transform .45s ease; }
.brand-grid--sync.is-live .brand-tile__photo video{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .brand-tile__photo img, .brand-tile__photo video{ transition:none; }
  .brand-tile:hover .brand-tile__photo img, .brand-tile:hover .brand-tile__photo video{ transform:none; }
}

/* Полоса логотипов верфей (катера) — один ряд компактных белых карточек */
.brand-strip{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.brand-strip__card{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:140px; padding:8px;
  background: var(--white); border:1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.brand-strip__tag{
  position:absolute; top:8px; left:8px; z-index:1;
  font-family:var(--font-display); font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
  background: var(--gray-100, #f5f5f2); color: var(--gray-600);
}
.brand-strip__card:hover{
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gray-100);
}
/* Логотипы предварительно вписаны в холст одного соотношения сторон (см.
   images/logos/) — поэтому здесь просто заполняем карточку, без max-height:
   так все бренды читаются одинаково крупно вне зависимости от формы знака. */
.brand-strip__card img{ width:100%; height:100%; object-fit:contain; }
@media (max-width:900px){
  .brand-strip{ grid-template-columns:repeat(3,1fr); }
}

/* Текстовые плашки брендов — для верфей, под которые ещё нет своего лого
   в images/logos/ (см. brand-strip выше, где знак уже есть). */
.brand-pill-row{ display:flex; flex-wrap:wrap; gap:12px; }
.brand-pill{
  padding:14px 26px; border:1px solid var(--gray-300); border-radius:999px;
  font-family: var(--font-display); font-size:16px; font-weight:600;
  color: var(--black); background: var(--white);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.brand-pill:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gray-100); }
@media (max-width:520px){
  .brand-strip{ grid-template-columns:repeat(2,1fr); }
  .brand-strip__card{ height:110px; }
}

/* Полоса «страна происхождения» */
.origin-bar{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:28px 32px;
  border:2px solid var(--black); border-radius: var(--radius-lg);
  background:var(--white);
}
.origin-bar > div:nth-child(2){ flex:1 1 320px; min-width:0; }
.origin-bar h3{ font-size: clamp(22px,2.4vw,30px); }
/* Подпись держим в одну строку: вместе с заголовком в блоке ровно две
   строки, и рамка получается низкой. Узкий экран переносит её сам. */
.origin-bar p{ color: var(--gray-600); font-size:15px; margin-top:6px; }
.origin-bar .btn{ flex-shrink:0; }
@media (max-width: 640px){
  .origin-bar{ padding:24px; gap:18px; }
  /* Ширину флагам не задаём: у США, Канады и России разные пропорции, и от
     общей ширины российский флаг оказывался в рамке с белыми полями по бокам,
     а соседние заполняли её целиком. Высота общая, ширина у каждого своя. */
  .origin-bar .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   КАРТОЧКИ ТОВАРОВ
   -------------------------------------------------------------------------- */
.filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.filter-tab{
  padding:12px 24px; background:transparent;
  border:2px solid var(--black); border-radius: var(--radius);
  font-family: var(--font-display); font-size:16px; letter-spacing:.04em; text-transform:uppercase;
  transition:.18s ease;
}
.filter-tab:hover{ background: var(--yellow-soft); }
.filter-tab.active{ background: var(--black); color: var(--yellow); }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card-grid.cols-4{ grid-template-columns:repeat(4,1fr); }

.product-card{
  display:flex; flex-direction:column;
  background: var(--white);
  border:1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-card:hover{ border-color: var(--black); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
/* Товарное фото в каталоге: видно целиком (contain, не cover — иначе обрезает
   технику по краям), без затемняющего градиента .ph — тот нужен только там,
   где поверх фото лежит подпись (плитки на главной), на карточке товара
   подпись не накладывается, а градиент лишь пачкал светлые студийные фото. */
.product-media{ position:relative; height:260px; background-color: var(--white); background-size:contain; }
/* Карточки катеров/яхт — лайфстайл-фото на всю карточку (cover), а не
   студийное на белом с полями (contain, дефолт для BRP-техники выше). */
.product-card[data-category="boats"] .product-media.ph,
.product-media.ph.ph--cover{ background-size:cover; }
.product-card[data-category="boats"] .product-media.ph img,
.product-media.ph.ph--cover img{ object-fit:cover; }
.product-media::after{ display:none; }
.badge{
  position:absolute; top:14px; right:14px; z-index:2;
  padding:7px 12px; border-radius: var(--radius);
  font-family: var(--font-body); font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  background: var(--yellow); color: var(--black);
}
.badge.stock{ background: var(--black); color: var(--yellow); }
.badge.hot{ background: var(--red); color:#fff; }
/* Плитка линейки на каталоге: «5 комплектаций» — это не статус (не New,
   не «В наличии»), поэтому нейтральный цвет, а не жёлтый/чёрный акцент. */
.badge--count{ background: rgba(255,255,255,.94); color: var(--black); border:1.5px solid var(--black); }
.product-body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:22px 24px 26px; }
.product-body h4{ font-size:22px; line-height:1.02; }
.product-meta{ font-size:13.5px; color: var(--gray-600); }
.product-price{
  font-family: var(--font-display); font-size:28px; letter-spacing:.01em;
  margin-top:auto; padding-top:8px;
}
.product-price .old{
  font-size:16px; color: var(--gray-600); text-decoration:line-through;
  margin-left:10px;
}
/* BRP: цена под заказ и срок авиадоставки — сразу под ценой */
.product-card__note{ margin:-6px 0 0; font-size:12.5px; line-height:1.35; color: var(--gray-600); }
.catalog-note{
  margin:0 0 20px; padding:12px 16px; border-left:3px solid var(--yellow);
  background: var(--yellow-soft); border-radius: var(--radius); font-size:14.5px; line-height:1.45;
}
.catalog-note a{ font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.product-actions{ display:flex; gap:10px; margin-top:14px; }
.product-actions .btn{ flex:1; padding:13px 12px; font-size:14px; }

/* --------------------------------------------------------------------------
   FAQ-АККОРДЕОН
   На нативных <details>/<summary> — раскрытие работает без JS.
   -------------------------------------------------------------------------- */
.faq-accordion{ max-width:760px; }
.faq-item{ border-bottom:1px solid var(--gray-300); }
.faq-item:first-child{ border-top:1px solid var(--gray-300); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer;
  font-family: var(--font-display); font-size:19px; letter-spacing:.02em;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ico{
  width:22px; height:22px; flex-shrink:0; color: var(--gray-600);
  transition: transform .2s ease;
}
.faq-item[open] summary .ico{ transform: rotate(45deg); }
.faq-item p{ padding:0 4px 22px; color: var(--gray-600); font-size:15.5px; max-width:640px; }

/* --------------------------------------------------------------------------
   ПАНЕЛЬ ФИЛЬТРОВ КАТАЛОГА
   -------------------------------------------------------------------------- */
.catalog-controls{
  display:grid; grid-template-columns: 1fr auto auto auto auto auto;
  gap:12px; align-items:center;
  padding:20px; margin-bottom:28px;
  border:2px solid var(--black); border-radius: var(--radius-lg);
  background: var(--white);
}
.catalog-controls:has(.cat-jump){ grid-template-columns: auto 1fr auto auto auto auto auto; }

/* Переключатель категории в панели фильтров — та же анимация, что у
   «Каталог техники» в шапке, но с чёрной рамкой вместо чёрной заливки. */
.cat-jump{ position:relative; }
.cat-jump__trigger{
  display:flex; align-items:center; gap:9px; height:100%;
  padding:13px 16px;
  border:2px solid var(--black); border-radius: var(--radius);
  background: var(--white); color: var(--black);
  font-family: var(--font-body); font-weight:700; font-size:14.5px;
  cursor:pointer; white-space:nowrap;
  transition: background-color .15s ease;
}
.cat-jump__trigger:hover{ background: var(--gray-50); }
.cat-jump__trigger .ico{ width:10px; height:10px; transform:rotate(90deg); transition: transform .2s ease; }
.cat-jump.open .cat-jump__trigger .ico{ transform:rotate(-90deg); }
.cat-jump__panel{
  position:absolute; top:calc(100% + 10px); left:0; z-index:20;
  background: var(--white); border:2px solid var(--black); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding:10px; min-width:240px;
  opacity:0; visibility:hidden; translate:0 8px; transition:.18s ease;
}
.cat-jump.open .cat-jump__panel{ opacity:1; visibility:visible; translate:0 0; }
.cat-jump__panel a{
  display:block; padding:12px 14px; margin:2px 0; border-radius: var(--radius);
  font-family: var(--font-body); font-weight:600; font-size:14.5px; color: var(--black);
}
.cat-jump__panel a::after{ display:none; }
.cat-jump__panel a:hover{ background: var(--gray-50); }
.cat-jump__panel a.active{ background: var(--yellow-soft); font-weight:800; }
/* Семь колонок фильтров требуют около тысячи пикселей. Ниже этого поиск,
   сортировка и «Сбросить» вылезали за экран и обрезались — прокрутки нет,
   и добраться до них было нельзя. */
@media (max-width:1080px){
  .catalog-controls:has(.cat-jump){ grid-template-columns: 1fr 1fr; }
  .cat-jump{ grid-column: 1 / -1; }
  .cat-jump__trigger{ width:100%; justify-content:space-between; }
}
.catalog-controls input[type="search"],
.catalog-controls select{
  padding:13px 16px;
  border:2px solid var(--black); border-radius: var(--radius);
  background: var(--white);
  font-family: var(--font-body); font-weight:600; font-size:14.5px; color: var(--black);
}
.catalog-controls input[type="search"]::placeholder{ font-weight:500; color: var(--gray-600); }
.catalog-controls input[type="search"]:hover,
.catalog-controls select:hover{ background: var(--gray-50); }
.catalog-controls input[type="search"]:focus,
.catalog-controls select:focus{
  outline:none; background: var(--white);
  box-shadow:0 0 0 3px var(--yellow-soft);
}
.catalog-meta{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom:22px;
}
.catalog-meta .count{
  font-family: var(--font-display); font-size:19px; letter-spacing:.03em;
}
.link-reset{
  background:none; border:none; padding:0;
  font-family: var(--font-body); font-size:14px; font-weight:700;
  color: var(--gray-600); text-decoration:underline; text-underline-offset:3px;
}
.link-reset:hover{ color: var(--black); }

.catalog-empty{
  padding:56px 24px; text-align:center;
  border:2px dashed var(--gray-300); border-radius: var(--radius-lg);
}
.catalog-empty[hidden]{ display:none; }

/* «Загрузить ещё» */
.pager{ display:flex; justify-content:center; margin-top:44px; }
.pager[hidden]{ display:none; }
.pager .btn{ min-width:220px; }

/* Карточка: заголовок-ссылка */
.product-body h4 a:hover{ border-bottom:3px solid var(--yellow); }
a.product-media{ display:block; }
button.product-media{ display:block; width:100%; border:none; text-align:left; cursor:zoom-in; }

/* --------------------------------------------------------------------------
   СТРАНИЦА ТОВАРА
   -------------------------------------------------------------------------- */
.product-detail{ display:grid; grid-template-columns: 1.6fr .4fr; gap:40px; align-items:start; }
/* aspect-ratio у главного фото задаёт крупную предпочтительную ширину —
   без min-width:0 колонка 1fr под неё растягивается шире контейнера. */
.product-detail > *{ min-width:0; }
.product-detail__media{
  display:block; width:100%; height:440px; border-radius: var(--radius-lg);
  transition: background-image .15s ease; border:none; padding:0; text-align:left; cursor:zoom-in;
  background-color: var(--gray-50); background-size:contain;
}
/* Реальные фото — 16:9, поэтому заливаем без рамок сверху/снизу (cover),
   а не вписываем с полями (contain), и держим форму через aspect-ratio,
   а не фиксированную высоту — так она honestly растёт вместе с колонкой. */
.product-detail__media--lg{
  height:auto; aspect-ratio:16/9; background-size:cover; background-position:center;
}
.product-detail__media::after{ display:none; }

.product-gallery__main-wrap{ position:relative; }
.product-gallery__main-wrap .product-detail__media{ margin:0; }
.gallery-arrow{
  position:absolute; top:50%; translate:0 -50%;
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.92); color: var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow); border:none; cursor:pointer;
  opacity:0; transition: opacity .18s ease, background-color .15s ease;
}
.gallery-arrow .ico{ width:20px; height:20px; }
.gallery-arrow--prev{ left:14px; }
.gallery-arrow--next{ right:14px; }
.product-gallery__main-wrap:hover .gallery-arrow{ opacity:1; }
.gallery-arrow:hover{ background: var(--yellow); }
.gallery-counter{
  position:absolute; right:14px; bottom:14px;
  background: rgba(10,10,10,.65); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  padding:5px 11px; border-radius:20px;
  font-variant-numeric: tabular-nums;
}
@media (max-width:640px){
  .gallery-arrow{ opacity:1; width:38px; height:38px; }
  .gallery-arrow .ico{ width:17px; height:17px; }
}

/* Галерея: кружочки-точки под главным фото — как в конфигураторе BRP.
   Показываются только когда у модели есть больше одного снимка. */
.product-gallery__dots{ display:flex; justify-content:center; gap:9px; margin-top:16px; }
.product-gallery__dot{
  width:9px; height:9px; padding:0; border-radius:50%; border:none;
  background: var(--gray-300); cursor:pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.product-gallery__dot:hover{ background: var(--gray-600); }
.product-gallery__dot.active{ background: var(--yellow); transform:scale(1.25); }

/* Четыре ключевых параметра под фото — как на Yamal Moto. */
.product-quickspecs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:24px; background: var(--gray-300); border:1px solid var(--gray-300);
  border-radius: var(--radius); overflow:hidden;
}
.product-quickspecs__item{
  background:#fff; padding:14px 12px; text-align:center;
}
.product-quickspecs__item dt{
  margin:0; font-family: var(--font-display); font-size:clamp(17px,2vw,22px);
  font-weight:700; color: var(--gray-900);
}
.product-quickspecs__item dd{
  margin:4px 0 0; font-size:12px; color: var(--gray-600);
  text-transform:uppercase; letter-spacing:.02em;
}
@media (max-width:520px){
  .product-quickspecs{ grid-template-columns:repeat(2,1fr); }
}
.product-detail__price{
  font-family: var(--font-display); font-size: clamp(30px,4vw,46px);
  margin-top:18px;
}
/* "Цена по запросу" текстом — крупный дисплейный кегль числа ей велик,
   переносится на две строки в узкой колонке. */
.product-detail__price--text{ font-size: clamp(20px,2.4vw,26px); white-space:nowrap; }
.product-detail__price-note{ margin:6px 0 0; font-size:13.5px; color: var(--gray-600); }
.product-detail__price-note a{ color: var(--ink); font-weight:700; }
/* конкретные машины этой модели на складе (список владельца) */
.product-stock{ margin:16px 0 0; padding:14px 16px; border:1.5px solid var(--black); border-radius: var(--radius-lg); background:#fff; }
.product-stock__title{ margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.product-stock ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
/* колонка цены узкая: название с цветом — строкой сверху, цена и кнопка — под ним */
.product-stock li{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"name name" "price buy";
  gap:6px 10px; align-items:center; padding:10px 0; border-top:1px solid var(--gray-100);
}
.product-stock li:first-child{ border-top:0; padding-top:4px; }
.product-stock__name{ grid-area:name; font-size:14px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.product-stock__name small{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color: var(--gray-600); }
.product-stock b{ grid-area:price; font-size:15px; white-space:nowrap; font-variant-numeric: tabular-nums; }
.product-stock .btn-sm{ grid-area:buy; padding:8px 14px; font-size:13px; white-space:nowrap; }
.product-detail__note{
  margin-top:24px; padding:16px 18px;
  background: var(--yellow-soft); border-left:3px solid var(--yellow);
  border-radius: var(--radius); font-size:14.5px;
}
.color-swatches{ margin-top:20px; padding-top:20px; border-top:1px solid var(--gray-300); }
.color-swatches__label{
  margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gray-600);
}
.color-swatches__current{ font-weight:800; color: var(--gray-900); }
.color-swatches__list{ display:flex; flex-wrap:wrap; gap:10px; }
.color-swatch{
  width:52px; height:52px; border-radius:10px; padding:0;
  background-size:cover; background-position:center;
  border:2px solid var(--gray-300); cursor:pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.color-swatch:hover{ transform: translateY(-2px); }
.color-swatch.active{ border-color: var(--seadoo); }

/* Конфигуратор исполнений — переключатели «Исполнение / Ширина и длина
   гусеницы / Экран» плюс нередактируемая подпись модели гусеницы,
   по образцу BRP/Yamal Moto. */
.unit-picker{ margin-top:20px; padding-top:20px; border-top:1px solid var(--gray-300); }
.unit-picker__label{
  margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color: var(--gray-600);
}
.unit-picker__list{ display:flex; flex-wrap:wrap; gap:8px; }
.unit-pill{
  padding:10px 18px; border-radius:999px; border:1.5px solid var(--gray-300);
  background:#fff; color: var(--black); font-size:14px; font-weight:700;
  cursor:pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.unit-pill:hover:not(.active):not(.unit-pill--readonly){ border-color: var(--black); }
.unit-pill.active{ background: var(--black); border-color: var(--black); color:#fff; }
.unit-pill--readonly{ cursor:default; background: var(--gray-50); color: var(--gray-600); }
.unit-summary{ margin-top:18px; font-size:14.5px; color: var(--gray-600); }
/* Значение есть, но не с выбранными выше параметрами (мотор, гусеница…):
   клик по нему всё равно работает и переставит остальное под себя. */
.unit-pill.is-unavailable{ color: var(--gray-600); border-style:dashed; background:#fff; }
.color-swatch.is-unavailable{ opacity:.45; }

/* Характеристики узкой колонкой слева, описание — рядом справа */
.product-info{
  display:grid; grid-template-columns:minmax(300px, 380px) 1fr; gap:56px;
  align-items:start;
}
.product-info h2{ font-size:clamp(22px,2.2vw,30px); margin-bottom:22px; }
.product-info__specs{ position:sticky; top:112px; }

.product-description{ max-width:70ch; }
.product-description p{ font-size:15.5px; line-height:1.75; color: var(--gray-900); margin-bottom:16px; }
.product-description p:last-child{ margin-bottom:0; }

.spec-list{ margin:0; }
.spec-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:11px 0; border-bottom:1px dashed var(--gray-300);
}
.spec-row dt{ color: var(--gray-600); font-size:13.5px; flex:1 1 auto; min-width:0; }
.spec-row dd{
  margin:0; font-weight:700; font-size:13.5px; text-align:right;
  flex:0 1 auto; min-width:0; overflow-wrap:anywhere;
}

@media (max-width:900px){
  .product-info{ grid-template-columns:1fr; gap:40px; }
  .product-info__specs{ position:static; }
  .spec-row dt, .spec-row dd{ font-size:14.5px; }
}

.price-table{
  border:2px solid var(--black); border-radius: var(--radius-lg);
  overflow:hidden; margin-top:28px; background: var(--white);
}
.price-table__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:14px 20px; border-bottom:1px dashed var(--gray-300);
}
.price-table__row:last-child{ border-bottom:none; }
.price-table__row--head{
  background: var(--gray-100, #f5f5f2); border-bottom:2px solid var(--black);
  text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.04em; color: var(--gray-600);
}
.price-table__row span:first-child{ font-weight:700; font-size:15px; min-width:0; }
.price-table__row--head span:first-child{ font-weight:700; }
.price-table__row span:last-child{ font-weight:700; font-size:15px; text-align:right; white-space:nowrap; }
.price-table__row em{ font-style:normal; font-weight:500; font-size:12.5px; color: var(--gray-600); }

@media (max-width:640px){
  .price-table__row{ padding:12px 16px; flex-wrap:wrap; }
  .price-table__row span:first-child{ font-size:14px; }
}

/* --------------------------------------------------------------------------
   ВИДЕО-БЛОК
   Пока нет реального ролика — честная заглушка с плашкой, а не фиктивная
   ссылка на несуществующее видео. Чтобы подключить настоящее видео,
   замените содержимое .video-frame на <iframe> с embed-ссылкой
   (RuTube/YouTube) — см. images/README.md.
   -------------------------------------------------------------------------- */
/* Раньше плеер растягивался во всю ширину контейнера и весил как половина
   страницы. Теперь блок ограничен по ширине, а Rutube не подгружается,
   пока посетитель не нажал play. */
.video-block{ max-width:980px; margin:0 auto; }
.video-frame{
  position:relative; aspect-ratio:16/9; border-radius: var(--radius-lg);
  overflow:hidden; background:#111;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--black);
}
.video-frame iframe,
.video-frame video{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  object-fit:cover; background:#000;
}
.video-frame__poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.video-frame__play{
  position:relative; z-index:1;
  width:76px; height:76px; border-radius:50%; border:none; cursor:pointer;
  background: var(--yellow); color: var(--black);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  transition: transform .18s ease;
}
.video-frame:hover .video-frame__play{ transform: scale(1.08); }
.video-frame.is-playing .video-frame__play,
.video-frame.is-playing .video-frame__poster{ display:none; }
.video-frame__play .ico{ width:30px; height:30px; margin-left:4px; }
@media (prefers-reduced-motion: reduce){ .video-frame__play{ transition:none; } }
@media (max-width:640px){
  .video-frame__play{ width:62px; height:62px; }
  .video-frame__play .ico{ width:24px; height:24px; }
}
.video-frame__note{
  position:absolute; left:20px; bottom:18px; right:20px;
  color:#c9c8c1; font-size:13px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.video-frame__note .ico{ width:16px; height:16px; flex-shrink:0; }

/* --------------------------------------------------------------------------
   FAQ — компактная карусель карточек
   -------------------------------------------------------------------------- */
.faq-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:22px;
}
.faq-title{ font-family:var(--font-display); font-size:clamp(24px,2.6vw,34px); line-height:1.05; }
.faq-nav{ display:flex; gap:8px; flex-shrink:0; }
.faq-arrow{
  width:44px; height:44px; display:grid; place-items:center;
  border:2px solid var(--black); border-radius:999px;
  background:var(--white); color:var(--black); cursor:pointer;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.faq-arrow:hover{ background:var(--black); color:var(--white); }
.faq-arrow[disabled]{ opacity:.3; cursor:default; }
.faq-arrow[disabled]:hover{ background:var(--white); color:var(--black); }
.faq-arrow .ico{ width:20px; height:20px; }

.faq-track{
  display:flex; gap:16px;
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:4px 4px 8px;          /* чтобы рамки и фокус не срезались */
  margin:-4px -4px -8px;
}
.faq-track::-webkit-scrollbar{ display:none; }
.faq-track:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; border-radius:var(--radius-lg); }

.faq-card{
  flex:0 0 clamp(260px, 30%, 340px); scroll-snap-align:start;
  display:flex; flex-direction:column; gap:10px;
  padding:22px 24px; background:var(--white);
  border:2px solid var(--black); border-radius:var(--radius-lg);
}
.faq-card h3{
  font-family:var(--font-body); font-size:15.5px; font-weight:800; line-height:1.35;
  text-transform:none; letter-spacing:0;   /* вопрос читается лучше без капса */
}
.faq-card p{ color:var(--gray-600); font-size:14.5px; line-height:1.55; }

@media (prefers-reduced-motion: reduce){
  .faq-track{ scroll-behavior:auto; }
  .faq-arrow{ transition:none; }
}
@media (max-width:640px){
  .faq-card{ flex-basis:82%; padding:20px; }
  .faq-nav{ display:none; }   /* на телефоне листают пальцем */
}

/* --------------------------------------------------------------------------
   ЭТАПЫ
   -------------------------------------------------------------------------- */
.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 36px; }
.step{ position:relative; padding-top:26px; border-top:3px solid var(--gray-300); transition:border-color .2s ease; }
.step:hover{ border-color: var(--yellow); }
.step-num{
  font-family: var(--font-display); font-size:52px; line-height:1;
  color: var(--yellow); margin-bottom:12px;
}
.step h4{ font-size:23px; margin-bottom:10px; }
.step p{ color: var(--gray-600); font-size:15px; }

/* --------------------------------------------------------------------------
   ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.review-list{
  display:flex; flex-direction:column; gap:18px; max-width:820px;
}
.review-card{
  background: var(--white); border:1px solid var(--gray-300);
  border-radius: var(--radius-lg); padding:26px;
}
.review-card__head{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.review-card__avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.review-card__name{ font-weight:800; font-size:15.5px; }
.review-card__meta{ font-size:13px; color: var(--gray-600); }
.review-card__stars{ margin-left:auto; color: var(--yellow-deep); font-size:14px; white-space:nowrap; }
.review-card__text p{ font-size:15px; line-height:1.7; color: var(--gray-900); margin:0 0 12px; }
.review-card__text p:last-child{ margin-bottom:0; }
.review-card__reply{
  margin-top:16px; padding:14px 18px;
  background: var(--gray-50); border-left:3px solid var(--yellow);
  border-radius: var(--radius);
}
.review-card__reply-name{ font-weight:800; font-size:13.5px; margin-bottom:6px; }
.review-card__reply p{ font-size:14.5px; line-height:1.6; color: var(--gray-900); margin:0; }

/* --------------------------------------------------------------------------
   БАННЕРЫ
   -------------------------------------------------------------------------- */
.banner{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  padding:48px 52px; border-radius: var(--radius-lg);
  background: var(--black); color:#fff;
}
.banner h3{ font-size: clamp(24px,2.8vw,38px); margin-bottom:14px; }
/* Заголовок призыва в статье — не <h2>: баннер не должен рвать иерархию H1→H2→H3 статьи */
.banner .banner__title{ margin:0 0 14px; max-width:none; color:inherit; font-family: var(--font-display); font-weight:700;
  text-transform:uppercase; line-height:1.08; letter-spacing:.005em; font-size: clamp(24px,2.8vw,38px); }
.banner p{ color:#b9b9b5; max-width:560px; font-size:16px; }
.banner--yellow{ background: var(--yellow); color: var(--black); }
.banner--yellow p{ color:#4a3d00; }

/* --------------------------------------------------------------------------
   О КОМПАНИИ / ПРЕИМУЩЕСТВА / КОМАНДА
   -------------------------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-grid p + p{ margin-top:16px; }
.about-collage{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.about-collage .ph{ height:150px; }
.about-collage .ph.wide{ grid-column:span 2; }

/* Бенто-сетка преимуществ.
   Раньше это были шесть одинаковых блоков с крупными жёлтыми плашками —
   акцент повторялся столько раз, что переставал быть акцентом. Теперь
   карточки разной ширины, поверхность чуть светлее фона, рамка тонкая,
   а жёлтый остался только в контуре иконки и в подсветке при наведении. */
.trust-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  grid-auto-flow:dense;
}
.trust-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:30px 32px;
  background:#141414;
  border:1px solid #272727; border-radius: var(--radius-lg);
  transition: border-color .22s ease, transform .22s ease, background-color .22s ease;
}
.trust-item--wide{ grid-column: span 2; }
.trust-item:hover{
  border-color: var(--yellow); transform: translateY(-3px); background:#171717;
}
.trust-item__ic{
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border:1.5px solid var(--yellow); border-radius:50%;
  color: var(--yellow);
}
.trust-item__ic .ico{ width:21px; height:21px; }
.trust-item h3{
  font-size:20px; line-height:1.15; margin:0;
}
.trust-item--wide h3{ font-size:clamp(21px,2vw,26px); }
.trust-item p{ font-size:14.5px; line-height:1.6; color:#a8a8a3; margin:0; }
.trust-item--wide p{ font-size:15.5px; max-width:52ch; }

.section--gray .trust-item, .section:not(.section--black) .trust-item{
  background: var(--white); border-color: var(--gray-300);
}
.section--gray .trust-item p, .section:not(.section--black) .trust-item p{ color: var(--gray-600); }

@media (prefers-reduced-motion: reduce){
  .trust-item{ transition:none; }
  .trust-item:hover{ transform:none; }
}
@media (max-width:900px){
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .trust-item--wide{ grid-column: span 2; }
}
@media (max-width:640px){
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item--wide{ grid-column: span 1; }
  .trust-item{ padding:24px 22px; }
}

.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px; }
.team-card{ text-align:center; }
.avatar{
  width:132px; height:132px; margin:0 auto 18px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:38px; letter-spacing:.02em;
}
.team-card h5{ font-size:20px; margin-bottom:5px; }
.team-card span{ font-size:13.5px; color: var(--gray-600); }

/* Города */
.city-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.city-tag{
  display:inline-block; cursor:pointer;
  padding:12px 20px; border:2px solid var(--gray-300); border-radius: var(--radius);
  font-family: var(--font-display); font-size:17px; letter-spacing:.03em;
  color: var(--black); background: var(--white);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.city-tag:hover{
  border-color: var(--yellow); background: var(--yellow-soft); transform: translateY(-2px);
}
.city-tag:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.city-tag.accent{ background: var(--yellow); border-color: var(--yellow); }
.city-tag.accent:hover{ background: var(--yellow); }
.city-tag--more{ border-style:dashed; color: var(--gray-600); }
.city-tag--more:hover{ color: var(--black); }
@media (prefers-reduced-motion: reduce){
  .city-tag{ transition:none; }
  .city-tag:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   ФОРМЫ
   -------------------------------------------------------------------------- */
.form-card{
  background: var(--white); border:2px solid var(--black);
  border-radius: var(--radius-lg); padding:36px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
/* Поля форм — и в секциях (.form-card), и в модальном окне */
.form-card input, .form-card select, .form-card textarea,
.modal input, .modal select, .modal textarea{
  width:100%; padding:16px 18px;
  border:1px solid var(--gray-300); border-radius: var(--radius);
  background: var(--gray-50);
  font-family: var(--font-body); font-size:15px; color: var(--black);
  transition:.18s ease;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus{
  outline:none; border-color: var(--black); background: var(--white);
  box-shadow:0 0 0 3px var(--yellow-soft);
}
.form-card textarea, .modal textarea{ min-height:110px; resize:vertical; }
.modal input[type="hidden"]{ display:none; }
.form-note{ font-size:12.5px; color: var(--gray-600); margin-top:12px; }
.form-consent{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; line-height:1.5; color: var(--gray-600);
  margin-top:12px; cursor:pointer;
}
.form-consent input{ width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color: var(--black); cursor:pointer; }
.form-consent a{ color: var(--gray-900); text-decoration:underline; text-underline-offset:2px; }
.form-consent a:hover{ color: var(--black); }

/* --------------------------------------------------------------------------
   МОДАЛЬНОЕ ОКНО ЗАЯВКИ
   Единая точка входа для всех кнопок «Заказать», «Купить», «Подробнее»
   и «Оставить заявку» — открывается через [data-request].
   -------------------------------------------------------------------------- */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal__backdrop{ position:absolute; inset:0; background:rgba(10,10,10,.62); }
.modal__dialog{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  max-height:calc(100vh - 48px); overflow-y:auto;
  background: var(--white);
  border:2px solid var(--black);
  border-radius: var(--radius-lg);
  padding:36px;
  animation: modalIn .18s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .modal__dialog{ animation:none; } }
.modal__close{
  position:absolute; top:16px; right:16px;
  width:38px; height:38px; background:none;
  border:1px solid var(--gray-300); border-radius: var(--radius);
  font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:.18s ease;
}
.modal__close:hover{ background: var(--black); color: var(--white); border-color: var(--black); }
.modal__subject{
  margin-top:10px; padding:12px 16px;
  background: var(--yellow-soft); border-left:3px solid var(--yellow);
  border-radius: var(--radius); font-size:14.5px; font-weight:700; color: var(--black);
}
.modal__subject[hidden]{ display:none; }
.modal .form-row{ margin-top:20px; }
body.modal-open{ overflow:hidden; }

/* Сообщение об успешной отправке */
.form-success{
  padding:14px 16px; border-radius: var(--radius);
  background: var(--yellow); color: var(--black);
  font-weight:800; font-size:14px;
}
.form-success[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   КОРЗИНА
   -------------------------------------------------------------------------- */
.cart-modal .modal__dialog{ max-width:560px; }
.cart-items{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.cart-item{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; }
.cart-item__media{
  width:64px; height:64px; border-radius: var(--radius);
  background-size:cover; background-position:center; flex-shrink:0;
}
.cart-item__name{ font-weight:700; font-size:14.5px; line-height:1.3; }
.cart-item__price{ font-size:13px; color: var(--gray-600); margin-top:2px; }
.cart-item__qty{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.qty-btn{
  width:26px; height:26px; border:1px solid var(--gray-300); border-radius: var(--radius);
  background: var(--white); font-weight:800; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.qty-btn:hover{ background: var(--yellow-soft); }
.cart-item__qty output{ min-width:20px; text-align:center; font-weight:700; }
.cart-item__remove{
  align-self:flex-start; background:none; border:none; color: var(--gray-600);
  padding:4px;
}
.cart-item__remove:hover{ color: var(--red); }
.cart-item__remove .ico{ width:16px; height:16px; }

.cart-empty{ text-align:center; padding:32px 0; color: var(--gray-600); }
.cart-empty[hidden]{ display:none; }

.cart-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:20px; padding-top:20px; border-top:2px solid var(--black);
  font-family: var(--font-display); font-size:22px;
}
.cart-total .amount{ font-size:28px; }

.cart-step[hidden]{ display:none; }

/* --------------------------------------------------------------------------
   ЛАЙТБОКС: просмотр фото на весь экран (клик по фото в карточке/на странице товара)
   -------------------------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.92);
  padding:56px 24px;
  animation: modalIn .18s ease;
}
.lightbox[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } }
.lightbox__img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius: var(--radius);
}
.lightbox__close{
  position:absolute; top:20px; right:20px; z-index:1;
  width:44px; height:44px; border-radius:50%;
  background: var(--white); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:.18s ease;
}
.lightbox__close:hover{ background: var(--yellow); }
.lightbox__caption{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  max-width:90%; padding:8px 18px;
  color:#fff; background:rgba(0,0,0,.5); border-radius: var(--radius);
  font-family: var(--font-display); letter-spacing:.03em; font-size:14px; text-align:center;
}
.lightbox__caption:empty{ display:none; }

/* Стрелки листания на весь экран */
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.92); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .18s ease;
}
.lightbox__nav:hover{ background: var(--yellow); }
.lightbox__nav--prev{ left:20px; }
.lightbox__nav--next{ right:20px; }
.lightbox__nav .ico{ width:26px; height:26px; }
.lightbox__counter{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  padding:6px 14px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff;
  font-family:var(--font-display); font-size:14px; letter-spacing:.06em;
  font-variant-numeric: tabular-nums;
}
.lightbox__counter:empty{ display:none; }
@media (prefers-reduced-motion: reduce){ .lightbox__nav{ transition:none; } }
@media (max-width:640px){
  .lightbox{ padding:64px 12px; }
  .lightbox__nav{ width:44px; height:44px; }
  .lightbox__nav--prev{ left:8px; }
  .lightbox__nav--next{ right:8px; }
}

/* --------------------------------------------------------------------------
   ВНУТРЕННИЕ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
.page-hero{ padding:56px 0 44px; border-bottom:1px solid var(--gray-300); }
.page-hero h1{ margin-bottom:16px; }
.breadcrumb{ font-size:13px; color: var(--gray-600); margin-bottom:14px; }
.breadcrumb a:hover{ color: var(--black); border-bottom:2px solid var(--yellow); }
.tag-pill{
  display:inline-block; padding:7px 16px; border-radius: var(--radius);
  background: var(--yellow); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   ПОДВАЛ
   -------------------------------------------------------------------------- */
.site-footer{ background: var(--black); color:#a8a8a2; padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:40px; margin-bottom:52px; }
.footer-grid h3{ color:#fff; font-size:19px; margin-bottom:20px; }
.footer-grid li{ margin-bottom:12px; font-size:14.5px; }
.footer-grid a:hover{ color: var(--yellow); }
.footer-logo{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.footer-logo b{ font-family: var(--font-display); font-size:25px; color:#fff; letter-spacing:.03em; }
.footer-bottom{
  border-top:1px solid #262626; padding-top:26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:13px; color:#6e6e68;
}
.footer-bottom a{ color:#8f8f8a; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom a:hover{ color: var(--yellow); }
.footer-legal-note{
  margin-top:14px; font-size:12px; line-height:1.6; color:#57574f;
}
.social-row{ display:flex; gap:10px; margin-top:22px; }
.social-row .icon-btn{ border-color:#3a3a3a; color:#fff; }
.social-row .icon-btn:hover{ background: var(--yellow); color: var(--black); border-color: var(--yellow); }

/* --------------------------------------------------------------------------
   ДОСТУПНОСТЬ И АНИМАЦИИ
   -------------------------------------------------------------------------- */

/* Видимый фокус на всём, что кликается. :focus-visible — только для клавиатуры,
   мышь лишнюю рамку не получает. Убирать обводку без замены нельзя. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--black);
  outline-offset:3px;
  border-radius:2px;
}
.section--black a:focus-visible,
.section--black button:focus-visible,
.site-footer a:focus-visible,
.mobile-nav a:focus-visible,
.mobile-nav button:focus-visible{
  outline-color: var(--yellow);
}

/* Курсор-указатель на всех интерактивных элементах */
button, .btn, .filter-tab, .brand-tile, [data-request], .close-btn, .burger{
  cursor:pointer;
}

/* Плавающая кнопка Telegram — фиксирована в правом нижнем углу поверх контента,
   но ниже модалок/лайтбокса (z-index 400/500), чтобы не перекрывать их. */
.float-tg{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#29a9eb; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.float-tg svg{ width:28px; height:28px; }
.float-tg:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.34); }
@media (max-width:640px){
  .float-tg{ width:50px; height:50px; right:16px; bottom:16px; }
  .float-tg svg{ width:24px; height:24px; }
}

/* --------------------------------------------------------------------------
   ПОДСКАЗКА С ПРЕДЛОЖЕНИЕМ ОСТАВИТЬ ЗАЯВКУ
   Всплывает один раз через 15 секунд в левом нижнем углу — подальше от
   кнопки Telegram справа. Слой 300: выше шапки, но ниже модалки заявки,
   чтобы та открывалась поверх.
   -------------------------------------------------------------------------- */
.nudge{
  position:fixed; left:24px; bottom:24px; z-index:300;
  width:min(380px, calc(100vw - 48px));
  background: var(--white);
  border:2px solid var(--black); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  opacity:0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.nudge.is-shown{ opacity:1; transform:none; }
.nudge__head{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px 13px 20px;
  background: var(--yellow); color: var(--black);
  border-bottom:2px solid var(--black);
}
.nudge__title{
  font-family: var(--font-display); font-size:19px;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.1;
}
.nudge__close{
  margin-left:auto; flex-shrink:0;
  width:30px; height:30px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius: var(--radius);
  color: var(--black); transition: background-color .15s ease;
}
.nudge__close:hover{ background: rgba(10,10,10,.12); }
.nudge__close .ico{ width:17px; height:17px; }
.nudge__body{ padding:18px 20px 20px; }
.nudge__body p{ font-size:15px; line-height:1.6; color: var(--gray-900); }
.nudge__actions{ display:flex; gap:10px; margin-top:18px; }
/* Формы — один телефон (02.10.2026): подсказка над полем, мини-форма в подсказке слева внизу */
.form-hint{ margin:16px 0 12px; font-size:14.5px; line-height:1.55; color: var(--gray-600); }
.form-hint + input + select{ margin-top:12px; }
.nudge__form{ margin-top:14px; display:grid; gap:10px; }
.nudge__form input[type="tel"]{
  width:100%; padding:14px 16px; border:1px solid var(--gray-300); border-radius: var(--radius);
  background: var(--gray-50); font-family: var(--font-body); font-size:15px; color: var(--black);
}
.nudge__form input[type="tel"]:focus{ outline:none; border-color: var(--black); background: var(--white); box-shadow:0 0 0 3px var(--yellow-soft); }
.nudge__form .btn{ padding:13px 18px; font-size:14px; }
.nudge__form .form-note{ margin-top:0; }
.nudge__actions .btn{ padding:13px 18px; font-size:14px; }
.nudge__actions .btn-primary{ flex:1 1 auto; }
@media (max-width:640px){
  /* во всю ширину и над плавающей кнопкой Telegram */
  .nudge{ left:12px; right:12px; bottom:80px; width:auto; }
}
@media (prefers-reduced-motion: reduce){
  .nudge{ transition:none; }
}

/* Ссылка для перехода к содержимому — первая цель Tab на странице */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:500;
  padding:14px 22px; background:var(--black); color:var(--yellow);
  font-weight:800;
}
.skip-link:focus{ left:0; }

/* Появление блоков при прокрутке.
   Прячет только класс .reveal-armed, который расставляет JS — и только тем
   блокам, что лежат ниже первого экрана. Сам по себе .reveal ничего не
   скрывает, поэтому при отключённом или сломанном JS виден весь контент. */
.reveal-armed{ opacity:0; transform:translateY(24px); }
.reveal-armed.is-visible{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .55s ease;
}

/* Пользователи с включённым «уменьшить движение» не должны видеть анимаций */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .btn:hover, .product-card:hover, .brand-tile:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   АДАПТИВ
   -------------------------------------------------------------------------- */
/* Одна строка в шапке: семь пунктов + логотип + контакты помещаются только
   с ужатыми отступами. Раньше при полном размере «О компании» выдавливалось
   за правый край — пункт просто пропадал. */
@media (min-width:1261px){
  .header-inner{ gap:16px; padding:16px 20px; }
  .main-nav > a, .nav-drop > a{ font-size:11.5px; padding:11px 11px; letter-spacing:.05em; }
}

@media (max-width:1260px){
  /* Меню остаётся на виду всегда — без бургера. Здесь семь пунктов в строку
     уже не помещаются, поэтому меню переезжает во вторую строку шапки
     и прокручивается по горизонтали — ни один пункт не теряется. */
  .header-inner{ flex-wrap:wrap; gap:10px 14px; padding:12px 20px; }
  .logo{ flex:1 1 auto; }
  .header-actions{ flex:0 0 auto; }
  .header-actions .phone-link{ font-size:17px; }

  /* Переносим пункты на вторую строку, а не прокручиваем: горизонтальная
     прокрутка обрезала бы выпадающую панель «Каталога техники» и прятала
     последние пункты от тех, кто не догадается её пролистать. */
  .main-nav{
    order:3; flex:1 0 100%;
    gap:2px 0; min-width:0;
    flex-wrap:wrap;
    padding-bottom:4px;
  }
  .main-nav > a, .nav-drop > a{ padding:10px 12px; }
}

@media (max-width:1080px){
  .hero-grid, .about-grid{ grid-template-columns:1fr; gap:44px; }
  .brand-grid, .trust-grid, .steps-grid{ grid-template-columns:1fr 1fr; }
  .card-grid, .card-grid.cols-4{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .banner{ grid-template-columns:1fr; padding:38px 32px; }
  .section{ padding:72px 0; }
}
@media (max-width:1080px){
  .catalog-controls{ grid-template-columns:1fr 1fr; }
  .product-detail{ grid-template-columns:1fr; gap:32px; }
  .scatter-item{ width: calc(var(--w) * .8); }
  .hero-usp{ grid-template-columns:1fr 1fr; gap:22px; }
}
@media (max-width:900px){
  .scatter-hero{ min-height:640px; }
  /* На узком экране оставляем шесть миниатюр — остальные превратились бы в кашу */
  .scatter-item:not(.scatter-item--core){ display:none; }
  .scatter-item{ width: calc(var(--w) * .62); border-width:4px; }
  /* Увеличенная миниатюра уходит ПОД текст: на телефоне она подсвечивается сама,
     и перекрывать ей заголовок нельзя. */
  .scatter-item:hover,
  .scatter-item.is-active{ z-index:2; transform: translate(-50%,-50%) rotate(var(--r)) scale(1.4); }
  /* Мягкая подложка, чтобы текст читался поверх фотографий */
  .scatter-center::before{
    content:""; position:absolute; inset:-28px -18px; z-index:-1;
    background: radial-gradient(ellipse at center, rgba(255,255,255,.97) 58%, rgba(255,255,255,0) 100%);
  }
}
@media (max-width:640px){
  .catalog-controls, .catalog-controls:has(.cat-jump){ grid-template-columns:1fr; }
  .container{ padding:0 18px; }
  .hero--scatter{ padding:24px 0 48px; }
  .scatter-hero{ min-height:560px; }
  .scatter-item{ width: calc(var(--w) * .46); border-width:3px; }
  /* Выпадающий список внутри прокручиваемой строки обрезался бы по краю,
     поэтому на телефонных экранах его прячем: категории есть на самой
     странице каталога, в виде вкладок. */
  .nav-drop-panel{ display:none; }
  /* Номер текстом не влезает в строку с логотипом — заменяем его кнопкой,
     чтобы шапка осталась в две строки, а не в три: она закреплена сверху
     и на телефоне съедала бы пятую часть экрана. */
  .header-inner{ padding:10px 16px; }
  .header-actions .phone-link{ display:none; }
  .icon-btn.call{ display:flex; }
  .header-actions{ gap:8px; }
  .icon-btn{ width:38px; height:38px; }
  .main-nav > a, .nav-drop > a{ font-size:11.5px; padding:9px 11px; }
  .logo-img{ height:36px; }
  .hero{ padding:48px 0 60px; }
  .hero-usp{ grid-template-columns:1fr; gap:18px; }
  /* На телефоне разворот карточек съедает края и мешает читать — раскладываем ровно */
  .hero-collage__stack{ aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-card{ position:static; width:auto; height:132px; transform:none; border-width:4px; }
  .hero-card--1{ grid-column:1 / -1; height:168px; }
  .hero-collage__stack:hover .hero-card--1,
  .hero-collage__stack:hover .hero-card--2,
  .hero-collage__stack:hover .hero-card--3{ transform:none; }
  .brand-grid, .trust-grid, .steps-grid,
  .card-grid, .card-grid.cols-4, .team-grid,
  .grid-2, .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .form-card{ padding:26px 22px; }
  .form-row{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .about-collage .ph{ height:120px; }
}

/* --------------------------------------------------------------------------
   СТРАНИЦА «О КОМПАНИИ»
   -------------------------------------------------------------------------- */
.about-hero{ padding:28px 0 8px; }
.about-hero__top{
  display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:end;
  margin:18px 0 4px;
}
.about-hero__top .lead{ max-width:none; padding-bottom:6px; }
.about-hero .hero-stats{ margin-top:32px; }
.about-hero__media{
  margin-top:40px; height:clamp(260px,38vw,440px); overflow:hidden;
  border:2px solid var(--black); border-radius:var(--radius-lg);
}
.about-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }

/* Коллаж из реальных фото вместо серых заглушек */
.about-shots{
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:205px; gap:14px;
  align-content:center;
}
.about-shot{
  overflow:hidden; border:2px solid var(--black); border-radius:var(--radius-lg);
}
.about-shot img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.about-shot:hover img{ transform:scale(1.05); }

/* Два направления */
.dir-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dir-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:2px solid var(--black); border-radius:var(--radius-lg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.dir-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.dir-card__media{ height:240px; overflow:hidden; border-bottom:2px solid var(--black); }
.dir-card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.dir-card:hover .dir-card__media img{ transform:scale(1.05); }
.dir-card__body{ display:flex; flex-direction:column; gap:12px; padding:26px 28px 28px; flex:1; }
.dir-card__body h3{ font-size:clamp(22px,2.2vw,30px); }
.dir-card__body p{ color:var(--gray-600); font-size:15px; line-height:1.55; }
.dir-card__brands{
  font-family:var(--font-body); font-size:12.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--black) !important;
}
.dir-card__link{
  margin-top:auto; padding-top:6px;
  font-family:var(--font-display); font-size:16px; letter-spacing:.03em;
  text-transform:uppercase; border-bottom:3px solid var(--yellow); align-self:flex-start;
}

/* Восемь причин */
.reason-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.reason{
  display:flex; flex-direction:column; gap:12px;
  padding:26px 24px 28px;
  background:var(--white); border:2px solid var(--black); border-radius:var(--radius-lg);
}
.reason__ic{
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--yellow); border-radius:999px;
}
.reason__ic .ico{ width:22px; height:22px; }
.reason h3{ font-family:var(--font-display); font-size:19px; line-height:1.15; }
.reason p{ color:var(--gray-600); font-size:14.5px; line-height:1.55; }

/* Выставки и регата — на чёрной секции */
.expo-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.expo{
  display:flex; flex-direction:column; gap:6px;
  padding:26px 28px; border:2px solid #2e2e2e; border-radius:var(--radius-lg);
}
.expo b{ font-family:var(--font-display); font-size:clamp(24px,2.4vw,32px); letter-spacing:.02em; }
.expo span{ font-size:13.5px; font-weight:700; color:#8f8f8a; }

.regatta{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:24px; padding:28px 30px;
  background:var(--yellow); color:var(--black); border-radius:var(--radius-lg);
}
.regatta__ic{
  width:54px; height:54px; flex-shrink:0; display:grid; place-items:center;
  background:var(--black); color:var(--yellow); border-radius:999px;
}
.regatta__ic .ico{ width:26px; height:26px; }
.regatta h3{ font-size:clamp(20px,2.2vw,27px); }
.regatta p{ margin-top:6px; font-size:15px; color:#4a3d00; max-width:62ch; }

/* Контакты */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.contact-card{
  display:flex; flex-direction:column;
  padding:28px; background:var(--white);
  border:2px solid var(--black); border-radius:var(--radius-lg);
}
.contact-card__label{
  font-family:var(--font-body); font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gray-600);
  margin-bottom:14px;
}
.contact-card__value{
  font-family:var(--font-display); font-size:clamp(19px,2vw,25px); line-height:1.25;
}
.contact-card__value a{ border-bottom:3px solid var(--yellow); }
.contact-card__note{ margin-top:12px; font-size:14px; color:var(--gray-600); line-height:1.55; }

@media (prefers-reduced-motion: reduce){
  .about-shot img, .dir-card, .dir-card__media img{ transition:none; }
  .about-shot:hover img, .dir-card:hover, .dir-card:hover .dir-card__media img{ transform:none; }
}
@media (max-width:1080px){
  .about-hero__top{ grid-template-columns:1fr; gap:20px; align-items:start; }
  .reason-grid{ grid-template-columns:1fr 1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .dir-grid{ grid-template-columns:1fr; }
  .expo-row{ grid-template-columns:1fr; }
  .about-shots{ grid-auto-rows:170px; }
}
@media (max-width:640px){
  .reason-grid{ grid-template-columns:1fr; }
  .about-shots{ grid-auto-rows:132px; gap:10px; }
  .dir-card__media{ height:190px; }
  .regatta{ padding:24px; gap:16px; }
}

/* Блок городов в подвале — внутренняя перелинковка на страницы доставки */
.footer-cities{ grid-column:1/-1; padding-top:28px; border-top:1px solid #2a2a2a; }
.footer-cities h3{ margin-bottom:12px; }
.footer-cities__list{ font-size:13.5px; line-height:2; color:#8f8f8a; }
.footer-cities__list a{ color:#b9b9b5; white-space:nowrap; }
.footer-cities__list a:hover{ color: var(--yellow); }

/* Статья блога */
.article{ max-width:70ch; }
.article h2{ font-size:clamp(21px,2.2vw,29px); margin:38px 0 14px; }
.article h2:first-child{ margin-top:0; }
.article p{ font-size:16px; line-height:1.75; color:var(--gray-900); margin-bottom:14px; }

/* Ссылки на статьи внизу страниц категорий */
.read-next{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:24px 28px; border:2px solid var(--black); border-radius:var(--radius-lg); }
.read-next h2{ font-size:17px; margin:0; flex:0 0 auto; }
.read-next a{ font-weight:700; font-size:15px; border-bottom:3px solid var(--yellow); }

/* Блоки внутри статьи */
.article-list, .article-steps{ margin:0 0 18px 22px; }
.article-list li, .article-steps li{ font-size:16px; line-height:1.7; margin-bottom:9px; }
.article-list{ list-style:disc; }
.article-steps{ list-style:decimal; }
.article-note{
  margin:22px 0; padding:20px 24px;
  background:var(--yellow-soft); border-left:5px solid var(--yellow);
  border-radius:0 var(--radius) var(--radius) 0;
}
.article-note p{ margin:0; font-size:15.5px; line-height:1.65; }
.article-table__wrap{ overflow-x:auto; margin:22px 0; }
.article-table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
.article-table th, .article-table td{
  padding:11px 14px; text-align:left; border-bottom:1px solid var(--gray-300);
}
.article-table th{
  font-family:var(--font-body); font-weight:800; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; border-bottom:2px solid var(--black);
}
.article-table tr:last-child td{ border-bottom:none; }
.article h3{ font-size:18px; margin:26px 0 10px; }
/* Ссылки внутри текста должны отличаться от текста — иначе по ним не кликают */
.article a, .article-note a, .text-link{
  font-weight:600; text-decoration:underline; text-decoration-color:var(--yellow-deep);
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.article a:hover, .article-note a:hover, .text-link:hover{ background:var(--yellow-soft); }
.article-photo{ margin:24px 0; }
.article-photo img{ width:100%; border-radius:var(--radius-lg); }
.article-photo figcaption{
  margin-top:9px; font-size:13.5px; line-height:1.5; color:var(--gray-600);
}

/* Блок подборок — ссылок много, поэтому он переносится по строкам */
.read-next--wrap{ align-items:flex-start; gap:12px 18px; }
.read-next--wrap h2{ flex:0 0 100%; margin-bottom:4px; }

/* Новости */
.news-date{ margin-top:14px; color:var(--gray-600); font-size:14px; font-weight:700; }
.news-gallery{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px; margin-top:34px;
}
.news-gallery figure{
  margin:0; overflow:hidden; border-radius:var(--radius-lg); border:2px solid var(--black);
}
.news-gallery img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:3/2; }

/* Самолёт летит от флагов США и Канады к флагу России по мере прокрутки.
   Линию маршрута не рисуем — движение читается само. Маршрут прямой, без
   дуги, поэтому на уровне флагов он прошёл бы прямо по заголовку: отводим
   самолёту отдельную полосу сверху и освобождаем её отступом. */
.origin-bar{ position:relative; }
@media (min-width:901px){
  /* Полоса сверху нужна и самолёту, и привезённой технике: её высота —
     это плитка груза плюс зазор. */
  .origin-bar{ padding-top:66px; }
}
/* На узком экране блок складывается в столбик: заголовку нужна вся строка,
   иначе флаг России не переносится и вылезает за рамку. */
@media (max-width:720px){
  .origin-bar{ gap:18px 16px; padding:22px; }
  .origin-bar > div:nth-child(2){ flex:1 1 100%; }
  .origin-bar .btn{ flex:1 1 auto; text-align:center; }
}

.route__plane{
  position:absolute; left:0; top:0; width:46px; height:46px;
  color: var(--black); pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  will-change: transform;
}
.route__plane svg{ width:100%; height:100%; display:block; }
.origin-bar.is-flying .route__plane{ opacity:1; }

/* Флаги лежат выше самолёта: на взлёте он выходит из-за флагов США и Канады,
   а на посадке уходит под рамку флага России. */
.country-flag{ position:relative; z-index:2; }

/* Флаг России отзывается, когда самолёт долетел — только лёгким подскоком,
   без подсветки цветом */
.country-flag--to{
  flex-shrink:0;
  transition: transform .4s cubic-bezier(.34,1.4,.5,1);
}
.origin-bar.is-arrived .country-flag--to{ transform: scale(1.1); }

/* Привезённая техника — выныривает над флагом России после посадки */
.route__cargo{
  position:absolute; left:0; top:0; display:flex; gap:8px;
  pointer-events:none; z-index:3;
}
.route__cargo > span{
  width:72px; height:50px; overflow:hidden;
  border:2px solid var(--black); border-radius:9px; background:var(--white);
  box-shadow:0 4px 10px rgba(0,0,0,.10);
  opacity:0; transform:translateY(12px) scale(.8);
  transition:opacity .3s ease, transform .45s cubic-bezier(.34,1.5,.5,1);
}
.route__cargo img{ width:100%; height:100%; object-fit:contain; display:block; }
.origin-bar.is-arrived .route__cargo > span{ opacity:1; transform:none; }
.origin-bar.is-arrived .route__cargo > span:nth-child(2){ transition-delay:.10s; }
.origin-bar.is-arrived .route__cargo > span:nth-child(3){ transition-delay:.20s; }

@media (prefers-reduced-motion: reduce){
  .route__plane{ display:none; }
  .country-flag--to{ transition:none; }
  .route__cargo > span{ transition:none; }
}
/* На телефоне блок перестраиваем в сетку: флаги отправления и назначения
   встают в одну строку по краям, текст и кнопка уходят под них. Тогда
   маршрут проходит над пустым местом между флагами, а не поперёк
   заголовка, и самолёт с грузом работают так же, как на большом экране. */
@media (max-width:900px){
  .origin-bar{
    display:grid; grid-template-columns:auto auto;
    justify-content:space-between; align-items:center;
    gap:16px 12px; padding:54px 22px 22px;
  }
  .origin-bar > .country-badges{ grid-area:1 / 1; }
  .origin-bar > .country-flag--to{ grid-area:1 / 2; justify-self:end; }
  .origin-bar > div:nth-child(2){ grid-area:2 / 1 / 3 / 3; }
  .origin-bar > .btn{ grid-area:3 / 1 / 4 / 3; text-align:center; }
  /* Самолёт летит и на телефоне, а вот привезённую технику над флагом не
     показываем: на узкой карточке три плитки перегружают блок. */
  .route__cargo{ display:none; }
  .route__plane{ width:38px; height:38px; }
}

/* --------------------------------------------------------------------------
   МОБИЛЬНАЯ АДАПТАЦИЯ
   -------------------------------------------------------------------------- */

/* Бургер. В разметке его нет — добавляет main.js, поэтому по умолчанию
   элемент отсутствует, а без JS остаётся обычное меню. */
.burger{
  display:none;
  width:42px; height:42px; flex-shrink:0;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border:2px solid var(--black); border-radius:var(--radius);
  background:var(--white); cursor:pointer;
}
.burger span{
  display:block; width:18px; height:2px; background:var(--black);
  border-radius:2px; transition:transform .22s ease, opacity .16s ease;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mnav{
  position:fixed; left:0; right:0; bottom:0; z-index:199;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 18px calc(24px + env(safe-area-inset-bottom));
  background:var(--white); border-top:1px solid var(--gray-300);
  opacity:0; transform:translateY(-10px);
  transition:opacity .18s ease, transform .22s ease;
}
.mnav.is-open{ opacity:1; transform:none; }
.mnav__list{ display:flex; flex-direction:column; }
.mnav__list > a{
  padding:15px 6px; border-bottom:1px solid var(--gray-300);
  font-family:var(--font-body); font-weight:800; font-size:15px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--black);
}
.mnav__list > a::after{ display:none; }
.mnav__list > a.active{ color:var(--black); background:var(--yellow-soft); }
.mnav__sub{ display:flex; flex-direction:column; padding:4px 0 8px 14px; }
.mnav__sub a{
  padding:11px 6px; font-size:14.5px; font-weight:600; color:var(--gray-600);
}
.mnav__sub a::after{ display:none; }
.mnav__contacts{ margin-top:20px; }
.mnav__contacts .btn{ width:100%; }
.mnav__im{ display:flex; gap:10px; margin-top:12px; }
.mnav__im .icon-btn{ flex:1; height:46px; width:auto; border-radius:var(--radius); }
body.mnav-lock{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .mnav{ transition:none; }
  .burger span{ transition:none; }
}

/* Разлёт фотографий в герое рассчитан на широкий экран: там по бокам от
   текста есть поля. На узком их нет, и по тем же процентам миниатюры уезжали
   за края и ложились на заголовок. Поэтому у шести «ядровых» в разметке
   заданы вторые координаты (--mx/--my/--mw/--mr): три полосой над текстом,
   три под ним. По вертикали они заданы отступом от края в пикселях, а не в
   процентах: высота героя зависит от того, на сколько строк перенесётся
   текст, и проценты разъезжались бы от ширины к ширине. */
@media (max-width:900px){
  .scatter-center{ padding:140px 0; }
  .scatter-hero{ min-height:0; }
  /* Белая подложка нужна была, когда фотографии лежали за текстом. Теперь
     они вынесены в полосы, а подложка растянулась вместе с отступами и
     выбеливала как раз их — убираем. */
  .scatter-center::before{ display:none; }
  .scatter-item{
    left:var(--mx, var(--x));
    top:var(--my, var(--y));
    width:var(--mw, calc(var(--w) * .62));
    transform: translate(-50%,-50%) rotate(var(--mr, var(--r)));
    border-width:3px;
  }
  .scatter-item:hover,
  .scatter-item.is-active{
    transform: translate(-50%,-50%) rotate(var(--mr, var(--r))) scale(1.45);
  }
}

@media (max-width:900px){
  /* Меню уезжает в бургер только когда скрипт его собрал */
  html.has-mnav .main-nav{ display:none; }
  html.has-mnav .burger{ display:flex; }
  /* без переноса шапка снова становится одной строкой */
  html.has-mnav .header-inner{ flex-wrap:nowrap; }
  /* Логотип, корзина, звонок и бургер — на 390px это ровно то, что влезает.
     Мессенджеры никуда не пропадают: они внутри меню. */
  html.has-mnav .header-actions .icon-btn.wa,
  html.has-mnav .header-actions .icon-btn.tg{ display:none; }
}

@media (max-width:640px){
  /* Каталог в две колонки: одна колонка растягивала страницу категории
     почти на пятнадцать тысяч пикселей — до нижних моделей не долистать. */
  .card-grid:has(.product-card),
  .card-grid.cols-4:has(.product-card){ grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-media{ height:132px; }
  .product-body{ padding:12px 12px 14px; gap:7px; }
  .product-body h4{ font-size:14.5px; line-height:1.12; }
  .product-meta{ font-size:11.5px; }
  .product-price{ font-size:18px; padding-top:4px; }
  .product-price .old{ font-size:12px; margin-left:6px; display:block; }
  .badge{ top:8px; right:8px; padding:5px 8px; font-size:9.5px; }
  .product-actions{ flex-direction:column; gap:8px; margin-top:10px; }
  .product-actions .btn{ padding:11px 8px; font-size:12.5px; }

  /* Кнопки в столбик и во всю ширину: две разной длины по центру выглядели
     случайно, а палец всё равно целится в край экрана. */
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row > .btn{ width:100%; }

  /* Плавающая кнопка накрывала кнопку «Купить» у правой карточки — на
     телефоне делаем её компактнее и ближе к углу. */
  .float-tg{ width:46px; height:46px; right:12px; bottom:12px; }
  .float-tg .ico, .float-tg svg{ width:22px; height:22px; }

  /* Фильтры каталога — за кнопкой */
  .catalog-controls{ padding:14px; gap:10px; }
  .catalog-controls > :not(.cat-jump):not(.filters-toggle){ display:none; }
  .catalog-controls.filters-open > *{ display:block; }
  .catalog-controls.filters-open > .cat-jump{ display:block; }
  .filters-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; padding:13px 16px;
    border:2px solid var(--black); border-radius:var(--radius);
    background:var(--white); color:var(--black); cursor:pointer;
    font-family:var(--font-body); font-weight:700; font-size:14.5px;
  }
  .filters-toggle .ico{
    width:11px; height:11px; transform:rotate(90deg); transition:transform .2s ease;
  }
  .catalog-controls.filters-open .filters-toggle .ico{ transform:rotate(-90deg); }
}

/* Кнопка есть только на телефоне: на широком экране все фильтры видны сразу */
@media (min-width:641px){ .filters-toggle{ display:none; } }

/* Сообщение формы, когда заявку отправить не удалось: посетитель должен
   увидеть, что обращение не ушло, и получить рабочий способ связаться. */
.form-note--error{
  color:var(--red); font-weight:800;
  border-left:4px solid var(--red); padding-left:12px;
}
/* Ловушка для роботов: людям не видна, скринридерам не читается. */
.form-hp{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

/* --------------------------------------------------------------------------
   ПРЕДЛОЖЕНИЕ В КАРТОЧКЕ МОДЕЛИ

   Справа от характеристик оставалось пустое поле в пол-экрана. По мере
   прокрутки туда из-за правого края экрана выезжает техника этой модели
   с табличкой-предложением. Сдвиг считает js/catalog.js, здесь — вид.
   -------------------------------------------------------------------------- */
.product-info__text{ align-self:stretch; }

/* Ни рамки, ни фона, ни обрезки: блок должен выезжать из края ЭКРАНА,
   а не из края колонки. Обрезают его html/body — у них overflow-x скрыт. */
.offer{ position:relative; margin-top:40px; }

/* Табличка и техника едут одним целым */
.offer__move{
  display:flex; align-items:center; gap:10px;
  will-change:transform;
}

/* Табличка — меньше техники и вплотную к ней */
.offer__text{
  flex:0 0 230px; padding:16px 16px 15px;
  border:2px solid var(--black); border-radius:var(--radius-lg);
  background:var(--white); box-shadow:var(--shadow);
}
.offer__eyebrow{
  font-family:var(--font-body); font-size:10.5px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gray-600);
  margin-bottom:6px;
}
.offer__head{ font-size:19px; line-height:1.08; }
.offer__actions{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.offer__actions .btn{ width:100%; padding:10px 12px; font-size:13px; }

/* Техника */
.offer__vehicle{ position:relative; flex:1 1 auto; max-width:440px; }
/* Студийные кадры сняты мордой вправо, а едет техника справа налево —
   разворачиваем её к центру страницы. */
.offer__rig{
  position:relative; z-index:2;
  display:block; width:100%; height:auto; transform:scaleX(-1);
}

/* ---- Что летит из-под техники ----
   Частицы вылетают сзади (справа — машина развёрнута мордой влево) и видны,
   только пока техника едет: класс is-moving ставит скрипт по ходу прокрутки.
   Фон страницы светлый, поэтому снег, брызги и пена не чисто белые, а с
   холодным оттенком и лёгкой тенью — иначе их просто не видно. */
.offer__fx{
  position:absolute; z-index:1; pointer-events:none;
  right:10%; bottom:12%; width:0; height:0;
  opacity:0; transition:opacity .3s ease;
}
.offer.is-moving .offer__fx{ opacity:1; }
.offer__fx i{
  position:absolute; left:0; top:0; display:block; border-radius:50%;
  opacity:0;
  animation:offer-fly var(--dur, .9s) var(--del, 0s) infinite cubic-bezier(.15,.7,.3,1);
}
@keyframes offer-fly{
  0%   { transform:translate(0,0) scale(var(--s0, .4)); opacity:0; }
  12%  { opacity:var(--op, 1); }
  100% { transform:translate(var(--dx), var(--dy)) scale(var(--s1, 1.6)); opacity:0; }
}
@keyframes offer-clod{
  0%   { transform:translate(0,0) rotate(0deg); opacity:0; }
  8%   { opacity:1; }
  50%  { transform:translate(calc(var(--dx) * .55), var(--dy)) rotate(170deg); }
  100% { transform:translate(var(--dx), calc(var(--dy) * -.5)) rotate(340deg); opacity:0; }
}

/* разброс: направление, дальность и задержка у каждой частицы свои */
.offer__fx i:nth-child(1) { --dx:120px; --dy: -60px; --del:0s;    --dur:.9s;  }
.offer__fx i:nth-child(2) { --dx:190px; --dy: -24px; --del:.07s;  --dur:1s;   }
.offer__fx i:nth-child(3) { --dx: 90px; --dy: -96px; --del:.14s;  --dur:.85s; }
.offer__fx i:nth-child(4) { --dx:230px; --dy: -70px; --del:.21s;  --dur:1.1s; }
.offer__fx i:nth-child(5) { --dx:150px; --dy: -10px; --del:.28s;  --dur:.9s;  }
.offer__fx i:nth-child(6) { --dx:110px; --dy: -44px; --del:.35s;  --dur:.8s;  }
.offer__fx i:nth-child(7) { --dx:250px; --dy: -40px; --del:.42s;  --dur:1.15s;}
.offer__fx i:nth-child(8) { --dx:170px; --dy: -88px; --del:.49s;  --dur:1s;   }
.offer__fx i:nth-child(9) { --dx:140px; --dy: -30px; --del:.56s;  --dur:.9s;  }
.offer__fx i:nth-child(10){ --dx:210px; --dy:-110px; --del:.63s;  --dur:1.1s; }
.offer__fx i:nth-child(11){ --dx: 80px; --dy: -20px; --del:.70s;  --dur:.75s; }
.offer__fx i:nth-child(12){ --dx:270px; --dy: -58px; --del:.77s;  --dur:1.2s; }
.offer__fx i:nth-child(13){ --dx:160px; --dy: -74px; --del:.84s;  --dur:.95s; }
.offer__fx i:nth-child(14){ --dx:120px; --dy: -14px; --del:.91s;  --dur:.85s; }

/* Снег: клубы и хлопья из-под гусеницы */
.offer__fx--snow{ right:5%; bottom:13%; }
.offer__fx--snow i{
  width:30px; height:30px; margin:-15px 0 0 -15px;
  background:radial-gradient(circle at 40% 38%, #fff 0 32%, #dfe8f1 55%, rgba(205,220,235,0) 72%);
  filter:blur(1.2px) drop-shadow(0 2px 3px rgba(60,85,120,.28));
  --s0:.35; --s1:2.6;
}
.offer__fx--snow i:nth-child(3n){ width:44px; height:44px; margin:-22px 0 0 -22px; --s1:3; }
.offer__fx--snow i:nth-child(4n){
  width:7px; height:7px; margin:-3px 0 0 -3px; filter:none;
  background:#fff; box-shadow:0 0 0 1px rgba(70,95,130,.35); --s1:1;
}

/* Грязь: комья из-под заднего колеса и облако пыли */
.offer__fx--mud{ right:12%; bottom:9%; }
.offer__fx--mud i{
  width:12px; height:9px; margin:-5px 0 0 -6px;
  background:#4b3522; border-radius:45% 55% 38% 62%;
  animation-name:offer-clod; animation-timing-function:cubic-bezier(.25,.6,.4,1);
}
.offer__fx--mud i:nth-child(2n){ width:16px; height:12px; background:#6b4b2c; }
.offer__fx--mud i:nth-child(3n){ width:8px; height:6px; background:#35251a; }
.offer__fx--mud i:nth-child(5n){
  width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:radial-gradient(circle, rgba(150,118,84,.55) 0 35%, rgba(150,118,84,0) 70%);
  filter:blur(2px); animation-name:offer-fly; --s0:.5; --s1:2.4;
}

/* Брызги: вода разлетается в обе стороны от корпуса */
.offer__fx--spray{ right:auto; left:52%; bottom:15%; }
.offer__fx--spray i{
  width:12px; height:12px; margin:-6px 0 0 -6px;
  background:radial-gradient(circle at 35% 35%, #fff 0 25%, #7cc4ef 55%, rgba(124,196,239,0) 72%);
  filter:drop-shadow(0 1px 2px rgba(20,90,140,.3));
  --s0:.5; --s1:1.9;
}
.offer__fx--spray i:nth-child(odd){ --dx:-150px; }
.offer__fx--spray i:nth-child(3){ --dx:-100px; }
.offer__fx--spray i:nth-child(7){ --dx:-220px; }
.offer__fx--spray i:nth-child(4n){
  width:40px; height:40px; margin:-20px 0 0 -20px;
  background:radial-gradient(circle, rgba(150,208,242,.6) 0 30%, rgba(150,208,242,0) 70%);
  filter:blur(2px); --s1:2.6;
}

/* Катер: пенный след вдоль ватерлинии и веер у кормы */
.offer__fx--wake{ right:0; bottom:4%; }
.offer__fx--wake i{
  width:70px; height:8px; margin:-4px 0 0 -12px; border-radius:8px;
  background:linear-gradient(90deg, rgba(120,175,215,0), #cfe6f6 35%, #fff 60%, rgba(120,175,215,.5));
  filter:drop-shadow(0 1px 2px rgba(30,90,140,.3));
  --s0:.4; --s1:1.8; --dy:0px;
}
.offer__fx--wake i:nth-child(2n){ --dy:6px; width:50px; }
.offer__fx--wake i:nth-child(3n){ --dy:-8px; }
.offer__fx--wake i:nth-child(4n){
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0 25%, #8ccbf0 60%, rgba(140,203,240,0) 74%);
  --dy:-50px;
}

@media (prefers-reduced-motion: reduce){
  .offer__move{ transform:none !important; }
  .offer__fx{ display:none; }
}

@media (max-width:900px){
  .offer{ margin-top:28px; }
  /* На узком экране табличка над техникой, но едут вместе. Табличка всё
     равно должна быть меньше техники: ей две трети ширины, технике — вся. */
  .offer__move{ flex-direction:column; align-items:flex-start; gap:0; }
  .offer__text{ flex:none; width:64%; }
  /* Технике не во всю ширину: иначе корма упирается в край экрана и снег,
     грязь и брызги сразу улетают за него. Разлёт частиц тоже короче. */
  .offer__vehicle{ max-width:none; width:84%; margin-top:-4px; }
  .offer__fx{ scale:.6; transform-origin:0 0; }
}

/* --------------------------------------------------------------------------
   ХАБ КАТАЛОГА

   Те же карточки брендов, что в блоке BRP на главной, только компактнее:
   вся страница — заголовок, пять направлений и строка с заявкой — должна
   умещаться в один экран. Поэтому высота считается от экрана минус шапка,
   а сетка забирает остаток и сама раздаёт его карточкам.
   -------------------------------------------------------------------------- */
.catalog-hub{
  --hdr:92px;
  min-height:calc(100vh - var(--hdr));
  min-height:calc(100dvh - var(--hdr));
  padding:18px 0 16px;
  display:flex; flex-direction:column;
}
.catalog-hub > .container{ flex:1; display:flex; flex-direction:column; gap:10px; }
.catalog-hub .breadcrumb{ margin:0; }
.catalog-hub h1{ margin:0; }
.hub-lead{ color:var(--gray-600); font-size:15.5px; margin:0; max-width:70ch; }

.brand-grid--hub{
  flex:1; min-height:0; gap:14px;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:1fr 1fr;
}
.brand-grid--hub .brand-tile{
  grid-column:span 2;
  min-height:0;                       /* высоту раздаёт сетка, а не карточка */
  padding:20px 20px 0;
}
/* пять направлений: нижний ряд — две карточки пошире; с Lynx их шесть, по три в ряд */
.brand-grid--hub .brand-tile:nth-child(4):nth-last-child(2),
.brand-grid--hub .brand-tile:nth-child(5):last-child{ grid-column:span 3; }
.brand-grid--hub .brand-tile__top{ gap:9px; }
.brand-grid--hub .brand-kind{ font-size:11px; }
.brand-grid--hub .brand-logo{ height:26px; }
.brand-grid--hub .brand-tile p{ font-size:14px; line-height:1.35; margin:0; }
/* Высота у фотографии должна быть заданной: при height:auto картинка
   разворачивается в собственные пропорции и распирает карточку, а вся
   страница перестаёт помещаться в экран. */
.brand-grid--hub .brand-tile__photo{
  position:relative;
  margin:12px -20px 0; height:clamp(88px, 12vh, 132px); flex:0 0 auto;
}
/* Снимок кладём абсолютно. Иначе он участвует в расчёте высоты: при
   height:100% в контейнере без заданной высоты картинка разворачивается в
   собственные пропорции, распирает карточку — и страница перестаёт
   помещаться в экран (так и ломалось на планшете). */
.brand-grid--hub .brand-tile__photo img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.brand-wordmark{
  font-family:var(--font-body); font-weight:800; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.5;
  hyphens:none;                 /* иначе «CHRIS-CRAFT» рвётся переносом */
}
.brand-tile__count{
  position:absolute; top:18px; right:18px; z-index:2;
  font-family:var(--font-body); font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius);
  background:rgba(0,0,0,.14);
}
.brand-tile--canam .brand-tile__count,
.brand-tile--seadoo .brand-tile__count,
.brand-tile--marine .brand-tile__count{ background:rgba(255,255,255,.18); }

.hub-foot{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px 18px;
  border:2px solid var(--black); border-radius:var(--radius-lg);
  background:var(--white);
}
.hub-foot p{ margin:0; font-size:15px; color:var(--gray-600); }
.hub-foot .btn{ flex-shrink:0; }

/* Ноутбуки с невысоким экраном (1280×720, 1366×768): места по вертикали
   меньше, чем на настольном мониторе, а уместиться страница должна так же.
   Ужимаем то, без чего выбор направления не страдает. */
@media (min-width:901px) and (max-height:820px){
  .hub-lead{ display:none; }
  .catalog-hub h1{ font-size:40px; }
  .brand-grid--hub{ gap:12px; }
  .brand-grid--hub .brand-tile{ padding:14px 16px 0; }
  .brand-grid--hub .brand-tile p{ font-size:13px; }
  .brand-grid--hub .brand-logo{ height:23px; }
  .brand-grid--hub .brand-tile__photo{
    margin:10px -16px 0; height:clamp(72px, 11vh, 110px);
  }
  .brand-tile__count{ top:14px; right:14px; }
}

@media (max-width:900px){
  .catalog-hub{ --hdr:63px; }
  /* Столбиком и «лёжа»: цветной блок с логотипом слева, фотография справа —
     пять вертикальных карточек с фото в экран не поместились бы. */
  .brand-grid--hub{
    grid-template-columns:1fr; grid-template-rows:repeat(6,1fr); gap:8px;
  }
  .catalog-hub h1{ font-size:30px; }
  .brand-grid--hub .brand-tile,
  .brand-grid--hub .brand-tile:nth-child(4),
  .brand-grid--hub .brand-tile:nth-child(5){
    grid-column:span 1;
    flex-direction:row; align-items:center; justify-content:flex-start;
    padding:12px 0 12px 16px; gap:12px;
  }
  .brand-grid--hub .brand-tile__top{ flex:1; gap:6px; }
  .brand-grid--hub .brand-logo{ height:22px; }
  .brand-grid--hub .brand-tile p{ display:none; }
  .brand-wordmark{ font-size:11px; line-height:1.35; }
  /* В узкой карточке пять верфей переносились в три строки — оставляем три
     первых, остальные и так видны в каталоге катеров. */
  .brand-wordmark__more{ display:none; }
  /* фото во всю высоту рамки: отрицательный отступ съедает вертикальные
     поля карточки (8px, см. padding ниже) */
  .brand-grid--hub .brand-tile__photo{
    margin:-8px 0; flex:0 0 34%; align-self:stretch; height:auto; min-height:0;
  }
  /* высоту задаёт карточка, картинка внутри лежит абсолютно */
  .brand-grid--hub .brand-tile{ overflow:hidden; }
  .brand-tile__count{ position:static; padding:0; background:none !important; opacity:.75; }
  .brand-grid--hub .brand-tile__top .brand-kind{ font-size:10.5px; }
  .hub-foot{ flex-direction:column; align-items:stretch; gap:8px; padding:11px; }
  .hub-foot p{ font-size:13.5px; }
  /* Подзаголовок на телефоне убираем: карточки сами показывают, что внутри,
     а экран нужен под них. */
  .hub-lead{ display:none; }
  .brand-grid--hub .brand-tile,
  .brand-grid--hub .brand-tile:nth-child(4),
  .brand-grid--hub .brand-tile:nth-child(5){ padding:8px 0 8px 14px; }
  .hub-foot .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   ЛЕСТНИЦА КОМПЛЕКТАЦИЙ НА СТРАНИЦЕ ТОВАРА

   По образцу конфигуратора BRP/дилеров: список соседних комплектаций той
   же линейки с ценой относительно текущей. У нас без переключения без
   перезагрузки — клик по строке ведёт на собственную страницу модели
   (у каждой комплектации она уже есть ради SEO), а не подменяет контент
   на месте.
   -------------------------------------------------------------------------- */
.trim-ladder{
  margin-top:16px;
  border:2px solid var(--black); border-radius:var(--radius-lg);
  overflow:hidden;
}
.trim-ladder__label{
  margin:0; padding:11px 16px;
  font-family:var(--font-body); font-size:11px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gray-600);
  background:var(--gray-50); border-bottom:1px solid var(--gray-300);
}
.trim-ladder__list{ max-height:288px; overflow-y:auto; }
.trim-ladder__row{
  display:flex; align-items:center; justify-content:space-between; gap:8px 14px;
  flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--gray-300);
  font-family:var(--font-body); font-size:13.5px; color:var(--black);
  transition:background-color .15s ease;
}
.trim-ladder__list .trim-ladder__row:last-child{ border-bottom:none; }
.trim-ladder__row:not(.is-current):hover{ background:var(--gray-50); }
.trim-ladder__row.is-current{
  background:var(--black); color:#fff; font-weight:800; cursor:default;
}
.trim-ladder__row.is-current .trim-ladder__delta{ color:var(--yellow); }
.trim-ladder__name{
  /* Узкая колонка конфигуратора — имени комплектации даём перенос на вторую
     строку вместо обрезки многоточием, само слово при этом не рвём. */
  min-width:0; overflow-wrap:break-word;
}
.trim-ladder__delta{
  flex-shrink:0; font-weight:700; color:var(--gray-600);
  font-variant-numeric:tabular-nums;
}
.trim-ladder__hint{
  margin:8px 2px 0; font-size:12.5px; line-height:1.4; color:var(--gray-600);
}

/* --------------------------------------------------------------------------
   Согласие на cookie. Выше плавающих кнопок и подсказки, ниже формы заявки.
   -------------------------------------------------------------------------- */
.cookie-banner{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:350;
  width:min(680px, calc(100% - 32px)); display:flex; align-items:center; gap:18px;
  padding:16px 18px; background:var(--white); border:2px solid var(--black);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0; font-size:14px; line-height:1.5; color:var(--gray-900); }
.cookie-banner p a{ text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:8px; flex-shrink:0; }
/* На телефоне — узкая плашка у нижнего края: раньше она закрывала четверть экрана
   прямо над ценой и кнопкой заявки. Длинная часть текста прячется. */
@media (max-width:640px){
  .cookie-banner{ left:8px; right:8px; bottom:8px; width:auto; transform:none;
    gap:10px; padding:10px 12px; border-width:1.5px; }
  .cookie-banner p{ font-size:12.5px; line-height:1.35; }
  .cookie-banner__long{ display:none; }
  .cookie-banner__actions{ flex-direction:column; gap:6px; }
  .cookie-banner__actions .btn{ padding:7px 14px; font-size:12.5px; }
}

/* Звезда рядом с оценкой: в шрифте цифр символа ★ нет, поэтому иконка */
.hero-stat__star{ width:.78em; height:.78em; margin-left:.1em; vertical-align:-.02em; }

/* Статья: даты и время чтения, оглавление; лента блога — пагинация цифрами (курс «Цех Васина», урок 1.9) */
.article-meta{ margin-top:14px; font-size:14px; color: var(--gray-600); }
.article-meta time{ white-space:nowrap; }
.article-toc{ border:1px solid var(--gray-300); border-radius:14px; padding:18px 22px; margin:0 0 30px; background: var(--gray-50); }
.article-toc__title{ margin:0 0 8px; font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.05em; }
.article-toc ol{ margin:0; padding-left:20px; display:grid; gap:6px; }
.article .article-toc a{ border-bottom:0; font-weight:600; }
.article h2[id]{ scroll-margin-top: 96px; }
.article-note--source{ margin-top:30px; }
.pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:40px; }
.pagination a, .pagination span{ min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--gray-300); border-radius:999px; font-weight:700; }
.pagination .pagination__current{ background: var(--black); border-color: var(--black); color:#fff; }
.pagination a:hover{ border-color: var(--black); }

/* ------------------------------------------------------------------
   Конфигуратор катеров Sea Ray (js/boat-config.js) — по образцу
   Build & Price на searay.com: слева катер из слоёв и цена, справа
   разделы с опциями. На телефоне катер прилипает к верху экрана,
   чтобы видеть, как меняется лодка, пока листаешь опции.
   ------------------------------------------------------------------ */
.bc-section{ border-top:1px solid var(--gray-300); }
.bc-lead{ margin-top:14px; color: var(--gray-600); max-width:68ch; }
.bc{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:48px; align-items:start; }
.bc__stage{ position:sticky; top:96px; }
.bc__canvas{
  position:relative; aspect-ratio:1200/792; border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, var(--gray-100) 70%);
}
.bc__canvas img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* слои новой опции ещё грузятся */
.bc__canvas.is-loading::after{
  content:""; position:absolute; top:14px; right:14px; z-index:2; width:22px; height:22px;
  border:2.5px solid var(--gray-300); border-top-color: var(--black); border-radius:50%;
  animation: bc-spin .8s linear infinite;
}
@keyframes bc-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .bc__canvas.is-loading::after{ animation:none; border-color: var(--black); } }
.bc__views{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.bc__views .unit-pill{ padding:8px 16px; font-size:13px; }
.bc__total{ margin-top:22px; padding-top:18px; border-top:1px solid var(--gray-300); }
.bc__total-label{ margin:0; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-600); }
.bc__total-usd{ margin:6px 0 0; font-family: var(--font-display); font-size:clamp(30px,3.6vw,42px); font-variant-numeric: tabular-nums; }
.bc__total-rub{ margin:4px 0 0; font-size:14px; color: var(--gray-600); }

/* Список опций прокручивается сам, катер слева остаётся на виду
   (position:sticky на сайте не срабатывает — у html/body overflow-x: hidden). */
.bc__panel{
  display:flex; flex-direction:column; gap:12px;
  max-height:calc(100vh - 120px); overflow-y:auto;
  padding-right:6px; scrollbar-width:thin;
}
.bc-cat{ border:1px solid var(--gray-300); border-radius: var(--radius-lg); background:#fff; }
.bc-cat > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; cursor:pointer; list-style:none;
  font-family: var(--font-display); font-size:22px; letter-spacing:.01em;
}
.bc-cat > summary::-webkit-details-marker{ display:none; }
.bc-cat > summary::after{ content:"+"; font-family: var(--font-body); font-weight:700; font-size:22px; color: var(--gray-600); }
.bc-cat[open] > summary::after{ content:"–"; }
.bc-cat__count{ margin-left:auto; font-family: var(--font-body); font-size:12px; font-weight:700; color: var(--gray-600); }
.bc-sub{ padding:4px 20px 18px; }
.bc-sub + .bc-sub{ border-top:1px solid var(--gray-100); padding-top:16px; }
.bc-sub__title{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-600); }
.bc-sub__hint{ text-transform:none; letter-spacing:0; font-weight:600; }

.bc-swatches{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:10px; }
.bc-swatch{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px;
  border:1.5px solid transparent; border-radius: var(--radius-lg); background:none; cursor:pointer;
  font: inherit; color: var(--ink); text-align:center;
}
.bc-swatch:hover{ border-color: var(--gray-300); }
.bc-swatch.active{ border-color: var(--black); }
.bc-swatch__chip{
  width:48px; height:48px; border-radius:50%; background-size:cover; background-position:center;
  box-shadow: inset 0 0 0 1px rgba(10,10,10,.15);
}
.bc-swatch.active .bc-swatch__chip{ box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--seadoo); }
.bc-swatch__name{ font-size:12.5px; font-weight:700; line-height:1.25; }
.bc-swatch__price{ font-size:12px; color: var(--gray-600); font-variant-numeric: tabular-nums; }

.bc-opts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.bc-opt{ border:1.5px solid var(--gray-100); border-radius: var(--radius-lg); background: var(--gray-50); }
.bc-opt.is-on{ border-color: var(--black); background:#fff; }
.bc-opt__row{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; padding:12px 14px; cursor:pointer; }
.bc-opt__row input{ margin-top:3px; width:18px; height:18px; accent-color: var(--black); }
.bc-opt__name{ font-size:14.5px; line-height:1.35; overflow-wrap:anywhere; }
.bc-opt__price{ font-size:14px; font-weight:700; white-space:nowrap; font-variant-numeric: tabular-nums; }
.bc-opt__more{ padding:0 14px 12px 44px; font-size:13.5px; color: var(--gray-600); }
.bc-opt__more summary{ cursor:pointer; font-weight:700; color: var(--gray-900); }
.bc-opt__more p{ margin:8px 0 0; white-space:pre-line; overflow-wrap:anywhere; }
/* «Фото» опции: катер с этой опцией в окне поверх страницы */
.bc-opt__photo{
  display:block; margin:-4px 14px 10px 44px; padding:0; border:0; background:none;
  font:inherit; font-size:13.5px; font-weight:700; color: var(--gray-900);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer;
}
.bc-opt__photo:hover{ color: var(--black); text-decoration-color: var(--yellow-deep); }
.bc-lb{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:16px; background: rgba(10,10,10,.72);
}
.bc-lb[hidden]{ display:none; }
.bc-lb__box{
  position:relative; width:min(920px, 100%, calc((100vh - 240px) * 1.515)); min-width:min(320px, 100%);
  max-height:calc(100vh - 32px); overflow:auto;
  padding:20px; background:#fff; border-radius: var(--radius-lg);
}
.bc-lb__close{
  position:absolute; top:8px; right:8px; z-index:2; width:40px; height:40px; border:0; border-radius:50%;
  background: var(--gray-100); font-size:24px; line-height:1; cursor:pointer;
}
.bc-lb__close:focus-visible, .bc-opt__photo:focus-visible{ outline:2px solid var(--black); outline-offset:2px; }
.bc-lb__views:empty{ display:none; }
.bc-lb__name{ margin:14px 0 2px; font-size:16px; font-weight:800; line-height:1.35; }
.bc-lb__price{ margin:0 0 14px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.bc-lb__pick:disabled{ opacity:.55; cursor:default; }
html.bc-lb-open{ overflow:hidden; }

.bc-note{
  margin:14px 0 0; padding:12px 16px; border-left:3px solid var(--yellow);
  background: var(--yellow-soft); border-radius: var(--radius); font-size:14px;
}
.bc-note[hidden], .bc-mini__note[hidden]{ display:none; }
.bc-mini__note{ margin:2px 0 0; font-size:11.5px; line-height:1.3; color: var(--gray-900); }
.bc-summary{ margin-top:12px; padding:22px 20px; border-radius: var(--radius-lg); background: var(--gray-100); }
.bc-summary h3{ margin:0 0 12px; font-size:22px; }
.bc-summary__list{ list-style:none; margin:0; padding:0; font-size:14px; }
.bc-summary__list li{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--gray-300); }
.bc-summary__list b{ white-space:nowrap; font-variant-numeric: tabular-nums; }
.bc-summary__total{ font-weight:800; border-bottom:none !important; padding-top:12px !important; font-size:15.5px; }
.bc-summary__fine{ margin:14px 0 0; font-size:13px; color: var(--gray-600); }
.bc-summary .btn-row > .btn{ flex:1 1 auto; }

.bc-mini{
  position:fixed; left:12px; right:84px; bottom:12px; z-index:60;
  display:flex; align-items:center; gap:12px; padding:6px 14px 6px 6px;
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.bc-mini[hidden]{ display:none; }
.bc-mini__boat{ padding:0; border:0; background: var(--gray-100); border-radius: var(--radius); cursor:pointer; }
.bc-mini__canvas{ position:relative; display:block; width:110px; aspect-ratio:1200/792; }
.bc-mini__canvas img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.bc-mini__label{ margin:0; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--gray-600); }
.bc-mini__text{ min-width:0; }
.bc-mini__usd{ margin:2px 0 0; font-family: var(--font-display); font-size:22px; font-variant-numeric: tabular-nums; }

@media (max-width:900px){
  .bc{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .bc__stage{ position:static; }
  .bc__panel{ max-height:none; overflow:visible; padding-right:0; }
  .bc__total-usd{ font-size:30px; }
  .bc-sub{ padding:4px 14px 16px; }
  .bc-cat > summary{ padding:16px 14px; font-size:20px; }
  .bc-summary{ margin-bottom:84px; }
}
@media (max-width:360px){
  .bc-mini__canvas{ width:84px; }
  .bc-mini__usd{ font-size:18px; }
  .bc-swatches{ grid-template-columns:repeat(auto-fill, minmax(80px,1fr)); }
}

/* Гидроциклы: картинка ниже плашки «N комплектаций», чтобы та не закрывала гидроцикл (03.10.2026).
   Блок выше на высоту плашки, сама картинка того же размера. Только в сетках из одних гидроциклов:
   в смешанной сетке карточки разной высоты разъехались бы. */
.card-grid:not(:has(.product-card:not([data-category="jetski"]))) .product-card[data-category="jetski"] .product-media.ph:not(.ph--cover){ height:316px; }
.card-grid:not(:has(.product-card:not([data-category="jetski"]))) .product-card[data-category="jetski"] .product-media.ph:not(.ph--cover) img{ padding-top:56px; box-sizing:border-box; }
@media (max-width:640px){
  .card-grid:not(:has(.product-card:not([data-category="jetski"]))) .product-card[data-category="jetski"] .product-media.ph:not(.ph--cover){ height:170px; }
  .card-grid:not(:has(.product-card:not([data-category="jetski"]))) .product-card[data-category="jetski"] .product-media.ph:not(.ph--cover) img{ padding-top:38px; }
}

/* Подпись «Под заказ — другие версии» под блоком наличия на карточке (04.10.2026) */
.product-detail__price-label{ margin:18px 0 4px; }