/* Start:/local/templates/floralmile/assets/css/app.css?178851939393740*/
/* Floral Mile — метрики сняты с оригинала floralmile.ru (Aspro Max). Шрифт Montserrat. */
@font-face{font-family:'Montserrat';font-weight:300;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-300.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-regular.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-style:italic;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-italic.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/montserrat-v15-latin_cyrillic-ext-700.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/cormorant-600-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/cormorant-600-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:'Cormorant';font-weight:600;font-style:italic;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/cormorant-600i-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant';font-weight:600;font-style:italic;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/cormorant-600i-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}

@font-face{font-family:'Caveat';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/caveat-600-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/caveat-600-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}

:root{
  --fm-red:#e54e3a; --fm-red-dark:#c93e2b;
  /* красный для ТЕКСТА на светлом фоне: даёт 5,44:1 на белом,
     тогда как акцентный #e54e3a только 3,83:1 */
  --fm-red-text:#c0392b;
  --fm-ink:#252525;        /* заголовки */
  --fm-text:#555555;       /* тело/цена */
  /* ⛔ Приглушённый серый затемнён: прежние #999 и #aaa давали на белом
   2,85:1 и 2,32:1 при норме 4,5:1. Новый цвет даёт 5,08:1 на белом и
   4,62:1 на светло-сером (замер контраста 28.08.2026). */
--fm-muted:#6e6e6e; --fm-faint:#6e6e6e;
  --fm-border:#e7e1d9; --fm-border2:#efeae2; --fm-surface:#f6f3ee;
  /* тёплые тона под магазин декора: песок и крем вместо холодного серого */
  --fm-cream:#fbf9f5; --fm-sand:#efe8dd; --fm-r:14px;
  --fm-green:#15475f;
  --fm-cw:1680px;   /* ширина как у 4bike (осознанное отличие от оригинала 1408) — НЕ МЕНЯТЬ */
  --fm-font:'Montserrat', Arial, sans-serif;
  --fm-serif:'Cormorant', Georgia, serif;
  /* рукописный из баннера: им набраны заголовки полос главной */
  --fm-script:'Caveat', 'Cormorant', cursive;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--fm-font);color:var(--fm-text);background:#fff;font-size:15px;line-height:25px;overflow-x:hidden;font-weight:400}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.fm-container{max-width:var(--fm-cw);margin:0 auto;padding:0 30px}

/* ===== top bar ===== */
.fm-topbar{padding:12px 0}
.fm-topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.fm-topbar__left{display:flex;align-items:center;gap:18px;min-width:0}
.fm-city{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:#111;font:500 14px/1 var(--fm-font);cursor:pointer;white-space:nowrap}
.fm-city svg{color:var(--fm-red)}
/* метка города крупнее по заказу 28.08, стрелку не трогаем */
.fm-city svg:first-child{width:17px;height:17px}
.fm-search{position:relative;flex:1;max-width:305px;min-width:0}
.fm-search input{width:100%;height:40px;border:1px solid #d9cec5;border-radius:20px;padding:0 44px 0 18px;font:400 14px var(--fm-font);color:var(--fm-text);outline:none;background:#fff}
.fm-search input::placeholder{color:#b3b3b3}
.fm-search input:focus{border-color:var(--fm-red)}
.fm-search button{position:absolute;right:4px;top:4px;width:32px;height:32px;border:0;background:none;color:var(--fm-muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.fm-search button:hover{color:var(--fm-red)}
.fm-logo{display:block;text-align:center}
.fm-logo img{height:72px;width:auto;margin:0 auto;display:block}
.fm-topbar__right{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.fm-phone{display:inline-flex;align-items:center;gap:8px;font:700 16px/25px var(--fm-font);color:var(--fm-ink);white-space:nowrap}
.fm-phone svg{color:var(--fm-red)}
/* зона нажатия не меньше 44 пикселей: строка в 13 пикселей плохо ловится
   пальцем на телефоне (замечание Кодекса 28.08.2026) */
.fm-login{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font:400 13px/1 var(--fm-font);color:#111}
.fm-login:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
.fm-login:hover{color:var(--fm-red)}

/* ===== red nav ===== */
.fm-nav{background:var(--fm-red);padding:10px 0;margin:10px 40px 0;border-radius:20px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.fm-nav__in{display:flex;align-items:stretch;justify-content:space-between;gap:10px}
/* ⚠️ зазор обязателен: без него подсветка активного пункта и подсветка соседнего
   при наведении соприкасаются и читаются одним пятном (правка 24.08.2026) */
/* Дыра брейкпоинтов: лента пунктов прокручивалась только до 860px, а равномерное
   распределение включается с 1101px. На 861 до 1050 меню не помещалось и не
   прокручивалось, корзина уезжала за край экрана. */
@media(max-width:1179px){
  .fm-nav{position:relative}
  /* Меню здесь листается вбок. Одного затухания мало: Кодекс дважды принял
     обрезку за поломку вёрстки. Добавлена стрелка, она прямо говорит,
     что справа есть продолжение. */
  .fm-nav::after{content:"›";position:absolute;top:0;right:0;width:46px;height:100%;
    display:flex;align-items:center;justify-content:flex-end;padding-right:12px;
    font:700 22px/1 var(--fm-font);color:rgba(255,255,255,.92);pointer-events:none;
    background:linear-gradient(90deg,rgba(229,78,58,0),var(--fm-red) 58%)}
  .fm-nav__in{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .fm-nav__in::-webkit-scrollbar{display:none}
  .fm-nav__item{white-space:nowrap;flex:0 0 auto}
}
.fm-nav__item{display:flex;align-items:center;height:40px;padding:0 18px;color:#fff;font:600 13px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.1em;border-radius:10px;transition:background .2s}
.fm-nav__item:hover{background:rgba(0,0,0,.14);color:#fff}
.fm-nav__item.is-active{background:rgba(0,0,0,.14);color:#fff}
/* красным по белому пишем тёмным оттенком: акцентный давал 3,83:1 */
.fm-nav__item--catalog{gap:9px;background:#fff;color:var(--fm-red-text);font-weight:700}
.fm-nav__item--catalog:hover{background:#fff2ec;color:var(--fm-red-text)}
.fm-nav__grid{flex:0 0 auto}

/* ===== right floating rail ===== */
.fm-rail{position:fixed;top:150px;right:0;z-index:40;display:flex;flex-direction:column;gap:6px}
.fm-rail__btn{position:relative;width:44px;height:44px;background:#fff;border:1px solid var(--fm-border);border-right:0;display:flex;align-items:center;justify-content:center;color:var(--fm-text);box-shadow:0 3px 12px rgba(0,0,0,.07)}
.fm-rail__btn:hover{color:var(--fm-red)}
.fm-rail__badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:var(--fm-red);color:#fff;font:700 10px/17px var(--fm-font);text-align:center;border-radius:9px}

/* ===== main ===== */
.fm-main{padding:26px 0 40px;min-height:40vh}

/* ===== breadcrumb + title ===== */
.fm-crumbs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;color:var(--fm-faint);font-size:13px;margin:2px 0 16px}
.fm-crumbs a{color:var(--fm-muted)}
.fm-crumbs a:hover{color:var(--fm-red)}
.fm-crumbs .sep{color:#cfcfcf}
.fm-pagehead{display:flex;align-items:baseline;gap:12px;margin:0 0 24px}
.fm-pagehead h1{font:400 32px/1.12 var(--fm-font);margin:0;color:var(--fm-ink)}
.fm-pagehead .count{font-size:14px;color:var(--fm-muted);font-weight:400}

/* ===== subsection cards =====
   Удалены 25.08.2026: подразделы рисуются плитками .fm-tiles--sec,
   стиль лежит в aspro-match.css одним местом. */

/* ===== catalog layout ===== */
.fm-catalog{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}
.fm-side__title{display:flex;align-items:center;gap:8px;font:700 13px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.8px;color:var(--fm-ink);padding:15px 0;border-bottom:2px solid var(--fm-ink)}
.fm-side__title svg{color:var(--fm-red)}
.fm-side__list{list-style:none;margin:0 0 22px;padding:0;border:1px solid var(--fm-border);border-top:0}
.fm-side__list a{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;font-size:14px;color:var(--fm-text);border-bottom:1px solid var(--fm-border2)}
.fm-side__list a:last-child{border-bottom:0}
.fm-side__list a:hover{color:var(--fm-red);background:var(--fm-surface)}
.fm-side__list a .arr{color:var(--fm-faint)}
.fm-side__promo{border:1px solid var(--fm-border);padding:22px;text-align:center;color:var(--fm-muted);font-size:13px}
.fm-side__promo b{display:block;color:var(--fm-ink);font-size:15px;margin-bottom:6px;font-weight:600}

/* ===== toolbar (sort + filters) ===== */
.fm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--fm-border);margin-bottom:16px}
.fm-sort{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--fm-text);cursor:pointer}
.fm-sort b{font-weight:600}
.fm-views{display:flex;gap:6px;color:var(--fm-faint)}
.fm-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.fm-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fm-border);padding:8px 14px;font-size:14px;color:var(--fm-text);background:#fff;cursor:pointer}
.fm-chip:hover{border-color:var(--fm-red);color:var(--fm-red)}
.fm-chip .fn{color:var(--fm-red)}

/* ===== footer (5 колонок, соцсети+оплата в нижней строке — как у оригинала) ===== */
/* ⛔ Серый в подвале осветлён: #999 давал 4,43:1, #8f8f8f 3,91:1,
   #777 всего 2,82:1 при норме 4,5:1. Новый #a6a6a6 даёт 5,11:1
   на фоне #333 (замер контраста 28.08.2026). */
.fm-footer{background:#333;color:#a6a6a6;margin-top:44px;font-family:var(--fm-font)}
.fm-footer__top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.05fr) 330px;gap:36px;padding:56px 0 48px}
.fm-footer__col b,.fm-footer__contacts b{display:block;color:#fff;font-size:13px;margin-bottom:18px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.fm-footer__col a{display:block;color:#b3b3b3;padding:0;line-height:2;font-size:14px}
.fm-footer__col a:hover,.fm-footer__contacts a:hover{color:#fff}
.fm-footer__news{margin-top:0;margin-bottom:26px}
.fm-footer__news label{display:block;font-size:13px;color:#b3b3b3;margin-bottom:10px;line-height:18px}
.fm-footer__news-row{display:flex;max-width:290px}
.fm-footer__news-row input{flex:1;min-width:0;height:44px;border:1px solid #4a4a4a;background:#3b3b3b;color:#ccc;padding:0 14px;font:400 14px var(--fm-font);outline:none;border-radius:3px 0 0 3px}
.fm-footer__news-row button{width:46px;height:44px;border:0;background:#444;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:0 3px 3px 0}
.fm-footer__contacts .fm-footer__phone2{display:block;font-weight:700;color:#fff;font-size:20px;margin-bottom:8px}
.fm-footer__email{display:inline-block;color:#b3b3b3;margin-bottom:18px;font-size:14px}
/* Адреса магазинов: ряд над нижней полосой (заказ Вени 02.09.2026),
   пятая точка на Щусева найдена по справочникам, на боевом её нет */
.fm-footer__addrrow{display:grid;grid-template-columns:repeat(5,1fr);gap:36px;padding:30px 0 40px;border-top:1px solid #414141}
.fm-footer__addrrow p{font-size:13px;line-height:20px;color:#b3b3b3;margin:0}
.fm-footer__addrrow b{color:#fff;font-weight:600;display:inline-block;margin-top:6px}
.fm-footer__bottom{border-top:1px solid #414141}
.fm-footer__bottom-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 30px;font-size:12px;color:#b3b3b3}
.fm-footer__copyright{justify-self:start;line-height:16px}
.fm-footer__social{display:flex;gap:8px;justify-self:center}
.fm-footer__social a{width:43px;height:43px;border:1px solid #414141;border-radius:3px;display:flex;align-items:center;justify-content:center;color:#a6a6a6}
.fm-footer__social a:hover{background:var(--fm-red);border-color:var(--fm-red);color:#fff}
.fm-footer__pay{display:flex;gap:10px;justify-self:end;margin-right:64px}
.fm-footer__pay span{font-size:12px;color:#b0b0b0;letter-spacing:.6px;opacity:.85}

/* ===== homepage ===== */
.fm-fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fm-hero{background:linear-gradient(90deg,#f2f3f5 0%,#f6f4f3 52%,#fdfbfb 100%);overflow:hidden;margin-top:-26px}
.fm-hero__in{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;min-height:440px}
.fm-hero__text{padding:44px 0}
.fm-kicker{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--fm-red-text);font-weight:700;margin-bottom:16px}
.fm-hero h1{font:400 42px/1.15 var(--fm-font);margin:0 0 18px;color:var(--fm-ink)}
.fm-hero p{font-size:16px;color:var(--fm-text);max-width:450px;margin:0 0 28px;line-height:1.6}
.fm-hero__btns{display:flex;gap:14px;flex-wrap:wrap}
/* ⛔ border:0 обязателен: у кнопки-элемента button браузер рисует свою рамку
   2px outset чёрным, и на красной кнопке это выглядит ободком. У ссылок
   с тем же классом рамки нет, поэтому дефект долго не замечали
   (замерено 28.08.2026 на кнопке входа). */
.fm-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 30px;font:700 13px/1 var(--fm-font);text-transform:uppercase;letter-spacing:1px;cursor:pointer;border:0;border-radius:0}
.fm-btn--red{background:var(--fm-red);color:#fff}
.fm-btn--red:hover{background:var(--fm-red-dark);color:#fff}
.fm-btn--ghost{background:#fff;color:var(--fm-ink);border:1px solid var(--fm-border)}
.fm-btn--ghost:hover{border-color:var(--fm-red);color:var(--fm-red)}
.fm-hero__img{align-self:stretch;position:relative;min-height:440px}
.fm-hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.fm-block{padding:44px 0}
/* ⭐ Заголовки полос шрифтом заголовка баннера, а не рукописным Caveat
   (заказ Вени 31.08.2026: «убери расписной, поставь как в баннере, менее
   жирный»). Oswald 400: тот же шрифт, что в «БУКЕТЫ» на баннере, но вес 400
   вместо 600. Файлы 400 лежат у нас в assets/fonts, CDN не подключаем.
   Кегль 34, а не 46: Oswald выше и плотнее Caveat при равном числе. */
.fm-h2{font:400 34px/1.2 'Oswald',var(--fm-font);margin:0 0 26px;color:var(--fm-ink);
  text-align:center;letter-spacing:.01em}
/* На телефоне 34px забирают две строки у «Каталога по разделам» и давят
   карточки под собой: Oswald вытянут, при равном числе он выше Caveat.
   Замечание проверяющего 31.08.2026 принято. */
@media(max-width:700px){.fm-h2{font-size:27px;margin-bottom:18px}}
/* ⚠️ Caveat рисует мельче гротеска при том же кегле, поэтому 46 против 38 */
.fm-blockcta{text-align:center;margin-top:26px}

.fm-cats{background:#fafafa;padding:46px 0}
.fm-cats__row{display:flex;flex-wrap:wrap;gap:34px;justify-content:center}
.fm-cat{width:150px;text-align:center;display:block}
.fm-cat__img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 14px;display:block;box-shadow:0 8px 20px rgba(0,0,0,.09);transition:transform .25s}
.fm-cat:hover .fm-cat__img{transform:translateY(-4px)}
.fm-cat__t{font-size:14px;color:var(--fm-text);line-height:1.35;font-weight:600}
.fm-cat:hover .fm-cat__t{color:var(--fm-red)}

.fm-editorial{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:16px 0 54px}
.fm-edit{background:var(--fm-cream);padding:44px;min-height:210px;display:flex;flex-direction:column;justify-content:center;border-radius:var(--fm-r);border:1px solid var(--fm-border)}
.fm-edit--dark{background:#2b2b2b}
.fm-edit .fm-kicker{color:var(--fm-muted)}
.fm-edit h3{font:600 28px/1.2 var(--fm-serif);margin:0 0 14px;color:var(--fm-ink)}
.fm-edit p{color:var(--fm-text);font-size:14.5px;line-height:1.6;max-width:430px;margin:0 0 20px}
.fm-edit a{align-self:flex-start;color:var(--fm-red-text);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
/* ⛔ Правила тёмной плитки идут ПОСЛЕ общих: специфичность у них одинаковая,
   и при обратном порядке общее правило красило текст тёмным по тёмному.
   Контраст на фоне #2b2b2b: заголовок 15,3:1, текст 9,7:1, подпись 7,0:1. */
.fm-edit--dark h3{color:#fff}
.fm-edit--dark p{color:#d4d4d4}
.fm-edit--dark .fm-kicker{color:#bdbdbd}
.fm-edit--dark a{color:#fff}

@media(max-width:1100px){
  .fm-catalog{grid-template-columns:1fr}
  .fm-side{display:none}
  .fm-footer__top{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .fm-topbar__in{grid-template-columns:1fr auto;grid-template-areas:"logo logo" "left right"}
  .fm-logo{grid-area:logo;margin-bottom:14px}
  .fm-topbar__left{grid-area:left}.fm-topbar__right{grid-area:right}
  .fm-nav{margin:8px 16px 0;border-radius:16px}
  .fm-nav__in{overflow-x:auto;justify-content:flex-start}
  .fm-nav__item{padding:0 14px;white-space:nowrap}
  .fm-rail{display:none}
  .fm-hero__in{grid-template-columns:1fr}.fm-hero__img{display:none}
  .fm-hero h1{font-size:30px}
  .fm-editorial{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fm-footer__top{grid-template-columns:1fr}
  .fm-footer__addrrow{grid-template-columns:1fr;gap:18px}
  /* поле ужато до 74px, и от подсказки «Поиск» оставалась одна буква:
     ужимаем поля и промежуток слева, чтобы слово влезало целиком */
  .fm-topbar__left{gap:10px}
  .fm-search input{padding:0 26px 0 8px;font-size:11px}
  .fm-search button{right:0;width:26px}
  .fm-pagehead h1{font-size:25px}
  .fm-phone span{display:none}
}

/* ===== home 5-колоночная витрина + похожие товары ===== */
.fm-grid-5 .fm_catalog_grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:1280px){.fm-grid-5 .fm_catalog_grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:1000px){.fm-grid-5 .fm_catalog_grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.fm-grid-5 .fm_catalog_grid{grid-template-columns:repeat(2,1fr)}}
/* ⛔ Один столбец на телефоне превращал главную в простыню: высота
   19594 пикселя, это 25 экранов, тогда как на 1440 всего семь.
   Две колонки дают карточку около 170 пикселей, этого достаточно
   (замер раскладки 28.08.2026). */
@media(max-width:460px){.fm-grid-5 .fm_catalog_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Блог и услуги: пять товаров в ряд на десктопе (Веня 02.09.2026). Уже 1280 колонок четыре,
   до 1000 три, до 700 две: показываем столько, сколько заполняет ряды целиком, пятый и
   лишние прячем (тот же приём, что у витрины шести в карточке товара). */
@media(max-width:1280px) and (min-width:1001px){.fm-tovbl .fm-grid-5 article.fm_card:nth-of-type(n+5){display:none}}
@media(max-width:1000px) and (min-width:701px){.fm-tovbl .fm-grid-5 article.fm_card:nth-of-type(n+4){display:none}}
@media(max-width:700px){.fm-tovbl .fm-grid-5 article.fm_card:nth-of-type(n+5){display:none}}
.fm-related{max-width:calc(100% - 345px);padding:36px 0 100px}
.fm-related__tabs{display:flex;gap:24px;align-items:flex-end;border-bottom:1px solid var(--fm-border);margin-bottom:22px}
.fm-related__tab{font-size:15px;color:var(--fm-muted);padding-bottom:12px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.fm-related__tab.is-active{color:var(--fm-ink);border-bottom-color:var(--fm-red)}
@media(max-width:960px){.fm-related{max-width:100%}}

/* ===== home: доп.секции (сезонные/популярные фон, преимущества, отзывы, блог, подкатегории) ===== */
.fm-block--surface{background:var(--fm-surface)}
/* Новогодний блок главной (02.09.2026): подводка под заголовком и плитка тегов.
   Плитка в одну строку, листинг вниз не сдвигает; на телефоне лента с прокруткой. */
.fm-block__podvodka{max-width:780px;margin:-8px auto 22px;text-align:center;font-size:15px;line-height:1.6;color:var(--fm-muted)}
.fm-tegi{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px}
.fm-tegi a{display:inline-flex;align-items:center;border:1px solid var(--fm-border);border-radius:999px;
  padding:9px 16px;font-size:14px;line-height:1.2;color:var(--fm-ink);background:#fff;white-space:nowrap;
  transition:border-color .18s,color .18s}
.fm-tegi a:hover{border-color:var(--fm-red);color:var(--fm-red)}
.fm-tegi a:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
/* семь тегов в одну строку влезают только от 1100px: на планшете плитка шла в две
   строки и сдвигала листинг, поэтому лента с прокруткой уже с 1100 */
@media(max-width:1100px){
  .fm-tegi{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -6px 18px;padding:0 6px 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fm-tegi::-webkit-scrollbar{display:none}
  .fm-tegi a{flex:0 0 auto}
}
@media(max-width:700px){.fm-block__podvodka{font-size:14px;margin-bottom:16px}}

.fm-adv{background:#fff;border-top:1px solid var(--fm-border);border-bottom:1px solid var(--fm-border)}
.fm-adv__row{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:34px 30px}
/* иконка в строке с заголовком, описание под ними (слово Вени 02.09.2026) */
.fm-adv__item{display:block}
.fm-adv__head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.fm-adv__item svg{width:28px;height:28px;flex:0 0 auto;color:var(--fm-red)}
.fm-adv__item b{display:block;font-size:15px;color:var(--fm-ink);font-weight:600}
.fm-adv__item span{display:block;font-size:13px;color:var(--fm-muted);line-height:1.4}

.fm-reviews{background:var(--fm-surface);padding:46px 0}
.fm-reviews__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
/* красным ПИШЕМ тёмным оттенком: светлый акцент годится для заливки,
   но не для мелкого текста на светлом фоне */
.fm-reviews__all{color:var(--fm-red-text);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.fm-reviews__all:hover{text-decoration:underline}
.fm-review{margin:0;background:#fff;border:1px solid var(--fm-border);padding:30px 34px;max-width:760px;border-radius:var(--fm-r)}
/* ⭐ Звёзды отзывов рисуются тем же svg, что и в карточках товара
   (заказ Вени 31.08.2026: «звёзды смазаны снизу, нет точных граней»).
   Символ ★ приходил не из Montserrat, а из запасного Arial, и на обычном
   экране его нижние лучи мылились. Форма теперь одна на весь сайт. */
.fm-review__stars{display:inline-flex;gap:2px;align-items:center;line-height:0}
.fm-review__stars .fm_star{width:14px;height:14px;fill:#f5a623;flex:0 0 auto}
.fm-review__stars .fm_star--pusto{fill:#e0dcd6}
.fm-review p{margin:14px 0;font-size:15px;line-height:1.7;color:var(--fm-text)}
.fm-review cite{font-style:normal;font-weight:600;color:var(--fm-ink);font-size:14px}

.fm-blog{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fm-blog__card{display:block}
.fm-blog__ph{display:block;aspect-ratio:3/2;background:linear-gradient(135deg,#efeae6,#e7e0da);margin-bottom:14px}
.fm-blog__date{display:block;font-size:12px;color:var(--fm-red-text);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.fm-blog__t{display:block;font-size:15px;color:var(--fm-ink);line-height:1.4}
.fm-blog__card:hover .fm-blog__t{color:var(--fm-red)}

.fm-subcats-home{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fm-subcat-h{display:block;background:var(--fm-cream);padding:28px 30px;border:1px solid var(--fm-border);border-radius:var(--fm-r);transition:border-color .18s,box-shadow .18s}
.fm-subcat-h b{display:block;font-size:18px;color:var(--fm-ink);font-weight:600;margin-bottom:8px}
.fm-subcat-h span{display:block;font-size:13px;color:var(--fm-muted);line-height:1.5}
.fm-subcat-h:hover{border-color:var(--fm-red)}
.fm-subcat-h:hover b{color:var(--fm-red)}

@media(max-width:1100px){.fm-adv__row{grid-template-columns:repeat(2,1fr)}.fm-blog{grid-template-columns:repeat(2,1fr)}.fm-subcats-home{grid-template-columns:1fr}}
@media(max-width:640px){.fm-adv__row{grid-template-columns:1fr}.fm-blog{grid-template-columns:1fr}}

/* ===== catalog: промо-картинка в сайдбар + нижний SEO-текст ===== */
.fm-side__promo-img{position:relative;display:block;margin-bottom:16px;overflow:hidden}
.fm-side__promo-img img{width:100%;height:150px;object-fit:cover;display:block}
.fm-side__promo-img span{position:absolute;left:16px;bottom:14px;color:#fff;font-size:18px;font-weight:600;line-height:1.15;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.fm-cat-seo{margin-top:34px;padding-top:26px;border-top:1px solid var(--fm-border)}
.fm-cat-seo p{font-size:14px;line-height:1.7;color:var(--fm-muted);margin:0}
/* текст раздела по канону (02.09.2026): абзацы с зазором (стояли вплотную), один h2 с запросом, список */
.fm-cat-seo p+p,.fm-cat-seo ul+p,.fm-cat-seo p+ul{margin-top:10px}
.fm-cat-seo h2{font:600 18px/1.3 var(--fm-font);color:var(--fm-ink);margin:18px 0 8px}
.fm-cat-seo ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:var(--fm-muted)}
.fm-cat-seo li+li{margin-top:4px}
/* ссылки внутри текста раздела: в теме a{color:inherit;text-decoration:none}, без этого правила ссылка неотличима от текста (шаг 48) */
.fm-cat-seo a{color:var(--fm-red-text);text-decoration:underline;text-underline-offset:2px}
.fm-cat-seo a:hover{color:var(--fm-red-dark)}

.fm_card__art{margin-left:auto;color:var(--fm-faint);font-weight:400;font-size:12px}

/* stories / povody */
.fm-stories{padding:6px 0 30px}
.fm-stories__row{display:flex;gap:30px;overflow-x:auto;padding:6px 2px 10px}
.fm-stories__row::-webkit-scrollbar{height:0}
.fm-story{flex:0 0 auto;width:120px;text-align:center}
.fm-story__ph{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden;background:var(--fm-surface);border:1px solid var(--fm-border);margin:0 auto 12px}
.fm-story__ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fm-story:hover .fm-story__ph img{transform:scale(1.06)}
.fm-story__t{display:block;font-size:12px;line-height:1.35;color:var(--fm-text)}
.fm-story:hover .fm-story__t{color:var(--fm-red)}
/* ================= КАТАЛОГ: витрина разделов, дерево, сортировка ================= */

/* витрина: карточки главных разделов */
.fm-rootgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 30px;margin:6px 0 40px}
@media(max-width:900px){.fm-rootgrid{grid-template-columns:1fr;gap:28px}}
.fm-rootcard{display:flex;flex-direction:column}
.fm-rootcard__img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--fm-surface);border:1px solid var(--fm-border)}
.fm-rootcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.fm-rootcard:hover .fm-rootcard__img img{transform:scale(1.04)}
.fm-rootcard__badge{position:absolute;left:0;bottom:0;background:#fff;color:var(--fm-ink);font-size:12px;padding:6px 12px;border-top:1px solid var(--fm-border);border-right:1px solid var(--fm-border)}
.fm-rootcard__t{font-family:var(--fm-serif);font-size:23px;line-height:1.2;margin:16px 0 12px}
.fm-rootcard__t a{color:var(--fm-ink);text-decoration:none}
.fm-rootcard__t a:hover{color:var(--fm-red)}
.fm-rootcard__subs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.fm-rootcard__subs a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#3d3d3d;text-decoration:none;
  border:1px solid var(--fm-border);border-radius:999px;padding:6px 12px;background:#fff;transition:.18s}
.fm-rootcard__subs a:hover{border-color:var(--fm-red);color:var(--fm-red)}
.fm-rootcard__subs i{font-style:normal;font-size:11px;color:#9a9a9a}
.fm-rootcard__subs a:hover i{color:var(--fm-red)}

/* дерево в сайдбаре */
.fm-side__list li.is-open>a{color:var(--fm-red);font-weight:600}
.fm-side__list a.is-active{color:var(--fm-red);font-weight:600}
.fm-side__sub{list-style:none;margin:2px 0 8px;padding:0 0 0 14px;border-left:1px solid var(--fm-border)}
.fm-side__sub li{margin:0}
.fm-side__sub a{display:block;padding:6px 0;font-size:13px;color:#4a4a4a;text-decoration:none}
.fm-side__sub a:hover{color:var(--fm-red)}

/* сортировка */
.fm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--fm-border);padding-bottom:12px;margin-bottom:20px}
.fm-sortbar{display:flex;flex-wrap:wrap;gap:4px}
.fm-sortbar__i{font-size:13px;color:#555;text-decoration:none;padding:7px 13px;border-radius:999px;transition:.18s}
.fm-sortbar__i:hover{background:var(--fm-surface);color:var(--fm-ink)}
.fm-sortbar__i.is-active{background:var(--fm-ink);color:#fff}
.fm-toolbar__cnt{font-size:13px;color:#8a8a8a;white-space:nowrap}

/* заглушка картинки подраздела: пустой квадрат плитки, если у раздела нет фото */
.fm-tile__img:empty{background:#fafafa}

/* пагинация Битрикса */
.fm-content .bx-pagination{margin:34px 0 10px}
.fm-content .bx-pagination-container ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0;justify-content:center}
.fm-content .bx-pagination-container li{margin:0}
.fm-content .bx-pagination-container li a,
.fm-content .bx-pagination-container li span{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border:1px solid var(--fm-border);background:#fff;
  color:var(--fm-ink);text-decoration:none;font-size:14px}
.fm-content .bx-pagination-container li a:hover{border-color:var(--fm-red);color:var(--fm-red)}
.fm-content .bx-pagination-container li.bx-active span{background:var(--fm-ink);color:#fff;border-color:var(--fm-ink)}
/* вопросы и ответы в карточке товара */
.fm-faq{margin:34px 0 10px;border-top:1px solid var(--fm-border);padding-top:24px}
.fm-faq__h{font-family:var(--fm-serif);font-size:22px;margin:0 0 14px;color:var(--fm-ink)}
.fm-faq__i{border-bottom:1px solid var(--fm-border)}
.fm-faq__i summary{cursor:pointer;padding:14px 28px 14px 0;font-size:15px;font-weight:600;color:var(--fm-ink);
  position:relative;list-style:none}
.fm-faq__i summary::-webkit-details-marker{display:none}
.fm-faq__i summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:20px;color:var(--fm-red);font-weight:400}
.fm-faq__i[open] summary::after{content:"−"}
.fm-faq__i summary:hover{color:var(--fm-red)}
.fm-faq__a{padding:0 0 16px;font-size:14.5px;line-height:1.6;color:#4a4a4a}
/* ===== следящее боковое меню (rail + inner, как в 4bike) ===== */
.fm-catalog{align-items:stretch}
.fm-side{position:relative;align-self:stretch}
.fm-side__inner.is-absolute{position:absolute;left:0;right:0;top:var(--fm-side-abs-top,0px)}
.fm-side__inner.is-fixed-top{position:fixed;top:var(--fm-side-top-gap,8px);
  left:var(--fm-side-left,0px);width:var(--fm-side-width,255px);z-index:30}
.fm-side__inner.is-fixed-bottom{position:fixed;bottom:var(--fm-side-bottom-gap,20px);
  left:var(--fm-side-left,0px);width:var(--fm-side-width,255px);z-index:30}
@media(max-width:1100px){
  .fm-side__inner.is-absolute,.fm-side__inner.is-fixed-top,.fm-side__inner.is-fixed-bottom{
    position:static;left:auto;right:auto;top:auto;bottom:auto;width:auto}
}

/* ================= БЛОГ: список, статья, блок на главной ================= */
.fm-blogpage{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start;padding:0 0 60px}
.fm-blogpage--detail{grid-template-columns:230px 1fr}
.fm-blogmain{min-width:0}

/* вкладки по годам над сеткой */
.fm-blogyears{display:flex;flex-wrap:wrap;border:1px solid #ececec;border-radius:3px;margin:0 0 32px}
.fm-blogyears a{padding:22px 28px;font-size:11px;line-height:14px;text-transform:uppercase;letter-spacing:.8px;color:var(--fm-ink);border-right:1px solid #ececec}
.fm-blogyears a:first-child{border-radius:3px 0 0 3px}
.fm-blogyears a.is-active{background:#fafafa;color:var(--fm-ink);cursor:default}
.fm-blogyears a:hover{color:var(--fm-red)}

/* сетка карточек */
.fm-bloggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.fm-blogcard{display:block;min-width:0;border:1px solid #ececec;border-radius:3px;background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.fm-blogcard{transform:translateY(0)}
.fm-blogcard:hover{transform:translateY(-1px);box-shadow:0 10px 20px 0 rgba(0,0,0,.1)}
.fm-blogcard__img{display:block;height:208px;overflow:hidden;border-radius:3px 3px 0 0;background:var(--fm-surface)}
.fm-blogcard__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.fm-blogcard:hover .fm-blogcard__img img{transform:scale(1.04)}
.fm-blogcard__body{display:block;padding:20px 24px 19px}
.fm-blogcard__date{display:block;font-size:13px;line-height:22px;color:var(--fm-muted);margin-bottom:8px}
.fm-blogcard__t{display:block;font-size:14px;line-height:25px;color:var(--fm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-blogcard:hover .fm-blogcard__t{color:var(--fm-red)}
.fm-blogempty{color:var(--fm-muted);padding:20px 0}

/* боковая колонка: теги и подписка */
.fm-blogside{min-width:0}
.fm-tagcloud__t{font-size:16px;line-height:25px;font-weight:400;color:var(--fm-ink);margin:0 0 16px}
.fm-tagcloud__list{display:flex;flex-wrap:wrap;gap:7px}
.fm-tag{display:inline-block;padding:5px 11px 6px;background:#f8f8f8;border-radius:4px;font-size:12px;line-height:15px;color:var(--fm-muted)}
.fm-tag:hover{background:#f2f2f2;color:var(--fm-red)}
.fm-subsbox{margin-top:34px;border:1px solid var(--fm-border);text-align:center;padding:28px 20px 0}
.fm-subsbox__ico{display:block;color:var(--fm-red);margin-bottom:16px}
.fm-subsbox__t{display:block;font-size:13px;line-height:1.5;color:var(--fm-muted);padding:0 4px 22px}
.fm-subsbox__btn{display:block;border-top:1px solid var(--fm-border);padding:15px 10px;font-size:12px;color:var(--fm-text);letter-spacing:.3px}
.fm-subsbox__btn:hover{color:var(--fm-red)}

/* шапка статьи */
.fm-artmeta{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px}
.fm-artmeta__date{font-size:13px;line-height:22px;color:var(--fm-ink)}
.fm-artmeta__ico{display:flex;align-items:center;gap:14px}
.fm-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;color:#b8b8b8;background:none;border:0;cursor:pointer}
.fm-ico:hover{color:var(--fm-red)}
.fm-share{position:relative;display:inline-flex}
.fm-share__menu{display:none;position:absolute;right:0;top:26px;min-width:170px;background:#fff;border:1px solid var(--fm-border);box-shadow:0 6px 22px rgba(0,0,0,.09);z-index:30}
.fm-share.is-open .fm-share__menu{display:block}
.fm-share__menu a{display:block;padding:9px 14px;font-size:13px;color:var(--fm-text)}
.fm-share__menu a:hover{background:var(--fm-surface);color:var(--fm-red)}

/* тело статьи */
.fm-artbody{color:var(--fm-text);font-size:14px;line-height:1.65}
.fm-artbody::after{content:"";display:block;clear:both}
.fm-artbody p{margin:0 0 14px}
.fm-artbody h2{font:400 24px/1.25 var(--fm-font);color:var(--fm-ink);text-align:center;margin:26px 0 20px}
.fm-artbody h3{font:400 19px/1.3 var(--fm-font);color:var(--fm-ink);margin:26px 0 14px}
.fm-artbody h4,.fm-artbody h5,.fm-artbody h6{font:600 15px/1.4 var(--fm-font);color:var(--fm-ink);margin:22px 0 12px}
.fm-artbody ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.fm-artbody ol{margin:0 0 16px;padding-left:22px}
.fm-artbody li{margin:0 0 7px}
.fm-artbody img{max-width:100%;height:auto}
.fm-artimg{display:block;margin:0 0 35px;text-align:center}
.fm-artimg img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.fm-artbody--left .fm-artimg{float:left;width:33%;margin:0 30px 16px 0}
.fm-artbody--right .fm-artimg{float:right;width:33%;margin:0 0 16px 30px}
.fm-artbody--left .fm-artimg img,.fm-artbody--right .fm-artimg img{width:100%}

/* фотогалерея статьи */
.fm-galhead{display:flex;align-items:center;justify-content:space-between;margin:47px 0 18px}
.fm-galhead__t{font-size:20px;line-height:28px;color:var(--fm-ink)}
.fm-galhead__r{display:flex;align-items:center;gap:10px}
.fm-galhead__n{font-size:12px;color:var(--fm-muted)}
.fm-galhead__sw{padding:2px;line-height:0;color:#cfcfcf;background:none;border:0;cursor:pointer}
.fm-galhead__sw.is-active,.fm-galhead__sw:hover{color:var(--fm-ink)}
.fm-bgal{display:grid;grid-template-columns:repeat(var(--gal-cols,4),minmax(0,1fr));gap:32px}
.fm-bgal__i{position:relative;display:block;aspect-ratio:1/1;cursor:zoom-in;transition:opacity .3s}
.fm-bgal__i:hover{opacity:.7}
.fm-bgal__i img{width:100%;height:100%;object-fit:contain;display:block}
.fm-bgal__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.62);color:var(--fm-ink);font-size:19px}
.fm-bgal__hidden{display:none}

/* ---------- лента работ: кадры одной высоты, прокрутка вбок ----------
   Заменила сетку из четырёх плиток с плашкой «плюс восемнадцать»: там было видно
   меньше пятой части кадров. Полоса под лентой показывает положение и перематывает
   по клику. Своя полоса вместо системной: системная на Windows толстая и рябит. */
.fm-lenta{position:relative}
/* ⛔ Прилипание только на телефоне. На десктопе кадр шире шага колеса,
   и прокрутка на 300 пикселей не доезжала до следующей точки привязки:
   лента отщёлкивала назад, и колесо выглядело неработающим (25.08.2026). */
.fm-lenta__tr{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;-webkit-overflow-scrolling:touch}
@media (max-width:767px){.fm-lenta__tr{scroll-snap-type:x proximity}}
.fm-lenta__tr::-webkit-scrollbar{display:none}
.fm-lenta__tr.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.fm-lenta__i{flex:0 0 auto;display:block;height:360px;border-radius:10px;overflow:hidden;
  scroll-snap-align:start;cursor:zoom-in;background:#f4f2ef;
  -webkit-user-drag:none;user-select:none}
/* на десктопе кадры вдвое крупнее: просьба Вени 25.08.2026.
   ⚠️ Потолок по высоте окна обязателен: на ноутбуке 1366x768 кадр в 720 пикселей
   занимал 94 процента экрана, и блок целиком не помещался. На большом мониторе
   ограничение не срабатывает, там ровно 720. */
@media (min-width:1100px){.fm-lenta__i{height:min(720px,74vh);border-radius:12px}
  .fm-lenta__tr{gap:14px}}
.fm-lenta__i img{display:block;height:100%;width:auto;max-width:none;object-fit:cover;
  transition:opacity .25s;pointer-events:none}
/* кадр, который ещё не загружен, держит место: иначе лента схлопывается,
   полоса прогресса врёт, а наблюдатель считает видимыми сразу все кадры */
.fm-lenta__lazy{width:270px}
@media (min-width:1100px){.fm-lenta__lazy{width:540px}}
.fm-lenta__i:hover img{opacity:.86}
/* полоса в духе системных: дорожка-пилюля, тёмный полупрозрачный бегунок,
   толщина 12 пикселей (просьба Вени 25.08.2026). Тащится мышью, не только щёлкается. */
.fm-lenta__bar{position:relative;margin:20px 0 0;height:12px;border-radius:6px;
  background:rgba(0,0,0,.05);overflow:hidden;cursor:pointer;touch-action:none;
  transition:background .2s}
.fm-lenta__bar:hover{background:rgba(0,0,0,.08)}
/* ⛔ Никакой рамки при щелчке мышью: браузер рисовал тёмный контур вокруг полосы,
   потому что она берёт фокус (замечание Вени 25.08.2026). Контур оставлен только
   для клавиатуры, где он нужен, и сделан светлее. */
.fm-lenta__bar:focus{outline:none}
.fm-lenta__bar:focus-visible{outline:2px solid var(--fm-red);outline-offset:3px}
.fm-lenta__bd{display:block;height:100%;border-radius:6px;background:rgba(0,0,0,.26);
  width:20%;transition:transform .12s linear,background .2s}
.fm-lenta__bar:hover .fm-lenta__bd{background:rgba(0,0,0,.38)}
.fm-lenta__bar.is-vedem{background:rgba(0,0,0,.08)}
.fm-lenta__bar.is-vedem .fm-lenta__bd{background:rgba(0,0,0,.5);transition:background .2s}
/* ⛔ 1099, а не 1100: на ровно 1100 оба правила срабатывали разом, и побеждало
   это, нижнее по файлу. Кадр становился 300 вместо 720 (замечание Кодекса). */
@media (max-width:1099px){.fm-lenta__i{height:300px}}
@media (max-width:767px){.fm-lenta__i{height:240px;border-radius:8px}
  .fm-lenta__tr{gap:8px}.fm-lenta__bar{margin-top:12px}}

.fm-arttags{margin:47px 0 0}
.fm-artback{margin:47px 0 0;padding-top:18px;border-top:1px solid var(--fm-border)}
.fm-artback a{display:inline-flex;align-items:center;gap:9px;font-size:10px;line-height:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--fm-muted)}
.fm-artback a:hover{color:var(--fm-red)}

/* лайтбокс (свой, без сторонних библиотек) */
.fm-lb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.9)}
.fm-lb img{display:block;max-width:92vw;max-height:88vh}
.fm-lb__x,.fm-lb__p,.fm-lb__n{position:absolute;padding:0;line-height:1;color:#fff;background:none;border:0;cursor:pointer;opacity:.75}
.fm-lb__x{top:20px;right:26px;font-size:34px}
.fm-lb__p{left:24px;font-size:46px}
.fm-lb__n{right:24px;font-size:46px}
.fm-lb__x:hover,.fm-lb__p:hover,.fm-lb__n:hover{opacity:1}

/* блок блога на главной: настоящая обложка вместо серой заглушки */
.fm-blog__ph{overflow:hidden}
.fm-blog__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.fm-blog__card:hover .fm-blog__ph img{transform:scale(1.04)}

/* Брейкпоинты как на оригинале (bootstrap-3 темы Aspro):
   карточки 3 → 2 → 1 на 992 / 480, плитки галереи 4 → 3 → 2 на 992 / 768, сайдбар уходит вниз на 992. */
@media(max-width:991px){
  .fm-blogpage,.fm-blogpage--detail{grid-template-columns:1fr}
  .fm-blogside{order:2}
  .fm-bloggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-bgal{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  .fm-blogyears{flex-wrap:wrap}
  .fm-bgal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-artbody--left .fm-artimg,.fm-artbody--right .fm-artimg{float:none;width:100%;margin:0 0 18px}
}
@media(max-width:479px){
  .fm-bloggrid{grid-template-columns:1fr}
}

/* строка заголовка списка: RSS справа, как на оригинале.
   Двойной класс нужен: aspro-match.css грузится после app.css и сбрасывает .fm-pagehead в block. */
.fm-pagehead.fm-pagehead--blog{display:flex;align-items:center;justify-content:space-between;gap:20px}
.fm-pagehead.fm-pagehead--blog h1{flex:0 1 auto}
.fm-pagehead.fm-pagehead--blog .fm-ico{flex:0 0 auto}

/* Подвал на узких экранах: нижняя строка из трёх колонок не влезала и вылезала на 19px
   (проявлялось на ВСЕХ страницах при ширине 360, не только в блоге). */
@media(max-width:560px){
  .fm-footer__bottom-in{grid-template-columns:1fr;justify-items:center;gap:12px;text-align:center}
  .fm-footer__pay{flex-wrap:wrap;justify-content:center;justify-self:center}
  .fm-footer__social{justify-self:center}
}

/* Иконки RSS и «поделиться» стоят у правого края колонки, а там висит плавающая
   панель корзины (.fm-rail, 44px, z-index 40) и перехватывает клик.
   Отводим иконки левее ровно на её ширину, пока панель показана. */
@media(min-width:992px){
  .fm-artmeta__ico{margin-right:52px}
  .fm-pagehead.fm-pagehead--blog .fm-ico{margin-right:52px}
}

/* Пальцевые цели на сенсорных экранах: стрелки и крестик лайтбокса,
   переключатель плотности галереи. Было 15-20px, стало не меньше 44px. */
@media(pointer:coarse){
  .fm-lb__p,.fm-lb__n{width:56px;height:100%;display:flex;align-items:center;justify-content:center}
  .fm-lb__x{width:48px;height:48px;display:flex;align-items:center;justify-content:center;top:8px;right:8px}
  .fm-galhead__sw{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
  .fm-galhead__r{gap:2px}
  .fm-ico{width:44px;height:44px}
  .fm-artmeta__ico{gap:0}
}

/* страница «статья не найдена»: без неё внизу оставалась пустая полоса */
.fm-blog404{padding:6px 0 90px;color:var(--fm-text);font-size:14px;line-height:1.7}
.fm-blog404 a{color:var(--fm-red)}
.fm-blog404 a:hover{text-decoration:underline}

/* ==========================================================================
   ПЕРЕНЕСЁННЫЕ РАЗДЕЛЫ: Услуги, Компания, Как купить, Контакты
   ========================================================================== */

/* текстовая страница с левым меню (help, company) */
.fm-txtpage{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start;padding:0 0 60px}
.fm-txtpage .fm-artbody{max-width:860px}
.fm-txtpage .fm-artbody h2{text-align:left}
.fm-txtpage .fm-artbody h2:first-child{margin-top:0}

/* список услуг: та же карточка, что в блоге, но название в две строки */
.fm-bloggrid--svc .fm-blogcard__t{white-space:normal;font-size:15px;line-height:22px}
.fm-bloggrid--svc .fm-blogcard__img{height:230px}

/* страница услуги */
.fm-svcpage{padding:0 0 60px}
.fm-svclead{margin:0 0 18px;font:400 17px/1.5 var(--fm-font);color:var(--fm-ink)}
.fm-svcpage .fm-galhead{margin-top:40px}

/* отзывы */
.fm-revlist{min-width:0}
.fm-revlist .fm-review{max-width:none;margin:0 0 20px}
.fm-revlist .fm-review:last-of-type{margin-bottom:0}

/* контакты */
.fm-contacts{padding:0 0 60px}
.fm-contacts__lead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  border:1px solid var(--fm-border);padding:24px 28px;margin:0 0 28px}
.fm-contacts__block{min-width:0}
.fm-contacts__k{display:block;font-size:10px;line-height:13px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--fm-muted);margin-bottom:7px}
.fm-contacts__v{display:block;font-size:16px;line-height:1.4;color:var(--fm-ink)}
.fm-contacts__v a{color:var(--fm-ink)}
.fm-contacts__v a:hover{color:var(--fm-red)}

.fm-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 32px}
.fm-point{min-width:0;border:1px solid var(--fm-border);padding:24px 26px;background:#fff}
.fm-point__city{font:600 13px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.8px;
  color:var(--fm-red);margin-bottom:10px}
.fm-point__addr{font-size:15px;line-height:1.5;color:var(--fm-ink);margin-bottom:12px}
.fm-point__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:12px}
.fm-point__phone{font-size:17px;font-weight:600;color:var(--fm-ink);white-space:nowrap}
.fm-point__phone:hover{color:var(--fm-red)}
.fm-point__time{font-size:13px;color:var(--fm-muted)}
.fm-point__note{margin:0 0 14px;font-size:13px;line-height:1.6;color:var(--fm-text)}
.fm-point__map{display:inline-flex;align-items:center;gap:8px;font-size:10px;line-height:13px;
  text-transform:uppercase;letter-spacing:.8px;color:var(--fm-muted)}
.fm-point__map:hover{color:var(--fm-red)}

.fm-contacts__map{border:1px solid var(--fm-border);overflow:hidden}
.fm-contacts__map iframe{display:block;width:100%;height:420px;border:0}

@media(max-width:991px){
  .fm-txtpage{grid-template-columns:minmax(0,1fr);gap:26px}
  .fm-txtpage .fm-side{order:2}
  .fm-txtpage .fm-artbody{order:1;max-width:none}
  .fm-bloggrid--svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-contacts__lead{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .fm-contacts__map iframe{height:320px}
  .fm-points{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:479px){
  .fm-bloggrid--svc{grid-template-columns:minmax(0,1fr)}
  .fm-contacts__lead{grid-template-columns:minmax(0,1fr);padding:20px}
  .fm-point{padding:20px}
}
/* ── отзывы магазина с Яндекс.Карт (2026-08-04) ── */
.fm-gal__score--link{text-decoration:none;color:inherit;font-size:13px}
.fm-gal__score--link:hover{color:var(--fm-red,#c33)}
.fm-otzyvy{margin:38px 0 10px}
.fm-otzyvy__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.fm-otzyvy__h{font-size:24px;line-height:1.15;font-weight:600;color:#252525;margin:0}
.fm-otzyvy__badge{font-size:14px;color:#666;background:#eef6fa;border-radius:20px;padding:6px 14px}
.fm-otzyvy__badge b{color:#252525;font-size:15px}
.fm-otzyvy__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.fm-otzyv{border:1px solid #e2ecf1;border-radius:12px;padding:16px 18px;background:#fff}
.fm-otzyv__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fm-otzyv__author{font-weight:600;color:#252525}
.fm-otzyv__date{color:#a0a0a0;font-size:13px;white-space:nowrap}
/* магазин, где оставлен отзыв: отзывы идут с четырёх карточек сети (02.09.2026) */
/* звёзды и магазин одной строкой: рядом с датой длинная подпись ломала имя автора надвое */
.fm-otzyv__zvezdy-stroka{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-otzyv__tochka{color:#8d8d8d;font-size:12px}
.fm-otzyv__tochka:before{content:'·';margin-right:8px;color:#cfcfcf}
@media(max-width:520px){.fm-otzyv__top{flex-wrap:wrap}.fm-otzyv__date{white-space:normal}}
.fm-otzyv__stars{display:inline-flex;gap:2px;margin-top:6px}
.fm-otzyv__stars svg{width:12px;height:12px;fill:#f5a623}
.fm-otzyv__text{font-size:14px;line-height:1.55;color:#4a4a4a;margin:8px 0 0}
.fm-otzyvy__links{margin-top:16px;display:flex;gap:22px;flex-wrap:wrap}
.fm-otzyvy__links a{color:var(--fm-red,#c33);font-size:14px;text-decoration:none;border-bottom:1px solid rgba(200,50,50,.35)}
.fm-otzyvy__links a:hover{border-bottom-color:transparent}
@media(max-width:640px){.fm-otzyvy__grid{grid-template-columns:1fr}.fm-otzyvy__h{font-size:24px}}

/* ── блоки товарных подборок на карточке: 6 в ряд, основной шрифт (2026-08-04) ── */
.fm-related .fm-related__tab{font-family:Montserrat,Arial,sans-serif;font-size:24px;font-weight:600;letter-spacing:0}
.fm-related--wide{max-width:100%;padding-bottom:48px}
.fm-related--wide:last-of-type{padding-bottom:90px}
.fm-grid-6 .fm_catalog_grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1500px){.fm-grid-6 .fm_catalog_grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1200px){.fm-grid-6 .fm_catalog_grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:930px){.fm-grid-6 .fm_catalog_grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.fm-grid-6 .fm_catalog_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* detail card: more side air (Venya 2026-08-05) */
@media(min-width:1024px){.fm-main:has(.fm-pagehead--detail)>.fm-container{padding-left:56px;padding-right:56px}}

/* Мобильные поля по образцу 4bike: там .container в мобиле даёт 10px, а не 30px.
   Наш .fm-container держал 30px на всех экранах, и на телефоне это съедало
   ширину строки товаров. 2026-08-24 */
@media (max-width:767px){
  /* край экрана по образцу 4bike (замер 28.08.2026): у них 6px, было 10px */
  .fm-container{padding-left:6px;padding-right:6px}
  /* низ страницы до подвала 30px вместо 90 (Веня 02.09.2026: «сократи на две трети»):
     14 здесь плюс 16 у подвала, у последних блоков нижнее поле 0 */
  .fm-main{padding-bottom:14px}
  .fm-footer{margin-top:16px}
}

/* Подвал: сетка резиновая (02.09.2026), но при кегле 14 пять колонок ниже
   1180 тесны, ссылки рвутся на три строки. Две колонки оставлены до 1179. */
@media(min-width:561px) and (max-width:1179px){
  .fm-footer__top{grid-template-columns:1fr 1fr}
  .fm-footer__addrrow{grid-template-columns:1fr 1fr;gap:24px 36px}
}

/* Заголовок для читалки экрана: секция услуг начиналась сразу с H3,
   лестница заголовков рвалась (замечание Кодекса 28.08.2026). */
.fm-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ⛔ Чёрная обводка (заказ Вени 28.08.2026).
   Причин было две, и обе браузерные, а не наши:
   1) у <button> без своего border Chrome рисует рамку «outset 2px» чёрным
      (так выглядела кнопка «В корзину» на карточке товара);
   2) после клика мышью браузер оставляет чёрное системное кольцо фокуса
      (так выглядели кружки-точки под баннером).
   Правило по ТЕГУ имеет низкую специфичность: любая наша рамка, заданная
   классом, продолжает работать. Кольцо фокуса не убираем совсем, а показываем
   только при ходьбе с клавиатуры и своим цветом: слепые к клавиатуре сайты
   недоступны. */
button{border:0}
:focus{outline:none}
:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}

/* ===== Ранее вы смотрели =====
   Образец с боевого сайта (разведка 28.08.2026): компактная карточка,
   маленькое фото слева, название и цена справа, светлая подложка блока.
   На телефоне это лента с прокруткой вбок, как у плиток типов изделия. */
.fm-viewed{margin:44px 0 8px}
.fm-viewed__zag{margin:0 0 16px;font:600 20px/1.25 var(--fm-font);color:var(--fm-ink)}
.fm-viewed__lenta{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fm-viewed__kart{
  display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:12px;
  padding:10px;background:#fff;border:1px solid #eaebec;border-radius:14px;
  color:var(--fm-ink);text-decoration:none;
  transition:border-color .15s,box-shadow .15s}
.fm-viewed__kart:hover{border-color:#d9cec5;box-shadow:0 4px 14px rgba(11,13,18,.07)}
.fm-viewed__foto{
  display:flex;align-items:center;justify-content:center;
  width:80px;height:80px;overflow:hidden;background:#fafafa;border-radius:10px}
.fm-viewed__foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fm-viewed__telo{display:flex;flex-direction:column;gap:6px;min-width:0}
.fm-viewed__name{
  font:400 13.5px/1.35 var(--fm-font);color:var(--fm-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fm-viewed__kart:hover .fm-viewed__name{color:var(--fm-red-text)}
.fm-viewed__cena{font:700 15px/1 var(--fm-font);color:#252525;white-space:nowrap}
.fm-viewed__ed{font-weight:400;font-size:12px;color:var(--fm-muted)}

@media(max-width:1100px){
  .fm-viewed__lenta{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .fm-viewed{margin:32px 0 0}   /* нижнее поле 0: низ страницы считается в одном месте (02.09.2026) */
  .fm-viewed__zag{font-size:17px;margin-bottom:16px}   /* после заголовков везде 16 (Веня 02.09.2026) */
  .fm-viewed__lenta{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media(max-width:560px){
  /* лента вбок: показываем карточку и край второй, так видно, что есть ещё.
     Поля 6px совпадают с полем .fm-container на телефоне. */
  .fm-viewed__lenta{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin:0 -6px;padding:2px 6px 6px;
    scroll-snap-type:x proximity;scroll-padding-left:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-viewed__lenta::-webkit-scrollbar{display:none}
  .fm-viewed__kart{
    flex:0 0 240px;scroll-snap-align:start;
    grid-template-columns:64px minmax(0,1fr);gap:10px;padding:8px}
  .fm-viewed__foto{width:64px;height:64px}
  .fm-viewed__name{font-size:13px}
  .fm-viewed__cena{font-size:14px}
}

/* ===== Ряд поводов: тянется во всю ширину контейнера =====
   Было: кружки жёстко 120px, и на широком экране справа оставалась пустота
   (на 1920 пустовало 598px). Стало: кружки делят ширину поровну, размер
   подбирается сам, но не мельче 84 и не крупнее 150.
   ⛔ Ниже 1025 оставляем прежнюю ленту вбок: 11 кружков в строку там не влезут. */
@media (min-width:1025px){
  .fm-stories__row{
    gap:clamp(16px,1.55vw,30px);
    overflow-x:visible;
    justify-content:space-between;
  }
  .fm-stories__row .fm-story{
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:150px;
  }
  .fm-stories__row .fm-story__ph{
    width:100%;
    height:auto;
    aspect-ratio:1;
  }
}

/* ===== Стиль главной: магазин декора, а не универсальный магазин =====
   Заход 1 от 30.08.2026. Тёплая палитра вместо холодного серого, серифные
   заголовки полос, единый радиус 14px у всех карточек. Радиусы верха (шапка 20,
   герой 24) прежде не имели пары внизу: всё содержимое было прямоугольным. */

/* фото статьи блога и картинка категории берут тот же радиус */
.fm-blog__ph{border-radius:var(--fm-r);overflow:hidden}
.fm-blog__t{font:600 19px/1.3 var(--fm-serif);color:var(--fm-ink)}

/* надпись над заголовком полосы: тонкая метка вразрядку */
.fm-h2__nad{display:block;font:600 11px/1 var(--fm-font);letter-spacing:.18em;
  text-transform:uppercase;color:var(--fm-muted);margin:0 0 10px}

/* нижние подборки: подсветка при наведении, а не мёртвая плашка */
.fm-subcat-h:hover{border-color:#d9cec0;box-shadow:0 6px 18px rgba(60,45,30,.07)}

/* полоса «Категории»: тёплый песок вместо холодного #fafafa */
.fm-cats{background:var(--fm-cream)}

/* ===== Заход 2: отзывы в два столбца, подборки с фотографией =====
   Было: отзыв занимал 760 из 1440, справа пустовало 650px.
   Было: нижние подборки это серые плашки без изображения. */
.fm-reviews__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.fm-reviews__grid .fm-review{max-width:none;height:100%}

/* плитка подборки: фотография во всю карточку, текст поверх */
.fm-subcat-h--foto{position:relative;overflow:hidden;padding:0;border:0;min-height:210px;
  display:flex;align-items:flex-end;background:#2a2622}
.fm-subcat-h__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.fm-subcat-h--foto:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,24,20,0) 32%,rgba(28,24,20,.72) 100%)}
.fm-subcat-h--foto:hover .fm-subcat-h__ph{transform:scale(1.05)}
.fm-subcat-h__telo{position:relative;z-index:2;display:block;padding:22px 26px 24px;width:100%}
.fm-subcat-h--foto .fm-subcat-h__telo b{display:block;font:600 22px/1.25 var(--fm-serif);color:#fff;margin:0 0 4px}
.fm-subcat-h--foto .fm-subcat-h__telo span{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.82)}

/* тёмная плитка услуги: тёплый графит вместо нейтрального чёрного */
.fm-edit--dark{background:#2a2622;border-color:#2a2622}

@media(max-width:900px){
  .fm-reviews__grid{grid-template-columns:1fr}
}

/* ===== Каталог по разделам: витринные плитки вместо мелких кружков =====
   Было: шесть кружков по 90px с вырезанными предметами на белом фоне, и они
   повторяли ряд поводов под баннером. Стало: пять плиток с интерьерным фото. */
.fm-cats__plitki{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.fm-catp{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  aspect-ratio:4/5;border-radius:var(--fm-r);background:#2a2622;color:#fff}
.fm-catp__ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fm-catp:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,24,20,0) 40%,rgba(28,24,20,.78) 100%)}
.fm-catp:hover .fm-catp__ph{transform:scale(1.05)}
.fm-catp__telo{position:relative;z-index:2;display:block;padding:0 20px 20px;width:100%}
.fm-catp__telo b{display:block;font:600 21px/1.2 var(--fm-serif);margin:0 0 4px}
.fm-catp__telo span{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.8)}

@media(max-width:1100px){
  .fm-cats__plitki{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fm-catp__telo b{font-size:19px}
}
@media(max-width:640px){
  /* ⭐ Заказ Вени 31.08.2026: на телефоне плитки идут лентой вбок, а не
     сеткой в два столбца. Отрицательные поля равны полю контейнера, чтобы
     лента шла от края до края и было видно, что справа есть продолжение. */
  .fm-cats__plitki{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;
    margin:0 -6px;padding:2px 6px 8px;
    scroll-snap-type:x proximity;scroll-padding-left:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-cats__plitki::-webkit-scrollbar{display:none}
  .fm-catp{aspect-ratio:3/4;flex:0 0 62%;scroll-snap-align:start}
  .fm-catp__telo{padding:0 14px 14px}
  .fm-catp__telo b{font-size:16px}
  .fm-catp__telo span{font-size:11.5px}
}

/* ===== Полоса марок =====
   Была найдена как нехватка против боевого: там восемь логотипов, у нас не было
   ни одного. Логотипы приглушены, при наведении выходят в полный цвет. */
/* девять колонок: девятая марка добавлена, чтобы на телефоне не пустовала
   ячейка сетки 3 на 3 */
/* ⭐ Бренды лентой (02.09.2026, слово Вени «сделай больше»): в сетке 9 в ряд
   плитка была 141x88 и логотип не шире 117px; 9 плиток на 6 колонок дают
   сироту во втором ряду. Лента: плитка 236x150, логотип до 192x115, правый край
   растворяется как подсказка прокрутки, стрелки у заголовка. */
.fm-brendy__row{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding:4px 0 8px;margin:-4px 0 -8px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.fm-brendy__row::-webkit-scrollbar{display:none}
/* докрутили до конца: маску снимаем, иначе последний бренд навсегда приглушён (ревизор 02.09.2026) */
.fm-brendy__row.is-konec{-webkit-mask-image:none;mask-image:none}
.fm-brendy__kart{flex:0 0 236px;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;
  min-height:150px;padding:14px 20px;background:#fff;border:1px solid var(--fm-border);
  border-radius:var(--fm-r);transition:border-color .18s,box-shadow .18s}
/* исходники 333x200: при max-height 88 логотип показывался 147x88 из 192 доступных
   по ширине; предел 118 даёт 192x115, почти вдвое против прежних 117x56 */
.fm-brendy__kart img{max-width:100%;max-height:118px;width:auto;height:auto;
  filter:grayscale(1);opacity:.82;transition:filter .25s,opacity .25s}
.fm-brendy__kart:hover{border-color:#d9cec0;box-shadow:0 6px 16px rgba(60,45,30,.07)}
.fm-brendy__kart:hover img{filter:none;opacity:1}
.fm-brendy__prav{display:flex;align-items:center;gap:8px}
.fm-brendy__prav .fm-reviews__all{margin-left:10px}
.fm-brendy__str{width:38px;height:38px;border-radius:50%;border:1px solid var(--fm-border);background:#fff;
  color:var(--fm-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .18s,color .18s,opacity .18s}
.fm-brendy__str:hover{border-color:#d9cec0;color:var(--fm-red)}
.fm-brendy__str:disabled{opacity:.35;cursor:default}
.fm-brendy__str:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
/* телефон: сетка 3 на 3 (решение Вени 31.08.2026), стрелки и маска не нужны */
@media(max-width:640px){
  .fm-brendy__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;
    padding:0;margin:0;-webkit-mask-image:none;mask-image:none}
  .fm-brendy__kart{flex:none;min-height:70px;padding:10px 8px}
  .fm-brendy__kart img{max-height:42px}
  .fm-brendy__str{display:none}
}

/* ===== Кнопка «наверх» ===== */
.fm-naverh{position:fixed;right:24px;bottom:24px;z-index:60;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  background:#fff;color:var(--fm-ink);border:1px solid var(--fm-border);border-radius:50%;
  box-shadow:0 6px 20px rgba(60,45,30,.14);transition:background .18s,color .18s,transform .18s}
/* ⛔ Без этой строки кнопка видна всегда: атрибут hidden даёт
   display:none стилем браузера, а наш display:flex его перебивает. */
.fm-naverh[hidden]{display:none}
.fm-naverh svg{width:19px;height:19px}
.fm-naverh:hover{background:var(--fm-red);color:#fff;border-color:var(--fm-red);transform:translateY(-2px)}
@media(max-width:640px){ .fm-naverh{right:12px;bottom:14px;width:42px;height:42px} }
@media(prefers-reduced-motion:reduce){ .fm-naverh{transition:none} }

/* ===== Услуги с фотографией =====
   Было: четыре плитки с одним текстом, шахматка светлое и тёмное.
   Стало: в каждой плитке кадр услуги, у второй и четвёртой он справа,
   чтобы ряд читался зеркально, а не одинаково. */
.fm-edit--foto{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:0;padding:0;overflow:hidden;align-items:stretch;min-height:280px}
.fm-edit__ph{display:block;position:relative;min-height:100%;overflow:hidden;background:var(--fm-sand)}
.fm-edit__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.fm-edit--foto:hover .fm-edit__ph img{transform:scale(1.04)}
.fm-edit__telo{display:flex;flex-direction:column;justify-content:center;padding:34px 36px}
.fm-edit--sprava{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
/* ⚠️ порядок меняем ВМЕСТЕ с шаблоном колонок: один order:2 оставлял
   тексту узкую колонку 42%, и заголовок ломался на две строки */
.fm-edit--sprava .fm-edit__ph{order:2}
.fm-edit--foto p{margin-bottom:18px}
.fm-edit--foto a{align-self:flex-start}

@media(max-width:900px){
  .fm-edit--foto{grid-template-columns:1fr;min-height:0}
  .fm-edit__ph{min-height:190px;height:190px}
  .fm-edit--sprava .fm-edit__ph{order:0}
  .fm-edit__telo{padding:24px 26px 28px}
}

/* ===== Строка наличия: пара «точка плюс Много» держится слева =====
   Было justify-content:space-between, и у товара БЕЗ артикула слово «Много»
   улетало к правому краю карточки. Теперь артикул сам прижимается вправо,
   а наличие остаётся у левого края независимо от того, есть артикул или нет. */
.fm_card__art{margin-left:auto}

/* ===== На главной только шрифты баннера =====
   Правило Вени 30.08.2026: Caveat для заголовков полос, Oswald в баннере,
   Montserrat для всего остального. Засечковый Cormorant с главной убран. */
.fm-edit h3{font-family:var(--fm-font);font-weight:600;font-size:24px;letter-spacing:-.01em}
.fm-blog__t{font-family:var(--fm-font);font-weight:600;font-size:16px;line-height:1.35}
.fm-catp__telo b{font-family:var(--fm-font);font-weight:600;font-size:18px;letter-spacing:-.01em}
.fm-subcat-h--foto .fm-subcat-h__telo b{font-family:var(--fm-font);font-weight:600;font-size:19px}

/* ===== «Ранее вы смотрели»: один ряд с прокруткой =====
   Было две строки сеткой. Стало лента в один ряд: мышью тянем или крутим
   колесом, пальцем листаем. Скрипт прокрутки в _fm_prosmotrennye.php. */
.fm-viewed__lenta{
  display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
  padding:2px 2px 8px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  cursor:grab;user-select:none}
.fm-viewed__lenta::-webkit-scrollbar{height:6px}
.fm-viewed__lenta::-webkit-scrollbar-thumb{background:var(--fm-border);border-radius:3px}
.fm-viewed__lenta.fm-viewed__lenta--tyanem{cursor:grabbing;scroll-snap-type:none}
.fm-viewed__lenta .fm-viewed__kart{flex:0 0 300px;scroll-snap-align:start}
.fm-viewed__lenta.fm-viewed__lenta--tyanem .fm-viewed__kart{pointer-events:none}

@media(max-width:1100px){ .fm-viewed__lenta .fm-viewed__kart{flex-basis:280px} }
@media(max-width:560px){
  .fm-viewed__lenta{margin:0 -6px;padding:2px 6px 8px;scroll-padding-left:6px;gap:8px}
  .fm-viewed__lenta .fm-viewed__kart{flex-basis:240px}
}
/* Телефон: в карточке «Ранее вы смотрели» только фото и название (Веня 02.09.2026:
   «картинка и описание, больше ничего»): фото сверху во всю ширину карточки, цена
   спрятана, видно две карточки и четверть третьей. Десктоп выше как был. */
@media(max-width:720px){
  .fm-viewed__lenta{gap:8px;margin:0;padding:2px 0 8px;scroll-padding-left:0;scrollbar-width:none}
  .fm-viewed__lenta::-webkit-scrollbar{display:none}
  .fm-viewed__lenta .fm-viewed__kart{flex-basis:calc((100% - 16px) / 2.25);grid-template-columns:minmax(0,1fr);gap:8px;padding:8px}
  .fm-viewed__lenta .fm-viewed__foto{width:100%;height:auto;aspect-ratio:1/1}
  .fm-viewed__lenta .fm-viewed__cena{display:none}
}

/* ===== Нижняя панель телефона =====
   Заказ Вени 30.08.2026: служебную строку шапки (город, поиск, звонок, вход)
   на телефоне снимаем сверху и вешаем узкой полосой у нижней кромки экрана.
   Поиск в ней свёрнут в кружок и разворачивается полем над полосой.
   ⚠️ Панель лежит отдельным узлом в подвале, а НЕ внутри шапки: у стеклянной
   плашки главной стоит backdrop-filter, а он делает себя точкой отсчёта для
   position:fixed внутри, и панель прилипла бы к плашке, а не к экрану. */
.fm-mbar{display:none}
/* ⭐ Второе условие: телефон поперёк (высота до 500px) это тот же телефон: логотип один в
   шапке, служебная строка в нижней панели. Без этого плашка на 844x390 была в две строки
   (170px), и текст героя наезжал на меню (02.09.2026). */
@media (max-width:700px), (max-height:500px) and (orientation:landscape){
  /* верхняя служебная строка уезжает вниз: в шапке остаётся логотип */
  .fm-topbar__left,.fm-topbar__right{display:none}
  .fm-topbar__in{grid-template-areas:"logo logo";gap:0}
  .fm-logo{margin-bottom:0}
  /* логотип меньше, полоса ниже: 56 плюс 8 и 8 это 72px вместо 96 (Веня 02.09.2026:
     «логотип немного меньше и уже по высоте, сейчас как фонарь светит») */
  .fm-topbar{padding:8px 0}
  .fm-logo img{height:56px}

  .fm-mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:70;
    /* шаг 50: панель телефона */
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border-top:1px solid var(--fm-border);
    box-shadow:0 -6px 20px rgba(17,17,17,.10);
    padding-bottom:env(safe-area-inset-bottom)}
  .fm-mbar__row{display:flex;align-items:center;gap:8px;height:48px;padding:0 10px}
  .fm-mbar__zazor{flex:1 1 auto}
  .fm-mbar__gorod{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 4px;
    background:none;border:0;color:var(--fm-ink);font:500 13px/1 var(--fm-font);cursor:pointer;
    white-space:nowrap}
  .fm-mbar__gorod svg{color:var(--fm-red)}
  .fm-mbar__lupa,.fm-mbar__tel{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;border:1px solid var(--fm-border);
    background:var(--fm-cream);color:var(--fm-ink);cursor:pointer;flex:0 0 auto}
  .fm-mbar__lupa svg,.fm-mbar__tel svg{color:var(--fm-red)}
  .fm-mbar__vhod{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;
    border-radius:18px;background:var(--fm-red);color:#fff;
    font:600 13px/1 var(--fm-font);white-space:nowrap;flex:0 0 auto}
  .fm-mbar__vhod svg{color:#fff}
  .fm-mbar__lupa:focus-visible,.fm-mbar__tel:focus-visible,
  .fm-mbar__vhod:focus-visible,.fm-mbar__gorod:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}

  /* ⭐ Палец толще значка: сами кнопки 36px, а нажимаемая зона растянута
     прозрачным слоем до 44px, как требует норма для сенсорных целей.
     Вид при этом не меняется, полоса остаётся узкой. */
  .fm-mbar__gorod,.fm-mbar__lupa,.fm-mbar__tel,.fm-mbar__vhod{position:relative}
  .fm-mbar__gorod:after,.fm-mbar__vhod:after{content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .fm-mbar__lupa:after,.fm-mbar__tel:after{content:"";position:absolute;
    left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}

  /* поле поиска: скрыто, пока не нажали кружок */
  .fm-mbar__poisk{display:none;position:relative;padding:8px 10px 0}
  .fm-mbar.is-poisk .fm-mbar__poisk{display:block}
  .fm-mbar.is-poisk .fm-mbar__lupa{background:var(--fm-red);border-color:var(--fm-red)}
  .fm-mbar.is-poisk .fm-mbar__lupa svg{color:#fff}
  .fm-mbar__poisk input{width:100%;height:40px;border:1px solid #d9cec5;border-radius:20px;
    padding:0 44px 0 16px;font:400 14px var(--fm-font);color:var(--fm-text);background:#fff;outline:none}
  .fm-mbar__poisk input:focus{border-color:var(--fm-red)}
  .fm-mbar__poisk button{position:absolute;right:14px;top:12px;width:32px;height:32px;border:0;
    background:none;color:var(--fm-muted);display:flex;align-items:center;justify-content:center;cursor:pointer}

  /* панель перекрывала бы конец подвала: освобождаем ей место */
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  /* и кнопка «наверх» поднимается над панелью */
  .fm-naverh{bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ==========================================================================
   Телефон: заказ Вени 31.08.2026 по двум кадрам главной.
   ========================================================================== */
@media(max-width:700px){
  /* ⭐ Буквы заголовков и текста отступают от края экрана на 12px.
     Контейнер даёт 6px, здесь добавляются вторые 6px.
     ⛔ Блокам (карточки товара, плитки разделов, логотипы марок, ленты) поле
     НЕ добавляем: им нужна ширина, и владелец сказал «не блоки». */
  .fm-h2,.fm-h2__nad,.fm-reviews__all,
  .fm-blog__date,.fm-blog__t,
  .fm-block > p,.fm-editorial > p,
  .fm-footer__col,.fm-footer__contacts,.fm-footer__bottom-in,
  .fm-footer__addrrow,.fm-footer__copyright{
    padding-left:6px;padding-right:6px}

  /* ⭐ Услуги идут каруселью, как разделы и марки.
     Плитка 84%: карточка услуги несёт фото и три строки текста, при меньшей
     ширине текст рвётся, а край следующей всё равно виден и подсказывает,
     что ленту можно тянуть. */
  .fm-editorial{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
    margin:0 -6px;padding:16px 6px 24px;
    scroll-snap-type:x proximity;scroll-padding-left:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-editorial::-webkit-scrollbar{display:none}
  .fm-edit{flex:0 0 84%;scroll-snap-align:start}
}

/* ⭐ Витрина из шести карточек: показываем столько, сколько заполняет ряды
   целиком. Иначе на 1440 шестая карточка висит одна во второй строке, а на
   1024 их висит две. Найдено глазами на кадре 01.09.2026.
   ⛔ Считаем article, а не .fm_card: распорка сетки это div.fm_card--empty,
      и счёт по nth-child сбился бы на ней. */
@media(max-width:1500px) and (min-width:1201px){
  .fm-grid-6:not(.fm-related--12) .fm_catalog_grid article.fm_card:nth-of-type(n+6){display:none}
}
@media(max-width:1200px) and (min-width:931px){
  .fm-grid-6:not(.fm-related--12) .fm_catalog_grid article.fm_card:nth-of-type(n+5){display:none}
}

/* ⭐ Лента из двенадцати карточек: она стоит у товара, которого нет в наличии,
   и должна показывать ДВА полных ряда (Веня 04.09.2026). Пороги те же по смыслу:
   показываем столько, сколько заполняет ряды целиком, лишнее прячем. */
@media(max-width:1500px) and (min-width:1201px){
  .fm-related--12 .fm_catalog_grid article.fm_card:nth-of-type(n+11){display:none}
}
@media(max-width:1200px) and (min-width:931px){
  .fm-related--12 .fm_catalog_grid article.fm_card:nth-of-type(n+9){display:none}
}
@media(max-width:930px) and (min-width:641px){
  .fm-related--12 .fm_catalog_grid article.fm_card:nth-of-type(n+7){display:none}
}

/* Текстовые страницы (помощь, компания, отзывы): от H1 до первого заголовка или абзаца было
   6px (поле .fm-pagehead из aspro-match.css), «Помощь» и «Как оформить заказ» слипались
   (обход вёрстки 02.09.2026). Поля соседей схлопываются в большее, поэтому не 10 в дополнение,
   а 16 целиком: минимум между блоками разного смысла. */
.fm-pagehead + .fm-txtpage{margin-top:16px}

/* ==========================================================================
   Нижняя панель телефона и шторка левого меню (Веня 02.09.2026: «город меняем на кнопку меню,
   вход просто иконка, корзину из верхнего меню вниз с количеством в кружке»).
   ========================================================================== */
/* ⚠️ условие ровно то же, что у показа нижней панели: иначе в зазоре от 701 до 860 корзина
   пропадала и сверху, и снизу (замер 02.09.2026 на 768px). */
@media (max-width:700px), (max-height:500px) and (orientation:landscape){
  /* корзина уехала в нижнюю панель, в верхней ленте она дублировалась и уезжала за край */
  .fm-nav__item--cart{display:none}
  .fm-mbar__menu{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;
    border:1px solid var(--fm-red);border-radius:18px;background:var(--fm-red);color:#fff;
    font:600 13px/1 var(--fm-font,sans-serif);cursor:pointer}
  .fm-mbar__menu svg{color:#fff}
  .fm-mbar__korzina{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border:1px solid #e3d9d0;border-radius:50%;background:#fff;color:var(--fm-red)}
  .fm-mbar__korzina .fm-nav__cartbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
    padding:0 5px;border-radius:9px;background:#2fa15a;color:#fff;
    font:700 11px/18px var(--fm-font,sans-serif);text-align:center}
  .fm-mbar__korzina .fm-nav__cartbadge.is-pusto{display:none}
  /* «Войти» больше не красное пятно: тот же кружок, что у лупы и телефона */
  .fm-mbar__vhod{width:36px;padding:0;justify-content:center;border-radius:50%;
    background:var(--fm-cream);border:1px solid var(--fm-border);color:var(--fm-ink)}
  .fm-mbar__vhod svg{color:var(--fm-red)}
}
.fm-shtora{position:fixed;inset:0;z-index:90}
.fm-shtora__fon{position:absolute;inset:0;background:rgba(20,16,14,.42);opacity:0;transition:opacity .22s}
.fm-shtora.is-vidno .fm-shtora__fon{opacity:1}
.fm-shtora__panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,340px);background:#fff;
  box-shadow:0 0 30px rgba(0,0,0,.18);overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(-100%);transition:transform .24s ease}
.fm-shtora.is-vidno .fm-shtora__panel{transform:none}
.fm-shtora__verh{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid #efe8e2;position:sticky;top:0;background:#fff;z-index:2}
.fm-shtora__zag{font:600 16px/1.2 var(--fm-font,sans-serif);color:#252525}
.fm-shtora__krest{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#8d8d8d;cursor:pointer}
.fm-shtora__spisok,.fm-shtora__prochee{list-style:none;margin:0;padding:6px 0}
.fm-shtora__strochka{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fm-shtora__strochka > a,.fm-shtora__prochee a{display:block;flex:1 1 auto;padding:11px 16px;
  font:500 15px/1.3 var(--fm-font,sans-serif);color:#252525;text-decoration:none}
.fm-shtora__strelka{width:44px;height:44px;border:0;background:transparent;color:#a99f96;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.fm-shtora__strelka.is-razvernuto svg{transform:rotate(90deg)}
.fm-shtora__strelka svg{transition:transform .18s}
.fm-shtora__pod{list-style:none;margin:0;padding:0 0 6px}
.fm-shtora__pod a{display:block;padding:9px 16px 9px 30px;font-size:14px;color:#5c5c5c;text-decoration:none}
.fm-shtora__razdel{padding:12px 16px 4px;border-top:1px solid #efe8e2;margin-top:6px;
  font:600 12px/1 var(--fm-font,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#a99f96}
.fm-shtora__strochka > a:active,.fm-shtora__prochee a:active,.fm-shtora__pod a:active{background:#faf7f4}
html.fm-bez-prokrutki{overflow:hidden}
@media(min-width:861px){.fm-shtora{display:none}}
@media(prefers-reduced-motion:reduce){.fm-shtora__panel,.fm-shtora__fon{transition:none}}

/* Выбор города в шапке. Город определяется по базе Sypex Geo локально, ручной выбор живёт
   в куке fm_gorod 180 дней (02.09.2026). */
.fm-city-box{position:relative}
.fm-city__list{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:170px;margin:0;padding:6px 0;
  list-style:none;background:#fff;border:1px solid #e9e0d8;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.fm-city__list button{display:block;width:100%;padding:9px 16px;border:0;background:transparent;text-align:left;
  font:500 14px/1.2 var(--fm-font,sans-serif);color:#252525;cursor:pointer}
.fm-city__list button:hover{background:#faf7f4}
.fm-city__list button.is-vybran{color:var(--fm-red);font-weight:600}

/* Город в шторке меню: на телефоне кнопка города в шапке скрыта, а из нижней панели
   город ушёл под кнопку «Меню» (02.09.2026). */
.fm-shtora__gorod{padding:12px 16px 10px;border-bottom:1px solid #efe8e2}
.fm-shtora__gorodzag{display:block;margin-bottom:8px;font:600 12px/1 var(--fm-font,sans-serif);
  letter-spacing:.06em;text-transform:uppercase;color:#a99f96}
.fm-shtora__goroda{display:flex;flex-wrap:wrap;gap:6px}
.fm-shtora__goroda button{padding:7px 12px;border:1px solid #e3d9d0;border-radius:16px;background:#fff;
  font:500 13px/1 var(--fm-font,sans-serif);color:#252525;cursor:pointer}
.fm-shtora__goroda button.is-vybran{background:var(--fm-red);border-color:var(--fm-red);color:#fff;font-weight:600}
.fm-shtora__telgoroda{display:block;margin:14px 0 2px;padding:12px 0;text-align:center;
  font:600 17px/1 var(--fm-font,sans-serif);color:var(--fm-red);text-decoration:none}
/* первый подзаголовок в шторке стоит сразу под городом, лишняя черта сверху ему не нужна */
.fm-shtora__razdel--pervyy{border-top:0;margin-top:0;padding-top:14px}
/* магазин города посетителя на странице контактов (02.09.2026) */
.fm-point--vash{border-color:#f0c9c2;box-shadow:0 0 0 1px #f6ddd8 inset}
.fm-point__metka{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:10px;
  background:#fdeeeb;color:var(--fm-red);font:600 11px/1 var(--fm-font,sans-serif);
  letter-spacing:.02em;vertical-align:middle}

/* шаг 55: шторка, город и значки */
.fm-shtora__goroda button[hidden]{display:none}
.fm-shtora__drugoy{border-style:dashed;color:#6f6f6f}
.fm-shtora__strochka > a,.fm-shtora__prochee a{display:flex;align-items:center;gap:12px}
.fm-shtora__zn{flex:0 0 20px;color:#a99f96}

/* End */


/* Start:/local/templates/floralmile/assets/css/aspro-match.css?178845676445622*/
/* =========================================================================
   Приближение к оригиналу (значения сняты с floralmile.ru при 1680px):
   h1 32px #333 → крошки 15px #555 ПОД ним; сайдбар 244px, пункт 53px 13px/700;
   карточка 268x425 с квадратом фото 219px; пагинация «‹ 1 2 3 … 75 ›» 31px.
   Контейнер у нас намеренно 1680 (требование владельца), пропорции сохраняем.
   ========================================================================= */

/* --- заголовок + счётчик-плашка + крошки под ним --- */
/* счётчик вынесен из h1 (02.09.2026): плашка стоит рядом с заголовком через тот же зазор 9px,
   а текст h1 для поисковика больше не читается как «Мебель для сада10» */
.fm-pagehead{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 6px;padding-bottom:0;border-bottom:0}
.fm-pagehead h1{display:flex;align-items:center;gap:9px;font-size:32px;font-weight:400;
  line-height:1.2;color:#333;margin:0}
.fm-pagehead .fm-cnt{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;
  background:#969ba5;color:#fff;font-size:11px;font-weight:500;line-height:1}
.fm-crumbs{font-size:15px;color:#555;margin:0 0 22px}
.fm-crumbs a{color:#555;text-decoration:none}
.fm-crumbs a:hover{color:var(--fm-red)}
.fm-crumbs .sep{margin:0 9px;color:#b9b9b9}

/* Подразделы рисуются теми же плитками, что и типы изделия (класс .fm-tile,
   обёртка .fm-tiles.fm-tiles--sec). Прежние правила .fm-subsec удалены
   25.08.2026: два источника стиля для одного блока путали и расходились. */

/* --- панель сортировки: слева список, справа иконки вида --- */
.fm-filterpanel{display:flex;align-items:center;gap:18px;height:61px;padding:13px 0 14px;
  border-bottom:1px solid #ececec;margin:0 0 22px}
.fm-sortsel{position:relative}
.fm-sortsel__cur{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#333;cursor:pointer}
.fm-sortsel__cur svg{color:#999}
.fm-sortsel__list{position:absolute;left:-14px;top:calc(100% + 10px);z-index:20;min-width:210px;
  margin:0;padding:6px 0;list-style:none;background:#fff;border:1px solid #ececec;
  box-shadow:0 8px 24px rgba(0,0,0,.09);opacity:0;visibility:hidden;transition:.15s}
.fm-sortsel:hover .fm-sortsel__list,.fm-sortsel:focus-within .fm-sortsel__list{opacity:1;visibility:visible}
.fm-sortsel__list a{display:block;padding:8px 14px;font-size:14px;color:#555;text-decoration:none}
.fm-sortsel__list a:hover{background:#f7f7f7;color:#333}
.fm-sortsel__list a.is-active{color:var(--fm-red)}
.fm-filterpanel__cnt{font-size:13px;color:#999}
.fm-views{margin-left:auto;display:flex;gap:12px}
.fm-views__i{color:#cfcfcf;cursor:pointer;display:inline-flex}
.fm-views__i.is-active,.fm-views__i:hover{color:#7a7a7a}

/* --- боковое меню: 244px, пункт 53px, 13px/700, активный красный --- */
.fm-catalog{grid-template-columns:300px 1fr;gap:28px}
.fm-side__title{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#333;padding:0 0 12px}
.fm-side__list{list-style:none;margin:0;padding:0;border:1px solid #ececec;border-bottom:0;background:#fff}
.fm-side__list li{margin:0;border-bottom:1px solid #ececec}
.fm-side__list li>a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:53px;padding:15px 15px 17px;font-size:14px;font-weight:400;line-height:1.25;
  color:#333;text-decoration:none;background:#fff;border-radius:2px}
.fm-side__list li>a:hover{color:var(--fm-red)}
.fm-side__list li>a .arr{color:#c9c9c9;font-size:15px;font-weight:400}
.fm-side__list li.is-current>a,.fm-side__list li>a.is-active{color:var(--fm-red)}
.fm-side__list li.is-current>a .arr{color:var(--fm-red)}
.fm-side__promo-img{margin-top:18px}
.fm-side__promo{margin-top:14px}

/* --- карточка товара: пропорции оригинала (квадрат фото, компактный текст) --- */
.fm_catalog_grid{border-top:1px solid #ececec;border-left:1px solid #ececec}
/* ⛔ Отступы здесь ПРЕЖНИЕ. 27.08.2026 я сократил их вдвое по всему сайту, а
   Веня просил сжать только блок из шести товаров в карточке товара: «ты убрал
   отступы и в категории, а нужно было только в карточке товара где 6 товаров».
   Сжатые значения теперь живут в element_style.css под `.fm-related`. */
.fm_card{padding:12px 12px 13px;border-right:1px solid #ececec;border-bottom:1px solid #ececec}
.fm_card__img{aspect-ratio:1/1;margin-bottom:20px}
.fm_card__img img{width:100%;height:100%;object-fit:contain}
.fm_card__stars{margin:0 0 6px}
/* ⛔ Здесь стоял display:block, и он ломал обрезку названия: в section_style.css
   задан display:-webkit-box с обрезкой на двух строках, но это правило грузится
   раньше и проигрывало. Названия уходили в три и четыре строки, ряд карточек
   ехал по высоте (замер 27.08.2026, просьба Вени «2 строки максимум описания
   в товаре, потом ...»). */
/* ⚠️ overflow-wrap:anywhere нужен для названия из одного длинного слова: без
   него такое слово остаётся одной строкой, хвост просто прячется за край, и
   многоточия читатель не увидит (замечание Кодекса 27.08.2026). */
.fm_card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;
  font-size:14px;line-height:1.4;color:#333;min-height:42px;margin:0}
.fm_card__stock{display:flex;align-items:center;justify-content:flex-start;gap:10px;
  font-size:13px;color:#666;margin:10px 0 0}
.fm_card__art{color:#b3b3b3;font-size:12px}
.fm_card__price{margin-top:7px}
.fm_card__cur{font-size:17px;font-weight:700;color:#333}
.fm_card__unit{font-size:13px;color:var(--fm-muted,#6e6e6e)}

/* --- пагинация «‹ 1 2 3 … 75 ›» --- */
.fm-pager{margin:30px 0 6px}
/* ⭐ Лента товаров: пагинация печатается сервером и работает без скриптов,
   а скрипт её прячет и листает прокруткой (Веня 03.09.2026). */
.fm-pager--lenta{display:none}
.fm-lenta__gruz{margin:26px 0 6px;text-align:center;color:#8f8f8f;font-size:14px;opacity:0;transition:opacity .15s}
.fm-lenta__gruz.is-idet{opacity:1}
.module-pagination{display:flex;align-items:center;gap:4px;min-height:31px}
.fm-pag__i,.fm-pag__arr{display:inline-flex;align-items:center;justify-content:center;
  min-width:31px;height:31px;padding:0 8px;font-size:14px;color:#555;text-decoration:none;
  border:1px solid transparent;background:#fff}
.fm-pag__i:hover,.fm-pag__arr:hover{color:var(--fm-red)}
.fm-pag__i.is-current{background:var(--fm-red);color:#fff;border-color:var(--fm-red);font-weight:600}
.fm-pag__arr.is-off{color:#d5d5d5;pointer-events:none}
.fm-pag__dots{padding:0 4px;color:#b3b3b3}

@media(max-width:1100px){
  .fm-catalog{grid-template-columns:1fr}
}

/* --- витрина каталога: плитки разделов 5 в ряд, по центру (как в оригинале) --- */
.fm-sectiontiles{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid #ececec;border-left:1px solid #ececec;margin:0 0 34px}
.fm-stile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0;padding:40px 20px 26px;min-height:308px;text-decoration:none;background:#fff;
  border-right:1px solid #ececec;border-bottom:1px solid #ececec}
.fm-stile:hover{background:#fcfcfc}
.fm-stile__img{display:flex;align-items:center;justify-content:center;width:120px;height:120px;margin-bottom:20px}
.fm-stile__img img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .35s}
.fm-stile:hover .fm-stile__img img{transform:scale(1.05)}
.fm-stile__t{font-size:15px;line-height:1.35;color:#333;text-align:center}
.fm-stile:hover .fm-stile__t{color:var(--fm-red)}
.fm-stile__c{margin-top:6px;font-size:13px;color:#999;text-align:center}
/* ⚠️ 1fr не даёт колонке сжаться уже содержимого: фото 120px плюс поля 40px
   держали две колонки шире экрана, и на 320px страница ехала вбок на 13px.
   minmax(0,1fr) это снимает, а на самых узких ужимаем само фото. 2026-08-25 */
@media(max-width:1100px){.fm-sectiontiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){
  .fm-stile{padding:26px 12px 20px;min-height:0}
  .fm-stile__img{width:88px;height:88px;margin-bottom:14px}
}

/* --- мелкие несоответствия карточки: фото на белом, без красной риски --- */
.fm_card__img{background:#fff}
.fm_card__accent{display:none}

/* --- строка фильтров (рабочая): 59px, чипсы с выпадающими списками --- */
.fm-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;height:59px;
  padding:0;margin:0 0 12px;border-bottom:1px solid #ececec}
.fm-filters__ico{color:#9a9a9a;display:inline-flex;margin-right:2px}
.fm-chip{position:relative}
.fm-chip__t{display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 11px;
  border:1px solid #e5e5e5;background:#fff;font-size:13px;color:#555;cursor:pointer;white-space:nowrap}
.fm-chip__t svg{color:#aaa}
.fm-chip__t i{font-style:normal;font-size:11px;color:#fff;background:var(--fm-red);
  border-radius:999px;padding:1px 6px}
.fm-chip:hover .fm-chip__t{border-color:#c9c9c9;color:#333}
.fm-chip.is-on .fm-chip__t{border-color:var(--fm-red);color:var(--fm-red)}
.fm-chip__drop{position:absolute;left:0;top:calc(100% + 6px);z-index:25;min-width:236px;max-height:330px;
  overflow-y:auto;padding:12px 14px;background:#fff;border:1px solid #ececec;
  box-shadow:0 10px 26px rgba(0,0,0,.10);opacity:0;visibility:hidden;transition:.14s}
/* ⭐ Клавиатура: заголовок чипса это span, и раскрытие только по :hover означало,
   что с клавиатуры фильтр не открыть вовсе (замечание Кодекса 25.08.2026).
   Заголовкам дан tabindex и role=button, а список раскрывается ещё и по фокусу
   внутри чипса, поэтому Tab доводит до галочек и до кнопки «Применить». */
.fm-chip:hover .fm-chip__drop,.fm-chip:focus-within .fm-chip__drop{opacity:1;visibility:visible}
.fm-chip__t:focus-visible,.fm-sortsel__cur:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
.fm-chip__drop label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;color:#444;cursor:pointer}
.fm-chip__drop label i{font-style:normal;margin-left:auto;font-size:11px;color:#b0b0b0}
.fm-chip__drop input[type=checkbox]{accent-color:var(--fm-red);width:14px;height:14px}
.fm-chip__drop--price{display:flex;align-items:center;gap:8px;min-width:250px}
.fm-chip__drop--price label{gap:5px}
.fm-chip__drop input[type=number]{width:78px;height:31px;padding:0 8px;border:1px solid #e2e2e2;font-size:13px}
/* ⭐ Кнопка липнет к низу списка. У «Цвета» 56 значений, список прокручивается
   внутри себя, и кнопка уезжала за его дно: чтобы применить фильтр, надо было
   догадаться прокрутить список до конца (замер 25.08.2026: кнопка оказалась
   на 277px ниже экрана). Ширина во всю строку, чтобы список под ней не просвечивал. */
.fm-chip__drop button{position:sticky;bottom:-12px;z-index:1;width:100%;
  margin-top:10px;height:38px;padding:0 18px;border:0;background:var(--fm-red);
  color:#fff;font-size:12px;cursor:pointer;white-space:nowrap}
/* у цены список горизонтальный, там кнопка стоит в строке и липнуть ей незачем */
.fm-chip__drop--price button{position:static;width:auto;margin-top:0}
.fm-chip--check{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.fm-chip--check input{accent-color:var(--fm-red);width:14px;height:14px}
.fm-filters__reset{margin-left:4px;font-size:13px;color:#999;text-decoration:none;border-bottom:1px dashed #ccc}
.fm-filters__reset:hover{color:var(--fm-red);border-color:var(--fm-red)}

/* ==========================================================================
   Панель каталога одной строкой, как на странице бренда (просьба Вени 25.08.2026).
   Было: сортировка со счётчиком сверху, плитки типов, и только потом фильтр,
   то есть две полосы с двумя линейками и 940px между ними.
   Стало: плитки, а под ними одна строка «воронка, сортировка, чипсы, счётчик, вид».
   ⚠️ display:contents у обёрток: их дети становятся прямыми участниками строки,
   и порядок задаётся order. Так fm_toolbar и fm_filter_row не пришлось трогать.
   ========================================================================== */
.fm-catbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  padding:10px 0 11px;border-bottom:1px solid #ececec;margin:0 0 18px}
.fm-catbar .fm-filterpanel,.fm-catbar .fm-filters{display:contents}
.fm-catbar__ico{display:inline-flex;color:#9a9a9a;flex:0 0 auto;order:0}
/* воронка у формы своя, но она вторая по счёту, прячем: значок в строке один */
.fm-catbar .fm-filters__ico{display:none}
.fm-catbar .fm-sortsel{order:1}
/* ⚠️ Счётчик стоит сразу за сортировкой, как на странице бренда, а НЕ прижат вправо
   через margin-left:auto: прижатый, он при 1024 и 1280 не влезал в строку и уезжал
   на второй ряд один, оставляя пустую полосу (замер 25.08.2026). */
.fm-catbar .fm-filterpanel__cnt{order:2;white-space:nowrap}
.fm-catbar .fm-chip{order:3;position:relative;border:0;padding:0;background:none}
.fm-catbar .fm-chip--check{order:4}
.fm-catbar .fm-filters__reset{order:5}
/* ⛔ Переключатель «плитка/список» ничего не переключает: это два span без ссылок
   и без обработчиков (проверено 25.08.2026). На странице бренда его нет вовсе.
   Прячем, а разметку оставляем: понадобится рабочий переключатель, вернём строкой.
   Заодно панель перестала переноситься на второй ряд при 1024 и 1280. */
.fm-catbar .fm-views{display:none}
/* кнопки крупнее, чем были в каталоге: высота 34 вместо 29, надпись 14.5 вместо 13 */
.fm-catbar .fm-chip__t{height:34px;padding:0 14px;font-size:14.5px}
.fm-catbar .fm-chip__t svg{width:10px;height:10px}
/* сортировка выглядит как чипс: та же рамка, высота и стрелка */
.fm-catbar .fm-sortsel__cur{height:34px;padding:0 14px;gap:8px;border:1px solid #e5e5e5;
  background:#fff;font-size:14.5px;color:#555;white-space:nowrap}
.fm-catbar .fm-sortsel__cur svg{width:10px;height:10px}
.fm-catbar .fm-sortsel__list{left:0;top:calc(100% + 6px)}
/* ⛔ Закрытый список скрыт через visibility, но геометрию сохраняет и растягивает
   страницу вбок, если вылезает за правый край. После переноса счётчика чипсы
   сдвинулись правее, и при 1280 страница поехала на 30px (замер 25.08.2026).
   Открываем списки ОТ правого края чипса: слева места хватает всем. */
.fm-catbar .fm-chip__drop{left:auto;right:0;max-width:calc(100vw - 40px)}
@media (max-width:767px){
  .fm-catbar{gap:8px;padding:8px 0 9px;margin:0 0 14px}
  /* на телефоне счётчик уходит в конец: там важнее сами кнопки фильтра */
  .fm-catbar .fm-filterpanel__cnt{order:7}
}

/* ⛔ На узком экране список, привязанный к своему чипсу, уезжал ЛЕВЫМ краем за
   границу окна: чипс стоит у правого края, а списку нужно 236px. Прокрутки это
   не даёт (влево страница не скроллит), зато половина списка оказывалась не видна.
   Замер 25.08.2026: на 390 вылетало по три списка на странице, и в каталоге, и у бренда.
   Решение: до 767px список считается от самой панели и занимает её ширину целиком. */
@media (max-width:767px){
  .fm-catbar,.fm-brandpage .fm-brandbar{position:relative}
  .fm-catbar .fm-chip,.fm-catbar .fm-sortsel,
  .fm-brandpage .fm-brandbar .fm-chip,.fm-brandpage .fm-brandbar .fm-sortsel{position:static}
  .fm-catbar .fm-chip__drop,.fm-catbar .fm-sortsel__list,
  .fm-brandpage .fm-brandbar .fm-chip__drop,.fm-brandpage .fm-brandbar .fm-sortsel__list{
    left:0;right:auto;width:100%;min-width:0;max-width:none}
}

/* промо-баннер сайдбара ближе к оригиналу по высоте */
.fm-side__promo-img{display:block;height:105px;overflow:hidden;position:relative}
.fm-side__promo-img img{width:100%;height:105px;object-fit:cover}

/* ===== БРЕНДЫ (как в оригинале) ===== */
.fm-brands-intro{font-size:15px;line-height:1.65;color:#555;margin:0 0 26px;max-width:none}
.fm-brandgrid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid #ececec;border-left:1px solid #ececec;margin:0 0 10px}
.fm-btile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-height:205px;padding:34px 20px 26px;text-decoration:none;background:#fff;
  border-right:1px solid #ececec;border-bottom:1px solid #ececec}
.fm-btile:hover{background:#fcfcfc}
.fm-btile__logo{display:flex;align-items:center;justify-content:center;width:100%;height:96px;margin-bottom:16px}
.fm-btile__logo img{max-width:78%;max-height:96px;object-fit:contain;transition:transform .3s}
.fm-btile:hover .fm-btile__logo img{transform:scale(1.05)}
.fm-btile__noimg{font-size:26px;font-weight:700;color:#d6d6d6;letter-spacing:.04em}
.fm-btile__name{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#8d8d8d;text-align:center}
.fm-btile:hover .fm-btile__name{color:var(--fm-red)}
.fm-btile__cnt{margin-top:5px;font-size:12px;color:#c0c0c0}

/* блок бренда на его странице */
.fm-brandbox{display:grid;grid-template-columns:210px 1fr;gap:28px;align-items:start;
  border:1px solid #ececec;padding:26px 28px;margin:0 0 30px;background:#fff}
.fm-brandbox__logo{display:flex;align-items:center;justify-content:center;min-height:120px}
.fm-brandbox__logo img{max-width:100%;max-height:150px;object-fit:contain}
.fm-brandbox__text{font-size:15px;line-height:1.65;color:#555}
.fm-brandbox__text p{margin:0 0 12px}
.fm-brandbox__text p:last-child{margin-bottom:0}
.fm-brandbox__text b{color:#333}
.fm-brand-h2{font-family:var(--fm-serif);font-size:22px;font-weight:400;color:#333;margin:0 0 14px}
@media(max-width:900px){
  .fm-brandgrid{grid-template-columns:repeat(2,1fr)}
  .fm-brandbox{grid-template-columns:1fr;gap:18px}
}

/* пункты бокового меню со счётчиком (страница бренда) */
.fm-side__list--counts li>a{font-weight:400;font-size:13px}
.fm-side__list--counts li>a i{font-style:normal;color:#b3b3b3;font-size:12px;margin-left:8px}
.fm-side__list--counts li>a:hover i{color:var(--fm-red)}

/* Прежние правила ширины подразделов (.fm-subsecs) удалены 25.08.2026 вместе
   с их разметкой: теперь это плитки .fm-tiles--sec, а minmax(0,1fr) у них
   заложен в самой раскладке, распирать страницу нечему. */

/* Закрытая панель фильтра скрыта через visibility, но продолжает занимать место
   и на узких экранах растягивала страницу на 12px (боковая прокрутка без видимой причины).
   Прижимаем её к правому краю чипа и ограничиваем шириной экрана. Поведение не меняется. */
@media(max-width:767px){
  .fm-chip__drop{left:auto;right:0;max-width:calc(100vw - 40px)}
  .fm-chip__drop--price{min-width:0;flex-wrap:wrap}
}




/* menu v2: no bold, hierarchy, all-open, whiter bg + lighter lines (Venya 2026-08-05) */
/* ⚠️ 05.08.2026 Веня просил меню БЕЗ жирного. 25.08.2026 он же попросил обратное:
   «цвет у левого меню сделать темнее, а категории ещё и жирнее немного». Поэтому
   у категорий теперь вес 500, а не 400. Это новое указание, не откатывать к «no bold». */
.fm-side__list li>a{font-size:14px;font-weight:500;padding:11px 14px;min-height:0;color:#1a1a1a}
.fm-side__list li>a.is-active,.fm-side__list li.is-current>a{color:var(--fm-red);font-weight:500}
.fm-side__list .fm-side__sub{position:relative;list-style:none;margin:0;padding:2px 0 8px;background:#fff;border-top:1px solid #f2f2f2}
.fm-side__list .fm-side__sub::before{content:"";position:absolute;left:19px;top:4px;bottom:10px;width:1px;background:#efefef}
.fm-side__list .fm-side__sub li{position:relative;border:0}
/* подпункты тоже темнее: было #707070, стало #4a4a4a. Жирность им не трогаем,
   иначе пропадёт разница между категорией и её содержимым */
.fm-side__list .fm-side__sub a{position:relative;display:block;padding:7px 14px 7px 34px;font-size:13px;font-weight:400;line-height:1.35;color:#4a4a4a;text-decoration:none;transition:color .15s;min-height:0;background:none}
.fm-side__list .fm-side__sub a::before{content:"";position:absolute;left:19px;top:50%;width:9px;height:1px;background:#efefef}
.fm-side__list .fm-side__sub a:hover{color:var(--fm-red)}
.fm-side__list .fm-side__sub a.is-active{color:var(--fm-red)}
.fm-side__list .fm-side__sub a.is-active::before{background:var(--fm-red);width:11px;height:2px;margin-top:-1px}

/* ravnenie-shapki-sajdbara: КАТАЛОГ на уровень тулбара + симметрия отступов заголовка */
/* На широких экранах заголовки обеих колонок должны стоять на одной линии,
   поэтому высота у них общая и задана явно. 2026-08-25 */
@media(min-width:1101px){
  .fm-side__title,.fm-tiles-title:not(.fm-tiles-title--filtr){
    height:61px;padding:13px 0 14px;box-sizing:border-box}
}
.fm-main{padding-top:48px}
.fm-crumbs{margin:2px 0 28px}

/* korzina-v-menyu: равнодольные пункты меню + кнопка корзины */
.fm-nav__cartbadge{min-width:16px;height:16px;padding:0 4px;background:#fff;color:var(--fm-red);font:700 10px/16px var(--fm-font);border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.fm-nav__item--cart{gap:7px}
/* граница согласована с прокруткой ленты в app.css: до 1179 лента, с 1180 распределение */
@media(min-width:1180px){.fm-nav__in>.fm-nav__item{flex:1 1 0;justify-content:center;padding:0 8px}}

/* Пустые ячейки-заполнители в сетке товаров: держат ряд, но рамку не рисуют (заказ Вени 2026-08-07) */

/* ==========================================================================
   Плитки типов изделия над фильтром (переверстка 24.08.2026)
   Было: квадрат 126px с фото 1:1, название и счётчик под ним. 11 типов давали
   411px высоты, 17 типов давали 831px, то есть почти весь первый экран.
   Стало: фото 68px слева, название и счёт справа. Те же 11 типов в два ряда.
   Отступы мобилы взяты по образцу проекта 4bike: боковое поле 10px, зазор 6px,
   лента идёт от края до края, полоса прокрутки скрыта.
   ========================================================================== */
/* ⭐ Ширина плитки подобрана ЗАМЕРОМ, а не на глаз. Шрифтом Montserrat 500 12.5px
   самое длинное слово среди типов изделия «Электрогирлянда» занимает 118px,
   а среди названий разделов «Электрогирлянды» 121px. Плитка 214px минус фото 56,
   зазор 9, поля 20 и рамка 2 оставляет тексту 127px: влезают оба, запас 6px.
   Меньше 214 ставить нельзя, слово снова начнёт рваться. 2026-08-25 */
/* ⭐ Заголовок правой колонки живёт по тем же правилам, что «Каталог» слева:
   тот же кегль, та же линия, тот же красный значок. Так две колонки читаются
   как одна шапка, а не как два независимых куска (просьба Вени 25.08.2026). */
/* ⚠️ Шрифт ровно как у «Каталога» слева: 12px, вес 600, разрядка .06em, цвет #333.
   Раньше тут стояли 13px и вес 700 из app.css, и заголовки были заметно тяжелее
   соседа. Замер 25.08.2026: у «Каталога» 12px/600/0.72px. */
.fm-tiles-title{display:flex;align-items:center;gap:8px;margin:0 0 14px;
  font:600 12px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.06em;
  color:#333;padding:15px 0;border-bottom:2px solid var(--fm-ink,#252525)}
.fm-tiles-title svg{color:var(--fm-red);flex:0 0 auto}
/* Заголовок фильтра стоит вторым и уже не выравнивается с сайдбаром: линию ему
   даём тоньше, иначе две одинаковые чёрные полосы спорят друг с другом.
   ⭐ Отступ сверху 40px, а не 22: вплотную к плиткам фильтр с ними сливался
   и не читался как отдельный блок (правка по замечанию Вени 25.08.2026). */
.fm-tiles-title--filtr{margin:40px 0 6px;padding:0 0 10px;border-bottom-width:1px;
  border-bottom-color:#ececec;
  /* якорь #tovary: браузер ставит цель вплотную к краю окна, отступ даёт воздух */
  scroll-margin-top:18px}
.fm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:8px;
  margin:0 0 16px}
.fm-tile{box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr);
  align-items:center;gap:9px;min-height:84px;padding:10px;
  border:1px solid #ececec;background:#fff;color:#333;text-decoration:none;
  transition:border-color .14s,box-shadow .14s}
.fm-tile:hover{border-color:#c9c9c9;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.fm-tile:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}
.fm-tile.is-on{border-color:var(--fm-red);box-shadow:0 0 0 1px var(--fm-red) inset}
.fm-tile__img{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;overflow:hidden;background:#fafafa}
.fm-tile__img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fm-tile__body{display:flex;flex-direction:column;gap:3px;min-width:0}
/* min-height, а не height: при увеличенном шрифте плитка обязана вырасти, а не обрезать текст.
   ⛔ overflow-wrap:anywhere тут стоял до 25.08.2026 и рвал слова посередине
   («Искусствен ная ёлка»). Слово теперь не рвётся никогда: место под него уже отведено.
   ⚠️ Про -webkit-line-clamp ниже: Chrome показывает у такого элемента computed
   display «flow-root», хотя задан «-webkit-box». Это его внутреннее представление,
   а не поломка: обрезка работает, проверено отдельной пробой 25.08.2026
   (длинный текст ужимается до трёх строк). Не удалять, приняв flow-root за отвал. */
.fm-tile__t{font-size:12.5px;font-weight:500;line-height:1.3;color:#333;
  overflow-wrap:normal;word-break:normal;hyphens:none;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fm-tile.is-on .fm-tile__t{color:var(--fm-red)}
.fm-tile__n{font-size:11px;line-height:1.25;color:#8c8c8c}

@media (max-width:1279px){
  .fm-tile{gap:8px;padding:9px;min-height:82px}
}

@media (max-width:767px){
  /* ⚠️ grid-элемент без min-width:0 не сжимается меньше содержимого, и лента
     с nowrap растягивает всю колонку каталога вбок вместе со страницей */
  .fm-catalog > *{min-width:0}
  /* лента идёт от края до края экрана: так видно, что справа есть продолжение.
     -10px это боковое поле .fm-container в мобиле, обратно возвращаем padding-ом */
  .fm-tiles{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;max-width:none;
    /* поле контейнера на телефоне стало 6px (образец 4bike, 28.08.2026),
       и эти три числа обязаны идти за ним, иначе лента уезжает за край */
    margin:0 -6px 12px;padding:2px 6px 6px;
    scroll-snap-type:x proximity;scroll-padding-left:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-tiles::-webkit-scrollbar{display:none}
  /* 204px при экране 390: видна плитка и большая часть второй, край подсказывает прокрутку.
     Меньше нельзя: тексту нужно 130px, иначе «Электрогирлянда» снова порвётся. */
  .fm-tile{flex:0 0 204px;grid-template-columns:48px minmax(0,1fr);gap:8px;
    min-height:78px;padding:8px;scroll-snap-align:start}
  .fm-tile__img{width:48px;height:48px}
  .fm-tiles-title{font-size:13px;margin-bottom:6px}
}

/* ==========================================================================
   Подразделы: те же плитки, что и типы изделия (просьба Вени 25.08.2026).
   Отличий два: плитка чуть выше (названия разделов длиннее и занимают до трёх
   строк) и на мобиле это не лента, а столбец.
   ⚠️ Блок обязан идти ПОСЛЕ правил .fm-tiles: специфичность равна, решает порядок.
   ========================================================================== */
.fm-tiles--sec{margin:0 0 26px}
.fm-tiles--sec .fm-tile{min-height:92px}
/* у типов название можно обрезать на третьей строке, у разделов нельзя: «Новогодние
   композиции музыкальные и с подсветкой» занимает четыре строки и обязано читаться
   целиком, иначе непонятно, куда ведёт ссылка */
.fm-tiles--sec .fm-tile__t{display:block;overflow:visible}


/* На печати ленты с прокруткой не существует: то, что уехало вправо, просто
   пропало бы с листа. Разворачиваем оба ряда плиток в обычную сетку. */
@media print{
  .fm-tiles,.fm-tiles--sec{display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    overflow:visible !important;margin:0 0 12px !important}
  .fm-tile{flex:none !important;break-inside:avoid}
  .fm-tile__img img{mix-blend-mode:normal}
}

/* Страница поиска рисует .fm-catalog без сайдбара, и при ширине от 1101
   единственный .fm-content садился в колонку 300px, отведённую под сайдбар.
   Если ребёнок один, он занимает всю ширину. 2026-08-24 */
.fm-catalog > .fm-content:only-child{grid-column:1 / -1}

/* Отступы телефона по образцу 4bike (замер 28.08.2026).
   У карточки 4bike своих боковых полей нет: текст стоит в 7px от края, и это
   даёт заметно больше места под название товара. У нас поля были двойные:
   12px у карточки плюс поля внутренних блоков. Снимаем боковые поля карточки,
   отступ держат внутренние блоки. Вертикальные поля оставляем: они отделяют
   фото сверху и цену снизу. */
@media(max-width:460px){
  /* Сетка 4bike: не таблица со сплошными линиями, а отдельные плитки с
     промежутком. Линии снимаем целиком, иначе они рвутся промежутком. */
  .fm_catalog_grid{border:0;gap:6px;background:transparent}
  .fm_card{
    padding:0 0 8px;
    border:1px solid #eaebec;border-radius:16px;
    box-shadow:0 4px 12px rgba(11,13,18,.06);
    /* фото прижато к верхней кромке, скругление обязано его обрезать */
    overflow:hidden}
}

/* ==========================================================================
   Телефон: пять правок по кадру раздела (заказ Вени 30.08.2026).
   Блок идёт последним по файлу: специфичность у здешних правил та же, что у
   правил выше, решает порядок.
   ========================================================================== */
@media (max-width:767px){

  /* 1. поля меню вдвое меньше: было 16px по бокам */
  .fm-nav{margin:8px 8px 0}

  /* 2. отступ от меню до заголовка вдвое меньше: было 48px */
  .fm-main{padding-top:24px}

  /* 3. крошки одной строкой, двигаются пальцем.
     Отрицательные поля равны полю контейнера: лента идёт от края до края,
     иначе последнее звено обрывается на полпути и выглядит поломкой. */
  .fm-crumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
    margin:2px -6px 18px;padding:0 12px 2px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-crumbs::-webkit-scrollbar{display:none}
  /* правый край растворяется: обрыв текста на полуслове читается как поломка,
     а угасание читается как «здесь есть продолжение». Полосы прокрутки на
     телефоне нет, подсказать больше нечем. */
  .fm-crumbs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .fm-crumbs > *{flex:0 0 auto}

  /* 4. боковые поля заголовков и текста вдвое больше: контейнер даёт 6px,
     здесь добавляем ещё 6px. Плиткам и карточкам товара НЕ добавляем:
     им ширина нужнее, чем воздух. */
  .fm-pagehead,.fm-tiles-title,.fm-cat-seo,.fm-sec-descr,.fm-main .fm-container > p{
    padding-left:6px;padding-right:6px}

  /* 5. подразделы и типы изделия выглядят одинаково: фото сверху, подпись под
     ним, две плитки в видимой части, дальше лента едет вбок.
     ⚠️ 46% вместо 50%: край третьей плитки обязан выглядывать, иначе лента
     читается как обычная сетка и никто не догадается её потянуть. */
  /* Сетка 3 колонки на 2 ряда, остальное уезжает вбок (заказ Вени 30.08.2026).
     ⚠️ Плитки при этом заполняются СВЕРХУ ВНИЗ, потом вправо: иначе ряды не
     собрать по два. Алфавит сохраняется по колонкам, не по строкам. */
  /* ⛔ grid-template-columns обязан быть сброшен в none: базовое правило
     .fm-tiles задаёт repeat(auto-fill,minmax(214px,1fr)), и при потоке по
     колонкам плитки раскладываются по ЭТИМ явным колонкам, а grid-auto-columns
     не применяется вовсе. Колонка выходила 214px вместо 119, и длинные имена
     вылезали. Поймано замером 30.08.2026, по виду страницы это не читалось. */
  .fm-tiles,.fm-tiles--sec{display:grid;grid-auto-flow:column;
    grid-template-columns:none;
    grid-template-rows:repeat(2,minmax(0,auto));grid-auto-columns:30.5%;
    overflow-x:auto;gap:6px;max-width:none;margin:0 -6px 18px;padding:2px 6px 8px;
    scroll-snap-type:x proximity;scroll-padding-left:6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .fm-tiles::-webkit-scrollbar,.fm-tiles--sec::-webkit-scrollbar{display:none}
  /* ⭐ Пока плиток три или меньше, второй ряд не нужен: поток по колонкам ставил
     их друг под друга в один столбец, и два типа изделия выглядели как обрубок
     (замечание Вени 30.08.2026 по кадру «Букетов», где типов всего два).
     Селектор читается так: последняя плитка стоит среди первых трёх, значит
     всего их не больше трёх. Ряд тогда один, и плитки идут вбок. */
  .fm-tiles:has(.fm-tile:nth-child(-n+3):last-child),
  .fm-tiles--sec:has(.fm-tile:nth-child(-n+3):last-child){grid-template-rows:auto}
  .fm-tiles .fm-tile,.fm-tiles--sec .fm-tile{flex:none;min-height:0;
    grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
    align-content:start;gap:6px;padding:9px 3px 8px;scroll-snap-align:start}
  .fm-tiles .fm-tile__img,.fm-tiles--sec .fm-tile__img{width:52px;height:52px}
  .fm-tiles .fm-tile__body,.fm-tiles--sec .fm-tile__body{align-items:center;gap:2px;width:100%}
  /* колонка 31.5% это 119px при экране 390, тексту достаётся 109px: самое
     длинное имя «Электрогирлянды» занимает 106px при кегле 11 и помещается.
     ⚠️ Ширина колонки 30.5%, а не 33.3%: три колонки по 33.3% занимают
     контейнер ровно, и четвёртая начинается ЗА краем окна. Проверяющий
     30.08.2026 не увидел подсказки прокрутки на кадре, и был прав: при 31.5%
     от четвёртой оставалось 3px, они прятались под правым полем контейнера.
     При 30.5% колонка 115px, три занимают 357px из 378, и четвёртой видно
     15px. Отнятую ширину вернули тексту, ужав поля плитки с 4px до 3px. */
  /* ⚠️ Три строки, а не сколько получится: плитки в ленте одной высоты, и одно
     имя в четыре строки («Новогодние композиции музыкальные и с подсветкой»)
     оставляло под короткими подписями 60px пустоты. Замечание принято 30.08.2026.
     На широких экранах имя по-прежнему видно целиком, там места хватает. */
  /* ⛔ hyphens:auto здесь пробовали и убрали: у Chrome нет русского словаря
     переносов, слово остаётся целым и вылезает. Проба 30.08.2026: на 320px
     «Электрогирлянды» так и заняло 106px в колонке 97px. Кегль подбираем
     замером под ширину колонки, ниже. */
  .fm-tiles .fm-tile__t,.fm-tiles--sec .fm-tile__t{font-size:11px;line-height:1.25;
    overflow-wrap:normal;word-break:normal;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .fm-tiles .fm-tile__n,.fm-tiles--sec .fm-tile__n{font-size:10.5px;line-height:1.2;color:#6f6f6f}
}

/* ⭐ Ширины, на которых три колонки не проходят по ЗАМЕРУ.
   Самое длинное имя раздела «Электрогирлянды» занимает 107px при кегле 11.
   Колонка отдаёт тексту свою ширину минус 10px (поля 8 и рамка 2):

   | экран | колонка | тексту | слово при 11px | решение          |
   |-------|---------|--------|----------------|------------------|
   |  320  |   97    |   87   |     107        | две колонки      |
   |  360  |  110    |  100   |     107        | кегль 10 (97px)  |
   |  390  |  119    |  109   |     107        | оставляем 11     |
*/
@media (max-width:359px){
  .fm-tiles,.fm-tiles--sec{grid-auto-columns:46%}
}
@media (min-width:360px) and (max-width:389px){
  .fm-tiles .fm-tile__t,.fm-tiles--sec .fm-tile__t{font-size:10px}
  .fm-tiles .fm-tile__n,.fm-tiles--sec .fm-tile__n{font-size:10px}
}

/* шаг 56: шапка раздела на телефоне */
@media (max-width:767px){
  /* Счётчик стоит сразу после последней буквы заголовка, а не отдельной строкой под ним:
     заголовок в потоке текста, плашка в той же строке (Веня 03.09.2026). */
  .fm-pagehead{display:block;margin-bottom:4px}
  .fm-pagehead h1{display:inline}
  .fm-pagehead .fm-cnt{vertical-align:middle;margin-left:8px;position:relative;top:-3px}
  /* Меньше воздуха: до крошек и от крошек до фильтра. Когда перед фильтром стоят плитки,
     его отступ 40px остаётся (первым ребёнком он тогда не бывает). */
  .fm-crumbs{margin-bottom:10px}
  .fm-tiles-title--filtr:first-child{margin-top:12px}
}

/* шаг 56б: счётчик приклеен к последнему слову */
@media (max-width:767px){
  .fm-pagehead h1::after{content:"\2060"}
}

/* End */


/* Start:/local/templates/floralmile/assets/css/korzina.css?178841200212190*/
/* =========================================================================
   Корзина floralmile: страница /preview/basket/ и всплывающая панель,
   которая показывается при добавлении товара из списка.
   ========================================================================= */
.fm-kor{--ramka:#ededea;--tepl:#fbfaf8;--ink:#252525;--tekst:#5f5f5f;
  --kras:#e54e3a;--kras-t:#c0392b;--tih:#757068;
  max-width:1680px;margin:0 auto;padding:0 clamp(16px,3vw,40px) 40px}

.fm-kor__head{display:flex;align-items:baseline;gap:14px;padding:8px 0 26px}
.fm-kor__head h1{margin:0;font-size:clamp(28px,3.4vw,42px);font-weight:400;color:var(--ink);line-height:1.1}
.fm-kor__schet{font-size:14px;color:var(--tih)}

/* ----- пустая корзина ----- */
.fm-kor__pusto{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:70px 20px 90px;color:var(--tih)}
.fm-kor__pusto svg{color:#d8d2c9;margin-bottom:18px}
.fm-kor__pustot{margin:0 0 8px;font-size:22px;color:var(--ink);font-weight:500}
.fm-kor__pustop{margin:0 0 26px;max-width:430px;font-size:15px;line-height:1.6;color:var(--tekst)}

/* ----- две колонки: список и итог ----- */
.fm-kor__ryad{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(24px,2.6vw,42px);align-items:start}

.fm-kor__spisok{border-top:1px solid var(--ramka)}
.fm-kor__stroka{display:grid;grid-template-columns:80px minmax(0,1fr) auto auto 30px;
  align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--ramka)}
.fm-kor__stroka.is-uhodit{opacity:.35;transition:opacity .2s}

.fm-kor__foto{display:block;width:80px;height:80px;border-radius:10px;overflow:hidden;
  background:var(--tepl);flex:0 0 80px}
.fm-kor__foto img{width:100%;height:100%;object-fit:contain;display:block}

.fm-kor__telo{min-width:0}
.fm-kor__imya{display:block;font-size:15px;line-height:1.4;color:var(--ink);transition:color .16s}
.fm-kor__imya:hover{color:var(--kras-t)}
.fm-kor__cena{margin-top:6px;font-size:13px;color:var(--tih)}
.fm-kor__cena span{color:#bdb7ae}

/* счётчик количества */
.fm-kor__kol{display:flex;align-items:center;border:1px solid var(--ramka);border-radius:10px;
  overflow:hidden;background:#fff}
.fm-kor__knop{width:34px;height:36px;border:0;background:#fff;color:#7a746c;font-size:17px;
  line-height:1;cursor:pointer;transition:background .15s,color .15s}
.fm-kor__knop:hover{background:var(--tepl);color:var(--kras-t)}
.fm-kor__knop:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.fm-kor__pole{width:44px;height:36px;border:0;border-left:1px solid var(--ramka);
  border-right:1px solid var(--ramka);text-align:center;font-size:15px;color:var(--ink);
  background:#fff;-moz-appearance:textfield}
.fm-kor__pole:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

.fm-kor__summa{min-width:110px;text-align:right;font-size:17px;font-weight:700;color:var(--ink);
  white-space:nowrap}

.fm-kor__ubrat{width:30px;height:30px;border:0;background:transparent;color:#c2bcb3;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;transition:color .15s,background .15s}
.fm-kor__ubrat:hover{color:var(--kras);background:var(--tepl)}
.fm-kor__ubrat:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fm-kor__bezjs{display:flex;gap:6px;align-items:center;margin-top:8px}

/* ----- панель итога ----- */
.fm-kor__itog{align-self:stretch}
.fm-kor__itogw{position:sticky;top:24px;padding:24px 24px 22px;border:1px solid var(--ramka);
  border-radius:14px;background:var(--tepl)}
.fm-kor__itogl{font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kras-t);padding:0 0 16px}
.fm-kor__strokai{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;font-size:14px;color:var(--tekst)}
.fm-kor__strokai b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.fm-kor__strokai--tih span:last-child{color:var(--tih);font-size:13px;text-align:right}
.fm-kor__vsego{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:16px;border-top:1px solid #e6e1da;font-size:15px;color:var(--ink)}
.fm-kor__vsego b{font-size:23px;font-weight:700;white-space:nowrap}
.fm-kor__oform{display:flex;width:100%;margin:20px 0 0;text-align:center}   /* flex, а не block: block терял центровку .fm-btn и текст прижимался к верху (02.09.2026) */
.fm-kor__zamet{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--tih)}
.fm-kor__prodolzhit{display:inline-block;margin:16px 0 0;font-size:13px;color:var(--kras-t);
  border-bottom:1px solid rgba(192,57,43,.3);transition:color .16s}
.fm-kor__prodolzhit:hover{color:var(--kras)}

/* =========================================================================
   Всплывающая панель добавления. Просьба Вени 27.08.2026: нажал «в корзину»
   в списке товаров, справа выезжает окно и через полторы секунды уходит.
   В карточке товара не всплывает.
   ========================================================================= */
.fm-vsp{position:fixed;top:16px;right:16px;z-index:9000;width:min(360px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--fm-border,#ededea);border-radius:14px;
  box-shadow:0 18px 48px rgba(60,50,40,.16);
  padding:16px 18px 18px;
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .24s}
.fm-vsp.is-vidno{transform:translateX(0);opacity:1;pointer-events:auto}

/* ⚠️ Убранная панель не должна ловить фокус клавиатурой: одного сдвига и
   прозрачности мало, Tab уходил в невидимые кнопки (замечание Кодекса). */
.fm-vsp[inert]{visibility:hidden}
.fm-vsp.is-vidno{visibility:visible}

.fm-vsp__verh{display:flex;align-items:center;gap:8px;padding:0 0 12px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#3aaa35}
.fm-vsp__verh svg{flex:0 0 auto}
/* отказ показываем той же панелью, но другим цветом и без галочки */
.fm-vsp.is-oshibka .fm-vsp__verh{color:var(--fm-red,#e54e3a)}
.fm-vsp.is-oshibka .fm-vsp__gal{display:none}
.fm-vsp.is-oshibka .fm-vsp__polosa{display:none}
/* только что добавленная позиция читается сразу */
.fm-vsp__tovar.is-novyy .fm-vsp__imya{color:#252525;font-weight:500}
.fm-vsp__zakryt{margin-left:auto;width:26px;height:26px;border:0;background:transparent;
  color:#bdb7ae;cursor:pointer;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;transition:color .15s,background .15s}
.fm-vsp__zakryt:hover{color:#e54e3a;background:#fbfaf8}
.fm-vsp__zakryt:focus-visible{outline:2px solid #252525;outline-offset:2px}

.fm-vsp__tovar{display:flex;gap:12px;align-items:center;padding:12px 0;
  border-top:1px solid #f0ece7}
.fm-vsp__tovar img{flex:0 0 52px;width:52px;height:52px;border-radius:9px;object-fit:contain;
  background:#fbfaf8;display:block}
.fm-vsp__imya{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;min-width:0;font-size:13.5px;line-height:1.35;color:#2f2f2f}
.fm-vsp__cena{margin-left:auto;font-size:14px;font-weight:700;color:#252525;white-space:nowrap}

.fm-vsp__itog{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:4px;padding-top:12px;border-top:1px solid #f0ece7;font-size:13.5px;color:#5f5f5f}
.fm-vsp__itog b{font-size:17px;font-weight:700;color:#252525;white-space:nowrap}
.fm-vsp__knopki{display:flex;gap:9px;margin-top:14px}
.fm-vsp__knopki .fm-btn{flex:1 1 0;text-align:center;padding:10px 12px;font-size:12.5px}

/* полоска, показывающая, сколько панель ещё висит */
.fm-vsp__polosa{position:absolute;left:14px;right:14px;bottom:8px;height:2px;border-radius:2px;
  background:#f0ece7;overflow:hidden}
.fm-vsp__polosa i{display:block;height:100%;width:100%;background:var(--fm-red,#e54e3a);
  transform-origin:left center}
.fm-vsp.is-vidno .fm-vsp__polosa i{animation:fm-vsp-taet 1.5s linear forwards}
.fm-vsp.is-derzhim .fm-vsp__polosa i{animation-play-state:paused}
@keyframes fm-vsp-taet{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .fm-vsp{transition:opacity .2s}
  .fm-vsp.is-vidno .fm-vsp__polosa i{animation:none;transform:scaleX(0)}
}

/* ----- счётчик в шапке и отклик кнопки ----- */
/* пустую корзину числом не подписываем: ноль в кружке выглядит как ошибка */
.fm-nav__cartbadge.is-pusto{display:none}

/* форма вокруг кнопки не должна участвовать в раскладке строки цены */
.fm_card__buyf{display:contents}
.fm_card__buy{font-family:inherit;cursor:pointer}
/* ⚠️ Видимость кнопки при переходе клавиатурой задаём здесь, а не в стиле
   компонента: этот файл Битрикс собирает в template_*.css, который грузится
   ПОСЛЕ page_*.css со стилями компонента. То же правило, записанное там,
   проигрывало по порядку, и кнопка при живом фокусе оставалась прозрачной
   (замер 27.08.2026). */
.fm_card:focus-within .fm_card__buy,
.fm_card__buy:focus{opacity:1;transform:none;pointer-events:auto}
.fm_card__buy.is-zhdyom{opacity:.55;pointer-events:none}
.fm_card__buy.is-dobavleno{background:#3aaa35;border-color:#3aaa35;color:#fff}
/* на карточке товара панель не всплывает, поэтому отклик даёт сама кнопка */
.fm-prod [data-v-korzinu].is-dobavleno{background:#3aaa35;border-color:#3aaa35;color:#fff}

/* ----- узкие экраны ----- */
@media (max-width:1000px){
  .fm-kor__ryad{grid-template-columns:minmax(0,1fr);gap:26px}
  .fm-kor__itogw{position:static}
}
@media (max-width:700px){
  /* ⛔ Раньше сумма стояла в колонке под крестик шириной 30 точек: цена «5 980 ₽» в неё
     не влезала, распирала сетку, документ выходил 397 при окне 390 и страница ездила
     вбок (замер 03.09.2026). Теперь правая колонка подстраивается под цену, а крестик
     стоит отдельным слоем в углу строки и на сетку не влияет. */
  .fm-kor__stroka{position:relative;grid-template-columns:64px minmax(0,1fr) auto;
    grid-template-areas:"foto telo telo" "foto kol summa";gap:12px 14px;padding:16px 0}
  .fm-kor__foto{grid-area:foto;width:64px;height:64px;flex-basis:64px;align-self:start}
  .fm-kor__telo{grid-area:telo;padding-right:36px}
  .fm-kor__kol{grid-area:kol;justify-self:start}
  .fm-kor__summa{grid-area:summa;justify-self:end;align-self:center;text-align:right;
    min-width:0;font-size:16px;white-space:nowrap}
  .fm-kor__ubrat{position:absolute;top:14px;right:0;grid-area:auto}
  .fm-vsp{top:auto;bottom:12px;right:12px;left:12px;width:auto;
    transform:translateY(calc(100% + 24px))}
  .fm-vsp.is-vidno{transform:translateY(0)}
}

/* ⭐ Просмотр корзины по нажатию: позиций может быть много, список прокручивается
   внутри панели, а итог и кнопки остаются на виду (Веня 03.09.2026). */
.fm-vsp__tovary.is-spisok{max-height:44vh;overflow-y:auto;overscroll-behavior:contain}
@media (max-width:700px){
  .fm-vsp__tovary.is-spisok{max-height:38vh}
}

/* End */


/* Start:/local/templates/floralmile/assets/css/modalka.css?17883229358681*/
/* ==========================================================================
   Всплывающее окно вопроса. Заказ Вени 01.09.2026: кнопка «Задать вопрос»
   открывает форму обратной связи в стиле сайта, а не ведёт в никуда.
   ========================================================================== */

.fm-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:20px}
.fm-modal[hidden]{display:none}

.fm-modal__fon{position:absolute;inset:0;background:rgba(20,16,14,.55);
  animation:fm-modal-fon .18s ease-out}

.fm-modal__okno{position:relative;width:100%;max-width:500px;max-height:calc(100vh - 40px);
  overflow:auto;background:#fff;border-radius:var(--fm-r,14px);
  padding:34px 34px 30px;box-shadow:0 24px 60px rgba(20,16,14,.28);
  animation:fm-modal-okno .2s ease-out}

@keyframes fm-modal-fon{from{opacity:0}to{opacity:1}}
@keyframes fm-modal-okno{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ⚠️ Движение выключаем, если человек попросил об этом в системе */
@media (prefers-reduced-motion:reduce){
  .fm-modal__fon,.fm-modal__okno{animation:none}
}

.fm-modal__krest{position:absolute;top:12px;right:12px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:none;cursor:pointer;color:var(--fm-muted,#6e6e6e);
  border-radius:50%;transition:background .15s,color .15s}
.fm-modal__krest:hover{background:var(--fm-surface,#f6f3ee);color:var(--fm-ink,#252525)}
.fm-modal__krest:focus-visible{outline:2px solid var(--fm-red,#e54e3a);outline-offset:2px}

.fm-modal__zag{margin:0 0 8px;font:600 22px/1.25 var(--fm-font);color:var(--fm-ink,#252525)}
.fm-modal__lid{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--fm-text,#555)}
.fm-modal__tovar{margin:0 0 18px;padding:10px 14px;border-radius:10px;
  background:var(--fm-cream,#fbf9f5);border:1px solid var(--fm-border2,#efeae2);
  font-size:13px;line-height:1.4;color:var(--fm-text,#555)}
.fm-modal__tovar b{color:var(--fm-ink,#252525);font-weight:600}

.fm-modal__pole{margin-bottom:14px}
.fm-modal__pole label{display:block;margin-bottom:6px;font-size:13px;font-weight:600;
  color:var(--fm-ink,#252525)}
.fm-modal__pole .fm-modal__nado{color:var(--fm-red-text,#c0392b)}
.fm-modal__pole input,.fm-modal__pole textarea{width:100%;font:400 15px/1.4 var(--fm-font);
  color:var(--fm-ink,#252525);background:#fff;border:1px solid var(--fm-border,#e7e1d9);
  border-radius:10px;padding:12px 14px;transition:border-color .15s}
.fm-modal__pole textarea{min-height:104px;resize:vertical}
.fm-modal__pole input:focus,.fm-modal__pole textarea:focus{outline:none;
  border-color:var(--fm-red,#e54e3a)}
.fm-modal__pole input:focus-visible,.fm-modal__pole textarea:focus-visible{
  outline:2px solid var(--fm-red,#e54e3a);outline-offset:1px}
.fm-modal__pole--dva{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.fm-modal__pole--dva{grid-template-columns:1fr}}

/* ⛔ Ловушка для роботов: человеку не видна, но остаётся в разметке.
   display:none не годится, часть роботов такие поля пропускает. */
.fm-modal__lovushka{position:absolute!important;left:-9999px!important;
  width:1px!important;height:1px!important;opacity:0!important}

.fm-modal__soglasie{display:flex;align-items:flex-start;gap:10px;margin:16px 0 18px;
  font-size:12.5px;line-height:1.45;color:var(--fm-text,#555)}
/* ⛔ Галочка НЕ проставлена заранее: согласие даёт человек, а не мы за него */
.fm-modal__soglasie input{flex:0 0 auto;width:17px;height:17px;margin-top:1px;
  accent-color:var(--fm-red,#e54e3a)}
.fm-modal__soglasie a{color:var(--fm-red-text,#c0392b);text-decoration:underline;
  text-underline-offset:2px}

.fm-modal__knopka{display:flex;align-items:center;justify-content:center;width:100%;
  height:52px;border:0;border-radius:12px;background:var(--fm-red,#e54e3a);color:#fff;
  font:600 14px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.04em;
  cursor:pointer;transition:background .15s}
.fm-modal__knopka:hover{background:var(--fm-red-dark,#c93e2b)}
.fm-modal__knopka:focus-visible{outline:2px solid var(--fm-red,#e54e3a);outline-offset:2px}
.fm-modal__knopka[disabled]{opacity:.6;cursor:default}

.fm-modal__oshibka{margin:0 0 14px;padding:11px 14px;border-radius:10px;
  background:#fdeeeb;border:1px solid #f3c9c1;color:#a3352a;font-size:13px;line-height:1.45}
.fm-modal__oshibka[hidden]{display:none}

/* ---- итог после отправки ---- */
.fm-modal__itog{text-align:center;padding:14px 0 6px}
.fm-modal__itog[hidden]{display:none}
.fm-modal__galka{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#eaf6ee;color:#2f8f4e}
.fm-modal__itogt{margin:0 0 6px;font:600 18px/1.3 var(--fm-font);color:var(--fm-ink,#252525)}
.fm-modal__itogp{margin:0 0 20px;font-size:14px;line-height:1.5;color:var(--fm-text,#555)}

@media (max-width:520px){
  .fm-modal{padding:12px}
  .fm-modal__okno{padding:26px 20px 22px}
  .fm-modal__zag{font-size:19px}
}

/* Кнопка «Задать вопрос» теперь настоящая кнопка, а не ссылка в никуда:
   сбрасываем то, что браузер рисует кнопкам по умолчанию. */
button.fm-askbox__btn{border:0;border-bottom:1px solid var(--fm-red);background:none;
  font-family:inherit;cursor:pointer;padding:0 0 2px}

/* Короткий экран: ужимаем воздух, чтобы кнопка отправки была видна сразу.
   Замер 01.09.2026: при высоте окна браузера 667px содержимое занимало 756px,
   и кнопка уходила под сгиб. Прокрутка внутри окна остаётся как страховка. */
@media (max-height:760px){
  .fm-modal__okno{padding:24px 26px 22px}
  .fm-modal__zag{font-size:19px;margin-bottom:6px}
  .fm-modal__lid{margin-bottom:14px;font-size:13px}
  .fm-modal__tovar{margin-bottom:12px;padding:8px 12px}
  .fm-modal__pole{margin-bottom:10px}
  .fm-modal__pole textarea{min-height:74px}
  .fm-modal__pole input,.fm-modal__pole textarea{padding:10px 12px}
  .fm-modal__soglasie{margin:12px 0 14px}
  .fm-modal__knopka{height:46px}
}

/* ⭐ Подарок ссылкой: три сети и копирование адреса товара в одном ряду */
.fm-modal__seti[hidden]{display:none}
.fm-modal__setiryad{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
/* Окно 500 и кнопки 13px с паддингом 12: «Скопировать ссылку» (155px при 14px)
   не влезало в колонку 191 и рвалось на две строки, ряд разъезжался по высоте */
.fm-modal__set{display:flex;align-items:center;gap:8px;padding:12px 12px;
  border:1px solid var(--fm-border,#e6e1da);border-radius:12px;
  font:600 13px/1.2 var(--fm-font);color:var(--fm-ink,#252525);text-decoration:none;
  background:#fff;transition:border-color .18s,background .18s,transform .18s}
.fm-modal__set:hover{border-color:#cfc7bd;background:var(--fm-surface,#f6f3ee)}
.fm-modal__set:focus-visible{outline:2px solid var(--fm-red,#e54e3a);outline-offset:2px}
.fm-modal__set svg{flex:0 0 auto}
.fm-modal__set--vk{color:#0077ff}
.fm-modal__set--tg{color:#28a0e0}
.fm-modal__set--ok{color:#f2820a}
/* Кнопок четыре (три сети и копирование), ряд ровный. Правило на будущее: нечётная
   последняя тянется на обе колонки, иначе висит сиротой (кадр 02.09.2026) */
.fm-modal__set:last-child:nth-child(odd){grid-column:1/-1}
.fm-modal__set span{color:var(--fm-ink,#252525)}
/* «Скопировать ссылку» стоит в ряду с сетями четвёртой кнопкой (02.09.2026):
   это button, у него свои умолчания ширины и курсора */
.fm-modal__set--kopiya{width:100%;cursor:pointer;text-align:left;color:var(--fm-muted,#6e6e6e)}
.fm-modal__set--kopiya span{white-space:nowrap}
.fm-modal__kopiyaitog{margin:10px 0 0;text-align:center;font-size:13px;color:#2fa15a}
.fm-modal__kopiyaitog[hidden]{display:none}
@media(max-width:420px){.fm-modal__setiryad{grid-template-columns:1fr}}

/* End */


/* Start:/local/templates/floralmile/styles.css?178463907230*/
/* editable content styles */

/* End */


/* Start:/local/templates/floralmile/template_styles.css?178463907241*/
/* per-page styles injected by Bitrix */

/* End */
/* /local/templates/floralmile/assets/css/app.css?178851939393740 */
/* /local/templates/floralmile/assets/css/aspro-match.css?178845676445622 */
/* /local/templates/floralmile/assets/css/korzina.css?178841200212190 */
/* /local/templates/floralmile/assets/css/modalka.css?17883229358681 */
/* /local/templates/floralmile/styles.css?178463907230 */
/* /local/templates/floralmile/template_styles.css?178463907241 */