/* Start:/local/templates/starks_desktop/components/bitrix/catalog.element/starks/style.css?178794398230986*/
/* ============================================================
   Карточка товара — десктопный слой.

   Разметка мобильная (см. include в template.php), здесь только раскладка.
   Мобильная карточка — одна колонка: галерея, название, цена, размеры,
   аккордеоны, липкая панель покупки внизу экрана. На десктопе всё это
   должно поместиться в два столбца, чтобы цена и кнопка были видны сразу,
   без прокрутки, — как у обоих образцов (docs/stage1-desktop-references.md).

   Раскладка сделана сеткой поверх готового потока элементов: обёрток
   в чужой разметке нет, и добавлять их значит форкать мобильный шаблон.
   Селекторы от .sw-d — стили мобильного шаблона ядро подключает после наших,
   и правило одинаковой силы проиграло бы по порядку.
   ============================================================ */

/* ---------- ГАЛЕРЕЯ: ОБЩИЙ СЛОЙ ----------
   Вне медиазапроса намеренно. Скруглённые углы и стрелки нужны везде, где
   витриной управляют мышью, — не только на широком экране. Раньше эти
   правила лежали внутри `min-width: 1024px`, и при масштабе браузера 125%
   на экране 1280px (то есть ~1024 CSS-пикселя и меньше) карточка выглядела
   как до правки: прямые углы, стрелок нет. Со стороны это неотличимо
   от «изменения не доехали».
   ============================================================ */

.sw-d .sw-pdp .sw-gal{ position:relative; }

/* Кнопка «Показать ещё фото» — атрибут галереи-сетки (≥1024): на
   планшетном слайдере кадры и так листаются все, кнопке там не место.
   Скрипт ставит её не глядя на ширину — прячем здесь. */
.sw-d .sw-gal__morebtn{ display:none; }

.sw-d .sw-pdp .sw-gal__track{
  /**
   * Скругление, как у карточек, панелей и кнопок.
   *
   * overflow здесь НЕ трогаем. Мобильная лента живёт на `overflow-x: auto`,
   * и именно им листают кадры мышью и трекпадом; `overflow: hidden` этот
   * способ листания отнимал. Обрезку по скруглению даёт сам `overflow-x:
   * auto` — по спецификации второй оси при этом тоже нельзя быть visible,
   * значит края обрезаются и без hidden.
   */
  border-radius:var(--sw-r-lg);
}

/* Стрелки ставит скрипт шаблона — и только если кадров больше одного. */
.sw-d .sw-gal__nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:2;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(2px);
  border:1px solid var(--sw-line);
  border-radius:var(--sw-r-pill);
  color:var(--sw-fg);
  cursor:pointer;
  box-shadow:var(--sw-lift-soft);
  transition:border-color var(--sw-dur-hover) var(--sw-ease),
             background var(--sw-dur-hover) var(--sw-ease),
             opacity var(--sw-dur-hover) var(--sw-ease);

  /* По умолчанию — поверх фото у краёв кадра. Место снаружи есть только
     в широкой колонке, там правило ниже выносит их за пределы. */
  inset-inline-start:auto;
  inset-inline-end:auto;
}

.sw-d .sw-gal__nav--prev{ inset-inline-start:var(--sw-s-3); }
.sw-d .sw-gal__nav--next{ inset-inline-end:var(--sw-s-3); }

.sw-d .sw-gal__nav:hover{ border-color:var(--sw-hover-line); }

/* На краю ленты кнопка гаснет, но остаётся на месте: исчезающая кнопка
   дёргает вёрстку и заставляет ловить её глазами заново. */
.sw-d .sw-gal__nav[disabled]{
  opacity:.35;
  cursor:default;
  box-shadow:none;
}

