@import url('/css/fonts.css');

.fbz{
  --white:#FFFFFF;
  --ink:#14140F;
  --graphite:#6E6E66;
  --hair:#EAEAE4;
  --mist:#FAFAF8;
  --canary:#FFE500;
  --canary-deep:#F2D700;
  --canary-soft:#FFF9D6;
  --canary-line:#F3E48A;

  --display:'Rubik','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;

  --r:16px;
  --r-sm:12px;
  --pad:clamp(20px,5vw,72px);
  --gap:clamp(28px,4vw,56px);

  background:var(--white);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}
.fbz *,.fbz *::before,.fbz *::after{box-sizing:border-box;}
.fbz p,.fbz h1,.fbz h2,.fbz h3,.fbz h4,.fbz ul,.fbz li,.fbz figure{margin:0;padding:0;}
.fbz ul{list-style:none;}
.fbz a{color:inherit;text-decoration:none;}
.fbz img,.fbz svg{display:block;max-width:100%;}
.fbz button{font-family:var(--body);}
.fbz :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;}

/* --- Типографика ------------------------------------------------------- */
.fbz-h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,74px);line-height:1.06;letter-spacing:-.02em;}
.fbz-h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.3vw,44px);line-height:1.12;letter-spacing:-.015em;}
.fbz-h3{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.25;}
.fbz-lead{font-size:clamp(16px,1.4vw,18px);color:var(--graphite);max-width:48ch;}
.fbz-lbl{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);}
.fbz-tag{display:inline-block;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--canary-soft);color:#7A6A00;padding:6px 12px;border-radius:999px;}

/* --- Сетка ------------------------------------------------------------- */
.fbz-wrap{max-width:1320px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.fbz-sec{padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);}
.fbz-sec--line{border-top:1px solid var(--hair);}
/* Переход по якорю из меню и прокрутка к шагу подбора: липкая шапка
   накрывала начало блока и срезала заголовок. Отступ прокрутки равен
   высоте шапки с запасом — 83 px в одну строку, 150 px, когда меню
   встаёт отдельной строкой (до 1180 px). */
.fbz-sec{scroll-margin-top:100px;}
@media(max-width:1180px){.fbz-sec{scroll-margin-top:166px;}}
/* Каталог и подбор идут почти вплотную (03.09.2026): у ленты снизу
   остаётся ровно столько, чтобы тень нижних карточек не обрезалась. */
#fbz-catalog{padding-bottom:clamp(14px,1.6vw,22px);}
/* Отступы секций главной по умолчанию (этап ПД-1, 15.09.2026). Раньше
   стояли в style="…" прямо в шаблонах блоков, и редактор CMS не мог их
   поменять. Значения прежние. Правило действует, только пока у секции
   нет класса отступа из CMS (cms-padding-…, lib/cms/props.js): выбор
   редактора оно не перебивает. */
#fbz-catalog:not([class*="cms-padding"]){padding-top:clamp(14px,1.6vw,24px);}
#fbz-quiz:not([class*="cms-padding"]){padding-top:clamp(6px,0.8vw,12px);padding-bottom:clamp(28px,3.4vw,56px);}
#fbz-terms:not([class*="cms-padding"]){padding-top:clamp(14px,1.6vw,24px);}
#fbz-ozon:not([class*="cms-padding"]){padding-top:clamp(8px,1vw,16px);padding-bottom:clamp(28px,3.4vw,52px);}
/* Когда страниц ленты больше восьми, точек нет, но их контейнер оставался
   и держал под лентой 34 px пустоты. */
.fbz-dots:empty{display:none;}
.fbz-sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 32px;margin-bottom:clamp(28px,3.4vw,48px);}
.fbz-sechead .fbz-lead{margin-left:auto;}
/* Заголовок по центру — для блоков, где подзаголовка нет вовсе.
   Пустой подзаголовок оставлен в разметке ради редактора и скрыт:
   удалять поле — это правка описания блока, то есть шаг 3. */
.fbz-sechead--c{justify-content:center;text-align:center;flex-direction:column;gap:6px;}
.fbz-sechead--c .fbz-lead{margin-left:0;font-size:15px;max-width:none;}
.fbz-lead:empty{display:none;}

/* --- Кнопки ------------------------------------------------------------ */
.fbz-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:15px;font-weight:600;line-height:1;padding:16px 26px;border:1px solid transparent;
  border-radius:999px;cursor:pointer;text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .15s ease;}
.fbz-btn--y{background:var(--canary);color:var(--ink);}
.fbz-btn--y:hover{background:var(--canary-deep);}
.fbz-btn--line{background:var(--white);color:var(--ink);border-color:var(--hair);}
.fbz-btn--line:hover{border-color:var(--ink);}
.fbz-btn--soft{background:var(--canary-soft);color:var(--ink);border-color:var(--canary-line);}
.fbz-btn--soft:hover{background:#FFF4B8;}
.fbz-btn:active{transform:translateY(1px);}
.fbz-btn[disabled]{opacity:.4;cursor:not-allowed;}
.fbz-link{background:none;border:0;padding:6px 0;cursor:pointer;font-family:var(--body);font-size:15px;font-weight:600;
  color:var(--graphite);border-bottom:1px solid var(--hair);}
.fbz-link:hover{color:var(--ink);border-color:var(--ink);}

/* --- Шапка ------------------------------------------------------------- */
.fbz-top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
.fbz-top__in{display:flex;align-items:center;gap:20px;min-height:82px;padding-top:12px;padding-bottom:12px;}
.fbz-logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em;}
.fbz-logo__znak{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:block;}
@media(max-width:767px){.fbz-logo__znak{width:32px;height:32px;}}
.fbz-nav{display:flex;align-items:center;gap:4px;margin-left:auto;border:1px solid var(--ink);border-radius:999px;padding:5px;background:var(--white);}
.fbz-nav a{font-size:15px;font-weight:500;color:var(--ink);padding:11px 18px;border-radius:999px;transition:background .18s ease,color .18s ease;white-space:nowrap;}
.fbz-nav a:hover{background:var(--canary);color:var(--ink);}
.fbz-top__r{display:flex;align-items:center;gap:14px;margin-left:auto;}
.fbz-nav+.fbz-top__r{margin-left:0;}
.fbz-tel{font-size:15px;font-weight:600;white-space:nowrap;}
.fbz-cartbtn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid var(--hair);
  border-radius:999px;background:var(--white);cursor:pointer;font-size:15px;font-weight:600;transition:border-color .18s ease;}
.fbz-cartbtn:hover{border-color:var(--ink);}
.fbz-cartbtn svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fbz-cartbtn__n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--canary);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
/* От 1181 до 1320 px шапка в одну строку не помещалась: кнопка корзины
   выходила за край окна. Здесь меню, телефон и корзина компактнее. */
@media(min-width:1181px) and (max-width:1320px){
  .fbz-top__in{gap:14px;}
  .fbz-nav a{font-size:14px;padding:10px 12px;}
  .fbz-tel{font-size:14px;}
  .fbz-cartbtn{padding:11px 14px;}
}
@media(max-width:1180px){
  .fbz-nav{order:3;width:100%;margin-left:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}
  .fbz-nav::-webkit-scrollbar{display:none;}
  .fbz-top__in{flex-wrap:wrap;}
  .fbz-top__r{margin-left:auto;}
}
@media(max-width:620px){.fbz-tel{display:none;}.fbz-nav a{font-size:14px;padding:10px 14px;}}

/* --- Каталог: лента из плиток 3×2 -------------------------------------- */
.fbz-rail{position:relative;}
.fbz-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:10px 4px 24px;margin:-10px -4px -24px;}
.fbz-track::-webkit-scrollbar{display:none;}
/* Лента каталога: широкие карточки в два столбца по две в каждом — 2x2.
   Плитка 3x2 давала на карточку 373 px — туда влезали только фотография
   и обрубок названия, а имена из Ozon занимали до семи строк. Широкая
   карточка даёт название целиком, свойства, цену и кнопку рядом.
   Число карточек на странице считает shop.js по тому же порогу 1100 px:
   четыре в два столбца на широком экране, две в один на узком. */
.fbz-page{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,1.6vw,20px);align-content:start;min-width:0;}
@media(min-width:1100px){.fbz-page{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fbz-card{display:flex;flex-direction:column;background:var(--white);border-radius:20px;padding:14px 14px 18px;
  box-shadow:0 4px 20px rgba(20,20,15,.08);transition:box-shadow .25s ease,transform .25s ease,border-color .2s ease;}
.fbz-card:hover{box-shadow:0 16px 38px rgba(20,20,15,.15);transform:translateY(-8px) scale(1.02);}
.fbz-card__vis{position:relative;background:var(--mist);border-radius:var(--r);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.fbz-card__vis svg{height:68%;width:auto;stroke:var(--ink);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fbz-card__vis img{width:100%;height:100%;object-fit:contain;padding:8%;border-radius:var(--r);}
.fbz-card__price s{font-family:var(--body);font-size:15px;font-weight:500;color:var(--graphite);margin-left:8px;}
.fbz-rail__msg{padding:60px 0;text-align:center;color:var(--graphite);font-size:15px;width:100%;}
.fbz-card__tag{position:absolute;top:11px;left:11px;background:var(--white);color:var(--graphite);}
.fbz-card__name{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.9vw,25px);line-height:1.2;}
.fbz-card__price{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.1vw,29px);margin-top:6px;white-space:nowrap;}
.fbz-card__price small{font-family:var(--body);font-size:13px;font-weight:500;color:var(--graphite);margin-left:6px;}
.fbz-card__desc{font-size:14px;color:var(--graphite);margin-top:9px;}
.fbz-card__meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;}
.fbz-card__meta span{font-size:12px;font-weight:500;color:var(--graphite);background:var(--mist);border-radius:999px;padding:5px 11px;}
.fbz-card__act{margin-top:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.fbz-card__act .fbz-btn{flex:1 1 120px;padding:14px 18px;}
/* --- Широкая карточка ленты: фотография слева, сведения справа ----------
   Разворот сделан только внутри ленты (.fbz-page): те же классы карточки
   рисуются на страницах разделов, а там разметка плоская, без обёртки
   .fbz-card__body, и строчная раскладка разложила бы её в один ряд. */
.fbz-page .fbz-card{flex-direction:row;align-items:stretch;gap:18px;padding:18px;min-width:0;}
.fbz-card__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}

/* Столбец с фотографией: окно снимка и точки-указатели под ним.
   align-self обязателен: карточка растягивает детей по высоте, а заданная
   пропорция превращала бы эту высоту обратно в ширину — фотография
   раздувалась до 488 px при карточке в 379 и не оставляла тексту ничего. */
.fbz-page .fbz-card__vis{flex:0 0 clamp(150px,51%,340px);align-self:flex-start;
  margin-bottom:0;display:block;background:none;border-radius:0;
  aspect-ratio:auto;overflow:visible;}

/* Окно снимка вытянуто по вертикали: фотографии товара сняты «в рост»,
   900x1200, и в квадрате половина окна оставалась пустой. Пропорция 3:4
   повторяет саму фотографию — она вписывается целиком и почти без полей. */
.fbz-gal{position:relative;aspect-ratio:3/4;background:var(--mist);border-radius:var(--r);
  overflow:hidden;display:flex;align-items:center;justify-content:center;}
/* Снимок виден целиком и не обрезается: пустоту по краям убирает не обрезка,
   а сама пропорция окна. Кадры лежат один поверх другого и меняются
   прозрачностью — высота карточки не дёргается, горизонтальный ход не нужен,
   а при выключенной анимации подмена происходит мгновенно и без рывка. */
.fbz-page .fbz-gal img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:0;border-radius:var(--r);opacity:0;transition:opacity .35s ease;}
.fbz-page .fbz-gal img.is-on{opacity:1;}

/* Кнопки листания едва заметны: проступают, когда мышь на карточке,
   и становятся отчётливыми под самим указателем. Клавиатуре видны всегда. */
.fbz-gal__b{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:26px;height:26px;border-radius:999px;border:0;padding:0;
  background:rgba(255,255,255,.72);color:var(--ink);font-size:16px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease,background .2s ease;}
