/* 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 */
/* /local/templates/floralmile/assets/css/formy-tovary.css?17876756289372 */
/* /local/templates/floralmile/assets/css/uslugi.css?178845437838807 */