@charset "UTF-8";
/* line 1, _settings.scss */
:root {
  --bg:var(--draft-bg, #FFFFFF);
  --bg-is-light:var(--draft-bg-is-light, true);
  --bg-minor-shade:var(--draft-bg-minor-shade, #f7f7f7);
  --bg-minor-shade-is-light:var(--draft-bg-minor-shade-is-light, true);
  --bg-major-shade:var(--draft-bg-major-shade, #ededed);
  --bg-major-shade-is-light:var(--draft-bg-major-shade-is-light, true);
  --bg-half-shade:var(--draft-bg-half-shade, #808080);
  --bg-half-shade-is-dark:var(--draft-bg-half-shade-is-dark, true);
  --color-btn-bg:var(--draft-color-btn-bg, #FF4500);
  --color-btn-bg-is-dark:var(--draft-color-btn-bg-is-dark, true);
  --color-btn-bg-minor-shade:var(--draft-color-btn-bg-minor-shade, #ff571a);
  --color-btn-bg-minor-shade-is-dark:var(--draft-color-btn-bg-minor-shade-is-dark, true);
  --color-btn-bg-major-shade:var(--draft-color-btn-bg-major-shade, #ff6933);
  --color-btn-bg-major-shade-is-dark:var(--draft-color-btn-bg-major-shade-is-dark, true);
  --color-btn-bg-half-shade:var(--draft-color-btn-bg-half-shade, #ffa280);
  --color-btn-bg-half-shade-is-light:var(--draft-color-btn-bg-half-shade-is-light, true);
  --color-accent-text:var(--draft-color-accent-text, #858383);
  --color-accent-text-is-dark:var(--draft-color-accent-text-is-dark, true);
  --color-accent-text-minor-shade:var(--draft-color-accent-text-minor-shade, #939191);
  --color-accent-text-minor-shade-is-dark:var(--draft-color-accent-text-minor-shade-is-dark, true);
  --color-accent-text-major-shade:var(--draft-color-accent-text-major-shade, #a09e9e);
  --color-accent-text-major-shade-is-dark:var(--draft-color-accent-text-major-shade-is-dark, true);
  --color-accent-text-half-shade:var(--draft-color-accent-text-half-shade, #c7c6c6);
  --color-accent-text-half-shade-is-light:var(--draft-color-accent-text-half-shade-is-light, true);
  --color-text-dark:var(--draft-color-text-dark, #423F3E);
  --color-text-dark-is-dark:var(--draft-color-text-dark-is-dark, true);
  --color-text-dark-minor-shade:var(--draft-color-text-dark-minor-shade, #555250);
  --color-text-dark-minor-shade-is-dark:var(--draft-color-text-dark-minor-shade-is-dark, true);
  --color-text-dark-major-shade:var(--draft-color-text-dark-major-shade, #696463);
  --color-text-dark-major-shade-is-dark:var(--draft-color-text-dark-major-shade-is-dark, true);
  --color-text-dark-half-shade:var(--draft-color-text-dark-half-shade, #a29e9d);
  --color-text-dark-half-shade-is-dark:var(--draft-color-text-dark-half-shade-is-dark, true);
  --color-text-light:var(--draft-color-text-light, #FFFFFF);
  --color-text-light-is-light:var(--draft-color-text-light-is-light, true);
  --color-text-light-minor-shade:var(--draft-color-text-light-minor-shade, #f7f7f7);
  --color-text-light-minor-shade-is-light:var(--draft-color-text-light-minor-shade-is-light, true);
  --color-text-light-major-shade:var(--draft-color-text-light-major-shade, #ededed);
  --color-text-light-major-shade-is-light:var(--draft-color-text-light-major-shade-is-light, true);
  --color-text-light-half-shade:var(--draft-color-text-light-half-shade, #808080);
  --color-text-light-half-shade-is-dark:var(--draft-color-text-light-half-shade-is-dark, true);
  --icons_pack:var(--draft-icons_pack, intermittent);
  --controls-btn-border-radius:var(--draft-controls-btn-border-radius, 30px);
  --color-notice-warning:var(--draft-color-notice-warning, #FBF7EB);
  --color-notice-warning-is-light:var(--draft-color-notice-warning-is-light, true);
  --color-notice-warning-minor-shade:var(--draft-color-notice-warning-minor-shade, #f8f2de);
  --color-notice-warning-minor-shade-is-light:var(--draft-color-notice-warning-minor-shade-is-light, true);
  --color-notice-warning-major-shade:var(--draft-color-notice-warning-major-shade, #f5ebcd);
  --color-notice-warning-major-shade-is-light:var(--draft-color-notice-warning-major-shade-is-light, true);
  --color-notice-warning-half-shade:var(--draft-color-notice-warning-half-shade, #caa228);
  --color-notice-warning-half-shade-is-dark:var(--draft-color-notice-warning-half-shade-is-dark, true);
  --color-notice-success:var(--draft-color-notice-success, #FAFAFA);
  --color-notice-success-is-light:var(--draft-color-notice-success-is-light, true);
  --color-notice-success-minor-shade:var(--draft-color-notice-success-minor-shade, #f2f2f2);
  --color-notice-success-minor-shade-is-light:var(--draft-color-notice-success-minor-shade-is-light, true);
  --color-notice-success-major-shade:var(--draft-color-notice-success-major-shade, #e8e8e8);
  --color-notice-success-major-shade-is-light:var(--draft-color-notice-success-major-shade-is-light, true);
  --color-notice-success-half-shade:var(--draft-color-notice-success-half-shade, #7d7d7d);
  --color-notice-success-half-shade-is-dark:var(--draft-color-notice-success-half-shade-is-dark, true);
  --color-notice-error:var(--draft-color-notice-error, #FBF7EB);
  --color-notice-error-is-light:var(--draft-color-notice-error-is-light, true);
  --color-notice-error-minor-shade:var(--draft-color-notice-error-minor-shade, #f8f2de);
  --color-notice-error-minor-shade-is-light:var(--draft-color-notice-error-minor-shade-is-light, true);
  --color-notice-error-major-shade:var(--draft-color-notice-error-major-shade, #f5ebcd);
  --color-notice-error-major-shade-is-light:var(--draft-color-notice-error-major-shade-is-light, true);
  --color-notice-error-half-shade:var(--draft-color-notice-error-half-shade, #caa228);
  --color-notice-error-half-shade-is-dark:var(--draft-color-notice-error-half-shade-is-dark, true);
  --color-notice-info:var(--draft-color-notice-info, #FAFAFA);
  --color-notice-info-is-light:var(--draft-color-notice-info-is-light, true);
  --color-notice-info-minor-shade:var(--draft-color-notice-info-minor-shade, #f2f2f2);
  --color-notice-info-minor-shade-is-light:var(--draft-color-notice-info-minor-shade-is-light, true);
  --color-notice-info-major-shade:var(--draft-color-notice-info-major-shade, #e8e8e8);
  --color-notice-info-major-shade-is-light:var(--draft-color-notice-info-major-shade-is-light, true);
  --color-notice-info-half-shade:var(--draft-color-notice-info-half-shade, #7d7d7d);
  --color-notice-info-half-shade-is-dark:var(--draft-color-notice-info-half-shade-is-dark, true);
  --font-family:var(--draft-font-family, Commissioner);
  --font-size:var(--draft-font-size, 16px);
  --font-family-heading:var(--draft-font-family-heading, Commissioner);
  --heading-ratio:var(--draft-heading-ratio, 2.6);
  --heading-weight:var(--draft-heading-weight, 500);
  --collection_count:var(--draft-collection_count, 12);
  --search_count:var(--draft-search_count, 18);
  --blog_size:var(--draft-blog_size, 6);
  --product_not_available:var(--draft-product_not_available, shown);
  --layout-content-max-width:var(--draft-layout-content-max-width, 1408px);
  --delta_sidebar:var(--draft-delta_sidebar, 1);
  --sidebar_index_show:var(--draft-sidebar_index_show, false);
  --sidebar_index_position:var(--draft-sidebar_index_position, left);
  --sidebar_collection_show:var(--draft-sidebar_collection_show, false);
  --sidebar_collection_position:var(--draft-sidebar_collection_position, left);
  --sidebar_cart_show:var(--draft-sidebar_cart_show, true);
  --sidebar_cart_position:var(--draft-sidebar_cart_position, right);
  --sidebar_product_show:var(--draft-sidebar_product_show, false);
  --sidebar_product_position:var(--draft-sidebar_product_position, left);
  --sidebar_blog_show:var(--draft-sidebar_blog_show, false);
  --sidebar_blog_position:var(--draft-sidebar_blog_position, left);
  --sidebar_article_show:var(--draft-sidebar_article_show, true);
  --sidebar_article_position:var(--draft-sidebar_article_position, right);
  --sidebar_page_show:var(--draft-sidebar_page_show, false);
  --sidebar_page_position:var(--draft-sidebar_page_position, left);
  --sidebar_compare_show:var(--draft-sidebar_compare_show, false);
  --sidebar_compare_position:var(--draft-sidebar_compare_position, left);
  --sidebar_search_show:var(--draft-sidebar_search_show, false);
  --sidebar_search_position:var(--draft-sidebar_search_position, left);
  --feedback_captcha_enabled:var(--draft-feedback_captcha_enabled, true);
  --favorite_enabled:var(--draft-favorite_enabled, true);
  --compare_enabled:var(--draft-compare_enabled, true); }

/* ===== GLOBAL FIX: define --controls-form-border-radius =====
   The theme setting "controls-btn-border-radius" (theme settings ->
   corner rounding for buttons and form elements) is the ONLY radius
   variable this theme actually defines. Options: 0px / 6px / 10px / 30px.

   But FOUR widgets style form controls with --controls-form-border-radius,
   and nothing anywhere in this theme ever defines it. All 14 of those
   declarations silently do nothing, which is why the header search field
   and its button render square no matter what the setting is changed to.

   NOTE on the selector: core-css.css (platform) loads at the END of body,
   i.e. AFTER theme.css, and appears to declare this property with an EMPTY
   value on `:root body`. An empty declaration still counts as 'defined', so
   var() fallbacks are never consulted, and an equal-specificity rule that
   comes earlier in source order loses.

   Rather than reaching for !important, this wins on specificity:
     :root body                  -> (0,1,1)
     :root body[data-theme-template] -> (0,2,1)   <- this rule
   layouts.layout.liquid puts data-theme-template on <body> for every page,
   so the attribute is always present. The plain `:root body` selector is kept
   as a second, lower-specificity safety net.

   Affects: header_12 (search field + button), header_11,
   filter_sort_3, sidebar_filter_2.
   ============================================================== */
/* line 27, custom.scss */
:root body[data-theme-template],
:root body {
  --controls-form-border-radius: var(--controls-btn-border-radius, 30px); }

/* Highly specific selectors override system styles naturally without performance hits */
/* line 34, custom.scss */
body .micro-alert-wrapper .micro-alert {
  top: 80px; }

/* line 38, custom.scss */
body .fslightbox-container.fslightbox-full-dimension.fslightbox-fade-in-strong {
  background: #FAFAFA; }

/* ===== Header: side panel default state ===== */
/* line 43, custom.scss */
.side-panel--hidden {
  display: none; }

/* ===== Header: reserve slider height to prevent CLS ===== */
/* line 48, custom.scss */
.header-slider .promo-slider {
  min-height: 480px; }

@media (max-width: 767px) {
  /* line 52, custom.scss */
  .header-slider .promo-slider {
    min-height: 56vw; } }
/* ===== Header: menu button background ===== */
/* line 58, custom.scss */
.header__show-menu-btn {
  background: transparent; }

/* ===== "Фильтры" trigger — global override =================================
   Lives here, not only in the filter widgets' own scss, because the button may
   be rendered by a SYSTEM widget that is not part of the theme export and
   cannot be edited. theme.css loads in <head> while all widget CSS loads at the
   end of <body>, so widget rules would otherwise win on source order — hence
   !important. Scoped to .js-show-mobile-filter so the "Сортировка" button
   beside it keeps its outline style. */
/* line 69, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter,
button.show-mobile-filter-btn.js-show-mobile-filter,
.js-show-mobile-filter.button {
  background: #14110F !important;
  border-color: #14110F !important;
  color: #fff !important; }

/* line 77, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter .icon,
.js-show-mobile-filter.button .icon {
  color: #fff !important; }

/* line 82, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter:hover,
.show-mobile-filter-btn.js-show-mobile-filter:focus-visible,
.show-mobile-filter-btn.js-show-mobile-filter:active,
.js-show-mobile-filter.button:hover {
  background: #2A2422 !important;
  border-color: #2A2422 !important;
  color: #fff !important; }

/* Filters applied: keep the label readable, let the accent dot signal state. */
/* line 92, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter.is-active-filters {
  background: #14110F !important;
  border-color: #14110F !important;
  color: #fff !important; }

/* line 98, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter.is-active-filters:before {
  background: var(--color-btn-bg) !important; }

/* line 102, custom.scss */
.show-mobile-filter-btn.js-show-mobile-filter .show-mobile-filter-btn__bage {
  background: #fff !important;
  color: #14110F !important; }

/* ===== pass12: brands hub (/collection/brands) =====
   Plain text links on purpose: lightest possible markup, nothing to lazy-load,
   and every entry is a real crawlable <a href> to a brand collection. */
/* line 111, custom.scss */
.brands-hub {
  /* The hub renders straight into the template, outside the platform widget
     wrapper that gives every other block its side gutters - so it needs its
     own, or the text runs to the screen edge. */
  padding: 1.5rem 2.5rem 3rem; }

/* line 118, custom.scss */
.brands-hub__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none; }

/* line 127, custom.scss */
.brands-hub__item {
  margin: 0; }

/* line 131, custom.scss */
.brands-hub__link {
  display: block;
  padding: 0.375rem 0;
  text-decoration: none; }

/* line 137, custom.scss */
.brands-hub__link:hover,
.brands-hub__link:focus-visible {
  text-decoration: underline; }

@media (max-width: 1023px) {
  /* line 143, custom.scss */
  .brands-hub {
    padding-left: 1.5rem;
    padding-right: 1.5rem; } }
@media (max-width: 767px) {
  /* line 150, custom.scss */
  .brands-hub {
    padding-left: 1rem;
    padding-right: 1rem; }

  /* line 155, custom.scss */
  .brands-hub__list {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } }
/* ===== pass12d: hide the product filters on the brands hub =====
   The filter/sort block is system_widget_v4_filter_sort_1, mounted in the
   collection-section_top-list widget list and rendered by the LAYOUT, not by
   collection.liquid - so the hub branch cannot skip it the way it skips the
   product grid. It is hidden here instead.

   Making it work was not an option worth taking: those controls filter
   PRODUCTS by price and characteristics (they read
   collections[collection.handle].products_price_min), and this page lists
   collections. There is nothing for them to act on.

   Scoped with :has(.brands-hub) because .brands-hub is markup we render
   ourselves, so the hook is guaranteed present. The category tiles above the
   filters are a different widget and stay - they are working internal links. */
/* line 175, custom.scss */
body:has(.brands-hub) .filter,
body:has(.brands-hub) .filter-mobile-controls,
body:has(.brands-hub) .filter-mobile-controls-top,
body:has(.brands-hub) .sorting-modal,
body:has(.brands-hub) .collection-order,
body:has(.brands-hub) .collection-order-wrapper,
body:has(.brands-hub) .collection-sort,
body:has(.brands-hub) .show-mobile-filter-btn {
  display: none !important; }

/* pass14: instant tap feedback on product / collection links.
   Paired with the pointerdown handler in layout.liquid — the class is added
   the moment the finger lands, not when navigation starts, so the tap is
   visibly acknowledged even while the server is still thinking. */
/* line 191, custom.scss */
a.is-tapped {
  opacity: 0.55;
  transition: opacity 0.06s ease-out; }

/* line 196, custom.scss */
a.is-tapped img {
  transform: scale(0.985);
  transition: transform 0.12s ease-out; }

/* ===== pass29: favourites + compare on every product card, incl. mobile =====

   Three separate causes were found, not one:

   1. `favorite_enabled` and `compare_enabled` were DEFINED in settings.json
      but had no stored value in settings_data.json. The admin showed the
      checkboxes as on (it renders the schema default), while Liquid read nil.
      Compare survived only because its condition is
      `== null or settings.compare_enabled`, which treats missing as on;
      favourites has no such fallback. Both are now stored values, so theme
      imports stop wiping them.
   2. `product-hide-compare: true` on seven card widgets.
   3. This rule: below 1024px the card widgets set .favorites_btn and
      .product__compare to display:none and show a combined
      .product__actions-btn instead. That is why both vanished on phones.
      Overridden here so the two controls stay visible at every width. */
@media screen and (max-width: 1024px) {
  /* line 219, custom.scss */
  .product-preview .favorites_btn,
  .product-preview .product__compare,
  .product .favorites_btn,
  .product .product__compare {
    display: flex !important; } }
/* ===== pass75: «Сравнение» в ШАПКЕ на мобильных =====

   Живая шапка — кастомизированный СИСТЕМНЫЙ виджет
   (system_widget_v4_header_11_1). Правки в файлах его theme-override
   (widget_types/widget_v4_header_11_1_c27951ba…/snippet.scss|liquid) НЕ
   подхватываются при переливе темы — InSales держит кастомизацию в данных
   аккаунта, а не в файлах темы. custom.scss же всегда компилируется в theme.css.

   Штатная шапка ниже 768px прячет все .header__control-btn, кроме корзины
   (а корзина у этого магазина ещё и убрана режимом --mobile-panel-right-btn:
   first-phone). Корзина/поиск/избранное/профиль уже есть в нижнем меню
   (widget_v4_bottom_navigation_bar_1) — а «Сравнение» там нет. Возвращаем
   только его, в правый угол шапки. Кнопка уже в DOM, ей лишь снят display:none.
   Специфичность (0,3,0) бьёт штатное правило (0,2,0), но !important на всякий
   случай — inline-блок стилей виджета грузится в <body> после theme.css. */
@media screen and (max-width: 767px) {
  /* line 244, custom.scss */
  .header__area-controls .header__control-btn.header__compare,
  .header .header__control-btn.header__compare {
    display: inline-flex !important; } }
/* ===== pass83: общий «оживляж» — появление блоков при скролле + лёгкий параллакс
   на баннерных/статейных фото. Метки вешает скрипт в конце layouts.layout.liquid.

   Метки — data-АТРИБУТЫ, а не классы, намеренно: платформенный my-layout.js
   перезаписывает атрибут class у всех .layout вскоре после загрузки (возвращает
   ранее снятую копию), и любой добавленный класс в этом окне пропадает. Атрибуты
   такое присваивание не трогает; плюс скрипт вешает метку заново, если её сорвали.

   Движение «тягучее»: длинный хвост замедления (cubic-bezier с почти нулевым
   ускорением в конце) + 0.95s. Ход зависит от высоты блока (46/66/88px), чтобы у
   высоких секций движение читалось так же, как у невысоких баннеров.

   База — эффект включён; при «уменьшении движения» (prefers-reduced-motion: reduce)
   всё принудительно сбрасывается. Так надёжнее: `reduce` матчится стабильно, а
   `no-preference` в некоторых окружениях не матчится вообще. Скрипт тоже проверяет
   `reduce` и в этом случае вообще ничего не делает. */
/* блок/карточка ниже экрана -> мгновенно скрыт (без анимации «туда», чтобы не было
   моргания), анимируется только появление — состояние [data-kr-show].
   Каскад по строке товаров задаётся значением атрибута data-kr-show. */
/* Ход задаётся ЗНАЧЕНИЕМ АТРИБУТА, а не CSS-переменной в inline-style.
   Это критично: в inline-style секции (.layout) InSales хранит всю конфигурацию
   виджета — 56 переменных, включая --banner-width. Любая запись в .style секции
   пересобирает этот атрибут и в паре с тем, как платформа его сохраняет/возвращает,
   может стереть переменные виджета: тогда width: var(--banner-width) становится
   невалидным, баннер получает width:auto и раздувается до натурального размера
   картинки — то самое «огромное и размытое». Атрибуты платформа не трогает.

   Только 2D translate и БЕЗ will-change — намеренно: translate3d/will-change держат
   элемент в постоянном GPU-слое, Safari растрирует такой слой один раз на своём
   разрешении. Во время самого перехода браузер поднимет слой сам. */
/* pass120: ход увеличен — было 46/66/88px, читалось слабо. */
/* line 283, custom.scss */
[data-kr-hide] {
  opacity: 0;
  transform: translateY(64px); }

/* line 287, custom.scss */
[data-kr-hide="m"] {
  transform: translateY(92px); }

/* line 288, custom.scss */
[data-kr-hide="l"] {
  transform: translateY(120px); }

/* line 289, custom.scss */
[data-kr-hide][data-kr-show] {
  opacity: 1;
  transform: none;
  transition: opacity 0.95s cubic-bezier(0.16, 0.72, 0.18, 1), transform 0.95s cubic-bezier(0.16, 0.72, 0.18, 1); }

/* Каскад по строке товаров — значением атрибута, без inline-style.
   Селекторы обязательно с [data-kr-hide]: у правила выше специфичность (0,2,0) и
   сокращённое свойство transition, которое сбрасывает delay в 0s. Одного
   [data-kr-show="1"] (0,1,0) не хватило бы. */
/* line 300, custom.scss */
[data-kr-hide][data-kr-show="1"] {
  transition-delay: .07s; }

/* line 301, custom.scss */
[data-kr-hide][data-kr-show="2"] {
  transition-delay: .14s; }

/* line 302, custom.scss */
[data-kr-hide][data-kr-show="3"] {
  transition-delay: .21s; }

/* Лёгкий вертикальный параллакс на фото.
   ВАЖНО: НЕ трансформируем картинку. Раньше здесь были scale(1.13) + will-change:
   transform — эта пара заставляет Chrome растрировать картинку в отдельный слой на
   фиксированном разрешении и растягивать его; на части баннеров это давало
   огромное размытое изображение, вылезающее за рамку. Теперь двигаем СОДЕРЖИМОЕ
   внутри неизменной рамки через object-position: размеры элемента не меняются
   вообще, вылезти за рамку физически нечему, растр остаётся чётким.
   --kr-par выставляет JS (клампится ±10px); применяется только к картинкам с
   object-fit: cover и стандартным object-position. */
/* Непрерывный сдвиг контента секции при прокрутке — то самое «движение при скролле».
   Двигаем ВНУТРЕННИЙ контейнер секции, а не саму секцию: фон/отступы остаются на
   месте (нет швов между блоками), и, главное, модалка быстрого просмотра
   (.modal с position:fixed) лежит СОСЕДОМ и в трансформируемое поддерево не попадает —
   иначе transform у предка ломает position:fixed. Скрипт дополнительно не берёт
   контейнеры, внутри которых есть fixed/sticky или абсолютные элементы,
   привязанные к предку снаружи. */
/* line 320, custom.scss */
[data-kr-drift] {
  /* тоже 2D и без will-change — см. пояснение выше */
  transform: translateY(var(--kr-drift, 0px)); }

/* line 325, custom.scss */
.kr-parallax-img {
  /* !important — как и у других глобальных правил здесь: custom.scss компилируется
     в theme.css (<head>), а CSS виджетов грузится в конце <body> и при равной
     специфичности выигрывает по порядку. Скрипт вешает класс только на картинки,
     у которых object-position штатный (50% 50%), так что ничего не перебиваем. */
  object-position: 50% calc(50% + var(--kr-par, 0px)) !important; }

@media (prefers-reduced-motion: reduce) {
  /* line 334, custom.scss */
  [data-kr-hide],
  [data-kr-hide][data-kr-show] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important; }

  /* line 340, custom.scss */
  .kr-parallax-img {
    object-position: 50% 50% !important; }

  /* line 343, custom.scss */
  [data-kr-drift] {
    transform: none !important; } }
/* =====================================================================
   pass92: карточки преимуществ на карточке товара и в корзине
   («Кэшбэк и бонусы от Яндекса», «Моментальная отправка» и т.д.) —
   скругление 25px, как у картинок каталога и плиток категорий
   (в настройках InSales это --border-radius: 25px; сейчас у карточек 4px).

   Виджет СИСТЕМНЫЙ (system_widget_v4_benefits_5) — его папки в теме нет,
   перезалив темы его стили не меняет, поэтому правка живёт здесь.
   !important нужен: свой CSS виджета подключается в конце <body> и при
   равной специфичности выигрывает у theme.css из <head>.
   ===================================================================== */
/* line 359, custom.scss */
.layout.widget-type_system_widget_v4_benefits_5 .benefits-list .benefits-list__item {
  border-radius: 25px !important; }

/* pass94: край «шторки». Секция, которая наезжает на полосу Highlights
   (на каталоге и карточке товара это хлебные крошки), получает скруглённый
   верх — при прокрутке в её углах видно тёмную полосу под ней, и лист
   выглядит как отдельный слой, а не как обрезанный край.
   В покое углы открывают белый холст, то есть незаметны — скругление
   проявляется ровно тогда, когда шторка поехала. */
/* line 371, custom.scss */
.layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c + .layout {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  /* pass96: заводим лист на полосу ровно на радиус — тогда скругление видно
     сразу, не дожидаясь прокрутки. Полосе добавлены такие же 25px снизу
     (её snippet.scss), так что видимая высота обеих секций прежняя. */
  margin-top: -25px; }

/* pass94: на главной ряд категорий идёт сразу за hero, поэтому его
   скруглённому верху нечего открывать — под ним такой же белый холст.
   Заводим лист на 25px (ровно радиус) на бежевый низ hero: тогда в углах
   видно бежевый, как на эскизе.

   Отдельно про грабли: сначала я померил «зазор» между секциями и получил
   88px — это оказался не зазор, а сдвиг моей же анимации появления
   (data-kr-hide сдвигает секцию вниз, пока она не показалась). Никакого
   зазора в вёрстке нет, поэтому здесь простое фиксированное число, а не
   вычисление на лету. */
/* line 390, custom.scss */
.layout[class*="index_hero_fxmic"] + .layout.widget-type_widget_v4_collections_on_index_2 {
  margin-top: -25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px; }

/* pass99: у скруглённых «листов» внутренний .layout__content тоже белый, но
   без скругления. Он отступает от краёв на --layout-side-padding: на десктопе
   это 40px и его прямые углы прячутся за скруглением родителя, а на мобильном
   отступ 15px при радиусе 25px — углы вылезают наружу ступенькой.
   Наследуем радиус внутрь: обе фигуры белые, поэтому видимой остаётся форма
   родителя, а ступенька исчезает. */
/* line 402, custom.scss */
.layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c + .layout > .layout__content,
.layout[class*="index_hero_fxmic"] + .layout.widget-type_widget_v4_collections_on_index_2 > .layout__content {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit; }

/* =====================================================================
   «Шторка»: секция ниже наезжает на подложку, а подложка отстаёт от прокрутки,
   будто уезжает под лист. Связь со скроллом отдана браузеру — scroll-driven
   анимация. Это принципиально: на iOS прокрутка живёт на своём потоке, и
   любой сдвиг, посчитанный в JS, отстаёт от неё на кадр (pass112). Здесь на
   кадр не приходится никакой работы вовсе.

   Таймлайн — view(): он отмеряет путь САМОЙ подложки по экрану, а не позицию
   прокрутки в документе. Это и есть лекарство от истории с «работает только
   после ресайза»: раньше окно задавалось абсолютными пикселями прокрутки на
   таймлайне документа, и пока ниже догружались картинки, длина документа
   росла, а привязка границ оставалась старой. Теперь в разметке нет ни одной
   документной координаты: конец окна — cover 100%, то есть момент, когда
   нижний край подложки дошёл до верха экрана (он же момент, когда лист накрыл
   её целиком), а начало — на --kr-*-d раньше. Проверено: смена --kr-*-d на
   ходу пересчитывается сразу, без пересборки анимации.

   Скрипт в layouts.layout.liquid считает только две величины на подложку:
   длину окна (--kr-*-d) и полный сдвиг (--kr-*-max). Пока он не измерил,
   сдвиг равен нулю — эффекта просто нет, ничего никуда не прыгает.

   Подложек две, и на одной странице они не встречаются: Highlights под шапкой
   в каталоге и низ героя на главной.
   ===================================================================== */
@supports (animation-timeline: view()) {
  @keyframes kr-under {
    from {
      transform: translateY(0); }
    to {
      transform: translateY(var(--kr-shift, 0px)); } }
  /* line 438, custom.scss */
  .layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c,
  .krf__specs,
  [data-kr-under-copy] {
    animation-name: kr-under;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both; }

  /* line 447, custom.scss */
  .layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c {
    --kr-shift: var(--kr-a-max, 0px);
    animation-timeline: view(block);
    animation-range: cover calc(100% - var(--kr-a-d, 400px)) cover 100%; }

  /* На телефоне вместе с полосой характеристик едет и колонка текста героя:
     иначе отставала бы одна тонкая полоска, а карточка с кнопками шла бы
     вровень с листом — и лист выглядел приклеенным к ней (pass131). Обе части
     обязаны идти по ОДНОМУ таймлайну, иначе у каждой был бы свой путь по
     экрану и они разъехались бы. Поэтому таймлайн именованный: объявлен на
     полосе, а timeline-scope на секции героя делает имя видимым и колонке —
     она лежит в соседней ветке, сама бы имя не нашла.

     Атрибут ставит скрипт, только пока экран узкий: на широком внутри героя
     работает sticky, и трогать колонку нельзя. */
  /* line 463, custom.scss */
  section.krf {
    timeline-scope: --kr-under; }

  /* line 464, custom.scss */
  .krf__specs {
    view-timeline-name: --kr-under;
    view-timeline-axis: block; }

  /* line 466, custom.scss */
  .krf__specs,
  [data-kr-under-copy] {
    --kr-shift: var(--kr-b-max, 0px);
    animation-timeline: --kr-under;
    animation-range: cover calc(100% - var(--kr-b-d, 400px)) cover 100%; } }
@media (prefers-reduced-motion: reduce) {
  /* line 475, custom.scss */
  .layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c,
  .krf__specs,
  [data-kr-under-copy] {
    animation-name: none;
    transform: none; } }
/* Секции ниже подложки должны рисоваться ПОВЕРХ неё, иначе отставшая подложка
   проступит сквозь них: трансформированный элемент поднимается в собственный
   слой и перекрывает обычный поток. position: relative этого достаточно, а
   контекст наложения он не создаёт (z-index остаётся auto), поэтому фиксы
   вроде мобильной панели фильтра продолжают работать — см. pass93.

   pass126: то же самое для главной. Раньше правило было только у Highlights,
   и на главной «накрывающей» считалась одна секция категорий (279px) — из-за
   этого сдвиг подложки упирался в 231px, вдвое меньше возможного. Теперь
   позиционированы все секции ниже, и ограничителем снова служит высота самой
   подложки, а не случайная высота одного соседа. */
/* line 494, custom.scss */
.layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c ~ .layout,
.layout[class*="index_hero_fxmic"] ~ .layout {
  position: relative; }

/* =====================================================================
   pass114: у промо-баннеров обрывались скруглённые углы — дуга упиралась в
   прямой срез.

   Причина та же, что была у главного фото товара в pass88. Скругление стоит
   на контейнере `.img-ratio` (25px + overflow: hidden), а сама картинка своего
   радиуса не имеет и держится на обрезке родителя. Как только над ней
   оказывается предок с transform — карусель или наш дрейф секции — картинка
   уезжает в отдельный слой композитинга, и клип скруглённого предка к этому
   слою не применяется: угол рисуется прямым.

   Почему у карточек товара и плиток категорий такого нет: там радиус стоит на
   самой <img> (замер: бокс 0px, картинка 25px), и она рисует его сама,
   независимо от слоёв. Ровно это и делаем для остальных: пускаем радиус
   контейнера вниз по цепочке. Где у контейнера радиуса нет, наследуется 0 —
   то есть правило ничего не меняет там, где всё и так в порядке.
   ===================================================================== */
/* line 516, custom.scss */
.img-ratio > .img-ratio__inner,
.img-ratio > .img-ratio__inner > picture,
.img-ratio > .img-ratio__inner > picture > img,
.img-ratio > .img-ratio__inner > img,
.img-ratio > picture,
.img-ratio > picture > img,
.img-ratio > img {
  border-radius: inherit; }

/* =====================================================================
   pass115: у промо-баннеров в товарных рядах дуга скругления обрывалась
   прямым срезом.

   Что уже проверено и НЕ является причиной: радиус у самой картинки есть
   (25px, стоит там и без pass114), размеры картинки и её бокса совпадают
   ровно, смещения нет, ни один предок с overflow их не подрезает. Статически
   на 1440/1900/2400 угол рисуется полной дугой.

   Остаётся композитинг: баннер лежит внутри карусели, у трека которой
   постоянный transform, поэтому картинка живёт в отдельном слое — а к слою
   Safari скруглённую обрезку предка не применяет (та же природа, что у фото
   товара в pass88, только там хватило радиуса на самой картинке).

   Маска заставляет браузер выполнить обрезку внутри слоя. Оба цвета градиента
   непрозрачные, поэтому сама по себе она ничего не скрывает — меняется только
   способ обрезки. Ограничено промо-баннерами: у них единственных радиус висит
   на контейнере .img-ratio, у карточек товара и плиток он на самой картинке.
   ===================================================================== */
/* line 545, custom.scss */
.banner .img-ratio {
  /* pass116, попытка 3. Маска (pass115) не помогла — проверено на живом.
     Меняем сам механизм обрезки: clip-path Safari применяет к геометрии слоя,
     а не поверх него, поэтому он не зависит от того, вынесена картинка в
     отдельный слой композитинга или нет. Маску оставляем: она не мешает и
     страхует там, где clip-path не поддержан. */
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  mask-image: radial-gradient(#ffffff, #000000);
  -webkit-clip-path: inset(0 round var(--product-border-radius, 25px));
  clip-path: inset(0 round var(--product-border-radius, 25px)); }

/* pass118: параллакс с картинок баннеров снят окончательно — разделение
   подозреваемых дало однозначный ответ.

   В pass116 углы починились, но я снял сразу две вещи: сменил механизм
   обрезки на clip-path и убрал параллакс. В pass117 вернул параллакс, оставив
   clip-path, — углы сразу поехали снова. Значит режет именно он: сдвиг кадра
   через object-position заставляет Safari перерисовывать картинку в отдельном
   слое, и скруглённая обрезка к этому слою применяется частично — верхние
   углы остаются прямыми.

   Размен осознанный: у баннеров целые углы, но нет лёгкого сдвига кадра.
   Везде остальное — карточки товара, плитки категорий, превью статей —
   параллакс работает как прежде, там радиус стоит на самой картинке и такого
   конфликта нет. clip-path оставляем: он не мешает и страхует обрезку. */
/* pass135: движение картинке вернули, но иначе.

   Запрет стоял с pass118: параллакс двигал содержимое через object-position, а
   радиус у баннеров висит на контейнере .img-ratio — Safari не применяет
   скругление предка к слою, который поехал, и верхние углы срезало. Лечение
   оказалось простым и уже испытанным на карточках товара (pass114): радиус
   должен быть на самой картинке. Проверено на живой странице со включённым
   ходом — все четыре угла целые.

   Общий JS-параллакс к баннерам по-прежнему не применяем: у него ход ±10px,
   этого не видно. Вместо него — своя scroll-driven анимация ниже, с ходом во
   всё поле кадра и без работы на кадре прокрутки. */
/* line 583, custom.scss */
.banner .img-ratio img {
  border-radius: var(--product-border-radius, 25px); }

/* line 587, custom.scss */
.banner .img-ratio .kr-parallax-img {
  object-position: 50% 50% !important; }

/* =====================================================================
   Промо-баннер в блоках с вкладками: ролик вместо картинки плюс подпись.

   Как мы сюда пришли. Сначала пробовали оживить сам кадр — панораму внутри
   рамки. Двигать содержимое картинки в этом месте нельзя: радиус у баннеров
   висит на контейнере .img-ratio, а Safari не применяет скругление предка к
   слою, который поехал, и срезает углы (pass116-118, из-за этого параллакс на
   баннерах и был выключен). Потом собрали сцену из слоёв — вырезанный человек
   поверх пустого фона; движение получилось, но читалось как бумажная кукла.
   В итоге кадры оживили генерацией: короткий ролик без звука, снятый из той же
   картинки, — и он же решает вопрос с углами, потому что радиус вешается прямо
   на элемент, а не на рамку вокруг.

   Ролик грузится только когда баннер подошёл к экрану, играет пока виден и
   встаёт на паузу, когда ушёл, — см. скрипт в layouts.layout.liquid.

   Подпись с названием коллекции лежит поверх, с отступом 24px от краёв, то
   есть до скруглений не достаёт. Своего движения у неё нет: рядом с играющим
   роликом оно было бы шумом.
   ===================================================================== */
/* Опора — сам .banner: у .banner-link display: inline, и координаты
   абсолютного потомка внутри инлайна считаются по строчным фрагментам, а не по
   картинке — подпись уезжала к верху блока. Подпись лежит рядом со ссылкой, а
   не внутри; клики она не перехватывает (pointer-events: none), поэтому ссылка
   под ней работает как раньше. */
/* line 616, custom.scss */
.banner {
  position: relative; }

/* line 620, custom.scss */
.banner .krb-cap {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: calc(100% - 48px);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem 0.6rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--kr-ink, #14110f);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(20, 17, 15, 0.18);
  pointer-events: none; }

/* line 640, custom.scss */
.banner .krb-cap__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

/* line 646, custom.scss */
.banner .krb-cap__arrow {
  flex: 0 0 auto;
  color: var(--kr-accent, #ff4500);
  font-weight: 700; }

/* line 652, custom.scss */
.banner .krb-cap__arrow::before {
  content: "\2192"; }

@media screen and (max-width: 767px) {
  /* line 655, custom.scss */
  .banner .krb-cap {
    left: 18px;
    bottom: 18px;
    max-width: calc(100% - 36px);
    font-size: 0.8rem; } }
/* Ролик в баннере — слоем поверх картинки, которая остаётся заставкой и
   запасным вариантом. Пока ролик не пошёл, он полностью прозрачен, так что
   видна картинка; проявляется он только по событию playing, то есть когда
   действительно начал играть. Там, где автозапуск запрещён, так и останется
   картинка — без пустого чёрного прямоугольника.

   Радиус — на самом элементе: видео всегда уходит в отдельный слой
   композитинга, а скругление предка Safari к такому слою не применяет и
   срезает углы. Та же болезнь резала фото товаров (pass114) и промо-баннеры
   (pass116-118). */
/* line 673, custom.scss */
.banner .krb-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--product-border-radius, 25px);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none; }

/* line 686, custom.scss */
.banner .krb-video.is-live {
  opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* line 691, custom.scss */
  .banner .krb-video {
    transition: none; } }
@media (prefers-reduced-motion: reduce) {
  /* line 695, custom.scss */
  .banner .krb-cap,
  .banner .krb-cap__arrow {
    animation: none;
    opacity: 1;
    transform: none; } }
/* =====================================================================
   pass138. Первый проход по стилю из refero (Apple España) — слой токенов.

   Договорённость: переносим СИСТЕМУ, а не палитру. У источника монохром плюс
   синий; у нас акцент — оранжевый #ff4500 из логотипа и производные от него.
   Радиусы оставляем свои: у источника запрет на скругления касается кнопок и
   секций, а не карточек, и наши 25–30px никуда не деваются.

   Структуру этот проход не трогает — ни центрирования, ни перекройки секций.
   Видно будет по тексту, кнопкам и общему тону. Всё в одном файле, откат в
   одно движение.

   Нейтральные тона взяты тёплыми (не серые #f5f5f7 источника, а песочные):
   рядом с оранжевым холодный серый читается как чужой, тёплый — как выбранный.

   Главный риск прохода — базовый кегль 16 → 17px вместе с отрицательным
   трекингом: это рабочая настройка системы (в источнике она встречается 221
   раз), но она трогает каждую страницу, и где-то может потребовать подгонки.
   ===================================================================== */
/* line 722, custom.scss */
:root {
  /* — акцент: шкала от логотипа — */
  --kr-accent: #ff4500;
  /* главное действие, единственный цветной элемент */
  --kr-accent-hover: #e63e00;
  --kr-accent-press: #cc3700;
  --kr-accent-ink: #b33000;
  /* текст и ссылки акцентом — контраст к холсту */
  --kr-accent-ink-on: #ffffff;
  /* текст на залитой кнопке */
  /* — оранжевые washes: ими разделяем секции вместо линеек — */
  --kr-wash-1: #fdf4ef;
  --kr-wash-2: #fbe8dd;
  --kr-wash-3: #f6d8c7;
  /* — нейтральные, тёплые — */
  --kr-canvas: #ffffff;
  /* холст страницы — ровно белый, без второго тона */
  --kr-surface: #ffffff;
  /* приподнятая плоскость: шапка, карточка */
  --kr-ink: #1a1614;
  /* основной текст */
  --kr-ink-2: #5f574f;
  /* вторичный текст */
  --kr-ink-3: #8a817a;
  /* третичный, подписи */
  --kr-line: #e2ddd8;
  /* волосяная линия */
  /* — типографика: шкала источника — */
  --kr-t-caption: 12px;
  --kr-lh-caption: 1.33;
  --kr-tr-caption: -0.012em;
  --kr-t-body: 17px;
  --kr-lh-body: 1.47;
  --kr-tr-body: -0.022em;
  --kr-t-sub: 21px;
  --kr-lh-sub: 1.19;
  --kr-tr-sub: 0.011em;
  --kr-t-h-sm: 26px;
  --kr-lh-h-sm: 1.47;
  --kr-tr-h-sm: -0.015em;
  --kr-t-h: 34px;
  --kr-lh-h: 1.47;
  --kr-tr-h: -0.011em;
  --kr-t-h-lg: 40px;
  --kr-lh-h-lg: 1.1;
  --kr-tr-h-lg: -0.005em;
  --kr-t-display: 56px;
  --kr-lh-display: 1.07;
  --kr-tr-display: -0.005em;
  /* — отступы, шаг 4px — */
  --kr-s-4: 4px;
  --kr-s-8: 8px;
  --kr-s-12: 12px;
  --kr-s-16: 16px;
  --kr-s-20: 20px;
  --kr-s-24: 24px;
  --kr-s-40: 40px;
  --kr-s-48: 48px;
  --kr-s-56: 56px;
  --kr-s-60: 60px;
  /* — ширины: текст узкий, сетка товаров остаётся широкой — */
  --kr-text-width: 980px;
  /* — форма — */
  --kr-radius-pill: 980px; }

/* ——— холст ——— */
/* line 765, custom.scss */
body {
  background-color: var(--kr-canvas);
  font-size: var(--kr-t-body);
  line-height: var(--kr-lh-body);
  letter-spacing: var(--kr-tr-body); }

/* ——— заголовки: вес 600 и трекинг по шкале.
       .widget_heading сюда НЕ входит: в товарном виджете этот класс носят
       подписи вкладок, а не заголовки (проверено на разметке). ——— */
/* line 775, custom.scss */
h1, h2, h3,
.special-products__title,
.heading {
  font-weight: 600;
  letter-spacing: var(--kr-tr-h-lg); }

/* ——— кнопки — таблетки. Единственная форма, которую источник задаёт жёстко.
       Ссылки-кнопки (.button-link) не трогаем: это текстовые ссылки. ——— */
/* line 784, custom.scss */
.button,
.button_size-m,
.krb__btn,
.krf__btn {
  border-radius: var(--kr-radius-pill); }

/* ——— разделение только тоном: единственная лишняя тень на секции убрана,
       функциональные (модалка, панель фильтра) остаются ——— */
/* line 793, custom.scss */
.layout {
  box-shadow: none; }

/* =====================================================================
   pass139. Второй проход: главная.

   Разметку смотрел, а не угадывал, и два предположения оказались неверны:

   1) .widget_heading в товарном виджете — это подписи ВКЛАДОК, а не заголовок
      секции; заголовок носит класс .special-products__title. Правило по
      .widget_heading раздувало вкладки до 40px.
   2) Тёплую подложку секции закрывает внутренний .layout__content, который
      залит белым во всю ширину. Красить надо его.

   От центрирования заголовков отказался, и вот почему. У источника секция —
   один товар, там центрированный стек естественен. У нас секция это витрина:
   заголовок, строка вкладок на Splide-слайдере и сетка карточек — всё слева.
   Центрировать один заголовок над левой сеткой хуже, чем не центрировать
   вовсе, а строку вкладок из CSS не подвинуть: слайдер расставляет их
   трансформом. Центрирование оставляю для настоящих текстовых стеков.

   Шапка липкая и матовая. Перед этим проверил на живой странице: выезжающая
   панель внутри шапки остаётся position: fixed во весь экран (954px при
   экране 954px). sticky создаёт контекст наложения, но не блок-контейнер для
   fixed, поэтому панель цела. z-index 900 — ниже мобильной панели фильтра
   (1040), чтобы та осталась сверху.
   ===================================================================== */
/* ——— шапка: матовое стекло ——— */
/* line 823, custom.scss */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background-color: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px); }

/* ——— pass140: разделение тоном отменено.

       Была тёплая подложка у товарных полос. На живой странице это дало не
       ритм, а двойной фон: секция тёплая, внутренний контейнер белый, холст
       страницы третьего оттенка — три тона в одном экране. Разделять секции
       остаётся отступами; washes в токенах лежат, но не применяются — при
       случае пригодятся на отдельном блоке, а не на всех подряд. ——— */
/* line 839, custom.scss */
.layout[class*="special_products_tabs_18"] {
  padding-top: var(--kr-s-56);
  padding-bottom: var(--kr-s-56); }

/* ——— заголовок секции по шкале ——— */
/* line 845, custom.scss */
.special-products__title {
  font-size: var(--kr-t-h-lg);
  line-height: var(--kr-lh-h-lg);
  letter-spacing: var(--kr-tr-h-lg);
  font-weight: 600; }

/* ——— текстовые стеки: уже сетки и по центру. Здесь центрирование уместно —
       это редакторский блок, а не витрина. ——— */
/* line 854, custom.scss */
.layout blockquote,
.layout .simple-text {
  max-width: var(--kr-text-width);
  margin-left: auto;
  margin-right: auto; }

/* =====================================================================
   pass141. Третий проход: каталог и карточка товара.

   Здесь всё — системные виджеты, поэтому только стили: тон, типографика,
   формы, ритм. Структуру не трогаем, центрирования нет — каталог это витрина,
   а не стенд с одним товаром.

   Селекторы намеренно с префиксом .layout. Без него правила не долетают:
   custom.scss компилируется в theme.css и попадает в <head>, а CSS виджетов
   грузится в конце <body> и при равной специфичности выигрывает по порядку.
   Проверено замером — из шести правил долетело одно, у которого селектор
   случайно оказался тяжелее. Префикс даёт (0,2,0) против (0,1,0) у виджета;
   это честнее, чем расставлять !important.

   Что померено на живых страницах перед правкой:
   — заголовки .collection-title и .product__title: 41.6px/500. По шкале это
     heading-lg, но вес должен быть 600;
   — название товара в карточке 20px/600, описание 14px/400;
   — кнопка «в корзину» уже нашего оранжевого #ff4500, радиус 30px;
   — фильтры: 294 кнопки .filter-option__btn с радиусом 15px — самая частая
     форма на каталоге, и именно она должна стать таблеткой;
   — хлебные крошки набраны 16px, тогда как по шкале это микротекст 12px.
   ===================================================================== */
/* ——— заголовки страниц по шкале ——— */
/* line 886, custom.scss */
.layout .collection-title,
.layout .product__title {
  font-size: var(--kr-t-h-lg);
  line-height: var(--kr-lh-h-lg);
  letter-spacing: var(--kr-tr-h-lg);
  font-weight: 600; }

/* ——— карточка товара: описание по шкале.

       Название карточки трогать не стал намеренно. По шкале это subheading,
       21px, а в виджете стоит 20px/600 — разница в один пиксель. Правило
       виджета не перебивается даже двумя уровнями специфичности, то есть
       пришлось бы ставить !important ради одного пикселя. Не тот случай:
       20px/600 и так лежит внутри системы. ——— */
/* line 901, custom.scss */
.layout .product-preview .product-preview__description {
  font-size: 14px;
  line-height: var(--kr-lh-caption);
  letter-spacing: var(--kr-tr-caption);
  color: var(--kr-ink-2); }

/* ——— форма: таблетки там, где элемент по смыслу кнопка или тег ——— */
/* line 909, custom.scss */
.layout .filter .filter-option__btn,
.layout .filter-option .filter-option__btn,
.layout .button_size-l,
.layout .form-control_size-m,
.layout .js-sorting-trigger {
  border-radius: var(--kr-radius-pill); }

/* ——— микротекст: крошки набраны как основной текст, по шкале это caption ——— */
/* line 918, custom.scss */
.layout[class*="breadcrumbs"] {
  font-size: var(--kr-t-caption);
  line-height: var(--kr-lh-caption);
  letter-spacing: var(--kr-tr-caption); }

@font-face {
  font-family: "Commissioner";
  src: url("commissioner-v24-cyrillic_latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: "Commissioner";
  src: url("commissioner-v24-cyrillic_latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: "Commissioner";
  src: url("commissioner-v24-cyrillic_latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap; }
/* 700 deliberately points at the SemiBold file. Nothing in this theme is
   editable for the system widgets, and their CSS still asks for 700; mapping
   it to an already-downloaded file avoids both a second download AND the
   browser synthesising fake bold. Restore a real 700 file here if
   you ever want true Bold back. */
@font-face {
  font-family: "Commissioner";
  src: url("commissioner-v24-cyrillic_latin-600.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap; }
/* Highly specific global selector applies the font seamlessly without performance lag */
/* line 39, font.scss */
html body,
html .button,
html input,
html .heading,
html h1, html h2, html h3, html h4, html h5, html h6,
html a,
html button {
  font-family: "Commissioner", sans-serif; }

/* line 49, font.scss */
[class^="icon-"], [class*=" icon-"] {
  font-family: insales-icons !important;
  /* Keep this !important as icon fonts need absolute priority over standard typography styles */ }

/* line 6, theme.scss */
.outside-widgets .delete-widget-link {
  display: none; }

/* line 10, theme.scss */
.outside-widgets .add-widget-link {
  display: none; }

/* line 14, theme.scss */
[data-fixed-panels] .delete-widget-link {
  display: none; }

@media (max-width: 768px) {
  /* line 19, theme.scss */
  [style*="--is-editor:true"] .outside-widgets {
    display: none; }

  /* line 22, theme.scss */
  .edit-widget-buttons .widget-name {
    display: none !important; }

  /* line 25, theme.scss */
  [data-fixed-panels] [data-widget-add] {
    display: none; } }
/* line 30, theme.scss */
.micro-alert-item {
  color: #000000 !important; }