.fbz-gal__b--prev{left:6px;}
.fbz-gal__b--next{right:6px;}
.fbz-card:hover .fbz-gal__b{opacity:.5;}
.fbz-gal__b:hover{opacity:1;background:#fff;}
.fbz-gal__b:focus-visible{opacity:1;background:#fff;}

/* Точки — под снимком, на белом поле карточки. Поверх фотографии они
   спорили с ней и пропадали на пёстрых кадрах. */
.fbz-gal__dots{display:flex;justify-content:center;gap:5px;margin-top:10px;pointer-events:none;}
.fbz-gal__d{width:6px;height:6px;border-radius:999px;background:var(--hair);
  transition:width .2s ease,background .2s ease;}
.fbz-gal__d.is-on{width:16px;background:var(--ink);}

/* --- Размеры под наши данные -------------------------------------------
   В двух столбцах на полосе 1320 px карточке достаётся около 578 px,
   а тексту рядом с фотографией — около 248. Кегль главной страницы
   рассчитан на текст под фотографией, а не рядом с ней, и сюда не подходит.
   Наши данные: короткое название до 34 знаков, описание до 120, цена
   до шести цифр рядом со старой. Размеры подобраны под них. */
/* Название — не больше трёх строк. Это страховка на боевые данные:
   короткое название заполнено не у всех товаров, а полное имя из Ozon
   доходит до 161 знака и разворачивается на десять строк — карточки
   в ряду разъезжаются по высоте (проверено на выборке без коротких
   имён: 422, 453 и 505 px в одном ряду). Там, где короткое имя есть,
   предел не срабатывает вовсе: таких имён две строки. */
.fbz-page .fbz-card__name{font-size:21px;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* Описание держим ровно в две строки: у товаров оно разной длины,
   и без предела карточки разъехались бы по высоте. */
.fbz-page .fbz-card__desc{font-size:14px;margin-top:8px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fbz-page .fbz-card__meta{margin-top:10px;gap:6px;}
.fbz-page .fbz-card__meta span{font-size:12px;padding:5px 11px;}
/* Цена и кнопка прижаты к низу: у карточек разной длины они встают
   на один уровень, и глазу не приходится искать их заново в каждой. */
.fbz-page .fbz-card__price{margin-top:auto;padding-top:12px;font-size:26px;}
.fbz-page .fbz-card__price s{font-size:15px;margin-left:8px;}
.fbz-page .fbz-card__price small{font-size:13px;margin-left:6px;}
.fbz-page .fbz-card__act{margin-top:14px;gap:10px;flex-wrap:nowrap;}
.fbz-page .fbz-card__act .fbz-btn{flex:1 1 auto;min-width:0;padding:14px 18px;font-size:15px;}
.fbz-page .fbz-step button{width:36px;height:42px;font-size:18px;}
.fbz-page .fbz-step__v{min-width:26px;font-size:15px;}

/* Наличие: точка и слово, на белом поле карточки. На снимке точка терялась —
   фотографии товара яркие и пёстрые. Здесь её видно всегда, а спокойный
   серый текст не спорит с ценой. */
.fbz-nal{display:flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;font-weight:600;color:#B03A3A;}
.fbz-nal.is-est{color:#2F7D49;}
.fbz-nal__t{width:8px;height:8px;flex:0 0 auto;border-radius:999px;background:currentColor;}

/* Варианты семьи в карточке ленты (этап ВИТР-2): ряд переключателей на каждую
   ось. Правила те же, что на странице товара (.tv-var): чёрные рамки,
   выбранное значение — жёлтое, об отсутствии сказано словами, а не одним
   цветом. Отличие одно — размер: карточка ленты меньше страницы товара,
   и всё здесь на ступень мельче (шрифт 13 против 14, поля 7×12 против 9×16,
   просветы 6 против 8). Иначе ряды съели бы карточку, в которой кроме них
   стоят ещё название, свойства, цена и кнопка.

   Переключатель — ссылка <a>, поэтому у него задан display; на узком экране
   значения переносятся сами (flex-wrap), особых правил ширины не нужно. */
.fbz-var{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.fbz-var__n{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--graphite);margin-bottom:5px;}
.fbz-var__o{display:flex;flex-wrap:wrap;gap:6px;}
.fbz-var__b{display:inline-flex;align-items:baseline;gap:5px;
  font-family:var(--body);font-size:13px;font-weight:600;line-height:1.1;
  padding:7px 12px;border-radius:999px;border:1px solid var(--ink);background:var(--white);
  color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;}
.fbz-var__b:hover{background:var(--canary-soft);}
.fbz-var__b:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
/* Выбранное — жёлтое (решение владельца). Это сама карточка, вести ей некуда. */
.fbz-var__b.is-on{background:var(--canary);border-color:var(--ink);cursor:default;}
.fbz-var__b.is-on:hover{background:var(--canary);}
/* Вариант есть, но его нет на складе: ссылка работает — на странице товара
   можно узнать о поступлении. Об отсутствии сказано словами. */
.fbz-var__b--net{color:var(--graphite);}
.fbz-var__b em{font-style:normal;font-weight:500;font-size:11px;color:#B3261E;}
/* Сочетания нет в каталоге: значение показано, но никуда не ведёт. */
.fbz-var__b--nedostupno{border-style:dashed;border-color:var(--hair);
  color:var(--graphite);text-decoration:line-through;cursor:not-allowed;}
.fbz-var__b--nedostupno:hover{background:var(--white);}
/* «Что изменится ещё» — строкой под рядом, мелким спокойным серым: это
   пояснение, а не тревога. */
.fbz-var__zam{font-size:11px;font-weight:500;line-height:1.35;
  color:var(--graphite);margin:5px 0 0;}
/* На узком экране по значению попадают пальцем, а не указателем: 30 пикселей
   высоты для этого мало (замер владельца на 375 px), норма — от 36. Растут
   только вертикальные отступы: 7 → 10, и высота кнопки становится 36
   (13 × 1.1 текста + 20 отступов + 2 рамки). Шрифт, боковые отступы
   и промежуток между значениями в строке не меняются, поэтому переносятся
   значения ровно там же, где и раньше, и блок не перестраивается.

   Промежуток между строками значений при этом ужимается с 6 до 4: ряд, ушедший
   в две-три строки, иначе вырос бы на 6 пикселей за каждую. Ужимается именно
   row-gap — column-gap остаётся 6, иначе поменялась бы и раскладка по ширине.

   На широком экране, где работают мышью, всё остаётся как было. */
@media(max-width:767px){
  .fbz-var__b{padding-top:10px;padding-bottom:10px;}
  .fbz-var__o{row-gap:4px;}
}

/* Наведение: мягкий подъём, тень и жёлтая рамка. Заливку всей карточки
   пробовали и убрали 03.09.2026 — жёлтый в этом дизайне уже занят: им
   говорят «здесь действуют» (кнопка «В корзину», выбранный вариант,
   выбранный раздел). Залитая карточка давала цвету вторую работу,
   и жёлтая кнопка на жёлтом поле переставала выделяться: держалась
   она не на яркости — по ней разница мала, 1.28 против 1.20, —
   а на насыщенности, и как раз насыщенность и терялась.
   Рамка говорит то же самое, но значения цвета не размывает.

   Рамка в два пикселя и объявлена прозрачной уже в спокойном виде:
   без этого при наведении съезжали бы поля. Один пиксель жёлтого
   на белом читался тихо — владелец попросил громче. Увеличение карточки во всю ширину не делаем —
   размывало бы её края. */
.fbz-page .fbz-card{border:2px solid transparent;}
.fbz-page .fbz-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,15,.13);
  border-color:var(--canary);}
@media(max-width:640px){
  .fbz-page .fbz-card{flex-direction:column;}
  .fbz-page .fbz-card__vis{flex:0 0 auto;margin-bottom:14px;}
  .fbz-gal{aspect-ratio:4/3;}
  .fbz-page .fbz-card__price{margin-top:6px;padding-top:0;}
  .fbz-page .fbz-card__act .fbz-btn{flex:1 1 120px;min-width:0;}
}

@media(max-width:640px){.fbz-card__desc{display:none;}.fbz-card__meta span:nth-child(n+3){display:none;}}
.fbz-step{display:inline-flex;align-items:center;border:1px solid var(--hair);border-radius:999px;overflow:hidden;background:var(--white);}
.fbz-step button{width:38px;height:42px;border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:var(--ink);transition:background .15s ease;}
.fbz-step button:hover{background:var(--canary-soft);}
.fbz-step__v{min-width:28px;text-align:center;font-weight:600;font-size:15px;}
.fbz-arrow{position:absolute;top:calc(50% - 26px);width:52px;height:52px;border-radius:999px;border:1px solid var(--hair);
  background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;
  transition:border-color .18s ease,background .18s ease,opacity .2s ease;box-shadow:0 4px 18px rgba(20,20,15,.07);}
.fbz-arrow:hover{border-color:var(--ink);background:var(--canary-soft);}
.fbz-arrow[disabled]{opacity:.25;cursor:default;}
.fbz-arrow svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fbz-arrow--prev{left:-14px;}
.fbz-arrow--next{right:-14px;}
@media(max-width:1480px){.fbz-arrow--prev{left:-8px;}.fbz-arrow--next{right:-8px;}}
@media(max-width:820px){.fbz-arrow{display:none;}}
.fbz-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:34px;}
.fbz-dot{width:8px;height:8px;border-radius:999px;background:var(--hair);border:0;padding:0;cursor:pointer;transition:width .2s ease,background .2s ease;}
.fbz-dot.is-on{width:26px;background:var(--canary);}
/* Когда страниц много, точки превращаются в подпись «страница N из M». */
.fbz-pagenum{font-size:13px;color:var(--graphite);letter-spacing:.02em;}


/* Позиция подбора, которой нет в каталоге: цену не выдумываем. */
.fbz-ask{font-weight:600;font-size:12px;color:var(--graphite);white-space:nowrap;}

/* --- Разделы каталога --------------------------------------------------- */
.fbz-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(22px,2.6vw,34px);}
.fbz-cat{
  font-family:var(--body);font-size:13px;font-weight:600;line-height:1;
  padding:10px 16px;border-radius:999px;cursor:pointer;
  background:var(--white);color:var(--ink);
  border:1px solid var(--hair);transition:border-color .15s ease,background .15s ease;
}
.fbz-cat:hover{border-color:var(--ink);}
.fbz-cat.is-on{background:var(--canary);border-color:var(--canary);}
.fbz-cat__n{color:var(--graphite);font-weight:500;margin-left:6px;}
.fbz-cat.is-on .fbz-cat__n{color:var(--ink);opacity:.6;}

/* --- Квиз -------------------------------------------------------------- */
/* Заголовок подбора сделан мельче 03.09.2026: прежние 60 px спорили
   с заголовком каталога выше и занимали пол-экрана. */
.fbz-quiz__title{font-family:var(--body);font-weight:800;font-size:clamp(24px,3.1vw,40px);line-height:1.1;letter-spacing:-.02em;max-width:24ch;margin:0 auto;text-align:center;}
/* Ссылка на нормы: мелко и серым, но не шёпотом — 13 px вместо 11
   и насыщенность 500, иначе строка теряется под крупным заголовком.
   Ширина ограничена по числу знаков: сплошная строка на всю полосу
   не читается. */
.fbz-quiz__zakon{max-width:86ch;margin:0 auto;text-align:center;
  font-size:13px;font-weight:500;line-height:1.5;color:var(--graphite);}
.fbz-quiz__intro{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:clamp(28px,3.4vw,46px);}
/* Одна колонка: вопрос во всю ширину, сводка полосой под ним. Две колонки
   разной высоты оставляли пустоту под коротким вопросом (владелец,
   04.09.2026); в одной колонке пустоте взяться неоткуда. */
.fbz-quiz__grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
.fbz-quiz__main{border:1px solid var(--hair);border-radius:24px;padding:clamp(22px,3vw,40px);}
.fbz-q{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.2vw,28px);line-height:1.25;margin-bottom:6px;}
.fbz-qsub{font-size:15px;color:var(--graphite);margin-bottom:24px;}
.fbz-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:1100px){.fbz-opts{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.fbz-opts{grid-template-columns:1fr;}}
.fbz-opt{position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;padding:20px 22px;
  border:1px solid var(--hair);border-radius:var(--r);background:var(--white);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .15s ease;}
.fbz-opt:hover{border-color:var(--canary);background:var(--canary);transform:translateY(-2px);}
.fbz-opt.is-on{border-color:var(--ink);background:var(--canary);}
.fbz-opt.is-on::after{content:'✓';position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:999px;background:var(--ink);color:var(--white);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.fbz-opt:hover .fbz-opt__s,.fbz-opt.is-on .fbz-opt__s{color:#6B5F00;}
.fbz-opt__ic{width:30px;height:30px;flex:0 0 auto;stroke:var(--ink);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.fbz-opt__t{display:block;font-size:17px;font-weight:600;line-height:1.25;}
.fbz-opt__s{display:block;font-size:13px;font-weight:500;color:var(--graphite);margin-top:4px;}
.fbz-opt kbd{position:absolute;bottom:11px;right:14px;font-family:var(--body);font-size:11px;font-weight:600;color:var(--graphite);opacity:.5;}
.fbz-nav2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:24px;}
/* Категория помещения перед ползунком площади (только склады и производства). */
.fbz-qsub--tight{margin-bottom:12px;}
.fbz-opts--kat{margin-bottom:20px;}

/* Слайдеры */
.fbz-slide{background:var(--mist);border-radius:var(--r);padding:clamp(22px,2.6vw,32px);}
.fbz-slide__v{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1;}
.fbz-slide__v small{font-family:var(--body);font-size:18px;font-weight:600;color:var(--graphite);margin-left:8px;}
.fbz-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;margin:24px 0 12px;background:var(--hair);outline:none;cursor:pointer;}
.fbz-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:999px;background:var(--canary);border:3px solid var(--white);box-shadow:0 2px 10px rgba(20,20,15,.18);cursor:grab;}
.fbz-range::-moz-range-thumb{width:26px;height:26px;border-radius:999px;background:var(--canary);border:3px solid var(--white);cursor:grab;}
.fbz-range__ends{display:flex;justify-content:space-between;font-size:13px;color:var(--graphite);}
.fbz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.fbz-chip{padding:9px 16px;border-radius:999px;border:1px solid var(--hair);background:var(--white);font-size:14px;font-weight:600;cursor:pointer;transition:all .18s ease;}
.fbz-chip:hover{border-color:var(--ink);}
.fbz-chip.is-on{background:var(--canary-soft);border-color:var(--canary);}
.fbz-live{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);font-size:15px;}
.fbz-live b{font-weight:700;}

/* Правая колонка */
/* Сводка — полоса: слева подпись, ответы-плашки и прогресс, справа
   комплект с суммой и кнопками. */
.fbz-side{background:var(--mist);border-radius:24px;padding:18px clamp(20px,2.4vw,30px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'lbl kit' 'rows kit' 'prog kit';
  gap:6px 28px;align-items:center;}
.fbz-side>.fbz-lbl{grid-area:lbl;}
.fbz-side__rows{grid-area:rows;display:flex;flex-wrap:wrap;gap:6px 8px;}
.fbz-side__knopki{display:flex;gap:8px;margin-top:6px;}
@media(max-width:900px){.fbz-side{grid-template-columns:1fr;grid-template-areas:'lbl' 'rows' 'prog' 'kit';}
  .fbz-kit{align-items:stretch;min-width:0;} .fbz-kit .fbz-note{text-align:left;} .fbz-side__knopki{flex-wrap:wrap;}}
.fbz-prog{grid-area:prog;height:6px;border-radius:999px;background:var(--hair);overflow:hidden;margin:6px 0 0;max-width:360px;}
.fbz-prog__f{height:100%;width:0;background:var(--canary);transition:width .35s cubic-bezier(.4,0,.2,1);}
.fbz-side__rows li{display:flex;gap:8px;padding:6px 12px;border:1px solid var(--hair);border-radius:999px;background:var(--white);font-size:13px;white-space:nowrap;}
.fbz-side__rows span:first-child{color:var(--graphite);}
.fbz-side__rows b{font-weight:600;text-align:right;}
.fbz-kit{grid-area:kit;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:300px;}
.fbz-kit>ul{width:100%;}
.fbz-kit .fbz-note{font-size:13px;text-align:right;max-width:34ch;}
/* Когда комплект собран, его список длинный: правая часть полосы
   уходит вниз на всю ширину, плашки ответов остаются сверху. Иначе
   список отжимал плашки в узкий столбик и наезжал на них. */
.fbz-side:has(#fbzKit li){grid-template-columns:1fr;grid-template-areas:'lbl' 'rows' 'prog' 'kit';}
.fbz-side:has(#fbzKit li) .fbz-kit{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'ul ul' 'note sum' 'kn kn';
  align-items:center;gap:10px 24px;min-width:0;margin-top:12px;padding-top:14px;border-top:1px solid var(--hair);}
.fbz-side:has(#fbzKit li) .fbz-kit>ul{grid-area:ul;}
.fbz-side:has(#fbzKit li) .fbz-sum{grid-area:sum;}
.fbz-side:has(#fbzKit li) .fbz-kit .fbz-note{grid-area:note;text-align:left;max-width:none;}
.fbz-side:has(#fbzKit li) .fbz-side__knopki{grid-area:kn;justify-content:flex-end;}
.fbz-kit li{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;font-size:15px;animation:fbzIn .3s ease;}
.fbz-kit__n{flex:1;min-width:0;}
/* Галочка выбора позиции: квадратная, жёлтая — тем же цветом, что и весь
   выбор на сайте. Снятая позиция не исчезает, а гаснет с зачёркнутой ценой:
   человек должен видеть, от чего отказался, и вернуть одним нажатием. */
.fbz-pick{width:17px;height:17px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--canary);cursor:pointer;}
.fbz-kit li.is-off,.fbz-spec2 li.is-off{opacity:.45;}
.fbz-kit li.is-off b,.fbz-spec2 li.is-off .p{text-decoration:line-through;}
/* Ссылка на карточку товара — пунктиром: сплошное подчёркивание на сайте
   занято обычными ссылками, а эта поясняющая и не должна их перебивать. */
.fbz-vlink{display:inline-block;margin-left:8px;font-size:13px;font-weight:500;
  color:var(--graphite);border-bottom:1px dashed var(--graphite);line-height:1.15;}
.fbz-vlink:hover{color:var(--ink);border-bottom-color:var(--ink);}
@keyframes fbzIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.fbz-kit li b{font-weight:600;white-space:nowrap;}
.fbz-sum{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,30px);margin:0;}
/* Сброс ответов — кнопка третьим, светло-жёлтым цветом, рядом
   с «Добавить комплект в корзину». Была текстовой ссылкой и терялась
   (владелец, 03.09.2026). */

/* Результат */
.fbz-spec2{margin:22px 0 0;}
.fbz-spec2 li{display:grid;grid-template-columns:1fr auto;gap:4px 18px;padding:16px 0;border-bottom:1px solid var(--hair);}
.fbz-spec2 li:first-child{border-top:1px solid var(--hair);}
.fbz-spec2 .n{font-size:17px;font-weight:600;display:flex;align-items:flex-start;gap:10px;}
.fbz-spec2 .p{font-family:var(--display);font-weight:500;font-size:19px;white-space:nowrap;text-align:right;}
.fbz-spec2 .w{grid-column:1/-1;font-size:14px;color:var(--graphite);}
.fbz-total2{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--hair);flex-wrap:wrap;}
.fbz-total2>span:first-child{margin-right:auto;}
.fbz-total2__cart{flex:0 0 auto;}
@media(max-width:640px){.fbz-total2__cart{width:100%;}}
.fbz-total2 b{font-family:var(--display);font-weight:500;font-size:clamp(26px,3vw,34px);}
.fbz-how{background:var(--mist);border-radius:var(--r);padding:22px 24px;margin-top:22px;font-size:15px;color:var(--graphite);}
.fbz-how h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.fbz-how li{padding:4px 0 4px 18px;position:relative;}
.fbz-how li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:999px;background:var(--canary);}
.fbz-hidden{display:none !important;}

/* --- Преимущества ------------------------------------------------------ */

/* --- Документы --------------------------------------------------------- */
/* Документы по полкам: вкладки со счётчиками, под активной — карточки файлов
   и ссылок; полка без документов показывает подсказку (владелец, 04.09.2026). */
.fbz-docs__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.fbz-docs__tab{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--hair);
  background:var(--white);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.fbz-docs__tab:hover{border-color:var(--ink);}
.fbz-docs__tab.is-on{background:var(--canary);border-color:var(--canary);}
.fbz-docs__tab i{font-style:normal;font-size:12px;font-weight:600;color:var(--graphite);padding:2px 7px;border-radius:999px;background:var(--mist);}
.fbz-docs__tab.is-on i{background:rgba(20,20,15,.1);color:var(--ink);}
.fbz .fbz-docs__opis{font-size:15px;color:var(--graphite);max-width:70ch;margin-bottom:16px;}
.fbz .fbz-docs__pusto{font-size:15px;padding:22px 24px;border:1px dashed var(--hair);border-radius:var(--r);color:var(--graphite);}
.fbz-docs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
@media(max-width:900px){.fbz-docs__grid{grid-template-columns:1fr;}}
.fbz-doc{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--hair);border-radius:var(--r);background:var(--white);
  transition:border-color .15s ease,background .15s ease;}
.fbz-doc:hover{border-color:var(--canary);background:var(--canary-soft);}
.fbz-doc__ic{width:30px;height:30px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fbz-doc h3{font-size:16px;font-weight:600;line-height:1.3;}
.fbz .fbz-doc p{font-size:13px;color:var(--graphite);}
.fbz-doc__go{margin-top:auto;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;}
.fbz-doc__go span{width:22px;height:22px;border-radius:999px;background:var(--canary);display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.fbz-doc:hover .fbz-doc__go span{background:var(--ink);color:var(--white);}
.fbz .fbz-docs__zapros{margin-top:18px;font-size:15px;color:var(--graphite);}
.fbz .fbz-docs__zapros a{color:var(--ink);border-bottom:1px dashed var(--ink);}
.fbz-docs__primer{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--canary-soft);border:1px solid var(--canary-line);
  font-size:11px;font-style:normal;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6B5F00;vertical-align:middle;}

/* --- Условия ----------------------------------------------------------- */
.fbz-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);}
@media(max-width:820px){.fbz-terms{grid-template-columns:1fr;}}
.fbz-term{background:var(--mist);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);}
.fbz-term h3{margin:12px 0 14px;}
.fbz-term li{padding:11px 0;border-bottom:1px solid var(--hair);font-size:15px;color:var(--graphite);}
.fbz-term li:last-child{border-bottom:0;}
.fbz-term li b{color:var(--ink);font-weight:600;}

