/* Start:/local/templates/floralmile/assets/css/brands.css?178836149818420*/
/* Раздел «Бренды»: список и страница бренда.
   Отдельный файл, чтобы не трогать общий 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}
}

/* Телефон: колонка разделов бренда 114px, слово «Электрогирлянды» в неё не влезало и
   вылезало за рамку на 9px (обход вёрстки 02.09.2026). Длинное слово переносится по слогам,
   а если браузер не умеет, рвётся в любом месте. */
@media (max-width:700px){
  .fm-bsec__name{overflow-wrap:anywhere;hyphens:auto}
}

/* End */
/* /local/templates/floralmile/assets/css/brands.css?178836149818420 */