/* Start:/local/templates/floralmile/assets/css/stories.css?17857651385124*/
/* Сторис главной: вьюер поверх страницы. Порт вида и поведения со старого
   сайта (Aspro front_stories), классы сохранены для сверки один в один. */

.stories-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1052;
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
}
.stories-popup:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0.8;
}
.stories-popup--visible { display: block; }

.stories-popup__close {
  position: absolute;
  right: 23px;
  top: 27px;
  cursor: pointer;
  transition: opacity 0.1s ease-in-out;
  z-index: 2;
  width: 30px;
  height: 30px;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
}
.stories-popup__close svg { position: relative; top: 4px; }
.stories-popup__close:hover { opacity: 0.8; }

.stories-popup__section-slider {
  display: flex;
  align-items: center;
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 0px;
  right: 0px;
}
.stories-popup__section-slider-inner { height: 100%; }

.stories-popup__element-slider {
  max-width: 100vw;
  position: relative;
  height: 100%;
  width: 462px;
  transform: scale(0.75);
  transition: transform 0.25s ease-out, margin 0.25s ease-out;
  will-change: transform, margin;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.stories-popup__element-slider--active { cursor: default; }

.stories-popup__element-slider-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  opacity: 0;
}
.stories-popup__element-slider-panel:before {
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  height: 70px;
}
.stories-popup__element-slider--active .stories-popup__element-slider-panel { opacity: 1; }

.stories-popup__element-slider-panel-element {
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}
.stories-popup__element-slider-panel-element--active .stories-popup__element-slider-panel-element-line {
  animation: story-bar-progressing forwards linear;
}
.stories-popup__element-slider-panel-element--finishied .stories-popup__element-slider-panel-element-line {
  transform: scaleX(1);
  animation: none;
}
.stories-popup__element-slider--paused .stories-popup__element-slider-panel-element-line {
  animation-play-state: paused;
}
.stories-popup__element-slider-panel-element-line {
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation-duration: 5s;
}
.stories-popup__element-slider-panel-element + .stories-popup__element-slider-panel-element {
  margin: 0 0 0 2px;
}

.stories-popup__element-slider-header {
  position: absolute;
  top: 22px;
  left: 10px;
  display: flex;
  align-items: center;
}
.stories-popup__element-slider-header-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 9px;
  flex-shrink: 0;
  background-size: cover !important;
}
.stories-popup__element-slider-header-name {
  color: #fff;
  font-size: 13px;
  margin: -1px 0px 0px 0px;
}

.stories-popup__element-slider--active {
  width: 462px;
  transform: scale(1);
  margin-left: 8vw;
  margin-right: 8vw;
}

.stories-popup__element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  will-change: opacity, visibility;
}
.stories-popup__element-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover !important;
}
.stories-popup__element-btn {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  text-align: center;
}

.stories-popup__element-slider-navs {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: 1;
  display: flex;
}
.stories-popup__element-slider-navs-prev,
.stories-popup__element-slider-navs-next {
  width: 50%;
  cursor: pointer;
}
.stories-popup__element--active {
  opacity: 1;
  visibility: visible;
}