/* --- Информация о доставке: сравнительная таблица -------------------------
   Вариант, выбранный владельцем 04.09.2026 из четырёх на площадке
   .design-demo-2. Ничего не нужно открывать: службы столбцами, свойства
   строками. Первый столбец не уезжает при боковой прокрутке, шапка —
   при вертикальной. От бренда только логотип и полоса его цвета
   под ним; цвета сняты с файлов логотипов.

   Карта под таблицей одна на все службы: виджет Яндекса принимает один
   запрос, показать пункты пяти служб разом он не может (проверено),
   а рубрика «пункт выдачи заказов» приводит и чужие пункты, куда наша
   посылка не придёт. Поэтому службы переключаются кнопками — один
   встроенный виджет вместо пяти. */

/* Поиск по адресу: проверить, куда довезут и что рядом. */
.fbz-dost__poisk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:clamp(20px,2.4vw,30px);}
.fbz-dost__poisk label{font-family:var(--display);font-weight:500;font-size:17px;flex:1 1 100%;}
.fbz-dost__poisk input{flex:1 1 240px;min-width:0;font-family:var(--body);font-size:16px;
  color:var(--ink);background:var(--white);border:1px solid var(--hair);border-radius:999px;padding:14px 20px;}
.fbz-dost__poisk input:focus{outline:none;border-color:var(--ink);}
.fbz-dost__poisk .fbz-btn{flex:0 0 auto;}

/* Таблица. min-width держит колонки читаемыми: на узком экране она
   прокручивается вбок, а не сжимается в кашу. */
.fbz-dost__scroll{overflow-x:auto;border:1px solid var(--hair);border-radius:var(--r);position:relative;}
.fbz-dost__tab{width:100%;min-width:900px;border-collapse:collapse;}
.fbz-dost__tab th,.fbz-dost__tab td{text-align:left;padding:16px 18px;vertical-align:top;
  border-bottom:1px solid var(--hair);font-size:14px;line-height:1.45;}
.fbz-dost__tab thead th{position:sticky;top:0;background:var(--white);z-index:2;
  padding-top:22px;padding-bottom:18px;}
.fbz-dost__tab thead th img{height:24px;width:auto;}
.fbz-dost__tab thead th .fbz-dost__t{font-family:var(--display);font-size:17px;font-weight:500;}
.fbz-dost__tab thead th::after{content:'';display:block;height:3px;margin-top:14px;
  border-radius:2px;background:var(--brand);}
.fbz-dost__tab tbody th{width:180px;font-weight:600;color:var(--graphite);background:var(--mist);
  position:sticky;left:0;z-index:1;font-size:13px;}
.fbz-dost__tab tbody tr:last-child th,.fbz-dost__tab tbody tr:last-child td{border-bottom:0;}
.fbz-dost__tab td{color:var(--ink);}
/* Три состояния столбца, и они не должны путаться: под курсором —
   серая подложка, выбранный — фирменный жёлтый в шапке и мягкий жёлтый
   в ячейках. Если бы наведение тоже было жёлтым, выбранный столбец
   терялся бы под курсором. */
.fbz-dost__tab th.is-hi,.fbz-dost__tab td.is-hi{background:var(--mist);}
/* Выбранный столбец обводит скруглённая жёлтая рамка — отдельный слой
   поверх таблицы, скрипт ставит его на нужный столбец. Тени внутри
   ячеек скруглить нельзя, а прямые углы на скруглённом сайте не смотрятся.
   Сплошной жёлтый под логотипами пробовали — СДЭК и Ozon на нём тонут. */
.fbz-dost__sel{position:absolute;top:0;left:0;width:0;height:0;box-sizing:border-box;border:3px solid var(--canary);
  border-radius:14px;background:rgba(255,229,0,.08);pointer-events:none;z-index:3;
  transition:left .22s ease,width .22s ease;}
.fbz-dost__tab thead th.is-sel::after{height:5px;}
/* Шапка столбца — кнопка: выбирается и мышью, и с клавиатуры. */
.fbz-dost__pick{display:inline-flex;align-items:center;border:0;background:transparent;padding:0;
  cursor:pointer;}
.fbz-dost__tab tbody td{cursor:pointer;}
.fbz-dost__t{font-family:var(--display);font-size:17px;font-weight:500;}
.fbz-dost__da,.fbz-dost__net{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;}
.fbz-dost__da{color:#2F7D49;}
.fbz-dost__net{color:#B03A3A;}
.fbz-dost__da i,.fbz-dost__net i{width:18px;height:18px;border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;font-style:normal;font-size:11px;color:var(--white);}
.fbz-dost__da i{background:#2F7D49;}
.fbz-dost__net i{background:#B03A3A;}

/* Карта. Службу выбирают столбцом таблицы, поэтому под картой не кнопки,
   а строка состояния: что именно сейчас показано. */
.fbz-dost__karta{margin-top:clamp(18px,2vw,26px);}
.fbz-dost__status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 14px;font-size:18px;color:var(--ink);}
.fbz-dost__hint{margin:6px 0 14px;text-align:center;font-size:13px;color:var(--graphite);}
.fbz-dost__kto{display:inline-flex;align-items:center;}
.fbz-dost__kto-i{display:none;}
.fbz-dost__kto-i.is-on{display:inline-flex;align-items:center;}
.fbz-dost__kto-i img{height:30px;width:auto;}
.fbz-dost__kto-i[data-kto="pochta"] img{height:38px;}
.fbz-dost__kto-i .fbz-dost__t{font-size:20px;color:var(--ink);}
/* Список найденных пунктов виджет рисует слева, и выключить его нечем:
   настройки для этого у виджета нет. Поэтому рамка подрезает панель —
   карта сдвинута влево на её ширину. На узком экране виджет кладёт
   панель иначе, и подрезка снимается. */
.fbz-dost__ramka{overflow:hidden;border:1px solid var(--hair);border-radius:var(--r-sm);
  background:var(--mist);}
.fbz-dost__frame{width:calc(100% + 330px);margin-left:-330px;height:340px;border:0;display:block;}
@media(max-width:900px){.fbz-dost__frame{width:100%;margin-left:0;}}
.fbz-dost__pod{margin-top:10px;}
.fbz-dost__pod a{border-bottom:1px solid var(--hair);}
.fbz-dost__pod a:hover{border-color:var(--ink);}

/* --- Контакты ---------------------------------------------------------- */
.fbz-cont{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);}
@media(max-width:900px){.fbz-cont{grid-template-columns:1fr;}}
.fbz-field{margin-bottom:16px;}
.fbz-field label{display:block;font-size:13px;font-weight:600;color:var(--graphite);margin-bottom:8px;}
.fbz-field input,.fbz-field textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--mist);
  border:1px solid transparent;border-radius:var(--r-sm);padding:15px 16px;transition:border-color .18s ease,background .18s ease;}
.fbz-field textarea{resize:vertical;min-height:96px;}
.fbz-field input:focus,.fbz-field textarea:focus{outline:none;background:var(--white);border-color:var(--canary);}
.fbz-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.fbz-two{grid-template-columns:1fr;}}
.fbz-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--graphite);margin:8px 0 22px;}
.fbz-check input{margin-top:3px;accent-color:var(--canary);width:17px;height:17px;flex:0 0 auto;}
.fbz-note{font-size:13px;color:var(--graphite);margin-top:14px;}
.fbz-ok{background:var(--canary-soft);border:1px solid var(--canary-line);border-radius:var(--r);padding:24px;font-size:15px;}
.fbz-contacts{background:var(--mist);border-radius:var(--r);padding:8px 24px;}
.fbz-contacts li{padding:16px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px;}
.fbz-contacts li:last-child{border-bottom:0;}
.fbz-contacts li>span:first-child{color:var(--graphite);flex:0 0 120px;}
.fbz-map{margin-top:20px;background:var(--mist);border-radius:var(--r);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.fbz-map iframe{width:100%;height:100%;border:0;display:block;}

/* --- Подвал ------------------------------------------------------------ */
.fbz-foot{border-top:1px solid var(--hair);padding:32px 0;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;font-size:14px;color:var(--graphite);}
.fbz-foot__r{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap;}

/* --- Корзина ----------------------------------------------------------- */
.fbz-ov{position:fixed;inset:0;background:rgba(20,20,15,.35);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;z-index:90;}
.fbz-ov.is-on{opacity:1;visibility:visible;}
.fbz-drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--white);z-index:100;
  transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;font-family:var(--body);color:var(--ink);}