@media (min-width: 1024px){

  .sw-d .sw-pdp{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--sw-buybox);

    /**
     * Строк ровно восемь — по числу блоков правой колонки, и последняя
     * поглощает запас (1fr): пока галерея выше правой колонки, весь
     * остаток её высоты живёт в строке аккордеонов, и их разворот
     * съедает этот запас, НЕ сдвигая полки «Похожие/Вы смотрели»
     * (замечание заказчика 30.08.2026: полки уезжали вниз при пустом
     * месте). Не помещается — тогда строка растёт и полки отодвигаются.
     *
     * До этого галерея спанила 12 строк «с запасом» — пустые спанируемые
     * строки получали куски высоты галереи при трек-сайзинге, и под
     * карточкой висела пустота в сотни пикселей (замер 30.08.2026:
     * три пустые строки по 142px).
     */
    grid-template-rows:repeat(7, auto) 1fr;
    column-gap:var(--sw-gap-lg);
    align-items:start;

    /**
     * Мобильная карточка резервирует низ под липкую панель покупки
     * (padding-bottom: var(--sw-bar) + var(--sw-s-4) ≈ 64px). На широком
     * экране панель перенесена в колонку и не липнет, а резерв оставался —
     * и перед «С этим товаром покупают» (он печатается ПОСЛЕ .sw-pdp)
     * зазор выходил вчетверо больше, чем между подборками внутри карточки.
     */
    padding-bottom:0;
  }

  /* ---------- ЛЕВАЯ КОЛОНКА: ГАЛЕРЕЯ ----------
     Занимает первые строки сетки, чтобы правая колонка выстроилась
     рядом с ней, а не под ней.

     span 8 — с запасом. Блоков справа семь (название, артикул, цена,
     наличие, подпись размеров, сами размеры, панель покупки), но часть
     из них может не выводиться: у товара без артикула или без торговых
     предложений их меньше. Лишние строки схлопываются в нулевую высоту,
     а вот нехватка сразу выкидывает панель покупки под галерею —
     ровно это и случилось при span 6. */
  .sw-d .sw-pdp .sw-gal{
    grid-column:1;
    /* Ровно по числу строк правой колонки: «запасные» пустые строки
       в спане ломают трек-сайзинг (см. комментарий у grid-template-rows). */
    grid-row:1 / span 8;

    /**
     * position оставляем relative (он приходит из общего слоя выше).
     *
     * Здесь стояло `position:static` — след от отказа от липкой галереи.
     * Липкость убирают, убрав `sticky`, а не заменой на `static`: static
     * отнимает у .sw-gal роль точки отсчёта, и всё, что позиционируется
     * от неё абсолютно — стрелки, точки, сердце, — начинало считать края
     * от <body>. Отсюда и была жалоба заказчика: стрелки стояли по краям
     * ЭКРАНА (замер на бою 26.08.2026: x=12 и x=1384 при окне 1440).
     *
     * Липким фото при этом не становится: sticky ему никто не задаёт.
     */

    /**
     * Мобильная витрина растягивает галерею на всю ширину экрана
     * отрицательными полями (margin: 12px -14px). На десктопе это
     * выпирало на 14px влево за край контейнера.
     */
    margin-inline:0;
  }

  /**
   * ГАЛЕРЕЯ-СЕТКА ВМЕСТО СЛАЙДЕРА (правка заказчика 30.08.2026,
   * образец — карточка Lamoda): все кадры видны сразу, соотношение 3:4.
   *
   * Раскладка строками: по два кадра в строке; при НЕЧЁТНОМ числе кадров
   * последняя строка — из трёх (правила заказчика: 2 → 2; 3 → 3 в одну
   * строку; 4 → 2+2; 5 → 2+3). Сетка из 6 колонок: обычный кадр занимает
   * три (полстроки), кадр «строки из трёх» — две.
   *
   * Слайдер остаётся ниже 1024px (планшет): там сетка из восьми кадров
   * отодвинула бы цену и кнопку за несколько экранов.
   */
  .sw-d .sw-pdp .sw-gal__track{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:12px;
    overflow:visible;
    scroll-snap-type:none;
  }

  .sw-d .sw-pdp .sw-gal__slide{
    grid-column:span 3;
    aspect-ratio:3 / 4;
    height:auto;
    max-height:none;
    border-radius:var(--sw-r-lg);
    overflow:hidden;
  }

  /* До пяти кадров: строка из трёх — только при нечётном их числе
     (правила заказчика: 2→2; 3→3 одной строкой; 4→2+2; 5→2+3).
     Первый селектор — случай «всего три» (первый кадр тоже в тройке),
     второй — последние три при другом нечётном количестве. */
  .sw-d .sw-pdp .sw-gal__slide:first-child:nth-last-child(3),
  .sw-d .sw-pdp .sw-gal__slide:first-child:nth-last-child(3) ~ .sw-gal__slide,
  .sw-d .sw-pdp .sw-gal__slide:first-child:nth-last-child(odd):not(:only-child) ~ .sw-gal__slide:nth-last-child(-n+3){
    grid-column:span 2;
  }

  /* От шести кадров (правка заказчика 30.08.2026): пара крупных —
     только первая строка, все остальные кадры по три в строке. */
  .sw-d .sw-pdp .sw-gal__slide:first-child:nth-last-child(n+6) ~ .sw-gal__slide:nth-child(n+3){
    grid-column:span 2;
  }

  /* Кадры видны все и сразу — листалка не нужна. */
  .sw-d .sw-gal__nav,
  .sw-d .sw-gal__dots{ display:none; }

  /* ---------- СВЁРНУТАЯ ГАЛЕРЕЯ: ПЕРВЫЕ ПЯТЬ КАДРОВ ----------
     Как на Lamoda: больше пяти кадров — показываем пять (строки 2+3),
     остальные разворачивает кнопка «Показать ещё фото» на пятом кадре
     (класс is-capped и кнопку ставит script.js мобильного компонента).

     Спаны 2+3 здесь свои: общее odd-правило выше считает ВСЕ кадры
     в разметке, а видимых в свёрнутом виде всегда пять. */
  .sw-d .sw-pdp .sw-gal.is-capped .sw-gal__slide:nth-child(n+6){ display:none; }

  .sw-d .sw-pdp .sw-gal.is-capped .sw-gal__slide:nth-child(-n+2){ grid-column:span 3; }
  .sw-d .sw-pdp .sw-gal.is-capped .sw-gal__slide:nth-child(n+3):nth-child(-n+5){ grid-column:span 2; }

  .sw-d .sw-gal__morebtn{
    position:absolute;
    left:50%;
    bottom:var(--sw-s-4);
    translate:-50% 0;
    z-index:2;
    display:inline-flex;
    align-items:center;
    padding:12px 20px;
    border:0;
    border-radius:var(--sw-r);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(2px);
    color:var(--sw-fg);
    font:inherit;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:var(--sw-lift-soft);
    transition:background var(--sw-dur-hover) var(--sw-ease);
  }
  .sw-d .sw-gal__morebtn:hover{ background:#fff; }

  /**
   * Галерея — во всю левую зону (две «колонки картинок» из трёх колонок
   * страницы). Прежний предел 620px был нужен слайдеру с одним кадром;
   * у сетки кадры делят ширину сами. Явная ширина, а не auto: у
   * грид-элемента с width:auto растягивание по колонке отключается
   * (грабли 26.08.2026 — галерея в 89px).
   */
  .sw-d .sw-pdp .sw-gal{
    width:100%;
    max-width:none;
  }

  /* ---------- ПРАВАЯ (ТРЕТЬЯ) КОЛОНКА ----------
     С 30.08.2026 (правка заказчика) сюда же переехали аккордеоны:
     страница делится на «две колонки картинок + колонка информации».

     Строки заданы ЯВНО, а не потоком: в разметке панель покупки стоит
     ПОСЛЕ аккордеонов (на телефоне она липкая и место в потоке ей
     неважно), а в колонке кнопка обязана стоять выше характеристик
     и отзывов — главное действие не должно тонуть под ними. Блоки,
     которых у товара нет, схлопывают свою строку в ноль. */
  .sw-d .sw-pdp > .sw-pdp__name,
  .sw-d .sw-pdp > .sw-pdp__art,
  .sw-d .sw-pdp > .sw-pdp__pricerow,
  .sw-d .sw-pdp > .sw-pdp__stock,
  .sw-d .sw-pdp > .sw-pdp__sizehead,
  .sw-d .sw-pdp > .sw-sizes,
  .sw-d .sw-pdp > .sw-buybar,
  .sw-d .sw-pdp > .sw-folds{
    grid-column:2;
  }

  .sw-d .sw-pdp > .sw-pdp__name{     grid-row:1; }
  .sw-d .sw-pdp > .sw-pdp__art{      grid-row:2; }
  .sw-d .sw-pdp > .sw-pdp__pricerow{ grid-row:3; }
  .sw-d .sw-pdp > .sw-pdp__stock{    grid-row:4; }
  .sw-d .sw-pdp > .sw-pdp__sizehead{ grid-row:5; }
  .sw-d .sw-pdp > .sw-sizes{         grid-row:6; }
  .sw-d .sw-pdp > .sw-buybar{        grid-row:7; }
  .sw-d .sw-pdp > .sw-folds{         grid-row:8; }

  /* ---------- ВО ВСЮ ШИРИНУ ---------- */
  .sw-d .sw-pdp > .sw-more,
  .sw-d .sw-pdp > .sw-viewed{
    grid-column:1 / -1;
  }

  /* ---------- ПАНЕЛЬ ПОКУПКИ ----------
     На телефоне она прилипает к низу экрана поверх контента. На десктопе
     это неуместно: кнопка должна стоять в колонке под размерами. */
  .sw-d .sw-pdp > .sw-buybar{
    position:static;
    padding:0;
    margin-top:var(--sw-s-4);
    background:transparent;
    box-shadow:none;
    border:0;
  }

  .sw-d .sw-pdp > .sw-buybar .sw-buybar__back{ display:none; }  /* «назад» — жест телефона */

  /**
   * Кнопка покупки — главное действие экрана, и выглядеть она должна
   * соответственно. На телефоне её размер задаёт липкая панель во всю
   * ширину; здесь панель обычный блок, и без явной ширины кнопка
   * съёживается до размера подписи.
   */
  .sw-d .sw-pdp > .sw-buybar .sw-buybar__add{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;

    /**
     * flex сбрасываем обязательно.
     *
     * Мобильное правило задаёт кнопке `flex: 1 1 0`, рассчитывая на строку:
     * в горизонтальной панели это «займи всю оставшуюся ширину». Мы же
     * поставили панели flex-direction: column — и тот же flex-basis: 0
     * стал относиться к ВЫСОТЕ. Кнопка схлопывалась в 23px вместо 52
     * и выглядела тонкой полоской.
     */
    flex:0 0 auto;
    height:52px;
    font-size:16px;
    font-weight:600;
    border-radius:var(--sw-r);
    cursor:pointer;
    transition:filter var(--sw-dur-hover) var(--sw-ease);
  }

  .sw-d .sw-pdp > .sw-buybar .sw-buybar__add:hover{ filter:brightness(1.06); }

  /* Степпер количества под кнопкой, а не рядом: в колонке 380px
     они вдвоём не помещаются, и кнопка теряет в ширине. */
  .sw-d .sw-pdp > .sw-buybar{
    display:flex;
    flex-direction:column;
    gap:var(--sw-s-3);
  }

  /* ---------- ТИПОГРАФИКА ----------
     Мобильные кегли рассчитаны на 360px; в колонке 380px имя товара
     и цена должны звучать крупнее, иначе первый экран выглядит бледно. */
  .sw-d .sw-pdp__name{ font-size:24px; line-height:1.25; margin-top:0; }
  .sw-d .sw-pdp__price{ font-size:30px; }

  /* ---------- ГАЛЕРЕЯ ----------
     Лента с прокруткой остаётся: она уже работает и управляется скриптом
     мобильного шаблона. Меняем только размер — на десктопе фото товара
     может занять высоту экрана, а не 44vh, как на телефоне. */
  .sw-d .sw-gal__track{ max-height:none; }

  .sw-d .sw-gal__dots{ margin-top:var(--sw-s-3); }

  /* ---------- РАЗМЕРЫ ----------
     На телефоне это тап-таргеты 44px в прокручиваемой строке.
     На десктопе места хватает — переносим в несколько рядов
     и добавляем отклик на курсор. */
  .sw-d .sw-sizes{ flex-wrap:wrap; overflow:visible; }
  .sw-d .sw-size{ transition:border-color var(--sw-dur-hover) var(--sw-ease),
                             background var(--sw-dur-hover) var(--sw-ease); }
  .sw-d .sw-size:not(.is-off):hover{ border-color:var(--sw-accent); cursor:pointer; }

  /* ---------- АККОРДЕОНЫ ----------
     Оставляем аккордеонами, а не вкладками: содержимое у них разной длины,
     и вкладки заставили бы человека угадывать, где что.

     Здесь стояло `max-width: 80ch` — типографский предел строки по
     читаемости. Убран по решению Андрея 27.08.2026: на широком экране
     текст занимал половину вкладки, и пустота справа читалась как дефект
     вёрстки, а не как намеренный предел. */
  .sw-d .sw-folds{ margin-top:var(--sw-s-6); }
  .sw-d .sw-fold__head{ cursor:pointer; }
  .sw-d .sw-fold__head:hover{ background:var(--sw-hover-bg); }

  /* Характеристики: колонка «значения от отметки 300px» (замечание
     Андрея 28.08.2026) снята 30.08.2026 вместе с переездом аккордеонов
     в колонку 360px — там она не помещалась, а исходная жалоба
     («Цвет …… Чёрный разлетелись на весь контейнер») в узкой колонке
     не воспроизводится: мобильная пара «название слева — значение
     справа» стоит компактно. */

  /* ============================================================
     ПОДБОРКИ ПОД КАРТОЧКОЙ — ЕДИНЫЙ ВИД

     Три блока: «Похожие товары», «С этим товаром покупают», «Вы смотрели».
     Раньше каждый выглядел по-своему: первые два — мобильной лентой
     с плитками по 559px, третий — вообще другой вёрсткой (.sw-vcard),
     без рамки и без единой типографики.

     Приводим к одному: ряд плиток каталожного размера, ровно по контейнеру,
     ОДНА строка. Что не поместилось — скрыто до нажатия «Посмотреть все»
     (кнопку ставит скрипт шаблона, и только если есть что показывать).
     ============================================================ */

  .sw-d .sw-more .sw-strip{ overflow:visible; }

  /**
   * Сам #sw-viewed-strip — просто контейнер.
   *
   * Раньше сетка вешалась на него, но теперь блок наполняется ответом
   * /local/ajax/sw_viewed.php, а там приходит готовая разметка компонента
   * со своей .sw-grid внутри. Сетка в сетке схлопывала карточки до 57px.
   */
  .sw-d #sw-viewed-strip{
    display:block;
    margin-inline:0;
    padding-inline:0;
    width:auto;
    overflow:visible;
  }

  .sw-d .sw-more .sw-grid,
  .sw-d .sw-also .sw-grid,
  .sw-d #sw-viewed-strip .sw-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:var(--sw-gap);
    margin-inline:0;
    padding-inline:0;
    width:auto;
    overflow:visible;
  }

  .sw-d #sw-viewed-strip .sw-catalog{ margin-inline:0; padding-inline:0; }

  /* Пагинатор и пустое состояние компонента внутри подборок не нужны. */
  .sw-d #sw-viewed-strip .sw-pager,
  .sw-d #sw-viewed-strip .sw-empty{ display:none; }

  /**
   * Карточке возвращаем обычный размер.
   *
   * В мобильной ленте она объявлена как `flex: 0 0 46%` — «чуть меньше
   * половины экрана, дальше прокрутка пальцем». В нашей сетке это давало
   * плитки по 559px, вдвое крупнее каталожных: доля считалась от ширины
   * всей колонки.
   */
  .sw-d .sw-more .sw-card,
  .sw-d .sw-also .sw-card,
  .sw-d #sw-viewed-strip .sw-card,
  .sw-d .sw-vcard{
    flex:0 0 auto;
    width:auto;
    min-width:0;
    scroll-snap-align:none;
  }

  .sw-d .sw-more .sw-catalog,
  .sw-d .sw-also .sw-catalog{ margin-inline:0; padding-inline:0; }

  /**
   * Одна строка по умолчанию: скрываем всё, что не поместилось.
   * Класс is-open ставит кнопка «Посмотреть все».
   */
  .sw-d .sw-shelf:not(.is-open) .sw-card:nth-child(n+4),
  .sw-d .sw-shelf:not(.is-open) .sw-vcard:nth-child(n+4){ display:none; }

  /* ---------- ВЫ СМОТРЕЛИ: как все ----------
     Блок собирается скриптом и своей рамки не имеет. Дотягиваем его
     до вида каталожной карточки: та же подложка, рамка, радиус, отклик
     на курсор. Кнопки размера и корзины здесь невозможны — в истории
     просмотров лежат только название, цена и фото, торговых предложений
     там нет. Поэтому карточка кликабельна целиком и ведёт в товар. */
  .sw-d .sw-vcard{
    display:flex;
    flex-direction:column;
    background:var(--sw-surface);
    border:1px solid var(--sw-line-soft);
    border-radius:var(--sw-r-lg);
    overflow:hidden;
    transition:border-color var(--sw-dur-hover) var(--sw-ease),
               box-shadow var(--sw-dur-hover) var(--sw-ease),
               transform var(--sw-dur-hover) var(--sw-ease);
  }

  .sw-d .sw-vcard:hover{
    border-color:var(--sw-hover-line);
    box-shadow:var(--sw-hover-lift);
    transform:translateY(-2px);
    color:inherit;
  }

  .sw-d .sw-vcard__shot{
    aspect-ratio:1 / 1.25;   /* та же пропорция, что у карточки каталога */
    border-radius:0;
  }

  .sw-d .sw-vcard__nm{
    font-size:14px;
    margin:0;
    padding:var(--sw-s-3) var(--sw-s-3) 0;
  }

  .sw-d .sw-vcard__pr{
    font-size:17px;
    margin:0;
    padding:var(--sw-s-2) var(--sw-s-3) var(--sw-s-3);
  }

  /* ---------- ШАПКА БЛОКА: заголовок слева, «Посмотреть все» справа ---------- */
  .sw-d .sw-shelf__head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--sw-s-4);
    margin-bottom:var(--sw-s-3);
  }

  .sw-d .sw-shelf__head > h2{ margin:0; }

  .sw-d .sw-shelf__all{
    flex:0 0 auto;
    background:none;
    border:0;
    padding:0;
    color:var(--sw-fg-2);
    font:inherit;
    font-size:14px;
    cursor:pointer;
    border-bottom:1px dashed currentColor;
    transition:color var(--sw-dur-hover) var(--sw-ease);
  }

  .sw-d .sw-shelf__all:hover{ color:var(--sw-accent); }
}

