/* 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/uslugi.css?178845437838807*/
/* =========================================================================
Раздел «Услуги»: список и три страницы-лендинга.
Всё под .fm-svc и .fm-svclist, общий шаблон каталога не трогаем.
Шрифт один, курсива нет нигде. Красный только акцентом.
========================================================================= */
.fm-svc{--tepl:#fbfaf8;--ramka:#ededea;--tekst:#5f5f5f;--ink:#252525;--kras:#e54e3a;--kras-t:#c0392b}
/* ---------- герой: один баннер на страницу, как на главной ---------- */
/* ⭐ Текст занимает всю высоту баннера: заголовок стоит сверху, крошки прибиты
к низу распоркой margin-top:auto (просьба Вени 25.08.2026). Раньше блок
прижимался к нижнему краю целиком. */
.fm-svc__hero{position:relative;margin:0 0 46px;border-radius:16px;overflow:hidden;
min-height:clamp(320px,46vw,480px);display:flex;align-items:stretch;background:#1d1d1f}
.fm-svc__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fm-svc__hero::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(18,18,20,.86) 0%,rgba(18,18,20,.66) 42%,rgba(18,18,20,.12) 100%)}
/* ⚠️ На узком экране текст лежит во всю ширину, и правый край градиента с его .12
оставлял под крошками светлые куски фотографии: контраст падал до 1,1.
Тут градиент идёт сверху вниз и плотнее (замер 25.08.2026). */
@media (max-width:860px){
.fm-svc__hero::after{background:linear-gradient(180deg,rgba(18,18,20,.7) 0%,rgba(18,18,20,.78) 45%,rgba(18,18,20,.92) 100%)}
}
.fm-svc__herotext{position:relative;z-index:2;max-width:620px;padding:44px 46px 46px;
display:flex;flex-direction:column;align-items:flex-start}
/* ⛔ Селектор с .fm-svc__hero обязателен: правило .fm-svc__kicker ниже по файлу
(секции страницы, тёмно-красный #c0392b) перебивало этот светлый цвет, и текст
в баннере на фотографии читался с контрастом 2,8 при норме 4,5. Со светлым
цветом контраст 8,5. Найдено замером 25.08.2026. */
.fm-svc__hero .fm-svc__kicker{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:#ffb3a5}
.fm-svc__hero .fm-svc__kicker::before{background:#ffb3a5}
/* ⛔ Крошкам в баннере нужен именно flex: с `display:block` выше по каскаду их
`flex-wrap` и `gap` были мёртвыми, и на телефоне строки держались одними
пробелами разметки (замечание Кодекса 25.08.2026, подтверждено каскадом).
Декоративную чёрточку `::before` гасим: во flex она стала бы видимым
элементом строки, хотя в баннере её не было никогда. */
.fm-svc__hero .fm-svc__krohi{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.fm-svc__hero .fm-svc__krohi::before{display:none}
/* распорка: между кнопкой и крошками остаётся весь свободный воздух баннера,
но не меньше 30px, иначе на низком экране крошки прилипают к кнопке */
.fm-svc__hero .fm-svc__krohi{margin-top:auto;padding-top:30px}
.fm-svc__hero h1{margin:0;font-size:clamp(30px,3.6vw,46px);font-weight:400;line-height:1.1;color:#fff}
.fm-svc__herolead{margin:16px 0 0;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.fm-svc__herobtn{display:inline-flex;align-items:center;height:46px;margin:24px 0 0;padding:0 26px;
border-radius:6px;background:var(--kras);color:#fff;text-decoration:none;font-size:13px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;transition:background .16s}
.fm-svc__herobtn:hover{background:#d9432f}
/* ---------- общий заголовок секции ---------- */
.fm-svc__sec{margin:0 0 52px}
.fm-svc__sec--tepl{padding:44px 46px;background:var(--tepl);border:1px solid var(--ramka);border-radius:14px}
.fm-svc__h2{margin:0;font-size:clamp(22px,2.2vw,29px);font-weight:400;line-height:1.2;color:var(--ink)}
.fm-svc__lead{margin:12px 0 0;max-width:760px;font-size:16px;line-height:1.65;color:var(--tekst)}
.fm-svc__line{height:1px;margin:20px 0 26px;background:var(--ramka)}
/* ---------- что входит: четыре колонки списками, а не одинаковые плитки ---------- */
.fm-svc__sostav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px}
.fm-svc__grp{padding:0 0 0 24px;border-left:1px solid var(--ramka)}
.fm-svc__grp:first-child{padding-left:0;border-left:0}
.fm-svc__grpname{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--kras-t)}
.fm-svc__grp ul{margin:0;padding:0;list-style:none}
.fm-svc__grp li{position:relative;padding:0 0 0 16px;margin:0 0 9px;font-size:15px;line-height:1.5;color:var(--tekst)}
.fm-svc__grp li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:#c9c4bd}
/* ---------- крупные карточки с фото: стили свадьбы, сезоны контейнеров ---------- */
.fm-svc__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.fm-svc__card{display:flex;flex-direction:column;min-width:0}
/* кадры приходят горизонтальными, поэтому и рамка кадра горизонтальная: портретный
контейнер резал бы композицию стола пополам */
.fm-svc__cardpic{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f2efeb}
.fm-svc__cardpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.fm-svc__card:hover .fm-svc__cardpic img{transform:scale(1.03)}
.fm-svc__cardname{margin:16px 0 0;font-size:17px;color:var(--ink)}
.fm-svc__cardtext{margin:7px 0 0;font-size:14.5px;line-height:1.6;color:var(--tekst)}
/* примеры и сезоны идут по три в ряд: auto-fit при пяти-шести кадрах
оставляет дырку в последнем ряду */
.fm-svc__cards--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.fm-svc__cards--wide .fm-svc__cardpic{aspect-ratio:3/2}
@media (max-width:900px){.fm-svc__cards--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------- текстовые карточки без фото: сетка другая, чем у фото-карточек ---------- */
.fm-svc__plain{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 30px}
.fm-svc__plainc{padding:0 0 0 26px;border-left:2px solid #f0ece6}
.fm-svc__plainn{margin:0 0 8px;font-size:17px;color:var(--ink)}
.fm-svc__plaint{margin:0;font-size:15px;line-height:1.65;color:var(--tekst)}
/* ---------- шаги работы: нумерованная лента ---------- */
.fm-svc__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px 24px;
counter-reset:shag}
.fm-svc__step{position:relative;padding:22px 0 0;border-top:2px solid var(--ramka);counter-increment:shag}
.fm-svc__step::before{content:counter(shag,decimal-leading-zero);position:absolute;top:-2px;left:0;
padding:0 10px 0 0;background:#fff;transform:translateY(-58%);
font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--kras)}
.fm-svc__stepname{margin:0 0 7px;font-size:16px;color:var(--ink)}
.fm-svc__steptext{margin:0;font-size:14.5px;line-height:1.6;color:var(--tekst)}
/* ---------- цена: тёмная полоса, ломает белый ритм ---------- */
/* ⭐ Тёмная фотография вместо сплошной заливки (просьба Вени 25.08.2026).
Кадр свой, сумеречный, под каждую услугу. Поверх него градиент, который
гасит правую часть и держит контраст текста: без него светлые окна
на фотографии съедали бы буквы. Цвет #232326 остаётся подложкой на случай,
если кадр не загрузился. */
.fm-svc__price{position:relative;padding:42px 46px;border-radius:14px;
background:#232326;color:#fff;overflow:hidden;isolation:isolate}
/* ⭐ Кадры сняты в сумерках, и под плотной вуалью их было почти не разобрать
(просьба Вени 25.08.2026 «сделать светлей везде»). Осветляем сам кадр
фильтром и ослабляем вуаль, но только до предела, за которым белый текст
перестаёт держать контраст: замер по реальным пикселям обязателен. */
.fm-svc__price--foto::before{content:"";position:absolute;inset:0;z-index:-2;
background-image:var(--cena-fon);background-size:cover;background-position:center;
filter:brightness(1.62) saturate(1.08)}
.fm-svc__price--foto::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg,rgba(20,20,22,.9) 0%,rgba(20,20,22,.8) 42%,rgba(20,20,22,.34) 100%)}
@media (max-width:860px){
.fm-svc__price--foto::after{background:linear-gradient(180deg,rgba(20,20,22,.86) 0%,rgba(20,20,22,.74) 100%)}
}
.fm-svc__price .fm-svc__h2{color:#fff}
.fm-svc__price .fm-svc__lead{color:rgba(255,255,255,.76)}
.fm-svc__chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}
.fm-svc__chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
font-size:13.5px;color:rgba(255,255,255,.88)}
.fm-svc__pricebtn{display:inline-flex;align-items:center;height:46px;margin:26px 0 0;padding:0 26px;
border-radius:6px;background:var(--kras);color:#fff;text-decoration:none;font-size:13px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;transition:background .16s}
.fm-svc__pricebtn:hover{background:#d9432f}
/* ---------- наша работа: подпись перед галереей ---------- */
.fm-svc__own{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:26px;
align-items:end;margin:0 0 4px}
.fm-svc__ownnote{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;font-size:11.5px;
font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kras-t)}
.fm-svc__ownnote::before{content:"";width:18px;height:1px;background:var(--kras)}
/* ---------- вопросы и ответы ---------- */
.fm-svc__faq{border-top:1px solid var(--ramka)}
.fm-svc__q{border-bottom:1px solid var(--ramka)}
/* ⭐ Вопрос стоит по центру колонки (просьба Вени 25.08.2026). Отступы по бокам
симметричные: с прежним `18px 40px 18px 0` центр строки уезжал бы влево на
20 пикселей, потому что справа место занято стрелкой. Сама стрелка лежит вне
потока, поэтому на центр не влияет. Разделители остаются во всю ширину. */
.fm-svc__q summary{list-style:none;cursor:pointer;padding:18px 40px;position:relative;
font-size:16.5px;color:var(--ink);text-align:center}
.fm-svc__q summary::-webkit-details-marker{display:none}
.fm-svc__q summary::after{content:"";position:absolute;right:6px;top:26px;width:9px;height:9px;
border-right:1.5px solid #9a9a9a;border-bottom:1.5px solid #9a9a9a;transform:rotate(45deg);
transition:transform .18s}
.fm-svc__q[open] summary::after{transform:rotate(-135deg);top:30px}
.fm-svc__q summary:hover{color:var(--kras-t)}
.fm-svc__a{margin:0;padding:0 40px 20px 0;font-size:15.5px;line-height:1.68;color:var(--tekst)}
/* ---------- сцена вокруг вопросов ----------
Вопросы занимали всю ширину 1476px при короткой строке ответа, и справа
оставалось пусто. Держим колонку чтения по центру, по бокам ставим
тематический декор. Декор ДЕКОРАТИВНЫЙ: это фон пустого div, а не ![]()
,
поэтому диктор его не читает и телефон его не загружает (правило внутри
медиазапроса от 1200px, ниже background-image просто не задан). */
.fm-svc__faqscene{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
.fm-svc__faqscene>.fm-svc__faq{width:min(100%,820px)}
.fm-svc__faqdecor{display:none}
/* ⭐ Декор вынут из потока намеренно. На сетке из трёх колонок жёсткие 210 и 270
пикселей по бокам плюс минимум колонки вопросов не влезали в контейнер на
ширинах от 1200 до 1320 и от 1400 до 1500: содержимое сцены было шире её самой
и декор срезался краем секции (замечание Кодекса 25.08.2026, подтверждено
замером на 13 ширинах). Теперь ширина декора считается от места, которое
реально осталось, поэтому переполнения не бывает ни на одной ширине. */
@media (min-width:1200px){
.fm-svc__faqscene--dekor{position:relative;display:block}
.fm-svc__faqscene--dekor>.fm-svc__faq{width:min(100%,760px);margin:0 auto}
.fm-svc__faqscene--dekor .fm-svc__faqdecor{display:block;position:absolute;top:0;bottom:0;
width:min(270px,calc((100% - 800px) / 2));pointer-events:none;
background-repeat:no-repeat;background-position:bottom center;background-size:contain}
.fm-svc__faqdecor--l{left:0;background-image:var(--dekor-l)}
.fm-svc__faqdecor--r{right:0;background-image:var(--dekor-r)}
}
/* секция вопросов тёплая: декор вырезан по контуру и подложен цветом --tepl,
на белом фоне по краю был бы виден шов */
.fm-svc__faqsec{padding:40px 44px 0;background:var(--tepl);
border:1px solid var(--ramka);border-radius:14px}
@media (max-width:860px){.fm-svc__faqsec{padding:26px 20px 0}}
/* ---------- проза после героя ----------
Контейнер каталога 1680px это техническая ширина, а не ширина чтения:
строка в 1600 пикселей не читается. Держим колонку. */
.fm-svc__proza{max-width:880px;font-size:17px;line-height:1.72}
.fm-svc__proza p{margin:0 0 20px}
.fm-svc__proza p:last-child{margin-bottom:0}
/* вертикальный кадр справа от вводного текста: он был самым густым местом
страницы (725 знаков подряд без единой картинки) */
.fm-svc__prozarow{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
/* ⭐ Кадр выведен из потока намеренно. В сетке из двух колонок высоту строки
задавал сам ![]()
своими атрибутами, и под коротким текстом слева
оставалась пустота (замечание Вени про пустоты до и после блоков).
Absolute снимает этот голос: высоту диктует текст, кадр тянется по нему. */
/* ширина кадра растёт плавно: ступенька на 1400 давала скачок в 76 пикселей
и резкую перевёрстку строк (замечание Кодекса 25.08.2026) */
/* кадр обёрнут ссылкой fm-zoom (открытие в лайтбоксе), поэтому из потока
выводим саму ссылку, а картинка внутри неё занимает её целиком */
.fm-svc__prozalink,.fm-svc__seclink{display:block;text-decoration:none;cursor:zoom-in}
@media (min-width:1100px){
.fm-svc__prozarow--foto{display:block;position:relative;min-height:430px;
padding-right:clamp(500px,36vw,576px)}
.fm-svc__prozarow--foto .fm-svc__proza{max-width:none}
.fm-svc__prozarow--foto .fm-svc__prozalink{position:absolute;right:0;top:0;
width:clamp(456px,33vw,532px);height:100%}
.fm-svc__prozarow--foto .fm-svc__prozapic{width:100%;max-width:none;height:100%;
aspect-ratio:auto}
}
@media (max-width:1099px){.fm-svc__prozalink{max-width:min(100%,520px);margin-inline:auto}}
/* ---------- вводный текст блоками с иконками ----------
Четыре абзаца подряд читались как сплошная стена. Каждый абзац стал блоком
со своей иконкой и подписью, кадр справа стал шире (просьба Вени 25.08.2026). */
.fm-svc__bloki{display:grid;gap:18px}
@media (min-width:640px) and (max-width:1099px){.fm-svc__bloki{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px}}
.fm-svc__blok{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.fm-svc__blokikona{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;
background:var(--tepl);border:1px solid var(--ramka);color:var(--kras);flex:none}
/* перенос длинных слов обязателен: при шрифте 200% «стабилизированный»
не влезал в колонку блока и распирал страницу на 27px (найдено замером) */
.fm-svc__blokname{margin:0 0 5px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;
overflow-wrap:break-word}
.fm-svc__blokp{margin:0;font-size:15.5px;line-height:1.62;color:var(--tekst);
overflow-wrap:break-word}
@media (max-width:520px){
.fm-svc__blok{grid-template-columns:38px minmax(0,1fr);gap:13px}
.fm-svc__blokikona{width:38px;height:38px;border-radius:10px}
.fm-svc__blokp{font-size:15px}
}
.fm-svc__prozapic{width:100%;max-width:360px;height:auto;aspect-ratio:2/3;object-fit:cover;
border-radius:12px;display:block}
/* на планшете и телефоне кадр остаётся близким к вертикали: пропорция 3/2
срезала у него верх и низ (замечание Кодекса 25.08.2026) */
@media (max-width:1099px){.fm-svc__prozapic{max-width:min(100%,520px);aspect-ratio:4/5;
margin-inline:auto}}
@media (max-width:520px){.fm-svc__prozapic{aspect-ratio:3/4}}
/* панорама между вводом раздела и колонками списков */
.fm-svc__secpic{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
border-radius:12px;display:block;margin:22px 0 0}
@media (min-width:861px){.fm-svc__secpic{aspect-ratio:16/7}}
/* на широком экране пропорция давала полосу в 646px высотой и разрывала раздел
надвое: держим высоту, ширину отдаём кадру */
@media (min-width:1200px){.fm-svc__secpic{aspect-ratio:auto;height:400px}}
/* ---------- портфолио: своя шапка вместо служебной ----------
Компонент галереи общий на весь сайт, поэтому его собственную шапку
(«Фотогалерея» плюс переключатель плотности) гасим ТОЛЬКО тут. */
.fm-svc__portf .fm-galhead{display:none}
.fm-svc__ownsch{justify-self:start;font-size:13.5px;color:#9a948c;white-space:nowrap}
@media (min-width:861px){.fm-svc__ownsch{justify-self:end}}
/* =========================================================================
Список услуг: витрина, где у каждой услуги СВОЯ форма.
Три одинаковые плитки в ряд это ровно то, что тут было и что забраковали.
========================================================================= */
.fm-svclist__intro{max-width:760px;margin:0 0 30px;font-size:16.5px;line-height:1.65;color:#5f5f5f}
/* свадьба: широкий разворот, текст слева, кадр справа */
.fm-svcbig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;
margin:0 0 24px;text-decoration:none;background:#fbfaf8;border:1px solid #ededea;border-radius:14px;
overflow:hidden;transition:border-color .2s,box-shadow .2s}
.fm-svcbig:hover{border-color:#ddd7cf;box-shadow:0 12px 34px rgba(90,78,64,.12)}
.fm-svcbig__text{display:block;padding:44px 46px}
.fm-svcbig__kicker{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:#c0392b}
.fm-svcbig__name{display:block;margin:14px 0 0;font-size:clamp(24px,2.4vw,32px);line-height:1.18;color:#252525}
.fm-svcbig__line{display:block;height:1px;margin:18px 0;background:#e9e6e1}
.fm-svcbig__lead{display:block;font-size:16.5px;line-height:1.6;color:#3f3f3f}
.fm-svcbig__list{display:block;margin:14px 0 0;font-size:14.5px;line-height:1.7;color:#8a8a8a}
.fm-svcbig__btn{display:inline-flex;align-items:center;height:44px;margin:26px 0 0;padding:0 24px;
border-radius:6px;background:#e54e3a;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;transition:background .16s}
.fm-svcbig:hover .fm-svcbig__btn{background:#d9432f}
.fm-svcbig__pic{position:relative;min-height:340px;overflow:hidden;background:#f2efeb}
.fm-svcbig__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s}
.fm-svcbig:hover .fm-svcbig__pic img{transform:scale(1.03)}
/* ==========================================================================
Плитки услуг. Состав у них тот же, что у большой карточки сверху: надкатегория,
название, линия, описание, перечень, кнопка. Разной остаётся только геометрия:
большая занимает всю ширину и держит фото сбоку, плитки идут по половине
с фото сверху. Главенство первой задаём размером, а не другим набором частей
(правка 25.08.2026, замечание Вени про разнобой внизу).
Раскладка на auto-fill: новая услуга ляжет плиткой без правки css.
========================================================================== */
/* ⚠️ auto-FIT, а не auto-fill: fill оставляет пустые треки, и две плитки на широком
экране становились по 351px при свободных 700px справа. Fit схлопывает пустоту,
поэтому две плитки делят ширину пополам, три встают по трети, четвёртая уходит
на новый ряд. Минимум 420px, чтобы плитки не мельчали. Замер 25.08.2026. */
.fm-svcpara{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:24px;margin:0 0 56px;align-items:stretch}
.fm-svccol{display:flex;flex-direction:column;text-decoration:none;border:1px solid #ededea;
border-radius:14px;overflow:hidden;background:#fff;
transition:border-color .2s,box-shadow .2s,transform .2s}
.fm-svccol:hover{border-color:#ddd7cf;box-shadow:0 10px 30px rgba(90,78,64,.12);
transform:translateY(-3px)}
.fm-svccol__pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#f2efeb}
.fm-svccol__pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.fm-svccol:hover .fm-svccol__pic img{transform:scale(1.04)}
.fm-svccol__cnt{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;
height:26px;padding:0 11px;border-radius:6px;background:rgba(18,18,20,.62);font-size:12px;color:#fff}
/* тело растягивается, кнопка прижата к низу: у плиток разной длины низ ровный */
.fm-svccol__body{display:flex;flex-direction:column;flex:1 1 auto;padding:24px 26px 26px}
.fm-svccol__kicker{display:block;font-size:11.5px;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:#c0392b}
.fm-svccol__name{display:block;margin:12px 0 0;font-size:22px;line-height:1.2;color:#252525}
.fm-svccol__line{display:block;height:1px;margin:16px 0;background:#e9e6e1}
.fm-svccol__lead{display:block;font-size:15.5px;line-height:1.6;color:#3f3f3f}
.fm-svccol__list{display:block;margin:12px 0 0;font-size:14px;line-height:1.65;color:#8a8a8a}
.fm-svccol__btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
min-height:44px;margin:22px 0 0;padding:11px 24px;border-radius:8px;background:#e54e3a;color:#fff;
font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
transition:background .18s}
.fm-svccol:hover .fm-svccol__btn{background:#d9432f}
/* маршруты по задаче: строки, а не карточки */
.fm-svcask{margin:0 0 52px}
.fm-svcask__h2{margin:0 0 6px;font-size:clamp(21px,2.1vw,27px);font-weight:400;color:#252525}
.fm-svcask__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
min-height:74px;padding:16px 4px;border-bottom:1px solid #ededea;text-decoration:none;
font-size:clamp(17px,1.8vw,21px);color:#252525;transition:color .16s,padding .16s}
.fm-svcask__row:first-of-type{border-top:1px solid #ededea}
.fm-svcask__row svg{flex:0 0 auto;color:#c9c4bd;transition:transform .18s,color .18s}
.fm-svcask__row:hover{color:#c0392b;padding-left:10px}
.fm-svcask__row:hover svg{color:#e54e3a;transform:translateX(4px)}
/* города: справочная строка */
.fm-svccity{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin:0 0 52px;
padding:26px 30px;background:#fbfaf8;border:1px solid #ededea;border-radius:14px}
.fm-svccity__t{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c0392b}
.fm-svccity__l{font-size:17px;color:#3f3f3f}
/* нижний призыв: без картинки и без второго баннера */
.fm-svclast{padding:48px 0 10px;text-align:center}
.fm-svclast__h2{margin:0;font-size:clamp(23px,2.4vw,31px);font-weight:400;color:#252525}
.fm-svclast__p{margin:12px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:#6f6f6f}
.fm-svclast__btn{display:inline-flex;align-items:center;height:48px;margin:24px 0 0;padding:0 28px;
border-radius:6px;background:#e54e3a;color:#fff;text-decoration:none;font-size:13px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;transition:background .16s}
.fm-svclast__btn:hover{background:#d9432f}
/* ==========================================================================
Блоки, добавленные 25.08.2026: текстовый блок с кнопкой, таблица зон,
история дня кадрами по этапам, география выездов.
========================================================================== */
.fm-svc__kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:#c0392b;margin:0 0 10px}
.fm-svc__kicker::before{content:"";width:18px;height:1px;background:#e54e3a}
/* крошки внутри баннера вместо надписи «Услуга»: цвет и начертание те же */
.fm-svc__krohi{flex-wrap:wrap;gap:7px}
.fm-svc__krohi a{color:inherit;text-decoration:none;transition:opacity .18s}
.fm-svc__krohi a:hover{opacity:.68}
.fm-svc__krohi-sep{opacity:.45}
@media (max-width:600px){
.fm-svc__krohi{font-size:11px;letter-spacing:.1em;gap:5px}
}
/* текстовый блок: две колонки текста, кнопка снизу слева */
.fm-svc__tblokin{columns:2;column-gap:44px}
.fm-svc__tblokp{margin:0 0 14px;font-size:16px;line-height:1.65;color:#3f3f3f;
break-inside:avoid}
.fm-svc__tblokbtn{display:inline-flex;align-items:center;min-height:44px;margin:8px 0 0;
padding:11px 24px;border-radius:8px;background:#e54e3a;color:#fff;text-decoration:none;
font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
transition:background .18s;column-span:all;width:max-content}
.fm-svc__tblokbtn:hover{background:#d9432f}
/* таблица зон */
.fm-svc__tabwrap{overflow-x:auto}
.fm-svc__tab{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.fm-svc__tab th{text-align:left;padding:13px 16px;background:#f7f5f2;color:#252525;
font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
border-bottom:1px solid #e7e3de;white-space:nowrap}
.fm-svc__tab td{padding:14px 16px;border-bottom:1px solid #efece8;color:#4a4a4a;vertical-align:top}
.fm-svc__tab tbody tr:hover td{background:#fbfaf8}
.fm-svc__tab td:first-child{color:#252525;font-weight:500;white-space:nowrap}
/* история дня: подпись этапа с линией и лента кадров */
.fm-svc__etap{display:flex;align-items:center;gap:14px;margin:34px 0 14px}
/* ⛔ nowrap тут был причиной боковой прокрутки: длинное имя этапа
(«Фитостены и вертикальное озеленение») распирало страницу на телефоне,
а при шрифте 200% и на 768. Перенос разрешён на всех ширинах. */
.fm-svc__etapname{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:#8a8a8a;min-width:0;overflow-wrap:break-word}
@media (max-width:560px){.fm-svc__etap{gap:10px}}
.fm-svc__etapline{flex:1 1 auto;height:1px;background:#e9e6e1}
.fm-svc__etapn{font-size:12px;color:#c9c4bd}
/* ⭐ Колонки заданы жёстко, а не через auto-fit: число кадров в каждом этапе кратно
четырём, поэтому на широком экране ряды заполняются целиком и справа не остаётся
пустого места (замечание Вени 25.08.2026 про пустоты после блоков). */
/* ⚠️ Колонок только 4, 2 или 1: это делители четвёрки, поэтому ряд всегда полный.
Режим трёх колонок убран намеренно, при нём в каждом этапе оставался хвост
(замер 25.08.2026: четыре неполных ряда на 1024 и 1100). */
.fm-svc__lenta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.fm-svc__lenta{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (max-width:520px){.fm-svc__lenta{grid-template-columns:minmax(0,1fr)}}
.fm-svc__kadr{margin:0}
.fm-svc__kadr img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
border-radius:12px;background:#f2efeb;transition:transform .4s}
.fm-svc__kadr:hover img{transform:scale(1.02)}
.fm-svc__kadr figcaption{margin:9px 2px 0;font-size:14px;line-height:1.4;color:#6f6f6f}
/* география
⭐ Просьба Вени 25.08.2026: абзац географии стоит по центру. Заголовки блоков
остаются слева (уточнено тем же вечером), центрируются только сами вопросы. */
.fm-svc__geotext{margin:0 auto;font-size:16px;line-height:1.7;color:#3f3f3f;max-width:820px;
text-align:center}
.fm-svc__tabcap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fm-svc__tab th[scope=row]{text-align:left;background:none;text-transform:none;font-size:15px;
letter-spacing:0;color:#252525;font-weight:500;white-space:nowrap;
border-bottom:1px solid #efece8;padding:14px 16px}
@media (max-width:860px){
.fm-svc__tblokin{columns:1}
.fm-svc__etap{margin:26px 0 12px}
/* ⭐ На телефоне таблица разворачивается карточками: горизонтальная прокрутка
внутри таблицы неудобна, читать её приходится в два движения
(замечание Кодекса 25.08.2026). */
.fm-svc__tab,.fm-svc__tab tbody,.fm-svc__tab tr{display:block;width:100%}
.fm-svc__tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fm-svc__tab tr{border:1px solid #e7e3de;border-radius:12px;padding:14px 16px;margin:0 0 12px;
background:#fff}
.fm-svc__tab th[scope=row]{display:block;padding:0 0 8px;border:0;font-size:16px;
white-space:normal}
.fm-svc__tab td{display:block;padding:8px 0 0;border:0;font-size:14.5px;line-height:1.5}
.fm-svc__tab td::before{content:attr(data-p);display:block;margin:0 0 3px;font-size:11px;
font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#a8a29a}
.fm-svc__tab tbody tr:hover td{background:none}
}
/* =========================================================================
Адаптив
========================================================================= */
@media (max-width:1100px){
.fm-svc__sostav{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.fm-svc__grp:nth-child(3){padding-left:0;border-left:0}
.fm-svcbig{grid-template-columns:minmax(0,1fr)}
.fm-svcbig__pic{min-height:0;aspect-ratio:16/9;order:-1}
/* ⚠️ жёсткую одну колонку тут больше не ставим: плитки сами складываются
через auto-fill и держатся в ряд, пока каждой хватает 330px. Раньше
на 1024 они схлопывались в столбик заметно раньше нужного. 2026-08-25 */
.fm-svcpara{gap:18px}
}
@media (max-width:860px){
.fm-svc__hero{min-height:auto}
.fm-svc__herotext{padding:34px 26px 32px}
.fm-svc__sec--tepl,.fm-svc__price{padding:30px 24px}
.fm-svcbig__text{padding:28px 24px 30px}
.fm-svc__own{grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.fm-svccity{padding:20px 22px}
}
@media (max-width:620px){
.fm-svc__sostav{grid-template-columns:minmax(0,1fr);gap:26px}
.fm-svc__grp{padding-left:0;border-left:0;border-top:1px solid var(--ramka);padding-top:20px}
.fm-svc__grp:first-child{border-top:0;padding-top:0}
.fm-svc__cards{grid-template-columns:minmax(0,1fr)}
.fm-svc__cardpic{aspect-ratio:3/2}
.fm-svc__steps{grid-template-columns:minmax(0,1fr);gap:20px}
.fm-svc__proza{font-size:16px}
}
/* Телефон: текст и заголовки на 12px от края вместо 6 (Веня 02.09.2026: «отступ слева
в 2 раза больше, блоки оставляем как есть с картинками»). Поле получают текстовые узлы
секций, а не секции: фото секций, лента кадров и блоки с картинками остаются во всю ширину.
Тёплые рамки, ценовой блок и вопросы со своими полями не трогаются. */
@media (max-width:700px){
.fm-svc__sec>.fm-svc__h2,.fm-svc__sec>.fm-svc__lead,.fm-svc__sec>.fm-svc__line,
.fm-svc__sostav,.fm-svc__tblokin,.fm-svc__tabwrap,.fm-svc__plain,.fm-svc__steps,
.fm-svc__geotext,.fm-svc__own,.fm-svc__proza,.fm-tovbl__shapka{padding-left:6px;padding-right:6px}
.fm-svc__sec--tepl>.fm-svc__h2,.fm-svc__sec--tepl>.fm-svc__lead,.fm-svc__sec--tepl>.fm-svc__line,
.fm-svc__price>.fm-svc__h2,.fm-svc__price>.fm-svc__lead,
.fm-svc__faqsec>.fm-svc__h2,.fm-svc__faqsec>.fm-svc__line{padding-left:0;padding-right:0}
}
/* то же поле у того, что стояло у края после первой правки: подпись над заголовком блока,
названия этапов над лентой кадров, ссылка «Все услуги», вводный абзац списка услуг */
@media (max-width:700px){
.fm-svc__sec>.fm-svc__kicker,.fm-svc__etapname,.fm-svc .fm-artback,.fm-svclist__intro{padding-left:6px;padding-right:6px}
}
/* шаг 52: лента работ каруселью */
@media (max-width:700px){
/* Кадры работ ехали столбиком, и страница услуги вырастала до двадцати тысяч точек.
Теперь это карусель: палец ведёт вбок, кадр прилипает к краю.
grid-template-columns:none снимает колонку из правила для 520px, иначе первый кадр
занимал бы всю ширину, а остальные ехали узкими. */
.fm-svc__lenta{
display:grid;grid-auto-flow:column;grid-template-columns:none;
grid-auto-columns:74%;grid-template-rows:auto;gap:10px;
margin:0 -6px;padding:2px 6px 10px;
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;scroll-padding-left:6px;
-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fm-svc__lenta::-webkit-scrollbar{display:none}
.fm-svc__lenta > *{scroll-snap-align:start;margin:0}
/* Кадров пять и больше: два ряда, заполнение идёт по столбцам, поэтому верхний
и нижний кадр двигаются вместе, парой (просил Веня 03.09.2026). */
.fm-svc__lenta:has(> :nth-child(5)){grid-template-rows:auto auto;grid-auto-columns:62%}
}
/* End */
/* Start:/local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178851658115404*/
/* 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}
}
/* В узкой плитке (пять в ряд в блоге при 1040px: контейнер 183) цена 15px: с 17px
«199 900 ₽/шт» вместе с кнопкой не влезала в строку и уезжала выше соседей (кадр 02.09.2026). */
/* ⚠️ Одиночный .fm_card__cur проигрывал aspro-match.css (грузится позже, 17px): двойной селектор
решает спор при любом порядке. Только от 701px: на телефоне цена 16px по ширине экрана. */
@media (min-width:701px){
/* ⚠️ Порог 190, а не 245: контейнер это content-box плитки без её боковых полей 12px.
Замер на боевом: блог 183 на 1440 и 177 на 1366 (ловится), каталог 198 на 1280 и 238 на
1440, услуги и главная 251 (цена там остаётся 17px). */
@container (max-width:190px){.fm_catalog_grid .fm_card__cur{font-size:15px}}
}
/* Цена и кнопка всегда в одной строке (Веня 02.09.2026, кадр с телефона: «285 800 ₽/шт»
заняла строку, корзина упала на следующую). Строка больше не переносится, цена ужимается
ступенями по ширине контейнера. Замер: контейнер 186px на 390, 171 на 360 (рвалось:
109 + 8 + 38 против 155), 138 на 320; самая широкая цена каталога «285 800 ₽/шт» 109px при 17px.
Двойной селектор перебивает aspro-match.css (17px, грузится позже). */
.fm_card__bottom{flex-wrap:nowrap}
.fm_card__price{flex:0 1 auto;min-width:0}
.fm_card__buy{flex:0 0 auto}
@container (max-width:200px){
.fm_card__price .fm_card__cur{font-size:15px}
.fm_card__price .fm_card__unit,.fm_card__price .fm_card__old{font-size:12px}
}
@container (max-width:150px){
.fm_card__price .fm_card__cur{font-size:14px}
.fm_card__price .fm_card__unit{display:none}
.fm_card__empty{font-size:11px}
}
/* Разделитель перед товарами «нет в наличии» (шаг 68, 04.09.2026).
Занимает всю ширину сетки, поэтому grid-column: 1 / -1. */
.fm_nonal_razdel{
grid-column:1 / -1;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:4px 12px;
margin:26px 0 6px;
padding-top:18px;
border-top:1px solid #e6e0d9;
}
.fm_nonal_razdel__imya{
font:600 18px/1.2 inherit;
color:#3d3733;
}
.fm_nonal_razdel__nota{
font:400 14px/1.35 inherit;
color:#8d857e;
}
@media (max-width:767px){
.fm_nonal_razdel{margin:18px 0 4px;padding-top:14px}
.fm_nonal_razdel__imya{font-size:16px}
.fm_nonal_razdel__nota{font-size:13px}
}
/* End */
/* /local/templates/floralmile/assets/css/formy-tovary.css?17876756289372 */
/* /local/templates/floralmile/assets/css/uslugi.css?178845437838807 */
/* /local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178851658115404 */