/* Start:/local/templates/floralmile/assets/css/formy-tovary.css?17876756289372*/
/* =========================================================================
   ОБЩИЕ БЛОКИ: товарная полоса из каталога и форма заявки.
   Подключаются и в разделе услуг, и в блоге. Один источник правды:
   держать копию в uslugi.css нельзя, правки разъедутся.
   ========================================================================= */
.fm-tovbl,.fm-zsec{--fm-font:'Montserrat',Arial,sans-serif}

/* =========================================================================
   ТОВАРЫ ИЗ КАТАЛОГА
   Карточка без своей красной кнопки: иначе ряд превращается в четыре
   одинаковых призыва и спорит с главной кнопкой страницы.
   ========================================================================= */
.fm-tovbl{margin:0 0 52px}
.fm-tovbl__shapka{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:0 0 18px;border-bottom:1px solid #ededea;margin:0 0 24px}
.fm-tovbl__kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.fm-tovbl__kicker::before{content:"";width:18px;height:1px;background:#e54e3a}
.fm-tovbl__h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;line-height:1.2;color:#252525}
.fm-tovbl__p{margin:10px 0 0;max-width:640px;font-size:15px;line-height:1.65;color:#6f6f6f}
.fm-tovbl__vse{flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#c0392b;white-space:nowrap;transition:color .16s}
.fm-tovbl__vse:hover{color:#e54e3a}
.fm-tovbl__ryad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.fm-tovk{display:block;text-decoration:none;min-width:0}
.fm-tovk__pic{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f7f5f2}
.fm-tovk__pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.fm-tovk:hover .fm-tovk__pic img{transform:scale(1.04)}
.fm-tovk__name{display:block;margin:14px 0 0;font-size:14.5px;line-height:1.45;color:#3f3f3f;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fm-tovk:hover .fm-tovk__name{color:#c0392b}
.fm-tovk__cena{display:block;margin:7px 0 0;font-size:16px;color:#252525}

/* =========================================================================
   ЗАЯВКА: единственный финал страницы
   Тёплая подложка, не серая. Форма внутри белая, тени нет.
   ========================================================================= */
.fm-zsec{margin:64px 0 0;padding:52px 46px 54px;border-radius:16px;
  background:#fbfaf8;border:1px solid #ededea}
/* ⭐ Колонки одной высоты (просьба Вени 25.08.2026): было слева 409px, справа 646px.
   Правая ужата, а левая тянется до её низа за счёт stretch. Провалов между строками
   маршрутов не делаем, вниз уходит только строка про города. */
.fm-zsec__in{display:grid;grid-template-columns:minmax(280px,0.85fr) minmax(420px,1.15fr);
  gap:clamp(36px,5vw,84px);align-items:stretch}
.fm-zsec__levo,.fm-zsec__pravo{display:flex;flex-direction:column}
.fm-zsec__levo .fm-zsec__geo{margin-top:auto;padding-top:22px}
.fm-zsec__kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.fm-zsec__kicker::before{content:"";width:18px;height:1px;background:#e54e3a}
.fm-zsec__h2{margin:12px 0 0;font-size:clamp(22px,2.2vw,29px);font-weight:400;line-height:1.2;color:#252525}
.fm-zsec__lead{margin:12px 0 0;font-size:16px;line-height:1.65;color:#5f5f5f}
.fm-zsec__pam{margin:26px 0 0;padding:20px 22px;background:#fff;border:1px solid #ededea;border-radius:12px}
.fm-zsec__pamz{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8a8a8a}
.fm-zsec__pam ul{margin:12px 0 0;padding:0;list-style:none}
.fm-zsec__pam li{position:relative;padding:0 0 0 16px;margin:0 0 8px;font-size:14.5px;
  line-height:1.5;color:#5f5f5f}
.fm-zsec__pam li:last-child{margin-bottom:0}
.fm-zsec__pam li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:#c9c4bd}
.fm-zsec__geo{margin:22px 0 0;font-size:14px;line-height:1.6;color:#8d8d8d}
.fm-zsec__geo a{color:#c0392b;border-bottom:1px solid rgba(192,57,43,.3)}
.fm-zsec__geo a:hover{color:#e54e3a}

/* маршруты по задаче внутри секции заявки (витрина) */
.fm-zsec__marsh{margin:22px 0 0}
/* строки дышат шире: правая колонка с формой выше по своей природе, и без этого
   слева оставалась дыра в двести пикселей (замер 25.08.2026) */
.fm-zsec__row{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px 2px;border-top:1px solid #e7e3de;text-decoration:none;color:#252525;
  transition:color .16s,padding .16s}
.fm-zsec__row:last-child{border-bottom:1px solid #e7e3de}
.fm-zsec__row strong{display:block;font-size:17px;font-weight:500}
.fm-zsec__row small{display:block;margin:5px 0 0;font-size:13.5px;color:#8a8a8a}
.fm-zsec__row svg{flex:0 0 auto;color:#c9c4bd;transition:transform .18s,color .18s}
.fm-zsec__row:hover{color:#c0392b;padding-left:8px}
.fm-zsec__row:hover svg{color:#e54e3a;transform:translateX(4px)}

/* сама форма */
/* Форма ужата, чтобы её высота сошлась с левой колонкой: поля 30/32 стали 24/26,
   зазоры между полями 18/20 стали 14/18, поле текста 112 стало 96. Ничего не убрано. */
.fm-zform{padding:22px 24px 24px;background:#fff;border:1px solid #e5e5e5;border-radius:14px}
.fm-zsec__pravo .fm-zform{margin:22px 0 0}
.fm-zform__lovushka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fm-zform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.fm-zfield{display:block;min-width:0}
.fm-zfield--vsya{grid-column:1/-1}
.fm-zfield__p{display:block;margin:0 0 8px;font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#8a8a8a}
.fm-zfield__v{width:100%;height:46px;padding:0 15px;font:400 15px/1.4 var(--fm-font,inherit);
  color:#252525;background:#fff;border:1px solid #dcdcd8;border-radius:8px;outline:none;
  transition:border-color .16s}
.fm-zfield__v:focus{border-color:#e54e3a}
/* ⚠️ height:auto тут не работал: у textarea высоту задаёт атрибут rows, и поле
   держалось на 112px независимо от min-height. Ставим высоту явно, растянуть
   поле мышью по-прежнему можно. */
.fm-zfield__t{height:96px;min-height:96px;padding:13px 15px;resize:vertical}
select.fm-zfield__v{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.fm-zform__niz{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin:18px 0 0}
.fm-zform__knopka{flex:0 0 auto;height:46px;padding:0 30px;border:0;border-radius:8px;
  background:#e54e3a;color:#fff;font:600 12.5px/1 var(--fm-font,inherit);letter-spacing:.09em;
  text-transform:uppercase;cursor:pointer;transition:background .16s}
.fm-zform__knopka:hover{background:#d9432f}
.fm-zform__sogl{margin:0;flex:1 1 240px;font-size:12px;line-height:1.5;color:#9a948c}
.fm-zform__err{margin:0 0 20px;padding:14px 16px;border:1px solid #f0c8c1;border-radius:8px;
  background:#fdf4f2}
.fm-zform__err p{margin:0 0 6px;font-size:14px;line-height:1.5;color:#b8402f}
.fm-zform__err p:last-child{margin:0}
.fm-zform__ok{padding:8px 0}
.fm-zform__okz{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#3f8a5c}
.fm-zform__okz::before{content:"";width:18px;height:1px;background:#3f8a5c}
.fm-zform__ok p{margin:12px 0 0;font-size:16px;line-height:1.6;color:#3f3f3f}


/* ---------- адаптив общих блоков ---------- */
@media (max-width:1250px){
  .fm-zsec__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .fm-zsec__pravo .fm-zform{margin:18px 0 0}
}
@media (max-width:1100px){
  .fm-tovbl__ryad{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fm-tovk:nth-child(4){display:none}
}
@media (max-width:860px){
  .fm-zsec{padding:34px 24px 36px;margin-top:48px}
  .fm-zform{padding:24px 22px 26px}
  .fm-tovbl__shapka{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:620px){
  .fm-zform__grid{grid-template-columns:minmax(0,1fr)}
  .fm-tovbl__ryad{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .fm-tovk:nth-child(4){display:block}
}

/* End */


/* Start:/local/templates/floralmile/assets/css/blog.css?178775354126441*/
/* =========================================================================
   Блог: витрина и статья.
   Тот же язык, что у услуг и брендов: один шрифт, курсива нет, заголовки
   тонкие, красный только акцентом, рамки еле заметные, теней нет.
   Всё под .fm-blist и .fm-art, общий шаблон каталога не трогаем.
   ========================================================================= */

.fm-blist,.fm-art{--ramka:#ededea;--tepl:#fbfaf8;--ink:#252525;--tekst:#5f5f5f;
  --kras:#e54e3a;--kras-t:#c0392b}

/* мелкая красная надпись над заголовком секции */
.fm-bsecl{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.fm-bsecl::before{content:"";width:18px;height:1px;background:#e54e3a}

/* =========================================================================
   ВИТРИНА
   ========================================================================= */
.fm-blist__intro{max-width:760px;margin:0 0 30px;font-size:16.5px;line-height:1.65;color:#5f5f5f}

/* карточка статьи, четыре вида */
.fm-bk{display:block;text-decoration:none;min-width:0}
.fm-bk__pic{display:block;overflow:hidden;border-radius:14px;background:#f4f1ed}
.fm-bk__pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.fm-bk:hover .fm-bk__pic img{transform:scale(1.03)}
.fm-bk__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.fm-bk__rub{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#c0392b}
.fm-bk__date{font-size:12.5px;color:#9a948c}
.fm-bk__t{display:block;margin:10px 0 0;line-height:1.25;color:#252525;transition:color .16s}
.fm-bk:hover .fm-bk__t{color:#c0392b}
.fm-bk__l{display:block;margin:10px 0 0;font-size:14.5px;line-height:1.6;color:#6f6f6f}
/* ⭐ Симметрия текста и кадра (просьба Вени 25.08.2026). Заголовок и лид держат
   одинаковое число строк во всех карточках одного вида, иначе соседние блоки
   текста рядом с одинаковыми кадрами выглядят рваными. */
.fm-bk--wide .fm-bk__t,.fm-bk--vert .fm-bk__t,.fm-bk--row .fm-bk__t{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fm-bk--wide .fm-bk__l,.fm-bk--vert .fm-bk__l,.fm-bk--row .fm-bk__l{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fm-bk--row .fm-bk__l{-webkit-line-clamp:2}

/* главный материал: разворот, текст слева, кадр справа */
.fm-blead{margin:0 0 24px}
.fm-bk--lead{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;
  background:#fbfaf8;border:1px solid #ededea;border-radius:16px;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.fm-bk--lead:hover{border-color:#ddd7cf;box-shadow:0 12px 34px rgba(90,78,64,.12)}
.fm-bk--lead .fm-bk__body{order:-1;display:block;padding:44px 46px;align-self:center}
.fm-bk--lead .fm-bk__pic{border-radius:0;min-height:330px}
.fm-bk--lead .fm-bk__t{font-size:clamp(24px,2.4vw,33px)}
.fm-bk--lead .fm-bk__l{margin-top:14px;font-size:16px}
/* строка-приглашение внизу главной карточки: без неё колонка текста кончалась
   на середине кадра и низ разворота пустовал */
.fm-bk--lead .fm-bk__body::after{content:"Читать статью";display:inline-flex;align-items:center;
  gap:8px;margin:22px 0 0;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:#c0392b}
.fm-bk--lead:hover .fm-bk__body::after{color:#e54e3a}

/* пара широких под главным */
.fm-bpara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0 0 24px}
.fm-bk--wide .fm-bk__pic{aspect-ratio:16/9}
.fm-bk--wide .fm-bk__body{display:block;padding:18px 2px 0}
.fm-bk--wide .fm-bk__t{font-size:21px}

/* мозаика: три в ряд */
.fm-bmoz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;margin:0 0 56px}
.fm-bk--vert .fm-bk__pic{aspect-ratio:4/3}
.fm-bk--vert .fm-bk__body{display:block;padding:16px 2px 0}
.fm-bk--vert .fm-bk__t{font-size:18.5px}

/* ранние материалы: строки, картинка слева */
.fm-barch{margin:0 0 56px}
.fm-barch__h{padding:0 0 18px;border-bottom:1px solid #ededea;margin:0 0 22px}
.fm-barch__h h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:#252525}
.fm-barch__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 34px}
.fm-bk--row{display:grid;grid-template-columns:172px minmax(0,1fr);gap:18px;align-items:center}
.fm-bk--row .fm-bk__pic{aspect-ratio:4/3}
.fm-bk--row .fm-bk__body{display:block;padding:2px 0}
.fm-bk--row .fm-bk__t{margin-top:8px;font-size:16.5px}
.fm-bk--row .fm-bk__l{margin-top:8px;font-size:13.5px;line-height:1.55}

/* финал витрины: не пустой центрированный призыв, а рабочая полоса */
.fm-bend{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:30px;align-items:center;
  padding:38px 42px;border-radius:16px;background:#fbfaf8;border:1px solid #ededea}
.fm-bend h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:#252525}
.fm-bend p{margin:12px 0 0;max-width:680px;font-size:15.5px;line-height:1.65;color:#5f5f5f}
.fm-bend__k{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.fm-bend__b{display:inline-flex;align-items:center;height:48px;padding:0 28px;border-radius:8px;
  background:#e54e3a;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;transition:background .16s}
.fm-bend__b:hover{background:#d9432f}
.fm-bend__s{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#c0392b;transition:color .16s}
.fm-bend__s:hover{color:#e54e3a}

/* =========================================================================
   СТАТЬЯ
   ========================================================================= */
.fm-art__hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,3.4vw,52px);
  align-items:center;margin:0 0 52px}
.fm-art__pic{border-radius:16px;overflow:hidden;background:#f4f1ed}
.fm-art__pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.fm-art__rub{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.fm-art__rub::before{content:"";width:18px;height:1px;background:#e54e3a}
.fm-art__zag h1{margin:14px 0 0;font-size:clamp(26px,3vw,40px);font-weight:400;line-height:1.14;color:#252525}
.fm-art__meta{display:flex;align-items:center;gap:12px;margin:16px 0 0;font-size:13.5px;color:#9a948c}
.fm-art__tochka{width:3px;height:3px;border-radius:50%;background:#c9c4bd}
.fm-art__lid{margin:18px 0 0;font-size:17px;line-height:1.65;color:#4a4a4a}
.fm-art__share{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin:26px 0 0;
  padding:18px 0 0;border-top:1px solid #ededea}
.fm-art__sharet{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a8a29a}
/* кнопки «поделиться» стали кружками с иконками, подчёркивание им не нужно */

/* текст и оглавление */
.fm-art__ryad{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(30px,3.4vw,54px);
  align-items:start;margin:0 0 60px}
/* ⭐ Правую полосу с пояснениями Веня попросил убрать 26.08.2026, а текст
   растянуть на её место. Колонки две: оглавление и широкая колонка чтения.
   Кегль поднят до 18px: при ширине около тысячи пикселей строка иначе даёт
   больше ста знаков и читается тяжело. */
/* ⚠️ Именно 1101, а не 1100: боковое оглавление скрывается правилом
   max-width:1100, и на ровно 1100 колонка под него оставалась пустой дырой
   шириной 250px (поймано замером 26.08.2026). Границы разведены на пиксель. */
@media (min-width:1101px){
  .fm-art__ryad{grid-template-columns:250px minmax(0,1fr);gap:clamp(36px,3.4vw,56px)}
}
/* ⭐ Боковая колонка целиком (26.08.2026): оглавление, три услуги из базы и три
   случайные статьи. Липкость перенесена с оглавления на обёртку, иначе при
   прокрутке уезжали услуги и «Интересное».
   ⛔ align-self:stretch обязателен: у сетки стоит align-items:start, колонка от
   него получает высоту по содержимому, и липнуть внутри становится нечему
   (эти же грабли ловились на прежней правой полосе).
   ⚠️ Ограничение по высоте с прокруткой внутри нужно для невысоких экранов: на
   1440x900 три блока выше рабочей области, и без него нижний блок был бы не
   виден никогда. */
.fm-art__bok{align-self:stretch;min-width:0}
/* ⭐ Колонка цепляется НИЗОМ к низу экрана (просьба Вени 26.08.2026). Когда она
   выше окна, скрипт внизу страницы ставит ей отрицательный `top`, и при
   прокрутке вниз нижний край стоит в 24px от низа окна: услуги и «Интересное»
   всегда целиком в кадре. Когда колонка ниже окна, `top` остаётся 24px и она
   липнет верхом, как обычно.
   ⛔ Чистый `bottom:24px` эту задачу не решает, проверено замером 26.08.2026:
   он лишь запрещает элементу опускаться ниже порога, а уехать вверх при
   прокрутке не мешает. Замер показал низ колонки в 3606px выше края окна.
   ⛔ Прежние ограничения высоты сняты: прокрутка внутри оглавления и растяжка-
   подсказка снизу были костылями против нехватки места, теперь место есть.
   ⚠️ align-self:stretch оставляем: у сетки align-items:start, без растяжки
   родителя sticky не работает вовсе. */
.fm-art__bokw{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
/* ⭐ Оглавление сделано заметнее (просьба Вени 26.08.2026): своя карточка на
   тёплом фоне, красная метка сверху, номера пунктов и подсветка при наведении.
   Раньше это была почти невидимая колонка серых ссылок. */
.fm-art__ogl{padding:22px 20px 18px;border:1px solid var(--ramka);
  border-radius:14px;background:var(--tepl)}
.fm-art__ogll{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kras-t);padding:0 0 14px}
.fm-art__ogll::before{content:"";width:16px;height:1px;background:var(--kras)}
.fm-art__ogl nav{display:flex;flex-direction:column;counter-reset:ogl}
.fm-art__ogl nav a{position:relative;counter-increment:ogl;padding:11px 0 11px 26px;
  border-top:1px solid #eeeae5;font-size:14.5px;line-height:1.4;color:#4a4a4a;
  transition:color .16s}
.fm-art__ogl nav a::before{content:counter(ogl);position:absolute;left:0;top:12px;
  font-size:12px;font-weight:600;color:#b9b2a8;transition:color .16s}
.fm-art__ogl nav a:hover{color:var(--kras-t)}
.fm-art__ogl nav a:hover::before{color:var(--kras)}
.fm-art__oglm{display:none}

/* ⭐ Услуги и «Интересное» в боковой колонке. Оглавление держим на тёплом фоне,
   эти два блока белые: так видно, что главное в колонке оглавление, а они
   дополнение, и колонка не превращается в три одинаковых пятна. */
.fm-bokb{padding:18px 18px 16px;border:1px solid var(--ramka);border-radius:14px;background:#fff}
.fm-bokb__l{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kras-t);padding:0 0 12px}
.fm-bokb__l::before{content:"";width:16px;height:1px;background:var(--kras)}
.fm-bokb__l + a{border-top:0;padding-top:0}
.fm-bokb__v{display:inline-block;margin:12px 0 0;font-size:13px;color:var(--kras-t);
  border-bottom:1px solid rgba(192,57,43,.3);transition:color .16s}
.fm-bokb__v:hover{color:var(--kras)}

/* ⭐ Миниатюра услуги в колонке (просьба Вени 26.08.2026): 48px, столько же
   съедает строка названия, поэтому высота блока почти не выросла. */
.fm-boku{display:flex;gap:11px;align-items:center;padding:10px 0;border-top:1px solid #f0ece7}
.fm-boku img{flex:0 0 48px;width:48px;height:48px;border-radius:10px;object-fit:cover;display:block}
.fm-boku__t{min-width:0;font-size:14px;line-height:1.3;color:#2f2f2f;transition:color .16s}
.fm-boku:hover .fm-boku__t{color:var(--kras-t)}

.fm-boki{display:flex;gap:11px;align-items:center;padding:11px 0;border-top:1px solid #f0ece7}
.fm-boki img{flex:0 0 54px;width:54px;height:54px;border-radius:10px;object-fit:cover;display:block}
/* ⚠️ Заголовок поста держим в трёх строках: у новогодних статей названия
   длинные, а обрезка на второй строке съедала смысл («Символ и цвета 2027
   года: что...»). Три строки ровно совпадают по высоте с миниатюрой. */
.fm-boki__t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-width:0;font-size:13.5px;line-height:1.35;color:#2f2f2f;transition:color .16s}
.fm-boki:hover .fm-boki__t{color:var(--kras-t)}

.fm-art__telo{max-width:1040px;font-size:18px;line-height:1.75;color:#3f3f3f}
.fm-art__telo > p{margin:0 0 20px}
.fm-art__telo h2{margin:52px 0 18px;font-size:clamp(22px,2.3vw,30px);font-weight:400;line-height:1.2;
  color:#252525;scroll-margin-top:24px}
.fm-art__telo h2:first-child{margin-top:0}
.fm-art__telo h3{margin:34px 0 14px;font-size:20px;font-weight:500;color:#252525}
.fm-art__telo ul,.fm-art__telo ol{margin:0 0 20px;padding:0 0 0 2px;list-style:none}
.fm-art__telo li{position:relative;padding:0 0 0 20px;margin:0 0 10px}
.fm-art__telo ul li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;background:#c9c4bd}
.fm-art__telo ol{counter-reset:sh}
.fm-art__telo ol li{counter-increment:sh;padding-left:28px}
.fm-art__telo ol li::before{content:counter(sh);position:absolute;left:0;top:0;font-size:13px;
  font-weight:600;color:#c0392b}
.fm-art__telo a{color:#c0392b;border-bottom:1px solid rgba(192,57,43,.3)}
.fm-art__telo a:hover{color:#e54e3a}
.fm-art__telo blockquote{margin:34px 0;padding:2px 0 2px 22px;border-left:2px solid #e54e3a;
  font-size:20px;line-height:1.5;color:#333}
.fm-art__telo figure{margin:34px 0}
.fm-art__telo figure img{width:100%;height:auto;border-radius:14px;display:block}
/* ⚠️ height:auto обязателен: без него браузер берёт высоту из атрибута height
   картинки (1024) при ширине колонки 800 и растягивает кадр в портрет. */
.fm-art__telo figcaption{margin:11px 0 0;font-size:13.5px;line-height:1.5;color:#9a948c}
.fm-art__telo .fm-tovbl{margin:44px 0}

/* переход к услуге внутри статьи */
.fm-art__usl{margin:44px 0 0;padding:26px 28px;background:#fbfaf8;border:1px solid #ededea;border-radius:14px}
.fm-art__uslk{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#c0392b}
.fm-art__uslk::before{content:"";width:18px;height:1px;background:#e54e3a}
.fm-art__usl p{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:#5f5f5f}
.fm-art__usl a{display:inline-block;margin:14px 0 0;font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#c0392b;border:0}
.fm-art__usl a:hover{color:#e54e3a}

.fm-art__tegi{display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 0;padding:22px 0 0;
  border-top:1px solid #ededea}
.fm-art__tegi a{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:6px;
  background:#f6f4f1;font-size:13px;color:#6f6f6f;border:0;transition:background .16s,color .16s}
.fm-art__tegi a:hover{background:#efe9e3;color:#c0392b}

/* =========================================================================
   Врезки внутри текста
   Раньше это была правая полоса. Веня попросил 26.08.2026 полосу убрать, текст
   растянуть на её место, а пояснения оставить: они переехали во врезки.
   ========================================================================= */
.fm-vrez{margin:34px 0;padding:24px 26px 26px;border-radius:14px;background:var(--tepl);
  border:1px solid var(--ramka)}
.fm-art__telo > .fm-vrez:first-child{margin-top:0}
.fm-vrez--kor{border-left:3px solid var(--kras)}
.fm-vrez__l{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kras-t)}
.fm-vrez__l::before{content:"";width:16px;height:1px;background:var(--kras)}
.fm-vrez ul{margin:14px 0 0;padding:0;list-style:none}
.fm-vrez li{position:relative;margin:0 0 10px;padding:0 0 0 20px;font-size:16px;line-height:1.6;
  color:#4a4a4a;overflow-wrap:break-word}
.fm-vrez li:last-child{margin-bottom:0}
.fm-vrez li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:1px;
  background:var(--kras)}
.fm-vrez--uch li::before{background:#c9c4bd}

/* =========================================================================
   Услуги под статьёй
   ========================================================================= */
.fm-art__uslugi{margin:0 0 52px}
.fm-art__uslh{padding:0 0 18px;border-bottom:1px solid var(--ramka);margin:0 0 24px}
.fm-art__uslh h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:var(--ink)}
.fm-art__uslg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* ⭐ Миниатюра в карточке услуги (просьба Вени 26.08.2026). Внутренние отступы
   переехали с самой карточки на текстовую часть, иначе картинка не дотянулась бы
   до краёв и по бокам осталась бы полоса фона. */
.fm-uslk{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--tepl);border:1px solid var(--ramka);text-decoration:none;
  transition:border-color .2s,box-shadow .2s}
.fm-uslk:hover{border-color:#ddd7cf;box-shadow:0 10px 28px rgba(90,78,64,.10)}
.fm-uslk__pic{display:block;background:#f0ece7}
/* ⚠️ height:auto обязателен: у картинки стоят атрибуты width и height (они
   держат место до загрузки и убирают скачок вёрстки), и без сброса высоты
   браузер берёт 405px из атрибута, а `aspect-ratio` не применяется вовсе.
   Поймано замером 26.08.2026: карточка была 443x405 вместо 443x249. */
.fm-uslk__pic img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .35s ease}
.fm-uslk:hover .fm-uslk__pic img{transform:scale(1.03)}
.fm-uslk__b{display:flex;flex-direction:column;padding:22px 24px 22px}
.fm-uslk__t{font-size:19px;line-height:1.25;color:var(--ink);transition:color .16s}
.fm-uslk:hover .fm-uslk__t{color:var(--kras-t)}
.fm-uslk__p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--tekst)}
.fm-uslk__s{margin:18px 0 0;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--kras-t)}

/* =========================================================================
   Кнопки «поделиться»
   Иконки встроенные SVG: ноль запросов, около трёхсот байт на штуку.
   Цвет один, фирменный акцент появляется при наведении: разноцветные логотипы
   спорили бы со спокойной шапкой статьи.
   ========================================================================= */
.fm-shk{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--ramka);background:#fff;color:#8b857c;
  transition:color .16s,border-color .16s,background .16s}
/* на телефоне палец требует зоны от 44px (замечание Кодекса 26.08.2026) */
@media (max-width:860px){.fm-shk{width:44px;height:44px}}
.fm-shk:hover{color:var(--kras);border-color:rgba(229,78,58,.45);background:var(--tepl)}
.fm-shk svg{display:block}

/* ещё кадры: то, что не влезло в текст, идёт лентой перед соседними статьями */
.fm-art__gal{margin:0 0 52px}
.fm-art__galh{padding:0 0 18px;border-bottom:1px solid var(--ramka);margin:0 0 24px}
.fm-art__galh h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:var(--ink)}
.fm-art__galg{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.fm-art__galk{margin:0}
.fm-art__galk img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;
  display:block;background:#f4f1ed}
.fm-art__galk figcaption{margin:11px 2px 0;font-size:13.5px;line-height:1.5;color:#9a948c}

/* читайте также */
.fm-art__also{margin:0 0 8px}
.fm-art__alsoh{padding:0 0 18px;border-bottom:1px solid #ededea;margin:0 0 24px}
.fm-art__alsoh h2{margin:10px 0 0;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:#252525}
/* статей внизу четыре (просьба Вени 26.08.2026), поэтому четыре колонки */
.fm-art__alsog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}

/* =========================================================================
   Адаптив
   ========================================================================= */
@media (max-width:900px){
  .fm-art__uslg{grid-template-columns:minmax(0,1fr);gap:16px}
  .fm-vrez{padding:20px 20px 22px}
}
@media (max-width:1100px){
  .fm-art__telo{font-size:17px}
  .fm-bk--lead{grid-template-columns:minmax(0,1fr)}
  .fm-bk--lead .fm-bk__body{order:0;padding:28px 26px 30px}
  .fm-bk--lead .fm-bk__pic{min-height:0;aspect-ratio:16/9;order:-1}
  .fm-bmoz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-art__hero{grid-template-columns:minmax(0,1fr);gap:26px}
  .fm-art__pic{order:-1}
  .fm-art__ryad{grid-template-columns:minmax(0,1fr);gap:26px}
  /* ⛔ Ниже 1101 боковая колонка убирается целиком, а не одно оглавление:
     оглавление заменяет раскрывающийся список, услуги и статьи и без того
     стоят под текстом. Показывать их дважды на узком экране незачем. */
  .fm-art__bok{display:none}
  .fm-art__oglm{display:block;border:1px solid #ededea;border-radius:12px;background:#fbfaf8}
  .fm-art__oglm summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:14px;
    font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6f6f6f;
    display:flex;align-items:center;justify-content:space-between}
  .fm-art__oglm summary::-webkit-details-marker{display:none}
  .fm-art__oglm summary span{font-size:12px;color:#a8a29a}
  .fm-art__oglm nav{display:flex;flex-direction:column;padding:0 18px 8px}
  .fm-art__oglm nav a{padding:10px 0;border-top:1px solid #ededea;font-size:14.5px;color:#5f5f5f}
  /* ⚠️ Полностью снимать ограничение нельзя: на 1100px строка вырастала до
     1040 пикселей, это около ста десяти знаков при норме от шестидесяти до
     девяноста. Держим потолок и центрируем колонку в своей ячейке, чтобы не
     появилась дыра сбоку (замер 26.08.2026). */
  .fm-art__telo{max-width:900px;margin-inline:auto}
  .fm-art__alsog{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .fm-bpara{grid-template-columns:minmax(0,1fr);gap:26px}
  .fm-barch__l{grid-template-columns:minmax(0,1fr)}
  .fm-bend{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 24px}
  .fm-art__telo{font-size:16.5px}
}
@media (max-width:620px){
  .fm-bmoz{grid-template-columns:minmax(0,1fr);gap:26px}
  .fm-bk--row{grid-template-columns:110px minmax(0,1fr);gap:14px}
  .fm-bk--lead .fm-bk__body{padding:24px 20px 26px}
  .fm-art__alsog{grid-template-columns:minmax(0,1fr)}
  .fm-art__alsog .fm-bk:nth-child(3){display:block}
  .fm-art__telo blockquote{font-size:18px}
}

/* End */


/* Start:/local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178835103212538*/
/* Floral Mile — карточка каталога (Aspro-style: острые углы, сетка тонкими линиями) */
.fm_catalog_grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--fm-border,#e6e6e6);
  border-left:1px solid var(--fm-border,#e6e6e6);
  background:#fff;
}
.fm_catalog_empty{padding:40px;text-align:center;color:#888}
.fm_catalog_empty a{color:var(--fm-red-text,#c0392b);text-decoration:underline}   /* ссылка на первую страницу у 404 за пределом пагинации (02.09.2026) */

.fm_card{
  position:relative;
  background:#fff;
  padding:0 0 20px;
  display:flex;
  flex-direction:column;
  /* меряем ширину САМОЙ карточки: текст на кнопке зависит от неё, а не от экрана.
     На 1280 с сайдбаром карточка узкая, а на 1100 без сайдбара широкая. */
  container-type:inline-size;
  border-right:1px solid var(--fm-border,#e6e6e6);
  border-bottom:1px solid var(--fm-border,#e6e6e6);
}
.fm_card__img{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f4f4f4;
}
.fm_card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fm_card:hover .fm_card__img img{transform:scale(1.04)}
.fm_card__noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:13px}

/* Нижняя строка карточки: цена слева, кнопка справа, обе под артикулом.
   margin-top:auto прижимает строку к низу, поэтому у карточек ряда низ ровный,
   даже когда название заняло одну строку, а у соседа две. */
/* ⛔ Поля здесь ПРЕЖНИЕ, 18px. Сжатые вдвое значения переехали в
   element_style.css и действуют только в блоке `.fm-related` (шесть товаров в
   карточке товара): Веня просил сжать именно его, а не весь каталог. */
.fm_card__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;                 /* на самой узкой карточке кнопка уходит под цену */
  padding:0 18px;margin-top:auto;min-height:44px;
}

/* Кнопка «В корзину»: в одной строке с ценой, справа. Скругление 10px, как у пунктов
   верхнего красного меню. Раньше она была абсолютной с bottom:14px и накрывала цену. */
.fm_card__buy{
  position:static;box-sizing:border-box;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:28px;padding:0 11px;border-radius:10px;
  background:var(--fm-red,#e54e3a);color:#fff;text-decoration:none;
  font:700 11px/1 var(--fm-font,sans-serif);text-transform:uppercase;letter-spacing:0;
  white-space:nowrap;
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .2s,transform .2s,background .15s;
}
.fm_card__buy svg{flex:0 0 auto}
/* По умолчанию кнопка это иконка. Подпись показываем, только когда она влезает
   рядом с ценой: цена 83 плюс зазор 10 плюс кнопка с подписью 120 это 213,
   плюс поля строки это нижняя граница ширины.
   ⚠️ @container меряет CONTENT-BOX контейнера, то есть без бокового padding
   самой карточки.
   ⚠️ 27.08.2026 отступы сократили вдвое, и расчёт сдвинулся: поля строки стали
   18px вместо 36, поле карточки 6px вместо 12. Нужный минимум теперь 231, порог
   оставлен прежним, 246: он с запасом покрывает новое значение, а понижать его
   без просьбы владельца незачем. Прежний комментарий обещал 255 и уже не
   соответствовал коду (замечание Кодекса). */
.fm_card__buytext{display:none}
.fm_card__buy{width:34px;padding:0}
@container (min-width:246px){
  .fm_card__buytext{display:inline}
  /* ⭐ Отрицательное поле ровно в правый padding кнопки: так последняя буква
     надписи встаёт под последнюю цифру артикула строкой выше (просьба Вени
     25.08.2026). Без него надпись не доходила до артикула ровно на 11px, хотя
     края коробок совпадали. Сдвиг живёт внутри контейнерного запроса: у узкой
     карточки кнопка это иконка без подписи, выравнивать там нечего, и поле
     строки в 12px остаётся целым. */
  .fm_card__buy{width:auto;padding:0 11px;margin-right:-11px}
}
/* Прячем по наведению ТОЛЬКО там, где есть настоящая мышь. На телефоне :hover
   залипает после первого касания, и кнопка требовала бы второго нажатия. */
@media (hover:hover) and (pointer:fine){
  .fm_card__buy{opacity:0;transform:translateY(10px);pointer-events:none}
  /* ⚠️ Кроме :focus-within у карточки нужен и :focus у самой кнопки: с одним
     только focus-within кнопка при переходе клавиатурой оставалась прозрачной
     (замер 27.08.2026 давал opacity 0 при живом фокусе). Человек с клавиатуры
     иначе не видит, где он находится. */
  .fm_card:hover .fm_card__buy,
  .fm_card:focus-within .fm_card__buy,
  .fm_card__buy:focus{opacity:1;transform:translateY(0);pointer-events:auto}
}
@media (hover:none),(pointer:coarse){
  /* на телефоне кнопка видна всегда, поэтому ей нужна нормальная зона касания:
     28px пальцем неудобно, возвращаем 38 */
  .fm_card__buy{opacity:1;transform:none;pointer-events:auto;height:38px;min-width:38px}
}
.fm_card__buy:hover{background:var(--fm-red-dark,#c31f1f);color:#fff}
/* ⛔ Была чёрная рамка в три пикселя, и после нажатия мышью она оставалась на
   кнопке: «убери ужасный чёрный ободок, я его не просил» (Веня 27.08.2026).
   Рамку для клавиатуры оставляем, но тонкую и в цвет кнопки. По нажатию мышью
   фокус снимается скриптом, поэтому в обычной работе её не видно. */
.fm_card__buy:focus-visible{outline:2px solid var(--fm-red,#e54e3a);outline-offset:2px;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .fm_card__buy,.fm_card__img img{transition:none}
}

.fm_card__accent{display:block;width:34px;height:2px;background:var(--fm-red,#e54e3a);margin:16px 18px 12px}

.fm_card__rate{display:flex;align-items:center;gap:7px;padding:0 18px;margin-bottom:10px;height:20px}
.fm_card__rate b{font-size:13px;font-weight:700;color:#252525}
.fm_card__stars{display:flex;gap:2px}
.fm_star{width:13px;height:13px;fill:#f0a500}

.fm_card__title{
  display:block;padding:0 18px;margin-bottom:10px;
  color:#252525;font-size:15px;font-weight:500;line-height:1.4;
  min-height:42px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fm_card__title:hover{color:var(--fm-red,#e54e3a)}

.fm_card__stock{display:flex;align-items:center;gap:7px;padding:0 18px;margin-bottom:12px;font-size:13px;color:var(--fm-green,#3aaa35);font-weight:600}
.fm_card__dot{width:8px;height:8px;border-radius:50%;background:#3aaa35}   /* точка наличия зелёная: --fm-green в теме тёмно-синий (Веня 02.09.2026) */

/* nowrap обязателен: рядом стоит кнопка, и без него цена ломается на две строки */
.fm_card__price{display:flex;align-items:baseline;gap:4px;padding:0;white-space:nowrap}
.fm_card__cur{font-size:18px;font-weight:700;color:#252525}
.fm_card__unit{font-size:13px;color:var(--fm-faint,#aaa);font-weight:400;margin-left:-1px}
.fm_card__old{font-size:13px;color:#b7b7b7;text-decoration:line-through}
.fm_card__empty{color:#888;font-weight:600}

@media(max-width:1100px){.fm_catalog_grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.fm_catalog_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){
  .fm_catalog_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm_card{padding-bottom:14px}
  /* поля по образцу 4bike (замер 28.08.2026): текст стоит в 7px от края */
  .fm_card__accent{margin:12px 7px 8px}
  .fm_card__rate{padding:0 7px;margin-bottom:8px}
  .fm_card__rate b{font-size:11px}
  .fm_star{width:11px;height:11px}
  .fm_card__title{font-size:14px;line-height:1.35;padding:0 7px;min-height:38px}
  .fm_card__stock{padding:0 7px;font-size:12px}
  .fm_card__bottom{padding:0 7px;gap:8px}
  .fm_card__cur{font-size:16px}
}

/* ==========================================================================
   Наличие в плитке каталога (свойство NALICHIE, 01.09.2026).
   Зелёная точка «Много» стояла у всех товаров подряд, включая те, которых нет.
   ========================================================================== */

.fm_card__stock--out{color:#a8493d}
.fm_card__stock--out .fm_card__dot{background:#c2554a}
.fm_card__stock--zakaz .fm_card__dot{background:#d99a2b}

/* Кнопка «Узнать цену» вместо корзины у товаров под заказ: тот же размер и то же
   поведение, что у корзины, значок ценника стоит в разметке. Подпись показывается
   от 300px контейнера, а не от 246, как у корзины: «Цена по запросу» шире цены,
   и от 246 до 299 ряд падал бы на две строки. Раньше подпись была видна всегда,
   кнопка не влезала рядом с «Цена по запросу» и уходила на вторую строку, а в блоках
   карточки товара (font-size:0) оставался пустой квадрат (Веня 02.09.2026). */
.fm_card__buy--zakaz{width:34px;padding:0;margin-right:0}
.fm_card__buy--zakaz .fm_card__buytext{display:none}
@container (min-width:300px){
  .fm_card__buy--zakaz{width:auto;padding:0 11px;margin-right:-11px}
  .fm_card__buy--zakaz .fm_card__buytext{display:inline}
}
.fm_card__empty{font-size:13px;white-space:nowrap}
@container (max-width:245px){.fm_card__empty{font-size:12px}}

/* Метка наличия не рвётся пополам: «Под заказ» вместе с артикулом не влезал
   в строку узкой карточки и печатался как «Под / заказ». Переносится теперь
   артикул, а не метка. */
.fm_card__stockt{white-space:nowrap;flex:0 0 auto}
/* Артикул ВСЕГДА в одной строке с остатком, переноса нет (Веня 02.09.2026):
   он прижат вправо, при нехватке места режется многоточием, на узкой плитке
   (контейнер уже 246px, две колонки телефона) без подписи «Арт:» и мельче. */
.fm_card__stock{flex-wrap:nowrap;justify-content:flex-start}
.fm_card__art{margin-left:auto;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
@container (max-width:245px){
  .fm_card__artl{display:none}
  .fm_card__art{font-size:11px;letter-spacing:0}
}

/* End */
/* /local/templates/floralmile/assets/css/formy-tovary.css?17876756289372 */
/* /local/templates/floralmile/assets/css/blog.css?178775354126441 */
/* /local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178835103212538 */