.fbz-drawer.is-on{transform:translateX(0);}
.fbz-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 26px 18px;border-bottom:1px solid var(--hair);}
.fbz-x{width:40px;height:40px;border-radius:999px;border:1px solid var(--hair);background:var(--white);cursor:pointer;font-size:18px;line-height:1;}
.fbz-x:hover{border-color:var(--ink);}
.fbz-drawer__body{flex:1;overflow-y:auto;padding:10px 26px;}
.fbz-ci{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--hair);}
.fbz-ci__vis{width:64px;height:64px;flex:0 0 auto;background:var(--mist);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;}
.fbz-ci__vis svg{height:70%;width:auto;stroke:var(--ink);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fbz-ci__n{font-weight:600;font-size:15px;}
.fbz-ci__p{font-size:14px;color:var(--graphite);margin-top:2px;}
.fbz-ci__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;}
.fbz-ci__del{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--graphite);border-bottom:1px solid var(--hair);}
.fbz-ci__del:hover{color:var(--ink);}
.fbz-empty{padding:60px 0;text-align:center;color:var(--graphite);font-size:15px;}
.fbz-drawer__foot{border-top:1px solid var(--hair);padding:22px 26px 26px;}
.fbz-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.fbz-total b{font-family:var(--display);font-weight:500;font-size:26px;}
.fbz-drawer__foot .fbz-btn{width:100%;}

@media(prefers-reduced-motion:reduce){.fbz *{transition:none !important;animation:none !important;}}


/* --- Этап 7: наличие товара и предупреждения корзины --- */
.fbz .fbz-card__out{
  display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;
  background:#FDEDED;color:#B3261E;font-size:12px;font-weight:600;
}
.fbz .fbz-card__act button[disabled]{opacity:.45;cursor:not-allowed;}
.fbz .fbz-cart-warn{
  background:#FDEDED;border:1px solid #F3C2C2;border-radius:var(--r-sm);
  padding:10px 12px;margin-bottom:12px;font-size:14px;color:#B3261E;
}
.fbz .fbz-rail__msg{padding:40px;text-align:center;color:var(--graphite);}

/* --- Страницы разделов и поиска ---------------------------------------- */
.cat-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--graphite);margin-bottom:18px;}
.cat-crumbs a{border-bottom:1px solid var(--hair);}
.cat-crumbs a:hover{border-color:var(--ink);color:var(--ink);}
.cat-crumbs b{color:var(--ink);font-weight:600;}

.cat-search{display:flex;gap:10px;margin:24px 0 32px;max-width:640px;}
.cat-search__i{flex:1;min-width:0;font-family:var(--body);font-size:15px;padding:15px 20px;
  border:1px solid var(--hair);border-radius:999px;background:var(--white);color:var(--ink);}
.cat-search__i:focus{outline:none;border-color:var(--ink);}

.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:8px;}
.cat-item{display:block;padding:22px 24px;border:1px solid var(--hair);border-radius:var(--r);
  background:var(--white);transition:border-color .18s ease,transform .18s ease;}
.cat-item:hover{border-color:var(--ink);transform:translateY(-3px);}
.cat-item__n{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.2;}
.cat-item__c{float:right;font-size:13px;font-weight:600;color:var(--graphite);
  background:var(--mist);border-radius:999px;padding:4px 11px;}
.cat-item__sub{display:block;margin-top:10px;font-size:13px;color:var(--graphite);line-height:1.45;}

.cat-count{font-size:14px;color:var(--graphite);margin-bottom:18px;}
.cat-empty{font-size:16px;color:var(--graphite);padding:36px 0 60px;max-width:52ch;}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);}
@media(max-width:1100px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:820px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
.cat-card{cursor:pointer;}
.cat-card .fbz-card__name{font-size:clamp(16px,1.4vw,19px);}
.cat-card .fbz-card__price{font-size:clamp(19px,1.7vw,23px);}
.cat-foot{display:flex;gap:24px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--graphite);}

/* Карта проезда: виджет Яндекса, без ключа API. */
.fbz-map__frame{width:100%;height:320px;border:0;border-radius:var(--r);display:block;}
.fbz-map__note{margin-top:10px;}
.fbz-map__note a{border-bottom:1px solid var(--hair);}
.fbz-map__note a:hover{border-color:var(--ink);}

/* На узком экране разделы выстраивались в 11 строк и отодвигали товары
   за пределы экрана. Делаем их прокручиваемой строкой. */
@media(max-width:720px){
  .fbz-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));
    padding-left:var(--pad);padding-right:var(--pad);}
  .fbz-cats::-webkit-scrollbar{display:none;}
  .fbz-cat{flex:0 0 auto;}
  .fbz-map__frame{height:260px;}
}

/* Длинные названия из Ozon не помещались в карточку и обрезались по краю:
   переносим их по слогам, а на узком экране показываем одну колонку. */
.fbz-card__name{overflow-wrap:anywhere;hyphens:auto;}
.fbz-card__desc{overflow-wrap:anywhere;}
.cat-card .fbz-card__name{overflow-wrap:anywhere;hyphens:auto;}
@media(max-width:560px){
  .cat-grid{grid-template-columns:1fr;}
}

/* Видео товара в карточке. */
.pr-video{margin-top:clamp(20px,2.5vw,32px);}
.pr-video h2{margin-bottom:12px;}
.pr-video__frame{position:relative;padding-top:56.25%;border-radius:var(--r);overflow:hidden;background:var(--mist);margin-bottom:10px;}
.pr-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pr-video__title{font-size:14px;color:var(--graphite);margin-bottom:16px;}

/* ===== Блок «Мы на Ozon»: шапка слева, плитки 2×2 справа, плитка перехода в цвете Ozon ===== */
/* Блок обведён рамкой в стиле сайта: белое поле, тонкая линия, скругление.
   Раньше секция отделялась линией сверху и та висела пустой полосой. */
.fbz-ozon{--ozon:#005BFF;--ozon-dark:#0047C7;background:var(--white);border:1px solid var(--hair);
  border-radius:24px;padding:clamp(22px,3vw,40px);}
.fbz-ozon__verh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,3.4vw,56px);align-items:center;}
.fbz-ozon__hat{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.fbz .fbz-ozon .fbz-ozon__t{display:flex;align-items:center;gap:.35em;}
.fbz-ozon__logo{height:.9em;width:auto;position:relative;top:.04em;}
.fbz .fbz-ozon .fbz-ozon__s{font-size:clamp(16px,1.4vw,18px);color:var(--graphite);max-width:30ch;}
/* Другие площадки: строка и две широкие овальные кнопки в фирменных цветах */
.fbz-ozon__drugie{margin-top:clamp(22px,2.6vw,36px);padding:clamp(18px,2vw,26px) clamp(20px,2.6vw,32px);
  border-radius:var(--r);border:1px solid var(--hair);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;}
.fbz .fbz-ozon .fbz-ozon__dt{font-family:var(--display);font-size:clamp(19px,1.8vw,24px);font-weight:400;line-height:1.25;
  letter-spacing:-.01em;color:var(--ink);max-width:30ch;}
.fbz-ozon__knopki{display:flex;flex-wrap:wrap;gap:12px;}
.fbz-ozon__kn{display:inline-flex;align-items:center;justify-content:center;min-width:200px;height:52px;padding:0 30px;
  border-radius:999px;transition:filter .15s ease;}
.fbz-ozon__kn:hover{filter:brightness(.94);}
.fbz-ozon__kn img{height:22px;width:auto;display:block;}
.fbz-ozon__kn--market{background:#FFCC00;}
.fbz-ozon__kn--wb{background:#CB11AB;}
.fbz-ozon__kn--wb img{height:20px;}
@media(max-width:600px){.fbz-ozon__kn{min-width:0;flex:1 1 100%;}}
.fbz-ozon__cifry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:14px;}
.fbz-ozon__c{display:flex;align-items:center;gap:16px;padding:22px 24px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--white);min-width:0;}
.fbz-ozon__ik{flex:0 0 auto;width:44px;height:44px;padding:10px;border-radius:999px;background:#EAF1FF;color:var(--ozon);stroke-width:2.2;box-sizing:border-box;}
.fbz-ozon__cb{display:flex;flex-direction:column;gap:6px;min-width:0;}
.fbz-ozon__lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.fbz-ozon__c b{font-family:var(--display);font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1;}
.fbz-ozon__zv{color:#F5A623;letter-spacing:.05em;font-size:13px;}
.fbz .fbz-ozon .fbz-ozon__btn{background:var(--ozon);border-color:var(--ozon);color:var(--white);
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;transition:background .15s ease,border-color .15s ease;}
.fbz-ozon__btn .fbz-ozon__ik{background:rgba(255,255,255,.16);color:var(--white);}
.fbz-ozon__btn img{height:22px;width:auto;max-width:110px;display:block;}
.fbz-ozon__btn b{font-family:inherit;font-size:16px;font-weight:700;}
.fbz .fbz-ozon .fbz-ozon__btn:hover{background:var(--ozon-dark);border-color:var(--ozon-dark);}
/* Лента скриншотов: кадры без файла скрипт прячет; пустая лента не показывается */
.fbz-ozon__lenta{margin-top:clamp(22px,2.6vw,36px);}
.fbz-ozon__polosa{position:relative;}
.fbz .fbz-ozon .fbz-ozon__lt{font-family:var(--display);font-size:clamp(18px,1.6vw,22px);font-weight:500;margin:0 0 14px;}
.fbz-ozon__lenta.is-pusto{display:none;}
.fbz-ozon__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px;}
.fbz-ozon__track::-webkit-scrollbar{display:none;}
.fbz-ozon__k{flex:0 0 auto;width:240px;scroll-snap-align:start;border-radius:12px;overflow:hidden;
  background:var(--mist);box-shadow:0 4px 18px rgba(20,20,15,.08);}
.fbz-ozon__k img{width:100%;height:auto;display:block;}
.fbz-ozon__k.is-net{display:none;}
.fbz-ozon__arr{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;
  border-radius:999px;border:1px solid var(--hair);background:var(--white);color:var(--ink);font-size:20px;
  line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(20,20,15,.1);}
.fbz-ozon__arr[data-arr="-1"]{left:-12px;}
.fbz-ozon__arr[data-arr="1"]{right:-12px;}
@media(max-width:1000px){.fbz-ozon__verh{grid-template-columns:1fr;}}
@media(max-width:520px){.fbz-ozon__cifry{grid-template-columns:1fr;}}

/* ===== Оплата: две карточки под картой доставки (владелец, 04.09.2026) ===== */
.fbz-opl{margin-top:clamp(28px,3.4vw,48px);}
.fbz-opl__hat{margin-bottom:18px;}
.fbz .fbz-opl .fbz-opl__t{font-size:clamp(22px,2.2vw,28px);font-weight:500;}
.fbz .fbz-opl .fbz-opl__s{font-size:15px;color:var(--graphite);max-width:60ch;margin-top:6px;}
.fbz-opl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.fbz-opl__k{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:clamp(20px,2.4vw,28px);}
.fbz-opl__kto{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:20px;font-weight:500;margin-bottom:16px;}
.fbz-opl__ik{width:22px;height:22px;flex:0 0 auto;color:var(--ink);}
.fbz-opl__kto .fbz-opl__ik{width:40px;height:40px;padding:9px;border-radius:999px;background:var(--canary-soft);box-sizing:border-box;}
.fbz-opl__sp li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--hair);}
.fbz-opl__sp li:last-child{border-bottom:1px solid var(--hair);}
.fbz-opl__sp b{display:block;font-size:16px;font-weight:600;}
.fbz-opl__sp span{display:block;font-size:13px;color:var(--graphite);margin-top:2px;}
.fbz-opl__dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-top:16px;font-size:14px;}
.fbz-opl__dl dt{color:var(--graphite);}
.fbz-opl__dl dd{font-weight:500;}
.fbz .fbz-opl .fbz-opl__note{margin-top:14px;}
.fbz-opl__sbp{height:16px;width:auto;vertical-align:-3px;margin:0 2px;}
@media(max-width:760px){.fbz-opl__grid{grid-template-columns:1fr;}}

/* ===== Карточка товара ==================================================
   Верх — три колонки: галерея у левого края, столбик служб доставки,
   панель покупки не шире 400 px у правого края. Высота ряда — не меньше
   видимой области экрана (лист входит в экран) и не меньше содержимого
   правой колонки (панель никогда не наезжает на плитки). Окно фото —
   в пропорции первого снимка при высоте ряда: ширину ставит скрипт
   переменной --foto-w. Ниже — паспорт из шести плиток, характеристики
   с описанием внутри, видео, похожие. Решения владельца 04–07.09.2026. */
.fbz .fbz-card__name{display:block;color:inherit;}
.tv-main{padding-top:clamp(8px,1vw,14px);padding-bottom:clamp(40px,5vw,72px);}
.tv-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.fbz .tv h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.2;margin-bottom:14px;}

/* Хлебные крошки и название */
.tv-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--graphite);margin-bottom:12px;}
.tv-crumbs a{color:var(--graphite);}
.tv-crumbs a:hover{color:var(--ink);}
.tv-crumbs b{color:var(--ink);font-weight:500;}
.tv-head{margin-bottom:8px;}
.fbz .tv-h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-.015em;margin:0 0 6px;}
.fbz .tv-sku{font-size:13px;color:var(--graphite);margin-top:6px;}