/* На широком экране помещается четвёртая колонка — как в каталоге. */
@media (min-width: 1366px){
  .sw-d .sw-more .sw-grid,
  .sw-d .sw-also .sw-grid,
  .sw-d #sw-viewed-strip .sw-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }

  .sw-d .sw-shelf:not(.is-open) .sw-card:nth-child(n+4),
  .sw-d .sw-shelf:not(.is-open) .sw-vcard:nth-child(n+4){ display:revert; }

  .sw-d .sw-shelf:not(.is-open) .sw-card:nth-child(n+5),
  .sw-d .sw-shelf:not(.is-open) .sw-vcard:nth-child(n+5){ display:none; }
}

/**
 * Таблица размеров: на телефоне шторка снизу, на десктопе — панель справа,
 * как у Lamoda. Разметка одна и та же (.sw-sheet), меняется сторона выезда.
 *
 * Менять надо ИМЕННО так, а не через inset: панель у мобильного шаблона —
 * position:relative внутри flex-контейнера .sw-sheet, и смещения на ней
 * не работают вовсе. Выезд сделан на transform: translateY(100%) → 0,
 * поэтому десктопный вариант переопределяет обе оси — иначе панель
 * появлялась в левом нижнем углу и уезжала за край экрана.
 *
 * Само содержимое панели (таблица по типу изделия) — отдельная задача,
 * см. docs/stage1-size-table.md.
 */
