/* Start:/local/templates/floralmile/assets/css/brands.css?178613670817945*/
/* Раздел «Бренды»: список и страница бренда.
   Отдельный файл, чтобы не трогать общий app.css. Все правила внутри .fm-brands или .fm-brandpage.
   Правило раздела: один шрифт на всё, курсив не используем нигде. */

/* Список брендов идёт без левой колонки: там нечего показывать, кроме промо.
   Двойной класс нужен, потому что .fm-catalog из aspro-match.css грузится позже и при равной
   специфичности выигрывает, схлопывая контент в колонку 300px. */
.fm-catalog.fm-catalog--full{grid-template-columns:minmax(0,1fr);gap:0}
.fm-catalog.fm-catalog--full > .fm-content{min-width:0}

/* ---------- шапка раздела ---------- */
/* Рассказ о магазине стоит ПОД плитками: сверху человек ищет марку, читает уже потом.
   Одна общая карточка в еле заметной рамке: слева текст с воздухом, справа кадр
   выставки во всю половину, без своей рамки и без зазора. */
.fm-brands .fm-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:stretch;margin:56px 0 0;background:#fbfaf8;
  border:1px solid #ededea;border-radius:14px;overflow:hidden}
.fm-brands .fm-about__text{padding:46px 48px}
.fm-brands .fm-about__kicker{display:block;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#c0392b}
.fm-brands .fm-about__title{font-size:27px;font-weight:400;line-height:1.2;color:#252525;
  margin:14px 0 0;padding:0 0 18px;border-bottom:1px solid #e9e6e1}
.fm-brands .fm-about__text p{margin:14px 0 0;font-size:15px;line-height:1.68;color:#6f6f6f}
.fm-brands .fm-about__lead{font-size:16.5px;line-height:1.62;color:#3f3f3f;margin-top:18px}
.fm-brands .fm-about__media{position:relative;min-height:290px}
.fm-brands .fm-about__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Приписка со счётчиком в конце хлебных крошек */
.fm-crumbs__note{color:#9b9b9b}
.fm-crumbs__note::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;
  background:#c9c9c9;margin:0 9px 3px 3px}

/* ---------- алфавит ---------- */
.fm-brands__tools{display:flex;flex-direction:column;gap:14px;margin:0 0 26px}

.fm-brands__abc{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fm-brands__abc-sep{width:1px;height:22px;background:#e2ecf1;margin:0 6px}
.fm-abc{min-width:34px;height:34px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #e2ecf1;border-radius:6px;background:#fff;color:#3d4a50;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-transform:uppercase}
.fm-abc:hover{border-color:#15475F;color:#15475F}
.fm-abc.is-active{background:#E54E3A;border-color:#E54E3A;color:#fff}
.fm-abc:disabled{color:#cfd8dc;border-color:#eef4f7;cursor:default;background:#fbfdfe}
.fm-abc:focus-visible{outline:2px solid #15475F;outline-offset:2px}

/* ---------- сетка брендов ----------
   Флекс, а не грид: неполный последний ряд встаёт ПО ЦЕНТРУ, а не липнет влево.
   Рост карточки ограничен, иначе на широком экране остаток ряда её раздувает. */
.fm-brands .fm-brandgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0}
.fm-brands .fm-btile{flex:1 1 262px;max-width:320px}
.fm-brands .fm-btile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
  padding:18px 14px 20px;border:1px solid #eef4f7;border-radius:10px;background:#fff;text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.fm-brands .fm-btile:hover{border-color:#dbe8ef;box-shadow:0 6px 22px rgba(21,71,95,.08);transform:translateY(-2px);background:#fff}
.fm-brands .fm-btile:focus-visible{outline:2px solid #15475F;outline-offset:2px}
.fm-brands .fm-btile__logo{display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:5/3;height:auto;margin:0 0 14px}
.fm-brands .fm-btile__logo img{max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.fm-brands .fm-btile:hover .fm-btile__logo img{transform:scale(1.04)}
.fm-brands .fm-btile__name{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#3d4a50;text-align:center;font-weight:600}
.fm-brands .fm-btile:hover .fm-btile__name{color:#E54E3A}
.fm-brands .fm-btile__cnt{margin-top:6px;font-size:12px;color:#9aa7ad}
.fm-brands .fm-btile__noimg{font-size:20px;font-weight:600;color:#c8d3d9;text-align:center;padding:0 8px;line-height:1.3}

.fm-brands__empty{display:none;padding:34px 0;color:#6b767c;font-size:15px}
.fm-brands.is-empty .fm-brands__empty{display:block}
.fm-brands.is-empty .fm-brandgrid{display:none}

@media (max-width:1100px){.fm-brands .fm-btile{flex-basis:200px;max-width:262px}}
@media (max-width:860px){
  .fm-brands .fm-about{grid-template-columns:minmax(0,1fr)}
  .fm-brands .fm-about__text{padding:28px 22px}
  .fm-brands .fm-about__title{font-size:23px}
  .fm-brands .fm-about__media{position:relative;min-height:0;aspect-ratio:16/10}
}
@media (max-width:600px){
  .fm-brands .fm-brandgrid{gap:10px}
  .fm-brands .fm-btile{flex:1 1 calc(50% - 5px);max-width:none}
  .fm-brands .fm-btile{padding:14px 10px 16px}
  .fm-brands .fm-btile__name{font-size:12px}
}

/* =========================================================================
   СТРАНИЦА БРЕНДА
   Раскладка на именованных областях: слева панель разделов на всю высоту,
   справа сверху шапка марки, под ней товары. На узких экранах порядок
   меняется на «шапка → разделы → товары», для этого и нужны области.
   ========================================================================= */
.fm-brandpage, .fm-brandpage h1, .fm-brandpage h2, .fm-brandpage h3,
.fm-brands, .fm-brands h1, .fm-brands h2{font-family:var(--fm-font, "Montserrat", system-ui, sans-serif);font-style:normal}
.fm-brandpage em, .fm-brandpage i, .fm-brands em, .fm-brands i{font-style:normal}

/* Панель слева и правая часть это ДВЕ колонки в ОДНОЙ строке.
   Раньше панель занимала две строки сетки, и когда она оказывалась выше содержимого
   (страница отбора с 8 товарами), браузер раздавал её лишнюю высоту по строкам —
   строка шапки распухала на 76px и под описанием зияла дыра. В одной строке этого нет. */
.fm-catalog.fm-brandpage{grid-template-columns:300px minmax(0,1fr);gap:0 32px;align-items:start}
.fm-brandpage .fm-brandside{display:block;position:relative;align-self:stretch;min-width:0}
.fm-brandpage .fm-brandmain{min-width:0}
.fm-brandpage .fm-goods{min-width:0;scroll-margin-top:16px}
/* у бренда без разделов панели нет: колонка не нужна */
.fm-catalog.fm-brandpage--nosec{grid-template-columns:minmax(0,1fr)}

/* ---------- шапка марки: без коробки, описание одной колонкой ---------- */
.fm-brandpage .fm-brandhead{display:grid;grid-template-columns:262px minmax(0,1fr);gap:30px;
  align-items:start;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid #ececec}
.fm-brandhead__logo{display:block}
.fm-brandhead__logo img{display:flex;width:100%;aspect-ratio:5/3;object-fit:contain;
  padding:10px 14px;background:#fff;border:1px solid #eef1f2;border-radius:10px}
.fm-brandhead__country{display:block;margin:8px 0 0;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#9aa0a3;text-align:center}
.fm-brandhead__col{min-width:0}
.fm-brandhead__text{display:block;position:relative}
/* Подрезаем описание по высоте логотипа: длинный текст съедает лаконичность страницы.
   Класс вешает скрипт, без него текст виден целиком. */
.fm-brandhead__text.is-clipped{overflow:hidden}
.fm-brandhead__text.is-clipped::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:38px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.96) 38%,#fff 70%)}
/* отступ тот же, что у строки страны под логотипом: кнопка встаёт с ней вровень */
.fm-brandhead__btn{margin:8px 0 0;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13px;color:#c0392b;border-bottom:1px dashed rgba(192,57,43,.42)}
.fm-brandhead__btn:hover{color:#a02c1f;border-bottom-color:#a02c1f}
.fm-brandhead__btn:focus-visible{outline:2px solid #15475F;outline-offset:3px}
.fm-brandhead__lead{font-size:15.5px;line-height:1.62;color:#333}
.fm-brandhead__more{font-size:15px;line-height:1.62;color:#6b7276;margin-top:8px}
.fm-brandhead__lead p, .fm-brandhead__more p{margin:0 0 8px}
.fm-brandhead__lead p:last-child, .fm-brandhead__more p:last-child{margin-bottom:0}
.fm-brandhead__lead b, .fm-brandhead__more b{color:#252525;font-weight:600}

/* ---------- панель разделов слева ----------
   Заголовка над панелью нет: карточки и так читаются как список разделов,
   а подпись съедала строку. Название раздела для незрячих даёт aria-label у nav. */
.fm-bsecs{display:block}

/* Разделы бренда идут почти белым в тёплой рамке, а коралловый оставлен «Всем товарам»:
   так видно, что это разные по смыслу кнопки, а не один ряд. Цвет подобран Веней в панели. */
.fm-bsec{position:relative;padding:9px 12px 10px;border-radius:10px;
  background:#f9f8f8;border:1px solid #d3ccc3;transition:background .16s,border-color .16s,box-shadow .16s}
.fm-bsec + .fm-bsec{margin-top:8px}
.fm-bsec:hover{background:#f1eeea;border-color:#c6bdb1;box-shadow:0 4px 14px rgba(90,78,64,.14)}
/* «Все товары» на тон темнее обычного раздела, тем же тёплым серым: отличается весом,
   а не цветом, поэтому не спорит с красным выделением выбранного раздела. */
.fm-bsec--all{background:#f1eeea;border-color:#c6bdb1}
.fm-bsec--all:hover{background:#e7e2db;border-color:#b9afa1;box-shadow:0 4px 14px rgba(90,78,64,.14)}
.fm-bsec__go{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
/* растянутая область клика: весь блок ведёт на отбор по разделу */
.fm-bsec__go::after{content:"";position:absolute;inset:0;border-radius:10px}
.fm-bsec__pic{flex:0 0 46px;width:46px;height:46px;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid rgba(60,50,40,.12);display:flex;align-items:center;justify-content:center;color:var(--fm-red,#e54e3a)}
.fm-bsec--all .fm-bsec__pic{border-color:rgba(60,50,40,.14)}
.fm-bsec__pic img{width:100%;height:100%;object-fit:cover;display:block}
.fm-bsec__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fm-bsec__name{font-size:13.5px;font-weight:600;line-height:1.3;color:#2b2b2b}
/* серый счётчика затемнён: на почти белом прежний #7c746a давал 4.4 при норме 4.5 */
.fm-bsec__meta{font-size:12px;line-height:1.3;color:#6f675d}
.fm-bsec--all .fm-bsec__meta{color:#6f675d}
.fm-bsec__cat{position:relative;z-index:2;display:inline-block;margin:7px 0 0 57px;font-size:12px;
  line-height:1.3;color:#c0392b;text-decoration:none;border-bottom:1px dashed rgba(192,57,43,.42)}
.fm-bsec__cat:hover{color:#a02c1f;border-bottom-color:#a02c1f}
.fm-bsec__go:focus-visible, .fm-bsec__cat:focus-visible{outline:2px solid #15475F;outline-offset:3px}

.fm-bsec.is-active{background:var(--fm-red,#e54e3a);border-color:var(--fm-red,#e54e3a);
  box-shadow:0 6px 18px rgba(229,78,58,.24)}
.fm-bsec.is-active:hover{background:#d9432f;border-color:#d9432f}
.fm-bsec.is-active .fm-bsec__name{color:#fff}
.fm-bsec.is-active .fm-bsec__meta{color:rgba(255,255,255,.82)}
.fm-bsec.is-active .fm-bsec__pic{border-color:rgba(255,255,255,.55)}
.fm-bsec.is-active .fm-bsec__cat{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.fm-bsec.is-active .fm-bsec__cat:hover{border-bottom-color:#fff}
.fm-bsec--all .fm-bsec__pic--all svg{width:20px;height:20px}
.fm-bsec--all.is-active .fm-bsec__pic{background:#fff}

/* Сортировка и фильтр в одну строку: у каждого блока свои 60px высоты, своя линейка
   и свой отступ, порознь они съедали полтораста пикселей над товарами. */
.fm-brandpage .fm-brandbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;
  padding:10px 0 11px;border-bottom:1px solid #ececec;margin:0 0 18px}
.fm-brandpage .fm-brandbar .fm-filterpanel{height:auto;padding:0;margin:0;border:0;flex:0 0 auto}
.fm-brandpage .fm-brandbar .fm-filters{height:auto;padding:0;margin:0;border:0;flex:1 1 auto}

/* Свой значок воронки в начале строки, а тот, что общий хелпер кладёт внутрь формы, прячем */
.fm-brandpage .fm-brandbar .fm-brandbar__ico{display:inline-flex;color:#9a9a9a;flex:0 0 auto}
.fm-brandpage .fm-brandbar .fm-filters .fm-filters__ico{display:none}

/* У чипса рамка стоит и снаружи (app.css у .fm-chip), и внутри у .fm-chip__t: коробка
   в коробке. Снимаем внешнюю, работает внутренняя. В каталоге пока как было. */
.fm-brandpage .fm-brandbar .fm-chip{border:0;padding:0;background:none;gap:8px}

/* Кнопки крупнее: высота 34 вместо 29, надпись 14.5 вместо 13 */
.fm-brandpage .fm-brandbar .fm-chip__t{height:34px;padding:0 14px;font-size:14.5px}
.fm-brandpage .fm-brandbar .fm-chip__t svg{width:10px;height:10px}

/* Сортировка выглядит как чипс: та же рамка, та же высота и та же стрелка вниз */
.fm-brandpage .fm-brandbar .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-brandpage .fm-brandbar .fm-sortsel__cur svg{width:10px;height:10px}
.fm-brandpage .fm-brandbar .fm-sortsel__list{left:0;top:calc(100% + 6px)}

.fm-brandpage__none{padding:28px;border:1px solid #eef4f7;border-radius:12px;background:#fbfdfe;color:#4a545a;font-size:16px}
.fm-brandpage__none a{color:#E54E3A;text-decoration:none}
.fm-brandpage__none a:hover{text-decoration:underline}
.fm-pagehead__cnt{display:block;margin-top:0;font-size:14px;color:#8d8d8d;font-weight:400;letter-spacing:.02em}
/* Счётчик слева, хлебные крошки на его же строке справа: две отдельные строки под
   заголовком занимали высоту, но ничего не добавляли. */
.fm-brandpage__meta{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:4px 26px;margin:6px 0 22px}
.fm-brandpage__meta .fm-pagehead__cnt{flex:0 0 auto}
.fm-brandpage__meta .fm-crumbs{flex:1 1 auto;justify-content:flex-end;margin:0;font-size:14px}

/* ---------- адаптив ---------- */
@media (max-width:1240px){
  .fm-catalog.fm-brandpage{grid-template-columns:264px minmax(0,1fr);gap:0 24px}
  .fm-brandpage .fm-brandhead{grid-template-columns:210px minmax(0,1fr);gap:24px}
}
/* На узких экранах порядок должен быть «шапка → разделы → товары».
   display:contents растворяет обёртку, и её дети попадают прямо в сетку страницы,
   где их расставляют именованные области. */
@media (max-width:1100px){
  .fm-catalog.fm-brandpage{grid-template-columns:minmax(0,1fr);gap:0;
    grid-template-areas:"head" "side" "goods"}
  .fm-brandpage .fm-brandmain{display:contents}
  .fm-brandpage .fm-brandhead{grid-area:head}
  .fm-brandpage .fm-brandside{grid-area:side;align-self:auto;margin:0 0 22px}
  .fm-brandpage .fm-goods{grid-area:goods}
  .fm-bsecs{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:10px}
  .fm-bsec + .fm-bsec{margin-top:0}
}
@media (max-width:700px){
  /* крошки уже не помещаются в строку счётчика, встают под ним и снова читаются слева */
  .fm-brandpage__meta .fm-crumbs{justify-content:flex-start;font-size:13px}
  .fm-brandpage .fm-brandhead{grid-template-columns:minmax(0,1fr);gap:14px;padding-bottom:16px;margin-bottom:18px}
  .fm-brandhead__logo{max-width:240px}
  .fm-brandhead__country{text-align:left}
  .fm-bsecs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fm-bsec{padding:8px 10px 9px}
  .fm-bsec__pic{flex:0 0 38px;width:38px;height:38px}
  .fm-bsec__name{font-size:12.5px}
  .fm-bsec__cat{margin-left:0}
}

/* End */


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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* End */
/* /local/templates/floralmile/assets/css/brands.css?178613670817945 */
/* /local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178835103212538 */