/* Верхний ряд */
.tv--1 .tv-top{display:grid;grid-template-columns:minmax(0,1fr) var(--sluzhby-w,220px) minmax(360px,400px);grid-template-areas:'l m r';
  grid-template-rows:minmax(0,1fr);gap:clamp(14px,1.6vw,20px);align-items:stretch;min-height:max(520px,calc(100vh - 205px));}
.tv-top__l{grid-area:l;display:flex;flex-direction:column;align-items:flex-start;min-height:0;}
/* Столбик служб лежит абсолютным слоем в своей ячейке: высоту ряда задают
   экран и панель покупки, а не длина столбика; сам столбик прокручивается.
   Поля по 10 px — чтобы увеличенная при наведении карточка не обрезалась. */
.tv-top__m{grid-area:m;position:relative;min-width:0;min-height:0;margin:0 -10px;}
.tv-top__m .sr{position:absolute;inset:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hair) transparent;padding:6px 10px 0;}
.tv-top__r{grid-area:r;min-height:0;}

/* Галерея: миниатюры столбиком, полоса листания, окно фото с точками, полоса */
.tv-gal{display:grid;grid-template-columns:72px 22px minmax(0,1fr) 22px;gap:10px;align-items:stretch;flex:1;min-height:0;width:100%;}
.tv-gal__thumbs{display:flex;flex-direction:column;gap:8px;height:0;min-height:calc(100% - 16px);overflow-y:auto;scrollbar-width:none;}
.tv-gal__thumbs::-webkit-scrollbar{display:none;}
.tv-th{flex:0 0 auto;width:68px;height:68px;padding:0;border:1px solid var(--hair);border-radius:12px;background:var(--white);overflow:hidden;cursor:pointer;}
.tv-th img{width:100%;height:100%;object-fit:contain;display:block;}
.tv-th.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.tv-th:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
/* Полоса листания без окантовки: видна только стрелка, нажимается вся высота фото. */
.tv-gal__bar{align-self:stretch;margin-bottom:16px;width:22px;padding:0;border:0;border-radius:999px;background:transparent;
  color:var(--ink);font-size:26px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .15s ease;}
.tv-gal__bar:hover,.tv-gal__bar:focus-visible{opacity:1;}
.tv-gal__box{display:flex;flex-direction:column;min-width:0;min-height:0;}
.tv-gal__main{position:relative;flex:1;min-height:0;width:min(var(--foto-w,min(480px,42vw)),100%);border:1px solid var(--hair);border-radius:var(--r);background:var(--white);overflow:hidden;}
/* Снимок вне потока: у окна нет собственной высоты, ряд меряется по правой колонке. */
.tv-gal__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.tv-gal__box .fbz-gal__dots{margin-top:10px;}
.tv-gal--net{display:block;}
.tv-gal__net{width:min(480px,42vw);aspect-ratio:1;border:1px dashed var(--hair);border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--graphite);font-size:14px;}

/* Панель покупки */
.tv-buy{border:1px solid var(--ink);border-radius:var(--r);background:var(--white);padding:clamp(16px,1.8vw,20px);display:flex;flex-direction:column;gap:12px;}
.tv-price{display:flex;align-items:baseline;gap:12px;min-height:1em;}
.tv-price b{font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1;}
.tv-price s{font-size:16px;color:var(--graphite);}
.tv-price__net{font-size:clamp(22px,2.4vw,28px);}
.fbz .tv-stock{font-size:14px;font-weight:600;}
.tv-stock.in{color:#2C7A4B;}
.tv-stock.out{color:#B3261E;}
/* Варианты товара (этап РЕД-8а): строка переключателей на каждую ось вариантной
   группы. Рамки чёрные, выбранное значение — жёлтое (решение владельца).
   Переключатель — ссылка <a>, поэтому у него задан display; на узком экране
   значения переносятся сами (flex-wrap), особых правил ширины не нужно. */
.tv-vars{display:flex;flex-direction:column;gap:10px;}
.tv-vars__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.tv-vars .tv-lbl em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7;}
.tv-var{display:inline-flex;align-items:baseline;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid var(--ink);background:var(--white);font-size:14px;font-weight:600;cursor:pointer;}
.tv-var:hover{background:var(--canary-soft);}
.tv-var:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.tv-var.is-on{background:var(--canary);border-color:var(--ink);cursor:default;}
/* Вариант есть, но его нет на складе: ссылка работает — на карточке можно
   узнать о поступлении. Об отсутствии сказано словами, а не одним цветом. */
.tv-var--net{color:var(--graphite);}
.tv-var em{font-style:normal;font-weight:500;font-size:12px;color:#B3261E;}
/* «Что изменится ещё» — строкой под рядом, а не внутри «таблетки»: внутри она
   раздувала каждую таблетку втрое, и на телефоне ряд вставал в столбик.
   Шрифт тот же, что у «нет в наличии», цвет спокойный серый — это не тревога. */
.tv-vars__zam{font-size:12px;font-weight:500;line-height:1.35;color:var(--graphite);margin-top:6px;}
/* Сочетания нет в каталоге: значение показано, но никуда не ведёт. */
.tv-var--nedostupno{border-style:dashed;border-color:var(--hair);color:var(--graphite);text-decoration:line-through;cursor:not-allowed;}
.tv-var--nedostupno:hover{background:var(--white);}
.tv-cta{display:flex;gap:10px;align-items:center;}
.tv-cta .tv-add{flex:1;}
/* Оплата: две вкладки. Активная — светло-жёлтая. */
.tv-opl{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--hair);}
.tv-opl>.tv-lbl{font-weight:700;color:var(--ink);}
.tv-opl__tabs{display:inline-flex;padding:3px;border-radius:999px;background:var(--mist);align-self:flex-start;}
.tv-opl__tab{padding:7px 14px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--graphite);cursor:pointer;}
.tv-opl__tab.is-on{background:var(--canary-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--canary-line);}
.tv-opl__tab:focus-visible{outline:2px solid var(--ink);outline-offset:1px;}
.tv-opl__pan{font-size:13px;color:var(--graphite);line-height:1.5;}
.tv-opl__pan b{color:var(--ink);font-weight:600;}
.tv-opl__pan a{color:var(--ink);border-bottom:1px dashed var(--ink);}
/* Наши магазины на площадках — в самом низу панели. */
.tv-mp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px;color:var(--graphite);padding-top:12px;border-top:1px solid var(--hair);}
.tv-mp a{display:inline-flex;align-items:center;height:26px;padding:0 8px;border-radius:999px;border:1px solid var(--hair);}
.tv-mp img{height:12px;width:auto;}
.tv-mp__ym{background:#FFCC00;border-color:#FFCC00 !important;}
.tv-mp__wb img{height:11px;}

/* Столбик служб доставки: каждая служба в чёрной рамке, при наведении светло-жёлтая и чуть крупнее */
.sr{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.35;}
.sr__lbl{font-weight:700;color:var(--ink);}
.sr__logo{height:24px;width:auto;align-self:flex-start;}
.sr__svoi{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--canary-soft);border:1px solid var(--canary-line);font-size:12px;font-weight:600;}
.sr__card{position:relative;display:flex;flex-direction:column;gap:3px;padding:9px 28px 9px 10px;border:1px solid var(--ink);border-radius:12px;background:var(--white);
  transition:background .18s ease,transform .18s ease;}
.sr__card:hover{background:var(--canary-soft);transform:scale(1.03);z-index:1;}
.sr__card b{font-size:12px;font-weight:600;margin-top:4px;}
.sr__dop{display:flex;flex-direction:column;gap:3px;color:var(--graphite);font-size:12px;}
.sr__dop em{font-style:normal;}
.sr__card:not(.is-open) .sr__dop{display:none;}
.sr__pm{position:absolute;top:8px;right:8px;width:22px;height:22px;border:1px solid var(--hair);border-radius:999px;background:var(--white);font:inherit;font-size:15px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.sr__pm:hover,.sr__pm:focus-visible{border-color:var(--ink);}
.sr__net{margin-top:auto;font-size:12px;font-weight:700;color:var(--graphite);border-bottom:1px dashed var(--graphite);align-self:flex-start;line-height:1.3;}
.sr__net:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* Паспорт товара: шесть плиток в чёрной окантовке, при наведении светло-жёлтые и чуть крупнее */
.tv-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:clamp(20px,2.6vw,36px) 0;}
.tv-fact{border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px;background:var(--white);display:flex;flex-direction:column;gap:6px;
  transition:background .18s ease,transform .18s ease;}
.tv-fact:hover{background:var(--canary-soft);transform:scale(1.03);}
.tv-fact b{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.8vw,24px);line-height:1.1;}

/* Характеристики: группы раскрываются кнопкой в заголовке; описание — последняя группа, свёрнута */
.tv-har{margin:clamp(20px,2.6vw,36px) 0 clamp(20px,2.6vw,32px);}
.tv-grp{border:1px solid var(--hair);border-radius:var(--r);margin-bottom:10px;overflow:hidden;}
.fbz .tv-grp__h{margin:0;font-size:15px;font-weight:600;}
.tv-grp__h button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border:0;background:var(--mist);font:inherit;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;}
.tv-grp__h button::after{content:'+';font-weight:400;}
.tv-grp.is-open .tv-grp__h button::after{content:'−';}
.tv-grp__h button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}
.tv-grp:not(.is-open) .tv-attrs,.tv-grp:not(.is-open) .tv-grp__body{display:none;}
.tv-attrs{width:100%;border-collapse:collapse;}
.tv-attrs td{padding:10px 18px;border-top:1px solid var(--hair);font-size:14px;vertical-align:top;}
.tv-attrs td:first-child{color:var(--graphite);width:42%;}
.tv-grp__body{padding:6px 18px 20px;display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);}
.tv-sec{max-width:76ch;}
.fbz .tv-sec h4{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,22px);margin-bottom:8px;}
.fbz .tv-sec p{font-size:16px;line-height:1.55;}

/* Похожие товары: 4 в ряд, сразу один ряд, дальше при прокрутке */
.tv-sim__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.tv-sim{border:1px solid var(--hair);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s ease;}
.tv-sim:hover{border-color:var(--canary);}
.tv-sim img,.tv-sim__net{width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;background:var(--mist);display:block;}
.tv-sim b{font-size:14px;font-weight:600;line-height:1.3;}
.tv-sim span{font-size:17px;font-weight:700;color:var(--ink);}
.tv-sim.is-dalee{display:none;}
.tv-sim.is-novyj{animation:tvSimIn .35s ease;}
@keyframes tvSimIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.tv-sim__dalee{height:1px;}

/* Меньше анимации — по просьбе системы */
@media(prefers-reduced-motion:reduce){.tv-fact:hover,.sr__card:hover{transform:none;} .tv-sim.is-novyj{animation:none;}}

/* --- Ширины ---------------------------------------------------------------- */
/* До 1100: две колонки — галерея и панель, столбик служб рядом под ними;
   высота ряда от содержимого, окно фото квадратное, снимок в потоке. */
@media(max-width:1100px){
  .tv--1 .tv-top{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);grid-template-areas:'l r' 'm m';grid-template-rows:auto auto;min-height:0;align-items:start;}
  .tv-top__l{align-items:stretch;}
  .tv-top__m{margin:0;}
  .tv-top__m .sr{position:static;overflow:visible;padding:0;flex-direction:row;flex-wrap:wrap;}
  .tv-top__m .sr__lbl,.tv-top__m .sr__net{flex:1 1 100%;}
  .tv-top__m .sr__card{flex:1 1 200px;}
  .tv-gal{flex:none;grid-template-columns:72px 22px minmax(0,1fr) 22px;}
  .tv-gal__main{flex:none;width:auto;aspect-ratio:1;}
  .tv-gal__net{width:100%;}
  .tv-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* До 760: одна колонка; миниатюры лентой под фото, полосы у краёв снимка */
@media(max-width:760px){
  .tv--1 .tv-top{grid-template-columns:1fr;grid-template-areas:'l' 'r' 'm';}
  .tv-gal{grid-template-columns:22px minmax(0,1fr) 22px;grid-template-areas:'p box n' 'th th th';gap:8px;}
  .tv-gal__bar--prev{grid-area:p;margin:0;}
  .tv-gal__bar--next{grid-area:n;margin:0;}
  .tv-gal__box{grid-area:box;}
  .tv-gal__thumbs{grid-area:th;flex-direction:row;height:auto;min-height:0;overflow-x:auto;overflow-y:hidden;padding:2px;}
  .tv-th{width:56px;height:56px;}
  .tv-sim__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){.tv-facts{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ===== Каталог /katalog (этап ПД-3а, 15.09.2026) =========================
   Перенесено из утверждённого демо .design-demo/css/katalog.css (вариант 2,
   владелец 14.09.2026): разделы слева, товары справа. Отличия от демо:
   - у .kt-main отступы только сверху и снизу — поля по краю даёт .fbz-wrap
     (правка полей 15.09.2026);
   - стиль ссылки «Открыть раздел целиком →» перенесён из style="…" в .kt-vves;
   - кнопки и ссылки, скрытые атрибутом hidden, скрываются и при своём display;
   - столбик на телефоне сворачивается только при работающем скрипте (.is-js):
     без скрипта разделы видны списком, иначе раскрыть их было бы нечем. */
/* Селекторы .rz-* рядом с .kt-* — те же правила у страницы раздела (ПД-3б). */
.kt-main,.rz-main,.ps-main{padding-top:clamp(10px,1.4vw,20px);padding-bottom:clamp(40px,5vw,72px);}
.kt-shapka{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,26px);}
.fbz .kt-h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.015em;margin:0 0 6px;}
.kt-lead{color:var(--graphite);font-size:15px;max-width:60ch;}
.kt-poisk{display:flex;gap:8px;min-width:min(100%,420px);}
.kt-poisk input{flex:1;height:48px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:15px;background:var(--white);}
.kt-poisk input:focus{outline:2px solid var(--canary);outline-offset:1px;}
.kt-lbl,.rz-lbl,.ps-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.kt-pusto{padding:40px 0;text-align:center;color:var(--graphite);}