@media (min-width: 1024px){
  .sw-d .sw-sheet{
    align-items:stretch;      /* на телефоне flex-end — панель у нижнего края */
    justify-content:flex-end; /* на десктопе прижимаем к правому */
  }

  /**
   * Анимацию выезда на десктопе отключаем совсем.
   *
   * Мобильный вариант анимирует transform: translateY(100%) → 0. Попытка
   * заменить ось на translateX дала панель, застрявшую за правым краем:
   * переход стартует, когда шторка ещё скрыта атрибутом hidden, и до
   * конечного состояния не доходит. Городить обход ради выезда справа
   * не стоит — панель и так появляется мгновенно, а показ и скрытие
   * управляются тем же hidden, что и на телефоне.
   */
  /**
   * Ширина панели — по содержимому, а не фиксированная.
   *
   * Таблицы размеров бывают широкими: у дождевика это «Размер / Рост /
   * Обхват бёдер / Обхват груди / Обхват талии», пять колонок, и в 420px
   * они не влезали — правый край срезался. Ячейки внутри с white-space:nowrap,
   * поэтому ужать таблицу нельзя, её нужно вместить.
   *
   * fit-content растягивает панель под таблицу, min-width держит форму
   * у коротких таблиц, max-width не даёт занять весь экран: панель поверх
   * страницы, за ней должен оставаться виден товар.
   */
  .sw-d .sw-sheet__panel{
    width:fit-content;
    min-width:420px;
    max-width:min(92vw, 980px);
    height:100%;
    max-height:none;
    border-radius:var(--sw-r-lg) 0 0 var(--sw-r-lg);
    transform:none;
    transition:none;
  }

  .sw-d .sw-sheet.is-open .sw-sheet__panel{ transform:none; }

  /**
   * Если таблица не влезла даже в максимальную ширину (бывает у таблиц
   * с семью колонками), она прокручивается внутри панели по горизонтали.
   * Прокрутка на самой панели, а не на теле: иначе уезжает и заголовок
   * со ссылкой «закрыть».
   */
  .sw-d .sw-sizesheet{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .sw-d .sw-sizesheet table{ width:max-content; min-width:100%; }
}

/* End */


/* Start:/local/templates/starks_mobile/components/bitrix/catalog.element/starks/style.css?178784559420947*/
/* Карточка товара. Вёрстка — design-system/components/product-detail.html */

.sw-pdp {
  /* Панель покупки липкая и висит над контентом — оставляем под неё место,
     иначе она накрывает последний блок страницы. */
  padding-bottom: calc(var(--sw-bar) + var(--sw-s-4));
}

/* ---------- Галерея ---------- */
.sw-gal { margin: var(--sw-s-3) calc(var(--sw-s-4) * -1) 0; }
.sw-gal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sw-gal__track::-webkit-scrollbar { display: none; }

.sw-gal__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.15;
  /* Но не выше 44vh: иначе на телефоне галерея съедает пол-экрана и цена
     с размерами уходят под липкую кнопку. Фото object-fit: contain —
     при ограничении по высоте просто вписывается, без обрезки. */
  max-height: 44vh;
  background: var(--sw-shot);
  position: relative;
}
/* Селектор нарочно длиннее необходимого: стили шаблона сайта грузятся
   после стилей компонентов, и любое общее правило для img оттуда
   перебило бы высоту при равной специфичности. */
.sw-gal .sw-gal__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Фото открывает просмотрщик — курсор должен об этом говорить. */
  cursor: zoom-in;
  padding: var(--sw-s-3);
  mix-blend-mode: multiply;
}

.sw-gal__dots { display: flex; justify-content: center; gap: 5px; padding-top: var(--sw-s-2); }
/* Точки — кнопки: по ним листают кадры там, где ленту не потянешь пальцем.
   Зона нажатия больше самой точки, иначе в неё не попасть ни курсором,
   ни пальцем. */
.sw-gal__dots button {
  border: 0;
  padding: 6px 2px;
  margin: -6px 0;
  background: none;
  cursor: pointer;
  display: block;
}
.sw-gal__dots button::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: var(--sw-r-pill);
  background: var(--sw-line);
  transition: width var(--sw-dur) var(--sw-ease);
}
.sw-gal__dots button.is-on::before { background: var(--sw-graphite); width: 15px; }
.sw-gal__dots button:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }

/* ---------- Заголовок и цена ---------- */
.sw-pdp__name {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.012em;
  line-height: 1.25;
  margin: var(--sw-s-4) 0 0;
}
.sw-pdp__art {
  margin: var(--sw-s-1) 0 0;
  font-family: var(--sw-mono);
  font-size: 11.5px;
  color: var(--sw-hint);
}

