/* Ваши стили. Этот файл не перезаписывается обновлениями темы.
   Токены темы можно переопределить здесь целиком:

   :root {
       --f-accent: #d7263d;
       --f-font: "Inter", system-ui, sans-serif;
       --f-radius: 0;
   }

   ------------------------------------------------------------------
   РЕЦЕПТ: чужой плавающий виджет перекрывает кнопки

   Чат, «Подписаться», обратный звонок и прочие круглые кнопки висят
   поверх страницы и на телефоне наезжают на панель покупки. Тема
   поднимает такие блоки на высоту --f-float-safe (величина берётся из
   настройки «Место для плавающих виджетов»), но знает не про каждый
   сервис. Свой добавьте одной строкой — селектор смотрите в инспекторе
   браузера:

   .ваш-класс-виджета {
       transform: translateY(calc(-1 * var(--f-float-safe)));
       transition: transform .2s ease;
   }

   Либо повесьте на элемент виджета атрибут data-f-float-safe (например,
   из custom.js) — тогда правило темы применится само.
   ------------------------------------------------------------------
   РЕЦЕПТ: типографика длинных текстов

   Описания товаров и разделов, информационные страницы и отзывы верстает
   класс .f-usercontent. Ширину строки, кегль и межстрочный интервал
   меняют переменные и правила:

   .f-usercontent { --f-measure: 76ch; font-size: 1.125rem; line-height: 1.7; }
   ------------------------------------------------------------------
   РЕЦЕПТ: баннеры в категориях

   Тема объявляет три места (зоны), но не хранит сами кампании — их
   ставит промо-плагин или ваш custom.js:

   [data-f-zone="category-top"]    — перед товарной выдачей;
   [data-f-zone="category-feed"]   — внутри выдачи, после второго ряда;
   [data-f-zone="category-bottom"] — под выдачей, перед страницами.

   У верхней зоны есть data-category-id — по нему выбирают, что показать
   в конкретной категории. Зоны внутри выдачи приходят тем же фрагментом,
   что и товары, поэтому переживают фильтрацию и сортировку.

   Первую (верхнюю) картинку грузите приоритетно — fetchpriority="high",
   остальным ставьте loading="lazy" и указывайте width/height: иначе
   баннеры испортят LCP и сдвинут вёрстку.
   ------------------------------------------------------------------ */

/* master-expert.ru: continuous pointer path between catalog columns. */
@media (min-width:900px){
 .me-catalog-stable .f-nav__roots{padding-right:0}
 .me-catalog-stable .f-nav__root{padding-right:8px}
 .me-catalog-stable.is-open .f-nav__panel{display:block}
 .me-catalog-stable:not(.is-open) .f-nav__panel{display:none}
 .me-catalog-stable .f-nav__root>.f-nav__pane{display:none}
 .me-catalog-stable .f-nav__root.is-active>.f-nav__pane{display:block}
 .me-catalog-stable .f-nav__root.is-active>.f-nav__root-link{background:var(--f-bg-soft);color:var(--f-ink)}
}

/* Keep desktop filter controls reachable on short screens. */
@media(min-width:900px){
 .me-catalog-ux .f-catalog__aside{max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .me-catalog-ux .f-catalog__aside .f-filters__actions{position:sticky;bottom:-20px;z-index:3;margin:16px -20px -20px;padding:12px 20px 16px;background:var(--f-bg);border-top:1px solid var(--f-line)}
}

/* Expandable product titles, master-expert.ru only. */
.me-card-title{--me-title-lines:4;min-width:0}
.me-card-title .f-card__name{-webkit-line-clamp:var(--me-title-lines);min-height:calc(var(--me-title-lines) * 1.3em);max-height:calc(var(--me-title-lines) * 1.3em);overflow-wrap:anywhere}
.me-card-title[data-expanded="true"] .f-card__name{display:block;max-height:none;-webkit-line-clamp:unset}
.me-card-title__control{min-height:30px;display:flex;align-items:center}
.me-card-title__toggle{border:0;background:none;padding:5px 0;color:var(--f-accent,#2459df);font:inherit;font-size:12px;line-height:20px;cursor:pointer;text-align:left}
.me-card-title__toggle[hidden]{display:none}.me-card-title__toggle:hover{text-decoration:underline;text-underline-offset:3px}
.me-card-title__toggle:focus-visible{outline:2px solid var(--f-accent,#2459df);outline-offset:3px}
@media(max-width:599px){.me-card-title{--me-title-lines:5}.me-card-title__control{min-height:44px}.me-card-title__toggle{min-height:44px}}

/* Homepage product rails: bounded tracks and accessible navigation. */
.me-home-rail{min-width:0;max-width:100%;position:relative}
.me-home-rail .f-rail{width:100%;box-sizing:border-box;grid-auto-columns:minmax(200px,calc((100% - 24px)/3));overscroll-behavior-x:contain}
.me-home-rail__nav{display:flex;justify-content:flex-end;gap:8px;margin:8px 0}
.me-home-rail__nav[hidden]{display:none}
.me-home-rail__nav button{width:44px;height:44px;border:1px solid var(--f-line,#ddd);border-radius:50%;background:var(--f-bg,#fff);color:var(--f-ink,#222);font-size:24px;cursor:pointer}
.me-home-rail__nav button:disabled{opacity:.3;cursor:default}
.me-home-rail__nav button:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px}
.me-hero-club{display:block;width:fit-content;padding:5px 9px;border-radius:8px;background:var(--f-highlight,#d5f35d);color:var(--f-highlight-ink,#17210a);font-size:13px;font-weight:650;margin-bottom:8px}
@media(max-width:699px){.me-home-rail .f-rail{grid-auto-columns: minmax(160px,72%)}}