/* Раскладка: столбик разделов и сетка товаров */
.kt-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start;}
/* Столбик липнет ниже шапки: её высоту в --kt-shapka пишет скрипт. */
.kt-bok{position:sticky;top:calc(var(--kt-shapka,100px) + 16px);border:1px solid var(--ink);border-radius:var(--r);background:var(--white);overflow:hidden;}
.kt-bok__h{padding:12px 16px;border-bottom:1px solid var(--hair);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.kt-punkt{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--hair);background:var(--white);padding:11px 16px;font:inherit;font-size:14px;cursor:pointer;}
.kt-punkt:last-child{border-bottom:0;}
.kt-punkt:hover{background:var(--canary);}
.kt-punkt.is-on{background:var(--canary);font-weight:600;box-shadow:inset 3px 0 0 var(--ink);}
.kt-punkt span{color:var(--graphite);}
.kt-punkt.is-on span{color:var(--ink);}
.kt-punkt--pod{padding-left:30px;font-size:13px;}

.kt-verh,.rz-verh,.ps-verh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.kt-verh__n{font-family:var(--display);font-weight:500;font-size:clamp(20px,2vw,26px);}
.kt-vves{font-size:14px;font-weight:600;border-bottom:1px solid var(--ink);}
.kt-sort,.rz-sort,.ps-sort{margin-left:auto;display:inline-flex;padding:3px;border-radius:999px;background:var(--mist);}
.kt-sort button,.rz-sort button,.ps-sort button{border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:var(--graphite);padding:7px 14px;border-radius:999px;cursor:pointer;}
.kt-sort button.is-on,.rz-sort button.is-on,.ps-sort button.is-on{background:var(--canary);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}

.kt-tovary,.ps-setka{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.ps-tov,.kt-tov,.rz-tov{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--hair);border-radius:var(--r);background:var(--white);transition:border-color .15s ease,transform .18s ease;}
.kt-tov:hover,.rz-tov:hover,.ps-tov:hover{border-color:var(--ink);transform:translateY(-2px);}
.kt-tov img,.kt-tov__net,.rz-tov img,.rz-tov__net,.ps-tov img,.ps-tov__net{width:100%;aspect-ratio:1;object-fit:contain;border-radius:12px;background:var(--mist);display:block;}
.kt-tov__n,.rz-tov__n,.ps-tov__n{font-size:14px;font-weight:600;line-height:1.3;}
.kt-tov__c,.rz-tov__c,.ps-tov__c{display:flex;align-items:baseline;gap:8px;margin-top:auto;flex-wrap:wrap;}
.kt-tov__c b,.rz-tov__c b,.ps-tov__c b{font-size:17px;font-weight:700;}
.kt-tov__c s,.rz-tov__c s,.ps-tov__c s{font-size:12px;color:var(--graphite);}
.kt-tov__net-txt,.rz-tov__net-txt,.ps-tov__net-txt{font-size:12px;color:#B3261E;}
.kt-eshche,.rz-eshche,.ps-eshche{margin:18px auto 0;display:block;}
.kt-eshche[hidden],.kt-vves[hidden],.rz-eshche[hidden]{display:none;}

@media(max-width:1100px){.kt-tovary,.ps-setka{grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Кнопка свёрнутого столбика — только на узком экране и только со скриптом. */
.kt-bok__knopka{display:none;}
@media(max-width:860px){
  .kt-grid{grid-template-columns:1fr;}
  .kt-bok{position:static;}
  .kt-bok.is-js .kt-bok__knopka{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:var(--white);padding:13px 16px;font:inherit;font-size:14px;text-align:left;cursor:pointer;color:var(--ink);}
  .kt-bok__knopka b{font-weight:600;}
  .kt-bok__knopka::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(45deg);}
  .kt-bok.is-otkryt .kt-bok__knopka::after{transform:translateY(2px) rotate(-135deg);}
  .kt-bok.is-js .kt-bok__telo{display:none;border-top:1px solid var(--hair);}
  .kt-bok.is-js.is-otkryt .kt-bok__telo{display:block;}
  .kt-bok.is-js .kt-bok__h{display:none;}
  .kt-tovary,.ps-setka{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){.kt-poisk{min-width:100%;}}
/* Сортировка на телефоне — во всю строку и без переноса подписей. */
@media(max-width:560px){
  .kt-sort,.rz-sort,.ps-sort{margin-left:0;width:100%;}
  .kt-sort button,.rz-sort button,.ps-sort button{flex:1 1 auto;white-space:nowrap;padding:7px 8px;font-size:12px;}
}

/* ===== Раздел /katalog/:slug (этап ПД-3б, 15.09.2026) =====================
   Перенесено из утверждённого демо .design-demo/css/razdel.css (вариант 1,
   владелец 14.09.2026): подразделы и фильтры слева, товары справа.
   Правила, совпадающие с каталогом один в один, не повторяются: .rz-main,
   .rz-lbl, строка .rz-verh, сортировка .rz-sort (и её вид на телефоне),
   карточка .rz-tov со всеми частями и .rz-eshche объявлены ниже вместе
   с .kt-* общими селекторами. Своё у раздела: крошки, заголовок, панель
   с подразделами и фильтрами, подпись артикула, сетка в 3 колонки.
   Отличия от демо:
   - подразделы — ссылки <a>, а не кнопки: стили .rz-pod button → .rz-pod a;
   - style="…" у подписи «Подразделы» и у черты перенесены в .rz-pod__h и .rz-bok__hr;
   - панель на телефоне сворачивается только при работающем скрипте (.is-js),
     как столбик каталога; «Показать N товаров» без скрипта не показывается;
   - кнопка, скрытая атрибутом hidden, скрывается и при своём display;
   - пояснения .rz-lead нет: описания раздела в базе нет; его нижний отступ
     отдан заголовку, иначе сетка прилипла бы к нему. */
.rz-crumbs,.ps-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--graphite);margin-bottom:12px;}
.rz-crumbs a,.ps-crumbs a{color:var(--graphite);}
.rz-crumbs a:hover,.ps-crumbs a:hover{color:var(--ink);}
.rz-crumbs b,.ps-crumbs b{color:var(--ink);font-weight:500;}
.fbz .rz-h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.12;letter-spacing:-.015em;margin:0 0 clamp(14px,1.8vw,22px);}
.rz-pusto{padding:36px 0;text-align:center;color:var(--graphite);}

/* Фильтры */
.rz-filtr{display:flex;flex-direction:column;gap:14px;}
.rz-filtr__gr{display:flex;flex-direction:column;gap:8px;}
.rz-cena{display:flex;align-items:center;gap:8px;}
.rz-cena input{width:100%;height:40px;padding:0 12px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:14px;background:var(--white);}
.rz-cena span{color:var(--graphite);}
.rz-chek{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer;}
.rz-chek input{width:18px;height:18px;accent-color:var(--ink);}
.rz-sbros{align-self:flex-start;border:0;background:transparent;font:inherit;font-size:13px;color:var(--graphite);border-bottom:1px dashed var(--graphite);cursor:pointer;padding:0;}
.rz-sbros:hover{color:var(--ink);border-bottom-color:var(--ink);}

/* Карточка: общая с каталогом (.kt-tov выше), своя только подпись артикула. */
.ps-tov__sku,.rz-tov__sku{font-size:12px;color:var(--graphite);}
.rz-setka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}

/* Раскладка: панель слева, товары справа. Панель липнет ниже шапки: её высоту
   в --rz-shapka пишет скрипт. */
.rz-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start;}
.rz-bok{position:sticky;top:calc(var(--rz-shapka,100px) + 16px);border:1px solid var(--ink);border-radius:var(--r);background:var(--white);padding:16px 18px;}
.rz-pod__h{margin-bottom:8px;}
.rz-bok__hr{border:0;border-top:1px solid var(--hair);margin:14px 0;}
.rz-pod{display:flex;flex-direction:column;gap:4px;}
.rz-pod a{text-align:left;font-size:14px;padding:7px 10px;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;}
.rz-pod a span{color:var(--graphite);}
.rz-pod a:hover{background:var(--canary);}
.rz-pod a.is-on{background:var(--canary);font-weight:600;}

/* Кнопка свёрнутой панели и «Показать N товаров» — только на узком экране
   и только со скриптом. */
.rz-bok__knopka,.rz-bok__gotovo{display:none;}
@media(max-width:860px){
  .rz-grid{grid-template-columns:1fr;}
  .rz-bok{position:static;padding:0;overflow:hidden;}
  .rz-bok__telo{padding:14px 16px 16px;}
  .rz-bok.is-js .rz-bok__knopka{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;background:var(--white);padding:13px 16px;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;color:var(--ink);}
  .rz-bok__knopka::after{content:'';flex:none;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(45deg);}
  .rz-bok.is-otkryt .rz-bok__knopka::after{transform:translateY(2px) rotate(-135deg);}
  .rz-bok.is-js .rz-bok__telo{display:none;border-top:1px solid var(--hair);}
  .rz-bok.is-js.is-otkryt .rz-bok__telo{display:block;}
  .rz-bok.is-js .rz-bok__gotovo{display:block;width:100%;margin-top:16px;}
  .rz-verh{scroll-margin-top:calc(var(--rz-shapka,100px) + 12px);}
  .rz-setka{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){.rz-setka,.ps-setka{grid-template-columns:1fr;}}

/* ===== Поиск /poisk (этап ПД-3в, 15.09.2026) ==============================
   Перенесено из утверждённого демо .design-demo/css/poisk.css (вариант 3,
   владелец 14.09.2026): строка с живыми подсказками, быстрые запросы,
   сортировка «Точнее / Дешевле / Дороже», сетка и «Ничего не нашли».
   Правила, совпадающие с каталогом и разделом один в один, не повторяются:
   .ps-main, .ps-lbl, .ps-verh, .ps-sort (и её вид на телефоне), карточка
   .ps-tov со всеми частями, .ps-eshche и сетка .ps-setka (4/3/2 колонки) —
   через запятую к .kt-*; крошки .ps-crumbs, подпись .ps-tov__sku и одна колонка
   сетки до 560 px — к .rz-*. Своё у поиска — ниже.
   Отличия от демо:
   - быстрые запросы — ссылки /poisk?q=… (работают без скрипта), а не кнопки:
     к .ps-bystro button добавлено .ps-bystro a (у .ps-sovety a было в демо);
   - сортировка на телефоне — во всю строку, как у каталога и раздела. */
.fbz .ps-h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.8vw,36px);line-height:1.12;margin:0 0 10px;}
.ps-h1 em{font-style:normal;background:var(--canary);padding:0 8px;border-radius:8px;}
.ps-stroka{display:flex;gap:8px;margin-bottom:clamp(14px,2vw,22px);position:relative;}
.ps-stroka input{flex:1;height:52px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:16px;background:var(--white);}
.ps-stroka input:focus{outline:2px solid var(--canary);outline-offset:1px;}
.ps-tov__n mark{background:var(--canary);padding:0 2px;border-radius:4px;}

/* Ничего не нашлось */
.ps-nichego{border:1px solid var(--ink);border-radius:var(--r);background:var(--white);padding:clamp(18px,2.4vw,28px);text-align:center;}
.ps-nichego b{display:block;font-family:var(--display);font-weight:500;font-size:22px;margin-bottom:8px;}
.ps-nichego p{color:var(--graphite);font-size:15px;max-width:60ch;margin:0 auto 14px;}
.ps-sovety{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.ps-sovety button,.ps-sovety a{padding:8px 14px;border:1px solid var(--ink);border-radius:999px;background:var(--white);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.ps-sovety button:hover,.ps-sovety a:hover{background:var(--canary);}

/* Подсказки по мере ввода и частые запросы */
.ps-podskazki{position:absolute;top:56px;left:0;right:0;z-index:20;border:1px solid var(--ink);border-radius:var(--r);background:var(--white);box-shadow:0 10px 30px rgba(0,0,0,.12);overflow:hidden;display:none;}
.ps-podskazki.is-on{display:block;}
.ps-podskazka{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--hair);background:var(--white);padding:10px 16px;font:inherit;cursor:pointer;}
.ps-podskazka:last-child{border-bottom:0;}
.ps-podskazka:hover,.ps-podskazka.is-on{background:var(--canary);}
.ps-podskazka img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:var(--mist);}
.ps-podskazka b{font-size:14px;font-weight:600;display:block;}
.ps-podskazka span{font-size:12px;color:var(--graphite);}
.ps-podskazka em{margin-left:auto;font-style:normal;font-weight:700;font-size:14px;white-space:nowrap;}
.ps-bystro{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.ps-bystro button,.ps-bystro a{padding:8px 14px;border:1px solid var(--hair);border-radius:999px;background:var(--white);font:inherit;font-size:13px;cursor:pointer;}
.ps-bystro button:hover,.ps-bystro a:hover{border-color:var(--ink);background:var(--canary);}

/* --- Корзина и оформление /oformlenie (этап ПД-4г, 16.09.2026) ------------
   Блок .kz-* перенесён из утверждённого демо .design-demo/css/korzina.css:
   лента из пяти шагов слева, панель заказа справа, выбор пункта выдачи на
   карте. Отдельного файла на сайте не заводим — как и на прошлых этапах
   трека. Отличия от демо три:
   — переключателя «все сразу / по одному» на сайте нет, его правила убраны;
   — «кто покупает» и «показ шагов» помечены не на <html>, а на самой форме
     (data-kto, data-rezhim): общую оболочку страниц ради них не трогаем,
     и без скриптов страница сразу показана как «частное лицо»;
   — .co-empty переименован в .kz-pusto, добавлен .kz-oshibki (проблемы,
     которые вернул сервер) — в демо их не было. */
.kz-main{padding-top:clamp(10px,1.4vw,20px);padding-bottom:clamp(40px,5vw,72px);}
.kz-title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,24px);}
.kz-title .fbz-h2{margin:0;}
.kz-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);}
.kz-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(16px,2vw,28px);align-items:start;}
.kz-lenta{display:flex;flex-direction:column;gap:14px;}
/* Панель заказа липнет ниже шапки: её высоту в --kz-shapka пишет скрипт. */
.kz-side{position:sticky;top:calc(var(--kz-shapka,100px) + 16px);}

