/* Start:/local/templates/floralmile/components/bitrix/catalog.element/floralmile/style.css?178851914741383*/
/* Floral Mile — детальная товара, премиум-редизайн 2026-08-04 (план Sol).
   Шрифт/цвета наследуются из app.css (Montserrat, Cormorant в --fm-serif). */
.fm-prod{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);column-gap:28px;align-items:start;margin:26px 0 28px;font-size:16px;line-height:1.65;color:#252525}
.fm-prod__main{min-width:0}
.fm-buy{position:sticky;top:24px;align-self:start}
.fm-pagehead--detail{margin-bottom:14px}
/* двойной класс: app.css задаёт .fm-pagehead h1 той же специфичностью и грузится ПОЗЖЕ компонентного css */
.fm-pagehead.fm-pagehead--detail h1{font:600 40px/1.1 Montserrat,Arial,sans-serif;letter-spacing:-0.01em;color:#252525}
.fm-crumbs--detail{margin:0 0 40px}

/* ===== галерея: миниатюры вертикально СЛЕВА, крупное фото ===== */
.fm-gal{border:1px solid #e8e5e1;padding:20px 24px 24px}
.fm-gal__top{display:flex;align-items:center;gap:16px;min-height:48px;margin-bottom:6px}
.fm-gal__stars{display:flex;gap:2px}
.fm-gal__stars svg{width:14px;height:14px;fill:#f0a500}
.fm-gal__score{font-size:13px;font-weight:700;color:#252525}
.fm-gal__art{font-size:13px;color:#888}
.fm-gal__art b{color:var(--fm-ink);font-weight:600}
.fm-gal__icons{margin-left:auto;display:flex;gap:16px}
.fm-gal__icons a{color:#bcbcbc}
.fm-gal__icons a:hover{color:var(--fm-red)}
.fm-gal__icons svg{width:18px;height:18px}
.fm-gal__body{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:20px;align-items:start}
.fm-gal__body--solo{grid-template-columns:1fr}
.fm-gal__main{position:relative;display:flex;align-items:center;justify-content:center;height:700px;overflow:hidden;background:#fff;padding:10px}
/* фото не должно быть выше контейнера (620px) — иначе портретные товары клипались сверху/снизу */
.fm-gal__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in}
/* кнопка «увеличить» на фото */
.fm-gal__zoom{position:absolute;right:12px;bottom:12px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:1px solid #e5dfd8;border-radius:10px;color:#555;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:background .15s,color .15s}
.fm-gal__zoom svg{width:20px;height:20px}
.fm-gal__zoom:hover{background:#fff;color:var(--fm-red)}
/* лайтбокс */
.fmzoom{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(20,18,18,.92);padding:40px}
.fmzoom[hidden]{display:none}
.fmzoom__img{max-width:90vw;max-height:88vh;width:auto;height:auto;object-fit:contain;user-select:none}
.fmzoom__close{position:absolute;top:20px;right:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:0;border-radius:50%;color:#fff;cursor:pointer;transition:background .15s}
.fmzoom__close:hover{background:rgba(255,255,255,.25)}
.fmzoom__close svg{width:22px;height:22px}
.fmzoom__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:0;border-radius:50%;color:#fff;cursor:pointer;transition:background .15s}
.fmzoom__nav:hover{background:rgba(255,255,255,.25)}
.fmzoom__nav svg{width:26px;height:26px}
.fmzoom__prev{left:24px}
.fmzoom__next{right:24px}
.fmzoom__nav[hidden]{display:none}
.fmzoom__counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;letter-spacing:.03em;opacity:.85}
.fmzoom__counter[hidden]{display:none}
/* рейтинг: частичная заливка звёзд под дробный балл */
.fm-rate{position:relative;display:inline-flex;line-height:0;vertical-align:middle}
.fm-rate__bg,.fm-rate__fg{display:inline-flex;gap:2px}
.fm-rate__fg{position:absolute;left:0;top:0;width:var(--fill,100%);overflow:hidden}
.fm-rate svg{width:13px;height:13px;flex:0 0 auto}
.fm-rate__bg svg{fill:#dcd7d1}
.fm-rate__fg svg{fill:#f0a500}
.fm-buy__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.fm-buy__rate{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#9a7d75;text-decoration:none}
.fm-buy__rate:hover{color:var(--fm-red)}
.fm-buy__stars{display:inline-flex;gap:2px}
.fm-buy__stars svg{width:13px;height:13px;fill:#f0a500}
.fm-buy__artmeta{font-size:13px;color:#96837c;white-space:nowrap}
.fm-buy__artmeta b{color:#4a4a4a;font-weight:600}
.fm-gal__thumbs{display:flex;flex-direction:column;gap:12px;max-height:760px;overflow-y:auto;scrollbar-width:none;padding:2px}
.fm-gal__thumbs::-webkit-scrollbar{display:none}
.fm-gal__thumb{flex:0 0 auto;width:72px;height:72px;border:1px solid #f7f0ec;border-radius:2px;padding:3px;cursor:pointer;overflow:hidden;background:#fff}
.fm-gal__thumb img{width:100%;height:100%;object-fit:contain}
.fm-gal__thumb.is-active{border:2px solid var(--fm-red);padding:2px}

/* ===== вкладки и описание ===== */
.fm-tabs{display:flex;gap:0;margin:32px 0 0}
.fm-tab{padding:0 28px;height:52px;font:600 12px/52px var(--fm-font);text-transform:uppercase;letter-spacing:.08em;color:#8a8a8a;border-top:2px solid transparent;cursor:pointer}
.fm-tab:first-child{padding-left:0}
.fm-tab.is-active{color:#252525;border-top-color:var(--fm-red)}
.fm-pane{display:none;padding-top:26px}
.fm-pane.is-active{display:block}
.fm-desc{font-size:16px;line-height:1.75;color:#3c3c3c;max-width:760px}
.fm-desc h2{font-size:24px;color:#252525;margin:0 0 16px;font-weight:600}
.fm-desc p{margin:0 0 15px}
.fm-desc ul{margin:0 0 15px;padding-left:20px}
.fm-desc li{margin:0 0 8px}
/* ⚠️ Предел КРАТЕН строке (28px): при 150px обрыв приходился на середину
   шестой строки и выглядел поломкой. Шесть строк это 168px. */
.fm-collapse__body{max-height:168px;overflow:hidden}
.fm-collapse.is-open .fm-collapse__body{max-height:none}
.fm-collapse__toggle{margin-top:14px;color:var(--fm-red);font:600 12px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.06em;background:none;border:0;cursor:pointer;padding:0}
.fm-collapse__toggle:hover{text-decoration:underline}

/* ===== FAQ: читаемые карточки-аккордеоны ===== */
/* без линии, отступа и заголовка: вопросы идут сразу под вкладками (02.09.2026);
   border-top и padding-top перебивают общий .fm-faq из app.css */
.fm-pane .fm-faq{margin:0;border-top:0;padding-top:0}
.fm-pane .fm-faq__i{border:1px solid #ececec;border-radius:12px;background:#f9f8f8;margin-bottom:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s,background .2s}
.fm-pane .fm-faq__i:last-of-type{margin-bottom:0}
.fm-pane .fm-faq__i:hover{border-color:#e4e4e4}
.fm-pane .fm-faq__i summary{position:relative;list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;padding:16px 60px 16px 18px;font-size:15px;line-height:1.45;font-weight:600;color:#252525}
.fm-pane .fm-faq__i summary::-webkit-details-marker{display:none}
.fm-pane .fm-faq__i summary::marker{content:""}
/* один псевдоэлемент: крест из двух слоёв фона, чётко по центру квадрата */
.fm-pane .fm-faq__i summary:after{content:"";position:absolute;right:16px;top:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background-color:#efefef;background-image:linear-gradient(#8f8f8f,#8f8f8f),linear-gradient(#8f8f8f,#8f8f8f);background-size:12px 1.5px,1.5px 12px;background-position:center;background-repeat:no-repeat;transition:background-color .2s}
.fm-pane .fm-faq__i summary:hover:after{background-color:#e7e7e7}
.fm-pane .fm-faq__i[open]{border-color:#e4e4e4;background:#f9f8f8;box-shadow:0 2px 8px rgba(0,0,0,.05)}
/* ⛔ content:"" обязателен: app.css грузится позже и в открытом состоянии его
   `.fm-faq__i[open] summary::after{content:"−"}` равен нам по специфичности,
   красный текстовый минус ложился поверх серого кружка (кадр Вени 02.09.2026) */
.fm-pane .fm-faq__i[open] summary:after{content:"";background-image:linear-gradient(#8f8f8f,#8f8f8f);background-size:12px 1.5px}
.fm-pane .fm-faq__i summary:hover{color:#252525}
.fm-pane .fm-faq__a{padding:0 60px 18px 18px;font-size:15px;line-height:1.65;color:#555}

/* ===== услуги: 3 карточки ===== */
.fm-services{margin-top:64px}
.fm-services__title{font-size:24px;line-height:1.15;font-weight:600;color:#252525;margin:0 0 18px}
.fm-services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fm-service{display:flex;flex-direction:column;border:1px solid #e3ded8;background:#fff;min-height:340px}
.fm-service:hover{border-color:#f5e8e1}
.fm-service__img{display:block;width:100%;height:220px;overflow:hidden;background:#eef4f8}
.fm-service__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fm-service:hover .fm-service__img img{transform:scale(1.03)}
.fm-service__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.fm-service__name{display:block;font-size:16px;line-height:1.3;color:#252525;font-weight:600}
.fm-service__desc{display:block;font-size:13px;line-height:1.5;color:#777;margin-top:8px}
.fm-service__arrow{margin-top:auto;padding-top:22px;display:flex;justify-content:flex-end;color:var(--fm-red)}
.fm-service__arrow svg{width:24px;height:24px}

/* ===== правая колонка: карточка покупки ===== */
.fm-buy__card{background:#f9f8f8;border:1px solid #ececec;border-radius:2px;padding:28px}
.fm-buy__price{display:flex;align-items:baseline;gap:6px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #e1dbd4;flex-wrap:wrap}
.fm-buy__cur{font-size:28px;line-height:1;font-weight:700;color:#252525}
.fm-buy__unit{font-size:14px;color:#777;font-weight:400}
.fm-buy__old{font-size:15px;color:#999;text-decoration:line-through;margin-left:6px}
.fm-buy__stockrow{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.fm-buy__stock{display:flex;align-items:center;gap:8px;font-size:14px;color:#6f6058;font-weight:600}
.fm-buy__stock .dot{width:8px;height:8px;border-radius:50%;background:#2fa15a}
.fm-buy__cheaper{font-size:13px;color:var(--fm-red);border-bottom:1px dashed var(--fm-red)}
.fm-buy__row{display:grid;grid-template-columns:112px 1fr;column-gap:12px;margin-bottom:10px}
.fm-qty{display:flex;align-items:center;width:100%;border:1px solid #f5e8e1;border-radius:12px;height:52px;background:#fff;overflow:hidden}
.fm-qty button{width:36px;height:100%;border:0;background:none;font-size:18px;color:var(--fm-ink);cursor:pointer;flex:0 0 36px}
.fm-qty button:hover{color:var(--fm-red)}
.fm-qty input{flex:1;min-width:0;width:auto;height:100%;border:0;background:none;text-align:center;font:600 16px var(--fm-font);color:var(--fm-ink);outline:none}
.fm-buy__cart{display:inline-flex;align-items:center;justify-content:center;height:52px;background:var(--fm-red);color:#fff;font:600 14px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.04em;border-radius:12px}
.fm-buy__cart:hover{background:#b92323;color:#fff}
.fm-buy__oneclick{display:flex;align-items:center;justify-content:center;height:48px;width:100%;border:1px solid var(--fm-red);color:var(--fm-red);font:600 13px/1 var(--fm-font);text-transform:uppercase;letter-spacing:.04em;margin-bottom:0;background:transparent;border-radius:12px}
.fm-buy__oneclick:hover{background:var(--fm-red);color:#fff}
.fm-buy__gift{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:#3c3c3c;margin-top:18px;text-decoration:underline;text-underline-offset:3px}
.fm-buy__gift svg{color:#999}
.fm-buy__gift:hover{color:var(--fm-red)}
.fm-buy__note{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#555;line-height:1.5;padding:18px 0 0;border-top:1px solid #e1dbd4;margin-top:18px}
.fm-buy__note b{font-weight:600}
.fm-buy__note svg{flex:0 0 auto;color:#a99;margin-top:1px}

/* характеристики: отдельный блок */
.fm-buy__chars{margin-top:24px;border:1px solid #e8e5e1;padding:22px 22px 12px}
.fm-buy__chars h3{font-size:18px;font-weight:600;color:#252525;margin:0 0 14px}
.fm-buy__char{display:grid;grid-template-columns:118px 1fr;column-gap:16px;font-size:14px;line-height:1.45;padding:10px 0;border-bottom:1px solid #eeeae5}
.fm-buy__char:last-child{border-bottom:0}
.fm-buy__char .k{color:#777;overflow-wrap:anywhere}
.fm-buy__char .v{color:#444;text-align:right}
.fm-buy__disclaimer{font-size:13px;color:#8a8a8a;line-height:1.45;margin-top:14px}
.fm-infobox{border:1px solid var(--fm-border);padding:26px 22px;margin-top:24px;font-size:13px;line-height:1.6;color:#777}
.fm-infobox__logo{display:block;width:120px;height:auto;margin:0 auto 18px;opacity:.9}
.fm-infobox p{margin:0 0 14px}
.fm-infobox a{display:block;color:var(--fm-red);font-size:13px;padding:3px 0}
.fm-infobox a:hover{text-decoration:underline}
.fm-askbox{border:1px solid var(--fm-border);padding:30px 22px 26px;margin-top:20px;text-align:center}
.fm-askbox svg{margin:0 auto 14px}
.fm-askbox__t{font-size:17px;font-weight:600;color:#252525;margin-bottom:8px}
.fm-askbox p{font-size:13px;color:#777;line-height:1.5;margin:0 0 16px}
.fm-askbox__btn{display:inline-block;color:var(--fm-red);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--fm-red);padding-bottom:2px}

/* ===== похожие товары =====
   двойные селекторы: app.css задаёт .fm-related__tab и грузится ПОЗЖЕ */
.fm-prod ~ .fm-related,.fm-related{margin-top:64px}
.fm-related .fm-related__tabs{margin-bottom:22px;border-bottom:0}
.fm-related .fm-related__tab{font-family:var(--fm-serif,Georgia,serif);font-size:32px;line-height:1.1;font-weight:600;color:#252525;border-bottom:0;padding-bottom:0;cursor:default}
/* ⭐⭐ Сжатые вдвое отступы действуют ТОЛЬКО здесь, в блоке шести товаров под
   карточкой товара (просьба Вени 27.08.2026: «у товаров сократи отступы в 2
   раза, текст и картинку»). В списке категории отступы остались прежние: там
   сжимать не просили, и первая версия правки задела весь каталог зря.
   От края карточки до текста получается 6 плюс 9, то есть 15px. */
/* сжатие плиток «похожих» только от 721px: на телефоне плитка как в каталоге (Веня 02.09.2026) */
@media (min-width:721px){
  .fm-related .fm_card{padding:6px 6px 7px}
  .fm-related .fm_card__img{aspect-ratio:auto;height:300px;padding:9px;background:#fff;margin-bottom:10px}
  .fm-related .fm_card__accent{margin:8px 9px 6px}
  .fm-related .fm_card__rate{padding:0 9px;margin-bottom:5px}
  .fm-related .fm_card__title{padding:0 9px;margin-bottom:5px}
  .fm-related .fm_card__stock{padding:0 9px;margin-bottom:6px;margin-top:5px}
  .fm-related .fm_card__stars{margin:0 0 3px}
  .fm-related .fm_card__price{margin-top:4px}
}
.fm-related .fm_card__img img{object-fit:contain}
.fm-related .fm_card:hover .fm_card__img img{transform:scale(1.03)}
/* Нижняя строка и кнопка сжатой плитки только от 721px: на телефоне кнопка красная,
   как в каталоге (Веня 02.09.2026). left/right/bottom у кнопки убраны: они были
   нужны только при position:absolute. Радиус тот же, что у новой кнопки. */
@media (min-width:721px){
  .fm-related .fm_card__bottom{padding:0 9px;min-height:38px}
  .fm-related .fm_card__buy{width:38px;height:38px;padding:0;gap:0;font-size:0;letter-spacing:0;background:#fff;border:1px solid #ececec;color:#999;border-radius:10px;opacity:1;transform:none;pointer-events:auto}
  .fm-related .fm_card__buy svg{width:17px;height:17px}
  .fm-related .fm_card__buy:hover{background:var(--fm-red);border-color:var(--fm-red);color:#fff}
}

/* ===== адаптив ===== */
@media(max-width:1200px){
  .fm-prod{column-gap:20px}
  .fm-pagehead.fm-pagehead--detail h1{font-size:38px;line-height:1.1}
  .fm-gal__main{height:520px}
  .fm-gal__main img{max-width:460px;max-height:460px}
  .fm-gal__thumbs{max-height:520px}
}
@media(max-width:960px){
  .fm-prod{grid-template-columns:1fr;gap:28px}
  .fm-buy{position:static}
  .fm-services__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .fm-services__grid{grid-template-columns:1fr}
  .fm-service{min-height:0}
  .fm-service__img{height:180px}
  .fm-faq{margin-top:44px}
  .fm-services{margin-top:44px}
  /* ⛔ .fm-prod ~ .fm-related выше сильнее одиночного класса, и 44px тут не действовали:
     между блоками стояло 64 плюс 48 (и 90 у последнего) нижнего поля из app.css, итого
     112 и 122px (Веня 02.09.2026: «слишком большой отступ сверху»). Ровно 44 везде. */
  .fm-prod ~ .fm-related,.fm-related{margin-top:22px}
  .fm-related.fm-related--wide,.fm-related.fm-related--wide:last-of-type{padding-bottom:0}
  .fm-related ~ .fm-container > .fm-viewed{margin-top:44px}
}
@media(max-width:767px){
  .fm-pagehead.fm-pagehead--detail h1{font-size:30px}
  .fm-prod{font-size:15px;line-height:1.6}
  .fm-gal{padding:12px}
  /* ⚠️ align-items:start из базового правила на телефоне ужимал рамку фото по ширине самой
     картинки: у вертикального снимка 327 на 1200 рамка выходила 101px вместо 352 и вставала
     у левого края. Колонка растягивает блоки на всю ширину, картинка центрируется сама
     (Веня 03.09.2026: рамка фото ужималась по ширине картинки). */
  .fm-gal__body{display:flex;flex-direction:column;gap:12px;align-items:stretch}
  .fm-gal__main{width:100%}
  .fm-gal__main{height:360px;padding:0 4px}
  .fm-gal__main img{max-width:100%;max-height:340px}
  .fm-gal__thumbs{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;order:2;width:100%;max-width:100%;min-width:0}
  .fm-gal__thumb{width:60px;height:60px}
  .fm-tabs{overflow-x:auto;scrollbar-width:none}
  .fm-tabs::-webkit-scrollbar{display:none}
  .fm-tab{white-space:nowrap;padding:0 16px}
  .fm-buy__card{padding:20px 16px}
  .fm-buy__cur{font-size:26px}
  .fm-buy__row{grid-template-columns:100px 1fr}
  .fm-qty,.fm-buy__cart{height:50px}
  .fm-buy__oneclick{height:50px}
  .fmzoom{padding:14px}
  .fmzoom__nav{width:42px;height:42px}
  .fmzoom__prev{left:8px}
  .fmzoom__next{right:8px}
  .fmzoom__close{top:10px;right:12px}
}

/* ==========================================================================
   Телефон: порядок блоков карточки по заказу Вени 31.08.2026.
   Фото, цена с характеристиками, описание, вкладки, услуги каруселью.
   ⚠️ Фото и описание лежат внутри .fm-prod__main, а цена в соседнем .fm-buy,
   и вклинить цену между ними обычным order нельзя: order переставляет только
   соседей. Поэтому .fm-prod__main на телефоне отдаёт своих детей в общий
   поток через display:contents, и все блоки становятся соседями.
   ========================================================================== */
@media(max-width:700px){
  /* ⛔⭐⭐⭐ align-items:stretch обязателен явно. У .fm-prod от прежней сетки
     осталось align-items:start, и во flex-КОЛОНКЕ это правило задаёт уже не
     вертикаль, а ШИРИНУ: дети получают размер по содержимому. Лента вкладок
     раздулась до 628px при экране 390 и утащила документ вбок.
     min-width:0 тут бессилен, он про сжатие, а не про растягивание. */
  .fm-prod{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .fm-prod__main{display:contents}
  /* ⛔⭐⭐⭐ Без min-width:0 flex-элемент не сжимается меньше своего содержимого.
     Лента вкладок с overflow-x:auto растянулась до 628px и утащила за собой
     весь документ: страница поехала вбок на 238px. Поймано замером 31.08.2026,
     на кадре это не видно вовсе, потому что кадр снимается по вьюпорту. */
  /* ⚠️ И ОБЯЗАТЕЛЬНО оба уровня: display:contents убирает коробку из раскладки,
     но НЕ из дерева. Дети .fm-prod__main остаются его детьми для селекторов,
     поэтому `.fm-prod > *` до них не достаёт, хотя во flex-потоке они соседи. */
  .fm-prod > *,.fm-prod__main > *{min-width:0}
  .fm-gal{order:1}
  .fm-buy{order:2}
  .fm-opisanie{order:3}
  .fm-tabs{order:4}
  .fm-pane{order:5}
  .fm-services{order:6}

  /* ⭐ Отступ текста описания и заголовков 16px от края экрана.
     Контейнер даёт 6px, здесь добавляются недостающие 10px. */
  .fm-opisanie__h,.fm-opisanie .fm-desc,.fm-opisanie p,
  .fm-tabs,.fm-pane,.fm-services__title,.fm-buy__disclaimer{
    padding-left:10px;padding-right:10px}
  /* у ленты вкладок поле уходит внутрь прокрутки, иначе первая вкладка
     прилипает к краю при отмотке */
  .fm-tabs{margin-left:-6px;margin-right:-6px;padding-left:16px;padding-right:16px;
    /* правый край растворяется: обрыв «ВОПРО…» читается как поломка, а угасание
       как продолжение. Полосы прокрутки на телефоне нет, подсказать нечем.
       Замечание проверяющего 31.08.2026 принято. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}

  /* ⭐ Свёрнутое описание обрывалось посреди строки: высота 150px не кратна
     строке 28px, и снизу торчала половина букв. Пять строк это ровно 140px.
     Плюс угасание последней строки, чтобы обрыв читался как продолжение. */
  /* класс is-open стоит на обёртке .fm-collapse, а не на теле: прежний селектор держал 140px и в раскрытом виде (02.09.2026) */
  .fm-opisanie .fm-collapse:not(.is-open) .fm-collapse__body{max-height:140px;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}

  /* ⭐ «И все заголовки»: на карточке к 16px приводятся ВСЕ заголовки, а не
     только описание. H1 и заголовки полос похожих товаров шли по общему
     правилу с полем 12px и 6px, здесь их поле доводится до 16px.
     ⚠️ Файл стилей компонента грузится только на карточке товара, поэтому
     общие классы правятся здесь без риска задеть другие страницы. */
  /* ⚠️ Через `.fm-main` не ради красоты: aspro-match.css грузится в склейке
     ПОЗЖЕ этого файла и своим `.fm-pagehead{padding-left:6px}` перебивал
     правило с равной специфичностью. Родитель в селекторе решает спор. */
  .fm-main .fm-pagehead{padding-left:10px;padding-right:10px}
  /* ⛔ Поле даём ТОЛЬКО обёртке: на .fm-related__tabs и .fm-related__tab сразу
     оно складывается, и заголовок уезжает на 26px вместо 16. */
  .fm-related__tabs{padding-left:10px;padding-right:10px}

  .fm-opisanie{margin:0 0 22px}
  .fm-opisanie__h{font:400 27px/1.2 'Oswald',var(--fm-font);margin:0 0 12px;color:var(--fm-ink)}

  /* ⭐ Услуги каруселью, как на главной */
  .fm-services__grid{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-services__grid::-webkit-scrollbar{display:none}
  .fm-service{flex:0 0 78%;scroll-snap-align:start}
}

/* На десктопе вкладка «Бренд» пуста: сам блок уехал в правую колонку.
   Прячем ярлык, иначе он открывает пустоту. Вкладка «Вопросы» остаётся:
   в ней живут частые вопросы, уезжает только приглашение спросить. */
@media(min-width:701px){
  .fm-tab[data-pane="brand"]{display:none}
}

/* ==========================================================================
   Правый блок карточки: три правки Вени 31.08.2026 по кадру десктопа.
   ========================================================================== */

/* 1. Заливка рейтинга считается по звёздам, а не процентом от полосы.
      Полоса шире суммы звёзд на зазоры, и процент от неё занижал долю:
      при 4,4 в пятой звезде было закрашено 33 процента. */
.fm-rate{--zv:13px;--zaz:2px}
.fm-rate__fg{width:calc(var(--celyh, 5) * (var(--zv) + var(--zaz)) + var(--drob, 0) * var(--zv))}

/* 2. Зазоры между карточками правой колонки в 2,5 раза меньше: было 24, 14,
      24 и 20px, стало 10, 6, 10 и 8px. */
.fm-buy__chars{margin-top:10px}
.fm-buy__disclaimer{margin-top:6px}
.fm-buy .fm-infobox{margin-top:10px}
.fm-buy .fm-askbox{margin-top:8px}

/* 3. Блок бренда: логотип крупнее, описание настоящее, кнопка вместо двух
      ссылок подряд. */
.fm-infobox__logo{max-height:104px;width:auto;max-width:78%;object-fit:contain}
.fm-infobox p{margin:14px 0 0}
/* Селектор с родителем и тегом обязателен. Рядом живёт правило
   `.fm-infobox a{display:block;color:красный}` (класс плюс ТЕГ, вес выше
   одиночного класса), и оно перебивало кнопку: она растягивалась во всю
   ширину, а подпись становилась красной на красном фоне и пропадала.
   Порядок в файле тут не помогает, решает специфичность. */
.fm-infobox a.fm-infobox__btn{display:inline-flex;align-items:center;justify-content:center;
  margin-top:16px;height:40px;padding:0 26px;border-radius:20px;
  background:var(--fm-red);color:#fff;font:600 12.5px/1 var(--fm-font);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:background .18s}
.fm-infobox a.fm-infobox__btn:hover{background:var(--fm-red-hover,#c93e2b);color:#fff}
.fm-infobox a.fm-infobox__btn:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}

/* Метка «Под заказ» на карточке товара: цена договорная, товар при этом есть.
   Точка янтарная, чтобы отличалась и от зелёной «Много», и от красной «Нет». */
/* «Нет в наличии»: тот же красный, что в плитке каталога (шаг 69, 04.09.2026).
   Прежде правила не было вовсе, и точка оставалась зелёной, как у «Много». */
.fm-buy__stock--out{color:#a8493d}
.fm-buy__stock--out .dot{background:#c2554a}
.fm-buy__stock--zakaz{color:#8a6a2f}
.fm-buy__stock--zakaz .dot{background:#d99a2b}

/* Строка покупки без счётчика: одна колонка на всю ширину. */
.fm-buy__row--odna{grid-template-columns:1fr}

/* ==========================================================================
   Вернувшиеся кнопки правого блока и «поделиться» (заказ Вени 01.09.2026).
   ========================================================================== */

/* ⛔ Прежде это были ссылки, теперь настоящие кнопки: браузер рисует кнопкам
      свою рамку, фон и шрифт, их надо снять явно. */
button.fm-buy__oneclick,button.fm-buy__gift{font-family:inherit;cursor:pointer}
button.fm-buy__oneclick{margin-top:10px}
button.fm-buy__gift{border:0;background:none;padding:0;text-decoration:underline;
  text-underline-offset:3px}
.fm-buy__oneclick:focus-visible,.fm-buy__gift:focus-visible{
  outline:2px solid var(--fm-red);outline-offset:2px}

/* «Поделиться»: свои значки, чужих скриптов на странице нет */
/* ⛔ Префикс .fm-buy обязателен: app.css грузится ПОЗЖЕ и держит свой .fm-share
   (выпадашка блога, display:inline-flex) той же специфичности. Без префикса блок
   сжимался до 211px из 394, линия сверху шла только под значками (ревизор 02.09.2026) */
.fm-buy .fm-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--fm-border2,#efeae2)}
.fm-share__t{font-size:13px;color:var(--fm-muted,#6e6e6e)}
.fm-share__seti{display:flex;gap:8px}
.fm-share__s{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;transition:filter .15s,transform .15s}
/* ⭐ Кнопки сразу фирменного цвета сетей, не серые до наведения (слово Вени
   02.09.2026 «сделай активного цвета»). Наведение чуть затемняет. */
.fm-share__s--vk{background:#0077ff}
.fm-share__s--tg{background:#29a0da}
.fm-share__s--ok{background:#ee8208}
.fm-share__s:hover{filter:brightness(.9)}
.fm-share__s:focus-visible{outline:2px solid var(--fm-red);outline-offset:2px}

@media(max-width:700px){
  .fm-share{padding-left:10px;padding-right:10px}
}

/* ⭐ Растворение края у свёрнутого описания на ВСЕХ ширинах. Прежде маска
   стояла только в мобильном блоке, и на десктопе текст обрывался посреди
   фразы резкой линией: видно на кадре 01.09.2026.
   ⛔ Маску снимаем в развёрнутом виде, иначе последняя строка выцветает. */
.fm-opisanie .fm-collapse:not(.is-open) .fm-collapse__body{
  /* 16px это нижняя половина строки: при 34px гасла вся последняя строка */
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent)}
.fm-opisanie .fm-collapse.is-open .fm-collapse__body{
  -webkit-mask-image:none;mask-image:none}

/* Кнопка не нужна, если разворачивать нечего: скрипт ставит этот класс.
   ⛔ Селектор ДЛИННЕЕ правила выше намеренно: у короткого списка два класса
      против трёх с псевдоклассом, и маска не снималась. Правим точностью
      селектора, а не !important. */
.fm-collapse--celikom .fm-collapse__toggle{display:none}
.fm-opisanie .fm-collapse.fm-collapse--celikom .fm-collapse__body{max-height:none;
  -webkit-mask-image:none;mask-image:none}

/* ⭐ Наличие стоит В ОДНОЙ строке с ценой, справа от неё (просьба Вени
   01.09.2026). Граница и отступ переехали с цены на общую строку, иначе
   черта делила бы строку пополам. */
.fm-buy__priceline{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px 20px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid #e1dbd4}
.fm-buy__priceline .fm-buy__price{padding-bottom:0;margin-bottom:0;border-bottom:0}
.fm-buy__priceline .fm-buy__stockrow{margin-bottom:0}

/* ⛔ Колонка стала уже, и подпись «4,4 · отзывы магазина» рвалась на две
   строки посреди слова. Артикул при нехватке места уезжает на свою строку
   целиком и остаётся справа, подпись отзывов не рвётся. */
.fm-buy__meta{flex-wrap:wrap}
.fm-buy__rate{white-space:nowrap}
.fm-buy__artmeta{margin-left:auto}

/* ==========================================================================
   Телефон, 02.09.2026, слово Вени: ровные отступы между блоками, «Поделиться»
   под описанием справа (значки, потом слово), вкладки единым целым с описанием.
   ⚠️ Только до 700px, десктоп и планшет не трогаются.
   ========================================================================== */
@media(max-width:700px){
  /* .fm-buy отдаёт детей в общий поток, как .fm-prod__main: иначе «Поделиться»
     не поставить после описания, оно сидит в соседней ветке дерева */
  .fm-buy{display:contents}
  .fm-buy > *{min-width:0}
  .fm-buy__card,.fm-buy__chars,.fm-buy__disclaimer{order:2}
  .fm-buy .fm-share{order:3}                /* .fm-opisanie тоже order:3 и раньше в DOM: описание, потом «Поделиться» */
  .fm-tabsw{order:4}

  /* ритм между блоками */
  .fm-gal{margin-bottom:12px}
  .fm-buy__chars{margin-top:12px}
  .fm-buy__disclaimer{margin-top:10px;margin-bottom:24px}

  /* одна карточка: описание, «Поделиться», полоса вкладок, панель */
  .fm-opisanie{margin:0;border:1px solid #e8e5e1;border-bottom:0;padding:20px 16px 0}
  .fm-opisanie__h,.fm-opisanie .fm-desc,.fm-opisanie p{padding-left:0;padding-right:0}
  .fm-buy .fm-share{margin:0;padding:14px 16px 16px;border:1px solid #e8e5e1;border-top:0;border-bottom:0;
    flex-direction:row-reverse;justify-content:flex-start;gap:10px;flex-wrap:nowrap}
  .fm-tabsw{position:relative;border:1px solid #e8e5e1;border-bottom:0;background:#faf9f8}
  .fm-tabsw::after{content:"";position:absolute;top:1px;bottom:0;right:0;width:28px;
    background:linear-gradient(90deg,rgba(250,249,248,0),#faf9f8);pointer-events:none}
  .fm-tabs{margin:0;padding:0 16px;-webkit-mask-image:none;mask-image:none;
    border-top:1px solid #e8e5e1;border-bottom:1px solid #e8e5e1}
  .fm-tab{height:46px;line-height:46px;border-top:0}
  .fm-tab.is-active{border-top:0;box-shadow:inset 0 -2px 0 var(--fm-red)}
  .fm-pane{border:1px solid #e8e5e1;border-top:0;padding:20px 16px 20px}
}

/* ==========================================================================
   Телефон, кадры Вени 02.09.2026: после заголовков везде 16px (было 12, 18, 21);
   карточки услуг без пустоты внизу: по своей высоте, стрелка сразу под текстом.
   ========================================================================== */
@media(max-width:700px){
  .fm-opisanie__h{margin-bottom:16px}
  .fm-services__title{margin-bottom:16px}
  .fm-related .fm-related__tabs{margin-bottom:16px}
  /* шаг 50: услуги одной высоты */
  .fm-services__grid{align-items:stretch}
  .fm-service__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;margin-top:6px}
  .fm-service__body{padding:14px 16px 14px}
  /* шаг 51: стрелка у низа карточки, иначе под ней висит пустой хвост */
  .fm-service__arrow{margin-top:auto;padding-top:10px}
}

/* Телефон: строка «рейтинг · отзывы магазина» и «Артикул: …» не влезали в одну полосу
   (227 + 10 + 108..135 > 344) и падали в две строки (Веня 02.09.2026). Слово «магазина»
   спрятано: пара помещается и с самым длинным артикулом. */
/* Обход 02.09.2026: строка падала в две и на десктопе: ширина строки 212 на 1024, 266 на 1200,
   336 на 1440 (колонка покупки узкая), а полный текст 232 плюс артикул 108..170. Ступени:
   «магазина» спрятано везде; от 961 до 1300 только звёзды и число, поле карточки 16 вместо 28;
   от 961 до 1500 без подписи «Артикул:» (артикул есть в таблице характеристик рядом);
   на телефоне кегль 12, чтобы влез и самый длинный артикул в 14 знаков. */
.fm-buy__ratedop{display:none}
@media (min-width:961px) and (max-width:1300px){
  .fm-buy__ratetxt{display:none}
  .fm-buy__card{padding-left:16px;padding-right:16px}
}
@media (min-width:961px) and (max-width:1500px){
  .fm-buy__artl{display:none}
}
@media(max-width:700px){
  .fm-buy__rate,.fm-buy__artmeta{font-size:12px}
}

/* Кнопка «Товары в наличии» в карточке товара, которого нет на складе (шаг 69).
   Тот же размер, что у «В корзину», но спокойнее по цвету: это не покупка,
   а переход к тому, что купить можно. */
.fm-buy__cart--knalichiyu{
	background:#fff;
	color:var(--fm-red);
	border:1px solid var(--fm-red);
}
.fm-buy__cart--knalichiyu:hover{
	background:var(--fm-red);
	color:#fff;
}

/* Полоса наличия у товара без цены: цены слева нет, поэтому пометка идёт
   в начало строки, а не прижимается к правому краю (Веня 04.09.2026). */
.fm-buy__priceline--bezceny{justify-content:flex-start}
.fm-buy__priceline--bezceny .fm-buy__price{display:none}

/* Свёрнутый блок у товара, которого нет в наличии (шаг 70, 04.09.2026):
   под кнопкой прячется описание, вкладки и услуги. Видна только верхушка
   описания, дальше сразу идут товары, которые можно купить.
   Затухание снизу показывает, что текст продолжается. */
.fm-collapse--vsyo{position:relative;margin-bottom:26px}
.fm-collapse--vsyo:not(.is-open) > .fm-collapse__body{
	max-height:230px;
	overflow:hidden;
	-webkit-mask-image:linear-gradient(#000 60%,rgba(0,0,0,.15));
	mask-image:linear-gradient(#000 60%,rgba(0,0,0,.15));
}
.fm-collapse--vsyo.is-open > .fm-collapse__body{max-height:none;-webkit-mask-image:none;mask-image:none}
/* своя кнопка описания внутри общего блока не показывается */
.fm-collapse--vsyo .fm-opisanie .fm-collapse__toggle{display:none}
@media (max-width:767px){
	.fm-collapse--vsyo:not(.is-open) > .fm-collapse__body{max-height:190px}
}

/* End */


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

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

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

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

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

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

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

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

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

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

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

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

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

/* Метка наличия не рвётся пополам: «Под заказ» вместе с артикулом не влезал
   в строку узкой карточки и печатался как «Под / заказ». Переносится теперь
   артикул, а не метка. */
.fm_card__stockt{white-space:nowrap;flex:0 0 auto}
/* Артикул ВСЕГДА в одной строке с остатком, переноса нет (Веня 02.09.2026):
   он прижат вправо, при нехватке места режется многоточием, на узкой плитке
   (контейнер уже 246px, две колонки телефона) без подписи «Арт:» и мельче. */
.fm_card__stock{flex-wrap:nowrap;justify-content:flex-start}
.fm_card__art{margin-left:auto;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
@container (max-width:245px){
  .fm_card__artl{display:none}
  .fm_card__art{font-size:11px;letter-spacing:0}
}
/* В узкой плитке (пять в ряд в блоге при 1040px: контейнер 183) цена 15px: с 17px
   «199 900 ₽/шт» вместе с кнопкой не влезала в строку и уезжала выше соседей (кадр 02.09.2026). */
/* ⚠️ Одиночный .fm_card__cur проигрывал aspro-match.css (грузится позже, 17px): двойной селектор
   решает спор при любом порядке. Только от 701px: на телефоне цена 16px по ширине экрана. */
@media (min-width:701px){
  /* ⚠️ Порог 190, а не 245: контейнер это content-box плитки без её боковых полей 12px.
     Замер на боевом: блог 183 на 1440 и 177 на 1366 (ловится), каталог 198 на 1280 и 238 на
     1440, услуги и главная 251 (цена там остаётся 17px). */
  @container (max-width:190px){.fm_catalog_grid .fm_card__cur{font-size:15px}}
}

/* Цена и кнопка всегда в одной строке (Веня 02.09.2026, кадр с телефона: «285 800 ₽/шт»
   заняла строку, корзина упала на следующую). Строка больше не переносится, цена ужимается
   ступенями по ширине контейнера. Замер: контейнер 186px на 390, 171 на 360 (рвалось:
   109 + 8 + 38 против 155), 138 на 320; самая широкая цена каталога «285 800 ₽/шт» 109px при 17px.
   Двойной селектор перебивает aspro-match.css (17px, грузится позже). */
.fm_card__bottom{flex-wrap:nowrap}
.fm_card__price{flex:0 1 auto;min-width:0}
.fm_card__buy{flex:0 0 auto}
@container (max-width:200px){
  .fm_card__price .fm_card__cur{font-size:15px}
  .fm_card__price .fm_card__unit,.fm_card__price .fm_card__old{font-size:12px}
}
@container (max-width:150px){
  .fm_card__price .fm_card__cur{font-size:14px}
  .fm_card__price .fm_card__unit{display:none}
  .fm_card__empty{font-size:11px}
}

/* Разделитель перед товарами «нет в наличии» (шаг 68, 04.09.2026).
   Занимает всю ширину сетки, поэтому grid-column: 1 / -1. */
.fm_nonal_razdel{
	grid-column:1 / -1;
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:4px 12px;
	margin:26px 0 6px;
	padding-top:18px;
	border-top:1px solid #e6e0d9;
}
.fm_nonal_razdel__imya{
	font:600 18px/1.2 inherit;
	color:#3d3733;
}
.fm_nonal_razdel__nota{
	font:400 14px/1.35 inherit;
	color:#8d857e;
}
@media (max-width:767px){
	.fm_nonal_razdel{margin:18px 0 4px;padding-top:14px}
	.fm_nonal_razdel__imya{font-size:16px}
	.fm_nonal_razdel__nota{font-size:13px}
}

/* End */
/* /local/templates/floralmile/components/bitrix/catalog.element/floralmile/style.css?178851914741383 */
/* /local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178851658115404 */