/* 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.section/starks/style.css?17879439956741 */
/* /local/templates/starks_mobile/components/bitrix/catalog.section/starks/style.css?178775321110226 */