.sw-pdp__pricerow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sw-s-2);
  margin-top: var(--sw-s-3);
}
.sw-pdp__price {
  font-size: 25px;
  font-weight: 780;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sw-pdp__price--ask { font-size: 17px; color: var(--sw-hint); }
.sw-pdp__old { font-size: 13px; color: var(--sw-hint); font-variant-numeric: tabular-nums; }

.sw-pdp__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: var(--sw-s-3) 0 0;
  font-size: 12.5px;
  color: var(--sw-ok);
}
.sw-pdp__stock i { width: 6px; height: 6px; border-radius: var(--sw-r-pill); background: currentColor; flex: none; }
.sw-pdp__stock span { color: var(--sw-hint); }
.sw-pdp__stock.is-out { color: var(--sw-hint); }

/* ---------- Размеры ---------- */
.sw-pdp__sizehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sw-s-3);
  margin-top: var(--sw-s-5);
  font-size: 13px;
}
.sw-pdp__sizehead b { font-family: var(--sw-mono); font-size: 12.5px; }

.sw-sizes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--sw-s-2); }
.sw-size {
  min-width: var(--sw-tap);
  height: var(--sw-tap);
  padding: 0 14px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r);
  background: var(--sw-surface);
  font: inherit;
  font-family: var(--sw-mono);
  font-size: 13px;
  color: var(--sw-fg);
  cursor: pointer;
}
.sw-size[aria-pressed="true"] {
  /* Как в сетке: сплошной акцент + белый текст (правка заказчика
     про «красные кнопки с чёрным шрифтом» в светлой теме). */
  border-color: var(--sw-accent);
  background: var(--sw-accent);
  color: var(--sw-accent-ink);
  font-weight: 600;
}
/* Недоступный размер виден и перечёркнут: это информация, а не мусор. */
.sw-size[disabled] { opacity: .38; text-decoration: line-through; cursor: default; }
.sw-size:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }

/* ---------- Аккордеоны ---------- */
.sw-folds {
  margin-top: var(--sw-s-5);
  border: 1px solid var(--sw-line-soft);
  border-radius: var(--sw-r-lg);
  overflow: hidden;
  background: var(--sw-surface);
}
.sw-fold + .sw-fold { border-top: 1px solid var(--sw-line-soft); }
.sw-fold__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s-3);
  width: 100%;
  min-height: 52px;
  padding: var(--sw-s-3) var(--sw-s-4);
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--sw-fg);
  text-align: left;
  cursor: pointer;
}
.sw-fold__head svg { color: var(--sw-hint); transition: transform var(--sw-dur) var(--sw-ease); flex: none; }
.sw-fold__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.sw-fold__body {
  padding: 0 var(--sw-s-4) var(--sw-s-4);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sw-fg-2);
}
.sw-fold__body p { margin: 0 0 var(--sw-s-2); }
.sw-fold__body img { border-radius: var(--sw-r); }

.sw-specs { margin: 0; }
.sw-specs > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sw-s-4);
  padding: 8px 0;
  border-top: 1px solid var(--sw-line-soft);
}
.sw-specs > div:first-child { border-top: 0; }
.sw-specs dt { color: var(--sw-hint); font-size: 12.5px; flex: none; max-width: 55%; }
.sw-specs dd { margin: 0; font-size: 12.5px; text-align: right; font-weight: 600; color: var(--sw-fg); }

.sw-fold__more { display: flex; gap: var(--sw-s-4); margin: var(--sw-s-3) 0 0; }
.sw-fold__more a { font-size: 12.5px; color: var(--sw-fg-2); }

/* ---------- Видео о товаре (аккордеон «Видео») ----------
   Пропорции держит контейнер, iframe просто заполняет его. Потолок ширины —
   чтобы на десктопе, где тело аккордеона во всю вкладку, плеер не разрастался
   в полэкрана высоты. */
.sw-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 900px;
}
.sw-video + .sw-video { margin-top: var(--sw-s-3); }
.sw-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--sw-r-lg);
  background: #000;
}

/* ---------- Ссылка «Таблица размеров» ---------- */
.sw-sizelink {
  flex: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--sw-fg-2);
  border-bottom: 1px dashed var(--sw-hint);
  line-height: 1.3;
  cursor: pointer;
}
.sw-sizelink:active { color: var(--sw-accent); border-color: var(--sw-accent); }

/* ---------- Шторка снизу ---------- */
.sw-noscroll { overflow: hidden; }

.sw-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
}
.sw-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 14, .5);
  opacity: 0;
  transition: opacity var(--sw-dur-sheet) var(--sw-ease);
}
.sw-sheet.is-open .sw-sheet__scrim { opacity: 1; }
.sw-sheet__panel {
  position: relative;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--sw-surface);
  border-radius: var(--sw-r-lg) var(--sw-r-lg) 0 0;
  box-shadow: var(--sw-sheet);
  transform: translateY(100%);
  transition: transform var(--sw-dur-sheet) var(--sw-ease);
}
.sw-sheet.is-open .sw-sheet__panel { transform: translateY(0); }
.sw-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-s-3);
  padding: var(--sw-s-4);
  border-bottom: 1px solid var(--sw-line-soft);
  flex: none;
}
.sw-sheet__head b { font-size: 15px; font-weight: 700; }
.sw-sheet__x {
  width: var(--sw-tap);
  height: var(--sw-tap);
  margin: calc(var(--sw-tap) * -.25) calc(var(--sw-tap) * -.25) calc(var(--sw-tap) * -.25) 0;
  border: 0;
  background: none;
  color: var(--sw-hint);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sw-sheet__body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sw-s-4);
  padding-bottom: calc(var(--sw-s-4) + env(safe-area-inset-bottom));
}

/* ---------- Содержимое таблицы размеров ---------- */
.sw-sizesheet__load,
.sw-sizesheet__empty {
  padding: var(--sw-s-5) var(--sw-s-3);
  text-align: center;
  color: var(--sw-hint);
  font-size: 13.5px;
}
/* Таблицы приходят из include-файлов сайта — приводим к мобильному виду.
   Широкие таблицы (6–7 колонок) не ужимаем: числа-диапазоны при переносе
   становятся нечитаемыми. Оставляем строки целыми и даём горизонтальный
   скролл контейнеру. */
/* Тело шторки прокручивается по горизонтали: таблицы бывают на пять-семь
   колонок, ячейки с nowrap, и на 360px они не помещаются никак. Без этого
   правый край таблицы просто срезался. */