/* Шаг: белая карточка в чёрной рамке; шапка без заливки (владелец, 14.09.2026) */
.kz-shag{border:1px solid var(--ink);border-radius:var(--r);background:var(--white);padding:clamp(16px,2vw,24px);}
.kz-shag__h{display:flex;align-items:center;gap:12px;margin-bottom:clamp(14px,1.8vw,18px);}
.kz-shag__n{flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:var(--ink);color:var(--canary);font:700 14px/30px var(--display);text-align:center;}
.fbz .kz-shag__h h3{margin:0;font-size:clamp(18px,1.8vw,22px);}
.kz-shag__s{margin-left:auto;font-size:13px;color:var(--ink);}
.kz-shag__s b{color:var(--ink);font-weight:600;}
.kz-dalee{margin-top:16px;display:none;}
[data-rezhim="shagi"] .kz-dalee{display:inline-flex;}
[data-rezhim="shagi"] .kz-shag.is-skryt{display:none;}
.kz-note{font-size:13px;color:var(--graphite);line-height:1.5;}
.kz-note b{color:var(--ink);font-weight:600;}
/* Проверка перед отправкой: незаполненные поля и подсказка под кнопкой */
.fbz-field.is-oshibka input,.fbz-field.is-oshibka textarea,.fbz-check.is-oshibka{outline:2px solid #B3261E;outline-offset:1px;border-radius:12px;}
.kz-podskazka{display:none;margin-top:8px;font-size:13px;color:#B3261E;line-height:1.45;}
.kz-podskazka.is-on{display:block;}
/* Проблемы, которые вернул сервер: их в демо не было — там форма никуда не уходила. */
.kz-oshibki{border:1px solid #F3C2C2;background:#FDEDED;border-radius:var(--r);padding:14px 16px;margin-bottom:18px;font-size:15px;}
.kz-oshibki b{font-weight:600;}
.kz-oshibki ul{margin:8px 0 0;padding-left:18px;list-style:disc;}
.kz-oshibki li{margin-bottom:4px;}
.kz-pusto{text-align:center;padding:40px 0;}
.kz-pusto p{margin-bottom:16px;color:var(--graphite);}

/* Товары */
.kz-tov{display:flex;flex-direction:column;}
.kz-tov__r{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto 28px;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--hair);}
.kz-tov__r:first-child{border-top:0;padding-top:0;}
.kz-tov__r.is-net .kz-tov__c,.kz-tov__r.is-net .kz-tov__sum{color:var(--graphite);}
.kz-tov__img{width:64px;height:64px;border-radius:12px;border:1px solid var(--ink);object-fit:contain;background:var(--white);}
.kz-tov__n{font-weight:600;font-size:15px;line-height:1.3;}
.kz-tov__sku{display:block;font-size:12px;color:var(--graphite);margin-top:3px;}
.kz-tov__ost{display:block;font-size:12px;color:#B3261E;margin-top:3px;}
.kz-tov__c{text-align:right;white-space:nowrap;font-size:14px;}
.kz-tov__c s{display:block;color:var(--graphite);font-size:12px;}
.kz-tov__sum{text-align:right;white-space:nowrap;font-weight:700;font-size:16px;min-width:88px;}
.kz-tov__x{width:28px;height:28px;border:1px solid var(--ink);border-radius:999px;background:var(--white);color:var(--graphite);font-size:16px;line-height:1;cursor:pointer;}
.kz-tov__x:hover{background:var(--canary);color:var(--ink);}

/* Покупатель: переключатель */
.kz-kto{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kz-kto label{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--ink);border-radius:var(--r);cursor:pointer;transition:background .18s ease,transform .18s ease;}
.kz-kto label:hover{background:var(--canary);transform:scale(1.02);}
.kz-kto input{position:absolute;opacity:0;}
.kz-kto label:has(input:checked){background:var(--canary);box-shadow:inset 0 0 0 1px var(--ink);}
.kz-kto b{font-size:16px;font-weight:600;}
.kz-kto span{font-size:13px;color:var(--graphite);line-height:1.45;}

/* Получение: карточки служб */
.kz-dost{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.kz-sl{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--ink);border-radius:var(--r);background:var(--white);cursor:pointer;transition:background .18s ease,transform .18s ease;}
.kz-sl:hover{background:var(--canary);transform:scale(1.02);z-index:1;}
.kz-sl input{position:absolute;opacity:0;}
.kz-sl:has(input:checked){background:var(--canary);box-shadow:inset 0 0 0 1px var(--ink);}
.kz-sl__logo{height:24px;width:auto;align-self:flex-start;}
.kz-sl__svoi{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--canary);border:1px solid var(--ink);font-size:12px;font-weight:600;align-self:flex-start;}
.kz-sl b{font-size:14px;font-weight:600;margin-top:4px;line-height:1.3;}
.kz-sl span{font-size:12px;color:var(--graphite);line-height:1.4;}
.kz-sl em{font-style:normal;font-size:12px;font-weight:600;margin-top:auto;padding-top:6px;}
.kz-sl--net{cursor:default;opacity:.7;}
.kz-sl--net:hover{background:var(--white);transform:none;}
.kz-sl--net em{color:#B3261E;}
.kz-sl__ok{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:999px;border:1px solid var(--ink);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;}
.kz-sl:has(input:checked) .kz-sl__ok{background:var(--ink);color:var(--canary);}

/* Подробности выбранной службы */
.kz-dost__pod{margin-top:14px;border-top:1px solid var(--hair);padding-top:14px;display:none;}
.kz-dost__pod.is-on{display:block;}
.kz-dost__dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:13px;margin:0 0 12px;}
.kz-dost__dl dt{color:var(--graphite);}
.kz-dost__dl dd{margin:0;}
.kz-sposob{display:inline-flex;padding:3px;border-radius:999px;background:var(--mist);margin-bottom:12px;}
.kz-sposob label{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--graphite);cursor:pointer;}
.kz-sposob input{position:absolute;opacity:0;}
.kz-sposob label:has(input:checked){background:var(--canary);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.kz-pvz,.kz-kur{display:none;}
.kz-pvz.is-on,.kz-kur.is-on{display:block;}
.kz-adr{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kz-adr .fbz-field{margin:0;}
.kz-poisk{display:flex;gap:8px;align-items:flex-end;}
.kz-poisk .fbz-field{flex:1;margin:0;}
.kz-poisk .fbz-btn--y{background:var(--canary);border-color:var(--ink);}
.kz-poisk .fbz-btn--y:hover{background:var(--canary);}

/* Карта пунктов выдачи: слева карта, справа список найденных */
.kz-karta{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;align-items:stretch;}
.kz-karta__box{height:340px;border:1px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--mist);}
.kz-karta__box>ymaps,.kz-karta__box>div{height:100%;width:100%;}
.kz-spisok{border:1px solid var(--ink);border-radius:12px;background:var(--white);display:flex;flex-direction:column;overflow:hidden;}
.kz-spisok__h{padding:10px 12px;border-bottom:1px solid var(--hair);font-size:12px;color:var(--graphite);}
.kz-spisok__h b{color:var(--ink);font-weight:600;}
.kz-spisok__sp{flex:1;overflow-y:auto;max-height:296px;scrollbar-width:thin;}
.kz-punkt{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--hair);background:var(--white);padding:10px 12px;font:inherit;cursor:pointer;transition:background .15s ease;}
.kz-punkt:hover{background:var(--canary);}
.kz-punkt.is-on{background:var(--canary);box-shadow:inset 3px 0 0 var(--ink);}
.kz-punkt b{display:block;font-size:13px;font-weight:600;line-height:1.3;}
.kz-punkt span{display:block;font-size:12px;color:var(--graphite);line-height:1.35;margin-top:2px;}
.kz-punkt.is-on span{color:var(--ink);}
.kz-vybor{margin-top:10px;display:none;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--ink);border-radius:12px;background:var(--canary);}
.kz-vybor.is-on{display:flex;}
.kz-vybor b{font-size:14px;font-weight:600;}
.kz-vybor span{display:block;font-size:12px;color:var(--ink);opacity:.75;margin-top:2px;}
.kz-vybor__x{margin-left:auto;border:1px solid var(--ink);background:transparent;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;}
.kz-vybor__x:hover{background:var(--white);}
.kz-balun{font-size:13px;line-height:1.35;}
.kz-balun b{display:block;font-weight:600;margin-bottom:2px;}
.kz-balun span{display:block;color:var(--graphite);font-size:12px;}
.kz-balun button{margin-top:8px;border:1px solid var(--ink);border-radius:999px;background:var(--canary);padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.kz-balun button:hover{background:var(--canary-deep);}
/* Одна точка на карте — наш склад (самовывоз) */
.kz-karta--odna{grid-template-columns:1fr;}

/* Контакты */
.kz-org{display:none;}
[data-kto="org"] .kz-org{display:block;}
[data-kto="org"] .kz-fiz{display:none;}
.kz-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kz-form .fbz-field{margin:0;}
.kz-form .is-wide{grid-column:1 / -1;}

/* Оплата */
.kz-opl{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kz-opl label{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--ink);border-radius:var(--r);cursor:pointer;transition:background .18s ease,transform .18s ease;}
.kz-opl label:hover{background:var(--canary);transform:scale(1.02);}
.kz-opl input{position:absolute;opacity:0;}
.kz-opl label:has(input:checked){background:var(--canary);box-shadow:inset 0 0 0 1px var(--ink);}
.kz-opl__ik{flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:var(--white);border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;padding:5px;}
/* Заливку не сбрасываем: у знака QR-кода точки внутри квадратов закрашены.
   Рисунок занимает весь белый квадрат, поля задаёт сам квадрат. */
.kz-opl__ik svg{width:100%;height:100%;display:block;stroke:var(--ink);}
.kz-opl b{display:block;font-size:15px;font-weight:600;}
.kz-opl span{display:block;font-size:13px;color:var(--graphite);line-height:1.45;margin-top:3px;}
.kz-schet{border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px;background:var(--canary);}
.kz-schet b{font-size:15px;font-weight:600;}
.kz-schet ol{margin:10px 0 0;padding-left:20px;font-size:13px;line-height:1.5;color:var(--ink);}
.kz-schet li b{font-size:13px;color:var(--ink);}

/* Панель заказа: товары, суммы, выбор, согласие и кнопка */
.kz-itog{border:1px solid var(--ink);border-radius:var(--r);background:var(--white);padding:clamp(16px,1.8vw,20px);display:flex;flex-direction:column;gap:8px;}
.kz-itog__r{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--graphite);}
.kz-itog__r b{color:var(--ink);font-weight:600;}
.kz-itog__r--big{font-size:18px;color:var(--ink);border-top:1px solid var(--hair);padding-top:10px;margin-top:4px;}
.kz-itog__r--big b{font-family:var(--display);font-weight:500;font-size:26px;}
.kz-itog__mini{display:flex;flex-direction:column;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--hair);margin-bottom:4px;}
.kz-itog__mini div{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.kz-itog__mini span{color:var(--graphite);}
.kz-itog .fbz-btn{width:100%;margin-top:6px;}
.kz-itog__chto{font-size:12px;color:var(--graphite);line-height:1.45;}
.kz-sv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;font-size:13px;margin:4px 0 2px;padding-top:10px;border-top:1px solid var(--hair);}
.kz-sv dt{color:var(--graphite);}
.kz-sv dd{margin:0;text-align:right;}
.kz-itog .fbz-check{margin-top:10px;font-size:13px;}
.kz-cta{display:flex;flex-direction:column;gap:6px;}
.kz-cta__zakaz,.kz-cta__schet{display:none;}
[data-kto="fiz"] .kz-cta__zakaz{display:inline-flex;}
[data-kto="org"] .kz-cta__schet{display:inline-flex;}
/* Кнопка онлайн-оплаты (этап ОПЛ-4). В разметке её нет вовсе, пока приём
   оплаты выключен в админке; организации она не показывается никогда —
   организации платят по счёту. */
.kz-cta__oplata{display:none;}
[data-kto="fiz"] .kz-cta__oplata{display:inline-flex;}

/* --- Ширины оформления --- */
@media(max-width:1100px){
  .kz-karta{grid-template-columns:1fr;}
  .kz-karta__box{height:300px;}
  .kz-spisok__sp{max-height:220px;}
}
@media(max-width:1000px){
  .kz-grid{grid-template-columns:1fr;}
  .kz-side{position:static;}
  .kz-dost{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .kz-tov__r{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:'img n x' 'img c c' 'q q s';gap:8px 10px;}
  .kz-tov__img{grid-area:img;width:56px;height:56px;}
  .kz-tov__n{grid-area:n;}
  .kz-tov__c{grid-area:c;text-align:left;}
  .kz-tov__c s{display:inline;margin-left:6px;}
  .kz-tov__r .fbz-step{grid-area:q;}
  .kz-tov__sum{grid-area:s;}
  .kz-tov__x{grid-area:x;}
  .kz-kto,.kz-opl,.kz-adr,.kz-form,.kz-dost{grid-template-columns:1fr;}
}

/* ============================================================
   Страница заказа «спасибо» — .sp-*
   Перенос утверждённого демо .design-demo/css/spasibo.css
   (вариант «трекер и панель заказа», владелец 15.09.2026; этап ПД-5б).
   Слева статус, полоса «где сейчас заказ», получение и оплата;
   справа липкая панель с составом и суммой — раскладка корзины.
   Переключатель показа (классы sp-demo, sp-rezhim) и сообщение демо-оплаты
   (класс sp-soobsh) не переносятся: на сайте случай определяет сам заказ.
   Блок оплаты (.sp-oplata) появляется только при включённом приёме оплаты —
   этап ОПЛ-4.
   ============================================================ */
.sp-main{padding-top:clamp(10px,1.4vw,20px);padding-bottom:clamp(48px,6vw,96px);}
.sp-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:12px;}
.fbz .sp-h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0;}
.sp-lead{color:var(--graphite);font-size:clamp(15px,1.3vw,17px);max-width:56ch;margin-top:10px;}
.sp-karta{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:clamp(16px,2vw,24px);}
.sp-knopki{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,30px);}
/* Блок «Оплата онлайн» (этап ОПЛ-4): отдельная карточка под двумя верхними.
   Появляется только при включённом приёме оплаты. */
.sp-oplata{margin-top:clamp(20px,2.4vw,30px);}
.sp-oplata__f{margin-top:12px;}

