@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, читалось слабо. */
/* pass150: ход появления поднят на ступень — было 64/92/120. */
/* line 284, custom.scss */
[data-kr-hide] {
  opacity: 0;
  transform: translateY(80px); }

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

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

/* line 290, 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 301, custom.scss */
[data-kr-hide][data-kr-show="1"] {
  transition-delay: .07s; }

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

/* line 303, 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 321, custom.scss */
[data-kr-drift] {
  /* тоже 2D и без will-change — см. пояснение выше */
  transform: translateY(var(--kr-drift, 0px)); }

/* line 326, 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 335, custom.scss */
  [data-kr-hide],
  [data-kr-hide][data-kr-show] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important; }

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

  /* line 344, 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 360, custom.scss */
.layout.widget-type_system_widget_v4_benefits_5 .benefits-list .benefits-list__item {
  border-radius: 25px !important; }

/* pass94: край «шторки». Секция, которая наезжает на полосу Highlights
   (на каталоге и карточке товара это хлебные крошки), получает скруглённый
   верх — при прокрутке в её углах видно тёмную полосу под ней, и лист
   выглядит как отдельный слой, а не как обрезанный край.
   В покое углы открывают белый холст, то есть незаметны — скругление
   проявляется ровно тогда, когда шторка поехала. */
/* line 372, 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 391, 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 403, 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 439, custom.scss */
  [data-kr-sheet],
  .krf__specs,
  [data-kr-under-copy] {
    animation-name: kr-under;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both; }

  /* =============================================================
     pass157: движется ЛИСТ, а не подложка.

     Раньше отставала полоса Highlights, и из-за этого шапка отрывалась от
     неё: шапка уезжала со скоростью прокрутки, полоса — на 45 процентов
     медленнее, между ними раскрывался белый зазор до 153px, и шапка
     читалась как опустевшая. Теперь и шапка, и полоса просто уезжают
     вместе, как на главной, а единственный движущийся элемент — белый
     лист, который их накрывает. Акцент один: категории наезжают на полосу.

     Лист поднимается НАВСТРЕЧУ прокрутке (сдвиг отрицательный), поэтому
     перекрытие растёт ровно так же, как раньше росло отставание подложки.
     Ниже листа при этом раскрывается щель той же высоты — но она белая на
     белом и невидима, а следующая секция стоит на месте.

     Двигать можно ТОЛЬКО подряд идущие секции без fixed/sticky внутри:
     transform на предке делает предка containing block, и всё
     фиксированное отваливается от окна (так в pass156 сломалось боковое
     меню). Замер живого сайта: крошки чистые (91px), категории на каталоге
     чистые (248px), а дальше — fixed-форма фильтра, fixed-модалки каталога,
     sticky-галерея и fixed-кнопка покупки на карточке товара. Поэтому
     секции выбирает скрипт по факту, а не по списку имён.

     Таймлайн — тот же view() полосы, имя --kr-hl: лист лежит в другой
     ветке дерева, сам бы имя не нашёл, поэтому timeline-scope на
     .page_layout.
     ============================================================= */
  /* line 475, custom.scss */
  .layout.widget-type_widget_v4_instagram_1_2ed4af847245fb9bd23881a5559db21c {
    view-timeline-name: --kr-hl;
    view-timeline-axis: block; }

  /* line 480, custom.scss */
  .page_layout[data-kr-sheet-scope] {
    timeline-scope: --kr-hl; }

  /* line 482, custom.scss */
  [data-kr-sheet] {
    --kr-shift: calc(-1 * var(--kr-a-max, 0px));
    animation-timeline: --kr-hl;
    animation-range: cover calc(100% - var(--kr-a-d, 400px)) cover 100%; }

  /* Листу нужно быть не короче своего хода, иначе снизу из-под него выглянет
     тёмное. На каталоге под полосой две чистые секции (крошки + категории,
     339px) и запаса хватает, а на карточке товара чистые только крошки — 93px.
     Тогда продлеваем лист вниз ПСЕВДОЭЛЕМЕНТОМ. Он абсолютный, поэтому на
     поток не влияет вовсе — ни одна секция не сдвигается. Пробовал иначе,
     через padding с компенсацией отрицательным margin: padding применился, а
     margin темой перебит (селектор по атрибуту слабее), и вся карточка
     уехала вниз на 95px.

     Цвет берём inherit — это фон самой секции, то есть плашка всегда того же
     цвета, что лист, даже если фон в настройках поменяют. Лежит она под
     следующей секцией (та позиционирована и рисуется поверх), поэтому в покое
     её не видно; при прокрутке уезжает вместе с листом и накрывает полосу.
     Высоту считает скрипт и кладёт в переменную на <html>: inline-style
     секции трогать нельзя, там конфигурация виджета. */
  /* line 503, custom.scss */
  .layout[data-kr-sheet-pad]::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--kr-a-pad, 0px);
    background: inherit;
    pointer-events: none; }

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

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

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

  /* line 527, 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 536, custom.scss */
  [data-kr-sheet],
  .krf__specs,
  [data-kr-under-copy] {
    animation-name: none;
    transform: none; } }