.sw-sizesheet {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sw-sizesheet table {
  /* max-content, а не 100%: таблица должна занять свою ширину и уехать
     в прокрутку, а не сжаться до нечитаемого. min-width держит её
     во всю ширину шторки, когда колонок мало. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.sw-sizesheet .tables-responsive,
.sw-sizesheet .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sw-sizesheet td,
.sw-sizesheet th {
  border: 1px solid var(--sw-line);
  padding: 7px 9px;
  text-align: center;
  white-space: nowrap;
  color: var(--sw-fg);
}
/* Шапка: тема-независимая подложка + явный цвет текста. Раньше стоял светлый
   --sw-shot, и в тёмной теме светлый текст исчезал на светлом фоне.

   Цвета из самой таблицы больше не мешают: их вырезает /local/ajax/sw_sizetable.php
   (правка 26.08.2026). До этого редактор админки проставлял в шапку белый текст,
   он ложился на нашу светлую подложку — и строка выглядела пустой. */
.sw-sizesheet td.title,
.sw-sizesheet th,
.sw-sizesheet tr:first-child td {
  background: rgba(128, 128, 128, .16);
  color: var(--sw-fg);
  font-weight: 650;
}

/* Название изделия, под которое написана таблица. Печатает эндпоинт —
   одинаково для телефона и десктопа. */
.sw-sizesheet__h {
  margin: 0 0 var(--sw-s-3);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.sw-sizesheet .heading {
  font-weight: 700;
  font-size: 13.5px;
  margin: var(--sw-s-3) 0 var(--sw-s-2);
}
.sw-sizesheet img { max-width: 100%; height: auto; border-radius: var(--sw-r); }
/* Вкладки (detail_clothes) без бутстрапа. */
.sw-sizesheet .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 var(--sw-s-3);
  padding: 0;
}
.sw-sizesheet .nav-tabs li a {
  display: block;
  padding: 7px 11px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r);
  font-size: 12.5px;
  color: var(--sw-fg);
  background: var(--sw-surface);
}
.sw-sizesheet .nav-tabs li.active a {
  border-color: var(--sw-accent);
  background: var(--sw-accent-dim);
  font-weight: 600;
}
.sw-sizesheet .tab-pane { display: none; }
.sw-sizesheet .tab-pane.active { display: block; }

/* ---------- Отзывы ---------- */
.sw-reviews { margin-top: var(--sw-s-5); }
.sw-reviews__head { margin-bottom: var(--sw-s-3); }
.sw-reviews__head b { font-size: 16px; font-weight: 750; letter-spacing: -.01em; }

.sw-reviews__note {
  border-radius: var(--sw-r);
  padding: var(--sw-s-3);
  font-size: 13px;
  margin-bottom: var(--sw-s-3);
}
.sw-reviews__note--ok { background: rgba(47, 143, 78, .1); color: var(--sw-ok); }
.sw-reviews__note--err { background: var(--sw-accent-dim); color: var(--sw-accent); }

.sw-reviews__list { list-style: none; margin: 0; padding: 0; }
.sw-review {
  padding: var(--sw-s-3) 0;
  border-top: 1px solid var(--sw-line-soft);
}
.sw-review:first-child { border-top: 0; }
.sw-review__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sw-s-3);
  margin-bottom: 4px;
}
.sw-review__author { font-weight: 650; font-size: 13.5px; }
.sw-review__date { font-size: 11.5px; color: var(--sw-hint); flex: none; }
.sw-review__text { font-size: 13.5px; line-height: 1.55; color: var(--sw-fg-2); }

.sw-reviews__empty {
  padding: 0 0 var(--sw-s-2);
}
.sw-reviews__empty p { margin: 0; font-size: 13.5px; }
.sw-reviews__empty-sub { margin-top: 4px !important; color: var(--sw-hint); font-size: 12.5px; }

.sw-reviews__form { margin-top: var(--sw-s-4); }
.sw-reviews__toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--sw-tap);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--sw-accent);
  cursor: pointer;
  list-style: none;
}
.sw-reviews__toggle::-webkit-details-marker { display: none; }
.sw-reviews__form[open] .sw-reviews__toggle { color: var(--sw-fg); }

.sw-reviews__box {
  display: flex;
  flex-direction: column;
  gap: var(--sw-s-3);
  margin-top: var(--sw-s-3);
}
.sw-reviews__field { display: flex; flex-direction: column; gap: 5px; }
.sw-reviews__field > span { font-size: 12px; color: var(--sw-hint); }
.sw-reviews__field > span i { font-style: normal; }
.sw-reviews__field input,
.sw-reviews__field textarea {
  width: 100%;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r);
  background: var(--sw-surface);
  padding: 11px 12px;
  font: inherit;
  font-size: 16px; /* iOS не зумит при 16px */
  color: var(--sw-fg);
}
.sw-reviews__field textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.sw-reviews__field input:focus,
.sw-reviews__field textarea:focus { outline: 2px solid var(--sw-accent); outline-offset: 1px; border-color: var(--sw-accent); }

.sw-reviews__captcha { display: flex; flex-direction: column; gap: var(--sw-s-2); }
.sw-reviews__captcha img { border-radius: var(--sw-r); border: 1px solid var(--sw-line); }