@keyframes story-bar-progressing {
  0% { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* скролл-лок фона, вешается на body при открытом вьюере */
body.stories-lock {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
}

@media (max-width: 1025px) {
  .stories-popup__element-slider--active {
    margin-left: 4vw;
    margin-right: 4vw;
  }
}
@media (max-width: 566px) {
  .stories-popup__section-slider {
    top: 0px;
    bottom: 0px;
  }
  .stories-popup__element-slider--active {
    margin: 0px;
    border-radius: 0px;
  }
  .stories-popup__element-slider {
    width: 100vw;
    transform: none;
    border-radius: 0px;
  }
  .stories-popup__close {
    right: 9px;
    top: 19px;
  }
}

/* End */


/* Start:/local/templates/floralmile/assets/css/banner.css?178835675414631*/
/* Шрифтовая пара постера (заказ Вени по референсу): рукописный Caveat +
   конденсированный капс Oswald. Грузятся только на главной (этот css). */
@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}
@font-face{font-family:'Oswald';font-weight:400;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/oswald-400-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-weight:400;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/oswald-400-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:'Oswald';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/oswald-600-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-weight:600;font-style:normal;font-display:swap;src:url('/local/templates/floralmile/assets/css/../fonts/oswald-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}

/* Герой-слайдер главной, v2 (по образцу Patrisa Nail):
   - баннер занимает первый экран целиком: высота = вьюпорт минус шапка
     (высоту шапки в --fm-hh пишет banner.js);
   - вплотную к шапке (гасим верхний паддинг .fm-main), по бокам поля
     как у эталона, рамка со скруглением;
   - точки перелистывания в белом язычке по центру нижней кромки;
   - заголовки серифной парой: Cormorant + Montserrat. */

/* главная в стиле 4bike: топбар (лого/поиск) — полупрозрачное стекло ПОВЕРХ
   баннера, красное меню плавает скруглённой карточкой ниже на баннере,
   баннер занимает экран целиком. Селекторы через .fm-header: в склейке
   Bitrix app.css может оказаться ПОЗЖЕ page-css — перебиваем
   специфичностью, не порядком. */
.fm-header .fm-topbar {
  position: absolute;
  top: 32px;   /* было 20px: опущено на 12px по заказу 28.08 */
  left: 40px;  /* как красная карточка меню */
  right: 40px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
@supports not (backdrop-filter: blur(14px)) {
  .fm-header .fm-topbar { background: rgba(255, 255, 255, 0.88); }
}
.fm-header .fm-nav {
  position: relative;
  z-index: 5;
  margin: 0 40px;
  /* топбар выведен из потока — отсчёт от верха страницы:
     отступ стекла сверху (20) + высота стекла + 60px фото */
  /* было +80px: опущено на те же 12px, что и плашка, зазор между ними прежний */
  transform: translateY(calc(var(--fm-hh, 98px) + 92px));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.fm-hs {
  /* утянуть баннер к САМОМУ верху: гасим padding-top .fm-main (48px) + меню в потоке.
     ⚠️ было -26px, и над картинкой оставалась белая полоса в 22px */
  margin-top: calc(-48px - var(--fm-navh, 60px));
  margin-bottom: 44px;
  padding: 0 20px; /* отступ баннера по заказу */
}
.fm-hs__frame {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  height: 100vh;
  height: 100svh; /* весь экран по МАЛОМУ вьюпорту: dvh менялся вместе с адресной
                     строкой телефона, и герой прыгал (Веня 02.09.2026) */
  min-height: 420px;
}
.fm-hs__track {
  display: flex;
  height: 100%;
  transition: transform 0.45s ease;
  will-change: transform;
}
.fm-hs__slide {
  flex: 0 0 100%;
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
}
.fm-hs__slide picture {
  display: block;
  height: 100%;
}
.fm-hs__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* окно кадра по слайдам (подстройка кропа без перегенерации) */
.fm-hs__slide--bukety img { object-position: 50% 28%; }
.fm-hs__slide--sad img    { object-position: 50% 62%; }
.fm-hs__slide--dekor img  { object-position: 50% 66%; }

/* скрим для читаемости текста */
.fm-hs__slide:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.fm-hs__slide--dark:before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.13) 38%, rgba(0, 0, 0, 0) 60%);
}
.fm-hs__slide--light:before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.22) 38%, rgba(255, 255, 255, 0) 60%);
}

