/* 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.section/floralmile/style.css?178851658115404 */