/* Секции ниже подложки должны рисоваться ПОВЕРХ неё, иначе отставшая подложка
   проступит сквозь них: трансформированный элемент поднимается в собственный
   слой и перекрывает обычный поток. position: relative этого достаточно, а
   контекст наложения он не создаёт (z-index остаётся auto), поэтому фиксы
   вроде мобильной панели фильтра продолжают работать — см. pass93.

   pass126: то же самое для главной. Раньше правило было только у Highlights,
   и на главной «накрывающей» считалась одна секция категорий (279px) — из-за
   этого сдвиг подложки упирался в 231px, вдвое меньше возможного. Теперь
   позиционированы все секции ниже, и ограничителем снова служит высота самой
   подложки, а не случайная высота одного соседа. */
/* line 555, 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 577, 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 606, 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 644, custom.scss */
.banner .img-ratio img {
  border-radius: var(--product-border-radius, 25px); }

/* pass150: параллакс на промо-баннерах ВЕРНУЛСЯ.

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

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

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

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

/* line 686, 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 706, custom.scss */
.banner .krb-cap__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

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

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

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

   Радиус — на самом элементе: видео всегда уходит в отдельный слой
   композитинга, а скругление предка Safari к такому слою не применяет и
   срезает углы. Та же болезнь резала фото товаров (pass114) и промо-баннеры
   (pass116-118). */
/* line 739, 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 752, custom.scss */
.banner .krb-video.is-live {
  opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  /* line 757, custom.scss */
  .banner .krb-video {
    transition: none; } }
@media (prefers-reduced-motion: reduce) {
  /* line 761, 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 788, 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 831, 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 841, custom.scss */
h1, h2, h3,
.special-products__title,
.heading {
  font-weight: 600;
  letter-spacing: var(--kr-tr-h-lg); }

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

/* ——— разделение только тоном: единственная лишняя тень на секции убрана,
       функциональные (модалка, панель фильтра) остаются ——— */
/* line 859, 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), чтобы та осталась сверху.
   ===================================================================== */
/* ——— pass143: липкая матовая шапка отменена.

       Замер на живой странице: при прокрутке её top уходит в −108, −252, −513 —
       она НЕ липнет. `position: sticky` работает только внутри своего родителя,
       а шапка лежит в контейнере, который заканчивается сразу за ней. То есть
       правило ничего не давало, зато добавляло полупрозрачную полосу с
       размытием, которая на главной проезжала поверх анимированного героя —
       единственная моя правка, попадавшая ему на глаза.

       Если липкая шапка нужна по-настоящему, это отдельная работа: её придётся
       выносить из своего контейнера, а он системный. ——— */
/* ——— pass151: тон товарным полосам снят — как и предполагали.

       Пробовали дважды. В pass139 он дал полосатость из трёх оттенков (тёплая
       секция, белый контейнер, холст третьего тона). В pass150 холст был уже
       ровно белым и красился сам контейнер — тонов стало два, но всё равно не
       то. Больше не возвращаемся: страница остаётся ровно белой, секции
       разделяются отступами. ——— */
/* ——— pass140: разделение тоном отменено.

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

/* ——— заголовок секции по шкале ——— */
/* line 921, 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 930, 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 962, 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 977, 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 985, 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 994, custom.scss */
.layout[class*="breadcrumbs"] {
  font-size: var(--kr-t-caption);
  line-height: var(--kr-lh-caption);
  letter-spacing: var(--kr-tr-caption); }

/* =====================================================================
   pass142. Четвёртый проход: подвал, корзина, внутренности карточки.

   Замеры перед правкой:
   — подвал: ссылки 14.4px/400 основным чёрным, заголовки колонок 14.4px/500.
     По шкале весь подвал — микротекст 12px. Правила для него лежат НЕ здесь,
     а в самом виджете (widget_v4_footer_18_1/snippet.scss): подвал у нас свой,
     не системный, а его собственный стиль грузится последним и перебивает
     custom.scss — вместо войны специфичностей проще писать там, где место;
   — корзина: заголовок страницы носит только класс .heading, без своего
     имени, поэтому целюсь через секцию виджета корзины;
   — карточка: счётчик отзывов набран серым #858383 — уводим в нашу тёплую
     третичную ступень.

   Селекторы сразу с префиксом .layout: без него правила не долетают, это
   выяснили в прошлом проходе.
   ===================================================================== */
/* ——— корзина: заголовок страницы по шкале. У него нет своего класса,
       только .heading, поэтому целимся через секцию виджета ——— */
/* line 1020, custom.scss */
.layout[class*="cart_3"] .heading {
  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 1028, custom.scss */
.layout .product .product__reviews-count {
  color: var(--kr-ink-3); }

@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; }