.fm-hs__content {
  position: absolute;
  z-index: 2;
  /* центр свободной зоны: от низа красного меню (низ = топбар + 80 + меню)
     до низа баннера — расстояние сверху и снизу от текста РАВНОЕ */
  top: calc((var(--fm-hh, 98px) + var(--fm-navh, 60px) + 80px + 100vh) / 2);
  top: calc((var(--fm-hh, 98px) + var(--fm-navh, 60px) + 80px + 100svh) / 2);
  transform: translateY(-50%);
  left: clamp(26px, 4.6vw, 92px);
  max-width: min(50%, 640px);
  text-align: center; /* постерная центровка, как на референсе */
}
.fm-hs__slide--dark .fm-hs__content { color: #fff; }
.fm-hs__slide--light .fm-hs__content { color: var(--fm-ink, #222); }

.fm-hs__kicker {
  display: block;
  font: 600 clamp(11px, 0.9vw, 14px)/1 var(--fm-font);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: clamp(10px, 1.6vw, 22px);
  opacity: 0.85;
}
.fm-hs__title {
  display: block;
  margin: 0 0 clamp(10px, 1.5vw, 20px);
}
h1.fm-hs__title { margin-top: 0; }
/* постерная композиция: скрипт / ОГРОМНЫЙ КАПС / скрипт */
.fm-hs__script {
  display: block;
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: clamp(26px, 2.7vw, 52px);
  line-height: 1.05;
}
.fm-hs__caps {
  display: block;
  font-family: 'Oswald', var(--fm-font);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(46px, 6.6vw, 126px);
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 4px 0 8px;
  color: var(--fm-red, #e54e3a);
}
.fm-hs__text {
  display: block;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.5;
  margin: 0 0 clamp(16px, 2vw, 30px);
  opacity: 0.92;
}
.fm-hs__btn { pointer-events: auto; }

/* точки перелистывания в белом язычке на нижней кромке */
.fm-hs__dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  padding: 11px 20px 13px;
  border-radius: 16px 16px 0 0;
}
/* вогнутые переходы язычка в кромку (inverted radius) */
.fm-hs__dots:before,
.fm-hs__dots:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 16px;
}
.fm-hs__dots:before {
  left: -16px;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 15.5px, #fff 16px);
}
.fm-hs__dots:after {
  right: -16px;
  background: radial-gradient(circle at 16px 0, rgba(255, 255, 255, 0) 15.5px, #fff 16px);
}
.fm-hs__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #d9d9d9;
  transition: transform 0.2s, background 0.2s;
}
.fm-hs__dot:hover { background: #bfbfbf; }
.fm-hs__dot--active,
.fm-hs__dot--active:hover {
  background: var(--fm-red, #e54e3a);
  transform: scale(1.3);
}

/* планшет ландшафт и ноутбуки поуже: текст занимает больше кадра */
@media (max-width: 1100px) {
  .fm-hs__content { max-width: 58%; }
}

/* вертикальные экраны (телефоны и планшеты в портрете): вертикальный кадр,
   текст снизу на чистой зоне, над язычком точек */
/* ⭐ Второе условие: телефон поперёк (высота до 500px). Текст снизу и тёмный низ кадра
   нужны и там: по центру он наезжал на меню (Веня 02.09.2026). */
@media (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .fm-hs__slide--bukety img { object-position: 50% 12%; }
  .fm-hs__slide--sad img    { object-position: 50% 40%; }
  .fm-hs__slide--dekor img  { object-position: 50% 45%; }

  .fm-hs__slide--dark:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.5) 76%);
  }
  .fm-hs__slide--light:before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.78) 76%);
  }
  .fm-hs__content {
    top: auto;
    transform: none;
    bottom: 70px;
    left: 20px;
    right: 20px;
    max-width: none;
  }
  .fm-hs__kicker { letter-spacing: 2px; margin-bottom: 8px; }
  .fm-hs__script { font-size: clamp(22px, 6vw, 34px); }
  .fm-hs__caps { font-size: clamp(44px, 12.5vw, 72px); }
  .fm-hs__text { font-size: 14px; margin-bottom: 14px; }
  .fm-hs__btn { height: 44px; padding: 0 22px; font-size: 12px; }
}
/* ⭐ Второе условие: телефон поперёк (высота до 500px) получает ту же раскладку, что и
   телефон стоя: шапка в потоке, меню на 34px ниже кромки, рамка без скругления.
   Экран во всю высоту там не вмещал шапку, меню и текст (Веня 02.09.2026). */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  /* Заказ Вени 30.08.2026: на телефоне баннер идёт почти в край экрана.
     Было поле 20px с каждой стороны, стало 2px. Отрицательные поля самого
     .fm-hs гасят 6px контейнера, поэтому число здесь и есть зазор на экране. */
  /* ⭐ Заказ Вени 02.09.2026: белая полоса с логотипом «светила как фонарь». Картинка
     снова идёт от самого верха, плашка с логотипом стеклянная и лежит на картинке,
     как на десктопе, только меньше: верх 10px, поля 8px, радиус 16. Прежний заказ
     31.08 (логотип над картинкой в белой полосе) этим отменён. Стекло, размытие и
     тень берутся из правила десктопа выше. */
  .fm-header .fm-topbar { top: 10px; left: 8px; right: 8px; border-radius: 16px; padding: 8px 0; }

  /* баннер подтягивается ровно на то, что стоит перед ним в потоке:
     поле .fm-main сверху (24px на телефоне) плюс высота меню */
  .fm-hs { padding: 0; margin-top: calc(-24px - var(--fm-navh, 60px)); margin-bottom: 30px; }
  /* ⛔ Скругление при полной ширине оставляет белые уголки поверх картинки:
     на телефоне рамка прямая. */
  /* ⚠️ Высота вычитает нижнюю панель телефона (48px), иначе низ баннера с кнопкой
     уходит под панель. Плашка с логотипом теперь лежит на картинке и места сверху
     не занимает (02.09.2026). */
  .fm-hs__frame { border-radius: 0;
    height: calc(100vh - 48px);
    height: calc(100svh - 48px); }

  /* меню под стеклянной плашкой: её верх 10px плюс её высота плюс 16px зазора */
  .fm-header .fm-nav { margin: 0 8px; transform: translateY(calc(var(--fm-hh, 72px) + 26px)); }
}

/* Телефон поперёк: рамке постоянная высота, страница просто прокручивается. Считать от
   высоты экрана нельзя: 390px минус шапка и меню это уже меньше самого текста, всё
   сплющивалось (кадр 844x390, Веня 02.09.2026). Ставится после правил телефона. */
@media (max-height: 500px) and (orientation: landscape) {
  .fm-hs__frame { height: 560px; min-height: 0; }   /* 480 было при полосе над картинкой: меню теперь ниже */
}
/* Поперёк шире 700px поле .fm-main сверху 48px, а не 24: без этого над рамкой белая
   полоса 24px (замер 844x390 и 915x412, 02.09.2026). */
@media (min-width: 701px) and (max-height: 500px) and (orientation: landscape) {
  .fm-hs { margin-top: calc(-48px - var(--fm-navh, 60px)); }
}
/* Поперёк текст выше, чем стоя, и его верх попадал на светлые цветы до начала затемнения
   (кадр 844x390, 02.09.2026): затемнение начинается с 10% кадра, а не с 38. */
@media (max-height: 500px) and (orientation: landscape) {
  .fm-hs__slide--dark:before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.55) 52%); }
  .fm-hs__slide--light:before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.8) 52%); }
}

/* End */


/* Start:/local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178836468614720*/
/* 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}
}

/* End */
/* /local/templates/floralmile/assets/css/stories.css?17857651385124 */
/* /local/templates/floralmile/assets/css/banner.css?178835675414631 */
/* /local/templates/floralmile/components/bitrix/catalog.section/floralmile/style.css?178836468614720 */