.sw-reviews__submit {
  align-self: flex-start;
  min-height: var(--sw-tap);
  padding: 0 20px;
  border: 0;
  border-radius: var(--sw-r);
  background: var(--sw-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.sw-reviews__submit:active { filter: brightness(.94); }

/* ---------- Подборки внизу карточки: «Похожие», «Вы смотрели» ---------- */
.sw-more { margin-top: var(--sw-s-5); }
.sw-more__h {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.01em;
  margin: 0 0 var(--sw-s-3);
}

/* Похожие: наша каталожная сетка превращается в горизонтальную ленту.
   Отрицательные поля — чтобы лента шла от края до края экрана. */
.sw-more .sw-catalog { margin: 0; }
.sw-more .sw-grid,
#sw-viewed-strip {
  display: flex;
  gap: var(--sw-s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin: 0 calc(var(--sw-s-4) * -1);
  padding: 0 var(--sw-s-4);
  scrollbar-width: none;
}
.sw-more .sw-grid::-webkit-scrollbar,
#sw-viewed-strip::-webkit-scrollbar { display: none; }
.sw-more .sw-card {
  flex: 0 0 46%;
  scroll-snap-align: start;
}
/* В ленте пейджер и пустое состояние не нужны. */
.sw-more .sw-pager,
.sw-more .sw-empty { display: none; }

/* Просмотренные — простые ссылки-карточки. */
.sw-vcard {
  flex: 0 0 40%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.sw-vcard__shot {
  aspect-ratio: 1 / 1.1;
  background: var(--sw-shot);
  border-radius: var(--sw-r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sw-vcard__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: var(--sw-s-2);
}
.sw-vcard__nm {
  font-size: 12.5px;
  line-height: 1.3;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sw-vcard__pr {
  font-size: 13.5px;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}


/* ═══════════ ПРОСМОТРЩИК ФОТОГРАФИИ ═══════════
   Открывается нажатием на фото в карточке (правка заказчика 25.08.2026:
   «не увеличивается фото»). Разметку строит script.js — здесь только вид.

   Тёмная подложка, а не фирменный фон: в просмотрщике должен быть виден
   товар, и любой светлый фон спорит с фотографией на белом. */
.sw-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;              /* выше липкой панели покупки и шторки размеров */
  display: none;
  background: rgba(16, 16, 18, .94);
  overscroll-behavior: contain;
  touch-action: none;        /* жесты обрабатывает скрипт: щипок и смахивание */
}
.sw-lightbox.is-open { display: block; }

.sw-lightbox__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sw-lightbox__stage img {
  max-width: 96vw;
  max-height: 92vh;
  /* Без анимации трансформации: она есть только у щелчка мышью,
     а при щипке и перетаскивании задержка читается как подтормаживание. */
  transform-origin: center center;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.sw-lightbox.is-zoom .sw-lightbox__stage img { cursor: grab; }
.sw-lightbox.is-zoom .sw-lightbox__stage img:active { cursor: grabbing; }

.sw-lightbox__x,
.sw-lightbox__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: var(--sw-r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.sw-lightbox__x:hover,
.sw-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }

.sw-lightbox__x {
  top: calc(var(--sw-s-3) + env(safe-area-inset-top));
  inset-inline-end: var(--sw-s-3);
}
.sw-lightbox__nav { top: 50%; transform: translateY(-50%); }
.sw-lightbox__nav--prev { inset-inline-start: var(--sw-s-3); }
.sw-lightbox__nav--next { inset-inline-end: var(--sw-s-3); }

.sw-lightbox__cnt {
  position: absolute;
  bottom: calc(var(--sw-s-4) + env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-family: var(--sw-mono);
  font-size: 12.5px;
}

/* На телефоне стрелок нет: кадры смахивают пальцем, а две кнопки поверх
   узкого экрана закрывают собой треть фотографии. */
@media (max-width: 767px) {
  .sw-lightbox__nav { display: none; }
}

/* End */


/* Start:/local/templates/starks_desktop/components/bitrix/catalog.section/starks/style.css?17879439956741*/
/* ============================================================
   Сетка товаров — десктопный слой.

   Базовая карточка приезжает из мобильной витрины
   (starks_mobile/components/bitrix/catalog.section/starks/style.css,
   подключается из template.php). Здесь только то, чего на телефоне
   быть не может: число колонок, наведение курсором, увеличенные
   под десктоп размеры.

   Ничего не переопределять без причины: разошедшиеся правила —
   это две разные карточки на двух витринах через полгода.
   ============================================================ */

/* Колонки. Мобильная версия жёстко задаёт две — здесь перекрываем,
   потому что это единственное, что физически меняется с шириной.

   Зазор 12px вместо стандартных 20 — правка заказчика 30.08.2026:
   «уменьшить отступ между плашками, чтобы фото были покрупнее».
   Сэкономленные 24px на ряду из четырёх уходят в ширину плиток. */
.sw-catalog .sw-grid{
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:var(--sw-s-4);
}

@media (min-width: 1024px){
  .sw-catalog .sw-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (min-width: 1366px){
  .sw-catalog .sw-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

/* ---------- НАВЕДЕНИЕ ----------
   На телефоне карточка отвечает на касание (:active), на десктопе —
   на курсор. Приподнимаем и подсвечиваем границу: человек должен видеть,
   что плитка кликабельна целиком, а не только название. */
.sw-card{
  transition:box-shadow var(--sw-dur-hover) var(--sw-ease),
             border-color var(--sw-dur-hover) var(--sw-ease),
             transform var(--sw-dur-hover) var(--sw-ease);
}

.sw-card:hover{
  border-color:var(--sw-hover-line);
  box-shadow:var(--sw-hover-lift);
  transform:translateY(-2px);
}

/* Фотографию слегка приближаем — приём каталогов одежды: движение
   подсказывает, что карточка живая, но не сдвигает соседей. */
.sw-card .sw-card__shot img{
  transition:transform 220ms var(--sw-ease);
}

.sw-card:hover .sw-card__shot img{ transform:scale(1.03); }

@media (prefers-reduced-motion: reduce){
  .sw-card:hover{ transform:none; }
  .sw-card:hover .sw-card__shot img{ transform:none; }
}

/* ---------- РАЗМЕРЫ ПОД КУРСОР ----------
   На телефоне плитки размеров — тап-таргеты 44px и горизонтальная
   прокрутка. На десктопе места хватает: показываем их в несколько рядов
   и реагируем на наведение. */
.sw-catalog .sw-card__sizes{
  flex-wrap:wrap;
  overflow:visible;
}

.sw-catalog .sw-card__size{
  transition:border-color var(--sw-dur-hover) var(--sw-ease),
             background var(--sw-dur-hover) var(--sw-ease);
}

.sw-catalog .sw-card__size:not(.is-off):not([disabled]):hover{
  border-color:var(--sw-accent);
  background:var(--sw-accent-dim);
  cursor:pointer;
}

/* ---------- ТИПОГРАФИКА ----------
   Мобильные кегли рассчитаны на 360px. На десктопной карточке шириной
   ~300px они выглядят мелко — поднимаем название и цену на ступень. */
@media (min-width: 1024px){
  .sw-catalog .sw-card__nm{ font-size:14px; }
  .sw-catalog .sw-card__pr b{ font-size:17px; }
}

/* ---------- КНОПКА ПОКУПКИ ----------
   На телефоне это круглая иконка в углу — там дорог каждый пиксель.
   На десктопе иконка без подписи читается хуже кнопки, поэтому
   расширяем её и подписываем при наведении на карточку. */
@media (min-width: 1024px){
  .sw-catalog .sw-quickadd{ cursor:pointer; }
  .sw-catalog .sw-quickadd:hover{ filter:brightness(1.06); }
}

/* Кнопка корзины — красной обводкой (правка заказчика 30.08.2026:
   «выделить красным цветом»). Обводка, не заливка: мобильное правило
   осознанно держит кнопку тихой — «четыре красных пятна в сетке
   спорили бы друг с другом»; контур выделяет действие, не крича. */
.sw-catalog .sw-quickadd{
  border-color:var(--sw-accent);
  color:var(--sw-accent);
}
.sw-catalog .sw-quickadd.is-off{
  border-color:var(--sw-line);
  color:var(--sw-graphite);
}

/* Цена — по вертикальному центру строки с кнопкой корзины
   (правка заказчика 30.08.2026; было прижато к низу). */
.sw-catalog .sw-card__prrow{ align-items:center; }

/* Фото — до краёв плашки (правка заказчика 30.08.2026): мобильный
   слой держит внутренний отступ 10/8px, чтобы кадр не упирался
   в бейджи, — на десктопе фото крупнее важнее. */
.sw-catalog .sw-card .sw-card__shot img{ padding:0; }

/* ---------- ПУСТОЕ СОСТОЯНИЕ И ПАГИНАЦИЯ ---------- */
.sw-catalog .sw-empty{ padding-block:var(--sw-s-6); }
.sw-catalog .sw-pager{ margin-top:var(--sw-s-6); }

/* ---------- ЧИПЫ ПОДРАЗДЕЛОВ ----------
   На широком десктопе они дублируют дерево в левой колонке — убраны
   (правка заказчика 30.08.2026). Скрываем стилем, а не выводом:
   на планшете 768–1023 левая колонка спрятана и чипы — единственный
   путь со страницы раздела в подраздел (мега-меню на тач-экранах
   тоже отключено). */
@media (min-width: 1024px){
  .sw-d .sw-subcats{ display:none; }
}

/* End */


/* Start:/local/templates/starks_mobile/components/bitrix/catalog.section/starks/style.css?178775321110226*/
/* Сетка товаров раздела. Вёрстка — design-system/components/product-card.html */

.sw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sw-s-2) var(--sw-s-2);
  margin-top: var(--sw-s-3);
}

.sw-card {
  /* Точка отсчёта для сердца «в избранное» — оно лежит поверх фото. */
  position: relative;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line-soft);
  border-radius: var(--sw-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 1 : 1.25 — под реальные фото каталога (279×372, то есть 3:4).
   При квадратной зоне по бокам оставались широкие пустые поля,
   а фото выглядело мелким.

   Зона фото задаёт размер сама и обрезает всё лишнее.
   Картинка позиционируется абсолютно, поэтому её собственные
   пропорции больше не могут растянуть карточку — раньше именно
   это выпускало фото за пределы плитки. */
.sw-card__shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
  background: var(--sw-shot);
}
.sw-card .sw-card__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* contain + inset centers по обеим осям; padding внутри, чтобы фото
     не упиралось в края и в бейджи */
  padding: 10px 8px 8px;
  mix-blend-mode: multiply;
}
.sw-card__noimg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.sw-card__noimg svg { color: var(--sw-line); }

.sw-card__bdgs {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.sw-bdg {
  font-family: var(--sw-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
}
.sw-bdg--hit  { background: var(--sw-graphite); color: var(--sw-graphite-ink); }
.sw-bdg--sale { background: var(--sw-accent);   color: var(--sw-accent-ink); }

.sw-card__sizes {
  display: flex;
  /* Одна строка с горизонтальной прокруткой (правка заказчика): ряды размеров
     больше не растягивают карточку, скроллбар спрятан — прокрутка пальцем. */
  flex-wrap: nowrap;
  gap: 3px;
  padding: 6px 9px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Ровно высота строки размеров: контейнер выводится и пустым, чтобы
     название ниже стояло на одном уровне у товаров без размеров. */
  min-height: 36px;
}
.sw-card__sizes::-webkit-scrollbar { display: none; }
.sw-card__sizes span {
  font-family: var(--sw-mono);
  font-size: 9.5px;
  color: var(--sw-hint);
  border: 1px solid var(--sw-line);
  border-radius: 5px;
  padding: 1.5px 5px;
}

.sw-card__meta {
  padding: 7px 9px 10px;
  display: flex;
  flex-direction: column;
  gap: var(--sw-s-1);
  flex: 1;
}

.sw-card__nm {
  /* Название — прямой ребёнок карточки, идёт после строки размеров. */
  padding: 6px 9px 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--sw-fg);
  text-decoration: none;
  /* Названия в каталоге длинные («Мотоботы кроссовые STARKS Rock, черный, р.44»).
     Три строки — предел, дальше карточки в двух колонках перестают быть
     одинаковыми по высоте и сетка рассыпается. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sw-card__prrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sw-s-2);
  margin-top: auto;
  padding-top: 5px;
}

.sw-card__pr { display: flex; flex-direction: column; line-height: 1.12; }
.sw-card__pr b {
  font-size: 14.5px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.sw-card__pr s {
  font-size: 11px;
  color: var(--sw-hint);
  font-variant-numeric: tabular-nums;
}
.sw-card__pr--ask { font-size: 12px !important; font-weight: 650 !important; color: var(--sw-hint); }

/* Кнопка добавления — графитовая, не акцентная: четыре красных пятна
   в сетке спорили бы друг с другом и с брендом. */
.sw-quickadd {
  flex: none;
  /* Основное действие карточки — комфортный тап 44×44 (правило дизайн-системы). */
  width: 44px;
  height: 44px;
  border-radius: var(--sw-r);
  border: 1px solid var(--sw-line);
  background: var(--sw-surface);
  color: var(--sw-graphite);
  display: grid;
  place-items: center;
  text-decoration: none;
}
.sw-quickadd:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }

/* ---------- Пусто ---------- */
.sw-empty {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line-soft);
  border-radius: var(--sw-r-lg);
  padding: 26px 20px;
  margin-top: var(--sw-s-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.sw-empty__art { color: var(--sw-line); }
.sw-empty b { font-size: 15.5px; font-weight: 730; }
.sw-empty p { margin: 0; font-size: 12.5px; color: var(--sw-hint); max-width: 28ch; line-height: 1.5; }
.sw-btn {
  margin-top: var(--sw-s-2);
  background: var(--sw-accent);
  color: var(--sw-accent-ink);
  border-radius: var(--sw-r);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}

/* ---------- Постраничная ---------- */
.sw-pager { margin-top: var(--sw-s-5); }
.sw-pager .sw-pager__list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sw-pager a, .sw-pager span.sw-pager__cur {
  min-width: var(--sw-tap);
  height: var(--sw-tap);
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid var(--sw-line);
  border-radius: var(--sw-r);
  background: var(--sw-surface);
  color: var(--sw-fg);
  text-decoration: none;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.sw-pager span.sw-pager__cur {
  border-color: var(--sw-accent);
  background: var(--sw-accent-dim);
  font-weight: 700;
}

/* «от» у цены товара с разными по стоимости размерами */
.sw-card__pr b em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--sw-hint);
}


/* Размеры-селекторы: предвыбранный размер подсвечен — видно, какой уйдёт
   в корзину; тап меняет выбор. Крупнее прежних 9.5px/22px — попадаемо пальцем. */
.sw-card__size {
  flex: none; /* в однострочной ленте не сжимаются — уходят в прокрутку */
  font-family: var(--sw-mono);
  font-size: 11px;
  color: var(--sw-fg-2);
  border: 1px solid var(--sw-line);
  border-radius: 6px;
  padding: 5px 9px;
  text-decoration: none;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  background: var(--sw-surface);
  cursor: pointer;
  font-weight: 500;
}
.sw-card__size[aria-pressed="true"] {
  /* Сплошной акцент с белым текстом: полупрозрачная подложка в светлой
     теме читалась «красная кнопка с чёрным шрифтом» (правка заказчика). */
  border-color: var(--sw-accent);
  background: var(--sw-accent);
  color: var(--sw-accent-ink);
  font-weight: 650;
}
.sw-card__size.is-off,
.sw-card__size[disabled] { opacity: .35; text-decoration: line-through; cursor: default; }
.sw-card__size:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 1px; }

/* Пока показан степпер, размер не переключаем — выбор зафиксирован. */
.sw-card.is-instep .sw-card__sizes { opacity: .45; pointer-events: none; }

.sw-quickadd[disabled] { opacity: .5; }
.sw-quickadd.is-err { border-color: var(--sw-danger); color: var(--sw-danger); }
.sw-quickadd.is-off { color: var(--sw-hint); }

/* Степпер занимает место кнопки — внизу карточки. Управление
   не должно прыгать на картинку (правило дизайн-системы). */
.sw-cardstep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  margin-top: 6px;
  padding: 0 3px;
  border-radius: var(--sw-r);
  background: var(--sw-ok);
  color: #fff;
  transition: opacity var(--sw-dur) var(--sw-ease);
}
.sw-cardstep button {
  width: 32px;
  height: 36px;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 19px;
  cursor: pointer;
  border-radius: 8px;
}
.sw-cardstep button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.sw-cardstep b,
.sw-cardstep__mid {
  flex: 1;
  text-align: center;
  font-family: var(--sw-mono);
  font-size: 12.5px;
  font-weight: 600;
}

/* Середина степпера ведёт в корзину: кнопка без собственного фона,
   но с курсором-указателем — иначе она не читается как нажимаемая.
   Селектор с родителем — чтобы перебить `.sw-cardstep button { width: 32px }`,
   иначе подпись сжалась бы до ширины плюса. */
.sw-cardstep .sw-cardstep__mid {
  width: auto;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 650;
  cursor: pointer;
}

/* End */
/* /local/templates/starks_desktop/components/bitrix/catalog.element/starks/style.css?178794398230986 */
/* /local/templates/starks_mobile/components/bitrix/catalog.element/starks/style.css?178784559420947 */
/* /local/templates/starks_desktop/components/bitrix/catalog.section/starks/style.css?17879439956741 */
/* /local/templates/starks_mobile/components/bitrix/catalog.section/starks/style.css?178775321110226 */