/* Статус */
.sp-status{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--ink);background:var(--canary);margin-bottom:14px;}
.sp-status--warn{background:#FFF1EE;border-color:#B3261E;color:#B3261E;}

/* Полоса «где сейчас заказ» */
.sp-put{margin-top:clamp(22px,2.8vw,36px);}
.sp-shagi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.sp-shagi li{position:relative;padding-top:40px;}
.sp-shagi li::before{content:'';position:absolute;top:12px;left:34px;right:-6px;height:2px;background:var(--hair);}
.sp-shagi li:last-child::before{display:none;}
.sp-shagi li.is-done::before{background:var(--ink);}
.sp-shagi i{position:absolute;top:0;left:0;display:grid;place-items:center;width:26px;height:26px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--hair);background:var(--white);font-style:normal;font-size:12px;font-weight:700;color:var(--graphite);}
.sp-shagi b{display:block;font-size:15px;font-weight:600;}
.sp-shagi span{display:block;font-size:13px;color:var(--graphite);margin-top:2px;}
.sp-shagi .is-done i{background:var(--ink);border-color:var(--ink);color:var(--white);}
.sp-shagi .is-now i{background:var(--canary);border-color:var(--ink);color:var(--ink);}
.sp-shagi .is-warn i{border-color:#B3261E;color:#B3261E;}
.sp-shagi .is-warn b{color:#B3261E;}

/* Получение и оплата */
.sp-dva{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(20px,2.4vw,30px);}
.sp-fakt img{height:22px;width:auto;margin-bottom:8px;display:block;}
.sp-fakt b{display:block;font-size:15px;}
.sp-fakt p{font-size:14px;color:var(--graphite);margin-top:4px;}

/* Раскладка и панель заказа */
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(18px,2.4vw,36px);align-items:start;}
.sp-panel{position:sticky;top:calc(var(--sp-shapka,100px) + 16px);border:1.5px solid var(--ink);border-radius:var(--r);padding:clamp(16px,2vw,22px);background:var(--white);}
.sp-panel__n{font-family:var(--display);font-size:24px;font-weight:500;margin:-4px 0 4px;}
.sp-tov{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair);}
.sp-tov img,.sp-tov__net{display:block;width:44px;height:44px;object-fit:contain;border-radius:10px;background:var(--mist);}
.sp-tov__n{display:block;font-size:14px;font-weight:600;line-height:1.3;color:inherit;}
.sp-tov__s{display:block;font-size:12px;color:var(--graphite);margin-top:2px;}
.sp-tov b{font-size:15px;white-space:nowrap;}
.sp-sum{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding-top:10px;color:var(--graphite);}
.sp-sum b{color:var(--ink);font-weight:600;text-align:right;}
.sp-sum--big{font-size:16px;color:var(--ink);padding-top:14px;align-items:baseline;}
.sp-sum--big b{font-family:var(--display);font-weight:500;font-size:24px;}

/* --- Ширины страницы заказа --- */
@media(max-width:900px){
  .sp-grid{grid-template-columns:1fr;}
  .sp-panel{position:static;}
}
@media(max-width:640px){
  .sp-dva{grid-template-columns:1fr;}
  .sp-shagi{grid-template-columns:1fr;gap:0;}
  .sp-shagi li{padding:0 0 18px 40px;min-height:26px;}
  .sp-shagi li::before{top:30px;left:12px;right:auto;bottom:4px;width:2px;height:auto;}
}

/* --- Текстовая страница: оферта, политика, образец (этап ПД-6а) ---------
   Утверждённое демо .design-demo/stranica.html и css/stranica.css (вариант
   «оглавление сбоку», владелец 15.09.2026). Перенесено без изменений, кроме
   трёх мест, отмеченных ниже: заголовок страницы рисует блок CMS (класса
   на нём нет), подвал у сайта свой, а печать ограничена этой страницей. */

.st-main{padding-top:clamp(10px,1.4vw,20px);padding-bottom:clamp(48px,6vw,96px);}
.st-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--graphite);margin-bottom:12px;}
.st-crumbs a{color:var(--graphite);}
.st-crumbs a:hover{color:var(--ink);}
.st-crumbs b{color:var(--ink);font-weight:500;}
.st-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;}
/* Заголовок страницы приходит блоком CMS (views/public/blocks/page-heading.ejs),
   своего класса у него нет — отсюда второй селектор рядом с классом демо. */
.fbz .st-h1,.fbz .st1-verh h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0;}
.fbz .st-h2{font-family:var(--display);font-weight:500;font-size:clamp(19px,1.8vw,24px);line-height:1.25;margin:0 0 12px;}
.st-meta{font-size:13px;color:var(--graphite);margin-top:10px;}

/* Текст документа */
.st-tekst{font-size:16px;line-height:1.65;max-width:68ch;}
.st-tekst p{margin:0 0 12px;}
.st-tekst ul{margin:0 0 12px;padding-left:22px;list-style:disc;}
.st-tekst li{margin-bottom:6px;}
.st-tekst a{border-bottom:1px solid var(--ink);}
.st-tekst strong{font-weight:600;}
.st-razdel{padding-top:clamp(22px,2.6vw,34px);scroll-margin-top:calc(var(--st-shapka,90px) + 16px);}
.st-vopros{margin-top:clamp(28px,3vw,40px);padding-top:18px;border-top:1px solid var(--hair);font-size:14px;color:var(--graphite);max-width:68ch;}
.st-vopros a{color:var(--ink);border-bottom:1px solid var(--ink);}

/* Раскладка: оглавление сбоку */
.st1{display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-areas:'bok verh' 'bok tekst';column-gap:clamp(24px,4vw,64px);align-items:start;}
.st1-verh{grid-area:verh;}
.st1-tekst{grid-area:tekst;}
.st1-bok{grid-area:bok;align-self:start;position:sticky;top:calc(var(--st-shapka,90px) + 16px);display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - var(--st-shapka,90px) - 32px);overflow:auto;}
.st1-oglav{border:1px solid var(--ink);border-radius:var(--r);padding:16px 18px;background:var(--white);}
.st1-oglav summary{list-style:none;cursor:pointer;margin-bottom:10px;}
.st1-oglav summary::-webkit-details-marker{display:none;}
.st1-oglav ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:2px;}
.st1-oglav a{display:block;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.3;}
.st1-oglav a:hover{background:var(--canary-soft);}
.st1-oglav a.is-on{background:var(--canary);font-weight:600;}
.st1-oglav .fbz-btn{width:100%;}
.st1-drugie{border:1px solid var(--hair);border-radius:var(--r);padding:14px 18px;}
.st1-drugie a{display:block;padding:6px 0;font-size:14px;font-weight:600;}
.st1-drugie a:hover{text-decoration:underline;text-decoration-color:var(--canary);text-decoration-thickness:3px;text-underline-offset:4px;}

/* --- Ширины текстовой страницы --- */
@media(max-width:900px){
  .st1{grid-template-columns:1fr;grid-template-areas:'verh' 'bok' 'tekst';row-gap:16px;}
  .st1-bok{position:static;max-height:none;overflow:visible;}
}
@media(max-width:640px){
  .st-tekst{font-size:15px;}
}
/* Печать: остаётся только текст. Правило ограничено страницей документа
   (:has(.st-main)) — на остальных страницах витрины печать не меняется.
   Браузер без :has напечатает страницу вместе с шапкой и подвалом: текст
   от этого не пострадает. */
@media print{
  .fbz:has(.st-main) .fbz-top,
  .fbz:has(.st-main) .fbz-sec--line,
  .st1-bok{display:none !important;}
  .st1{display:block;}
}

/* --- Страница «не найдено», код 404 (этап ПД-6б) --------------------------
   Утверждённое демо .design-demo/ne-najdeno.html и css/ne-najdeno.css
   (вариант 2 «разделы каталога», владелец 15.09.2026). Перенесено без
   изменений: слева объяснение и поиск, справа разделы каталога с числом
   товаров. Разделы выводит сервер, скрипт демо не переносится. */

.nn-main{padding-top:clamp(22px,4vw,56px);padding-bottom:clamp(48px,6vw,96px);}
.nn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start;}
.nn-metka{display:inline-flex;padding:6px 14px;border-radius:999px;border:1px solid var(--ink);background:var(--canary);font-size:13px;font-weight:600;margin-bottom:14px;}
.fbz .nn-h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.015em;margin:0;}
.nn-lead{color:var(--graphite);font-size:clamp(15px,1.3vw,17px);max-width:52ch;margin-top:10px;}
.nn-lbl{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px;}

.nn-poisk{display:flex;gap:8px;width:100%;max-width:520px;margin-top:20px;}
.nn-poisk input{flex:1;min-width:0;height:48px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;font:inherit;font-size:15px;background:var(--white);}
.nn-poisk input:focus{outline:2px solid var(--canary);outline-offset:1px;}
.nn-knopki{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}

.nn-razdely{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.nn-razdely a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;border:1px solid var(--hair);border-radius:12px;font-size:14px;font-weight:600;line-height:1.3;transition:border-color .15s ease,background-color .15s ease;}
.nn-razdely a span{color:var(--graphite);font-weight:400;}
.nn-razdely a:hover{border-color:var(--ink);background:var(--canary-soft);}

/* --- Ширины страницы «не найдено» --- */
@media(max-width:900px){
  .nn-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .nn-razdely{grid-template-columns:1fr;}
}

/* --- Страница «Возврат, обмен и гарантия» /vozvrat (этап ПД-6в) -----------
   Утверждённое демо .design-demo/vozvrat.html и css/vozvrat.css (владелец
   15.09.2026; фон главного блока — светло-жёлтый --canary-soft). Перенесено
   без изменений, кроме двух мест: пометки «проверить юристом»
   на сайте нет, а правило печати ограничено этой страницей через :has() —
   в демо оно скрывало шапку и подвал при печати любой страницы. */

.vz-main{padding-top:clamp(10px,1.4vw,20px);padding-bottom:clamp(48px,6vw,96px);}
.vz-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--graphite);margin-bottom:14px;}
.vz-crumbs a{color:var(--graphite);}
.vz-crumbs a:hover{color:var(--ink);}
.vz-crumbs b{color:var(--ink);font-weight:500;}
.vz-muted{color:var(--graphite);font-size:clamp(15px,1.3vw,17px);}
.vz-main a:not(.fbz-btn){border-bottom:1px solid var(--ink);}
.vz-crumbs a{border-bottom:0 !important;}

/* Верхний блок */
.vz-hero{border:1.5px solid var(--ink);border-radius:calc(var(--r) + 8px);background:var(--canary-soft);padding:clamp(24px,4vw,56px);}
.vz-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:12px;}
.fbz .vz-h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5vw,60px);line-height:1.04;letter-spacing:-.03em;margin:0 0 16px;max-width:18ch;}
.vz-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--graphite);max-width:64ch;}
.vz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.vz-chip{font-size:13px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--white);border:1px solid var(--ink);}

/* Навигация по разделам — липнет под шапкой */
.vz-nav{position:sticky;top:var(--vz-shapka,90px);z-index:5;background:var(--white);border-bottom:1px solid var(--hair);margin-top:clamp(14px,2vw,24px);}
.vz-nav__in{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none;}
.vz-nav__in::-webkit-scrollbar{display:none;}
.vz-main .vz-nav a{flex:none;white-space:nowrap;font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--hair);border-radius:999px;}
.vz-main .vz-nav a:hover{border-color:var(--ink);}
.vz-main .vz-nav a.is-on{background:var(--canary);border-color:var(--ink);}

/* Разделы */
.vz-sec{padding-top:clamp(40px,5vw,72px);scroll-margin-top:calc(var(--vz-shapka,90px) + 64px);}
.vz-head{max-width:720px;margin-bottom:clamp(18px,2.4vw,28px);}
.fbz .vz-h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.12;letter-spacing:-.02em;margin:0 0 10px;}
.fbz .vz-h3{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.6vw,21px);line-height:1.3;margin:0 0 8px;}

.vz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.vz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.vz-card{border:1px solid var(--hair);border-radius:var(--r);background:var(--white);padding:clamp(18px,2.2vw,26px);}
.vz-card p{font-size:15px;line-height:1.6;}
.vz-card p + p{margin-top:10px;}
.vz-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--canary-soft);border:1px solid var(--canary-line);margin-bottom:12px;}
.vz-tag--net{background:#FFF1EE;border-color:#F3C5BE;color:#B3261E;}

/* Списки: жёлтая точка — можно, красный круг — ограничение */
.vz-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:9px;}
.vz-list li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;}
.vz-list li::before{content:'';position:absolute;left:0;top:2px;width:17px;height:17px;box-sizing:border-box;border-radius:50%;background:var(--canary);border:1.5px solid var(--ink);}
.vz-list--net li::before{background:var(--white);border-color:#B3261E;}

/* Шаги */
.vz-shagi{border:1.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--white);}
.vz-shag{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:clamp(16px,2vw,22px);border-bottom:1px solid var(--hair);}
.vz-shag:last-child{border-bottom:0;}
.vz-shag i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--white);font-style:normal;font-weight:700;}
.vz-shag p{color:var(--graphite);font-size:15px;line-height:1.55;}

/* Таблицы */
.vz-tab{border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;}
.vz-row{display:grid;grid-template-columns:minmax(180px,.7fr) 1.5fr;gap:18px;padding:14px 20px;border-bottom:1px solid var(--hair);font-size:15px;}
.vz-row:last-child{border-bottom:0;}
.vz-row:nth-child(odd){background:var(--mist);}
.vz-row strong{font-weight:600;}
.vz-row span{color:var(--graphite);line-height:1.55;}

.vz-note{border-left:4px solid var(--ink);background:var(--canary-soft);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin-top:16px;}
.vz-note b{display:block;margin-bottom:4px;}
.vz-knopki{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}

/* --- Ширины страницы возврата --- */
@media(max-width:900px){
  .vz-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  .vz-grid,.vz-grid--3{grid-template-columns:1fr;}
  .vz-nav{position:static;}
  .vz-sec{scroll-margin-top:calc(var(--vz-shapka,90px) + 12px);}
  .vz-row{grid-template-columns:1fr;gap:4px;}
  .vz-shag{grid-template-columns:40px minmax(0,1fr);gap:12px;}
  .vz-shag i{width:34px;height:34px;}
}
@media print{
  .fbz:has(.vz-main) .fbz-top,.fbz:has(.vz-main) > footer,.vz-nav,.vz-knopki{display:none !important;}
}